[TikiWiki-commits] [Git][tikiwiki/tiki][30.x] [FIX][UI] Miscellaneous theme and other visual fixes.

Gary Cunningham-Lee pushed to branch 30.x at Tiki Wiki CMS Groupware / Tiki


Commits:
39738370 by Gary Cunningham-Lee at 2026-07-14T00:34:22+09:00
[FIX][UI] Miscellaneous theme and other visual fixes.
---
* [FIX][UI] Miscellaneous theme and other visual fixes.
---
* [FIX][UI] Miscellaneous theme and other visual fixes.

See merge request tikiwiki/tiki!10707


(cherry picked from commit eb21c9551fb567402b8e2c8ff3df060301890563)

e47a9626 [FIX][UI] Miscellaneous theme and other visual fixes.

Co-authored-by: Gary Cunningham-Lee <gary_c-39LOpZwlz1/[email protected]>

See merge request tikiwiki/tiki!10709

- - - - -


9 changed files:

- themes/base_files/scss/_tiki-modules.scss
- themes/base_files/scss/_tiki-pagetop_colors.scss
- themes/boosted/scss/_css-variables.scss
- themes/darkshine/scss/_css-variables.scss
- themes/darkshine/scss/_tiki-selectors.scss
- themes/darkshine/scss/_variables-dark.scss
- themes/tikicorp/scss/_css-variables.scss
- themes/tikicorp/scss/_tiki-selectors.scss
- themes/vapor/scss/_variables.scss


Changes:

=====================================
themes/base_files/scss/_tiki-modules.scss
=====================================
@@ -96,15 +96,15 @@ header.container,
         gap: 1rem;
         padding: 0.5rem 0;
 
-        .sitetitle {
-            font-size: 1.25rem;
-            font-weight: 500;
-        }
-
-        .sitesubtitle {
-            font-size: 0.875rem;
-            opacity: 0.8;
-        }
+//        .sitetitle {             (Handled by CSS variables)
+//            font-size: 1.25rem;
+//            font-weight: 500;
+//        }
+//
+//        .sitesubtitle {
+//            font-size: 0.875rem;
+//            opacity: 0.8;
+//        }
     }
 }
 
@@ -459,10 +459,10 @@ header:not(.sticky-top) a.sitelogo {
     }
 }
 
