"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-6193/css/_atlaskit_overrides.scss" (20 May 2022, 2756 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 "_atlaskit_overrides.scss": jitsi-meet_7001_vs_jitsi-meet_7210.

    1 /**
    2  * Mixins that mimic the way Atlaskit fills the screen with modals at low screen widths.
    3  */
    4 @mixin full-size-modal-positioner() {
    5     height: 100%;
    6     left: 0;
    7     position: fixed;
    8     top: 0;
    9     max-width: 100%;
   10     width: 100%;
   11 }
   12 
   13 @mixin full-size-modal-dialog() {
   14     height: 100%;
   15     max-height: 100%;
   16     border-radius: 0;
   17 }
   18 
   19 /**
   20  * Move the @atlaskit/flag container up a little bit so it does not cover the
   21  * toolbar with the first notification.
   22  */
   23 .atlaskit-portal > #notifications-container {
   24     bottom: calc(#{$newToolbarSizeWithPadding}) !important;
   25 }
   26 
   27 
   28 /**
   29  * Keep overflow menu within screen vertical bounds and make it scrollable.
   30  */
   31 .toolbox-button-wth-dialog > div:nth-child(2) {
   32     background: $menuBG;
   33     max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
   34     margin-bottom: 4px;
   35     padding: 0;
   36     overflow-y: auto;
   37 }
   38 
   39 /**
   40  * Remove background color and box-shadow for the context menu container.
   41  */
   42 .toolbox-button-wth-dialog.context-menu > div:nth-child(2) {
   43     background: transparent;
   44     box-shadow: none;
   45     overflow-y: initial;
   46 }
   47 
   48 .audio-preview > div:nth-child(2),
   49 .video-preview > div:nth-child(2) {
   50     margin-bottom: 4px;
   51     outline: none;
   52     padding: 0;
   53 }
   54 
   55 /**
   56  * The following selectors keep the chat modal full-size anywhere between 100px
   57  * and 580px for desktop or 680px for mobile.
   58  */
   59 @media (min-width: 100px) and (max-width: 320px) {
   60     .smiley-input {
   61         display: none;
   62     }
   63     .shift-right .focus-lock > div > div {
   64         @include full-size-modal-positioner();
   65     }
   66 
   67     .shift-right .focus-lock [role="dialog"] {
   68         @include full-size-modal-dialog();
   69     }
   70 }
   71 
   72 @media (min-width: 480px) and (max-width: 580px) {
   73     .shift-right .focus-lock > div > div {
   74         @include full-size-modal-positioner();
   75     }
   76 
   77     .shift-right .focus-lock [role="dialog"] {
   78         @include full-size-modal-dialog();
   79     }
   80 }
   81 
   82 @media (max-width: 580px) {
   83     // Override Atlaskit inline style for the modal background.
   84     // Important is unfortunately needed for that.
   85     .shift-right .focus-lock [role="dialog"][style] {
   86         background-color: $chatBackgroundColor !important;
   87     }
   88 
   89     // Remove Atlaskit padding from the chat dialog.
   90     .shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) {
   91         padding: 0;
   92     }
   93 }
   94 
   95 div.Tooltip {
   96     color: #fff;
   97     font-size: 12px;
   98     line-height: 14px;
   99     padding: 8px;
  100 }
  101 
  102 // make modal full screen on landscape orientation
  103 @media (max-height: 420px) {
  104     .atlaskit-portal {
  105         .css-1oc7v0j {
  106             height: 100%;
  107             padding: 0;
  108             max-width: 100%;
  109             top: 0;
  110             width: 100%;
  111 
  112             &> div {
  113                 height: 100%;
  114             }
  115         }
  116     }
  117 }