"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-6316/css/_subject.scss" (5 Jul 2022, 1859 Bytes) of package /linux/misc/jitsi-meet-6316.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 .subject {
    2     color: #fff;
    3     transition: opacity .6s ease-in-out;
    4     z-index: $toolbarZ + 2;
    5     margin-top: 20px;
    6     opacity: 0;
    7 
    8     &.visible {
    9         opacity: 1;
   10     }
   11 
   12     &#autoHide.with-always-on {
   13         overflow: hidden;
   14         animation: hideSubject forwards .6s ease-out;
   15 
   16         & > .subject-info-container {
   17             justify-content: flex-start;
   18         }
   19 
   20         &.visible {
   21             animation: showSubject forwards .6s ease-out;
   22         }
   23     }
   24 }
   25 
   26 .subject-info-container {
   27     display: flex;
   28     justify-content: center;
   29     margin: 0 auto;
   30     height: 28px;
   31 
   32     @media (max-width: 500px) {
   33         flex-wrap: wrap;
   34     }
   35 }
   36 
   37 .subject-info {
   38     align-items: center;
   39     display: flex;
   40     margin-bottom: 4px;
   41     max-width: 80%;
   42     height: 28px;
   43 }
   44 
   45 .subject-text {
   46     background: rgba(0, 0, 0, 0.6);
   47     border-radius: 3px 0px 0px 3px;
   48     box-sizing: border-box;
   49     font-size: 14px;
   50     line-height: 28px;
   51     padding: 0 16px;
   52     height: 28px;
   53     max-width: 324px;
   54 
   55     @media (max-width: 300px) {
   56         display: none;
   57     }
   58 
   59     &--content {
   60         overflow: hidden;
   61         text-overflow: ellipsis;
   62         white-space: nowrap;
   63     }
   64 }
   65 
   66 .subject-timer {
   67     background: rgba(0, 0, 0, 0.8);
   68     border-radius: 0px 3px 3px 0px;
   69     box-sizing: border-box;
   70     font-size: 12px;
   71     line-height: 28px;
   72     min-width: 34px;
   73     padding: 0 8px;
   74     height: 28px;
   75 
   76     @media (max-width: 300px) {
   77         display: none;
   78     }
   79 }
   80 
   81 .details-container {
   82     width: 100%;
   83     display: flex;
   84     justify-content: center;
   85     position: absolute;
   86     top: 0;
   87     height: 48px;
   88     max-width: calc(100% - 24px);
   89 }
   90 
   91 @keyframes hideSubject {
   92     0% {
   93         max-width: 100%;
   94     }
   95 
   96     100% {
   97         max-width: 0;
   98     }
   99 }
  100 
  101 @keyframes showSubject {
  102     0% {
  103         max-width: 0%;
  104     }
  105 
  106     100% {
  107         max-width: 100%;
  108     }
  109 }