"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-5086/css/filmstrip/_vertical_filmstrip.scss" (22 Jun 2021, 5000 Bytes) of package /linux/misc/jitsi-meet-5086.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 .vertical-filmstrip .filmstrip {
    2     &.hide-videos {
    3         .remote-videos-container {
    4             opacity: 0;
    5             pointer-events: none;
    6         }
    7     }
    8 
    9     /*
   10      * Firefox sets flex items to min-height: auto and min-width: auto,
   11      * preventing flex children from shrinking like they do on other browsers.
   12      * Setting min-height and min-width 0 is a workaround for the issue so
   13      * Firefox behaves like other browsers.
   14      * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
   15      */
   16     @mixin minHWAutoFix() {
   17         min-height: 0;
   18         min-width: 0;
   19     }
   20 
   21     @extend %align-right;
   22     align-items: flex-end;
   23     bottom: 0;
   24     box-sizing: border-box;
   25     display: flex;
   26     flex-direction: column-reverse;
   27     height: 100%;
   28     width: 100%;
   29     padding: ($desktopAppDragBarHeight - 5px) 5px 10px;
   30     /**
   31      * fixed positioning is necessary for remote menus and tooltips to pop
   32      * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
   33      * a library called popper which will position its elements fixed if
   34      * any parent is also fixed.
   35      */
   36     position: fixed;
   37     top: 0;
   38     transition: height .3s ease-in;
   39     right: 0;
   40     z-index: $filmstripVideosZ;
   41 
   42     &.reduce-height {
   43         height: calc(100% - #{$newToolbarSizeWithPadding});
   44     }
   45 
   46     /**
   47      * Hide videos by making them slight to the right.
   48      */
   49     .filmstrip__videos {
   50         @extend %align-right;
   51         bottom: 0;
   52         padding: 0;
   53         position:relative;
   54         right: 0;
   55         width: auto;
   56 
   57         &.hidden {
   58             bottom: auto;
   59             right: -196px;
   60         }
   61 
   62         /**
   63          * An id selector is used to match id specificity with existing
   64          * filmstrip styles.
   65          */
   66         &#remoteVideos {
   67             border: $thumbnailsBorder solid transparent;
   68             padding-left: 0;
   69             transition: right 2s;
   70             width: 100%;
   71         }
   72     }
   73 
   74     /**
   75      * Re-styles the local Video to better fit vertical filmstrip layout.
   76      */
   77     #filmstripLocalVideo {
   78         align-self: initial;
   79         bottom: 5px;
   80         display: flex;
   81         flex-direction: column-reverse;
   82         height: auto;
   83         justify-content: flex-start;
   84 
   85         #filmstripLocalVideoThumbnail {
   86             width: calc(100% - 15px);
   87 
   88             .videocontainer {
   89                 height: 0px;
   90                 width: 100%;
   91     }
   92         }
   93 
   94     }
   95 
   96     /**
   97      * Remove unnecssary padding that is normally used to prevent horizontal
   98      * filmstrip from overlapping the left edge of the screen.
   99      */
  100     #filmstripLocalVideo,
  101     #filmstripRemoteVideos {
  102         padding: 0;
  103     }
  104 
  105     #filmstripRemoteVideos {
  106         @include minHWAutoFix();
  107 
  108         display: flex;
  109         flex: 1;
  110         flex-direction: column-reverse;
  111         height: auto;
  112         overflow-x: hidden;
  113         overflow-y: scroll;
  114 
  115         #filmstripRemoteVideosContainer {
  116             @include minHWAutoFix();
  117             flex-direction: column-reverse;
  118             overflow: visible;
  119             width: calc(100% - 8px); // 8px for margin + border of the thumbnails
  120 
  121             .videocontainer {
  122                 height: 0px;
  123                 width: 100%;
  124             }
  125         }
  126     }
  127 
  128     #remoteVideos {
  129         @include minHWAutoFix();
  130 
  131         flex-direction: column;
  132         flex-grow: 1;
  133     }
  134 
  135     .remote-videos-container {
  136         display: flex;
  137         transition: opacity 1s;
  138     }
  139 
  140     .hide-scrollbar#filmstripRemoteVideos {
  141         margin-right: 7px; // Scrollbar size
  142         &::-webkit-scrollbar {
  143             display: none;
  144         }
  145     }
  146 }
  147 
  148 /**
  149  * Workarounds for Edge and Firefox not handling scrolling properly with
  150  * flex-direction: column-reverse. The remove videos in filmstrip should
  151  * start scrolling from the bottom of the filmstrip, but in those browsers the
  152  * scrolling won't happen. Per W3C spec, scrolling should happen from the
  153  * bottom. As such, use css hacks to get around the css issue, with the intent
  154  * being to remove the hacks as the spec is supported.
  155  */
  156 @mixin undoColumnReverseVideos() {
  157     .vertical-filmstrip {
  158         #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
  159             flex-direction: column;
  160         }
  161     }
  162 }
  163 
  164 /**
  165  * FF does not include the scroll width when calculating the size of the content. That's why we need to include
  166  * ourselves the width of the scroll so that the remote videos are aligned with the local one.
  167  */
  168 @mixin filmstripSizeWithoutScroll {
  169     .vertical-filmstrip {
  170         #remoteVideos #filmstripRemoteVideos {
  171             #filmstripRemoteVideosContainer {
  172                 width: calc(100% - 15px) // 8 px - margins + border of the thumbnails; 7px - for the scroll
  173             }
  174         }
  175     }
  176 }
  177 
  178 /** Firefox detection hack **/
  179 @-moz-document url-prefix() {
  180     @include undoColumnReverseVideos();
  181     @include filmstripSizeWithoutScroll();
  182 }
  183 
  184 /** Edge detection hack **/
  185 @supports (-ms-ime-align:auto) {
  186     @include undoColumnReverseVideos();
  187 }