Browse Source

ref(chat): move some colors to css variables

master
Leonard Kim 6 years ago
parent
commit
a8233bdb84
2 changed files with 13 additions and 5 deletions
  1. 4
    4
      css/_chat.scss
  2. 9
    1
      css/_variables.scss

+ 4
- 4
css/_chat.scss View File

92
 }
92
 }
93
 
93
 
94
 .chat-header {
94
 .chat-header {
95
-    background-color: rgba(42, 58, 75, 0.9);
95
+    background-color: $chatHeaderBackgroundColor;
96
     height: 70px;
96
     height: 70px;
97
     position: relative;
97
     position: relative;
98
     width: 100%;
98
     width: 100%;
120
 }
120
 }
121
 
121
 
122
 #chat-input {
122
 #chat-input {
123
-    border-top: 1px solid #A4B8D1;
123
+    border-top: 1px solid $chatInputSeparatorColor;
124
     display: flex;
124
     display: flex;
125
 
125
 
126
     * {
126
     * {
188
 }
188
 }
189
 
189
 
190
 .chatmessage {
190
 .chatmessage {
191
-    background-color: rgba(240, 243, 247, 0.15);
191
+    background-color: $chatRemoteMessageBackgroundColor;
192
     border-radius: 0px 6px 6px 6px;
192
     border-radius: 0px 6px 6px 6px;
193
     margin-top: 3px;
193
     margin-top: 3px;
194
     color: white;
194
     color: white;
196
     position: relative;
196
     position: relative;
197
 
197
 
198
     &.localuser {
198
     &.localuser {
199
-        background-color: rgba(26, 108, 180, 1);
199
+        background-color: $chatLocalMessageBackgroundColor;
200
         border-radius: 6px 0px 6px 6px;
200
         border-radius: 6px 0px 6px 6px;
201
     }
201
     }
202
 
202
 

+ 9
- 1
css/_variables.scss View File

83
 $modalTextColor: #333;
83
 $modalTextColor: #333;
84
 
84
 
85
 /**
85
 /**
86
+ * Chat
87
+ */
88
+$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9);
89
+$chatInputSeparatorColor: #A4B8D1;
90
+$chatLocalMessageBackgroundColor: rgba(26, 108, 180, 1);
91
+$chatRemoteMessageBackgroundColor:  rgba(240, 243, 247, 0.15);
92
+$sidebarWidth: 375px;
93
+
94
+ /**
86
  * Misc.
95
  * Misc.
87
  */
96
  */
88
 $borderRadius: 4px;
97
 $borderRadius: 4px;
89
 $defaultWatermarkLink: '../images/watermark.png';
98
 $defaultWatermarkLink: '../images/watermark.png';
90
-$sidebarWidth: 375px;
91
 $popoverMenuPadding: 13px;
99
 $popoverMenuPadding: 13px;
92
 $happySoftwareBackground: transparent;
100
 $happySoftwareBackground: transparent;
93
 $desktopAppDragBarHeight: 25px;
101
 $desktopAppDragBarHeight: 25px;

Loading…
Cancel
Save