diff --git a/styles/coffee-dark.scss b/styles/coffee-dark.scss deleted file mode 100644 index 60bf96f..0000000 --- a/styles/coffee-dark.scss +++ /dev/null @@ -1,7 +0,0 @@ -@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 deleted file mode 100644 index b612b87..0000000 --- a/styles/coffee-dark/diff.scss +++ /dev/null @@ -1,77 +0,0 @@ -// 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 deleted file mode 100644 index 1a3d38b..0000000 --- a/styles/coffee-dark/variables.scss +++ /dev/null @@ -1,56 +0,0 @@ -// 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 deleted file mode 100644 index 118721f..0000000 --- a/styles/coffee-light.scss +++ /dev/null @@ -1,6 +0,0 @@ -@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 deleted file mode 100644 index 7a846bc..0000000 --- a/styles/coffee-light/diff.scss +++ /dev/null @@ -1,776 +0,0 @@ -// 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 deleted file mode 100644 index 5faae83..0000000 --- a/styles/coffee-light/variables.scss +++ /dev/null @@ -1,41 +0,0 @@ -// 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-contrast.scss b/styles/modern-contrast.scss index 1fb4c61..5f7f74c 100644 --- a/styles/modern-contrast.scss +++ b/styles/modern-contrast.scss @@ -1,4 +1,4 @@ -@import 'modern/contrast'; +@import 'contrast/variables'; @import 'application'; @import 'modern/style'; @import 'contrast/diff'; diff --git a/styles/modern-dark.scss b/styles/modern-dark.scss index 09a5778..0d3d5ce 100644 --- a/styles/modern-dark.scss +++ b/styles/modern-dark.scss @@ -1,4 +1,4 @@ -@import 'modern/dark'; +@import 'mastodon/variables'; @import 'application'; @import 'modern/style'; diff --git a/styles/modern-light.scss b/styles/modern-light.scss index 073febc..ed35614 100644 --- a/styles/modern-light.scss +++ b/styles/modern-light.scss @@ -1,4 +1,4 @@ -@import 'modern/light'; +@import 'mastodon-light/variables'; @import 'application'; @import 'modern/style'; @import 'mastodon-light/diff'; diff --git a/styles/modern/contrast.scss b/styles/modern/contrast.scss deleted file mode 100644 index 4ce7425..0000000 --- a/styles/modern/contrast.scss +++ /dev/null @@ -1,24 +0,0 @@ -// Dependent colors -$black: #000000; - -$classic-base-color: #282c37; -$classic-primary-color: #9baec8; -$classic-secondary-color: #d9e1e8; -$classic-highlight-color: #e7b01c; - -$ui-base-color: $classic-base-color !default; -$ui-primary-color: $classic-primary-color !default; -$ui-secondary-color: $classic-secondary-color !default; - -// Differences -$ui-highlight-color: #e7b01c; - -$darker-text-color: lighten($ui-primary-color, 20%) !default; -$dark-text-color: lighten($ui-primary-color, 12%) !default; -$secondary-text-color: lighten($ui-secondary-color, 6%) !default; -$highlight-text-color: $classic-highlight-color !default; -$action-button-color: #8d9ac2; - -$inverted-text-color: $black !default; -$lighter-text-color: darken($ui-base-color, 6%) !default; -$light-text-color: darken($ui-primary-color, 40%) !default; diff --git a/styles/modern/dark.scss b/styles/modern/dark.scss deleted file mode 100644 index 1a3d38b..0000000 --- a/styles/modern/dark.scss +++ /dev/null @@ -1,56 +0,0 @@ -// 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 deleted file mode 100644 index 5faae83..0000000 --- a/styles/modern/light.scss +++ /dev/null @@ -1,41 +0,0 @@ -// 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 index e949235..4030453 100644 --- a/styles/modern/style.scss +++ b/styles/modern/style.scss @@ -6,6 +6,7 @@ --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); + --shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1); } #mastodon .button--block, .public-layout .button--block { @@ -235,6 +236,10 @@ .public-layout .columns-area__panels__main > div { border-radius: var(--radius); } +#mastodon .columns-area__panels__main > div:last-child, +.public-layout .columns-area__panels__main > div:last-child { + box-shadow: var(--shadow-med); +} #mastodon .columns-area__panels__main .scrollable, .public-layout .columns-area__panels__main .scrollable { padding-bottom: 40vh !important; @@ -508,6 +513,7 @@ border-radius: var(--radius) !important; transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s; animation: slideUp 0.4s forwards cubic-bezier(0, 1, 1, 1); + position: relative; } #mastodon .focusable.focusable, .public-layout .focusable.focusable, @@ -533,19 +539,46 @@ .public-layout .statuses-grid__item .detailed-status.entry .status { border: 0 !important; } -#mastodon .focusable:hover, -.public-layout .focusable:hover, -#mastodon .entry:hover, -.public-layout .entry:hover, -#mastodon .statuses-grid__item .detailed-status:hover, -.public-layout .statuses-grid__item .detailed-status:hover, -#mastodon .focusable:focus-within, -.public-layout .focusable:focus-within, -#mastodon .entry:focus-within, -.public-layout .entry:focus-within, -#mastodon .statuses-grid__item .detailed-status:focus-within, -.public-layout .statuses-grid__item .detailed-status:focus-within { - background-color: var(--hover-color) !important; +#mastodon .focusable:not(.detailed-status__wrapper)::after, +.public-layout .focusable:not(.detailed-status__wrapper)::after, +#mastodon .entry:not(.detailed-status__wrapper)::after, +.public-layout .entry:not(.detailed-status__wrapper)::after, +#mastodon .statuses-grid__item .detailed-status:not(.detailed-status__wrapper)::after, +.public-layout .statuses-grid__item .detailed-status:not(.detailed-status__wrapper)::after { + content: ""; + position: absolute; + bottom: 0px; + left: var(--radius); + right: var(--radius); + border-top: 1px solid var(--border-color); +} +#mastodon .focusable:not(.detailed-status__wrapper)::before, +.public-layout .focusable:not(.detailed-status__wrapper)::before, +#mastodon .entry:not(.detailed-status__wrapper)::before, +.public-layout .entry:not(.detailed-status__wrapper)::before, +#mastodon .statuses-grid__item .detailed-status:not(.detailed-status__wrapper)::before, +.public-layout .statuses-grid__item .detailed-status:not(.detailed-status__wrapper)::before { + content: ""; + position: absolute; + z-index: -1; + inset: 0; + bottom: 1px; + pointer-events: none; + transition: background-color 0.2s; +} +#mastodon .focusable:not(.detailed-status__wrapper):hover::before, +.public-layout .focusable:not(.detailed-status__wrapper):hover::before, +#mastodon .entry:not(.detailed-status__wrapper):hover::before, +.public-layout .entry:not(.detailed-status__wrapper):hover::before, +#mastodon .statuses-grid__item .detailed-status:not(.detailed-status__wrapper):hover::before, +.public-layout .statuses-grid__item .detailed-status:not(.detailed-status__wrapper):hover::before, +#mastodon .focusable:not(.detailed-status__wrapper):focus-within::before, +.public-layout .focusable:not(.detailed-status__wrapper):focus-within::before, +#mastodon .entry:not(.detailed-status__wrapper):focus-within::before, +.public-layout .entry:not(.detailed-status__wrapper):focus-within::before, +#mastodon .statuses-grid__item .detailed-status:not(.detailed-status__wrapper):focus-within::before, +.public-layout .statuses-grid__item .detailed-status:not(.detailed-status__wrapper):focus-within::before { + background-color: var(--hover-color); } #mastodon .status, .public-layout .status { @@ -996,6 +1029,18 @@ .public-layout .column-link:focus:before { opacity: 1 !important; } +#mastodon .getting-started__trends .trends__item__current, +.public-layout .getting-started__trends .trends__item__current { + display: none; +} +#mastodon .getting-started__trends .trends__item__sparkline path:first-child, +.public-layout .getting-started__trends .trends__item__sparkline path:first-child { + display: none; +} +#mastodon .getting-started__trends .trends__item__sparkline path:last-child, +.public-layout .getting-started__trends .trends__item__sparkline path:last-child { + mask: linear-gradient(to left, #000, #000, transparent); +} #mastodon .getting-started, .public-layout .getting-started { padding: 5px 10px; @@ -1107,23 +1152,23 @@ font-size: 1.1em !important; line-height: 2; } -#mastodon.public-layout .container:nth-child(2) .grid .column-1, -.public-layout.public-layout .container:nth-child(2) .grid .column-1 { +#mastodon.public-layout .container:nth-child(2) > .grid .column-1, +.public-layout.public-layout .container:nth-child(2) > .grid .column-1 { position: sticky; align-self: flex-end; bottom: 0; min-height: calc(100vh - 80px); } -#mastodon.public-layout .container:nth-child(2) .grid .column-1 > *, -.public-layout.public-layout .container:nth-child(2) .grid .column-1 > * { +#mastodon.public-layout .container:nth-child(2) > .grid .column-1 > *, +.public-layout.public-layout .container:nth-child(2) > .grid .column-1 > * { border-radius: var(--radius); overflow: hidden; border: 0 !important; } -#mastodon.public-layout .container:nth-child(2) .grid .column-1 a, -.public-layout.public-layout .container:nth-child(2) .grid .column-1 a, -#mastodon.public-layout .container:nth-child(2) .grid .column-1 .hero-widget__text, -.public-layout.public-layout .container:nth-child(2) .grid .column-1 .hero-widget__text { +#mastodon.public-layout .container:nth-child(2) > .grid .column-1 a, +.public-layout.public-layout .container:nth-child(2) > .grid .column-1 a, +#mastodon.public-layout .container:nth-child(2) > .grid .column-1 .hero-widget__text, +.public-layout.public-layout .container:nth-child(2) > .grid .column-1 .hero-widget__text { border: 0 !important; } @media (min-width: 416px) { @@ -1165,7 +1210,7 @@ .public-layout.public-layout .table-of-contents { max-height: calc(100vh - 20px); min-height: unset !important; - overflow-y: scroll; + overflow-y: scroll !important; display: flex; flex-direction: column; position: sticky; @@ -1296,21 +1341,31 @@ border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } -#mastodon.public-layout .status-public .status__content, -.public-layout.public-layout .status-public .status__content { +#mastodon.public-layout .entry:last-child:before, +.public-layout.public-layout .entry:last-child:before { + content: unset !important; +} +#mastodon.public-layout .entry::before, +.public-layout.public-layout .entry::before, +#mastodon.public-layout .entry::after, +.public-layout.public-layout .entry::after { + bottom: 1px !important; +} +#mastodon.public-layout .status .status__content, +.public-layout.public-layout .status .status__content { margin-top: 0; } -#mastodon.public-layout .detailed-status-public, -.public-layout.public-layout .detailed-status-public { +#mastodon.public-layout .detailed-status, +.public-layout.public-layout .detailed-status { padding: 20px !important; padding-bottom: 5px !important; } -#mastodon.public-layout .detailed-status-public .status__content, -.public-layout.public-layout .detailed-status-public .status__content { +#mastodon.public-layout .detailed-status .status__content, +.public-layout.public-layout .detailed-status .status__content { margin-top: 0; } -#mastodon.public-layout .detailed-status-public .detailed-status__meta, -.public-layout.public-layout .detailed-status-public .detailed-status__meta { +#mastodon.public-layout .detailed-status .detailed-status__meta, +.public-layout.public-layout .detailed-status .detailed-status__meta { margin-top: 15px; margin-bottom: 10px; } diff --git a/themes.yml b/themes.yml index 691e46d..bae5c20 100644 --- a/themes.yml +++ b/themes.yml @@ -4,8 +4,6 @@ mastodon-light: styles/mastodon-light.scss modern-dark: styles/modern-dark.scss modern-light: styles/modern-light.scss modern-contrast: styles/modern-contrast.scss -coffee-dark: styles/coffee-dark.scss -coffee-light: styles/coffee-light.scss dark-red: styles/dark-red.scss light-red: styles/light-red.scss photon-light: styles/photon_light.scss