[A11y] switch modal dialogs to <dialog> tag (#5128)

* add templatetag {% dialog %} using <dialog> tag
* new dialog style
* show dialog when empty add-to-cart instead of disabling the button
* update cookieconsent-modal to use new template tag

src/pretix/static/pretixbase/scss/_theme.scss

@@ -262,3 +262,95 @@ svg.svg-icon {
 @include table-row-variant('info', var(--pretix-brand-info-success-lighten-30), var(--pretix-brand-info-success-lighten-25));
 @include table-row-variant('warning', var(--pretix-brand-warning-lighten-40), var(--pretix-brand-warning-lighten-35));
 @include table-row-variant('danger', var(--pretix-brand-danger-lighten-30), var(--pretix-brand-danger-lighten-25));
+
+
+
+
+dialog {
+  border: none;
+  width: 80%;
+  max-width: 43em;
+  padding: 0;
+  box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
+  background: white;
+  border-radius: $border-radius-large;
+
+  opacity: 0;
+  transition: opacity .5s allow-discrete;
+
+  .modal-card {
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+  }
+  .modal-card-icon {
+    background: $brand-primary;
+    font-size: 2em;
+    color: white;
+    text-align: center;
+    padding: 3px;
+  }
+  .modal-card-content {
+    padding: 1.5em;
+  }
+  .modal-card-content>*:last-child {
+    margin-bottom: 0;
+  }
+  .modal-card-content>*:first-child {
+    margin-top: 0;
+  }
+
+  .modal-card-confirm {
+    margin-top: 2em;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1em;
+    align-items: center;
+  }
+  .modal-card-confirm-spread {
+    justify-content: space-between;
+  }
+}
+dialog::backdrop {
+  background-color: rgba(255, 255, 255, .5);
+  opacity: 0;
+  transition: opacity .5s allow-discrete;
+}
+dialog[open], dialog[open]::backdrop {
+  opacity: 1;
+}
+@starting-style {
+  dialog[open], dialog[open]::backdrop  {
+    opacity: 0;
+  }
+}
+
+@media screen and (min-width: $screen-sm-min) {
+  dialog {
+    .modal-card:has(.modal-card-icon) {
+      flex-direction: row;
+    }
+    .modal-card-content {
+      padding: 2em;
+    }
+    .modal-card-icon {
+      font-size: 4em;
+      padding: 6px 16px;
+    }
+  }
+}
+
+.shake-once {
+  animation: shake .2s;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+}
+
+@keyframes shake {
+  0% { transform: skewX(0deg); }
+  20% { transform: skewX(-5deg); }
+  40% { transform: skewX(5deg); }
+  60% { transform: skewX(-5deg); }
+  80% { transform: skewX(5deg); }
+  100% { transform: skewX(0deg); }
+}