From 0018b19dca45d1d2dbf89e74a292f79a309739e6 Mon Sep 17 00:00:00 2001 From: maxgrapps Date: Sat, 20 Jul 2019 12:35:49 +0300 Subject: [PATCH 01/19] dark theme --- apps/block_scout_web/assets/css/app.scss | 1 + .../assets/css/theme/_base_variables.scss | 3 + .../assets/css/theme/_dark-theme.scss | 423 ++++++++++++++++++ .../assets/css/theme/_neutral_variables.scss | 7 +- .../assets/css/theme/_poa_variables.scss | 7 +- apps/block_scout_web/assets/js/app.js | 1 + .../assets/js/pages/dark-mode-switcher.js | 10 + .../templates/layout/_topnav.html.eex | 22 +- .../templates/layout/app.html.eex | 5 + apps/block_scout_web/priv/gettext/default.pot | 52 +-- 10 files changed, 502 insertions(+), 29 deletions(-) create mode 100644 apps/block_scout_web/assets/css/theme/_dark-theme.scss create mode 100644 apps/block_scout_web/assets/js/pages/dark-mode-switcher.js diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index cf79ee46e8..d9c42e564e 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -128,6 +128,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/new_smart_contract"; @import "components/radio_big"; @import "components/btn_no_border"; +@import "theme/dark-theme"; :export { dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color; 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 9f1b82c887..2238327bd4 100644 --- a/apps/block_scout_web/assets/css/theme/_base_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_base_variables.scss @@ -70,7 +70,10 @@ $colors: map-merge( ); $primary: $indigo !default; +$dark-primary: #9b62ff !default; +$dark-primary-alternate: #9b62ff !default; $secondary: #7dd79f !default; +$dark-secondary: #87e1a9 !default; $tertiary: $purple !default; $success: $green !default; $info: $cyan !default; diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss new file mode 100644 index 0000000000..a0884e6348 --- /dev/null +++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss @@ -0,0 +1,423 @@ +$body-dark: #1c1d31; // body background +$dark-bg: #22223a; // hero shade +$dark-light-bg: #282945; // pills bg shade +$dark-light: #313355; // tile light top share +$labels-dark: #8a8dba; // header nav, labels + +// Switcher +.dark-mode-changer { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: transparent; + border: none; + cursor: pointer; + margin-right: 5px; + outline: none !important; + box-shadow: none !important; + transition: .2s ease-in; + &:hover { + opacity: .8; + } + svg path { + fill: #828ba0; + } + &--dark { + svg path { + fill: $dark-primary; + } + } +} + +.dark-theme-applied { + color: #fff; + + // navbar + .navbar.navbar-primary { + background-color: $dark-light-bg; + } + .navbar-brand .navbar-logo { + filter: brightness(0) invert(1); + } + .navbar.navbar-primary .navbar-nav .nav-link { + color: $labels-dark; + .nav-link-icon { + svg path { + fill: $labels-dark; + } + } + &.active, &:hover { + .nav-link-icon { + svg path { + fill: $dark-primary; + } + } + &:before { + background-color: $dark-primary; + } + } + } + .navbar.navbar-primary .form-control { + background-color: $dark-bg; + border-color: $dark-bg; + color: #fff; + &::placeholder { + color: $labels-dark; + } + } + + // footer + .footer { + background: $dark-light-bg; + color: $labels-dark; + } + .footer-social-icon, + .footer-link { + color: $labels-dark; + } + .footer-social-icon:hover, + .footer-link:hover { + color: #fff; + } + .footer-list ul li::before { + background-color: $dark-secondary; + } + + // hero stats + + .layout-container .dashboard-banner-container { + background-image: none; + background-color: $dark-bg; + } + .dashboard-banner-network-plain-container, + .dashboard-banner-network-plain-container::after { + background-color: $dark-light-bg; + } + .dashboard-banner-network-stats-label, + .dashboard-banner-chart-legend .dashboard-banner-chart-legend-label { + color: $labels-dark; + } + .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(1)::before { + background-color: $dark-primary; + } + .dashboard-banner-network-stats-item::before { + background-color: $dark-secondary; + } + .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(2)::before { + background-color: $dark-secondary; + } + + // main container, layout, cards + .layout-container main { + background-color: $body-dark; + } + + .card { + background-color: $dark-light-bg; + box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5); + } + + .card-header { + border-bottom-color: darken($labels-dark, 30); + } + + .address-detail-hash-title { + color: #fff; + } + + .card-tabs { + border-bottom-color: darken($labels-dark, 30); + } + + .card-tab { + background-color: transparent; + &:hover:not(.active) { + background-color: rgba($dark-primary, .15); + color: $dark-primary; + } + &.active { + background-color: $dark-primary-alternate; + color: #fff; + } + } + + .card-background-1 { + background-color: $dark-primary-alternate; + } + + // Components + a { + color: $dark-primary; + } + + .tile { + border-top-color: $dark-light; + border-bottom-color: $dark-light; + border-right-color: $dark-light; + background-color: $dark-light; + color: $labels-dark; + &:not([class^="tile tile-type"]) { + border-left-color: $dark-light; + } + &.tile-type-coin-balance { + border-left-color: $dark-light; + } + .tile-title { + color: #fff; + } + .tile-transaction-type-block { + background-color: transparent; + } + } + .tile-bottom-contents { + background-color: $dark-bg; + } + a.tile-title { + color: #fff !important; + } + .tile.tile-type-block .tile-transaction-type-block a { + color: #fff; + } + .fade-up-blocks-chain .tile-type-block-animation { + background-color: $dark-light; + border-top-color: $dark-light; + border-right-color: $dark-light; + border-bottom-color: $dark-light; + } + .fade-up-blocks-chain .tile-type-block-animation:after { + background-color: $dark-light; + } + .cube-animation-title { + color: $labels-dark; + } + .tile .tile-body a, + .tile span[data-address-hash] { color: $dark-primary; } + .fade-up-blocks-chain .tile-type-block-animation .tile-type-line-up { + background-color: $dark-primary; + } + .tile.tile-type-block { + border-left-color: $dark-primary + } + .tile.tile-type-block .tile-status-label { + color: $dark-primary; + } + .tile.tile-type-block .tile-transaction-type-block { + border-right-color: $dark-primary; + border-top-color: $dark-primary; + border-bottom-color: $dark-primary; + } + .tile .progress { + background-color: rgba(#fff, .2); + } + .tile .progress .progress-bar { + background-color: $dark-primary; + } + .tile .tile-title-lg:not([data-balance-change-sign]) { + color: $dark-primary; + } + + // btns + + .btn-line { + background-color: transparent; + border-color: $dark-primary; + color: $dark-primary; + &:hover { + border-color: $dark-primary; + background-color: $dark-primary; + color: #fff; + } + } + + .btn-copy-icon, .btn-qr-icon { + border-color: $dark-primary; + path { + fill: $dark-primary; + } + &:hover { + background-color: $dark-primary; + path { + fill: #fff; + } + } + } + + // pagination + .pagination-container .pagination .page-link { + color: $labels-dark; + border-color: $dark-light; + background-color: $dark-light; + &:not(.no-hover):hover { + color: #fff; + background-color: $dark-primary; + path { + fill: #fff; + } + } + &[disabled] { + color: $labels-dark; + border-color: $dark-light; + background-color: $dark-light; + } + } + + // dropdown + .dropdown-menu { + background-color: $dark-light; + border-left-color: $dark-light; + border-right-color: $dark-light; + border-bottom-color: $dark-light; + } + + .dropdown-item { + color: #fff; + &:hover { + background-color: rgba(#fff, .1); + } + } + .dropdown-item.active { + background-color: $dark-primary; + } + + .btn-dropdown-line { + background-color: $dark-light; + border-color: $dark-light; + color: $labels-dark; + } + + // table + .stakes-table-th { + background-color: $dark-light; + color: $labels-dark; + } + .stakes-td { + border-bottom-color: darken($labels-dark, 30); + } + .table th, .table td { + border-top-color: darken($labels-dark, 30); + } + hr { + border-top-color: darken($labels-dark, 30); + } + + // api's + .api-anchors-list { + background-color: $dark-light; + } + .api-doc-list-item { + border-bottom-color: darken($labels-dark, 30); + } + .card-subtitle, + .api-anchors-list-item-title, + .api-doc-list-item-title { + color: #fff; + } + .api-text-monospace { + color: $dark-primary; + } + .api-text-monospace-background { + background-color: rgba($dark-primary, .15); + } + .badge.badge-neutral { + background-color: rgba($dark-primary, .15); + color: $dark-primary; + } + + // download csv button + .download-all-transactions .download-all-transactions-link svg path { + fill: $dark-primary; + } + + // tooltips + // .tooltip-inner { + // background-color: $dark-primary; + // } + // .tooltip-arrow { + // border-top-color: $dark-primary; + // } + + //network select + .network-selector-overlay { + background-color: rgba($dark-primary, .9); + } + .network-selector { + background-color: $dark-light-bg; + } + .network-selector-title { + color: #fff; + } + .network-selector-text { + color: $labels-dark; + } + .network-selector-close path { + fill: #fff; + } + .network-selector-search-container { + background-color: $dark-light; + } + .network-selector-search-container path { + fill: $labels-dark; + } + .network-selector-search-input { + color: #fff !important; + &::placeholder { + color: $labels-dark; + } + } + .network-selector-tab { + color: $labels-dark; + &:hover, &.active { + color: #fff; + } + &.active { + &:after { + background-color: $dark-primary; + } + } + } + .network-selector-item, + .network-selector-tabs-container { + border-bottom-color: darken($labels-dark, 30); + } + .network-selector-item-title { + color: #fff; + } + .network-selector-item-type { + color: $labels-dark; + } + .radio .radio-icon { + border-color: $labels-dark + } + .network-selector-item-url:hover .network-selector-item-type { + color: #fff; + } + + //coin dropdown + .token-balance-dropdown.dropdown-menu { + border-color: $dark-light !important; + box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5) !important; + } + .token-balance-dropdown .dropdown-search-icon path { + fill: $labels-dark; + } + .token-balance-dropdown .dropdown-search-field { + background-color: $dark-light; + border-color: $dark-light; + color: #fff; + &::placeholder { + color: $labels-dark; + } + } + .token-balance-dropdown[aria-labelledby="dropdown-tokens"] .dropdown-items .dropdown-item:hover { + color: #fff !important; + } + .dropdown-header { + color: $labels-dark; + } + .border-bottom { + border-bottom-color: darken($labels-dark, 30) !important; + } + +} \ 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 4033934dd6..266f8b83af 100644 --- a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss @@ -71,4 +71,9 @@ $api-text-monospace-color: $primary; .dropdown-items .dropdown-item:hover { color: $primary !important; } -} \ No newline at end of file +} + +// Dark theme +$dark-primary: #9b62ff; +$dark-secondary: #87e1a9; +$dark-primary-alternate: #9b62ff; \ 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 4033934dd6..266f8b83af 100644 --- a/apps/block_scout_web/assets/css/theme/_poa_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_poa_variables.scss @@ -71,4 +71,9 @@ $api-text-monospace-color: $primary; .dropdown-items .dropdown-item:hover { color: $primary !important; } -} \ No newline at end of file +} + +// Dark theme +$dark-primary: #9b62ff; +$dark-secondary: #87e1a9; +$dark-primary-alternate: #9b62ff; \ No newline at end of file diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index 25de7b2688..89059dd306 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/apps/block_scout_web/assets/js/app.js @@ -35,6 +35,7 @@ import './pages/favorites' import './pages/network-search' import './pages/layout' import './pages/verification_form' +import './pages/dark-mode-switcher' import './pages/admin/tasks.js' diff --git a/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js new file mode 100644 index 0000000000..c1127e0f31 --- /dev/null +++ b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js @@ -0,0 +1,10 @@ +import $ from 'jquery' + +$('.dark-mode-changer').click(function () { + if (localStorage.getItem('current-color-mode') === 'dark') { + localStorage.setItem('current-color-mode', 'light') + } else { + localStorage.setItem('current-color-mode', 'dark') + } + document.location.reload(true) +}) 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 f152ec6bf9..f6578a715b 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 @@ -1,4 +1,9 @@ -