zulip/zephyr/static/styles/zephyr.css

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

textarea, input {
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}

code {
    white-space: nowrap;
}

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

#nav_whitespace {
    visibility: hidden;
}

.my_fullname {
    font-weight: bold;
    font-size: 150%;
    white-space: nowrap;
}
.my_email {
    color: grey;
}
@media (max-width: 767px) {
    .my_fullname {
        font-size: 100%;
    }
    .my_email {
        font-size: 80%;
    }
}

.logout {
    white-space: nowrap;
}

.new_message_button {
    padding-top: 1em;
}

.bottom_sidebar {
    margin-top: 1em;
    overflow-y: hidden;
}
.bottom_sidebar:hover {
    overflow-y: auto;
}

#user_presences li {
    margin-left: 15px;
}
#user_presences li.active-icon {
    margin-left: 0px;
}
#user_presences li.active-icon:before {
    content: url(/static/images/green-dot.png);
    margin-right: 6px; /* +9px image = 15px */
}

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

ul.filters a {
    color: black;
}

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

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

.phone_new_message_button {
    margin-top: 5px;
    float: left;
}

#application_area {
}

.message_list {
    max-width: 640px;
    background-color: aliceblue;
    padding-left: 10px;
    padding-right: 20px;
    overflow-x: hidden;
}
@media (max-width: 480px) {
    .message_list {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.message_comp {
    display: none;
    border: 1px solid #EEE;
    max-width: 640px;
    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 .pointer {
    background-color: #08c;
}

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

.message_header {
    vertical-align: middle;
    text-align:     left;
    overflow-x:     hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    font-weight:    bold;
    padding-left:   14px;
}

.message_header_stream {
    background-color: #bbb;
    border: 1px solid grey;
}

.message_header_private_message {
    color: white;
    background-color: #444;
    border: 1px solid #444;
}

.message_header.left_part {
    border-right: 0px;
}
.message_header.right_part {
    border-left: 0px;
}

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

.sender_name {
    color: black;
    font-weight: bold;
}

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

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

/* Brighten hover because of the dark background */
.recipient_row .message_header_private_message: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 {
    color: gray;
    font-size: 90%;
}

.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 */
}
@media (max-width: 480px) {
    .message_content {
        margin-right: 5px;
    }
}

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;
    cursor: default;
}

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

#tab-enter-message {
    display: table-row;
    font-size: 80%;
    white-space: nowrap;
    text-align: right;
}

.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 {
    visibility: hidden;
    position: fixed;
    bottom: 0px;
    background: white;
    max-width: 670px;
}

/* 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);
    margin-left: 5px;
    position:    relative;
    top:         1px;
}

.composebox-close {
    padding: 5px;
    padding-top: 8px; /* = message_comp padding_top */
}

.send-status-close:hover {
    cursor:  pointer;
    opacity: .4;
    filter:  alpha(opacity=40);
}

.compose_table #private-message {
    display: none;
}

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

#stream-dne {
    display: none;
}

#stream-nosub {
    display: none;
}

.streamname {
    font-weight: bold;
}

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

textarea.new_message_textarea {
    display: table-cell;
    width: 99%;
    min-height: 40px;
    max-height: 150px;
    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;
}
#top_statusbar {
    position: fixed;
    /* .message_list max-width + 30px margin */
    max-width: 670px;
    text-decoration: none;
    top: 40px; /* 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;
}

#navbar-middle {
    display: table-row;
    max-width: 670px;
}

.brand.skinny-user-gravatar {
    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;
}
@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 {
    margin-bottom: 5px;
}

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

/* A cheat, because input-prepend and input-append aren't
   smart enough to do the right thing with search-query */
#searchbox .search_button_middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

.floating_recipient_bar {
    max-width: 640px;
    /* from .message_list */
    padding-left: 10px;
    padding-right: 20px;
}
@media (max-width: 480px) {
    .floating_recipient_bar {
        padding-left: 10px;
        padding-right: 10px;
    }
}

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

.narrowed_view {
    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-type-tabs {
    margin-top: 0px;
    margin-bottom: 0px;
}

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

.actions_popover a {
    cursor: pointer;
}

.popover {
    width: auto;
}

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

.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;
    height: 30px;
    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;
    font-size: 14px;
    vertical-align: middle;
}

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

.subscription_settings form {
    margin: 0;
}

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

.subscriber_list_settings {
    margin-top: 10px;
}

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

.sub_unsub_button {
    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 {
    width: 140px;
    float: right;
}

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

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

.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;
    z-index: 9000;
    bottom: 0px;
    right: 20px;
    width: 200px;
    height: 35px;
}

#notifications-bar {
    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;
}