//: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: var(--base);
|
// box-shadow: rgba(var(--base-rgb),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: var(--contrast)!important;
|
//}
|
//.dashboard-nav a .icon {
|
// margin: 0;
|
//}
|
//.dashboard-nav a span {
|
// display: none;
|
//}
|
//.dashboard-nav .current a:hover,
|
//.dashboard-nav a:hover {
|
// background-color: var(--action-0)!important;
|
// color: var(--action-contrast)!important;
|
//}
|
//.dashboard-nav .current a {
|
// background-color: var(--base-100)!important;
|
// color: var(--contrast)!important;
|
//}
|
//.dashboard-nav .current a span {
|
// display: block;
|
//}
|
//
|
//
|
//
|
///* Loading states */
|
//main {
|
// opacity: 1;
|
// transition: opacity .3s ease-in-out;
|
// padding-bottom: 7rem;
|
// min-height: calc(100vh - 12rem);
|
//}
|
//
|
//main.transitioning {
|
// opacity: 0;
|
//}
|
//.loading {
|
// opacity: .7;
|
//}
|
//
|
//
|
///*Upload overlay*/
|
//.loading-overlay {
|
// position: fixed;
|
// top: 0;
|
// left: 0;
|
// right: 0;
|
// bottom: 0;
|
// background-color: rgba(var(--base-rgb),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: var(--base);
|
// padding: 2rem;
|
// border-radius: 8px;
|
// text-align: center;
|
// max-width: 90%;
|
// width: 400px;
|
//}
|
//
|
//.upload-spinner {
|
// width: 50px;
|
// height: 50px;
|
// border: 5px solid var(--base-200);
|
// border-top: 5px solid var(--action-0);
|
// border-radius: 50%;
|
// margin: 0 auto 1rem;
|
// animation: spin 1s linear infinite;
|
//}
|
//
|
//.upload-status h3 {
|
// margin: 0 0 .5rem;
|
// color: var(--contrast);
|
//}
|
//
|
//.upload-message {
|
// margin: 0;
|
// color: var(--contrast-100);
|
// font-size: var(--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: var(--base-100);
|
// box-shadow: rgba(var(--base-rgb),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: var(--contrast);
|
//}
|
//.replace:not(:has(.form-section.active)) .form-sections li:first-of-type a,
|
//.current a {
|
// background-color: var(--base-200);
|
// color: var(--contrast);
|
//}
|
//.form-sections .icon {
|
// margin: 0;
|
//}
|
//@media (min-width: 768px){
|
// .form-sections ul {
|
// flex-wrap: nowrap;
|
// }
|
// .form-sections li {
|
// width: 100%;
|
// }
|
//}
|
//
|
//.submit-container {
|
// position: fixed;
|
// z-index: 20;
|
//}
|
//.submit-container button {
|
// padding: 0;
|
// width: 3rem;
|
// height: 3rem;
|
// color: var(--contrast-200);
|
// background-color: var(--base-200);
|
// justify-content: center;
|
// border: 3px solid transparent;
|
//}
|
//.submit-container .save-popup {
|
// position: absolute;
|
// z-index: -1;
|
// top: calc(50% - (1.875rem / 2));
|
// font-size: var(--txt-x-small);
|
// background-color: 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 var(--action-0);
|
// }
|
// .save-popup.show {
|
// right: calc(100% + .5rem);
|
// }
|
//}
|
//@media (min-width: 768px){
|
// .submit-container {
|
// bottom: 6rem;
|
// left: .5rem;
|
// }
|
// .save-popup {
|
// left: 0;
|
// }
|
// .save-popup:before{
|
// left: -.25rem;
|
// border-right: .5rem solid var(--action-0);
|
// }
|
// .save-popup.show {
|
// left: calc(100% + .5rem);
|
// }
|
//}
|
//
|
//.autosaving span.save,
|
//.autosaving button[type=submit] {
|
// border-color: var(--base-200);
|
// border-top-color: var(--action-0);
|
// border-bottom-color: var(--action-50);
|
// border-radius: 50%;
|
// color: var(--contrast-200);
|
// transition: color .25s var(--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: var(--action-0);
|
// background-color: var(--base);
|
// border-radius: 4px;
|
// padding: .25rem .5rem;
|
// box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle);
|
//}
|
//.field {
|
// margin: 3rem .5rem;
|
//}
|
//.field:has([required]) label::after {
|
// content: 'required';
|
// background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23B7332E" viewBox="0 0 256 256"><path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path></svg>');
|
// display: inline-block;
|
// background-position: left center;
|
// background-size: 1.2em;
|
// padding-left: 1.3em;
|
// background-repeat: no-repeat;
|
// font-weight: 100;
|
// text-transform: none;
|
// font-size: .75em;
|
// vertical-align: super;
|
//
|
//}
|
//.field:has([required]) label {
|
// position: relative;
|
//}
|
//.repeater-items .field {
|
// margin: 1rem 0;
|
//}
|
//.taxonomy .field-group-header {
|
// display: flex;
|
// justify-content: space-between;
|
//}
|
//
|
//.add-item-btn {
|
// padding: .5em;
|
// background: var(--base-100);
|
// border: 1px solid var(--contrast-200);
|
// border-radius: .25rem;
|
// cursor: pointer;
|
// font-size: .875rem;
|
//}
|
//.add-item-btn .icon {
|
// --w: 1.5em;
|
//}
|
//
|
//.add-item-btn:hover {
|
// background: var(--base-200);
|
//}
|
//summary .type-label {
|
// display: flex;
|
// align-items: center;
|
// gap: 1rem;
|
//}
|
//summary .type-label .icon {
|
// position: relative;
|
// top: -.25em;
|
//}
|
//
|
///** Tabs **/
|
//.tabs {
|
// display: flex;
|
// margin-bottom: 1.5rem;
|
// border-bottom: 2px solid var(--base-200);
|
// flex-wrap: wrap;
|
//}
|
//.tabs.parent {
|
// max-width: 100vw;
|
// background-color: var(--base);
|
// padding: .5rem;
|
// width: 100vw;
|
// position: relative;
|
// left: -2.1rem;
|
// margin: 1rem 0;
|
//}
|
//.tab-content h2 {
|
// font-size: var(--txt-large);
|
// margin: 0!important;
|
//}
|
//.tab-content .tab-navigation,
|
//.tab-content button[type=submit] {
|
// display: inline-flex;
|
// width: 48%;
|
// background-color: var(--action-200);
|
// color: var(--contrast-200);
|
//}
|
//
|
//.tab-navigation.next {
|
// display: flex;
|
// margin-left: auto;
|
//}
|
//.tab-content .tab-navigation + button {
|
// display: inline-flex;
|
// margin-left: 3%;
|
//}
|
//
|
//.tabs > button {
|
// padding: .75rem 1.5rem;
|
// border-radius: 0;
|
// border: none;
|
// background: none;
|
// font-size: 1.1rem;
|
// font-weight: bold;
|
// letter-spacing: .05em;
|
// text-transform: uppercase;
|
// cursor: pointer;
|
// position: relative;
|
// color: inherit;
|
//}
|
//.tabs > button h2 {
|
// font-size: 1.1rem;
|
// line-height: 1;
|
// margin: 0!important;
|
//}
|
//.tabs > button:hover,
|
//.tabs > button:focus {
|
// background-color: var(--base-200);
|
//}
|
//.tabs > button::after {
|
// content: '';
|
// position: absolute;
|
// bottom: -2px;
|
// left: 0;
|
// width: 0;
|
// height: 3px;
|
// background-color: var(--action-50);
|
// transition: width .3s;
|
//}
|
//.tabs > button.active::after {
|
// width: 100%;
|
//}
|
//
|
//.tabs > button.add-item-btn {
|
// margin-left: auto;
|
// background-color: var(--action-50);
|
// border-radius: 4px;
|
// padding: .5em;
|
// font-weight: normal;
|
// border: 1px solid var(--action-50);
|
//}
|
//.tabs > button.add-item-btn:focus,
|
//.tabs > button.add-item-btn:hover {
|
// background-color: var(--base);
|
//}
|
//
|
//.type-filter:not(.active) span:not(.count){
|
// display: none;
|
//}
|
//.type-filter:not(.active):hover span:not(.count){
|
// display: block;
|
//}
|
///** News **/
|
//.item-grid.list-view .item.news {
|
// flex-direction: column;
|
//}
|
//.item.news h3 {
|
// font-size: var(--txt-medium);
|
// margin: 0!important;
|
//}
|
//.item.news summary .image {
|
// width: 5rem;
|
// background-color: var(--base-200);
|
// border-radius: 4px;
|
// aspect-ratio: 1;
|
//}
|
//.item.news summary {
|
// gap: 1rem;
|
//}
|
//.item.news summary .summary {
|
// width: 100%;
|
//}
|
//.item.news summary .header {
|
// display: flex;
|
// justify-content: space-between;
|
// padding: .5rem 0;
|
//}
|
//.item .vote {
|
// display: flex;
|
// justify-content: flex-end;
|
// align-items: center;
|
// gap: .5em;
|
// margin-top: auto;
|
//}
|
//.vote .count {
|
// white-space: nowrap;
|
//}
|
//.item .vote .count:nth-of-type(2) {
|
// margin-right: 2rem;
|
//}
|
///** Favourites **/
|
//.favourites-title {
|
// display: flex;
|
// justify-content: space-between;
|
// align-items: center;
|
//}
|
//main button {
|
// display: flex;
|
// align-items: center;
|
// gap: .5rem;
|
//}
|
//
|
//.my-lists {
|
// margin: .5rem 0;
|
//}
|
//
|
//details.uploader .file-upload-container {
|
// margin: 1rem var(--mr) 1rem var(--ml);
|
// max-width: var(--content);
|
//}
|
//details .no-items {
|
// text-align: center;
|
// font-style: italic;
|
// background-color: 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 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: var(--action-0);
|
// color: var(--action-0);
|
//}
|
//details.type-filters .order-direction {
|
// justify-content: flex-end;
|
//}
|
//
|
///** Generalized Modal **/
|
//
|
///* Grid */
|
//.create-item {
|
// left: auto!important;
|
// right: 1rem;
|
// bottom: 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: 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-rgb),var(--op-3));
|
// color: 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-rgb),var(--op-6));
|
// color: var(--contrast);
|
//}
|
//.item-grid:not(.list-view) .item-select label::before {
|
// border-color: var(--base-200);
|
// position: relative;
|
// top: 0;
|
// left: 0;
|
// transform: none;
|
//}
|
//
|
//.item-grid:not(.list-view) .item-select label::after {
|
// left: calc(50% - 4px)!important;
|
//}
|
//.item-grid:not(.list-view) .item-select label:hover::before {
|
// border-color: var(--contrast);
|
//}
|
//.item-grid:not(.list-view) .item-select label {
|
// left: .1255rem;
|
//}
|
//.item-grid:not(.list-view) button.favourite {
|
// right: .125rem;
|
//}
|
//.item-grid:not(.list-view) img {
|
// width: 100%;
|
// max-width: 100%;
|
// height: auto;
|
// aspect-ratio: 1;
|
// object-fit: cover;
|
//}
|
///** List View **/
|
//.replace:not(:has(.list-view)) button[data-view=grid],
|
//.replace:has(.list-view) button[data-view=list] {
|
// background-color: var(--base);
|
//}
|
//.item-grid.list-view .item {
|
// display: flex;
|
// position: relative;
|
// flex-direction: row;
|
// margin: .5rem 0;
|
// padding: .25rem .5rem;
|
// gap: .5rem;
|
//}
|
//.item-grid.list-view .item:nth-of-type(even){
|
// background-color: var(--base-100);
|
//}
|
//
|
//.item-grid.list-view .item-select label{
|
// display: flex;
|
// height: 100%;
|
// justify-content: center;
|
// align-items: center;
|
// padding: 0 .5rem!important;
|
//}
|
//.item-grid.list-view .item-select label::after {
|
// /*left: calc(50% - 4px)!important;*/
|
//}
|
//.item-grid.list-view .item-select label::before {
|
// position: relative;
|
// top: 0;
|
// transform: none;
|
//}
|
//.item-grid.list-view .item-select label:hover {
|
// background-color: var(--base);
|
//}
|
//
|
//.item-grid.list-view .item-select label:hover::before {
|
// border-color: var(--action-0);
|
//}
|
//.item-grid.list-view img {
|
// width: 200px;
|
// height: 200px;
|
// aspect-ratio: 1;
|
// object-fit: cover;
|
//}
|
//.item-grid.list-view .item-info {
|
// width: 100%;
|
//}
|
//.item-grid .item-info h3 {
|
// margin: 0!important;
|
// text-align: right;
|
// font-size: var(--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: var(--action-50);
|
//}
|
//.reached textarea,
|
//.reached input {
|
// border: 2px solid var(--action-50);
|
//}
|
///**
|
//Groups
|
// */
|
//.groups {
|
// gap: 1rem;
|
//}
|
//details.uploaded .file-upload-container,
|
//details:not(.uploaded) .selection-container {
|
// display: none;
|
//}
|
//.uploading + .selection-container {
|
// display: flex!important;
|
//}
|
//.selection-container #save-changes {
|
// position: sticky;
|
// top: 3rem;
|
// left: 100%;
|
// border: 1px solid transparent;
|
// background-color: var(--action-50);
|
// box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
// z-index: 5;
|
//}
|
//.selection-container #save-changes:hover {
|
// background-color: var(--base);
|
// border: 1px solid var(--action-50);
|
// color: 1px solid var(--action-50);
|
//}
|
//
|
//.group {
|
// padding: 1rem .66rem;
|
// background-color: var(--base-50);
|
// border-radius: var(--radius-outer);
|
//}
|
//.group.empty {
|
// aspect-ratio: 1;
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
// justify-content: center;
|
// border: 4px dashed var(--base-200);
|
//}
|
//.group.empty .items {
|
// padding: 0;
|
// margin-top: 0;
|
//}
|
//
|
//.group .group-header {
|
// display: flex;
|
// position: relative;
|
//}
|
//.group .group-header label {
|
// position: absolute;
|
// top: -1.5rem;
|
//}
|
//.group .items {
|
// margin-top: 1rem;
|
// padding: 1rem;
|
// border-radius: var(--radius);
|
// background-color: var(--base);
|
//}
|
//.group .item-actions {
|
// display: flex;
|
// justify-content: space-between;
|
// width: 100%;
|
//}
|
//.group .item-actions > button,
|
//.group .item-actions label {
|
// flex: 1;
|
// padding: .25em!important;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// margin-bottom: 0;
|
//}
|
//.group .item-actions :checked + label {
|
// background-color: var(--action-50);
|
// color: var(--contrast);
|
//}
|
//.group .item-actions :checked + label:hover {
|
// border: 1px solid var(--action-50);
|
// background-color: transparent;
|
// color: var(--action-50);
|
//}
|
//.group .item-actions label::before {
|
// display: none!important;
|
//}
|
//
|
//.group-item img,
|
//.preview-item img {
|
// width: 250px;
|
// height: auto;
|
// object-fit: cover;
|
// aspect-ratio: 1;
|
//
|
//}
|
//.uploading .preview-item img,
|
//.uploading .group-item img{
|
// animation: uploading 3s ease-in-out infinite alternate;
|
//}
|
//@keyframes uploading {
|
// 0% {
|
// opacity: .6;
|
// filter: sepia(.3) grayscale(.3);
|
// transform: scale(.9);
|
// }
|
// 100% {
|
// opacity: 1;
|
// filter: sepia(0) grayscale(0);
|
// transform: scale(1);
|
// }
|
//}
|
//
|
//.image-actions {
|
// display: flex;
|
// gap: 1rem;
|
// flex-wrap: wrap;
|
//}
|
//
|
//.group.drop {
|
// border: 2px dashed var(--action-0);
|
// background: var(--action-rgb-subtle);
|
//}
|
//
|
//.group .items {
|
// padding: 1rem;
|
// display: grid;
|
// grid-template-columns: repeat(3, 1fr);
|
// gap: 1rem;
|
//}
|
//
|
//.group-content {
|
// min-height: 100px;
|
// padding: 1rem;
|
//}
|
//
|
//.group.drop {
|
// background: var(--action-rgb-subtle);
|
// border: 2px dashed var(--action-0);
|
//}
|
//.gallery .group-item,
|
//.gallery .preview-item {
|
// cursor: grab;
|
//}
|
//.group-item.dragging,
|
//.preview-item.dragging {
|
// cursor: grabbing;
|
// opacity: .5;
|
//}
|
//
|
//.items {
|
// display: grid;
|
// grid-template-columns: repeat(3,1fr);
|
// gap: 1rem;
|
//}
|
//
|
///** Gallery **/
|
//.gallery .preview-item .move-image {
|
// cursor: grab;
|
// position: absolute;
|
// top: .5rem;
|
// left: .5rem;
|
// opacity: 0;
|
// transition: opacity .2s;
|
//}
|
//.gallery-preview {
|
// display: grid;
|
// grid-template-columns: repeat(3, 1fr);
|
// padding: .5rem;
|
// background-color: var(--base-100);
|
// border-radius: var(--radius-outer);
|
//}
|
//.gallery-preview .preview-item {
|
// padding: .5rem;
|
// background-color: 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: var(--base-200);
|
//}
|
//thead th {
|
// width: 50%;
|
//}
|
//thead tr,
|
//tfoot tr {
|
// background-color: 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: 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 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 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: var(--action-0)!important;
|
//}
|
//
|
//.file-upload-wrapper input[type="file"] {
|
// position: absolute;
|
// left: 0;
|
// top: 0;
|
// width: 100%;
|
// height: 100%;
|
// opacity: 0;
|
// cursor: pointer;
|
//}
|
//
|
//.file-upload-text {
|
// color: var(--contrast);
|
// margin: 0;
|
// font-family: var(--body);
|
//}
|
//
|
//.file-upload-text strong {
|
// color: var(--action-0);
|
// text-decoration: underline;
|
//}
|
//
|
///* Error state */
|
//.file-error {
|
// color: var(--action-0);
|
// margin-top: .5rem;
|
// font-size: .9em;
|
//}
|
//
|
//.file-upload-container.uploading,
|
//.image-display.has-image + .file-upload-container {
|
// max-height: 0;
|
// overflow: hidden;
|
// transform: scaleY(0);
|
// transition: max-height var(--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: 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: var(--action-0);
|
// transition: none;
|
//}
|
//
|
//
|
//.item-grid.preview .preview-item {
|
// display: flex;
|
// gap: 2rem;
|
//}
|
//.preview-item .preview-image {
|
// width: 36%;
|
//}
|
//.preview-item .remove-file {
|
// width: 100%;
|
// background-color: var(--base);
|
// color: var(--contrast);
|
//}
|
//.preview-item .field:first-of-type {
|
// margin-top: 0!important;
|
//}
|
//.preview-item + .preview-item {
|
// margin-top: 2rem;
|
// padding-top: 2rem;
|
// border-top: 2px solid var(--contrast-200);
|
//}
|
//
|
//.item-grid.preview:empty + .hint {
|
// display: none;
|
//}
|
//
|
//body:has(.item-grid.empty) .bulk-controls {
|
// display: none;
|
//}
|
//.bulk-controls {
|
// margin: .75rem 0;
|
// display: flex;
|
// justify-content: space-between;
|
// align-items: center;
|
//}
|
//.bulk-select {
|
// display: flex;
|
// justify-content: space-between;
|
//}
|
//
|
//.bulk-actions[hidden]{
|
// max-width: 0;
|
// max-height: 0;
|
// overflow: hidden;
|
// transform: scaleY(0);
|
// transition: transform var(--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: 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-rgb),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: var(--base);
|
// border-top-left-radius: var(--radius);
|
// border-top-right-radius: var(--radius);
|
// border-bottom: 4px solid var(--base-50);
|
//}
|
//.ql-toolbar .ql-formats {
|
// display: flex;
|
// gap: .25rem;
|
//}
|
//.editor-container .ql-container {
|
// --padding: 1rem;
|
// background-color: var(--base);
|
// border-bottom-left-radius: var(--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: var(--base-100);
|
// border: 1px solid var(--base);
|
// box-shadow: 0px 0px 5px rgba(var(--base-rgb),var(--op-6));
|
// color: var(--contrast);
|
// padding: 5px 12px;
|
// white-space: nowrap;
|
//}
|
//
|
//#toolbar-einks_short_bio .ql-e_image {
|
// display: none;
|
//}
|
//
|
///** Content Grid **/
|
//.all-filters {
|
// position: relative;
|
// background-color: var(--base);
|
// border-radius: var(--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: var(--base-100);
|
// border-color: var(--contrast-200);
|
// color: var(--contrast)!important;
|
// gap: .5rem;
|
//}
|
//
|
//dialog .field {
|
// margin: 3rem 0;
|
//}
|
//
|
//
|
//.filters {
|
// display: flex;
|
// gap: 1rem;
|
// align-items: center;
|
//}
|
//.filters > div > label {
|
// margin: 0;
|
//}
|
//div.filters > div {
|
// display: flex;
|
// align-items: center;
|
// flex: 100%;
|
// gap: .5rem;
|
//}
|
//.filters .icon {
|
// --w: 1.5em;
|
//}
|
//
|
//@media (min-width:768px){
|
// div.filters > div {
|
// flex: 1;
|
// }
|
//}
|
//
|
//.view-controls.radio-options {
|
// gap: .5rem;
|
// margin-left: auto;
|
//}
|
//.view-controls.radio-options label {
|
// padding: .25rem!important;
|
//}
|
//
|
//.label-group {
|
// display: flex;
|
// gap: .75rem;
|
// align-items: center;
|
// flex-wrap: wrap;
|
//}
|
//.label-group .icon {
|
// margin-right: .5rem;
|
//}
|
//.item-grid.table {
|
// display: none;
|
//}
|
//
|
//.item-grid summary {
|
// padding: 0;
|
// gap: 0;
|
//}
|
//.item-grid .item-actions {
|
// position: absolute;
|
// top: .25rem;
|
// right: .25rem;
|
// gap: .25rem;
|
// display: flex;
|
//}
|
//.item-grid .item-actions button {
|
// width: 2em;
|
// height: 2em;
|
// border-radius: var(--radius);
|
// background-color: rgba(var(--base-rgb),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-rgb),var(--op-6));
|
// color: 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 var(--base-200);
|
//}
|
//
|
//.term-divider span {
|
// background: var(--base);
|
// padding: 0 1rem;
|
// color: var(--contrast);
|
// font-size: .9rem;
|
// position: relative;
|
// top: .5em;
|
//}
|
//
|
//.common-term {
|
// background: var(--base-50);
|
// border-radius: var(--radius);
|
//}
|
//
|
//.loading-indicator {
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// gap: .5rem;
|
// padding: 1rem;
|
// color: var(--contrast-100);
|
// font-size: .9rem;
|
//}
|
//
|
//.loading-indicator svg {
|
// animation: spin 1s linear infinite;
|
//}
|
//
|
//.pagination-info {
|
// text-align: center;
|
// padding: .5rem;
|
// font-size: .9rem;
|
// color: var(--contrast-100);
|
// border-top: 1px solid var(--base-100);
|
//}
|
//
|
//@keyframes spin {
|
// from { transform: rotate(0deg); }
|
// to { transform: rotate(360deg); }
|
//}
|
//
|
//
|
//.term-breadcrumb {
|
// margin-bottom: 1rem;
|
// padding: .5rem;
|
// background: var(--base-50);
|
// border-radius: 4px;
|
//}
|
//
|
//.back-to-parent {
|
// display: flex;
|
// align-items: center;
|
// gap: .5rem;
|
// border: none;
|
// background: none;
|
// color: var(--contrast);
|
// cursor: pointer;
|
// padding: .5rem;
|
// border-radius: 4px;
|
// font-size: var(--txt-x-small);
|
//}
|
//
|
//.back-to-parent:hover {
|
// background: var(--base-100);
|
//}
|
//
|
//.term-row {
|
// display: flex;
|
// align-items: center;
|
// gap: .5rem;
|
// width: 100%;
|
// padding: .25rem 0;
|
//}
|
//
|
//.toggle-children {
|
// border: none;
|
// background: none;
|
// padding: .25rem;
|
// cursor: pointer;
|
// color: var(--contrast);
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// margin-left: auto;
|
// border-radius: 4px;
|
//}
|
//
|
//.toggle-children:hover {
|
// background: var(--base-50);
|
//}
|
//
|
//.loading-indicator {
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// width: 24px;
|
// height: 24px;
|
//}
|
//
|
//.loading-indicator .loading {
|
// width: 16px;
|
// height: 16px;
|
// border: 2px solid var(--base-100);
|
// border-top-color: var(--contrast);
|
// border-radius: 50%;
|
// animation: spin 1s linear infinite;
|
//}
|
//
|
//@keyframes spin {
|
// to { transform: rotate(360deg); }
|
//}
|
//
|
//.term-breadcrumb {
|
// display: flex;
|
// align-items: center;
|
// gap: .5rem;
|
// margin-bottom: 1rem;
|
// padding: .5rem;
|
// background: var(--base-50);
|
// border-radius: 4px;
|
//}
|
//
|
//.term-breadcrumb .path {
|
// display: flex;
|
// align-items: center;
|
// gap: .25rem;
|
// flex-wrap: wrap;
|
//}
|
//
|
//.term-breadcrumb button {
|
// border: none;
|
// background: none;
|
// padding: .25rem .5rem;
|
// border-radius: 4px;
|
// cursor: pointer;
|
// color: var(--contrast);
|
// font-size: var(--txt-x-small);
|
//}
|
//
|
//.term-breadcrumb button:hover {
|
// background: var(--base-100);
|
//}
|
//
|
//.path-separator {
|
// color: var(--contrast-50);
|
//}
|
//
|
//.path-level {
|
// white-space: nowrap;
|
//}
|
//
|
//.create-new-term {
|
// margin-top: 2rem;
|
// padding-top: 1rem;
|
// border-top: 1px solid var(--base-100);
|
//}
|
//.create-new-term button {
|
// width: 100%;
|
//}
|
//
|
//.suggestion-prompt {
|
// font-size: var(--txt-x-small);
|
// color: var(--contrast-50);
|
// margin-bottom: 1rem;
|
//}
|
//
|
//.create-term-form {
|
// display: flex;
|
// flex-direction: column;
|
// gap: .5rem;
|
//}
|
//
|
//.form-row {
|
// display: flex;
|
// align-items: center;
|
// gap: .5rem;
|
//}
|
//
|
//.name-row {
|
// position: relative;
|
//}
|
//
|
//.name-row input {
|
// width: 100%!important;
|
// padding: .5rem;
|
// border: 2px solid var(--base-100);
|
// border-radius: 4px;
|
// background: var(--base);
|
// color: var(--contrast);
|
//}
|
//
|
//.name-row input:focus {
|
// border-color: var(--action-0);
|
// outline: none;
|
//}
|
//
|
//.parent-row {
|
// font-size: var(--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: var(--action-0);
|
// color: var(--base);
|
// cursor: pointer;
|
// font-size: var(--txt-x-small);
|
// transition: all .2s ease;
|
//}
|
//
|
//.create-term-form button:hover {
|
// background: var(--action-50);
|
//}
|
//
|
//.create-term-form button:disabled {
|
// opacity: .5;
|
// cursor: not-allowed;
|
//}
|
//
|
//.create-term-form button svg {
|
// width: 16px;
|
// height: 16px;
|
//}
|
//
|
///** Search bar and new term functionality **/
|
//.search-bar {
|
// position: relative;
|
// display: flex;
|
// gap: .5rem;
|
// align-items: center;
|
// z-index: 2;
|
//}
|
//
|
//.search-bar input {
|
// flex: 1;
|
// /* Make room for button */
|
// padding: .5rem 2.5rem .5rem .5rem;
|
// border: 2px solid #ddd;
|
// border-radius: 4px;
|
// font-size: 1rem;
|
//}
|
//
|
//.new-term-toggle {
|
// margin: 2rem 0 1rem;
|
// width: 100%;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
//}
|
//
|
///* Peek effect on search bar hover */
|
//.search-bar:hover .new-term-toggle {
|
// opacity: 1;
|
// transform: translateX(-.25rem);
|
//}
|
//
|
///* Form styling */
|
//.create-term-form {
|
// position: relative;
|
// z-index: 1;
|
// background: var(--base);
|
// border: 2px solid var(--action-0);
|
// border-radius: 4px;
|
// padding: 1rem;
|
// margin-top: -2px;
|
//
|
// /* Animation */
|
// transform-origin: top;
|
// transition: all .2s var(--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: var(--action-50);
|
//}
|
//.actions .send-invites:hover,
|
//.actions .send-invites:focus {
|
// background-color: var(--base);
|
// border-color: var(--action-50);
|
//}
|
//
|
//.dashboard .queue-status-panel {
|
// bottom: 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 var(--base-200);
|
// border-radius: 8px;
|
// background: var(--base-50);
|
// transition: all .3s ease;
|
//}
|
//.upload-item:hover {
|
// box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
// transform: translateY(-2px);
|
//}
|
//.upload-item[data-status=processing] {
|
// border-color: var(--action-200);
|
// background: var(--action-100);
|
//}
|
//.upload-item[data-status=cached] {
|
// border-color: var(--secondary-0);
|
// background: var(--secondary-200);
|
//}
|
//.upload-item[data-status=uploading] {
|
// border-color: var(--contrast);
|
// background-color: var(--base-50);
|
//}
|
//.upload-item .preview {
|
// position: relative;
|
// aspect-ratio: 1;
|
//}
|
//.upload-item .status {
|
// position: absolute;
|
// bottom: .25rem;
|
// right: .25rem;
|
// background-color: rgba(var(--base-rgb),var(--op-3));
|
// box-shadow: rgba(var(--base-rgb),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-rgb),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: var(--base);
|
// height: var(--btn);
|
// box-shadow: rgba(var(--base-rgb),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: var(--base-50);
|
// z-index: 5;
|
//}
|
//.preview-actions .selected {
|
// display: flex;
|
// justify-content: space-between;
|
// padding-right: 2rem;
|
// align-items: center;
|
//}
|
//.preview-actions .field {
|
// margin: 0;
|
//}
|
//.preview-actions .field label {
|
// margin-bottom: 0;
|
//}
|
//.selection-actions {
|
// display: flex;
|
// justify-content: space-between;
|
// padding: 1rem 2rem;
|
//}
|
//[data-status=completed] .progress {
|
// transform: scaleY(0);
|
// transform-origin: top;
|
//}
|
//.preview-grid {
|
// display: grid;
|
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
// gap: 1rem;
|
// margin-top: 1rem;
|
// padding: .5rem;
|
// background: var(--base);
|
// border: 1px solid var(--contrast-200);
|
// border-radius: 8px;
|
// min-height: 60px;
|
//}
|
//.preview-grid:empty {
|
// display: none;
|
//}
|
//
|
//
|
//.upload-item .progress {
|
// position: absolute;
|
// top: 2px;
|
// right: 2px;
|
// left: 2px;
|
//}
|
//.upload-item .actions {
|
// display: flex;
|
// justify-content: space-between;
|
// align-items: center;
|
// position: absolute;
|
// top: 0;
|
// left: 0;
|
// right: 0;
|
//}
|
//.upload-item .actions > label {
|
// margin: 0 1rem;
|
// padding-left: 0!important;
|
//}
|
//.upload-item input[type=text],
|
//.upload-item textarea,
|
//.group-fields input[type=text],
|
//.group-fields textarea {
|
// width: calc(100% - 1rem);
|
//}
|
///*.upload-item .actions > label {*/
|
///* !*position: absolute;*!*/
|
///* padding: 1rem!important;*/
|
///* margin: 0;*/
|
///* !*top: .5rem;*!*/
|
///* !*left: 0;*!*/
|
///*}*/
|
///* .upload-item .actions > label::before {*/
|
///* left: calc(50% - 9px)!important;*/
|
///* top: calc(50% - 9px)!important;*/
|
///* transform: none!important;*/
|
///* }*/
|
///* .upload-item .actions > label::after {*/
|
///* left: 1.25rem!important;*/
|
///* top: 1rem!important;*/
|
///* }*/
|
//.item-grid .upload-item summary {
|
// display: flex;
|
// align-items: center;
|
// font-size: var(--txt-x-small);
|
// gap: .5rem;
|
// text-transform: uppercase;
|
//}
|
//.upload-item:has([type=checkbox]:checked) .preview {
|
// padding: 1rem;
|
// background-color: var(--secondary-200);
|
//}
|
//.upload-item:has([open]) {
|
// grid-column: 1 / -1;
|
//}
|
//.upload-item summary .icon {
|
// --w: 1.1em;
|
//}
|
//
|
//[draggable="true"] {
|
// cursor: grab;
|
//}
|
//[draggable="true"]:active {
|
// cursor: grabbing;
|
//}
|
//
|
//.dragging {
|
// opacity: .5;
|
// transform: rotate(5deg) scale(.95);
|
// transition: all .2s ease;
|
//}
|
//
|
//.dragover:not(.item-grid.groups) {
|
// background-color: var(--overlay-action-medium);
|
// border: 2px dashed var(--action-0);
|
//}
|
//
|
//@keyframes dragHover {
|
// 0% { transform: scale(1); }
|
// 50% { transform: scale(1.02); }
|
// 100% { transform: scale(1); }
|
//}
|
//
|
//.drag-hover {
|
// animation: dragHover .6s ease-in-out infinite;
|
//}
|
//
|
///** GROUP **/
|
//.empty-group {
|
// padding: 20px;
|
// text-align: center;
|
// grid-column: 1 / -1;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
// border: 2px dashed var(--action-200);
|
// border-radius: var(--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 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: var(--action-0);
|
// background-color: var(--overlay-action-light);
|
// color: var(--action-50);
|
//}
|
//
|
//.upload-group {
|
// background-color: var(--base-100);
|
// border-radius: var(--radius);
|
// border: 1px solid var(--contrast-200);
|
//}
|
//.group-actions {
|
// width: 100%;
|
// gap: .5rem;
|
//}
|
//.group-actions button {
|
// width: 100%;
|
//}
|
//
|
//body:has(.selection-actions[hidden]) button.create-group,
|
//body:has(.selection-actions[hidden]) button.add-selection-to-group {
|
// display: none;
|
//}
|
//
|
///** RESTORE FROM CACHE **/
|
//.restore-notification {
|
// border-radius: var(--radius);
|
// box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
// padding: 1rem;
|
// background: var(--base-200);
|
// border: 1px solid var(--contrast-200);
|
// border-top-width: 4px;
|
// border-bottom-width: 4px;
|
//}
|
//.restore-content {
|
// display: flex;
|
// align-items: center;
|
//}
|
//.restore-actions .selection-controls {
|
// display: flex;
|
// gap: .5rem;
|
//}
|
//
|
//.restore-actions button {
|
// white-space: nowrap;
|
//}
|
//.restore-actions .action-buttons {
|
// margin-top: 1rem;
|
// display: flex;
|
// flex-direction: column;
|
// gap: .5rem;
|
//}
|
//.restore-actions .action-buttons button {
|
// width: 100%;
|
//}
|
//
|
//label.restore-item {
|
// border-radius: .5rem;
|
// padding: 0;
|
// background-color: transparent;
|
// filter: grayscale(50);
|
// opacity: .8;
|
// transition: padding var(--trans-base);
|
// transition-property: padding, background-color;
|
// cursor: pointer;
|
//}
|
//label.restore-item:has(input:checked) {
|
// filter: grayscale(0);
|
// opacity: 1;
|
// padding: 1rem;
|
// background-color: var(--secondary-200);
|
//}
|
//
|
//.upload-item .featured + label {
|
// width: 2em;
|
// height: 2em;
|
// border-radius: var(--radius);
|
// background-color: rgba(var(--base-rgb),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: var(--contrast);*/
|
///* font-size: .9rem;*/
|
///*}*/
|
//
|
///*.upload-summary button {*/
|
///* padding: .5rem 1rem;*/
|
///* border: 1px solid var(--border);*/
|
///* border-radius: 4px;*/
|
///* background: var(--surface);*/
|
///* color: var(--contrast);*/
|
///* cursor: pointer;*/
|
///* transition: all .3s ease;*/
|
///* font-size: .875rem;*/
|
///* margin-left: .5rem;*/
|
///*}*/
|
//
|
///*.upload-summary button:hover {*/
|
///* background: var(--action-0);*/
|
///* color: var(--action-contrast);*/
|
///* border-color: var(--action-0);*/
|
///*}*/
|
//
|
///*!* Upload Drop Zones *!*/
|
///*.file-upload-container {*/
|
///* position: relative;*/
|
///* padding: .25rem;*/
|
///* transition: border-color var(--trans-base),*/
|
///* background-color var(--trans-base),*/
|
///* padding var(--trans-base);*/
|
///*}*/
|
//
|
///*.file-upload-container.dragover {*/
|
///* background-color: var(--action-rgb-subtle);*/
|
///* border-color: var(--action-0);*/
|
///* padding: .75rem;*/
|
///*}*/
|
///* .dragover .file-upload-wrapper {*/
|
///* transform: scale(1.02);*/
|
///* }*/
|
//
|
//
|
///*!* Upload Actions *!*/
|
///*.upload .actions {*/
|
///* display: flex;*/
|
///* gap: .25rem;*/
|
///* justify-content: flex-end;*/
|
///*}*/
|
//
|
///*.upload .actions button {*/
|
///* background: rgba(0, 0, 0, .7);*/
|
///* color: white;*/
|
///* border: none;*/
|
///* padding: .25rem;*/
|
///* border-radius: 4px;*/
|
///* cursor: pointer;*/
|
///* transition: background .3s ease;*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* justify-content: center;*/
|
///*}*/
|
//
|
///*.upload .actions button:hover {*/
|
///* background: rgba(0, 0, 0, .9);*/
|
///*}*/
|
//
|
///*.upload .actions button svg {*/
|
///* width: 16px;*/
|
///* height: 16px;*/
|
///*}*/
|
//
|
///*!* Status Indicator *!*/
|
///*.status {*/
|
///* position: absolute;*/
|
///* top: .5rem;*/
|
///* right: .5rem;*/
|
///* width: 24px;*/
|
///* height: 24px;*/
|
///* border-radius: 50%;*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* justify-content: center;*/
|
///* font-size: .8rem;*/
|
///* font-weight: bold;*/
|
///* z-index: 2;*/
|
///* box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
|
///*}*/
|
//
|
///*.status.processing {*/
|
///* background: var(--warning);*/
|
///* color: var(--warning-contrast);*/
|
///*}*/
|
//
|
///*.status.processed {*/
|
///* background: var(--info);*/
|
///* color: var(--info-contrast);*/
|
///*}*/
|
//
|
///*.status.cached {*/
|
///* background: var(--info);*/
|
///* color: var(--info-contrast);*/
|
///*}*/
|
//
|
///*.status.uploading {*/
|
///* background: var(--action-0);*/
|
///* color: var(--action-contrast);*/
|
///*}*/
|
//
|
///*.status.uploaded {*/
|
///* background: var(--success);*/
|
///* color: var(--success-contrast);*/
|
///*}*/
|
//
|
///*.status.error {*/
|
///* background: var(--error);*/
|
///* color: var(--error-contrast);*/
|
///*}*/
|
//
|
///*!* Upload Metadata *!*/
|
///*.upload .metadata {*/
|
///* padding: 1rem;*/
|
///* border-top: 1px solid var(--border);*/
|
///* background: var(--surface);*/
|
///*}*/
|
//
|
///*.upload .metadata .metadata-field {*/
|
///* margin-bottom: .75rem;*/
|
///*}*/
|
//
|
///*.upload .metadata .metadata-field:last-child {*/
|
///* margin-bottom: 0;*/
|
///*}*/
|
//
|
///*.upload .metadata label {*/
|
///* display: block;*/
|
///* margin-bottom: .25rem;*/
|
///* font-weight: 500;*/
|
///* font-size: .9rem;*/
|
///* color: var(--contrast);*/
|
///*}*/
|
//
|
///*.upload .metadata input,*/
|
///*.upload .metadata textarea {*/
|
///* width: 100%;*/
|
///* padding: .5rem;*/
|
///* border: 1px solid var(--border);*/
|
///* border-radius: 4px;*/
|
///* font-size: .9rem;*/
|
///* transition: border-color .3s ease, box-shadow .3s ease;*/
|
///*}*/
|
//
|
///*.upload .metadata input:focus,*/
|
///*.upload .metadata textarea:focus {*/
|
///* outline: none;*/
|
///* border-color: var(--action-0);*/
|
///* box-shadow: 0 0 0 2px var(--action-rgb-subtle);*/
|
///*}*/
|
//
|
///*.upload .metadata textarea {*/
|
///* resize: vertical;*/
|
///* min-height: 2.5rem;*/
|
///*}*/
|
//
|
///*!* Field Type Specific Styles *!*/
|
//
|
///*!* Single Image Field *!*/
|
///*.upload.field[data-upload-type="single"] .upload-preview-grid {*/
|
///* grid-template-columns: 1fr;*/
|
///* max-width: 400px;*/
|
///*}*/
|
//
|
///*!* Gallery Field *!*/
|
///*.upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
|
///* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
|
///*}*/
|
//
|
///*!* Avatar Field *!*/
|
///*.upload.field[data-upload-type="avatar"] .upload-preview-grid {*/
|
///* grid-template-columns: 1fr;*/
|
///* max-width: 200px;*/
|
///*}*/
|
//
|
///*.upload.field[data-upload-type="avatar"] .upload-preview {*/
|
///* aspect-ratio: 1;*/
|
///* border-radius: 50%;*/
|
///* overflow: hidden;*/
|
///*}*/
|
//
|
///*!* Spinner Animation *!*/
|
///*.spinner {*/
|
///* width: 12px;*/
|
///* height: 12px;*/
|
///* border: 2px solid transparent;*/
|
///* border-top: 2px solid currentColor;*/
|
///* border-radius: 50%;*/
|
///* animation: spin 1s linear infinite;*/
|
///*}*/
|
//
|
///*@keyframes spin {*/
|
///* 0% { transform: rotate(0deg); }*/
|
///* 100% { transform: rotate(360deg); }*/
|
///*}*/
|
//
|
///*@keyframes shimmer {*/
|
///* 0% { transform: translateX(-100%); }*/
|
///* 100% { transform: translateX(100%); }*/
|
///*}*/
|
//
|
///*!* Responsive Design *!*/
|
///*@media (max-width: 768px) {*/
|
///* .all-uploads {*/
|
///* position: relative;*/
|
///* top: auto;*/
|
///* left: auto;*/
|
///* right: auto;*/
|
///* }*/
|
//
|
///* .upload-summary {*/
|
///* flex-direction: column;*/
|
///* gap: .5rem;*/
|
///* align-items: stretch;*/
|
///* }*/
|
//
|
///* .upload-summary button {*/
|
///* margin-left: 0;*/
|
///* width: 100%;*/
|
///* }*/
|
//
|
///* .upload-preview-grid {*/
|
///* grid-template-columns: 1fr;*/
|
///* gap: .75rem;*/
|
///* }*/
|
//
|
///* .upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
|
///* grid-template-columns: repeat(2, 1fr);*/
|
///* }*/
|
///*}*/
|
//
|
///*!* Dark Mode Support *!*/
|
///*@media (prefers-color-scheme: dark) {*/
|
///* .upload-overlay {*/
|
///* background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6));*/
|
///* }*/
|
//
|
///*}*/
|
//
|
///*!* High Contrast Mode *!*/
|
///*@media (prefers-contrast: high) {*/
|
///* .upload-item {*/
|
///* border-width: 2px;*/
|
///* }*/
|
//
|
///* .status {*/
|
///* border: 2px solid currentColor;*/
|
///* }*/
|
//
|
///*}*/
|
//
|
///*!* Reduced Motion *!*/
|
///*@media (prefers-reduced-motion: reduce) {*/
|
///* .upload-item:hover {*/
|
///* transform: none;*/
|
///* }*/
|
//
|
///* .upload-item:hover .upload-preview img {*/
|
///* transform: none;*/
|
///* }*/
|
//
|
///* .spinner,*/
|
///* .shimmer {*/
|
///* animation: none;*/
|
///* }*/
|
///*}*/
|
//
|
///*!* Focus Management *!*/
|
///*.upload-item:focus-within {*/
|
///* outline: 2px solid var(--action-0);*/
|
///* outline-offset: 2px;*/
|
///*}*/
|
//
|
///*.upload .actions button:focus {*/
|
///* outline: 2px solid var(--action-0);*/
|
///* outline-offset: 2px;*/
|
///*}*/
|
//
|
///*!* Loading States *!*/
|
///*.upload.field.processing {*/
|
///* pointer-events: none;*/
|
///* opacity: .7;*/
|
///*}*/
|
//
|
///*.upload.field.processing::after {*/
|
///* content: '';*/
|
///* position: absolute;*/
|
///* top: 0;*/
|
///* left: 0;*/
|
///* right: 0;*/
|
///* bottom: 0;*/
|
///* background: rgba(255, 255, 255, .5);*/
|
///* backdrop-filter: blur(2px);*/
|
///* z-index: 10;*/
|
///*}*/
|
//
|
///*!* Field Capacity Indicators *!*/
|
///*.upload.field[data-at-capacity="true"] .file-upload-container {*/
|
///* opacity: .5;*/
|
///* pointer-events: none;*/
|
///*}*/
|
//
|
///*.upload.field[data-at-capacity="true"]::before {*/
|
///* content: 'Maximum files reached';*/
|
///* position: absolute;*/
|
///* top: 50%;*/
|
///* left: 50%;*/
|
///* transform: translate(-50%, -50%);*/
|
///* background: var(--warning);*/
|
///* color: var(--warning-contrast);*/
|
///* padding: .5rem 1rem;*/
|
///* border-radius: 4px;*/
|
///* font-size: .875rem;*/
|
///* z-index: 5;*/
|
///*}*/
|
//
|
///*!* Integration with existing form styles *!*/
|
///*.upload.field {*/
|
///* position: relative;*/
|
///*}*/
|
//
|
///*.upload.field .upload-preview-grid {*/
|
///* margin-top: .5rem;*/
|
///*}*/
|
//
|
///*!* Ensure global status doesn't interfere with fixed elements *!*/
|
///*body.has-global-upload-status {*/
|
///* padding-top: 80px;*/
|
///*}*/
|
//
|
///*!* Animation for upload completion *!*/
|
///*@keyframes uploadSuccess {*/
|
///* 0% { transform: scale(1); }*/
|
///* 50% { transform: scale(1.05); }*/
|
///* 100% { transform: scale(1); }*/
|
///*}*/
|
//
|
///*.upload-item[data-status="uploaded"] {*/
|
///* animation: uploadSuccess .6s ease-out;*/
|
///*}*/
|
///*!* Batch Processing Progress Bar *!*/
|
///*.batch-progress {*/
|
///* margin: 1rem 0;*/
|
///* padding: 1rem;*/
|
///* background: var(--color-background-secondary, #f8f9fa);*/
|
///* border: 1px solid var(--color-border, #e1e5e9);*/
|
///* border-radius: 8px;*/
|
///* transition: opacity .3s ease;*/
|
///*}*/
|
//
|
///*.batch-progress.completed {*/
|
///* background: var(--color-success-light, #d4edda);*/
|
///* border-color: var(--color-success, #28a745);*/
|
///*}*/
|
//
|
///*.progress-info {*/
|
///* display: flex;*/
|
///* justify-content: space-between;*/
|
///* align-items: center;*/
|
///* margin-bottom: .5rem;*/
|
///* font-size: .9rem;*/
|
///*}*/
|
//
|
///*.progress-message {*/
|
///* color: var(--color-text-secondary, #6c757d);*/
|
///* font-weight: 500;*/
|
///*}*/
|
//
|
///*.progress-count {*/
|
///* color: var(--color-text-primary, #212529);*/
|
///* font-weight: 600;*/
|
///* font-variant-numeric: tabular-nums;*/
|
///*}*/
|
//
|
///*.progress .bar {*/
|
///* width: 100%;*/
|
///* height: 8px;*/
|
///* background: var(--color-background-tertiary, #e9ecef);*/
|
///* border-radius: 4px;*/
|
///* overflow: hidden;*/
|
///*}*/
|
//
|
///*.progress .fill {*/
|
///* height: 100%;*/
|
///* background: linear-gradient(90deg,*/
|
///* var(--color-primary, #007cba) 0%,*/
|
///* var(--color-primary-light, #0096dd) 100%*/
|
///* );*/
|
///* border-radius: 4px;*/
|
///* transition: width .3s ease;*/
|
///* position: relative;*/
|
///*}*/
|
//
|
///*!* Animated progress indicator *!*/
|
///*.progress .fill::after {*/
|
///* content: '';*/
|
///* position: absolute;*/
|
///* top: 0;*/
|
///* left: 0;*/
|
///* right: 0;*/
|
///* bottom: 0;*/
|
///* background: linear-gradient(*/
|
///* 90deg,*/
|
///* transparent 0%,*/
|
///* rgba(255,255,255,.3) 50%,*/
|
///* transparent 100%*/
|
///* );*/
|
///* animation: progress-shine 2s ease-in-out infinite;*/
|
///*}*/
|
//
|
///*@keyframes progress-shine {*/
|
///* 0% { transform: translateX(-100%); }*/
|
///* 100% { transform: translateX(100%); }*/
|
///*}*/
|
//
|
///*!* Completed state styling *!*/
|
///*.progress.completed .fill {*/
|
///* background: linear-gradient(90deg,*/
|
///* var(--color-success, #28a745) 0%,*/
|
///* var(--color-success-light, #34ce57) 100%*/
|
///* );*/
|
///*}*/
|
//
|
///*.progress.completed .progress-message {*/
|
///* color: var(--color-success-dark, #155724);*/
|
///*}*/
|
//
|
///*!* Dark mode support *!*/
|
///*@media (prefers-color-scheme: dark) {*/
|
///* .progress {*/
|
///* background: var(--color-background-secondary-dark, #2d3436);*/
|
///* border-color: var(--color-border-dark, #636e72);*/
|
///* }*/
|
//
|
///* .progress .bar {*/
|
///* background: var(--color-background-tertiary-dark, #636e72);*/
|
///* }*/
|
///*}*/
|
//
|
///*!* ✅ Grouping System CSS *!*/
|
//
|
///*!* Upload field container with grouping support *!*/
|
///*.upload.field.groupable {*/
|
///* display: grid;*/
|
///* grid-template-columns: 1fr 300px;*/
|
///* gap: 20px;*/
|
///* min-height: 400px;*/
|
///*}*/
|
//
|
///*.upload.field.groupable .upload-main {*/
|
///* display: flex;*/
|
///* flex-direction: column;*/
|
///*}*/
|
//
|
///*.upload.field.groupable .upload-sidebar {*/
|
///* border-left: 2px solid #e0e0e0;*/
|
///* padding-left: 20px;*/
|
///*}*/
|
//
|
///*!* Preview grid for groupable uploads *!*/
|
///*.upload-preview-grid.groupable {*/
|
///* min-height: 200px;*/
|
///* border: 2px dashed #ddd;*/
|
///* border-radius: 8px;*/
|
///* padding: 15px;*/
|
///* background: #fafafa;*/
|
///*}*/
|
//
|
///*.upload-preview-grid.groupable:empty::after {*/
|
///* content: "Drop images here or click to upload";*/
|
///* display: block;*/
|
///* text-align: center;*/
|
///* color: #666;*/
|
///* font-style: italic;*/
|
///* padding: 40px 20px;*/
|
///*}*/
|
//
|
///*!* Upload items with drag support *!*/
|
///*.upload-item[draggable] {*/
|
///* cursor: grab;*/
|
///* transition: transform .2s ease, box-shadow .2s ease;*/
|
///*}*/
|
//
|
///*.upload-item[draggable]:hover {*/
|
///* transform: translateY(-2px);*/
|
///* box-shadow: 0 4px 8px rgba(0,0,0,.1);*/
|
///*}*/
|
//
|
///*.upload-item.dragging {*/
|
///* opacity: .5;*/
|
///* transform: rotate(5deg);*/
|
///* cursor: grabbing;*/
|
///*}*/
|
//
|
///*!* Groups container *!*/
|
///*.groups-container {*/
|
///* display: flex;*/
|
///* flex-direction: column;*/
|
///* gap: 15px;*/
|
///* max-height: 600px;*/
|
///* overflow-y: auto;*/
|
///* padding: 10px;*/
|
///* background: #f9f9f9;*/
|
///* border-radius: 8px;*/
|
///*}*/
|
//
|
///*.groups-container .new-group-section {*/
|
///* text-align: center;*/
|
///* padding: 20px;*/
|
///* border: 2px dashed #ccc;*/
|
///* border-radius: 8px;*/
|
///* background: white;*/
|
///* cursor: pointer;*/
|
///* transition: all .2s ease;*/
|
///*}*/
|
//
|
///*.groups-container .new-group-section:hover {*/
|
///* border-color: #2196F3;*/
|
///* background: #f0f8ff;*/
|
///*}*/
|
//
|
///*.new-group-btn {*/
|
///* background: #2196F3;*/
|
///* color: white;*/
|
///* border: none;*/
|
///* padding: 10px 20px;*/
|
///* border-radius: 6px;*/
|
///* cursor: pointer;*/
|
///* font-size: 14px;*/
|
///* display: inline-flex;*/
|
///* align-items: center;*/
|
///* gap: 8px;*/
|
///*}*/
|
//
|
///*.new-group-btn:hover {*/
|
///* background: #1976D2;*/
|
///*}*/
|
//
|
///*!* Individual groups *!*/
|
///*.upload-group {*/
|
///* background: white;*/
|
///* border: 1px solid #e0e0e0;*/
|
///* border-radius: 8px;*/
|
///* padding: 15px;*/
|
///* transition: all .2s ease;*/
|
///*}*/
|
//
|
///*.upload-group.drag-hover {*/
|
///* border-color: #2196F3;*/
|
///* background: #f0f8ff;*/
|
///* box-shadow: 0 2px 8px rgba(33, 150, 243, .2);*/
|
///*}*/
|
//
|
///*.group-header {*/
|
///* display: flex;*/
|
///* justify-content: space-between;*/
|
///* align-items: center;*/
|
///* margin-bottom: 15px;*/
|
///* padding-bottom: 10px;*/
|
///* border-bottom: 1px solid #f0f0f0;*/
|
///*}*/
|
//
|
///*.group-info {*/
|
///* flex: 1;*/
|
///* display: flex;*/
|
///* flex-direction: column;*/
|
///* gap: 5px;*/
|
///*}*/
|
//
|
///*.group-name {*/
|
///* border: 1px solid #ddd;*/
|
///* border-radius: 4px;*/
|
///* padding: 6px 10px;*/
|
///* font-size: 14px;*/
|
///* font-weight: 500;*/
|
///* background: white;*/
|
///* transition: border-color .2s ease;*/
|
///*}*/
|
//
|
///*.group-name:focus {*/
|
///* outline: none;*/
|
///* border-color: #2196F3;*/
|
///* box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
|
///*}*/
|
//
|
///*.group-name:empty::before {*/
|
///* content: "Enter group name...";*/
|
///* color: #999;*/
|
///* font-style: italic;*/
|
///*}*/
|
//
|
///*.group-count {*/
|
///* font-size: 12px;*/
|
///* color: #666;*/
|
///* font-weight: normal;*/
|
///*}*/
|
//
|
///*.group-actions {*/
|
///* display: flex;*/
|
///* gap: 8px;*/
|
///*}*/
|
//
|
///*.delete-group {*/
|
///* background: #f44336;*/
|
///* color: white;*/
|
///* border: none;*/
|
///* padding: 6px 8px;*/
|
///* border-radius: 4px;*/
|
///* cursor: pointer;*/
|
///* font-size: 12px;*/
|
///* transition: background .2s ease;*/
|
///*}*/
|
//
|
///*.delete-group:hover {*/
|
///* background: #d32f2f;*/
|
///*}*/
|
//
|
///*!* Group drop zone *!*/
|
///*.group-drop-zone {*/
|
///* min-height: 80px;*/
|
///* border: 2px dashed #ccc;*/
|
///* border-radius: 6px;*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* justify-content: center;*/
|
///* margin-bottom: 15px;*/
|
///* transition: all .2s ease;*/
|
///* background: #fafafa;*/
|
///*}*/
|
//
|
///*.group-drop-zone p {*/
|
///* color: #666;*/
|
///* font-style: italic;*/
|
///* margin: 0;*/
|
///* font-size: 14px;*/
|
///*}*/
|
//
|
///*.group-drop-zone.drag-hover {*/
|
///* border-color: #4CAF50;*/
|
///* background: #f1f8e9;*/
|
///*}*/
|
//
|
///*!* Group items *!*/
|
///*.group-items {*/
|
///* display: grid;*/
|
///* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
|
///* gap: 10px;*/
|
///* margin-bottom: 15px;*/
|
///*}*/
|
//
|
///*.group-item {*/
|
///* position: relative;*/
|
///* background: white;*/
|
///* border: 1px solid #e0e0e0;*/
|
///* border-radius: 6px;*/
|
///* overflow: hidden;*/
|
///* transition: all .2s ease;*/
|
///*}*/
|
//
|
///*.group-item:hover {*/
|
///* box-shadow: 0 2px 8px rgba(0,0,0,.1);*/
|
///*}*/
|
//
|
///*.group-item-preview {*/
|
///* position: relative;*/
|
///* width: 100%;*/
|
///* height: 80px;*/
|
///* overflow: hidden;*/
|
///*}*/
|
//
|
///*.group-item-preview img {*/
|
///* width: 100%;*/
|
///* height: 100%;*/
|
///* object-fit: cover;*/
|
///*}*/
|
//
|
///*.group-item-overlay {*/
|
///* position: absolute;*/
|
///* top: 0;*/
|
///* right: 0;*/
|
///* background: rgba(0,0,0,.7);*/
|
///* padding: 4px;*/
|
///* opacity: 0;*/
|
///* transition: opacity .2s ease;*/
|
///*}*/
|
//
|
///*.group-item:hover .group-item-overlay {*/
|
///* opacity: 1;*/
|
///*}*/
|
//
|
///*.remove-from-group {*/
|
///* background: #f44336;*/
|
///* color: white;*/
|
///* border: none;*/
|
///* padding: 4px 6px;*/
|
///* border-radius: 3px;*/
|
///* cursor: pointer;*/
|
///* font-size: 10px;*/
|
///*}*/
|
//
|
///*.remove-from-group:hover {*/
|
///* background: #d32f2f;*/
|
///*}*/
|
//
|
///*!* Group metadata fields *!*/
|
///*.group-metadata {*/
|
///* padding-top: 15px;*/
|
///* border-top: 1px solid #f0f0f0;*/
|
///*}*/
|
//
|
///*.group-metadata .metadata-field {*/
|
///* margin-bottom: 12px;*/
|
///*}*/
|
//
|
///*.group-metadata label {*/
|
///* display: block;*/
|
///* font-size: 12px;*/
|
///* font-weight: 500;*/
|
///* color: #333;*/
|
///* margin-bottom: 4px;*/
|
///*}*/
|
//
|
///*.group-metadata input,*/
|
///*.group-metadata textarea {*/
|
///* width: 100%;*/
|
///* border: 1px solid #ddd;*/
|
///* border-radius: 4px;*/
|
///* padding: 6px 8px;*/
|
///* font-size: 13px;*/
|
///* transition: border-color .2s ease;*/
|
///*}*/
|
//
|
///*.group-metadata input:focus,*/
|
///*.group-metadata textarea:focus {*/
|
///* outline: none;*/
|
///* border-color: #2196F3;*/
|
///* box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
|
///*}*/
|
//
|
///*.group-metadata textarea {*/
|
///* resize: vertical;*/
|
///* min-height: 60px;*/
|
///*}*/
|
//
|
///*!* Drag feedback animations *!*/
|
///*@keyframes dragHover {*/
|
///* 0% { transform: scale(1); }*/
|
///* 50% { transform: scale(1.02); }*/
|
///* 100% { transform: scale(1); }*/
|
///*}*/
|
//
|
///*.drag-hover {*/
|
///* animation: dragHover .6s ease-in-out infinite;*/
|
///*}*/
|
//
|
///*!* Status indicators for grouped uploads *!*/
|
///*.upload-group[data-status="uploading"] {*/
|
///* border-color: #FF9800;*/
|
///* background: #fff8f0;*/
|
///*}*/
|
//
|
///*.upload-group[data-status="uploaded"] {*/
|
///* border-color: #4CAF50;*/
|
///* background: #f1f8e9;*/
|
///*}*/
|
//
|
///*.upload-group[data-status="error"] {*/
|
///* border-color: #f44336;*/
|
///* background: #ffebee;*/
|
///*}*/
|
//
|
///*!* Progress indicators for groups *!*/
|
///*.group-progress {*/
|
///* height: 3px;*/
|
///* background: #f0f0f0;*/
|
///* border-radius: 2px;*/
|
///* overflow: hidden;*/
|
///* margin-top: 10px;*/
|
///*}*/
|
//
|
///*.group-progress-fill {*/
|
///* height: 100%;*/
|
///* background: #2196F3;*/
|
///* transition: width .3s ease;*/
|
///* border-radius: 2px;*/
|
///*}*/
|
//
|
///*!* Responsive design *!*/
|
///*@media (max-width: 768px) {*/
|
///* .upload.field.groupable {*/
|
///* grid-template-columns: 1fr;*/
|
///* gap: 15px;*/
|
///* }*/
|
//
|
///* .upload.field.groupable .upload-sidebar {*/
|
///* border-left: none;*/
|
///* border-top: 2px solid #e0e0e0;*/
|
///* padding-left: 0;*/
|
///* padding-top: 15px;*/
|
///* }*/
|
//
|
///* .group-items {*/
|
///* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));*/
|
///* gap: 8px;*/
|
///* }*/
|
//
|
///* .groups-container {*/
|
///* max-height: 400px;*/
|
///* }*/
|
///*}*/
|
//
|
///*!* Accessibility improvements *!*/
|
///*.upload-item.groupable:focus {*/
|
///* outline: 2px solid #2196F3;*/
|
///* outline-offset: 2px;*/
|
///*}*/
|
//
|
///*.group-drop-zone:focus-within {*/
|
///* border-color: #2196F3;*/
|
///* background: #f0f8ff;*/
|
///*}*/
|
//
|
///*!* High contrast mode support *!*/
|
///*@media (prefers-contrast: high) {*/
|
///* .upload-group {*/
|
///* border-width: 2px;*/
|
///* }*/
|
//
|
///* .group-drop-zone {*/
|
///* border-width: 3px;*/
|
///* }*/
|
//
|
///* .upload-item.groupable.dragging {*/
|
///* border: 3px solid #2196F3;*/
|
///* }*/
|
///*}*/
|
//
|
///*!* Selection Controls *!*/
|
///*.selection-controls {*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* gap: 1rem;*/
|
///* flex-wrap: wrap;*/
|
///*}*/
|
//
|
///*.selection-actions {*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* gap: 1rem;*/
|
///* padding: .5rem 1rem;*/
|
///* background-color: var(--action-50);*/
|
///* border-radius: var(--radius);*/
|
///* color: var(--contrast);*/
|
///* font-size: .9rem;*/
|
///*}*/
|
//
|
///*.selection-actions button {*/
|
///* background: rgba(255, 255, 255, .2);*/
|
///* border: 1px solid rgba(255, 255, 255, .3);*/
|
///* color: inherit;*/
|
///* padding: .25rem .5rem;*/
|
///* border-radius: var(--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: var(--base-100);*/
|
///* border-radius: var(--radius-outer);*/
|
///* margin-bottom: 1rem;*/
|
///*}*/
|
//
|
///*!* Upload Item Enhancements *!*/
|
///*.upload-item {*/
|
///* position: relative;*/
|
///* background: 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-rgb),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 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: var(--base);*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* justify-content: center;*/
|
///* box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
|
///*}*/
|
//
|
///*.upload-item[data-status="processing"] .status {*/
|
///* background: var(--warning);*/
|
///*}*/
|
//
|
///*.upload-item[data-status="uploaded"] .status {*/
|
///* background: var(--success);*/
|
///*}*/
|
//
|
///*.upload-item[data-status="error"] .status {*/
|
///* background: var(--danger);*/
|
///*}*/
|
//
|
///*!* Group Enhancements *!*/
|
///*.upload-group {*/
|
///* background: var(--base-50);*/
|
///* border-radius: var(--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: 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: var(--action-50);*/
|
///*}*/
|
//
|
///*.group-count {*/
|
///* font-size: .85rem;*/
|
///* color: var(--text-muted);*/
|
///*}*/
|
//
|
///*.group-actions {*/
|
///* display: flex;*/
|
///* gap: .5rem;*/
|
///*}*/
|
//
|
///*.group-actions button {*/
|
///* background: var(--base);*/
|
///* border: 1px solid var(--base-200);*/
|
///* border-radius: var(--radius);*/
|
///* padding: .5rem;*/
|
///* cursor: pointer;*/
|
///* transition: all .2s ease;*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* justify-content: center;*/
|
///*}*/
|
//
|
///*.group-actions button:hover {*/
|
///* background: var(--action-50);*/
|
///* color: var(--contrast);*/
|
///* border-color: var(--action-50);*/
|
///*}*/
|
//
|
///*.group-actions .delete-group:hover {*/
|
///* background: var(--danger);*/
|
///* border-color: var(--danger);*/
|
///*}*/
|
//
|
///*!* Group Content *!*/
|
///*.group-content {*/
|
///* min-height: 120px;*/
|
///*}*/
|
//
|
///*.group-drop-zone {*/
|
///* border: 2px dashed var(--base-300);*/
|
///* border-radius: var(--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: var(--action-50);*/
|
///* background: rgba(255, 0, 128, .05);*/
|
///* color: var(--action-50);*/
|
///*}*/
|
//
|
///*.group-items {*/
|
///* display: grid;*/
|
///* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
|
///* gap: 1rem;*/
|
///* padding: 1rem 0;*/
|
///*}*/
|
//
|
///*.group-item {*/
|
///* position: relative;*/
|
///* aspect-ratio: 1;*/
|
///* border-radius: var(--radius);*/
|
///* overflow: hidden;*/
|
///* background: var(--base);*/
|
///* transition: transform .2s ease;*/
|
///*}*/
|
//
|
///*.group-item:hover {*/
|
///* transform: scale(1.02);*/
|
///*}*/
|
//
|
///*.group-item img {*/
|
///* width: 100%;*/
|
///* height: 100%;*/
|
///* object-fit: cover;*/
|
///*}*/
|
//
|
///*.group-item .overlay {*/
|
///* position: absolute;*/
|
///* top: 0;*/
|
///* left: 0;*/
|
///* right: 0;*/
|
///* bottom: 0;*/
|
///* background: rgba(0, 0, 0, .6);*/
|
///* opacity: 0;*/
|
///* transition: opacity .2s ease;*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* justify-content: center;*/
|
///* gap: .5rem;*/
|
///*}*/
|
//
|
///*.group-item:hover .overlay {*/
|
///* opacity: 1;*/
|
///*}*/
|
//
|
///*.group-item .overlay button {*/
|
///* background: rgba(255, 255, 255, .9);*/
|
///* border: none;*/
|
///* border-radius: 50%;*/
|
///* width: 2rem;*/
|
///* height: 2rem;*/
|
///* display: flex;*/
|
///* align-items: center;*/
|
///* justify-content: center;*/
|
///* cursor: pointer;*/
|
///* transition: all .2s ease;*/
|
///*}*/
|
//
|
///*.group-item .set-featured {*/
|
///* color: var(--warning);*/
|
///*}*/
|
//
|
///*.group-item .set-featured:hover {*/
|
///* background: var(--warning);*/
|
///* color: white;*/
|
///*}*/
|
//
|
///*.group-item .remove-from-group:hover {*/
|
///* background: var(--danger);*/
|
///* color: white;*/
|
///*}*/
|
//
|
///*!* Empty Group State *!*/
|
///*.empty-group {*/
|
///* border: 4px dashed var(--base-200);*/
|
///* border-radius: var(--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: var(--action-50);*/
|
///* background: rgba(255, 0, 128, .05);*/
|
///* color: var(--action-50);*/
|
///*}*/
|
//
|
///*!* Sidebar *!*/
|
///*.sidebar {*/
|
///* background: 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: var(--action-50);*/
|
///* color: 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: 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: 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 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: 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 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: 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: 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: var(--base);
|
// border-bottom: 2px solid var(--action-0);
|
// }
|
//
|
// /* Preview actions - sticky at top */
|
// .preview-actions {
|
// position: sticky;
|
// top: 0;
|
// z-index: 10;
|
// background: var(--base);
|
// border-bottom: 1px solid var(--base-200);
|
// flex-shrink: 0;
|
// }
|
//
|
// /* Preview grid - scrollable area */
|
// .item-grid.preview {
|
// flex: 1;
|
// grid-template-columns: repeat(3, 1fr);
|
// gap: .75rem;
|
// padding: .5rem;
|
// margin-top: 0;
|
// }
|
// .item-grid + .hint {
|
// margin-top: 0;
|
// }
|
//
|
// /* Groups section - bottom half with sticky header */
|
// .sidebar {
|
// background: var(--base-200);
|
// border-top: 3px solid var(--action-50);
|
// }
|
//
|
// /* Groups header - sticky */
|
// .sidebar .header {
|
// border-bottom: 1px solid var(--base-200);
|
// padding: 1rem;
|
// flex-shrink: 0;
|
// }
|
//
|
// /* Create group button */
|
// .create-group-from-selection {
|
// margin: 0 1rem 1rem 1rem;
|
// flex-shrink: 0;
|
// min-height: 44px; /* Touch target */
|
// padding: .75rem 1rem;
|
// font-size: .9rem;
|
// }
|
//
|
// /* Groups container - scrollable */
|
// .item-grid.groups {
|
// flex: 1;
|
// margin: 0;
|
// grid-template-columns: repeat(2, 1fr); /* Single column on mobile */
|
// gap: 1rem;
|
// }
|
//
|
// /* Enhanced empty group for mobile */
|
// .empty-group {
|
// aspect-ratio: unset;
|
// grid-column: 1/-1;
|
// transition: all .2s ease;
|
// }
|
//
|
// .item-grid.groups .item-grid {
|
// grid-template-columns: repeat(3, 1fr);
|
// }
|
// .item-grid.groups .item-grid details {
|
// display: none;
|
// }
|
//
|
// .empty-group:hover,
|
// .empty-group.dragover {
|
// border-color: var(--action-0);
|
// background: var(--action-rgb-subtle-hover);
|
// transform: scale(1.02);
|
// }
|
//
|
// /* Upload button - fixed at bottom */
|
// .submit-uploads {
|
// position: fixed !important;
|
// bottom: calc(var(--btn) + .5rem);
|
// right: .5rem;
|
// z-index: 20;
|
// height: 3rem;
|
// font-size: 1.1rem;
|
// font-weight: 600;
|
// box-shadow: rgba(var(--base-rgb),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: var(--base);
|
// border: 1px solid var(--base-200);
|
// transition: transform .2s ease;
|
// }
|
//
|
// .upload-item:hover {
|
// transform: scale(1.02);
|
// }
|
//
|
// /* Mobile-friendly actions overlay */
|
// .upload-item .actions {
|
// padding: .5rem;
|
// }
|
//
|
// .upload-item .actions button {
|
// min-width: 44px;
|
// min-height: 44px;
|
// padding: .75rem;
|
// border-radius: var(--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: var(--base-100);
|
// border-radius: var(--radius);
|
// border: 1px solid var(--base-200);
|
// padding: 1rem;
|
// margin-bottom: 1rem;
|
// }
|
//
|
// .upload-group .group-header {
|
// display: flex;
|
// justify-content: space-between;
|
// align-items: center;
|
// margin-bottom: 1rem;
|
// padding-bottom: .5rem;
|
// border-bottom: 1px solid var(--base-200);
|
// flex-wrap: wrap;
|
// gap: .5rem;
|
// }
|
//
|
// .upload-group .group-actions {
|
// display: flex;
|
// gap: .5rem;
|
// flex-wrap: wrap;
|
// }
|
//
|
// .upload-group .group-actions button {
|
// flex: 1;
|
// min-width: 100px;
|
// min-height: 44px;
|
// padding: .5rem .75rem;
|
// font-size: .9rem;
|
// border-radius: var(--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 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: var(--action-0) !important;
|
// transform: scale(1.05);
|
// animation: mobile-drop-pulse .8s infinite ease-in-out;
|
// }
|
//
|
// @keyframes mobile-drop-pulse {
|
// 0%, 100% {
|
// background-color: var(--action-rgb-subtle);
|
// transform: scale(1.02);
|
// }
|
// 50% {
|
// background-color: var(--action-rgb-subtle-hover);
|
// transform: scale(1.04);
|
// }
|
// }
|
//
|
// /* Enhanced selection states */
|
// .upload-item.selected {
|
// border: 2px solid var(--action-0);
|
// background-color: var(--action-rgb-subtle);
|
// }
|
//
|
// .upload-item.selected::after {
|
// content: '✓';
|
// position: absolute;
|
// top: .5rem;
|
// right: .5rem;
|
// background: var(--action-0);
|
// color: white;
|
// border-radius: 50%;
|
// width: 24px;
|
// height: 24px;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// font-size: 12px;
|
// font-weight: bold;
|
// z-index: 10;
|
// animation: selection-pop .3s ease;
|
// }
|
//
|
// @keyframes selection-pop {
|
// 0% {
|
// transform: scale(0);
|
// opacity: 0;
|
// }
|
// 70% {
|
// transform: scale(1.2);
|
// opacity: 1;
|
// }
|
// 100% {
|
// transform: scale(1);
|
// opacity: 1;
|
// }
|
// }
|
//
|
// /* Enhanced details/summary for mobile */
|
// .upload-item details summary {
|
// padding: .75rem;
|
// background: var(--base-100);
|
// border-radius: var(--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 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 var(--base-200);
|
// transition: border-color .2s ease;
|
// }
|
//
|
// .upload-meta input:focus,
|
// .upload-meta textarea:focus {
|
// border-color: var(--action-0);
|
// outline: none;
|
// box-shadow: 0 0 0 3px var(--action-rgb-subtle);
|
// }
|
//}
|
//
|
///* Tablet adjustments */
|
//@media (min-width: 769px) and (max-width: 1024px) {
|
// .group-display {
|
// grid-template-columns: 1fr;
|
// gap: 1.5rem;
|
// }
|
//
|
// .item-grid.preview {
|
// grid-template-columns: repeat(4, 1fr);
|
// }
|
//
|
// .item-grid.groups {
|
// grid-template-columns: repeat(2, 1fr);
|
// }
|
//}
|
//
|
//
|
//body:has(.group-display:not([hidden])) {
|
// overflow:hidden;
|
//}
|
//
|
//.today_hours .group-fields {
|
// width: 100%;
|
// display: flex;
|
// justify-content: center;
|
// gap: 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: var(--base);
|
//}
|
//
|
//.form-actions {
|
// display: flex;
|
//}
|
//
|
//.spinner {
|
// width: 12px;
|
// height: 12px;
|
// border: 2px solid transparent;
|
// border-top: 2px solid var(--action-50);
|
// border-radius: 50%;
|
// animation: spin 1s linear infinite;
|
//}
|
//
|
//@keyframes spin {
|
// 0% { transform: rotate(0deg); }
|
// 100% { transform: rotate(360deg); }
|
//}
|
