"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-6193/css/_videolayout_default.scss" (20 May 2022, 6386 Bytes) of package /linux/misc/jitsi-meet-6193.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_7001_vs_jitsi-meet_7210.

    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 #largeVideoContainer {
   80     height: 100%;
   81     width: 100%;
   82 }
   83 
   84 #largeVideoWrapper {
   85     box-shadow: 0 0 20px -2px #444;
   86 }
   87 
   88 #largeVideo,
   89 #largeVideoWrapper
   90 {
   91     object-fit: cover;
   92 }
   93 
   94 #sharedVideo video {
   95     width: 100%;
   96     height: 100%;
   97 }
   98 
   99 #sharedVideo.disable-pointer {
  100     pointer-events: none;
  101 }
  102 
  103 #sharedVideo,
  104 #etherpad,
  105 #localVideoWrapper video,
  106 #localVideoWrapper object,
  107 #localVideoWrapper,
  108 #largeVideoWrapper,
  109 #largeVideoWrapper>video,
  110 #largeVideoWrapper>object,
  111 .videocontainer>video,
  112 .videocontainer>object {
  113     position: absolute;
  114     left: 0;
  115     top: 0;
  116     z-index: $zindex1;
  117     width: 100%;
  118     height: 100%;
  119 }
  120 
  121 #etherpad {
  122     text-align: center;
  123 }
  124 
  125 #etherpad {
  126     z-index: $zindex0;
  127 }
  128 
  129 #alwaysOnTop .displayname {
  130     font-size: 15px;
  131     position: inherit;
  132     width: 100%;
  133     left: 0px;
  134     top: 0px;
  135     margin-top: 10px;
  136 }
  137 
  138 /**
  139  * Audio indicator on video thumbnails.
  140  */
  141 .videocontainer>span.audioindicator,
  142 .videocontainer>.audioindicator-container {
  143     position: absolute;
  144     display: inline-block;
  145     left: 6px;
  146     top: 50%;
  147     margin-top: -17px;
  148     width: 6px;
  149     height: 35px;
  150     z-index: $zindex2;
  151     border: none;
  152 
  153     .audiodot-top,
  154     .audiodot-bottom,
  155     .audiodot-middle {
  156         opacity: 0;
  157         display: inline-block;
  158         @include circle(5px);
  159         background: $audioLevelShadow;
  160         margin: 1px 0 1px 0;
  161         transition: opacity .25s ease-in-out;
  162         -moz-transition: opacity .25s ease-in-out;
  163     }
  164 
  165     span.audiodot-top::after,
  166     span.audiodot-bottom::after,
  167     span.audiodot-middle::after {
  168         content: "";
  169         display: inline-block;
  170         width: 5px;
  171         height: 5px;
  172         border-radius: 50%;
  173         -webkit-filter: blur(0.5px);
  174         filter: blur(0.5px);
  175         background: $audioLevelBg;
  176     }
  177 }
  178 
  179 #reloadPresentation {
  180     display: none;
  181     position: absolute;
  182     color: #FFFFFF;
  183     top: 0;
  184     right:0;
  185     padding: 10px 10px;
  186     font-size: 11pt;
  187     cursor: pointer;
  188     background: rgba(0, 0, 0, 0.3);
  189     border-radius: 5px;
  190     background-clip: padding-box;
  191     -webkit-border-radius: 5px;
  192     -webkit-background-clip: padding-box;
  193     z-index: $reloadZ; /*The reload button should appear on top of the header!*/
  194 }
  195 
  196 #dominantSpeaker {
  197     visibility: hidden;
  198     width: 300px;
  199     height: 300px;
  200     margin: auto;
  201     position: relative;
  202     top: 50%;
  203     transform: translateY(-50%);
  204 }
  205 
  206 #mixedstream {
  207     display:none !important;
  208 }
  209 
  210 #dominantSpeakerAvatarContainer,
  211 .dynamic-shadow {
  212     width: 200px;
  213     height: 200px;
  214 }
  215 
  216 #dominantSpeakerAvatarContainer {
  217     top: 50px;
  218     margin: auto;
  219     position: relative;
  220     overflow: hidden;
  221     visibility: inherit;
  222 }
  223 
  224 .dynamic-shadow {
  225     border-radius: 50%;
  226     position: absolute;
  227     top: 50%;
  228     left: 50%;
  229     margin: -100px 0 0 -100px;
  230     transition: box-shadow 0.3s ease;
  231 }
  232 
  233 .avatar-container {
  234     @include maxSize(60px);
  235     @include absoluteAligning();
  236     display: flex;
  237     justify-content: center;
  238     height: 50%;
  239     width: auto;
  240     overflow: hidden;
  241 
  242     .userAvatar {
  243         height: 100%;
  244         object-fit: cover;
  245         width: 100%;
  246         top: 0px;
  247         left: 0px;
  248         position: absolute;
  249     }
  250 }
  251 
  252 #videoNotAvailableScreen {
  253     text-align: center;
  254     #avatarContainer {
  255         border-radius: 50%;
  256         display: inline-block;
  257         height: 50vh;
  258         margin-top: 25vh;
  259         overflow: hidden;
  260         width: 50vh;
  261 
  262         #avatar {
  263             height: 100%;
  264             object-fit: cover;
  265             width: 100%;
  266         }
  267     }
  268 }
  269 
  270 .sharedVideoAvatar {
  271     position: absolute;
  272     left: 0px;
  273     top: 0px;
  274     height: 100%;
  275     width: 100%;
  276     object-fit: cover;
  277 }
  278 
  279 .videoMessageFilter {
  280     -webkit-filter: grayscale(.5) opacity(0.8);
  281     filter: grayscale(.5) opacity(0.8);
  282 }
  283 
  284 #remotePresenceMessage,
  285 #remoteConnectionMessage {
  286     position: absolute;
  287     width: auto;
  288     z-index: $zindex2;
  289     font-weight: 600;
  290     font-size: 14px;
  291     text-align: center;
  292     color: #FFF;
  293     left: 50%;
  294     transform: translate(-50%, 0);
  295 }
  296 #remotePresenceMessage .presence-label,
  297 #remoteConnectionMessage {
  298     opacity: .80;
  299     text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
  300                     0px 1px 1px rgba(0,0,0,0.3),
  301                     1px 0px 1px rgba(0,0,0,0.3),
  302                     0px 0px 1px rgba(0,0,0,0.3);
  303 
  304     background: rgba(0,0,0,.5);
  305     border-radius: 5px;
  306     padding: 5px;
  307     padding-left: 10px;
  308     padding-right: 10px;
  309 }
  310 #remoteConnectionMessage {
  311     display: none;
  312 }
  313 
  314 .display-video {
  315     .avatar-container {
  316         visibility: hidden;
  317     }
  318 
  319     video {
  320         visibility: visible;
  321     }
  322 }
  323 
  324 .display-avatar-only {
  325     .avatar-container {
  326         visibility: visible;
  327     }
  328 
  329     video {
  330         visibility: hidden;
  331     }
  332 }
  333 
  334 .presence-label {
  335     color: $participantNameColor;
  336     font-size: 12px;
  337     font-weight: 100;
  338     left: 0;
  339     margin: 0 auto;
  340     overflow: hidden;
  341     pointer-events: none;
  342     right: 0;
  343     text-align: center;
  344     text-overflow: ellipsis;
  345     top: calc(50% + 30px);
  346     white-space: nowrap;
  347     width: 100%;
  348 }