From 73c4aee0b3c4783afae2007f6215c6f239d0365a Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Wed, 19 Aug 2026 14:22:37 +0530 Subject: [PATCH 1/5] [UI] Add dark/light theme toggle Signed-off-by: Mayank Sharma --- assets/scss/_navbar_project.scss | 141 +++++++++++ assets/scss/_styles_project.scss | 392 +++++++++++++++++++++++++++++++ layouts/_default/baseof.html | 2 + layouts/_default/content.html | 2 +- layouts/docs/list.html | 2 +- layouts/docs/rest-apis.html | 2 +- layouts/partials/head.html | 13 + layouts/partials/navbar.html | 62 ++++- layouts/release/list.html | 2 +- layouts/video/list.html | 2 +- 10 files changed, 611 insertions(+), 9 deletions(-) diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss index de8e5eab459..94583b095fd 100644 --- a/assets/scss/_navbar_project.scss +++ b/assets/scss/_navbar_project.scss @@ -260,4 +260,145 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em &:focus ~ .highlight-box { box-shadow: none; } +} + +// Theme Toggle Button +.theme-toggle-nav-item { + margin-right: 0.75rem; + display: flex; + align-items: center; + justify-content: center; +} + +.theme-toggle { + --size: 1.4rem; + appearance: none; + border: none; + background: transparent; + cursor: pointer; + width: var(--size); + height: var(--size); + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + color: #00b39f; + box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0 0; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + vertical-align: middle; + outline: none; + + &:hover { + color: #00d3a9; + transform: scale(1.08); + } + + &:focus-visible { + outline: 2px solid #00b39f; + outline-offset: 3px; + } +} + +// Light theme state for toggle button +[data-theme="light"] .theme-toggle, +[data-bs-theme="light"] .theme-toggle { + --ray-size: calc(var(--size) * -0.4); + --offset-orthogonal: calc(var(--size) * 0.65); + --offset-diagonal: calc(var(--size) * 0.45); + transform: scale(0.8); + color: #ebc017; + box-shadow: inset 0 0 0 var(--size), + calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), + var(--offset-orthogonal) 0 0 var(--ray-size), + 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), + 0 var(--offset-orthogonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), + var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), + var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); + + &:hover { + color: #f59e0b; + transform: scale(0.9); + } +} + +// Light theme adjustments for the Navbar +[data-theme="light"], +[data-bs-theme="light"] { + .td-navbar, + .navbar-dark { + background-color: #ffffff; + border-bottom: 1px solid #e5e7eb; + + .nav-link { + color: #374151; + + &:hover { + color: $primary; + } + + &.current { + color: $primary; + } + } + + .dropdown-menu { + background-color: #ffffff; + border: 1px solid #e5e7eb; + box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08); + + .dropdown-item { + color: #1f2937; + + &:hover { + background-color: rgba(0, 179, 159, 0.08); + color: $primary; + box-shadow: 0 0 10px rgba(0, 179, 159, 0.2); + + img { + filter: none; + } + } + } + + .dropdown-divider { + border-top: 1px solid #e5e7eb; + } + } + } + + .apps-dropdown .dropdown-menu { + background-color: #ffffff; + border: 1px solid #e5e7eb; + + .dropdown-item { + background-color: #f8f9fa; + border: 1px solid #e5e7eb; + color: #1f2937; + + span { + color: #1f2937; + } + + &:hover { + background-color: #ffffff; + border-color: $primary; + box-shadow: 0 0 10px rgba(0, 179, 159, 0.25); + color: $primary; + + span { + color: $primary; + } + } + } + } + + img.grid-icon { + filter: invert(0.2); + &:hover { + filter: invert(0.5); + } + } } \ No newline at end of file diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 3be288ac14f..174de0b57db 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -809,3 +809,395 @@ h1, h2, h3, h4, h5, h6 { padding-top: 0; } } + +// ========================================== +// LIGHT THEME STYLING +// ========================================== +[data-theme="light"], +[data-bs-theme="light"] { + background-color: #ffffff; + color: #1f2937; + + body { + background-color: #ffffff; + color: #1f2937; + } + + .td-home { + background-color: #ffffff; + } + + .td-main main { + background-color: #ffffff; + } + + .td-content { + color: #1f2937; + + > h1, + > h2, + > h3, + > h4, + > h5, + > h6 { + color: #111827; + } + + h2 { + color: #111827; + } + + p, + li, + td { + color: #374151; + } + + .lead { + color: #4b5563; + } + + p code, + li > code, + table code { + background-color: #f3f4f6; + color: #0f766e; + border: 1px solid #e5e7eb; + } + + blockquote { + color: #4b5563; + border-left-color: $primary; + background-color: #f9fafb; + padding: 0.75rem 1rem; + border-radius: 0 0.375rem 0.375rem 0; + } + } + + a:hover { + color: $primary; + } + + // Left sidebar in light mode + .td-sidebar { + background-image: none; + background-color: #f8f9fa; + border-right: 1px solid #e5e7eb; + + .td-sidebar-nav { + &__section-title a { + color: #111827; + } + + .td-sidebar-link__page { + color: #4b5563; + + &:hover { + color: $primary; + } + } + + a:hover { + color: $primary; + } + + a.active:not(.tree-root) { + background-image: none; + background-color: rgba(0, 179, 159, 0.1); + border-left: 3px solid $primary; + color: $primary; + } + + a.active.tree-root { + background-color: rgba(0, 179, 159, 0.1); + border: 1px solid $primary; + color: $primary; + } + + .td-sidebar-link.tree-root { + border-bottom: 1px solid #e5e7eb; + color: #111827; + } + } + } + + // Right TOC sidebar in light mode + .td-sidebar-toc { + background-image: none; + background-color: #ffffff; + border-left: 1px solid #e5e7eb; + + .td-toc #TableOfContents a { + color: #4b5563; + + &:hover, + &:focus-visible { + color: $primary; + background-color: rgba(0, 179, 159, 0.08); + } + } + + .td-page-meta a { + color: #6b7280; + + &:hover { + color: $primary; + } + } + } + + // Cards + .card { + background-color: #ffffff; + border: 1px solid #e5e7eb; + color: #1f2937; + } + + // Alerts + .alert { + background-color: #f0fdf4; + border: 1px solid #bbf7d0; + color: #166534; + + &.alert-warning { + background-color: #fffbeb; + border-color: #fde68a; + color: #92400e; + } + + &.alert-danger { + background-color: #fef2f2; + border-color: #fecaca; + color: #991b1b; + } + + &.alert-info { + background-color: #f0f9ff; + border-color: #bae6fd; + color: #075985; + } + } + + // Nav tabs + .nav-tabs .nav-link { + color: #4b5563; + border-bottom: 1px solid #e5e7eb; + + &:not(.active):hover { + background-color: #f3f4f6; + color: $primary; + } + + &.active { + background-color: #ffffff; + color: $primary; + border-color: #e5e7eb #e5e7eb transparent #e5e7eb; + } + } + + .tab-content .tab-pane { + background-color: #ffffff; + border: 1px solid #e5e7eb; + color: #1f2937; + } + + // Tables + .td-initial table { + color: #1f2937; + border-color: #e5e7eb; + + th { + background-color: #f9fafb; + color: #111827; + border-bottom: 2px solid #e5e7eb; + box-shadow: none; + } + + td { + background-color: transparent; + border-bottom: 1px solid #e5e7eb; + box-shadow: none; + } + } + + // Front matter info / Page info + .matterinfo, + .pageinfo { + background: #f9fafb; + border-color: rgba(0, 179, 159, 0.4); + color: #1f2937; + + .matterheader { + color: #111827; + } + + .plan-support { + border-color: #e5e7eb; + color: #374151; + + &:hover { + background-color: rgba(0, 179, 159, 0.08); + } + } + + .tier { + color: #111827; + } + } + + // Buttons & Dash signs + .l5btn { + background: #ffffff; + border-color: $primary; + color: #111827; + + > img { + filter: invert(0.8); + } + } + + .dashboard { + background-image: linear-gradient(to right, #111827 0px, #008f7e 34%, #d97706 71%, #059669 100%); + } + + .dash-sign-container a.dash-sign { + color: #111827; + text-shadow: none; + + &:visited { + color: #111827; + } + + &:hover { + color: $primary; + } + } + + // Landing page components + .landing-card { + background: #ffffff; + border: 1px solid #e5e7eb; + box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05); + + .landing-card-title { + color: #111827; + } + + p { + color: #4b5563; + } + + &:hover { + border-color: $primary; + box-shadow: 0px 6px 16px 0px rgba(0, 179, 159, 0.15); + + .landing-card-title { + color: $primary; + } + + p { + color: #111827; + } + } + } + + .product-section a { + color: #111827; + } + + .forum-section { + background: #ffffff; + border: 1px solid #e5e7eb; + box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05); + + &:hover { + border-color: $primary; + } + } + + .handbook-section { + background: linear-gradient(112deg, #f9fafb 34.88%, rgba(0, 211, 169, 0.15) 92.89%, #ffffff 159.16%); + border: 1px solid #e5e7eb; + border-radius: 1rem; + } + + // Search input on navbar + .td-navbar .td-search { + background-color: #f3f4f6; + border: 1px solid #e5e7eb; + + .td-search__input { + color: #1f2937; + + &::placeholder { + color: #9ca3af; + } + } + + .td-search__icon { + color: #6b7280; + } + } + + .td-offline-search-results { + .card { + background-color: #ffffff; + border: 1px solid #e5e7eb; + color: #1f2937; + } + } + + // Video and Taxonomies + .video > .card-title { + color: #111827; + } + + .video > .card-text { + color: #6b7280; + } + + .article-teaser.card { + background-color: #ffffff; + border: 1px solid #e5e7eb; + color: #1f2937; + } + + .article-meta-bg { + background-color: #f3f4f6; + color: #4b5563; + } + + .taxonomy-count { + background-color: #f3f4f6; + color: #1f2937; + } + + .taxonomy-term { + background: #e5e7eb; + color: #1f2937; + + &:hover { + background-color: $primary; + color: $white; + } + } + + // Pagination navigation + .pagination-nav__link { + border-color: #e5e7eb; + background-color: #ffffff; + color: #1f2937; + + &:hover { + border-color: $primary; + } + } + + .pagination-nav__sublabel { + color: #6b7280; + } + + .pagination-nav__label { + color: #111827; + } +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 71d7b856c7d..bf44b09c772 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,6 +5,8 @@ lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.Direction }}" class="no-js" + data-theme="dark" + data-bs-theme="dark" > {{ partial "head.html" . }} diff --git a/layouts/_default/content.html b/layouts/_default/content.html index e5ba33791ab..3a2ff82355d 100644 --- a/layouts/_default/content.html +++ b/layouts/_default/content.html @@ -1,4 +1,4 @@ -
+

