From bce2c16a6f1986fc567007be1cf1f28241701f78 Mon Sep 17 00:00:00 2001 From: Matt Miraldi Date: Thu, 28 Mar 2019 11:35:55 -0700 Subject: [PATCH 1/5] Body style Added body and hr elements to css, mostly for inheritance --- custom.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/custom.css b/custom.css index d2fbf4c..dda1ec8 100644 --- a/custom.css +++ b/custom.css @@ -40,6 +40,15 @@ 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); } From b1624e3917afc3fcf22f6798d0ab66be716a238c Mon Sep 17 00:00:00 2001 From: Matt Miraldi Date: Thu, 28 Mar 2019 12:00:40 -0700 Subject: [PATCH 2/5] New message elements Added new channel and message elements; not sure which version of Slack introduced these elements --- custom.css | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/custom.css b/custom.css index dda1ec8..6c4be3d 100644 --- a/custom.css +++ b/custom.css @@ -113,9 +113,60 @@ __TODO-highlight-indicator { #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 { +#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; } +.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, +.p-threads_view__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); +} + +.c-message_attachment__border { + background-color: var(--background-elevated) !important; +} +.c-member_slug--link { + background: var(--background-elevated); +} .channel_header, #col_messages, #footer { box-shadow: none; From 1af531bba196c1ab63a821543261c6bd85177c04 Mon Sep 17 00:00:00 2001 From: Matt Miraldi Date: Thu, 28 Mar 2019 12:02:10 -0700 Subject: [PATCH 3/5] Button styles Added button styles --- custom.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/custom.css b/custom.css index 6c4be3d..0bbd665 100644 --- a/custom.css +++ b/custom.css @@ -172,6 +172,17 @@ ts-jumper input[type="text"], 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 { From efbec45467a00b849acdfada98300d284258d818 Mon Sep 17 00:00:00 2001 From: Matt Miraldi Date: Thu, 28 Mar 2019 12:16:39 -0700 Subject: [PATCH 4/5] Placeholder and file names Added toolbar container class, increased priority of placeholder text color, and applied text color to file names --- custom.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/custom.css b/custom.css index 0bbd665..6ce4f28 100644 --- a/custom.css +++ b/custom.css @@ -282,7 +282,9 @@ li.active[class] span, color: inherit !important; } -#client_body::before, #client_body:not(.onboarding):before { +#client_body::before, +#client_body:not(.onboarding):before, +#client_body:not(.onboarding):not(.feature_global_nav_layout):before { border-bottom: 1px solid var(--border-dim) !important; background: var(--background); box-shadow: none; @@ -393,7 +395,8 @@ ts-message .action_hover_container .btn_msg_action, #flex_contents .heading, #flex_contents .heading a, #flex_contents .heading_text, -#flex_contents .subheading { +#flex_contents .subheading, +#flex_contents .toolbar_container { background: var(--background) !important; color: var(--text) !important; border-color: var(--border-dim); @@ -448,7 +451,7 @@ ts-message .action_hover_container .btn_msg_action, } .ql-placeholder { - color: var(--text); + color: var(--text) !important; } .ql-container.texty_single_line_input { @@ -605,6 +608,10 @@ ts-message a.timestamp{ 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 { From 3a0013529dce95f3b5ace15002f0e39a5cbaf019 Mon Sep 17 00:00:00 2001 From: Matt Miraldi Date: Thu, 28 Mar 2019 12:31:14 -0700 Subject: [PATCH 5/5] Thread styles Styles for threads and All Threads view --- custom.css | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/custom.css b/custom.css index 6ce4f28..c6bd3c4 100644 --- a/custom.css +++ b/custom.css @@ -769,6 +769,46 @@ 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); +} +.p-threads_view { + background-color: var(--background) !important; +} +.p-threads_view_root, +.p-threads_view_reply, +.p-threads_view__footer { + border-color: var(--border-dim) !important; + color: var(--text); +} +.p-threads_view_reply--new_reply { + background-color: var(--background-light) !important; + color: var(--text-bright); +} +.p-threads_view__default_background, +.p-threads_view__divider_label { + background-color: var(--background-elevated) !important; + color: var(--text); +} +.p_threads_view_load_newer_button, +.p_threads_view_load_older_button { + border-color: var(--border-dim) !important; + background-color: var(--background) !important; +} +.p-threads_view_header__permalink, +.p-threads_flexpane__header_channel_name { + color: var(--text-special) !important; +} +.p-threads_footer__input .p-message_input_field, +.p-threads_footer__input .p-message_input_file_button { + background: var(--background) !important; +} + /* editor in thread reply */ #convo_tab .message_input, #convo_tab textarea#msg_text { color: var(--text) !important;