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
---
formsBackup.css | 74 ++++++++++++++++++------------------
1 files changed, 37 insertions(+), 37 deletions(-)
diff --git a/formsBackup.css b/formsBackup.css
index ba88e65..2d8dc93 100644
--- a/formsBackup.css
+++ b/formsBackup.css
@@ -213,7 +213,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);
}
.field-input-wrapper .icon,
@@ -651,7 +651,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;
}
@@ -662,7 +662,7 @@
.empty-group,
.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)!important;
}
@@ -755,7 +755,7 @@
.item-grid.preview:has([type=checkbox]:checked),
.item-grid.group:has([type=checkbox]:checked) {
padding: 1rem;
- background-color: rgba(var(--contrast-rgb),var(--op-1));
+ background-color: rgba(var(--contrast),var(--op-1));
}
.item-grid.restore:has([type=checkbox]:checked) .item,
.item-grid.preview:has([type=checkbox]:checked) .item,
@@ -777,7 +777,7 @@
.item-grid.preview .item:has([type=checkbox]:checked),
.item-grid.group .item: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;
}
@@ -831,7 +831,7 @@
background-image: var(--dashed-action);
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;
@@ -846,7 +846,7 @@
right: 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;
@@ -869,7 +869,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 {
@@ -885,7 +885,7 @@
}
.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;
@@ -915,7 +915,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) {
@@ -979,7 +979,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);
}
@@ -998,11 +998,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);
}
}
@@ -1047,7 +1047,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);
}
@@ -1097,9 +1097,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%;
@@ -1118,7 +1118,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;
@@ -1182,7 +1182,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%;
}
@@ -1218,7 +1218,7 @@
top: 0;
background-color: var(--base-50);
z-index: var(--z-6);
- box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
+ box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-down);
margin-bottom: 2rem;
}
@@ -1274,7 +1274,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;
@@ -1327,8 +1327,8 @@
/*.group-actions button {*/
/* padding: 0.5rem 0.75rem;*/
/* border-radius: var(--radius);*/
-/* background: rgba(var(--action-rgb), 0.1);*/
-/* border: 1px solid rgba(var(--action-rgb), 0.3);*/
+/* background: rgba(var(--action-0), 0.1);*/
+/* border: 1px solid rgba(var(--action-0), 0.3);*/
/* color: var(--action-0);*/
/* font-size: var(--txt-small);*/
/* transition: all var(--trans-base);*/
@@ -1336,7 +1336,7 @@
/*}*/
/*.group-actions button:hover {*/
-/* background: rgba(var(--action-rgb), 0.2);*/
+/* background: rgba(var(--action-0), 0.2);*/
/* border-color: var(--action-0);*/
/* transform: translateY(-1px);*/
/*}*/
@@ -1344,7 +1344,7 @@
/*!* Group item grid - distinct from preview grid *!*/
/*.item-grid.group {*/
/* background: rgba(255, 255, 255, 0.5);*/
-/* border: 1px solid rgba(var(--action-rgb), 0.15);*/
+/* border: 1px solid rgba(var(--action-0), 0.15);*/
/* border-radius: var(--radius);*/
/* padding: 0.75rem;*/
/* min-height: 100px;*/
@@ -1422,8 +1422,8 @@
/* flex-direction: column;*/
/* gap: 0.5rem;*/
/* padding: 1rem;*/
-/* background: rgba(var(--action-rgb), 0.05);*/
-/* border: 1px solid rgba(var(--action-rgb), 0.2);*/
+/* background: rgba(var(--action-0), 0.05);*/
+/* border: 1px solid rgba(var(--action-0), 0.2);*/
/* border-radius: var(--radius);*/
/* margin: 1rem 0;*/
/* animation: slideDown var(--trans-base);*/
@@ -1437,7 +1437,7 @@
/*.progress .bar {*/
/* width: 100%;*/
/* height: 8px;*/
-/* background: rgba(var(--action-rgb), 0.15);*/
+/* background: rgba(var(--action-0), 0.15);*/
/* border-radius: 4px;*/
/* overflow: hidden;*/
/* position: relative;*/
@@ -1451,7 +1451,7 @@
/* var(--action-200) 100%);*/
/* border-radius: 4px;*/
/* transition: width 0.3s ease;*/
-/* box-shadow: 0 0 8px rgba(var(--action-rgb), 0.4);*/
+/* box-shadow: 0 0 8px rgba(var(--action-0), 0.4);*/
/*}*/
/*!* Progress details - styled for row layout with text and count *!*/
@@ -1540,7 +1540,7 @@
/*.upload.item:has(.upload-select:checked) {*/
/* outline: 3px solid var(--action-0);*/
/* outline-offset: -3px;*/
-/* box-shadow: 0 0 0 3px rgba(var(--action-rgb), 0.2);*/
+/* box-shadow: 0 0 0 3px rgba(var(--action-0), 0.2);*/
/*}*/
/*!* Selection checkbox - always visible on hover or when checked *!*/
@@ -1560,8 +1560,8 @@
/* display: flex;*/
/* gap: 1rem;*/
/* padding: 1rem;*/
-/* background: rgba(var(--action-rgb), 0.1);*/
-/* border: 2px solid rgba(var(--action-rgb), 0.3);*/
+/* background: rgba(var(--action-0), 0.1);*/
+/* border: 2px solid rgba(var(--action-0), 0.3);*/
/* border-radius: var(--radius);*/
/* margin: 1rem 0;*/
/* align-items: center;*/
@@ -1605,11 +1605,11 @@
/*!* Smooth dragover animation *!*/
/*@keyframes drop-pulse {*/
/* 0%, 100% {*/
-/* background-color: rgba(var(--action-rgb), 0.15);*/
+/* background-color: rgba(var(--action-0), 0.15);*/
/* transform: scale(1.02);*/
/* }*/
/* 50% {*/
-/* background-color: rgba(var(--action-rgb), 0.25);*/
+/* background-color: rgba(var(--action-0), 0.25);*/
/* transform: scale(1.04);*/
/* }*/
/*}*/
@@ -1738,13 +1738,13 @@
/*.restore-item:hover {*/
/* border-color: var(--action-0);*/
-/* box-shadow: 0 2px 8px rgba(var(--action-rgb), 0.2);*/
+/* box-shadow: 0 2px 8px rgba(var(--action-0), 0.2);*/
/*}*/
/*!* Checked state *!*/
/*.restore-item:has(.restore-checkbox:checked) {*/
/* border-color: var(--action-0);*/
-/* background: rgba(var(--action-rgb), 0.05);*/
+/* background: rgba(var(--action-0), 0.05);*/
/*}*/
/*!* Preview section *!*/
@@ -1872,7 +1872,7 @@
/*.restore-selected:hover {*/
/* background: var(--action-200);*/
/* transform: translateY(-1px);*/
-/* box-shadow: 0 4px 12px rgba(var(--action-rgb), 0.3);*/
+/* box-shadow: 0 4px 12px rgba(var(--action-0), 0.3);*/
/*}*/
/*!* Scrap cache button - destructive action *!*/
@@ -2454,7 +2454,7 @@
margin-right: 1rem;
padding: 1rem;
border-radius: var(--radius);
- background-color: rgba(var(--base-rgb),var(--op-6));
+ background-color: rgba(var(--base),var(--op-6));
z-index: var(--z-6);
width: 50vw;
animation: fadeInSlideUp 0.5s ease-out forwards;
--
Gitblit v1.10.0