:target {
|
outline: none!important;
|
padding: 0!important;
|
}
|
:root {
|
--height: 3rem;
|
}
|
body:has(#theme-switcher:checked) {
|
|
}
|
|
.dashboard h1:first-of-type {
|
margin-top: 0!important;
|
}
|
main > footer {
|
max-width: 100%!important;
|
position: fixed;
|
z-index: 20;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
margin: 4rem 0 0 0!important;
|
height: var(--height);
|
padding: 0!important;
|
background-color: var(--base);
|
box-shadow: var(--shadow);
|
}
|
main>* {
|
max-width: min(768px, 90vw)!important;
|
margin: 0 auto!important;
|
}
|
main h1 {
|
margin: 0!important;
|
font-size: var(--large);
|
}
|
main h1 + p + h2 {
|
font-size: var(--medium);
|
text-transform: none;
|
margin: 0!important;
|
}
|
.replace {
|
max-width: 90vw!important;
|
margin: 1rem auto!important;
|
}
|
|
.dash .replace {
|
text-align: center;
|
}
|
.dash input {
|
text-align: center;
|
}
|
.dash .true-false {
|
display: flex;
|
justify-content: center;
|
margin: 0;
|
}
|
.dash button[type=submit] {
|
width: 50%;
|
margin: 1rem auto;
|
}
|
|
|
form h2 {
|
margin: .5rem 0 1.5rem!important;
|
}
|
|
.dashboard-nav {
|
height: var(--height);
|
max-width:100vw;
|
padding: 0 .5rem;
|
}
|
.dashboard-nav ul {
|
height: var(--height);
|
overflow-x: auto;
|
}
|
.dashboard-nav li + li:before {
|
display: none!important;
|
}
|
.dashboard-nav a {
|
height: var(--height);
|
min-width: var(--height);
|
padding: 0 .75rem;
|
color: var(--contrast)!important;
|
}
|
.dashboard-nav a .icon {
|
margin: 0;
|
}
|
.dashboard-nav a span {
|
display: none;
|
}
|
.dashboard-nav .current a:hover,
|
.dashboard-nav a:hover {
|
background-color: var(--action-0)!important;
|
color: var(--action-contrast)!important;
|
}
|
.dashboard-nav .current a {
|
background-color: var(--base-100)!important;
|
color: var(--contrast)!important;
|
}
|
.dashboard-nav .current a span {
|
display: block;
|
}
|
|
|
|
/* Loading states */
|
main {
|
opacity: 1;
|
transition: opacity .3s ease-in-out;
|
padding-bottom: 7rem;
|
min-height: calc(100vh - 12rem);
|
}
|
|
main.transitioning {
|
opacity: 0;
|
}
|
.loading {
|
opacity: .7;
|
}
|
|
|
/*Upload overlay*/
|
.loading-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: var(--overlay-medium);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
opacity: 0;
|
visibility: hidden;
|
transition: opacity .3s ease, visibility .3s ease;
|
z-index: 9999;
|
}
|
|
.loading-overlay.active {
|
opacity: 1;
|
visibility: visible;
|
}
|
|
.loading-overlay .wrapper {
|
background-color: var(--base);
|
padding: 2rem;
|
border-radius: 8px;
|
text-align: center;
|
max-width: 90%;
|
width: 400px;
|
}
|
|
.upload-spinner {
|
width: 50px;
|
height: 50px;
|
border: 5px solid var(--base-200);
|
border-top: 5px solid var(--action-0);
|
border-radius: 50%;
|
margin: 0 auto 1rem;
|
animation: spin 1s linear infinite;
|
}
|
|
.upload-status h3 {
|
margin: 0 0 .5rem;
|
color: var(--contrast);
|
}
|
|
.upload-message {
|
margin: 0;
|
color: var(--contrast-100);
|
font-size: var(--small);
|
}
|
|
|
|
/* Optional: Add a pulsing effect to the text */
|
.upload-message {
|
animation: flicker 2s infinite;
|
}
|
|
@keyframes flicker {
|
0% { opacity: .6; }
|
50% { opacity: 1; }
|
100% { opacity: .6; }
|
}
|
|
.form-section {
|
max-height: 0;
|
transform: scale(0);
|
visibility: hidden;
|
}
|
form:not(:has(.form-section.active)) .form-section:first-of-type,
|
.form-section.active {
|
max-height: fit-content;
|
transform: scale(1);
|
visibility: visible;
|
}
|
|
|
|
.form-sections {
|
--height: fit-content;
|
position: fixed;
|
bottom: 3rem;
|
left: 0;
|
right: 0;
|
background-color: var(--base-100);
|
box-shadow: var(--shadow);
|
z-index: 10;
|
}
|
.form-sections ul {
|
gap: 0;
|
}
|
.form-sections li {
|
width: 50%;
|
}
|
|
.form-sections a:visited,
|
.form-sections a {
|
padding: .25rem;
|
width: 100%;
|
color: var(--contrast);
|
}
|
.replace:not(:has(.form-section.active)) .form-sections li:first-of-type a,
|
.current a {
|
background-color: var(--base-200);
|
color: var(--contrast);
|
}
|
.form-sections .icon {
|
margin: 0;
|
}
|
@media (min-width: 768px){
|
.form-sections ul {
|
flex-wrap: nowrap;
|
}
|
.form-sections li {
|
width: 100%;
|
}
|
}
|
|
.submit-container {
|
position: fixed;
|
z-index: 20;
|
}
|
.submit-container button {
|
padding: 0;
|
width: 3rem;
|
height: 3rem;
|
color: var(--contrast-200);
|
background-color: var(--base-200);
|
justify-content: center;
|
border: 3px solid transparent;
|
}
|
.submit-container .save-popup {
|
position: absolute;
|
z-index: -1;
|
top: calc(50% - (1.875rem / 2));
|
font-size: var(--small);
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
padding: .25rem .5rem;
|
border-radius: 4px;
|
white-space: nowrap;
|
visibility: hidden;
|
transition: all var(--transition-base);
|
opacity: 0;
|
}
|
.submit-container .icon {
|
--w: 2em;
|
}
|
.save-popup::before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
border-top: .5rem solid transparent;
|
border-bottom: .5rem solid transparent;
|
}
|
.save-popup.show {
|
opacity: 1;
|
visibility: visible;
|
}
|
|
@media (max-width: 767px){
|
.submit-container {
|
top: 3.5rem;
|
right: .5rem;
|
}
|
.save-popup {
|
right: 0;
|
}
|
.save-popup:before{
|
right: -.25rem;
|
border-left: .5rem solid var(--action-0);
|
}
|
.save-popup.show {
|
right: calc(100% + .5rem);
|
}
|
}
|
@media (min-width: 768px){
|
.submit-container {
|
bottom: 6rem;
|
left: .5rem;
|
}
|
.save-popup {
|
left: 0;
|
}
|
.save-popup:before{
|
left: -.25rem;
|
border-right: .5rem solid var(--action-0);
|
}
|
.save-popup.show {
|
left: calc(100% + .5rem);
|
}
|
}
|
|
.autosaving span.save,
|
.autosaving button[type=submit] {
|
border-color: var(--base-200);
|
border-top-color: var(--action-0);
|
border-bottom-color: var(--action-50);
|
border-radius: 50%;
|
color: var(--contrast-200);
|
transition: color .25s var(--timing) var(--function);
|
transition-property: color, background-color, border;
|
animation: spin 1s linear infinite;
|
}
|
.autosaving .submit-container {
|
animation: pulse 1s linear infinite;
|
}
|
|
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
}
|
@keyframes pulse {
|
0% {
|
transform: scale(.85);
|
opacity: .6;
|
}
|
50% {
|
transform:scale(1);
|
opacity: 1; }
|
100% {
|
transform: scale(.85);
|
opacity: .6; }
|
}
|
|
.item-link[href=""]{
|
display: none;
|
}
|
.item-link {
|
position: fixed;
|
bottom: 5rem;
|
right: 1.5rem;
|
text-transform: uppercase;
|
color: var(--action-0);
|
background-color: var(--base);
|
border-radius: 4px;
|
padding: .25rem .5rem;
|
box-shadow: var(--subtle);
|
}
|
.field {
|
margin: 3rem .5rem;
|
}
|
.field:has([required]) label::after {
|
content: 'required';
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23B7332E" viewBox="0 0 256 256"><path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path></svg>');
|
display: inline-block;
|
background-position: left center;
|
background-size: 1.2em;
|
padding-left: 1.3em;
|
background-repeat: no-repeat;
|
font-weight: 100;
|
text-transform: none;
|
font-size: .75em;
|
vertical-align: super;
|
|
}
|
.field:has([required]) label {
|
position: relative;
|
}
|
.repeater-items .field {
|
margin: 1rem 0;
|
}
|
.taxonomy .field-group-header {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.add-item-btn {
|
padding: .5em;
|
background: var(--base-100);
|
border: 1px solid var(--contrast-200);
|
border-radius: .25rem;
|
cursor: pointer;
|
font-size: .875rem;
|
}
|
.add-item-btn .icon {
|
--w: 1.5em;
|
}
|
|
.add-item-btn:hover {
|
background: var(--base-200);
|
}
|
summary .type-label {
|
display: flex;
|
align-items: center;
|
gap: 1rem;
|
}
|
summary .type-label .icon {
|
position: relative;
|
top: -.25em;
|
}
|
|
/** Tabs **/
|
.tabs {
|
display: flex;
|
margin-bottom: 1.5rem;
|
border-bottom: 2px solid var(--base-200);
|
flex-wrap: wrap;
|
}
|
.tabs.parent {
|
max-width: 100vw;
|
background-color: var(--base);
|
padding: .5rem;
|
width: 100vw;
|
position: relative;
|
left: -2.1rem;
|
margin: 1rem 0;
|
}
|
.tab-content h2 {
|
font-size: var(--large);
|
margin: 0!important;
|
}
|
.tab-content .tab-navigation,
|
.tab-content button[type=submit] {
|
display: inline-flex;
|
width: 48%;
|
background-color: var(--action-200);
|
color: var(--contrast-200);
|
}
|
|
.tab-navigation.next {
|
display: flex;
|
margin-left: auto;
|
}
|
.tab-content .tab-navigation + button {
|
display: inline-flex;
|
margin-left: 3%;
|
}
|
|
.tabs > button {
|
padding: .75rem 1.5rem;
|
border-radius: 0;
|
border: none;
|
background: none;
|
font-size: 1.1rem;
|
font-weight: bold;
|
letter-spacing: .05em;
|
text-transform: uppercase;
|
cursor: pointer;
|
position: relative;
|
color: inherit;
|
}
|
.tabs > button h2 {
|
font-size: 1.1rem;
|
line-height: 1;
|
margin: 0!important;
|
}
|
.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.active::after {
|
width: 100%;
|
}
|
|
.tabs > button.add-item-btn {
|
margin-left: auto;
|
background-color: var(--action-50);
|
border-radius: 4px;
|
padding: .5em;
|
font-weight: normal;
|
border: 1px solid var(--action-50);
|
}
|
.tabs > button.add-item-btn:focus,
|
.tabs > button.add-item-btn:hover {
|
background-color: var(--base);
|
}
|
|
.type-filter:not(.active) span:not(.count){
|
display: none;
|
}
|
.type-filter:not(.active):hover span:not(.count){
|
display: block;
|
}
|
/** News **/
|
.item-grid.list-view .item.news {
|
flex-direction: column;
|
}
|
.item.news h3 {
|
font-size: var(--medium);
|
margin: 0!important;
|
}
|
.item.news summary .image {
|
width: 5rem;
|
background-color: var(--base-200);
|
border-radius: 4px;
|
aspect-ratio: 1;
|
}
|
.item.news summary {
|
gap: 1rem;
|
}
|
.item.news summary .summary {
|
width: 100%;
|
}
|
.item.news summary .header {
|
display: flex;
|
justify-content: space-between;
|
padding: .5rem 0;
|
}
|
.item .vote {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
gap: .5em;
|
margin-top: auto;
|
}
|
.vote .count {
|
white-space: nowrap;
|
}
|
.item .vote .count:nth-of-type(2) {
|
margin-right: 2rem;
|
}
|
/** Favourites **/
|
.favourites-title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
main button {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
}
|
|
.my-lists {
|
margin: .5rem 0;
|
}
|
|
details.uploader .file-upload-container {
|
margin: 1rem var(--mr) 1rem var(--ml);
|
max-width: var(--maxWidth);
|
}
|
details .no-items {
|
text-align: center;
|
font-style: italic;
|
background-color: var(--base-50);
|
padding: var(--outerPadding);
|
border-radius: var(--innerRadius);
|
}
|
|
.controls {
|
display: flex;
|
flex-wrap: wrap;
|
gap: .5rem;
|
justify-content: space-between;
|
}
|
|
.controls label .icon + span {
|
transform: scaleX(0);
|
max-width: 0;
|
}
|
|
.type-filters:hover label:hover .icon + span,
|
.controls label:hover .icon + span,
|
.controls :checked + label .icon + span {
|
transform: scaleX(1);
|
max-width: fit-content;
|
}
|
.type-filters,
|
.view-controls {
|
display: flex;
|
flex-wrap: wrap;
|
gap: .5rem;
|
}
|
|
/** Generalized Type Filters **/
|
details.type-filters {
|
flex-direction: column;
|
}
|
details.type-filters form.filters {
|
flex-direction: column;
|
}
|
|
details.type-filters div.filters {
|
flex-wrap: wrap;
|
}
|
|
details.type-filters .order-options {
|
width: 100%;
|
display: flex;
|
}
|
details.type-filters .order-options > div {
|
display: flex;
|
}
|
details.type-filters .order-by {
|
width: 100%;
|
}
|
details.type-filters .order-by .radio-group-label {
|
width: 100%;
|
display: flex;
|
gap: 1rem;
|
}
|
details.type-filters label {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
}
|
|
details.type-filters label {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: .35rem;
|
white-space: nowrap;
|
width: fit-content;
|
height: fit-content;
|
cursor: pointer;
|
border: 1px solid var(--base-200);
|
border-radius: 4px;
|
font-size: .875rem;
|
transition: border-color var(--transition-base);
|
margin-bottom: .5rem;
|
}
|
.filter-toggle .icon {
|
margin-right: .5rem;
|
}
|
details.type-filters label:hover,
|
details.type-filters input:checked + label {
|
background-color: var(--light-0);
|
border-color: var(--action-0);
|
color: var(--action-0);
|
}
|
details.type-filters .order-direction {
|
justify-content: flex-end;
|
}
|
|
/** Generalized Modal **/
|
|
/* Grid */
|
.create-item {
|
left: auto!important;
|
right: 1rem;
|
bottom: var(--offHeight)!important;
|
}
|
body:has(.group-display:not([hidden])) button.create-item{
|
display: none;
|
}
|
.uploader .groups,
|
.item-grid {
|
--padding: 0;
|
padding: var(--padding);
|
transition: padding var(--transition-base);
|
}
|
.uploader .groups,
|
.item-grid.grid-view {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
gap: .5rem;
|
margin-top: 2rem;
|
}
|
|
.item-grid.empty {
|
grid-template-columns: repeat(1, 1fr)!important;
|
}
|
.item-grid.empty div {
|
text-align: center;
|
border-radius: var(--innerRadius);
|
background-color: var(--base-100);
|
}
|
.item-grid.empty h3 .icon {
|
display: inline-flex;
|
vertical-align: middle;
|
margin: 0 1rem;
|
}
|
.uploader .group,
|
.item {
|
width: calc(100% - (var(--padding) * 2));
|
}
|
.item-grid .item {
|
user-select: none;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
}
|
.item-grid .item .logo {
|
--w: 100%;
|
opacity: .2;
|
}
|
/** Grid View **/
|
.item-grid:not(.list-view) .item {
|
display: flex;
|
position: relative;
|
flex-direction: column;
|
}
|
.item-grid:not(.list-view) button.favourite,
|
.item-grid:not(.list-view) .item-select label {
|
position: absolute;
|
z-index: 15;
|
width: 3em;
|
height: 3em;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
top: .125rem;
|
padding: 0!important;
|
border-radius: var(--innerRadius);
|
background-color: var(--overlay-light);
|
color: var(--base-200);
|
}
|
.item-grid:not(.list-view) button.favourite:hover,
|
.item-grid:not(.list-view) .item-select label:hover {
|
background-color: var(--overlay-heavy);
|
color: var(--contrast);
|
}
|
.item-grid:not(.list-view) .item-select label::before {
|
border-color: var(--base-200);
|
position: relative;
|
top: 0;
|
left: 0;
|
transform: none;
|
}
|
|
.item-grid:not(.list-view) .item-select label::after {
|
left: calc(50% - 4px)!important;
|
}
|
.item-grid:not(.list-view) .item-select label:hover::before {
|
border-color: var(--contrast);
|
}
|
.item-grid:not(.list-view) .item-select label {
|
left: .1255rem;
|
}
|
.item-grid:not(.list-view) button.favourite {
|
right: .125rem;
|
}
|
.item-grid:not(.list-view) img {
|
width: 100%;
|
max-width: 100%;
|
height: auto;
|
aspect-ratio: 1;
|
object-fit: cover;
|
}
|
/** List View **/
|
.replace:not(:has(.list-view)) button[data-view=grid],
|
.replace:has(.list-view) button[data-view=list] {
|
background-color: var(--base);
|
}
|
.item-grid.list-view .item {
|
display: flex;
|
position: relative;
|
flex-direction: row;
|
margin: .5rem 0;
|
padding: .25rem .5rem;
|
gap: .5rem;
|
}
|
.item-grid.list-view .item:nth-of-type(even){
|
background-color: var(--base-100);
|
}
|
|
.item-grid.list-view .item-select label{
|
display: flex;
|
height: 100%;
|
justify-content: center;
|
align-items: center;
|
padding: 0 .5rem!important;
|
}
|
.item-grid.list-view .item-select label::after {
|
/*left: calc(50% - 4px)!important;*/
|
}
|
.item-grid.list-view .item-select label::before {
|
position: relative;
|
top: 0;
|
transform: none;
|
}
|
.item-grid.list-view .item-select label:hover {
|
background-color: var(--base);
|
}
|
|
.item-grid.list-view .item-select label:hover::before {
|
border-color: var(--action-0);
|
}
|
.item-grid.list-view img {
|
width: 200px;
|
height: 200px;
|
aspect-ratio: 1;
|
object-fit: cover;
|
}
|
.item-grid.list-view .item-info {
|
width: 100%;
|
}
|
.item-grid .item-info h3 {
|
margin: 0!important;
|
text-align: right;
|
font-size: var(--medium);
|
text-transform: none;
|
}
|
.item-grid .item-info a {
|
text-align: right;
|
width: 100%;
|
display: block;
|
font-weight: normal;
|
font-family: var(--body);
|
}
|
.item-grid .item-info a::before,
|
.item-grid .item-info a::after {
|
display: none;
|
}
|
.item-grid.list-view .item-info .toggle-notes {
|
display: none;
|
}
|
.item-grid.list-view .item-info .notes-content[hidden]{
|
display: block!important;
|
}
|
.item-grid.list-view .item-info .notes-content {
|
margin-top: 1rem;
|
}
|
.no-favourites {
|
text-align: center;
|
}
|
.no-favourites h3 {
|
margin: 0 auto!important;
|
}
|
/**
|
Limit reached
|
*/
|
.reached .current {
|
color: var(--action-50);
|
}
|
.reached textarea,
|
.reached input {
|
border: 2px solid var(--action-50);
|
}
|
/**
|
Groups
|
*/
|
.groups {
|
gap: 1rem;
|
}
|
details.uploaded .file-upload-container,
|
details:not(.uploaded) .selection-container {
|
display: none;
|
}
|
.uploading + .selection-container {
|
display: flex!important;
|
}
|
.selection-container #save-changes {
|
position: sticky;
|
top: 3rem;
|
left: 100%;
|
border: 1px solid transparent;
|
background-color: var(--action-50);
|
box-shadow:var(--shadow);
|
z-index: 5;
|
}
|
.selection-container #save-changes:hover {
|
background-color: var(--base);
|
border: 1px solid var(--action-50);
|
color: 1px solid var(--action-50);
|
}
|
|
.group {
|
padding: 1rem .66rem;
|
background-color: var(--base-50);
|
border-radius: var(--outerRadius);
|
}
|
.group.empty {
|
aspect-ratio: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
border: 4px dashed var(--base-200);
|
}
|
.group.empty .items {
|
padding: 0;
|
margin-top: 0;
|
}
|
|
.group .group-header {
|
display: flex;
|
position: relative;
|
}
|
.group .group-header label {
|
position: absolute;
|
top: -1.5rem;
|
}
|
.group .items {
|
margin-top: 1rem;
|
padding: 1rem;
|
border-radius: var(--innerRadius);
|
background-color: var(--base);
|
}
|
.group .item-actions {
|
display: flex;
|
justify-content: space-between;
|
width: 100%;
|
}
|
.group .item-actions > button,
|
.group .item-actions label {
|
flex: 1;
|
padding: .25em!important;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 0;
|
}
|
.group .item-actions :checked + label {
|
background-color: var(--action-50);
|
color: var(--contrast);
|
}
|
.group .item-actions :checked + label:hover {
|
border: 1px solid var(--action-50);
|
background-color: transparent;
|
color: var(--action-50);
|
}
|
.group .item-actions label::before {
|
display: none!important;
|
}
|
|
.group-item img,
|
.preview-item img {
|
width: 250px;
|
height: auto;
|
object-fit: cover;
|
aspect-ratio: 1;
|
|
}
|
.uploading .preview-item img,
|
.uploading .group-item img{
|
animation: uploading 3s ease-in-out infinite alternate;
|
}
|
@keyframes uploading {
|
0% {
|
opacity: .6;
|
filter: sepia(.3) grayscale(.3);
|
transform: scale(.9);
|
}
|
100% {
|
opacity: 1;
|
filter: sepia(0) grayscale(0);
|
transform: scale(1);
|
}
|
}
|
|
.image-actions {
|
display: flex;
|
gap: 1rem;
|
flex-wrap: wrap;
|
}
|
|
.group.drop {
|
border: 2px dashed var(--action-0);
|
background: var(--action-rgb-subtle);
|
}
|
|
.group .items {
|
padding: 1rem;
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 1rem;
|
}
|
|
.group-content {
|
min-height: 100px;
|
padding: 1rem;
|
}
|
|
.group.drop {
|
background: var(--action-rgb-subtle);
|
border: 2px dashed var(--action-0);
|
}
|
.gallery .group-item,
|
.gallery .preview-item {
|
cursor: grab;
|
}
|
.group-item.dragging,
|
.preview-item.dragging {
|
cursor: grabbing;
|
opacity: .5;
|
}
|
|
.items {
|
display: grid;
|
grid-template-columns: repeat(3,1fr);
|
gap: 1rem;
|
}
|
|
/** Gallery **/
|
.gallery .preview-item .move-image {
|
cursor: grab;
|
position: absolute;
|
top: .5rem;
|
left: .5rem;
|
opacity: 0;
|
transition: opacity .2s;
|
}
|
.gallery-preview {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
padding: .5rem;
|
background-color: var(--base-100);
|
border-radius: var(--outerRadius);
|
}
|
.gallery-preview .preview-item {
|
padding: .5rem;
|
background-color: var(--base);
|
border-radius: var(--innerRadius);
|
}
|
|
.gallery .preview-item:hover .move-image {
|
opacity: 1;
|
}
|
|
.gallery .preview-item.sortable-ghost {
|
opacity: .5;
|
}
|
|
.gallery .preview-item.sortable-drag {
|
cursor: grabbing;
|
}
|
|
.preview-item .upload-status {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
height: 4px;
|
background: rgba(0,0,0,.1);
|
}
|
|
.preview-item.error {
|
border-color: red;
|
}
|
|
.preview-item.complete .upload-status {
|
display: none;
|
}
|
|
/** Settings **/
|
.notification-table {
|
width: 100%;
|
}
|
.notification-table tr td:first-of-type {
|
width: 100%;
|
}
|
.notification-table td {
|
vertical-align: middle;
|
padding: 0 .5rem;
|
}
|
.notification-table td + td {
|
text-align: right;
|
}
|
thead th {
|
width: 50%;
|
}
|
|
@media (max-width: 767px){
|
table .radio-options {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
}
|
table .radio-options label {
|
width: 85%;
|
margin-bottom: 0;
|
}
|
}
|
|
/** Favourites Lists **/
|
.list-card {
|
background-color: var(--base-50);
|
padding: 1rem;
|
border-radius: var(--innerRadius);
|
}
|
.list-header {
|
display: flex;
|
justify-content: space-between;
|
}
|
h2 .icon {
|
--w: 1.5em;
|
display: inline-block;
|
vertical-align: middle;
|
margin-right: .75rem;
|
}
|
.list-card h3,
|
.list-header h2 {
|
margin: 0!important;
|
font-size: var(--large);
|
}
|
.list-actions {
|
display: flex;
|
justify-content: space-between;
|
gap: .5rem;
|
}
|
.list-header + .list-actions {
|
justify-content: flex-end;
|
}
|
.create-list-btn {
|
font-size: var(--small);
|
}
|
.meta-stats {
|
display: flex;
|
justify-content: space-between;
|
font-style: italic;
|
}
|
|
/** Repeater **/
|
.add-repeater-row {
|
margin-left: auto;
|
border: 1px solid var(--contrast-200);
|
}
|
|
/** Image **/
|
|
.image-display {
|
max-height: 0;
|
overflow: hidden;
|
transform: scaleY(0);
|
transition: max-height var(--timing) var(--function);
|
transition-property: max-height, transform;
|
}
|
.image-display.has-image {
|
max-height: 100%;
|
transform: scaleY(1);
|
transition: max-height var(--timing) var(--function);
|
transition-property: max-height, transform;
|
}
|
.file-upload-container {
|
margin-top: 1rem;
|
}
|
|
.file-upload-wrapper {
|
border: 2px dashed var(--action-0);
|
border-radius: 4px;
|
padding: 2rem;
|
text-align: center;
|
transition: all .3s ease;
|
background: var(--action-rgb-subtle);
|
position: relative;
|
cursor: pointer;
|
}
|
.file-upload-wrapper h2 {
|
margin: 0!important;
|
font-size: var(--large);
|
}
|
|
.file-upload-wrapper:hover,
|
.dragover {
|
background: var(--action-rgb-subtle-hover);
|
border-color: var(--action-0)!important;
|
}
|
|
.file-upload-wrapper input[type="file"] {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
opacity: 0;
|
cursor: pointer;
|
}
|
|
.file-upload-text {
|
color: var(--contrast);
|
margin: 0;
|
font-family: var(--body);
|
}
|
|
.file-upload-text strong {
|
color: var(--action-0);
|
text-decoration: underline;
|
}
|
|
/* Error state */
|
.file-error {
|
color: var(--action-0);
|
margin-top: .5rem;
|
font-size: .9em;
|
}
|
|
.file-upload-container.uploading,
|
.image-display.has-image + .file-upload-container {
|
max-height: 0;
|
overflow: hidden;
|
transform: scaleY(0);
|
transition: max-height var(--timing) var(--function), transform var(--timing) var(--function);
|
transition-property: max-height, transform;
|
}
|
|
/** Highlighted Taxonomy **/
|
.highlight-options {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
gap: .5rem;
|
margin-top: 1rem;
|
}
|
|
.highlight-option {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
padding: .5rem;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
}
|
.highlight-option label {
|
margin-bottom: 0;
|
font-weight: normal;
|
}
|
|
.highlight-option input[type=checkbox]:disabled + label {
|
opacity: .5;
|
cursor: not-allowed;
|
}
|
|
/** Item Selection **/
|
|
.item-grid {
|
--padding: 0;
|
padding: var(--padding);
|
}
|
.item-grid.selecting {
|
--padding: .5rem;
|
transition: none;
|
background-color: var(--base);
|
}
|
.item {
|
--padding: 0;
|
height: fit-content;
|
padding: var(--padding);
|
max-width: calc(100% - (var(--padding) * 2));
|
transition: padding var(--transition-base);
|
}
|
.selecting .item {
|
opacity: .666;
|
}
|
.selecting .item:has(.select-checkbox:checked) {
|
--padding: .5rem;
|
opacity: 1;
|
background-color: var(--action-0);
|
transition: none;
|
}
|
|
|
.item-grid.preview .preview-item {
|
display: flex;
|
gap: 2rem;
|
}
|
.preview-item .preview-image {
|
width: 36%;
|
}
|
.preview-item .remove-file {
|
width: 100%;
|
background-color: var(--base);
|
color: var(--contrast);
|
}
|
.preview-item .field:first-of-type {
|
margin-top: 0!important;
|
}
|
.preview-item + .preview-item {
|
margin-top: 2rem;
|
padding-top: 2rem;
|
border-top: 2px solid var(--contrast-200);
|
}
|
|
.item-grid.preview:empty + .hint {
|
display: none;
|
}
|
|
body:has(.item-grid.empty) .bulk-controls {
|
display: none;
|
}
|
.bulk-controls {
|
margin: .75rem 0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.bulk-select {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.bulk-actions[hidden]{
|
max-width: 0;
|
max-height: 0;
|
overflow: hidden;
|
transform: scaleY(0);
|
transition: transform var(--timing) var(--function);
|
transition-property: transform, max-height;
|
transform-origin: top;
|
display: flex!important;
|
align-items: center;
|
gap: .5rem;
|
position: relative;
|
}
|
|
.bulk-actions {
|
max-width: 100%;
|
max-height: 100%;
|
transform: scaleY(1);
|
transition: transform var(--timing) var(--function);
|
transition-property: transform, max-height;
|
overflow:visible;
|
transform-origin: top;
|
display: flex;
|
gap: .25rem;
|
}
|
.bulk-actions select {
|
margin-right: .5rem;
|
}
|
|
.selected-count {
|
font-size: var(--small);
|
font-style: italic;
|
font-weight: normal;
|
margin-left: 1rem;
|
}
|
|
.input-with-button {
|
display: flex;
|
gap: .5rem;
|
}
|
.input-with-button .icon {
|
--w: 1.5em;
|
}
|
/** Single Edit Modal **/
|
dialog > form .field {
|
margin: 2rem 0;
|
}
|
.edit-modal [data-field=featured_image] img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
aspect-ratio: 1;
|
}
|
|
/** Bulk Edit Modal **/
|
.bulk-edit-modal .selected {
|
display: grid;
|
grid-template-columns: repeat(5, 1fr);
|
gap: .5rem;
|
background-color: var(--base);
|
padding: .5rem;
|
border-radius: var(--outerRadius);
|
}
|
.bulk-edit-modal .selected input[type=checkbox] {
|
position: absolute;
|
}
|
.bulk-edit-modal .selected label::before,
|
.bulk-edit-modal .selected label::after {
|
display: none;
|
}
|
.bulk-edit-modal .selected label {
|
opacity: .5;
|
padding: .5rem!important;
|
aspect-ratio: 1;
|
margin-bottom: 0;
|
max-width: 5rem;
|
height: auto;
|
cursor: pointer;
|
}
|
.bulk-edit-modal .selected label:has(input:checked) {
|
opacity: 1;
|
padding: 0!important;
|
}
|
|
.bulk-edit-modal .selected img {
|
max-width: 100%;
|
object-fit: cover;
|
aspect-ratio: 1;
|
border-radius: var(--innerRadius);
|
}
|
|
dialog .term-list {
|
display: block;
|
}
|
.pagination-info {
|
position: sticky;
|
background-color: var(--overlay-heavy);
|
top: 0;
|
}
|
.pagination-info:empty {
|
display: none;
|
}
|
|
/** Quill Stuff **/
|
.editor-container {
|
|
}
|
.editor-container .ql-toolbar {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
padding: .25rem;
|
gap: 1rem;
|
background-color: var(--base);
|
border-top-left-radius: var(--innerRadius);
|
border-top-right-radius: var(--innerRadius);
|
border-bottom: 4px solid var(--base-50);
|
}
|
.ql-toolbar .ql-formats {
|
display: flex;
|
gap: .25rem;
|
}
|
.editor-container .ql-container {
|
--padding: 1rem;
|
background-color: var(--base);
|
border-bottom-left-radius: var(--innerRadius);
|
border-bottom-right-radius: var(--innerRadius);
|
height: fit-content;
|
padding: 2px;
|
}
|
.editor-container .ql-container .ql-editor {
|
padding: var(--padding);
|
width: calc(100% - (var(--padding) * 2.5));
|
height: calc(100% - (var(--padding) * 2));
|
}
|
.ql-editor img {
|
max-width: 50%;
|
height: auto;
|
}
|
|
.ql-clipboard {
|
left: -100000px;
|
height: 1px;
|
overflow-y: hidden;
|
position: absolute;
|
top: 50%;
|
}
|
.ql-hidden {
|
display: none;
|
}
|
.ql-tooltip {
|
position: absolute;
|
transform: translateY(10px);
|
background-color: var(--base-100);
|
border: 1px solid var(--base);
|
box-shadow: 0px 0px 5px var(--overlay-heavy);
|
color: var(--contrast);
|
padding: 5px 12px;
|
white-space: nowrap;
|
}
|
|
#toolbar-einks_short_bio .ql-e_image {
|
display: none;
|
}
|
|
/** Content Grid **/
|
.all-filters {
|
position: relative;
|
background-color: var(--base);
|
border-radius: var(--outerRadius);
|
padding: .5rem;
|
display: flex;
|
flex-direction: column;
|
gap: .5rem;
|
}
|
.controls .radio-options {
|
gap: .25rem 1rem;
|
}
|
.radio-options details {
|
width: 100%;
|
}
|
.radio-options input:not(.ch) + label,
|
.controls input:not(.ch) + .radio-options label {
|
width: fit-content!important;
|
gap: 0;
|
margin: 0;
|
display: flex;
|
padding: .25rem .5rem!important;
|
align-items: center;
|
}
|
|
.radio-options label span {
|
transform: scaleX(0);
|
max-width: 0;
|
}
|
.edit-form .radio-options label span,
|
.radio-options label:hover span,
|
.radio-options :checked + label span {
|
transform: scaleX(1);
|
max-width: 100%;
|
}
|
.radio-options input:not(.ch):checked + label {
|
padding: .25rem .5rem!important;
|
}
|
.controls .radio-options input:not(.ch):checked+label {
|
background-color: var(--base-100);
|
border-color: var(--contrast-200);
|
color: var(--contrast)!important;
|
gap: .5rem;
|
}
|
|
dialog .field {
|
margin: 3rem 0;
|
}
|
|
|
.filters {
|
display: flex;
|
gap: 1rem;
|
align-items: center;
|
}
|
.filters > div > label {
|
margin: 0;
|
}
|
div.filters > div {
|
display: flex;
|
align-items: center;
|
flex: 100%;
|
gap: .5rem;
|
}
|
.filters .icon {
|
--w: 1.5em;
|
}
|
|
@media (min-width:768px){
|
div.filters > div {
|
flex: 1;
|
}
|
}
|
|
.view-controls.radio-options {
|
gap: .5rem;
|
margin-left: auto;
|
}
|
.view-controls.radio-options label {
|
padding: .25rem!important;
|
}
|
|
.label-group {
|
display: flex;
|
gap: .75rem;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
.label-group .icon {
|
margin-right: .5rem;
|
}
|
.item-grid.table {
|
display: none;
|
}
|
|
.item-grid summary {
|
padding: 0;
|
gap: 0;
|
}
|
.item-grid .item-actions {
|
position: absolute;
|
top: .25rem;
|
right: .25rem;
|
gap: .25rem;
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
}
|
.item-grid .item-actions button {
|
width: 2em;
|
height: 2em;
|
border-radius: var(--innerRadius);
|
background-color: var(--overlay-light);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.item-grid .item-actions button:focus,
|
.item-grid .item-actions button:hover {
|
background-color: var(--overlay-heavy);
|
color: var(--action-0);
|
}
|
|
|
|
@media (max-width: 768px){
|
.replace {
|
margin-top: 4rem!important;
|
}
|
.list-header {
|
flex-wrap: wrap;
|
}
|
.list-card h3 {
|
font-size: var(--medium);
|
}
|
.item-grid.list-view .item {
|
align-items: center;
|
}
|
.item-grid.list-view img {
|
width: 80px;
|
height: 80px;
|
aspect-ratio: 1;
|
object-fit: cover;
|
}
|
}
|
|
|
.term-divider {
|
position: relative;
|
text-align: center;
|
margin: 1rem 0;
|
border-bottom: 1px solid var(--base-200);
|
}
|
|
.term-divider span {
|
background: var(--base);
|
padding: 0 1rem;
|
color: var(--contrast);
|
font-size: .9rem;
|
position: relative;
|
top: .5em;
|
}
|
|
.common-term {
|
background: var(--base-50);
|
border-radius: var(--innerRadius);
|
}
|
|
.loading-indicator {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: .5rem;
|
padding: 1rem;
|
color: var(--contrast-100);
|
font-size: .9rem;
|
}
|
|
.loading-indicator svg {
|
animation: spin 1s linear infinite;
|
}
|
|
.pagination-info {
|
text-align: center;
|
padding: .5rem;
|
font-size: .9rem;
|
color: var(--contrast-100);
|
border-top: 1px solid var(--base-100);
|
}
|
|
@keyframes spin {
|
from { transform: rotate(0deg); }
|
to { transform: rotate(360deg); }
|
}
|
|
|
.term-breadcrumb {
|
margin-bottom: 1rem;
|
padding: .5rem;
|
background: var(--base-50);
|
border-radius: 4px;
|
}
|
|
.back-to-parent {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
border: none;
|
background: none;
|
color: var(--contrast);
|
cursor: pointer;
|
padding: .5rem;
|
border-radius: 4px;
|
font-size: var(--small);
|
}
|
|
.back-to-parent:hover {
|
background: var(--base-100);
|
}
|
|
.term-row {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
width: 100%;
|
padding: .25rem 0;
|
}
|
|
.toggle-children {
|
border: none;
|
background: none;
|
padding: .25rem;
|
cursor: pointer;
|
color: var(--contrast);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: auto;
|
border-radius: 4px;
|
}
|
|
.toggle-children:hover {
|
background: var(--base-50);
|
}
|
|
.loading-indicator {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 24px;
|
height: 24px;
|
}
|
|
.loading-indicator .loading {
|
width: 16px;
|
height: 16px;
|
border: 2px solid var(--base-100);
|
border-top-color: var(--contrast);
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
}
|
|
@keyframes spin {
|
to { transform: rotate(360deg); }
|
}
|
|
.term-breadcrumb {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
margin-bottom: 1rem;
|
padding: .5rem;
|
background: var(--base-50);
|
border-radius: 4px;
|
}
|
|
.term-breadcrumb .path {
|
display: flex;
|
align-items: center;
|
gap: .25rem;
|
flex-wrap: wrap;
|
}
|
|
.term-breadcrumb button {
|
border: none;
|
background: none;
|
padding: .25rem .5rem;
|
border-radius: 4px;
|
cursor: pointer;
|
color: var(--contrast);
|
font-size: var(--small);
|
}
|
|
.term-breadcrumb button:hover {
|
background: var(--base-100);
|
}
|
|
.path-separator {
|
color: var(--contrast-50);
|
}
|
|
.path-level {
|
white-space: nowrap;
|
}
|
|
.create-new-term {
|
margin-top: 2rem;
|
padding-top: 1rem;
|
border-top: 1px solid var(--base-100);
|
}
|
.create-new-term button {
|
width: 100%;
|
}
|
|
.suggestion-prompt {
|
font-size: var(--small);
|
color: var(--contrast-50);
|
margin-bottom: 1rem;
|
}
|
|
.create-term-form {
|
display: flex;
|
flex-direction: column;
|
gap: .5rem;
|
}
|
|
.form-row {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
}
|
|
.name-row {
|
position: relative;
|
}
|
|
.name-row input {
|
width: 100%!important;
|
padding: .5rem;
|
border: 2px solid var(--base-100);
|
border-radius: 4px;
|
background: var(--base);
|
color: var(--contrast);
|
}
|
|
.name-row input:focus {
|
border-color: var(--action-0);
|
outline: none;
|
}
|
|
.parent-row {
|
font-size: var(--small);
|
}
|
|
.parent-row label {
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
cursor: pointer;
|
}
|
|
.create-term-form button {
|
display: inline-flex;
|
align-items: center;
|
gap: .5rem;
|
padding: .5rem 1rem;
|
border: none;
|
border-radius: 4px;
|
background: var(--action-0);
|
color: var(--base);
|
cursor: pointer;
|
font-size: var(--small);
|
transition: all .2s ease;
|
}
|
|
.create-term-form button:hover {
|
background: var(--action-50);
|
}
|
|
.create-term-form button:disabled {
|
opacity: .5;
|
cursor: not-allowed;
|
}
|
|
.create-term-form button svg {
|
width: 16px;
|
height: 16px;
|
}
|
|
/** Search bar and new term functionality **/
|
.search-bar {
|
position: relative;
|
display: flex;
|
gap: .5rem;
|
align-items: center;
|
z-index: 2;
|
}
|
|
.search-bar input {
|
flex: 1;
|
/* Make room for button */
|
padding: .5rem 2.5rem .5rem .5rem;
|
border: 2px solid #ddd;
|
border-radius: 4px;
|
font-size: 1rem;
|
}
|
|
.new-term-toggle {
|
margin: 2rem 0 1rem;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
/* Peek effect on search bar hover */
|
.search-bar:hover .new-term-toggle {
|
opacity: 1;
|
transform: translateX(-.25rem);
|
}
|
|
/* Form styling */
|
.create-term-form {
|
position: relative;
|
z-index: 1;
|
background: var(--base);
|
border: 2px solid var(--action-0);
|
border-radius: 4px;
|
padding: 1rem;
|
margin-top: -2px;
|
|
/* Animation */
|
transform-origin: top;
|
transition: all .2s var(--function);
|
}
|
|
.create-term-form:not([hidden]) {
|
animation: slideDown .2s var(--function);
|
}
|
|
.create-term-form[hidden] {
|
display: block !important; /* Override hidden */
|
transform: scaleY(0);
|
opacity: 0;
|
pointer-events: none;
|
}
|
|
.form-row {
|
display: flex;
|
gap: .5rem;
|
align-items: center;
|
}
|
|
.form-row + .form-row {
|
margin-top: .5rem;
|
}
|
|
@keyframes slideDown {
|
from {
|
transform: scaleY(0);
|
opacity: 0;
|
}
|
to {
|
transform: scaleY(1);
|
opacity: 1;
|
}
|
}
|
|
.news.item {
|
padding: 1rem!important;
|
}
|
|
.dashboard .checkbox-options label {
|
font-weight: normal;
|
}
|
|
.description.space {
|
margin-bottom: 4rem;
|
}
|
|
.invited-artist {
|
display: flex;
|
align-items: center;
|
margin: 1rem 0;
|
}
|
.invited-artist input[type=text],
|
.invited-artist input[type=email] {
|
width: calc(100% - .5rem);
|
}
|
.invited-artist label {
|
margin: 0;
|
font-weight: normal;
|
white-space:nowrap;
|
}
|
.invited-artist button {
|
height: fit-content;
|
margin-right: .5rem;
|
}
|
.actions {
|
display: flex;
|
gap: 1rem;
|
justify-content: flex-end;
|
}
|
|
.actions .send-invites {
|
background-color: var(--action-50);
|
}
|
.actions .send-invites:hover,
|
.actions .send-invites:focus {
|
background-color: var(--base);
|
border-color: var(--action-50);
|
}
|
|
.dashboard .queue-status-panel {
|
bottom: var(--offHeight);
|
}
|
.dashboard .queue-status-toggle {
|
bottom: 0;
|
}
|
|
.items-list table th {
|
padding: 0 .75rem;
|
text-transform: none!important;
|
}
|
.items-list table.empty tbody {
|
height: 40vh;
|
}
|
|
/*table textarea,*/
|
/*table input[type=text],*/
|
/*table input[type=url],*/
|
/*table input[type=number],*/
|
/*table input[type=email] {*/
|
/* min-width: 40vw;*/
|
/*}*/
|
|
.empty tfoot {
|
display: none;
|
}
|
|
p.hint {
|
margin: 0 0 .5rem 0;
|
font-size: var(--small);
|
font-style: italic;
|
}
|
.item-grid + .hint {
|
text-align: center;
|
margin-top: 2rem;
|
}
|
|
.image.field[data-type=single]:has(.upload-item) .file-upload-container {
|
display: none;
|
}
|
.image.field[data-type=single] .upload-item {
|
grid-column: 1 / -1;
|
}
|
/** UPLOADER **/
|
.upload-item {
|
position: relative;
|
border: 1px solid var(--base-200);
|
border-radius: 8px;
|
background: var(--base-50);
|
transition: all .3s ease;
|
}
|
.upload-item:hover {
|
box-shadow: var(--shadow);
|
transform: translateY(-2px);
|
}
|
.upload-item[data-status=processing] {
|
border-color: var(--action-200);
|
background: var(--action-100);
|
}
|
.upload-item[data-status=cached] {
|
border-color: var(--secondary-0);
|
background: var(--secondary-200);
|
}
|
.upload-item[data-status=uploading] {
|
border-color: var(--contrast);
|
background-color: var(--base-50);
|
}
|
.upload-item .preview {
|
position: relative;
|
}
|
.upload-item .status {
|
position: absolute;
|
bottom: .25rem;
|
right: .25rem;
|
background-color: var(--overlay-light);
|
box-shadow: var(--shadow);
|
border-radius: 50%;
|
}
|
.upload-item img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
aspect-ratio: 1;
|
transition: transform .3s ease;
|
}
|
.upload-item:hover img {
|
transform: scale(1.05);
|
}
|
|
.upload-item .overlay {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: var(--overlay-heavy);
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: .5rem;
|
opacity: 0;
|
transition: opacity .3s ease;
|
}
|
.upload-item:hover .overlay,
|
.upload-item[data-status=processing] .overlay,
|
.upload-item[data-status=uploading] .overlay {
|
opacity: 1;
|
}
|
|
.upload-item .item-actions {
|
position: relative;
|
}
|
|
.submit-uploads {
|
position: fixed;
|
bottom: var(--offHeight);
|
right: 1rem;
|
background-color: var(--base);
|
height: var(--height);
|
box-shadow: var(--shadow);
|
}
|
/*** UPLOADER GROUPS ***/
|
.group-display {
|
display: grid;
|
grid-template-columns: 1fr 250px;
|
gap: 2rem;
|
}
|
.preview-actions {
|
position: sticky;
|
padding: .5rem;
|
top: var(--offHeight);
|
left: 0;
|
background-color: var(--base-50);
|
z-index: 5;
|
}
|
.preview-actions .selected {
|
display: flex;
|
justify-content: space-between;
|
padding-right: 2rem;
|
align-items: center;
|
}
|
.preview-actions .field {
|
margin: 0;
|
}
|
.preview-actions .field label {
|
margin-bottom: 0;
|
}
|
.selection-actions {
|
display: flex;
|
justify-content: space-between;
|
padding: 1rem 2rem;
|
}
|
[data-status=completed] .progress {
|
transform: scaleY(0);
|
transform-origin: top;
|
}
|
.preview-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
gap: 1rem;
|
margin-top: 1rem;
|
padding: .5rem;
|
background: var(--base);
|
border: 1px solid var(--contrast-200);
|
border-radius: 8px;
|
min-height: 60px;
|
}
|
.preview-grid:empty {
|
display: none;
|
}
|
|
|
.upload-item .progress {
|
position: absolute;
|
top: 2px;
|
right: 2px;
|
left: 2px;
|
}
|
.upload-item .actions {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
}
|
.upload-item .actions > label {
|
margin: 0 1rem;
|
padding-left: 0!important;
|
}
|
.upload-item input[type=text],
|
.upload-item textarea,
|
.group-fields input[type=text],
|
.group-fields textarea {
|
width: calc(100% - 1rem);
|
}
|
/*.upload-item .actions > label {*/
|
/* !*position: absolute;*!*/
|
/* padding: 1rem!important;*/
|
/* margin: 0;*/
|
/* !*top: .5rem;*!*/
|
/* !*left: 0;*!*/
|
/*}*/
|
/* .upload-item .actions > label::before {*/
|
/* left: calc(50% - 9px)!important;*/
|
/* top: calc(50% - 9px)!important;*/
|
/* transform: none!important;*/
|
/* }*/
|
/* .upload-item .actions > label::after {*/
|
/* left: 1.25rem!important;*/
|
/* top: 1rem!important;*/
|
/* }*/
|
.item-grid .upload-item summary {
|
display: flex;
|
align-items: center;
|
font-size: var(--small);
|
gap: .5rem;
|
text-transform: uppercase;
|
}
|
.upload-item:has([type=checkbox]:checked) .preview {
|
padding: 1rem;
|
background-color: var(--secondary-200);
|
}
|
.upload-item:has([open]) {
|
grid-column: 1 / -1;
|
}
|
.upload-item summary .icon {
|
--w: 1.1em;
|
}
|
|
[draggable="true"] {
|
cursor: grab;
|
}
|
[draggable="true"]:active {
|
cursor: grabbing;
|
}
|
|
.dragging {
|
opacity: .5;
|
transform: rotate(5deg) scale(.95);
|
transition: all .2s ease;
|
}
|
|
.dragover:not(.item-grid.groups) {
|
background-color: var(--overlay-action-medium);
|
border: 2px dashed var(--action-0);
|
}
|
|
@keyframes dragHover {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.02); }
|
100% { transform: scale(1); }
|
}
|
|
.drag-hover {
|
animation: dragHover .6s ease-in-out infinite;
|
}
|
|
/** GROUP **/
|
.empty-group {
|
padding: 20px;
|
text-align: center;
|
grid-column: 1 / -1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 2px dashed var(--action-200);
|
border-radius: var(--innerRadius);
|
margin: 10px 0;
|
cursor: pointer;
|
transition: all .2s ease;
|
aspect-ratio: 16/9;
|
}
|
.item-grid.groups {
|
grid-template-columns: 1fr;
|
}
|
|
.item-grid.group .item-grid.group {
|
min-height: 40px;
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: .5rem;
|
border: 2px dashed var(--action-200);
|
border-radius: var(--innerRadius);
|
margin: 10px 0;
|
cursor: pointer;
|
transition: all .2s ease;
|
aspect-ratio: 1;
|
text-align: center;
|
}
|
.empty-group:hover,
|
.empty-group.dragover,
|
.item-grid.group .item-grid.group:hover,
|
.item-grid.group .item-grid.group.dragover {
|
border-color: var(--action-0);
|
background-color: var(--overlay-action-light);
|
color: var(--action-50);
|
}
|
|
.upload-group {
|
background-color: var(--base-100);
|
border-radius: var(--innerRadius);
|
border: 1px solid var(--contrast-200);
|
}
|
.group-actions {
|
width: 100%;
|
gap: .5rem;
|
}
|
.group-actions button {
|
width: 100%;
|
}
|
|
body:has(.selection-actions[hidden]) button.create-group,
|
body:has(.selection-actions[hidden]) button.add-selection-to-group {
|
display: none;
|
}
|
|
/** RESTORE FROM CACHE **/
|
.restore-notification {
|
border-radius: var(--innerRadius);
|
box-shadow: var(--shadow);
|
padding: 1rem;
|
background: var(--base-200);
|
border: 1px solid var(--contrast-200);
|
border-top-width: 4px;
|
border-bottom-width: 4px;
|
}
|
.restore-content {
|
display: flex;
|
align-items: center;
|
}
|
.restore-actions .selection-controls {
|
display: flex;
|
gap: .5rem;
|
}
|
|
.restore-actions button {
|
white-space: nowrap;
|
}
|
.restore-actions .action-buttons {
|
margin-top: 1rem;
|
display: flex;
|
flex-direction: column;
|
gap: .5rem;
|
}
|
.restore-actions .action-buttons button {
|
width: 100%;
|
}
|
|
label.restore-item {
|
border-radius: .5rem;
|
padding: 0;
|
background-color: transparent;
|
filter: grayscale(50);
|
opacity: .8;
|
transition: padding var(--transition-base);
|
transition-property: padding, background-color;
|
cursor: pointer;
|
}
|
label.restore-item:has(input:checked) {
|
filter: grayscale(0);
|
opacity: 1;
|
padding: 1rem;
|
background-color: var(--secondary-200);
|
}
|
|
.upload-item .featured + label {
|
width: 2em;
|
height: 2em;
|
border-radius: var(--innerRadius);
|
background-color: var(--overlay-light);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0!important;
|
border: none;
|
}
|
|
input.featured + label .icon {
|
--w: 1.25em;
|
}
|
input.featured + label .icon + .icon {
|
position: absolute;
|
}
|
input.featured + label .star-fill,
|
input.featured:checked + label .star {
|
transform: scale(0);
|
}
|
input.featured:checked + label .star-fill,
|
input.featured + label .star {
|
transform: scale(1);
|
}
|
/**TODO: Double check needed **/
|
/*!* Centralized Upload Manager CSS *!*/
|
|
/*!* Global Upload Status Bar *!*/
|
/*.all-uploads {*/
|
/* position: fixed;*/
|
/* top: 0;*/
|
/* left: 0;*/
|
/* right: 0;*/
|
/* background: var(--surface);*/
|
/* border-bottom: 1px solid var(--border);*/
|
/* padding: .75rem 1rem;*/
|
/* z-index: 1000;*/
|
/* box-shadow: 0 2px 8px rgba(0, 0, 0, .1);*/
|
/* backdrop-filter: blur(10px);*/
|
/* display: none; !* Hidden by default *!*/
|
/*}*/
|
|
/*.upload-summary {*/
|
/* display: flex;*/
|
/* justify-content: space-between;*/
|
/* align-items: center;*/
|
/* margin-bottom: .5rem;*/
|
/*}*/
|
|
/*.all-uploads .active {*/
|
/* font-weight: 500;*/
|
/* color: var(--contrast);*/
|
/* font-size: .9rem;*/
|
/*}*/
|
|
/*.upload-summary button {*/
|
/* padding: .5rem 1rem;*/
|
/* border: 1px solid var(--border);*/
|
/* border-radius: 4px;*/
|
/* background: var(--surface);*/
|
/* color: var(--contrast);*/
|
/* cursor: pointer;*/
|
/* transition: all .3s ease;*/
|
/* font-size: .875rem;*/
|
/* margin-left: .5rem;*/
|
/*}*/
|
|
/*.upload-summary button:hover {*/
|
/* background: var(--action-0);*/
|
/* color: var(--action-contrast);*/
|
/* border-color: var(--action-0);*/
|
/*}*/
|
|
/*!* Upload Drop Zones *!*/
|
/*.file-upload-container {*/
|
/* position: relative;*/
|
/* padding: .25rem;*/
|
/* transition: border-color var(--transition-base),*/
|
/* background-color var(--transition-base),*/
|
/* padding var(--transition-base);*/
|
/*}*/
|
|
/*.file-upload-container.dragover {*/
|
/* background-color: var(--action-rgb-subtle);*/
|
/* border-color: var(--action-0);*/
|
/* padding: .75rem;*/
|
/*}*/
|
/* .dragover .file-upload-wrapper {*/
|
/* transform: scale(1.02);*/
|
/* }*/
|
|
|
/*!* Upload Actions *!*/
|
/*.upload .actions {*/
|
/* display: flex;*/
|
/* gap: .25rem;*/
|
/* justify-content: flex-end;*/
|
/*}*/
|
|
/*.upload .actions button {*/
|
/* background: rgba(0, 0, 0, .7);*/
|
/* color: white;*/
|
/* border: none;*/
|
/* padding: .25rem;*/
|
/* border-radius: 4px;*/
|
/* cursor: pointer;*/
|
/* transition: background .3s ease;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/*}*/
|
|
/*.upload .actions button:hover {*/
|
/* background: rgba(0, 0, 0, .9);*/
|
/*}*/
|
|
/*.upload .actions button svg {*/
|
/* width: 16px;*/
|
/* height: 16px;*/
|
/*}*/
|
|
/*!* Status Indicator *!*/
|
/*.status {*/
|
/* position: absolute;*/
|
/* top: .5rem;*/
|
/* right: .5rem;*/
|
/* width: 24px;*/
|
/* height: 24px;*/
|
/* border-radius: 50%;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* font-size: .8rem;*/
|
/* font-weight: bold;*/
|
/* z-index: 2;*/
|
/* box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
|
/*}*/
|
|
/*.status.processing {*/
|
/* background: var(--warning);*/
|
/* color: var(--warning-contrast);*/
|
/*}*/
|
|
/*.status.processed {*/
|
/* background: var(--info);*/
|
/* color: var(--info-contrast);*/
|
/*}*/
|
|
/*.status.cached {*/
|
/* background: var(--info);*/
|
/* color: var(--info-contrast);*/
|
/*}*/
|
|
/*.status.uploading {*/
|
/* background: var(--action-0);*/
|
/* color: var(--action-contrast);*/
|
/*}*/
|
|
/*.status.uploaded {*/
|
/* background: var(--success);*/
|
/* color: var(--success-contrast);*/
|
/*}*/
|
|
/*.status.error {*/
|
/* background: var(--error);*/
|
/* color: var(--error-contrast);*/
|
/*}*/
|
|
/*!* Upload Metadata *!*/
|
/*.upload .metadata {*/
|
/* padding: 1rem;*/
|
/* border-top: 1px solid var(--border);*/
|
/* background: var(--surface);*/
|
/*}*/
|
|
/*.upload .metadata .metadata-field {*/
|
/* margin-bottom: .75rem;*/
|
/*}*/
|
|
/*.upload .metadata .metadata-field:last-child {*/
|
/* margin-bottom: 0;*/
|
/*}*/
|
|
/*.upload .metadata label {*/
|
/* display: block;*/
|
/* margin-bottom: .25rem;*/
|
/* font-weight: 500;*/
|
/* font-size: .9rem;*/
|
/* color: var(--contrast);*/
|
/*}*/
|
|
/*.upload .metadata input,*/
|
/*.upload .metadata textarea {*/
|
/* width: 100%;*/
|
/* padding: .5rem;*/
|
/* border: 1px solid var(--border);*/
|
/* border-radius: 4px;*/
|
/* font-size: .9rem;*/
|
/* transition: border-color .3s ease, box-shadow .3s ease;*/
|
/*}*/
|
|
/*.upload .metadata input:focus,*/
|
/*.upload .metadata textarea:focus {*/
|
/* outline: none;*/
|
/* border-color: var(--action-0);*/
|
/* box-shadow: 0 0 0 2px var(--action-rgb-subtle);*/
|
/*}*/
|
|
/*.upload .metadata textarea {*/
|
/* resize: vertical;*/
|
/* min-height: 2.5rem;*/
|
/*}*/
|
|
/*!* Field Type Specific Styles *!*/
|
|
/*!* Single Image Field *!*/
|
/*.upload.field[data-upload-type="single"] .upload-preview-grid {*/
|
/* grid-template-columns: 1fr;*/
|
/* max-width: 400px;*/
|
/*}*/
|
|
/*!* Gallery Field *!*/
|
/*.upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
|
/* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
|
/*}*/
|
|
/*!* Avatar Field *!*/
|
/*.upload.field[data-upload-type="avatar"] .upload-preview-grid {*/
|
/* grid-template-columns: 1fr;*/
|
/* max-width: 200px;*/
|
/*}*/
|
|
/*.upload.field[data-upload-type="avatar"] .upload-preview {*/
|
/* aspect-ratio: 1;*/
|
/* border-radius: 50%;*/
|
/* overflow: hidden;*/
|
/*}*/
|
|
/*!* Spinner Animation *!*/
|
/*.spinner {*/
|
/* width: 12px;*/
|
/* height: 12px;*/
|
/* border: 2px solid transparent;*/
|
/* border-top: 2px solid currentColor;*/
|
/* border-radius: 50%;*/
|
/* animation: spin 1s linear infinite;*/
|
/*}*/
|
|
/*@keyframes spin {*/
|
/* 0% { transform: rotate(0deg); }*/
|
/* 100% { transform: rotate(360deg); }*/
|
/*}*/
|
|
/*@keyframes shimmer {*/
|
/* 0% { transform: translateX(-100%); }*/
|
/* 100% { transform: translateX(100%); }*/
|
/*}*/
|
|
/*!* Responsive Design *!*/
|
/*@media (max-width: 768px) {*/
|
/* .all-uploads {*/
|
/* position: relative;*/
|
/* top: auto;*/
|
/* left: auto;*/
|
/* right: auto;*/
|
/* }*/
|
|
/* .upload-summary {*/
|
/* flex-direction: column;*/
|
/* gap: .5rem;*/
|
/* align-items: stretch;*/
|
/* }*/
|
|
/* .upload-summary button {*/
|
/* margin-left: 0;*/
|
/* width: 100%;*/
|
/* }*/
|
|
/* .upload-preview-grid {*/
|
/* grid-template-columns: 1fr;*/
|
/* gap: .75rem;*/
|
/* }*/
|
|
/* .upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
|
/* grid-template-columns: repeat(2, 1fr);*/
|
/* }*/
|
/*}*/
|
|
/*!* Dark Mode Support *!*/
|
/*@media (prefers-color-scheme: dark) {*/
|
/* .upload-overlay {*/
|
/* background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6));*/
|
/* }*/
|
|
/*}*/
|
|
/*!* High Contrast Mode *!*/
|
/*@media (prefers-contrast: high) {*/
|
/* .upload-item {*/
|
/* border-width: 2px;*/
|
/* }*/
|
|
/* .status {*/
|
/* border: 2px solid currentColor;*/
|
/* }*/
|
|
/*}*/
|
|
/*!* Reduced Motion *!*/
|
/*@media (prefers-reduced-motion: reduce) {*/
|
/* .upload-item:hover {*/
|
/* transform: none;*/
|
/* }*/
|
|
/* .upload-item:hover .upload-preview img {*/
|
/* transform: none;*/
|
/* }*/
|
|
/* .spinner,*/
|
/* .shimmer {*/
|
/* animation: none;*/
|
/* }*/
|
/*}*/
|
|
/*!* Focus Management *!*/
|
/*.upload-item:focus-within {*/
|
/* outline: 2px solid var(--action-0);*/
|
/* outline-offset: 2px;*/
|
/*}*/
|
|
/*.upload .actions button:focus {*/
|
/* outline: 2px solid var(--action-0);*/
|
/* outline-offset: 2px;*/
|
/*}*/
|
|
/*!* Loading States *!*/
|
/*.upload.field.processing {*/
|
/* pointer-events: none;*/
|
/* opacity: .7;*/
|
/*}*/
|
|
/*.upload.field.processing::after {*/
|
/* content: '';*/
|
/* position: absolute;*/
|
/* top: 0;*/
|
/* left: 0;*/
|
/* right: 0;*/
|
/* bottom: 0;*/
|
/* background: rgba(255, 255, 255, .5);*/
|
/* backdrop-filter: blur(2px);*/
|
/* z-index: 10;*/
|
/*}*/
|
|
/*!* Field Capacity Indicators *!*/
|
/*.upload.field[data-at-capacity="true"] .file-upload-container {*/
|
/* opacity: .5;*/
|
/* pointer-events: none;*/
|
/*}*/
|
|
/*.upload.field[data-at-capacity="true"]::before {*/
|
/* content: 'Maximum files reached';*/
|
/* position: absolute;*/
|
/* top: 50%;*/
|
/* left: 50%;*/
|
/* transform: translate(-50%, -50%);*/
|
/* background: var(--warning);*/
|
/* color: var(--warning-contrast);*/
|
/* padding: .5rem 1rem;*/
|
/* border-radius: 4px;*/
|
/* font-size: .875rem;*/
|
/* z-index: 5;*/
|
/*}*/
|
|
/*!* Integration with existing form styles *!*/
|
/*.upload.field {*/
|
/* position: relative;*/
|
/*}*/
|
|
/*.upload.field .upload-preview-grid {*/
|
/* margin-top: .5rem;*/
|
/*}*/
|
|
/*!* Ensure global status doesn't interfere with fixed elements *!*/
|
/*body.has-global-upload-status {*/
|
/* padding-top: 80px;*/
|
/*}*/
|
|
/*!* Animation for upload completion *!*/
|
/*@keyframes uploadSuccess {*/
|
/* 0% { transform: scale(1); }*/
|
/* 50% { transform: scale(1.05); }*/
|
/* 100% { transform: scale(1); }*/
|
/*}*/
|
|
/*.upload-item[data-status="uploaded"] {*/
|
/* animation: uploadSuccess .6s ease-out;*/
|
/*}*/
|
/*!* Batch Processing Progress Bar *!*/
|
/*.batch-progress {*/
|
/* margin: 1rem 0;*/
|
/* padding: 1rem;*/
|
/* background: var(--color-background-secondary, #f8f9fa);*/
|
/* border: 1px solid var(--color-border, #e1e5e9);*/
|
/* border-radius: 8px;*/
|
/* transition: opacity .3s ease;*/
|
/*}*/
|
|
/*.batch-progress.completed {*/
|
/* background: var(--color-success-light, #d4edda);*/
|
/* border-color: var(--color-success, #28a745);*/
|
/*}*/
|
|
/*.progress-info {*/
|
/* display: flex;*/
|
/* justify-content: space-between;*/
|
/* align-items: center;*/
|
/* margin-bottom: .5rem;*/
|
/* font-size: .9rem;*/
|
/*}*/
|
|
/*.progress-message {*/
|
/* color: var(--color-text-secondary, #6c757d);*/
|
/* font-weight: 500;*/
|
/*}*/
|
|
/*.progress-count {*/
|
/* color: var(--color-text-primary, #212529);*/
|
/* font-weight: 600;*/
|
/* font-variant-numeric: tabular-nums;*/
|
/*}*/
|
|
/*.progress .bar {*/
|
/* width: 100%;*/
|
/* height: 8px;*/
|
/* background: var(--color-background-tertiary, #e9ecef);*/
|
/* border-radius: 4px;*/
|
/* overflow: hidden;*/
|
/*}*/
|
|
/*.progress .fill {*/
|
/* height: 100%;*/
|
/* background: linear-gradient(90deg,*/
|
/* var(--color-primary, #007cba) 0%,*/
|
/* var(--color-primary-light, #0096dd) 100%*/
|
/* );*/
|
/* border-radius: 4px;*/
|
/* transition: width .3s ease;*/
|
/* position: relative;*/
|
/*}*/
|
|
/*!* Animated progress indicator *!*/
|
/*.progress .fill::after {*/
|
/* content: '';*/
|
/* position: absolute;*/
|
/* top: 0;*/
|
/* left: 0;*/
|
/* right: 0;*/
|
/* bottom: 0;*/
|
/* background: linear-gradient(*/
|
/* 90deg,*/
|
/* transparent 0%,*/
|
/* rgba(255,255,255,.3) 50%,*/
|
/* transparent 100%*/
|
/* );*/
|
/* animation: progress-shine 2s ease-in-out infinite;*/
|
/*}*/
|
|
/*@keyframes progress-shine {*/
|
/* 0% { transform: translateX(-100%); }*/
|
/* 100% { transform: translateX(100%); }*/
|
/*}*/
|
|
/*!* Completed state styling *!*/
|
/*.progress.completed .fill {*/
|
/* background: linear-gradient(90deg,*/
|
/* var(--color-success, #28a745) 0%,*/
|
/* var(--color-success-light, #34ce57) 100%*/
|
/* );*/
|
/*}*/
|
|
/*.progress.completed .progress-message {*/
|
/* color: var(--color-success-dark, #155724);*/
|
/*}*/
|
|
/*!* Dark mode support *!*/
|
/*@media (prefers-color-scheme: dark) {*/
|
/* .progress {*/
|
/* background: var(--color-background-secondary-dark, #2d3436);*/
|
/* border-color: var(--color-border-dark, #636e72);*/
|
/* }*/
|
|
/* .progress .bar {*/
|
/* background: var(--color-background-tertiary-dark, #636e72);*/
|
/* }*/
|
/*}*/
|
|
/*!* ✅ Grouping System CSS *!*/
|
|
/*!* Upload field container with grouping support *!*/
|
/*.upload.field.groupable {*/
|
/* display: grid;*/
|
/* grid-template-columns: 1fr 300px;*/
|
/* gap: 20px;*/
|
/* min-height: 400px;*/
|
/*}*/
|
|
/*.upload.field.groupable .upload-main {*/
|
/* display: flex;*/
|
/* flex-direction: column;*/
|
/*}*/
|
|
/*.upload.field.groupable .upload-sidebar {*/
|
/* border-left: 2px solid #e0e0e0;*/
|
/* padding-left: 20px;*/
|
/*}*/
|
|
/*!* Preview grid for groupable uploads *!*/
|
/*.upload-preview-grid.groupable {*/
|
/* min-height: 200px;*/
|
/* border: 2px dashed #ddd;*/
|
/* border-radius: 8px;*/
|
/* padding: 15px;*/
|
/* background: #fafafa;*/
|
/*}*/
|
|
/*.upload-preview-grid.groupable:empty::after {*/
|
/* content: "Drop images here or click to upload";*/
|
/* display: block;*/
|
/* text-align: center;*/
|
/* color: #666;*/
|
/* font-style: italic;*/
|
/* padding: 40px 20px;*/
|
/*}*/
|
|
/*!* Upload items with drag support *!*/
|
/*.upload-item[draggable] {*/
|
/* cursor: grab;*/
|
/* transition: transform .2s ease, box-shadow .2s ease;*/
|
/*}*/
|
|
/*.upload-item[draggable]:hover {*/
|
/* transform: translateY(-2px);*/
|
/* box-shadow: 0 4px 8px rgba(0,0,0,.1);*/
|
/*}*/
|
|
/*.upload-item.dragging {*/
|
/* opacity: .5;*/
|
/* transform: rotate(5deg);*/
|
/* cursor: grabbing;*/
|
/*}*/
|
|
/*!* Groups container *!*/
|
/*.groups-container {*/
|
/* display: flex;*/
|
/* flex-direction: column;*/
|
/* gap: 15px;*/
|
/* max-height: 600px;*/
|
/* overflow-y: auto;*/
|
/* padding: 10px;*/
|
/* background: #f9f9f9;*/
|
/* border-radius: 8px;*/
|
/*}*/
|
|
/*.groups-container .new-group-section {*/
|
/* text-align: center;*/
|
/* padding: 20px;*/
|
/* border: 2px dashed #ccc;*/
|
/* border-radius: 8px;*/
|
/* background: white;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.groups-container .new-group-section:hover {*/
|
/* border-color: #2196F3;*/
|
/* background: #f0f8ff;*/
|
/*}*/
|
|
/*.new-group-btn {*/
|
/* background: #2196F3;*/
|
/* color: white;*/
|
/* border: none;*/
|
/* padding: 10px 20px;*/
|
/* border-radius: 6px;*/
|
/* cursor: pointer;*/
|
/* font-size: 14px;*/
|
/* display: inline-flex;*/
|
/* align-items: center;*/
|
/* gap: 8px;*/
|
/*}*/
|
|
/*.new-group-btn:hover {*/
|
/* background: #1976D2;*/
|
/*}*/
|
|
/*!* Individual groups *!*/
|
/*.upload-group {*/
|
/* background: white;*/
|
/* border: 1px solid #e0e0e0;*/
|
/* border-radius: 8px;*/
|
/* padding: 15px;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.upload-group.drag-hover {*/
|
/* border-color: #2196F3;*/
|
/* background: #f0f8ff;*/
|
/* box-shadow: 0 2px 8px rgba(33, 150, 243, .2);*/
|
/*}*/
|
|
/*.group-header {*/
|
/* display: flex;*/
|
/* justify-content: space-between;*/
|
/* align-items: center;*/
|
/* margin-bottom: 15px;*/
|
/* padding-bottom: 10px;*/
|
/* border-bottom: 1px solid #f0f0f0;*/
|
/*}*/
|
|
/*.group-info {*/
|
/* flex: 1;*/
|
/* display: flex;*/
|
/* flex-direction: column;*/
|
/* gap: 5px;*/
|
/*}*/
|
|
/*.group-name {*/
|
/* border: 1px solid #ddd;*/
|
/* border-radius: 4px;*/
|
/* padding: 6px 10px;*/
|
/* font-size: 14px;*/
|
/* font-weight: 500;*/
|
/* background: white;*/
|
/* transition: border-color .2s ease;*/
|
/*}*/
|
|
/*.group-name:focus {*/
|
/* outline: none;*/
|
/* border-color: #2196F3;*/
|
/* box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
|
/*}*/
|
|
/*.group-name:empty::before {*/
|
/* content: "Enter group name...";*/
|
/* color: #999;*/
|
/* font-style: italic;*/
|
/*}*/
|
|
/*.group-count {*/
|
/* font-size: 12px;*/
|
/* color: #666;*/
|
/* font-weight: normal;*/
|
/*}*/
|
|
/*.group-actions {*/
|
/* display: flex;*/
|
/* gap: 8px;*/
|
/*}*/
|
|
/*.delete-group {*/
|
/* background: #f44336;*/
|
/* color: white;*/
|
/* border: none;*/
|
/* padding: 6px 8px;*/
|
/* border-radius: 4px;*/
|
/* cursor: pointer;*/
|
/* font-size: 12px;*/
|
/* transition: background .2s ease;*/
|
/*}*/
|
|
/*.delete-group:hover {*/
|
/* background: #d32f2f;*/
|
/*}*/
|
|
/*!* Group drop zone *!*/
|
/*.group-drop-zone {*/
|
/* min-height: 80px;*/
|
/* border: 2px dashed #ccc;*/
|
/* border-radius: 6px;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* margin-bottom: 15px;*/
|
/* transition: all .2s ease;*/
|
/* background: #fafafa;*/
|
/*}*/
|
|
/*.group-drop-zone p {*/
|
/* color: #666;*/
|
/* font-style: italic;*/
|
/* margin: 0;*/
|
/* font-size: 14px;*/
|
/*}*/
|
|
/*.group-drop-zone.drag-hover {*/
|
/* border-color: #4CAF50;*/
|
/* background: #f1f8e9;*/
|
/*}*/
|
|
/*!* Group items *!*/
|
/*.group-items {*/
|
/* display: grid;*/
|
/* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
|
/* gap: 10px;*/
|
/* margin-bottom: 15px;*/
|
/*}*/
|
|
/*.group-item {*/
|
/* position: relative;*/
|
/* background: white;*/
|
/* border: 1px solid #e0e0e0;*/
|
/* border-radius: 6px;*/
|
/* overflow: hidden;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.group-item:hover {*/
|
/* box-shadow: 0 2px 8px rgba(0,0,0,.1);*/
|
/*}*/
|
|
/*.group-item-preview {*/
|
/* position: relative;*/
|
/* width: 100%;*/
|
/* height: 80px;*/
|
/* overflow: hidden;*/
|
/*}*/
|
|
/*.group-item-preview img {*/
|
/* width: 100%;*/
|
/* height: 100%;*/
|
/* object-fit: cover;*/
|
/*}*/
|
|
/*.group-item-overlay {*/
|
/* position: absolute;*/
|
/* top: 0;*/
|
/* right: 0;*/
|
/* background: rgba(0,0,0,.7);*/
|
/* padding: 4px;*/
|
/* opacity: 0;*/
|
/* transition: opacity .2s ease;*/
|
/*}*/
|
|
/*.group-item:hover .group-item-overlay {*/
|
/* opacity: 1;*/
|
/*}*/
|
|
/*.remove-from-group {*/
|
/* background: #f44336;*/
|
/* color: white;*/
|
/* border: none;*/
|
/* padding: 4px 6px;*/
|
/* border-radius: 3px;*/
|
/* cursor: pointer;*/
|
/* font-size: 10px;*/
|
/*}*/
|
|
/*.remove-from-group:hover {*/
|
/* background: #d32f2f;*/
|
/*}*/
|
|
/*!* Group metadata fields *!*/
|
/*.group-metadata {*/
|
/* padding-top: 15px;*/
|
/* border-top: 1px solid #f0f0f0;*/
|
/*}*/
|
|
/*.group-metadata .metadata-field {*/
|
/* margin-bottom: 12px;*/
|
/*}*/
|
|
/*.group-metadata label {*/
|
/* display: block;*/
|
/* font-size: 12px;*/
|
/* font-weight: 500;*/
|
/* color: #333;*/
|
/* margin-bottom: 4px;*/
|
/*}*/
|
|
/*.group-metadata input,*/
|
/*.group-metadata textarea {*/
|
/* width: 100%;*/
|
/* border: 1px solid #ddd;*/
|
/* border-radius: 4px;*/
|
/* padding: 6px 8px;*/
|
/* font-size: 13px;*/
|
/* transition: border-color .2s ease;*/
|
/*}*/
|
|
/*.group-metadata input:focus,*/
|
/*.group-metadata textarea:focus {*/
|
/* outline: none;*/
|
/* border-color: #2196F3;*/
|
/* box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
|
/*}*/
|
|
/*.group-metadata textarea {*/
|
/* resize: vertical;*/
|
/* min-height: 60px;*/
|
/*}*/
|
|
/*!* Drag feedback animations *!*/
|
/*@keyframes dragHover {*/
|
/* 0% { transform: scale(1); }*/
|
/* 50% { transform: scale(1.02); }*/
|
/* 100% { transform: scale(1); }*/
|
/*}*/
|
|
/*.drag-hover {*/
|
/* animation: dragHover .6s ease-in-out infinite;*/
|
/*}*/
|
|
/*!* Status indicators for grouped uploads *!*/
|
/*.upload-group[data-status="uploading"] {*/
|
/* border-color: #FF9800;*/
|
/* background: #fff8f0;*/
|
/*}*/
|
|
/*.upload-group[data-status="uploaded"] {*/
|
/* border-color: #4CAF50;*/
|
/* background: #f1f8e9;*/
|
/*}*/
|
|
/*.upload-group[data-status="error"] {*/
|
/* border-color: #f44336;*/
|
/* background: #ffebee;*/
|
/*}*/
|
|
/*!* Progress indicators for groups *!*/
|
/*.group-progress {*/
|
/* height: 3px;*/
|
/* background: #f0f0f0;*/
|
/* border-radius: 2px;*/
|
/* overflow: hidden;*/
|
/* margin-top: 10px;*/
|
/*}*/
|
|
/*.group-progress-fill {*/
|
/* height: 100%;*/
|
/* background: #2196F3;*/
|
/* transition: width .3s ease;*/
|
/* border-radius: 2px;*/
|
/*}*/
|
|
/*!* Responsive design *!*/
|
/*@media (max-width: 768px) {*/
|
/* .upload.field.groupable {*/
|
/* grid-template-columns: 1fr;*/
|
/* gap: 15px;*/
|
/* }*/
|
|
/* .upload.field.groupable .upload-sidebar {*/
|
/* border-left: none;*/
|
/* border-top: 2px solid #e0e0e0;*/
|
/* padding-left: 0;*/
|
/* padding-top: 15px;*/
|
/* }*/
|
|
/* .group-items {*/
|
/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));*/
|
/* gap: 8px;*/
|
/* }*/
|
|
/* .groups-container {*/
|
/* max-height: 400px;*/
|
/* }*/
|
/*}*/
|
|
/*!* Accessibility improvements *!*/
|
/*.upload-item.groupable:focus {*/
|
/* outline: 2px solid #2196F3;*/
|
/* outline-offset: 2px;*/
|
/*}*/
|
|
/*.group-drop-zone:focus-within {*/
|
/* border-color: #2196F3;*/
|
/* background: #f0f8ff;*/
|
/*}*/
|
|
/*!* High contrast mode support *!*/
|
/*@media (prefers-contrast: high) {*/
|
/* .upload-group {*/
|
/* border-width: 2px;*/
|
/* }*/
|
|
/* .group-drop-zone {*/
|
/* border-width: 3px;*/
|
/* }*/
|
|
/* .upload-item.groupable.dragging {*/
|
/* border: 3px solid #2196F3;*/
|
/* }*/
|
/*}*/
|
|
/*!* Selection Controls *!*/
|
/*.selection-controls {*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* gap: 1rem;*/
|
/* flex-wrap: wrap;*/
|
/*}*/
|
|
/*.selection-actions {*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* gap: 1rem;*/
|
/* padding: .5rem 1rem;*/
|
/* background-color: var(--action-50);*/
|
/* border-radius: var(--innerRadius);*/
|
/* color: var(--contrast);*/
|
/* font-size: .9rem;*/
|
/*}*/
|
|
/*.selection-actions button {*/
|
/* background: rgba(255, 255, 255, .2);*/
|
/* border: 1px solid rgba(255, 255, 255, .3);*/
|
/* color: inherit;*/
|
/* padding: .25rem .5rem;*/
|
/* border-radius: var(--innerRadius);*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* gap: .25rem;*/
|
/*}*/
|
|
/*.selection-actions button:hover {*/
|
/* background: rgba(255, 255, 255, .3);*/
|
/*}*/
|
|
/*.selection-count {*/
|
/* font-weight: bold;*/
|
/*}*/
|
|
/*!* Preview Actions *!*/
|
/*.preview-actions {*/
|
/* display: flex;*/
|
/* justify-content: space-between;*/
|
/* align-items: center;*/
|
/* padding: 1rem;*/
|
/* background-color: var(--base-100);*/
|
/* border-radius: var(--outerRadius);*/
|
/* margin-bottom: 1rem;*/
|
/*}*/
|
|
/*!* Upload Item Enhancements *!*/
|
/*.upload-item {*/
|
/* position: relative;*/
|
/* background: var(--base);*/
|
/* border-radius: var(--innerRadius);*/
|
/* overflow: hidden;*/
|
/* cursor: pointer;*/
|
/* transition: transform .2s ease, box-shadow .2s ease;*/
|
/*}*/
|
|
/*.upload-item:hover {*/
|
/* transform: translateY(-2px);*/
|
/* box-shadow: var(--shadow);*/
|
/*}*/
|
|
/*.upload-item[draggable="true"] {*/
|
/* cursor: grab;*/
|
/*}*/
|
|
/*.upload-item.dragging {*/
|
/* cursor: grabbing;*/
|
/* opacity: .5;*/
|
/* transform: rotate(5deg) scale(.95);*/
|
/*}*/
|
|
/*.upload-item.selected {*/
|
/* border: 2px solid var(--action-50);*/
|
/* background: rgba(var(--action-rgb), .05);*/
|
/*}*/
|
|
/*.upload-item .preview {*/
|
/* position: relative;*/
|
/* aspect-ratio: 1;*/
|
/*}*/
|
|
/*.upload-item img {*/
|
/* width: 100%;*/
|
/* height: 100%;*/
|
/* object-fit: cover;*/
|
/*}*/
|
|
/*.upload-item .overlay {*/
|
/* position: absolute;*/
|
/* top: 0;*/
|
/* left: 0;*/
|
/* right: 0;*/
|
/* bottom: 0;*/
|
/* background: rgba(0, 0, 0, .6);*/
|
/* opacity: 0;*/
|
/* transition: opacity .2s ease;*/
|
/* display: flex;*/
|
/* flex-direction: column;*/
|
/* justify-content: space-between;*/
|
/* padding: .5rem;*/
|
/*}*/
|
|
/*.upload-item:hover .overlay,*/
|
/*.upload-item.selected .overlay {*/
|
/* opacity: 1;*/
|
/*}*/
|
|
/*.upload-item .actions input[type="checkbox"] {*/
|
/* margin: 0;*/
|
/* transform: scale(1.2);*/
|
/*}*/
|
|
/*.upload-item .actions label {*/
|
/* margin: 0;*/
|
/* padding: 0;*/
|
/* cursor: pointer;*/
|
/*}*/
|
|
/*!* Status Indicator *!*/
|
/*.upload-item .status {*/
|
/* position: absolute;*/
|
/* top: .5rem;*/
|
/* right: .5rem;*/
|
/* width: 1.5rem;*/
|
/* height: 1.5rem;*/
|
/* border-radius: 50%;*/
|
/* background: var(--base);*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
|
/*}*/
|
|
/*.upload-item[data-status="processing"] .status {*/
|
/* background: var(--warning);*/
|
/*}*/
|
|
/*.upload-item[data-status="uploaded"] .status {*/
|
/* background: var(--success);*/
|
/*}*/
|
|
/*.upload-item[data-status="error"] .status {*/
|
/* background: var(--danger);*/
|
/*}*/
|
|
/*!* Group Enhancements *!*/
|
/*.upload-group {*/
|
/* background: var(--base-50);*/
|
/* border-radius: var(--outerRadius);*/
|
/* padding: 1rem;*/
|
/* margin-bottom: 1rem;*/
|
/* border: 2px solid transparent;*/
|
/* transition: border-color .2s ease, background-color .2s ease;*/
|
/*}*/
|
|
/*.upload-group.dragover {*/
|
/* border-color: var(--action-50);*/
|
/* background: rgba(var(--action-rgb), .05);*/
|
/*}*/
|
|
/*.group-header {*/
|
/* display: flex;*/
|
/* justify-content: space-between;*/
|
/* align-items: center;*/
|
/* margin-bottom: 1rem;*/
|
/*}*/
|
|
/*.group-info {*/
|
/* flex: 1;*/
|
/* display: flex;*/
|
/* flex-direction: column;*/
|
/* gap: .25rem;*/
|
/*}*/
|
|
/*.group-name {*/
|
/* font-size: 1.1rem;*/
|
/* font-weight: 500;*/
|
/* border: none;*/
|
/* background: transparent;*/
|
/* color: var(--text);*/
|
/* padding: .25rem 0;*/
|
/* border-bottom: 1px solid transparent;*/
|
/* transition: border-color .2s ease;*/
|
/*}*/
|
|
/*.group-name:focus {*/
|
/* outline: none;*/
|
/* border-bottom-color: var(--action-50);*/
|
/*}*/
|
|
/*.group-count {*/
|
/* font-size: .85rem;*/
|
/* color: var(--text-muted);*/
|
/*}*/
|
|
/*.group-actions {*/
|
/* display: flex;*/
|
/* gap: .5rem;*/
|
/*}*/
|
|
/*.group-actions button {*/
|
/* background: var(--base);*/
|
/* border: 1px solid var(--base-200);*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: .5rem;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/*}*/
|
|
/*.group-actions button:hover {*/
|
/* background: var(--action-50);*/
|
/* color: var(--contrast);*/
|
/* border-color: var(--action-50);*/
|
/*}*/
|
|
/*.group-actions .delete-group:hover {*/
|
/* background: var(--danger);*/
|
/* border-color: var(--danger);*/
|
/*}*/
|
|
/*!* Group Content *!*/
|
/*.group-content {*/
|
/* min-height: 120px;*/
|
/*}*/
|
|
/*.group-drop-zone {*/
|
/* border: 2px dashed var(--base-300);*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: 2rem;*/
|
/* text-align: center;*/
|
/* color: var(--text-muted);*/
|
/* transition: all .2s ease;*/
|
/* cursor: pointer;*/
|
/*}*/
|
|
/*.group-drop-zone:hover,*/
|
/*.group-drop-zone.dragover {*/
|
/* border-color: var(--action-50);*/
|
/* background: rgba(var(--action-rgb), .05);*/
|
/* color: var(--action-50);*/
|
/*}*/
|
|
/*.group-items {*/
|
/* display: grid;*/
|
/* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
|
/* gap: 1rem;*/
|
/* padding: 1rem 0;*/
|
/*}*/
|
|
/*.group-item {*/
|
/* position: relative;*/
|
/* aspect-ratio: 1;*/
|
/* border-radius: var(--innerRadius);*/
|
/* overflow: hidden;*/
|
/* background: var(--base);*/
|
/* transition: transform .2s ease;*/
|
/*}*/
|
|
/*.group-item:hover {*/
|
/* transform: scale(1.02);*/
|
/*}*/
|
|
/*.group-item img {*/
|
/* width: 100%;*/
|
/* height: 100%;*/
|
/* object-fit: cover;*/
|
/*}*/
|
|
/*.group-item .overlay {*/
|
/* position: absolute;*/
|
/* top: 0;*/
|
/* left: 0;*/
|
/* right: 0;*/
|
/* bottom: 0;*/
|
/* background: rgba(0, 0, 0, .6);*/
|
/* opacity: 0;*/
|
/* transition: opacity .2s ease;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* gap: .5rem;*/
|
/*}*/
|
|
/*.group-item:hover .overlay {*/
|
/* opacity: 1;*/
|
/*}*/
|
|
/*.group-item .overlay button {*/
|
/* background: rgba(255, 255, 255, .9);*/
|
/* border: none;*/
|
/* border-radius: 50%;*/
|
/* width: 2rem;*/
|
/* height: 2rem;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.group-item .set-featured {*/
|
/* color: var(--warning);*/
|
/*}*/
|
|
/*.group-item .set-featured:hover {*/
|
/* background: var(--warning);*/
|
/* color: white;*/
|
/*}*/
|
|
/*.group-item .remove-from-group:hover {*/
|
/* background: var(--danger);*/
|
/* color: white;*/
|
/*}*/
|
|
/*!* Empty Group State *!*/
|
/*.empty-group {*/
|
/* border: 4px dashed var(--base-200);*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: 2rem;*/
|
/* text-align: center;*/
|
/* color: var(--text-muted);*/
|
/* aspect-ratio: 1;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.empty-group:hover,*/
|
/*.empty-group.dragover {*/
|
/* border-color: var(--action-50);*/
|
/* background: rgba(var(--action-rgb), .05);*/
|
/* color: var(--action-50);*/
|
/*}*/
|
|
/*!* Sidebar *!*/
|
/*.sidebar {*/
|
/* background: var(--base-50);*/
|
/* border-radius: var(--outerRadius);*/
|
/* padding: 1.5rem;*/
|
/* min-height: 400px;*/
|
/*}*/
|
|
/*.sidebar .header {*/
|
/* margin-bottom: 1.5rem;*/
|
/*}*/
|
|
/*.sidebar h4 {*/
|
/* margin: 0 0 .5rem 0;*/
|
/* color: var(--text);*/
|
/*}*/
|
|
/*.sidebar .hint {*/
|
/* font-size: .85rem;*/
|
/* color: var(--text-muted);*/
|
/* margin: .25rem 0;*/
|
/*}*/
|
|
/*.new-group {*/
|
/* width: 100%;*/
|
/* background: var(--action-50);*/
|
/* color: var(--contrast);*/
|
/* border: none;*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: .75rem;*/
|
/* margin-bottom: 1rem;*/
|
/* cursor: pointer;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* gap: .5rem;*/
|
/* font-weight: 500;*/
|
/* transition: background-color .2s ease;*/
|
/*}*/
|
|
/*.new-group:hover {*/
|
/* background: rgba(var(--action-rgb), .8);*/
|
/*}*/
|
|
/*!* Layout *!*/
|
/*.group-display {*/
|
/* display: grid;*/
|
/* grid-template-columns: 2fr 1fr;*/
|
/* gap: 2rem;*/
|
/* margin-top: 2rem;*/
|
/*}*/
|
|
/*.preview-wrap {*/
|
/* min-height: 400px;*/
|
/*}*/
|
|
/*.preview-grid {*/
|
/* display: grid;*/
|
/* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));*/
|
/* gap: 1rem;*/
|
/* padding: 1rem;*/
|
/* background: var(--base-100);*/
|
/* border-radius: var(--outerRadius);*/
|
/* min-height: 200px;*/
|
/*}*/
|
|
/*.preview-grid:empty::after {*/
|
/* content: "No images uploaded yet. Drag files here or click to upload.";*/
|
/* grid-column: 1 / -1;*/
|
/* text-align: center;*/
|
/* color: var(--text-muted);*/
|
/* padding: 2rem;*/
|
/* border: 2px dashed var(--base-300);*/
|
/* border-radius: var(--innerRadius);*/
|
/*}*/
|
|
/*!* File Upload Container *!*/
|
/*.file-upload-container.dragover {*/
|
/* border-color: var(--action-50);*/
|
/* background: rgba(var(--action-rgb), .05);*/
|
/*}*/
|
|
/*!* Responsive Design *!*/
|
/*@media (max-width: 768px) {*/
|
/* .group-display {*/
|
/* grid-template-columns: 1fr;*/
|
/* gap: 1rem;*/
|
/* }*/
|
|
/* .preview-actions {*/
|
/* flex-direction: column;*/
|
/* align-items: stretch;*/
|
/* gap: 1rem;*/
|
/* }*/
|
|
/* .selection-controls {*/
|
/* justify-content: space-between;*/
|
/* }*/
|
|
/* .preview-grid {*/
|
/* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
|
/* }*/
|
|
/* .group-items {*/
|
/* grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));*/
|
/* }*/
|
/*}*/
|
|
/*!* Animation for upload progress *!*/
|
/*@keyframes uploadProgress {*/
|
/* 0% { transform: translateX(-100%); }*/
|
/* 100% { transform: translateX(100%); }*/
|
/*}*/
|
|
/*.upload-item[data-status="uploading"] .progress .bar::after {*/
|
/* content: '';*/
|
/* position: absolute;*/
|
/* top: 0;*/
|
/* left: 0;*/
|
/* height: 100%;*/
|
/* width: 20%;*/
|
/* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);*/
|
/* animation: uploadProgress 1.5s infinite;*/
|
/*}*/
|
|
/*!* Accessibility *!*/
|
/*.upload-item:focus-within,*/
|
/*.group-item:focus-within,*/
|
/*.upload-group:focus-within {*/
|
/* outline: 2px solid var(--action-50);*/
|
/* outline-offset: 2px;*/
|
/*}*/
|
|
/*!* High contrast mode support *!*/
|
/*@media (prefers-contrast: high) {*/
|
/* .upload-item.selected {*/
|
/* border-width: 3px;*/
|
/* }*/
|
|
/* .group-drop-zone.dragover {*/
|
/* border-width: 3px;*/
|
/* }*/
|
/*}*/
|
/*.restore-notification {*/
|
/* background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);*/
|
/* border: 1px solid #ffc107;*/
|
/* border-left: 4px solid #ff6b35;*/
|
/* border-radius: var(--outerRadius);*/
|
/* padding: 1.5rem;*/
|
/* margin-bottom: 1.5rem;*/
|
/* box-shadow: 0 4px 12px rgba(255, 107, 53, .15);*/
|
/* animation: slideInFromTop .4s ease-out;*/
|
/* transition: opacity .3s ease, transform .3s ease;*/
|
/*}*/
|
|
/*@keyframes slideInFromTop {*/
|
/* from {*/
|
/* transform: translateY(-20px);*/
|
/* opacity: 0;*/
|
/* }*/
|
/* to {*/
|
/* transform: translateY(0);*/
|
/* opacity: 1;*/
|
/* }*/
|
/*}*/
|
|
/*.restore-content {*/
|
/* display: grid;*/
|
/* grid-template-columns: auto 1fr auto;*/
|
/* gap: 1rem;*/
|
/* align-items: start;*/
|
/*}*/
|
|
/*.restore-icon {*/
|
/* font-size: 1.5rem;*/
|
/* color: #ff6b35;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* width: 2.5rem;*/
|
/* height: 2.5rem;*/
|
/* background: rgba(255, 107, 53, .1);*/
|
/* border-radius: 50%;*/
|
/* flex-shrink: 0;*/
|
/*}*/
|
|
/*.restore-message {*/
|
/* min-width: 0; !* Allow text to wrap *!*/
|
/*}*/
|
|
/*.restore-message h4 {*/
|
/* margin: 0 0 .5rem 0;*/
|
/* color: #d63384;*/
|
/* font-size: 1.1rem;*/
|
/* font-weight: 600;*/
|
/*}*/
|
|
/*.restore-message p {*/
|
/* margin: 0 0 .5rem 0;*/
|
/* color: #6c5419;*/
|
/* line-height: 1.4;*/
|
/*}*/
|
|
/*.restore-message p:last-child {*/
|
/* margin-bottom: 0;*/
|
/*}*/
|
|
/*.restore-message .warning {*/
|
/* background: rgba(220, 53, 69, .1);*/
|
/* border: 1px solid rgba(220, 53, 69, .2);*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: .5rem .75rem;*/
|
/* margin-top: .75rem;*/
|
/* font-size: .9rem;*/
|
/*}*/
|
|
/*.restore-message .warning strong {*/
|
/* color: #dc3545;*/
|
/*}*/
|
|
/*.restore-actions {*/
|
/* display: flex;*/
|
/* flex-direction: column;*/
|
/* gap: .5rem;*/
|
/* flex-shrink: 0;*/
|
/*}*/
|
|
/*.start-over-btn {*/
|
/* background: #dc3545;*/
|
/* color: white;*/
|
/* border: none;*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: .5rem 1rem;*/
|
/* font-size: .9rem;*/
|
/* font-weight: 500;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/* white-space: nowrap;*/
|
/*}*/
|
|
/*.start-over-btn:hover {*/
|
/* background: #c82333;*/
|
/* transform: translateY(-1px);*/
|
/* box-shadow: 0 2px 4px rgba(220, 53, 69, .3);*/
|
/*}*/
|
|
/*.start-over-btn:active {*/
|
/* transform: translateY(0);*/
|
/*}*/
|
|
/*.dismiss-notification {*/
|
/* background: transparent;*/
|
/* border: 1px solid #6c5419;*/
|
/* color: #6c5419;*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: .5rem;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* width: 2rem;*/
|
/* height: 2rem;*/
|
/*}*/
|
|
/*.dismiss-notification:hover {*/
|
/* background: #6c5419;*/
|
/* color: white;*/
|
/*}*/
|
|
/*!* Start Over Confirmation Dialog *!*/
|
/*.start-over-confirmation {*/
|
/* border: none;*/
|
/* border-radius: var(--outerRadius);*/
|
/* padding: 0;*/
|
/* box-shadow: 0 10px 30px rgba(0, 0, 0, .3);*/
|
/* max-width: 500px;*/
|
/* width: 90vw;*/
|
/*}*/
|
|
/*.start-over-confirmation::backdrop {*/
|
/* background: rgba(0, 0, 0, .6);*/
|
/* backdrop-filter: blur(4px);*/
|
/*}*/
|
|
/*.confirmation-content {*/
|
/* padding: 2rem;*/
|
/* background: var(--base);*/
|
/* border-radius: var(--outerRadius);*/
|
/*}*/
|
|
/*.confirmation-content h3 {*/
|
/* margin: 0 0 1rem 0;*/
|
/* color: #dc3545;*/
|
/* font-size: 1.25rem;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* gap: .5rem;*/
|
/*}*/
|
|
/*.confirmation-content h3::before {*/
|
/* content: "⚠️";*/
|
/* font-size: 1.5rem;*/
|
/*}*/
|
|
/*.confirmation-content p {*/
|
/* margin: 0 0 1rem 0;*/
|
/* color: var(--text);*/
|
/* line-height: 1.5;*/
|
/*}*/
|
|
/*.confirmation-content ul {*/
|
/* margin: 0 0 1rem 1rem;*/
|
/* color: var(--text);*/
|
/*}*/
|
|
/*.confirmation-content li {*/
|
/* margin-bottom: .25rem;*/
|
/*}*/
|
|
/*.confirmation-actions {*/
|
/* display: flex;*/
|
/* gap: 1rem;*/
|
/* justify-content: flex-end;*/
|
/* margin-top: 1.5rem;*/
|
/* padding-top: 1rem;*/
|
/* border-top: 1px solid var(--base-200);*/
|
/*}*/
|
|
/*.confirm-start-over {*/
|
/* background: #dc3545;*/
|
/* color: white;*/
|
/* border: none;*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: .75rem 1.5rem;*/
|
/* font-weight: 500;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.confirm-start-over:hover {*/
|
/* background: #c82333;*/
|
/*}*/
|
|
/*.cancel-start-over {*/
|
/* background: var(--base-100);*/
|
/* color: var(--text);*/
|
/* border: 1px solid var(--base-300);*/
|
/* border-radius: var(--innerRadius);*/
|
/* padding: .75rem 1.5rem;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.cancel-start-over:hover {*/
|
/* background: var(--base-200);*/
|
/*}*/
|
|
/*!* Responsive Design *!*/
|
/*@media (max-width: 768px) {*/
|
/* .restore-content {*/
|
/* grid-template-columns: 1fr;*/
|
/* gap: 1rem;*/
|
/* text-align: center;*/
|
/* }*/
|
|
/* .restore-icon {*/
|
/* margin: 0 auto;*/
|
/* }*/
|
|
/* .restore-actions {*/
|
/* flex-direction: row;*/
|
/* justify-content: center;*/
|
/* align-items: center;*/
|
/* }*/
|
|
/* .start-over-btn {*/
|
/* order: 2;*/
|
/* }*/
|
|
/* .dismiss-notification {*/
|
/* order: 1;*/
|
/* }*/
|
|
/* .confirmation-actions {*/
|
/* flex-direction: column-reverse;*/
|
/* }*/
|
|
/* .confirmation-actions button {*/
|
/* width: 100%;*/
|
/* }*/
|
/*}*/
|
|
/*!* Reduced motion preference *!*/
|
/*@media (prefers-reduced-motion: reduce) {*/
|
/* .restore-notification {*/
|
/* animation: none;*/
|
/* }*/
|
|
/* .start-over-btn:hover {*/
|
/* transform: none;*/
|
/* }*/
|
/*}*/
|
|
/*!* High contrast mode *!*/
|
/*@media (prefers-contrast: high) {*/
|
/* .restore-notification {*/
|
/* border-width: 2px;*/
|
/* border-left-width: 6px;*/
|
/* }*/
|
|
/* .restore-message .warning {*/
|
/* border-width: 2px;*/
|
/* }*/
|
/*}*/
|
|
/*!* Dark mode adjustments *!*/
|
/*@media (prefers-color-scheme: dark) {*/
|
/* .restore-notification {*/
|
/* background: linear-gradient(135deg, #3d3d00 0%, #4a4a00 100%);*/
|
/* border-color: #ffc107;*/
|
/* color: #fff3cd;*/
|
/* }*/
|
|
/* .restore-message p {*/
|
/* color: #fff3cd;*/
|
/* }*/
|
|
/* .restore-message .warning {*/
|
/* background: rgba(220, 53, 69, .2);*/
|
/* border-color: rgba(220, 53, 69, .4);*/
|
/* color: #ffb3ba;*/
|
/* }*/
|
|
/* .dismiss-notification {*/
|
/* border-color: #fff3cd;*/
|
/* color: #fff3cd;*/
|
/* }*/
|
|
/* .dismiss-notification:hover {*/
|
/* background: #fff3cd;*/
|
/* color: #3d3d00;*/
|
/* }*/
|
/*}*/
|
|
/*.dragover {*/
|
/* background-color: rgba(var(--primary-rgb), .1);*/
|
/* border: 2px dashed var(--primary-color);*/
|
/* border-radius: 8px;*/
|
/*}*/
|
|
/*.upload-item.dragging {*/
|
/* opacity: .5;*/
|
/* transform: scale(.95);*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.group-drop-zone {*/
|
/* min-height: 60px;*/
|
/* border: 2px dashed #ccc;*/
|
/* border-radius: 8px;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* color: #666;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.group-drop-zone.dragover {*/
|
/* border-color: var(--primary-color);*/
|
/* background-color: rgba(var(--primary-rgb), .05);*/
|
/* color: var(--primary-color);*/
|
/*}*/
|
|
/*.empty-group {*/
|
/* padding: 20px;*/
|
/* text-align: center;*/
|
/* border: 2px dashed #ddd;*/
|
/* border-radius: 8px;*/
|
/* margin: 10px 0;*/
|
/* cursor: pointer;*/
|
/* transition: all .2s ease;*/
|
/*}*/
|
|
/*.empty-group:hover {*/
|
/* border-color: var(--primary-color);*/
|
/* background-color: rgba(var(--primary-rgb), .02);*/
|
/*}*/
|
|
/*.group-item.featured {*/
|
/* border: 2px solid gold;*/
|
/* position: relative;*/
|
/*}*/
|
|
/*.group-item.featured::after {*/
|
/* content: "⭐";*/
|
/* position: absolute;*/
|
/* top: 5px;*/
|
/* right: 5px;*/
|
/* background: gold;*/
|
/* border-radius: 50%;*/
|
/* width: 20px;*/
|
/* height: 20px;*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* justify-content: center;*/
|
/* font-size: 12px;*/
|
/*}*/
|
|
/*.upload-item[draggable="true"] {*/
|
/* cursor: grab;*/
|
/*}*/
|
|
/*.upload-item[draggable="true"]:active {*/
|
/* cursor: grabbing;*/
|
/*}*/
|
|
/*.selection-actions {*/
|
/* display: flex;*/
|
/* align-items: center;*/
|
/* gap: 10px;*/
|
/* padding: 10px;*/
|
/* background: rgba(var(--primary-rgb), .05);*/
|
/* border-radius: 6px;*/
|
/* border: 1px solid rgba(var(--primary-rgb), .2);*/
|
/*}*/
|
|
/*.group-display .sidebar {*/
|
/* min-width: 300px;*/
|
/* max-width: 350px;*/
|
/* background: #f9f9f9;*/
|
/* border-left: 1px solid #eee;*/
|
/* padding: 20px;*/
|
/*}*/
|
|
/*.group-display .preview-wrap {*/
|
/* flex: 1;*/
|
/* padding: 20px;*/
|
/*}*/
|
|
/*.group-display {*/
|
/* display: flex;*/
|
/* gap: 20px;*/
|
/* margin-top: 20px;*/
|
/* border: 1px solid #ddd;*/
|
/* border-radius: 8px;*/
|
/* overflow: hidden;*/
|
/*}*/
|
|
/* Touch Drag & Drop Styles */
|
|
/* Original item being dragged */
|
.upload-item.dragging {
|
opacity: .5;
|
transform: scale(.95);
|
transition: opacity .2s ease, transform .2s ease;
|
}
|
|
/* Touch drag preview element */
|
.drag-preview {
|
background: var(--bg-elevated);
|
border: 2px solid var(--accent-primary);
|
cursor: grabbing;
|
user-select: none;
|
-webkit-user-select: none;
|
-webkit-user-drag: none;
|
}
|
|
.drag-preview * {
|
pointer-events: none;
|
}
|
|
/* Drop target states for touch */
|
.dragover {
|
background-color: var(--accent-primary-alpha);
|
border: 2px dashed var(--accent-primary);
|
transform: scale(1.02);
|
transition: all .2s ease;
|
}
|
|
.dragover::after {
|
content: "Drop here";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background: var(--accent-primary);
|
color: white;
|
padding: 8px 16px;
|
border-radius: 4px;
|
font-size: 14px;
|
font-weight: 500;
|
z-index: 1;
|
pointer-events: none;
|
}
|
|
/* Enhanced touch targets for mobile */
|
@media (hover: none) and (pointer: coarse) {
|
.upload-item {
|
min-height: 44px; /* Apple's recommended minimum touch target */
|
touch-action: manipulation;
|
}
|
|
.upload-item [data-upload-id] {
|
cursor: grab;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
|
.upload-item.dragging {
|
cursor: grabbing;
|
}
|
|
/* Larger touch targets for action buttons */
|
.upload-item .actions button {
|
min-width: 44px;
|
min-height: 44px;
|
padding: 12px;
|
}
|
|
/* Group containers more touch-friendly */
|
.item-grid.groups .empty-group {
|
padding: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 16px;
|
}
|
|
.group-content {
|
padding: 0;
|
width: 100%;
|
}
|
|
/* Better visual feedback for group areas */
|
.item-grid.group,
|
.item-grid.groups {
|
border: 2px solid transparent;
|
border-radius: 8px;
|
transition: border-color .2s ease, background-color .2s ease;
|
}
|
|
.item-grid.group.dragover,
|
.item-grid.groups.dragover {
|
border-color: var(--accent-primary);
|
background-color: var(--accent-primary-alpha);
|
}
|
}
|
|
/* Haptic feedback animation */
|
@keyframes feedback {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.05); }
|
100% { transform: scale(1); }
|
}
|
|
.feedback {
|
animation: feedback .2s ease;
|
}
|
|
/* Prevent text selection during touch drag */
|
.dragging,
|
.dragging * {
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
|
/* Long press visual feedback */
|
.upload-item:active {
|
transform: scale(.98);
|
transition: transform .1s ease;
|
}
|
|
/* Better spacing for touch interfaces */
|
@media (hover: none) {
|
|
.item-grid.groups {
|
gap: 16px;
|
}
|
|
.group-item {
|
margin: 8px;
|
}
|
}
|
|
/* Accessibility improvements for touch */
|
.upload-item:focus-visible {
|
outline: 3px solid var(--accent-primary);
|
outline-offset: 2px;
|
}
|
|
/* High contrast mode support */
|
@media (prefers-contrast: high) {
|
.dragover {
|
border-width: 3px;
|
border-style: solid;
|
}
|
|
.drag-preview {
|
border-width: 3px;
|
}
|
}
|
/* Touch Drag & Drop Styles */
|
|
/* Original item being dragged */
|
.upload-item.dragging {
|
opacity: .5;
|
transform: scale(.95);
|
transition: opacity .2s ease, transform .2s ease;
|
}
|
|
/* Touch drag preview element */
|
.drag-preview {
|
background: var(--bg-elevated);
|
border: 2px solid var(--accent-primary);
|
cursor: grabbing;
|
user-select: none;
|
-webkit-user-select: none;
|
-webkit-user-drag: none;
|
}
|
|
.drag-preview * {
|
pointer-events: none;
|
}
|
|
/* Multi-item drag preview */
|
.drag-preview.multi-item {
|
/* Container styles handled in JS for dynamic positioning */
|
}
|
.drag-preview img {
|
max-width: 200px;
|
width: 100%;
|
height: 100%;
|
aspect-ratio: 1;
|
}
|
|
.drag-preview.multi-item .selection-count-badge {
|
background: var(--accent-primary);
|
color: white;
|
border: 2px solid white;
|
font-weight: bold;
|
text-shadow: 0 1px 2px rgba(0,0,0,.5);
|
}
|
|
/* Enhanced visual feedback for multiple selection */
|
.upload-item.selected.dragging {
|
opacity: .3;
|
transform: scale(.9);
|
border: 2px solid var(--accent-primary);
|
}
|
|
/* Stacked preview animation */
|
@keyframes stack-preview {
|
0% {
|
transform: translateX(0) translateY(0) rotate(0deg) scale(1);
|
opacity: 1;
|
}
|
100% {
|
transform: translateX(var(--stack-x, 0)) translateY(var(--stack-y, 0)) rotate(var(--stack-rotation, 0deg)) scale(1.05);
|
opacity: var(--stack-opacity, .8);
|
}
|
}
|
|
.drag-preview.multi-item > * {
|
animation: stack-preview .2s ease-out forwards;
|
}
|
|
/* Drop target states for touch */
|
.dragover {
|
background-color: var(--accent-primary-alpha);
|
border: 2px dashed var(--accent-primary);
|
transform: scale(1.02);
|
transition: all .2s ease;
|
}
|
|
.dragover::after {
|
content: "Drop here";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background: var(--accent-primary);
|
color: white;
|
padding: 8px 16px;
|
border-radius: 4px;
|
font-size: 14px;
|
font-weight: 500;
|
z-index: 1;
|
pointer-events: none;
|
}
|
|
/* Enhanced drop feedback for multiple items */
|
.dragover.multi-drop::after {
|
content: "Drop " attr(data-item-count) " items here";
|
padding: 10px 20px;
|
font-size: 16px;
|
border-radius: 6px;
|
box-shadow: 0 4px 12px rgba(0,0,0,.3);
|
}
|
|
/* Pulsing animation for multi-item drop zones */
|
.dragover.multi-drop {
|
animation: multi-drop-pulse 1s infinite alternate;
|
}
|
|
@keyframes multi-drop-pulse {
|
0% {
|
background-color: var(--accent-primary-alpha);
|
transform: scale(1.02);
|
}
|
100% {
|
background-color: var(--accent-secondary-alpha, var(--accent-primary-alpha));
|
transform: scale(1.04);
|
}
|
}
|
|
/* Enhanced touch targets for mobile */
|
@media (hover: none) and (pointer: coarse) {
|
.upload-item {
|
min-height: 44px; /* Apple's recommended minimum touch target */
|
touch-action: manipulation;
|
}
|
|
.upload-item [data-upload-id] {
|
cursor: grab;
|
-webkit-user-select: none;
|
user-select: none;
|
}
|
|
.upload-item.dragging {
|
cursor: grabbing;
|
}
|
|
/* Larger touch targets for action buttons */
|
.upload-item .actions button {
|
min-width: 44px;
|
min-height: 44px;
|
padding: 12px;
|
}
|
|
/* Group containers more touch-friendly */
|
.item-grid.groups .empty-group {
|
padding: 1rem;
|
margin: 1rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 16px;
|
}
|
|
/* Better visual feedback for group areas */
|
.item-grid.group,
|
.item-grid.groups {
|
border: 2px solid transparent;
|
border-radius: 8px;
|
transition: border-color .2s ease, background-color .2s ease;
|
}
|
|
.item-grid.group.dragover,
|
.item-grid.groups.dragover {
|
border-color: var(--accent-primary);
|
background-color: var(--accent-primary-alpha);
|
}
|
}
|
|
/* Haptic feedback animation */
|
@keyframes feedback {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.05); }
|
100% { transform: scale(1); }
|
}
|
|
.feedback {
|
animation: feedback .2s ease;
|
}
|
|
/* Prevent text selection during touch drag */
|
.dragging,
|
.dragging * {
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
|
/* Long press visual feedback */
|
.upload-item:active {
|
transform: scale(.98);
|
transition: transform .1s ease;
|
}
|
|
/* Better spacing for touch interfaces */
|
@media (hover: none) {
|
|
.item-grid.groups {
|
gap: 16px;
|
}
|
|
.group-item {
|
margin: 8px;
|
}
|
}
|
|
/* Accessibility improvements for touch */
|
.upload-item:focus-visible {
|
outline: 3px solid var(--accent-primary);
|
outline-offset: 2px;
|
}
|
|
/* Enhanced selection states for touch */
|
.upload-item.selected {
|
border: 2px solid var(--accent-primary);
|
background-color: var(--accent-primary-alpha);
|
}
|
|
.upload-item.selected.dragging {
|
border-color: var(--accent-secondary);
|
background-color: var(--accent-secondary-alpha);
|
}
|
|
/* Touch feedback animations */
|
.feedback-start {
|
animation: feedback-start .3s ease;
|
}
|
|
.feedback-success {
|
animation: feedback-success .5s ease;
|
}
|
|
.feedback-error {
|
animation: feedback-error .5s ease;
|
}
|
|
@keyframes feedback-start {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.05); background-color: var(--accent-primary-alpha); }
|
100% { transform: scale(1); }
|
}
|
|
@keyframes feedback-success {
|
0% { transform: scale(1); }
|
25% { transform: scale(1.1); background-color: var(--success-alpha); }
|
50% { transform: scale(1.05); }
|
100% { transform: scale(1); }
|
}
|
|
@keyframes feedback-error {
|
0% { transform: translateX(0); }
|
25% { transform: translateX(-5px); background-color: var(--error-alpha); }
|
50% { transform: translateX(5px); }
|
75% { transform: translateX(-3px); }
|
100% { transform: translateX(0); }
|
}
|
|
/* Multi-selection visual enhancements */
|
.upload-item.selected::after {
|
content: "✓";
|
position: absolute;
|
top: 8px;
|
right: 8px;
|
background: var(--accent-primary);
|
color: white;
|
border-radius: 50%;
|
width: 20px;
|
height: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 12px;
|
font-weight: bold;
|
z-index: 10;
|
}
|
|
/* Selection count in drag preview */
|
.selection-count-badge {
|
animation: badge-appear .3s ease;
|
}
|
|
@keyframes badge-appear {
|
0% {
|
transform: scale(0);
|
opacity: 0;
|
}
|
50% {
|
transform: scale(1.2);
|
opacity: 1;
|
}
|
100% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
|
/* High contrast mode support */
|
@media (prefers-contrast: high) {
|
.dragover {
|
border-width: 3px;
|
border-style: solid;
|
}
|
|
.drag-preview {
|
border-width: 3px;
|
}
|
|
.upload-item.selected {
|
border-width: 3px;
|
}
|
}
|
|
.drag-preview.multi-item {
|
position: relative;
|
width: 120px !important;
|
height: 120px !important;
|
/* Ensure consistent sizing for multi-item previews */
|
}
|
|
.drag-preview.multi-item img {
|
max-width: 100%;
|
max-height: 100%;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
aspect-ratio: 1;
|
border-radius: 6px;
|
}
|
|
/* Fix stacked item positioning */
|
.drag-preview.multi-item > .upload-item {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
border-radius: 6px;
|
overflow: hidden;
|
}
|
|
.drag-preview.multi-item > .upload-item:nth-child(1) {
|
top: 0;
|
left: 0;
|
z-index: 3;
|
opacity: 1;
|
transform: rotate(-2deg);
|
}
|
|
.drag-preview.multi-item > .upload-item:nth-child(2) {
|
top: 4px;
|
left: 4px;
|
z-index: 2;
|
opacity: .85;
|
transform: rotate(1deg);
|
}
|
|
.drag-preview.multi-item > .upload-item:nth-child(3) {
|
top: 8px;
|
left: 8px;
|
z-index: 1;
|
opacity: .7;
|
transform: rotate(-1deg);
|
}
|
|
/* Selection count badge positioning */
|
.drag-preview.multi-item .selection-count-badge {
|
position: absolute;
|
top: -8px;
|
right: -8px;
|
background: var(--accent-primary);
|
color: white;
|
border: 2px solid white;
|
border-radius: 50%;
|
width: 28px;
|
height: 28px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 12px;
|
font-weight: bold;
|
font-family: system-ui, -apple-system, sans-serif;
|
box-shadow: 0 2px 8px rgba(0,0,0,.3);
|
z-index: 20;
|
line-height: 1;
|
}
|
|
/* Ensure drag preview is always visible */
|
.drag-preview {
|
pointer-events: none;
|
z-index: 10000 !important;
|
}
|
|
/* Remove any transforms that might interfere with positioning */
|
.drag-preview.multi-item .upload-item .progress,
|
.drag-preview.multi-item .upload-item .actions,
|
.drag-preview.multi-item .upload-item .status,
|
.drag-preview.multi-item .upload-item details {
|
display: none !important;
|
}
|
|
/* Clean up the visual during multi-drag */
|
.upload-item.selected.dragging {
|
opacity: .3;
|
transform: scale(.95);
|
border: 2px dashed var(--accent-primary);
|
background-color: var(--accent-primary-alpha);
|
}
|
|
/* Improved drop zone feedback for multiple items */
|
.dragover.multi-drop {
|
animation: multi-drop-pulse .8s infinite ease-in-out;
|
border-style: solid;
|
}
|
|
@keyframes multi-drop-pulse {
|
0%, 100% {
|
background-color: var(--accent-primary-alpha);
|
transform: scale(1.02);
|
border-color: var(--accent-primary);
|
}
|
50% {
|
background-color: var(--accent-secondary-alpha, var(--accent-primary-alpha));
|
transform: scale(1.04);
|
border-color: var(--accent-secondary, var(--accent-primary));
|
}
|
}
|
|
/* Enhanced feedback for successful drops */
|
@keyframes drop-success {
|
0% {
|
background-color: var(--success-alpha);
|
transform: scale(1.1);
|
}
|
100% {
|
background-color: transparent;
|
transform: scale(1);
|
}
|
}
|
|
.drop-success {
|
animation: drop-success .6s ease-out;
|
}
|
|
.drag-preview {
|
border: 2px solid red !important;
|
background: rgba(255, 0, 0, .1) !important;
|
}
|
|
.drag-preview.multi-item {
|
border: 2px solid blue !important;
|
background: rgba(0, 0, 255, .1) !important;
|
}
|
|
.dragging {
|
opacity: .5 !important;
|
border: 2px dashed orange !important;
|
}
|
|
.dragover {
|
background: rgba(0, 255, 0, .2) !important;
|
border: 2px dashed green !important;
|
}
|
|
.dragover.multi-drop::before {
|
content: "Drop " attr(data-item-count) " items here";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background: rgba(0, 0, 0, .8);
|
color: white;
|
padding: 8px 16px;
|
border-radius: 4px;
|
font-size: 14px;
|
font-weight: bold;
|
z-index: 1000;
|
pointer-events: none;
|
}
|
|
.drag-preview {
|
/* Ensure drag preview is always visible */
|
position: fixed !important;
|
z-index: 9999 !important;
|
pointer-events: none !important;
|
|
/* Improve visual appearance */
|
box-shadow: 0 8px 25px rgba(0,0,0,.3);
|
border-radius: 8px;
|
overflow: hidden;
|
|
/* Ensure it's not affected by parent transforms or overflow */
|
transform-style: preserve-3d;
|
}
|
|
.drag-preview.multi-item {
|
/* Ensure proper stacking context for multi-item previews */
|
isolation: isolate;
|
}
|
|
.drag-preview .upload-item {
|
/* Ensure child items are positioned correctly */
|
border-radius: 4px;
|
overflow: hidden;
|
box-shadow: 0 2px 8px rgba(0,0,0,.15);
|
}
|
|
.drag-preview .upload-item img {
|
/* Prevent image layout issues during drag */
|
max-width: 100%;
|
height: auto;
|
display: block;
|
}
|
|
/* Debug styles - remove in production */
|
.drag-preview {
|
border: 2px solid red !important;
|
}
|
|
.drag-preview.multi-item {
|
border: 2px solid blue !important;
|
}
|
|
/* Hide complex UI elements in drag preview */
|
.drag-preview details,
|
.drag-preview .actions,
|
.drag-preview .progress {
|
display: none !important;
|
}
|
|
/* Simplify the preview to just show the image */
|
.drag-preview .preview {
|
width: 100% !important;
|
height: 100% !important;
|
}
|
|
.drag-preview .preview img {
|
width: 100% !important;
|
height: 100% !important;
|
object-fit: cover !important;
|
}
|
|
|
.upload-group summary {
|
padding: 0!important;
|
}
|
|
|
/* Mobile-First Image Grouping Layout - Using Existing Templates */
|
|
/* Base mobile layout - stack everything vertically */
|
@media (max-width: 768px) {
|
|
.item-grid.preview details,
|
.item-grid.group details {
|
display: none;
|
}
|
.group-display {
|
display: flex;
|
flex-direction: column;
|
gap: 0;
|
height: calc(100vh - var(--height) - var(--height));
|
position: fixed;
|
top: var(--height);
|
bottom: var(--height);
|
left: 0;
|
right: 0;
|
z-index:999;
|
}
|
|
.preview-wrap,
|
.sidebar {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
min-height: 0;
|
overflow: hidden;
|
overflow-y: auto;
|
}
|
/* Preview section - top half of screen */
|
.preview-wrap {
|
background: var(--base);
|
border-bottom: 2px solid var(--action-0);
|
}
|
|
/* Preview actions - sticky at top */
|
.preview-actions {
|
position: sticky;
|
top: 0;
|
z-index: 10;
|
background: var(--base);
|
border-bottom: 1px solid var(--base-200);
|
flex-shrink: 0;
|
}
|
|
/* Preview grid - scrollable area */
|
.item-grid.preview {
|
flex: 1;
|
grid-template-columns: repeat(3, 1fr);
|
gap: .75rem;
|
padding: .5rem;
|
margin-top: 0;
|
}
|
.item-grid + .hint {
|
margin-top: 0;
|
}
|
|
/* Groups section - bottom half with sticky header */
|
.sidebar {
|
background: var(--base-200);
|
border-top: 3px solid var(--action-50);
|
}
|
|
/* Groups header - sticky */
|
.sidebar .header {
|
border-bottom: 1px solid var(--base-200);
|
padding: 1rem;
|
flex-shrink: 0;
|
}
|
|
/* Create group button */
|
.create-group-from-selection {
|
margin: 0 1rem 1rem 1rem;
|
flex-shrink: 0;
|
min-height: 44px; /* Touch target */
|
padding: .75rem 1rem;
|
font-size: .9rem;
|
}
|
|
/* Groups container - scrollable */
|
.item-grid.groups {
|
flex: 1;
|
margin: 0;
|
grid-template-columns: repeat(2, 1fr); /* Single column on mobile */
|
gap: 1rem;
|
}
|
|
/* Enhanced empty group for mobile */
|
.empty-group {
|
aspect-ratio: unset;
|
grid-column: 1/-1;
|
transition: all .2s ease;
|
}
|
|
.item-grid.groups .item-grid {
|
grid-template-columns: repeat(3, 1fr);
|
}
|
.item-grid.groups .item-grid details {
|
display: none;
|
}
|
|
.empty-group:hover,
|
.empty-group.dragover {
|
border-color: var(--action-0);
|
background: var(--action-rgb-subtle-hover);
|
transform: scale(1.02);
|
}
|
|
/* Upload button - fixed at bottom */
|
.submit-uploads {
|
position: fixed !important;
|
bottom: var(--offHeight);
|
right: .5rem;
|
z-index: 20;
|
height: 3rem;
|
font-size: 1.1rem;
|
font-weight: 600;
|
box-shadow: var(--shadow);
|
border-radius: var(--outerRadius);
|
}
|
|
.submit-uploads:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 8px 25px rgba(0,0,0,.2);
|
}
|
|
/* Enhanced upload items for mobile */
|
.upload-item {
|
border-radius: var(--innerRadius);
|
overflow: hidden;
|
background: var(--base);
|
border: 1px solid var(--base-200);
|
transition: transform .2s ease;
|
}
|
|
.upload-item:hover {
|
transform: scale(1.02);
|
}
|
|
/* Mobile-friendly actions overlay */
|
.upload-item .actions {
|
padding: .5rem;
|
}
|
|
.upload-item .actions button {
|
min-width: 44px;
|
min-height: 44px;
|
padding: .75rem;
|
border-radius: var(--innerRadius);
|
}
|
|
/* Better checkbox targets */
|
.upload-item .upload-select + label {
|
min-width: 44px;
|
min-height: 44px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: var(--innerRadius);
|
}
|
|
/* Enhanced group styling for mobile */
|
.upload-group {
|
background: var(--base-100);
|
border-radius: var(--innerRadius);
|
border: 1px solid var(--base-200);
|
padding: 1rem;
|
margin-bottom: 1rem;
|
}
|
|
.upload-group .group-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 1rem;
|
padding-bottom: .5rem;
|
border-bottom: 1px solid var(--base-200);
|
flex-wrap: wrap;
|
gap: .5rem;
|
}
|
|
.upload-group .group-actions {
|
display: flex;
|
gap: .5rem;
|
flex-wrap: wrap;
|
}
|
|
.upload-group .group-actions button {
|
flex: 1;
|
min-width: 100px;
|
min-height: 44px;
|
padding: .5rem .75rem;
|
font-size: .9rem;
|
border-radius: var(--innerRadius);
|
}
|
|
.upload-group .item-grid.group {
|
grid-template-columns: repeat(2, 1fr);
|
gap: .5rem;
|
margin-bottom: 1rem;
|
}
|
|
.upload-group .group-item {
|
aspect-ratio: 1;
|
border-radius: 4px;
|
overflow: hidden;
|
border: 1px solid var(--base-200);
|
}
|
|
/* Hide file upload container on mobile when in grouping mode */
|
.group-display:not([hidden]) ~ .file-upload-container {
|
display: none;
|
}
|
|
/* Enhanced selection controls for mobile */
|
.selection-controls {
|
display: flex;
|
flex-direction: column;
|
gap: 0;
|
}
|
|
.selection-controls .selected {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
gap: .5rem;
|
}
|
|
.selection-actions {
|
display: flex;
|
padding: 0;
|
}
|
|
.selection-actions button {
|
flex: 1;
|
padding: .25rem;
|
font-size: .9rem;
|
border-radius: var(--innerRadius);
|
}
|
|
/* Enhanced dragging states for mobile */
|
.upload-item.dragging {
|
opacity: .7;
|
transform: scale(.95) rotate(3deg);
|
z-index: 1000;
|
box-shadow: 0 8px 25px rgba(0,0,0,.3);
|
}
|
|
.dragover {
|
background: var(--action-rgb-subtle) !important;
|
border-color: var(--action-0) !important;
|
transform: scale(1.05);
|
animation: mobile-drop-pulse .8s infinite ease-in-out;
|
}
|
|
@keyframes mobile-drop-pulse {
|
0%, 100% {
|
background-color: var(--action-rgb-subtle);
|
transform: scale(1.02);
|
}
|
50% {
|
background-color: var(--action-rgb-subtle-hover);
|
transform: scale(1.04);
|
}
|
}
|
|
/* Enhanced selection states */
|
.upload-item.selected {
|
border: 2px solid var(--action-0);
|
background-color: var(--action-rgb-subtle);
|
}
|
|
.upload-item.selected::after {
|
content: '✓';
|
position: absolute;
|
top: .5rem;
|
right: .5rem;
|
background: var(--action-0);
|
color: white;
|
border-radius: 50%;
|
width: 24px;
|
height: 24px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 12px;
|
font-weight: bold;
|
z-index: 10;
|
animation: selection-pop .3s ease;
|
}
|
|
@keyframes selection-pop {
|
0% {
|
transform: scale(0);
|
opacity: 0;
|
}
|
70% {
|
transform: scale(1.2);
|
opacity: 1;
|
}
|
100% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
|
/* Enhanced details/summary for mobile */
|
.upload-item details summary {
|
padding: .75rem;
|
background: var(--base-100);
|
border-radius: var(--innerRadius);
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
gap: .5rem;
|
font-size: .9rem;
|
font-weight: 500;
|
min-height: 44px; /* Touch target */
|
}
|
|
.upload-item details[open] summary {
|
border-radius: var(--innerRadius) var(--innerRadius) 0 0;
|
border-bottom: 1px solid var(--base-200);
|
}
|
|
/* Enhanced forms for mobile */
|
.upload-meta input,
|
.upload-meta textarea {
|
padding: .75rem;
|
font-size: 16px; /* Prevents zoom on iOS */
|
border-radius: var(--innerRadius);
|
border: 2px solid var(--base-200);
|
transition: border-color .2s ease;
|
}
|
|
.upload-meta input:focus,
|
.upload-meta textarea:focus {
|
border-color: var(--action-0);
|
outline: none;
|
box-shadow: 0 0 0 3px var(--action-rgb-subtle);
|
}
|
}
|
|
/* Tablet adjustments */
|
@media (min-width: 769px) and (max-width: 1024px) {
|
.group-display {
|
grid-template-columns: 1fr;
|
gap: 1.5rem;
|
}
|
|
.item-grid.preview {
|
grid-template-columns: repeat(4, 1fr);
|
}
|
|
.item-grid.groups {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
|
body:has(.group-display:not([hidden])) {
|
overflow:hidden;
|
}
|
|
.today_hours .group-fields {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
gap: .5rem;
|
}
|
.today_hours .field {
|
margin: 0;
|
}
|
|
|
.jvb-integration-connection {
|
background: var(--base);
|
border: 2px solid var(--base-200);
|
border-radius: 8px;
|
padding: 1.5rem;
|
margin-bottom: 1.5rem;
|
position: relative;
|
transition: all 0.3s ease;
|
}
|
|
|
/* Integration Grid */
|
.jvb-integrations-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
gap: 1.5rem;
|
margin-top: 1rem;
|
}
|
|
/* Connection Header */
|
.jvb-connection-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 1.5rem;
|
padding-bottom: 1rem;
|
border-bottom: 2px solid #ddd;
|
}
|
|
.jvb-service-info h3.jvb-service-name {
|
font-weight: bold;
|
text-transform: uppercase;
|
color: var(--contrast);
|
}
|
|
.jvb-service-description {
|
margin: 0;
|
color: var(--contrast-50);
|
}
|
|
.jvb-connection-status {
|
text-align: right;
|
min-width: 150px;
|
}
|
|
.jvb-status-indicator {
|
font-size: 1.2rem;
|
margin-right: 0.5rem;
|
}
|
|
.jvb-connection-status.connected .jvb-status-indicator {
|
color: #22c55e;
|
}
|
|
.jvb-connection-status.disconnected .jvb-status-indicator {
|
color: #ef4444;
|
}
|
|
.jvb-status-text {
|
font-weight: bold;
|
font-size: var(--small);
|
text-transform: uppercase;
|
}
|
|
.jvb-last-tested {
|
display: block;
|
color: #888;
|
font-size: 0.75rem;
|
margin-top: 0.25rem;
|
}
|
|
/* Settings Section */
|
.jvb-settings-section,
|
.jvb-integration-settings {
|
margin-bottom: 1.5rem;
|
}
|
|
.jvb-integration-settings h4 {
|
margin: 0 0 1rem 0;
|
font-size: 1.1rem;
|
font-weight: bold;
|
color: var(--contrast);
|
text-transform: uppercase;
|
}
|
|
/* Form Fields */
|
.jvb-form-field {
|
margin-bottom: 1rem;
|
}
|
|
.jvb-form-field label {
|
display: block;
|
font-weight: bold;
|
margin-bottom: 0.5rem;
|
color: var(--contrast);
|
text-transform: uppercase;
|
}
|
|
.jvb-form-field input,
|
.jvb-form-field select {
|
width: 100%;
|
padding: 0.75rem;
|
border: 2px solid #ddd;
|
border-radius: 4px;
|
font-size: 0.9rem;
|
background: white;
|
transition: border-color 0.3s ease;
|
}
|
|
.jvb-form-field input:focus,
|
.jvb-form-field select:focus {
|
outline: none;
|
border-color: var(--action-50);
|
box-shadow: 0 0 0 3px rgba(var(--action-rgb), 0.1);
|
}
|
|
.jvb-form-field .description {
|
font-size: 0.8rem;
|
color: #666;
|
margin-top: 0.5rem;
|
line-height: 1.4;
|
}
|
|
/* Checkbox Labels */
|
.jvb-checkbox-label {
|
display: flex !important;
|
align-items: center;
|
gap: 0.5rem;
|
text-transform: none !important;
|
font-weight: normal !important;
|
cursor: pointer;
|
}
|
|
.jvb-checkbox-label input[type="checkbox"] {
|
width: auto !important;
|
margin: 0;
|
}
|
|
/* Settings Help */
|
.jvb-settings-help {
|
background: var(--base-200);
|
border: 1px solid var(--base);
|
border-radius: 4px;
|
padding: 1rem;
|
margin-top: 1rem;
|
}
|
|
.jvb-settings-help ol {
|
margin: 0.5rem 0 0 1.5rem;
|
padding: 0;
|
}
|
|
.jvb-settings-help a {
|
text-decoration: none;
|
font-weight: bold;
|
}
|
|
/* Connection Actions */
|
.jvb-connection-actions {
|
display: flex;
|
gap: 0.75rem;
|
flex-wrap: wrap;
|
border-top: 2px solid #ddd;
|
padding-top: 1rem;
|
align-items: center;
|
}
|
|
.jvb-connection-actions .button {
|
font-family: 'Courier New', monospace;
|
font-weight: bold;
|
text-transform: uppercase;
|
letter-spacing: 0.5px;
|
border-radius: 4px;
|
padding: 0.6rem 1.2rem;
|
font-size: 0.8rem;
|
cursor: pointer;
|
transition: all 0.2s ease;
|
}
|
|
.jvb-connect-button.button-primary {
|
background: var(--action-50);
|
border-color: var(--action-50);
|
color: white;
|
--o: .2;
|
box-shadow: 0 2px 4px var(--action-rgb);
|
}
|
|
.jvb-connect-button.button-primary:hover {
|
background: #e6007a;
|
border-color: #e6007a;
|
transform: translateY(-1px);
|
box-shadow: 0 4px 8px rgba(var(--action-rgb), 0.3);
|
}
|
|
.jvb-test-button {
|
background: white;
|
border-color: #22c55e;
|
color: #22c55e;
|
}
|
|
.jvb-test-button:hover {
|
background: #22c55e;
|
color: white;
|
}
|
|
.jvb-sync-button {
|
background: white;
|
border-color: var(--action-50);
|
color: var(--action-50);
|
}
|
|
.jvb-sync-button:hover {
|
background: var(--action-50);
|
color: white;
|
}
|
|
.jvb-disconnect-button {
|
color: #ef4444 !important;
|
border: none !important;
|
background: none !important;
|
text-decoration: underline;
|
margin-left: auto;
|
}
|
|
.jvb-disconnect-button:hover {
|
color: #dc2626 !important;
|
background: none !important;
|
}
|
|
/* Loading States */
|
.jvb-integration-form.loading .button {
|
opacity: 0.7;
|
pointer-events: none;
|
}
|
|
.jvb-integration-form.loading .jvb-connect-button::after {
|
content: ' (Saving...)';
|
}
|
|
.jvb-integration-form.loading .jvb-test-button::after {
|
content: ' (Testing...)';
|
}
|
|
/* Responsive Design */
|
@media (max-width: 768px) {
|
.jvb-integrations-grid {
|
grid-template-columns: 1fr;
|
}
|
|
.jvb-connection-header {
|
flex-direction: column;
|
gap: 1rem;
|
}
|
|
.jvb-connection-status {
|
text-align: left;
|
min-width: auto;
|
}
|
|
.jvb-connection-actions {
|
flex-direction: column;
|
}
|
|
.jvb-connection-actions .button {
|
width: 100%;
|
text-align: center;
|
}
|
|
.jvb-disconnect-button {
|
margin-left: 0 !important;
|
}
|
}
|
|
form .tabs {
|
position: sticky;
|
top: var(--offHeight);
|
left: 0;
|
right: 0;
|
z-index: 50;
|
background: var(--base);
|
}
|
.tabs.icon {
|
position: relative;
|
top: 0;
|
z-index: 0;
|
background: transparent;
|
margin: 0;
|
border: none;
|
}
|
|
nav.tabs {
|
height: fit-content;
|
}
|
|
.form-actions {
|
display: flex;
|
}
|
|
.spinner {
|
width: 12px;
|
height: 12px;
|
border: 2px solid transparent;
|
border-top: 2px solid var(--action-50);
|
border-radius: 50%;
|
}
|
|
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
}
|
|
/****************************************************************************
|
*
|
* LOCATION FIELD
|
*
|
****************************************************************************/
|
/* Location field container */
|
.field.location {
|
position: relative;
|
margin-bottom: 2rem;
|
}
|
|
|
.dropdown>ul>li {
|
cursor: pointer;
|
}
|
.dropdown>ul>li:hover {
|
background-color: var(--base-50);
|
}
|
/* Location search wrapper */
|
.location-search-wrapper {
|
position: relative;
|
width: 100%;
|
}
|
|
/* Places Autocomplete wrapper */
|
.places-autocomplete-wrapper {
|
width: 100%;
|
position: relative;
|
}
|
|
/* Google Places Autocomplete Element */
|
gmp-place-autocomplete {
|
font-family: var(--body);
|
height: fit-content;
|
|
/* Borders */
|
border: 1px solid transparent !important;
|
border-bottom: 2px solid var(--base-200, #ddd) !important;
|
border-radius: var(--innerRadius, 4px) !important;
|
|
/* Colors */
|
background-color: var(--base, #fff) !important;
|
color: var(--contrast, #333) !important;
|
|
/* Interaction */
|
outline: none !important;
|
transition: border-color 0.2s ease !important;
|
}
|
|
/* Focus state */
|
gmp-place-autocomplete:focus,
|
gmp-place-autocomplete:focus-within {
|
border-bottom-color: var(--action-0, #007cba) !important;
|
outline: none !important;
|
}
|
|
/* Location preview container */
|
.location-preview {
|
margin-top: 1rem;
|
}
|
|
/* Location map */
|
.location-map {
|
width: 100%;
|
height: 200px;
|
border: 1px solid var(--base-200, #ddd);
|
border-radius: var(--innerRadius, 4px);
|
overflow: hidden;
|
background-color: var(--base-100, #f5f5f5);
|
position: relative;
|
}
|
|
/* Loading state for map */
|
.location-map:empty::before {
|
content: "Loading map...";
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
color: var(--base-400, #999);
|
font-size: var(--small, 14px);
|
}
|
|
/* Location links */
|
.location-links {
|
margin-top: 1rem;
|
display: flex;
|
gap: 1rem;
|
flex-wrap: wrap;
|
}
|
|
.location-links a {
|
display: inline-flex;
|
align-items: center;
|
gap: 0.5rem;
|
padding: 0.75rem 1.25rem;
|
background-color: var(--base-100, #f5f5f5);
|
border: 1px solid var(--base-200, #ddd);
|
border-radius: var(--innerRadius, 4px);
|
text-decoration: none;
|
color: var(--contrast, #333);
|
font-size: var(--small, 14px);
|
transition: all 0.2s ease;
|
}
|
|
.location-links a:hover {
|
background-color: var(--base-200, #e5e5e5);
|
border-color: var(--base-300, #ccc);
|
transform: translateY(-1px);
|
}
|
|
.location-links a svg {
|
width: 16px;
|
height: 16px;
|
}
|
|
/* Google Places dropdown customization */
|
.pac-container {
|
z-index: 9999 !important;
|
border-radius: var(--innerRadius, 4px) !important;
|
border: 1px solid var(--base-200, #ddd) !important;
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
margin-top: 4px !important;
|
font-family: inherit !important;
|
}
|
|
.pac-item {
|
padding: 0.75rem 1rem !important;
|
border-bottom: 1px solid var(--base-100, #f5f5f5) !important;
|
cursor: pointer !important;
|
font-size: inherit !important;
|
}
|
|
.pac-item:last-child {
|
border-bottom: none !important;
|
}
|
|
.pac-item:hover,
|
.pac-item-selected {
|
background-color: var(--base-100, #f5f5f5) !important;
|
}
|
|
/* Map info window */
|
.map-info-window {
|
padding: 0.5rem;
|
font-size: var(--small, 14px);
|
line-height: 1.4;
|
max-width: 200px;
|
}
|
|
/* Responsive adjustments */
|
@media (max-width: 768px) {
|
.location-links {
|
flex-direction: column;
|
}
|
|
.location-links a {
|
width: 100%;
|
justify-content: center;
|
}
|
|
.location-map {
|
height: 150px;
|
}
|
}
|
|
/* Admin-specific styles */
|
.wp-admin .field.location {
|
max-width: 600px;
|
}
|
|
.wp-admin .location-search-wrapper {
|
background: #fff;
|
padding: 1rem;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
}
|
|
/***
|
HOURS SET
|
*/
|
|
.group-fields.hours .group-fields,
|
.group-fields.hours .group-fields .field {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.group-fields.hours .group-fields {
|
padding: 1rem .5rem;
|
gap: 1rem;
|
}
|
.group-fields.hours .group-fields:nth-of-type(2n+1) {
|
background-color: var(--base);
|
}
|
.group-fields.hours .group-fields .field {
|
margin: 0;
|
}
|
|
.group-fields.hours .true-false {
|
flex: 1;
|
}
|
.group-fields.hours .time {
|
position: relative;
|
}
|
.group-fields.hours .time label {
|
margin: 0;
|
font-size: var(--small);
|
position: absolute;
|
top: -1rem;
|
left: 0;
|
color: var(--contrast-200);
|
}
|
|
dialog .post_thumbnail {
|
margin: 0;
|
}
|
dialog .post_thumbnail .item-grid img {
|
aspect-ratio: 20/9;
|
}
|
dialog .post_title {
|
margin-top: 1rem;
|
}
|
dialog nav.tabs {
|
top: 0;
|
}
|
|
dialog .tabs h2 {
|
font-size: var(--small);
|
font-weight: 300;
|
}
|
|
dialog .tabs button {
|
padding: .25rem .75rem;
|
}
|
|
.field:has([name=status]) .field-group {
|
align-items: center;
|
}
|
.field:has([name=status]) .field-group span {
|
margin-right: auto;
|
}
|
|
|
[data-type=single] [for=select-item] {
|
display: none;
|
}
|
form.table img {
|
max-height: 8rem;
|
}
|
|
.multi-select {
|
width: 100%;
|
}
|
details.multi-select summary {
|
display: flex;
|
justify-content: flex-start;
|
}
|
|
.grid-view .item {
|
border-radius: var(--outerRadius);
|
}
|
.grid-view img {
|
border-radius: var(--innerRadius);
|
}
|
|
.item-grid:has(.select-item:checked) .item {
|
padding: 2rem;
|
}
|
.item-grid .item:has(.select-item:checked) {
|
padding: .5rem;
|
background-color: var(--action-0);
|
}
|
|
.grid-view .item > input[type=checkbox]:not(.label-button) + label {
|
padding-left: 0;
|
margin: 0;
|
}
|
.grid-view .item > input[type=checkbox] + label::before {
|
transform: unset;
|
top: .5rem;
|
left: .5rem;
|
}
|
.grid-view .item > input[type=checkbox] + label::after {
|
top: .5rem;
|
left: .75rem;
|
transform: translateY(20%) rotate(45deg);
|
}
|
