diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6e386ff687dd86..78e52901396983 100644 --- 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;