diff --git a/CHANGELOG.md b/CHANGELOG.md index 2fc97213d1..f5b06ed8ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ - [#3256](https://github.com/poanetwork/blockscout/pull/3256) - Fix for invisible validator address at block page and wrong alert text color at xDai ### Chore +- [#3325](https://github.com/poanetwork/blockscout/pull/3325) - Dark theme improvements - [#3316](https://github.com/poanetwork/blockscout/pull/3316), [#3317](https://github.com/poanetwork/blockscout/pull/3317) - xDai smile logo - [#3315](https://github.com/poanetwork/blockscout/pull/3315) - Environment variable to disable Bridge market cap updater - [#3308](https://github.com/poanetwork/blockscout/pull/3308) - Fixate latest stable release of Elixir, Node, Postgres diff --git a/apps/block_scout_web/assets/css/components/_custom_tooltips.scss b/apps/block_scout_web/assets/css/components/_custom_tooltips.scss index 6a1b6fa382..fcce524a60 100644 --- a/apps/block_scout_web/assets/css/components/_custom_tooltips.scss +++ b/apps/block_scout_web/assets/css/components/_custom_tooltips.scss @@ -13,7 +13,7 @@ $tooltip-background-color: $btn-line-color !default; .tooltip-inversed-color { .tooltip-inner { background-color: #fff !important; - color: $btn-line-color !important; + color: #333 !important; } } diff --git a/apps/block_scout_web/assets/css/components/_label.scss b/apps/block_scout_web/assets/css/components/_label.scss index 20dd9fa3d5..1cc4516cc8 100644 --- a/apps/block_scout_web/assets/css/components/_label.scss +++ b/apps/block_scout_web/assets/css/components/_label.scss @@ -10,10 +10,10 @@ } &.omni { background: $primary; - color: white; + color: #fff; } &.amb { background: $secondary; - color: white; + color: #fff; } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss index 0feaf72195..1690a5ec23 100644 --- a/apps/block_scout_web/assets/css/components/_navbar.scss +++ b/apps/block_scout_web/assets/css/components/_navbar.scss @@ -152,7 +152,7 @@ $navbar-logo-width: auto !default; } @include media-breakpoint-up(xl) { - width: 310px; + width: 290px; } @media (min-width: 1366px) { width: 380px; diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss index 35ae9b1937..eec7d31561 100644 --- a/apps/block_scout_web/assets/css/theme/_dark-theme.scss +++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss @@ -780,7 +780,59 @@ $labels-dark: #8a8dba; // header nav, labels } .logo-text { - color: white; + color: #fff; + } + + .bridged-token-label.omni { + background-color: $labels-dark; + } + + .dropdown-item { + .external-link-icon { + path { + fill: #fff; + } + } + + & { + &.active, + &:hover, + &:focus { + .external-link-icon { + path { + fill: #fff; + } + } + } + } + } + + .tooltip-inversed-color { + .tooltip-inner { + background-color: $btn-line-color !important; + color: #fff !important; + } + } + + .tooltip-inversed-color.bs-tooltip-top .arrow::before, + .tooltip-inversed-color.bs-tooltip-auto[x-placement^="top"] .arrow::before { + border-top-color: $btn-line-color !important; + } + + .tooltip-inversed-color.bs-tooltip-right .arrow::before, + .tooltip-inversed-color.bs-tooltip-auto[x-placement^="right"] .arrow::before { + border-right-color: $btn-line-color !important; + } + + .tooltip-inversed-color.bs-tooltip-bottom .arrow::before, + .tooltip-inversed-color.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { + border-bottom-color: $btn-line-color !important; + } + + + .tooltip-inversed-color.bs-tooltip-left .arrow::before, + .tooltip-inversed-color.bs-tooltip-auto[x-placement^="left"] .arrow::before { + border-left-color: $btn-line-color !important; } } @@ -791,7 +843,7 @@ $labels-dark: #8a8dba; // header nav, labels .dark-theme-applied .dropdown-item { background-color: $dark-light!important; - color: #fff!important; + color: #fff !important; } .dark-theme-applied .dropdown-item.active:not(.header), .dark-theme-applied .dropdown-item:not(.header):hover, .dark-theme-applied .dropdown-item:not(.header):focus {