浏览代码

feat(css): configurable Videolayot and overflow menu.

j8
Hristo Terezov 6 年前
父节点
当前提交
c4361ed7da
共有 3 个文件被更改,包括 13 次插入5 次删除
  1. 7
    5
      css/_toolbars.scss
  2. 5
    0
      css/_variables.scss
  3. 1
    0
      css/_videolayout_default.scss

+ 7
- 5
css/_toolbars.scss 查看文件

153
         .overflow-menu {
153
         .overflow-menu {
154
             font-size: 1.2em;
154
             font-size: 1.2em;
155
             list-style-type: none;
155
             list-style-type: none;
156
+            background-color: $overflowMenuBG;
156
             /**
157
             /**
157
              * Undo atlaskit padding by reducing margins.
158
              * Undo atlaskit padding by reducing margins.
158
              */
159
              */
159
-            margin: -15px -24px;
160
+            margin: -16px -24px;
160
             padding: 4px 0;
161
             padding: 4px 0;
161
 
162
 
162
             .overflow-menu-item {
163
             .overflow-menu-item {
163
                 align-items: center;
164
                 align-items: center;
164
-                color: #B8C7E0;
165
+                color: $overflowMenuItemColor;
165
                 cursor: pointer;
166
                 cursor: pointer;
166
                 display: flex;
167
                 display: flex;
167
                 font-size: 14px;
168
                 font-size: 14px;
175
                 }
176
                 }
176
 
177
 
177
                 &:hover {
178
                 &:hover {
178
-                    background: #313D52;
179
+                    background-color: $overflowMenuItemHoverBG;
180
+                    color: $overflowMenuItemHoverColor;
179
                 }
181
                 }
180
 
182
 
181
                 &.unclickable {
183
                 &.unclickable {
191
             }
193
             }
192
 
194
 
193
             .beta-tag {
195
             .beta-tag {
194
-                background: #B8C7E0;
196
+                background: $overflowMenuItemColor;
195
                 border-radius: 2px;
197
                 border-radius: 2px;
196
-                color: $newToolbarBackgroundColor;
198
+                color: $overflowMenuBG;
197
                 font-size: 11px;
199
                 font-size: 11px;
198
                 font-weight: bold;
200
                 font-weight: bold;
199
                 margin-left: 8px;
201
                 margin-left: 8px;

+ 5
- 0
css/_variables.scss 查看文件

43
 $newToolbarSize: 40px;
43
 $newToolbarSize: 40px;
44
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
44
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
45
 $toolbarTitleFontSize: 19px;
45
 $toolbarTitleFontSize: 19px;
46
+$overflowMenuBG: initial;
47
+$overflowMenuItemHoverBG: #313D52;
48
+$overflowMenuItemHoverColor: #B8C7E0;
49
+$overflowMenuItemColor: #B8C7E0;
46
 
50
 
47
 /**
51
 /**
48
  * Video layout
52
  * Video layout
59
 $videoStateIndicatorColor: $defaultColor;
63
 $videoStateIndicatorColor: $defaultColor;
60
 $videoStateIndicatorBackground: $toolbarBackground;
64
 $videoStateIndicatorBackground: $toolbarBackground;
61
 $videoStateIndicatorSize: 40px;
65
 $videoStateIndicatorSize: 40px;
66
+$remoteVideoMenuIconLeft: initial;
62
 
67
 
63
 /**
68
 /**
64
  * Feedback Modal
69
  * Feedback Modal

+ 1
- 0
css/_videolayout_default.scss 查看文件

412
 
412
 
413
     >i{
413
     >i{
414
         cursor: hand;
414
         cursor: hand;
415
+        margin-left: $remoteVideoMenuIconLeft;
415
     }
416
     }
416
 }
417
 }
417
 .remote-video-menu-trigger {
418
 .remote-video-menu-trigger {

正在加载...
取消
保存