diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index b6c95fe6a1..ee8a7d265a 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 32314137c9..c91c1eedc5 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;