Created
May 18, 2019 20:54
-
-
Save lolptdr/3b3675d46cd1cde690219ba0053e846d to your computer and use it in GitHub Desktop.
Fork Nockiro's custom css for slack black theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Copyright 2017 Bryan Keller (https://github.com/widget-) | |
Licensed under the Apache License, Version 2.0 (the "License"); | |
you may not use this file except in compliance with the License. | |
You may obtain a copy of the License at | |
http://www.apache.org/licenses/LICENSE-2.0 | |
Unless required by applicable law or agreed to in writing, software | |
distributed under the License is distributed on an "AS IS" BASIS, | |
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
See the License for the specific language governing permissions and | |
limitations under the License. | |
*/ | |
:root { | |
/* Modify these to change your theme colors: */ | |
--primary: #09F; | |
--text: #888; | |
--background: #111; | |
--background-elevated: #222; | |
/* These should be less important: */ | |
--background-hover: rgba(255, 255, 255, 0.1); | |
--background-light: #AAA; | |
--background-bright: #FFF; | |
--border-dim: #666; | |
--border-bright: var(--primary); | |
--text-bright: #888; | |
--text-special: var(--primary); | |
--scrollbar-background: #000; | |
--scrollbar-border: var(--primary); | |
} | |
h1, h2, h3, h4 { | |
color: var(--text); | |
} | |
body { | |
background: var(--background); | |
color: var(--text); | |
} | |
hr { | |
border: 0; | |
border-bottom: 1px solid var(--background-elevated); | |
} | |
.popover_mask { | |
background-color: rgba(0, 0, 0, 0.3); | |
} | |
/* Team Picker */ | |
.TeamSidebar, .TeamSidebar .StoplightContainer, .TeamSidebar .TeamSidebar-addArea { | |
background-color: var(--background) !important; | |
box-shadow: var(--background) 1px 1px 25px; | |
color: var(--text); | |
z-index: 1; | |
} | |
/* Channel selector */ | |
/*.TeamSidebar, .TeamSidebar .StoplightContainer, .TeamSidebar .TeamSidebar-addArea {*/ | |
/*nav.p-channel_sidebar {*/ | |
div.client_channels_list_container { | |
background-color: var(--background-elevated) !important; | |
box-shadow: var(--background-elevated) 1px 1px 25px; | |
color: var(--text); | |
z-index: 1; | |
} | |
nav.p-channel_sidebar { | |
background-color: var(--background-elevated); | |
color: var(--text); | |
} | |
#team_menu, | |
body:not(.loading) #team_menu:hover, | |
body:not(.loading) #team_menu:active { | |
background-color: var(--background-elevated) !important; | |
} | |
.p-channel_sidebar__channel, | |
.p-channel_sidebar__link, | |
.p-channel_sidebar__channel:link, | |
.p-channel_sidebar__link:link, | |
.p-channel_sidebar__channel:visited, | |
.p-channel_sidebar__link:visited, | |
.p-channel_sidebar__channel:hover, | |
.p-channel_sidebar__link:hover { | |
color: var(--text) !important; | |
} | |
/* Channel with unread messages */ | |
.p-channel_sidebar__channel--unread:not(.p-channel_sidebar__channel--muted):not(.p-channel_sidebar__channel--selected) .p-channel_sidebar__name, | |
.p-channel_sidebar__link--unread:not(.p-channel_sidebar__link--selected) .p-channel_sidebar__name, | |
.p-channel_sidebar__link--invites:not(.p-channel_sidebar__link--dim) .p-channel_sidebar__name, | |
.p-channel_sidebar__section_heading_label--clickable:hover, | |
.p-channel_sidebar__quickswitcher:hover { | |
color: var(--text-bright) !important; | |
} | |
/*broken*/ | |
__TODO-highlight-indicator { | |
background-color: var(--border-bright) !important; | |
opacity: 1; | |
} | |
#msgs_scroller_div::-webkit-scrollbar-track, .client_container, | |
#search_terms, #footer, ts-message, .channel_header, ts-jumper ts-jumper-container, | |
ts-jumper input[type="text"], | |
.supports_custom_scrollbar:not(.slim_scrollbar) #col_channels:hover #channels_scroller::-webkit-scrollbar-track, | |
#channel_header_info, #channel_topic_text, #channel_topic_text code, #edit_topic_inner:before, | |
.p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider, .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar) | |
{ | |
background: var(--background) !important; | |
border-color: var(--border-dim); | |
} | |
.p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before, .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar):before { | |
background: var(--background); | |
} | |
.p-message_pane__limited_history_foreword { | |
color: var(--text); | |
background: var(--background-elevated); | |
} | |
.c-message--focus:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight), .c-message--hover:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight), .c-message:hover:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight) { | |
background-color: var(--background-hover); | |
} | |
.c-message--light .c-message__sender .c-message__sender_link { | |
color: var(--text); | |
} | |
.c-message_list__day_divider__line { | |
border-top: 1px solid var(--border-dim); | |
} | |
.c-message__body { | |
color: var(--text); | |
} | |
.c-message_list__day_divider__label__pill { | |
background: var(--background-elevated); | |
color: var(--text-bright); | |
} | |
.attachment_group .inline_attachment.message_unfurl .attachment_source .attachment_source_name a, .attachment_group .inline_attachment.message_unfurl .attachment_source .attachment_source_name span | |
{ | |
color: var(--text); | |
} | |
.c-message_group { | |
background-color: unset; | |
border: 1px solid var(--border-dim); | |
} | |
.c-message_group:hover { | |
border-color: var(--border-dim); | |
} | |
.msg_inline_attachment_column.column_border { | |
background-color: var(--border-dim); | |
} | |
/* this styles only the brighter variant of attachment borders */ | |
.c-message_attachment__border[style="background-color: rgb(208, 208, 208)"], .c-message_attachment__border:not([style]) { | |
background-color: var(--background-elevated) !important; | |
} | |
.c-member_slug--link { | |
background: var(--background-elevated); | |
} | |
.channel_header, #col_messages, #footer { | |
box-shadow: none; | |
} | |
/* buttons */ | |
.btn.disabled, .btn.disabled:active, .btn.disabled:hover, .btn:disabled, .btn:disabled:active, .btn:disabled:hover { | |
background-color: var(--background-light) !important; | |
} | |
.btn_outline.hover, .btn_outline:focus, .btn_outline:hover { | |
background: var(--background-hover) !important; | |
} | |
.btn_basic:focus, .btn_basic:hover { | |
color: var(--text-special); | |
} | |
/* channel list */ | |
.p-channel_sidebar__channel, | |
.p-channel_sidebar__link { | |
border-radius: 0 15px 15px 0; | |
height: 24px !important; | |
} | |
.p-channel_sidebar__channel a { | |
color: var(--text); | |
} | |
.p-channel_sidebar__channel--selected, | |
.p-channel_sidebar__link--selected, | |
.p-channel_sidebar__channel--selected:link, | |
.p-channel_sidebar__link--selected:link, | |
.p-channel_sidebar__channel--selected:visited, | |
.p-channel_sidebar__link--selected:visited, | |
.p-channel_sidebar__channel--selected:hover, | |
.p-channel_sidebar__link--selected:hover { | |
background-color: var(--background) !important; | |
border: solid var(--border-bright); | |
border-width: 1px 1px 1px 0; | |
} | |
.p-channel_sidebar__channel:hover, | |
.p-channel_sidebar__link:hover{ | |
background-color: var(--background-hover) !important; | |
border-color: transparent; | |
color: var(--text) !important; | |
height: 24px !important; | |
} | |
.p-channel_sidebar__close_container { | |
background: none !important; | |
} | |
.p-channel_sidebar__channel--selected:hover, | |
.p-channel_sidebar__link--selected:hover { | |
border: solid var(--border-dim); | |
border-width: 1px 1px 1px 0; | |
} | |
/*broken*/ | |
li.active[class] span, | |
#channels_scroller.show_which_channel_is_active[class] ul li.active .primary_action .prefix, | |
#channels_scroller.show_which_channel_is_active[class] ul li.active .primary_action, | |
#channels_scroller.show_which_channel_is_active[class] ul li.active .primary_action.im_name > *:not(.unread_highlights) { | |
color: var(--text-special) !important; | |
background-color: transparent; | |
opacity: 1; | |
} | |
/*"more unreads" bottom*/ | |
.p-channel_sidebar__banner--top { | |
background-color: var(--background); | |
border: 1px solid var(--border-bright); | |
border-top: none; | |
border-radius: 0 0 15px 15px; | |
} | |
/*"more unreads" bottom */ | |
.p-channel_sidebar__banner--bottom { | |
background-color: var(--background); | |
border: 1px solid var(--border-bright); | |
border-bottom: none; | |
border-radius: 15px 15px 0 0; | |
} | |
/*"unread mentions"*/ | |
.p-channel_sidebar__badge, | |
.p-channel_sidebar__banner--mentions { | |
/*inverted because important*/ | |
background-color: var(--border-bright) !important; | |
border-color: var(--text-bright); | |
color: var(--text-bright); | |
} | |
/*also add border to unread count for individual channels*/ | |
.p-channel_sidebar__badge { | |
border: 1px solid; | |
} | |
/* new scrollbar */ | |
.p-channel_sidebar div.c-custom_scrollbar__thumb_vertical, .p-channel_sidebar div.c-scrollbar__bar { | |
background: var(--background-elevated); | |
border: 1px solid var(--scrollbar-border); | |
} | |
#channels_scroller.show_which_channel_is_active[class] li.active .presence.active i.presence_icon, | |
#channels_scroller.show_which_channel_is_active[class] li.active .slackbot_icon, | |
#channels_scroller.show_which_channel_is_active[class] li.active .presence.away i.presence_icon { | |
color: inherit !important; | |
} | |
#client_body::before, #client_body:not(.onboarding):before { | |
border-bottom: 1px solid var(--border-dim) !important; | |
background: var(--background); | |
box-shadow: none; | |
} | |
#client_body, #messages_container.has_top_messages_banner:before { | |
background: var(--background) !important; | |
} | |
ts-message, .channel_title .channel_name, ts-jumper input[type="text"], | |
ts-jumper ol li .member_real_name, ts-jumper ol li .view_name, ts-jumper ol li .channel_name { | |
color: var(--text) !important; | |
} | |
.light_theme ts-message .message_content a.message_sender, #msg_input::-webkit-input-placeholder, | |
ts-jumper input[type="text"]::-webkit-input-placeholder { | |
color: var(--text) !important; | |
} | |
#msg_input, #primary_file_button { | |
background: transparent !important; | |
color: var(--text) !important; | |
border-color: var(--border-dim) !important; | |
} | |
.day_divider .day_divider_label, | |
#convo_container .convo_flexpane_divider .reply_count { | |
color: var(--text) !important; | |
background-color: var(--background) !important; | |
border: 1px solid var(--border-bright) !important; | |
border-radius: 1rem; | |
} | |
.mention_day_container_div .day_divider .day_divider_label { | |
border: 1px solid var(--border-dim) !important; | |
} | |
#convo_container .convo_flexpane_divider .reply_count { | |
border-radius: 10px; | |
padding: 0px 10px; | |
} | |
.mention_day_container_div .day_divider:before { | |
background-color: transparent !important; | |
border-color: var(--border-dim); | |
} | |
.day_container .day_msgs { | |
border-top: 1px solid var(--border-bright) !important; | |
padding-right: 10px; | |
padding-left: 2px; | |
} | |
textarea, input[type="text"], #file_comment_textarea { | |
background-color: var(--background-elevated) !important; | |
border-color: var(--border-dim) !important; | |
color: var(--text) !important; | |
} | |
textarea:focus, input[type="text"]:focus, #file_comment_textarea { | |
border-color: var(--border-bright) !important; | |
color: var(--text-bright) !important; | |
} | |
ts-message { | |
border-radius: 5px; | |
margin: 1px 5px !important; | |
box-shadow: none !important; | |
} | |
ts-message:hover { | |
background: var(--background-hover) !important; | |
} | |
#messages_container::after { | |
background: none !important; | |
} | |
.bot_label { | |
padding: 0 4px !important; | |
border-radius: 3px !important; | |
background: var(--background) !important; | |
border: 1px solid var(--border-bright); | |
} | |
.file_container:after{ | |
background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#333 100%) !important; | |
} | |
.rxn, | |
#col_channels, | |
#col_channels_footer, | |
pre, | |
ts-message .action_hover_container .btn_msg_action, | |
.file_container, | |
.file_container .CodeMirror .CodeMirror-code>div:before, .file_container .CodeMirror .sssh-line:before, .file_container .sssh-code .CodeMirror-code>div:before, .file_container .sssh-code .sssh-line:before, | |
#col_flex, | |
.search_message_result, | |
.search_result_with_extract, | |
#search_filters a, | |
.menu, | |
.menu #menu_items_scroller, | |
.btn, .btn_outline { | |
background: var(--background-elevated) !important; | |
} | |
#flex_contents .heading, | |
#flex_contents .heading a, | |
#flex_contents .heading_text, | |
#flex_contents .subheading, | |
#flex_contents .toolbar_container { | |
background: var(--background) !important; | |
color: var(--text) !important; | |
border-color: var(--border-dim); | |
} | |
pre, | |
ts-message .action_hover_container .btn_msg_action, | |
.file_container .CodeMirror .CodeMirror-code>div pre, .file_container .CodeMirror .sssh-line pre, .file_container .sssh-code .CodeMirror-code>div pre, .file_container .sssh-code .sssh-line pre, | |
.search_message_result .search_message_result_meta a, | |
.search_message_result .search_message_result_meta .date_links a, | |
.flexpane_redesign #flex_contents .heading_text, | |
#flex_contents .subheading, | |
#search_filters.files #filter_files, #search_filters.messages #filter_messages, | |
.menu ul li a, | |
.btn, .btn_outline, .menu { | |
color: var(--text) !important; | |
border-color: border: 1px solid var(--border-dim) !important; | |
} | |
.btn:hover:after { | |
border-color: var(--border-bright); | |
} | |
.action_hover_container { | |
border: 1px solid var(--border-dim) !important; | |
} | |
.ts_tip_float.btn_msg_action:not(:last-child) { | |
border-right: 1px solid var(--border-dim) !important; | |
} | |
.ts_tip_float.btn_msg_action:hover { | |
background-color: var(--background) !important; | |
} | |
#quick_switcher_btn{ | |
/*border-top-color: #333 !important;*/ | |
background-color: transparent; | |
} | |
.rxn, | |
.search_result_with_extract, | |
.flexbox_client.flexpane_redesign.flex_pane_showing #col_flex, | |
.flexpane_redesign #flex_contents .heading, | |
#flex_contents .subheading, | |
.search_segmented_control, | |
.menu{ | |
border-color: var(--border-dim) !important; | |
} | |
.search_result_with_extract { | |
box-shadow: 0 1px 10px var(--background-elevated) !important; | |
} | |
.ql-placeholder { | |
color: var(--text) !important; | |
} | |
.ql-container.texty_single_line_input { | |
background-color: var(--background-elevated); | |
color: var(--text); | |
} | |
.ql-container .ql-editor p { | |
color: var(--text); | |
} | |
#quick_switcher_btn:active, #quick_switcher_btn:focus, #quick_switcher_btn:hover { | |
background-color: var(--background-elevated); | |
border-color: var(--background-elevated); | |
} | |
.feature_name_tagging_client ts-message .mention, ts-message .mention, | |
span.match { | |
border: 1px solid var(--border-bright) !important; | |
background-color: var(--background-elevated) !important; | |
font-weight: bold; | |
padding: 2px 4px; | |
margin: 2px; | |
border-radius: 10px; | |
} | |
.mention > .mention { | |
/* I'm assuming this is a Slack bug */ | |
border: none; | |
} | |
.mention_rxn { | |
border-radius: 5px; | |
margin: 1px 5px; | |
} | |
.mention_rxn .mention_rxn_summary .app_preview_link, | |
.mention_rxn .mention_rxn_summary .member_preview_link, | |
.mention_rxn .mention_rxn_summary .mention_rxn_summary_members { | |
color: var(--text); | |
} | |
#member_mentions h3 a { | |
color: var(--text-special); | |
} | |
pre.special_formatting{ | |
background: var(--background-elevated) !important; | |
} | |
code { | |
color: var(--text-special) !important; | |
background-color: var(--background-elevated) !important; | |
border-color: var(--border-dim) !important; | |
} | |
.supports_custom_scrollbar:not(.slim_scrollbar) #archive_msgs_scroller_div::-webkit-scrollbar-thumb, | |
.supports_custom_scrollbar:not(.slim_scrollbar) #msgs_scroller_div::-webkit-scrollbar-thumb, | |
.supports_custom_scrollbar:not(.slim_scrollbar) #col_channels:hover #channels_scroller::-webkit-scrollbar-thumb { | |
/* scrollbar draggy bit */ | |
color: transparent !important; | |
border: 1px solid var(--scrollbar-border) !important; | |
background-color: transparent !important; | |
} | |
.supports_custom_scrollbar:not(.slim_scrollbar) #archive_msgs_scroller_div::-webkit-scrollbar-track, | |
.supports_custom_scrollbar:not(.slim_scrollbar) #msgs_scroller_div::-webkit-scrollbar-track, | |
.supports_custom_scrollbar:not(.slim_scrollbar) #col_channels:hover #channels_scroller::-webkit-scrollbar-track { | |
/* scrollbar endcaps */ | |
color: transparent !important; | |
border: 1px solid var(--border-dim) !important; | |
background-color: transparent !important; | |
} | |
a, a:link, a:visited{ | |
color: var(--text-special); | |
} | |
ts-message a .mention{ | |
color: var(--text-special) !important; | |
} | |
a:hover{ | |
color: var(--text-special) !important; | |
} | |
#msgs_scroller_div #end_display_div p { | |
color: var(--text); | |
} | |
.channels_list_holder ul li a.channel_name, | |
.channels_list_holder ul li:not(.unread) .group_name, | |
.channels_list_holder ul li .im_name, | |
.channels_list_holder ul li .mpim_name, | |
.channels_list_holder ul li>a:link, | |
ts-message a.timestamp{ | |
color: #aaa !important; | |
} | |
#channels_scroller.show_which_channel_is_active ul li.active .im_name{ | |
color: #fff !important; | |
} | |
#msgs_div .unread_divider.no_unreads .divider_label | |
{ | |
background: #000 !important; | |
color: #aaa !important; | |
} | |
#msgs_div .unread_divider.no_unreads hr{ | |
border-top-color: #888 !important; | |
} | |
.flexpane_redesign #member_mentions { | |
background-color: var(--background); | |
} | |
#details_tab .channel_page_section { | |
background-color: var(--background-elevated); | |
} | |
#details_tab .channel_page_section .section_title { | |
color: var(--text); | |
} | |
.greigh { | |
/* greigh = label?? */ | |
color: var(--text) !important; | |
} | |
.pinned_item .pin_member_name a, .pinned_item { | |
color: var(--text) !important; | |
} | |
.pinned_item .pinned_message_text .pin_truncate_fade { | |
background: -webkit-gradient(linear,left bottom,left top,color-stop(0,var(--background-elevated)),color-stop(1,rgba(255,255,255,0))); | |
} | |
.tab_container .file_list_item .contents .member, .tab_container .file_list_item .contents .service_link, .tab_container .file_list_item .contents .share_info, .tab_container .file_list_item .contents .time { | |
color: var(--text-special); | |
} | |
.tab_container .file_list_item:focus, .tab_container .file_list_item:hover { | |
background-color: var(--background-hover); | |
} | |
/* files */ | |
.file_container.generic_container .file_header_meta .meta_hover { | |
background-color: transparent !important; | |
} | |
.file_preview_action.btn.ts_tip, .file_preview_link.btn.file_comment_link { | |
border: 1px solid var(--border-bright) !important; | |
background-color: var(--background-hover) !important; | |
color: var(--text) !important; | |
} | |
.file_preview_action.btn.ts_tip:hover, .file_preview_link.btn.file_comment_link:hover { | |
background-color: var(--background) !important; | |
} | |
.p-file_details__name { | |
color: var(--text); | |
} | |
/* user profile popup */ | |
#member_preview_scroller, #member_preview_web_container, | |
.menu_member_header, .menu_member_footer { | |
background-color: var(--background-elevated); | |
border-color: var(--border-dim); | |
color: var(--text); | |
} | |
/* user mentions for other people */ | |
.app_preview_link_slug.ts_tip, | |
.internal_member_link.ts_tip, | |
.internal_user_group_link.ts_tip, | |
ts-mention.ts_tip | |
{ | |
color: var(--text-bright); | |
background: var(--background-elevated); | |
border: 1px solid var(--border-dim); | |
padding: 2px 4px; | |
margin: 2px; | |
border-radius: 10px; | |
} | |
.app_preview_link_slug.ts_tip:hover, | |
.internal_member_link.ts_tip:hover, | |
.internal_user_group_link.ts_tip:hover, | |
ts-mention.ts_tip:hover | |
{ | |
color: var(--text-bright) !important; | |
border: 1px solid var(--border-bright); | |
} | |
/* emojis */ | |
.rxn[data-emoji] { | |
/*background-color: var(--background-light) !important; | |
transition: background-color 200ms ease-in;*/ | |
height: 28px; | |
} | |
.rxn[data-emoji]:hover { | |
/*background-color: var(--background-bright) !important;*/ | |
} | |
.rxn[data-emoji] .emoji_rxn_count { | |
font-size: 0.9rem; | |
/*color: black !important;*/ | |
} | |
.rxn .emoji-sizer { | |
background-color: transparent !important; | |
border-radius: 7px; | |
width: 24px; | |
height: 24px; | |
margin: 0 0 0 -2px !important; | |
border: 1px solid transparent; /* looks silly but it makes the outline work */ | |
} | |
.emoji-sizer { | |
/* outline for black-on-transparent emojis */ | |
-webkit-filter: drop-shadow( 1px 0 0 var(--background)) | |
drop-shadow(-1px 0 0 var(--background)) | |
drop-shadow(-0 1px 0 var(--background)) | |
drop-shadow( 0 -1px 0 var(--background)); | |
margin: 0 !important; | |
} | |
.ts_icon.ts_icon_smile_o { | |
color: var(--text); | |
} | |
.emoji_menu_ng #emoji_input_container, | |
#emoji_menu #emoji_menu_items_scroller, | |
#emoji_menu #emoji_menu_footer, | |
#emoji_menu #emoji_input_container { | |
background-color: transparent; | |
} | |
.menu .p-emoji_picker__input_container, | |
.menu .p-emoji_picker__list_container, | |
.menu .p-emoji_picker__heading, | |
.menu .p-emoji_picker__footer { | |
background: transparent; | |
color: var(--text); | |
} | |
.p-emoji_picker__group_tab { | |
border: 1px solid transparent; | |
border-bottom-width: 2px; | |
} | |
.menu .p-emoji_picker__group_tab--active { | |
background-color: var(--background); | |
color: var(--text-special); | |
border-color: var(--border-bright); | |
border-width: 1px 1px 2px 1px; | |
border-style: solid; | |
} | |
.p-emoji_picker__group_tab:hover { | |
background-color: var(--background-elevated); | |
border-color: var(--border-dim); | |
} | |
.p-emoji_picker__group_tab .emoji-sizer { | |
filter: none; | |
-webkit-filter: none; | |
} | |
.p-emoji_picker__group_tab:hover .emoji-sizer { | |
color: var(--text); | |
} | |
.p-emoji_picker__preview_text { | |
background-color: var(--bacground-elevated); | |
color: var(--text); | |
} | |
#emoji_menu h3, #emoji_menu #emoji_preview_text { | |
background-color: var(--background-elevated); | |
color: var(--text); | |
} | |
#emoji_menu a.emoji_grouping_tab .emoji-sizer { | |
-webkit-filter: none; | |
} | |
.emoji_menu_ng #emoji_menu_header .emoji_grouping_tab.active { | |
background-color: transparent; | |
border-color: var(--border-bright); | |
border-width: 1px 1px 3px 1px; | |
border-style: solid; | |
} | |
.light_theme .emoji-only { | |
line-height: 3rem; | |
font-size: 3rem; | |
margin-top: 3px !important; | |
} | |
/* menus */ | |
.menu ul li a, .menu ul li:not(.disabled) a { | |
border: 1px solid var(--background-elevated) !important; | |
} | |
.menu ul li.highlighted a, .menu ul li:hover:not(.disabled) a { | |
background: var(--background-elevated) !important; | |
border-color: var(--border-bright) !important; | |
} | |
.menu .section_header .header_label { | |
color: var(--text) !important; | |
background-color: var(--background-elevated) !important; | |
} | |
.menu .section_header hr { | |
border-color: transparent; | |
} | |
/* threads */ | |
ts-message .reply_bar:hover { | |
background: var(--background) !important; | |
border: 1px solid var(--border-dim) !important; | |
} | |
ts-message.active .edited, ts-message.active .reply_bar .last_reply_at, ts-message.active .timestamp, ts-message.active.automated .message_body, ts-message.message--focus .edited, ts-message.message--focus .reply_bar .last_reply_at, ts-message.message--focus .timestamp, ts-message.message--focus.automated .message_body, ts-message:hover .edited, ts-message:hover .reply_bar .last_reply_at, ts-message:hover .timestamp, ts-message:hover.automated .message_body { | |
color: var(--text-bright); | |
} | |
#threads_msgs .inline_message_input_container.with_file_upload, | |
#reply_container.upload_in_threads .inline_message_input_container { | |
background: var(--background); | |
border-color: var(--border-dim); | |
} | |
.c-message__reply_bar--focus, .c-message__reply_bar:hover, .c-message__reply_bar--focus .c-message__reply_bar_view_thread, .c-message__reply_bar:hover .c-message__reply_bar_view_thread | |
{ | |
background-color: var(--background-elevated); | |
} | |
.p-threads_view { | |
background-color: var(--background); | |
} | |
.p-threads_view_header__permalink { | |
color: var(--text-special) !important; | |
} | |
.p-threads_view__default_background { | |
background-color: var(--background-elevated); | |
} | |
.p-threads_view__divider_line { | |
border-color: var(--border-dim); | |
} | |
.p-threads_view__divider_label { | |
background-color: var(--background-elevated); | |
color: var(--text); | |
} | |
.p-threads_view_root { | |
border-color: var(--border-dim); | |
} | |
.p-threads_view_reply { | |
border-color: var(--border-dim); | |
} | |
.p-threads_view__footer { | |
border-color: var(--border-dim); | |
} | |
.p-threads_view_reply { | |
background-color: var(--background-hover); | |
} | |
.p-threads_footer__input--legacy .p-message_input_file_button { | |
background-color: var(--background-elevated); | |
} | |
/* editor in thread reply */ | |
#convo_tab .message_input, #convo_tab textarea#msg_text { | |
color: var(--text) !important; | |
} | |
.inline_message_input_container .ql-container.focus, | |
.inline_message_input_container .ql-container:active { | |
border-color: var(--border-dim) !important; | |
} | |
#file_reply_container .reply_container_info .reply_broadcast_buttons_container .reply_broadcast_label_container, | |
#reply_container .reply_container_info .reply_broadcast_buttons_container .reply_broadcast_label_container, | |
.reply_input_container .reply_container_info .reply_broadcast_buttons_container .reply_broadcast_label_container, | |
#convo_tab #convo_tab_header { | |
color: var(--text) !important; | |
} | |
/** Until 3.3.5 **/ | |
#message_edit_container .message_input { | |
background: var(--background-elevated); | |
} | |
/** With 3.3.6 **/ | |
.p-threads_footer__input .p-message_input_field { | |
background: var(--background-elevated); | |
} | |
button.c-button-unstyled.p-message_input_plus { | |
background-color: var(--background-hover); | |
} | |
.p-threads_flexpane__separator_count { | |
margin-right: 12px; | |
color: var(--text); | |
}.p-threads_flexpane__separator_line { | |
border-bottom-color: var(--border-dim); | |
} | |
.p-threads_flexpane__header_channel_name { | |
color: var(--text-special); | |
} | |
/* other */ | |
.special_formatting_quote .quote_bar { | |
background: var(--border-bright) !important; | |
} | |
#details_toggle.active:hover, #recent_mentions_toggle.active:hover, | |
#stars_toggle.active:hover { | |
background-color: var(--background-hover); | |
color: var(--text); | |
} | |
#details_toggle.active, #recent_mentions_toggle.active, | |
#sli_recap_toggle.active, #stars_toggle.active { | |
background-color: var(--background-elevated); | |
border: 1px solid var(--border-bright); | |
color: var(--border-bright); | |
} | |
.star_item, | |
.current_status_input_for_team_menu .current_status_presets { | |
border-color: var(--border-dim); | |
} | |
.messages_banner, .p-archives_banner { | |
color: var(--text); | |
background-color: var(--background-elevated); | |
border: 1px solid var(--border-bright); | |
border-bottom: 0px; | |
border-radius: 10px 10px 0 0; | |
} | |
#threads_msgs_scroller_div, ts-thread { | |
background-color: var(--background); | |
} | |
ts-thread .thread_header .thread_channel_name a { | |
color: var(--text-special); | |
} | |
#convo_tab .thread_participants, ts-thread .thread_participants { | |
color: var(--text); | |
} | |
ts-thread .thread_messages, | |
.reply_input_container .ql-container { | |
background-color: var(--background); | |
border-color: var(--border-dim); | |
} | |
#threads_msgs_scroller_div ts-thread ts-message { | |
margin: 0 !important; | |
border-radius: 10px; | |
} | |
.p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before, .p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list:not(.c-virtual_list--scrollbar):before | |
{ | |
box-shadow: 0 32px var(--background); | |
} | |
ts-thread .collapse_inline_thread_container:hover, | |
ts-thread .view_all_replies_container:hover { | |
background-color: var(--background-elevated); | |
} | |
/* preferences page and modals in general*/ | |
#fs_modal, .modal, .modal-header, .modal-footer { | |
background-color: var(--background-elevated); | |
} | |
#fs_modal .fs_modal_btn:hover { | |
color: var(--text); | |
background-color: var(--background-hover); | |
} | |
#fs_modal, #fs_modal h1, #fs_modal h2, | |
#fs_modal h3, #fs_modal h4, #fs_modal h5, | |
.modal, .modal h1, .modal h2, .modal h3, | |
.modal h4, .modal h5 { | |
color: var(--text); | |
} | |
#fs_modal .fs_modal_file_viewer_header { | |
background: transparent; | |
} | |
#fs_modal .fs_modal_file_viewer_content .viewer { | |
background: var(--background); | |
} | |
.fs_modal_file_viewer_header .control_btn { | |
color: var(--text) !important; | |
} | |
.section_rollup:hover:not(.is_active) { | |
background: var(--background-hover); | |
color: inherit; | |
} | |
#fs_modal #fs_modal_sidebar a { | |
padding: 10px; | |
background: transparent; | |
border: 1px solid rgba(0, 0, 0, 0.01); | |
border-radius: 10px; | |
} | |
#fs_modal #fs_modal_sidebar a:hover { | |
border-color: var(--border-dim); | |
} | |
#fs_modal #fs_modal_sidebar a.is_active { | |
border-color: var(--border-bright); | |
} | |
#fs_modal.prefs_modal legend { | |
color: var(--text); | |
} | |
#threads_msgs_scroller_div .threads_caught_up_divider .divider_line, | |
#threads_msgs_scroller_div .threads_caught_up_divider .divider_label { | |
background-color: var(--background-elevated); | |
border: 1px solid var(--border-dim); | |
color: var(--text); | |
} | |
/* unreads */ | |
.unread_empty_state { | |
color: var(--text); | |
} | |
.unread_group_header, | |
.sli_briefing, .sli_briefing__header, .sli_briefing__title, | |
.sli_briefing_view__footer_title, .bottom_mark_all_read { | |
background-color: var(--background); | |
color: var(--text); | |
border-color: var(--border-dim); | |
} | |
.unread_group_header button { | |
color: var(--text-special); | |
} | |
/* scroller for threads & unreads */ | |
#threads_msgs_scroller_div:not(.loading):before { | |
background: var(--background); | |
} | |
/* putting this on so many elements might cause performance issues but #yolo */ | |
div::-webkit-scrollbar-track { | |
display: none !important; | |
} | |
div::-webkit-scrollbar-thumb { | |
color: transparent !important; | |
border: 1px solid var(--scrollbar-border) !important; | |
background-color: transparent !important; | |
} | |
#threads_msgs_scroller_div:not(.loading):before { | |
background: none; | |
} | |
/* thread side panel */ | |
#mentions_scroller { | |
background: var(--background) !important; | |
color: var(--text) !important; | |
} | |
/* global (left sidebar) */ | |
#channel_scroll_down, #channel_scroll_up { | |
background-color: var(--background) !important; | |
border: 0 1px 1px 1px solid var(--border-bright) !important; | |
} | |
#team_menu, #quick_switcher_btn, #team_menu_overlay, #col_channels_overlay { | |
border-color: transparent !important; | |
} | |
/* CodeMirror syntax highlighting */ | |
.cm-s-default .cm-header {color: #66f} | |
.cm-s-default .cm-quote {color: #0f0} | |
.cm-negative {color: #f44} | |
.cm-positive {color: #2f2} | |
.cm-s-default .cm-keyword {color: #f0a} | |
.cm-s-default .cm-atom {color: #7ff} | |
.cm-s-default .cm-number {color: #5fa} | |
.cm-s-default .cm-def {color: #37f} | |
.cm-s-default .cm-variable-2 {color: #09f} | |
.cm-s-default .cm-variable-3 {color: #0fa} | |
.cm-s-default .cm-comment {color: #f80} | |
.cm-s-default .cm-string {color: #f33} | |
.cm-s-default .cm-string-2 {color: #f50} | |
.cm-s-default .cm-meta,.cm-s-default .cm-qualifier {color: #aaa} | |
.cm-s-default .cm-builtin {color: #96f} | |
.cm-s-default .cm-bracket {color: #ffa} | |
.cm-s-default .cm-tag {color: #5f0} | |
.cm-s-default .cm-attribute {color: #33f} | |
.cm-s-default .cm-hr {color: #ccc} | |
.cm-s-default .cm-link {color: #33f} | |
/* Snippets */ | |
select { | |
background-color: var(--background); | |
color: var(--text); | |
border-color: var(--border-dim); | |
} | |
#select_share_channels .lazy_filter_select .lfs_value .lfs_item.selected { | |
color: var(--text); | |
} | |
.CodeMirror, .CodeMirror .CodeMirror-gutters, .CodeMirror-gutter { | |
background-color: var(--background) !important;; | |
border-color: var(--border-bright); | |
color: var(--text); | |
} | |
.CodeMirror .CodeMirror-line { | |
background-color: var(--background); | |
} | |
.CodeMirror-cursor { | |
border-left-color: var(--text); | |
} | |
.CodeMirror-selected { | |
background-color: rgba(255, 255, 255, 0.2) !important; | |
} | |
.modal div, .modal span, .modal label { | |
color: var(--text); | |
} | |
.lazy_filter_select .lfs_list_container, | |
.lazy_filter_select .lfs_list .lfs_item.active { | |
background-color: var(--background-elevated); | |
} | |
.lfs_list::-webkit-scrollbar-track { | |
display: none; | |
} | |
.lfs_list::-webkit-scrollbar-thumb { | |
color: transparent !important; | |
border: 1px solid var(--scrollbar-border) !important; | |
background-color: transparent !important; | |
} | |
/* profile */ | |
#fs_modal #fs_modal_footer { | |
background-color:var(--background-elevated) | |
} | |
#contents_container::-webkit-scrollbar-track { | |
display: none; | |
} | |
#contents_container::-webkit-scrollbar-thumb { | |
color: transparent !important; | |
border: 1px solid var(--scrollbar-border) !important; | |
background-color: transparent !important; | |
} | |
/* scroll border fix */ | |
.client_channels_list_container { | |
border-right: none; | |
} | |
.flex_pane_showing #col_flex { | |
border-color: var(--border-dim); | |
} | |
/* setting menu fix */ | |
#fs_modal.prefs_modal .global_notification_block { | |
background: transparent; | |
border: none; | |
} | |
#fs_modal.prefs_modal .global_notification_block.selected { | |
background: transparent; | |
border: 1px solid var(border-bright); | |
} | |
.notification_example.mac { | |
color: #555459; /* default color - leave unthemed */ | |
} | |
/* global jumper */ | |
ts-jumper, ts-jumper.active { | |
background-color: rgba(32,32,32,0.6); | |
} | |
ts-jumper ts-jumper-container { | |
box-shadow: 0 5px 20px rgba(0,0,0,1); | |
} | |
/* app badge */ | |
.c-app_badge, .c-app_label { | |
color: var(--text-bright); | |
background-color: var(--background-elevated); | |
} | |
/* tabs */ | |
.c-tabs__tab.c-tabs__tab--active, .c-tabs__tab:active, .c-tabs__tab:focus { | |
color: var(--text); | |
} | |
/* modal content */ | |
.c-fullscreen_modal__header, | |
.c-fullscreen_modal__content { | |
background-color: var(--background-elevated); | |
} | |
.c-fullscreen_modal__back:hover, .c-fullscreen_modal__close:hover { | |
background-color: var(--background-hover); | |
} | |
.c-fullscreen_modal__body { | |
color: var(--text); | |
} | |
.ts_toggle .ts_toggle_secondary_label { | |
color: var(--text); | |
} | |
/* modal transition */ | |
#fs_modal_bg, .fs_modal_bg { | |
background: var(--background-elevated); | |
} | |
/* new search modal */ | |
.c-search_autocomplete footer, | |
.c-search, | |
.c-search__tabs, | |
.c-search__input_box { background-color: unset; } | |
.c-search, | |
.c-search__tabs, | |
.c-search__input_and_close__close { color: unset; } | |
.p-message_limit_banner { | |
color: unset; | |
background-color: unset; | |
} | |
.p-search_filter__title_text { | |
background-color: var(--background); | |
} | |
.p-search_filter__dates { | |
background-color: var(--background-elevated) !important; | |
} | |
.c-search_autocomplete__suggestion_content .c-channel_name .c-deprecated-icon, .c-search_autocomplete__suggestion_content .c-search_autocomplete__suggestion_icon, .c-search_autocomplete__suggestion_content .c-search_autocomplete__suggestion_text .filetype_description, | |
.c-search_autocomplete__suggestion_content .c-search_autocomplete__suggestion_text .token | |
{ | |
color: var(--text); | |
} | |
.token { | |
background-color: var(--background-elevated) !important; | |
} | |
.c-search_modal .popover>div { background-color: var(--background); } | |
.c-search_autocomplete__suggestion_content { | |
color: var(--text-bright); | |
} | |
.c-team__display-name, .c-unified_member__display-name, .c-usergroup__handle { | |
color: var(--text); | |
} | |
.c-search_message__body { | |
color: var(--text); | |
} | |
.p-search_filter__datepicker_trigger:hover { | |
color: var(--text); | |
} | |
.c-input_select_options_list__empty_state { | |
color: var(--text); | |
} | |
/* channel options */ | |
.channel_option_item .title { | |
color: var(--text); | |
} | |
.channel_option_item:hover { | |
background: var(--background-hover); | |
} | |
.channel_options_modal .c-fullscreen_modal__title { | |
color: var(--text); | |
} | |
.c-fullscreen_modal__back:hover, .c-fullscreen_modal__close:hover { | |
background-color: var(--background-hover); | |
color: var(--text-bright); | |
} | |
/* channel invite */ | |
#channel_invite_modal #channel_invite_container:not(.keyboard_active).not_scrolling .channel_invite_row:not(.disabled):hover, #channel_invite_modal .channel_invite_row.highlighted:not(.disabled) { | |
background: var(--background-hover); | |
} | |
.c-unified_member__secondary-name--medium { | |
color: var(--text); | |
} | |
.channel_modal .btn_large { | |
border: 1px solid; | |
} | |
#channel_invite_modal #channel_invite_container .channel_invite_row.disabled { | |
background-color: var(--background-light); | |
} | |
/* channel browsing */ | |
#channel_browser .channel_browser_row_header { | |
color: var(--text); | |
} | |
#channel_browser .channel_browser_divider { | |
color: var(--text); | |
background: var(--background-hover); | |
} | |
#channel_browser .channel_browser_row { | |
background-color: var(--background); | |
} | |
#channel_browser #channel_list_container:not(.keyboard_active).not_scrolling .channel_browser_row:hover, #channel_browser .channel_browser_row.highlighted { | |
background: var(--background-elevated); | |
border-color: var(--border-dim); | |
} | |
.sk_black { | |
color: var(--text); | |
} | |
/* app browsing */ | |
.p-apps_browser__app_limit_meter b { | |
color: var(--text); | |
} | |
.p-apps_browser__app_info { | |
color: var(--text); | |
} | |
.p-apps_browser__app_limit_meter__blank_app_box { | |
background-color: var(--background-hover); | |
} | |
.p-apps_browser__app--selected { | |
background: var(--background-hover); | |
} | |
/** menus **/ | |
.c-menu_item__header { | |
background: var(--background-hover); | |
color: var(--text); | |
} | |
.sidebar_menu_list_item { | |
color: var(--text-bright); | |
} | |
.sidebar_menu_list_item:not(.is_active):hover { | |
background-color: var(--background-elevated); | |
} | |
/* message action menu */ | |
.c-menu { | |
background-color: var(--background-elevated); | |
color: var(--text-bright); | |
border: 1px solid var(--border-dim); | |
} | |
.c-menu_item__label { | |
color: var(--text-bright); | |
} | |
.c-message_actions__container { | |
background: var(--background-elevated); | |
} | |
.c-message_actions__button:active { | |
background: var(--background-hover); | |
border-radius: .375rem; | |
} | |
/** menus end **/ | |
.c-menu_item__icon { | |
color: var(--background-light); | |
} | |
.c-icon { | |
color: var(--text); | |
} | |
/* sidebar in general */ | |
.p-flexpane_header { | |
border-bottom: 1px solid var(--border-dim); | |
} | |
/* member detail view */ | |
#member_preview_scroller .member_data_table tr, #member_preview_web_container .member_data_table tr, #team_list .member_data_table tr, .menu_member_header .member_data_table tr { | |
color: var(--text-bright); | |
} | |
#member_preview_scroller .member_details .member_name_and_presence .member_name, #member_preview_web_container .member_details .member_name_and_presence .member_name, .menu_member_header .member_details .member_name_and_presence .member_name, .menu_member_header .member_details .member_current_status, .menu_member_header .member_details .member_timezone_value { | |
color: var(--text) !important; | |
} | |
.menu_member_header .member_details .member_current_status a, .menu_member_header .member_details .member_timezone_value a { | |
color: var(--text-special); | |
} | |
.member_details_over_image { | |
text-shadow: 0 0 8px var(--background); | |
} | |
.member_details_over_image .member_name { | |
color: var(--background-light) !important; | |
} | |
/* channel detail view */ | |
#details_tab .feature_sli_channel_insights .channel_created_section .creator_link, #details_tab .feature_sli_channel_insights .channel_purpose_section .channel_purpose_text, .c-team__display-name, .c-usergroup__handle | |
{ | |
color: unset; | |
} | |
.c-channel_insights__date_heading span { | |
background-color: var(--background-light); | |
} | |
.channel_page_member_row:hover { | |
background-color: var(--background-hover); | |
border-color: var(--border-dim); | |
} | |
/* workspace directory */ | |
.searchable_member_list_filter .faux_input { | |
color: var(--text); | |
} | |
#member_preview_scroller .member_data_table .current_status_cell .current_status_container:not(.active) .current_status_cover.without_status_set .current_status_placeholder, .statuses_container .current_status_container:not(.active) .current_status_cover.without_status_set .current_status_placeholder { | |
color: var(--text); | |
} | |
#member_preview_scroller .member_data_table a:not(.current_status_preset_option):not(.current_status_presets_edit_link):not(.member_details_manage_link), #member_preview_web_container .member_data_table a:not(.current_status_preset_option):not(.current_status_presets_edit_link):not(.member_details_manage_link), #team_list .member_data_table a:not(.current_status_preset_option):not(.current_status_presets_edit_link):not(.member_details_manage_link), .menu_member_header .member_data_table a:not(.current_status_preset_option):not(.current_status_presets_edit_link):not(.member_details_manage_link) { | |
color: var(--text); | |
font-weight: 400!important; | |
} | |
/* snippet / file container / download bar */ | |
.c-snippet__code .CodeMirror-code>div:before { | |
background-color: var(--background); | |
} | |
.c-file_container--gradient:after { | |
background: linear-gradient(180deg,hsla(0,0%,100%,0),var(--background)); | |
} | |
.c-file__title { | |
color: var(--text); | |
} | |
.c-file_container, .c-file__slide--meta { | |
background-color: var(--background-elevated); | |
} | |
.c-file_container { | |
border: 1px solid var(--border-dim); | |
} | |
.c-file__action_button, .c-file__action_button:link, .c-file__action_button:visited { | |
color: var(--text); | |
background-color: var(--background); | |
} | |
.p-flexpane_header { | |
background: var(--background); | |
} | |
.p-downloads_list__shift_hint { | |
background: linear-gradient(180deg,hsla(0,0%,100%,0),var(--background)); | |
} | |
.p-download_item { | |
border: 1px solid var(--border-dim); | |
} | |
.p-download_item__container .p-download_item__name_row { | |
color: var(--text); | |
} | |
.p-download_item__actions { | |
background: var(--background-hover); | |
} | |
.c-message_attachment { | |
color: var(--text-bright); | |
} | |
.c-message_kit__file__meta { | |
color: var(--text); | |
} | |
.c-file_container--has_thumb .c-file__actions:before { | |
background-image: none; | |
} | |
.c-pillow_file__swap .c-pillow_file__slide { | |
background: var(--background); | |
} | |
.c-pillow_file__icon--slide:after { | |
color: var(--background); | |
border-color: var(--background); | |
} | |
.c-pillow_file__content--collapsed:after { | |
background: linear-gradient(0deg,var(--background),hsla(0,0%,100%,0) 40px); | |
border: 1px solid; | |
} | |
.c-pillow_file__snippet__content .CodeMirror-code>div:before { | |
color: var(--text); | |
} | |
/* file drafts */ | |
ts-rocket, ts-rocket.post_body { | |
color: var(--text); | |
} | |
.modal-backdrop { | |
background: var(--background-elevated); | |
} | |
nav { | |
background-color: var(--background-elevated); | |
} | |
/* calendar */ | |
.pickmeup { | |
background-color: var(--background-elevated); | |
} | |
.pmu-disabled { | |
background: var(--background-elevated); | |
} | |
.pmu-days * { | |
border: 1px solid var(--border-dim); | |
} | |
/* history loading */ | |
.p-degraded_list__loading { | |
background: var(--background-elevated); | |
} | |
/* scrollbar */ | |
.c-scrollbar__bar { | |
background: var(--scrollbar-background); | |
border: 1px solid var(--scrollbar-border); | |
} | |
/* actions */ | |
.c-button--outline { | |
background: var(--background-elevated); | |
color: var(--text); | |
} | |
.c-button--outline:active { | |
background: var(--background-light); | |
color: var(--text-bright); | |
} | |
.c-button--outline-primary { | |
background: var(--background-elevated); | |
} | |
.c-message_attachment__pretext { | |
color: var(--text); | |
} | |
.c-button--disabled { | |
background-color: var(--background-light); | |
} | |
/* dialogs */ | |
.c-dialog__header { | |
background: var(--background-elevated); | |
} | |
.c-dialog__title { | |
color: var(--text); | |
} | |
.c-dialog__content, .c-dialog__footer { | |
background: var(--background); | |
} | |
.c-dialog__cancel { | |
background: var(--background-elevated); | |
} | |
/* unread message divider badge */ | |
.c-message_list__unread_divider__label { | |
background: var(--background-elevated); | |
} | |
.c-message_list__unread_divider__separator { | |
border-color: var(--background-bright); | |
} | |
/* message editor */ | |
.c-message__editor__input { | |
background: var(--background-elevated); | |
} | |
.c-message--highlight, .c-message--highlight_yellow_bg { | |
background: var(--background); | |
} | |
.c-message__editor__input--legacy { | |
background-color: var(--background-elevated); | |
} | |
/* new filelist */ | |
#client-ui .file_list_item.file_list_item--redesign { | |
border: 1px solid var(--border-dim); | |
} | |
#client-ui .file_list_item .monospace { | |
color: var(--text); | |
} | |
.c-pillow_file_container { | |
background: var(--background); | |
} | |
.c-input_select { | |
background: var(--background-elevated); | |
color: var(--text); | |
} | |
.p-search_filter__dates, .p-search_filter .p-file_list__file_type_select, .p-search_filter__select .c-input_select { | |
border: 1px solid var(--border-dim); | |
} | |
.p-file_list__filters { | |
background: var(--background-elevated); | |
padding-top: 12px; | |
} | |
.c-pillow_file_container--full_width:focus, .c-pillow_file_container--full_width:focus-within, .c-pillow_file_container--full_width:hover { | |
background-color: var(--background-elevated); | |
} | |
/* side lists */ | |
#client-ui .searchable_member_list .team_list_item:hover { | |
background: var(--background-hover); | |
} | |
#client-ui .member_file_filter_menu .searchable_member_list_scroller .team_list_item .c-unified_member__name { | |
color: var(--text); | |
} | |
.c-pillow_file__title { | |
color: var(--text); | |
} | |
.active .tab_container .file_list_item { | |
background-color: var(--background); | |
} | |
.c-pillow_file__description { | |
color: var(--text-bright); | |
} | |
.c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open) | |
{ | |
background-color: var(--background); | |
} | |
.p-file_list__file_type_select .c-input_select__selected_value--placeholder { | |
color: var(--text); | |
} | |
.c-input_select_options_list__option { | |
color: var(--text); | |
} | |
#stars_scroller { | |
background-color: var(--background); | |
} | |
.p-file_flexpane--list { | |
background-color: var(--background-elevated); | |
} | |
/* whats' new */ | |
#whats_new_tab #whats_new_scroller { | |
background: var(--background); | |
} | |
#whats_new_tab p { | |
color: var(--text); | |
} | |
.indifferent_grey { | |
color: var(--text)!important; | |
} | |
/* overriding indifferent grey here to highlight whats'new links */ | |
#whats_new_tab .indifferent_grey { | |
color: var(--text-special)!important; | |
} | |
/* browse apps */ | |
.c-filter_input, .p-apps_browser__category_header { | |
background: var(--background-elevated); | |
} | |
.p-apps_browser__category_header { | |
color: var(--text); | |
} | |
.charcoal_grey { | |
color: var(--text) !important; | |
} | |
/* people mentioning */ | |
.tab_complete_ui .tab_complete_ui_header { | |
background: var(--background); | |
} | |
.tab_complete_ui { | |
background: var(--background-elevated); | |
} | |
.tab_complete_ui ul.type_members .unify_broadcast { | |
color: var(--text); | |
} | |
.c-mrkdwn__broadcast--mention, .c-mrkdwn__broadcast--mention:hover, .c-mrkdwn__highlight, .c-mrkdwn__mention, .c-mrkdwn__mention:hover, .c-mrkdwn__user_group--mention, .c-mrkdwn__user_group--mention:hover { | |
background: var(--background-elevated); | |
} | |
.c-member_slug--mention, .c-member_slug--mention:hover { | |
background: var(--background-hover); | |
} | |
/* message thumbs up */ | |
.c-reaction { | |
background: var(--background); | |
border: 1px solid var(--border-dim); | |
} | |
.c-reaction--reacted:hover { | |
background: var(--background-elevated); | |
} | |
.c-reaction_add { | |
background: var(--background); | |
} | |
.c-reaction_add:hover { | |
background: var(--background-hover); | |
} | |
.c-reaction__count { | |
color: var(--text-bright); | |
} | |
/* tooltips */ | |
.ts_tip .ts_tip_tip { | |
color: var(--text); | |
} | |
/* "only visible to you" highlight */ | |
.c-message--ephemeral, .c-message--sli_highlight_negative { | |
background: var(--background-hover); | |
} | |
/* "jump to.." */ | |
ts-jumper .p-jumper__help { | |
background: var(--background); | |
} | |
/* share alert dialog */ | |
.c-alert--inline, .c-alert--nested_box { | |
color: var(--text); | |
} | |
/* user groups */ | |
#user_groups_container .mention { | |
background-color: var(--background-hover); | |
} | |
/* share channel */ | |
.p-file_details__share_channel { | |
color: var(--text); | |
} | |
/* share message */ | |
.c-message_attachment__author--distinct { | |
color: var(--text); | |
} | |
/* 3.3.1 emoji picker */ | |
.c-menu.p-emoji_picker, .c-menu.p-emoji_picker div, .c-menu.p-emoji_picker h3 { | |
background: var(--background); | |
} | |
.p-emoji_picker__group_tab--active { | |
background: var(--background-elevated); | |
} | |
/* 3.3.1 body part */ | |
#client_body:not(.onboarding):not(.feature_global_nav_layout):before { | |
background: var(--background); | |
box-shadow: none; | |
content: none; | |
} | |
/* 3.3.1 search modal */ | |
.c-search_modal:not(.c-search_modal--primarysearch) .c-search__input_box { | |
background: var(--background); | |
} | |
.c-search__input_and_close { | |
border-bottom: 1px solid var(--border-dim); | |
} | |
.c-search_autocomplete__suggestion_item { | |
color: var(--text); | |
} | |
.token { | |
color: var(--text-bright) !important; | |
} | |
/* notification muter */ | |
.channel_prefs_body__section_header_title { | |
color: var(--text); | |
} | |
.channel_prefs_notifications_table { | |
color: var(--text); | |
} | |
.notification_prefs_icon:before { | |
color: var(--text); | |
} | |
.channel_prefs__muting_checkbox_label:not(.subtle_silver) { | |
color: var(--text) !important; | |
} | |
/* message dialogs */ | |
.c-message__sender { | |
color: var(--text); | |
} | |
.c-message--standalone { | |
border: 1px solid var(--border-dim); | |
} | |
/* message not allowed */ | |
#msg_input_message { | |
background-color: var(--bacground-elevated); | |
} | |
.internal_im_link, | |
.c-button.c-button--outline { | |
color: var(--text) !important; | |
} | |
/* unread counter */ | |
.p-channel_sidebar__channel--unread:not(.p-channel_sidebar__channel--muted):not(.p-channel_sidebar__channel--selected) .p-channel_sidebar__name { | |
color: var(--primary) !important; | |
} | |
/* help modal */ | |
.p-help_modal__footer { | |
background-color: var(--background); | |
} | |
.p-help_modal__list__item:focus, .p-help_modal__list__item:hover, .p-help_modal__list__item__focus { | |
background: var(--background-hover); | |
border: 1px solid var(--border-dim); | |
} | |
/* App channel */ | |
.channel_header .channel_header__tabs .channel_header__tab.--active { | |
color: var(--text); | |
} | |
.channel_header .channel_header__tabs .channel_header__tab:hover { | |
color: var(--background-light); | |
}.p-app_space { | |
background-color: var(--background-elevated); | |
} | |
.p-app_space_profile__info { | |
background-color: var(--background-elevated); | |
}.p-app_space__header { | |
color: var(--text); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment