"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7328/css/filmstrip/_vertical_filmstrip.scss" (8 Jun 2023, 4822 Bytes) of package /linux/misc/jitsi-meet-7328.tar.gz:

    1 .vertical-filmstrip, .stage-filmstrip {
    2     span:not(.tile-view) .filmstrip {
    3         &.hide-videos {
    4             .remote-videos {
    5                 & > div {
    6                     opacity: 0;
    7                     pointer-events: none;
    8                 }
    9             }
   10         }
   11 
   12         /*
   13          * Firefox sets flex items to min-height: auto and min-width: auto,
   14          * preventing flex children from shrinking like they do on other browsers.
   15          * Setting min-height and min-width 0 is a workaround for the issue so
   16          * Firefox behaves like other browsers.
   17          * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
   18          */
   19         @mixin minHWAutoFix() {
   20             min-height: 0;
   21             min-width: 0;
   22         }
   23 
   24         @extend %align-right;
   25         align-items: flex-end;
   26         bottom: 0;
   27         box-sizing: border-box;
   28         display: flex;
   29         flex-direction: column-reverse;
   30         height: 100%;
   31         width: 100%;
   32         padding: 0;
   33         /**
   34          * fixed positioning is necessary for remote menus and tooltips to pop
   35          * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
   36          * a library called popper which will position its elements fixed if
   37          * any parent is also fixed.
   38          */
   39         position: fixed;
   40         top: 0;
   41         right: 0;
   42         z-index: $filmstripVideosZ;
   43 
   44         &.no-vertical-padding {
   45             padding: 0;
   46         }
   47 
   48         /**
   49          * Hide videos by making them slight to the right.
   50          */
   51         .filmstrip__videos {
   52             @extend %align-right;
   53             bottom: 0;
   54             padding: 0;
   55             position:relative;
   56             right: 0;
   57             width: auto;
   58 
   59             /**
   60              * An id selector is used to match id specificity with existing
   61              * filmstrip styles.
   62              */
   63             &#remoteVideos {
   64                 border: $thumbnailsBorder solid transparent;
   65                 padding-left: 0;
   66                 border-left: 0;
   67                 width: 100%;
   68                 height: 100%;
   69                 justify-content: center;
   70             }
   71         }
   72 
   73         /**
   74          * Re-styles the local Video to better fit vertical filmstrip layout.
   75          */
   76         #filmstripLocalVideo {
   77             align-self: initial;
   78             margin-bottom: 5px;
   79             display: flex;
   80             flex-direction: column-reverse;
   81             height: auto;
   82             justify-content: flex-start;
   83             width: 100%;
   84 
   85             #filmstripLocalVideoThumbnail {
   86                 width: calc(100% - 15px);
   87 
   88                 .videocontainer {
   89                     height: 0px;
   90                     width: 100%;
   91                 }
   92             }
   93         }
   94 
   95         #filmstripLocalScreenShare {
   96             align-self: initial;
   97             margin-bottom: 5px;
   98             display: flex;
   99             flex-direction: column-reverse;
  100             height: auto;
  101             justify-content: flex-start;
  102             width: 100%;
  103 
  104             #filmstripLocalScreenShareThumbnail {
  105                 width: calc(100% - 15px);
  106 
  107                 .videocontainer {
  108                     height: 0px;
  109                     width: 100%;
  110                 }
  111             }
  112         }
  113 
  114         /**
  115          * Remove unnecessary padding that is normally used to prevent horizontal
  116          * filmstrip from overlapping the left edge of the screen.
  117          */
  118         #filmstripLocalVideo,
  119         #filmstripLocalScreenShare,
  120         .remote-videos {
  121             padding: 0;
  122         }
  123 
  124         #remoteVideos {
  125             @include minHWAutoFix();
  126 
  127             flex-direction: column;
  128             flex-grow: 1;
  129         }
  130 
  131         .resizable-filmstrip #remoteVideos .videocontainer {
  132             border-left: 0;
  133             margin: 0;
  134         }
  135 
  136         &.reduce-height {
  137             height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
  138         }
  139 
  140         .filmstrip__videos.vertical-view-grid#remoteVideos {
  141             align-items: 'center';
  142             border: 0px;
  143             padding-right: 7px;
  144 
  145             &.has-scroll {
  146                 padding-right: 0px;
  147             }
  148 
  149             .remote-videos > div {
  150                 left: 0px; // fixes an issue on FF - the div is aligned to the right by default for some reason
  151             }
  152 
  153             .videocontainer {
  154                 border: 0px;
  155                 margin: 2px;
  156             }
  157         }
  158 
  159         .remote-videos {
  160             display: flex;
  161             overscroll-behavior: contain;
  162 
  163             &.height-transition {
  164                 transition: height .3s ease-in;
  165             }
  166 
  167             & > div {
  168                 position: absolute;
  169                 transition: opacity 1s;
  170             }
  171 
  172             &.is-not-overflowing > div {
  173                 bottom: 0px;
  174             }
  175         }
  176     }
  177 }