From 495683ec3dfaad3e091c032cb0bffc0401f4d9f4 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 28 Aug 2020 15:28:06 +1000 Subject: [PATCH] fix theme input and cleanup --- stylesheets/_modal.scss | 11 +++-- stylesheets/_session.scss | 24 ++++++++--- stylesheets/_session_left_pane.scss | 11 +---- stylesheets/themes.scss | 63 ++++++++++++++++------------- 4 files changed, 61 insertions(+), 48 deletions(-) diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 945b65afa..a9814fbef 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -175,9 +175,11 @@ } input { - color: $color-dark-05; - background-color: $color-dark-70; - border-color: $color-dark-55; + @include themify($themes) { + background-color: themed('inputBackground'); + color: themed('textColor'); + border: themed('sessionBorder'); + } } } @@ -266,7 +268,7 @@ justify-content: center; margin-top: $session-margin-lg; - &-input { + input { height: 38px; width: 142px; border-radius: 5px; @@ -275,6 +277,7 @@ @include themify($themes) { background: themed('inputBackground'); color: themed('textColor'); + border: themed('sessionBorder'); } } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 37bf94829..53d5a64e5 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1404,8 +1404,9 @@ input { width: 100%; max-height: 400px; overflow-y: auto; - box-shadow: inset 0px 14px 7px -15px $session-color-dark-grey, - inset 0px -14px 7px -15px $session-color-dark-grey; + @include themify($themes) { + border: themed('sessionBorder'); + } } &__selection { @@ -1416,6 +1417,9 @@ input { &__no-contacts { font-family: $session-font-mono; + @include themify($themes) { + background: themed('cellBackground'); + } text-align: center; padding: 20px; } @@ -1454,12 +1458,20 @@ input { display: flex; justify-content: space-between; transition: $session-transition-duration; + @include themify($themes) { + background: themed('cellBackground'); + } - &:first-child { - border-top: 1px solid rgba($session-shade-8, 0.6); + &:not(:last-child) { + @include themify($themes) { + border-bottom: themed('sessionBorder'); + } } - &:last-child { - border-bottom: 1px solid rgba($session-shade-8, 0.6); + + &:hover { + @include themify($themes) { + background-color: themed('clickableHovered'); + } } &.selected { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index b34d4070d..c0ec2a9ad 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -95,7 +95,7 @@ $session-compose-margin: 20px; font-size: 15px; @include themify($themes) { - color: themed('textColorSubtle'); + color: subtle(themed('textColorSubtle')); } } } @@ -179,15 +179,6 @@ $session-compose-margin: 20px; } } - &-compose { - @at-root .light-theme #{&} { - background: $session-color-white; - } - @at-root .dark-theme #{&} { - @include session-dark-background-lighter; - } - } - &-overlay { @include themify($themes) { background: themed('leftpaneOverlayBackground'); diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 65194d751..64017b7bc 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -1,46 +1,53 @@ // 13592 lines for manifest.css on date 25 august +$white: #ffffff; +$black: #000000; +$destructive: #ff453a; +$accentLightTheme: #00e97b; +$accentDarkTheme: #00f782; + + $themes: ( light: ( - accent: #00e97b, - accentButton: #000, - destructive: #ff453a, + accent: $accentLightTheme, + accentButton: $black, + destructive: $destructive, cellBackground: #fcfcfc, modalBackground: #fcfcfc, fakeChatBubbleBackground: #f5f5f5, // input - inputBackground: #8e8e931f, + inputBackground: rgba(#8e8e93, 0.12), // text - textColor: #000, + textColor: $black, textColorSubtle: #a0a0a0, - textColorOpposite: #fff, + textColorOpposite: $white, // inbox - inboxBackground: #fff, + inboxBackground: $white, // buttons backgroundPrimary: #272726, - foregroundPrimary: #fff, + foregroundPrimary: $white, buttonGreen: #272726, // conversation view composeViewBackground: #fcfcfc, composeViewTextFieldBackground: #ededed, receivedMessageBackground: #f5f5f5, - sentMessageBackground: #00e97b, - receivedMessageText: #000, - sentMessageText: #000, - sessionShadow: 0 0 4px 0 rgba(#000, 0.37), + sentMessageBackground: $accentLightTheme, + receivedMessageText: $black, + sentMessageText: $black, + sessionShadow: 0 0 4px 0 rgba($black, 0.37), // left pane - conversationList: #fff, + conversationList: $white, conversationItemHasUnread: #fcfcfc, conversationItemSelected: #f0f0f0, clickableHovered: #dfdfdf, sessionBorder: 1px solid #f1f1f1, - leftpaneOverlayBackground: #fff, + leftpaneOverlayBackground: $white, // scrollbars scrollBarTrack: #fcfcfc, scrollBarThumb: #474646, // pill divider: - pillDividerColor: #0000001a, - pillDividerTextColor: #555, + pillDividerColor: rgba($black, 0.10), + pillDividerTextColor: #555555, // context menu contextMenuBackground: #f5f5f5, filterSessionText: brightness(0) saturate(100%), @@ -51,38 +58,38 @@ $themes: ( quoteBottomBarBackground: #f0f0f0, ), dark: ( - accent: #00f782, - accentButton: #00f782, - destructive: #ff453a, + accent: $accentDarkTheme, + accentButton: $accentDarkTheme, + destructive: $destructive, cellBackground: #1b1b1b, modalBackground: #101011, fakeChatBubbleBackground: #212121, // input - inputBackground: #8e8e931f, + inputBackground: rgba(#8e8e93, 0.12), // text - textColor: #fff, + textColor: $white, textColorSubtle: #a0a0a0, - textColorOpposite: #000, + textColorOpposite: $black, // inbox inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%), // buttons backgroundPrimary: #474646, - foregroundPrimary: #fff, - buttonGreen: #00f782, + foregroundPrimary: $white, + buttonGreen: $accentDarkTheme, // conversation view composeViewBackground: #1b1b1b, composeViewTextFieldBackground: #141414, receivedMessageBackground: #222325, sentMessageBackground: #3f4146, - receivedMessageText: #fff, - sentMessageText: #fff, - sessionShadow: 0 0 4px 0 rgba(#fff, 0.2), + receivedMessageText: $white, + sentMessageText: $white, + sessionShadow: 0 0 4px 0 rgba($white, 0.2), // left pane conversationList: #1b1b1b, conversationItemHasUnread: #2c2c2c, conversationItemSelected: #404040, clickableHovered: #414347, - sessionBorder: 1px solid #ffffff0f, + sessionBorder: 1px solid rgba($white, 0.06), leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%), // scrollbars scrollBarTrack: #1b1b1b,