slack_night_mode.scss

$dark_bg: #272a2e;
$dark_bg_2: #373b41;
$dark_bg_3: #272a2e;
$light_bg: #a3685a;
$light_bg_2: lighten($dark_bg, 10%);
$light_fg: #e0e0e0;
$light_fg_2: #f0c674;
$dark_fg: #b4b7b4;
$border_1: #373b41;
$border_2: #b4b7b4;
$light_border_2: #b5bd68;
$dark_fg_2: #b295bb;
$light_border_1: #969896;
$dark_button: rgba(55, 59, 65, 0.4);
$edit_bg: #81a2be;
$light_bg_3: #a3685a;
$delete_bg: #cc6666;
$dark_bg_4: $dark_bg;
$dark_bg_5: $dark_bg_2;
$dark_fade: rgba(77, 57, 75, 0);

/* ===[ General ]=== */

body {
    background: $dark_bg;
    color: $light_fg; }

a, a:link, a:visited {
    color: $dark_fg }

a:hover, a:active, a:focus {
    color: $light_fg_2 }

hr {
    border-top: 1px solid $border_1;
    border-bottom: 1px solid $light_border_1; }

h1, h2, h3, h4 {
    color: $light_fg }

input[type="text"]:focus, input[type="text"]:active, input[type="number"]:focus, input[type="number"]:active, input[type="email"]:focus, input[type="email"]:active, input[type="password"]:focus, input[type="password"]:active, textarea:focus, textarea:active, select:focus, select:active {
    box-shadow: 0 0 7px rgba(0,0,0,0.15);
    border-color: $dark_bg_2; }

/* ===[ Slack Status ]=== */

.section {
    background: #f3f3f3;
    color: #555459; }

.section.large_top_margin {
    margin-top: 0!important; }

.section .current_incident {
    margin-bottom: 2rem!important; }

.section a, .section a:link, .section a:visited {
    color: #2a80b9; }

.section a:hover, .section a:active, .section a:focus {
    color: #439fe0; }

.section .cloud_silver {
    color: #babbbf !important; }

.section .indifferent_grey {
    color: #555459 !important; }

.section h1, .section h2, .section h3, .section h4 {
    color: #555459; }

.section hr {
    border: 1px solid #DDD; }

.section #footer {
    background: none; }

/* ===[ Loading View ]=== */

.loading #loading-zone {
    background: $dark_bg;
    left: 110px; }

.loading #col_channels_bg {
    background: $dark_bg }

#self_help_link_div {
    right: 110px!important }

#loading_indicator, #loading_welcome_msg {
    color: $light_fg_2;
    text-shadow: 0 1px $dark_bg_2; }

#loading_team_menu_bg, #loading_user_menu_bg {
    border: none }

/* ===[ Messages Container ]=== */

.msgs_holder, #msgs_overlay_div {
    background: $dark_bg }

.light_theme .message_sender, .dense_theme .file_reference:hover a.file_download_link {
    color: $dark_fg!important }

#messages_unread_status, .file_reference .icon, .file_list_item .icon {
    background: $light_bg;
    color: #FFF; }

#messages_unread_status.quiet, .msgs_holder .unread_divider span.divider_label {
    background: $light_bg;
    color: $light_fg; }

.msgs_holder .unread_divider hr {
    border-top: 1px solid $light_bg!important }

.message .msg_actions .fa-cog, .bullet, .file_list_item .bullet {
    color: $dark_fg_2 }

.day_divider hr {
    border-top: 1px solid $border_1;
    border-bottom: 1px solid $light_border_1; }

.day_divider_label {
    background: $dark_bg;
    color: $light_border_2; }

#message_edit_form span, #message_edit_form p, #message_edit_container .timestamp {
    color: $dark_bg!important }

#message_edit_form #cancel_edit, #message_edit_form #commit_edit {
    color: $dark_bg!important;
    text-decoration: underline; }

#welcome_slide_app_icons a {
    color: $light_fg;
    border: 1px solid $light_border_1; }

#welcome_slide_app_icons a:hover {
    color: $light_fg;
    background: $light_bg;
    border-color: $border_1 }

.dense_theme .message .message_star_holder {
    position: absolute;
    left: -12px;
    top: 2px; }

.dense_theme .file_reference:hover a.file_download_link:hover, .inline_attachment a span:hover, .inline_attachment a span:active, .msg_inline_video_buttons_div a, .msg_inline_video_buttons_div a:visited, .inline_attachment .attachment_footer a:hover, .inline_attachment .attachment_footer a:active, .inline_attachment .attachment_ts a:hover, .inline_attachment .attachment_ts a:active, .dense_theme .file_reference:hover a:hover:not(.member):not(.member_name):not(.icon):not(.timestamp) {
    color: $light_fg_2!important }

.light_theme .msg_inline_img_holder, .light_theme .msg_inline_video_holder, .dense_theme .msg_inline_img, .dense_theme .msg_inline_video {
    border: 2px solid $dark_bg_2 }

