Merge commit '06f070d86d448b97c082c038220becaec8a038ce' into glitch-s…

…oc/merge-upstream
glitch-soc · Jul 24, 2024 · f3ec2f9 · f3ec2f9
2 parents e507d17 + 06f070d
commit f3ec2f9
Show file tree

Hide file tree

Showing 18 changed files with 280 additions and 203 deletions.
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
@@ -23,7 +23,7 @@ html {
 // Change default background colors of columns
 .interaction-modal {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .rules-list li::before {
@@ -75,8 +75,8 @@ html {
 }
 
 .getting-started .navigation-bar {
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-top: 1px solid var(--background-border-color);
+  border-bottom: 1px solid var(--background-border-color);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-top: 0;
@@ -88,7 +88,7 @@ html {
 .setting-text,
 .report-dialog-modal__textarea,
 .audio-player {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .report-dialog-modal .dialog-option .poll__input {
@@ -140,7 +140,6 @@ html {
 .actions-modal ul li:not(:empty) a:focus button,
 .actions-modal ul li:not(:empty) a:hover,
 .actions-modal ul li:not(:empty) a:hover button,
-.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
 .simple_form .block-button,
 .simple_form .button,
 .simple_form button {
@@ -175,7 +174,7 @@ html {
 .picture-in-picture__footer,
 .reactions-bar__item {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 }
 
 .reactions-bar__item:hover,
@@ -217,7 +216,7 @@ html {
 
 .column-header__collapsible-inner {
   background: darken($ui-base-color, 4%);
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   border-bottom: 0;
 }
 
@@ -259,7 +258,7 @@ html {
 
 .embed-modal .embed-modal__container .embed-modal__html {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 
   &:focus {
     border-color: lighten($ui-base-color, 12%);
@@ -298,7 +297,7 @@ html {
 .directory__tag > a,
 .directory__tag > div {
   background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 
   @media screen and (max-width: $no-gap-breakpoint) {
     border-left: 0;
@@ -307,18 +306,6 @@ html {
   }
 }
 
-.simple_form {
-  input[type='text'],
-  input[type='number'],
-  input[type='email'],
-  input[type='password'],
-  textarea {
-    &:hover {
-      border-color: lighten($ui-base-color, 12%);
-    }
-  }
-}
-
 .picture-in-picture-placeholder {
   background: $white;
   border-color: lighten($ui-base-color, 8%);
@@ -346,7 +333,7 @@ html {
 }
 
 .activity-stream {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
 
   &--under-tabs {
     border-top: 0;
@@ -411,6 +398,22 @@ html {
     color: $ui-highlight-color;
     background-color: rgba($ui-highlight-color, 0.1);
   }
+
+  input[type='text'],
+  input[type='number'],
+  input[type='email'],
+  input[type='password'],
+  input[type='url'],
+  input[type='datetime-local'],
+  textarea {
+    background: darken($ui-base-color, 10%);
+  }
+
+  select {
+    background: darken($ui-base-color, 10%)
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
+      no-repeat right 8px center / auto 14px;
+  }
 }
 
 .compose-form .compose-form__warning {
@@ -449,8 +452,24 @@ html {
   box-shadow: none;
 }
 
+.card {
+  &__img {
+    background: darken($ui-base-color, 10%);
+  }
+
+  & > a {
+    &:hover,
+    &:active,
+    &:focus {
+      .card__bar {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
 .mute-modal select {
-  border: 1px solid lighten($ui-base-color, 8%);
+  border: 1px solid var(--background-border-color);
   background: $simple-background-color
     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
     no-repeat right 8px center / auto 16px;
@@ -491,6 +510,7 @@ html {
 .search__popout,
 .emoji-mart-search input,
 .language-dropdown__dropdown .emoji-mart-search input,
+// .strike-card,
 .poll__option input[type='text'] {
   background: darken($ui-base-color, 10%);
 }
@@ -507,3 +527,43 @@ html {
 .inline-follow-suggestions__body__scroll-button__icon {
   color: $white;
 }
+
+a.sparkline {
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($ui-base-color, 10%);
+  }
+}
+
+.dashboard__counters {
+  & > div {
+    & > a {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.directory {
+  &__tag {
+    & > a {
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($ui-base-color, 10%);
+      }
+    }
+  }
+}
+
+.strike-entry {
+  &:hover,
+  &:focus,
+  &:active {
+    background: darken($ui-base-color, 10%);
+  }
+}
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
@@ -10,15 +10,17 @@
     &:active,
     &:focus {
       .card__bar {
-        background: lighten($ui-base-color, 8%);
+        background: $ui-base-color;
       }
     }
   }
 
   &__img {
     height: 130px;
     position: relative;
-    background: darken($ui-base-color, 12%);
+    background: $ui-base-color;
+    border: 1px solid var(--background-border-color);
+    border-bottom: none;
 
     img {
       display: block;
@@ -39,7 +41,9 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: lighten($ui-base-color, 4%);
+    background: var(--background-color);
+    border: 1px solid var(--background-border-color);
+    border-top: none;
 
     .avatar {
       flex: 0 0 auto;