"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-6193/css/_toolbars.scss" (20 May 2022, 3712 Bytes) of package /linux/misc/jitsi-meet-6193.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 "_toolbars.scss": jitsi-meet_7001_vs_jitsi-meet_7210.

    1 /**
    2  * Round badge.
    3  */
    4 .badge-round {
    5     background-color: $toolbarBadgeBackground;
    6     border-radius: 50%;
    7     box-sizing: border-box;
    8     color: $toolbarBadgeColor;
    9     // Do not inherit the font-family from the toolbar button, because it's an
   10     // icon style.
   11     font-family: $baseFontFamily;
   12     font-size: 9px;
   13     font-weight: 700;
   14     line-height: 13px;
   15     min-width: 13px;
   16     overflow: hidden;
   17     text-align: center;
   18     text-overflow: ellipsis;
   19     vertical-align: middle;
   20 }
   21 
   22 /**
   23  * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
   24  */
   25 .new-toolbox {
   26     bottom: calc((#{$newToolbarSize} * 2) * -1);
   27     left: 0;
   28     position: absolute;
   29     right: 0;
   30     transition: bottom .3s ease-in;
   31     width: 100%;
   32     pointer-events: none;
   33     z-index: $toolbarZ + 2;
   34 
   35     &.visible {
   36         bottom: 0;
   37     }
   38 
   39     &.no-buttons {
   40         display: none;
   41     }
   42 }
   43 
   44 .toolbox-content {
   45     align-items: center;
   46     box-sizing: border-box;
   47     display: flex;
   48     margin-bottom: 16px;
   49     position: relative;
   50     z-index: $toolbarZ;
   51     pointer-events: none;
   52 
   53     .button-group-center,
   54     .button-group-left,
   55     .button-group-right {
   56         display: flex;
   57         width: 33%;
   58     }
   59 
   60     .button-group-center {
   61         justify-content: center;
   62     }
   63 
   64     .button-group-right {
   65         justify-content: flex-end;
   66     }
   67 
   68     .toolbox-button-wth-dialog {
   69         display: inline-block;
   70     }
   71 }
   72 
   73 .toolbar-button-with-badge {
   74     display: inline-block;
   75     position: relative;
   76 
   77     .badge-round {
   78         bottom: -5px;
   79         font-size: 12px;
   80         line-height: 20px;
   81         min-width: 20px;
   82         pointer-events: none;
   83         position: absolute;
   84         right: -5px;
   85     }
   86 }
   87 
   88 .toolbox-content-wrapper {
   89     display: flex;
   90     flex-direction: column;
   91     margin: 0 auto;
   92     max-width: 100%;
   93     pointer-events: all;
   94     border-radius: 6px;
   95 
   96     .toolbox-content-items {
   97         @include ltr;
   98     }
   99 }
  100 
  101 .toolbox-content-wrapper::after {
  102     content: '';
  103     background: $newToolbarBackgroundColor;
  104     padding-bottom: env(safe-area-inset-bottom, 0);
  105 }
  106 
  107 .beta-tag {
  108     background: #36383C;
  109     border-radius: 3px;
  110     color: #fff;
  111     font-size: 12px;
  112     margin-left: 8px;
  113     padding: 0 4px;
  114     text-transform: uppercase;
  115 }
  116 
  117 .overflow-menu-hr {
  118     border-top: 1px solid #4C4D50;
  119     border-bottom: 0;
  120     margin: 8px 0;
  121 }
  122 
  123 .hangup-button {
  124     background-color: $hangupColor;
  125 
  126     @media (hover: hover) and (pointer: fine) {
  127         &:hover {
  128             background-color: $hangupHoverColor;
  129         }
  130     }
  131 
  132     svg {
  133         fill: #fff;
  134     }
  135 }
  136 
  137 .profile-button-avatar {
  138     align-items: center;
  139 }
  140 
  141 /**
  142  * START of fade in animation for main toolbar
  143  */
  144 .fadeIn {
  145     opacity: 1;
  146 
  147     @include transition(all .3s ease-in);
  148 }
  149 
  150 .fadeOut {
  151     opacity: 0;
  152 
  153     @include transition(all .3s ease-out);
  154 }
  155 
  156 /**
  157  * Audio and video buttons do not have toggled state.
  158  */
  159 .audio-preview,
  160 .video-preview {
  161     .toolbox-icon.toggled {
  162         background: none;
  163 
  164         &:hover {
  165             background: $newToolbarButtonHoverColor;
  166         }
  167     }
  168 
  169 }
  170 
  171 /**
  172  * On small mobile devices make the toolbar full width and pad the invite prompt.
  173  */
  174 .toolbox-content-mobile {
  175     @media (max-width: 500px) {
  176         margin-bottom: 0;
  177 
  178         .toolbox-content-wrapper {
  179             width: 100%;
  180         }
  181 
  182         .toolbox-content-items {
  183             @include ltr;
  184             border-radius: 0;
  185             display: flex;
  186             justify-content: space-evenly;
  187             padding: 8px 0;
  188             width: 100%;
  189         }
  190 
  191         .invite-more-container {
  192             margin: 0 16px 8px;
  193         }
  194 
  195         .invite-more-container.elevated {
  196             margin-bottom: 52px;
  197         }
  198     }
  199 }