forked from treehouse/mastodon
Fix more issues in the light theme (#10996)
* Fix tabs bar in light theme * Fix borders on small screens in light themesignup-info-prompt
parent
4431ce52a6
commit
241a8e7b5f
|
@ -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,10 +660,24 @@ 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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification__filter-bar button.active::after,
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue