diff --git a/CHANGELOG.md b/CHANGELOG.md index dee1ff58cf..80de959ab6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ - [#2064](https://github.com/poanetwork/blockscout/pull/2064) - feat: add fields to tx apis, small cleanups ### Fixes +- [#2090](https://github.com/poanetwork/blockscout/pull/2090) - updated some ETC theme colors - [#2099](https://github.com/poanetwork/blockscout/pull/2099) - logs search input width - [#2098](https://github.com/poanetwork/blockscout/pull/2098) - nav dropdown issue, logo size issue - [#2082](https://github.com/poanetwork/blockscout/pull/2082) - dropdown styles, tooltip gap fix, 404 page added diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss index 71cabbd1b3..0680729d1d 100644 --- a/apps/block_scout_web/assets/css/components/_tile.scss +++ b/apps/block_scout_web/assets/css/components/_tile.scss @@ -14,6 +14,8 @@ $tile-type-progress-bar-color: $primary !default; $tile-status-error-reason: #ff7986 !default; $tile-status-awaiting-internal-transactions: $warning !default; $tile-padding: 1rem; +$tile-title-color: #333 !default; +$tile-body-a-color: #5959d8 !default; @mixin generate-tile-block($prefix, $color, $label-color: false) { &#{ $prefix } { @@ -23,8 +25,7 @@ $tile-padding: 1rem; a { @if ($label-color) { color: $label-color; - } - @else { + } @else { color: $color; } } @@ -33,8 +34,7 @@ $tile-padding: 1rem; .tile-label { @if ($label-color) { color: $label-color; - } - @else { + } @else { color: $color; } } @@ -42,8 +42,7 @@ $tile-padding: 1rem; .tile-status-label { @if ($label-color) { color: $label-color; - } - @else { + } @else { color: $color; } } @@ -60,20 +59,6 @@ $tile-padding: 1rem; /*********************************************************************/ -.tile-title { - color: #333; - font-size: 12px; - - &-hash { - font-weight: 300; - } - - &-lg { - color: $body-color; - font-size: 16px; - } -} - .tile-label { font-size: 12px; font-weight: 700; @@ -154,7 +139,6 @@ $tile-padding: 1rem; } .tile-function-response { - span.function-response-item { display: block; margin-left: 1rem; @@ -167,7 +151,6 @@ $tile-padding: 1rem; p { margin: 0; } - } .tile-image { @@ -176,6 +159,23 @@ $tile-padding: 1rem; } .tile { + .tile-body a { + color: $tile-body-a-color; + } + + .tile-title { + color: $tile-title-color; + font-size: 12px; + + &-hash { + font-weight: 300; + } + + &-lg { + color: $body-color; + font-size: 16px; + } + } border-radius: 4px; border: 1px solid $border-color; color: $text-muted; @@ -184,20 +184,57 @@ $tile-padding: 1rem; line-height: 1.4rem; padding: $tile-padding; - @include generate-tile-block('.tile-type-block', $tile-type-block-color, darken($tile-type-block-color, 20%)); - @include generate-tile-block('.tile-type-uncle', $tile-type-uncle-color); - @include generate-tile-block('.tile-type-reorg', $tile-type-reorg-color); - @include generate-tile-block('.tile-type-emission-reward', $tile-type-emission-reward-color); - @include generate-tile-block('.tile-type-transaction', $tile-type-transaction-color); - @include generate-tile-block('.tile-type-contract-call', $tile-type-contract-call-color); - @include generate-tile-block('.tile-type-contract-creation', $tile-type-contract-creation-color); - @include generate-tile-block('.tile-type-token-transfer', $tile-type-token-transfer-color); - @include generate-tile-block('.tile-type-unique-token', $tile-type-unique-token-color); - @include generate-tile-block('.tile-type-unique-token-image', $tile-type-unique-token-image-color); - @include generate-tile-block('.tile-type-internal-transaction', $tile-type-internal-transaction-color); - @include generate-tile-block('.tile-type-api-documentation', $tile-type-api-documentation-color); - @include generate-tile-block('[class*="status--error"]', $tile-status-error-reason); - @include generate-tile-block('.tile-status--awaiting-internal-transactions', $tile-status-awaiting-internal-transactions); + @include generate-tile-block( + ".tile-type-block", + $tile-type-block-color, + darken($tile-type-block-color, 20%) + ); + @include generate-tile-block(".tile-type-uncle", $tile-type-uncle-color); + @include generate-tile-block(".tile-type-reorg", $tile-type-reorg-color); + @include generate-tile-block( + ".tile-type-emission-reward", + $tile-type-emission-reward-color + ); + @include generate-tile-block( + ".tile-type-transaction", + $tile-type-transaction-color + ); + @include generate-tile-block( + ".tile-type-contract-call", + $tile-type-contract-call-color + ); + @include generate-tile-block( + ".tile-type-contract-creation", + $tile-type-contract-creation-color + ); + @include generate-tile-block( + ".tile-type-token-transfer", + $tile-type-token-transfer-color + ); + @include generate-tile-block( + ".tile-type-unique-token", + $tile-type-unique-token-color + ); + @include generate-tile-block( + ".tile-type-unique-token-image", + $tile-type-unique-token-image-color + ); + @include generate-tile-block( + ".tile-type-internal-transaction", + $tile-type-internal-transaction-color + ); + @include generate-tile-block( + ".tile-type-api-documentation", + $tile-type-api-documentation-color + ); + @include generate-tile-block( + '[class*="status--error"]', + $tile-status-error-reason + ); + @include generate-tile-block( + ".tile-status--awaiting-internal-transactions", + $tile-status-awaiting-internal-transactions + ); &.n-p { padding: 0; @@ -273,4 +310,4 @@ $tile-padding: 1rem; border-radius: 2px; } } -} \ No newline at end of file +} diff --git a/apps/block_scout_web/assets/css/theme/_base_variables.scss b/apps/block_scout_web/assets/css/theme/_base_variables.scss index 0d428a7194..777b9bd063 100644 --- a/apps/block_scout_web/assets/css/theme/_base_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_base_variables.scss @@ -3,6 +3,10 @@ // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. +$dashboard-line-color-price: #8286a9 !default; +$base-border-color: #e2e5ec !default; +$common-container-margin: 50px !default; + // stylelint-disable $white: #fff !default; $gray-100: #f8f9fa !default; diff --git a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss index 490ae2376b..fadc5f2720 100644 --- a/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss @@ -9,29 +9,21 @@ $footer-background-color: $primary; $footer-title-color: #fff; $footer-text-color: $additional-font; $footer-item-disc-color: $tertiary; -.footer-logo { filter: brightness(0) invert(1); } +$footer-social-icon-color: #5959d8; // dashboard -$dashboard-line-color-price: $tertiary; // price left border - +$dashboard-line-color-price: $secondary; +$dashboard-line-color-market: $tertiary; +$dashboard-banner-gradient-start: #1b1b39; +$dashboard-banner-gradient-end: #27275f; $dashboard-banner-chart-legend-value-color: $additional-font; // chart labels - $dashboard-stats-item-value-color: $additional-font; // stat values - $dashboard-stats-item-border-color: $secondary; // stat border - -$dashboard-banner-gradient-start: $primary; // gradient begin - -$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end - $dashboard-banner-network-plain-container-background-color: #2d2d69; // stats bg - // navigation -.navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow $header-icon-border-color-hover: $tertiary; // top border on hover $header-icon-color-hover: $tertiary; // nav icon on hover -.dropdown-item:hover, .dropdown-item:focus { background-color: $tertiary !important; } // dropdown item on hover // buttons $btn-line-bg: #fff; // button bg @@ -39,12 +31,31 @@ $btn-line-color: #27275e; // button border and font color && hover bg color $btn-copy-color: #27275e; // btn copy $btn-qr-color: #27275e; // btn qr-code -//links & tile -.tile a { color: $tertiary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid #27275e; -} // tab active bg - // card $card-background-1: $tertiary; $card-tab-active: $tertiary; + +// ETC theme's idiosyncrasies +.layout-container { + .navbar { + box-shadow: 0 0 30px 0 rgba(21, 53, 80, 0.12); + } + + .dropdown-item:hover, + .dropdown-item.active, + .dropdown-item:focus { + background-color: $tertiary; + } + + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } + + .footer-logo { + filter: brightness(0) invert(1); + } +} diff --git a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss index c2232fd0a8..40878c5402 100644 --- a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss @@ -1,12 +1,3 @@ -// $primary: #262d62; -// $secondary: #687bf6; -// $tertiary: #687bf6; - -$dashboard-line-color-price: #8286a9 !default; - -$base-border-color: #e2e5ec !default; -$common-container-margin: 50px !default; - // general $primary: #5c34a2; $secondary: #87e1a9;