body, html { width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden; touch-action: manipulation; } #app-loading.loaded { display: none !important; /* We are now loaded, by definition. */ } body { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Common background color */ body, #tab_bar_underpadding { background-color: hsl(0, 0%, 100%); transition: background-color 200ms linear; } input, button, select, textarea { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: normal; } blockquote p { font-weight: normal; } a { cursor: pointer; } .no-select { user-select: none; } .auto-select { user-select: auto; } .text-select { user-select: text; } p.n-margin { margin: 10px 0px 0px 0px; } .small-line-height { line-height: 1.1; } .float-left { float: left; } .float-right { float: right; } .float-clear { clear: both; } .no-margin { margin: 0; } .border-radius { border-radius: 4px; } .modal-backdrop { z-index: 102; } .history-limited-box { color: hsl(16, 60%, 45%); border: 1px solid hsl(16, 60%, 45%); box-shadow: 0 0 2px hsl(16, 60%, 45%); } .all-messages-search-caution { border: 1px solid hsla(192, 19%, 75%, 0.2); box-shadow: 0 0 2px hsla(192, 19%, 75%, 0.2); } .history-limited-box, .all-messages-search-caution { border-radius: 4px; display: none; height: 28x; font-size: 16px; margin: 0 auto 12px; padding: 5px; i { margin: 0 3px 0 1px; } p { margin: 0; padding: 4px; } } .top-messages-logo { width: 24px; height: 24px; margin: 0 auto 12px; } .top-messages-logo svg circle { fill: hsl(0, 0%, 27%); stroke: hsl(0, 0%, 27%); } .top-messages-logo svg path { fill: hsl(0, 0%, 100%); stroke: hsl(0, 0%, 100%); } #feedback_container { display: none; position: absolute; width: 400px; top: 0px; left: calc(50vw - 220px); padding: 15px; background-color: hsl(0, 0%, 98%); border-radius: 5px; box-shadow: 0px 0px 30px hsla(0, 0%, 0%, 0.25); z-index: 110; animation-name: pulse; animation-iteration-count: infinite; animation-duration: 2s; transition-property: top, bottom; transition-duration: 0.5s; } #feedback_container.show { top: 50px; } #feedback_container h3 { font-size: 16pt; margin-top: 2px; } @keyframes pulse { 0% { box-shadow: 0px 0px 30px hsla(0, 0%, 0%, 0.35); } 50% { box-shadow: 0px 0px 30px hsla(0, 0%, 0%, 0.15); } 100% { box-shadow: 0px 0px 30px hsla(0, 0%, 0%, 0.35); } } .fade-in-message { animation-name: fadeInMessage; animation-duration: 1s; animation-iteration-count: 1; } .fade-in-message .message_edit_notice { animation-name: fadeInEditNotice; animation-duration: 1s; animation-iteration-count: 1; } .message_edit_notice_hover:hover { opacity: 1.0; } #feedback_container .exit-me { font-size: 30pt; font-weight: 200; margin: 5px 0px 0px 10px; cursor: pointer; } .header { position: fixed; z-index: 102; /* Needs to be higher than .alert-bar-container */ width: 100%; height: 40px; padding-bottom: 10px; background-color: inherit; } #top_navbar { border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); } #panels { font-size: 1rem; } #panels .alert { margin: 0; padding-top: 12px; padding-bottom: 12px; border: none; border-radius: 0; text-align: center; text-shadow: none; color: hsl(0, 0%, 100%); } #panels .alert.alert-info { background-color: hsl(170, 46%, 54%); } #panels .alert.alert-info.red { background-color: hsl(0, 46%, 54%); } #panels .alert .close { line-height: 24px; } #panels .alert .alert-link { color: hsl(169, 100%, 88%); font-weight: 600; } #panels .alert.red .alert-link { color: hsl(0, 100%, 88%); } #panels .alert .buttons .alert-link { margin: 0px 5px; } .app { width: 100%; height: 100%; overflow-y: scroll; z-index: 99; -webkit-overflow-scrolling: touch; } .app-main, .header-main { width: 100%; // TODO: This 1400px is wrong, but it's hard to do better. On // browsers with a nonzero default scrollbar width (i.e. not // macOS), we actually want a max-width of 1400px+the width of the // scrollbar, which is done as an override in // static/js/scroll_bar.js. // // And with the fluid_layout_width setting, we don't want a // max-width at all. The consequence is that if you reload a // Zulip window, there's a brief flash where the content is // misplaced before the JS code can fix it. max-width: 1400px; min-width: 950px; margin: 0px auto; padding: 0px; position: relative; background-color: hsl(0, 0%, 100%); } .app-main { height: 100%; min-height: 100%; } .fixed-app { width: 100%; position: fixed; z-index: 98; left: 0px; } .column-left, .column-right { width: 250px; max-width: 250px; } .column-left { position: absolute; left: 0px; top: 0px; } .column-right { position: absolute; right: 0px; top: 0px; } .app-main .column-left .left-sidebar, .app-main .column-right .right-sidebar { position: fixed; margin-top: 50px; z-index: 100; } .app-main .column-left .left-sidebar { width: 242px; padding-left: 0px; } .app-main .column-right .right-sidebar { padding-left: 10px; width: 240px; } .app-main .column-middle { min-height: 100%; } .column-middle { margin-right: 250px; margin-left: 250px; position: relative; } textarea, input { font-family: 'Source Sans Pro', 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%; } .copy_message, .copy_message:focus { background-color: hsl(0, 0%, 100%); height: 20px; width: 15px; padding: 5px 10px; border: none; position: relative; top: 28px; left: -5px; margin-top: -24px; display: block; /* The z-index here ensures that the copy-message icon is clickable and is needed because of reduced opacity of readonly textarea */ z-index: 2; } #clipboard_image { margin-top: -5px; margin-left: -8px; } .copy_message:hover svg path { fill: hsl(0, 0%, 0%); } .btn-large { font-size: 115%; } .header-main .logo { display: inline-block; font-size: 120%; font-weight: 900; text-shadow: none; color: hsl(0, 0%, 100%); font-variant: small-caps; letter-spacing: 2px; line-height: 18px; text-decoration: none; position: relative; } .header-main .logoimage { height: 40px; width: auto; } #user-settings-avatar { width: 100px; height: 100px; } /* 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; } /* Lighter strong */ strong { font-weight: 600; } .preserve_spaces { white-space: pre-wrap; } .sp-input { width: calc(100% - 14px); box-sizing: initial !important; } .logout { white-space: nowrap; } .sidebar-title { font-size: 14px; color: hsl(0, 0%, 43%); font-weight: normal; display: inline; } .tooltip.in { font-size: 12px; line-height: 1.3; opacity: 1; } .tooltip.in.left { margin-left: -12px; margin-top: 3px; } .tooltip .tooltip-inner { background-color: hsla(0, 0%, 7%, 0.8); padding: 3px 5px; } .buddy_list_tooltip_content { text-align: left; } #message_edit_tooltip { float: right; color: hsl(0, 0%, 0%); font-size: 13px; margin-top: 3px; margin-left: 6px; opacity: 0.5; cursor: pointer; } #message_edit_tooltip:hover { opacity: 1.0; } .message-edit-tooltip-inner { width: 200px; position: absolute; right: 7px; top: -18px; } .narrow-filter { display: block; position: relative; } .message_header_stream a.message_label_clickable { color: inherit; } li.actual-dropdown-menu i { /* In gear menu, make icons the same width so labels line up. */ display: inline-block; width: 14px; text-align: center; margin-right: 3px; } .message_area_padder { /* The height of the header and the tabbar plus a small gap */ margin-top: 57px; /* This is needed for the floating recipient bar in Firefox only, for some reason; otherwise it gets a scrollbar */ overflow: visible; } td.pointer { vertical-align: top; padding-top: 10px; background-color: hsl(0, 0%, 100%); } .new_messages { background-color: hsl(194, 53%, 79%); } .new_messages, .new_messages_fadeout { transition: all 3s ease-in-out; } .include-sender .message_edit_notice { display: inline-block; vertical-align: top; line-height: 14px; margin-left: 0px; position: static; padding: 0px; width: auto; } .sender-status .message_edit_notice { line-height: 18px; } .message_edit_notice { font-size: 10px; opacity: 0.5; line-height: 0px; text-align: right; width: 45px; position: absolute; left: 0px; top: 16px; user-select: none; } .include-sender .message_time { top: -4px; } .message_time { display: block; font-size: 12px; opacity: 0.4; vertical-align: middle; padding: 1px; font-weight: 400; position: absolute; right: -105px; line-height: 20px; text-align: right; transition: background-color 1.5s ease-in, color 1.5s ease-in; } #message-edit-history .message_time { position: static; } /* The way this overrides the menus with a background-color and a high z-index is kinda hacky, and requires some annoying color-matching, but it works. */ .alert-msg { position: absolute; right: -110px; font-size: 14px; color: hsl(170, 48%, 54%); background-color: hsl(0, 0%, 100%); z-index: 999; padding-left: 20px; padding-right: 40px; font-weight: 400; display: none; } .private-message .alert-msg { background-color: hsl(192, 20%, 95%); } .include-sender .alert-msg { top: -3px; } .status-time { top: 8px !important; } .message_controls { display: inline-block; position: absolute; top: 1px; right: -56px; z-index: 1; > div { opacity: 0; pointer-events: none; transition: all 0.2s ease; padding: 0px 1px; } > .reaction_button { display: inline-block; position: relative; color: hsl(0, 0%, 73%); &:hover { color: hsl(200, 100%, 40%); } } &.sender-status-controls { top: 10px; } .message_failed { opacity: 1 !important; display: inline-flex; justify-content: space-between; /* error icon width is 11px, gap between icons equals 28px - 2*11px = 6px */ width: 30px; cursor: pointer; font-weight: bold; color: hsl(0, 100%, 50%); position: relative; .rotating { display: inline-block; animation: rotate 1s infinite linear; } } } .star { display: inline-block; font-size: 14px; &:hover { cursor: pointer; color: hsl(153, 80%, 25%); } &:not(.empty-star) { opacity: 1 !important; pointer-events: all !important; color: hsl(106, 77%, 29%); } } .messagebox:hover .message_controls { .empty-star { opacity: 0.4; } .empty-star:hover { cursor: pointer; opacity: 1; } > div { opacity: 1; pointer-events: all; } } .include-sender .message_controls { top: -3px; } .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; position: relative; z-index: 0; } .message_list .recipient_row { border-bottom: 1px solid hsl(0, 0%, 88%); margin-bottom: 10px; } .floating_recipient .recipient_row { border-top: 1px solid hsl(0, 0%, 88%); } .stream_label { display: inline-block; padding: 4px 6px 3px 6px; font-weight: normal; height: 17px; line-height: 17px; border-top-color: hsla(0, 0%, 0%, 0.0); border-right-color: hsla(0, 0%, 0%, 0.0); border-bottom-color: hsla(0, 0%, 0%, 0.0); background-color: hsl(0, 0%, 88%); border-left-color: hsl(0, 0%, 88%); border-width: 0px; position: relative; text-decoration: none; } .stream_label .invite-stream-icon { font-size: 12px; line-height: 17px; } .message_list .stream_label { margin-left: 0px; } .stream_label:hover { color: inherit !important; text-decoration: none; } .stream_label::after { left: 100%; top: 50%; content: " "; height: 0px; width: 0px; position: absolute; pointer-events: none; margin-top: -11px; border-style: solid; border-width: 11px 0 11px 5px; border-color: inherit; z-index: 2; transform: scale(.9999); } .stream_label::before { left: 100%; top: 50%; content: " "; height: 0px; width: 0px; position: absolute; pointer-events: none; margin-top: -14px; border-style: solid; border-width: 14px 0 14px 6px; border-color: hsla(0, 0%, 0%, 0.0) hsla(0, 0%, 0%, 0.0) hsla(0, 0%, 0%, 0.0) transparent; z-index: 1; transform: scale(.9999); } .stream_topic { display: inline-block; padding: 3px 3px 2px 12px; margin-left: -5px; height: 17px; line-height: 17px; } .recipient_row_date { position: absolute; right: 0; top: 0; color: hsl(0, 0%, 53%); font-size: 12px; font-weight: 600; padding: 3px 11px 2px 10px; height: 17px; line-height: 17px; } .recipient_row_date.hide-date { display: none; } .floating_recipient .recipient_row_date.hide-date { display: block; } .recipient_bar_icon { padding-left: 2px; padding-right: 2px; } .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 hsl(0, 0%, 20%), inset -2px 0px 1px -2px hsl(0, 0%, 20%), inset 0px -2px 1px -2px hsl(0, 0%, 20%); } .summary_row.last_message .summary_colorblock { border-bottom-left-radius: 3px; } .copy-paste-text { /* Hide the text that we want copy paste to capture */ position: absolute; text-indent: -99999px; float: left; width: 0px; } .summary_row_private_message .summary_colorblock { background-color: hsl(0, 0%, 0%); } .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; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes fadeInMessage { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInEditNotice { 0% { transform: translateX(-10px); } 100% { transform: translateX(0px); } } .floating_recipient .message_header_private_message { border-bottom: 0px; border-left: 0px; } .message_header_private_message .message_label_clickable { background-color: hsl(0, 0%, 27%); display: inline-block; padding: 3px 6px 2px 6px; font-weight: normal; font-size: 14px; height: 17px; line-height: 17px; border-left-color: hsl(0, 0%, 27%); } /* Base color backgrounds for messageboxes, private messages, mentions, and unread messages */ .messagebox { position: relative; } .message_header_private_message .message-header-contents { background-color: hsla(192, 19%, 75%, 0.2); box-shadow: inset 1px 1px 0px hsl(0, 0%, 88%); } .private-message .messagebox, .private-message .date_row { background-color: hsla(192, 19%, 75%, 0.2); box-shadow: inset 2px 0px 0px 0px hsl(0, 0%, 27%), -1px 0px 0px 0px hsl(0, 0%, 27%); } .message-header-contents { border-right: 1px solid hsl(0, 0%, 88%); } .mention .messagebox { background-color: hsl(8, 94%, 94%); } .messagebox .message_top_line { position: relative; } .recipient_row .message_row:first-child .unread_marker { top: 0px; } .unread_marker { display: block; position: absolute; left: 2px; top: 0px; opacity: 0; z-index: 1; bottom: 1px; transition: all 0.3s ease-out; } .unread-marker-fill { background-color: hsl(107, 74%, 29%); width: 3px; height: 100%; } .last_message .unread_marker { bottom: 0; } .unread .unread_marker { transition: all 0.3s ease-out; opacity: 1; } .unread_marker.slow_fade { transition: all 2s ease-out; } .unread_marker.fast_fade { transition: all 0.3s ease-out; } .selected_message .messagebox { z-index: 1; } .selected_message .messagebox-content { box-shadow: inset 0px 0px 0px 2px hsl(215, 47%, 50%), -1px -1px 0px 0px hsl(215, 47%, 50%), 1px 1px 0px 0px hsl(215, 47%, 50%), -1px 1px 0px 0px hsl(215, 47%, 50%), 1px -1px 0px 0px hsl(215, 47%, 50%); } .message_sender { height: 0px; vertical-align: top; position: relative; } .sender_name { display: inline-block; font-weight: 700; vertical-align: top; line-height: 12px; font-size: 14px; margin-left: -3px; } .sender-status { display: inline-block; margin: 8px 0px 8px -3px; /* this normalizes the margin of the emoji reactions with normal messages. */ padding-bottom: 5px; vertical-align: middle; line-height: 18px; font-size: 14px; position: relative; max-width: calc(100% - 50px); } .sender_name-in-status { margin-right: 3px; font-weight: 700; } .sender_name_hovered .sender_name, .sender_name_hovered .sender_name-in-status { color: hsl(200, 100%, 40%); } .message_sender i.zulip-icon.bot, .popover_info i.zulip-icon.bot { color: hsl(180, 5%, 74%); vertical-align: top; padding: 0 2px; } .message_sender i.zulip-icon.bot { font-size: 12px; } .popover_info i.zulip-icon.bot { margin-top: 3px; } .actions_hover:hover { color: hsl(200, 100%, 40%); } a.message_label_clickable:hover { cursor: pointer; color: hsl(200, 100%, 40%); } .on_hover_topic_edit { opacity: 0.2; } .always_visible_topic_edit { opacity: .7; } .on_hover_topic_edit:hover, .always_visible_topic_edit:hover { cursor: pointer; opacity: 1.0; } .on_hover_topic_mute { opacity: 0.2; } .on_hover_topic_mute:hover { cursor: pointer; opacity: 1.0; } .edit_content { width: 12px; display: inline-block; position: relative; color: hsl(0, 0%, 73%); } .edit_content:hover { cursor: pointer; color: hsl(200, 100%, 40%); } .has_actions_popover .info { opacity: 1; } /* Brighten text because of the dark background */ .dark_background a, .dark_background a:hover, a.dark_background:hover, .dark_background { color: hsl(0, 0%, 100%) !important; } .dark_background a.message_label_clickable:hover { color: hsl(200, 99%, 60%); } .message_top_line { position: relative; } .include-sender .message_top_line { margin-top: 6px; } .small { font-size: 80%; } .tiny { font-size: 60%; } .actions_hovered .message_time, .actions_hovered .info { color: hsl(200, 100%, 40%); cursor: pointer; } .info { display: inline-block; position: relative; font-size: 15px; color: hsl(0, 0%, 73%); } .actions_hovered .actions_link { text-decoration: underline; } div.message_table { border-collapse: separate; margin-left: auto; display: none; width: 100%; } .message_row { position: relative; border-left: 1px solid hsla(0, 0%, 0%, 0.10); border-right: 1px solid hsla(0, 0%, 0%, 0.10); } .message_row.selected_message { z-index: 2; } div.focused_table { display: block; } .include-sender .message_content:not(:empty) { margin-top: -18px; } .message_content { line-height: 1.214; min-height: 17px; font-size: 14px; margin-left: 46px; display: block; position: relative; overflow: hidden; } .rtl { direction: rtl; } .message_content:empty { display: none; } .message_edit_content { line-height: 18px; resize: vertical !important; max-height: 24em; } .message_edit_countdown_timer { text-align: right; display: inline; color: hsl(0, 0%, 63%); } .message_edit_tooltip { display: inline; color: hsl(0, 0%, 63%); } .message-edit-timer-control-group { float: right; display: none; margin-top: 5px; } .message-edit-feature-group { display: inline-block; margin-left: 10px; margin-bottom: -5px; } .topic_edit { display: none; line-height: 22px; .alert { display: inline-block; margin: 0; padding: 0 10px; line-height: 17px; font-size: 14px; } } #inline_topic_edit, #message_edit_topic { margin-bottom: 5px; } #inline_topic_edit.header-v { height: 18px; display: inline-block; padding: 0px 3px; vertical-align: baseline; line-height: 0px; font-size: 14px; box-shadow: none; } #inline_topic_edit:focus, #message_edit_topic:focus { outline: none; } .message_edit_topic_propagate { display: inline-block; width: 300px; margin-bottom: 5px !important; max-width: 100%; } #message-edit-history .message_author { position: relative; } #message-edit-history .author_details { display: block; font-size: 12px; padding: 1px; text-align: right; } .message_content.condensed { max-height: 8.5em; min-height: 0em; overflow: hidden; } .message_content.collapsed { max-height: 0em; min-height: 0em; overflow: hidden; } .message_length_controller { display: none; text-align: center; color: hsl(200, 100%, 40%); /* to match .message_content */ margin-left: 5px; margin-right: 35px; /* to make message-uncollapse easier */ margin-top: 10px; } .message_length_controller:hover { text-decoration: underline; } /* CSS for the message box */ .messagebox { word-wrap: break-word; cursor: pointer; vertical-align: top; border: none; } .messagebox-content { padding: 4px 115px 1px 10px; } #message-edit-history .messagebox-content { padding: 0px 10px; } .last_message .messagebox-content { padding-bottom: 1px; } .bookend { margin-top: 10px; background-color: transparent; } .next_is_same_sender { border-bottom: 0px; padding-bottom: 0px; } .inline_profile_picture { display: inline-block; width: 35px; height: 35px; margin-right: 11px; vertical-align: top; border-radius: 4px; overflow: hidden; &.guest-avatar::after { outline: 2px solid hsl(0, 0%, 100%); } } .home-error-bar { margin-top: 5px; display: none; } .streamname { font-weight: bold; } .home-error-bar .alert { margin-bottom: auto; } .brand.skinny-user-gravatar { display: table-cell; padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px; white-space: nowrap; } .top-navbar-border { border-right: 1px solid hsl(0, 0%, 88%); border-left: 1px solid hsl(0, 0%, 88%); } .search_icon { color: hsl(0, 0%, 80%); text-decoration: none; &:hover { color: hsl(0, 0%, 0%); } } #tab_bar { width: 100%; z-index: 2; padding-top: 0px; overflow: hidden; text-overflow: ellipsis; float: left; letter-spacing: normal; height: 40px; #tab_list { display: flex; align-content: flex-start; flex-wrap: nowrap; margin: 0px 0px 0px 0px; height: 40px; line-height: 40px; font-size: 16px; border: none; white-space: nowrap; width: calc(100% - 1px); cursor: default; .hidden { display: none; } span { white-space: nowrap; list-style-type: none; display: inline-block; vertical-align: top; position: relative; font-weight: 600; font-size: 16px; line-height: 16px; margin: 0 -4px 0 0; padding: 12px 6px; @media (max-width: 500px) { padding: 7px 3.5px; // based on having ~41.66% decrease } &:not(.search_closed):not(.sub_count):not(.narrow_description) { flex-shrink: 1; overflow: hidden; } &:not(.stream) { text-overflow: ellipsis; } &:nth-last-child(2) { flex-grow: 1; } // We extend the clickable area for the search_closed icon over the // 2nd last navbar element for better design (user convenience) this // selector makes it so mousing over that element also gives the user // a visual cue about the results of clicking the element &:nth-last-child(2) { cursor: pointer; &:hover + .search_closed { color: hsl(0, 0%, 0%); } } i { margin-right: 3px; } .fa { margin: 0px 3px 0px 5px; .fa-envelope { font-size: 14px; margin: 0px 5px 0px 5px; } .fa-hashtag { font-size: 1.2rem; // font-weight: 800; margin: 0px 2px 0px 5px; } } } .stream { text-overflow: clip; overflow: hidden; a { color: inherit; text-decoration: none; padding-right: 2px; } } .sub_count, .narrow_description { background: none; font-size: 14px; color: hsl(0, 0%, 40%); font-weight: 400; line-height: 20px; } .sub_count { margin-left: 10px; margin-right: 10px; .fa.fa-user-o { margin-left: 0px; } &::before { content: ""; position: absolute; left: -5px; top: 25%; width: 1px; height: 50%; background: hsl(0, 0%, 88%); @media (max-width: 500px) { top: 10%; } } &::after { content: ""; position: absolute; right: -5px; top: 25%; width: 1px; height: 50%; background: hsl(0, 0%, 88%); @media (max-width: 500px) { top: 10%; } } } .narrow_description { // the actual value of flex shrink does not matter, it is the // ratio of this value to other flex items that determines the // behavior while shrinking, here the other item has the .stream // class and a flex of 1, so the value here *is* the ratio, and // is chosen such that the narrow description shrinks to close // before the stream name must begin to shrink flex-shrink: 100; overflow: hidden; white-space: nowrap; margin: 0; .emoji { margin: 0; padding: 0; } padding: 12px 0px; padding-left: 2px; @media (max-width: 500px) { padding: 7px 0; padding-left: 2px; } & > a { padding: 12px 0px; } } .search_closed { flex: 0; // makes sure search icon is always visible cursor: pointer; font-size: 20px; padding: 10px 15px 0px 0px; @media (max-width: 500px) { padding: 5px 15px 0px 0px; } } } } #searchbox { display: flex; width: 100%; height: 40px; .navbar-search { margin-top: 0px; width: calc(100% - 66px); float: none; overflow: hidden; height: 100%; } .input-append { height: 100%; align-items: center; display: flex; flex-wrap: nowrap; position: relative; width: calc(100% - 28px); } #search_query { width: 100%; font-size: 16px; height: 40px; padding: 0px; padding-left: 5px; padding-right: 20px; border: none; border-radius: 0px; font-family: 'Source Sans Pro'; font-weight: 300; line-height: 40px; } .search_button, .search_button[disabled]:hover { position: relative; background: none; height: 40px; padding: 4px; color: hsl(0, 0%, 80%); font-size: 18px; box-shadow: none; text-shadow: none; z-index: 5; float: right; } .search_button:hover { color: hsl(0, 0%, 0%); } .search_button[disabled] { visibility: hidden; } .search_icon { display: table; height: 100%; color: hsl(0, 0%, 80%); text-decoration: none; padding: 0 10px; font-size: 20px; z-index: 5; float: left; i { display: table-cell; vertical-align: middle; } } .search_icon:hover { color: hsl(0, 0%, 0%); text-decoration: none; } #search_arrows { font-size: 90%; letter-spacing: normal; border: none; background-color: inherit; } @media (min-width: 500px) { .pill { padding: 2px 0px 2px 0px !important; font-size: 14px; } } @media (max-width: 500px) { #search_arrows .pill { line-height: 20px; .exit { top: 0; } } } } #searchbox_legacy { width: 100%; height: 40px; .navbar-search:not(.expanded) { display: none; } .navbar-search.expanded { overflow: hidden; margin-top: 0px; right: 2; width: calc(100% - 2px); position: absolute; .search_button { display: inline; margin-right: 16px; } } .input-append { position: relative; width: 100%; .fa-search { padding: 0px; font-size: 20px; position: absolute; left: 10px; top: 10px; z-index: 5; } .fa-search:not(.deactivated) { cursor: pointer; } } #search_query { width: 100%; font-size: 16px; height: 40px; padding: 0px; padding-left: 35px; padding-right: 40px; border: none; border-radius: 0px; font-family: 'Source Sans Pro'; font-weight: 300; line-height: 27px; } #search_query:focus { box-shadow: inset 0px 0px 0px 2px hsl(204, 20%, 74%); } .search_button, .search_button[disabled]:hover { position: absolute; right: 2px; top: 6px; background: none; border-radius: 0px; border: none; height: 30px; text-align: center; padding: 4px; color: hsl(0, 0%, 80%); font-size: 18px; box-shadow: none; text-shadow: none; z-index: 5; } .search_button:hover { color: hsl(0, 0%, 0%); } .search_button[disabled] { visibility: hidden; } #search_arrows { /* 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; } } #tab_bar_underpadding { position: absolute; width: 100%; top: 40px; height: 10px; z-index: 99; } #navbar-buttons { white-space: nowrap; margin-left: 15px; margin-top: 7px; display: inline-block; float: right; } #navbar-buttons ul.nav { margin: 0px; } #streamlist-toggle { display: none; position: absolute; top: 0px; left: 0px; text-align: center; vertical-align: middle; // border-right: 2px solid hsl(204, 20%, 74%); } #streamlist-toggle-button { text-decoration: none; color: hsl(0, 0%, 52%); display: block; position: relative; background-color: hsl(0, 0%, 89%); width: 40px; height: 19px; 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-color: hsl(0, 100%, 20%); top: 4px; right: 4px; border: 1px solid hsl(0, 0%, 93%); box-shadow: 0px 0px 1px hsla(0, 0%, 0%, 0.2); border-radius: 12px; padding: 1px 1px 1px 1px; font-size: 9px; z-index: 15; font-weight: normal; color: hsl(0, 0%, 100%); } .nav .dropdown-menu { left: auto; right: 0px; top: 30px; min-width: 180px; box-shadow: 0px 0px 5px hsla(0, 0%, 0%, 0.2); } .nav .dropdown-menu a, .typeahead.dropdown-menu a { color: inherit; } .typeahead.dropdown-menu .active { color: hsl(0, 0%, 100%); } .typeahead.dropdown-menu .unsubscribed_icon { display: none; } .typeahead.dropdown-menu .active .unsubscribed_icon { display: block; float: right; margin-top: 5px; margin-right: -12px; font-size: 0.8em; color: hsl(96, 7%, 73%); } .typeahead-image { display: inline-block; height: 21px; width: 21px; position: relative; margin-top: -7px; vertical-align: middle; top: 2px; right: 8px; border-radius: 4px; /* For FontAwesome icons used in place of images for some users. */ font-size: 19px; text-align: center; } .nav .dropdown-menu::after { position: absolute; width: 0px; height: 0px; top: -7px; right: 10px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid hsl(0, 0%, 67%); border-left: 7px solid transparent; content: ''; z-index: 10; } #navbar-buttons ul.nav { .dropdown-toggle, li.active .dropdown-toggle { font-size: 20px; color: inherit; opacity: 0.5; text-shadow: none; padding-left: 0px !important; background-color: inherit; box-shadow: inherit; display: block; position: absolute; right: 0px; top: 3px; } .dropdown-toggle, li.active .dropdown-toggle:hover { opacity: 1; } li.dropdown.open .dropdown-toggle { background: none; opacity: 1; text-shadow: none; } } nav .column-left { text-align: center; } nav a.no-style:hover { text-decoration: none; cursor: pointer; } nav .column-left .nav-logo { display: inline-block; vertical-align: top; margin-top: 8px; height: 25px; max-width: 200px; } nav .column-left .company-name { display: inline-block; vertical-align: top; text-transform: uppercase; margin-top: 12px; margin-left: 8px; font-size: 1.2rem; font-weight: 600; color: hsl(170, 48%, 54%); letter-spacing: 0.1em; cursor: pointer; } nav a .no-style { text-decoration: none; } .modal-bg { background-color: hsl(0, 0%, 98%); } div.floating_recipient { border-collapse: separate; width: 100%; position: relative; } #floating_recipient_bar { top: 50px; } .message-header-contents { background-color: hsl(0, 0%, 88%); } #bottom_whitespace { display: block; height: 300px; } .loading_indicator_spinner { /* If you change these, make sure to adjust the constants in loading.make_indicator as well */ height: 38px; width: 38px; float: left; } .loading_indicator_text { /* If you change these, make sure to adjust the constants in loading.make_indicator as well */ margin-left: 5px; font-size: 1.2em; font-weight: 300; line-height: 38px; } .settings-section #admin_page_users_loading_indicator, .settings-section #attachments_loading_indicator, .settings-section #admin_page_deactivated_users_loading_indicator, .settings-section #admin_page_bots_loading_indicator { margin: 0 auto; } .settings-section .loading_indicator_text { font-size: 12px; font-weight: 400; vertical-align: middle; line-height: 20px; display: inline-block; float: none; margin-top: 9px; } .settings-section .loading_indicator_spinner { width: 30%; height: 30px; margin-top: 7px; vertical-align: middle; display: inline-block; } .settings-section .realm-icon-section .loading_indicator_text, .settings-section .realm-logo-section .loading_indicator_text { font-size: 14px; font-weight: 400; vertical-align: middle; line-height: 20px; display: inline-block; float: none; margin-top: 0px; margin-left: -12px; } .settings-section .realm-logo-section .loading_indicator_spinner, .settings-section .realm-icon-section .loading_indicator_spinner { width: 10%; height: 16px; margin-top: 2px; vertical-align: middle; display: inline-block; } .settings-section #default_language { text-decoration: none; } .settings-section #default_language_modal table { width: 90%; margin-top: 20px; } .settings-section #default_language_modal td { padding-left: 80px; } .settings-section .inline { display: inline !important; } .operator_value { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: hsl(353, 70%, 65%); } .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: -43px; z-index: 1; border-radius: 6px; } #page_loading_indicator { margin: 10px auto; } #page_loading_indicator_box_container { position: absolute; left: 50%; } #page_loading_indicator_box { position: relative; left: -50%; top: -43px; z-index: 1; border-radius: 6px; } .table-striped thead th { background-color: hsl(0, 0%, 27%); color: hsl(0, 0%, 100%); } #user-checkboxes { margin-top: 10px; } #user-checkboxes .checkbox { display: block; } #user-checkboxes .checkbox input[type=checkbox] { margin: 5px 0px; float: none; } #stream-checkboxes { margin-top: 10px; display: none; } #stream-checkboxes .checkbox { display: block; } #stream-checkboxes .checkbox input[type=checkbox] { margin: 5px 0px; float: none; } #copy-from-stream-expand-collapse { cursor: pointer; } .sub_button_row { text-align: center; } .small_square_button { padding: 0; border: none; font-size: 12px; width: 18px; height: 18px; border-radius: 4px; margin-bottom: 3px; &:focus { outline: none; } &.small_square_check { background-color: hsl(166, 35%, 57%); color: hsl(0, 0%, 95%); &:hover { background-color: hsl(156, 30%, 50%); color: hsl(0, 0%, 100%); } } &.small_square_x { background-color: hsl(0, 0%, 100%); color: hsl(0, 0%, 47%); &:hover { color: hsl(0, 0%, 18%); } } } div.topic_edit_spinner { display: inline-block; width: 18px; height: 18px; margin-top: -1px; padding: 2px; vertical-align: middle; } div.topic_edit_spinner .loading_indicator_spinner { width: 14px; height: 14px; } #do_delete_message_spinner { display: none; width: 0; margin: 0 auto; } .modal { overflow: hidden; margin-top: 0; top: 5%; /* Bootstrap uses tabindex=-1 on modals for focus and ESC handling, so avoid the outline it causes */ outline: 0; } .modal-body { max-height: 60vh; } .modal form { margin-bottom: 0px; } #invite-user .modal-header { padding: 7px 15px; border-color: hsl(0, 0%, 87%); } #invite-user .modal-header .exit { font-size: 1.5rem; font-weight: 600; background-color: transparent; border: none; position: absolute; top: 6px; right: 5px; color: hsl(0, 0%, 67%); } #invitee_emails { min-height: 40px; max-height: 300px; width: 96%; max-width: 96%; } #invite-user .overlay-content { position: relative; width: 500px; border-radius: 4px; } #invite-user .modal-body { margin-bottom: 58px; position: relative; } #invite-user .modal-footer { position: absolute; bottom: 0px; width: calc(100% - 30px); } #invite_status { display: none; } #invite-user-label { font-size: 1em; font-weight: 700; text-align: center; text-transform: uppercase; } #multiuse_invite_status { display: none; margin-top: 7px; margin-bottom: -5px; text-align: left; } #invite-stream-checkboxes { padding-bottom: 26px; } #invite-method-choice { margin-top: 2px; } #multiuse_radio_section { margin-top: 4px; margin-bottom: -2px; display: none; } #generate_multiuse_invite_button { position: relative; top: 1px; } #invite-user .invite-stream-controls { margin-top: 5px; } .settings-dropdown-caret { margin-left: 8px; margin-right: 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; } .empty_feed_notice { padding: 3em 1em; display: none; text-align: center; } .notification { cursor: pointer; } .message-fade, .user_sidebar_entry.user-fade { opacity: 0.4; } .emoji { height: 25px; width: 25px; position: relative; margin-top: -7px; vertical-align: middle; top: 3px; } /* FIXME: Combine this rule with the one in portico.css somehow? */ #pw_strength { width: 100%; height: 10px; 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; } .message_row .date_row { /* We only want padding for the date rows between recipient blocks */ padding-bottom: 0px; } .date_row { padding-left: 2px; } .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 hsl(0, 0%, 88%); border-bottom: 1px solid hsl(0, 0%, 100%); margin: 0px 5px 0px 5px; } .sub-unsub-message span, .date_row span { display: block; padding: 4px; overflow: hidden; text-transform: uppercase; font-size: 0.8em; opacity: 0.5; } .sub-unsub-message span { font-size: 1em; text-transform: none; } .sub-unsub-message span::before, .sub-unsub-message span::after, .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 hsl(0, 0%, 88%); border-bottom: 1px solid hsl(0, 0%, 100%); } .sub-unsub-message span::before, .date_row span::before { right: 0.5em; margin-left: -50%; } .sub-unsub-message span::after, .date_row span::after { left: 0.5em; margin-right: -50%; } .include-sender .message_edit { margin-top: -14px; } .message_edit { display: none; margin-top: 5px; margin-left: 47px; position: relative; } /* Reduce some of the heavy padding from Bootstrap. */ #message_edit_form { margin-bottom: 10px; cursor: default; } #message_edit_form .edit-controls { margin-left: 0px; margin-top: 0px; } #message_edit_form textarea { width: 100%; min-width: 206px; box-sizing: border-box; } #message_edit_form .control-group.no-margin { margin-bottom: 0px; } #message_edit_form .action-buttons { margin: 10px 0px; } #topic_edit_form { display: inline-block; margin: 0 0 0 0; height: 22px; padding-left: 20px; padding-right: 3px; line-height: 22px; margin-left: -15px; } #home { margin-top: 41px; } .screen { position: absolute; left: 0; top: 0; background-color: hsl(0, 0%, 0%); z-index: 20000; } .tutorial-done-button { text-align: right; margin-top: 9px; margin-bottom: 8px; } .btn-skip { position: relative; left: -10px; margin-right: 25px; } .deactivated_user .deactivated-user-icon { color: inherit; margin-left: 2px; font-size: .9em; } .no-drag { user-drag: none; user-select: none; } .user_popover_email { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: all 0.4s ease; .tooltip_holder { display: none; position: absolute; left: 50%; } i { cursor: pointer; } } .email_copied, .user_popover_email i:hover { color: hsl(170, 48%, 54%); } .email_copied i { display: none !important; } .display-tooltip { display: block !important; } .email_tooltip { visibility: hidden; opacity: 0; position: relative; padding: 5px 8px; left: -50%; top: 10px; border-radius: 6px; background-color: hsl(0, 0%, 30%); color: hsl(0, 0%, 100%); transition: visibility 0.2s ease-out, opacity 0.2s linear; ::after { content: ""; position: absolute; top: -47%; left: 50%; margin-left: -5px; border-width: 7px; border-style: solid; border-color: transparent; border-bottom: hsl(0, 0%, 30%) solid 7px; } } .user_popover_email:hover .email_tooltip { visibility: visible; opacity: 1; } .user_popover_email i.hide_copy_icon { display: none; } .hotkey-hint { opacity: 0.75; } // Hide the up and down arrows in the Flatpickr datepicker year .flatpickr-months .numInputWrapper span { display: none; } /* This max-width must be synced with message_viewport.is_narrow */ @media (max-width: 1165px) { .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-color: hsla(0, 0%, 100%, 1.0); box-shadow: 0px -2px 3px 0px hsla(0, 0%, 0%, 0.1); border-left: 1px solid hsl(0, 0%, 87%); margin-top: 40px; padding: 10px 15px 0px 15px; height: 100%; right: 0px; } .header-main .column-right { display: inline-block; width: 30px; } #top_navbar.rightside-userlist #navbar-buttons { margin-right: 41px; } .nav .dropdown-menu { min-width: 180px; box-shadow: 0px 0px 5px hsla(0, 0%, 0%, 0.2); } .nav .dropdown-menu::after { right: 10px; } .column-middle { margin-right: 7px; } .top-navbar-container, #searchbox_legacy .navbar-search.expanded { width: calc(100% - 91px); } .search_closed .fa-search { right: 115px; } #top_navbar:not(.rightside-userlist) { .search_closed .fa-search { right: 72px; } .top-navbar-border, #searchbox_legacy .navbar-search.expanded { width: calc(100% - 50px); } } } @media (max-width: 775px) { body { padding: 0px; } .column-left { display: none; } .column-left.expanded { display: block; position: absolute; float: none; left: 0px; top: 0px; } .column-left.expanded .left-sidebar { background-color: hsla(0, 0%, 100%, 1.0); box-shadow: 0px 2px 3px 0px hsla(0, 0%, 0%, 0.1); border-right: 1px solid hsl(0, 0%, 87%); margin-top: 40px; padding-top: 10px; height: 100%; padding-left: 10px; width: 250px; } body, html, .app-main, .header-main { min-width: 350px; } .column-middle, .app-main .column-middle { margin-left: 7px; margin-right: 7px; } .header-main .column-middle { margin-left: 0px; } .column-middle-inner { margin-left: 0px; margin-right: 15px; } .app-main .column-middle .column-middle-inner { margin-right: 0px; } .skinny-user-gravatar { position: absolute; top: 0px; } #streamlist-toggle { display: block; } .top-navbar-border { margin-left: 40px; } .top-navbar-border { width: calc(100% - 116px); } // todo: Figure out why this has to be different // from above at this width and resolve it // #searchbox_legacy .navbar-search.expanded, #searchbox_legacy .navbar-search.expanded { width: calc(100% - 131px); } .search_closed .fa-search { right: 115px; } #top_navbar:not(.rightside-userlist) { // .search_closed .fa-search { // right: 115px; // } .top-navbar-border { width: calc(100% - 75px); } #searchbox_legacy .navbar-search.expanded { width: calc(100% - 90px); } } } @media (max-width: 500px) { .column-right.expanded .right-sidebar, .column-left.expanded .left-sidebar { margin-top: 31px; } .column-left.expanded .left-sidebar { padding: 0px; } .column-left.expanded .left-sidebar #streams_header { padding-right: 10px; } .column-left.expanded .narrows_panel { margin-top: 10px; } .search_closed .fa-search { top: 5px; } #streamlist-toggle, #navbar-buttons, .navbar-search, #tab_bar, #searchbox, #searchbox_legacy, #tab_list li, #tab_list, .header { height: 30px; line-height: 30px; } #search_query { height: 30px !important; vertical-align: text-bottom; } #streamlist-toggle-button { height: 30px; padding-top: 0px; padding-bottom: 0px; } #navbar-buttons ul.nav .dropdown-toggle, #navbar-buttons ul.nav li.active .dropdown-toggle { top: -5px; } #searchbox, #searchbox_legacy { .input-append .fa-search { top: 5px; } .search_button, .search_button[disabled]:hover { top: 0px; } } #tab_bar_underpadding { top: 30px; } .messagebox-content { padding-right: 15px; } .message_time { right: auto; left: -3px; } .message_controls { width: 56px; right: -10px; top: 0px; } .include-sender .message_controls { background: none !important; padding: none !important; border: none !important; top: -3px; } .message_time { left: auto; right: -5px; } .message_controls { right: 40px; } .sender_name { max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 15px; } #tab_bar_underpadding { height: 10px; } #floating_recipient_bar { top: 40px; } .message_content { padding-right: 50px; } } @media (max-width: 350px) { html { overflow-x: hidden; } body, html, .app-main, .header-main { min-width: 320px; } } @media only screen and (min-width: 300px) and (max-width: 700px) { #feedback_container { width: calc(90% - 30px); left: 5%; top: 5%; } }