From 92e80666d516de64e488e04911c09e65a32e2a05 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Sat, 23 May 2026 18:48:30 +0000
Subject: [PATCH] =Base Styles overhaul. MAJOR NOTE: colour vars changed from hex codes to the rgb numbers (ex: 0,0,0) - this makes setting colour opacity much easier throughout. Likely breaking for most existing themes though
---
forms.css | 46 +++++++++++++++++++++++-----------------------
1 files changed, 23 insertions(+), 23 deletions(-)
diff --git a/forms.css b/forms.css
index 0aa4a70..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;
@@ -1163,14 +1163,14 @@
/** STATUS **/
.fstatus {
z-index: var(--z-5);
- background-color: rgba(var(--base-rgb), var(--op-6));
+ 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-rgb),var(--op-6)) var(--shdw);
+ box-shadow: rgba(var(--base),var(--op-6)) var(--shdw);
--wrap: nowrap;
--gap: 1rem;
}
@@ -1219,9 +1219,9 @@
width: 50vw;
padding: 1rem;
z-index: var(--z-7);
- background-color: rgba(var(--base-rgb), var(--op-6));
+ background-color: rgba(var(--base), var(--op-6));
border-radius: var(--radius);
- box-shadow: rgba(var(--action-rgb), var(--op-6)) var(--shdw);
+ box-shadow: rgba(var(--action-0), var(--op-6)) var(--shdw);
position: fixed;
right: var(--btnbtn);
bottom: 0;
--
Gitblit v1.10.0