From f4bc77f2908a193ef164b4b4fe68b584d71aaa2c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Jun 2019 10:23:41 +0200 Subject: Improve light theme (#10992) --- app/javascript/styles/mastodon-light/diff.scss | 280 +++++++++++++++++++-- .../styles/mastodon-light/variables.scss | 2 +- 2 files changed, 264 insertions(+), 18 deletions(-) (limited to 'app/javascript/styles/mastodon-light') 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; -- cgit From 20dda5cca0a4015a743250b4e584a3101e7675f2 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Jun 2019 15:30:06 +0200 Subject: Change full logo to use primary text color of the given theme (#10994) * Change full logo to use primary text color of the given theme * Fix colors of public layout header in light theme --- app/helpers/stream_entries_helper.rb | 4 ++++ app/javascript/images/logo_full.svg | 2 +- app/javascript/styles/mastodon-light/diff.scss | 15 +++------------ app/javascript/styles/mastodon/about.scss | 3 ++- app/javascript/styles/mastodon/containers.scss | 6 ++++-- app/views/about/show.html.haml | 2 +- app/views/layouts/application.html.haml | 1 + app/views/layouts/auth.html.haml | 2 +- app/views/layouts/public.html.haml | 2 +- 9 files changed, 18 insertions(+), 19 deletions(-) (limited to 'app/javascript/styles/mastodon-light') diff --git a/app/helpers/stream_entries_helper.rb b/app/helpers/stream_entries_helper.rb index a66fb83ea..02a860a74 100644 --- a/app/helpers/stream_entries_helper.rb +++ b/app/helpers/stream_entries_helper.rb @@ -38,6 +38,10 @@ module StreamEntriesHelper content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976') end + def svg_logo_full + content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo-full'), 'viewBox' => '0 0 713.35878 175.8678') + end + def account_badge(account, all: false) if account.bot? content_tag(:div, content_tag(:div, t('accounts.roles.bot'), class: 'account-role bot'), class: 'roles') diff --git a/app/javascript/images/logo_full.svg b/app/javascript/images/logo_full.svg index c33883342..03bcf93e3 100644 --- a/app/javascript/images/logo_full.svg +++ b/app/javascript/images/logo_full.svg @@ -1 +1 @@ - + diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 21b762182..b6c95fe6a 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -531,23 +531,14 @@ html { } .header { - background: lighten($ui-base-color, 24%); - - .nav-link { - color: $white; - - &:hover, - &:focus, - &:active { - color: $white; - } - } + background: $ui-base-color; + border: 1px solid lighten($ui-base-color, 8%); .brand { &:hover, &:focus, &:active { - background: lighten($ui-base-color, 28%); + background: lighten($ui-base-color, 4%); } } } diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index d3b4a5909..61637ce96 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -659,7 +659,8 @@ $small-breakpoint: 960px; align-items: center; padding: 50px; - img { + svg { + fill: $primary-text-color; height: 52px; } diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 2d68d2b70..3564bf07b 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -21,7 +21,8 @@ justify-content: center; align-items: center; - img { + svg { + fill: $primary-text-color; height: 42px; margin-right: 10px; } @@ -256,12 +257,13 @@ display: block; padding: 15px; - img { + svg { display: block; height: 18px; width: auto; position: relative; bottom: -2px; + fill: $primary-text-color; @media screen and (max-width: $no-gap-breakpoint) { height: 20px; diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index 45e5f0717..f24f4e195 100644 --- a/app/views/about/show.html.haml +++ b/app/views/about/show.html.haml @@ -8,7 +8,7 @@ .landing .landing__brand = link_to root_url, class: 'brand' do - = image_pack_tag 'logo_full.svg', alt: 'Mastodon' + = svg_logo_full %span.brand__tagline=t 'about.tagline' .landing__grid diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 220a4ca9b..747d80bf0 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -36,3 +36,4 @@ %div{ style: 'display: none'} = render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg') + = render file: Rails.root.join('app', 'javascript', 'images', 'logo_full.svg') diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml index aa1990972..585e24655 100644 --- a/app/views/layouts/auth.html.haml +++ b/app/views/layouts/auth.html.haml @@ -6,7 +6,7 @@ .logo-container %h1 = link_to root_path do - = image_pack_tag 'logo_full.svg', alt: 'Mastodon' + = svg_logo_full .form-container = render 'flashes' diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index ee34936d6..2929ac599 100644 --- a/app/views/layouts/public.html.haml +++ b/app/views/layouts/public.html.haml @@ -8,7 +8,7 @@ %nav.header .nav-left = link_to root_url, class: 'brand' do - = image_pack_tag 'logo_full.svg', alt: 'Mastodon' + = svg_logo_full = link_to t('directories.directory'), explore_path, class: 'nav-link optional' if Setting.profile_directory = link_to t('about.about_this'), about_more_path, class: 'nav-link optional' -- cgit From 241a8e7b5f23c8b531a4595c5a96b7d4bb4d714e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Jun 2019 22:32:59 +0200 Subject: Fix more issues in the light theme (#10996) * Fix tabs bar in light theme * Fix borders on small screens in light theme --- app/javascript/styles/mastodon-light/diff.scss | 105 +++++++++++++++++++++++++ app/javascript/styles/mastodon/components.scss | 6 +- 2 files changed, 108 insertions(+), 3 deletions(-) (limited to 'app/javascript/styles/mastodon-light') diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index b6c95fe6a..ee8a7d265 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.scss @@ -28,6 +28,10 @@ html { background: $white; border: 1px solid lighten($ui-base-color, 8%); + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 0; + } + &--slim-button { border: 0; top: -49px; @@ -81,6 +85,15 @@ html { } } +.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__text input[type="text"], .compose-form .spoiler-input__input, @@ -95,6 +108,13 @@ html { 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; @@ -350,6 +370,37 @@ html { 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; @@ -367,6 +418,12 @@ html { .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 { @@ -374,10 +431,26 @@ html { 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 { @@ -390,6 +463,10 @@ html { &:focus { background: $ui-base-color; } + + @media screen and (max-width: $no-gap-breakpoint) { + border: 0; + } } .directory__tag.active > a, @@ -516,6 +593,10 @@ html { .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, @@ -534,6 +615,10 @@ html { 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, @@ -562,6 +647,12 @@ html { .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 { @@ -569,9 +660,23 @@ html { 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%); + } + } } } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 32314137c..c91c1eedc 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1839,7 +1839,7 @@ a.account__display-name { display: flex; flex-direction: column; - @media screen and (min-width: 360px) { + @media screen and (min-width: $no-gap-breakpoint) { padding: 0 10px; } } @@ -2021,7 +2021,7 @@ a.account__display-name { top: 15px; } - @media screen and (min-width: 360px) { + @media screen and (min-width: $no-gap-breakpoint) { padding: 10px 0; } @@ -2135,7 +2135,7 @@ a.account__display-name { } } -@media screen and (min-width: 360px) { +@media screen and (min-width: $no-gap-breakpoint) { .tabs-bar { margin: 10px auto; margin-bottom: 0; -- cgit