.inline_attachment .attachment_bar, .special_formatting_quote .quote_bar {
    background: $dark_fg!important }

.msg_inline_video_buttons_div {
    background: dark_button }

.light_theme .message, .dense_theme .message, #messages_unread_status.quiet a, .delete_attachment_link, .bot_message .message_sender, .bot_message .message_sender a, .msg_inline_img_expander:hover, .msg_inline_img_collapser:hover, .msg_inline_video_expander:hover, .msg_inline_video_collapser:hover, .msg_inline_audio_expander:hover, .msg_inline_audio_collapser:hover, .msg_inline_attachment_expander:hover, .msg_inline_attachment_collapser:hover, a.file_download_link:hover, #msgs_scroller_div #end_display_div #end_display_welcome h1, #msgs_scroller_div #end_display_div #end_display_meta h1, .snippet_preview pre, #msgs_scroller_div #end_display_div p, a:hover .file_inline_icon {
    color: $light_fg }

.light_theme .message.joined .message_content, .light_theme .message.left .message_content, .light_theme .message.topic .message_content, .light_theme .message.purpose .message_content, .light_theme .message.rename .message_content, .light_theme .message.archived .message_content, .light_theme .message.unarchived .message_content, .dense_theme .message.joined, .dense_theme .message.left, .dense_theme .message.topic, .dense_theme .message.purpose, .dense_theme .message.rename, .dense_theme .message.archived, .dense_theme .message.unarchived, .star, .light_theme .message .timestamp, .dense_theme .message .timestamp, .message .edited, .light_theme .message .meta, .dense_theme .message .meta, .dense_theme .message.first .timestamp, .light_theme .message.unprocessed, .dense_theme .message.unprocessed, .light_theme .message:hover .timestamp, .dense_theme .message:hover .timestamp, .dense_theme .file_reference a:not(.member):not(.member_name):not(.icon):not(.timestamp), .dense_theme .file_reference:hover a:not(.member):not(.member_name):not(.icon):not(.timestamp), a.member_preview_link.member_name, .inline_attachment span.attachment_author_subname, .inline_attachment span.attachment_service_name, .inline_attachment span.attachment_author_name, .inline_attachment .attachment_ts a, .inline_attachment .attachment_footer a, .help i.callout, .file_inline_icon {
    color: $dark_fg }

.dense_theme .message.divider, .dense_theme .message.first, .dense_theme .message.first.divider {
    margin-top: .2rem;
    border-top: 1px solid transparent; }

.message .msg_actions, .day_divider {
    background: none }

.delete_attachment_link:hover, .msg_inline_img_expander, .msg_inline_img_collapser, .msg_inline_video_expander, .msg_inline_video_collapser, .msg_inline_audio_expander, .msg_inline_audio_collapser, .msg_inline_attachment_expander, .msg_inline_attachment_collapser {
    color: $light_fg_2 }

.message.edit_mode, .message .mention {
    background: $edit_bg }

/* ===[ Channel Menu ]=== */

#header .client_header_button {
    background: $light_bg_2;
    border: 1px solid $dark_bg; }

#header .client_header_button:hover {
    background: $dark_bg;
    color: $light_fg_2;
    border: 1px solid $dark_bg; }

.client_header_icon {
    background: none }

.client_header_icon:before {
    color: $light_fg_2;
    font-family: FontAwesome; }

.client_header_icon.icon_help:before {
    display: inline-block;
    content: "\f129"; }

#help_icon #help_icon_info {
    left: 4px;
    top: 6px; }

.client_header_icon.icon_menu:before {
    content: "\f141" }

#flex_menu .icon_menu {
    left: 6px;
    top: 7px; }

#flex_toggle .icon_flex_pane:before {
    content: "\f104";
    font-size: 18px; }

.flex_pane_showing #flex_toggle .icon_flex_pane:before {
    content: "\f105";
    font-size: 18px; }

#flex_toggle .icon_flex_pane {
    left: 9px }

.flex_pane_showing #flex_toggle .icon_flex_pane {
    left: 11px }

#active_channel_name:hover i {
    color: $light_fg }

#channel_members_toggle {
    background: $dark_bg_3;
    color: $light_fg; }

#channel_members {
    border: 1px solid $dark_bg_3 }

#header, ul.member_list li:hover {
    background: $dark_bg_3 }

#active_channel_name .name, #active_channel_name .topic, #active_channel_name .prefix {
    color: $light_border_2 }

#active_channel_name:hover .prefix, #channel_header .star, #flex_menu .fa-list-ul, #active_channel_name i, #channel_members_toggle:hover {
    color: $light_fg_2 }

/* ===[ Search ]=== */

#header_search_form .search_input, #autocomplete_menu .tips_header .new_badge {
    background: $light_bg_2;
    border: 1px solid $dark_bg;
    color: $light_fg_2; }

#search_results_items .search_paging, #paging_in_options .search_paging, #autocomplete_menu, #autocomplete_menu .keyword_match .modifier, .search_form .icon_search, .search_message_result .search_message_result_meta a, .search_message_result .search_message_result_meta .date_links a {
    color: $light_fg_2 }

.search_form .icon_search:before {
    content: "\f002" }

#header_search_form.search_form.feature_assistive_search .icon_search {
    top: 6px }

.search_form .icon_close:before {
    content: "\f00d" }

.popover_menu, #menu.popover_menu {
    background-color: $dark_bg_3;
    border-top: 1px solid $dark_bg_2; }

.popover_menu .arrow_shadow:after {
    box-shadow: 0 0 0 1px $dark_bg_2, 0 0 2px rgba(0,0,0,0.1) }

.popover_menu .arrow:after, .popover_menu .arrow_shadow:after, .popover_menu.showing_header .arrow:after, .popover_menu.showing_header .arrow_shadow:after {
    background-color: $dark_bg_2 }

.highlighter_underlay .modifier:before, .highlighter_underlay .keyword:before {
    background: $light_bg_2;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,$light_bg_2),color-stop(1,$light_bg));
    background: -ms-linear-gradient(bottom,$light_bg_2,$light_bg);
    background: -moz-linear-gradient(center bottom,$light_bg_2 0,$light_bg 100%);
    background: -o-linear-gradient($light_bg,$light_bg_2);
    border: 1px solid $dark_bg_2; }

.highlighter_underlay .modifier.incomplete:before {
    background: $border_1;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,$border_1),color-stop(1,$dark_bg_3));
    background: -ms-linear-gradient(bottom,$border_1,$dark_bg_3);
    background: -moz-linear-gradient(center bottom,$border_1 0,$dark_bg_3 100%);
    background: -o-linear-gradient($dark_bg_3,$border_1);
    border: 1px solid $dark_bg_2; }

#autocomplete_menu footer .modifier:before, #autocomplete_menu header .modifier:before, #autocomplete_menu footer .keyword:before, #autocomplete_menu header .keyword:before, #autocomplete_menu .history .modifier:before, #autocomplete_menu .history .keyword:before {
    background: $dark_bg_3;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,$dark_bg_3),color-stop(1,$light_bg_2));
    background: -ms-linear-gradient(bottom,$dark_bg_3,$light_bg_2);
    background: -moz-linear-gradient(center bottom,$dark_bg_3 0,$light_bg_2 100%);
    background: -o-linear-gradient($light_bg_2,$dark_bg_3);
    border: 1px solid $dark_bg_2; }

.highlighter_underlay .keyword:before, #autocomplete_menu .history .keyword:before {
    border-left: 0 }

#autocomplete_menu .history .modifier:after {
    border-right: 0 }

#autocomplete_menu .boxed {
    background: $light_bg_2;
    background-image: -o-linear-gradient(-89deg,$dark_bg_3 0,$light_bg_2 100%);
    background-image: -moz-linear-gradient(-89deg,$dark_bg_3 0,$light_bg_2 100%);
    background-image: -ms-linear-gradient(-89deg,$dark_bg_3 0,$light_bg_2 100%);
    background-image: linear-gradient(-179deg,$dark_bg_3 0,$light_bg_2 100%);
    border: 1px solid $dark_bg_2;
    -webkit-box-shadow: 0 1px 0 0 $dark_bg_2;
    -moz-box-shadow: 0 1px 0 0 $dark_bg_2;
    box-shadow: 0 1px 0 0 $dark_bg_2; }

#autocomplete_menu .magnifying_glass {
    display: none!important }

#autocomplete_menu .section_header .header_label {
    background: $border_1;
    color: $light_fg;
    padding-left: .8rem; }

.search_result_with_extract {
    background: $dark_bg_3;
    box-shadow: 0 1px 10px $dark_bg;
    border: 1px solid $dark_bg_2; }

.search_result_with_extract:hover {
    border: 1px solid $dark_bg }

#autocomplete_menu header, #autocomplete_menu ol li:hover {
    background-color: $dark_bg_3 }

#autocomplete_menu .monkey_scroll_wrapper {
    background-color: $dark_bg_2 }

.search_result_for_context::after {
    background: $dark_bg_3;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, $dark_bg_3),color-stop(1,dark_fade));
    background: -ms-linear-gradient(bottom,$dark_bg_3,dark_fade);
    background: -moz-linear-gradient(center bottom,$dark_bg_3 0,dark_fade 100%);
    background: -o-linear-gradient(dark_fade,$dark_bg_3); }

#search_tabs, #search_filters a, #advanced_options_toggle, #search_options, #advanced_options {
    background: $dark_bg_3;
    color: $light_fg; }

#search_filters a:hover {
    border-bottom: 4px solid $dark_bg }

#search_filters.messages #filter_messages, #search_filters.files #filter_files {
    color: $light_fg;
    border-bottom: 4px solid $dark_bg; }

.search_light_grey {
    color: $light_fg_2!important }

.search_message_result {
    background: $dark_bg;
    color: $light_fg;
    border: none; }

.search_message_result:hover {
    border: none }

.search_message_result.feature_search_extracts, .search_message_result:hover.feature_search_extracts {
    border-top: 2px solid $dark_bg_2 }

span.match {
    background: $edit_bg }

#search_filters, #search_options {
    border-bottom: 1px solid $dark_bg }

/* ===[ Sidebar ]=== */

#team_menu {
    color: $light_border_2;
    border-bottom: none;
    border-right: 2px solid $dark_bg_2; }

#col_channels {
    background: $dark_bg;
    border-right: 2px solid $dark_bg_2; }

#user_menu {
    border-right: 2px solid $dark_bg_2 }

#menu_header .menu_simple_header {
    background: $dark_bg_3;
    border-bottom: 1px solid $dark_bg; }

.dm_list_real_name {
    color: $light_fg }

#menu_footer .menu_footer {
    background: $dark_bg_3;
    border-top: none; }

#about_dms_link {
    color: $dark_fg }

#team_menu i, #user_menu i, .dm_list_username {
    color: $light_border_2 }

#team_menu:hover i, #user_menu:hover i, #about_dms_link:hover {
    color: $light_fg_2 }

/* ===[ Footer ]=== */

#footer {
    background: $dark_bg }

#primary_file_button {
    background: $dark_bg_3;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,$dark_bg_3),color-stop(1,$light_bg_2));
    background: -ms-linear-gradient(bottom,$dark_bg_3,$light_bg_2);
    background: -moz-linear-gradient(center bottom,$dark_bg_3 0,$light_bg_2 100%);
    background: -o-linear-gradient($light_bg_2,$dark_bg_3);
    color: $light_fg_2;
    text-shadow: 0 1px 1px $dark_bg_2;
    border: 2px solid $dark_bg_2;
    border-right: none; }

#primary_file_button:hover {
    background: $light_bg_2;
    color: $light_fg;
    border-color: $light_bg_2; }

#typing_text, #special_formatting_text {
    color: $dark_fg }

#chat_input_tab_ui {
    background: $light_bg_2;
    border: 1px solid $dark_bg_2; }

#chat_input_tab_ui_header {
    background: $light_bg_2;
    color: $light_fg;
    border-bottom: 1px solid $dark_bg_2;
    text-shadow: 0 1px $dark_bg_2; }

#chat_input_tab_ui ul.type_emoji li {
    color: $light_fg }

#chat_input_tab_ui li.chat_input_tab_item.active, #chat_input_tab_ui li.chat_input_tab_item:hover {
    background: $dark_bg_3;
    color: $light_fg;
    border-bottom-color: $dark_bg_2;
    text-shadow: 0 1px rgba(0,0,0,0.1); }

#chat_input_tab_ui li.chat_input_tab_item, .tab_complete_ui li.tab_complete_ui_item.active, .tab_complete_ui li.tab_complete_ui_item:hover {
    border-bottom: 1px solid $dark_bg_2 }

.tab_complete_ui li.tab_complete_ui_item {
    border-bottom: 1px solid $light_bg_2 }

.special_formatting_tips code {
    color: $dark_bg_2 }

/* ===[ Flexpane ]=== */

#flex_toggle i {
    transform: scaleX(-1);
    margin: 5px; }

.flex_pane_showing #flex_toggle i {
    transform: none;
    margin: 5px 7px; }

#flex_contents .heading {
    background: $dark_bg_3 }

#flex_contents .heading .menu_heading, .toolbar {
    background: $dark_bg_3;
    color: $light_border_2; }

#flex_contents .heading a {
    color: $light_border_2 }

#flex_contents .heading .menu_heading:hover, #flex_contents .heading a:hover, #file_preview_container .file_header .title a:hover, #advanced_options_toggle:hover, .team_list_item a:hover, .file_list_item:hover .title a, .file_list_item:active .title a, .file_list_item.active .title a, .file_list_item #share_dialog .title a, .no_results, #menu.search_filter_menu label, .search_sort_prefix, .file_list_item .actions a, .file_list_item .actions span {
    color: $light_fg_2 }

.secondary_file_button {
    color: $light_border_2!important }

.monkey_scroll_wrapper, #dms_filter, #file_member_filter {
    background: $dark_bg }

.indifferent_grey, .icon_new_window:hover {
    color: $light_fg!important }

.file_header .member, .cloud_silver, .file_meta, .file_meta > a, .activity_item .member_preview_link, .comment .member, .team_list_item {
    color: $dark_fg!important }

.file_list_item:hover, .file_list_item:active, .file_list_item.active, .file_list_item #share_dialog, #share_dialog .file_list_item, #client-ui #team_list.feature_new_team_directory .team_list_item.expanded, #client-ui #team_list.feature_new_team_directory .team_list_item:hover {
    background-color: $dark_bg_3;
    border-color: $dark_bg_2; }

.file_list_item:hover .actions, .file_list_item:active .actions, .file_list_item.active .actions, .file_list_item #share_dialog .actions {
    background-color: $dark_bg_3 }

.filetype_button {
    color: $dark_fg!important;
    background-color: $dark_bg_3;
    border-color: $dark_bg_2; }
 
.filetype_button:hover {
    background-color: $dark_bg_3; }

