|
|
@@ -1,341 +1,106 @@
|
|
|
-/*!
|
|
|
- * Converse.js (Web-based XMPP instant messaging client)
|
|
|
- * http://conversejs.org
|
|
|
- *
|
|
|
- * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
|
|
|
- * Licensed under the Mozilla Public License
|
|
|
- */
|
|
|
-
|
|
|
-@font-face {
|
|
|
- font-family: 'Converse-js';
|
|
|
- src: url($font-path + 'icomoon.eot?-mnoxh0');
|
|
|
- src: url($font-path + 'icomoon.eot?#iefix-mnoxh0') format("embedded-opentype"), url($font-path + 'icomoon.woff?-mnoxh0') format("woff"), url($font-path + 'icomoon.ttf?-mnoxh0') format("truetype"), url($font-path + 'icomoon.svg?-mnoxh0#icomoon') format("svg");
|
|
|
- font-weight: normal;
|
|
|
- font-style: normal;
|
|
|
-}
|
|
|
-
|
|
|
-.icon-conversejs {
|
|
|
- font-family: 'Converse-js';
|
|
|
- speak: none;
|
|
|
- font-style: normal;
|
|
|
- font-weight: normal;
|
|
|
- font-variant: normal;
|
|
|
- text-transform: none;
|
|
|
- line-height: 1;
|
|
|
- /* Better Font Rendering =========== */
|
|
|
- -webkit-font-smoothing: antialiased;
|
|
|
- -moz-osx-font-smoothing: grayscale;
|
|
|
-}
|
|
|
-.icon-conversejs:before {
|
|
|
- content: "\e600";
|
|
|
-}
|
|
|
-
|
|
|
#conversejs {
|
|
|
- ::selection {
|
|
|
- background-color: $highlight-color;
|
|
|
- }
|
|
|
- ::-moz-selection {
|
|
|
- background-color: $highlight-color;
|
|
|
- }
|
|
|
-
|
|
|
- color: $text-color;
|
|
|
- font-size: $font-size;
|
|
|
- bottom: 0;
|
|
|
- direction: ltr;
|
|
|
- height: $bottom-gutter-height;
|
|
|
- left: auto;
|
|
|
- position: fixed;
|
|
|
- right: 15px;
|
|
|
- z-index: 30;
|
|
|
- display: block;
|
|
|
- width: auto;
|
|
|
-
|
|
|
- @include box-sizing(border-box);
|
|
|
- *, *:before, *:after {
|
|
|
- @include box-sizing(border-box);
|
|
|
- }
|
|
|
-
|
|
|
- @media screen and (max-width: $mobile-landscape-length) {
|
|
|
- margin: 0;
|
|
|
- right: 10px;
|
|
|
- left: 10px;
|
|
|
- bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- a, a:visited {
|
|
|
- text-decoration: none;
|
|
|
- color: $link-color;
|
|
|
- text-shadow: none;
|
|
|
- }
|
|
|
-
|
|
|
- ul li { height: auto; }
|
|
|
- div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
|
|
|
- pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
|
|
|
- fieldset, form, label, legend, table, caption, tbody,
|
|
|
- tfoot, thead, tr, th, td, article, aside, canvas, details,
|
|
|
- embed, figure, figcaption, footer, header, hgroup, menu,
|
|
|
- nav, output, ruby, section, summary, time, mark, audio, video {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- border: 0;
|
|
|
- font: inherit;
|
|
|
- vertical-align: baseline;
|
|
|
- }
|
|
|
-
|
|
|
- textarea,
|
|
|
- input[type=submit], input[type=button],
|
|
|
- input[type=text], input[type=password],
|
|
|
- button {
|
|
|
+ bottom: 0;
|
|
|
+ color: $text-color;
|
|
|
+ direction: ltr;
|
|
|
+ display: block;
|
|
|
font-size: $font-size;
|
|
|
- padding: 0.25em;
|
|
|
- min-height: 0;
|
|
|
- }
|
|
|
-
|
|
|
- input[type=text] {
|
|
|
- height: 26px;
|
|
|
- }
|
|
|
-
|
|
|
- strong {
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- ol, ul {
|
|
|
- list-style: none;
|
|
|
- }
|
|
|
-
|
|
|
- li {
|
|
|
- height: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- ul, ol, dl {
|
|
|
- font: inherit;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- [data-icon]:before {
|
|
|
- content: attr(data-icon);
|
|
|
- font-family: 'Converse-js';
|
|
|
- font-variant: normal;
|
|
|
- font-weight: normal;
|
|
|
- line-height: 1;
|
|
|
- speak: none;
|
|
|
- text-transform: none;
|
|
|
- /* Better Font Rendering =========== */
|
|
|
- -webkit-font-smoothing: antialiased;
|
|
|
- -moz-osx-font-smoothing: grayscale;
|
|
|
- }
|
|
|
-
|
|
|
- [class^="icon-"], [class*=" icon-"] {
|
|
|
- background-position: 14px 14px;
|
|
|
- background-image: none;
|
|
|
- font-family: 'Converse-js';
|
|
|
- font-style: normal;
|
|
|
- font-variant: normal;
|
|
|
- font-weight: normal;
|
|
|
+ height: $bottom-gutter-height;
|
|
|
+ left: auto;
|
|
|
+ position: fixed;
|
|
|
+ right: 15px;
|
|
|
width: auto;
|
|
|
- height: auto;
|
|
|
- line-height: 1;
|
|
|
- speak: none;
|
|
|
- text-transform: none;
|
|
|
- /* Better Font Rendering =========== */
|
|
|
- -webkit-font-smoothing: antialiased;
|
|
|
- -moz-osx-font-smoothing: grayscale;
|
|
|
- }
|
|
|
-
|
|
|
- .icon-address-book:before { content: "\270f"; }
|
|
|
- .icon-angry:before { content: "\e03f"; }
|
|
|
- .icon-attachment:before { content: "\e032"; }
|
|
|
- .icon-away:before { content: "\25fb"; }
|
|
|
- .icon-blocked:before { content: "\2718"; }
|
|
|
- .icon-bold:before { content: "\e04d"; }
|
|
|
- .icon-bubbles-2:before { content: "\e016"; }
|
|
|
- .icon-bubbles-3:before { content: "\e017"; }
|
|
|
- .icon-bubbles:before { content: "\e015"; }
|
|
|
- .icon-camera-2:before { content: "\2616"; }
|
|
|
- .icon-camera:before { content: "\e003"; }
|
|
|
- .icon-cancel-circle:before { content: "\e058"; }
|
|
|
- .icon-checkbox-checked:before { content: "\2611"; }
|
|
|
- .icon-checkbox-partial:before { content: "\2b28"; }
|
|
|
- .icon-checkbox-unchecked:before { content: "\2b27"; }
|
|
|
- .icon-checkmark:before { content: "\2713"; }
|
|
|
- .icon-close:before { content: "\2715"; }
|
|
|
- .icon-closed:before { content: "\25ba"; }
|
|
|
- .icon-cog:before { content: "\e02f"; }
|
|
|
- .icon-cogs:before { content: "\e022"; }
|
|
|
- .icon-confused:before { content: "\2368"; }
|
|
|
- .icon-cool:before { content: "\e040"; }
|
|
|
- .icon-dnd:before { content: "\e004"; }
|
|
|
- .icon-envelop:before { content: "\2709"; }
|
|
|
- .icon-evil:before { content: "\261f"; }
|
|
|
- .icon-eye-blocked:before { content: "\e031"; }
|
|
|
- .icon-eye:before { content: "\e030"; }
|
|
|
- .icon-globe:before { content: "\e033"; }
|
|
|
- .icon-grin:before { content: "\e041"; }
|
|
|
- .icon-happy:before { content: "\263b"; }
|
|
|
- .icon-headphones:before { content: "\266c"; }
|
|
|
- .icon-heart:before { content: "\2764"; }
|
|
|
- .icon-hide-users:before { content: "\e01c"; }
|
|
|
- .icon-home:before { content: "\e000"; }
|
|
|
- .icon-image:before { content: "\2b14"; }
|
|
|
- .icon-info:before { content: "\2360"; }
|
|
|
- .icon-italic:before { content: "\e04f"; }
|
|
|
- .icon-key-2:before { content: "\e029"; }
|
|
|
- .icon-key:before { content: "\e028"; }
|
|
|
- .icon-lock-2:before { content: "\e027"; }
|
|
|
- .icon-lock:before { content: "\e026"; }
|
|
|
- .icon-logout:before { content: "\e601"; }
|
|
|
- .icon-minus:before { content: "\e05a"; }
|
|
|
- .icon-music:before { content: "\266b"; }
|
|
|
- .icon-new-tab:before { content: "\e053"; }
|
|
|
- .icon-newspaper:before { content: "\e001"; }
|
|
|
- .icon-notebook:before { content: "\2710"; }
|
|
|
- .icon-notification:before { content: "\e01f"; }
|
|
|
- .icon-online:before { content: "\25fc"; }
|
|
|
- .icon-chat:before { content: "\25fc"; }
|
|
|
- .icon-opened:before { content: "\25bc"; }
|
|
|
- .icon-pencil:before { content: "\270e"; }
|
|
|
- .icon-phone-hang-up:before { content: "\260e"; }
|
|
|
- .icon-phone:before { content: "\260f"; }
|
|
|
- .icon-play:before { content: "\25d9"; }
|
|
|
- .icon-plus:before { content: "\271a"; }
|
|
|
- .icon-pushpin:before { content: "\e012"; }
|
|
|
- .icon-quotes-left:before { content: "\e01d"; }
|
|
|
- .icon-radio-checked:before { content: "\2b26"; }
|
|
|
- .icon-radio-unchecked:before { content: "\2b25"; }
|
|
|
- .icon-remove:before { content: "\e02d"; }
|
|
|
- .icon-room-info:before { content: "\e059"; }
|
|
|
- .icon-sad:before { content: "\2639"; }
|
|
|
- .icon-search:before { content: "\e021"; }
|
|
|
- .icon-shocked:before { content: "\2364"; }
|
|
|
- .icon-show-users:before { content: "\e01e"; }
|
|
|
- .icon-smiley:before { content: "\263a"; }
|
|
|
- .icon-spell-check:before { content: "\e045"; }
|
|
|
- .icon-spinner:before { content: "\231b"; }
|
|
|
- .icon-strikethrough:before { content: "\e050"; }
|
|
|
- .icon-thumbs-up:before { content: "\261d"; }
|
|
|
- .icon-tongue:before { content: "\e038"; }
|
|
|
- .icon-underline:before { content: "\e04e"; }
|
|
|
- .icon-unlocked:before { content: "\e025"; }
|
|
|
- .icon-user:before { content: "\e01a"; }
|
|
|
- .icon-users:before { content: "\e01b"; }
|
|
|
- .icon-volume-decrease:before { content: "\e04b"; }
|
|
|
- .icon-volume-high:before { content: "\e046"; }
|
|
|
- .icon-volume-increase:before { content: "\e04c"; }
|
|
|
- .icon-volume-low:before { content: "\e048"; }
|
|
|
- .icon-volume-medium:before { content: "\e047"; }
|
|
|
- .icon-volume-mute-2:before { content: "\e04a"; }
|
|
|
- .icon-volume-mute:before { content: "\e049"; }
|
|
|
- .icon-warning:before { content: "\26a0"; }
|
|
|
- .icon-wink:before { content: "\e03a"; }
|
|
|
- .icon-wondering:before { content: "\2369"; }
|
|
|
- .icon-wrench:before { content: "\e024"; }
|
|
|
- .icon-xa:before { content: "\e602"; }
|
|
|
- .icon-unavailable:before,
|
|
|
- .icon-offline:before { content: "\e002"; }
|
|
|
- .icon-youtube:before { content: "\e055"; }
|
|
|
- .icon-zoom-in:before { content: "\e02b"; }
|
|
|
- .icon-zoom-out:before { content: "\e02a"; }
|
|
|
-
|
|
|
- .no-text-select {
|
|
|
- -webkit-touch-callout: none;
|
|
|
- @include user-select(none);
|
|
|
- }
|
|
|
-
|
|
|
- .emoticon {
|
|
|
- font-size: $font-size;
|
|
|
- }
|
|
|
- .left {
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .right {
|
|
|
- float: right;
|
|
|
- }
|
|
|
- .hidden {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .locked {
|
|
|
- padding-right: 22px;
|
|
|
- }
|
|
|
+ z-index: 30;
|
|
|
|
|
|
- @include keyframes(spin) {
|
|
|
- from {
|
|
|
- @include transform(rotate(0deg));
|
|
|
+ ::selection {
|
|
|
+ background-color: $highlight-color;
|
|
|
}
|
|
|
- to {
|
|
|
- @include transform(rotate(359deg));
|
|
|
+ ::-moz-selection {
|
|
|
+ background-color: $highlight-color;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .spinner:before {
|
|
|
- font-size: 24px;
|
|
|
- font-family: 'Converse-js' !important;
|
|
|
- content: "\231b";
|
|
|
- }
|
|
|
- .spinner {
|
|
|
- @include animation(spin 2s infinite, linear);
|
|
|
- display: block;
|
|
|
- text-align: center;
|
|
|
- margin: 5px;
|
|
|
- }
|
|
|
|
|
|
- .centered {
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- margin: 5em auto;
|
|
|
- }
|
|
|
- .hor_centered {
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- margin: 0 auto;
|
|
|
- clear: both;
|
|
|
- }
|
|
|
+ .no-text-select {
|
|
|
+ -webkit-touch-callout: none;
|
|
|
+ @include user-select(none);
|
|
|
+ }
|
|
|
+ .emoticon {
|
|
|
+ font-size: $font-size;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .centered {
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ margin: 5em auto;
|
|
|
+ }
|
|
|
+ .hor_centered {
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ .hidden {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .locked {
|
|
|
+ padding-right: 22px;
|
|
|
+ }
|
|
|
|
|
|
- .button-group,
|
|
|
- .input-button-group {
|
|
|
- display: table;
|
|
|
- }
|
|
|
- .button-group {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .input-button-group button,
|
|
|
- .input-button-group input {
|
|
|
- display: table-cell;
|
|
|
- }
|
|
|
+ @include keyframes(spin) {
|
|
|
+ from {
|
|
|
+ @include transform(rotate(0deg));
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ @include transform(rotate(359deg));
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .chat-body {
|
|
|
- background-color: white;
|
|
|
- border-bottom-right-radius: $chatbox-border-radius;
|
|
|
- border-bottom-left-radius: $chatbox-border-radius;
|
|
|
- height: 289px;
|
|
|
- @include calc(height, '100% - #{$chat-head-height}');
|
|
|
- border-top: 0;
|
|
|
- p {
|
|
|
- font-size: $font-size;
|
|
|
- color: $text-color;
|
|
|
- padding: 5px;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ .spinner {
|
|
|
+ @include animation(spin 2s infinite, linear);
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ margin: 5px;
|
|
|
+ &:before {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: 'Converse-js' !important;
|
|
|
+ content: "\231b";
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .tt-highlight {
|
|
|
- background-color: #00230F;
|
|
|
- }
|
|
|
+ .button-group,
|
|
|
+ .input-button-group {
|
|
|
+ display: table;
|
|
|
+ }
|
|
|
+ .button-group {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .input-button-group button,
|
|
|
+ .input-button-group input {
|
|
|
+ display: table-cell;
|
|
|
+ }
|
|
|
|
|
|
- .tt-suggestion {
|
|
|
- p {
|
|
|
- color: white;
|
|
|
- text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 11px;
|
|
|
- }
|
|
|
- p:hover {
|
|
|
- background-color: #00230F;
|
|
|
- .tt-highlight {
|
|
|
+ .tt-highlight {
|
|
|
background-color: #00230F;
|
|
|
- background: #27774A;
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
+
|
|
|
+ .tt-suggestion {
|
|
|
+ p {
|
|
|
+ color: white;
|
|
|
+ text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+ p:hover {
|
|
|
+ background-color: #00230F;
|
|
|
+ .tt-highlight {
|
|
|
+ background-color: #00230F;
|
|
|
+ background: #27774A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.tt-dropdown-menu {
|
|
|
margin: 0 1px 0 1px;
|
|
|
@@ -353,18 +118,6 @@
|
|
|
border-right: 1px solid #176679;
|
|
|
border-left: 1px solid #176679;
|
|
|
}
|
|
|
- .chat-content {
|
|
|
- position: relative;
|
|
|
- padding: 0.5em;
|
|
|
- font-size: 13px;
|
|
|
- color: $text-color;
|
|
|
- overflow-y: auto;
|
|
|
- border: 0;
|
|
|
- background-color: #ffffff;
|
|
|
- line-height: 1.3em;
|
|
|
- height: 206px;
|
|
|
- height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
|
|
|
- }
|
|
|
.chat-info {
|
|
|
color: $text-color;
|
|
|
}
|
|
|
@@ -372,527 +125,169 @@
|
|
|
color: $warning-color;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+ .chat-error,
|
|
|
+ .chat-info,
|
|
|
+ .chat-message {
|
|
|
+ padding: 2px 0;
|
|
|
+ }
|
|
|
+ .chat-message-room,
|
|
|
+ .chat-message-them,
|
|
|
+ .chat-message-me {
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ max-width: 100px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ padding-right: 3px;
|
|
|
+ }
|
|
|
|
|
|
- .chat-error,
|
|
|
- .chat-info,
|
|
|
- .chat-message {
|
|
|
- padding: 2px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-message-room,
|
|
|
- .chat-message-them,
|
|
|
- .chat-message-me {
|
|
|
- font-weight: bold;
|
|
|
- white-space: nowrap;
|
|
|
- max-width: 100px;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- padding-right: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-message-content {
|
|
|
- word-wrap: break-word;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-message-room,
|
|
|
- .chat-message-them {
|
|
|
- color: $message-them-color;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-message-me {
|
|
|
- color: $link-color;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-event,
|
|
|
- .chat-date,
|
|
|
- .chat-info {
|
|
|
- color: #808080;
|
|
|
- }
|
|
|
-
|
|
|
- li.chat-info {
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-date {
|
|
|
- display: inline-block;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .not-implemented {
|
|
|
- margin-top: 3em;
|
|
|
- margin-left: 0.3em;
|
|
|
- color: #808080;
|
|
|
- }
|
|
|
-
|
|
|
- .mentioned {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .delayed {
|
|
|
+ .chat-message-content {
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
+ .chat-message-room,
|
|
|
.chat-message-them {
|
|
|
- color: #FB5D50;
|
|
|
+ color: $message-them-color;
|
|
|
}
|
|
|
.chat-message-me {
|
|
|
- color: #7EABBB;
|
|
|
+ color: $link-color;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .error {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- input.error {
|
|
|
- border: 1px solid red;
|
|
|
- }
|
|
|
-
|
|
|
- .reg-feedback {
|
|
|
- font-size: 85%;
|
|
|
- }
|
|
|
|
|
|
- .reg-feedback,
|
|
|
- #converse-login .conn-feedback {
|
|
|
- display: block;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-message-error {
|
|
|
- color: #76797C;
|
|
|
- font-size: 90%;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
-
|
|
|
- a.restore-chat,
|
|
|
- .chat-title {
|
|
|
- padding: 1px 0 1px 5px;
|
|
|
- color: $chat-head-text-color;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 15px;
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
|
|
|
- }
|
|
|
-
|
|
|
- a.restore-chat:visited {
|
|
|
- color: $chat-head-text-color;
|
|
|
- }
|
|
|
+ .chat-event,
|
|
|
+ .chat-date,
|
|
|
+ .chat-info {
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
|
|
|
- .chat-title a {
|
|
|
- color: $chat-head-text-color;
|
|
|
- width: 100%;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
+ li.chat-info {
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .chat-head-chatbox,
|
|
|
- .chat-head-chatroom {
|
|
|
- height: $chat-head-height;
|
|
|
- position: relative;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
- .chat-head-chatroom {
|
|
|
- background-color: $chatroom-head-color;
|
|
|
- }
|
|
|
- .chat-head-chatbox {
|
|
|
- background-color: $chat-head-color;
|
|
|
- }
|
|
|
+ .chat-date {
|
|
|
+ display: inline-block;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .user-custom-message,
|
|
|
- .chatroom-topic {
|
|
|
- color: white;
|
|
|
- font-size: 80%;
|
|
|
- font-style: italic;
|
|
|
- height: 1.3em;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- margin: 0;
|
|
|
- padding: 1px 0 1px 5px;
|
|
|
- }
|
|
|
+ .not-implemented {
|
|
|
+ margin-top: 3em;
|
|
|
+ margin-left: 0.3em;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
|
|
|
- .activated {
|
|
|
- display: block !important;
|
|
|
- }
|
|
|
+ .mentioned {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- a.subscribe-to-user {
|
|
|
- padding-left: 2em;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .delayed {
|
|
|
+ .chat-message-them {
|
|
|
+ color: #FB5D50;
|
|
|
+ }
|
|
|
+ .chat-message-me {
|
|
|
+ color: #7EABBB;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- dl.add-converse-contact {
|
|
|
- margin: 0 0.5em 0.75em 0.5em;
|
|
|
- }
|
|
|
+ .error {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ input.error {
|
|
|
+ border: 1px solid red;
|
|
|
+ }
|
|
|
|
|
|
- #found-users {
|
|
|
- padding: 10px 0 5px 5px;
|
|
|
- border: 0;
|
|
|
- }
|
|
|
+ .reg-feedback {
|
|
|
+ font-size: 85%;
|
|
|
+ }
|
|
|
|
|
|
- a.configure-chatroom-button,
|
|
|
- a.toggle-chatbox-button,
|
|
|
- a.close-chatbox-button {
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px solid #888;
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- display: inline-block;
|
|
|
- float: right;
|
|
|
- font-size: $box-close-font-size;
|
|
|
- margin: 0 0 0 3px;
|
|
|
- padding-top: $box-close-button-padding-top;
|
|
|
- padding-bottom: $box-close-button-padding-bottom;
|
|
|
- padding-left: $box-close-button-padding-left;
|
|
|
- padding-right: $box-close-button-padding-right;
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
+ .reg-feedback,
|
|
|
+ #converse-login .conn-feedback {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- a.configure-chatroom-button:active,
|
|
|
- a.toggle-chatbox-button:active,
|
|
|
- a.close-chatbox-button:active {
|
|
|
- position: relative;
|
|
|
- top: 1px;
|
|
|
- }
|
|
|
+ .chat-message-error {
|
|
|
+ color: #76797C;
|
|
|
+ font-size: 90%;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
|
|
|
- .requesting-xmpp-contact .request-actions {
|
|
|
- margin-left: 0.5em;
|
|
|
- float: right;
|
|
|
- }
|
|
|
+ a.restore-chat,
|
|
|
+ .chat-title {
|
|
|
+ padding: 1px 0 1px 5px;
|
|
|
+ color: $chat-head-text-color;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 15px;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
|
|
|
+ }
|
|
|
|
|
|
- #available-chatrooms {
|
|
|
- text-align: left;
|
|
|
- dt {
|
|
|
- font-weight: normal;
|
|
|
- color: $text-color;
|
|
|
- border: none;
|
|
|
- padding: 0.5em;
|
|
|
- text-shadow: 0 1px 0 $text-shadow-color;
|
|
|
- }
|
|
|
- }
|
|
|
+ a.restore-chat:visited {
|
|
|
+ color: $chat-head-text-color;
|
|
|
+ }
|
|
|
|
|
|
- .room-info {
|
|
|
- font-size: 11px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
+ .user-custom-message,
|
|
|
+ .chatroom-topic {
|
|
|
+ color: white;
|
|
|
+ font-size: 80%;
|
|
|
+ font-style: italic;
|
|
|
+ height: 1.3em;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin: 0;
|
|
|
+ padding: 1px 0 1px 5px;
|
|
|
+ }
|
|
|
|
|
|
- li.room-info {
|
|
|
- display: block;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
+ .activated {
|
|
|
+ display: block !important;
|
|
|
+ }
|
|
|
|
|
|
- div.room-info {
|
|
|
- clear: left;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ a.subscribe-to-user {
|
|
|
+ padding-left: 2em;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- p.room-info {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- display: block;
|
|
|
- white-space: normal;
|
|
|
- }
|
|
|
+ #found-users {
|
|
|
+ padding: 10px 0 5px 5px;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
|
|
|
- a {
|
|
|
- &.room-info {
|
|
|
- width: 15px;
|
|
|
- display: none;
|
|
|
- clear: right;
|
|
|
- }
|
|
|
- &.open-room {
|
|
|
- float: left;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow-x: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
+ .form-help {
|
|
|
+ color: gray;
|
|
|
+ font-size: 85%;
|
|
|
+ padding-top: 5px;
|
|
|
+ &:hover {
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- dd.available-chatroom {
|
|
|
- border: none;
|
|
|
- clear: both;
|
|
|
- color: $text-color;
|
|
|
- display: block;
|
|
|
- font-weight: bold;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0.25em 0.5em;
|
|
|
- text-overflow: ellipsis;
|
|
|
- text-shadow: 0 1px 0 $text-shadow-color;
|
|
|
- white-space: nowrap;
|
|
|
- a.open-room {
|
|
|
- width: 150px;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background-color: $highlight-color;
|
|
|
- .room-info {
|
|
|
- display: block;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ .chatroom-form label,
|
|
|
+ .controlbox-pane label,
|
|
|
+ #converse-register label,
|
|
|
+ #converse-login label {
|
|
|
+ font-size: $font-size;
|
|
|
+ font-weight: bold;
|
|
|
+ height: auto;
|
|
|
+ margin: 4px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .chatbox,
|
|
|
- .chatroom {
|
|
|
- height: $bottom-gutter-height;
|
|
|
- float: right;
|
|
|
- margin: 0 $chat-gutter;
|
|
|
- @media screen and (max-width: $mobile-landscape-length) {
|
|
|
+ .chat-textarea-chatbox-selected {
|
|
|
+ border: 1px solid #578308;
|
|
|
margin: 0;
|
|
|
}
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .chatbox {
|
|
|
- width: $chat-width;
|
|
|
- @media screen and (max-width: $mobile-landscape-length) {
|
|
|
- width: $mobile-chat-width;
|
|
|
- }
|
|
|
- .box-flyout {
|
|
|
- z-index: 1;
|
|
|
- width: $chat-width;
|
|
|
- @media screen and (max-width: $mobile-landscape-length) {
|
|
|
- width: $mobile-chat-width;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .form-help {
|
|
|
- color: gray;
|
|
|
- font-size: 85%;
|
|
|
- padding-top: 5px;
|
|
|
- &:hover {
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .chatroom-form label,
|
|
|
- .controlbox-pane label,
|
|
|
- #converse-register label,
|
|
|
- #converse-login label {
|
|
|
- font-size: $font-size;
|
|
|
- font-weight: bold;
|
|
|
- height: auto;
|
|
|
- margin: 4px;
|
|
|
- }
|
|
|
|
|
|
- /* @group Tabs */
|
|
|
- .chat-head {
|
|
|
- border-top-left-radius: $chatbox-border-radius;
|
|
|
- border-top-right-radius: $chatbox-border-radius;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 100%;
|
|
|
- margin: 0;
|
|
|
- padding: 6px;
|
|
|
- &.controlbox-head {
|
|
|
- background-color: $chat-head-color;
|
|
|
- border-top-left-radius: $chatbox-border-radius;
|
|
|
- border-top-right-radius: $chatbox-border-radius;
|
|
|
- color: $chat-head-inverse-text-color;
|
|
|
- height: $chat-head-height;
|
|
|
- margin: 0;
|
|
|
- padding: 6px 6px 6px 0;
|
|
|
- }
|
|
|
- .avatar {
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- #chatrooms {
|
|
|
- overflow-y: auto;
|
|
|
+ .chat-textarea-chatroom-selected {
|
|
|
+ border: 2px solid $link-color;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
- form.sendXMPPMessage {
|
|
|
- -moz-background-clip: padding;
|
|
|
- -webkit-background-clip: padding-box;
|
|
|
- @include border-bottom-radius($chatbox-border-radius);
|
|
|
- background-clip: padding-box;
|
|
|
- background: white;
|
|
|
- border-top: 1px solid #BBB;
|
|
|
- border: 0;
|
|
|
+ .dropdown dt,
|
|
|
+ .dropdown ul {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
- position: relative;
|
|
|
- height: #{$chat-textarea-height + $toolbar-height};
|
|
|
- min-width: $chat-width;
|
|
|
- @media screen and (max-width: $mobile-landscape-length) {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .chat-textarea {
|
|
|
- @include border-bottom-radius($chatbox-border-radius);
|
|
|
- border: 0;
|
|
|
- height: $chat-textarea-height;
|
|
|
- padding: 0.5em;
|
|
|
- width: 100%;
|
|
|
- resize: none;
|
|
|
- }
|
|
|
- .chat-toolbar {
|
|
|
- font-size: $font-size;
|
|
|
- margin: 0;
|
|
|
- padding: 5px;
|
|
|
- height: $toolbar-height;
|
|
|
- display: block;
|
|
|
- background-color: $light-background-color;
|
|
|
- a {
|
|
|
- color: $link-color;
|
|
|
- }
|
|
|
- .unencrypted a,
|
|
|
- .unencrypted {
|
|
|
- color: #8f2831;
|
|
|
- }
|
|
|
- .unverified a,
|
|
|
- .unverified {
|
|
|
- color: #cf5300;
|
|
|
- }
|
|
|
- .private a,
|
|
|
- .private {
|
|
|
- color: #4b7003;
|
|
|
- }
|
|
|
- .toggle-participants,
|
|
|
- .toggle-clear,
|
|
|
- .toggle-otr {
|
|
|
- float: right;
|
|
|
- }
|
|
|
- li {
|
|
|
- display: inline-block;
|
|
|
- list-style: none;
|
|
|
- padding: 0 3px 0 3px;
|
|
|
- cursor: pointer;
|
|
|
- margin-top: 1px;
|
|
|
- }
|
|
|
- li:hover {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- ul {
|
|
|
- background: #fff;
|
|
|
- bottom: 100%;
|
|
|
- box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
|
|
- display: none;
|
|
|
- font-size: 12px;
|
|
|
- margin: 0 0 1px 0;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- li {
|
|
|
- cursor: pointer;
|
|
|
- list-style: none;
|
|
|
- position: relative;
|
|
|
- a:hover {
|
|
|
- color: #8f2831;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .toggle-smiley {
|
|
|
- color: $link-color;
|
|
|
- padding-left: 5px;
|
|
|
- ul {
|
|
|
- li {
|
|
|
- font-size: $font-size;
|
|
|
- padding: 5px;
|
|
|
- z-index: 98;
|
|
|
- }
|
|
|
- li:hover {
|
|
|
- background-color: $highlight-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .toggle-otr {
|
|
|
- ul {
|
|
|
- li {
|
|
|
- padding: 7px;
|
|
|
- background-color: white;
|
|
|
- display: block;
|
|
|
- z-index: 99;
|
|
|
- a {
|
|
|
- -moz-transition: background-color 0.2s ease-in-out;
|
|
|
- -webkit-transition: background-color 0.2s ease-in-out;
|
|
|
- transition: background-color 0.2s ease-in-out;
|
|
|
- display: block;
|
|
|
- padding: 1px;
|
|
|
- text-decoration: none;
|
|
|
- }
|
|
|
- }
|
|
|
- li:hover {
|
|
|
- background-color: $highlight-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .chat-toolbar-text {
|
|
|
- font-size: 12px;
|
|
|
- padding-right: 3px;
|
|
|
- text-shadow: 0 1px 0 white
|
|
|
- }
|
|
|
-
|
|
|
- .chat-textarea-chatbox-selected {
|
|
|
- border: 1px solid #578308;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-textarea-chatroom-selected {
|
|
|
- border: 2px solid $link-color;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- /* status dropdown styles */
|
|
|
- .chatbox {
|
|
|
- .dropdown {
|
|
|
- background-color: $light-background-color;
|
|
|
- dd {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .chatbox .dropdown dd,
|
|
|
- .dropdown dt,
|
|
|
- .dropdown ul {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .flyout {
|
|
|
- border-radius: $chatbox-border-radius;
|
|
|
- bottom: $chatbox-hover-height;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
-
|
|
|
- .box-flyout {
|
|
|
- box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
|
|
- height: $chat-height;
|
|
|
- min-width: $chat-width;
|
|
|
- min-height: $chat-height/2;
|
|
|
- @media screen and (max-width: $mobile-landscape-length) {
|
|
|
- height: $mobile-chat-height;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .dragresize {
|
|
|
- background: transparent;
|
|
|
- border: 0;
|
|
|
- margin: 0;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- z-index: 20;
|
|
|
- &-top {
|
|
|
- cursor: n-resize;
|
|
|
- height: 5px;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- &-left {
|
|
|
- cursor: w-resize;
|
|
|
- width: 5px;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- &-topleft {
|
|
|
- cursor: nw-resize;
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
}
|
|
|
- }
|
|
|
}
|
JC Brand