"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-5079/css/filmstrip/_horizontal_filmstrip.scss" (17 Jun 2021, 2987 Bytes) of package /linux/misc/jitsi-meet-5079.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 %align-right {
    2     @include flex();
    3     flex-direction: row-reverse;
    4     flex-wrap: nowrap;
    5     justify-content: flex-start;
    6 }
    7 
    8 .horizontal-filmstrip .filmstrip {
    9     bottom: 0;
   10     right: 0;
   11     padding: 10px 5px;
   12     @extend %align-right;
   13     transition: bottom .3s;
   14     z-index: $filmstripVideosZ;
   15     box-sizing: border-box;
   16     width: 100%;
   17     position: fixed;
   18 
   19     /*
   20      * Firefox sets flex items to min-height: auto and min-width: auto,
   21      * preventing flex children from shrinking like they do on other browsers.
   22      * Setting min-height and min-width 0 is a workaround for the issue so
   23      * Firefox behaves like other browsers.
   24      * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
   25      */
   26      @mixin minHWAutoFix() {
   27         min-height: 0;
   28         min-width: 0;
   29     }
   30 
   31     &.reduce-height {
   32         bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight});
   33     }
   34 
   35     &__videos {
   36         @extend %align-right;
   37         position:relative;
   38         padding: 0;
   39         /* The filmstrip should not be covered by the left toolbar. */
   40         bottom: 0;
   41         width:auto;
   42         overflow: visible !important;
   43 
   44         &#remoteVideos {
   45             border: $thumbnailsBorder solid transparent;
   46             transition: bottom 2s;
   47             flex-grow: 1;
   48             @include minHWAutoFix()
   49         }
   50 
   51         /**
   52          * The local video identifier.
   53          */
   54         &#filmstripLocalVideo {
   55             align-self: flex-end;
   56             display: block;
   57             margin-bottom: 8px;
   58         }
   59 
   60         &.hidden {
   61             bottom: calc(-196px - #{$newToolbarSizeWithPadding});
   62         }
   63 
   64         .remote-videos-container {
   65             display: flex;
   66         }
   67     }
   68 
   69     .remote-videos-container {
   70         transition: opacity 1s;
   71     }
   72 
   73     &.hide-videos {
   74         .remote-videos-container {
   75             opacity: 0;
   76             pointer-events: none;
   77         }
   78     }
   79 
   80     #filmstripRemoteVideos {
   81         @include minHWAutoFix();
   82 
   83         display: flex;
   84         flex: 1;
   85         width: auto;
   86         justify-content: flex-end;
   87         flex-direction: row;
   88 
   89         #filmstripRemoteVideosContainer {
   90             flex-direction: row-reverse;
   91             /**
   92              * Add padding as a hack for Firefox not to show scrollbars when
   93              * unnecessary.
   94              */
   95             padding: 1px 0;
   96             overflow-y: hidden;
   97             overflow-x: scroll;
   98         }
   99     }
  100 
  101     .videocontainer {
  102         margin-bottom: 10px;
  103     }
  104 }
  105 
  106 
  107 /**
  108  * Workarounds for Edge and Firefox not handling scrolling properly with
  109  * flex-direction: row-reverse.
  110  */
  111  @mixin undoRowReverseVideos() {
  112     .horizontal-filmstrip {
  113         #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
  114             flex-direction: row;
  115         }
  116     }
  117 }
  118 
  119 /** Firefox detection hack **/
  120 @-moz-document url-prefix() {
  121     @include undoRowReverseVideos();
  122 }
  123 
  124 /** Edge detection hack **/
  125 @supports (-ms-ime-align:auto) {
  126     @include undoRowReverseVideos();
  127 }