-// Basic Bootstrap (layout_social)
-.layout_social .sticky-top .sitesubtitle {
-    font-size: calc(var(--bs-navbar-brand-font-size) * .8);
-}
+// // Basic Bootstrap (layout_social)
+// .layout_social .sticky-top .sitesubtitle {
+//     font-size: calc(var(--bs-navbar-brand-font-size) * .8);
+// }
 
 // Remove Bootstrap default top and bottom padding on navbars in modules (nested navbars)
 .layout_social header .top_modules .navbar {


=====================================
themes/base_files/scss/_tiki-pagetop_colors.scss
=====================================
@@ -11,15 +11,16 @@
 body:not(.tiki-admin) .tiki-top-nav-light,
 body:not(.tiki-admin) .tiki-top-nav-dark
 {
-    background: var(--tiki-top-bg);
+    background: var(--tiki-top-bg) !important; // !important added to deal with Smartmenus undefined background
     color: var(--tiki-top-text-color); // Turns out it's necessary to provide a variable for this. Previously written: The idea for this was text, etc. that isn't a link, but probably anything in these nav zones that isn't a link will have its own CSS rules already.
     a:not(.navbar-brand,.dropdown-item,.dropdown a,.btn,.sm-sub-link,.alert-link),
     .dropdown-toggle,                  // Moved from tiki-selectors (this and next line)
     .nav-link.dropdown-toggle,
     .btn.btn-link,
-    .sm-navbar:not(.sm-navbar--collapsible-only) .sm-nav-item .sm-nav-link
+    .sm-navbar:not(.sm-navbar--collapsible-only) .sm-nav-item .sm-nav-link,
+    .sm-toggler .sm-toggler-anchor
     {
-        color: var(--tiki-top-color);
+        color: var(--tiki-top-color) !important;
         &:hover {
             color: var(--tiki-top-hover-color);
             background: var(--tiki-top-hover-bg);
@@ -27,6 +28,12 @@ body:not(.tiki-admin) .tiki-top-nav-dark
     }
     border: var(--tiki-top-border); // Style and color, for example, solid black
     border-width: var(--tiki-top-border-width); // For example, 1px, or 0px 0px 4px 0px
+}
+
+// Shadow is only appropriate on header.sticky-top, to indicate header overlies page content
+body.layout_social:not(.tiki-admin) .tiki-top-nav-light,
+body.layout_social:not(.tiki-admin) .tiki-top-nav-dark
+{
     box-shadow: var(--tiki-top-box-shadow);
 }
 
@@ -60,12 +67,12 @@ body:not(.tiki-admin) .tiki-top-nav-dark
 }
 
 
-// Apply background: transparent to children of uppermost parent to prevent nested gradients
+// Apply background: transparent to children of uppermost parent to prevent nested gradients and possible interference with box-shadow on page header
 .tiki.layout_basic:not(.tiki-admin) {
-    .page-header .top_modules,
-    .page-header .top_modules .navbar,
+    .top_modules, // In template, page-header was changed to site-header, so changing here now
+    .top_modules .navbar,
     .topbar_modules .navbar {
-        background: transparent;
+        background: transparent !important;
         --bs-bg-opacity: 0;
         box-shadow: none;
         border: none;
@@ -77,7 +84,7 @@ body:not(.tiki-admin) .tiki-top-nav-dark
     .topbar,
     .topbar_modules,
     .topbar_modules .navbar {
-        background: transparent;
+        background: transparent !important;
         --bs-bg-opacity: 0;
         box-shadow: none;
         border: none;
@@ -85,11 +92,11 @@ body:not(.tiki-admin) .tiki-top-nav-dark
 }
 
 .layout_social:not(.tiki-admin) {
-    header .top_modules,
-    header .top_modules .navbar,
+    .top_modules,
+    .top_modules .navbar,
     .topbar,
     .topbar .navbar {
-        background: transparent;
+        background: transparent !important;
         --bs-bg-opacity: 0;
         box-shadow: none;
         border: none;


=====================================
themes/boosted/scss/_css-variables.scss
=====================================
@@ -55,7 +55,7 @@
     //    --tiki-topbar-hover-bg:;
     --tiki-topbar-active-bg: #ff7900;
     --tiki-topbar-text-color: #000;
-    --tiki-topbar-border: solid #000;
+    --tiki-topbar-border: solid #cccccc;
     //    --tiki-topbar-box-shadow:;
 }
 


=====================================
themes/darkshine/scss/_css-variables.scss
=====================================
@@ -14,6 +14,10 @@
 
 @import "variables";
 
+:root {
+    --tiki-darkshine-navbar-bg: #90140c url("../images/stripes.png") repeat-x 50% 0 !important
+}
+
 // Used for L&F nav color choice and color mode override
 @mixin top-nav-dark {
     --tiki-top-bg: var(--tiki-darkshine-navbar-bg); // #{$tiki-top-navbar-bg};


=====================================
themes/darkshine/scss/_tiki-selectors.scss
=====================================
@@ -20,22 +20,36 @@ $imagePath: "../images/";
 // Body
 body,
 body.fullscreen,
-.layout_social header.navbar.navbar-dark.bg-dark,
-.layout_social header.navbar.navbar-light.bg-light {
+.layout_social header.navbar.bg-dark,
+.layout_social header.navbar.bg-light,
+.layout_basic header .navbar.bg-dark,
+.layout_basic header .navbar.bg-light {
     background: var(--tiki-darkshine-diagonals-bg);
 }
 
+div.page-content-top-margin {
+    --tiki-page-content-top-margin: 0px;
+}
+
 .layout_classic #middle,
 .layout_basic .row-middle,
-.layout_social .middle.container,
 .tiki-admin .row-middle {
     //    background: #f3f3f3;
     border: solid 15px #600;
-    border-top: none;
+//    border-top: none;
+}
+.layout_social .topbar_modules {
+    border: solid #600;
+    border-width: 15px 15px 3px 15px;
+}
+
+.layout_social .middle.container {
+    border: solid #600;
+    border-width: 0px 15px 15px 15px;
 }
 
-.top_modules {
-    justify-content: center !important;
+.col1, .col2, .col3 {
+    padding-top: var(--tiki-page-content-top-margin);
 }
 
 #bottom_modules {
@@ -195,21 +209,8 @@ body.fullscreen,
 //   }
 //}
 
-header.sticky-top .navbar.bg-light .navbar-nav > .nav-item:hover,
-header.sticky-top .navbar.bg-dark .navbar-nav > .nav-item:hover,
-header.sticky-top .navbar.bg-light > li:active,
-header.sticky-top .navbar.bg-dark > li:active,
-header.sticky-top .navbar.bg-dark .nav-link:hover,
-header.sticky-top .navbar.bg-light .nav-link:active,
-header.sticky-top .navbar-light .navbar-brand,
-header.sticky-top .navbar.bg-light .nav-link:hover,
-header.sticky-top .navbar.bg-light .nav-link:active,
-header.sticky-top .navbar.bg-light button.dropdown-toggle:hover,
-header.sticky-top .navbar.bg-light button.dropdown-toggle:active {
-    color: #fff;
-    text-decoration: none;
-    background: linear-gradient(to bottom, #555555 0%, #4f4f4f 5%, #4c4b4b 13%, #3d3d3d 55%, #2e2e2e 58%, #121212 100%);
-}
+// header.sticky-top .navbar.bg-light .navbar-nav > .nav-item:hover, etc. rules removed because they are overridden by CSS variable values in _css-variables.scss.
+
 
 .top_modules.bg-light,
 .top_modules.bg-dark {
@@ -231,12 +232,12 @@ header.sticky-top .navbar.bg-light button.dropdown-toggle:active {
     padding-right: 0;
 }
 
-.tiki.layout_classic .topbar_modules,
+.tiki.layout_classic #topbar .topbar_modules, // #topbar added to strengthen selector and override _tiki-pagetop_colors.scss rule
 .tiki.layout_basic .topbar_modules,
 .tiki.layout_social:not(.uab.tiki_admin) .topbar_modules {
     background: #000 url('#{$imagePath}stripes_small.gif') repeat-x !important;
-    border: solid 15px #600000 !important;
-    border-bottom: 1px solid #916047 !important;
+//    border: solid 15px #600000 !important;
+//    border-bottom: 1px solid #916047 !important;
 
     .navbar-nav .nav-item {
         color: #000 !important;
@@ -276,6 +277,7 @@ header.sticky-top .navbar.bg-light button.dropdown-toggle:active {
 .tiki.layout_basic .topbar_modules {
     border-left: none !important;
     border-right: none !important;
+    border-bottom: 3px solid #600 !important; // #916047 !important;
 }
 
 


=====================================
themes/darkshine/scss/_variables-dark.scss
=====================================
@@ -52,7 +52,7 @@ $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               #FF4C42; // Light-mode color adjusted with WebAIM
-$link-color-dark:                   #FF4747; // tint-color($primary, 40%) !default;
+$link-color-dark:                   #E06C00; // #FF4747; // tint-color($primary, 40%) !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
 


=====================================
themes/tikicorp/scss/_css-variables.scss
=====================================
@@ -34,21 +34,21 @@
 }
 
 @mixin top-nav-light {
-    --tiki-top-bg: rgb(255, 255, 255);  // Only instance, along with --tiki-topbar-bg below.
+    --tiki-top-bg: #ebebeb; // rgb(255, 255, 255);  // Only instance, along with --tiki-topbar-bg below.
     --tiki-top-color: #{$navbar-light-color};
     --tiki-top-hover-color: #{$navbar-light-hover-color};
     --tiki-site-title-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
     --tiki-site-subtitle-color: #{$navbar-light-brand-color, var(--tiki-top-color)};
     --tiki-top-border: none;
-    --tiki-top-box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 8px 0px;
+    --tiki-top-box-shadow: none; // rgba(0, 0, 0, 0.12) 0px 4px 8px 0px;
 }
 
 @mixin topbar-nav-light {
-    --tiki-topbar-bg: rgb(255, 255, 255);
+    --tiki-topbar-bg: #ebebeb; // rgb(255, 255, 255);
     --tiki-topbar-color: #{$navbar-light-color};
     --tiki-topbar-hover-color: #{$navbar-light-hover-color};
     --tiki-topbar-text-color: rgba(0, 0, 0, 0.7);
-    --tiki-topbar-box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 8px 0px;
+    --tiki-topbar-box-shadow: none; // rgba(0, 0, 0, 0.12) 0px 4px 8px 0px;
 }
 
 .tiki-top-nav-light {


=====================================
themes/tikicorp/scss/_tiki-selectors.scss
=====================================
@@ -211,10 +211,9 @@ h1.pagetitle a {
     margin: 20px 40px;
 }
 
-header.sticky-top {
+header.sticky-top > nav {
     margin: 0 40px 0 40px;
     border-radius: 0 0 20px 20px;
-    padding: 20px;
 }
 
 .header_outer,
@@ -223,10 +222,15 @@ header.sticky-top {
     border-radius: 20px;
 }
 
+.middle_outer {
+    margin-top: -30px;
+}
+
 .topbar-wrapper, // Classic Bootstrap and classic Tiki layouts
 .layout_basic .topbar_modules { // Single container layout
     border-radius: 20px;
-    margin: 32px 40px 0px;
+    margin: 0 40px 0;
+    padding: 40px 20px 20px 20px;
 }
 
 //  Dropdowns


=====================================
themes/vapor/scss/_variables.scss
=====================================
@@ -37,6 +37,7 @@ $body-tertiary-bg:          #250f46;
 $body-emphasis-color:       #6cf8e7;
 
 // Links
+$link-color: $cyan;
 
 // Components
 $component-active-bg:         $pink; // Repeating vapor default $primary !default;
@@ -59,14 +60,14 @@ $nav-link-color:                    var(--#{$prefix}link-color); // !default;
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color); // default;
 
 // Navbar
-//$navbar-light-color:                #000;
-//$navbar-light-hover-color:          $gray-800;
-//$navbar-light-active-color:         $gray-900;
-//$navbar-light-disabled-color:       $gray-700;
-$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .95); // !default;
-$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8); // !default;
-$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1); // !default;
-$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3); // !default;
+$navbar-light-color:                #000;
+$navbar-light-hover-color:          $gray-800;
+$navbar-light-active-color:         $gray-900;
+$navbar-light-disabled-color:       $gray-700;
+//$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .95); // !default; Reference was lost somehow.
+//$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8); // !default;
+//$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1); // !default;
+//$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3); // !default;
 $navbar-light-brand-color:          $navbar-light-active-color; // !default;
 $navbar-light-brand-hover-color:    $navbar-light-active-color; // !default;
 



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/39738370a3029909d795ac040a547557d9c0c107

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/39738370a3029909d795ac040a547557d9c0c107
You're receiving this email because of your account on gitlab.com. Manage all notifications: https://gitlab.com/-/profile/notifications | Help: https://gitlab.com/help

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs