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-left: 10px;
    padding-right: 20px;
    padding-top: 8px;
    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 .pointer {
    background-color: blue;
}

.narrowed_selected_message .pointer {
    background-color: #6699FF;
}

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

.ztable_layout_row {
    visibility: collapse;
}
.ztable_col1 {    /* streamname */
    width: 46px;
}
.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;
}

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

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

#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 {
    width: 100%;
    min-height: 48px;
    max-height: 150px;
    resize: none;
}

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

#stream.recipient_box {
    width: 20%;
}
#subject.recipient_box {
    width: 64%;
}
#private_message_recipient.recipient_box {
    width: 75%;
}

#send_controls {
    float: right;

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

.compose_help_text {
    margin-right: 20px;
    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 */
}

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

.narrowed_to_bar {
    /* We use display: to toggle whether or not this actually shows up,
       but we need visibility: visible because its parent,
       top_statusbar, is visibility: hidden and we don't want to
       inherit that. */
    visibility: visible;
    display: none;
    padding: 5px 10px;
    background-color: #DDD;
    border: 1px solid black;
}

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

#narrowlabel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 46px;
}

#currently_narrowed_to {
    font-weight: bold;
}

.narrowed_view {
    background-color: #DDD;
}

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

#top_narrowed_whitespace {
  visibility: hidden;
  display: none;
  height: 34px; /* Height of narrowlabel + floating indicator */
}

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

#stream_or_private_message {
    margin: 3px;
    padding: 5px;
    width: 90%;
    border: 1px solid grey;
}

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