"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7309/css/_toolbars.scss" (31 May 2023, 4213 Bytes) of package /linux/misc/jitsi-meet-7309.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": 7301_vs_7304.

    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     &.shift-up {
   36         bottom: calc(((#{$newToolbarSize} + 30px) * 2) * -1);
   37 
   38         .toolbox-content {
   39             margin-bottom: 46px;
   40         }
   41     }
   42 
   43     &.visible {
   44         bottom: 0;
   45     }
   46 
   47     &.no-buttons {
   48         display: none;
   49     }
   50 }
   51 
   52 .toolbox-content {
   53     align-items: center;
   54     box-sizing: border-box;
   55     display: flex;
   56     margin-bottom: 16px;
   57     position: relative;
   58     z-index: $toolbarZ;
   59     pointer-events: none;
   60 
   61     .button-group-center,
   62     .button-group-left,
   63     .button-group-right {
   64         display: flex;
   65         width: 33%;
   66     }
   67 
   68     .button-group-center {
   69         justify-content: center;
   70     }
   71 
   72     .button-group-right {
   73         justify-content: flex-end;
   74     }
   75 
   76     .toolbox-button-wth-dialog {
   77         display: inline-block;
   78     }
   79 }
   80 
   81 .toolbar-button-with-badge {
   82     display: inline-block;
   83     position: relative;
   84 
   85     .badge-round {
   86         bottom: -5px;
   87         font-size: 12px;
   88         line-height: 20px;
   89         min-width: 20px;
   90         pointer-events: none;
   91         position: absolute;
   92         right: -5px;
   93     }
   94 }
   95 
   96 .toolbox-content-wrapper {
   97     display: flex;
   98     flex-direction: column;
   99     margin: 0 auto;
  100     max-width: 100%;
  101     pointer-events: all;
  102     border-radius: 6px;
  103 
  104     .toolbox-content-items {
  105         @include ltr;
  106     }
  107 }
  108 
  109 .toolbox-content-wrapper::after {
  110     content: '';
  111     background: $newToolbarBackgroundColor;
  112     padding-bottom: env(safe-area-inset-bottom, 0);
  113 }
  114 
  115 .beta-tag {
  116     background: #36383C;
  117     border-radius: 3px;
  118     color: #fff;
  119     font-size: 12px;
  120     margin-left: 8px;
  121     padding: 0 4px;
  122     text-transform: uppercase;
  123 }
  124 
  125 .overflow-menu-hr {
  126     border-top: 1px solid #4C4D50;
  127     border-bottom: 0;
  128     margin: 8px 0;
  129 }
  130 
  131 div.hangup-button {
  132     background-color: #CB2233;
  133 
  134     @media (hover: hover) and (pointer: fine) {
  135         &:hover {
  136             background-color: #E04757;
  137         }
  138 
  139         &:active {
  140             background-color: #A21B29;
  141         }
  142     }
  143 
  144     svg {
  145         fill: #fff;
  146     }
  147 }
  148 
  149 div.hangup-menu-button {
  150     background-color: #CB2233;
  151 
  152     @media (hover: hover) and (pointer: fine) {
  153         &:hover {
  154             background-color: #E04757;
  155         }
  156 
  157         &:active {
  158             background-color: #A21B29;
  159         }
  160     }
  161 
  162     svg {
  163         fill: #fff;
  164     }
  165 }
  166 
  167 .profile-button-avatar {
  168     align-items: center;
  169 }
  170 
  171 /**
  172  * START of fade in animation for main toolbar
  173  */
  174 .fadeIn {
  175     opacity: 1;
  176 
  177     @include transition(all .3s ease-in);
  178 }
  179 
  180 .fadeOut {
  181     opacity: 0;
  182 
  183     @include transition(all .3s ease-out);
  184 }
  185 
  186 /**
  187  * Audio and video buttons do not have toggled state.
  188  */
  189 .audio-preview,
  190 .video-preview {
  191     .toolbox-icon.toggled {
  192         background: none;
  193 
  194         &:hover {
  195             background: $newToolbarButtonHoverColor;
  196         }
  197     }
  198 
  199 }
  200 
  201 /**
  202  * On small mobile devices make the toolbar full width and pad the invite prompt.
  203  */
  204 .toolbox-content-mobile {
  205     @media (max-width: 500px) {
  206         margin-bottom: 0;
  207 
  208         .toolbox-content-wrapper {
  209             width: 100%;
  210         }
  211 
  212         .toolbox-content-items {
  213             @include ltr;
  214             border-radius: 0;
  215             display: flex;
  216             justify-content: space-evenly;
  217             padding: 8px 0;
  218             width: 100%;
  219         }
  220 
  221         .invite-more-container {
  222             margin: 0 16px 8px;
  223         }
  224 
  225         .invite-more-container.elevated {
  226             margin-bottom: 52px;
  227         }
  228     }
  229 }