From 34440dcbdd9e6a920ea83a92cd9fbd0dc8984dc1 Mon Sep 17 00:00:00 2001
From: Mira Weller <weller@rami.io>
Date: Fri, 16 May 2025 20:52:29 +0200
Subject: [PATCH] refactor dialog css

---
 .../static/pretixbase/scss/dialogs.scss       | 105 ++++++++++++++++
 .../static/pretixcontrol/scss/main.scss       |  94 +-------------
 .../static/pretixpresale/scss/main.scss       | 115 +-----------------
 3 files changed, 107 insertions(+), 207 deletions(-)
 create mode 100644 src/pretix/static/pretixbase/scss/dialogs.scss

diff --git a/src/pretix/static/pretixbase/scss/dialogs.scss b/src/pretix/static/pretixbase/scss/dialogs.scss
new file mode 100644
index 0000000000..c7b3efab7f
--- /dev/null
+++ b/src/pretix/static/pretixbase/scss/dialogs.scss
@@ -0,0 +1,105 @@
+
+body.has-modal-dialog .container, body.has-modal-dialog #wrapper {
+    -webkit-filter: blur(2px);
+    -moz-filter: blur(2px);
+    -ms-filter: blur(2px);
+    -o-filter: blur(2px);
+    filter: blur(2px);
+}
+
+.big-rotating-icon {
+    -webkit-animation: fa-spin 8s infinite linear;
+    animation: fa-spin 8s infinite linear;
+    font-size: 120px;
+    color: $brand-primary;
+}
+
+dialog.modal-card::backdrop {
+    background: rgba(255, 255, 255, .7);
+}
+
+.modal-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(255, 255, 255, .7);
+    z-index: 900000;
+    padding: 10px;
+}
+.modal-card {
+    margin: 50px auto 0;
+    width: 90%;
+    max-width: 600px;
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+    background: white;
+    border-radius: $border-radius-large;
+    box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
+    padding: 20px;
+    min-height: 160px;
+    border: 0;
+
+    .modal-card-icon {
+        float: left;
+        width: 150px;
+        text-align: center;
+        .big-icon {
+            margin-top: 10px;
+            font-size: 100px;
+            color: $brand-primary;
+        }
+    }
+    .modal-card-content {
+        margin-left: 160px;
+        text-align: left;
+        h3 {
+            margin-top: 0;
+        }
+    }
+}
+
+#cookie-consent-modal {
+    background: rgba(255, 255, 255, .5);
+    .modal-card-content {
+        margin-left: 0;
+    }
+    details {
+        & > summary {
+            list-style: none;
+        }
+        & > summary::-webkit-details-marker,
+        & > summary::marker {
+            display: none;
+        }
+        margin-bottom: 10px;
+    }
+}
+
+@media (max-width: 700px) {
+    .modal-card {
+        margin: 25px auto 0;
+        max-height: calc(100vh - 50px - 20px);
+        .modal-card-icon {
+            float: none;
+            width: 100%;
+        }
+        .modal-card-content {
+            text-align: center;
+            margin-left: 0;
+            margin-right: 0;
+            margin-top: 10px;
+        }
+    }
+}
+
+#ajaxerr {
+    background: rgba(236, 236, 236, .9);
+
+    .big-icon {
+        margin-top: 50px;
+        font-size: 200px;
+        color: $brand-primary;
+    }
+}
diff --git a/src/pretix/static/pretixcontrol/scss/main.scss b/src/pretix/static/pretixcontrol/scss/main.scss
index 9a38920325..e4252cca36 100644
--- a/src/pretix/static/pretixcontrol/scss/main.scss
+++ b/src/pretix/static/pretixcontrol/scss/main.scss
@@ -19,6 +19,7 @@
 @import "../../select2/select2.scss";
 @import "../../select2/select2_bootstrap.scss";
 @import "../../colorpicker/bootstrap-colorpicker.scss";
+@import "../../pretixbase/scss/dialogs.scss";
 
 /* See https://github.com/pretix/pretix/pull/761 */
 .bootstrap-datetimepicker-widget table td span {
@@ -234,99 +235,6 @@ p.bigger {
     }
 }
 
