"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7561/css/filmstrip/_tile_view.scss" (29 Sep 2023, 2691 Bytes) of package /linux/misc/jitsi-meet-7561.tar.gz:

    1 /**
    2  * CSS styles that are specific to the filmstrip that shows the thumbnail tiles.
    3  */
    4 .tile-view {
    5     .remote-videos {
    6         align-items: center;
    7         box-sizing: border-box;
    8         overscroll-behavior: contain;
    9     }
   10 
   11     .filmstrip__videos .videocontainer {
   12         &:not(.active-speaker),
   13         &:hover:not(.active-speaker) {
   14             border: none;
   15             box-shadow: none;
   16         }
   17     }
   18 
   19     #remoteVideos {
   20         /**
   21          * Height is modified with an inline style in horizontal filmstrip mode
   22          * so !important is used to override that.
   23          */
   24         height: 100% !important;
   25         width: 100%;
   26         display: flex;
   27         justify-content: center;
   28         align-items: center;
   29         transition: margin-bottom .3s ease-in;
   30     }
   31 
   32     .filmstrip {
   33         align-items: center;
   34         display: flex;
   35         height: 100%;
   36         justify-content: center;
   37         left: 0;
   38         position: absolute;
   39         top: 0;
   40         width: 100%;
   41 
   42         &.collapse {
   43             #remoteVideos {
   44                 height: calc(100% - #{$newToolbarSizeMobile}) !important;
   45                 margin-bottom: $newToolbarSizeMobile;
   46             }
   47 
   48             .remote-videos {
   49                 // !important is needed here as overflow is set via element.style in a FixedSizeGrid.
   50                 overflow: hidden auto !important;
   51             }
   52         }
   53     }
   54 
   55     /**
   56      * Regardless of the user setting, do not let the filmstrip be in a hidden
   57      * state.
   58      */
   59     .filmstrip__videos.hidden {
   60         display: block;
   61     }
   62 
   63     .filmstrip__videos.has-scroll {
   64         padding-left: 7px;
   65     }
   66 
   67     .remote-videos {
   68         box-sizing: border-box;
   69 
   70 
   71         /**
   72         * The size of the thumbnails should be set with javascript, based on
   73         * desired column count and window width. The rows are created using flex
   74         * and allowing the thumbnails to wrap.
   75         */
   76         & > div {
   77             align-content: center;
   78             align-items: center;
   79             box-sizing: border-box;
   80             display: flex;
   81             margin-top: auto;
   82             margin-bottom: auto;
   83             justify-content: center;
   84 
   85             .videocontainer {
   86                 border: 0;
   87                 box-sizing: border-box;
   88                 display: block;
   89                 margin: 2px;
   90             }
   91         }
   92     }
   93 }
   94 
   95 .shift-right .remote-videos > div {
   96     /**
   97      * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants,
   98      * from which we subtract the chat size.
   99      */
  100     @media only screen and (max-width: calc(500px + #{$sidebarWidth})) {
  101         video {
  102             object-fit: cover;
  103         }
  104     }
  105 }