diff --git a/assets/sass/dark-mode.css b/assets/sass/dark-mode.css index ca2c5e21da..e947f22fcf 100644 --- a/assets/sass/dark-mode.css +++ b/assets/sass/dark-mode.css @@ -18,6 +18,9 @@ $main-bg: #fcfcfa; $bg-color: #f0efe7 url($baseurl + "images/bg/body.jpg"); $sidebar-bg-color: #efefe7; + $no-changes-bg-color: #f5f5f3; + $dropdown-active-bg-color: #fff; + $versions-footer-bg-color: #eae9e0; @if $mode == dark { $orange: #d7834f; @@ -37,6 +40,9 @@ $main-bg: #333333; $bg-color: #2a2a2aff; $sidebar-bg-color: #3d3d3a; + $no-changes-bg-color: #515150; + $dropdown-active-bg-color: #515150; + $versions-footer-bg-color: #1f1f1e; :root#{$theme} { div#masthead { @@ -100,6 +106,14 @@ input.pagefind-ui__search-input { background: var(--main-bg); } + + #reference-version { + background-color: rgba(111, 110, 105, 0.33); + } + + #l10n-versions-dropdown footer a { + color: #6969dd; + } } } @@ -132,6 +146,9 @@ --main-bg: #{$main-bg}; --sidebar-bg-color: #{$sidebar-bg-color}; --bg-color: #{$bg-color}; + --no-changes-bg-color: #{$no-changes-bg-color}; + --dropdown-active-bg-color: #{$dropdown-active-bg-color}; + --versions-footer-bg-color: #{$versions-footer-bg-color}; } } diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index 3170c725be..3b5d7ccc4f 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -298,7 +298,7 @@ a.dropdown-trigger { &.active { position: relative; z-index: 200; - background-color: #fff !important; + background-color: var(--dropdown-active-bg-color) !important; @include border-top-left-radius(3px); @include border-top-right-radius(3px); border: solid 1px var(--base-border-color-darker-8); diff --git a/assets/sass/reference.scss b/assets/sass/reference.scss index 65a00ac822..4873a402c8 100644 --- a/assets/sass/reference.scss +++ b/assets/sass/reference.scss @@ -131,7 +131,7 @@ h3.plumbing { font-size: 11px; font-weight: normal; color: var(--font-color); - background-color: #eae9e0; + background-color: var(--versions-footer-bg-color); @include border-bottom-left-radius(3px); @include border-bottom-right-radius(3px); @@ -285,7 +285,7 @@ ol.reference-previous-versions { @include border-bottom-left-radius(10px); font-size: 10px; font-style: italic; - background-color: #f5f5f3; + background-color: var(--no-changes-bg-color); } } }