From 4f48b9154270c83324ef6c98f990adbcbe59d073 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sun, 24 May 2026 02:27:26 +0000
Subject: [PATCH] =switching over
---
forms.css | 124 ++++++++++++++++++++++++++++++++++------
1 files changed, 104 insertions(+), 20 deletions(-)
diff --git a/forms.css b/forms.css
index d8989b1..a106438 100644
--- a/forms.css
+++ b/forms.css
@@ -109,7 +109,7 @@
.datetime-wrapper input[type=datetime-local]:focus,
.date-wrapper input[type=date]:focus {
border-color: var(--action-0);
- box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1);
+ box-shadow: 0 0 0 2px rgba(var(--action-0), .1);
}
.wrapper .icon,
@@ -240,7 +240,7 @@
padding: 2rem;
text-align: center;
transition: all .3s ease;
- background: rgba(var(--action-rgb),var(--op-1));
+ background: rgba(var(--action-0),var(--op-1));
position: relative;
cursor: pointer;
user-select: none;
@@ -258,7 +258,7 @@
.empty-group:hover,
.file-upload-wrapper:hover,
.dragover {
- background: rgba(var(--action-rgb),var(--op-2));
+ background: rgba(var(--action-0),var(--op-2));
border-color: var(--action-0);
}
.preview-wrap:has(.item-grid:empty) .selection-controls {
@@ -330,7 +330,7 @@
}
.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked){
padding: .5rem;
- background-color: rgba(var(--action-rgb), var(--op-4));
+ background-color: rgba(var(--action-0), var(--op-4));
opacity: 1;
}
.item-grid:is(.restore,.group,.preview):has([type=checkbox]:checked) img {
@@ -384,7 +384,7 @@
.upload-group {
padding: 5px;
border-radius:var(--radius);
- background-color: rgba(var(--action-rgb), var(--op-1));
+ background-color: rgba(var(--action-0), var(--op-1));
}
.upload-group .selected .field {
margin: 0;
@@ -399,7 +399,7 @@
left: var(--btn_);
z-index: var(--z-6);
height: var(--btn);
- box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow:rgba(var(--base),var(--op-45)) var(--shdw);
border-radius: var(--radius);
animation: pulse-color 5s infinite;
animation-delay: 1s;
@@ -420,7 +420,7 @@
cursor: pointer;
transition: all var(--trans-base);
text-align: center;
- background-color: rgba(var(--action-rgb), var(--op-1));
+ background-color: rgba(var(--action-0), var(--op-1));
}
.group-display:not([hidden]) ~ .file-upload-container {
@@ -432,11 +432,11 @@
opacity: .7;
transform: scale(.95) rotate(3deg);
z-index: var(--z-7);
- box-shadow: 0 8px 25px rgba(var(--contrast-rgb), var(--op-2));
+ box-shadow: 0 8px 25px rgba(var(--contrast), var(--op-2));
}
.dragover {
- background: rgba(var(--action-rgb), var(--op-3))!important;
+ background: rgba(var(--action-0), var(--op-3))!important;
border-color: var(--action-0)!important;
transform: scale(1.05);
animation: drop-pulse .8s infinite ease-in-out;
@@ -464,7 +464,7 @@
left: 0;
background: var(--base);
border-radius: var(--radius-outer);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
}
.drag-preview .drag-items .drag-item:nth-child(1) {
@@ -528,7 +528,7 @@
justify-content: center;
font-size: 12px;
font-weight: bold;
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
z-index: var(--z-3);
}
@@ -547,11 +547,11 @@
@keyframes drop-pulse {
0%, 100% {
- background-color: rgba(var(--action-rgb),var(--op-3));
+ background-color: rgba(var(--action-0),var(--op-3));
transform: scale(1.02);
}
50% {
- background-color: var(rgba(var(--action-rgb),var(--op-4)));
+ background-color: var(rgba(var(--action-0),var(--op-4)));
transform: scale(1.04);
}
}
@@ -596,7 +596,7 @@
left: -.5rem;
right: -.5rem;
position: absolute;
- background-color: rgba(var(--base-rgb), var(--op-6));
+ background-color: rgba(var(--base), var(--op-6));
filter: blur(5px);
}
@@ -646,9 +646,9 @@
position: absolute;
left: 0;
right: 0;
- background-color: rgba(var(--base-rgb), var(--op-6));
+ background-color: rgba(var(--base), var(--op-6));
z-index: var(--z-3);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
}
.group-display .item-grid {
height: 100%;
@@ -667,7 +667,7 @@
height: fit-content;
top: 0;
z-index: var(--z-3);
- background-color: rgba(var(--action-rgb), var(--op-6));
+ background-color: rgba(var(--action-0), var(--op-6));
}
.group-display .sidebar .upload-group {
order: 1;
@@ -731,7 +731,7 @@
.preview-wrap .hint {
position: sticky;
z-index: var(--z-3);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
background-color: var(--base);
width: 100%;
}
@@ -816,7 +816,7 @@
transform: translateY(10px);
background-color: var(--base-100);
border: 1px solid var(--base);
- box-shadow: 0px 0px 5px rgba(var(--base-rgb),var(--op-6));
+ box-shadow: 0px 0px 5px rgba(var(--base),var(--op-6));
color: var(--contrast);
padding: 5px 12px;
white-space: nowrap;
@@ -1158,4 +1158,88 @@
.selector .auto-wrapper {
flex: 1;
width: 100%;
-}
\ No newline at end of file
+}
+
+/** STATUS **/
+.fstatus {
+ z-index: var(--z-5);
+ background-color: rgba(var(--base), var(--op-6));
+ border-radius: var(--radius);
+ padding: 0 .5rem;
+ position: fixed;
+ right: .5rem;
+ top: var(--btnbtn);
+ --w: 1em;
+ box-shadow: rgba(var(--base),var(--op-6)) var(--shdw);
+ --wrap: nowrap;
+ --gap: 1rem;
+}
+ .fstatus .spinner {
+ display: none;
+ }
+ .fstatus.loading .spinner {
+ display: inline-block;
+ }
+ .fstatus p {
+ margin: 0;
+ padding: .25rem;
+ }
+
+
+
+
+/** RESTORE UPLOADS **/
+.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);
+}
+
+
+fieldset {
+ width: 100%;
+ border-color: var(--base-200);
+}
+
+/** RESTORE FORM **/
+.restore-form.restore-form[hidden] {
+ display: block!important;
+ position: fixed;
+ bottom: var(--offScreen);
+ right: var(--btnbtn);
+ transition: bottom var(--trans-base);
+ transition-duration: 2s;
+}
+ .restore-form.restore-form:not([hidden]) {
+ width: 50vw;
+ padding: 1rem;
+ z-index: var(--z-7);
+ background-color: rgba(var(--base), var(--op-6));
+ border-radius: var(--radius);
+ box-shadow: rgba(var(--action-0), var(--op-6)) var(--shdw);
+ position: fixed;
+ right: var(--btnbtn);
+ bottom: 0;
+ transition: bottom var(--trans-base);
+ }
+ .restore-form h3 {
+ font-size: var(--txt-medium);
+ }
+ body:has(nav.fixed.bottom) .restore-form.restore-form:not([hidden]) {
+ bottom: var(--btn);
+ }
+
+ .restore-form .actions {
+ display: flex;
+ width: 100%;
+ }
+ .restore-form .actions button {
+ min-height: var(--chip);
+ font-size: var(--txt-x-small);
+ width: 100%;
+ }
\ No newline at end of file
--
Gitblit v1.10.0