diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index 9e1a717ae..9af3f74cc 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -26,5 +26,5 @@ } .module-conversation-list-item--mentioned-us { - border-left: 4px solid $session-color-green !important; + border-left: 4px solid var(--color-session-green-color) !important; } diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index 816803839..6a280ec14 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -278,7 +278,7 @@ } } -$session-highlight-message-shadow: 0px 0px 10px 1px $session-color-green; +$session-highlight-message-shadow: 0px 0px 10px 1px var(--color-session-green-color); @keyframes remove-box-shadow { 0% { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 1e2ae815a..9684de65b 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -527,7 +527,7 @@ label { } &__text-highlight { - @include text-highlight($session-color-green); + @include text-highlight(var(--color-session-green-color)); color: black; @@ -561,13 +561,6 @@ label { } } -.session-toggle { - &.active { - background-color: $session-color-green; - border-color: $session-color-green; - } -} - .react-contexify { // be sure it is more than the one set for the More Informations screen of messages z-index: 30; @@ -749,7 +742,7 @@ label { width: 13px; height: 13px; border-radius: 50%; - background: $session-color-green; + background: var(--color-session-green-color); animation-timing-function: cubic-bezier(0, 1, 1, 0); } div:nth-child(1) { diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index a747c3c8d..1a9e0f315 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -93,9 +93,6 @@ $session-font-mono: 'SpaceMono'; // ////////////////// Colors //////////////////// // ////////////////////////////////////////////// -// Brand -$session-color-green: #00f782; - // Shades $session-shade-1: #0c0c0c; $session-shade-1-alt: #0f1011; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 4ca66d6b7..fc52b4656 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -302,27 +302,6 @@ } } -.session-progress { - position: relative; - z-index: 100; - - &__progress { - will-change: transform; - - width: 100%; - position: absolute; - left: 0px; - font-size: 0px; - height: 1px; - - background-color: $session-color-green; - - &.fade { - opacity: 0; - } - } -} - .send-message-button { animation: fadein var(--default-duration); @@ -550,7 +529,7 @@ $rhap_font-family: inherit !default; height: 15px; top: -5px; margin-left: -10px; - background: $session-color-green; + background: var(--color-session-green-color); box-shadow: none; box-shadow: rgba($rhap_theme-color, 0.5) 0 0 5px; } diff --git a/stylesheets/_session_slider.scss b/stylesheets/_session_slider.scss index 06aa7230f..e02bd0aba 100644 --- a/stylesheets/_session_slider.scss +++ b/stylesheets/_session_slider.scss @@ -57,7 +57,7 @@ touch-action: pan-x; } .rc-slider-handle:focus { - border-color: $session-color-green; + border-color: var(--color-session-green-color); box-shadow: 0 0 0 5px rgba($session-color-white, 0.2); outline: none; } @@ -66,10 +66,10 @@ box-shadow: unset; } .rc-slider-handle:hover { - border-color: $session-color-green; + border-color: var(--color-session-green-color); } .rc-slider-handle:active { - border-color: $session-color-green; + border-color: var(--color-session-green-color); box-shadow: 0 0 5px rgba($session-color-white, 0.2); cursor: -webkit-grabbing; cursor: grabbing; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 3311a4206..7ab821b66 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -21,6 +21,9 @@ const blackColor = '#000000'; // Blues const lightBlueColor = '#a2d2f4'; +// Greens +const sessionGreenColor = accentDarkTheme; + // Grays const grayColor = '#616161'; const lightGrayColor = '#8b8e91'; @@ -98,6 +101,7 @@ export const switchHtmlToDarkTheme = () => { '--color-light-black-color', `rgba(${blackColor}, 0.2)` ); + document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor); document.documentElement.style.setProperty('--color-gray-color', grayColor); document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor); @@ -256,6 +260,7 @@ export const switchHtmlToLightTheme = () => { '--color-light-black-color', `rgba(${blackColor}, 0.2)` ); + document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor); document.documentElement.style.setProperty('--color-gray-color', grayColor); document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor); document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor);