zulip/zephyr/static/styles/zephyr.css

body {
    font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-y: scroll;
}

input, button, select, textarea {
    font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: normal;
}

.container-fluid {
    max-width: 1200px;
    margin: 0px auto;
}

#left-sidebar {
    max-width: 300px;
}

#right-sidebar {
    margin-left: 20px;
}

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;
    min-height: 2.2em;
    line-height: 100%;
}

.btn-large {
    font-size: 115%;
}

.navbar .brand {
    font-size: 140%;
    font-weight: 300;
}

/* 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;
}

/* 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 {
    /* 13/14 em, so bootstrap's default 13 px,
       when body is the default 14 px */
    font-size: 0.929em;
    line-height: inherit;
}

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 {
    background-color: white;
    padding: 0.5em;
    margin-top: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 767px) {
    .sidebar-nav {
        background-color: white;
        padding: 0.5em;
        margin: 0px;
        border: 1px solid black;
    }
}

#left-sidebar .brand {
    display: table-row;
}

#left-sidebar .gravatar-profile {
    display: table-cell;
}

#my_information {
    display: table-cell;
    vertical-align: middle;
    padding-left: 0.5em;
}

#my_information .my_fullname {
    font-weight: bold;
    white-space: nowrap;
}
.my_email {
    font-weight: 300;
}


.logout {
    white-space: nowrap;
}

.new_message_button {
    padding-top: 1em;
}

.compose_private_button, .compose_stream_button {
}

.bottom_sidebar {
    margin-top: 1em;
}

#stream_filters {
    overflow-y: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 10px 10px 0;
    padding: 10px 0 10px 0;
}
#stream_filters:hover {
    overflow-y: auto;
}

#user_presences {
    list-style-position: inside; /* Draw the bullets inside our box */
    margin-top:  1em;
    margin-left: 0;
    overflow-y:  hidden;
}
#user_presences:hover {
    overflow-y: auto;
}

#user_presences li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#user_presences li.user_active {
    list-style-image: url(/static/images/presence/user-active.png);
}

#user_presences li.user_away {
    list-style-image: url(/static/images/presence/user-away.png);
}

#user_presences li.user_idle {
    list-style-image: url(/static/images/presence/user-idle.png);
}

#user_presences a {
    color: #333;
}

ul.filters {
    list-style-type: none;
    padding-right: 1em;
}

ul.filters a {
    color: #333;
}

ul.filters hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

li.active-filter, li.active-subject-filter {
    font-weight: bold;
}

li.hidden-filter {
    visibility: hidden;
    display: none;
}

ul.filters .count {
    margin-left: 0.5em;
    display: none;

}

ul.filters i {
    padding-right: 0.25em;
}

.message_list {
    /* If we change this color, we must change message_reply_fade */
    background-color: aliceblue;
}

.message_area_padder {
    padding-left: 10px;
    padding-right: 20px;
    /* This is needed for the floating recipient bar
     in Firefox only, for some reason; otherwise it gets
     a scrollbar */
    overflow: visible;
}
@media (max-width: 480px) {
    .message_area_padder {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.message_comp {
    border: 1px solid #EEE;
    background-color: white;
    padding: 8px 20px 8px 10px;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

td.pointer {
    vertical-align: top;
    padding-top: 10px;
}

.selected_message .messagebox {
    background-color: #F7F7F7;
}

.selected_message .messagebox.private-message {
    background-color: #FEFFCC;
}

.selected_message .messagebox.mention {
    background-color: #FFE0DC;
}

.selected_message .pointer {
    background-color: #08c;
}
.window_blurred .selected_message .pointer {
    background-color: #9bc;
}

/* Adjust certain message elements so they still
   stand out against the grey background */

.selected_message pre {
    background-color: white;
}

.selected_message code {
    background-color: white;
}

.selected_message blockquote {
    border-left-color: #BBB;
}

.message_picture {
    vertical-align: top;
    text-align: right;
    padding-right: 7px;
    padding-top: 5px;
}

.ztable_layout_row {
    visibility: collapse;
}
.ztable_col1 {    /* sender's gravatar */
    width: 46px;
}
@media (max-width: 480px) {
    .ztable_col1 {
        width: 0px;
    }
}
.ztable_col2 {    /* pointer */
    width: 2px;
}
.ztable_col3 {    /* subjectname */
}

.recipient_row {
    border: 1px solid grey;
}

.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:    bold;
    padding-left:   14px;
}

.message_header_stream {
    background-color: #bbb;
}

.message_header_private_message {
    background-color: #444;
}

.messagebox.private-message {
    border-width: 0px 1px 1px 1px;
    background-color: #feffe0;
}

.messagebox.mention {
    background-color: #FFE4E0;
}

.sender_name {
    color: #333;
    font-weight: bold;
}

.actions_hovered .sender_name {
    color:           #0088CC;
    text-decoration: underline;
}

.message_label_clickable:hover {
    cursor: pointer;
    color:  #08C;
}

/* Brighten text because of the dark background */
.dark_background {
    color: white;
}

.dark_background .message_label_clickable:hover {
    color: #3BF;
}

.message_top_line {
    /* Move the float out of the way of the contents */
    margin-bottom: 1px;
}

.message_right {
    float: right;
}

.message_time {
    font-weight: 300;
    font-size: 90%;
}

.small {
    font-size: 80%;
}

.actions_hovered .message_time {
    color:           #0088CC;
    text-decoration: underline;
}

.actions_link {
    font-size:    90%;
    color:        #0088CC;
    margin-right: 6px;
    visibility:   hidden;
}

.message_hovered .actions_link {
    visibility: visible;
}

.actions_hovered .actions_link {
    text-decoration: underline;
}

table.message_table {
    table-layout: fixed;
    margin-left: auto;
    display: none;
    width: 100%;
}

table.compose_table {
    table-layout: fixed;
    margin-left: auto;
    width: 100%;
}

table.focused_table {
    display: table;
}

.message_content {
    margin-left: 5px;
    margin-right: 35px; /* size of the timestamp */
    line-height: 17px;
}
@media (max-width: 480px) {
    .message_content {
        margin-right: 5px;
    }
}

.message_content.condensed {
    max-height: 8.5em;
    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;
}

blockquote {
    margin-bottom: 6px;
}

blockquote p {
    line-height: inherit;
    font-size:   inherit;
}

.messagebox {
    padding: 5px 14px;
    background-color: white;
    border: 1px solid gray;
    border-width: 0px 1px 1px 1px;
    word-wrap: break-word;
    cursor: pointer;
}

#send_message_form {
    margin: 0px;
}

#send_message_form .messagebox {
    /* normally 5px 14px; pull in the right and bottom a bit */
    padding-right: 5px;
    padding-bottom: 0px;
    border-top-width: 1px;
    cursor: default;
}

#send_message_form .message_content {
    display: table-row;
    margin-right: 0px;
}

#below-compose-content {
    display: table-row;
    font-size: 80%;
    white-space: nowrap;
    padding-top: 6px;
}

.messagebox p {
    margin-bottom: 5px;
}

.bookend {
    padding-top: 10px;
}

.prev_is_same_sender {
    padding-top: 0px;
}

.next_is_same_sender {
    border-bottom: 0px;
    padding-bottom: 0px;
}

img.profile_picture {
    display: block;
    float: right;
    margin-top: 5px;
    max-height: 30px;
    width:  30px;
    height: 30px;
    cursor: pointer;
}
@media (max-width: 480px) {
    img.profile_picture {
        display: none;
    }
}
img.inline_profile_picture {
    display: none;
}
@media (max-width: 480px) {
    img.inline_profile_picture {
        display: inline;
    }
}

#compose {
    position: fixed;
    bottom: 0px;
    background: white;
    z-index: 1;
}

/* Like .nav-tabs > li > a */
#send-status {
    width: 90%;
    padding: 8px 14px 8px 14px;
    line-height: 20px;
}

/* 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);
}

.home-error-bar {
    margin-top: 5px;
    display: none;
}

.streamname {
    font-weight: bold;
}

.home-error-bar .alert {
    margin-bottom: auto;
}

textarea.new_message_textarea {
    display: table-cell;
    width: 99%;
    min-height: 3em;
    max-height: 11em;
    margin-bottom: 0px;
    resize: none;
}

input.recipient_box {
    margin-bottom: 0px;
    margin-top: 0px;
}

#stream.recipient_box {
    width: 20%;
}
#subject.recipient_box {
    width: 30%;
}
#private_message_recipient.recipient_box {
    width: 72%;
}

#send_controls {
    display: table-cell;
    vertical-align: bottom;
    padding-left: 21px;
    /* jQuery's slideDown() animation seems to compute the target height by
       drawing these elements in an (offscreen) context where they would reflow
       onto multiple lines.  We need to prevent that in order to avoid an
       animation glitch.  See: http://is.gd/EVJFZ8 */
    white-space: nowrap;
    /* This white-space nowrap is also critical for making sure that the
       button doesn't get smushed as the textarea expands; clearly the
       button is taking up more than the 1% width specified below. */
    width: 1%;
}

.compose_help_text {
    font-size: 90%;
}

#navbar-spacer {
    /* A spacer that is exactly a navbar size, so that all content
    gets pushed unerneath it */
    width: 100%;
    height: 40px;
}

.brand {
    cursor: pointer;
}

#navbar-middle {
    display: table-row;
}

.brand.skinny-user-gravatar {
    display: table-cell;
    padding-top: 5px;
    padding-bottom: 0px;
    margin-bottom: 5px;
    white-space: nowrap;
}

#searchbox {
    display: table-cell;
    width: 99%;
}

#navbar-buttons {
    display: table-cell;
    white-space: nowrap;
    width: 1%;
}

#navbar-buttons ul.nav {
    margin: 0px;
    /* Firefox-specific hack; Technically white-space: nowrap applies to
       text, not "stuff in general", so in Firefox without this, the
       <li>s all get smushed vertically (in Chrome and Safari, they
       don't).
       Fortunately, Firefox also provides this nice 'max-content'
       thing which is basically 'give us as much space as we need'. */
    width: -moz-max-content;
}

#searchbox_form {
    width: 99%;
    padding-right: 10px;
}

#search_query {
    width:       95%;
    line-height: normal;
    font-size:   inherit;
    height:      1.6em;
}
@media (max-width: 480px) {
    /* This is a hack to keep the search box from overflowing outside the
       message area -- really the formula should be something like
       [message area width] - [search query horizontal overhead] At
       narrow widths, the overhead is a larger % of the window width.
       */
    #search_query {
        width: 90%;
    }
}

.highlight {
    background-color: #FCEA81;
}

#search_arrows {
    width: 99%;
    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;
}

#searchbox .search_button {
    height: 30px;
    text-align: center;
    padding: 4px 10px 4px 10px;
}

#floating_recipient_bar {
    position: fixed;
    /* .message_list max-width */
    text-decoration: none;
    top: 41px; /* should really be the same as the height of navbar-spacer */
    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;
}

table.floating_recipient {
    table-layout: fixed;
    margin-left: auto;
    width: 100%;
}

.narrowed_view {
    /* If we change this color, also change
       message_reply_fade_narrowed */
    background-color: #DDD;
}

#bottom_whitespace {
  display: block;
  height: 300px;
}

#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;
}

.message_body_gravatar {
    margin-bottom: 2px;
    width:  20px;
    height: 20px;
}

.message_inline_image {
    margin-bottom: 5px;
    margin-left: 5px;
    height: 100px;
}

.message_inline_image img {
    height: 100%;
}

.actions_popover a {
    cursor: pointer;
}

.popover {
    width: auto;
}

.popover-title {
    overflow-x: hidden;
    text-overflow: ellipsis;
    text-align: center;

    font-size:   inherit;
    line-height: inherit;
}

.popover_info {
    text-align: center;
}

.popover hr {
    margin-top:    5px;
    margin-bottom: 5px;
}

.hotkeys_table {
    float: left;
    width: 250px;
    margin-right: 10px;
    font-size: 90%;
}

.hotkeys_table .hotkey {
    text-align: right;
    font-weight: bold;
}

.cursor_pointer {
    cursor: pointer;
}

#loading_more_messages_indicator {
    margin: 10px auto;
}

#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_table_elem {
    padding: 2px;
    line-height: 30px;
}

.subscription_header.active {
    border-color: rgba(82, 168, 236, 0.8);
    cursor: pointer;

  -webkit-box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6);
}

.color_swatch {
    display: inline-block;
    height: 1em;
    width: 1em;
    border: 1px #666 solid;
    padding: 0;
    margin: 0 0 0 5px;
    vertical-align: middle;
}

.subscription_name {
    padding-left: 0.5em;
    vertical-align: middle;
}

.subscription_settings {
    margin-left: 35px;
    margin-right: 35px;
    clear: right;
}

.subscription_settings form {
    margin: 0;
}

.subscription_settings ul {
    list-style-type: none;
}

.subscriber_list_settings {
    margin-top: 10px;
}

