"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7309/css/_chat.scss" (31 May 2023, 7192 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 "_chat.scss": jitsi-meet_8319_vs_jitsi-meet_8615.

    1 #sideToolbarContainer {
    2     background-color: $chatBackgroundColor;
    3     flex-shrink: 0;
    4     overflow: hidden;
    5     position: relative;
    6     transition: width .16s ease-in-out;
    7     width: $sidebarWidth;
    8     z-index: $sideToolbarContainerZ;
    9 
   10     @media (max-width: 580px) {
   11         height: 100vh;
   12         height: -webkit-fill-available;
   13         left: 0;
   14         position: fixed;
   15         right: 0;
   16         top: 0;
   17         width: auto;
   18     }
   19 }
   20 
   21 .chat-panel {
   22     display: flex;
   23     flex-direction: column;
   24     // extract header + tabs height
   25     height: calc(100% - 119px);
   26 }
   27 
   28 .chat-panel-no-tabs {
   29     // extract header height
   30     height: calc(100% - 70px);
   31 }
   32 
   33 #chat-conversation-container {
   34     // extract message input height
   35     height: calc(100% - 64px);
   36     overflow: hidden;
   37     position: relative;
   38 }
   39 
   40 #chatconversation {
   41     box-sizing: border-box;
   42     flex: 1;
   43     font-size: 10pt;
   44     height: 100%;
   45     line-height: 20px;
   46     overflow: auto;
   47     padding: 16px;
   48     text-align: left;
   49     word-wrap: break-word;
   50 
   51     display: flex;
   52     flex-direction: column;
   53 
   54     & > :first-child {
   55         margin-top: auto;
   56     }
   57 
   58     a {
   59         display: block;
   60     }
   61 
   62     a:link {
   63         color: rgb(184, 184, 184);
   64     }
   65 
   66     a:visited {
   67         color: white;
   68     }
   69 
   70     a:hover {
   71         color: rgb(213, 213, 213);
   72     }
   73 
   74     a:active {
   75         color: black;
   76     }
   77 }
   78 
   79 
   80 .chat-header {
   81     height: 70px;
   82     position: relative;
   83     width: 100%;
   84     z-index: 1;
   85     display: flex;
   86     justify-content: space-between;
   87     padding: 16px;
   88     align-items: center;
   89     box-sizing: border-box;
   90     color: #fff;
   91     font-weight: 600;
   92     font-size: 24px;
   93     line-height: 32px;
   94 
   95     .jitsi-icon {
   96         cursor: pointer;
   97     }
   98 }
   99 
  100 .chat-input-container {
  101     padding: 0 16px 24px;
  102 }
  103 
  104 #chat-input {
  105     display: flex;
  106     align-items: flex-end;
  107     position: relative;
  108 }
  109 
  110 .chat-input {
  111     flex: 1;
  112     margin-right: 8px;
  113 }
  114 
  115 .smiley-button {
  116     display: flex;
  117     align-items: center;
  118     justify-content: center;
  119     height: 38px;
  120     width: 38px;
  121     margin: 2px;
  122     border-radius: 3px;
  123 }
  124 
  125 #chat-input .smiley-button {
  126     @media (hover: hover) and (pointer: fine) {
  127         &:hover {
  128             background-color: #484A4F;
  129         }
  130     }
  131 }
  132 
  133 .remoteuser {
  134     color: #B8C7E0;
  135 }
  136 
  137 .usrmsg-form {
  138     flex: 1;
  139 }
  140 
  141 #usermsg {
  142     -ms-overflow-style: none;
  143     border: 0px none;
  144     border-radius:0;
  145     box-shadow: none;
  146     color: white;
  147     font-size: 14px;
  148     padding: 10px;
  149     overflow-y: auto;
  150     resize: none;
  151     scrollbar-width: none;
  152     width: 100%;
  153     word-break: break-word;
  154 
  155     &::-webkit-scrollbar {
  156         display: none;
  157     }
  158 }
  159 
  160 #usermsg:hover {
  161     border: 0px none;
  162     box-shadow: none;
  163 }
  164 #usermsg:focus,
  165 #usermsg:active {
  166     border-bottom: 1px solid white;
  167     padding-bottom: 8px;
  168  }
  169 
  170 #nickname {
  171     text-align: center;
  172     color: #9d9d9d;
  173     font-size: 16px;
  174     margin: auto 0;
  175     padding: 0 16px;
  176 
  177     #nickname-title {
  178         margin-bottom: 5px;
  179         display: block;
  180     }
  181 
  182     label[for="nickinput"] {
  183         > div > span {
  184             color: #B8C7E0;
  185         }
  186     }
  187     input {
  188         height: 40px;
  189     }
  190 
  191     label {
  192         line-height: 24px;
  193     }
  194 
  195     .enter-chat {
  196         display: flex;
  197         align-items: center;
  198         justify-content: center;
  199         margin-top: 16px;
  200         height: 40px;
  201         background: #1B67EC;
  202         border-radius: 3px;
  203         color: #fff;
  204         cursor: pointer;
  205 
  206         &.disabled {
  207             color: #AFB6BC;
  208             background: #11336E;
  209             pointer-events: none;
  210         }
  211     }
  212 }
  213 
  214 .mobile-browser {
  215     #nickname {
  216         input {
  217             height: 48px;
  218         }
  219 
  220         .enter-chat {
  221             height: 48px;
  222         }
  223     }
  224 
  225     #usermsg {
  226         font-size: 16px;
  227     }
  228 
  229     .chatmessage .usermessage {
  230         font-size: 16px;
  231     }
  232 }
  233 
  234 .sideToolbarContainer {
  235     * {
  236         -webkit-user-select: text;
  237         user-select: text;
  238     }
  239 }
  240 
  241 .sr-only {
  242     border: 0 !important;
  243     clip: rect(1px, 1px, 1px, 1px) !important;
  244     clip-path: inset(50%) !important;
  245     height: 1px !important;
  246     margin: -1px !important;
  247     overflow: hidden !important;
  248     padding: 0 !important;
  249     position: absolute !important;
  250     width: 1px !important;
  251     white-space: nowrap !important;
  252 }
  253 
  254 .chatmessage {
  255     &.localuser {
  256         background-color: $chatLocalMessageBackgroundColor;
  257         border-radius: 6px 0px 6px 6px;
  258     }
  259 
  260     &.error {
  261         border-radius: 0px;
  262 
  263         .timestamp,
  264         .display-name {
  265             display: none;
  266         }
  267 
  268         .usermessage {
  269             color: red;
  270             padding: 0;
  271         }
  272     }
  273 
  274     .messagecontent {
  275         max-width: 100%;
  276         overflow: hidden;
  277     }
  278 }
  279 
  280 #smileys {
  281     font-size: 20pt;
  282     margin: auto;
  283     cursor: pointer;
  284 }
  285 
  286 #smileys img {
  287     width: 22px;
  288     padding: 2px;
  289 }
  290 
  291 #smileysarea {
  292     display: flex;
  293     max-height: 150px;
  294     min-height: 35px;
  295     overflow: hidden;
  296 }
  297 
  298 .smiley-input {
  299     display: flex;
  300     position: absolute;
  301     top: 0;
  302     left: 0;
  303 }
  304 
  305 .smileys-panel {
  306     bottom: 100%;
  307     box-sizing: border-box;
  308     background-color: rgba(0, 0, 0, .6) !important;
  309     height: auto;
  310     display: flex;
  311     overflow: hidden;
  312     position: absolute;
  313     width: calc(#{$sidebarWidth} - 32px);
  314     margin-bottom: 5px;
  315     margin-left: -5px;
  316 
  317     /**
  318      * CSS transitions do not apply for auto dimensions. So to produce the css
  319      * accordion effect for showing and hiding the smiley-panel, while allowing
  320      * for variable panel, height, use a very large max-height and animate off
  321      * of that.
  322      */
  323     transition: max-height 0.3s;
  324 
  325     #smileysContainer {
  326         background-color: $chatBackgroundColor;
  327         border-top: 1px solid $chatInputSeparatorColor;
  328     }
  329 }
  330 
  331 #smileysContainer .smiley {
  332     font-size: 20pt;
  333 }
  334 
  335 .smileyContainer {
  336     width: 40px;
  337     height: 40px;
  338     display: inline-block;
  339     text-align: center;
  340 }
  341 
  342 .smileyContainer:hover {
  343     background-color: $newToolbarButtonToggleColor;
  344     border-radius: 5px;
  345     cursor: pointer;
  346 }
  347 
  348 #usermsg::-webkit-scrollbar-track-piece {
  349     background: #3a3a3a;
  350 }
  351 
  352 .chat-message-group {
  353     &.local {
  354         align-items: flex-end;
  355 
  356         .display-name {
  357             display: none;
  358         }
  359 
  360         .timestamp {
  361             text-align: right;
  362         }
  363     }
  364 
  365     &.error {
  366         .display-name {
  367             display: none;
  368         }
  369     }
  370 }
  371 
  372 .chat-dialog {
  373     display: flex;
  374     flex-direction: column;
  375     height: 100%;
  376     margin-top: -5px; // Margin set by atlaskit.
  377 
  378     &-header {
  379         display: flex;
  380         justify-content: space-between;
  381         align-items: center;
  382         margin: 16px;
  383         width: calc(100% - 32px);
  384         box-sizing: border-box;
  385         color: #fff;
  386         font-weight: 600;
  387         font-size: 24px;
  388         line-height: 32px;
  389 
  390         .jitsi-icon {
  391             cursor: pointer;
  392         }
  393     }
  394 
  395     #chatconversation {
  396         width: 100%;
  397     }
  398 }
  399 
  400 
  401 /**
  402  * Make header close button more easily tappable on mobile.
  403  */
  404 .mobile-browser .chat-dialog-header .jitsi-icon {
  405     display: grid;
  406     place-items: center;
  407     height: 48px;
  408     width: 48px;
  409     background: #36383C;
  410     border-radius: 3px;
  411 }