Fix more issues in the light theme (#10996)

* Fix tabs bar in light theme

* Fix borders on small screens in light theme

2 files changed, 108 insertions, 3 deletions

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index b6c95fe6a..ee8a7d265 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 3de07bd59..3d6aa87d8 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;