"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-4420/css/_toolbars.scss" (18 Sep 2020, 7332 Bytes) of package /linux/misc/jitsi-meet-4420.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.

    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 
   33 
   34     &.visible {
   35         bottom: 0;
   36         .toolbox-background {
   37             bottom: 0px;
   38         }
   39     }
   40 
   41     &.no-buttons {
   42         display: none;
   43     }
   44 
   45     &.shift-right {
   46         margin-left: $sidebarWidth;
   47         width: calc(100% - #{$sidebarWidth});
   48     }
   49 
   50     .toolbox-background {
   51         background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
   52         transition: bottom .3s ease-in;
   53         height: 160px;
   54         width: 100%;
   55         bottom: -160px;
   56         pointer-events: none;
   57         position: absolute;
   58         z-index: $toolbarBackgroundZ;
   59     }
   60 
   61     .toolbox-content {
   62         box-sizing: border-box;
   63         display: flex;
   64         justify-content: space-between;
   65         margin-left: auto;
   66         margin-right: auto;
   67         padding: 20px 16px;
   68         position: relative;
   69         width: 100%;
   70         z-index: $toolbarZ;
   71 
   72         .button-group-center,
   73         .button-group-left,
   74         .button-group-right {
   75             display: flex;
   76             width: 33%;
   77         }
   78 
   79         .button-group-center {
   80             justify-content: center;
   81 
   82             .toolbox-button {
   83 
   84                 .toolbox-icon {
   85                     background-color: #fff;
   86                     border-radius: 50%;
   87                     border: 1px solid #d1dbe8;
   88                     margin: 0px 4px;
   89                     width: 38px;
   90                     height: 38px;
   91         
   92                     &:hover {
   93                         background-color: #daebfa;
   94                         border: 1px solid #daebfa;
   95                     }
   96         
   97                     &.toggled {
   98                         background: #2a3a4b;
   99                         border: 1px solid #5e6d7a;
  100     
  101                         svg {
  102                             fill: #fff;
  103                         }
  104         
  105                         &:hover {
  106                             background-color: #5e6d7a;
  107                         }
  108                     }
  109         
  110                     &.disabled, .disabled & {
  111                         cursor: initial;
  112                         color: #fff;
  113                         background-color: #a4b8d1;
  114                     }
  115     
  116                     svg {
  117                         fill: #5e6d7a;
  118                     }
  119                 }
  120 
  121                 &:nth-child(2) {
  122                     .toolbox-icon {
  123                         background-color: $hangupColor;
  124                         border: 1px solid $hangupColor;
  125                         width: 40px;
  126                         height: 40px;
  127                 
  128                         &:hover {
  129                             background-color: $hangupColor;
  130                         }
  131 
  132                         svg {
  133                             fill: #fff;
  134                         }
  135                     }
  136                 }
  137             }
  138         }
  139 
  140         .button-group-right {
  141             justify-content: flex-end;
  142         }
  143 
  144         .overflow-menu {
  145             font-size: 1.2em;
  146             list-style-type: none;
  147             background-color: $overflowMenuBG;
  148             /**
  149              * Undo atlaskit padding by reducing margins.
  150              */
  151             margin: -16px -24px;
  152             padding: 4px 0;
  153 
  154             .overflow-menu-item {
  155                 align-items: center;
  156                 color: $overflowMenuItemColor;
  157                 cursor: pointer;
  158                 display: flex;
  159                 font-size: 14px;
  160                 height: 22px;
  161                 padding: 5px 12px;
  162 
  163                 div {
  164                     display: flex;
  165                     flex-direction: row;
  166                     align-items: center;
  167                 }
  168 
  169                 &:hover {
  170                     background-color: $overflowMenuItemHoverBG;
  171                     color: $overflowMenuItemHoverColor;
  172                 }
  173 
  174                 &.unclickable {
  175                     cursor: default;
  176                 }
  177                 &.unclickable:hover {
  178                     background: inherit;
  179                 }
  180                 &.disabled {
  181                     cursor: initial;
  182                     color: #3b475c;
  183                 }
  184             }
  185 
  186             .beta-tag {
  187                 background: $overflowMenuItemColor;
  188                 border-radius: 2px;
  189                 color: $overflowMenuBG;
  190                 font-size: 11px;
  191                 font-weight: bold;
  192                 margin-left: 8px;
  193                 padding: 0 6px;
  194             }
  195 
  196             .overflow-menu-item-icon {
  197                 margin-right: 10px;
  198 
  199                 i {
  200                     display: inline;
  201                     font-size: 24px;
  202                 }
  203 
  204                 i:hover {
  205                     background-color: initial;
  206                 }
  207 
  208                 img {
  209                     max-width: 24px;
  210                     max-height: 24px;
  211                 }
  212 
  213                 svg {
  214                     fill: #B8C7E0 !important;
  215                 }
  216             }
  217 
  218             .profile-text {
  219                 max-width: 150px;
  220                 text-overflow: ellipsis;
  221                 overflow: hidden;
  222                 white-space: nowrap;
  223             }
  224         }
  225 
  226         .toolbox-button {
  227             color: $toolbarButtonColor;
  228             cursor: pointer;
  229             display: inline-block;
  230             line-height: $newToolbarSize;
  231             margin: 0 8px;
  232             text-align: center;
  233         }
  234 
  235         .toolbar-button-with-badge {
  236             position: relative;
  237 
  238             .badge-round {
  239                 bottom: -5px;
  240                 font-size: 12px;
  241                 line-height: 20px;
  242                 min-width: 20px;
  243                 pointer-events: none;
  244                 position: absolute;
  245                 right: -5px;
  246             }
  247         }
  248 
  249         .toolbox-button-wth-dialog {
  250             display: inline-block;
  251         }
  252 
  253         .toolbox-icon {
  254             display: flex;
  255             border-radius: 5px;
  256             flex-direction: column;
  257             font-size: 24px;
  258             height: $newToolbarSize;
  259             justify-content: center;
  260             width: $newToolbarSize;
  261 
  262             &:hover, &.toggled {
  263                 background: $newToolbarButtonHoverColor;
  264             }
  265     
  266             &.disabled {
  267                 cursor: initial !important;
  268                 background-color: #a4b8d1 !important;
  269 
  270                 svg {
  271                     fill: #fff !important;
  272                 }
  273             }
  274         }
  275     }
  276 }
  277 
  278 /**
  279  * START of fade in animation for main toolbar
  280  */
  281 .fadeIn {
  282     opacity: 1;
  283 
  284     @include transition(all .3s ease-in);
  285 }
  286 
  287 .fadeOut {
  288     opacity: 0;
  289 
  290     @include transition(all .3s ease-out);
  291 }