zulip/static/styles/zulip.css

3714 lines
73 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

body,
html {
width: 100%;
overflow-x: hidden;
}
body {
font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-y: auto;
}
/* Common background color */
body,
#tab_bar,
#tab_bar_underpadding,
.message_list,
#compose-container {
background-color: #f4f5f4;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
body.narrowed_view,
.narrowed_view #tab_bar,
.narrowed_view #tab_bar_underpadding,
.narrowed_view .message_list,
.narrowed_view #compose-container {
background-color: #f0f8ff;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
input,
button,
select,
textarea {
font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: normal;
}
blockquote p {
font-weight: normal;
}
a {
cursor: pointer;
}
/*
.container-fluid {
max-width: 1230px;
margin: 0px auto;
padding-left: 5px;
padding-right: 5px;
}
*/
.header {
position: fixed;
z-index: 100;
width: 100%;
background: rgb(172,197,193); /* Old browsers */
background: -moz-linear-gradient(top, rgba(172,197,193,1) 0%, rgba(220,241,234,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(172,197,193,1)), color-stop(100%,rgba(220,241,234,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* W3C */
background-image: url(/static/images/backgrounds/lightteal.png);
background-size: 150px 50px;
border-bottom: 1px solid #314945;
}
.app {
width: 100%;
z-index: 99;
}
.app-main,
.header-main {
max-width: 1200px;
min-width: 950px;
margin: 0px auto;
padding: 0px 5px 0px 5px;
position: relative;
}
.column-left,
.column-right {
width: 200px;
max-width: 200px;
}
.column-left {
float: left;
}
.column-right {
float: right;
}
.app-main .column-left .left-sidebar,
.app-main .column-right .right-sidebar {
position: fixed;
margin-top: 50px;
width: 200px;
z-index:3;
}
.app-main .column-right .right-sidebar {
padding-left: 15px;
}
.column-middle {
float: left;
width: 100%;
margin-right: -200px;
margin-left: -200px;
}
.column-middle-inner {
margin-right: 200px;
margin-left: 200px;
}
.app-main .column-middle .column-middle-inner {
margin-left: 400px;
margin-right: 0px;
}
textarea,
input {
font-family: 'Humbug', Helvetica, Arial, sans-serif;
}
/* Override Bootstrap's fixed sizes for various elements */
textarea,
label {
font-size: inherit;
line-height: inherit;
}
/* List of text-like input types taken from Bootstrap */
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"]
{
font-size: inherit;
height: 1.4em;
}
li,
.table th,
.table td {
line-height: inherit;
}
.btn {
font-size: inherit;
height: auto;
line-height: 100%;
}
.btn-large {
font-size: 115%;
}
.header-main .logo {
display: block;
font-size: 120%;
font-weight: 900;
text-shadow: none;
color: #ffffff;
font-variant: small-caps;
letter-spacing: 2px;
line-height: 18px;
padding-top: 10px;
padding-left: 5px;
text-decoration: none;
position: relative;
}
.header-main .logoimage {
width: 45px;
height: auto;
}
#user-settings-avatar {
width: 100px;
height: 100px;
margin-top: 10px;
border-radius: 50px;
}
/* Classes for hiding and showing controls */
.notdisplayed {
display: none !important;
}
.notvisible {
visibility: hidden !important;
width: 0px !important;
min-width: 0px !important;
min-height: 0px !important;
height: 0px !important;
overflow: hidden !important;
position: absolute !important;
}
/* Relative positioning */
.position-relative {
position: relative;
}
/* Lighter strong */
strong {
font-weight: 600;
}
/* Inline and block code */
code {
/* 12/14 em, so bootstrap's default 12 px,
when body is the default 14 px */
font-size: 0.857em;
}
pre {
/* 12/14 em, so bootstrap's default 12 px,
when body is the default 14 px */
font-size: 0.857em;
line-height: inherit;
white-space: pre;
overflow-x: auto;
word-wrap: normal;
/* Bootstrap's default here is top: 0px, bottom: 10px */
margin-top: 5px;
margin-bottom: 5px;
}
pre code {
white-space: pre;
}
/* Style inline code inside a link
to look more like a normal link */
a code {
color: #08C;
border-color: #08C;
}
a:hover code {
color: #005580;
border-color: #005580;
}
.preserve_spaces {
white-space: pre-wrap;
}
.sidebar-nav {
padding: 0px 10px 20px 0px;
margin-top: 1em;
overflow: hidden;
text-overflow: ellipsis;
/* This is a little hacky, but for whatever reason, span2 in a row-fluid
doesn't consistently take on the right width when it's in an affix, so
we need to specify a max size. */
max-width: 200px;
}
#left-sidebar .brand {
display: table-row;
}
.edit-profile {
font-weight: 300;
font-size: 12px;
}
.logout {
white-space: nowrap;
}
.new_message_button {
padding-top: 1.1em;
}
.sidebar-title, .share-the-love-title {
font-size: 11px;
font-weight: normal;
display: inline;
}
#streams_list:hover #streams_inline_cog {
visibility: visible;
opacity: 0.5;
}
#streams_list #streams_inline_cog:hover {
opacity: 1.0;
}
#streams_inline_cog {
float: right;
color: #000;
text-decoration: none;
visibility: hidden;
margin-top: 3px;
}
.tooltip {
max-width: 10em;
}
#stream_filters {
overflow-x: visible;
overflow-y: hidden;
margin: 2px 0px 0px 0px;
padding: 0px 10px 10px 0;
}
#stream_filters .narrow-filter {
padding-left: 1.5em;
}
.narrow-filter {
display: block;
position: relative;
}
#stream_filters:hover {
overflow-y: auto;
}
#stream_filters li:hover {
background-color: #e2e8dd;
}
#stream_filters li.active-subject-filter:hover {
background-color: #ccd6cc;
}
#user_presences, #group-pms {
list-style-position: inside; /* Draw the bullets inside our box */
margin-left: 0;
overflow-y: hidden;
}
#user_presences:hover, #group-pms:hover {
overflow-y: auto;
}
#user_presences li:hover, #group-pms li:hover {
background-color: #e2e8dd;
}
#user_presences .user_sidebar_entry:hover, #group-pms .group-pms-sidebar-entry:hover {
cursor: pointer;
}
#user_presences li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.user_sidebar_entry .count, .group-pms-sidebar-entry .count {
display: none;
}
#user_presences li, #group-pms li {
list-style-type: none;
}
.user-status-indicator, .group-pm-status-indicator {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid;
float: left;
position: relative;
top: 5px;
margin-right: 0.5em;
}
.user_active .user-status-indicator, .group-pm-status-indicator {
background-color: #44C21D;
border-color: #44C21D;
}
.user_idle .user-status-indicator {
border-color: #EC7E18;
background-color: #EC7E18;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(236,126,24,1) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(236,126,24,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%,rgba(236,126,24,1) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ec7e18',GradientType=0 ); /* IE6-9 */
}
.user_offline .user-status-indicator {
background-color: none;
border-color: gray;
}
#user_presences a, #group-pms a {
color: #333;
}
#invite-user-link i {
text-decoration: none;
margin-right: 5px;
}
ul.filters {
list-style-type: none;
}
.message_header_stream a.message_label_clickable,
ul.filters a {
color: #333;
}
ul.filters hr {
margin-top: 10px;
margin-bottom: 10px;
}
li.active-filter,
li.active-subject-filter {
font-weight: bold;
background: #ccd6cc;
position: relative;
}
li.active-filter:after,
li.active-subject-filter:after {
content: "";
position: absolute;
top: 50%;
right: -6px;
margin-top: -6px;
display: block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #ccd6cc;
}
li.hidden-filter {
visibility: hidden;
display: none;
}
ul.filters {
margin-left: 0px;
padding-right: 10px;
}
#global_filters .global-filter {
position: relative;
}
.user_sidebar_entry .selectable_sidebar_block,
.group-pms-sidebar-entry .selectable_sidebar_block {
width: 170px;
display: block;
}
.group-pm-link {
margin-left: 17px;
display: block;
}
.user_sidebar_entry .selectable_sidebar_block {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user_sidebar_entry.user-with-count .selectable_sidebar_block {
width: 150px;
}
.group-pms-sidebar-entry.group-with-count .selectable_sidebar_block {
width: 170px;
}
.user_sidebar_entry .count,
.group-pms-sidebar-entry .count,
#global_filters .count,
#stream_filters .count {
position: absolute;
right: 20px;
top: 4px;
padding: 2px 3px 1px 3px;
background: #80837f;
color: #ffffff;
border-radius: 1px;
font-size: 11px;
font-weight: normal;
}
.group-pms-sidebar-entry .count {
right: 2px;
}
#stream_filters .count,
#global_filters .count {
margin-left: 0.5em;
display: none;
}
.user_sidebar_entry .count,
.group-pms-sidebar-entry .count,
#global_filters .count
{
line-height: 11px;
top: 3px;
}
.subject_count {
display: block;
position: absolute;
line-height: 1em;
right: 20px;
top: 2px;
padding: 2px 3px 0px 3px;
background: #a6ada4;
color: #ffffff;
border-radius: 1px;
font-size: 11px;
font-weight: normal;
}
ul.filters i {
padding-right: 0.25em;
/* Make filter icons the same width so labels line up. */
display: inline-block;
width: 13px;
}
li.actual-dropdown-menu i {
/* In gear menu, make icons the same width so labels line up. */
display: inline-block;
width: 14px;
}
ul.filters .arrow {
position: absolute;
right: 0px;
top: 2px;
font-size: 0.8em;
display: none;
}
ul.filters li:hover .arrow {
display: inline;
cursor: pointer;
color: #888;
}
ul.filters li .arrow:hover {
display: inline;
cursor: pointer;
color: #000;
}
ul.filters .topic-sidebar-arrow {
font-size: 0.7em;
top: 1px;
display: none !important;
}
ul.filters li.expanded_subject:hover .topic-sidebar-arrow {
display: inline !important;
cursor: pointer;
color: #888;
}
ul.filters li.expanded_subject .topic-sidebar-arrow:hover {
display: inline;
cursor: pointer;
color: #000;
}
ul.filters li.muted_topic,
ul.filters li.out_of_home_view {
opacity: 0.25;
}
.message_list {
}
.message_area_padder {
/* The height of the header and the tabbar plus a small gap */
margin-top: 68px;
/* This is needed for the floating recipient bar
in Firefox only, for some reason; otherwise it gets
a scrollbar */
overflow: visible;
padding-left: 15px;
}
.message_comp {
display: none;
padding: 10px 10px 8px 5px;
}
#compose_buttons {
text-align: center;
}
td.pointer {
vertical-align: top;
padding-top: 10px;
background-color: #fff;
}
.new_messages {
background-color: lightblue;
}
.new_messages,
.new_messages_fadeout {
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
.message_time {
display: inline-block;
font-weight: normal;
font-size: 11px;
color: #aaa;
vertical-align: middle;
padding: 0px 2px 3px 2px;
font-weight: 300;
}
.message_controls {
display: inline-block;
position: absolute;
top: 2px;
right: -78px;
}
.include-sender .message_controls {
top: -2px;
}
.message_data {
vertical-align: top;
text-align: left;
padding: 0px;
background-color: #fff;
position: relative;
}
.ztable_layout_row {
visibility: collapse;
}
.ztable_col1 { /* colorblock */
width: 8px;
}
.ztable_col2 { /* messagebody */
width: 100%;
}
.ztable_comp_col1 {
width: 8px;
}
.ztable_comp_col2 {
width: 100%;
}
.message_header {
vertical-align: middle;
text-align: left;
/* We can overflow-y if the font size gets big */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
line-height: 14px;
padding: 3px 0px 2px 5px;
border-radius: 0px 3px 0px 0px;
background: rgb(220,220,220); /* Old browsers */
background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 2px 1px -2px #333, inset -2px 0px 1px -2px #333, inset 0px -2px 1px -2px #ccc;
}
.summary_row .message_header{
padding: 5px 0px 4px 5px;
}
.summary_row .message_header {
border-radius: 0;
}
.bookend_tr + .summary_row .message_header {
border-top-right-radius: 3px;
}
.bookend_tr + .summary_row .summary_colorblock {
border-top-left-radius: 3px;
}
.summary_row.last_message .message_header {
border-bottom-right-radius: 3px;
box-shadow: inset 0px 2px 1px -2px #333, inset -2px 0px 1px -2px #333, inset 0px -2px 1px -2px #333;
}
.summary_row.last_message .summary_colorblock {
border-bottom-left-radius: 3px;
}
.message_header .icon-vector-narrow {
font-size: 0.6em;
position: relative;
top: -1px;
}
.copy-paste-text {
/* Hide the text that we want copy paste to capture */
position: absolute;
text-indent: -99999px;
float: left;
width: 0px;
}
.message_header_colorblock {
border-radius: 3px 0px 0px 0px;
/* box-shadow: 0px 2px 3px #ccc; */
box-shadow: inset 0px 2px 1px -2px #333, inset 2px 0px 1px -2px #333 !important;
}
.summary_row_private_message .summary_colorblock {
background: #000;
}
.messages-expand,
.messages-collapse {
cursor: pointer;
}
/*
We can't collapse the floating recipient bar yet, so this is
just a temporary hack.
*/
.floating_recipient .messages-collapse {
display: none;
}
.floating_recipient .message_header {
box-shadow: inset 0px 2px 1px -2px #333, inset -2px 0px 1px -2px #333 !important;
}
.floating_recipient .message_header_colorblock {
box-shadow: inset 0px 2px 1px -2px #333, inset 2px 0px 1px -2px #333 !important;
}
.compose_table .message_header_colorblock, .compose_table .message_header {
box-shadow: none;
background: none;
}
.compose_table .message_header_colorblock {
border-radius: 3px 0px 0px 3px;
border-bottom: 0px;
}
.compose_table .message_header_colorblock.message_header_private_message {
border-radius: 3px 0px 0px 3px;
border-bottom: 0px;
}
.compose_table .message_header_colorblock.message_header_private_message {
background: #444;
}
.compose_table .right_part {
padding: 0px;
}
.compose_table .right_part .icon-vector-narrow {
font-size: 0.6em;
position: relative;
}
.compose_table .compose_checkbox_label {
display: inline-block;
}
.compose_table .pm_recipient {
position: relative;
margin-right: 30px;
height: 25px;
}
.compose_table #private-message .you_text {
position: absolute;
height: 25px;
line-height: 25px;
padding-top: 0px;
padding-bottom: 0px;
width: 4em;
background: #444444;
color: #ffffff;
}
.compose_table .pm_recipient #private_message_recipient {
margin-left: 4em;
border-left: none;
border-radius: 0px 3px 3px 0px;
padding-top: 0px;
padding-bottom: 0px;
height: 23px;
line-height: 23px;
}
.compose_table #private-message .right_part {
padding-right: 4em;
}
.compose_table #compose-lock-icon {
position: relative;
width: 0px;
}
.compose_table #compose-lock-icon i {
position: absolute;
left: 5px;
top: 3px;
}
.messagebox-bottom {
height: 3px;
background-color: #fff;
border-radius: 0px 0px 3px 0px;
/* box-shadow: 0px 2px 2px -1px #ccc; */
border: 1px solid #c1dbd5;
border-top: none;
border-left: none;
}
.messagebox-bottom-colorblock {
border-radius: 0px 0px 0px 3px;
/* box-shadow: 0px 2px 2px -1px #ccc; */
border: 1px solid #c1dbd5;
border-top: none;
border-right: none;
}
.compose_table .message_header.message_header_private_message,
.message_header_private_message {
background-image: none;
background-color: #444444;
}
.compose_table .message_header {
background: none;
background-color: #ececec;
border: none;
border-radius: 0px;
box-shadow: none !important;
}
.pointer_icon {
width: 100%;
text-align: center;
display: none;
color: #000;
}
/* Round edges on the bottom of each message --
a necessary evil in the world of tables */
.last_message .messagebox {
height: 3px;
border-radius: 0px 0px 3px 0px;
border: none;
box-shadow: inset -2px 0px 1px -2px #333, inset 0px -2px 1px -2px #333;
}
.last_message .messagebox_colorblock {
border-radius: 0px 0px 0px 3px;
border: none;
box-shadow: inset 2px 0px 1px -2px #333, inset 0px -2px 1px -2px #333;
}
/* Base color backgrounds for messageboxes,
private messages, mentions, and unread messages */
.compose_table .messagebox {
box-shadow: none !important;
}
.messagebox {
background-color: #ffffff;
}
.private-message .messagebox {
background-color: #feffe0;
}
.mention .messagebox {
background-color: #ffe4e0;
}
.messagebox .message_top_line {
position: relative;
}
.messagebox .unread_marker {
display: block;
position: absolute;
width: 10px;
height: 10px;
border-radius: 16px;
background: #2b8213;
left: -31px;
margin-top: 6px;
opacity: 0;
box-shadow: inset 1px 1px 1px -1px #000;
border: 1px solid #fff;
}
.messagebox .unread_marker.slow_fade {
-webkit-transition: all 2.7s ease-in;
-moz-transition: all 2.7s ease-in;
-o-transition: all 2.7s ease-in;
transition: all 2.7s ease-in;
}
.messagebox .unread_marker.fast_fade {
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.include-sender .messagebox .unread_marker {
margin-top: 8px; /* To line up with avatar */
}
.unread .unread_marker {
opacity: 1;
}
.selected_message .messagebox_colorblock, .selected_message .summary_colorblock {
box-shadow: 0px 0px 5px 0px #3093c3, inset 3px 0px 1px -2px #39afe8, inset 0px -3px 1px -2px #39afe8, inset 0px 3px 1px -2px #39afe8, inset -12px 0px 0px -1px rgba(240,240,240,0.6);
}
.selected_message .messagebox_colorblock.message_header_private_message {
box-shadow: 0px 0px 5px 0px #3093c3, inset 3px 0px 1px -2px #39afe8, inset 0px -3px 1px -2px #39afe8, inset 0px 3px 1px -2px #39afe8, inset -12px 0px 0px -1px rgba(240,240,240,0.6);
}
.selected_message .pointer_icon {
display: inline-block;
}
.selected_message .messagebox,
.selected_message.summary_row .message_header{
box-shadow: 0px 0px 5px 0px #3093c3, inset 0px -3px 0px -2px #39afe8, inset 0px 3px 0px -2px #39afe8, inset -3px 0px 0px -2px #39afe8;
}
.selected_message.mention .messagebox,
.selected_message.private-message.mention .messagebox {
box-shadow: 0px 0px 5px 0px #3093c3, inset 0px -3px 0px -2px #39afe8, inset 0px 3px 0px -2px #39afe8, inset -3px 0px 0px -2px #39afe8;
}
.selected_message.private-message .messagebox {
box-shadow: 0px 0px 5px 0px #3093c3, inset 0px -3px 0px -2px #39afe8, inset 0px 3px 0px -2px #39afe8, inset -3px 0px 0px -2px #39afe8;
}
.selected_message .inline_profile_picture {
border-color: #AAA;
}
.selected_message.private-message .inline_profile_picture {
border-color: #AAA;
}
.message_sender {
height: 0px;
vertical-align: top;
position: relative;
}
.sender_name {
color: #333;
display: inline-block;
font-weight: bold;
vertical-align: top;
position: relative;
top: -2px;
}
.sender-status {
display: block;
margin-left: 35px;
margin-top: -24px;
padding-bottom: 20px;
}
.sender-status .sender_name {
font-weight: bold;
position: static;
vertical-align: bottom;
}
.sender_name_hovered .sender_name {
color: #0088CC;
}
.sender_name_hovered .inline_profile_picture {
border-color: #0088CC;
}
.actions_hover:hover {
color: #0088CC;
}
a.message_label_clickable:hover {
cursor: pointer;
color: #08C;
}
.on_hover_topic_edit {
opacity: .1;
}
.always_visible_topic_edit {
opacity: .7;
}
.on_hover_topic_edit:hover,.always_visible_topic_edit:hover {
cursor: pointer;
opacity: 1.0;
}
.edit_content {
opacity: .4;
width: 0px;
height: 0px;
display: inline-block;
position: relative;
}
.edit_content i {
position: absolute;
display: block;
background: #ffffff;
top: -0.9em;
left: 0.4em;
border-radius: 1px;
padding: 1px 2px;
border: 1px dotted #ccc;
}
.edit_content:hover {
cursor: pointer;
opacity: 1.0;
}
/* Brighten text because of the dark background */
.dark_background a,
.dark_background {
color: #ffffff;
}
.dark_background a.message_label_clickable:hover {
color: #3BF;
}
.message_top_line {
position: relative;
}
.message-right {
float: right;
}
.small {
font-size: 80%;
}
.tiny {
font-size: 60%;
}
.actions_hovered .message_time,
.actions_hovered .info {
color: #0088CC;
cursor: pointer;
}
.message_hovered .info,
.message_hovered .empty-star {
visibility: visible;
}
.actions_hovered .actions_link {
text-decoration: underline;
}
table.message_table {
table-layout: fixed;
border-collapse: separate;
margin-left: auto;
display: none;
width: 100%;
}
table.compose_table {
table-layout: fixed;
margin-left: auto;
width: 100%;
}
table.focused_table {
display: table;
}
.include-sender .message_content {
margin-top: -8px;
}
.message_content {
line-height: 18px;
padding-left: 35px; /* Also edit #message_edit_form .edit-controls */
}
.message_edit_content {
line-height: 18px;
}
.message_edit_topic_propagate{
display: inline-block;
width: 400px;
}
.message_content.condensed {
max-height: 8.5em;
overflow: hidden;
}
.message_content.collapsed {
max-height: 0em;
overflow: hidden;
}
.message_length_controller {
display: none;
text-align: center;
color: #0088CC;
/* to match .message_content */
margin-left: 5px;
margin-right: 35px;
}
.message_length_controller:hover {
text-decoration: underline;
}
div.message_content table {
padding-right: 10px;
margin: 5px 5px 5px 5px;
width: 99%;
}
div.message_content thead {
background-color: #EFEFEF;
}
div.message_content tr {
display: table-row;
vertical-align: inherit;
}
div.message_content tr th {
border: 1px solid #cccccc;
padding: 4px;
text-align: left;
}
div.message_content tr td {
border: 1px solid #cccccc;
padding: 4px;
}
blockquote {
margin-bottom: 6px;
}
blockquote p {
line-height: inherit;
font-size: inherit;
}
.messagebox {
padding: 7px 85px 0px 7px;
word-wrap: break-word;
cursor: pointer;
vertical-align: top;
border: none;
box-shadow: inset -2px 0px 1px -2px #333;
}
.messagebox_colorblock {
border: none;
box-shadow: inset 2px 0px 1px -2px #333;
}
.messagebox p {
margin: 3px 0px 3px 0px;
}
.messagebox blockquote {
padding-left: 5px;
margin-left: 10px;
border-left-color: #ddd;
}
#send_message_form {
margin: 0px;
}
#send_message_form .messagebox {
/* normally 5px 14px; pull in the right and bottom a bit */
cursor: default;
padding: 0px;
background: none;
box-shadow: none;
border: none;
}
#enter-sends-label {
margin-bottom: 0px;
margin-top: 2px;
}
#send_message_form .message_content {
display: table-row;
margin-right: 0px;
}
#compose-send-button {
height: 31px; /* Same as height of compose textarea. */
}
#below-compose-content {
width: 100%;
margin-top: 6px;
}
.bookend {
padding-top: 10px;
background-color: transparent;
}
.prev_is_same_sender.messagebox {
padding-top: 0px;
}
.prev_is_same_sender.message_data {
padding-top: 0px;
}
.next_is_same_sender {
border-bottom: 0px;
padding-bottom: 0px;
}
.profile_picture {
display: block;
float: right;
margin-top: 5px;
max-height: 15px;
width: 15px;
height: 15px;
cursor: pointer;
border-radius: 30px;
-moz-box-shadow: 1px 1px 1px #777 inset;
-webkit-box-shadow: 1px 1px 1px #777 inset;
box-shadow: 1px 1px 1px #777 inset;
background-size: 15px 15px;
}
.inline_profile_picture {
display: inline-block;
width: 25px;
height: 25px;
margin-right: 5px;
background-size: 25px 25px;
border-radius: 25px;
border: 1px solid #CCC;
vertical-align: top;
position: relative;
left: -1px;
}
#compose {
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1;
width: 100%;
}
#compose-container {
width: 100%;
max-width: 1210px;
margin: auto;
}
.compose-content {
border-top: 1px solid #bbbbbb;
padding: 8px 15px 8px 10px;
margin-left: 210px;
margin-right: 200px;
position: relative;
}
#compose_close {
display: none;
position: absolute;
right: -4px;
top: 5px;
}
#compose_invite_users {
/* Don't overlap into the compose_close × */
margin-right: 10px;
}
.compose_invite_user {
padding: 4px 0px 4px 0px;
}
.compose_invite_close {
display: inline;
margin-top: 4px;
width: 10px;
}
.compose_invite_user_controls {
float: right;
}
.compose_invite_link {
height: 20px;
margin-bottom: 3px;
}
.compose_invite_user_error {
margin-right: 10px;
padding: 3px 8px 3px 8px;
}
/* Like .nav-tabs > li > a */
#send-status {
width: 90%;
padding: 8px 14px 8px 14px;
line-height: 20px;
display: none;
}
/* Like .alert .close */
.send-status-close {
font-size: 17px;
font-weight: bold;
color: black;
text-shadow: 0 1px 0 white;
opacity: .2;
filter: alpha(opacity=20);
float: right;
}
.send-status-close:hover {
cursor: pointer;
opacity: .4;
filter: alpha(opacity=40);
}
#out-of-view-notification {
background: #9bff8b;
background: rgba(163,211,147,0.95);
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-radius: 0px 0px 2px 2px;
font-weight: 400;
font-size: 12px;
display: inline-block;
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
position: relative;
top: -8px;
width: 100%;
padding-right: 5px;
}
.compose-notifications-content {
padding: 4px 10px 4px 10px;
text-align: center;
}
.composition-area {
position: relative;
}
#out-of-view-notification .close {
position: absolute;
right: 5px;
top: 5px;
font-size: 17px;
font-weight: bold;
color: black;
text-shadow: 0 1px 0 white;
opacity: .2;
filter: alpha(opacity=20);
}
.home-error-bar {
margin-top: 5px;
display: none;
}
#connection-error {
font-size: 13px;
}
.streamname {
font-weight: bold;
}
.home-error-bar .alert {
margin-bottom: auto;
}
textarea.new_message_textarea {
display: table-cell;
width: 99%;
height: 1.5em;
max-height: 22em;
margin-bottom: 0px;
resize: none;
margin-top: 6px;
}
input.recipient_box {
margin: 0px;
height: 1.1em;
border-radius: 3px;
}
#stream.recipient_box {
width: 20%;
border-radius: 0px 3px 3px 0px;
border-left: 0px;
min-width: 120px;
}
#subject.recipient_box {
width: 25%;
min-width: 140px;
}
#stream.recipient_box.lock-padding {
padding-left: 18px;
}
#private_message_recipient.recipient_box {
width: 100%;
}
#left-of-compose {
vertical-align: top;
padding-top: 3px;
}
#send_controls {
float: right;
position: relative;
right: -7px;
font-size: 0.8em;
height: 2.2em;
}
#send_controls .compose_checkbox_label {
margin-right: 2px;
}
#send_controls .compose_checkbox_label input {
position: relative;
top: -3px;
}
#send_controls #compose-send-button {
font-weight: 600;
height: 2.2em;
background-image: -moz-linear-gradient(top, rgba(14,70,67,1) 0%, rgba(14,83,68,1) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,1)), color-stop(100%,rgba(14,83,68,1))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, rgba(14,70,67,1) 0%,rgba(14,83,68,1) 100%); /* W3C */
}
#send_controls #compose-send-button:hover {
font-weight: 600;
height: 2.2em;
background: #fff;
background-image: -moz-linear-gradient(top, rgba(14,70,67,0.6) 0%, rgba(14,83,68,0.6) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,0.6)), color-stop(100%,rgba(14,83,68,1))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, rgba(14,70,67,0.6) 0%,rgba(14,83,68,0.6) 100%); /* W3C */
}
#navbar-spacer {
/* A spacer that is exactly a navbar size, so that all content
gets pushed unerneath it */
width: 100%;
height: 40px;
}
.brand.skinny-user-gravatar {
display: table-cell;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
white-space: nowrap;
}
#searchbox {
width: 100%;
padding-right: 30px;
}
#tab_bar {
position: fixed;
top: 41px;
z-index: 2;
padding-top: 0px;
padding-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
#tab_list {
list-style: none;
height: 20px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 15px;
border: none;
white-space: nowrap;
}
#tab_list li {
white-space: nowrap;
list-style-type: none;
display: inline-block;
position: relative;
font-weight: 600;
background-color: #f9f9f9;
margin: 0px;
padding: 0px;
border-radius: 0px 0px 3px 3px;
border-left: 10px solid;
background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
border-bottom: 1px solid;
border-right: 1px solid;
text-overflow: ellipsis;
}
#tab_list li.narrow_spacer {
margin: 0px;
padding: 0px 0px 0px 1px;
min-width: 0px;
text-shadow: 0px 1px 0px #fff;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: none;
}
#tab_list li.private_message {
border-color: #444;
}
#tab_list a {
text-decoration: none;
color: inherit;
border-color: inherit;
height: 15px;
width: 100%;
min-width: 80px;
display: inline-block;
padding: 3px 9px 6px 8px;
}
#tab_list li.active {
padding: 3px 9px 6px 8px;
height: 15px;
min-width: 80px;
}
#tab_list .root {
border-color: #7dcbff;
margin: 0px;
}
#tab_bar_underpadding {
position: fixed;
z-index: 10;
top: 74px;
background-color: #FFF;
height: 0px;
}
#navbar-buttons {
white-space: nowrap;
margin-left: 15px;
margin-top: 7px;
}
#navbar-buttons ul.nav {
margin: 0px;
}
#streamlist-toggle {
display: none;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
vertical-align: middle;
border-right: 1px solid #777;
}
#streamlist-toggle-button {
text-decoration: none;
color: #ffffff;
display: block;
position: relative;
background-color: rgba(255,255,255,0.2);
width: 40px;
padding-top: 12px;
padding-bottom: 9px;
}
#streamlist-toggle-unreadcount, #userlist-toggle-unreadcount {
position: absolute;
display: none;
height: 12px;
min-width: 12px;
line-height: 12px;
background: #670000;
top: 4px;
right: 4px;
border: 1px solid #eee;
box-shadow: 0px 0px 1px rgba(0,0,0,0.2);
border-radius: 12px;
padding: 1px 1px 1px 1px;
font-size: 9px;
z-index: 15;
font-weight: normal;
color: #ffffff;
}
#userlist-toggle {
display: none;
position: absolute;
top: 0px;
right: 0px;
text-align: center;
vertical-align: middle;
border-left: 1px solid #777;
}
#userlist-toggle-button {
text-decoration: none;
color: #ffffff;
display: block;
background-color: rgba(255,255,255,0.2);
width: 40px;
padding-top: 12px;
padding-bottom: 9px;
}
.nav .dropdown-menu {
left: -10px;
top: 30px;
min-width: 180px;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.nav .dropdown-menu:after {
position: absolute;
width: 0px;
height: 0px;
top: -5px;
right: 5px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #fff;
border-left: 7px solid transparent;
content: '';
z-index: 10;
}
#navbar-buttons ul.nav .dropdown-toggle,
#navbar-buttons ul.nav li.active .dropdown-toggle {
font-size: 20px;
color: #fff;
text-shadow: none;
padding-left: 0px !important;
background-color: inherit;
box-shadow: inherit;
-webkit-box-shadow: inherit;
-moz-box-shadow: inherit;
display: block;
position: absolute;
right: 0px;
top: 3px;
}
#navbar-buttons ul.nav .dropdown-toggle,
#navbar-buttons ul.nav li.active .dropdown-toggle:hover {
text-shadow: 0px 0px 1px #000, 0px 0px 3px #fff;
}
#navbar-buttons ul.nav li.dropdown.open .dropdown-toggle {
background: none;
color: #fff;
text-shadow: none;
}
#searchbox .input-append {
position: relative;
width: 100%;
}
#searchbox .input-append .icon-vector-search {
padding: 0px;
position: absolute;
left: 11px;
top: 8px;
z-index: 5;
}
.navbar-search {
margin-right: 10px;
margin-left: 10px;
width: auto;
float: none;
}
#search_query {
width: 100%;
font-size: 1em;
line-height: 20px;
padding: 0px;
color: #222;
height: 27px;
min-height: 27px;
border-radius: 3px;
box-shadow: none;
margin-left: 5px;
margin-top: 1px;
margin-bottom: 2px;
padding-left: 25px;
padding-right: 20px;
background: -moz-linear-gradient(top, rgba(14,70,67,0.2) 0%, rgba(14,83,68,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,0.2)), color-stop(100%,rgba(14,83,68,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* W3C */
background: rgb(255,255,255); /* Old browsers */
border: none;
border-top: 1px solid #777;
border-left: 1px solid #777;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
font-family: 'Humbug';
}
#search_query:focus {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
}
#searchbox .search_button,
#searchbox .search_button[disabled]:hover {
position: absolute;
right: 0px;
top: 0px;
background: none;
border-radius: 0px;
border: none;
height: 30px;
text-align: center;
padding: 4px;
color: #ccc;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
text-shadow: none;
z-index:5;
}
#searchbox .search_button:hover {
color: #000;
}
#searchbox .search_button[disabled] {
visibility: hidden;
}
.highlight {
background-color: #FCEA81;
}
.highlight_text_inserted {
background-color: #E6EDFF;
}
.highlight_text_deleted {
background-color: #FFE6E6;
}
.highlight_text_replaced {
background-color: #F5E6FF;
}
#search_arrows {
margin-bottom: 5px;
/* Bootstrap wants font-size: 0 to eliminate space between
the buttons. We need to inherit the font size, so we
remove the button gap by adjusting "letter" spacing. */
font-size: 90%;
letter-spacing: -.3em;
}
#search_arrows input {
/* Chrome and Firefox do this already via default browser stylesheet;
but Opera needs this to avoid smushed letters in the search box. */
letter-spacing: normal;
}
#floating_recipient_bar {
position: fixed;
/* .message_list max-width */
text-decoration: none;
top: 70px; /* should really be the same as the height of navbar-spacer + height of the tab bar*/
visibility: hidden; /* so that we pass clicks through to underneath us */
/* If zhome has opacity on it, it suddenly starts getting drawn on top
of top_statusbar -- unless we specify a z-index. */
z-index: 2;
left: 0px;
width: 100%;
}
.recipient-bar-content {
max-width: 1210px;
width: 100%;
margin: auto;
}
.recipient-bar-main {
margin-left: 220px;
margin-right: 210px;
}
table.floating_recipient {
table-layout: fixed;
border-collapse: separate;
width: 100%;
/* Needs body background because the child row becomes transparent when faded */
background: #f4f5f4;
}
#bottom_whitespace {
display: block;
height: 300px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#home-error {
display: none;
}
.loading_indicator_spinner {
/* If you change these, make sure to adjust the constants in
* make_loading_indicator as well */
height: 38px;
width: 38px;
float: left;
}
.loading_indicator_text {
/* If you change these, make sure to adjust the constants in
* make_loading_indicator as well */
margin-left: 20px;
font-size: 33px;
font-weight: bold;
line-height: 38px;
}
.settings-section .loading_indicator_text {
font-size: 12px;
font-weight: 400;
vertical-align: middle;
line-height: 20px;
display: inline-block;
float: none;
}
.settings-section .loading_indicator_spinner {
width: 12px;
height: 12px;
vertical-align: middle;
display: inline-block;
}
.message_inline_image {
margin-bottom: 5px;
margin-left: 5px;
height: 100px;
}
.message_inline_image img {
height: auto;
max-height: 100%;
}
.popover {
width: auto;
}
.popover-title {
overflow-x: hidden;
text-overflow: ellipsis;
text-align: center;
font-size: inherit;
line-height: inherit;
}
.popover-title:empty {
display: none;
}
.popover_info {
text-align: center;
}
.popover hr {
margin-top: 5px;
margin-bottom: 5px;
}
.popover-left, .popover-right {
max-width: 175px;
}
.hotkeys_table {
float: left;
width: 245px;
margin-right: 10px;
font-size: 90%;
}
.hotkeys_table .hotkey {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
text-align: right;
font-weight: bold;
font-size: 90%;
white-space: nowrap;
}
.operator_value {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
color: maroon;
}
.operator {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}
#loading_more_messages_indicator {
margin: 10px;
}
#loading_more_messages_indicator_box_container {
position: absolute;
left: 50%;
}
#loading_more_messages_indicator_box {
position: relative;
left: -50%;
top: 25px;
border: 1px rgb(100, 100, 100) solid;
background-color: rgba(230, 230, 230, 0.8);
z-index: 1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#page_loading_indicator {
margin: 10px auto;
}
#subs_page_loading_indicator {
margin: 10px auto;
}
.subscriber_list_loading_indicator {
margin: 10px auto;
}
.table-striped thead th {
background-color: #444;
color: white;
}
#fmt_help_table {
table-layout: fixed;
}
.subscription-email-hint-image {
float: right;
width: 80px;
padding-right: 60px;
}
.subscription_header.collapsed {
background-color: inherit;
}
.subscription_settings,
.subscription_header,
.subscription_header.active {
background-color: #fefefe;
}
.color_swatch {
display: inline-block;
height: 18px;
width: 18px;
border-radius: 36px;
padding: 0;
margin: 0 0 0 10px;
vertical-align: middle;
}
.subscriptions {
margin-top: 55px;
padding-left: 15px;
}
#subscriptions_table .subscription_block {
padding-left: 0.5em;
vertical-align: middle;
display: inline-block;
}
#stream_filters .subscription_block {
padding-bottom: 4px;
line-height: 12px;
padding-top: 4px;
margin-right: 15px;
}
#stream_filters .subscription_block.stream-with-count {
margin-right: 38px;
}
.subscription_name {
display: block;
line-height: 1em;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.subscription-name-row {
line-height: 47px;
height: 40px;
}
#add_new_subscription {
text-align: center;
}
.subject-name {
display: block;
line-height: 1.3em;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#stream_filters .subscription_block .icon-vector-lock {
display: inline-block;
vertical-align: middle;
margin-top: 0px;
position: absolute;
top: 4px;
left: 4px;
font-size: 12px;
}
.subscription_header {
min-height: 47px;
}
.subscription_header .subscription_name {
display: inline-block;
width: auto;
}
.subscription_header .subscription_lock {
font-size: 23px;
display: inline-block;
vertical-align: middle;
margin-left: 12px;
margin-right: 1px;
}
.subscription_settings {
width: 100%;
position: relative;
top: -1px;
}
.subscription_settings form {
text-align: center;
}
.subscription_settings ul {
list-style-type: none;
}
.subscription-type {
text-align: center;
padding: 5px;
width: 80%;
margin: auto;
font-weight: 300;
}
.stream-email {
width: 80%;
margin: auto;
margin-top: 5px;
text-align: center;
padding: 5px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}
.subscription-control-label {
display: inline-block;
vertical-align: middle;
line-height: 18px;
padding: 5px;
}
.sp-replacer,
.sp-preview,
.sp-preview-inner {
border-radius: 20px;
}
.sp-preview {
width: 20px;
border: none;
box-shadow: 0px 0px 1px rgba(0,0,0,1);
}
.sp-replacer {
margin-right: 12px;
border: none;
box-shadow: 0px 0px 2px rgba(0,0,0,0.8);
}
.subscription-config {
width: 270px;
margin: auto;
margin-top: 25px;
}
.stream-email-box,
.subscriber_list_settings,
.rename-stream {
margin: 20px 15px 20px 15px;
}
.subscription_row {
border-top: 1px solid #ddd;
}
.stream-email .email-address {
width: 90%;
display: block;
margin: auto;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
.sub_setting_control[type="checkbox"] {
margin: 0 30px 5px 20px;
}
.streams_popover .sp-container {
background: white;
cursor: pointer;
border: none;
}
.streams_popover .sp-palette-container {
border-right: none;
}
.streams_popover .colorpicker-container {
display: inline-block;
margin-right: 10px;
}
.sub_setting_control {
display: inline-block;
margin-right: 10px;
}
.zulip-button {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* W3C */
background-color: #ddd;
color: #000;
border: 1px solid #fff;
border-radius: 3px;
line-height: 20px;
padding: 5px 8px 5px 8px;
outline: none;
}
.zulip-button:focus {
box-shadow: inset 0px 100px 0px 0px rgba(255,255,255,0.2), 0px 0px 0px 1px rgba(0,0,0,0.2);
}
.zulip-button:hover {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.09) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.09)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.09) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(0,0,0,0.09) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.09) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.09) 0%,rgba(0,0,0,0) 100%); /* W3C */
}
.sub_unsub_button {
min-width: 140px;
float: right;
margin-top: 9px;
margin-right: 10px;
}
.green-button {
background-color: #006e2e; /* Old browsers */
color: #fff;
}
.red-button {
background-color: #cc0000;
color: #ffffff;
}
.blue-button {
background-color: #0000cc;
color: #ffffff;
}
.sub_arrow {
float: right;
line-height: 47px;
padding: 0 15px 0 0;
}
#create_stream_row td {
background-color: #f3f3f3;
border-color: #BBB;
border-bottom: 1px solid #BBB;
}
#create_stream_name {
width: 220px;
margin-top: 10px;
}
#create_stream_button {
min-width: 140px;
margin-left: 15px;
margin-top: 10px;
}
.sub_settings_title {
line-height: 30px;
margin: 10px 0;
font-weight: 300;
font-size: 16px;
}
.new-stream-name,
.stream-rename-button {
margin-top: 10px;
}
.settings_committed {
margin: 10px;
}
.subscriber-list-box {
text-align: center;
}
.subscriber_list_container {
margin-top: 10px;
display: inline-block;
margin: auto;
max-height: 300px;
overflow: auto;
text-align: left;
}
.subscriber-list {
width: auto;
margin: auto;
margin-bottom: 20px;
background: #efefef;
border-radius: 6px;
}
.subscriber-list tr:nth-child(even) {
background: #fafafa;
}
.subscriber-name,
.subscriber-email {
padding: 5px;
}
.subscriber-name {
padding-left: 8px;
}
.subscriber-email {
margin-left: 20px;
padding-right: 8px;
}
.subscriber_list_add {
margin: auto;
text-align: center;
}
.add-subscriber-button,
.stream-rename-button {
margin-left: 5px;
}
.modal {
overflow: hidden;
margin-top: 0;
top: 5%;
outline: 0; /* Bootstrap uses tabindex=-1 on modals for focus and ESC handling,
so avoid the outline it causes */
}
.modal-body {
max-height: 60vh;
}
.modal form {
margin-bottom: 0px;
}
#invitee_emails {
min-height: 40px;
max-height: 300px;
}
#invite_status {
display: none;
}
.settings-dropdown-caret {
margin-left: 8px;
font-size: 14px;
}
#notifications-area {
position: fixed;
z-index: 10;
bottom: 0px;
right: 20px;
width: 200px;
height: auto;
}
.notifications-gravatar img {
max-width: 25px;
max-height: 25px;
padding-left: 4px;
padding-top: 4px;
}
#notifications-bar {
z-index: 9000;
position: absolute;
bottom: 0px; /* necessary to get slideUp, slideDown directions correct */
width: 100%;
height: 35px;
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 0px 10px;
background: #58F;
color: white;
font-size: 125%;
cursor: default;
display: none;
/* For now, cut off long messages (but we should find a better solution) */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.empty_feed_notice {
padding: 3em 4em;
display: none;
}
.empty_feed_notice h4 {
text-align: center;
}
#empty_narrow_message p {
text-align: center;
}
.faded {
opacity: 0.4;
}
#stream-message,
#private-message {
display: none;
}
.emoji {
height: 20px;
width: 20px;
vertical-align: text-bottom;
}
#sending-indicator {
float: left;
font-weight: bold;
display: none;
}
.streamlist_swatch {
display: block;
width: 1em;
height: 1em;
vertical-align: middle;
border-radius: 1em;
float: left;
position: absolute;
left: 1px;
top: 3px;
}
ul.expanded_subjects {
list-style-type: none;
font-weight: normal;
margin-left: 0px;
}
li.show-more-topics,
li.expanded_subject {
position: relative;
}
.show-all-streams a {
color: #333;
}
.all-streams-padding {
padding-top: 5px;
margin-bottom: -5px;
}
.expanded_subject .subject_box {
display: block;
margin-right: 38px;
}
.expanded_subject.zero-subject-unreads .subject_box {
display: block;
margin-right: 15px;
}
.twitter-tweet {
border: 1px solid #ddd;
padding: .5em .75em;
margin-bottom: 0.25em;
}
.twitter-avatar {
float: left;
width: 48px;
height: 48px;
margin-right: .75em;
}
.star {
display: inline-block;
opacity: 1;
font-size: 14px;
color: #2c8211;
}
.empty-star {
color: #bbb;
visibility: hidden;
}
.empty-star:hover {
cursor: pointer;
color: #565656;
}
.info {
display: inline-block;
font-size: 15px;
color: #bbb;
visibility: hidden;
}
.star:hover {
cursor: pointer;
color: #0d7245;
}
.settings_separator {
margin-top: 2em;
margin-bottom: 2em;
}
/* FIXME: Combine this rule with the one in portico.css somehow? */
#pw_strength {
width: 220px;
height: 25px;
margin-bottom: 0px;
}
/* Override padding-top on form labels when they label only text */
.form-horizontal .label_for_text {
padding-top: 0;
}
#pw_change_controls {
display: none;
}
.sub-unsub-message,
.date_row {
text-align: center;
padding-bottom: 10px; /* same as .bookend */
}
.date_row .date-direction {
display: inline-block;
padding-right: 5px;
}
.date_row .date-line {
display: inline-block;
vertical-align: middle;
width: 33%;
border-top: 1px solid #ccc;
border-bottom:1px solid #fff;
margin: 0px 5px 0px 5px;
}
.date_row span {
display: block;
background: inherit;
padding: 4px;
overflow: hidden;
text-transform: uppercase;
font-size: 0.8em;
color: #bbb;
text-shadow: 1px 1px 0px #fff;
}
.date_row span:before,
.date_row span:after {
display: inline-block;
position: relative;
content: " ";
vertical-align: middle;
width: 50%;
height: 0px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
}
.date_row span:before {
right: 0.5em;
margin-left: -50%;
}
.date_row span:after {
left: 0.5em;
margin-right: -50%;
}
#restore-draft {
float: left;
display: none;
margin-right: 1em;
padding-top: 2px;
}
#sending-indicator {
padding-top: 2px;
}
#restore-draft:hover {
cursor: pointer;
}
#compose a.message-control-button {
display: block;
color: #777;
text-decoration: none;
font-size: 14px;
width: 14px;
height: 14px;
margin-right: 8px;
padding-top: 5px;
text-align: center;
float: left;
}
#compose a.message-control-button:hover {
color: #000;
}
#enter_sends {
margin-top: 0px;
margin-right: 5px;
}
#group-pm-list {
display: none;
}
.zoom-out #topics_header {
display: none;
}
#streams_header,
#topics_header,
#userlist-header,
#sharethelove-header,
#group-pm-header {
border-top: 1px solid #ddd;
margin-top: 5px;
margin-right: 10px;
}
#stream_filters {
font-weight: normal;
}
#stream_filters .inactive_stream {
opacity: .5;
}
#word-alerts {
list-style-type: none;
width: 300px;
margin: auto;
}
.alert-word-item {
padding: 8px;
}
#word-alerts li.alert-word-item:nth-child(odd) {
background: #fdfdfd;
}
#word-alerts li.alert-word-item:nth-child(even) {
background: #f9f9f9;
}
#word-alerts li.alert-word-item:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#word-alerts li.alert-word-item:nth-last-child(2) {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
#word-alerts li.alert-word-item:last-child {
background: none;
margin-top: 8px;
}
#word-alert-settings {
margin-top: 15px;
margin-bottom: 30px;
}
.remove-alert-word,
.add-alert-word {
float: right;
}
input.edit-alert-word {
height: 12px;
line-height: 12px;
font-size: 1em;
}
input.edit-alert-word::-webkit-input-placeholder {
padding-top: 4px;
}
#bots_list {
display: none;
list-style-type: none;
margin-left: 0px;
}
#bots_list .image,
#bots_list .bot_info {
display: inline-block;
margin: 10px;
}
#bots_list .image {
vertical-align: top;
}
#bots_list .name {
font-weight: 300;
font-size: 18px;
margin-bottom: 20px;
}
#bots_list .field:after {
content: ':';
}
#bots_list .regenerate_bot_api_key {
padding: 2px;
width: 20px;
height: 20px;
background: #e3e3e3;
color: #666;
position: relative;
top: -2px;
}
#bots_list .regenerate_bot_api_key:hover {
color: #000;
}
#bots_list .edit-bot-buttons {
position: absolute;
right: 20px;
top: 20px;
}
.bot_info .field {
width: 6em;
font-weight: 300;
position: absolute;
}
.edit_bot_form {
font-size: 100%;
}
.edit_bot_email {
font-weight: 300;
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
div.edit_bot {
display: none;
}
.edit_bot_form .control-label,
#create_bot_form .control-label {
width: 10em;
text-align: right;
margin-right: 20px;
}
.upload_avatar_spinner {
font-size: 14px;
}
.edit_bot_avatar_clear_button,
#user_avatar_clear_button,
#bot_avatar_clear_button {
display: none;
}
#create_bot_short_name {
width: 7em;
}
.bot_name_header {
width: 8em;
}
#bots_list img.avatar {
height: 35px;
width: 35px;
}
#bots_list .email .value,
#bots_list .api_key .api-key-value-and-button {
display: inline-block;
margin-left: 6em;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
#feedback_section {
text-align: left;
padding-bottom: 10px;
}
.message_edit {
display: none;
margin-top: 5px;
}
/* Reduce some of the heavy padding from Bootstrap. */
#message_edit_form .edit-control-label {
width: auto;
float: left;
font-size: 80%;
}
#message_edit_form .edit-controls {
margin-left: 28px; /* Match .message_content padding less 7px textarea padding and border */
margin-right: -7px;
}
#message_edit_form textarea {
width: 100%;
min-width: 206px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#message_edit_form .control-group {
margin-bottom: 5px;
}
#topic_edit_form {
display: inline;
}
.message_edit_notice {
font-size: 11px;
}
.message_body_gravatar {
width: 20px;
height: 20px;
border-radius: 10px;
margin: 2px 2px 2px 0px;
border: 1px solid #000;
}
.user-mention {
background-color: #eee;
border-radius: 3px;
padding: 0 0.2em;
border: 1px solid #ccc;
white-space: nowrap;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
display: inline-block;
margin-bottom: 1px;
}
.user-mention-me {
background-color: #c9fcc1;
}
.alert-word {
background-color: #c9fcc1;
}
#settings {
margin-top: 55px;
margin-left: 15px;
}
#settings .settings-section {
background-color: #f1f1f1;
border: 1px solid #e3e3e3;
border-top: 6px solid #e3e3e3;
padding: 45px 0px 15px 0px;
margin-right: 5px;
position: relative;
}
#settings #notify-settings-status {
width: 80%;
text-align: center;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
#settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .edit-bot-form-box {
width: 400px;
margin: auto;
}
#settings .settings-section .new-bot-form,
#settings .settings-section .edit-bot-form-box {
margin-top: 35px;
}
#settings .settings-section .new-bot-section-title {
top: 20px;
left: 20px;
}
#settings .settings-section .notification-settings-form {
width: 400px;
margin: auto;
}
#settings .settings-section .account-settings-form .control-label,
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
width: 120px;
}
#settings .settings-section .account-settings-form .controls,
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin-left: 140px;
}
#settings .settings-section .notification-settings-form .controls {
display: inline-block;
vertical-align: middle;
margin: 0px;
margin-left: 110px;
padding-top: 0px;
padding-bottom: 0px;
line-height: 30px;
margin-right: 12px;
}
#settings .settings-section .notification-settings-form .controls input[type='checkbox'] {
margin: 0px;
padding: 0px;
vertical-align: middle;
position: relative;
top: -1px;
}
#settings .settings-section .notification-settings-form .control-label {
float: none;
display: inline-block;
vertical-align: middle;
margin: 0px;
padding: 0px;
line-height: 30px;
width: 240px;
}
#settings .settings-section .notification-settings-form .notification-submission {
margin-left: 140px;
}
#settings .notification-settings-form .notification-settings-note {
margin-left: 110px;
width: 250px;
font-size: 13px;
line-height: 14px;
margin-top: 15px;
margin-bottom: 20px;
}
#settings .bot-settings-note {
margin-left: 38px;
font-size: 13px;
}
#settings .bot-information-box,
#settings .add-new-bot-box {
background: #e3e3e3;
padding: 10px;
margin-left: 38px;
margin-right: 38px;
margin-bottom: 15px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
position: relative;
font-size: 14px;
}
#settings .add-new-bot-box {
background: #cbe3cb;
}
#settings #get_api_key_box,
#settings #show_api_key_box,
#settings #api_key_button_box .control-group {
text-align: center;
}
#settings #get_api_key_box .control-group {
margin: 0px;
width: 100%;
}
#settings #get_api_key_box .control-group .control-label {
float: none;
width: auto;
margin: 0px;
display: inline-block;
margin-right: 15px;
}
#settings #get_api_key_box .control-group input {
width: auto;
margin: 0px;
display: inline-block;
}
#settings #get_api_key_box .control-group .btn {
margin-top: 20px;
}
#settings .bot-information-box .email,
#settings .bot-information-box .api_key {
position: relative;
}
#settings .bot-information-box .image {
border-radius: 20px;
overflow: hidden;
border: 1px solid #676767;
}
#settings .settings-section .api-key-note {
padding: 0px 20px 20px 20px;
}
@media (max-width: 580px) {
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
float: left;
width: 120px;
padding-top: 0;
text-align: right;
}
#settings .settings-section .new-bot-form .controls {
margin-left: 110px;
}
}
@media (max-width: 480px) {
#pw_strength {
margin: auto;
}
#settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .notification-settings-form,
#settings .settings-section .edit-bot-form-box {
width: 100%;
}
#settings .settings-section .account-settings-form .control-label,
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
display: block;
width: 120px;
padding: 0px;
padding-top: 0;
text-align: center;
margin: auto;
float: none;
}
#settings .settings-section .account-settings-form .controls,
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin: auto;
text-align: center;
}
#settings .settings-section .account-settings-form .controls button,
#settings .settings-section .account-settings-form .controls input,
#settings .settings-section .new-bot-form .controls button,
#settings .settings-section .edit-bot-form-box .controls button,
#settings .settings-section .new-bot-form .controls input,
#settings .settings-section .edit-bot-form-box .controls input {
margin: auto;
}
#settings .settings-section .new-bot-form {
padding: 0px;
width: 100%;
text-align: center;
}
#settings .settings-section .notification-settings-form .controls,
#settings .notification-settings-form .notification-settings-note {
margin-left: 80px;
}
#settings .settings-section .notification-settings-form .notification-submission {
margin: 0px;
width: 100%;
text-align: center;
}
}
#settings .settings-section .settings-section-title {
font-size: 18px;
font-weight: 300;
position: absolute;
left: 12px;
top: 15px;
}
#settings .settings-section .settings-section-icon {
margin-right: 8px;
}
#settings h1,
#subscriptions h1 {
font-size: 25px;
font-weight: 300;
}
#settings .settings-icon,
#subscriptions .streams-icon {
margin-right: 10px;
font-size: 20px;
}
#settings #notification-settings {
margin-top: 15px;
}
#notification-docs {
color: #666666;
font-size: 11px;
position: relative;
top: -6px;
}
#notification-docs:hover {
color: #111111;
}
#settings-status {
text-align: center;
width: 50%;
margin: auto;
margin-bottom: 20px;
}
#home {
margin-top: 41px;
padding-right: 5px;
}
#home .alert-bar-container {
position: fixed;
width: 100%;
top: 41px;
left: 0px;
z-index: 5;
}
#home .alert-bar {
width: 100%;
max-width: 1210px;
margin: auto;
text-align: center;
}
#home .alert-bar-contents {
background: #9bff8b;
background: rgba(163,211,147,0.95);
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-radius: 2px;
font-weight: 400;
padding: 10px 35px 10px 10px;
display: inline-block;
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.7);
position: relative;
}
#home .alert-bar .alert-icon {
font-size: 20px;
margin-right: 10px;
line-height: 5px;
}
#home .alert-bar .close-alert-icon {
display: block;
height: 100%;
width: 28px;
line-height: 38px;
font-size: 15px;
opacity: 0.5;
position: absolute;
top: 0px;
right: 0px;
}
#home .alert-bar .close-alert-icon:hover{
opacity: 0.7;
cursor: pointer;
}
#notification-settings .control-group {
margin-bottom: 5px;
}
#notification-settings .control-label {
width: 280px;
text-align: left;
}
.zero_count {
display: none;
}
.message-pane {
padding-left: 0.3em;
}
.screen {
position: absolute;
left: 0;
top: 0;
background: #000;
z-index: 20000;
}
#tutorial-stream {
width: 250px;
}
#tutorial-subject {
width: 250px;
}
.tutorial-done-button {
text-align: right;
}
#share-the-love {
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
line-height: 18px;
display: none;
}
#share-the-love-contents {
display: none;
}
#share-the-love-expand-collapse {
position: relative;
cursor: pointer;
}
#share-the-love-expand-collapse h4 {
padding-left: 1em;
}
#share-the-love-expand-collapse .toggle {
position: absolute;
left: 0px;
top: 50%;
margin-top: -8px;
}
#share-the-love input,
#share-the-love p {
margin-top: 5px;
margin-bottom: 5px;
}
#referral-form label {
margin: 0;
}
#share-the-love .icon-vector-heart {
color: red;
}
#share-the-love .still-have-invites {
clear: both;
margin-right: 10px;
}
#share-the-love .no-more-invites {
clear: both;
display: none;
margin-right: 10px;
}
#share-the-love .invite-count-area {
margin-right: 10px;
}
#share-the-love .alert {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
#referral-form {
margin-bottom: 0;
}
#tell-a-friend-success {
display: none;
}
.screen-medium-show,
.screen-narrow-show {
display: none !important;
}
@media (max-width: 975px) {
.screen-full-show {
display: none !important;
}
.screen-medium-show {
display: block !important;
}
.app-main,
.header-main {
min-width: 750px;
}
.column-right {
display: none;
}
.column-right.expanded {
display: block;
position: absolute;
float: none;
right: 15px;
top: 0px;
}
.column-right.expanded .right-sidebar {
background: rgba(255,255,255,0.9);
box-shadow: 0px -2px 3px 0px rgba(0,0,0,0.1);
border-left: 1px solid #dddddd;
margin-top: 40px;
padding-top: 10px;
height: 100%;
}
.header-main .column-right {
display: inline-block;
width: 30px;
}
.navbar-search {
margin-right: 60px;
}
#navbar-buttons {
margin-left: 0px;
margin-top: 0px;
position: absolute;
right: 15px;
top: 8px;
}
#navbar-buttons.right-userlist .settings-dropdown-caret {
display: none;
}
#navbar-buttons.right-userlist #settings-dropdown {
right: 37px;
}
#navbar-buttons.right-userlist .nav .dropdown-menu {
left: -223px;
}
#userlist-toggle {
display: block;
}
#floating_recipient_bar {
margin-right: 20px;
}
.compose-content {
margin-right: 10px;
}
.nav .dropdown-menu {
left: -190px;
min-width: 180px;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.nav .dropdown-menu:after {
right: 10px;
}
.column-middle {
margin-left: -200px;
margin-right: 0px;
}
.column-middle-inner {
margin-left: 200px;
margin-right: 15px;
}
.app-main .column-middle {
margin-left: 0px;
}
.app-main .column-middle .column-middle-inner {
margin-left: 200px;
margin-right: 10px;
}
.recipient-bar-main {
margin-right: 20px;
}
}
@media (max-width: 775px) {
body {
padding: 0px;
}
.screen-narrow-show {
display: inline-block !important;
}
.column-left {
display: none;
}
.column-left.expanded {
display: block;
position: absolute;
float: none;
left: 0px;
top: 0px;
}
.column-left.expanded .left-sidebar {
background: rgba(255,255,255,0.9);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.1);
border-right: 1px solid #dddddd;
margin-top: 40px;
padding-top: 10px;
height: 100%;
padding-left: 10px;
}
body, html,
.app-main,
.header-main {
min-width: 350px;
}
.column-middle,
.app-main .column-middle {
margin-left: 0px;
margin-right: 0px;
}
.column-middle-inner,
.app-main .column-middle .column-middle-inner {
margin-left: 0px;
margin-right: 15px;
}
.skinny-user-gravatar {
position: absolute;
top: 0px;
}
.navbar-search {
margin-left: 37px;
}
#streamlist-toggle {
display: block;
}
#floating_recipient_bar {
margin-right: 25px;
min-width: 330px;
}
.compose-content {
margin-right:15px;
margin-left: 10px;
}
.recipient-bar-main {
margin-left: 20px;
margin-right: 25px;
}
}
@media (max-width: 500px) {
.compose_stream_button_label,
.compose_private_button_label {
display: none;
}
.subscription_name {
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 350px) {
html {
overflow-x: hidden;
}
}
.inactive_user_row {
text-decoration: line-through;
}
.administration {
margin-top: 55px;
padding-left: 15px;
}
li.show-more-topics a {
font-size: 75%;
}
.zoom-in .show-more-topics {
display: none;
}
.zoom-out .zoom-out-hide {
display: none;
}
.zoom-in .zoom-in-hide {
display: none;
}