"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-5079/css/modals/invite/_invite_more.scss" (17 Jun 2021, 5191 Bytes) of package /linux/misc/jitsi-meet-5079.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 "_invite_more.scss": 5062_vs_5064.

    1 .invite-more {
    2     &-container {
    3         margin-bottom: 8px;
    4         transition: margin-bottom 0.3s;
    5 
    6         &.elevated {
    7             margin-bottom: 36px;
    8         }
    9     }
   10 
   11     &-content {
   12         display: flex;
   13         flex-direction: column;
   14         align-items: center;
   15         padding: 16px;
   16         background: rgba(0, 0, 0, 0.7);
   17         border-radius: 8px;
   18         color: #fff;
   19         font-size: 14px;
   20         line-height: 24px;
   21         font-weight: 600;
   22     }
   23 
   24     &-header {
   25         max-width: 100%;
   26         margin-bottom: 16px;
   27         text-overflow: ellipsis;
   28         overflow: hidden;
   29         white-space: nowrap;
   30     }
   31 
   32     &-button {
   33         display: flex;
   34         max-width: 100%;
   35         height: 40px;
   36         box-sizing: border-box;
   37         padding: 8px 16px;
   38         background: #0376DA;
   39         border-radius: 3px;
   40         cursor: pointer;
   41 
   42         @media (hover: hover) and (pointer: fine) {
   43             &:hover {
   44                 background: #278ADF;
   45             }
   46         }
   47 
   48         &-text {
   49             margin-left: 8px;
   50             text-overflow: ellipsis;
   51             overflow: hidden;
   52             white-space: nowrap;
   53         }
   54     }
   55     &-dialog {
   56         color: #fff;
   57         font-size: 15px;
   58         line-height: 24px;
   59 
   60         &.separator {
   61             margin: 24px 0 24px -20px;
   62             padding: 0 20px;
   63             width: 100%;
   64             height: 1px;
   65             background: #5E6D7A;
   66         }
   67 
   68         &.email-container {
   69             display: flex;
   70             justify-content: space-between;
   71             align-items: center;
   72             padding: 8px 8px 8px 16px;
   73             margin-top: 24px;
   74             width: calc(100% - 26px);
   75             height: 22px;
   76 
   77             background: #2A3A4B;
   78             border: 1px solid #5E6D7A;
   79             border-radius: 3px;
   80             cursor: pointer;
   81 
   82             &.active {
   83                 border-radius: 3px 3px 0 0;
   84             }
   85         }
   86 
   87         &.icon-container {
   88             display: none;
   89 
   90             &.active {
   91                 display: flex;
   92                 width: calc(100% - 26px);
   93                 padding: 8px 8px 8px 16px;
   94 
   95                 background: #2A3A4B;
   96                 border: 1px solid #5E6D7A;
   97                 border-top: none;
   98                 border-radius: 0 0 3px 3px;
   99 
  100                 .copy-invite-icon, .provider-icon {
  101                     align-items: center;
  102                     cursor: pointer;
  103                     display: flex;
  104                     height: 40px;
  105                     place-content: center;
  106                     width: 40px;
  107                 }
  108 
  109                 &:hover > div:hover {
  110                     background-color: rgba(255, 255, 255, 0.2);
  111                     border-radius: 4px;
  112                 }
  113 
  114                 & > :not(:last-child) {
  115                     margin-right: 16px;
  116                 }
  117 
  118                 .copy-invite-icon > div > svg > path {
  119                     fill: #A4B8D1;
  120                 }
  121             }
  122         }
  123 
  124         &.dial-in-display {
  125             .info-label {
  126                 color: #A4B8D1;
  127             }
  128 
  129             .dial-in-copy {
  130                 display: inline-block;
  131                 vertical-align: middle;
  132                 cursor: pointer;
  133                 height: 24px;
  134             }
  135         }
  136 
  137         &.invite-buttons {
  138             width: 100%;
  139             text-align: right;
  140             margin-top: 8px;
  141 
  142             & > a {
  143                 display: inline-block;
  144                 height: 24px;
  145                 min-width: 48px;
  146                 border-radius: 3px;
  147                 text-align: center;
  148                 text-decoration: none;
  149                 cursor: pointer;
  150             }
  151 
  152             &-cancel {
  153                 margin-right: 16px;
  154                 padding: 7px 15px;
  155                 background: #2A3A4B;
  156                 border: 1px solid #5E6D7A;
  157             }
  158 
  159             &-add {
  160                 padding: 8px 16px;
  161                 background: #0376DA;
  162             }
  163 
  164             &.disabled {
  165                 & > a {
  166                     pointer-events: none;
  167                 }
  168             }
  169         }
  170 
  171         &.stream {
  172             display: flex;
  173             justify-content: space-between;
  174             align-items: center;
  175             padding: 8px 8px 8px 16px;
  176             margin-top: 8px;
  177             width: calc(100% - 26px);
  178             height: 22px;
  179 
  180             background: #2A3A4B;
  181             border: 1px solid #5E6D7A;
  182             border-radius: 3px;
  183             cursor: pointer;
  184 
  185             &:hover {
  186                 font-weight: 600;
  187             }
  188 
  189             &-text {
  190                 overflow: hidden;
  191                 text-overflow: ellipsis;
  192                 white-space: nowrap;
  193                 max-width: 292px;
  194 
  195                 &.selected {
  196                     font-weight: 600;
  197                 }
  198             }
  199 
  200             &.clicked {
  201                 background: #31B76A;
  202                 border: 1px solid #31B76A;
  203             }
  204 
  205             & > div > svg > path {
  206                 fill: #fff;
  207             }
  208         }
  209     }
  210 }
  211 
  212 .mobile-browser {
  213     .invite-more-content {
  214         font-size: 16px;
  215     }
  216 
  217     .invite-more-button {
  218         height: 48px;
  219         padding: 12px 16px;
  220     }
  221 }