Procházet zdrojové kódy

Fixes some styles and variables (#1809)

* Fixes some toolbox/toolbar styles and variables

* [squash] Fixes variable name to fit better its purpose

* [squash] Fixes secondary toolbar variable name
j8
yanas před 8 roky
rodič
revize
06234066b6
4 změnil soubory, kde provedl 95 přidání a 87 odebrání
  1. 1
    1
      css/_side_toolbar_container.scss
  2. 79
    79
      css/_toolbars.scss
  3. 4
    7
      css/_variables.scss
  4. 11
    0
      css/themes/_light.scss

+ 1
- 1
css/_side_toolbar_container.scss Zobrazit soubor

2
  * Toolbar side panel main container element.
2
  * Toolbar side panel main container element.
3
  */
3
  */
4
 #sideToolbarContainer {
4
 #sideToolbarContainer {
5
-    background-color: rgba(0,0,0,0.8);
5
+    background-color: $sideToolbarContainerBg;
6
     height: 100%;
6
     height: 100%;
7
     left: $defaultToolbarSize;
7
     left: $defaultToolbarSize;
8
     max-width: $sidebarWidth;
8
     max-width: $sidebarWidth;

+ 79
- 79
css/_toolbars.scss Zobrazit soubor

19
     vertical-align: middle;
19
     vertical-align: middle;
20
 }
20
 }
21
 
21
 