{{ .Title }}

{{ with .Params.description }}
{{ . | markdownify }}
{{ end }}
diff --git a/layouts/docs/list.html b/layouts/docs/list.html index 4b9fb5120c1..b44e5ce3e92 100644 --- a/layouts/docs/list.html +++ b/layouts/docs/list.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

{{ .Title }}

{{ with .Params.description }}
{{ . | markdownify }}
{{ end }} diff --git a/layouts/docs/rest-apis.html b/layouts/docs/rest-apis.html index f51744ad7ae..616a0bda55c 100644 --- a/layouts/docs/rest-apis.html +++ b/layouts/docs/rest-apis.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

{{ .Title }}

{{ with .Params.description }}
{{ . | markdownify }}
{{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 27bb81a2d9e..e24e3340409 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -34,6 +34,19 @@ {{ template "_internal/opengraph.html" . -}} {{ template "_internal/schema.html" . -}} {{ template "_internal/twitter_cards.html" . -}} + {{ partialCached "head-css.html" . -}}
diff --git a/layouts/release/list.html b/layouts/release/list.html index be7fdfb075a..2537a29b263 100644 --- a/layouts/release/list.html +++ b/layouts/release/list.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

{{ .Title }}

{{ with .Params.description }}
{{ . | markdownify }}
{{ end }}
diff --git a/layouts/video/list.html b/layouts/video/list.html index b222a11331a..f3016d005b1 100644 --- a/layouts/video/list.html +++ b/layouts/video/list.html @@ -1,5 +1,5 @@ {{ define "main" }} -
+

{{ .Title }}

{{ with .Params.description }}
{{ . | markdownify }}
{{ end }}
From cdb01e81ea4ef34d914b626db227420a4dde86a6 Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Wed, 19 Aug 2026 14:40:05 +0530 Subject: [PATCH 2/5] [UI] Address review: normalize theme values and improve light mode contrast Signed-off-by: Mayank Sharma --- assets/scss/_navbar_project.scss | 9 +++++++-- assets/scss/_styles_project.scss | 4 ++-- layouts/partials/head.html | 2 +- layouts/partials/navbar.html | 19 ++++++++++++------- 4 files changed, 22 insertions(+), 12 deletions(-) diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss index 94583b095fd..5ba7023525a 100644 --- a/assets/scss/_navbar_project.scss +++ b/assets/scss/_navbar_project.scss @@ -307,7 +307,7 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em --offset-orthogonal: calc(var(--size) * 0.65); --offset-diagonal: calc(var(--size) * 0.45); transform: scale(0.8); - color: #ebc017; + color: #b45309; box-shadow: inset 0 0 0 var(--size), calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), var(--offset-orthogonal) 0 0 var(--ray-size), @@ -319,9 +319,14 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); &:hover { - color: #f59e0b; + color: #78350f; transform: scale(0.9); } + + &:focus-visible { + outline: 2px solid #007a6c; + outline-offset: 3px; + } } // Light theme adjustments for the Navbar diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 174de0b57db..f3670fcd799 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -1130,12 +1130,12 @@ h1, h2, h3, h4, h5, h6 { color: #1f2937; &::placeholder { - color: #9ca3af; + color: #4b5563; } } .td-search__icon { - color: #6b7280; + color: #4b5563; } } diff --git a/layouts/partials/head.html b/layouts/partials/head.html index e24e3340409..220a03bc2d3 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -38,7 +38,7 @@ (function() { try { var storedTheme = localStorage.getItem('theme'); - var theme = storedTheme ? storedTheme : 'dark'; + var theme = (storedTheme === 'light' || storedTheme === 'dark') ? storedTheme : 'dark'; document.documentElement.setAttribute('data-theme', theme); document.documentElement.setAttribute('data-bs-theme', theme); } catch (e) { diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 9eda9b69b37..5a82fd9bac4 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -392,15 +392,20 @@ (function() { const toggleBtn = document.getElementById('theme-toggle'); + function normalizeTheme(theme) { + return theme === 'light' ? 'light' : 'dark'; + } + function applyTheme(theme) { - document.documentElement.setAttribute('data-theme', theme); - document.documentElement.setAttribute('data-bs-theme', theme); + const normalizedTheme = normalizeTheme(theme); + document.documentElement.setAttribute('data-theme', normalizedTheme); + document.documentElement.setAttribute('data-bs-theme', normalizedTheme); try { - localStorage.setItem('theme', theme); + localStorage.setItem('theme', normalizedTheme); } catch (e) {} if (toggleBtn) { - const isDark = theme === 'dark'; + const isDark = normalizedTheme === 'dark'; const label = isDark ? 'Switch to light theme' : 'Switch to dark theme'; toggleBtn.setAttribute('aria-label', label); toggleBtn.setAttribute('title', label); @@ -409,7 +414,7 @@ if (toggleBtn) { toggleBtn.addEventListener('click', function() { - const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark'; + const currentTheme = normalizeTheme(document.documentElement.getAttribute('data-theme')); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; applyTheme(newTheme); }); @@ -417,7 +422,7 @@ // Set initial label and title based on active theme try { - const activeTheme = document.documentElement.getAttribute('data-theme') || localStorage.getItem('theme') || 'dark'; + const activeTheme = normalizeTheme(document.documentElement.getAttribute('data-theme') || localStorage.getItem('theme')); applyTheme(activeTheme); } catch (e) { applyTheme('dark'); @@ -426,7 +431,7 @@ // Sync across open browser tabs window.addEventListener('storage', function(e) { if (e.key === 'theme' && e.newValue) { - applyTheme(e.newValue); + applyTheme(normalizeTheme(e.newValue)); } }); })(); From f104b8fa5481244e12066bbb961d3b2b9fa3dbcb Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Wed, 19 Aug 2026 18:49:52 +0530 Subject: [PATCH 3/5] [UI] Refactor light theme styling to align with Meshery brand kit Signed-off-by: Mayank Sharma --- assets/icons/logo-light.svg | 1 + assets/scss/_landing_project.scss | 99 +++++++ assets/scss/_navbar_project.scss | 148 ++++++---- assets/scss/_search_project.scss | 29 +- assets/scss/_styles_project.scss | 337 +++++++++++++--------- layouts/docs/baseof.html | 2 +- layouts/partials/navbar.html | 4 +- layouts/release/baseof.html | 2 + layouts/shortcodes/ecosystem-box.html | 2 +- layouts/video/baseof.html | 2 + static/images/logo-light.svg | 1 + static/images/logos/white-semi-opaque.svg | 5 + 12 files changed, 437 insertions(+), 195 deletions(-) create mode 100644 assets/icons/logo-light.svg create mode 100644 static/images/logo-light.svg create mode 100644 static/images/logos/white-semi-opaque.svg diff --git a/assets/icons/logo-light.svg b/assets/icons/logo-light.svg new file mode 100644 index 00000000000..6f321eba541 --- /dev/null +++ b/assets/icons/logo-light.svg @@ -0,0 +1 @@ + diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss index 24639e5545a..661c729a6f3 100644 --- a/assets/scss/_landing_project.scss +++ b/assets/scss/_landing_project.scss @@ -240,3 +240,102 @@ } } +// Light theme styles for landing page +[data-theme="light"], +[data-bs-theme="light"] { + .product-section a { + color: #1e2117 !important; + } + + .playground-section { + &.playground-logo { + background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/meshery-light-icon.svg") !important; + } + &.video-play-logo { + background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/video-play.svg") !important; + } + } + + .catalog-section { + &.catalog-logo { + background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/catalog.svg") !important; + } + &.academy-logo { + background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/academy.svg") !important; + } + &.recognition-program-logo { + background-image: url("../images/logos/white-semi-opaque.svg"), url("../images/logos/recognition-program.png") !important; + } + } + + .landing-card { + background: #ffffff !important; + border: 1.5px solid rgba(60, 73, 79, 0.18) !important; + box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05) !important; + + .landing-card-title, + span.landing-card-title { + color: #1e2117 !important; + } + + p { + color: #3c494f !important; + } + + &:hover { + border: 1.5px solid $primary !important; + box-shadow: 0px 8px 25px 0px rgba(0, 179, 159, 0.18) !important; + + .landing-card-title, + span.landing-card-title { + color: $primary !important; + } + + p { + color: #1e2117 !important; + } + } + } + + .landing-card-title { + color: #1e2117 !important; + } + + .forum-section { + background: #ffffff !important; + border: 1.5px solid rgba(60, 73, 79, 0.18) !important; + box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05) !important; + + .landing-card-title, + h1, h2, h3, h4, h5, h6, + span { + color: #1e2117 !important; + } + + p { + color: #3c494f !important; + } + + &:hover { + border-color: $primary !important; + box-shadow: 0px 8px 25px 0px rgba(0, 179, 159, 0.18) !important; + } + } + + .handbook-section { + background: linear-gradient(112deg, #ffffff 34.88%, rgba(0, 179, 159, 0.12) 92.89%, #f0faf8 159.16%) !important; + border: 1.5px solid rgba(0, 179, 159, 0.25) !important; + border-radius: 1rem !important; + + .landing-card-title, + h1, h2, h3, h4, h5, h6, + span { + color: #1e2117 !important; + } + + p { + color: #3c494f !important; + } + } +} + diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss index 5ba7023525a..c703db78d3c 100644 --- a/assets/scss/_navbar_project.scss +++ b/assets/scss/_navbar_project.scss @@ -262,100 +262,144 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em } } +// Navbar Brand Logo Light/Dark Support +.navbar-brand { + .logo-light { + display: none; + } + .logo-dark { + display: inline-block; + } +} + // Theme Toggle Button .theme-toggle-nav-item { margin-right: 0.75rem; + margin-left: 0.5rem; display: flex; align-items: center; justify-content: center; } .theme-toggle { - --size: 1.4rem; + --size: 1.35rem; appearance: none; - border: none; - background: transparent; + border: 1px solid rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.08); cursor: pointer; - width: var(--size); - height: var(--size); + width: 2.25rem; + height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; - color: #00b39f; - box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0 0; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + transition: all 0.3s ease; vertical-align: middle; outline: none; + .theme-toggle-icon { + display: inline-block; + width: var(--size); + height: var(--size); + border-radius: 50%; + color: $secondary; + box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0 0; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + } + &:hover { - color: #00d3a9; - transform: scale(1.08); + background: rgba(0, 211, 169, 0.15); + border-color: $secondary; + transform: scale(1.05); + + .theme-toggle-icon { + color: $secondary; + } } &:focus-visible { - outline: 2px solid #00b39f; - outline-offset: 3px; + outline: 2px solid $primary; + outline-offset: 2px; } } // Light theme state for toggle button -[data-theme="light"] .theme-toggle, -[data-bs-theme="light"] .theme-toggle { - --ray-size: calc(var(--size) * -0.4); - --offset-orthogonal: calc(var(--size) * 0.65); - --offset-diagonal: calc(var(--size) * 0.45); - transform: scale(0.8); - color: #b45309; - box-shadow: inset 0 0 0 var(--size), - calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), - var(--offset-orthogonal) 0 0 var(--ray-size), - 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), - 0 var(--offset-orthogonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), - var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), - var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); - - &:hover { - color: #78350f; - transform: scale(0.9); +[data-theme="light"], +[data-bs-theme="light"] { + .navbar-brand { + .logo-light { + display: inline-block; + } + .logo-dark { + display: none; + } } - &:focus-visible { - outline: 2px solid #007a6c; - outline-offset: 3px; + .theme-toggle { + background: rgba(60, 73, 79, 0.08); + border: 1px solid rgba(60, 73, 79, 0.18); + + .theme-toggle-icon { + --ray-size: calc(var(--size) * -0.4); + --offset-orthogonal: calc(var(--size) * 0.65); + --offset-diagonal: calc(var(--size) * 0.45); + transform: scale(0.75); + color: $saffron; + box-shadow: inset 0 0 0 var(--size), + calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), + var(--offset-orthogonal) 0 0 var(--ray-size), + 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), + 0 var(--offset-orthogonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), + var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), + var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); + } + + &:hover { + background: rgba(235, 192, 23, 0.15); + border-color: $saffron; + transform: scale(1.05); + + .theme-toggle-icon { + color: #d49b00; + } + } + + &:focus-visible { + outline: 2px solid $primary; + outline-offset: 2px; + } } -} -// Light theme adjustments for the Navbar -[data-theme="light"], -[data-bs-theme="light"] { .td-navbar, .navbar-dark { background-color: #ffffff; - border-bottom: 1px solid #e5e7eb; + border-bottom: 1px solid rgba(60, 73, 79, 0.12); .nav-link { - color: #374151; + color: #3C494F; + font-weight: 600; &:hover { color: $primary; } - &.current { + &.current, + &.active { color: $primary; } } .dropdown-menu { background-color: #ffffff; - border: 1px solid #e5e7eb; - box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08); + border: 1px solid rgba(60, 73, 79, 0.12); + box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08); .dropdown-item { - color: #1f2937; + color: #3C494F; &:hover { background-color: rgba(0, 179, 159, 0.08); @@ -369,28 +413,28 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em } .dropdown-divider { - border-top: 1px solid #e5e7eb; + border-top: 1px solid rgba(60, 73, 79, 0.12); } } } .apps-dropdown .dropdown-menu { background-color: #ffffff; - border: 1px solid #e5e7eb; + border: 1px solid rgba(60, 73, 79, 0.12); .dropdown-item { background-color: #f8f9fa; - border: 1px solid #e5e7eb; - color: #1f2937; + border: 1px solid rgba(60, 73, 79, 0.12); + color: #3C494F; span { - color: #1f2937; + color: #3C494F; } &:hover { background-color: #ffffff; border-color: $primary; - box-shadow: 0 0 10px rgba(0, 179, 159, 0.25); + box-shadow: 0 0 12px rgba(0, 179, 159, 0.25); color: $primary; span { @@ -403,7 +447,7 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em img.grid-icon { filter: invert(0.2); &:hover { - filter: invert(0.5); + filter: invert(0.4); } } } \ No newline at end of file diff --git a/assets/scss/_search_project.scss b/assets/scss/_search_project.scss index b4a06bd04ad..80b47684174 100644 --- a/assets/scss/_search_project.scss +++ b/assets/scss/_search_project.scss @@ -146,7 +146,6 @@ display: flex; justify-content: center; align-content: center; - // background-color: #EBC017; background-color: #2e2e31; border-radius: 1rem; @@ -163,8 +162,32 @@ color: inherit; } } - .td-search__input.form-control:focus { - // background-color: #EBC017; +} + +// Light theme search adjustments +[data-theme="light"], +[data-bs-theme="light"] { + .td-navbar .td-search { + background-color: #f0f4f4; + border: 1px solid rgba(60, 73, 79, 0.15); + + .td-search__input { + color: #3c494f; + + &::placeholder { + color: #666666; + } + } + + .td-search__icon { + color: #666666; + } + } + + .popover-body { + background-color: #ffffff; + color: #3c494f; + border: 1px solid rgba(60, 73, 79, 0.15); } } diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index f3670fcd799..190cccd4bd0 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -811,28 +811,28 @@ h1, h2, h3, h4, h5, h6 { } // ========================================== -// LIGHT THEME STYLING +// LIGHT THEME STYLING (Meshery Brand Kit) // ========================================== [data-theme="light"], [data-bs-theme="light"] { - background-color: #ffffff; - color: #1f2937; + background-color: #fafafa; + color: #3c494f; body { - background-color: #ffffff; - color: #1f2937; + background-color: #fafafa; + color: #3c494f; } .td-home { - background-color: #ffffff; + background-color: #fafafa; } .td-main main { - background-color: #ffffff; + background-color: #fafafa; } .td-content { - color: #1f2937; + color: #3c494f; > h1, > h2, @@ -840,57 +840,76 @@ h1, h2, h3, h4, h5, h6 { > h4, > h5, > h6 { - color: #111827; + color: #1e2117; } h2 { - color: #111827; + color: #1e2117; } p, li, td { - color: #374151; + color: #3c494f; } .lead { - color: #4b5563; + color: #555555; } p code, li > code, table code { - background-color: #f3f4f6; - color: #0f766e; - border: 1px solid #e5e7eb; + background-color: rgba(0, 179, 159, 0.08); + color: #007a6c; + border: 1px solid rgba(0, 179, 159, 0.2); + border-radius: 4px; + font-weight: 500; + } + + pre { + background-color: #1e2117; + color: #e1e5e7; + border: 1px solid rgba(60, 73, 79, 0.2); + border-radius: 8px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); + + > code { + color: #e1e5e7; + } } blockquote { - color: #4b5563; - border-left-color: $primary; - background-color: #f9fafb; + color: #3c494f; + border-left: 4px solid $primary; + background-color: rgba(0, 179, 159, 0.05); padding: 0.75rem 1rem; border-radius: 0 0.375rem 0.375rem 0; } } - a:hover { + a { color: $primary; + + &:hover { + color: #008f7e; + } } // Left sidebar in light mode .td-sidebar { background-image: none; background-color: #f8f9fa; - border-right: 1px solid #e5e7eb; + border-right: 1px solid rgba(60, 73, 79, 0.12); .td-sidebar-nav { &__section-title a { - color: #111827; + color: #1e2117; + font-weight: 700; } .td-sidebar-link__page { - color: #4b5563; + color: #555555; &:hover { color: $primary; @@ -902,21 +921,25 @@ h1, h2, h3, h4, h5, h6 { } a.active:not(.tree-root) { - background-image: none; - background-color: rgba(0, 179, 159, 0.1); - border-left: 3px solid $primary; - color: $primary; + background-image: none !important; + background-color: rgba(0, 179, 159, 0.08) !important; + border: none !important; + border-left: 3px solid $primary !important; + border-radius: 0 4px 4px 0 !important; + color: #008f7e !important; + font-weight: 600 !important; } a.active.tree-root { - background-color: rgba(0, 179, 159, 0.1); - border: 1px solid $primary; - color: $primary; + background-image: none !important; + background-color: rgba(0, 179, 159, 0.08) !important; + border: 1px solid rgba(0, 179, 159, 0.4) !important; + color: #008f7e !important; } .td-sidebar-link.tree-root { - border-bottom: 1px solid #e5e7eb; - color: #111827; + border-bottom: 1px solid rgba(60, 73, 79, 0.12); + color: #1e2117; } } } @@ -925,20 +948,25 @@ h1, h2, h3, h4, h5, h6 { .td-sidebar-toc { background-image: none; background-color: #ffffff; - border-left: 1px solid #e5e7eb; + border-left: 1px solid rgba(60, 73, 79, 0.12); .td-toc #TableOfContents a { - color: #4b5563; + color: #666666; &:hover, &:focus-visible { color: $primary; background-color: rgba(0, 179, 159, 0.08); } + + &.active { + color: #008f7e; + font-weight: 600; + } } .td-page-meta a { - color: #6b7280; + color: #666666; &:hover { color: $primary; @@ -949,39 +977,43 @@ h1, h2, h3, h4, h5, h6 { // Cards .card { background-color: #ffffff; - border: 1px solid #e5e7eb; - color: #1f2937; + border: 1px solid rgba(60, 73, 79, 0.15); + color: #3c494f; } // Alerts .alert { - background-color: #f0fdf4; - border: 1px solid #bbf7d0; - color: #166534; + background-color: #f0f9f8; + border: 1px solid rgba(0, 179, 159, 0.3); + border-left: 4px solid $primary; + color: #1e2117; &.alert-warning { - background-color: #fffbeb; - border-color: #fde68a; - color: #92400e; + background-color: #fffdf5; + border-color: rgba(235, 192, 23, 0.3); + border-left: 4px solid $saffron; + color: #1e2117; } &.alert-danger { - background-color: #fef2f2; - border-color: #fecaca; - color: #991b1b; + background-color: #fff5f4; + border-color: rgba(237, 106, 90, 0.3); + border-left: 4px solid $danger; + color: #1e2117; } &.alert-info { - background-color: #f0f9ff; - border-color: #bae6fd; - color: #075985; + background-color: #f0f9f8; + border-color: rgba(0, 179, 159, 0.3); + border-left: 4px solid $primary; + color: #1e2117; } } // Nav tabs .nav-tabs .nav-link { - color: #4b5563; - border-bottom: 1px solid #e5e7eb; + color: #555555; + border-bottom: 1px solid rgba(60, 73, 79, 0.15); &:not(.active):hover { background-color: #f3f4f6; @@ -991,213 +1023,246 @@ h1, h2, h3, h4, h5, h6 { &.active { background-color: #ffffff; color: $primary; - border-color: #e5e7eb #e5e7eb transparent #e5e7eb; + border-color: rgba(60, 73, 79, 0.15) rgba(60, 73, 79, 0.15) transparent rgba(60, 73, 79, 0.15); + font-weight: 600; } } .tab-content .tab-pane { background-color: #ffffff; - border: 1px solid #e5e7eb; - color: #1f2937; + border: 1px solid rgba(60, 73, 79, 0.15); + color: #3c494f; } // Tables - .td-initial table { - color: #1f2937; - border-color: #e5e7eb; + .td-initial table, + table { + color: #3c494f; + border: 1px solid rgba(60, 73, 79, 0.15); th { - background-color: #f9fafb; - color: #111827; - border-bottom: 2px solid #e5e7eb; + background-color: #f0f4f4; + color: #1e2117; + font-weight: 600; + border-bottom: 2px solid rgba(60, 73, 79, 0.2); box-shadow: none; } td { background-color: transparent; - border-bottom: 1px solid #e5e7eb; + border-bottom: 1px solid rgba(60, 73, 79, 0.12); + color: #3c494f; box-shadow: none; } + + tbody tr:nth-child(even) { + background-color: #fafbfb; + } } // Front matter info / Page info .matterinfo, .pageinfo { - background: #f9fafb; - border-color: rgba(0, 179, 159, 0.4); - color: #1f2937; + background: #ffffff; + border: 1.5px solid rgba(0, 179, 159, 0.3); + box-shadow: 0 4px 15px rgba(0, 179, 159, 0.06); + color: #3c494f; .matterheader { - color: #111827; + color: #1e2117; } .plan-support { - border-color: #e5e7eb; - color: #374151; + border: 1px solid rgba(60, 73, 79, 0.15); + background: #f8f9fa; + color: #3c494f; &:hover { + border-color: $primary; background-color: rgba(0, 179, 159, 0.08); + color: #008f7e; } } .tier { - color: #111827; + color: #1e2117; } } - // Buttons & Dash signs - .l5btn { - background: #ffffff; - border-color: $primary; - color: #111827; + // Cover block and overlay for landing page in light mode + .td-cover-block, + .td-overlay--dark, + .-bg-dark { + background-color: #fafafa !important; + background-image: none !important; + color: #3c494f !important; - > img { - filter: invert(0.8); + &::before { + background-color: transparent !important; + display: none !important; + } + + h1, h2, h3, h4, h5, h6 { + color: #1e2117; + } + + .lead { + color: #555555; } } - .dashboard { - background-image: linear-gradient(to right, #111827 0px, #008f7e 34%, #d97706 71%, #059669 100%); + .dash-tangle { + background-image: linear-gradient(180deg, rgba(0, 179, 115, 0) 0%, rgba(0, 179, 159, 0.08) 100%); } - .dash-sign-container a.dash-sign { - color: #111827; - text-shadow: none; + .dash-ircle-container > .dash-ircle { + background: radial-gradient(50% 50% at 50% 50%, rgba(0, 179, 159, 0.08) 0%, rgba(0, 179, 159, 0) 100%); + } - &:visited { - color: #111827; + // Buttons & Dash signs + .l5btn { + background: #ffffff !important; + border: 2px solid rgba(0, 179, 159, 0.35) !important; + color: #1e2117 !important; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); + + > img { + filter: invert(0.2); } &:hover { - color: $primary; + background: rgba(0, 179, 159, 0.08) !important; + border-color: $primary !important; + color: #008f7e !important; + + > img { + filter: none; + } } } - // Landing page components - .landing-card { - background: #ffffff; - border: 1px solid #e5e7eb; - box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05); - - .landing-card-title { - color: #111827; - } + .dashboard { + background-image: linear-gradient(to right, #1e2117 0px, #00b39f 34%, #ebc017 71%, #008f7e 100%); + } - p { - color: #4b5563; - } + .dash-sign-container { + a.dash-sign { + color: #1e2117 !important; + text-shadow: none !important; - &:hover { - border-color: $primary; - box-shadow: 0px 6px 16px 0px rgba(0, 179, 159, 0.15); + &:visited { + color: #1e2117 !important; + } - .landing-card-title { - color: $primary; + &:hover { + color: $primary !important; } - p { - color: #111827; + &:after { + box-shadow: 10px 10px 25px rgba(0, 179, 159, 0.18); } } } - .product-section a { - color: #111827; + // Ecosystem callout boxes + .highlight-box { + background-color: rgba(235, 192, 23, 0.08); + border: 1px solid rgba(235, 192, 23, 0.35); + border-radius: 8px; + box-shadow: 0 4px 15px rgba(235, 192, 23, 0.12); } - .forum-section { - background: #ffffff; - border: 1px solid #e5e7eb; - box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05); + .hidden-highlight-box { + border-radius: 8px; &:hover { - border-color: $primary; + background-color: rgba(0, 179, 159, 0.06); + border: 1px solid rgba(0, 179, 159, 0.25); + box-shadow: 0 4px 15px rgba(0, 179, 159, 0.12); } } - .handbook-section { - background: linear-gradient(112deg, #f9fafb 34.88%, rgba(0, 211, 169, 0.15) 92.89%, #ffffff 159.16%); - border: 1px solid #e5e7eb; - border-radius: 1rem; - } - // Search input on navbar - .td-navbar .td-search { - background-color: #f3f4f6; - border: 1px solid #e5e7eb; + .td-navbar .td-search, + .td-search { + background-color: #f0f4f4 !important; + border: 1px solid rgba(60, 73, 79, 0.15) !important; .td-search__input { - color: #1f2937; + color: #3c494f !important; &::placeholder { - color: #4b5563; + color: #666666 !important; } } .td-search__icon { - color: #4b5563; + color: #666666 !important; } } .td-offline-search-results { .card { background-color: #ffffff; - border: 1px solid #e5e7eb; - color: #1f2937; + border: 1px solid rgba(60, 73, 79, 0.15); + color: #3c494f; } } // Video and Taxonomies .video > .card-title { - color: #111827; + color: #1e2117; } .video > .card-text { - color: #6b7280; + color: #555555; } .article-teaser.card { background-color: #ffffff; - border: 1px solid #e5e7eb; - color: #1f2937; + border: 1px solid rgba(60, 73, 79, 0.15); + color: #3c494f; } .article-meta-bg { - background-color: #f3f4f6; - color: #4b5563; + background-color: #f0f4f4; + color: #555555; } .taxonomy-count { - background-color: #f3f4f6; - color: #1f2937; + background-color: rgba(0, 179, 159, 0.18); + color: #007a6c; } .taxonomy-term { - background: #e5e7eb; - color: #1f2937; + background: rgba(0, 179, 159, 0.08); + color: #007a6c; + border: 1px solid rgba(0, 179, 159, 0.2); &:hover { background-color: $primary; color: $white; + border-color: $primary; } } // Pagination navigation .pagination-nav__link { - border-color: #e5e7eb; + border-color: rgba(60, 73, 79, 0.15); background-color: #ffffff; - color: #1f2937; + color: #3c494f; &:hover { border-color: $primary; + color: $primary; } } .pagination-nav__sublabel { - color: #6b7280; + color: #666666; } .pagination-nav__label { - color: #111827; + color: #1e2117; } } diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index 8766bc5985e..4e31d3ae3fb 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -1,5 +1,5 @@ - + {{ partial "head.html" . }} diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 5a82fd9bac4..1265eda43d1 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -8,8 +8,8 @@
diff --git a/layouts/release/baseof.html b/layouts/release/baseof.html index 18f45f566dd..896e942f08d 100644 --- a/layouts/release/baseof.html +++ b/layouts/release/baseof.html @@ -5,6 +5,8 @@ lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.Direction }}" class="no-js" + data-theme="dark" + data-bs-theme="dark" > {{ partial "head.html" . }} diff --git a/layouts/shortcodes/ecosystem-box.html b/layouts/shortcodes/ecosystem-box.html index f60002573de..3508eccc030 100644 --- a/layouts/shortcodes/ecosystem-box.html +++ b/layouts/shortcodes/ecosystem-box.html @@ -36,7 +36,7 @@ {{- end -}} {{- end -}} - + {{ $title }} {{ .Inner | .Page.RenderString }} diff --git a/layouts/video/baseof.html b/layouts/video/baseof.html index ac772ee7105..9fcc271a311 100644 --- a/layouts/video/baseof.html +++ b/layouts/video/baseof.html @@ -5,6 +5,8 @@ lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.Direction }}" class="no-js" + data-theme="dark" + data-bs-theme="dark" > {{ partial "head.html" . }} diff --git a/static/images/logo-light.svg b/static/images/logo-light.svg new file mode 100644 index 00000000000..6f321eba541 --- /dev/null +++ b/static/images/logo-light.svg @@ -0,0 +1 @@ + diff --git a/static/images/logos/white-semi-opaque.svg b/static/images/logos/white-semi-opaque.svg new file mode 100644 index 00000000000..80c69f07cd3 --- /dev/null +++ b/static/images/logos/white-semi-opaque.svg @@ -0,0 +1,5 @@ + + + + From eb558d941499f119cd4a8f1059c5917ef1bf4e24 Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Wed, 19 Aug 2026 19:25:07 +0530 Subject: [PATCH 4/5] [UI] Refine light theme with Sistent tokens and fix navbar search styling Signed-off-by: Mayank Sharma --- assets/scss/_landing_project.scss | 34 ++-- assets/scss/_navbar_project.scss | 60 ++++-- assets/scss/_search_project.scss | 24 ++- assets/scss/_styles_project.scss | 257 ++++++++++++------------ assets/scss/_video-landing_project.scss | 113 ++++++++++- 5 files changed, 318 insertions(+), 170 deletions(-) diff --git a/assets/scss/_landing_project.scss b/assets/scss/_landing_project.scss index 661c729a6f3..7a54e1ac7d3 100644 --- a/assets/scss/_landing_project.scss +++ b/assets/scss/_landing_project.scss @@ -244,7 +244,7 @@ [data-theme="light"], [data-bs-theme="light"] { .product-section a { - color: #1e2117 !important; + color: #142126 !important; } .playground-section { @@ -270,21 +270,21 @@ .landing-card { background: #ffffff !important; - border: 1.5px solid rgba(60, 73, 79, 0.18) !important; - box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05) !important; + border: 1.5px solid #d2d8da !important; + box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04) !important; .landing-card-title, span.landing-card-title { - color: #1e2117 !important; + color: #000d12 !important; } p { - color: #3c494f !important; + color: #28353a !important; } &:hover { border: 1.5px solid $primary !important; - box-shadow: 0px 8px 25px 0px rgba(0, 179, 159, 0.18) !important; + box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06) !important; .landing-card-title, span.landing-card-title { @@ -292,49 +292,49 @@ } p { - color: #1e2117 !important; + color: #000d12 !important; } } } .landing-card-title { - color: #1e2117 !important; + color: #000d12 !important; } .forum-section { background: #ffffff !important; - border: 1.5px solid rgba(60, 73, 79, 0.18) !important; - box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05) !important; + border: 1.5px solid #d2d8da !important; + box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04) !important; .landing-card-title, h1, h2, h3, h4, h5, h6, span { - color: #1e2117 !important; + color: #000d12 !important; } p { - color: #3c494f !important; + color: #28353a !important; } &:hover { border-color: $primary !important; - box-shadow: 0px 8px 25px 0px rgba(0, 179, 159, 0.18) !important; + box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06) !important; } } .handbook-section { - background: linear-gradient(112deg, #ffffff 34.88%, rgba(0, 179, 159, 0.12) 92.89%, #f0faf8 159.16%) !important; - border: 1.5px solid rgba(0, 179, 159, 0.25) !important; + background: linear-gradient(112deg, #ffffff 34.88%, #daf3eb 92.89%, #f0faf8 159.16%) !important; + border: 1.5px solid #93e6d1 !important; border-radius: 1rem !important; .landing-card-title, h1, h2, h3, h4, h5, h6, span { - color: #1e2117 !important; + color: #000d12 !important; } p { - color: #3c494f !important; + color: #28353a !important; } } } diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss index c703db78d3c..83c88eea789 100644 --- a/assets/scss/_navbar_project.scss +++ b/assets/scss/_navbar_project.scss @@ -359,9 +359,8 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em } &:hover { - background: rgba(235, 192, 23, 0.15); - border-color: $saffron; - transform: scale(1.05); + background: rgba(235, 192, 23, 0.12); + border-color: #ebc017; .theme-toggle-icon { color: #d49b00; @@ -376,11 +375,11 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em .td-navbar, .navbar-dark { - background-color: #ffffff; - border-bottom: 1px solid rgba(60, 73, 79, 0.12); + background-color: #ffffff !important; + border-bottom: 1px solid #eaedee !important; .nav-link { - color: #3C494F; + color: #3c494f; font-weight: 600; &:hover { @@ -393,18 +392,45 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em } } + .td-search { + background-color: #eaedee !important; + border: 1px solid #d2d8da !important; + border-radius: 1rem !important; + + .td-search__input { + background: transparent !important; + color: #000d12 !important; + + &::placeholder { + color: #647176 !important; + } + + &:focus { + color: #000d12 !important; + } + } + + .td-search__icon { + color: #647176 !important; + } + + &:focus-within { + border-color: $primary !important; + box-shadow: none !important; + } + } + .dropdown-menu { background-color: #ffffff; - border: 1px solid rgba(60, 73, 79, 0.12); - box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08); + border: 1px solid #eaedee; + box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08); .dropdown-item { - color: #3C494F; + color: #3c494f; &:hover { background-color: rgba(0, 179, 159, 0.08); color: $primary; - box-shadow: 0 0 10px rgba(0, 179, 159, 0.2); img { filter: none; @@ -413,28 +439,28 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em } .dropdown-divider { - border-top: 1px solid rgba(60, 73, 79, 0.12); + border-top: 1px solid #eaedee; } } } .apps-dropdown .dropdown-menu { background-color: #ffffff; - border: 1px solid rgba(60, 73, 79, 0.12); + border: 1px solid #eaedee; + box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08); .dropdown-item { - background-color: #f8f9fa; - border: 1px solid rgba(60, 73, 79, 0.12); - color: #3C494F; + background-color: #f6f8f8; + border: 1px solid #eaedee; + color: #3c494f; span { - color: #3C494F; + color: #3c494f; } &:hover { background-color: #ffffff; border-color: $primary; - box-shadow: 0 0 12px rgba(0, 179, 159, 0.25); color: $primary; span { diff --git a/assets/scss/_search_project.scss b/assets/scss/_search_project.scss index 80b47684174..ec15390af83 100644 --- a/assets/scss/_search_project.scss +++ b/assets/scss/_search_project.scss @@ -167,27 +167,37 @@ // Light theme search adjustments [data-theme="light"], [data-bs-theme="light"] { - .td-navbar .td-search { - background-color: #f0f4f4; - border: 1px solid rgba(60, 73, 79, 0.15); + .td-navbar .td-search, + .td-search { + background-color: #eaedee !important; + border: 1px solid #d2d8da !important; .td-search__input { - color: #3c494f; + color: #000d12 !important; &::placeholder { - color: #666666; + color: #647176 !important; + } + + &:focus { + color: #000d12 !important; } } .td-search__icon { - color: #666666; + color: #647176 !important; + } + + &:focus-within { + border-color: $primary !important; + box-shadow: none !important; } } .popover-body { background-color: #ffffff; color: #3c494f; - border: 1px solid rgba(60, 73, 79, 0.15); + border: 1px solid #eaedee; } } diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 190cccd4bd0..a73e6c38887 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -811,28 +811,28 @@ h1, h2, h3, h4, h5, h6 { } // ========================================== -// LIGHT THEME STYLING (Meshery Brand Kit) +// LIGHT THEME STYLING (Sistent Design System) // ========================================== [data-theme="light"], [data-bs-theme="light"] { - background-color: #fafafa; - color: #3c494f; + background-color: #f6f8f8; + color: #28353a; body { - background-color: #fafafa; - color: #3c494f; + background-color: #f6f8f8; + color: #28353a; } .td-home { - background-color: #fafafa; + background-color: #f6f8f8; } .td-main main { - background-color: #fafafa; + background-color: #ffffff; } .td-content { - color: #3c494f; + color: #28353a; > h1, > h2, @@ -840,49 +840,49 @@ h1, h2, h3, h4, h5, h6 { > h4, > h5, > h6 { - color: #1e2117; + color: #000d12; } h2 { - color: #1e2117; + color: #000d12; } p, li, td { - color: #3c494f; + color: #28353a; } .lead { - color: #555555; + color: #3c494f; } p code, li > code, table code { - background-color: rgba(0, 179, 159, 0.08); - color: #007a6c; - border: 1px solid rgba(0, 179, 159, 0.2); + background-color: #eaedee; + color: #007763; + border: 1px solid #d2d8da; border-radius: 4px; font-weight: 500; + padding: 0.15rem 0.35rem; } pre { - background-color: #1e2117; - color: #e1e5e7; - border: 1px solid rgba(60, 73, 79, 0.2); + background-color: #142126; + color: #e8eff3; + border: 1px solid #293b43; border-radius: 8px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); > code { - color: #e1e5e7; + color: #e8eff3; } } blockquote { - color: #3c494f; + color: #28353a; border-left: 4px solid $primary; - background-color: rgba(0, 179, 159, 0.05); + background-color: #daf3eb; padding: 0.75rem 1rem; border-radius: 0 0.375rem 0.375rem 0; } @@ -892,24 +892,24 @@ h1, h2, h3, h4, h5, h6 { color: $primary; &:hover { - color: #008f7e; + color: #007763; } } // Left sidebar in light mode .td-sidebar { background-image: none; - background-color: #f8f9fa; - border-right: 1px solid rgba(60, 73, 79, 0.12); + background-color: #eaedee; + border-right: 1px solid #d2d8da; .td-sidebar-nav { &__section-title a { - color: #1e2117; + color: #142126; font-weight: 700; } .td-sidebar-link__page { - color: #555555; + color: #3c494f; &:hover { color: $primary; @@ -922,24 +922,24 @@ h1, h2, h3, h4, h5, h6 { a.active:not(.tree-root) { background-image: none !important; - background-color: rgba(0, 179, 159, 0.08) !important; + background-color: #daf3eb !important; border: none !important; border-left: 3px solid $primary !important; border-radius: 0 4px 4px 0 !important; - color: #008f7e !important; + color: #007763 !important; font-weight: 600 !important; } a.active.tree-root { background-image: none !important; - background-color: rgba(0, 179, 159, 0.08) !important; - border: 1px solid rgba(0, 179, 159, 0.4) !important; - color: #008f7e !important; + background-color: #daf3eb !important; + border: 1px solid #93e6d1 !important; + color: #007763 !important; } .td-sidebar-link.tree-root { - border-bottom: 1px solid rgba(60, 73, 79, 0.12); - color: #1e2117; + border-bottom: 1px solid #d2d8da; + color: #142126; } } } @@ -947,26 +947,27 @@ h1, h2, h3, h4, h5, h6 { // Right TOC sidebar in light mode .td-sidebar-toc { background-image: none; - background-color: #ffffff; - border-left: 1px solid rgba(60, 73, 79, 0.12); + background-color: #f6f8f8; + border-left: 1px solid #eaedee; .td-toc #TableOfContents a { - color: #666666; + color: #647176; &:hover, &:focus-visible { color: $primary; - background-color: rgba(0, 179, 159, 0.08); + background-color: #daf3eb; } &.active { - color: #008f7e; + color: #007763; font-weight: 600; + border-left: 2px solid $primary; } } .td-page-meta a { - color: #666666; + color: #647176; &:hover { color: $primary; @@ -977,86 +978,86 @@ h1, h2, h3, h4, h5, h6 { // Cards .card { background-color: #ffffff; - border: 1px solid rgba(60, 73, 79, 0.15); - color: #3c494f; + border: 1px solid #eaedee; + color: #28353a; } // Alerts .alert { - background-color: #f0f9f8; - border: 1px solid rgba(0, 179, 159, 0.3); - border-left: 4px solid $primary; - color: #1e2117; + background-color: #f0fbff; + border: 1px solid #9eddff; + border-left: 4px solid #2196f3; + color: #0754a6; &.alert-warning { - background-color: #fffdf5; - border-color: rgba(235, 192, 23, 0.3); - border-left: 4px solid $saffron; - color: #1e2117; + background-color: #fffee6; + border-color: #fffbbd; + border-left: 4px solid #ebc017; + color: #785400; } &.alert-danger { - background-color: #fff5f4; - border-color: rgba(237, 106, 90, 0.3); - border-left: 4px solid $danger; - color: #1e2117; + background-color: #fff0f0; + border-color: #ffb3b9; + border-left: 4px solid #ff385c; + color: #8c0a2f; } &.alert-info { - background-color: #f0f9f8; - border-color: rgba(0, 179, 159, 0.3); - border-left: 4px solid $primary; - color: #1e2117; + background-color: #f0fbff; + border-color: #9eddff; + border-left: 4px solid #2196f3; + color: #0754a6; } } // Nav tabs .nav-tabs .nav-link { - color: #555555; - border-bottom: 1px solid rgba(60, 73, 79, 0.15); + color: #3c494f; + border-bottom: 1px solid #eaedee; &:not(.active):hover { - background-color: #f3f4f6; + background-color: #eaedee; color: $primary; } &.active { background-color: #ffffff; color: $primary; - border-color: rgba(60, 73, 79, 0.15) rgba(60, 73, 79, 0.15) transparent rgba(60, 73, 79, 0.15); + border-color: #d2d8da #d2d8da transparent #d2d8da; font-weight: 600; } } .tab-content .tab-pane { background-color: #ffffff; - border: 1px solid rgba(60, 73, 79, 0.15); - color: #3c494f; + border: 1px solid #d2d8da; + color: #28353a; } // Tables .td-initial table, table { - color: #3c494f; - border: 1px solid rgba(60, 73, 79, 0.15); + color: #28353a; + border: 1px solid #d2d8da; th { - background-color: #f0f4f4; - color: #1e2117; + background-color: #e8eff3; + color: #142126; font-weight: 600; - border-bottom: 2px solid rgba(60, 73, 79, 0.2); + border-bottom: 2px solid #c9dbe3; box-shadow: none; } td { background-color: transparent; - border-bottom: 1px solid rgba(60, 73, 79, 0.12); - color: #3c494f; + border-bottom: 1px solid #eaedee; + color: #28353a; box-shadow: none; } tbody tr:nth-child(even) { - background-color: #fafbfb; + background-color: #f8f9fa; } } @@ -1064,28 +1065,27 @@ h1, h2, h3, h4, h5, h6 { .matterinfo, .pageinfo { background: #ffffff; - border: 1.5px solid rgba(0, 179, 159, 0.3); - box-shadow: 0 4px 15px rgba(0, 179, 159, 0.06); - color: #3c494f; + border: 1.5px solid #d2d8da; + color: #28353a; .matterheader { - color: #1e2117; + color: #000d12; } .plan-support { - border: 1px solid rgba(60, 73, 79, 0.15); - background: #f8f9fa; + border: 1px solid #d2d8da; + background: #f6f8f8; color: #3c494f; &:hover { border-color: $primary; - background-color: rgba(0, 179, 159, 0.08); - color: #008f7e; + background-color: #daf3eb; + color: #007763; } } .tier { - color: #1e2117; + color: #142126; } } @@ -1093,9 +1093,9 @@ h1, h2, h3, h4, h5, h6 { .td-cover-block, .td-overlay--dark, .-bg-dark { - background-color: #fafafa !important; + background-color: #f6f8f8 !important; background-image: none !important; - color: #3c494f !important; + color: #28353a !important; &::before { background-color: transparent !important; @@ -1103,11 +1103,11 @@ h1, h2, h3, h4, h5, h6 { } h1, h2, h3, h4, h5, h6 { - color: #1e2117; + color: #000d12; } .lead { - color: #555555; + color: #3c494f; } } @@ -1122,18 +1122,17 @@ h1, h2, h3, h4, h5, h6 { // Buttons & Dash signs .l5btn { background: #ffffff !important; - border: 2px solid rgba(0, 179, 159, 0.35) !important; - color: #1e2117 !important; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); + border: 1.5px solid #d2d8da !important; + color: #142126 !important; > img { filter: invert(0.2); } &:hover { - background: rgba(0, 179, 159, 0.08) !important; + background: #daf3eb !important; border-color: $primary !important; - color: #008f7e !important; + color: #007763 !important; > img { filter: none; @@ -1142,102 +1141,110 @@ h1, h2, h3, h4, h5, h6 { } .dashboard { - background-image: linear-gradient(to right, #1e2117 0px, #00b39f 34%, #ebc017 71%, #008f7e 100%); + background-image: linear-gradient(to right, #142126 0px, #00b39f 34%, #ebc017 71%, #477e96 100%); } .dash-sign-container { a.dash-sign { - color: #1e2117 !important; + color: #142126 !important; text-shadow: none !important; + &:after { + box-shadow: 0 4px 15px rgba(0, 179, 159, 0.15) !important; + } + &:visited { - color: #1e2117 !important; + color: #142126 !important; } &:hover { color: $primary !important; } - - &:after { - box-shadow: 10px 10px 25px rgba(0, 179, 159, 0.18); - } } } // Ecosystem callout boxes .highlight-box { - background-color: rgba(235, 192, 23, 0.08); - border: 1px solid rgba(235, 192, 23, 0.35); + background-color: #fffee6; + border: 1.5px solid #ebc017; border-radius: 8px; - box-shadow: 0 4px 15px rgba(235, 192, 23, 0.12); + color: #28353a; } .hidden-highlight-box { border-radius: 8px; &:hover { - background-color: rgba(0, 179, 159, 0.06); - border: 1px solid rgba(0, 179, 159, 0.25); - box-shadow: 0 4px 15px rgba(0, 179, 159, 0.12); + background-color: #daf3eb; + border: 1px solid #93e6d1; } } // Search input on navbar .td-navbar .td-search, .td-search { - background-color: #f0f4f4 !important; - border: 1px solid rgba(60, 73, 79, 0.15) !important; + background-color: #eaedee !important; + border: 1px solid #d2d8da !important; .td-search__input { - color: #3c494f !important; + color: #000d12 !important; &::placeholder { - color: #666666 !important; + color: #647176 !important; + } + + &:focus { + color: #000d12 !important; } } .td-search__icon { - color: #666666 !important; + color: #647176 !important; + } + + &:focus-within { + border-color: $primary !important; + box-shadow: none !important; } } .td-offline-search-results { .card { background-color: #ffffff; - border: 1px solid rgba(60, 73, 79, 0.15); - color: #3c494f; + border: 1px solid #d2d8da; + color: #28353a; } } // Video and Taxonomies .video > .card-title { - color: #1e2117; + color: #000d12; } .video > .card-text { - color: #555555; + color: #3c494f; } .article-teaser.card { background-color: #ffffff; - border: 1px solid rgba(60, 73, 79, 0.15); - color: #3c494f; + border: 1px solid #d2d8da; + color: #28353a; } .article-meta-bg { - background-color: #f0f4f4; - color: #555555; + background-color: #e8eff3; + color: #3c494f; } .taxonomy-count { - background-color: rgba(0, 179, 159, 0.18); - color: #007a6c; + background-color: #daf3eb; + color: #007763; } .taxonomy-term { - background: rgba(0, 179, 159, 0.08); - color: #007a6c; - border: 1px solid rgba(0, 179, 159, 0.2); + background: #daf3eb; + color: #007763; + border: 1px solid #93e6d1; &:hover { background-color: $primary; @@ -1248,9 +1255,9 @@ h1, h2, h3, h4, h5, h6 { // Pagination navigation .pagination-nav__link { - border-color: rgba(60, 73, 79, 0.15); + border-color: #d2d8da; background-color: #ffffff; - color: #3c494f; + color: #28353a; &:hover { border-color: $primary; @@ -1259,10 +1266,10 @@ h1, h2, h3, h4, h5, h6 { } .pagination-nav__sublabel { - color: #666666; + color: #647176; } .pagination-nav__label { - color: #1e2117; + color: #000d12; } } diff --git a/assets/scss/_video-landing_project.scss b/assets/scss/_video-landing_project.scss index 808f51df334..8fb646eaf4a 100644 --- a/assets/scss/_video-landing_project.scss +++ b/assets/scss/_video-landing_project.scss @@ -477,11 +477,116 @@ a#videoPageLink:focus { margin-bottom: 2rem; } - .subcategory-btn { - padding: 0.4rem 1rem; - font-size: 0.875rem; - } .category-tab { width: 50%; } } + +// Light theme styling for Video Landing page +[data-theme="light"], +[data-bs-theme="light"] { + .video-page-container { + background: linear-gradient(270deg, rgba(71, 126, 150, 0.15) 0%, rgba(0, 179, 159, 0.25) 100%); + + nav.scrolled { + background-color: #ffffff; + border-bottom: 1px solid #eaedee; + } + } + + .hero-section-wrapper { + color: #000d12; + + .hero-subtitle { + color: #3c494f; + } + } + + .video-tabs-container { + background: #ffffff; + border: 1px solid #eaedee; + box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04); + } + + .category-tab { + color: #647176; + + .tab-icon { + background-color: #eaedee; + + i { + color: #3c494f; + } + } + + &:hover { + color: $primary; + + .tab-icon { + background-color: #daf3eb; + + i { + color: $primary; + } + } + } + + &.active { + color: $primary; + border-bottom: 2px solid $primary; + + .tab-icon { + background-color: $primary; + + i { + color: #ffffff; + } + } + } + } + + .subcategory-btn { + background-color: #eaedee; + color: #3c494f; + box-shadow: none; + border: 1px solid #d2d8da; + + &:hover { + background-color: #daf3eb; + color: #007763; + border-color: $primary; + } + + &.active { + background-color: $primary; + color: #ffffff; + border-color: $primary; + } + } + + .video-card { + background-color: #ffffff; + border: 1px solid #eaedee; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + + .video-info { + h3 { + color: #000d12; + } + + p.video-description { + color: #3c494f; + } + + &:hover { + h3 { + color: $primary; + } + + p.video-description { + color: #000d12; + } + } + } + } +} From af91cef1d806925de1344fe5efab3006aaa0aa2d Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Thu, 20 Aug 2026 09:32:57 +0530 Subject: [PATCH 5/5] [UI] Align navbar nav links and footer with Sistent light theme tokens Signed-off-by: Mayank Sharma --- assets/scss/_footer_project.scss | 137 +++++++++++++++++++++++++++++++ assets/scss/_nav.scss | 3 +- assets/scss/_navbar_project.scss | 36 +++++++- assets/scss/_styles_project.scss | 20 +++++ layouts/partials/footer.html | 4 +- 5 files changed, 192 insertions(+), 8 deletions(-) diff --git a/assets/scss/_footer_project.scss b/assets/scss/_footer_project.scss index 5ae1772bb70..4e8955e29d1 100644 --- a/assets/scss/_footer_project.scss +++ b/assets/scss/_footer_project.scss @@ -592,4 +592,141 @@ .footer-company{ margin-left: 5px; } +} + +.footer { + .logo-light { + display: none !important; + } + .logo-dark { + display: block !important; + } +} + +// Light theme styling for Footer (Sistent Design System) +[data-theme="light"], +[data-bs-theme="light"] { + .footer { + background-color: #f6f8f8 !important; + color: #3c494f !important; + border-top: 1px solid #d2d8da !important; + + .logo-dark { + display: none !important; + } + .logo-light { + display: block !important; + } + + .footer-desc p, + .footer-desc { + color: #3c494f !important; + } + + .section-title { + color: #142126 !important; + font-weight: 700; + + a { + color: #142126 !important; + + &:hover { + color: $primary !important; + } + } + } + + .footer-h5 { + a { + color: #3c494f !important; + + &:hover { + color: $primary !important; + } + } + } + + .footer-icons { + a { + filter: grayscale(1) opacity(0.7) !important; + + &:hover { + filter: none !important; + opacity: 1 !important; + } + + &.social-icon { + filter: grayscale(1) opacity(0.7) !important; + + &:hover { + filter: none !important; + opacity: 1 !important; + } + } + } + } + + .subscribe { + p { + color: #142126 !important; + } + } + + input.footer-input { + background-color: #ffffff !important; + border: 1px solid #d2d8da !important; + color: #000d12 !important; + + &::placeholder { + color: #647176 !important; + } + + &:focus { + border-color: $primary !important; + background-color: #ffffff !important; + color: #000d12 !important; + } + } + + .footer-button { + background-color: $primary !important; + color: #ffffff !important; + + &:hover { + background-color: #008f7e !important; + } + } + + .footer-hr { + border-color: #d2d8da !important; + color: #d2d8da !important; + } + + .footer-bottom { + span { + color: #647176 !important; + } + + a { + color: #647176 !important; + + &:hover { + color: $primary !important; + } + } + } + + .footer-bottom-middle { + .status-link { + background-color: #eaedee !important; + border: 1px solid #d2d8da !important; + color: #3c494f !important; + + &:hover { + color: $primary !important; + border-color: $primary !important; + } + } + } + } } \ No newline at end of file diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss index 7f24255458f..25e199a2bb3 100644 --- a/assets/scss/_nav.scss +++ b/assets/scss/_nav.scss @@ -1,8 +1,7 @@ .td-navbar-cover { @include media-breakpoint-up(md) { - .nav-link { - text-shadow: 1px 1px 2px $dark; + text-shadow: none; } } diff --git a/assets/scss/_navbar_project.scss b/assets/scss/_navbar_project.scss index 83c88eea789..44c593a92e2 100644 --- a/assets/scss/_navbar_project.scss +++ b/assets/scss/_navbar_project.scss @@ -374,21 +374,49 @@ $ecosystem-box-glow: inset 0 0em 4em #ebc01766, 0 0 0 2px #ebc01766, 0.3em 0.3em } .td-navbar, - .navbar-dark { + .navbar-dark, + .td-navbar-cover { background-color: #ffffff !important; border-bottom: 1px solid #eaedee !important; .nav-link { - color: #3c494f; + color: #3c494f !important; font-weight: 600; + text-shadow: none !important; &:hover { - color: $primary; + color: $primary !important; + text-shadow: none !important; } &.current, &.active { - color: $primary; + color: $primary !important; + text-shadow: none !important; + } + } + + #resourcesDropdown { + color: #3c494f !important; + text-shadow: none !important; + + .down-icon svg { + fill: currentColor; + } + + &:hover, + &.current { + color: $primary !important; + } + } + + #signin-button .nav-link { + color: #142126 !important; + font-weight: 600; + text-shadow: none !important; + + &:hover { + color: $primary !important; } } diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index a73e6c38887..227c1caf189 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -827,6 +827,26 @@ h1, h2, h3, h4, h5, h6 { background-color: #f6f8f8; } + .td-footer, + footer.td-footer, + .bg-dark.d-print-none { + background-color: #f6f8f8 !important; + color: #647176 !important; + border-top: 1px solid #d2d8da !important; + + * { + color: #647176 !important; + } + + a { + color: #647176 !important; + + &:hover { + color: $primary !important; + } + } + } + .td-main main { background-color: #ffffff; } diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index e4a3001eae2..ce23d7567ab 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -5,8 +5,8 @@
- {{ $svg := resources.Get "icons/logo.svg" }} - + +