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

View File

@ -28,6 +28,10 @@ html {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 0;
}
&--slim-button { &--slim-button {
border: 0; border: 0;
top: -49px; 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, .compose-form__autosuggest-wrapper,
.poll__text input[type="text"], .poll__text input[type="text"],
.compose-form .spoiler-input__input, .compose-form .spoiler-input__input,
@ -95,6 +108,13 @@ html {
border: 1px solid lighten($ui-base-color, 8%); 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 { .list-editor .search .search__input {
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
@ -350,6 +370,37 @@ html {
background: $white; 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 // Change the default colors used on some parts of the profile pages
.activity-stream-tabs { .activity-stream-tabs {
background: $account-background-color; background: $account-background-color;
@ -367,6 +418,12 @@ html {
.landing-page__information.contact-widget { .landing-page__information.contact-widget {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); 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 { .landing .hero-widget__text {
@ -374,10 +431,26 @@ html {
border-bottom: 0; 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 { .landing .hero-widget__footer {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
border-top: 0; border-top: 0;
@media screen and (max-width: $no-gap-breakpoint) {
border: 0;
}
} }
.brand__tagline { .brand__tagline {
@ -390,6 +463,10 @@ html {
&:focus { &:focus {
background: $ui-base-color; background: $ui-base-color;
} }
@media screen and (max-width: $no-gap-breakpoint) {
border: 0;
}
} }
.directory__tag.active > a, .directory__tag.active > a,
@ -516,6 +593,10 @@ html {
.public-layout { .public-layout {
.account__section-headline { .account__section-headline {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 0;
}
} }
.header, .header,
@ -534,6 +615,10 @@ html {
background: $ui-base-color; background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
@media screen and (max-width: $no-gap-breakpoint) {
border: 0;
}
.brand { .brand {
&:hover, &:hover,
&:focus, &:focus,
@ -562,6 +647,12 @@ html {
.avatar img { .avatar img {
border-color: $account-background-color; 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 { &__tabs {
@ -569,10 +660,24 @@ html {
h1, h1,
h1 small { h1 small {
color: $white; 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%);
}
}
}
} }
.notification__filter-bar button.active::after, .notification__filter-bar button.active::after,

View File

@ -1839,7 +1839,7 @@ a.account__display-name {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media screen and (min-width: 360px) { @media screen and (min-width: $no-gap-breakpoint) {
padding: 0 10px; padding: 0 10px;
} }
} }
@ -2021,7 +2021,7 @@ a.account__display-name {
top: 15px; top: 15px;
} }
@media screen and (min-width: 360px) { @media screen and (min-width: $no-gap-breakpoint) {
padding: 10px 0; 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 { .tabs-bar {
margin: 10px auto; margin: 10px auto;
margin-bottom: 0; margin-bottom: 0;