baseline

2026-02-04 23:31:53 +01:00
commit cd59ccd99b
2401 changed files with 56808 additions and 0 deletions
--- a/web/css/components/app-flash.css
+++ b/web/css/components/app-flash.css
@@ -0,0 +1,119 @@
+.notice {
+    --app-notice-border-color: var(--app-muted-border-color);
+    --app-notice-background-color: var(--app-card-background-color);
+    --app-notice-accent-color: var(--app-color);
+    border: var(--app-border-width) solid var(--app-notice-border-color);
+    border-radius: var(--app-border-radius);
+    background: var(--app-notice-background-color);
+    padding: calc(var(--app-spacing) * .5) calc(var(--app-spacing) * 1);
+    padding-right: calc(var(--app-spacing) * .5);
+    margin-bottom: var(--app-spacing);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--app-spacing);
+    position: relative;
+    overflow: hidden;
+    color: var(--app-notice-border-color);
+}
+
+#async-messages .notice {
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    padding-right: 5px;
+    padding-left: 15px;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 5px;
+    position: relative;
+    overflow: hidden;
+    color: var(--app-notice-border-color);
+}
+
+
+.notice strong {
+    color: var(--app-notice-accent-color);
+}
+
+.notice[data-variant=success] {
+    --app-notice-border-color: var(--app-notice-success-border-color);
+    --app-notice-background-color: var(--app-notice-success-background-color);
+    --app-notice-accent-color: var(--app-notice-success-color);
+}
+
+.notice[data-variant=warning] {
+    --app-notice-border-color: var(--app-notice-warning-border-color);
+    --app-notice-background-color: var(--app-notice-warning-background-color);
+    --app-notice-accent-color: var(--app-notice-warning-color);
+}
+
+.notice[data-variant=info] {
+    --app-notice-border-color: var(--app-notice-info-border-color);
+    --app-notice-background-color: var(--app-notice-info-background-color);
+    --app-notice-accent-color: var(--app-notice-info-color);
+}
+
+.notice[data-variant=error] {
+    --app-notice-border-color: var(--app-notice-error-border-color);
+    --app-notice-background-color: var(--app-notice-error-background-color);
+    --app-notice-accent-color: var(--app-notice-error-color);
+}
+
+.notice.flash-timed::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+    background: var(--app-notice-border-color);
+    transform-origin: left;
+    transform: scaleX(0);
+    animation: flash-progress var(--flash-timeout, 4000ms) linear forwards;
+    opacity: 0.9;
+}
+
+.notice.flash-timed:hover::after {
+    animation-play-state: paused;
+}
+
+@keyframes flash-progress {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .notice.flash-timed::after {
+        animation: none;
+    }
+}
+
+.notice button[type=submit] {
+    border: 1px solid var(--app-notice-border-color) !important;
+    background: var(--app-notice-background-color);
+    color: var(--app-notice-border-color);
+}
+
+.notice ul {
+    margin: 0;
+    padding-left: 20px;
+}
+
+.notice li:last-child {
+    margin: 0;
+}
+
+.app-details-errors {
+    padding-block-start: 1rem;
+}
+
+.flash-stack:has(.notice) {
+    margin-top: var(--app-spacing);
+}