From f3a51cf2a69eefc9080909ab902c75f3e349679e Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 24 Aug 2020 14:10:40 +1000 Subject: [PATCH] add custon light/black scrollbar style --- stylesheets/_emoji.scss | 11 --------- stylesheets/_global.scss | 30 +++++++++---------------- stylesheets/_index.scss | 8 ------- stylesheets/_session.scss | 2 +- stylesheets/_session_left_pane.scss | 12 ++++++---- stylesheets/_session_theme.scss | 12 +++++++--- stylesheets/_theme_dark.scss | 35 ----------------------------- stylesheets/themes.scss | 12 ++++++++-- 8 files changed, 39 insertions(+), 83 deletions(-) diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss index 08397e020..65877d987 100644 --- a/stylesheets/_emoji.scss +++ b/stylesheets/_emoji.scss @@ -130,15 +130,4 @@ button.emoji { .ep-slide { background-color: $blue; } - .ep ::-webkit-scrollbar { - // matches what is set in _global.scss; needs !important to override emoji panel CSS - width: 9px !important; - } - .ep ::-webkit-scrollbar-thumb { - background: $color-light-35; - - &:hover { - background: $color-light-45; - } - } } diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 89c8983bb..34b505156 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -16,26 +16,26 @@ body { color: $color-light-90; } +// scrollbars ::-webkit-scrollbar { width: 9px; height: 9px; } -::-webkit-scrollbar-track { - background: $color-white; -} - ::-webkit-scrollbar-thumb { - background: $color-light-35; - border: 2px solid $color-white; + @include themify($themes) { + background: themed('scrollBarThumb'); + border: solid 2px themed('textColorOpposite'); - &:hover { - background: $color-light-45; + &:hover { + background: $color-light-45; + } } } - -::-webkit-scrollbar-corner { - background: $color-white; +::-webkit-scrollbar-track { + @include themify($themes) { + background: themed('scrollBarTrack'); + } } audio { @@ -644,14 +644,6 @@ $loading-height: 16px; padding: 0; background: inherit; - ::-webkit-scrollbar-track { - background: $color-dark-85; - } - - ::-webkit-scrollbar-thumb { - border: 2px solid $color-dark-85; - } - .step-body { width: 80%; min-width: 100px; diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 55ecdb3e8..b046b2ef5 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -79,14 +79,6 @@ } .gutter { - ::-webkit-scrollbar-track { - background: $color-dark-85; - } - - ::-webkit-scrollbar-thumb { - border: 2px solid $color-dark-85; - } - display: flex; flex-direction: column; float: left; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index e91a91b33..dd886bf95 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -169,7 +169,7 @@ textarea { &.green { @include themify($themes) { - @include transparent-background(themed('accent')); + @include transparent-background(themed('buttonGreen')); } } &.white { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 61733000c..9229e3e7a 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -145,6 +145,7 @@ $session-compose-margin: 20px; align-items: center; height: $main-view-header-height; padding-right: 7px; + transition: $session-transition-duration; .session-button { margin-left: auto; @@ -189,8 +190,9 @@ $session-compose-margin: 20px; } &-overlay { - background: linear-gradient(180deg, #171717 0%, $session-background 100%); - box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.5); + @include themify($themes) { + background: themed('leftpaneOverlayBackground'); + } display: flex; flex-direction: column; flex-grow: 1; @@ -217,8 +219,10 @@ $session-compose-margin: 20px; .green-border { position: absolute; - color: $session-color-green; - background-color: $session-color-green; + @include themify($themes) { + color: themed('accent'); + background-color: themed('accent'); + } height: 5px; left: -10px; right: -10px; diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 92219c89e..5d639fbbf 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -126,21 +126,27 @@ h1 { h2 { @include session-h-title; - color: $session-color-white; + @include themify($themes) { + color: themed('textColor'); + } font-size: 22px; text-align: center; } h3 { @include session-h-title; - color: $session-color-white; + @include themify($themes) { + color: themed('textColor'); + } font-size: 18px; padding-top: 22px; } h4 { @include session-h-title; - color: $session-color-white; + @include themify($themes) { + color: themed('textColor'); + } font-size: 17px; text-align: center; } diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index fb661d9ec..83b7e4f42 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -193,35 +193,8 @@ body.dark-theme { } } - .emoji-panel-container { - .ep ::-webkit-scrollbar-thumb { - background: $color-dark-55; - - &:hover { - background: $color-dark-30; - } - } - } - // _global - ::-webkit-scrollbar-track { - background: $color-black; - } - - ::-webkit-scrollbar-thumb { - background: $color-dark-55; - border: 2px solid $color-black; - - &:hover { - background: $color-dark-30; - } - } - - ::-webkit-scrollbar-corner { - background: $color-black; - } - .dark-overlay { background-color: $color-gray-95; } @@ -427,14 +400,6 @@ body.dark-theme { .gutter { background-color: $color-dark-85; - - ::-webkit-scrollbar-track { - background: $color-dark-85; - } - - ::-webkit-scrollbar-thumb { - border: 2px solid $color-dark-85; - } } .network-status-container { .network-status { diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index b72af57ab..180dce119 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -16,7 +16,6 @@ $themes: ( modalBorder: #212121, fakeChatBubbleBackground: #f5f5f5, fakeChatBubbleText: #000, - navigationBarBackground: #fcfcfc, newConversationButtonShadow: hsl(151, 89%, 26%), // text textColor: #000, @@ -27,6 +26,7 @@ $themes: ( // buttons backgroundPrimary: #272726, foregroundPrimary: #fff, + buttonGreen: #272726, // conversation view messageSelected: linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)), @@ -40,6 +40,10 @@ $themes: ( conversationItemSelected: #f0f0f0, clickableHovered: #dfdfdf, borderActionPanel: 1px solid #f1f1f1, + leftpaneOverlayBackground: #fff, + // scrollbars + scrollBarTrack: #fcfcfc, + scrollBarThumb: #474646, ), dark: ( accent: #00f782, @@ -56,7 +60,6 @@ $themes: ( modalBorder: #212121, fakeChatBubbleBackground: #3f4146, fakeChatBubbleText: #000, - navigationBarBackground: #161616, newConversationButtonShadow: #077c44, // text textColor: #fff, @@ -67,6 +70,7 @@ $themes: ( // buttons backgroundPrimary: #474646, foregroundPrimary: #fff, + buttonGreen: #00f782, // conversation view messageSelected: linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)), @@ -80,6 +84,10 @@ $themes: ( conversationItemSelected: #404040, clickableHovered: #414347, borderActionPanel: none, + leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%), + // scrollbars + scrollBarTrack: #1b1b1b, + scrollBarThumb: #474646, ), );