diff --git a/scss/main.scss b/scss/main.scss index 3e5712ef..5948d5b8 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -4,72 +4,69 @@ @import "helpers/mixins"; @import "layout/base"; - @import "layout/sidebar"; @import "layout/monkey-scroll"; + @import "layout/sidebar"; @import "modules/loader"; @import "modules/inputs/base"; - @import "modules/inputs/chzn"; @import "modules/inputs/filter-select"; @import "modules/inputs/messaging"; @import "modules/inputs/toggle"; @import "modules/menu/base"; - @import "modules/menu/team"; - @import "modules/menu/file"; - @import "modules/menu/popover"; - @import "modules/menu/calendar"; @import "modules/menu/autocomplete"; - @import "modules/menu/tabcomplete"; - @import "modules/menu/flex"; - @import "modules/menu/filters"; + @import "modules/menu/calendar"; @import "modules/menu/direct-messaging"; + @import "modules/menu/filters"; + @import "modules/menu/popover"; + @import "modules/menu/tabcomplete"; + @import "modules/menu/team"; @import "modules/header/base"; - @import "modules/header/search"; - @import "modules/header/day-divider"; @import "modules/header/banners"; + @import "modules/header/day-divider"; + @import "modules/header/search"; @import "modules/header/topic-editor"; @import "modules/messaging/base"; - @import "modules/messaging/light"; + @import "modules/messaging/attachments"; + @import "modules/messaging/banners"; + @import "modules/messaging/code"; @import "modules/messaging/dense"; + @import "modules/messaging/light"; @import "modules/messaging/overlay"; - @import "modules/messaging/banners"; - @import "modules/messaging/attachments"; - @import "modules/messaging/threads"; @import "modules/messaging/quotes"; - @import "modules/messaging/code"; + @import "modules/messaging/threads"; @import "modules/messaging/unreads"; @import "modules/flexpane/base"; @import "modules/flexpane/channel"; - @import "modules/flexpane/threads"; - @import "modules/flexpane/search"; + @import "modules/flexpane/files"; + @import "modules/flexpane/groups"; @import "modules/flexpane/mentions"; @import "modules/flexpane/reactions"; - @import "modules/flexpane/files"; + @import "modules/flexpane/search"; @import "modules/flexpane/team"; + @import "modules/flexpane/threads"; @import "modules/flexpane/whats-new"; @import "modules/emojis/base"; @import "modules/emojis/reactions"; @import "modules/modals/base"; + @import "modules/modals/call"; @import "modules/modals/channel"; @import "modules/modals/channels"; @import "modules/modals/direct-messages"; @import "modules/modals/file"; - @import "modules/modals/profile"; - @import "modules/modals/preferences"; - @import "modules/modals/invite"; - @import "modules/modals/omnibox"; - @import "modules/modals/share"; - @import "modules/modals/quick-search"; - @import "modules/modals/call"; @import "modules/modals/help"; + @import "modules/modals/invite"; @import "modules/modals/keyboard-shortcuts"; + @import "modules/modals/preferences"; + @import "modules/modals/profile"; + @import "modules/modals/quick-search"; + @import "modules/modals/share"; @import "modules/tooltips/base"; @import "modules/tooltips/coachmarks"; @@ -83,8 +80,8 @@ @import "pages/oauth"; @import "pages/pricing"; @import "pages/spaces"; - @import "pages/website"; - @import "pages/status"; @import "pages/split"; + @import "pages/status"; + @import "pages/website"; } diff --git a/scss/modules/_color-overrides.scss b/scss/modules/_color-overrides.scss index 647aeed5..27a6d211 100644 --- a/scss/modules/_color-overrides.scss +++ b/scss/modules/_color-overrides.scss @@ -2,6 +2,7 @@ .dull_grey, .flat_grey, .blue_link, +.slate_blue, .charcoal_grey, .ts_tip_tip .subtle_silver { color: $base-font-color !important; @@ -9,11 +10,14 @@ .greigh, .sky_blue, +.severe_grey, .havana_blue, +.burnt_violet, .plastic_grey, +.cloud_silver, +.subtle_silver, .indifferent_grey, -.old_petunia_grey, -.cloud_silver { +.old_petunia_grey { color: $color-highlight !important; } @@ -21,7 +25,8 @@ color: $base-link-color !important; } -.candy_red_bg { +.candy_red_bg, +.mustard_yellow { background-color: $color-red !important; } diff --git a/scss/modules/_hacks.scss b/scss/modules/_hacks.scss index 43fb7a97..59f17955 100644 --- a/scss/modules/_hacks.scss +++ b/scss/modules/_hacks.scss @@ -11,13 +11,3 @@ -webkit-filter: brightness(0.6) contrast(3) invert(1) sepia(0.5); filter: brightness(0.6) contrast(3) invert(1) sepia(0.5); } - -.para_menu .options a span, -.para_menu a.trigger.pilcrow.active, -.para_menu a.trigger.pilcrow:hover, -.textstyle_menu .buttons a span, -.textstyle_menu.style a span { - -moz-filter: brightness(10); - -webkit-filter: brightness(10); - filter: brightness(10); -} diff --git a/scss/modules/_loader.scss b/scss/modules/_loader.scss index 7f1e97e6..77180780 100644 --- a/scss/modules/_loader.scss +++ b/scss/modules/_loader.scss @@ -4,10 +4,6 @@ } } -#self_help_link_div { - right: 110px !important; -} - #loading_welcome { background-image: none; } diff --git a/scss/modules/emojis/_base.scss b/scss/modules/emojis/_base.scss index a2ddf960..4db5350b 100644 --- a/scss/modules/emojis/_base.scss +++ b/scss/modules/emojis/_base.scss @@ -11,10 +11,6 @@ background: rgba($color-base, 0.95); } - #emoji_div_default_rxns { - border-bottom: 1px solid $color-shade-dark; - } - #emoji_preview_text { background: $color-shade-darkest; color: $base-font-color; diff --git a/scss/modules/flexpane/_base.scss b/scss/modules/flexpane/_base.scss index 2c526ec2..7f2fdbd0 100644 --- a/scss/modules/flexpane/_base.scss +++ b/scss/modules/flexpane/_base.scss @@ -5,10 +5,6 @@ #flex_contents { background: $color-base; - .monkey_scroll_hider { - background: $color-base; - } - .heading { background: lighten($color-shade-darkest, 10%); color: $base-link-color; diff --git a/scss/modules/flexpane/_channel.scss b/scss/modules/flexpane/_channel.scss index 5e8d2df4..6ce044b4 100644 --- a/scss/modules/flexpane/_channel.scss +++ b/scss/modules/flexpane/_channel.scss @@ -11,12 +11,6 @@ } } - &.feature_channel_details { - .channel_page_section { - border-top: 1px solid $color-shade-dark !important; - } - } - hr { border-top-color: $color-shade-dark; } @@ -61,22 +55,6 @@ } } - .channel_page_member_row { - color: $base-font-color; - - a { - color: $base-link-color; - } - - &.away { - color: $base-font-color; - - a { - color: $base-link-color; - } - } - } - .pinned_item:hover { border-color: $color-shade-light; } @@ -92,6 +70,22 @@ } } +.channel_page_member_row { + color: $base-font-color; + + a { + color: $base-link-color; + } + + &.away { + color: $base-font-color; + + a { + color: $base-link-color; + } + } +} + .pinned_item { color: $base-font-color; diff --git a/scss/modules/flexpane/_files.scss b/scss/modules/flexpane/_files.scss index d60de43c..f73e60cf 100644 --- a/scss/modules/flexpane/_files.scss +++ b/scss/modules/flexpane/_files.scss @@ -263,18 +263,6 @@ html.no_touch a.filetype_button_web:hover { } } -.file_page_user { - color: $base-font-color; - - .member { - color: $base-font-color !important; - } - - .date { - color: $color-highlight; - } -} - .file_page_meta { color: $color-highlight; } diff --git a/scss/modules/flexpane/_search.scss b/scss/modules/flexpane/_search.scss index 8f157cb7..2aad3945 100644 --- a/scss/modules/flexpane/_search.scss +++ b/scss/modules/flexpane/_search.scss @@ -26,73 +26,6 @@ span.match { padding: 3px; } -#search_widget { - background: padding-box $color-shade-darkest; - box-shadow: 0 1px 3px $color-shadow-dark; - color: $base-font-color; - - .results_block { - background: $color-shade-dark; - box-shadow: 0 1px 1px $color-shadow-light; - } - - .results_heading { - background: $color-shade-darkest; - color: $base-font-color; - } - - a.results_heading:hover { - background: $color-base; - } - - .search_widget_item { - a { - color: $base-link-color; - } - - &:hover a { - color: $base-link-color-active; - } - - .result_meta a { - color: $color-highlight; - - &:hover { - color: $base-font-color; - } - } - } -} - -.search_widget_item { - border-top: 1px solid $color-shade-light; - color: $base-font-color; - - &:hover { - background: $color-shade-light; - } - - .result_meta { - color: $base-font-color; - } -} - -#search_options { - background: $color-base; - border-top: 1px solid $color-shade-dark; - color: $base-font-color; -} - -#advanced_options_toggle:hover { - color: $base-link-color-active; -} - -#advanced_options { - .active .arrow_down { - color: $base-link-color; - } -} - #search_filters { a { background: $color-base; @@ -216,9 +149,7 @@ span.match { } } -.extract_expand_icons, -.experiment_search_limit_extracts .extract_expand_icons, -.search_result_with_extract:hover .extract_expand_icons { +.extract_expand_icons { color: $base-link-color; } diff --git a/scss/modules/flexpane/_team.scss b/scss/modules/flexpane/_team.scss index f15a729b..9d9909a8 100644 --- a/scss/modules/flexpane/_team.scss +++ b/scss/modules/flexpane/_team.scss @@ -1,10 +1,10 @@ -#member_preview_scroller a:not(.member_name), -.team_list_item a:not(.member_name) { +#member_preview_scroller a:not(.member_name):not(.current_status_preset_option), +.team_list_item a:not(.member_name):not(.current_status_preset_option) { color: $base-link-color; -} -#member_preview_scroller a:not(.member_name):hover { - color: $base-link-color-active; + &:hover { + color: $base-link-color-active; + } } #member_preview_scroller, @@ -120,10 +120,6 @@ border-top: 1px solid $color-shade-light; color: $base-link-color; - a:not(.member_name):hover { - color: $base-link-color-active; - } - .member_name { color: $base-font-color; } diff --git a/scss/modules/inputs/_chzn.scss b/scss/modules/inputs/_chzn.scss deleted file mode 100644 index d20c458a..00000000 --- a/scss/modules/inputs/_chzn.scss +++ /dev/null @@ -1,95 +0,0 @@ -.chzn-container .chzn-drop { - background: $color-base; - border: 1px solid $color-shade-mid; - box-shadow: 0 1px 3px rgba($black, 0.15); -} - -.chzn-container-single { - .chzn-single { - background-color: $color-base; - background-image: linear-gradient($color-base 20%, $color-shade-dark 50%, $color-base 52%, $color-shade-dark 100%); - border: 1px solid $color-shade-mid; - box-shadow: 0 0 3px $color-base inset, 0 1px 1px rgba($black, 0.1); - color: $base-font-color; - } - - .chzn-default { - color: $base-font-color; - } - - .chzn-search input { - border: 1px solid $color-shade-mid; - } -} - -.chzn-container-multi .chzn-choices { - background-color: $color-base; - border: 1px solid $color-shade-mid; - - .search-field { - input { - color: $base-font-color; - } - - .default { - color: $base-font-color; - } - } - - .search-choice { - background-color: $color-shade-lightest; - border: 1px solid $color-shade-mid; - color: $base-font-color; - - &.search-choice-disabled { - background-color: $color-shade-mid; - background-image: linear-gradient(top, $color-shade-light 20%, $color-shade-mid 50%); - border: 1px solid $color-shade-mid; - color: $color-highlight; - } - } - - .search-choice-focus { - background: $color-shade-light; - } -} - -.chzn-container .chzn-results { - .highlighted { - background-color: $color-shade-light; - color: $base-font-color; - } - - li em { - background: $color-shade-lightest; - } - - .no-results { - background: $color-shade-lightest; - } - - .group-result { - color: $base-font-color; - } -} - -.chzn-container .chzn-results-scroll { - background: $color-base; -} - -.chzn-container-active { - .chzn-single { - border: 1px solid $color-shade-lightest; - } - - &.chzn-with-drop .chzn-single { - background-color: $color-shade-mid; - background-image: linear-gradient($color-shade-mid 20%, $color-base 80%); - border: 1px solid $color-shade-mid; - box-shadow: 0 1px 0 $color-base inset; - } - - .chzn-choices .search-field input { - color: $base-font-color !important; - } -} diff --git a/scss/modules/inputs/_filter-select.scss b/scss/modules/inputs/_filter-select.scss index 9664ab3e..47f0c85f 100644 --- a/scss/modules/inputs/_filter-select.scss +++ b/scss/modules/inputs/_filter-select.scss @@ -1,75 +1,61 @@ -$filter-selects: ( - filter_select: "fsl", - lazy_filter_select: "lfs" -); +.lazy_filter_select.default_style { + &.disabled { + background: $color-shade-dark; -@each $filter, $abbr in $filter-selects { - .#{$filter}.default_style { - &.disabled { - background: $color-shade-dark; - - input.#{$abbr}_input { - background: $color-shade-lightest; - } + input.lfs_input { + background: $color-shade-lightest; } + } - .#{$abbr}_input_container { - border: 1px solid $color-shade-darkest; - - &.active, - &:hover { - border-color: $color-shade-dark; - } + .lfs_input_container { + border: 1px solid $color-shade-darkest; - &.active { - box-shadow: 0 0 7px rgba($color-base, 0.15); - } + &.active, + &:hover { + border-color: $color-shade-dark; } - .#{$abbr}_list_container { - background: $color-base; - border: 1px solid $color-shade-darkest; - box-shadow: 0 0 3px $color-shadow-dark; + &.active { + box-shadow: 0 0 7px rgba($color-base, 0.15); } + } - .#{$abbr}_list .#{$abbr}_item { - &.selected { - color: $base-font-color; - } - - &.disabled { - color: $base-font-color; - } + .lfs_list_container { + background: $color-base; + border: 1px solid $color-shade-darkest; + box-shadow: 0 0 3px $color-shadow-dark; + } - &.active { - background-color: $color-shade-darkest; - border-color: $color-shade-dark; - color: $base-font-color; - } + .lfs_list .lfs_item { + &.selected { + color: $base-font-color; } - .#{$abbr}_token { - background: $color-base; - border: 1px solid $color-shade-darkest; + &.disabled { color: $base-font-color; - - &::after { - color: $base-font-color; - } } - &.single .#{$abbr}_input_container { - &.active::after, - &:hover::after { - color: $base-font-color; - } + &.active { + background-color: $color-shade-darkest; + border-color: $color-shade-dark; + color: $base-font-color; } } -} -.filter_select.default_style { - .fsl_paginate .fsl_paginate_back, - .fsl_paginate_forward { + .lfs_token { + background: $color-base; + border: 1px solid $color-shade-darkest; color: $base-font-color; + + &::after { + color: $base-font-color; + } + } + + &.single .lfs_input_container { + &.active::after, + &:hover::after { + color: $base-font-color; + } } } diff --git a/scss/modules/inputs/_messaging.scss b/scss/modules/inputs/_messaging.scss index e26e20f1..0f5443df 100644 --- a/scss/modules/inputs/_messaging.scss +++ b/scss/modules/inputs/_messaging.scss @@ -1,37 +1,4 @@ -#message-input { - &.offline, - &.disabled { - background-color: $color-shade-dark !important; - } -} - -#message-input-message { - color: $color-highlight; - - @if global-variable-exists(base-font-family) { - font-family: $base-font-family; - } -} - -#messages-input-container #message-input { - &.msg_input_placeholder { - @include placeholder; - } -} - -#message_edit_form, -#messages-input-container { - #message-input { - background: padding-box $color-shade-light; - border-color: $color-shade-mid; - border-left: 0; - color: $base-font-color; - - &:focus { - border-color: $color-shade-dark; - } - } - +#message_edit_form { .emo_menu { color: rgba($base-font-color, 0.3); @@ -45,6 +12,10 @@ .emo_menu { color: rgba($base-font-color, 0.6); } + + #primary_file_button:not(:hover) { + border-color: $color-shade-dark; + } } &.offline { @@ -81,6 +52,10 @@ border-color: $color-shade-mid; color: $base-font-color; + @if global-variable-exists(base-font-family) { + font-family: $base-font-family; + } + &:focus { border-color: $color-shade-dark; @@ -107,11 +82,6 @@ color: $base-font-color; } -#message_edit_form.focus #primary_file_button:not(:hover), -#messages-input-container.focus #primary_file_button:not(:hover) { - border-color: $color-shade-dark; -} - #primary_file_button { background: padding-box $color-shade-light; border-color: $color-shade-mid; diff --git a/scss/modules/menu/_autocomplete.scss b/scss/modules/menu/_autocomplete.scss index 6bf639a6..6ecd0922 100644 --- a/scss/modules/menu/_autocomplete.scss +++ b/scss/modules/menu/_autocomplete.scss @@ -5,124 +5,14 @@ color: $base-font-color; } - ol { - li { - &.selected { - background-color: $color-shade-lightest; - color: $base-font-color; - - &:hover { - background-color: $color-shade-lightest; - color: $base-font-color; - - .keyword_placeholder, - .username, - &.keyword_match .modifier { - color: $color-highlight; - } - } - - .keyword_placeholder, - .username, - &.keyword_match .modifier { - color: $color-highlight; - } - - .ts_icon, - &:hover .ts_icon { - color: $color-highlight !important; - } - } - - &:hover { - background-color: transparent; - } - - .ellipsis_icon, - .history_icon, - .modifier_icon { - color: $color-highlight; - } - } - } - - footer, - header { - background-color: transparent; - - .keyword::before, - .modifier::before { - background: $color-shade-lightest; - border: 1px solid $color-shade-light; - color: $base-font-color; - } - - .selected { - .keyword::before, - .modifier::before { - background: rgba($color-shade-light, 0.25); - border: $color-shade-lightest; - } - } - - .modifier.incomplete::before { - background: $color-shade-dark; - border: 1px solid $color-shade-darkest; - } - } - .no_results { color: $base-font-color; } - .keyword_match .modifier, - .username { - color: $color-highlight; - } - - .keyword_placeholder { + .keyword_match .modifier { color: $color-highlight; } - .history { - .keyword::before { - background: $color-shade-lightest; - border: 1px solid $color-shade-light; - color: $base-font-color; - } - - .modifier { - &::before { - background: $color-shade-lightest; - border: 1px solid $color-shade-light; - color: $base-font-color; - } - - &.incomplete::before { - background: $color-shade-dark; - border: 1px solid $color-shade-darkest; - } - } - - .selected { - .keyword::before, - .modifier::before { - background: rgba($color-shade-light, 0.25); - border: $color-shade-lightest; - } - } - } - - .delete_history_item_target_area { - .delete_icon { - color: $base-link-color; - } - - &:hover .ts_icon.delete_icon { - color: $color-red !important; - } - } - .boxed { background: $color-base; border: 1px solid $color-shade-dark; @@ -161,8 +51,33 @@ } } - li.highlighted .muted_text { - color: $color-highlight; + li.highlighted { + .result_item_btn { + background: $color-shade-dark; + color: $base-font-color; + text-shadow: 0 1px 0 $color-shadow-light; + } + + .modifier_icon { + color: $color-highlight; + } + + .action_btn { + color: $base-font-color; + } + + .delete_btn { + color: $base-link-color; + + &:focus, + &:hover { + color: $color-red; + } + } + + .muted_text { + color: $color-highlight; + } } &:not(.keyboard_active) li { @@ -197,29 +112,6 @@ } } - li.highlighted .result_item_btn { - background: $color-shade-dark; - color: $base-font-color; - text-shadow: 0 1px 0 $color-shadow-light; - } - - li.highlighted .modifier_icon { - color: $color-highlight; - } - - li.highlighted .action_btn { - color: $base-font-color; - } - - li.highlighted .delete_btn { - color: $base-link-color; - - &:focus, - &:hover { - color: $color-red; - } - } - .muted_text { color: $color-highlight; } @@ -261,75 +153,6 @@ } } -#autocomplete_menu:not(.search_menu) { - footer, - header { - background-color: transparent; - - .keyword::before, - .modifier::before { - background: $color-shade-lightest; - border: 1px solid $color-shade-light; - color: $base-font-color; - } - - .selected { - .keyword::before, - .modifier::before { - background: rgba($color-shade-light, 0.25); - border: $color-shade-lightest; - } - } - - .modifier.incomplete::before { - background: $color-shade-dark; - border: 1px solid $color-shade-darkest; - } - } - - ol { - li { - &.selected { - background-color: $color-shade-lightest; - color: $base-font-color; - - &:hover { - background-color: $color-shade-lightest; - color: $base-font-color; - } - - .username, - &:hover .username, - &.keyword_match .modifier, - &:hover.keyword_match .modifier, - .keyword_placeholder, - &:hover .keyword_placeholder { - color: $color-highlight; - } - - .ts_icon, - &:hover .ts_icon { - color: $color-highlight !important; - } - } - - &:hover { - background-color: transparent; - } - - .ellipsis_icon, - .history_icon, - .modifier_icon { - color: $color-highlight; - } - } - } - - .keyword_placeholder { - color: $color-highlight; - } -} - .search_light_grey { color: $base-font-color !important; } diff --git a/scss/modules/menu/_base.scss b/scss/modules/menu/_base.scss index ba70331f..b73a6dfa 100644 --- a/scss/modules/menu/_base.scss +++ b/scss/modules/menu/_base.scss @@ -92,10 +92,6 @@ &.divider { border-bottom: 2px solid $color-shade-mid; } - - &.double-divider { - border-bottom: 4px solid $color-shade-mid; - } } &:not(.keyboard_active) ul li:hover:not(.disabled) a { diff --git a/scss/modules/menu/_direct-messaging.scss b/scss/modules/menu/_direct-messaging.scss index 9c7fe037..c19c19bf 100644 --- a/scss/modules/menu/_direct-messaging.scss +++ b/scss/modules/menu/_direct-messaging.scss @@ -8,11 +8,3 @@ } } } - -#about_dms_link { - color: $base-link-color; - - &:hover { - color: $base-link-color-active; - } -} diff --git a/scss/modules/menu/_file.scss b/scss/modules/menu/_file.scss deleted file mode 100644 index fd98bb7c..00000000 --- a/scss/modules/menu/_file.scss +++ /dev/null @@ -1,26 +0,0 @@ -#menu.file_menu { - box-shadow: 0 3px 8px $color-shadow-dark; - - ul li.highlighted, - &:not(.keyboard_active) ul li:hover:not(.disabled) { - background: $color-shade-dark; - - > a { - color: $base-link-color-active; - } - - i.file_menu_icon { - color: $base-font-color; - } - } - - ul li { - > a { - color: $base-link-color; - } - - i.file_menu_icon { - color: $color-highlight; - } - } -} diff --git a/scss/modules/menu/_filters.scss b/scss/modules/menu/_filters.scss index 98a8172d..ec097d48 100644 --- a/scss/modules/menu/_filters.scss +++ b/scss/modules/menu/_filters.scss @@ -1,5 +1,3 @@ -#dms_filter, -#dms_filter_show_all, #file_member_filter { background: $color-shade-darkest; } @@ -16,17 +14,12 @@ } } - #dms_filter .member_filter, - #file_member_filter .member_filter { - border-color: $color-shade-light; - } - #file_member_filter { border-color: $color-shade-light; - } - #dms_filter .member_filter:focus { - border-color: $color-shade-light; + .member_filter { + border-color: $color-shade-light; + } } .team_tabs_container { @@ -51,15 +44,3 @@ .filter_header { background-color: $color-base; } - -.filter_select.default_style .fsl_token { - &.fsl_token_default_group { - background-color: $color-shade-dark; - border-color: $color-shade-dark; - } - - &.fsl_token_user_group { - background-color: $color-shade-lightest; - border-color: $color-shade-lightest; - } -} diff --git a/scss/modules/menu/_flex.scss b/scss/modules/menu/_flex.scss deleted file mode 100644 index 4ac9314f..00000000 --- a/scss/modules/menu/_flex.scss +++ /dev/null @@ -1,34 +0,0 @@ -#flex_menu_footer.menu_footer { - background: $color-base !important; -} - -#flex_menu_header.menu_simple_header { - background: $color-base !important; -} - -#menu { - &.flex_menu { - background-color: $color-base; - box-shadow: 0 0 1px $color-shadow-light, 0 2px 8px $color-shadow-medium; - } - - .flexpane_menu_item { - a { - color: $base-link-color; - } - - &.highlighted a { - background: $color-shade-lightest; - border-bottom-color: $color-shade-light; - color: $base-link-color-active; - text-shadow: 0 1px 0 $color-shadow-light; - } - } - - &:not(.keyboard_active) .flexpane_menu_item:hover a { - background: $color-shade-light; - border-bottom-color: $color-shade-light; - color: $base-link-color-active; - text-shadow: 0 1px 0 $color-shadow-light; - } -} diff --git a/scss/modules/menu/_popover.scss b/scss/modules/menu/_popover.scss index 679ef1e3..52a2cd3f 100644 --- a/scss/modules/menu/_popover.scss +++ b/scss/modules/menu/_popover.scss @@ -1,8 +1,3 @@ -#menu.popover_menu { - background-color: $color-base; - border-top: 1px solid $color-shade-light; -} - .popover_menu { background-color: $color-base; border-top: 1px solid $color-shade-light; diff --git a/scss/modules/menu/_tabcomplete.scss b/scss/modules/menu/_tabcomplete.scss index 3355de5e..3eac380b 100644 --- a/scss/modules/menu/_tabcomplete.scss +++ b/scss/modules/menu/_tabcomplete.scss @@ -1,49 +1,3 @@ -#chat_input_tab_ui { - background: $color-base; - border: 1px solid $color-shade-dark; - box-shadow: 0 1px 15px $color-shadow-dark; - - #chat_input_tab_ui_header { - background: padding-box $color-shade-darkest; - border-bottom: 1px solid $color-shade-dark; - color: $base-font-color; - text-shadow: 0 1px $color-shadow-light; - } - - ul { - li.chat_input_tab_item { - border-bottom: 1px solid $color-shade-dark; - - &.active, - &:hover { - background: $color-shade-light; - border-bottom-color: $color-shade-dark; - color: $base-font-color; - text-shadow: 0 1px $color-shadow-light; - - span { - color: $base-font-color !important; - } - } - } - - &.type_emoji li { - color: $base-font-color; - } - - &.type_members { - .broadcast_info, - .realname { - color: $color-highlight; - } - } - - &.type_channels .not_in_channel { - color: $color-highlight; - } - } -} - .tab_complete_ui { background: $color-base; border: 1px solid $color-shade-dark; diff --git a/scss/modules/menu/_team.scss b/scss/modules/menu/_team.scss index 3670ab5b..e366f8dd 100644 --- a/scss/modules/menu/_team.scss +++ b/scss/modules/menu/_team.scss @@ -11,13 +11,8 @@ i { color: $base-font-color; } - - #current_user_name { - color: $base-font-color; - } } - #team_menu_user, i { color: $color-highlight; } @@ -34,26 +29,10 @@ } } -#team_header_user_name { +#team_menu_user { color: $color-highlight; } -#menu.team_menu { - box-shadow: 0 3px 8px $color-shadow-medium; - - ul li.highlighted, - &:not(.keyboard_active) ul li:hover { - > a { - background: $color-shade-light; - color: $base-link-color-active; - } - } - - ul li > a { - color: $base-link-color; - } -} - #im-list li.member.active .presence, #starred-list li.member.active .presence { color: $base-font-color; diff --git a/scss/modules/messaging/_attachments.scss b/scss/modules/messaging/_attachments.scss index 4aefe347..17abc490 100644 --- a/scss/modules/messaging/_attachments.scss +++ b/scss/modules/messaging/_attachments.scss @@ -77,8 +77,6 @@ .msg_inline_attachment_collapser, .msg_inline_attachment_expander, -.msg_inline_email_collapser, -.msg_inline_email_expander, .msg_inline_file_preview_collapser, .msg_inline_file_preview_expander, .msg_inline_img_collapser, @@ -105,10 +103,6 @@ } } -.msg_inline_file_preview_collapser.title_hidden { - color: $color-highlight; -} - .inline_attachment { span { &.attachment_author_name { @@ -317,17 +311,6 @@ } } -body:not(.feature_new_message_markup) .meta { - &.msg_inline_file_preview_toggler, - &.msg_inline_img_toggler { - a, - .member, - .service_link { - color: $base-link-color !important; - } - } -} - .post_body { ul { &.checklist { diff --git a/scss/modules/messaging/_banners.scss b/scss/modules/messaging/_banners.scss index 095f0275..636c0b7b 100644 --- a/scss/modules/messaging/_banners.scss +++ b/scss/modules/messaging/_banners.scss @@ -63,7 +63,6 @@ } #messages_container { - &.has_reply_banners.has_top_messages_banner #reply_banners::after, &:not(.has_reply_banners).has_top_messages_banner::before, &.has_top_messages_banner::before { background: none; diff --git a/scss/modules/messaging/_base.scss b/scss/modules/messaging/_base.scss index 8f9c7572..c1bb19e2 100644 --- a/scss/modules/messaging/_base.scss +++ b/scss/modules/messaging/_base.scss @@ -70,8 +70,7 @@ ts-message { color: rgba($base-font-color, 0.8); } - .action_hover_container, - .message_actions_container message_actions { + .action_hover_container { border: 1px solid $color-shade-dark; &:hover { @@ -155,7 +154,7 @@ ts-message { background: $color-shade-darkest; } -#conversation_container { +#convo_container { background-color: rgba($color-shade-dark, 0.85); #message_edit_container { @@ -219,15 +218,6 @@ ts-message { } } -#msg_input_overlay { - background: $color-base; - - #close_conversation { - background: rgba($black, 0.8); - color: $color-highlight; - } -} - #msgs_div { .unread_divider { hr { diff --git a/scss/modules/modals/_channels.scss b/scss/modules/modals/_channels.scss index 3301e7a4..ea8a3104 100644 --- a/scss/modules/modals/_channels.scss +++ b/scss/modules/modals/_channels.scss @@ -54,7 +54,6 @@ } #invite_members_container { - .fsl_input_container, .lfs_input_container { background: $color-shade-light; } diff --git a/scss/modules/modals/_file.scss b/scss/modules/modals/_file.scss index e85c1f76..c1a27e2f 100644 --- a/scss/modules/modals/_file.scss +++ b/scss/modules/modals/_file.scss @@ -91,21 +91,3 @@ color: $base-font-color; } } - -.mini_file_profile { - .meta_data { - color: $color-highlight; - } - - .author .member { - color: $color-highlight !important; - } - - .title { - color: $base-font-color; - } - - .bullet { - color: $color-highlight; - } -} diff --git a/scss/modules/modals/_omnibox.scss b/scss/modules/modals/_omnibox.scss deleted file mode 100644 index d7bcdd3d..00000000 --- a/scss/modules/modals/_omnibox.scss +++ /dev/null @@ -1,35 +0,0 @@ -#omnibox { - input { - border: 1px solid $color-shade-darkest; - } - - .omnibox_item { - &.selected { - background: $color-shade-light; - color: $base-font-color; - text-shadow: 0 1px 0 $color-shadow-light; - - .subtext { - color: $color-highlight; - } - } - - .subtext { - color: $color-highlight; - } - - .unread_highlight_cnt { - background: $color-red; - color: $base-font-color; - text-shadow: 0 1px 0 $color-shadow-light; - } - } - - a.omnibox_item { - color: $base-link-color; - } - - #omnibox_help { - color: $base-font-color; - } -} diff --git a/scss/modules/modals/_preferences.scss b/scss/modules/modals/_preferences.scss index 928cd4b6..7b0c086e 100644 --- a/scss/modules/modals/_preferences.scss +++ b/scss/modules/modals/_preferences.scss @@ -18,10 +18,6 @@ } } - #debug_prefs_dialog { - background: $color-shade-mid; - } - #prefs_themes { .theme_thumb { box-shadow: 0 1px 1px $color-shadow-medium; diff --git a/scss/modules/modals/_profile.scss b/scss/modules/modals/_profile.scss index d7d0b527..aabab81a 100644 --- a/scss/modules/modals/_profile.scss +++ b/scss/modules/modals/_profile.scss @@ -5,7 +5,7 @@ border: 1px solid $color-shade-darkest; } - .filter_select.disabled { + .lazy_filter_select.disabled { background: $color-shade-light; input { @@ -136,11 +136,6 @@ border: 1px solid $color-shade-darkest; } - .fsl_item { - background: $color-shade-mid; - border-color: $color-shade-mid; - } - &[data-type=options_list] { span::after { color: $color-highlight; @@ -189,7 +184,3 @@ } } } - -#edit_member_profile_header_container { - border-bottom: 1px solid $color-shade-light; -} diff --git a/scss/modules/tooltips/_base.scss b/scss/modules/tooltips/_base.scss index 4b0fd1df..22387d92 100644 --- a/scss/modules/tooltips/_base.scss +++ b/scss/modules/tooltips/_base.scss @@ -46,27 +46,3 @@ } } } - -.tooltip-inner { - background-color: $color-shade-lightest; - color: $base-font-color; -} - -.tooltip { - &.top .tooltip-arrow, - &.top-left .tooltip-arrow { - border-top-color: $color-shade-lightest; - } - - &.right .tooltip-arrow { - border-right-color: $color-shade-lightest; - } - - &.left .tooltip-arrow { - border-left-color: $color-shade-lightest; - } - - &.bottom .tooltip-arrow { - border-bottom-color: $color-shade-lightest; - } -} diff --git a/scss/modules/tooltips/_coachmarks.scss b/scss/modules/tooltips/_coachmarks.scss index c6e00970..89f2bd26 100644 --- a/scss/modules/tooltips/_coachmarks.scss +++ b/scss/modules/tooltips/_coachmarks.scss @@ -3,29 +3,53 @@ @include coachmark($color-shade-light); } - &.search_coachmark_div { + &.calls_ss_window_coachmark_div { @include coachmark($color-shade-light); } - &.invites_coachmark_div { - @include coachmark($color-red); + &.calls_video_beta_coachmark_div { + @include coachmark($color-shade-light); } - &.recent_mentions_coachmark_div { - @include coachmark($color-red); + &.calls_video_ga_coachmark_div { + @include coachmark($color-shade-light); } &.direct_messages_coachmark_div { @include coachmark($color-shade-light); } - &.private_groups_coachmark_div { + &.gdrive_coachmark_div { + @include coachmark($color-shade-light); + } + + &.highlights_arrows_coachmark_div { + @include coachmark($color-shade-light); + } + + &.highlights_message_coachmark_div { + @include coachmark($color-shade-light); + } + + &.replies_coachmark_div { @include coachmark($color-shade-light); } &.starred_items_coachmark_div { @include coachmark($color-shade-light); } + + &.unread_view_coachmark_div { + @include coachmark($color-shade-light); + } + + &.invites_coachmark_div { + @include coachmark($color-red); + } + + &.recent_mentions_coachmark_div { + @include coachmark($color-red); + } } #coachmark_footer { diff --git a/scss/modules/tooltips/_member.scss b/scss/modules/tooltips/_member.scss index 12f67007..6f874018 100644 --- a/scss/modules/tooltips/_member.scss +++ b/scss/modules/tooltips/_member.scss @@ -50,13 +50,3 @@ .member_meta { color: $base-link-color; } - -.menu_member_user_details { - background: $color-shade-dark; - border-bottom: 1px solid $color-shade-light; - color: $base-font-color; - - .member_name { - color: $base-link-color; - } -} diff --git a/scss/pages/_api.scss b/scss/pages/_api.scss index 6fa2cbf6..7a9f216b 100644 --- a/scss/pages/_api.scss +++ b/scss/pages/_api.scss @@ -137,74 +137,4 @@ body.api { nav#api_nav { background: transparent; text-shadow: 0 1px 1px $color-shadow-medium; - - h5 { - color: $base-font-color; - } - - #api_sections ul li a { - border-bottom: 1px solid $color-shade-dark; - color: $base-link-color; - - &:hover { - background: $color-shade-light; - border-radius: 0.25rem; - color: $base-font-color; - } - - &.active { - background: $color-shade-light; - color: $base-font-color; - text-shadow: 0 1px 1px $color-shadow-medium; - - &:hover { - background: $color-shade-light; - color: $base-font-color; - text-shadow: 0 1px 1px $color-shadow-medium; - } - } - } - - #footer { - background: transparent; - - #footer_nav a { - color: $base-link-color; - } - - #footer_signature { - color: $color-red; - } - - ul a:hover { - color: $base-link-color-active; - } - } -} - -.tab_menu { - background-color: $color-shade-dark; - - &.grey { - background-color: $color-shade-dark; - } - - .tab { - color: $base-font-color; - - &:hover { - box-shadow: inset 0 -4px 0 0 rgba($color-red, 0.4); - } - - &.active, - &:active, - &:focus { - box-shadow: inset 0 -4px 0 0 $color-red; - color: $base-font-color; - } - - &:disabled { - color: $color-highlight; - } - } } diff --git a/scss/pages/_apps.scss b/scss/pages/_apps.scss index 0d5a41f6..0c7dd46f 100644 --- a/scss/pages/_apps.scss +++ b/scss/pages/_apps.scss @@ -1,45 +1,4 @@ #page { - .media_list { - background-color: $color-shade-dark; - border: 1px solid $color-shade-light; - - > li { - + li::before { - border-top: 1px solid $color-shade-light; - } - - &.interactive { - a { - color: $base-font-color; - - &:focus, - &:hover { - background: $color-shade-light; - border-color: $color-shade-lightest; - } - } - } - - .media_list_text { - color: $base-font-color; - } - } - - &.media_list_with_arrows a { - &::before { - color: $color-highlight; - } - } - } - - .media_list_title { - color: $base-font-color; - } - - .media_list_subtitle { - color: $color-highlight; - } - .sidebar_menu_list_item { color: $base-font-color; @@ -194,17 +153,3 @@ a.plastic_typeahead_item { .icon_search_input { color: $color-highlight; } - -.connected_accounts_header, -.connected_accounts_list { - border-color: $color-shade-light; - color: $base-font-color; -} - -.connected_accounts_list_pretext { - color: $base-font-color; -} - -.permission_group { - color: $base-font-color; -} diff --git a/scss/pages/_pricing.scss b/scss/pages/_pricing.scss index 86b11c4a..e69de29b 100644 --- a/scss/pages/_pricing.scss +++ b/scss/pages/_pricing.scss @@ -1,197 +0,0 @@ -.section_divider { - border-bottom: 2px solid $color-shade-darkest; -} - -.intro { - h1, - h2 { - color: $base-font-color; - } -} - -.plans { - background-color: $color-base; -} - -.plan { - background: $color-base; - - h4 { - color: $base-font-color; - } - - li span { - color: $base-font-color; - } -} - -.plan_card { - color: $base-font-color; - text-shadow: 0 3px 1px $color-shadow-light; - - h3 { - color: $base-font-color; - } -} - -a.plan_price_details { - color: $base-font-color; -} - -#plan_modal { - .plan_preview { - .plan { - color: $base-font-color; - text-shadow: 0 3px 1px $color-shadow-light; - - h3 { - color: $base-font-color; - } - } - - .preview_details { - color: $color-highlight; - } - } -} - -.ready_to_try_slack.bottom { - background-color: $color-base; -} - -// scss-lint:disable DuplicateProperty -.from_the_wall_of_love { - background-color: $color-base; - border-bottom: 2px solid $color-shade-darkest; - - h3 .ts_icon_heart_o::before { - color: $color-red; - } - - &::before { - background-image: -moz-linear-gradient(right, rgba($white, 0), $color-base), -moz-linear-gradient(right, rgba($white, 0), $color-base); - background-image: -ms-linear-gradient(right, rgba($white, 0), $color-base), -ms-linear-gradient(right, rgba($white, 0), $color-base); - background-image: -o-linear-gradient(right, rgba($white, 0), $color-base), -o-linear-gradient(right, rgba($white, 0), $color-base); - background-image: -webkit-linear-gradient(right, rgba($white, 0), $color-base), -webkit-linear-gradient(right, rgba($white, 0), $color-base); - } - - &::after { - background-image: -moz-linear-gradient(left, rgba($white, 0), $color-base), -moz-linear-gradient(left, rgba($white, 0), $color-base); - background-image: -ms-linear-gradient(left, rgba($white, 0), $color-base), -ms-linear-gradient(left, rgba($white, 0), $color-base); - background-image: -o-linear-gradient(left, rgba($white, 0), $color-base), -o-linear-gradient(left, rgba($white, 0), $color-base); - background-image: -webkit-linear-gradient(left, rgba($white, 0), $color-base), -webkit-linear-gradient(left, rgba($white, 0), $color-base); - } -} - -.tweet_carousel_controls a { - color: $color-highlight; -} - -.happy_customers { - background-color: $color-base; -} - -.new_signup { - &.top { - color: $base-font-color; - } - - &.bottom .section_content { - border: 1px solid $color-shade-darkest; - } -} - -.fair_billing_policy { - background-color: $color-base; - border-top: 10px solid $color-shade-darkest; -} - -.our_pricing_perspective, -.nonprofit_pricing { - h3 { - color: inherit; - } -} - -.need_a_hand { - background-color: $color-shade-mid; - border-top: 10px solid $color-shade-dark; - - .btn_info { - background-color: $color-shade-mid !important; - color: $base-font-color !important; - } -} - -.common_questions_and_resources { - background-color: $color-base; - - ul { - &.question_list li { - border-bottom: 2px solid $color-shade-darkest; - - h4 a { - color: $base-link-color; - - &:hover { - color: $base-link-color; - } - - i.ts_icon::before { - color: $color-highlight; - } - } - - p, - ul { - color: $base-font-color; - } - - &.expanded h4 a i.ts_icon::before { - color: $color-highlight; - } - - &:hover { - background: $color-base; - } - - &.expanded:hover h4 a i.ts_icon::before { - color: $base-font-color; - } - } - - &.getting_started_list { - li { - border-bottom: 2px solid $color-shade-darkest; - } - } - } -} - -.common_questions_nav { - ul li a { - color: $base-font-color; - - &:hover { - background-color: $color-shade-light; - color: $base-font-color; - } - - &.active { - background-color: $color-shade-light; - color: $base-font-color; - } - } -} - -.back_to_the_top { - background-color: $color-base; - - .btn { - color: $base-font-color !important; - } -} - -.payment_per_month { - color: $base-font-color !important; -} diff --git a/scss/pages/_website.scss b/scss/pages/_website.scss index 6ee83156..fecde1de 100644 --- a/scss/pages/_website.scss +++ b/scss/pages/_website.scss @@ -273,16 +273,6 @@ html.no_touch { } } -.feature_new_team_sites { - #all_time, - #third_row.column, - #second_row.column { - background: $color-shade-dark; - border: 1px solid $color-shade-darkest; - color: $base-font-color; - } -} - .tab_actions { background: $color-shade-dark; border: 1px solid $color-shade-darkest; @@ -297,69 +287,6 @@ html.no_touch { } } -#user_groups_pane .mention { - background: rgba($color-red, 0.25); - border: 0; - border-radius: 3px; - padding: 2px; -} - -#user_groups_container { - .info_panel { - background: $color-base; - border: 1px solid $color-shade-light; - } - - .mention { - background-color: rgba($color-red, 0.25) !important; - } -} - -#user_groups_header { - .user_groups_search .icon_search { - color: $color-highlight; - } - - a.icon_close { - color: $base-link-color; - - &:hover { - color: $base-link-color-active; - } - } -} - -.user_group_item { - border-bottom: 1px solid $color-shade-light; - - a { - color: $base-link-color; - } -} - -#flex_contents .user_group_item { - &:hover { - background-color: $color-base; - - h4 { - color: $base-font-color; - } - } -} - -.user_group_invite_member_small { - .add_icon { - color: $color-highlight; - } -} - -#user_group_member_invite_div { - .disabled .fsl_item.fsl_token { - background-color: $color-shade-lightest; - border-color: $color-shade-lightest; - } -} - .admin_pref { &:not(:first-of-type) { border-top: 1px solid $color-base; @@ -374,117 +301,7 @@ html.no_touch { } } -.admin_list_item { - border-bottom: 1px solid $color-base; - color: $base-font-color; - - &:hover { - background-color: $color-shade-dark; - } - - .pill.group { - background: $color-shade-mid; - } - - .admin_member_type, - .admin_member_caret { - color: $color-highlight; - } - - .admin_member_real_name { - color: $base-font-color; - } - - .two_factor_auth_badge:hover { - background: $color-shade-mid; - } - - &.expanded { - .btn_outline { - border: 1px solid $color-base; - color: $base-font-color !important; - - &:hover { - border: 1px solid $color-shade-dark; - color: $base-font-color !important; - } - } - - .sub_action { - color: $base-link-color; - - &:hover { - color: $base-link-color-active; - } - } - } - - &.expanded, - &.success, - &.processing, - &.error { - background-color: $color-base; - } - - &.inactive { - background: $color-shade-mid; - } - - .inline_name:hover, - .inline_email:hover, - .inline_username:hover { - background: none !important; - color: $base-link-color-active; - text-decoration: underline; - } - - &.invite_item.bouncing { - background: $color-shade-lightest; - - .email { - color: $color-red; - } - } -} - -.notice_error, -.notice_processing { - color: $base-font-color; - text-shadow: 0 1px 1px $color-shadow-medium; -} - -.notice_success { - color: $base-font-color; - text-shadow: 0 1px 1px $color-shadow-medium; - - a.undo_link { - color: $base-link-color; - - &:hover { - color: $base-link-color-active; - } - } -} - -.restriction_option { - background: $color-shade-mid; - color: $base-font-color; - - &:hover { - background: $color-shade-darkest; - - .ts_icon_arrow_right { - color: $base-link-color-active; - } - } - - .ts_icon_arrow_right { - color: $base-link-color; - } -} - #page pre, -.backup_codes_wrapper, body > pre { color: $black; } @@ -539,8 +356,7 @@ header #header_team_nav #add_team_option { border-top: 1px solid $color-shade-darkest; } -.inactive, -#page_contents .invite_form_column { +.inactive { background-image: none; } @@ -562,27 +378,19 @@ footer { color: $base-font-color; } -.radio_selection, .billing_selection { border: 2px solid $color-shade-darkest; color: $base-font-color !important; text-shadow: 0 1px 1px $color-shadow-dark; -} - -.radio_selection .mini, -.slate_blue { - color: $base-font-color !important; -} -.radio_selection:hover, -.billing_selection:hover { - border-color: $color-shade-darkest; -} + &:hover { + border-color: $color-shade-darkest; + } -.radio_selection.active, -.billing_selection.active { - background: $color-shade-light; - border-color: $color-shade-dark; + &.active { + background: $color-shade-light; + border-color: $color-shade-dark; + } } table tr:first-child th:not(:only-of-type) { @@ -594,23 +402,10 @@ table tr:first-child th:not(:only-of-type) { color: $color-highlight; } -.subtle_silver, .log_meta { color: $color-highlight !important; } -.service_group { - a:hover, - &:hover a { - color: $base-link-color !important; - } -} - -.burnt_violet, -.severe_grey { - color: $color-highlight !important; -} - .file_actions_cog:hover { color: $base-link-color-active !important; } @@ -720,7 +515,6 @@ header #header_logo { display: none; } -.service_group a, .file_actions_cog { color: $base-link-color !important; } @@ -955,55 +749,45 @@ a.two_factor_choice { } } -#custom_emoji span.emoji-wrapper { - background-color: $color-shade-dark; -} - @keyframes highlight_fade { from { background-color: $color-shade-mid; } to { background-color: $color-shade-dark; } } -#channel_specific_settings { - tr { - border-top: 1px solid $color-shade-light; - - &.channel_override_row.muted td { - background: $color-shade-dark; - } - } +#page_contents .card { + background: $color-shade-dark; - .extra_left_border { - border-left: 3px solid $color-shade-light; + p { + text-shadow: 0 0 1px $color-shadow-dark; } +} - .extra_right_border { - border-right: 3px solid $color-shade-light; +@media only screen and (min-width: 1441px) { + .widescreen:not(.nav_open) nav#site_nav { + background: rgba($color-base, 0.9); } +} - .revert_to_default { - color: $color-highlight; - - &:hover { - color: $color-red; - } - } +.tooltip-inner { + background-color: $color-shade-lightest; + color: $base-font-color; } -#page_contents .card { - background: $color-shade-dark; +.tooltip { + &.top .tooltip-arrow, + &.top-left .tooltip-arrow { + border-top-color: $color-shade-lightest; + } - p { - text-shadow: 0 0 1px $color-shadow-dark; + &.right .tooltip-arrow { + border-right-color: $color-shade-lightest; } - .mustard_yellow { - color: $color-red !important; + &.left .tooltip-arrow { + border-left-color: $color-shade-lightest; } -} -@media only screen and (min-width: 1441px) { - .widescreen:not(.nav_open) nav#site_nav { - background: rgba($color-base, 0.9); + &.bottom .tooltip-arrow { + border-bottom-color: $color-shade-lightest; } }