From 6a0917f296b020d14027ef5dc7a3349f0c33ac1e Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 12 May 2026 14:05:16 +0000
Subject: [PATCH] =css gallery, form status additions
---
all.css | 142 +++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 130 insertions(+), 12 deletions(-)
diff --git a/all.css b/all.css
index 71e40f9..fde497e 100644
--- a/all.css
+++ b/all.css
@@ -1716,13 +1716,23 @@
[type=checkbox] + label {
cursor: pointer;
}
-
+.field:is(.radio,.checkbox) fieldset {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: .5rem;
+}
+ @media(min-width: 768px) {
+ .field:is(.radio,.checkbox) fieldset {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
.field:is(.radio,.checkbox,.true-false) label {
+ position: relative;
top: unset;
left: unset;
padding: 0 0 0 var(--chip);
display: inline-flex;
- border: 1px solid var(--base-200);
+ border: 1px solid transparent;
font-weight: var(--fw-b);
font-size: var(--txt-medium);
}
@@ -2236,16 +2246,124 @@
gap: .5rem;
}
-.restore-uploads .item-grid.group .field.group,
-.restore-uploads .upload-group .selection-actions {
- display: none;
-}
-.upload-group .item-grid.group {
- grid-template-columns: repeat(2, 1fr);
-}
-.restore-uploads .item-grid.group {
- grid-template-columns: repeat(3, 1fr);
-}
+ /** GALLERY **/
+ img[data-gallery] {
+ cursor: pointer;
+ }
+ dialog.gallery[open] {
+ --max: calc(100% - 2rem);
+ inset: 1rem;
+ margin: 0;
+ border: none;
+ width: 100%;
+ height: 100%;
+ max-height: var(--max);
+ max-width: var(--max);
+ border-radius: 0;
+ background-color: rgba(var(--base-rgb), var(--op-6));
+ }
+ .gallery > .wrap {
+ --wrap: nowrap;
+ }
+ .gallery .controls {
+ position: absolute;
+ bottom: 0;
+ left: var(--btn_);
+ right: 0;
+ width: 100%;
+ --wrap: nowrap;
+ --gap: 0;
+ }
+ .gallery button.nav {
+ width: 100%;
+ }
+
+
+ dialog.gallery .cancel:focus,
+ dialog.gallery .cancel:hover {
+ background: rgba(var(--base-rgb),var(--op-4));
+ }
+
+
+ dialog.gallery .content {
+ position: relative;
+ flex: 1 1 auto;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ }
+
+ dialog.gallery .content .image {
+ max-width: 90vw;
+ max-height: 85vh;
+ object-fit: contain;
+ transition: transform 0.15s ease-out;
+ touch-action: none;
+ }
+
+ dialog.gallery .image-left,
+ dialog.gallery .image-right {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+ }
+ dialog.gallery details {
+ position: absolute;
+ width: 100%;
+ max-width: none;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(var(--base-rgb),var(--op-45));
+ color: var(--contrast);
+ border-radius: 4px;
+ overflow: hidden;
+ z-index: 10;
+ }
+ dialog.gallery details:has(.item-info:empty) {
+ display: none;
+ }
+
+ dialog.gallery details summary {
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ dialog.gallery details[open] .item-info {
+ padding: 1rem;
+ }
+
+ dialog.gallery .counter {
+ position: absolute;
+ bottom: 1rem;
+ left: 1rem;
+ background: rgba(var(--base-rgb),var(--op-4));
+ color: var(--contrast);
+ padding: 0.4rem 0.8rem;
+ border-radius: 3px;
+ font-size: 0.85rem;
+ z-index: 10;
+ }
+
+ dialog.gallery .favourite {
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
+ z-index: 10;
+ }
+
+ dialog.gallery .image {
+ opacity: 0;
+ transition: opacity .2s ease, transform .15s ease-out;
+ }
+
+ dialog.gallery .image[src] {
+ opacity: 1;
+ }
+
/*** POPUPS: notifications, cart, queue ***/
aside.main.main {
--wrap: nowrap;
--
Gitblit v1.10.0