diff --git a/app/javascript/styles/boost.scss b/app/javascript/styles/boost.scss new file mode 100644 index 000000000..67f9a85d7 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/coffee-dark.scss b/app/javascript/styles/coffee-dark.scss new file mode 100644 index 000000000..6d613982f --- /dev/null +++ b/app/javascript/styles/coffee-dark.scss @@ -0,0 +1,11 @@ +@import 'coffee-dark/variables'; +@import 'application'; +@import 'coffee-dark/diff'; +//@import 'boost'; +//@import 'mods/display_browserfont'; +@import 'mods/display_breakname'; +@import 'mods/display_fullname'; +@import 'mods/display_emojizoom'; +//@import 'mods/display_circleavatar'; +@import 'mods/layout_1600px'; +@import 'mods/layout_widercolumns'; diff --git a/app/javascript/styles/coffee-dark/diff.scss b/app/javascript/styles/coffee-dark/diff.scss new file mode 100644 index 000000000..b612b87f4 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/coffee-dark/variables.scss b/app/javascript/styles/coffee-dark/variables.scss new file mode 100644 index 000000000..e90d6842a --- /dev/null +++ b/app/javascript/styles/coffee-dark/variables.scss @@ -0,0 +1,65 @@ +// 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 +//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue +//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark) +//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this) +//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark) +//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark) +//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white) + +//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high +//$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog) + +// 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/app/javascript/styles/coffee-light.scss b/app/javascript/styles/coffee-light.scss new file mode 100644 index 000000000..118721f73 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/coffee-light/diff.scss b/app/javascript/styles/coffee-light/diff.scss new file mode 100644 index 000000000..7a846bcc6 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/coffee-light/variables.scss b/app/javascript/styles/coffee-light/variables.scss new file mode 100644 index 000000000..5faae83b6 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/cute.scss b/app/javascript/styles/cute.scss new file mode 100644 index 000000000..1a3dfb04e --- /dev/null +++ b/app/javascript/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/app/javascript/styles/cute/overrides.scss b/app/javascript/styles/cute/overrides.scss new file mode 100644 index 000000000..e69de29bb diff --git a/app/javascript/styles/cute/palette.scss b/app/javascript/styles/cute/palette.scss new file mode 100644 index 000000000..74d2bf093 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/dark-red.scss b/app/javascript/styles/dark-red.scss new file mode 100644 index 000000000..60c35c04e --- /dev/null +++ b/app/javascript/styles/dark-red.scss @@ -0,0 +1,3 @@ +@import 'dark-red/variables'; +@import 'application'; +@import 'dark-red/diff'; diff --git a/app/javascript/styles/dark-red/diff.scss b/app/javascript/styles/dark-red/diff.scss new file mode 100644 index 000000000..b612b87f4 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/dark-red/variables.scss b/app/javascript/styles/dark-red/variables.scss new file mode 100644 index 000000000..d8456fe12 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/droid.scss b/app/javascript/styles/droid.scss new file mode 100644 index 000000000..846fbd7ef --- /dev/null +++ b/app/javascript/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/app/javascript/styles/droid/overrides.scss b/app/javascript/styles/droid/overrides.scss new file mode 100644 index 000000000..e69de29bb diff --git a/app/javascript/styles/droid/palette.scss b/app/javascript/styles/droid/palette.scss new file mode 100644 index 000000000..4dffdfddf --- /dev/null +++ b/app/javascript/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/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss new file mode 100644 index 000000000..f6a036d4f --- /dev/null +++ b/app/javascript/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/app/javascript/styles/light-red.scss b/app/javascript/styles/light-red.scss new file mode 100644 index 000000000..6969822c1 --- /dev/null +++ b/app/javascript/styles/light-red.scss @@ -0,0 +1,3 @@ +@import 'light-red/variables'; +@import 'application'; +@import 'light-red/diff'; diff --git a/app/javascript/styles/light-red/diff.scss b/app/javascript/styles/light-red/diff.scss new file mode 100644 index 000000000..7a846bcc6 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/light-red/variables.scss b/app/javascript/styles/light-red/variables.scss new file mode 100644 index 000000000..3bbef4ae0 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/deprecated/display_bettersearch.css b/app/javascript/styles/mods/deprecated/display_bettersearch.css new file mode 100644 index 000000000..c9bf8850f --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_breakname.css b/app/javascript/styles/mods/display_breakname.css new file mode 100644 index 000000000..fc3936e23 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_browserfont.css b/app/javascript/styles/mods/display_browserfont.css new file mode 100644 index 000000000..6389f20b4 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_circleavatar.css b/app/javascript/styles/mods/display_circleavatar.css new file mode 100644 index 000000000..b7d5d4955 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_collapsedinteractions.css b/app/javascript/styles/mods/display_collapsedinteractions.css new file mode 100644 index 000000000..7cb1f7c6a --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_emojizoom.css b/app/javascript/styles/mods/display_emojizoom.css new file mode 100644 index 000000000..32ba536bb --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_fadedinteractions.css b/app/javascript/styles/mods/display_fadedinteractions.css new file mode 100644 index 000000000..8945d2699 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_fullmedia.css b/app/javascript/styles/mods/display_fullmedia.css new file mode 100644 index 000000000..04cdbf574 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_fullname.css b/app/javascript/styles/mods/display_fullname.css new file mode 100644 index 000000000..1f2e541af --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_hidefollowcounts.css b/app/javascript/styles/mods/display_hidefollowcounts.css new file mode 100644 index 000000000..e9ac9ed56 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_hidereplycounts.css b/app/javascript/styles/mods/display_hidereplycounts.css new file mode 100644 index 000000000..513251cde --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_starstohearts.css b/app/javascript/styles/mods/display_starstohearts.css new file mode 100644 index 000000000..53efb5576 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/display_transparentmedia.css b/app/javascript/styles/mods/display_transparentmedia.css new file mode 100644 index 000000000..afa18a18a --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/layout_1600px.css b/app/javascript/styles/mods/layout_1600px.css new file mode 100644 index 000000000..f81af0046 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/layout_elefriend.css b/app/javascript/styles/mods/layout_elefriend.css new file mode 100644 index 000000000..3d79a2cf2 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/layout_gettingstartedheight.css b/app/javascript/styles/mods/layout_gettingstartedheight.css new file mode 100644 index 000000000..536a70751 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/layout_hidedisabled.css b/app/javascript/styles/mods/layout_hidedisabled.css new file mode 100644 index 000000000..3196db9b1 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/layout_hidefiltered.css b/app/javascript/styles/mods/layout_hidefiltered.css new file mode 100644 index 000000000..f701e5f53 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/layout_mobile_bottombar.css b/app/javascript/styles/mods/layout_mobile_bottombar.css new file mode 100644 index 000000000..e5ddaf4e7 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/layout_singlecolumn.css b/app/javascript/styles/mods/layout_singlecolumn.css new file mode 100644 index 000000000..88bf19ee4 --- /dev/null +++ b/app/javascript/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/app/javascript/styles/mods/layout_widercolumns.css b/app/javascript/styles/mods/layout_widercolumns.css new file mode 100644 index 000000000..557297cf6 --- /dev/null +++ b/app/javascript/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: 580px) { + .column, #mastodon-timeline {min-width: 55ch;} +} diff --git a/app/javascript/styles/mods/test_colorizedlogo.css b/app/javascript/styles/mods/test_colorizedlogo.css new file mode 100644 index 000000000..634ae5f0c --- /dev/null +++ b/app/javascript/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/app/javascript/styles/oe7drt-blue.scss b/app/javascript/styles/oe7drt-blue.scss new file mode 100644 index 000000000..efde78635 --- /dev/null +++ b/app/javascript/styles/oe7drt-blue.scss @@ -0,0 +1,11 @@ +@import 'oe7drt-blue/variables'; +@import 'application'; +@import 'oe7drt-blue/diff'; +//@import 'boost'; +//@import 'mods/display_browserfont'; +@import 'mods/display_breakname'; +@import 'mods/display_fullname'; +@import 'mods/display_emojizoom'; +//@import 'mods/display_circleavatar'; +@import 'mods/layout_1600px'; +@import 'mods/layout_widercolumns'; diff --git a/app/javascript/styles/oe7drt-blue/diff.scss b/app/javascript/styles/oe7drt-blue/diff.scss new file mode 100644 index 000000000..b612b87f4 --- /dev/null +++ b/app/javascript/styles/oe7drt-blue/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/app/javascript/styles/oe7drt-blue/variables.scss b/app/javascript/styles/oe7drt-blue/variables.scss new file mode 100644 index 000000000..d3f858a74 --- /dev/null +++ b/app/javascript/styles/oe7drt-blue/variables.scss @@ -0,0 +1,66 @@ +// 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 +//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue +//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark) +//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this) +//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark) +//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark) +//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white) + +//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high +//$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog) +$classic-highlight-color: #1b83c8; // OE7DRT /\dark (blue like chaos.social) + +// 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/app/javascript/styles/oe7drt-greeny.scss b/app/javascript/styles/oe7drt-greeny.scss new file mode 100644 index 000000000..993c3bbbb --- /dev/null +++ b/app/javascript/styles/oe7drt-greeny.scss @@ -0,0 +1,11 @@ +@import 'oe7drt-greeny/variables'; +@import 'application'; +@import 'oe7drt-greeny/diff'; +//@import 'boost'; +//@import 'mods/display_browserfont'; +@import 'mods/display_breakname'; +@import 'mods/display_fullname'; +@import 'mods/display_emojizoom'; +//@import 'mods/display_circleavatar'; +@import 'mods/layout_1600px'; +@import 'mods/layout_widercolumns'; diff --git a/app/javascript/styles/oe7drt-greeny/diff.scss b/app/javascript/styles/oe7drt-greeny/diff.scss new file mode 100644 index 000000000..b612b87f4 --- /dev/null +++ b/app/javascript/styles/oe7drt-greeny/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/app/javascript/styles/oe7drt-greeny/variables.scss b/app/javascript/styles/oe7drt-greeny/variables.scss new file mode 100644 index 000000000..34db656a8 --- /dev/null +++ b/app/javascript/styles/oe7drt-greeny/variables.scss @@ -0,0 +1,66 @@ +// 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 +//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue +//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark) +//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this) +//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark) +//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark) +//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white) + +//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high +$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog) +//$classic-highlight-color: #1b83c8; // OE7DRT /\dark (blue like chaos.social) + +// 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/app/javascript/styles/oe7drt.scss b/app/javascript/styles/oe7drt.scss new file mode 100644 index 000000000..8fbe5534b --- /dev/null +++ b/app/javascript/styles/oe7drt.scss @@ -0,0 +1,2 @@ +@import 'application'; +@import 'mastodon-material/profiles/oe7drt/loader';