From f417d634e7575797948c40a89c77aea29e1857ff Mon Sep 17 00:00:00 2001 From: Rintan <12230083+Rintan@users.noreply.github.com> Date: Sun, 27 Sep 2020 19:58:24 +0900 Subject: [PATCH] =?UTF-8?q?Mastodon=20Material=E6=96=B0=E3=83=90=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=83=A7=E3=83=B3=E3=81=AE=E3=83=86=E3=82=B9=E3=83=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fonts/MaterialIcons-Regular.ttf | Bin 0 -> 230384 bytes .../fonts/MaterialIcons-Regular.woff2 | Bin 44300 -> 0 bytes .../styles/mastodon-material-dark.scss | 7 + .../mastodon-material-dark/color/black.scss | 63 +++---- .../color/mastodon-dark.scss | 67 ++++---- .../color/mastodon-light.scss | 63 +++---- .../color/plus-classic.scss | 67 ++++---- .../mastodon-material-dark/color/v1-dark.scss | 69 ++++---- .../color/v1-light.scss | 67 ++++---- .../mastodon-material-dark/color/v2-dark.scss | 63 +++---- .../color/v2-light.scss | 73 ++++---- .../mastodon-material-dark/icon_config.scss | 20 ++- .../layout/material-v1.scss | 12 +- .../layout/material-v2.scss | 23 ++- .../mastodon-material-dark/plugins/cards.scss | 6 +- .../mastodon-material-dark/plugins/plus.scss | 5 +- .../mastodon-material-dark/theme/_mixins.scss | 161 ++++++++++++++++++ .../mastodon-material-dark/theme/account.scss | 42 ++++- .../theme/base_config.scss | 22 ++- .../mastodon-material-dark/theme/basics.scss | 8 +- .../mastodon-material-dark/theme/button.scss | 37 +++- .../mastodon-material-dark/theme/columns.scss | 75 ++++---- .../theme/components.scss | 159 ++++++++++++----- .../theme/emoji-picker.scss | 32 ++-- .../mastodon-material-dark/theme/icons.scss | 18 -- .../theme/material-icons.scss | 62 ++++++- .../mastodon-material-dark/theme/media.scss | 18 +- .../mastodon-material-dark/theme/modal.scss | 14 +- .../theme/responsive.scss | 8 +- .../theme/statuses.scss | 23 ++- .../styles/mastodon-material-light.scss | 7 + .../mastodon-material-light/color/black.scss | 63 +++---- .../color/mastodon-dark.scss | 67 ++++---- .../color/mastodon-light.scss | 63 +++---- .../color/plus-classic.scss | 67 ++++---- .../color/v1-dark.scss | 69 ++++---- .../color/v1-light.scss | 67 ++++---- .../color/v2-dark.scss | 63 +++---- .../color/v2-light.scss | 73 ++++---- .../mastodon-material-light/icon_config.scss | 20 ++- .../layout/material-v1.scss | 12 +- .../layout/material-v2.scss | 23 ++- .../plugins/cards.scss | 6 +- .../mastodon-material-light/plugins/plus.scss | 5 +- .../theme/_mixins.scss | 161 ++++++++++++++++++ .../theme/account.scss | 42 ++++- .../theme/base_config.scss | 22 ++- .../mastodon-material-light/theme/basics.scss | 8 +- .../mastodon-material-light/theme/button.scss | 37 +++- .../theme/columns.scss | 75 ++++---- .../theme/components.scss | 159 ++++++++++++----- .../theme/emoji-picker.scss | 32 ++-- .../mastodon-material-light/theme/icons.scss | 18 -- .../theme/material-icons.scss | 62 ++++++- .../mastodon-material-light/theme/media.scss | 18 +- .../mastodon-material-light/theme/modal.scss | 14 +- .../theme/responsive.scss | 8 +- .../theme/statuses.scss | 23 ++- app/javascript/styles/material-black.scss | 7 + .../styles/material-black/color/black.scss | 63 +++---- .../material-black/color/mastodon-dark.scss | 67 ++++---- .../material-black/color/mastodon-light.scss | 63 +++---- .../material-black/color/plus-classic.scss | 67 ++++---- .../styles/material-black/color/v1-dark.scss | 69 ++++---- .../styles/material-black/color/v1-light.scss | 67 ++++---- .../styles/material-black/color/v2-dark.scss | 63 +++---- .../styles/material-black/color/v2-light.scss | 73 ++++---- .../styles/material-black/icon_config.scss | 20 ++- .../material-black/layout/material-v1.scss | 12 +- .../material-black/layout/material-v2.scss | 23 ++- .../styles/material-black/plugins/cards.scss | 6 +- .../styles/material-black/plugins/plus.scss | 5 +- .../styles/material-black/theme/_mixins.scss | 161 ++++++++++++++++++ .../styles/material-black/theme/account.scss | 42 ++++- .../material-black/theme/base_config.scss | 22 ++- .../styles/material-black/theme/basics.scss | 8 +- .../styles/material-black/theme/button.scss | 37 +++- .../styles/material-black/theme/columns.scss | 75 ++++---- .../material-black/theme/components.scss | 159 ++++++++++++----- .../material-black/theme/emoji-picker.scss | 32 ++-- .../styles/material-black/theme/icons.scss | 18 -- .../material-black/theme/material-icons.scss | 62 ++++++- .../styles/material-black/theme/media.scss | 18 +- .../styles/material-black/theme/modal.scss | 14 +- .../material-black/theme/responsive.scss | 8 +- .../styles/material-black/theme/statuses.scss | 23 ++- app/javascript/styles/material-dark.scss | 7 + .../styles/material-dark/color/black.scss | 63 +++---- .../material-dark/color/mastodon-dark.scss | 67 ++++---- .../material-dark/color/mastodon-light.scss | 63 +++---- .../material-dark/color/plus-classic.scss | 67 ++++---- .../styles/material-dark/color/v1-dark.scss | 69 ++++---- .../styles/material-dark/color/v1-light.scss | 67 ++++---- .../styles/material-dark/color/v2-dark.scss | 63 +++---- .../styles/material-dark/color/v2-light.scss | 73 ++++---- .../styles/material-dark/icon_config.scss | 20 ++- .../material-dark/layout/material-v1.scss | 12 +- .../material-dark/layout/material-v2.scss | 23 ++- .../styles/material-dark/plugins/cards.scss | 6 +- .../styles/material-dark/plugins/plus.scss | 5 +- .../styles/material-dark/theme/_mixins.scss | 161 ++++++++++++++++++ .../styles/material-dark/theme/account.scss | 42 ++++- .../material-dark/theme/base_config.scss | 22 ++- .../styles/material-dark/theme/basics.scss | 8 +- .../styles/material-dark/theme/button.scss | 37 +++- .../styles/material-dark/theme/columns.scss | 75 ++++---- .../material-dark/theme/components.scss | 159 ++++++++++++----- .../material-dark/theme/emoji-picker.scss | 32 ++-- .../styles/material-dark/theme/icons.scss | 18 -- .../material-dark/theme/material-icons.scss | 62 ++++++- .../styles/material-dark/theme/media.scss | 18 +- .../styles/material-dark/theme/modal.scss | 14 +- .../material-dark/theme/responsive.scss | 8 +- .../styles/material-dark/theme/statuses.scss | 23 ++- app/javascript/styles/material-light.scss | 7 + .../styles/material-light/color/black.scss | 63 +++---- .../material-light/color/mastodon-dark.scss | 67 ++++---- .../material-light/color/mastodon-light.scss | 63 +++---- .../material-light/color/plus-classic.scss | 67 ++++---- .../styles/material-light/color/v1-dark.scss | 69 ++++---- .../styles/material-light/color/v1-light.scss | 67 ++++---- .../styles/material-light/color/v2-dark.scss | 63 +++---- .../styles/material-light/color/v2-light.scss | 73 ++++---- .../styles/material-light/icon_config.scss | 20 ++- .../material-light/layout/material-v1.scss | 12 +- .../material-light/layout/material-v2.scss | 23 ++- .../styles/material-light/plugins/cards.scss | 6 +- .../styles/material-light/plugins/plus.scss | 5 +- .../styles/material-light/theme/_mixins.scss | 161 ++++++++++++++++++ .../styles/material-light/theme/account.scss | 42 ++++- .../material-light/theme/base_config.scss | 22 ++- .../styles/material-light/theme/basics.scss | 8 +- .../styles/material-light/theme/button.scss | 37 +++- .../styles/material-light/theme/columns.scss | 75 ++++---- .../material-light/theme/components.scss | 159 ++++++++++++----- .../material-light/theme/emoji-picker.scss | 32 ++-- .../styles/material-light/theme/icons.scss | 18 -- .../material-light/theme/material-icons.scss | 62 ++++++- .../styles/material-light/theme/media.scss | 18 +- .../styles/material-light/theme/modal.scss | 14 +- .../material-light/theme/responsive.scss | 8 +- .../styles/material-light/theme/statuses.scss | 23 ++- app/javascript/styles/plus.scss | 7 + app/javascript/styles/plus/color/black.scss | 63 +++---- .../styles/plus/color/mastodon-dark.scss | 67 ++++---- .../styles/plus/color/mastodon-light.scss | 63 +++---- .../styles/plus/color/plus-classic.scss | 67 ++++---- app/javascript/styles/plus/color/v1-dark.scss | 69 ++++---- .../styles/plus/color/v1-light.scss | 67 ++++---- app/javascript/styles/plus/color/v2-dark.scss | 63 +++---- .../styles/plus/color/v2-light.scss | 73 ++++---- app/javascript/styles/plus/icon_config.scss | 20 ++- .../styles/plus/layout/material-v1.scss | 12 +- .../styles/plus/layout/material-v2.scss | 23 ++- app/javascript/styles/plus/loader.scss | 6 +- app/javascript/styles/plus/plugins/cards.scss | 6 +- app/javascript/styles/plus/plugins/plus.scss | 5 +- app/javascript/styles/plus/theme/_mixins.scss | 161 ++++++++++++++++++ app/javascript/styles/plus/theme/account.scss | 42 ++++- .../styles/plus/theme/base_config.scss | 22 ++- app/javascript/styles/plus/theme/basics.scss | 8 +- app/javascript/styles/plus/theme/button.scss | 37 +++- app/javascript/styles/plus/theme/columns.scss | 75 ++++---- .../styles/plus/theme/components.scss | 159 ++++++++++++----- .../styles/plus/theme/emoji-picker.scss | 32 ++-- app/javascript/styles/plus/theme/icons.scss | 18 -- .../styles/plus/theme/material-icons.scss | 62 ++++++- app/javascript/styles/plus/theme/media.scss | 18 +- app/javascript/styles/plus/theme/modal.scss | 14 +- .../styles/plus/theme/responsive.scss | 8 +- .../styles/plus/theme/statuses.scss | 23 ++- 171 files changed, 5001 insertions(+), 2709 deletions(-) create mode 100644 app/javascript/fonts/MaterialIcons-Regular.ttf delete mode 100644 app/javascript/fonts/MaterialIcons-Regular.woff2 diff --git a/app/javascript/fonts/MaterialIcons-Regular.ttf b/app/javascript/fonts/MaterialIcons-Regular.ttf new file mode 100644 index 0000000000000000000000000000000000000000..e50801b3b620af91f824c7655df7d064db05b764 GIT binary patch literal 230384 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%0D=4-1II4$y1WQr6D85bgn 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�r00I3o-*5nql4iHu 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

