update material theme to 0.3.0 beta
This commit is contained in:
Rintan
parent
c61f12558e
commit
98944a915f
@ -1,2 +1,2 @@
|
|||||||
@import 'application';
|
@import 'application';
|
||||||
@import 'mastodon-material-dark/loader';
|
@import 'mastodon-material/profiles/mastodon-material-dark/loader';
|
||||||
@ -1,146 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: dark;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #2b90d9;
|
|
||||||
$secondary-color: #2b90d9;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #ffffff;
|
|
||||||
$secondary-text-color: #9baec8;
|
|
||||||
$ui-text-color: #fff;
|
|
||||||
$inverted-text-color: #000000;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #606984;
|
|
||||||
$tips-text-color: #6d7889;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4ea2df;
|
|
||||||
$menu-text-color: #282c37;
|
|
||||||
$top-bar-text-color: $ui-text-color;
|
|
||||||
$search-bar-text-color: $inverted-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #42485a;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #393f4f;
|
|
||||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#42485a, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #9baec8;
|
|
||||||
$icon-hover-color: lighten($icon-color, 30%);
|
|
||||||
$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;
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.7);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.6);
|
|
||||||
$floating-action-button-color: $primary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($primary-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #393f4f;
|
|
||||||
$border-hover-color: lighten($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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;
|
|
||||||
$search-bar-color: lighten($top-bar-color, 6%);
|
|
||||||
$search-bar-focus-color: #ffffff;
|
|
||||||
|
|
||||||
// Tab color
|
|
||||||
$tab-indicator-color: #d9e1e8;
|
|
||||||
$tab-indicator-active-color: $top-bar-icon-color;
|
|
||||||
$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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: light;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #2b90d9;
|
|
||||||
$secondary-color: #2b90d9;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #000000;
|
|
||||||
$secondary-text-color: #5f6368;
|
|
||||||
$ui-text-color: #202124;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #5e5e5e;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #217aba;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $ui-text-color;
|
|
||||||
$search-bar-text-color: $primary-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #e0e0e0;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #ffffff;
|
|
||||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #282c37;
|
|
||||||
$icon-hover-color: darken($icon-color, 30%);
|
|
||||||
$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;
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: lighten($text-button-color, 36%);
|
|
||||||
$text-button-focus-color: lighten($text-button-color, 30%);
|
|
||||||
$floating-action-button-color: $primary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: $primary-color;
|
|
||||||
$toggle-track-active-color: lighten($primary-color, 26%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #dadce0;
|
|
||||||
$border-hover-color: darken($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$scroll-bar-thumb-color: #ccd7e0;
|
|
||||||
$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: #ffffff;
|
|
||||||
$search-bar-color: #d9e1e8;
|
|
||||||
$search-bar-focus-color: $bg-color;
|
|
||||||
|
|
||||||
// Tab color
|
|
||||||
$tab-indicator-color: #282c37;
|
|
||||||
$tab-indicator-active-color: $top-bar-icon-color;
|
|
||||||
$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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: light;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #4285f4;
|
|
||||||
$secondary-color: #db4437;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #000000;
|
|
||||||
$secondary-text-color: #5f6368;
|
|
||||||
$ui-text-color: #202124;
|
|
||||||
$inverted-text-color: #ffffff;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #5e5e5e;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4285f4;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $inverted-text-color;
|
|
||||||
$search-bar-text-color: $primary-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #e0e0e0;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #ffffff;
|
|
||||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #757575;
|
|
||||||
$icon-hover-color: darken($icon-color, 30%);
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
|
||||||
$floating-action-button-color: $secondary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #dadce0;
|
|
||||||
$border-hover-color: darken($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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($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-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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: dark;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #4285f4;
|
|
||||||
$secondary-color: #db4437;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #ffffff;
|
|
||||||
$secondary-text-color: #9aa0a6;
|
|
||||||
$ui-text-color: #e8eaed;
|
|
||||||
$inverted-text-color: #000000;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #9aa0a6;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4285f4;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $ui-text-color;
|
|
||||||
$search-bar-text-color: $inverted-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #2e2e2e;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #1e1e1e;
|
|
||||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #e2e2e3;
|
|
||||||
$icon-hover-color: #ffffff;
|
|
||||||
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
|
|
||||||
$icon-bg-active-color: transparentize(#ffffff, 0.7);
|
|
||||||
$disabled-icon-color: darken($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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
|
||||||
$floating-action-button-color: $primary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #2e2e2e;
|
|
||||||
$border-hover-color: lighten($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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($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-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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,146 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: dark;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #4285f4;
|
|
||||||
$secondary-color: #db4437;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #ffffff;
|
|
||||||
$secondary-text-color: #9aa0a6;
|
|
||||||
$ui-text-color: #e8eaed;
|
|
||||||
$inverted-text-color: #000000;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #9aa0a6;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4285f4;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $ui-text-color;
|
|
||||||
$search-bar-text-color: $inverted-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #2e2e2e;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #1e1e1e;
|
|
||||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #e2e2e3;
|
|
||||||
$icon-hover-color: #ffffff;
|
|
||||||
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
|
|
||||||
$icon-bg-active-color: transparentize(#ffffff, 0.7);
|
|
||||||
$disabled-icon-color: darken($icon-color, 16%);
|
|
||||||
$top-bar-icon-color: $icon-color;
|
|
||||||
$top-bar-icon-hover-color: $icon-hover-color;
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
|
||||||
$floating-action-button-color: $primary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #2e2e2e;
|
|
||||||
$border-hover-color: lighten($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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%);
|
|
||||||
|
|
||||||
// App bar color
|
|
||||||
$top-bar-color: #272727;
|
|
||||||
$search-bar-color: lighten($top-bar-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-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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
// Add your customization below
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
// Add your settings below
|
|
||||||
@import 'color/mastodon-dark';
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
// Add your customization below
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/mixins';
|
|
||||||
|
|
||||||
|
|
||||||
// Navigation bar radius
|
|
||||||
$nav-bar-radius: 2px;
|
|
||||||
|
|
||||||
|
|
||||||
// Search bar radius
|
|
||||||
$search-bar-radius: 2px;
|
|
||||||
|
|
||||||
|
|
||||||
// Bar radius settings
|
|
||||||
$bar-radius: 0;
|
|
||||||
|
|
||||||
|
|
||||||
// Button radius settings
|
|
||||||
$button-radius: 2px;
|
|
||||||
|
|
||||||
|
|
||||||
// Card radius settings
|
|
||||||
$card-radius: 2px;
|
|
||||||
|
|
||||||
|
|
||||||
// Dialog radius settings
|
|
||||||
$dialog-radius: 2px;
|
|
||||||
|
|
||||||
|
|
||||||
// Menu radius settings
|
|
||||||
$menu-radius: 2px;
|
|
||||||
|
|
||||||
|
|
||||||
// Media radius settings
|
|
||||||
$media-radius: 0;
|
|
||||||
|
|
||||||
|
|
||||||
// Navigation drawer item settings
|
|
||||||
$nav-drawer-item-radius: 0;
|
|
||||||
|
|
||||||
|
|
||||||
// Avater cropping settings
|
|
||||||
$avater-radius: 50%; // Rounded cropping
|
|
||||||
//$avater-radius: 2px // Material v1 square
|
|
||||||
|
|
||||||
|
|
||||||
// Chip settings
|
|
||||||
$outlined-chip: false; // Material v1 styled contained chip
|
|
||||||
|
|
||||||
|
|
||||||
// Button shadow
|
|
||||||
$button-shadow: true; // Material v1 styled colored button with shadow
|
|
||||||
|
|
||||||
|
|
||||||
// Floating Action Button size
|
|
||||||
$fab-size: 56px;
|
|
||||||
|
|
||||||
|
|
||||||
// Text area border
|
|
||||||
$text-area-border: false;
|
|
||||||
//$text-area-border: underlined;
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/mixins';
|
|
||||||
|
|
||||||
|
|
||||||
// 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
|
|
||||||
$bar-radius: 0;
|
|
||||||
//$bar-radius: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
// Button radius settings
|
|
||||||
$button-radius: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
// Card radius settings
|
|
||||||
$card-radius: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
// Dialog radius settings
|
|
||||||
$dialog-radius: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
// Menu radius settings
|
|
||||||
$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
|
|
||||||
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
|
|
||||||
|
|
||||||
|
|
||||||
// Avater cropping settings
|
|
||||||
$avater-radius: 50%; // Rounded cropping
|
|
||||||
//$avater-radius: 8px // Material v2 square
|
|
||||||
|
|
||||||
|
|
||||||
// Chip settings
|
|
||||||
$outlined-chip: true; // Material v2 styled outlined chip
|
|
||||||
//$outlined-chip: false; // Material v1 styled contained chip
|
|
||||||
|
|
||||||
|
|
||||||
// Button shadow
|
|
||||||
$button-shadow: false; // Material v2 styled colored button without shadow
|
|
||||||
//$button-shadow: true; // Material v1 styled colored button with shadow
|
|
||||||
|
|
||||||
|
|
||||||
// Floating Action Button size
|
|
||||||
$fab-size: 56px; // Regular
|
|
||||||
//$fab-size: 40px; // Mini
|
|
||||||
|
|
||||||
|
|
||||||
// Text area border
|
|
||||||
$text-area-border: false;
|
|
||||||
//$text-area-border: underlined;
|
|
||||||
//$text-area-border: outlined;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
@import 'theme/theme';
|
|
||||||
@import 'theme/material-icons';
|
|
||||||
|
|
||||||
// Plugins
|
|
||||||
@import 'plugins/astarte';
|
|
||||||
//@import 'plugins/cards';
|
|
||||||
//@import 'plugins/dense';
|
|
||||||
//@import 'plugins/plus';
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import '../theme/mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.column {
|
|
||||||
box-shadow: none !important;
|
|
||||||
margin: 2px 0 !important;
|
|
||||||
padding: 8px !important;
|
|
||||||
|
|
||||||
> .scrollable { background: $bg-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
border-bottom: 0;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
background: $card-bg-color;
|
|
||||||
|
|
||||||
&__prepend { padding: 8px 8px 2px 0 }
|
|
||||||
}
|
|
||||||
|
|
||||||
.account { border-bottom: 0 !important }
|
|
||||||
|
|
||||||
.status__wrapper.status__wrapper,
|
|
||||||
.notification.notification {
|
|
||||||
@include shadow-1dp;
|
|
||||||
margin: 8px 2px;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
background: $card-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
|
|
||||||
|
|
||||||
.notification__filter-bar {
|
|
||||||
@include non-overflow-shadow-4dp;
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@use "sass:string";
|
|
||||||
|
|
||||||
|
|
||||||
// convert hex color code to svg styled ascii color code
|
|
||||||
@function svg-color ($color) {
|
|
||||||
@return '%23' + string.slice(inspect($color), 2, 7);
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
|
|
||||||
|
|
||||||
|
|
||||||
// Color scheme
|
|
||||||
@import '../color/v1-light';
|
|
||||||
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
|
||||||
// @import 'color/v2-light';
|
|
||||||
|
|
||||||
|
|
||||||
// Layout profile
|
|
||||||
@import '../layout/material-v1';
|
|
||||||
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
|
||||||
// @import 'layout/material-v2';
|
|
||||||
|
|
||||||
|
|
||||||
// Search bar hover settings
|
|
||||||
// You can enable/disable search bar floating.
|
|
||||||
$search-bar-hover: false;
|
|
||||||
|
|
||||||
|
|
||||||
// Status font size in timeline
|
|
||||||
$status-font-size: 15px; // mastodon default
|
|
||||||
//$status-font-size: 16px; // compatible with material design
|
|
||||||
|
|
||||||
|
|
||||||
// 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 "../"
|
|
||||||
$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
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
body,
|
|
||||||
body.embed { background: $bg-color }
|
|
||||||
|
|
||||||
.focusable:focus { background: transparent }
|
|
||||||
|
|
||||||
// Chrome & Safari scroll bar
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: $scroll-bar-thumb-color;
|
|
||||||
|
|
||||||
&:hover { background: $scroll-bar-thumb-hover-color }
|
|
||||||
&:active { background: $scroll-bar-thumb-active-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track,
|
|
||||||
::-webkit-scrollbar-track:hover,
|
|
||||||
::-webkit-scrollbar-track:active {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Firefox scroll bar
|
|
||||||
html { scrollbar-color: $scroll-bar-thumb-color transparent }
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
@include button-shadow;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
color: $icon-button-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $icon-button-active-color;
|
|
||||||
|
|
||||||
&:hover { color: $icon-button-active-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled { color: $disabled-icon-color }
|
|
||||||
|
|
||||||
&.inverted {
|
|
||||||
color: $icon-button-color;
|
|
||||||
|
|
||||||
&.active { color: $icon-button-active-color }
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $icon-button-hover-color;
|
|
||||||
background-color: $icon-bg-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus { background-color: transparent }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.overlayed {
|
|
||||||
@include icon-button;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
color: $media-icon-color;
|
|
||||||
padding: 4px;
|
|
||||||
line-height: 20px !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
color: $media-icon-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__counter {
|
|
||||||
width: 16px;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include material-transition;
|
|
||||||
color: $icon-button-hover-color;
|
|
||||||
background-color: $icon-bg-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus { background-color: transparent }
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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: 14px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: $icon-bg-hover-color;
|
|
||||||
color: $icon-button-active-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $icon-bg-hover-color;
|
|
||||||
color: $icon-button-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
background-color: $contained-button-color;
|
|
||||||
border-radius: $button-radius;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background-color: $contained-button-color;
|
|
||||||
border-radius: $button-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include shadow-2dp;
|
|
||||||
background-color: $contained-button-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.logo-button {
|
|
||||||
background: $contained-button-color;
|
|
||||||
margin: 2px;
|
|
||||||
|
|
||||||
&:hover { background: $contained-button-hover-color }
|
|
||||||
|
|
||||||
.button--destructive:hover { background: $contained-button-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.button--block { margin: 8px 0 }
|
|
||||||
|
|
||||||
&.button-secondary {
|
|
||||||
color: $text-button-color;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.confirmation-modal__cancel-button {
|
|
||||||
box-shadow: none;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 0 8px;
|
|
||||||
color: $text-button-color;
|
|
||||||
|
|
||||||
&:hover { background: $text-button-hover-color }
|
|
||||||
|
|
||||||
&:focus { background: $text-button-focus-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler-button__overlay__label {
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
border-radius: $button-radius;
|
|
||||||
color: $media-icon-color;
|
|
||||||
}
|
|
||||||
@ -1,511 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
.column {
|
|
||||||
@include shadow-1dp;
|
|
||||||
padding: 0;
|
|
||||||
margin: 10px 8px;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&>.scrollable {
|
|
||||||
background: $list-bg-color;
|
|
||||||
opacity: $column-transparency;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child { box-shadow: none }
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-header {
|
|
||||||
background: $top-bar-color;
|
|
||||||
border-radius: $bar-radius;
|
|
||||||
height: 56px;
|
|
||||||
|
|
||||||
> button {
|
|
||||||
padding: 16px;
|
|
||||||
color: $top-bar-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.column-header__back-button { color: $top-bar-icon-color }
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
.column-header__icon {
|
|
||||||
color: $top-bar-unread-icon-color;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
margin-right: 16px;
|
|
||||||
color: $top-bar-icon-color;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__buttons { height: 56px }
|
|
||||||
|
|
||||||
&__button {
|
|
||||||
@include icon-button;
|
|
||||||
background: $top-bar-color;
|
|
||||||
color: $top-bar-icon-color;
|
|
||||||
padding: 8px;
|
|
||||||
margin: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-sizing: content-box;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $top-bar-icon-active-color;
|
|
||||||
background: $icon-bg-active-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $top-bar-icon-hover-color;
|
|
||||||
background: $icon-bg-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $top-bar-icon-hover-color;
|
|
||||||
background: $icon-bg-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__setting-btn {
|
|
||||||
color: $icon-button-color;
|
|
||||||
padding: 8px 0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $icon-button-hover-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa { font-size: 20px }
|
|
||||||
|
|
||||||
span { vertical-align: middle }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__setting-arrows {
|
|
||||||
font-size: 16px;
|
|
||||||
border-bottom: 8px;
|
|
||||||
|
|
||||||
.column-header__setting-btn {
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
&:last-child { padding-right: 8px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
@include shadow-4dp;
|
|
||||||
border-radius: $bar-radius;
|
|
||||||
opacity: $bar-transparency;
|
|
||||||
|
|
||||||
.announcements { border-top: 1px solid $border-color }
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
@include shadow-4dp;
|
|
||||||
|
|
||||||
&::before { background: transparent }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__collapsible {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
|
|
||||||
&-inner {
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.collapsed { border-top: none }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__back-button {
|
|
||||||
background: $top-bar-color;
|
|
||||||
color: $top-bar-icon-color;
|
|
||||||
margin: 8px 10px;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 20px;
|
|
||||||
|
|
||||||
span { display: none }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-subheading {
|
|
||||||
color: $section-text-color;
|
|
||||||
background: $bg-color;
|
|
||||||
padding: 12px 16px;
|
|
||||||
margin-top: 8px;
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-link {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background: $bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: $nav-drawer-item-radius;
|
|
||||||
|
|
||||||
&:hover { background: $list-bg-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus { background: $list-bg-active-color }
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
margin-right: 32px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--transparent {
|
|
||||||
&.active {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background: $menu-bg-active-color;
|
|
||||||
|
|
||||||
&:hover { background: $menu-bg-active-hover-color }
|
|
||||||
|
|
||||||
.fa { color: $icon-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
.fa { color: $icon-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa { color: $icon-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-settings {
|
|
||||||
&__section {
|
|
||||||
color: $section-text-color;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__row .text-btn { margin-bottom: 0 }
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-back-button {
|
|
||||||
@include shadow-4dp;
|
|
||||||
background: $top-bar-color;
|
|
||||||
color: $top-bar-icon-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
span { visibility: hidden } // hide "back" string
|
|
||||||
|
|
||||||
&--slim-button { top: -54px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-inline-form {
|
|
||||||
padding: 16px 0 16px 16px;
|
|
||||||
background: $card-bg-color;
|
|
||||||
|
|
||||||
.icon-button { margin: 0 16px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.columns-area {
|
|
||||||
@include bg-image;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-text {
|
|
||||||
color: $primary-text-color;
|
|
||||||
background: $text-field-bg-color;
|
|
||||||
border-radius: $bar-radius;
|
|
||||||
|
|
||||||
&::placeholder { color: $tips-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-column-indicator {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
background: $card-bg-color;
|
|
||||||
font-size: 16px;
|
|
||||||
contain: initial; // padding fix
|
|
||||||
}
|
|
||||||
|
|
||||||
.conversation {
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
padding: 12px;
|
|
||||||
background: $list-bg-inactive-color;
|
|
||||||
|
|
||||||
&--unread {
|
|
||||||
background: $list-bg-color;
|
|
||||||
|
|
||||||
.conversation__content__relative-time { color: $info-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__unread { background: $primary-color }
|
|
||||||
|
|
||||||
&__avatar { padding: 0 16px 0 0 }
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&__relative-time {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $info-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__names,
|
|
||||||
&__names a {
|
|
||||||
color: $primary-text-color;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// read status in notification column
|
|
||||||
.muted {
|
|
||||||
.status {
|
|
||||||
&__content {
|
|
||||||
color: $read-primary-text-color;
|
|
||||||
|
|
||||||
p { color: $read-primary-text-color }
|
|
||||||
|
|
||||||
a { color: $read-secondary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__display-name strong { color: $read-primary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll {
|
|
||||||
color: $read-primary-text-color;
|
|
||||||
|
|
||||||
&__chart {
|
|
||||||
background: $read-poll-bar-color;
|
|
||||||
|
|
||||||
&.leading { background: $read-poll-bar-leading-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer,
|
|
||||||
&__link { color: $read-ui-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-gap { border-bottom: 1px solid $border-color }
|
|
||||||
|
|
||||||
.load-more {
|
|
||||||
color: $icon-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
&:hover { background: $menu-bg-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.getting-started {
|
|
||||||
background: $bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
opacity: $column-transparency;
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
background: $bg-color;
|
|
||||||
height: auto !important;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a { color: $ui-text-color }
|
|
||||||
|
|
||||||
p a { color: $link-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__trends {
|
|
||||||
background: $bg-color;
|
|
||||||
margin-bottom: 0;
|
|
||||||
opacity: $column-transparency;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
color: $section-text-color;
|
|
||||||
padding: 12px 16px;
|
|
||||||
margin-top: 8px;
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.trends {
|
|
||||||
&__header {
|
|
||||||
color: $section-text-color;
|
|
||||||
background: transparent;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
.fa { margin-right: 8px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
padding: 16px;
|
|
||||||
border-bottom: none;
|
|
||||||
|
|
||||||
&__name {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
a { color: $primary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__current {
|
|
||||||
padding-right: 16px;
|
|
||||||
margin-left: 4px;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__sparkline path {
|
|
||||||
stroke: $primary-color;
|
|
||||||
fill: $primary-color;
|
|
||||||
fill-opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-toggle {
|
|
||||||
&__label {
|
|
||||||
color: $ui-text-color;
|
|
||||||
margin: 8px 8px 8px 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.announcements {
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 0 8px;
|
|
||||||
|
|
||||||
&__container { color: $primary-text-color }
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
padding: 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
&__unread { background: $badge-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__pagination {
|
|
||||||
color: $ui-text-color;
|
|
||||||
padding: 16px;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
padding: 8px;
|
|
||||||
margin: 0 4px;
|
|
||||||
line-height: normal !important;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
span { vertical-align: super }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
margin-top: 16px;
|
|
||||||
width: calc(100% - 72px);
|
|
||||||
|
|
||||||
.emoji-button {
|
|
||||||
color: $icon-button-color;
|
|
||||||
font-size: 20px;
|
|
||||||
|
|
||||||
&:hover { color: $icon-button-hover-color }
|
|
||||||
|
|
||||||
&:active { color: $icon-button-active-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
background: $contained-chip-color;
|
|
||||||
border-radius: 17px;
|
|
||||||
margin: 2px 4px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: $contained-chip-selected-color;
|
|
||||||
|
|
||||||
.reactions-bar__item__count { color: $chip-selected-text-color }
|
|
||||||
|
|
||||||
&:hover { background-color: $contained-chip-selected-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__emoji {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin: 4px 0 4px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__count {
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 0 12px 0 8px;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover { background: $contained-chip-hover-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification {
|
|
||||||
&__filter-bar {
|
|
||||||
background: $tab-bg-color;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
z-index: 1;
|
|
||||||
opacity: $bar-transparency;
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: $tab-bg-color;
|
|
||||||
color: $tab-indicator-color;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
span { font-size: 14px }
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $tab-indicator-active-color;
|
|
||||||
border-bottom: 4px solid $tab-indicator-active-color;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&:after { border: none }
|
|
||||||
|
|
||||||
&:focus { background: $tab-indicator-bg-focus-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover { background: $tab-indicator-bg-hover-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__message {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
margin: 0 16px 0 70px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__display-name:hover { color: inherit }
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-favourite .status.status-direct {
|
|
||||||
.icon-button.disabled { color: $disabled-icon-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.relationship-tag {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background-color: $relationship-tag-color;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 17px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-list__list a { color: $secondary-text-color }
|
|
||||||
|
|
||||||
// unread notification
|
|
||||||
.notification.unread:before, .status__wrapper.unread:before { border-left: none }
|
|
||||||
|
|
||||||
.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
|
|
||||||
@ -1,647 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
@include text-area-border;
|
|
||||||
|
|
||||||
.modal-root {
|
|
||||||
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
|
||||||
|
|
||||||
&__overlay { background-color: rgba(0,0,0,.32) !important }
|
|
||||||
|
|
||||||
&__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer {
|
|
||||||
&__header {
|
|
||||||
@include shadow-4dp;
|
|
||||||
background: $top-bar-color;
|
|
||||||
border-radius: $nav-bar-radius;
|
|
||||||
justify-content: space-around;
|
|
||||||
opacity: $bar-transparency;
|
|
||||||
|
|
||||||
a { transition: none }
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
background: $icon-bg-hover-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tab {
|
|
||||||
color: $top-bar-icon-color;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 10px auto 10px;
|
|
||||||
padding: 8px;
|
|
||||||
flex: none;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border-bottom: none;
|
|
||||||
text-align: justify;
|
|
||||||
|
|
||||||
&:hover { color: $top-bar-icon-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__pager {
|
|
||||||
@include shadow-1dp;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__inner {
|
|
||||||
background: $card-bg-color;
|
|
||||||
opacity: $column-transparency;
|
|
||||||
|
|
||||||
&.darker {
|
|
||||||
background: $card-bg-color;
|
|
||||||
position: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__mastodon { background: $card-bg-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
&__input {
|
|
||||||
background: $search-bar-color;
|
|
||||||
color: $tips-text-color;
|
|
||||||
border-radius: $search-bar-radius;
|
|
||||||
padding: 12px 12px 12px 40px;
|
|
||||||
opacity: $bar-transparency;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include shadow-2dp;
|
|
||||||
background: $search-bar-focus-color;
|
|
||||||
color: $search-bar-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover { @include search-bar-hover }
|
|
||||||
|
|
||||||
&::placeholder { color: $tips-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
.fa {
|
|
||||||
color: $icon-color;
|
|
||||||
font-size: 20px;
|
|
||||||
top: 12px;
|
|
||||||
right: unset;
|
|
||||||
left: 12px;
|
|
||||||
height: 6px;
|
|
||||||
transition: none;
|
|
||||||
|
|
||||||
&.active { opacity: 1 }
|
|
||||||
|
|
||||||
&-search {
|
|
||||||
transform: none;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
&-times-circle.active {
|
|
||||||
right: 16px;
|
|
||||||
left: unset;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-popout {
|
|
||||||
@include shadow-2dp;
|
|
||||||
background: $search-bar-focus-color;
|
|
||||||
border-radius: 0px $bar-radius;
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
margin-top: 0;
|
|
||||||
color: $tips-text-color;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
color: $search-bar-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results {
|
|
||||||
&__header {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
background-color: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
.fa { margin-right: 16px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__section {
|
|
||||||
h5 {
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
padding: 16px;
|
|
||||||
color: $section-text-color;
|
|
||||||
|
|
||||||
.fa { margin-right: 8px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-bar {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
padding: 14px;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: $ui-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-bar__actions .compose__action-bar .icon-button {
|
|
||||||
width: 36px !important;
|
|
||||||
height: 36px !important;
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $icon-hover-color;
|
|
||||||
background: $icon-bg-active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-panel hr {
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
margin: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-spacer { margin: 8px 0 }
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
@include shadow-8dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-radius: $menu-radius;
|
|
||||||
|
|
||||||
&__arrow { visibility: hidden }
|
|
||||||
|
|
||||||
&__item a {
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
color: $menu-text-color;
|
|
||||||
|
|
||||||
&:hover, &:active {
|
|
||||||
background: $menu-bg-hover-color;
|
|
||||||
color: $menu-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__separator {
|
|
||||||
margin: 8px 0;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form {
|
|
||||||
.autosuggest-textarea {
|
|
||||||
&__textarea {
|
|
||||||
background: $text-field-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
padding: 8px 42px 8px 16px;
|
|
||||||
|
|
||||||
&::placeholder { color: $tips-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__suggestions {
|
|
||||||
@include shadow-1dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 8px 0;
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:hover { background: $menu-bg-hover-color }
|
|
||||||
|
|
||||||
&.selected,
|
|
||||||
&:focus,
|
|
||||||
&:active { background: $menu-bg-active-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler-input {
|
|
||||||
&.spoiler-input--visible { margin-bottom: 16px }
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:hover { border-color: $border-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus { border-bottom: 2px solid $border-active-color }
|
|
||||||
|
|
||||||
&::placeholder { color: $tips-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form {
|
|
||||||
&__warning {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
a { color: $link-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__modifiers {
|
|
||||||
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-bg-color;
|
|
||||||
color: $tips-text-color;
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-icon-button {
|
|
||||||
width: 20px !important;
|
|
||||||
height: 20px !important;
|
|
||||||
padding: 8px;
|
|
||||||
line-height: 20px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__poll-wrapper {
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
|
|
||||||
ul { padding: 16px 12px 16px 0 }
|
|
||||||
|
|
||||||
select {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background-color: $bg-color;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
&:focus { border-color: $border-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.button-secondary {
|
|
||||||
box-shadow: none;
|
|
||||||
color: $text-button-color;
|
|
||||||
|
|
||||||
&:hover { background-color: $text-button-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus { background-color: $text-button-focus-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll__footer { border-top: none }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
|
|
||||||
|
|
||||||
|
|
||||||
.poll {
|
|
||||||
.button { margin-right: 8px }
|
|
||||||
|
|
||||||
li { margin-bottom: 0 }
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
border: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
flex: 0 0 20px;
|
|
||||||
padding: 18px;
|
|
||||||
margin: 0 2px;
|
|
||||||
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
|
|
||||||
|
|
||||||
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
|
|
||||||
|
|
||||||
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
|
|
||||||
|
|
||||||
&.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
|
|
||||||
|
|
||||||
&.checkbox {
|
|
||||||
border-radius: 2px;
|
|
||||||
border: 2px solid $control-border-color;
|
|
||||||
padding: 8px;
|
|
||||||
margin: 8px 10px;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text input[type=text] {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background: $text-field-bg-color;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
padding: 8px 12px;
|
|
||||||
|
|
||||||
&:focus { border-color: $border-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__option {
|
|
||||||
padding: 16px 0 8px;
|
|
||||||
|
|
||||||
input[type=text] {
|
|
||||||
color: $primary-text-color;
|
|
||||||
background: $text-field-bg-color;
|
|
||||||
border: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text { line-height: 34px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__chart {
|
|
||||||
border-radius: 0;
|
|
||||||
background: $progress-indicator-track-color;
|
|
||||||
|
|
||||||
&.leading { background: $progress-indicator-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
color: $ui-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__link { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown {
|
|
||||||
&.active .privacy-dropdown__value.active {
|
|
||||||
background: $icon-bg-hover-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
.icon-button { color: $icon-button-active-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__dropdown {
|
|
||||||
@include shadow-8dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
border-radius: $dialog-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__option {
|
|
||||||
color: $icon-color;
|
|
||||||
padding: 8px 16px;
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
font-size: 20px;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: $menu-bg-active-color;
|
|
||||||
color: $icon-hover-color;
|
|
||||||
|
|
||||||
.privacy-dropdown__option__content {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menu-bg-active-color;
|
|
||||||
|
|
||||||
.privacy-dropdown__option__content {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menu-bg-hover-color;
|
|
||||||
color: $icon-hover-color;
|
|
||||||
|
|
||||||
.privacy-dropdown__option__content {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.character-counter {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-indicator {
|
|
||||||
box-shadow: none;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
&__header { margin-bottom: 4px }
|
|
||||||
|
|
||||||
&__display {
|
|
||||||
&-name {
|
|
||||||
color: $primary-text-color;
|
|
||||||
padding-right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-avatar { margin-right: 8px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
p { margin-bottom: 16px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-list {
|
|
||||||
&__list a { color: $secondary-text-color }
|
|
||||||
|
|
||||||
&.compact .fa { color: $icon-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&__container { padding: 24px }
|
|
||||||
|
|
||||||
&__action-bar {
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 8px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__cancel-button {
|
|
||||||
box-shadow: none !important;
|
|
||||||
color: $text-button-color;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-focus-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more {
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
&:hover { background: transparent }
|
|
||||||
}
|
|
||||||
|
|
||||||
.autosuggest-hashtag {
|
|
||||||
&__name { color: $menu-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-form {
|
|
||||||
background: $bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
&__column { padding: 8px 16px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.directory {
|
|
||||||
&__card {
|
|
||||||
@include shadow-1dp;
|
|
||||||
margin: 8px 4px;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&__img { border-radius: $card-radius $card-radius 0 0 }
|
|
||||||
|
|
||||||
&__bar {
|
|
||||||
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-bg-color;
|
|
||||||
border-radius: 0 0 $card-radius $card-radius;
|
|
||||||
|
|
||||||
.account__header__content {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accounts-table__count { padding: 16px 0 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mute-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&__container { padding: 24px }
|
|
||||||
|
|
||||||
&__explanation { margin-top: 16px }
|
|
||||||
|
|
||||||
&__action-bar {
|
|
||||||
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;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-focus-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-toggle {
|
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
color: $ui-text-color;
|
|
||||||
margin: 0 0 0 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-progress {
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
&__backdrop {
|
|
||||||
border-radius: 0;
|
|
||||||
background: $progress-indicator-track-color;
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tracker {
|
|
||||||
border-radius: 0;
|
|
||||||
background: $progress-indicator-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-button { padding: 8px }
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.public-layout {
|
|
||||||
.header {
|
|
||||||
@include shadow-4dp;
|
|
||||||
background: $top-bar-color;
|
|
||||||
border-radius: $nav-bar-radius;
|
|
||||||
margin: 16px 0;
|
|
||||||
|
|
||||||
.brand:hover { background: $tab-indicator-bg-hover-color }
|
|
||||||
|
|
||||||
.nav-link,
|
|
||||||
.nav-link.optional {
|
|
||||||
color: $top-bar-text-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $tab-indicator-bg-hover-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button {
|
|
||||||
background: transparent;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:hover { background: $tab-indicator-bg-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__meta { margin-top: 16px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status { padding: 16px }
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
padding-top: 16px;
|
|
||||||
padding-bottom: 64px;
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
h4 { color: $ui-text-color }
|
|
||||||
|
|
||||||
ul a { color: $secondary-text-color }
|
|
||||||
|
|
||||||
.grid .column-2 h4 a { color: $ui-text-color }
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
svg { fill: $icon-color }
|
|
||||||
|
|
||||||
&:hover svg { fill: $icon-hover-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.react-toggle {
|
|
||||||
width: 36px;
|
|
||||||
height: 16px;
|
|
||||||
border-radius: 15px;
|
|
||||||
|
|
||||||
&-track {
|
|
||||||
background-color: $toggle-track-color;
|
|
||||||
margin: 4px;
|
|
||||||
width: 36px;
|
|
||||||
height: 16px;
|
|
||||||
|
|
||||||
&-check { visibility: hidden }
|
|
||||||
&-x { visibility: hidden }
|
|
||||||
}
|
|
||||||
|
|
||||||
&-thumb {
|
|
||||||
@include shadow-1dp;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: 0;
|
|
||||||
background-color: $toggle-thumb-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--checked {
|
|
||||||
.react-toggle{
|
|
||||||
&-track { background-color: $toggle-track-active-color }
|
|
||||||
|
|
||||||
&-thumb {
|
|
||||||
background-color: $toggle-thumb-active-color;
|
|
||||||
left: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio-button {
|
|
||||||
padding: 8px 0;
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
border: 2px solid $border-color;
|
|
||||||
|
|
||||||
&.checked {
|
|
||||||
border-color: $icon-button-active-color;
|
|
||||||
background: $icon-button-active-color;
|
|
||||||
padding: 3px;
|
|
||||||
background-clip: content-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form__sensitive-button .checkbox {
|
|
||||||
border: 2px solid $border-color;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: $primary-color;
|
|
||||||
background: $primary-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
.emoji-picker-dropdown {
|
|
||||||
&__menu {
|
|
||||||
@include shadow-8dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
border-radius: $menu-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__modifiers__menu {
|
|
||||||
@include shadow-8dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
border-radius: $menu-radius;
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart {
|
|
||||||
width: 388px !important;
|
|
||||||
font-size: 14px;
|
|
||||||
color: $menu-text-color;
|
|
||||||
|
|
||||||
&-bar {
|
|
||||||
border: 0 solid $border-color;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
background: $menu-bg-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-anchor {
|
|
||||||
color: $text-tab-indicator-color;
|
|
||||||
padding: 10px 4px;
|
|
||||||
|
|
||||||
&-bar { background-color: $icon-tab-indicator-active-color }
|
|
||||||
|
|
||||||
&-selected { color: $icon-tab-indicator-hover-color }
|
|
||||||
|
|
||||||
&:hover { color: $icon-tab-indicator-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&-search {
|
|
||||||
background: $menu-bg-color;
|
|
||||||
|
|
||||||
input {
|
|
||||||
outline: none;
|
|
||||||
padding: 8px;
|
|
||||||
background: $search-bar-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border: 0;
|
|
||||||
border-radius: $search-bar-radius;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include shadow-2dp;
|
|
||||||
background: $search-bar-focus-color;
|
|
||||||
color: $search-bar-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-scroll {
|
|
||||||
padding: 0 8px 8px;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-category {
|
|
||||||
&-label span {
|
|
||||||
padding: 4px 6px;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&-no-results { color: $secondary-text-color }
|
|
||||||
}
|
|
||||||
@ -1,260 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@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,
|
|
||||||
&.fa-reorder,
|
|
||||||
&.fa-globe,
|
|
||||||
&.fa-cog,
|
|
||||||
&.fa-cogs,
|
|
||||||
&.fa-gears,
|
|
||||||
&.fa-sign-out,
|
|
||||||
&.fa-search,
|
|
||||||
&.fa-times,
|
|
||||||
&.fa-times-circle,
|
|
||||||
&.fa-close,
|
|
||||||
&.fa-remove,
|
|
||||||
&.fa-chevron-down,
|
|
||||||
&.fa-ellipsis-v,
|
|
||||||
&.fa-paperclip,
|
|
||||||
&.fa-tasks,
|
|
||||||
&.fa-plus,
|
|
||||||
&.fa-unlock,
|
|
||||||
&.fa-lock,
|
|
||||||
&.fa-envelope,
|
|
||||||
&.fa-home,
|
|
||||||
&.fa-bullhorn,
|
|
||||||
&.fa-sliders,
|
|
||||||
&.fa-chevron-left,
|
|
||||||
&.fa-chevron-right,
|
|
||||||
&.fa-reply,
|
|
||||||
&.fa-reply-all,
|
|
||||||
&.fa-share-alt,
|
|
||||||
&.fa-star,
|
|
||||||
&.fa-bookmark,
|
|
||||||
&.fa-ellipsis-h,
|
|
||||||
&.fa-bell,
|
|
||||||
&.fa-bell-o,
|
|
||||||
&.fa-eraser,
|
|
||||||
&.fa-users,
|
|
||||||
&.fa-file-text,
|
|
||||||
&.fa-user-plus,
|
|
||||||
&.fa-address-book,
|
|
||||||
&.fa-address-book-o,
|
|
||||||
&.fa-list,
|
|
||||||
&.fa-list-ul,
|
|
||||||
&.fa-eye,
|
|
||||||
&.fa-eye-slash,
|
|
||||||
&.fa-pencil,
|
|
||||||
&.fa-trash,
|
|
||||||
&.fa-play,
|
|
||||||
&.fa-external-link,
|
|
||||||
&.fa-retweet,
|
|
||||||
&.fa-link,
|
|
||||||
&.fa-pause,
|
|
||||||
&.fa-volume-up,
|
|
||||||
&.fa-volume-off,
|
|
||||||
&.fa-expand,
|
|
||||||
&.fa-download,
|
|
||||||
&.fa-arrows-alt,
|
|
||||||
&.fa-compress,
|
|
||||||
&.fa-user-times,
|
|
||||||
&.fa-check,
|
|
||||||
&.fa-quote-right,
|
|
||||||
&.fa-upload,
|
|
||||||
&.fa-comments,
|
|
||||||
&.fa-angle-right,
|
|
||||||
&.fa-thumb-tack {
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa {
|
|
||||||
&.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
|
|
||||||
&.fa-globe::before { content: "public" }
|
|
||||||
&.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
|
|
||||||
&.fa-sign-out::before { content: "exit_to_app" }
|
|
||||||
&.fa-search::before { content: "search" }
|
|
||||||
&.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
|
|
||||||
&.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
|
|
||||||
&.fa-paperclip::before { content: "attach_file" }
|
|
||||||
&.fa-tasks::before { content: "poll" }
|
|
||||||
&.fa-plus::before { content: "add" }
|
|
||||||
&.fa-unlock::before { content: "lock_open" }
|
|
||||||
&.fa-lock::before { content: "lock" }
|
|
||||||
&.fa-envelope::before { content: "mail" }
|
|
||||||
&.fa-home::before { content: "home" }
|
|
||||||
&.fa-bullhorn::before { content: "announcement" }
|
|
||||||
&.fa-sliders::before { content: "tune" }
|
|
||||||
&.fa-chevron-left::before { content: "arrow_back" }
|
|
||||||
&.fa-chevron-right::before { content: "arrow_forward" }
|
|
||||||
&.fa-reply::before { content: $reply-icon }
|
|
||||||
&.fa-reply-all::before { content: "reply_all" }
|
|
||||||
&.fa-share-alt::before { content: "share" }
|
|
||||||
&.fa-star::before { content: $favorite-icon }
|
|
||||||
&.fa-bookmark::before { content: "bookmark" }
|
|
||||||
&.fa-ellipsis-h::before { content: "more_horiz" }
|
|
||||||
&.fa-bell::before { content: "notifications" }
|
|
||||||
&.fa-bell-o::before { content: "notifications" }
|
|
||||||
&.fa-eraser::before { content: "clear_all" }
|
|
||||||
&.fa-users::before { content: "people" }
|
|
||||||
&.fa-file-text::before { content: "web" }
|
|
||||||
&.fa-user-plus::before { content: "person_add" }
|
|
||||||
&.fa-address-book::before { content: "explore" }
|
|
||||||
&.fa-address-book-o::before { content: "explore" }
|
|
||||||
&.fa-list::before { content: "list" }
|
|
||||||
&.fa-list-ul::before { content: "list" }
|
|
||||||
&.fa-eye::before { content: "visibility" }
|
|
||||||
&.fa-eye-slash::before { content : "visibility_off" }
|
|
||||||
&.fa-pencil::before { content: "create" }
|
|
||||||
&.fa-trash::before { content: "delete" }
|
|
||||||
&.fa-play::before { content: "play_arrow" }
|
|
||||||
&.fa-external-link::before { content: "open_in_new" }
|
|
||||||
&.fa-retweet::before { content: "repeat" }
|
|
||||||
&.fa-link::before { content: "link" }
|
|
||||||
&.fa-pause::before { content: "pause" }
|
|
||||||
&.fa-volume-up::before { content: "volume_up" }
|
|
||||||
&.fa-volume-off::before { content: "volume_off" }
|
|
||||||
&.fa-expand::before { content: "web_asset" }
|
|
||||||
&.fa-download::before { content: "file_download" }
|
|
||||||
&.fa-arrows-alt::before { content: "fullscreen" }
|
|
||||||
&.fa-compress::before { content: "fullscreen_exit" }
|
|
||||||
&.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" }
|
|
||||||
&.fa-angle-right::before { content: "chevron_right" }
|
|
||||||
&.fa-thumb-tack::before { content: "push_pin" }
|
|
||||||
}
|
|
||||||
|
|
||||||
// bookmark icon
|
|
||||||
.status__action-bar-button.icon-button,
|
|
||||||
.bookmark-icon.icon-button {
|
|
||||||
.fa.fa-bookmark::before { content: "bookmark_border" }
|
|
||||||
&.active .fa.fa-bookmark::before { content: "bookmark" }
|
|
||||||
}
|
|
||||||
|
|
||||||
// favorite icon
|
|
||||||
.status__action-bar-button.star-icon.icon-button,
|
|
||||||
.star-icon.icon-button {
|
|
||||||
.fa.fa-star::before { content: $favorite-icon-border }
|
|
||||||
|
|
||||||
&.active,
|
|
||||||
&.active.activate {
|
|
||||||
.fa.fa-star::before { content: $favorite-icon }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// favorite icon color
|
|
||||||
.star-icon.active,
|
|
||||||
.star-icon.icon-button.active.active,
|
|
||||||
.notification__favourite-icon-wrapper .star-icon,
|
|
||||||
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
|
|
||||||
|
|
||||||
// boost icon
|
|
||||||
button.icon-button i.fa-retweet {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
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="40px" width="20px"><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>');
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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 i.fa-retweet:hover,
|
|
||||||
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
|
|
||||||
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="40px" width="20px"><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-hover-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,
|
|
||||||
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
|
|
||||||
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="20px" height="20px"><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,
|
|
||||||
.fa.fa-bars.column-header__icon.fa-fw,
|
|
||||||
.fa.fa-bookmark.column-header__icon.fa-fw,
|
|
||||||
.fa.fa-address-book-o.column-header__icon.fa-fw,
|
|
||||||
.fa.fa-envelope.column-header__icon.fa-fw,
|
|
||||||
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
|
|
||||||
|
|
||||||
// top bar icons in single column mode
|
|
||||||
.tabs-bar__link {
|
|
||||||
.fa.fa-home.fa-fw,
|
|
||||||
.fa.fa-bell.fa-fw,
|
|
||||||
.fa.fa-users.fa-fw,
|
|
||||||
.fa.fa-globe.fa-fw { vertical-align: text-bottom }
|
|
||||||
}
|
|
||||||
|
|
||||||
// getting-started and side bar icons
|
|
||||||
.column-link .fa,
|
|
||||||
.column-link--transparent .fa { 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 }
|
|
||||||
|
|
||||||
// read more icon
|
|
||||||
.status__content__read-more-button .fa { vertical-align: bottom }
|
|
||||||
|
|
||||||
// Attachment icon
|
|
||||||
.attachment-list__list a .fa { vertical-align: middle }
|
|
||||||
|
|
||||||
// status detail icon
|
|
||||||
.detailed-status .fa {
|
|
||||||
font-size: 16px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
// status scope
|
|
||||||
.status__visibility-icon .fa,
|
|
||||||
.account__header__tabs__name .fa {
|
|
||||||
font-size: 16px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.media-gallery {
|
|
||||||
border-radius: $media-radius;
|
|
||||||
|
|
||||||
&__item { border-radius: $media-radius }
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-modal {
|
|
||||||
&__nav {
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
color: $media-icon-color;
|
|
||||||
height: 48px;
|
|
||||||
width: 48px;
|
|
||||||
margin: auto 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
.fa { width: 32px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__button {
|
|
||||||
background-color: $media-page-indicator-color;
|
|
||||||
|
|
||||||
&--active { background-color: $media-page-indicator-active-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__close {
|
|
||||||
&.icon-button {
|
|
||||||
background: transparent;
|
|
||||||
color: $media-icon-color;
|
|
||||||
font-size: 24px !important;
|
|
||||||
width: 24px !important;
|
|
||||||
height: 24px !important;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
line-height: normal !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $media-icon-bg-hover-color;
|
|
||||||
color: $media-icon-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-fw {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__meta {
|
|
||||||
bottom: 24px;
|
|
||||||
|
|
||||||
a { color: $media-icon-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__overlay {
|
|
||||||
.picture-in-picture__footer .icon-button {
|
|
||||||
color: $media-icon-color;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: $media-icon-hover-color;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-player {
|
|
||||||
&__controls {
|
|
||||||
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__seek {
|
|
||||||
&::before {
|
|
||||||
background: rgba(255,255,255,.2);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__buffer {
|
|
||||||
background: rgba(255,255,255,.4);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__progress {
|
|
||||||
background: $primary-color;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__handle {
|
|
||||||
@include material-transition;
|
|
||||||
background-color: $primary-color;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__volume {
|
|
||||||
&::before {
|
|
||||||
background: rgba(255,255,255,.4);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__current {
|
|
||||||
background: $primary-color;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__handle {
|
|
||||||
@include material-transition;
|
|
||||||
background-color: $primary-color;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__time-current { margin-left: 68px }
|
|
||||||
|
|
||||||
&__buttons button { font-size: 20px }
|
|
||||||
}
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.confirmation-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $dialog-radius;
|
|
||||||
|
|
||||||
&__container {
|
|
||||||
text-align: left;
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__action-bar {
|
|
||||||
justify-content: flex-end;
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__secondary-button {
|
|
||||||
box-shadow: none !important;
|
|
||||||
color: $text-button-color;
|
|
||||||
background: transparent;
|
|
||||||
margin: 0 8px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-button-color;
|
|
||||||
background: $text-button-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-focus-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
ul li:not(:empty) a {
|
|
||||||
color: $ui-text-color;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $card-bg-hover-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu__separator { border-bottom-color: $border-color }
|
|
||||||
|
|
||||||
.status {
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-bottom-color: $border-color;
|
|
||||||
padding-top: 12px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
left: 12px;
|
|
||||||
top: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&__target {
|
|
||||||
padding: 24px;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__container {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__comment {
|
|
||||||
border-right: none;
|
|
||||||
|
|
||||||
.setting-text-label { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.embed-modal .embed-modal__container {
|
|
||||||
padding: 0 24px 24px 24px;
|
|
||||||
|
|
||||||
.hint {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.tabs-bar {
|
|
||||||
background: $top-bar-color;
|
|
||||||
|
|
||||||
&__link {
|
|
||||||
padding: 16px 16px 12px 16px;
|
|
||||||
color: $top-bar-icon-color;
|
|
||||||
border-bottom: 4px solid transparent;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-bottom: 4px solid $tab-indicator-active-color;
|
|
||||||
color: $tab-indicator-active-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa { font-size: 20px }
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 8px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
@include shadow-4dp;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs-bar__portal { overflow-y: hidden }
|
|
||||||
|
|
||||||
.floating-action-button {
|
|
||||||
@include shadow-6dp;
|
|
||||||
background: $floating-action-button-color;
|
|
||||||
color: $floating-action-button-icon-color;
|
|
||||||
font-size: 24px;
|
|
||||||
width: $fab-size;
|
|
||||||
height: $fab-size;
|
|
||||||
bottom: 16px;
|
|
||||||
right: 16px;
|
|
||||||
|
|
||||||
&:hover { background: $floating-action-button-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus { background: $floating-action-button-active-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.columns-area--mobile {
|
|
||||||
.column { margin: 0 !important }
|
|
||||||
.search__input { padding: 16px 46px }
|
|
||||||
|
|
||||||
.search__icon {
|
|
||||||
.fa {
|
|
||||||
top: 16px;
|
|
||||||
left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-times-circle.active { left: unset }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// small size screen
|
|
||||||
@media screen and (max-width: 415px) {
|
|
||||||
.public-layout { padding-top: 64px }
|
|
||||||
}
|
|
||||||
|
|
||||||
// middle size screen
|
|
||||||
@media screen and (min-width: 415px) {
|
|
||||||
.tabs-bar {
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
padding-top: 0;
|
|
||||||
|
|
||||||
.tabs-bar { margin-bottom: 0 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.columns-area__panels {
|
|
||||||
&__main {
|
|
||||||
@include shadow-1dp;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__pane { padding: 0 16px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//single column mode
|
|
||||||
@media screen and (min-width: 631px) {
|
|
||||||
.tabs-bar__link {
|
|
||||||
&:hover {
|
|
||||||
background: $tab-indicator-bg-hover-color;
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background: $tab-indicator-bg-focus-color;
|
|
||||||
border-bottom-color: $tab-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active { border-bottom-color: $tab-indicator-active-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
/*
|
|
||||||
* Mastodon Material 0.2.1
|
|
||||||
* Author: Rintan, Genbu Project
|
|
||||||
* Copyright (C) 2020 Rintan, Genbu Project
|
|
||||||
*/
|
|
||||||
|
|
||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
.link-button { color: $link-text-color }
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.hero-widget {
|
|
||||||
@include shadow-2dp;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
&__img {
|
|
||||||
border-radius: $card-radius $card-radius 0 0;
|
|
||||||
background: $card-bg-color;
|
|
||||||
|
|
||||||
img { border-radius: $card-radius $card-radius 0 0 }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
color: $primary-text-color;
|
|
||||||
border-radius: 0 0 $card-radius $card-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.endorsements-widget {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trends-widget h4 { color: $section-text-color }
|
|
||||||
@ -1,2 +1,2 @@
|
|||||||
@import 'application';
|
@import 'application';
|
||||||
@import 'mastodon-material-light/loader';
|
@import 'mastodon-material/profiles/mastodon-material-light/loader';
|
||||||
@ -1,146 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: dark;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #4285f4;
|
|
||||||
$secondary-color: #db4437;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #ffffff;
|
|
||||||
$secondary-text-color: #9aa0a6;
|
|
||||||
$ui-text-color: #e8eaed;
|
|
||||||
$inverted-text-color: #000000;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #9aa0a6;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4285f4;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $ui-text-color;
|
|
||||||
$search-bar-text-color: $inverted-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #1e1e1e;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #121212;
|
|
||||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #e2e2e3;
|
|
||||||
$icon-hover-color: #ffffff;
|
|
||||||
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
|
|
||||||
$icon-bg-active-color: transparentize(#ffffff, 0.7);
|
|
||||||
$disabled-icon-color: darken($icon-color, 16%);
|
|
||||||
$top-bar-icon-color: $icon-color;
|
|
||||||
$top-bar-icon-hover-color: $icon-hover-color;
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
|
||||||
$floating-action-button-color: $primary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #1e1e1e;
|
|
||||||
$border-hover-color: lighten($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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%);
|
|
||||||
|
|
||||||
// App bar color
|
|
||||||
$top-bar-color: #1e1e1e;
|
|
||||||
$search-bar-color: lighten($top-bar-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-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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: light;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #2b90d9;
|
|
||||||
$secondary-color: #2b90d9;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #000000;
|
|
||||||
$secondary-text-color: #5f6368;
|
|
||||||
$ui-text-color: #202124;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #5e5e5e;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #217aba;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $ui-text-color;
|
|
||||||
$search-bar-text-color: $primary-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #e0e0e0;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #ffffff;
|
|
||||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #282c37;
|
|
||||||
$icon-hover-color: darken($icon-color, 30%);
|
|
||||||
$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;
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: lighten($text-button-color, 36%);
|
|
||||||
$text-button-focus-color: lighten($text-button-color, 30%);
|
|
||||||
$floating-action-button-color: $primary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: $primary-color;
|
|
||||||
$toggle-track-active-color: lighten($primary-color, 26%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #dadce0;
|
|
||||||
$border-hover-color: darken($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$scroll-bar-thumb-color: #ccd7e0;
|
|
||||||
$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: #ffffff;
|
|
||||||
$search-bar-color: #d9e1e8;
|
|
||||||
$search-bar-focus-color: $bg-color;
|
|
||||||
|
|
||||||
// Tab color
|
|
||||||
$tab-indicator-color: #282c37;
|
|
||||||
$tab-indicator-active-color: $top-bar-icon-color;
|
|
||||||
$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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: light;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #4285f4;
|
|
||||||
$secondary-color: #db4437;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #000000;
|
|
||||||
$secondary-text-color: #5f6368;
|
|
||||||
$ui-text-color: #202124;
|
|
||||||
$inverted-text-color: #ffffff;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #5e5e5e;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4285f4;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $inverted-text-color;
|
|
||||||
$search-bar-text-color: $primary-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #e0e0e0;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #ffffff;
|
|
||||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #757575;
|
|
||||||
$icon-hover-color: darken($icon-color, 30%);
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
|
||||||
$floating-action-button-color: $secondary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #dadce0;
|
|
||||||
$border-hover-color: darken($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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($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-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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,146 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: light;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #4285f4;
|
|
||||||
$secondary-color: #db4437;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #000000;
|
|
||||||
$secondary-text-color: #5f6368;
|
|
||||||
$ui-text-color: #202124;
|
|
||||||
$inverted-text-color: #ffffff;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #5e5e5e;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4285f4;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $inverted-text-color;
|
|
||||||
$search-bar-text-color: $primary-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #e0e0e0;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #ffffff;
|
|
||||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #757575;
|
|
||||||
$icon-hover-color: darken($icon-color, 30%);
|
|
||||||
$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%);
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
|
||||||
$floating-action-button-color: $primary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #dadce0;
|
|
||||||
$border-hover-color: darken($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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($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-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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,146 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: dark;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #4285f4;
|
|
||||||
$secondary-color: #db4437;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #ffffff;
|
|
||||||
$secondary-text-color: #9aa0a6;
|
|
||||||
$ui-text-color: #e8eaed;
|
|
||||||
$inverted-text-color: #000000;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #9aa0a6;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4285f4;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $ui-text-color;
|
|
||||||
$search-bar-text-color: $inverted-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #2e2e2e;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #1e1e1e;
|
|
||||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #e2e2e3;
|
|
||||||
$icon-hover-color: #ffffff;
|
|
||||||
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
|
|
||||||
$icon-bg-active-color: transparentize(#ffffff, 0.7);
|
|
||||||
$disabled-icon-color: darken($icon-color, 16%);
|
|
||||||
$top-bar-icon-color: $icon-color;
|
|
||||||
$top-bar-icon-hover-color: $icon-hover-color;
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
|
||||||
$floating-action-button-color: $primary-color;
|
|
||||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: #ffffff;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #2e2e2e;
|
|
||||||
$border-hover-color: lighten($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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%);
|
|
||||||
|
|
||||||
// App bar color
|
|
||||||
$top-bar-color: #272727;
|
|
||||||
$search-bar-color: lighten($top-bar-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-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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,146 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$color-scheme: light;
|
|
||||||
|
|
||||||
// Base color
|
|
||||||
$primary-color: #4285f4;
|
|
||||||
$secondary-color: #db4437;
|
|
||||||
$error-color: #B00020;
|
|
||||||
$verified-color: #4caf50;
|
|
||||||
|
|
||||||
// Text color
|
|
||||||
$primary-text-color: #000000;
|
|
||||||
$secondary-text-color: #5f6368;
|
|
||||||
$ui-text-color: #202124;
|
|
||||||
$inverted-text-color: #ffffff;
|
|
||||||
$section-text-color: $primary-color;
|
|
||||||
$info-text-color: #5e5e5e;
|
|
||||||
$tips-text-color: #c0c0c0;
|
|
||||||
$disabled-text-color: rgba(0,0,0,.54);
|
|
||||||
$link-text-color: #4285f4;
|
|
||||||
$menu-text-color: $ui-text-color;
|
|
||||||
$top-bar-text-color: $ui-text-color;
|
|
||||||
$search-bar-text-color: $primary-text-color;
|
|
||||||
$contained-button-text-color: #ffffff;
|
|
||||||
|
|
||||||
// Background-color
|
|
||||||
$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%);
|
|
||||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
|
||||||
|
|
||||||
// Chip color
|
|
||||||
$contained-chip-color: #e0e0e0;
|
|
||||||
$chip-selected-text-color: $primary-color;
|
|
||||||
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
|
||||||
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
$outlined-chip-color: #ffffff;
|
|
||||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
|
||||||
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
|
|
||||||
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
|
|
||||||
|
|
||||||
// Relationship tag color
|
|
||||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
|
||||||
|
|
||||||
// Badge color
|
|
||||||
$badge-color: $primary-color;
|
|
||||||
//$badge-color: $secondary-color;
|
|
||||||
|
|
||||||
// Icon color
|
|
||||||
$icon-color: #757575;
|
|
||||||
$icon-hover-color: darken($icon-color, 30%);
|
|
||||||
$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;
|
|
||||||
$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-bg-color: transparentize(#000000, 0.5);
|
|
||||||
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
|
|
||||||
|
|
||||||
// Control color
|
|
||||||
$control-border-color: $icon-color;
|
|
||||||
$control-border-active-color: $primary-color;
|
|
||||||
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
|
|
||||||
|
|
||||||
// Button color
|
|
||||||
$icon-button-color: $icon-color;
|
|
||||||
$icon-button-hover-color: $icon-hover-color;
|
|
||||||
$icon-button-active-color: $primary-color;
|
|
||||||
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|
||||||
$contained-button-color: $primary-color;
|
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
|
||||||
$outlined-button-color: $primary-color;
|
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
|
||||||
$text-button-color: $primary-color;
|
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
|
||||||
$floating-action-button-color: #ffffff;
|
|
||||||
$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
|
|
||||||
$floating-action-button-active-color: darken($floating-action-button-color, 10%);
|
|
||||||
$floating-action-button-icon-color: $primary-color;
|
|
||||||
|
|
||||||
// Toggle color
|
|
||||||
$toggle-thumb-color: #ffffff;
|
|
||||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
|
||||||
$toggle-thumb-active-color: #1a73e8;
|
|
||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
|
||||||
|
|
||||||
// Border color
|
|
||||||
$border-color: #dadce0;
|
|
||||||
$border-hover-color: darken($border-color, 30%);
|
|
||||||
$border-active-color: $primary-color;
|
|
||||||
|
|
||||||
// Scroll bar color
|
|
||||||
$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: $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-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-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;
|
|
||||||
|
|
||||||
// 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($progress-indicator-color, 0.3);
|
|
||||||
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
// Add your customization below
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
// Add your settings below
|
|
||||||
@import 'color/mastodon-light';
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
// Add your customization below
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
// Favorite icon settings
|
|
||||||
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
|
|
||||||
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
|
|
||||||
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
|
|
||||||
|
|
||||||
$favorite-icon-color: #ffd600; // Star
|
|
||||||
//$favorite-icon-color: #ff4081; // Heart
|
|
||||||
//$favorite-icon-color: #db4437; // +1
|
|
||||||
//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin)
|
|
||||||
|
|
||||||
|
|
||||||
// Reply icon settings
|
|
||||||
$reply-icon: "reply";
|
|
||||||
//$reply-icon: "comment"; // blooming
|
|
||||||
|
|
||||||
|
|
||||||
// Material Design Icon settings
|
|
||||||
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
|
|
||||||
//$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;
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/mixins';
|
|
||||||
|
|
||||||
|
|
||||||
// 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
|
|
||||||
$bar-radius: 0;
|
|
||||||
//$bar-radius: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
// Button radius settings
|
|
||||||
$button-radius: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
// Card radius settings
|
|
||||||
$card-radius: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
// Dialog radius settings
|
|
||||||
$dialog-radius: 8px;
|
|
||||||
|
|
||||||
|
|
||||||
// Menu radius settings
|
|
||||||
$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
|
|
||||||
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
|
|
||||||
|
|
||||||
|
|
||||||
// Avater cropping settings
|
|
||||||
$avater-radius: 50%; // Rounded cropping
|
|
||||||
//$avater-radius: 8px // Material v2 square
|
|
||||||
|
|
||||||
|
|
||||||
// Chip settings
|
|
||||||
$outlined-chip: true; // Material v2 styled outlined chip
|
|
||||||
//$outlined-chip: false; // Material v1 styled contained chip
|
|
||||||
|
|
||||||
|
|
||||||
// Button shadow
|
|
||||||
$button-shadow: false; // Material v2 styled colored button without shadow
|
|
||||||
//$button-shadow: true; // Material v1 styled colored button with shadow
|
|
||||||
|
|
||||||
|
|
||||||
// Floating Action Button size
|
|
||||||
$fab-size: 56px; // Regular
|
|
||||||
//$fab-size: 40px; // Mini
|
|
||||||
|
|
||||||
|
|
||||||
// Text area border
|
|
||||||
$text-area-border: false;
|
|
||||||
//$text-area-border: underlined;
|
|
||||||
//$text-area-border: outlined;
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
@import 'theme/theme';
|
|
||||||
@import 'theme/material-icons';
|
|
||||||
|
|
||||||
// Plugins
|
|
||||||
@import 'plugins/astarte';
|
|
||||||
//@import 'plugins/cards';
|
|
||||||
//@import 'plugins/dense';
|
|
||||||
//@import 'plugins/plus';
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
.announcements {
|
|
||||||
li {
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
margin: 0;
|
|
||||||
right: 16px;
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
|
|
||||||
&:hover { background: transparent }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
.drawer {
|
|
||||||
&__header { height: 48px }
|
|
||||||
|
|
||||||
&__tab { margin: 6px auto 6px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.column { margin: 10px 5px }
|
|
||||||
|
|
||||||
.column-header {
|
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
> button { padding: 12px 16px }
|
|
||||||
|
|
||||||
&__buttons { height: 48px }
|
|
||||||
|
|
||||||
&__button { margin: 6px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-subheading { padding: 8px 16px }
|
|
||||||
|
|
||||||
.column-link { padding: 12px 16px }
|
|
||||||
|
|
||||||
.notification__filter-bar button { padding: 12px 0 }
|
|
||||||
|
|
||||||
.getting-started__footer {
|
|
||||||
padding: 12px 16px;
|
|
||||||
|
|
||||||
p { margin-bottom: 12px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form {
|
|
||||||
.compose-form {
|
|
||||||
&__publish { padding-top: 8px }
|
|
||||||
|
|
||||||
&__buttons-wrapper {
|
|
||||||
.icon-button,
|
|
||||||
.text-icon-button { padding: 4px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
padding: 8px 8px 4px 66px;
|
|
||||||
|
|
||||||
&__expand { width: 66px }
|
|
||||||
|
|
||||||
&__info { padding-right: 0 }
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
left: 8px;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content { padding-top: 2px }
|
|
||||||
|
|
||||||
&__action-bar-button {
|
|
||||||
margin: 0 4px;
|
|
||||||
|
|
||||||
&.icon-button { padding: 4px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__action-bar-dropdown {
|
|
||||||
width: 28px !important;
|
|
||||||
height: 28px !important;
|
|
||||||
margin: 0 4px;
|
|
||||||
|
|
||||||
.icon-button { padding: 4px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status {
|
|
||||||
padding: 14px;
|
|
||||||
|
|
||||||
&__meta { margin-top: 14px }
|
|
||||||
|
|
||||||
&__action-bar { padding: 10px 0 }
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-indicator { padding: 8px }
|
|
||||||
|
|
||||||
.button.button--block { margin: 6px 0 }
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
.status__action-bar-button {
|
|
||||||
background: #eeeeee;
|
|
||||||
width: 28px !important;
|
|
||||||
height: 28px !important;
|
|
||||||
|
|
||||||
.fa { vertical-align: bottom }
|
|
||||||
}
|
|
||||||
|
|
||||||
// exception
|
|
||||||
.media-modal__overlay .picture-in-picture__footer .icon-button,
|
|
||||||
.status__action-bar-button.icon-button--with-counter { background: transparent }
|
|
||||||
|
|
||||||
// favorite icon
|
|
||||||
.star-icon.active,
|
|
||||||
.star-icon.icon-button.active.activate,
|
|
||||||
.notification__favourite-icon-wrapper .star-icon { background: #db4437 }
|
|
||||||
|
|
||||||
.notification__favourite-icon-wrapper {
|
|
||||||
left: -34px;
|
|
||||||
|
|
||||||
.star-icon {
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
vertical-align: baseline;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
&.fa-fw::before { vertical-align: middle }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,228 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
$shadow-color-1: rgba(0,0,0,.2);
|
|
||||||
$shadow-color-2: rgba(0,0,0,.14);
|
|
||||||
$shadow-color-3: rgba(0,0,0,.12);
|
|
||||||
|
|
||||||
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
|
|
||||||
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
|
|
||||||
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
|
|
||||||
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
|
|
||||||
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
|
|
||||||
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
|
|
||||||
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
|
|
||||||
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
|
|
||||||
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
|
|
||||||
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
|
|
||||||
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
|
|
||||||
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
|
|
||||||
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
|
|
||||||
@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 $outlined-chip-selected-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 text-area-border {
|
|
||||||
@if $text-area-border == underlined {
|
|
||||||
.compose-form .autosuggest-textarea__textarea {
|
|
||||||
border-radius: $card-radius $card-radius 0 0;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
|
|
||||||
&:hover { border-color: $border-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus { border-bottom: 2px solid $border-active-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $text-area-border == outlined {
|
|
||||||
.compose-form .autosuggest-textarea__textarea {
|
|
||||||
border-radius: $card-radius;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
|
|
||||||
&:hover { border-color: $border-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
border: 2px solid $border-active-color;
|
|
||||||
padding: 7px 41px 7px 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin icon-button {
|
|
||||||
width: 20px !important;
|
|
||||||
height: 20px !important;
|
|
||||||
font-size: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// check background-image value
|
|
||||||
@mixin bg-image {
|
|
||||||
@if $bg-image == none {
|
|
||||||
} @else { background-image: url($bg-image) }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,196 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
.account {
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
.account__display-name,
|
|
||||||
.account__display-name strong { color: $primary-text-color }
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
border-radius: $avater-radius;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
&-overlay {
|
|
||||||
&-base {
|
|
||||||
border-radius: $avater-radius;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
background-size: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-overlay { border-radius: $avater-radius }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar-wrapper {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
&__bar {
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 8px;
|
|
||||||
border-bottom: none;
|
|
||||||
|
|
||||||
.avatar .account__avatar { border: none }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tabs {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
&__name {
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
small { color: $secondary-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__buttons {
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
border: none;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 8px;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__extra {
|
|
||||||
margin-top: 0;
|
|
||||||
|
|
||||||
&__links {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
padding: 10px 0;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
padding: 4px 12px;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bio {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
.account__header {
|
|
||||||
&__content {
|
|
||||||
color: $primary-text-color;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fields {
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
.verified {
|
|
||||||
border: none;
|
|
||||||
background: $verified-bg-color;
|
|
||||||
|
|
||||||
a,
|
|
||||||
&__mark { color: $primary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
dl {
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
|
|
||||||
&:first-child .verified { border-radius: 0 }
|
|
||||||
|
|
||||||
&:last-child { border-bottom: 0 }
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
color: $primary-text-color;
|
|
||||||
background: $list-bg-inactive-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd { color: $primary-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__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-bg-color;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: 16px 0;
|
|
||||||
color: $text-tab-indicator-color;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $text-tab-indicator-active-color;
|
|
||||||
border-bottom: 4px solid $text-tab-indicator-active-color;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&:after { border: none }
|
|
||||||
|
|
||||||
&:focus { background: $text-tab-indicator-bg-focus-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover { background: $text-tab-indicator-bg-hover-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__relationship {
|
|
||||||
padding: 0;
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-role {
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 17px;
|
|
||||||
color: $ui-text-color;
|
|
||||||
background-color: $contained-chip-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accounts-table__count {
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
small { color: $secondary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-gallery {
|
|
||||||
&__item { border-radius: 0 }
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss".
|
|
||||||
|
|
||||||
|
|
||||||
// Color scheme
|
|
||||||
@import '../color/v1-light';
|
|
||||||
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
|
||||||
// @import 'color/v2-light';
|
|
||||||
|
|
||||||
|
|
||||||
// Layout profile
|
|
||||||
@import '../layout/material-v1';
|
|
||||||
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
|
||||||
// @import 'layout/material-v2';
|
|
||||||
|
|
||||||
|
|
||||||
// Search bar hover settings
|
|
||||||
// You can enable/disable search bar floating.
|
|
||||||
$search-bar-hover: false;
|
|
||||||
|
|
||||||
|
|
||||||
// Status font size in timeline
|
|
||||||
$status-font-size: 15px; // mastodon default
|
|
||||||
//$status-font-size: 16px; // compatible with material design
|
|
||||||
|
|
||||||
|
|
||||||
// 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 "../"
|
|
||||||
$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
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
@include button-shadow;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
color: $icon-button-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $icon-button-active-color;
|
|
||||||
|
|
||||||
&:hover { color: $icon-button-active-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled { color: $disabled-icon-color }
|
|
||||||
|
|
||||||
&.inverted {
|
|
||||||
color: $icon-button-color;
|
|
||||||
|
|
||||||
&.active { color: $icon-button-active-color }
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $icon-button-hover-color;
|
|
||||||
background-color: $icon-bg-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus { background-color: transparent }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.overlayed {
|
|
||||||
@include icon-button;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
color: $media-icon-color;
|
|
||||||
padding: 4px;
|
|
||||||
line-height: 20px !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
color: $media-icon-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__counter {
|
|
||||||
width: 16px;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include material-transition;
|
|
||||||
color: $icon-button-hover-color;
|
|
||||||
background-color: $icon-bg-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus { background-color: transparent }
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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: 14px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: $icon-bg-hover-color;
|
|
||||||
color: $icon-button-active-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $icon-bg-hover-color;
|
|
||||||
color: $icon-button-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
background-color: $contained-button-color;
|
|
||||||
border-radius: $button-radius;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background-color: $contained-button-color;
|
|
||||||
border-radius: $button-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
@include shadow-2dp;
|
|
||||||
background-color: $contained-button-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.logo-button {
|
|
||||||
background: $contained-button-color;
|
|
||||||
margin: 2px;
|
|
||||||
|
|
||||||
&:hover { background: $contained-button-hover-color }
|
|
||||||
|
|
||||||
.button--destructive:hover { background: $contained-button-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.button--block { margin: 8px 0 }
|
|
||||||
|
|
||||||
&.button-secondary {
|
|
||||||
color: $text-button-color;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.confirmation-modal__cancel-button {
|
|
||||||
box-shadow: none;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 0 8px;
|
|
||||||
color: $text-button-color;
|
|
||||||
|
|
||||||
&:hover { background: $text-button-hover-color }
|
|
||||||
|
|
||||||
&:focus { background: $text-button-focus-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler-button__overlay__label {
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
border-radius: $button-radius;
|
|
||||||
color: $media-icon-color;
|
|
||||||
}
|
|
||||||
@ -1,647 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
@include text-area-border;
|
|
||||||
|
|
||||||
.modal-root {
|
|
||||||
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
|
||||||
|
|
||||||
&__overlay { background-color: rgba(0,0,0,.32) !important }
|
|
||||||
|
|
||||||
&__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer {
|
|
||||||
&__header {
|
|
||||||
@include shadow-4dp;
|
|
||||||
background: $top-bar-color;
|
|
||||||
border-radius: $nav-bar-radius;
|
|
||||||
justify-content: space-around;
|
|
||||||
opacity: $bar-transparency;
|
|
||||||
|
|
||||||
a { transition: none }
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
background: $icon-bg-hover-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tab {
|
|
||||||
color: $top-bar-icon-color;
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 10px auto 10px;
|
|
||||||
padding: 8px;
|
|
||||||
flex: none;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
border-bottom: none;
|
|
||||||
text-align: justify;
|
|
||||||
|
|
||||||
&:hover { color: $top-bar-icon-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__pager {
|
|
||||||
@include shadow-1dp;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__inner {
|
|
||||||
background: $card-bg-color;
|
|
||||||
opacity: $column-transparency;
|
|
||||||
|
|
||||||
&.darker {
|
|
||||||
background: $card-bg-color;
|
|
||||||
position: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__mastodon { background: $card-bg-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
&__input {
|
|
||||||
background: $search-bar-color;
|
|
||||||
color: $tips-text-color;
|
|
||||||
border-radius: $search-bar-radius;
|
|
||||||
padding: 12px 12px 12px 40px;
|
|
||||||
opacity: $bar-transparency;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include shadow-2dp;
|
|
||||||
background: $search-bar-focus-color;
|
|
||||||
color: $search-bar-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover { @include search-bar-hover }
|
|
||||||
|
|
||||||
&::placeholder { color: $tips-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
.fa {
|
|
||||||
color: $icon-color;
|
|
||||||
font-size: 20px;
|
|
||||||
top: 12px;
|
|
||||||
right: unset;
|
|
||||||
left: 12px;
|
|
||||||
height: 6px;
|
|
||||||
transition: none;
|
|
||||||
|
|
||||||
&.active { opacity: 1 }
|
|
||||||
|
|
||||||
&-search {
|
|
||||||
transform: none;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
&-times-circle.active {
|
|
||||||
right: 16px;
|
|
||||||
left: unset;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-popout {
|
|
||||||
@include shadow-2dp;
|
|
||||||
background: $search-bar-focus-color;
|
|
||||||
border-radius: 0px $bar-radius;
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
margin-top: 0;
|
|
||||||
color: $tips-text-color;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
color: $search-bar-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results {
|
|
||||||
&__header {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
background-color: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
.fa { margin-right: 16px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__section {
|
|
||||||
h5 {
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
padding: 16px;
|
|
||||||
color: $section-text-color;
|
|
||||||
|
|
||||||
.fa { margin-right: 8px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-bar {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
padding: 14px;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: $ui-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-bar__actions .compose__action-bar .icon-button {
|
|
||||||
width: 36px !important;
|
|
||||||
height: 36px !important;
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $icon-hover-color;
|
|
||||||
background: $icon-bg-active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-panel hr {
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
margin: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-spacer { margin: 8px 0 }
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
@include shadow-8dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
padding: 8px 0;
|
|
||||||
border-radius: $menu-radius;
|
|
||||||
|
|
||||||
&__arrow { visibility: hidden }
|
|
||||||
|
|
||||||
&__item a {
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
color: $menu-text-color;
|
|
||||||
|
|
||||||
&:hover, &:active {
|
|
||||||
background: $menu-bg-hover-color;
|
|
||||||
color: $menu-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__separator {
|
|
||||||
margin: 8px 0;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form {
|
|
||||||
.autosuggest-textarea {
|
|
||||||
&__textarea {
|
|
||||||
background: $text-field-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
padding: 8px 42px 8px 16px;
|
|
||||||
|
|
||||||
&::placeholder { color: $tips-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__suggestions {
|
|
||||||
@include shadow-1dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 8px 0;
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:hover { background: $menu-bg-hover-color }
|
|
||||||
|
|
||||||
&.selected,
|
|
||||||
&:focus,
|
|
||||||
&:active { background: $menu-bg-active-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spoiler-input {
|
|
||||||
&.spoiler-input--visible { margin-bottom: 16px }
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:hover { border-color: $border-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus { border-bottom: 2px solid $border-active-color }
|
|
||||||
|
|
||||||
&::placeholder { color: $tips-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form {
|
|
||||||
&__warning {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
a { color: $link-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__modifiers {
|
|
||||||
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-bg-color;
|
|
||||||
color: $tips-text-color;
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-icon-button {
|
|
||||||
width: 20px !important;
|
|
||||||
height: 20px !important;
|
|
||||||
padding: 8px;
|
|
||||||
line-height: 20px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__poll-wrapper {
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
|
|
||||||
ul { padding: 16px 12px 16px 0 }
|
|
||||||
|
|
||||||
select {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background-color: $bg-color;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
&:focus { border-color: $border-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.button-secondary {
|
|
||||||
box-shadow: none;
|
|
||||||
color: $text-button-color;
|
|
||||||
|
|
||||||
&:hover { background-color: $text-button-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus { background-color: $text-button-focus-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll__footer { border-top: none }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
|
|
||||||
|
|
||||||
|
|
||||||
.poll {
|
|
||||||
.button { margin-right: 8px }
|
|
||||||
|
|
||||||
li { margin-bottom: 0 }
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
border: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
flex: 0 0 20px;
|
|
||||||
padding: 18px;
|
|
||||||
margin: 0 2px;
|
|
||||||
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
|
|
||||||
|
|
||||||
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
|
|
||||||
|
|
||||||
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
|
|
||||||
|
|
||||||
&.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
|
|
||||||
|
|
||||||
&.checkbox {
|
|
||||||
border-radius: 2px;
|
|
||||||
border: 2px solid $control-border-color;
|
|
||||||
padding: 8px;
|
|
||||||
margin: 8px 10px;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text input[type=text] {
|
|
||||||
color: $ui-text-color;
|
|
||||||
background: $text-field-bg-color;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
padding: 8px 12px;
|
|
||||||
|
|
||||||
&:focus { border-color: $border-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__option {
|
|
||||||
padding: 16px 0 8px;
|
|
||||||
|
|
||||||
input[type=text] {
|
|
||||||
color: $primary-text-color;
|
|
||||||
background: $text-field-bg-color;
|
|
||||||
border: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text { line-height: 34px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__chart {
|
|
||||||
border-radius: 0;
|
|
||||||
background: $progress-indicator-track-color;
|
|
||||||
|
|
||||||
&.leading { background: $progress-indicator-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
color: $ui-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__link { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown {
|
|
||||||
&.active .privacy-dropdown__value.active {
|
|
||||||
background: $icon-bg-hover-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
.icon-button { color: $icon-button-active-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__dropdown {
|
|
||||||
@include shadow-8dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
border-radius: $dialog-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__option {
|
|
||||||
color: $icon-color;
|
|
||||||
padding: 8px 16px;
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
font-size: 20px;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: $menu-bg-active-color;
|
|
||||||
color: $icon-hover-color;
|
|
||||||
|
|
||||||
.privacy-dropdown__option__content {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menu-bg-active-color;
|
|
||||||
|
|
||||||
.privacy-dropdown__option__content {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menu-bg-hover-color;
|
|
||||||
color: $icon-hover-color;
|
|
||||||
|
|
||||||
.privacy-dropdown__option__content {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.character-counter {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-indicator {
|
|
||||||
box-shadow: none;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
&__header { margin-bottom: 4px }
|
|
||||||
|
|
||||||
&__display {
|
|
||||||
&-name {
|
|
||||||
color: $primary-text-color;
|
|
||||||
padding-right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-avatar { margin-right: 8px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
p { margin-bottom: 16px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-list {
|
|
||||||
&__list a { color: $secondary-text-color }
|
|
||||||
|
|
||||||
&.compact .fa { color: $icon-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&__container { padding: 24px }
|
|
||||||
|
|
||||||
&__action-bar {
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 8px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__cancel-button {
|
|
||||||
box-shadow: none !important;
|
|
||||||
color: $text-button-color;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-focus-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more {
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
&:hover { background: transparent }
|
|
||||||
}
|
|
||||||
|
|
||||||
.autosuggest-hashtag {
|
|
||||||
&__name { color: $menu-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-form {
|
|
||||||
background: $bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
&__column { padding: 8px 16px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.directory {
|
|
||||||
&__card {
|
|
||||||
@include shadow-1dp;
|
|
||||||
margin: 8px 4px;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&__img { border-radius: $card-radius $card-radius 0 0 }
|
|
||||||
|
|
||||||
&__bar {
|
|
||||||
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-bg-color;
|
|
||||||
border-radius: 0 0 $card-radius $card-radius;
|
|
||||||
|
|
||||||
.account__header__content {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accounts-table__count { padding: 16px 0 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mute-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&__container { padding: 24px }
|
|
||||||
|
|
||||||
&__explanation { margin-top: 16px }
|
|
||||||
|
|
||||||
&__action-bar {
|
|
||||||
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;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-focus-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-toggle {
|
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
color: $ui-text-color;
|
|
||||||
margin: 0 0 0 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-progress {
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
&__backdrop {
|
|
||||||
border-radius: 0;
|
|
||||||
background: $progress-indicator-track-color;
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__tracker {
|
|
||||||
border-radius: 0;
|
|
||||||
background: $progress-indicator-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-button { padding: 8px }
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.public-layout {
|
|
||||||
.header {
|
|
||||||
@include shadow-4dp;
|
|
||||||
background: $top-bar-color;
|
|
||||||
border-radius: $nav-bar-radius;
|
|
||||||
margin: 16px 0;
|
|
||||||
|
|
||||||
.brand:hover { background: $tab-indicator-bg-hover-color }
|
|
||||||
|
|
||||||
.nav-link,
|
|
||||||
.nav-link.optional {
|
|
||||||
color: $top-bar-text-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $tab-indicator-bg-hover-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button {
|
|
||||||
background: transparent;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:hover { background: $tab-indicator-bg-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__meta { margin-top: 16px }
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status { padding: 16px }
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
padding-top: 16px;
|
|
||||||
padding-bottom: 64px;
|
|
||||||
color: $ui-text-color;
|
|
||||||
|
|
||||||
h4 { color: $ui-text-color }
|
|
||||||
|
|
||||||
ul a { color: $secondary-text-color }
|
|
||||||
|
|
||||||
.grid .column-2 h4 a { color: $ui-text-color }
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
svg { fill: $icon-color }
|
|
||||||
|
|
||||||
&:hover svg { fill: $icon-hover-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
.emoji-picker-dropdown {
|
|
||||||
&__menu {
|
|
||||||
@include shadow-8dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
border-radius: $menu-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__modifiers__menu {
|
|
||||||
@include shadow-8dp;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
border-radius: $menu-radius;
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart {
|
|
||||||
width: 388px !important;
|
|
||||||
font-size: 14px;
|
|
||||||
color: $menu-text-color;
|
|
||||||
|
|
||||||
&-bar {
|
|
||||||
border: 0 solid $border-color;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
background: $menu-bg-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-anchor {
|
|
||||||
color: $text-tab-indicator-color;
|
|
||||||
padding: 10px 4px;
|
|
||||||
|
|
||||||
&-bar { background-color: $icon-tab-indicator-active-color }
|
|
||||||
|
|
||||||
&-selected { color: $icon-tab-indicator-hover-color }
|
|
||||||
|
|
||||||
&:hover { color: $icon-tab-indicator-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&-search {
|
|
||||||
background: $menu-bg-color;
|
|
||||||
|
|
||||||
input {
|
|
||||||
outline: none;
|
|
||||||
padding: 8px;
|
|
||||||
background: $search-bar-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border: 0;
|
|
||||||
border-radius: $search-bar-radius;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@include shadow-2dp;
|
|
||||||
background: $search-bar-focus-color;
|
|
||||||
color: $search-bar-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-scroll {
|
|
||||||
padding: 0 8px 8px;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-category {
|
|
||||||
&-label span {
|
|
||||||
padding: 4px 6px;
|
|
||||||
background: $menu-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&-no-results { color: $secondary-text-color }
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.fa.fa-users.column-link,
|
|
||||||
.fa.fa-globe.column-link,
|
|
||||||
.fa.fa-address-book.column-link,
|
|
||||||
.fa.fa-bullhorn.column-link,
|
|
||||||
.fa.fa-envelope.column-link,
|
|
||||||
.fa.fa-bookmark.column-link,
|
|
||||||
.fa.fa-star.column-link,
|
|
||||||
.fa.fa-list-ul.column-link {
|
|
||||||
&__icon.fa-fw { color: $icon-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa.fa-lock { text-transform: none }
|
|
||||||
|
|
||||||
.icon-with-badge__badge {
|
|
||||||
background: $badge-color;
|
|
||||||
border: none;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
@ -1,260 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@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,
|
|
||||||
&.fa-reorder,
|
|
||||||
&.fa-globe,
|
|
||||||
&.fa-cog,
|
|
||||||
&.fa-cogs,
|
|
||||||
&.fa-gears,
|
|
||||||
&.fa-sign-out,
|
|
||||||
&.fa-search,
|
|
||||||
&.fa-times,
|
|
||||||
&.fa-times-circle,
|
|
||||||
&.fa-close,
|
|
||||||
&.fa-remove,
|
|
||||||
&.fa-chevron-down,
|
|
||||||
&.fa-ellipsis-v,
|
|
||||||
&.fa-paperclip,
|
|
||||||
&.fa-tasks,
|
|
||||||
&.fa-plus,
|
|
||||||
&.fa-unlock,
|
|
||||||
&.fa-lock,
|
|
||||||
&.fa-envelope,
|
|
||||||
&.fa-home,
|
|
||||||
&.fa-bullhorn,
|
|
||||||
&.fa-sliders,
|
|
||||||
&.fa-chevron-left,
|
|
||||||
&.fa-chevron-right,
|
|
||||||
&.fa-reply,
|
|
||||||
&.fa-reply-all,
|
|
||||||
&.fa-share-alt,
|
|
||||||
&.fa-star,
|
|
||||||
&.fa-bookmark,
|
|
||||||
&.fa-ellipsis-h,
|
|
||||||
&.fa-bell,
|
|
||||||
&.fa-bell-o,
|
|
||||||
&.fa-eraser,
|
|
||||||
&.fa-users,
|
|
||||||
&.fa-file-text,
|
|
||||||
&.fa-user-plus,
|
|
||||||
&.fa-address-book,
|
|
||||||
&.fa-address-book-o,
|
|
||||||
&.fa-list,
|
|
||||||
&.fa-list-ul,
|
|
||||||
&.fa-eye,
|
|
||||||
&.fa-eye-slash,
|
|
||||||
&.fa-pencil,
|
|
||||||
&.fa-trash,
|
|
||||||
&.fa-play,
|
|
||||||
&.fa-external-link,
|
|
||||||
&.fa-retweet,
|
|
||||||
&.fa-link,
|
|
||||||
&.fa-pause,
|
|
||||||
&.fa-volume-up,
|
|
||||||
&.fa-volume-off,
|
|
||||||
&.fa-expand,
|
|
||||||
&.fa-download,
|
|
||||||
&.fa-arrows-alt,
|
|
||||||
&.fa-compress,
|
|
||||||
&.fa-user-times,
|
|
||||||
&.fa-check,
|
|
||||||
&.fa-quote-right,
|
|
||||||
&.fa-upload,
|
|
||||||
&.fa-comments,
|
|
||||||
&.fa-angle-right,
|
|
||||||
&.fa-thumb-tack {
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa {
|
|
||||||
&.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
|
|
||||||
&.fa-globe::before { content: "public" }
|
|
||||||
&.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
|
|
||||||
&.fa-sign-out::before { content: "exit_to_app" }
|
|
||||||
&.fa-search::before { content: "search" }
|
|
||||||
&.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
|
|
||||||
&.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
|
|
||||||
&.fa-paperclip::before { content: "attach_file" }
|
|
||||||
&.fa-tasks::before { content: "poll" }
|
|
||||||
&.fa-plus::before { content: "add" }
|
|
||||||
&.fa-unlock::before { content: "lock_open" }
|
|
||||||
&.fa-lock::before { content: "lock" }
|
|
||||||
&.fa-envelope::before { content: "mail" }
|
|
||||||
&.fa-home::before { content: "home" }
|
|
||||||
&.fa-bullhorn::before { content: "announcement" }
|
|
||||||
&.fa-sliders::before { content: "tune" }
|
|
||||||
&.fa-chevron-left::before { content: "arrow_back" }
|
|
||||||
&.fa-chevron-right::before { content: "arrow_forward" }
|
|
||||||
&.fa-reply::before { content: $reply-icon }
|
|
||||||
&.fa-reply-all::before { content: "reply_all" }
|
|
||||||
&.fa-share-alt::before { content: "share" }
|
|
||||||
&.fa-star::before { content: $favorite-icon }
|
|
||||||
&.fa-bookmark::before { content: "bookmark" }
|
|
||||||
&.fa-ellipsis-h::before { content: "more_horiz" }
|
|
||||||
&.fa-bell::before { content: "notifications" }
|
|
||||||
&.fa-bell-o::before { content: "notifications" }
|
|
||||||
&.fa-eraser::before { content: "clear_all" }
|
|
||||||
&.fa-users::before { content: "people" }
|
|
||||||
&.fa-file-text::before { content: "web" }
|
|
||||||
&.fa-user-plus::before { content: "person_add" }
|
|
||||||
&.fa-address-book::before { content: "explore" }
|
|
||||||
&.fa-address-book-o::before { content: "explore" }
|
|
||||||
&.fa-list::before { content: "list" }
|
|
||||||
&.fa-list-ul::before { content: "list" }
|
|
||||||
&.fa-eye::before { content: "visibility" }
|
|
||||||
&.fa-eye-slash::before { content : "visibility_off" }
|
|
||||||
&.fa-pencil::before { content: "create" }
|
|
||||||
&.fa-trash::before { content: "delete" }
|
|
||||||
&.fa-play::before { content: "play_arrow" }
|
|
||||||
&.fa-external-link::before { content: "open_in_new" }
|
|
||||||
&.fa-retweet::before { content: "repeat" }
|
|
||||||
&.fa-link::before { content: "link" }
|
|
||||||
&.fa-pause::before { content: "pause" }
|
|
||||||
&.fa-volume-up::before { content: "volume_up" }
|
|
||||||
&.fa-volume-off::before { content: "volume_off" }
|
|
||||||
&.fa-expand::before { content: "web_asset" }
|
|
||||||
&.fa-download::before { content: "file_download" }
|
|
||||||
&.fa-arrows-alt::before { content: "fullscreen" }
|
|
||||||
&.fa-compress::before { content: "fullscreen_exit" }
|
|
||||||
&.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" }
|
|
||||||
&.fa-angle-right::before { content: "chevron_right" }
|
|
||||||
&.fa-thumb-tack::before { content: "push_pin" }
|
|
||||||
}
|
|
||||||
|
|
||||||
// bookmark icon
|
|
||||||
.status__action-bar-button.icon-button,
|
|
||||||
.bookmark-icon.icon-button {
|
|
||||||
.fa.fa-bookmark::before { content: "bookmark_border" }
|
|
||||||
&.active .fa.fa-bookmark::before { content: "bookmark" }
|
|
||||||
}
|
|
||||||
|
|
||||||
// favorite icon
|
|
||||||
.status__action-bar-button.star-icon.icon-button,
|
|
||||||
.star-icon.icon-button {
|
|
||||||
.fa.fa-star::before { content: $favorite-icon-border }
|
|
||||||
|
|
||||||
&.active,
|
|
||||||
&.active.activate {
|
|
||||||
.fa.fa-star::before { content: $favorite-icon }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// favorite icon color
|
|
||||||
.star-icon.active,
|
|
||||||
.star-icon.icon-button.active.active,
|
|
||||||
.notification__favourite-icon-wrapper .star-icon,
|
|
||||||
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
|
|
||||||
|
|
||||||
// boost icon
|
|
||||||
button.icon-button i.fa-retweet {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
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="40px" width="20px"><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>');
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="40px" width="20px"><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="#{$media-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 i.fa-retweet:hover,
|
|
||||||
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
|
|
||||||
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="40px" width="20px"><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-hover-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,
|
|
||||||
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
|
|
||||||
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="20px" height="20px"><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,
|
|
||||||
.fa.fa-bars.column-header__icon.fa-fw,
|
|
||||||
.fa.fa-bookmark.column-header__icon.fa-fw,
|
|
||||||
.fa.fa-address-book-o.column-header__icon.fa-fw,
|
|
||||||
.fa.fa-envelope.column-header__icon.fa-fw,
|
|
||||||
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
|
|
||||||
|
|
||||||
// top bar icons in single column mode
|
|
||||||
.tabs-bar__link {
|
|
||||||
.fa.fa-home.fa-fw,
|
|
||||||
.fa.fa-bell.fa-fw,
|
|
||||||
.fa.fa-users.fa-fw,
|
|
||||||
.fa.fa-globe.fa-fw { vertical-align: text-bottom }
|
|
||||||
}
|
|
||||||
|
|
||||||
// getting-started and side bar icons
|
|
||||||
.column-link .fa,
|
|
||||||
.column-link--transparent .fa { 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 }
|
|
||||||
|
|
||||||
// read more icon
|
|
||||||
.status__content__read-more-button .fa { vertical-align: bottom }
|
|
||||||
|
|
||||||
// Attachment icon
|
|
||||||
.attachment-list__list a .fa { vertical-align: middle }
|
|
||||||
|
|
||||||
// status detail icon
|
|
||||||
.detailed-status .fa {
|
|
||||||
font-size: 16px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
// status scope
|
|
||||||
.status__visibility-icon .fa,
|
|
||||||
.account__header__tabs__name .fa {
|
|
||||||
font-size: 16px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.media-gallery {
|
|
||||||
border-radius: $media-radius;
|
|
||||||
|
|
||||||
&__item { border-radius: $media-radius }
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-modal {
|
|
||||||
&__nav {
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
color: $media-icon-color;
|
|
||||||
height: 48px;
|
|
||||||
width: 48px;
|
|
||||||
margin: auto 16px;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
.fa { width: 32px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__button {
|
|
||||||
background-color: $media-page-indicator-color;
|
|
||||||
|
|
||||||
&--active { background-color: $media-page-indicator-active-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__close {
|
|
||||||
&.icon-button {
|
|
||||||
background: transparent;
|
|
||||||
color: $media-icon-color;
|
|
||||||
font-size: 24px !important;
|
|
||||||
width: 24px !important;
|
|
||||||
height: 24px !important;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
line-height: normal !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $media-icon-bg-hover-color;
|
|
||||||
color: $media-icon-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-fw {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__meta {
|
|
||||||
bottom: 24px;
|
|
||||||
|
|
||||||
a { color: $media-icon-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__overlay {
|
|
||||||
.picture-in-picture__footer .icon-button {
|
|
||||||
color: $media-icon-color;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
color: $media-icon-hover-color;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-player {
|
|
||||||
&__controls {
|
|
||||||
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__seek {
|
|
||||||
&::before {
|
|
||||||
background: rgba(255,255,255,.2);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__buffer {
|
|
||||||
background: rgba(255,255,255,.4);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__progress {
|
|
||||||
background: $primary-color;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__handle {
|
|
||||||
@include material-transition;
|
|
||||||
background-color: $primary-color;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__volume {
|
|
||||||
&::before {
|
|
||||||
background: rgba(255,255,255,.4);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__current {
|
|
||||||
background: $primary-color;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__handle {
|
|
||||||
@include material-transition;
|
|
||||||
background-color: $primary-color;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__time-current { margin-left: 68px }
|
|
||||||
|
|
||||||
&__buttons button { font-size: 20px }
|
|
||||||
}
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.confirmation-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $dialog-radius;
|
|
||||||
|
|
||||||
&__container {
|
|
||||||
text-align: left;
|
|
||||||
padding: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__action-bar {
|
|
||||||
justify-content: flex-end;
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__secondary-button {
|
|
||||||
box-shadow: none !important;
|
|
||||||
color: $text-button-color;
|
|
||||||
background: transparent;
|
|
||||||
margin: 0 8px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $text-button-color;
|
|
||||||
background: $text-button-hover-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $text-button-color;
|
|
||||||
background-color: $text-button-focus-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
ul li:not(:empty) a {
|
|
||||||
color: $ui-text-color;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $card-bg-hover-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu__separator { border-bottom-color: $border-color }
|
|
||||||
|
|
||||||
.status {
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-bottom-color: $border-color;
|
|
||||||
padding-top: 12px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
left: 12px;
|
|
||||||
top: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-modal {
|
|
||||||
@include shadow-24dp;
|
|
||||||
background: $card-bg-color;
|
|
||||||
color: $ui-text-color;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
&__target {
|
|
||||||
padding: 24px;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__container {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__comment {
|
|
||||||
border-right: none;
|
|
||||||
|
|
||||||
.setting-text-label { color: $ui-text-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.embed-modal .embed-modal__container {
|
|
||||||
padding: 0 24px 24px 24px;
|
|
||||||
|
|
||||||
.hint {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.tabs-bar {
|
|
||||||
background: $top-bar-color;
|
|
||||||
|
|
||||||
&__link {
|
|
||||||
padding: 16px 16px 12px 16px;
|
|
||||||
color: $top-bar-icon-color;
|
|
||||||
border-bottom: 4px solid transparent;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-bottom: 4px solid $tab-indicator-active-color;
|
|
||||||
color: $tab-indicator-active-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa { font-size: 20px }
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 8px;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
@include shadow-4dp;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs-bar__portal { overflow-y: hidden }
|
|
||||||
|
|
||||||
.floating-action-button {
|
|
||||||
@include shadow-6dp;
|
|
||||||
background: $floating-action-button-color;
|
|
||||||
color: $floating-action-button-icon-color;
|
|
||||||
font-size: 24px;
|
|
||||||
width: $fab-size;
|
|
||||||
height: $fab-size;
|
|
||||||
bottom: 16px;
|
|
||||||
right: 16px;
|
|
||||||
|
|
||||||
&:hover { background: $floating-action-button-hover-color }
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus { background: $floating-action-button-active-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.columns-area--mobile {
|
|
||||||
.column { margin: 0 !important }
|
|
||||||
.search__input { padding: 16px 46px }
|
|
||||||
|
|
||||||
.search__icon {
|
|
||||||
.fa {
|
|
||||||
top: 16px;
|
|
||||||
left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-times-circle.active { left: unset }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// small size screen
|
|
||||||
@media screen and (max-width: 415px) {
|
|
||||||
.public-layout { padding-top: 64px }
|
|
||||||
}
|
|
||||||
|
|
||||||
// middle size screen
|
|
||||||
@media screen and (min-width: 415px) {
|
|
||||||
.tabs-bar {
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
&__wrapper {
|
|
||||||
padding-top: 0;
|
|
||||||
|
|
||||||
.tabs-bar { margin-bottom: 0 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.columns-area__panels {
|
|
||||||
&__main {
|
|
||||||
@include shadow-1dp;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__pane { padding: 0 16px }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//single column mode
|
|
||||||
@media screen and (min-width: 631px) {
|
|
||||||
.tabs-bar__link {
|
|
||||||
&:hover {
|
|
||||||
background: $tab-indicator-bg-hover-color;
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background: $tab-indicator-bg-focus-color;
|
|
||||||
border-bottom-color: $tab-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active { border-bottom-color: $tab-indicator-active-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,292 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.status {
|
|
||||||
padding: 12px 12px 4px 70px;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
|
|
||||||
&__expand { width: 70px }
|
|
||||||
|
|
||||||
&__info {
|
|
||||||
font-size: $name-font-size;
|
|
||||||
padding-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__relative-time { color: $info-text-color }
|
|
||||||
|
|
||||||
&__display-name {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $primary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
left: 12px;
|
|
||||||
top: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
font-size: $status-font-size;
|
|
||||||
padding-top: 4px;
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $link-text-color;
|
|
||||||
|
|
||||||
&.unhandled-link { color: $link-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
p { margin-bottom: 16px }
|
|
||||||
|
|
||||||
.status__content__spoiler-link {
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
&:hover { background: $text-button-hover-color }
|
|
||||||
|
|
||||||
&:focus { background: $text-button-focus-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__spoiler-link {
|
|
||||||
border: 0;
|
|
||||||
color: $text-button-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__read-more-button {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $text-button-color;
|
|
||||||
border-radius: $button-radius;
|
|
||||||
padding: 4px 6px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $text-button-hover-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus { background: $text-button-focus-color }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__action-bar {
|
|
||||||
margin-top: 4px;
|
|
||||||
|
|
||||||
&__counter {
|
|
||||||
margin-right: 6px;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $info-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__action-bar-button {
|
|
||||||
margin-right: 4px;
|
|
||||||
|
|
||||||
&.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
|
|
||||||
&--with-counter {
|
|
||||||
margin-right: 4px;
|
|
||||||
width: auto !important;
|
|
||||||
|
|
||||||
&:hover { background: transparent }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__action-bar-dropdown {
|
|
||||||
width: 36px !important;
|
|
||||||
height: 36px !important;
|
|
||||||
box-sizing: content-box;
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $icon-hover-color;
|
|
||||||
background: $icon-bg-active-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color:$icon-hover-color;
|
|
||||||
background: $icon-bg-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__prepend {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
margin-left: 64px;
|
|
||||||
|
|
||||||
.status__display-name strong { color: $secondary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.status-direct:not(.read) {
|
|
||||||
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;
|
|
||||||
|
|
||||||
&>.fa {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
color: $primary-text-color;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__description { color: $secondary-text-color }
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
&>div {
|
|
||||||
background: $media-icon-bg-color;
|
|
||||||
border-radius: $button-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
a {
|
|
||||||
color: $media-icon-color;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a { bottom: auto }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.compact {
|
|
||||||
border-color: $border-color;
|
|
||||||
outline: none;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
.status-card {
|
|
||||||
&__content { padding: 12px }
|
|
||||||
&__image { flex: 0 0 64px }
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover { background-color: transparent !important }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.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 }
|
|
||||||
}
|
|
||||||
|
|
||||||
.embed .status,
|
|
||||||
.public-layout .status { padding: 16px 16px 16px 80px }
|
|
||||||
|
|
||||||
// Detailed status in mobile
|
|
||||||
.status.light {
|
|
||||||
.status {
|
|
||||||
&__display-name { color: $primary-text-color }
|
|
||||||
&__relative-time { color: $info-text-color }
|
|
||||||
&__content { color: $primary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-name { color: $secondary-text-color }
|
|
||||||
.display-name strong { color: $primary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status {
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
&.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
|
|
||||||
|
|
||||||
&__display-name {
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
strong { color: $primary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__meta {
|
|
||||||
margin-top: 16px;
|
|
||||||
color: $info-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__action-bar {
|
|
||||||
background: $card-bg-color;
|
|
||||||
border-top: none;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__action-bar-dropdown {
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $icon-hover-color;
|
|
||||||
background: $icon-bg-active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__button {
|
|
||||||
.icon-button {
|
|
||||||
@include icon-button;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.logo-button {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// search user trends
|
|
||||||
.display-name {
|
|
||||||
&__html { color: $primary-text-color }
|
|
||||||
&__account { color: $secondary-text-color }
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-stream {
|
|
||||||
@include shadow-1dp;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border-radius: $card-radius;
|
|
||||||
|
|
||||||
.entry {
|
|
||||||
background: $card-bg-color;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
.detailed-status,
|
|
||||||
.load-more,
|
|
||||||
.status { border-radius: $card-radius $card-radius 0 0 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry.entry-center { border-bottom: 1px solid $border-color }
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
/*
|
|
||||||
* Mastodon Material 0.2.1
|
|
||||||
* Author: Rintan, Genbu Project
|
|
||||||
* Copyright (C) 2020 Rintan, Genbu Project
|
|
||||||
*/
|
|
||||||
|
|
||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
|
|
||||||
@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
.link-button { color: $link-text-color }
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import 'base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.hero-widget {
|
|
||||||
@include shadow-2dp;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
&__img {
|
|
||||||
border-radius: $card-radius $card-radius 0 0;
|
|
||||||
background: $card-bg-color;
|
|
||||||
|
|
||||||
img { border-radius: $card-radius $card-radius 0 0 }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
background: $card-bg-color;
|
|
||||||
padding: 16px;
|
|
||||||
color: $primary-text-color;
|
|
||||||
border-radius: 0 0 $card-radius $card-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.endorsements-widget {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trends-widget h4 { color: $section-text-color }
|
|
||||||
@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
|
|||||||
$top-bar-text-color: $ui-text-color;
|
$top-bar-text-color: $ui-text-color;
|
||||||
$search-bar-text-color: $inverted-text-color;
|
$search-bar-text-color: $inverted-text-color;
|
||||||
$contained-button-text-color: #ffffff;
|
$contained-button-text-color: #ffffff;
|
||||||
|
$primary-text-on-shadow-color: #ffffff;
|
||||||
|
$text-field-color: $ui-text-color;
|
||||||
|
|
||||||
// Background-color
|
// Background-color
|
||||||
$bg-color: #000000;
|
$bg-color: #000000;
|
||||||
@ -85,8 +87,8 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|||||||
$contained-button-color: $primary-color;
|
$contained-button-color: $primary-color;
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||||
$outlined-button-color: $primary-color;
|
$outlined-button-color: $primary-color;
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
$outlined-button-hover-color: transparentize($primary-color, 0.8);
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
$outlined-button-active-color: transparentize($primary-color, 0.7);
|
||||||
$text-button-color: $primary-color;
|
$text-button-color: $primary-color;
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||||
@ -23,6 +23,8 @@ $menu-text-color: #282c37;
|
|||||||
$top-bar-text-color: $ui-text-color;
|
$top-bar-text-color: $ui-text-color;
|
||||||
$search-bar-text-color: $inverted-text-color;
|
$search-bar-text-color: $inverted-text-color;
|
||||||
$contained-button-text-color: #ffffff;
|
$contained-button-text-color: #ffffff;
|
||||||
|
$primary-text-on-shadow-color: #ffffff;
|
||||||
|
$text-field-color: $ui-text-color;
|
||||||
|
|
||||||
// Background-color
|
// Background-color
|
||||||
$bg-color: #191b22;
|
$bg-color: #191b22;
|
||||||
@ -85,8 +87,8 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|||||||
$contained-button-color: $primary-color;
|
$contained-button-color: $primary-color;
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||||
$outlined-button-color: $primary-color;
|
$outlined-button-color: $primary-color;
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
$outlined-button-hover-color: transparentize($primary-color, 0.8);
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
$outlined-button-active-color: transparentize($primary-color, 0.7);
|
||||||
$text-button-color: $primary-color;
|
$text-button-color: $primary-color;
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.7);
|
$text-button-hover-color: transparentize($text-button-color, 0.7);
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.6);
|
$text-button-focus-color: transparentize($text-button-color, 0.6);
|
||||||
@ -22,6 +22,8 @@ $menu-text-color: $ui-text-color;
|
|||||||
$top-bar-text-color: $ui-text-color;
|
$top-bar-text-color: $ui-text-color;
|
||||||
$search-bar-text-color: $primary-text-color;
|
$search-bar-text-color: $primary-text-color;
|
||||||
$contained-button-text-color: #ffffff;
|
$contained-button-text-color: #ffffff;
|
||||||
|
$primary-text-on-shadow-color: #ffffff;
|
||||||
|
$text-field-color: $ui-text-color;
|
||||||
|
|
||||||
// Background-color
|
// Background-color
|
||||||
$bg-color: #eff3f5;
|
$bg-color: #eff3f5;
|
||||||
@ -84,8 +86,8 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|||||||
$contained-button-color: $primary-color;
|
$contained-button-color: $primary-color;
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||||
$outlined-button-color: $primary-color;
|
$outlined-button-color: $primary-color;
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
$outlined-button-hover-color: transparentize($primary-color, 0.8);
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
$outlined-button-active-color: transparentize($primary-color, 0.7);
|
||||||
$text-button-color: $primary-color;
|
$text-button-color: $primary-color;
|
||||||
$text-button-hover-color: lighten($text-button-color, 36%);
|
$text-button-hover-color: lighten($text-button-color, 36%);
|
||||||
$text-button-focus-color: lighten($text-button-color, 30%);
|
$text-button-focus-color: lighten($text-button-color, 30%);
|
||||||
@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
|
|||||||
$top-bar-text-color: $inverted-text-color;
|
$top-bar-text-color: $inverted-text-color;
|
||||||
$search-bar-text-color: $primary-text-color;
|
$search-bar-text-color: $primary-text-color;
|
||||||
$contained-button-text-color: #ffffff;
|
$contained-button-text-color: #ffffff;
|
||||||
|
$primary-text-on-shadow-color: #ffffff;
|
||||||
|
$text-field-color: $ui-text-color;
|
||||||
|
|
||||||
// Background-color
|
// Background-color
|
||||||
$bg-color: #fafafa;
|
$bg-color: #fafafa;
|
||||||
@ -84,8 +86,8 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|||||||
$contained-button-color: $primary-color;
|
$contained-button-color: $primary-color;
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||||
$outlined-button-color: $primary-color;
|
$outlined-button-color: $primary-color;
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
$outlined-button-hover-color: transparentize($primary-color, 0.8);
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
$outlined-button-active-color: transparentize($primary-color, 0.7);
|
||||||
$text-button-color: $primary-color;
|
$text-button-color: $primary-color;
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||||
@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
|
|||||||
$top-bar-text-color: $ui-text-color;
|
$top-bar-text-color: $ui-text-color;
|
||||||
$search-bar-text-color: $inverted-text-color;
|
$search-bar-text-color: $inverted-text-color;
|
||||||
$contained-button-text-color: #ffffff;
|
$contained-button-text-color: #ffffff;
|
||||||
|
$primary-text-on-shadow-color: #ffffff;
|
||||||
|
$text-field-color: $ui-text-color;
|
||||||
|
|
||||||
// Background-color
|
// Background-color
|
||||||
$bg-color: #303030;
|
$bg-color: #303030;
|
||||||
@ -84,8 +86,8 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|||||||
$contained-button-color: $primary-color;
|
$contained-button-color: $primary-color;
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||||
$outlined-button-color: $primary-color;
|
$outlined-button-color: $primary-color;
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
$outlined-button-hover-color: transparentize($primary-color, 0.8);
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
$outlined-button-active-color: transparentize($primary-color, 0.7);
|
||||||
$text-button-color: $primary-color;
|
$text-button-color: $primary-color;
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||||
@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
|
|||||||
$top-bar-text-color: $inverted-text-color;
|
$top-bar-text-color: $inverted-text-color;
|
||||||
$search-bar-text-color: $primary-text-color;
|
$search-bar-text-color: $primary-text-color;
|
||||||
$contained-button-text-color: #ffffff;
|
$contained-button-text-color: #ffffff;
|
||||||
|
$primary-text-on-shadow-color: #ffffff;
|
||||||
|
$text-field-color: $ui-text-color;
|
||||||
|
|
||||||
// Background-color
|
// Background-color
|
||||||
$bg-color: #fafafa;
|
$bg-color: #fafafa;
|
||||||
@ -85,8 +87,8 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|||||||
$contained-button-color: $primary-color;
|
$contained-button-color: $primary-color;
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||||
$outlined-button-color: $primary-color;
|
$outlined-button-color: $primary-color;
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
$outlined-button-hover-color: transparentize($primary-color, 0.8);
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
$outlined-button-active-color: transparentize($primary-color, 0.7);
|
||||||
$text-button-color: $primary-color;
|
$text-button-color: $primary-color;
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||||
@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
|
|||||||
$top-bar-text-color: $ui-text-color;
|
$top-bar-text-color: $ui-text-color;
|
||||||
$search-bar-text-color: $inverted-text-color;
|
$search-bar-text-color: $inverted-text-color;
|
||||||
$contained-button-text-color: #ffffff;
|
$contained-button-text-color: #ffffff;
|
||||||
|
$primary-text-on-shadow-color: #ffffff;
|
||||||
|
$text-field-color: $ui-text-color;
|
||||||
|
|
||||||
// Background-color
|
// Background-color
|
||||||
$bg-color: #121212;
|
$bg-color: #121212;
|
||||||
@ -85,8 +87,8 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|||||||
$contained-button-color: $primary-color;
|
$contained-button-color: $primary-color;
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||||
$outlined-button-color: $primary-color;
|
$outlined-button-color: $primary-color;
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
$outlined-button-hover-color: transparentize($primary-color, 0.8);
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
$outlined-button-active-color: transparentize($primary-color, 0.7);
|
||||||
$text-button-color: $primary-color;
|
$text-button-color: $primary-color;
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||||
@ -102,7 +104,7 @@ $toggle-thumb-active-color: #1a73e8;
|
|||||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||||
|
|
||||||
// Border color
|
// Border color
|
||||||
$border-color: #2e2e2e;
|
$border-color: #5f6368;
|
||||||
$border-hover-color: lighten($border-color, 30%);
|
$border-hover-color: lighten($border-color, 30%);
|
||||||
$border-active-color: $primary-color;
|
$border-active-color: $primary-color;
|
||||||
|
|
||||||
@ -113,7 +115,7 @@ $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
|
|||||||
|
|
||||||
// App bar color
|
// App bar color
|
||||||
$top-bar-color: #272727;
|
$top-bar-color: #272727;
|
||||||
$search-bar-color: lighten($top-bar-color, 6%);
|
$search-bar-color: lighten($top-bar-color, 18%);
|
||||||
$search-bar-focus-color: #ffffff;
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
// Tab color
|
// Tab color
|
||||||
@ -23,6 +23,8 @@ $menu-text-color: $ui-text-color;
|
|||||||
$top-bar-text-color: $ui-text-color;
|
$top-bar-text-color: $ui-text-color;
|
||||||
$search-bar-text-color: $primary-text-color;
|
$search-bar-text-color: $primary-text-color;
|
||||||
$contained-button-text-color: #ffffff;
|
$contained-button-text-color: #ffffff;
|
||||||
|
$primary-text-on-shadow-color: #ffffff;
|
||||||
|
$text-field-color: $ui-text-color;
|
||||||
|
|
||||||
// Background-color
|
// Background-color
|
||||||
$bg-color: #ffffff;
|
$bg-color: #ffffff;
|
||||||
@ -85,8 +87,8 @@ $icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
|
|||||||
$contained-button-color: $primary-color;
|
$contained-button-color: $primary-color;
|
||||||
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
$contained-button-hover-color: lighten($contained-button-color, 10%);
|
||||||
$outlined-button-color: $primary-color;
|
$outlined-button-color: $primary-color;
|
||||||
$outlined-button-hover-color: lighten($primary-color, 36%);
|
$outlined-button-hover-color: transparentize($primary-color, 0.8);
|
||||||
$outlined-button-active-color: lighten($primary-color, 30%);
|
$outlined-button-active-color: transparentize($primary-color, 0.7);
|
||||||
$text-button-color: $primary-color;
|
$text-button-color: $primary-color;
|
||||||
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
$text-button-hover-color: transparentize($text-button-color, 0.8);
|
||||||
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
$text-button-focus-color: transparentize($text-button-color, 0.7);
|
||||||
@ -38,13 +38,18 @@ $media-radius: 0;
|
|||||||
$nav-drawer-item-radius: 0;
|
$nav-drawer-item-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
// Avater cropping settings
|
// Avatar cropping settings
|
||||||
$avater-radius: 50%; // Rounded cropping
|
$avatar-radius: 50%; // Rounded cropping
|
||||||
//$avater-radius: 2px // Material v1 square
|
//$avatar-radius: 2px // Material v1 square
|
||||||
|
|
||||||
|
|
||||||
// Chip settings
|
// Chip settings
|
||||||
$outlined-chip: false; // Material v1 styled contained chip
|
$chip-type: contained; // Material v1 styled contained chip
|
||||||
|
|
||||||
|
|
||||||
|
// Button on statuses
|
||||||
|
$button-on-status: text; // Material v1 styled text button
|
||||||
|
//$button-on-status: outlined; // Material v2 styled outlined button
|
||||||
|
|
||||||
|
|
||||||
// Button shadow
|
// Button shadow
|
||||||
@ -55,6 +60,10 @@ $button-shadow: true; // Material v1 styled colored button with shadow
|
|||||||
$fab-size: 56px;
|
$fab-size: 56px;
|
||||||
|
|
||||||
|
|
||||||
// Text area border
|
// CW text area border
|
||||||
$text-area-border: false;
|
$cw-area-border: none;
|
||||||
//$text-area-border: underlined;
|
//$cw-area-border: underlined;
|
||||||
|
|
||||||
|
// Compose text area border
|
||||||
|
$compose-area-border: none;
|
||||||
|
//$compose-area-border: underlined;
|
||||||
@ -44,14 +44,19 @@ $nav-drawer-item-radius: 8px; // corner rounded
|
|||||||
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
|
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
|
||||||
|
|
||||||
|
|
||||||
// Avater cropping settings
|
// Avatar cropping settings
|
||||||
$avater-radius: 50%; // Rounded cropping
|
$avatar-radius: 50%; // Rounded cropping
|
||||||
//$avater-radius: 8px // Material v2 square
|
//$avatar-radius: 8px // Material v2 square
|
||||||
|
|
||||||
|
|
||||||
// Chip settings
|
// Chip settings
|
||||||
$outlined-chip: true; // Material v2 styled outlined chip
|
$chip-type: outlined; // Material v2 styled outlined chip
|
||||||
//$outlined-chip: false; // Material v1 styled contained chip
|
//$outlined-chip: contained; // Material v1 styled contained chip
|
||||||
|
|
||||||
|
|
||||||
|
// Button on statuses
|
||||||
|
$button-on-status: text; // Material v1 styled text button
|
||||||
|
//$button-on-status: outlined; // Material v2 styled outlined button
|
||||||
|
|
||||||
|
|
||||||
// Button shadow
|
// Button shadow
|
||||||
@ -64,7 +69,12 @@ $fab-size: 56px; // Regular
|
|||||||
//$fab-size: 40px; // Mini
|
//$fab-size: 40px; // Mini
|
||||||
|
|
||||||
|
|
||||||
// Text area border
|
// CW text area border
|
||||||
$text-area-border: false;
|
$cw-area-border: none;
|
||||||
//$text-area-border: underlined;
|
//$cw-area-border: underlined;
|
||||||
//$text-area-border: outlined;
|
//$cw-area-border: outlined;
|
||||||
|
|
||||||
|
// Compose text area border
|
||||||
|
$compose-area-border: none;
|
||||||
|
//$compose-area-border: underlined;
|
||||||
|
//$compose-area-border: outlined;
|
||||||
@ -1,13 +1,8 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
.announcements {
|
.announcements {
|
||||||
li {
|
li {
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
background: $card-bg-color;
|
background: $card-bg-color;
|
||||||
|
color: $primary-text-color;
|
||||||
border-radius: $card-radius;
|
border-radius: $card-radius;
|
||||||
border: 1px solid $border-color;
|
border: 1px solid $border-color;
|
||||||
}
|
}
|
||||||
@ -1,10 +1,3 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
@import '../theme/mixins';
|
|
||||||
|
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
margin: 2px 0 !important;
|
margin: 2px 0 !important;
|
||||||
@ -1,9 +1,3 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
.drawer {
|
.drawer {
|
||||||
&__header { height: 48px }
|
&__header { height: 48px }
|
||||||
|
|
||||||
@ -20,12 +14,16 @@
|
|||||||
&__buttons { height: 48px }
|
&__buttons { height: 48px }
|
||||||
|
|
||||||
&__button { margin: 6px }
|
&__button { margin: 6px }
|
||||||
|
|
||||||
|
&__back-button { margin: 6px }
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-subheading { padding: 8px 16px }
|
.column-subheading { padding: 8px 16px }
|
||||||
|
|
||||||
.column-link { padding: 12px 16px }
|
.column-link { padding: 12px 16px }
|
||||||
|
|
||||||
|
.tabs-bar__link { padding: 12px 16px 8px 16px }
|
||||||
|
|
||||||
.notification__filter-bar button { padding: 12px 0 }
|
.notification__filter-bar button { padding: 12px 0 }
|
||||||
|
|
||||||
.getting-started__footer {
|
.getting-started__footer {
|
||||||
@ -1,9 +1,3 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@import '../theme/base_config';
|
|
||||||
@import '../custom_config';
|
|
||||||
@import '../custom_color', '../custom_layout';
|
|
||||||
|
|
||||||
|
|
||||||
.status__action-bar-button {
|
.status__action-bar-button {
|
||||||
background: #eeeeee;
|
background: #eeeeee;
|
||||||
width: 28px !important;
|
width: 28px !important;
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// Add your settings below
|
||||||
|
|
||||||
|
@import '../../color/mastodon-dark.scss';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// Add your icon customization below
|
||||||
|
|
||||||
|
$icon-font-source: self;
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||||
|
@import 'config', 'icon_config';
|
||||||
|
@import 'color', 'layout';
|
||||||
|
|
||||||
|
@import '../../theme/functions', '../../theme/mixins';
|
||||||
|
@import '../../theme/theme';
|
||||||
|
@import 'plugins';
|
||||||
|
|
||||||
|
@import '../../theme/material-icons';
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
@import '../../plugins/astarte';
|
||||||
|
//@import '../../plugins/cards';
|
||||||
|
//@import '../../plugins/dense';
|
||||||
|
//@import '../../plugins/plus';
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// Add your settings below
|
||||||
|
|
||||||
|
@import '../../color/mastodon-light.scss';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// Add your icon customization below
|
||||||
|
|
||||||
|
$icon-font-source: self;
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||||
|
@import 'config', 'icon_config';
|
||||||
|
@import 'color', 'layout';
|
||||||
|
|
||||||
|
@import '../../theme/functions', '../../theme/mixins';
|
||||||
|
@import '../../theme/theme';
|
||||||
|
@import 'plugins';
|
||||||
|
|
||||||
|
@import '../../theme/material-icons';
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
@import '../../plugins/astarte';
|
||||||
|
//@import '../../plugins/cards';
|
||||||
|
//@import '../../plugins/dense';
|
||||||
|
//@import '../../plugins/plus';
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// Add your settings below
|
||||||
|
|
||||||
|
@import '../../color/black';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// Add your icon customization below
|
||||||
|
|
||||||
|
$icon-font-source: self;
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||||
|
@import 'config', 'icon_config';
|
||||||
|
@import 'color', 'layout';
|
||||||
|
|
||||||
|
@import '../../theme/functions', '../../theme/mixins';
|
||||||
|
@import '../../theme/theme';
|
||||||
|
@import 'plugins';
|
||||||
|
|
||||||
|
@import '../../theme/material-icons';
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
@import '../../plugins/astarte';
|
||||||
|
//@import '../../plugins/cards';
|
||||||
|
//@import '../../plugins/dense';
|
||||||
|
//@import '../../plugins/plus';
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// Add your settings below
|
||||||
|
|
||||||
|
@import '../../color/v2-dark.scss';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// Add your icon customization below
|
||||||
|
|
||||||
|
$icon-font-source: self;
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import '../../theme/base_config', '../../theme/base_icon_config';
|
||||||
|
@import 'config', 'icon_config';
|
||||||
|
@import 'color', 'layout';
|
||||||
|
|
||||||
|
@import '../../theme/functions', '../../theme/mixins';
|
||||||
|
@import '../../theme/theme';
|
||||||
|
@import 'plugins';
|
||||||
|
|
||||||
|
@import '../../theme/material-icons';
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
@import '../../plugins/astarte';
|
||||||
|
//@import '../../plugins/cards';
|
||||||
|
//@import '../../plugins/dense';
|
||||||
|
//@import '../../plugins/plus';
|
||||||
@ -0,0 +1 @@
|
|||||||
|
// Add your customization below
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user