diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index d8cc9ce2b..222f797fc 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -1,92 +1,101 @@ // Messages -.dark-theme { - .conversation { - background: none !important; + +.discussion-container { + @at-root .light-theme #{&} { + background-color: $session-color-white; + } + @at-root .dark-theme #{&} { + background-color: $session-shade-2; + } +} + +.conversation { + background: none !important; +} +.module-conversation-header { + border-bottom: none; + + @at-root .light-theme #{&} { + background-color: $session-color-white; + } + @at-root .dark-theme #{&} { + background-color: $session-shade-4; } - .module-conversation-header { - border-bottom: none; +} +.module-message { + &__author, + &__metadata__badge, + &__metadata__date--incoming, + &__metadata__date--outgoing { + @at-root .light-theme #{&} { - background-color: $session-color-white; + @include session-color-subtle($session-color-black); } @at-root .dark-theme #{&} { - background-color: $session-shade-4; + @include session-color-subtle($session-color-white); } } - .module-message { - &__author, - &__metadata__badge, - &__metadata__date--incoming, - &__metadata__date--outgoing { - - @at-root .light-theme #{&} { - @include session-color-subtle($session-color-black); - } - @at-root .dark-theme #{&} { - @include session-color-subtle($session-color-white); - } + &__container--incoming { + @at-root .light-theme #{&} { + @include session-color-subtle($session-color-white); } - - &__container--incoming { - @at-root .light-theme #{&} { - @include session-color-subtle($session-color-white); - } - @at-root .dark-theme #{&} { - background-color: $session-shade-11; - } + @at-root .dark-theme #{&} { + background-color: $session-shade-11; } + } - &__container--outgoing { - @at-root .light-theme #{&} { - background-color: $session-color-white; - } - @at-root .dark-theme #{&} { - background-color: $session-shade-11; - } - + &__container--outgoing { + @at-root .light-theme #{&} { + background-color: $session-color-white; } - - &__container { - transition: background-color 0.25s; - box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.69); + @at-root .dark-theme #{&} { + background-color: $session-shade-11; } + } - .message { - &-highlighted { - border-radius: 0; - - @at-root .light-theme #{&} { - background-color: $session-shade-5; - } - @at-root .dark-theme #{&} { - background-color: $session-color-white; - } - } + &__container { + transition: background-color 0.25s; + box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.69); + } +} - &-selected { - .module-message { - &__container { - background-image: $session-gradient-green; - box-shadow: $session-dark-shadow; - } +.message { + &-highlighted { + border-radius: 0; + + @at-root .light-theme #{&} { + background-color: $session-shade-5; + } + @at-root .dark-theme #{&} { + background-color: $session-color-white; + } + } - &__author { - color: $session-color-white; - } + &-selected { + .module-message { + &__container { + background-image: $session-gradient-green; + box-shadow: $session-dark-shadow; } - } - &-read-receipt-container { - margin-left: 5px; + &__author { + color: $session-color-white; + } } } - .inbox { - background-image: $session-gradient-black; + &-read-receipt-container { + margin-left: 5px; } } + +.inbox { + background-image: $session-gradient-black; +} + .conversation { background: none !important; }