"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7553/css/filmstrip/_horizontal_filmstrip.scss" (27 Sep 2023, 2076 Bytes) of package /linux/misc/jitsi-meet-7553.tar.gz:

    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     padding: 10px 5px;
   10     @extend %align-right;
   11     z-index: $filmstripVideosZ;
   12     box-sizing: border-box;
   13     width: 100%;
   14     position: fixed;
   15 
   16     /*
   17      * Firefox sets flex items to min-height: auto and min-width: auto,
   18      * preventing flex children from shrinking like they do on other browsers.
   19      * Setting min-height and min-width 0 is a workaround for the issue so
   20      * Firefox behaves like other browsers.
   21      * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
   22      */
   23      @mixin minHWAutoFix() {
   24         min-height: 0;
   25         min-width: 0;
   26     }
   27 
   28     &.reduce-height {
   29         bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight});
   30     }
   31 
   32     &__videos {
   33         position:relative;
   34         padding: 0;
   35         /* The filmstrip should not be covered by the left toolbar. */
   36         bottom: 0;
   37         width:auto;
   38 
   39         &#remoteVideos {
   40             border: $thumbnailsBorder solid transparent;
   41             transition: bottom 2s;
   42             flex-grow: 1;
   43             display: flex;
   44             flex-direction: row-reverse;
   45             @include minHWAutoFix()
   46         }
   47 
   48         /**
   49          * The local video identifier.
   50          */
   51         &#filmstripLocalVideo,
   52         &#filmstripLocalScreenShare {
   53             align-self: flex-end;
   54             display: block;
   55             margin-bottom: 8px;
   56         }
   57 
   58         &.hidden {
   59             bottom: calc(-196px - #{$newToolbarSizeWithPadding} + 50px);
   60         }
   61     }
   62 
   63     .remote-videos {
   64         overscroll-behavior: contain;
   65 
   66         & > div {
   67             transition: opacity 1s;
   68             position: absolute;
   69         }
   70 
   71         &.is-not-overflowing > div {
   72             right: 2px;
   73         }
   74     }
   75 
   76     &.hide-videos {
   77         .remote-videos  {
   78             & > div {
   79                 opacity: 0;
   80                 pointer-events: none;
   81             }
   82         }
   83     }
   84 
   85     .videocontainer {
   86         margin-bottom: 10px;
   87     }
   88 }
   89