.filetype_button .file_download_label {
    color: $light_fg;
    background-color: $light_bg_3;
    border-color: $dark_bg_2; }
 
.filetype_button:hover .file_download_label {
    background-color: $light_bg_3; }

.search_segmented_control, #team_list.feature_new_team_directory a.member_action_button:hover {
    color: $dark_fg!important;
    border-color: $dark_bg_2!important; }

.search_segmented_control.active, .search_segmented_control:hover {
    color: $light_fg!important }

.file_list_item:hover .actions a, .file_list_item:active .actions a, .file_list_item.active .actions a, .file_list_item #share_dialog .actions a, .file_list_item:hover .actions span, .file_list_item:active .actions span, .file_list_item.active .actions span, .file_list_item #share_dialog .actions span, .search_segmented_control.active {
    background-color: $dark_bg;
    border-color: $dark_bg_2; }

#advanced_options p {
    border-top: 1px solid $dark_bg_2 }

a.snippet_preview_more {
    color: #000!important }

.extract_expand_icons .down_arrow {
    top: 8px; }

.CodeMirror-lines {
    background: #FFF }

#flex_contents .help {
    border: none;
    color: $light_fg; }

#flex_contents .heading .menu_icon {
    background: none;
    color: $light_fg_2; }

#menu ul li a.delete_link {
    color: $delete_bg }

.nav > li > a:hover, .nav > li > a:focus {
    background-color: $dark_bg }

.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
    background: $dark_bg;
    border: 1px solid $dark_bg_2; }

.secondary_file_button:hover, .activity_item .member_preview_link:hover, .icon_new_window, .sky_blue {
    color: $light_fg_2!important }

.toolbar, #file_preview_container .heading, #member_preview_container .heading, #team_list_container .heading, .team_list_item, #activity_tab_activity .heading, #stars_tab .heading, #mentions_tab .heading, .nav-tabs {
    border-bottom: 1px solid $dark_bg_2 }

.file_list_item, .file_list_item.post .preview, #file_preview_container .file_header .title a, #search_results_container .heading, #team_list_container .heading, #activity_tab_activity .heading, #stars_tab .heading, #mentions_tab .heading, #file_preview_container .post_body, .search_result_with_extract:hover .extract_expand_icons, .comment_body, .comment .special_formatting_quote .content, #flex_contents .heading .menu_icon:hover, #advanced_options .active .arrow_down, #team_list.feature_new_team_directory a:not(.member_name) {
    color: $light_fg }

.file_list_item .title a, .file_page_meta, .mini, label, .team_list_item:hover a, .extract_expand_icons, .file_list_item a.member, .file_list_item .actions a:hover, #team_list.feature_new_team_directory a:not(.member_name):hover {
    color: $dark_fg }

.file_list_item .actions .star:hover, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus, #team_list.feature_new_team_directory .team_list_item {
    border-color: $dark_bg_2 }

body:not(.widescreen) #team_list.feature_new_team_directory .team_directory_icon.more_icon, body:not(.widescreen) #team_list.feature_new_team_directory .team_directory_icon.message_icon {
    display: none;
    width: 0 }

/* ===[ Tips ]=== */

#tip_card_interior {
    color: $light_fg }

#tip_card_footer p {
    color: $light_fg_2 }

#tip_card_footer #tip_card_logo {
    background: none }

#tip_card_callout:after {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    margin-top: -15px;
    border-color: rgba(77,57,75,0) $dark_bg_3 rgba(77,57,75,0) rgba(77,57,75,0);
    border-width: 15px; }

#tip_card.about_channels_tip_card_div #tip_card_callout, #tip_card.about_dms_tip_card_div #tip_card_callout, #tip_card.about_groups_tip_card_div #tip_card_callout {
    left: 0 }

#tip_card, #tip_card_callout {
    background: $dark_bg_3 }

/* ===[ Menus ]=== */

#menu ul, .menu_example ul, ul.dropdown-menu {
    background: $dark_bg_3 }

#menu, .menu_example {
    border: 1px solid $dark_bg_2 }

#menu ul li a, .menu_example ul li a, ul.dropdown-menu li a {
    background: $dark_bg_3;
    color: $light_fg_2;
    border-bottom: 1px solid $dark_bg_2; }

#menu ul li.highlighted a, .menu_example ul li.highlighted a, #menu ul li.file_menu_item.highlighted a, #menu .flexpane_menu_item.highlighted a, .dropdown-menu > li > a:hover {
    background: $dark_bg;
    color: #FFF;
    border-bottom: 1px solid $dark_bg_2;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2); }

#flex_menu_header, #flex_menu_footer {
    background: $dark_bg_3!important }

#menu .flexpane_menu_item a, .menu_meta {
    color: $light_fg }

#flex_menu_callout {
    background: none }

#menu ul li.divider, ul.dropdown-menu li.divider, #menu ul li.double-divider {
    display: none }

/* ===[ Inputs ]=== */

.btn, .btn:active, .btn.active {
    color: $light_fg!important }

