"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-5079/css/filmstrip/_tile_view.scss" (17 Jun 2021, 3199 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. See also the last Fossies "Diffs" side-by-side code changes report for "_tile_view.scss": 5062_vs_5064.

    1 /**
    2  * CSS styles that are specific to the filmstrip that shows the thumbnail tiles.
    3  */
    4 .tile-view {
    5     /**
    6      * Add a border around the active speaker to make the thumbnail easier to
    7      * see.
    8      */
    9     .active-speaker {
   10         box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px $videoThumbnailSelected;
   11     }
   12 
   13     #filmstripRemoteVideos {
   14         align-items: center;
   15         box-sizing: border-box;
   16         display: flex;
   17         flex-direction: column;
   18         height: 100%;
   19         width: 100%;
   20     }
   21 
   22     .filmstrip__videos .videocontainer {
   23         &:not(.active-speaker),
   24         &:hover:not(.active-speaker) {
   25             border: none;
   26             box-shadow: none;
   27         }
   28     }
   29 
   30     #remoteVideos {
   31         /**
   32          * Height is modified with an inline style in horizontal filmstrip mode
   33          * so !important is used to override that.
   34          */
   35         height: 100% !important;
   36         width: 100%;
   37     }
   38 
   39     .filmstrip {
   40         align-items: center;
   41         display: flex;
   42         height: 100%;
   43         justify-content: center;
   44         left: 0;
   45         position: absolute;
   46         top: 0;
   47         width: 100%;
   48 
   49         @media (min-width: 581px) {
   50             &.shift-right {
   51                 margin-left: $sidebarWidth;
   52                 width: calc(100% - #{$sidebarWidth});
   53             }
   54         }
   55     }
   56 
   57     /**
   58      * Regardless of the user setting, do not let the filmstrip be in a hidden
   59      * state.
   60      */
   61     .filmstrip__videos.hidden {
   62         display: block;
   63     }
   64 
   65     #filmstripRemoteVideos {
   66         box-sizing: border-box;
   67 
   68         /**
   69          * Allow vertical scrolling of the thumbnails.
   70          */
   71         overflow-x: hidden;
   72         overflow-y: auto;
   73     }
   74 
   75     /**
   76      * The size of the thumbnails should be set with javascript, based on
   77      * desired column count and window width. The rows are created using flex
   78      * and allowing the thumbnails to wrap.
   79      */
   80     #filmstripRemoteVideosContainer {
   81         align-content: center;
   82         align-items: center;
   83         box-sizing: border-box;
   84         display: flex;
   85         flex-wrap: wrap;
   86         flex-shrink: 0;
   87         margin-top: auto;
   88         margin-bottom: auto;
   89         justify-content: center;
   90 
   91         .videocontainer {
   92             border: 0;
   93             box-sizing: border-box;
   94             display: block;
   95             margin: 2px;
   96         }
   97 
   98         video {
   99             object-fit: contain;
  100         }
  101 
  102         /**
  103          * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants.
  104          */
  105         @media only screen and (max-width: 500px) {
  106             video {
  107                 object-fit: cover;
  108             }
  109         }
  110     }
  111 
  112     .has-overflow#filmstripRemoteVideosContainer {
  113         align-content: baseline;
  114     }
  115 
  116     .has-overflow .videocontainer {
  117         align-self: baseline;
  118     }
  119 }
  120 
  121 .shift-right #filmstripRemoteVideosContainer {
  122     /**
  123      * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants,
  124      * from which we subtract the chat size.
  125      */
  126     @media only screen and (max-width: calc(500px + #{$sidebarWidth})) {
  127         video {
  128             object-fit: cover;
  129         }
  130     }
  131 }