From 297a7b48246346d5f36aefb181097e9a376be1d2 Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Tue, 22 Jul 2025 11:05:01 +0200 Subject: [PATCH] Update confirm modal z-index so it shows on top everywhere (#1026) --- .../AliasVault.Admin/wwwroot/css/tailwind.css | 287 ++++++------------ .../wwwroot/css/tailwind.css | 8 + .../ConfirmModal.razor | 2 +- 3 files changed, 94 insertions(+), 203 deletions(-) diff --git a/apps/server/AliasVault.Admin/wwwroot/css/tailwind.css b/apps/server/AliasVault.Admin/wwwroot/css/tailwind.css index 882327775..8b20ae92f 100644 --- a/apps/server/AliasVault.Admin/wwwroot/css/tailwind.css +++ b/apps/server/AliasVault.Admin/wwwroot/css/tailwind.css @@ -627,6 +627,10 @@ video { z-index: 50; } +.z-\[1000\] { + z-index: 1000; +} + .col-span-2 { grid-column: span 2 / span 2; } @@ -822,10 +826,6 @@ video { height: 1.5rem; } -.h-64 { - height: 16rem; -} - .h-7 { height: 1.75rem; } @@ -854,6 +854,10 @@ video { width: 33.333333%; } +.w-1\/4 { + width: 25%; +} + .w-10 { width: 2.5rem; } @@ -862,6 +866,10 @@ video { width: 3rem; } +.w-16 { + width: 4rem; +} + .w-2\/3 { width: 66.666667%; } @@ -910,18 +918,6 @@ video { width: 100%; } -.w-16 { - width: 4rem; -} - -.w-1\/4 { - width: 25%; -} - -.min-w-full { - min-width: 100%; -} - .max-w-2xl { max-width: 42rem; } @@ -946,16 +942,6 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.animate-spin { - animation: spin 1s linear infinite; -} - @keyframes pulse { 50% { opacity: .5; @@ -966,6 +952,16 @@ video { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.animate-spin { + animation: spin 1s linear infinite; +} + .cursor-not-allowed { cursor: not-allowed; } @@ -1187,19 +1183,10 @@ video { border-bottom-width: 1px; } -.border-b-2 { - border-bottom-width: 2px; -} - .border-l-4 { border-left-width: 4px; } -.border-blue-500 { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); @@ -1210,6 +1197,11 @@ video { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } +.border-orange-500 { + --tw-border-opacity: 1; + border-color: rgb(249 115 22 / var(--tw-border-opacity)); +} + .border-primary-300 { --tw-border-opacity: 1; border-color: rgb(248 185 99 / var(--tw-border-opacity)); @@ -1235,26 +1227,6 @@ video { border-color: rgb(234 179 8 / var(--tw-border-opacity)); } -.border-blue-600 { - --tw-border-opacity: 1; - border-color: rgb(37 99 235 / var(--tw-border-opacity)); -} - -.border-orange-600 { - --tw-border-opacity: 1; - border-color: rgb(234 88 12 / var(--tw-border-opacity)); -} - -.border-orange-400 { - --tw-border-opacity: 1; - border-color: rgb(251 146 60 / var(--tw-border-opacity)); -} - -.border-orange-500 { - --tw-border-opacity: 1; - border-color: rgb(249 115 22 / var(--tw-border-opacity)); -} - .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); @@ -1350,9 +1322,9 @@ video { background-color: rgb(21 128 61 / var(--tw-bg-opacity)); } -.bg-orange-500 { +.bg-orange-400 { --tw-bg-opacity: 1; - background-color: rgb(249 115 22 / var(--tw-bg-opacity)); + background-color: rgb(251 146 60 / var(--tw-bg-opacity)); } .bg-primary-100 { @@ -1385,11 +1357,6 @@ video { background-color: rgb(184 112 47 / var(--tw-bg-opacity)); } -.bg-purple-500 { - --tw-bg-opacity: 1; - background-color: rgb(168 85 247 / var(--tw-bg-opacity)); -} - .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); @@ -1435,26 +1402,6 @@ video { background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } -.bg-blue-600 { - --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); -} - -.bg-orange-600 { - --tw-bg-opacity: 1; - background-color: rgb(234 88 12 / var(--tw-bg-opacity)); -} - -.bg-orange-400 { - --tw-bg-opacity: 1; - background-color: rgb(251 146 60 / var(--tw-bg-opacity)); -} - -.bg-orange-300 { - --tw-bg-opacity: 1; - background-color: rgb(253 186 116 / var(--tw-bg-opacity)); -} - .bg-opacity-50 { --tw-bg-opacity: 0.5; } @@ -1483,6 +1430,11 @@ video { padding: 1.5rem; } +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1573,11 +1525,6 @@ video { padding-bottom: 2rem; } -.px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - .pb-2 { padding-bottom: 0.5rem; } @@ -1690,10 +1637,6 @@ video { font-weight: 600; } -.uppercase { - text-transform: uppercase; -} - .italic { font-style: italic; } @@ -1706,10 +1649,6 @@ video { line-height: 2.25rem; } -.tracking-wider { - letter-spacing: 0.05em; -} - .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity)); @@ -1725,6 +1664,11 @@ video { color: rgb(229 231 235 / var(--tw-text-opacity)); } +.text-gray-300 { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -1755,26 +1699,11 @@ video { color: rgb(17 24 39 / var(--tw-text-opacity)); } -.text-green-600 { - --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); -} - .text-green-800 { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity)); } -.text-indigo-600 { - --tw-text-opacity: 1; - color: rgb(79 70 229 / var(--tw-text-opacity)); -} - -.text-orange-600 { - --tw-text-opacity: 1; - color: rgb(234 88 12 / var(--tw-text-opacity)); -} - .text-primary-600 { --tw-text-opacity: 1; color: rgb(214 131 56 / var(--tw-text-opacity)); @@ -1785,11 +1714,6 @@ video { color: rgb(184 112 47 / var(--tw-text-opacity)); } -.text-purple-600 { - --tw-text-opacity: 1; - color: rgb(147 51 234 / var(--tw-text-opacity)); -} - .text-red-400 { --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity)); @@ -1825,11 +1749,6 @@ video { color: rgb(133 77 14 / var(--tw-text-opacity)); } -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - .underline { text-decoration-line: underline; } @@ -1896,19 +1815,24 @@ video { transition-duration: 150ms; } -.duration-300 { - transition-duration: 300ms; -} - .duration-200 { transition-duration: 200ms; } +.duration-300 { + transition-duration: 300ms; +} + .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } +.hover\:bg-gray-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + .hover\:bg-gray-400:hover { --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity)); @@ -1929,6 +1853,11 @@ video { background-color: rgb(22 101 52 / var(--tw-bg-opacity)); } +.hover\:bg-orange-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(234 88 12 / var(--tw-bg-opacity)); +} + .hover\:bg-primary-200:hover { --tw-bg-opacity: 1; background-color: rgb(251 203 116 / var(--tw-bg-opacity)); @@ -1949,24 +1878,9 @@ video { background-color: rgb(153 27 27 / var(--tw-bg-opacity)); } -.hover\:bg-gray-200:hover { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); -} - -.hover\:bg-blue-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); -} - -.hover\:bg-orange-700:hover { - --tw-bg-opacity: 1; - background-color: rgb(194 65 12 / var(--tw-bg-opacity)); -} - -.hover\:bg-orange-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(234 88 12 / var(--tw-bg-opacity)); +.hover\:text-blue-600:hover { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); } .hover\:text-gray-700:hover { @@ -1994,16 +1908,6 @@ video { color: rgb(154 93 38 / var(--tw-text-opacity)); } -.hover\:text-blue-800:hover { - --tw-text-opacity: 1; - color: rgb(30 64 175 / var(--tw-text-opacity)); -} - -.hover\:text-blue-600:hover { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); -} - .hover\:underline:hover { text-decoration-line: underline; } @@ -2050,6 +1954,11 @@ video { --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); } +.focus\:ring-gray-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity)); +} + .focus\:ring-green-300:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity)); @@ -2075,11 +1984,6 @@ video { --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity)); } -.focus\:ring-gray-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity)); -} - .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } @@ -2128,16 +2032,16 @@ video { border-color: rgb(239 68 68 / var(--tw-border-opacity)); } -.dark\:border-yellow-500:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(234 179 8 / var(--tw-border-opacity)); -} - .dark\:border-red-800:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(153 27 27 / var(--tw-border-opacity)); } +.dark\:border-yellow-500:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(234 179 8 / var(--tw-border-opacity)); +} + .dark\:bg-blue-800:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(30 64 175 / var(--tw-bg-opacity)); @@ -2293,6 +2197,11 @@ video { color: rgb(254 202 202 / var(--tw-text-opacity)); } +.dark\:text-red-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity)); +} + .dark\:text-red-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity)); @@ -2313,31 +2222,6 @@ video { color: rgb(254 240 138 / var(--tw-text-opacity)); } -.dark\:text-green-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(74 222 128 / var(--tw-text-opacity)); -} - -.dark\:text-indigo-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(129 140 248 / var(--tw-text-opacity)); -} - -.dark\:text-orange-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(251 146 60 / var(--tw-text-opacity)); -} - -.dark\:text-purple-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(192 132 252 / var(--tw-text-opacity)); -} - -.dark\:text-red-300:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(252 165 165 / var(--tw-text-opacity)); -} - .dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); @@ -2377,6 +2261,16 @@ video { background-color: rgb(185 28 28 / var(--tw-bg-opacity)); } +.dark\:hover\:text-blue-400:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity)); +} + +.dark\:hover\:text-gray-200:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} + .dark\:hover\:text-gray-300:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity)); @@ -2392,21 +2286,6 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.dark\:hover\:text-gray-200:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); -} - -.dark\:hover\:text-blue-300:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(147 197 253 / var(--tw-text-opacity)); -} - -.dark\:hover\:text-blue-400:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(96 165 250 / var(--tw-text-opacity)); -} - .dark\:focus\:border-blue-500:focus:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); @@ -2554,6 +2433,10 @@ video { display: flex; } + .md\:hidden { + display: none; + } + .md\:h-screen { height: 100vh; } diff --git a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css index 27908ba35..2e39df856 100644 --- a/apps/server/AliasVault.Client/wwwroot/css/tailwind.css +++ b/apps/server/AliasVault.Client/wwwroot/css/tailwind.css @@ -694,6 +694,14 @@ video { z-index: 60; } +.z-\[100\] { + z-index: 100; +} + +.z-\[1000\] { + z-index: 1000; +} + .col-span-1 { grid-column: span 1 / span 1; } diff --git a/apps/server/Shared/AliasVault.RazorComponents/ConfirmModal.razor b/apps/server/Shared/AliasVault.RazorComponents/ConfirmModal.razor index b588e8a70..8fcf97298 100644 --- a/apps/server/Shared/AliasVault.RazorComponents/ConfirmModal.razor +++ b/apps/server/Shared/AliasVault.RazorComponents/ConfirmModal.razor @@ -4,7 +4,7 @@ @if (ModalService.IsVisible) { -
+

@ModalService.Title