mirror of
https://github.com/Coffeedon/Cofffee-Assets.git
synced 2024-11-30 18:10:59 +00:00
Custom themes
Added all custom themes from the collection.
This commit is contained in:
stux
parent
3582d97425
commit
33ad106a25
139 changed files with 13531 additions and 0 deletions
61
styles/boost.scss
Normal file
61
styles/boost.scss
Normal file
File diff suppressed because one or more lines are too long
7
styles/coffee-dark.scss
Normal file
7
styles/coffee-dark.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@import 'coffee-dark/variables';
|
||||||
|
@import 'application';
|
||||||
|
@import 'coffee-dark/diff';
|
||||||
|
//@import 'boost';
|
||||||
|
//@import 'mods/display_breakname';
|
||||||
|
//@import 'mods/display_fullname';
|
||||||
|
@import 'mods/display_circleavatar';
|
||||||
77
styles/coffee-dark/diff.scss
Normal file
77
styles/coffee-dark/diff.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
// components.scss
|
||||||
|
.compose-form {
|
||||||
|
.compose-form__modifiers {
|
||||||
|
.compose-form__upload {
|
||||||
|
&-description {
|
||||||
|
input {
|
||||||
|
&::placeholder {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-formatting a,
|
||||||
|
.rich-formatting p a,
|
||||||
|
.rich-formatting li a,
|
||||||
|
.landing-page__short-description p a,
|
||||||
|
.status__content a,
|
||||||
|
.reply-indicator__content a {
|
||||||
|
color: lighten($ui-highlight-color, 12%);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&.mention {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mention span {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status__content__spoiler-link {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__content__read-more-button {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started__footer a {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nothing-here {
|
||||||
|
color: $darker-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||||||
|
border-bottom: 4px solid $ui-highlight-color;
|
||||||
|
}
|
||||||
56
styles/coffee-dark/variables.scss
Normal file
56
styles/coffee-dark/variables.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
// Commonly used web colors
|
||||||
|
$black: #000000; // Black
|
||||||
|
$white: #ffffff; // White
|
||||||
|
$success-green: #79bd9a !default; // Padua
|
||||||
|
$error-red: #df405a !default; // Cerise
|
||||||
|
$warning-red: #ff5050 !default; // Sunset Orange
|
||||||
|
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||||
|
|
||||||
|
$red-bookmark: $warning-red;
|
||||||
|
|
||||||
|
// Values from the classic Mastodon UI
|
||||||
|
$classic-base-color: #282c37; // Midnight Express
|
||||||
|
$classic-primary-color: #9baec8; // Echo Blue
|
||||||
|
$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||||||
|
$classic-highlight-color: #e7b01c; // Summer Sky
|
||||||
|
|
||||||
|
// Variables for defaults in UI
|
||||||
|
$base-shadow-color: $black !default;
|
||||||
|
$base-overlay-background: $black !default;
|
||||||
|
$base-border-color: $white !default;
|
||||||
|
$simple-background-color: $white !default;
|
||||||
|
$valid-value-color: $success-green !default;
|
||||||
|
$error-value-color: $error-red !default;
|
||||||
|
|
||||||
|
// Tell UI to use selected colors
|
||||||
|
$ui-base-color: $classic-base-color !default; // Darkest
|
||||||
|
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
||||||
|
$ui-primary-color: $classic-primary-color !default; // Lighter
|
||||||
|
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||||
|
$ui-highlight-color: $classic-highlight-color !default;
|
||||||
|
|
||||||
|
// Variables for texts
|
||||||
|
$primary-text-color: $white !default;
|
||||||
|
$darker-text-color: $ui-primary-color !default;
|
||||||
|
$dark-text-color: $ui-base-lighter-color !default;
|
||||||
|
$secondary-text-color: $ui-secondary-color !default;
|
||||||
|
$highlight-text-color: $ui-highlight-color !default;
|
||||||
|
$action-button-color: $ui-base-lighter-color !default;
|
||||||
|
// For texts on inverted backgrounds
|
||||||
|
$inverted-text-color: $ui-base-color !default;
|
||||||
|
$lighter-text-color: $ui-base-lighter-color !default;
|
||||||
|
$light-text-color: $ui-primary-color !default;
|
||||||
|
|
||||||
|
// Language codes that uses CJK fonts
|
||||||
|
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||||
|
|
||||||
|
// Variables for components
|
||||||
|
$media-modal-media-max-width: 100%;
|
||||||
|
// put margins on top and bottom of image to avoid the screen covered by image.
|
||||||
|
$media-modal-media-max-height: 80%;
|
||||||
|
|
||||||
|
$no-gap-breakpoint: 415px;
|
||||||
|
|
||||||
|
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||||
|
$font-display: 'mastodon-font-display' !default;
|
||||||
|
$font-monospace: 'mastodon-font-monospace' !default;
|
||||||
6
styles/coffee-light.scss
Normal file
6
styles/coffee-light.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
@import 'coffee-light/variables';
|
||||||
|
@import 'application';
|
||||||
|
@import 'coffee-light/diff';
|
||||||
|
//@import 'boost';
|
||||||
|
//@import 'mods/display_fullname';
|
||||||
|
@import 'mods/display_circleavatar';
|
||||||
776
styles/coffee-light/diff.scss
Normal file
776
styles/coffee-light/diff.scss
Normal file
|
|
@ -0,0 +1,776 @@
|
||||||
|
// Notes!
|
||||||
|
// Sass color functions, "darken" and "lighten" are automatically replaced.
|
||||||
|
|
||||||
|
html {
|
||||||
|
scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the colors of button texts
|
||||||
|
.button {
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
&.button-alternative-2 {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card__actions button,
|
||||||
|
.status-card__actions a {
|
||||||
|
color: rgba($white, 0.8);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change default background colors of columns
|
||||||
|
.column > .scrollable,
|
||||||
|
.getting-started,
|
||||||
|
.column-inline-form,
|
||||||
|
.error-column,
|
||||||
|
.regeneration-indicator {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory__card__img {
|
||||||
|
background: lighten($ui-base-color, 12%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-form,
|
||||||
|
.directory__card__bar {
|
||||||
|
background: $white;
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollable .directory__list {
|
||||||
|
width: calc(100% + 2px);
|
||||||
|
margin-left: -1px;
|
||||||
|
margin-right: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory__card,
|
||||||
|
.table-of-contents {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-back-button,
|
||||||
|
.column-header {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--slim-button {
|
||||||
|
top: -50px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header__back-button,
|
||||||
|
.column-header__button,
|
||||||
|
.column-header__button.active,
|
||||||
|
.account__header__bar,
|
||||||
|
.directory__card__extra {
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header__button.active {
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account__header__bar .avatar .account__avatar {
|
||||||
|
border-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started__footer a {
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirmation-modal__secondary-button,
|
||||||
|
.confirmation-modal__cancel-button,
|
||||||
|
.mute-modal__cancel-button,
|
||||||
|
.block-modal__cancel-button {
|
||||||
|
color: lighten($ui-base-color, 26%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading {
|
||||||
|
background: darken($ui-base-color, 4%);
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started,
|
||||||
|
.scrollable {
|
||||||
|
.column-link {
|
||||||
|
background: $white;
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started .navigation-bar {
|
||||||
|
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__autosuggest-wrapper,
|
||||||
|
.poll__option input[type="text"],
|
||||||
|
.compose-form .spoiler-input__input,
|
||||||
|
.compose-form__poll-wrapper select,
|
||||||
|
.search__input,
|
||||||
|
.setting-text,
|
||||||
|
.box-widget input[type="text"],
|
||||||
|
.box-widget input[type="email"],
|
||||||
|
.box-widget input[type="password"],
|
||||||
|
.box-widget textarea,
|
||||||
|
.statuses-grid .detailed-status,
|
||||||
|
.audio-player {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__input {
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-editor .search .search__input {
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__poll-wrapper select {
|
||||||
|
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__poll-wrapper,
|
||||||
|
.compose-form__poll-wrapper .poll__footer {
|
||||||
|
border-top-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification__filter-bar {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form .compose-form__buttons-wrapper {
|
||||||
|
background: $ui-base-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer__header,
|
||||||
|
.drawer__inner {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer__inner__mastodon {
|
||||||
|
background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the colors used in compose-form
|
||||||
|
.compose-form {
|
||||||
|
.compose-form__modifiers {
|
||||||
|
.compose-form__upload__actions .icon-button {
|
||||||
|
color: lighten($white, 7%);
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__upload-description input {
|
||||||
|
color: lighten($white, 7%);
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: lighten($white, 7%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__buttons-wrapper {
|
||||||
|
background: darken($ui-base-color, 6%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.autosuggest-textarea__suggestions {
|
||||||
|
background: darken($ui-base-color, 6%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.autosuggest-textarea__suggestions__item {
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.selected {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-bar {
|
||||||
|
border-color: lighten($ui-base-color, 4%);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
background: darken($ui-base-color, 6%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-search input {
|
||||||
|
background: rgba($ui-base-color, 0.3);
|
||||||
|
border-color: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the background colors of statuses
|
||||||
|
.focusable:focus {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.status-direct {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.focusable:focus .status.status-direct {
|
||||||
|
background: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status,
|
||||||
|
.detailed-status__action-bar {
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the background colors of status__content__spoiler-link
|
||||||
|
.reply-indicator__content .status__content__spoiler-link,
|
||||||
|
.status__content .status__content__spoiler-link {
|
||||||
|
background: $ui-base-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the background colors of media and video spoilers
|
||||||
|
.media-spoiler,
|
||||||
|
.video-player__spoiler {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-gallery__item a {
|
||||||
|
background-color: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the colors used in the dropdown menu
|
||||||
|
.dropdown-menu {
|
||||||
|
background: $white;
|
||||||
|
|
||||||
|
&__arrow {
|
||||||
|
&.left {
|
||||||
|
border-left-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.top {
|
||||||
|
border-top-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bottom {
|
||||||
|
border-bottom-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
border-right-color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
a {
|
||||||
|
background: $white;
|
||||||
|
color: $darker-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the text colors on inverted background
|
||||||
|
.privacy-dropdown__option.active,
|
||||||
|
.privacy-dropdown__option:hover,
|
||||||
|
.privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||||||
|
.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||||||
|
.privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||||
|
.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
||||||
|
.dropdown-menu__item a:active,
|
||||||
|
.dropdown-menu__item a:focus,
|
||||||
|
.dropdown-menu__item a:hover,
|
||||||
|
.actions-modal ul li:not(:empty) a.active,
|
||||||
|
.actions-modal ul li:not(:empty) a.active button,
|
||||||
|
.actions-modal ul li:not(:empty) a:active,
|
||||||
|
.actions-modal ul li:not(:empty) a:active button,
|
||||||
|
.actions-modal ul li:not(:empty) a:focus,
|
||||||
|
.actions-modal ul li:not(:empty) a:focus button,
|
||||||
|
.actions-modal ul li:not(:empty) a:hover,
|
||||||
|
.actions-modal ul li:not(:empty) a:hover button,
|
||||||
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
|
||||||
|
.simple_form .block-button,
|
||||||
|
.simple_form .button,
|
||||||
|
.simple_form button {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__separator {
|
||||||
|
border-bottom-color: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the background colors of modals
|
||||||
|
.actions-modal,
|
||||||
|
.boost-modal,
|
||||||
|
.confirmation-modal,
|
||||||
|
.mute-modal,
|
||||||
|
.block-modal,
|
||||||
|
.report-modal,
|
||||||
|
.embed-modal,
|
||||||
|
.error-modal,
|
||||||
|
.onboarding-modal,
|
||||||
|
.report-modal__comment .setting-text__wrapper,
|
||||||
|
.report-modal__comment .setting-text {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal__comment {
|
||||||
|
border-right-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal__container {
|
||||||
|
border-top-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header__collapsible-inner {
|
||||||
|
background: darken($ui-base-color, 4%);
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.focal-point__preview strong {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boost-modal__action-bar,
|
||||||
|
.confirmation-modal__action-bar,
|
||||||
|
.mute-modal__action-bar,
|
||||||
|
.block-modal__action-bar,
|
||||||
|
.onboarding-modal__paginator,
|
||||||
|
.error-modal__footer {
|
||||||
|
background: darken($ui-base-color, 6%);
|
||||||
|
|
||||||
|
.onboarding-modal__nav,
|
||||||
|
.error-modal__nav {
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background-color: darken($ui-base-color, 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-case__case {
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal .embed-modal__container .embed-modal__html {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: lighten($ui-base-color, 12%);
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle-track {
|
||||||
|
background: $ui-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||||
|
background: darken($ui-secondary-color, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||||
|
background: lighten($ui-highlight-color, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the default color used for the text in an empty column or on the error column
|
||||||
|
.empty-column-indicator,
|
||||||
|
.error-column {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-bar {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-bottom: 0;
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
padding-bottom: 14px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom-color: $ui-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the default colors used on some parts of the profile pages
|
||||||
|
.activity-stream-tabs {
|
||||||
|
background: $account-background-color;
|
||||||
|
border-bottom-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-widget,
|
||||||
|
.nothing-here,
|
||||||
|
.page-header,
|
||||||
|
.directory__tag > a,
|
||||||
|
.directory__tag > div,
|
||||||
|
.landing-page__call-to-action,
|
||||||
|
.contact-widget,
|
||||||
|
.landing .hero-widget__text,
|
||||||
|
.landing-page__information.contact-widget {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing .hero-widget__text {
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple_form {
|
||||||
|
input[type=text],
|
||||||
|
input[type=number],
|
||||||
|
input[type=email],
|
||||||
|
input[type=password],
|
||||||
|
textarea {
|
||||||
|
&:hover {
|
||||||
|
border-color: lighten($ui-base-color, 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing .hero-widget__footer {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand__tagline {
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory__tag > a {
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory__tag.active > a,
|
||||||
|
.directory__tag.active > div {
|
||||||
|
border-color: $ui-highlight-color;
|
||||||
|
|
||||||
|
&,
|
||||||
|
h4,
|
||||||
|
h4 small,
|
||||||
|
.fa,
|
||||||
|
.trends__item__current {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $ui-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.batch-table {
|
||||||
|
&__toolbar,
|
||||||
|
&__row,
|
||||||
|
.nothing-here {
|
||||||
|
border-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-stream {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
&--under-tabs {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry {
|
||||||
|
background: $account-background-color;
|
||||||
|
|
||||||
|
.detailed-status.light,
|
||||||
|
.more.light,
|
||||||
|
.status.light {
|
||||||
|
border-bottom-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.light {
|
||||||
|
.status__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-name {
|
||||||
|
strong {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accounts-grid {
|
||||||
|
.account-grid-card {
|
||||||
|
.controls {
|
||||||
|
.icon-button {
|
||||||
|
color: $darker-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
a {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
color: $darker-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account__header__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple_form,
|
||||||
|
.table-form {
|
||||||
|
.warning {
|
||||||
|
box-shadow: none;
|
||||||
|
background: rgba($error-red, 0.5);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommended {
|
||||||
|
border-color: $ui-highlight-color;
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
background-color: rgba($ui-highlight-color, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form .compose-form__warning {
|
||||||
|
border-color: $ui-highlight-color;
|
||||||
|
background-color: rgba($ui-highlight-color, 0.1);
|
||||||
|
|
||||||
|
&,
|
||||||
|
a {
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__content,
|
||||||
|
.reply-indicator__content {
|
||||||
|
a {
|
||||||
|
color: $highlight-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.logo-button {
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-layout {
|
||||||
|
.account__section-headline {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header,
|
||||||
|
.public-account-header,
|
||||||
|
.public-account-bio {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-account-bio,
|
||||||
|
.hero-widget__text {
|
||||||
|
background: $account-background-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: $ui-base-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-account-header {
|
||||||
|
&__image {
|
||||||
|
background: lighten($ui-base-color, 12%);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bar {
|
||||||
|
&::before {
|
||||||
|
background: $account-background-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar img {
|
||||||
|
border-color: $account-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-columns-breakpoint) {
|
||||||
|
background: $account-background-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
&__name {
|
||||||
|
h1,
|
||||||
|
h1 small {
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-columns-breakpoint) {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__extra {
|
||||||
|
.public-account-bio {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-account-bio .account__header__fields {
|
||||||
|
border-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification__filter-bar button.active::after,
|
||||||
|
.account__section-headline a.active::after {
|
||||||
|
border-color: transparent transparent $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-widget,
|
||||||
|
.box-widget,
|
||||||
|
.contact-widget,
|
||||||
|
.landing-page__information.contact-widget,
|
||||||
|
.moved-account-widget,
|
||||||
|
.memoriam-widget,
|
||||||
|
.activity-stream,
|
||||||
|
.nothing-here,
|
||||||
|
.directory__tag > a,
|
||||||
|
.directory__tag > div,
|
||||||
|
.card > a,
|
||||||
|
.page-header,
|
||||||
|
.compose-form .compose-form__warning {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-player .video-player__controls button,
|
||||||
|
.audio-player .video-player__time-sep,
|
||||||
|
.audio-player .video-player__time-current,
|
||||||
|
.audio-player .video-player__time-total {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
41
styles/coffee-light/variables.scss
Normal file
41
styles/coffee-light/variables.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
// Dependent colors
|
||||||
|
$black: #000000;
|
||||||
|
$white: #ffffff;
|
||||||
|
|
||||||
|
$classic-base-color: #282c37;
|
||||||
|
$classic-primary-color: #9baec8;
|
||||||
|
$classic-secondary-color: #d9e1e8;
|
||||||
|
$classic-highlight-color: #e7b01c;
|
||||||
|
|
||||||
|
// Differences
|
||||||
|
$success-green: lighten(#3c754d, 8%);
|
||||||
|
|
||||||
|
$base-overlay-background: $white !default;
|
||||||
|
$valid-value-color: $success-green !default;
|
||||||
|
|
||||||
|
$ui-base-color: $classic-secondary-color !default;
|
||||||
|
$ui-base-lighter-color: #b0c0cf;
|
||||||
|
$ui-primary-color: #9bcbed;
|
||||||
|
$ui-secondary-color: $classic-base-color !default;
|
||||||
|
$ui-highlight-color: #e7b01c;
|
||||||
|
|
||||||
|
$primary-text-color: $black !default;
|
||||||
|
$darker-text-color: $classic-base-color !default;
|
||||||
|
$dark-text-color: #444b5d;
|
||||||
|
$action-button-color: #606984;
|
||||||
|
|
||||||
|
$inverted-text-color: $black !default;
|
||||||
|
$lighter-text-color: $classic-base-color !default;
|
||||||
|
$light-text-color: #444b5d;
|
||||||
|
|
||||||
|
//Newly added colors
|
||||||
|
$account-background-color: $white !default;
|
||||||
|
|
||||||
|
//Invert darkened and lightened colors
|
||||||
|
@function darken($color, $amount) {
|
||||||
|
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function lighten($color, $amount) {
|
||||||
|
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||||
|
}
|
||||||
17
styles/cute.scss
Normal file
17
styles/cute.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
@import 'application';
|
||||||
|
|
||||||
|
@import 'mfc/mastodonFlat';
|
||||||
|
@import 'cute/palette';
|
||||||
|
@import 'cute/overrides';
|
||||||
|
|
||||||
|
@import 'mods/display_breakname';
|
||||||
|
@import 'mods/display_fullname';
|
||||||
|
//@import 'mods/display_browserfont';
|
||||||
|
@import 'mods/display_circleavatar';
|
||||||
|
//@import 'mods/display_collapsedinteractions';
|
||||||
|
//@import 'mods/display_fadedinteractions';
|
||||||
|
@import 'mods/display_transparentmedia';
|
||||||
|
@import 'mods/layout_1600px';
|
||||||
|
@import 'mods/layout_elefriend';
|
||||||
|
//@import 'mods/layout_widercolumns';
|
||||||
|
//@import 'mods/layout_mobile_bottombar';
|
||||||
0
styles/cute/overrides.scss
Normal file
0
styles/cute/overrides.scss
Normal file
57
styles/cute/palette.scss
Normal file
57
styles/cute/palette.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* DEFINE COLOR PALETTE
|
||||||
|
*
|
||||||
|
* Choose the CSS Variables that will be applied to recolor elements.
|
||||||
|
* The current format is to use hex codes, e.g. #00FF00.
|
||||||
|
*
|
||||||
|
* A future refactor to use rgb() instead may allow transparency mods
|
||||||
|
* via using these variables with rgba(). Hex codes currently do not
|
||||||
|
* work with rgba(), so no transparency mods are included except for
|
||||||
|
* those defined in absolute terms (i.e., non-variable colors).
|
||||||
|
*
|
||||||
|
* Foreground Colors:
|
||||||
|
* --bg: | Background for foreground elements.
|
||||||
|
* --text: | A color that stands out against bg.
|
||||||
|
* --textBold: | A color that stands out strongly against bg.
|
||||||
|
* --textMuted: | A color that stands out slightly against bg.
|
||||||
|
*
|
||||||
|
* Background Colors:
|
||||||
|
* --bgPage: | Background for non-foreground elements.
|
||||||
|
* --textPage: | A color that stands out against bgPage.
|
||||||
|
* --textPageBold: | A color that stands out strongly against bgPage.
|
||||||
|
* --textPageMuted: | A color that stands out slightly against bgPage.
|
||||||
|
*
|
||||||
|
* Highlights Colors:
|
||||||
|
* --bgHead: | Background for column headers.
|
||||||
|
* --textHead: | A color that stands out (strongly) against bgHead.
|
||||||
|
* --accent: | An accent color for links and buttons.
|
||||||
|
* --accentText: | A color that stands out (strongly) against accent.
|
||||||
|
*
|
||||||
|
* Palette advisories for choosing colors:
|
||||||
|
* - Consider using an off-white or off-black for text tones,
|
||||||
|
* but not necessary as long as there is sufficient contrast.
|
||||||
|
* - Bold colors are highly recommended to be strong colors,
|
||||||
|
* like pure white or pure black.
|
||||||
|
* - Muted colors can be off-grey or any mid-tone with slight contrast.
|
||||||
|
* - It might be best to base the background palette on a slightly
|
||||||
|
* darker or lighter version of the foreground palette, but
|
||||||
|
* this is no longer strictly necessary; you may use mixed palettes.
|
||||||
|
* It is now possible to use a dark bgPage and light bg, or vice-versa.
|
||||||
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #222;
|
||||||
|
--text: #ddd;
|
||||||
|
--textBold: #fff;
|
||||||
|
--textMuted: #777;
|
||||||
|
|
||||||
|
--bgPage: #111;
|
||||||
|
--textPage: var(--text);
|
||||||
|
--textPageBold: var(--textBold);
|
||||||
|
--textPageMuted: var(--textMuted);
|
||||||
|
|
||||||
|
--bgHead: #333;
|
||||||
|
--textHead: var(--textBold);
|
||||||
|
--accent: #f09; /* flamingo: #f09 */
|
||||||
|
--accentText: var(--textHead);
|
||||||
|
}
|
||||||
3
styles/dark-red.scss
Normal file
3
styles/dark-red.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@import 'dark-red/variables';
|
||||||
|
@import 'application';
|
||||||
|
@import 'dark-red/diff';
|
||||||
77
styles/dark-red/diff.scss
Normal file
77
styles/dark-red/diff.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
// components.scss
|
||||||
|
.compose-form {
|
||||||
|
.compose-form__modifiers {
|
||||||
|
.compose-form__upload {
|
||||||
|
&-description {
|
||||||
|
input {
|
||||||
|
&::placeholder {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-formatting a,
|
||||||
|
.rich-formatting p a,
|
||||||
|
.rich-formatting li a,
|
||||||
|
.landing-page__short-description p a,
|
||||||
|
.status__content a,
|
||||||
|
.reply-indicator__content a {
|
||||||
|
color: lighten($ui-highlight-color, 12%);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&.mention {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mention span {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status__content__spoiler-link {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__content__read-more-button {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started__footer a {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nothing-here {
|
||||||
|
color: $darker-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||||||
|
border-bottom: 4px solid $ui-highlight-color;
|
||||||
|
}
|
||||||
56
styles/dark-red/variables.scss
Normal file
56
styles/dark-red/variables.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
// Commonly used web colors
|
||||||
|
$black: #000000; // Black
|
||||||
|
$white: #ffffff; // White
|
||||||
|
$success-green: #79bd9a !default; // Padua
|
||||||
|
$error-red: #df405a !default; // Cerise
|
||||||
|
$warning-red: #ff5050 !default; // Sunset Orange
|
||||||
|
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||||
|
|
||||||
|
$red-bookmark: $warning-red;
|
||||||
|
|
||||||
|
// Values from the classic Mastodon UI
|
||||||
|
$classic-base-color: #282c37; // Midnight Express
|
||||||
|
$classic-primary-color: #9baec8; // Echo Blue
|
||||||
|
$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||||||
|
$classic-highlight-color: #d92b2b; // Summer Sky
|
||||||
|
|
||||||
|
// Variables for defaults in UI
|
||||||
|
$base-shadow-color: $black !default;
|
||||||
|
$base-overlay-background: $black !default;
|
||||||
|
$base-border-color: $white !default;
|
||||||
|
$simple-background-color: $white !default;
|
||||||
|
$valid-value-color: $success-green !default;
|
||||||
|
$error-value-color: $error-red !default;
|
||||||
|
|
||||||
|
// Tell UI to use selected colors
|
||||||
|
$ui-base-color: $classic-base-color !default; // Darkest
|
||||||
|
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
||||||
|
$ui-primary-color: $classic-primary-color !default; // Lighter
|
||||||
|
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||||
|
$ui-highlight-color: $classic-highlight-color !default;
|
||||||
|
|
||||||
|
// Variables for texts
|
||||||
|
$primary-text-color: $white !default;
|
||||||
|
$darker-text-color: $ui-primary-color !default;
|
||||||
|
$dark-text-color: $ui-base-lighter-color !default;
|
||||||
|
$secondary-text-color: $ui-secondary-color !default;
|
||||||
|
$highlight-text-color: $ui-highlight-color !default;
|
||||||
|
$action-button-color: $ui-base-lighter-color !default;
|
||||||
|
// For texts on inverted backgrounds
|
||||||
|
$inverted-text-color: $ui-base-color !default;
|
||||||
|
$lighter-text-color: $ui-base-lighter-color !default;
|
||||||
|
$light-text-color: $ui-primary-color !default;
|
||||||
|
|
||||||
|
// Language codes that uses CJK fonts
|
||||||
|
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||||
|
|
||||||
|
// Variables for components
|
||||||
|
$media-modal-media-max-width: 100%;
|
||||||
|
// put margins on top and bottom of image to avoid the screen covered by image.
|
||||||
|
$media-modal-media-max-height: 80%;
|
||||||
|
|
||||||
|
$no-gap-breakpoint: 415px;
|
||||||
|
|
||||||
|
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||||
|
$font-display: 'mastodon-font-display' !default;
|
||||||
|
$font-monospace: 'mastodon-font-monospace' !default;
|
||||||
17
styles/droid.scss
Normal file
17
styles/droid.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
@import 'application';
|
||||||
|
|
||||||
|
@import 'mfc/mastodonFlat';
|
||||||
|
@import 'droid/palette';
|
||||||
|
@import 'droid/overrides';
|
||||||
|
|
||||||
|
@import 'mods/display_breakname';
|
||||||
|
@import 'mods/display_fullname';
|
||||||
|
//@import 'mods/display_browserfont';
|
||||||
|
@import 'mods/display_circleavatar';
|
||||||
|
//@import 'mods/display_collapsedinteractions';
|
||||||
|
//@import 'mods/display_fadedinteractions';
|
||||||
|
@import 'mods/display_transparentmedia';
|
||||||
|
@import 'mods/layout_1600px';
|
||||||
|
@import 'mods/layout_elefriend';
|
||||||
|
//@import 'mods/layout_widercolumns';
|
||||||
|
//@import 'mods/layout_mobile_bottombar';
|
||||||
0
styles/droid/overrides.scss
Normal file
0
styles/droid/overrides.scss
Normal file
59
styles/droid/palette.scss
Normal file
59
styles/droid/palette.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* DEFINE COLOR PALETTE
|
||||||
|
*
|
||||||
|
* Choose the CSS Variables that will be applied to recolor elements.
|
||||||
|
* The current format is to use hex codes, e.g. #00FF00.
|
||||||
|
*
|
||||||
|
* A future refactor to use rgb() instead may allow transparency mods
|
||||||
|
* via using these variables with rgba(). Hex codes currently do not
|
||||||
|
* work with rgba(), so no transparency mods are included except for
|
||||||
|
* those defined in absolute terms (i.e., non-variable colors).
|
||||||
|
*
|
||||||
|
* Foreground Colors:
|
||||||
|
* --bg: | Background for foreground elements.
|
||||||
|
* --text: | A color that stands out against bg.
|
||||||
|
* --textBold: | A color that stands out strongly against bg.
|
||||||
|
* --textMuted: | A color that stands out slightly against bg.
|
||||||
|
*
|
||||||
|
* Background Colors:
|
||||||
|
* --bgPage: | Background for non-foreground elements.
|
||||||
|
* --textPage: | A color that stands out against bgPage.
|
||||||
|
* --textPageBold: | A color that stands out strongly against bgPage.
|
||||||
|
* --textPageMuted: | A color that stands out slightly against bgPage.
|
||||||
|
*
|
||||||
|
* Highlights Colors:
|
||||||
|
* --bgHead: | Background for column headers.
|
||||||
|
* --textHead: | A color that stands out (strongly) against bgHead.
|
||||||
|
* --accent: | An accent color for links and buttons.
|
||||||
|
* --accentText: | A color that stands out (strongly) against accent.
|
||||||
|
*
|
||||||
|
* Palette advisories for choosing colors:
|
||||||
|
* - Consider using an off-white or off-black for text tones,
|
||||||
|
* but not necessary as long as there is sufficient contrast.
|
||||||
|
* - Bold colors are highly recommended to be strong colors,
|
||||||
|
* like pure white or pure black.
|
||||||
|
* - Muted colors can be off-grey or any mid-tone with slight contrast.
|
||||||
|
* - It might be best to base the background palette on a slightly
|
||||||
|
* darker or lighter version of the foreground palette, but
|
||||||
|
* this is no longer strictly necessary; you may use mixed palettes.
|
||||||
|
* It is now possible to use a dark bgPage and light bg, or vice-versa.
|
||||||
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
/* linernotes dark */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #222;
|
||||||
|
--text: #ddd;
|
||||||
|
--textBold: #fff;
|
||||||
|
--textMuted: #777;
|
||||||
|
|
||||||
|
--bgPage: #111;
|
||||||
|
--textPage: var(--text);
|
||||||
|
--textPageBold: var(--textBold);
|
||||||
|
--textPageMuted: var(--textMuted);
|
||||||
|
|
||||||
|
--bgHead: #333;
|
||||||
|
--textHead: var(--textBold);
|
||||||
|
--accent: #a4c639; /* flamingo: #f09 */
|
||||||
|
--accentText: var(--textHead);
|
||||||
|
}
|
||||||
19
styles/fonts/montserrat.scss
Normal file
19
styles/fonts/montserrat.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mastodon-font-display';
|
||||||
|
src: local('Montserrat'),
|
||||||
|
url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
|
||||||
|
url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
|
||||||
|
url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mastodon-font-display';
|
||||||
|
src: local('Montserrat Medium'),
|
||||||
|
url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
|
||||||
|
font-weight: 500;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
11
styles/fonts/roboto-mono.scss
Normal file
11
styles/fonts/roboto-mono.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mastodon-font-monospace';
|
||||||
|
src: local('Roboto Mono'),
|
||||||
|
url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
|
||||||
|
url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
|
||||||
|
url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
|
||||||
|
url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
47
styles/fonts/roboto.scss
Normal file
47
styles/fonts/roboto.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mastodon-font-sans-serif';
|
||||||
|
src: local('Roboto Italic'),
|
||||||
|
url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
|
||||||
|
url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
|
||||||
|
url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
|
||||||
|
url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mastodon-font-sans-serif';
|
||||||
|
src: local('Roboto Bold'),
|
||||||
|
url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
|
||||||
|
url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
|
||||||
|
url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
|
||||||
|
url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
|
||||||
|
font-weight: bold;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mastodon-font-sans-serif';
|
||||||
|
src: local('Roboto Medium'),
|
||||||
|
url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
|
||||||
|
url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
|
||||||
|
url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
|
||||||
|
url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
|
||||||
|
font-weight: 500;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'mastodon-font-sans-serif';
|
||||||
|
src: local('Roboto'),
|
||||||
|
url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
|
||||||
|
url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'),
|
||||||
|
url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
|
||||||
|
url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
48
styles/fullwidth-media.scss
Normal file
48
styles/fullwidth-media.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
|
||||||
|
.detailed-status > .media-spoiler,
|
||||||
|
.status > .media-spoiler,
|
||||||
|
.status .video-player,
|
||||||
|
.media-gallery,
|
||||||
|
.status .status-card.interactive {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-left: -68px;
|
||||||
|
width: calc(100% + 80px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status > .media-spoiler,
|
||||||
|
.status > .media-spoiler,
|
||||||
|
.video-player {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* If there's no status text, add an extra margin on top */
|
||||||
|
.status .status__info + .media-gallery,
|
||||||
|
.status .status__info + .media-spoiler,
|
||||||
|
.status .status__info + .video-player,
|
||||||
|
.status .status__info + .status-card {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__video-player-video {
|
||||||
|
transform: unset;
|
||||||
|
top: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status .media-gallery {
|
||||||
|
margin-left: -10px;
|
||||||
|
width: calc(100% + 22px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-layout .status {
|
||||||
|
.status__content {
|
||||||
|
min-height: 15px;
|
||||||
|
}
|
||||||
|
& > .media-spoiler,
|
||||||
|
.video-player,
|
||||||
|
.media-gallery,
|
||||||
|
.status-card {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: calc(100% + 94px);
|
||||||
|
margin-left: -78px;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
styles/light-red.scss
Normal file
3
styles/light-red.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@import 'light-red/variables';
|
||||||
|
@import 'application';
|
||||||
|
@import 'light-red/diff';
|
||||||
776
styles/light-red/diff.scss
Normal file
776
styles/light-red/diff.scss
Normal file
|
|
@ -0,0 +1,776 @@
|
||||||
|
// Notes!
|
||||||
|
// Sass color functions, "darken" and "lighten" are automatically replaced.
|
||||||
|
|
||||||
|
html {
|
||||||
|
scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the colors of button texts
|
||||||
|
.button {
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
&.button-alternative-2 {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card__actions button,
|
||||||
|
.status-card__actions a {
|
||||||
|
color: rgba($white, 0.8);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change default background colors of columns
|
||||||
|
.column > .scrollable,
|
||||||
|
.getting-started,
|
||||||
|
.column-inline-form,
|
||||||
|
.error-column,
|
||||||
|
.regeneration-indicator {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory__card__img {
|
||||||
|
background: lighten($ui-base-color, 12%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-form,
|
||||||
|
.directory__card__bar {
|
||||||
|
background: $white;
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollable .directory__list {
|
||||||
|
width: calc(100% + 2px);
|
||||||
|
margin-left: -1px;
|
||||||
|
margin-right: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory__card,
|
||||||
|
.table-of-contents {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-back-button,
|
||||||
|
.column-header {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--slim-button {
|
||||||
|
top: -50px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header__back-button,
|
||||||
|
.column-header__button,
|
||||||
|
.column-header__button.active,
|
||||||
|
.account__header__bar,
|
||||||
|
.directory__card__extra {
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header__button.active {
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account__header__bar .avatar .account__avatar {
|
||||||
|
border-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started__footer a {
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirmation-modal__secondary-button,
|
||||||
|
.confirmation-modal__cancel-button,
|
||||||
|
.mute-modal__cancel-button,
|
||||||
|
.block-modal__cancel-button {
|
||||||
|
color: lighten($ui-base-color, 26%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading {
|
||||||
|
background: darken($ui-base-color, 4%);
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started,
|
||||||
|
.scrollable {
|
||||||
|
.column-link {
|
||||||
|
background: $white;
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started .navigation-bar {
|
||||||
|
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__autosuggest-wrapper,
|
||||||
|
.poll__option input[type="text"],
|
||||||
|
.compose-form .spoiler-input__input,
|
||||||
|
.compose-form__poll-wrapper select,
|
||||||
|
.search__input,
|
||||||
|
.setting-text,
|
||||||
|
.box-widget input[type="text"],
|
||||||
|
.box-widget input[type="email"],
|
||||||
|
.box-widget input[type="password"],
|
||||||
|
.box-widget textarea,
|
||||||
|
.statuses-grid .detailed-status,
|
||||||
|
.audio-player {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__input {
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-editor .search .search__input {
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__poll-wrapper select {
|
||||||
|
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__poll-wrapper,
|
||||||
|
.compose-form__poll-wrapper .poll__footer {
|
||||||
|
border-top-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification__filter-bar {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form .compose-form__buttons-wrapper {
|
||||||
|
background: $ui-base-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer__header,
|
||||||
|
.drawer__inner {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer__inner__mastodon {
|
||||||
|
background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the colors used in compose-form
|
||||||
|
.compose-form {
|
||||||
|
.compose-form__modifiers {
|
||||||
|
.compose-form__upload__actions .icon-button {
|
||||||
|
color: lighten($white, 7%);
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__upload-description input {
|
||||||
|
color: lighten($white, 7%);
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: lighten($white, 7%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__buttons-wrapper {
|
||||||
|
background: darken($ui-base-color, 6%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.autosuggest-textarea__suggestions {
|
||||||
|
background: darken($ui-base-color, 6%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.autosuggest-textarea__suggestions__item {
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active,
|
||||||
|
&.selected {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-bar {
|
||||||
|
border-color: lighten($ui-base-color, 4%);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
background: darken($ui-base-color, 6%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-search input {
|
||||||
|
background: rgba($ui-base-color, 0.3);
|
||||||
|
border-color: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the background colors of statuses
|
||||||
|
.focusable:focus {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.status-direct {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.focusable:focus .status.status-direct {
|
||||||
|
background: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status,
|
||||||
|
.detailed-status__action-bar {
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the background colors of status__content__spoiler-link
|
||||||
|
.reply-indicator__content .status__content__spoiler-link,
|
||||||
|
.status__content .status__content__spoiler-link {
|
||||||
|
background: $ui-base-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the background colors of media and video spoilers
|
||||||
|
.media-spoiler,
|
||||||
|
.video-player__spoiler {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-gallery__item a {
|
||||||
|
background-color: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the colors used in the dropdown menu
|
||||||
|
.dropdown-menu {
|
||||||
|
background: $white;
|
||||||
|
|
||||||
|
&__arrow {
|
||||||
|
&.left {
|
||||||
|
border-left-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.top {
|
||||||
|
border-top-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bottom {
|
||||||
|
border-bottom-color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
border-right-color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
a {
|
||||||
|
background: $white;
|
||||||
|
color: $darker-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the text colors on inverted background
|
||||||
|
.privacy-dropdown__option.active,
|
||||||
|
.privacy-dropdown__option:hover,
|
||||||
|
.privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||||||
|
.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||||||
|
.privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||||
|
.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
||||||
|
.dropdown-menu__item a:active,
|
||||||
|
.dropdown-menu__item a:focus,
|
||||||
|
.dropdown-menu__item a:hover,
|
||||||
|
.actions-modal ul li:not(:empty) a.active,
|
||||||
|
.actions-modal ul li:not(:empty) a.active button,
|
||||||
|
.actions-modal ul li:not(:empty) a:active,
|
||||||
|
.actions-modal ul li:not(:empty) a:active button,
|
||||||
|
.actions-modal ul li:not(:empty) a:focus,
|
||||||
|
.actions-modal ul li:not(:empty) a:focus button,
|
||||||
|
.actions-modal ul li:not(:empty) a:hover,
|
||||||
|
.actions-modal ul li:not(:empty) a:hover button,
|
||||||
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
|
||||||
|
.simple_form .block-button,
|
||||||
|
.simple_form .button,
|
||||||
|
.simple_form button {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__separator {
|
||||||
|
border-bottom-color: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the background colors of modals
|
||||||
|
.actions-modal,
|
||||||
|
.boost-modal,
|
||||||
|
.confirmation-modal,
|
||||||
|
.mute-modal,
|
||||||
|
.block-modal,
|
||||||
|
.report-modal,
|
||||||
|
.embed-modal,
|
||||||
|
.error-modal,
|
||||||
|
.onboarding-modal,
|
||||||
|
.report-modal__comment .setting-text__wrapper,
|
||||||
|
.report-modal__comment .setting-text {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal__comment {
|
||||||
|
border-right-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal__container {
|
||||||
|
border-top-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header__collapsible-inner {
|
||||||
|
background: darken($ui-base-color, 4%);
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.focal-point__preview strong {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boost-modal__action-bar,
|
||||||
|
.confirmation-modal__action-bar,
|
||||||
|
.mute-modal__action-bar,
|
||||||
|
.block-modal__action-bar,
|
||||||
|
.onboarding-modal__paginator,
|
||||||
|
.error-modal__footer {
|
||||||
|
background: darken($ui-base-color, 6%);
|
||||||
|
|
||||||
|
.onboarding-modal__nav,
|
||||||
|
.error-modal__nav {
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background-color: darken($ui-base-color, 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-case__case {
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal .embed-modal__container .embed-modal__html {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: lighten($ui-base-color, 12%);
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle-track {
|
||||||
|
background: $ui-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||||
|
background: darken($ui-secondary-color, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||||
|
background: lighten($ui-highlight-color, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the default color used for the text in an empty column or on the error column
|
||||||
|
.empty-column-indicator,
|
||||||
|
.error-column {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-bar {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-bottom: 0;
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
padding-bottom: 14px;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom-color: $ui-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Change the default colors used on some parts of the profile pages
|
||||||
|
.activity-stream-tabs {
|
||||||
|
background: $account-background-color;
|
||||||
|
border-bottom-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-widget,
|
||||||
|
.nothing-here,
|
||||||
|
.page-header,
|
||||||
|
.directory__tag > a,
|
||||||
|
.directory__tag > div,
|
||||||
|
.landing-page__call-to-action,
|
||||||
|
.contact-widget,
|
||||||
|
.landing .hero-widget__text,
|
||||||
|
.landing-page__information.contact-widget {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing .hero-widget__text {
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple_form {
|
||||||
|
input[type=text],
|
||||||
|
input[type=number],
|
||||||
|
input[type=email],
|
||||||
|
input[type=password],
|
||||||
|
textarea {
|
||||||
|
&:hover {
|
||||||
|
border-color: lighten($ui-base-color, 12%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing .hero-widget__footer {
|
||||||
|
background: $white;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand__tagline {
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory__tag > a {
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $ui-base-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.directory__tag.active > a,
|
||||||
|
.directory__tag.active > div {
|
||||||
|
border-color: $ui-highlight-color;
|
||||||
|
|
||||||
|
&,
|
||||||
|
h4,
|
||||||
|
h4 small,
|
||||||
|
.fa,
|
||||||
|
.trends__item__current {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
background: $ui-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.batch-table {
|
||||||
|
&__toolbar,
|
||||||
|
&__row,
|
||||||
|
.nothing-here {
|
||||||
|
border-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-stream {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
&--under-tabs {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry {
|
||||||
|
background: $account-background-color;
|
||||||
|
|
||||||
|
.detailed-status.light,
|
||||||
|
.more.light,
|
||||||
|
.status.light {
|
||||||
|
border-bottom-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status.light {
|
||||||
|
.status__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-name {
|
||||||
|
strong {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accounts-grid {
|
||||||
|
.account-grid-card {
|
||||||
|
.controls {
|
||||||
|
.icon-button {
|
||||||
|
color: $darker-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
a {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
color: $darker-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account__header__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple_form,
|
||||||
|
.table-form {
|
||||||
|
.warning {
|
||||||
|
box-shadow: none;
|
||||||
|
background: rgba($error-red, 0.5);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommended {
|
||||||
|
border-color: $ui-highlight-color;
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
background-color: rgba($ui-highlight-color, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form .compose-form__warning {
|
||||||
|
border-color: $ui-highlight-color;
|
||||||
|
background-color: rgba($ui-highlight-color, 0.1);
|
||||||
|
|
||||||
|
&,
|
||||||
|
a {
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__content,
|
||||||
|
.reply-indicator__content {
|
||||||
|
a {
|
||||||
|
color: $highlight-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.logo-button {
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-layout {
|
||||||
|
.account__section-headline {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header,
|
||||||
|
.public-account-header,
|
||||||
|
.public-account-bio {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-account-bio,
|
||||||
|
.hero-widget__text {
|
||||||
|
background: $account-background-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: $ui-base-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-account-header {
|
||||||
|
&__image {
|
||||||
|
background: lighten($ui-base-color, 12%);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bar {
|
||||||
|
&::before {
|
||||||
|
background: $account-background-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar img {
|
||||||
|
border-color: $account-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-columns-breakpoint) {
|
||||||
|
background: $account-background-color;
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
&__name {
|
||||||
|
h1,
|
||||||
|
h1 small {
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
@media screen and (max-width: $no-columns-breakpoint) {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__extra {
|
||||||
|
.public-account-bio {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-account-bio .account__header__fields {
|
||||||
|
border-color: lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification__filter-bar button.active::after,
|
||||||
|
.account__section-headline a.active::after {
|
||||||
|
border-color: transparent transparent $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-widget,
|
||||||
|
.box-widget,
|
||||||
|
.contact-widget,
|
||||||
|
.landing-page__information.contact-widget,
|
||||||
|
.moved-account-widget,
|
||||||
|
.memoriam-widget,
|
||||||
|
.activity-stream,
|
||||||
|
.nothing-here,
|
||||||
|
.directory__tag > a,
|
||||||
|
.directory__tag > div,
|
||||||
|
.card > a,
|
||||||
|
.page-header,
|
||||||
|
.compose-form .compose-form__warning {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audio-player .video-player__controls button,
|
||||||
|
.audio-player .video-player__time-sep,
|
||||||
|
.audio-player .video-player__time-current,
|
||||||
|
.audio-player .video-player__time-total {
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
41
styles/light-red/variables.scss
Normal file
41
styles/light-red/variables.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
// Dependent colors
|
||||||
|
$black: #000000;
|
||||||
|
$white: #ffffff;
|
||||||
|
|
||||||
|
$classic-base-color: #282c37;
|
||||||
|
$classic-primary-color: #9baec8;
|
||||||
|
$classic-secondary-color: #d9e1e8;
|
||||||
|
$classic-highlight-color: #d92b2b;
|
||||||
|
|
||||||
|
// Differences
|
||||||
|
$success-green: lighten(#3c754d, 8%);
|
||||||
|
|
||||||
|
$base-overlay-background: $white !default;
|
||||||
|
$valid-value-color: $success-green !default;
|
||||||
|
|
||||||
|
$ui-base-color: $classic-secondary-color !default;
|
||||||
|
$ui-base-lighter-color: #b0c0cf;
|
||||||
|
$ui-primary-color: #9bcbed;
|
||||||
|
$ui-secondary-color: $classic-base-color !default;
|
||||||
|
$ui-highlight-color: #d92b2b;
|
||||||
|
|
||||||
|
$primary-text-color: $black !default;
|
||||||
|
$darker-text-color: $classic-base-color !default;
|
||||||
|
$dark-text-color: #444b5d;
|
||||||
|
$action-button-color: #606984;
|
||||||
|
|
||||||
|
$inverted-text-color: $black !default;
|
||||||
|
$lighter-text-color: $classic-base-color !default;
|
||||||
|
$light-text-color: #444b5d;
|
||||||
|
|
||||||
|
//Newly added colors
|
||||||
|
$account-background-color: $white !default;
|
||||||
|
|
||||||
|
//Invert darkened and lightened colors
|
||||||
|
@function darken($color, $amount) {
|
||||||
|
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function lighten($color, $amount) {
|
||||||
|
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||||
|
}
|
||||||
574
styles/mailer.scss
Normal file
574
styles/mailer.scss
Normal file
|
|
@ -0,0 +1,574 @@
|
||||||
|
@import 'mastodon/variables';
|
||||||
|
@import 'fonts/roboto';
|
||||||
|
|
||||||
|
table,
|
||||||
|
td,
|
||||||
|
div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100% !important;
|
||||||
|
min-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-body {
|
||||||
|
td,
|
||||||
|
div,
|
||||||
|
a,
|
||||||
|
span {
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
&,
|
||||||
|
&:visited,
|
||||||
|
span {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $ui-highlight-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
#outlook & {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
outline: none;
|
||||||
|
border: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
-ms-interpolation-mode: bicubic;
|
||||||
|
clear: both;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
mso-table-lspace: 0;
|
||||||
|
mso-table-rspace: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auto-dir {
|
||||||
|
p {
|
||||||
|
unicode-bidi: plaintext;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-table,
|
||||||
|
.content-section,
|
||||||
|
.column,
|
||||||
|
.column-cell {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-body {
|
||||||
|
font-size: 0 !important;
|
||||||
|
line-height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-start {
|
||||||
|
padding-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-end {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-body,
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background-color: lighten($ui-base-color, 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-container,
|
||||||
|
.email-row,
|
||||||
|
.col-0,
|
||||||
|
.col-1,
|
||||||
|
.col-2,
|
||||||
|
.col-3,
|
||||||
|
.col-4,
|
||||||
|
.col-5,
|
||||||
|
.col-6 {
|
||||||
|
font-size: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
min-width: 0 !important;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-cell {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-cell {
|
||||||
|
padding-top: 16px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
&.button-cell {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-container {
|
||||||
|
max-width: 632px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-row {
|
||||||
|
display: block;
|
||||||
|
max-width: 600px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-0 {
|
||||||
|
max-width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1 {
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-2 {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-3 {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-4 {
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-5 {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-6 {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-cell,
|
||||||
|
.column-cell td,
|
||||||
|
p {
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
|
||||||
|
@media only screen {
|
||||||
|
font-family: $font-sans-serif, sans-serif !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-body .column-cell,
|
||||||
|
.column-cell,
|
||||||
|
p {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 23px;
|
||||||
|
color: $ui-primary-color;
|
||||||
|
mso-line-height-rule: exactly;
|
||||||
|
text-rendering: optimizelegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.lead {
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 27px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: $ui-secondary-color;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 0;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 23px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 21px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: lighten($ui-base-color, 34%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-cell {
|
||||||
|
h5 {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
td {
|
||||||
|
background: darken($ui-base-color, 8%);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
mso-line-height-rule: exactly;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-cell,
|
||||||
|
.blank-cell {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-cell {
|
||||||
|
background-color: darken($ui-base-color, 4%);
|
||||||
|
|
||||||
|
&.darker {
|
||||||
|
background-color: darken($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
background-color: $ui-base-color;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-with-button {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.lead {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
background-color: darken($ui-base-color, 8%);
|
||||||
|
|
||||||
|
.column-cell {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-start {
|
||||||
|
padding-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-end {
|
||||||
|
border-radius: 0 0 5px 5px;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
.column-cell,
|
||||||
|
p {
|
||||||
|
color: lighten($ui-base-color, 34%);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: lighten($ui-base-color, 34%);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
position: relative;
|
||||||
|
left: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: table;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
td {
|
||||||
|
line-height: 20px;
|
||||||
|
mso-line-height-rule: exactly;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
padding: 0 !important;
|
||||||
|
|
||||||
|
a,
|
||||||
|
a span {
|
||||||
|
color: $primary-text-color;
|
||||||
|
display: block !important;
|
||||||
|
text-align: center !important;
|
||||||
|
vertical-align: top !important;
|
||||||
|
line-height: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 10px 22px !important;
|
||||||
|
line-height: 26px !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.button-small {
|
||||||
|
td {
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 5px 16px !important;
|
||||||
|
line-height: 26px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-default {
|
||||||
|
background-color: darken($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-primary {
|
||||||
|
background-color: darken($ui-highlight-color, 3%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padded {
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padded-bottom {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.margin-bottom {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-icon {
|
||||||
|
width: 64px;
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 100%;
|
||||||
|
mso-line-height-rule: exactly;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 80px;
|
||||||
|
background: $success-green;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning-icon td {
|
||||||
|
background: $gold-star;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.alert-icon td {
|
||||||
|
background: $error-red;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 32px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: block;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 1px;
|
||||||
|
mso-line-height-rule: exactly;
|
||||||
|
min-height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 2px;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding-bottom: 32px;
|
||||||
|
|
||||||
|
&--highlighted {
|
||||||
|
border: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-header {
|
||||||
|
td {
|
||||||
|
font-size: 14px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
bdi {
|
||||||
|
color: $white;
|
||||||
|
font-size: 16px;
|
||||||
|
display: block;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:first-child {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 19px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
&.status-footer {
|
||||||
|
color: lighten($ui-base-color, 26%);
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: lighten($ui-base-color, 26%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-top {
|
||||||
|
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-top: 16px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: lighten($ui-base-color, 26%);
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: $ui-primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.rules-list {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
|
||||||
|
body {
|
||||||
|
min-height: 1024px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 697px) {
|
||||||
|
.email-container,
|
||||||
|
.col-1,
|
||||||
|
.col-2,
|
||||||
|
.col-3,
|
||||||
|
.col-4,
|
||||||
|
.col-5,
|
||||||
|
.col-6 {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-start {
|
||||||
|
padding-top: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-end {
|
||||||
|
padding-bottom: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padded {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
2
styles/material-dark.scss
Normal file
2
styles/material-dark.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import 'application';
|
||||||
|
@import 'material-dark/loader';
|
||||||
135
styles/material-dark/color/black.scss
Normal file
135
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);
|
||||||
135
styles/material-dark/color/mastodon-dark.scss
Normal file
135
styles/material-dark/color/mastodon-dark.scss
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Base color
|
||||||
|
$primary-color: #2b90d9;
|
||||||
|
$secondary-color: #2b90d9;
|
||||||
|
$error-color: #B00020;
|
||||||
|
$verified-color: #4caf50;
|
||||||
|
|
||||||
|
// Text color
|
||||||
|
$primary-text-color: #ffffff;
|
||||||
|
$secondary-text-color: #9baec8;
|
||||||
|
$ui-text-color: #fff;
|
||||||
|
$inverted-text-color: #000000;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #606984;
|
||||||
|
$tips-text-color: #6d7889;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #4ea2df;
|
||||||
|
$menu-text-color: #282c37;
|
||||||
|
$top-bar-text-color: $ui-text-color;
|
||||||
|
$search-bar-text-color: $inverted-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #191b22;
|
||||||
|
$menu-background-color: #d9e1e8;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #313543;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #282c37;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #42485a;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #393f4f;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#42485a, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #9baec8;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: lighten($background-color, 14%);
|
||||||
|
$icon-background-active-color: lighten($background-color, 18%);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #fff;
|
||||||
|
$top-bar-icon-hover-color: $icon-hover-color;
|
||||||
|
$top-bar-icon-active-color: $icon-hover-color;
|
||||||
|
$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.7);
|
||||||
|
$text-button-focus-color: transparentize($text-button-color, 0.6);
|
||||||
|
$floating-action-button-color: $primary-color;
|
||||||
|
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||||
|
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||||
|
$floating-action-button-icon-color: #ffffff;
|
||||||
|
|
||||||
|
// Toggle color
|
||||||
|
$toggle-thumb-color: #ffffff;
|
||||||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||||
|
$toggle-thumb-active-color: #1a73e8;
|
||||||
|
$toggle-track-active-color: lighten($primary-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #393f4f;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 16%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #313543;
|
||||||
|
$search-bar-color: lighten($top-bar-color, 6%);
|
||||||
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: #d9e1e8;
|
||||||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||||||
|
$tab-background-color: #1f232b;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||||
|
$text-tab-indicator-color: $tab-indicator-color;
|
||||||
|
$text-tab-indicator-active-color: $tab-indicator-active-color;
|
||||||
|
$text-tab-background-color: $tab-background-color;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
134
styles/material-dark/color/mastodon-light.scss
Normal file
134
styles/material-dark/color/mastodon-light.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Base color
|
||||||
|
$primary-color: #2b90d9;
|
||||||
|
$secondary-color: #2b90d9;
|
||||||
|
$error-color: #B00020;
|
||||||
|
$verified-color: #4caf50;
|
||||||
|
|
||||||
|
// Text color
|
||||||
|
$primary-text-color: #000000;
|
||||||
|
$secondary-text-color: #5f6368;
|
||||||
|
$ui-text-color: #202124;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #5e5e5e;
|
||||||
|
$tips-text-color: #c0c0c0;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #217aba;
|
||||||
|
$menu-text-color: $ui-text-color;
|
||||||
|
$top-bar-text-color: $ui-text-color;
|
||||||
|
$search-bar-text-color: $primary-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #eff3f5;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #282c37;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: darken($background-color, 4%);
|
||||||
|
$icon-background-active-color: darken($background-color, 8%);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: $icon-color;
|
||||||
|
$top-bar-icon-hover-color: $icon-hover-color;
|
||||||
|
$top-bar-icon-active-color: $icon-hover-color;
|
||||||
|
$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: lighten($text-button-color, 36%);
|
||||||
|
$text-button-focus-color: lighten($text-button-color, 30%);
|
||||||
|
$floating-action-button-color: $primary-color;
|
||||||
|
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||||
|
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||||
|
$floating-action-button-icon-color: #ffffff;
|
||||||
|
|
||||||
|
// Toggle color
|
||||||
|
$toggle-thumb-color: #ffffff;
|
||||||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||||
|
$toggle-thumb-active-color: $primary-color;
|
||||||
|
$toggle-track-active-color: lighten($primary-color, 26%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: #ccd7e0;
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #ffffff;
|
||||||
|
$search-bar-color: #d9e1e8;
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: #282c37;
|
||||||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||||||
|
$tab-background-color: #e6ebf0;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||||
|
$text-tab-indicator-color: $tab-indicator-color;
|
||||||
|
$text-tab-indicator-active-color: $tab-indicator-active-color;
|
||||||
|
$text-tab-background-color: $tab-background-color;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
134
styles/material-dark/color/plus-classic.scss
Normal file
134
styles/material-dark/color/plus-classic.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Base color
|
||||||
|
$primary-color: #4285f4;
|
||||||
|
$secondary-color: #db4437;
|
||||||
|
$error-color: #B00020;
|
||||||
|
$verified-color: #4caf50;
|
||||||
|
|
||||||
|
// Text color
|
||||||
|
$primary-text-color: #000000;
|
||||||
|
$secondary-text-color: #5f6368;
|
||||||
|
$ui-text-color: #202124;
|
||||||
|
$inverted-text-color: #ffffff;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #5e5e5e;
|
||||||
|
$tips-text-color: #c0c0c0;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #4285f4;
|
||||||
|
$menu-text-color: $ui-text-color;
|
||||||
|
$top-bar-text-color: $inverted-text-color;
|
||||||
|
$search-bar-text-color: $primary-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #fafafa;
|
||||||
|
$menu-background-color: #ffffff;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#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: $secondary-color;
|
||||||
|
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||||
|
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||||
|
$floating-action-button-icon-color: #ffffff;
|
||||||
|
|
||||||
|
// Toggle color
|
||||||
|
$toggle-thumb-color: #ffffff;
|
||||||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||||
|
$toggle-thumb-active-color: #1a73e8;
|
||||||
|
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #db4437;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||||||
|
$tab-background-color: $top-bar-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||||
|
$text-tab-indicator-color: $secondary-text-color;
|
||||||
|
$text-tab-indicator-active-color: $top-bar-color;
|
||||||
|
$text-tab-background-color: #ffffff;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
134
styles/material-dark/color/v1-dark.scss
Normal file
134
styles/material-dark/color/v1-dark.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
@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: #303030;
|
||||||
|
$menu-background-color: #424242;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #424242;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #424242;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$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;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#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: #2e2e2e;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #1565C0;
|
||||||
|
$search-bar-color: lighten($background-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: $top-bar-color;
|
||||||
|
$text-tab-background-color: #424242;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
135
styles/material-dark/color/v1-light.scss
Normal file
135
styles/material-dark/color/v1-light.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: #000000;
|
||||||
|
$secondary-text-color: #5f6368;
|
||||||
|
$ui-text-color: #202124;
|
||||||
|
$inverted-text-color: #ffffff;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #5e5e5e;
|
||||||
|
$tips-text-color: #c0c0c0;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #4285f4;
|
||||||
|
$menu-text-color: $ui-text-color;
|
||||||
|
$top-bar-text-color: $inverted-text-color;
|
||||||
|
$search-bar-text-color: $primary-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #fafafa;
|
||||||
|
$menu-background-color: #ffffff;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||||
|
$top-bar-unread-icon-color: darken($primary-color, 30%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#000000, 0.8);
|
||||||
|
$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: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-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: $top-bar-color;
|
||||||
|
$text-tab-background-color: #ffffff;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
135
styles/material-dark/color/v2-dark.scss
Normal file
135
styles/material-dark/color/v2-dark.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: #121212;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// 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: #2e2e2e;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #272727;
|
||||||
|
$search-bar-color: lighten($top-bar-color, 6%);
|
||||||
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||||||
|
$tab-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: #1e1e1e;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
135
styles/material-dark/color/v2-light.scss
Normal file
135
styles/material-dark/color/v2-light.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: #000000;
|
||||||
|
$secondary-text-color: #5f6368;
|
||||||
|
$ui-text-color: #202124;
|
||||||
|
$inverted-text-color: #ffffff;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #5e5e5e;
|
||||||
|
$tips-text-color: #c0c0c0;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #4285f4;
|
||||||
|
$menu-text-color: $ui-text-color;
|
||||||
|
$top-bar-text-color: $ui-text-color;
|
||||||
|
$search-bar-text-color: $primary-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #ffffff;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: $background-color;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: $background-color;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: $icon-color;
|
||||||
|
$top-bar-icon-hover-color: $icon-hover-color;
|
||||||
|
$top-bar-icon-active-color: $primary-color;
|
||||||
|
$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: #ffffff;
|
||||||
|
$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
|
||||||
|
$floating-action-button-active-color: darken($floating-action-button-color, 10%);
|
||||||
|
$floating-action-button-icon-color: $primary-color;
|
||||||
|
|
||||||
|
// Toggle color
|
||||||
|
$toggle-thumb-color: #ffffff;
|
||||||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||||
|
$toggle-thumb-active-color: #1a73e8;
|
||||||
|
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: $background-color;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $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: #ffffff;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
4
styles/material-dark/custom_color.scss
Normal file
4
styles/material-dark/custom_color.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Add your customization below
|
||||||
2
styles/material-dark/custom_config.scss
Normal file
2
styles/material-dark/custom_config.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'color/v2-dark';
|
||||||
4
styles/material-dark/custom_layout.scss
Normal file
4
styles/material-dark/custom_layout.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Add your customization below
|
||||||
26
styles/material-dark/icon_config.scss
Normal file
26
styles/material-dark/icon_config.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
// Favorite icon settings
|
||||||
|
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
|
||||||
|
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
|
||||||
|
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
|
||||||
|
|
||||||
|
$favorite-icon-color: #ffd600; // Star
|
||||||
|
//$favorite-icon-color: #ff4081; // Heart
|
||||||
|
//$favorite-icon-color: #db4437; // +1
|
||||||
|
//$favorite-icon-color: #ffffff; // inverted +1
|
||||||
|
|
||||||
|
|
||||||
|
// Reply icon settings
|
||||||
|
$reply-icon: "reply";
|
||||||
|
//$reply-icon: "comment"; // blooming
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Icon settings
|
||||||
|
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
|
||||||
|
@font-face {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
src:
|
||||||
|
local("Material Icons"),
|
||||||
|
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
|
||||||
|
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
|
||||||
|
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
|
||||||
|
}
|
||||||
45
styles/material-dark/layout/material-v1.scss
Normal file
45
styles/material-dark/layout/material-v1.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/mixins';
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation bar radius
|
||||||
|
$nav-bar-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar radius
|
||||||
|
$search-bar-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Bar radius settings
|
||||||
|
$bar-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Button radius settings
|
||||||
|
$button-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Card radius settings
|
||||||
|
$card-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Dialog radius settings
|
||||||
|
$dialog-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Menu radius settings
|
||||||
|
$menu-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation drawer item settings
|
||||||
|
$nav-drawer-item-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Avater cropping settings
|
||||||
|
$avater-radius: 50%; // Rounded cropping
|
||||||
|
//$avater-radius: 2px // Material v1 square
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
60
styles/material-dark/layout/material-v2.scss
Normal file
60
styles/material-dark/layout/material-v2.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/mixins';
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation bar radius
|
||||||
|
$nav-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar radius
|
||||||
|
$search-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Bar radius settings
|
||||||
|
$bar-radius: 0;
|
||||||
|
//$bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Button radius settings
|
||||||
|
$button-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Card radius settings
|
||||||
|
$card-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Dialog radius settings
|
||||||
|
$dialog-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Menu radius settings
|
||||||
|
$menu-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation drawer item settings
|
||||||
|
$nav-drawer-item-radius: 8px; // corner rounded
|
||||||
|
//$nav-drawer-item-radius: 32px; // full rounded
|
||||||
|
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
|
||||||
|
|
||||||
|
|
||||||
|
// Avater cropping settings
|
||||||
|
$avater-radius: 50%; // Rounded cropping
|
||||||
|
//$avater-radius: 8px // Material v2 square
|
||||||
|
|
||||||
|
|
||||||
|
// Chip settings
|
||||||
|
// If you want to use contained-chip, please comment out below.
|
||||||
|
.reactions-bar__item {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
|
||||||
|
&.active { background-color: $outlined-chip-selected-color !important }
|
||||||
|
|
||||||
|
&:hover { background: $outlined-chip-hover-color !important }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
7
styles/material-dark/loader.scss
Normal file
7
styles/material-dark/loader.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@import 'theme/theme';
|
||||||
|
@import 'theme/material-icons';
|
||||||
|
|
||||||
|
// Plugins
|
||||||
|
//@import 'plugins/cards';
|
||||||
|
//@import 'plugins/dense';
|
||||||
|
//@import 'plugins/plus';
|
||||||
38
styles/material-dark/plugins/cards.scss
Normal file
38
styles/material-dark/plugins/cards.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import '../theme/mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.column {
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 2px 0 !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
|
||||||
|
> .scrollable { background: $background-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
border-bottom: 0;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&__prepend { padding: 8px 8px 2px 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.account { border-bottom: 0 !important }
|
||||||
|
|
||||||
|
.status__wrapper.status__wrapper,
|
||||||
|
.notification.notification {
|
||||||
|
@include shadow-1dp;
|
||||||
|
margin: 8px 2px;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
|
||||||
|
|
||||||
|
.notification__filter-bar {
|
||||||
|
@include non-overflow-shadow-4dp;
|
||||||
|
}
|
||||||
65
styles/material-dark/plugins/dense.scss
Normal file
65
styles/material-dark/plugins/dense.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
&__tab { margin: 8px auto 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column { margin: 10px 5px }
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
&__buttons { height: 48px }
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
margin: 8px;
|
||||||
|
padding: 10px 8px;
|
||||||
|
|
||||||
|
.fa { vertical-align: text-top }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading { padding: 8px 16px }
|
||||||
|
|
||||||
|
.column-link { padding: 12px 16px }
|
||||||
|
|
||||||
|
.notification__filter-bar button { padding: 12px 0 }
|
||||||
|
|
||||||
|
.getting-started__footer {
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
p { margin-bottom: 12px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
.compose-form__publish { padding-top: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 8px 8px 8px 66px;
|
||||||
|
|
||||||
|
&__expand { width: 66px }
|
||||||
|
|
||||||
|
&__info { padding-right: 0 }
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
left: 8px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content { padding-top: 2px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status {
|
||||||
|
padding: 14px;
|
||||||
|
|
||||||
|
&__meta { margin-top: 14px }
|
||||||
|
|
||||||
|
&__action-bar { padding: 10px 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-indicator { padding: 8px }
|
||||||
|
|
||||||
|
.button.button--block { margin: 6px 0 }
|
||||||
33
styles/material-dark/plugins/plus.scss
Normal file
33
styles/material-dark/plugins/plus.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
|
||||||
|
|
||||||
|
.status__action-bar-button {
|
||||||
|
background: #eeeeee;
|
||||||
|
width: 28px !important;
|
||||||
|
height: 28px !important;
|
||||||
|
|
||||||
|
.fa { vertical-align: bottom }
|
||||||
|
}
|
||||||
|
|
||||||
|
// favorite icon
|
||||||
|
.star-icon.active,
|
||||||
|
.star-icon.icon-button.active.active,
|
||||||
|
.notification__favourite-icon-wrapper .star-icon,
|
||||||
|
.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
|
||||||
|
|
||||||
|
.notification__favourite-icon-wrapper {
|
||||||
|
left: -34px;
|
||||||
|
|
||||||
|
.star-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
&.fa-fw::before { vertical-align: middle }
|
||||||
|
}
|
||||||
|
}
|
||||||
8
styles/material-dark/theme/_functions.scss
Normal file
8
styles/material-dark/theme/_functions.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@use "sass:string";
|
||||||
|
|
||||||
|
|
||||||
|
// convert hex color code to svg styled ascii color code
|
||||||
|
@function svg-color ($color) {
|
||||||
|
@return '%23' + string.slice(inspect($color), 2, 7);
|
||||||
|
}
|
||||||
25
styles/material-dark/theme/_mixins.scss
Normal file
25
styles/material-dark/theme/_mixins.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
$shadow-color-1: rgba(0,0,0,.2);
|
||||||
|
$shadow-color-2: rgba(0,0,0,.14);
|
||||||
|
$shadow-color-3: rgba(0,0,0,.12);
|
||||||
|
|
||||||
|
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
|
||||||
|
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
|
||||||
|
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
|
||||||
|
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
|
||||||
|
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
|
||||||
|
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
|
||||||
|
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
|
||||||
|
@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
|
||||||
|
@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
|
||||||
|
@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
|
||||||
|
|
||||||
|
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
|
||||||
153
styles/material-dark/theme/account.scss
Normal file
153
styles/material-dark/theme/account.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.account {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.account__display-name { color: $primary-text-color }
|
||||||
|
.account__display-name strong { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
border-radius: $avater-radius;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&-overlay {
|
||||||
|
&-base {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background-size: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-overlay { border-radius: $avater-radius }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
&__bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.avatar .account__avatar { border: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
small { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
.icon-button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__extra {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
&__links {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
padding: 4px 12px;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bio {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.account__header {
|
||||||
|
&__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fields {
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.verified {
|
||||||
|
border: none;
|
||||||
|
background: $verified-background-color;
|
||||||
|
|
||||||
|
a,
|
||||||
|
&__mark { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&:first-child .verified { border-radius: 0 }
|
||||||
|
|
||||||
|
&:last-child { border-bottom: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $list-background-inactive-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section-headline {
|
||||||
|
background: $text-tab-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 16px 0;
|
||||||
|
color: $text-tab-indicator-color;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $text-tab-indicator-active-color;
|
||||||
|
border-bottom: 4px solid $text-tab-indicator-active-color;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $text-tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $text-tab-indicator-background-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-role {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 17px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accounts-table__count {
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
small { color: $secondary-text-color }
|
||||||
|
}
|
||||||
34
styles/material-dark/theme/base_config.scss
Normal file
34
styles/material-dark/theme/base_config.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
|
||||||
|
|
||||||
|
|
||||||
|
// Color scheme
|
||||||
|
@import '../color/v1-light';
|
||||||
|
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
||||||
|
// @import 'color/v2-light';
|
||||||
|
|
||||||
|
|
||||||
|
// Layout profile
|
||||||
|
@import '../layout/material-v1';
|
||||||
|
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
||||||
|
// @import 'layout/material-v2';
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar hover settings
|
||||||
|
// You can enable/disable search bar floating.
|
||||||
|
/*.search__input:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
// Status font size in timeline
|
||||||
|
$status-font-size: 15px; // mastodon default
|
||||||
|
//$status-font-size: 16px; // compatible with material design
|
||||||
|
|
||||||
|
|
||||||
|
// Name font size in timeline status
|
||||||
|
$name-font-size: 15px; // mastodon default
|
||||||
|
//$name-font-size: 16px; // compatible with material design
|
||||||
26
styles/material-dark/theme/basics.scss
Normal file
26
styles/material-dark/theme/basics.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
|
||||||
|
|
||||||
|
body { background: $background-color }
|
||||||
|
|
||||||
|
// Chrome & Safari scroll bar
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: $scroll-bar-thumb-color;
|
||||||
|
|
||||||
|
&:hover { background: $scroll-bar-thumb-hover-color }
|
||||||
|
&:active { background: $scroll-bar-thumb-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track,
|
||||||
|
::-webkit-scrollbar-track:hover,
|
||||||
|
::-webkit-scrollbar-track:active {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Firefox scroll bar
|
||||||
|
html {
|
||||||
|
scrollbar-color: $scroll-bar-thumb-color transparent;
|
||||||
|
}
|
||||||
97
styles/material-dark/theme/button.scss
Normal file
97
styles/material-dark/theme/button.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $icon-button-active-color;
|
||||||
|
|
||||||
|
&:hover { color: $icon-button-active-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled { color: $disabled-icon-color }
|
||||||
|
|
||||||
|
&.inverted {
|
||||||
|
color: $icon-button-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.overlayed {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background-color: transparent }
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-icon-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
.button:active,
|
||||||
|
.button:focus {
|
||||||
|
background-color: $contained-button-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background-color: $contained-button-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.logo-button {
|
||||||
|
background: $contained-button-color;
|
||||||
|
margin: 2px;
|
||||||
|
|
||||||
|
&:hover { background: $contained-button-hover-color }
|
||||||
|
|
||||||
|
.button--destructive:hover { background: $contained-button-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button--block { margin: 8px 0 }
|
||||||
|
|
||||||
|
.button.confirmation-modal__cancel-button {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: $text-button-color;
|
||||||
|
|
||||||
|
&:hover { background: $text-button-hover-color }
|
||||||
|
|
||||||
|
&:focus { background: $text-button-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-button__overlay__label {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
color: $media-icon-color;
|
||||||
|
}
|
||||||
474
styles/material-dark/theme/columns.scss
Normal file
474
styles/material-dark/theme/columns.scss
Normal file
|
|
@ -0,0 +1,474 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include shadow-1dp;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 8px;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&>.scrollable { background: $list-background-color }
|
||||||
|
|
||||||
|
&:last-child { box-shadow: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
color: $top-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&>.column-header__back-button { color: $top-bar-icon-color }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.column-header__icon {
|
||||||
|
color: $top-bar-unread-icon-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 16px;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons { height: 56px }
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
margin: 8px 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $top-bar-icon-active-color;
|
||||||
|
background: $icon-background-active-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-btn {
|
||||||
|
color: $icon-button-color;
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { font-size: 20px }
|
||||||
|
|
||||||
|
span { vertical-align: middle }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-arrows {
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 8px;
|
||||||
|
|
||||||
|
.column-header__setting-btn {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:last-child { padding-right: 8px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include shadow-4dp;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
.announcements { border-top: 1px solid $border-color }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
@include shadow-4dp;
|
||||||
|
|
||||||
|
&::before { background: transparent }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__collapsible {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed { border-top: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__back-button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
padding: 8px;
|
||||||
|
margin: auto 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
span { display: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading {
|
||||||
|
color: $section-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-link {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: $nav-drawer-item-radius;
|
||||||
|
|
||||||
|
&:hover { background: $list-background-hover-color }
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background: $list-background-active-color }
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 32px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--transparent {
|
||||||
|
&.active {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-active-hover-color }
|
||||||
|
|
||||||
|
.fa { color: $icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
.fa { color: $icon-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { color: $icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-settings {
|
||||||
|
&__section {
|
||||||
|
color: $section-text-color;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row .text-btn { margin-bottom: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-back-button {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
span { visibility: hidden } // hide "back" string
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-inline-form {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
.icon-button { margin: 0 16px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-text {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $text-field-background-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-column-indicator {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px;
|
||||||
|
background: $list-background-inactive-color;
|
||||||
|
|
||||||
|
&--unread {
|
||||||
|
background: $list-background-color;
|
||||||
|
|
||||||
|
.conversation__content__relative-time { color: $info-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__unread { background: $primary-color }
|
||||||
|
|
||||||
|
&__avatar { padding: 0 16px 0 0 }
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&__relative-time {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__names,
|
||||||
|
&__names a {
|
||||||
|
color: $primary-text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// read status in notification column
|
||||||
|
.muted {
|
||||||
|
.status {
|
||||||
|
&__content {
|
||||||
|
color: $read-primary-text-color;
|
||||||
|
|
||||||
|
p { color: $read-primary-text-color }
|
||||||
|
|
||||||
|
a { color: $read-secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__display-name strong { color: $read-primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll {
|
||||||
|
color: $read-primary-text-color;
|
||||||
|
|
||||||
|
&__chart {
|
||||||
|
background: $read-poll-bar-color;
|
||||||
|
|
||||||
|
&.leading { background: $read-poll-bar-leading-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer,
|
||||||
|
&__link { color: $read-ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-gap { border-bottom: 1px solid $border-color }
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started {
|
||||||
|
background: $background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
background: $background-color;
|
||||||
|
height: auto !important;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: $ui-text-color }
|
||||||
|
|
||||||
|
p a { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__trends {
|
||||||
|
background: $background-color;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: $section-text-color;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.trends {
|
||||||
|
&__header {
|
||||||
|
color: $section-text-color;
|
||||||
|
background: transparent;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 16px;
|
||||||
|
border-bottom: none;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
a { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__current {
|
||||||
|
padding-right: 16px;
|
||||||
|
margin-left: 4px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sparkline path {
|
||||||
|
stroke: $primary-color;
|
||||||
|
fill: $primary-color;
|
||||||
|
fill-opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-toggle {
|
||||||
|
&__label {
|
||||||
|
color: $ui-text-color;
|
||||||
|
margin: 8px 8px 8px 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcements {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&__container { color: $primary-text-color }
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&__unread { background: $badge-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 }
|
||||||
|
|
||||||
|
.reactions-bar {
|
||||||
|
.emoji-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
&:hover { color: $icon-button-hover-color }
|
||||||
|
|
||||||
|
&:active { color: $icon-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
background: $contained-chip-color;
|
||||||
|
border-radius: 17px;
|
||||||
|
margin: 2px 4px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: $contained-chip-selected-color;
|
||||||
|
.reactions-bar__item__count { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__emoji {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 4px 0 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__count {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $contained-chip-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
&__filter-bar {
|
||||||
|
background: $tab-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: $tab-background-color;
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span { font-size: 14px }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-active-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-active-color;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__message {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
margin: 0 16px 0 70px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__display-name:hover { color: inherit }
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-favourite .status.status-direct {
|
||||||
|
.icon-button.disabled { color: $disabled-icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.relationship-tag {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $relationship-tag-color;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-list__list a { color: $secondary-text-color }
|
||||||
534
styles/material-dark/theme/components.scss
Normal file
534
styles/material-dark/theme/components.scss
Normal file
|
|
@ -0,0 +1,534 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
&__header {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $nav-bar-radius;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
a { transition: none }
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tab {
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 10px auto 10px;
|
||||||
|
padding: 8px;
|
||||||
|
flex: none;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-bottom: none;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
&:hover { color: $top-bar-icon-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pager {
|
||||||
|
@include shadow-1dp;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__inner {
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&.darker {
|
||||||
|
background: $card-background-color;
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mastodon { background: $card-background-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
&__input {
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
border-radius: $search-bar-radius;
|
||||||
|
padding: 12px 12px 12px 40px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
color: $search-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
.fa {
|
||||||
|
color: $icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
top: 12px;
|
||||||
|
right: unset;
|
||||||
|
left: 12px;
|
||||||
|
height: 6px;
|
||||||
|
transition: none;
|
||||||
|
|
||||||
|
&.active { opacity: 1 }
|
||||||
|
|
||||||
|
&-search {
|
||||||
|
transform: none;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&-times-circle.active {
|
||||||
|
right: 16px;
|
||||||
|
left: unset;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-popout {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
border-radius: 0px $bar-radius;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
margin-top: 0;
|
||||||
|
color: $tips-text-color;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
color: $search-bar-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
&__header {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background-color: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section {
|
||||||
|
h5 {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 16px;
|
||||||
|
color: $section-text-color;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-bar {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
padding: 14px;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: $ui-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-panel hr {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
&__arrow { visibility: hidden }
|
||||||
|
|
||||||
|
&__item a {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background: $menu-background-hover-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__separator {
|
||||||
|
margin: 8px 0;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
.autosuggest-textarea {
|
||||||
|
&__textarea {
|
||||||
|
background: $text-field-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__suggestions {
|
||||||
|
@include shadow-1dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-hover-color }
|
||||||
|
|
||||||
|
&.selected,
|
||||||
|
&:focus,
|
||||||
|
&:active { background: $menu-background-active-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-input__input {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
&__warning {
|
||||||
|
@include shadow-1dp;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
a { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons-wrapper {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__poll-wrapper {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
ul { padding: 16px 12px 16px 0 }
|
||||||
|
|
||||||
|
select {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $background-color;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-secondary {
|
||||||
|
box-shadow: none;
|
||||||
|
color: $outlined-button-color;
|
||||||
|
border-color: $outlined-button-color;
|
||||||
|
|
||||||
|
&:hover { background-color: $outlined-button-hover-color }
|
||||||
|
|
||||||
|
&:active { background-color: $outlined-button-active-color }
|
||||||
|
|
||||||
|
&:focus { background-color: $outlined-button-color }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__utilBtns { padding-top: 0 }
|
||||||
|
|
||||||
|
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-reduce-motion .spoiler-input {
|
||||||
|
transition-duration: .2s, .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.poll {
|
||||||
|
&__input {
|
||||||
|
border: 2px solid $control-border-color;
|
||||||
|
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: $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;
|
||||||
|
|
||||||
|
&.leading { background: $poll-bar-leading-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer {
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
color: $ui-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-dropdown {
|
||||||
|
&.active .privacy-dropdown__value.active {
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.icon-button { color: $icon-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $dialog-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__option {
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 8px 16px;
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
color: $icon-hover-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-hover-color;
|
||||||
|
color: $icon-hover-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-counter {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-indicator {
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&__header { margin-bottom: 4px }
|
||||||
|
|
||||||
|
&__display {
|
||||||
|
&-name {
|
||||||
|
color: $primary-text-color;
|
||||||
|
padding-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-avatar { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-list {
|
||||||
|
&__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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
71
styles/material-dark/theme/control.scss
Normal file
71
styles/material-dark/theme/control.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.react-toggle {
|
||||||
|
width: 36px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
&-track {
|
||||||
|
background-color: $toggle-track-color;
|
||||||
|
margin: 4px;
|
||||||
|
width: 36px;
|
||||||
|
height: 16px;
|
||||||
|
|
||||||
|
&-check { visibility: hidden }
|
||||||
|
&-x { visibility: hidden }
|
||||||
|
}
|
||||||
|
|
||||||
|
&-thumb {
|
||||||
|
@include shadow-1dp;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 0;
|
||||||
|
background-color: $toggle-thumb-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--checked {
|
||||||
|
.react-toggle{
|
||||||
|
&-track { background-color: $toggle-track-active-color }
|
||||||
|
|
||||||
|
&-thumb {
|
||||||
|
background-color: $toggle-thumb-active-color;
|
||||||
|
left: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-button {
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
&__input {
|
||||||
|
border: 2px solid $border-color;
|
||||||
|
|
||||||
|
&.checked {
|
||||||
|
border-color: $icon-button-active-color;
|
||||||
|
background: $icon-button-active-color;
|
||||||
|
padding: 3px;
|
||||||
|
background-clip: content-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__sensitive-button .checkbox {
|
||||||
|
border: 2px solid $border-color;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: $primary-color;
|
||||||
|
background: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
92
styles/material-dark/theme/emoji-picker.scss
Normal file
92
styles/material-dark/theme/emoji-picker.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.emoji-picker-dropdown {
|
||||||
|
&__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart {
|
||||||
|
width: 388px !important;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $menu-text-color;
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
border: 0 solid $border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchors {
|
||||||
|
color: $icon-button-color;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchor {
|
||||||
|
padding: 10px 4px;
|
||||||
|
|
||||||
|
&-selected {
|
||||||
|
color: $icon-button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
background-color: $tab-indicator-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-search {
|
||||||
|
background: $menu-background-color;
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline: none;
|
||||||
|
padding: 8px;
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $search-bar-radius;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-scroll {
|
||||||
|
padding: 0 8px 8px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-category-label span {
|
||||||
|
padding: 4px 6px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-emoji:hover::before {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-no-results { color: $secondary-text-color }
|
||||||
|
}
|
||||||
44
styles/material-dark/theme/icons.scss
Normal file
44
styles/material-dark/theme/icons.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.fa.fa-users.column-link,
|
||||||
|
.fa.fa-globe.column-link,
|
||||||
|
.fa.fa-address-book.column-link,
|
||||||
|
.fa.fa-bullhorn.column-link,
|
||||||
|
.fa.fa-envelope.column-link,
|
||||||
|
.fa.fa-bookmark.column-link,
|
||||||
|
.fa.fa-star.column-link,
|
||||||
|
.fa.fa-list-ul.column-link {
|
||||||
|
&__icon.fa-fw { color: $icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fa { vertical-align: sub } // adjust material icon font baseline to other font
|
||||||
|
|
||||||
|
.fa.fa-times,
|
||||||
|
.fa.fa-eraser,
|
||||||
|
.fa.fa-plus { vertical-align: middle } // adjustment exception
|
||||||
|
|
||||||
|
.fa.fa-check { vertical-align: initial }
|
||||||
|
|
||||||
|
.fa.fa-lock { text-transform: none }
|
||||||
|
|
||||||
|
.fa-fw { width: 16px }
|
||||||
|
|
||||||
|
// icon in tab settings
|
||||||
|
.fa.fa-chevron-left.column-back-button__icon.fa-fw,
|
||||||
|
.text-btn.column-header__setting-btn .fa.fa-eraser {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-with-badge__badge {
|
||||||
|
background: $badge-color;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
159
styles/material-dark/theme/material-icons.scss
Normal file
159
styles/material-dark/theme/material-icons.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config', '../icon_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'functions';
|
||||||
|
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
&.fa-bars,
|
||||||
|
&.fa-navicon,
|
||||||
|
&.fa-reorder,
|
||||||
|
&.fa-globe,
|
||||||
|
&.fa-cog,
|
||||||
|
&.fa-cogs,
|
||||||
|
&.fa-gears,
|
||||||
|
&.fa-sign-out,
|
||||||
|
&.fa-search,
|
||||||
|
&.fa-times,
|
||||||
|
&.fa-times-circle,
|
||||||
|
&.fa-close,
|
||||||
|
&.fa-remove,
|
||||||
|
&.fa-chevron-down,
|
||||||
|
&.fa-ellipsis-v,
|
||||||
|
&.fa-paperclip,
|
||||||
|
&.fa-tasks,
|
||||||
|
&.fa-plus,
|
||||||
|
&.fa-unlock,
|
||||||
|
&.fa-lock,
|
||||||
|
&.fa-envelope,
|
||||||
|
&.fa-home,
|
||||||
|
&.fa-bullhorn,
|
||||||
|
&.fa-sliders,
|
||||||
|
&.fa-chevron-left,
|
||||||
|
&.fa-chevron-right,
|
||||||
|
&.fa-reply,
|
||||||
|
&.fa-reply-all,
|
||||||
|
&.fa-share-alt,
|
||||||
|
&.fa-star,
|
||||||
|
&.fa-bookmark,
|
||||||
|
&.fa-ellipsis-h,
|
||||||
|
&.fa-bell,
|
||||||
|
&.fa-eraser,
|
||||||
|
&.fa-users,
|
||||||
|
&.fa-file-text,
|
||||||
|
&.fa-user-plus,
|
||||||
|
&.fa-address-book,
|
||||||
|
&.fa-address-book-o,
|
||||||
|
&.fa-list,
|
||||||
|
&.fa-list-ul,
|
||||||
|
&.fa-eye,
|
||||||
|
&.fa-eye-slash,
|
||||||
|
&.fa-pencil,
|
||||||
|
&.fa-trash,
|
||||||
|
&.fa-play,
|
||||||
|
&.fa-external-link,
|
||||||
|
&.fa-retweet,
|
||||||
|
&.fa-link,
|
||||||
|
&.fa-pause,
|
||||||
|
&.fa-volume-up,
|
||||||
|
&.fa-volume-off,
|
||||||
|
&.fa-expand,
|
||||||
|
&.fa-download,
|
||||||
|
&.fa-arrows-alt,
|
||||||
|
&.fa-compress,
|
||||||
|
&.fa-user-times,
|
||||||
|
&.fa-check,
|
||||||
|
&.fa-quote-right {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
&.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
|
||||||
|
&.fa-globe::before { content: "public" }
|
||||||
|
&.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
|
||||||
|
&.fa-sign-out::before { content: "exit_to_app" }
|
||||||
|
&.fa-search::before { content: "search" }
|
||||||
|
&.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
|
||||||
|
&.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
|
||||||
|
&.fa-paperclip::before { content: "attach_file" }
|
||||||
|
&.fa-tasks::before { content: "poll" }
|
||||||
|
&.fa-plus::before { content: "add" }
|
||||||
|
&.fa-unlock::before { content: "lock_open" }
|
||||||
|
&.fa-lock::before { content: "lock" }
|
||||||
|
&.fa-envelope::before { content: "mail" }
|
||||||
|
&.fa-home::before { content: "home" }
|
||||||
|
&.fa-bullhorn::before { content: "announcement" }
|
||||||
|
&.fa-sliders::before { content: "tune" }
|
||||||
|
&.fa-chevron-left::before { content: "arrow_back" }
|
||||||
|
&.fa-chevron-right::before { content: "arrow_forward" }
|
||||||
|
&.fa-reply::before { content: $reply-icon }
|
||||||
|
&.fa-reply-all::before { content: "reply_all" }
|
||||||
|
&.fa-share-alt::before { content: "share" }
|
||||||
|
&.fa-star::before { content: $favorite-icon }
|
||||||
|
&.fa-bookmark::before { content: "bookmark" }
|
||||||
|
&.fa-ellipsis-h::before { content: "more_horiz" }
|
||||||
|
&.fa-bell::before { content: "notifications" }
|
||||||
|
&.fa-eraser::before { content: "clear_all" }
|
||||||
|
&.fa-users::before { content: "people" }
|
||||||
|
&.fa-file-text::before { content: "web" }
|
||||||
|
&.fa-user-plus::before { content: "person_add" }
|
||||||
|
&.fa-address-book::before { content: "explore" }
|
||||||
|
&.fa-address-book-o::before { content: "explore" }
|
||||||
|
&.fa-list::before { content: "list" }
|
||||||
|
&.fa-list-ul::before { content: "list" }
|
||||||
|
&.fa-eye::before { content: "visibility" }
|
||||||
|
&.fa-eye-slash::before { content : "visibility_off" }
|
||||||
|
&.fa-pencil::before { content: "create" }
|
||||||
|
&.fa-trash::before { content: "delete" }
|
||||||
|
&.fa-play::before { content: "play_arrow" }
|
||||||
|
&.fa-external-link::before { content: "open_in_new" }
|
||||||
|
&.fa-retweet::before { content: "repeat" }
|
||||||
|
&.fa-link::before { content: "link" }
|
||||||
|
&.fa-pause::before { content: "pause" }
|
||||||
|
&.fa-volume-up::before { content: "volume_up" }
|
||||||
|
&.fa-volume-off::before { content: "volume_off" }
|
||||||
|
&.fa-expand::before { content: "web_asset" }
|
||||||
|
&.fa-download::before { content: "file_download" }
|
||||||
|
&.fa-arrows-alt::before { content: "fullscreen" }
|
||||||
|
&.fa-compress::before { content: "fullscreen_exit" }
|
||||||
|
&.fa-user-times::before { content: "delete" }
|
||||||
|
&.fa-check::before { content: "check" }
|
||||||
|
&.fa-quote-right::before { content: "format_quote" }
|
||||||
|
}
|
||||||
|
|
||||||
|
// bookmark icon
|
||||||
|
.status__action-bar-button.icon-button,
|
||||||
|
.bookmark-icon.icon-button {
|
||||||
|
.fa.fa-bookmark::before { content: "bookmark_border" }
|
||||||
|
&.active .fa.fa-bookmark::before { content: "bookmark" }
|
||||||
|
}
|
||||||
|
|
||||||
|
// favorite icon
|
||||||
|
.status__action-bar-button.star-icon.icon-button,
|
||||||
|
.star-icon.icon-button {
|
||||||
|
.fa.fa-star::before { content: $favorite-icon-border }
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&.active.activate {
|
||||||
|
.fa.fa-star::before { content: $favorite-icon }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// favorite icon color
|
||||||
|
.star-icon.active,
|
||||||
|
.star-icon.icon-button.active.active,
|
||||||
|
.notification__favourite-icon-wrapper .star-icon,
|
||||||
|
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
|
||||||
|
|
||||||
|
// boost icon
|
||||||
|
.no-reduce-motion button.icon-button i.fa-retweet {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
transition: none;
|
||||||
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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}
|
||||||
105
styles/material-dark/theme/media.scss
Normal file
105
styles/material-dark/theme/media.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.media-gallery {
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&__item { border-radius: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal__close {
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
&.icon-button {
|
||||||
|
background: transparent;
|
||||||
|
color: $media-icon-color;
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-hover-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-fw { width: 24px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal {
|
||||||
|
&__nav {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-color;
|
||||||
|
height: 48px;
|
||||||
|
width: 48px;
|
||||||
|
margin: auto 16px;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
.fa { width: 32px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background-color: $media-page-indicator-color;
|
||||||
|
|
||||||
|
&--active { background-color: $media-page-indicator-active-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-player {
|
||||||
|
&__controls {
|
||||||
|
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__seek {
|
||||||
|
&::before {
|
||||||
|
background: rgba(255,255,255,.2);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buffer {
|
||||||
|
background: rgba(255,255,255,.4);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__progress {
|
||||||
|
background: $primary-color;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__handle {
|
||||||
|
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||||
|
background-color: $primary-color;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__volume {
|
||||||
|
&::before {
|
||||||
|
background: rgba(255,255,255,.4);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__current {
|
||||||
|
background: $primary-color;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__handle {
|
||||||
|
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||||
|
background-color: $primary-color;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__time-current { margin-left: 68px }
|
||||||
|
|
||||||
|
&__buttons button { font-size: 20px }
|
||||||
|
}
|
||||||
102
styles/material-dark/theme/modal.scss
Normal file
102
styles/material-dark/theme/modal.scss
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.confirmation-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $dialog-radius;
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
text-align: left;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
justify-content: flex-end;
|
||||||
|
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 {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
ul li:not(:empty) a {
|
||||||
|
color: $ui-text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $card-background-hover-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__separator { border-bottom-color: $border-color }
|
||||||
|
|
||||||
|
.status {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-bottom-color: $border-color;
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
left: 12px;
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&__target {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__comment {
|
||||||
|
border-right: none;
|
||||||
|
|
||||||
|
.setting-text-label { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal .embed-modal__container {
|
||||||
|
padding: 0 24px 24px 24px;
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
94
styles/material-dark/theme/responsive.scss
Normal file
94
styles/material-dark/theme/responsive.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.tabs-bar {
|
||||||
|
background: $top-bar-color;
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
padding: 16px 16px 12px 16px;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
border-bottom: 4px solid transparent;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 4px solid $tab-indicator-active-color;
|
||||||
|
color: $tab-indicator-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { font-size: 20px }
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-left: 8px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-bar__portal { overflow-y: hidden }
|
||||||
|
|
||||||
|
.floating-action-button {
|
||||||
|
@include shadow-6dp;
|
||||||
|
background: $floating-action-button-color;
|
||||||
|
color: $floating-action-button-icon-color;
|
||||||
|
font-size: 24px;
|
||||||
|
|
||||||
|
&:hover { background: $floating-action-button-hover-color }
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background: $floating-action-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.columns-area--mobile {
|
||||||
|
.column { margin: 0 !important }
|
||||||
|
.search__input { padding: 16px 46px }
|
||||||
|
|
||||||
|
.search__icon {
|
||||||
|
.fa {
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-times-circle.active { left: unset }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
185
styles/material-dark/theme/statuses.scss
Normal file
185
styles/material-dark/theme/statuses.scss
Normal file
|
|
@ -0,0 +1,185 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 12px 12px 12px 70px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&__expand { width: 70px }
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
font-size: $name-font-size;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__relative-time { color: $info-text-color }
|
||||||
|
|
||||||
|
&__display-name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
left: 12px;
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
font-size: $status-font-size;
|
||||||
|
padding-top: 4px;
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-text-color;
|
||||||
|
|
||||||
|
&.unhandled-link { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__content__spoiler-link {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&:hover { background: $text-button-hover-color }
|
||||||
|
|
||||||
|
&:focus { background: $text-button-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__spoiler-link {
|
||||||
|
border: 0;
|
||||||
|
color: $text-button-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__read-more-button {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $text-button-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
padding: 4px 6px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $text-button-hover-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus { background: $text-button-focus-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
&__counter__label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__prepend {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
margin-left: 64px;
|
||||||
|
|
||||||
|
.status__display-name strong { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-direct:not(.read) {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom-color: $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
color: $icon-color;
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&>.fa {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: $primary-text-color;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
&>div {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
a {
|
||||||
|
color: $media-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { bottom: auto }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
&__content { padding: 12px }
|
||||||
|
&__image { flex: 0 0 64px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: transparent !important }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: $card-background-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detailed status in mobile
|
||||||
|
.status.light {
|
||||||
|
.status {
|
||||||
|
&__display-name { color: $primary-text-color }
|
||||||
|
&__relative-time { color: $info-text-color }
|
||||||
|
&__content { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-name { color: $secondary-text-color }
|
||||||
|
.display-name strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&__display-name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
.icon-button { font-size: 20px !important }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// search user trends
|
||||||
|
.display-name {
|
||||||
|
&__html { color: $primary-text-color !important }
|
||||||
|
&__account { color: $secondary-text-color }
|
||||||
|
}
|
||||||
4
styles/material-dark/theme/theme.scss
Normal file
4
styles/material-dark/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';
|
||||||
7
styles/material-dark/theme/variables.scss
Normal file
7
styles/material-dark/theme/variables.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
|
||||||
|
|
||||||
|
.link-button { color: $link-text-color }
|
||||||
2
styles/material-light.scss
Normal file
2
styles/material-light.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import 'application';
|
||||||
|
@import 'material-light/loader';
|
||||||
135
styles/material-light/color/black.scss
Normal file
135
styles/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);
|
||||||
135
styles/material-light/color/mastodon-dark.scss
Normal file
135
styles/material-light/color/mastodon-dark.scss
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Base color
|
||||||
|
$primary-color: #2b90d9;
|
||||||
|
$secondary-color: #2b90d9;
|
||||||
|
$error-color: #B00020;
|
||||||
|
$verified-color: #4caf50;
|
||||||
|
|
||||||
|
// Text color
|
||||||
|
$primary-text-color: #ffffff;
|
||||||
|
$secondary-text-color: #9baec8;
|
||||||
|
$ui-text-color: #fff;
|
||||||
|
$inverted-text-color: #000000;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #606984;
|
||||||
|
$tips-text-color: #6d7889;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #4ea2df;
|
||||||
|
$menu-text-color: #282c37;
|
||||||
|
$top-bar-text-color: $ui-text-color;
|
||||||
|
$search-bar-text-color: $inverted-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #191b22;
|
||||||
|
$menu-background-color: #d9e1e8;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #313543;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #282c37;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #42485a;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #393f4f;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#42485a, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #9baec8;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: lighten($background-color, 14%);
|
||||||
|
$icon-background-active-color: lighten($background-color, 18%);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #fff;
|
||||||
|
$top-bar-icon-hover-color: $icon-hover-color;
|
||||||
|
$top-bar-icon-active-color: $icon-hover-color;
|
||||||
|
$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.7);
|
||||||
|
$text-button-focus-color: transparentize($text-button-color, 0.6);
|
||||||
|
$floating-action-button-color: $primary-color;
|
||||||
|
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||||
|
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||||
|
$floating-action-button-icon-color: #ffffff;
|
||||||
|
|
||||||
|
// Toggle color
|
||||||
|
$toggle-thumb-color: #ffffff;
|
||||||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||||
|
$toggle-thumb-active-color: #1a73e8;
|
||||||
|
$toggle-track-active-color: lighten($primary-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #393f4f;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 16%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #313543;
|
||||||
|
$search-bar-color: lighten($top-bar-color, 6%);
|
||||||
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: #d9e1e8;
|
||||||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||||||
|
$tab-background-color: #1f232b;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||||
|
$text-tab-indicator-color: $tab-indicator-color;
|
||||||
|
$text-tab-indicator-active-color: $tab-indicator-active-color;
|
||||||
|
$text-tab-background-color: $tab-background-color;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
134
styles/material-light/color/mastodon-light.scss
Normal file
134
styles/material-light/color/mastodon-light.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Base color
|
||||||
|
$primary-color: #2b90d9;
|
||||||
|
$secondary-color: #2b90d9;
|
||||||
|
$error-color: #B00020;
|
||||||
|
$verified-color: #4caf50;
|
||||||
|
|
||||||
|
// Text color
|
||||||
|
$primary-text-color: #000000;
|
||||||
|
$secondary-text-color: #5f6368;
|
||||||
|
$ui-text-color: #202124;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #5e5e5e;
|
||||||
|
$tips-text-color: #c0c0c0;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #217aba;
|
||||||
|
$menu-text-color: $ui-text-color;
|
||||||
|
$top-bar-text-color: $ui-text-color;
|
||||||
|
$search-bar-text-color: $primary-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #eff3f5;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #282c37;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: darken($background-color, 4%);
|
||||||
|
$icon-background-active-color: darken($background-color, 8%);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: $icon-color;
|
||||||
|
$top-bar-icon-hover-color: $icon-hover-color;
|
||||||
|
$top-bar-icon-active-color: $icon-hover-color;
|
||||||
|
$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: lighten($text-button-color, 36%);
|
||||||
|
$text-button-focus-color: lighten($text-button-color, 30%);
|
||||||
|
$floating-action-button-color: $primary-color;
|
||||||
|
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||||
|
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||||
|
$floating-action-button-icon-color: #ffffff;
|
||||||
|
|
||||||
|
// Toggle color
|
||||||
|
$toggle-thumb-color: #ffffff;
|
||||||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||||
|
$toggle-thumb-active-color: $primary-color;
|
||||||
|
$toggle-track-active-color: lighten($primary-color, 26%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: #ccd7e0;
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #ffffff;
|
||||||
|
$search-bar-color: #d9e1e8;
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: #282c37;
|
||||||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||||||
|
$tab-background-color: #e6ebf0;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||||
|
$text-tab-indicator-color: $tab-indicator-color;
|
||||||
|
$text-tab-indicator-active-color: $tab-indicator-active-color;
|
||||||
|
$text-tab-background-color: $tab-background-color;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
134
styles/material-light/color/plus-classic.scss
Normal file
134
styles/material-light/color/plus-classic.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Base color
|
||||||
|
$primary-color: #4285f4;
|
||||||
|
$secondary-color: #db4437;
|
||||||
|
$error-color: #B00020;
|
||||||
|
$verified-color: #4caf50;
|
||||||
|
|
||||||
|
// Text color
|
||||||
|
$primary-text-color: #000000;
|
||||||
|
$secondary-text-color: #5f6368;
|
||||||
|
$ui-text-color: #202124;
|
||||||
|
$inverted-text-color: #ffffff;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #5e5e5e;
|
||||||
|
$tips-text-color: #c0c0c0;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #4285f4;
|
||||||
|
$menu-text-color: $ui-text-color;
|
||||||
|
$top-bar-text-color: $inverted-text-color;
|
||||||
|
$search-bar-text-color: $primary-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #fafafa;
|
||||||
|
$menu-background-color: #ffffff;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#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: $secondary-color;
|
||||||
|
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
|
||||||
|
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
|
||||||
|
$floating-action-button-icon-color: #ffffff;
|
||||||
|
|
||||||
|
// Toggle color
|
||||||
|
$toggle-thumb-color: #ffffff;
|
||||||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||||
|
$toggle-thumb-active-color: #1a73e8;
|
||||||
|
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #db4437;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||||||
|
$tab-background-color: $top-bar-color;
|
||||||
|
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
|
||||||
|
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
|
||||||
|
$text-tab-indicator-color: $secondary-text-color;
|
||||||
|
$text-tab-indicator-active-color: $top-bar-color;
|
||||||
|
$text-tab-background-color: #ffffff;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
134
styles/material-light/color/v1-dark.scss
Normal file
134
styles/material-light/color/v1-dark.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
@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: #303030;
|
||||||
|
$menu-background-color: #424242;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #424242;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #424242;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$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;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #e2e2e3;
|
||||||
|
$icon-hover-color: lighten($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#ffffff, 0.8);
|
||||||
|
$icon-background-active-color: transparentize(#ffffff, 0.7);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#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: #2e2e2e;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #1565C0;
|
||||||
|
$search-bar-color: lighten($background-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: $top-bar-color;
|
||||||
|
$text-tab-background-color: #424242;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
135
styles/material-light/color/v1-light.scss
Normal file
135
styles/material-light/color/v1-light.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: #000000;
|
||||||
|
$secondary-text-color: #5f6368;
|
||||||
|
$ui-text-color: #202124;
|
||||||
|
$inverted-text-color: #ffffff;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #5e5e5e;
|
||||||
|
$tips-text-color: #c0c0c0;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #4285f4;
|
||||||
|
$menu-text-color: $ui-text-color;
|
||||||
|
$top-bar-text-color: $inverted-text-color;
|
||||||
|
$search-bar-text-color: $primary-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #fafafa;
|
||||||
|
$menu-background-color: #ffffff;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: #ffffff;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: #ffffff;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: #ffffff;
|
||||||
|
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
|
||||||
|
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
|
||||||
|
$top-bar-unread-icon-color: darken($primary-color, 30%);
|
||||||
|
$media-icon-color: transparentize(#ffffff, 0.4);
|
||||||
|
$media-icon-hover-color: transparentize(#ffffff, 0.2);
|
||||||
|
$media-icon-background-color: transparentize(#000000, 0.5);
|
||||||
|
$media-icon-background-hover-color: transparentize(#000000, 0.8);
|
||||||
|
$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: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #2196f3;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-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: $top-bar-color;
|
||||||
|
$text-tab-background-color: #ffffff;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
135
styles/material-light/color/v2-dark.scss
Normal file
135
styles/material-light/color/v2-dark.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: #121212;
|
||||||
|
$menu-background-color: #1e1e1e;
|
||||||
|
$menu-background-hover-color: lighten($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: lighten($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
|
||||||
|
$card-background-color: #1e1e1e;
|
||||||
|
$card-background-hover-color: lighten($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: lighten($card-background-color, 10%);
|
||||||
|
$list-background-color: #1e1e1e;
|
||||||
|
$list-background-hover-color: lighten($list-background-color, 6%);
|
||||||
|
$list-background-active-color: lighten($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: lighten($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: darken($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #2e2e2e;
|
||||||
|
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #1e1e1e;
|
||||||
|
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// 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: #2e2e2e;
|
||||||
|
$border-active-color: lighten($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: lighten($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
|
||||||
|
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: #272727;
|
||||||
|
$search-bar-color: lighten($top-bar-color, 6%);
|
||||||
|
$search-bar-focus-color: #ffffff;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $top-bar-icon-color;
|
||||||
|
$tab-indicator-active-color: $top-bar-icon-color;
|
||||||
|
$tab-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: #1e1e1e;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
135
styles/material-light/color/v2-light.scss
Normal file
135
styles/material-light/color/v2-light.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: #000000;
|
||||||
|
$secondary-text-color: #5f6368;
|
||||||
|
$ui-text-color: #202124;
|
||||||
|
$inverted-text-color: #ffffff;
|
||||||
|
$section-text-color: $primary-color;
|
||||||
|
$info-text-color: #5e5e5e;
|
||||||
|
$tips-text-color: #c0c0c0;
|
||||||
|
$disabled-text-color: rgba(0,0,0,.54);
|
||||||
|
$link-text-color: #4285f4;
|
||||||
|
$menu-text-color: $ui-text-color;
|
||||||
|
$top-bar-text-color: $ui-text-color;
|
||||||
|
$search-bar-text-color: $primary-text-color;
|
||||||
|
$contained-button-text-color: #ffffff;
|
||||||
|
|
||||||
|
// Background-color
|
||||||
|
$background-color: #ffffff;
|
||||||
|
$menu-background-color: $background-color;
|
||||||
|
$menu-background-hover-color: darken($menu-background-color, 6%);
|
||||||
|
$menu-background-active-color: darken($menu-background-color, 10%);
|
||||||
|
$menu-background-active-hover-color: darken($menu-background-color, 16%);
|
||||||
|
$card-background-color: $background-color;
|
||||||
|
$card-background-hover-color: darken($card-background-color, 6%);
|
||||||
|
$card-background-inactive-color: darken($card-background-color, 10%);
|
||||||
|
$list-background-color: $background-color;
|
||||||
|
$list-background-hover-color: darken($list-background-color, 6%);
|
||||||
|
$list-background-active-color: darken($list-background-color, 10%);
|
||||||
|
$list-background-inactive-color: darken($list-background-color, 10%);
|
||||||
|
$text-field-background-color: $card-background-color;
|
||||||
|
$verified-background-color: lighten($verified-color, 20%);
|
||||||
|
|
||||||
|
// Chip color
|
||||||
|
$contained-chip-color: #e0e0e0;
|
||||||
|
$contained-chip-hover-color: darken($contained-chip-color, 6%);
|
||||||
|
$contained-chip-selected-color: darken($contained-chip-color, 12%);
|
||||||
|
$outlined-chip-color: #ffffff;
|
||||||
|
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
|
||||||
|
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
|
||||||
|
|
||||||
|
// Relationship tag color
|
||||||
|
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
|
||||||
|
|
||||||
|
// Badge color
|
||||||
|
$badge-color: $primary-color;
|
||||||
|
//$badge-color: $secondary-color;
|
||||||
|
|
||||||
|
// Icon color
|
||||||
|
$icon-color: #757575;
|
||||||
|
$icon-hover-color: darken($icon-color, 30%);
|
||||||
|
$icon-background-hover-color: transparentize(#000000, 0.9);
|
||||||
|
$icon-background-active-color: transparentize(#000000, 0.8);
|
||||||
|
$disabled-icon-color: lighten($icon-color, 16%);
|
||||||
|
$top-bar-icon-color: $icon-color;
|
||||||
|
$top-bar-icon-hover-color: $icon-hover-color;
|
||||||
|
$top-bar-icon-active-color: $primary-color;
|
||||||
|
$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: #ffffff;
|
||||||
|
$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
|
||||||
|
$floating-action-button-active-color: darken($floating-action-button-color, 10%);
|
||||||
|
$floating-action-button-icon-color: $primary-color;
|
||||||
|
|
||||||
|
// Toggle color
|
||||||
|
$toggle-thumb-color: #ffffff;
|
||||||
|
$toggle-track-color: darken($toggle-thumb-color, 18%);
|
||||||
|
$toggle-thumb-active-color: #1a73e8;
|
||||||
|
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
|
||||||
|
|
||||||
|
// Border color
|
||||||
|
$border-color: #dadce0;
|
||||||
|
$border-active-color: darken($border-color, 30%);
|
||||||
|
|
||||||
|
// Scroll bar color
|
||||||
|
$scroll-bar-thumb-color: darken($background-color, 20%);
|
||||||
|
$scroll-bar-thumb-hover-color: darken($background-color, 30%);
|
||||||
|
$scroll-bar-thumb-active-color: darken($background-color, 38%);
|
||||||
|
|
||||||
|
// App bar color
|
||||||
|
$top-bar-color: $background-color;
|
||||||
|
$search-bar-color: darken($background-color, 6%);
|
||||||
|
$search-bar-focus-color: $background-color;
|
||||||
|
|
||||||
|
// Tab color
|
||||||
|
$tab-indicator-color: $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: #ffffff;
|
||||||
|
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
|
||||||
|
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
|
||||||
|
|
||||||
|
// 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);
|
||||||
4
styles/material-light/custom_color.scss
Normal file
4
styles/material-light/custom_color.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Add your customization below
|
||||||
2
styles/material-light/custom_config.scss
Normal file
2
styles/material-light/custom_config.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'color/v1-light';
|
||||||
4
styles/material-light/custom_layout.scss
Normal file
4
styles/material-light/custom_layout.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// Add your customization below
|
||||||
26
styles/material-light/icon_config.scss
Normal file
26
styles/material-light/icon_config.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
// Favorite icon settings
|
||||||
|
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
|
||||||
|
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
|
||||||
|
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
|
||||||
|
|
||||||
|
$favorite-icon-color: #ffd600; // Star
|
||||||
|
//$favorite-icon-color: #ff4081; // Heart
|
||||||
|
//$favorite-icon-color: #db4437; // +1
|
||||||
|
//$favorite-icon-color: #ffffff; // inverted +1
|
||||||
|
|
||||||
|
|
||||||
|
// Reply icon settings
|
||||||
|
$reply-icon: "reply";
|
||||||
|
//$reply-icon: "comment"; // blooming
|
||||||
|
|
||||||
|
|
||||||
|
// Material Design Icon settings
|
||||||
|
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
|
||||||
|
@font-face {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
src:
|
||||||
|
local("Material Icons"),
|
||||||
|
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
|
||||||
|
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
|
||||||
|
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
|
||||||
|
}
|
||||||
45
styles/material-light/layout/material-v1.scss
Normal file
45
styles/material-light/layout/material-v1.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/mixins';
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation bar radius
|
||||||
|
$nav-bar-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar radius
|
||||||
|
$search-bar-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Bar radius settings
|
||||||
|
$bar-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Button radius settings
|
||||||
|
$button-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Card radius settings
|
||||||
|
$card-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Dialog radius settings
|
||||||
|
$dialog-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Menu radius settings
|
||||||
|
$menu-radius: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation drawer item settings
|
||||||
|
$nav-drawer-item-radius: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// Avater cropping settings
|
||||||
|
$avater-radius: 50%; // Rounded cropping
|
||||||
|
//$avater-radius: 2px // Material v1 square
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
60
styles/material-light/layout/material-v2.scss
Normal file
60
styles/material-light/layout/material-v2.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/mixins';
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation bar radius
|
||||||
|
$nav-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar radius
|
||||||
|
$search-bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Bar radius settings
|
||||||
|
$bar-radius: 0;
|
||||||
|
//$bar-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Button radius settings
|
||||||
|
$button-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Card radius settings
|
||||||
|
$card-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Dialog radius settings
|
||||||
|
$dialog-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Menu radius settings
|
||||||
|
$menu-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation drawer item settings
|
||||||
|
$nav-drawer-item-radius: 8px; // corner rounded
|
||||||
|
//$nav-drawer-item-radius: 32px; // full rounded
|
||||||
|
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
|
||||||
|
|
||||||
|
|
||||||
|
// Avater cropping settings
|
||||||
|
$avater-radius: 50%; // Rounded cropping
|
||||||
|
//$avater-radius: 8px // Material v2 square
|
||||||
|
|
||||||
|
|
||||||
|
// Chip settings
|
||||||
|
// If you want to use contained-chip, please comment out below.
|
||||||
|
.reactions-bar__item {
|
||||||
|
background: $outlined-chip-color !important;
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
|
||||||
|
&.active { background-color: $outlined-chip-selected-color !important }
|
||||||
|
|
||||||
|
&:hover { background: $outlined-chip-hover-color !important }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Button shadow
|
||||||
|
// If you want to use material v2 styled non-shadow button, please comment out this section.
|
||||||
|
.button,
|
||||||
|
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
|
||||||
7
styles/material-light/loader.scss
Normal file
7
styles/material-light/loader.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@import 'theme/theme';
|
||||||
|
@import 'theme/material-icons';
|
||||||
|
|
||||||
|
// Plugins
|
||||||
|
//@import 'plugins/cards';
|
||||||
|
//@import 'plugins/dense';
|
||||||
|
//@import 'plugins/plus';
|
||||||
38
styles/material-light/plugins/cards.scss
Normal file
38
styles/material-light/plugins/cards.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import '../theme/mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.column {
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 2px 0 !important;
|
||||||
|
padding: 8px !important;
|
||||||
|
|
||||||
|
> .scrollable { background: $background-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
border-bottom: 0;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&__prepend { padding: 8px 8px 2px 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.account { border-bottom: 0 !important }
|
||||||
|
|
||||||
|
.status__wrapper.status__wrapper,
|
||||||
|
.notification.notification {
|
||||||
|
@include shadow-1dp;
|
||||||
|
margin: 8px 2px;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
|
||||||
|
|
||||||
|
.notification__filter-bar {
|
||||||
|
@include non-overflow-shadow-4dp;
|
||||||
|
}
|
||||||
65
styles/material-light/plugins/dense.scss
Normal file
65
styles/material-light/plugins/dense.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
&__tab { margin: 8px auto 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column { margin: 10px 5px }
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
&__buttons { height: 48px }
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
margin: 8px;
|
||||||
|
padding: 10px 8px;
|
||||||
|
|
||||||
|
.fa { vertical-align: text-top }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading { padding: 8px 16px }
|
||||||
|
|
||||||
|
.column-link { padding: 12px 16px }
|
||||||
|
|
||||||
|
.notification__filter-bar button { padding: 12px 0 }
|
||||||
|
|
||||||
|
.getting-started__footer {
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
p { margin-bottom: 12px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
.compose-form__publish { padding-top: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 8px 8px 8px 66px;
|
||||||
|
|
||||||
|
&__expand { width: 66px }
|
||||||
|
|
||||||
|
&__info { padding-right: 0 }
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
left: 8px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content { padding-top: 2px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status {
|
||||||
|
padding: 14px;
|
||||||
|
|
||||||
|
&__meta { margin-top: 14px }
|
||||||
|
|
||||||
|
&__action-bar { padding: 10px 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-indicator { padding: 8px }
|
||||||
|
|
||||||
|
.button.button--block { margin: 6px 0 }
|
||||||
33
styles/material-light/plugins/plus.scss
Normal file
33
styles/material-light/plugins/plus.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import '../theme/base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
|
||||||
|
|
||||||
|
.status__action-bar-button {
|
||||||
|
background: #eeeeee;
|
||||||
|
width: 28px !important;
|
||||||
|
height: 28px !important;
|
||||||
|
|
||||||
|
.fa { vertical-align: bottom }
|
||||||
|
}
|
||||||
|
|
||||||
|
// favorite icon
|
||||||
|
.star-icon.active,
|
||||||
|
.star-icon.icon-button.active.active,
|
||||||
|
.notification__favourite-icon-wrapper .star-icon,
|
||||||
|
.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
|
||||||
|
|
||||||
|
.notification__favourite-icon-wrapper {
|
||||||
|
left: -34px;
|
||||||
|
|
||||||
|
.star-icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
&.fa-fw::before { vertical-align: middle }
|
||||||
|
}
|
||||||
|
}
|
||||||
8
styles/material-light/theme/_functions.scss
Normal file
8
styles/material-light/theme/_functions.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@use "sass:string";
|
||||||
|
|
||||||
|
|
||||||
|
// convert hex color code to svg styled ascii color code
|
||||||
|
@function svg-color ($color) {
|
||||||
|
@return '%23' + string.slice(inspect($color), 2, 7);
|
||||||
|
}
|
||||||
25
styles/material-light/theme/_mixins.scss
Normal file
25
styles/material-light/theme/_mixins.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
$shadow-color-1: rgba(0,0,0,.2);
|
||||||
|
$shadow-color-2: rgba(0,0,0,.14);
|
||||||
|
$shadow-color-3: rgba(0,0,0,.12);
|
||||||
|
|
||||||
|
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
|
||||||
|
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
|
||||||
|
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
|
||||||
|
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
|
||||||
|
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
|
||||||
|
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
|
||||||
|
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
|
||||||
|
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
|
||||||
|
@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
|
||||||
|
@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
|
||||||
|
@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
|
||||||
|
|
||||||
|
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
|
||||||
153
styles/material-light/theme/account.scss
Normal file
153
styles/material-light/theme/account.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.account {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.account__display-name { color: $primary-text-color }
|
||||||
|
.account__display-name strong { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
border-radius: $avater-radius;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&-overlay {
|
||||||
|
&-base {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background-size: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-overlay { border-radius: $avater-radius }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
&__bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
.avatar .account__avatar { border: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tabs {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
small { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons {
|
||||||
|
.icon-button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__extra {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
&__links {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
padding: 4px 12px;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bio {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.account__header {
|
||||||
|
&__content {
|
||||||
|
color: $primary-text-color;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__fields {
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.verified {
|
||||||
|
border: none;
|
||||||
|
background: $verified-background-color;
|
||||||
|
|
||||||
|
a,
|
||||||
|
&__mark { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&:first-child .verified { border-radius: 0 }
|
||||||
|
|
||||||
|
&:last-child { border-bottom: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $list-background-inactive-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section-headline {
|
||||||
|
background: $text-tab-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 16px 0;
|
||||||
|
color: $text-tab-indicator-color;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $text-tab-indicator-active-color;
|
||||||
|
border-bottom: 4px solid $text-tab-indicator-active-color;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $text-tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $text-tab-indicator-background-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-role {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 17px;
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $contained-chip-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accounts-table__count {
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
small { color: $secondary-text-color }
|
||||||
|
}
|
||||||
34
styles/material-light/theme/base_config.scss
Normal file
34
styles/material-light/theme/base_config.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
|
||||||
|
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
|
||||||
|
|
||||||
|
|
||||||
|
// Color scheme
|
||||||
|
@import '../color/v1-light';
|
||||||
|
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
||||||
|
// @import 'color/v2-light';
|
||||||
|
|
||||||
|
|
||||||
|
// Layout profile
|
||||||
|
@import '../layout/material-v1';
|
||||||
|
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
|
||||||
|
// @import 'layout/material-v2';
|
||||||
|
|
||||||
|
|
||||||
|
// Search bar hover settings
|
||||||
|
// You can enable/disable search bar floating.
|
||||||
|
/*.search__input:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
// Status font size in timeline
|
||||||
|
$status-font-size: 15px; // mastodon default
|
||||||
|
//$status-font-size: 16px; // compatible with material design
|
||||||
|
|
||||||
|
|
||||||
|
// Name font size in timeline status
|
||||||
|
$name-font-size: 15px; // mastodon default
|
||||||
|
//$name-font-size: 16px; // compatible with material design
|
||||||
26
styles/material-light/theme/basics.scss
Normal file
26
styles/material-light/theme/basics.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
|
||||||
|
|
||||||
|
body { background: $background-color }
|
||||||
|
|
||||||
|
// Chrome & Safari scroll bar
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: $scroll-bar-thumb-color;
|
||||||
|
|
||||||
|
&:hover { background: $scroll-bar-thumb-hover-color }
|
||||||
|
&:active { background: $scroll-bar-thumb-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track,
|
||||||
|
::-webkit-scrollbar-track:hover,
|
||||||
|
::-webkit-scrollbar-track:active {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Firefox scroll bar
|
||||||
|
html {
|
||||||
|
scrollbar-color: $scroll-bar-thumb-color transparent;
|
||||||
|
}
|
||||||
97
styles/material-light/theme/button.scss
Normal file
97
styles/material-light/theme/button.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $icon-button-active-color;
|
||||||
|
|
||||||
|
&:hover { color: $icon-button-active-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled { color: $disabled-icon-color }
|
||||||
|
|
||||||
|
&.inverted {
|
||||||
|
color: $icon-button-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.overlayed {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background-color: transparent }
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-icon-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
.button:active,
|
||||||
|
.button:focus {
|
||||||
|
background-color: $contained-button-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background-color: $contained-button-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.logo-button {
|
||||||
|
background: $contained-button-color;
|
||||||
|
margin: 2px;
|
||||||
|
|
||||||
|
&:hover { background: $contained-button-hover-color }
|
||||||
|
|
||||||
|
.button--destructive:hover { background: $contained-button-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button--block { margin: 8px 0 }
|
||||||
|
|
||||||
|
.button.confirmation-modal__cancel-button {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: $text-button-color;
|
||||||
|
|
||||||
|
&:hover { background: $text-button-hover-color }
|
||||||
|
|
||||||
|
&:focus { background: $text-button-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-button__overlay__label {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
color: $media-icon-color;
|
||||||
|
}
|
||||||
474
styles/material-light/theme/columns.scss
Normal file
474
styles/material-light/theme/columns.scss
Normal file
|
|
@ -0,0 +1,474 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include shadow-1dp;
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px 8px;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&>.scrollable { background: $list-background-color }
|
||||||
|
|
||||||
|
&:last-child { box-shadow: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
color: $top-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&>.column-header__back-button { color: $top-bar-icon-color }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.column-header__icon {
|
||||||
|
color: $top-bar-unread-icon-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 16px;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons { height: 56px }
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
margin: 8px 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $top-bar-icon-active-color;
|
||||||
|
background: $icon-background-active-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $top-bar-icon-hover-color;
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-btn {
|
||||||
|
color: $icon-button-color;
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { font-size: 20px }
|
||||||
|
|
||||||
|
span { vertical-align: middle }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__setting-arrows {
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 8px;
|
||||||
|
|
||||||
|
.column-header__setting-btn {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:last-child { padding-right: 8px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include shadow-4dp;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
.announcements { border-top: 1px solid $border-color }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
@include shadow-4dp;
|
||||||
|
|
||||||
|
&::before { background: transparent }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__collapsible {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed { border-top: none }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__back-button {
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
padding: 8px;
|
||||||
|
margin: auto 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
span { display: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-subheading {
|
||||||
|
color: $section-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-link {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $background-color;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: $nav-drawer-item-radius;
|
||||||
|
|
||||||
|
&:hover { background: $list-background-hover-color }
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background: $list-background-active-color }
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 32px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--transparent {
|
||||||
|
&.active {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-active-hover-color }
|
||||||
|
|
||||||
|
.fa { color: $icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
.fa { color: $icon-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { color: $icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-settings {
|
||||||
|
&__section {
|
||||||
|
color: $section-text-color;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row .text-btn { margin-bottom: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-back-button {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
span { visibility: hidden } // hide "back" string
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-inline-form {
|
||||||
|
padding: 16px 0 16px 16px;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
.icon-button { margin: 0 16px }
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-text {
|
||||||
|
color: $primary-text-color;
|
||||||
|
background: $text-field-background-color;
|
||||||
|
border-radius: $bar-radius;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-column-indicator {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.conversation {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px;
|
||||||
|
background: $list-background-inactive-color;
|
||||||
|
|
||||||
|
&--unread {
|
||||||
|
background: $list-background-color;
|
||||||
|
|
||||||
|
.conversation__content__relative-time { color: $info-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__unread { background: $primary-color }
|
||||||
|
|
||||||
|
&__avatar { padding: 0 16px 0 0 }
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&__relative-time {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__names,
|
||||||
|
&__names a {
|
||||||
|
color: $primary-text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// read status in notification column
|
||||||
|
.muted {
|
||||||
|
.status {
|
||||||
|
&__content {
|
||||||
|
color: $read-primary-text-color;
|
||||||
|
|
||||||
|
p { color: $read-primary-text-color }
|
||||||
|
|
||||||
|
a { color: $read-secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__display-name strong { color: $read-primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll {
|
||||||
|
color: $read-primary-text-color;
|
||||||
|
|
||||||
|
&__chart {
|
||||||
|
background: $read-poll-bar-color;
|
||||||
|
|
||||||
|
&.leading { background: $read-poll-bar-leading-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer,
|
||||||
|
&__link { color: $read-ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-gap { border-bottom: 1px solid $border-color }
|
||||||
|
|
||||||
|
.load-more {
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.getting-started {
|
||||||
|
background: $background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
background: $background-color;
|
||||||
|
height: auto !important;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: $ui-text-color }
|
||||||
|
|
||||||
|
p a { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__trends {
|
||||||
|
background: $background-color;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: $section-text-color;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.trends {
|
||||||
|
&__header {
|
||||||
|
color: $section-text-color;
|
||||||
|
background: transparent;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 16px;
|
||||||
|
border-bottom: none;
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
a { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__current {
|
||||||
|
padding-right: 16px;
|
||||||
|
margin-left: 4px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sparkline path {
|
||||||
|
stroke: $primary-color;
|
||||||
|
fill: $primary-color;
|
||||||
|
fill-opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-toggle {
|
||||||
|
&__label {
|
||||||
|
color: $ui-text-color;
|
||||||
|
margin: 8px 8px 8px 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcements {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&__container { color: $primary-text-color }
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&__unread { background: $badge-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 }
|
||||||
|
|
||||||
|
.reactions-bar {
|
||||||
|
.emoji-button {
|
||||||
|
color: $icon-button-color;
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
&:hover { color: $icon-button-hover-color }
|
||||||
|
|
||||||
|
&:active { color: $icon-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
background: $contained-chip-color;
|
||||||
|
border-radius: 17px;
|
||||||
|
margin: 2px 4px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: $contained-chip-selected-color;
|
||||||
|
.reactions-bar__item__count { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__emoji {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
margin: 4px 0 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__count {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 8px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $contained-chip-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
&__filter-bar {
|
||||||
|
background: $tab-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: $tab-background-color;
|
||||||
|
color: $tab-indicator-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span { font-size: 14px }
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $tab-indicator-active-color;
|
||||||
|
border-bottom: 4px solid $tab-indicator-active-color;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&:after { border: none }
|
||||||
|
|
||||||
|
&:focus { background: $tab-indicator-background-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background: $tab-indicator-background-hover-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__message {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
margin: 0 16px 0 70px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__display-name:hover { color: inherit }
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-favourite .status.status-direct {
|
||||||
|
.icon-button.disabled { color: $disabled-icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.relationship-tag {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $relationship-tag-color;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-list__list a { color: $secondary-text-color }
|
||||||
534
styles/material-light/theme/components.scss
Normal file
534
styles/material-light/theme/components.scss
Normal file
|
|
@ -0,0 +1,534 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.drawer {
|
||||||
|
&__header {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: $top-bar-color;
|
||||||
|
border-radius: $nav-bar-radius;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
a { transition: none }
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__tab {
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 10px auto 10px;
|
||||||
|
padding: 8px;
|
||||||
|
flex: none;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-bottom: none;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
&:hover { color: $top-bar-icon-hover-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__pager {
|
||||||
|
@include shadow-1dp;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__inner {
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&.darker {
|
||||||
|
background: $card-background-color;
|
||||||
|
position: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mastodon { background: $card-background-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
&__input {
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
border-radius: $search-bar-radius;
|
||||||
|
padding: 12px 12px 12px 40px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
color: $search-bar-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
.fa {
|
||||||
|
color: $icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
top: 12px;
|
||||||
|
right: unset;
|
||||||
|
left: 12px;
|
||||||
|
height: 6px;
|
||||||
|
transition: none;
|
||||||
|
|
||||||
|
&.active { opacity: 1 }
|
||||||
|
|
||||||
|
&-search {
|
||||||
|
transform: none;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&-times-circle.active {
|
||||||
|
right: 16px;
|
||||||
|
left: unset;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-popout {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
border-radius: 0px $bar-radius;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
margin-top: 0;
|
||||||
|
color: $tips-text-color;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
color: $search-bar-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
&__header {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background-color: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__section {
|
||||||
|
h5 {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 16px;
|
||||||
|
color: $section-text-color;
|
||||||
|
|
||||||
|
.fa { margin-right: 8px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-bar {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
padding: 14px;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: $ui-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation-panel hr {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
&__arrow { visibility: hidden }
|
||||||
|
|
||||||
|
&__item a {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background: $menu-background-hover-color;
|
||||||
|
color: $menu-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__separator {
|
||||||
|
margin: 8px 0;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
.autosuggest-textarea {
|
||||||
|
&__textarea {
|
||||||
|
background: $text-field-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__suggestions {
|
||||||
|
@include shadow-1dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&:hover { background: $menu-background-hover-color }
|
||||||
|
|
||||||
|
&.selected,
|
||||||
|
&:focus,
|
||||||
|
&:active { background: $menu-background-active-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spoiler-input__input {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
|
||||||
|
&::placeholder { color: $tips-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form {
|
||||||
|
&__warning {
|
||||||
|
@include shadow-1dp;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
a { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttons-wrapper {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $tips-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__poll-wrapper {
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
ul { padding: 16px 12px 16px 0 }
|
||||||
|
|
||||||
|
select {
|
||||||
|
color: $ui-text-color;
|
||||||
|
background-color: $background-color;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
&:focus { border-color: $border-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.button-secondary {
|
||||||
|
box-shadow: none;
|
||||||
|
color: $outlined-button-color;
|
||||||
|
border-color: $outlined-button-color;
|
||||||
|
|
||||||
|
&:hover { background-color: $outlined-button-hover-color }
|
||||||
|
|
||||||
|
&:active { background-color: $outlined-button-active-color }
|
||||||
|
|
||||||
|
&:focus { background-color: $outlined-button-color }
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__utilBtns { padding-top: 0 }
|
||||||
|
|
||||||
|
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-reduce-motion .spoiler-input {
|
||||||
|
transition-duration: .2s, .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.poll {
|
||||||
|
&__input {
|
||||||
|
border: 2px solid $control-border-color;
|
||||||
|
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: $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;
|
||||||
|
|
||||||
|
&.leading { background: $poll-bar-leading-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer {
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
color: $ui-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.privacy-dropdown {
|
||||||
|
&.active .privacy-dropdown__value.active {
|
||||||
|
background: $icon-background-hover-color;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.icon-button { color: $icon-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $dialog-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__option {
|
||||||
|
color: $icon-color;
|
||||||
|
padding: 8px 16px;
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
color: $icon-hover-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-active-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $menu-background-hover-color;
|
||||||
|
color: $icon-hover-color;
|
||||||
|
|
||||||
|
.privacy-dropdown__option__content {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.character-counter {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-indicator {
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&__header { margin-bottom: 4px }
|
||||||
|
|
||||||
|
&__display {
|
||||||
|
&-name {
|
||||||
|
color: $primary-text-color;
|
||||||
|
padding-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-avatar { margin-right: 8px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-list {
|
||||||
|
&__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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
71
styles/material-light/theme/control.scss
Normal file
71
styles/material-light/theme/control.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.react-toggle {
|
||||||
|
width: 36px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
&-track {
|
||||||
|
background-color: $toggle-track-color;
|
||||||
|
margin: 4px;
|
||||||
|
width: 36px;
|
||||||
|
height: 16px;
|
||||||
|
|
||||||
|
&-check { visibility: hidden }
|
||||||
|
&-x { visibility: hidden }
|
||||||
|
}
|
||||||
|
|
||||||
|
&-thumb {
|
||||||
|
@include shadow-1dp;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 0;
|
||||||
|
background-color: $toggle-thumb-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--checked {
|
||||||
|
.react-toggle{
|
||||||
|
&-track { background-color: $toggle-track-active-color }
|
||||||
|
|
||||||
|
&-thumb {
|
||||||
|
background-color: $toggle-thumb-active-color;
|
||||||
|
left: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-button {
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
&__input {
|
||||||
|
border: 2px solid $border-color;
|
||||||
|
|
||||||
|
&.checked {
|
||||||
|
border-color: $icon-button-active-color;
|
||||||
|
background: $icon-button-active-color;
|
||||||
|
padding: 3px;
|
||||||
|
background-clip: content-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.compose-form__sensitive-button .checkbox {
|
||||||
|
border: 2px solid $border-color;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: $primary-color;
|
||||||
|
background: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
92
styles/material-light/theme/emoji-picker.scss
Normal file
92
styles/material-light/theme/emoji-picker.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
.emoji-picker-dropdown {
|
||||||
|
&__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__modifiers__menu {
|
||||||
|
@include shadow-8dp;
|
||||||
|
background: $menu-background-color;
|
||||||
|
border-radius: $menu-radius;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart {
|
||||||
|
width: 388px !important;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $menu-text-color;
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
border: 0 solid $border-color;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchors {
|
||||||
|
color: $icon-button-color;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-anchor {
|
||||||
|
padding: 10px 4px;
|
||||||
|
|
||||||
|
&-selected {
|
||||||
|
color: $icon-button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bar {
|
||||||
|
background-color: $tab-indicator-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $icon-button-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-search {
|
||||||
|
background: $menu-background-color;
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline: none;
|
||||||
|
padding: 8px;
|
||||||
|
background: $search-bar-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $search-bar-radius;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include shadow-2dp;
|
||||||
|
background: $search-bar-focus-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-scroll {
|
||||||
|
padding: 0 8px 8px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-category-label span {
|
||||||
|
padding: 4px 6px;
|
||||||
|
background: $menu-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-emoji:hover::before {
|
||||||
|
background-color: $icon-background-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-no-results { color: $secondary-text-color }
|
||||||
|
}
|
||||||
44
styles/material-light/theme/icons.scss
Normal file
44
styles/material-light/theme/icons.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.fa.fa-users.column-link,
|
||||||
|
.fa.fa-globe.column-link,
|
||||||
|
.fa.fa-address-book.column-link,
|
||||||
|
.fa.fa-bullhorn.column-link,
|
||||||
|
.fa.fa-envelope.column-link,
|
||||||
|
.fa.fa-bookmark.column-link,
|
||||||
|
.fa.fa-star.column-link,
|
||||||
|
.fa.fa-list-ul.column-link {
|
||||||
|
&__icon.fa-fw { color: $icon-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fa { vertical-align: sub } // adjust material icon font baseline to other font
|
||||||
|
|
||||||
|
.fa.fa-times,
|
||||||
|
.fa.fa-eraser,
|
||||||
|
.fa.fa-plus { vertical-align: middle } // adjustment exception
|
||||||
|
|
||||||
|
.fa.fa-check { vertical-align: initial }
|
||||||
|
|
||||||
|
.fa.fa-lock { text-transform: none }
|
||||||
|
|
||||||
|
.fa-fw { width: 16px }
|
||||||
|
|
||||||
|
// icon in tab settings
|
||||||
|
.fa.fa-chevron-left.column-back-button__icon.fa-fw,
|
||||||
|
.text-btn.column-header__setting-btn .fa.fa-eraser {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-with-badge__badge {
|
||||||
|
background: $badge-color;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
159
styles/material-light/theme/material-icons.scss
Normal file
159
styles/material-light/theme/material-icons.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config', '../icon_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'functions';
|
||||||
|
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
&.fa-bars,
|
||||||
|
&.fa-navicon,
|
||||||
|
&.fa-reorder,
|
||||||
|
&.fa-globe,
|
||||||
|
&.fa-cog,
|
||||||
|
&.fa-cogs,
|
||||||
|
&.fa-gears,
|
||||||
|
&.fa-sign-out,
|
||||||
|
&.fa-search,
|
||||||
|
&.fa-times,
|
||||||
|
&.fa-times-circle,
|
||||||
|
&.fa-close,
|
||||||
|
&.fa-remove,
|
||||||
|
&.fa-chevron-down,
|
||||||
|
&.fa-ellipsis-v,
|
||||||
|
&.fa-paperclip,
|
||||||
|
&.fa-tasks,
|
||||||
|
&.fa-plus,
|
||||||
|
&.fa-unlock,
|
||||||
|
&.fa-lock,
|
||||||
|
&.fa-envelope,
|
||||||
|
&.fa-home,
|
||||||
|
&.fa-bullhorn,
|
||||||
|
&.fa-sliders,
|
||||||
|
&.fa-chevron-left,
|
||||||
|
&.fa-chevron-right,
|
||||||
|
&.fa-reply,
|
||||||
|
&.fa-reply-all,
|
||||||
|
&.fa-share-alt,
|
||||||
|
&.fa-star,
|
||||||
|
&.fa-bookmark,
|
||||||
|
&.fa-ellipsis-h,
|
||||||
|
&.fa-bell,
|
||||||
|
&.fa-eraser,
|
||||||
|
&.fa-users,
|
||||||
|
&.fa-file-text,
|
||||||
|
&.fa-user-plus,
|
||||||
|
&.fa-address-book,
|
||||||
|
&.fa-address-book-o,
|
||||||
|
&.fa-list,
|
||||||
|
&.fa-list-ul,
|
||||||
|
&.fa-eye,
|
||||||
|
&.fa-eye-slash,
|
||||||
|
&.fa-pencil,
|
||||||
|
&.fa-trash,
|
||||||
|
&.fa-play,
|
||||||
|
&.fa-external-link,
|
||||||
|
&.fa-retweet,
|
||||||
|
&.fa-link,
|
||||||
|
&.fa-pause,
|
||||||
|
&.fa-volume-up,
|
||||||
|
&.fa-volume-off,
|
||||||
|
&.fa-expand,
|
||||||
|
&.fa-download,
|
||||||
|
&.fa-arrows-alt,
|
||||||
|
&.fa-compress,
|
||||||
|
&.fa-user-times,
|
||||||
|
&.fa-check,
|
||||||
|
&.fa-quote-right {
|
||||||
|
font-family: "Material Icons";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
&.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
|
||||||
|
&.fa-globe::before { content: "public" }
|
||||||
|
&.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
|
||||||
|
&.fa-sign-out::before { content: "exit_to_app" }
|
||||||
|
&.fa-search::before { content: "search" }
|
||||||
|
&.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
|
||||||
|
&.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
|
||||||
|
&.fa-paperclip::before { content: "attach_file" }
|
||||||
|
&.fa-tasks::before { content: "poll" }
|
||||||
|
&.fa-plus::before { content: "add" }
|
||||||
|
&.fa-unlock::before { content: "lock_open" }
|
||||||
|
&.fa-lock::before { content: "lock" }
|
||||||
|
&.fa-envelope::before { content: "mail" }
|
||||||
|
&.fa-home::before { content: "home" }
|
||||||
|
&.fa-bullhorn::before { content: "announcement" }
|
||||||
|
&.fa-sliders::before { content: "tune" }
|
||||||
|
&.fa-chevron-left::before { content: "arrow_back" }
|
||||||
|
&.fa-chevron-right::before { content: "arrow_forward" }
|
||||||
|
&.fa-reply::before { content: $reply-icon }
|
||||||
|
&.fa-reply-all::before { content: "reply_all" }
|
||||||
|
&.fa-share-alt::before { content: "share" }
|
||||||
|
&.fa-star::before { content: $favorite-icon }
|
||||||
|
&.fa-bookmark::before { content: "bookmark" }
|
||||||
|
&.fa-ellipsis-h::before { content: "more_horiz" }
|
||||||
|
&.fa-bell::before { content: "notifications" }
|
||||||
|
&.fa-eraser::before { content: "clear_all" }
|
||||||
|
&.fa-users::before { content: "people" }
|
||||||
|
&.fa-file-text::before { content: "web" }
|
||||||
|
&.fa-user-plus::before { content: "person_add" }
|
||||||
|
&.fa-address-book::before { content: "explore" }
|
||||||
|
&.fa-address-book-o::before { content: "explore" }
|
||||||
|
&.fa-list::before { content: "list" }
|
||||||
|
&.fa-list-ul::before { content: "list" }
|
||||||
|
&.fa-eye::before { content: "visibility" }
|
||||||
|
&.fa-eye-slash::before { content : "visibility_off" }
|
||||||
|
&.fa-pencil::before { content: "create" }
|
||||||
|
&.fa-trash::before { content: "delete" }
|
||||||
|
&.fa-play::before { content: "play_arrow" }
|
||||||
|
&.fa-external-link::before { content: "open_in_new" }
|
||||||
|
&.fa-retweet::before { content: "repeat" }
|
||||||
|
&.fa-link::before { content: "link" }
|
||||||
|
&.fa-pause::before { content: "pause" }
|
||||||
|
&.fa-volume-up::before { content: "volume_up" }
|
||||||
|
&.fa-volume-off::before { content: "volume_off" }
|
||||||
|
&.fa-expand::before { content: "web_asset" }
|
||||||
|
&.fa-download::before { content: "file_download" }
|
||||||
|
&.fa-arrows-alt::before { content: "fullscreen" }
|
||||||
|
&.fa-compress::before { content: "fullscreen_exit" }
|
||||||
|
&.fa-user-times::before { content: "delete" }
|
||||||
|
&.fa-check::before { content: "check" }
|
||||||
|
&.fa-quote-right::before { content: "format_quote" }
|
||||||
|
}
|
||||||
|
|
||||||
|
// bookmark icon
|
||||||
|
.status__action-bar-button.icon-button,
|
||||||
|
.bookmark-icon.icon-button {
|
||||||
|
.fa.fa-bookmark::before { content: "bookmark_border" }
|
||||||
|
&.active .fa.fa-bookmark::before { content: "bookmark" }
|
||||||
|
}
|
||||||
|
|
||||||
|
// favorite icon
|
||||||
|
.status__action-bar-button.star-icon.icon-button,
|
||||||
|
.star-icon.icon-button {
|
||||||
|
.fa.fa-star::before { content: $favorite-icon-border }
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&.active.activate {
|
||||||
|
.fa.fa-star::before { content: $favorite-icon }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// favorite icon color
|
||||||
|
.star-icon.active,
|
||||||
|
.star-icon.icon-button.active.active,
|
||||||
|
.notification__favourite-icon-wrapper .star-icon,
|
||||||
|
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
|
||||||
|
|
||||||
|
// boost icon
|
||||||
|
.no-reduce-motion button.icon-button i.fa-retweet {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
transition: none;
|
||||||
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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}
|
||||||
105
styles/material-light/theme/media.scss
Normal file
105
styles/material-light/theme/media.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.media-gallery {
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&__item { border-radius: 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal__close {
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
&.icon-button {
|
||||||
|
background: transparent;
|
||||||
|
color: $media-icon-color;
|
||||||
|
text-align: center !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
width: 48px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
border: 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $media-icon-background-hover-color;
|
||||||
|
color: $media-icon-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-fw { width: 24px }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal {
|
||||||
|
&__nav {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
color: $media-icon-color;
|
||||||
|
height: 48px;
|
||||||
|
width: 48px;
|
||||||
|
margin: auto 16px;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
.fa { width: 32px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
background-color: $media-page-indicator-color;
|
||||||
|
|
||||||
|
&--active { background-color: $media-page-indicator-active-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-player {
|
||||||
|
&__controls {
|
||||||
|
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__seek {
|
||||||
|
&::before {
|
||||||
|
background: rgba(255,255,255,.2);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buffer {
|
||||||
|
background: rgba(255,255,255,.4);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__progress {
|
||||||
|
background: $primary-color;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__handle {
|
||||||
|
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||||
|
background-color: $primary-color;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__volume {
|
||||||
|
&::before {
|
||||||
|
background: rgba(255,255,255,.4);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__current {
|
||||||
|
background: $primary-color;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__handle {
|
||||||
|
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||||
|
background-color: $primary-color;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__time-current { margin-left: 68px }
|
||||||
|
|
||||||
|
&__buttons button { font-size: 20px }
|
||||||
|
}
|
||||||
102
styles/material-light/theme/modal.scss
Normal file
102
styles/material-light/theme/modal.scss
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.confirmation-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $dialog-radius;
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
text-align: left;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
justify-content: flex-end;
|
||||||
|
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 {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
ul li:not(:empty) a {
|
||||||
|
color: $ui-text-color;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $card-background-hover-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu__separator { border-bottom-color: $border-color }
|
||||||
|
|
||||||
|
.status {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-bottom-color: $border-color;
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
left: 12px;
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-modal {
|
||||||
|
background: $card-background-color;
|
||||||
|
color: $ui-text-color;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
|
||||||
|
&__target {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__comment {
|
||||||
|
border-right: none;
|
||||||
|
|
||||||
|
.setting-text-label { color: $ui-text-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed-modal .embed-modal__container {
|
||||||
|
padding: 0 24px 24px 24px;
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: $secondary-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
94
styles/material-light/theme/responsive.scss
Normal file
94
styles/material-light/theme/responsive.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.tabs-bar {
|
||||||
|
background: $top-bar-color;
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
padding: 16px 16px 12px 16px;
|
||||||
|
color: $top-bar-icon-color;
|
||||||
|
border-bottom: 4px solid transparent;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 4px solid $tab-indicator-active-color;
|
||||||
|
color: $tab-indicator-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa { font-size: 20px }
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-left: 8px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
@include shadow-4dp;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs-bar__portal { overflow-y: hidden }
|
||||||
|
|
||||||
|
.floating-action-button {
|
||||||
|
@include shadow-6dp;
|
||||||
|
background: $floating-action-button-color;
|
||||||
|
color: $floating-action-button-icon-color;
|
||||||
|
font-size: 24px;
|
||||||
|
|
||||||
|
&:hover { background: $floating-action-button-hover-color }
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus { background: $floating-action-button-active-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.columns-area--mobile {
|
||||||
|
.column { margin: 0 !important }
|
||||||
|
.search__input { padding: 16px 46px }
|
||||||
|
|
||||||
|
.search__icon {
|
||||||
|
.fa {
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-times-circle.active { left: unset }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
185
styles/material-light/theme/statuses.scss
Normal file
185
styles/material-light/theme/statuses.scss
Normal file
|
|
@ -0,0 +1,185 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 12px 12px 12px 70px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&__expand { width: 70px }
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
font-size: $name-font-size;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__relative-time { color: $info-text-color }
|
||||||
|
|
||||||
|
&__display-name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
left: 12px;
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
font-size: $status-font-size;
|
||||||
|
padding-top: 4px;
|
||||||
|
color: $primary-text-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-text-color;
|
||||||
|
|
||||||
|
&.unhandled-link { color: $link-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status__content__spoiler-link {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&:hover { background: $text-button-hover-color }
|
||||||
|
|
||||||
|
&:focus { background: $text-button-focus-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__spoiler-link {
|
||||||
|
border: 0;
|
||||||
|
color: $text-button-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__read-more-button {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $text-button-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
padding: 4px 6px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $text-button-hover-color;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus { background: $text-button-focus-color }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
&__counter__label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__prepend {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
margin-left: 64px;
|
||||||
|
|
||||||
|
.status__display-name strong { color: $secondary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-direct:not(.read) {
|
||||||
|
background: transparent;
|
||||||
|
border-bottom-color: $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
color: $icon-color;
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&>.fa {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: $primary-text-color;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description { color: $secondary-text-color }
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
&>div {
|
||||||
|
background: $media-icon-background-color;
|
||||||
|
border-radius: $button-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
a {
|
||||||
|
color: $media-icon-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { bottom: auto }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
border-color: $border-color;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
&__content { padding: 12px }
|
||||||
|
&__image { flex: 0 0 64px }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: transparent !important }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover { background-color: $card-background-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detailed status in mobile
|
||||||
|
.status.light {
|
||||||
|
.status {
|
||||||
|
&__display-name { color: $primary-text-color }
|
||||||
|
&__relative-time { color: $info-text-color }
|
||||||
|
&__content { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-name { color: $secondary-text-color }
|
||||||
|
.display-name strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailed-status {
|
||||||
|
background: $card-background-color;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
&__display-name {
|
||||||
|
color: $secondary-text-color;
|
||||||
|
|
||||||
|
strong { color: $primary-text-color }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta {
|
||||||
|
margin-top: 16px;
|
||||||
|
color: $info-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action-bar {
|
||||||
|
background: $card-background-color;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
.icon-button { font-size: 20px !important }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// search user trends
|
||||||
|
.display-name {
|
||||||
|
&__html { color: $primary-text-color !important }
|
||||||
|
&__account { color: $secondary-text-color }
|
||||||
|
}
|
||||||
4
styles/material-light/theme/theme.scss
Normal file
4
styles/material-light/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';
|
||||||
7
styles/material-light/theme/variables.scss
Normal file
7
styles/material-light/theme/variables.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import 'base_config';
|
||||||
|
@import '../custom_config';
|
||||||
|
@import '../custom_color', '../custom_layout';
|
||||||
|
|
||||||
|
|
||||||
|
.link-button { color: $link-text-color }
|
||||||
67
styles/mfc/0-palette.css
Normal file
67
styles/mfc/0-palette.css
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* DEFINE COLOR PALETTE
|
||||||
|
*
|
||||||
|
* Choose the CSS Variables that will be applied to recolor elements.
|
||||||
|
* The current format is to use hex codes, e.g. #00FF00.
|
||||||
|
*
|
||||||
|
* A future refactor to use rgb() instead may allow transparency mods
|
||||||
|
* via using these variables with rgba(). Hex codes currently do not
|
||||||
|
* work with rgba(), so no transparency mods are included except for
|
||||||
|
* those defined in absolute terms (i.e., non-variable colors).
|
||||||
|
*
|
||||||
|
* Foreground Colors:
|
||||||
|
* --bg: | Background for foreground elements.
|
||||||
|
* --text: | A color that stands out against bg.
|
||||||
|
* --textBold: | A color that stands out strongly against bg.
|
||||||
|
* --textMuted: | A color that stands out slightly against bg.
|
||||||
|
*
|
||||||
|
* Background Colors:
|
||||||
|
* --bgPage: | Background for non-foreground elements.
|
||||||
|
* --textPage: | A color that stands out against bgPage.
|
||||||
|
* --textPageBold: | A color that stands out strongly against bgPage.
|
||||||
|
* --textPageMuted: | A color that stands out slightly against bgPage.
|
||||||
|
*
|
||||||
|
* Highlights Colors:
|
||||||
|
* --bgHead: | Background for column headers.
|
||||||
|
* --textHead: | A color that stands out (strongly) against bgHead.
|
||||||
|
* --accent: | An accent color for links and buttons.
|
||||||
|
* --accentText: | A color that stands out (strongly) against accent.
|
||||||
|
*
|
||||||
|
* Palette advisories for choosing colors:
|
||||||
|
* - Consider using an off-white or off-black for text tones,
|
||||||
|
* but not necessary as long as there is sufficient contrast.
|
||||||
|
* - Bold colors are highly recommended to be strong colors,
|
||||||
|
* like pure white or pure black.
|
||||||
|
* - Muted colors can be off-grey or any mid-tone with slight contrast.
|
||||||
|
* - It might be best to base the background palette on a slightly
|
||||||
|
* darker or lighter version of the foreground palette, but
|
||||||
|
* this is no longer strictly necessary; you may use mixed palettes.
|
||||||
|
* It is now possible to use a dark bgPage and light bg, or vice-versa.
|
||||||
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
/* copy and paste the desired palette at the end of this section,
|
||||||
|
* or you can delete the ones you don't want, or comment them out.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Droid/Flamingo:
|
||||||
|
* dark neutral-grey page, with either Android Green or Flamingo accent.
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--bg: #222;
|
||||||
|
--text: #ddd;
|
||||||
|
--textBold: #fff;
|
||||||
|
--textMuted: #777;
|
||||||
|
|
||||||
|
--bgPage: #111;
|
||||||
|
--textPage: var(--text);
|
||||||
|
--textPageBold: var(--textBold);
|
||||||
|
--textPageMuted: var(--textMuted);
|
||||||
|
|
||||||
|
--bgHead: #333;
|
||||||
|
--textHead: var(--textBold);
|
||||||
|
--accent: #a4c639; /* flamingo: #f09 */
|
||||||
|
--accentText: var(--textHead);
|
||||||
|
}
|
||||||
276
styles/mfc/1-foreground.css
Normal file
276
styles/mfc/1-foreground.css
Normal file
|
|
@ -0,0 +1,276 @@
|
||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* FOREGROUND COLOR PALETTE =====================================================
|
||||||
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
/*----------------------
|
||||||
|
base background and text
|
||||||
|
----------------------*/
|
||||||
|
|
||||||
|
/* status columns */
|
||||||
|
.column>.scrollable,
|
||||||
|
.status,
|
||||||
|
.status__content,
|
||||||
|
.detailed-status,
|
||||||
|
.detailed-status__action-bar,
|
||||||
|
.focusable:focus .detailed-status,
|
||||||
|
.focusable:focus .detailed-status__action-bar,
|
||||||
|
.setting-text,
|
||||||
|
.setting-text:active,
|
||||||
|
.setting-text:focus,
|
||||||
|
.status-direct .status__content .status__content__spoiler-link,
|
||||||
|
.column-link,
|
||||||
|
.getting-started a.column-link,
|
||||||
|
.getting-started__trends .trends__item__current,
|
||||||
|
.account__header__content,
|
||||||
|
.account__header__bio .account__header__content,
|
||||||
|
.account--panel,
|
||||||
|
.account__header__bar,
|
||||||
|
.account__header__account-note textarea,
|
||||||
|
.follow_requests-unlocked_explanation,
|
||||||
|
.account-authorize,
|
||||||
|
.trends__header,
|
||||||
|
/* new conversations */
|
||||||
|
.conversation--unread,
|
||||||
|
.conversation__content__names,
|
||||||
|
/* search */
|
||||||
|
.search__input,
|
||||||
|
.search__input:focus,
|
||||||
|
.search-results .account,
|
||||||
|
.trends__item,
|
||||||
|
.trends__item__name a,
|
||||||
|
.trends__item__current,
|
||||||
|
/* compose form */
|
||||||
|
.reply-indicator__content, /* in reply to */
|
||||||
|
.compose-form .spoiler-input__input, /* cw */
|
||||||
|
.compose-form .autosuggest-textarea__textarea, /* post */
|
||||||
|
.compose-form .compose-form__modifiers, /* image uploads */
|
||||||
|
.compose-form .compose-form__buttons-wrapper, /* buttons */
|
||||||
|
.compose-form .autosuggest-textarea__textarea::placeholder,
|
||||||
|
.compose-form .spoiler-input__input::placeholder,
|
||||||
|
/* settings page */
|
||||||
|
.simple_form textarea,
|
||||||
|
.simple_form textarea:active,
|
||||||
|
.simple_form textarea:focus,
|
||||||
|
.simple_form input[type=email],
|
||||||
|
.simple_form input[type=email]:active,
|
||||||
|
.simple_form input[type=email]:focus,
|
||||||
|
.simple_form input[type=number],
|
||||||
|
.simple_form input[type=number]:active,
|
||||||
|
.simple_form input[type=number]:focus,
|
||||||
|
.simple_form input[type=password],
|
||||||
|
.simple_form input[type=password]:active,
|
||||||
|
.simple_form input[type=password]:focus,
|
||||||
|
.simple_form input[type=text],
|
||||||
|
.simple_form input[type=text]:active,
|
||||||
|
.simple_form input[type=text]:focus,
|
||||||
|
.table td,
|
||||||
|
.table th,
|
||||||
|
.table.inline-table>tbody>tr:nth-child(odd)>td,
|
||||||
|
.table.inline-table>tbody>tr:nth-child(odd)>th,
|
||||||
|
.table>tbody>tr:nth-child(odd)>td,
|
||||||
|
.table>tbody>tr:nth-child(odd)>th,
|
||||||
|
.batch-table__row,
|
||||||
|
.batch-table__row:nth-child(2n),
|
||||||
|
.batch-table__row:hover,
|
||||||
|
.column-inline-form label,
|
||||||
|
.dashboard__counters > div > div, .dashboard__counters > div > a,
|
||||||
|
.log-entry,
|
||||||
|
.log-entry__header,
|
||||||
|
/* modals */
|
||||||
|
.actions-modal,
|
||||||
|
.actions-modal .status,
|
||||||
|
.actions-modal ul li:not(:empty) a,
|
||||||
|
.status.light .display-name strong, .status.light .status__content,
|
||||||
|
.boost-modal,
|
||||||
|
.confirmation-modal,
|
||||||
|
.dropdown-menu, .dropdown-menu__item a,
|
||||||
|
.mute-modal,
|
||||||
|
.block-modal .setting-toggle__label, .mute-modal .setting-toggle__label,
|
||||||
|
.report-modal,
|
||||||
|
.report-modal__statuses .status__content p,
|
||||||
|
.report-modal__comment .setting-toggle__label,
|
||||||
|
.list-editor,
|
||||||
|
.list-editor .drawer__inner,
|
||||||
|
.list-editor .drawer__inner.backdrop,
|
||||||
|
.account__moved-note,
|
||||||
|
.introduction__pager,
|
||||||
|
.introduction__text p,
|
||||||
|
.reactions-bar__item,
|
||||||
|
/* profile cards */
|
||||||
|
.card__bar,
|
||||||
|
.card>a:active .card__bar,
|
||||||
|
.card>a:focus .card__bar,
|
||||||
|
.card>a:hover .card__bar,
|
||||||
|
.directory__card__bar,
|
||||||
|
.directory__card__extra,
|
||||||
|
.accounts-table__count,
|
||||||
|
.directory__card__img,
|
||||||
|
/* public pages */
|
||||||
|
#new_user .lead,
|
||||||
|
.landing .hero-widget__footer,
|
||||||
|
.landing .simple_form .user_agreement .label_input > label,
|
||||||
|
.landing .hero-widget h4,
|
||||||
|
.hero-widget__counter,
|
||||||
|
.landing .hero-widget__counter span,
|
||||||
|
.directory__tag > a, .directory__tag > div,
|
||||||
|
.activity-stream .entry,
|
||||||
|
.landing-page #mastodon-timeline,
|
||||||
|
.landing-page #mastodon-timeline p,
|
||||||
|
.landing-page__forms,
|
||||||
|
.landing-page__information,
|
||||||
|
.landing-page li,
|
||||||
|
.landing-page p,
|
||||||
|
.directory__tag h4 small,
|
||||||
|
.directory__tag h4 .fa,
|
||||||
|
.landing-page .features-list .features-list__row .text,
|
||||||
|
.landing-page .features-list .features-list__row .visual .fa,
|
||||||
|
.landing-page__short-description h1,
|
||||||
|
.landing-page .separator-or span,
|
||||||
|
.box-widget,
|
||||||
|
.contact-widget,
|
||||||
|
.landing-page__information.contact-widget,
|
||||||
|
.rich-formatting li,
|
||||||
|
.rich-formatting p,
|
||||||
|
.public-layout .public-account-bio .account__header__content,
|
||||||
|
.public-layout .public-account-bio .roles,
|
||||||
|
.public-layout .public-account-bio__extra,
|
||||||
|
.public-layout .public-account-bio,
|
||||||
|
.public-layout .public-account-header__bar::before,
|
||||||
|
.account__header__fields dt,
|
||||||
|
.account__header__fields dd,
|
||||||
|
.hero-widget__text,
|
||||||
|
.load-more,
|
||||||
|
.button.button-secondary,
|
||||||
|
.simple_form__overlay-area__overlay
|
||||||
|
{
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text)
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------
|
||||||
|
override for bold text
|
||||||
|
--------------------*/
|
||||||
|
|
||||||
|
/* primary elements */
|
||||||
|
.account__display-name strong,
|
||||||
|
.status__display-name strong,
|
||||||
|
.detailed-status__display-name strong,
|
||||||
|
.card__bar .display-name strong,
|
||||||
|
.directory__card__bar .display-name strong,
|
||||||
|
.account__header__tabs__name h1,
|
||||||
|
.account__header__extra__links a strong,
|
||||||
|
.account__action-bar__tab strong, /* profile counters */
|
||||||
|
.conversation__content__names a,
|
||||||
|
.conversation--unread .conversation__content__relative-time,
|
||||||
|
/* settings page*/
|
||||||
|
.dashboard__counters__num, .dashboard__counters__text,
|
||||||
|
.log-entry a,
|
||||||
|
.log-entry .username,
|
||||||
|
.log-entry .target,
|
||||||
|
/* public pages */
|
||||||
|
#new_user .lead strong,
|
||||||
|
.landing-page h3,
|
||||||
|
.landing-page h4,
|
||||||
|
.landing-page em,
|
||||||
|
.landing-page h5,
|
||||||
|
.landing-page h6,
|
||||||
|
.directory__tag h4,
|
||||||
|
.rich-formatting h3,
|
||||||
|
.rich-formatting h4,
|
||||||
|
.public-layout .public-account-header__tabs__tabs .counter .counter-number,
|
||||||
|
.account__header__fields dt
|
||||||
|
{
|
||||||
|
color: var(--textBold)
|
||||||
|
}
|
||||||
|
|
||||||
|
/*---------------------
|
||||||
|
override for muted text
|
||||||
|
---------------------*/
|
||||||
|
|
||||||
|
/* secondary elements */
|
||||||
|
.display-name__account,
|
||||||
|
.account .account__display-name,
|
||||||
|
.card__bar .display-name span,
|
||||||
|
.directory__card__bar .display-name span,
|
||||||
|
.accounts-table__count small,
|
||||||
|
.account__header__tabs__name h1 small,
|
||||||
|
.account__header__extra__links a,
|
||||||
|
.account__header__account-note label,
|
||||||
|
.account__header__account-note textarea::placeholder,
|
||||||
|
.account__header__extra__links,
|
||||||
|
.detailed-status__meta,
|
||||||
|
.status__relative-time,
|
||||||
|
.status__action-bar__counter__label,
|
||||||
|
.status__prepend,
|
||||||
|
.status__prepend .status__display-name strong,
|
||||||
|
.account__moved-note__message,
|
||||||
|
.attachment-list.compact .fa,
|
||||||
|
.icon-button,
|
||||||
|
.icon-button.disabled,
|
||||||
|
.icon-button.active:hover,
|
||||||
|
.account__action-bar__tab>span,
|
||||||
|
.compose-form .icon-button.inverted,
|
||||||
|
.compose-form .text-icon-button,
|
||||||
|
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter,
|
||||||
|
.compose-form .autosuggest-textarea__textarea::placeholder,
|
||||||
|
.compose-form .spoiler-input__input::placeholder,
|
||||||
|
.upload-progress,
|
||||||
|
.search__icon .fa,
|
||||||
|
.search__icon .fa-times-circle,
|
||||||
|
.trends__item__name,
|
||||||
|
.search__input::placeholder,
|
||||||
|
.notification__message,
|
||||||
|
.muted .status__content,
|
||||||
|
.muted .status__content a,
|
||||||
|
.muted .status__content p,
|
||||||
|
.muted .status__display-name strong,
|
||||||
|
.attachment-list__list a,
|
||||||
|
a.table-action-link,
|
||||||
|
.table a.table-action-link,
|
||||||
|
button.table-action-link,
|
||||||
|
.status__wrapper--filtered,
|
||||||
|
.conversation__content__relative-time,
|
||||||
|
/* settings page */
|
||||||
|
.dashboard__counters__label,
|
||||||
|
.log-entry__timestamp,
|
||||||
|
/* public pages */
|
||||||
|
.landing-page__short-description h1 small,
|
||||||
|
.landing-page__short-description h1 small span,
|
||||||
|
.simple_form p.hint.subtle-hint,
|
||||||
|
.public-layout .public-account-bio .roles,
|
||||||
|
.public-layout .public-account-bio__extra,
|
||||||
|
.public-layout .public-account-header__tabs__tabs .counter,
|
||||||
|
.load-more,
|
||||||
|
.account__disclaimer
|
||||||
|
{
|
||||||
|
color: var(--textMuted)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix announcement reactions */
|
||||||
|
.reactions-bar__item__count {color: inherit}
|
||||||
|
|
||||||
|
/* fix for conversations font weight */
|
||||||
|
.conversation--unread .conversation__content__info {font-weight: 400}
|
||||||
|
|
||||||
|
/* fix for border colors */
|
||||||
|
.account--panel,
|
||||||
|
.account__header__bar,
|
||||||
|
.account__header__bio .account__header__fields,
|
||||||
|
.status,
|
||||||
|
.detailed-status__action-bar,
|
||||||
|
.public-layout .public-account-header__tabs__tabs .counter,
|
||||||
|
.account__header__fields,
|
||||||
|
.account__header__fields dl,
|
||||||
|
.account__header__bio .account__header__fields,
|
||||||
|
.account,
|
||||||
|
.directory__card__extra .account__header__content,
|
||||||
|
.account__section-headline, .notification__filter-bar,
|
||||||
|
.actions-modal .dropdown-menu__separator, .actions-modal .status
|
||||||
|
{border-color: var(--textMuted)}
|
||||||
|
|
||||||
|
.account__header__account-note,
|
||||||
|
.announcements-list
|
||||||
|
{border-color: transparent}
|
||||||
|
|
||||||
|
.account__section-headline a.active::after, .account__section-headline button.active::after, .notification__filter-bar a.active::after, .notification__filter-bar button.active::after
|
||||||
|
{border-color: transparent transparent var(--bg)}
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue