diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js
index ad7d16f95c..0db6d22282 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 d35a598211..21b7621822 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 9f6d470b13..01748148f9 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 46bccf6096..32314137c9 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 bfbb907e03..19ce0ab8f0 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 e4223119cb..950e618477 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 }