1=DUOAl49ohB{*R4L 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 literal 0 HcmV?d00001 diff --git a/app/javascript/fonts/MaterialIcons-Regular.woff2 b/app/javascript/fonts/MaterialIcons-Regular.woff2 deleted file mode 100644 index 9fa211252080046a23b2449dbdced6abc2b0bb34..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 44300 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 QW8}wPUeo^@jR61v08@RD2LJ#7 diff --git a/app/javascript/styles/mastodon-material-dark.scss b/app/javascript/styles/mastodon-material-dark.scss index 889983ed4..a4645d3f8 100644 --- a/app/javascript/styles/mastodon-material-dark.scss +++ b/app/javascript/styles/mastodon-material-dark.scss @@ -1,2 +1,9 @@ +/* +* Mastodon Material 0.2.0 +* Author: Rintan, Genbu Project +* Copyright (C) 2020 Rintan, Genbu Project +*/ + + @import 'application'; @import 'mastodon-material-dark/loader'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/color/black.scss b/app/javascript/styles/mastodon-material-dark/color/black.scss index b299981b0..6aa7ebfdb 100644 --- a/app/javascript/styles/mastodon-material-dark/color/black.scss +++ b/app/javascript/styles/mastodon-material-dark/color/black.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #000000; -$menu-background-color: #121212; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #121212; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #000000; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #000000; +$menu-bg-color: #121212; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #121212; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #000000; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #1e1e1e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #1e1e1e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #121212; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #121212; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss index c3c168316..4ed9a7e07 100644 --- a/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss +++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #191b22; -$menu-background-color: #d9e1e8; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #313543; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #282c37; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #191b22; +$menu-bg-color: #d9e1e8; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #313543; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #282c37; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #42485a; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #9baec8; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: lighten($background-color, 14%); -$icon-background-active-color: lighten($background-color, 18%); +$icon-bg-hover-color: lighten($bg-color, 14%); +$icon-bg-active-color: lighten($bg-color, 18%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #fff; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,9 +99,9 @@ $border-color: #393f4f; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 16%); -$scroll-bar-thumb-hover-color: lighten($background-color, 26%); -$scroll-bar-thumb-active-color: lighten($background-color, 32%); +$scroll-bar-thumb-color: lighten($bg-color, 16%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 26%); +$scroll-bar-thumb-active-color: lighten($bg-color, 32%); // App bar color $top-bar-color: #313543; @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: #d9e1e8; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #1f232b; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #1f232b; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss index 54d894fec..d4d84a626 100644 --- a/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss +++ b/app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #eff3f5; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($background-color, 6%); -$menu-background-active-color: darken($background-color, 10%); -$menu-background-active-hover-color: darken($background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #eff3f5; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($bg-color, 6%); +$menu-bg-active-color: darken($bg-color, 10%); +$menu-bg-active-hover-color: darken($bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -55,8 +56,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #282c37; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: darken($background-color, 4%); -$icon-background-active-color: darken($background-color, 8%); +$icon-bg-hover-color: darken($bg-color, 4%); +$icon-bg-active-color: darken($bg-color, 8%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #ffffff; $search-bar-color: #d9e1e8; -$search-bar-focus-color: $background-color; +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: #282c37; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #e6ebf0; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #e6ebf0; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss index 60c8370a2..eba9c0f18 100644 --- a/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss +++ b/app/javascript/styles/mastodon-material-dark/color/plus-classic.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #db4437; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss index 77cef824f..d925f3d65 100644 --- a/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss +++ b/app/javascript/styles/mastodon-material-dark/color/v1-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #303030; -$menu-background-color: #424242; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #424242; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #424242; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #303030; +$menu-bg-color: #424242; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #424242; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #424242; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%); $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); -$scroll-bar-thumb-hover-color: lighten($background-color, 30%); -$scroll-bar-thumb-active-color: lighten($background-color, 38%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 30%); +$scroll-bar-thumb-active-color: lighten($bg-color, 38%); // App bar color $top-bar-color: #1565C0; -$search-bar-color: lighten($background-color, 6%); +$search-bar-color: lighten($bg-color, 6%); $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #424242; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #424242; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss index 64f8d5842..906b8e459 100644 --- a/app/javascript/styles/mastodon-material-dark/color/v1-light.scss +++ b/app/javascript/styles/mastodon-material-dark/color/v1-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); @@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $top-bar-unread-icon-color: darken($primary-color, 30%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #2196f3; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss index 8c575bce5..94c381ee7 100644 --- a/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss +++ b/app/javascript/styles/mastodon-material-dark/color/v2-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #121212; -$menu-background-color: #1e1e1e; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #1e1e1e; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #1e1e1e; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #121212; +$menu-bg-color: #1e1e1e; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #1e1e1e; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #1e1e1e; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #1e1e1e; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #1e1e1e; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss index 20336e96d..9317004e9 100644 --- a/app/javascript/styles/mastodon-material-dark/color/v2-light.scss +++ b/app/javascript/styles/mastodon-material-dark/color/v2-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #ffffff; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: $background-color; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: $background-color; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #ffffff; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: $bg-color; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: $bg-color; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); -$scroll-bar-thumb-hover-color: darken($background-color, 30%); -$scroll-bar-thumb-active-color: darken($background-color, 38%); +$scroll-bar-thumb-color: darken($bg-color, 20%); +$scroll-bar-thumb-hover-color: darken($bg-color, 30%); +$scroll-bar-thumb-active-color: darken($bg-color, 38%); // App bar color -$top-bar-color: $background-color; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$top-bar-color: $bg-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/icon_config.scss b/app/javascript/styles/mastodon-material-dark/icon_config.scss index 610c7e308..99046e176 100644 --- a/app/javascript/styles/mastodon-material-dark/icon_config.scss +++ b/app/javascript/styles/mastodon-material-dark/icon_config.scss @@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star $favorite-icon-color: #ffd600; // Star //$favorite-icon-color: #ff4081; // Heart //$favorite-icon-color: #db4437; // +1 -//$favorite-icon-color: #ffffff; // inverted +1 +//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin) // Reply icon settings @@ -16,11 +16,13 @@ $reply-icon: "reply"; // Material Design Icon settings // If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below. -@font-face { - font-family: "Material Icons"; - src: - local("Material Icons"), - //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub - //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts - url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting -} \ No newline at end of file +//$icon-font-source: google; // Google Fonts +//$icon-font-source: github; // GitHub +$icon-font-source: self; // Self-hosting + +// Material Icon style settings +$icon-font-style: filled; +//$icon-font-style: outlined; +//$icon-font-style: round; +//$icon-font-style: sharp; +//$icon-font-style: two-tone; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss index 825deaf8c..926c3325a 100644 --- a/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss +++ b/app/javascript/styles/mastodon-material-dark/layout/material-v1.scss @@ -30,6 +30,10 @@ $dialog-radius: 2px; $menu-radius: 2px; +// Media radius settings +$media-radius: 0; + + // Navigation drawer item settings $nav-drawer-item-radius: 0; @@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping //$avater-radius: 2px // Material v1 square +// Chip settings +$outlined-chip: false; // Material v1 styled contained chip + + // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss index 853d82b15..f79f91005 100644 --- a/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss +++ b/app/javascript/styles/mastodon-material-dark/layout/material-v2.scss @@ -4,10 +4,12 @@ // Navigation bar radius $nav-bar-radius: 8px; +//$nav-bar-radius: 28px; // full radius // Search bar radius $search-bar-radius: 8px; +//$search-bar-radius: 21px; // full rounded // Bar radius settings @@ -31,6 +33,11 @@ $dialog-radius: 8px; $menu-radius: 8px; +// Media radius settings +$media-radius: 0; +//$media-radius: 2px; + + // Navigation drawer item settings $nav-drawer-item-radius: 8px; // corner rounded //$nav-drawer-item-radius: 32px; // full rounded @@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping // Chip settings -// If you want to use contained-chip, please comment out below. -.reactions-bar__item { - background: $outlined-chip-color !important; - border: 1px solid $border-color !important; - - &.active { background-color: $outlined-chip-selected-color !important } - - &:hover { background: $outlined-chip-hover-color !important } -} +$outlined-chip: true; // Material v2 styled outlined chip +//$outlined-chip: false; // Material v1 styled contained chip // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: false; // Material v2 styled colored button without shadow +//$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/plugins/cards.scss b/app/javascript/styles/mastodon-material-dark/plugins/cards.scss index c134cbeeb..d9b3906a5 100644 --- a/app/javascript/styles/mastodon-material-dark/plugins/cards.scss +++ b/app/javascript/styles/mastodon-material-dark/plugins/cards.scss @@ -10,13 +10,13 @@ margin: 2px 0 !important; padding: 8px !important; - > .scrollable { background: $background-color } + > .scrollable { background: $bg-color } } .status { border-bottom: 0; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; &__prepend { padding: 8px 8px 2px 0 } } @@ -28,7 +28,7 @@ @include shadow-1dp; margin: 8px 2px; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; } .notification .status__wrapper.status__wrapper { box-shadow: none !important } diff --git a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss index 5b220631b..86a5f3e1e 100644 --- a/app/javascript/styles/mastodon-material-dark/plugins/plus.scss +++ b/app/javascript/styles/mastodon-material-dark/plugins/plus.scss @@ -14,9 +14,8 @@ // favorite icon .star-icon.active, -.star-icon.icon-button.active.active, -.notification__favourite-icon-wrapper .star-icon, -.status__action-bar-button.star-icon.icon-button.active { background: #db4437 } +.star-icon.icon-button.active.activate, +.notification__favourite-icon-wrapper .star-icon { background: #db4437 } .notification__favourite-icon-wrapper { left: -34px; diff --git a/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss b/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss index 5f573e339..fc965880f 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/_mixins.scss @@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12); @mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 } @mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 } @mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 } +@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 } +@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 } +@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 } +@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 } +@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 } +@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 } +@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 } +@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 } @mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2} + +@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } + +@mixin search-bar-hover { + @if $search-bar-hover { + @include shadow-2dp; + background: $search-bar-focus-color; + } +} + +@mixin outlined-chip { + @if $outlined-chip { + .reactions-bar__item { + background: $outlined-chip-color !important; + border: 1px solid $border-color !important; + + &.active { background-color: $outlined-chip-selected-color !important } + + &:hover { background: $outlined-chip-hover-color !important } + } + } +} + +@mixin button-shadow { + @if $button-shadow { + .button, + .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } + } +} + +@mixin icon-font-style { + @if $icon-font-style == filled { font-family: "Material Icons" } + @if $icon-font-style == outlined { font-family: "Material Icons Outlined" } + @if $icon-font-style == round { font-family: "Material Icons Round" } + @if $icon-font-style == sharp { font-family: "Material Icons Sharp" } + @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" } +} + +@mixin icon-font { + @if $icon-font-source == github { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } + + @if $icon-font-source == google { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2'); + } + } + } + + @if $icon-font-source == self { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url(".../fonts/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons"), + url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/theme/account.scss b/app/javascript/styles/mastodon-material-dark/theme/account.scss index 34a8a1816..b6d517e12 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/account.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/account.scss @@ -7,8 +7,8 @@ .account { border-bottom: 1px solid $border-color; - .account__display-name { color: $primary-text-color } - .account__display-name strong { color: $secondary-text-color } + .account__display-name, + .account__display-name strong { color: $primary-text-color } &__avatar { border-radius: $avater-radius; @@ -29,9 +29,9 @@ &__header { &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; - border-bottom: 1px solid $border-color; + border-bottom: none; .avatar .account__avatar { border: none } } @@ -89,7 +89,7 @@ .verified { border: none; - background: $verified-background-color; + background: $verified-bg-color; a, &__mark { color: $primary-text-color } @@ -105,7 +105,7 @@ dt { color: $primary-text-color; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; } dd { color: $primary-text-color } @@ -113,11 +113,31 @@ } } + &__account-note { + padding: 8px 16px; + border-bottom: 1px solid $border-color; + + label { + color: $ui-text-color; + margin-bottom: 8px; + } + + textarea { + color: $primary-text-color; + padding: 8px 16px; + border-radius: 0; + + &:focus { background: transparent } + + &::placeholder { color: $tips-text-color } + } + } + &__content { color: $secondary-text-color } } &__section-headline { - background: $text-tab-background-color; + background: $text-tab-bg-color; border-bottom: 1px solid $border-color; a { @@ -131,10 +151,10 @@ &::before, &:after { border: none } - &:focus { background: $text-tab-indicator-background-focus-color } + &:focus { background: $text-tab-indicator-bg-focus-color } } - &:hover { background: $text-tab-indicator-background-hover-color } + &:hover { background: $text-tab-indicator-bg-hover-color } } } } @@ -150,4 +170,8 @@ color: $ui-text-color; small { color: $secondary-text-color } +} + +.account-gallery { + &__item { border-radius: 0 } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/theme/base_config.scss b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss index 73ff009e1..13fb4ad75 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/base_config.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/base_config.scss @@ -18,10 +18,7 @@ // Search bar hover settings // You can enable/disable search bar floating. -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ +$search-bar-hover: false; // Status font size in timeline @@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default // Name font size in timeline status $name-font-size: 15px; // mastodon default -//$name-font-size: 16px; // compatible with material design \ No newline at end of file +//$name-font-size: 16px; // compatible with material design + + +// Background image +// If you want to use the local image, please put it in /mastodon-material +$bg-image: none; +//$bg-image: "./image.png"; +//$bg-image: "https://example.com/img/image.png"; + + +// Columns transparency settings +$bar-transparency: 1.0; // opacity +//$bar-transparency: 0.8; // semi-transparent + +$column-transparency: 1.0; // opacity +//$column-transparency: 0.8; // semi-transparent \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/theme/basics.scss b/app/javascript/styles/mastodon-material-dark/theme/basics.scss index 4c122d1c6..32ba6dc8c 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/basics.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/basics.scss @@ -4,7 +4,9 @@ @import '../custom_color', '../custom_layout'; -body { background: $background-color } +body { background: $bg-color } + +.focusable:focus { background: transparent } // Chrome & Safari scroll bar ::-webkit-scrollbar-thumb { @@ -21,6 +23,4 @@ body { background: $background-color } } // Firefox scroll bar -html { - scrollbar-color: $scroll-bar-thumb-color transparent; -} \ No newline at end of file +html { scrollbar-color: $scroll-bar-thumb-color transparent } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/theme/button.scss b/app/javascript/styles/mastodon-material-dark/theme/button.scss index 1231bac98..7c2ad7937 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/button.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/button.scss @@ -4,6 +4,8 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +@include button-shadow; + .icon-button { color: $icon-button-color; border-radius: 50%; @@ -21,37 +23,54 @@ &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } } &.overlayed { border-radius: 50%; - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; &:hover { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-hover-color; } } &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } - &:active, - &:focus { background-color: transparent } + &:focus { transition: none } +} + +// Checkbox with label +label.icon-button { + &.active { + color: $ui-text-color; + background-color: transparent; + } + + &:hover { + @include material-transition; + background-color: transparent; + } } .text-icon-button { color: $icon-button-color; border-radius: 50%; - font-size: 12px; + font-size: 14px; + + &.active { + background-color: $icon-bg-hover-color; + color: $icon-button-active-color; + } &:hover { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; color: $icon-button-hover-color; } } @@ -91,7 +110,7 @@ } .spoiler-button__overlay__label { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; color: $media-icon-color; } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/theme/columns.scss b/app/javascript/styles/mastodon-material-dark/theme/columns.scss index 54effffd3..af7776a0c 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/columns.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/columns.scss @@ -10,7 +10,10 @@ margin: 10px 8px; border-radius: $card-radius; - &>.scrollable { background: $list-background-color } + &>.scrollable { + background: $list-bg-color; + opacity: $column-transparency; + } &:last-child { box-shadow: none } } @@ -45,22 +48,23 @@ background: $top-bar-color; color: $top-bar-icon-color; margin: 8px 10px; - padding: 10px 12px; + padding: 10px; border-radius: 50%; + font-size: 20px; &.active { color: $top-bar-icon-active-color; - background: $icon-background-active-color; + background: $icon-bg-active-color; &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } @@ -93,6 +97,7 @@ &__wrapper { @include shadow-4dp; border-radius: $bar-radius; + opacity: $bar-transparency; .announcements { border-top: 1px solid $border-color } @@ -105,11 +110,11 @@ &__collapsible { color: $ui-text-color; - background: $card-background-color; + background: $card-bg-color; border-top: 1px solid $border-color; &-inner { - background: $card-background-color; + background: $card-bg-color; padding: 16px; } @@ -119,9 +124,9 @@ &__back-button { background: $top-bar-color; color: $top-bar-icon-color; - padding: 8px; - margin: auto 0; - border-radius: 50%; + margin: 8px 10px; + padding: 10px; + font-size: 20px; span { display: none } } @@ -129,21 +134,21 @@ .column-subheading { color: $section-text-color; - background: $background-color; + background: $bg-color; padding: 12px 16px; border-top: 1px solid $border-color; } .column-link { color: $ui-text-color; - background: $background-color; + background: $bg-color; padding: 16px; border-radius: $nav-drawer-item-radius; - &:hover { background: $list-background-hover-color } + &:hover { background: $list-bg-hover-color } &:active, - &:focus { background: $list-background-active-color } + &:focus { background: $list-bg-active-color } &__icon { margin-right: 32px; @@ -153,9 +158,9 @@ &--transparent { &.active { color: $ui-text-color; - background: $menu-background-active-color; + background: $menu-bg-active-color; - &:hover { background: $menu-background-active-hover-color } + &:hover { background: $menu-bg-active-hover-color } .fa { color: $icon-color } } @@ -191,14 +196,19 @@ .column-inline-form { padding: 16px 0 16px 16px; - background: $card-background-color; + background: $card-bg-color; .icon-button { margin: 0 16px } } +.columns-area { + background-image: url($bg-image); + background-size: contain; +} + .setting-text { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border-radius: $bar-radius; &::placeholder { color: $tips-text-color } @@ -206,17 +216,17 @@ .empty-column-indicator { color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; font-size: 16px; } .conversation { border-bottom: 1px solid $border-color; padding: 12px; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; &--unread { - background: $list-background-color; + background: $list-bg-color; .conversation__content__relative-time { color: $info-text-color } } @@ -275,15 +285,16 @@ color: $icon-color; padding: 16px; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } } .getting-started { - background: $background-color; + background: $bg-color; color: $ui-text-color; + opacity: $column-transparency; &__wrapper { - background: $background-color; + background: $bg-color; height: auto !important; border-bottom: 1px solid $border-color; } @@ -303,8 +314,9 @@ } &__trends { - background: $background-color; + background: $bg-color; margin-bottom: 0; + opacity: $column-transparency; h4 { color: $section-text-color; @@ -358,7 +370,7 @@ } .announcements { - background: $card-background-color; + background: $card-bg-color; padding: 0; &__container { color: $primary-text-color } @@ -386,6 +398,8 @@ .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important } +@include outlined-chip; + .reactions-bar { .emoji-button { color: $icon-button-color; @@ -424,12 +438,13 @@ .notification { &__filter-bar { - background: $tab-background-color; + background: $tab-bg-color; border-bottom: 1px solid $border-color; z-index: 1; + opacity: $bar-transparency; button { - background: $tab-background-color; + background: $tab-bg-color; color: $tab-indicator-color; font-size: 16px; @@ -442,10 +457,10 @@ &::before, &:after { border: none } - &:focus { background: $tab-indicator-background-focus-color } + &:focus { background: $tab-indicator-bg-focus-color } } - &:hover { background: $tab-indicator-background-hover-color } + &:hover { background: $tab-indicator-bg-hover-color } } } diff --git a/app/javascript/styles/mastodon-material-dark/theme/components.scss b/app/javascript/styles/mastodon-material-dark/theme/components.scss index ae5bfe158..46483923e 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/components.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/components.scss @@ -4,6 +4,7 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } .drawer { &__header { @@ -11,11 +12,12 @@ background: $top-bar-color; border-radius: $nav-bar-radius; justify-content: space-around; + opacity: $bar-transparency; a { transition: none } a:hover { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; } } @@ -40,14 +42,15 @@ } &__inner { - background: $card-background-color; + background: $card-bg-color; + opacity: $column-transparency; &.darker { - background: $card-background-color; + background: $card-bg-color; position: inherit; } - &__mastodon { background: $card-background-color } + &__mastodon { background: $card-bg-color } } } @@ -57,6 +60,7 @@ color: $tips-text-color; border-radius: $search-bar-radius; padding: 12px 12px 12px 40px; + opacity: $bar-transparency; &:focus { @include shadow-2dp; @@ -64,6 +68,8 @@ color: $search-bar-text-color; } + &:hover { @include search-bar-hover } + &::placeholder { color: $tips-text-color } } @@ -112,7 +118,7 @@ .search-results { &__header { color: $secondary-text-color; - background-color: $card-background-color; + background-color: $card-bg-color; padding: 16px; .fa { margin-right: 8px } @@ -120,7 +126,7 @@ &__section { h5 { - background: $card-background-color; + background: $card-bg-color; border-bottom: 1px solid $border-color; padding: 16px; color: $section-text-color; @@ -137,6 +143,12 @@ strong { color: $ui-text-color; } + + .navigation-bar__actions .compose__action-bar .icon-button { + width: 36px !important; + height: 36px !important; + padding: 8px; + } } .navigation-panel hr { @@ -146,7 +158,7 @@ .dropdown-menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; padding: 8px 0; border-radius: $menu-radius; @@ -155,11 +167,11 @@ &__item a { font-size: 14px; padding: 8px 16px; - background: $menu-background-color; + background: $menu-bg-color; color: $menu-text-color; &:hover, &:active { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $menu-text-color; } } @@ -173,7 +185,7 @@ .compose-form { .autosuggest-textarea { &__textarea { - background: $text-field-background-color; + background: $text-field-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -182,7 +194,7 @@ &__suggestions { @include shadow-1dp; - background: $menu-background-color; + background: $menu-bg-color; color: $ui-text-color; border-radius: $card-radius; font-size: 16px; @@ -192,40 +204,76 @@ padding: 8px; border-radius: 0; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } &.selected, &:focus, - &:active { background: $menu-background-active-color } + &:active { background: $menu-bg-active-color } } } } - .spoiler-input__input { - color: $ui-text-color; - background: $card-background-color; + .spoiler-input { + &.spoiler-input--visible { margin-bottom: 8px } - &::placeholder { color: $tips-text-color } + &__input { + color: $ui-text-color; + background: $card-bg-color; + border-bottom: 1px solid $border-color; + border-radius: 0; + + &::placeholder { color: $tips-text-color } + } } .compose-form { &__warning { - @include shadow-1dp; color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; padding: 16px; + border: 1px solid $border-color; + border-radius: $card-radius; a { color: $link-text-color } } &__modifiers { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + + .compose-form { + &__upload-thumbnail { border-radius: 0 } + + &__upload__actions { + @include material-transition; + + .icon-button { + color: $media-icon-color; + font-size: 16px; + + &:hover { background-color: transparent } + } + } + } } &__buttons-wrapper { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + padding: 8px; + + .icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + } + + .text-icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + line-height: 20px !important; + } } &__poll-wrapper { @@ -235,7 +283,7 @@ select { color: $ui-text-color; - background-color: $background-color; + background-color: $bg-color; border: 0; &:focus { border-color: $border-active-color } @@ -251,20 +299,16 @@ &:active { background-color: $outlined-button-active-color } &:focus { background-color: $outlined-button-color } - - } - } - &__utilBtns { padding-top: 0 } + .poll__footer { border-top: none } + } &__publish .compose-form__publish-button-wrapper { box-shadow: none } } } -.no-reduce-motion .spoiler-input { - transition-duration: .2s, .2s; -} +.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s } .poll { @@ -283,7 +327,7 @@ &__text input[type=text] { color: $ui-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: 1px solid $border-color; padding: 8px 12px; @@ -292,7 +336,7 @@ &__option input[type=text] { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: none; border-radius: 2px; padding: 8px 16px; @@ -300,9 +344,9 @@ &__chart { border-radius: 0; - background: $poll-bar-color; + background: $progress-indicator-track-color; - &.leading { background: $poll-bar-leading-color } + &.leading { background: $progress-indicator-color } } &__footer { @@ -316,7 +360,7 @@ .privacy-dropdown { &.active .privacy-dropdown__value.active { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; box-shadow: none; @@ -325,7 +369,7 @@ &__dropdown { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $dialog-radius; } @@ -345,7 +389,7 @@ } &.active { - background: $menu-background-active-color; + background: $menu-bg-active-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -355,7 +399,7 @@ } &:hover { - background: $menu-background-active-color; + background: $menu-bg-active-color; .privacy-dropdown__option__content { color: $secondary-text-color; @@ -366,7 +410,7 @@ } &:hover { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -386,7 +430,7 @@ box-shadow: none; border: 1px solid $border-color; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__header { margin-bottom: 4px } @@ -410,14 +454,15 @@ } .block-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; &__container { padding: 24px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } @@ -451,7 +496,7 @@ } .filter-form { - background: $background-color; + background: $bg-color; color: $ui-text-color; &__column { padding: 8px 16px } @@ -466,18 +511,23 @@ &__img { border-radius: $card-radius $card-radius 0 0 } &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px 16px; .display-name { margin-left: 16px; + strong { + font-size: 16px; + color: $primary-text-color; + } + span { color: $secondary-text-color } } } &__extra { - background: $card-background-color; + background: $card-bg-color; border-radius: 0 0 $card-radius $card-radius; .account__header__content { @@ -491,7 +541,8 @@ } .mute-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -500,13 +551,14 @@ &__explanation { margin-top: 16px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } &__cancel-button { box-shadow: none !important; + color: $text-button-color; background: transparent; margin: 0 8px; @@ -531,4 +583,19 @@ margin: 0 0 0 12px; } } +} + +.upload-progress { + color: $ui-text-color; + + &__backdrop { + border-radius: 0; + background: $progress-indicator-track-color; + margin-top: 6px; + } + + &__tracker { + border-radius: 0; + background: $progress-indicator-color; + } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss index 70e22752d..1b42121be 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss @@ -7,13 +7,13 @@ .emoji-picker-dropdown { &__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; } &__modifiers__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; button { @@ -31,33 +31,23 @@ border: 0 solid $border-color; &:first-child { - background: $menu-background-color; + background: $menu-bg-color; } } - &-anchors { - color: $icon-button-color; - padding: 0; - } - &-anchor { + color: $text-tab-indicator-color; padding: 10px 4px; - &-selected { - color: $icon-button-active-color; - } + &-bar { background-color: $icon-tab-indicator-active-color } - &-bar { - background-color: $tab-indicator-active-color; - } + &-selected { color: $icon-tab-indicator-hover-color } - &:hover { - color: $icon-button-hover-color; - } + &:hover { color: $icon-tab-indicator-hover-color } } &-search { - background: $menu-background-color; + background: $menu-bg-color; input { outline: none; @@ -76,16 +66,16 @@ &-scroll { padding: 0 8px 8px; - background: $menu-background-color; + background: $menu-bg-color; } &-category-label span { padding: 4px 6px; - background: $menu-background-color; + background: $menu-bg-color; } &-emoji:hover::before { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } &-no-results { color: $secondary-text-color } diff --git a/app/javascript/styles/mastodon-material-dark/theme/icons.scss b/app/javascript/styles/mastodon-material-dark/theme/icons.scss index 1367647ec..987767544 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/icons.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/icons.scss @@ -16,26 +16,8 @@ &__icon.fa-fw { color: $icon-color } } - -.fa { vertical-align: sub } // adjust material icon font baseline to other font - -.fa.fa-times, -.fa.fa-eraser, -.fa.fa-plus { vertical-align: middle } // adjustment exception - -.fa.fa-check { vertical-align: initial } - .fa.fa-lock { text-transform: none } -.fa-fw { width: 16px } - -// icon in tab settings -.fa.fa-chevron-left.column-back-button__icon.fa-fw, -.text-btn.column-header__setting-btn .fa.fa-eraser { - font-size: 20px; - margin-right: 16px; -} - .icon-with-badge__badge { background: $badge-color; border: none; diff --git a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss index 747856253..f27de96e8 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/material-icons.scss @@ -3,8 +3,17 @@ @import '../custom_config', '../icon_config'; @import '../custom_color', '../custom_layout'; @import 'functions'; +@import 'mixins'; +@include icon-font; + +.fa-fw { + width: 20px; + height: 20px; + font-size: 20px; +} + .fa { &.fa-bars, &.fa-navicon, @@ -64,8 +73,19 @@ &.fa-compress, &.fa-user-times, &.fa-check, - &.fa-quote-right { - font-family: "Material Icons"; + &.fa-quote-right, + &.fa-upload, + &.fa-comments { + @include icon-font-style; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; } } @@ -118,9 +138,11 @@ &.fa-download::before { content: "file_download" } &.fa-arrows-alt::before { content: "fullscreen" } &.fa-compress::before { content: "fullscreen_exit" } - &.fa-user-times::before { content: "delete" } + &.fa-user-times::before { content: "person_remove" } &.fa-check::before { content: "check" } &.fa-quote-right::before { content: "format_quote" } + &.fa-upload::before { content: "file_upload" } + &.fa-comments::before { content: "forum" } } // bookmark icon @@ -148,12 +170,42 @@ .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color } // boost icon -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet, +button.icon-button i.fa-retweet:hover { height: 18px; width: 18px; transition: none; background-image: url('data:image/svg+xml;utf8,'); } +button.icon-button.disabled i.fa-retweet, +button.icon-button.disabled i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); +} + // dropdown icon -.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} + +// icon in tab settings +.text-btn.column-header__setting-btn { + .fa { + vertical-align: middle; + + &.fa-eraser { margin-right: 8px } // clear notification + } +} + +// top bar icons align +.fa.fa-bell.column-header__icon.fa-fw, +.fa.fa-home.column-header__icon.fa-fw, +.fa.fa-users.column-header__icon.fa-fw, +.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom } + +// uploaded media icons align +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa { + font-size: 20px; + vertical-align: text-bottom; +} + +// search results icons align +.search-results__header .fa { vertical-align: text-bottom } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/theme/media.scss b/app/javascript/styles/mastodon-material-dark/theme/media.scss index 9d0203828..0b8b92acf 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/media.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/media.scss @@ -6,9 +6,9 @@ .media-gallery { - border-radius: 0; + border-radius: $media-radius; - &__item { border-radius: 0 } + &__item { border-radius: $media-radius } } .media-modal__close { @@ -24,7 +24,7 @@ border: 12px; &:hover { - background: $media-icon-background-hover-color; + background: $media-icon-bg-hover-color; color: $media-icon-hover-color; } @@ -34,7 +34,7 @@ .media-modal { &__nav { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; height: 48px; width: 48px; @@ -50,6 +50,12 @@ &--active { background-color: $media-page-indicator-active-color } } + + &__meta { + bottom: 24px; + + a { color: $media-icon-color } + } } .video-player { @@ -75,7 +81,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } @@ -93,7 +99,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } diff --git a/app/javascript/styles/mastodon-material-dark/theme/modal.scss b/app/javascript/styles/mastodon-material-dark/theme/modal.scss index 2748c8723..209678c84 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/modal.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/modal.scss @@ -6,7 +6,8 @@ .confirmation-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $dialog-radius; width: 300px; @@ -18,7 +19,7 @@ &__action-bar { justify-content: flex-end; - background: $card-background-color; + background: $card-bg-color; padding: 8px; } @@ -42,7 +43,7 @@ } .actions-modal { - background: $card-background-color; + background: $card-bg-color; border-radius: $card-radius; ul li:not(:empty) a { @@ -50,7 +51,7 @@ font-size: 16px; &:hover { - background: $card-background-hover-color; + background: $card-bg-hover-color; color: $ui-text-color; } } @@ -58,7 +59,7 @@ .dropdown-menu__separator { border-bottom-color: $border-color } .status { - background: $card-background-color; + background: $card-bg-color; border-bottom-color: $border-color; padding-top: 12px; padding-bottom: 12px; @@ -71,7 +72,8 @@ } .report-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; diff --git a/app/javascript/styles/mastodon-material-dark/theme/responsive.scss b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss index 9ae304041..d0e1a6635 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/responsive.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/responsive.scss @@ -81,14 +81,14 @@ @media screen and (min-width: 631px) { .tabs-bar__link { &:hover { - background: $tab-indicator-background-hover-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-hover-color; + border-bottom-color: $tab-bg-color; } &:active, &:focus { - background: $tab-indicator-background-focus-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-focus-color; + border-bottom-color: $tab-bg-color; } } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss index eedf77c2a..d095c2292 100644 --- a/app/javascript/styles/mastodon-material-dark/theme/statuses.scss +++ b/app/javascript/styles/mastodon-material-dark/theme/statuses.scss @@ -86,12 +86,15 @@ background: transparent; border-bottom-color: $border-color; } + + &__visibility-icon { color: $icon-color } } .status-card { color: $icon-color; border-color: $border-color; outline: none; + margin-top: 16px; &__image { background: transparent; @@ -110,7 +113,7 @@ &__actions { &>div { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; } @@ -136,7 +139,19 @@ &:hover { background-color: transparent !important } } - &:hover { background-color: $card-background-color } + &.horizontal { + border-radius: 0; + + .status-card { + &__image-preview { border-radius: 0 } + + &__image-image { border-radius: 0 } + } + } +} + +a.status-card { + &:hover { background-color: $card-bg-color } } // Detailed status in mobile @@ -152,7 +167,7 @@ } .detailed-status { - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__display-name { @@ -167,7 +182,7 @@ } &__action-bar { - background: $card-background-color; + background: $card-bg-color; border-top: none; border-bottom: 1px solid $border-color; padding: 12px 0; diff --git a/app/javascript/styles/mastodon-material-light.scss b/app/javascript/styles/mastodon-material-light.scss index 5068d6386..cda781b7a 100644 --- a/app/javascript/styles/mastodon-material-light.scss +++ b/app/javascript/styles/mastodon-material-light.scss @@ -1,2 +1,9 @@ +/* +* Mastodon Material 0.2.0 +* Author: Rintan, Genbu Project +* Copyright (C) 2020 Rintan, Genbu Project +*/ + + @import 'application'; @import 'mastodon-material-light/loader'; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/color/black.scss b/app/javascript/styles/mastodon-material-light/color/black.scss index b299981b0..6aa7ebfdb 100644 --- a/app/javascript/styles/mastodon-material-light/color/black.scss +++ b/app/javascript/styles/mastodon-material-light/color/black.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #000000; -$menu-background-color: #121212; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #121212; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #000000; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #000000; +$menu-bg-color: #121212; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #121212; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #000000; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #1e1e1e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #1e1e1e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #121212; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #121212; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss index c3c168316..4ed9a7e07 100644 --- a/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss +++ b/app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #191b22; -$menu-background-color: #d9e1e8; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #313543; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #282c37; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #191b22; +$menu-bg-color: #d9e1e8; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #313543; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #282c37; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #42485a; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #9baec8; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: lighten($background-color, 14%); -$icon-background-active-color: lighten($background-color, 18%); +$icon-bg-hover-color: lighten($bg-color, 14%); +$icon-bg-active-color: lighten($bg-color, 18%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #fff; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,9 +99,9 @@ $border-color: #393f4f; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 16%); -$scroll-bar-thumb-hover-color: lighten($background-color, 26%); -$scroll-bar-thumb-active-color: lighten($background-color, 32%); +$scroll-bar-thumb-color: lighten($bg-color, 16%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 26%); +$scroll-bar-thumb-active-color: lighten($bg-color, 32%); // App bar color $top-bar-color: #313543; @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: #d9e1e8; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #1f232b; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #1f232b; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss index 54d894fec..d4d84a626 100644 --- a/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss +++ b/app/javascript/styles/mastodon-material-light/color/mastodon-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #eff3f5; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($background-color, 6%); -$menu-background-active-color: darken($background-color, 10%); -$menu-background-active-hover-color: darken($background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #eff3f5; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($bg-color, 6%); +$menu-bg-active-color: darken($bg-color, 10%); +$menu-bg-active-hover-color: darken($bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -55,8 +56,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #282c37; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: darken($background-color, 4%); -$icon-background-active-color: darken($background-color, 8%); +$icon-bg-hover-color: darken($bg-color, 4%); +$icon-bg-active-color: darken($bg-color, 8%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #ffffff; $search-bar-color: #d9e1e8; -$search-bar-focus-color: $background-color; +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: #282c37; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #e6ebf0; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #e6ebf0; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss index 60c8370a2..eba9c0f18 100644 --- a/app/javascript/styles/mastodon-material-light/color/plus-classic.scss +++ b/app/javascript/styles/mastodon-material-light/color/plus-classic.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #db4437; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss index 77cef824f..d925f3d65 100644 --- a/app/javascript/styles/mastodon-material-light/color/v1-dark.scss +++ b/app/javascript/styles/mastodon-material-light/color/v1-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #303030; -$menu-background-color: #424242; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #424242; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #424242; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #303030; +$menu-bg-color: #424242; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #424242; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #424242; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%); $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); -$scroll-bar-thumb-hover-color: lighten($background-color, 30%); -$scroll-bar-thumb-active-color: lighten($background-color, 38%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 30%); +$scroll-bar-thumb-active-color: lighten($bg-color, 38%); // App bar color $top-bar-color: #1565C0; -$search-bar-color: lighten($background-color, 6%); +$search-bar-color: lighten($bg-color, 6%); $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #424242; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #424242; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/color/v1-light.scss b/app/javascript/styles/mastodon-material-light/color/v1-light.scss index 64f8d5842..906b8e459 100644 --- a/app/javascript/styles/mastodon-material-light/color/v1-light.scss +++ b/app/javascript/styles/mastodon-material-light/color/v1-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); @@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $top-bar-unread-icon-color: darken($primary-color, 30%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #2196f3; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss index 8c575bce5..94c381ee7 100644 --- a/app/javascript/styles/mastodon-material-light/color/v2-dark.scss +++ b/app/javascript/styles/mastodon-material-light/color/v2-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #121212; -$menu-background-color: #1e1e1e; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #1e1e1e; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #1e1e1e; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #121212; +$menu-bg-color: #1e1e1e; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #1e1e1e; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #1e1e1e; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #1e1e1e; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #1e1e1e; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/color/v2-light.scss b/app/javascript/styles/mastodon-material-light/color/v2-light.scss index 20336e96d..9317004e9 100644 --- a/app/javascript/styles/mastodon-material-light/color/v2-light.scss +++ b/app/javascript/styles/mastodon-material-light/color/v2-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #ffffff; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: $background-color; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: $background-color; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #ffffff; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: $bg-color; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: $bg-color; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); -$scroll-bar-thumb-hover-color: darken($background-color, 30%); -$scroll-bar-thumb-active-color: darken($background-color, 38%); +$scroll-bar-thumb-color: darken($bg-color, 20%); +$scroll-bar-thumb-hover-color: darken($bg-color, 30%); +$scroll-bar-thumb-active-color: darken($bg-color, 38%); // App bar color -$top-bar-color: $background-color; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$top-bar-color: $bg-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/icon_config.scss b/app/javascript/styles/mastodon-material-light/icon_config.scss index 610c7e308..99046e176 100644 --- a/app/javascript/styles/mastodon-material-light/icon_config.scss +++ b/app/javascript/styles/mastodon-material-light/icon_config.scss @@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star $favorite-icon-color: #ffd600; // Star //$favorite-icon-color: #ff4081; // Heart //$favorite-icon-color: #db4437; // +1 -//$favorite-icon-color: #ffffff; // inverted +1 +//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin) // Reply icon settings @@ -16,11 +16,13 @@ $reply-icon: "reply"; // Material Design Icon settings // If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below. -@font-face { - font-family: "Material Icons"; - src: - local("Material Icons"), - //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub - //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts - url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting -} \ No newline at end of file +//$icon-font-source: google; // Google Fonts +//$icon-font-source: github; // GitHub +$icon-font-source: self; // Self-hosting + +// Material Icon style settings +$icon-font-style: filled; +//$icon-font-style: outlined; +//$icon-font-style: round; +//$icon-font-style: sharp; +//$icon-font-style: two-tone; \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss index 825deaf8c..926c3325a 100644 --- a/app/javascript/styles/mastodon-material-light/layout/material-v1.scss +++ b/app/javascript/styles/mastodon-material-light/layout/material-v1.scss @@ -30,6 +30,10 @@ $dialog-radius: 2px; $menu-radius: 2px; +// Media radius settings +$media-radius: 0; + + // Navigation drawer item settings $nav-drawer-item-radius: 0; @@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping //$avater-radius: 2px // Material v1 square +// Chip settings +$outlined-chip: false; // Material v1 styled contained chip + + // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss index 853d82b15..f79f91005 100644 --- a/app/javascript/styles/mastodon-material-light/layout/material-v2.scss +++ b/app/javascript/styles/mastodon-material-light/layout/material-v2.scss @@ -4,10 +4,12 @@ // Navigation bar radius $nav-bar-radius: 8px; +//$nav-bar-radius: 28px; // full radius // Search bar radius $search-bar-radius: 8px; +//$search-bar-radius: 21px; // full rounded // Bar radius settings @@ -31,6 +33,11 @@ $dialog-radius: 8px; $menu-radius: 8px; +// Media radius settings +$media-radius: 0; +//$media-radius: 2px; + + // Navigation drawer item settings $nav-drawer-item-radius: 8px; // corner rounded //$nav-drawer-item-radius: 32px; // full rounded @@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping // Chip settings -// If you want to use contained-chip, please comment out below. -.reactions-bar__item { - background: $outlined-chip-color !important; - border: 1px solid $border-color !important; - - &.active { background-color: $outlined-chip-selected-color !important } - - &:hover { background: $outlined-chip-hover-color !important } -} +$outlined-chip: true; // Material v2 styled outlined chip +//$outlined-chip: false; // Material v1 styled contained chip // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: false; // Material v2 styled colored button without shadow +//$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/plugins/cards.scss b/app/javascript/styles/mastodon-material-light/plugins/cards.scss index c134cbeeb..d9b3906a5 100644 --- a/app/javascript/styles/mastodon-material-light/plugins/cards.scss +++ b/app/javascript/styles/mastodon-material-light/plugins/cards.scss @@ -10,13 +10,13 @@ margin: 2px 0 !important; padding: 8px !important; - > .scrollable { background: $background-color } + > .scrollable { background: $bg-color } } .status { border-bottom: 0; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; &__prepend { padding: 8px 8px 2px 0 } } @@ -28,7 +28,7 @@ @include shadow-1dp; margin: 8px 2px; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; } .notification .status__wrapper.status__wrapper { box-shadow: none !important } diff --git a/app/javascript/styles/mastodon-material-light/plugins/plus.scss b/app/javascript/styles/mastodon-material-light/plugins/plus.scss index 5b220631b..86a5f3e1e 100644 --- a/app/javascript/styles/mastodon-material-light/plugins/plus.scss +++ b/app/javascript/styles/mastodon-material-light/plugins/plus.scss @@ -14,9 +14,8 @@ // favorite icon .star-icon.active, -.star-icon.icon-button.active.active, -.notification__favourite-icon-wrapper .star-icon, -.status__action-bar-button.star-icon.icon-button.active { background: #db4437 } +.star-icon.icon-button.active.activate, +.notification__favourite-icon-wrapper .star-icon { background: #db4437 } .notification__favourite-icon-wrapper { left: -34px; diff --git a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss index 5f573e339..fc965880f 100644 --- a/app/javascript/styles/mastodon-material-light/theme/_mixins.scss +++ b/app/javascript/styles/mastodon-material-light/theme/_mixins.scss @@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12); @mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 } @mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 } @mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 } +@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 } +@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 } +@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 } +@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 } +@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 } +@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 } +@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 } +@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 } @mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2} + +@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } + +@mixin search-bar-hover { + @if $search-bar-hover { + @include shadow-2dp; + background: $search-bar-focus-color; + } +} + +@mixin outlined-chip { + @if $outlined-chip { + .reactions-bar__item { + background: $outlined-chip-color !important; + border: 1px solid $border-color !important; + + &.active { background-color: $outlined-chip-selected-color !important } + + &:hover { background: $outlined-chip-hover-color !important } + } + } +} + +@mixin button-shadow { + @if $button-shadow { + .button, + .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } + } +} + +@mixin icon-font-style { + @if $icon-font-style == filled { font-family: "Material Icons" } + @if $icon-font-style == outlined { font-family: "Material Icons Outlined" } + @if $icon-font-style == round { font-family: "Material Icons Round" } + @if $icon-font-style == sharp { font-family: "Material Icons Sharp" } + @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" } +} + +@mixin icon-font { + @if $icon-font-source == github { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } + + @if $icon-font-source == google { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2'); + } + } + } + + @if $icon-font-source == self { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url(".../fonts/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons"), + url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/theme/account.scss b/app/javascript/styles/mastodon-material-light/theme/account.scss index 34a8a1816..b6d517e12 100644 --- a/app/javascript/styles/mastodon-material-light/theme/account.scss +++ b/app/javascript/styles/mastodon-material-light/theme/account.scss @@ -7,8 +7,8 @@ .account { border-bottom: 1px solid $border-color; - .account__display-name { color: $primary-text-color } - .account__display-name strong { color: $secondary-text-color } + .account__display-name, + .account__display-name strong { color: $primary-text-color } &__avatar { border-radius: $avater-radius; @@ -29,9 +29,9 @@ &__header { &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; - border-bottom: 1px solid $border-color; + border-bottom: none; .avatar .account__avatar { border: none } } @@ -89,7 +89,7 @@ .verified { border: none; - background: $verified-background-color; + background: $verified-bg-color; a, &__mark { color: $primary-text-color } @@ -105,7 +105,7 @@ dt { color: $primary-text-color; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; } dd { color: $primary-text-color } @@ -113,11 +113,31 @@ } } + &__account-note { + padding: 8px 16px; + border-bottom: 1px solid $border-color; + + label { + color: $ui-text-color; + margin-bottom: 8px; + } + + textarea { + color: $primary-text-color; + padding: 8px 16px; + border-radius: 0; + + &:focus { background: transparent } + + &::placeholder { color: $tips-text-color } + } + } + &__content { color: $secondary-text-color } } &__section-headline { - background: $text-tab-background-color; + background: $text-tab-bg-color; border-bottom: 1px solid $border-color; a { @@ -131,10 +151,10 @@ &::before, &:after { border: none } - &:focus { background: $text-tab-indicator-background-focus-color } + &:focus { background: $text-tab-indicator-bg-focus-color } } - &:hover { background: $text-tab-indicator-background-hover-color } + &:hover { background: $text-tab-indicator-bg-hover-color } } } } @@ -150,4 +170,8 @@ color: $ui-text-color; small { color: $secondary-text-color } +} + +.account-gallery { + &__item { border-radius: 0 } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/theme/base_config.scss b/app/javascript/styles/mastodon-material-light/theme/base_config.scss index 73ff009e1..13fb4ad75 100644 --- a/app/javascript/styles/mastodon-material-light/theme/base_config.scss +++ b/app/javascript/styles/mastodon-material-light/theme/base_config.scss @@ -18,10 +18,7 @@ // Search bar hover settings // You can enable/disable search bar floating. -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ +$search-bar-hover: false; // Status font size in timeline @@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default // Name font size in timeline status $name-font-size: 15px; // mastodon default -//$name-font-size: 16px; // compatible with material design \ No newline at end of file +//$name-font-size: 16px; // compatible with material design + + +// Background image +// If you want to use the local image, please put it in /mastodon-material +$bg-image: none; +//$bg-image: "./image.png"; +//$bg-image: "https://example.com/img/image.png"; + + +// Columns transparency settings +$bar-transparency: 1.0; // opacity +//$bar-transparency: 0.8; // semi-transparent + +$column-transparency: 1.0; // opacity +//$column-transparency: 0.8; // semi-transparent \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/theme/basics.scss b/app/javascript/styles/mastodon-material-light/theme/basics.scss index 4c122d1c6..32ba6dc8c 100644 --- a/app/javascript/styles/mastodon-material-light/theme/basics.scss +++ b/app/javascript/styles/mastodon-material-light/theme/basics.scss @@ -4,7 +4,9 @@ @import '../custom_color', '../custom_layout'; -body { background: $background-color } +body { background: $bg-color } + +.focusable:focus { background: transparent } // Chrome & Safari scroll bar ::-webkit-scrollbar-thumb { @@ -21,6 +23,4 @@ body { background: $background-color } } // Firefox scroll bar -html { - scrollbar-color: $scroll-bar-thumb-color transparent; -} \ No newline at end of file +html { scrollbar-color: $scroll-bar-thumb-color transparent } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/theme/button.scss b/app/javascript/styles/mastodon-material-light/theme/button.scss index 1231bac98..7c2ad7937 100644 --- a/app/javascript/styles/mastodon-material-light/theme/button.scss +++ b/app/javascript/styles/mastodon-material-light/theme/button.scss @@ -4,6 +4,8 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +@include button-shadow; + .icon-button { color: $icon-button-color; border-radius: 50%; @@ -21,37 +23,54 @@ &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } } &.overlayed { border-radius: 50%; - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; &:hover { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-hover-color; } } &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } - &:active, - &:focus { background-color: transparent } + &:focus { transition: none } +} + +// Checkbox with label +label.icon-button { + &.active { + color: $ui-text-color; + background-color: transparent; + } + + &:hover { + @include material-transition; + background-color: transparent; + } } .text-icon-button { color: $icon-button-color; border-radius: 50%; - font-size: 12px; + font-size: 14px; + + &.active { + background-color: $icon-bg-hover-color; + color: $icon-button-active-color; + } &:hover { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; color: $icon-button-hover-color; } } @@ -91,7 +110,7 @@ } .spoiler-button__overlay__label { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; color: $media-icon-color; } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/theme/columns.scss b/app/javascript/styles/mastodon-material-light/theme/columns.scss index 54effffd3..af7776a0c 100644 --- a/app/javascript/styles/mastodon-material-light/theme/columns.scss +++ b/app/javascript/styles/mastodon-material-light/theme/columns.scss @@ -10,7 +10,10 @@ margin: 10px 8px; border-radius: $card-radius; - &>.scrollable { background: $list-background-color } + &>.scrollable { + background: $list-bg-color; + opacity: $column-transparency; + } &:last-child { box-shadow: none } } @@ -45,22 +48,23 @@ background: $top-bar-color; color: $top-bar-icon-color; margin: 8px 10px; - padding: 10px 12px; + padding: 10px; border-radius: 50%; + font-size: 20px; &.active { color: $top-bar-icon-active-color; - background: $icon-background-active-color; + background: $icon-bg-active-color; &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } @@ -93,6 +97,7 @@ &__wrapper { @include shadow-4dp; border-radius: $bar-radius; + opacity: $bar-transparency; .announcements { border-top: 1px solid $border-color } @@ -105,11 +110,11 @@ &__collapsible { color: $ui-text-color; - background: $card-background-color; + background: $card-bg-color; border-top: 1px solid $border-color; &-inner { - background: $card-background-color; + background: $card-bg-color; padding: 16px; } @@ -119,9 +124,9 @@ &__back-button { background: $top-bar-color; color: $top-bar-icon-color; - padding: 8px; - margin: auto 0; - border-radius: 50%; + margin: 8px 10px; + padding: 10px; + font-size: 20px; span { display: none } } @@ -129,21 +134,21 @@ .column-subheading { color: $section-text-color; - background: $background-color; + background: $bg-color; padding: 12px 16px; border-top: 1px solid $border-color; } .column-link { color: $ui-text-color; - background: $background-color; + background: $bg-color; padding: 16px; border-radius: $nav-drawer-item-radius; - &:hover { background: $list-background-hover-color } + &:hover { background: $list-bg-hover-color } &:active, - &:focus { background: $list-background-active-color } + &:focus { background: $list-bg-active-color } &__icon { margin-right: 32px; @@ -153,9 +158,9 @@ &--transparent { &.active { color: $ui-text-color; - background: $menu-background-active-color; + background: $menu-bg-active-color; - &:hover { background: $menu-background-active-hover-color } + &:hover { background: $menu-bg-active-hover-color } .fa { color: $icon-color } } @@ -191,14 +196,19 @@ .column-inline-form { padding: 16px 0 16px 16px; - background: $card-background-color; + background: $card-bg-color; .icon-button { margin: 0 16px } } +.columns-area { + background-image: url($bg-image); + background-size: contain; +} + .setting-text { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border-radius: $bar-radius; &::placeholder { color: $tips-text-color } @@ -206,17 +216,17 @@ .empty-column-indicator { color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; font-size: 16px; } .conversation { border-bottom: 1px solid $border-color; padding: 12px; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; &--unread { - background: $list-background-color; + background: $list-bg-color; .conversation__content__relative-time { color: $info-text-color } } @@ -275,15 +285,16 @@ color: $icon-color; padding: 16px; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } } .getting-started { - background: $background-color; + background: $bg-color; color: $ui-text-color; + opacity: $column-transparency; &__wrapper { - background: $background-color; + background: $bg-color; height: auto !important; border-bottom: 1px solid $border-color; } @@ -303,8 +314,9 @@ } &__trends { - background: $background-color; + background: $bg-color; margin-bottom: 0; + opacity: $column-transparency; h4 { color: $section-text-color; @@ -358,7 +370,7 @@ } .announcements { - background: $card-background-color; + background: $card-bg-color; padding: 0; &__container { color: $primary-text-color } @@ -386,6 +398,8 @@ .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important } +@include outlined-chip; + .reactions-bar { .emoji-button { color: $icon-button-color; @@ -424,12 +438,13 @@ .notification { &__filter-bar { - background: $tab-background-color; + background: $tab-bg-color; border-bottom: 1px solid $border-color; z-index: 1; + opacity: $bar-transparency; button { - background: $tab-background-color; + background: $tab-bg-color; color: $tab-indicator-color; font-size: 16px; @@ -442,10 +457,10 @@ &::before, &:after { border: none } - &:focus { background: $tab-indicator-background-focus-color } + &:focus { background: $tab-indicator-bg-focus-color } } - &:hover { background: $tab-indicator-background-hover-color } + &:hover { background: $tab-indicator-bg-hover-color } } } diff --git a/app/javascript/styles/mastodon-material-light/theme/components.scss b/app/javascript/styles/mastodon-material-light/theme/components.scss index ae5bfe158..46483923e 100644 --- a/app/javascript/styles/mastodon-material-light/theme/components.scss +++ b/app/javascript/styles/mastodon-material-light/theme/components.scss @@ -4,6 +4,7 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } .drawer { &__header { @@ -11,11 +12,12 @@ background: $top-bar-color; border-radius: $nav-bar-radius; justify-content: space-around; + opacity: $bar-transparency; a { transition: none } a:hover { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; } } @@ -40,14 +42,15 @@ } &__inner { - background: $card-background-color; + background: $card-bg-color; + opacity: $column-transparency; &.darker { - background: $card-background-color; + background: $card-bg-color; position: inherit; } - &__mastodon { background: $card-background-color } + &__mastodon { background: $card-bg-color } } } @@ -57,6 +60,7 @@ color: $tips-text-color; border-radius: $search-bar-radius; padding: 12px 12px 12px 40px; + opacity: $bar-transparency; &:focus { @include shadow-2dp; @@ -64,6 +68,8 @@ color: $search-bar-text-color; } + &:hover { @include search-bar-hover } + &::placeholder { color: $tips-text-color } } @@ -112,7 +118,7 @@ .search-results { &__header { color: $secondary-text-color; - background-color: $card-background-color; + background-color: $card-bg-color; padding: 16px; .fa { margin-right: 8px } @@ -120,7 +126,7 @@ &__section { h5 { - background: $card-background-color; + background: $card-bg-color; border-bottom: 1px solid $border-color; padding: 16px; color: $section-text-color; @@ -137,6 +143,12 @@ strong { color: $ui-text-color; } + + .navigation-bar__actions .compose__action-bar .icon-button { + width: 36px !important; + height: 36px !important; + padding: 8px; + } } .navigation-panel hr { @@ -146,7 +158,7 @@ .dropdown-menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; padding: 8px 0; border-radius: $menu-radius; @@ -155,11 +167,11 @@ &__item a { font-size: 14px; padding: 8px 16px; - background: $menu-background-color; + background: $menu-bg-color; color: $menu-text-color; &:hover, &:active { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $menu-text-color; } } @@ -173,7 +185,7 @@ .compose-form { .autosuggest-textarea { &__textarea { - background: $text-field-background-color; + background: $text-field-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -182,7 +194,7 @@ &__suggestions { @include shadow-1dp; - background: $menu-background-color; + background: $menu-bg-color; color: $ui-text-color; border-radius: $card-radius; font-size: 16px; @@ -192,40 +204,76 @@ padding: 8px; border-radius: 0; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } &.selected, &:focus, - &:active { background: $menu-background-active-color } + &:active { background: $menu-bg-active-color } } } } - .spoiler-input__input { - color: $ui-text-color; - background: $card-background-color; + .spoiler-input { + &.spoiler-input--visible { margin-bottom: 8px } - &::placeholder { color: $tips-text-color } + &__input { + color: $ui-text-color; + background: $card-bg-color; + border-bottom: 1px solid $border-color; + border-radius: 0; + + &::placeholder { color: $tips-text-color } + } } .compose-form { &__warning { - @include shadow-1dp; color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; padding: 16px; + border: 1px solid $border-color; + border-radius: $card-radius; a { color: $link-text-color } } &__modifiers { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + + .compose-form { + &__upload-thumbnail { border-radius: 0 } + + &__upload__actions { + @include material-transition; + + .icon-button { + color: $media-icon-color; + font-size: 16px; + + &:hover { background-color: transparent } + } + } + } } &__buttons-wrapper { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + padding: 8px; + + .icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + } + + .text-icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + line-height: 20px !important; + } } &__poll-wrapper { @@ -235,7 +283,7 @@ select { color: $ui-text-color; - background-color: $background-color; + background-color: $bg-color; border: 0; &:focus { border-color: $border-active-color } @@ -251,20 +299,16 @@ &:active { background-color: $outlined-button-active-color } &:focus { background-color: $outlined-button-color } - - } - } - &__utilBtns { padding-top: 0 } + .poll__footer { border-top: none } + } &__publish .compose-form__publish-button-wrapper { box-shadow: none } } } -.no-reduce-motion .spoiler-input { - transition-duration: .2s, .2s; -} +.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s } .poll { @@ -283,7 +327,7 @@ &__text input[type=text] { color: $ui-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: 1px solid $border-color; padding: 8px 12px; @@ -292,7 +336,7 @@ &__option input[type=text] { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: none; border-radius: 2px; padding: 8px 16px; @@ -300,9 +344,9 @@ &__chart { border-radius: 0; - background: $poll-bar-color; + background: $progress-indicator-track-color; - &.leading { background: $poll-bar-leading-color } + &.leading { background: $progress-indicator-color } } &__footer { @@ -316,7 +360,7 @@ .privacy-dropdown { &.active .privacy-dropdown__value.active { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; box-shadow: none; @@ -325,7 +369,7 @@ &__dropdown { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $dialog-radius; } @@ -345,7 +389,7 @@ } &.active { - background: $menu-background-active-color; + background: $menu-bg-active-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -355,7 +399,7 @@ } &:hover { - background: $menu-background-active-color; + background: $menu-bg-active-color; .privacy-dropdown__option__content { color: $secondary-text-color; @@ -366,7 +410,7 @@ } &:hover { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -386,7 +430,7 @@ box-shadow: none; border: 1px solid $border-color; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__header { margin-bottom: 4px } @@ -410,14 +454,15 @@ } .block-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; &__container { padding: 24px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } @@ -451,7 +496,7 @@ } .filter-form { - background: $background-color; + background: $bg-color; color: $ui-text-color; &__column { padding: 8px 16px } @@ -466,18 +511,23 @@ &__img { border-radius: $card-radius $card-radius 0 0 } &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px 16px; .display-name { margin-left: 16px; + strong { + font-size: 16px; + color: $primary-text-color; + } + span { color: $secondary-text-color } } } &__extra { - background: $card-background-color; + background: $card-bg-color; border-radius: 0 0 $card-radius $card-radius; .account__header__content { @@ -491,7 +541,8 @@ } .mute-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -500,13 +551,14 @@ &__explanation { margin-top: 16px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } &__cancel-button { box-shadow: none !important; + color: $text-button-color; background: transparent; margin: 0 8px; @@ -531,4 +583,19 @@ margin: 0 0 0 12px; } } +} + +.upload-progress { + color: $ui-text-color; + + &__backdrop { + border-radius: 0; + background: $progress-indicator-track-color; + margin-top: 6px; + } + + &__tracker { + border-radius: 0; + background: $progress-indicator-color; + } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss index 70e22752d..1b42121be 100644 --- a/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss +++ b/app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss @@ -7,13 +7,13 @@ .emoji-picker-dropdown { &__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; } &__modifiers__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; button { @@ -31,33 +31,23 @@ border: 0 solid $border-color; &:first-child { - background: $menu-background-color; + background: $menu-bg-color; } } - &-anchors { - color: $icon-button-color; - padding: 0; - } - &-anchor { + color: $text-tab-indicator-color; padding: 10px 4px; - &-selected { - color: $icon-button-active-color; - } + &-bar { background-color: $icon-tab-indicator-active-color } - &-bar { - background-color: $tab-indicator-active-color; - } + &-selected { color: $icon-tab-indicator-hover-color } - &:hover { - color: $icon-button-hover-color; - } + &:hover { color: $icon-tab-indicator-hover-color } } &-search { - background: $menu-background-color; + background: $menu-bg-color; input { outline: none; @@ -76,16 +66,16 @@ &-scroll { padding: 0 8px 8px; - background: $menu-background-color; + background: $menu-bg-color; } &-category-label span { padding: 4px 6px; - background: $menu-background-color; + background: $menu-bg-color; } &-emoji:hover::before { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } &-no-results { color: $secondary-text-color } diff --git a/app/javascript/styles/mastodon-material-light/theme/icons.scss b/app/javascript/styles/mastodon-material-light/theme/icons.scss index 1367647ec..987767544 100644 --- a/app/javascript/styles/mastodon-material-light/theme/icons.scss +++ b/app/javascript/styles/mastodon-material-light/theme/icons.scss @@ -16,26 +16,8 @@ &__icon.fa-fw { color: $icon-color } } - -.fa { vertical-align: sub } // adjust material icon font baseline to other font - -.fa.fa-times, -.fa.fa-eraser, -.fa.fa-plus { vertical-align: middle } // adjustment exception - -.fa.fa-check { vertical-align: initial } - .fa.fa-lock { text-transform: none } -.fa-fw { width: 16px } - -// icon in tab settings -.fa.fa-chevron-left.column-back-button__icon.fa-fw, -.text-btn.column-header__setting-btn .fa.fa-eraser { - font-size: 20px; - margin-right: 16px; -} - .icon-with-badge__badge { background: $badge-color; border: none; diff --git a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss index 747856253..f27de96e8 100644 --- a/app/javascript/styles/mastodon-material-light/theme/material-icons.scss +++ b/app/javascript/styles/mastodon-material-light/theme/material-icons.scss @@ -3,8 +3,17 @@ @import '../custom_config', '../icon_config'; @import '../custom_color', '../custom_layout'; @import 'functions'; +@import 'mixins'; +@include icon-font; + +.fa-fw { + width: 20px; + height: 20px; + font-size: 20px; +} + .fa { &.fa-bars, &.fa-navicon, @@ -64,8 +73,19 @@ &.fa-compress, &.fa-user-times, &.fa-check, - &.fa-quote-right { - font-family: "Material Icons"; + &.fa-quote-right, + &.fa-upload, + &.fa-comments { + @include icon-font-style; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; } } @@ -118,9 +138,11 @@ &.fa-download::before { content: "file_download" } &.fa-arrows-alt::before { content: "fullscreen" } &.fa-compress::before { content: "fullscreen_exit" } - &.fa-user-times::before { content: "delete" } + &.fa-user-times::before { content: "person_remove" } &.fa-check::before { content: "check" } &.fa-quote-right::before { content: "format_quote" } + &.fa-upload::before { content: "file_upload" } + &.fa-comments::before { content: "forum" } } // bookmark icon @@ -148,12 +170,42 @@ .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color } // boost icon -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet, +button.icon-button i.fa-retweet:hover { height: 18px; width: 18px; transition: none; background-image: url('data:image/svg+xml;utf8,'); } +button.icon-button.disabled i.fa-retweet, +button.icon-button.disabled i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); +} + // dropdown icon -.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} + +// icon in tab settings +.text-btn.column-header__setting-btn { + .fa { + vertical-align: middle; + + &.fa-eraser { margin-right: 8px } // clear notification + } +} + +// top bar icons align +.fa.fa-bell.column-header__icon.fa-fw, +.fa.fa-home.column-header__icon.fa-fw, +.fa.fa-users.column-header__icon.fa-fw, +.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom } + +// uploaded media icons align +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa { + font-size: 20px; + vertical-align: text-bottom; +} + +// search results icons align +.search-results__header .fa { vertical-align: text-bottom } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/theme/media.scss b/app/javascript/styles/mastodon-material-light/theme/media.scss index 9d0203828..0b8b92acf 100644 --- a/app/javascript/styles/mastodon-material-light/theme/media.scss +++ b/app/javascript/styles/mastodon-material-light/theme/media.scss @@ -6,9 +6,9 @@ .media-gallery { - border-radius: 0; + border-radius: $media-radius; - &__item { border-radius: 0 } + &__item { border-radius: $media-radius } } .media-modal__close { @@ -24,7 +24,7 @@ border: 12px; &:hover { - background: $media-icon-background-hover-color; + background: $media-icon-bg-hover-color; color: $media-icon-hover-color; } @@ -34,7 +34,7 @@ .media-modal { &__nav { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; height: 48px; width: 48px; @@ -50,6 +50,12 @@ &--active { background-color: $media-page-indicator-active-color } } + + &__meta { + bottom: 24px; + + a { color: $media-icon-color } + } } .video-player { @@ -75,7 +81,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } @@ -93,7 +99,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } diff --git a/app/javascript/styles/mastodon-material-light/theme/modal.scss b/app/javascript/styles/mastodon-material-light/theme/modal.scss index 2748c8723..209678c84 100644 --- a/app/javascript/styles/mastodon-material-light/theme/modal.scss +++ b/app/javascript/styles/mastodon-material-light/theme/modal.scss @@ -6,7 +6,8 @@ .confirmation-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $dialog-radius; width: 300px; @@ -18,7 +19,7 @@ &__action-bar { justify-content: flex-end; - background: $card-background-color; + background: $card-bg-color; padding: 8px; } @@ -42,7 +43,7 @@ } .actions-modal { - background: $card-background-color; + background: $card-bg-color; border-radius: $card-radius; ul li:not(:empty) a { @@ -50,7 +51,7 @@ font-size: 16px; &:hover { - background: $card-background-hover-color; + background: $card-bg-hover-color; color: $ui-text-color; } } @@ -58,7 +59,7 @@ .dropdown-menu__separator { border-bottom-color: $border-color } .status { - background: $card-background-color; + background: $card-bg-color; border-bottom-color: $border-color; padding-top: 12px; padding-bottom: 12px; @@ -71,7 +72,8 @@ } .report-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; diff --git a/app/javascript/styles/mastodon-material-light/theme/responsive.scss b/app/javascript/styles/mastodon-material-light/theme/responsive.scss index 9ae304041..d0e1a6635 100644 --- a/app/javascript/styles/mastodon-material-light/theme/responsive.scss +++ b/app/javascript/styles/mastodon-material-light/theme/responsive.scss @@ -81,14 +81,14 @@ @media screen and (min-width: 631px) { .tabs-bar__link { &:hover { - background: $tab-indicator-background-hover-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-hover-color; + border-bottom-color: $tab-bg-color; } &:active, &:focus { - background: $tab-indicator-background-focus-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-focus-color; + border-bottom-color: $tab-bg-color; } } } \ No newline at end of file diff --git a/app/javascript/styles/mastodon-material-light/theme/statuses.scss b/app/javascript/styles/mastodon-material-light/theme/statuses.scss index eedf77c2a..d095c2292 100644 --- a/app/javascript/styles/mastodon-material-light/theme/statuses.scss +++ b/app/javascript/styles/mastodon-material-light/theme/statuses.scss @@ -86,12 +86,15 @@ background: transparent; border-bottom-color: $border-color; } + + &__visibility-icon { color: $icon-color } } .status-card { color: $icon-color; border-color: $border-color; outline: none; + margin-top: 16px; &__image { background: transparent; @@ -110,7 +113,7 @@ &__actions { &>div { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; } @@ -136,7 +139,19 @@ &:hover { background-color: transparent !important } } - &:hover { background-color: $card-background-color } + &.horizontal { + border-radius: 0; + + .status-card { + &__image-preview { border-radius: 0 } + + &__image-image { border-radius: 0 } + } + } +} + +a.status-card { + &:hover { background-color: $card-bg-color } } // Detailed status in mobile @@ -152,7 +167,7 @@ } .detailed-status { - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__display-name { @@ -167,7 +182,7 @@ } &__action-bar { - background: $card-background-color; + background: $card-bg-color; border-top: none; border-bottom: 1px solid $border-color; padding: 12px 0; diff --git a/app/javascript/styles/material-black.scss b/app/javascript/styles/material-black.scss index 19f29bc08..345077ab5 100644 --- a/app/javascript/styles/material-black.scss +++ b/app/javascript/styles/material-black.scss @@ -1,2 +1,9 @@ +/* +* Mastodon Material 0.2.0 +* Author: Rintan, Genbu Project +* Copyright (C) 2020 Rintan, Genbu Project +*/ + + @import 'application'; @import 'material-black/loader'; \ No newline at end of file diff --git a/app/javascript/styles/material-black/color/black.scss b/app/javascript/styles/material-black/color/black.scss index b299981b0..6aa7ebfdb 100644 --- a/app/javascript/styles/material-black/color/black.scss +++ b/app/javascript/styles/material-black/color/black.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #000000; -$menu-background-color: #121212; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #121212; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #000000; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #000000; +$menu-bg-color: #121212; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #121212; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #000000; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #1e1e1e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #1e1e1e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #121212; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #121212; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-black/color/mastodon-dark.scss b/app/javascript/styles/material-black/color/mastodon-dark.scss index c3c168316..4ed9a7e07 100644 --- a/app/javascript/styles/material-black/color/mastodon-dark.scss +++ b/app/javascript/styles/material-black/color/mastodon-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #191b22; -$menu-background-color: #d9e1e8; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #313543; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #282c37; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #191b22; +$menu-bg-color: #d9e1e8; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #313543; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #282c37; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #42485a; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #9baec8; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: lighten($background-color, 14%); -$icon-background-active-color: lighten($background-color, 18%); +$icon-bg-hover-color: lighten($bg-color, 14%); +$icon-bg-active-color: lighten($bg-color, 18%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #fff; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,9 +99,9 @@ $border-color: #393f4f; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 16%); -$scroll-bar-thumb-hover-color: lighten($background-color, 26%); -$scroll-bar-thumb-active-color: lighten($background-color, 32%); +$scroll-bar-thumb-color: lighten($bg-color, 16%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 26%); +$scroll-bar-thumb-active-color: lighten($bg-color, 32%); // App bar color $top-bar-color: #313543; @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: #d9e1e8; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #1f232b; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #1f232b; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-black/color/mastodon-light.scss b/app/javascript/styles/material-black/color/mastodon-light.scss index 54d894fec..d4d84a626 100644 --- a/app/javascript/styles/material-black/color/mastodon-light.scss +++ b/app/javascript/styles/material-black/color/mastodon-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #eff3f5; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($background-color, 6%); -$menu-background-active-color: darken($background-color, 10%); -$menu-background-active-hover-color: darken($background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #eff3f5; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($bg-color, 6%); +$menu-bg-active-color: darken($bg-color, 10%); +$menu-bg-active-hover-color: darken($bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -55,8 +56,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #282c37; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: darken($background-color, 4%); -$icon-background-active-color: darken($background-color, 8%); +$icon-bg-hover-color: darken($bg-color, 4%); +$icon-bg-active-color: darken($bg-color, 8%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #ffffff; $search-bar-color: #d9e1e8; -$search-bar-focus-color: $background-color; +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: #282c37; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #e6ebf0; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #e6ebf0; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-black/color/plus-classic.scss b/app/javascript/styles/material-black/color/plus-classic.scss index 60c8370a2..eba9c0f18 100644 --- a/app/javascript/styles/material-black/color/plus-classic.scss +++ b/app/javascript/styles/material-black/color/plus-classic.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #db4437; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-black/color/v1-dark.scss b/app/javascript/styles/material-black/color/v1-dark.scss index 77cef824f..d925f3d65 100644 --- a/app/javascript/styles/material-black/color/v1-dark.scss +++ b/app/javascript/styles/material-black/color/v1-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #303030; -$menu-background-color: #424242; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #424242; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #424242; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #303030; +$menu-bg-color: #424242; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #424242; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #424242; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%); $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); -$scroll-bar-thumb-hover-color: lighten($background-color, 30%); -$scroll-bar-thumb-active-color: lighten($background-color, 38%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 30%); +$scroll-bar-thumb-active-color: lighten($bg-color, 38%); // App bar color $top-bar-color: #1565C0; -$search-bar-color: lighten($background-color, 6%); +$search-bar-color: lighten($bg-color, 6%); $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #424242; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #424242; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-black/color/v1-light.scss b/app/javascript/styles/material-black/color/v1-light.scss index 64f8d5842..906b8e459 100644 --- a/app/javascript/styles/material-black/color/v1-light.scss +++ b/app/javascript/styles/material-black/color/v1-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); @@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $top-bar-unread-icon-color: darken($primary-color, 30%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #2196f3; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-black/color/v2-dark.scss b/app/javascript/styles/material-black/color/v2-dark.scss index 8c575bce5..94c381ee7 100644 --- a/app/javascript/styles/material-black/color/v2-dark.scss +++ b/app/javascript/styles/material-black/color/v2-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #121212; -$menu-background-color: #1e1e1e; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #1e1e1e; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #1e1e1e; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #121212; +$menu-bg-color: #1e1e1e; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #1e1e1e; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #1e1e1e; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #1e1e1e; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #1e1e1e; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-black/color/v2-light.scss b/app/javascript/styles/material-black/color/v2-light.scss index 20336e96d..9317004e9 100644 --- a/app/javascript/styles/material-black/color/v2-light.scss +++ b/app/javascript/styles/material-black/color/v2-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #ffffff; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: $background-color; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: $background-color; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #ffffff; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: $bg-color; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: $bg-color; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); -$scroll-bar-thumb-hover-color: darken($background-color, 30%); -$scroll-bar-thumb-active-color: darken($background-color, 38%); +$scroll-bar-thumb-color: darken($bg-color, 20%); +$scroll-bar-thumb-hover-color: darken($bg-color, 30%); +$scroll-bar-thumb-active-color: darken($bg-color, 38%); // App bar color -$top-bar-color: $background-color; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$top-bar-color: $bg-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-black/icon_config.scss b/app/javascript/styles/material-black/icon_config.scss index 610c7e308..99046e176 100644 --- a/app/javascript/styles/material-black/icon_config.scss +++ b/app/javascript/styles/material-black/icon_config.scss @@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star $favorite-icon-color: #ffd600; // Star //$favorite-icon-color: #ff4081; // Heart //$favorite-icon-color: #db4437; // +1 -//$favorite-icon-color: #ffffff; // inverted +1 +//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin) // Reply icon settings @@ -16,11 +16,13 @@ $reply-icon: "reply"; // Material Design Icon settings // If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below. -@font-face { - font-family: "Material Icons"; - src: - local("Material Icons"), - //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub - //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts - url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting -} \ No newline at end of file +//$icon-font-source: google; // Google Fonts +//$icon-font-source: github; // GitHub +$icon-font-source: self; // Self-hosting + +// Material Icon style settings +$icon-font-style: filled; +//$icon-font-style: outlined; +//$icon-font-style: round; +//$icon-font-style: sharp; +//$icon-font-style: two-tone; \ No newline at end of file diff --git a/app/javascript/styles/material-black/layout/material-v1.scss b/app/javascript/styles/material-black/layout/material-v1.scss index 825deaf8c..926c3325a 100644 --- a/app/javascript/styles/material-black/layout/material-v1.scss +++ b/app/javascript/styles/material-black/layout/material-v1.scss @@ -30,6 +30,10 @@ $dialog-radius: 2px; $menu-radius: 2px; +// Media radius settings +$media-radius: 0; + + // Navigation drawer item settings $nav-drawer-item-radius: 0; @@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping //$avater-radius: 2px // Material v1 square +// Chip settings +$outlined-chip: false; // Material v1 styled contained chip + + // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/material-black/layout/material-v2.scss b/app/javascript/styles/material-black/layout/material-v2.scss index 853d82b15..f79f91005 100644 --- a/app/javascript/styles/material-black/layout/material-v2.scss +++ b/app/javascript/styles/material-black/layout/material-v2.scss @@ -4,10 +4,12 @@ // Navigation bar radius $nav-bar-radius: 8px; +//$nav-bar-radius: 28px; // full radius // Search bar radius $search-bar-radius: 8px; +//$search-bar-radius: 21px; // full rounded // Bar radius settings @@ -31,6 +33,11 @@ $dialog-radius: 8px; $menu-radius: 8px; +// Media radius settings +$media-radius: 0; +//$media-radius: 2px; + + // Navigation drawer item settings $nav-drawer-item-radius: 8px; // corner rounded //$nav-drawer-item-radius: 32px; // full rounded @@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping // Chip settings -// If you want to use contained-chip, please comment out below. -.reactions-bar__item { - background: $outlined-chip-color !important; - border: 1px solid $border-color !important; - - &.active { background-color: $outlined-chip-selected-color !important } - - &:hover { background: $outlined-chip-hover-color !important } -} +$outlined-chip: true; // Material v2 styled outlined chip +//$outlined-chip: false; // Material v1 styled contained chip // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: false; // Material v2 styled colored button without shadow +//$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/material-black/plugins/cards.scss b/app/javascript/styles/material-black/plugins/cards.scss index c134cbeeb..d9b3906a5 100644 --- a/app/javascript/styles/material-black/plugins/cards.scss +++ b/app/javascript/styles/material-black/plugins/cards.scss @@ -10,13 +10,13 @@ margin: 2px 0 !important; padding: 8px !important; - > .scrollable { background: $background-color } + > .scrollable { background: $bg-color } } .status { border-bottom: 0; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; &__prepend { padding: 8px 8px 2px 0 } } @@ -28,7 +28,7 @@ @include shadow-1dp; margin: 8px 2px; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; } .notification .status__wrapper.status__wrapper { box-shadow: none !important } diff --git a/app/javascript/styles/material-black/plugins/plus.scss b/app/javascript/styles/material-black/plugins/plus.scss index 5b220631b..86a5f3e1e 100644 --- a/app/javascript/styles/material-black/plugins/plus.scss +++ b/app/javascript/styles/material-black/plugins/plus.scss @@ -14,9 +14,8 @@ // favorite icon .star-icon.active, -.star-icon.icon-button.active.active, -.notification__favourite-icon-wrapper .star-icon, -.status__action-bar-button.star-icon.icon-button.active { background: #db4437 } +.star-icon.icon-button.active.activate, +.notification__favourite-icon-wrapper .star-icon { background: #db4437 } .notification__favourite-icon-wrapper { left: -34px; diff --git a/app/javascript/styles/material-black/theme/_mixins.scss b/app/javascript/styles/material-black/theme/_mixins.scss index 5f573e339..fc965880f 100644 --- a/app/javascript/styles/material-black/theme/_mixins.scss +++ b/app/javascript/styles/material-black/theme/_mixins.scss @@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12); @mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 } @mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 } @mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 } +@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 } +@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 } +@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 } +@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 } +@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 } +@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 } +@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 } +@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 } @mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2} + +@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } + +@mixin search-bar-hover { + @if $search-bar-hover { + @include shadow-2dp; + background: $search-bar-focus-color; + } +} + +@mixin outlined-chip { + @if $outlined-chip { + .reactions-bar__item { + background: $outlined-chip-color !important; + border: 1px solid $border-color !important; + + &.active { background-color: $outlined-chip-selected-color !important } + + &:hover { background: $outlined-chip-hover-color !important } + } + } +} + +@mixin button-shadow { + @if $button-shadow { + .button, + .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } + } +} + +@mixin icon-font-style { + @if $icon-font-style == filled { font-family: "Material Icons" } + @if $icon-font-style == outlined { font-family: "Material Icons Outlined" } + @if $icon-font-style == round { font-family: "Material Icons Round" } + @if $icon-font-style == sharp { font-family: "Material Icons Sharp" } + @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" } +} + +@mixin icon-font { + @if $icon-font-source == github { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } + + @if $icon-font-source == google { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2'); + } + } + } + + @if $icon-font-source == self { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url(".../fonts/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons"), + url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/material-black/theme/account.scss b/app/javascript/styles/material-black/theme/account.scss index 34a8a1816..b6d517e12 100644 --- a/app/javascript/styles/material-black/theme/account.scss +++ b/app/javascript/styles/material-black/theme/account.scss @@ -7,8 +7,8 @@ .account { border-bottom: 1px solid $border-color; - .account__display-name { color: $primary-text-color } - .account__display-name strong { color: $secondary-text-color } + .account__display-name, + .account__display-name strong { color: $primary-text-color } &__avatar { border-radius: $avater-radius; @@ -29,9 +29,9 @@ &__header { &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; - border-bottom: 1px solid $border-color; + border-bottom: none; .avatar .account__avatar { border: none } } @@ -89,7 +89,7 @@ .verified { border: none; - background: $verified-background-color; + background: $verified-bg-color; a, &__mark { color: $primary-text-color } @@ -105,7 +105,7 @@ dt { color: $primary-text-color; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; } dd { color: $primary-text-color } @@ -113,11 +113,31 @@ } } + &__account-note { + padding: 8px 16px; + border-bottom: 1px solid $border-color; + + label { + color: $ui-text-color; + margin-bottom: 8px; + } + + textarea { + color: $primary-text-color; + padding: 8px 16px; + border-radius: 0; + + &:focus { background: transparent } + + &::placeholder { color: $tips-text-color } + } + } + &__content { color: $secondary-text-color } } &__section-headline { - background: $text-tab-background-color; + background: $text-tab-bg-color; border-bottom: 1px solid $border-color; a { @@ -131,10 +151,10 @@ &::before, &:after { border: none } - &:focus { background: $text-tab-indicator-background-focus-color } + &:focus { background: $text-tab-indicator-bg-focus-color } } - &:hover { background: $text-tab-indicator-background-hover-color } + &:hover { background: $text-tab-indicator-bg-hover-color } } } } @@ -150,4 +170,8 @@ color: $ui-text-color; small { color: $secondary-text-color } +} + +.account-gallery { + &__item { border-radius: 0 } } \ No newline at end of file diff --git a/app/javascript/styles/material-black/theme/base_config.scss b/app/javascript/styles/material-black/theme/base_config.scss index 73ff009e1..13fb4ad75 100644 --- a/app/javascript/styles/material-black/theme/base_config.scss +++ b/app/javascript/styles/material-black/theme/base_config.scss @@ -18,10 +18,7 @@ // Search bar hover settings // You can enable/disable search bar floating. -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ +$search-bar-hover: false; // Status font size in timeline @@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default // Name font size in timeline status $name-font-size: 15px; // mastodon default -//$name-font-size: 16px; // compatible with material design \ No newline at end of file +//$name-font-size: 16px; // compatible with material design + + +// Background image +// If you want to use the local image, please put it in /mastodon-material +$bg-image: none; +//$bg-image: "./image.png"; +//$bg-image: "https://example.com/img/image.png"; + + +// Columns transparency settings +$bar-transparency: 1.0; // opacity +//$bar-transparency: 0.8; // semi-transparent + +$column-transparency: 1.0; // opacity +//$column-transparency: 0.8; // semi-transparent \ No newline at end of file diff --git a/app/javascript/styles/material-black/theme/basics.scss b/app/javascript/styles/material-black/theme/basics.scss index 4c122d1c6..32ba6dc8c 100644 --- a/app/javascript/styles/material-black/theme/basics.scss +++ b/app/javascript/styles/material-black/theme/basics.scss @@ -4,7 +4,9 @@ @import '../custom_color', '../custom_layout'; -body { background: $background-color } +body { background: $bg-color } + +.focusable:focus { background: transparent } // Chrome & Safari scroll bar ::-webkit-scrollbar-thumb { @@ -21,6 +23,4 @@ body { background: $background-color } } // Firefox scroll bar -html { - scrollbar-color: $scroll-bar-thumb-color transparent; -} \ No newline at end of file +html { scrollbar-color: $scroll-bar-thumb-color transparent } \ No newline at end of file diff --git a/app/javascript/styles/material-black/theme/button.scss b/app/javascript/styles/material-black/theme/button.scss index 1231bac98..7c2ad7937 100644 --- a/app/javascript/styles/material-black/theme/button.scss +++ b/app/javascript/styles/material-black/theme/button.scss @@ -4,6 +4,8 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +@include button-shadow; + .icon-button { color: $icon-button-color; border-radius: 50%; @@ -21,37 +23,54 @@ &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } } &.overlayed { border-radius: 50%; - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; &:hover { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-hover-color; } } &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } - &:active, - &:focus { background-color: transparent } + &:focus { transition: none } +} + +// Checkbox with label +label.icon-button { + &.active { + color: $ui-text-color; + background-color: transparent; + } + + &:hover { + @include material-transition; + background-color: transparent; + } } .text-icon-button { color: $icon-button-color; border-radius: 50%; - font-size: 12px; + font-size: 14px; + + &.active { + background-color: $icon-bg-hover-color; + color: $icon-button-active-color; + } &:hover { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; color: $icon-button-hover-color; } } @@ -91,7 +110,7 @@ } .spoiler-button__overlay__label { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; color: $media-icon-color; } \ No newline at end of file diff --git a/app/javascript/styles/material-black/theme/columns.scss b/app/javascript/styles/material-black/theme/columns.scss index 54effffd3..af7776a0c 100644 --- a/app/javascript/styles/material-black/theme/columns.scss +++ b/app/javascript/styles/material-black/theme/columns.scss @@ -10,7 +10,10 @@ margin: 10px 8px; border-radius: $card-radius; - &>.scrollable { background: $list-background-color } + &>.scrollable { + background: $list-bg-color; + opacity: $column-transparency; + } &:last-child { box-shadow: none } } @@ -45,22 +48,23 @@ background: $top-bar-color; color: $top-bar-icon-color; margin: 8px 10px; - padding: 10px 12px; + padding: 10px; border-radius: 50%; + font-size: 20px; &.active { color: $top-bar-icon-active-color; - background: $icon-background-active-color; + background: $icon-bg-active-color; &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } @@ -93,6 +97,7 @@ &__wrapper { @include shadow-4dp; border-radius: $bar-radius; + opacity: $bar-transparency; .announcements { border-top: 1px solid $border-color } @@ -105,11 +110,11 @@ &__collapsible { color: $ui-text-color; - background: $card-background-color; + background: $card-bg-color; border-top: 1px solid $border-color; &-inner { - background: $card-background-color; + background: $card-bg-color; padding: 16px; } @@ -119,9 +124,9 @@ &__back-button { background: $top-bar-color; color: $top-bar-icon-color; - padding: 8px; - margin: auto 0; - border-radius: 50%; + margin: 8px 10px; + padding: 10px; + font-size: 20px; span { display: none } } @@ -129,21 +134,21 @@ .column-subheading { color: $section-text-color; - background: $background-color; + background: $bg-color; padding: 12px 16px; border-top: 1px solid $border-color; } .column-link { color: $ui-text-color; - background: $background-color; + background: $bg-color; padding: 16px; border-radius: $nav-drawer-item-radius; - &:hover { background: $list-background-hover-color } + &:hover { background: $list-bg-hover-color } &:active, - &:focus { background: $list-background-active-color } + &:focus { background: $list-bg-active-color } &__icon { margin-right: 32px; @@ -153,9 +158,9 @@ &--transparent { &.active { color: $ui-text-color; - background: $menu-background-active-color; + background: $menu-bg-active-color; - &:hover { background: $menu-background-active-hover-color } + &:hover { background: $menu-bg-active-hover-color } .fa { color: $icon-color } } @@ -191,14 +196,19 @@ .column-inline-form { padding: 16px 0 16px 16px; - background: $card-background-color; + background: $card-bg-color; .icon-button { margin: 0 16px } } +.columns-area { + background-image: url($bg-image); + background-size: contain; +} + .setting-text { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border-radius: $bar-radius; &::placeholder { color: $tips-text-color } @@ -206,17 +216,17 @@ .empty-column-indicator { color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; font-size: 16px; } .conversation { border-bottom: 1px solid $border-color; padding: 12px; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; &--unread { - background: $list-background-color; + background: $list-bg-color; .conversation__content__relative-time { color: $info-text-color } } @@ -275,15 +285,16 @@ color: $icon-color; padding: 16px; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } } .getting-started { - background: $background-color; + background: $bg-color; color: $ui-text-color; + opacity: $column-transparency; &__wrapper { - background: $background-color; + background: $bg-color; height: auto !important; border-bottom: 1px solid $border-color; } @@ -303,8 +314,9 @@ } &__trends { - background: $background-color; + background: $bg-color; margin-bottom: 0; + opacity: $column-transparency; h4 { color: $section-text-color; @@ -358,7 +370,7 @@ } .announcements { - background: $card-background-color; + background: $card-bg-color; padding: 0; &__container { color: $primary-text-color } @@ -386,6 +398,8 @@ .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important } +@include outlined-chip; + .reactions-bar { .emoji-button { color: $icon-button-color; @@ -424,12 +438,13 @@ .notification { &__filter-bar { - background: $tab-background-color; + background: $tab-bg-color; border-bottom: 1px solid $border-color; z-index: 1; + opacity: $bar-transparency; button { - background: $tab-background-color; + background: $tab-bg-color; color: $tab-indicator-color; font-size: 16px; @@ -442,10 +457,10 @@ &::before, &:after { border: none } - &:focus { background: $tab-indicator-background-focus-color } + &:focus { background: $tab-indicator-bg-focus-color } } - &:hover { background: $tab-indicator-background-hover-color } + &:hover { background: $tab-indicator-bg-hover-color } } } diff --git a/app/javascript/styles/material-black/theme/components.scss b/app/javascript/styles/material-black/theme/components.scss index ae5bfe158..46483923e 100644 --- a/app/javascript/styles/material-black/theme/components.scss +++ b/app/javascript/styles/material-black/theme/components.scss @@ -4,6 +4,7 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } .drawer { &__header { @@ -11,11 +12,12 @@ background: $top-bar-color; border-radius: $nav-bar-radius; justify-content: space-around; + opacity: $bar-transparency; a { transition: none } a:hover { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; } } @@ -40,14 +42,15 @@ } &__inner { - background: $card-background-color; + background: $card-bg-color; + opacity: $column-transparency; &.darker { - background: $card-background-color; + background: $card-bg-color; position: inherit; } - &__mastodon { background: $card-background-color } + &__mastodon { background: $card-bg-color } } } @@ -57,6 +60,7 @@ color: $tips-text-color; border-radius: $search-bar-radius; padding: 12px 12px 12px 40px; + opacity: $bar-transparency; &:focus { @include shadow-2dp; @@ -64,6 +68,8 @@ color: $search-bar-text-color; } + &:hover { @include search-bar-hover } + &::placeholder { color: $tips-text-color } } @@ -112,7 +118,7 @@ .search-results { &__header { color: $secondary-text-color; - background-color: $card-background-color; + background-color: $card-bg-color; padding: 16px; .fa { margin-right: 8px } @@ -120,7 +126,7 @@ &__section { h5 { - background: $card-background-color; + background: $card-bg-color; border-bottom: 1px solid $border-color; padding: 16px; color: $section-text-color; @@ -137,6 +143,12 @@ strong { color: $ui-text-color; } + + .navigation-bar__actions .compose__action-bar .icon-button { + width: 36px !important; + height: 36px !important; + padding: 8px; + } } .navigation-panel hr { @@ -146,7 +158,7 @@ .dropdown-menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; padding: 8px 0; border-radius: $menu-radius; @@ -155,11 +167,11 @@ &__item a { font-size: 14px; padding: 8px 16px; - background: $menu-background-color; + background: $menu-bg-color; color: $menu-text-color; &:hover, &:active { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $menu-text-color; } } @@ -173,7 +185,7 @@ .compose-form { .autosuggest-textarea { &__textarea { - background: $text-field-background-color; + background: $text-field-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -182,7 +194,7 @@ &__suggestions { @include shadow-1dp; - background: $menu-background-color; + background: $menu-bg-color; color: $ui-text-color; border-radius: $card-radius; font-size: 16px; @@ -192,40 +204,76 @@ padding: 8px; border-radius: 0; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } &.selected, &:focus, - &:active { background: $menu-background-active-color } + &:active { background: $menu-bg-active-color } } } } - .spoiler-input__input { - color: $ui-text-color; - background: $card-background-color; + .spoiler-input { + &.spoiler-input--visible { margin-bottom: 8px } - &::placeholder { color: $tips-text-color } + &__input { + color: $ui-text-color; + background: $card-bg-color; + border-bottom: 1px solid $border-color; + border-radius: 0; + + &::placeholder { color: $tips-text-color } + } } .compose-form { &__warning { - @include shadow-1dp; color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; padding: 16px; + border: 1px solid $border-color; + border-radius: $card-radius; a { color: $link-text-color } } &__modifiers { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + + .compose-form { + &__upload-thumbnail { border-radius: 0 } + + &__upload__actions { + @include material-transition; + + .icon-button { + color: $media-icon-color; + font-size: 16px; + + &:hover { background-color: transparent } + } + } + } } &__buttons-wrapper { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + padding: 8px; + + .icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + } + + .text-icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + line-height: 20px !important; + } } &__poll-wrapper { @@ -235,7 +283,7 @@ select { color: $ui-text-color; - background-color: $background-color; + background-color: $bg-color; border: 0; &:focus { border-color: $border-active-color } @@ -251,20 +299,16 @@ &:active { background-color: $outlined-button-active-color } &:focus { background-color: $outlined-button-color } - - } - } - &__utilBtns { padding-top: 0 } + .poll__footer { border-top: none } + } &__publish .compose-form__publish-button-wrapper { box-shadow: none } } } -.no-reduce-motion .spoiler-input { - transition-duration: .2s, .2s; -} +.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s } .poll { @@ -283,7 +327,7 @@ &__text input[type=text] { color: $ui-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: 1px solid $border-color; padding: 8px 12px; @@ -292,7 +336,7 @@ &__option input[type=text] { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: none; border-radius: 2px; padding: 8px 16px; @@ -300,9 +344,9 @@ &__chart { border-radius: 0; - background: $poll-bar-color; + background: $progress-indicator-track-color; - &.leading { background: $poll-bar-leading-color } + &.leading { background: $progress-indicator-color } } &__footer { @@ -316,7 +360,7 @@ .privacy-dropdown { &.active .privacy-dropdown__value.active { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; box-shadow: none; @@ -325,7 +369,7 @@ &__dropdown { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $dialog-radius; } @@ -345,7 +389,7 @@ } &.active { - background: $menu-background-active-color; + background: $menu-bg-active-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -355,7 +399,7 @@ } &:hover { - background: $menu-background-active-color; + background: $menu-bg-active-color; .privacy-dropdown__option__content { color: $secondary-text-color; @@ -366,7 +410,7 @@ } &:hover { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -386,7 +430,7 @@ box-shadow: none; border: 1px solid $border-color; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__header { margin-bottom: 4px } @@ -410,14 +454,15 @@ } .block-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; &__container { padding: 24px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } @@ -451,7 +496,7 @@ } .filter-form { - background: $background-color; + background: $bg-color; color: $ui-text-color; &__column { padding: 8px 16px } @@ -466,18 +511,23 @@ &__img { border-radius: $card-radius $card-radius 0 0 } &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px 16px; .display-name { margin-left: 16px; + strong { + font-size: 16px; + color: $primary-text-color; + } + span { color: $secondary-text-color } } } &__extra { - background: $card-background-color; + background: $card-bg-color; border-radius: 0 0 $card-radius $card-radius; .account__header__content { @@ -491,7 +541,8 @@ } .mute-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -500,13 +551,14 @@ &__explanation { margin-top: 16px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } &__cancel-button { box-shadow: none !important; + color: $text-button-color; background: transparent; margin: 0 8px; @@ -531,4 +583,19 @@ margin: 0 0 0 12px; } } +} + +.upload-progress { + color: $ui-text-color; + + &__backdrop { + border-radius: 0; + background: $progress-indicator-track-color; + margin-top: 6px; + } + + &__tracker { + border-radius: 0; + background: $progress-indicator-color; + } } \ No newline at end of file diff --git a/app/javascript/styles/material-black/theme/emoji-picker.scss b/app/javascript/styles/material-black/theme/emoji-picker.scss index 70e22752d..1b42121be 100644 --- a/app/javascript/styles/material-black/theme/emoji-picker.scss +++ b/app/javascript/styles/material-black/theme/emoji-picker.scss @@ -7,13 +7,13 @@ .emoji-picker-dropdown { &__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; } &__modifiers__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; button { @@ -31,33 +31,23 @@ border: 0 solid $border-color; &:first-child { - background: $menu-background-color; + background: $menu-bg-color; } } - &-anchors { - color: $icon-button-color; - padding: 0; - } - &-anchor { + color: $text-tab-indicator-color; padding: 10px 4px; - &-selected { - color: $icon-button-active-color; - } + &-bar { background-color: $icon-tab-indicator-active-color } - &-bar { - background-color: $tab-indicator-active-color; - } + &-selected { color: $icon-tab-indicator-hover-color } - &:hover { - color: $icon-button-hover-color; - } + &:hover { color: $icon-tab-indicator-hover-color } } &-search { - background: $menu-background-color; + background: $menu-bg-color; input { outline: none; @@ -76,16 +66,16 @@ &-scroll { padding: 0 8px 8px; - background: $menu-background-color; + background: $menu-bg-color; } &-category-label span { padding: 4px 6px; - background: $menu-background-color; + background: $menu-bg-color; } &-emoji:hover::before { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } &-no-results { color: $secondary-text-color } diff --git a/app/javascript/styles/material-black/theme/icons.scss b/app/javascript/styles/material-black/theme/icons.scss index 1367647ec..987767544 100644 --- a/app/javascript/styles/material-black/theme/icons.scss +++ b/app/javascript/styles/material-black/theme/icons.scss @@ -16,26 +16,8 @@ &__icon.fa-fw { color: $icon-color } } - -.fa { vertical-align: sub } // adjust material icon font baseline to other font - -.fa.fa-times, -.fa.fa-eraser, -.fa.fa-plus { vertical-align: middle } // adjustment exception - -.fa.fa-check { vertical-align: initial } - .fa.fa-lock { text-transform: none } -.fa-fw { width: 16px } - -// icon in tab settings -.fa.fa-chevron-left.column-back-button__icon.fa-fw, -.text-btn.column-header__setting-btn .fa.fa-eraser { - font-size: 20px; - margin-right: 16px; -} - .icon-with-badge__badge { background: $badge-color; border: none; diff --git a/app/javascript/styles/material-black/theme/material-icons.scss b/app/javascript/styles/material-black/theme/material-icons.scss index 747856253..f27de96e8 100644 --- a/app/javascript/styles/material-black/theme/material-icons.scss +++ b/app/javascript/styles/material-black/theme/material-icons.scss @@ -3,8 +3,17 @@ @import '../custom_config', '../icon_config'; @import '../custom_color', '../custom_layout'; @import 'functions'; +@import 'mixins'; +@include icon-font; + +.fa-fw { + width: 20px; + height: 20px; + font-size: 20px; +} + .fa { &.fa-bars, &.fa-navicon, @@ -64,8 +73,19 @@ &.fa-compress, &.fa-user-times, &.fa-check, - &.fa-quote-right { - font-family: "Material Icons"; + &.fa-quote-right, + &.fa-upload, + &.fa-comments { + @include icon-font-style; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; } } @@ -118,9 +138,11 @@ &.fa-download::before { content: "file_download" } &.fa-arrows-alt::before { content: "fullscreen" } &.fa-compress::before { content: "fullscreen_exit" } - &.fa-user-times::before { content: "delete" } + &.fa-user-times::before { content: "person_remove" } &.fa-check::before { content: "check" } &.fa-quote-right::before { content: "format_quote" } + &.fa-upload::before { content: "file_upload" } + &.fa-comments::before { content: "forum" } } // bookmark icon @@ -148,12 +170,42 @@ .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color } // boost icon -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet, +button.icon-button i.fa-retweet:hover { height: 18px; width: 18px; transition: none; background-image: url('data:image/svg+xml;utf8,'); } +button.icon-button.disabled i.fa-retweet, +button.icon-button.disabled i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); +} + // dropdown icon -.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} + +// icon in tab settings +.text-btn.column-header__setting-btn { + .fa { + vertical-align: middle; + + &.fa-eraser { margin-right: 8px } // clear notification + } +} + +// top bar icons align +.fa.fa-bell.column-header__icon.fa-fw, +.fa.fa-home.column-header__icon.fa-fw, +.fa.fa-users.column-header__icon.fa-fw, +.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom } + +// uploaded media icons align +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa { + font-size: 20px; + vertical-align: text-bottom; +} + +// search results icons align +.search-results__header .fa { vertical-align: text-bottom } \ No newline at end of file diff --git a/app/javascript/styles/material-black/theme/media.scss b/app/javascript/styles/material-black/theme/media.scss index 9d0203828..0b8b92acf 100644 --- a/app/javascript/styles/material-black/theme/media.scss +++ b/app/javascript/styles/material-black/theme/media.scss @@ -6,9 +6,9 @@ .media-gallery { - border-radius: 0; + border-radius: $media-radius; - &__item { border-radius: 0 } + &__item { border-radius: $media-radius } } .media-modal__close { @@ -24,7 +24,7 @@ border: 12px; &:hover { - background: $media-icon-background-hover-color; + background: $media-icon-bg-hover-color; color: $media-icon-hover-color; } @@ -34,7 +34,7 @@ .media-modal { &__nav { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; height: 48px; width: 48px; @@ -50,6 +50,12 @@ &--active { background-color: $media-page-indicator-active-color } } + + &__meta { + bottom: 24px; + + a { color: $media-icon-color } + } } .video-player { @@ -75,7 +81,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } @@ -93,7 +99,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } diff --git a/app/javascript/styles/material-black/theme/modal.scss b/app/javascript/styles/material-black/theme/modal.scss index 2748c8723..209678c84 100644 --- a/app/javascript/styles/material-black/theme/modal.scss +++ b/app/javascript/styles/material-black/theme/modal.scss @@ -6,7 +6,8 @@ .confirmation-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $dialog-radius; width: 300px; @@ -18,7 +19,7 @@ &__action-bar { justify-content: flex-end; - background: $card-background-color; + background: $card-bg-color; padding: 8px; } @@ -42,7 +43,7 @@ } .actions-modal { - background: $card-background-color; + background: $card-bg-color; border-radius: $card-radius; ul li:not(:empty) a { @@ -50,7 +51,7 @@ font-size: 16px; &:hover { - background: $card-background-hover-color; + background: $card-bg-hover-color; color: $ui-text-color; } } @@ -58,7 +59,7 @@ .dropdown-menu__separator { border-bottom-color: $border-color } .status { - background: $card-background-color; + background: $card-bg-color; border-bottom-color: $border-color; padding-top: 12px; padding-bottom: 12px; @@ -71,7 +72,8 @@ } .report-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; diff --git a/app/javascript/styles/material-black/theme/responsive.scss b/app/javascript/styles/material-black/theme/responsive.scss index 9ae304041..d0e1a6635 100644 --- a/app/javascript/styles/material-black/theme/responsive.scss +++ b/app/javascript/styles/material-black/theme/responsive.scss @@ -81,14 +81,14 @@ @media screen and (min-width: 631px) { .tabs-bar__link { &:hover { - background: $tab-indicator-background-hover-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-hover-color; + border-bottom-color: $tab-bg-color; } &:active, &:focus { - background: $tab-indicator-background-focus-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-focus-color; + border-bottom-color: $tab-bg-color; } } } \ No newline at end of file diff --git a/app/javascript/styles/material-black/theme/statuses.scss b/app/javascript/styles/material-black/theme/statuses.scss index eedf77c2a..d095c2292 100644 --- a/app/javascript/styles/material-black/theme/statuses.scss +++ b/app/javascript/styles/material-black/theme/statuses.scss @@ -86,12 +86,15 @@ background: transparent; border-bottom-color: $border-color; } + + &__visibility-icon { color: $icon-color } } .status-card { color: $icon-color; border-color: $border-color; outline: none; + margin-top: 16px; &__image { background: transparent; @@ -110,7 +113,7 @@ &__actions { &>div { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; } @@ -136,7 +139,19 @@ &:hover { background-color: transparent !important } } - &:hover { background-color: $card-background-color } + &.horizontal { + border-radius: 0; + + .status-card { + &__image-preview { border-radius: 0 } + + &__image-image { border-radius: 0 } + } + } +} + +a.status-card { + &:hover { background-color: $card-bg-color } } // Detailed status in mobile @@ -152,7 +167,7 @@ } .detailed-status { - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__display-name { @@ -167,7 +182,7 @@ } &__action-bar { - background: $card-background-color; + background: $card-bg-color; border-top: none; border-bottom: 1px solid $border-color; padding: 12px 0; diff --git a/app/javascript/styles/material-dark.scss b/app/javascript/styles/material-dark.scss index 8cfd6c6be..ee4230ba9 100644 --- a/app/javascript/styles/material-dark.scss +++ b/app/javascript/styles/material-dark.scss @@ -1,2 +1,9 @@ +/* +* Mastodon Material 0.2.0 +* Author: Rintan, Genbu Project +* Copyright (C) 2020 Rintan, Genbu Project +*/ + + @import 'application'; @import 'material-dark/loader'; \ No newline at end of file diff --git a/app/javascript/styles/material-dark/color/black.scss b/app/javascript/styles/material-dark/color/black.scss index b299981b0..6aa7ebfdb 100644 --- a/app/javascript/styles/material-dark/color/black.scss +++ b/app/javascript/styles/material-dark/color/black.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #000000; -$menu-background-color: #121212; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #121212; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #000000; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #000000; +$menu-bg-color: #121212; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #121212; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #000000; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #1e1e1e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #1e1e1e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #121212; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #121212; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-dark/color/mastodon-dark.scss b/app/javascript/styles/material-dark/color/mastodon-dark.scss index c3c168316..4ed9a7e07 100644 --- a/app/javascript/styles/material-dark/color/mastodon-dark.scss +++ b/app/javascript/styles/material-dark/color/mastodon-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #191b22; -$menu-background-color: #d9e1e8; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #313543; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #282c37; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #191b22; +$menu-bg-color: #d9e1e8; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #313543; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #282c37; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #42485a; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #9baec8; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: lighten($background-color, 14%); -$icon-background-active-color: lighten($background-color, 18%); +$icon-bg-hover-color: lighten($bg-color, 14%); +$icon-bg-active-color: lighten($bg-color, 18%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #fff; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,9 +99,9 @@ $border-color: #393f4f; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 16%); -$scroll-bar-thumb-hover-color: lighten($background-color, 26%); -$scroll-bar-thumb-active-color: lighten($background-color, 32%); +$scroll-bar-thumb-color: lighten($bg-color, 16%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 26%); +$scroll-bar-thumb-active-color: lighten($bg-color, 32%); // App bar color $top-bar-color: #313543; @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: #d9e1e8; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #1f232b; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #1f232b; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-dark/color/mastodon-light.scss b/app/javascript/styles/material-dark/color/mastodon-light.scss index 54d894fec..d4d84a626 100644 --- a/app/javascript/styles/material-dark/color/mastodon-light.scss +++ b/app/javascript/styles/material-dark/color/mastodon-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #eff3f5; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($background-color, 6%); -$menu-background-active-color: darken($background-color, 10%); -$menu-background-active-hover-color: darken($background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #eff3f5; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($bg-color, 6%); +$menu-bg-active-color: darken($bg-color, 10%); +$menu-bg-active-hover-color: darken($bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -55,8 +56,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #282c37; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: darken($background-color, 4%); -$icon-background-active-color: darken($background-color, 8%); +$icon-bg-hover-color: darken($bg-color, 4%); +$icon-bg-active-color: darken($bg-color, 8%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #ffffff; $search-bar-color: #d9e1e8; -$search-bar-focus-color: $background-color; +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: #282c37; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #e6ebf0; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #e6ebf0; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-dark/color/plus-classic.scss b/app/javascript/styles/material-dark/color/plus-classic.scss index 60c8370a2..eba9c0f18 100644 --- a/app/javascript/styles/material-dark/color/plus-classic.scss +++ b/app/javascript/styles/material-dark/color/plus-classic.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #db4437; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-dark/color/v1-dark.scss b/app/javascript/styles/material-dark/color/v1-dark.scss index 77cef824f..d925f3d65 100644 --- a/app/javascript/styles/material-dark/color/v1-dark.scss +++ b/app/javascript/styles/material-dark/color/v1-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #303030; -$menu-background-color: #424242; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #424242; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #424242; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #303030; +$menu-bg-color: #424242; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #424242; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #424242; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%); $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); -$scroll-bar-thumb-hover-color: lighten($background-color, 30%); -$scroll-bar-thumb-active-color: lighten($background-color, 38%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 30%); +$scroll-bar-thumb-active-color: lighten($bg-color, 38%); // App bar color $top-bar-color: #1565C0; -$search-bar-color: lighten($background-color, 6%); +$search-bar-color: lighten($bg-color, 6%); $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #424242; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #424242; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-dark/color/v1-light.scss b/app/javascript/styles/material-dark/color/v1-light.scss index 64f8d5842..906b8e459 100644 --- a/app/javascript/styles/material-dark/color/v1-light.scss +++ b/app/javascript/styles/material-dark/color/v1-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); @@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $top-bar-unread-icon-color: darken($primary-color, 30%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #2196f3; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-dark/color/v2-dark.scss b/app/javascript/styles/material-dark/color/v2-dark.scss index 8c575bce5..94c381ee7 100644 --- a/app/javascript/styles/material-dark/color/v2-dark.scss +++ b/app/javascript/styles/material-dark/color/v2-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #121212; -$menu-background-color: #1e1e1e; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #1e1e1e; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #1e1e1e; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #121212; +$menu-bg-color: #1e1e1e; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #1e1e1e; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #1e1e1e; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #1e1e1e; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #1e1e1e; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-dark/color/v2-light.scss b/app/javascript/styles/material-dark/color/v2-light.scss index 20336e96d..9317004e9 100644 --- a/app/javascript/styles/material-dark/color/v2-light.scss +++ b/app/javascript/styles/material-dark/color/v2-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #ffffff; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: $background-color; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: $background-color; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #ffffff; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: $bg-color; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: $bg-color; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); -$scroll-bar-thumb-hover-color: darken($background-color, 30%); -$scroll-bar-thumb-active-color: darken($background-color, 38%); +$scroll-bar-thumb-color: darken($bg-color, 20%); +$scroll-bar-thumb-hover-color: darken($bg-color, 30%); +$scroll-bar-thumb-active-color: darken($bg-color, 38%); // App bar color -$top-bar-color: $background-color; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$top-bar-color: $bg-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-dark/icon_config.scss b/app/javascript/styles/material-dark/icon_config.scss index 610c7e308..99046e176 100644 --- a/app/javascript/styles/material-dark/icon_config.scss +++ b/app/javascript/styles/material-dark/icon_config.scss @@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star $favorite-icon-color: #ffd600; // Star //$favorite-icon-color: #ff4081; // Heart //$favorite-icon-color: #db4437; // +1 -//$favorite-icon-color: #ffffff; // inverted +1 +//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin) // Reply icon settings @@ -16,11 +16,13 @@ $reply-icon: "reply"; // Material Design Icon settings // If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below. -@font-face { - font-family: "Material Icons"; - src: - local("Material Icons"), - //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub - //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts - url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting -} \ No newline at end of file +//$icon-font-source: google; // Google Fonts +//$icon-font-source: github; // GitHub +$icon-font-source: self; // Self-hosting + +// Material Icon style settings +$icon-font-style: filled; +//$icon-font-style: outlined; +//$icon-font-style: round; +//$icon-font-style: sharp; +//$icon-font-style: two-tone; \ No newline at end of file diff --git a/app/javascript/styles/material-dark/layout/material-v1.scss b/app/javascript/styles/material-dark/layout/material-v1.scss index 825deaf8c..926c3325a 100644 --- a/app/javascript/styles/material-dark/layout/material-v1.scss +++ b/app/javascript/styles/material-dark/layout/material-v1.scss @@ -30,6 +30,10 @@ $dialog-radius: 2px; $menu-radius: 2px; +// Media radius settings +$media-radius: 0; + + // Navigation drawer item settings $nav-drawer-item-radius: 0; @@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping //$avater-radius: 2px // Material v1 square +// Chip settings +$outlined-chip: false; // Material v1 styled contained chip + + // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/material-dark/layout/material-v2.scss b/app/javascript/styles/material-dark/layout/material-v2.scss index 853d82b15..f79f91005 100644 --- a/app/javascript/styles/material-dark/layout/material-v2.scss +++ b/app/javascript/styles/material-dark/layout/material-v2.scss @@ -4,10 +4,12 @@ // Navigation bar radius $nav-bar-radius: 8px; +//$nav-bar-radius: 28px; // full radius // Search bar radius $search-bar-radius: 8px; +//$search-bar-radius: 21px; // full rounded // Bar radius settings @@ -31,6 +33,11 @@ $dialog-radius: 8px; $menu-radius: 8px; +// Media radius settings +$media-radius: 0; +//$media-radius: 2px; + + // Navigation drawer item settings $nav-drawer-item-radius: 8px; // corner rounded //$nav-drawer-item-radius: 32px; // full rounded @@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping // Chip settings -// If you want to use contained-chip, please comment out below. -.reactions-bar__item { - background: $outlined-chip-color !important; - border: 1px solid $border-color !important; - - &.active { background-color: $outlined-chip-selected-color !important } - - &:hover { background: $outlined-chip-hover-color !important } -} +$outlined-chip: true; // Material v2 styled outlined chip +//$outlined-chip: false; // Material v1 styled contained chip // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: false; // Material v2 styled colored button without shadow +//$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/material-dark/plugins/cards.scss b/app/javascript/styles/material-dark/plugins/cards.scss index c134cbeeb..d9b3906a5 100644 --- a/app/javascript/styles/material-dark/plugins/cards.scss +++ b/app/javascript/styles/material-dark/plugins/cards.scss @@ -10,13 +10,13 @@ margin: 2px 0 !important; padding: 8px !important; - > .scrollable { background: $background-color } + > .scrollable { background: $bg-color } } .status { border-bottom: 0; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; &__prepend { padding: 8px 8px 2px 0 } } @@ -28,7 +28,7 @@ @include shadow-1dp; margin: 8px 2px; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; } .notification .status__wrapper.status__wrapper { box-shadow: none !important } diff --git a/app/javascript/styles/material-dark/plugins/plus.scss b/app/javascript/styles/material-dark/plugins/plus.scss index 5b220631b..86a5f3e1e 100644 --- a/app/javascript/styles/material-dark/plugins/plus.scss +++ b/app/javascript/styles/material-dark/plugins/plus.scss @@ -14,9 +14,8 @@ // favorite icon .star-icon.active, -.star-icon.icon-button.active.active, -.notification__favourite-icon-wrapper .star-icon, -.status__action-bar-button.star-icon.icon-button.active { background: #db4437 } +.star-icon.icon-button.active.activate, +.notification__favourite-icon-wrapper .star-icon { background: #db4437 } .notification__favourite-icon-wrapper { left: -34px; diff --git a/app/javascript/styles/material-dark/theme/_mixins.scss b/app/javascript/styles/material-dark/theme/_mixins.scss index 5f573e339..fc965880f 100644 --- a/app/javascript/styles/material-dark/theme/_mixins.scss +++ b/app/javascript/styles/material-dark/theme/_mixins.scss @@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12); @mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 } @mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 } @mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 } +@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 } +@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 } +@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 } +@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 } +@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 } +@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 } +@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 } +@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 } @mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2} + +@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } + +@mixin search-bar-hover { + @if $search-bar-hover { + @include shadow-2dp; + background: $search-bar-focus-color; + } +} + +@mixin outlined-chip { + @if $outlined-chip { + .reactions-bar__item { + background: $outlined-chip-color !important; + border: 1px solid $border-color !important; + + &.active { background-color: $outlined-chip-selected-color !important } + + &:hover { background: $outlined-chip-hover-color !important } + } + } +} + +@mixin button-shadow { + @if $button-shadow { + .button, + .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } + } +} + +@mixin icon-font-style { + @if $icon-font-style == filled { font-family: "Material Icons" } + @if $icon-font-style == outlined { font-family: "Material Icons Outlined" } + @if $icon-font-style == round { font-family: "Material Icons Round" } + @if $icon-font-style == sharp { font-family: "Material Icons Sharp" } + @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" } +} + +@mixin icon-font { + @if $icon-font-source == github { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } + + @if $icon-font-source == google { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2'); + } + } + } + + @if $icon-font-source == self { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url(".../fonts/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons"), + url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/material-dark/theme/account.scss b/app/javascript/styles/material-dark/theme/account.scss index 34a8a1816..b6d517e12 100644 --- a/app/javascript/styles/material-dark/theme/account.scss +++ b/app/javascript/styles/material-dark/theme/account.scss @@ -7,8 +7,8 @@ .account { border-bottom: 1px solid $border-color; - .account__display-name { color: $primary-text-color } - .account__display-name strong { color: $secondary-text-color } + .account__display-name, + .account__display-name strong { color: $primary-text-color } &__avatar { border-radius: $avater-radius; @@ -29,9 +29,9 @@ &__header { &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; - border-bottom: 1px solid $border-color; + border-bottom: none; .avatar .account__avatar { border: none } } @@ -89,7 +89,7 @@ .verified { border: none; - background: $verified-background-color; + background: $verified-bg-color; a, &__mark { color: $primary-text-color } @@ -105,7 +105,7 @@ dt { color: $primary-text-color; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; } dd { color: $primary-text-color } @@ -113,11 +113,31 @@ } } + &__account-note { + padding: 8px 16px; + border-bottom: 1px solid $border-color; + + label { + color: $ui-text-color; + margin-bottom: 8px; + } + + textarea { + color: $primary-text-color; + padding: 8px 16px; + border-radius: 0; + + &:focus { background: transparent } + + &::placeholder { color: $tips-text-color } + } + } + &__content { color: $secondary-text-color } } &__section-headline { - background: $text-tab-background-color; + background: $text-tab-bg-color; border-bottom: 1px solid $border-color; a { @@ -131,10 +151,10 @@ &::before, &:after { border: none } - &:focus { background: $text-tab-indicator-background-focus-color } + &:focus { background: $text-tab-indicator-bg-focus-color } } - &:hover { background: $text-tab-indicator-background-hover-color } + &:hover { background: $text-tab-indicator-bg-hover-color } } } } @@ -150,4 +170,8 @@ color: $ui-text-color; small { color: $secondary-text-color } +} + +.account-gallery { + &__item { border-radius: 0 } } \ No newline at end of file diff --git a/app/javascript/styles/material-dark/theme/base_config.scss b/app/javascript/styles/material-dark/theme/base_config.scss index 73ff009e1..13fb4ad75 100644 --- a/app/javascript/styles/material-dark/theme/base_config.scss +++ b/app/javascript/styles/material-dark/theme/base_config.scss @@ -18,10 +18,7 @@ // Search bar hover settings // You can enable/disable search bar floating. -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ +$search-bar-hover: false; // Status font size in timeline @@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default // Name font size in timeline status $name-font-size: 15px; // mastodon default -//$name-font-size: 16px; // compatible with material design \ No newline at end of file +//$name-font-size: 16px; // compatible with material design + + +// Background image +// If you want to use the local image, please put it in /mastodon-material +$bg-image: none; +//$bg-image: "./image.png"; +//$bg-image: "https://example.com/img/image.png"; + + +// Columns transparency settings +$bar-transparency: 1.0; // opacity +//$bar-transparency: 0.8; // semi-transparent + +$column-transparency: 1.0; // opacity +//$column-transparency: 0.8; // semi-transparent \ No newline at end of file diff --git a/app/javascript/styles/material-dark/theme/basics.scss b/app/javascript/styles/material-dark/theme/basics.scss index 4c122d1c6..32ba6dc8c 100644 --- a/app/javascript/styles/material-dark/theme/basics.scss +++ b/app/javascript/styles/material-dark/theme/basics.scss @@ -4,7 +4,9 @@ @import '../custom_color', '../custom_layout'; -body { background: $background-color } +body { background: $bg-color } + +.focusable:focus { background: transparent } // Chrome & Safari scroll bar ::-webkit-scrollbar-thumb { @@ -21,6 +23,4 @@ body { background: $background-color } } // Firefox scroll bar -html { - scrollbar-color: $scroll-bar-thumb-color transparent; -} \ No newline at end of file +html { scrollbar-color: $scroll-bar-thumb-color transparent } \ No newline at end of file diff --git a/app/javascript/styles/material-dark/theme/button.scss b/app/javascript/styles/material-dark/theme/button.scss index 1231bac98..7c2ad7937 100644 --- a/app/javascript/styles/material-dark/theme/button.scss +++ b/app/javascript/styles/material-dark/theme/button.scss @@ -4,6 +4,8 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +@include button-shadow; + .icon-button { color: $icon-button-color; border-radius: 50%; @@ -21,37 +23,54 @@ &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } } &.overlayed { border-radius: 50%; - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; &:hover { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-hover-color; } } &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } - &:active, - &:focus { background-color: transparent } + &:focus { transition: none } +} + +// Checkbox with label +label.icon-button { + &.active { + color: $ui-text-color; + background-color: transparent; + } + + &:hover { + @include material-transition; + background-color: transparent; + } } .text-icon-button { color: $icon-button-color; border-radius: 50%; - font-size: 12px; + font-size: 14px; + + &.active { + background-color: $icon-bg-hover-color; + color: $icon-button-active-color; + } &:hover { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; color: $icon-button-hover-color; } } @@ -91,7 +110,7 @@ } .spoiler-button__overlay__label { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; color: $media-icon-color; } \ No newline at end of file diff --git a/app/javascript/styles/material-dark/theme/columns.scss b/app/javascript/styles/material-dark/theme/columns.scss index 54effffd3..af7776a0c 100644 --- a/app/javascript/styles/material-dark/theme/columns.scss +++ b/app/javascript/styles/material-dark/theme/columns.scss @@ -10,7 +10,10 @@ margin: 10px 8px; border-radius: $card-radius; - &>.scrollable { background: $list-background-color } + &>.scrollable { + background: $list-bg-color; + opacity: $column-transparency; + } &:last-child { box-shadow: none } } @@ -45,22 +48,23 @@ background: $top-bar-color; color: $top-bar-icon-color; margin: 8px 10px; - padding: 10px 12px; + padding: 10px; border-radius: 50%; + font-size: 20px; &.active { color: $top-bar-icon-active-color; - background: $icon-background-active-color; + background: $icon-bg-active-color; &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } @@ -93,6 +97,7 @@ &__wrapper { @include shadow-4dp; border-radius: $bar-radius; + opacity: $bar-transparency; .announcements { border-top: 1px solid $border-color } @@ -105,11 +110,11 @@ &__collapsible { color: $ui-text-color; - background: $card-background-color; + background: $card-bg-color; border-top: 1px solid $border-color; &-inner { - background: $card-background-color; + background: $card-bg-color; padding: 16px; } @@ -119,9 +124,9 @@ &__back-button { background: $top-bar-color; color: $top-bar-icon-color; - padding: 8px; - margin: auto 0; - border-radius: 50%; + margin: 8px 10px; + padding: 10px; + font-size: 20px; span { display: none } } @@ -129,21 +134,21 @@ .column-subheading { color: $section-text-color; - background: $background-color; + background: $bg-color; padding: 12px 16px; border-top: 1px solid $border-color; } .column-link { color: $ui-text-color; - background: $background-color; + background: $bg-color; padding: 16px; border-radius: $nav-drawer-item-radius; - &:hover { background: $list-background-hover-color } + &:hover { background: $list-bg-hover-color } &:active, - &:focus { background: $list-background-active-color } + &:focus { background: $list-bg-active-color } &__icon { margin-right: 32px; @@ -153,9 +158,9 @@ &--transparent { &.active { color: $ui-text-color; - background: $menu-background-active-color; + background: $menu-bg-active-color; - &:hover { background: $menu-background-active-hover-color } + &:hover { background: $menu-bg-active-hover-color } .fa { color: $icon-color } } @@ -191,14 +196,19 @@ .column-inline-form { padding: 16px 0 16px 16px; - background: $card-background-color; + background: $card-bg-color; .icon-button { margin: 0 16px } } +.columns-area { + background-image: url($bg-image); + background-size: contain; +} + .setting-text { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border-radius: $bar-radius; &::placeholder { color: $tips-text-color } @@ -206,17 +216,17 @@ .empty-column-indicator { color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; font-size: 16px; } .conversation { border-bottom: 1px solid $border-color; padding: 12px; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; &--unread { - background: $list-background-color; + background: $list-bg-color; .conversation__content__relative-time { color: $info-text-color } } @@ -275,15 +285,16 @@ color: $icon-color; padding: 16px; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } } .getting-started { - background: $background-color; + background: $bg-color; color: $ui-text-color; + opacity: $column-transparency; &__wrapper { - background: $background-color; + background: $bg-color; height: auto !important; border-bottom: 1px solid $border-color; } @@ -303,8 +314,9 @@ } &__trends { - background: $background-color; + background: $bg-color; margin-bottom: 0; + opacity: $column-transparency; h4 { color: $section-text-color; @@ -358,7 +370,7 @@ } .announcements { - background: $card-background-color; + background: $card-bg-color; padding: 0; &__container { color: $primary-text-color } @@ -386,6 +398,8 @@ .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important } +@include outlined-chip; + .reactions-bar { .emoji-button { color: $icon-button-color; @@ -424,12 +438,13 @@ .notification { &__filter-bar { - background: $tab-background-color; + background: $tab-bg-color; border-bottom: 1px solid $border-color; z-index: 1; + opacity: $bar-transparency; button { - background: $tab-background-color; + background: $tab-bg-color; color: $tab-indicator-color; font-size: 16px; @@ -442,10 +457,10 @@ &::before, &:after { border: none } - &:focus { background: $tab-indicator-background-focus-color } + &:focus { background: $tab-indicator-bg-focus-color } } - &:hover { background: $tab-indicator-background-hover-color } + &:hover { background: $tab-indicator-bg-hover-color } } } diff --git a/app/javascript/styles/material-dark/theme/components.scss b/app/javascript/styles/material-dark/theme/components.scss index ae5bfe158..46483923e 100644 --- a/app/javascript/styles/material-dark/theme/components.scss +++ b/app/javascript/styles/material-dark/theme/components.scss @@ -4,6 +4,7 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } .drawer { &__header { @@ -11,11 +12,12 @@ background: $top-bar-color; border-radius: $nav-bar-radius; justify-content: space-around; + opacity: $bar-transparency; a { transition: none } a:hover { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; } } @@ -40,14 +42,15 @@ } &__inner { - background: $card-background-color; + background: $card-bg-color; + opacity: $column-transparency; &.darker { - background: $card-background-color; + background: $card-bg-color; position: inherit; } - &__mastodon { background: $card-background-color } + &__mastodon { background: $card-bg-color } } } @@ -57,6 +60,7 @@ color: $tips-text-color; border-radius: $search-bar-radius; padding: 12px 12px 12px 40px; + opacity: $bar-transparency; &:focus { @include shadow-2dp; @@ -64,6 +68,8 @@ color: $search-bar-text-color; } + &:hover { @include search-bar-hover } + &::placeholder { color: $tips-text-color } } @@ -112,7 +118,7 @@ .search-results { &__header { color: $secondary-text-color; - background-color: $card-background-color; + background-color: $card-bg-color; padding: 16px; .fa { margin-right: 8px } @@ -120,7 +126,7 @@ &__section { h5 { - background: $card-background-color; + background: $card-bg-color; border-bottom: 1px solid $border-color; padding: 16px; color: $section-text-color; @@ -137,6 +143,12 @@ strong { color: $ui-text-color; } + + .navigation-bar__actions .compose__action-bar .icon-button { + width: 36px !important; + height: 36px !important; + padding: 8px; + } } .navigation-panel hr { @@ -146,7 +158,7 @@ .dropdown-menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; padding: 8px 0; border-radius: $menu-radius; @@ -155,11 +167,11 @@ &__item a { font-size: 14px; padding: 8px 16px; - background: $menu-background-color; + background: $menu-bg-color; color: $menu-text-color; &:hover, &:active { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $menu-text-color; } } @@ -173,7 +185,7 @@ .compose-form { .autosuggest-textarea { &__textarea { - background: $text-field-background-color; + background: $text-field-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -182,7 +194,7 @@ &__suggestions { @include shadow-1dp; - background: $menu-background-color; + background: $menu-bg-color; color: $ui-text-color; border-radius: $card-radius; font-size: 16px; @@ -192,40 +204,76 @@ padding: 8px; border-radius: 0; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } &.selected, &:focus, - &:active { background: $menu-background-active-color } + &:active { background: $menu-bg-active-color } } } } - .spoiler-input__input { - color: $ui-text-color; - background: $card-background-color; + .spoiler-input { + &.spoiler-input--visible { margin-bottom: 8px } - &::placeholder { color: $tips-text-color } + &__input { + color: $ui-text-color; + background: $card-bg-color; + border-bottom: 1px solid $border-color; + border-radius: 0; + + &::placeholder { color: $tips-text-color } + } } .compose-form { &__warning { - @include shadow-1dp; color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; padding: 16px; + border: 1px solid $border-color; + border-radius: $card-radius; a { color: $link-text-color } } &__modifiers { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + + .compose-form { + &__upload-thumbnail { border-radius: 0 } + + &__upload__actions { + @include material-transition; + + .icon-button { + color: $media-icon-color; + font-size: 16px; + + &:hover { background-color: transparent } + } + } + } } &__buttons-wrapper { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + padding: 8px; + + .icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + } + + .text-icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + line-height: 20px !important; + } } &__poll-wrapper { @@ -235,7 +283,7 @@ select { color: $ui-text-color; - background-color: $background-color; + background-color: $bg-color; border: 0; &:focus { border-color: $border-active-color } @@ -251,20 +299,16 @@ &:active { background-color: $outlined-button-active-color } &:focus { background-color: $outlined-button-color } - - } - } - &__utilBtns { padding-top: 0 } + .poll__footer { border-top: none } + } &__publish .compose-form__publish-button-wrapper { box-shadow: none } } } -.no-reduce-motion .spoiler-input { - transition-duration: .2s, .2s; -} +.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s } .poll { @@ -283,7 +327,7 @@ &__text input[type=text] { color: $ui-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: 1px solid $border-color; padding: 8px 12px; @@ -292,7 +336,7 @@ &__option input[type=text] { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: none; border-radius: 2px; padding: 8px 16px; @@ -300,9 +344,9 @@ &__chart { border-radius: 0; - background: $poll-bar-color; + background: $progress-indicator-track-color; - &.leading { background: $poll-bar-leading-color } + &.leading { background: $progress-indicator-color } } &__footer { @@ -316,7 +360,7 @@ .privacy-dropdown { &.active .privacy-dropdown__value.active { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; box-shadow: none; @@ -325,7 +369,7 @@ &__dropdown { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $dialog-radius; } @@ -345,7 +389,7 @@ } &.active { - background: $menu-background-active-color; + background: $menu-bg-active-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -355,7 +399,7 @@ } &:hover { - background: $menu-background-active-color; + background: $menu-bg-active-color; .privacy-dropdown__option__content { color: $secondary-text-color; @@ -366,7 +410,7 @@ } &:hover { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -386,7 +430,7 @@ box-shadow: none; border: 1px solid $border-color; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__header { margin-bottom: 4px } @@ -410,14 +454,15 @@ } .block-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; &__container { padding: 24px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } @@ -451,7 +496,7 @@ } .filter-form { - background: $background-color; + background: $bg-color; color: $ui-text-color; &__column { padding: 8px 16px } @@ -466,18 +511,23 @@ &__img { border-radius: $card-radius $card-radius 0 0 } &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px 16px; .display-name { margin-left: 16px; + strong { + font-size: 16px; + color: $primary-text-color; + } + span { color: $secondary-text-color } } } &__extra { - background: $card-background-color; + background: $card-bg-color; border-radius: 0 0 $card-radius $card-radius; .account__header__content { @@ -491,7 +541,8 @@ } .mute-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -500,13 +551,14 @@ &__explanation { margin-top: 16px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } &__cancel-button { box-shadow: none !important; + color: $text-button-color; background: transparent; margin: 0 8px; @@ -531,4 +583,19 @@ margin: 0 0 0 12px; } } +} + +.upload-progress { + color: $ui-text-color; + + &__backdrop { + border-radius: 0; + background: $progress-indicator-track-color; + margin-top: 6px; + } + + &__tracker { + border-radius: 0; + background: $progress-indicator-color; + } } \ No newline at end of file diff --git a/app/javascript/styles/material-dark/theme/emoji-picker.scss b/app/javascript/styles/material-dark/theme/emoji-picker.scss index 70e22752d..1b42121be 100644 --- a/app/javascript/styles/material-dark/theme/emoji-picker.scss +++ b/app/javascript/styles/material-dark/theme/emoji-picker.scss @@ -7,13 +7,13 @@ .emoji-picker-dropdown { &__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; } &__modifiers__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; button { @@ -31,33 +31,23 @@ border: 0 solid $border-color; &:first-child { - background: $menu-background-color; + background: $menu-bg-color; } } - &-anchors { - color: $icon-button-color; - padding: 0; - } - &-anchor { + color: $text-tab-indicator-color; padding: 10px 4px; - &-selected { - color: $icon-button-active-color; - } + &-bar { background-color: $icon-tab-indicator-active-color } - &-bar { - background-color: $tab-indicator-active-color; - } + &-selected { color: $icon-tab-indicator-hover-color } - &:hover { - color: $icon-button-hover-color; - } + &:hover { color: $icon-tab-indicator-hover-color } } &-search { - background: $menu-background-color; + background: $menu-bg-color; input { outline: none; @@ -76,16 +66,16 @@ &-scroll { padding: 0 8px 8px; - background: $menu-background-color; + background: $menu-bg-color; } &-category-label span { padding: 4px 6px; - background: $menu-background-color; + background: $menu-bg-color; } &-emoji:hover::before { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } &-no-results { color: $secondary-text-color } diff --git a/app/javascript/styles/material-dark/theme/icons.scss b/app/javascript/styles/material-dark/theme/icons.scss index 1367647ec..987767544 100644 --- a/app/javascript/styles/material-dark/theme/icons.scss +++ b/app/javascript/styles/material-dark/theme/icons.scss @@ -16,26 +16,8 @@ &__icon.fa-fw { color: $icon-color } } - -.fa { vertical-align: sub } // adjust material icon font baseline to other font - -.fa.fa-times, -.fa.fa-eraser, -.fa.fa-plus { vertical-align: middle } // adjustment exception - -.fa.fa-check { vertical-align: initial } - .fa.fa-lock { text-transform: none } -.fa-fw { width: 16px } - -// icon in tab settings -.fa.fa-chevron-left.column-back-button__icon.fa-fw, -.text-btn.column-header__setting-btn .fa.fa-eraser { - font-size: 20px; - margin-right: 16px; -} - .icon-with-badge__badge { background: $badge-color; border: none; diff --git a/app/javascript/styles/material-dark/theme/material-icons.scss b/app/javascript/styles/material-dark/theme/material-icons.scss index 747856253..f27de96e8 100644 --- a/app/javascript/styles/material-dark/theme/material-icons.scss +++ b/app/javascript/styles/material-dark/theme/material-icons.scss @@ -3,8 +3,17 @@ @import '../custom_config', '../icon_config'; @import '../custom_color', '../custom_layout'; @import 'functions'; +@import 'mixins'; +@include icon-font; + +.fa-fw { + width: 20px; + height: 20px; + font-size: 20px; +} + .fa { &.fa-bars, &.fa-navicon, @@ -64,8 +73,19 @@ &.fa-compress, &.fa-user-times, &.fa-check, - &.fa-quote-right { - font-family: "Material Icons"; + &.fa-quote-right, + &.fa-upload, + &.fa-comments { + @include icon-font-style; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; } } @@ -118,9 +138,11 @@ &.fa-download::before { content: "file_download" } &.fa-arrows-alt::before { content: "fullscreen" } &.fa-compress::before { content: "fullscreen_exit" } - &.fa-user-times::before { content: "delete" } + &.fa-user-times::before { content: "person_remove" } &.fa-check::before { content: "check" } &.fa-quote-right::before { content: "format_quote" } + &.fa-upload::before { content: "file_upload" } + &.fa-comments::before { content: "forum" } } // bookmark icon @@ -148,12 +170,42 @@ .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color } // boost icon -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet, +button.icon-button i.fa-retweet:hover { height: 18px; width: 18px; transition: none; background-image: url('data:image/svg+xml;utf8,'); } +button.icon-button.disabled i.fa-retweet, +button.icon-button.disabled i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); +} + // dropdown icon -.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} + +// icon in tab settings +.text-btn.column-header__setting-btn { + .fa { + vertical-align: middle; + + &.fa-eraser { margin-right: 8px } // clear notification + } +} + +// top bar icons align +.fa.fa-bell.column-header__icon.fa-fw, +.fa.fa-home.column-header__icon.fa-fw, +.fa.fa-users.column-header__icon.fa-fw, +.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom } + +// uploaded media icons align +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa { + font-size: 20px; + vertical-align: text-bottom; +} + +// search results icons align +.search-results__header .fa { vertical-align: text-bottom } \ No newline at end of file diff --git a/app/javascript/styles/material-dark/theme/media.scss b/app/javascript/styles/material-dark/theme/media.scss index 9d0203828..0b8b92acf 100644 --- a/app/javascript/styles/material-dark/theme/media.scss +++ b/app/javascript/styles/material-dark/theme/media.scss @@ -6,9 +6,9 @@ .media-gallery { - border-radius: 0; + border-radius: $media-radius; - &__item { border-radius: 0 } + &__item { border-radius: $media-radius } } .media-modal__close { @@ -24,7 +24,7 @@ border: 12px; &:hover { - background: $media-icon-background-hover-color; + background: $media-icon-bg-hover-color; color: $media-icon-hover-color; } @@ -34,7 +34,7 @@ .media-modal { &__nav { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; height: 48px; width: 48px; @@ -50,6 +50,12 @@ &--active { background-color: $media-page-indicator-active-color } } + + &__meta { + bottom: 24px; + + a { color: $media-icon-color } + } } .video-player { @@ -75,7 +81,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } @@ -93,7 +99,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } diff --git a/app/javascript/styles/material-dark/theme/modal.scss b/app/javascript/styles/material-dark/theme/modal.scss index 2748c8723..209678c84 100644 --- a/app/javascript/styles/material-dark/theme/modal.scss +++ b/app/javascript/styles/material-dark/theme/modal.scss @@ -6,7 +6,8 @@ .confirmation-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $dialog-radius; width: 300px; @@ -18,7 +19,7 @@ &__action-bar { justify-content: flex-end; - background: $card-background-color; + background: $card-bg-color; padding: 8px; } @@ -42,7 +43,7 @@ } .actions-modal { - background: $card-background-color; + background: $card-bg-color; border-radius: $card-radius; ul li:not(:empty) a { @@ -50,7 +51,7 @@ font-size: 16px; &:hover { - background: $card-background-hover-color; + background: $card-bg-hover-color; color: $ui-text-color; } } @@ -58,7 +59,7 @@ .dropdown-menu__separator { border-bottom-color: $border-color } .status { - background: $card-background-color; + background: $card-bg-color; border-bottom-color: $border-color; padding-top: 12px; padding-bottom: 12px; @@ -71,7 +72,8 @@ } .report-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; diff --git a/app/javascript/styles/material-dark/theme/responsive.scss b/app/javascript/styles/material-dark/theme/responsive.scss index 9ae304041..d0e1a6635 100644 --- a/app/javascript/styles/material-dark/theme/responsive.scss +++ b/app/javascript/styles/material-dark/theme/responsive.scss @@ -81,14 +81,14 @@ @media screen and (min-width: 631px) { .tabs-bar__link { &:hover { - background: $tab-indicator-background-hover-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-hover-color; + border-bottom-color: $tab-bg-color; } &:active, &:focus { - background: $tab-indicator-background-focus-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-focus-color; + border-bottom-color: $tab-bg-color; } } } \ No newline at end of file diff --git a/app/javascript/styles/material-dark/theme/statuses.scss b/app/javascript/styles/material-dark/theme/statuses.scss index eedf77c2a..d095c2292 100644 --- a/app/javascript/styles/material-dark/theme/statuses.scss +++ b/app/javascript/styles/material-dark/theme/statuses.scss @@ -86,12 +86,15 @@ background: transparent; border-bottom-color: $border-color; } + + &__visibility-icon { color: $icon-color } } .status-card { color: $icon-color; border-color: $border-color; outline: none; + margin-top: 16px; &__image { background: transparent; @@ -110,7 +113,7 @@ &__actions { &>div { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; } @@ -136,7 +139,19 @@ &:hover { background-color: transparent !important } } - &:hover { background-color: $card-background-color } + &.horizontal { + border-radius: 0; + + .status-card { + &__image-preview { border-radius: 0 } + + &__image-image { border-radius: 0 } + } + } +} + +a.status-card { + &:hover { background-color: $card-bg-color } } // Detailed status in mobile @@ -152,7 +167,7 @@ } .detailed-status { - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__display-name { @@ -167,7 +182,7 @@ } &__action-bar { - background: $card-background-color; + background: $card-bg-color; border-top: none; border-bottom: 1px solid $border-color; padding: 12px 0; diff --git a/app/javascript/styles/material-light.scss b/app/javascript/styles/material-light.scss index 9818f14f5..228057b12 100644 --- a/app/javascript/styles/material-light.scss +++ b/app/javascript/styles/material-light.scss @@ -1,2 +1,9 @@ +/* +* Mastodon Material 0.2.0 +* Author: Rintan, Genbu Project +* Copyright (C) 2020 Rintan, Genbu Project +*/ + + @import 'application'; @import 'material-light/loader'; \ No newline at end of file diff --git a/app/javascript/styles/material-light/color/black.scss b/app/javascript/styles/material-light/color/black.scss index b299981b0..6aa7ebfdb 100644 --- a/app/javascript/styles/material-light/color/black.scss +++ b/app/javascript/styles/material-light/color/black.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #000000; -$menu-background-color: #121212; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #121212; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #000000; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #000000; +$menu-bg-color: #121212; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #121212; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #000000; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #1e1e1e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #1e1e1e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #121212; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #121212; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-light/color/mastodon-dark.scss b/app/javascript/styles/material-light/color/mastodon-dark.scss index c3c168316..4ed9a7e07 100644 --- a/app/javascript/styles/material-light/color/mastodon-dark.scss +++ b/app/javascript/styles/material-light/color/mastodon-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #191b22; -$menu-background-color: #d9e1e8; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #313543; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #282c37; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #191b22; +$menu-bg-color: #d9e1e8; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #313543; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #282c37; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #42485a; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #9baec8; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: lighten($background-color, 14%); -$icon-background-active-color: lighten($background-color, 18%); +$icon-bg-hover-color: lighten($bg-color, 14%); +$icon-bg-active-color: lighten($bg-color, 18%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #fff; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,9 +99,9 @@ $border-color: #393f4f; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 16%); -$scroll-bar-thumb-hover-color: lighten($background-color, 26%); -$scroll-bar-thumb-active-color: lighten($background-color, 32%); +$scroll-bar-thumb-color: lighten($bg-color, 16%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 26%); +$scroll-bar-thumb-active-color: lighten($bg-color, 32%); // App bar color $top-bar-color: #313543; @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: #d9e1e8; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #1f232b; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #1f232b; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-light/color/mastodon-light.scss b/app/javascript/styles/material-light/color/mastodon-light.scss index 54d894fec..d4d84a626 100644 --- a/app/javascript/styles/material-light/color/mastodon-light.scss +++ b/app/javascript/styles/material-light/color/mastodon-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #eff3f5; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($background-color, 6%); -$menu-background-active-color: darken($background-color, 10%); -$menu-background-active-hover-color: darken($background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #eff3f5; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($bg-color, 6%); +$menu-bg-active-color: darken($bg-color, 10%); +$menu-bg-active-hover-color: darken($bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -55,8 +56,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #282c37; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: darken($background-color, 4%); -$icon-background-active-color: darken($background-color, 8%); +$icon-bg-hover-color: darken($bg-color, 4%); +$icon-bg-active-color: darken($bg-color, 8%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #ffffff; $search-bar-color: #d9e1e8; -$search-bar-focus-color: $background-color; +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: #282c37; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #e6ebf0; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #e6ebf0; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-light/color/plus-classic.scss b/app/javascript/styles/material-light/color/plus-classic.scss index 60c8370a2..eba9c0f18 100644 --- a/app/javascript/styles/material-light/color/plus-classic.scss +++ b/app/javascript/styles/material-light/color/plus-classic.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #db4437; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-light/color/v1-dark.scss b/app/javascript/styles/material-light/color/v1-dark.scss index 77cef824f..d925f3d65 100644 --- a/app/javascript/styles/material-light/color/v1-dark.scss +++ b/app/javascript/styles/material-light/color/v1-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #303030; -$menu-background-color: #424242; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #424242; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #424242; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #303030; +$menu-bg-color: #424242; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #424242; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #424242; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%); $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); -$scroll-bar-thumb-hover-color: lighten($background-color, 30%); -$scroll-bar-thumb-active-color: lighten($background-color, 38%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 30%); +$scroll-bar-thumb-active-color: lighten($bg-color, 38%); // App bar color $top-bar-color: #1565C0; -$search-bar-color: lighten($background-color, 6%); +$search-bar-color: lighten($bg-color, 6%); $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #424242; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #424242; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-light/color/v1-light.scss b/app/javascript/styles/material-light/color/v1-light.scss index 64f8d5842..906b8e459 100644 --- a/app/javascript/styles/material-light/color/v1-light.scss +++ b/app/javascript/styles/material-light/color/v1-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); @@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $top-bar-unread-icon-color: darken($primary-color, 30%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #2196f3; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-light/color/v2-dark.scss b/app/javascript/styles/material-light/color/v2-dark.scss index 8c575bce5..94c381ee7 100644 --- a/app/javascript/styles/material-light/color/v2-dark.scss +++ b/app/javascript/styles/material-light/color/v2-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #121212; -$menu-background-color: #1e1e1e; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #1e1e1e; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #1e1e1e; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #121212; +$menu-bg-color: #1e1e1e; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #1e1e1e; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #1e1e1e; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #1e1e1e; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #1e1e1e; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-light/color/v2-light.scss b/app/javascript/styles/material-light/color/v2-light.scss index 20336e96d..9317004e9 100644 --- a/app/javascript/styles/material-light/color/v2-light.scss +++ b/app/javascript/styles/material-light/color/v2-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #ffffff; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: $background-color; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: $background-color; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #ffffff; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: $bg-color; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: $bg-color; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); -$scroll-bar-thumb-hover-color: darken($background-color, 30%); -$scroll-bar-thumb-active-color: darken($background-color, 38%); +$scroll-bar-thumb-color: darken($bg-color, 20%); +$scroll-bar-thumb-hover-color: darken($bg-color, 30%); +$scroll-bar-thumb-active-color: darken($bg-color, 38%); // App bar color -$top-bar-color: $background-color; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$top-bar-color: $bg-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/material-light/icon_config.scss b/app/javascript/styles/material-light/icon_config.scss index 610c7e308..99046e176 100644 --- a/app/javascript/styles/material-light/icon_config.scss +++ b/app/javascript/styles/material-light/icon_config.scss @@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star $favorite-icon-color: #ffd600; // Star //$favorite-icon-color: #ff4081; // Heart //$favorite-icon-color: #db4437; // +1 -//$favorite-icon-color: #ffffff; // inverted +1 +//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin) // Reply icon settings @@ -16,11 +16,13 @@ $reply-icon: "reply"; // Material Design Icon settings // If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below. -@font-face { - font-family: "Material Icons"; - src: - local("Material Icons"), - //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub - //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts - url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting -} \ No newline at end of file +//$icon-font-source: google; // Google Fonts +//$icon-font-source: github; // GitHub +$icon-font-source: self; // Self-hosting + +// Material Icon style settings +$icon-font-style: filled; +//$icon-font-style: outlined; +//$icon-font-style: round; +//$icon-font-style: sharp; +//$icon-font-style: two-tone; \ No newline at end of file diff --git a/app/javascript/styles/material-light/layout/material-v1.scss b/app/javascript/styles/material-light/layout/material-v1.scss index 825deaf8c..926c3325a 100644 --- a/app/javascript/styles/material-light/layout/material-v1.scss +++ b/app/javascript/styles/material-light/layout/material-v1.scss @@ -30,6 +30,10 @@ $dialog-radius: 2px; $menu-radius: 2px; +// Media radius settings +$media-radius: 0; + + // Navigation drawer item settings $nav-drawer-item-radius: 0; @@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping //$avater-radius: 2px // Material v1 square +// Chip settings +$outlined-chip: false; // Material v1 styled contained chip + + // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/material-light/layout/material-v2.scss b/app/javascript/styles/material-light/layout/material-v2.scss index 853d82b15..f79f91005 100644 --- a/app/javascript/styles/material-light/layout/material-v2.scss +++ b/app/javascript/styles/material-light/layout/material-v2.scss @@ -4,10 +4,12 @@ // Navigation bar radius $nav-bar-radius: 8px; +//$nav-bar-radius: 28px; // full radius // Search bar radius $search-bar-radius: 8px; +//$search-bar-radius: 21px; // full rounded // Bar radius settings @@ -31,6 +33,11 @@ $dialog-radius: 8px; $menu-radius: 8px; +// Media radius settings +$media-radius: 0; +//$media-radius: 2px; + + // Navigation drawer item settings $nav-drawer-item-radius: 8px; // corner rounded //$nav-drawer-item-radius: 32px; // full rounded @@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping // Chip settings -// If you want to use contained-chip, please comment out below. -.reactions-bar__item { - background: $outlined-chip-color !important; - border: 1px solid $border-color !important; - - &.active { background-color: $outlined-chip-selected-color !important } - - &:hover { background: $outlined-chip-hover-color !important } -} +$outlined-chip: true; // Material v2 styled outlined chip +//$outlined-chip: false; // Material v1 styled contained chip // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: false; // Material v2 styled colored button without shadow +//$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/material-light/plugins/cards.scss b/app/javascript/styles/material-light/plugins/cards.scss index c134cbeeb..d9b3906a5 100644 --- a/app/javascript/styles/material-light/plugins/cards.scss +++ b/app/javascript/styles/material-light/plugins/cards.scss @@ -10,13 +10,13 @@ margin: 2px 0 !important; padding: 8px !important; - > .scrollable { background: $background-color } + > .scrollable { background: $bg-color } } .status { border-bottom: 0; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; &__prepend { padding: 8px 8px 2px 0 } } @@ -28,7 +28,7 @@ @include shadow-1dp; margin: 8px 2px; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; } .notification .status__wrapper.status__wrapper { box-shadow: none !important } diff --git a/app/javascript/styles/material-light/plugins/plus.scss b/app/javascript/styles/material-light/plugins/plus.scss index 5b220631b..86a5f3e1e 100644 --- a/app/javascript/styles/material-light/plugins/plus.scss +++ b/app/javascript/styles/material-light/plugins/plus.scss @@ -14,9 +14,8 @@ // favorite icon .star-icon.active, -.star-icon.icon-button.active.active, -.notification__favourite-icon-wrapper .star-icon, -.status__action-bar-button.star-icon.icon-button.active { background: #db4437 } +.star-icon.icon-button.active.activate, +.notification__favourite-icon-wrapper .star-icon { background: #db4437 } .notification__favourite-icon-wrapper { left: -34px; diff --git a/app/javascript/styles/material-light/theme/_mixins.scss b/app/javascript/styles/material-light/theme/_mixins.scss index 5f573e339..fc965880f 100644 --- a/app/javascript/styles/material-light/theme/_mixins.scss +++ b/app/javascript/styles/material-light/theme/_mixins.scss @@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12); @mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 } @mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 } @mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 } +@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 } +@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 } +@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 } +@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 } +@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 } +@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 } +@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 } +@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 } @mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2} + +@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } + +@mixin search-bar-hover { + @if $search-bar-hover { + @include shadow-2dp; + background: $search-bar-focus-color; + } +} + +@mixin outlined-chip { + @if $outlined-chip { + .reactions-bar__item { + background: $outlined-chip-color !important; + border: 1px solid $border-color !important; + + &.active { background-color: $outlined-chip-selected-color !important } + + &:hover { background: $outlined-chip-hover-color !important } + } + } +} + +@mixin button-shadow { + @if $button-shadow { + .button, + .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } + } +} + +@mixin icon-font-style { + @if $icon-font-style == filled { font-family: "Material Icons" } + @if $icon-font-style == outlined { font-family: "Material Icons Outlined" } + @if $icon-font-style == round { font-family: "Material Icons Round" } + @if $icon-font-style == sharp { font-family: "Material Icons Sharp" } + @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" } +} + +@mixin icon-font { + @if $icon-font-source == github { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } + + @if $icon-font-source == google { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2'); + } + } + } + + @if $icon-font-source == self { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url(".../fonts/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons"), + url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/material-light/theme/account.scss b/app/javascript/styles/material-light/theme/account.scss index 34a8a1816..b6d517e12 100644 --- a/app/javascript/styles/material-light/theme/account.scss +++ b/app/javascript/styles/material-light/theme/account.scss @@ -7,8 +7,8 @@ .account { border-bottom: 1px solid $border-color; - .account__display-name { color: $primary-text-color } - .account__display-name strong { color: $secondary-text-color } + .account__display-name, + .account__display-name strong { color: $primary-text-color } &__avatar { border-radius: $avater-radius; @@ -29,9 +29,9 @@ &__header { &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; - border-bottom: 1px solid $border-color; + border-bottom: none; .avatar .account__avatar { border: none } } @@ -89,7 +89,7 @@ .verified { border: none; - background: $verified-background-color; + background: $verified-bg-color; a, &__mark { color: $primary-text-color } @@ -105,7 +105,7 @@ dt { color: $primary-text-color; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; } dd { color: $primary-text-color } @@ -113,11 +113,31 @@ } } + &__account-note { + padding: 8px 16px; + border-bottom: 1px solid $border-color; + + label { + color: $ui-text-color; + margin-bottom: 8px; + } + + textarea { + color: $primary-text-color; + padding: 8px 16px; + border-radius: 0; + + &:focus { background: transparent } + + &::placeholder { color: $tips-text-color } + } + } + &__content { color: $secondary-text-color } } &__section-headline { - background: $text-tab-background-color; + background: $text-tab-bg-color; border-bottom: 1px solid $border-color; a { @@ -131,10 +151,10 @@ &::before, &:after { border: none } - &:focus { background: $text-tab-indicator-background-focus-color } + &:focus { background: $text-tab-indicator-bg-focus-color } } - &:hover { background: $text-tab-indicator-background-hover-color } + &:hover { background: $text-tab-indicator-bg-hover-color } } } } @@ -150,4 +170,8 @@ color: $ui-text-color; small { color: $secondary-text-color } +} + +.account-gallery { + &__item { border-radius: 0 } } \ No newline at end of file diff --git a/app/javascript/styles/material-light/theme/base_config.scss b/app/javascript/styles/material-light/theme/base_config.scss index 73ff009e1..13fb4ad75 100644 --- a/app/javascript/styles/material-light/theme/base_config.scss +++ b/app/javascript/styles/material-light/theme/base_config.scss @@ -18,10 +18,7 @@ // Search bar hover settings // You can enable/disable search bar floating. -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ +$search-bar-hover: false; // Status font size in timeline @@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default // Name font size in timeline status $name-font-size: 15px; // mastodon default -//$name-font-size: 16px; // compatible with material design \ No newline at end of file +//$name-font-size: 16px; // compatible with material design + + +// Background image +// If you want to use the local image, please put it in /mastodon-material +$bg-image: none; +//$bg-image: "./image.png"; +//$bg-image: "https://example.com/img/image.png"; + + +// Columns transparency settings +$bar-transparency: 1.0; // opacity +//$bar-transparency: 0.8; // semi-transparent + +$column-transparency: 1.0; // opacity +//$column-transparency: 0.8; // semi-transparent \ No newline at end of file diff --git a/app/javascript/styles/material-light/theme/basics.scss b/app/javascript/styles/material-light/theme/basics.scss index 4c122d1c6..32ba6dc8c 100644 --- a/app/javascript/styles/material-light/theme/basics.scss +++ b/app/javascript/styles/material-light/theme/basics.scss @@ -4,7 +4,9 @@ @import '../custom_color', '../custom_layout'; -body { background: $background-color } +body { background: $bg-color } + +.focusable:focus { background: transparent } // Chrome & Safari scroll bar ::-webkit-scrollbar-thumb { @@ -21,6 +23,4 @@ body { background: $background-color } } // Firefox scroll bar -html { - scrollbar-color: $scroll-bar-thumb-color transparent; -} \ No newline at end of file +html { scrollbar-color: $scroll-bar-thumb-color transparent } \ No newline at end of file diff --git a/app/javascript/styles/material-light/theme/button.scss b/app/javascript/styles/material-light/theme/button.scss index 1231bac98..7c2ad7937 100644 --- a/app/javascript/styles/material-light/theme/button.scss +++ b/app/javascript/styles/material-light/theme/button.scss @@ -4,6 +4,8 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +@include button-shadow; + .icon-button { color: $icon-button-color; border-radius: 50%; @@ -21,37 +23,54 @@ &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } } &.overlayed { border-radius: 50%; - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; &:hover { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-hover-color; } } &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } - &:active, - &:focus { background-color: transparent } + &:focus { transition: none } +} + +// Checkbox with label +label.icon-button { + &.active { + color: $ui-text-color; + background-color: transparent; + } + + &:hover { + @include material-transition; + background-color: transparent; + } } .text-icon-button { color: $icon-button-color; border-radius: 50%; - font-size: 12px; + font-size: 14px; + + &.active { + background-color: $icon-bg-hover-color; + color: $icon-button-active-color; + } &:hover { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; color: $icon-button-hover-color; } } @@ -91,7 +110,7 @@ } .spoiler-button__overlay__label { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; color: $media-icon-color; } \ No newline at end of file diff --git a/app/javascript/styles/material-light/theme/columns.scss b/app/javascript/styles/material-light/theme/columns.scss index 54effffd3..af7776a0c 100644 --- a/app/javascript/styles/material-light/theme/columns.scss +++ b/app/javascript/styles/material-light/theme/columns.scss @@ -10,7 +10,10 @@ margin: 10px 8px; border-radius: $card-radius; - &>.scrollable { background: $list-background-color } + &>.scrollable { + background: $list-bg-color; + opacity: $column-transparency; + } &:last-child { box-shadow: none } } @@ -45,22 +48,23 @@ background: $top-bar-color; color: $top-bar-icon-color; margin: 8px 10px; - padding: 10px 12px; + padding: 10px; border-radius: 50%; + font-size: 20px; &.active { color: $top-bar-icon-active-color; - background: $icon-background-active-color; + background: $icon-bg-active-color; &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } @@ -93,6 +97,7 @@ &__wrapper { @include shadow-4dp; border-radius: $bar-radius; + opacity: $bar-transparency; .announcements { border-top: 1px solid $border-color } @@ -105,11 +110,11 @@ &__collapsible { color: $ui-text-color; - background: $card-background-color; + background: $card-bg-color; border-top: 1px solid $border-color; &-inner { - background: $card-background-color; + background: $card-bg-color; padding: 16px; } @@ -119,9 +124,9 @@ &__back-button { background: $top-bar-color; color: $top-bar-icon-color; - padding: 8px; - margin: auto 0; - border-radius: 50%; + margin: 8px 10px; + padding: 10px; + font-size: 20px; span { display: none } } @@ -129,21 +134,21 @@ .column-subheading { color: $section-text-color; - background: $background-color; + background: $bg-color; padding: 12px 16px; border-top: 1px solid $border-color; } .column-link { color: $ui-text-color; - background: $background-color; + background: $bg-color; padding: 16px; border-radius: $nav-drawer-item-radius; - &:hover { background: $list-background-hover-color } + &:hover { background: $list-bg-hover-color } &:active, - &:focus { background: $list-background-active-color } + &:focus { background: $list-bg-active-color } &__icon { margin-right: 32px; @@ -153,9 +158,9 @@ &--transparent { &.active { color: $ui-text-color; - background: $menu-background-active-color; + background: $menu-bg-active-color; - &:hover { background: $menu-background-active-hover-color } + &:hover { background: $menu-bg-active-hover-color } .fa { color: $icon-color } } @@ -191,14 +196,19 @@ .column-inline-form { padding: 16px 0 16px 16px; - background: $card-background-color; + background: $card-bg-color; .icon-button { margin: 0 16px } } +.columns-area { + background-image: url($bg-image); + background-size: contain; +} + .setting-text { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border-radius: $bar-radius; &::placeholder { color: $tips-text-color } @@ -206,17 +216,17 @@ .empty-column-indicator { color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; font-size: 16px; } .conversation { border-bottom: 1px solid $border-color; padding: 12px; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; &--unread { - background: $list-background-color; + background: $list-bg-color; .conversation__content__relative-time { color: $info-text-color } } @@ -275,15 +285,16 @@ color: $icon-color; padding: 16px; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } } .getting-started { - background: $background-color; + background: $bg-color; color: $ui-text-color; + opacity: $column-transparency; &__wrapper { - background: $background-color; + background: $bg-color; height: auto !important; border-bottom: 1px solid $border-color; } @@ -303,8 +314,9 @@ } &__trends { - background: $background-color; + background: $bg-color; margin-bottom: 0; + opacity: $column-transparency; h4 { color: $section-text-color; @@ -358,7 +370,7 @@ } .announcements { - background: $card-background-color; + background: $card-bg-color; padding: 0; &__container { color: $primary-text-color } @@ -386,6 +398,8 @@ .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important } +@include outlined-chip; + .reactions-bar { .emoji-button { color: $icon-button-color; @@ -424,12 +438,13 @@ .notification { &__filter-bar { - background: $tab-background-color; + background: $tab-bg-color; border-bottom: 1px solid $border-color; z-index: 1; + opacity: $bar-transparency; button { - background: $tab-background-color; + background: $tab-bg-color; color: $tab-indicator-color; font-size: 16px; @@ -442,10 +457,10 @@ &::before, &:after { border: none } - &:focus { background: $tab-indicator-background-focus-color } + &:focus { background: $tab-indicator-bg-focus-color } } - &:hover { background: $tab-indicator-background-hover-color } + &:hover { background: $tab-indicator-bg-hover-color } } } diff --git a/app/javascript/styles/material-light/theme/components.scss b/app/javascript/styles/material-light/theme/components.scss index ae5bfe158..46483923e 100644 --- a/app/javascript/styles/material-light/theme/components.scss +++ b/app/javascript/styles/material-light/theme/components.scss @@ -4,6 +4,7 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } .drawer { &__header { @@ -11,11 +12,12 @@ background: $top-bar-color; border-radius: $nav-bar-radius; justify-content: space-around; + opacity: $bar-transparency; a { transition: none } a:hover { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; } } @@ -40,14 +42,15 @@ } &__inner { - background: $card-background-color; + background: $card-bg-color; + opacity: $column-transparency; &.darker { - background: $card-background-color; + background: $card-bg-color; position: inherit; } - &__mastodon { background: $card-background-color } + &__mastodon { background: $card-bg-color } } } @@ -57,6 +60,7 @@ color: $tips-text-color; border-radius: $search-bar-radius; padding: 12px 12px 12px 40px; + opacity: $bar-transparency; &:focus { @include shadow-2dp; @@ -64,6 +68,8 @@ color: $search-bar-text-color; } + &:hover { @include search-bar-hover } + &::placeholder { color: $tips-text-color } } @@ -112,7 +118,7 @@ .search-results { &__header { color: $secondary-text-color; - background-color: $card-background-color; + background-color: $card-bg-color; padding: 16px; .fa { margin-right: 8px } @@ -120,7 +126,7 @@ &__section { h5 { - background: $card-background-color; + background: $card-bg-color; border-bottom: 1px solid $border-color; padding: 16px; color: $section-text-color; @@ -137,6 +143,12 @@ strong { color: $ui-text-color; } + + .navigation-bar__actions .compose__action-bar .icon-button { + width: 36px !important; + height: 36px !important; + padding: 8px; + } } .navigation-panel hr { @@ -146,7 +158,7 @@ .dropdown-menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; padding: 8px 0; border-radius: $menu-radius; @@ -155,11 +167,11 @@ &__item a { font-size: 14px; padding: 8px 16px; - background: $menu-background-color; + background: $menu-bg-color; color: $menu-text-color; &:hover, &:active { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $menu-text-color; } } @@ -173,7 +185,7 @@ .compose-form { .autosuggest-textarea { &__textarea { - background: $text-field-background-color; + background: $text-field-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -182,7 +194,7 @@ &__suggestions { @include shadow-1dp; - background: $menu-background-color; + background: $menu-bg-color; color: $ui-text-color; border-radius: $card-radius; font-size: 16px; @@ -192,40 +204,76 @@ padding: 8px; border-radius: 0; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } &.selected, &:focus, - &:active { background: $menu-background-active-color } + &:active { background: $menu-bg-active-color } } } } - .spoiler-input__input { - color: $ui-text-color; - background: $card-background-color; + .spoiler-input { + &.spoiler-input--visible { margin-bottom: 8px } - &::placeholder { color: $tips-text-color } + &__input { + color: $ui-text-color; + background: $card-bg-color; + border-bottom: 1px solid $border-color; + border-radius: 0; + + &::placeholder { color: $tips-text-color } + } } .compose-form { &__warning { - @include shadow-1dp; color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; padding: 16px; + border: 1px solid $border-color; + border-radius: $card-radius; a { color: $link-text-color } } &__modifiers { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + + .compose-form { + &__upload-thumbnail { border-radius: 0 } + + &__upload__actions { + @include material-transition; + + .icon-button { + color: $media-icon-color; + font-size: 16px; + + &:hover { background-color: transparent } + } + } + } } &__buttons-wrapper { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + padding: 8px; + + .icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + } + + .text-icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + line-height: 20px !important; + } } &__poll-wrapper { @@ -235,7 +283,7 @@ select { color: $ui-text-color; - background-color: $background-color; + background-color: $bg-color; border: 0; &:focus { border-color: $border-active-color } @@ -251,20 +299,16 @@ &:active { background-color: $outlined-button-active-color } &:focus { background-color: $outlined-button-color } - - } - } - &__utilBtns { padding-top: 0 } + .poll__footer { border-top: none } + } &__publish .compose-form__publish-button-wrapper { box-shadow: none } } } -.no-reduce-motion .spoiler-input { - transition-duration: .2s, .2s; -} +.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s } .poll { @@ -283,7 +327,7 @@ &__text input[type=text] { color: $ui-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: 1px solid $border-color; padding: 8px 12px; @@ -292,7 +336,7 @@ &__option input[type=text] { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: none; border-radius: 2px; padding: 8px 16px; @@ -300,9 +344,9 @@ &__chart { border-radius: 0; - background: $poll-bar-color; + background: $progress-indicator-track-color; - &.leading { background: $poll-bar-leading-color } + &.leading { background: $progress-indicator-color } } &__footer { @@ -316,7 +360,7 @@ .privacy-dropdown { &.active .privacy-dropdown__value.active { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; box-shadow: none; @@ -325,7 +369,7 @@ &__dropdown { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $dialog-radius; } @@ -345,7 +389,7 @@ } &.active { - background: $menu-background-active-color; + background: $menu-bg-active-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -355,7 +399,7 @@ } &:hover { - background: $menu-background-active-color; + background: $menu-bg-active-color; .privacy-dropdown__option__content { color: $secondary-text-color; @@ -366,7 +410,7 @@ } &:hover { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -386,7 +430,7 @@ box-shadow: none; border: 1px solid $border-color; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__header { margin-bottom: 4px } @@ -410,14 +454,15 @@ } .block-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; &__container { padding: 24px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } @@ -451,7 +496,7 @@ } .filter-form { - background: $background-color; + background: $bg-color; color: $ui-text-color; &__column { padding: 8px 16px } @@ -466,18 +511,23 @@ &__img { border-radius: $card-radius $card-radius 0 0 } &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px 16px; .display-name { margin-left: 16px; + strong { + font-size: 16px; + color: $primary-text-color; + } + span { color: $secondary-text-color } } } &__extra { - background: $card-background-color; + background: $card-bg-color; border-radius: 0 0 $card-radius $card-radius; .account__header__content { @@ -491,7 +541,8 @@ } .mute-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -500,13 +551,14 @@ &__explanation { margin-top: 16px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } &__cancel-button { box-shadow: none !important; + color: $text-button-color; background: transparent; margin: 0 8px; @@ -531,4 +583,19 @@ margin: 0 0 0 12px; } } +} + +.upload-progress { + color: $ui-text-color; + + &__backdrop { + border-radius: 0; + background: $progress-indicator-track-color; + margin-top: 6px; + } + + &__tracker { + border-radius: 0; + background: $progress-indicator-color; + } } \ No newline at end of file diff --git a/app/javascript/styles/material-light/theme/emoji-picker.scss b/app/javascript/styles/material-light/theme/emoji-picker.scss index 70e22752d..1b42121be 100644 --- a/app/javascript/styles/material-light/theme/emoji-picker.scss +++ b/app/javascript/styles/material-light/theme/emoji-picker.scss @@ -7,13 +7,13 @@ .emoji-picker-dropdown { &__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; } &__modifiers__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; button { @@ -31,33 +31,23 @@ border: 0 solid $border-color; &:first-child { - background: $menu-background-color; + background: $menu-bg-color; } } - &-anchors { - color: $icon-button-color; - padding: 0; - } - &-anchor { + color: $text-tab-indicator-color; padding: 10px 4px; - &-selected { - color: $icon-button-active-color; - } + &-bar { background-color: $icon-tab-indicator-active-color } - &-bar { - background-color: $tab-indicator-active-color; - } + &-selected { color: $icon-tab-indicator-hover-color } - &:hover { - color: $icon-button-hover-color; - } + &:hover { color: $icon-tab-indicator-hover-color } } &-search { - background: $menu-background-color; + background: $menu-bg-color; input { outline: none; @@ -76,16 +66,16 @@ &-scroll { padding: 0 8px 8px; - background: $menu-background-color; + background: $menu-bg-color; } &-category-label span { padding: 4px 6px; - background: $menu-background-color; + background: $menu-bg-color; } &-emoji:hover::before { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } &-no-results { color: $secondary-text-color } diff --git a/app/javascript/styles/material-light/theme/icons.scss b/app/javascript/styles/material-light/theme/icons.scss index 1367647ec..987767544 100644 --- a/app/javascript/styles/material-light/theme/icons.scss +++ b/app/javascript/styles/material-light/theme/icons.scss @@ -16,26 +16,8 @@ &__icon.fa-fw { color: $icon-color } } - -.fa { vertical-align: sub } // adjust material icon font baseline to other font - -.fa.fa-times, -.fa.fa-eraser, -.fa.fa-plus { vertical-align: middle } // adjustment exception - -.fa.fa-check { vertical-align: initial } - .fa.fa-lock { text-transform: none } -.fa-fw { width: 16px } - -// icon in tab settings -.fa.fa-chevron-left.column-back-button__icon.fa-fw, -.text-btn.column-header__setting-btn .fa.fa-eraser { - font-size: 20px; - margin-right: 16px; -} - .icon-with-badge__badge { background: $badge-color; border: none; diff --git a/app/javascript/styles/material-light/theme/material-icons.scss b/app/javascript/styles/material-light/theme/material-icons.scss index 747856253..f27de96e8 100644 --- a/app/javascript/styles/material-light/theme/material-icons.scss +++ b/app/javascript/styles/material-light/theme/material-icons.scss @@ -3,8 +3,17 @@ @import '../custom_config', '../icon_config'; @import '../custom_color', '../custom_layout'; @import 'functions'; +@import 'mixins'; +@include icon-font; + +.fa-fw { + width: 20px; + height: 20px; + font-size: 20px; +} + .fa { &.fa-bars, &.fa-navicon, @@ -64,8 +73,19 @@ &.fa-compress, &.fa-user-times, &.fa-check, - &.fa-quote-right { - font-family: "Material Icons"; + &.fa-quote-right, + &.fa-upload, + &.fa-comments { + @include icon-font-style; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; } } @@ -118,9 +138,11 @@ &.fa-download::before { content: "file_download" } &.fa-arrows-alt::before { content: "fullscreen" } &.fa-compress::before { content: "fullscreen_exit" } - &.fa-user-times::before { content: "delete" } + &.fa-user-times::before { content: "person_remove" } &.fa-check::before { content: "check" } &.fa-quote-right::before { content: "format_quote" } + &.fa-upload::before { content: "file_upload" } + &.fa-comments::before { content: "forum" } } // bookmark icon @@ -148,12 +170,42 @@ .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color } // boost icon -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet, +button.icon-button i.fa-retweet:hover { height: 18px; width: 18px; transition: none; background-image: url('data:image/svg+xml;utf8,'); } +button.icon-button.disabled i.fa-retweet, +button.icon-button.disabled i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); +} + // dropdown icon -.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} + +// icon in tab settings +.text-btn.column-header__setting-btn { + .fa { + vertical-align: middle; + + &.fa-eraser { margin-right: 8px } // clear notification + } +} + +// top bar icons align +.fa.fa-bell.column-header__icon.fa-fw, +.fa.fa-home.column-header__icon.fa-fw, +.fa.fa-users.column-header__icon.fa-fw, +.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom } + +// uploaded media icons align +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa { + font-size: 20px; + vertical-align: text-bottom; +} + +// search results icons align +.search-results__header .fa { vertical-align: text-bottom } \ No newline at end of file diff --git a/app/javascript/styles/material-light/theme/media.scss b/app/javascript/styles/material-light/theme/media.scss index 9d0203828..0b8b92acf 100644 --- a/app/javascript/styles/material-light/theme/media.scss +++ b/app/javascript/styles/material-light/theme/media.scss @@ -6,9 +6,9 @@ .media-gallery { - border-radius: 0; + border-radius: $media-radius; - &__item { border-radius: 0 } + &__item { border-radius: $media-radius } } .media-modal__close { @@ -24,7 +24,7 @@ border: 12px; &:hover { - background: $media-icon-background-hover-color; + background: $media-icon-bg-hover-color; color: $media-icon-hover-color; } @@ -34,7 +34,7 @@ .media-modal { &__nav { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; height: 48px; width: 48px; @@ -50,6 +50,12 @@ &--active { background-color: $media-page-indicator-active-color } } + + &__meta { + bottom: 24px; + + a { color: $media-icon-color } + } } .video-player { @@ -75,7 +81,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } @@ -93,7 +99,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } diff --git a/app/javascript/styles/material-light/theme/modal.scss b/app/javascript/styles/material-light/theme/modal.scss index 2748c8723..209678c84 100644 --- a/app/javascript/styles/material-light/theme/modal.scss +++ b/app/javascript/styles/material-light/theme/modal.scss @@ -6,7 +6,8 @@ .confirmation-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $dialog-radius; width: 300px; @@ -18,7 +19,7 @@ &__action-bar { justify-content: flex-end; - background: $card-background-color; + background: $card-bg-color; padding: 8px; } @@ -42,7 +43,7 @@ } .actions-modal { - background: $card-background-color; + background: $card-bg-color; border-radius: $card-radius; ul li:not(:empty) a { @@ -50,7 +51,7 @@ font-size: 16px; &:hover { - background: $card-background-hover-color; + background: $card-bg-hover-color; color: $ui-text-color; } } @@ -58,7 +59,7 @@ .dropdown-menu__separator { border-bottom-color: $border-color } .status { - background: $card-background-color; + background: $card-bg-color; border-bottom-color: $border-color; padding-top: 12px; padding-bottom: 12px; @@ -71,7 +72,8 @@ } .report-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; diff --git a/app/javascript/styles/material-light/theme/responsive.scss b/app/javascript/styles/material-light/theme/responsive.scss index 9ae304041..d0e1a6635 100644 --- a/app/javascript/styles/material-light/theme/responsive.scss +++ b/app/javascript/styles/material-light/theme/responsive.scss @@ -81,14 +81,14 @@ @media screen and (min-width: 631px) { .tabs-bar__link { &:hover { - background: $tab-indicator-background-hover-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-hover-color; + border-bottom-color: $tab-bg-color; } &:active, &:focus { - background: $tab-indicator-background-focus-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-focus-color; + border-bottom-color: $tab-bg-color; } } } \ No newline at end of file diff --git a/app/javascript/styles/material-light/theme/statuses.scss b/app/javascript/styles/material-light/theme/statuses.scss index eedf77c2a..d095c2292 100644 --- a/app/javascript/styles/material-light/theme/statuses.scss +++ b/app/javascript/styles/material-light/theme/statuses.scss @@ -86,12 +86,15 @@ background: transparent; border-bottom-color: $border-color; } + + &__visibility-icon { color: $icon-color } } .status-card { color: $icon-color; border-color: $border-color; outline: none; + margin-top: 16px; &__image { background: transparent; @@ -110,7 +113,7 @@ &__actions { &>div { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; } @@ -136,7 +139,19 @@ &:hover { background-color: transparent !important } } - &:hover { background-color: $card-background-color } + &.horizontal { + border-radius: 0; + + .status-card { + &__image-preview { border-radius: 0 } + + &__image-image { border-radius: 0 } + } + } +} + +a.status-card { + &:hover { background-color: $card-bg-color } } // Detailed status in mobile @@ -152,7 +167,7 @@ } .detailed-status { - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__display-name { @@ -167,7 +182,7 @@ } &__action-bar { - background: $card-background-color; + background: $card-bg-color; border-top: none; border-bottom: 1px solid $border-color; padding: 12px 0; diff --git a/app/javascript/styles/plus.scss b/app/javascript/styles/plus.scss index 9cbccaa5f..45fa7f979 100644 --- a/app/javascript/styles/plus.scss +++ b/app/javascript/styles/plus.scss @@ -1,2 +1,9 @@ +/* +* Mastodon Material 0.2.0 +* Author: Rintan, Genbu Project +* Copyright (C) 2020 Rintan, Genbu Project +*/ + + @import 'application'; @import 'plus/loader'; \ No newline at end of file diff --git a/app/javascript/styles/plus/color/black.scss b/app/javascript/styles/plus/color/black.scss index b299981b0..6aa7ebfdb 100644 --- a/app/javascript/styles/plus/color/black.scss +++ b/app/javascript/styles/plus/color/black.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #000000; -$menu-background-color: #121212; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #121212; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #000000; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #000000; +$menu-bg-color: #121212; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #121212; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #000000; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #1e1e1e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #1e1e1e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #121212; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #121212; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/plus/color/mastodon-dark.scss b/app/javascript/styles/plus/color/mastodon-dark.scss index c3c168316..4ed9a7e07 100644 --- a/app/javascript/styles/plus/color/mastodon-dark.scss +++ b/app/javascript/styles/plus/color/mastodon-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #191b22; -$menu-background-color: #d9e1e8; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #313543; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #282c37; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #191b22; +$menu-bg-color: #d9e1e8; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #313543; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #282c37; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #42485a; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #9baec8; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: lighten($background-color, 14%); -$icon-background-active-color: lighten($background-color, 18%); +$icon-bg-hover-color: lighten($bg-color, 14%); +$icon-bg-active-color: lighten($bg-color, 18%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #fff; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,9 +99,9 @@ $border-color: #393f4f; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 16%); -$scroll-bar-thumb-hover-color: lighten($background-color, 26%); -$scroll-bar-thumb-active-color: lighten($background-color, 32%); +$scroll-bar-thumb-color: lighten($bg-color, 16%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 26%); +$scroll-bar-thumb-active-color: lighten($bg-color, 32%); // App bar color $top-bar-color: #313543; @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: #d9e1e8; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #1f232b; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #1f232b; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/plus/color/mastodon-light.scss b/app/javascript/styles/plus/color/mastodon-light.scss index 54d894fec..d4d84a626 100644 --- a/app/javascript/styles/plus/color/mastodon-light.scss +++ b/app/javascript/styles/plus/color/mastodon-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -22,20 +24,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #eff3f5; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($background-color, 6%); -$menu-background-active-color: darken($background-color, 10%); -$menu-background-active-hover-color: darken($background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #eff3f5; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($bg-color, 6%); +$menu-bg-active-color: darken($bg-color, 10%); +$menu-bg-active-hover-color: darken($bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -55,8 +56,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #282c37; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: darken($background-color, 4%); -$icon-background-active-color: darken($background-color, 8%); +$icon-bg-hover-color: darken($bg-color, 4%); +$icon-bg-active-color: darken($bg-color, 8%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -64,8 +65,8 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -104,31 +105,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #ffffff; $search-bar-color: #d9e1e8; -$search-bar-focus-color: $background-color; +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: #282c37; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #e6ebf0; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #e6ebf0; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/plus/color/plus-classic.scss b/app/javascript/styles/plus/color/plus-classic.scss index 60c8370a2..eba9c0f18 100644 --- a/app/javascript/styles/plus/color/plus-classic.scss +++ b/app/javascript/styles/plus/color/plus-classic.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #db4437; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/plus/color/v1-dark.scss b/app/javascript/styles/plus/color/v1-dark.scss index 77cef824f..d925f3d65 100644 --- a/app/javascript/styles/plus/color/v1-dark.scss +++ b/app/javascript/styles/plus/color/v1-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #303030; -$menu-background-color: #424242; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #424242; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #424242; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #303030; +$menu-bg-color: #424242; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #424242; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #424242; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,16 +57,16 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%); $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -97,38 +98,40 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); -$scroll-bar-thumb-hover-color: lighten($background-color, 30%); -$scroll-bar-thumb-active-color: lighten($background-color, 38%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 30%); +$scroll-bar-thumb-active-color: lighten($bg-color, 38%); // App bar color $top-bar-color: #1565C0; -$search-bar-color: lighten($background-color, 6%); +$search-bar-color: lighten($bg-color, 6%); $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #424242; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #424242; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/plus/color/v1-light.scss b/app/javascript/styles/plus/color/v1-light.scss index 64f8d5842..906b8e459 100644 --- a/app/javascript/styles/plus/color/v1-light.scss +++ b/app/javascript/styles/plus/color/v1-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); @@ -65,8 +66,8 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $top-bar-unread-icon-color: darken($primary-color, 30%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #2196f3; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/plus/color/v2-dark.scss b/app/javascript/styles/plus/color/v2-dark.scss index 8c575bce5..94c381ee7 100644 --- a/app/javascript/styles/plus/color/v2-dark.scss +++ b/app/javascript/styles/plus/color/v2-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #121212; -$menu-background-color: #1e1e1e; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #1e1e1e; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #1e1e1e; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #121212; +$menu-bg-color: #1e1e1e; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #1e1e1e; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #1e1e1e; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,7 +99,7 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +111,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #1e1e1e; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #1e1e1e; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/plus/color/v2-light.scss b/app/javascript/styles/plus/color/v2-light.scss index 20336e96d..9317004e9 100644 --- a/app/javascript/styles/plus/color/v2-light.scss +++ b/app/javascript/styles/plus/color/v2-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,20 +25,19 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #ffffff; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: $background-color; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: $background-color; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #ffffff; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: $bg-color; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: $bg-color; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; @@ -56,8 +57,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,8 +66,8 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); $control-border-color: $icon-color; // Button color @@ -98,38 +99,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); -$scroll-bar-thumb-hover-color: darken($background-color, 30%); -$scroll-bar-thumb-active-color: darken($background-color, 38%); +$scroll-bar-thumb-color: darken($bg-color, 20%); +$scroll-bar-thumb-hover-color: darken($bg-color, 30%); +$scroll-bar-thumb-active-color: darken($bg-color, 38%); // App bar color -$top-bar-color: $background-color; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$top-bar-color: $bg-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/app/javascript/styles/plus/icon_config.scss b/app/javascript/styles/plus/icon_config.scss index e39986220..3e06e0820 100644 --- a/app/javascript/styles/plus/icon_config.scss +++ b/app/javascript/styles/plus/icon_config.scss @@ -6,7 +6,7 @@ $favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1 //$favorite-icon-color: #ffd600; // Star //$favorite-icon-color: #ff4081; // Heart //$favorite-icon-color: #db4437; // +1 -$favorite-icon-color: #ffffff; // inverted +1 +$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin) // Reply icon settings @@ -16,11 +16,13 @@ $reply-icon: "comment"; // blooming // Material Design Icon settings // If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below. -@font-face { - font-family: "Material Icons"; - src: - local("Material Icons"), - //url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub - //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts - url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting -} \ No newline at end of file +//$icon-font-source: google; // Google Fonts +//$icon-font-source: github; // GitHub +$icon-font-source: self; // Self-hosting + +// Material Icon style settings +$icon-font-style: filled; +//$icon-font-style: outlined; +//$icon-font-style: round; +//$icon-font-style: sharp; +//$icon-font-style: two-tone; \ No newline at end of file diff --git a/app/javascript/styles/plus/layout/material-v1.scss b/app/javascript/styles/plus/layout/material-v1.scss index 825deaf8c..926c3325a 100644 --- a/app/javascript/styles/plus/layout/material-v1.scss +++ b/app/javascript/styles/plus/layout/material-v1.scss @@ -30,6 +30,10 @@ $dialog-radius: 2px; $menu-radius: 2px; +// Media radius settings +$media-radius: 0; + + // Navigation drawer item settings $nav-drawer-item-radius: 0; @@ -39,7 +43,9 @@ $avater-radius: 50%; // Rounded cropping //$avater-radius: 2px // Material v1 square +// Chip settings +$outlined-chip: false; // Material v1 styled contained chip + + // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/plus/layout/material-v2.scss b/app/javascript/styles/plus/layout/material-v2.scss index 853d82b15..f79f91005 100644 --- a/app/javascript/styles/plus/layout/material-v2.scss +++ b/app/javascript/styles/plus/layout/material-v2.scss @@ -4,10 +4,12 @@ // Navigation bar radius $nav-bar-radius: 8px; +//$nav-bar-radius: 28px; // full radius // Search bar radius $search-bar-radius: 8px; +//$search-bar-radius: 21px; // full rounded // Bar radius settings @@ -31,6 +33,11 @@ $dialog-radius: 8px; $menu-radius: 8px; +// Media radius settings +$media-radius: 0; +//$media-radius: 2px; + + // Navigation drawer item settings $nav-drawer-item-radius: 8px; // corner rounded //$nav-drawer-item-radius: 32px; // full rounded @@ -43,18 +50,10 @@ $avater-radius: 50%; // Rounded cropping // Chip settings -// If you want to use contained-chip, please comment out below. -.reactions-bar__item { - background: $outlined-chip-color !important; - border: 1px solid $border-color !important; - - &.active { background-color: $outlined-chip-selected-color !important } - - &:hover { background: $outlined-chip-hover-color !important } -} +$outlined-chip: true; // Material v2 styled outlined chip +//$outlined-chip: false; // Material v1 styled contained chip // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: false; // Material v2 styled colored button without shadow +//$button-shadow: true; // Material v1 styled colored button with shadow \ No newline at end of file diff --git a/app/javascript/styles/plus/loader.scss b/app/javascript/styles/plus/loader.scss index e962aa921..80df5cab0 100644 --- a/app/javascript/styles/plus/loader.scss +++ b/app/javascript/styles/plus/loader.scss @@ -2,6 +2,6 @@ @import 'theme/material-icons'; // Plugins -//@import 'plugins/cards'; -//@import 'plugins/dense'; -//@import 'plugins/plus'; \ No newline at end of file +@import 'plugins/cards'; +@import 'plugins/dense'; +@import 'plugins/plus'; \ No newline at end of file diff --git a/app/javascript/styles/plus/plugins/cards.scss b/app/javascript/styles/plus/plugins/cards.scss index c134cbeeb..d9b3906a5 100644 --- a/app/javascript/styles/plus/plugins/cards.scss +++ b/app/javascript/styles/plus/plugins/cards.scss @@ -10,13 +10,13 @@ margin: 2px 0 !important; padding: 8px !important; - > .scrollable { background: $background-color } + > .scrollable { background: $bg-color } } .status { border-bottom: 0; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; &__prepend { padding: 8px 8px 2px 0 } } @@ -28,7 +28,7 @@ @include shadow-1dp; margin: 8px 2px; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; } .notification .status__wrapper.status__wrapper { box-shadow: none !important } diff --git a/app/javascript/styles/plus/plugins/plus.scss b/app/javascript/styles/plus/plugins/plus.scss index 5b220631b..86a5f3e1e 100644 --- a/app/javascript/styles/plus/plugins/plus.scss +++ b/app/javascript/styles/plus/plugins/plus.scss @@ -14,9 +14,8 @@ // favorite icon .star-icon.active, -.star-icon.icon-button.active.active, -.notification__favourite-icon-wrapper .star-icon, -.status__action-bar-button.star-icon.icon-button.active { background: #db4437 } +.star-icon.icon-button.active.activate, +.notification__favourite-icon-wrapper .star-icon { background: #db4437 } .notification__favourite-icon-wrapper { left: -34px; diff --git a/app/javascript/styles/plus/theme/_mixins.scss b/app/javascript/styles/plus/theme/_mixins.scss index 5f573e339..fc965880f 100644 --- a/app/javascript/styles/plus/theme/_mixins.scss +++ b/app/javascript/styles/plus/theme/_mixins.scss @@ -21,5 +21,166 @@ $shadow-color-3: rgba(0,0,0,.12); @mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 } @mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 } @mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 } +@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 } +@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 } +@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 } +@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 } +@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 } +@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 } +@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 } +@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 } @mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2} + +@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } + +@mixin search-bar-hover { + @if $search-bar-hover { + @include shadow-2dp; + background: $search-bar-focus-color; + } +} + +@mixin outlined-chip { + @if $outlined-chip { + .reactions-bar__item { + background: $outlined-chip-color !important; + border: 1px solid $border-color !important; + + &.active { background-color: $outlined-chip-selected-color !important } + + &:hover { background: $outlined-chip-hover-color !important } + } + } +} + +@mixin button-shadow { + @if $button-shadow { + .button, + .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } + } +} + +@mixin icon-font-style { + @if $icon-font-style == filled { font-family: "Material Icons" } + @if $icon-font-style == outlined { font-family: "Material Icons Outlined" } + @if $icon-font-style == round { font-family: "Material Icons Round" } + @if $icon-font-style == sharp { font-family: "Material Icons Sharp" } + @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" } +} + +@mixin icon-font { + @if $icon-font-source == github { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } + + @if $icon-font-source == google { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2'); + } + } + } + + @if $icon-font-source == self { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url(".../fonts/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url(".../fonts/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons"), + url(".../fonts/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url(".../fonts/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url(".../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } +} \ No newline at end of file diff --git a/app/javascript/styles/plus/theme/account.scss b/app/javascript/styles/plus/theme/account.scss index 34a8a1816..b6d517e12 100644 --- a/app/javascript/styles/plus/theme/account.scss +++ b/app/javascript/styles/plus/theme/account.scss @@ -7,8 +7,8 @@ .account { border-bottom: 1px solid $border-color; - .account__display-name { color: $primary-text-color } - .account__display-name strong { color: $secondary-text-color } + .account__display-name, + .account__display-name strong { color: $primary-text-color } &__avatar { border-radius: $avater-radius; @@ -29,9 +29,9 @@ &__header { &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; - border-bottom: 1px solid $border-color; + border-bottom: none; .avatar .account__avatar { border: none } } @@ -89,7 +89,7 @@ .verified { border: none; - background: $verified-background-color; + background: $verified-bg-color; a, &__mark { color: $primary-text-color } @@ -105,7 +105,7 @@ dt { color: $primary-text-color; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; } dd { color: $primary-text-color } @@ -113,11 +113,31 @@ } } + &__account-note { + padding: 8px 16px; + border-bottom: 1px solid $border-color; + + label { + color: $ui-text-color; + margin-bottom: 8px; + } + + textarea { + color: $primary-text-color; + padding: 8px 16px; + border-radius: 0; + + &:focus { background: transparent } + + &::placeholder { color: $tips-text-color } + } + } + &__content { color: $secondary-text-color } } &__section-headline { - background: $text-tab-background-color; + background: $text-tab-bg-color; border-bottom: 1px solid $border-color; a { @@ -131,10 +151,10 @@ &::before, &:after { border: none } - &:focus { background: $text-tab-indicator-background-focus-color } + &:focus { background: $text-tab-indicator-bg-focus-color } } - &:hover { background: $text-tab-indicator-background-hover-color } + &:hover { background: $text-tab-indicator-bg-hover-color } } } } @@ -150,4 +170,8 @@ color: $ui-text-color; small { color: $secondary-text-color } +} + +.account-gallery { + &__item { border-radius: 0 } } \ No newline at end of file diff --git a/app/javascript/styles/plus/theme/base_config.scss b/app/javascript/styles/plus/theme/base_config.scss index 73ff009e1..13fb4ad75 100644 --- a/app/javascript/styles/plus/theme/base_config.scss +++ b/app/javascript/styles/plus/theme/base_config.scss @@ -18,10 +18,7 @@ // Search bar hover settings // You can enable/disable search bar floating. -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ +$search-bar-hover: false; // Status font size in timeline @@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default // Name font size in timeline status $name-font-size: 15px; // mastodon default -//$name-font-size: 16px; // compatible with material design \ No newline at end of file +//$name-font-size: 16px; // compatible with material design + + +// Background image +// If you want to use the local image, please put it in /mastodon-material +$bg-image: none; +//$bg-image: "./image.png"; +//$bg-image: "https://example.com/img/image.png"; + + +// Columns transparency settings +$bar-transparency: 1.0; // opacity +//$bar-transparency: 0.8; // semi-transparent + +$column-transparency: 1.0; // opacity +//$column-transparency: 0.8; // semi-transparent \ No newline at end of file diff --git a/app/javascript/styles/plus/theme/basics.scss b/app/javascript/styles/plus/theme/basics.scss index 4c122d1c6..32ba6dc8c 100644 --- a/app/javascript/styles/plus/theme/basics.scss +++ b/app/javascript/styles/plus/theme/basics.scss @@ -4,7 +4,9 @@ @import '../custom_color', '../custom_layout'; -body { background: $background-color } +body { background: $bg-color } + +.focusable:focus { background: transparent } // Chrome & Safari scroll bar ::-webkit-scrollbar-thumb { @@ -21,6 +23,4 @@ body { background: $background-color } } // Firefox scroll bar -html { - scrollbar-color: $scroll-bar-thumb-color transparent; -} \ No newline at end of file +html { scrollbar-color: $scroll-bar-thumb-color transparent } \ No newline at end of file diff --git a/app/javascript/styles/plus/theme/button.scss b/app/javascript/styles/plus/theme/button.scss index 1231bac98..7c2ad7937 100644 --- a/app/javascript/styles/plus/theme/button.scss +++ b/app/javascript/styles/plus/theme/button.scss @@ -4,6 +4,8 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +@include button-shadow; + .icon-button { color: $icon-button-color; border-radius: 50%; @@ -21,37 +23,54 @@ &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } } &.overlayed { border-radius: 50%; - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; &:hover { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-hover-color; } } &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } - &:active, - &:focus { background-color: transparent } + &:focus { transition: none } +} + +// Checkbox with label +label.icon-button { + &.active { + color: $ui-text-color; + background-color: transparent; + } + + &:hover { + @include material-transition; + background-color: transparent; + } } .text-icon-button { color: $icon-button-color; border-radius: 50%; - font-size: 12px; + font-size: 14px; + + &.active { + background-color: $icon-bg-hover-color; + color: $icon-button-active-color; + } &:hover { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; color: $icon-button-hover-color; } } @@ -91,7 +110,7 @@ } .spoiler-button__overlay__label { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; color: $media-icon-color; } \ No newline at end of file diff --git a/app/javascript/styles/plus/theme/columns.scss b/app/javascript/styles/plus/theme/columns.scss index 54effffd3..af7776a0c 100644 --- a/app/javascript/styles/plus/theme/columns.scss +++ b/app/javascript/styles/plus/theme/columns.scss @@ -10,7 +10,10 @@ margin: 10px 8px; border-radius: $card-radius; - &>.scrollable { background: $list-background-color } + &>.scrollable { + background: $list-bg-color; + opacity: $column-transparency; + } &:last-child { box-shadow: none } } @@ -45,22 +48,23 @@ background: $top-bar-color; color: $top-bar-icon-color; margin: 8px 10px; - padding: 10px 12px; + padding: 10px; border-radius: 50%; + font-size: 20px; &.active { color: $top-bar-icon-active-color; - background: $icon-background-active-color; + background: $icon-bg-active-color; &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } @@ -93,6 +97,7 @@ &__wrapper { @include shadow-4dp; border-radius: $bar-radius; + opacity: $bar-transparency; .announcements { border-top: 1px solid $border-color } @@ -105,11 +110,11 @@ &__collapsible { color: $ui-text-color; - background: $card-background-color; + background: $card-bg-color; border-top: 1px solid $border-color; &-inner { - background: $card-background-color; + background: $card-bg-color; padding: 16px; } @@ -119,9 +124,9 @@ &__back-button { background: $top-bar-color; color: $top-bar-icon-color; - padding: 8px; - margin: auto 0; - border-radius: 50%; + margin: 8px 10px; + padding: 10px; + font-size: 20px; span { display: none } } @@ -129,21 +134,21 @@ .column-subheading { color: $section-text-color; - background: $background-color; + background: $bg-color; padding: 12px 16px; border-top: 1px solid $border-color; } .column-link { color: $ui-text-color; - background: $background-color; + background: $bg-color; padding: 16px; border-radius: $nav-drawer-item-radius; - &:hover { background: $list-background-hover-color } + &:hover { background: $list-bg-hover-color } &:active, - &:focus { background: $list-background-active-color } + &:focus { background: $list-bg-active-color } &__icon { margin-right: 32px; @@ -153,9 +158,9 @@ &--transparent { &.active { color: $ui-text-color; - background: $menu-background-active-color; + background: $menu-bg-active-color; - &:hover { background: $menu-background-active-hover-color } + &:hover { background: $menu-bg-active-hover-color } .fa { color: $icon-color } } @@ -191,14 +196,19 @@ .column-inline-form { padding: 16px 0 16px 16px; - background: $card-background-color; + background: $card-bg-color; .icon-button { margin: 0 16px } } +.columns-area { + background-image: url($bg-image); + background-size: contain; +} + .setting-text { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border-radius: $bar-radius; &::placeholder { color: $tips-text-color } @@ -206,17 +216,17 @@ .empty-column-indicator { color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; font-size: 16px; } .conversation { border-bottom: 1px solid $border-color; padding: 12px; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; &--unread { - background: $list-background-color; + background: $list-bg-color; .conversation__content__relative-time { color: $info-text-color } } @@ -275,15 +285,16 @@ color: $icon-color; padding: 16px; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } } .getting-started { - background: $background-color; + background: $bg-color; color: $ui-text-color; + opacity: $column-transparency; &__wrapper { - background: $background-color; + background: $bg-color; height: auto !important; border-bottom: 1px solid $border-color; } @@ -303,8 +314,9 @@ } &__trends { - background: $background-color; + background: $bg-color; margin-bottom: 0; + opacity: $column-transparency; h4 { color: $section-text-color; @@ -358,7 +370,7 @@ } .announcements { - background: $card-background-color; + background: $card-bg-color; padding: 0; &__container { color: $primary-text-color } @@ -386,6 +398,8 @@ .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important } +@include outlined-chip; + .reactions-bar { .emoji-button { color: $icon-button-color; @@ -424,12 +438,13 @@ .notification { &__filter-bar { - background: $tab-background-color; + background: $tab-bg-color; border-bottom: 1px solid $border-color; z-index: 1; + opacity: $bar-transparency; button { - background: $tab-background-color; + background: $tab-bg-color; color: $tab-indicator-color; font-size: 16px; @@ -442,10 +457,10 @@ &::before, &:after { border: none } - &:focus { background: $tab-indicator-background-focus-color } + &:focus { background: $tab-indicator-bg-focus-color } } - &:hover { background: $tab-indicator-background-hover-color } + &:hover { background: $tab-indicator-bg-hover-color } } } diff --git a/app/javascript/styles/plus/theme/components.scss b/app/javascript/styles/plus/theme/components.scss index ae5bfe158..46483923e 100644 --- a/app/javascript/styles/plus/theme/components.scss +++ b/app/javascript/styles/plus/theme/components.scss @@ -4,6 +4,7 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } .drawer { &__header { @@ -11,11 +12,12 @@ background: $top-bar-color; border-radius: $nav-bar-radius; justify-content: space-around; + opacity: $bar-transparency; a { transition: none } a:hover { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; } } @@ -40,14 +42,15 @@ } &__inner { - background: $card-background-color; + background: $card-bg-color; + opacity: $column-transparency; &.darker { - background: $card-background-color; + background: $card-bg-color; position: inherit; } - &__mastodon { background: $card-background-color } + &__mastodon { background: $card-bg-color } } } @@ -57,6 +60,7 @@ color: $tips-text-color; border-radius: $search-bar-radius; padding: 12px 12px 12px 40px; + opacity: $bar-transparency; &:focus { @include shadow-2dp; @@ -64,6 +68,8 @@ color: $search-bar-text-color; } + &:hover { @include search-bar-hover } + &::placeholder { color: $tips-text-color } } @@ -112,7 +118,7 @@ .search-results { &__header { color: $secondary-text-color; - background-color: $card-background-color; + background-color: $card-bg-color; padding: 16px; .fa { margin-right: 8px } @@ -120,7 +126,7 @@ &__section { h5 { - background: $card-background-color; + background: $card-bg-color; border-bottom: 1px solid $border-color; padding: 16px; color: $section-text-color; @@ -137,6 +143,12 @@ strong { color: $ui-text-color; } + + .navigation-bar__actions .compose__action-bar .icon-button { + width: 36px !important; + height: 36px !important; + padding: 8px; + } } .navigation-panel hr { @@ -146,7 +158,7 @@ .dropdown-menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; padding: 8px 0; border-radius: $menu-radius; @@ -155,11 +167,11 @@ &__item a { font-size: 14px; padding: 8px 16px; - background: $menu-background-color; + background: $menu-bg-color; color: $menu-text-color; &:hover, &:active { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $menu-text-color; } } @@ -173,7 +185,7 @@ .compose-form { .autosuggest-textarea { &__textarea { - background: $text-field-background-color; + background: $text-field-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -182,7 +194,7 @@ &__suggestions { @include shadow-1dp; - background: $menu-background-color; + background: $menu-bg-color; color: $ui-text-color; border-radius: $card-radius; font-size: 16px; @@ -192,40 +204,76 @@ padding: 8px; border-radius: 0; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } &.selected, &:focus, - &:active { background: $menu-background-active-color } + &:active { background: $menu-bg-active-color } } } } - .spoiler-input__input { - color: $ui-text-color; - background: $card-background-color; + .spoiler-input { + &.spoiler-input--visible { margin-bottom: 8px } - &::placeholder { color: $tips-text-color } + &__input { + color: $ui-text-color; + background: $card-bg-color; + border-bottom: 1px solid $border-color; + border-radius: 0; + + &::placeholder { color: $tips-text-color } + } } .compose-form { &__warning { - @include shadow-1dp; color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; padding: 16px; + border: 1px solid $border-color; + border-radius: $card-radius; a { color: $link-text-color } } &__modifiers { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + + .compose-form { + &__upload-thumbnail { border-radius: 0 } + + &__upload__actions { + @include material-transition; + + .icon-button { + color: $media-icon-color; + font-size: 16px; + + &:hover { background-color: transparent } + } + } + } } &__buttons-wrapper { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + padding: 8px; + + .icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + } + + .text-icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + line-height: 20px !important; + } } &__poll-wrapper { @@ -235,7 +283,7 @@ select { color: $ui-text-color; - background-color: $background-color; + background-color: $bg-color; border: 0; &:focus { border-color: $border-active-color } @@ -251,20 +299,16 @@ &:active { background-color: $outlined-button-active-color } &:focus { background-color: $outlined-button-color } - - } - } - &__utilBtns { padding-top: 0 } + .poll__footer { border-top: none } + } &__publish .compose-form__publish-button-wrapper { box-shadow: none } } } -.no-reduce-motion .spoiler-input { - transition-duration: .2s, .2s; -} +.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s } .poll { @@ -283,7 +327,7 @@ &__text input[type=text] { color: $ui-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: 1px solid $border-color; padding: 8px 12px; @@ -292,7 +336,7 @@ &__option input[type=text] { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: none; border-radius: 2px; padding: 8px 16px; @@ -300,9 +344,9 @@ &__chart { border-radius: 0; - background: $poll-bar-color; + background: $progress-indicator-track-color; - &.leading { background: $poll-bar-leading-color } + &.leading { background: $progress-indicator-color } } &__footer { @@ -316,7 +360,7 @@ .privacy-dropdown { &.active .privacy-dropdown__value.active { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; box-shadow: none; @@ -325,7 +369,7 @@ &__dropdown { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $dialog-radius; } @@ -345,7 +389,7 @@ } &.active { - background: $menu-background-active-color; + background: $menu-bg-active-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -355,7 +399,7 @@ } &:hover { - background: $menu-background-active-color; + background: $menu-bg-active-color; .privacy-dropdown__option__content { color: $secondary-text-color; @@ -366,7 +410,7 @@ } &:hover { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -386,7 +430,7 @@ box-shadow: none; border: 1px solid $border-color; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__header { margin-bottom: 4px } @@ -410,14 +454,15 @@ } .block-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; &__container { padding: 24px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } @@ -451,7 +496,7 @@ } .filter-form { - background: $background-color; + background: $bg-color; color: $ui-text-color; &__column { padding: 8px 16px } @@ -466,18 +511,23 @@ &__img { border-radius: $card-radius $card-radius 0 0 } &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px 16px; .display-name { margin-left: 16px; + strong { + font-size: 16px; + color: $primary-text-color; + } + span { color: $secondary-text-color } } } &__extra { - background: $card-background-color; + background: $card-bg-color; border-radius: 0 0 $card-radius $card-radius; .account__header__content { @@ -491,7 +541,8 @@ } .mute-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -500,13 +551,14 @@ &__explanation { margin-top: 16px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } &__cancel-button { box-shadow: none !important; + color: $text-button-color; background: transparent; margin: 0 8px; @@ -531,4 +583,19 @@ margin: 0 0 0 12px; } } +} + +.upload-progress { + color: $ui-text-color; + + &__backdrop { + border-radius: 0; + background: $progress-indicator-track-color; + margin-top: 6px; + } + + &__tracker { + border-radius: 0; + background: $progress-indicator-color; + } } \ No newline at end of file diff --git a/app/javascript/styles/plus/theme/emoji-picker.scss b/app/javascript/styles/plus/theme/emoji-picker.scss index 70e22752d..1b42121be 100644 --- a/app/javascript/styles/plus/theme/emoji-picker.scss +++ b/app/javascript/styles/plus/theme/emoji-picker.scss @@ -7,13 +7,13 @@ .emoji-picker-dropdown { &__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; } &__modifiers__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; button { @@ -31,33 +31,23 @@ border: 0 solid $border-color; &:first-child { - background: $menu-background-color; + background: $menu-bg-color; } } - &-anchors { - color: $icon-button-color; - padding: 0; - } - &-anchor { + color: $text-tab-indicator-color; padding: 10px 4px; - &-selected { - color: $icon-button-active-color; - } + &-bar { background-color: $icon-tab-indicator-active-color } - &-bar { - background-color: $tab-indicator-active-color; - } + &-selected { color: $icon-tab-indicator-hover-color } - &:hover { - color: $icon-button-hover-color; - } + &:hover { color: $icon-tab-indicator-hover-color } } &-search { - background: $menu-background-color; + background: $menu-bg-color; input { outline: none; @@ -76,16 +66,16 @@ &-scroll { padding: 0 8px 8px; - background: $menu-background-color; + background: $menu-bg-color; } &-category-label span { padding: 4px 6px; - background: $menu-background-color; + background: $menu-bg-color; } &-emoji:hover::before { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } &-no-results { color: $secondary-text-color } diff --git a/app/javascript/styles/plus/theme/icons.scss b/app/javascript/styles/plus/theme/icons.scss index 1367647ec..987767544 100644 --- a/app/javascript/styles/plus/theme/icons.scss +++ b/app/javascript/styles/plus/theme/icons.scss @@ -16,26 +16,8 @@ &__icon.fa-fw { color: $icon-color } } - -.fa { vertical-align: sub } // adjust material icon font baseline to other font - -.fa.fa-times, -.fa.fa-eraser, -.fa.fa-plus { vertical-align: middle } // adjustment exception - -.fa.fa-check { vertical-align: initial } - .fa.fa-lock { text-transform: none } -.fa-fw { width: 16px } - -// icon in tab settings -.fa.fa-chevron-left.column-back-button__icon.fa-fw, -.text-btn.column-header__setting-btn .fa.fa-eraser { - font-size: 20px; - margin-right: 16px; -} - .icon-with-badge__badge { background: $badge-color; border: none; diff --git a/app/javascript/styles/plus/theme/material-icons.scss b/app/javascript/styles/plus/theme/material-icons.scss index 747856253..f27de96e8 100644 --- a/app/javascript/styles/plus/theme/material-icons.scss +++ b/app/javascript/styles/plus/theme/material-icons.scss @@ -3,8 +3,17 @@ @import '../custom_config', '../icon_config'; @import '../custom_color', '../custom_layout'; @import 'functions'; +@import 'mixins'; +@include icon-font; + +.fa-fw { + width: 20px; + height: 20px; + font-size: 20px; +} + .fa { &.fa-bars, &.fa-navicon, @@ -64,8 +73,19 @@ &.fa-compress, &.fa-user-times, &.fa-check, - &.fa-quote-right { - font-family: "Material Icons"; + &.fa-quote-right, + &.fa-upload, + &.fa-comments { + @include icon-font-style; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; } } @@ -118,9 +138,11 @@ &.fa-download::before { content: "file_download" } &.fa-arrows-alt::before { content: "fullscreen" } &.fa-compress::before { content: "fullscreen_exit" } - &.fa-user-times::before { content: "delete" } + &.fa-user-times::before { content: "person_remove" } &.fa-check::before { content: "check" } &.fa-quote-right::before { content: "format_quote" } + &.fa-upload::before { content: "file_upload" } + &.fa-comments::before { content: "forum" } } // bookmark icon @@ -148,12 +170,42 @@ .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color } // boost icon -.no-reduce-motion button.icon-button i.fa-retweet { +button.icon-button i.fa-retweet, +button.icon-button i.fa-retweet:hover { height: 18px; width: 18px; transition: none; background-image: url('data:image/svg+xml;utf8,'); } +button.icon-button.disabled i.fa-retweet, +button.icon-button.disabled i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); +} + // dropdown icon -.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} + +// icon in tab settings +.text-btn.column-header__setting-btn { + .fa { + vertical-align: middle; + + &.fa-eraser { margin-right: 8px } // clear notification + } +} + +// top bar icons align +.fa.fa-bell.column-header__icon.fa-fw, +.fa.fa-home.column-header__icon.fa-fw, +.fa.fa-users.column-header__icon.fa-fw, +.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom } + +// uploaded media icons align +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa { + font-size: 20px; + vertical-align: text-bottom; +} + +// search results icons align +.search-results__header .fa { vertical-align: text-bottom } \ No newline at end of file diff --git a/app/javascript/styles/plus/theme/media.scss b/app/javascript/styles/plus/theme/media.scss index 9d0203828..0b8b92acf 100644 --- a/app/javascript/styles/plus/theme/media.scss +++ b/app/javascript/styles/plus/theme/media.scss @@ -6,9 +6,9 @@ .media-gallery { - border-radius: 0; + border-radius: $media-radius; - &__item { border-radius: 0 } + &__item { border-radius: $media-radius } } .media-modal__close { @@ -24,7 +24,7 @@ border: 12px; &:hover { - background: $media-icon-background-hover-color; + background: $media-icon-bg-hover-color; color: $media-icon-hover-color; } @@ -34,7 +34,7 @@ .media-modal { &__nav { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; height: 48px; width: 48px; @@ -50,6 +50,12 @@ &--active { background-color: $media-page-indicator-active-color } } + + &__meta { + bottom: 24px; + + a { color: $media-icon-color } + } } .video-player { @@ -75,7 +81,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } @@ -93,7 +99,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } diff --git a/app/javascript/styles/plus/theme/modal.scss b/app/javascript/styles/plus/theme/modal.scss index 2748c8723..209678c84 100644 --- a/app/javascript/styles/plus/theme/modal.scss +++ b/app/javascript/styles/plus/theme/modal.scss @@ -6,7 +6,8 @@ .confirmation-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $dialog-radius; width: 300px; @@ -18,7 +19,7 @@ &__action-bar { justify-content: flex-end; - background: $card-background-color; + background: $card-bg-color; padding: 8px; } @@ -42,7 +43,7 @@ } .actions-modal { - background: $card-background-color; + background: $card-bg-color; border-radius: $card-radius; ul li:not(:empty) a { @@ -50,7 +51,7 @@ font-size: 16px; &:hover { - background: $card-background-hover-color; + background: $card-bg-hover-color; color: $ui-text-color; } } @@ -58,7 +59,7 @@ .dropdown-menu__separator { border-bottom-color: $border-color } .status { - background: $card-background-color; + background: $card-bg-color; border-bottom-color: $border-color; padding-top: 12px; padding-bottom: 12px; @@ -71,7 +72,8 @@ } .report-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; diff --git a/app/javascript/styles/plus/theme/responsive.scss b/app/javascript/styles/plus/theme/responsive.scss index 9ae304041..d0e1a6635 100644 --- a/app/javascript/styles/plus/theme/responsive.scss +++ b/app/javascript/styles/plus/theme/responsive.scss @@ -81,14 +81,14 @@ @media screen and (min-width: 631px) { .tabs-bar__link { &:hover { - background: $tab-indicator-background-hover-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-hover-color; + border-bottom-color: $tab-bg-color; } &:active, &:focus { - background: $tab-indicator-background-focus-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-focus-color; + border-bottom-color: $tab-bg-color; } } } \ No newline at end of file diff --git a/app/javascript/styles/plus/theme/statuses.scss b/app/javascript/styles/plus/theme/statuses.scss index eedf77c2a..d095c2292 100644 --- a/app/javascript/styles/plus/theme/statuses.scss +++ b/app/javascript/styles/plus/theme/statuses.scss @@ -86,12 +86,15 @@ background: transparent; border-bottom-color: $border-color; } + + &__visibility-icon { color: $icon-color } } .status-card { color: $icon-color; border-color: $border-color; outline: none; + margin-top: 16px; &__image { background: transparent; @@ -110,7 +113,7 @@ &__actions { &>div { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; } @@ -136,7 +139,19 @@ &:hover { background-color: transparent !important } } - &:hover { background-color: $card-background-color } + &.horizontal { + border-radius: 0; + + .status-card { + &__image-preview { border-radius: 0 } + + &__image-image { border-radius: 0 } + } + } +} + +a.status-card { + &:hover { background-color: $card-bg-color } } // Detailed status in mobile @@ -152,7 +167,7 @@ } .detailed-status { - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__display-name { @@ -167,7 +182,7 @@ } &__action-bar { - background: $card-background-color; + background: $card-bg-color; border-top: none; border-bottom: 1px solid $border-color; padding: 12px 0;