cleanup scss and themify message view
This commit is contained in:
Audric Ackermann
parent
5cdb25ca00
commit
9cbf21547b
|
|
@ -32,6 +32,11 @@
|
|||
}
|
||||
|
||||
.main.panel {
|
||||
@include themify($themes) {
|
||||
border-top: themed('borderActionPanel');
|
||||
border-left: themed('borderActionPanel');
|
||||
}
|
||||
|
||||
.discussion-container {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
|
|
@ -373,8 +378,8 @@
|
|||
.bottom-bar {
|
||||
box-sizing: content-box;
|
||||
$button-width: 36px;
|
||||
|
||||
form.active {
|
||||
@include themify($themes) {
|
||||
border-top: themed('borderActionPanel');
|
||||
}
|
||||
|
||||
form.send {
|
||||
|
|
@ -454,7 +459,6 @@
|
|||
max-height: 100px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: $color-loki-light-gray;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 6px;
|
||||
color: $color-light-90;
|
||||
|
|
|
|||
|
|
@ -206,40 +206,6 @@
|
|||
background-color: $color-conversation-grey;
|
||||
}
|
||||
|
||||
.module-message__container--incoming-red {
|
||||
background-color: $color-conversation-red;
|
||||
}
|
||||
.module-message__container--incoming-deep_orange {
|
||||
background-color: $color-conversation-deep_orange;
|
||||
}
|
||||
.module-message__container--incoming-brown {
|
||||
background-color: $color-conversation-brown;
|
||||
}
|
||||
.module-message__container--incoming-pink {
|
||||
background-color: $color-conversation-pink;
|
||||
}
|
||||
.module-message__container--incoming-purple {
|
||||
background-color: $color-conversation-purple;
|
||||
}
|
||||
.module-message__container--incoming-indigo {
|
||||
background-color: $color-conversation-indigo;
|
||||
}
|
||||
.module-message__container--incoming-blue {
|
||||
background-color: $color-conversation-blue;
|
||||
}
|
||||
.module-message__container--incoming-teal {
|
||||
background-color: $color-conversation-teal;
|
||||
}
|
||||
.module-message__container--incoming-green {
|
||||
background-color: $color-conversation-green;
|
||||
}
|
||||
.module-message__container--incoming-light_green {
|
||||
background-color: $color-conversation-light_green;
|
||||
}
|
||||
.module-message__container--incoming-blue_grey {
|
||||
background-color: $color-conversation-blue_grey;
|
||||
}
|
||||
|
||||
.module-message__attachment-container {
|
||||
// Entirely to ensure that images are centered if they aren't full width of bubble
|
||||
text-align: center;
|
||||
|
|
@ -503,18 +469,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.module-message__text--incoming {
|
||||
color: $color-white;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__text--error {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.module-message__metadata {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -759,88 +713,11 @@
|
|||
border-left-color: $color-conversation-grey;
|
||||
background-color: $color-conversation-grey-tint;
|
||||
}
|
||||
.module-quote--outgoing-red {
|
||||
border-left-color: $color-conversation-red;
|
||||
background-color: $color-conversation-red-tint;
|
||||
}
|
||||
.module-quote--outgoing-deep_orange {
|
||||
border-left-color: $color-conversation-deep_orange;
|
||||
background-color: $color-conversation-deep_orange-tint;
|
||||
}
|
||||
.module-quote--outgoing-brown {
|
||||
border-left-color: $color-conversation-brown;
|
||||
background-color: $color-conversation-brown-tint;
|
||||
}
|
||||
.module-quote--outgoing-pink {
|
||||
border-left-color: $color-conversation-pink;
|
||||
background-color: $color-conversation-pink-tint;
|
||||
}
|
||||
.module-quote--outgoing-purple {
|
||||
border-left-color: $color-conversation-purple;
|
||||
background-color: $color-conversation-purple-tint;
|
||||
}
|
||||
.module-quote--outgoing-indigo {
|
||||
border-left-color: $color-conversation-indigo;
|
||||
background-color: $color-conversation-indigo-tint;
|
||||
}
|
||||
.module-quote--outgoing-blue {
|
||||
border-left-color: $color-conversation-blue;
|
||||
background-color: $color-conversation-blue-tint;
|
||||
}
|
||||
.module-quote--outgoing-teal {
|
||||
border-left-color: $color-conversation-teal;
|
||||
background-color: $color-conversation-teal-tint;
|
||||
}
|
||||
.module-quote--outgoing-green {
|
||||
border-left-color: $color-conversation-green;
|
||||
background-color: $color-conversation-green-tint;
|
||||
}
|
||||
.module-quote--outgoing-light_green {
|
||||
border-left-color: $color-conversation-light_green;
|
||||
background-color: $color-conversation-light_green-tint;
|
||||
}
|
||||
.module-quote--outgoing-blue_grey {
|
||||
border-left-color: $color-conversation-blue_grey;
|
||||
background-color: $color-conversation-blue_grey-tint;
|
||||
}
|
||||
|
||||
.module-quote--incoming {
|
||||
border-left-color: $color-white;
|
||||
background-color: $color-conversation-grey-tint;
|
||||
}
|
||||
.module-quote--incoming-red {
|
||||
background-color: $color-conversation-red-tint;
|
||||
}
|
||||
.module-quote--incoming-deep_orange {
|
||||
background-color: $color-conversation-deep_orange-tint;
|
||||
}
|
||||
.module-quote--incoming-brown {
|
||||
background-color: $color-conversation-brown-tint;
|
||||
}
|
||||
.module-quote--incoming-pink {
|
||||
background-color: $color-conversation-pink-tint;
|
||||
}
|
||||
.module-quote--incoming-purple {
|
||||
background-color: $color-conversation-purple-tint;
|
||||
}
|
||||
.module-quote--incoming-indigo {
|
||||
background-color: $color-conversation-indigo-tint;
|
||||
}
|
||||
.module-quote--incoming-blue {
|
||||
background-color: $color-conversation-blue-tint;
|
||||
}
|
||||
.module-quote--incoming-teal {
|
||||
background-color: $color-conversation-teal-tint;
|
||||
}
|
||||
.module-quote--incoming-green {
|
||||
background-color: $color-conversation-green-tint;
|
||||
}
|
||||
.module-quote--incoming-light_green {
|
||||
background-color: $color-conversation-light_green-tint;
|
||||
}
|
||||
.module-quote--incoming-blue_grey {
|
||||
background-color: $color-conversation-blue_grey-tint;
|
||||
}
|
||||
|
||||
.module-quote__primary {
|
||||
flex-grow: 1;
|
||||
|
|
@ -1239,7 +1116,10 @@
|
|||
|
||||
.module-group-notification__change,
|
||||
.module-timer-notification__message {
|
||||
background-color: #212121;
|
||||
@include themify($themes) {
|
||||
background: themed('fakeChatBubbleBackground');
|
||||
color: themed('textColor');
|
||||
}
|
||||
width: 90%;
|
||||
max-width: 700px;
|
||||
margin: 10px auto;
|
||||
|
|
@ -1447,11 +1327,6 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
color: $color-gray-90;
|
||||
|
||||
background-color: $color-white;
|
||||
border-bottom: 1px solid $color-black-02;
|
||||
}
|
||||
|
||||
.module-conversation-header__back-icon {
|
||||
|
|
@ -3271,8 +3146,6 @@
|
|||
// Module: Left Pane
|
||||
|
||||
.module-left-pane {
|
||||
border-right: 1px solid $color-dark-90;
|
||||
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 380px;
|
||||
|
|
|
|||
|
|
@ -775,9 +775,10 @@ label {
|
|||
height: 25px;
|
||||
padding: $session-margin-md $session-margin-sm;
|
||||
|
||||
background-color: $session-shade-4;
|
||||
|
||||
color: $session-color-white;
|
||||
@include themify($themes) {
|
||||
background: themed('contextMenuBackground');
|
||||
color: themed('textColor');
|
||||
}
|
||||
font-family: $session-font-accent;
|
||||
font-size: $session-font-sm;
|
||||
line-height: $session-icon-size-sm;
|
||||
|
|
@ -785,7 +786,9 @@ label {
|
|||
|
||||
&--active,
|
||||
&--selected {
|
||||
background-color: $session-shade-7 !important;
|
||||
@include themify($themes) {
|
||||
background: themed('clickableHovered');
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:visited,
|
||||
|
|
@ -1292,6 +1295,7 @@ label {
|
|||
textarea.send-message {
|
||||
@include themify($themes) {
|
||||
background: themed('composeViewBackground');
|
||||
color: themed('textColor');
|
||||
}
|
||||
border: none;
|
||||
margin: 0px;
|
||||
|
|
@ -1299,8 +1303,6 @@ label {
|
|||
font-size: $session-font-md;
|
||||
line-height: 1.3em;
|
||||
align-self: center;
|
||||
|
||||
@include session-color-subtle($session-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1499,10 +1501,14 @@ input {
|
|||
&-item {
|
||||
font-family: $session-font-default;
|
||||
padding: $session-margin-sm $session-margin-md;
|
||||
background-color: $session-shade-5;
|
||||
@include themify($themes) {
|
||||
background-color: themed('cellBackground');
|
||||
}
|
||||
|
||||
&:hover:not(.member-selected) {
|
||||
background-color: $session-shade-7;
|
||||
@include themify($themes) {
|
||||
background-color: themed('clickableHovered');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -102,7 +102,6 @@ $session-compose-margin: 20px;
|
|||
}
|
||||
|
||||
.module-left-pane {
|
||||
border-right: 1px solid rgba($session-color-white, 0.1) !important;
|
||||
width: $session-left-pane-width;
|
||||
position: relative;
|
||||
height: -webkit-fill-available;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,8 @@
|
|||
@import 'themes.scss';
|
||||
|
||||
.discussion-container {
|
||||
@at-root .light-theme #{&} {
|
||||
background-color: $session-color-white;
|
||||
}
|
||||
@at-root .dark-theme #{&} {
|
||||
background-color: $session-shade-2;
|
||||
@include themify($themes) {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -14,50 +11,74 @@
|
|||
background: none !important;
|
||||
}
|
||||
.module-conversation-header {
|
||||
@at-root .light-theme #{&} {
|
||||
background-color: $session-color-white;
|
||||
@include themify($themes) {
|
||||
background: themed('cellBackground');
|
||||
}
|
||||
@at-root .dark-theme #{&} {
|
||||
background-color: $session-shade-4;
|
||||
}
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
&__text-error {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&__container--incoming {
|
||||
@at-root .light-theme #{&} {
|
||||
@include session-color-subtle($session-color-white);
|
||||
background-color: $session-shade-8;
|
||||
@include themify($themes) {
|
||||
background: themed('receivedMessageBackground');
|
||||
}
|
||||
@at-root .dark-theme #{&} {
|
||||
background-color: $session-shade-8;
|
||||
|
||||
.module-message__text {
|
||||
@include themify($themes) {
|
||||
color: themed('receivedMessageText');
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
@include themify($themes) {
|
||||
color: themed('receivedMessageText');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__author,
|
||||
.module-message__metadata,
|
||||
.module-message__metadata__date,
|
||||
.module-message__metadata__badge,
|
||||
.module-message__metadata__badge--separator {
|
||||
@include themify($themes) {
|
||||
@include session-color-subtle(themed('receivedMessageText'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__container--outgoing {
|
||||
@at-root .light-theme #{&} {
|
||||
background-color: $session-color-white;
|
||||
@include themify($themes) {
|
||||
background: themed('sentMessageBackground');
|
||||
}
|
||||
@at-root .dark-theme #{&} {
|
||||
background-color: $session-shade-11;
|
||||
|
||||
.module-message__text {
|
||||
@include themify($themes) {
|
||||
color: themed('sentMessageText');
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
@include themify($themes) {
|
||||
color: themed('sentMessageText');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__author,
|
||||
.module-message__metadata,
|
||||
.module-message__metadata__date,
|
||||
.module-message__metadata__badge,
|
||||
.module-message__metadata__badge--separator {
|
||||
@include themify($themes) {
|
||||
@include session-color-subtle(themed('sentMessageText'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
transition: background-color 0.25s;
|
||||
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.69);
|
||||
transition: background-color $session-transition-duration;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -555,53 +555,6 @@ body.dark-theme {
|
|||
@include color-svg('../images/error.svg', $color-core-red);
|
||||
}
|
||||
|
||||
.module-message__container--outgoing {
|
||||
background-color: $color-dark-70;
|
||||
}
|
||||
|
||||
// In case the color gets messed up
|
||||
.module-message__container--incoming {
|
||||
background-color: $color-conversation-grey;
|
||||
}
|
||||
|
||||
.module-message__container--incoming-red {
|
||||
background-color: $color-conversation-red;
|
||||
}
|
||||
.module-message__container--incoming-deep_orange {
|
||||
background-color: $color-conversation-deep_orange;
|
||||
}
|
||||
.module-message__container--incoming-brown {
|
||||
background-color: $color-conversation-brown;
|
||||
}
|
||||
.module-message__container--incoming-pink {
|
||||
background-color: $color-conversation-pink;
|
||||
}
|
||||
.module-message__container--incoming-purple {
|
||||
background-color: $color-conversation-purple;
|
||||
}
|
||||
.module-message__container--incoming-indigo {
|
||||
background-color: $color-conversation-indigo;
|
||||
}
|
||||
.module-message__container--incoming-blue {
|
||||
background-color: $color-conversation-blue;
|
||||
}
|
||||
.module-message__container--incoming-teal {
|
||||
background-color: $color-conversation-teal;
|
||||
}
|
||||
.module-message__container--incoming-green {
|
||||
background-color: $color-conversation-green;
|
||||
}
|
||||
.module-message__container--incoming-light_green {
|
||||
background-color: $color-conversation-light_green;
|
||||
}
|
||||
.module-message__container--incoming-blue_grey {
|
||||
background-color: $color-conversation-blue_grey;
|
||||
}
|
||||
|
||||
.module-message__attachment-container {
|
||||
background-color: $color-gray-95;
|
||||
}
|
||||
|
||||
.module-message__img-border-overlay {
|
||||
box-shadow: inset 0px 0px 0px 1px $color-white-015;
|
||||
}
|
||||
|
|
@ -651,10 +604,6 @@ body.dark-theme {
|
|||
color: $color-white;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__icon {
|
||||
// background: url('../images/file-gradient.svg') no-repeat center;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-name {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
|
|
@ -688,31 +637,7 @@ body.dark-theme {
|
|||
.module-message__link-preview__location {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
.module-conversation__user,
|
||||
.module-message__author {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.module-message__text {
|
||||
color: $color-dark-05;
|
||||
a {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__text--incoming {
|
||||
color: $color-white;
|
||||
a {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__metadata__date {
|
||||
color: $color-white-08;
|
||||
}
|
||||
.module-message__metadata__date--incoming {
|
||||
color: $color-white-08;
|
||||
}
|
||||
.module-message__metadata__date--with-image-no-caption {
|
||||
color: $color-white-08;
|
||||
}
|
||||
|
|
@ -801,132 +726,20 @@ body.dark-theme {
|
|||
}
|
||||
|
||||
// Module: Quoted Reply
|
||||
|
||||
.module-quote--outgoing {
|
||||
border-left-color: $color-conversation-grey;
|
||||
background-color: $color-conversation-grey-shade;
|
||||
}
|
||||
.module-quote--outgoing-red {
|
||||
border-left-color: $color-conversation-red;
|
||||
background-color: $color-conversation-red-shade;
|
||||
}
|
||||
.module-quote--outgoing-deep_orange {
|
||||
border-left-color: $color-conversation-deep_orange;
|
||||
background-color: $color-conversation-deep_orange-shade;
|
||||
}
|
||||
.module-quote--outgoing-brown {
|
||||
border-left-color: $color-conversation-brown;
|
||||
background-color: $color-conversation-brown-shade;
|
||||
}
|
||||
.module-quote--outgoing-pink {
|
||||
border-left-color: $color-conversation-pink;
|
||||
background-color: $color-conversation-pink-shade;
|
||||
}
|
||||
.module-quote--outgoing-purple {
|
||||
border-left-color: $color-conversation-purple;
|
||||
background-color: $color-conversation-purple-shade;
|
||||
}
|
||||
.module-quote--outgoing-indigo {
|
||||
border-left-color: $color-conversation-indigo;
|
||||
background-color: $color-conversation-indigo-shade;
|
||||
}
|
||||
.module-quote--outgoing-blue {
|
||||
border-left-color: $color-conversation-blue;
|
||||
background-color: $color-conversation-blue-shade;
|
||||
}
|
||||
.module-quote--outgoing-teal {
|
||||
border-left-color: $color-conversation-teal;
|
||||
background-color: $color-conversation-teal-shade;
|
||||
}
|
||||
.module-quote--outgoing-green {
|
||||
border-left-color: $color-conversation-green;
|
||||
background-color: $color-conversation-green-shade;
|
||||
}
|
||||
.module-quote--outgoing-light_green {
|
||||
border-left-color: $color-conversation-light_green;
|
||||
background-color: $color-conversation-light_green-shade;
|
||||
}
|
||||
.module-quote--outgoing-blue_grey {
|
||||
border-left-color: $color-conversation-blue_grey;
|
||||
background-color: $color-conversation-blue_grey-shade;
|
||||
}
|
||||
|
||||
.module-quote--incoming {
|
||||
border-left-color: $color-black;
|
||||
background-color: $color-conversation-grey-shade;
|
||||
}
|
||||
.module-quote--incoming-red {
|
||||
background-color: $color-conversation-red-shade;
|
||||
}
|
||||
.module-quote--incoming-deep_orange {
|
||||
background-color: $color-conversation-deep_orange-shade;
|
||||
}
|
||||
.module-quote--incoming-brown {
|
||||
background-color: $color-conversation-brown-shade;
|
||||
}
|
||||
.module-quote--incoming-pink {
|
||||
background-color: $color-conversation-pink-shade;
|
||||
}
|
||||
.module-quote--incoming-purple {
|
||||
background-color: $color-conversation-purple-shade;
|
||||
}
|
||||
.module-quote--incoming-indigo {
|
||||
background-color: $color-conversation-indigo-shade;
|
||||
}
|
||||
.module-quote--incoming-blue {
|
||||
background-color: $color-conversation-blue-shade;
|
||||
}
|
||||
.module-quote--incoming-teal {
|
||||
background-color: $color-conversation-teal-shade;
|
||||
}
|
||||
.module-quote--incoming-green {
|
||||
background-color: $color-conversation-green-shade;
|
||||
}
|
||||
.module-quote--incoming-light_green {
|
||||
background-color: $color-conversation-light_green-shade;
|
||||
}
|
||||
.module-quote--incoming-blue_grey {
|
||||
background-color: $color-conversation-blue_grey-shade;
|
||||
}
|
||||
|
||||
.module-quote__primary__author {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
|
||||
.module-quote__primary__author-red {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-deep_orange {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-brown {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-pink {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-purple {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-indigo {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-blue {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-teal {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-green {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-light_green {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
.module-quote__primary__author-blue_grey {
|
||||
color: $color-dark-05;
|
||||
}
|
||||
|
||||
.module-quote__primary__text {
|
||||
color: $color-dark-05;
|
||||
|
||||
|
|
@ -1087,12 +900,6 @@ body.dark-theme {
|
|||
|
||||
// Module: Conversation Header
|
||||
|
||||
.module-conversation-header {
|
||||
color: $color-dark-05;
|
||||
background-color: $color-gray-95;
|
||||
border-bottom: 1px solid $color-light-60;
|
||||
}
|
||||
|
||||
.module-conversation-header__back-icon {
|
||||
@include color-svg('../images/back.svg', $color-dark-05);
|
||||
}
|
||||
|
|
@ -1296,49 +1103,8 @@ body.dark-theme {
|
|||
background-color: $color-conversation-grey-shade;
|
||||
}
|
||||
|
||||
.module-avatar--signal-blue {
|
||||
background-color: $color-signal-blue;
|
||||
}
|
||||
.module-avatar--red {
|
||||
background-color: $color-conversation-red-shade;
|
||||
}
|
||||
.module-avatar--deep_orange {
|
||||
background-color: $color-conversation-deep_orange-shade;
|
||||
}
|
||||
.module-avatar--brown {
|
||||
background-color: $color-conversation-brown-shade;
|
||||
}
|
||||
.module-avatar--pink {
|
||||
background-color: $color-conversation-pink-shade;
|
||||
}
|
||||
.module-avatar--purple {
|
||||
background-color: $color-conversation-purple-shade;
|
||||
}
|
||||
.module-avatar--indigo {
|
||||
background-color: $color-conversation-indigo-shade;
|
||||
}
|
||||
.module-avatar--blue {
|
||||
background-color: $color-conversation-blue-shade;
|
||||
}
|
||||
.module-avatar--teal {
|
||||
background-color: $color-conversation-teal-shade;
|
||||
}
|
||||
.module-avatar--green {
|
||||
background-color: $color-conversation-green-shade;
|
||||
}
|
||||
.module-avatar--light_green {
|
||||
background-color: $color-conversation-light_green-shade;
|
||||
}
|
||||
.module-avatar--blue_grey {
|
||||
background-color: $color-conversation-blue_grey-shade;
|
||||
}
|
||||
|
||||
// Module: Main Header
|
||||
|
||||
.module-main-header {
|
||||
border-bottom: 1px solid $color-gray-75;
|
||||
}
|
||||
|
||||
.module-main-header__search__input {
|
||||
background-color: $color-gray-95;
|
||||
border-radius: 14px;
|
||||
|
|
@ -1542,58 +1308,6 @@ body.dark-theme {
|
|||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
// Module: Left Pane
|
||||
|
||||
.module-left-pane {
|
||||
background-color: $color-dark-85;
|
||||
border-right: 1px solid $color-gray-75;
|
||||
}
|
||||
|
||||
.module-left-pane__archive-header {
|
||||
border-bottom: 1px solid $color-gray-75;
|
||||
}
|
||||
|
||||
.module-left-pane__to-inbox-button {
|
||||
background-color: $color-gray-25;
|
||||
}
|
||||
|
||||
.module-left-pane__archive-header-text {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-left-pane__archive-helper-text {
|
||||
color: $color-gray-25;
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
|
||||
.module-left-pane__archived-button {
|
||||
color: $color-gray-25;
|
||||
&:hover {
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
.module-left-pane__archived-button__archived-count {
|
||||
color: $color-gray-25;
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
|
||||
// Module: Start New Conversation
|
||||
|
||||
.module-start-new-conversation {
|
||||
&:hover {
|
||||
background-color: $color-dark-70;
|
||||
}
|
||||
}
|
||||
|
||||
.module-start-new-conversation__number {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-start-new-conversation__text {
|
||||
color: $color-gray-45;
|
||||
}
|
||||
|
||||
// Third-party module: react-contextmenu
|
||||
|
||||
.react-contextmenu {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
// copy pasted from the android Session app. Some might not be used and some might be missing
|
||||
// also, some are sometimes applied with a opacity setting (most likely 0.6)
|
||||
$themes: (
|
||||
light: (
|
||||
accent: #00e97b,
|
||||
|
|
@ -13,8 +11,6 @@ $themes: (
|
|||
modalBackground: #fcfcfc,
|
||||
modalBorder: #212121,
|
||||
fakeChatBubbleBackground: #f5f5f5,
|
||||
fakeChatBubbleText: #000,
|
||||
newConversationButtonShadow: hsl(151, 89%, 26%),
|
||||
// input
|
||||
inputBackground: #8e8e931f,
|
||||
// text
|
||||
|
|
@ -33,7 +29,9 @@ $themes: (
|
|||
composeViewBackground: #fcfcfc,
|
||||
composeViewTextFieldBackground: #ededed,
|
||||
receivedMessageBackground: #f5f5f5,
|
||||
sentMessageBackground: #00e97b,
|
||||
sentMessageBackground: #272726,
|
||||
receivedMessageText: #000,
|
||||
sentMessageText: #fff,
|
||||
// left pane
|
||||
conversationList: #fff,
|
||||
conversationItemHasUnread: #fcfcfc,
|
||||
|
|
@ -47,6 +45,8 @@ $themes: (
|
|||
// pill divider:
|
||||
pillDividerColor: #0000001a,
|
||||
pillDividerTextColor: #555,
|
||||
// context menu
|
||||
contextMenuBackground: #f5f5f5,
|
||||
),
|
||||
dark: (
|
||||
accent: #00f782,
|
||||
|
|
@ -59,9 +59,7 @@ $themes: (
|
|||
buttonBackground: #1b1b1b,
|
||||
modalBackground: #101011,
|
||||
modalBorder: #212121,
|
||||
fakeChatBubbleBackground: #3f4146,
|
||||
fakeChatBubbleText: #000,
|
||||
newConversationButtonShadow: #077c44,
|
||||
fakeChatBubbleBackground: #212121,
|
||||
// input
|
||||
inputBackground: #8e8e931f,
|
||||
// text
|
||||
|
|
@ -81,6 +79,8 @@ $themes: (
|
|||
composeViewTextFieldBackground: #141414,
|
||||
receivedMessageBackground: #222325,
|
||||
sentMessageBackground: #3f4146,
|
||||
receivedMessageText: #fff,
|
||||
sentMessageText: #fff,
|
||||
// left pane
|
||||
conversationList: #1b1b1b,
|
||||
conversationItemHasUnread: #2c2c2c,
|
||||
|
|
@ -94,6 +94,8 @@ $themes: (
|
|||
// pill divider:
|
||||
pillDividerColor: #353535,
|
||||
pillDividerTextColor: #a0a0a0,
|
||||
// context menu
|
||||
contextMenuBackground: #212121,
|
||||
),
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1162,10 +1162,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
<div
|
||||
className={classNames(
|
||||
'module-message__container',
|
||||
`module-message__container--${direction}`,
|
||||
isIncoming
|
||||
? `module-message__container--incoming-${authorColor}`
|
||||
: null
|
||||
`module-message__container--${direction}`
|
||||
)}
|
||||
style={{
|
||||
width: isShowingImage ? width : undefined,
|
||||
|
|
|
|||
|
|
@ -389,9 +389,6 @@ export class Quote extends React.Component<Props, State> {
|
|||
className={classNames(
|
||||
'module-quote',
|
||||
isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
|
||||
isIncoming
|
||||
? `module-quote--incoming-${authorColor}`
|
||||
: `module-quote--outgoing-${authorColor}`,
|
||||
!onClick ? 'module-quote--no-click' : null,
|
||||
withContentAbove ? 'module-quote--with-content-above' : null,
|
||||
referencedMessageNotFound
|
||||
|
|
|
|||
|
|
@ -59,8 +59,7 @@ export class TypingBubble extends React.Component<Props> {
|
|||
<div
|
||||
className={classNames(
|
||||
'module-message__container',
|
||||
'module-message__container--incoming',
|
||||
`module-message__container--incoming-${color}`
|
||||
'module-message__container--incoming'
|
||||
)}
|
||||
>
|
||||
<div className="module-message__typing-container">
|
||||
|
|
|
|||
Loading…
Reference in New Issue