| | |
| | | .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, |
| | |
| | | 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; |
| | | } |
| | |
| | | .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; |
| | | } |
| | | |
| | |
| | | .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, |
| | |
| | | .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; |
| | | } |
| | | |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | 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 { |
| | |
| | | } |
| | | |
| | | .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; |
| | |
| | | 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) { |
| | |
| | | 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); |
| | | } |
| | | |
| | |
| | | |
| | | @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); |
| | | } |
| | | } |
| | |
| | | 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); |
| | | } |
| | | |
| | |
| | | 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%; |
| | |
| | | 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; |
| | |
| | | .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%; |
| | | } |
| | |
| | | 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; |
| | | } |
| | | |
| | |
| | | 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; |
| | |
| | | /*.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);*/ |
| | |
| | | /*}*/ |
| | | |
| | | /*.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);*/ |
| | | /*}*/ |
| | |
| | | /*!* 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;*/ |
| | |
| | | /* 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);*/ |
| | |
| | | /*.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;*/ |
| | |
| | | /* 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 *!*/ |
| | |
| | | /*.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 *!*/ |
| | |
| | | /* 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;*/ |
| | |
| | | /*!* 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);*/ |
| | | /* }*/ |
| | | /*}*/ |
| | |
| | | |
| | | /*.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 *!*/ |
| | |
| | | /*.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 *!*/ |
| | |
| | | --w: 1.25rem; |
| | | } |
| | | .validation-icon.error { |
| | | color: var(--error); |
| | | color: rgb(var(--error)); |
| | | } |
| | | .validation-icon.success { |
| | | color: var(--success); |
| | |
| | | .field.has-error input, |
| | | .field.has-error textarea, |
| | | .field.has-error select { |
| | | border-color: var(--error); |
| | | border-color: rgb(var(--error)); |
| | | background-color: var(--errorBack) |
| | | } |
| | | |
| | | .field.has-error input:focus, |
| | | .field.has-error textarea:focus, |
| | | .field.has-error select:focus { |
| | | outline-color: var(--error); |
| | | box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.2); |
| | | outline-color: rgb(var(--error)); |
| | | box-shadow: 0 0 0 3px rgba(var(--error), 0.2); |
| | | } |
| | | |
| | | /* Success State */ |
| | |
| | | |
| | | /* Required Asterisk */ |
| | | .field label .required { |
| | | color: var(--error); |
| | | color: rgb(var(--error)); |
| | | margin-left: 0.25rem; |
| | | } |
| | | |
| | |
| | | .field-error input, |
| | | .field-error textarea, |
| | | .field-error select { |
| | | border-color: var(--error); |
| | | border-color: rgb(var(--error)); |
| | | } |
| | | |
| | | .error-message { |
| | | color: var(--error); |
| | | color: rgb(var(--error)); |
| | | font-size: var(--txt-small); |
| | | margin-top: 0.25rem; |
| | | display: block; |
| | |
| | | |
| | | .form-error { |
| | | background-color: var(--errorBack); |
| | | border: 1px solid var(--error); |
| | | border: 1px solid rgb(var(--error)); |
| | | padding: 0.75rem; |
| | | border-radius: var(--radius); |
| | | margin-bottom: 1rem; |
| | |
| | | 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; |