From 926d05eb590d3de6703ae304810f5a89739f6df6 Mon Sep 17 00:00:00 2001 From: Emma Winston Date: Tue, 20 Aug 2019 15:14:49 +0100 Subject: [PATCH 1/2] Add Fairy Floss theme for hometown --- app/javascript/styles/fairy-floss.scss | 3 + app/javascript/styles/fairy-floss/diff.scss | 515 ++++++++++++++++++ .../styles/fairy-floss/variables.scss | 70 +++ config/locales/en.yml | 1 + config/themes.yml | 1 + 5 files changed, 590 insertions(+) create mode 100644 app/javascript/styles/fairy-floss.scss create mode 100644 app/javascript/styles/fairy-floss/diff.scss create mode 100644 app/javascript/styles/fairy-floss/variables.scss diff --git a/app/javascript/styles/fairy-floss.scss b/app/javascript/styles/fairy-floss.scss new file mode 100644 index 000000000..6b26aeed5 --- /dev/null +++ b/app/javascript/styles/fairy-floss.scss @@ -0,0 +1,3 @@ +@import 'fairy-floss/variables'; +@import 'application'; +@import 'fairy-floss/diff' diff --git a/app/javascript/styles/fairy-floss/diff.scss b/app/javascript/styles/fairy-floss/diff.scss new file mode 100644 index 000000000..7463796e2 --- /dev/null +++ b/app/javascript/styles/fairy-floss/diff.scss @@ -0,0 +1,515 @@ +// 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: underline; + + &.mention { + text-decoration: none; + } + + &.mention span { + text-decoration: underline; + + &: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: underline; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } +} + +.getting-started__footer a { + text-decoration: underline; + + &: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; +} + + +// FAIRY FLOSS CHANGES + +html { + scrollbar-color: $purple3 rgba($purple3, 0.25); +} + +::-webkit-scrollbar-thumb { + background: $purplescrollbar; + border: 0 #f8f8f2; + border-radius: 50px; +} + +::-webkit-scrollbar-thumb:hover { + background: $purplescrollbar; + border: 0; +} + +::-webkit-scrollbar-track:hover { + background: darken($purple2, 6%); +} + +.loading-bar + { + background-color: $mint; + } + +// text +.status__display-name, .column-header, .column-link, .navigation-bar strong { + color: $purple4; +} + +.ui, +.notification__filter-bar button, .account__section-headline button, body, body.admin { + background: $purple1; +} + +.drawer__header { + background: $purple3; + + a { + &:hover, &:focus { + background: darken($purple3, 8%); + } + } +} + +.search__input { + &:hover, &:focus { + background: $purple2; + color: $purple4; + } + background: $purple2; + color: $purple4; +} + +::placeholder { + color: $purple4; +} + +.search-popout, .search-popout h4 { + color: $purple1; + background-color: $purple4; +} + +.drawer__inner, .drawer__inner__mastodon { + background: $purple3; +} + +.compose-form .compose-form__buttons-wrapper { + background: lighten($purple4, 8%); +} + +.text-icon-button.active { + color: darken($pink, 12%); +} + + +.column-header, .column-header__button, .column-header__back-button { + background: $purple5; +} + +.notification__filter-bar button.active::after, .notification__filter-bar a.active::after, .account__section-headline button.active::after, .account__section-headline a.active::after { + border-color: transparent transparent $purple2; +} + +.column>.scrollable { + background: $purple2; +} + +.load-more:hover { + background: darken($purple2, 4%); +} + +.empty-column-indicator, .error-column { + background: $purple2; +} + +.column-link__badge, .column-subheading { + background: $purple2; +} + +.column-link { + background: $purple3; +} + +// link previews + +.status-card.compact { + border-color: darken($purple5, 8%); + background: $purple5; +} + +.status-card__image { + background: $purple3; +} + +.status-card__content { + background: $purple5; + + &:hover, &:focus { + background: darken($purple5, 4%); + } +} + +.notification__filter-bar button.active, .notification__filter-bar a.active, .account__section-headline button.active, .account__section-headline a.active, .column-header>.column-header__back-button { + color: $mint; +} + +.react-toggle--checked .react-toggle-track, .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background: $pink; +} + +.react-toggle-track, .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background: $purple2; +} + +.column-header__collapsible-inner, .column-header__button.active, .column-header__button.active:hover, .column-header__button.active:focus { + background: $purple3; + color: $purpleicon; +} + +.column-inline-form, .column-back-button { + background: $purplescrollbar; +} + +.flex-spacer, .getting-started, .getting-started__wrapper { + background: $purple2; +} + +.status { + border-bottom: 1px solid lighten($purple2, 8%); +} + +.detailed-status, .detailed-status__action-bar { + background: $purplescrollbar; +} + +.detailed-status__action-bar { + border-top: 1px solid lighten($purple3, 8%); + border-bottom: 1px solid lighten($purple3, 8%); +} + +.focusable:focus { + background: $purplescrollbar; +} + +.focusable { + &:focus { + outline: 0; + background: $purplescrollbar; + + .detailed-status, + .detailed-status__action-bar { + background: lighten($purplescrollbar, 2%); + } + } +} + +.icon-button.active { + color: $pink; +} + +button.icon-button i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); +} +button.icon-button i.fa-retweet:hover { + background-image: url("data:image/svg+xml;utf8,"); +} + +.notification__favourite-icon-wrapper .star-icon, .star-icon.active, a.mention.hashtag { + color: $lemon; +} + +.reply-indicator__content a, .status__content a { + color: $mint; +} + +a.mention, .notification__message .fa { + color: $pink; +} + +.poll__link { + color: $purple4; +} + +.poll__chart { + color: lighten($coral, 4%); +} + +.poll__chart.leading { + color: $coral; +} + +.emoji-mart-bar:first-child { + background: $purple4; +} + +.emoji-mart-anchor-selected { + color: $purple2; + &:hover, &:focus { + color: $purple1; + } +} + +.emoji-mart-anchor-bar { + background: $purple1; +} + +// profile in deck view + +.account__header__bar { + background: $purple5; +} + +.account__header__image { + background: $purple1; +} + +.notification__filter-bar, .account__section-headline { + background: $purple1; +} + +.dropdown-menu, .dropdown-menu__item a { + background: $purple4; +} + +.dropdown-menu__item a { + &:hover, &:focus { + background: $purple2; + } +} + +.dropdown-menu__separator { + border-bottom: 1px solid darken($purple4, 4%); +} + +.button.logo-button.button--destructive:active, .button.logo-button.button--destructive:focus, .button.logo-button.button--destructive:hover { + background: $pink; +} + +// public profiles + +.public-layout .header { + background: $purple3; +} + +.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover { + background: darken($purple3, 4%); +} + +.public-layout .public-account-header__bar .avatar img { + background: $purple2; + border: 4px solid $purple2; +} + +.public-layout .header .nav-button { + background: darken($purple3, 4%); + &:hover, &:focus { + background: darken($purple3, 8%); + } +} + +.public-layout .public-account-header__bar:before { + background: $purplescrollbar; +} + +.public-layout .public-account-header__tabs__tabs .counter.active::after { + border-bottom: 4px solid $lemon; +} + +.public-layout .public-account-bio { + background: $purple3; +} + +.hero-widget__text { + background: $purple2; +} + +.activity-stream .entry { + background: $purple2; +} + +.simple_form .hint a { + color: $mint; +} + +.oauth-prompt strong, .follow-prompt strong { + color: $purple4; +} + +.simple_form input[type=text]:active, .simple_form input[type=text]:focus, .simple_form input[type=number]:active, .simple_form input[type=number]:focus, .simple_form input[type=email]:active, .simple_form input[type=email]:focus, .simple_form input[type=password]:active, .simple_form input[type=password]:focus, .simple_form textarea:active, .simple_form textarea:focus { + border-color: $mint; +} + +.nothing-here { + background: $purple2; +} + + +// admin zone + +.admin-wrapper .content h2 { + color: $purple4; +} + +.admin-wrapper .sidebar-wrapper { + background: $purple2; +} + +.admin-wrapper .sidebar ul .simple-navigation-active-leaf a { + background: $purpleborder; + &:hover, &:focus { + background: lighten($purpleborder, 8%); + } +} + +.admin-wrapper .sidebar ul ul { + background: $purple1; +} + +.admin-wrapper .sidebar ul a:hover, .admin-wrapper .sidebar ul a:focus { + background: $purpleborder; +} + +.admin-wrapper .content .muted-hint a { + color: $mint; +} + +.card__bar { + background: $purplescrollbar; +} + +.simple_form input[type=text], .simple_form input[type=number], .simple_form input[type=email], .simple_form input[type=password], .simple_form textarea { + background: darken($purple1, 6%); +} + +.simple_form select { + background: darken($purple1, 6%) url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px +} + +.table th, .table td { + background: darken($purple2, 6%); +} + +.table > thead > tr > th { + color: $lemon; +} + +.table > tbody > tr:nth-child(odd) > td, .table > tbody > tr:nth-child(odd) > th { + background: $purple3; +} + +// directory + +.accounts-table tbody td { + background: $purple3; +} + +.page-header { + background: $purpleborder; + + h1 { + color: $purple4; + } +} + +.box-widget, .contact-widget, .landing-page__information.contact-widget { + background: $purple2; +} + +.notice-widget a { + color: $mint; +} + +.directory__tag a { + background: $purple2; + &:hover, &:focus { + background: lighten($purple2, 4%); + } +} + +// about/more + +.landing-page__call-to-action { + background: $purple3; +} + +.rich-formatting h3, .rich-formatting h4, .rich-formatting h2, .rich-formatting h1 { + color: lighten($purpleicon, 8%); +} + +.landing-page__information strong { + color: lighten($purpleicon, 10%); +} + +// about + +.simple_form .input.boolean label a { + color: $mint; +} + +::-webkit-input-placeholder { /* Edge */ + color: $purpleicon; +} + +:-ms-input-placeholder { /* Internet Explorer 10-11 */ + color: $purpleicon; +} + +::placeholder { + color: $purpleicon; +} + +.landing .hero-widget__footer { + background: $purple3; +} diff --git a/app/javascript/styles/fairy-floss/variables.scss b/app/javascript/styles/fairy-floss/variables.scss new file mode 100644 index 000000000..6a714f3ff --- /dev/null +++ b/app/javascript/styles/fairy-floss/variables.scss @@ -0,0 +1,70 @@ +// FAIRY FLOSS VARIABLES + +// Purples +$purple1: #2e2b3b; +$purple2: #504b68; +$purple3: #5f5676; +$purple4: #c8c4d4; +$purple5: #474059; +$purpleicon: #ada6bf; +$purpleborder: #5f5676; +$purplescrollbar: #5a5475; +$mint: #c2ffdf; +$pink: #ffb8d1; +$lemon: #fff683; +$coral: #ff857f; + +// 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 + +// Values from the classic Mastodon UI +$classic-base-color: $purple1; // Midnight Express +$classic-primary-color: $purple4; // Echo Blue +$classic-secondary-color: #d9e1e8; // Pattens Blue +$classic-highlight-color: #ff857f; // 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: $purpleicon !default; +$secondary-text-color: $ui-secondary-color !default; +$highlight-text-color: $ui-highlight-color !default; +$action-button-color: $purpleicon !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/config/locales/en.yml b/config/locales/en.yml index eadbde443..cb4cbee72 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1015,6 +1015,7 @@ en: contrast: Mastodon (High contrast) default: Mastodon (Dark) mastodon-light: Mastodon (Light) + fairy-floss: Fairy Floss (Pastel dark) time: formats: default: "%b %d, %Y, %H:%M" diff --git a/config/themes.yml b/config/themes.yml index 9c21c9459..eb4938bdb 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -1,3 +1,4 @@ default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss +fairy-floss: styles/fairy-floss.scss From 63a7118ef12facd25d2bc1ec828868432b78967c Mon Sep 17 00:00:00 2001 From: Emma Winston Date: Wed, 21 Aug 2019 21:14:51 +0100 Subject: [PATCH 2/2] Bugfix for notification border colours - Fix bug which showed certain notifications with the wrong bottom border colour --- app/javascript/styles/fairy-floss/diff.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/javascript/styles/fairy-floss/diff.scss b/app/javascript/styles/fairy-floss/diff.scss index 7463796e2..2eb4d4edf 100644 --- a/app/javascript/styles/fairy-floss/diff.scss +++ b/app/javascript/styles/fairy-floss/diff.scss @@ -513,3 +513,7 @@ a.mention, .notification__message .fa { .landing .hero-widget__footer { background: $purple3; } + +.status.status-direct:not(.read), .account { + border-bottom: 1px solid lighten($purple2, 8%); +}