22
- /**
23
-  * Toolbar button styles.
24
-  */
25
-.button {
26
-    color: #FFFFFF;
27
-    cursor: pointer;
28
-    z-index: $zindex1;
29
-    display: inline-block;
30
-    font-size: $toolbarFontSize !important;
31
-    height: 50px;
32
-    line-height: 50px !important;
33
-    position: relative;
34
-    text-align: center;
35
-    top:0px;
36
-    vertical-align: middle;
37
-    width: 50px;
38
-
39
-    &_hangup {
40
-        color: $hangupColor;
41
-        font-size: $hangupFontSize !important;
42
-    }
43
-
44
-    &[disabled] {
45
-        opacity: 0.5;
46
-    }
47
-
48
-    &:hover, &:active {
49
-        cursor: pointer;
50
-        text-decoration: none;
51
-    }
52
-
53
-    &:not(.toggled) {
54
-        &:hover, &:active {
55
-            // sum opacity with background layer should give us 0.8
56
-            background: $toolbarSelectBackground;
57
-        }
58
-    }
59
-
60
-    &.toggled {
61
-        background: $toolbarToggleBackground;
62
-
63
-        &.icon-camera {
64
-            @extend .icon-camera-disabled;
65
-        }
66
-
67
-        &.icon-full-screen {
68
-            @extend .icon-exit-full-screen;
69
-        }
70
-
71
-        &.icon-microphone {
72
-            @extend .icon-mic-disabled;
73
-        }
74
-
75
-        &.icon-visibility {
76
-            @extend .icon-visibility-off;
77
-        }
78
-    }
79
-
80
-    &.unclickable {
81
-        cursor: default;
82
-
83
-        &:hover, &:active, &.selected {
84
-            background: none;
85
-            cursor: default;
86
-        }
87
-    }
88
-}
89
-
90
 .toolbar-container {
22
 .toolbar-container {
91
     display: block;
23
     display: block;
92
     left:0;
24
     left:0;
104
  * Common toolbar styles.
36
  * Common toolbar styles.
105
  */
37
  */
106
 .toolbar {
38
 .toolbar {
107
-    background-color: $toolbarBackground;
39
+    color: $modalTextColor;
108
     height: 100%;
40
     height: 100%;
109
     pointer-events: auto;
41
     pointer-events: auto;
110
     position: relative;
42
     position: relative;
111
     z-index: $toolbarZ;
43
     z-index: $toolbarZ;
112
 
44
 
113
     /**
45
     /**
114
-     * Splitter button in the toolbar.
46
+     * Toolbar button styles.
115
      */
47
      */
116
-    &__splitter {
117
-        background: $splitterColor;
48
+    .button {
49
+        color: $toolbarButtonColor;
50
+        cursor: pointer;
51
+        z-index: $zindex1;
118
         display: inline-block;
52
         display: inline-block;
119
-        height: 50%;
120
-        margin: 0 $splitterToolbarButtonMargin;
53
+        font-size: $toolbarFontSize;
54
+        height: $defaultToolbarSize;
55
+        line-height: $defaultToolbarSize;
56
+        position: relative;
57
+        text-align: center;
58
+        top:0px;
121
         vertical-align: middle;
59
         vertical-align: middle;
122
-        width: 1px;
60
+        width: $defaultToolbarSize;
61
+
62
+        &_hangup {
63
+            color: $hangupColor;
64
+            font-size: $hangupFontSize;
65
+        }
66
+
67
+        &[disabled] {
68
+            opacity: 0.5;
69
+        }
70
+
71
+        &:hover, &:active {
72
+            cursor: pointer;
73
+            text-decoration: none;
74
+        }
75
+
76
+        &:not(.toggled) {
77
+            &:hover, &:active {
78
+                // sum opacity with background layer should give us 0.8
79
+                background: $toolbarSelectBackground;
80
+            }
81
+        }
82
+
83
+        &.toggled {
84
+            background: $toolbarToggleBackground;
85
+
86
+            &.icon-camera {
87
+                @extend .icon-camera-disabled;
88
+            }
89
+
90
+            &.icon-full-screen {
91
+                @extend .icon-exit-full-screen;
92
+            }
93
+
94
+            &.icon-microphone {
95
+                @extend .icon-mic-disabled;
96
+            }
97
+
98
+            &.icon-visibility {
99
+                @extend .icon-visibility-off;
100
+            }
101
+        }
102
+
103
+        &.unclickable {
104
+            cursor: default;
105
+
106
+            &:hover, &:active, &.selected {
107
+                background: none;
108
+                cursor: default;
109
+            }
110
+        }
123
     }
111
     }
124
 
112
 
125
     /**
113
     /**
126
      * Primary toolbar styles.
114
      * Primary toolbar styles.
127
      */
115
      */
128
     &_primary {
116
     &_primary {
117
+        background-color: $toolbarBackground;
129
         position: absolute;
118
         position: absolute;
130
         left: 50%;
119
         left: 50%;
131
         top: 30px;
120
         top: 30px;
155
      * Secondary toolbar styles.
144
      * Secondary toolbar styles.
156
      */
145
      */
157
     &_secondary {
146
     &_secondary {
147
+        background-color: $secondaryToolbarBg;
158
         position: absolute;
148
         position: absolute;
159
         align-items: center;
149
         align-items: center;
160
         box-sizing: border-box;
150
         box-sizing: border-box;
174
         width: $defaultToolbarSize;
164
         width: $defaultToolbarSize;
175
         -webkit-transform: translateX(-100%);
165
         -webkit-transform: translateX(-100%);
176
 
166
 
167
+        .button {
168
+            font-size: $secToolbarFontSize;
169
+            height: $secToolbarLineHeight;
170
+            line-height: $secToolbarLineHeight;
171
+        }
172
+
177
         .button.toggled:not(.icon-raised-hand):not(.button-active) {
173
         .button.toggled:not(.icon-raised-hand):not(.button-active) {
178
-            background: $toolbarSelectBackground;
174
+            background: $secondaryToolbarBg;
179
             cursor: pointer;
175
             cursor: pointer;
180
             text-decoration: none;
176
             text-decoration: none;
181
 
177
 
257
     }
253
     }
258
 }
254
 }
259
 
255
 
256
+#toolbar_button_profile {
257
+    height: $toolbarAvatarSize + 2*$toolbarAvatarPadding;
258
+}
259
+
260
 a.button>#avatar {
260
 a.button>#avatar {
261
     border-radius: 50%;
261
     border-radius: 50%;
262
-    padding-bottom: 10px;
263
-    padding-top: 10px;
264
-    width: 30px;
262
+    padding-bottom: $toolbarAvatarPadding;
263
+    padding-top: $toolbarAvatarPadding;
264
+    width: $toolbarAvatarSize;
265
 }
265
 }
266
 
266
 
267
 #feedbackButton {
267
 #feedbackButton {

+ 4
- 7
css/_variables.scss Zobrazit soubor

35
  */
35
  */
36
 $defaultToolbarSize: 50px;
36
 $defaultToolbarSize: 50px;
37
 $defaultFilmStripOnlyToolbarSize: 37px;
37
 $defaultFilmStripOnlyToolbarSize: 37px;
38
-$splitterToolbarButtonMargin: 18px;
39
-$toolbarBackground: rgba(0, 0, 0, 0.5);
40
-$toolbarBadgeBackground: #165ECC;
41
-$toolbarBadgeColor: #FFFFFF;
38
+$secToolbarFontSize: 1.9em;
39
+$secToolbarLineHeight: 45px;
40
+$toolbarAvatarPadding: 10px;
41
+$toolbarAvatarSize: 40px;
42
 $toolbarFontSize: 1.9em;
42
 $toolbarFontSize: 1.9em;
43
-$toolbarSelectBackground: rgba(0, 0, 0, .6);
44
-$toolbarTitleColor: #FFFFFF;
45
 $toolbarTitleFontSize: 19px;
43
 $toolbarTitleFontSize: 19px;
46
-$toolbarToggleBackground: #12499C;
47
 
44
 
48
 /**
45
 /**
49
  * Main controls
46
  * Main controls

+ 11
- 0
css/themes/_light.scss Zobrazit soubor

91
 $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
91
 $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
92
 
92
 
93
 // Toolbar
93
 // Toolbar
94
+$secondaryToolbarBg: rgba(0, 0, 0, 0.5);
95
+// TOFIX: Once moved to react rename to match the side panel class name.
96
+$sideToolbarContainerBg: rgba(0, 0, 0, 0.75);
94
 $splitterColor: #ccc;
97
 $splitterColor: #ccc;
98
+$toolbarBackground: rgba(0, 0, 0, 0.5);
99
+$toolbarBadgeBackground: #165ECC;
100
+$toolbarBadgeColor: #FFFFFF;
101
+$toolbarButtonColor: #FFFFFF;
102
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
103
+$toolbarTitleColor: #FFFFFF;
104
+$toolbarToggleBackground: #12499C;
105
+
95
 
106
 
96
 /**
107
 /**
97
  * Forms
108
  * Forms

Načítá se…
Zrušit
Uložit