diff --git a/Sources/Tasks/ExportProfileData.php b/Sources/Tasks/ExportProfileData.php index 00df1f9d73..b46142e538 100644 --- a/Sources/Tasks/ExportProfileData.php +++ b/Sources/Tasks/ExportProfileData.php @@ -146,20 +146,16 @@ class ExportProfileData extends BackgroundTask
-
-
-
-
- -
-
-
+
+
+
+
@@ -167,31 +163,29 @@ class ExportProfileData extends BackgroundTask
+
+
'; } echo ' diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 41a4a36630..693736b14d 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -909,7 +909,13 @@ a[class^="mobile_generic_menu_"] { display: none; } +/* A band of its own across the page, under the header. */ #main_menu { + background: var(--mainmenu-bg); + border-color: var(--mainmenu-border-color); + border-style: var(--mainmenu-border-style); + border-width: var(--mainmenu-border-width); + box-shadow: var(--mainmenu-box-shadow); margin: 0 0 4px 0; } @@ -1217,27 +1223,17 @@ html[lang="el-GR"] .inline_mod_check { } /* The framing graphics */ -/* The top bar. */ -#top_section { - border-bottom: 1px solid #bbb; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); - background: #fff; - clear: both; -} -#top_section::after { - content: ""; - display: block; - clear: both; -} #top_info { padding: 5px 0; line-height: 1.3em; max-width: 100%; } +/* These hang off #top_info, which is positioned. It sits at the end of the +/* header, so they have to open towards the start or they run off the edge +/* of the screen on a narrow window. */ #pm_menu, #alerts_menu, #profile_menu { - left: 0; - right: 0; - padding-right: 10px; + inset-inline: auto 0; + padding-inline-end: 10px; } #profile_menu_top > img.avatar { height: 18px; @@ -1259,17 +1255,39 @@ html[lang="el-GR"] .inline_mod_check { #languages_form { margin: 0 0 0 10px; } -/* The logo and slogan. */ +/* The header. Full width, with its contents lined up with the rest of the +/* page by the wrapper inside it. */ #header { - padding: 2px 2px 12px 2px; + background: var(--header-bg); + border-color: var(--header-border-color); + border-radius: var(--header-border-radius); + border-style: var(--header-border-style); + border-width: var(--header-border-width); + box-shadow: var(--header-box-shadow); + margin: 0; + min-height: var(--header-height); + padding: .5em .2em; +} +#header .content_wrapper { + align-items: center; display: flex; - align-items: flex-end; + gap: .5em; + justify-content: space-between; + min-height: var(--header-height); } #header::after { content: ""; display: block; clear: both; } +/* Everything about the current user sits at the end of the header, stacked. */ +.user_panel { + align-content: space-between; + display: inline-grid; + flex: 1; + gap: .5em; + justify-content: flex-end; +} /* The main title. */ h1.forumtitle { font-size: 1.8em; @@ -1298,25 +1316,15 @@ img#smflogo { } /* /* The user info, news, etc.*/ -#upper_section { - padding: 2px 2px 0 2px; -} -#inner_section { - padding: 12px 10px 2px 10px; - border-radius: 6px 6px 0 0; -} -#inner_section::after { - content: ""; - display: block; - clear: both; -} -/* The upper_section, float the two each way */ +/* The clock and the news line, one at each end. The padding was on the +/* section that used to wrap this. */ #inner_wrap { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #bbb; margin-bottom: 12px; + padding: 12px 10px 2px 10px; } .user { padding: 0 4px 8px 4px; @@ -1373,7 +1381,7 @@ ul li.greeting { border-width: var(--navigatesection-border-width); box-shadow: var(--navigatesection-box-shadow); margin-block: .5em .75em; - margin-inline: 0; + margin-inline: 10px; padding: 0; } .navigate_section ol { @@ -1469,15 +1477,51 @@ ul li.greeting { /* Footer is now full-width by default. */ /* The footer with copyright links etc. */ #footer { + background: var(--footer-bg); + border-color: var(--footer-border-color); + border-style: var(--footer-border-style); + border-width: var(--footer-border-width); + box-shadow: var(--footer-box-shadow); + color: var(--footer-color); + flex: none; + font-size: var(--footer-font-size); margin: 4em 0 0 0; + min-height: var(--footer-height); padding: 10px 0; - background: #3e5a78; - border-top: 3px solid #b2b6bd; - flex: none; } -#footer li, #footer p, #footer a { - font-size: 0.9em; - color: #fff; +#footer li, #footer p { + color: var(--footer-color); +} +#footer a { + color: var(--footer-link-color); + font-weight: var(--footer-link-font-weight); + text-decoration: var(--footer-link-text-decoration); + text-shadow: var(--footer-link-text-shadow); +} +#footer a:hover { + color: var(--footer-link-color_hover); + font-weight: var(--footer-link-font-weight_hover); + text-decoration: var(--footer-link-text-decoration_hover); + text-shadow: var(--footer-link-text-shadow_hover); +} +#footer a:focus { + color: var(--footer-link-color_focus); + font-weight: var(--footer-link-font-weight_focus); + text-decoration: var(--footer-link-text-decoration_focus); + text-shadow: var(--footer-link-text-shadow_focus); +} +/* Copyright at one end, help links at the other. */ +#footer ul { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 1.25em .25em; + justify-content: space-between; +} +#footer li.helplinks { + display: flex; + flex-wrap: wrap; + gap: .75em; } #footer li.copyright { display: block; @@ -4159,9 +4203,9 @@ h3.profile_hd::before, /* Background of buttons */ .dropmenu li ul, .top_menu, .dropmenu li li:hover, .button, .dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover, -#top_section, .quickbuttons > li, +.quickbuttons > li, .quickbuttons li ul, .quickbuttons li ul li a:hover, .quickbuttons ul li a:focus, -.inline_mod_check, .popup_window, #inner_section, .post_options ul, +.inline_mod_check, .popup_window, .post_options ul, .post_options ul a:hover, .post_options ul a:focus, .dropmenu .viewport .overview a:hover, .dropmenu .viewport .overview a:focus { background: #fff; /* fallback for some browsers */ background-image: linear-gradient(#e2e9f3 0%, #fff 70%); diff --git a/Themes/default/css/responsive.css b/Themes/default/css/responsive.css index 5091de60cb..a2eb7e0112 100644 --- a/Themes/default/css/responsive.css +++ b/Themes/default/css/responsive.css @@ -159,7 +159,7 @@ .content_wrapper { width: 100%; } - #upper_section, #inner_section, #content_section { + #content_section { border-radius: 0; } #boardindex_table .stats { diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index 75e5ddf632..e36f35bf83 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -103,12 +103,6 @@ img#smflogo { padding-left: 0; text-align: left; } -#upper_section .news { - float: right; -} -.navigate_section .unread_links { - float: left; -} /* Profile drop it needs reverse on RTL */ #profile_menu_top > img.avatar { diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css index ac3686dc8b..80d8c2f9a7 100644 --- a/Themes/default/css/variables.css +++ b/Themes/default/css/variables.css @@ -47,6 +47,46 @@ /** Layout **/ --wrapper-width: 1200px; + /** Footer **/ + --footer-bg: var(--primary-color-700); + --footer-border-color: transparent; + --footer-border-style: solid; + --footer-border-width: 0; + --footer-box-shadow: none; + --footer-color: hsl(0, 0%, 96%); + --footer-font-size: 0.85em; + --footer-height: 35px; + + /** Footer Links **/ + --footer-link-color: #fff; + --footer-link-color_focus: var(--footer-link-color_hover); + --footer-link-color_hover: #f8f8f8; + --footer-link-font-weight: 400; + --footer-link-font-weight_focus: var(--footer-link-font-weight_hover); + --footer-link-font-weight_hover: var(--footer-link-font-weight); + --footer-link-text-decoration: none; + --footer-link-text-decoration_focus: var(--footer-link-text-decoration_hover); + --footer-link-text-decoration_hover: underline; + --footer-link-text-shadow: none; + --footer-link-text-shadow_focus: none; + --footer-link-text-shadow_hover: none; + + /** Main Menu **/ + --mainmenu-bg: linear-gradient(#e2e9f3 0%, #fff 70%); + --mainmenu-border-color: #bbb; + --mainmenu-border-style: solid; + --mainmenu-border-width: 0 0 1px 0; + --mainmenu-box-shadow: none; + + /** Header **/ + --header-bg: #fff; + --header-border-color: transparent; + --header-border-radius: 0; + --header-border-style: solid; + --header-border-width: 0; + --header-box-shadow: none; + --header-height: 80px; + /** HTML **/ --html-bg: #3e5a78; diff --git a/Themes/default/index.template.php b/Themes/default/index.template.php index c4c15d9a1c..b7a52dacc8 100644 --- a/Themes/default/index.template.php +++ b/Themes/default/index.template.php @@ -228,16 +228,22 @@ functions on the SMF wiki. */ function template_body_above() { - // Wrapper div now echoes permanently for better layout options. h1 a is now target for "Go up" links. + // The header holds the forum title on one side and everything to do with + // the current user on the other. h1 a is the target for "Go up" links. echo ' -
-
'; +
+
+ '; + // The menu is a band of its own across the page, with its contents lined up + // with everything else by the wrapper inside it. echo ' -
-

