浏览代码

fix(virtual-background): Refactor CSS to accommodate smaller screens

factor2
Mihai-Andrei Uscat 4 年前
父节点
当前提交
4e83e93eb6
没有帐户链接到提交者的电子邮件
共有 1 个文件被更改,包括 5 次插入33 次删除
  1. 5
    33
      css/modals/virtual-background/_virtual-background.scss

+ 5
- 33
css/modals/virtual-background/_virtual-background.scss 查看文件

14
     .virtual-background-none:hover {
14
     .virtual-background-none:hover {
15
         opacity: 0.5;
15
         opacity: 0.5;
16
         border: 2px solid #99bbf3;
16
         border: 2px solid #99bbf3;
17
-        @media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) {
18
-            height: 60px;
19
-            width: 60px;
20
-        }
21
-        @media (max-width: 432px) {
17
+        @media (max-width: 632px) {
22
             height: 60px;
18
             height: 60px;
23
             width: 60px;
19
             width: 60px;
24
         }
20
         }
87
         padding: 0 10px;
83
         padding: 0 10px;
88
     }
84
     }
89
 
85
 
90
-    @media (min-width: 432px) and (max-width: 632px) {
91
-        font-size: 1.5vw;
92
-        .desktop-share,
93
-        .virtual-background-none,
94
-        .thumbnail,
95
-        .blur,
96
-        .slight-blur {
97
-            height: 60px;
98
-            width: 60px;
99
-        }
100
-        .desktop-share-selected,
101
-        .thumbnail-selected,
102
-        .none-selected,
103
-        .blur-selected,
104
-        .slight-blur-selected {
105
-            height: 60px;
106
-            width: 60px;
107
-        }
108
-    }
109
-    @media (max-width: 432px) {
110
-        grid-template-columns: auto auto auto;
86
+    @media (max-width: 632px) {
111
         font-size: 1.5vw;
87
         font-size: 1.5vw;
112
         .desktop-share,
88
         .desktop-share,
113
         .virtual-background-none,
89
         .virtual-background-none,
126
             width: 60px;
102
             width: 60px;
127
         }
103
         }
128
     }
104
     }
129
-    @media (max-width: 320px) {
105
+    @media (max-width: 360px) {
130
         grid-template-columns: auto auto auto;
106
         grid-template-columns: auto auto auto;
131
-        font-size: 1.5vw;
132
     }
107
     }
133
 }
108
 }
134
 
109
 
163
     display: none;
138
     display: none;
164
     left: 96;
139
     left: 96;
165
     bottom: 51;
140
     bottom: 51;
166
-    @media (min-width: 432px) and (max-width: 632px) {
141
+    @media (max-width: 632px) {
167
         left: 51px;
142
         left: 51px;
168
     }
143
     }
169
 }
144
 }
196
     width: 570px;
171
     width: 570px;
197
     margin-bottom: 8px;
172
     margin-bottom: 8px;
198
     z-index: 2;
173
     z-index: 2;
199
-    @media (min-width: 432px) and (max-width: 632px) {
200
-        max-width: 336;
201
-    }
202
-    @media (max-width: 432px) {
174
+    @media (max-width: 632px) {
203
         max-width: 336;
175
         max-width: 336;
204
     }
176
     }
205
 }
177
 }

正在加载...
取消
保存