Mastodon Material新バージョンのテスト
This commit is contained in:
Rintan
parent
09c15c1d7f
commit
f417d634e7
BIN
app/javascript/fonts/MaterialIcons-Regular.ttf
Normal file
BIN
app/javascript/fonts/MaterialIcons-Regular.ttf
Normal file
Binary file not shown.
Binary file not shown.
@ -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';
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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
|
||||
}
|
||||
//$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;
|
||||
@ -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 }
|
||||
$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
@ -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 }
|
||||
$button-shadow: false; // Material v2 styled colored button without shadow
|
||||
//$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
@ -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 }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -151,3 +171,7 @@
|
||||
|
||||
small { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account-gallery {
|
||||
&__item { border-radius: 0 }
|
||||
}
|
||||
@ -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
|
||||
@ -32,3 +29,18 @@ $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
|
||||
|
||||
|
||||
// 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
|
||||
@ -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;
|
||||
}
|
||||
html { scrollbar-color: $scroll-bar-thumb-color transparent }
|
||||
@ -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;
|
||||
}
|
||||
@ -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 }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -532,3 +584,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -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 }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
|
||||
}
|
||||
|
||||
button.icon-button.disabled i.fa-retweet,
|
||||
button.icon-button.disabled i.fa-retweet:hover {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
|
||||
}
|
||||
|
||||
// dropdown icon
|
||||
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') 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 }
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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
|
||||
}
|
||||
//$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;
|
||||
@ -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 }
|
||||
$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
@ -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 }
|
||||
$button-shadow: false; // Material v2 styled colored button without shadow
|
||||
//$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
@ -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 }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -151,3 +171,7 @@
|
||||
|
||||
small { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account-gallery {
|
||||
&__item { border-radius: 0 }
|
||||
}
|
||||
@ -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
|
||||
@ -32,3 +29,18 @@ $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
|
||||
|
||||
|
||||
// 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
|
||||
@ -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;
|
||||
}
|
||||
html { scrollbar-color: $scroll-bar-thumb-color transparent }
|
||||
@ -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;
|
||||
}
|
||||
@ -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 }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -532,3 +584,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -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 }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
|
||||
}
|
||||
|
||||
button.icon-button.disabled i.fa-retweet,
|
||||
button.icon-button.disabled i.fa-retweet:hover {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
|
||||
}
|
||||
|
||||
// dropdown icon
|
||||
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') 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 }
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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
|
||||
}
|
||||
//$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;
|
||||
@ -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 }
|
||||
$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
@ -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 }
|
||||
$button-shadow: false; // Material v2 styled colored button without shadow
|
||||
//$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
@ -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 }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -151,3 +171,7 @@
|
||||
|
||||
small { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account-gallery {
|
||||
&__item { border-radius: 0 }
|
||||
}
|
||||
@ -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
|
||||
@ -32,3 +29,18 @@ $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
|
||||
|
||||
|
||||
// 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
|
||||
@ -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;
|
||||
}
|
||||
html { scrollbar-color: $scroll-bar-thumb-color transparent }
|
||||
@ -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;
|
||||
}
|
||||
@ -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 }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -532,3 +584,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -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 }
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
|
||||
}
|
||||
|
||||
button.icon-button.disabled i.fa-retweet,
|
||||
button.icon-button.disabled i.fa-retweet:hover {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
|
||||
}
|
||||
|
||||
// dropdown icon
|
||||
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') 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 }
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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);
|
||||
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
||||
@ -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
|
||||
}
|
||||
//$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;
|
||||
@ -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 }
|
||||
$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
@ -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 }
|
||||
$button-shadow: false; // Material v2 styled colored button without shadow
|
||||
//$button-shadow: true; // Material v1 styled colored button with shadow
|
||||
@ -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 }
|
||||
|
||||
@ -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;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user