.sub_setting_control[type="checkbox"] {
    margin: 0 30px 5px 20px;
}

.sub_setting_control {
    display: inline-block;
    margin-right: 10px;
}

.sub_unsub_button {
    min-width: 140px;
    float: right;
}

#create_stream_row td {
    background-color: #f3f3f3;
    border-color: #BBB;
    border-bottom: 1px solid #BBB;
}

#create_stream_name {
    margin-left: 25px;
    width: 220px;
}
@media (max-width: 480px) {
    #create_stream_name {
        width: 130px;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    #create_stream_name {
        width: 140px;
    }
}

#create_stream_button {
    min-width: 140px;
    float: right;
}

.sub_settings_title {
    line-height: 30px;
    margin: 10px 0;
    font-weight: bold;
}

.settings_committed {
    margin: 10px;
}

.subscriber_list_container {
    max-height: 200px;
    overflow: auto;
    margin-top: 10px;
    clear: right;
}

.subscriber_list_add {
    float: right;
}

#invite_user_form {
    margin-bottom: 0px;
}

#invitee_emails {
    min-height: 40px;
    max-height: 300px;
}

#invite_status {
    display: none;
}

@media (max-width: 480px) {
    body {
        padding-right: 5px;
        padding-left: 5px;
    }
}

#settings-dropdown .glyphicons {
    margin-right: -10px;
    margin-bottom: 5px;
}

#notifications-area {
    position: fixed;
    bottom: 0px;
    right: 20px;
    width: 200px;
    height: 35px;
}

#notifications-bar {
    z-index: 9000;
    position: absolute;
    bottom: 0px; /* necessary to get slideUp, slideDown directions correct */
    width: 100%;
    height: 100%;
    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;
}

#stream-creation {
    max-height: 80%;
}

#stream-creation .modal-body {
    /* Setting max-height to a percentage doesn't work. */
    max-height: 400px;
    overflow-y: scroll;
}

.empty_feed_notice {
    padding: 1em 4em;
    display: none;
}

.empty_feed_notice h4 {
    text-align: center;
}

#empty_narrow_message p {
    text-align: center;
}

.message_reply_fade {
    /* If we change the message_list background, we must change this */
    border-color: aliceblue;
    opacity: .4;
}

.message_reply_fade_narrowed {
    /* If we change the narrowed_view background, we must change this */
    border-color: #DDD;
    opacity: .4;
}

#stream-message, #private-message {
    border: 1px solid grey;
    display: none;
}

.emoji {
    height: 1.4em;
    width: 1.4em;
}

#sending-indicator {
    float: left;
    font-weight: bold;
    display: none;
}

.streamlist_swatch {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    border-radius: 1em;
   -moz-box-shadow:     1px 1px 5px #333 inset;
   -webkit-box-shadow:  1px 1px 5px #333 inset;
    box-shadow:         1px 1px 5px #333 inset;
}

ul.expanded_subjects {
    list-style-type: none;
    font-weight: 300;
}

li.expanded_subject {
    margin-left: .3em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.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 {
    padding-left: 5px;
    opacity: .7;
    font-size: 16px;
    color: #2c8211;
}

.star:hover {
    cursor:  pointer;
    opacity: 1;
}

.empty_feed_notice p {
    text-align: center;
}

.settings_separator {
    margin-top:    2em;
    margin-bottom: 2em;
}

/* FIXME: Combine this rule with the one in portico.css somehow? */
#pw_strength {
    /* Same width as a Bootstrap default text <input> with padding */
    width: 220px;
}

/* Override padding-top on form labels when they label only text */
.form-horizontal .label_for_text {
    padding-top: 0;
}

#pw_change_controls {
    display: none;
}

.humbug-icon-star {
    background-position: -121px 0 !important;
    padding-right: 0.09em !important; /* Alignment hack to line up with other icons */
}

.sub-unsub-message {
    text-align: center;
    padding-bottom: 10px; /* same as .bookend */
}

#restore-draft {
    float: left;
    display: none;
    margin-right: 1em;
}

#restore-draft:hover {
    cursor:  pointer;
}

#compose a.message-control-button {
    display: inline-block;
    color: #777;
    text-decoration: none;
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border-radius: 2px;
    text-align: center;
    float: left;
}

#compose a.message-control-button:hover {
    color: #000;
}

#stream_filters {
    font-weight: 300;
}

#stream_filters .inactive_stream {
    opacity: .5;
}