From e76a40c2270908529a1a4a75809aef13ebc34c88 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 23 Dec 2025 20:11:59 +0000
Subject: [PATCH] =Legacy rebrand finished
---
forms.css | 969 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 870 insertions(+), 99 deletions(-)
diff --git a/forms.css b/forms.css
index 5a64bde..ec3bdcc 100644
--- a/forms.css
+++ b/forms.css
@@ -1,3 +1,683 @@
+/******************************************************************
+FORM INPUTS - BASE
+******************************************************************/
+textarea,
+input:is([type=date], [type=number], [type=text], [type=url],
+ [type=email], [type=tel], [type=password], [type=search],
+ [type=datetime-local], [type=time]) {
+ font-family: var(--body);
+ font-size: var(--txt-medium);
+ color: var(--contrast);
+ padding: var(--p-y) var(--p-x);
+ border-radius: var(--radius);
+ background-color: var(--base);
+ outline: 0;
+ border: 1px solid var(--base-100);
+ border-bottom: 2px solid var(--contrast-200);
+ width: 100%;
+ max-width: 100%;
+ margin: 0 4px;
+}
+
+/******************************************************************
+FORM INPUTS - STATES
+******************************************************************/
+textarea:focus,
+input:is([type=date], [type=number], [type=text], [type=url],
+ [type=email], [type=tel], [type=password], [type=search],
+ [type=datetime-local], [type=time]):focus {
+ outline: var(--action-50);
+ background-color: var(--base-100);
+ color: var(--contrast);
+}
+
+textarea::placeholder,
+input::placeholder {
+ font-family: var(--body);
+ color: var(--base-200);
+}
+
+@media (min-width: 768px) {
+ :root {
+ --p-y: 1rem;
+ }
+}
+
+/******************************************************************
+SELECT
+******************************************************************/
+select {
+ background: var(--base);
+ border: 2px solid var(--base-100);
+ border-radius: var(--radius);
+ color: var(--contrast);
+ cursor: pointer;
+ font-family: var(--body);
+ font-size: var(--txt-small);
+ padding: .5rem 1rem;
+ width: 100%;
+}
+
+select:disabled {
+ background-color: var(--base-50);
+ border-color: var(--base-100);
+ color: var(--base-200);
+ cursor: not-allowed;
+}
+
+select option {
+ background: var(--base);
+ color: var(--contrast);
+ padding: .5rem;
+}
+
+select option:hover,
+select option:focus,
+select option:active,
+select option:checked {
+ background: var(--action-0);
+ color: var(--base);
+ box-shadow: 0 0 0 100px var(--action-0) inset;
+}
+
+select option:checked {
+ background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%);
+ color: var(--base);
+}
+
+select:hover {
+ border-color: var(--action-0);
+}
+
+select:focus {
+ border-color: var(--action-0);
+}
+
+/******************************************************************
+SEARCH & SPECIAL INPUTS
+******************************************************************/
+input[type=search]:focus + .clear-search {
+ opacity: 1;
+ cursor: pointer;
+}
+
+.search-container .clear-search {
+ opacity: 0;
+ cursor: default;
+}
+
+.search-container .icon.search {
+ padding: 4px 8px;
+ color: var(--contrast-200);
+ --w: 3rem;
+}
+
+input[type="search"]::-moz-search-clear-button,
+input[type="search"]::-ms-clear,
+input[type="search"]::-ms-reveal,
+input[type="search"]::search-cancel-button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ display: none;
+ visibility: hidden;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+ -webkit-appearance:none;
+}
+
+input[type=url] {
+ background: var(--linkIcon);
+ background-position: .5em;
+ background-size: 1em;
+ background-repeat: no-repeat;
+ padding-left: 2em;
+}
+
+/******************************************************************
+LABELS & FIELDS
+******************************************************************/
+.integration .label,
+label {
+ text-transform: uppercase;
+ font-weight: bold;
+ margin-bottom: .5rem;
+ display: block;
+}
+
+.field {
+ margin: 2rem 0;
+ position: relative;
+}
+
+.field:has(.has-tooltip) label {
+ margin-left: 2rem;
+}
+
+legend {
+ padding: 0 1rem;
+}
+
+/**********************
+DATE & TIME FIELDS
+**********************/
+.date-wrapper {
+ position: relative;
+ display: inline-block;
+}
+
+input[type=date] {
+ padding: 8px 36px 8px 8px;
+ border-radius: 4px;
+}
+
+input[type=date]::-webkit-calendar-picker-indicator {
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ cursor: pointer;
+}
+
+input[type=date] + .icon {
+ --w: 20px;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
+}
+
+input:is([type=time], [type=datetime-local], [type=date]) {
+ padding: .5rem;
+ border: 1px solid var(--contrast-200);
+ border-radius: 4px;
+ font-size: 14px;
+ min-width: 180px;
+ background: var(--base);
+ color: var(--contrast);
+ cursor: pointer;
+}
+
+.field-input-wrapper input:is([type=time], [type=datetime-local], [type=date]):focus,
+.time-wrapper input[type=time]:focus,
+.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);
+}
+
+.field-input-wrapper .icon,
+.time-wrapper .icon,
+.datetime-wrapper .icon,
+.date-wrapper .icon {
+ width: 18px;
+ height: 18px;
+ background-color: var(--contrast);
+ opacity: .7;
+}
+
+/**********************
+SPECIAL FIELDS
+**********************/
+.selected-items {
+ --justify: flex-start;
+ --gap: .5rem;
+ margin-bottom: .5rem;
+}
+
+.selected-item {
+ padding: .25rem .5rem;
+ margin: .125em;
+ background: var(--base-100);
+ border-radius: .25rem;
+ font-size: var(--txt-medium);
+ border: 1px solid var(--base-200);
+ position: relative;
+}
+
+.remove-item {
+ background: none;
+ border: none;
+ padding: .25rem;
+ cursor: pointer;
+ color: #666;
+ border-radius: var(--radius);
+ width: 1.5em;
+ height: 1.5em;
+}
+
+.remove-item .close {
+ width: .5em;
+ height: .5em;
+}
+
+.remove-item:hover {
+ color: var(--action-0);
+ background: #fee;
+}
+
+.clear-filters {
+ margin-left: auto;
+ border: 1px solid var(--base-200);
+}
+
+/******************************************************************
+CHECKBOXES & RADIOS
+******************************************************************/
+[type=radio],
+[type=checkbox],
+input.ch {
+ position: absolute;
+ opacity: 0;
+ left: -200vw;
+}
+
+[type=radio] + label,
+[type=checkbox] + label,
+input.ch + label {
+ position: relative;
+ cursor: pointer;
+}
+
+[type=radio] + label:hover,
+[type=checkbox] + label:hover {
+ color: var(--action-0);
+}
+
+[type=radio] + label::before,
+[type=checkbox] + label::before,
+input.ch + label::before,
+[type=radio] + label::after,
+[type=checkbox] + label::after,
+input.ch + label::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+}
+
+[type=radio] + label::after,
+[type=checkbox] + label::after,
+input.ch + label::after {
+ left: 5px;
+ transform: translateY(-70%) rotate(45deg);
+ width: 5px;
+ height: 10px;
+ border: solid var(--light-0);
+ border-width: 0 2px 2px 0;
+ display: none;
+}
+
+[type=radio] + label::before,
+[type=checkbox] + label::before,
+input.ch + label::before {
+ left: 0;
+ transform: translateY(-50%);
+ width: 1rem;
+ height: 1rem;
+ border: 2px solid var(--contrast-200);
+ background-color: var(--base);
+ border-radius: var(--radius);
+}
+
+[type=radio]:hover + label::before,
+[type=checkbox]:hover + label::before,
+input.ch:hover + label::before {
+ border-color: var(--action-200);
+}
+
+[type=radio]:checked + label::before,
+[type=checkbox]:checked + label::before,
+input.ch:checked + label::before {
+ background-color: var(--action-0);
+ border-color: var(--action-100);
+}
+
+[type=radio]:checked + label::before {
+ border-radius: 50%;
+}
+
+[type=checkbox]:checked + label::after,
+input.ch:checked + label::after {
+ display: block;
+ left: 5px;
+ top: 50%;
+ transform: translateY(-70%) rotate(45deg);
+ width: .35rem;
+ height: .66rem;
+ border: solid var(--light-0);
+ border-width: 0 2px 2px 0;
+}
+
+[type=radio]:disabled + label,
+[type=checkbox]:disabled + label,
+input.ch:disabled + label {
+ cursor: not-allowed;
+ background-color: var(--base-50);
+ color: var(--base-200);
+ border-color: var(--base-200);
+}
+
+[type=radio]:disabled + label:hover,
+[type=checkbox]:disabled + label:hover,
+input.ch:disabled + label:hover {
+ background-color: var(--base-50);
+ color: var(--base-200);
+ border-color: var(--base-200);
+}
+
+[type=radio]:disabled + label::before,
+[type=checkbox]:disabled + label::before,
+input.ch:disabled + label::before {
+ border-color: var(--base-200);
+}
+
+[type=radio]:not(.btn) + label,
+[type=checkbox]:not(.btn) + label,
+input.ch + label {
+ flex: 1;
+ padding-left: 2rem;
+ transform-origin: top center;
+ will-change: transform;
+}
+
+/* Button-style checkboxes/radios */
+.btn + label::before,
+.btn + label::after {
+ display: none;
+}
+
+.btn + label {
+ --w: 1.2em;
+ border: 1px solid var(--base-200);
+ border-radius: var(--radius);
+ min-width: 2rem;
+ min-height: 2rem;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+ gap: .5rem;
+ color: var(--contrast-200);
+ opacity: .8;
+}
+
+.radio-options.status label {
+ padding: 0 .5rem;
+}
+
+.btn:checked + label {
+ border-color: var(--contrast);
+ color: var(--contrast);
+ opacity: 1;
+}
+
+.btn + label:hover {
+ color: var(--action-50);
+ border-color: var(--action-50);
+}
+
+input[hidden] + label,
+.btn[hidden] + label {
+ display: none!important;
+}
+
+.checkbox-options {
+ --gap: .5rem 2rem;
+}
+
+.checkbox-options label {
+ flex: unset!important;
+}
+
+.radio-options {
+ --gap: .125rem .5rem;
+}
+
+.radio-options input:not(.ch) + label::before {
+ display: none!important;
+}
+
+.radio-options input:not(.ch) + label {
+ flex: unset!important;
+ padding: .25rem!important;
+ border-radius: 4px;
+ border: 1px solid var(--base-100);
+ color: var(--contrast-200);
+ font-weight: normal;
+ text-align: center;
+}
+
+.radio-options input:not(.ch) + label:hover,
+.radio-options input:not(.ch):checked + label {
+ border-color: var(--action-0);
+ color: var(--action-0);
+}
+
+/******************************************************************
+QUANTITY FIELD
+******************************************************************/
+.quantity {
+ margin: 0;
+ display: inline-flex;
+ width: fit-content;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ position: relative;
+}
+
+.quantity:focus-within {
+ border-color: var(--action-0);
+}
+
+.quantity label {
+ margin: 0;
+ font-size: var(--txt-small);
+}
+
+.quantity button {
+ background: var(--base);
+ padding: 0;
+ width: 38px;
+ height: 38px;
+ z-index: 0;
+ position: relative;
+ border: 1px solid var(--base-200);
+ color: var(--contrast-200);
+}
+
+.quantity button:hover:not(:disabled) {
+ color: var(--action-0);
+ border-color: var(--action-0);
+ background-color: var(--base);
+}
+
+.quantity button:active:not(:disabled) {
+ background-color: var(--action-0);
+ color: var(--light-0);
+ transform: scale(.95);
+}
+
+.quantity button:disabled {
+ opacity: .5;
+ cursor: not-allowed;
+}
+
+.quantity input[type=number] {
+ z-index: 1;
+ border: 1px solid var(--base-200);
+ background: var(--base);
+ text-align: center;
+ font-size: 1.1rem;
+ width: 60px;
+ height: 48px;
+ margin: 0;
+ padding: 0!important;
+ appearance: textfield;
+}
+
+.quantity input[type=number]::-webkit-outer-spin-button,
+.quantity input[type=number]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+.quantity input[type=number]:focus {
+ background-color: var(--base-50);
+}
+
+.quantity button.increase {
+ left: -2px;
+ border-radius: 0 4px 4px 0;
+}
+
+.quantity button.decrease {
+ right: -2px;
+ border-radius: 4px 0 0 4px;
+}
+
+/******************************************************************
+TAXONOMY SELECTOR
+******************************************************************/
+.items-container {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+.create-new-term {
+ margin-top: 1rem;
+ width: 100%;
+}
+
+.create-new-term .field,
+.create-new-term[open] summary {
+ margin-bottom: 1rem;
+}
+
+.create-new-term .field {
+ max-width: 100%;
+}
+
+#jvb-selector > .wrap {
+ --wrap: nowrap;
+ --justify: flex-start;
+}
+
+#jvb-selector .items-wrap {
+ width: 100%;
+}
+
+#jvb-selector .items-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(1fr, 100%))
+}
+
+/******************************
+TABS
+******************************/
+.tab-content[hidden] {
+ display: block!important;
+ transform: scaleY(0);
+ height: 0;
+ overflow: hidden;
+}
+
+.tab-content[hidden]:focus-within {
+ transform: scaleY(1);
+ height:auto;
+}
+
+nav.tabs h2 {
+ margin: 0!important;
+ line-height: 1;
+ font-size: var(--txt-medium);
+ display: flex;
+ color: var(--contrast);
+ white-space: nowrap;
+ gap: 1rem;
+}
+
+nav.tabs .active h2 {
+ color: var(--action-contrast);
+}
+
+nav.tabs button {
+ padding: .75rem 1.5rem;
+ border-radius: 0;
+ position: relative;
+ border: 2px solid var(--action-0);
+}
+
+nav.tabs > button:first-of-type {
+ border-top-left-radius: var(--radius);
+}
+
+nav.tabs > button:last-of-type {
+ border-top-right-radius: var(--radius);
+}
+
+.tabs > button:hover,
+.tabs > button:focus {
+ background-color: var(--base-200);
+}
+
+.tabs > button::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 3px;
+ background-color: var(--action-50);
+ transition: width .3s;
+}
+
+.tabs > button:hover::after,
+.tabs > button.active::after {
+ width: 100%;
+}
+
+.tabs > button.active::after {
+ background-color: var(--action-200);
+}
+
+.tabs > button.active {
+ background-color: var(--action-0);
+ color: var(--action-contrast);
+}
+
+.tabs > button.active:hover,
+.tabs > button.active:focus {
+ background-color: var(--action-100);
+}
+
+.tab-content h2 {
+ display: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+/************* DONE TO HERE *****/
+
details.uploader .file-upload-container {
margin: 1rem 0;
max-width: 100%;
@@ -5,7 +685,7 @@
@media (min-width: 768px) {
details.uploader .file-upload-container {
margin: 1rem var(--mr) 1rem var(--ml);
- max-width: var(--maxWidth);
+ max-width: var(--content);
}
}
/*.field.upload .item-grid,*/
@@ -19,18 +699,18 @@
padding: 2rem;
text-align: center;
transition: all .3s ease;
- background: rgba(var(--action-rgb),var(--rgb-subtle));
+ background: rgba(var(--action-rgb),var(--op-1));
position: relative;
cursor: pointer;
}
.file-upload-wrapper h2 {
margin: 0!important;
- font-size: var(--large);
+ font-size: var(--txt-large);
}
.file-upload-wrapper:hover,
.dragover {
- background: rgba(var(--action-rgb),var(--rgb-subtle-hover));
+ background: rgba(var(--action-rgb),var(--op-2));
border-color: var(--action-0)!important;
}
@@ -70,10 +750,9 @@
top: 0;
right: 0;
}
-.item-grid.restore,
-.item-grid.group,
-.item-grid.preview {
- grid-template-columns: repeat(3, 1fr)
+
+.item-grid.group {
+ margin-bottom: 0;
}
.item-grid.restore .item,
.item-grid.group .item,
@@ -126,7 +805,7 @@
.item-grid.preview:has([type=checkbox]:checked),
.item-grid.group:has([type=checkbox]:checked) {
padding: 1rem;
- background-color: rgba(var(--contrast-rgb),var(--rgb-subtle));
+ background-color: rgba(var(--contrast-rgb),var(--op-1));
}
.item-grid.restore:has([type=checkbox]:checked) .item,
.item-grid.preview:has([type=checkbox]:checked) .item,
@@ -148,28 +827,32 @@
.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(--rgb-medium));
+ background-color: rgba(var(--action-rgb), var(--op-4));
opacity: 1;
}
+.item-grid.preview summary span {
+ display: none;
+}
+
.item-grid.restore .item:has([type=checkbox]:checked) img,
.item-grid.preview .item:has([type=checkbox]:checked) img,
.item-grid.group .item:has([type=checkbox]:checked) img {
filter: none;
}
-[type=radio].featured:checked + label .star,
-[type=radio].featured + label .star + .star {
+[type=radio].featured:checked + label .icon-star,
+[type=radio].featured + label .icon-star-fi {
display: none;
}
-[type=radio].featured + label .star,
-[type=radio].featured:checked + label .star + .star {
+[type=radio].featured + label .icon-star,
+[type=radio].featured:checked + label .icon-star-fi {
display: inline-block;
}
.restore.restore.item,
.upload.upload.item {
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
aspect-ratio: unset;
overflow: hidden;
background: var(--base);
@@ -185,30 +868,36 @@
}
.restore.item img,
.upload.item img {
- transition: transform var(--transition-base);
+ transition: transform var(--trans-base);
}
.restore.item:hover img,
.upload.item:hover img {
transform: scale(1.02);
- transition: transform var(--transition-base);
+ transition: transform var(--trans-base);
}
.upload-group {
background-image: var(--dashed-action);
padding: 5px;
- border-radius: var(--innerRadius);
- background-color: rgba(var(--action-rgb), var(--rgb-subtle));
+ border-radius: var(--radius);
+ background-color: rgba(var(--action-rgb), var(--op-1));
+}
+.upload-group .selected .field {
+ margin: 0;
+}
+.upload-group .group-actions button {
+ aspect-ratio: unset;
}
.submit-uploads {
position: fixed;
- bottom: var(--offHeight);
- right: var(--offHeight);
+ bottom: var(--btn_);
+ right: var(--btn_);
z-index: var(--z-6);
- height: var(--height);
- box-shadow: var(--shadow);
- border-radius: var(--innerRadius);
+ height: var(--btn);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+ border-radius: var(--radius);
animation: pulse-color 5s infinite;
animation-delay: 1s;
background-color: var(--action-0);
@@ -220,15 +909,16 @@
}
.empty-group {
+ order: -1;
grid-column: 1 / -1;
padding: 20px;
background-image: var(--dashed-action);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
margin: 10px 0;
cursor: pointer;
- transition: all var(--transition-base);
+ transition: all var(--trans-base);
text-align: center;
- background-color: rgba(var(--action-rgb), var(--rgb-subtle));
+ background-color: rgba(var(--action-rgb), var(--op-1));
}
.group-display:not([hidden]) ~ .file-upload-container {
@@ -239,12 +929,12 @@
.dragging {
opacity: .7;
transform: scale(.95) rotate(3deg);
- z-index: var(--z-top);
+ z-index: var(--z-7);
box-shadow: 0 8px 25px rgba(0,0,0,.3);
}
.dragover {
- background: rgba(var(--action-rgb),var(--rgb-light))!important;
+ background: rgba(var(--action-rgb),var(--op-3))!important;
border-color: var(--action-0) !important;
transform: scale(1.05);
animation: drop-pulse .8s infinite ease-in-out;
@@ -252,7 +942,7 @@
.drag-preview {
position: fixed;
- z-index: var(--zz-top);
+ z-index: var(--z-9);
width: fit-content;
overflow: visible;
pointer-events: none;
@@ -273,8 +963,8 @@
top: 0;
left: 0;
background: var(--base);
- border-radius: var(--outerRadius);
- box-shadow: var(--shadow);
+ border-radius: var(--radius-outer);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.drag-preview .drag-items .drag-item:nth-child(1) {
@@ -338,7 +1028,7 @@
justify-content: center;
font-size: 12px;
font-weight: bold;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
z-index: var(--z-3);
}
@@ -357,11 +1047,11 @@
@keyframes drop-pulse {
0%, 100% {
- background-color: rgba(var(--action-rgb),var(--rgb-light));
+ background-color: rgba(var(--action-rgb),var(--op-3));
transform: scale(1.02);
}
50% {
- background-color: var(rgba(var(--action-rgb),var(--rgb-medium)));
+ background-color: var(rgba(var(--action-rgb),var(--op-4)));
transform: scale(1.04);
}
}
@@ -383,8 +1073,8 @@
.group-display.group-display {
position: fixed;
- top: var(--height);
- bottom: var(--height);
+ top: var(--btn);
+ bottom: var(--btn);
left: 0;
right: 0;
max-height: var(--maxHeight);
@@ -406,7 +1096,7 @@
left: -.5rem;
right: -.5rem;
position: absolute;
- background-color: rgba(var(--base-rgb), var(--rgb-heavy));
+ background-color: rgba(var(--base-rgb), var(--op-6));
filter: blur(5px);
}
@@ -455,9 +1145,9 @@
position: absolute;
left: 0;
right: 0;
- background-color: rgba(var(--base-rgb), var(--rgb-heavy));
+ background-color: rgba(var(--base-rgb), var(--op-6));
z-index: var(--z-3);
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.group-display .item-grid {
height: 100%;
@@ -476,7 +1166,7 @@
height: fit-content;
top: 0;
z-index: var(--z-3);
- background-color: rgba(var(--action-rgb), var(--rgb-heavy));
+ background-color: rgba(var(--action-rgb), var(--op-6));
}
.group-display .sidebar .upload-group {
order: 1;
@@ -502,7 +1192,7 @@
}
.submit-uploads {
- bottom: var(--height);
+ bottom: var(--btn);
left: 0;
right: 0;
width: 100%;
@@ -527,7 +1217,7 @@
.group-display .preview-wrap,
.group-display .sidebar {
--justify: flex-start;
- max-height: calc(100vh - var(--doubleHeight));
+ max-height: calc(100vh - var(--btnbtn));
overflow: hidden auto;
}
.group-display .preview-wrap,
@@ -539,7 +1229,7 @@
.preview-wrap .hint {
position: sticky;
z-index: var(--z-3);
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
background-color: var(--base);
width: 100%;
}
@@ -564,14 +1254,14 @@
.restore-uploads {
position: fixed;
- top: var(--offHeight);
- bottom: var(--offHeight);
+ top: var(--btn_);
+ bottom: var(--btn_);
left: 1rem;
right: 1rem;
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
padding: 1rem;
- z-index: var(--z-top);
- box-shadow: var(--shadow);
+ z-index: var(--z-7);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
background-color: var(--base-200);
overflow: hidden auto;
}
@@ -585,7 +1275,7 @@
top: 0;
background-color: var(--base-50);
z-index: var(--z-6);
- box-shadow: var(--shadow-down);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
margin-bottom: 2rem;
}
@@ -599,8 +1289,8 @@
flex-wrap: wrap;
padding: .25rem;
gap: .5rem 1rem;
- border-top-left-radius: var(--innerRadius);
- border-top-right-radius: var(--innerRadius);
+ border-top-left-radius: var(--radius);
+ border-top-right-radius: var(--radius);
border-bottom: 4px solid var(--base-50);
}
.ql-toolbar .ql-formats {
@@ -610,8 +1300,8 @@
.editor-container .ql-container {
--padding: 1rem;
background-color: var(--base);
- border-bottom-left-radius: var(--innerRadius);
- border-bottom-right-radius: var(--innerRadius);
+ border-bottom-left-radius: var(--radius);
+ border-bottom-right-radius: var(--radius);
height: fit-content;
padding: 2px;
border: 1px solid var(--base-200);
@@ -641,7 +1331,7 @@
transform: translateY(10px);
background-color: var(--base-100);
border: 1px solid var(--base);
- box-shadow: 0px 0px 5px var(--overlay-heavy);
+ box-shadow: 0px 0px 5px rgba(var(--base-rgb),var(--op-6));
color: var(--contrast);
padding: 5px 12px;
white-space: nowrap;
@@ -677,12 +1367,12 @@
/*.group-actions button {*/
/* padding: 0.5rem 0.75rem;*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* background: rgba(var(--action-rgb), 0.1);*/
/* border: 1px solid rgba(var(--action-rgb), 0.3);*/
/* color: var(--action-0);*/
-/* font-size: var(--small);*/
-/* transition: all var(--transition-base);*/
+/* font-size: var(--txt-small);*/
+/* transition: all var(--trans-base);*/
/* cursor: pointer;*/
/*}*/
@@ -696,7 +1386,7 @@
/*.item-grid.group {*/
/* background: rgba(255, 255, 255, 0.5);*/
/* border: 1px solid rgba(var(--action-rgb), 0.15);*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* padding: 0.75rem;*/
/* min-height: 100px;*/
/*}*/
@@ -704,7 +1394,7 @@
/*!* Group count hint *!*/
/*.group-count {*/
/* margin-top: 0.5rem;*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* color: var(--contrast-70);*/
/* font-style: italic;*/
/*}*/
@@ -775,9 +1465,9 @@
/* padding: 1rem;*/
/* background: rgba(var(--action-rgb), 0.05);*/
/* border: 1px solid rgba(var(--action-rgb), 0.2);*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* margin: 1rem 0;*/
-/* animation: slideDown var(--transition-base);*/
+/* animation: slideDown var(--trans-base);*/
/*}*/
/*.field.upload .progress[hidden] {*/
@@ -807,7 +1497,7 @@
/*!* Progress details - styled for row layout with text and count *!*/
/*.progress > .details {*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* color: var(--contrast);*/
/* display: flex;*/
/* justify-content: space-between;*/
@@ -841,7 +1531,7 @@
/* gap: 0.5rem;*/
/* z-index: var(--z-2);*/
/* color: white;*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* backdrop-filter: blur(2px);*/
/*}*/
@@ -864,7 +1554,7 @@
/*.upload.item .progress span.details {*/
/* color: white;*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* font-weight: 500;*/
/*}*/
@@ -897,7 +1587,7 @@
/*!* Selection checkbox - always visible on hover or when checked *!*/
/*.upload.item .upload-select + label::before {*/
/* opacity: 0.7;*/
-/* transition: all var(--transition-base);*/
+/* transition: all var(--trans-base);*/
/*}*/
/*.upload.item:hover .upload-select + label::before,*/
@@ -925,7 +1615,7 @@
/*}*/
/*.selection-count {*/
-/* font-size: var(--large);*/
+/* font-size: var(--txt-large);*/
/* color: var(--action-0);*/
/*}*/
@@ -1031,7 +1721,7 @@
/*.restore-message h4 {*/
/* margin: 0 0 0.5rem 0;*/
/* color: var(--action-0);*/
-/* font-size: var(--large);*/
+/* font-size: var(--txt-large);*/
/*}*/
/*.restore-message .restore-details {*/
@@ -1042,7 +1732,7 @@
/*.restore-message .hint {*/
/* margin: 0.5rem 0 0 0;*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* color: var(--contrast-70);*/
/*}*/
@@ -1080,10 +1770,10 @@
/* display: flex;*/
/* flex-direction: column;*/
/* border: 2px solid var(--border);*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* overflow: hidden;*/
/* cursor: pointer;*/
-/* transition: all var(--transition-base);*/
+/* transition: all var(--trans-base);*/
/* position: relative;*/
/*}*/
@@ -1132,7 +1822,7 @@
/*}*/
/*.restore-item-info .name {*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* font-weight: 600;*/
/* color: var(--contrast);*/
/* overflow: hidden;*/
@@ -1178,13 +1868,13 @@
/*.selection-controls button {*/
/* padding: 0.5rem 1rem;*/
-/* font-size: var(--small);*/
+/* font-size: var(--txt-small);*/
/* border: 1px solid var(--border);*/
/* background: var(--base);*/
/* color: var(--contrast);*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* cursor: pointer;*/
-/* transition: all var(--transition-base);*/
+/* transition: all var(--trans-base);*/
/*}*/
/*.selection-controls button:hover {*/
@@ -1206,9 +1896,9 @@
/* font-size: var(--base);*/
/* font-weight: 600;*/
/* border: none;*/
-/* border-radius: var(--innerRadius);*/
+/* border-radius: var(--radius);*/
/* cursor: pointer;*/
-/* transition: all var(--transition-base);*/
+/* transition: all var(--trans-base);*/
/* display: flex;*/
/* align-items: center;*/
/* gap: 0.5rem;*/
@@ -1326,7 +2016,7 @@
.form-progress .progress {
background: var(--base-100);
- border-radius: var(--innerRadius);
+ border-radius: var(--radius);
padding: 1rem;
}
@@ -1347,7 +2037,7 @@
}
.form-progress .step-text {
- font-size: var(--small);
+ font-size: var(--txt-small);
font-weight: 600;
color: var(--contrast-200);
}
@@ -1385,7 +2075,7 @@
align-items: center;
justify-content: center;
font-weight: 700;
- font-size: var(--small);
+ font-size: var(--txt-small);
border: 3px solid var(--base);
}
@@ -1447,7 +2137,7 @@
.error-message {
color: var(--errorText);
- font-size: var(--small);
+ font-size: var(--txt-small);
margin-top: 0.25rem;
display: block;
}
@@ -1456,11 +2146,11 @@
@media (max-width: 768px) {
form nav.tabs button {
min-width: 80px;
- font-size: var(--small);
+ font-size: var(--txt-small);
}
form nav.tabs button h2 {
- font-size: var(--small);
+ font-size: var(--txt-small);
}
form {
@@ -1514,7 +2204,7 @@
/* Validation Message */
.validation-message {
color: var(--error-0);
- font-size: var(--small);
+ font-size: var(--txt-small);
margin-top: 0.25rem;
display: block;
animation: slideDown 0.2s ease;
@@ -1625,14 +2315,14 @@
}
.ql-toolbar button {
- --height: fit-content;
+ min-height: 0;
padding: .5rem;
}
.success-message {
- color: var(--success, #16a34a);
- background-color: var(--success-bg, #f0fdf4);
- border: 1px solid var(--success, #16a34a);
+ color: var(--success);
+ background-color: var(--successBack);
+ border: 1px solid var(--success);
padding: 0.75rem 1rem;
border-radius: var(--radius);
margin-bottom: 1rem;
@@ -1648,16 +2338,16 @@
}
.success-box {
- background-color: var(--success-bg, #f0fdf4);
- border: 2px solid var(--success, #16a34a);
+ background-color: var(--successBack);
+ border: 2px solid var(--success);
padding: 1.5rem;
- border-radius: var(--outerRadius);
+ border-radius: var(--radius-outer);
margin-bottom: 1rem;
text-align: center;
}
.success-box h3 {
- color: var(--success, #16a34a);
+ color: var(--success);
margin-bottom: 0.5rem;
}
@@ -1685,19 +2375,19 @@
.field-error input,
.field-error textarea,
.field-error select {
- border-color: var(--error, #dc2626);
+ border-color: var(--error);
}
.error-message {
- color: var(--error, #dc2626);
- font-size: var(--small);
+ color: var(--error);
+ font-size: var(--txt-small);
margin-top: 0.25rem;
display: block;
}
.form-error {
- background-color: var(--error-bg, #fee);
- border: 1px solid var(--error, #dc2626);
+ background-color: var(--errorBack);
+ border: 1px solid var(--error);
padding: 0.75rem;
border-radius: var(--radius);
margin-bottom: 1rem;
@@ -1707,7 +2397,7 @@
.has-success input,
.has-success textarea,
.has-success select {
- border-color: var(--success, #16a34a);
+ border-color: var(--success);
}
.form-error {
display: flex;
@@ -1725,5 +2415,86 @@
width: 100%;
background-color: var(--base-100);
padding: .5rem;
- box-shadow: var(--shadow);
+ box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
+}
+
+.invite details {
+ margin-bottom: 1.5rem;
+}
+
+/*******************************
+Tag Field
+ */
+/* Tag List Field */
+.field.tag-list .tag-input-row {
+ display: flex;
+ gap: 0.5rem;
+ align-items: flex-start;
+ margin-bottom: 1rem;
+ flex-wrap: wrap;
+}
+
+.field.tag-list .tag-input-row .field {
+ flex: 1;
+ min-width: 150px;
+ margin: 0;
+}
+
+.field.tag-list .tag-input-row .add-tag-item {
+ flex-shrink: 0;
+ white-space: nowrap;
+ margin-top: calc(var(--txt-medium) + 1rem);
+}
+
+.field.tag-list .tag-items {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 1rem;
+ min-height: 2rem;
+}
+
+.field.tag-list .tag-item {
+ background: var(--base-200);
+ padding: 0.4rem 0.75rem;
+ border-radius: 4px;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.9rem;
+ line-height: 1.2;
+}
+
+.field.tag-list .tag-item:hover {
+ background: var(--base-100);
+}
+
+.field.tag-list .tag-label {
+ max-width: 300px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.field.tag-list .remove-tag {
+ min-height: 0;
+ padding: .25rem;
+ color: var(--contrast);
+ transition: transform 0.2s;
+ box-shadow: none;
+}
+
+.field.tag-list .remove-tag:hover {
+ transform: scale(1.2);
+}
+
+@media (max-width: 768px) {
+ .field.tag-list .tag-input-row {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .field.tag-list .tag-input-row .field {
+ min-width: 100%;
+ }
}
\ No newline at end of file
--
Gitblit v1.10.0