From e4c876d5529d3989232f263afafaa2abd5443a82 Mon Sep 17 00:00:00 2001 From: maxgrapps Date: Thu, 6 Jun 2019 16:57:54 +0300 Subject: [PATCH 1/6] themes issues, ui issues --- apps/block_scout_web/assets/css/_mixins.scss | 8 +-- .../css/components/_btn_dropdown_line.scss | 4 +- .../assets/css/components/_btn_qr.scss | 1 - .../assets/css/components/_button.scss | 2 +- .../assets/css/components/_card.scss | 4 +- .../css/components/_dashboard-banner.scss | 39 ++++++++------- .../assets/css/components/_dropdown.scss | 18 ++++--- .../assets/css/components/_footer.scss | 6 +-- .../assets/css/components/_log-search.scss | 7 ++- .../assets/css/components/_modal.scss | 14 ++++++ .../assets/css/components/_navbar.scss | 12 ++--- .../css/components/_pagination_container.scss | 9 ++++ .../assets/css/components/_tooltip.scss | 2 +- .../assets/css/theme/_base_variables.scss | 1 + .../assets/css/theme/_dai_variables.scss | 44 +++++++++------- .../theme/_ethereum_classic_variables.scss | 23 ++++++--- .../assets/css/theme/_ethereum_variables.scss | 29 +++++++---- .../assets/css/theme/_goerli_variables.scss | 50 +++++++++++++------ .../assets/css/theme/_kovan_variables.scss | 48 ++++++++++++------ .../assets/css/theme/_neutral_variables.scss | 44 ++++++++-------- .../assets/css/theme/_poa_variables.scss | 34 +++++++++---- .../assets/css/theme/_rinkeby_variables.scss | 28 +++++++---- .../assets/css/theme/_ropsten_variables.scss | 29 +++++++---- .../assets/css/theme/_rsk_variables.scss | 13 +++-- .../assets/css/theme/_sokol_variables.scss | 33 ++++++++---- .../assets/css/theme/_variables.scss | 5 +- apps/block_scout_web/assets/js/lib/tooltip.js | 4 +- .../templates/address_contract/index.html.eex | 4 +- .../_pagination_container.html.eex | 2 +- .../templates/layout/_topnav.html.eex | 2 +- .../templates/transaction/overview.html.eex | 2 +- 31 files changed, 337 insertions(+), 184 deletions(-) diff --git a/apps/block_scout_web/assets/css/_mixins.scss b/apps/block_scout_web/assets/css/_mixins.scss index 9b00a92e38..103824771d 100644 --- a/apps/block_scout_web/assets/css/_mixins.scss +++ b/apps/block_scout_web/assets/css/_mixins.scss @@ -88,7 +88,7 @@ outline: none; padding: 0 15px; text-decoration: none; - transition: all 0.15s; + transition: $transition-cont; white-space: nowrap; width: fit-content; @@ -137,9 +137,10 @@ outline: none; padding: 0 15px; text-decoration: none; - transition: all 0.15s; + transition: $transition-cont; white-space: nowrap; width: fit-content; + font-weight: 400; &:hover { background-color: $text-color; @@ -182,7 +183,7 @@ display: flex; height: $dimensions; justify-content: center; - transition: all 0.15s; + transition: $transition-cont; width: $dimensions; svg { @@ -193,6 +194,7 @@ path { fill: $color; + transition: $transition-cont; } &:hover { diff --git a/apps/block_scout_web/assets/css/components/_btn_dropdown_line.scss b/apps/block_scout_web/assets/css/components/_btn_dropdown_line.scss index ab83628c57..2ce66c2033 100644 --- a/apps/block_scout_web/assets/css/components/_btn_dropdown_line.scss +++ b/apps/block_scout_web/assets/css/components/_btn_dropdown_line.scss @@ -9,8 +9,8 @@ $btn-dropdown-line-font: #333; outline: none !important; &:hover { - background-color: $btn-dropdown-line-color; - border-color: $btn-dropdown-line-color; + background-color: #f5f6fa; + border-color: #f5f6fa; color: $btn-dropdown-line-font; } } diff --git a/apps/block_scout_web/assets/css/components/_btn_qr.scss b/apps/block_scout_web/assets/css/components/_btn_qr.scss index 856f14ef30..0f8fbc54f3 100644 --- a/apps/block_scout_web/assets/css/components/_btn_qr.scss +++ b/apps/block_scout_web/assets/css/components/_btn_qr.scss @@ -3,5 +3,4 @@ $btn-qr-dimensions: 31px !default; .btn-qr-icon { @include square-icon-button($btn-qr-color, $btn-qr-dimensions); - transition: $transition-base !important; } diff --git a/apps/block_scout_web/assets/css/components/_button.scss b/apps/block_scout_web/assets/css/components/_button.scss index 063da6828c..d6a9e7b020 100644 --- a/apps/block_scout_web/assets/css/components/_button.scss +++ b/apps/block_scout_web/assets/css/components/_button.scss @@ -10,7 +10,7 @@ $button-secondary-color: $secondary !default; padding: 10px 16px; text-align: center; text-decoration: none; - transition: all 0.25s; + transition: $transition-cont; white-space: nowrap; &-primary { diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index 07a7961efe..6e50100f0d 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/apps/block_scout_web/assets/css/components/_card.scss @@ -176,10 +176,10 @@ $card-tab-icon-color-active: #20b760 !default; height: 70px; padding: 0 25px; text-align: center; - transition: $transition-base; + transition: $transition-cont; &:hover { - background-color: rgba($card-tab-active, .1); + background-color: rgba($card-tab-active, .15); color: $card-tab-active; text-decoration: none; } diff --git a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss index ada29360d6..ade21afea5 100644 --- a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss +++ b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss @@ -16,30 +16,15 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa .dashboard-banner-container { @include gradient-container(); - + margin-bottom: 3rem; + overflow: hidden; padding: 0; position: relative; - - &::after { - background-color: $dashboard-banner-network-plain-container-background-color; - bottom: 0; - content: ""; - display: block; - height: $dashboard-banner-network-plain-container-height; - left: 70%; - position: absolute; - right: 0; - - @include media-breakpoint-down(md) { - display: none; - } - } } .dashboard-banner { display: flex; justify-content: space-between; - margin-bottom: 3rem; position: relative; z-index: 9; @@ -148,6 +133,7 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa max-width: 100%; padding: 30px 0 30px 60px; width: 750px; + position: relative; @include media-breakpoint-down(md) { border-top-right-radius: 10px; @@ -158,11 +144,30 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa max-width: 100%; padding: 20px 0 20px 20px; width: 250px; + box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2); } @include media-breakpoint-down(sm) { width: 100%; } + + &::after { + background-color: $dashboard-banner-network-plain-container-background-color; + bottom: 0; + content: ""; + display: block; + height: $dashboard-banner-network-plain-container-height; + left: 0; + position: absolute; + width: 9999px; + z-index: -1; + box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2); + border-top-left-radius: 10px; + + @include media-breakpoint-down(md) { + display: none; + } + } } .dashboard-banner-network-stats { diff --git a/apps/block_scout_web/assets/css/components/_dropdown.scss b/apps/block_scout_web/assets/css/components/_dropdown.scss index a45f9afa16..f08e8ddc5a 100644 --- a/apps/block_scout_web/assets/css/components/_dropdown.scss +++ b/apps/block_scout_web/assets/css/components/_dropdown.scss @@ -1,12 +1,12 @@ $dropdown-menu-item-color: #333 !default; -$dropdown-menu-item-hover-color: $primary !default; -$dropdown-menu-item-hover-background: rgba($primary, .1) !default; +$dropdown-menu-item-hover-color: $secondary !default; +$dropdown-menu-item-hover-background: rgba($secondary, .1) !default; // These styles extend the default Bootstrap styles .dropdown-menu { border-bottom: 1px solid #e2e5ec; border-left: 1px solid #e2e5ec; - border-radius: 0 0 8px 8px !important; + border-radius: 0 0 2px 2px !important; border-right: 1px solid #e2e5ec; border-top: none; box-shadow: $box-shadow; @@ -34,13 +34,13 @@ $dropdown-menu-item-hover-background: rgba($primary, .1) !default; color: $dropdown-menu-item-color; font-size: 12px; padding: 10px 20px; - transition: $transition-base; + transition: $transition-cont; & { &.active, &:hover, &:focus { - background-color: $dropdown-menu-item-hover-background !important; + background-color: $dropdown-menu-item-hover-background; color: $dropdown-menu-item-hover-color; } } @@ -51,8 +51,8 @@ $dropdown-menu-item-hover-background: rgba($primary, .1) !default; } &:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; } &.header { @@ -72,6 +72,10 @@ $dropdown-menu-item-hover-background: rgba($primary, .1) !default; } } +.navbar .dropdown-menu { + border: none; +} + .dropdown-search-icon { color: $gray-300; left: 8px; diff --git a/apps/block_scout_web/assets/css/components/_footer.scss b/apps/block_scout_web/assets/css/components/_footer.scss index a27f932078..7b666b4888 100644 --- a/apps/block_scout_web/assets/css/components/_footer.scss +++ b/apps/block_scout_web/assets/css/components/_footer.scss @@ -4,7 +4,7 @@ $footer-text-color: rgba(#fff, 0.7) !default; $footer-link-color: $footer-text-color !default; $footer-item-disc-color: $primary !default; $footer-social-icon-color: $footer-text-color !default; -$footer-logo-height: 18px !default; +$footer-logo-height: 28px !default; $footer-logo-width: auto !default; .footer { @@ -46,7 +46,7 @@ $footer-logo-width: auto !default; font-size: 22px; margin-right: 15px; text-decoration: none; - transition: $transition-base; + transition: $transition-cont; &:hover { color: #fff; @@ -93,7 +93,7 @@ $footer-logo-width: auto !default; padding: 0; a { - transition: $transition-base; + transition: $transition-cont; &:hover { text-decoration: none; color: #fff; diff --git a/apps/block_scout_web/assets/css/components/_log-search.scss b/apps/block_scout_web/assets/css/components/_log-search.scss index f1c6d145cc..4d1857072c 100644 --- a/apps/block_scout_web/assets/css/components/_log-search.scss +++ b/apps/block_scout_web/assets/css/components/_log-search.scss @@ -12,7 +12,7 @@ .logs-search { display: flex; position: relative; - width: 52%; + flex: 2; @media (max-width: 599px) { margin-bottom: 30px; width: 100%; @@ -29,6 +29,7 @@ font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 12px; font-weight: 600; + -webkit-appearance: none; } .logs-search-input { @@ -36,8 +37,10 @@ display: inline-flex; flex-grow: 2; min-width: 160px; + font-weight: 300 !important; &::placeholder { - color: #a3a9b5; + color: #a3a9b5; + font-weight: 300 !important; } } diff --git a/apps/block_scout_web/assets/css/components/_modal.scss b/apps/block_scout_web/assets/css/components/_modal.scss index 4c3cf7f8cf..bc9e16c875 100644 --- a/apps/block_scout_web/assets/css/components/_modal.scss +++ b/apps/block_scout_web/assets/css/components/_modal.scss @@ -46,4 +46,18 @@ $modal-gray-background: #f6f7f9 !default; .modal-content { border-radius: $modal-border-radius; position: relative; + .btn-primary { + box-shadow: none !important; + background-color: $btn-line-color; + border: 1px solid $btn-line-color; + &:hover { + background-color: $btn-line-color; + border-color: $btn-line-color; + } + &:focus, + &:active { + background-color: darken($btn-line-color, 10%) !important; + border-color: darken($btn-line-color, 10%) !important; + } + } } diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss index f98704f957..7f0b81f803 100644 --- a/apps/block_scout_web/assets/css/components/_navbar.scss +++ b/apps/block_scout_web/assets/css/components/_navbar.scss @@ -3,14 +3,14 @@ $header-background-color: #fff !default; $header-links-color: #828ba0 !default; $header-links-color-active: #333 !default; $header-icon-color: $header-links-color !default; -$header-icon-color-hover: #333 !default; -$header-icon-border-color-hover: $primary !default; +$header-icon-color-hover: $secondary !default; +$header-icon-border-color-hover: $secondary !default; $header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default; $header-textfield-text-color: $header-links-color !default; $header-textfield-background-color: #f5f6fa !default; $header-textfield-magnifier-color: $header-links-color !default; $header-link-horizontal-padding: 0.71rem; -$navbar-logo-height: 18px !default; +$navbar-logo-height: 28px !default; $navbar-logo-width: auto !default; .navbar.navbar-primary { @@ -30,7 +30,7 @@ $navbar-logo-width: auto !default; display: flex; font-size: 14px; position: relative; - transition: $transition-base; + transition: $transition-cont; &:before { background-color: $header-icon-border-color-hover; @@ -43,7 +43,7 @@ $navbar-logo-width: auto !default; position: absolute; top: -10px; transform: translateX(-50%); - transition: all 0.2s ease; + transition: $transition-cont; width: calc( 100% - #{$header-link-horizontal-padding} - #{$header-link-horizontal-padding} ); @@ -78,7 +78,7 @@ $navbar-logo-width: auto !default; path { fill: $header-icon-color; - transition: $transition-base; + transition: $transition-cont; } } } diff --git a/apps/block_scout_web/assets/css/components/_pagination_container.scss b/apps/block_scout_web/assets/css/components/_pagination_container.scss index 04e0d944e1..876cf83eb0 100644 --- a/apps/block_scout_web/assets/css/components/_pagination_container.scss +++ b/apps/block_scout_web/assets/css/components/_pagination_container.scss @@ -17,6 +17,10 @@ $pagination-page-link-color-active: #fff !default; display: flex; justify-content: space-between; + &[disabled] { + display: none; + } + @include media-breakpoint-down(sm) { flex-direction: column; } @@ -109,5 +113,10 @@ $pagination-page-link-color-active: #fff !default; } } } +} +.logs-topbar .pagination-container { + @media (min-width: 600px) { + margin-left: 80px; + } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_tooltip.scss b/apps/block_scout_web/assets/css/components/_tooltip.scss index ecb334b84e..5518bd5747 100644 --- a/apps/block_scout_web/assets/css/components/_tooltip.scss +++ b/apps/block_scout_web/assets/css/components/_tooltip.scss @@ -1,4 +1,4 @@ -$tooltip-background-color: $primary !default; +$tooltip-background-color: $btn-line-color !default; $tooltip-color: #fff !default; .tooltip { 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 5b1b55b7d5..3e97eb61b3 100644 --- a/apps/block_scout_web/assets/css/theme/_base_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_base_variables.scss @@ -244,6 +244,7 @@ $caret-width: 0.3em !default; $transition-base: all 0.2s ease-in-out !default; $transition-fade: opacity 0.15s linear !default; $transition-collapse: height 0.35s ease !default; +$transition-cont: all 0.4s ease-in-out !default; // Fonts // diff --git a/apps/block_scout_web/assets/css/theme/_dai_variables.scss b/apps/block_scout_web/assets/css/theme/_dai_variables.scss index 128bd4db9a..1c91057c60 100644 --- a/apps/block_scout_web/assets/css/theme/_dai_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_dai_variables.scss @@ -2,21 +2,24 @@ $primary: #17314f; $secondary: #69b9d7; $tertiary: #15bba6; -$additional-font: #ffffff; +$additional-font: #fff; // footer $footer-background-color: $primary; $footer-title-color: #fff; -$footer-text-color: #909dab; -$footer-item-disc-color: $tertiary; +$footer-text-color: #fff; +$footer-item-disc-color: $secondary; .footer-logo { filter: brightness(0) invert(1); } // dashboard $dashboard-line-color-price: $tertiary; // price left border -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels +$dashboard-line-color-market: $secondary; -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: $tertiary; +$dashboard-stats-item-label-color: $tertiary; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $secondary; // stat border @@ -29,22 +32,29 @@ $dashboard-banner-network-plain-container-background-color: #20446e; // stats bg // navigation .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow -$header-icon-border-color-hover: $secondary; // top border on hover -$header-icon-color-hover: $secondary; // nav icon on hover -.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover // buttons $btn-line-bg: #fff; // button bg -$btn-line-color: $primary; // button border and font color && hover bg color -$btn-copy-color: $primary; // btn copy -$btn-qr-color: $primary; // btn qr-code +$btn-line-color: $tertiary; // button border and font color && hover bg color +$btn-copy-color: $tertiary; // btn copy +$btn-qr-color: $tertiary; // btn qr-code //links & tile -.tile a { color: $tertiary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $primary; -} // tab active bg +$tile-body-a-color: $tertiary; +$tile-type-block-color: $tertiary; +$tile-type-progress-bar-color: $tertiary; +a.tile-title { color: $tertiary !important; } // card -$card-background-1: #1b395c; -$card-tab-active: $tertiary; +$card-background-1: $secondary; +$card-tab-active: $secondary; + +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} \ No newline at end of file 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 fadc5f2720..9bec5a1243 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 @@ -16,8 +16,12 @@ $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-banner-chart-legend-label-color: $additional-font; +$dashboard-stats-item-label-color: $additional-font; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values + $dashboard-stats-item-border-color: $secondary; // stat border $dashboard-banner-network-plain-container-background-color: #2d2d69; // stats bg @@ -27,9 +31,15 @@ $header-icon-color-hover: $tertiary; // nav icon on hover // buttons $btn-line-bg: #fff; // button bg -$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 +$btn-line-color: $tertiary; // button border and font color && hover bg color +$btn-copy-color: $tertiary; // btn copy +$btn-qr-color: $tertiary; // btn qr-code + +//links & tile +$tile-body-a-color: $tertiary; +$tile-type-block-color: $tertiary; +$tile-type-progress-bar-color: $tertiary; +a.tile-title { color: $tertiary !important; } // card $card-background-1: $tertiary; @@ -44,7 +54,8 @@ $card-tab-active: $tertiary; .dropdown-item:hover, .dropdown-item.active, .dropdown-item:focus { - background-color: $tertiary; + background-color: rgba($tertiary, .1) !important; + color: $tertiary !important; } .dashboard-banner-container { diff --git a/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss b/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss index 7437274bf6..0755d3e4b4 100644 --- a/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ethereum_variables.scss @@ -10,13 +10,15 @@ $footer-title-color: #fff; $footer-text-color: #89cae6; $footer-item-disc-color: $secondary; .footer-logo { filter: brightness(0) invert(1); } +.footer-social-icons .footer-social-icon { color: $secondary; } // dashboard $dashboard-line-color-price: $tertiary; // price left border -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels - -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: #89cae6; +$dashboard-stats-item-label-color: #89cae6; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $secondary; // stat border @@ -29,9 +31,6 @@ $dashboard-banner-network-plain-container-background-color: #1c476c; // stats bg // navigation .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow -$header-icon-border-color-hover: $secondary; // top border on hover -$header-icon-color-hover: $secondary; // nav icon on hover -.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover // buttons $btn-line-bg: #fff; // button bg @@ -40,11 +39,21 @@ $btn-copy-color: $secondary; // btn copy $btn-qr-color: $secondary; // btn qr-code //links & tile -.tile a { color: $secondary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $secondary; -} // tab active bg +$tile-body-a-color: $secondary; +$tile-type-block-color: $secondary; +$tile-type-progress-bar-color: $secondary; +a.tile-title { color: $secondary !important; } // card $card-background-1: $secondary; $card-tab-active: $secondary; + +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_goerli_variables.scss b/apps/block_scout_web/assets/css/theme/_goerli_variables.scss index f646f08205..a43920f22b 100644 --- a/apps/block_scout_web/assets/css/theme/_goerli_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_goerli_variables.scss @@ -12,11 +12,14 @@ $footer-item-disc-color: $secondary; .footer-logo { filter: brightness(0) invert(1); } // dashboard -$dashboard-line-color-price: $tertiary; // price left border +$dashboard-line-color-price: $secondary; -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels +$dashboard-line-color-market: $tertiary; -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: $tertiary; +$dashboard-stats-item-label-color: $tertiary; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $secondary; // stat border @@ -29,22 +32,39 @@ $dashboard-banner-network-plain-container-background-color: #424242; // stats bg // navigation .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow -$header-icon-border-color-hover: $secondary; // top border on hover -$header-icon-color-hover: $secondary; // nav icon on hover -.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover // buttons $btn-line-bg: #fff; // button bg -$btn-line-color: #424242; // button border and font color && hover bg color -$btn-copy-color: #424242; // btn copy -$btn-qr-color: #424242; // btn qr-code +$btn-line-color: #a46f30; // button border and font color && hover bg color +$btn-copy-color: #a46f30; // btn copy +$btn-qr-color: #a46f30; // btn qr-code //links & tile -.tile a { color: #a46f30 !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $secondary; -} // tab active bg +$tile-body-a-color: #a46f30; +$tile-type-block-color: #a46f30; +$tile-type-progress-bar-color: #a46f30; +a.tile-title { color: #a46f30 !important; } // card -$card-background-1: $secondary; -$card-tab-active: $secondary; +$card-background-1: #a46f30; +$card-tab-active: #a46f30; + +// dropdown +.dropdown-item { + &:hover, + &:active, + &.active { + background-color: rgba(#a46f30, .1) !important; + color: #a46f30 !important; + } +} + +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} diff --git a/apps/block_scout_web/assets/css/theme/_kovan_variables.scss b/apps/block_scout_web/assets/css/theme/_kovan_variables.scss index 5e67a61356..821232bbd5 100644 --- a/apps/block_scout_web/assets/css/theme/_kovan_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_kovan_variables.scss @@ -7,16 +7,17 @@ $additional-font: #99fff9; // footer $footer-background-color: $primary; $footer-title-color: #fff; -$footer-text-color: $secondary; -$footer-item-disc-color: $secondary; +$footer-text-color: $additional-font; +$footer-item-disc-color: $additional-font; .footer-logo { filter: brightness(0) invert(1); } // dashboard $dashboard-line-color-price: $tertiary; // price left border -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels - -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: $additional-font; +$dashboard-stats-item-label-color: $additional-font; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $secondary; // stat border @@ -29,9 +30,8 @@ $dashboard-banner-network-plain-container-background-color: #1a323b; // 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 +$header-icon-border-color-hover: $tertiary; +$header-icon-color-hover: $tertiary; // buttons $btn-line-bg: #fff; // button bg @@ -40,11 +40,31 @@ $btn-copy-color: $tertiary; // btn copy $btn-qr-color: $tertiary; // btn qr-code //links & tile -.tile a { color: $tertiary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $tertiary; -} // tab active bg +$tile-body-a-color: $tertiary; +$tile-type-block-color: $tertiary; +$tile-type-progress-bar-color: $tertiary; +a.tile-title { color: $tertiary !important; } // card -$card-background-1: $primary; -$card-tab-active: $primary; +$card-background-1: $tertiary; +$card-tab-active: $tertiary; + +// dropdown +.dropdown-item { + &:hover, + &:active, + &.active { + background-color: rgba($tertiary, .1) !important; + color: $tertiary !important; + } +} + +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} \ No newline at end of file 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 40878c5402..8b6676a856 100644 --- a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss @@ -14,9 +14,10 @@ $footer-item-disc-color: $secondary; // dashboard $dashboard-line-color-price: $tertiary; // price left border -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels - -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: #dcc8ff; +$dashboard-stats-item-label-color: $dashboard-banner-chart-legend-label-color; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $secondary; // stat border @@ -24,14 +25,15 @@ $dashboard-banner-gradient-start: $primary; // gradient begin $dashboard-banner-gradient-end: lighten($primary, 5); // gradient end -$dashboard-banner-network-plain-container-background-color: #865bd4; // stats bg +$dashboard-banner-network-plain-container-background-color: #8258cd; // stats bg // navigation .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow -$header-icon-border-color-hover: $primary; // top border on hover -$header-icon-color-hover: $primary; // nav icon on hover -.dropdown-item:hover, .dropdown-item:focus { background-color: $primary !important; } // dropdown item on hover +$dropdown-menu-item-hover-color: $primary !default; +$dropdown-menu-item-hover-background: rgba($primary, .1) !default; +$header-icon-color-hover: $primary; +$header-icon-border-color-hover: $primary; // buttons $btn-line-bg: #fff; // button bg @@ -40,23 +42,21 @@ $btn-copy-color: $primary; // btn copy $btn-qr-color: $primary; // btn qr-code //links & tile -.tile a { color: $primary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $primary; -} // tab active bg +$tile-body-a-color: $primary; +$tile-type-block-color: $primary; +$tile-type-progress-bar-color: $primary; +a.tile-title { color: $primary !important; } // card $card-background-1: $primary; $card-tab-active: $primary; -.footer { - .tooltip { - .tooltip-inner { - background-color: darken($footer-background-color, 10) !important; - } - .arrow::before { - border-top-color: darken($footer-background-color, 10) !important; - border-bottom-color: darken($footer-background-color, 10) !important; - } - } -} +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_poa_variables.scss b/apps/block_scout_web/assets/css/theme/_poa_variables.scss index 198c89ba5a..8b6676a856 100644 --- a/apps/block_scout_web/assets/css/theme/_poa_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_poa_variables.scss @@ -14,9 +14,10 @@ $footer-item-disc-color: $secondary; // dashboard $dashboard-line-color-price: $tertiary; // price left border -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels - -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: #dcc8ff; +$dashboard-stats-item-label-color: $dashboard-banner-chart-legend-label-color; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $secondary; // stat border @@ -24,14 +25,15 @@ $dashboard-banner-gradient-start: $primary; // gradient begin $dashboard-banner-gradient-end: lighten($primary, 5); // gradient end -$dashboard-banner-network-plain-container-background-color: #865bd4; // stats bg +$dashboard-banner-network-plain-container-background-color: #8258cd; // stats bg // navigation .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow -$header-icon-border-color-hover: $primary; // top border on hover -$header-icon-color-hover: $primary; // nav icon on hover -.dropdown-item:hover, .dropdown-item:focus { background-color: $primary !important; } // dropdown item on hover +$dropdown-menu-item-hover-color: $primary !default; +$dropdown-menu-item-hover-background: rgba($primary, .1) !default; +$header-icon-color-hover: $primary; +$header-icon-border-color-hover: $primary; // buttons $btn-line-bg: #fff; // button bg @@ -40,11 +42,21 @@ $btn-copy-color: $primary; // btn copy $btn-qr-color: $primary; // btn qr-code //links & tile -.tile a { color: $primary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $primary; -} // tab active bg +$tile-body-a-color: $primary; +$tile-type-block-color: $primary; +$tile-type-progress-bar-color: $primary; +a.tile-title { color: $primary !important; } // card $card-background-1: $primary; $card-tab-active: $primary; + +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss b/apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss index 1cc6f3d1c4..004c046c17 100644 --- a/apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss @@ -14,9 +14,10 @@ $footer-item-disc-color: $additional-font; // dashboard $dashboard-line-color-price: $tertiary; // price left border -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels - -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: $additional-font; +$dashboard-stats-item-label-color: $additional-font; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $tertiary; // stat border @@ -29,9 +30,6 @@ $dashboard-banner-network-plain-container-background-color: #244468; // 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 @@ -40,11 +38,21 @@ $btn-copy-color: $tertiary; // btn copy $btn-qr-color: $tertiary; // btn qr-code //links & tile -.tile a { color: $tertiary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $tertiary; -} // tab active bg +$tile-body-a-color: $tertiary; +$tile-type-block-color: $tertiary; +$tile-type-progress-bar-color: $tertiary; +a.tile-title { color: $tertiary !important; } // card $card-background-1: $secondary; $card-tab-active: $secondary; + +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss b/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss index 88ac5632e0..1e62ea6d69 100644 --- a/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_ropsten_variables.scss @@ -10,13 +10,15 @@ $footer-title-color: #fff; $footer-text-color: #89cae6; $footer-item-disc-color: $secondary; .footer-logo { filter: brightness(0) invert(1); } +.footer-social-icons .footer-social-icon { color: $secondary; } // dashboard $dashboard-line-color-price: $tertiary; // price left border -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels - -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: #89cae6; +$dashboard-stats-item-label-color: #89cae6; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $tertiary; // stat border @@ -29,9 +31,6 @@ $dashboard-banner-network-plain-container-background-color: #1c476c; // stats bg // navigation .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow -$header-icon-border-color-hover: $secondary; // top border on hover -$header-icon-color-hover: $secondary; // nav icon on hover -.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover // buttons $btn-line-bg: #fff; // button bg @@ -40,11 +39,21 @@ $btn-copy-color: $secondary; // btn copy $btn-qr-color: $secondary; // btn qr-code //links & tile -.tile a { color: $secondary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $secondary; -} // tab active bg +$tile-body-a-color: $secondary; +$tile-type-block-color: $secondary; +$tile-type-progress-bar-color: $secondary; +a.tile-title { color: $secondary !important; } // card $card-background-1: $secondary; $card-tab-active: $secondary; + +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} diff --git a/apps/block_scout_web/assets/css/theme/_rsk_variables.scss b/apps/block_scout_web/assets/css/theme/_rsk_variables.scss index efd2afe2f5..e7536db13c 100644 --- a/apps/block_scout_web/assets/css/theme/_rsk_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_rsk_variables.scss @@ -6,8 +6,8 @@ $additional-font: #a1ded1; $tile-body-a-color: $secondary; $tile-type-block-color: $secondary; - $tile-type-progress-bar-color: $secondary; +a.tile-title { color: $secondary !important; } // footer $footer-background-color: $primary; @@ -18,8 +18,12 @@ $footer-social-icon-color: $secondary; // dashboard $dashboard-line-color-price: $tertiary; // price left border -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels -$dashboard-stats-item-value-color: $additional-font; // stat values + +$dashboard-banner-chart-legend-label-color: $additional-font; +$dashboard-stats-item-label-color: $additional-font; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values + $dashboard-stats-item-border-color: $secondary; // stat border $dashboard-banner-gradient-start: $primary; // gradient begin $dashboard-banner-gradient-end: #193039; // gradient end @@ -34,7 +38,6 @@ $btn-line-bg: #fff; // button bg $btn-line-color: $secondary; // button border and font color && hover bg color $btn-copy-color: $secondary; // btn copy $btn-qr-color: $secondary; // btn qr-code -$btn-dropdown-line-color: $secondary; // card $card-background-1: $secondary; @@ -57,4 +60,4 @@ $card-tab-active: $secondary; .footer-logo { filter: brightness(0) invert(1); } - } +} diff --git a/apps/block_scout_web/assets/css/theme/_sokol_variables.scss b/apps/block_scout_web/assets/css/theme/_sokol_variables.scss index aeefcc73e5..4c353cf3fa 100644 --- a/apps/block_scout_web/assets/css/theme/_sokol_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_sokol_variables.scss @@ -7,17 +7,21 @@ $additional-font: #93e8dd; // footer $footer-background-color: $primary; $footer-title-color: #fff; -$footer-text-color: #93e8dd; -$footer-item-disc-color: $secondary; +$footer-text-color: $additional-font; +$footer-item-disc-color: $additional-font; .footer-logo { filter: brightness(0) invert(1); } // dashboard $dashboard-line-color-price: $tertiary; // price left border +$dashboard-line-color-price: $secondary; -$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels +$dashboard-line-color-market: $tertiary; -$dashboard-stats-item-value-color: $additional-font; // stat values +$dashboard-banner-chart-legend-label-color: $additional-font; +$dashboard-stats-item-label-color: $additional-font; +$dashboard-banner-chart-legend-value-color: #fff; // chart labels +$dashboard-stats-item-value-color: #fff; // stat values $dashboard-stats-item-border-color: $secondary; // stat border @@ -30,9 +34,6 @@ $dashboard-banner-network-plain-container-background-color: #0e534a; // stats bg // navigation .navbar { box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12); } // header shadow -$header-icon-border-color-hover: $secondary; // top border on hover -$header-icon-color-hover: $secondary; // nav icon on hover -.dropdown-item:hover, .dropdown-item:focus { background-color: $secondary !important; } // dropdown item on hover // buttons $btn-line-bg: #fff; // button bg @@ -41,11 +42,21 @@ $btn-copy-color: #1c9f90; // btn copy $btn-qr-color: #1c9f90; // btn qr-code //links & tile -.tile a { color: $secondary !important; } // links color for badges -.tile-type-block { - border-left: 4px solid $secondary; -} // tab active bg +$tile-body-a-color: #1c9f90; +$tile-type-block-color: #1c9f90; +$tile-type-progress-bar-color: #1c9f90; +a.tile-title { color: #1c9f90 !important; } // card $card-background-1: $secondary; $card-tab-active: $secondary; + +.layout-container { + .dashboard-banner-container { + background-image: linear-gradient( + to bottom, + $dashboard-banner-gradient-start, + $dashboard-banner-gradient-end + ); + } +} diff --git a/apps/block_scout_web/assets/css/theme/_variables.scss b/apps/block_scout_web/assets/css/theme/_variables.scss index 14517ac46f..0a1fe622a8 100644 --- a/apps/block_scout_web/assets/css/theme/_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_variables.scss @@ -1,5 +1,5 @@ @import "theme/base_variables"; -@import "neutral_variables"; +// @import "neutral_variables"; // @import "dai_variables"; // @import "ethereum_classic_variables"; // @import "ethereum_variables"; @@ -19,6 +19,7 @@ // @import "sokol_variables"; // @import "tobalaba_variables"; // @import "tomochain_variables"; +@import "rsk_variables"; // responsive breakpoints $breakpoint-xs: 320px; @@ -27,4 +28,4 @@ $breakpoint-md: 768px; $breakpoint-lg: 992px; $breakpoint-xl: 1024px; $breakpoint-xxl: 1280px; -$breakpoint-xxxl: 1366px; +$breakpoint-xxxl: 1366px; \ No newline at end of file diff --git a/apps/block_scout_web/assets/js/lib/tooltip.js b/apps/block_scout_web/assets/js/lib/tooltip.js index a22da61349..c2126fd692 100644 --- a/apps/block_scout_web/assets/js/lib/tooltip.js +++ b/apps/block_scout_web/assets/js/lib/tooltip.js @@ -1,5 +1,7 @@ import $ from 'jquery' $(function () { - $('[data-toggle="tooltip"]').tooltip() + $('[data-toggle="tooltip"]').tooltip({ + animation: true + }) }) diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex index b7b2282682..abacec4b61 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_contract/index.html.eex @@ -80,8 +80,8 @@ <% {:ok, contract_code} -> %>
-

<%= gettext "Contract Byte Code" %>

-
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex index f9992c6d86..2f9f470eed 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/common_components/_pagination_container.html.eex @@ -1,4 +1,4 @@ -
+
disabled<% end %>> <%= if false do %>
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex index f48e78c390..de88489330 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex @@ -83,7 +83,7 @@ <%= subnetwork_title() %> -
+
Mainnets <%= for %{url: url, title: title} <- dropdown_head_main_nets() do %> <%= title %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex index c736a87633..3d3c1b6d8c 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex @@ -108,7 +108,7 @@
<%= gettext "Raw Input" %>
-
+