.btn-primary, .btn, .btn:active, .btn.active {
    background: $light_bg_2 }

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn:hover, .btn.hover, .btn:focus {
    background: $dark_bg_3 }

.btn-outline {
    background: $light_bg_2!important;
    color: $light_fg_2!important;
    border: 2px solid $dark_bg; }

.btn-group > .btn-outline {
    border-width: 2px }

.btn-group .btn:hover:not(.active), .btn-group .btn:active:not(.active) {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.25); }

.btn-group > .btn-outline + .btn-outline:hover, .btn-group > .btn-outline + .btn-outline:active, .btn-group > .btn-outline + .btn-outline.active {
    margin-left: -1px }

#message-input, textarea, textarea:focus, input, select, .member_filter, #menu input, .uneditable-input {
    background: $dark_bg_3!important;
    color: $light_fg!important;
    border: 2px solid $dark_bg_2!important; }

#message-input.offline {
    color: $dark_bg_3!important }

textarea:focus, textarea:active, input:focus, input:acive, .uneditable-input:focus {
    border: 2px solid $light_bg_2!important }

input[type="file"] {
    color: $dark_fg!important }

input[disabled] {
    background-color: $dark_bg_2!important;
    border-color: $dark_bg_2!important; }

.btn-outline.active, .btn-outline:hover, .btn-outline.hover {
    background: $dark_bg!important;
    color: $light_fg_2!important;
    border: 2px solid $dark_bg; }

/* ===[ Scrollbar ]=== */

#client-ui .monkey_scroll_bar {
    background: $dark_bg_3 }

#client-ui .monkey_scroll_handle_inner {
    background: $dark_bg_2;
    border: 3px solid $dark_bg; }

/* ===[ Modals ]=== */

.modal_input_note, .input_note {
    color: $dark_fg }

#new_prefs_dialog .modal-header {
    border-bottom: 1px solid $dark_bg }

#new_prefs_dialog .modal-nav {
    background: $light_bg_2;
    border-right: 1px solid $dark_bg; }

#new_prefs_dialog .modal-nav a {
    background: $light_bg_2;
    color: $light_fg;
    text-shadow: 0 1px 0 #000; }

#new_prefs_dialog .modal-nav a.active {
    background: $dark_bg_3;
    color: $light_fg;
    text-shadow: 0 1px 0 rgba(255,255,255,0.1); }

.chzn-container-multi .chzn-choices {
    background: $dark_bg_3;
    color: $light_fg!important;
    border: 2px solid $dark_bg_2; }

.chzn-container-active .chzn-choices .search-field input {
    color: $light_fg!important }

.chzn-container .chzn-drop, .chzn-container .chzn-results .no-results {
    background: $light_bg_2;
    border: none; }

.chzn-container .chzn-results .highlighted {
    background-color: $dark_bg_3 }

#list_browser p.highlighted, #lightbox_dialog.modal .lightbox_meta:hover {
    background: $dark_bg }

#list_controls {
    color: $light_fg;
    border-bottom: 1px solid $dark_bg; }

#list_search_container .icon_search, #list_browser .item_creator, #list_browser .item_purpose, #list_browser_dialog .modal-footer a {
    color: $light_fg_2 }

.modal .monkey_scroll_wrapper {
    background: none }

.modal-header .close {
    margin-top: 5px }

.modal, .modal-header, .modal-footer, #new_prefs_dialog .modal-nav a:hover {
    background: $dark_bg_3;
    color: $light_fg; }

.modal label, .chzn-container .chzn-results .group-result, .modal .close, #list_browser_dialog .modal-footer a:hover {
    color: $light_fg }

/* ===[ Emojis ]=== */

#emoji_menu, #emoji_menu_header, #emoji_menu_footer, #emoji_menu_footer div {
    background: $dark_bg_3;
    color: $light_fg; }

#emoji_menu_footer {
    border-top: 1px solid $dark_bg }

#emoji_menu_items_scroller, .emoji_grouping_tab.active, .emoji_grouping_tab:hover, #monkey_scroll_wrapper_for_emoji_menu_items_scroller, .tab_complete_ui li.tab_complete_ui_item.active, .tab_complete_ui li.tab_complete_ui_item:hover {
    background: $light_bg_2 }

#emoji_menu li.emoticon_item a:hover  {
    background: $dark_bg_3 }

#emoji_menu_footer div, div#emoji_tip {
    color: $light_fg }

/* ===[ Website ]=== */

.widescreen header #header_team_name a i {
    margin-left: 1.5em }

.widescreen #user_menu {
    border-right: none }

header .vert_divider {
    border-left: 1px solid $dark_bg_2 }

table.mini td, table.mini th {
    border-bottom: 1px solid $dark_bg }

.icon.thumb_80 img, .icon.thumb_40 img, .icon.square img {
    border-radius: 0 }

.file_reference .icon, .file_list_item .icon, .file_preview {
    border: 2px solid $dark_bg_2 }

.btn.btn_outline.btn_warning, .btn.btn_outline.btn_danger, .no_touch .btn.btn_outline.btn_danger:hover {
    background: $dark_bg_2 }