- ', empty(Utils::$context['header_logo_url_html_safe']) ? Utils::$context['forum_name_html_safe'] : '' . Utils::$context['forum_name_html_safe'] . '', ' -

'; - - echo ' - ', empty(Theme::$current->settings['site_slogan']) ? '' : '
' . Theme::$current->settings['site_slogan'] . '
', ''; - - echo ' -
+
-
-
-
is_guest ? ' class="hide_720"' : '', '> -
- '; +
is_guest ? ' class="hide_720"' : '', '> +
+ '; if (!User::$me->is_guest) { echo ' - '; + '; } echo ' -
'; +
'; // Show a random news item? (or you could pick one from news_lines...) if (!empty(Theme::$current->settings['enable_news']) && !empty(Utils::$context['random_news_line'])) { echo ' -
-

', Lang::getTxt('news', file: 'General'), ':

-

', Utils::$context['random_news_line'], '

-
'; +
+

', Lang::getTxt('news', file: 'General'), ':

+

', Utils::$context['random_news_line'], '

+
'; } echo ' -
'; - - // Show the menu here, according to the menu sub template, followed by the navigation tree. - // Load mobile menu here - echo ' - - - ', Lang::getTxt('mobile_user_menu', file: 'General'), ' - - '; +
'; theme_linktree(); - echo ' -
-
'; - // The main content should go here. echo '
@@ -506,13 +497,18 @@ function template_body_below() // Show the footer with copyright, terms and help links. echo '