"Fossies" - the Fresh Open Source Software Archive 
Member "jitsi-meet-7316/css/_videolayout_default.scss" (5 Jun 2023, 6849 Bytes) of package /linux/misc/jitsi-meet-7316.tar.gz:
As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) Sass/SCSS source code syntax highlighting (style:
standard) with prefixed line numbers.
Alternatively you can here
view or
download the uninterpreted source code file.
See also the last
Fossies "Diffs" side-by-side code changes report for "_videolayout_default.scss":
jitsi-meet_8319_vs_jitsi-meet_8615.
1 #videoconference_page {
2 min-height: 100%;
3 position: relative;
4 transform: translate3d(0, 0, 0);
5 width: 100%;
6 }
7
8 #layout_wrapper {
9 @include ltr;
10 display: flex;
11 height: 100%;
12 }
13
14 #videospace {
15 display: block;
16 height: 100%;
17 width: 100%;
18 min-height: 100%;
19 position: absolute;
20 top: 0px;
21 left: 0px;
22 right: 0px;
23 overflow: hidden;
24 }
25
26 #largeVideoBackgroundContainer,
27 .large-video-background {
28 height: 100%;
29 left: 0;
30 overflow: hidden;
31 position: absolute;
32 top: 0;
33 width: 100%;
34
35 #largeVideoBackground {
36 min-height: 100%;
37 min-width: 100%;
38 }
39 }
40 #largeVideoBackgroundContainer {
41 filter: blur(40px);
42 }
43
44 .videocontainer {
45 position: relative;
46 text-align: center;
47 overflow: 'hidden';
48 }
49
50 #localVideoWrapper {
51 display:inline-block;
52 }
53
54 .flipVideoX {
55 transform: scale(-1, 1);
56 -moz-transform: scale(-1, 1);
57 -webkit-transform: scale(-1, 1);
58 -o-transform: scale(-1, 1);
59 }
60
61 #localVideoWrapper video,
62 #localVideoWrapper object {
63 border-radius: $borderRadius !important;
64 cursor: hand;
65 object-fit: cover;
66 }
67
68 #largeVideo,
69 #largeVideoWrapper,
70 #largeVideoContainer {
71 overflow: hidden;
72 text-align: center;
73
74 &.transition {
75 transition: width 1s, height 1s, top 1s;
76 }
77 }
78
79 .animatedFadeIn {
80 opacity: 0;
81 animation: fadeInAnimation 0.3s ease forwards;
82 }
83
84 @keyframes fadeInAnimation {
85 from {
86 opacity: 0;
87 }
88 to {
89 opacity: 1;
90 }
91 }
92
93 .animatedFadeOut {
94 opacity: 1;
95 animation: fadeOutAnimation 0.3s ease forwards;
96 }
97
98 @keyframes fadeOutAnimation {
99 from {
100 opacity: 1;
101 }
102
103 to {
104 opacity: 0;
105 }
106 }
107
108 #largeVideoContainer {
109 height: 100%;
110 width: 100%;
111 position: absolute;
112 top: 0;
113 left: 0;
114 margin: 0 !important;
115 }
116
117 #largeVideoWrapper {
118 box-shadow: 0 0 20px -2px #444;
119 }
120
121 #largeVideo,
122 #largeVideoWrapper
123 {
124 object-fit: cover;
125 }
126
127 #sharedVideo video {
128 width: 100%;
129 height: 100%;
130 }
131
132 #sharedVideo.disable-pointer {
133 pointer-events: none;
134 }
135
136 #sharedVideo,
137 #etherpad,
138 #localVideoWrapper video,
139 #localVideoWrapper object,
140 #localVideoWrapper,
141 #largeVideoWrapper,
142 #largeVideoWrapper>video,
143 #largeVideoWrapper>object,
144 .videocontainer>video,
145 .videocontainer>object {
146 position: absolute;
147 left: 0;
148 top: 0;
149 z-index: $zindex1;
150 width: 100%;
151 height: 100%;
152 }
153
154 #etherpad {
155 text-align: center;
156 }
157
158 #etherpad {
159 z-index: $zindex0;
160 }
161
162 #alwaysOnTop .displayname {
163 font-size: 15px;
164 position: inherit;
165 width: 100%;
166 left: 0px;
167 top: 0px;
168 margin-top: 10px;
169 }
170
171 /**
172 * Audio indicator on video thumbnails.
173 */
174 .videocontainer>span.audioindicator,
175 .videocontainer>.audioindicator-container {
176 position: absolute;
177 display: inline-block;
178 left: 6px;
179 top: 50%;
180 margin-top: -17px;
181 width: 6px;
182 height: 35px;
183 z-index: $zindex2;
184 border: none;
185
186 .audiodot-top,
187 .audiodot-bottom,
188 .audiodot-middle {
189 opacity: 0;
190 display: inline-block;
191 @include circle(5px);
192 background: $audioLevelShadow;
193 margin: 1px 0 1px 0;
194 transition: opacity .25s ease-in-out;
195 -moz-transition: opacity .25s ease-in-out;
196 }
197
198 span.audiodot-top::after,
199 span.audiodot-bottom::after,
200 span.audiodot-middle::after {
201 content: "";
202 display: inline-block;
203 width: 5px;
204 height: 5px;
205 border-radius: 50%;
206 -webkit-filter: blur(0.5px);
207 filter: blur(0.5px);
208 background: $audioLevelBg;
209 }
210 }
211
212 #reloadPresentation {
213 display: none;
214 position: absolute;
215 color: #FFFFFF;
216 top: 0;
217 right:0;
218 padding: 10px 10px;
219 font-size: 11pt;
220 cursor: pointer;
221 background: rgba(0, 0, 0, 0.3);
222 border-radius: 5px;
223 background-clip: padding-box;
224 -webkit-border-radius: 5px;
225 -webkit-background-clip: padding-box;
226 z-index: $reloadZ; /*The reload button should appear on top of the header!*/
227 }
228
229 #dominantSpeaker {
230 visibility: hidden;
231 width: 300px;
232 height: 300px;
233 margin: auto;
234 position: relative;
235 top: 50%;
236 transform: translateY(-50%);
237 }
238
239 #mixedstream {
240 display:none !important;
241 }
242
243 #dominantSpeakerAvatarContainer,
244 .dynamic-shadow {
245 width: 200px;
246 height: 200px;
247 }
248
249 #dominantSpeakerAvatarContainer {
250 top: 50px;
251 margin: auto;
252 position: relative;
253 overflow: hidden;
254 visibility: inherit;
255 }
256
257 .dynamic-shadow {
258 border-radius: 50%;
259 position: absolute;
260 top: 50%;
261 left: 50%;
262 margin: -100px 0 0 -100px;
263 transition: box-shadow 0.3s ease;
264 }
265
266 .avatar-container {
267 @include maxSize(60px);
268 @include absoluteAligning();
269 display: flex;
270 justify-content: center;
271 height: 50%;
272 width: auto;
273 overflow: hidden;
274
275 .userAvatar {
276 height: 100%;
277 object-fit: cover;
278 width: 100%;
279 top: 0px;
280 left: 0px;
281 position: absolute;
282 }
283 }
284
285 #videoNotAvailableScreen {
286 text-align: center;
287 #avatarContainer {
288 border-radius: 50%;
289 display: inline-block;
290 height: 50vh;
291 margin-top: 25vh;
292 overflow: hidden;
293 width: 50vh;
294
295 #avatar {
296 height: 100%;
297 object-fit: cover;
298 width: 100%;
299 }
300 }
301 }
302
303 .sharedVideoAvatar {
304 position: absolute;
305 left: 0px;
306 top: 0px;
307 height: 100%;
308 width: 100%;
309 object-fit: cover;
310 }
311
312 .videoMessageFilter {
313 -webkit-filter: grayscale(.5) opacity(0.8);
314 filter: grayscale(.5) opacity(0.8);
315 }
316
317 #remotePresenceMessage,
318 #remoteConnectionMessage {
319 position: absolute;
320 width: auto;
321 z-index: $zindex2;
322 font-weight: 600;
323 font-size: 14px;
324 text-align: center;
325 color: #FFF;
326 left: 50%;
327 transform: translate(-50%, 0);
328 }
329 #remotePresenceMessage .presence-label,
330 #remoteConnectionMessage {
331 opacity: .80;
332 text-shadow: 0px 0px 1px rgba(0,0,0,0.3),
333 0px 1px 1px rgba(0,0,0,0.3),
334 1px 0px 1px rgba(0,0,0,0.3),
335 0px 0px 1px rgba(0,0,0,0.3);
336
337 background: rgba(0,0,0,.5);
338 border-radius: 5px;
339 padding: 5px;
340 padding-left: 10px;
341 padding-right: 10px;
342 }
343 #remoteConnectionMessage {
344 display: none;
345 }
346
347 .display-video {
348 .avatar-container {
349 visibility: hidden;
350 }
351
352 video {
353 visibility: visible;
354 }
355 }
356
357 .display-avatar-only {
358 .avatar-container {
359 visibility: visible;
360 }
361
362 video {
363 visibility: hidden;
364 }
365 }
366
367 .presence-label {
368 color: $participantNameColor;
369 font-size: 12px;
370 font-weight: 100;
371 left: 0;
372 margin: 0 auto;
373 overflow: hidden;
374 pointer-events: none;
375 right: 0;
376 text-align: center;
377 text-overflow: ellipsis;
378 top: calc(50% + 30px);
379 white-space: nowrap;
380 width: 100%;
381 }