diff --git a/src/styles/sass/ads-sass/bootstrap-variables.scss b/src/styles/sass/ads-sass/bootstrap-variables.scss index eb4ee5309..ecb051941 100644 --- a/src/styles/sass/ads-sass/bootstrap-variables.scss +++ b/src/styles/sass/ads-sass/bootstrap-variables.scss @@ -23,11 +23,13 @@ $brand-danger: #E44830; // dark mode colors $darkmode-background: #0d1117; +$darkmode-background-secondary: #21262d; $darkmode-border: #30363d; $darkmode-text: #c9d1d9; $darkmode-text-strong: #eee; $darkmode-text-secondary: #8b949e; $darkmode-text-dim: #8b949e; +$darkmode-text-disabled: #30363d; $darkmode-link: #58a6ff; $darkmode-input-bg: #21262d; $darkmode-input-border: #464545; diff --git a/src/styles/sass/ads-sass/dark-mode.scss b/src/styles/sass/ads-sass/dark-mode.scss index 5c435f7ee..0d9397722 100644 --- a/src/styles/sass/ads-sass/dark-mode.scss +++ b/src/styles/sass/ads-sass/dark-mode.scss @@ -777,6 +777,7 @@ textarea { background-color: $darkmode-input-bg; + border-color: $darkmode-input-border; color: $darkmode-text; border-radius: 5px; } @@ -805,7 +806,7 @@ background: transparent; &.sticky { background-color: $darkmode-background; - border-bottom: 1px solid $darkmode-text; + border-bottom: 1px solid $darkmode-border; } } @@ -959,7 +960,7 @@ // Add to library widget .s-query-info-widget .s-library-area { - background: transparent; + background: $darkmode-background; .panel-default { background: transparent; @@ -1353,12 +1354,36 @@ } /** abstract **/ - .s-nav-container a { + // .s-nav-container a { + // color: $darkmode-text; + + // .s-nav-inactive { + // color: $darkmode-text-disabled; + // } + + // &:hover :not(.s-nav-inactive) { + // background-color: $darkmode-background-secondary; + // color + // } + // } + + .s-nav { color: $darkmode-text; - &:hover, - &active { - color: $darkmode-background; + border-color: transparent; + + &.s-nav-inactive { + color: $darkmode-text-disabled; } + + &:hover { + background-color: $darkmode-background-secondary; + } + } + + .s-nav-selected { + border-color: #999; + background-color: $darkmode-background-secondary; + color: $darkmode-text-strong; } .resources__container { @@ -1371,7 +1396,7 @@ #nav-button-container.sticky { background-color: $darkmode-background !important; - border-bottom: 1px solid $darkmode-text; + border-bottom: 1px solid $darkmode-border; } .resources__header__row { @@ -1379,7 +1404,10 @@ } a.resources__content__link { - color: $darkmode-link; + color: $darkmode-text-strong; + &:hover { + color: $darkmode-link; + } } .associated__header__title {