From 33ad106a25b6ed75c254b8724aa6172b2fb0bacb Mon Sep 17 00:00:00 2001 From: stux Date: Mon, 23 May 2022 23:03:20 +0200 Subject: [PATCH] Custom themes Added all custom themes from the collection. --- styles/boost.scss | 61 + styles/coffee-dark.scss | 7 + styles/coffee-dark/diff.scss | 77 ++ styles/coffee-dark/variables.scss | 56 + styles/coffee-light.scss | 6 + styles/coffee-light/diff.scss | 776 ++++++++++++ styles/coffee-light/variables.scss | 41 + styles/cute.scss | 17 + styles/cute/overrides.scss | 0 styles/cute/palette.scss | 57 + styles/dark-red.scss | 3 + styles/dark-red/diff.scss | 77 ++ styles/dark-red/variables.scss | 56 + styles/droid.scss | 17 + styles/droid/overrides.scss | 0 styles/droid/palette.scss | 59 + styles/fonts/montserrat.scss | 19 + styles/fonts/roboto-mono.scss | 11 + styles/fonts/roboto.scss | 47 + styles/fullwidth-media.scss | 48 + styles/light-red.scss | 3 + styles/light-red/diff.scss | 776 ++++++++++++ styles/light-red/variables.scss | 41 + styles/mailer.scss | 574 +++++++++ styles/material-dark.scss | 2 + styles/material-dark/color/black.scss | 135 +++ styles/material-dark/color/mastodon-dark.scss | 135 +++ .../material-dark/color/mastodon-light.scss | 134 +++ styles/material-dark/color/plus-classic.scss | 134 +++ styles/material-dark/color/v1-dark.scss | 134 +++ styles/material-dark/color/v1-light.scss | 135 +++ styles/material-dark/color/v2-dark.scss | 135 +++ styles/material-dark/color/v2-light.scss | 135 +++ styles/material-dark/custom_color.scss | 4 + styles/material-dark/custom_config.scss | 2 + styles/material-dark/custom_layout.scss | 4 + styles/material-dark/icon_config.scss | 26 + styles/material-dark/layout/material-v1.scss | 45 + styles/material-dark/layout/material-v2.scss | 60 + styles/material-dark/loader.scss | 7 + styles/material-dark/plugins/cards.scss | 38 + styles/material-dark/plugins/dense.scss | 65 + styles/material-dark/plugins/plus.scss | 33 + styles/material-dark/theme/_functions.scss | 8 + styles/material-dark/theme/_mixins.scss | 25 + styles/material-dark/theme/account.scss | 153 +++ styles/material-dark/theme/base_config.scss | 34 + styles/material-dark/theme/basics.scss | 26 + styles/material-dark/theme/button.scss | 97 ++ styles/material-dark/theme/columns.scss | 474 ++++++++ styles/material-dark/theme/components.scss | 534 +++++++++ styles/material-dark/theme/control.scss | 71 ++ styles/material-dark/theme/emoji-picker.scss | 92 ++ styles/material-dark/theme/icons.scss | 44 + .../material-dark/theme/material-icons.scss | 159 +++ styles/material-dark/theme/media.scss | 105 ++ styles/material-dark/theme/modal.scss | 102 ++ styles/material-dark/theme/responsive.scss | 94 ++ styles/material-dark/theme/statuses.scss | 185 +++ styles/material-dark/theme/theme.scss | 4 + styles/material-dark/theme/variables.scss | 7 + styles/material-light.scss | 2 + styles/material-light/color/black.scss | 135 +++ .../material-light/color/mastodon-dark.scss | 135 +++ .../material-light/color/mastodon-light.scss | 134 +++ styles/material-light/color/plus-classic.scss | 134 +++ styles/material-light/color/v1-dark.scss | 134 +++ styles/material-light/color/v1-light.scss | 135 +++ styles/material-light/color/v2-dark.scss | 135 +++ styles/material-light/color/v2-light.scss | 135 +++ styles/material-light/custom_color.scss | 4 + styles/material-light/custom_config.scss | 2 + styles/material-light/custom_layout.scss | 4 + styles/material-light/icon_config.scss | 26 + styles/material-light/layout/material-v1.scss | 45 + styles/material-light/layout/material-v2.scss | 60 + styles/material-light/loader.scss | 7 + styles/material-light/plugins/cards.scss | 38 + styles/material-light/plugins/dense.scss | 65 + styles/material-light/plugins/plus.scss | 33 + styles/material-light/theme/_functions.scss | 8 + styles/material-light/theme/_mixins.scss | 25 + styles/material-light/theme/account.scss | 153 +++ styles/material-light/theme/base_config.scss | 34 + styles/material-light/theme/basics.scss | 26 + styles/material-light/theme/button.scss | 97 ++ styles/material-light/theme/columns.scss | 474 ++++++++ styles/material-light/theme/components.scss | 534 +++++++++ styles/material-light/theme/control.scss | 71 ++ styles/material-light/theme/emoji-picker.scss | 92 ++ styles/material-light/theme/icons.scss | 44 + .../material-light/theme/material-icons.scss | 159 +++ styles/material-light/theme/media.scss | 105 ++ styles/material-light/theme/modal.scss | 102 ++ styles/material-light/theme/responsive.scss | 94 ++ styles/material-light/theme/statuses.scss | 185 +++ styles/material-light/theme/theme.scss | 4 + styles/material-light/theme/variables.scss | 7 + styles/mfc/0-palette.css | 67 ++ styles/mfc/1-foreground.css | 276 +++++ styles/mfc/2-background.css | 182 +++ styles/mfc/3-highlights.css | 229 ++++ styles/mfc/5-material.css | 72 ++ styles/mfc/6-actions.css | 120 ++ styles/mfc/mastodonFlat.scss | 6 + styles/mfc/variables.scss | 11 + styles/modern-dark.scss | 8 + styles/modern-light.scss | 9 + styles/modern/dark.scss | 56 + styles/modern/light.scss | 41 + styles/modern/style.scss | 1045 +++++++++++++++++ .../mods/deprecated/display_bettersearch.css | 10 + styles/mods/display_breakname.css | 9 + styles/mods/display_browserfont.css | 20 + styles/mods/display_circleavatar.css | 15 + styles/mods/display_collapsedinteractions.css | 37 + styles/mods/display_emojizoom.css | 23 + styles/mods/display_fadedinteractions.css | 9 + styles/mods/display_fullmedia.css | 31 + styles/mods/display_fullname.css | 11 + styles/mods/display_hidefollowcounts.css | 10 + styles/mods/display_hidereplycounts.css | 7 + styles/mods/display_starstohearts.css | 16 + styles/mods/display_transparentmedia.css | 10 + styles/mods/layout_1600px.css | 12 + styles/mods/layout_elefriend.css | 20 + styles/mods/layout_gettingstartedheight.css | 13 + styles/mods/layout_hidedisabled.css | 17 + styles/mods/layout_hidefiltered.css | 9 + styles/mods/layout_mobile_bottombar.css | 29 + styles/mods/layout_singlecolumn.css | 25 + styles/mods/layout_widercolumns.css | 10 + styles/mods/test_colorizedlogo.css | 12 + styles/photon.scss | 82 ++ styles/photon_dark.scss | 24 + styles/photon_green.scss | 24 + styles/photon_light.scss | 29 + styles/photon_purple.scss | 24 + styles/sleepingtown.scss | 888 ++++++++++++++ 139 files changed, 13531 insertions(+) create mode 100644 styles/boost.scss create mode 100644 styles/coffee-dark.scss create mode 100644 styles/coffee-dark/diff.scss create mode 100644 styles/coffee-dark/variables.scss create mode 100644 styles/coffee-light.scss create mode 100644 styles/coffee-light/diff.scss create mode 100644 styles/coffee-light/variables.scss create mode 100644 styles/cute.scss create mode 100644 styles/cute/overrides.scss create mode 100644 styles/cute/palette.scss create mode 100644 styles/dark-red.scss create mode 100644 styles/dark-red/diff.scss create mode 100644 styles/dark-red/variables.scss create mode 100644 styles/droid.scss create mode 100644 styles/droid/overrides.scss create mode 100644 styles/droid/palette.scss create mode 100644 styles/fonts/montserrat.scss create mode 100644 styles/fonts/roboto-mono.scss create mode 100644 styles/fonts/roboto.scss create mode 100644 styles/fullwidth-media.scss create mode 100644 styles/light-red.scss create mode 100644 styles/light-red/diff.scss create mode 100644 styles/light-red/variables.scss create mode 100644 styles/mailer.scss create mode 100644 styles/material-dark.scss create mode 100644 styles/material-dark/color/black.scss create mode 100644 styles/material-dark/color/mastodon-dark.scss create mode 100644 styles/material-dark/color/mastodon-light.scss create mode 100644 styles/material-dark/color/plus-classic.scss create mode 100644 styles/material-dark/color/v1-dark.scss create mode 100644 styles/material-dark/color/v1-light.scss create mode 100644 styles/material-dark/color/v2-dark.scss create mode 100644 styles/material-dark/color/v2-light.scss create mode 100644 styles/material-dark/custom_color.scss create mode 100644 styles/material-dark/custom_config.scss create mode 100644 styles/material-dark/custom_layout.scss create mode 100644 styles/material-dark/icon_config.scss create mode 100644 styles/material-dark/layout/material-v1.scss create mode 100644 styles/material-dark/layout/material-v2.scss create mode 100644 styles/material-dark/loader.scss create mode 100644 styles/material-dark/plugins/cards.scss create mode 100644 styles/material-dark/plugins/dense.scss create mode 100644 styles/material-dark/plugins/plus.scss create mode 100644 styles/material-dark/theme/_functions.scss create mode 100644 styles/material-dark/theme/_mixins.scss create mode 100644 styles/material-dark/theme/account.scss create mode 100644 styles/material-dark/theme/base_config.scss create mode 100644 styles/material-dark/theme/basics.scss create mode 100644 styles/material-dark/theme/button.scss create mode 100644 styles/material-dark/theme/columns.scss create mode 100644 styles/material-dark/theme/components.scss create mode 100644 styles/material-dark/theme/control.scss create mode 100644 styles/material-dark/theme/emoji-picker.scss create mode 100644 styles/material-dark/theme/icons.scss create mode 100644 styles/material-dark/theme/material-icons.scss create mode 100644 styles/material-dark/theme/media.scss create mode 100644 styles/material-dark/theme/modal.scss create mode 100644 styles/material-dark/theme/responsive.scss create mode 100644 styles/material-dark/theme/statuses.scss create mode 100644 styles/material-dark/theme/theme.scss create mode 100644 styles/material-dark/theme/variables.scss create mode 100644 styles/material-light.scss create mode 100644 styles/material-light/color/black.scss create mode 100644 styles/material-light/color/mastodon-dark.scss create mode 100644 styles/material-light/color/mastodon-light.scss create mode 100644 styles/material-light/color/plus-classic.scss create mode 100644 styles/material-light/color/v1-dark.scss create mode 100644 styles/material-light/color/v1-light.scss create mode 100644 styles/material-light/color/v2-dark.scss create mode 100644 styles/material-light/color/v2-light.scss create mode 100644 styles/material-light/custom_color.scss create mode 100644 styles/material-light/custom_config.scss create mode 100644 styles/material-light/custom_layout.scss create mode 100644 styles/material-light/icon_config.scss create mode 100644 styles/material-light/layout/material-v1.scss create mode 100644 styles/material-light/layout/material-v2.scss create mode 100644 styles/material-light/loader.scss create mode 100644 styles/material-light/plugins/cards.scss create mode 100644 styles/material-light/plugins/dense.scss create mode 100644 styles/material-light/plugins/plus.scss create mode 100644 styles/material-light/theme/_functions.scss create mode 100644 styles/material-light/theme/_mixins.scss create mode 100644 styles/material-light/theme/account.scss create mode 100644 styles/material-light/theme/base_config.scss create mode 100644 styles/material-light/theme/basics.scss create mode 100644 styles/material-light/theme/button.scss create mode 100644 styles/material-light/theme/columns.scss create mode 100644 styles/material-light/theme/components.scss create mode 100644 styles/material-light/theme/control.scss create mode 100644 styles/material-light/theme/emoji-picker.scss create mode 100644 styles/material-light/theme/icons.scss create mode 100644 styles/material-light/theme/material-icons.scss create mode 100644 styles/material-light/theme/media.scss create mode 100644 styles/material-light/theme/modal.scss create mode 100644 styles/material-light/theme/responsive.scss create mode 100644 styles/material-light/theme/statuses.scss create mode 100644 styles/material-light/theme/theme.scss create mode 100644 styles/material-light/theme/variables.scss create mode 100644 styles/mfc/0-palette.css create mode 100644 styles/mfc/1-foreground.css create mode 100644 styles/mfc/2-background.css create mode 100644 styles/mfc/3-highlights.css create mode 100644 styles/mfc/5-material.css create mode 100644 styles/mfc/6-actions.css create mode 100644 styles/mfc/mastodonFlat.scss create mode 100644 styles/mfc/variables.scss create mode 100644 styles/modern-dark.scss create mode 100644 styles/modern-light.scss create mode 100644 styles/modern/dark.scss create mode 100644 styles/modern/light.scss create mode 100644 styles/modern/style.scss create mode 100644 styles/mods/deprecated/display_bettersearch.css create mode 100644 styles/mods/display_breakname.css create mode 100644 styles/mods/display_browserfont.css create mode 100644 styles/mods/display_circleavatar.css create mode 100644 styles/mods/display_collapsedinteractions.css create mode 100644 styles/mods/display_emojizoom.css create mode 100644 styles/mods/display_fadedinteractions.css create mode 100644 styles/mods/display_fullmedia.css create mode 100644 styles/mods/display_fullname.css create mode 100644 styles/mods/display_hidefollowcounts.css create mode 100644 styles/mods/display_hidereplycounts.css create mode 100644 styles/mods/display_starstohearts.css create mode 100644 styles/mods/display_transparentmedia.css create mode 100644 styles/mods/layout_1600px.css create mode 100644 styles/mods/layout_elefriend.css create mode 100644 styles/mods/layout_gettingstartedheight.css create mode 100644 styles/mods/layout_hidedisabled.css create mode 100644 styles/mods/layout_hidefiltered.css create mode 100644 styles/mods/layout_mobile_bottombar.css create mode 100644 styles/mods/layout_singlecolumn.css create mode 100644 styles/mods/layout_widercolumns.css create mode 100644 styles/mods/test_colorizedlogo.css create mode 100644 styles/photon.scss create mode 100644 styles/photon_dark.scss create mode 100644 styles/photon_green.scss create mode 100644 styles/photon_light.scss create mode 100644 styles/photon_purple.scss create mode 100644 styles/sleepingtown.scss diff --git a/styles/boost.scss b/styles/boost.scss new file mode 100644 index 0000000..67f9a85 --- /dev/null +++ b/styles/boost.scss @@ -0,0 +1,61 @@ +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + @return '%23' + unquote($color) +} + +@mixin boost-svg($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +@mixin boost-locked-svg($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +@mixin boost-svg-single($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +@mixin boost-locked-svg-single($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +@mixin envelope($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +button.icon-button i.fa-retweet { + @include boost-svg-single($ui-base-lighter-color); +} + +.status-private button.icon-button i.fa-retweet { + @include boost-locked-svg-single($ui-base-lighter-color); +} + +// Disabled variant +button.icon-button.disabled i.fa-retweet { + @include boost-locked-svg-single(lighten($ui-base-color, 13%)); +} + +// Disabled variant for use with DMs +.status-direct button.icon-button.disabled i.fa-retweet { + @include envelope(lighten($ui-base-color, 16%)); + background-position: center center; + background-repeat: no-repeat; +} + +.no-reduce-motion button.icon-button i.fa-retweet { + transition: none; + background-position: 0px 684px; +} + +.no-reduce-motion button.icon-button.active i.fa-retweet { + @include boost-svg($ui-highlight-color); + transition: background-position 0.6s steps(36); + background-size: 22px 684px; + background-position: 0px 0px; +} +.no-reduce-motion .status-private button.icon-button.active i.fa-retweet { + @include boost-locked-svg($ui-highlight-color); +} diff --git a/styles/coffee-dark.scss b/styles/coffee-dark.scss new file mode 100644 index 0000000..60bf96f --- /dev/null +++ b/styles/coffee-dark.scss @@ -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'; diff --git a/styles/coffee-dark/diff.scss b/styles/coffee-dark/diff.scss new file mode 100644 index 0000000..b612b87 --- /dev/null +++ b/styles/coffee-dark/diff.scss @@ -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; +} diff --git a/styles/coffee-dark/variables.scss b/styles/coffee-dark/variables.scss new file mode 100644 index 0000000..1a3d38b --- /dev/null +++ b/styles/coffee-dark/variables.scss @@ -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; diff --git a/styles/coffee-light.scss b/styles/coffee-light.scss new file mode 100644 index 0000000..118721f --- /dev/null +++ b/styles/coffee-light.scss @@ -0,0 +1,6 @@ +@import 'coffee-light/variables'; +@import 'application'; +@import 'coffee-light/diff'; +//@import 'boost'; +//@import 'mods/display_fullname'; +@import 'mods/display_circleavatar'; diff --git a/styles/coffee-light/diff.scss b/styles/coffee-light/diff.scss new file mode 100644 index 0000000..7a846bc --- /dev/null +++ b/styles/coffee-light/diff.scss @@ -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,") 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,') 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; +} diff --git a/styles/coffee-light/variables.scss b/styles/coffee-light/variables.scss new file mode 100644 index 0000000..5faae83 --- /dev/null +++ b/styles/coffee-light/variables.scss @@ -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); +} diff --git a/styles/cute.scss b/styles/cute.scss new file mode 100644 index 0000000..1a3dfb0 --- /dev/null +++ b/styles/cute.scss @@ -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'; diff --git a/styles/cute/overrides.scss b/styles/cute/overrides.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/cute/palette.scss b/styles/cute/palette.scss new file mode 100644 index 0000000..74d2bf0 --- /dev/null +++ b/styles/cute/palette.scss @@ -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); +} diff --git a/styles/dark-red.scss b/styles/dark-red.scss new file mode 100644 index 0000000..60c35c0 --- /dev/null +++ b/styles/dark-red.scss @@ -0,0 +1,3 @@ +@import 'dark-red/variables'; +@import 'application'; +@import 'dark-red/diff'; diff --git a/styles/dark-red/diff.scss b/styles/dark-red/diff.scss new file mode 100644 index 0000000..b612b87 --- /dev/null +++ b/styles/dark-red/diff.scss @@ -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; +} diff --git a/styles/dark-red/variables.scss b/styles/dark-red/variables.scss new file mode 100644 index 0000000..d8456fe --- /dev/null +++ b/styles/dark-red/variables.scss @@ -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; diff --git a/styles/droid.scss b/styles/droid.scss new file mode 100644 index 0000000..846fbd7 --- /dev/null +++ b/styles/droid.scss @@ -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'; diff --git a/styles/droid/overrides.scss b/styles/droid/overrides.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/droid/palette.scss b/styles/droid/palette.scss new file mode 100644 index 0000000..4dffdfd --- /dev/null +++ b/styles/droid/palette.scss @@ -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); +} diff --git a/styles/fonts/montserrat.scss b/styles/fonts/montserrat.scss new file mode 100644 index 0000000..ea7e045 --- /dev/null +++ b/styles/fonts/montserrat.scss @@ -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; +} diff --git a/styles/fonts/roboto-mono.scss b/styles/fonts/roboto-mono.scss new file mode 100644 index 0000000..bd9839a --- /dev/null +++ b/styles/fonts/roboto-mono.scss @@ -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; +} diff --git a/styles/fonts/roboto.scss b/styles/fonts/roboto.scss new file mode 100644 index 0000000..f3a6dcb --- /dev/null +++ b/styles/fonts/roboto.scss @@ -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; +} diff --git a/styles/fullwidth-media.scss b/styles/fullwidth-media.scss new file mode 100644 index 0000000..f6a036d --- /dev/null +++ b/styles/fullwidth-media.scss @@ -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; + } +} diff --git a/styles/light-red.scss b/styles/light-red.scss new file mode 100644 index 0000000..6969822 --- /dev/null +++ b/styles/light-red.scss @@ -0,0 +1,3 @@ +@import 'light-red/variables'; +@import 'application'; +@import 'light-red/diff'; diff --git a/styles/light-red/diff.scss b/styles/light-red/diff.scss new file mode 100644 index 0000000..7a846bc --- /dev/null +++ b/styles/light-red/diff.scss @@ -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,") 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,') 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; +} diff --git a/styles/light-red/variables.scss b/styles/light-red/variables.scss new file mode 100644 index 0000000..3bbef4a --- /dev/null +++ b/styles/light-red/variables.scss @@ -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); +} diff --git a/styles/mailer.scss b/styles/mailer.scss new file mode 100644 index 0000000..18fe522 --- /dev/null +++ b/styles/mailer.scss @@ -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; + } +} diff --git a/styles/material-dark.scss b/styles/material-dark.scss new file mode 100644 index 0000000..a8154f6 --- /dev/null +++ b/styles/material-dark.scss @@ -0,0 +1,2 @@ +@import 'application'; +@import 'material-dark/loader'; diff --git a/styles/material-dark/color/black.scss b/styles/material-dark/color/black.scss new file mode 100644 index 0000000..b299981 --- /dev/null +++ b/styles/material-dark/color/black.scss @@ -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); \ No newline at end of file diff --git a/styles/material-dark/color/mastodon-dark.scss b/styles/material-dark/color/mastodon-dark.scss new file mode 100644 index 0000000..c3c1683 --- /dev/null +++ b/styles/material-dark/color/mastodon-dark.scss @@ -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); \ No newline at end of file diff --git a/styles/material-dark/color/mastodon-light.scss b/styles/material-dark/color/mastodon-light.scss new file mode 100644 index 0000000..54d894f --- /dev/null +++ b/styles/material-dark/color/mastodon-light.scss @@ -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); \ No newline at end of file diff --git a/styles/material-dark/color/plus-classic.scss b/styles/material-dark/color/plus-classic.scss new file mode 100644 index 0000000..60c8370 --- /dev/null +++ b/styles/material-dark/color/plus-classic.scss @@ -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); \ No newline at end of file diff --git a/styles/material-dark/color/v1-dark.scss b/styles/material-dark/color/v1-dark.scss new file mode 100644 index 0000000..77cef82 --- /dev/null +++ b/styles/material-dark/color/v1-dark.scss @@ -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); \ No newline at end of file diff --git a/styles/material-dark/color/v1-light.scss b/styles/material-dark/color/v1-light.scss new file mode 100644 index 0000000..64f8d58 --- /dev/null +++ b/styles/material-dark/color/v1-light.scss @@ -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); \ No newline at end of file diff --git a/styles/material-dark/color/v2-dark.scss b/styles/material-dark/color/v2-dark.scss new file mode 100644 index 0000000..8c575bc --- /dev/null +++ b/styles/material-dark/color/v2-dark.scss @@ -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); \ No newline at end of file diff --git a/styles/material-dark/color/v2-light.scss b/styles/material-dark/color/v2-light.scss new file mode 100644 index 0000000..20336e9 --- /dev/null +++ b/styles/material-dark/color/v2-light.scss @@ -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); \ No newline at end of file diff --git a/styles/material-dark/custom_color.scss b/styles/material-dark/custom_color.scss new file mode 100644 index 0000000..b4ac468 --- /dev/null +++ b/styles/material-dark/custom_color.scss @@ -0,0 +1,4 @@ +@charset "UTF-8"; + + +// Add your customization below \ No newline at end of file diff --git a/styles/material-dark/custom_config.scss b/styles/material-dark/custom_config.scss new file mode 100644 index 0000000..6e82d54 --- /dev/null +++ b/styles/material-dark/custom_config.scss @@ -0,0 +1,2 @@ +@charset "UTF-8"; +@import 'color/v2-dark'; diff --git a/styles/material-dark/custom_layout.scss b/styles/material-dark/custom_layout.scss new file mode 100644 index 0000000..3b4e0e6 --- /dev/null +++ b/styles/material-dark/custom_layout.scss @@ -0,0 +1,4 @@ +@charset "UTF-8"; + + +// Add your customization below diff --git a/styles/material-dark/icon_config.scss b/styles/material-dark/icon_config.scss new file mode 100644 index 0000000..79d5456 --- /dev/null +++ b/styles/material-dark/icon_config.scss @@ -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 +} diff --git a/styles/material-dark/layout/material-v1.scss b/styles/material-dark/layout/material-v1.scss new file mode 100644 index 0000000..825deaf --- /dev/null +++ b/styles/material-dark/layout/material-v1.scss @@ -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 } \ No newline at end of file diff --git a/styles/material-dark/layout/material-v2.scss b/styles/material-dark/layout/material-v2.scss new file mode 100644 index 0000000..853d82b --- /dev/null +++ b/styles/material-dark/layout/material-v2.scss @@ -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 } \ No newline at end of file diff --git a/styles/material-dark/loader.scss b/styles/material-dark/loader.scss new file mode 100644 index 0000000..673066e --- /dev/null +++ b/styles/material-dark/loader.scss @@ -0,0 +1,7 @@ +@import 'theme/theme'; +@import 'theme/material-icons'; + +// Plugins +//@import 'plugins/cards'; +//@import 'plugins/dense'; +//@import 'plugins/plus'; diff --git a/styles/material-dark/plugins/cards.scss b/styles/material-dark/plugins/cards.scss new file mode 100644 index 0000000..c134cbe --- /dev/null +++ b/styles/material-dark/plugins/cards.scss @@ -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; +} \ No newline at end of file diff --git a/styles/material-dark/plugins/dense.scss b/styles/material-dark/plugins/dense.scss new file mode 100644 index 0000000..b3ba408 --- /dev/null +++ b/styles/material-dark/plugins/dense.scss @@ -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 } \ No newline at end of file diff --git a/styles/material-dark/plugins/plus.scss b/styles/material-dark/plugins/plus.scss new file mode 100644 index 0000000..5b22063 --- /dev/null +++ b/styles/material-dark/plugins/plus.scss @@ -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 } + } +} \ No newline at end of file diff --git a/styles/material-dark/theme/_functions.scss b/styles/material-dark/theme/_functions.scss new file mode 100644 index 0000000..0374231 --- /dev/null +++ b/styles/material-dark/theme/_functions.scss @@ -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); +} \ No newline at end of file diff --git a/styles/material-dark/theme/_mixins.scss b/styles/material-dark/theme/_mixins.scss new file mode 100644 index 0000000..5f573e3 --- /dev/null +++ b/styles/material-dark/theme/_mixins.scss @@ -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} diff --git a/styles/material-dark/theme/account.scss b/styles/material-dark/theme/account.scss new file mode 100644 index 0000000..34a8a18 --- /dev/null +++ b/styles/material-dark/theme/account.scss @@ -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 } +} \ No newline at end of file diff --git a/styles/material-dark/theme/base_config.scss b/styles/material-dark/theme/base_config.scss new file mode 100644 index 0000000..73ff009 --- /dev/null +++ b/styles/material-dark/theme/base_config.scss @@ -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 \ No newline at end of file diff --git a/styles/material-dark/theme/basics.scss b/styles/material-dark/theme/basics.scss new file mode 100644 index 0000000..4c122d1 --- /dev/null +++ b/styles/material-dark/theme/basics.scss @@ -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; +} \ No newline at end of file diff --git a/styles/material-dark/theme/button.scss b/styles/material-dark/theme/button.scss new file mode 100644 index 0000000..1231bac --- /dev/null +++ b/styles/material-dark/theme/button.scss @@ -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; +} \ No newline at end of file diff --git a/styles/material-dark/theme/columns.scss b/styles/material-dark/theme/columns.scss new file mode 100644 index 0000000..54effff --- /dev/null +++ b/styles/material-dark/theme/columns.scss @@ -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 } \ No newline at end of file diff --git a/styles/material-dark/theme/components.scss b/styles/material-dark/theme/components.scss new file mode 100644 index 0000000..ae5bfe1 --- /dev/null +++ b/styles/material-dark/theme/components.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/styles/material-dark/theme/control.scss b/styles/material-dark/theme/control.scss new file mode 100644 index 0000000..a205a4c --- /dev/null +++ b/styles/material-dark/theme/control.scss @@ -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; + } +} \ No newline at end of file diff --git a/styles/material-dark/theme/emoji-picker.scss b/styles/material-dark/theme/emoji-picker.scss new file mode 100644 index 0000000..70e2275 --- /dev/null +++ b/styles/material-dark/theme/emoji-picker.scss @@ -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 } +} \ No newline at end of file diff --git a/styles/material-dark/theme/icons.scss b/styles/material-dark/theme/icons.scss new file mode 100644 index 0000000..1367647 --- /dev/null +++ b/styles/material-dark/theme/icons.scss @@ -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; +} \ No newline at end of file diff --git a/styles/material-dark/theme/material-icons.scss b/styles/material-dark/theme/material-icons.scss new file mode 100644 index 0000000..7478562 --- /dev/null +++ b/styles/material-dark/theme/material-icons.scss @@ -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,'); +} + +// dropdown icon +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file diff --git a/styles/material-dark/theme/media.scss b/styles/material-dark/theme/media.scss new file mode 100644 index 0000000..9d02038 --- /dev/null +++ b/styles/material-dark/theme/media.scss @@ -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 } +} \ No newline at end of file diff --git a/styles/material-dark/theme/modal.scss b/styles/material-dark/theme/modal.scss new file mode 100644 index 0000000..2748c87 --- /dev/null +++ b/styles/material-dark/theme/modal.scss @@ -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; + } +} \ No newline at end of file diff --git a/styles/material-dark/theme/responsive.scss b/styles/material-dark/theme/responsive.scss new file mode 100644 index 0000000..9ae3040 --- /dev/null +++ b/styles/material-dark/theme/responsive.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/styles/material-dark/theme/statuses.scss b/styles/material-dark/theme/statuses.scss new file mode 100644 index 0000000..65b5fcc --- /dev/null +++ b/styles/material-dark/theme/statuses.scss @@ -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 } +} \ No newline at end of file diff --git a/styles/material-dark/theme/theme.scss b/styles/material-dark/theme/theme.scss new file mode 100644 index 0000000..f922765 --- /dev/null +++ b/styles/material-dark/theme/theme.scss @@ -0,0 +1,4 @@ +@charset "UTF-8"; + + +@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables'; \ No newline at end of file diff --git a/styles/material-dark/theme/variables.scss b/styles/material-dark/theme/variables.scss new file mode 100644 index 0000000..0b94888 --- /dev/null +++ b/styles/material-dark/theme/variables.scss @@ -0,0 +1,7 @@ +@charset "UTF-8"; +@import 'base_config'; +@import '../custom_config'; +@import '../custom_color', '../custom_layout'; + + +.link-button { color: $link-text-color } \ No newline at end of file diff --git a/styles/material-light.scss b/styles/material-light.scss new file mode 100644 index 0000000..fc45411 --- /dev/null +++ b/styles/material-light.scss @@ -0,0 +1,2 @@ +@import 'application'; +@import 'material-light/loader'; diff --git a/styles/material-light/color/black.scss b/styles/material-light/color/black.scss new file mode 100644 index 0000000..b299981 --- /dev/null +++ b/styles/material-light/color/black.scss @@ -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); \ No newline at end of file diff --git a/styles/material-light/color/mastodon-dark.scss b/styles/material-light/color/mastodon-dark.scss new file mode 100644 index 0000000..c3c1683 --- /dev/null +++ b/styles/material-light/color/mastodon-dark.scss @@ -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); \ No newline at end of file diff --git a/styles/material-light/color/mastodon-light.scss b/styles/material-light/color/mastodon-light.scss new file mode 100644 index 0000000..54d894f --- /dev/null +++ b/styles/material-light/color/mastodon-light.scss @@ -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); \ No newline at end of file diff --git a/styles/material-light/color/plus-classic.scss b/styles/material-light/color/plus-classic.scss new file mode 100644 index 0000000..60c8370 --- /dev/null +++ b/styles/material-light/color/plus-classic.scss @@ -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); \ No newline at end of file diff --git a/styles/material-light/color/v1-dark.scss b/styles/material-light/color/v1-dark.scss new file mode 100644 index 0000000..77cef82 --- /dev/null +++ b/styles/material-light/color/v1-dark.scss @@ -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); \ No newline at end of file diff --git a/styles/material-light/color/v1-light.scss b/styles/material-light/color/v1-light.scss new file mode 100644 index 0000000..64f8d58 --- /dev/null +++ b/styles/material-light/color/v1-light.scss @@ -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); \ No newline at end of file diff --git a/styles/material-light/color/v2-dark.scss b/styles/material-light/color/v2-dark.scss new file mode 100644 index 0000000..8c575bc --- /dev/null +++ b/styles/material-light/color/v2-dark.scss @@ -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); \ No newline at end of file diff --git a/styles/material-light/color/v2-light.scss b/styles/material-light/color/v2-light.scss new file mode 100644 index 0000000..20336e9 --- /dev/null +++ b/styles/material-light/color/v2-light.scss @@ -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); \ No newline at end of file diff --git a/styles/material-light/custom_color.scss b/styles/material-light/custom_color.scss new file mode 100644 index 0000000..b4ac468 --- /dev/null +++ b/styles/material-light/custom_color.scss @@ -0,0 +1,4 @@ +@charset "UTF-8"; + + +// Add your customization below \ No newline at end of file diff --git a/styles/material-light/custom_config.scss b/styles/material-light/custom_config.scss new file mode 100644 index 0000000..7e28b95 --- /dev/null +++ b/styles/material-light/custom_config.scss @@ -0,0 +1,2 @@ +@charset "UTF-8"; +@import 'color/v1-light'; diff --git a/styles/material-light/custom_layout.scss b/styles/material-light/custom_layout.scss new file mode 100644 index 0000000..3b4e0e6 --- /dev/null +++ b/styles/material-light/custom_layout.scss @@ -0,0 +1,4 @@ +@charset "UTF-8"; + + +// Add your customization below diff --git a/styles/material-light/icon_config.scss b/styles/material-light/icon_config.scss new file mode 100644 index 0000000..79d5456 --- /dev/null +++ b/styles/material-light/icon_config.scss @@ -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 +} diff --git a/styles/material-light/layout/material-v1.scss b/styles/material-light/layout/material-v1.scss new file mode 100644 index 0000000..825deaf --- /dev/null +++ b/styles/material-light/layout/material-v1.scss @@ -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 } \ No newline at end of file diff --git a/styles/material-light/layout/material-v2.scss b/styles/material-light/layout/material-v2.scss new file mode 100644 index 0000000..853d82b --- /dev/null +++ b/styles/material-light/layout/material-v2.scss @@ -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 } \ No newline at end of file diff --git a/styles/material-light/loader.scss b/styles/material-light/loader.scss new file mode 100644 index 0000000..673066e --- /dev/null +++ b/styles/material-light/loader.scss @@ -0,0 +1,7 @@ +@import 'theme/theme'; +@import 'theme/material-icons'; + +// Plugins +//@import 'plugins/cards'; +//@import 'plugins/dense'; +//@import 'plugins/plus'; diff --git a/styles/material-light/plugins/cards.scss b/styles/material-light/plugins/cards.scss new file mode 100644 index 0000000..c134cbe --- /dev/null +++ b/styles/material-light/plugins/cards.scss @@ -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; +} \ No newline at end of file diff --git a/styles/material-light/plugins/dense.scss b/styles/material-light/plugins/dense.scss new file mode 100644 index 0000000..b3ba408 --- /dev/null +++ b/styles/material-light/plugins/dense.scss @@ -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 } \ No newline at end of file diff --git a/styles/material-light/plugins/plus.scss b/styles/material-light/plugins/plus.scss new file mode 100644 index 0000000..5b22063 --- /dev/null +++ b/styles/material-light/plugins/plus.scss @@ -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 } + } +} \ No newline at end of file diff --git a/styles/material-light/theme/_functions.scss b/styles/material-light/theme/_functions.scss new file mode 100644 index 0000000..0374231 --- /dev/null +++ b/styles/material-light/theme/_functions.scss @@ -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); +} \ No newline at end of file diff --git a/styles/material-light/theme/_mixins.scss b/styles/material-light/theme/_mixins.scss new file mode 100644 index 0000000..5f573e3 --- /dev/null +++ b/styles/material-light/theme/_mixins.scss @@ -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} diff --git a/styles/material-light/theme/account.scss b/styles/material-light/theme/account.scss new file mode 100644 index 0000000..34a8a18 --- /dev/null +++ b/styles/material-light/theme/account.scss @@ -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 } +} \ No newline at end of file diff --git a/styles/material-light/theme/base_config.scss b/styles/material-light/theme/base_config.scss new file mode 100644 index 0000000..73ff009 --- /dev/null +++ b/styles/material-light/theme/base_config.scss @@ -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 \ No newline at end of file diff --git a/styles/material-light/theme/basics.scss b/styles/material-light/theme/basics.scss new file mode 100644 index 0000000..4c122d1 --- /dev/null +++ b/styles/material-light/theme/basics.scss @@ -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; +} \ No newline at end of file diff --git a/styles/material-light/theme/button.scss b/styles/material-light/theme/button.scss new file mode 100644 index 0000000..1231bac --- /dev/null +++ b/styles/material-light/theme/button.scss @@ -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; +} \ No newline at end of file diff --git a/styles/material-light/theme/columns.scss b/styles/material-light/theme/columns.scss new file mode 100644 index 0000000..54effff --- /dev/null +++ b/styles/material-light/theme/columns.scss @@ -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 } \ No newline at end of file diff --git a/styles/material-light/theme/components.scss b/styles/material-light/theme/components.scss new file mode 100644 index 0000000..ae5bfe1 --- /dev/null +++ b/styles/material-light/theme/components.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/styles/material-light/theme/control.scss b/styles/material-light/theme/control.scss new file mode 100644 index 0000000..a205a4c --- /dev/null +++ b/styles/material-light/theme/control.scss @@ -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; + } +} \ No newline at end of file diff --git a/styles/material-light/theme/emoji-picker.scss b/styles/material-light/theme/emoji-picker.scss new file mode 100644 index 0000000..70e2275 --- /dev/null +++ b/styles/material-light/theme/emoji-picker.scss @@ -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 } +} \ No newline at end of file diff --git a/styles/material-light/theme/icons.scss b/styles/material-light/theme/icons.scss new file mode 100644 index 0000000..1367647 --- /dev/null +++ b/styles/material-light/theme/icons.scss @@ -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; +} \ No newline at end of file diff --git a/styles/material-light/theme/material-icons.scss b/styles/material-light/theme/material-icons.scss new file mode 100644 index 0000000..7478562 --- /dev/null +++ b/styles/material-light/theme/material-icons.scss @@ -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,'); +} + +// dropdown icon +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file diff --git a/styles/material-light/theme/media.scss b/styles/material-light/theme/media.scss new file mode 100644 index 0000000..9d02038 --- /dev/null +++ b/styles/material-light/theme/media.scss @@ -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 } +} \ No newline at end of file diff --git a/styles/material-light/theme/modal.scss b/styles/material-light/theme/modal.scss new file mode 100644 index 0000000..2748c87 --- /dev/null +++ b/styles/material-light/theme/modal.scss @@ -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; + } +} \ No newline at end of file diff --git a/styles/material-light/theme/responsive.scss b/styles/material-light/theme/responsive.scss new file mode 100644 index 0000000..9ae3040 --- /dev/null +++ b/styles/material-light/theme/responsive.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/styles/material-light/theme/statuses.scss b/styles/material-light/theme/statuses.scss new file mode 100644 index 0000000..65b5fcc --- /dev/null +++ b/styles/material-light/theme/statuses.scss @@ -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 } +} \ No newline at end of file diff --git a/styles/material-light/theme/theme.scss b/styles/material-light/theme/theme.scss new file mode 100644 index 0000000..f922765 --- /dev/null +++ b/styles/material-light/theme/theme.scss @@ -0,0 +1,4 @@ +@charset "UTF-8"; + + +@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables'; \ No newline at end of file diff --git a/styles/material-light/theme/variables.scss b/styles/material-light/theme/variables.scss new file mode 100644 index 0000000..0b94888 --- /dev/null +++ b/styles/material-light/theme/variables.scss @@ -0,0 +1,7 @@ +@charset "UTF-8"; +@import 'base_config'; +@import '../custom_config'; +@import '../custom_color', '../custom_layout'; + + +.link-button { color: $link-text-color } \ No newline at end of file diff --git a/styles/mfc/0-palette.css b/styles/mfc/0-palette.css new file mode 100644 index 0000000..19fe4d8 --- /dev/null +++ b/styles/mfc/0-palette.css @@ -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); +} diff --git a/styles/mfc/1-foreground.css b/styles/mfc/1-foreground.css new file mode 100644 index 0000000..8220187 --- /dev/null +++ b/styles/mfc/1-foreground.css @@ -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)} diff --git a/styles/mfc/2-background.css b/styles/mfc/2-background.css new file mode 100644 index 0000000..3e1e788 --- /dev/null +++ b/styles/mfc/2-background.css @@ -0,0 +1,182 @@ +/*------------------------------------------------------------------------------ +* BACKGROUND COLOR PALETTE ===================================================== +------------------------------------------------------------------------------*/ + +/*---------------------- +base background and text +----------------------*/ + +/* background and drawer */ +body.app-body, +.ui, +.drawer__tab, +.drawer__inner, +.drawer__inner.darker, +.drawer__inner__mastodon, +.tabs-bar, +.tabs-bar__wrapper, +.getting-started, +.search-results__section h5, +.account__section-headline, + .account__section-headline button, +.notification__filter-bar, + .notification__filter-bar button, +.timeline-hint, +.introduction, +.account__header__image, +.account__header__account-note textarea:focus, +.flex-spacer, .getting-started, .getting-started__wrapper, +/* DMs */ +.status.status-direct, + .status.status-direct:not(.read), + .focusable:focus .status.status-direct, + .status-direct .status__content, + .notification-favourite .status.status-direct, +/* column preferences */ +.column-settings__section, + .column-header__collapsible, + .column-header__collapsible-inner, + .column-header__button.active, + .setting-meta__label, + .setting-toggle__label, +.column-subheading, +.content-wrapper, +.media-spoiler, + .video-player__spoiler, + .video-player__spoiler.active:active, + .video-player__spoiler.active:focus, +.react-toggle-track, +.filter-form, +/* in reply to */ +.reply-indicator, +.reply-indicator__display-name, +.reply-indicator__content, +.reply-indicator__cancel .icon-button.inverted, +.reply-indicator__content .status__content__spoiler-link, +/* cw show more */ +.status__content .status__content__spoiler-link, +.compose__action-bar .icon-button, +/* settings page */ +.admin-wrapper .sidebar-wrapper, + .admin-wrapper .sidebar-wrapper__inner, + .admin-wrapper .sidebar ul a, + .admin-wrapper .sidebar ul a.selected, + .admin-wrapper .sidebar ul ul a, + .admin-wrapper .content h2, + .admin-wrapper .content h6, +/* modals */ +.boost-modal__action-bar, + .confirmation-modal__action-bar, + .mute-modal__action-bar, +.confirmation-modal__action-bar .confirmation-modal__cancel-button, + .confirmation-modal__action-bar .mute-modal__cancel-button, + .mute-modal__action-bar .confirmation-modal__cancel-button, + .mute-modal__action-bar .mute-modal__cancel-button, +.error-column, + .regeneration-indicator, + .empty-column-indicator, +.report-modal__comment .setting-text, +.introduction__text p code, +.list-editor .search__input, +.announcements__item, +/* opengraph previews */ +.status-card__image, +.status-card__content, +.status-card__description, +.button:disabled, +/* public pages */ +body.theme-default, +.button.button-alternative, + .button.button-alternative-2, +.landing-page__call-to-action, +.public-layout .header, +.public-layout .header .nav-link, +.public-layout .header .nav-button, +.nothing-here, +.brand__tagline, +.table-of-contents +{ +background: var(--bgPage); +color: var(--textPage) +} + +/*-------------------- +override for bold text +--------------------*/ + +/* strong elements */ +.navigation-bar strong, +.status-card__title, +.status-direct .display-name strong, +.reply-indicator__display-name strong, +.admin-wrapper .content>p strong, +.simple_form strong, +.regeneration-indicator__label strong, +.account__section-headline a.active, + .account__section-headline button.active, + .notification__filter-bar a.active, + .notification__filter-bar button.active, +/* public pages */ +.information-board__section, + .information-board__section span:last-child, +.endorsements-widget .display-name__html, + .endorsements-widget h4, +.pagination .page, + .pagination .gap, + .pagination .newer, + .pagination .older, + .pagination a +{ +color: var(--textPageBold) +} + +/*--------------------- +override for muted text +---------------------*/ + +/* de-emphasized elements */ +.navigation-bar, +.navigation-panel hr, +.getting-started, + .getting-started p, + .getting-started__footer p, +.column-subheading, +.account__section-headline a, +.status-direct .icon-button, + .status-direct .display-name, + .status-direct .status__relative-time, + .status-direct .status__action-bar__counter__label, +.status-direct.muted .status__content p, + .status-direct.muted .status__content a, + .status-direct.muted .display-name strong, +.notification-favourite .status.status-direct .icon-button.disabled, +.simple_form p.hint, + .simple_form span.hint, + .admin-wrapper .content .muted-hint, + .admin-wrapper .content>p, +.status-card__host, +.button:disabled, +.loading-indicator, +.list-editor .search__input::placeholder, + .list-editor .search__icon .fa, + .list-editor .search__icon .fa-times-circle, +/* settings page */ +body .neutral-hint, .admin-wrapper .content .neutral-hint, +/* public pages */ +.endorsements-widget .display-name__account, +.public-layout .footer h4, + .public-layout .footer ul a, + .public-layout .footer ul li, + .public-layout .footer .grid .column-2 h4 a, + .public-layout .header .nav-button, +/* log in, sign up, forgot passwd */ +.form-footer a, +.lighter .simple_form p.hint.subtle-hint +{ +color: var(--textPageMuted) +} + +/* border color fix */ +.status.status-direct:not(.read), +.table-of-contents li a +{border-color: var(--textPageMuted)} diff --git a/styles/mfc/3-highlights.css b/styles/mfc/3-highlights.css new file mode 100644 index 0000000..5aba7d8 --- /dev/null +++ b/styles/mfc/3-highlights.css @@ -0,0 +1,229 @@ +/*------------------------------------------------------------------------------ +* HIGHLIGHTS COLOR PALETTE ===================================================== +------------------------------------------------------------------------------*/ + +/* scrollbar fix */ +html {scrollbar-color: var(--bg) var(--bgPage)} +::-webkit-scrollbar-thumb {background: var(--bg)} +::-webkit-scrollbar-thumb:hover {background: var(--accent)} +::-webkit-scrollbar-track:hover {background: rgba(0,0,0,0.2)} + +/*------------------ +headers and warnings +------------------*/ + +/* columns view */ + .column-header, + .column-header__button, + .column-header__back-button, + .column-header__button:hover, + .column-header__back-button:hover, + .column-back-button, + .column-header>.column-header__back-button, + .column-header.active .column-header__icon, + .search-results__header, + .keyboard-shortcuts kbd, + .compose-form__warning, + .compose-form .compose-form__warning, + .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track, + .column-link__badge, + .column-link--transparent.active, +/* settings pages */ + .list-editor h4, + .admin-wrapper .content h4, + .admin-wrapper .sidebar ul ul a.selected, + .flash-message, + .flash-message.notice, + .column-inline-form, + .column-inline-form .icon-button, + .simple_form .warning, + .table-form .warning, + .pagination .current, + .account-role, + .batch-table__toolbar +{ + background: var(--bgHead); + color: var(--textHead) +} + +/*-------------- +accented buttons +--------------*/ + +/* primary buttons */ +.directory__tag > a:hover, .directory__tag > a:active, .directory__tag > a:focus, + .button, + .button:active, + .button:focus, + .button:hover, + .icon-button.overlayed:hover, + .floating-action-button, + .simple_form button, + .simple_form button:active, + .simple_form button:focus, + .simple_form button:hover, + .simple_form .button, + .simple_form .button:active, + .simple_form .button:focus, + .simple_form .button:hover, + .simple_form .block-button, + .simple_form .block-button:active, + .simple_form .block-button:focus, + .simple_form .block-button:hover, + .button.button-alternative:hover, + .button.button-alternative-2:hover, + .column-link:hover, + .getting-started a.column-link:hover, + .column-header__button:hover, + .column-header__button.active:hover, + .column-header__back-button:hover, + .column-back-button:hover, + .drawer__header a:hover, + .react-toggle--checked .react-toggle-track, + .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track, + .privacy-dropdown.active .privacy-dropdown__value.active, + .privacy-dropdown__option:hover, + .privacy-dropdown__option.active, + .privacy-dropdown__option.active:hover, + .admin-wrapper .sidebar ul a:hover, + .admin-wrapper .sidebar ul ul a.selected:hover, + .reply-indicator__content .status__content__spoiler-link:hover, + .status__content .status__content__spoiler-link:hover, + .load-more:hover, + .conversation__unread, +/* modals */ + .confirmation-modal__action-bar .confirmation-modal__cancel-button:active, + .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus, + .confirmation-modal__action-bar .confirmation-modal__cancel-button:hover, + .confirmation-modal__action-bar .mute-modal__cancel-button:active, + .confirmation-modal__action-bar .mute-modal__cancel-button:focus, + .confirmation-modal__action-bar .mute-modal__cancel-button:hover, + .dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover, + .mute-modal__action-bar .confirmation-modal__cancel-button:active, + .mute-modal__action-bar .confirmation-modal__cancel-button:focus, + .mute-modal__action-bar .confirmation-modal__cancel-button:hover, + .mute-modal__action-bar .mute-modal__cancel-button:active, + .mute-modal__action-bar .mute-modal__cancel-button:focus, + .mute-modal__action-bar .mute-modal__cancel-button:hover, + .upload-progress__tracker, + .radio-button__input.checked, +/* public pages */ + .public-layout .header .nav-button:hover, + .public-layout .header .brand:active, + .public-layout .header .brand:focus, + .public-layout .header .brand:hover, + .button.button-secondary:hover, +/* settings pages */ + .pagination .page.current:hover, + .introduction__dot.active, + .dashboard__counters > div > a:hover, + .dashboard__counters > div > a:focus, + .dashboard__counters > div > a:active, + .dashboard__counters > div > a:hover .dashboard__counters__label, + .dashboard__counters > div > a:focus .dashboard__counters__label, + .dashboard__counters > div > a:active .dashboard__counters__label, +/* video player ui */ + .video-player__seek__buffer, + .video-player__seek__progress, + .video-player__volume__current, + .video-player__volume__handle, +/* announcements */ + .icon-with-badge__badge, + .announcements__item__unread, + .reactions-bar__item:hover +{ + background: var(--accent); + color: var(--accentText); +} + +/*------------ +accented links +------------*/ + +/* status links */ + .status__content a, + .status__content a.unhandled-link, + .getting-started a, + .getting-started p a, + .getting-started__footer a, + .getting-started__footer p a, + .reply-indicator__content a, + .reply-indicator__content a.unhandled-link, + .reply-indicator__cancel .icon-button.inverted:hover, + .status__content__read-more-button, + .icon-button.active, + .icon-button:focus, + .icon-button:hover, + .search__icon .fa:hover, + .account__header__bio .account__header__fields a, + .notification-follow .account .icon-button:hover, + .notification__message .fa, + .notification__display-name:hover, + .admin-wrapper .content .muted-hint a, + .table a, + a.table-action-link:hover, + button.table-action-link:hover, + .media-spoiler:active, + .media-spoiler:focus, + .media-spoiler:hover, + .video-player__spoiler.active:hover, + .column-header__setting-btn:hover, + .column-inline-form .icon-button:hover, + .empty-column-indicator a, .error-column a, + .timeline-hint a, +/* post options */ + .compose-form .text-icon-button:hover, + .text-icon-button.active, + .drawer__inner .icon-button:hover, + .icon-button.inverted.active.disabled, + .navigation-bar__profile-edit:hover, + .navigation-bar__profile-account:hover, + .account__action-bar-dropdown .icon-button:hover, + .account__section-headline a:hover, + .compose-form .compose-form__warning a, +/* modals */ + .list-editor .account .icon-button:hover, + .list-editor .account .icon-button:active, + .list-editor .account .icon-button:focus, +/* public pages */ + .simple_form .input.boolean label a, + .landing-page__short-description p a, + .landing-page #mastodon-timeline p a, + .simple_form p.hint.subtle-hint a, + .contact-widget__mail a, + .public-layout .footer ul a:hover, + .public-layout .footer .grid .column-2 h4 a:hover, + .public-layout .public-account-bio .account__header__fields a, + .form-footer a:hover, +/* settings pages */ + .pagination a:hover, + .pagination .newer:hover, + .pagination .older:hover, + .filters .filter-subset a.selected, + .simple_form .hint a, +/* mobile elements */ + .tabs-bar__link.active +{ + color: var(--accent) +} + +/* border fix */ +.react-toggle--checked .react-toggle-thumb, +.radio-button__input.checked, +.icon-with-badge__badge, +.filters .filter-subset a.selected, +.introduction__dot, +.public-layout .public-account-header__tabs__tabs .counter.active::after, +.notification.unread::before, .status__wrapper.unread::before +{border-color: var(--accent)} + +/* trends fix */ +.trends__item__sparkline path:first-child {fill: transparent !important} +.trends__item__sparkline path:last-child {stroke: var(--accent) !important} + +/* focus fix */ +.focusable:focus +{ + background: transparent; + border: 2px solid var(--accent); +} diff --git a/styles/mfc/5-material.css b/styles/mfc/5-material.css new file mode 100644 index 0000000..533f8c5 --- /dev/null +++ b/styles/mfc/5-material.css @@ -0,0 +1,72 @@ +/*----------------------- +material design overrides +-----------------------*/ + +/* turn statuses into cards */ +.drawer__inner darker {filter: drop-shadow(0 0 2px black)} +.status, +.conversation, +.account-authorize__wrapper, +.follow_requests-unlocked_explanation +{ + box-shadow: 0px 0px 2px black; + background: var(--bg); + margin: 8px; + border-radius: 2px; + border: 0 +} +.status__wrapper--filtered {border: none} +.detailed-status__wrapper {margin: 8px;} /*might look weird in older versions pre-2.6?*/ + +/* recolors */ +.column>.scrollable, +.landing-page #mastodon-timeline, +.activity-stream .entry + {background: none !important} +.account-timeline__header, +.account, +.conversation + {background: var(--bg)} +.notification .account, +.load-more + {background: var(--bgPage)} +.status__prepend, +.notification__message, +.status__prepend .status__display-name strong, +.keyboard-shortcuts + {color: var(--textPage) !important} +.notification-follow .display-name__html + {color: var(--textPageBold)} +.notification-follow .display-name__account, +.notification-follow .account .icon-button, +.status__wrapper--filtered, +.load-more + {color: var(--textPageMuted)} + +/* borders */ +.account__section-headline, .notification__filter-bar, +.account--panel, .account__header__bar, .account__header__bio .account__header__fields, .status, .detailed-status__action-bar, .account__header__fields dl, .account__header__bio .account__header__fields, .account, .directory__card__extra .account__header__content, .account__section-headline, .notification__filter-bar, +.conversation, +.account__header__fields, +.account__header__account-note, +.public-layout .public-account-header__tabs__tabs .counter + +{border-color: transparent} + +/* triangle tab indicator */ +.account__section-headline a.active:after, +.account__section-headline a.active:before, +.community-timeline__section-headline a.active:after, +.community-timeline__section-headline a.active:before, +.public-timeline__section-headline a.active:after, +.public-timeline__section-headline a.active:before, +.notification__filter-bar button.active::before, +.notification__filter-bar button.active::after +{ + border-color: transparent transparent var(--bgHead) +} + +/* fix rounding on end toots in stream */ +.activity-stream .entry:first-child .status, +.activity-stream .entry:last-child .status +{border-radius: 2px} diff --git a/styles/mfc/6-actions.css b/styles/mfc/6-actions.css new file mode 100644 index 0000000..7197399 --- /dev/null +++ b/styles/mfc/6-actions.css @@ -0,0 +1,120 @@ +/*------------------------------------------------------------------------------ +* RECOLOR STATUS ACTIONS +* +* This tweak gets its own section because it's pretty messy and long. +* +* Replies, follows, faves, dropdown menu, and share can easily be themed, +* but I can't figure out how to make them look good against the palette. +* Manual color selection may be required, if these colors don't fit well. +* +* Recoloring boosts is another nightmare altogether, because of improper +* SVG embedding in the background-image rather than directly in HTML. +* This leads to two options: +* +* 1) attempt to use filter() to manually add sepia tones and hue-shift +* - complicated and imprecise adjustments of filter() +* - cannot use CSS variables in url()s (as in background-image) +* + however, it does preserve the SVG boosting animation +* +* 2) replace the background-image with a mask-image +* + less complicated; override background-image with color +* + can apply CSS variable colors from palette easily +* - requires extremely long rule to add mask-image +* - breaks boosting animation +* +* I have chosen option 2. +* +* EDIT: Option 1 is now better because of the new boost icons +* introduced in 3.2.0 -- there is no longer just one icon. +------------------------------------------------------------------------------*/ + +/* add shadow on hover and active states */ +.status__action-bar .icon-button:hover, + .status__action-bar .icon-button:active, + .status__action-bar .icon-button.active, +.detailed-status__action-bar .icon-button:hover, + .detailed-status__action-bar .icon-button:active, + .detailed-status__action-bar .icon-button.active +{filter: drop-shadow(0px 1px 0px rgba(0,0,0,0.6))} + +/* remove bg color on hover and active states*/ +.icon-button:active, .icon-button:focus, .icon-button:hover +{background-color: transparent} + +/* replies and follows */ +.status__action-bar-button.icon-button:nth-child(1):hover, +.status__action-bar-button.icon-button:nth-child(1):active, +.status__action-bar-button.icon-button:nth-child(1).active, +.status__action-bar-button.icon-button:nth-child(1):focus, +.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:hover, +.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:active, +.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button.active, +.detailed-status__action-bar .detailed-status__button:nth-child(1) .icon-button:focus, +.notification__message .fa.fa-user-plus, +.account .icon-button:active, +.account .icon-button.active, +.account .icon-button:focus, +.account .icon-button:hover +{color: #0bf;} + +/* favourites */ +.status__action-bar-button.icon-button:nth-child(3):hover, +.status__action-bar-button.icon-button:nth-child(3):active, +.status__action-bar-button.icon-button:nth-child(3).active, +.status__action-bar-button.icon-button:nth-child(3):focus, +.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:hover, +.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button:active, +.detailed-status__action-bar .detailed-status__button:nth-child(3) .icon-button.active, + +.notification__favourite-icon-wrapper .star-icon +{color: #f90;} + +/* menu */ +.status__action-bar-dropdown .icon-button:hover, +.status__action-bar-dropdown .icon-button:active, +.status__action-bar-dropdown .icon-button.active, +.status__action-bar-dropdown .icon-button.focus, +.detailed-status__action-bar-dropdown .icon-button:hover, +.detailed-status__action-bar-dropdown .icon-button:active, +.detailed-status__action-bar-dropdown .icon-button.active, +.detailed-status__action-bar-dropdown .icon-button:focus +{color: #90f;} + +/* share */ +.icon-button:hover .fa-share-alt +{color: #f09;} + +/* boosts */ +.notification__message .fa.fa-retweet, +.icon-button:hover .fa-retweet +{color: #0d9;} + +/* recolor boosts (preserve animation, unthemeable default state */ + +button.icon-button:hover i.fa-retweet, +.no-reduce-motion button.icon-button.active i.fa-retweet +{ + filter: sepia(100%) + hue-rotate(110deg) + saturate(700%) + brightness(100%) + drop-shadow(0px 1px 0px rgba(0,0,0,0.6)) +} + + +/* fully recolor boosts (while breaking animation) */ +/* +button.icon-button:hover i.fa-retweet, +button.icon-button.active i.fa-retweet +{background: #0d9 !important;} + +.no-reduce-motion button.icon-button i.fa-retweet, + button.icon-button i.fa-retweet, + button.icon-button:hover i.fa-retweet, + button.icon-button.active i.fa-retweet +{ +background: var(--textMuted); +mask: url("data:image/svg+xml;utf8,"); +-webkit-mask-image: url("data:image/svg+xml;utf8,"); +} +*/ diff --git a/styles/mfc/mastodonFlat.scss b/styles/mfc/mastodonFlat.scss new file mode 100644 index 0000000..47d07e9 --- /dev/null +++ b/styles/mfc/mastodonFlat.scss @@ -0,0 +1,6 @@ +@import '0-palette'; +@import '1-foreground'; +@import '2-background'; +@import '3-highlights'; +@import '5-material'; +@import '6-actions'; diff --git a/styles/mfc/variables.scss b/styles/mfc/variables.scss new file mode 100644 index 0000000..42fbcb4 --- /dev/null +++ b/styles/mfc/variables.scss @@ -0,0 +1,11 @@ +/* define scss variables in palette.scss of subtheme */ +:root { +--bgPage: $bgPage; +--bg: $bg; +--bgHead: $bgHead; +--text: $text; +--textBold: $textBold; +--textMuted: $textMuted; +--textHead: $textHead; +--accent: $accent; +} \ No newline at end of file diff --git a/styles/modern-dark.scss b/styles/modern-dark.scss new file mode 100644 index 0000000..09a5778 --- /dev/null +++ b/styles/modern-dark.scss @@ -0,0 +1,8 @@ +@import 'modern/dark'; +@import 'application'; +@import 'modern/style'; + +.layout-multiple-columns .column { + flex-grow: 1; + max-width: 500px; +} diff --git a/styles/modern-light.scss b/styles/modern-light.scss new file mode 100644 index 0000000..073febc --- /dev/null +++ b/styles/modern-light.scss @@ -0,0 +1,9 @@ +@import 'modern/light'; +@import 'application'; +@import 'modern/style'; +@import 'mastodon-light/diff'; + +.layout-multiple-columns .column { + flex-grow: 1; + max-width: 500px; +} diff --git a/styles/modern/dark.scss b/styles/modern/dark.scss new file mode 100644 index 0000000..1a3d38b --- /dev/null +++ b/styles/modern/dark.scss @@ -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; diff --git a/styles/modern/light.scss b/styles/modern/light.scss new file mode 100644 index 0000000..5faae83 --- /dev/null +++ b/styles/modern/light.scss @@ -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); +} diff --git a/styles/modern/style.scss b/styles/modern/style.scss new file mode 100644 index 0000000..07b07f8 --- /dev/null +++ b/styles/modern/style.scss @@ -0,0 +1,1045 @@ +:root { + --tl-width: 750px; + --radius: 12px; + --radius-round: 24px; + --hover-color: rgba(170,170,170,0.07); + --border-color: rgba(120,120,120,0.2); + --shadow: 0 10px 40px -10px rgba(0,0,0,0.15); + --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4); +} +#mastodon button, +.public-layout button, +#mastodon video, +.public-layout video, +#mastodon input, +.public-layout input, +#mastodon iframe, +.public-layout iframe, +#mastodon .privacy-dropdown__dropdown, +.public-layout .privacy-dropdown__dropdown, +#mastodon .react-toggle-track, +.public-layout .react-toggle-track { + border-radius: var(--radius) !important; +} +#mastodon *, +.public-layout * { + border-color: var(--border-color) !important; + font-display: swap !important; +} +#mastodon .media-gallery__item, +.public-layout .media-gallery__item, +#mastodon .column-link, +.public-layout .column-link, +#mastodon select, +.public-layout select { + transition: transform 0.4s cubic-bezier(0, 0, 0, 3) !important; +} +#mastodon .media-gallery__item:active, +.public-layout .media-gallery__item:active, +#mastodon .column-link:active, +.public-layout .column-link:active, +#mastodon select:active, +.public-layout select:active { + transform: scale(0.99); + transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; +} +#mastodon .react-toggle-track, +.public-layout .react-toggle-track, +#mastodon .button, +.public-layout .button, +#mastodon .icon-button, +.public-layout .icon-button { + transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; +} +#mastodon .react-toggle-track:active, +.public-layout .react-toggle-track:active, +#mastodon .button:active, +.public-layout .button:active, +#mastodon .icon-button:active, +.public-layout .icon-button:active { + transform: scale(0.95); + transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; +} +#mastodon .react-toggle-thumb, +.public-layout .react-toggle-thumb { + pointer-events: none; +} +#mastodon .account__avatar, +.public-layout .account__avatar { + border-radius: 30%; +} +#mastodon .detailed-status__action-bar, +.public-layout .detailed-status__action-bar, +#mastodon .column-header__collapsible-inner, +.public-layout .column-header__collapsible-inner, +#mastodon .compose-form__buttons-wrapper, +.public-layout .compose-form__buttons-wrapper, +#mastodon .audio-player, +.public-layout .audio-player, +#mastodon .box-widget input[type="email"], +.public-layout .box-widget input[type="email"], +#mastodon .box-widget input[type="password"], +.public-layout .box-widget input[type="password"], +#mastodon .box-widget input[type="text"], +.public-layout .box-widget input[type="text"], +#mastodon .box-widget textarea, +.public-layout .box-widget textarea, +#mastodon .compose-form .spoiler-input__input, +.public-layout .compose-form .spoiler-input__input, +#mastodon .compose-form__autosuggest-wrapper, +.public-layout .compose-form__autosuggest-wrapper, +#mastodon .compose-form__poll-wrapper select, +.public-layout .compose-form__poll-wrapper select, +#mastodon .poll__option input[type="text"], +.public-layout .poll__option input[type="text"], +#mastodon .report-dialog-modal__textarea, +.public-layout .report-dialog-modal__textarea, +#mastodon .search__input, +.public-layout .search__input, +#mastodon .setting-text, +.public-layout .setting-text, +#mastodon .statuses-grid .detailed-status, +.public-layout .statuses-grid .detailed-status { + border: 0 !important; +} +#mastodon .columns-area__panels__pane__inner, +.public-layout .columns-area__panels__pane__inner { + margin-top: 30px; +} +#mastodon .compose-panel, +.public-layout .compose-panel { + margin-top: 0; +} +#mastodon .search, +.public-layout .search, +.search-popout { + margin-inline: 5px; + border-radius: var(--radius); +} +#mastodon .search label, +.public-layout .search label { + box-sizing: border-box; +} +#mastodon .search input, +.public-layout .search input { + border-radius: var(--radius-round) !important; + padding-left: 20px; +} +#mastodon .search .search__icon > i, +.public-layout .search .search__icon > i { + right: 15px; +} +#mastodon .compose-form .compose-form__autosuggest-wrapper, +.public-layout .compose-form .compose-form__autosuggest-wrapper, +#mastodon .compose-form .autosuggest-textarea__textarea, +.public-layout .compose-form .autosuggest-textarea__textarea { + border-radius: var(--radius) var(--radius) 0 0 !important; +} +#mastodon .compose-form .compose-form__buttons-wrapper, +.public-layout .compose-form .compose-form__buttons-wrapper { + border-radius: 0 0 var(--radius) var(--radius) !important; +} +#mastodon .getting-started__footer, +.public-layout .getting-started__footer { + opacity: 0.5; + transition: opacity 0.4s; +} +#mastodon .getting-started__footer a, +.public-layout .getting-started__footer a { + text-decoration: none; +} +#mastodon .getting-started__footer > p, +.public-layout .getting-started__footer > p { + font-size: 0; + line-height: 0; + opacity: 0; + transition: font-size 0.2s, line-height 0.2s; + transition-duration: 0.2s; +} +#mastodon .getting-started__footer:hover, +.public-layout .getting-started__footer:hover, +#mastodon .getting-started__footer:focus-within, +.public-layout .getting-started__footer:focus-within { + opacity: 1; +} +#mastodon .getting-started__footer:hover > p, +.public-layout .getting-started__footer:hover > p, +#mastodon .getting-started__footer:focus-within > p, +.public-layout .getting-started__footer:focus-within > p { + font-size: 1em; + line-height: 1.5; + opacity: 1; + transform: translateY(0px); + transition: font-size 0.1s, line-height 0.25s cubic-bezier(0, 0, 0, 1.3), opacity 0.2s 0.1s; +} +#mastodon .columns-area__panels__main, +.public-layout .columns-area__panels__main { + margin: 0 10px; + padding-top: 30px !important; + overflow: visible !important; + transition: max-width 0.2s cubic-bezier(0, 0, 0, 1.1), margin 0.2s cubic-bezier(0, 0, 0, 1.1); +} +@media (min-width: 1320px) { + #mastodon .columns-area__panels__main, + .public-layout .columns-area__panels__main { + max-width: var(--tl-width) !important; + padding: 0 15px; + } +} +#mastodon .columns-area__panels__main > div, +.public-layout .columns-area__panels__main > div { + border-radius: var(--radius); +} +#mastodon .columns-area__panels__main .scrollable, +.public-layout .columns-area__panels__main .scrollable { + padding-bottom: 40vh !important; +} +#mastodon .scrollable, +.public-layout .scrollable, +#mastodon .column-back-button, +.public-layout .column-back-button, +#mastodon .column-header, +.public-layout .column-header { + border: 0; + border-radius: var(--radius); +} +#mastodon .scrollable:not(.scrollable--flex), +.public-layout .scrollable:not(.scrollable--flex), +#mastodon .activity-stream, +.public-layout .activity-stream { + border: 0 !important; + contain: unset !important; +} +#mastodon .scrollable:not(.scrollable--flex):not(.activity-stream), +.public-layout .scrollable:not(.scrollable--flex):not(.activity-stream), +#mastodon .activity-stream:not(.activity-stream), +.public-layout .activity-stream:not(.activity-stream) { + padding: 10px; +} +#mastodon .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable, +.public-layout .scrollable:not(.scrollable--flex) > [tabindex]:first-child > .focusable, +#mastodon .activity-stream > [tabindex]:first-child > .focusable, +.public-layout .activity-stream > [tabindex]:first-child > .focusable { + margin-top: 0; +} +#mastodon .scrollable:not(.scrollable--flex) > div > [tabindex]:last-child .status, +.public-layout .scrollable:not(.scrollable--flex) > div > [tabindex]:last-child .status, +#mastodon .activity-stream > div > [tabindex]:last-child .status, +.public-layout .activity-stream > div > [tabindex]:last-child .status { + border: 0; +} +#mastodon .column, +.public-layout .column, +#mastodon .columns-area, +.public-layout .columns-area { + overflow: visible !important; +} +#mastodon .scrollable--flex .account-timeline__header, +.public-layout .scrollable--flex .account-timeline__header { + margin: 0 !important; +} +#mastodon .account-timeline__header, +.public-layout .account-timeline__header { + margin: -10px; + margin-bottom: 10px; +} +#mastodon .account-timeline__header .account__header, +.public-layout .account-timeline__header .account__header { + overflow: visible !important; +} +#mastodon .account-timeline__header .account__header__info, +.public-layout .account-timeline__header .account__header__info { + z-index: 2; +} +#mastodon .account-timeline__header .account__header__image, +.public-layout .account-timeline__header .account__header__image { + height: 0; + padding-bottom: 35%; + position: sticky; + top: calc(0px - var(--radius)); + border-radius: var(--radius) var(--radius) 0 0; +} +#mastodon .account-timeline__header .account__header__image img, +.public-layout .account-timeline__header .account__header__image img { + position: absolute; +} +#mastodon .account-timeline__header .account__header__bar, +.public-layout .account-timeline__header .account__header__bar { + padding: 10px; + border: 0; + border-radius: var(--radius) var(--radius) 0 0; + margin-top: calc(0px - var(--radius)) !important; +} +#mastodon .account-timeline__header .account__header__tabs__name h1, +.public-layout .account-timeline__header .account__header__tabs__name h1 { + display: flex; + flex-wrap: wrap; +} +#mastodon .account-timeline__header .account__header__tabs__name h1 span, +.public-layout .account-timeline__header .account__header__tabs__name h1 span { + margin-right: 0.4em; +} +#mastodon .account-timeline__header .account__header__bio, +.public-layout .account-timeline__header .account__header__bio { + margin: 0; + margin-top: 10px; +} +#mastodon .account-timeline__header .account__header__bio > div, +.public-layout .account-timeline__header .account__header__bio > div { + padding-inline: 10px !important; +} +#mastodon .account__header__fields, +.public-layout .account__header__fields, +#mastodon .account__header__account-note, +.public-layout .account__header__account-note { + display: flex; + flex-wrap: wrap; + align-items: center; + border: 0; + gap: 10px; +} +.public-account-bio .account__header__fields { + padding: 20px !important; + padding-bottom: 0 !important; +} +#mastodon .account__header__fields dl, +.public-layout .account__header__fields dl, +#mastodon .account__header__account-note dl, +.public-layout .account__header__account-note dl, +#mastodon .account__header__fields.account__header__account-note.account__header__account-note, +.public-layout .account__header__fields.account__header__account-note.account__header__account-note, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note, +.public-layout .account__header__account-note.account__header__account-note.account__header__account-note { + border: 0; + border-radius: var(--radius-round); + overflow: hidden; + background-color: var(--border-color); + padding: 0 !important; +} +#mastodon .account__header__fields dl dt, +.public-layout .account__header__fields dl dt, +#mastodon .account__header__account-note dl dt, +.public-layout .account__header__account-note dl dt, +#mastodon .account__header__fields.account__header__account-note.account__header__account-note dt, +.public-layout .account__header__fields.account__header__account-note.account__header__account-note dt, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt, +.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dt, +#mastodon .account__header__fields dl dd, +.public-layout .account__header__fields dl dd, +#mastodon .account__header__account-note dl dd, +.public-layout .account__header__account-note dl dd, +#mastodon .account__header__fields.account__header__account-note.account__header__account-note dd, +.public-layout .account__header__fields.account__header__account-note.account__header__account-note dd, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd, +.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd { + width: unset; + padding-block: 0.5em; +} +#mastodon .account__header__fields dl dt, +.public-layout .account__header__fields dl dt, +#mastodon .account__header__account-note dl dt, +.public-layout .account__header__account-note dl dt, +#mastodon .account__header__fields.account__header__account-note.account__header__account-note dt, +.public-layout .account__header__fields.account__header__account-note.account__header__account-note dt, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt, +.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dt { + background: none; +} +#mastodon .account__header__fields dl dd, +.public-layout .account__header__fields dl dd, +#mastodon .account__header__account-note dl dd, +.public-layout .account__header__account-note dl dd, +#mastodon .account__header__fields.account__header__account-note.account__header__account-note dd, +.public-layout .account__header__fields.account__header__account-note.account__header__account-note dd, +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd, +.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd { + border: 0; +} +#mastodon .account__header__fields dl dd:not(.verified), +.public-layout .account__header__fields dl dd:not(.verified), +#mastodon .account__header__account-note dl dd:not(.verified), +.public-layout .account__header__account-note dl dd:not(.verified), +#mastodon .account__header__fields.account__header__account-note.account__header__account-note dd:not(.verified), +.public-layout .account__header__fields.account__header__account-note.account__header__account-note dd:not(.verified), +#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd:not(.verified), +.public-layout .account__header__account-note.account__header__account-note.account__header__account-note dd:not(.verified) { + padding-left: 0; +} +#mastodon .account__header__fields.account__header__account-note, +.public-layout .account__header__fields.account__header__account-note, +#mastodon .account__header__account-note.account__header__account-note, +.public-layout .account__header__account-note.account__header__account-note { + margin: 10px; + margin-bottom: 0; + gap: 0; + background: none !important; + border: 1px solid var(--border-color) !important; +} +#mastodon .account__header__fields textarea, +.public-layout .account__header__fields textarea, +#mastodon .account__header__account-note textarea, +.public-layout .account__header__account-note textarea { + width: 0; + flex-grow: 1; + margin: 0 !important; + border-radius: 0; +} +#mastodon .account__header__fields label, +.public-layout .account__header__fields label, +#mastodon .account__header__account-note label, +.public-layout .account__header__account-note label { + margin: 0; + font-weight: 600; + padding-inline: 14px; +} +#mastodon .account__section-headline, +.public-layout .account__section-headline { + background: none; +} +.with-modals #mastodon .account__section-headline, +.with-modals .public-layout .account__section-headline { + border: 0 !important; +} +#mastodon .account__section-headline a span, +.public-layout .account__section-headline a span { + font-weight: 400; +} +#mastodon .account__section-headline a.active span, +.public-layout .account__section-headline a.active span { + font-weight: 700; +} +#mastodon .notification__filter-bar, +.public-layout .notification__filter-bar { + border: 0 !important; + margin-bottom: calc(0px - var(--radius)); + padding-bottom: var(--radius); +} +#mastodon .focusable, +.public-layout .focusable, +#mastodon .entry, +.public-layout .entry { + overflow: clip; + border-radius: var(--radius) !important; + transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s; + animation: fadeUp 0.4s forwards cubic-bezier(0, 1, 1, 1); +} +#mastodon .focusable.entry, +.public-layout .focusable.entry, +#mastodon .entry.entry, +.public-layout .entry.entry { + margin-bottom: 10px; +} +#mastodon .focusable.entry .status, +.public-layout .focusable.entry .status, +#mastodon .entry.entry .status, +.public-layout .entry.entry .status { + border: 0 !important; +} +#mastodon .focusable:hover, +.public-layout .focusable:hover, +#mastodon .entry:hover, +.public-layout .entry:hover { + background-color: var(--hover-color); +} +#mastodon .status__info, +.public-layout .status__info { + margin-top: 5px; +} +#mastodon .status__info .status__avatar, +.public-layout .status__info .status__avatar { + top: 15px; + left: 15px !important; +} +#mastodon .status__content, +.public-layout .status__content { + min-height: 1.4em; + padding-top: 2px; +} +#mastodon .media-gallery, +.public-layout .media-gallery, +#mastodon .video-player, +.public-layout .video-player { + margin-left: -62px; + width: unset; + box-shadow: var(--shadow-low); + border-radius: var(--radius); + margin-block: 15px !important; + animation: scaleIn 0.4s; + max-width: unset !important; + max-height: 80vh !important; +} +#mastodon .detailed-status__wrapper, +.public-layout .detailed-status__wrapper, +#mastodon .detailed-status, +.public-layout .detailed-status { + box-shadow: var(--shadow); +} +#mastodon .detailed-status__wrapper.detailed-status__wrapper, +.public-layout .detailed-status__wrapper.detailed-status__wrapper, +#mastodon .detailed-status.detailed-status__wrapper, +.public-layout .detailed-status.detailed-status__wrapper { + margin-block: 15px; +} +#mastodon .detailed-status__wrapper .media-gallery, +.public-layout .detailed-status__wrapper .media-gallery, +#mastodon .detailed-status .media-gallery, +.public-layout .detailed-status .media-gallery, +#mastodon .detailed-status__wrapper .video-player, +.public-layout .detailed-status__wrapper .video-player, +#mastodon .detailed-status .video-player, +.public-layout .detailed-status .video-player { + margin-left: 0 !important; + max-height: unset !important; +} +#mastodon .status__action-bar, +.public-layout .status__action-bar, +#mastodon .detailed-status__action-bar, +.public-layout .detailed-status__action-bar { + padding-top: 0; +} +#mastodon .status__action-bar .icon-button, +.public-layout .status__action-bar .icon-button, +#mastodon .detailed-status__action-bar .icon-button, +.public-layout .detailed-status__action-bar .icon-button { + display: inline-flex; + align-items: center; + width: unset !important; + padding: 0.3em 0.5em !important; + height: unset !important; + flex: 0 1 auto !important; + min-width: 0; +} +#mastodon .status__action-bar .icon-button::after, +.public-layout .status__action-bar .icon-button::after, +#mastodon .detailed-status__action-bar .icon-button::after, +.public-layout .detailed-status__action-bar .icon-button::after { + content: attr(aria-label); + font-size: 0.7em; + margin-left: 0.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +#mastodon .status__action-bar .status__action-bar-dropdown, +.public-layout .status__action-bar .status__action-bar-dropdown, +#mastodon .detailed-status__action-bar .status__action-bar-dropdown, +.public-layout .detailed-status__action-bar .status__action-bar-dropdown, +#mastodon .status__action-bar .detailed-status__action-bar-dropdown, +.public-layout .status__action-bar .detailed-status__action-bar-dropdown, +#mastodon .detailed-status__action-bar .detailed-status__action-bar-dropdown, +.public-layout .detailed-status__action-bar .detailed-status__action-bar-dropdown, +#mastodon .status__action-bar .detailed-status__button, +.public-layout .status__action-bar .detailed-status__button, +#mastodon .detailed-status__action-bar .detailed-status__button, +.public-layout .detailed-status__action-bar .detailed-status__button { + display: contents; +} +#mastodon .status__action-bar.detailed-status__action-bar, +.public-layout .status__action-bar.detailed-status__action-bar, +#mastodon .detailed-status__action-bar.detailed-status__action-bar, +.public-layout .detailed-status__action-bar.detailed-status__action-bar { + padding-right: 15px !important; + padding-left: 15px !important; +} +#mastodon .status__action-bar.detailed-status__action-bar .icon-button, +.public-layout .status__action-bar.detailed-status__action-bar .icon-button, +#mastodon .detailed-status__action-bar.detailed-status__action-bar .icon-button, +.public-layout .detailed-status__action-bar.detailed-status__action-bar .icon-button { + flex-grow: 1 !important; + justify-content: center; +} +#mastodon .status, +.public-layout .status { + overflow: visible !important; + padding: 15px 15px 15px 78px !important; +} +#mastodon .detailed-status, +.public-layout .detailed-status { + padding: 15px !important; +} +#mastodon .tabs-bar__wrapper, +.public-layout .tabs-bar__wrapper { + transition: margin-left 0.2s cubic-bezier(0, 0, 0, 1.1); +} +@media (min-width: 1191px) { + #mastodon .tabs-bar__wrapper, + .public-layout .tabs-bar__wrapper { + position: fixed; + width: 285px; + margin-left: 600px; + padding-top: 0; + margin-top: 30px; + overflow: clip; + border-radius: var(--radius) var(--radius) !important; + box-shadow: 0 12px 12px -12px rgba(0,0,0,0.1); + } + #mastodon .tabs-bar__wrapper .column-header, + .public-layout .tabs-bar__wrapper .column-header, + #mastodon .tabs-bar__wrapper .column-header__buttons button, + .public-layout .tabs-bar__wrapper .column-header__buttons button { + background: none !important; + } + #mastodon .tabs-bar__wrapper .column-header, + .public-layout .tabs-bar__wrapper .column-header { + font-weight: 600; + } +} +@media (min-width: 895px) and (max-width: 1191px) { + #mastodon .tabs-bar__wrapper, + .public-layout .tabs-bar__wrapper { + padding-top: 0; + } + #mastodon .tabs-bar__wrapper .tabs-bar, + .public-layout .tabs-bar__wrapper .tabs-bar { + margin-bottom: 0; + border: 0 !important; + } + #mastodon .tabs-bar__wrapper #tabs-bar__portal, + .public-layout .tabs-bar__wrapper #tabs-bar__portal { + border-radius: 0 !important; + } + #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header, + .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header, + #mastodon .tabs-bar__wrapper #tabs-bar__portal button, + .public-layout .tabs-bar__wrapper #tabs-bar__portal button { + border-radius: 0 !important; + } + #mastodon .tabs-bar__wrapper ~ .columns-area .scrollable, + .public-layout .tabs-bar__wrapper ~ .columns-area .scrollable { + border-radius: 0 !important; + } +} +@media (min-width: 1191px) and (min-width: 1320px) { + #mastodon .tabs-bar__wrapper, + .public-layout .tabs-bar__wrapper { + margin-left: calc(var(--tl-width) - 5px); + } +} +#mastodon .navigation-panel, +.public-layout .navigation-panel { + padding-top: 50px; + padding-bottom: 20px; + height: calc(100% - 30px); + box-sizing: border-box; +} +#mastodon .column-link, +.public-layout .column-link { + flex-grow: 2 !important; + display: flex !important; + align-items: center !important; + align-content: center; + max-height: 3.3em; + min-height: 2.7em !important; + padding-block: 0; + position: relative; + box-sizing: border-box; +} +#mastodon .column-link .column-link__icon, +.public-layout .column-link .column-link__icon, +.column-header__icon { + margin-right: 1em !important; +} +#mastodon .column-link::before, +.public-layout .column-link::before { + content: "" !important; + position: absolute; + border-radius: 100px !important; + width: unset !important; + height: unset !important; + inset: 0px 0px !important; + opacity: 0 !important; + background-color: rgba(150,150,150,0.1); + transition: opacity 0.2s; +} +#mastodon .column-link:hover:before, +.public-layout .column-link:hover:before, +#mastodon .column-link:focus:before, +.public-layout .column-link:focus:before { + opacity: 1 !important; +} +#mastodon.public-layout .header, +.public-layout.public-layout .header { + border-radius: var(--radius); +} +#mastodon.public-layout .public-account-header, +.public-layout.public-layout .public-account-header { + border-radius: var(--radius); + --border-color: transparent !important; + border: 0 !important; +} +#mastodon.public-layout .public-account-header .public-account-header__bar::before, +.public-layout.public-layout .public-account-header .public-account-header__bar::before { + border: 0; +} +#mastodon.public-layout .grid, +.public-layout.public-layout .grid { + gap: 20px; +} +#mastodon.public-layout .public-account-header + .grid .column-1, +.public-layout.public-layout .public-account-header + .grid .column-1 { + position: sticky; + align-self: flex-end; + bottom: 0; + min-height: calc(100vh - 80px); +} +#mastodon.public-layout .public-account-header + .grid .column-1 > *, +.public-layout.public-layout .public-account-header + .grid .column-1 > * { + border-radius: var(--radius); + overflow: hidden; + border: 0 !important; +} +#mastodon.public-layout .public-account-header + .grid .column-1 a, +.public-layout.public-layout .public-account-header + .grid .column-1 a, +#mastodon.public-layout .public-account-header + .grid .column-1 .hero-widget__text, +.public-layout.public-layout .public-account-header + .grid .column-1 .hero-widget__text { + border: 0 !important; +} +#mastodon.public-layout .box-widget, +.public-layout.public-layout .box-widget, +#mastodon.public-layout .directory__tag > a, +.public-layout.public-layout .directory__tag > a, +#mastodon.public-layout .hero-widget, +.public-layout.public-layout .hero-widget, +#mastodon.public-layout .landing-page__call-to-action, +.public-layout.public-layout .landing-page__call-to-action, +#mastodon.public-layout .table-of-contents, +.public-layout.public-layout .table-of-contents, +#mastodon.public-layout .rules-list, +.public-layout.public-layout .rules-list { + border-radius: var(--radius); + overflow: hidden; +} +#mastodon.public-layout .footer .column-3, +.public-layout.public-layout .footer .column-3, +#mastodon.public-layout .footer .column-4, +.public-layout.public-layout .footer .column-4 { + text-align: right; +} +@media (max-width: 895px) { + #mastodon .columns-area__panels__main, + .public-layout .columns-area__panels__main { + padding: 0 !important; + } + #mastodon .is-composing .columns-area__panels__main, + .public-layout .is-composing .columns-area__panels__main { + padding-bottom: 40px !important; + } + #mastodon .columns-area__panels__main .scrollable, + .public-layout .columns-area__panels__main .scrollable, + #mastodon .columns-area__panels__main .account__header__image, + .public-layout .columns-area__panels__main .account__header__image { + border-radius: 0 !important; + } + #mastodon .tabs-bar__wrapper, + .public-layout .tabs-bar__wrapper { + position: fixed !important; + top: unset !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + display: flex; + flex-direction: column; + box-shadow: none !important; + padding: 0; + background: none; + border-radius: 0 !important; + pointer-events: none; + filter: brightness(0.95); + } + #mastodon .tabs-bar__wrapper > *, + .public-layout .tabs-bar__wrapper > * { + pointer-events: all; + } + #mastodon .tabs-bar__wrapper .tabs-bar, + .public-layout .tabs-bar__wrapper .tabs-bar { + order: 2; + margin: 0; + border: 0; + border-radius: var(--radius-round) var(--radius-round) 0 0; + color: #fff !important; + overflow: visible !important; + padding-inline: 5px; + } + #mastodon .tabs-bar__wrapper .tabs-bar a, + .public-layout .tabs-bar__wrapper .tabs-bar a { + flex-grow: 1 !important; + padding-block: 20px; + position: relative; + border: 0; + background: none !important; + transition: transform 0.4s cubic-bezier(0, 0, 0, 4), filter 0.1s; + } + #mastodon .tabs-bar__wrapper .tabs-bar a > i, + .public-layout .tabs-bar__wrapper .tabs-bar a > i { + font-size: 18px; + filter: opacity(0.7); + transition: transform 0.2s cubic-bezier(0, 0, 0, 1.2); + } + #mastodon .tabs-bar__wrapper .tabs-bar a > i .icon-with-badge__badge, + .public-layout .tabs-bar__wrapper .tabs-bar a > i .icon-with-badge__badge { + font-size: 0.5em; + border-radius: var(--radius-round); + } + #mastodon .tabs-bar__wrapper .tabs-bar a::before, + .public-layout .tabs-bar__wrapper .tabs-bar a::before { + content: ""; + position: absolute; + bottom: -10px; + width: 5px; + height: 10px; + border-radius: 100px; + background-color: currentColor; + left: 50%; + margin-left: -2.5px; + transition: bottom 0.2s cubic-bezier(0, 0, 0, 4), width 0.2s, margin-left 0.2s; + } + #mastodon .tabs-bar__wrapper .tabs-bar a:active, + .public-layout .tabs-bar__wrapper .tabs-bar a:active { + transform: translateY(5px); + transition: transform 1s; + } + #mastodon .tabs-bar__wrapper .tabs-bar a.active, + .public-layout .tabs-bar__wrapper .tabs-bar a.active { + transform: translateY(-2px); + } + #mastodon .tabs-bar__wrapper .tabs-bar a.active i, + .public-layout .tabs-bar__wrapper .tabs-bar a.active i { + filter: none !important; + } + #mastodon .tabs-bar__wrapper .tabs-bar a.active::before, + .public-layout .tabs-bar__wrapper .tabs-bar a.active::before { + bottom: -6px; + width: 10px; + margin-left: -5px; + } + #mastodon .tabs-bar__wrapper #tabs-bar__portal, + .public-layout .tabs-bar__wrapper #tabs-bar__portal { + margin: 10px 20px !important; + width: max-content !important; + box-shadow: var(--shadow) !important; + max-width: calc(100vw - 130px); + } + #mastodon .tabs-bar__wrapper #tabs-bar__portal > button, + .public-layout .tabs-bar__wrapper #tabs-bar__portal > button { + padding-inline: 20px; + } + #mastodon .tabs-bar__wrapper #tabs-bar__portal button, + .public-layout .tabs-bar__wrapper #tabs-bar__portal button { + min-width: 60px; + } + #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible, + .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible { + transition: margin-top 0.2s cubic-bezier(0, 0, 0, 2); + max-width: 100%; + border-radius: var(--radius); + } + #mastodon .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed), + .public-layout .tabs-bar__wrapper #tabs-bar__portal .column-header__collapsible:not(.collapsed) { + width: calc(100vw - 40px); + margin-top: 5px; + } + .floating-action-button { + bottom: 70px; + } + #mastodon .icon-button:after, + .public-layout .icon-button:after { + content: unset !important; + } + #mastodon .status__action-bar, + .public-layout .status__action-bar { + margin-left: -63px; + margin-bottom: -10px; + } + #mastodon .status__action-bar .icon-button, + .public-layout .status__action-bar .icon-button { + flex-grow: 1 !important; + margin: 0 !important; + justify-content: center; + padding: 0.7em !important; + } + #mastodon .modal-root__modal .status.light, + .public-layout .modal-root__modal .status.light { + overflow: hidden !important; + padding-left: 70px !important; + } +} +.layout-multiple-columns #mastodon .columns-area { + overflow: auto hidden !important; +} +.layout-multiple-columns #mastodon .columns-area .column-header, +.layout-multiple-columns #mastodon .columns-area .scrollable, +.layout-multiple-columns #mastodon .columns-area .column-back-button, +.layout-multiple-columns #mastodon .columns-area .account__header__image { + border-radius: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .icon-button:after { + content: unset !important; +} +.layout-multiple-columns #mastodon .columns-area > div { + border: 0 !important; + padding: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area > div:not(:last-child):not(.drawer) { + padding-right: 2px !important; +} +.layout-multiple-columns #mastodon .columns-area > div.column { + flex-grow: 1; + max-width: 600px; +} +.layout-multiple-columns #mastodon .columns-area > div:first-child { + margin-left: auto !important; +} +.layout-multiple-columns #mastodon .columns-area > div:last-child { + margin-right: auto !important; +} +.layout-multiple-columns #mastodon .columns-area .drawer { + padding-inline: 10px !important; + padding-top: 20px !important; +} +.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header { + border-radius: var(--radius-round); + margin-inline: 5px; + overflow: hidden; + border: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a { + border: 0; +} +.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:first-child { + padding-left: 15px !important; +} +.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header a:last-child { + padding-right: 15px !important; +} +.layout-multiple-columns #mastodon .columns-area .drawer__inner:not(.darker), +.layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon { + background-color: transparent; + border: 0 !important; +} +.layout-multiple-columns #mastodon .columns-area .drawer__inner.darker { + border-radius: var(--radius) var(--radius) 0 0; + margin-inline: 5px; + width: calc(100% - 10px); +} +#mastodon .modal-root__container, +.public-layout .modal-root__container { + animation: bounceIn 0.7s; +} +@media (prefers-reduced-motion: no-preference) { +@-moz-keyframes bounceIn { + 0% { + transform: scale(1.1); + opacity: 0; + } + 30% { + transform: scale(0.99); + opacity: 1; + } + 60% { + transform: scale(1.005); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@-webkit-keyframes bounceIn { + 0% { + transform: scale(1.1); + opacity: 0; + } + 30% { + transform: scale(0.99); + opacity: 1; + } + 60% { + transform: scale(1.005); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@-o-keyframes bounceIn { + 0% { + transform: scale(1.1); + opacity: 0; + } + 30% { + transform: scale(0.99); + opacity: 1; + } + 60% { + transform: scale(1.005); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes bounceIn { + 0% { + transform: scale(1.1); + opacity: 0; + } + 30% { + transform: scale(0.99); + opacity: 1; + } + 60% { + transform: scale(1.005); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@-moz-keyframes fadeUp { + from { + transform: translateY(20px); + } +} +@-webkit-keyframes fadeUp { + from { + transform: translateY(20px); + } +} +@-o-keyframes fadeUp { + from { + transform: translateY(20px); + } +} +@keyframes fadeUp { + from { + transform: translateY(20px); + } +} +@-moz-keyframes scaleIn { + from { + transform: scale(0.98); + opacity: 0; + } +} +@-webkit-keyframes scaleIn { + from { + transform: scale(0.98); + opacity: 0; + } +} +@-o-keyframes scaleIn { + from { + transform: scale(0.98); + opacity: 0; + } +} +@keyframes scaleIn { + from { + transform: scale(0.98); + opacity: 0; + } +} +} diff --git a/styles/mods/deprecated/display_bettersearch.css b/styles/mods/deprecated/display_bettersearch.css new file mode 100644 index 0000000..c9bf885 --- /dev/null +++ b/styles/mods/deprecated/display_bettersearch.css @@ -0,0 +1,10 @@ +/* +Make search results look better: +- adds contrast to search icon +- overlay-style shadowed background + +author: trwnh +license: Public Domain +*/ +.search__icon .fa.active {opacity: 1} +.drawer__inner.darker {background: rgba(0,0,0,0.5)} diff --git a/styles/mods/display_breakname.css b/styles/mods/display_breakname.css new file mode 100644 index 0000000..fc3936e --- /dev/null +++ b/styles/mods/display_breakname.css @@ -0,0 +1,9 @@ +/* +Add a line break between display name and account handle: +- this allows user/display names to expand more by default. +- it also makes names look better in general. + +author: trwnh +license: Public Domain +*/ +.display-name__html {display: block;} \ No newline at end of file diff --git a/styles/mods/display_browserfont.css b/styles/mods/display_browserfont.css new file mode 100644 index 0000000..6389f20 --- /dev/null +++ b/styles/mods/display_browserfont.css @@ -0,0 +1,20 @@ +/* +Use browser default font: +- override mastodon-font-sans-serif with sans-serif +- note: this is not the same as "use system default font" + in mastodon's preferences! that option uses a font that + would be *expected to load on that system*, and ignores + your browser's settings entirely. for example, if you + are running ms windows, you will see segoe ui, even if + your browser's default font is something else! + +author: trwnh +license: Public Domain +*/ +body, +.landing-page #mastodon-timeline, +.landing-page li, +.landing-page p +{ + font-family: sans-serif +} \ No newline at end of file diff --git a/styles/mods/display_circleavatar.css b/styles/mods/display_circleavatar.css new file mode 100644 index 0000000..b7d5d49 --- /dev/null +++ b/styles/mods/display_circleavatar.css @@ -0,0 +1,15 @@ +/* +* Rounded avatars: +* - adjust the border radius around all avatar elements. +* - default override is 50% (i.e. turn squares into circles), +* but you can set it to whatever you want. +* +* author: trwnh +* license: Public Domain +*/ +.card .avatar img, +.activity-stream .status.light .status__avatar img, +.account__avatar, + .account__avatar-overlay-base, + .account__avatar-overlay-overlay +{border-radius: 50%} diff --git a/styles/mods/display_collapsedinteractions.css b/styles/mods/display_collapsedinteractions.css new file mode 100644 index 0000000..7cb1f7c --- /dev/null +++ b/styles/mods/display_collapsedinteractions.css @@ -0,0 +1,37 @@ +/* +Collapse fave/boost/poll notifications +- limits display to just a few lines (~3), so you can at least identify it +- hides the display name on fave/boost, because you already know you posted it +- tighter margins, remove space between CW and content +- hides the buttons, but you can expand a status to interact with it + +author: trwnh +license: Public Domain +*/ + +.notification-favourite .status, +.notification-reblog .status, +.notification-poll .status{ + max-height: 4em; + overflow: hidden; +} + +.notification-favourite .display-name, +.notification-reblog .display-name { + display: none; +} + +.notification-favourite .status__content, +.notification-reblog .status__content { + margin-top: -4px; +} + +.notification-favourite .status__content p, +.notification-reblog .status__content p { + margin-bottom: 0px; +} + +.notification-favourite .status__action-bar, +.notification-reblog .status__action-bar { + display: none; +} diff --git a/styles/mods/display_emojizoom.css b/styles/mods/display_emojizoom.css new file mode 100644 index 0000000..32ba536 --- /dev/null +++ b/styles/mods/display_emojizoom.css @@ -0,0 +1,23 @@ + /* + Emoji hover zoom: + - makes emoji grow in size when moused over + + author: noiob + license: CC0 - Public Domain + source: https://userstyles.org/styles/150165 + */ + + .emojione:hover + { + width: 50px !important; + /* set the width and height of the expanded emojo here */ + height: 50px !important; + transition: all 0.3s ease-in-out !important; + /* the 0.3s is the animation time for growing the emojo, it can be set to 0 */; + } + + .emojione + { + transition: all 0.2s ease-in-out; + /* the 0.2s is the animation time for shrinking the emojo, it can be set to 0 */; + } \ No newline at end of file diff --git a/styles/mods/display_fadedinteractions.css b/styles/mods/display_fadedinteractions.css new file mode 100644 index 0000000..8945d26 --- /dev/null +++ b/styles/mods/display_fadedinteractions.css @@ -0,0 +1,9 @@ +/* +Fade out faved/boosted toots in notifications: +- for "x favourited your toot" / "x boosted your toot", + make the faved/boosted toot half-transparent. + +author: trwnh +license: Public Domain +*/ +.status.muted {opacity: 0.5} \ No newline at end of file diff --git a/styles/mods/display_fullmedia.css b/styles/mods/display_fullmedia.css new file mode 100644 index 0000000..04cdbf5 --- /dev/null +++ b/styles/mods/display_fullmedia.css @@ -0,0 +1,31 @@ +/* +Full-height media previews: +- normal media previews are forced to be 16:9 for consistency +- use this if you prefer to see the aspect ratio unchanged + +author: Kevin +license: CC0 - Public Domain +source: https://userstyles.org/styles/167207 [in part] +*/ + +.media-gallery { + max-height: 100% !important; + height: 100% !important; +} + +.media-gallery__item-gifv-thumbnail, .media-gallery__item-gifv-thumbnail img { + transform: translateY(0%) !important; + max-height: 100% !important; +} + +.media-gallery__item-thumbnail, .media-gallery__item-thumbnail img, .media-gallery__gifv { + max-height: 100% !important; +} + +.media-gallery__item { + width: 100% !important; + height: 100% !important; + max-height: 100% !important; + inset: 0 !important; + margin-bottom: 4px; +} diff --git a/styles/mods/display_fullname.css b/styles/mods/display_fullname.css new file mode 100644 index 0000000..1f2e541 --- /dev/null +++ b/styles/mods/display_fullname.css @@ -0,0 +1,11 @@ +/* +Always show full name and handle: +- this removes the `...` and allows text to overflow past the column. +- this can look worse, but it can also prevent having to mouse over + to see the full name or handle. +- by default, it will also break long names onto a new line. + +author: trwnh +license: Public Domain +*/ +.display-name {overflow: visible; white-space: normal; word-wrap: break-word} \ No newline at end of file diff --git a/styles/mods/display_hidefollowcounts.css b/styles/mods/display_hidefollowcounts.css new file mode 100644 index 0000000..e9ac9ed --- /dev/null +++ b/styles/mods/display_hidefollowcounts.css @@ -0,0 +1,10 @@ +/* +Hide the following and follower counters on profiles. +- full counts are still available by hovering over the text, though +author: trwnh +license: Public Domain +*/ +.account__header__extra__links a:not(:first-child) strong +{display: none} +.details-counters .counter:not(:first-child) .counter-number +{visibility: hidden} diff --git a/styles/mods/display_hidereplycounts.css b/styles/mods/display_hidereplycounts.css new file mode 100644 index 0000000..513251c --- /dev/null +++ b/styles/mods/display_hidereplycounts.css @@ -0,0 +1,7 @@ +/* +Hide the 0/1/1+ counters of replies. + +author: trwnh +license: Public Domain +*/ +.status__action-bar__counter__label {display: none} \ No newline at end of file diff --git a/styles/mods/display_starstohearts.css b/styles/mods/display_starstohearts.css new file mode 100644 index 0000000..53efb55 --- /dev/null +++ b/styles/mods/display_starstohearts.css @@ -0,0 +1,16 @@ +/* +Turn stars into hearts: +- similar to twitter's change + +author: numimyon +license: CC0 - Public Domain +source: https://userstyles.org/styles/151233 +*/ + +.notification__favourite-icon-wrapper .star-icon, +.star-icon.active, +.star-icon:hover, +.star-icon:active +{color: crimson !important;} + +.fa-star:before {content: "";} diff --git a/styles/mods/display_transparentmedia.css b/styles/mods/display_transparentmedia.css new file mode 100644 index 0000000..afa18a1 --- /dev/null +++ b/styles/mods/display_transparentmedia.css @@ -0,0 +1,10 @@ +/* +Remove the checker-board background from the media modal: +- this makes transparent images actually transparent + +author: trwnh +license: Public Domain +*/ +.media-modal canvas, +.media-modal img +{background: none} \ No newline at end of file diff --git a/styles/mods/layout_1600px.css b/styles/mods/layout_1600px.css new file mode 100644 index 0000000..f81af00 --- /dev/null +++ b/styles/mods/layout_1600px.css @@ -0,0 +1,12 @@ +/* +Allow for wider layout on bigger screens +- vanilla max-width is 1200px +- there is no penalty to slightly expanding flexbox on bigger screens +- only applies on landing pages (webapp will expand as you add columns) + +author: trwnh +license: Public Domain +*/ +@media (min-width: 1600px) { + .landing-page .container {max-width: 1600px} +} \ No newline at end of file diff --git a/styles/mods/layout_elefriend.css b/styles/mods/layout_elefriend.css new file mode 100644 index 0000000..3d79a2c --- /dev/null +++ b/styles/mods/layout_elefriend.css @@ -0,0 +1,20 @@ +/* +Release elephant friend from their confines: +- elephant friend will now hang out in the corner of your browser, + instead of being trapped in the drawer. + +author: trwnh +license: Public Domain +*/ +.drawer__inner, .drawer__inner__mastodon { + background: none; z-index: 0 +} +.drawer__inner__mastodon > img { + position: fixed; + bottom: 0; + left: 0; + height: 180px; + z-index: -1 +} +.compose-form {z-index: 1} +.drawer__inner {height: 100%} /* firefox bug highlights drawer text on click? */ \ No newline at end of file diff --git a/styles/mods/layout_gettingstartedheight.css b/styles/mods/layout_gettingstartedheight.css new file mode 100644 index 0000000..536a707 --- /dev/null +++ b/styles/mods/layout_gettingstartedheight.css @@ -0,0 +1,13 @@ +/* +Make "getting started" column height consistent with all other columns: +- puts the footer back at the bottom of the page, instead of floating. + +author: trwnh +license: Public Domain +*/ +.getting-started { + height: 100%; + display: flex; + flex-flow: column; + justify-content: space-between +} \ No newline at end of file diff --git a/styles/mods/layout_hidedisabled.css b/styles/mods/layout_hidedisabled.css new file mode 100644 index 0000000..3196db9 --- /dev/null +++ b/styles/mods/layout_hidedisabled.css @@ -0,0 +1,17 @@ +/* +Hide buttons that can't be clicked +- columns on /about and tag pages have buttons that don't work. +- so, this snippet hides those nonworking buttons to save space +- and to avoid confusion. +- unboostable buttons are made transparent on hover instead. + +this is fixed in https://github.com/tootsuite/mastodon/pull/10054 + +author: trwnh +license: Public Domain +*/ +.status__action-bar .icon-button.disabled:hover, +.notification-favourite .status.status-direct .icon-button.disabled:hover +{color: transparent !important} + +#mastodon-timeline .status__action-bar {display: none} \ No newline at end of file diff --git a/styles/mods/layout_hidefiltered.css b/styles/mods/layout_hidefiltered.css new file mode 100644 index 0000000..f701e5f --- /dev/null +++ b/styles/mods/layout_hidefiltered.css @@ -0,0 +1,9 @@ +/* +Remove the "Filtered" tombstone from timelines. +- WARNING: this breaks keyboard scrolling with j/k! + +author: trwnh +license: Public Domain +*/ + +.status__wrapper--filtered {display: none} diff --git a/styles/mods/layout_mobile_bottombar.css b/styles/mods/layout_mobile_bottombar.css new file mode 100644 index 0000000..e5ddaf4 --- /dev/null +++ b/styles/mods/layout_mobile_bottombar.css @@ -0,0 +1,29 @@ +/* +Bottom tabs on mobile: +- Places the tab bar at the bottom instead of the top. +- Fixes layout errors that are a result of this change. + +author: trwnh +license: Public Domain +*/ +@media (max-width: 630px) { + +.tabs-bar { +position: fixed; +bottom: 0; +z-index: 1; +width: 100%; +margin: 0 !important; +} + +.getting-started {overflow: auto} /* can be removed after PR #10075 is merged */ + +.columns-area {padding: 0} +.getting-started__trends, .getting-started__wrapper, .search {margin: 0} +.columns-area__panels__main, .tabs-bar__wrapper {padding: 0} + +.floating-action-button, .column .scrollable > div:last-child {margin-bottom: 50px} +.react-swipeable-view-container {height: calc(100% - 50px)} +.react-swipeable-view-container .columns-area {height: 100% !important} + +} diff --git a/styles/mods/layout_singlecolumn.css b/styles/mods/layout_singlecolumn.css new file mode 100644 index 0000000..88bf19e --- /dev/null +++ b/styles/mods/layout_singlecolumn.css @@ -0,0 +1,25 @@ +/* +Single column layout: +- re-uses tab bar from mobile layout +- hides search from drawer (redundant with search tab) + +author: trwnh +license: Public Domain +*/ + +@media (min-width: 1024px) { + /* place constraints on app layout */ + .ui {max-width: 960px; max-height: 100vh;} + .drawer {width: 300px} + .column:last-child, .drawer:last-child + {display: flex; flex: 1 1 100%;} + /* show tabs bar (from mobile layout) as header */ + .tabs-bar {display: flex;} + /* hide redundant ui elements */ + .column, + .drawer__header, + .drawer:first-child .search, + .drawer:first-child .search-results + {display: none;} + .drawer:first-child .drawer__inner.darker {z-index: -1} +} \ No newline at end of file diff --git a/styles/mods/layout_widercolumns.css b/styles/mods/layout_widercolumns.css new file mode 100644 index 0000000..b5d91dc --- /dev/null +++ b/styles/mods/layout_widercolumns.css @@ -0,0 +1,10 @@ +/* +* Wider columns: +* - Make the multi-column layout use wider columns by default. +* +* author: trwnh +* license: Public Domain +*/ +@media (min-width: 640px) { + .column, #mastodon-timeline {min-width: 60ch;} +} \ No newline at end of file diff --git a/styles/mods/test_colorizedlogo.css b/styles/mods/test_colorizedlogo.css new file mode 100644 index 0000000..634ae5f --- /dev/null +++ b/styles/mods/test_colorizedlogo.css @@ -0,0 +1,12 @@ +/* +Colorize logo on landing page: +- DO NOT IMPORT. It works as standalone CSS, but it makes Sass choke. + +author: trwnh +license: Public Domain +*/ + +.landing-page__logo img { + filter: sepia(100%) hue-rotate(160deg) saturate(400%) brightness(40%); + mix-blend-mode: normal +} \ No newline at end of file diff --git a/styles/photon.scss b/styles/photon.scss new file mode 100644 index 0000000..5269048 --- /dev/null +++ b/styles/photon.scss @@ -0,0 +1,82 @@ +// http://design.firefox.com/photon/visuals/color.html + +// Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the current tab in Firefox for desktop. +$photon_blue_40: #45a1ff; +$photon_blue_50: #0a84ff; +$photon_blue_60: #0060df; +$photon_blue_70: #003eaa; +$photon_blue_80: #002275; +$photon_blue_90: #000f40; + +// Firefox Teal is one of our primary colors. We use teal as an attention color. +$photon_teal_50: #00feff; +$photon_teal_60: #00c8d7; +$photon_teal_70: #008ea4; +$photon_teal_80: #005a71; +$photon_teal_90: #002d3e; + +// Firefox Magenta is one of our primary colors. We currently have no common usage for it. +$photon_magenta_50: #ff1ad9; +$photon_magenta_60: #ed00b5; +$photon_magenta_70: #b5007f; +$photon_magenta_80: #7d004f; +$photon_magenta_90: #440027; + +// Firefox Green is commonly used to indicate success. +$photon_green_50: #30e60b; +$photon_green_60: #12bc00; +$photon_green_70: #058b00; +$photon_green_80: #006504; +$photon_green_90: #003706; + +// Firefox Yellow is commonly used for warnings. +$photon_yellow_50: #ffe900; +$photon_yellow_60: #d7b600; +$photon_yellow_70: #a47f00; +$photon_yellow_80: #715100; +$photon_yellow_90: #3e2800; + +// Firefox Red is commonly used for errors. +$photon_red_50: #ff0039; +$photon_red_60: #d70022; +$photon_red_70: #a4000f; +$photon_red_80: #5a0002; +$photon_red_90: #3e0200; + +// Firefox Purple is commonly used to indicate privacy. +$photon_purple_50: #9400ff; +$photon_purple_60: #8000d7; +$photon_purple_70: #6200a4; +$photon_purple_80: #440071; +$photon_purple_90: #25003e; + +// Firefox Orange is only used for branding. Do not use it otherwise. +$photon_orange_50: #ff9400; +$photon_orange_60: #d76e00; +$photon_orange_70: #a44900; +$photon_orange_80: #712b00; +$photon_orange_90: #3e1300; + +// Firefox Ink is commonly used for interfaces (e.g., the Firefox for desktop dark theme). +$photon_ink_70: #363959; +$photon_ink_80: #202340; +$photon_ink_90: #0f1126; + +// Firefox Grey is commonly used for interfaces (e.g., the Firefox for desktop light theme). +$photon_grey_10: #f9f9fa; +$photon_grey_20: #ededf0; +$photon_grey_30: #d7d7db; +$photon_grey_40: #b1b1b3; +$photon_grey_50: #737373; +$photon_grey_60: #4a4a4f; +$photon_grey_70: #38383d; +$photon_grey_80: #2a2a2e; +$photon_grey_90: #0c0c0d; + +// We use white for the background of doorhangers or in-content menus. +$photon_white: #ffffff; + +div.column { + flex-grow: 1; +} + diff --git a/styles/photon_dark.scss b/styles/photon_dark.scss new file mode 100644 index 0000000..3573409 --- /dev/null +++ b/styles/photon_dark.scss @@ -0,0 +1,24 @@ +@import 'photon.scss'; + +$color1: $photon_grey_90; // darkest +$color2: lighten($photon_blue_50, 20%); // lightest +$color3: lighten($photon_blue_50, 10%); // lighter +$color4: $photon_blue_50; // vibrant +$color5: $photon_white; // white +$color6: $photon_red_50; // error red +$color7: $photon_green_50; // succ green +$color8: $photon_grey_90; // black + +$ui-base-color: $color1; +$ui-secondary-color: $color2; +$ui-primary-color: $color3; +$ui-highlight-color: $color4; +$base-border-color: $color5; +$simple-background-color: $color5; +$primary-text-color: $color5; +$error-value-color: $color6; +$valid-value-color: $color7; +$base-shadow-color: $color8; +$base-overlay-background: $color8; + +@import 'application'; diff --git a/styles/photon_green.scss b/styles/photon_green.scss new file mode 100644 index 0000000..d789f9e --- /dev/null +++ b/styles/photon_green.scss @@ -0,0 +1,24 @@ +@import 'photon.scss'; + +$color1: $photon_grey_90; // darkest +$color2: lighten($photon_green_50, 20%); // lightest +$color3: lighten($photon_green_50, 10%); // lighter +$color4: $photon_green_50; // vibrant +$color5: $photon_white; // white +$color6: $photon_red_50; // error red +$color7: $photon_green_50; // succ green +$color8: $photon_grey_90; // black + +$ui-base-color: $color1; +$ui-secondary-color: $color2; +$ui-primary-color: $color3; +$ui-highlight-color: $color4; +$base-border-color: $color5; +$simple-background-color: $color5; +$primary-text-color: $color5; +$error-value-color: $color6; +$valid-value-color: $color7; +$base-shadow-color: $color8; +$base-overlay-background: $color8; + +@import 'application'; diff --git a/styles/photon_light.scss b/styles/photon_light.scss new file mode 100644 index 0000000..5a915e0 --- /dev/null +++ b/styles/photon_light.scss @@ -0,0 +1,29 @@ +@import 'photon.scss'; + +$color1: $photon_grey_10; // darkest +$color2: lighten($photon_blue_50, 20%); // lightest +$color3: lighten($photon_blue_50, 10%); // lighter +$color4: $photon_blue_50; // vibrant +$color5: $photon_grey_90; // white +$color6: $photon_red_50; // error red +$color7: $photon_green_50; // succ green +$color8: $photon_white; // black + +// Avoid making text unreadable +@function lighten ($color, $percentage) { + @return darken($color, $percentage); +} + +$ui-base-color: $color1; +$ui-secondary-color: $color2; +$ui-primary-color: $color3; +$ui-highlight-color: $color4; +$base-border-color: $color5; +$simple-background-color: $color5; +$primary-text-color: $color5; +$error-value-color: $color6; +$valid-value-color: $color7; +$base-shadow-color: $color8; +$base-overlay-background: $color8; + +@import 'application'; diff --git a/styles/photon_purple.scss b/styles/photon_purple.scss new file mode 100644 index 0000000..55cd60d --- /dev/null +++ b/styles/photon_purple.scss @@ -0,0 +1,24 @@ +@import 'photon.scss'; + +$color1: $photon_grey_90; // darkest +$color2: lighten($photon_purple_50, 20%); // lightest +$color3: lighten($photon_purple_50, 10%); // lighter +$color4: $photon_purple_50; // vibrant +$color5: $photon_white; // white +$color6: $photon_red_50; // error red +$color7: $photon_green_50; // succ green +$color8: $photon_grey_90; // black + +$ui-base-color: $color1; +$ui-secondary-color: $color2; +$ui-primary-color: $color3; +$ui-highlight-color: $color4; +$base-border-color: $color5; +$simple-background-color: $color5; +$primary-text-color: $color5; +$error-value-color: $color6; +$valid-value-color: $color7; +$base-shadow-color: $color8; +$base-overlay-background: $color8; + +@import 'application'; diff --git a/styles/sleepingtown.scss b/styles/sleepingtown.scss new file mode 100644 index 0000000..543d761 --- /dev/null +++ b/styles/sleepingtown.scss @@ -0,0 +1,888 @@ +// ========================================================================== +// +// Name: UI Color Palette +// Description: The color palette of material design. +// Version: 2.3.1 +// +// Author: Denis Malinochkin +// Git: https://github.com/mrmlnc/material-color +// +// twitter: @mrmlnc +// +// ========================================================================== + + +// +// List of base colors +// + +// $clr-red +// $clr-pink +// $clr-purple +// $clr-deep-purple +// $clr-indigo +// $clr-blue +// $clr-light-blue +// $clr-cyan +// $clr-teal +// $clr-green +// $clr-light-green +// $clr-lime +// $clr-yellow +// $clr-amber +// $clr-orange +// $clr-deep-orange +// $clr-brown +// $clr-grey +// $clr-blue-grey +// $clr-black +// $clr-white + + +// +// Red +// + +$clr-red-list: ( + "base": #f44336, + "50": #ffebee, + "100": #ffcdd2, + "200": #ef9a9a, + "300": #e57373, + "400": #ef5350, + "500": #f44336, + "600": #e53935, + "700": #d32f2f, + "800": #c62828, + "900": #b71c1c, + "a100": #ff8a80, + "a200": #ff5252, + "a400": #ff1744, + "a700": #d50000 +); + +$clr-red: map-get($clr-red-list, "base"); + +$clr-red-50: map-get($clr-red-list, "50"); +$clr-red-100: map-get($clr-red-list, "100"); +$clr-red-200: map-get($clr-red-list, "200"); +$clr-red-300: map-get($clr-red-list, "300"); +$clr-red-400: map-get($clr-red-list, "400"); +$clr-red-500: map-get($clr-red-list, "500"); +$clr-red-600: map-get($clr-red-list, "600"); +$clr-red-700: map-get($clr-red-list, "700"); +$clr-red-800: map-get($clr-red-list, "800"); +$clr-red-900: map-get($clr-red-list, "900"); +$clr-red-a100: map-get($clr-red-list, "a100"); +$clr-red-a200: map-get($clr-red-list, "a200"); +$clr-red-a400: map-get($clr-red-list, "a400"); +$clr-red-a700: map-get($clr-red-list, "a700"); + + +// +// Pink +// + +$clr-pink-list: ( + "base": #e91e63, + "50": #fce4ec, + "100": #f8bbd0, + "200": #f48fb1, + "300": #f06292, + "400": #ec407a, + "500": #e91e63, + "600": #d81b60, + "700": #c2185b, + "800": #ad1457, + "900": #880e4f, + "a100": #ff80ab, + "a200": #ff4081, + "a400": #f50057, + "a700": #c51162 +); + +$clr-pink: map-get($clr-pink-list, "base"); + +$clr-pink-50: map-get($clr-pink-list, "50"); +$clr-pink-100: map-get($clr-pink-list, "100"); +$clr-pink-200: map-get($clr-pink-list, "200"); +$clr-pink-300: map-get($clr-pink-list, "300"); +$clr-pink-400: map-get($clr-pink-list, "400"); +$clr-pink-500: map-get($clr-pink-list, "500"); +$clr-pink-600: map-get($clr-pink-list, "600"); +$clr-pink-700: map-get($clr-pink-list, "700"); +$clr-pink-800: map-get($clr-pink-list, "800"); +$clr-pink-900: map-get($clr-pink-list, "900"); +$clr-pink-a100: map-get($clr-pink-list, "a100"); +$clr-pink-a200: map-get($clr-pink-list, "a200"); +$clr-pink-a400: map-get($clr-pink-list, "a400"); +$clr-pink-a700: map-get($clr-pink-list, "a700"); + + +// +// Purple +// + +$clr-purple-list: ( + "base": #9c27b0, + "50": #f3e5f5, + "100": #e1bee7, + "200": #ce93d8, + "300": #ba68c8, + "400": #ab47bc, + "500": #9c27b0, + "600": #8e24aa, + "700": #7b1fa2, + "800": #6a1b9a, + "900": #4a148c, + "a100": #ea80fc, + "a200": #e040fb, + "a400": #d500f9, + "a700": #aa00ff +); + +$clr-purple: map-get($clr-purple-list, "base"); + +$clr-purple-50: map-get($clr-purple-list, "50"); +$clr-purple-100: map-get($clr-purple-list, "100"); +$clr-purple-200: map-get($clr-purple-list, "200"); +$clr-purple-300: map-get($clr-purple-list, "300"); +$clr-purple-400: map-get($clr-purple-list, "400"); +$clr-purple-500: map-get($clr-purple-list, "500"); +$clr-purple-600: map-get($clr-purple-list, "600"); +$clr-purple-700: map-get($clr-purple-list, "700"); +$clr-purple-800: map-get($clr-purple-list, "800"); +$clr-purple-900: map-get($clr-purple-list, "900"); +$clr-purple-a100: map-get($clr-purple-list, "a100"); +$clr-purple-a200: map-get($clr-purple-list, "a200"); +$clr-purple-a400: map-get($clr-purple-list, "a400"); +$clr-purple-a700: map-get($clr-purple-list, "a700"); + + +// +// Deep purple +// + +$clr-deep-purple-list: ( + "base": #673ab7, + "50": #ede7f6, + "100": #d1c4e9, + "200": #b39ddb, + "300": #9575cd, + "400": #7e57c2, + "500": #673ab7, + "600": #5e35b1, + "700": #512da8, + "800": #4527a0, + "900": #311b92, + "a100": #b388ff, + "a200": #7c4dff, + "a400": #651fff, + "a700": #6200ea +); + +$clr-deep-purple: map-get($clr-deep-purple-list, "base"); + +$clr-deep-purple-50: map-get($clr-deep-purple-list, "50"); +$clr-deep-purple-100: map-get($clr-deep-purple-list, "100"); +$clr-deep-purple-200: map-get($clr-deep-purple-list, "200"); +$clr-deep-purple-300: map-get($clr-deep-purple-list, "300"); +$clr-deep-purple-400: map-get($clr-deep-purple-list, "400"); +$clr-deep-purple-500: map-get($clr-deep-purple-list, "500"); +$clr-deep-purple-600: map-get($clr-deep-purple-list, "600"); +$clr-deep-purple-700: map-get($clr-deep-purple-list, "700"); +$clr-deep-purple-800: map-get($clr-deep-purple-list, "800"); +$clr-deep-purple-900: map-get($clr-deep-purple-list, "900"); +$clr-deep-purple-a100: map-get($clr-deep-purple-list, "a100"); +$clr-deep-purple-a200: map-get($clr-deep-purple-list, "a200"); +$clr-deep-purple-a400: map-get($clr-deep-purple-list, "a400"); +$clr-deep-purple-a700: map-get($clr-deep-purple-list, "a700"); + + +// +// Indigo +// + +$clr-indigo-list: ( + "base": #3f51b5, + "50": #e8eaf6, + "100": #c5cae9, + "200": #9fa8da, + "300": #7986cb, + "400": #5c6bc0, + "500": #3f51b5, + "600": #3949ab, + "700": #303f9f, + "800": #283593, + "900": #1a237e, + "a100": #8c9eff, + "a200": #536dfe, + "a400": #3d5afe, + "a700": #304ffe +); + +$clr-indigo: map-get($clr-indigo-list, "base"); + +$clr-indigo-50: map-get($clr-indigo-list, "50"); +$clr-indigo-100: map-get($clr-indigo-list, "100"); +$clr-indigo-200: map-get($clr-indigo-list, "200"); +$clr-indigo-300: map-get($clr-indigo-list, "300"); +$clr-indigo-400: map-get($clr-indigo-list, "400"); +$clr-indigo-500: map-get($clr-indigo-list, "500"); +$clr-indigo-600: map-get($clr-indigo-list, "600"); +$clr-indigo-700: map-get($clr-indigo-list, "700"); +$clr-indigo-800: map-get($clr-indigo-list, "800"); +$clr-indigo-900: map-get($clr-indigo-list, "900"); +$clr-indigo-a100: map-get($clr-indigo-list, "a100"); +$clr-indigo-a200: map-get($clr-indigo-list, "a200"); +$clr-indigo-a400: map-get($clr-indigo-list, "a400"); +$clr-indigo-a700: map-get($clr-indigo-list, "a700"); + + +// +// Blue +// + +$clr-blue-list: ( + "base": #2196f3, + "50": #e3f2fd, + "100": #bbdefb, + "200": #90caf9, + "300": #64b5f6, + "400": #42a5f5, + "500": #2196f3, + "600": #1e88e5, + "700": #1976d2, + "800": #1565c0, + "900": #0d47a1, + "a100": #82b1ff, + "a200": #448aff, + "a400": #2979ff, + "a700": #2962ff +); + +$clr-blue: map-get($clr-blue-list, "base"); + +$clr-blue-50: map-get($clr-blue-list, "50"); +$clr-blue-100: map-get($clr-blue-list, "100"); +$clr-blue-200: map-get($clr-blue-list, "200"); +$clr-blue-300: map-get($clr-blue-list, "300"); +$clr-blue-400: map-get($clr-blue-list, "400"); +$clr-blue-500: map-get($clr-blue-list, "500"); +$clr-blue-600: map-get($clr-blue-list, "600"); +$clr-blue-700: map-get($clr-blue-list, "700"); +$clr-blue-800: map-get($clr-blue-list, "800"); +$clr-blue-900: map-get($clr-blue-list, "900"); +$clr-blue-a100: map-get($clr-blue-list, "a100"); +$clr-blue-a200: map-get($clr-blue-list, "a200"); +$clr-blue-a400: map-get($clr-blue-list, "a400"); +$clr-blue-a700: map-get($clr-blue-list, "a700"); + + +// +// Light Blue +// + +$clr-light-blue-list: ( + "base": #03a9f4, + "50": #e1f5fe, + "100": #b3e5fc, + "200": #81d4fa, + "300": #4fc3f7, + "400": #29b6f6, + "500": #03a9f4, + "600": #039be5, + "700": #0288d1, + "800": #0277bd, + "900": #01579b, + "a100": #80d8ff, + "a200": #40c4ff, + "a400": #00b0ff, + "a700": #0091ea +); + +$clr-light-blue: map-get($clr-light-blue-list, "base"); + +$clr-light-blue-50: map-get($clr-light-blue-list, "50"); +$clr-light-blue-100: map-get($clr-light-blue-list, "100"); +$clr-light-blue-200: map-get($clr-light-blue-list, "200"); +$clr-light-blue-300: map-get($clr-light-blue-list, "300"); +$clr-light-blue-400: map-get($clr-light-blue-list, "400"); +$clr-light-blue-500: map-get($clr-light-blue-list, "500"); +$clr-light-blue-600: map-get($clr-light-blue-list, "600"); +$clr-light-blue-700: map-get($clr-light-blue-list, "700"); +$clr-light-blue-800: map-get($clr-light-blue-list, "800"); +$clr-light-blue-900: map-get($clr-light-blue-list, "900"); +$clr-light-blue-a100: map-get($clr-light-blue-list, "a100"); +$clr-light-blue-a200: map-get($clr-light-blue-list, "a200"); +$clr-light-blue-a400: map-get($clr-light-blue-list, "a400"); +$clr-light-blue-a700: map-get($clr-light-blue-list, "a700"); + + +// +// Cyan +// + +$clr-cyan-list: ( + "base": #00bcd4, + "50": #e0f7fa, + "100": #b2ebf2, + "200": #80deea, + "300": #4dd0e1, + "400": #26c6da, + "500": #00bcd4, + "600": #00acc1, + "700": #0097a7, + "800": #00838f, + "900": #006064, + "a100": #84ffff, + "a200": #18ffff, + "a400": #00e5ff, + "a700": #00b8d4 +); + +$clr-cyan: map-get($clr-cyan-list, "base"); + +$clr-cyan-50: map-get($clr-cyan-list, "50"); +$clr-cyan-100: map-get($clr-cyan-list, "100"); +$clr-cyan-200: map-get($clr-cyan-list, "200"); +$clr-cyan-300: map-get($clr-cyan-list, "300"); +$clr-cyan-400: map-get($clr-cyan-list, "400"); +$clr-cyan-500: map-get($clr-cyan-list, "500"); +$clr-cyan-600: map-get($clr-cyan-list, "600"); +$clr-cyan-700: map-get($clr-cyan-list, "700"); +$clr-cyan-800: map-get($clr-cyan-list, "800"); +$clr-cyan-900: map-get($clr-cyan-list, "900"); +$clr-cyan-a100: map-get($clr-cyan-list, "a100"); +$clr-cyan-a200: map-get($clr-cyan-list, "a200"); +$clr-cyan-a400: map-get($clr-cyan-list, "a400"); +$clr-cyan-a700: map-get($clr-cyan-list, "a700"); + + +// +// Teal +// + +$clr-teal-list: ( + "base": #009688, + "50": #e0f2f1, + "100": #b2dfdb, + "200": #80cbc4, + "300": #4db6ac, + "400": #26a69a, + "500": #009688, + "600": #00897b, + "700": #00796b, + "800": #00695c, + "900": #004d40, + "a100": #a7ffeb, + "a200": #64ffda, + "a400": #1de9b6, + "a700": #00bfa5 +); + +$clr-teal: map-get($clr-teal-list, "base"); + +$clr-teal-50: map-get($clr-teal-list, "50"); +$clr-teal-100: map-get($clr-teal-list, "100"); +$clr-teal-200: map-get($clr-teal-list, "200"); +$clr-teal-300: map-get($clr-teal-list, "300"); +$clr-teal-400: map-get($clr-teal-list, "400"); +$clr-teal-500: map-get($clr-teal-list, "500"); +$clr-teal-600: map-get($clr-teal-list, "600"); +$clr-teal-700: map-get($clr-teal-list, "700"); +$clr-teal-800: map-get($clr-teal-list, "800"); +$clr-teal-900: map-get($clr-teal-list, "900"); +$clr-teal-a100: map-get($clr-teal-list, "a100"); +$clr-teal-a200: map-get($clr-teal-list, "a200"); +$clr-teal-a400: map-get($clr-teal-list, "a400"); +$clr-teal-a700: map-get($clr-teal-list, "a700"); + + +// +// Green +// + +$clr-green-list: ( + "base": #4caf50, + "50": #e8f5e9, + "100": #c8e6c9, + "200": #a5d6a7, + "300": #81c784, + "400": #66bb6a, + "500": #4caf50, + "600": #43a047, + "700": #388e3c, + "800": #2e7d32, + "900": #1b5e20, + "a100": #b9f6ca, + "a200": #69f0ae, + "a400": #00e676, + "a700": #00c853 +); + +$clr-green: map-get($clr-green-list, "base"); + +$clr-green-50: map-get($clr-green-list, "50"); +$clr-green-100: map-get($clr-green-list, "100"); +$clr-green-200: map-get($clr-green-list, "200"); +$clr-green-300: map-get($clr-green-list, "300"); +$clr-green-400: map-get($clr-green-list, "400"); +$clr-green-500: map-get($clr-green-list, "500"); +$clr-green-600: map-get($clr-green-list, "600"); +$clr-green-700: map-get($clr-green-list, "700"); +$clr-green-800: map-get($clr-green-list, "800"); +$clr-green-900: map-get($clr-green-list, "900"); +$clr-green-a100: map-get($clr-green-list, "a100"); +$clr-green-a200: map-get($clr-green-list, "a200"); +$clr-green-a400: map-get($clr-green-list, "a400"); +$clr-green-a700: map-get($clr-green-list, "a700"); + + +// +// Light green +// + +$clr-light-green-list: ( + "base": #8bc34a, + "50": #f1f8e9, + "100": #dcedc8, + "200": #c5e1a5, + "300": #aed581, + "400": #9ccc65, + "500": #8bc34a, + "600": #7cb342, + "700": #689f38, + "800": #558b2f, + "900": #33691e, + "a100": #ccff90, + "a200": #b2ff59, + "a400": #76ff03, + "a700": #64dd17 +); + +$clr-light-green: map-get($clr-light-green-list, "base"); + +$clr-light-green-50: map-get($clr-light-green-list, "50"); +$clr-light-green-100: map-get($clr-light-green-list, "100"); +$clr-light-green-200: map-get($clr-light-green-list, "200"); +$clr-light-green-300: map-get($clr-light-green-list, "300"); +$clr-light-green-400: map-get($clr-light-green-list, "400"); +$clr-light-green-500: map-get($clr-light-green-list, "500"); +$clr-light-green-600: map-get($clr-light-green-list, "600"); +$clr-light-green-700: map-get($clr-light-green-list, "700"); +$clr-light-green-800: map-get($clr-light-green-list, "800"); +$clr-light-green-900: map-get($clr-light-green-list, "900"); +$clr-light-green-a100: map-get($clr-light-green-list, "a100"); +$clr-light-green-a200: map-get($clr-light-green-list, "a200"); +$clr-light-green-a400: map-get($clr-light-green-list, "a400"); +$clr-light-green-a700: map-get($clr-light-green-list, "a700"); + + +// +// Lime +// + +$clr-lime-list: ( + "base": #cddc39, + "50": #f9fbe7, + "100": #f0f4c3, + "200": #e6ee9c, + "300": #dce775, + "400": #d4e157, + "500": #cddc39, + "600": #c0ca33, + "700": #afb42b, + "800": #9e9d24, + "900": #827717, + "a100": #f4ff81, + "a200": #eeff41, + "a400": #c6ff00, + "a700": #aeea00 +); + +$clr-lime: map-get($clr-lime-list, "base"); + +$clr-lime-50: map-get($clr-lime-list, "50"); +$clr-lime-100: map-get($clr-lime-list, "100"); +$clr-lime-200: map-get($clr-lime-list, "200"); +$clr-lime-300: map-get($clr-lime-list, "300"); +$clr-lime-400: map-get($clr-lime-list, "400"); +$clr-lime-500: map-get($clr-lime-list, "500"); +$clr-lime-600: map-get($clr-lime-list, "600"); +$clr-lime-700: map-get($clr-lime-list, "700"); +$clr-lime-800: map-get($clr-lime-list, "800"); +$clr-lime-900: map-get($clr-lime-list, "900"); +$clr-lime-a100: map-get($clr-lime-list, "a100"); +$clr-lime-a200: map-get($clr-lime-list, "a200"); +$clr-lime-a400: map-get($clr-lime-list, "a400"); +$clr-lime-a700: map-get($clr-lime-list, "a700"); + + +// +// Yellow +// + +$clr-yellow-list: ( + "base": #ffeb3b, + "50": #fffde7, + "100": #fff9c4, + "200": #fff59d, + "300": #fff176, + "400": #ffee58, + "500": #ffeb3b, + "600": #fdd835, + "700": #fbc02d, + "800": #f9a825, + "900": #f57f17, + "a100": #ffff8d, + "a200": #ffff00, + "a400": #ffea00, + "a700": #ffd600 +); + +$clr-yellow: map-get($clr-yellow-list, "base"); + +$clr-yellow-50: map-get($clr-yellow-list, "50"); +$clr-yellow-100: map-get($clr-yellow-list, "100"); +$clr-yellow-200: map-get($clr-yellow-list, "200"); +$clr-yellow-300: map-get($clr-yellow-list, "300"); +$clr-yellow-400: map-get($clr-yellow-list, "400"); +$clr-yellow-500: map-get($clr-yellow-list, "500"); +$clr-yellow-600: map-get($clr-yellow-list, "600"); +$clr-yellow-700: map-get($clr-yellow-list, "700"); +$clr-yellow-800: map-get($clr-yellow-list, "800"); +$clr-yellow-900: map-get($clr-yellow-list, "900"); +$clr-yellow-a100: map-get($clr-yellow-list, "a100"); +$clr-yellow-a200: map-get($clr-yellow-list, "a200"); +$clr-yellow-a400: map-get($clr-yellow-list, "a400"); +$clr-yellow-a700: map-get($clr-yellow-list, "a700"); + + +// +// amber +// + +$clr-amber-list: ( + "base": #ffc107, + "50": #fff8e1, + "100": #ffecb3, + "200": #ffe082, + "300": #ffd54f, + "400": #ffca28, + "500": #ffc107, + "600": #ffb300, + "700": #ffa000, + "800": #ff8f00, + "900": #ff6f00, + "a100": #ffe57f, + "a200": #ffd740, + "a400": #ffc400, + "a700": #ffab00 +); + +$clr-amber: map-get($clr-amber-list, "base"); + +$clr-amber-50: map-get($clr-amber-list, "50"); +$clr-amber-100: map-get($clr-amber-list, "100"); +$clr-amber-200: map-get($clr-amber-list, "200"); +$clr-amber-300: map-get($clr-amber-list, "300"); +$clr-amber-400: map-get($clr-amber-list, "400"); +$clr-amber-500: map-get($clr-amber-list, "500"); +$clr-amber-600: map-get($clr-amber-list, "600"); +$clr-amber-700: map-get($clr-amber-list, "700"); +$clr-amber-800: map-get($clr-amber-list, "800"); +$clr-amber-900: map-get($clr-amber-list, "900"); +$clr-amber-a100: map-get($clr-amber-list, "a100"); +$clr-amber-a200: map-get($clr-amber-list, "a200"); +$clr-amber-a400: map-get($clr-amber-list, "a400"); +$clr-amber-a700: map-get($clr-amber-list, "a700"); + + +// +// Orange +// + +$clr-orange-list: ( + "base": #ff9800, + "50": #fff3e0, + "100": #ffe0b2, + "200": #ffcc80, + "300": #ffb74d, + "400": #ffa726, + "500": #ff9800, + "600": #fb8c00, + "700": #f57c00, + "800": #ef6c00, + "900": #e65100, + "a100": #ffd180, + "a200": #ffab40, + "a400": #ff9100, + "a700": #ff6d00 +); + +$clr-orange: map-get($clr-orange-list, "base"); + +$clr-orange-50: map-get($clr-orange-list, "50"); +$clr-orange-100: map-get($clr-orange-list, "100"); +$clr-orange-200: map-get($clr-orange-list, "200"); +$clr-orange-300: map-get($clr-orange-list, "300"); +$clr-orange-400: map-get($clr-orange-list, "400"); +$clr-orange-500: map-get($clr-orange-list, "500"); +$clr-orange-600: map-get($clr-orange-list, "600"); +$clr-orange-700: map-get($clr-orange-list, "700"); +$clr-orange-800: map-get($clr-orange-list, "800"); +$clr-orange-900: map-get($clr-orange-list, "900"); +$clr-orange-a100: map-get($clr-orange-list, "a100"); +$clr-orange-a200: map-get($clr-orange-list, "a200"); +$clr-orange-a400: map-get($clr-orange-list, "a400"); +$clr-orange-a700: map-get($clr-orange-list, "a700"); + + +// +// Deep orange +// + +$clr-deep-orange-list: ( + "base": #ff5722, + "50": #fbe9e7, + "100": #ffccbc, + "200": #ffab91, + "300": #ff8a65, + "400": #ff7043, + "500": #ff5722, + "600": #f4511e, + "700": #e64a19, + "800": #d84315, + "900": #bf360c, + "a100": #ff9e80, + "a200": #ff6e40, + "a400": #ff3d00, + "a700": #dd2c00 +); + +$clr-deep-orange: map-get($clr-deep-orange-list, "base"); + +$clr-deep-orange-50: map-get($clr-deep-orange-list, "50"); +$clr-deep-orange-100: map-get($clr-deep-orange-list, "100"); +$clr-deep-orange-200: map-get($clr-deep-orange-list, "200"); +$clr-deep-orange-300: map-get($clr-deep-orange-list, "300"); +$clr-deep-orange-400: map-get($clr-deep-orange-list, "400"); +$clr-deep-orange-500: map-get($clr-deep-orange-list, "500"); +$clr-deep-orange-600: map-get($clr-deep-orange-list, "600"); +$clr-deep-orange-700: map-get($clr-deep-orange-list, "700"); +$clr-deep-orange-800: map-get($clr-deep-orange-list, "800"); +$clr-deep-orange-900: map-get($clr-deep-orange-list, "900"); +$clr-deep-orange-a100: map-get($clr-deep-orange-list, "a100"); +$clr-deep-orange-a200: map-get($clr-deep-orange-list, "a200"); +$clr-deep-orange-a400: map-get($clr-deep-orange-list, "a400"); +$clr-deep-orange-a700: map-get($clr-deep-orange-list, "a700"); + + +// +// Brown +// + +$clr-brown-list: ( + "base": #795548, + "50": #efebe9, + "100": #d7ccc8, + "200": #bcaaa4, + "300": #a1887f, + "400": #8d6e63, + "500": #795548, + "600": #6d4c41, + "700": #5d4037, + "800": #4e342e, + "900": #3e2723, +); + +$clr-brown: map-get($clr-brown-list, "base"); + +$clr-brown-50: map-get($clr-brown-list, "50"); +$clr-brown-100: map-get($clr-brown-list, "100"); +$clr-brown-200: map-get($clr-brown-list, "200"); +$clr-brown-300: map-get($clr-brown-list, "300"); +$clr-brown-400: map-get($clr-brown-list, "400"); +$clr-brown-500: map-get($clr-brown-list, "500"); +$clr-brown-600: map-get($clr-brown-list, "600"); +$clr-brown-700: map-get($clr-brown-list, "700"); +$clr-brown-800: map-get($clr-brown-list, "800"); +$clr-brown-900: map-get($clr-brown-list, "900"); + + +// +// Grey +// + +$clr-grey-list: ( + "base": #9e9e9e, + "50": #fafafa, + "100": #f5f5f5, + "200": #eeeeee, + "300": #e0e0e0, + "400": #bdbdbd, + "500": #9e9e9e, + "600": #757575, + "700": #616161, + "800": #424242, + "900": #212121, +); + +$clr-grey: map-get($clr-grey-list, "base"); + +$clr-grey-50: map-get($clr-grey-list, "50"); +$clr-grey-100: map-get($clr-grey-list, "100"); +$clr-grey-200: map-get($clr-grey-list, "200"); +$clr-grey-300: map-get($clr-grey-list, "300"); +$clr-grey-400: map-get($clr-grey-list, "400"); +$clr-grey-500: map-get($clr-grey-list, "500"); +$clr-grey-600: map-get($clr-grey-list, "600"); +$clr-grey-700: map-get($clr-grey-list, "700"); +$clr-grey-800: map-get($clr-grey-list, "800"); +$clr-grey-900: map-get($clr-grey-list, "900"); + + +// +// Blue grey +// + +$clr-blue-grey-list: ( + "base": #607d8b, + "50": #eceff1, + "100": #cfd8dc, + "200": #b0bec5, + "300": #90a4ae, + "400": #78909c, + "500": #607d8b, + "600": #546e7a, + "700": #455a64, + "800": #37474f, + "900": #263238, +); + +$clr-blue-grey: map-get($clr-blue-grey-list, "base"); + +$clr-blue-grey-50: map-get($clr-blue-grey-list, "50"); +$clr-blue-grey-100: map-get($clr-blue-grey-list, "100"); +$clr-blue-grey-200: map-get($clr-blue-grey-list, "200"); +$clr-blue-grey-300: map-get($clr-blue-grey-list, "300"); +$clr-blue-grey-400: map-get($clr-blue-grey-list, "400"); +$clr-blue-grey-500: map-get($clr-blue-grey-list, "500"); +$clr-blue-grey-600: map-get($clr-blue-grey-list, "600"); +$clr-blue-grey-700: map-get($clr-blue-grey-list, "700"); +$clr-blue-grey-800: map-get($clr-blue-grey-list, "800"); +$clr-blue-grey-900: map-get($clr-blue-grey-list, "900"); + + +// +// Black +// + +$clr-black-list: ( + "base": #000 +); + +$clr-black: map-get($clr-black-list, "base"); + + +// +// White +// + +$clr-white-list: ( + "base": #fff +); + +$clr-white: map-get($clr-white-list, "base"); + + +// +// List for all Colors for looping +// + +$clr-list-all: ( + "red": $clr-red-list, + "pink": $clr-pink-list, + "purple": $clr-purple-list, + "deep-purple": $clr-deep-purple-list, + "indigo": $clr-indigo-list, + "blue": $clr-blue-list, + "light-blue": $clr-light-blue-list, + "cyan": $clr-cyan-list, + "teal": $clr-teal-list, + "green": $clr-green-list, + "light-green": $clr-light-green-list, + "lime": $clr-lime-list, + "yellow": $clr-yellow-list, + "amber": $clr-amber-list, + "orange": $clr-orange-list, + "deep-orange": $clr-deep-orange-list, + "brown": $clr-brown-list, + "grey": $clr-grey-list, + "blue-grey": $clr-blue-grey-list, + "black": $clr-black-list, + "white": $clr-white-list +); + + +// +// Typography +// + +$clr-ui-display-4: $clr-grey-600; +$clr-ui-display-3: $clr-grey-600; +$clr-ui-display-2: $clr-grey-600; +$clr-ui-display-1: $clr-grey-600; +$clr-ui-headline: $clr-grey-900; +$clr-ui-title: $clr-grey-900; +$clr-ui-subhead-1: $clr-grey-900; +$clr-ui-body-2: $clr-grey-900; +$clr-ui-body-1: $clr-grey-900; +$clr-ui-caption: $clr-grey-600; +$clr-ui-menu: $clr-grey-900; +$clr-ui-button: $clr-grey-900; + + +$error-red: $clr-red-500; +$success-green: $clr-green-500; + +$valid-value-color: $clr-green-a400; +$error-value-color: $clr-red-a400; + +$base-shadow-color: #000; +$base-overlay-background: #000; +$base-border-color: #fff; +$simple-background-color: #fff; +$primary-text-color: #FFF; + +$gold-star: $clr-amber-500; + +$ui-base-dark-color: $clr-blue-grey-900; +$ui-base-color: $clr-blue-grey-800; +$ui-base-light-color: $clr-blue-grey-700; +$ui-base-lighter-color: $clr-blue-grey-400; +$ui-base-lightest-color: $clr-blue-grey-300; +$ui-primary-color: $clr-blue-grey-100; +$ui-secondary-color: $clr-blue-grey-200; +$ui-highlight-color: $clr-pink-a200; + +$secondary-text-color: $ui-secondary-color; +$darker-text-color: rgba($primary-text-color, 0.7); +$dark-text-color: rgba($primary-text-color, 0.5); +$inverted-text-color: #000 !default; +$lighter-text-color: rgba($inverted-text-color, 0.7); +$light-text-color: rgba($inverted-text-color, 0.5); + +$primary: $clr-teal-500; +$accent: $clr-pink-a200; + +$ui-avatar-border-size: 0%; + +@import 'application'; +.activity-stream .status.light .status__content a.status__content__spoiler-link { + color: #000; +} +$ui-highlight-color: $clr-light-blue-500; +@import 'boost'; +//@import 'fullwidth-media';