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

ul#sidebar {
    margin-bottom: 0px;
}

#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;
}
.phone_new_message_button {
    margin-top: 5px;
    float: left;
}

#load_more {
    margin-bottom: 35px;
    display: none;
}

#application_area {
}

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

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

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

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

.sender_email {
    font-size: 80%;
    color: gray;

    /* Use padding, not margin, so that there's a continuous
       region of 'hover-ability' between fullname and email. */
    padding-left: 5px;
}
@media (max-width: 480px) {
    .sender_email {
        display: none;
    }
}

.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_time {
    color: gray;
    float: right;
    font-size: 90%;
}

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

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

#top_statusbar {
    position: fixed;
    /* .message_list max-width + 30px margin */
    max-width: 670px;
    text-decoration: none;
    top: 0px;
    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;
}

#searchbox {
    /* Needed because top_statusbar is visibility: hidden
       and we don't want to inherit that */
    visibility: visible;
    max-height: 30px;
    padding: 5px 10px;
    max-width: 640px;
}

.always_in_view {
    background-color: aliceblue;
}

#search_query {
    width: 95%;
}

.highlight {
    background-color: #FCEA81;
}

#searchbox .search_button {
    display: none;
    margin-bottom: 10px;
    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;
}

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

.narrowed_view {
    background-color: #DDD;
}

#top_whitespace {
  display: block;
  height: 40px;
}

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

#home-error {
    display: none;
}

#loading_indicator {
    margin-top:  40px;
    font-size:   36px;
    font-weight: bold;
}

#loading_spinner {
    width: 40px;
    padding-right: 40px;
}

#message-type-tabs {
    margin-top: 0px;
    margin-bottom: 0px;
}

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

.userinfo_popover a {
    cursor: pointer;
}

.popover {
    width: auto;
}

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

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

.hotkeys_table .hotkey_heading {
    padding-top: 1em;
}

.cursor_pointer {
    cursor: pointer;
}

#load_more_messages_indicator {
    display: none;
    margin: 0 auto;
    height: 50px;
    padding-top: 30px;
}

.table-striped thead th {
    background-color: #444;
    color: white;
}


#fmt_help_table {
    table-layout: fixed;
}

.subscription_header {
    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;
}

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

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

.unsubscribe_button {
    width: 140px;
    float: right;
}

#invite_user_form {
    margin-bottom: 0px;
}

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

#invite_status {
    display: none;
}

hr.sidebar {
    margin: 0px;
}