Various dark theme fixes

pull/3325/head
Victor Baranov 4 years ago
parent 5821f3af37
commit 347e68f120
  1. 1
      CHANGELOG.md
  2. 2
      apps/block_scout_web/assets/css/components/_custom_tooltips.scss
  3. 4
      apps/block_scout_web/assets/css/components/_label.scss
  4. 2
      apps/block_scout_web/assets/css/components/_navbar.scss
  5. 56
      apps/block_scout_web/assets/css/theme/_dark-theme.scss

@ -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 - [#3256](https://github.com/poanetwork/blockscout/pull/3256) - Fix for invisible validator address at block page and wrong alert text color at xDai
### Chore ### 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 - [#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 - [#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 - [#3308](https://github.com/poanetwork/blockscout/pull/3308) - Fixate latest stable release of Elixir, Node, Postgres

@ -13,7 +13,7 @@ $tooltip-background-color: $btn-line-color !default;
.tooltip-inversed-color { .tooltip-inversed-color {
.tooltip-inner { .tooltip-inner {
background-color: #fff !important; background-color: #fff !important;
color: $btn-line-color !important; color: #333 !important;
} }
} }

@ -10,10 +10,10 @@
} }
&.omni { &.omni {
background: $primary; background: $primary;
color: white; color: #fff;
} }
&.amb { &.amb {
background: $secondary; background: $secondary;
color: white; color: #fff;
} }
} }

@ -152,7 +152,7 @@ $navbar-logo-width: auto !default;
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
width: 310px; width: 290px;
} }
@media (min-width: 1366px) { @media (min-width: 1366px) {
width: 380px; width: 380px;

@ -780,7 +780,59 @@ $labels-dark: #8a8dba; // header nav, labels
} }
.logo-text { .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 { .dark-theme-applied .dropdown-item {
background-color: $dark-light!important; 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 { .dark-theme-applied .dropdown-item.active:not(.header), .dark-theme-applied .dropdown-item:not(.header):hover, .dark-theme-applied .dropdown-item:not(.header):focus {

Loading…
Cancel
Save