"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-5079/css/_premeeting-screens.scss" (17 Jun 2021, 6068 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 "_premeeting-screens.scss": 5062_vs_5064.

    1 /**
    2  * Shared style for full screen local track based dialogs/modals.
    3  */
    4  .premeeting-screen {
    5      position: absolute;
    6      left: 0;
    7      right: 0;
    8      top: 0;
    9      bottom: 0;
   10   }
   11 
   12  .premeeting-screen {
   13     align-items: stretch;
   14     background: radial-gradient(50% 50% at 50% 50%, #2A3A4B 20.83%, #1E2A36 100%);
   15     display: flex;
   16     flex-direction: column;
   17     font-size: 1.3em;
   18     z-index: $toolbarZ + 1;
   19 
   20     &-avatar {
   21         background-color: #A4B8D1;
   22         margin-bottom: 24px;
   23 
   24         text {
   25             fill: black;
   26             font-size: 26px;
   27             font-weight: 400;
   28         }
   29     }
   30 
   31     .action-btn {
   32         border-radius: 3px;
   33         color: #fff;
   34         cursor: pointer;
   35         display: inline-block;
   36         font-size: 15px;
   37         line-height: 24px;
   38         margin-top: 16px;
   39         padding: 7px 16px;
   40         position: relative;
   41         text-align: center;
   42         width: 286px;
   43 
   44         &.primary {
   45             background: #0376DA;
   46             border: 1px solid #0376DA;
   47         }
   48 
   49         &.secondary {
   50             background: transparent;
   51             border: 1px solid #5E6D7A;
   52         }
   53 
   54         &.text {
   55             width: auto;
   56             font-size: 13px;
   57             margin: 0;
   58             padding: 0;
   59         }
   60 
   61         &.disabled {
   62             background: #5E6D7A;
   63             border: 1px solid #5E6D7A;
   64             color: #AFB6BC;
   65             cursor: initial;
   66 
   67             .icon {
   68                 & > svg {
   69                     fill: #AFB6BC;
   70                 }
   71             }
   72         }
   73 
   74         .options {
   75             border-radius: 3px;
   76             align-items: center;
   77             display: flex;
   78             height: 100%;
   79             justify-content: center;
   80             position: absolute;
   81             right: 0;
   82             top: 0;
   83             width: 36px;
   84 
   85             &:hover {
   86                 background-color: #0262B6;
   87             }
   88 
   89             svg {
   90                 pointer-events: none;
   91             }
   92         }
   93     }
   94 
   95     .content {
   96         align-items: center;
   97         display: flex;
   98         flex: 1;
   99         flex-direction: column;
  100         justify-content: flex-end;
  101         padding-bottom: 24px;
  102         z-index: $toolbarZ + 2;
  103 
  104         .title {
  105             color: #fff;
  106             font-size: 24px;
  107             line-height: 32px;
  108             margin-bottom: 16px;
  109         }
  110 
  111         .copy-meeting {
  112             align-items: center;
  113             cursor: pointer;
  114             color: #fff;
  115             display: flex;
  116             flex-direction: column;
  117             font-size: 15px;
  118             font-weight: 300;
  119             justify-content: center;
  120             line-height: 24px;
  121             margin-bottom: 16px;
  122 
  123             .url {
  124                 background: rgba(28, 32, 37, 0.5);
  125                 border-radius: 4px;
  126                 display: flex;
  127                 padding: 8px 10px;
  128                 transition: background 0.16s ease-out;
  129 
  130                 &:hover {
  131                     background: #1C2025;
  132                 }
  133 
  134                 &.done {
  135                     background: #31B76A;
  136                 }
  137 
  138                 .jitsi-icon {
  139                     margin-left: 10px;
  140                 }
  141             }
  142             .copy-button{
  143                 width: 298px;
  144              }
  145 
  146             .copy-meeting-text {
  147                 width: 266px;
  148                 white-space: nowrap;
  149                 overflow: hidden;
  150                 text-overflow: ellipsis;
  151             }
  152 
  153             &:hover {
  154                 align-self: stretch;
  155             }
  156 
  157             textarea {
  158                 border-width: 0;
  159                 height: 0;
  160                 opacity: 0;
  161                 padding: 0;
  162                 width: 0;
  163             }
  164         }
  165 
  166         input.field {
  167             background-color: white;
  168             border: none;
  169             outline: none;
  170             border-radius: 3px;
  171             font-size: 15px;
  172             line-height: 24px;
  173             color: #1C2025;
  174             padding: 8px 0;
  175             text-align: center;
  176             width: 320px;
  177 
  178             &.error {
  179                 box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
  180             }
  181 
  182             &.focused {
  183                 box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px white;
  184             }
  185         }
  186     }
  187 
  188     .media-btn-container {
  189         display: flex;
  190         justify-content: center;
  191         margin: 24px 0 16px 0;
  192         width: 100%;
  193 
  194         &> div {
  195             margin: 0 12px;
  196         }
  197     }
  198 }
  199 
  200 #preview {
  201     height: 100%;
  202     position: absolute;
  203     width: 100%;
  204 
  205     &.no-video {
  206         background: radial-gradient(50% 50% at 50% 50%, #5B6F80 0%, #365067 100%), #FFFFFF;
  207         text-align: center;
  208     }
  209 
  210     .avatar {
  211         background: #A4B8D1;
  212         margin: 0 auto;
  213     }
  214 
  215     video {
  216         height: 100%;
  217         object-fit: cover;
  218         position: absolute;
  219         width: 100%;
  220     }
  221 }
  222 
  223 @mixin flex-centered() {
  224     align-items: center;
  225     display: flex;
  226     justify-content: center;
  227 }
  228 
  229 @mixin icon-container($bg, $fill) {
  230     .toggle-button-icon-container {
  231         background: $bg;
  232 
  233         svg {
  234             fill: $fill
  235         }
  236     }
  237 }
  238 
  239 .toggle-button {
  240     border-radius: 3px;
  241     cursor: pointer;
  242     color: #fff;
  243     font-size: 13px;
  244     height: 40px;
  245     margin: 0 auto;
  246     transition: background 0.16s ease-out;
  247     width: 320px;
  248 
  249     @include flex-centered();
  250 
  251     svg {
  252         fill: transparent;
  253     }
  254 
  255     label {
  256         cursor: pointer;
  257     }
  258 
  259     &:hover {
  260         background: rgba(255, 255, 255, 0.1);
  261 
  262         .toggle-button-icon-container {
  263             display: none;
  264         }
  265     }
  266 
  267     &-container {
  268         position: relative;
  269 
  270         @include flex-centered();
  271     }
  272 
  273     &-icon-container {
  274         border-radius: 50%;
  275         left: -22px;
  276         padding: 2px;
  277         position: absolute;
  278     }
  279 
  280     &--toggled {
  281         @include icon-container(white, #1C2025);
  282 
  283         &:hover {
  284             .toggle-button-icon-container {
  285                 display: block;
  286             }
  287         }
  288 
  289         .toggle-button-icon-container {
  290             display: block;
  291         }
  292     }
  293 }