nichus/sundry
1
0
Fork 0
Code Issues Wiki Activity

Fix font weight, remove some rounded borders, set a separate background color for the content

Browse Source
This commit is contained in:
Orien Vandenbergh 2017-10-31 14:43:56 -06:00
parent 63c3446978
commit 9a195b3d10
1 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
slack/orien.css
View File

@ -25,6 +25,7 @@ limitations under the License.
--text: #c3c4c5; --text: #c3c4c5;
--background: #23272a; --background: #23272a;
--background-elevated: #2c2f33; --background-elevated: #2c2f33;
--background-content: #36393e;
/* These should be less important: */ /* These should be less important: */
--background-hover: rgba(255, 255, 255, 0.1); --background-hover: rgba(255, 255, 255, 0.1);
@ -120,7 +121,7 @@ ts-jumper input[type="text"],
/* channel list */ /* channel list */
.p-channel_sidebar__channel, .p-channel_sidebar__channel,
.p-channel_sidebar__link { .p-channel_sidebar__link {
border-radius: 0 15px 15px 0; /* border-radius: 0 15px 15px 0; orien */
height: 24px !important; height: 24px !important;
} }
@ -179,7 +180,7 @@ li.active[class] span,
background-color: var(--background); background-color: var(--background);
border: 1px solid var(--border-bright); border: 1px solid var(--border-bright);
border-top: none; border-top: none;
border-radius: 0 0 15px 15px; /* border-radius: 0 0 15px 15px; orien */
} }
/*"more unreads" bottom */ /*"more unreads" bottom */
@ -187,7 +188,7 @@ li.active[class] span,
background-color: var(--background); background-color: var(--background);
border: 1px solid var(--border-bright); border: 1px solid var(--border-bright);
border-bottom: none; border-bottom: none;
border-radius: 15px 15px 0 0; /* border-radius: 15px 15px 0 0; orien */
} }
/*"unread mentions"*/ /*"unread mentions"*/
@ -218,12 +219,14 @@ li.active[class] span,
#client_body::before, #client_body:not(.onboarding):before { #client_body::before, #client_body:not(.onboarding):before {
border-bottom: 1px solid var(--border-dim) !important; border-bottom: 1px solid var(--border-dim) !important;
background: var(--background); background: var(--background-content);
box-shadow: none; box-shadow: none;
} }
#client_body, #messages_container.has_top_messages_banner:before { #client_body, #messages_container.has_top_messages_banner:before {
background: var(--background) !important; background: var(--background-content) !important;
font-family: "Helvetica Neue";
font-weight: medium;
} }
ts-message, .channel_title .channel_name, ts-jumper input[type="text"], ts-message, .channel_title .channel_name, ts-jumper input[type="text"],
@ -245,7 +248,7 @@ ts-jumper input[type="text"]::-webkit-input-placeholder {
.day_divider .day_divider_label, .day_divider .day_divider_label,
#convo_container .convo_flexpane_divider .reply_count { #convo_container .convo_flexpane_divider .reply_count {
color: var(--text) !important; color: var(--text) !important;
background-color: var(--background) !important; background-color: var(--background-content) !important;
border: 1px solid var(--border-bright) !important; border: 1px solid var(--border-bright) !important;
border-radius: 1rem; border-radius: 1rem;
} }
@ -271,7 +274,7 @@ ts-jumper input[type="text"]::-webkit-input-placeholder {
} }
textarea, input[type="text"], #file_comment_textarea { textarea, input[type="text"], #file_comment_textarea {
background-color: var(--background) !important; background-color: var(--background-content) !important;
border-color: var(--border-dim) !important; border-color: var(--border-dim) !important;
color: var(--text) !important; color: var(--text) !important;
} }
@ -285,8 +288,6 @@ ts-message {
border-radius: 5px; border-radius: 5px;
margin: 1px 5px !important; margin: 1px 5px !important;
box-shadow: none !important; box-shadow: none !important;
font-family: "Helvetica Neue";
font-weight: bold;
} }
ts-message:hover { ts-message:hover {
@ -300,7 +301,7 @@ ts-message:hover {
.bot_label { .bot_label {
padding: 0 4px !important; padding: 0 4px !important;
border-radius: 3px !important; border-radius: 3px !important;
background: var(--background) !important; background: var(--background-content) !important;
border: 1px solid var(--border-bright); border: 1px solid var(--border-bright);
} }
@ -331,7 +332,7 @@ ts-message .action_hover_container .btn_msg_action,
#flex_contents .heading a, #flex_contents .heading a,
#flex_contents .heading_text, #flex_contents .heading_text,
#flex_contents .subheading { #flex_contents .subheading {
background: var(--background) !important; background: var(--background-content) !important;
color: var(--text) !important; color: var(--text) !important;
border-color: var(--border-dim); border-color: var(--border-dim);
} }
@ -361,7 +362,7 @@ ts-message .action_hover_container .btn_msg_action,
border-right: 1px solid var(--border-dim) !important; border-right: 1px solid var(--border-dim) !important;
} }
.ts_tip_float.btn_msg_action:hover { .ts_tip_float.btn_msg_action:hover {
background-color: var(--background) !important; background-color: var(--background-content) !important;
} }
#quick_switcher_btn{ #quick_switcher_btn{
@ -496,7 +497,7 @@ ts-message a.timestamp{
} }
.flexpane_redesign #member_mentions { .flexpane_redesign #member_mentions {
background-color: var(--background); background-color: var(--background-content);
} }
#details_tab .channel_page_section { #details_tab .channel_page_section {
@ -539,7 +540,7 @@ ts-message a.timestamp{
color: var(--text) !important; color: var(--text) !important;
} }
.file_preview_action.btn.ts_tip:hover, .file_preview_link.btn.file_comment_link:hover { .file_preview_action.btn.ts_tip:hover, .file_preview_link.btn.file_comment_link:hover {
background-color: var(--background) !important; background-color: var(--background-content) !important;
} }
/* user profile popup */ /* user profile popup */
@ -561,7 +562,7 @@ ts-mention.ts_tip
border: 1px solid var(--border-dim); border: 1px solid var(--border-dim);
padding: 2px 4px; padding: 2px 4px;
margin: 2px; margin: 2px;
border-radius: 10px; /* border-radius: 10px; orien */
} }
.app_preview_link_slug.ts_tip:hover, .app_preview_link_slug.ts_tip:hover,
.internal_member_link.ts_tip:hover, .internal_member_link.ts_tip:hover,
@ -590,7 +591,7 @@ ts-mention.ts_tip:hover
.rxn .emoji-sizer { .rxn .emoji-sizer {
background-color: transparent !important; background-color: transparent !important;
border-radius: 7px; /* border-radius: 7px; orien */
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0 0 0 -2px !important; margin: 0 0 0 -2px !important;
@ -631,7 +632,7 @@ ts-mention.ts_tip:hover
} }
.menu .p-emoji_picker__group_tab--active { .menu .p-emoji_picker__group_tab--active {
background-color: var(--background); background-color: var(--background-content);
color: var(--text-special); color: var(--text-special);
border-color: var(--border-bright); border-color: var(--border-bright);
border-width: 1px 1px 2px 1px; border-width: 1px 1px 2px 1px;
@ -696,7 +697,7 @@ ts-mention.ts_tip:hover
/* threads */ /* threads */
ts-message .reply_bar:hover { ts-message .reply_bar:hover {
background: var(--background) !important; background: var(--background-content) !important;
border: 1px solid var(--border-dim) !important; border: 1px solid var(--border-dim) !important;
} }
/* editor in thread reply */ /* editor in thread reply */
@ -746,7 +747,7 @@ ts-message .reply_bar:hover {
} }
#threads_msgs_scroller_div, ts-thread { #threads_msgs_scroller_div, ts-thread {
background-color: var(--background); background-color: var(--background-content);
} }
ts-thread .thread_header .thread_channel_name a { ts-thread .thread_header .thread_channel_name a {
@ -759,7 +760,7 @@ ts-thread .thread_header .thread_channel_name a {
ts-thread .thread_messages, ts-thread .thread_messages,
.reply_input_container .ql-container { .reply_input_container .ql-container {
background-color: var(--background); background-color: var(--background-content);
border-color: var(--border-dim); border-color: var(--border-dim);
} }
@ -790,7 +791,7 @@ ts-thread .view_all_replies_container:hover {
background: transparent; background: transparent;
} }
#fs_modal .fs_modal_file_viewer_content .viewer { #fs_modal .fs_modal_file_viewer_content .viewer {
background: var(--background); background: var(--background-content);
} }
.fs_modal_file_viewer_header .control_btn { .fs_modal_file_viewer_header .control_btn {
color: var(--text) !important; color: var(--text) !important;
@ -832,7 +833,7 @@ ts-thread .view_all_replies_container:hover {
.unread_group_header, .unread_group_header,
.sli_briefing, .sli_briefing__header, .sli_briefing__title, .sli_briefing, .sli_briefing__header, .sli_briefing__title,
.sli_briefing_view__footer_title, .bottom_mark_all_read { .sli_briefing_view__footer_title, .bottom_mark_all_read {
background-color: var(--background); background-color: var(--background-content);
color: var(--text); color: var(--text);
border-color: var(--border-dim); border-color: var(--border-dim);
} }
@ -843,7 +844,7 @@ ts-thread .view_all_replies_container:hover {
/* scroller for threads & unreads */ /* scroller for threads & unreads */
#threads_msgs_scroller_div:not(.loading):before { #threads_msgs_scroller_div:not(.loading):before {
background: var(--background); background: var(--background-content);
} }
/* putting this on so many elements might cause performance issues but #yolo */ /* putting this on so many elements might cause performance issues but #yolo */
@ -863,7 +864,7 @@ div::-webkit-scrollbar-thumb {
/* thread side panel */ /* thread side panel */
#mentions_scroller { #mentions_scroller {
background: var(--background) !important; background: var(--background-content) !important;
color: var(--text) !important; color: var(--text) !important;
} }
@ -903,19 +904,19 @@ div::-webkit-scrollbar-thumb {
/* Snippets */ /* Snippets */
select { select {
background-color: var(--background); background-color: var(--background-content);
color: var(--text); color: var(--text);
border-color: var(--border-dim); border-color: var(--border-dim);
} }
.CodeMirror, .CodeMirror .CodeMirror-gutters, .CodeMirror-gutter { .CodeMirror, .CodeMirror .CodeMirror-gutters, .CodeMirror-gutter {
background-color: var(--background) !important;; background-color: var(--background-content) !important;;
border-color: var(--border-bright); border-color: var(--border-bright);
color: var(--text); color: var(--text);
} }
.CodeMirror .CodeMirror-line { .CodeMirror .CodeMirror-line {
background-color: var(--background); background-color: var(--background-content);
} }
.CodeMirror-cursor { .CodeMirror-cursor {