add material auto theme
integrate material v2 into v1 update themes
This commit is contained in:
parent
8846f92874
commit
8ca33fa1f1
2
app/javascript/styles/mastodon-material-auto.scss
Normal file
2
app/javascript/styles/mastodon-material-auto.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@use 'mastodon-material-dark';
|
||||
@media (prefers-color-scheme: light) { @import 'mastodon-material-light'; }
|
@ -1,3 +1,2 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'mastodon-material-dark/loader'
|
||||
@import 'application';
|
||||
@import 'mastodon-material-dark/loader';
|
@ -20,30 +20,35 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #121212;
|
||||
$menu-background-color: #1e1e1e;
|
||||
$background-color: #000000;
|
||||
$menu-background-color: #121212;
|
||||
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||
$card-background-color: #1e1e1e;
|
||||
$card-background-color: #121212;
|
||||
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||
$list-background-color: #1e1e1e;
|
||||
$list-background-color: #000000;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
$contained-chip-color: #1e1e1e;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||
$outlined-chip-color: #1e1e1e;
|
||||
$outlined-chip-color: #121212;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
@ -89,7 +94,7 @@ $toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #2e2e2e;
|
||||
$border-color: #1e1e1e;
|
||||
$border-active-color: lighten($border-color, 30%);
|
||||
|
||||
// Scroll bar color
|
||||
@ -98,7 +103,7 @@ $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;
|
||||
$top-bar-color: #1e1e1e;
|
||||
$search-bar-color: lighten($top-bar-color, 6%);
|
||||
$search-bar-focus-color: #ffffff;
|
||||
|
||||
@ -110,7 +115,7 @@ $tab-indicator-background-hover-color: transparentize($tab-indicator-active-colo
|
||||
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $ui-text-color;
|
||||
$text-tab-background-color: #1e1e1e;
|
||||
$text-tab-background-color: #121212;
|
||||
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
|
||||
$menu-text-color: #282c37;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #191b22;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #282c37;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#42485a, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -19,6 +19,7 @@ $link-text-color: #217aba;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #eff3f5;
|
||||
@ -33,6 +34,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -76,7 +81,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #fafafa;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #303030;
|
||||
@ -34,16 +35,20 @@ $list-background-color: #424242;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -76,7 +81,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #fafafa;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #121212;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #ffffff;
|
||||
@ -34,6 +35,7 @@ $list-background-color: $background-color;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -80,7 +85,7 @@ $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;
|
||||
$floating-action-button-icon-color: $primary-color;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
|
@ -52,11 +52,6 @@ $avater-radius: 50%; // Rounded cropping
|
||||
|
||||
&:hover { background: $outlined-chip-hover-color !important }
|
||||
}
|
||||
.relationship-tag,
|
||||
.account-role {
|
||||
background: $outlined-chip-color !important;
|
||||
border: 1px solid $border-color !important;
|
||||
}
|
||||
|
||||
|
||||
// Button shadow
|
||||
|
@ -1,8 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
@import '../application';
|
||||
|
||||
@import 'theme/theme';
|
||||
@import 'theme/material-icons';
|
||||
|
||||
|
@ -60,4 +60,6 @@
|
||||
&__action-bar { padding: 10px 0 }
|
||||
}
|
||||
|
||||
.reply-indicator { padding: 8px }
|
||||
|
||||
.button.button--block { margin: 6px 0 }
|
@ -112,6 +112,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
@ -142,4 +144,10 @@
|
||||
border-radius: 17px;
|
||||
color: $ui-text-color;
|
||||
background-color: $contained-chip-color;
|
||||
}
|
||||
|
||||
.accounts-table__count {
|
||||
color: $ui-text-color;
|
||||
|
||||
small { color: $secondary-text-color }
|
||||
}
|
@ -198,15 +198,10 @@
|
||||
|
||||
.setting-text {
|
||||
color: $primary-text-color;
|
||||
background: $search-bar-color;
|
||||
background: $text-field-background-color;
|
||||
border-radius: $bar-radius;
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
|
||||
&:focus {
|
||||
@include shadow-1dp;
|
||||
background: $search-bar-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
@ -375,7 +370,18 @@
|
||||
&__unread { background: $badge-color }
|
||||
}
|
||||
|
||||
&__pagination { color: $ui-text-color }
|
||||
&__pagination {
|
||||
color: $ui-text-color;
|
||||
padding: 8px 16px;
|
||||
bottom: 8px;
|
||||
|
||||
.icon-button {
|
||||
font-size: 20px !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
|
||||
@ -458,45 +464,11 @@
|
||||
|
||||
.relationship-tag {
|
||||
color: $ui-text-color;
|
||||
background-color: $contained-chip-color;
|
||||
background-color: $relationship-tag-color;
|
||||
font-size: 12px;
|
||||
border-radius: 17px;
|
||||
padding: 4px 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
.focusable {
|
||||
&:focus { background: $card-background-color }
|
||||
}
|
||||
|
||||
// single column mode
|
||||
@media screen and (min-width: 415px) {
|
||||
.tabs-bar {
|
||||
margin-bottom: 0;
|
||||
|
||||
&__wrapper { padding-top: 0 }
|
||||
}
|
||||
|
||||
.columns-area__panels__main {
|
||||
@include shadow-1dp;
|
||||
padding: 0;
|
||||
margin: 12px 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.tabs-bar__link {
|
||||
&:hover {
|
||||
background: $tab-indicator-background-hover-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $tab-indicator-background-focus-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
@ -173,8 +173,9 @@
|
||||
.compose-form {
|
||||
.autosuggest-textarea {
|
||||
&__textarea {
|
||||
background: $card-background-color;
|
||||
background: $text-field-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
}
|
||||
@ -230,7 +231,7 @@
|
||||
&__poll-wrapper {
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
ul { padding: 12px }
|
||||
ul { padding: 16px 12px 16px 0 }
|
||||
|
||||
select {
|
||||
color: $ui-text-color;
|
||||
@ -272,17 +273,31 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
margin: 8px;
|
||||
|
||||
&.checkbox { border-radius: 2px }
|
||||
|
||||
&:focus,
|
||||
&:hover { border: 2px solid $control-border-color }
|
||||
}
|
||||
|
||||
&__text input[type=text] {
|
||||
color: $ui-text-color;
|
||||
background: $background-color;
|
||||
background: $text-field-background-color;
|
||||
border: 1px solid $border-color;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:focus { border-color: $border-active-color }
|
||||
}
|
||||
|
||||
&__option input[type=text] {
|
||||
color: $primary-text-color;
|
||||
background: $text-field-background-color;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__chart {
|
||||
border-radius: 0;
|
||||
background: $poll-bar-color;
|
||||
@ -368,7 +383,8 @@
|
||||
}
|
||||
|
||||
.reply-indicator {
|
||||
@include shadow-1dp;
|
||||
box-shadow: none;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $card-radius;
|
||||
background: $card-background-color;
|
||||
padding: 16px;
|
||||
@ -391,4 +407,128 @@
|
||||
&__list a { color: $secondary-text-color }
|
||||
|
||||
&.compact .fa { color: $icon-color }
|
||||
}
|
||||
|
||||
.block-modal {
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__container { padding: 24px }
|
||||
|
||||
&__action-bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
box-shadow: none !important;
|
||||
color: $text-button-color;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
color: $ui-text-color;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
|
||||
.autosuggest-hashtag {
|
||||
&__name { color: $menu-text-color }
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
background: $background-color;
|
||||
color: $ui-text-color;
|
||||
|
||||
&__column { padding: 8px 16px }
|
||||
}
|
||||
|
||||
.directory {
|
||||
&__card {
|
||||
@include shadow-1dp;
|
||||
margin: 8px 4px;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__img { border-radius: $card-radius $card-radius 0 0 }
|
||||
|
||||
&__bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px 16px;
|
||||
|
||||
.display-name {
|
||||
margin-left: 16px;
|
||||
|
||||
span { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
background: $card-background-color;
|
||||
border-radius: 0 0 $card-radius $card-radius;
|
||||
|
||||
.account__header__content {
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.accounts-table__count { padding: 16px 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mute-modal {
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__container { padding: 24px }
|
||||
|
||||
&__explanation { margin-top: 16px }
|
||||
|
||||
&__action-bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
box-shadow: none !important;
|
||||
background: transparent;
|
||||
margin: 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__label {
|
||||
color: $ui-text-color;
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
@ -151,6 +151,9 @@
|
||||
.no-reduce-motion button.icon-button i.fa-retweet {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
transition: background-position .3s steps(1);
|
||||
transition: none;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown icon
|
||||
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
|
@ -5,7 +5,11 @@
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
.media-gallery { border-radius: $card-radius }
|
||||
.media-gallery {
|
||||
border-radius: 0;
|
||||
|
||||
&__item { border-radius: 0 }
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
align-content: center;
|
||||
|
@ -9,7 +9,7 @@
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $dialog-radius;
|
||||
width: 280px;
|
||||
width: 300px;
|
||||
|
||||
&__container {
|
||||
text-align: left;
|
||||
@ -21,6 +21,24 @@
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&__secondary-button {
|
||||
box-shadow: none !important;
|
||||
color: $text-button-color;
|
||||
background: transparent;
|
||||
margin: 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-modal {
|
||||
|
@ -32,7 +32,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#tabs-bar__portal { overflow-y: hidden }
|
||||
|
||||
.floating-action-button {
|
||||
@ -51,8 +50,45 @@
|
||||
.column { margin: 0 !important }
|
||||
.search__input { padding: 16px 46px }
|
||||
|
||||
.search__icon .fa {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
.search__icon {
|
||||
.fa {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.fa-times-circle.active { left: unset }
|
||||
}
|
||||
}
|
||||
|
||||
// middle size screen
|
||||
@media screen and (min-width: 415px) {
|
||||
.tabs-bar {
|
||||
margin-bottom: 0;
|
||||
|
||||
&__wrapper {
|
||||
padding-top: 0;
|
||||
|
||||
.tabs-bar { margin-bottom: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area__panels__main {
|
||||
@include shadow-1dp;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.tabs-bar__link {
|
||||
&:hover {
|
||||
background: $tab-indicator-background-hover-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $tab-indicator-background-focus-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
}
|
||||
}
|
@ -180,6 +180,6 @@
|
||||
|
||||
// search user trends
|
||||
.display-name {
|
||||
&__html { color: $primary-text-color !important }
|
||||
&__html { color: $primary-text-color }
|
||||
&__account { color: $secondary-text-color }
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
|
||||
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
|
@ -1,3 +1,2 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'mastodon-material-light/loader'
|
||||
@import 'application';
|
||||
@import 'mastodon-material-light/loader';
|
135
app/javascript/styles/mastodon-material-light/color/black.scss
Normal file
135
app/javascript/styles/mastodon-material-light/color/black.scss
Normal file
@ -0,0 +1,135 @@
|
||||
@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;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #000000;
|
||||
$menu-background-color: #121212;
|
||||
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||
$card-background-color: #121212;
|
||||
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||
$list-background-color: #000000;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||
$outlined-chip-color: #121212;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #e2e2e3;
|
||||
$icon-hover-color: 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;
|
||||
$top-bar-unread-icon-color: $secondary-color;
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||
$media-icon-background-hover-color: transparentize(#000000, 0.8);
|
||||
$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: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #1e1e1e;
|
||||
$border-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: #1e1e1e;
|
||||
$search-bar-color: lighten($top-bar-color, 6%);
|
||||
$search-bar-focus-color: #ffffff;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-background-color: $top-bar-color;
|
||||
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $ui-text-color;
|
||||
$text-tab-background-color: #121212;
|
||||
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Poll chart color
|
||||
$poll-bar-leading-color: $primary-color;
|
||||
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
|
@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
|
||||
$menu-text-color: #282c37;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #191b22;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #282c37;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#42485a, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -19,6 +19,7 @@ $link-text-color: #217aba;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #eff3f5;
|
||||
@ -33,6 +34,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -76,7 +81,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #fafafa;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #303030;
|
||||
@ -34,16 +35,20 @@ $list-background-color: #424242;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -76,7 +81,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #fafafa;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #121212;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #ffffff;
|
||||
@ -34,6 +35,7 @@ $list-background-color: $background-color;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -80,7 +85,7 @@ $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;
|
||||
$floating-action-button-icon-color: $primary-color;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
|
@ -52,11 +52,6 @@ $avater-radius: 50%; // Rounded cropping
|
||||
|
||||
&:hover { background: $outlined-chip-hover-color !important }
|
||||
}
|
||||
.relationship-tag,
|
||||
.account-role {
|
||||
background: $outlined-chip-color !important;
|
||||
border: 1px solid $border-color !important;
|
||||
}
|
||||
|
||||
|
||||
// Button shadow
|
||||
|
@ -1,8 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
@import '../application';
|
||||
|
||||
@import 'theme/theme';
|
||||
@import 'theme/material-icons';
|
||||
|
||||
|
@ -60,4 +60,6 @@
|
||||
&__action-bar { padding: 10px 0 }
|
||||
}
|
||||
|
||||
.reply-indicator { padding: 8px }
|
||||
|
||||
.button.button--block { margin: 6px 0 }
|
@ -112,6 +112,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
@ -142,4 +144,10 @@
|
||||
border-radius: 17px;
|
||||
color: $ui-text-color;
|
||||
background-color: $contained-chip-color;
|
||||
}
|
||||
|
||||
.accounts-table__count {
|
||||
color: $ui-text-color;
|
||||
|
||||
small { color: $secondary-text-color }
|
||||
}
|
@ -198,15 +198,10 @@
|
||||
|
||||
.setting-text {
|
||||
color: $primary-text-color;
|
||||
background: $search-bar-color;
|
||||
background: $text-field-background-color;
|
||||
border-radius: $bar-radius;
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
|
||||
&:focus {
|
||||
@include shadow-1dp;
|
||||
background: $search-bar-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
@ -375,7 +370,18 @@
|
||||
&__unread { background: $badge-color }
|
||||
}
|
||||
|
||||
&__pagination { color: $ui-text-color }
|
||||
&__pagination {
|
||||
color: $ui-text-color;
|
||||
padding: 8px 16px;
|
||||
bottom: 8px;
|
||||
|
||||
.icon-button {
|
||||
font-size: 20px !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
|
||||
@ -458,45 +464,11 @@
|
||||
|
||||
.relationship-tag {
|
||||
color: $ui-text-color;
|
||||
background-color: $contained-chip-color;
|
||||
background-color: $relationship-tag-color;
|
||||
font-size: 12px;
|
||||
border-radius: 17px;
|
||||
padding: 4px 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
.focusable {
|
||||
&:focus { background: $card-background-color }
|
||||
}
|
||||
|
||||
// single column mode
|
||||
@media screen and (min-width: 415px) {
|
||||
.tabs-bar {
|
||||
margin-bottom: 0;
|
||||
|
||||
&__wrapper { padding-top: 0 }
|
||||
}
|
||||
|
||||
.columns-area__panels__main {
|
||||
@include shadow-1dp;
|
||||
padding: 0;
|
||||
margin: 12px 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.tabs-bar__link {
|
||||
&:hover {
|
||||
background: $tab-indicator-background-hover-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $tab-indicator-background-focus-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
@ -173,8 +173,9 @@
|
||||
.compose-form {
|
||||
.autosuggest-textarea {
|
||||
&__textarea {
|
||||
background: $card-background-color;
|
||||
background: $text-field-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
}
|
||||
@ -230,7 +231,7 @@
|
||||
&__poll-wrapper {
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
ul { padding: 12px }
|
||||
ul { padding: 16px 12px 16px 0 }
|
||||
|
||||
select {
|
||||
color: $ui-text-color;
|
||||
@ -272,17 +273,31 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
margin: 8px;
|
||||
|
||||
&.checkbox { border-radius: 2px }
|
||||
|
||||
&:focus,
|
||||
&:hover { border: 2px solid $control-border-color }
|
||||
}
|
||||
|
||||
&__text input[type=text] {
|
||||
color: $ui-text-color;
|
||||
background: $background-color;
|
||||
background: $text-field-background-color;
|
||||
border: 1px solid $border-color;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:focus { border-color: $border-active-color }
|
||||
}
|
||||
|
||||
&__option input[type=text] {
|
||||
color: $primary-text-color;
|
||||
background: $text-field-background-color;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__chart {
|
||||
border-radius: 0;
|
||||
background: $poll-bar-color;
|
||||
@ -368,7 +383,8 @@
|
||||
}
|
||||
|
||||
.reply-indicator {
|
||||
@include shadow-1dp;
|
||||
box-shadow: none;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $card-radius;
|
||||
background: $card-background-color;
|
||||
padding: 16px;
|
||||
@ -391,4 +407,128 @@
|
||||
&__list a { color: $secondary-text-color }
|
||||
|
||||
&.compact .fa { color: $icon-color }
|
||||
}
|
||||
|
||||
.block-modal {
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__container { padding: 24px }
|
||||
|
||||
&__action-bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
box-shadow: none !important;
|
||||
color: $text-button-color;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
color: $ui-text-color;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
|
||||
.autosuggest-hashtag {
|
||||
&__name { color: $menu-text-color }
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
background: $background-color;
|
||||
color: $ui-text-color;
|
||||
|
||||
&__column { padding: 8px 16px }
|
||||
}
|
||||
|
||||
.directory {
|
||||
&__card {
|
||||
@include shadow-1dp;
|
||||
margin: 8px 4px;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__img { border-radius: $card-radius $card-radius 0 0 }
|
||||
|
||||
&__bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px 16px;
|
||||
|
||||
.display-name {
|
||||
margin-left: 16px;
|
||||
|
||||
span { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
background: $card-background-color;
|
||||
border-radius: 0 0 $card-radius $card-radius;
|
||||
|
||||
.account__header__content {
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.accounts-table__count { padding: 16px 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mute-modal {
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__container { padding: 24px }
|
||||
|
||||
&__explanation { margin-top: 16px }
|
||||
|
||||
&__action-bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
box-shadow: none !important;
|
||||
background: transparent;
|
||||
margin: 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__label {
|
||||
color: $ui-text-color;
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
@ -151,6 +151,9 @@
|
||||
.no-reduce-motion button.icon-button i.fa-retweet {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
transition: background-position .3s steps(1);
|
||||
transition: none;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown icon
|
||||
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
|
@ -5,7 +5,11 @@
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
.media-gallery { border-radius: $card-radius }
|
||||
.media-gallery {
|
||||
border-radius: 0;
|
||||
|
||||
&__item { border-radius: 0 }
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
align-content: center;
|
||||
|
@ -9,7 +9,7 @@
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $dialog-radius;
|
||||
width: 280px;
|
||||
width: 300px;
|
||||
|
||||
&__container {
|
||||
text-align: left;
|
||||
@ -21,6 +21,24 @@
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&__secondary-button {
|
||||
box-shadow: none !important;
|
||||
color: $text-button-color;
|
||||
background: transparent;
|
||||
margin: 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-modal {
|
||||
|
@ -32,7 +32,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#tabs-bar__portal { overflow-y: hidden }
|
||||
|
||||
.floating-action-button {
|
||||
@ -51,8 +50,45 @@
|
||||
.column { margin: 0 !important }
|
||||
.search__input { padding: 16px 46px }
|
||||
|
||||
.search__icon .fa {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
.search__icon {
|
||||
.fa {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.fa-times-circle.active { left: unset }
|
||||
}
|
||||
}
|
||||
|
||||
// middle size screen
|
||||
@media screen and (min-width: 415px) {
|
||||
.tabs-bar {
|
||||
margin-bottom: 0;
|
||||
|
||||
&__wrapper {
|
||||
padding-top: 0;
|
||||
|
||||
.tabs-bar { margin-bottom: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area__panels__main {
|
||||
@include shadow-1dp;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.tabs-bar__link {
|
||||
&:hover {
|
||||
background: $tab-indicator-background-hover-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $tab-indicator-background-focus-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
}
|
||||
}
|
@ -180,6 +180,6 @@
|
||||
|
||||
// search user trends
|
||||
.display-name {
|
||||
&__html { color: $primary-text-color !important }
|
||||
&__html { color: $primary-text-color }
|
||||
&__account { color: $secondary-text-color }
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'mobile', 'modal', 'statuses', 'variables';
|
||||
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
|
2
app/javascript/styles/material-auto.scss
Normal file
2
app/javascript/styles/material-auto.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@use 'material-dark';
|
||||
@media (prefers-color-scheme: light) { @import 'material-light'; }
|
2
app/javascript/styles/material-black.scss
Normal file
2
app/javascript/styles/material-black.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import 'application';
|
||||
@import 'material-black/loader';
|
135
app/javascript/styles/material-black/color/black.scss
Normal file
135
app/javascript/styles/material-black/color/black.scss
Normal file
@ -0,0 +1,135 @@
|
||||
@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;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #000000;
|
||||
$menu-background-color: #121212;
|
||||
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||
$card-background-color: #121212;
|
||||
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||
$list-background-color: #000000;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||
$outlined-chip-color: #121212;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #e2e2e3;
|
||||
$icon-hover-color: 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;
|
||||
$top-bar-unread-icon-color: $secondary-color;
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||
$media-icon-background-hover-color: transparentize(#000000, 0.8);
|
||||
$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: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #1e1e1e;
|
||||
$border-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: #1e1e1e;
|
||||
$search-bar-color: lighten($top-bar-color, 6%);
|
||||
$search-bar-focus-color: #ffffff;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-background-color: $top-bar-color;
|
||||
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $ui-text-color;
|
||||
$text-tab-background-color: #121212;
|
||||
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Poll chart color
|
||||
$poll-bar-leading-color: $primary-color;
|
||||
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
|
@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
|
||||
$menu-text-color: #282c37;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #191b22;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #282c37;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#42485a, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -19,6 +19,7 @@ $link-text-color: #217aba;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #eff3f5;
|
||||
@ -33,6 +34,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -76,7 +81,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #fafafa;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #303030;
|
||||
@ -34,16 +35,20 @@ $list-background-color: #424242;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -76,7 +81,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #fafafa;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #121212;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #ffffff;
|
||||
@ -34,6 +35,7 @@ $list-background-color: $background-color;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -80,7 +85,7 @@ $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;
|
||||
$floating-action-button-icon-color: $primary-color;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
@ -2,4 +2,4 @@
|
||||
|
||||
|
||||
// Add your settings below
|
||||
@import 'color/v1-dark';
|
||||
@import 'color/black';
|
@ -52,11 +52,6 @@ $avater-radius: 50%; // Rounded cropping
|
||||
|
||||
&:hover { background: $outlined-chip-hover-color !important }
|
||||
}
|
||||
.relationship-tag,
|
||||
.account-role {
|
||||
background: $outlined-chip-color !important;
|
||||
border: 1px solid $border-color !important;
|
||||
}
|
||||
|
||||
|
||||
// Button shadow
|
@ -1,8 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
@import '../application';
|
||||
|
||||
@import 'theme/theme';
|
||||
@import 'theme/material-icons';
|
||||
|
@ -60,4 +60,6 @@
|
||||
&__action-bar { padding: 10px 0 }
|
||||
}
|
||||
|
||||
.reply-indicator { padding: 8px }
|
||||
|
||||
.button.button--block { margin: 6px 0 }
|
@ -112,6 +112,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
@ -142,4 +144,10 @@
|
||||
border-radius: 17px;
|
||||
color: $ui-text-color;
|
||||
background-color: $contained-chip-color;
|
||||
}
|
||||
|
||||
.accounts-table__count {
|
||||
color: $ui-text-color;
|
||||
|
||||
small { color: $secondary-text-color }
|
||||
}
|
@ -198,15 +198,10 @@
|
||||
|
||||
.setting-text {
|
||||
color: $primary-text-color;
|
||||
background: $search-bar-color;
|
||||
background: $text-field-background-color;
|
||||
border-radius: $bar-radius;
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
|
||||
&:focus {
|
||||
@include shadow-1dp;
|
||||
background: $search-bar-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
@ -375,7 +370,18 @@
|
||||
&__unread { background: $badge-color }
|
||||
}
|
||||
|
||||
&__pagination { color: $ui-text-color }
|
||||
&__pagination {
|
||||
color: $ui-text-color;
|
||||
padding: 8px 16px;
|
||||
bottom: 8px;
|
||||
|
||||
.icon-button {
|
||||
font-size: 20px !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
|
||||
@ -458,45 +464,11 @@
|
||||
|
||||
.relationship-tag {
|
||||
color: $ui-text-color;
|
||||
background-color: $contained-chip-color;
|
||||
background-color: $relationship-tag-color;
|
||||
font-size: 12px;
|
||||
border-radius: 17px;
|
||||
padding: 4px 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
.focusable {
|
||||
&:focus { background: $card-background-color }
|
||||
}
|
||||
|
||||
// single column mode
|
||||
@media screen and (min-width: 415px) {
|
||||
.tabs-bar {
|
||||
margin-bottom: 0;
|
||||
|
||||
&__wrapper { padding-top: 0 }
|
||||
}
|
||||
|
||||
.columns-area__panels__main {
|
||||
@include shadow-1dp;
|
||||
padding: 0;
|
||||
margin: 12px 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.tabs-bar__link {
|
||||
&:hover {
|
||||
background: $tab-indicator-background-hover-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $tab-indicator-background-focus-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
@ -173,8 +173,9 @@
|
||||
.compose-form {
|
||||
.autosuggest-textarea {
|
||||
&__textarea {
|
||||
background: $card-background-color;
|
||||
background: $text-field-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&::placeholder { color: $tips-text-color }
|
||||
}
|
||||
@ -230,7 +231,7 @@
|
||||
&__poll-wrapper {
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
ul { padding: 12px }
|
||||
ul { padding: 16px 12px 16px 0 }
|
||||
|
||||
select {
|
||||
color: $ui-text-color;
|
||||
@ -272,17 +273,31 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
margin: 8px;
|
||||
|
||||
&.checkbox { border-radius: 2px }
|
||||
|
||||
&:focus,
|
||||
&:hover { border: 2px solid $control-border-color }
|
||||
}
|
||||
|
||||
&__text input[type=text] {
|
||||
color: $ui-text-color;
|
||||
background: $background-color;
|
||||
background: $text-field-background-color;
|
||||
border: 1px solid $border-color;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:focus { border-color: $border-active-color }
|
||||
}
|
||||
|
||||
&__option input[type=text] {
|
||||
color: $primary-text-color;
|
||||
background: $text-field-background-color;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__chart {
|
||||
border-radius: 0;
|
||||
background: $poll-bar-color;
|
||||
@ -368,7 +383,8 @@
|
||||
}
|
||||
|
||||
.reply-indicator {
|
||||
@include shadow-1dp;
|
||||
box-shadow: none;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $card-radius;
|
||||
background: $card-background-color;
|
||||
padding: 16px;
|
||||
@ -391,4 +407,128 @@
|
||||
&__list a { color: $secondary-text-color }
|
||||
|
||||
&.compact .fa { color: $icon-color }
|
||||
}
|
||||
|
||||
.block-modal {
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__container { padding: 24px }
|
||||
|
||||
&__action-bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
box-shadow: none !important;
|
||||
color: $text-button-color;
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
color: $ui-text-color;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
|
||||
.autosuggest-hashtag {
|
||||
&__name { color: $menu-text-color }
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
background: $background-color;
|
||||
color: $ui-text-color;
|
||||
|
||||
&__column { padding: 8px 16px }
|
||||
}
|
||||
|
||||
.directory {
|
||||
&__card {
|
||||
@include shadow-1dp;
|
||||
margin: 8px 4px;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__img { border-radius: $card-radius $card-radius 0 0 }
|
||||
|
||||
&__bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px 16px;
|
||||
|
||||
.display-name {
|
||||
margin-left: 16px;
|
||||
|
||||
span { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
background: $card-background-color;
|
||||
border-radius: 0 0 $card-radius $card-radius;
|
||||
|
||||
.account__header__content {
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.accounts-table__count { padding: 16px 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mute-modal {
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $card-radius;
|
||||
|
||||
&__container { padding: 24px }
|
||||
|
||||
&__explanation { margin-top: 16px }
|
||||
|
||||
&__action-bar {
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
box-shadow: none !important;
|
||||
background: transparent;
|
||||
margin: 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__label {
|
||||
color: $ui-text-color;
|
||||
margin: 0 0 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
@ -151,6 +151,9 @@
|
||||
.no-reduce-motion button.icon-button i.fa-retweet {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
transition: background-position .3s steps(1);
|
||||
transition: none;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown icon
|
||||
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}
|
@ -5,7 +5,11 @@
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
.media-gallery { border-radius: $card-radius }
|
||||
.media-gallery {
|
||||
border-radius: 0;
|
||||
|
||||
&__item { border-radius: 0 }
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
align-content: center;
|
@ -9,7 +9,7 @@
|
||||
background: $card-background-color;
|
||||
color: $ui-text-color;
|
||||
border-radius: $dialog-radius;
|
||||
width: 280px;
|
||||
width: 300px;
|
||||
|
||||
&__container {
|
||||
text-align: left;
|
||||
@ -21,6 +21,24 @@
|
||||
background: $card-background-color;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
&__secondary-button {
|
||||
box-shadow: none !important;
|
||||
color: $text-button-color;
|
||||
background: transparent;
|
||||
margin: 0 8px;
|
||||
|
||||
&:hover {
|
||||
color: $text-button-color;
|
||||
background: $text-button-hover-color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $text-button-color;
|
||||
background-color: $text-button-focus-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-modal {
|
@ -32,7 +32,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#tabs-bar__portal { overflow-y: hidden }
|
||||
|
||||
.floating-action-button {
|
||||
@ -51,8 +50,45 @@
|
||||
.column { margin: 0 !important }
|
||||
.search__input { padding: 16px 46px }
|
||||
|
||||
.search__icon .fa {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
.search__icon {
|
||||
.fa {
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.fa-times-circle.active { left: unset }
|
||||
}
|
||||
}
|
||||
|
||||
// middle size screen
|
||||
@media screen and (min-width: 415px) {
|
||||
.tabs-bar {
|
||||
margin-bottom: 0;
|
||||
|
||||
&__wrapper {
|
||||
padding-top: 0;
|
||||
|
||||
.tabs-bar { margin-bottom: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area__panels__main {
|
||||
@include shadow-1dp;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.tabs-bar__link {
|
||||
&:hover {
|
||||
background: $tab-indicator-background-hover-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $tab-indicator-background-focus-color;
|
||||
border-bottom-color: $tab-background-color;
|
||||
}
|
||||
}
|
||||
}
|
@ -180,6 +180,6 @@
|
||||
|
||||
// search user trends
|
||||
.display-name {
|
||||
&__html { color: $primary-text-color !important }
|
||||
&__html { color: $primary-text-color }
|
||||
&__account { color: $secondary-text-color }
|
||||
}
|
4
app/javascript/styles/material-black/theme/theme.scss
Normal file
4
app/javascript/styles/material-black/theme/theme.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
|
2
app/javascript/styles/material-dark.scss
Normal file
2
app/javascript/styles/material-dark.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import 'application';
|
||||
@import 'material-dark/loader';
|
135
app/javascript/styles/material-dark/color/black.scss
Normal file
135
app/javascript/styles/material-dark/color/black.scss
Normal file
@ -0,0 +1,135 @@
|
||||
@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;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #000000;
|
||||
$menu-background-color: #121212;
|
||||
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||
$card-background-color: #121212;
|
||||
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||
$list-background-color: #000000;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||
$outlined-chip-color: #121212;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
|
||||
// Icon color
|
||||
$icon-color: #e2e2e3;
|
||||
$icon-hover-color: 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;
|
||||
$top-bar-unread-icon-color: $secondary-color;
|
||||
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||
$media-icon-background-hover-color: transparentize(#000000, 0.8);
|
||||
$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: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
||||
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||
$toggle-thumb-active-color: #1a73e8;
|
||||
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||
|
||||
// Border color
|
||||
$border-color: #1e1e1e;
|
||||
$border-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: #1e1e1e;
|
||||
$search-bar-color: lighten($top-bar-color, 6%);
|
||||
$search-bar-focus-color: #ffffff;
|
||||
|
||||
// Tab color
|
||||
$tab-indicator-color: $top-bar-icon-color;
|
||||
$tab-indicator-active-color: $top-bar-icon-color;
|
||||
$tab-background-color: $top-bar-color;
|
||||
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||
$text-tab-indicator-color: $secondary-text-color;
|
||||
$text-tab-indicator-active-color: $ui-text-color;
|
||||
$text-tab-background-color: #121212;
|
||||
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||
|
||||
// Media indicator color
|
||||
$media-page-indicator-color: #9e9e9e;
|
||||
$media-page-indicator-active-color: #e6e6e6;
|
||||
|
||||
// Poll chart color
|
||||
$poll-bar-leading-color: $primary-color;
|
||||
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
|
||||
|
||||
// Contents color in read status
|
||||
$read-primary-text-color: transparentize($primary-text-color, 0.3);
|
||||
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
|
||||
$read-ui-text-color: transparentize($ui-text-color, 0.3);
|
||||
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
|
||||
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);
|
@ -20,6 +20,7 @@ $link-text-color: #4ea2df;
|
||||
$menu-text-color: #282c37;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #191b22;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #282c37;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #393f4f;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#42485a, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -19,6 +19,7 @@ $link-text-color: #217aba;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #eff3f5;
|
||||
@ -33,6 +34,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -43,6 +45,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -76,7 +81,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #fafafa;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #303030;
|
||||
@ -34,16 +35,20 @@ $list-background-color: #424242;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 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%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -76,7 +81,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $inverted-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #fafafa;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #ffffff;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $inverted-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #121212;
|
||||
@ -34,6 +35,7 @@ $list-background-color: #1e1e1e;
|
||||
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||
$list-background-active-color: lighten($list-background-color, 10%);
|
||||
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: darken($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #1e1e1e;
|
||||
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -77,7 +82,7 @@ $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-color: $primary-color;
|
||||
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||
$floating-action-button-icon-color: #ffffff;
|
@ -20,6 +20,7 @@ $link-text-color: #4285f4;
|
||||
$menu-text-color: $ui-text-color;
|
||||
$top-bar-text-color: $ui-text-color;
|
||||
$search-bar-text-color: $primary-text-color;
|
||||
$contained-button-text-color: #ffffff;
|
||||
|
||||
// Background-color
|
||||
$background-color: #ffffff;
|
||||
@ -34,6 +35,7 @@ $list-background-color: $background-color;
|
||||
$list-background-hover-color: darken($list-background-color, 6%);
|
||||
$list-background-active-color: darken($list-background-color, 10%);
|
||||
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||
$text-field-background-color: $card-background-color;
|
||||
$verified-background-color: lighten($verified-color, 20%);
|
||||
|
||||
// Chip color
|
||||
@ -44,6 +46,9 @@ $outlined-chip-color: #ffffff;
|
||||
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||
|
||||
// Relationship tag color
|
||||
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||
|
||||
// Badge color
|
||||
$badge-color: $primary-color;
|
||||
//$badge-color: $secondary-color;
|
||||
@ -80,7 +85,7 @@ $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;
|
||||
$floating-action-button-icon-color: $primary-color;
|
||||
|
||||
// Toggle color
|
||||
$toggle-thumb-color: #ffffff;
|
5
app/javascript/styles/material-dark/custom_config.scss
Normal file
5
app/javascript/styles/material-dark/custom_config.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
// Add your settings below
|
||||
@import 'color/v2-dark';
|
@ -52,11 +52,6 @@ $avater-radius: 50%; // Rounded cropping
|
||||
|
||||
&:hover { background: $outlined-chip-hover-color !important }
|
||||
}
|
||||
.relationship-tag,
|
||||
.account-role {
|
||||
background: $outlined-chip-color !important;
|
||||
border: 1px solid $border-color !important;
|
||||
}
|
||||
|
||||
|
||||
// Button shadow
|
@ -1,8 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
@import '../application';
|
||||
|
||||
@import 'theme/theme';
|
||||
@import 'theme/material-icons';
|
||||
|
@ -60,4 +60,6 @@
|
||||
&__action-bar { padding: 10px 0 }
|
||||
}
|
||||
|
||||
.reply-indicator { padding: 8px }
|
||||
|
||||
.button.button--block { margin: 6px 0 }
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user