-body.loading #wrapper {
-    -webkit-filter: blur(2px);
-    -moz-filter: blur(2px);
-    -ms-filter: blur(2px);
-    -o-filter: blur(2px);
-    filter: blur(2px);
-}
-
-#loadingmodal, #ajaxerr {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(255, 255, 255, .7);
-    opacity: 0;
-    z-index: 900000;
-    visibility: hidden;
-    padding: 10px;
-
-    .big-icon {
-        margin-top: 50px;
-        font-size: 200px;
-        color: $brand-primary;
-    }
-
-    .modal-card {
-        margin: 50px auto 0;
-        top: 50px;
-        width: 90%;
-        max-width: 600px;
-        background: white;
-        border-radius: $border-radius-large;
-        box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
-        padding: 20px;
-        min-height: 160px;
-
-        .modal-card-icon {
-            float: left;
-            width: 150px;
-            text-align: center;
-
-            .big-rotating-icon {
-                font-size: 120px;
-                margin: 0;
-            }
-        }
-        .modal-card-content {
-            margin-left: 160px;
-            text-align: left;
-            h3 {
-                margin-top: 0;
-            }
-        }
-    }
-}
-@media (max-width: 700px) {
-    #loadingmodal, #ajaxerr {
-        .modal-card {
-            .modal-card-icon {
-                float: none;
-                width: 100%;
-            }
-            .modal-card-content {
-                text-align: center;
-                margin-left: 0;
-                margin-right: 0;
-                margin-top: 10px;
-            }
-        }
-    }
-}
-
-#ajaxerr {
-    background: rgba(236, 236, 236, .9);
-}
-
-.loading #loadingmodal, .ajaxerr #ajaxerr {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity .5s ease-in-out;
-    -moz-transition: opacity .5s ease-in-out;
-    -webkit-transition: opacity .5s ease-in-out;
-}
-
-.big-rotating-icon {
-    margin-top: 50px;
-    -webkit-animation: fa-spin 8s infinite linear;
-    animation: fa-spin 8s infinite linear;
-    font-size: 200px;
-    color: $brand-primary;
-}
-
 .user-admin-icon {
     width: 16px;
     height: 16px;
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index 33f939e308..be2004c0ba 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -57,6 +57,7 @@ $headings-small-color: $text-muted;
 @import "_calendar.scss";
 @import "_checkout.scss";
 @import "../../pretixbase/scss/webfont.scss";
+@import "../../pretixbase/scss/dialogs.scss";
 
 html {
     font-size: 1em;
@@ -260,120 +261,6 @@ a:hover .panel-primary > .panel-heading {
   margin-right: auto;
 }
 
-body.loading .container {
-    -webkit-filter: blur(2px);
-    -moz-filter: blur(2px);
-    -ms-filter: blur(2px);
-    -o-filter: blur(2px);
-    filter: blur(2px);
-}
-
-.big-rotating-icon {
-    -webkit-animation: fa-spin 8s infinite linear;
-    animation: fa-spin 8s infinite linear;
-    font-size: 120px;
-    color: $brand-primary;
-}
-#loadingmodal, #ajaxerr, #cookie-consent-modal, #popupmodal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(255, 255, 255, .7);
-    opacity: 0;
-    z-index: 900000;
-    visibility: hidden;
-    padding: 10px;
-
-    .big-icon {
-        margin-top: 50px;
-        font-size: 200px;
-        color: $brand-primary;
-    }
-    &#popupmodal .big-icon {
-        margin-top: 10px;
-        font-size: 100px;
-        color: $brand-primary;
-    }
-
-    .modal-card {
-        margin: 50px auto 0;
-        width: 90%;
-        max-width: 600px;
-        max-height: calc(100vh - 100px);
-        overflow-y: auto;
-        background: white;
-        border-radius: $border-radius-large;
-        box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
-        padding: 20px;
-        min-height: 160px;
-
-        .modal-card-icon {
-            float: left;
-            width: 150px;
-            text-align: center;
-        }
-        .modal-card-content {
-            margin-left: 160px;
-            text-align: left;
-            h3 {
-                margin-top: 0;
-            }
-        }
-    }
-
-    &#cookie-consent-modal {
-        background: rgba(255, 255, 255, .5);
-        opacity: 1;
-        visibility: visible;
-        display: none;
-        .modal-card-content {
-            margin-left: 0;
-        }
-        details {
-            & > summary {
-                list-style: none;
-            }
-            & > summary::-webkit-details-marker,
-            & > summary::marker {
-                display: none;
-            }
-            margin-bottom: 10px;
-        }
-    }
-}
-@media (max-width: 700px) {
-    #loadingmodal, #ajaxerr, #cookie-consent-modal, #popupmodal {
-        .modal-card {
-            margin: 25px auto 0;
-            max-height: calc(100vh - 50px - 20px);
-            .modal-card-icon {
-                float: none;
-                width: 100%;
-            }
-            .modal-card-content {
-                text-align: center;
-                margin-left: 0;
-                margin-right: 0;
-                margin-top: 10px;
-            }
-        }
-    }
-}
-
-#ajaxerr {
-    background: rgba(236, 236, 236, .9);
-}
-
-.loading #loadingmodal, .ajaxerr #ajaxerr, .has-popup #popupmodal {
-    opacity: 1;
-    visibility: visible;
-    transition: opacity .5s ease-in-out;
-    -moz-transition: opacity .5s ease-in-out;
-    -webkit-transition: opacity .5s ease-in-out;
-}
-
 .typo-alert span[data-typosuggest] {
     text-decoration: underline;
     cursor: pointer;