//: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(--btn); // padding: 0; // background-color: rgb(var(--base)); // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); //} //main>* { // max-width: min(768px, 90vw)!important; // margin: 0 auto!important; //} //main h1 { // margin: 0!important; // font-size: var(--txt-large); //} //main h1 + p + h2 { // font-size: var(--txt-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(--btn); // max-width:100vw; // padding: 0 .5rem; //} //.dashboard-nav ul { // height: var(--btn); // overflow-x: auto; //} //.dashboard-nav li + li:before { // display: none!important; //} //.dashboard-nav a { // height: var(--btn); // min-width: var(--btn); // padding: 0 .75rem; // color: rgb(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: rgb(var(--action-0))!important; // color: var(--action-contrast)!important; //} //.dashboard-nav .current a { // background-color: rgb(var(--base-100))!important; // color: rgb(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: rgba(var(--base),var(--op-4)); // 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: rgb(var(--base)); // padding: 2rem; // border-radius: 8px; // text-align: center; // max-width: 90%; // width: 400px; //} // //.upload-spinner { // width: 50px; // height: 50px; // border: 5px solid rgb(var(--base-200)); // border-top: 5px solid rgb(var(--action-0)); // border-radius: 50%; // margin: 0 auto 1rem; // animation: spin 1s linear infinite; //} // //.upload-status h3 { // margin: 0 0 .5rem; // color: rgb(var(--contrast)); //} // //.upload-message { // margin: 0; // color: rgb(var(--contrast-100)); // font-size: var(--txt-x-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: rgb(var(--base-100)); // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); // 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: rgb(var(--contrast)); //} //.replace:not(:has(.form-section.active)) .form-sections li:first-of-type a, //.current a { // background-color: rgb(var(--base-200)); // color: rgb(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: rgb(var(--contrast-200)); // background-color: rgb(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(--txt-x-small); // background-color: rgb(var(--action-0)); // color: var(--action-contrast); // padding: .25rem .5rem; // border-radius: 4px; // white-space: nowrap; // visibility: hidden; // transition: all var(--trans-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 rgb(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 rgb(var(--action-0)); // } // .save-popup.show { // left: calc(100% + .5rem); // } //} // //.autosaving span.save, //.autosaving button[type=submit] { // border-color: rgb(var(--base-200)); // border-top-color: rgb(var(--action-0)); // border-bottom-color: rgb(var(--action-50)); // border-radius: 50%; // color: rgb(var(--contrast-200)); // transition: color .25s var(--trans-t) var(--trans-fn); // 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: rgb(var(--action-0)); // background-color: rgb(var(--base)); // border-radius: 4px; // padding: .25rem .5rem; // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle); //} //.field { // margin: 3rem .5rem; //} //.field:has([required]) label::after { // content: 'required'; // background-image: url('data:image/svg+xml,'); // 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: rgb(var(--base-100)); // border: 1px solid rgb(var(--contrast-200)); // border-radius: .25rem; // cursor: pointer; // font-size: .875rem; //} //.add-item-btn .icon { // --w: 1.5em; //} // //.add-item-btn:hover { // background: rgb(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 rgb(var(--base-200)); // flex-wrap: wrap; //} //.tabs.parent { // max-width: 100vw; // background-color: rgb(var(--base)); // padding: .5rem; // width: 100vw; // position: relative; // left: -2.1rem; // margin: 1rem 0; //} //.tab-content h2 { // font-size: var(--txt-large); // margin: 0!important; //} //.tab-content .tab-navigation, //.tab-content button[type=submit] { // display: inline-flex; // width: 48%; // background-color: rgb(var(--action-200)); // color: rgb(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: rgb(var(--base-200)); //} //.tabs > button::after { // content: ''; // position: absolute; // bottom: -2px; // left: 0; // width: 0; // height: 3px; // background-color: rgb(var(--action-50)); // transition: width .3s; //} //.tabs > button.active::after { // width: 100%; //} // //.tabs > button.add-item-btn { // margin-left: auto; // background-color: rgb(var(--action-50)); // border-radius: 4px; // padding: .5em; // font-weight: normal; // border: 1px solid rgb(var(--action-50)); //} //.tabs > button.add-item-btn:focus, //.tabs > button.add-item-btn:hover { // background-color: rgb(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(--txt-medium); // margin: 0!important; //} //.item.news summary .image { // width: 5rem; // background-color: rgb(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(--content); //} //details .no-items { // text-align: center; // font-style: italic; // background-color: rgb(var(--base-50)); // padding: var(--p-outer); // border-radius: var(--radius); //} // //.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 rgb(var(--base-200)); // border-radius: 4px; // font-size: .875rem; // transition: border-color var(--trans-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: rgb(var(--action-0)); // color: rgb(var(--action-0)); //} //details.type-filters .order-direction { // justify-content: flex-end; //} // ///** Generalized Modal **/ // ///* Grid */ //.create-item { // left: auto!important; // right: 1rem; // bottom: calc(var(--btn) + 1rem)!important; //} //body:has(.group-display:not([hidden])) button.create-item{ // display: none; //} //.uploader .groups, //.item-grid { // --padding: 0; // padding: var(--padding); // transition: padding var(--trans-base); //} //.uploader .groups, //.item-grid:not(.list-view) { // display: grid; // grid-template-columns: repeat(2, 50%); // 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(--radius); // background-color: rgb(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; // width: 3em; // height: 3em; // display: flex; // justify-content: center; // align-items: center; // top: .125rem; // padding: 0!important; // border-radius: var(--radius); // background-color: rgba(var(--base),var(--op-3)); // color: rgb(var(--base-200)); //} //.item-grid:not(.list-view) button.favourite:hover, //.item-grid:not(.list-view) .item-select label:hover { // background-color: rgba(var(--base),var(--op-6)); // color: rgb(var(--contrast)); //} //.item-grid:not(.list-view) .item-select label::before { // border-color: rgb(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: rgb(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: rgb(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: rgb(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: rgb(var(--base)); //} // //.item-grid.list-view .item-select label:hover::before { // border-color: rgb(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(--txt-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: rgb(var(--action-50)); //} //.reached textarea, //.reached input { // border: 2px solid rgb(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: rgb(var(--action-50)); // box-shadow:rgba(var(--base),var(--op-45)) var(--shdw); // z-index: 5; //} //.selection-container #save-changes:hover { // background-color: rgb(var(--base)); // border: 1px solid rgb(var(--action-50)); // color: 1px solid rgb(var(--action-50)); //} // //.group { // padding: 1rem .66rem; // background-color: rgb(var(--base-50)); // border-radius: var(--radius-outer); //} //.group.empty { // aspect-ratio: 1; // display: flex; // flex-direction: column; // align-items: center; // justify-content: center; // border: 4px dashed rgb(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(--radius); // background-color: rgb(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: rgb(var(--action-50)); // color: rgb(var(--contrast)); //} //.group .item-actions :checked + label:hover { // border: 1px solid rgb(var(--action-50)); // background-color: transparent; // color: rgb(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 rgb(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 rgb(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: rgb(var(--base-100)); // border-radius: var(--radius-outer); //} //.gallery-preview .preview-item { // padding: .5rem; // background-color: rgb(var(--base)); // border-radius: var(--radius); //} // //.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; //} //table tr:nth-of-type(even){ // background-color: rgb(var(--base-200)); //} //thead th { // width: 50%; //} //thead tr, //tfoot tr { // background-color: rgb(var(--base)); // text-transform: uppercase; // padding: .5rem 0; // line-height: 2; // font-weight: normal; //} //tfoot th { // vertical-align: middle; //} //tfoot th:first-of-type { // text-align: right; //} //@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: rgb(var(--base-50)); // padding: 1rem; // border-radius: var(--radius); //} //.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(--txt-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(--txt-x-small); //} //.meta-stats { // display: flex; // justify-content: space-between; // font-style: italic; //} // ///** Repeater **/ //.add-repeater-row { // margin-left: auto; // border: 1px solid rgb(var(--contrast-200)); //} // ///** Image **/ // //.image-display { // max-height: 0; // overflow: hidden; // transform: scaleY(0); // transition: max-height var(--trans-t) var(--trans-fn); // transition-property: max-height, transform; //} //.image-display.has-image { // max-height: 100%; // transform: scaleY(1); // transition: max-height var(--trans-t) var(--trans-fn); // transition-property: max-height, transform; //} //.file-upload-container { // margin-top: 1rem; //} // //.file-upload-wrapper { // border: 2px dashed rgb(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(--txt-large); //} // //.file-upload-wrapper:hover, //.dragover { // background: var(--action-rgb-subtle-hover); // border-color: rgb(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: rgb(var(--contrast)); // margin: 0; // font-family: var(--body); //} // //.file-upload-text strong { // color: rgb(var(--action-0)); // text-decoration: underline; //} // ///* Error state */ //.file-error { // color: rgb(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(--trans-t) var(--trans-fn), transform var(--trans-t) var(--trans-fn); // 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: rgb(var(--base)); //} //.item { // --padding: 0; // height: fit-content; // padding: var(--padding); // max-width: calc(100% - (var(--padding) * 2)); // transition: padding var(--trans-base); //} //.selecting .item { // opacity: .666; //} //.selecting .item:has(.select-checkbox:checked) { // --padding: .5rem; // opacity: 1; // background-color: rgb(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: rgb(var(--base)); // color: rgb(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 rgb(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(--trans-t) var(--trans-fn); // 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(--trans-t) var(--trans-fn); // 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(--txt-x-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: rgb(var(--base)); // padding: .5rem; // border-radius: var(--radius-outer); //} //.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(--radius); //} // //dialog .term-list { // display: block; //} //.pagination-info { // position: sticky; // background-color: rgba(var(--base),var(--op-6)); // 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: rgb(var(--base)); // border-top-left-radius: var(--radius); // border-top-right-radius: var(--radius); // border-bottom: 4px solid rgb(var(--base-50)); //} //.ql-toolbar .ql-formats { // display: flex; // gap: .25rem; //} //.editor-container .ql-container { // --padding: 1rem; // background-color: rgb(var(--base)); // border-bottom-left-radius: var(--radius); // border-bottom-right-radius: var(--radius); // 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: rgb(var(--base-100)); // border: 1px solid rgb(var(--base)); // box-shadow: 0px 0px 5px rgba(var(--base),var(--op-6)); // color: rgb(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: rgb(var(--base)); // border-radius: var(--radius-outer); // 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: rgb(var(--base-100)); // border-color: rgb(var(--contrast-200)); // color: rgb(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; // display: flex; //} //.item-grid .item-actions button { // width: 2em; // height: 2em; // border-radius: var(--radius); // background-color: rgba(var(--base),var(--op-3)); // display: flex; // justify-content: center; // align-items: center; //} //.item-grid .item-actions button:focus, //.item-grid .item-actions button:hover { // background-color: rgba(var(--base),var(--op-6)); // color: rgb(var(--action-0)); //} // // // //@media (max-width: 768px){ // .replace { // margin-top: 4rem!important; // } // .list-header { // flex-wrap: wrap; // } // .list-card h3 { // font-size: var(--txt-medium); // } // .item-grid.list-view .item { // align-items: center; // } // .item-grid.list-view img { // width: 80px; // height: 80px; // aspect-ratio: 1; // object-fit: cover; // } //} // //@media (min-width: 768px){ // .item-grid:not(.list-view) { // grid-template-columns: repeat(3, 1fr); // } //} // //.term-divider { // position: relative; // text-align: center; // margin: 1rem 0; // border-bottom: 1px solid rgb(var(--base-200)); //} // //.term-divider span { // background: rgb(var(--base)); // padding: 0 1rem; // color: rgb(var(--contrast)); // font-size: .9rem; // position: relative; // top: .5em; //} // //.common-term { // background: rgb(var(--base-50)); // border-radius: var(--radius); //} // //.loading-indicator { // display: flex; // align-items: center; // justify-content: center; // gap: .5rem; // padding: 1rem; // color: rgb(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: rgb(var(--contrast-100)); // border-top: 1px solid rgb(var(--base-100)); //} // //@keyframes spin { // from { transform: rotate(0deg); } // to { transform: rotate(360deg); } //} // // //.term-breadcrumb { // margin-bottom: 1rem; // padding: .5rem; // background: rgb(var(--base-50)); // border-radius: 4px; //} // //.back-to-parent { // display: flex; // align-items: center; // gap: .5rem; // border: none; // background: none; // color: rgb(var(--contrast)); // cursor: pointer; // padding: .5rem; // border-radius: 4px; // font-size: var(--txt-x-small); //} // //.back-to-parent:hover { // background: rgb(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: rgb(var(--contrast)); // display: flex; // align-items: center; // justify-content: center; // margin-left: auto; // border-radius: 4px; //} // //.toggle-children:hover { // background: rgb(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 rgb(var(--base-100)); // border-top-color: rgb(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: rgb(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: rgb(var(--contrast)); // font-size: var(--txt-x-small); //} // //.term-breadcrumb button:hover { // background: rgb(var(--base-100)); //} // //.path-separator { // color: rgb(var(--contrast-50)); //} // //.path-level { // white-space: nowrap; //} // //.create-new-term { // margin-top: 2rem; // padding-top: 1rem; // border-top: 1px solid rgb(var(--base-100)); //} //.create-new-term button { // width: 100%; //} // //.suggestion-prompt { // font-size: var(--txt-x-small); // color: rgb(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 rgb(var(--base-100)); // border-radius: 4px; // background: rgb(var(--base)); // color: rgb(var(--contrast)); //} // //.name-row input:focus { // border-color: rgb(var(--action-0)); // outline: none; //} // //.parent-row { // font-size: var(--txt-x-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: rgb(var(--action-0)); // color: rgb(var(--base)); // cursor: pointer; // font-size: var(--txt-x-small); // transition: all .2s ease; //} // //.create-term-form button:hover { // background: rgb(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: rgb(var(--base)); // border: 2px solid rgb(var(--action-0)); // border-radius: 4px; // padding: 1rem; // margin-top: -2px; // // /* Animation */ // transform-origin: top; // transition: all .2s var(--trans-fn); //} // //.create-term-form:not([hidden]) { // animation: slideDown .2s var(--trans-fn); //} // //.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: rgb(var(--action-50)); //} //.actions .send-invites:hover, //.actions .send-invites:focus { // background-color: rgb(var(--base)); // border-color: rgb(var(--action-50)); //} // //.dashboard .queue-status-panel { // bottom: calc(var(--btn) + 1rem); //} //.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(--txt-x-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 rgb(var(--base-200)); // border-radius: 8px; // background: rgb(var(--base-50)); // transition: all .3s ease; //} //.upload-item:hover { // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); // transform: translateY(-2px); //} //.upload-item[data-status=processing] { // border-color: rgb(var(--action-200)); // background: rgb(var(--action-100)); //} //.upload-item[data-status=cached] { // border-color: rgb(var(--secondary-0)); // background: rgb(var(--secondary-200)); //} //.upload-item[data-status=uploading] { // border-color: rgb(var(--contrast)); // background-color: rgb(var(--base-50)); //} //.upload-item .preview { // position: relative; // aspect-ratio: 1; //} //.upload-item .status { // position: absolute; // bottom: .25rem; // right: .25rem; // background-color: rgba(var(--base),var(--op-3)); // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); // border-radius: 50%; //} //.upload-item img { // width: 100%; // height: 100%; // object-fit: cover; // 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: rgba(var(--base),var(--op-6)); // 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: calc(var(--btn) + 1rem); // right: 1rem; // background-color: rgb(var(--base)); // height: var(--btn); // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); //} ///*** UPLOADER GROUPS ***/ //.group-display { // display: grid; // grid-template-columns: 1fr 250px; // gap: 2rem; //} //.preview-actions { // position: sticky; // padding: .5rem; // top: calc(var(--btn) + .25rem); // left: 0; // background-color: rgb(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: rgb(var(--base)); // border: 1px solid rgb(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(--txt-x-small); // gap: .5rem; // text-transform: uppercase; //} //.upload-item:has([type=checkbox]:checked) .preview { // padding: 1rem; // background-color: rgb(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 rgb(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 rgb(var(--action-200)); // border-radius: var(--radius); // 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 rgb(var(--action-200)); // border-radius: var(--radius); // 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: rgb(var(--action-0)); // background-color: var(--overlay-action-light); // color: rgb(var(--action-50)); //} // //.upload-group { // background-color: rgb(var(--base-100)); // border-radius: var(--radius); // border: 1px solid rgb(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(--radius); // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); // padding: 1rem; // background: rgb(var(--base-200)); // border: 1px solid rgb(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(--trans-base); // transition-property: padding, background-color; // cursor: pointer; //} //label.restore-item:has(input:checked) { // filter: grayscale(0); // opacity: 1; // padding: 1rem; // background-color: rgb(var(--secondary-200)); //} // //.upload-item .featured + label { // width: 2em; // height: 2em; // border-radius: var(--radius); // background-color: rgba(var(--base),var(--op-3)); // 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: rgb(var(--contrast));*/ ///* font-size: .9rem;*/ ///*}*/ // ///*.upload-summary button {*/ ///* padding: .5rem 1rem;*/ ///* border: 1px solid var(--border);*/ ///* border-radius: 4px;*/ ///* background: var(--surface);*/ ///* color: rgb(var(--contrast));*/ ///* cursor: pointer;*/ ///* transition: all .3s ease;*/ ///* font-size: .875rem;*/ ///* margin-left: .5rem;*/ ///*}*/ // ///*.upload-summary button:hover {*/ ///* background: rgb(var(--action-0));*/ ///* color: var(--action-contrast);*/ ///* border-color: rgb(var(--action-0));*/ ///*}*/ // ///*!* Upload Drop Zones *!*/ ///*.file-upload-container {*/ ///* position: relative;*/ ///* padding: .25rem;*/ ///* transition: border-color var(--trans-base),*/ ///* background-color var(--trans-base),*/ ///* padding var(--trans-base);*/ ///*}*/ // ///*.file-upload-container.dragover {*/ ///* background-color: var(--action-rgb-subtle);*/ ///* border-color: rgb(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: rgb(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: rgb(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: rgb(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 rgb(var(--action-0));*/ ///* outline-offset: 2px;*/ ///*}*/ // ///*.upload .actions button:focus {*/ ///* outline: 2px solid rgb(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: rgb(var(--action-50));*/ ///* border-radius: var(--radius);*/ ///* color: rgb(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(--radius);*/ ///* 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: rgb(var(--base-100));*/ ///* border-radius: var(--radius-outer);*/ ///* margin-bottom: 1rem;*/ ///*}*/ // ///*!* Upload Item Enhancements *!*/ ///*.upload-item {*/ ///* position: relative;*/ ///* background: rgb(var(--base));*/ ///* border-radius: var(--radius);*/ ///* overflow: hidden;*/ ///* cursor: pointer;*/ ///* transition: transform .2s ease, box-shadow .2s ease;*/ ///*}*/ // ///*.upload-item:hover {*/ ///* transform: translateY(-2px);*/ ///* box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);*/ ///*}*/ // ///*.upload-item[draggable="true"] {*/ ///* cursor: grab;*/ ///*}*/ // ///*.upload-item.dragging {*/ ///* cursor: grabbing;*/ ///* opacity: .5;*/ ///* transform: rotate(5deg) scale(.95);*/ ///*}*/ // ///*.upload-item.selected {*/ ///* border: 2px solid rgb(var(--action-50));*/ ///* background: rgba(255, 0, 128, .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: rgb(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: rgb(var(--base-50));*/ ///* border-radius: var(--radius-outer);*/ ///* padding: 1rem;*/ ///* margin-bottom: 1rem;*/ ///* border: 2px solid transparent;*/ ///* transition: border-color .2s ease, background-color .2s ease;*/ ///*}*/ // ///*.upload-group.dragover {*/ ///* border-color: rgb(var(--action-50));*/ ///* background: rgba(255, 0, 128, .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: rgb(var(--action-50));*/ ///*}*/ // ///*.group-count {*/ ///* font-size: .85rem;*/ ///* color: var(--text-muted);*/ ///*}*/ // ///*.group-actions {*/ ///* display: flex;*/ ///* gap: .5rem;*/ ///*}*/ // ///*.group-actions button {*/ ///* background: rgb(var(--base));*/ ///* border: 1px solid rgb(var(--base-200));*/ ///* border-radius: var(--radius);*/ ///* padding: .5rem;*/ ///* cursor: pointer;*/ ///* transition: all .2s ease;*/ ///* display: flex;*/ ///* align-items: center;*/ ///* justify-content: center;*/ ///*}*/ // ///*.group-actions button:hover {*/ ///* background: rgb(var(--action-50));*/ ///* color: rgb(var(--contrast));*/ ///* border-color: rgb(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(--radius);*/ ///* 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: rgb(var(--action-50));*/ ///* background: rgba(255, 0, 128, .05);*/ ///* color: rgb(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(--radius);*/ ///* overflow: hidden;*/ ///* background: rgb(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 rgb(var(--base-200));*/ ///* border-radius: var(--radius);*/ ///* 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: rgb(var(--action-50));*/ ///* background: rgba(255, 0, 128, .05);*/ ///* color: rgb(var(--action-50));*/ ///*}*/ // ///*!* Sidebar *!*/ ///*.sidebar {*/ ///* background: rgb(var(--base-50));*/ ///* border-radius: var(--radius-outer);*/ ///* 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: rgb(var(--action-50));*/ ///* color: rgb(var(--contrast));*/ ///* border: none;*/ ///* border-radius: var(--radius);*/ ///* 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(255, 0, 128, .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: rgb(var(--base-100));*/ ///* border-radius: var(--radius-outer);*/ ///* 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(--radius);*/ ///*}*/ // ///*!* File Upload Container *!*/ ///*.file-upload-container.dragover {*/ ///* border-color: rgb(var(--action-50));*/ ///* background: rgba(255, 0, 128, .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 rgb(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(--radius-outer);*/ ///* 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(--radius);*/ ///* 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(--radius);*/ ///* 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(--radius);*/ ///* 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(--radius-outer);*/ ///* 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: rgb(var(--base));*/ ///* border-radius: var(--radius-outer);*/ ///*}*/ // ///*.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 rgb(var(--base-200));*/ ///*}*/ // ///*.confirm-start-over {*/ ///* background: #dc3545;*/ ///* color: white;*/ ///* border: none;*/ ///* border-radius: var(--radius);*/ ///* padding: .75rem 1.5rem;*/ ///* font-weight: 500;*/ ///* cursor: pointer;*/ ///* transition: all .2s ease;*/ ///*}*/ // ///*.confirm-start-over:hover {*/ ///* background: #c82333;*/ ///*}*/ // ///*.cancel-start-over {*/ ///* background: rgb(var(--base-100));*/ ///* color: var(--text);*/ ///* border: 1px solid var(--base-300);*/ ///* border-radius: var(--radius);*/ ///* padding: .75rem 1.5rem;*/ ///* cursor: pointer;*/ ///* transition: all .2s ease;*/ ///*}*/ // ///*.cancel-start-over:hover {*/ ///* background: rgb(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(--btn) - var(--btn)); // position: fixed; // top: var(--btn); // bottom: var(--btn); // 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: rgb(var(--base)); // border-bottom: 2px solid rgb(var(--action-0)); // } // // /* Preview actions - sticky at top */ // .preview-actions { // position: sticky; // top: 0; // z-index: 10; // background: rgb(var(--base)); // border-bottom: 1px solid rgb(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: rgb(var(--base-200)); // border-top: 3px solid rgb(var(--action-50)); // } // // /* Groups header - sticky */ // .sidebar .header { // border-bottom: 1px solid rgb(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: rgb(var(--action-0)); // background: var(--action-rgb-subtle-hover); // transform: scale(1.02); // } // // /* Upload button - fixed at bottom */ // .submit-uploads { // position: fixed !important; // bottom: calc(var(--btn) + .5rem); // right: .5rem; // z-index: 20; // height: 3rem; // font-size: 1.1rem; // font-weight: 600; // box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); // border-radius: var(--radius-outer); // } // // .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(--radius); // overflow: hidden; // background: rgb(var(--base)); // border: 1px solid rgb(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(--radius); // } // // /* 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(--radius); // } // // /* Enhanced group styling for mobile */ // .upload-group { // background: rgb(var(--base-100)); // border-radius: var(--radius); // border: 1px solid rgb(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 rgb(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(--radius); // } // // .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 rgb(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(--radius); // } // // /* 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: rgb(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 rgb(var(--action-0)); // background-color: var(--action-rgb-subtle); // } // // .upload-item.selected::after { // content: '✓'; // position: absolute; // top: .5rem; // right: .5rem; // background: rgb(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: rgb(var(--base-100)); // border-radius: var(--radius); // 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(--radius) var(--radius) 0 0; // border-bottom: 1px solid rgb(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(--radius); // border: 2px solid rgb(var(--base-200)); // transition: border-color .2s ease; // } // // .upload-meta input:focus, // .upload-meta textarea:focus { // border-color: rgb(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: 3rem; //} //.today_hours .field { // margin: 0; //} // // //.jvb-integration-connection { // background: var(--bg-white, #EFEFEF); // border: 2px solid #ddd; // border-radius: 8px; // padding: 1.5rem; // margin-bottom: 1.5rem; // position: relative; // transition: all 0.3s ease; //} // //.jvb-integration-connection.connected { // border-color: #22c55e; // box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1); //} // //.jvb-integration-connection.disconnected { // border-color: #ef4444; // box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1); //} // ///* 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 { // margin: 0 0 0.25rem 0; // font-size: 1.4rem; // font-weight: bold; // text-transform: uppercase; // letter-spacing: 1px; // color: var(--bg-black, #1B1B1B); // font-family: 'Courier New', monospace; //} // //.jvb-service-description { // margin: 0; // color: #666; // font-size: 0.9rem; // line-height: 1.4; //} // //.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: 0.9rem; // text-transform: uppercase; // letter-spacing: 0.5px; // font-family: 'Courier New', monospace; //} // //.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(--bg-black, #1B1B1B); // font-family: 'Courier New', monospace; // text-transform: uppercase; // letter-spacing: 0.5px; //} // ///* Form Fields */ //.jvb-form-field { // margin-bottom: 1rem; //} // //.jvb-form-field label { // display: block; // font-weight: bold; // margin-bottom: 0.5rem; // color: var(--bg-black, #1B1B1B); // font-family: 'Courier New', monospace; // text-transform: uppercase; // font-size: 0.85rem; // letter-spacing: 0.5px; //} // //.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-color, #FF0080); // box-shadow: 0 0 0 3px rgba(255, 0, 128, 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; //} // ///* Advanced Settings */ //.jvb-advanced-settings { // margin-top: 1rem; // padding: 1rem; // background: #f9f9f9; // border-radius: 4px; // border: 1px solid #e5e5e5; //} // //.jvb-advanced-settings summary { // font-weight: bold; // cursor: pointer; // margin-bottom: 1rem; // color: var(--action-color, #FF0080); // font-family: 'Courier New', monospace; // text-transform: uppercase; // font-size: 0.85rem; // letter-spacing: 0.5px; //} // ///* Settings Help */ //.jvb-settings-help { // background: #f0f8ff; // border: 1px solid #b3d9ff; // 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 { // color: var(--action-color, #FF0080); // text-decoration: none; // font-weight: bold; //} // //.jvb-settings-help a:hover { // text-decoration: underline; //} // ///* 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-color, #FF0080); // border-color: var(--action-color, #FF0080); // color: white; // box-shadow: 0 2px 4px rgba(255, 0, 128, 0.2); //} // //.jvb-connect-button.button-primary:hover { // background: #e6007a; // border-color: #e6007a; // transform: translateY(-1px); // box-shadow: 0 4px 8px rgba(255, 0, 128, 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-color, #FF0080); // color: var(--action-color, #FF0080); //} // //.jvb-sync-button:hover { // background: var(--action-color, #FF0080); // 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: calc(var(--btn) + 2rem); // left: 0; // right: 0; // z-index: 50; // background: rgb(var(--base)); //} // //.form-actions { // display: flex; //} // //.spinner { // width: 12px; // height: 12px; // border: 2px solid transparent; // border-top: 2px solid rgb(var(--action-50)); // border-radius: 50%; // animation: spin 1s linear infinite; //} // //@keyframes spin { // 0% { transform: rotate(0deg); } // 100% { transform: rotate(360deg); } //}