From e09f9f885e3d2859f495d5e5e6107bba9bde3b5a Mon Sep 17 00:00:00 2001
From: Michael Stanclift <mx@vmstan.com>
Date: Tue, 10 Sep 2024 12:33:55 -0500
Subject: [PATCH] Fix alt text modal styling (#31844)
---
app/javascript/styles/mastodon-light/diff.scss | 17 +++++++----------
app/javascript/styles/mastodon/components.scss | 16 +++++++++-------
2 files changed, 16 insertions(+), 17 deletions(-)
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 1df556b42a..c0cabf837c 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -159,8 +159,8 @@
.error-modal,
.onboarding-modal,
.compare-history-modal,
-.report-modal__comment .setting-text__wrapper,
-.report-modal__comment .setting-text,
+.report-modal__comment,
+.report-modal__comment,
.announcements,
.picture-in-picture__header,
.picture-in-picture__footer,
@@ -169,6 +169,11 @@
border: 1px solid var(--background-border-color);
}
+.setting-text__wrapper,
+.setting-text {
+ border: 1px solid var(--background-border-color);
+}
+
.reactions-bar__item:hover,
.reactions-bar__item:focus,
.reactions-bar__item:active {
@@ -198,14 +203,6 @@
color: $white;
}
-.report-modal__comment {
- border-right-color: lighten($ui-base-color, 8%);
-}
-
-.report-modal__container {
- border-top-color: lighten($ui-base-color, 8%);
-}
-
.column-settings__hashtags .column-select__option {
color: $white;
}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 570c006faa..382491eb74 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3911,7 +3911,7 @@ $ui-header-logo-wordmark-width: 99px;
&__wrapper {
background: $white;
- border: 1px solid $ui-secondary-color;
+ border: 1px solid var(--background-border-color);
margin-bottom: 10px;
border-radius: 4px;
@@ -6298,9 +6298,10 @@ a.status-card {
.report-modal,
.actions-modal,
.compare-history-modal {
- background: lighten($ui-secondary-color, 8%);
- color: $inverted-text-color;
- border-radius: 8px;
+ background: var(--background-color);
+ color: $primary-text-color;
+ border-radius: 4px;
+ border: 1px solid var(--background-border-color);
overflow: hidden;
max-width: 90vw;
width: 480px;
@@ -6344,6 +6345,7 @@ a.status-card {
.report-modal {
width: 90vw;
max-width: 700px;
+ border: 1px solid var(--background-border-color);
}
.report-dialog-modal {
@@ -6567,7 +6569,7 @@ a.status-card {
.report-modal__container {
display: flex;
- border-top: 1px solid $ui-secondary-color;
+ border-top: 1px solid var(--background-border-color);
@media screen and (width <= 480px) {
flex-wrap: wrap;
@@ -6625,7 +6627,7 @@ a.status-card {
.report-modal__comment {
padding: 20px;
- border-inline-end: 1px solid $ui-secondary-color;
+ border-inline-end: 1px solid var(--background-border-color);
max-width: 320px;
p {
@@ -6636,7 +6638,7 @@ a.status-card {
.setting-text-label {
display: block;
- color: $inverted-text-color;
+ color: $secondary-text-color;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;