#conversejs { #controlbox { margin-right: 3*$chat-gutter; .pure-form.converse-form { padding: 0; } &.logged-out { .box-flyout { .controlbox-pane { overflow-y: auto; } } } form.search-xmpp-contact { margin: 0; padding-left: 5px; padding: 0 0 5px 5px; input { width: 8em; } } .msgs-indicator { border-radius: 3px; background-color: $red; color: white; font-size: $font-size-small; font-weight: normal; padding: 0 4px; text-shadow: none; } a.subscribe-to-user { padding-left: 2em; font-weight: bold; } #converse-register { @include fade-in; background: white; .title { font-weight: bold; } .info { color: green; font-size: 90%; margin: 1.5em 0; } .form-errors { color: $error-color; margin: 1em 0; } .provider-title { font-size: $font-size-huge; margin: 0; } .provider-score { width: 178px; margin-bottom: 8px; } .title, .instructions, label { margin: 0.5em 0 0 0; } .form-help .url { font-weight: bold; color: $link-color; } .input-group { display: table; margin: auto; width: 100%; span { overflow-x: hidden; text-overflow: ellipsis; max-width: 110px; } span, input[name=username] { display: table-cell; text-align: left; } } .instructions { color: gray; font-size: 85%; &:hover { color: $text-color; } } } .conn-feedback { color: $controlbox-head-color; &.error { color: $error-color; } p { padding-bottom: 0.5em; &.feedback-subject.error { font-weight: bold; } } } .brand-heading-container { .brand-heading { text-align: center; } .brand-name { font-size: 120%; } } #login-dialog { flex-direction: column; .brand-heading { color: $global-background-color; } } .toggle-register-login { font-weight: bold; } .oauth-login { margin-left: 0; color: $text-color; .icon-social:before { font-size: $font-size-large; } } #converse-register, #converse-login { fieldset.buttons { text-align: center; } .login-anon { height: auto; white-space: normal; } .save-submit { color: $save-button-color; } input { width: 100%; margin: 1em 0; } .form-url { display: block; font-weight: normal; margin: 1em 0; } } #users { .add-converse-contact { margin: 0 0 0.75em 0; } .chatbox-btn { margin: 0; } } #chatrooms, #contacts { margin-top: 0.75em; } #users { .userinfo { padding-bottom: 1em; border-bottom: 1px solid $gray-color; .username { margin-left: 0.5em; } .d-flex { margin-bottom: 0.2em; } } } #chatrooms { border-bottom: 1px solid $gray-color; form.add-chatroom { input[type=button], input[type=submit], input[type=text] { width: 100%; } margin: 0; padding: 0; } .rooms-list-container { .rooms-toggle { display: block; color: $text-color; margin-top: 1em; &:hover { color: $dark-gray-color; } } .rooms-list { margin: 0.5em 0; text-align: left; dt { border: none; color: $text-color; font-weight: normal; padding: 0; padding-bottom: 0.5em; text-shadow: 0 1px 0 $text-shadow-color; word-wrap: break-word; } .available-chatroom, .open-chatroom { border: none; clear: both; color: $text-color; display: block; overflow: hidden; padding: 0.2em 0; text-shadow: 0 1px 0 $text-shadow-color; word-wrap: break-word; a:hover { color: $dark-link-color; } &.unread-msgs { .available-room, .open-room { max-width: 55%; width: auto; font-weight: bold; } } a { &.room-info { &:before { font-size: 15px; } } &.open-room { width: 68%; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0.5em; } &.available-room { width: 85%; } } .add-bookmark, .remove-bookmark { &.button-on { color: $link-color; &:hover { color: $dark-link-color; } } color: $subdued-color; } .room-info { font-size: $font-size-small; font-style: normal; font-weight: normal; } li.room-info { display: block; margin-left: 5px; } p.room-info { line-height: $line-height; margin: 0; display: block; white-space: normal; } div.room-info { padding: 0.3em 0; clear: left; width: 100%; } } } } } .dropdown { a { width: 143px; display: inline-block; } li { list-style: none; padding-left: 0; } dd { ul { padding: 0; list-style: none; position: absolute; left: 0; top: 0; width: 100%; z-index: 21; background-color: $light-background-color; li:hover { background-color: $highlight-color; } } } dd.search-xmpp { height: 0; .contact-form-container { position: absolute; z-index: 22; form { box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); background-color: white; } } li:hover { background-color: $light-background-color; } } dt a span { cursor: pointer; display: block; padding: 4px 7px 0 5px; } } #select-xmpp-status { display: none; float: right; margin-right: 0.5em; } .fancy-dropdown { border: 1px solid $light-background-border-color; height: $controlbox-dropdown-height; border-radius: $button-border-radius; text-align: left; .choose-xmpp-status, .toggle-xmpp-contact-form { line-height: $controlbox-dropdown-height; text-shadow: 0 1px 0 #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; &:hover { color: $dark-link-color; } } .toggle-xmpp-contact-form { padding: 0 0.5em; width: 100%; } &.no-border { border: 0; } } #fancy-xmpp-status-select { .xmpp-status { padding: 0 0.5em; } a.change-xmpp-status-message { line-height: $controlbox-dropdown-height; float: right; clear: right; width: 12px; color: $link-color; &:hover { color: $dark-link-color; } } fieldset { padding: 0; margin-top: -1px; } input { height: $controlbox-dropdown-height + 1px; @include calc(width, '100% - 40px'); padding: 0 0 0 0.5em; } input[type=submit] { height: $controlbox-dropdown-height + 1px; width: 40px; padding: 1px; float: right; } } .controlbox-panes { overflow-y: scroll; } .controlbox-pane { padding: $controlbox-pane-padding; background-color: white; border: 0; font-size: $font-size; left: 0; text-align: left; overflow-y: scroll; overflow-x: hidden; border-radius: $chatbox-border-radius; .switch-form { padding-bottom: 2em; p { margin-top: 0.5em; } } label { font-size: $font-size; font-weight: bold; height: auto; } dd { margin-left: 0; margin-bottom: 0; &.odd { background-color: #DCEAC5; } } } .add-xmpp-contact { padding: 1em 0.5em; input { margin: 0 0 1rem; width: 100%; } button { width: 100%; } } .xmpp-status-menu { text-align: left; box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); &.collapsed { box-shadow: none; } li { padding: 2px; a { width: 100%; padding: 0.3em; } } } .xmpp-status-menu li a.logout, .xmpp-status-menu li a.logout span { color: $warning-color; } .set-xmpp-status { background: none; margin: 1em 0 0.5em 0em; .dropdown dd ul { z-index: 22; } } } .toggle-controlbox { background-color: $link-color; border-top-left-radius: $button-border-radius; border-top-right-radius: $button-border-radius; color: #0a0a0a; float: right; height: 100%; margin: 0 $chat-gutter; padding: 10px 8px 0 8px; span { color: $inverse-link-color; } } .xmpp-status, .xmpp-status-menu { .online { color: $green; } .dnd { color: $red } .away { color: $light-blue; } .logout, .offline { color: $gray-color; } } } @media screen and (max-width: 767px) { #conversejs { #controlbox { .box-flyout { width: 100%; left: 0; } .sidebar { display: block; } #users { position: absolute; top: 0; left: 50px; display: none; width: calc(100% - 50px); &.controlbox-pane { height: 100vh; } } } &.sidebar-open { > .chatbox:not(#controlbox) { display: none; } #controlbox { #users { display: block; } } } } }