"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-4445/css/_videolayout_default.scss" (30 Sep 2020, 14012 Bytes) of package /linux/misc/jitsi-meet-4445.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.

    1 #videoconference_page {
    2     min-height: 100%;
    3 }
    4 
    5 #videospace {
    6     display: block;
    7     height: 100%;
    8     width: 100%;
    9     min-height: 100%;
   10     position: absolute;
   11     top: 0px;
   12     left: 0px;
   13     right: 0px;
   14     overflow: hidden;
   15 }
   16 
   17 #largeVideoBackgroundContainer,
   18 .large-video-background {
   19     height: 100%;
   20     left: 0;
   21     overflow: hidden;
   22     position: absolute;
   23     top: 0;
   24     width: 100%;
   25 
   26     #largeVideoBackground {
   27         min-height: 100%;
   28         min-width: 100%;
   29     }
   30 }
   31 #largeVideoBackgroundContainer {
   32     filter: blur(40px);
   33 }
   34 
   35 .videocontainer {
   36     position: relative;
   37     text-align: center;
   38 
   39     &__background {
   40         @include topLeft();
   41         background-color: black;
   42         border-radius: $borderRadius;
   43         width: 100%;
   44         height: 100%;
   45     }
   46 
   47     /**
   48      * The toolbar of the video thumbnail.
   49      */
   50     &__toolbar,
   51     &__toptoolbar {
   52         position: absolute;
   53         left: 0;
   54         pointer-events: none;
   55         z-index: $zindex10;
   56         width: 100%;
   57         box-sizing: border-box; // Includes the padding in the 100% width.
   58 
   59         /**
   60          * FIXME (lenny): Disabling pointer-events is a pretty big sin that
   61          * sidesteps the problems. There are z-index wars occurring within
   62          * videocontainer and AtlasKit Tooltips rely on their parent z-indexe
   63          * being higher than whatever they need to appear over. So set a higher
   64          * z-index for the tooltip containers but make any empty space not block
   65          * mouse overs for various mouseover triggers.
   66          */
   67         pointer-events: none;
   68 
   69         * {
   70             pointer-events: auto;
   71         }
   72 
   73         .indicator-container {
   74             display: inline-block;
   75             float: left;
   76             pointer-events: all;
   77         }
   78     }
   79 
   80     &__toolbar {
   81         bottom: 0;
   82         height: $thumbnailToolbarHeight;
   83         padding: 0 5px 0 5px;
   84     }
   85 
   86     &__toptoolbar {
   87         $toolbarIconMargin: 5px;
   88         top: 0;
   89         padding-bottom: 0;
   90         /**
   91          * Override text-align center as icons need to be left justified.
   92          */
   93         text-align: left;
   94 
   95         /**
   96          * Intentionally use margin on the icon itself as AtlasKit InlineDialog
   97          * positioning depends on the trigger (indicator icon).
   98          */
   99         .indicator {
  100             margin-left: 5px;
  101             margin-top: $toolbarIconMargin;
  102         }
  103 
  104         .indicator-container:nth-child(1) .indicator {
  105             margin-left: $toolbarIconMargin;
  106         }
  107 
  108         .indicator-container {
  109             display: inline-block;
  110             vertical-align: top;
  111 
  112             .popover-trigger {
  113                 display: inline-block;
  114             }
  115         }
  116 
  117         .connection-indicator,
  118         .indicator {
  119             position: relative;
  120             font-size: 8px;
  121             text-align: center;
  122             line-height: $thumbnailIndicatorSize;
  123             padding: 0;
  124             @include circle($thumbnailIndicatorSize);
  125             box-sizing: border-box;
  126             z-index: $zindex3;
  127             background: $dominantSpeakerBg;
  128             color: $thumbnailPictogramColor;
  129             border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
  130 
  131             .indicatoricon {
  132                 @include absoluteAligning();
  133             }
  134 
  135             .connection {
  136                 position: relative;
  137                 display: inline-block;
  138                 margin: 0 auto;
  139                 left: 0;
  140                 @include transform(translate(0, -50%));
  141 
  142                 &_empty,
  143                 &_lost
  144                 {
  145                     color: #8B8B8B;/*#FFFFFF*/
  146                     overflow: hidden;
  147                 }
  148 
  149                 &_full
  150                 {
  151                     @include topLeft();
  152                     color: #FFFFFF;/*#15A1ED*/
  153                     overflow: hidden;
  154                 }
  155 
  156                 &_ninja
  157                 {
  158                     font-size: 1.5em;
  159                 }
  160             }
  161 
  162             .icon-gsm-bars {
  163                 cursor: pointer;
  164                 font-size: 1em;
  165             }
  166         }
  167 
  168         .hide-connection-indicator {
  169             display: none;
  170         }
  171     }
  172 
  173     &__hoverOverlay {
  174         background: rgba(0,0,0,.6);
  175         border-radius: $borderRadius;
  176         position: absolute;
  177         top: 0px;
  178         left: 0px;
  179         width: 100%;
  180         height: 100%;
  181         visibility: hidden;
  182         z-index: $zindex2;
  183     }
  184 
  185     &.shift-right {
  186         &#largeVideoContainer {
  187             margin-left: $sidebarWidth;
  188             width: calc(100% - #{$sidebarWidth});
  189         }
  190     }
  191 }
  192 
  193 #localVideoWrapper {
  194     display:inline-block;
  195 }
  196 
  197 .flipVideoX {
  198     transform: scale(-1, 1);
  199     -moz-transform: scale(-1, 1);
  200     -webkit-transform: scale(-1, 1);
  201     -o-transform: scale(-1, 1);
  202 }
  203 
  204 #localVideoWrapper video,
  205 #localVideoWrapper object {
  206     border-radius: $borderRadius !important;
  207     cursor: hand;
  208     object-fit: cover;
  209 }
  210 
  211 #largeVideo,
  212 #largeVideoWrapper,
  213 #largeVideoContainer {
  214     overflow: hidden;
  215     text-align: center;
  216 }
  217 
  218 #largeVideoContainer {
  219     height: 100%;
  220     width: 100%;
  221 }
  222 
  223 #largeVideoWrapper {
  224     box-shadow: 0 0 20px -2px #444;
  225 }
  226 
  227 #largeVideo,
  228 #largeVideoWrapper
  229 {
  230     object-fit: cover;
  231 }
  232 
  233 #sharedVideo,
  234 #etherpad,
  235 #localVideoWrapper video,
  236 #localVideoWrapper object,
  237 #localVideoWrapper,
  238 #largeVideoWrapper,
  239 #largeVideoWrapper>video,
  240 #largeVideoWrapper>object,
  241 .videocontainer>video,
  242 .videocontainer>object {
  243     position: absolute;
  244     left: 0;
  245     top: 0;
  246     z-index: $zindex1;
  247     width: 100%;
  248     height: 100%;
  249 }
  250 
  251 #etherpad {
  252     text-align: center;
  253 }
  254 
  255 #etherpad {
  256     z-index: $zindex0;
  257 }
  258 
  259 /**
  260  * Positions video thumbnail display name and editor.
  261  */
  262 #alwaysOnTop .displayname,
  263 .videocontainer .displayname,
  264 .videocontainer .editdisplayname {
  265     display: inline-block;
  266     position: absolute;
  267     left: 10%;
  268     width: 80%;
  269     top: 50%;
  270     @include transform(translateY(-40%));
  271     color: $participantNameColor;
  272     text-align: center;
  273     text-overflow: ellipsis;
  274     font-size: 12px;
  275     font-weight: 100;
  276     overflow: hidden;
  277     white-space: nowrap;
  278     line-height: $thumbnailToolbarHeight;
  279     z-index: $zindex2;
  280 }
  281 
  282 #alwaysOnTop .displayname {
  283     font-size: 15px;
  284     position: inherit;
  285     width: 100%;
  286     left: 0px;
  287     top: 0px;
  288     margin-top: 10px;
  289 }
  290 
  291 /**
  292  * Positions video thumbnail display name editor.
  293  */
  294 .videocontainer .editdisplayname {
  295     outline: none;
  296     border: none;
  297     background: none;
  298     box-shadow: none;
  299     padding: 0;
  300 }
  301 
  302 #localVideoContainer .displayname:hover {
  303     cursor: text;
  304 }
  305 
  306 .videocontainer .displayname {
  307     pointer-events: none;
  308     padding: 0 3px 0 3px;
  309 }
  310 
  311 .videocontainer .editdisplayname {
  312     height: auto;
  313 }
  314 
  315 #localDisplayName {
  316     pointer-events: auto !important;
  317 }
  318 
  319 .videocontainer>a.displayname {
  320     display: inline-block;
  321     position: absolute;
  322     color: #FFFFFF;
  323     bottom: 0;
  324     right: 0;
  325     padding: 3px 5px;
  326     font-size: 9pt;
  327     cursor: pointer;
  328     z-index: $zindex2;
  329 }
  330 
  331 /**
  332  * Video thumbnail toolbar icon.
  333  */
  334 .videocontainer .toolbar-icon {
  335     font-size: 8pt;
  336     text-align: center;
  337     text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
  338     color: #FFFFFF;
  339     width: 12px;
  340     line-height: $thumbnailToolbarHeight;
  341     height: $thumbnailToolbarHeight;
  342     padding: 0;
  343     border: 0;
  344     margin: 0px 5px 0px 0px;
  345 }
  346 
  347 /**
  348  * Toolbar icon internal i elements (font icons).
  349  */
  350 .toolbar-icon>div {
  351     height: $thumbnailToolbarHeight;
  352     display: flex;
  353     flex-direction: column;
  354     justify-content: center;
  355 }
  356 
  357 /**
  358  * Toolbar icons positioned on the right.
  359  */
  360 .moderator-icon {
  361     display: inline-block;
  362 
  363     &.right {
  364         float: right;
  365         margin: 0px 0px 0px 5px;
  366     }
  367 
  368     .toolbar-icon {
  369         margin: 0;
  370     }
  371 }
  372 
  373 .raisehandindicator {
  374   background: $raiseHandBg;
  375 }
  376 
  377 .connection-indicator {
  378     background: $connectionIndicatorBg;
  379 
  380     &.status-high {
  381         background: green;
  382     }
  383 
  384     &.status-med {
  385         background: #FFD740;
  386     }
  387 
  388     &.status-lost {
  389         background: gray;
  390     }
  391 
  392     &.status-low {
  393         background: #BF2117;
  394     }
  395 
  396     &.status-other {
  397         background: $connectionIndicatorBg;
  398     }
  399 }
  400 
  401 .remote-video-menu-trigger,
  402 .remotevideomenu
  403 {
  404     display: inline-block;
  405     position: absolute;
  406     top: 0px;
  407     right: 0;
  408     z-index: $zindex2;
  409     width: 18px;
  410     height: 13px;
  411     color: #FFF;
  412     font-size: 10pt;
  413     margin-right: $remoteVideoMenuIconMargin;
  414 
  415     >i{
  416         cursor: hand;
  417     }
  418 }
  419 .remote-video-menu-trigger {
  420     margin-top: 7px;
  421 }
  422 
  423 /**
  424  * Audio indicator on video thumbnails.
  425  */
  426 .videocontainer>span.audioindicator,
  427 .videocontainer>.audioindicator-container {
  428     position: absolute;
  429     display: inline-block;
  430     left: 6px;
  431     top: 50%;
  432     margin-top: -17px;
  433     width: 6px;
  434     height: 35px;
  435     z-index: $zindex2;
  436     border: none;
  437 
  438     .audiodot-top,
  439     .audiodot-bottom,
  440     .audiodot-middle {
  441         opacity: 0;
  442         display: inline-block;
  443         @include circle(5px);
  444         background: $audioLevelShadow;
  445         margin: 1px 0 1px 0;
  446         transition: opacity .25s ease-in-out;
  447         -moz-transition: opacity .25s ease-in-out;
  448     }
  449 
  450     span.audiodot-top::after,
  451     span.audiodot-bottom::after,
  452     span.audiodot-middle::after {
  453         content: "";
  454         display: inline-block;
  455         width: 5px;
  456         height: 5px;
  457         border-radius: 50%;
  458         -webkit-filter: blur(0.5px);
  459         filter: blur(0.5px);
  460         background: $audioLevelBg;
  461     }
  462 }
  463 
  464 #reloadPresentation {
  465     display: none;
  466     position: absolute;
  467     color: #FFFFFF;
  468     top: 0;
  469     right:0;
  470     padding: 10px 10px;
  471     font-size: 11pt;
  472     cursor: pointer;
  473     background: rgba(0, 0, 0, 0.3);
  474     border-radius: 5px;
  475     background-clip: padding-box;
  476     -webkit-border-radius: 5px;
  477     -webkit-background-clip: padding-box;
  478     z-index: $reloadZ; /*The reload button should appear on top of the header!*/
  479 }
  480 
  481 .audiolevel {
  482     display: inline-block;
  483     position: absolute;
  484     z-index: $zindex0;
  485     border-radius:1px;
  486     pointer-events: none;
  487 }
  488 
  489 #dominantSpeaker {
  490     visibility: hidden;
  491     width: 300px;
  492     height: 300px;
  493     margin: auto;
  494     position: relative;
  495     top: 50%;
  496     transform: translateY(-50%);
  497 }
  498 
  499 #mixedstream {
  500     display:none !important;
  501 }
  502 
  503 #dominantSpeakerAvatarContainer,
  504 .dynamic-shadow {
  505     width: 200px;
  506     height: 200px;
  507 }
  508 
  509 #dominantSpeakerAvatarContainer {
  510     top: 50px;
  511     margin: auto;
  512     position: relative;
  513     overflow: hidden;
  514     visibility: inherit;
  515 }
  516 
  517 .dynamic-shadow {
  518     border-radius: 50%;
  519     position: absolute;
  520     top: 50%;
  521     left: 50%;
  522     margin: -100px 0 0 -100px;
  523     transition: box-shadow 0.3s ease;
  524 }
  525 
  526 .avatar-container {
  527     @include maxSize(60px);
  528     @include absoluteAligning();
  529     display: flex;
  530     justify-content: center;
  531     height: 50%;
  532     width: auto;
  533     overflow: hidden;
  534 
  535     .userAvatar {
  536         height: 100%;
  537         object-fit: cover;
  538         width: 100%;
  539         top: 0px;
  540         left: 0px;
  541         position: absolute;
  542     }
  543 }
  544 
  545 #videoNotAvailableScreen {
  546     text-align: center;
  547     #avatarContainer {
  548         border-radius: 50%;
  549         display: inline-block;
  550         height: 50vh;
  551         margin-top: 25vh;
  552         overflow: hidden;
  553         width: 50vh;
  554 
  555         #avatar {
  556             height: 100%;
  557             object-fit: cover;
  558             width: 100%;
  559         }
  560     }
  561 }
  562 
  563 .sharedVideoAvatar {
  564     position: absolute;
  565     left: 0px;
  566     top: 0px;
  567     height: 100%;
  568     width: 100%;
  569     object-fit: cover;
  570 }
  571 
  572 .videoMessageFilter {
  573     -webkit-filter: grayscale(.5) opacity(0.8);
  574     filter: grayscale(.5) opacity(0.8);
  575 }
  576 
  577 #remotePresenceMessage,
  578 #remoteConnectionMessage {
  579     position: absolute;
  580     width: auto;
  581     z-index: $zindex2;
  582     font-weight: 600;
  583     font-size: 14px;
  584     text-align: center;
  585     color: #FFF;
  586     left: 50%;
  587     transform: translate(-50%, 0);
  588 }
  589 #remotePresenceMessage .presence-label,
  590 #remoteConnectionMessage {
  591     opacity: .80;
  592     text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
  593                     0px 1px 1px rgba(0,0,0,0.3),
  594                     1px 0px 1px rgba(0,0,0,0.3),
  595                     0px 0px 1px rgba(0,0,0,0.3);
  596 
  597     background: rgba(0,0,0,.5);
  598     border-radius: 5px;
  599     padding: 5px;
  600     padding-left: 10px;
  601     padding-right: 10px;
  602 }
  603 #remoteConnectionMessage {
  604     display: none;
  605 }
  606 
  607 .display-avatar-with-name {
  608     .avatar-container {
  609         visibility: visible;
  610     }
  611 
  612     .displayNameContainer {
  613         visibility: visible;
  614     }
  615 
  616     .videocontainer__hoverOverlay {
  617         visibility: visible;
  618     }
  619 
  620     video {
  621         visibility: hidden;
  622     }
  623 }
  624 
  625 .display-name-on-black {
  626     .avatar-container {
  627         visibility: hidden;
  628     }
  629 
  630     .displayNameContainer {
  631         visibility: visible;
  632     }
  633 
  634     .videocontainer__hoverOverlay {
  635         visibility: hidden;
  636     }
  637 
  638     video {
  639         opacity: 0.2;
  640         visibility: visible;
  641     }
  642 }
  643 
  644 .display-video {
  645     .avatar-container {
  646         visibility: hidden;
  647     }
  648 
  649     .displayNameContainer {
  650         visibility: hidden;
  651     }
  652 
  653     .videocontainer__hoverOverlay {
  654         visibility: hidden;
  655     }
  656 
  657     video {
  658         visibility: visible;
  659     }
  660 }
  661 
  662 .display-name-on-video {
  663     .avatar-container {
  664         visibility: hidden;
  665     }
  666 
  667     .displayNameContainer {
  668         visibility: visible;
  669     }
  670 
  671     .videocontainer__hoverOverlay {
  672         visibility: visible;
  673     }
  674 
  675     video {
  676         visibility: visible;
  677     }
  678 }
  679 
  680 .display-avatar-only {
  681     .avatar-container {
  682         visibility: visible;
  683     }
  684 
  685     .displayNameContainer {
  686         visibility: hidden;
  687     }
  688 
  689     .videocontainer__hoverOverlay {
  690         visibility: hidden;
  691     }
  692 
  693     video {
  694         visibility: hidden;
  695     }
  696 }
  697 
  698 .presence-label {
  699     color: $participantNameColor;
  700     font-size: 12px;
  701     font-weight: 100;
  702     left: 0;
  703     margin: 0 auto;
  704     overflow: hidden;
  705     pointer-events: none;
  706     right: 0;
  707     text-align: center;
  708     text-overflow: ellipsis;
  709     top: calc(50% + 30px);
  710     white-space: nowrap;
  711     width: 100%;
  712 }