mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2025-12-30 03:12:29 +00:00
2dda749b1f
Make conference info and toolbar appear on top of the filmstrip After a breakpoint, filmstrip pushes over the stage view instead of appearing on top On user resize make tiles wider; after a breakpoint show grid view in the filmstrip On filmstrip visibility toggle animate stage view resize Added config for filmstrip with disableResizableFilmstrip
114 lines
1.9 KiB
SCSS
114 lines
1.9 KiB
SCSS
.subject {
|
|
color: #fff;
|
|
transition: opacity .6s ease-in-out;
|
|
z-index: $toolbarZ + 2;
|
|
margin-top: 20px;
|
|
opacity: 0;
|
|
|
|
&.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
&#autoHide.with-always-on {
|
|
overflow: hidden;
|
|
animation: hideSubject forwards .6s ease-out;
|
|
|
|
& > .subject-info-container {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&.visible {
|
|
animation: showSubject forwards .6s ease-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
.subject-info-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
height: 28px;
|
|
|
|
@media (max-width: 500px) {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
.subject-info {
|
|
align-items: center;
|
|
display: flex;
|
|
margin-bottom: 4px;
|
|
max-width: 80%;
|
|
height: 28px;
|
|
}
|
|
|
|
.subject-text {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border-radius: 3px 0px 0px 3px;
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
line-height: 28px;
|
|
padding: 0 16px;
|
|
height: 28px;
|
|
max-width: 324px;
|
|
|
|
@media (max-width: 300px) {
|
|
display: none;
|
|
}
|
|
|
|
&--content {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.subject-timer {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
border-radius: 0px 3px 3px 0px;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
line-height: 28px;
|
|
min-width: 34px;
|
|
padding: 0 8px;
|
|
height: 28px;
|
|
|
|
@media (max-width: 300px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.details-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 48px;
|
|
max-width: calc(100% - 24px);
|
|
}
|
|
|
|
.shift-right .details-container {
|
|
margin-left: calc(#{$sidebarWidth} / 2);
|
|
}
|
|
|
|
@keyframes hideSubject {
|
|
0% {
|
|
max-width: 100%;
|
|
}
|
|
|
|
100% {
|
|
max-width: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes showSubject {
|
|
0% {
|
|
max-width: 0%;
|
|
}
|
|
|
|
100% {
|
|
max-width: 100%;
|
|
}
|
|
}
|