Materialテーマのアップデートとバリエーションの追加 (#276)
* Material theme (dev) initial release * fix CSP * fix CSP (#268) * fix icon font path * 相対パスの修正 (#269) * fix CSP * fix icon font path * 相対パスの修正 (#270) * fix CSP * fix icon font path * fix font path * Revert "相対パスの修正 (#270)" (#271) This reverts commit27998a80fe. * Revert "相対パスの修正 (#269)" (#272) This reverts commitf864de23f4. * fix relative path * fix override settings * Add variation Update material theme Co-authored-by: YoheiZuho <yuuman002@gmail.com>
This commit is contained in:
Rintan
GitHub
parent
5cf087ebf0
commit
a8a7b8b53b
BIN
app/javascript/fonts/MaterialIcons-Regular.woff2
Normal file
BIN
app/javascript/fonts/MaterialIcons-Regular.woff2
Normal file
Binary file not shown.
18
app/javascript/styles/material-v1-dark.scss
Normal file
18
app/javascript/styles/material-v1-dark.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
//@import 'application';
|
||||||
|
@import 'material-v1-dark/account';
|
||||||
|
@import 'material-v1-dark/basics';
|
||||||
|
@import 'material-v1-dark/button';
|
||||||
|
//@import 'material-v1-dark/cards';
|
||||||
|
@import 'material-v1-dark/columns';
|
||||||
|
@import 'material-v1-dark/components';
|
||||||
|
@import 'material-v1-dark/config';
|
||||||
|
@import 'material-v1-dark/control';
|
||||||
|
@import 'material-v1-dark/emoji-picker';
|
||||||
|
@import 'material-v1-dark/icons';
|
||||||
|
@import 'material-v1-dark/material-icons';
|
||||||
|
@import 'material-v1-dark/media';
|
||||||
|
@import 'material-v1-dark/mobile';
|
||||||
|
@import 'material-v1-dark/modal';
|
||||||
|
@import 'material-v1-dark/statuses';
|
||||||
25
app/javascript/styles/material-v1-dark/_mixins.scss
Normal file
25
app/javascript/styles/material-v1-dark/_mixins.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
@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 non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
|
||||||
139
app/javascript/styles/material-v1-dark/account.scss
Normal file
139
app/javascript/styles/material-v1-dark/account.scss
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.account {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.account__display-name,
|
||||||
|
.account__display-name strong { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
border-radius: $avater-radius;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&-overlay-base {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background-size: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
&__bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.avatar .account__avatar { border: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
small { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
.icon-button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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-background-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-background-inactive-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section-headline {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 16px 0;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-color;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-role {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 17px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
}
|
||||||
24
app/javascript/styles/material-v1-dark/basics.scss
Normal file
24
app/javascript/styles/material-v1-dark/basics.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
|
||||||
|
|
||||||
|
body { background: $background-color }
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
78
app/javascript/styles/material-v1-dark/button.scss
Normal file
78
app/javascript/styles/material-v1-dark/button.scss
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background-color: transparent }
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-icon-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
.button:active,
|
||||||
|
.button:focus {
|
||||||
|
background-color: $contained-button-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background-color: $contained-button-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.logo-button {
|
||||||
|
background: $contained-button-color;
|
||||||
|
margin: 2px;
|
||||||
|
|
||||||
|
&:hover { background: $contained-button-hover-color }
|
||||||
|
|
||||||
|
.button--destructive:hover { background: $contained-button-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button--block { margin: 8px 0 }
|
||||||
|
|
||||||
|
.button.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 }
|
||||||
|
}
|
||||||
29
app/javascript/styles/material-v1-dark/cards.scss
Normal file
29
app/javascript/styles/material-v1-dark/cards.scss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.column {
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 2px 0 !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account { border-bottom: 0 !important }
|
||||||
|
|
||||||
|
.status__wrapper.status__wrapper,
|
||||||
|
.notification.notification {
|
||||||
|
@include shadow-1dp;
|
||||||
|
margin: 8px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
|
||||||
|
|
||||||
|
.notification__filter-bar {
|
||||||
|
@include non-overflow-shadow-4dp;
|
||||||
|
}
|
||||||
107
app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
Normal file
107
app/javascript/styles/material-v1-dark/color/mastodon-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #191b22;
|
||||||
|
$menu-background-color: #d9e1e8;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #444b5d;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #282c37;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #42485a;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #393f4f;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #9baec8;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: lighten($background-color, 14%);
|
||||||
|
$icon-background-active-color: lighten($background-color, 18%);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $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($primary-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #393f4f;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 16%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
|
||||||
|
|
||||||
|
// 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-background-hover-color: transparentize($tab-indicator-color, 0.7);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
|
||||||
106
app/javascript/styles/material-v1-dark/color/mastodon-light.scss
Normal file
106
app/javascript/styles/material-v1-dark/color/mastodon-light.scss
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #eff3f5;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #282c37;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: darken($background-color, 4%);
|
||||||
|
$icon-background-active-color: darken($background-color, 8%);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $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: $primary-color;
|
||||||
|
$toggle-track-active-color: lighten($primary-color, 26%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// 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: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
|
||||||
|
$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
|
||||||
107
app/javascript/styles/material-v1-dark/color/v1-dark.scss
Normal file
107
app/javascript/styles/material-v1-dark/color/v1-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #303030;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: #5f6368;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: lighten($background-color, 6%);
|
||||||
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v1-dark/color/v1-light.scss
Normal file
107
app/javascript/styles/material-v1-dark/color/v1-light.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #fafafa;
|
||||||
|
$menu-background-color: #ffffff;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v1-dark/color/v2-dark.scss
Normal file
107
app/javascript/styles/material-v1-dark/color/v2-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #121212;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: #1e1e1e;
|
||||||
|
$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: #5f6368;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-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: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v1-dark/color/v2-light.scss
Normal file
107
app/javascript/styles/material-v1-dark/color/v2-light.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #ffffff;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: $background-color;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: $background-color;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $secondary-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-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: $background-color;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
391
app/javascript/styles/material-v1-dark/columns.scss
Normal file
391
app/javascript/styles/material-v1-dark/columns.scss
Normal file
@ -0,0 +1,391 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include shadow-1dp;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 8px;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&>.scrollable { background: $list-background-color }
|
||||||
|
|
||||||
|
&:last-child { box-shadow: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
color: $top-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.column-header__icon {
|
||||||
|
color: $secondary-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 16px;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons { height: 56px }
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
margin: 8px 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $top-bar-icon-active-color;
|
||||||
|
background: $icon-background-active-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-btn {
|
||||||
|
color: $icon-button-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-arrows { font-size: 16px }
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include shadow-4dp;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
.announcements { border-top: 1px solid $border-color }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
@include shadow-4dp;
|
||||||
|
|
||||||
|
&:before { background: transparent }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__collapsible {
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed { border-top: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__back-button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 8px;
|
||||||
|
margin: auto 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
span { display: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading {
|
||||||
|
color: $section-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-link {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: $nav-drawer-item-radius;
|
||||||
|
|
||||||
|
&:hover { background: $list-background-hover-color }
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background: $list-background-active-color }
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 32px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--transparent {
|
||||||
|
&.active {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-back-button {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-inline-form {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
.icon-button { margin: 0 16px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-text {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $search-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-1dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-column-indicator {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px;
|
||||||
|
background: $list-background-inactive-color;
|
||||||
|
|
||||||
|
&--unread {
|
||||||
|
background: $list-background-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
.status {
|
||||||
|
&__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
p { color: $primary-text-color }
|
||||||
|
|
||||||
|
a { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__display-name strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-gap { border-bottom: 1px solid $border-color }
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started {
|
||||||
|
background: $background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
background: $background-color;
|
||||||
|
height: auto !important;
|
||||||
|
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 }
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-toggle {
|
||||||
|
&__label {
|
||||||
|
color: $ui-text-color;
|
||||||
|
margin: 8px 8px 8px 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcements {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&__container { color: $primary-text-color }
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&__unread { background: $badge-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reactions-bar {
|
||||||
|
.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: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__emoji {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 4px 0 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__count {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $contained-chip-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
&__filter-bar {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span { font-size: 14px }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-color;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-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 {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.icon-button.disabled { color: $disabled-icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.notification-favourite.focusable,
|
||||||
|
.notification.notification-follow.focusable { background: $list-background-inactive-color }
|
||||||
|
|
||||||
|
.relationship-tag {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-swipeable-view-container { height: auto }
|
||||||
|
|
||||||
|
.tabs-bar__wrapper { background: transparent }
|
||||||
|
|
||||||
|
.attachment-list__list a { color: $secondary-text-color }
|
||||||
|
|
||||||
|
.focusable { background: transparent !important }
|
||||||
339
app/javascript/styles/material-v1-dark/components.scss
Normal file
339
app/javascript/styles/material-v1-dark/components.scss
Normal file
@ -0,0 +1,339 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
&__header {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $nav-bar-radius;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
a { transition: none }
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: $icon-background-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-background-color;
|
||||||
|
|
||||||
|
&.darker { background: $card-background-color }
|
||||||
|
|
||||||
|
&__mastodon { background: $card-background-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
&__input {
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
border-radius: $search-bar-radius;
|
||||||
|
padding: 12px 12px 12px 40px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
color: $search-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::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: 10px;
|
||||||
|
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-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section {
|
||||||
|
h5 {
|
||||||
|
background: $card-background-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-panel hr {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
&__arrow { visibility: hidden }
|
||||||
|
|
||||||
|
&__item a {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 9px 16px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background: $menu-background-hover-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__separator {
|
||||||
|
margin: 8px 0;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
.autosuggest-textarea__textarea {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-input__input {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
&__warning {
|
||||||
|
@include shadow-1dp;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
a { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons-wrapper {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__poll-wrapper {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
ul { padding: 12px }
|
||||||
|
|
||||||
|
select {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $background-color;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-secondary {
|
||||||
|
box-shadow: none;
|
||||||
|
color: $outlined-button-color;
|
||||||
|
border-color: $outlined-button-color;
|
||||||
|
|
||||||
|
&:hover { background-color: $outlined-button-hover-color }
|
||||||
|
|
||||||
|
&:active { background-color: $outlined-button-active-color }
|
||||||
|
|
||||||
|
&:focus { background-color: $outlined-button-color }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__utilBtns { padding-top: 0 }
|
||||||
|
|
||||||
|
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll__input {
|
||||||
|
border: 2px solid $control-border-color;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
flex: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll__text input[type=text] {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
padding: 8px 12px;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-dropdown {
|
||||||
|
&.active .privacy-dropdown__value.active {
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.icon-button { color: $icon-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-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-background-active-color;
|
||||||
|
color: $icon-hover-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-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 {
|
||||||
|
@include shadow-1dp;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-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 }
|
||||||
|
}
|
||||||
61
app/javascript/styles/material-v1-dark/config.scss
Normal file
61
app/javascript/styles/material-v1-dark/config.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Color scheme
|
||||||
|
@import 'color/v1-dark';
|
||||||
|
|
||||||
|
|
||||||
|
// Layout profile
|
||||||
|
@import 'layout/material-v1';
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Icon settings
|
||||||
|
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
|
||||||
|
@font-face {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
src:
|
||||||
|
local("Material Icons"),
|
||||||
|
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
|
||||||
|
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
|
||||||
|
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar hover settings
|
||||||
|
// You can enable/disable search bar floating.
|
||||||
|
/*.search__input:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
// Favorite icon settings
|
||||||
|
// If you exclude 'material-icons.scss', please comment out this section.
|
||||||
|
.fa {
|
||||||
|
&.fa-star:before { content: "star" } // Star
|
||||||
|
//&.fa-star:before { content: "favorite" } // Heart
|
||||||
|
//&.fa-star:before { content: "plus_one" } // +1
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #ffd600; // Star
|
||||||
|
//color: #ff4081; // Heart
|
||||||
|
//color: #db4437; // +1
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__action-bar-button.star-icon.icon-button,
|
||||||
|
.star-icon.icon-button {
|
||||||
|
.fa.fa-star:before { content: "star_border" } // Star
|
||||||
|
//.fa.fa-star:before { content: "favorite_border" } // Heart
|
||||||
|
//.fa.fa-star:before { content: "plus_one" } // +1
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&.active.activate {
|
||||||
|
.fa.fa-star:before { content: "star" } // Star
|
||||||
|
//.fa.fa-star:before { content: "favorite" } // Heart
|
||||||
|
//.fa.fa-star:before { content: "plus_one" } // +1
|
||||||
|
}
|
||||||
|
}
|
||||||
69
app/javascript/styles/material-v1-dark/control.scss
Normal file
69
app/javascript/styles/material-v1-dark/control.scss
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
90
app/javascript/styles/material-v1-dark/emoji-picker.scss
Normal file
90
app/javascript/styles/material-v1-dark/emoji-picker.scss
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.emoji-picker-dropdown {
|
||||||
|
&__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart {
|
||||||
|
width: 388px !important;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
border: 0 solid $border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchors {
|
||||||
|
color: $icon-button-color;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchor {
|
||||||
|
padding: 10px 4px;
|
||||||
|
|
||||||
|
&-selected {
|
||||||
|
color: $icon-button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
background-color: $tab-indicator-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-search {
|
||||||
|
background: $menu-background-color;
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline: none;
|
||||||
|
padding: 8px;
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-scroll {
|
||||||
|
padding: 0 8px 8px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-category-label span {
|
||||||
|
padding: 4px 6px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-emoji:hover:before {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-no-results { color: $secondary-text-color }
|
||||||
|
}
|
||||||
37
app/javascript/styles/material-v1-dark/icons.scss
Normal file
37
app/javascript/styles/material-v1-dark/icons.scss
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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 { vertical-align: sub } //マテリアルアイコンを文字の高さにそろえる
|
||||||
|
|
||||||
|
.fa.fa-times,
|
||||||
|
.fa.fa-eraser { vertical-align: middle } //↑の例外
|
||||||
|
|
||||||
|
.fa.fa-lock { text-transform: none }
|
||||||
|
|
||||||
|
.fa-fw { width: 16px }
|
||||||
|
|
||||||
|
.fa.fa-chevron-left.column-back-button__icon.fa-fw {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-with-badge__badge {
|
||||||
|
background: $badge-color;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import '../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;
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation drawer item settings
|
||||||
|
$nav-drawer-item-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Avater cropping settings
|
||||||
|
$avater-radius: 50%; // Rounded cropping
|
||||||
|
//$avater-radius: 2px // Material v1 square
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import '../mixins';
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation bar radius
|
||||||
|
$nav-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar radius
|
||||||
|
$search-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
|
||||||
|
// 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
|
||||||
|
// If you want to use contained-chip, please comment out below.
|
||||||
|
.reactions-bar__item {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
|
||||||
|
&.active { background-color: $outlined-chip-selected-color !important }
|
||||||
|
|
||||||
|
&:hover { background: $outlined-chip-hover-color !important }
|
||||||
|
}
|
||||||
|
.relationship-tag,
|
||||||
|
.account-role {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
96
app/javascript/styles/material-v1-dark/material-icons.scss
Normal file
96
app/javascript/styles/material-v1-dark/material-icons.scss
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
|
||||||
|
|
||||||
|
.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-star,
|
||||||
|
&.fa-bookmark,
|
||||||
|
&.fa-ellipsis-h,
|
||||||
|
&.fa-bell,
|
||||||
|
&.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 {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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" }
|
||||||
|
&.fa-reply-all:before { content: "reply_all" }
|
||||||
|
&.fa-bookmark:before { content: "bookmark" }
|
||||||
|
&.fa-ellipsis-h:before { content: "more_horiz" }
|
||||||
|
&.fa-bell: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" }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__action-bar-button.icon-button,
|
||||||
|
.bookmark-icon.icon-button {
|
||||||
|
.fa.fa-bookmark:before { content: "bookmark_border" }
|
||||||
|
&.active .fa.fa-bookmark:before { content: "bookmark" }
|
||||||
|
}
|
||||||
38
app/javascript/styles/material-v1-dark/media.scss
Normal file
38
app/javascript/styles/material-v1-dark/media.scss
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.media-gallery { border-radius: $card-radius }
|
||||||
|
|
||||||
|
.media-modal__close {
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
&.icon-button {
|
||||||
|
background: transparent;
|
||||||
|
color: $media-icon-color;
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-hover-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-fw { width: 24px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button.overlayed {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
app/javascript/styles/material-v1-dark/mobile.scss
Normal file
45
app/javascript/styles/material-v1-dark/mobile.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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-color;
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { font-size: 20px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper { @include shadow-4dp }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
|
||||||
|
&: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 38px }
|
||||||
|
}
|
||||||
61
app/javascript/styles/material-v1-dark/modal.scss
Normal file
61
app/javascript/styles/material-v1-dark/modal.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.confirmation-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $dialog-radius;
|
||||||
|
width: 280px;
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
text-align: left;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
ul li:not(:empty) a {
|
||||||
|
color: $ui-text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $card-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__separator { border-bottom-color: $border-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&__target {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal .embed-modal__container {
|
||||||
|
padding: 0 24px 24px 24px;
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
146
app/javascript/styles/material-v1-dark/statuses.scss
Normal file
146
app/javascript/styles/material-v1-dark/statuses.scss
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 12px 12px 12px 70px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&__expand { width: 70px }
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
font-size: 16px;
|
||||||
|
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: 16px;
|
||||||
|
padding-top: 4px;
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-text-color;
|
||||||
|
|
||||||
|
&.unhandled-link { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
&__counter__label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-direct:not(.read) {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom-color: $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
color: $icon-color;
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&>.fa {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: $primary-text-color;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
&__content { padding: 12px }
|
||||||
|
&__image { flex: 0 0 64px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: transparent !important }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: $card-background-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.light {
|
||||||
|
.display-name span { color: $info-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&__display-name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
.icon-button { font-size: 20px !important }
|
||||||
|
}
|
||||||
|
}
|
||||||
18
app/javascript/styles/material-v1-light.scss
Normal file
18
app/javascript/styles/material-v1-light.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
//@import 'application';
|
||||||
|
@import 'material-v1-light/account';
|
||||||
|
@import 'material-v1-light/basics';
|
||||||
|
@import 'material-v1-light/button';
|
||||||
|
//@import 'material-v1-light/cards';
|
||||||
|
@import 'material-v1-light/columns';
|
||||||
|
@import 'material-v1-light/components';
|
||||||
|
@import 'material-v1-light/config';
|
||||||
|
@import 'material-v1-light/control';
|
||||||
|
@import 'material-v1-light/emoji-picker';
|
||||||
|
@import 'material-v1-light/icons';
|
||||||
|
@import 'material-v1-light/material-icons';
|
||||||
|
@import 'material-v1-light/media';
|
||||||
|
@import 'material-v1-light/mobile';
|
||||||
|
@import 'material-v1-light/modal';
|
||||||
|
@import 'material-v1-light/statuses';
|
||||||
25
app/javascript/styles/material-v1-light/_mixins.scss
Normal file
25
app/javascript/styles/material-v1-light/_mixins.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
@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 non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
|
||||||
139
app/javascript/styles/material-v1-light/account.scss
Normal file
139
app/javascript/styles/material-v1-light/account.scss
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.account {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.account__display-name,
|
||||||
|
.account__display-name strong { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
border-radius: $avater-radius;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&-overlay-base {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background-size: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
&__bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.avatar .account__avatar { border: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
small { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
.icon-button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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-background-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-background-inactive-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section-headline {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 16px 0;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-color;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-role {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 17px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
}
|
||||||
24
app/javascript/styles/material-v1-light/basics.scss
Normal file
24
app/javascript/styles/material-v1-light/basics.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
|
||||||
|
|
||||||
|
body { background: $background-color }
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
78
app/javascript/styles/material-v1-light/button.scss
Normal file
78
app/javascript/styles/material-v1-light/button.scss
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background-color: transparent }
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-icon-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
.button:active,
|
||||||
|
.button:focus {
|
||||||
|
background-color: $contained-button-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background-color: $contained-button-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.logo-button {
|
||||||
|
background: $contained-button-color;
|
||||||
|
margin: 2px;
|
||||||
|
|
||||||
|
&:hover { background: $contained-button-hover-color }
|
||||||
|
|
||||||
|
.button--destructive:hover { background: $contained-button-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button--block { margin: 8px 0 }
|
||||||
|
|
||||||
|
.button.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 }
|
||||||
|
}
|
||||||
29
app/javascript/styles/material-v1-light/cards.scss
Normal file
29
app/javascript/styles/material-v1-light/cards.scss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.column {
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 2px 0 !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account { border-bottom: 0 !important }
|
||||||
|
|
||||||
|
.status__wrapper.status__wrapper,
|
||||||
|
.notification.notification {
|
||||||
|
@include shadow-1dp;
|
||||||
|
margin: 8px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
|
||||||
|
|
||||||
|
.notification__filter-bar {
|
||||||
|
@include non-overflow-shadow-4dp;
|
||||||
|
}
|
||||||
107
app/javascript/styles/material-v1-light/color/mastodon-dark.scss
Normal file
107
app/javascript/styles/material-v1-light/color/mastodon-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #191b22;
|
||||||
|
$menu-background-color: #d9e1e8;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #444b5d;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #282c37;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #42485a;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #393f4f;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #9baec8;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: lighten($background-color, 14%);
|
||||||
|
$icon-background-active-color: lighten($background-color, 18%);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $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($primary-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #393f4f;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 16%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
|
||||||
|
|
||||||
|
// 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-background-hover-color: transparentize($tab-indicator-color, 0.7);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #eff3f5;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #282c37;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: darken($background-color, 4%);
|
||||||
|
$icon-background-active-color: darken($background-color, 8%);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $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: $primary-color;
|
||||||
|
$toggle-track-active-color: lighten($primary-color, 26%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// 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: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
|
||||||
|
$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
|
||||||
107
app/javascript/styles/material-v1-light/color/v1-dark.scss
Normal file
107
app/javascript/styles/material-v1-light/color/v1-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #303030;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: #5f6368;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: lighten($background-color, 6%);
|
||||||
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v1-light/color/v1-light.scss
Normal file
107
app/javascript/styles/material-v1-light/color/v1-light.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #fafafa;
|
||||||
|
$menu-background-color: #ffffff;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v1-light/color/v2-dark.scss
Normal file
107
app/javascript/styles/material-v1-light/color/v2-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #121212;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: #1e1e1e;
|
||||||
|
$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: #5f6368;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-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: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v1-light/color/v2-light.scss
Normal file
107
app/javascript/styles/material-v1-light/color/v2-light.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #ffffff;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: $background-color;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: $background-color;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $secondary-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-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: $background-color;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
391
app/javascript/styles/material-v1-light/columns.scss
Normal file
391
app/javascript/styles/material-v1-light/columns.scss
Normal file
@ -0,0 +1,391 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include shadow-1dp;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 8px;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&>.scrollable { background: $list-background-color }
|
||||||
|
|
||||||
|
&:last-child { box-shadow: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
color: $top-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.column-header__icon {
|
||||||
|
color: $secondary-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 16px;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons { height: 56px }
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
margin: 8px 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $top-bar-icon-active-color;
|
||||||
|
background: $icon-background-active-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-btn {
|
||||||
|
color: $icon-button-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-arrows { font-size: 16px }
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include shadow-4dp;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
.announcements { border-top: 1px solid $border-color }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
@include shadow-4dp;
|
||||||
|
|
||||||
|
&:before { background: transparent }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__collapsible {
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed { border-top: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__back-button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 8px;
|
||||||
|
margin: auto 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
span { display: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading {
|
||||||
|
color: $section-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-link {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: $nav-drawer-item-radius;
|
||||||
|
|
||||||
|
&:hover { background: $list-background-hover-color }
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background: $list-background-active-color }
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 32px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--transparent {
|
||||||
|
&.active {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-back-button {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-inline-form {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
.icon-button { margin: 0 16px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-text {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $search-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-1dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-column-indicator {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px;
|
||||||
|
background: $list-background-inactive-color;
|
||||||
|
|
||||||
|
&--unread {
|
||||||
|
background: $list-background-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
.status {
|
||||||
|
&__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
p { color: $primary-text-color }
|
||||||
|
|
||||||
|
a { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__display-name strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-gap { border-bottom: 1px solid $border-color }
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started {
|
||||||
|
background: $background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
background: $background-color;
|
||||||
|
height: auto !important;
|
||||||
|
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 }
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-toggle {
|
||||||
|
&__label {
|
||||||
|
color: $ui-text-color;
|
||||||
|
margin: 8px 8px 8px 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcements {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&__container { color: $primary-text-color }
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&__unread { background: $badge-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reactions-bar {
|
||||||
|
.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: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__emoji {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 4px 0 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__count {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $contained-chip-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
&__filter-bar {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span { font-size: 14px }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-color;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-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 {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.icon-button.disabled { color: $disabled-icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.notification-favourite.focusable,
|
||||||
|
.notification.notification-follow.focusable { background: $list-background-inactive-color }
|
||||||
|
|
||||||
|
.relationship-tag {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-swipeable-view-container { height: auto }
|
||||||
|
|
||||||
|
.tabs-bar__wrapper { background: transparent }
|
||||||
|
|
||||||
|
.attachment-list__list a { color: $secondary-text-color }
|
||||||
|
|
||||||
|
.focusable { background: transparent !important }
|
||||||
339
app/javascript/styles/material-v1-light/components.scss
Normal file
339
app/javascript/styles/material-v1-light/components.scss
Normal file
@ -0,0 +1,339 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
&__header {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $nav-bar-radius;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
a { transition: none }
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: $icon-background-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-background-color;
|
||||||
|
|
||||||
|
&.darker { background: $card-background-color }
|
||||||
|
|
||||||
|
&__mastodon { background: $card-background-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
&__input {
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
border-radius: $search-bar-radius;
|
||||||
|
padding: 12px 12px 12px 40px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
color: $search-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::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: 10px;
|
||||||
|
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-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section {
|
||||||
|
h5 {
|
||||||
|
background: $card-background-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-panel hr {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
&__arrow { visibility: hidden }
|
||||||
|
|
||||||
|
&__item a {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 9px 16px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background: $menu-background-hover-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__separator {
|
||||||
|
margin: 8px 0;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
.autosuggest-textarea__textarea {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-input__input {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
&__warning {
|
||||||
|
@include shadow-1dp;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
a { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons-wrapper {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__poll-wrapper {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
ul { padding: 12px }
|
||||||
|
|
||||||
|
select {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $background-color;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-secondary {
|
||||||
|
box-shadow: none;
|
||||||
|
color: $outlined-button-color;
|
||||||
|
border-color: $outlined-button-color;
|
||||||
|
|
||||||
|
&:hover { background-color: $outlined-button-hover-color }
|
||||||
|
|
||||||
|
&:active { background-color: $outlined-button-active-color }
|
||||||
|
|
||||||
|
&:focus { background-color: $outlined-button-color }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__utilBtns { padding-top: 0 }
|
||||||
|
|
||||||
|
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll__input {
|
||||||
|
border: 2px solid $control-border-color;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
flex: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll__text input[type=text] {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
padding: 8px 12px;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-dropdown {
|
||||||
|
&.active .privacy-dropdown__value.active {
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.icon-button { color: $icon-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-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-background-active-color;
|
||||||
|
color: $icon-hover-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-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 {
|
||||||
|
@include shadow-1dp;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-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 }
|
||||||
|
}
|
||||||
61
app/javascript/styles/material-v1-light/config.scss
Normal file
61
app/javascript/styles/material-v1-light/config.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Color scheme
|
||||||
|
@import 'color/v1-light';
|
||||||
|
|
||||||
|
|
||||||
|
// Layout profile
|
||||||
|
@import 'layout/material-v1';
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Icon settings
|
||||||
|
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
|
||||||
|
@font-face {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
src:
|
||||||
|
local("Material Icons"),
|
||||||
|
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
|
||||||
|
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
|
||||||
|
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar hover settings
|
||||||
|
// You can enable/disable search bar floating.
|
||||||
|
/*.search__input:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
// Favorite icon settings
|
||||||
|
// If you exclude 'material-icons.scss', please comment out this section.
|
||||||
|
.fa {
|
||||||
|
&.fa-star:before { content: "star" } // Star
|
||||||
|
//&.fa-star:before { content: "favorite" } // Heart
|
||||||
|
//&.fa-star:before { content: "plus_one" } // +1
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #ffd600; // Star
|
||||||
|
//color: #ff4081; // Heart
|
||||||
|
//color: #db4437; // +1
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__action-bar-button.star-icon.icon-button,
|
||||||
|
.star-icon.icon-button {
|
||||||
|
.fa.fa-star:before { content: "star_border" } // Star
|
||||||
|
//.fa.fa-star:before { content: "favorite_border" } // Heart
|
||||||
|
//.fa.fa-star:before { content: "plus_one" } // +1
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&.active.activate {
|
||||||
|
.fa.fa-star:before { content: "star" } // Star
|
||||||
|
//.fa.fa-star:before { content: "favorite" } // Heart
|
||||||
|
//.fa.fa-star:before { content: "plus_one" } // +1
|
||||||
|
}
|
||||||
|
}
|
||||||
69
app/javascript/styles/material-v1-light/control.scss
Normal file
69
app/javascript/styles/material-v1-light/control.scss
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
90
app/javascript/styles/material-v1-light/emoji-picker.scss
Normal file
90
app/javascript/styles/material-v1-light/emoji-picker.scss
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.emoji-picker-dropdown {
|
||||||
|
&__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart {
|
||||||
|
width: 388px !important;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
border: 0 solid $border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchors {
|
||||||
|
color: $icon-button-color;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchor {
|
||||||
|
padding: 10px 4px;
|
||||||
|
|
||||||
|
&-selected {
|
||||||
|
color: $icon-button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
background-color: $tab-indicator-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-search {
|
||||||
|
background: $menu-background-color;
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline: none;
|
||||||
|
padding: 8px;
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-scroll {
|
||||||
|
padding: 0 8px 8px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-category-label span {
|
||||||
|
padding: 4px 6px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-emoji:hover:before {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-no-results { color: $secondary-text-color }
|
||||||
|
}
|
||||||
37
app/javascript/styles/material-v1-light/icons.scss
Normal file
37
app/javascript/styles/material-v1-light/icons.scss
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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 { vertical-align: sub } //マテリアルアイコンを文字の高さにそろえる
|
||||||
|
|
||||||
|
.fa.fa-times,
|
||||||
|
.fa.fa-eraser { vertical-align: middle } //↑の例外
|
||||||
|
|
||||||
|
.fa.fa-lock { text-transform: none }
|
||||||
|
|
||||||
|
.fa-fw { width: 16px }
|
||||||
|
|
||||||
|
.fa.fa-chevron-left.column-back-button__icon.fa-fw {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-with-badge__badge {
|
||||||
|
background: $badge-color;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import '../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;
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation drawer item settings
|
||||||
|
$nav-drawer-item-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Avater cropping settings
|
||||||
|
$avater-radius: 50%; // Rounded cropping
|
||||||
|
//$avater-radius: 2px // Material v1 square
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import '../mixins';
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation bar radius
|
||||||
|
$nav-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar radius
|
||||||
|
$search-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
|
||||||
|
// 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
|
||||||
|
// If you want to use contained-chip, please comment out below.
|
||||||
|
.reactions-bar__item {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
|
||||||
|
&.active { background-color: $outlined-chip-selected-color !important }
|
||||||
|
|
||||||
|
&:hover { background: $outlined-chip-hover-color !important }
|
||||||
|
}
|
||||||
|
.relationship-tag,
|
||||||
|
.account-role {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
96
app/javascript/styles/material-v1-light/material-icons.scss
Normal file
96
app/javascript/styles/material-v1-light/material-icons.scss
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
|
||||||
|
|
||||||
|
.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-star,
|
||||||
|
&.fa-bookmark,
|
||||||
|
&.fa-ellipsis-h,
|
||||||
|
&.fa-bell,
|
||||||
|
&.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 {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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" }
|
||||||
|
&.fa-reply-all:before { content: "reply_all" }
|
||||||
|
&.fa-bookmark:before { content: "bookmark" }
|
||||||
|
&.fa-ellipsis-h:before { content: "more_horiz" }
|
||||||
|
&.fa-bell: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" }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__action-bar-button.icon-button,
|
||||||
|
.bookmark-icon.icon-button {
|
||||||
|
.fa.fa-bookmark:before { content: "bookmark_border" }
|
||||||
|
&.active .fa.fa-bookmark:before { content: "bookmark" }
|
||||||
|
}
|
||||||
38
app/javascript/styles/material-v1-light/media.scss
Normal file
38
app/javascript/styles/material-v1-light/media.scss
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.media-gallery { border-radius: $card-radius }
|
||||||
|
|
||||||
|
.media-modal__close {
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
&.icon-button {
|
||||||
|
background: transparent;
|
||||||
|
color: $media-icon-color;
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-hover-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-fw { width: 24px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button.overlayed {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
app/javascript/styles/material-v1-light/mobile.scss
Normal file
45
app/javascript/styles/material-v1-light/mobile.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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-color;
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { font-size: 20px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper { @include shadow-4dp }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
|
||||||
|
&: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 38px }
|
||||||
|
}
|
||||||
61
app/javascript/styles/material-v1-light/modal.scss
Normal file
61
app/javascript/styles/material-v1-light/modal.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.confirmation-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $dialog-radius;
|
||||||
|
width: 280px;
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
text-align: left;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
ul li:not(:empty) a {
|
||||||
|
color: $ui-text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $card-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__separator { border-bottom-color: $border-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&__target {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal .embed-modal__container {
|
||||||
|
padding: 0 24px 24px 24px;
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
146
app/javascript/styles/material-v1-light/statuses.scss
Normal file
146
app/javascript/styles/material-v1-light/statuses.scss
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 12px 12px 12px 70px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&__expand { width: 70px }
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
font-size: 16px;
|
||||||
|
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: 16px;
|
||||||
|
padding-top: 4px;
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-text-color;
|
||||||
|
|
||||||
|
&.unhandled-link { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
&__counter__label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-direct:not(.read) {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom-color: $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
color: $icon-color;
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&>.fa {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: $primary-text-color;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
&__content { padding: 12px }
|
||||||
|
&__image { flex: 0 0 64px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: transparent !important }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: $card-background-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.light {
|
||||||
|
.display-name span { color: $info-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&__display-name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
.icon-button { font-size: 20px !important }
|
||||||
|
}
|
||||||
|
}
|
||||||
18
app/javascript/styles/material-v2-dark.scss
Normal file
18
app/javascript/styles/material-v2-dark.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
//@import 'application';
|
||||||
|
@import 'material-v2-dark/account';
|
||||||
|
@import 'material-v2-dark/basics';
|
||||||
|
@import 'material-v2-dark/button';
|
||||||
|
//@import 'material-v2-dark/cards';
|
||||||
|
@import 'material-v2-dark/columns';
|
||||||
|
@import 'material-v2-dark/components';
|
||||||
|
@import 'material-v2-dark/config';
|
||||||
|
@import 'material-v2-dark/control';
|
||||||
|
@import 'material-v2-dark/emoji-picker';
|
||||||
|
@import 'material-v2-dark/icons';
|
||||||
|
@import 'material-v2-dark/material-icons';
|
||||||
|
@import 'material-v2-dark/media';
|
||||||
|
@import 'material-v2-dark/mobile';
|
||||||
|
@import 'material-v2-dark/modal';
|
||||||
|
@import 'material-v2-dark/statuses';
|
||||||
25
app/javascript/styles/material-v2-dark/_mixins.scss
Normal file
25
app/javascript/styles/material-v2-dark/_mixins.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
@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 non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
|
||||||
139
app/javascript/styles/material-v2-dark/account.scss
Normal file
139
app/javascript/styles/material-v2-dark/account.scss
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.account {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.account__display-name,
|
||||||
|
.account__display-name strong { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
border-radius: $avater-radius;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&-overlay-base {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background-size: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
&__bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.avatar .account__avatar { border: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
small { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
.icon-button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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-background-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-background-inactive-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section-headline {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 16px 0;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-color;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-role {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 17px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
}
|
||||||
24
app/javascript/styles/material-v2-dark/basics.scss
Normal file
24
app/javascript/styles/material-v2-dark/basics.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
|
||||||
|
|
||||||
|
body { background: $background-color }
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
78
app/javascript/styles/material-v2-dark/button.scss
Normal file
78
app/javascript/styles/material-v2-dark/button.scss
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background-color: transparent }
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-icon-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
.button:active,
|
||||||
|
.button:focus {
|
||||||
|
background-color: $contained-button-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background-color: $contained-button-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.logo-button {
|
||||||
|
background: $contained-button-color;
|
||||||
|
margin: 2px;
|
||||||
|
|
||||||
|
&:hover { background: $contained-button-hover-color }
|
||||||
|
|
||||||
|
.button--destructive:hover { background: $contained-button-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button--block { margin: 8px 0 }
|
||||||
|
|
||||||
|
.button.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 }
|
||||||
|
}
|
||||||
29
app/javascript/styles/material-v2-dark/cards.scss
Normal file
29
app/javascript/styles/material-v2-dark/cards.scss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.column {
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 2px 0 !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account { border-bottom: 0 !important }
|
||||||
|
|
||||||
|
.status__wrapper.status__wrapper,
|
||||||
|
.notification.notification {
|
||||||
|
@include shadow-1dp;
|
||||||
|
margin: 8px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
|
||||||
|
|
||||||
|
.notification__filter-bar {
|
||||||
|
@include non-overflow-shadow-4dp;
|
||||||
|
}
|
||||||
107
app/javascript/styles/material-v2-dark/color/mastodon-dark.scss
Normal file
107
app/javascript/styles/material-v2-dark/color/mastodon-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #191b22;
|
||||||
|
$menu-background-color: #d9e1e8;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #444b5d;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #282c37;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #42485a;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #393f4f;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #9baec8;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: lighten($background-color, 14%);
|
||||||
|
$icon-background-active-color: lighten($background-color, 18%);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $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($primary-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #393f4f;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 16%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
|
||||||
|
|
||||||
|
// 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-background-hover-color: transparentize($tab-indicator-color, 0.7);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
|
||||||
106
app/javascript/styles/material-v2-dark/color/mastodon-light.scss
Normal file
106
app/javascript/styles/material-v2-dark/color/mastodon-light.scss
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #eff3f5;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #282c37;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: darken($background-color, 4%);
|
||||||
|
$icon-background-active-color: darken($background-color, 8%);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $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: $primary-color;
|
||||||
|
$toggle-track-active-color: lighten($primary-color, 26%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// 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: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
|
||||||
|
$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
|
||||||
107
app/javascript/styles/material-v2-dark/color/v1-dark.scss
Normal file
107
app/javascript/styles/material-v2-dark/color/v1-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #303030;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: #5f6368;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: lighten($background-color, 6%);
|
||||||
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v2-dark/color/v1-light.scss
Normal file
107
app/javascript/styles/material-v2-dark/color/v1-light.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #fafafa;
|
||||||
|
$menu-background-color: #ffffff;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v2-dark/color/v2-dark.scss
Normal file
107
app/javascript/styles/material-v2-dark/color/v2-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #121212;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: #1e1e1e;
|
||||||
|
$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: #5f6368;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-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: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v2-dark/color/v2-light.scss
Normal file
107
app/javascript/styles/material-v2-dark/color/v2-light.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #ffffff;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: $background-color;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: $background-color;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $secondary-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-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: $background-color;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
391
app/javascript/styles/material-v2-dark/columns.scss
Normal file
391
app/javascript/styles/material-v2-dark/columns.scss
Normal file
@ -0,0 +1,391 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include shadow-1dp;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 8px;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&>.scrollable { background: $list-background-color }
|
||||||
|
|
||||||
|
&:last-child { box-shadow: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
color: $top-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.column-header__icon {
|
||||||
|
color: $secondary-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 16px;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons { height: 56px }
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
margin: 8px 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $top-bar-icon-active-color;
|
||||||
|
background: $icon-background-active-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-btn {
|
||||||
|
color: $icon-button-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-arrows { font-size: 16px }
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include shadow-4dp;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
.announcements { border-top: 1px solid $border-color }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
@include shadow-4dp;
|
||||||
|
|
||||||
|
&:before { background: transparent }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__collapsible {
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed { border-top: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__back-button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 8px;
|
||||||
|
margin: auto 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
span { display: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading {
|
||||||
|
color: $section-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-link {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: $nav-drawer-item-radius;
|
||||||
|
|
||||||
|
&:hover { background: $list-background-hover-color }
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background: $list-background-active-color }
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 32px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--transparent {
|
||||||
|
&.active {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-back-button {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-inline-form {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
.icon-button { margin: 0 16px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-text {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $search-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-1dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-column-indicator {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px;
|
||||||
|
background: $list-background-inactive-color;
|
||||||
|
|
||||||
|
&--unread {
|
||||||
|
background: $list-background-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
.status {
|
||||||
|
&__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
p { color: $primary-text-color }
|
||||||
|
|
||||||
|
a { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__display-name strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-gap { border-bottom: 1px solid $border-color }
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started {
|
||||||
|
background: $background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
background: $background-color;
|
||||||
|
height: auto !important;
|
||||||
|
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 }
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-toggle {
|
||||||
|
&__label {
|
||||||
|
color: $ui-text-color;
|
||||||
|
margin: 8px 8px 8px 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcements {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&__container { color: $primary-text-color }
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&__unread { background: $badge-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reactions-bar {
|
||||||
|
.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: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__emoji {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 4px 0 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__count {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $contained-chip-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
&__filter-bar {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span { font-size: 14px }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-color;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-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 {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.icon-button.disabled { color: $disabled-icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.notification-favourite.focusable,
|
||||||
|
.notification.notification-follow.focusable { background: $list-background-inactive-color }
|
||||||
|
|
||||||
|
.relationship-tag {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-swipeable-view-container { height: auto }
|
||||||
|
|
||||||
|
.tabs-bar__wrapper { background: transparent }
|
||||||
|
|
||||||
|
.attachment-list__list a { color: $secondary-text-color }
|
||||||
|
|
||||||
|
.focusable { background: transparent !important }
|
||||||
339
app/javascript/styles/material-v2-dark/components.scss
Normal file
339
app/javascript/styles/material-v2-dark/components.scss
Normal file
@ -0,0 +1,339 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
&__header {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $nav-bar-radius;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
a { transition: none }
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: $icon-background-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-background-color;
|
||||||
|
|
||||||
|
&.darker { background: $card-background-color }
|
||||||
|
|
||||||
|
&__mastodon { background: $card-background-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
&__input {
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
border-radius: $search-bar-radius;
|
||||||
|
padding: 12px 12px 12px 40px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
color: $search-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::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: 10px;
|
||||||
|
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-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section {
|
||||||
|
h5 {
|
||||||
|
background: $card-background-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-panel hr {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
&__arrow { visibility: hidden }
|
||||||
|
|
||||||
|
&__item a {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 9px 16px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background: $menu-background-hover-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__separator {
|
||||||
|
margin: 8px 0;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
.autosuggest-textarea__textarea {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-input__input {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
&__warning {
|
||||||
|
@include shadow-1dp;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
a { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons-wrapper {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__poll-wrapper {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
ul { padding: 12px }
|
||||||
|
|
||||||
|
select {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $background-color;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-secondary {
|
||||||
|
box-shadow: none;
|
||||||
|
color: $outlined-button-color;
|
||||||
|
border-color: $outlined-button-color;
|
||||||
|
|
||||||
|
&:hover { background-color: $outlined-button-hover-color }
|
||||||
|
|
||||||
|
&:active { background-color: $outlined-button-active-color }
|
||||||
|
|
||||||
|
&:focus { background-color: $outlined-button-color }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__utilBtns { padding-top: 0 }
|
||||||
|
|
||||||
|
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll__input {
|
||||||
|
border: 2px solid $control-border-color;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
flex: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll__text input[type=text] {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
padding: 8px 12px;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-dropdown {
|
||||||
|
&.active .privacy-dropdown__value.active {
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.icon-button { color: $icon-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-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-background-active-color;
|
||||||
|
color: $icon-hover-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-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 {
|
||||||
|
@include shadow-1dp;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-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 }
|
||||||
|
}
|
||||||
61
app/javascript/styles/material-v2-dark/config.scss
Normal file
61
app/javascript/styles/material-v2-dark/config.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Color scheme
|
||||||
|
@import 'color/v2-dark';
|
||||||
|
|
||||||
|
|
||||||
|
// Layout profile
|
||||||
|
@import 'layout/material-v2';
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Icon settings
|
||||||
|
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
|
||||||
|
@font-face {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
src:
|
||||||
|
local("Material Icons"),
|
||||||
|
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
|
||||||
|
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
|
||||||
|
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar hover settings
|
||||||
|
// You can enable/disable search bar floating.
|
||||||
|
/*.search__input:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
// Favorite icon settings
|
||||||
|
// If you exclude 'material-icons.scss', please comment out this section.
|
||||||
|
.fa {
|
||||||
|
&.fa-star:before { content: "star" } // Star
|
||||||
|
//&.fa-star:before { content: "favorite" } // Heart
|
||||||
|
//&.fa-star:before { content: "plus_one" } // +1
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #ffd600; // Star
|
||||||
|
//color: #ff4081; // Heart
|
||||||
|
//color: #db4437; // +1
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__action-bar-button.star-icon.icon-button,
|
||||||
|
.star-icon.icon-button {
|
||||||
|
.fa.fa-star:before { content: "star_border" } // Star
|
||||||
|
//.fa.fa-star:before { content: "favorite_border" } // Heart
|
||||||
|
//.fa.fa-star:before { content: "plus_one" } // +1
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&.active.activate {
|
||||||
|
.fa.fa-star:before { content: "star" } // Star
|
||||||
|
//.fa.fa-star:before { content: "favorite" } // Heart
|
||||||
|
//.fa.fa-star:before { content: "plus_one" } // +1
|
||||||
|
}
|
||||||
|
}
|
||||||
69
app/javascript/styles/material-v2-dark/control.scss
Normal file
69
app/javascript/styles/material-v2-dark/control.scss
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
90
app/javascript/styles/material-v2-dark/emoji-picker.scss
Normal file
90
app/javascript/styles/material-v2-dark/emoji-picker.scss
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.emoji-picker-dropdown {
|
||||||
|
&__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart {
|
||||||
|
width: 388px !important;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
border: 0 solid $border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchors {
|
||||||
|
color: $icon-button-color;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchor {
|
||||||
|
padding: 10px 4px;
|
||||||
|
|
||||||
|
&-selected {
|
||||||
|
color: $icon-button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
background-color: $tab-indicator-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-search {
|
||||||
|
background: $menu-background-color;
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline: none;
|
||||||
|
padding: 8px;
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-scroll {
|
||||||
|
padding: 0 8px 8px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-category-label span {
|
||||||
|
padding: 4px 6px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-emoji:hover:before {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-no-results { color: $secondary-text-color }
|
||||||
|
}
|
||||||
37
app/javascript/styles/material-v2-dark/icons.scss
Normal file
37
app/javascript/styles/material-v2-dark/icons.scss
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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 { vertical-align: sub } //マテリアルアイコンを文字の高さにそろえる
|
||||||
|
|
||||||
|
.fa.fa-times,
|
||||||
|
.fa.fa-eraser { vertical-align: middle } //↑の例外
|
||||||
|
|
||||||
|
.fa.fa-lock { text-transform: none }
|
||||||
|
|
||||||
|
.fa-fw { width: 16px }
|
||||||
|
|
||||||
|
.fa.fa-chevron-left.column-back-button__icon.fa-fw {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-with-badge__badge {
|
||||||
|
background: $badge-color;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import '../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;
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation drawer item settings
|
||||||
|
$nav-drawer-item-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Avater cropping settings
|
||||||
|
$avater-radius: 50%; // Rounded cropping
|
||||||
|
//$avater-radius: 2px // Material v1 square
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import '../mixins';
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation bar radius
|
||||||
|
$nav-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar radius
|
||||||
|
$search-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
|
||||||
|
// 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
|
||||||
|
// If you want to use contained-chip, please comment out below.
|
||||||
|
.reactions-bar__item {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
|
||||||
|
&.active { background-color: $outlined-chip-selected-color !important }
|
||||||
|
|
||||||
|
&:hover { background: $outlined-chip-hover-color !important }
|
||||||
|
}
|
||||||
|
.relationship-tag,
|
||||||
|
.account-role {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
96
app/javascript/styles/material-v2-dark/material-icons.scss
Normal file
96
app/javascript/styles/material-v2-dark/material-icons.scss
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
|
||||||
|
|
||||||
|
.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-star,
|
||||||
|
&.fa-bookmark,
|
||||||
|
&.fa-ellipsis-h,
|
||||||
|
&.fa-bell,
|
||||||
|
&.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 {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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" }
|
||||||
|
&.fa-reply-all:before { content: "reply_all" }
|
||||||
|
&.fa-bookmark:before { content: "bookmark" }
|
||||||
|
&.fa-ellipsis-h:before { content: "more_horiz" }
|
||||||
|
&.fa-bell: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" }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__action-bar-button.icon-button,
|
||||||
|
.bookmark-icon.icon-button {
|
||||||
|
.fa.fa-bookmark:before { content: "bookmark_border" }
|
||||||
|
&.active .fa.fa-bookmark:before { content: "bookmark" }
|
||||||
|
}
|
||||||
38
app/javascript/styles/material-v2-dark/media.scss
Normal file
38
app/javascript/styles/material-v2-dark/media.scss
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.media-gallery { border-radius: $card-radius }
|
||||||
|
|
||||||
|
.media-modal__close {
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
&.icon-button {
|
||||||
|
background: transparent;
|
||||||
|
color: $media-icon-color;
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-hover-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-fw { width: 24px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button.overlayed {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
app/javascript/styles/material-v2-dark/mobile.scss
Normal file
45
app/javascript/styles/material-v2-dark/mobile.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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-color;
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { font-size: 20px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper { @include shadow-4dp }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
|
||||||
|
&: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 38px }
|
||||||
|
}
|
||||||
61
app/javascript/styles/material-v2-dark/modal.scss
Normal file
61
app/javascript/styles/material-v2-dark/modal.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.confirmation-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $dialog-radius;
|
||||||
|
width: 280px;
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
text-align: left;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
ul li:not(:empty) a {
|
||||||
|
color: $ui-text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $card-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__separator { border-bottom-color: $border-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&__target {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal .embed-modal__container {
|
||||||
|
padding: 0 24px 24px 24px;
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
146
app/javascript/styles/material-v2-dark/statuses.scss
Normal file
146
app/javascript/styles/material-v2-dark/statuses.scss
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 12px 12px 12px 70px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&__expand { width: 70px }
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
font-size: 16px;
|
||||||
|
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: 16px;
|
||||||
|
padding-top: 4px;
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-text-color;
|
||||||
|
|
||||||
|
&.unhandled-link { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
&__counter__label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-direct:not(.read) {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom-color: $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
color: $icon-color;
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&>.fa {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: $primary-text-color;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
&__content { padding: 12px }
|
||||||
|
&__image { flex: 0 0 64px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: transparent !important }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: $card-background-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.light {
|
||||||
|
.display-name span { color: $info-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&__display-name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
.icon-button { font-size: 20px !important }
|
||||||
|
}
|
||||||
|
}
|
||||||
18
app/javascript/styles/material-v2-light.scss
Normal file
18
app/javascript/styles/material-v2-light.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
//@import 'application';
|
||||||
|
@import 'material-v2-light/account';
|
||||||
|
@import 'material-v2-light/basics';
|
||||||
|
@import 'material-v2-light/button';
|
||||||
|
//@import 'material-v2-light/cards';
|
||||||
|
@import 'material-v2-light/columns';
|
||||||
|
@import 'material-v2-light/components';
|
||||||
|
@import 'material-v2-light/config';
|
||||||
|
@import 'material-v2-light/control';
|
||||||
|
@import 'material-v2-light/emoji-picker';
|
||||||
|
@import 'material-v2-light/icons';
|
||||||
|
@import 'material-v2-light/material-icons';
|
||||||
|
@import 'material-v2-light/media';
|
||||||
|
@import 'material-v2-light/mobile';
|
||||||
|
@import 'material-v2-light/modal';
|
||||||
|
@import 'material-v2-light/statuses';
|
||||||
25
app/javascript/styles/material-v2-light/_mixins.scss
Normal file
25
app/javascript/styles/material-v2-light/_mixins.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
@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 non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
|
||||||
139
app/javascript/styles/material-v2-light/account.scss
Normal file
139
app/javascript/styles/material-v2-light/account.scss
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.account {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.account__display-name,
|
||||||
|
.account__display-name strong { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
border-radius: $avater-radius;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&-overlay-base {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background-size: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
&__bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.avatar .account__avatar { border: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
small { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
.icon-button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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-background-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-background-inactive-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section-headline {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 16px 0;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-color;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-role {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 17px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
}
|
||||||
24
app/javascript/styles/material-v2-light/basics.scss
Normal file
24
app/javascript/styles/material-v2-light/basics.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
|
||||||
|
|
||||||
|
body { background: $background-color }
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
78
app/javascript/styles/material-v2-light/button.scss
Normal file
78
app/javascript/styles/material-v2-light/button.scss
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background-color: transparent }
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-icon-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
.button:active,
|
||||||
|
.button:focus {
|
||||||
|
background-color: $contained-button-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background-color: $contained-button-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.logo-button {
|
||||||
|
background: $contained-button-color;
|
||||||
|
margin: 2px;
|
||||||
|
|
||||||
|
&:hover { background: $contained-button-hover-color }
|
||||||
|
|
||||||
|
.button--destructive:hover { background: $contained-button-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button--block { margin: 8px 0 }
|
||||||
|
|
||||||
|
.button.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 }
|
||||||
|
}
|
||||||
29
app/javascript/styles/material-v2-light/cards.scss
Normal file
29
app/javascript/styles/material-v2-light/cards.scss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.column {
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 2px 0 !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
border-bottom: 0 !important;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account { border-bottom: 0 !important }
|
||||||
|
|
||||||
|
.status__wrapper.status__wrapper,
|
||||||
|
.notification.notification {
|
||||||
|
@include shadow-1dp;
|
||||||
|
margin: 8px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
|
||||||
|
|
||||||
|
.notification__filter-bar {
|
||||||
|
@include non-overflow-shadow-4dp;
|
||||||
|
}
|
||||||
107
app/javascript/styles/material-v2-light/color/mastodon-dark.scss
Normal file
107
app/javascript/styles/material-v2-light/color/mastodon-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #191b22;
|
||||||
|
$menu-background-color: #d9e1e8;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #444b5d;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #282c37;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #42485a;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #393f4f;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #9baec8;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: lighten($background-color, 14%);
|
||||||
|
$icon-background-active-color: lighten($background-color, 18%);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $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($primary-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #393f4f;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 16%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
|
||||||
|
|
||||||
|
// 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-background-hover-color: transparentize($tab-indicator-color, 0.7);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.6);
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #eff3f5;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #282c37;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: darken($background-color, 4%);
|
||||||
|
$icon-background-active-color: darken($background-color, 8%);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $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: $primary-color;
|
||||||
|
$toggle-track-active-color: lighten($primary-color, 26%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// 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: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: lighten($tab-indicator-color, 36%);
|
||||||
|
$tab-indicator-background-focus-color: lighten($tab-indicator-color, 30%);
|
||||||
107
app/javascript/styles/material-v2-light/color/v1-dark.scss
Normal file
107
app/javascript/styles/material-v2-light/color/v1-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #303030;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: #5f6368;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: lighten($background-color, 6%);
|
||||||
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v2-light/color/v1-light.scss
Normal file
107
app/javascript/styles/material-v2-light/color/v1-light.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #fafafa;
|
||||||
|
$menu-background-color: #ffffff;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v2-light/color/v2-dark.scss
Normal file
107
app/javascript/styles/material-v2-light/color/v2-dark.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #121212;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: #1e1e1e;
|
||||||
|
$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: #5f6368;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-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: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
107
app/javascript/styles/material-v2-light/color/v2-light.scss
Normal file
107
app/javascript/styles/material-v2-light/color/v2-light.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #ffffff;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: $background-color;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: $background-color;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$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;
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$control-border-color: $icon-color;
|
||||||
|
|
||||||
|
// 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: $secondary-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-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: $background-color;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $primary-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-color, 0.8);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-color, 0.7);
|
||||||
391
app/javascript/styles/material-v2-light/columns.scss
Normal file
391
app/javascript/styles/material-v2-light/columns.scss
Normal file
@ -0,0 +1,391 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include shadow-1dp;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 8px;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&>.scrollable { background: $list-background-color }
|
||||||
|
|
||||||
|
&:last-child { box-shadow: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
color: $top-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.column-header__icon {
|
||||||
|
color: $secondary-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 16px;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons { height: 56px }
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
margin: 8px 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $top-bar-icon-active-color;
|
||||||
|
background: $icon-background-active-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-btn {
|
||||||
|
color: $icon-button-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-arrows { font-size: 16px }
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include shadow-4dp;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
.announcements { border-top: 1px solid $border-color }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
@include shadow-4dp;
|
||||||
|
|
||||||
|
&:before { background: transparent }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__collapsible {
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed { border-top: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__back-button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 8px;
|
||||||
|
margin: auto 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
span { display: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading {
|
||||||
|
color: $section-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-link {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: $nav-drawer-item-radius;
|
||||||
|
|
||||||
|
&:hover { background: $list-background-hover-color }
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background: $list-background-active-color }
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 32px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--transparent {
|
||||||
|
&.active {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-back-button {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-inline-form {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
.icon-button { margin: 0 16px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-text {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $search-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-1dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-column-indicator {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px;
|
||||||
|
background: $list-background-inactive-color;
|
||||||
|
|
||||||
|
&--unread {
|
||||||
|
background: $list-background-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted {
|
||||||
|
.status {
|
||||||
|
&__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
p { color: $primary-text-color }
|
||||||
|
|
||||||
|
a { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__display-name strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-gap { border-bottom: 1px solid $border-color }
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started {
|
||||||
|
background: $background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
background: $background-color;
|
||||||
|
height: auto !important;
|
||||||
|
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 }
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-toggle {
|
||||||
|
&__label {
|
||||||
|
color: $ui-text-color;
|
||||||
|
margin: 8px 8px 8px 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcements {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&__container { color: $primary-text-color }
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&__unread { background: $badge-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reactions-bar {
|
||||||
|
.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: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__emoji {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 4px 0 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__count {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $contained-chip-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
&__filter-bar {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span { font-size: 14px }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-color;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-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 {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.icon-button.disabled { color: $disabled-icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.notification-favourite.focusable,
|
||||||
|
.notification.notification-follow.focusable { background: $list-background-inactive-color }
|
||||||
|
|
||||||
|
.relationship-tag {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-swipeable-view-container { height: auto }
|
||||||
|
|
||||||
|
.tabs-bar__wrapper { background: transparent }
|
||||||
|
|
||||||
|
.attachment-list__list a { color: $secondary-text-color }
|
||||||
|
|
||||||
|
.focusable { background: transparent !important }
|
||||||
339
app/javascript/styles/material-v2-light/components.scss
Normal file
339
app/javascript/styles/material-v2-light/components.scss
Normal file
@ -0,0 +1,339 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
&__header {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $nav-bar-radius;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
a { transition: none }
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: $icon-background-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-background-color;
|
||||||
|
|
||||||
|
&.darker { background: $card-background-color }
|
||||||
|
|
||||||
|
&__mastodon { background: $card-background-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
&__input {
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
border-radius: $search-bar-radius;
|
||||||
|
padding: 12px 12px 12px 40px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
color: $search-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::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: 10px;
|
||||||
|
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-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section {
|
||||||
|
h5 {
|
||||||
|
background: $card-background-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-panel hr {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
&__arrow { visibility: hidden }
|
||||||
|
|
||||||
|
&__item a {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 9px 16px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background: $menu-background-hover-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__separator {
|
||||||
|
margin: 8px 0;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
.autosuggest-textarea__textarea {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-input__input {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
&__warning {
|
||||||
|
@include shadow-1dp;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
a { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons-wrapper {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__poll-wrapper {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
ul { padding: 12px }
|
||||||
|
|
||||||
|
select {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $background-color;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-secondary {
|
||||||
|
box-shadow: none;
|
||||||
|
color: $outlined-button-color;
|
||||||
|
border-color: $outlined-button-color;
|
||||||
|
|
||||||
|
&:hover { background-color: $outlined-button-hover-color }
|
||||||
|
|
||||||
|
&:active { background-color: $outlined-button-active-color }
|
||||||
|
|
||||||
|
&:focus { background-color: $outlined-button-color }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__utilBtns { padding-top: 0 }
|
||||||
|
|
||||||
|
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll__input {
|
||||||
|
border: 2px solid $control-border-color;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
flex: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll__text input[type=text] {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
padding: 8px 12px;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-dropdown {
|
||||||
|
&.active .privacy-dropdown__value.active {
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.icon-button { color: $icon-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-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-background-active-color;
|
||||||
|
color: $icon-hover-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-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 {
|
||||||
|
@include shadow-1dp;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-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 }
|
||||||
|
}
|
||||||
61
app/javascript/styles/material-v2-light/config.scss
Normal file
61
app/javascript/styles/material-v2-light/config.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Color scheme
|
||||||
|
@import 'color/v2-light';
|
||||||
|
|
||||||
|
|
||||||
|
// Layout profile
|
||||||
|
@import 'layout/material-v2';
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Icon settings
|
||||||
|
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
|
||||||
|
@font-face {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
src:
|
||||||
|
local("Material Icons"),
|
||||||
|
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
|
||||||
|
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
|
||||||
|
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar hover settings
|
||||||
|
// You can enable/disable search bar floating.
|
||||||
|
/*.search__input:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
// Favorite icon settings
|
||||||
|
// If you exclude 'material-icons.scss', please comment out this section.
|
||||||
|
.fa {
|
||||||
|
&.fa-star:before { content: "star" } // Star
|
||||||
|
//&.fa-star:before { content: "favorite" } // Heart
|
||||||
|
//&.fa-star:before { content: "plus_one" } // +1
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: #ffd600; // Star
|
||||||
|
//color: #ff4081; // Heart
|
||||||
|
//color: #db4437; // +1
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__action-bar-button.star-icon.icon-button,
|
||||||
|
.star-icon.icon-button {
|
||||||
|
.fa.fa-star:before { content: "star_border" } // Star
|
||||||
|
//.fa.fa-star:before { content: "favorite_border" } // Heart
|
||||||
|
//.fa.fa-star:before { content: "plus_one" } // +1
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&.active.activate {
|
||||||
|
.fa.fa-star:before { content: "star" } // Star
|
||||||
|
//.fa.fa-star:before { content: "favorite" } // Heart
|
||||||
|
//.fa.fa-star:before { content: "plus_one" } // +1
|
||||||
|
}
|
||||||
|
}
|
||||||
69
app/javascript/styles/material-v2-light/control.scss
Normal file
69
app/javascript/styles/material-v2-light/control.scss
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
90
app/javascript/styles/material-v2-light/emoji-picker.scss
Normal file
90
app/javascript/styles/material-v2-light/emoji-picker.scss
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.emoji-picker-dropdown {
|
||||||
|
&__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart {
|
||||||
|
width: 388px !important;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
border: 0 solid $border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchors {
|
||||||
|
color: $icon-button-color;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchor {
|
||||||
|
padding: 10px 4px;
|
||||||
|
|
||||||
|
&-selected {
|
||||||
|
color: $icon-button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
background-color: $tab-indicator-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-search {
|
||||||
|
background: $menu-background-color;
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline: none;
|
||||||
|
padding: 8px;
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-scroll {
|
||||||
|
padding: 0 8px 8px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-category-label span {
|
||||||
|
padding: 4px 6px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-emoji:hover:before {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-no-results { color: $secondary-text-color }
|
||||||
|
}
|
||||||
37
app/javascript/styles/material-v2-light/icons.scss
Normal file
37
app/javascript/styles/material-v2-light/icons.scss
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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 { vertical-align: sub } //マテリアルアイコンを文字の高さにそろえる
|
||||||
|
|
||||||
|
.fa.fa-times,
|
||||||
|
.fa.fa-eraser { vertical-align: middle } //↑の例外
|
||||||
|
|
||||||
|
.fa.fa-lock { text-transform: none }
|
||||||
|
|
||||||
|
.fa-fw { width: 16px }
|
||||||
|
|
||||||
|
.fa.fa-chevron-left.column-back-button__icon.fa-fw {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-with-badge__badge {
|
||||||
|
background: $badge-color;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import '../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;
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation drawer item settings
|
||||||
|
$nav-drawer-item-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Avater cropping settings
|
||||||
|
$avater-radius: 50%; // Rounded cropping
|
||||||
|
//$avater-radius: 2px // Material v1 square
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import '../mixins';
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation bar radius
|
||||||
|
$nav-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar radius
|
||||||
|
$search-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
|
||||||
|
|
||||||
|
// 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
|
||||||
|
// If you want to use contained-chip, please comment out below.
|
||||||
|
.reactions-bar__item {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
|
||||||
|
&.active { background-color: $outlined-chip-selected-color !important }
|
||||||
|
|
||||||
|
&:hover { background: $outlined-chip-hover-color !important }
|
||||||
|
}
|
||||||
|
.relationship-tag,
|
||||||
|
.account-role {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
96
app/javascript/styles/material-v2-light/material-icons.scss
Normal file
96
app/javascript/styles/material-v2-light/material-icons.scss
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
|
||||||
|
|
||||||
|
.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-star,
|
||||||
|
&.fa-bookmark,
|
||||||
|
&.fa-ellipsis-h,
|
||||||
|
&.fa-bell,
|
||||||
|
&.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 {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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" }
|
||||||
|
&.fa-reply-all:before { content: "reply_all" }
|
||||||
|
&.fa-bookmark:before { content: "bookmark" }
|
||||||
|
&.fa-ellipsis-h:before { content: "more_horiz" }
|
||||||
|
&.fa-bell: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" }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__action-bar-button.icon-button,
|
||||||
|
.bookmark-icon.icon-button {
|
||||||
|
.fa.fa-bookmark:before { content: "bookmark_border" }
|
||||||
|
&.active .fa.fa-bookmark:before { content: "bookmark" }
|
||||||
|
}
|
||||||
38
app/javascript/styles/material-v2-light/media.scss
Normal file
38
app/javascript/styles/material-v2-light/media.scss
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.media-gallery { border-radius: $card-radius }
|
||||||
|
|
||||||
|
.media-modal__close {
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
&.icon-button {
|
||||||
|
background: transparent;
|
||||||
|
color: $media-icon-color;
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-hover-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-fw { width: 24px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button.overlayed {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
app/javascript/styles/material-v2-light/mobile.scss
Normal file
45
app/javascript/styles/material-v2-light/mobile.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@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-color;
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { font-size: 20px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper { @include shadow-4dp }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#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;
|
||||||
|
|
||||||
|
&: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 38px }
|
||||||
|
}
|
||||||
61
app/javascript/styles/material-v2-light/modal.scss
Normal file
61
app/javascript/styles/material-v2-light/modal.scss
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
@import 'config';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.confirmation-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $dialog-radius;
|
||||||
|
width: 280px;
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
text-align: left;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
ul li:not(:empty) a {
|
||||||
|
color: $ui-text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $card-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__separator { border-bottom-color: $border-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&__target {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal .embed-modal__container {
|
||||||
|
padding: 0 24px 24px 24px;
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user