Fix list edition modal styling (mastodon#32358)

ClearlyClaire · Oct 14, 2024 · 45a5206 · 45a5206
1 parent 6ac78ea
commit 45a5206
Showing 1 changed file with 36 additions and 47 deletions.
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -7961,7 +7961,6 @@ noscript {
   justify-content: flex-start;
   gap: 15px;
   align-items: center;
-  border: 1px solid var(--background-border-color);
   border-top: 0;
 
   label {
@@ -7988,18 +7987,50 @@ noscript {
   background: rgba($base-overlay-background, 0.5);
 }
 
+.list-adder,
 .list-editor {
-  background: $ui-base-color;
+  backdrop-filter: var(--background-filter);
+  background: var(--modal-background-color);
+  border: 1px solid var(--modal-border-color);
   flex-direction: column;
   border-radius: 8px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
   width: 380px;
   overflow: hidden;
 
   @media screen and (width <= 420px) {
     width: 90%;
   }
+}
+
+.list-adder {
+  &__lists {
+    height: 50vh;
+    border-radius: 0 0 8px 8px;
+    overflow-y: auto;
+  }
+
+  .list {
+    padding: 10px;
+    border-bottom: 1px solid var(--background-border-color);
+  }
+
+  .list__wrapper {
+    display: flex;
+  }
+
+  .list__display-name {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-decoration: none;
+    font-size: 16px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
 
+.list-editor {
   h4 {
     padding: 15px 0;
     background: lighten($ui-base-color, 13%);
@@ -8011,12 +8042,10 @@ noscript {
 
   .drawer__pager {
     height: 50vh;
-    border-radius: 4px;
+    border: 0;
   }
 
   .drawer__inner {
-    border-radius: 0 0 8px 8px;
-
     &.backdrop {
       width: calc(100% - 60px);
       box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
@@ -8025,6 +8054,7 @@ noscript {
   }
 
   &__accounts {
+    background: unset;
     overflow-y: auto;
   }
 
@@ -8043,47 +8073,6 @@ noscript {
   }
 }
 
-.list-adder {
-  background: $ui-base-color;
-  flex-direction: column;
-  border-radius: 8px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-  width: 380px;
-  overflow: hidden;
-
-  @media screen and (width <= 420px) {
-    width: 90%;
-  }
-
-  &__account {
-    background: lighten($ui-base-color, 13%);
-  }
-
-  &__lists {
-    background: lighten($ui-base-color, 13%);
-    height: 50vh;
-    border-radius: 0 0 8px 8px;
-    overflow-y: auto;
-  }
-
-  .list {
-    padding: 10px;
-    border-bottom: 1px solid var(--background-border-color);
-  }
-
-  .list__wrapper {
-    display: flex;
-  }
-
-  .list__display-name {
-    flex: 1 1 auto;
-    overflow: hidden;
-    text-decoration: none;
-    font-size: 16px;
-    padding: 10px;
-  }
-}
-
 .focal-point {
   position: relative;
   cursor: move;