diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 49ffacd3..c1137213 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -1352,7 +1352,6 @@ function RelatedActions({
</div>
{!!showTranslatedBio && (
<Modal
- class="light"
onClose={() => {
setShowTranslatedBio(false);
}}
@@ -1366,7 +1365,6 @@ function RelatedActions({
)}
{!!showAddRemoveLists && (
<Modal
- class="light"
onClose={() => {
setShowAddRemoveLists(false);
}}
@@ -1379,7 +1377,6 @@ function RelatedActions({
)}
{!!showPrivateNoteModal && (
<Modal
- class="light"
onClose={() => {
setShowPrivateNoteModal(false);
}}
@@ -1571,7 +1568,6 @@ function AddRemoveListsSheet({ accountID, onClose }) {
</main>
{showListAddEditModal && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowListAddEditModal(false);
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 328f8194..c075790f 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -1254,7 +1254,6 @@ function Compose({
</div>
{showEmoji2Picker && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowEmoji2Picker(false);
@@ -1768,7 +1767,6 @@ function MediaAttachment({
</div>
{showModal && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowModal(false);
diff --git a/src/components/keyboard-shortcuts-help.jsx b/src/components/keyboard-shortcuts-help.jsx
index 90cc82cc..a3925f20 100644
--- a/src/components/keyboard-shortcuts-help.jsx
+++ b/src/components/keyboard-shortcuts-help.jsx
@@ -32,7 +32,7 @@ export default memo(function KeyboardShortcutsHelp() {
return (
!!snapStates.showKeyboardShortcutsHelp && (
- <Modal class="light" onClose={onClose}>
+ <Modal onClose={onClose}>
<div id="keyboard-shortcuts-help-container" class="sheet" tabindex="-1">
<button type="button" class="sheet-close" onClick={onClose}>
<Icon icon="x" />
diff --git a/src/components/modal.css b/src/components/modal.css
index e2b2c638..713ed308 100644
--- a/src/components/modal.css
+++ b/src/components/modal.css
@@ -10,11 +10,17 @@
align-items: center;
background-color: var(--backdrop-color);
animation: appear 0.5s var(--timing-function) both;
-}
-#modal-container > div .sheet {
- transition: transform 0.3s var(--timing-function);
- transform-origin: center bottom;
-}
-#modal-container > div:has(~ div) .sheet {
- transform: scale(0.975);
+
+ &.solid {
+ background-color: var(--backdrop-solid-color);
+ }
+
+ .sheet {
+ transition: transform 0.3s var(--timing-function);
+ transform-origin: center bottom;
+ }
+
+ &:has(~ div) .sheet {
+ transform: scale(0.975);
+ }
}
diff --git a/src/components/modals.jsx b/src/components/modals.jsx
index 8b3ebf7d..49437959 100644
--- a/src/components/modals.jsx
+++ b/src/components/modals.jsx
@@ -35,7 +35,7 @@ export default function Modals() {
return (
<>
{!!snapStates.showCompose && (
- <Modal>
+ <Modal class="solid">
<Compose
replyToStatus={
typeof snapStates.showCompose !== 'boolean'
@@ -109,7 +109,6 @@ export default function Modals() {
)}
{!!snapStates.showAccount && (
<Modal
- class="light"
onClose={() => {
states.showAccount = false;
}}
@@ -160,7 +159,6 @@ export default function Modals() {
)}
{!!snapStates.showShortcutsSettings && (
<Modal
- class="light"
onClose={() => {
states.showShortcutsSettings = false;
}}
@@ -172,7 +170,6 @@ export default function Modals() {
)}
{!!snapStates.showGenericAccounts && (
<Modal
- class="light"
onClose={() => {
states.showGenericAccounts = false;
}}
@@ -188,7 +185,6 @@ export default function Modals() {
)}
{!!snapStates.showMediaAlt && (
<Modal
- class="light"
onClose={(e) => {
states.showMediaAlt = false;
}}
@@ -204,6 +200,7 @@ export default function Modals() {
)}
{!!snapStates.showEmbedModal && (
<Modal
+ class="solid"
onClose={() => {
states.showEmbedModal = false;
}}
diff --git a/src/components/notification-service.jsx b/src/components/notification-service.jsx
index 7f071a3e..e52ea3cb 100644
--- a/src/components/notification-service.jsx
+++ b/src/components/notification-service.jsx
@@ -144,7 +144,6 @@ export default memo(function NotificationService() {
const { id, account, notification, sameInstance } = showNotificationSheet;
return (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
onClose();
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index 4d6a4747..c59657e1 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -457,7 +457,6 @@ function ShortcutsSettings({ onClose }) {
</main>
{showForm && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowForm(false);
@@ -481,7 +480,6 @@ function ShortcutsSettings({ onClose }) {
)}
{showImportExport && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowImportExport(false);
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 5ead2e95..49ed783d 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1985,7 +1985,6 @@ function Status({
</div>
{!!showEdited && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowEdited(false);
@@ -2008,7 +2007,6 @@ function Status({
)}
{!!showEmbed && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowEmbed(false);
@@ -2953,7 +2951,6 @@ function FilteredStatus({
</article>
{!!showPeek && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowPeek(false);
diff --git a/src/index.css b/src/index.css
index 5da6f219..c56446bc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -69,7 +69,7 @@
--outline-color: rgba(128, 128, 128, 0.2);
--outline-hover-color: rgba(128, 128, 128, 0.7);
--divider-color: rgba(0, 0, 0, 0.1);
- --backdrop-color: rgba(0, 0, 0, 0.05);
+ --backdrop-color: rgba(0, 0, 0, 0.1);
--backdrop-darker-color: rgba(0, 0, 0, 0.25);
--backdrop-solid-color: #eee;
--img-bg-color: rgba(128, 128, 128, 0.2);
diff --git a/src/pages/list.jsx b/src/pages/list.jsx
index e59025a1..7ab29709 100644
--- a/src/pages/list.jsx
+++ b/src/pages/list.jsx
@@ -143,7 +143,6 @@ function List(props) {
/>
{showListAddEditModal && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowListAddEditModal(false);
@@ -167,7 +166,6 @@ function List(props) {
)}
{showManageMembersModal && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowManageMembersModal(false);
diff --git a/src/pages/lists.jsx b/src/pages/lists.jsx
index 8e72bf81..b06d92f1 100644
--- a/src/pages/lists.jsx
+++ b/src/pages/lists.jsx
@@ -108,7 +108,6 @@ function Lists() {
</div>
{showListAddEditModal && (
<Modal
- class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowListAddEditModal(false);