cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Fix more issues in the light theme (#10996) 

* Fix tabs bar in light theme

* Fix borders on small screens in light theme
This commit is contained in:
Eugen Rochko 2019-06-08 22:32:59 +02:00 committed by GitHub
parent 4431ce52a6
commit 241a8e7b5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 108 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
app/javascript/styles/mastodon-light/diff.scss
View File

@ -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%);
}
}
}
}

6
app/javascript/styles/mastodon/components.scss
View File

@ -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;