"Fossies" - the Fresh Open Source Software Archive

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

    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% - 102px);
   26 }
   27 
   28 .chat-panel-no-tabs {
   29     // extract header height
   30     height: calc(100% - 70px);
   31 }
   32 
   33 #chatconversation {
   34     box-sizing: border-box;
   35     flex: 1;
   36     font-size: 10pt;
   37     // extract message input height
   38     height: calc(100% - 68px);
   39     line-height: 20px;
   40     overflow: auto;
   41     padding: 16px;
   42     text-align: left;
   43     word-wrap: break-word;
   44 
   45     display: flex;
   46     flex-direction: column;
   47 
   48     & > :first-child {
   49         margin-top: auto;
   50     }
   51 
   52     a {
   53         display: block;
   54     }
   55 
   56     a:link {
   57         color: rgb(184, 184, 184);
   58     }
   59 
   60     a:visited {
   61         color: white;
   62     }
   63 
   64     a:hover {
   65         color: rgb(213, 213, 213);
   66     }
   67 
   68     a:active {
   69         color: black;
   70     }
   71 }
   72 
   73 #chat-recipient {
   74     align-items: center;
   75     background-color: $chatPrivateMessageBackgroundColor;
   76     display: flex;
   77     flex-direction: row;
   78     font-weight: 100;
   79     padding: 10px;
   80 
   81     span {
   82         color: white;
   83         display: flex;
   84         flex: 1;
   85     }
   86 
   87     div {
   88         svg {
   89             cursor: pointer;
   90             fill: white;
   91         }
   92     }
   93 
   94     &.lobby-chat-recipient {
   95         background-color: $chatLobbyMessageBackgroundColor;
   96     }
   97 }
   98 
   99 
  100 .chat-header {
  101     height: 70px;
  102     position: relative;
  103     width: 100%;
  104     z-index: 1;
  105     display: flex;
  106     justify-content: space-between;
  107     padding: 16px;
  108     align-items: center;
  109     box-sizing: border-box;
  110     color: #fff;
  111     font-weight: 600;
  112     font-size: 24px;
  113     line-height: 32px;
  114 
  115     .jitsi-icon {
  116         cursor: pointer;
  117     }
  118 }
  119 
  120 .chat-input-container {
  121     padding: 0 16px 16px;
  122 
  123     &.populated {
  124         #chat-input {
  125             .send-button {
  126                 background: #1B67EC;
  127                 cursor: pointer;
  128                 margin-left: 0.3rem;
  129 
  130                 @media (hover: hover) and (pointer: fine) {
  131                     &:hover {
  132                         background: #3D82FB;
  133                     }
  134                 }
  135 
  136                 &:active {
  137                     background: #0852D4;
  138                 }
  139 
  140                 path {
  141                     fill: #fff;
  142                 }
  143             }
  144         }
  145     }
  146 }
  147 
  148 #chat-input {
  149     border: 1px solid $chatInputSeparatorColor;
  150     display: flex;
  151     padding: 4px;
  152     border-radius: 3px;
  153 
  154     &:focus-within {
  155         border: 1px solid #619CF4;
  156     }
  157 
  158     * {
  159         background-color: transparent;
  160     }
  161 }
  162 
  163 .send-button-container {
  164     display: flex;
  165     align-items: center;
  166 }
  167 
  168 .send-button {
  169     display: flex;
  170     align-items: center;
  171     justify-content: center;
  172     height: 40px;
  173     width: 40px;
  174     border-radius: 3px;
  175 
  176     path {
  177         fill: $chatInputSeparatorColor;
  178     }
  179 }
  180 
  181 .smiley-button {
  182     display: flex;
  183     align-items: center;
  184     justify-content: center;
  185     height: 38px;
  186     width: 38px;
  187     margin: 2px;
  188     border-radius: 3px;
  189 }
  190 
  191 #chat-input .smiley-button {
  192     @media (hover: hover) and (pointer: fine) {
  193         &:hover {
  194             background-color: #484A4F;
  195         }
  196     }
  197 }
  198 
  199 .remoteuser {
  200     color: #B8C7E0;
  201 }
  202 
  203 .usrmsg-form {
  204     flex: 1;
  205 }
  206 
  207 #usermsg {
  208     -ms-overflow-style: none;
  209     border: 0px none;
  210     border-radius:0;
  211     box-shadow: none;
  212     color: white;
  213     font-size: 14px;
  214     padding: 10px;
  215     overflow-y: auto;
  216     resize: none;
  217     scrollbar-width: none;
  218     width: 100%;
  219     word-break: break-word;
  220 
  221     &::-webkit-scrollbar {
  222         display: none;
  223     }
  224 }
  225 
  226 #usermsg:hover {
  227     border: 0px none;
  228     box-shadow: none;
  229 }
  230 #usermsg:focus,
  231 #usermsg:active {
  232     border-bottom: 1px solid white;
  233     padding-bottom: 8px;
  234  }
  235 
  236 #nickname {
  237     text-align: center;
  238     color: #9d9d9d;
  239     font-size: 16px;
  240     margin: auto 0;
  241     padding: 0 16px;
  242 
  243     #nickname-title {
  244         margin-bottom: 5px;
  245         display: block;
  246     }
  247 
  248     label[for="nickinput"] {
  249         > div > span {
  250             color: #B8C7E0;
  251         }
  252     }
  253     input {
  254         height: 40px;
  255     }
  256 
  257     label {
  258         line-height: 24px;
  259     }
  260 
  261     .enter-chat {
  262         display: flex;
  263         align-items: center;
  264         justify-content: center;
  265         margin-top: 16px;
  266         height: 40px;
  267         background: #1B67EC;
  268         border-radius: 3px;
  269         color: #fff;
  270         cursor: pointer;
  271 
  272         &.disabled {
  273             color: #AFB6BC;
  274             background: #11336E;
  275             pointer-events: none;
  276         }
  277     }
  278 }
  279 
  280 .mobile-browser {
  281     #nickname {
  282         input {
  283             height: 48px;
  284         }
  285 
  286         .enter-chat {
  287             height: 48px;
  288         }
  289     }
  290 
  291     #usermsg {
  292         font-size: 16px;
  293     }
  294 
  295     .chatmessage .usermessage {
  296         font-size: 16px;
  297     }
  298 }
  299 
  300 .sideToolbarContainer {
  301     * {
  302         -webkit-user-select: text;
  303         user-select: text;
  304     }
  305 
  306     .display-name {
  307         font-size: 12px;
  308         font-weight: 600;
  309         margin-bottom: 5px;
  310         white-space: nowrap;
  311         text-overflow: ellipsis;
  312         overflow: hidden;
  313     }
  314 }
  315 
  316 .sr-only {
  317     border: 0 !important;
  318     clip: rect(1px, 1px, 1px, 1px) !important;
  319     clip-path: inset(50%) !important;
  320     height: 1px !important;
  321     margin: -1px !important;
  322     overflow: hidden !important;
  323     padding: 0 !important;
  324     position: absolute !important;
  325     width: 1px !important;
  326     white-space: nowrap !important;
  327 }
  328 
  329 .chatmessage {
  330     background-color: $chatRemoteMessageBackgroundColor;
  331     border-radius: 0px 6px 6px 6px;
  332     box-sizing: border-box;
  333     color: white;
  334     margin-top: 3px;
  335     max-width: 100%;
  336     position: relative;
  337 
  338     &.localuser {
  339         background-color: $chatLocalMessageBackgroundColor;
  340         border-radius: 6px 0px 6px 6px;
  341     }
  342 
  343     .usermessage {
  344         white-space: pre-wrap;
  345         font-size: 14px;
  346     }
  347 
  348     &.error {
  349         border-radius: 0px;
  350 
  351         .timestamp,
  352         .display-name {
  353             display: none;
  354         }
  355 
  356         .usermessage {
  357             color: red;
  358             padding: 0;
  359         }
  360     }
  361 
  362     .privatemessagenotice {
  363         font-size: 11px;
  364         font-weight: 100;
  365     }
  366 
  367     .messagecontent {
  368         margin: 8px;
  369         max-width: 100%;
  370         overflow: hidden;
  371     }
  372 }
  373 
  374 .timestamp {
  375     color: #757575;
  376 }
  377 
  378 #smileys {
  379     font-size: 20pt;
  380     margin: auto;
  381     cursor: pointer;
  382 }
  383 
  384 #smileys img {
  385     width: 22px;
  386     padding: 2px;
  387 }
  388 
  389 #smileysarea {
  390     display: flex;
  391     max-height: 150px;
  392     min-height: 35px;
  393     overflow: hidden;
  394 }
  395 
  396 .smiley-input {
  397     display: flex;
  398     position: relative;
  399 }
  400 
  401 .smileys-panel {
  402     bottom: 100%;
  403     box-sizing: border-box;
  404     background-color: rgba(0, 0, 0, .6) !important;
  405     height: auto;
  406     display: none;
  407     overflow: hidden;
  408     position: absolute;
  409     width: calc(#{$sidebarWidth} - 32px);
  410     margin-bottom: 5px;
  411     margin-left: -5px;
  412 
  413     /**
  414      * CSS transitions do not apply for auto dimensions. So to produce the css
  415      * accordion effect for showing and hiding the smiley-panel, while allowing
  416      * for variable panel, height, use a very large max-height and animate off
  417      * of that.
  418      */
  419     transition: max-height 0.3s;
  420 
  421     &.show-smileys {
  422         display: flex;
  423         max-height: 500%;
  424     }
  425 
  426     #smileysContainer {
  427         background-color: $chatBackgroundColor;
  428         border-top: 1px solid $chatInputSeparatorColor;
  429     }
  430 }
  431 
  432 #smileysContainer .smiley {
  433     font-size: 20pt;
  434 }
  435 
  436 .smileyContainer {
  437     width: 40px;
  438     height: 40px;
  439     display: inline-block;
  440     text-align: center;
  441 }
  442 
  443 .smileyContainer:hover {
  444     background-color: $newToolbarButtonToggleColor;
  445     border-radius: 5px;
  446     cursor: pointer;
  447 }
  448 
  449 #usermsg::-webkit-scrollbar-track-piece {
  450     background: #3a3a3a;
  451 }
  452 
  453 .chat-message-group {
  454     display: flex;
  455     flex-direction: column;
  456 
  457     &.local {
  458         align-items: flex-end;
  459 
  460         .chatmessage {
  461             background-color: $chatLocalMessageBackgroundColor;
  462             border-radius: 6px 0px 6px 6px;
  463 
  464             &.privatemessage {
  465                 background-color: $chatPrivateMessageBackgroundColor;
  466             }
  467             &.lobbymessage {
  468                 background-color: $chatLobbyMessageBackgroundColor;
  469             }
  470         }
  471 
  472         .display-name {
  473             display: none;
  474         }
  475 
  476         .timestamp {
  477             text-align: right;
  478         }
  479     }
  480 
  481     &.error {
  482         .chatmessage {
  483             background-color: $defaultWarningColor;
  484             border-radius: 0px;
  485             font-weight: 100;
  486         }
  487 
  488         .display-name {
  489             display: none;
  490         }
  491     }
  492 
  493     .chatmessage-wrapper {
  494         max-width: 100%;
  495 
  496         .replywrapper {
  497             display: flex;
  498             flex-direction: row;
  499             align-items: center;
  500 
  501             .messageactions {
  502                 align-self: stretch;
  503                 border-left: 1px solid $chatActionsSeparatorColor;
  504                 display: flex;
  505                 flex-direction: column;
  506                 justify-content: center;
  507                 padding: 5px;
  508 
  509                 &.lobbychatmessageactions {
  510                     border-left-color: $chatLobbyActionsSeparatorColor;
  511                 }
  512 
  513                 .toolbox-icon {
  514                     cursor: pointer;
  515                 }
  516             }
  517         }
  518     }
  519 
  520     .chatmessage {
  521         background-color: $chatRemoteMessageBackgroundColor;
  522         border-radius: 0px 6px 6px 6px;
  523         display: inline-block;
  524         margin-top: 3px;
  525         color: white;
  526 
  527         &.privatemessage {
  528             background-color: $chatPrivateMessageBackgroundColor;
  529         }
  530         &.lobbymessage {
  531             background-color: $chatLobbyMessageBackgroundColor;
  532         }
  533     }
  534 }
  535 
  536 .chat-dialog {
  537     display: flex;
  538     flex-direction: column;
  539     height: 100%;
  540     margin-top: -5px; // Margin set by atlaskit.
  541 
  542     &-header {
  543         display: flex;
  544         justify-content: space-between;
  545         align-items: center;
  546         margin: 16px;
  547         width: calc(100% - 32px);
  548         box-sizing: border-box;
  549         color: #fff;
  550         font-weight: 600;
  551         font-size: 24px;
  552         line-height: 32px;
  553 
  554         .jitsi-icon {
  555             cursor: pointer;
  556         }
  557     }
  558 
  559     #chatconversation {
  560         width: 100%;
  561     }
  562 }
  563 
  564 
  565 /**
  566  * Make header close button more easily tappable on mobile.
  567  */
  568 .mobile-browser .chat-dialog-header .jitsi-icon {
  569     display: grid;
  570     place-items: center;
  571     height: 48px;
  572     width: 48px;
  573     background: #36383C;
  574     border-radius: 3px;
  575 }
  576 
  577 .chat-tabs-container {
  578     width: 100%;
  579     border-bottom: thin solid #292929;
  580     display: flex;
  581     justify-content: space-around;
  582 }
  583 
  584 .chat-tab {
  585     font-size: 1.2em;
  586     padding-bottom: 0.5em;
  587     width: 50%;
  588     text-align: center;
  589     color: #8B8B8B;
  590     cursor: pointer;
  591 }
  592 
  593 .chat-tab-focus {
  594     border-bottom-style: solid;
  595     color: #FFF;
  596 }
  597 
  598 .chat-tab-title {
  599     margin-right: 8px;
  600 }
  601 
  602 .chat-tab-badge {
  603     background-color: #165ecc;
  604     border-radius: 50%;
  605     box-sizing: border-box;
  606     font-weight: 700;
  607     overflow: hidden;
  608     text-align: center;
  609     text-overflow: ellipsis;
  610     vertical-align: middle;
  611     padding: 0 4px;
  612     color: #FFF;
  613 }