"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-6193/css/modals/device-selection/_device-selection.scss" (20 May 2022, 3347 Bytes) of package /linux/misc/jitsi-meet-6193.tar.gz:

    1 .device-selection {
    2     .device-selectors {
    3         font-size: 14px;
    4 
    5         > div {
    6             display: block;
    7             margin-bottom: 4px;
    8         }
    9 
   10         .device-selector-icon {
   11             align-self: center;
   12             color: inherit;
   13             font-size: 20px;
   14             margin-left: 3px;
   15         }
   16 
   17         .device-selector-label {
   18             margin-bottom: 1px;
   19         }
   20 
   21         /* device-selector-trigger stylings attempt to mimic AtlasKit button */
   22         .device-selector-trigger {
   23             background-color: #0E1624;
   24             border: 1px solid #455166;
   25             border-radius: 5px;
   26             display: flex;
   27             height: 2.3em;
   28             justify-content: space-between;
   29             line-height: 2.3em;
   30             overflow: hidden;
   31             padding: 0 8px;
   32         }
   33         .device-selector-trigger-disabled {
   34             .device-selector-trigger {
   35                 color: #a5adba;
   36                 cursor: default;
   37             }
   38         }
   39 
   40         .device-selector-trigger-text {
   41             overflow: hidden;
   42             text-align: center;
   43             text-overflow: ellipsis;
   44             white-space: nowrap;
   45             width: 100%;
   46         }
   47     }
   48 
   49     .device-selection-column {
   50         box-sizing: border-box;
   51         display: inline-block;
   52         vertical-align: top;
   53 
   54         &.column-selectors {
   55             margin-left: 15px;
   56             width: 45%;
   57         }
   58 
   59         &.column-video {
   60             width: 50%;
   61         }
   62     }
   63 
   64     .device-selection-video-container {
   65         border-radius: 3px;
   66         margin-bottom: 5px;
   67 
   68         .video-input-preview {
   69             margin-top: 2px;
   70             position: relative;
   71 
   72             > video {
   73                 border-radius: 3px;
   74             }
   75 
   76             .video-input-preview-error {
   77                 color: $participantNameColor;
   78                 display: none;
   79                 left: 0;
   80                 position: absolute;
   81                 right: 0;
   82                 text-align: center;
   83                 top: 50%;
   84             }
   85 
   86             &.video-preview-has-error {
   87                 background: black;
   88 
   89                 .video-input-preview-error {
   90                     display: block;
   91                 }
   92             }
   93 
   94             .video-input-preview-display {
   95                 height: auto;
   96                 overflow: hidden;
   97                 width: 100%;
   98             }
   99         }
  100     }
  101 
  102     .audio-output-preview {
  103         font-size: 14px;
  104 
  105         a {
  106             color: #6FB1EA;
  107             cursor: pointer;
  108             text-decoration: none;
  109         }
  110 
  111         a:hover {
  112             color: #B3D4FF;
  113         }
  114     }
  115 
  116     .audio-input-preview {
  117         background: #1B2638;
  118         border-radius: 5px;
  119         height: 8px;
  120 
  121         .audio-input-preview-level {
  122             background: #75B1FF;
  123             border-radius: 5px;
  124             height: 100%;
  125             -webkit-transition: width .1s ease-in-out;
  126             -moz-transition: width .1s ease-in-out;
  127             -o-transition: width .1s ease-in-out;
  128             transition: width .1s ease-in-out;
  129         }
  130     }
  131 }
  132 
  133 .device-selection.video-hidden {
  134     display: flex;
  135     flex-direction: column;
  136     width: 100%;
  137 
  138     .column-selectors {
  139         width: 100%;
  140         margin-left: 0;
  141     }
  142 
  143     .column-video {
  144         order: 1;
  145         width: 100%;
  146         margin-top: 8px;
  147     }
  148 }