"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-4434/css/_chat.scss" (25 Sep 2020, 7081 Bytes) of package /linux/misc/jitsi-meet-4434.tar.gz:

    1 #sideToolbarContainer {
    2     background-color: $newToolbarBackgroundColor;
    3     box-sizing: border-box;
    4     color: #FFF;
    5     display: flex;
    6     flex-direction: column;
    7     height: 100%;
    8     left: -$sidebarWidth;
    9     overflow: hidden;
   10     position: absolute;
   11     top: 0;
   12     width: $sidebarWidth;
   13     z-index: $sideToolbarContainerZ;
   14 
   15     /**
   16      * The sidebar (chat) is off-screen when hidden. Move it flush to the left
   17      * side of the window when it should be visible.
   18      */
   19     &.slideInExt {
   20         left: 0;
   21     }
   22 }
   23 
   24 #chatconversation {
   25     box-sizing: border-box;
   26     flex: 1;
   27     font-size: 10pt;
   28     line-height: 20px;
   29     overflow: auto;
   30     padding: 16px;
   31     text-align: left;
   32     width: $sidebarWidth;
   33     word-wrap: break-word;
   34 
   35     a {
   36         display: block;
   37     }
   38 
   39     a:link {
   40         color: rgb(184, 184, 184);
   41     }
   42 
   43     a:visited {
   44         color: white;
   45     }
   46 
   47     a:hover {
   48         color: rgb(213, 213, 213);
   49     }
   50 
   51     a:active {
   52         color: black;
   53     }
   54 
   55     &::-webkit-scrollbar {
   56         background: #06a5df;
   57         width: 7px;
   58     }
   59 
   60     &::-webkit-scrollbar-button {
   61         display: none;
   62     }
   63 
   64     &::-webkit-scrollbar-track {
   65         background: black;
   66     }
   67 
   68     &::-webkit-scrollbar-track-piece {
   69         background: black;
   70     }
   71 
   72     &::-webkit-scrollbar-thumb {
   73         background: #06a5df;
   74         border-radius: 4px;
   75     }
   76 }
   77 
   78 #chat-recipient {
   79     align-items: center;
   80     background-color: $chatPrivateMessageBackgroundColor;
   81     display: flex;
   82     flex-direction: row;
   83     font-weight: 100;
   84     padding: 10px;
   85 
   86     span {
   87         color: white;
   88         display: flex;
   89         flex: 1;
   90     }
   91 
   92     div {
   93         svg {
   94             cursor: pointer;
   95             fill: white
   96         }
   97     }
   98 }
   99 
  100 .chat-header {
  101     background-color: $chatHeaderBackgroundColor;
  102     height: 70px;
  103     position: relative;
  104     width: 100%;
  105     z-index: 1;
  106 
  107     .chat-close {
  108         align-items: center;
  109         bottom: 8px;
  110         color: white;
  111         cursor: pointer;
  112         display: flex;
  113         font-size: 18px;
  114         height: 40px;
  115         justify-content: center;
  116         line-height: 15px;
  117         padding: 4px;
  118         position: absolute;
  119         right: 5px;
  120         width: 40px;
  121 
  122         &:hover {
  123             color: rgba(255, 255, 255, 0.8);
  124         }
  125     }
  126 }
  127 
  128 #chat-input {
  129     border-top: 1px solid $chatInputSeparatorColor;
  130     display: flex;
  131     padding: 5px 10px;
  132 
  133     * {
  134         background-color: transparent;
  135     }
  136 }
  137 
  138 .remoteuser {
  139     color: #B8C7E0;
  140 }
  141 
  142 .usrmsg-form {
  143     flex: 1;
  144 }
  145 
  146 #usermsg {
  147     border: 0px none;
  148     border-radius:0;
  149     box-shadow: none;
  150     color: white;
  151     font-size: 15px;
  152     padding: 10px;
  153     overflow-y: auto;
  154     resize: none;
  155     width: 100%;
  156     word-break: break-word;
  157 }
  158 
  159 #usermsg:hover {
  160     border: 0px none;
  161     box-shadow: none;
  162 }
  163 
  164 #nickname {
  165     text-align: center;
  166     color: #9d9d9d;
  167     font-size: 18px;
  168     margin-top: 30px;
  169     left: 5px;
  170     right: 5px;
  171 }
  172 
  173 .sideToolbarContainer {
  174     * {
  175         -webkit-user-select: text;
  176         user-select: text;
  177     }
  178 
  179     .display-name {
  180         font-size: 13px;
  181         font-weight: bold;
  182         margin-bottom: 5px;
  183         white-space: nowrap;
  184         text-overflow: ellipsis;
  185         overflow: hidden;
  186     }
  187 }
  188 
  189 .chatmessage {
  190     background-color: $chatRemoteMessageBackgroundColor;
  191     border-radius: 0px 6px 6px 6px;
  192     box-sizing: border-box;
  193     color: white;
  194     margin-top: 3px;
  195     max-width: 100%;
  196     position: relative;
  197 
  198     &.localuser {
  199         background-color: $chatLocalMessageBackgroundColor;
  200         border-radius: 6px 0px 6px 6px;
  201     }
  202 
  203     .usermessage {
  204         white-space: pre-wrap;
  205     }
  206 
  207     &.error {
  208         border-radius: 0px;
  209 
  210         .timestamp,
  211         .display-name {
  212             display: none;
  213         }
  214 
  215         .usermessage {
  216             color: red;
  217             padding: 0;
  218         }
  219     }
  220 
  221     .privatemessagenotice {
  222         font-size: 11px;
  223         font-weight: 100;
  224     }
  225 
  226     .messagecontent {
  227         margin: 5px 10px;
  228         max-width: 100%;
  229         overflow: hidden;
  230     }
  231 }
  232 
  233 .smiley {
  234     font-size: 14pt;
  235 }
  236 
  237 #smileys {
  238     font-size: 20pt;
  239     margin: auto;
  240     cursor: pointer;
  241 }
  242 
  243 #smileys img {
  244     width: 22px;
  245     padding: 2px;
  246 }
  247 
  248 #smileysarea {
  249     display: flex;
  250     max-height: 150px;
  251     min-height: 35px;
  252     overflow: hidden;
  253 }
  254 
  255 .smiley-input {
  256     display: flex;
  257     position: relative;
  258 }
  259 
  260 .smileys-panel {
  261     bottom: 100%;
  262     box-sizing: border-box;
  263     background-color: rgba(0, 0, 0, .6) !important;
  264     height: auto;
  265     max-height: 0;
  266     overflow: hidden;
  267     position: absolute;
  268     width: $sidebarWidth;
  269 
  270     /**
  271      * CSS transitions do not apply for auto dimensions. So to produce the css
  272      * accordion effect for showing and hiding the smiley-panel, while allowing
  273      * for variable panel, height, use a very large max-height and animate off
  274      * of that.
  275      */
  276     transition: max-height 0.3s;
  277 
  278     &.show-smileys {
  279         max-height: 500%;
  280     }
  281 
  282     #smileysContainer {
  283         background-color: $newToolbarBackgroundColor;
  284         border-bottom: 1px solid;
  285         border-top: 1px solid;
  286     }
  287 }
  288 
  289 #smileysContainer .smiley {
  290     font-size: 20pt;
  291 }
  292 
  293 .smileyContainer {
  294     width: 40px;
  295     height: 36px;
  296     display: inline-block;
  297     text-align: center;
  298 }
  299 
  300 .smileyContainer:hover {
  301     background-color: $newToolbarButtonToggleColor;
  302     border-radius: 5px;
  303     cursor: pointer;
  304 }
  305 
  306 #usermsg::-webkit-scrollbar-track-piece {
  307     background: #3a3a3a;
  308 }
  309 
  310 .chat-message-group {
  311     display: flex;
  312     flex-direction: column;
  313 
  314     &.local {
  315         align-items: flex-end;
  316 
  317         .chatmessage {
  318             background-color: $chatLocalMessageBackgroundColor;
  319             border-radius: 6px 0px 6px 6px;
  320 
  321             &.privatemessage {
  322                 background-color: $chatPrivateMessageBackgroundColor;
  323             }
  324         }
  325 
  326         .display-name {
  327             display: none;
  328         }
  329 
  330         .timestamp {
  331             text-align: right;
  332         }
  333     }
  334 
  335     &.error {
  336         .chatmessage {
  337             background-color: $defaultWarningColor;
  338             border-radius: 0px;
  339             font-weight: 100;
  340         }
  341 
  342         .display-name {
  343             display: none;
  344         }
  345     }
  346 
  347     .chatmessage-wrapper {
  348         max-width: 100%;
  349 
  350         .replywrapper {
  351             display: flex;
  352             flex-direction: row;
  353             align-items: center;
  354 
  355             .messageactions {
  356                 align-self: stretch;
  357                 border-left: 1px solid $chatActionsSeparatorColor;
  358                 display: flex;
  359                 flex-direction: column;
  360                 justify-content: center;
  361                 padding: 5px;
  362 
  363                 .toolbox-icon {
  364                     cursor: pointer;
  365                 }
  366             }
  367         }
  368     }
  369 
  370     .chatmessage {
  371         background-color: $chatRemoteMessageBackgroundColor;
  372         border-radius: 0px 6px 6px 6px;
  373         display: inline-block;
  374         margin-top: 3px;
  375         color: white;
  376 
  377         &.privatemessage {
  378             background-color: $chatPrivateMessageBackgroundColor;
  379         }
  380     }
  381 }