.card, .tab_pane, .tab_set a.selected, .tab_set a.secondary.selected, .feature_new_team_sites #all_time, .feature_new_team_sites #third_row.column, .feature_new_team_sites #second_row.column {
    background: $dark_bg_3;
    border: 1px solid $dark_bg_2;
    color: $light_fg; }

header #header_team_nav {
    background: $dark_bg_3;
    border: 1px solid $dark_bg_2; }

html.no_touch .plastic_row:hover {
    background: $dark_bg;
    border: 1px solid $dark_bg_2;
    border-color: $dark_bg_2; }

.tab_actions {
    background: $dark_bg_3;
    border: 1px solid $dark_bg_2;
    border-color: $dark_bg_2; }

.btn_outline {
    border: 1px solid $dark_bg_2 }

.btn_outline:active {
    border-bottom: 1px solid $dark_bg!important }

.admin_list_item.expanded .btn-outline {
    color: $light_fg!important;
    border: 1px solid $dark_bg_2; }

.no_touch .btn_outline:hover, .no_touch .btn_outline.hover, .admin_list_item.expanded .btn-outline:hover {
    color: $light_fg!important;
    background: $dark_bg;
    border: 1px solid $dark_bg_3; }

.message.highlight {
    background: $edit_bg }

#page pre {
    color: #000 }

.pagination ul > li > a, .pagination ul > li > span {
    color: $light_fg;
    background: $dark_bg;
    border: 1px solid $dark_bg_2; }

.pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span, html.no_touch .pagination ul > li > a:hover {
    background-color: $dark_bg_2 }

html.no_touch .pagination ul > .disabled > a:hover, .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:focus {
    color: $dark_fg;
    background: $dark_bg_3; }

.top_border, header #header_team_nav #add_team_option {
    border-top: 1px solid $dark_bg_2 }

.admin_list_item {
    color: $light_fg;
    border-bottom: 1px solid $dark_bg_2; }

.inactive, #page_contents .invite_form_column {
    background-image: none }

.admin_list_item.inactive {
    background: $dark_bg_2 }

.admin_list_item .inline_name:hover, .admin_list_item .inline_email:hover, .admin_list_item .inline_username:hover {
    color: $light_border_2;
    background: none!important;
    text-decoration: underline; }

.admin_list_item.expanded, .admin_list_item.success, .admin_list_item.processing, .admin_list_item.error {
    background-color: $dark_bg }

.alert {
    background-color: $dark_bg_3;
    border: 1px solid $dark_bg_2;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5); }

.alert-info {
    color: $light_fg;
    background-color: $dark_bg_3;
    border-color: $dark_bg_2; }

.radio_selection, .billing_selection {
    color: $light_fg!important;
    border: 2px solid $dark_bg_2;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5); }

.radio_selection .mini, .slate_blue {
    color: $light_fg!important }

.radio_selection:hover, .billing_selection:hover {
    border-color: $dark_bg_2 }

.radio_selection.active, .billing_selection.active {
    background: $light_bg_2;
    border-color: $dark_bg_3; }

table th {
    border-bottom: 2px solid $dark_bg_2 }

.help {
    border-top: 5px solid $dark_bg_2 }

.subtle_silver, .log_meta, .service_group a:hover, .service_group:hover a, .burnt_violet, .severe_grey {
    color: $dark_fg!important }

.file_actions_cog:hover {
    color: $light_fg_2!important }

.highlight_yellow_bg {
    background-color: $edit_bg!important }

.kelly_green_dark {
    color: #FFF!important }

#plan_lite, #plan_enterprise {
    border: 1px solid $border_2;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5); }

#plan_lite:hover, #plan_enterprise:hover {
    border-color: $border_2; }

#plan_lite .plan_arrow {
    border-bottom: 20px solid $border_2 }

.plan_arrow, #plan_enterprise .plan_arrow {
    border-bottom: 20px solid $dark_bg_5 }

.sky_blue_bg {
    background-color: $dark_bg_4!important }

.havana_blue_bg, .clear_blue_bg {
    background-color: $border_2!important }

.warm_white_bg {
    background-color: $dark_bg_3!important;
    border: 1px solid $dark_bg_2!important; }

.service {
    background: $dark_bg;
    border: 1px solid $dark_bg_2;
    color: $light_fg; }

.service.open {
    background: $dark_bg!important;
    border: 1px solid $dark_bg_2; }

.service_row .summary strong {
    color: $light_fg;
    background: $edit_bg; }

.icon_plus {
    border: 3px dashed $light_fg }

.banner.apps, #billing_contacts_container {
    background: $dark_bg_3;
    border-top: 1px solid $dark_bg_2; }

#stats_too_soon {
    height: 500px }

header, nav#site_nav, .btn-group.open .btn.dropdown-toggle, .btn-group.open .btn.dropdown-toggle, .btn-group.open .btn.dropdown-toggle:hover, table.billing tr:hover td, .log_entry:hover, .service:hover, #all_time, #third_row.column, #second_row.column {
    background: $dark_bg_3 }

