├── .gitignore ├── .hound.yml ├── scss ├── modules │ ├── pages │ │ ├── admin │ │ │ ├── _directory.scss │ │ │ ├── _settings.scss │ │ │ ├── _tooltips.scss │ │ │ ├── _files.scss │ │ │ ├── _customize.scss │ │ │ ├── _billing.scss │ │ │ ├── _help.scss │ │ │ ├── _nav.scss │ │ │ ├── _account.scss │ │ │ └── _base.scss │ │ ├── _oauth.scss │ │ ├── _legal.scss │ │ └── _api.scss │ ├── inputs │ │ ├── _label.scss │ │ ├── _toggle.scss │ │ ├── _select.scss │ │ ├── _datepicker.scss │ │ ├── _filter-select.scss │ │ ├── _messaging.scss │ │ └── _base.scss │ ├── modals │ │ ├── _call.scss │ │ ├── _keyboard-shortcuts.scss │ │ ├── _share.scss │ │ ├── _help.scss │ │ ├── _direct-messages.scss │ │ ├── _channels.scss │ │ ├── _quick-search.scss │ │ ├── _invite.scss │ │ ├── _dialog.scss │ │ ├── _file.scss │ │ ├── _preferences.scss │ │ ├── _apps.scss │ │ ├── _channel.scss │ │ ├── _base.scss │ │ └── _profile.scss │ ├── flexpane │ │ ├── _starred.scss │ │ ├── _whats-new.scss │ │ ├── _reactions.scss │ │ ├── _shortcuts.scss │ │ ├── _mentions.scss │ │ ├── _download.scss │ │ ├── _groups.scss │ │ ├── _base.scss │ │ ├── _team.scss │ │ ├── _threads.scss │ │ ├── _channel.scss │ │ └── _search.scss │ ├── _hacks.scss │ ├── messaging │ │ ├── _overlay.scss │ │ ├── _quotes.scss │ │ ├── _light.scss │ │ ├── _dense.scss │ │ ├── _unreads.scss │ │ ├── _banners.scss │ │ ├── _threads.scss │ │ └── _code.scss │ ├── menu │ │ ├── _popover.scss │ │ ├── _filters.scss │ │ ├── _team.scss │ │ ├── _tabcomplete.scss │ │ ├── _calendar.scss │ │ ├── _base.scss │ │ └── _autocomplete.scss │ ├── emojis │ │ ├── _reactions.scss │ │ ├── _current_status.scss │ │ └── _base.scss │ ├── _loader.scss │ ├── header │ │ ├── _day-divider.scss │ │ ├── _search.scss │ │ └── _base.scss │ ├── tooltips │ │ ├── _member.scss │ │ ├── _coachmarks.scss │ │ └── _base.scss │ ├── _color-overrides.scss │ └── team │ │ └── _base.scss ├── themes │ ├── build-variants │ │ ├── arc-dark--main.scss │ │ ├── arc-dark--styles.scss │ │ ├── aubergine--main.scss │ │ ├── aubergine--styles.scss │ │ ├── gruvbox-dark--main.scss │ │ ├── black-monospaced--main.scss │ │ ├── black-monospaced--styles.scss │ │ ├── gruvbox-dark--styles.scss │ │ ├── midnight-blue--main.scss │ │ ├── midnight-blue--styles.scss │ │ ├── solarized-dark--main.scss │ │ ├── solarized-light--main.scss │ │ ├── solarized-dark--styles.scss │ │ ├── solarized-light--styles.scss │ │ ├── aubergine-monospaced--main.scss │ │ ├── aubergine-monospaced--styles.scss │ │ ├── midnight-blue-monospaced--main.scss │ │ └── midnight-blue-monospaced--styles.scss │ ├── _monospaced.scss │ ├── _arc-dark.scss │ ├── _midnight-blue.scss │ ├── _aubergine.scss │ ├── _gruvbox-dark.scss │ ├── _solarized-light.scss │ └── _solarized-dark.scss ├── main.scss ├── layout │ ├── _alerts.scss │ ├── _dialog.scss │ ├── _base.scss │ ├── _scrollbar.scss │ └── _sidebar.scss ├── helpers │ ├── _mixins.scss │ └── _variables.scss └── styles.scss ├── .editorconfig ├── bin ├── linkify_changelog.sh ├── copy_raw.sh └── update_firefox.sh ├── .scss-lint.yml ├── Makefile ├── README.md ├── CONTRIBUTING.md └── COPYING.txt /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | *.css.map 3 | .idea 4 | -------------------------------------------------------------------------------- /.hound.yml: -------------------------------------------------------------------------------- 1 | scss: 2 | config_file: .scss-lint.yml 3 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_directory.scss: -------------------------------------------------------------------------------- 1 | .inactive { 2 | background-image: none; 3 | } 4 | -------------------------------------------------------------------------------- /scss/modules/inputs/_label.scss: -------------------------------------------------------------------------------- 1 | .c-label { 2 | &__text { 3 | color: $base-font-color; 4 | } 5 | } -------------------------------------------------------------------------------- /scss/themes/build-variants/arc-dark--main.scss: -------------------------------------------------------------------------------- 1 | @import "../arc-dark"; 2 | 3 | @import "../../main"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/arc-dark--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../arc-dark"; 2 | 3 | @import "../../styles"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/aubergine--main.scss: -------------------------------------------------------------------------------- 1 | @import "../aubergine"; 2 | 3 | @import "../../main"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/aubergine--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../aubergine"; 2 | 3 | @import "../../styles"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/gruvbox-dark--main.scss: -------------------------------------------------------------------------------- 1 | @import "../gruvbox-dark"; 2 | 3 | @import "../../main"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/black-monospaced--main.scss: -------------------------------------------------------------------------------- 1 | @import "../monospaced"; 2 | 3 | @import "../../main"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/black-monospaced--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../monospaced"; 2 | 3 | @import "../../styles"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/gruvbox-dark--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../gruvbox-dark"; 2 | 3 | @import "../../styles"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/midnight-blue--main.scss: -------------------------------------------------------------------------------- 1 | @import "../midnight-blue"; 2 | 3 | @import "../../main"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/midnight-blue--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../midnight-blue"; 2 | 3 | @import "../../styles"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/solarized-dark--main.scss: -------------------------------------------------------------------------------- 1 | @import "../solarized-dark"; 2 | 3 | @import "../../main"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/solarized-light--main.scss: -------------------------------------------------------------------------------- 1 | @import "../solarized-light"; 2 | 3 | @import "../../main"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/solarized-dark--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../solarized-dark"; 2 | 3 | @import "../../styles"; 4 | -------------------------------------------------------------------------------- /scss/themes/build-variants/solarized-light--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../solarized-light"; 2 | 3 | @import "../../styles"; 4 | -------------------------------------------------------------------------------- /scss/main.scss: -------------------------------------------------------------------------------- 1 | @-moz-document regexp("https://[^./]*\\.slack\\.com/(?!pricing)(?!security).*") { 2 | @import "styles"; 3 | } 4 | -------------------------------------------------------------------------------- /scss/modules/modals/_call.scss: -------------------------------------------------------------------------------- 1 | #incoming_call { 2 | background-color: rgba($color-shade-darkest, 0.97); 3 | color: $base-font-color; 4 | } 5 | -------------------------------------------------------------------------------- /scss/themes/build-variants/aubergine-monospaced--main.scss: -------------------------------------------------------------------------------- 1 | @import "../aubergine"; 2 | @import "../monospaced"; 3 | 4 | @import "../../main"; 5 | -------------------------------------------------------------------------------- /scss/themes/build-variants/aubergine-monospaced--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../aubergine"; 2 | @import "../monospaced"; 3 | 4 | @import "../../styles"; 5 | -------------------------------------------------------------------------------- /scss/themes/build-variants/midnight-blue-monospaced--main.scss: -------------------------------------------------------------------------------- 1 | @import "../midnight-blue"; 2 | @import "../monospaced"; 3 | 4 | @import "../../main"; 5 | -------------------------------------------------------------------------------- /scss/themes/build-variants/midnight-blue-monospaced--styles.scss: -------------------------------------------------------------------------------- 1 | @import "../midnight-blue"; 2 | @import "../monospaced"; 3 | 4 | @import "../../styles"; 5 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_starred.scss: -------------------------------------------------------------------------------- 1 | .tab_container .star_item { 2 | .message .timestamp, 3 | ts-message .timestamp { 4 | color: $color-highlight; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_whats-new.scss: -------------------------------------------------------------------------------- 1 | #whats_new_tab { 2 | p { 3 | color: $base-font-color; 4 | } 5 | 6 | .flex_heading_controls label { 7 | color: $color-highlight; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_reactions.scss: -------------------------------------------------------------------------------- 1 | .mention_rxn { 2 | .mention_rxn_summary { 3 | color: $base-font-color; 4 | 5 | .member_preview_link, 6 | .mention_rxn_summary_members { 7 | color: $color-highlight; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /scss/themes/_monospaced.scss: -------------------------------------------------------------------------------- 1 | // Font Families 2 | $base-font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 3 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_settings.scss: -------------------------------------------------------------------------------- 1 | .admin_pref { 2 | &:not(:first-of-type) { 3 | border-top-color: $color-base; 4 | } 5 | 6 | &.locked { 7 | background-color: rgba($color-red, 0.2); 8 | } 9 | 10 | .admin_pref_locked_label { 11 | color: $color-highlight; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # See editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | 16 | [Makefile] 17 | indent_style = tab 18 | -------------------------------------------------------------------------------- /scss/modules/_hacks.scss: -------------------------------------------------------------------------------- 1 | .monkey_scroll_bar { 2 | z-index: 99; // This should have a higher z-index than messages and dividers or else they overlap. 3 | } 4 | 5 | .client_header_icon { 6 | -moz-filter: brightness(0.6) contrast(3) invert(1) sepia(0.5); 7 | -webkit-filter: brightness(0.6) contrast(3) invert(1) sepia(0.5); 8 | filter: brightness(0.6) contrast(3) invert(1) sepia(0.5); 9 | } 10 | -------------------------------------------------------------------------------- /scss/themes/_arc-dark.scss: -------------------------------------------------------------------------------- 1 | // Theme Colors 2 | $color-base: #404552; 3 | $color-highlight: #949494; 4 | 5 | $color-shade-darkest: #1d2027; 6 | $color-shade-dark: #2a2f39; 7 | $color-shade-mid: #454c5c; 8 | $color-shade-light: #6b6f79; 9 | $color-shade-lightest: #858991; 10 | 11 | // Font Colors 12 | $base-font-color: #d3dae3; 13 | 14 | $base-link-color: #90939b; 15 | $base-link-color-active: #90939b; 16 | -------------------------------------------------------------------------------- /scss/themes/_midnight-blue.scss: -------------------------------------------------------------------------------- 1 | // Theme Colors 2 | $color-base: #000; 3 | $color-highlight: #1793d1; 4 | 5 | $color-shade-darkest: #101010; 6 | $color-shade-dark: #181818; 7 | $color-shade-mid: #202020; 8 | $color-shade-light: #282828; 9 | $color-shade-lightest: #303030; 10 | 11 | // Font Colors 12 | $base-font-color: #00b9f2; 13 | 14 | $base-link-color: #1793d1; 15 | $base-link-color-active: #299bd4; 16 | -------------------------------------------------------------------------------- /bin/linkify_changelog.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | if [ ! -f CHANGELOG.md ]; then 4 | echo "CHANGELOG.md not in current directory." 5 | exit 1 6 | fi 7 | 8 | sed -i -E 's/(\(|\s)([0-9a-f]{5,40})(,|\))/\1\[\2\]\(https:\/\/github.com\/laCour\/slack-night-mode\/commit\/\2\)\3/g' CHANGELOG.md 9 | sed -i -E 's/(\(|\s)#([0-9]+)(,|\))/\1\[#\2\]\(https:\/\/github.com\/laCour\/slack-night-mode\/issues\/\2\)\3/g' CHANGELOG.md 10 | -------------------------------------------------------------------------------- /scss/themes/_aubergine.scss: -------------------------------------------------------------------------------- 1 | // Theme Colors 2 | $color-base: #3e313c; 3 | $color-highlight: #a3839f; 4 | 5 | $color-shade-darkest: #372c36; 6 | $color-shade-dark: #4d394b; 7 | $color-shade-mid: #4a3b49; 8 | $color-shade-light: #61485e; 9 | $color-shade-lightest: #876484; 10 | 11 | // Font Colors 12 | $base-font-color: #f0d9ed; 13 | 14 | $base-link-color: $color-highlight; 15 | $base-link-color-active: #d4bbd1; 16 | -------------------------------------------------------------------------------- /bin/copy_raw.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | log () { echo -e "\\033[01;38;5;46m$1\\033[0m"; } 4 | err () { echo -e "\\033[01;38;5;202m$1\\033[0m"; exit 1; } 5 | 6 | if [ -z "$1" ]; then err "A target CSS file must be supplied as an argument."; fi 7 | 8 | log "Compiling..." 9 | make > /dev/null 10 | if [ $? -ne 0 ]; then err "Invalid styles."; fi 11 | style=`cat $1 | sed -e 's/^.*regexp.*)\s{\s//'` 12 | echo "${style::-1}" | xclip -sel clip 13 | log "Style copied to clipboard." 14 | -------------------------------------------------------------------------------- /scss/modules/messaging/_overlay.scss: -------------------------------------------------------------------------------- 1 | .channel_overlay { 2 | border-color: $color-shade-dark; 3 | color: $color-highlight; 4 | 5 | &.channel_overlay_redesign { 6 | .channel_overlay_title { 7 | color: $base-font-color; 8 | } 9 | 10 | li { 11 | color: $color-highlight; 12 | } 13 | } 14 | } 15 | 16 | .channel_overlay_title_wrap { 17 | border-color: $color-shade-dark; 18 | } 19 | 20 | .channel_overlay_title_shared { 21 | color: $base-font-color; 22 | } 23 | -------------------------------------------------------------------------------- /scss/layout/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert, 2 | .c-alert, 3 | .c-alert--boxed { 4 | background-color: $color-shade-dark; 5 | border-color: $color-shade-darkest; 6 | color: $base-font-color; 7 | text-shadow: 0 1px 0 $color-shadow-dark; 8 | 9 | h4 { 10 | color: $base-font-color; 11 | } 12 | } 13 | 14 | .alert-info { 15 | background-color: $color-shade-dark; 16 | border-color: $color-shade-darkest; 17 | color: $base-font-color; 18 | 19 | h4 { 20 | color: $base-font-color; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scss/modules/messaging/_quotes.scss: -------------------------------------------------------------------------------- 1 | pre { 2 | background: $color-shade-darkest; 3 | border: 1px solid $color-shade-dark; 4 | color: $base-font-color; 5 | 6 | span.mention { 7 | padding: 2px 0 !important; 8 | } 9 | } 10 | 11 | #page pre, 12 | body > pre { 13 | background: $color-shade-darkest; 14 | color: $base-font-color !important; 15 | } 16 | 17 | body > pre { 18 | background: $color-shade-lightest; 19 | } 20 | 21 | .special_formatting_quote .quote_bar { 22 | background-color: $color-shade-light; 23 | } 24 | -------------------------------------------------------------------------------- /scss/layout/_dialog.scss: -------------------------------------------------------------------------------- 1 | .c-dialog { 2 | &__content { 3 | border-radius: 0.6rem; 4 | } 5 | 6 | &__header, 7 | &__body, 8 | &__footer { 9 | background: $color-shade-dark; 10 | } 11 | 12 | &__title { 13 | color: $base-font-color; 14 | } 15 | 16 | .p-custom_status_input { 17 | &__duration_picker_select { 18 | padding-left: 11px; 19 | 20 | .c-input_select { 21 | &__selected_value--placeholder { 22 | color: $base-font-color; 23 | } 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /scss/modules/pages/admin/_tooltips.scss: -------------------------------------------------------------------------------- 1 | .tooltip-inner { 2 | background-color: $color-shade-lightest; 3 | color: $base-font-color; 4 | } 5 | 6 | .tooltip { 7 | &.top .tooltip-arrow, 8 | &.top-left .tooltip-arrow { 9 | border-top-color: $color-shade-lightest; 10 | } 11 | 12 | &.right .tooltip-arrow { 13 | border-right-color: $color-shade-lightest; 14 | } 15 | 16 | &.left .tooltip-arrow { 17 | border-left-color: $color-shade-lightest; 18 | } 19 | 20 | &.bottom .tooltip-arrow { 21 | border-bottom-color: $color-shade-lightest; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/modules/inputs/_toggle.scss: -------------------------------------------------------------------------------- 1 | .c-input_select { 2 | background: $color-shade-light; 3 | border-color: $color-shade-dark; 4 | color: $base-font-color; 5 | 6 | .p-file_list__file_type_select &__selected_value--placeholder { 7 | color: $base-font-color; 8 | } 9 | } 10 | 11 | .c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open) { 12 | background: $color-shade-light; 13 | border-color: $color-shade-dark; 14 | color: $base-font-color; 15 | } 16 | 17 | .c-input_select_options_list__option { 18 | color: $base-font-color; 19 | } 20 | -------------------------------------------------------------------------------- /.scss-lint.yml: -------------------------------------------------------------------------------- 1 | scss_files: "scss/**/*.scss" 2 | linters: 3 | BorderZero: 4 | enabled: false 5 | IdSelector: 6 | enabled: false 7 | ImportantRule: 8 | enabled: false 9 | LeadingZero: 10 | enabled: true 11 | style: include_zero 12 | NestingDepth: 13 | enabled: false 14 | PlaceholderInExtend: 15 | enabled: false 16 | QualifyingElement: 17 | enabled: false 18 | SelectorDepth: 19 | enabled: false 20 | SelectorFormat: 21 | enabled: false 22 | StringQuotes: 23 | enabled: true 24 | style: double_quotes 25 | VendorPrefix: 26 | enabled: false 27 | -------------------------------------------------------------------------------- /scss/modules/menu/_popover.scss: -------------------------------------------------------------------------------- 1 | .popover_menu { 2 | background-color: $color-base; 3 | border-top: 1px solid $color-shade-light; 4 | 5 | .arrow::after { 6 | background-color: $color-shade-darkest; 7 | } 8 | 9 | .arrow_shadow::after { 10 | background-color: $color-base; 11 | box-shadow: 0 0 0 1px $color-shade-light, 0 0 3px rgba($black, 0.08); 12 | } 13 | 14 | &.showing_header { 15 | .arrow::after, 16 | .arrow_shadow::after { 17 | background-color: $color-base !important; 18 | } 19 | } 20 | 21 | .content { 22 | background-color: $color-base; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | all: clean build 2 | 3 | build: default raw variants rawvariants 4 | 5 | clean: 6 | rm -rf css 7 | mkdir -p css/variants css/raw/variants 8 | 9 | default: 10 | sassc -t compact scss/main.scss css/black.css 11 | 12 | variants: 13 | for sass in scss/themes/build-variants/*--main.scss; do \ 14 | theme=`basename $$sass --main.scss`; \ 15 | sassc -t compact $$sass css/variants/$$theme.css; done 16 | 17 | raw: 18 | sassc -t compact scss/styles.scss css/raw/black.css 19 | 20 | rawvariants: 21 | for sass in scss/themes/build-variants/*--styles.scss; do \ 22 | theme=`basename $$sass --styles.scss`; \ 23 | sassc -t compact $$sass css/raw/variants/$$theme.css; done 24 | -------------------------------------------------------------------------------- /scss/modules/messaging/_light.scss: -------------------------------------------------------------------------------- 1 | .c-message--light { 2 | @if global-variable-exists(base-font-family) { 3 | font-family: $base-font-family; 4 | } 5 | 6 | .c-message { 7 | &__sender .c-message__sender_link { 8 | color: $base-font-color; 9 | } 10 | } 11 | } 12 | 13 | .light_theme { 14 | ts-message { 15 | color: $base-font-color; 16 | 17 | @if global-variable-exists(base-font-family) { 18 | font-family: $base-font-family; 19 | } 20 | 21 | .message_content { 22 | .message_sender, 23 | .meta .message_sender:hover { 24 | color: $base-font-color !important; 25 | } 26 | } 27 | 28 | .comment::before { 29 | color: $color-highlight; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/helpers/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin coachmark($background) { 2 | background: $background; 3 | 4 | #coachmark_callout, 5 | #coachmark_interior { 6 | background: $background; 7 | } 8 | } 9 | 10 | @mixin placeholder { 11 | &::-webkit-input-placeholder { 12 | color: $base-font-color !important; 13 | -webkit-filter: none; 14 | filter: none; 15 | opacity: 0.5; 16 | } 17 | 18 | &::-moz-placeholder { 19 | color: $base-font-color !important; 20 | filter: none; 21 | opacity: 0.5; 22 | } 23 | 24 | &::placeholder { 25 | color: $base-font-color !important; 26 | filter: none; 27 | opacity: 0.5; 28 | } 29 | 30 | &[data-placeholder]:empty::before { 31 | color: $base-font-color !important; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_files.scss: -------------------------------------------------------------------------------- 1 | .file_header .title a { 2 | color: $base-link-color; 3 | 4 | &:hover { 5 | color: $base-link-color-active; 6 | } 7 | } 8 | 9 | .file_actions_cog { 10 | color: $base-link-color !important; 11 | 12 | &:hover { 13 | color: $base-link-color-active !important; 14 | } 15 | } 16 | 17 | .file_reference .icon, 18 | .file_list_item .icon, 19 | .file_preview { 20 | border: 2px solid $color-shade-darkest; 21 | } 22 | 23 | .action_cog { 24 | color: $base-link-color; 25 | 26 | i { 27 | color: $base-link-color; 28 | } 29 | } 30 | 31 | html.no_touch { 32 | .action_cog:hover { 33 | color: $base-link-color-active; 34 | 35 | i { 36 | color: $base-link-color-active; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /scss/modules/modals/_keyboard-shortcuts.scss: -------------------------------------------------------------------------------- 1 | #shortcuts_dialog { 2 | background: rgba($color-base, 0.95); 3 | text-shadow: 0 1px 1px rgba($color-shade-darkest, 0.7); 4 | 5 | &.modal { 6 | .modal-body, 7 | h1, 8 | h3 { 9 | color: $base-font-color; 10 | } 11 | 12 | ul ul { 13 | border-left-color: $color-shade-light; 14 | } 15 | 16 | .info_block { 17 | color: $color-highlight; 18 | } 19 | 20 | .close { 21 | background: $color-shade-light; 22 | border-color: $color-shade-lightest; 23 | box-shadow: 0 1px 2px rgba($color-shade-darkest, 0.5); 24 | color: $base-font-color; 25 | 26 | &:hover { 27 | box-shadow: 0 1px 2px rgba($color-shade-darkest, 0.9); 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/modules/modals/_share.scss: -------------------------------------------------------------------------------- 1 | .basic_share_dialog { 2 | .share_dialog_divider { 3 | border-top-color: transparent; 4 | } 5 | } 6 | 7 | .share_dialog_attachment_container { 8 | color: $base-font-color; 9 | } 10 | 11 | #share_dialog .file_list_item { 12 | border-color: $color-shade-darkest; 13 | } 14 | 15 | #generic_dialog.basic_share_dialog .lazy_filter_select .lfs_item .ts_icon:not(.presence_icon), 16 | #share_dialog .lazy_filter_select .lfs_item .ts_icon:not(.presence_icon) { 17 | color: $color-highlight; 18 | } 19 | 20 | #share_dialog_input_container #file_comment_textarea.ql-container { 21 | border-color: $color-shade-dark; 22 | 23 | &.focus { 24 | border-color: $color-shade-light; 25 | 26 | ~ .emo_menu { 27 | color: $base-font-color; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/modules/messaging/_dense.scss: -------------------------------------------------------------------------------- 1 | .c-message--dense { 2 | @if global-variable-exists(base-font-family) { 3 | font-family: $base-font-family; 4 | } 5 | 6 | .c-timestamp__label { 7 | color: $base-link-color; 8 | } 9 | 10 | .c-message__content_header .c-custom_status { 11 | border-color: $color-shade-dark; 12 | } 13 | } 14 | 15 | .dense_theme { 16 | ts-message { 17 | color: $base-font-color; 18 | 19 | @if global-variable-exists(base-font-family) { 20 | font-family: $base-font-family; 21 | } 22 | 23 | &.first .message_gutter .timestamp, 24 | &.selected .message_gutter .timestamp { 25 | color: $base-link-color; 26 | } 27 | 28 | .message_content .message_current_status { 29 | border-color: $color-shade-dark; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/modules/emojis/_reactions.scss: -------------------------------------------------------------------------------- 1 | .rxn, 2 | .c-reaction, 3 | .c-reaction_add, 4 | .c-member_slug { 5 | background: $color-shade-dark; 6 | border: 1px solid $color-shade-light; 7 | 8 | &.active, 9 | &:hover { 10 | background: $color-shade-mid; 11 | 12 | .emoji_rxn_count { 13 | color: $base-font-color; 14 | } 15 | } 16 | 17 | &.c-reaction--reacted { 18 | background-color: rgba($color-shade-mid, 0.08); 19 | border-color: rgba($color-shade-lightest, 0.4) !important; 20 | 21 | .emoji_rxn_count, 22 | .c-reaction__count { 23 | color: $base-font-color; 24 | } 25 | } 26 | 27 | .emoji_rxn_count, 28 | .c-reaction__count { 29 | color: $base-font-color; 30 | } 31 | 32 | &.menu_rxn .ts_icon { 33 | color: rgba($base-font-color, 0.25); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /scss/modules/inputs/_select.scss: -------------------------------------------------------------------------------- 1 | .ts_toggle { 2 | .ts_toggle_button { 3 | background: $color-shade-darkest; 4 | color: $base-font-color; 5 | 6 | .ts_toggle_handle { 7 | background: $color-shade-dark; 8 | } 9 | } 10 | 11 | .ts_toggle_secondary_label { 12 | color: $color-highlight; 13 | } 14 | 15 | &.checked .ts_toggle_button { 16 | background: $color-shade-lightest; 17 | color: $base-font-color; 18 | } 19 | 20 | &.ts_toggle_orange .ts_toggle_button { 21 | background: $color-red; 22 | color: $base-font-color; 23 | } 24 | } 25 | 26 | .c-multi_select_input { 27 | background: $color-shade-light; 28 | background-color: $color-shade-light; 29 | } 30 | 31 | .c-token { 32 | background: $color-shade-dark; 33 | } 34 | 35 | .c-multi_select_token__remove { 36 | color: $color-shade-lightest; 37 | } 38 | -------------------------------------------------------------------------------- /scss/modules/modals/_help.scss: -------------------------------------------------------------------------------- 1 | #fs_modal.help_modal { 2 | #fs_modal_footer .help_modal_status { 3 | #no_open_issues { 4 | color: $color-highlight; 5 | } 6 | } 7 | 8 | .help_modal_header { 9 | background-color: $color-shade-dark; 10 | border-color: $color-shade-light; 11 | 12 | a { 13 | color: $base-font-color; 14 | } 15 | } 16 | 17 | .help_modal_divider { 18 | color: $color-highlight; 19 | } 20 | 21 | .help_modal_article_row { 22 | border-top: 1px solid $color-shade-dark; 23 | 24 | .channel_browser_open { 25 | color: $color-highlight; 26 | } 27 | } 28 | 29 | #help_modal_list_container:not(.keyboard_active).not_scrolling .help_modal_article_row:hover, 30 | .help_modal_article_row.highlighted { 31 | background-color: $color-shade-dark; 32 | border-color: $color-shade-darkest; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/modules/_loader.scss: -------------------------------------------------------------------------------- 1 | .loading { 2 | #loading-zone { 3 | background: $color-base; 4 | } 5 | } 6 | 7 | #loading_welcome { 8 | background-image: none; 9 | } 10 | 11 | #loading_message { 12 | p { 13 | color: $base-font-color; 14 | } 15 | 16 | #loading_message_attribution { 17 | color: $color-highlight; 18 | } 19 | } 20 | 21 | #loading_team_menu_bg, 22 | #loading_user_menu_bg { 23 | background: $color-base; 24 | border: none; 25 | } 26 | 27 | .infinite_spinner_bg, 28 | .infinite_spinner_blue { 29 | stroke: $base-font-color; 30 | } 31 | 32 | body.loading { 33 | #team_menu, 34 | #quick_switcher_btn, 35 | #team_menu_overlay, 36 | #col_channels_overlay, 37 | #col_channels { 38 | background-color: $color-shade-dark; 39 | } 40 | } 41 | 42 | .p-degraded_list__loading { 43 | background-color: $color-base; 44 | color: $base-font-color; 45 | } 46 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_shortcuts.scss: -------------------------------------------------------------------------------- 1 | .p-shortcuts_flexpane { 2 | &__shortcut { 3 | border-color: $color-shade-darkest; 4 | 5 | &:last-of-type { 6 | border-bottom-color: $color-shade-darkest; 7 | } 8 | 9 | &_hoverable .p-shortcuts_flexpane__shortcut_title { 10 | color: $base-font-color; 11 | } 12 | 13 | &_title { 14 | color: $color-highlight; 15 | } 16 | } 17 | 18 | &__title { 19 | color: $base-font-color; 20 | } 21 | 22 | &__tip { 23 | color: $color-highlight; 24 | } 25 | 26 | &__section_description { 27 | color: $color-highlight; 28 | } 29 | 30 | &__sub_heading { 31 | color: $color-highlight; 32 | } 33 | } 34 | 35 | .c-keyboard_key { 36 | background: $color-shade-light; 37 | border-color: $color-shade-lightest; 38 | box-shadow: 0 1px 0 $color-shadow-medium; 39 | color: $base-font-color; 40 | } 41 | -------------------------------------------------------------------------------- /bin/update_firefox.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | log () { echo -e "\\033[01;38;5;46m$1\\033[0m"; } 4 | err () { echo -e "\\033[01;38;5;202m$1\\033[0m"; exit 1; } 5 | 6 | if [ -z "$1" ]; then err "A target CSS file must be supplied as an argument."; fi 7 | 8 | log "Compiling..." 9 | make > /dev/null 10 | if [ $? -ne 0 ]; then err "Invalid styles."; fi 11 | style=`cat $1` 12 | 13 | log "Finding and updating style..." 14 | style_url="http://userstyles.org/styles/117475" 15 | profile="*.default" 16 | database_path="$HOME/.mozilla/firefox/$profile/stylish.sqlite" 17 | style_id=`sqlite3 $database_path "SELECT id FROM styles WHERE idUrl = '$style_url';"` 18 | if [ "$style_id" == "" ]; then err "Style not found in Firefox Stylish database."; fi 19 | echo "UPDATE styles SET code='$style',enabled=0 WHERE id=$style_id;" | sqlite3 $database_path 20 | 21 | log "Style updated and disabled. Enable the style to reflect changes." 22 | -------------------------------------------------------------------------------- /scss/modules/inputs/_datepicker.scss: -------------------------------------------------------------------------------- 1 | .c-date_picker { 2 | &__dropdown { 3 | background-color: $color-shade-dark; 4 | } 5 | } 6 | 7 | .c-calendar_view_header { 8 | &__stepper_btn:disabled, 9 | &__title_btn:disabled { 10 | color: $color-highlight; 11 | } 12 | 13 | &__stepper_btn, 14 | &__title_btn { 15 | color: $base-font-color; 16 | } 17 | 18 | &__stepper_btn:hover, 19 | &__title_btn:hover { 20 | background-color: $color-shade-light; 21 | } 22 | } 23 | 24 | .c-date_picker_calendar { 25 | &__date--disabled, 26 | &__date--disabled:hover { 27 | background-color: $color-shade-dark; 28 | } 29 | } 30 | 31 | .c-mini_calendar { 32 | &__month_button:disabled, 33 | &__month_button:disabled:hover { 34 | background-color: $color-shade-dark; 35 | } 36 | } 37 | 38 | .c-calendar_month { 39 | &__day_of_week_heading { 40 | color: $base-font-color; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /scss/themes/_gruvbox-dark.scss: -------------------------------------------------------------------------------- 1 | $dark0: #1d2021; 2 | $dark1: #282828; 3 | $dark2: #3c3836; 4 | $dark3: #504945; 5 | $dark4: #665c54; 6 | 7 | $light0: #f9f5d7; 8 | $light1: #ebdbb2; 9 | $light2: #d5c4a1; 10 | $light3: #bdae93; 11 | $light4: #a89984; 12 | 13 | $red: #cc241d; 14 | $green: #98971a; 15 | $yellow: #d79921; 16 | $blue: #458588; 17 | $purple: #b16286; 18 | $aqua: #689d6a; 19 | $orange: #d65d0e; 20 | 21 | // Theme Colors 22 | $color-base: $dark0; 23 | $color-highlight: $yellow; 24 | 25 | $color-red: $red; 26 | $color-green: $green; 27 | $color-yellow: $yellow; 28 | 29 | $black: $dark0; 30 | $white: $light0; 31 | 32 | $color-shade-darkest: $dark1; 33 | $color-shade-dark: $dark1; 34 | $color-shade-mid: $dark1; 35 | $color-shade-light: $dark3; 36 | $color-shade-lightest: $light1; 37 | 38 | // Font Colors 39 | $base-font-color: $light0; 40 | 41 | $base-link-color: $aqua; 42 | $base-link-color-active: $red; 43 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_customize.scss: -------------------------------------------------------------------------------- 1 | table tr { 2 | border-bottom-color: $color-base; 3 | } 4 | 5 | table tr:first-child th:not(:only-of-type) { 6 | border-bottom-color: $color-shade-darkest; 7 | } 8 | 9 | .slackbot_response_fieldset .delete_response { 10 | color: $color-highlight; 11 | 12 | &:hover { 13 | color: $color-red; 14 | } 15 | } 16 | 17 | .author_cell { 18 | color: $base-font-color; 19 | } 20 | 21 | .message_cell.disabled { 22 | color: $color-highlight; 23 | } 24 | 25 | #message_container #msg_limit { 26 | color: $base-font-color; 27 | } 28 | 29 | .statuses_container .current_status_cell .current_status_container { 30 | .current_status_cover, 31 | &:not(.active).with_status_set .current_status_cover { 32 | border-color: $color-shade-light; 33 | } 34 | 35 | .current_status_emoji_picker_cover, 36 | &:not(.active).with_status_set .current_status_emoji_picker_cover { 37 | border-right: 1px solid $color-shade-light; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /scss/modules/header/_day-divider.scss: -------------------------------------------------------------------------------- 1 | .c-message_list { 2 | &__day_divider { 3 | &__label { 4 | color: $color-highlight; 5 | 6 | &__pill { 7 | background: $color-base; 8 | position: relative; 9 | } 10 | } 11 | 12 | &__line { 13 | border-top-color: $color-shade-dark; 14 | } 15 | } 16 | } 17 | 18 | .day_divider { 19 | background: $color-base; 20 | color: $color-highlight; 21 | 22 | hr { 23 | border-bottom: 0; 24 | border-top: 1px solid $color-shade-dark; 25 | } 26 | 27 | .day_divider_label { 28 | background: $color-base; 29 | } 30 | } 31 | 32 | .day_container { 33 | .day_msgs { 34 | border-top: 1px solid $color-shade-dark; 35 | } 36 | 37 | &.unread_day_container .day_msgs { 38 | border-color: $color-shade-lightest; 39 | } 40 | 41 | .day_divider { 42 | background: none; 43 | color: $color-highlight; 44 | 45 | .day_divider_label { 46 | background: $color-base; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /scss/themes/_solarized-light.scss: -------------------------------------------------------------------------------- 1 | // Solarized color palette 2 | // Taken from ethanschoonover.com/solarized 3 | $base03: #002b36; 4 | $base02: #073642; 5 | $base01: #586e75; 6 | $base00: #657b83; 7 | $base0: #839496; 8 | $base1: #93a1a1; 9 | $base2: #eee8d5; 10 | $base3: #fdf6e3; 11 | $yellow: #b58900; 12 | $orange: #cb4b16; 13 | $red: #dc322f; 14 | $magenta: #d33682; 15 | $violet: #6c71c4; 16 | $blue: #268bd2; 17 | $cyan: #2aa198; 18 | $green: #859900; 19 | 20 | // Theme Colors 21 | $color-base: $base3; 22 | $color-highlight: $cyan; 23 | 24 | $color-red: $red; 25 | $color-green: $green; 26 | $color-yellow: $yellow; 27 | 28 | $black: $base02; 29 | $white: $base2; 30 | 31 | $color-shade-darkest: darken($color-base, 5%); 32 | $color-shade-dark: darken($color-base, 2%); 33 | $color-shade-mid: $color-base; 34 | $color-shade-light: lighten($color-base, 2%); 35 | $color-shade-lightest: lighten($color-base, 5%); 36 | 37 | // Font Colors 38 | $base-font-color: $base01; 39 | 40 | $base-link-color: $blue; 41 | $base-link-color-active: $red; 42 | -------------------------------------------------------------------------------- /scss/themes/_solarized-dark.scss: -------------------------------------------------------------------------------- 1 | // Solarized color palette 2 | // Taken from ethanschoonover.com/solarized 3 | $base03: #002b36; 4 | $base02: #073642; 5 | $base01: #586e75; 6 | $base00: #657b83; 7 | $base0: #839496; 8 | $base1: #93a1a1; 9 | $base2: #eee8d5; 10 | $base3: #fdf6e3; 11 | $yellow: #b58900; 12 | $orange: #cb4b16; 13 | $red: #dc322f; 14 | $magenta: #d33682; 15 | $violet: #6c71c4; 16 | $blue: #268bd2; 17 | $cyan: #2aa198; 18 | $green: #859900; 19 | 20 | // Theme Colors 21 | $color-base: $base03; 22 | $color-highlight: $cyan; 23 | 24 | $color-red: $red; 25 | $color-green: $green; 26 | $color-yellow: $yellow; 27 | 28 | $black: $base02; 29 | $white: $base2; 30 | 31 | $color-shade-darkest: darken($color-base, 5%); 32 | $color-shade-dark: darken($color-base, 2%); 33 | $color-shade-mid: $color-base; 34 | $color-shade-light: lighten($color-base, 2%); 35 | $color-shade-lightest: lighten($color-base, 5%); 36 | 37 | // Font Colors 38 | $base-font-color: lighten($base1, 5%); 39 | 40 | $base-link-color: $blue; 41 | $base-link-color-active: $red; 42 | -------------------------------------------------------------------------------- /scss/modules/pages/_oauth.scss: -------------------------------------------------------------------------------- 1 | .c-oauth_scope_info { 2 | &__spacer_icon { 3 | color: $color-red; 4 | } 5 | 6 | &__dangerous_scopes, 7 | &__safe_scopes { 8 | border-bottom-color: $color-shade-light; 9 | } 10 | 11 | &__dangerous_scopes { 12 | border-left-color: $color-red; 13 | border-right-color: $color-shade-light; 14 | border-top-color: $color-shade-light; 15 | } 16 | 17 | &__dangerous_scope:not(:first-child), 18 | &__safe_scope { 19 | border-top-color: $color-shade-light; 20 | } 21 | } 22 | 23 | a.p-oauth_nav__anchor { 24 | color: $color-highlight; 25 | } 26 | 27 | .p-oauth_nav__team-switcher { 28 | .menu_launcher { 29 | border-color: $color-shade-dark; 30 | 31 | &:hover { 32 | border: $color-shade-light; 33 | } 34 | } 35 | } 36 | 37 | .p-oauth_page, 38 | .p-oauth_page--error { 39 | background: $color-base; 40 | } 41 | 42 | .p-oauth_page__title { 43 | color: $base-font-color; 44 | } 45 | 46 | .p-oauth_page_single_channel_picker { 47 | border-bottom-color: $color-shade-dark; 48 | } 49 | -------------------------------------------------------------------------------- /scss/modules/tooltips/_member.scss: -------------------------------------------------------------------------------- 1 | .menu_member_header { 2 | background: $color-shade-darkest; 3 | 4 | .member_details { 5 | .member_name_and_presence { 6 | color: $base-font-color; 7 | 8 | .member_name { 9 | color: $base-font-color; 10 | } 11 | 12 | .presence.away { 13 | color: $white; 14 | } 15 | } 16 | 17 | .member_title { 18 | color: $color-highlight; 19 | } 20 | 21 | .member_restriction, 22 | .member_timezone_value { 23 | color: $color-highlight; 24 | } 25 | 26 | .member_restriction a, 27 | .member_timezone_value a { 28 | color: $base-link-color; 29 | 30 | &:hover { 31 | color: $base-link-color-active; 32 | } 33 | } 34 | } 35 | 36 | .member_details_divider { 37 | border-color: $color-shade-light; 38 | } 39 | } 40 | 41 | .menu_member_footer { 42 | background: $color-shade-darkest; 43 | border-top: 1px solid $color-shade-light; 44 | 45 | p { 46 | color: $color-highlight; 47 | } 48 | 49 | #menu_member_dm_input p { 50 | color: $base-font-color; 51 | } 52 | } 53 | 54 | .member_meta { 55 | color: $base-link-color; 56 | } 57 | -------------------------------------------------------------------------------- /scss/layout/_base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: $color-base; 3 | color: $base-font-color; 4 | } 5 | 6 | a { 7 | color: $base-link-color; 8 | 9 | &:link, 10 | &:visited { 11 | color: $base-link-color; 12 | } 13 | 14 | &:hover, 15 | &:active, 16 | &:focus { 17 | color: $base-link-color-active; 18 | } 19 | } 20 | 21 | hr { 22 | border-bottom: 1px solid $color-shade-mid; 23 | border-top: 1px solid $color-base; 24 | } 25 | 26 | h1, 27 | h2, 28 | h3, 29 | h4 { 30 | color: $base-font-color; 31 | } 32 | 33 | h1 a { 34 | color: $base-font-color; 35 | 36 | &:active, 37 | &:hover, 38 | &:link, 39 | &:visited { 40 | color: $base-font-color; 41 | } 42 | } 43 | 44 | .bordered { 45 | border: 1px solid $color-shade-dark; 46 | } 47 | 48 | .top_border { 49 | border-top: 1px solid $color-shade-dark; 50 | } 51 | 52 | .bottom_border { 53 | border-bottom: 1px solid $color-shade-dark; 54 | } 55 | 56 | .left_border { 57 | border-left: 1px solid $color-shade-dark; 58 | } 59 | 60 | .right_border { 61 | border-right: 1px solid $color-shade-dark; 62 | } 63 | 64 | .bullet { 65 | color: $color-highlight; 66 | } 67 | 68 | .p-client { 69 | background: $color-base; 70 | } 71 | -------------------------------------------------------------------------------- /scss/modules/menu/_filters.scss: -------------------------------------------------------------------------------- 1 | #file_member_filter { 2 | background: $color-shade-darkest; 3 | } 4 | 5 | #client-ui { 6 | .member_filter { 7 | border: 1px solid $color-shade-light; 8 | } 9 | 10 | .member_file_filter_menu .searchable_member_list_scroller .team_list_item:hover { 11 | .channel_page_member_row { 12 | background: $color-base; 13 | } 14 | 15 | .member { 16 | color: $base-font-color; 17 | } 18 | } 19 | 20 | #team_list_container #team_filter { 21 | .member_filter { 22 | background-color: $color-base; 23 | border-left: 1px solid $color-shade-darkest; 24 | } 25 | } 26 | 27 | #file_member_filter { 28 | border-color: $color-shade-light; 29 | 30 | .member_filter { 31 | border-color: $color-shade-light; 32 | } 33 | } 34 | 35 | .team_tabs_container { 36 | border-bottom: 1px solid $color-shade-darkest; 37 | } 38 | } 39 | 40 | #team_filter { 41 | .icon_search { 42 | color: $color-highlight; 43 | } 44 | 45 | a.icon_close { 46 | color: $base-link-color; 47 | 48 | &:hover { 49 | color: $base-link-color-active; 50 | } 51 | } 52 | } 53 | 54 | .filter_header { 55 | background-color: $color-base; 56 | } 57 | -------------------------------------------------------------------------------- /scss/modules/emojis/_current_status.scss: -------------------------------------------------------------------------------- 1 | #message_edit_form, 2 | #msg_form, 3 | .current_status_container, 4 | .current_status_input_container, 5 | .inline_message_input_container, 6 | .share_channel_modal_contents { 7 | .current_status_empty_emoji, 8 | .current_status_empty_emoji_cover, 9 | .emo_menu { 10 | color: $color-highlight; 11 | } 12 | 13 | .current_status_input.focus ~ .current_status_emoji_picker .current_status_empty_emoji { 14 | color: $base-font-color; 15 | } 16 | 17 | #msg_input { 18 | &.focus ~, 19 | &:focus ~ { 20 | #primary_file_button:not(:hover):not(.active), 21 | .emo_menu { 22 | color: $base-font-color; 23 | } 24 | } 25 | } 26 | 27 | .message_input:focus ~ { 28 | #primary_file_button:not(:hover):not(.active), 29 | .emo_menu { 30 | color: $base-font-color; 31 | } 32 | } 33 | } 34 | 35 | .current_status_emoji_picker { 36 | border-right-color: $color-shade-dark; 37 | } 38 | 39 | .current_status_input_for_team_menu { 40 | .current_status_presets { 41 | border-top: 1px solid $color-shade-darkest; 42 | 43 | .current_status_presets_section_header .header_label { 44 | color: $color-highlight; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/modules/modals/_direct-messages.scss: -------------------------------------------------------------------------------- 1 | #im_browser { 2 | .im_browser_row { 3 | border-top: 1px solid $color-shade-light; 4 | 5 | &.multiparty { 6 | color: $base-font-color; 7 | 8 | .member_image + .member_image:not(.ra):not(.ura) { 9 | border: 2px solid $color-shade-darkest; 10 | } 11 | } 12 | 13 | .im_unread_cnt { 14 | background: $color-red; 15 | color: $base-font-color; 16 | } 17 | 18 | &.disabled { 19 | color: $color-highlight; 20 | } 21 | } 22 | 23 | #im_list_container:not(.keyboard_active).not_scrolling .im_browser_row:not(.disabled_dm):hover, 24 | .im_browser_row.highlighted { 25 | background: $color-shade-darkest !important; 26 | border: 1px solid $color-shade-light !important; 27 | } 28 | } 29 | 30 | #im_browser_tokens { 31 | background: $color-shade-light; 32 | border: 1px solid $color-shade-lightest; 33 | 34 | &.active { 35 | border-color: $color-shade-lightest; 36 | box-shadow: 0 0 7px rgba($color-shade-lightest, 0.15); 37 | } 38 | 39 | .member_token { 40 | background: $color-base; 41 | border: 1px solid $color-shade-darkest; 42 | color: $base-font-color; 43 | 44 | &.ra { 45 | background: $color-red; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_mentions.scss: -------------------------------------------------------------------------------- 1 | #flex_contents .subheading:not(.empty)#mentions_options { 2 | background-color: $color-base; 3 | border-bottom-color: $color-shade-dark; 4 | color: $base-font-color; 5 | } 6 | 7 | .mention_day_container_div .day_divider { 8 | @extend .day_divider; 9 | 10 | &::before { 11 | background: none; 12 | border-color: $color-shade-dark; 13 | } 14 | } 15 | 16 | #member_mentions h3 a { 17 | color: $base-link-color; 18 | } 19 | 20 | a.internal_member_link { 21 | background: $color-shade-dark; 22 | color: $base-font-color; 23 | } 24 | 25 | a.c-member_slug, 26 | .c-member_slug--link, 27 | .c-mrkdwn__subteam--link { 28 | background: $color-shade-dark; 29 | border: 1px solid $color-shade-light; 30 | color: $base-font-color; 31 | 32 | &.active, 33 | &:hover { 34 | background: $color-shade-mid; 35 | color: $base-font-color; 36 | } 37 | } 38 | 39 | a.c-member_slug--mention, 40 | a.c-member_slug--mention:hover, 41 | .c-mrkdwn__broadcast--mention, 42 | .c-mrkdwn__broadcast--mention:hover, 43 | .c-mrkdwn__mention, 44 | .c-mrkdwn__mention:hover, 45 | .c-mrkdwn__subteam--mention, 46 | .c-mrkdwn__subteam--mention:hover { 47 | background-color: $base-font-color; 48 | border: 1px solid $color-shade-light; 49 | color: $color-shade-darker; 50 | } 51 | -------------------------------------------------------------------------------- /scss/modules/_color-overrides.scss: -------------------------------------------------------------------------------- 1 | .mini, 2 | .dull_grey, 3 | .flat_grey, 4 | .blue_link, 5 | .blue_fill, 6 | .slate_blue, 7 | .charcoal_grey, 8 | .indifferent_grey, 9 | .ts_tip_tip .subtle_silver { 10 | color: $base-font-color !important; 11 | } 12 | 13 | .greigh, 14 | .sky_blue, 15 | .severe_grey, 16 | .havana_blue, 17 | .burnt_violet, 18 | .plastic_grey, 19 | .cloud_silver, 20 | .sk_dark_gray, 21 | .sk_dark_grey, 22 | .subtle_silver, 23 | .old_petunia_grey { 24 | color: $color-highlight !important; 25 | } 26 | 27 | .clear_blue { 28 | color: $base-link-color !important; 29 | } 30 | 31 | .moscow_red, 32 | .yolk_orange, 33 | .mustard_yellow, 34 | .candy_red_on_hover:hover, 35 | .moscow_red_on_hover:hover { 36 | color: $color-red !important; 37 | } 38 | 39 | .seafoam_green { 40 | color: $color-green !important; 41 | } 42 | 43 | .candy_red_bg { 44 | background-color: $color-red !important; 45 | } 46 | 47 | .off_white_bg, 48 | .neutral_white_bg { 49 | background-color: $color-shade-dark !important; 50 | } 51 | 52 | .yolk_orange_bg, 53 | .burnt_violet_bg, 54 | .flexpane_grey_bg { 55 | background-color: $color-shade-mid !important; 56 | } 57 | 58 | .sky_blue_bg, 59 | .clear_blue_bg, 60 | .seafoam_green_bg { 61 | background-color: $color-shade-light !important; 62 | } 63 | 64 | .sk_black { 65 | color: inherit; 66 | } 67 | -------------------------------------------------------------------------------- /scss/modules/tooltips/_coachmarks.scss: -------------------------------------------------------------------------------- 1 | #coachmark { 2 | &.calls_interactive_mas_migration_coachmark_div, 3 | &.calls_iss_window_coachmark_div, 4 | &.calls_ss_main_coachmark_div, 5 | &.calls_ss_window_coachmark_div, 6 | &.calls_video_beta_coachmark_div, 7 | &.calls_video_ga_coachmark_div, 8 | &.channels_coachmark_div, 9 | &.direct_messages_coachmark_div, 10 | &.enterprise_analytics_usage_callouts_coachmark_div, 11 | &.gdrive_coachmark_div, 12 | &.highlights_arrows_coachmark_div, 13 | &.highlights_feedback_coachmark_div, 14 | &.highlights_message_coachmark_div, 15 | &.intl_channel_names_coachmark_div, 16 | &.invites_coachmark_div, 17 | &.name_tagging_coachmark_div, 18 | &.onboarding_coachmark_div, 19 | &.recent_mentions_coachmark_div, 20 | &.replies_coachmark_div, 21 | &.screenhero_deprecation_coachmark_div, 22 | &.starred_items_coachmark_div, 23 | &.unread_view_coachmark_div { 24 | @include coachmark($color-shade-light); 25 | } 26 | } 27 | 28 | #coachmark_footer { 29 | .coachmark_done, 30 | .coachmark_got_it, 31 | .coachmark_next_tip, 32 | .coachmark_ok { 33 | background: rgba($color-shade-lightest, 0.5) !important; 34 | } 35 | } 36 | 37 | #coachmark_interior { 38 | color: $base-font-color; 39 | 40 | .coachmark_close_btn { 41 | color: $base-font-color; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_download.scss: -------------------------------------------------------------------------------- 1 | .p-download_item { 2 | padding: 12px 12px 4px 16px; 3 | margin: 0; 4 | 5 | &__container &__name_row { 6 | color: $base-font-color; 7 | } 8 | 9 | 10 | &__actions { 11 | background: $color-base; 12 | } 13 | 14 | &__link--open, 15 | &__link--retry, 16 | &__link--show { 17 | color: $base-font-color; 18 | } 19 | } 20 | 21 | .p-downloads_list { 22 | &__shift_hint { 23 | background: linear-gradient(180deg, $color-shadow-transparent, $color-shade-dark 25%, $color-shade-dark); 24 | color: $base-font-color; 25 | } 26 | } 27 | 28 | .p-flexpane { 29 | &_header { 30 | background-color: $color-shade-dark; 31 | border-bottom-color: $color-shade-mid; 32 | 33 | &__control, 34 | &__control .c-icon { 35 | color: $base-font-color; 36 | 37 | &:hover { 38 | color: $base-link-color-active; 39 | } 40 | } 41 | } 42 | 43 | &__body { 44 | &--empty { 45 | background-color: $color-base; 46 | } 47 | 48 | .p-thread_drag_overlay { 49 | background-color: $color-shade-dark; 50 | 51 | &__subtitle, 52 | &__title { 53 | color: $base-font-color; 54 | } 55 | } 56 | } 57 | } 58 | 59 | .c-icon_button--light, 60 | .c-icon_button--light.c-button-unstyled { 61 | color: $base-link-color; 62 | 63 | &:hover { 64 | color: $base-link-color-active; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /scss/modules/pages/_legal.scss: -------------------------------------------------------------------------------- 1 | .legal-hero { 2 | background-color: $color-base; 3 | 4 | &.v--no-switch, 5 | .o-hero__header { 6 | background-color: $color-base; 7 | } 8 | 9 | .o-hero__header__headline--larger { 10 | color: $base-font-color; 11 | } 12 | } 13 | 14 | .legal-main { 15 | background-color: $color-shade-dark; 16 | 17 | &.v--no-switch { 18 | background-color: $color-shade-dark; 19 | border-bottom-color: $color-shade-light; 20 | border-top-color: $color-shade-light; 21 | } 22 | 23 | p { 24 | color: $base-font-color; 25 | } 26 | 27 | a { 28 | border-bottom-color: $color-shade-light; 29 | } 30 | 31 | @media screen and (min-width: 67.8125rem) { 32 | .c-nav--sidebar__listheader { 33 | color: $base-font-color; 34 | } 35 | 36 | .c-nav--sidebar__listitem { 37 | a { 38 | &.is-selected { 39 | color: $color-highlight; 40 | } 41 | } 42 | } 43 | } 44 | 45 | .t-contains-subtle-links a:not(.c-button) { 46 | color: $base-font-color; 47 | 48 | &:active, 49 | &:focus, 50 | &:hover { 51 | color: $color-highlight; 52 | } 53 | } 54 | } 55 | 56 | @media screen and (min-width: 67.8125rem) { 57 | .t-no-header .legal-main { 58 | background-color: $color-shade-dark; 59 | } 60 | } 61 | 62 | .t-no-header { 63 | .legal-hero.o-hero.v--short { 64 | background-color: $color-shade-dark; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /scss/modules/menu/_team.scss: -------------------------------------------------------------------------------- 1 | #team_menu { 2 | background: $color-shade-dark; 3 | border-bottom: 2px solid $color-shade-dark; 4 | color: $base-font-color; 5 | 6 | &.active, 7 | &:hover { 8 | background: $color-shade-dark !important; 9 | border-bottom-color: $color-shade-dark !important; 10 | 11 | i { 12 | color: $base-font-color; 13 | } 14 | } 15 | 16 | i { 17 | color: $color-highlight; 18 | } 19 | 20 | .presence { 21 | .presence_icon { 22 | text-shadow: 0 1px 1px $color-shadow-light; 23 | } 24 | } 25 | 26 | .team_name_caret, 27 | .notifications_menu_btn { 28 | color: $base-font-color !important; 29 | } 30 | } 31 | 32 | #team_menu_user { 33 | color: $color-highlight; 34 | } 35 | 36 | #team_menu_user_name, 37 | #team_menu_user_details { 38 | color: $base-font-color !important; 39 | opacity: 0.75; 40 | } 41 | 42 | .slack_menu_section::before { 43 | border-top-color: $color-base; 44 | } 45 | 46 | .slack_menu_header_secondary { 47 | color: $color-highlight; 48 | } 49 | 50 | .slack_menu_download { 51 | background-color: $color-shade-dark; 52 | 53 | ts-icon { 54 | color: $color-highlight; 55 | } 56 | } 57 | 58 | #menu_items_scroller::-webkit-scrollbar-track { 59 | background: $color-base !important; 60 | } 61 | 62 | #limit_meter:hover #limit_meter_message_body { 63 | color: $base-font-color; 64 | } 65 | 66 | #limit_meter_message_body { 67 | color: $color-highlight; 68 | } 69 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_billing.scss: -------------------------------------------------------------------------------- 1 | .billing_selection { 2 | border-color: $color-shade-darkest; 3 | color: $base-font-color !important; 4 | text-shadow: 0 1px 1px $color-shadow-dark; 5 | 6 | &:hover { 7 | border-color: $color-shade-lightest; 8 | } 9 | 10 | &.active { 11 | background: $color-shade-light; 12 | border-color: $color-shade-lightest; 13 | } 14 | 15 | &.billing_selection--refactor { 16 | border-color: $color-shade-light; 17 | text-shadow: 0 1px 1px $color-shadow-dark; 18 | 19 | &:hover { 20 | border-color: $color-shade-lightest; 21 | } 22 | 23 | &.active { 24 | background: $color-shade-light; 25 | border-color: $color-shade-lightest; 26 | } 27 | } 28 | 29 | .billing_selection__price { 30 | color: $base-font-color; 31 | } 32 | } 33 | 34 | #billing_contacts_container { 35 | background: $color-shade-dark; 36 | border-top: 1px solid $color-shade-darkest; 37 | } 38 | 39 | .billing_contact { 40 | border-bottom: 1px solid $color-base; 41 | } 42 | 43 | table.billing tr:hover td { 44 | background: $color-shade-dark; 45 | } 46 | 47 | .link_billing_statement { 48 | color: $base-font-color !important; 49 | } 50 | 51 | .link_invoice_id, 52 | .link_statement_id { 53 | color: $base-link-color !important; 54 | } 55 | 56 | .billing_invoice tbody tbody tr { 57 | color: $base-font-color !important; 58 | } 59 | 60 | .billing_settings_label_name { 61 | color: $base-font-color; 62 | } 63 | -------------------------------------------------------------------------------- /scss/layout/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar-track { 2 | background: $color-shade-dark !important; 3 | border-left-color: $color-shade-dark !important; 4 | border-right-color: $color-shade-dark !important; 5 | color: $color-shade-dark !important; 6 | } 7 | 8 | ::-webkit-scrollbar-thumb { 9 | background: $color-shade-light !important; 10 | border-left-color: $color-shade-dark !important; 11 | border-right-color: $color-shade-dark !important; 12 | color: $color-base !important; 13 | } 14 | 15 | ::-webkit-scrollbar-corner { 16 | background: $color-base !important; 17 | } 18 | 19 | .supports_custom_scrollbar { 20 | #messages_container::after { 21 | background: none !important; 22 | } 23 | } 24 | 25 | .monkey_scroll_bar { 26 | background: $color-shade-mid; 27 | } 28 | 29 | .monkey_scroll_handle_inner { 30 | background: $color-shade-light; 31 | border: 1px solid $color-shade-lightest; 32 | } 33 | 34 | .monkey_scroll_bar_native_scrollbar_shim { 35 | background: transparent; 36 | } 37 | 38 | #client-ui { 39 | .monkey_scroll_bar { 40 | background: $color-shade-mid; 41 | } 42 | 43 | .monkey_scroll_handle_inner { 44 | background: $color-shade-light; 45 | border: 3px solid $color-base; 46 | } 47 | } 48 | 49 | .c-scrollbar--monkey .c-scrollbar { 50 | &__track { 51 | background: $color-shade-mid; 52 | } 53 | 54 | &__bar { 55 | background: $color-shade-light; 56 | box-shadow: 0 3px 0 $color-base, 0 -3px 0 $color-base; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_help.scss: -------------------------------------------------------------------------------- 1 | .help_pages.help_pages { 2 | p { 3 | color: $base-font-color; 4 | } 5 | 6 | a { 7 | border-bottom-color: $color-shade-light; 8 | } 9 | 10 | .o-hero, 11 | .o-hero__header { 12 | background-color: $color-base; 13 | } 14 | 15 | .o-hero__header { 16 | color: $base-font-color; 17 | } 18 | 19 | .o-section--feature { 20 | background-color: $color-shade-dark; 21 | border-top-color: $color-shade-light; 22 | } 23 | 24 | .c-form__container { 25 | .c-form__feedback { 26 | color: $color-red; 27 | } 28 | } 29 | 30 | .c-form__input, 31 | .c-input { 32 | background-color: $color-base; 33 | border-color: $color-shade-light; 34 | color: $base-font-color; 35 | } 36 | 37 | .drop_zone { 38 | background: $color-base; 39 | border-color: $color-shade-lightest; 40 | } 41 | 42 | .drop_zone_attachment { 43 | border-bottom-color: $color-shade-light; 44 | } 45 | 46 | .drop_zone_remove_attachment { 47 | background-color: $color-base; 48 | } 49 | 50 | .c-form__notice { 51 | background-color: $color-shade-light; 52 | border-color: $color-shade-lightest; 53 | color: $base-font-color; 54 | 55 | &.is-error { 56 | border-left-color: $color-red; 57 | } 58 | } 59 | 60 | .c-nav--footer { 61 | border-top-color: $color-shade-light; 62 | } 63 | } 64 | 65 | @media screen and (min-width: 48rem) { 66 | .help_pages.help_pages .o-hero { 67 | background-color: $color-base; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /scss/helpers/_variables.scss: -------------------------------------------------------------------------------- 1 | // Theme Colors 2 | $color-base: #222 !default; 3 | $color-highlight: #949494 !default; 4 | $color-red: #bf360c !default; 5 | $color-green: adjust-hue($color-red, 140) !default; 6 | $color-yellow: #fff6d1 !default; 7 | 8 | $color-shade-darkest: #000 !default; 9 | $color-shade-darker: #222222 !default; 10 | $color-shade-dark: #363636 !default; 11 | $color-shade-mid: #424242 !default; 12 | $color-shade-light: #545454 !default; 13 | $color-shade-lightest: #828282 !default; 14 | 15 | // Font Colors 16 | $base-font-color: #e6e6e6 !default; 17 | 18 | $base-link-color: $color-highlight !default; 19 | $base-link-color-active: #c7c7c7 !default; 20 | 21 | // Grayscale Colors 22 | $black: #000; 23 | $white: #fff; 24 | 25 | // Shadow Colors 26 | $color-shadow-dark: rgba($black, 0.5) !default; 27 | $color-shadow-medium: rgba($black, 0.25) !default; 28 | $color-shadow-light: rgba($black, 0.15) !default; 29 | $color-shadow-transparent: rgba(255, 255, 255, 0) !default; 30 | 31 | // Code Colors 32 | $code-colors: ( 33 | keyword: #ce93d8, atom: #9fa8da, number: #a5d6a7, def: #536dfe, 34 | variable: #9fa8da, variable-alt: #c5e1a5, comment: #ffcc80, string: #ef9a9a, 35 | string-alt: #ffab91, meta: #eee, qualifier: #eee, builtin: #b39ddb, 36 | bracket: #e6ee9c, tag: #a5d6a7, attribute: #40c4ff, header: #80cbc4, 37 | quote: #b0bec5, hr: $color-shade-dark, link: $base-link-color 38 | ); 39 | 40 | // Emoji Hover Colors 41 | $emoji-hover-colors: ( 42 | 0: #b7e887, 1: #b5e0fe, 2: #f9ef67, 3: #f3c1fd, 4: #ffe1ae, 5: #e0dfff 43 | ); 44 | 45 | // Font Families 46 | // $base-font-family may be set in themes to override the chat font-family 47 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_groups.scss: -------------------------------------------------------------------------------- 1 | #user_groups_pane .mention { 2 | background: rgba($color-red, 0.25); 3 | border: 0; 4 | border-radius: 3px; 5 | padding: 2px; 6 | } 7 | 8 | #user_groups_container { 9 | .info_panel { 10 | background: $color-base; 11 | border: 1px solid $color-shade-light; 12 | } 13 | 14 | .mention { 15 | background-color: rgba($color-red, 0.25) !important; 16 | } 17 | } 18 | 19 | #user_groups_header { 20 | .user_groups_search .icon_search { 21 | color: $color-highlight; 22 | } 23 | 24 | a.icon_close { 25 | color: $base-link-color; 26 | 27 | &:hover { 28 | color: $base-link-color-active; 29 | } 30 | } 31 | } 32 | 33 | .p-user_group_base_row__list_item { 34 | background: transparent; 35 | 36 | &:hover { 37 | background: $color-shade-dark; 38 | } 39 | } 40 | 41 | .user_group_item { 42 | border-bottom: 1px solid $color-shade-light; 43 | 44 | a { 45 | color: $base-link-color; 46 | } 47 | } 48 | 49 | #flex_contents { 50 | .user_group_item { 51 | &:hover { 52 | background-color: $color-base; 53 | 54 | h4 { 55 | color: $base-font-color; 56 | } 57 | } 58 | } 59 | 60 | .flexpane_tab_toolbar { 61 | #user_group_edit { 62 | background-color: $color-base; 63 | 64 | &.user_group_edit--flexpane .tab_action_button { 65 | color: $base-font-color; 66 | } 67 | } 68 | } 69 | } 70 | 71 | .user_group_invite_member_small { 72 | .add_icon { 73 | color: $color-highlight; 74 | } 75 | } 76 | 77 | #user_group_member_invite_div { 78 | .disabled .lfs_item.lfs_token { 79 | background-color: $color-shade-lightest; 80 | border-color: $color-shade-lightest; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /scss/modules/modals/_channels.scss: -------------------------------------------------------------------------------- 1 | .channel_modal_header { 2 | color: $base-font-color; 3 | } 4 | 5 | #channel_browser { 6 | .channel_browser_row { 7 | border-top: 1px solid $color-shade-dark; 8 | color: $base-font-color; 9 | } 10 | 11 | .channel_browser_row_header { 12 | color: $base-font-color; 13 | } 14 | 15 | .channel_browser_creator_name { 16 | color: $color-highlight; 17 | } 18 | 19 | .channel_browser_open, 20 | .channel_browser_preview { 21 | color: $color-highlight; 22 | } 23 | 24 | #channel_list_container:not(.keyboard_active).not_scrolling .channel_browser_row:hover, 25 | .channel_browser_row.highlighted { 26 | background: $color-shade-darkest; 27 | border: 1px solid $color-shade-light; 28 | } 29 | 30 | .channel_browser_divider { 31 | background: transparent; 32 | color: $color-highlight; 33 | } 34 | 35 | .channel_browser_sort_container::after { 36 | color: $base-font-color; 37 | } 38 | 39 | .channel_browser_channel_purpose { 40 | color: $base-font-color; 41 | } 42 | } 43 | 44 | .channel_invite_member .add_icon, 45 | .channel_invite_member_small .add_icon { 46 | color: $base-link-color; 47 | } 48 | 49 | .channel_invite_member .name_container .not_in_token, 50 | .channel_invite_member_small .name_container .not_in_token { 51 | color: $color-highlight !important; 52 | } 53 | 54 | .channel_invite_member .invite_user_group_avatar, 55 | .channel_invite_member_small .invite_user_group_avatar { 56 | background-color: $color-shade-darkest; 57 | color: $base-font-color; 58 | } 59 | 60 | #invite_members_container { 61 | .lfs_input_container { 62 | background: $color-shade-light; 63 | } 64 | } 65 | 66 | #notifications_not_working p.highlight_yellow_bg a { 67 | color: $base-font-color; 68 | } 69 | -------------------------------------------------------------------------------- /scss/modules/menu/_tabcomplete.scss: -------------------------------------------------------------------------------- 1 | .tab_complete_ui { 2 | background: $color-base; 3 | border: 1px solid $color-shade-dark; 4 | box-shadow: 0 1px 15px $color-shadow-dark; 5 | 6 | .tab_complete_ui_header { 7 | background: padding-box $color-shade-darkest; 8 | border-bottom: 1px solid $color-shade-dark; 9 | color: $base-font-color; 10 | text-shadow: 0 1px $color-shadow-light; 11 | } 12 | 13 | ul { 14 | &.type_emoji li { 15 | color: $base-font-color; 16 | } 17 | 18 | &.type_members { 19 | .broadcast_info, 20 | .realname { 21 | color: $base-font-color; 22 | } 23 | 24 | .unify_broadcast { 25 | color: $base-font-color; 26 | 27 | .ts_icon_broadcast { 28 | color: $color-highlight; 29 | } 30 | } 31 | } 32 | 33 | &.type_cmds { 34 | li { 35 | &.tab_complete_ui_group { 36 | .group_name { 37 | color: $base-font-color !important; 38 | } 39 | 40 | .group_divider { 41 | border-bottom: 0; 42 | border-top-color: $color-shade-dark; 43 | } 44 | } 45 | 46 | &.tab_complete_ui_item { 47 | .cmd-left-td, 48 | .cmd-right-td { 49 | color: $color-highlight; 50 | } 51 | } 52 | } 53 | 54 | .cmdname { 55 | color: $base-font-color; 56 | } 57 | 58 | .cmddesc { 59 | color: $color-highlight; 60 | } 61 | } 62 | } 63 | 64 | li.tab_complete_ui_item, 65 | li.tab_complete_ui_group { 66 | border-bottom: 1px solid $color-shade-dark; 67 | 68 | &.active { 69 | background: $color-shade-light; 70 | border-bottom-color: $color-shade-dark; 71 | text-shadow: 0 1px $color-shadow-light; 72 | 73 | span { 74 | color: $base-font-color !important; 75 | } 76 | } 77 | } 78 | 79 | .not_in_channel { 80 | color: $color-highlight; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /scss/modules/modals/_quick-search.scss: -------------------------------------------------------------------------------- 1 | ts-jumper { 2 | ts-jumper-container { 3 | background: $color-base; 4 | box-shadow: 0 1px 10px $color-shadow-dark; 5 | } 6 | 7 | ts-jumper-help, 8 | .p-jumper__help { 9 | background: $color-base; 10 | color: $color-highlight; 11 | } 12 | 13 | input[type=text] { 14 | border: 1px solid $color-shade-darkest !important; 15 | color: $base-font-color; 16 | 17 | &:focus { 18 | border: 1px solid rgba($color-shade-dark, 0.8) !important; 19 | color: $base-font-color; 20 | } 21 | 22 | &::-webkit-input-placeholder, 23 | &:focus::-webkit-input-placeholder, 24 | &::-moz-placeholder, 25 | &:focus::-moz-placeholder { 26 | color: $base-font-color; 27 | } 28 | } 29 | 30 | ol { 31 | li { 32 | color: $base-font-color; 33 | 34 | .channel_name, 35 | .member_real_name, 36 | .member_username, 37 | .team_username { 38 | color: $color-highlight; 39 | } 40 | 41 | .channel_not_member, 42 | .team_username, 43 | .member_real_name + .member_username, 44 | .member_username + .member_real_name, 45 | ts-icon { 46 | color: $color-highlight; 47 | } 48 | 49 | .unread_count { 50 | background: $color-red; 51 | color: $base-font-color; 52 | text-shadow: 0 1px 0 $color-shadow-medium; 53 | } 54 | 55 | &.highlighted { 56 | background: $color-shade-lightest !important; 57 | color: $base-font-color !important; 58 | } 59 | } 60 | 61 | &:not(.keyboard_active) li:hover { 62 | background: $color-shade-lightest !important; 63 | color: $base-font-color !important; 64 | } 65 | 66 | li.highlighted, 67 | &:not(.keyboard_active) li:hover { 68 | .channel_not_member, 69 | .member_real_name + .member_username, 70 | .member_username + .member_real_name, 71 | i.presence_icon, 72 | ts-icon { 73 | color: $base-font-color; 74 | } 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /scss/modules/modals/_invite.scss: -------------------------------------------------------------------------------- 1 | .admin_invites_account_type_option { 2 | border-bottom: 1px solid $color-shade-dark; 3 | 4 | p { 5 | color: $base-font-color; 6 | } 7 | 8 | .option_arrow { 9 | color: $color-highlight; 10 | } 11 | 12 | &:hover:not(.disabled) h3 { 13 | color: $base-font-color; 14 | } 15 | 16 | &.disabled { 17 | .account_type_disabled_hover { 18 | background: $color-shadow-transparent; 19 | } 20 | 21 | &:hover .account_type_disabled_hover { 22 | background: rgba($color-base, 0.95); 23 | } 24 | } 25 | } 26 | 27 | .admin_invite_row, 28 | .admin_invites_custom_message_container { 29 | .delete_row, 30 | .hide_custom_message { 31 | color: $color-highlight; 32 | 33 | &:hover { 34 | color: $color-red; 35 | } 36 | } 37 | 38 | &.delete_highlight { 39 | background: rgba($color-red, 0.4); 40 | } 41 | } 42 | 43 | #admin_invites_channel_picker_container { 44 | border-bottom: 1px solid $color-shade-dark; 45 | } 46 | 47 | #admin_invites_add_row { 48 | background: $color-shade-light; 49 | border: 1px solid $color-shade-dark; 50 | } 51 | 52 | #admin_invites_workflow .lazy_filter_select .lfs_input_container { 53 | background-color: $color-shade-light; 54 | } 55 | 56 | #channel_invite_tokens { 57 | background-color: $color-shade-light; 58 | border-color: $color-shade-lightest; 59 | 60 | &.active { 61 | border-color: $color-highlight; 62 | box-shadow: 0 0 7px rgba($color-highlight, 0.15); 63 | } 64 | 65 | .member_token { 66 | background: $color-base; 67 | color: $base-font-color; 68 | 69 | &.ra { 70 | background: rgba($color-red, 0.4); 71 | } 72 | } 73 | } 74 | 75 | #admin_invites_alert { 76 | background: $color-shade-light; 77 | border-color: $color-shade-lightest; 78 | } 79 | 80 | .channel_invite_member, 81 | .channel_invite_member_small, 82 | .channel_invite_pending_user_small { 83 | .add_icon { 84 | color: $base-font-color; 85 | } 86 | 87 | .invite_user_group_avatar { 88 | background-color: $color-base; 89 | color: $base-font-color; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /scss/modules/modals/_dialog.scss: -------------------------------------------------------------------------------- 1 | .c-dialog { 2 | &__header { 3 | background: $color-shade-darkest; 4 | 5 | .c-dialog__title, 6 | .c-dialog__close { 7 | color: $base-font-color; 8 | } 9 | 10 | .c-dialog__close:hover { 11 | color: $base-link-color; 12 | } 13 | } 14 | 15 | &__body { 16 | background: $color-shade-darker; 17 | 18 | .p-multi_file_upload { 19 | &__add_file_btn { 20 | color: $base-link-color; 21 | } 22 | 23 | &__container { 24 | .p-galler_scroller { 25 | &__wrapper { 26 | background-color: $color-shade-darkest; 27 | border-color: $color-shade-dark; 28 | } 29 | } 30 | } 31 | } 32 | 33 | .p-share_dialog_message_input { 34 | background-color: $color-shade-darkest; 35 | border-color: $color-shade-dark; 36 | color: $base-font-color; 37 | 38 | &.focus { 39 | border-color: $color-shade-light; 40 | box-shadow: unset; 41 | } 42 | } 43 | 44 | .p-share_dialog__section:last-child { 45 | background-color: $color-shade-dark; 46 | border-color: $color-shade-darkest; 47 | } 48 | 49 | .p-file_upload_dialog__preview, 50 | .p-file_upload_dialog__preview_image { 51 | background-color: $color-shade-darkest; 52 | border-color: $color-shade-dark; 53 | } 54 | 55 | textarea.c-input_textarea, 56 | input.c-input_text { 57 | border-color: $color-shade-dark; 58 | color: $base-font-color; 59 | 60 | .c-input_character_count::after { 61 | background-color: $color-shade-dark; 62 | color: $base-font-color; 63 | } 64 | 65 | &:focus { 66 | 67 | border-color: $color-shade-light; 68 | box-shadow: unset; 69 | } 70 | } 71 | } 72 | 73 | &__footer { 74 | background: $color-shade-darker; 75 | 76 | .c-button { 77 | background-color: $color-shade-light; 78 | color: $base-font-color; 79 | } 80 | 81 | .p-file_upload_dialog__footer_share_inputs { 82 | color: $base-font-color; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /scss/modules/inputs/_filter-select.scss: -------------------------------------------------------------------------------- 1 | .lazy_filter_select { 2 | &.disabled { 3 | background: $color-shade-dark; 4 | 5 | input.lfs_input { 6 | background: $color-shade-lightest; 7 | } 8 | } 9 | 10 | .lfs_input_container { 11 | background-color: $color-shade-light; 12 | border-color: $color-shade-darkest; 13 | 14 | &.active, 15 | &:hover { 16 | border-color: $color-shade-dark; 17 | } 18 | 19 | &.active { 20 | box-shadow: 0 0 7px rgba($color-base, 0.15); 21 | } 22 | } 23 | 24 | .lfs_list_container { 25 | background: $color-base; 26 | border-color: $color-shade-darkest; 27 | box-shadow: 0 0 3px $color-shadow-dark; 28 | } 29 | 30 | .lfs_list .lfs_item { 31 | &.selected { 32 | color: $base-font-color; 33 | 34 | .c-member__current-status .prevent_copy_paste, 35 | .c-member__current-status--small::before, 36 | .c-member__display-name, 37 | .c-member__name, 38 | .c-member__secondary-name { 39 | color: $base-font-color !important; 40 | } 41 | } 42 | 43 | &.disabled { 44 | color: $color-highlight; 45 | } 46 | 47 | &.active { 48 | background-color: $color-shade-darkest; 49 | border-color: $color-shade-dark; 50 | color: $base-font-color; 51 | } 52 | } 53 | 54 | .lfs_token { 55 | background: $color-base; 56 | border: 1px solid $color-shade-darkest; 57 | color: $base-font-color; 58 | 59 | &::after { 60 | color: $base-font-color; 61 | } 62 | } 63 | 64 | &.single .lfs_input_container { 65 | &.active::after, 66 | &:hover::after { 67 | color: $base-font-color; 68 | } 69 | } 70 | } 71 | 72 | #select_share_channels .lazy_filter_select { 73 | .lfs_value .lfs_item.selected { 74 | color: $base-font-color !important; 75 | 76 | .ts_icon:not(.presence_icon) { 77 | color: $color-highlight !important; 78 | } 79 | } 80 | 81 | .lfs_item { 82 | color: $color-highlight !important; 83 | 84 | .ts_icon:not(.presence_icon) { 85 | color: $color-highlight !important; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_nav.scss: -------------------------------------------------------------------------------- 1 | .widescreen:not(.nav_open) { 2 | color: $base-font-color; 3 | 4 | nav#site_nav { 5 | @media only screen and (min-width: 1441px) { 6 | background: rgba($color-base, 0.9); 7 | } 8 | 9 | h3 { 10 | color: $base-font-color; 11 | } 12 | 13 | ul a { 14 | color: $base-link-color; 15 | 16 | &:link, 17 | &:visited, 18 | &:hover, 19 | &:active { 20 | color: $base-link-color-active; 21 | } 22 | } 23 | 24 | #user_menu_name { 25 | color: $color-highlight; 26 | } 27 | } 28 | } 29 | 30 | nav#site_nav { 31 | background: $color-shade-dark; 32 | 33 | #user_menu_contents:hover { 34 | background: $color-base; 35 | color: $base-font-color; 36 | } 37 | } 38 | 39 | header { 40 | background: $color-shade-dark; 41 | 42 | #header_team_nav { 43 | li a { 44 | color: $base-font-color; 45 | 46 | &:hover { 47 | background: $color-base; 48 | color: $base-font-color; 49 | } 50 | 51 | .team_icon.ts_icon_plus { 52 | background: $color-shade-darkest; 53 | color: $color-highlight; 54 | } 55 | } 56 | 57 | #add_team_option { 58 | border-top: 1px solid $color-shade-darkest; 59 | } 60 | } 61 | } 62 | 63 | html.no_touch { 64 | header { 65 | #header_team_nav { 66 | li a { 67 | color: $base-font-color; 68 | 69 | &:hover { 70 | background: $color-base; 71 | color: $base-font-color; 72 | } 73 | } 74 | } 75 | 76 | #header_team_name a:hover, 77 | #menu_toggle:hover { 78 | color: $base-link-color-active; 79 | } 80 | 81 | .header_btns a:hover { 82 | color: $base-link-color-active; 83 | 84 | .label { 85 | color: $color-highlight; 86 | } 87 | } 88 | } 89 | } 90 | 91 | nav#site_nav h3, 92 | #header_team_name, 93 | header #header_team_name a { 94 | color: $base-link-color; 95 | } 96 | 97 | nav#site_nav #footer_nav a, 98 | #header_team_name:hover .fa-caret-down, 99 | .widescreen:not(.nav_open) nav#site_nav #footer_nav a { 100 | color: $base-link-color-active; 101 | } 102 | 103 | #home_footer a { 104 | color: $base-link-color-active; 105 | } 106 | -------------------------------------------------------------------------------- /scss/modules/modals/_file.scss: -------------------------------------------------------------------------------- 1 | .fs_modal_file_viewer_header { 2 | background-color: $color-shade-dark; 3 | box-shadow: 0 1px 0 $color-shadow-dark; 4 | 5 | .btn { 6 | color: $base-font-color; 7 | } 8 | 9 | .star { 10 | color: $color-highlight; 11 | } 12 | 13 | .control_btn, 14 | a.control_btn { 15 | color: $base-font-color; 16 | 17 | &:link, 18 | &:visited { 19 | color: $base-font-color; 20 | } 21 | 22 | &:focus, 23 | &:hover { 24 | color: $color-highlight; 25 | } 26 | 27 | &.active, 28 | &:active { 29 | background: $color-shade-light; 30 | } 31 | } 32 | 33 | .file_size, 34 | .muted_tooltip_info { 35 | color: $color-highlight; 36 | } 37 | 38 | .close_btn { 39 | &::after { 40 | border-right: 1px solid $color-shade-light; 41 | } 42 | } 43 | } 44 | 45 | .fs_modal_file_viewer_content { 46 | .viewer { 47 | background-color: $color-shade-darkest; 48 | color: $base-font-color !important; 49 | 50 | .next_btn, 51 | .previous_btn { 52 | ts-icon { 53 | background: $color-shade-light; 54 | box-shadow: 0 1px 1px 0 $color-shadow-medium; 55 | } 56 | 57 | &:focus:not([disabled]), 58 | &:hover:not([disabled]) { 59 | background: rgba($color-shade-lightest, 0.25); 60 | color: $base-font-color; 61 | } 62 | 63 | &[disabled] { 64 | &:focus, 65 | &:hover { 66 | color: rgba($color-highlight, 0.8); 67 | } 68 | } 69 | } 70 | } 71 | 72 | .aside_panel { 73 | background-color: $color-base; 74 | box-shadow: -1px 0 0 $color-shadow-medium; 75 | } 76 | 77 | .comment_header { 78 | background-color: transparent; 79 | border-bottom: 1px solid $color-shade-darkest; 80 | } 81 | 82 | .no_comment { 83 | background-color: $color-base; 84 | color: $color-highlight; 85 | } 86 | 87 | .aside_close_btn { 88 | color: $base-font-color; 89 | } 90 | 91 | #file_comment { 92 | color: $base-font-color; 93 | } 94 | } 95 | 96 | #file_comment_textarea.texty_comment_input { 97 | background: $color-base; 98 | border-color: $color-shade-dark; 99 | color: $base-font-color; 100 | 101 | &.focus, 102 | &:hover { 103 | border-color: $color-shade-dark; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /scss/modules/emojis/_base.scss: -------------------------------------------------------------------------------- 1 | .p-emoji_picker { 2 | background: $color-shade-darkest !important; 3 | color: $base-font-color !important; 4 | 5 | &[data-using-keyboard="true"] .p-emoji_picker__list_item { 6 | @for $i from 0 through 5 { 7 | &[data-color-index="#{$i}"].key_selection { 8 | background: transparentize(map-get($emoji-hover-colors, $i), 0.5); 9 | } 10 | } 11 | } 12 | 13 | &__list_item { 14 | text-shadow: 0 1px $color-shadow-light; 15 | 16 | @for $i from 0 through 5 { 17 | &[data-color-index="#{$i}"]:hover, 18 | &[data-color-index="#{$i}"].key_selection { 19 | background: transparentize(map-get($emoji-hover-colors, $i), 0.5); 20 | } 21 | } 22 | } 23 | 24 | &__heading, 25 | &__list_container, 26 | &__input_container { 27 | background: $color-base; 28 | } 29 | 30 | &__group_tabs { 31 | border-bottom-color: $color-shade-mid; 32 | } 33 | 34 | &__group_tab { 35 | color: $base-link-color; 36 | 37 | &:hover { 38 | background: $color-shade-dark; 39 | color: $base-link-color-active; 40 | } 41 | 42 | &--active { 43 | background: $color-shade-light; 44 | border-bottom-color: $color-shade-mid; 45 | color: $base-font-color; 46 | } 47 | } 48 | 49 | &__icon_search { 50 | color: $color-highlight; 51 | } 52 | 53 | &__content:hover .p-emoji_picker__skintone_btn_container { 54 | background: $color-base; 55 | border-color: $color-base; 56 | } 57 | 58 | &__skintone_options { 59 | background: $color-base; 60 | } 61 | 62 | &__tip, 63 | &__no_results { 64 | i { 65 | color: $color-highlight; 66 | } 67 | } 68 | 69 | &__tip { 70 | color: $base-font-color; 71 | } 72 | 73 | &__no_results { 74 | color: $color-highlight; 75 | } 76 | 77 | &__preview_text { 78 | background: $color-shade-darkest; 79 | color: $base-font-color; 80 | } 81 | 82 | &__footer { 83 | background: $color-shade-darkest; 84 | border-top-color: $color-shade-dark; 85 | 86 | .p-emoji_picker__heading { 87 | background: $color-shade-darkest; 88 | } 89 | } 90 | 91 | &__emoji_deluxe_label { 92 | color: $color-highlight; 93 | } 94 | } 95 | 96 | input[type="text"].p-emoji_picker__input { 97 | &:focus { 98 | border-color: $color-shade-light; 99 | box-shadow: none; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /scss/modules/messaging/_unreads.scss: -------------------------------------------------------------------------------- 1 | #unread_msgs_scroller_div { 2 | &::after { 3 | background: transparent; 4 | } 5 | 6 | &.loading { 7 | background-image: none; 8 | 9 | &::before { 10 | color: $color-highlight; 11 | } 12 | } 13 | } 14 | 15 | #unread_msgs_div { 16 | .day_divider .day_divider_line { 17 | border-top-color: $color-shade-dark; 18 | } 19 | } 20 | 21 | .unread_group { 22 | &.marked_as_read .unread_group_header { 23 | background: $color-base; 24 | } 25 | } 26 | 27 | .unread_group { 28 | .unread_group_header { 29 | background: $color-shade-dark; 30 | border-top-color: $color-shade-light; 31 | color: $base-font-color; 32 | 33 | .unread_group_collapse_toggle { 34 | &:hover ts-icon { 35 | color: $base-font-color; 36 | } 37 | } 38 | 39 | .unread_group_collapse_caret { 40 | .ts_icon_caret_down { 41 | color: $color-highlight; 42 | } 43 | } 44 | 45 | .unread_group_mark, 46 | .unread_keyboard { 47 | background: $color-base; 48 | } 49 | } 50 | 51 | &.active { 52 | .unread_group_header { 53 | background: $color-shade-darkest; 54 | border-top-color: $color-shade-light; 55 | color: $base-font-color; 56 | } 57 | } 58 | } 59 | 60 | 61 | .collapsed .unread_group_header .ts_icon_caret_right, 62 | .collapsing .unread_group_header .ts_icon_caret_right { 63 | color: $color-highlight; 64 | } 65 | 66 | .mark_as_read_checkmark { 67 | color: $color-highlight; 68 | } 69 | 70 | .bottom_mark_all_read { 71 | border-top-color: $color-shade-dark; 72 | } 73 | 74 | .unread_group_header_name { 75 | a { 76 | color: $base-font-color; 77 | } 78 | } 79 | 80 | .unread_group_footer { 81 | .unread_group_new { 82 | .unread_group_new_text { 83 | color: $color-highlight; 84 | } 85 | 86 | &:hover .unread_group_new_text { 87 | color: $color-highlight; 88 | } 89 | } 90 | } 91 | 92 | .unread_empty_state_message { 93 | color: $color-highlight; 94 | } 95 | 96 | .unread_empty_state_undo_inner { 97 | background: $color-shade-darkest; 98 | color: $base-font-color; 99 | } 100 | 101 | .unread_empty_state_undo_action { 102 | color: $base-font-color; 103 | } 104 | 105 | .unread_empty_state_refresh { 106 | background: rgba($color-base, 0.97); 107 | } 108 | 109 | .unread_msgs_loading { 110 | background: $color-base; 111 | background-image: none; 112 | } 113 | -------------------------------------------------------------------------------- /scss/modules/team/_base.scss: -------------------------------------------------------------------------------- 1 | .c-member__display-name, 2 | .c-team__display-name, 3 | .c-usergroup__handle { 4 | color: $base-font-color; 5 | } 6 | 7 | .c-member__current-status--small::before, 8 | .c-member__secondary-name--large + .c-member__current-status--large::before, 9 | .c-member__secondary-name--medium + .c-member__current-status--medium::before { 10 | color: $base-font-color; 11 | } 12 | 13 | .c-member .external_team_badge { 14 | background-color: $color-shade-light; 15 | box-shadow: 0 0 0 2px $color-shade-light; 16 | 17 | &.default { 18 | background-color: $color-highlight; 19 | color: $base-font-color; 20 | text-shadow: 0 1px 1px $color-shadow-light; 21 | } 22 | 23 | &::after { 24 | box-shadow: inset 0 0 0 1px $color-shade-light; 25 | } 26 | } 27 | 28 | .c-member__name, 29 | .c-team__name, 30 | .c-usergroup__name { 31 | &--small { 32 | color: $base-font-color; 33 | } 34 | } 35 | 36 | .c-member--small .presence { 37 | color: $color-highlight; 38 | } 39 | 40 | .c-member--small .team_image { 41 | &.icon_16 { 42 | border-color: $color-shade-dark; 43 | } 44 | 45 | &.default { 46 | background-color: $color-highlight; 47 | color: $base-font-color; 48 | text-shadow: 0 1px 1px $color-shadow-light; 49 | } 50 | } 51 | 52 | .c-member--dark { 53 | .c-member__current-status { 54 | color: $color-highlight; 55 | 56 | &::before { 57 | color: $color-highlight; 58 | } 59 | } 60 | 61 | .c-member__name, 62 | .c-member__secondary-name { 63 | color: $color-highlight; 64 | } 65 | 66 | .c-member__display-name, 67 | .presence { 68 | color: $base-font-color; 69 | } 70 | } 71 | 72 | .c-member--medium { 73 | color: $color-highlight; 74 | 75 | .presence { 76 | color: $color-highlight; 77 | } 78 | } 79 | 80 | .c-member__secondary-name--medium { 81 | color: $base-font-color; 82 | } 83 | 84 | .c-member--large { 85 | color: $color-highlight; 86 | } 87 | 88 | .c-member__display-name--large, 89 | .c-member__title--large { 90 | color: $base-font-color; 91 | } 92 | 93 | .c-member__other-names--large { 94 | color: $color-highlight; 95 | } 96 | 97 | .c-usergroup--small .c-usergroup__icon { 98 | background-color: $color-highlight; 99 | color: $base-font-color; 100 | } 101 | 102 | .c-usergroup__not-in-channel-context--small { 103 | color: $color-highlight; 104 | } 105 | 106 | .c-base_entity { 107 | &__subtext { 108 | color: $color-shade-lightest; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_base.scss: -------------------------------------------------------------------------------- 1 | #col_flex { 2 | background: transparent; 3 | } 4 | 5 | #flex_contents { 6 | background: $color-base; 7 | 8 | .heading { 9 | background: darken($color-base, 5%); 10 | border-bottom-color: $color-shade-dark; 11 | color: $base-link-color; 12 | 13 | a { 14 | color: $base-link-color; 15 | 16 | &:hover { 17 | color: $base-link-color-active; 18 | } 19 | 20 | &.close_flexpane { 21 | color: $base-link-color; 22 | } 23 | } 24 | 25 | .cancel_link { 26 | color: $base-link-color; 27 | } 28 | 29 | .menu_heading { 30 | &:hover { 31 | color: $base-font-color; 32 | } 33 | } 34 | 35 | .menu_icon { 36 | color: $base-link-color; 37 | 38 | &:hover { 39 | color: $base-link-color-active; 40 | } 41 | } 42 | } 43 | 44 | .heading_text { 45 | color: $base-link-color; 46 | } 47 | 48 | .subheading:not(.empty) { 49 | background: $color-base; 50 | border-top: 1px solid $color-shade-darkest; 51 | color: $color-highlight; 52 | 53 | p a { 54 | color: $base-font-color; 55 | } 56 | 57 | .filter_menu_label.active .arrow_down { 58 | color: $color-highlight; 59 | } 60 | } 61 | 62 | .toolbar_container { 63 | background: $color-base; 64 | } 65 | 66 | .flexpane_tab_bar { 67 | li { 68 | .tab, 69 | a { 70 | color: $base-link-color; 71 | } 72 | 73 | &:hover { 74 | border-bottom: 4px solid $color-shade-dark; 75 | 76 | a, 77 | .tab { 78 | color: $base-link-color; 79 | } 80 | } 81 | 82 | &.active { 83 | border-bottom: 4px solid $color-shade-dark; 84 | 85 | a, 86 | .tab { 87 | color: $base-link-color; 88 | } 89 | } 90 | } 91 | } 92 | 93 | .help { 94 | border-top: 5px solid $color-shade-darkest; 95 | color: $base-font-color; 96 | } 97 | 98 | i.callout { 99 | color: $color-highlight; 100 | } 101 | } 102 | 103 | .close_flexpane { 104 | color: $color-highlight; 105 | 106 | &:focus, 107 | &:hover { 108 | color: $base-font-color; 109 | } 110 | } 111 | 112 | #client-ui.flex_pane_showing #col_flex { 113 | border-left-color: $color-shade-dark; 114 | } 115 | 116 | .toolbar_container { 117 | background: $color-base; 118 | border-bottom: 1px solid $color-shade-darkest; 119 | color: $base-font-color; 120 | } 121 | 122 | .msg_right_link { 123 | color: $base-link-color; 124 | } 125 | 126 | .message_location_label { 127 | color: $color-highlight; 128 | } 129 | 130 | #client_body:not(.onboarding):not(.feature_global_nav_layout):before { 131 | background: $color-shade-darker; 132 | } 133 | -------------------------------------------------------------------------------- /scss/modules/modals/_preferences.scss: -------------------------------------------------------------------------------- 1 | #fs_modal.prefs_modal { 2 | label.sound_option { 3 | &:hover:not(.disabled) ts-icon { 4 | color: $color-highlight; 5 | } 6 | } 7 | 8 | #prefs_sidebar { 9 | .theme_thumb { 10 | box-shadow: 0 1px 1px $color-shadow-medium; 11 | } 12 | 13 | #prefs_themes_customize { 14 | .custom_theme_label { 15 | border: 1px solid $color-shade-dark; 16 | 17 | .color_swatch { 18 | border: 1px solid $color-shade-dark; 19 | } 20 | } 21 | 22 | .colpick { 23 | background: $color-shade-mid; 24 | border: 1px solid $color-shade-dark; 25 | } 26 | } 27 | 28 | #prefs_sidebar_theme::after { 29 | background: $color-red; 30 | border-radius: 3px; 31 | content: "Light sidebar themes (e.g. Hoth) will break this Stylish theme."; 32 | display: block; 33 | font-size: 14px; 34 | line-height: 18px; 35 | margin: 12px 0 6px; 36 | padding: 6px; 37 | width: 100%; 38 | } 39 | } 40 | 41 | legend { 42 | color: $base-font-color; 43 | } 44 | 45 | .global_notification_block { 46 | background: $color-base; 47 | border-color: $color-shade-darkest; 48 | 49 | &.selected { 50 | background: $color-shade-dark; 51 | border-color: $color-shade-darkest; 52 | } 53 | } 54 | 55 | .channel_overrides_row { 56 | border-top-color: $color-shade-darkest; 57 | 58 | &:hover { 59 | background: $color-shade-dark; 60 | border-color: $color-shade-darkest; 61 | } 62 | 63 | .channel_overrides_summary { 64 | color: $base-font-color; 65 | } 66 | } 67 | 68 | .notification_example { 69 | &.mac { 70 | background: $color-shade-darkest; 71 | box-shadow: 0 1px 8px 2px $color-shade-dark; 72 | } 73 | 74 | &.linux, 75 | &.windows { 76 | background: $color-shade-darkest; 77 | color: $base-font-color; 78 | } 79 | } 80 | 81 | .badge_example { 82 | background: $color-red; 83 | } 84 | 85 | .message_theme_preview { 86 | border-bottom-color: $color-shade-darkest; 87 | border-top-color: $color-shade-darkest; 88 | } 89 | 90 | .display_real_names_block_sample { 91 | background: $color-base; 92 | } 93 | } 94 | 95 | .sidebar_menu_list_item { 96 | border: 0; 97 | color: $base-font-color; 98 | 99 | &.is_active { 100 | background-color: $color-shade-darkest; 101 | color: $base-font-color; 102 | text-shadow: 0 1px 0 $color-shadow-light; 103 | } 104 | 105 | &:not(.is_active):hover { 106 | background-color: $color-shade-dark; 107 | } 108 | } 109 | 110 | .jumbomoji_pref_disabled { 111 | color: $color-highlight; 112 | } 113 | 114 | .jumbomoji_disabled_note { 115 | color: rgba($color-highlight, 0.6); 116 | } 117 | -------------------------------------------------------------------------------- /scss/modules/tooltips/_base.scss: -------------------------------------------------------------------------------- 1 | .ts_tip { 2 | .ts_tip_multiline_inner, 3 | &:not(.ts_tip_multiline) .ts_tip_tip { 4 | background: $color-shade-light; 5 | } 6 | 7 | .ts_tip_tip { 8 | color: $base-font-color; 9 | } 10 | 11 | &.ts_tip_left .ts_tip_tip::after { 12 | border-left-color: $color-shade-light; 13 | } 14 | 15 | &.ts_tip_right .ts_tip_tip::after { 16 | border-right-color: $color-shade-light; 17 | } 18 | 19 | &.ts_tip_top .ts_tip_tip::after { 20 | border-top-color: $color-shade-light; 21 | } 22 | 23 | &.ts_tip_bottom .ts_tip_tip::after { 24 | border-bottom-color: $color-shade-light; 25 | } 26 | 27 | &.success { 28 | .ts_tip_tip { 29 | background: $color-shade-lightest; 30 | } 31 | 32 | &.ts_tip_left .ts_tip_tip::after { 33 | border-left-color: $color-shade-lightest; 34 | } 35 | 36 | &.ts_tip_right .ts_tip_tip::after { 37 | border-right-color: $color-shade-lightest; 38 | } 39 | 40 | &.ts_tip_top .ts_tip_tip::after { 41 | border-top-color: $color-shade-lightest; 42 | } 43 | 44 | &.ts_tip_bottom .ts_tip_tip::after { 45 | border-bottom-color: $color-shade-lightest; 46 | } 47 | } 48 | } 49 | 50 | .c-tooltip__tip { 51 | background-color: $color-shade-light; 52 | color: $base-font-color; 53 | 54 | &--top { 55 | .c-tooltip__tip__arrow { 56 | border-top-color: $color-shade-light; 57 | } 58 | 59 | &-left .c-tooltip__tip__arrow { 60 | border-top-color: $color-shade-light; 61 | } 62 | 63 | &-right .c-tooltip__tip__arrow { 64 | border-top-color: $color-shade-light; 65 | } 66 | } 67 | 68 | &--right { 69 | .c-tooltip__tip__arrow { 70 | border-right-color: $color-shade-light; 71 | } 72 | } 73 | 74 | &--bottom { 75 | .c-tooltip__tip__arrow { 76 | border-bottom-color: $color-shade-light; 77 | } 78 | 79 | &-left .c-tooltip__tip__arrow { 80 | border-bottom-color: $color-shade-light; 81 | } 82 | 83 | &-right .c-tooltip__tip__arrow { 84 | border-bottom-color: $color-shade-light; 85 | } 86 | } 87 | 88 | &--left { 89 | .c-tooltip__tip__arrow { 90 | border-left-color: $color-shade-light; 91 | } 92 | } 93 | 94 | &--success { 95 | background-color: $color-green; 96 | 97 | &.c-tooltip__tip { 98 | &--top { 99 | &::after, 100 | &-left::after, 101 | &-right::after { 102 | border-top-color: $color-green; 103 | } 104 | } 105 | 106 | &--right::after { 107 | border-right-color: $color-green; 108 | } 109 | 110 | &--bottom { 111 | &::after, 112 | &-left::after, 113 | &-right::after { 114 | border-bottom-color: $color-green; 115 | } 116 | } 117 | 118 | &--left::after { 119 | border-left-color: $color-green; 120 | } 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /scss/modules/menu/_calendar.scss: -------------------------------------------------------------------------------- 1 | .pickmeup { 2 | background: $color-base; 3 | border: 1px solid $color-shade-dark; 4 | box-shadow: 0 1px 5px $color-shadow-light; 5 | 6 | .pmu-instance { 7 | .pmu-button { 8 | color: $base-font-color; 9 | } 10 | 11 | .pmu-today { 12 | &.pmu-selected, 13 | &:hover { 14 | background: $color-shade-dark !important; 15 | 16 | .pmu-today-border { 17 | background: $color-shade-lightest; 18 | color: $base-font-color !important; 19 | } 20 | } 21 | } 22 | 23 | .pmu-today-border { 24 | border: 2px solid $color-shade-light !important; 25 | color: $color-shade-lightest !important; 26 | } 27 | 28 | .pmu-button:not(.pmu-disabled):hover { 29 | background: $color-shade-light; 30 | color: $base-font-color; 31 | } 32 | 33 | .pmu-not-in-month { 34 | background: $color-base; 35 | color: $color-highlight; 36 | 37 | &.pmu-selected { 38 | background: $color-shade-light; 39 | } 40 | } 41 | 42 | .pmu-disabled { 43 | background: $color-base; 44 | color: $color-highlight; 45 | 46 | &:hover { 47 | background: $color-base; 48 | color: $color-highlight; 49 | } 50 | } 51 | 52 | .pmu-selected { 53 | background: $color-shade-light; 54 | color: $base-font-color; 55 | } 56 | 57 | nav { 58 | color: $base-link-color; 59 | 60 | :first-child :hover { 61 | color: $base-link-color-active; 62 | } 63 | } 64 | 65 | .pmu-months *, 66 | .pmu-years * { 67 | border: 1px solid $color-shade-dark; 68 | } 69 | 70 | .pmu-day-of-week { 71 | color: $base-font-color; 72 | 73 | * { 74 | border: 1px solid $color-shade-dark; 75 | } 76 | } 77 | 78 | .pmu-days * { 79 | border: 1px solid $color-shade-dark; 80 | } 81 | } 82 | } 83 | 84 | .p-block_kit_date_picker_calendar_wrapper { 85 | background: $color-shade-dark; 86 | border-color: $color-shade-light; 87 | color: $base-font-color; 88 | 89 | .c-calendar_view_header__title_btn { 90 | background: $color-shade-light; 91 | border-color: $color-shade-dark; 92 | color: $base-font-color; 93 | } 94 | 95 | .c-date_picker_calendar__date--disabled, 96 | .c-mini_calendar__month_button:disabled { 97 | background: $color-shade-light; 98 | color: $color-shade-lightest; 99 | } 100 | } 101 | 102 | #menu { 103 | &.date_picker { 104 | .pickmeup { 105 | .pmu-instance .pmu-button:not(.pmu-disabled):hover, 106 | .pmu-selected { 107 | background: $color-shade-light; 108 | } 109 | } 110 | 111 | li.date_picker_item { 112 | a { 113 | color: $base-font-color; 114 | 115 | &:hover { 116 | color: $base-font-color; 117 | } 118 | } 119 | 120 | &.highlighted a { 121 | color: $color-highlight; 122 | } 123 | } 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /scss/modules/header/_search.scss: -------------------------------------------------------------------------------- 1 | .search_form { 2 | border-color: $color-shade-light; 3 | 4 | .search_input { 5 | background: transparent; 6 | } 7 | 8 | &:hover { 9 | border-color: $color-shade-lightest; 10 | } 11 | } 12 | 13 | .search_focused .search_form { 14 | border-color: $color-shade-lightest; 15 | } 16 | 17 | .search_clear_icon .ts_icon_times_circle { 18 | color: $color-highlight; 19 | } 20 | 21 | #search_spinner { 22 | color: $base-font-color; 23 | } 24 | 25 | #search_container { 26 | .search_input { 27 | background: transparent; 28 | } 29 | 30 | .icon_search { 31 | color: $color-highlight; 32 | } 33 | 34 | .icon_close { 35 | color: $base-link-color; 36 | } 37 | } 38 | 39 | #team_filter, 40 | #user_group_filter, 41 | .searchable_member_list_search_bar { 42 | .icon_search, 43 | .ts_icon_spinner { 44 | color: $color-highlight; 45 | } 46 | 47 | a.icon_close { 48 | color: $base-link-color; 49 | 50 | &:hover { 51 | color: $base-link-color-active; 52 | } 53 | } 54 | } 55 | 56 | .c-search { 57 | background: transparent; 58 | } 59 | 60 | .c-search_message__body { 61 | color: $base-font-color; 62 | } 63 | 64 | .p-search_filter__more_link { 65 | color: $base-font-color; 66 | } 67 | 68 | .p-search_filter__title_text { 69 | background: $color-shade-dark; 70 | color: $base-font-color; 71 | } 72 | 73 | .p-search_filter__date { 74 | &:first-child { 75 | .p-search_filter__datepicker_trigger { 76 | border-top-left-radius: 4px; 77 | border-top-right-radius: 4px; 78 | } 79 | } 80 | 81 | &:last-child { 82 | .p-search_filter__datepicker_trigger { 83 | border-bottom-left-radius: 4px; 84 | border-bottom-right-radius: 4px; 85 | } 86 | } 87 | 88 | .p-search_filter__datepicker_trigger { 89 | background: $color-shade-dark; 90 | border-color: $color-shade-light; 91 | color: $base-font-color; 92 | 93 | &:hover { 94 | color: $color-highlight; 95 | } 96 | } 97 | } 98 | 99 | .c-search_modal, 100 | .c-search_modal:not(.c-search_modal--primarysearch) { 101 | .popover>div, 102 | .c-search__input_box { 103 | background: $color-shade-dark; 104 | border-color: $color-shade-light; 105 | color: $base-font-color; 106 | } 107 | } 108 | 109 | .c-search_autocomplete footer { 110 | background: $color-shade-dark; 111 | border-color: $color-shade-light; 112 | color: $base-font-color; 113 | } 114 | 115 | .c-search_autocomplete__suggestion_item { 116 | color: $base-font-color; 117 | 118 | &--selected { 119 | background-color: $color-shade-mid; 120 | } 121 | 122 | .token { 123 | background-color: $color-shade-darker; 124 | color: $base-font-color; 125 | } 126 | } 127 | 128 | .c-search__input_and_close { 129 | border-bottom-color: $color-shade-darkest; 130 | } 131 | 132 | .c-search__input_box__clear, 133 | .c-search__input_box__icon, 134 | .c-search__section_header, 135 | .c-search__input_and_close__close { 136 | color: $base-font-color; 137 | } 138 | -------------------------------------------------------------------------------- /scss/modules/modals/_apps.scss: -------------------------------------------------------------------------------- 1 | .p-apps_browser__apps_list--loading::before { 2 | background-color: $color-shade-dark; 3 | } 4 | 5 | .p-apps_browser__category_section--tutorial { 6 | .p-apps_browser__app { 7 | border-color: $color-shade-light; 8 | box-shadow: 0 0 5px 0 $color-shadow-light; 9 | } 10 | 11 | .p-apps_browser__app--selected { 12 | background: $color-shade-dark; 13 | box-shadow: 0 0 10px 0 $color-shadow-medium; 14 | } 15 | } 16 | 17 | .p-apps_browser__category_header { 18 | background: $color-base; 19 | color: $color-highlight; 20 | } 21 | 22 | .p-apps_browser__app { 23 | border-top-color: $color-shade-light; 24 | } 25 | 26 | .p-apps_browser__app--selected { 27 | background: $color-shade-dark; 28 | border-color: $color-shade-lightest; 29 | } 30 | 31 | .p-apps_browser__app_info { 32 | color: $base-font-color; 33 | } 34 | 35 | .p-apps_browser__browse_apps, 36 | .p-apps_browser__app_action { 37 | background-color: $color-shade-light; 38 | border-color: $color-shade-lightest; 39 | color: $base-font-color; 40 | 41 | &:hover, 42 | &:focus { 43 | background-color: $color-shade-lightest; 44 | color: $base-font-color; 45 | } 46 | 47 | &:active { 48 | box-shadow: inset 0 1px 1px $color-shadow-light; 49 | } 50 | } 51 | 52 | .p-apps_browser__app_description { 53 | color: $color-highlight; 54 | } 55 | 56 | #fs_modal.p-apps_browser_modal .contents_container .contents .links_container a { 57 | color: $color-highlight; 58 | 59 | &:active, 60 | &:hover, 61 | &:visited { 62 | color: $base-font-color; 63 | } 64 | } 65 | 66 | .p-app { 67 | &_dialog { 68 | &__title_text { 69 | color: $base-font-color; 70 | } 71 | } 72 | 73 | &_space { 74 | background-color: $color-shade-dark; 75 | 76 | &__header, 77 | &__subheader, 78 | &__subheader__helper { 79 | color: $base-font-color; 80 | } 81 | 82 | &_profile { 83 | &__info, 84 | &__screenshots { 85 | background-color: $color-shade-dark; 86 | border-bottom-color: $color-shade-mid; 87 | } 88 | 89 | &__screenshots { 90 | background-color: $color-shade-dark; 91 | border-bottom-color: $color-shade-mid; 92 | border-top-color: $color-shade-mid; 93 | } 94 | 95 | &__screenshot, 96 | &youtube_thumbnail { 97 | box-shadow: 0 0 0 1px $color-shade-mid; 98 | } 99 | 100 | &__slash_command { 101 | border-bottom-color: $color-shade-mid; 102 | border-top-color: $color-shade-mid; 103 | 104 | strong { 105 | color: $base-font-color; 106 | } 107 | 108 | &_desc { 109 | color: $base-link-color; 110 | } 111 | } 112 | 113 | &__slash_commands { 114 | background-color: $color-shade-darker; 115 | border-bottom-color: $color-shade-mid; 116 | border-top-color: $color-shade-mid; 117 | } 118 | } 119 | } 120 | } 121 | 122 | textarea.c-input_textarea { 123 | background-color: $color-base; 124 | } 125 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Slack Night Mode 2 | A user style for easy Slack theming. [CC0](http://creativecommons.org/publicdomain/zero/1.0/). 3 | 4 | [![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com) 5 | 6 | ## Usage 7 | 8 | ### Browser 9 | 10 | This theme requires that you use [a user styles extension](https://github.com/openstyles/stylus/wiki/Stylish-Alternatives) for your browser, such as Stylus (available for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne), and [Opera](https://addons.opera.com/en/extensions/details/stylus/)). 11 | 12 | ### Desktop App 13 | 14 | No official support. Workarounds exist. 15 | - [dark-slack](https://github.com/calebboyd/dark-slack) cli 16 | - [slack-theme-cli](https://github.com/mykeels/slack-theme-cli) 17 | 18 | **🛑 READ FIRST:** Most workarounds will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk. 19 | 20 | [![Chat on Gitter](https://badges.gitter.im/laCour/slack-night-mode.png)](https://gitter.im/slack-night-mode/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link) ([previous discussion](https://github.com/laCour/slack-night-mode/issues/73#issuecomment-242707078)) 21 | 22 | ## Themes 23 | 24 | ### Supported 25 | 26 | #### Black ([source](scss/main.scss) - [build](css/black.css) - [install](https://userstyles.org/styles/117475/slack-night-mode-black)) 27 | 28 | The primary supported theme. This is an excellent theme if you use a program like f.lux or redshift. 29 | 30 | ![Black Screenshot](https://userstyles.org/style_screenshots/117475_after.png) 31 | 32 | #### Aubergine ([source](scss/themes/_aubergine.scss) - [build](css/variants/aubergine.css) - [install](https://userstyles.org/styles/101971/slack-night-mode)) 33 | 34 | This is based on Slack's aubergine/maroon style. It's the original theme. 35 | 36 | ![Aubergine Screenshot](https://userstyles.org/style_screenshots/101971_after.png) 37 | 38 | ### Variants 39 | 40 | * **Arc ([source](scss/themes/_arc-dark.scss) - [build](css/variants/arc-dark.css))** _by [@Lemmmy](https://github.com/Lemmmy)_ 41 | * **Gruvbox Dark ([source](scss/themes/_gruvbox-dark.scss) - [build](css/variants/gruvbox-dark.css))** _by [@lvarado](https://github.com/lvarado)_ 42 | * **Midnight Blue ([source](scss/themes/_midnight-blue.scss) - [build](css/variants/midnight-blue.css))** _by [@matt-h](https://github.com/matt-h)_ 43 | * **Solarized Dark ([source](scss/themes/_solarized-dark.scss) - [build](css/variants/solarized-dark.css))** _by [@glostis](https://github.com/glostis)_ 44 | * **Solarized Light ([source](scss/themes/_solarized-light.scss) - [build](css/variants/solarized-light.css))** _by [@glostis](https://github.com/glostis)_ 45 | * **Tomorrow Dark (base16) ([repository](https://github.com/danarnold/slack-night-mode))** _by [@danarnold](https://github.com/danarnold)_ 46 | 47 | ### Extensions 48 | 49 | Variants can have extensions which add additional changes. 50 | 51 | #### Monospaced ([source](scss/themes/_monospaced.scss)) 52 | 53 | Replaces the messaging font stack with a monospace font stack. 54 | -------------------------------------------------------------------------------- /scss/modules/modals/_channel.scss: -------------------------------------------------------------------------------- 1 | #fs_modal.channel_options_modal { 2 | .channel_options_header { 3 | border-bottom-color: $color-shade-dark; 4 | } 5 | 6 | .convert_to_shared label { 7 | color: $color-highlight; 8 | } 9 | 10 | .channel_option_item { 11 | border-top-color: $color-shade-dark; 12 | 13 | .channel_option_open { 14 | color: $base-font-color; 15 | } 16 | 17 | &:hover { 18 | background: rgba($color-shade-darkest, 0.75); 19 | border-color: $color-shade-dark; 20 | } 21 | } 22 | } 23 | 24 | #channel_invite_container { 25 | .lfs_list_container { 26 | .lfs_item { 27 | border-top-color: $color-shade-dark; 28 | 29 | &.active { 30 | border-color: $color-shade-dark; 31 | } 32 | } 33 | } 34 | 35 | &.page_needs_enterprise { 36 | .channel_invite_row { 37 | border-top-color: $color-shade-dark; 38 | 39 | &.disabled { 40 | color: $color-highlight; 41 | } 42 | } 43 | } 44 | } 45 | 46 | #channel_invite_modal { 47 | #channel_invite_container:not(.keyboard_active).not_scrolling .channel_invite_row:not(.disabled):hover, 48 | .channel_invite_row.highlighted:not(.disabled) { 49 | background: $color-base; 50 | border-color: $color-shade-dark; 51 | } 52 | } 53 | 54 | #channel_prefs_dialog { 55 | color: $base-font-color; 56 | } 57 | 58 | #at_channel_warning_dialog { 59 | background-color: $color-base; 60 | 61 | &.fullsize { 62 | background-color: $color-base; 63 | 64 | .modal-body { 65 | background-color: $color-base; 66 | } 67 | } 68 | } 69 | 70 | .channel_prefs_modal_header { 71 | color: $base-font-color; 72 | } 73 | 74 | .channel_prefs_body { 75 | &__section_header_title { 76 | color: $base-font-color; 77 | } 78 | 79 | &__section_header_icon::before { 80 | color: $base-font-color; 81 | } 82 | 83 | &__mute_help_text { 84 | color: $color-highlight; 85 | } 86 | } 87 | 88 | .channel_prefs_notifications_table { 89 | border-bottom-color: $color-shade-dark; 90 | color: $base-font-color; 91 | 92 | &__large_cell, 93 | &__small_cell, 94 | &__row_title { 95 | border-bottom-color: $color-shade-light !important; 96 | } 97 | } 98 | 99 | .channel_prefs__muting_checkbox_label { 100 | color: $base-font-color; 101 | 102 | &:not(.subtle_silver) { 103 | color: $base-font-color !important; 104 | } 105 | } 106 | 107 | .notification_prefs_icon::before { 108 | color: $base-font-color; 109 | } 110 | 111 | .channel_header { 112 | .channel_header__tabs { 113 | .channel_header__tab { 114 | color: $base-link-color; 115 | 116 | // Comment out per discussion in https://github.com/laCour/slack-night-mode/pull/208 117 | //&.--active { 118 | // color: $base-link-color-active; 119 | //} 120 | 121 | &:hover { 122 | color: $base-link-color-active; 123 | } 124 | } 125 | } 126 | } 127 | 128 | .p-channel_details { 129 | &__heading, 130 | &__created_link, 131 | &__created_link:hover, 132 | &__similar_channels_channel :hover { 133 | color: inherit; 134 | } 135 | } 136 | 137 | .p-highlights_section { 138 | &__group_title_label { 139 | background: $color-shade-mid; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import "helpers/variables"; 2 | @import "helpers/mixins"; 3 | 4 | @import "layout/base"; 5 | @import "layout/alerts"; 6 | @import "layout/scrollbar"; 7 | @import "layout/sidebar"; 8 | @import "layout/dialog"; 9 | 10 | @import "modules/loader"; 11 | 12 | @import "modules/inputs/base"; 13 | @import "modules/inputs/select"; 14 | @import "modules/inputs/filter-select"; 15 | @import "modules/inputs/messaging"; 16 | @import "modules/inputs/toggle"; 17 | @import "modules/inputs/label"; 18 | @import "modules/inputs/datepicker"; 19 | 20 | @import "modules/menu/base"; 21 | @import "modules/menu/autocomplete"; 22 | @import "modules/menu/calendar"; 23 | @import "modules/menu/filters"; 24 | @import "modules/menu/popover"; 25 | @import "modules/menu/tabcomplete"; 26 | @import "modules/menu/team"; 27 | 28 | @import "modules/header/base"; 29 | @import "modules/header/day-divider"; 30 | @import "modules/header/search"; 31 | 32 | @import "modules/messaging/base"; 33 | @import "modules/messaging/attachments"; 34 | @import "modules/messaging/banners"; 35 | @import "modules/messaging/code"; 36 | @import "modules/messaging/dense"; 37 | @import "modules/messaging/light"; 38 | @import "modules/messaging/overlay"; 39 | @import "modules/messaging/quotes"; 40 | @import "modules/messaging/threads"; 41 | @import "modules/messaging/unreads"; 42 | 43 | @import "modules/flexpane/base"; 44 | @import "modules/flexpane/channel"; 45 | @import "modules/flexpane/download"; 46 | @import "modules/flexpane/files"; 47 | @import "modules/flexpane/groups"; 48 | @import "modules/flexpane/mentions"; 49 | @import "modules/flexpane/reactions"; 50 | @import "modules/flexpane/search"; 51 | @import "modules/flexpane/shortcuts"; 52 | @import "modules/flexpane/starred"; 53 | @import "modules/flexpane/team"; 54 | @import "modules/flexpane/threads"; 55 | @import "modules/flexpane/whats-new"; 56 | 57 | @import "modules/team/base"; 58 | 59 | @import "modules/emojis/base"; 60 | @import "modules/emojis/current_status"; 61 | @import "modules/emojis/reactions"; 62 | 63 | @import "modules/modals/base"; 64 | @import "modules/modals/apps"; 65 | @import "modules/modals/call"; 66 | @import "modules/modals/channel"; 67 | @import "modules/modals/channels"; 68 | @import "modules/modals/dialog"; 69 | @import "modules/modals/direct-messages"; 70 | @import "modules/modals/file"; 71 | @import "modules/modals/help"; 72 | @import "modules/modals/invite"; 73 | @import "modules/modals/keyboard-shortcuts"; 74 | @import "modules/modals/preferences"; 75 | @import "modules/modals/profile"; 76 | @import "modules/modals/quick-search"; 77 | @import "modules/modals/share"; 78 | 79 | @import "modules/tooltips/base"; 80 | @import "modules/tooltips/coachmarks"; 81 | @import "modules/tooltips/member"; 82 | 83 | @import "modules/color-overrides"; 84 | @import "modules/hacks"; 85 | 86 | @import "modules/pages/admin/base"; 87 | @import "modules/pages/admin/account"; 88 | @import "modules/pages/admin/billing"; 89 | @import "modules/pages/admin/customize"; 90 | @import "modules/pages/admin/directory"; 91 | @import "modules/pages/admin/enterprise"; 92 | @import "modules/pages/admin/files"; 93 | @import "modules/pages/admin/help"; 94 | @import "modules/pages/admin/nav"; 95 | @import "modules/pages/admin/settings"; 96 | @import "modules/pages/admin/tooltips"; 97 | @import "modules/pages/api"; 98 | @import "modules/pages/apps"; 99 | @import "modules/pages/legal"; 100 | @import "modules/pages/oauth"; 101 | @import "modules/pages/spaces"; 102 | -------------------------------------------------------------------------------- /scss/modules/messaging/_banners.scss: -------------------------------------------------------------------------------- 1 | .p-message_pane { 2 | .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider { 3 | background: $color-base; 4 | 5 | &::before { 6 | background: $color-base; 7 | border-bottom: 1px solid $color-base; 8 | } 9 | } 10 | 11 | .p-message_pane__top_banners:not(:empty) + div .c-message_list { 12 | &:not(.c-virtual_list--scrollbar), 13 | &.c-virtual_list--scrollbar > .c-scrollbar__hider { 14 | &:before { 15 | box-shadow: 0 32px $color-base; 16 | } 17 | } 18 | } 19 | 20 | &_banner { 21 | background-color: $color-shade-dark; 22 | color: $base-font-color; 23 | 24 | .c-button { 25 | &--outline { 26 | background-color: $color-shade-darker; 27 | color: $base-link-color; 28 | } 29 | 30 | &--primary { 31 | background-color: $color-shade-light; 32 | color: $base-font-color; 33 | } 34 | } 35 | 36 | &__body--wider-text, 37 | &__close_icon, 38 | &__header { 39 | color: $base-font-color; 40 | } 41 | } 42 | 43 | &_banner::before { 44 | background-color: $color-shade-darker; 45 | border-bottom-color: $color-shade-darker; 46 | 47 | } 48 | 49 | &__foreword__description, 50 | &__limited_history_alert { 51 | color: $base-font-color; 52 | } 53 | 54 | &_input_broadcast_warning { 55 | background-color: $color-shade-darker; 56 | } 57 | } 58 | 59 | .p-message_pane__limited_history_foreword { 60 | background: $color-shade-dark; 61 | background-image: none; 62 | color: $base-font-color; 63 | } 64 | 65 | .p-message_pane__unread_banner__banner { 66 | background: $color-shade-light; 67 | text-shadow: 0 1px $color-shadow-light; 68 | } 69 | 70 | .messages_banner { 71 | color: $base-font-color; 72 | text-shadow: 0 1px $color-shadow-light; 73 | 74 | a { 75 | color: $base-font-color; 76 | 77 | &:hover { 78 | color: $base-font-color; 79 | } 80 | } 81 | } 82 | 83 | #connection_div { 84 | background: $color-red; 85 | } 86 | 87 | #archives_return { 88 | background: padding-box $color-shade-lightest; 89 | color: $base-font-color; 90 | 91 | &.warning { 92 | background: $color-red; 93 | } 94 | 95 | a { 96 | color: $base-font-color; 97 | 98 | &:hover { 99 | color: rgba($base-font-color, 0.8); 100 | } 101 | } 102 | } 103 | 104 | #messages_unread_status { 105 | background: $color-shade-light; 106 | 107 | &:hover { 108 | background: $color-shade-lightest; 109 | 110 | .clear_unread_messages { 111 | background: $color-shade-lightest; 112 | 113 | &:hover { 114 | background: $color-shade-light; 115 | } 116 | } 117 | } 118 | 119 | &.quiet { 120 | background: $color-shade-lightest; 121 | color: $base-font-color; 122 | text-shadow: 0 1px $color-shadow-light; 123 | 124 | a { 125 | color: $base-font-color; 126 | } 127 | } 128 | } 129 | 130 | .clear_unread_messages { 131 | border-left: 1px solid $color-shadow-light; 132 | } 133 | 134 | #messages_container.has_top_messages_banner::before { 135 | background: none; 136 | } 137 | 138 | .end_div_msg_lim { 139 | background-color: $color-shade-dark; 140 | background-image: none; 141 | } 142 | 143 | #archives_end_div_msg_lim, 144 | #end_display_msg_lim { 145 | h1 { 146 | color: $base-font-color; 147 | } 148 | 149 | h2 { 150 | color: rgba($base-font-color, 0.8); 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_account.scss: -------------------------------------------------------------------------------- 1 | .two_factor_option_app, 2 | .two_factor_option_sms, 3 | .configure-step1, 4 | .configure-step3 { 5 | display: none; 6 | } 7 | 8 | .two_factor_choice { 9 | background-color: $color-shade-dark; 10 | border: 1px solid $color-shade-light; 11 | box-shadow: 0 1px 0 $color-shadow-medium; 12 | 13 | &:hover { 14 | box-shadow: 0 0 1px 2px $color-shadow-light; 15 | 16 | .two_factor_link { 17 | color: $base-font-color; 18 | } 19 | } 20 | 21 | } 22 | 23 | a.two_factor_choice { 24 | background-color: $color-shade-dark; 25 | border: 1px solid $color-shade-light; 26 | box-shadow: 0 1px 0 $color-shadow-medium; 27 | 28 | &:link { 29 | background-color: $color-shade-dark; 30 | border: 1px solid $color-shade-light; 31 | box-shadow: 0 1px 0 $color-shadow-medium; 32 | } 33 | 34 | &:hover, 35 | &:link:hover { 36 | box-shadow: 0 0 1px 2px $color-shadow-light; 37 | 38 | .two_factor_link { 39 | color: $base-font-color; 40 | } 41 | } 42 | } 43 | 44 | .backup_codes { 45 | background: $color-shade-darkest; 46 | border-color: $color-shade-light; 47 | color: $base-font-color; 48 | } 49 | 50 | #channel_specific_settings { 51 | tr { 52 | border-top-color: $color-base; 53 | 54 | &.channel_override_row { 55 | &.muted td { 56 | background: transparentize($color-base, 0.5); 57 | } 58 | } 59 | } 60 | 61 | .extra_left_border { 62 | border-left-color: $color-base; 63 | } 64 | 65 | .extra_right_border { 66 | border-right-color: $color-base; 67 | } 68 | 69 | .revert_to_default { 70 | color: $color-highlight; 71 | 72 | &:hover { 73 | color: $color-red; 74 | } 75 | } 76 | } 77 | 78 | .admin_list_item { 79 | border-bottom-color: $color-base; 80 | color: $color-highlight; 81 | 82 | &:hover { 83 | background-color: $color-shade-dark; 84 | } 85 | 86 | .admin_member_full_name, 87 | .admin_member_real_name { 88 | color: $base-font-color; 89 | } 90 | 91 | .admin_member_type, 92 | .admin_member_caret { 93 | color: $color-highlight; 94 | } 95 | 96 | .pill.group { 97 | background: $color-shade-mid; 98 | } 99 | 100 | .two_factor_auth_badge:hover { 101 | background: $color-shade-mid; 102 | } 103 | 104 | .inline_email, 105 | .inline_name, 106 | .inline_username { 107 | &:hover { 108 | background: none !important; 109 | } 110 | } 111 | 112 | &.invite_item { 113 | &.bouncing { 114 | background: $color-shade-lightest; 115 | 116 | .email { 117 | color: $color-red; 118 | } 119 | } 120 | } 121 | 122 | &.error, 123 | &.expanded, 124 | &.processing, 125 | &.success { 126 | background-color: $color-base; 127 | } 128 | 129 | &.expanded { 130 | .btn_outline { 131 | border-color: $color-base; 132 | color: $base-font-color !important; 133 | 134 | &:hover { 135 | border-color: $color-shade-dark; 136 | color: $base-font-color !important; 137 | } 138 | } 139 | 140 | .sub_action { 141 | color: $base-link-color; 142 | 143 | &:hover { 144 | color: $base-link-color-active; 145 | } 146 | 147 | @media screen and (max-width: 768px) { 148 | + .sub_action:hover { 149 | &::before, 150 | &::after { 151 | color: $base-link-color; 152 | } 153 | } 154 | } 155 | } 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /scss/modules/modals/_base.scss: -------------------------------------------------------------------------------- 1 | .modal { 2 | background-color: $color-base; 3 | border: 0; 4 | box-shadow: 0 1px 10px $color-shadow-dark; 5 | 6 | .close, 7 | label { 8 | color: $base-font-color; 9 | } 10 | } 11 | 12 | .modal_input_note, 13 | .modal_input_note_full_width, 14 | .input_note_special { 15 | color: $color-highlight; 16 | } 17 | 18 | .modal-footer { 19 | background: padding-box $color-base; 20 | border-top: 1px solid transparent; 21 | box-shadow: none; 22 | } 23 | 24 | .modal-header { 25 | background: padding-box $color-shade-darkest; 26 | border-bottom: 1px solid $color-shade-dark; 27 | color: $base-font-color; 28 | } 29 | 30 | .modal-backdrop { 31 | background-color: $color-base; 32 | } 33 | 34 | .close { 35 | color: $base-font-color; 36 | text-shadow: 0 1px 0 $color-shadow-dark; 37 | } 38 | 39 | #fs_modal_bg { 40 | background: $color-base; 41 | } 42 | 43 | #fs_modal { 44 | background: $color-base; 45 | 46 | h1, 47 | h2, 48 | h3, 49 | h4, 50 | h5, 51 | h6 { 52 | color: $base-font-color; 53 | } 54 | 55 | #fs_modal_sidebar a { 56 | color: $base-font-color; 57 | 58 | &:hover { 59 | background: $color-shade-dark; 60 | } 61 | 62 | &.active { 63 | background: $color-shade-darkest; 64 | color: $base-font-color; 65 | text-shadow: 0 1px 0 $color-shadow-light; 66 | } 67 | } 68 | 69 | .fs_modal_btn { 70 | color: rgba($base-font-color, 0.5); 71 | 72 | &:hover { 73 | background: $color-shade-lightest; 74 | color: $base-font-color; 75 | } 76 | 77 | &:active { 78 | background: $color-shade-lightest; 79 | color: $base-font-color; 80 | } 81 | } 82 | 83 | &.fs_modal_header .fs_modal_btn:active { 84 | color: $base-font-color; 85 | } 86 | 87 | #fs_modal_footer { 88 | background-color: $color-shade-dark; 89 | } 90 | } 91 | 92 | .c-fullscreen_modal { 93 | &__body { 94 | background: $color-base; 95 | color: $base-font-color; 96 | } 97 | 98 | &__close { 99 | color: $base-link-color; 100 | 101 | &:hover { 102 | color: $base-link-color-active; 103 | } 104 | } 105 | 106 | &__header { 107 | background: $color-base; 108 | } 109 | } 110 | 111 | .p-dm_browser_modal { 112 | &__option { 113 | border-color: $color-shade-lightest; 114 | } 115 | 116 | &__list_row { 117 | &--active { 118 | background: $color-shade-dark; 119 | } 120 | 121 | &_meta { 122 | color: $base-font-color; 123 | } 124 | } 125 | } 126 | 127 | .p-prefs_modal { 128 | &__notification_example.p-prefs_modal__notification_example { 129 | &--none, 130 | &--linux, 131 | &--mac, 132 | &--windows { 133 | background-color: $color-base; 134 | color: $base-font-color; 135 | } 136 | } 137 | 138 | &__radiogroup { 139 | .p-prefs_modal__radio_decorator { 140 | background-color: $color-shade-dark; 141 | } 142 | } 143 | } 144 | 145 | .c-select { 146 | &_button { 147 | background-color: $color-shade-dark; 148 | 149 | &:active { 150 | background-color: $color-shade-mid; 151 | } 152 | } 153 | 154 | &_options_list { 155 | &__option { 156 | color: $base-link-color; 157 | } 158 | 159 | &__wrapper { 160 | background-color: $color-shade-dark; 161 | } 162 | } 163 | } 164 | 165 | .c-button { 166 | &--outline { 167 | background-color: $color-shade-dark; 168 | color: $base-link-color; 169 | } 170 | } 171 | -------------------------------------------------------------------------------- /scss/modules/menu/_base.scss: -------------------------------------------------------------------------------- 1 | .menu { 2 | background: $color-shade-dark; 3 | border: 1px solid $color-base; 4 | box-shadow: 0 2px 10px $color-shadow-dark; 5 | color: $base-font-color; 6 | 7 | .menu_content { 8 | background: $color-shade-dark !important; 9 | } 10 | 11 | .menu_filter_container { 12 | background: $color-base; 13 | 14 | input.menu_filter { 15 | border: 1px solid $color-shade-mid; 16 | 17 | &:focus { 18 | border-color: $color-shade-light; 19 | } 20 | } 21 | 22 | .icon_search { 23 | color: $color-highlight; 24 | } 25 | 26 | .icon_close { 27 | color: $color-highlight !important; 28 | } 29 | } 30 | 31 | #menu_header { 32 | .menu_simple_header { 33 | background: $color-shade-darkest; 34 | border-color: $color-shade-dark; 35 | color: $base-font-color; 36 | 37 | a { 38 | color: $base-link-color; 39 | 40 | &:hover { 41 | color: $base-link-color-active; 42 | } 43 | } 44 | } 45 | 46 | .menu_close { 47 | color: $base-font-color; 48 | } 49 | } 50 | 51 | .section_header { 52 | .header_label { 53 | background-color: $color-shade-dark; 54 | color: $color-highlight; 55 | } 56 | 57 | > div.header_label_container { 58 | color: $color-highlight; 59 | } 60 | } 61 | 62 | ul li { 63 | a { 64 | background: $color-shade-dark; 65 | border-bottom: 0; 66 | color: $base-font-color; 67 | 68 | &.delete_link { 69 | color: $color-red; 70 | } 71 | } 72 | 73 | a:not(.inline_menu_link) { 74 | color: $base-font-color; 75 | } 76 | 77 | &.highlighted a { 78 | background: $color-base; 79 | border-bottom-color: $color-shade-darkest; 80 | color: $base-font-color; 81 | text-shadow: 0 1px 0 $color-shadow-light; 82 | 83 | .menu_item_details, 84 | .prefix, 85 | i, 86 | ts-icon { 87 | color: $base-font-color; 88 | } 89 | 90 | &.delete_link { 91 | color: $color-red; 92 | } 93 | } 94 | 95 | &.disabled a { 96 | color: $color-highlight; 97 | } 98 | 99 | i { 100 | color: $color-highlight; 101 | } 102 | 103 | &.divider { 104 | border-bottom-color: $color-base; 105 | } 106 | 107 | .menu_item_details { 108 | color: $color-highlight; 109 | } 110 | } 111 | 112 | &:not(.keyboard_active) ul li:hover:not(.disabled) a { 113 | background: $color-base; 114 | border-bottom-color: $color-shade-darkest; 115 | color: $base-font-color; 116 | text-shadow: 0 1px 0 $color-shadow-light; 117 | 118 | .menu_item_details, 119 | .prefix, 120 | i, 121 | ts-icon { 122 | color: $base-font-color; 123 | } 124 | 125 | &.delete_link { 126 | color: $color-red; 127 | } 128 | } 129 | 130 | input { 131 | background: $color-shade-dark; 132 | border: 1px solid $color-shade-light; 133 | } 134 | 135 | textarea { 136 | background: $color-shade-dark; 137 | border: 1px solid $color-shade-light; 138 | } 139 | 140 | #menu_footer { 141 | .menu_footer { 142 | background: $color-shade-darkest; 143 | border-top: 1px solid $color-shade-dark; 144 | } 145 | } 146 | 147 | #monkey_scroll_wrapper_for_menu_items_scroller { 148 | background: $color-shade-dark; 149 | } 150 | 151 | #menu_list_container { 152 | #menu_list .menu_list_item { 153 | a { 154 | color: $base-font-color; 155 | } 156 | 157 | &.active a { 158 | background: $color-shade-light; 159 | color: $base-font-color; 160 | text-shadow: 0 1px 0 $color-shadow-light; 161 | } 162 | } 163 | } 164 | } 165 | 166 | .c-menu { 167 | background-color: $color-shade-dark; 168 | } 169 | 170 | 171 | .c-menu_item { 172 | &__description, 173 | &__link_icon { 174 | color: $base-link-color; 175 | } 176 | 177 | &__header { 178 | color: $color-highlight; 179 | } 180 | 181 | &__icon { 182 | color: $color-shade-lightest; 183 | } 184 | 185 | &__label { 186 | color: $white; 187 | } 188 | 189 | &__shortcut { 190 | color: $base-font-color; 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_team.scss: -------------------------------------------------------------------------------- 1 | #member_preview_scroller a:not(.member_name):not(.current_status_preset_option), 2 | .team_list_item a:not(.member_name):not(.current_status_preset_option) { 3 | color: $base-link-color; 4 | 5 | &:hover { 6 | color: $base-link-color-active; 7 | } 8 | } 9 | 10 | #member_preview_scroller, 11 | #team_list { 12 | .member_data_table a { 13 | color: $base-link-color; 14 | 15 | &:hover { 16 | color: $base-link-color-active; 17 | } 18 | } 19 | 20 | a.member_action_button { 21 | color: $base-link-color !important; 22 | 23 | &:hover { 24 | border-color: $color-shade-lightest !important; 25 | color: $base-link-color-active !important; 26 | } 27 | } 28 | } 29 | 30 | #member_preview_scroller, 31 | #member_preview_web_container, 32 | #team_list, 33 | .menu_member_header { 34 | .member_data_table { 35 | tr { 36 | color: $base-font-color; 37 | } 38 | 39 | a { 40 | color: $base-link-color !important; 41 | 42 | &:hover { 43 | color: $base-link-color-active !important; 44 | } 45 | } 46 | 47 | .bot_label { 48 | background: $color-shade-darkest; 49 | color: $color-highlight; 50 | } 51 | } 52 | } 53 | 54 | #member_preview_scroller { 55 | background-color: $color-shade-dark; 56 | 57 | .member_data_table .current_status_cell { 58 | .current_status_container { 59 | .current_status_cover { 60 | &:hover { 61 | border-color: $color-shade-dark; 62 | } 63 | } 64 | 65 | &:not(.active) { 66 | .current_status_cover { 67 | &.without_status_set { 68 | .current_status_placeholder { 69 | color: rgba($base-font-color, 0.35) !important; 70 | } 71 | } 72 | } 73 | } 74 | } 75 | } 76 | } 77 | 78 | #team_tab #member_preview_scroller { 79 | background-color: $color-base; 80 | 81 | .member_details { 82 | .member_name { 83 | color: $base-font-color; 84 | } 85 | } 86 | } 87 | 88 | #member_preview_scroller, 89 | #member_preview_web_container, 90 | .menu_member_header { 91 | .member_details { 92 | .member_name_and_presence .member_name { 93 | color: $base-font-color; 94 | } 95 | 96 | .member_title { 97 | color: $base-font-color; 98 | } 99 | 100 | .member_restriction, 101 | .member_timezone_value, 102 | .member_current_status { 103 | color: $color-highlight; 104 | 105 | a { 106 | color: $base-link-color; 107 | 108 | &:hover { 109 | color: $base-link-color-active; 110 | } 111 | } 112 | 113 | .ts_icon_question_circle { 114 | &:focus, 115 | &:hover { 116 | color: $base-link-color; 117 | } 118 | } 119 | } 120 | } 121 | 122 | .member_details_divider { 123 | border-color: $color-shade-dark; 124 | } 125 | } 126 | 127 | #disabled_members_tab { 128 | a { 129 | color: $base-link-color; 130 | 131 | &:hover { 132 | background: $color-shade-mid; 133 | color: $base-link-color-active; 134 | } 135 | } 136 | 137 | &.active a { 138 | color: $base-link-color; 139 | } 140 | } 141 | 142 | .team_list_item { 143 | border-top: 1px solid $color-shade-light; 144 | color: $base-link-color; 145 | 146 | .member_name { 147 | color: $base-font-color; 148 | } 149 | } 150 | 151 | #client-ui .searchable_member_list, 152 | #client-ui #team_list, 153 | #member_preview_scroller { 154 | .team_list_item { 155 | a { 156 | color: $base-font-color !important; 157 | } 158 | 159 | &.expanded { 160 | border-color: $color-shade-dark !important; 161 | } 162 | 163 | &:hover { 164 | border-color: $color-shade-light !important; 165 | } 166 | } 167 | } 168 | 169 | #client-ui .searchable_member_list .team_list_item { 170 | border-bottom-color: $color-shade-darkest; 171 | 172 | &:hover { 173 | background: $color-shade-light; 174 | } 175 | } 176 | 177 | .c-unified_member__display-name, 178 | .c-unified_member__secondary-name, 179 | .c-unified_member__title, 180 | .c-unified_member__other-names, 181 | .c-unified_member__other-names { 182 | color: $base-font-color !important; 183 | } 184 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_threads.scss: -------------------------------------------------------------------------------- 1 | #convo_tab { 2 | #convo_tab_btns .close_flexpane { 3 | &:focus, 4 | &:hover { 5 | color: $base-font-color; 6 | } 7 | } 8 | 9 | textarea.message_input { 10 | color: $base-font-color; 11 | } 12 | 13 | .message_input, 14 | textarea#msg_text { 15 | color: $base-font-color; 16 | } 17 | 18 | .p-threads_flexpane__separator_count { 19 | color: $color-highlight; 20 | } 21 | .p-threads_flexpane__separator_line { 22 | border-color: $color-highlight; 23 | } 24 | } 25 | 26 | #reply_container, 27 | .reply_input_container { 28 | .inline_message_input_container { 29 | .message_input div, 30 | textarea { 31 | border-color: $color-shade-dark; 32 | color: $base-font-color; 33 | 34 | &:active, 35 | &:focus { 36 | border-color: $color-shade-darkest; 37 | } 38 | } 39 | } 40 | 41 | .reply_broadcast_buttons_container .reply_broadcast_label_container { 42 | color: $base-font-color; 43 | 44 | ts-icon.ts_icon_question_circle { 45 | color: $color-highlight !important; 46 | } 47 | } 48 | 49 | .reply_limited_in_general { 50 | background: $color-base; 51 | color: $color-highlight; 52 | } 53 | } 54 | 55 | 56 | #convo_container { 57 | .convo_flexpane_divider { 58 | border-top-color: $color-shade-dark; 59 | color: $color-highlight; 60 | 61 | .reply_count { 62 | background: $color-base; 63 | } 64 | } 65 | 66 | ts-conversation ts-message.selected .message_content .thread_channel_link { 67 | color: $base-link-color; 68 | } 69 | } 70 | 71 | ts-message.message:hover, 72 | ts-message.message:active, 73 | ts-message.active:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply):not(.show_broadcast_indicator), ts-message.message--focus:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply):not(.show_broadcast_indicator), ts-message:hover:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply):not(.show_broadcast_indicator) { 74 | background-color: $color-shade-darker; 75 | } 76 | 77 | ts-thread { 78 | .collapse_inline_thread_container:hover, 79 | .view_all_replies_container:hover { 80 | background-color: $color-shade-darker; 81 | } 82 | } 83 | 84 | .p-threads { 85 | &_flexpane { 86 | &__header { 87 | background: $color-shade-dark; 88 | border-color: $color-shade-light; 89 | color: $base-font-color; 90 | 91 | &_channel_name { 92 | color: $base-link-color; 93 | } 94 | } 95 | } 96 | 97 | &_footer { 98 | &__input_container { 99 | .p-message_input_file_button, 100 | .p-message_input_field, 101 | .ql-placeholder { 102 | background-color: $color-shade-dark; 103 | color: $base-font-color; 104 | } 105 | } 106 | } 107 | 108 | &_view { 109 | background-color: $color-shade-darker; 110 | 111 | &__default_background { 112 | background-color: $color-shade-darker; 113 | } 114 | 115 | &__divider { 116 | &_label { 117 | background-color: $color-shade-dark; 118 | color: $base-font-color; 119 | } 120 | 121 | &_line { 122 | border-top-color: $color-shade-dark; 123 | } 124 | } 125 | 126 | &__footer { 127 | border-color: $color-shade-dark; 128 | } 129 | 130 | &_header { 131 | &__participant_list { 132 | color: $base-font-color; 133 | } 134 | 135 | &__permalink { 136 | color: $base-link-color !important; 137 | } 138 | } 139 | 140 | &_reply { 141 | border-color: $color-shade-dark; 142 | 143 | &--new_reply { 144 | background-color: $color-shade-dark; 145 | } 146 | } 147 | 148 | &_root { 149 | border-color: $color-shade-dark; 150 | } 151 | } 152 | } 153 | 154 | .p_threads { 155 | &_view { 156 | &_load_older_button, 157 | &_load_newer_button { 158 | background-color: $color-shade-darker; 159 | border-color: $color-shade-dark; 160 | 161 | &:hover { 162 | background-color: $color-shade-dark; 163 | } 164 | 165 | .c-link--button { 166 | color: $base-font-color; 167 | } 168 | } 169 | } 170 | } 171 | 172 | .c-app_badge, 173 | .c-app_label { 174 | color: $base-link-color; 175 | } 176 | 177 | .c-timestamp__label { 178 | color: $base-font-color; 179 | } 180 | -------------------------------------------------------------------------------- /scss/modules/pages/_api.scss: -------------------------------------------------------------------------------- 1 | .api #header_logo img { 2 | display: none; 3 | } 4 | 5 | body.api { 6 | header .header_links a { 7 | color: $base-font-color; 8 | 9 | &.active { 10 | background: $color-shade-light; 11 | } 12 | } 13 | 14 | .reverse_header { 15 | background-color: $color-shade-darkest; 16 | color: $base-font-color; 17 | } 18 | 19 | pre { 20 | overflow-x: auto; 21 | 22 | code { 23 | color: $base-font-color; 24 | } 25 | } 26 | 27 | #page_contents .card { 28 | background: $color-shade-dark; 29 | } 30 | 31 | .scopes_to_methods { 32 | code { 33 | color: $base-font-color; 34 | } 35 | 36 | .selected code { 37 | color: $color-red; 38 | } 39 | 40 | li { 41 | color: $base-font-color; 42 | } 43 | 44 | .selected li { 45 | color: $base-font-color; 46 | } 47 | } 48 | 49 | .section_title { 50 | border-bottom: 2px solid $color-base; 51 | } 52 | 53 | .example { 54 | border: 1px solid $color-shade-darkest; 55 | 56 | h5 { 57 | background-color: $color-shade-darkest; 58 | color: $base-font-color; 59 | } 60 | } 61 | 62 | .alert { 63 | background: $color-shade-light; 64 | } 65 | 66 | .hljs { 67 | background-image: none; 68 | } 69 | 70 | .hljs-keyword, 71 | .hljs-selector-tag, 72 | .hljs-subst { 73 | color: map-get($code-colors, keyword); 74 | } 75 | 76 | .hljs-number { 77 | color: map-get($code-colors, number); 78 | } 79 | 80 | .hljs-literal, 81 | .hljs-tag .hljs-attr { 82 | color: map-get($code-colors, def); 83 | } 84 | 85 | .hljs-variable { 86 | color: map-get($code-colors, variable); 87 | } 88 | 89 | .hljs-template-variable { 90 | color: map-get($code-colors, variable-alt); 91 | } 92 | 93 | .hljs-comment { 94 | color: map-get($code-colors, comment); 95 | } 96 | 97 | .hljs-doctag, 98 | .hljs-string { 99 | color: map-get($code-colors, string); 100 | } 101 | 102 | .hljs-section, 103 | .hljs-selector-id, 104 | .hljs-title { 105 | color: map-get($code-colors, string-alt); 106 | } 107 | 108 | .hljs-meta { 109 | color: map-get($code-colors, meta); 110 | } 111 | 112 | .hljs-class .hljs-title, 113 | .hljs-type { 114 | color: map-get($code-colors, qualifier); 115 | } 116 | 117 | .hljs-built_in, 118 | .hljs-builtin-name { 119 | color: map-get($code-colors, builtin); 120 | } 121 | 122 | .hljs-tag { 123 | color: map-get($code-colors, tag); 124 | } 125 | 126 | .hljs-attribute, 127 | .hljs-name { 128 | color: map-get($code-colors, attribute); 129 | } 130 | 131 | .hljs-bullet, 132 | .hljs-symbol { 133 | color: map-get($code-colors, atom); 134 | } 135 | 136 | .hljs-quote { 137 | color: map-get($code-colors, quote); 138 | } 139 | 140 | .hljs-link, 141 | .hljs-regexp { 142 | color: map-get($code-colors, link); 143 | } 144 | 145 | span { 146 | &.btn { 147 | background-color: $color-base; 148 | } 149 | 150 | &.deprecation, 151 | &.warning { 152 | background-color: $color-red; 153 | border-color: $color-red; 154 | } 155 | } 156 | } 157 | 158 | nav#api_nav { 159 | background: transparent; 160 | text-shadow: 0 1px 1px $color-shadow-medium; 161 | } 162 | 163 | #api_nav .footer_nav { 164 | a { 165 | color: $base-link-color; 166 | 167 | &:hover { 168 | color: $base-link-color-active; 169 | } 170 | } 171 | 172 | .footer_signature { 173 | color: $color-red; 174 | } 175 | } 176 | 177 | .api_articles { 178 | .api_articles_section { 179 | border-bottom-color: $color-base; 180 | } 181 | 182 | .article_tag_count { 183 | color: $color-highlight; 184 | } 185 | } 186 | 187 | .api.feature_related_content { 188 | #api_related_content { 189 | h2 { 190 | color: $base-font-color; 191 | } 192 | 193 | .article_link_title_wrapper { 194 | color: $base-link-color; 195 | } 196 | } 197 | } 198 | 199 | .tab_menu { 200 | background-color: $color-shade-dark; 201 | 202 | &.grey { 203 | background-color: $color-shade-dark; 204 | } 205 | 206 | .tab { 207 | color: $base-font-color; 208 | 209 | &:hover { 210 | box-shadow: inset 0 -4px 0 0 rgba($color-red, 0.4); 211 | } 212 | 213 | &.active, 214 | &:active, 215 | &:focus { 216 | box-shadow: inset 0 -4px 0 0 $color-red; 217 | color: $base-font-color; 218 | } 219 | 220 | &:disabled { 221 | color: $color-highlight; 222 | } 223 | } 224 | } 225 | 226 | .page_faq, 227 | .page_scim { 228 | h3 { 229 | background-color: $color-base; 230 | } 231 | } 232 | 233 | .application_config aside { 234 | color: $color-highlight; 235 | } 236 | -------------------------------------------------------------------------------- /scss/modules/modals/_profile.scss: -------------------------------------------------------------------------------- 1 | #edit_team_profile_container { 2 | input:disabled, 3 | select:disabled { 4 | background: $color-shade-light; 5 | border: 1px solid $color-shade-darkest; 6 | } 7 | 8 | .lazy_filter_select.disabled { 9 | background: $color-shade-light; 10 | 11 | input { 12 | background: $color-shade-light; 13 | } 14 | } 15 | } 16 | 17 | #edit_team_profile_add .row, 18 | #edit_team_profile_list .row { 19 | border-top: 1px solid $color-shade-dark; 20 | } 21 | 22 | #edit_team_profile_list { 23 | .row { 24 | &:nth-last-child(2) { 25 | &:hover { 26 | border-color: $color-shade-dark !important; 27 | } 28 | } 29 | 30 | &:nth-child(n+5) { 31 | &.active, 32 | &:hover { 33 | background: $color-shade-dark; 34 | border: 1px solid $color-shade-darkest; 35 | } 36 | 37 | &.active .edit_team_profile_list_controls i.ts_icon_cog_o { 38 | color: $color-highlight; 39 | } 40 | } 41 | } 42 | 43 | .edit_team_profile_list_controls { 44 | i { 45 | color: $base-font-color; 46 | 47 | &.ts_icon_cog_o:hover { 48 | color: $color-highlight; 49 | } 50 | 51 | &.ts_icon_grabby_patty:hover { 52 | color: $color-highlight; 53 | } 54 | } 55 | } 56 | 57 | .sortable-placeholder::before { 58 | border-top: 1px solid $color-shade-light; 59 | } 60 | } 61 | 62 | #edit_team_profile_add { 63 | .row { 64 | &:last-child { 65 | border-bottom: 1px solid $color-shade-light; 66 | } 67 | 68 | &:not(.header_row) { 69 | &:hover { 70 | background: $color-shade-dark; 71 | border: 1px solid $color-shade-darkest; 72 | 73 | .col:first-child { 74 | color: $base-font-color; 75 | } 76 | 77 | i { 78 | border-color: $color-shade-darkest; 79 | color: $base-font-color; 80 | } 81 | } 82 | } 83 | } 84 | 85 | i { 86 | color: $color-highlight; 87 | } 88 | } 89 | 90 | #edit_team_profile_edit { 91 | .profile_field_preview_protector label.select { 92 | &::after, 93 | &:hover::after { 94 | color: $color-highlight; 95 | } 96 | } 97 | 98 | .row { 99 | &.option_row.show_remove_action { 100 | i { 101 | border: 1px solid $color-shade-darkest; 102 | 103 | &:hover { 104 | background-color: $color-red; 105 | border-color: $color-red !important; 106 | color: $base-font-color; 107 | } 108 | } 109 | } 110 | 111 | i { 112 | border: 1px solid $color-shade-darkest; 113 | color: $base-font-color; 114 | } 115 | } 116 | } 117 | 118 | #edit_team_profile_custom .row { 119 | .col { 120 | .profile_field_preview { 121 | background: $color-shade-dark; 122 | border: 2px solid $color-shade-darkest; 123 | 124 | &:active, 125 | &:hover { 126 | border-color: $color-shade-dark; 127 | 128 | span { 129 | color: $color-highlight; 130 | } 131 | } 132 | } 133 | 134 | input { 135 | background: $color-shade-light; 136 | border: 1px solid $color-shade-darkest; 137 | } 138 | 139 | &[data-type=options_list] { 140 | span::after { 141 | color: $color-highlight; 142 | } 143 | 144 | input { 145 | border-right: 1px solid $color-shade-darkest; 146 | } 147 | } 148 | } 149 | } 150 | 151 | .profile_field_preview_protector { 152 | .profile_field_preview { 153 | background: $color-base; 154 | border: 1px solid $color-shade-light; 155 | 156 | &::after { 157 | background-color: $color-base; 158 | box-shadow: 0 0.75rem 0.75rem $color-shadow-medium; 159 | } 160 | 161 | &::before { 162 | background-color: $color-base; 163 | box-shadow: 0 0.75rem 0.75rem $color-shadow-medium; 164 | } 165 | 166 | input:disabled, 167 | select:disabled { 168 | background: $color-shade-light; 169 | color: $color-highlight; 170 | } 171 | 172 | .profile_field_preview_fade_out_mask { 173 | background: linear-gradient(to left, $color-shade-darkest, $color-shadow-transparent); 174 | } 175 | 176 | .profile_field_preview_ribbon { 177 | &::before { 178 | border-color: transparent transparent transparent $color-shade-darkest; 179 | } 180 | 181 | &::after { 182 | border-color: $color-shade-darkest transparent transparent; 183 | } 184 | } 185 | } 186 | } 187 | 188 | .p-member_profile { 189 | &_card { 190 | background: $color-shade-darker; 191 | } 192 | 193 | &_name__link, 194 | &_name__link:hover { 195 | color: $base-font-color; 196 | } 197 | 198 | &_field__label { 199 | color: $base-font-color; 200 | } 201 | } 202 | -------------------------------------------------------------------------------- /scss/modules/header/_base.scss: -------------------------------------------------------------------------------- 1 | .channel_header { 2 | background: $color-base; 3 | box-shadow: inset 1px 0 0 0 $color-base; 4 | 5 | .blue_on_hover:hover { 6 | color: $base-font-color; 7 | } 8 | } 9 | 10 | #client_body:not(.onboarding)::before { 11 | background: $color-base; 12 | border-bottom: 1px solid $color-shade-dark; 13 | box-shadow: inset 1px 0 0 0 $color-base; 14 | } 15 | 16 | #client_body:not(.onboarding):not(.feature_global_nav_layout)::before { 17 | background: $color-base; 18 | border-bottom: 1px solid $color-shade-dark; 19 | box-shadow: inset 1px 0 0 0 $color-base; 20 | } 21 | 22 | .messages_header { 23 | color: $base-font-color; 24 | } 25 | 26 | .channel_title { 27 | .channel_name_container { 28 | .channel_name { 29 | color: $base-font-color; 30 | 31 | &.muted { 32 | color: $color-highlight; 33 | } 34 | } 35 | 36 | .ts_icon_shared_channel, 37 | .mpdm_member { 38 | &.away { 39 | color: $color-highlight; 40 | } 41 | } 42 | 43 | .muted_icon { 44 | color: $color-highlight; 45 | 46 | &:hover { 47 | color: $color-red; 48 | } 49 | } 50 | } 51 | } 52 | 53 | #im_title.away { 54 | color: $color-highlight; 55 | } 56 | 57 | .channel_header_info button { 58 | color: $base-link-color; 59 | } 60 | 61 | .channel_header_icon { 62 | color: $base-font-color; 63 | } 64 | 65 | .channel_calls_button .call_icon.call_window_offline { 66 | color: $color-highlight; 67 | } 68 | 69 | .channel_actions_toggle, 70 | .details_toggle { 71 | &.active:focus { 72 | color: $base-font-color; 73 | } 74 | } 75 | 76 | #flex_menu_toggle { 77 | &.active, 78 | &.active:focus { 79 | color: $base-font-color; 80 | } 81 | 82 | .flex_menu_download_circle { 83 | background: $color-base; 84 | 85 | canvas { 86 | background: $color-base; 87 | } 88 | } 89 | 90 | &.unread #help_icon_circle_count { 91 | background-color: $color-red; 92 | color: $white; 93 | } 94 | 95 | &.open #help_icon_circle_count { 96 | background-color: $color-shade-darkest; 97 | color: $base-font-color; 98 | } 99 | } 100 | 101 | #canvases_toggle, 102 | #details_toggle, 103 | #recent_mentions_toggle, 104 | #sli_recap_toggle, 105 | #stars_toggle { 106 | &.active { 107 | background: $color-shade-dark; 108 | color: $base-font-color; 109 | 110 | &:hover { 111 | background: $color-shade-light; 112 | color: $base-font-color; 113 | } 114 | } 115 | } 116 | 117 | #recent_mentions_toggle:hover { 118 | color: $color-red; 119 | } 120 | 121 | #rxn_toast_div { 122 | background: $color-shade-darkest; 123 | border: 1px solid $color-shade-light; 124 | } 125 | 126 | .presence { 127 | color: $color-highlight; 128 | } 129 | 130 | #edit_topic_inner:not(.unable_to_post)::before { 131 | background: $color-base; 132 | border-color: $color-shade-dark; 133 | } 134 | 135 | #edit_topic_trigger { 136 | color: $base-link-color; 137 | } 138 | 139 | .p-classic_nav { 140 | background: $color-shade-dark; 141 | 142 | &__model { 143 | &__button { 144 | color: $base-font-color; 145 | } 146 | 147 | &_header { 148 | opacity: 0.8; 149 | } 150 | 151 | &__title { 152 | &__is_you { 153 | color: $color-shade-lightest; 154 | } 155 | 156 | &__info { 157 | color: $base-font-color; 158 | 159 | &__topic { 160 | &:hover { 161 | .p-classic_nav__model__title__info__topic__text:before { 162 | background: $color-base; 163 | color: $base-font-color; 164 | } 165 | } 166 | 167 | &__edit { 168 | color: $base-link-color; 169 | } 170 | } 171 | } 172 | 173 | &__name { 174 | &--dim { 175 | color: $color-shade-lightest; 176 | } 177 | 178 | &__status { 179 | &--im { 180 | color: $base-link-color; 181 | } 182 | } 183 | } 184 | } 185 | } 186 | 187 | &__right { 188 | &__button { 189 | color: $base-font-color; 190 | } 191 | 192 | &_header { 193 | opacity: 0.8; 194 | } 195 | 196 | &__search { 197 | border-color: $base-font-color; 198 | 199 | &:hover { 200 | border-color: $color-shade-lightest; 201 | 202 | .p-classic_nav__right__search { 203 | &__icon, 204 | &__placeholder { 205 | color: $color-shade-lightest; 206 | } 207 | } 208 | } 209 | 210 | &__icon, 211 | &__placeholder { 212 | color: $base-font-color; 213 | } 214 | } 215 | } 216 | 217 | &__team_menu { 218 | &__blurb { 219 | &__sub { 220 | color: $base-link-color; 221 | } 222 | } 223 | } 224 | 225 | &__team_header { 226 | background: $color-shade-dark; 227 | } 228 | } 229 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | I welcome pull requests from anyone. This guide will prepare you for making your first pull request, and will get you set up for making changes. 3 | 4 | Knowledge of [SCSS](http://sass-lang.com/documentation/) is required for changing styles. Reporting any issue is encouraged. 5 | 6 | Changes should not be made directly to any file within the `css` directory since these are generated files. 7 | 8 | **Sections:** 9 | 10 | 11 | 12 | - [Build Requirements](#build-requirements) 13 | - [Installing SassC](#installing-sassc) 14 | - [Installing SCSS-Lint](#installing-scss-lint) 15 | - [Building Themes](#building-themes) 16 | - [Making Changes](#making-changes) 17 | - [Project Structure](#project-structure) 18 | - [Finding Changes](#finding-changes) 19 | - [Styling](#styling) 20 | - [Testing Themes](#testing-themes) 21 | - [Making Custom Themes](#making-custom-themes) 22 | - [Syncing with Upstream](#syncing-with-upstream) 23 | 24 | 25 | 26 | ## Build Requirements 27 | [SassC](http://sass-lang.com/libsass#sassc) is used for Sass compilation. It's _much_ faster than alternatives (compiling all themes should take <0.5s) since it is written in C. 28 | 29 | [SCSS-Lint](https://github.com/brigade/scss-lint/) is used to ensure all SCSS follows the project's style preferences. 30 | 31 | ### Installing SassC 32 | 33 | Depending on your OS (incl. most Linux distributions, Windows), SassC may need to be [built from source](https://github.com/sass/sassc#documentation). 34 | 35 | * **Arch:** `sudo pacman -S sassc` 36 | * **Mac OS X:** `brew install sassc` 37 | 38 | ### Installing SCSS-Lint 39 | 40 | SCSS-Lint requires Ruby. If you don't use Ruby, this isn't entirely necessary to install. [Hound](https://houndci.com/repos) already monitors pull requests for style errors, so changes can be made at a later stage. 41 | 42 | Install SCSS-Lint by running `gem install scss_lint`. 43 | 44 | ## Building Themes 45 | 46 | Once the required dependencies are installed, run `make` to compile all the themes. 47 | 48 | Lint the project by running `scss-lint` in the project root. I recommend using a plugin with your favorite editor (e.g. `linter-scss-lint` for Atom), so that this runs while you make changes. 49 | 50 | ## Making Changes 51 | 52 | ### Project Structure 53 | 54 | * _scss/_ 55 | * _helpers/_ - SCSS functions, mixins, and variables 56 | * _layout/_ - Styles that occur throughout the Slack layout (i.e. shared styles) 57 | * _modules/_ - Styles for specific parts of Slack, organized in parent directories 58 | * _themes/_ - Theme files that override the default theme's variables 59 | * _build-variants/_ - Each file here is compiled as a theme, allowing for theme extensions 60 | * _theme--main.scss_ - Extension wrapped for use on slack.com; compiles to _css/variants/_ 61 | * _theme--styles.scss_ - Extension; compiles to _css/raw/variants/_ 62 | * _main.scss_ - Includes all of the SCSS files, wrapped for use on slack.com; compiles to _css/_ 63 | * _styles.scss_ - Includes all of the SCSS files; compiles to _css/raw/_ 64 | 65 | ### Finding Changes 66 | Changes require a bit of searching using your browser's developer tools. It's recommended that you base styles off of Slack's own styles, using their selectors. Find the original CSS declaration in their CSS files and proceed to the next section. 67 | 68 | **Note:** Always check if a selector doesn't already exist in the project by recursively searching the `scss` folder. 69 | 70 | ### Styling 71 | Use a tool such as [CSS 2 SCSS](http://css2sass.herokuapp.com/) to easily convert the CSS to SCSS syntax. Strip all non-styling properties from the SCSS. Some extra organization may be needed, CSS 2 SCSS often doesn't understand how to properly nest/merge selectors. 72 | 73 | Put the styles in the appropriate Slack night mode theme file. If an appropriate theme file does not exist (typically only necessary for new features or restructuring), create a new file and import it in `main.scss`. 74 | 75 | Now it's just a matter of swapping out Slack's style definitions with theme variables. 76 | 77 | ## Testing Themes 78 | 79 | You must manually copy and paste themes into the Stylish manager to test changes. To quickly test themes, I recommend running `make`, then using a command-line tool to copy the compiled CSS into your clipboard: 80 | 81 | * **X systems:** `make && xclip -sel clip < css/black.css` 82 | * **Mac OS X:** `make && pbcopy < css/black.css` 83 | 84 | On Chromium-based browsers, when editing a Stylish theme, you must import a compiled CSS file because of the Mozilla specific domain-restriction syntax. If `xclip` is available, use `./bin/copy_raw.sh css/black.css`. 85 | 86 | ## Making Custom Themes 87 | If you decide to make your own theme, make a fork and create a new theme file (under `scss/themes/`). Adding a screenshot and customizing the README to be specific to your theme helps others find and use your theme. 88 | 89 | ### Syncing with Upstream 90 | Slack night mode is frequently updated. Keeping a theme fork up-to-date is fairly trivial. Remove the `css` folder to prevent conflicts, then [sync with upstream](https://help.github.com/articles/syncing-a-fork/). Once you rebuild the theme using `make`, your theme is updated. 91 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_channel.scss: -------------------------------------------------------------------------------- 1 | #details_tab { 2 | .heading { 3 | background: darken($color-base, 5%); 4 | 5 | a.close_flexpane { 6 | color: $base-link-color; 7 | 8 | &:hover { 9 | color: $base-link-color-active; 10 | } 11 | } 12 | } 13 | 14 | hr { 15 | border-top-color: $color-shade-dark; 16 | } 17 | 18 | .conversation_details { 19 | .member_name:hover { 20 | color: $color-highlight; 21 | } 22 | 23 | .member_username:hover { 24 | color: $base-font-color; 25 | } 26 | 27 | .member_info_timezone { 28 | border-top-color: $color-shade-light; 29 | } 30 | } 31 | 32 | .channel_page_section { 33 | background: $color-base; 34 | border-top: 1px solid $color-shade-dark; 35 | 36 | .section_header { 37 | &:hover { 38 | .disclosure_triangle { 39 | color: $base-link-color-active; 40 | } 41 | } 42 | 43 | a { 44 | color: $base-link-color; 45 | } 46 | } 47 | 48 | .section_title { 49 | color: $base-font-color; 50 | } 51 | 52 | .disclosure_triangle { 53 | color: $base-link-color; 54 | } 55 | 56 | .channel_page_members_highlighter, 57 | .channel_page_pinned_items_highlighter { 58 | background: rgba($color-red, 0.25) !important; 59 | } 60 | } 61 | 62 | .created_by { 63 | color: $base-font-color; 64 | } 65 | 66 | .channel_page_member_tabs { 67 | .icon_member_header { 68 | color: $color-highlight; 69 | } 70 | } 71 | 72 | .pinned_item:hover { 73 | border-color: $color-shade-light; 74 | } 75 | 76 | .channel_page_action { 77 | .leave_link { 78 | color: $base-link-color; 79 | 80 | &:hover { 81 | color: $base-link-color-active; 82 | } 83 | } 84 | } 85 | 86 | .channel_section_label .ts_icon_info_circle { 87 | color: $color-highlight; 88 | } 89 | 90 | .feature_sli_channel_insights { 91 | .channel_created_section .creator_link, 92 | .channel_purpose_section .channel_purpose_text { 93 | color: $color-highlight; 94 | } 95 | } 96 | } 97 | 98 | .channel_page_member_row { 99 | color: $base-font-color; 100 | 101 | a { 102 | color: $base-link-color; 103 | } 104 | 105 | &.away { 106 | color: $base-font-color; 107 | 108 | a { 109 | color: $base-link-color; 110 | } 111 | } 112 | 113 | &:hover { 114 | background-color: $color-shade-light; 115 | border-color: $color-shade-dark; 116 | } 117 | } 118 | 119 | .pinned_item { 120 | color: $base-font-color; 121 | 122 | .pin_file_title { 123 | color: $base-link-color; 124 | } 125 | 126 | .pin_member_name a { 127 | color: $base-link-color !important; 128 | } 129 | 130 | .pin_metadata { 131 | color: $color-highlight; 132 | } 133 | 134 | .remove_pin { 135 | color: $base-link-color; 136 | 137 | &:hover { 138 | color: $base-link-color-active; 139 | } 140 | } 141 | 142 | .pinned_message_text { 143 | .pin_truncate_fade { 144 | background: $color-base; 145 | } 146 | } 147 | 148 | &.delete_mode { 149 | border-color: $color-red !important; 150 | } 151 | } 152 | 153 | .p-channel_insights { 154 | .c-member__title { 155 | color: $color-highlight; 156 | } 157 | 158 | &_activity_bar { 159 | &_container { 160 | &:hover { 161 | background-color: rgba($color-shade-darkest, 0.05); 162 | 163 | .p-channel_insights__activity_bar { 164 | background-color: $color-shade-light; 165 | } 166 | } 167 | } 168 | } 169 | 170 | &__activity { 171 | border-color: $color-shade-light; 172 | } 173 | 174 | &__activity_bar { 175 | background-color: rgba($color-shade-light, 0.5); 176 | } 177 | 178 | &__channel { 179 | .channel_link { 180 | color: $base-font-color; 181 | } 182 | } 183 | 184 | &__date_heading { 185 | span { 186 | background-color: $color-base; 187 | color: $base-font-color; 188 | } 189 | 190 | &::before { 191 | background-color: $color-shade-light; 192 | } 193 | } 194 | 195 | &__drawer_title { 196 | color: $color-highlight; 197 | } 198 | 199 | &__highlights_description { 200 | color: $color-highlight; 201 | } 202 | 203 | &__item--user { 204 | .member_preview_link, 205 | .message_sender { 206 | color: $base-font-color !important; 207 | } 208 | } 209 | 210 | &__member_count { 211 | color: $color-highlight; 212 | 213 | .ts_icon_user { 214 | color: $color-highlight; 215 | } 216 | } 217 | 218 | &__message { 219 | &--truncate { 220 | &::before { 221 | background: linear-gradient(180deg, transparent, $color-base 90%); 222 | } 223 | } 224 | 225 | ts-message.standalone:not(.for_mention_display):not(.for_search_display):not(.for_top_results_search_display):not(.for_star_display) { 226 | background-color: $color-base; 227 | border-color: $color-shade-light; 228 | } 229 | } 230 | 231 | &__section:not(.p-channel_insights__section--no_border) { 232 | border-color: $color-shade-light; 233 | } 234 | 235 | &__title { 236 | color: $base-font-color; 237 | } 238 | 239 | &__user_title { 240 | color: $color-highlight; 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /scss/modules/pages/admin/_base.scss: -------------------------------------------------------------------------------- 1 | nav.top.persistent { 2 | background: $color-shade-dark; 3 | 4 | .logo { 5 | background-position: 50% 0 !important; 6 | } 7 | } 8 | 9 | .widescreen { 10 | #header_team_name a i { 11 | margin-left: 1.5em; 12 | } 13 | 14 | #user_menu { 15 | border-right: none; 16 | } 17 | } 18 | 19 | header { 20 | #menu_toggle { 21 | color: $base-link-color; 22 | } 23 | 24 | #header_team_nav { 25 | background: $color-shade-dark; 26 | border: 1px solid $color-shade-darkest; 27 | 28 | li.active a { 29 | background: $color-base; 30 | color: $base-font-color; 31 | } 32 | } 33 | 34 | .header_btns a { 35 | color: $base-link-color; 36 | 37 | .label { 38 | color: $color-highlight; 39 | } 40 | } 41 | 42 | .vert_divider { 43 | border-left: 1px solid $color-shade-darkest; 44 | } 45 | } 46 | 47 | footer, 48 | #autocomplete_menu.search_menu footer.unified { 49 | background-color: $color-base; 50 | border-color: $color-shade-darkest; 51 | color: $base-font-color; 52 | 53 | ul a { 54 | color: $base-font-color; 55 | 56 | &:link, 57 | &:visited { 58 | color: $base-font-color; 59 | } 60 | } 61 | } 62 | 63 | .plastic_row { 64 | h3 { 65 | color: $base-font-color; 66 | } 67 | 68 | h4 a { 69 | color: $base-font-color; 70 | } 71 | 72 | .icon { 73 | color: $base-font-color; 74 | } 75 | 76 | .chevron { 77 | color: $color-highlight; 78 | } 79 | 80 | .description { 81 | color: $base-font-color; 82 | } 83 | 84 | &:active { 85 | background: $color-base; 86 | border-color: $color-shade-darkest; 87 | 88 | .chevron { 89 | color: $base-font-color; 90 | } 91 | } 92 | } 93 | 94 | html.no_touch { 95 | .plastic_row:hover { 96 | background: $color-base; 97 | border-color: $color-shade-darkest; 98 | 99 | .chevron { 100 | color: $base-font-color; 101 | } 102 | } 103 | 104 | .pagination ul > { 105 | li > a:hover { 106 | background-color: $color-shade-darkest; 107 | } 108 | 109 | .disabled > a:hover { 110 | background: $color-shade-dark; 111 | color: $color-highlight; 112 | } 113 | } 114 | 115 | .pager li > a { 116 | &:hover, 117 | &:focus { 118 | color: $base-link-color-active; 119 | } 120 | } 121 | } 122 | 123 | .card, 124 | .tab_pane { 125 | background: $color-shade-dark; 126 | border: 1px solid $color-shade-darkest; 127 | color: $base-font-color; 128 | } 129 | 130 | .card h3 a { 131 | color: $base-font-color; 132 | } 133 | 134 | #page_contents .card { 135 | background: transparentize($color-shade-dark, 0.2) !important; 136 | 137 | p { 138 | color: $base-font-color; 139 | } 140 | } 141 | 142 | .tab_set a { 143 | &.secondary { 144 | color: $base-link-color; 145 | } 146 | 147 | &.selected, 148 | &.secondary.selected { 149 | background: $color-shade-dark; 150 | border: 1px solid $color-shade-darkest; 151 | border-bottom-color: $color-shade-dark; 152 | color: $base-link-color-active; 153 | } 154 | } 155 | 156 | .tab_actions { 157 | background: $color-shade-dark; 158 | border: 1px solid $color-shade-darkest; 159 | border-color: $color-shade-darkest; 160 | } 161 | 162 | .accordion_section { 163 | border-bottom-color: $color-base; 164 | 165 | h4 { 166 | color: $base-font-color; 167 | 168 | a { 169 | color: $base-font-color; 170 | } 171 | } 172 | } 173 | 174 | .no_touch .accordion_section h4 a:hover { 175 | color: $base-font-color; 176 | } 177 | 178 | .accordion_section_fixed { 179 | border-bottom-color: $color-base !important; 180 | } 181 | 182 | .pager { 183 | li { 184 | > a, 185 | > span { 186 | background-color: $color-base; 187 | background-image: none; 188 | border-color: $color-shade-dark; 189 | color: $base-link-color; 190 | } 191 | 192 | &.previous > { 193 | a, 194 | span { 195 | background-position: 0; 196 | padding-right: 0; 197 | text-align: center; 198 | } 199 | } 200 | 201 | &.next > { 202 | a, 203 | span { 204 | background-position: 0; 205 | padding-left: 0; 206 | text-align: center; 207 | } 208 | } 209 | } 210 | 211 | .disabled > { 212 | a, 213 | span { 214 | color: $color-highlight; 215 | } 216 | } 217 | } 218 | 219 | .pagination ul > { 220 | li > { 221 | a, 222 | span { 223 | background: $color-shade-dark; 224 | border: 1px solid $color-shade-darkest; 225 | color: $base-font-color; 226 | } 227 | 228 | a:focus { 229 | background-color: $color-shade-darkest; 230 | } 231 | } 232 | 233 | .active > { 234 | a, 235 | span { 236 | background-color: $color-shade-darkest; 237 | } 238 | } 239 | 240 | .disabled > { 241 | span { 242 | background: $color-shade-dark; 243 | color: $color-highlight; 244 | } 245 | 246 | a { 247 | background: $color-shade-dark; 248 | color: $base-link-color; 249 | 250 | &:focus { 251 | background: $color-shade-dark; 252 | color: $base-link-color-active; 253 | } 254 | } 255 | } 256 | } 257 | 258 | .loading_hash_animation img { 259 | display: none; 260 | } 261 | 262 | .icon_search_close { 263 | color: $base-link-color; 264 | 265 | &:hover { 266 | color: $base-link-color-active; 267 | } 268 | } 269 | 270 | .help { 271 | border-top-color: $color-shade-darkest; 272 | color: $color-highlight; 273 | } 274 | -------------------------------------------------------------------------------- /scss/modules/messaging/_threads.scss: -------------------------------------------------------------------------------- 1 | #threads_msgs_scroller_div { 2 | background: $color-base; 3 | 4 | &:not(.loading)::before { 5 | background: $color-base; 6 | } 7 | 8 | &.loading::before { 9 | color: $color-highlight; 10 | } 11 | 12 | .threads_caught_up_divider { 13 | .divider_line { 14 | border-top: 1px solid $color-shade-dark; 15 | } 16 | 17 | .divider_label { 18 | background: $color-shade-light; 19 | color: $base-font-color; 20 | } 21 | } 22 | 23 | &.loading { 24 | background: none; 25 | 26 | &::before { 27 | color: $base-font-color; 28 | } 29 | } 30 | 31 | #thread_notification_banner { 32 | background-color: $color-shade-dark; 33 | border-bottom-color: $color-shade-mid; 34 | 35 | .banner_description { 36 | color: $base-font-color; 37 | } 38 | } 39 | } 40 | 41 | #threads_view_banner.messages_banner { 42 | background: $color-shade-dark; 43 | 44 | &:hover { 45 | background: $color-shade-light; 46 | 47 | .clear_unread_messages { 48 | background: $color-shade-light; 49 | } 50 | } 51 | } 52 | 53 | #threads_msgs.new_banner_is_showing::before { 54 | background: $color-base; 55 | } 56 | 57 | .p-message_container_loading { 58 | background: $color-base; 59 | } 60 | 61 | .p-message_container_loading__msg { 62 | color: $base-font-color; 63 | } 64 | 65 | .p-threads_view { 66 | background: $color-base; 67 | 68 | &__divider { 69 | &_line, 70 | &_label { 71 | background: $color-shade-dark; 72 | border-color: $color-shade-dark; 73 | color: $base-font-color; 74 | } 75 | } 76 | 77 | &__footer, 78 | &_root { 79 | border-color: $color-shade-darker; 80 | } 81 | 82 | &__default_background { 83 | background: $color-shade-dark; 84 | } 85 | 86 | &_header { 87 | &__channel_name, 88 | &__participant_list { 89 | color: $base-font-color; 90 | } 91 | } 92 | 93 | .p_threads_view_load_newer_button, 94 | .p_threads_view_load_older_button { 95 | background: $color-shade-dark; 96 | border-color: $color-shade-darker; 97 | 98 | .c-link--button { 99 | color: $base-link-color; 100 | } 101 | } 102 | 103 | &_reply { 104 | border-color: $color-shade-darker; 105 | 106 | &--new_reply { 107 | background: $color-shade-dark; 108 | } 109 | } 110 | } 111 | 112 | .p-threads_footer__input, 113 | .p-threads_footer__input--legacy { 114 | .p-message_input_field { 115 | background: $color-shade-dark; 116 | } 117 | 118 | .p-message_input_file_button { 119 | background: $color-shade-dark; 120 | } 121 | } 122 | 123 | .p-workspace__input { 124 | .p-message_input_field, 125 | .p-message_input_field.focus { 126 | border-color: $color-shade-light; 127 | 128 | ~.p-message_input_file_button:not(:hover) { 129 | color: $base-link-color; 130 | } 131 | } 132 | 133 | .p-message_input_file_button:hover { 134 | background: $color-shade-mid; 135 | color: $base-link-color; 136 | } 137 | } 138 | 139 | ts-thread { 140 | background: $color-base; 141 | 142 | .reply_input_container { 143 | .inline_message_input_container { 144 | form textarea { 145 | border-color: $color-shade-dark; 146 | color: $base-font-color; 147 | } 148 | } 149 | 150 | .collapsed_input_placeholder, 151 | .join_channel_from_thread_container, 152 | .reply_limited_in_general { 153 | background: $color-shade-dark; 154 | border-color: $color-shade-dark; 155 | } 156 | } 157 | 158 | .thread_messages { 159 | background: $color-shade-dark; 160 | border-color: $color-shade-dark; 161 | } 162 | 163 | ts-message.new_reply { 164 | background: $color-base; 165 | 166 | &:hover { 167 | background: $color-shade-dark; 168 | } 169 | } 170 | 171 | .thread_header { 172 | .thread_channel_name a { 173 | color: $base-font-color; 174 | } 175 | 176 | .thread_action_btns button { 177 | color: $color-highlight; 178 | } 179 | } 180 | 181 | .new_reply_indicator .blue_dot { 182 | color: $color-red; 183 | } 184 | } 185 | 186 | #convo_tab .thread_participants, 187 | ts-thread .thread_participants { 188 | color: $color-highlight; 189 | } 190 | 191 | #convo_loading_indicator { 192 | background-image: none; 193 | } 194 | 195 | .reply_input_container .inline_message_input_container .ql-container { 196 | background-color: $color-shade-light; 197 | border: 1px solid $color-shade-dark; 198 | 199 | .ql-editor { 200 | &::-webkit-scrollbar-thumb { 201 | background-color: $color-shadow-light; 202 | 203 | &:hover { 204 | background-color: $color-shadow-medium; 205 | } 206 | } 207 | } 208 | 209 | &.focus { 210 | border-color: $color-shadow-light; 211 | 212 | ~ .emo_menu { 213 | color: $base-font-color; 214 | } 215 | } 216 | 217 | ~ .emo_menu { 218 | color: $color-highlight; 219 | } 220 | } 221 | 222 | #file_reply_container, 223 | #reply_container, 224 | .reply_input_container { 225 | .reply_container_info .reply_broadcast_buttons_container .reply_broadcast_label_container { 226 | color: $color-highlight; 227 | } 228 | } 229 | #file_reply_container .reply_limited, 230 | #reply_container .reply_limited, 231 | .reply_input_container .reply_limited, 232 | ts-thread .reply_input_container .reply_limited { 233 | background-color: $color-shade-dark; 234 | border-color: $color-shade-light; 235 | color: $base-font-color; 236 | } 237 | 238 | #notification_banner { 239 | background-color: $color-shade-dark; 240 | 241 | h1, 242 | h2 { 243 | color: $base-font-color; 244 | } 245 | } 246 | 247 | #notification_banner::before { 248 | background-color: $color-shade-dark; 249 | border-bottom-color: $color-shade-dark; 250 | } 251 | 252 | .c-link--button { 253 | color: $base-link-color; 254 | 255 | &:hover { 256 | color: $base-link-color-active; 257 | } 258 | } 259 | -------------------------------------------------------------------------------- /scss/layout/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .client_channels_list_container { 2 | background-color: $color-shade-dark; 3 | border-right-color: $color-base; 4 | } 5 | 6 | #col_channels { 7 | color: $base-font-color; 8 | } 9 | 10 | .p-channel_sidebar { 11 | background-color: $color-shade-dark; 12 | color: $base-font-color; 13 | 14 | &__channel, 15 | &__link { 16 | &, 17 | &:link, 18 | &:visited, 19 | &:hover { 20 | color: rgba($base-font-color, 0.8) !important; 21 | } 22 | 23 | &--selected, 24 | &--selected:link, 25 | &--selected:visited, 26 | &--selected:hover { 27 | color: $base-font-color; 28 | } 29 | 30 | &:hover { 31 | background: $color-base !important; 32 | } 33 | } 34 | 35 | &__header { 36 | color: $base-font-color !important; 37 | } 38 | 39 | &__channel--im.p-channel_sidebar__channel--selected .c-presence, 40 | &__channel--im-slackbot.p-channel_sidebar__channel--selected::before { 41 | color: $base-font-color; 42 | } 43 | 44 | &__channel--im .c-presence--away { 45 | color: $color-highlight; 46 | } 47 | 48 | &__channel--selected, 49 | &__link--selected { 50 | background: $color-shade-light !important; 51 | 52 | &:hover { 53 | background: $color-shade-light !important; 54 | } 55 | } 56 | 57 | &__channel--selected { 58 | &::before, 59 | &:hover::before, 60 | &::after, 61 | &:hover::after { 62 | color: $base-font-color; 63 | } 64 | } 65 | 66 | &__link--selected { 67 | &::before, 68 | &::after { 69 | color: $base-font-color; 70 | } 71 | } 72 | 73 | &__badge, 74 | &__banner--mentions { 75 | background: $color-red; 76 | } 77 | 78 | .c-custom_scrollbar__thumb_vertical, 79 | .c-scrollbar__bar { 80 | background: $color-shade-light; 81 | } 82 | 83 | &__channel--unread:not(.p-channel_sidebar__channel--muted):not(.p-channel_sidebar__channel--selected) .p-channel_sidebar__name, 84 | &__link--unread .p-channel_sidebar__name, 85 | &__link--invites:not(.p-channel_sidebar__link--dim) .p-channel_sidebar__name, 86 | &__section_heading_label--clickable:hover, 87 | &__quickswitcher:hover { 88 | color: lighten($base-font-color, 6%) !important; 89 | } 90 | 91 | &__close_container:hover { 92 | background: $color-shade-darkest; 93 | } 94 | 95 | &__jumper { 96 | background: transparent !important; // !important in order to overcome specificity score that matches base style 97 | } 98 | } 99 | 100 | .channels_list_holder { 101 | h2 { 102 | color: $base-font-color !important; 103 | 104 | &.hoverable:not(.jquery_hover):hover { 105 | color: $base-font-color; 106 | opacity: 0.8; 107 | } 108 | } 109 | 110 | ul { 111 | color: $base-font-color !important; 112 | 113 | li { 114 | text-shadow: 0 1px 1px $color-shadow-light; 115 | 116 | .channel_name, 117 | .group_name, 118 | .im_name, 119 | .mpim_name, 120 | > a { 121 | background: $color-shade-dark; 122 | color: rgba($base-font-color, 0.8) !important; 123 | 124 | &:hover { 125 | background: $color-base !important; 126 | border-bottom-right-radius: 0.25rem; 127 | border-top-right-radius: 0.25rem; 128 | } 129 | } 130 | 131 | .primary_action { 132 | &.im_name:hover .im_name_background, 133 | &.feature_user_custom_status:hover .im_name_background, 134 | &:not(.feature_user_custom_status):hover { 135 | background: $color-base; 136 | } 137 | } 138 | 139 | &.mention a { 140 | color: $base-font-color; 141 | } 142 | 143 | &.unread { 144 | &:not(.muted_channel) .primary_action { 145 | color: lighten($base-font-color, 6%) !important; 146 | } 147 | 148 | .prefix { 149 | color: $base-font-color !important; 150 | opacity: 1; 151 | } 152 | } 153 | } 154 | } 155 | 156 | .group_close, 157 | .im_close, 158 | .mpim_close { 159 | color: $base-link-color !important; 160 | } 161 | 162 | .unread_highlights { 163 | background: $color-red; 164 | color: $base-font-color; 165 | text-shadow: 0 1px 0 $color-shadow-light; 166 | } 167 | 168 | .unread_msgs { 169 | background: $color-base; 170 | color: $base-font-color; 171 | } 172 | } 173 | 174 | #channel_list_invites_link { 175 | border-bottom: 1px dotted $base-link-color; 176 | color: $base-link-color !important; 177 | font-size: 0.9rem; 178 | 179 | &:hover { 180 | border-bottom: 1px solid $base-link-color; 181 | } 182 | } 183 | 184 | #quick_switcher_btn { 185 | background: $color-shade-dark; 186 | border-top: 2px solid $color-shade-dark; 187 | 188 | > i { 189 | color: $color-highlight; 190 | } 191 | 192 | &:active, 193 | &:hover { 194 | background: $color-base; 195 | border-color: $color-base; 196 | 197 | > i { 198 | color: $base-link-color; 199 | } 200 | 201 | #quick_switcher_label { 202 | color: $base-link-color; 203 | } 204 | } 205 | } 206 | 207 | #quick_switcher_label { 208 | color: $color-highlight; 209 | } 210 | 211 | .p-channel_insights { 212 | &__channel { 213 | .channel_link { 214 | color: $base-link-color; 215 | } 216 | } 217 | 218 | &__date_heading { 219 | &::before { 220 | background-color: $color-shade-dark; 221 | } 222 | 223 | span { 224 | background-color: $color-base; 225 | color: $color-highlight; 226 | } 227 | } 228 | 229 | &__message--truncate { 230 | &::before { 231 | background: linear-gradient(180deg,transparent,$color-shade-dark 90%); 232 | } 233 | } 234 | 235 | &__message { 236 | ts-message { 237 | &.standalone:not(.for_mention_display):not(.for_search_display):not(.for_top_results_search_display):not(.for_star_display) { 238 | background-color: $color-base; 239 | border-color: $color-shade-dark; 240 | } 241 | } 242 | } 243 | } 244 | -------------------------------------------------------------------------------- /scss/modules/menu/_autocomplete.scss: -------------------------------------------------------------------------------- 1 | #autocomplete_menu { 2 | color: $base-font-color; 3 | 4 | header { 5 | background-color: $color-base; 6 | 7 | .header_label { 8 | color: $color-highlight; 9 | } 10 | 11 | hr { 12 | border-bottom-color: transparent; 13 | border-top-color: $color-shade-darkest; 14 | } 15 | } 16 | 17 | h2 { 18 | color: $base-font-color; 19 | } 20 | 21 | .no_results { 22 | color: $base-font-color; 23 | } 24 | 25 | .keyword_match .modifier { 26 | color: $color-highlight; 27 | } 28 | 29 | .boxed { 30 | background: $color-base; 31 | border: 1px solid $color-shade-dark; 32 | box-shadow: 0 1px 0 0 $color-shadow-light; 33 | } 34 | 35 | .pickmeup { 36 | border-bottom: 1px solid $color-shade-dark; 37 | } 38 | 39 | &.search_menu, 40 | &.search_menu.unified { 41 | .section_header::before { 42 | background-color: $color-shade-light; 43 | } 44 | 45 | header { 46 | color: $base-font-color; 47 | 48 | .header_label::before { 49 | background-color: $color-shade-dark; 50 | } 51 | } 52 | 53 | .query_header { 54 | background-color: transparent; 55 | 56 | .search_query_preview { 57 | color: $base-font-color; 58 | } 59 | } 60 | 61 | li.highlighted { 62 | .result_item_btn { 63 | background: $color-shade-dark; 64 | color: $base-font-color; 65 | text-shadow: 0 1px 0 $color-shadow-light; 66 | } 67 | 68 | .modifier_icon { 69 | color: $color-highlight; 70 | } 71 | 72 | .action_btn { 73 | color: $base-font-color; 74 | } 75 | 76 | .delete_btn { 77 | color: $base-link-color; 78 | 79 | &:focus, 80 | &:hover { 81 | color: $color-red; 82 | } 83 | } 84 | 85 | .muted_text { 86 | color: $color-highlight; 87 | } 88 | } 89 | 90 | &:not(.keyboard_active) li, 91 | .results.unified:not(.keyboard_active) li { 92 | &:focus, 93 | &:hover { 94 | background: transparent; 95 | 96 | .muted_text { 97 | color: $color-highlight; 98 | } 99 | 100 | .result_item_btn { 101 | background: $color-shade-dark; 102 | color: $base-font-color; 103 | text-shadow: 0 1px 0 $color-shadow-light; 104 | } 105 | 106 | .modifier_icon { 107 | color: $color-highlight; 108 | } 109 | 110 | .action_btn { 111 | color: $base-font-color; 112 | } 113 | 114 | .delete_btn { 115 | color: $base-link-color; 116 | 117 | &:focus, 118 | &:hover { 119 | color: $color-red; 120 | } 121 | } 122 | } 123 | } 124 | 125 | .muted_text { 126 | color: $color-highlight; 127 | } 128 | 129 | .time_modifiers::before { 130 | background-color: $color-shade-dark; 131 | } 132 | 133 | .result_item_btn { 134 | color: $base-font-color; 135 | } 136 | 137 | .results.unified { 138 | .unified_autocomplete_item { 139 | .text { 140 | color: $base-font-color; 141 | } 142 | 143 | .token { 144 | background-color: $color-shade-mid; 145 | color: $base-font-color; 146 | } 147 | } 148 | } 149 | 150 | .action_btn, 151 | .modifier_icon { 152 | color: $color-highlight; 153 | } 154 | 155 | footer, 156 | footer.unified { 157 | .keyword::before, 158 | .modifier::before { 159 | background: $color-shade-lightest; 160 | border: 1px solid $color-shade-light; 161 | color: $base-font-color; 162 | } 163 | 164 | .selected { 165 | .keyword::before, 166 | .modifier::before { 167 | background: rgba($color-shade-light, 0.25); 168 | border: $color-shade-lightest; 169 | } 170 | } 171 | 172 | .modifier.incomplete::before { 173 | background: $color-shade-dark; 174 | border: 1px solid $color-shade-darkest; 175 | } 176 | } 177 | } 178 | } 179 | 180 | .search_light_grey { 181 | color: $base-font-color !important; 182 | } 183 | 184 | .highlighter_underlay { 185 | .keyword::before { 186 | background: $color-shade-lightest; 187 | border: 1px solid $color-shade-light; 188 | color: $base-font-color; 189 | } 190 | 191 | .modifier { 192 | &::before { 193 | background: $color-shade-lightest; 194 | border: 1px solid $color-shade-light; 195 | color: $base-font-color; 196 | } 197 | 198 | &.incomplete::before { 199 | background: $color-shade-dark; 200 | border: 1px solid $color-shade-darkest; 201 | } 202 | } 203 | 204 | .selected { 205 | .keyword::before, 206 | .modifier::before { 207 | background: rgba($color-shade-lightest, 0.25); 208 | border: $color-shade-light; 209 | } 210 | } 211 | 212 | .ghost_text { 213 | color: $base-font-color; 214 | } 215 | } 216 | 217 | .c-texty_autocomplete { 218 | &__body { 219 | background-color: $color-base; 220 | } 221 | } 222 | 223 | .c-texty_autocomplete--commands { 224 | background: $color-base; 225 | box-shadow: 0 0 0 1px $color-shade-light, 0 4px 12px 0 $color-shade-light; 226 | 227 | .c-texty_autocomplete { 228 | &__group { 229 | background-color: $color-shade-dark; 230 | color: $base-font-color; 231 | } 232 | 233 | &__result { 234 | background-color: $color-base; 235 | 236 | &:not(.c-texty_autocomplete__result--selected) { 237 | .c-texty_autocomplete__result_description { 238 | color: $base-link-color; 239 | } 240 | } 241 | 242 | &--selected { 243 | background: $color-shade-mid; 244 | } 245 | 246 | &_highlight, 247 | &_highlight--selected { 248 | background: $color-shade-dark; 249 | } 250 | 251 | &_title { 252 | color: $base-font-color; 253 | } 254 | } 255 | } 256 | } 257 | -------------------------------------------------------------------------------- /scss/modules/messaging/_code.scss: -------------------------------------------------------------------------------- 1 | code { 2 | background-color: $color-shade-darkest; 3 | border: 1px solid $color-shade-dark; 4 | color: $base-font-color; 5 | 6 | a.app_preview_link { 7 | background: $color-shade-dark; 8 | border: 1px solid $color-shade-light; 9 | color: $base-font-color; 10 | } 11 | } 12 | 13 | .file_list_item.snippet .snippet_preview { 14 | background: $color-shade-darkest; 15 | } 16 | 17 | .snippet_preview, 18 | .snippet_body { 19 | background: $color-shade-darkest; 20 | 21 | pre { 22 | color: $base-font-color !important; 23 | } 24 | } 25 | 26 | .file_container, 27 | .c-pillow_file_container, 28 | .c-file_container { 29 | .CodeMirror, 30 | .sssh-code { 31 | .CodeMirror-code > div::before, 32 | .sssh-line::before { 33 | background-color: $color-shade-dark; 34 | border-right: 1px solid $color-shade-dark; 35 | color: $color-highlight; 36 | } 37 | } 38 | } 39 | 40 | .c-snippet .c-file_container { 41 | background-color: $color-base; 42 | 43 | &.c-file_container--gradient::after { 44 | background: linear-gradient(180deg, $color-shadow-transparent, $color-base); 45 | border-bottom-left-radius: 4px; 46 | border-bottom-right-radius: 4px; 47 | } 48 | } 49 | 50 | .CodeMirror { 51 | background: $color-shade-darkest; 52 | border: 1px solid $color-shade-dark; 53 | color: $base-font-color !important; 54 | 55 | pre { 56 | background: transparent !important; 57 | } 58 | 59 | div.CodeMirror-cursor { 60 | border-left: 1px solid $base-font-color; 61 | } 62 | 63 | &.cm-fat-cursor div.CodeMirror-cursor { 64 | background: $base-font-color; 65 | } 66 | 67 | .CodeMirror-gutters { 68 | background-color: $color-shade-dark; 69 | border-right: 1px solid $color-base; 70 | } 71 | } 72 | 73 | .CodeMirror-gutter-filler, 74 | .CodeMirror-scrollbar-filler { 75 | background-color: $color-shade-dark; 76 | } 77 | 78 | .CodeMirror-linenumber { 79 | color: $color-highlight !important; 80 | } 81 | 82 | .CodeMirror-guttermarker { 83 | color: $color-highlight; 84 | } 85 | 86 | .CodeMirror-guttermarker-subtle { 87 | color: $color-highlight; 88 | } 89 | 90 | .CodeMirror-ruler { 91 | border-left: 1px solid $color-shade-lightest; 92 | } 93 | 94 | .cm-s-default { 95 | .cm-keyword { 96 | color: map-get($code-colors, keyword); 97 | } 98 | 99 | .cm-atom { 100 | color: map-get($code-colors, atom); 101 | } 102 | 103 | .cm-number { 104 | color: map-get($code-colors, number); 105 | } 106 | 107 | .cm-def { 108 | color: map-get($code-colors, def); 109 | } 110 | 111 | .cm-variable-2 { 112 | color: map-get($code-colors, variable); 113 | } 114 | 115 | .cm-variable-3 { 116 | color: map-get($code-colors, variable-alt); 117 | } 118 | 119 | .cm-comment { 120 | color: map-get($code-colors, comment); 121 | } 122 | 123 | .cm-string { 124 | color: map-get($code-colors, string); 125 | } 126 | 127 | .cm-string-2 { 128 | color: map-get($code-colors, string-alt); 129 | } 130 | 131 | .cm-meta { 132 | color: map-get($code-colors, meta); 133 | } 134 | 135 | .cm-qualifier { 136 | color: map-get($code-colors, qualifier); 137 | } 138 | 139 | .cm-builtin { 140 | color: map-get($code-colors, builtin); 141 | } 142 | 143 | .cm-bracket { 144 | color: map-get($code-colors, bracket); 145 | } 146 | 147 | .cm-tag { 148 | color: map-get($code-colors, tag); 149 | } 150 | 151 | .cm-attribute { 152 | color: map-get($code-colors, attribute); 153 | } 154 | 155 | .cm-header { 156 | color: map-get($code-colors, header); 157 | } 158 | 159 | .cm-quote { 160 | color: map-get($code-colors, quote); 161 | } 162 | 163 | .cm-hr { 164 | color: map-get($code-colors, hr); 165 | } 166 | 167 | .cm-link { 168 | color: map-get($code-colors, link); 169 | } 170 | } 171 | 172 | .cm-negative { 173 | color: $color-red; 174 | } 175 | 176 | .cm-positive { 177 | color: $color-green; 178 | } 179 | 180 | .cm-invalidchar, 181 | .cm-s-default .cm-error { 182 | color: $color-red; 183 | } 184 | 185 | div.CodeMirror span { 186 | &.CodeMirror-matchingbracket { 187 | color: $color-green; 188 | } 189 | 190 | &.CodeMirror-nonmatchingbracket { 191 | color: $color-red; 192 | } 193 | } 194 | 195 | .CodeMirror-matchingtag { 196 | background: $color-shade-darkest; 197 | } 198 | 199 | .CodeMirror-activeline-background { 200 | background: $color-shade-lightest; 201 | } 202 | 203 | .CodeMirror-selected { 204 | background: $color-shade-lightest; 205 | } 206 | 207 | .CodeMirror-focused .CodeMirror-selected { 208 | background: $color-shade-lightest; 209 | } 210 | 211 | .cm-searching { 212 | background: $color-shade-lightest; 213 | } 214 | 215 | .sssh-keyword { 216 | color: map-get($code-colors, keyword); 217 | } 218 | 219 | .sssh-atom { 220 | color: map-get($code-colors, atom); 221 | } 222 | 223 | .sssh-number { 224 | color: map-get($code-colors, number); 225 | } 226 | 227 | .sssh-def { 228 | color: map-get($code-colors, def); 229 | } 230 | 231 | .sssh-variable { 232 | color: map-get($code-colors, variable); 233 | } 234 | 235 | .sssh-variable-2 { 236 | color: map-get($code-colors, variable-alt); 237 | } 238 | 239 | .sssh-variable-3 { 240 | color: adjust-hue(map-get($code-colors, variable-alt), 180); 241 | } 242 | 243 | .sssh-operator { 244 | color: $base-font-color; 245 | } 246 | 247 | .sssh-property { 248 | color: $base-font-color; 249 | } 250 | 251 | .sssh-comment { 252 | color: map-get($code-colors, comment); 253 | } 254 | 255 | .sssh-string { 256 | color: map-get($code-colors, string); 257 | } 258 | 259 | .sssh-string-2 { 260 | color: map-get($code-colors, string-alt); 261 | } 262 | 263 | .sssh-meta { 264 | color: map-get($code-colors, meta); 265 | } 266 | 267 | .sssh-error { 268 | color: $color-red; 269 | } 270 | 271 | .sssh-qualifier { 272 | color: map-get($code-colors, qualifier); 273 | } 274 | 275 | .sssh-builtin { 276 | color: map-get($code-colors, builtin); 277 | } 278 | 279 | .sssh-bracket { 280 | color: map-get($code-colors, bracket); 281 | } 282 | 283 | .sssh-tag { 284 | color: map-get($code-colors, tag); 285 | } 286 | 287 | .sssh-attribute { 288 | color: map-get($code-colors, attribute); 289 | } 290 | 291 | .sssh-header { 292 | color: map-get($code-colors, header); 293 | } 294 | 295 | .sssh-quote { 296 | color: map-get($code-colors, quote); 297 | } 298 | 299 | .sssh-hr { 300 | color: map-get($code-colors, hr); 301 | } 302 | 303 | .sssh-link { 304 | color: map-get($code-colors, link); 305 | } 306 | -------------------------------------------------------------------------------- /scss/modules/inputs/_messaging.scss: -------------------------------------------------------------------------------- 1 | #message_edit_form { 2 | .emo_menu { 3 | color: rgba($base-font-color, 0.3); 4 | 5 | &.active .ts_icon_happy_smile, 6 | &:hover .ts_icon_happy_smile { 7 | color: $color-shade-lightest; 8 | } 9 | } 10 | 11 | &.focus { 12 | .emo_menu { 13 | color: rgba($base-font-color, 0.6); 14 | } 15 | 16 | #primary_file_button:not(:hover) { 17 | border-color: $color-shade-dark; 18 | } 19 | } 20 | 21 | &.offline { 22 | #message-input, 23 | #primary_file_button { 24 | background-color: $color-shade-dark !important; 25 | } 26 | 27 | #primary_file_button { 28 | border-color: $color-shade-mid; 29 | color: $color-highlight; 30 | } 31 | } 32 | } 33 | 34 | #msg_form { 35 | &.focus { 36 | #msg_input, 37 | #primary_file_button:not(:hover):not(.active) { 38 | border-color: $color-shade-dark; 39 | } 40 | } 41 | 42 | #msg_input { 43 | background: padding-box $color-shade-light; 44 | border-color: $color-shade-mid; 45 | border-left: 0; 46 | color: $base-font-color; 47 | 48 | &.focus ~ .msg_mentions_button:not(.hover) { 49 | color: $base-font-color; 50 | } 51 | } 52 | 53 | .msg_mentions_button { 54 | color: $color-highlight; 55 | 56 | &:hover { 57 | color: $base-font-color; 58 | } 59 | } 60 | } 61 | 62 | #msg_input { 63 | @include placeholder; 64 | 65 | background: $color-shade-light; 66 | border-color: $color-shade-mid; 67 | color: $base-font-color; 68 | 69 | @if global-variable-exists(base-font-family) { 70 | font-family: $base-font-family; 71 | } 72 | 73 | &:focus, 74 | &.focus { 75 | border-color: $color-shade-dark; 76 | 77 | + #primary_file_button:not(:hover):not(.active) { 78 | border-color: $color-shade-dark; 79 | } 80 | } 81 | 82 | + #primary_file_button { 83 | &:not(:hover):not(.active) { 84 | border-color: $color-shade-mid; 85 | } 86 | 87 | &.focus-ring:not(:hover):not(.active) { 88 | border-color: $color-shade-mid; 89 | } 90 | } 91 | 92 | &.offline:not(.pretend-to-be-online) { 93 | background-color: $color-shade-dark !important; 94 | color: $color-highlight; 95 | } 96 | 97 | &.disabled, 98 | &.ql-disabled { 99 | background-color: $color-shade-dark; 100 | border-color: $color-shade-dark; 101 | color: $color-highlight; 102 | } 103 | } 104 | 105 | #msg_input_message { 106 | background-color: $color-shade-dark; 107 | color: $base-font-color; 108 | } 109 | 110 | #primary_file_button { 111 | background: padding-box $color-shade-light; 112 | border-color: $color-shade-mid; 113 | color: $color-highlight; 114 | 115 | &.active, 116 | &.focus-ring, 117 | &:focus, 118 | &:hover { 119 | background: $color-shade-mid; 120 | border-color: $color-shade-dark; 121 | color: $base-font-color; 122 | } 123 | } 124 | 125 | #footer { 126 | background: $color-base; 127 | box-shadow: inset 1px 0 0 0 $color-base; 128 | 129 | &.disabled #message-input, 130 | &.disabled #msg_input { 131 | background: padding-box $color-shade-dark !important; 132 | border-color: $color-shade-dark !important; 133 | } 134 | 135 | &.footer_msg_input { 136 | @extend #footer; 137 | } 138 | } 139 | 140 | #footer_archives_preview { 141 | background-color: $color-base; 142 | border-top: 1px solid $color-shade-dark; 143 | 144 | .c-archive_footer { 145 | &__metadata { 146 | color: $base-link-color; 147 | } 148 | 149 | &__title { 150 | color: $base-link-color-active; 151 | } 152 | } 153 | } 154 | 155 | #footer_archives_table { 156 | color: $color-highlight; 157 | } 158 | 159 | #typing_text { 160 | color: $color-highlight; 161 | filter: none; 162 | } 163 | 164 | #notification_bar.wide #typing_text.overflow_ellipsis { 165 | -webkit-filter: none; 166 | filter: none; 167 | } 168 | 169 | #special_formatting_text { 170 | color: $color-highlight; 171 | } 172 | 173 | #message_edit_container, 174 | #threads_msgs, 175 | #reply_container.upload_in_threads { 176 | .inline_message_input_container, 177 | .inline_message_input_container.with_file_upload { 178 | background: $color-shade-light; 179 | border-color: $color-shade-dark; 180 | color: $base-font-color; 181 | } 182 | } 183 | 184 | .inline_message_input_container .ql-container { 185 | border-color: $color-shade-light; 186 | color: $base-font-color; 187 | &.focus, 188 | &:active, 189 | &:hover { 190 | border-color: $color-shade-lightest; 191 | } 192 | } 193 | 194 | .c-message, 195 | .p-channel_details_section { 196 | &--editing { 197 | background: $color-shade-dark; 198 | border-color: $color-shade-dark; 199 | color: $base-font-color; 200 | } 201 | 202 | &__editor { 203 | &__input, 204 | &__input--legacy { 205 | background: $color-shade-light; 206 | border-color: $color-shade-dark; 207 | color: $base-font-color; 208 | 209 | &.focus { 210 | border-color: $color-shade-dark; 211 | box-shadow: 0 0 7px $color-shadow-light; 212 | } 213 | } 214 | 215 | &__warning { 216 | color: $color-red; 217 | } 218 | } 219 | 220 | .c-button { 221 | border-color: $color-shade-mid; 222 | 223 | &--outline { 224 | background-color: $color-shade-dark; 225 | color: $base-link-color; 226 | 227 | &:hover { 228 | color: $base-link-color-active; 229 | } 230 | } 231 | 232 | &--primary { 233 | background-color: $color-shade-light; 234 | color: $base-font-color; 235 | } 236 | } 237 | } 238 | 239 | #message_edit_container .message_input { 240 | background: $color-shade-light; 241 | border-color: $color-shade-dark; 242 | color: $base-font-color; 243 | 244 | &.focus { 245 | border-color: $color-shade-dark; 246 | box-shadow: 0 0 7px $color-shadow-light; 247 | } 248 | } 249 | 250 | .ql-editor { 251 | &::-webkit-scrollbar-thumb { 252 | background-color: rgba($color-shade-light, 0.5); 253 | color: $color-base; 254 | 255 | &:hover { 256 | background-color: rgba($color-shade-light, 0.8); 257 | } 258 | } 259 | } 260 | 261 | .ql-placeholder, 262 | .texty_legacy .ql-placeholder { 263 | color: $base-font-color; 264 | filter: none; 265 | } 266 | 267 | .ql-container.texty_single_line_input { 268 | background: $color-shade-light; 269 | border: 1px solid $color-shade-dark; 270 | color: $base-font-color; 271 | 272 | &.focus, 273 | &:hover { 274 | border-color: $color-shade-dark; 275 | box-shadow: 0 0 7px $color-shadow-light; 276 | } 277 | } 278 | -------------------------------------------------------------------------------- /COPYING.txt: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /scss/modules/inputs/_base.scss: -------------------------------------------------------------------------------- 1 | input { 2 | &[type=text], 3 | &[type=password], 4 | &[type=datetime], 5 | &[type=datetime-local], 6 | &[type=date], 7 | &[type=month], 8 | &[type=time], 9 | &[type=week], 10 | &[type=number], 11 | &[type=email], 12 | &[type='url'], // libsass#2429 13 | &[type=tel], 14 | &[type=color], 15 | &[type=search] { 16 | background-color: $color-shade-light; 17 | border-color: $color-shade-darkest; 18 | color: $base-font-color; 19 | 20 | &:focus { 21 | border-color: rgba($color-shade-dark, 0.8); 22 | box-shadow: inset 0 1px 1px rgba($black, 0.075), 0 0 8px rgba($color-shade-lightest, 0.6); 23 | } 24 | } 25 | 26 | &[type=file]:focus { 27 | outline: $base-font-color dotted thin; 28 | } 29 | 30 | &[type=radio]:focus, 31 | &[type=checkbox]:focus { 32 | outline: $base-font-color dotted thin; 33 | } 34 | } 35 | 36 | select { 37 | background: $color-shade-light; 38 | } 39 | 40 | select, 41 | textarea { 42 | border: 1px solid $color-shade-darkest; 43 | color: $base-font-color; 44 | 45 | &:active, 46 | &:focus { 47 | border-color: $color-shade-dark; 48 | box-shadow: 0 0 7px rgba($color-shade-lightest, 0.15); 49 | } 50 | } 51 | 52 | input:disabled, 53 | input:disabled:active, 54 | select:disabled, 55 | textarea:disabled { 56 | border-color: $color-shade-mid !important; 57 | } 58 | 59 | .no_touch { 60 | input:hover, 61 | select:hover, 62 | textarea:hover { 63 | border-color: $color-shade-dark; 64 | } 65 | 66 | label.select { 67 | &:hover select { 68 | border-color: $color-shade-dark; 69 | } 70 | 71 | &:not(.disabled):hover::after { 72 | color: $color-shade-dark; 73 | } 74 | } 75 | } 76 | 77 | label.disabled { 78 | color: $base-font-color; 79 | } 80 | 81 | legend { 82 | border-bottom: 1px solid $color-shade-lightest; 83 | 84 | small { 85 | color: $color-highlight; 86 | } 87 | } 88 | 89 | .uneditable-input, 90 | .uneditable-textarea { 91 | background-color: $color-shade-mid; 92 | border: 1px solid $color-shade-darkest; 93 | color: $base-font-color; 94 | 95 | &:focus { 96 | border-color: rgba($color-shade-lightest, 0.8); 97 | box-shadow: inset 0 1px 1px rgba($black, 0.075), 0 0 8px rgba($color-shade-lightest, 0.6); 98 | } 99 | } 100 | 101 | textarea { 102 | background-color: $color-shade-light; 103 | border: 1px solid $color-shade-darkest; 104 | color: $base-font-color; 105 | } 106 | 107 | textarea:focus { 108 | border-color: rgba($color-shade-lightest, 0.8); 109 | box-shadow: inset 0 1px 1px rgba($black, 0.075), 0 0 8px rgba($color-shade-lightest, 0.6); 110 | } 111 | 112 | @include placeholder; 113 | 114 | input, 115 | textarea { 116 | @include placeholder; 117 | 118 | &[disabled], 119 | &[readonly] { 120 | background-color: $color-shade-light !important; 121 | } 122 | } 123 | 124 | .form-actions { 125 | background-color: $color-shade-mid; 126 | border-top: 1px solid $color-shade-dark; 127 | } 128 | 129 | .help-block, 130 | .help-inline { 131 | color: $color-highlight; 132 | } 133 | 134 | .input-append .add-on, 135 | .input-prepend .add-on { 136 | background-color: $color-shade-lightest; 137 | border: 1px solid $color-shade-light; 138 | text-shadow: 0 1px 0 $color-shadow-light; 139 | } 140 | 141 | .btn { 142 | background-color: $color-shade-light; 143 | color: $base-font-color !important; 144 | text-shadow: 0 1px 1px $color-shadow-light; 145 | 146 | &.hover, 147 | &:focus, 148 | &:hover, 149 | &.active, 150 | &:active { 151 | background-color: $color-shade-light; 152 | color: $base-font-color; 153 | } 154 | 155 | &.btn_border { 156 | border: 2px solid $color-shade-mid; 157 | } 158 | 159 | &.disabled, 160 | &:disabled { 161 | background-color: $color-shade-darkest !important; 162 | 163 | &:active, 164 | &:hover { 165 | background-color: $color-shade-darkest !important; 166 | } 167 | } 168 | 169 | &.btn_outline { 170 | &.btn_danger, 171 | &.btn_warning { 172 | background-color: $color-red !important; 173 | color: $base-font-color !important; 174 | 175 | &:focus, 176 | &:hover { 177 | background-color: $color-base !important; 178 | border-color: $color-red !important; 179 | color: $color-red !important; 180 | } 181 | } 182 | 183 | &.disabled { 184 | background: $color-shade-mid !important; 185 | color: $base-link-color !important; 186 | 187 | &:hover { 188 | background: $color-shade-mid !important; 189 | color: $base-link-color !important; 190 | } 191 | } 192 | } 193 | 194 | &.btn_attachment { 195 | background-color: $color-shade-darkest; 196 | border-color: $color-shade-light; 197 | color: $base-link-color; 198 | 199 | &:hover, 200 | &:focus { 201 | background-color: $color-shade-dark; 202 | border-color: $color-shade-lightest; 203 | } 204 | 205 | &.btn_danger { 206 | border-color: $color-red; 207 | 208 | &:hover, 209 | &:focus { 210 | border-color: lighten($color-red, 10%); 211 | } 212 | } 213 | 214 | &.btn_primary { 215 | border-color: $color-shade-lightest; 216 | 217 | &:hover, 218 | &:focus { 219 | border-color: lighten($color-shade-lightest, 10%); 220 | } 221 | } 222 | } 223 | } 224 | 225 | .btn_basic { 226 | &:focus, 227 | &:hover { 228 | color: $base-font-color; 229 | } 230 | } 231 | 232 | .btn_outline { 233 | background: $color-base; 234 | color: $base-link-color !important; 235 | 236 | &::after { 237 | border: 1px solid $color-shade-mid; 238 | } 239 | 240 | &.btn_transparent { 241 | color: rgba($color-shade-light, 0.9) !important; 242 | 243 | &::after { 244 | border: 1px solid rgba($color-base, 0.5); 245 | } 246 | 247 | &.active, 248 | &.hover, 249 | &:active, 250 | &:focus, 251 | &:hover { 252 | background-color: rgba($color-shade-light, 0.9) !important; 253 | color: $base-link-color-active !important; 254 | } 255 | 256 | &.active, 257 | &:active { 258 | background-color: rgba($color-shade-light, 0.8) !important; 259 | } 260 | } 261 | 262 | &.hover, 263 | &:focus, 264 | &:hover { 265 | background: $color-base; 266 | color: $base-link-color-active !important; 267 | } 268 | 269 | &:active { 270 | color: $base-link-color-active; 271 | } 272 | 273 | &.active { 274 | color: $base-link-color-active !important; 275 | } 276 | } 277 | 278 | .btn_link { 279 | color: $base-link-color; 280 | 281 | &:hover, 282 | &:focus { 283 | color: $base-link-color-active; 284 | } 285 | } 286 | 287 | .btn-group { 288 | &.open { 289 | .btn.dropdown-toggle { 290 | background-color: $color-shade-light; 291 | } 292 | 293 | .btn-primary.dropdown-toggle { 294 | background-color: $color-shade-mid; 295 | } 296 | } 297 | 298 | > { 299 | .btn + .dropdown-toggle { 300 | box-shadow: inset 1px 0 0 rgba($black, 0.125), inset 0 1px 0 rgba($black, 0.2), 0 1px 2px rgba($white, 0.05); 301 | } 302 | } 303 | } 304 | 305 | .btn_info, 306 | .btn.btn_success { 307 | background-color: $color-base !important; 308 | } 309 | 310 | .btn_warning, 311 | .btn_danger { 312 | background-color: $color-red !important; 313 | } 314 | 315 | .btn-danger .caret, 316 | .btn-info .caret, 317 | .btn-inverse .caret, 318 | .btn-primary .caret, 319 | .btn-success .caret, 320 | .btn-warning .caret { 321 | border-bottom-color: $base-font-color; 322 | border-top-color: $base-font-color; 323 | } 324 | 325 | .input_note { 326 | color: $base-font-color; 327 | } 328 | 329 | .c-enhanced_text_input { 330 | background-color: $color-shade-light; 331 | border-color: $color-shade-dark; 332 | color: $color-highlight; 333 | 334 | &:hover, 335 | &.c-enhanced_text_input--active { 336 | border-color: $color-shade-light; 337 | } 338 | } 339 | 340 | .c-filter_input { 341 | background: $color-shade-light; 342 | 343 | &__input[type=text][placeholder] { 344 | color: $base-font-color; 345 | } 346 | } 347 | 348 | .p-share_dialog_message_input { 349 | color: $base-font-color; 350 | } 351 | 352 | .c-texty_input { 353 | .ql-placeholder { 354 | color: $base-font-color; 355 | } 356 | } 357 | 358 | .p-workspace { 359 | &__input { 360 | .p-message_input_field { 361 | background: $color-base; 362 | border-color: $color-shade-light; 363 | } 364 | } 365 | 366 | &__primary_view_footer { 367 | border-color: $color-shade-dark; 368 | } 369 | 370 | &__secondary_view { 371 | border-color: $color-shade-dark; 372 | } 373 | } 374 | -------------------------------------------------------------------------------- /scss/modules/flexpane/_search.scss: -------------------------------------------------------------------------------- 1 | .search_message_result { 2 | background: $color-base !important; 3 | border-color: $color-shade-dark !important; 4 | color: $base-font-color !important; 5 | 6 | .search_message_result_meta { 7 | color: $color-highlight; 8 | 9 | a { 10 | color: $base-link-color; 11 | } 12 | 13 | .date_links a { 14 | color: $base-link-color; 15 | } 16 | } 17 | } 18 | 19 | .search_message_result_text .result_msg_format a { 20 | color: $base-link-color; 21 | } 22 | 23 | span.match { 24 | background: rgba($color-red, 0.25); 25 | } 26 | 27 | #search_filters { 28 | .tab { 29 | background: $color-base; 30 | color: $base-font-color; 31 | 32 | &:hover { 33 | border-bottom: 4px solid $color-shade-dark; 34 | } 35 | } 36 | 37 | &.files #filter_files, 38 | &.messages #filter_messages { 39 | border-bottom: 4px solid $color-shade-dark; 40 | color: $base-font-color; 41 | } 42 | } 43 | 44 | #search_file_list_toggle_users.active:hover { 45 | border: 2px solid $base-link-color-active; 46 | color: $base-link-color-active !important; 47 | } 48 | 49 | .no_results { 50 | color: $base-font-color; 51 | } 52 | 53 | #search_results_team { 54 | .team_results_heading { 55 | color: $base-font-color; 56 | } 57 | 58 | .team_result { 59 | background-color: $color-shade-light; 60 | border-color: $color-shade-lightest; 61 | color: $base-font-color; 62 | 63 | a { 64 | color: $base-link-color; 65 | } 66 | 67 | &:hover a { 68 | color: $base-link-color-active; 69 | } 70 | 71 | a:hover { 72 | color: $base-link-color-active; 73 | } 74 | } 75 | 76 | .member_name { 77 | color: $base-font-color !important; 78 | } 79 | } 80 | 81 | .suggestion { 82 | color: $base-font-color; 83 | 84 | &.active, 85 | &:hover { 86 | background: $color-shade-light; 87 | } 88 | } 89 | 90 | #paging_in_options .search_paging { 91 | color: $color-highlight; 92 | } 93 | 94 | #search_results_items .search_paging { 95 | color: $base-font-color; 96 | } 97 | 98 | .search_paging { 99 | i.disabled { 100 | color: $color-highlight; 101 | } 102 | 103 | a { 104 | color: $base-link-color; 105 | 106 | &:hover { 107 | color: $base-link-color-active; 108 | } 109 | } 110 | } 111 | 112 | .search_sort_prefix { 113 | color: $base-font-color; 114 | } 115 | 116 | .search_segmented_control { 117 | border-color: $color-shade-dark; 118 | color: $base-link-color !important; 119 | 120 | &:hover { 121 | color: $base-link-color-active !important; 122 | } 123 | 124 | &.active { 125 | background: $color-shade-darkest; 126 | color: $base-link-color-active !important; 127 | } 128 | } 129 | 130 | .search_result_with_extract { 131 | background: $color-shade-dark; 132 | border-color: $color-shade-light; 133 | box-shadow: 0 1px 10px $color-shadow-light; 134 | 135 | &:hover { 136 | border-color: $color-shade-lightest; 137 | } 138 | } 139 | 140 | .search_result_for_context::after { 141 | background: rgba($color-base, 0.1); 142 | } 143 | 144 | .extract_expand_text, 145 | .extract_expand_icons { 146 | color: $base-link-color; 147 | } 148 | 149 | .search_result_with_extract:hover { 150 | .extract_expand_text, 151 | .extract_expand_icons { 152 | color: $base-link-color-active; 153 | } 154 | } 155 | 156 | .search_module_header { 157 | color: $base-font-color; 158 | } 159 | 160 | .search_module_footer { 161 | background-color: $color-shade-dark; 162 | border-bottom-color: $color-shade-light; 163 | border-left-color: $color-shade-light; 164 | border-right-color: $color-shade-light; 165 | 166 | p { 167 | color: $base-font-color; 168 | } 169 | 170 | #see_more { 171 | color: $base-font-color; 172 | 173 | a { 174 | color: $base-font-color; 175 | } 176 | } 177 | 178 | .top_results_feedback a { 179 | color: $base-font-color; 180 | } 181 | 182 | ts-icon { 183 | color: $base-font-color; 184 | } 185 | } 186 | 187 | .top_results_search_message_result { 188 | background-color: $color-shade-dark; 189 | border-bottom-color: $color-shade-light; 190 | border-left-color: $color-shade-light; 191 | border-right-color: $color-shade-light; 192 | 193 | &.duplicate { 194 | background-color: $color-shade-dark; 195 | } 196 | 197 | .timestamp { 198 | color: $color-highlight; 199 | } 200 | 201 | .channel { 202 | color: $color-highlight; 203 | 204 | a { 205 | color: $color-highlight; 206 | } 207 | } 208 | 209 | .jump { 210 | color: $base-font-color; 211 | } 212 | 213 | &:hover { 214 | border-color: rgba($color-shade-lightest, 0.6) !important; 215 | border-top: 2px solid $color-shade-light !important; 216 | } 217 | 218 | &:first-child { 219 | border-top: 2px solid $color-shade-light; 220 | } 221 | } 222 | 223 | .sli_expert_search { 224 | background-color: $color-base; 225 | color: $base-font-color; 226 | } 227 | 228 | .sli_expert_search__result { 229 | border-color: $color-shade-light; 230 | 231 | .app_preview_link, 232 | .member_preview_link { 233 | color: $base-font-color !important; 234 | } 235 | } 236 | 237 | .sli_expert_search__fg_face { 238 | &::before { 239 | background-color: $color-base; 240 | } 241 | } 242 | 243 | .sli_expert_search_cta { 244 | border-color: $color-shade-light; 245 | 246 | &:hover { 247 | border-color: $color-shade-lightest; 248 | } 249 | } 250 | 251 | .sli_expert_search_cta__text { 252 | color: $base-font-color; 253 | 254 | &:hover { 255 | color: $base-font-color; 256 | } 257 | } 258 | 259 | .sli_expert_search__plus_sign_overlay { 260 | background-color: $color-shade-dark; 261 | color: $color-highlight; 262 | } 263 | 264 | .sli_expert_search__arrow { 265 | color: $color-highlight; 266 | } 267 | 268 | .sli_expert_search_cta:hover .sli_expert_search__arrow, 269 | .sli_expert_search_header:hover .sli_expert_search__arrow { 270 | color: $color-highlight; 271 | } 272 | 273 | .sli_expert_search__partial_terms { 274 | color: $color-highlight; 275 | } 276 | 277 | .feature_sli_file_search { 278 | #search_filters { 279 | &.all #filter_all { 280 | border-bottom-color: $color-shade-dark; 281 | color: $base-font-color; 282 | } 283 | } 284 | 285 | #search_results { 286 | .file_list_item { 287 | background-color: $color-base; 288 | border-color: $color-shade-light; 289 | } 290 | 291 | &.all, 292 | &.messages { 293 | background-color: $color-base; 294 | 295 | .search_message_result { 296 | background-color: $color-base; 297 | border-color: $color-shade-light; 298 | } 299 | 300 | .search_result_with_extract { 301 | &.first_extract_message_in_group, 302 | &:first-child { 303 | border-top-color: $color-shade-light; 304 | 305 | &:hover { 306 | border-top-color: $color-shade-light; 307 | } 308 | } 309 | 310 | &.last_extract_message_in_group { 311 | border-bottom-color: $color-shade-light; 312 | 313 | &:hover { 314 | border-bottom-color: $color-shade-light; 315 | } 316 | } 317 | } 318 | 319 | .search_message_result_meta { 320 | color: $color-highlight; 321 | } 322 | 323 | .channel_link { 324 | color: $color-highlight; 325 | } 326 | 327 | .sli_expert_search .channel_link { 328 | color: $base-font-color; 329 | } 330 | 331 | .new_jump_link { 332 | color: $base-font-color; 333 | } 334 | } 335 | 336 | &.all { 337 | background-color: $color-base; 338 | 339 | .top_search_results { 340 | .search_message_result { 341 | background-color: $color-base; 342 | border-color: $color-shade-light; 343 | } 344 | 345 | .search_message_result__channel a { 346 | color: $color-highlight; 347 | } 348 | } 349 | 350 | .sli_expert_search_cta { 351 | border-color: $color-shade-light; 352 | 353 | &:hover { 354 | border-color: $color-shade-lightest; 355 | } 356 | } 357 | 358 | .sli_expert_search__result { 359 | border-color: $color-shade-lightest; 360 | } 361 | 362 | .team_result { 363 | background-color: $color-base; 364 | border-color: $color-shade-light; 365 | } 366 | } 367 | 368 | &.files { 369 | background-color: $color-base; 370 | 371 | #search_file_list_clear_filter, 372 | #search_file_list_heading { 373 | color: $base-font-color; 374 | } 375 | } 376 | } 377 | 378 | #search_results_loading { 379 | background-color: $color-base; 380 | } 381 | 382 | #search_results_container { 383 | #search_options { 384 | background-color: $color-base; 385 | } 386 | 387 | .heading { 388 | background-color: $color-base; 389 | } 390 | } 391 | } 392 | 393 | #client-ui { 394 | .file_list_item.file_list_item--redesign { 395 | border-color: $color-shade-light; 396 | 397 | .file_list_item__channel { 398 | color: $color-highlight; 399 | } 400 | 401 | .message_sender { 402 | color: $color-highlight; 403 | } 404 | } 405 | } 406 | --------------------------------------------------------------------------------