"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7305/css/premeeting/_lobby.scss" (26 May 2023, 4426 Bytes) of package /linux/misc/jitsi-meet-7305.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 "_lobby.scss": jitsi-meet_8319_vs_jitsi-meet_8615.

    1 .lobby-screen {
    2     font-size: 16px;
    3     font-weight: 400;
    4     line-height: 26px;
    5 
    6     &-content {
    7         align-items: center;
    8         display: flex;
    9         flex-direction: column;
   10 
   11         .spinner {
   12             margin: 8px;
   13         }
   14 
   15         .lobby-chat-container {
   16             background-color: $chatBackgroundColor;
   17             width: 100%;
   18             height: 314px;
   19             display: flex;
   20             flex-direction: column;
   21             align-items: stretch;
   22             margin-bottom: 16px;
   23             border-radius: 5px;
   24             .lobby-chat-header {
   25                 display: none;
   26             }
   27         }
   28 
   29         .joining-message {
   30             color: white;
   31             margin: 24px auto;
   32             text-align: center;
   33         }
   34 
   35         .open-chat-button {
   36             display: none;
   37         }
   38     }
   39 }
   40 
   41 #lobby-section {
   42     display: flex;
   43     flex-direction: column;
   44 
   45     .description {
   46         font-size: 13px;
   47     }
   48 
   49     .control-row {
   50         display: flex;
   51         flex-direction: row;
   52         justify-content: space-between;
   53         margin-top: 15px;
   54 
   55         label {
   56             font-size: 14px;
   57             font-weight: bold;
   58         }
   59     }
   60 }
   61 
   62 #notification-participant-list {
   63     background-color: $newToolbarBackgroundColor;
   64     border: 1px solid rgba(255, 255, 255, .4);
   65     border-radius: 8px;
   66     left: 0;
   67     margin: 20px;
   68     max-height: 600px;
   69     overflow: hidden;
   70     overflow-y: auto;
   71     position: fixed;
   72     top: 30px;
   73     z-index: $toolbarZ + 1;
   74 
   75     &:empty {
   76         border: none;
   77     }
   78 
   79     &.toolbox-visible {
   80         // Same as toolbox subject position
   81         top: 120px;
   82     }
   83 
   84     &.avoid-chat {
   85         left: 315px;
   86     }
   87 
   88     .title {
   89         background-color: rgba(0, 0, 0, .2);
   90         font-size: 1.2em;
   91         padding: 15px
   92     }
   93 
   94     button {
   95         align-self: stretch;
   96         margin-bottom: 8px 0;
   97         padding: 12px;
   98         transition: .2s transform ease;
   99 
  100         &:disabled {
  101             opacity: .5;
  102         }
  103 
  104         &:hover {
  105             transform: scale(1.05);
  106 
  107             &:disabled {
  108                 transform: none;
  109             }
  110         }
  111 
  112         &.borderLess {
  113             background-color: transparent;
  114             border-width: 0;
  115         }
  116 
  117         &.primary {
  118             background-color: rgb(3, 118, 218);
  119             border-width: 0;
  120         }
  121     }
  122 }
  123 
  124 .knocking-participants-container {
  125     list-style-type: none;
  126     padding: 0 15px 15px 15px;
  127 }
  128 
  129 .knocking-participant {
  130     align-items: center;
  131     display: flex;
  132     flex-direction: row;
  133     margin: 8px 0;
  134 
  135     .details {
  136         display: flex;
  137         flex: 1;
  138         flex-direction: column;
  139         justify-content: space-evenly;
  140         margin: 0 30px 0 10px;
  141     }
  142 
  143     button {
  144         align-self: unset;
  145         margin: 0 5px;
  146     }
  147 }
  148 
  149 @media (max-width: 300px) {
  150     #knocking-participant-list {
  151         margin: 0;
  152         text-align: center;
  153         width: 100%;
  154 
  155         .avatar {
  156             display: none;
  157         }
  158     }
  159 
  160     .knocking-participant {
  161         flex-direction: column;
  162 
  163         .details {
  164             margin: 0;
  165         }
  166     }
  167 }
  168 
  169 @media (max-width: 1000px) {
  170     .lobby-screen-content {
  171 
  172         .lobby-chat-container {
  173             position: fixed;
  174             top: 0;
  175             left: 0;
  176             width: 100%;
  177             height: 100%;
  178             z-index: 255;
  179 
  180             &.hidden {
  181                 display: none;
  182             }
  183 
  184             .lobby-chat-header {
  185                 display: flex;
  186                 flex-direction: row;
  187                 padding-top: 20px;
  188                 padding-left: 16px;
  189                 padding-right: 16px;
  190 
  191                 .title {
  192                     flex: 1;
  193                     color: #fff;
  194                     font-size: 20px;
  195                     font-weight: 600;
  196                     line-height: 28px;
  197                     letter-spacing: -1.2%;
  198                 }
  199             }
  200         }
  201 
  202         .open-chat-button {
  203             display: block;
  204         }
  205     }
  206 }
  207 
  208 .lobby-button-margin {
  209     margin-bottom: 16px;
  210 }
  211 
  212 .lobby-prejoin-error {
  213     background-color: #E04757;
  214     border-radius: 6px;
  215     box-sizing: border-box;
  216     color: white;
  217     font-size: 12px;
  218     line-height: 16px;
  219     margin-bottom: 16px;
  220     margin-top: -8px;
  221     padding: 4px;
  222     text-align: center;
  223     width: 100%;
  224 }
  225 
  226 .lobby-prejoin-input {
  227     margin-bottom: 16px;
  228     width: 100%;
  229 
  230     & input {
  231         text-align: center;
  232     }
  233 }