#header_team_name, header #header_team_name a, nav#site_nav h3, .widescreen:not(.nav_open) nav#site_nav h3, .plastic_row .description, html.no_touch .plastic_row:hover .chevron, .no_touch input:hover, .no_touch textarea:hover, .no_touch select:hover, .no_touch label.select:not(.disabled):hover:after, .no_touch .accordion_section h4 a:hover, .admin_list_item.expanded .sub_action:hover, .nav_open #menu_toggle, #second_row .disclaimer, #stats_disclaimer, #add_emoji_section h3 a, #stats_too_soon_copy h3, .col_left h2 a, .service h4, .service h4 a, .tab_set a.secondary, .admin_list_item .admin_member_type, .admin_list_item .admin_member_caret, #last_day p.summary strong {
    color: $light_border_2 }

header .menu_icon, #stats_too_soon img, header #header_logo {
    display: none }

.charcoal_grey, .service_group a, .file_actions_cog {
    color: $light_border_2!important }

header #header_team_nav li.active a, html.no_touch header #header_team_nav li a:hover, html.no_touch nav#site_nav #user_menu_contents:hover, .plan, #plan_preview .plan {
    color: $light_fg;
    background: $dark_bg; }

.plastic_row h3, .plastic_row h4 a, .plastic_row .chevron, .service_row a.summary, .accordion_section h4 a, .admin_list_item .admin_member_real_name, .admin_list_item.expanded .sub_action, .card h3 a, header #header_team_nav li a, .alert, .alert h4, #stats_too_soon_copy p, table.mini, .plan_details .column:not(.no_hover):hover, .plan_details .column.active, .preview_details, .cost_explanation, html.no_touch .service_row:not(.no_hover):hover a.summary, html.no_touch .service_row:not(.no_hover):hover .service_chevron, .icon_plus {
    color: $light_fg }

.plastic_row .icon, #page .msgs_holder, .billing_callout {
    background: none }

table tr, .banner, .service_row, .accordion_section, .billing_contact {
    border-bottom: 1px solid $dark_bg_2 }

#footer {
    border-top: none }

#header_nav a.primary_nav, #activity_recent_toggle, header #menu_toggle, header .header_btns a, header .header_btns a .label, .file_header .title a, .action_cog, .action_cog i, .widescreen:not(.nav_open) nav#site_nav ul a, .widescreen:not(.nav_open) nav#site_nav ul a:link, .widescreen:not(.nav_open) nav#site_nav ul a:visited, .widescreen:not(.nav_open) nav#site_nav ul a:hover, .widescreen:not(.nav_open) nav#site_nav ul a:active, .widescreen:not(.nav_open) nav#site_nav #user_menu_name, #footer a, a.mini, a.mini:link, a.mini:visited {
    color: $dark_fg }

#header_team_name:hover .fa-caret-down, nav#site_nav #footer_nav a, #home_footer a, .widescreen:not(.nav_open) nav#site_nav #footer_nav a, #header_nav a.primary_nav:hover, #header_nav a.primary_nav.active, ul.sidebar_nav li a.active, ul.sidebar_nav li, .col_left h2 a:hover, .service:hover h4, .service:hover h4 a, .file_header .title a:hover, html.no_touch .action_cog:hover, html.no_touch .action_cog:hover i, html.no_touch header #header_team_name a:hover, html.no_touch header #menu_toggle:hover, html.no_touch header .header_btns a:hover, html.no_touch header .header_btns a:hover .label, .payment_per_month, .plan h3, #plan_preview .plan h3, .plan_tip, .plan_details .column, #pricing_guide label.checkbox, #footer a:hover, a.mini:hover, a.mini:active, html.no_touch .service:not(.no_hover):hover h4, html.no_touch .service:not(.no_hover):hover h4 a {
    color: $light_fg_2 }

.no_touch .btn:hover, .no_touch .btn.hover, .no_touch .btn:focus, .admin_list_item:hover, .plan_availability, #monkey_scroll_wrapper_for_menu_items_scroller, .modal-backdrop, .icon {
    background: $dark_bg }

#stats_limited {
    bottom: 0;
    height: 480px;
    position: absolute;
    width: 100%;
    margin-left: -2rem;
    background-image: -ms-linear-gradient(top,rgba(255,255,255,0) 0,$dark_bg_2 65%);
    background-image: -moz-linear-gradient(top,rgba(255,255,255,0) 0,$dark_bg_2 65%);
    background-image: -o-linear-gradient(top,rgba(255,255,255,0) 0,$dark_bg_2 65%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(0.65,$dark_bg_2));
    background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,$dark_bg_2 65%);
    background-image: linear-gradient(to bottom,rgba(255,255,255,0) 0, $dark_bg_2 65%); }

/* ===[ Filters ]=== */

.snippet_preview, .special_formatting, .CodeMirror, code, .icon_loading, pre {
    filter: invert(100%);
    -moz-filter: invert(100%);
    -webkit-filter: invert(100%); }