"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7675/css/_welcome_page.scss" (24 Nov 2023, 8669 Bytes) of package /linux/misc/jitsi-meet-7675.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 "_welcome_page.scss": 7658_vs_7665.

    1 body.welcome-page {
    2     background: inherit;
    3     overflow: auto;
    4 }
    5 
    6 .welcome {
    7     background-image: $welcomePageBackground;
    8     background-color: #fff;
    9     display: flex;
   10     flex-direction: column;
   11     font-family: $welcomePageFontFamily;
   12     justify-content: space-between;
   13     min-height: 100dvh;
   14     position: relative;
   15 
   16     .header {
   17         background-image: $welcomePageHeaderBackground;
   18         background-position: $welcomePageHeaderBackgroundPosition;
   19         background-repeat: $welcomePageHeaderBackgroundRepeat;
   20         background-size: $welcomePageHeaderBackgroundSize;
   21         padding-bottom: $welcomePageHeaderPaddingBottom;
   22         background-color: #131519;
   23         overflow: hidden;
   24         position: relative;
   25 
   26         .header-container {
   27             display: $welcomePageHeaderContainerDisplay;
   28             flex-direction: column;
   29             margin: $welcomePageHeaderContainerMargin;
   30             z-index: $zindex2;
   31             align-items: center;
   32             position: relative;
   33             max-width: 688px;
   34         }
   35 
   36         .header-watermark-container {
   37             position: absolute;
   38             width: 100%;
   39             height: 100%;
   40             margin-top: calc(20px - #{$welcomePageHeaderContainerMarginTop});
   41         }
   42 
   43         .header-text-title {
   44             color: $welcomePageTitleColor;
   45             font-size: $welcomePageHeaderTextTitleFontSize;
   46             font-weight: $welcomePageHeaderTextTitleFontWeight;
   47             line-height: $welcomePageHeaderTextTitleLineHeight;
   48             margin-bottom: $welcomePageHeaderTextTitleMarginBottom;
   49             max-width: $welcomePageHeaderTitleMaxWidth;
   50             opacity: $welcomePageHeaderTextTitleOpacity;
   51             text-align: $welcomePageHeaderTextAlign;
   52         }
   53 
   54         .header-text-subtitle {
   55             color: #fff;
   56             font-size: 20px;
   57             font-weight: 600;
   58             line-height: 26px;
   59             margin: 16px 0 32px 0;
   60             text-align: $welcomePageHeaderTextAlign;
   61 
   62         }
   63 
   64         .not-allow-title-character-div {
   65             color: #f03e3e;
   66             background-color: #fff;
   67             font-size: 12px;
   68             font-weight: 600;
   69             margin: 10px 0px 5px 0px;
   70             text-align: $welcomePageHeaderTextAlign;
   71             border-radius: 5px;
   72             padding: 5px;
   73             .not-allow-title-character-text {
   74                 float: right;
   75                 line-height: 1.9;
   76             };
   77             .jitsi-icon {
   78                 margin-right: 9px;
   79                 float: left;
   80 
   81 
   82                 svg {
   83                     fill:#f03e3e;
   84 
   85                     & > *:first-child {
   86                         fill: none !important;
   87                     }
   88                 }
   89             }
   90 
   91         }
   92 
   93         .insecure-room-name-warning {
   94             align-items: center;
   95             color: rgb(215, 121, 118);
   96             font-weight: 600;
   97             display: flex;
   98             flex-direction: row;
   99             margin-top: 15px;
  100             max-width: 480px;
  101             width: $welcomePageEnterRoomWidth;
  102 
  103             .jitsi-icon {
  104                 margin-right: 15px;
  105 
  106                 svg {
  107                     fill: rgb(215, 121, 118);
  108 
  109                     & > *:first-child {
  110                         fill: none !important;
  111                     }
  112                 }
  113             }
  114         }
  115 
  116         ::placeholder {
  117             color: #253858;
  118         }
  119 
  120         #enter_room {
  121             display: $welcomePageEnterRoomDisplay;
  122             align-items: center;
  123             max-width: 480px;
  124             width: $welcomePageEnterRoomWidth;
  125             z-index: $zindex2;
  126             height: fit-content;
  127 
  128             .join-meeting-container {
  129                 margin: $welcomePageEnterRoomMargin;
  130                 padding: $welcomePageEnterRoomPadding;
  131                 border-radius: 4px;
  132                 background-color: #fff;
  133                 display: flex;
  134                 width: 100%;
  135                 text-align: left;
  136                 color: #253858;
  137             }
  138 
  139             .enter-room-input-container {
  140                 flex-grow: 1;
  141                 padding-right: 4px;
  142 
  143                 .enter-room-input {
  144                     border-radius: 4px;
  145                     border: 0;
  146                     background: #fff;
  147                     display: inline-block;
  148                     height: 50px;
  149                     width: 100%;
  150                     font-size: 14px;
  151                     padding-left: 10px;
  152 
  153                     &.focus-visible {
  154                         outline: auto 2px #005fcc;
  155                     }
  156                 }
  157             }
  158 
  159         }
  160 
  161         #moderated-meetings {
  162             max-width: calc(100% - 40px);
  163             padding: 16px 0 0;
  164             width: $welcomePageEnterRoomWidth;
  165             text-align: center;
  166 
  167             a {
  168                 color: inherit;
  169                 font-weight: 600;
  170             }
  171         }
  172     }
  173 
  174     .tab-container {
  175         font-size: 16px;
  176         position: relative;
  177         text-align: left;
  178         display: $welcomePageTabContainerDisplay;
  179         flex-direction: column;
  180 
  181         .tab-content{
  182             display: $welcomePageTabContentDisplay;
  183             height: 250px;
  184             margin: 5px 0px;
  185             overflow: hidden;
  186             flex-grow: 1;
  187             position: relative;
  188         }
  189 
  190         .tab-buttons {
  191             background-color: #c7ddff;
  192             border-radius: 6px;
  193             color: #0163FF;
  194             font-size: 14px;
  195             line-height: 18px;
  196             margin: 4px;
  197             display: $welcomePageTabButtonsDisplay;
  198 
  199             [role="tab"] {
  200                 background-color: #c7ddff;
  201                 border-radius: 7px;
  202                 cursor: pointer;
  203                 display: $welcomePageTabDisplay;
  204                 flex-grow: 1;
  205                 margin: 2px;
  206                 padding: 7px 0;
  207                 text-align: center;
  208                 color: inherit;
  209                 border: 0;
  210 
  211                 &[aria-selected="true"] {
  212                     background-color: #FFF;
  213                 }
  214             }
  215 
  216         }
  217     }
  218 
  219     .welcome-page-button {
  220         border: 0;
  221         font-size: 14px;
  222         background: #0074E0;
  223         border-radius: 3px;
  224         color: #FFFFFF;
  225         cursor: pointer;
  226         padding: 16px 20px;
  227 
  228         &:focus-within {
  229             outline: auto 2px #022e61;
  230         }
  231     }
  232 
  233     .welcome-page-settings {
  234         background: rgba(255, 255, 255, 0.38);
  235         border-radius: 3px;
  236         color: $welcomePageDescriptionColor;
  237         padding: 4px;
  238         position: absolute;
  239         top: calc(35px - #{$welcomePageHeaderContainerMarginTop});
  240         right: 0;
  241         z-index: $zindex2;
  242 
  243         * {
  244             cursor: pointer;
  245             font-size: 32px;
  246         }
  247 
  248         .toolbox-icon {
  249             height: 24px;
  250             width: 24px;
  251         }
  252     }
  253 
  254     .welcome-watermark {
  255         position: absolute;
  256         width: 100%;
  257         height: 100%;
  258 
  259         .watermark.leftwatermark {
  260             width: $welcomePageWatermarkWidth;
  261             height: $welcomePageWatermarkHeight;
  262         }
  263     }
  264 
  265     &.without-content {
  266         .welcome-card {
  267             min-width: 500px;
  268             max-width: 580px;
  269         }
  270     }
  271 
  272     &.without-footer {
  273         justify-content: start;
  274     }
  275 
  276     .welcome-cards-container {
  277         color:#131519;
  278         padding-top: 40px;
  279     }
  280 
  281     .welcome-card-column {
  282         display: flex;
  283         justify-content: center;
  284         flex-direction: column;
  285         align-items: center;
  286         max-width: 688px;
  287         margin: auto;
  288 
  289         > div {
  290             margin-bottom: 16px;
  291         }
  292     }
  293 
  294     .welcome-card-text {
  295         padding: 32px;
  296     }
  297 
  298     .welcome-card {
  299         width: 100%;
  300         border-radius: 8px;
  301 
  302         &--dark {
  303             background: #444447;
  304             color: #fff;
  305         }
  306 
  307         &--blue {
  308             background: #D5E5FF;
  309         }
  310 
  311         &--grey {
  312             background: #F2F3F4;
  313         }
  314     }
  315 
  316     .welcome-footer {
  317         background: #131519;
  318         color: #fff;
  319         margin-top: 40px;
  320         position: relative;
  321     }
  322 
  323     .welcome-footer-centered {
  324         max-width: 688px;
  325         margin: 0 auto;
  326     }
  327 
  328     .welcome-footer-padded {
  329         padding: 0px 16px;
  330     }
  331 
  332     .welcome-footer-row-block {
  333         display: flex;
  334         justify-content: space-between;
  335         align-items: center;
  336         border-bottom: 1px solid #424447;
  337 
  338         &:last-child {
  339             border-bottom: none;
  340         }
  341     }
  342 
  343     .welcome-footer--row-1 {
  344         padding: 40px 0 24px 0;
  345     }
  346 
  347     .welcome-footer-row-1-text {
  348         max-width: 200px;
  349         margin-right: 16px;
  350     }
  351 }