From f4bc77f2908a193ef164b4b4fe68b584d71aaa2c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Jun 2019 10:23:41 +0200 Subject: [PATCH] Improve light theme (#10992) --- .../mastodon/features/list_timeline/index.js | 2 - .../mastodon/features/lists/index.js | 2 +- .../styles/mastodon-light/diff.scss | 280 ++++++++++++++++-- .../styles/mastodon-light/variables.scss | 2 +- .../styles/mastodon/components.scss | 49 ++- .../styles/mastodon/stream_entries.scss | 4 + app/views/accounts/show.html.haml | 2 +- 7 files changed, 290 insertions(+), 51 deletions(-) diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js index ad7d16f95..0db6d2228 100644 --- a/app/javascript/mastodon/features/list_timeline/index.js +++ b/app/javascript/mastodon/features/list_timeline/index.js @@ -175,8 +175,6 @@ class ListTimeline extends React.PureComponent { - -
- } > {lists.map(list => diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index d35a59821..21b762182 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -1,6 +1,10 @@ // 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; @@ -11,18 +15,119 @@ } // Change default background colors of columns -.column { - > .scrollable { +.column > .scrollable, +.getting-started, +.column-inline-form { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.column-back-button, +.column-header { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + + &--slim-button { + border: 0; + top: -49px; + right: 1px; + } +} + +.column-header__back-button, +.column-header__button, +.column-header__button.active, +.account__header__bar { + background: $white; +} + +.column-header__button.active { + color: $ui-highlight-color; + + &:hover, + &:active, + &:focus { + color: $ui-highlight-color; background: $white; } } -.drawer__inner { +.account__header__bar .avatar .account__avatar { + border-color: $white; +} + +.getting-started__footer a { + color: $ui-secondary-color; + text-decoration: underline; +} + +.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; + } + } +} + +.compose-form__autosuggest-wrapper, +.poll__text 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 { + border: 1px solid lighten($ui-base-color, 8%); +} + +.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: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; + background: $white url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; } // Change the colors used in compose-form @@ -93,16 +198,16 @@ .detailed-status, .detailed-status__action-bar { - background: darken($ui-base-color, 6%); + 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-lighter-color; + background: $ui-base-color; &:hover { - background: lighten($ui-base-lighter-color, 6%); + background: lighten($ui-base-color, 4%); } } @@ -112,41 +217,47 @@ 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: $ui-base-color; + background: $white; &__arrow { &.left { - border-left-color: $ui-base-color; + border-left-color: $white; } &.top { - border-top-color: $ui-base-color; + border-top-color: $white; } &.bottom { - border-bottom-color: $ui-base-color; + border-bottom-color: $white; } &.right { - border-right-color: $ui-base-color; + border-right-color: $white; } } &__item { a { - background: $ui-base-color; + 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, @@ -162,7 +273,7 @@ .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 li a.selected, +.admin-wrapper .sidebar ul .simple-navigation-active-leaf a, .simple_form .block-button, .simple_form .button, .simple_form button { @@ -170,7 +281,7 @@ } .dropdown-menu__separator { - border-bottom-color: lighten($ui-base-color, 12%); + border-bottom-color: lighten($ui-base-color, 4%); } // Change the background colors of modals @@ -185,6 +296,12 @@ background: $ui-base-color; } +.column-header__collapsible-inner { + background: darken($ui-base-color, 4%); + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, @@ -239,7 +356,76 @@ 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%); +} + +.landing .hero-widget__text { + border-top: 0; + border-bottom: 0; +} + +.landing .hero-widget__footer { + background: $white; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; +} + +.brand__tagline { + color: $ui-secondary-color; +} + +.directory__tag > a { + &:hover, + &:active, + &:focus { + background: $ui-base-color; + } +} + +.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; @@ -294,6 +480,22 @@ 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, @@ -312,14 +514,42 @@ } .public-layout { + .account__section-headline { + border: 1px solid lighten($ui-base-color, 8%); + } + .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: lighten($ui-base-color, 12%); + background: lighten($ui-base-color, 24%); + + .nav-link { + color: $white; + + &:hover, + &:focus, + &:active { + color: $white; + } + } + + .brand { + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 28%); + } + } } .public-account-header { @@ -331,6 +561,18 @@ } } + &__bar { + &::before { + background: $account-background-color; + border: 1px solid lighten($ui-base-color, 8%); + border-top: 0; + } + + .avatar img { + border-color: $account-background-color; + } + } + &__tabs { &__name { h1, @@ -342,6 +584,7 @@ } } +.notification__filter-bar button.active::after, .account__section-headline a.active::after { border-color: transparent transparent $white; } @@ -355,6 +598,9 @@ .activity-stream, .nothing-here, .directory__tag > a, -.directory__tag > div { +.directory__tag > div, +.card > a, +.page-header, +.compose-form .compose-form__warning { box-shadow: none; } diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index 9f6d470b1..01748148f 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -17,7 +17,7 @@ $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: #2b5fd9; +$ui-highlight-color: #2b90d9; $primary-text-color: $black !default; $darker-text-color: $classic-base-color !default; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 46bccf609..32314137c 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2212,17 +2212,6 @@ a.account__display-name { height: calc(100% - 10px); overflow-y: hidden; - .search__input { - line-height: 18px; - font-size: 16px; - padding: 15px; - padding-right: 30px; - } - - .search__icon .fa { - top: 15px; - } - .navigation-bar { padding-top: 20px; padding-bottom: 20px; @@ -2709,21 +2698,22 @@ a.account__display-name { } .setting-text { - color: $darker-text-color; - background: transparent; - border: 0; - border-bottom: 2px solid $ui-primary-color; - box-sizing: border-box; display: block; - font-family: inherit; - margin-bottom: 10px; - padding: 7px 0; + box-sizing: border-box; width: 100%; + margin: 0; + color: $inverted-text-color; + background: $simple-background-color; + padding: 10px; + font-family: inherit; + font-size: 14px; + resize: vertical; + border: 0; + outline: 0; + border-radius: 4px; - &:focus, - &:active { - color: $primary-text-color; - border-bottom-color: $highlight-text-color; + &:focus { + outline: 0; } @media screen and (max-width: 600px) { @@ -3895,8 +3885,10 @@ a.status-card.compact:hover { @include search-input; display: block; - padding: 10px; + padding: 15px; padding-right: 30px; + line-height: 18px; + font-size: 16px; } .search__icon { @@ -3911,7 +3903,7 @@ a.status-card.compact:hover { .fa { position: absolute; - top: 10px; + top: 15px; right: 10px; z-index: 2; display: inline-block; @@ -5473,8 +5465,8 @@ noscript { } .column-inline-form { - padding: 7px 15px; - padding-right: 5px; + padding: 15px; + padding-right: 0; display: flex; justify-content: flex-start; align-items: center; @@ -5485,7 +5477,6 @@ noscript { input { width: 100%; - margin-bottom: 6px; &:focus { outline: 0; @@ -5495,7 +5486,7 @@ noscript { .icon-button { flex: 0 0 auto; - margin: 0 5px; + margin: 0 10px; } } diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index bfbb907e0..19ce0ab8f 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -4,6 +4,10 @@ overflow: hidden; margin-bottom: 10px; + &--under-tabs { + border-radius: 0 0 4px 4px; + } + @media screen and (max-width: $no-gap-breakpoint) { margin-bottom: 0; border-radius: 0; diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml index e4223119c..950e61847 100644 --- a/app/views/accounts/show.html.haml +++ b/app/views/accounts/show.html.haml @@ -38,7 +38,7 @@ - elsif @statuses.empty? = nothing_here 'nothing-here--under-tabs' - else - .activity-stream + .activity-stream.activity-stream--under-tabs - if params[:page].to_i.zero? = render partial: 'stream_entries/status', collection: @pinned_statuses, as: :status, locals: { pinned: true }