partial fix for blur of modals

diff --git a/frontend/src/lib/TagModal.svelte b/frontend/src/lib/TagModal.svelte
index 0fafb9b85306676f5025283c31b23380bcb4e77a..cca33c84e4b1e04f36aa9610b281974edf3b2b82 100644 (file)
--- a/frontend/src/lib/TagModal.svelte
+++ b/frontend/src/lib/TagModal.svelte
@@ -191,14 +191,4 @@
        .removeBtn:hover {
                color: #dc3545;
        }
-
-       :global(.modal.show) {
-               background-color: rgba(80, 80, 80, 0.1) !important;
-               backdrop-filter: blur(2px) saturate(150%);
-       }
-
-       .modal-content {
-               backdrop-filter: blur(8px) saturate(150%);
-               background-color: rgba(219, 219, 219, 0.45);
-       }
 </style>

diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 6b070e5b63bc29eb2a8775613d915d39c10ba84b..5fdc406109ea715abbe234c0a206555898e7a7cc 100644 (file)
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -1053,7 +1053,7 @@
                        <div class=" col-lg-4 col-sm-2 col d-flex flex-row justify-content-center align-items-center">
                                <div class="full-logo d-flex align-items-center">
                                        <img src={dailytxt} alt="" height="38px" />
-                                       <span class="dailytxt ms-2">DailyTxT</span>
+                                       <span class="dailytxt ms-2 user-select-none">DailyTxT</span>
                                </div>
                        </div>
 
@@ -1945,7 +1945,10 @@
                                                                                {/if}
                                                                                {#if changingPasswordSuccess}
                                                                                        <div class="alert alert-success mt-2" role="alert" transition:slide>
-                                                                                               {@html $t('settings.password.success')}
+                                                                                               {$t('settings.password.success')}
+                                                                                       </div>
+                                                                                       <div class="alert alert-danger mt-2" role="alert" transition:slide>
+                                                                                               {$t('settings.password.success_backup_codes_warning')}
                                                                                        </div>
                                                                                {/if}
                                                                                {#if changingPasswordIncorrect}

diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index 09dd005eefd2d8cae35707eddfcefb564ba8af74..a0fc369af5cccf77948894ac88b34588fcdecdfe 100644 (file)
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -1822,11 +1822,6 @@
                transition: all ease 0.2s;
        }
 
-       :global(.modal.show) {
-               background-color: rgba(80, 80, 80, 0.1) !important;
-               backdrop-filter: blur(2px) saturate(150%);
-       }
-
        .modal-content {
                backdrop-filter: blur(8px) saturate(150%);
                background-color: rgba(219, 219, 219, 0.45);

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 474c3db7ab9d39661775c6a837effe2c959e146b..63cd5b1f3aef9a850a73b75e86aa91a48af4e81e 100644 (file)
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -120,7 +120,9 @@
                                aria-atomic="true"
                        >
                                <div class="d-flex">
-                                       <div class="toast-body">Noch {available_backup_codes} Backup-Codes verfügbar!</div>
+                                       <div class="toast-body">
+                                               {tolgee.t('toast.password.available_backup_codes', { count: available_backup_codes })}
+                                       </div>
                                        <button
                                                type="button"
                                                class="btn-close me-2 m-auto"
@@ -134,6 +136,10 @@
 </main>
 
 <style>
+       :global(.toast-container) {
+               z-index: 9999;
+       }
+
        main {
                height: 100vh;
        }
@@ -150,17 +156,26 @@
                height: 100%;
        }
 
+       :global(.modal.show) {
+               background-color: rgba(0, 0, 0, 0.3) !important;
+       }
+
+       :global(.modal-content) {
+               backdrop-filter: blur(20px) saturate(150%);
+               background-color: rgba(83, 83, 83, 0.85) !important;
+               border: 1px solid rgba(255, 255, 255, 0.2);
+               color: #ececec;
+       }
+
        :global(.glass) {
-               backdrop-filter: blur(12px) saturate(130%);
-               /* background-color: rgba(219, 219, 219, 0.45); */
-               background-color: rgba(83, 83, 83, 0.73);
+               backdrop-filter: blur(14px) saturate(130%);
+               background-color: rgba(83, 83, 83, 0.8);
                border: 1px solid #62626278;
                color: #ececec;
        }
 
        :global(.glassLight) {
                backdrop-filter: blur(8px) saturate(130%);
-               /* background-color: rgba(219, 219, 219, 0.45); */
                background-color: rgba(83, 83, 83, 0.445);
                border: 1px solid #62626278;
                color: #ececec;