From 33d87c546c3f5c0b5a610ec48d7fca02a86c459b Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Tue, 30 Sep 2025 04:02:39 +0000
Subject: [PATCH] cleanup
---
/dev/null | 349 ----------------------------------------------------------
1 files changed, 0 insertions(+), 349 deletions(-)
diff --git a/dash-backup.css b/dash-backup.css
deleted file mode 100644
index 32a5185..0000000
--- a/dash-backup.css
+++ /dev/null
@@ -1,5809 +0,0 @@
-:target {
- outline: none!important;
- padding: 0!important;
-}
-:root {
- --height: 3rem;
-}
-body:has(#theme-switcher:checked) {
-
-}
-
-.dashboard h1:first-of-type {
- margin-top: 0!important;
-}
-main > footer {
- max-width: 100%!important;
- position: fixed;
- z-index: 20;
- bottom: 0;
- left: 0;
- right: 0;
- width: 100%;
- margin: 4rem 0 0 0!important;
- height: var(--height);
- padding: 0!important;
- background-color: var(--base);
- box-shadow: var(--shadow);
-}
-main>* {
- max-width: min(768px, 90vw)!important;
- margin: 0 auto!important;
-}
-main h1 {
- margin: 0!important;
- font-size: var(--large);
-}
-main h1 + p + h2 {
- font-size: var(--medium);
- text-transform: none;
- margin: 0!important;
-}
-.replace {
- max-width: 90vw!important;
- margin: 1rem auto!important;
-}
-
-.dash .replace {
- text-align: center;
-}
-.dash input {
- text-align: center;
-}
-.dash .true-false {
- display: flex;
- justify-content: center;
- margin: 0;
-}
-.dash button[type=submit] {
- width: 50%;
- margin: 1rem auto;
-}
-
-
-form h2 {
- margin: .5rem 0 1.5rem!important;
-}
-
-.dashboard-nav {
- height: var(--height);
- max-width:100vw;
- padding: 0 .5rem;
-}
-.dashboard-nav ul {
- height: var(--height);
- overflow-x: auto;
-}
-.dashboard-nav li + li:before {
- display: none!important;
-}
-.dashboard-nav a {
- height: var(--height);
- min-width: var(--height);
- padding: 0 .75rem;
- color: var(--contrast)!important;
-}
-.dashboard-nav a .icon {
- margin: 0;
-}
-.dashboard-nav a span {
- display: none;
-}
-.dashboard-nav .current a:hover,
-.dashboard-nav a:hover {
- background-color: var(--action-0)!important;
- color: var(--action-contrast)!important;
-}
-.dashboard-nav .current a {
- background-color: var(--base-100)!important;
- color: var(--contrast)!important;
-}
-.dashboard-nav .current a span {
- display: block;
-}
-
-
-
-/* Loading states */
-main {
- opacity: 1;
- transition: opacity .3s ease-in-out;
- padding-bottom: 7rem;
- min-height: calc(100vh - 12rem);
-}
-
-main.transitioning {
- opacity: 0;
-}
-.loading {
- opacity: .7;
-}
-
-
-/*Upload overlay*/
-.loading-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: var(--overlay-medium);
- display: flex;
- align-items: center;
- justify-content: center;
- opacity: 0;
- visibility: hidden;
- transition: opacity .3s ease, visibility .3s ease;
- z-index: 9999;
-}
-
-.loading-overlay.active {
- opacity: 1;
- visibility: visible;
-}
-
-.loading-overlay .wrapper {
- background-color: var(--base);
- padding: 2rem;
- border-radius: 8px;
- text-align: center;
- max-width: 90%;
- width: 400px;
-}
-
-.upload-spinner {
- width: 50px;
- height: 50px;
- border: 5px solid var(--base-200);
- border-top: 5px solid var(--action-0);
- border-radius: 50%;
- margin: 0 auto 1rem;
- animation: spin 1s linear infinite;
-}
-
-.upload-status h3 {
- margin: 0 0 .5rem;
- color: var(--contrast);
-}
-
-.upload-message {
- margin: 0;
- color: var(--contrast-100);
- font-size: var(--small);
-}
-
-
-
-/* Optional: Add a pulsing effect to the text */
-.upload-message {
- animation: flicker 2s infinite;
-}
-
-@keyframes flicker {
- 0% { opacity: .6; }
- 50% { opacity: 1; }
- 100% { opacity: .6; }
-}
-
-.form-section {
- max-height: 0;
- transform: scale(0);
- visibility: hidden;
-}
-form:not(:has(.form-section.active)) .form-section:first-of-type,
-.form-section.active {
- max-height: fit-content;
- transform: scale(1);
- visibility: visible;
-}
-
-
-
-.form-sections {
- --height: fit-content;
- position: fixed;
- bottom: 3rem;
- left: 0;
- right: 0;
- background-color: var(--base-100);
- box-shadow: var(--shadow);
- z-index: 10;
-}
-.form-sections ul {
- gap: 0;
-}
-.form-sections li {
- width: 50%;
-}
-
-.form-sections a:visited,
-.form-sections a {
- padding: .25rem;
- width: 100%;
- color: var(--contrast);
-}
-.replace:not(:has(.form-section.active)) .form-sections li:first-of-type a,
-.current a {
- background-color: var(--base-200);
- color: var(--contrast);
-}
-.form-sections .icon {
- margin: 0;
-}
-@media (min-width: 768px){
- .form-sections ul {
- flex-wrap: nowrap;
- }
- .form-sections li {
- width: 100%;
- }
-}
-
-.submit-container {
- position: fixed;
- z-index: 20;
-}
-.submit-container button {
- padding: 0;
- width: 3rem;
- height: 3rem;
- color: var(--contrast-200);
- background-color: var(--base-200);
- justify-content: center;
- border: 3px solid transparent;
-}
-.submit-container .save-popup {
- position: absolute;
- z-index: -1;
- top: calc(50% - (1.875rem / 2));
- font-size: var(--small);
- background-color: var(--action-0);
- color: var(--action-contrast);
- padding: .25rem .5rem;
- border-radius: 4px;
- white-space: nowrap;
- visibility: hidden;
- transition: all var(--transition-base);
- opacity: 0;
-}
-.submit-container .icon {
- --w: 2em;
-}
-.save-popup::before {
- content: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- border-top: .5rem solid transparent;
- border-bottom: .5rem solid transparent;
-}
-.save-popup.show {
- opacity: 1;
- visibility: visible;
-}
-
-@media (max-width: 767px){
- .submit-container {
- top: 3.5rem;
- right: .5rem;
- }
- .save-popup {
- right: 0;
- }
- .save-popup:before{
- right: -.25rem;
- border-left: .5rem solid var(--action-0);
- }
- .save-popup.show {
- right: calc(100% + .5rem);
- }
-}
-@media (min-width: 768px){
- .submit-container {
- bottom: 6rem;
- left: .5rem;
- }
- .save-popup {
- left: 0;
- }
- .save-popup:before{
- left: -.25rem;
- border-right: .5rem solid var(--action-0);
- }
- .save-popup.show {
- left: calc(100% + .5rem);
- }
-}
-
-.autosaving span.save,
-.autosaving button[type=submit] {
- border-color: var(--base-200);
- border-top-color: var(--action-0);
- border-bottom-color: var(--action-50);
- border-radius: 50%;
- color: var(--contrast-200);
- transition: color .25s var(--timing) var(--function);
- transition-property: color, background-color, border;
- animation: spin 1s linear infinite;
-}
-.autosaving .submit-container {
- animation: pulse 1s linear infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-@keyframes pulse {
- 0% {
- transform: scale(.85);
- opacity: .6;
- }
- 50% {
- transform:scale(1);
- opacity: 1; }
- 100% {
- transform: scale(.85);
- opacity: .6; }
-}
-
-.item-link[href=""]{
- display: none;
-}
-.item-link {
- position: fixed;
- bottom: 5rem;
- right: 1.5rem;
- text-transform: uppercase;
- color: var(--action-0);
- background-color: var(--base);
- border-radius: 4px;
- padding: .25rem .5rem;
- box-shadow: var(--subtle);
-}
-.field {
- margin: 3rem .5rem;
-}
-.field:has([required]) label::after {
- content: 'required';
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23B7332E" viewBox="0 0 256 256"><path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path></svg>');
- display: inline-block;
- background-position: left center;
- background-size: 1.2em;
- padding-left: 1.3em;
- background-repeat: no-repeat;
- font-weight: 100;
- text-transform: none;
- font-size: .75em;
- vertical-align: super;
-
-}
-.field:has([required]) label {
- position: relative;
-}
-.repeater-items .field {
- margin: 1rem 0;
-}
-.taxonomy .field-group-header {
- display: flex;
- justify-content: space-between;
-}
-
-.add-item-btn {
- padding: .5em;
- background: var(--base-100);
- border: 1px solid var(--contrast-200);
- border-radius: .25rem;
- cursor: pointer;
- font-size: .875rem;
-}
-.add-item-btn .icon {
- --w: 1.5em;
-}
-
-.add-item-btn:hover {
- background: var(--base-200);
-}
-summary .type-label {
- display: flex;
- align-items: center;
- gap: 1rem;
-}
-summary .type-label .icon {
- position: relative;
- top: -.25em;
-}
-
-/** Tabs **/
-.tabs {
- display: flex;
- margin-bottom: 1.5rem;
- border-bottom: 2px solid var(--base-200);
- flex-wrap: wrap;
-}
-.tabs.parent {
- max-width: 100vw;
- background-color: var(--base);
- padding: .5rem;
- width: 100vw;
- position: relative;
- left: -2.1rem;
- margin: 1rem 0;
-}
-.tab-content h2 {
- font-size: var(--large);
- margin: 0!important;
-}
-.tab-content .tab-navigation,
-.tab-content button[type=submit] {
- display: inline-flex;
- width: 48%;
- background-color: var(--action-200);
- color: var(--contrast-200);
-}
-
-.tab-navigation.next {
- display: flex;
- margin-left: auto;
-}
-.tab-content .tab-navigation + button {
- display: inline-flex;
- margin-left: 3%;
-}
-
-.tabs > button {
- padding: .75rem 1.5rem;
- border-radius: 0;
- border: none;
- background: none;
- font-size: 1.1rem;
- font-weight: bold;
- letter-spacing: .05em;
- text-transform: uppercase;
- cursor: pointer;
- position: relative;
- color: inherit;
-}
-.tabs > button h2 {
- font-size: 1.1rem;
- line-height: 1;
- margin: 0!important;
-}
-.tabs > button:hover,
-.tabs > button:focus {
- background-color: var(--base-200);
-}
-.tabs > button::after {
- content: '';
- position: absolute;
- bottom: -2px;
- left: 0;
- width: 0;
- height: 3px;
- background-color: var(--action-50);
- transition: width .3s;
-}
-.tabs > button.active::after {
- width: 100%;
-}
-
-.tabs > button.add-item-btn {
- margin-left: auto;
- background-color: var(--action-50);
- border-radius: 4px;
- padding: .5em;
- font-weight: normal;
- border: 1px solid var(--action-50);
-}
-.tabs > button.add-item-btn:focus,
-.tabs > button.add-item-btn:hover {
- background-color: var(--base);
-}
-
-.type-filter:not(.active) span:not(.count){
- display: none;
-}
-.type-filter:not(.active):hover span:not(.count){
- display: block;
-}
-/** News **/
-.item-grid.list-view .item.news {
- flex-direction: column;
-}
-.item.news h3 {
- font-size: var(--medium);
- margin: 0!important;
-}
-.item.news summary .image {
- width: 5rem;
- background-color: var(--base-200);
- border-radius: 4px;
- aspect-ratio: 1;
-}
-.item.news summary {
- gap: 1rem;
-}
-.item.news summary .summary {
- width: 100%;
-}
-.item.news summary .header {
- display: flex;
- justify-content: space-between;
- padding: .5rem 0;
-}
-.item .vote {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- gap: .5em;
- margin-top: auto;
-}
-.vote .count {
- white-space: nowrap;
-}
-.item .vote .count:nth-of-type(2) {
- margin-right: 2rem;
-}
-/** Favourites **/
-.favourites-title {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-main button {
- display: flex;
- align-items: center;
- gap: .5rem;
-}
-
-.my-lists {
- margin: .5rem 0;
-}
-
-details.uploader .file-upload-container {
- margin: 1rem var(--mr) 1rem var(--ml);
- max-width: var(--maxWidth);
-}
-details .no-items {
- text-align: center;
- font-style: italic;
- background-color: var(--base-50);
- padding: var(--outerPadding);
- border-radius: var(--innerRadius);
-}
-
-.controls {
- display: flex;
- flex-wrap: wrap;
- gap: .5rem;
- justify-content: space-between;
-}
-
-.controls label .icon + span {
- transform: scaleX(0);
- max-width: 0;
-}
-
-.type-filters:hover label:hover .icon + span,
-.controls label:hover .icon + span,
-.controls :checked + label .icon + span {
- transform: scaleX(1);
- max-width: fit-content;
-}
-.type-filters,
-.view-controls {
- display: flex;
- flex-wrap: wrap;
- gap: .5rem;
-}
-
-/** Generalized Type Filters **/
-details.type-filters {
- flex-direction: column;
-}
-details.type-filters form.filters {
- flex-direction: column;
-}
-
-details.type-filters div.filters {
- flex-wrap: wrap;
-}
-
-details.type-filters .order-options {
- width: 100%;
- display: flex;
-}
-details.type-filters .order-options > div {
- display: flex;
-}
-details.type-filters .order-by {
- width: 100%;
-}
-details.type-filters .order-by .radio-group-label {
- width: 100%;
- display: flex;
- gap: 1rem;
-}
-details.type-filters label {
- display: flex;
- align-items: center;
- gap: .5rem;
-}
-
-details.type-filters label {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: .35rem;
- white-space: nowrap;
- width: fit-content;
- height: fit-content;
- cursor: pointer;
- border: 1px solid var(--base-200);
- border-radius: 4px;
- font-size: .875rem;
- transition: border-color var(--transition-base);
- margin-bottom: .5rem;
-}
-.filter-toggle .icon {
- margin-right: .5rem;
-}
-details.type-filters label:hover,
-details.type-filters input:checked + label {
- background-color: var(--light-0);
- border-color: var(--action-0);
- color: var(--action-0);
-}
-details.type-filters .order-direction {
- justify-content: flex-end;
-}
-
-/** Generalized Modal **/
-
-/* Grid */
-.create-item {
- left: auto!important;
- right: 1rem;
- bottom: var(--offHeight)!important;
-}
-body:has(.group-display:not([hidden])) button.create-item{
- display: none;
-}
-.uploader .groups,
-.item-grid {
- --padding: 0;
- padding: var(--padding);
- transition: padding var(--transition-base);
-}
-.uploader .groups,
-.item-grid.grid-view {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: .5rem;
- margin-top: 2rem;
-}
-
-.item-grid.empty {
- grid-template-columns: repeat(1, 1fr)!important;
-}
-.item-grid.empty div {
- text-align: center;
- border-radius: var(--innerRadius);
- background-color: var(--base-100);
-}
-.item-grid.empty h3 .icon {
- display: inline-flex;
- vertical-align: middle;
- margin: 0 1rem;
-}
-.uploader .group,
-.item {
- width: calc(100% - (var(--padding) * 2));
-}
-.item-grid .item {
- user-select: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
-}
-.item-grid .item .logo {
- --w: 100%;
- opacity: .2;
-}
-/** Grid View **/
-.item-grid:not(.list-view) .item {
- display: flex;
- position: relative;
- flex-direction: column;
-}
-.item-grid:not(.list-view) button.favourite,
-.item-grid:not(.list-view) .item-select label {
- position: absolute;
- z-index: 15;
- width: 3em;
- height: 3em;
- display: flex;
- justify-content: center;
- align-items: center;
- top: .125rem;
- padding: 0!important;
- border-radius: var(--innerRadius);
- background-color: var(--overlay-light);
- color: var(--base-200);
-}
-.item-grid:not(.list-view) button.favourite:hover,
-.item-grid:not(.list-view) .item-select label:hover {
- background-color: var(--overlay-heavy);
- color: var(--contrast);
-}
-.item-grid:not(.list-view) .item-select label::before {
- border-color: var(--base-200);
- position: relative;
- top: 0;
- left: 0;
- transform: none;
-}
-
-.item-grid:not(.list-view) .item-select label::after {
- left: calc(50% - 4px)!important;
-}
-.item-grid:not(.list-view) .item-select label:hover::before {
- border-color: var(--contrast);
-}
-.item-grid:not(.list-view) .item-select label {
- left: .1255rem;
-}
-.item-grid:not(.list-view) button.favourite {
- right: .125rem;
-}
-.item-grid:not(.list-view) img {
- width: 100%;
- max-width: 100%;
- height: auto;
- aspect-ratio: 1;
- object-fit: cover;
-}
-/** List View **/
-.replace:not(:has(.list-view)) button[data-view=grid],
-.replace:has(.list-view) button[data-view=list] {
- background-color: var(--base);
-}
-.item-grid.list-view .item {
- display: flex;
- position: relative;
- flex-direction: row;
- margin: .5rem 0;
- padding: .25rem .5rem;
- gap: .5rem;
-}
-.item-grid.list-view .item:nth-of-type(even){
- background-color: var(--base-100);
-}
-
-.item-grid.list-view .item-select label{
- display: flex;
- height: 100%;
- justify-content: center;
- align-items: center;
- padding: 0 .5rem!important;
-}
-.item-grid.list-view .item-select label::after {
- /*left: calc(50% - 4px)!important;*/
-}
-.item-grid.list-view .item-select label::before {
- position: relative;
- top: 0;
- transform: none;
-}
-.item-grid.list-view .item-select label:hover {
- background-color: var(--base);
-}
-
-.item-grid.list-view .item-select label:hover::before {
- border-color: var(--action-0);
-}
-.item-grid.list-view img {
- width: 200px;
- height: 200px;
- aspect-ratio: 1;
- object-fit: cover;
-}
-.item-grid.list-view .item-info {
- width: 100%;
-}
-.item-grid .item-info h3 {
- margin: 0!important;
- text-align: right;
- font-size: var(--medium);
- text-transform: none;
-}
-.item-grid .item-info a {
- text-align: right;
- width: 100%;
- display: block;
- font-weight: normal;
- font-family: var(--body);
-}
-.item-grid .item-info a::before,
-.item-grid .item-info a::after {
- display: none;
-}
-.item-grid.list-view .item-info .toggle-notes {
- display: none;
-}
-.item-grid.list-view .item-info .notes-content[hidden]{
- display: block!important;
-}
-.item-grid.list-view .item-info .notes-content {
- margin-top: 1rem;
-}
-.no-favourites {
- text-align: center;
-}
-.no-favourites h3 {
- margin: 0 auto!important;
-}
-/**
-Limit reached
- */
-.reached .current {
- color: var(--action-50);
-}
-.reached textarea,
-.reached input {
- border: 2px solid var(--action-50);
-}
-/**
-Groups
- */
-.groups {
- gap: 1rem;
-}
-details.uploaded .file-upload-container,
-details:not(.uploaded) .selection-container {
- display: none;
-}
-.uploading + .selection-container {
- display: flex!important;
-}
-.selection-container #save-changes {
- position: sticky;
- top: 3rem;
- left: 100%;
- border: 1px solid transparent;
- background-color: var(--action-50);
- box-shadow:var(--shadow);
- z-index: 5;
-}
-.selection-container #save-changes:hover {
- background-color: var(--base);
- border: 1px solid var(--action-50);
- color: 1px solid var(--action-50);
-}
-
-.group {
- padding: 1rem .66rem;
- background-color: var(--base-50);
- border-radius: var(--outerRadius);
-}
-.group.empty {
- aspect-ratio: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- border: 4px dashed var(--base-200);
-}
-.group.empty .items {
- padding: 0;
- margin-top: 0;
-}
-
-.group .group-header {
- display: flex;
- position: relative;
-}
-.group .group-header label {
- position: absolute;
- top: -1.5rem;
-}
-.group .items {
- margin-top: 1rem;
- padding: 1rem;
- border-radius: var(--innerRadius);
- background-color: var(--base);
-}
-.group .item-actions {
- display: flex;
- justify-content: space-between;
- width: 100%;
-}
-.group .item-actions > button,
-.group .item-actions label {
- flex: 1;
- padding: .25em!important;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 0;
-}
-.group .item-actions :checked + label {
- background-color: var(--action-50);
- color: var(--contrast);
-}
-.group .item-actions :checked + label:hover {
- border: 1px solid var(--action-50);
- background-color: transparent;
- color: var(--action-50);
-}
-.group .item-actions label::before {
- display: none!important;
-}
-
-.group-item img,
-.preview-item img {
- width: 250px;
- height: auto;
- object-fit: cover;
- aspect-ratio: 1;
-
-}
-.uploading .preview-item img,
-.uploading .group-item img{
- animation: uploading 3s ease-in-out infinite alternate;
-}
-@keyframes uploading {
- 0% {
- opacity: .6;
- filter: sepia(.3) grayscale(.3);
- transform: scale(.9);
- }
- 100% {
- opacity: 1;
- filter: sepia(0) grayscale(0);
- transform: scale(1);
- }
-}
-
-.image-actions {
- display: flex;
- gap: 1rem;
- flex-wrap: wrap;
-}
-
-.group.drop {
- border: 2px dashed var(--action-0);
- background: var(--action-rgb-subtle);
-}
-
-.group .items {
- padding: 1rem;
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 1rem;
-}
-
-.group-content {
- min-height: 100px;
- padding: 1rem;
-}
-
-.group.drop {
- background: var(--action-rgb-subtle);
- border: 2px dashed var(--action-0);
-}
-.gallery .group-item,
-.gallery .preview-item {
- cursor: grab;
-}
-.group-item.dragging,
-.preview-item.dragging {
- cursor: grabbing;
- opacity: .5;
-}
-
-.items {
- display: grid;
- grid-template-columns: repeat(3,1fr);
- gap: 1rem;
-}
-
-/** Gallery **/
-.gallery .preview-item .move-image {
- cursor: grab;
- position: absolute;
- top: .5rem;
- left: .5rem;
- opacity: 0;
- transition: opacity .2s;
-}
-.gallery-preview {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- padding: .5rem;
- background-color: var(--base-100);
- border-radius: var(--outerRadius);
-}
-.gallery-preview .preview-item {
- padding: .5rem;
- background-color: var(--base);
- border-radius: var(--innerRadius);
-}
-
-.gallery .preview-item:hover .move-image {
- opacity: 1;
-}
-
-.gallery .preview-item.sortable-ghost {
- opacity: .5;
-}
-
-.gallery .preview-item.sortable-drag {
- cursor: grabbing;
-}
-
-.preview-item .upload-status {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 4px;
- background: rgba(0,0,0,.1);
-}
-
-.preview-item.error {
- border-color: red;
-}
-
-.preview-item.complete .upload-status {
- display: none;
-}
-
-/** Settings **/
-.notification-table {
- width: 100%;
-}
-.notification-table tr td:first-of-type {
- width: 100%;
-}
-.notification-table td {
- vertical-align: middle;
- padding: 0 .5rem;
-}
-.notification-table td + td {
- text-align: right;
-}
-thead th {
- width: 50%;
-}
-
-@media (max-width: 767px){
- table .radio-options {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- }
- table .radio-options label {
- width: 85%;
- margin-bottom: 0;
- }
-}
-
-/** Favourites Lists **/
-.list-card {
- background-color: var(--base-50);
- padding: 1rem;
- border-radius: var(--innerRadius);
-}
-.list-header {
- display: flex;
- justify-content: space-between;
-}
-h2 .icon {
- --w: 1.5em;
- display: inline-block;
- vertical-align: middle;
- margin-right: .75rem;
-}
-.list-card h3,
-.list-header h2 {
- margin: 0!important;
- font-size: var(--large);
-}
-.list-actions {
- display: flex;
- justify-content: space-between;
- gap: .5rem;
-}
-.list-header + .list-actions {
- justify-content: flex-end;
-}
-.create-list-btn {
- font-size: var(--small);
-}
-.meta-stats {
- display: flex;
- justify-content: space-between;
- font-style: italic;
-}
-
-/** Repeater **/
-.add-repeater-row {
- margin-left: auto;
- border: 1px solid var(--contrast-200);
-}
-
-/** Image **/
-
-.image-display {
- max-height: 0;
- overflow: hidden;
- transform: scaleY(0);
- transition: max-height var(--timing) var(--function);
- transition-property: max-height, transform;
-}
-.image-display.has-image {
- max-height: 100%;
- transform: scaleY(1);
- transition: max-height var(--timing) var(--function);
- transition-property: max-height, transform;
-}
-.file-upload-container {
- margin-top: 1rem;
-}
-
-.file-upload-wrapper {
- border: 2px dashed var(--action-0);
- border-radius: 4px;
- padding: 2rem;
- text-align: center;
- transition: all .3s ease;
- background: var(--action-rgb-subtle);
- position: relative;
- cursor: pointer;
-}
-.file-upload-wrapper h2 {
- margin: 0!important;
- font-size: var(--large);
-}
-
-.file-upload-wrapper:hover,
-.dragover {
- background: var(--action-rgb-subtle-hover);
- border-color: var(--action-0)!important;
-}
-
-.file-upload-wrapper input[type="file"] {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- cursor: pointer;
-}
-
-.file-upload-text {
- color: var(--contrast);
- margin: 0;
- font-family: var(--body);
-}
-
-.file-upload-text strong {
- color: var(--action-0);
- text-decoration: underline;
-}
-
-/* Error state */
-.file-error {
- color: var(--action-0);
- margin-top: .5rem;
- font-size: .9em;
-}
-
-.file-upload-container.uploading,
-.image-display.has-image + .file-upload-container {
- max-height: 0;
- overflow: hidden;
- transform: scaleY(0);
- transition: max-height var(--timing) var(--function), transform var(--timing) var(--function);
- transition-property: max-height, transform;
-}
-
-/** Highlighted Taxonomy **/
-.highlight-options {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: .5rem;
- margin-top: 1rem;
-}
-
-.highlight-option {
- display: flex;
- align-items: center;
- gap: .5rem;
- padding: .5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
-}
-.highlight-option label {
- margin-bottom: 0;
- font-weight: normal;
-}
-
-.highlight-option input[type=checkbox]:disabled + label {
- opacity: .5;
- cursor: not-allowed;
-}
-
-/** Item Selection **/
-
-.item-grid {
- --padding: 0;
- padding: var(--padding);
-}
-.item-grid.selecting {
- --padding: .5rem;
- transition: none;
- background-color: var(--base);
-}
-.item {
- --padding: 0;
- height: fit-content;
- padding: var(--padding);
- max-width: calc(100% - (var(--padding) * 2));
- transition: padding var(--transition-base);
-}
-.selecting .item {
- opacity: .666;
-}
-.selecting .item:has(.select-checkbox:checked) {
- --padding: .5rem;
- opacity: 1;
- background-color: var(--action-0);
- transition: none;
-}
-
-
-.item-grid.preview .preview-item {
- display: flex;
- gap: 2rem;
-}
-.preview-item .preview-image {
- width: 36%;
-}
-.preview-item .remove-file {
- width: 100%;
- background-color: var(--base);
- color: var(--contrast);
-}
-.preview-item .field:first-of-type {
- margin-top: 0!important;
-}
-.preview-item + .preview-item {
- margin-top: 2rem;
- padding-top: 2rem;
- border-top: 2px solid var(--contrast-200);
-}
-
-.item-grid.preview:empty + .hint {
- display: none;
-}
-
-body:has(.item-grid.empty) .bulk-controls {
- display: none;
-}
-.bulk-controls {
- margin: .75rem 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-.bulk-select {
- display: flex;
- justify-content: space-between;
-}
-
-.bulk-actions[hidden]{
- max-width: 0;
- max-height: 0;
- overflow: hidden;
- transform: scaleY(0);
- transition: transform var(--timing) var(--function);
- transition-property: transform, max-height;
- transform-origin: top;
- display: flex!important;
- align-items: center;
- gap: .5rem;
- position: relative;
-}
-
-.bulk-actions {
- max-width: 100%;
- max-height: 100%;
- transform: scaleY(1);
- transition: transform var(--timing) var(--function);
- transition-property: transform, max-height;
- overflow:visible;
- transform-origin: top;
- display: flex;
- gap: .25rem;
-}
-.bulk-actions select {
- margin-right: .5rem;
-}
-
-.selected-count {
- font-size: var(--small);
- font-style: italic;
- font-weight: normal;
- margin-left: 1rem;
-}
-
-.input-with-button {
- display: flex;
- gap: .5rem;
-}
-.input-with-button .icon {
- --w: 1.5em;
-}
-/** Single Edit Modal **/
-dialog > form .field {
- margin: 2rem 0;
-}
-.edit-modal [data-field=featured_image] img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- aspect-ratio: 1;
-}
-
-/** Bulk Edit Modal **/
-.bulk-edit-modal .selected {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: .5rem;
- background-color: var(--base);
- padding: .5rem;
- border-radius: var(--outerRadius);
-}
-.bulk-edit-modal .selected input[type=checkbox] {
- position: absolute;
-}
-.bulk-edit-modal .selected label::before,
-.bulk-edit-modal .selected label::after {
- display: none;
-}
-.bulk-edit-modal .selected label {
- opacity: .5;
- padding: .5rem!important;
- aspect-ratio: 1;
- margin-bottom: 0;
- max-width: 5rem;
- height: auto;
- cursor: pointer;
-}
-.bulk-edit-modal .selected label:has(input:checked) {
- opacity: 1;
- padding: 0!important;
-}
-
-.bulk-edit-modal .selected img {
- max-width: 100%;
- object-fit: cover;
- aspect-ratio: 1;
- border-radius: var(--innerRadius);
-}
-
-dialog .term-list {
- display: block;
-}
-.pagination-info {
- position: sticky;
- background-color: var(--overlay-heavy);
- top: 0;
-}
-.pagination-info:empty {
- display: none;
-}
-
-/** Quill Stuff **/
-.editor-container {
-
-}
-.editor-container .ql-toolbar {
- display: flex;
- justify-content: flex-start;
- flex-wrap: wrap;
- padding: .25rem;
- gap: 1rem;
- background-color: var(--base);
- border-top-left-radius: var(--innerRadius);
- border-top-right-radius: var(--innerRadius);
- border-bottom: 4px solid var(--base-50);
-}
-.ql-toolbar .ql-formats {
- display: flex;
- gap: .25rem;
-}
-.editor-container .ql-container {
- --padding: 1rem;
- background-color: var(--base);
- border-bottom-left-radius: var(--innerRadius);
- border-bottom-right-radius: var(--innerRadius);
- height: fit-content;
- padding: 2px;
-}
-.editor-container .ql-container .ql-editor {
- padding: var(--padding);
- width: calc(100% - (var(--padding) * 2.5));
- height: calc(100% - (var(--padding) * 2));
-}
-.ql-editor img {
- max-width: 50%;
- height: auto;
-}
-
-.ql-clipboard {
- left: -100000px;
- height: 1px;
- overflow-y: hidden;
- position: absolute;
- top: 50%;
-}
-.ql-hidden {
- display: none;
-}
-.ql-tooltip {
- position: absolute;
- transform: translateY(10px);
- background-color: var(--base-100);
- border: 1px solid var(--base);
- box-shadow: 0px 0px 5px var(--overlay-heavy);
- color: var(--contrast);
- padding: 5px 12px;
- white-space: nowrap;
-}
-
-#toolbar-einks_short_bio .ql-e_image {
- display: none;
-}
-
-/** Content Grid **/
-.all-filters {
- position: relative;
- background-color: var(--base);
- border-radius: var(--outerRadius);
- padding: .5rem;
- display: flex;
- flex-direction: column;
- gap: .5rem;
-}
-.controls .radio-options {
- gap: .25rem 1rem;
-}
-.radio-options details {
- width: 100%;
-}
-.radio-options input:not(.ch) + label,
-.controls input:not(.ch) + .radio-options label {
- width: fit-content!important;
- gap: 0;
- margin: 0;
- display: flex;
- padding: .25rem .5rem!important;
- align-items: center;
-}
-
-.radio-options label span {
- transform: scaleX(0);
- max-width: 0;
-}
-.edit-form .radio-options label span,
-.radio-options label:hover span,
-.radio-options :checked + label span {
- transform: scaleX(1);
- max-width: 100%;
-}
-.radio-options input:not(.ch):checked + label {
- padding: .25rem .5rem!important;
-}
-.controls .radio-options input:not(.ch):checked+label {
- background-color: var(--base-100);
- border-color: var(--contrast-200);
- color: var(--contrast)!important;
- gap: .5rem;
-}
-
-dialog .field {
- margin: 3rem 0;
-}
-
-
-.filters {
- display: flex;
- gap: 1rem;
- align-items: center;
-}
-.filters > div > label {
- margin: 0;
-}
-div.filters > div {
- display: flex;
- align-items: center;
- flex: 100%;
- gap: .5rem;
-}
-.filters .icon {
- --w: 1.5em;
-}
-
-@media (min-width:768px){
- div.filters > div {
- flex: 1;
- }
-}
-
-.view-controls.radio-options {
- gap: .5rem;
- margin-left: auto;
-}
-.view-controls.radio-options label {
- padding: .25rem!important;
-}
-
-.label-group {
- display: flex;
- gap: .75rem;
- align-items: center;
- flex-wrap: wrap;
-}
-.label-group .icon {
- margin-right: .5rem;
-}
-.item-grid.table {
- display: none;
-}
-
-.item-grid summary {
- padding: 0;
- gap: 0;
-}
-.item-grid .item-actions {
- position: absolute;
- top: .25rem;
- right: .25rem;
- gap: .25rem;
- width: 100%;
- display: flex;
- justify-content: flex-end;
-}
-.item-grid .item-actions button {
- width: 2em;
- height: 2em;
- border-radius: var(--innerRadius);
- background-color: var(--overlay-light);
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.item-grid .item-actions button:focus,
-.item-grid .item-actions button:hover {
- background-color: var(--overlay-heavy);
- color: var(--action-0);
-}
-
-
-
-@media (max-width: 768px){
- .replace {
- margin-top: 4rem!important;
- }
- .list-header {
- flex-wrap: wrap;
- }
- .list-card h3 {
- font-size: var(--medium);
- }
- .item-grid.list-view .item {
- align-items: center;
- }
- .item-grid.list-view img {
- width: 80px;
- height: 80px;
- aspect-ratio: 1;
- object-fit: cover;
- }
-}
-
-
-.term-divider {
- position: relative;
- text-align: center;
- margin: 1rem 0;
- border-bottom: 1px solid var(--base-200);
-}
-
-.term-divider span {
- background: var(--base);
- padding: 0 1rem;
- color: var(--contrast);
- font-size: .9rem;
- position: relative;
- top: .5em;
-}
-
-.common-term {
- background: var(--base-50);
- border-radius: var(--innerRadius);
-}
-
-.loading-indicator {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: .5rem;
- padding: 1rem;
- color: var(--contrast-100);
- font-size: .9rem;
-}
-
-.loading-indicator svg {
- animation: spin 1s linear infinite;
-}
-
-.pagination-info {
- text-align: center;
- padding: .5rem;
- font-size: .9rem;
- color: var(--contrast-100);
- border-top: 1px solid var(--base-100);
-}
-
-@keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
-}
-
-
-.term-breadcrumb {
- margin-bottom: 1rem;
- padding: .5rem;
- background: var(--base-50);
- border-radius: 4px;
-}
-
-.back-to-parent {
- display: flex;
- align-items: center;
- gap: .5rem;
- border: none;
- background: none;
- color: var(--contrast);
- cursor: pointer;
- padding: .5rem;
- border-radius: 4px;
- font-size: var(--small);
-}
-
-.back-to-parent:hover {
- background: var(--base-100);
-}
-
-.term-row {
- display: flex;
- align-items: center;
- gap: .5rem;
- width: 100%;
- padding: .25rem 0;
-}
-
-.toggle-children {
- border: none;
- background: none;
- padding: .25rem;
- cursor: pointer;
- color: var(--contrast);
- display: flex;
- align-items: center;
- justify-content: center;
- margin-left: auto;
- border-radius: 4px;
-}
-
-.toggle-children:hover {
- background: var(--base-50);
-}
-
-.loading-indicator {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 24px;
- height: 24px;
-}
-
-.loading-indicator .loading {
- width: 16px;
- height: 16px;
- border: 2px solid var(--base-100);
- border-top-color: var(--contrast);
- border-radius: 50%;
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- to { transform: rotate(360deg); }
-}
-
-.term-breadcrumb {
- display: flex;
- align-items: center;
- gap: .5rem;
- margin-bottom: 1rem;
- padding: .5rem;
- background: var(--base-50);
- border-radius: 4px;
-}
-
-.term-breadcrumb .path {
- display: flex;
- align-items: center;
- gap: .25rem;
- flex-wrap: wrap;
-}
-
-.term-breadcrumb button {
- border: none;
- background: none;
- padding: .25rem .5rem;
- border-radius: 4px;
- cursor: pointer;
- color: var(--contrast);
- font-size: var(--small);
-}
-
-.term-breadcrumb button:hover {
- background: var(--base-100);
-}
-
-.path-separator {
- color: var(--contrast-50);
-}
-
-.path-level {
- white-space: nowrap;
-}
-
-.create-new-term {
- margin-top: 2rem;
- padding-top: 1rem;
- border-top: 1px solid var(--base-100);
-}
-.create-new-term button {
- width: 100%;
-}
-
-.suggestion-prompt {
- font-size: var(--small);
- color: var(--contrast-50);
- margin-bottom: 1rem;
-}
-
-.create-term-form {
- display: flex;
- flex-direction: column;
- gap: .5rem;
-}
-
-.form-row {
- display: flex;
- align-items: center;
- gap: .5rem;
-}
-
-.name-row {
- position: relative;
-}
-
-.name-row input {
- width: 100%!important;
- padding: .5rem;
- border: 2px solid var(--base-100);
- border-radius: 4px;
- background: var(--base);
- color: var(--contrast);
-}
-
-.name-row input:focus {
- border-color: var(--action-0);
- outline: none;
-}
-
-.parent-row {
- font-size: var(--small);
-}
-
-.parent-row label {
- display: flex;
- align-items: center;
- gap: .5rem;
- cursor: pointer;
-}
-
-.create-term-form button {
- display: inline-flex;
- align-items: center;
- gap: .5rem;
- padding: .5rem 1rem;
- border: none;
- border-radius: 4px;
- background: var(--action-0);
- color: var(--base);
- cursor: pointer;
- font-size: var(--small);
- transition: all .2s ease;
-}
-
-.create-term-form button:hover {
- background: var(--action-50);
-}
-
-.create-term-form button:disabled {
- opacity: .5;
- cursor: not-allowed;
-}
-
-.create-term-form button svg {
- width: 16px;
- height: 16px;
-}
-
-/** Search bar and new term functionality **/
-.search-bar {
- position: relative;
- display: flex;
- gap: .5rem;
- align-items: center;
- z-index: 2;
-}
-
-.search-bar input {
- flex: 1;
- /* Make room for button */
- padding: .5rem 2.5rem .5rem .5rem;
- border: 2px solid #ddd;
- border-radius: 4px;
- font-size: 1rem;
-}
-
-.new-term-toggle {
- margin: 2rem 0 1rem;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-/* Peek effect on search bar hover */
-.search-bar:hover .new-term-toggle {
- opacity: 1;
- transform: translateX(-.25rem);
-}
-
-/* Form styling */
-.create-term-form {
- position: relative;
- z-index: 1;
- background: var(--base);
- border: 2px solid var(--action-0);
- border-radius: 4px;
- padding: 1rem;
- margin-top: -2px;
-
- /* Animation */
- transform-origin: top;
- transition: all .2s var(--function);
-}
-
-.create-term-form:not([hidden]) {
- animation: slideDown .2s var(--function);
-}
-
-.create-term-form[hidden] {
- display: block !important; /* Override hidden */
- transform: scaleY(0);
- opacity: 0;
- pointer-events: none;
-}
-
-.form-row {
- display: flex;
- gap: .5rem;
- align-items: center;
-}
-
-.form-row + .form-row {
- margin-top: .5rem;
-}
-
-@keyframes slideDown {
- from {
- transform: scaleY(0);
- opacity: 0;
- }
- to {
- transform: scaleY(1);
- opacity: 1;
- }
-}
-
-.news.item {
- padding: 1rem!important;
-}
-
-.dashboard .checkbox-options label {
- font-weight: normal;
-}
-
-.description.space {
- margin-bottom: 4rem;
-}
-
-.invited-artist {
- display: flex;
- align-items: center;
- margin: 1rem 0;
-}
-.invited-artist input[type=text],
-.invited-artist input[type=email] {
- width: calc(100% - .5rem);
-}
-.invited-artist label {
- margin: 0;
- font-weight: normal;
- white-space:nowrap;
-}
-.invited-artist button {
- height: fit-content;
- margin-right: .5rem;
-}
-.actions {
- display: flex;
- gap: 1rem;
- justify-content: flex-end;
-}
-
-.actions .send-invites {
- background-color: var(--action-50);
-}
-.actions .send-invites:hover,
-.actions .send-invites:focus {
- background-color: var(--base);
- border-color: var(--action-50);
-}
-
-.dashboard .queue-status-panel {
- bottom: var(--offHeight);
-}
-.dashboard .queue-status-toggle {
- bottom: 0;
-}
-
-.items-list table th {
- padding: 0 .75rem;
- text-transform: none!important;
-}
-.items-list table.empty tbody {
- height: 40vh;
-}
-
-/*table textarea,*/
-/*table input[type=text],*/
-/*table input[type=url],*/
-/*table input[type=number],*/
-/*table input[type=email] {*/
-/* min-width: 40vw;*/
-/*}*/
-
-.empty tfoot {
- display: none;
-}
-
-p.hint {
- margin: 0 0 .5rem 0;
- font-size: var(--small);
- font-style: italic;
-}
-.item-grid + .hint {
- text-align: center;
- margin-top: 2rem;
-}
-
-.image.field[data-type=single]:has(.upload-item) .file-upload-container {
- display: none;
-}
-.image.field[data-type=single] .upload-item {
- grid-column: 1 / -1;
-}
-/** UPLOADER **/
-.upload-item {
- position: relative;
- border: 1px solid var(--base-200);
- border-radius: 8px;
- background: var(--base-50);
- transition: all .3s ease;
-}
-.upload-item:hover {
- box-shadow: var(--shadow);
- transform: translateY(-2px);
-}
-.upload-item[data-status=processing] {
- border-color: var(--action-200);
- background: var(--action-100);
-}
-.upload-item[data-status=cached] {
- border-color: var(--secondary-0);
- background: var(--secondary-200);
-}
-.upload-item[data-status=uploading] {
- border-color: var(--contrast);
- background-color: var(--base-50);
-}
-.upload-item .preview {
- position: relative;
-}
-.upload-item .status {
- position: absolute;
- bottom: .25rem;
- right: .25rem;
- background-color: var(--overlay-light);
- box-shadow: var(--shadow);
- border-radius: 50%;
-}
-.upload-item img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- aspect-ratio: 1;
- transition: transform .3s ease;
-}
-.upload-item:hover img {
- transform: scale(1.05);
-}
-
-.upload-item .overlay {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: var(--overlay-heavy);
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- padding: .5rem;
- opacity: 0;
- transition: opacity .3s ease;
-}
-.upload-item:hover .overlay,
-.upload-item[data-status=processing] .overlay,
-.upload-item[data-status=uploading] .overlay {
- opacity: 1;
-}
-
-.upload-item .item-actions {
- position: relative;
-}
-
-.submit-uploads {
- position: fixed;
- bottom: var(--offHeight);
- right: 1rem;
- background-color: var(--base);
- height: var(--height);
- box-shadow: var(--shadow);
-}
-/*** UPLOADER GROUPS ***/
-.group-display {
- display: grid;
- grid-template-columns: 1fr 250px;
- gap: 2rem;
-}
-.preview-actions {
- position: sticky;
- padding: .5rem;
- top: var(--offHeight);
- left: 0;
- background-color: var(--base-50);
- z-index: 5;
-}
-.preview-actions .selected {
- display: flex;
- justify-content: space-between;
- padding-right: 2rem;
- align-items: center;
-}
-.preview-actions .field {
- margin: 0;
-}
-.preview-actions .field label {
- margin-bottom: 0;
-}
-.selection-actions {
- display: flex;
- justify-content: space-between;
- padding: 1rem 2rem;
-}
-[data-status=completed] .progress {
- transform: scaleY(0);
- transform-origin: top;
-}
-.preview-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: 1rem;
- margin-top: 1rem;
- padding: .5rem;
- background: var(--base);
- border: 1px solid var(--contrast-200);
- border-radius: 8px;
- min-height: 60px;
-}
-.preview-grid:empty {
- display: none;
-}
-
-
-.upload-item .progress {
- position: absolute;
- top: 2px;
- right: 2px;
- left: 2px;
-}
-.upload-item .actions {
- display: flex;
- justify-content: space-between;
- align-items: center;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
-}
-.upload-item .actions > label {
- margin: 0 1rem;
- padding-left: 0!important;
-}
-.upload-item input[type=text],
-.upload-item textarea,
-.group-fields input[type=text],
-.group-fields textarea {
- width: calc(100% - 1rem);
-}
-/*.upload-item .actions > label {*/
-/* !*position: absolute;*!*/
-/* padding: 1rem!important;*/
-/* margin: 0;*/
-/* !*top: .5rem;*!*/
-/* !*left: 0;*!*/
-/*}*/
-/* .upload-item .actions > label::before {*/
-/* left: calc(50% - 9px)!important;*/
-/* top: calc(50% - 9px)!important;*/
-/* transform: none!important;*/
-/* }*/
-/* .upload-item .actions > label::after {*/
-/* left: 1.25rem!important;*/
-/* top: 1rem!important;*/
-/* }*/
-.item-grid .upload-item summary {
- display: flex;
- align-items: center;
- font-size: var(--small);
- gap: .5rem;
- text-transform: uppercase;
-}
-.upload-item:has([type=checkbox]:checked) .preview {
- padding: 1rem;
- background-color: var(--secondary-200);
-}
-.upload-item:has([open]) {
- grid-column: 1 / -1;
-}
-.upload-item summary .icon {
- --w: 1.1em;
-}
-
-[draggable="true"] {
- cursor: grab;
-}
-[draggable="true"]:active {
- cursor: grabbing;
-}
-
-.dragging {
- opacity: .5;
- transform: rotate(5deg) scale(.95);
- transition: all .2s ease;
-}
-
-.dragover:not(.item-grid.groups) {
- background-color: var(--overlay-action-medium);
- border: 2px dashed var(--action-0);
-}
-
-@keyframes dragHover {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.02); }
- 100% { transform: scale(1); }
-}
-
-.drag-hover {
- animation: dragHover .6s ease-in-out infinite;
-}
-
-/** GROUP **/
-.empty-group {
- padding: 20px;
- text-align: center;
- grid-column: 1 / -1;
- display: flex;
- justify-content: center;
- align-items: center;
- border: 2px dashed var(--action-200);
- border-radius: var(--innerRadius);
- margin: 10px 0;
- cursor: pointer;
- transition: all .2s ease;
- aspect-ratio: 16/9;
-}
-.item-grid.groups {
- grid-template-columns: 1fr;
-}
-
-.item-grid.group .item-grid.group {
- min-height: 40px;
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: .5rem;
- border: 2px dashed var(--action-200);
- border-radius: var(--innerRadius);
- margin: 10px 0;
- cursor: pointer;
- transition: all .2s ease;
- aspect-ratio: 1;
- text-align: center;
-}
-.empty-group:hover,
-.empty-group.dragover,
-.item-grid.group .item-grid.group:hover,
-.item-grid.group .item-grid.group.dragover {
- border-color: var(--action-0);
- background-color: var(--overlay-action-light);
- color: var(--action-50);
-}
-
-.upload-group {
- background-color: var(--base-100);
- border-radius: var(--innerRadius);
- border: 1px solid var(--contrast-200);
-}
-.group-actions {
- width: 100%;
- gap: .5rem;
-}
-.group-actions button {
- width: 100%;
-}
-
-body:has(.selection-actions[hidden]) button.create-group,
-body:has(.selection-actions[hidden]) button.add-selection-to-group {
- display: none;
-}
-
-/** RESTORE FROM CACHE **/
-.restore-notification {
- border-radius: var(--innerRadius);
- box-shadow: var(--shadow);
- padding: 1rem;
- background: var(--base-200);
- border: 1px solid var(--contrast-200);
- border-top-width: 4px;
- border-bottom-width: 4px;
-}
-.restore-content {
- display: flex;
- align-items: center;
-}
-.restore-actions .selection-controls {
- display: flex;
- gap: .5rem;
-}
-
-.restore-actions button {
- white-space: nowrap;
-}
-.restore-actions .action-buttons {
- margin-top: 1rem;
- display: flex;
- flex-direction: column;
- gap: .5rem;
-}
-.restore-actions .action-buttons button {
- width: 100%;
-}
-
-label.restore-item {
- border-radius: .5rem;
- padding: 0;
- background-color: transparent;
- filter: grayscale(50);
- opacity: .8;
- transition: padding var(--transition-base);
- transition-property: padding, background-color;
- cursor: pointer;
-}
-label.restore-item:has(input:checked) {
- filter: grayscale(0);
- opacity: 1;
- padding: 1rem;
- background-color: var(--secondary-200);
-}
-
-.upload-item .featured + label {
- width: 2em;
- height: 2em;
- border-radius: var(--innerRadius);
- background-color: var(--overlay-light);
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 0!important;
- border: none;
-}
-
-input.featured + label .icon {
- --w: 1.25em;
-}
-input.featured + label .icon + .icon {
- position: absolute;
-}
-input.featured + label .star-fill,
-input.featured:checked + label .star {
- transform: scale(0);
-}
-input.featured:checked + label .star-fill,
-input.featured + label .star {
- transform: scale(1);
-}
-/**TODO: Double check needed **/
-/*!* Centralized Upload Manager CSS *!*/
-
-/*!* Global Upload Status Bar *!*/
-/*.all-uploads {*/
-/* position: fixed;*/
-/* top: 0;*/
-/* left: 0;*/
-/* right: 0;*/
-/* background: var(--surface);*/
-/* border-bottom: 1px solid var(--border);*/
-/* padding: .75rem 1rem;*/
-/* z-index: 1000;*/
-/* box-shadow: 0 2px 8px rgba(0, 0, 0, .1);*/
-/* backdrop-filter: blur(10px);*/
-/* display: none; !* Hidden by default *!*/
-/*}*/
-
-/*.upload-summary {*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/* margin-bottom: .5rem;*/
-/*}*/
-
-/*.all-uploads .active {*/
-/* font-weight: 500;*/
-/* color: var(--contrast);*/
-/* font-size: .9rem;*/
-/*}*/
-
-/*.upload-summary button {*/
-/* padding: .5rem 1rem;*/
-/* border: 1px solid var(--border);*/
-/* border-radius: 4px;*/
-/* background: var(--surface);*/
-/* color: var(--contrast);*/
-/* cursor: pointer;*/
-/* transition: all .3s ease;*/
-/* font-size: .875rem;*/
-/* margin-left: .5rem;*/
-/*}*/
-
-/*.upload-summary button:hover {*/
-/* background: var(--action-0);*/
-/* color: var(--action-contrast);*/
-/* border-color: var(--action-0);*/
-/*}*/
-
-/*!* Upload Drop Zones *!*/
-/*.file-upload-container {*/
-/* position: relative;*/
-/* padding: .25rem;*/
-/* transition: border-color var(--transition-base),*/
-/* background-color var(--transition-base),*/
-/* padding var(--transition-base);*/
-/*}*/
-
-/*.file-upload-container.dragover {*/
-/* background-color: var(--action-rgb-subtle);*/
-/* border-color: var(--action-0);*/
-/* padding: .75rem;*/
-/*}*/
-/* .dragover .file-upload-wrapper {*/
-/* transform: scale(1.02);*/
-/* }*/
-
-
-/*!* Upload Actions *!*/
-/*.upload .actions {*/
-/* display: flex;*/
-/* gap: .25rem;*/
-/* justify-content: flex-end;*/
-/*}*/
-
-/*.upload .actions button {*/
-/* background: rgba(0, 0, 0, .7);*/
-/* color: white;*/
-/* border: none;*/
-/* padding: .25rem;*/
-/* border-radius: 4px;*/
-/* cursor: pointer;*/
-/* transition: background .3s ease;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/*}*/
-
-/*.upload .actions button:hover {*/
-/* background: rgba(0, 0, 0, .9);*/
-/*}*/
-
-/*.upload .actions button svg {*/
-/* width: 16px;*/
-/* height: 16px;*/
-/*}*/
-
-/*!* Status Indicator *!*/
-/*.status {*/
-/* position: absolute;*/
-/* top: .5rem;*/
-/* right: .5rem;*/
-/* width: 24px;*/
-/* height: 24px;*/
-/* border-radius: 50%;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* font-size: .8rem;*/
-/* font-weight: bold;*/
-/* z-index: 2;*/
-/* box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
-/*}*/
-
-/*.status.processing {*/
-/* background: var(--warning);*/
-/* color: var(--warning-contrast);*/
-/*}*/
-
-/*.status.processed {*/
-/* background: var(--info);*/
-/* color: var(--info-contrast);*/
-/*}*/
-
-/*.status.cached {*/
-/* background: var(--info);*/
-/* color: var(--info-contrast);*/
-/*}*/
-
-/*.status.uploading {*/
-/* background: var(--action-0);*/
-/* color: var(--action-contrast);*/
-/*}*/
-
-/*.status.uploaded {*/
-/* background: var(--success);*/
-/* color: var(--success-contrast);*/
-/*}*/
-
-/*.status.error {*/
-/* background: var(--error);*/
-/* color: var(--error-contrast);*/
-/*}*/
-
-/*!* Upload Metadata *!*/
-/*.upload .metadata {*/
-/* padding: 1rem;*/
-/* border-top: 1px solid var(--border);*/
-/* background: var(--surface);*/
-/*}*/
-
-/*.upload .metadata .metadata-field {*/
-/* margin-bottom: .75rem;*/
-/*}*/
-
-/*.upload .metadata .metadata-field:last-child {*/
-/* margin-bottom: 0;*/
-/*}*/
-
-/*.upload .metadata label {*/
-/* display: block;*/
-/* margin-bottom: .25rem;*/
-/* font-weight: 500;*/
-/* font-size: .9rem;*/
-/* color: var(--contrast);*/
-/*}*/
-
-/*.upload .metadata input,*/
-/*.upload .metadata textarea {*/
-/* width: 100%;*/
-/* padding: .5rem;*/
-/* border: 1px solid var(--border);*/
-/* border-radius: 4px;*/
-/* font-size: .9rem;*/
-/* transition: border-color .3s ease, box-shadow .3s ease;*/
-/*}*/
-
-/*.upload .metadata input:focus,*/
-/*.upload .metadata textarea:focus {*/
-/* outline: none;*/
-/* border-color: var(--action-0);*/
-/* box-shadow: 0 0 0 2px var(--action-rgb-subtle);*/
-/*}*/
-
-/*.upload .metadata textarea {*/
-/* resize: vertical;*/
-/* min-height: 2.5rem;*/
-/*}*/
-
-/*!* Field Type Specific Styles *!*/
-
-/*!* Single Image Field *!*/
-/*.upload.field[data-upload-type="single"] .upload-preview-grid {*/
-/* grid-template-columns: 1fr;*/
-/* max-width: 400px;*/
-/*}*/
-
-/*!* Gallery Field *!*/
-/*.upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
-/* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
-/*}*/
-
-/*!* Avatar Field *!*/
-/*.upload.field[data-upload-type="avatar"] .upload-preview-grid {*/
-/* grid-template-columns: 1fr;*/
-/* max-width: 200px;*/
-/*}*/
-
-/*.upload.field[data-upload-type="avatar"] .upload-preview {*/
-/* aspect-ratio: 1;*/
-/* border-radius: 50%;*/
-/* overflow: hidden;*/
-/*}*/
-
-/*!* Spinner Animation *!*/
-/*.spinner {*/
-/* width: 12px;*/
-/* height: 12px;*/
-/* border: 2px solid transparent;*/
-/* border-top: 2px solid currentColor;*/
-/* border-radius: 50%;*/
-/* animation: spin 1s linear infinite;*/
-/*}*/
-
-/*@keyframes spin {*/
-/* 0% { transform: rotate(0deg); }*/
-/* 100% { transform: rotate(360deg); }*/
-/*}*/
-
-/*@keyframes shimmer {*/
-/* 0% { transform: translateX(-100%); }*/
-/* 100% { transform: translateX(100%); }*/
-/*}*/
-
-/*!* Responsive Design *!*/
-/*@media (max-width: 768px) {*/
-/* .all-uploads {*/
-/* position: relative;*/
-/* top: auto;*/
-/* left: auto;*/
-/* right: auto;*/
-/* }*/
-
-/* .upload-summary {*/
-/* flex-direction: column;*/
-/* gap: .5rem;*/
-/* align-items: stretch;*/
-/* }*/
-
-/* .upload-summary button {*/
-/* margin-left: 0;*/
-/* width: 100%;*/
-/* }*/
-
-/* .upload-preview-grid {*/
-/* grid-template-columns: 1fr;*/
-/* gap: .75rem;*/
-/* }*/
-
-/* .upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
-/* grid-template-columns: repeat(2, 1fr);*/
-/* }*/
-/*}*/
-
-/*!* Dark Mode Support *!*/
-/*@media (prefers-color-scheme: dark) {*/
-/* .upload-overlay {*/
-/* background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6));*/
-/* }*/
-
-/*}*/
-
-/*!* High Contrast Mode *!*/
-/*@media (prefers-contrast: high) {*/
-/* .upload-item {*/
-/* border-width: 2px;*/
-/* }*/
-
-/* .status {*/
-/* border: 2px solid currentColor;*/
-/* }*/
-
-/*}*/
-
-/*!* Reduced Motion *!*/
-/*@media (prefers-reduced-motion: reduce) {*/
-/* .upload-item:hover {*/
-/* transform: none;*/
-/* }*/
-
-/* .upload-item:hover .upload-preview img {*/
-/* transform: none;*/
-/* }*/
-
-/* .spinner,*/
-/* .shimmer {*/
-/* animation: none;*/
-/* }*/
-/*}*/
-
-/*!* Focus Management *!*/
-/*.upload-item:focus-within {*/
-/* outline: 2px solid var(--action-0);*/
-/* outline-offset: 2px;*/
-/*}*/
-
-/*.upload .actions button:focus {*/
-/* outline: 2px solid var(--action-0);*/
-/* outline-offset: 2px;*/
-/*}*/
-
-/*!* Loading States *!*/
-/*.upload.field.processing {*/
-/* pointer-events: none;*/
-/* opacity: .7;*/
-/*}*/
-
-/*.upload.field.processing::after {*/
-/* content: '';*/
-/* position: absolute;*/
-/* top: 0;*/
-/* left: 0;*/
-/* right: 0;*/
-/* bottom: 0;*/
-/* background: rgba(255, 255, 255, .5);*/
-/* backdrop-filter: blur(2px);*/
-/* z-index: 10;*/
-/*}*/
-
-/*!* Field Capacity Indicators *!*/
-/*.upload.field[data-at-capacity="true"] .file-upload-container {*/
-/* opacity: .5;*/
-/* pointer-events: none;*/
-/*}*/
-
-/*.upload.field[data-at-capacity="true"]::before {*/
-/* content: 'Maximum files reached';*/
-/* position: absolute;*/
-/* top: 50%;*/
-/* left: 50%;*/
-/* transform: translate(-50%, -50%);*/
-/* background: var(--warning);*/
-/* color: var(--warning-contrast);*/
-/* padding: .5rem 1rem;*/
-/* border-radius: 4px;*/
-/* font-size: .875rem;*/
-/* z-index: 5;*/
-/*}*/
-
-/*!* Integration with existing form styles *!*/
-/*.upload.field {*/
-/* position: relative;*/
-/*}*/
-
-/*.upload.field .upload-preview-grid {*/
-/* margin-top: .5rem;*/
-/*}*/
-
-/*!* Ensure global status doesn't interfere with fixed elements *!*/
-/*body.has-global-upload-status {*/
-/* padding-top: 80px;*/
-/*}*/
-
-/*!* Animation for upload completion *!*/
-/*@keyframes uploadSuccess {*/
-/* 0% { transform: scale(1); }*/
-/* 50% { transform: scale(1.05); }*/
-/* 100% { transform: scale(1); }*/
-/*}*/
-
-/*.upload-item[data-status="uploaded"] {*/
-/* animation: uploadSuccess .6s ease-out;*/
-/*}*/
-/*!* Batch Processing Progress Bar *!*/
-/*.batch-progress {*/
-/* margin: 1rem 0;*/
-/* padding: 1rem;*/
-/* background: var(--color-background-secondary, #f8f9fa);*/
-/* border: 1px solid var(--color-border, #e1e5e9);*/
-/* border-radius: 8px;*/
-/* transition: opacity .3s ease;*/
-/*}*/
-
-/*.batch-progress.completed {*/
-/* background: var(--color-success-light, #d4edda);*/
-/* border-color: var(--color-success, #28a745);*/
-/*}*/
-
-/*.progress-info {*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/* margin-bottom: .5rem;*/
-/* font-size: .9rem;*/
-/*}*/
-
-/*.progress-message {*/
-/* color: var(--color-text-secondary, #6c757d);*/
-/* font-weight: 500;*/
-/*}*/
-
-/*.progress-count {*/
-/* color: var(--color-text-primary, #212529);*/
-/* font-weight: 600;*/
-/* font-variant-numeric: tabular-nums;*/
-/*}*/
-
-/*.progress .bar {*/
-/* width: 100%;*/
-/* height: 8px;*/
-/* background: var(--color-background-tertiary, #e9ecef);*/
-/* border-radius: 4px;*/
-/* overflow: hidden;*/
-/*}*/
-
-/*.progress .fill {*/
-/* height: 100%;*/
-/* background: linear-gradient(90deg,*/
-/* var(--color-primary, #007cba) 0%,*/
-/* var(--color-primary-light, #0096dd) 100%*/
-/* );*/
-/* border-radius: 4px;*/
-/* transition: width .3s ease;*/
-/* position: relative;*/
-/*}*/
-
-/*!* Animated progress indicator *!*/
-/*.progress .fill::after {*/
-/* content: '';*/
-/* position: absolute;*/
-/* top: 0;*/
-/* left: 0;*/
-/* right: 0;*/
-/* bottom: 0;*/
-/* background: linear-gradient(*/
-/* 90deg,*/
-/* transparent 0%,*/
-/* rgba(255,255,255,.3) 50%,*/
-/* transparent 100%*/
-/* );*/
-/* animation: progress-shine 2s ease-in-out infinite;*/
-/*}*/
-
-/*@keyframes progress-shine {*/
-/* 0% { transform: translateX(-100%); }*/
-/* 100% { transform: translateX(100%); }*/
-/*}*/
-
-/*!* Completed state styling *!*/
-/*.progress.completed .fill {*/
-/* background: linear-gradient(90deg,*/
-/* var(--color-success, #28a745) 0%,*/
-/* var(--color-success-light, #34ce57) 100%*/
-/* );*/
-/*}*/
-
-/*.progress.completed .progress-message {*/
-/* color: var(--color-success-dark, #155724);*/
-/*}*/
-
-/*!* Dark mode support *!*/
-/*@media (prefers-color-scheme: dark) {*/
-/* .progress {*/
-/* background: var(--color-background-secondary-dark, #2d3436);*/
-/* border-color: var(--color-border-dark, #636e72);*/
-/* }*/
-
-/* .progress .bar {*/
-/* background: var(--color-background-tertiary-dark, #636e72);*/
-/* }*/
-/*}*/
-
-/*!* ✅ Grouping System CSS *!*/
-
-/*!* Upload field container with grouping support *!*/
-/*.upload.field.groupable {*/
-/* display: grid;*/
-/* grid-template-columns: 1fr 300px;*/
-/* gap: 20px;*/
-/* min-height: 400px;*/
-/*}*/
-
-/*.upload.field.groupable .upload-main {*/
-/* display: flex;*/
-/* flex-direction: column;*/
-/*}*/
-
-/*.upload.field.groupable .upload-sidebar {*/
-/* border-left: 2px solid #e0e0e0;*/
-/* padding-left: 20px;*/
-/*}*/
-
-/*!* Preview grid for groupable uploads *!*/
-/*.upload-preview-grid.groupable {*/
-/* min-height: 200px;*/
-/* border: 2px dashed #ddd;*/
-/* border-radius: 8px;*/
-/* padding: 15px;*/
-/* background: #fafafa;*/
-/*}*/
-
-/*.upload-preview-grid.groupable:empty::after {*/
-/* content: "Drop images here or click to upload";*/
-/* display: block;*/
-/* text-align: center;*/
-/* color: #666;*/
-/* font-style: italic;*/
-/* padding: 40px 20px;*/
-/*}*/
-
-/*!* Upload items with drag support *!*/
-/*.upload-item[draggable] {*/
-/* cursor: grab;*/
-/* transition: transform .2s ease, box-shadow .2s ease;*/
-/*}*/
-
-/*.upload-item[draggable]:hover {*/
-/* transform: translateY(-2px);*/
-/* box-shadow: 0 4px 8px rgba(0,0,0,.1);*/
-/*}*/
-
-/*.upload-item.dragging {*/
-/* opacity: .5;*/
-/* transform: rotate(5deg);*/
-/* cursor: grabbing;*/
-/*}*/
-
-/*!* Groups container *!*/
-/*.groups-container {*/
-/* display: flex;*/
-/* flex-direction: column;*/
-/* gap: 15px;*/
-/* max-height: 600px;*/
-/* overflow-y: auto;*/
-/* padding: 10px;*/
-/* background: #f9f9f9;*/
-/* border-radius: 8px;*/
-/*}*/
-
-/*.groups-container .new-group-section {*/
-/* text-align: center;*/
-/* padding: 20px;*/
-/* border: 2px dashed #ccc;*/
-/* border-radius: 8px;*/
-/* background: white;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.groups-container .new-group-section:hover {*/
-/* border-color: #2196F3;*/
-/* background: #f0f8ff;*/
-/*}*/
-
-/*.new-group-btn {*/
-/* background: #2196F3;*/
-/* color: white;*/
-/* border: none;*/
-/* padding: 10px 20px;*/
-/* border-radius: 6px;*/
-/* cursor: pointer;*/
-/* font-size: 14px;*/
-/* display: inline-flex;*/
-/* align-items: center;*/
-/* gap: 8px;*/
-/*}*/
-
-/*.new-group-btn:hover {*/
-/* background: #1976D2;*/
-/*}*/
-
-/*!* Individual groups *!*/
-/*.upload-group {*/
-/* background: white;*/
-/* border: 1px solid #e0e0e0;*/
-/* border-radius: 8px;*/
-/* padding: 15px;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.upload-group.drag-hover {*/
-/* border-color: #2196F3;*/
-/* background: #f0f8ff;*/
-/* box-shadow: 0 2px 8px rgba(33, 150, 243, .2);*/
-/*}*/
-
-/*.group-header {*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/* margin-bottom: 15px;*/
-/* padding-bottom: 10px;*/
-/* border-bottom: 1px solid #f0f0f0;*/
-/*}*/
-
-/*.group-info {*/
-/* flex: 1;*/
-/* display: flex;*/
-/* flex-direction: column;*/
-/* gap: 5px;*/
-/*}*/
-
-/*.group-name {*/
-/* border: 1px solid #ddd;*/
-/* border-radius: 4px;*/
-/* padding: 6px 10px;*/
-/* font-size: 14px;*/
-/* font-weight: 500;*/
-/* background: white;*/
-/* transition: border-color .2s ease;*/
-/*}*/
-
-/*.group-name:focus {*/
-/* outline: none;*/
-/* border-color: #2196F3;*/
-/* box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
-/*}*/
-
-/*.group-name:empty::before {*/
-/* content: "Enter group name...";*/
-/* color: #999;*/
-/* font-style: italic;*/
-/*}*/
-
-/*.group-count {*/
-/* font-size: 12px;*/
-/* color: #666;*/
-/* font-weight: normal;*/
-/*}*/
-
-/*.group-actions {*/
-/* display: flex;*/
-/* gap: 8px;*/
-/*}*/
-
-/*.delete-group {*/
-/* background: #f44336;*/
-/* color: white;*/
-/* border: none;*/
-/* padding: 6px 8px;*/
-/* border-radius: 4px;*/
-/* cursor: pointer;*/
-/* font-size: 12px;*/
-/* transition: background .2s ease;*/
-/*}*/
-
-/*.delete-group:hover {*/
-/* background: #d32f2f;*/
-/*}*/
-
-/*!* Group drop zone *!*/
-/*.group-drop-zone {*/
-/* min-height: 80px;*/
-/* border: 2px dashed #ccc;*/
-/* border-radius: 6px;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* margin-bottom: 15px;*/
-/* transition: all .2s ease;*/
-/* background: #fafafa;*/
-/*}*/
-
-/*.group-drop-zone p {*/
-/* color: #666;*/
-/* font-style: italic;*/
-/* margin: 0;*/
-/* font-size: 14px;*/
-/*}*/
-
-/*.group-drop-zone.drag-hover {*/
-/* border-color: #4CAF50;*/
-/* background: #f1f8e9;*/
-/*}*/
-
-/*!* Group items *!*/
-/*.group-items {*/
-/* display: grid;*/
-/* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
-/* gap: 10px;*/
-/* margin-bottom: 15px;*/
-/*}*/
-
-/*.group-item {*/
-/* position: relative;*/
-/* background: white;*/
-/* border: 1px solid #e0e0e0;*/
-/* border-radius: 6px;*/
-/* overflow: hidden;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.group-item:hover {*/
-/* box-shadow: 0 2px 8px rgba(0,0,0,.1);*/
-/*}*/
-
-/*.group-item-preview {*/
-/* position: relative;*/
-/* width: 100%;*/
-/* height: 80px;*/
-/* overflow: hidden;*/
-/*}*/
-
-/*.group-item-preview img {*/
-/* width: 100%;*/
-/* height: 100%;*/
-/* object-fit: cover;*/
-/*}*/
-
-/*.group-item-overlay {*/
-/* position: absolute;*/
-/* top: 0;*/
-/* right: 0;*/
-/* background: rgba(0,0,0,.7);*/
-/* padding: 4px;*/
-/* opacity: 0;*/
-/* transition: opacity .2s ease;*/
-/*}*/
-
-/*.group-item:hover .group-item-overlay {*/
-/* opacity: 1;*/
-/*}*/
-
-/*.remove-from-group {*/
-/* background: #f44336;*/
-/* color: white;*/
-/* border: none;*/
-/* padding: 4px 6px;*/
-/* border-radius: 3px;*/
-/* cursor: pointer;*/
-/* font-size: 10px;*/
-/*}*/
-
-/*.remove-from-group:hover {*/
-/* background: #d32f2f;*/
-/*}*/
-
-/*!* Group metadata fields *!*/
-/*.group-metadata {*/
-/* padding-top: 15px;*/
-/* border-top: 1px solid #f0f0f0;*/
-/*}*/
-
-/*.group-metadata .metadata-field {*/
-/* margin-bottom: 12px;*/
-/*}*/
-
-/*.group-metadata label {*/
-/* display: block;*/
-/* font-size: 12px;*/
-/* font-weight: 500;*/
-/* color: #333;*/
-/* margin-bottom: 4px;*/
-/*}*/
-
-/*.group-metadata input,*/
-/*.group-metadata textarea {*/
-/* width: 100%;*/
-/* border: 1px solid #ddd;*/
-/* border-radius: 4px;*/
-/* padding: 6px 8px;*/
-/* font-size: 13px;*/
-/* transition: border-color .2s ease;*/
-/*}*/
-
-/*.group-metadata input:focus,*/
-/*.group-metadata textarea:focus {*/
-/* outline: none;*/
-/* border-color: #2196F3;*/
-/* box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
-/*}*/
-
-/*.group-metadata textarea {*/
-/* resize: vertical;*/
-/* min-height: 60px;*/
-/*}*/
-
-/*!* Drag feedback animations *!*/
-/*@keyframes dragHover {*/
-/* 0% { transform: scale(1); }*/
-/* 50% { transform: scale(1.02); }*/
-/* 100% { transform: scale(1); }*/
-/*}*/
-
-/*.drag-hover {*/
-/* animation: dragHover .6s ease-in-out infinite;*/
-/*}*/
-
-/*!* Status indicators for grouped uploads *!*/
-/*.upload-group[data-status="uploading"] {*/
-/* border-color: #FF9800;*/
-/* background: #fff8f0;*/
-/*}*/
-
-/*.upload-group[data-status="uploaded"] {*/
-/* border-color: #4CAF50;*/
-/* background: #f1f8e9;*/
-/*}*/
-
-/*.upload-group[data-status="error"] {*/
-/* border-color: #f44336;*/
-/* background: #ffebee;*/
-/*}*/
-
-/*!* Progress indicators for groups *!*/
-/*.group-progress {*/
-/* height: 3px;*/
-/* background: #f0f0f0;*/
-/* border-radius: 2px;*/
-/* overflow: hidden;*/
-/* margin-top: 10px;*/
-/*}*/
-
-/*.group-progress-fill {*/
-/* height: 100%;*/
-/* background: #2196F3;*/
-/* transition: width .3s ease;*/
-/* border-radius: 2px;*/
-/*}*/
-
-/*!* Responsive design *!*/
-/*@media (max-width: 768px) {*/
-/* .upload.field.groupable {*/
-/* grid-template-columns: 1fr;*/
-/* gap: 15px;*/
-/* }*/
-
-/* .upload.field.groupable .upload-sidebar {*/
-/* border-left: none;*/
-/* border-top: 2px solid #e0e0e0;*/
-/* padding-left: 0;*/
-/* padding-top: 15px;*/
-/* }*/
-
-/* .group-items {*/
-/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));*/
-/* gap: 8px;*/
-/* }*/
-
-/* .groups-container {*/
-/* max-height: 400px;*/
-/* }*/
-/*}*/
-
-/*!* Accessibility improvements *!*/
-/*.upload-item.groupable:focus {*/
-/* outline: 2px solid #2196F3;*/
-/* outline-offset: 2px;*/
-/*}*/
-
-/*.group-drop-zone:focus-within {*/
-/* border-color: #2196F3;*/
-/* background: #f0f8ff;*/
-/*}*/
-
-/*!* High contrast mode support *!*/
-/*@media (prefers-contrast: high) {*/
-/* .upload-group {*/
-/* border-width: 2px;*/
-/* }*/
-
-/* .group-drop-zone {*/
-/* border-width: 3px;*/
-/* }*/
-
-/* .upload-item.groupable.dragging {*/
-/* border: 3px solid #2196F3;*/
-/* }*/
-/*}*/
-
-/*!* Selection Controls *!*/
-/*.selection-controls {*/
-/* display: flex;*/
-/* align-items: center;*/
-/* gap: 1rem;*/
-/* flex-wrap: wrap;*/
-/*}*/
-
-/*.selection-actions {*/
-/* display: flex;*/
-/* align-items: center;*/
-/* gap: 1rem;*/
-/* padding: .5rem 1rem;*/
-/* background-color: var(--action-50);*/
-/* border-radius: var(--innerRadius);*/
-/* color: var(--contrast);*/
-/* font-size: .9rem;*/
-/*}*/
-
-/*.selection-actions button {*/
-/* background: rgba(255, 255, 255, .2);*/
-/* border: 1px solid rgba(255, 255, 255, .3);*/
-/* color: inherit;*/
-/* padding: .25rem .5rem;*/
-/* border-radius: var(--innerRadius);*/
-/* display: flex;*/
-/* align-items: center;*/
-/* gap: .25rem;*/
-/*}*/
-
-/*.selection-actions button:hover {*/
-/* background: rgba(255, 255, 255, .3);*/
-/*}*/
-
-/*.selection-count {*/
-/* font-weight: bold;*/
-/*}*/
-
-/*!* Preview Actions *!*/
-/*.preview-actions {*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/* padding: 1rem;*/
-/* background-color: var(--base-100);*/
-/* border-radius: var(--outerRadius);*/
-/* margin-bottom: 1rem;*/
-/*}*/
-
-/*!* Upload Item Enhancements *!*/
-/*.upload-item {*/
-/* position: relative;*/
-/* background: var(--base);*/
-/* border-radius: var(--innerRadius);*/
-/* overflow: hidden;*/
-/* cursor: pointer;*/
-/* transition: transform .2s ease, box-shadow .2s ease;*/
-/*}*/
-
-/*.upload-item:hover {*/
-/* transform: translateY(-2px);*/
-/* box-shadow: var(--shadow);*/
-/*}*/
-
-/*.upload-item[draggable="true"] {*/
-/* cursor: grab;*/
-/*}*/
-
-/*.upload-item.dragging {*/
-/* cursor: grabbing;*/
-/* opacity: .5;*/
-/* transform: rotate(5deg) scale(.95);*/
-/*}*/
-
-/*.upload-item.selected {*/
-/* border: 2px solid var(--action-50);*/
-/* background: rgba(var(--action-rgb), .05);*/
-/*}*/
-
-/*.upload-item .preview {*/
-/* position: relative;*/
-/* aspect-ratio: 1;*/
-/*}*/
-
-/*.upload-item img {*/
-/* width: 100%;*/
-/* height: 100%;*/
-/* object-fit: cover;*/
-/*}*/
-
-/*.upload-item .overlay {*/
-/* position: absolute;*/
-/* top: 0;*/
-/* left: 0;*/
-/* right: 0;*/
-/* bottom: 0;*/
-/* background: rgba(0, 0, 0, .6);*/
-/* opacity: 0;*/
-/* transition: opacity .2s ease;*/
-/* display: flex;*/
-/* flex-direction: column;*/
-/* justify-content: space-between;*/
-/* padding: .5rem;*/
-/*}*/
-
-/*.upload-item:hover .overlay,*/
-/*.upload-item.selected .overlay {*/
-/* opacity: 1;*/
-/*}*/
-
-/*.upload-item .actions input[type="checkbox"] {*/
-/* margin: 0;*/
-/* transform: scale(1.2);*/
-/*}*/
-
-/*.upload-item .actions label {*/
-/* margin: 0;*/
-/* padding: 0;*/
-/* cursor: pointer;*/
-/*}*/
-
-/*!* Status Indicator *!*/
-/*.upload-item .status {*/
-/* position: absolute;*/
-/* top: .5rem;*/
-/* right: .5rem;*/
-/* width: 1.5rem;*/
-/* height: 1.5rem;*/
-/* border-radius: 50%;*/
-/* background: var(--base);*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
-/*}*/
-
-/*.upload-item[data-status="processing"] .status {*/
-/* background: var(--warning);*/
-/*}*/
-
-/*.upload-item[data-status="uploaded"] .status {*/
-/* background: var(--success);*/
-/*}*/
-
-/*.upload-item[data-status="error"] .status {*/
-/* background: var(--danger);*/
-/*}*/
-
-/*!* Group Enhancements *!*/
-/*.upload-group {*/
-/* background: var(--base-50);*/
-/* border-radius: var(--outerRadius);*/
-/* padding: 1rem;*/
-/* margin-bottom: 1rem;*/
-/* border: 2px solid transparent;*/
-/* transition: border-color .2s ease, background-color .2s ease;*/
-/*}*/
-
-/*.upload-group.dragover {*/
-/* border-color: var(--action-50);*/
-/* background: rgba(var(--action-rgb), .05);*/
-/*}*/
-
-/*.group-header {*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/* margin-bottom: 1rem;*/
-/*}*/
-
-/*.group-info {*/
-/* flex: 1;*/
-/* display: flex;*/
-/* flex-direction: column;*/
-/* gap: .25rem;*/
-/*}*/
-
-/*.group-name {*/
-/* font-size: 1.1rem;*/
-/* font-weight: 500;*/
-/* border: none;*/
-/* background: transparent;*/
-/* color: var(--text);*/
-/* padding: .25rem 0;*/
-/* border-bottom: 1px solid transparent;*/
-/* transition: border-color .2s ease;*/
-/*}*/
-
-/*.group-name:focus {*/
-/* outline: none;*/
-/* border-bottom-color: var(--action-50);*/
-/*}*/
-
-/*.group-count {*/
-/* font-size: .85rem;*/
-/* color: var(--text-muted);*/
-/*}*/
-
-/*.group-actions {*/
-/* display: flex;*/
-/* gap: .5rem;*/
-/*}*/
-
-/*.group-actions button {*/
-/* background: var(--base);*/
-/* border: 1px solid var(--base-200);*/
-/* border-radius: var(--innerRadius);*/
-/* padding: .5rem;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/*}*/
-
-/*.group-actions button:hover {*/
-/* background: var(--action-50);*/
-/* color: var(--contrast);*/
-/* border-color: var(--action-50);*/
-/*}*/
-
-/*.group-actions .delete-group:hover {*/
-/* background: var(--danger);*/
-/* border-color: var(--danger);*/
-/*}*/
-
-/*!* Group Content *!*/
-/*.group-content {*/
-/* min-height: 120px;*/
-/*}*/
-
-/*.group-drop-zone {*/
-/* border: 2px dashed var(--base-300);*/
-/* border-radius: var(--innerRadius);*/
-/* padding: 2rem;*/
-/* text-align: center;*/
-/* color: var(--text-muted);*/
-/* transition: all .2s ease;*/
-/* cursor: pointer;*/
-/*}*/
-
-/*.group-drop-zone:hover,*/
-/*.group-drop-zone.dragover {*/
-/* border-color: var(--action-50);*/
-/* background: rgba(var(--action-rgb), .05);*/
-/* color: var(--action-50);*/
-/*}*/
-
-/*.group-items {*/
-/* display: grid;*/
-/* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
-/* gap: 1rem;*/
-/* padding: 1rem 0;*/
-/*}*/
-
-/*.group-item {*/
-/* position: relative;*/
-/* aspect-ratio: 1;*/
-/* border-radius: var(--innerRadius);*/
-/* overflow: hidden;*/
-/* background: var(--base);*/
-/* transition: transform .2s ease;*/
-/*}*/
-
-/*.group-item:hover {*/
-/* transform: scale(1.02);*/
-/*}*/
-
-/*.group-item img {*/
-/* width: 100%;*/
-/* height: 100%;*/
-/* object-fit: cover;*/
-/*}*/
-
-/*.group-item .overlay {*/
-/* position: absolute;*/
-/* top: 0;*/
-/* left: 0;*/
-/* right: 0;*/
-/* bottom: 0;*/
-/* background: rgba(0, 0, 0, .6);*/
-/* opacity: 0;*/
-/* transition: opacity .2s ease;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* gap: .5rem;*/
-/*}*/
-
-/*.group-item:hover .overlay {*/
-/* opacity: 1;*/
-/*}*/
-
-/*.group-item .overlay button {*/
-/* background: rgba(255, 255, 255, .9);*/
-/* border: none;*/
-/* border-radius: 50%;*/
-/* width: 2rem;*/
-/* height: 2rem;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.group-item .set-featured {*/
-/* color: var(--warning);*/
-/*}*/
-
-/*.group-item .set-featured:hover {*/
-/* background: var(--warning);*/
-/* color: white;*/
-/*}*/
-
-/*.group-item .remove-from-group:hover {*/
-/* background: var(--danger);*/
-/* color: white;*/
-/*}*/
-
-/*!* Empty Group State *!*/
-/*.empty-group {*/
-/* border: 4px dashed var(--base-200);*/
-/* border-radius: var(--innerRadius);*/
-/* padding: 2rem;*/
-/* text-align: center;*/
-/* color: var(--text-muted);*/
-/* aspect-ratio: 1;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.empty-group:hover,*/
-/*.empty-group.dragover {*/
-/* border-color: var(--action-50);*/
-/* background: rgba(var(--action-rgb), .05);*/
-/* color: var(--action-50);*/
-/*}*/
-
-/*!* Sidebar *!*/
-/*.sidebar {*/
-/* background: var(--base-50);*/
-/* border-radius: var(--outerRadius);*/
-/* padding: 1.5rem;*/
-/* min-height: 400px;*/
-/*}*/
-
-/*.sidebar .header {*/
-/* margin-bottom: 1.5rem;*/
-/*}*/
-
-/*.sidebar h4 {*/
-/* margin: 0 0 .5rem 0;*/
-/* color: var(--text);*/
-/*}*/
-
-/*.sidebar .hint {*/
-/* font-size: .85rem;*/
-/* color: var(--text-muted);*/
-/* margin: .25rem 0;*/
-/*}*/
-
-/*.new-group {*/
-/* width: 100%;*/
-/* background: var(--action-50);*/
-/* color: var(--contrast);*/
-/* border: none;*/
-/* border-radius: var(--innerRadius);*/
-/* padding: .75rem;*/
-/* margin-bottom: 1rem;*/
-/* cursor: pointer;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* gap: .5rem;*/
-/* font-weight: 500;*/
-/* transition: background-color .2s ease;*/
-/*}*/
-
-/*.new-group:hover {*/
-/* background: rgba(var(--action-rgb), .8);*/
-/*}*/
-
-/*!* Layout *!*/
-/*.group-display {*/
-/* display: grid;*/
-/* grid-template-columns: 2fr 1fr;*/
-/* gap: 2rem;*/
-/* margin-top: 2rem;*/
-/*}*/
-
-/*.preview-wrap {*/
-/* min-height: 400px;*/
-/*}*/
-
-/*.preview-grid {*/
-/* display: grid;*/
-/* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));*/
-/* gap: 1rem;*/
-/* padding: 1rem;*/
-/* background: var(--base-100);*/
-/* border-radius: var(--outerRadius);*/
-/* min-height: 200px;*/
-/*}*/
-
-/*.preview-grid:empty::after {*/
-/* content: "No images uploaded yet. Drag files here or click to upload.";*/
-/* grid-column: 1 / -1;*/
-/* text-align: center;*/
-/* color: var(--text-muted);*/
-/* padding: 2rem;*/
-/* border: 2px dashed var(--base-300);*/
-/* border-radius: var(--innerRadius);*/
-/*}*/
-
-/*!* File Upload Container *!*/
-/*.file-upload-container.dragover {*/
-/* border-color: var(--action-50);*/
-/* background: rgba(var(--action-rgb), .05);*/
-/*}*/
-
-/*!* Responsive Design *!*/
-/*@media (max-width: 768px) {*/
-/* .group-display {*/
-/* grid-template-columns: 1fr;*/
-/* gap: 1rem;*/
-/* }*/
-
-/* .preview-actions {*/
-/* flex-direction: column;*/
-/* align-items: stretch;*/
-/* gap: 1rem;*/
-/* }*/
-
-/* .selection-controls {*/
-/* justify-content: space-between;*/
-/* }*/
-
-/* .preview-grid {*/
-/* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
-/* }*/
-
-/* .group-items {*/
-/* grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));*/
-/* }*/
-/*}*/
-
-/*!* Animation for upload progress *!*/
-/*@keyframes uploadProgress {*/
-/* 0% { transform: translateX(-100%); }*/
-/* 100% { transform: translateX(100%); }*/
-/*}*/
-
-/*.upload-item[data-status="uploading"] .progress .bar::after {*/
-/* content: '';*/
-/* position: absolute;*/
-/* top: 0;*/
-/* left: 0;*/
-/* height: 100%;*/
-/* width: 20%;*/
-/* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);*/
-/* animation: uploadProgress 1.5s infinite;*/
-/*}*/
-
-/*!* Accessibility *!*/
-/*.upload-item:focus-within,*/
-/*.group-item:focus-within,*/
-/*.upload-group:focus-within {*/
-/* outline: 2px solid var(--action-50);*/
-/* outline-offset: 2px;*/
-/*}*/
-
-/*!* High contrast mode support *!*/
-/*@media (prefers-contrast: high) {*/
-/* .upload-item.selected {*/
-/* border-width: 3px;*/
-/* }*/
-
-/* .group-drop-zone.dragover {*/
-/* border-width: 3px;*/
-/* }*/
-/*}*/
-/*.restore-notification {*/
-/* background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);*/
-/* border: 1px solid #ffc107;*/
-/* border-left: 4px solid #ff6b35;*/
-/* border-radius: var(--outerRadius);*/
-/* padding: 1.5rem;*/
-/* margin-bottom: 1.5rem;*/
-/* box-shadow: 0 4px 12px rgba(255, 107, 53, .15);*/
-/* animation: slideInFromTop .4s ease-out;*/
-/* transition: opacity .3s ease, transform .3s ease;*/
-/*}*/
-
-/*@keyframes slideInFromTop {*/
-/* from {*/
-/* transform: translateY(-20px);*/
-/* opacity: 0;*/
-/* }*/
-/* to {*/
-/* transform: translateY(0);*/
-/* opacity: 1;*/
-/* }*/
-/*}*/
-
-/*.restore-content {*/
-/* display: grid;*/
-/* grid-template-columns: auto 1fr auto;*/
-/* gap: 1rem;*/
-/* align-items: start;*/
-/*}*/
-
-/*.restore-icon {*/
-/* font-size: 1.5rem;*/
-/* color: #ff6b35;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* width: 2.5rem;*/
-/* height: 2.5rem;*/
-/* background: rgba(255, 107, 53, .1);*/
-/* border-radius: 50%;*/
-/* flex-shrink: 0;*/
-/*}*/
-
-/*.restore-message {*/
-/* min-width: 0; !* Allow text to wrap *!*/
-/*}*/
-
-/*.restore-message h4 {*/
-/* margin: 0 0 .5rem 0;*/
-/* color: #d63384;*/
-/* font-size: 1.1rem;*/
-/* font-weight: 600;*/
-/*}*/
-
-/*.restore-message p {*/
-/* margin: 0 0 .5rem 0;*/
-/* color: #6c5419;*/
-/* line-height: 1.4;*/
-/*}*/
-
-/*.restore-message p:last-child {*/
-/* margin-bottom: 0;*/
-/*}*/
-
-/*.restore-message .warning {*/
-/* background: rgba(220, 53, 69, .1);*/
-/* border: 1px solid rgba(220, 53, 69, .2);*/
-/* border-radius: var(--innerRadius);*/
-/* padding: .5rem .75rem;*/
-/* margin-top: .75rem;*/
-/* font-size: .9rem;*/
-/*}*/
-
-/*.restore-message .warning strong {*/
-/* color: #dc3545;*/
-/*}*/
-
-/*.restore-actions {*/
-/* display: flex;*/
-/* flex-direction: column;*/
-/* gap: .5rem;*/
-/* flex-shrink: 0;*/
-/*}*/
-
-/*.start-over-btn {*/
-/* background: #dc3545;*/
-/* color: white;*/
-/* border: none;*/
-/* border-radius: var(--innerRadius);*/
-/* padding: .5rem 1rem;*/
-/* font-size: .9rem;*/
-/* font-weight: 500;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/* white-space: nowrap;*/
-/*}*/
-
-/*.start-over-btn:hover {*/
-/* background: #c82333;*/
-/* transform: translateY(-1px);*/
-/* box-shadow: 0 2px 4px rgba(220, 53, 69, .3);*/
-/*}*/
-
-/*.start-over-btn:active {*/
-/* transform: translateY(0);*/
-/*}*/
-
-/*.dismiss-notification {*/
-/* background: transparent;*/
-/* border: 1px solid #6c5419;*/
-/* color: #6c5419;*/
-/* border-radius: var(--innerRadius);*/
-/* padding: .5rem;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* width: 2rem;*/
-/* height: 2rem;*/
-/*}*/
-
-/*.dismiss-notification:hover {*/
-/* background: #6c5419;*/
-/* color: white;*/
-/*}*/
-
-/*!* Start Over Confirmation Dialog *!*/
-/*.start-over-confirmation {*/
-/* border: none;*/
-/* border-radius: var(--outerRadius);*/
-/* padding: 0;*/
-/* box-shadow: 0 10px 30px rgba(0, 0, 0, .3);*/
-/* max-width: 500px;*/
-/* width: 90vw;*/
-/*}*/
-
-/*.start-over-confirmation::backdrop {*/
-/* background: rgba(0, 0, 0, .6);*/
-/* backdrop-filter: blur(4px);*/
-/*}*/
-
-/*.confirmation-content {*/
-/* padding: 2rem;*/
-/* background: var(--base);*/
-/* border-radius: var(--outerRadius);*/
-/*}*/
-
-/*.confirmation-content h3 {*/
-/* margin: 0 0 1rem 0;*/
-/* color: #dc3545;*/
-/* font-size: 1.25rem;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* gap: .5rem;*/
-/*}*/
-
-/*.confirmation-content h3::before {*/
-/* content: "⚠️";*/
-/* font-size: 1.5rem;*/
-/*}*/
-
-/*.confirmation-content p {*/
-/* margin: 0 0 1rem 0;*/
-/* color: var(--text);*/
-/* line-height: 1.5;*/
-/*}*/
-
-/*.confirmation-content ul {*/
-/* margin: 0 0 1rem 1rem;*/
-/* color: var(--text);*/
-/*}*/
-
-/*.confirmation-content li {*/
-/* margin-bottom: .25rem;*/
-/*}*/
-
-/*.confirmation-actions {*/
-/* display: flex;*/
-/* gap: 1rem;*/
-/* justify-content: flex-end;*/
-/* margin-top: 1.5rem;*/
-/* padding-top: 1rem;*/
-/* border-top: 1px solid var(--base-200);*/
-/*}*/
-
-/*.confirm-start-over {*/
-/* background: #dc3545;*/
-/* color: white;*/
-/* border: none;*/
-/* border-radius: var(--innerRadius);*/
-/* padding: .75rem 1.5rem;*/
-/* font-weight: 500;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.confirm-start-over:hover {*/
-/* background: #c82333;*/
-/*}*/
-
-/*.cancel-start-over {*/
-/* background: var(--base-100);*/
-/* color: var(--text);*/
-/* border: 1px solid var(--base-300);*/
-/* border-radius: var(--innerRadius);*/
-/* padding: .75rem 1.5rem;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.cancel-start-over:hover {*/
-/* background: var(--base-200);*/
-/*}*/
-
-/*!* Responsive Design *!*/
-/*@media (max-width: 768px) {*/
-/* .restore-content {*/
-/* grid-template-columns: 1fr;*/
-/* gap: 1rem;*/
-/* text-align: center;*/
-/* }*/
-
-/* .restore-icon {*/
-/* margin: 0 auto;*/
-/* }*/
-
-/* .restore-actions {*/
-/* flex-direction: row;*/
-/* justify-content: center;*/
-/* align-items: center;*/
-/* }*/
-
-/* .start-over-btn {*/
-/* order: 2;*/
-/* }*/
-
-/* .dismiss-notification {*/
-/* order: 1;*/
-/* }*/
-
-/* .confirmation-actions {*/
-/* flex-direction: column-reverse;*/
-/* }*/
-
-/* .confirmation-actions button {*/
-/* width: 100%;*/
-/* }*/
-/*}*/
-
-/*!* Reduced motion preference *!*/
-/*@media (prefers-reduced-motion: reduce) {*/
-/* .restore-notification {*/
-/* animation: none;*/
-/* }*/
-
-/* .start-over-btn:hover {*/
-/* transform: none;*/
-/* }*/
-/*}*/
-
-/*!* High contrast mode *!*/
-/*@media (prefers-contrast: high) {*/
-/* .restore-notification {*/
-/* border-width: 2px;*/
-/* border-left-width: 6px;*/
-/* }*/
-
-/* .restore-message .warning {*/
-/* border-width: 2px;*/
-/* }*/
-/*}*/
-
-/*!* Dark mode adjustments *!*/
-/*@media (prefers-color-scheme: dark) {*/
-/* .restore-notification {*/
-/* background: linear-gradient(135deg, #3d3d00 0%, #4a4a00 100%);*/
-/* border-color: #ffc107;*/
-/* color: #fff3cd;*/
-/* }*/
-
-/* .restore-message p {*/
-/* color: #fff3cd;*/
-/* }*/
-
-/* .restore-message .warning {*/
-/* background: rgba(220, 53, 69, .2);*/
-/* border-color: rgba(220, 53, 69, .4);*/
-/* color: #ffb3ba;*/
-/* }*/
-
-/* .dismiss-notification {*/
-/* border-color: #fff3cd;*/
-/* color: #fff3cd;*/
-/* }*/
-
-/* .dismiss-notification:hover {*/
-/* background: #fff3cd;*/
-/* color: #3d3d00;*/
-/* }*/
-/*}*/
-
-/*.dragover {*/
-/* background-color: rgba(var(--primary-rgb), .1);*/
-/* border: 2px dashed var(--primary-color);*/
-/* border-radius: 8px;*/
-/*}*/
-
-/*.upload-item.dragging {*/
-/* opacity: .5;*/
-/* transform: scale(.95);*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.group-drop-zone {*/
-/* min-height: 60px;*/
-/* border: 2px dashed #ccc;*/
-/* border-radius: 8px;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* color: #666;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.group-drop-zone.dragover {*/
-/* border-color: var(--primary-color);*/
-/* background-color: rgba(var(--primary-rgb), .05);*/
-/* color: var(--primary-color);*/
-/*}*/
-
-/*.empty-group {*/
-/* padding: 20px;*/
-/* text-align: center;*/
-/* border: 2px dashed #ddd;*/
-/* border-radius: 8px;*/
-/* margin: 10px 0;*/
-/* cursor: pointer;*/
-/* transition: all .2s ease;*/
-/*}*/
-
-/*.empty-group:hover {*/
-/* border-color: var(--primary-color);*/
-/* background-color: rgba(var(--primary-rgb), .02);*/
-/*}*/
-
-/*.group-item.featured {*/
-/* border: 2px solid gold;*/
-/* position: relative;*/
-/*}*/
-
-/*.group-item.featured::after {*/
-/* content: "⭐";*/
-/* position: absolute;*/
-/* top: 5px;*/
-/* right: 5px;*/
-/* background: gold;*/
-/* border-radius: 50%;*/
-/* width: 20px;*/
-/* height: 20px;*/
-/* display: flex;*/
-/* align-items: center;*/
-/* justify-content: center;*/
-/* font-size: 12px;*/
-/*}*/
-
-/*.upload-item[draggable="true"] {*/
-/* cursor: grab;*/
-/*}*/
-
-/*.upload-item[draggable="true"]:active {*/
-/* cursor: grabbing;*/
-/*}*/
-
-/*.selection-actions {*/
-/* display: flex;*/
-/* align-items: center;*/
-/* gap: 10px;*/
-/* padding: 10px;*/
-/* background: rgba(var(--primary-rgb), .05);*/
-/* border-radius: 6px;*/
-/* border: 1px solid rgba(var(--primary-rgb), .2);*/
-/*}*/
-
-/*.group-display .sidebar {*/
-/* min-width: 300px;*/
-/* max-width: 350px;*/
-/* background: #f9f9f9;*/
-/* border-left: 1px solid #eee;*/
-/* padding: 20px;*/
-/*}*/
-
-/*.group-display .preview-wrap {*/
-/* flex: 1;*/
-/* padding: 20px;*/
-/*}*/
-
-/*.group-display {*/
-/* display: flex;*/
-/* gap: 20px;*/
-/* margin-top: 20px;*/
-/* border: 1px solid #ddd;*/
-/* border-radius: 8px;*/
-/* overflow: hidden;*/
-/*}*/
-
-/* Touch Drag & Drop Styles */
-
-/* Original item being dragged */
-.upload-item.dragging {
- opacity: .5;
- transform: scale(.95);
- transition: opacity .2s ease, transform .2s ease;
-}
-
-/* Touch drag preview element */
-.drag-preview {
- background: var(--bg-elevated);
- border: 2px solid var(--accent-primary);
- cursor: grabbing;
- user-select: none;
- -webkit-user-select: none;
- -webkit-user-drag: none;
-}
-
-.drag-preview * {
- pointer-events: none;
-}
-
-/* Drop target states for touch */
-.dragover {
- background-color: var(--accent-primary-alpha);
- border: 2px dashed var(--accent-primary);
- transform: scale(1.02);
- transition: all .2s ease;
-}
-
-.dragover::after {
- content: "Drop here";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: var(--accent-primary);
- color: white;
- padding: 8px 16px;
- border-radius: 4px;
- font-size: 14px;
- font-weight: 500;
- z-index: 1;
- pointer-events: none;
-}
-
-/* Enhanced touch targets for mobile */
-@media (hover: none) and (pointer: coarse) {
- .upload-item {
- min-height: 44px; /* Apple's recommended minimum touch target */
- touch-action: manipulation;
- }
-
- .upload-item [data-upload-id] {
- cursor: grab;
- -webkit-user-select: none;
- user-select: none;
- }
-
- .upload-item.dragging {
- cursor: grabbing;
- }
-
- /* Larger touch targets for action buttons */
- .upload-item .actions button {
- min-width: 44px;
- min-height: 44px;
- padding: 12px;
- }
-
- /* Group containers more touch-friendly */
- .item-grid.groups .empty-group {
- padding: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 16px;
- }
-
- .group-content {
- padding: 0;
- width: 100%;
- }
-
- /* Better visual feedback for group areas */
- .item-grid.group,
- .item-grid.groups {
- border: 2px solid transparent;
- border-radius: 8px;
- transition: border-color .2s ease, background-color .2s ease;
- }
-
- .item-grid.group.dragover,
- .item-grid.groups.dragover {
- border-color: var(--accent-primary);
- background-color: var(--accent-primary-alpha);
- }
-}
-
-/* Haptic feedback animation */
-@keyframes feedback {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.05); }
- 100% { transform: scale(1); }
-}
-
-.feedback {
- animation: feedback .2s ease;
-}
-
-/* Prevent text selection during touch drag */
-.dragging,
-.dragging * {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-/* Long press visual feedback */
-.upload-item:active {
- transform: scale(.98);
- transition: transform .1s ease;
-}
-
-/* Better spacing for touch interfaces */
-@media (hover: none) {
-
- .item-grid.groups {
- gap: 16px;
- }
-
- .group-item {
- margin: 8px;
- }
-}
-
-/* Accessibility improvements for touch */
-.upload-item:focus-visible {
- outline: 3px solid var(--accent-primary);
- outline-offset: 2px;
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
- .dragover {
- border-width: 3px;
- border-style: solid;
- }
-
- .drag-preview {
- border-width: 3px;
- }
-}
-/* Touch Drag & Drop Styles */
-
-/* Original item being dragged */
-.upload-item.dragging {
- opacity: .5;
- transform: scale(.95);
- transition: opacity .2s ease, transform .2s ease;
-}
-
-/* Touch drag preview element */
-.drag-preview {
- background: var(--bg-elevated);
- border: 2px solid var(--accent-primary);
- cursor: grabbing;
- user-select: none;
- -webkit-user-select: none;
- -webkit-user-drag: none;
-}
-
-.drag-preview * {
- pointer-events: none;
-}
-
-/* Multi-item drag preview */
-.drag-preview.multi-item {
- /* Container styles handled in JS for dynamic positioning */
-}
-.drag-preview img {
- max-width: 200px;
- width: 100%;
- height: 100%;
- aspect-ratio: 1;
-}
-
-.drag-preview.multi-item .selection-count-badge {
- background: var(--accent-primary);
- color: white;
- border: 2px solid white;
- font-weight: bold;
- text-shadow: 0 1px 2px rgba(0,0,0,.5);
-}
-
-/* Enhanced visual feedback for multiple selection */
-.upload-item.selected.dragging {
- opacity: .3;
- transform: scale(.9);
- border: 2px solid var(--accent-primary);
-}
-
-/* Stacked preview animation */
-@keyframes stack-preview {
- 0% {
- transform: translateX(0) translateY(0) rotate(0deg) scale(1);
- opacity: 1;
- }
- 100% {
- transform: translateX(var(--stack-x, 0)) translateY(var(--stack-y, 0)) rotate(var(--stack-rotation, 0deg)) scale(1.05);
- opacity: var(--stack-opacity, .8);
- }
-}
-
-.drag-preview.multi-item > * {
- animation: stack-preview .2s ease-out forwards;
-}
-
-/* Drop target states for touch */
-.dragover {
- background-color: var(--accent-primary-alpha);
- border: 2px dashed var(--accent-primary);
- transform: scale(1.02);
- transition: all .2s ease;
-}
-
-.dragover::after {
- content: "Drop here";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: var(--accent-primary);
- color: white;
- padding: 8px 16px;
- border-radius: 4px;
- font-size: 14px;
- font-weight: 500;
- z-index: 1;
- pointer-events: none;
-}
-
-/* Enhanced drop feedback for multiple items */
-.dragover.multi-drop::after {
- content: "Drop " attr(data-item-count) " items here";
- padding: 10px 20px;
- font-size: 16px;
- border-radius: 6px;
- box-shadow: 0 4px 12px rgba(0,0,0,.3);
-}
-
-/* Pulsing animation for multi-item drop zones */
-.dragover.multi-drop {
- animation: multi-drop-pulse 1s infinite alternate;
-}
-
-@keyframes multi-drop-pulse {
- 0% {
- background-color: var(--accent-primary-alpha);
- transform: scale(1.02);
- }
- 100% {
- background-color: var(--accent-secondary-alpha, var(--accent-primary-alpha));
- transform: scale(1.04);
- }
-}
-
-/* Enhanced touch targets for mobile */
-@media (hover: none) and (pointer: coarse) {
- .upload-item {
- min-height: 44px; /* Apple's recommended minimum touch target */
- touch-action: manipulation;
- }
-
- .upload-item [data-upload-id] {
- cursor: grab;
- -webkit-user-select: none;
- user-select: none;
- }
-
- .upload-item.dragging {
- cursor: grabbing;
- }
-
- /* Larger touch targets for action buttons */
- .upload-item .actions button {
- min-width: 44px;
- min-height: 44px;
- padding: 12px;
- }
-
- /* Group containers more touch-friendly */
- .item-grid.groups .empty-group {
- padding: 1rem;
- margin: 1rem;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 16px;
- }
-
- /* Better visual feedback for group areas */
- .item-grid.group,
- .item-grid.groups {
- border: 2px solid transparent;
- border-radius: 8px;
- transition: border-color .2s ease, background-color .2s ease;
- }
-
- .item-grid.group.dragover,
- .item-grid.groups.dragover {
- border-color: var(--accent-primary);
- background-color: var(--accent-primary-alpha);
- }
-}
-
-/* Haptic feedback animation */
-@keyframes feedback {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.05); }
- 100% { transform: scale(1); }
-}
-
-.feedback {
- animation: feedback .2s ease;
-}
-
-/* Prevent text selection during touch drag */
-.dragging,
-.dragging * {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-/* Long press visual feedback */
-.upload-item:active {
- transform: scale(.98);
- transition: transform .1s ease;
-}
-
-/* Better spacing for touch interfaces */
-@media (hover: none) {
-
- .item-grid.groups {
- gap: 16px;
- }
-
- .group-item {
- margin: 8px;
- }
-}
-
-/* Accessibility improvements for touch */
-.upload-item:focus-visible {
- outline: 3px solid var(--accent-primary);
- outline-offset: 2px;
-}
-
-/* Enhanced selection states for touch */
-.upload-item.selected {
- border: 2px solid var(--accent-primary);
- background-color: var(--accent-primary-alpha);
-}
-
-.upload-item.selected.dragging {
- border-color: var(--accent-secondary);
- background-color: var(--accent-secondary-alpha);
-}
-
-/* Touch feedback animations */
-.feedback-start {
- animation: feedback-start .3s ease;
-}
-
-.feedback-success {
- animation: feedback-success .5s ease;
-}
-
-.feedback-error {
- animation: feedback-error .5s ease;
-}
-
-@keyframes feedback-start {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.05); background-color: var(--accent-primary-alpha); }
- 100% { transform: scale(1); }
-}
-
-@keyframes feedback-success {
- 0% { transform: scale(1); }
- 25% { transform: scale(1.1); background-color: var(--success-alpha); }
- 50% { transform: scale(1.05); }
- 100% { transform: scale(1); }
-}
-
-@keyframes feedback-error {
- 0% { transform: translateX(0); }
- 25% { transform: translateX(-5px); background-color: var(--error-alpha); }
- 50% { transform: translateX(5px); }
- 75% { transform: translateX(-3px); }
- 100% { transform: translateX(0); }
-}
-
-/* Multi-selection visual enhancements */
-.upload-item.selected::after {
- content: "✓";
- position: absolute;
- top: 8px;
- right: 8px;
- background: var(--accent-primary);
- color: white;
- border-radius: 50%;
- width: 20px;
- height: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- font-weight: bold;
- z-index: 10;
-}
-
-/* Selection count in drag preview */
-.selection-count-badge {
- animation: badge-appear .3s ease;
-}
-
-@keyframes badge-appear {
- 0% {
- transform: scale(0);
- opacity: 0;
- }
- 50% {
- transform: scale(1.2);
- opacity: 1;
- }
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
- .dragover {
- border-width: 3px;
- border-style: solid;
- }
-
- .drag-preview {
- border-width: 3px;
- }
-
- .upload-item.selected {
- border-width: 3px;
- }
-}
-
-.drag-preview.multi-item {
- position: relative;
- width: 120px !important;
- height: 120px !important;
- /* Ensure consistent sizing for multi-item previews */
-}
-
-.drag-preview.multi-item img {
- max-width: 100%;
- max-height: 100%;
- width: 100%;
- height: 100%;
- object-fit: cover;
- aspect-ratio: 1;
- border-radius: 6px;
-}
-
-/* Fix stacked item positioning */
-.drag-preview.multi-item > .upload-item {
- position: absolute;
- width: 100%;
- height: 100%;
- border-radius: 6px;
- overflow: hidden;
-}
-
-.drag-preview.multi-item > .upload-item:nth-child(1) {
- top: 0;
- left: 0;
- z-index: 3;
- opacity: 1;
- transform: rotate(-2deg);
-}
-
-.drag-preview.multi-item > .upload-item:nth-child(2) {
- top: 4px;
- left: 4px;
- z-index: 2;
- opacity: .85;
- transform: rotate(1deg);
-}
-
-.drag-preview.multi-item > .upload-item:nth-child(3) {
- top: 8px;
- left: 8px;
- z-index: 1;
- opacity: .7;
- transform: rotate(-1deg);
-}
-
-/* Selection count badge positioning */
-.drag-preview.multi-item .selection-count-badge {
- position: absolute;
- top: -8px;
- right: -8px;
- background: var(--accent-primary);
- color: white;
- border: 2px solid white;
- border-radius: 50%;
- width: 28px;
- height: 28px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- font-weight: bold;
- font-family: system-ui, -apple-system, sans-serif;
- box-shadow: 0 2px 8px rgba(0,0,0,.3);
- z-index: 20;
- line-height: 1;
-}
-
-/* Ensure drag preview is always visible */
-.drag-preview {
- pointer-events: none;
- z-index: 10000 !important;
-}
-
-/* Remove any transforms that might interfere with positioning */
-.drag-preview.multi-item .upload-item .progress,
-.drag-preview.multi-item .upload-item .actions,
-.drag-preview.multi-item .upload-item .status,
-.drag-preview.multi-item .upload-item details {
- display: none !important;
-}
-
-/* Clean up the visual during multi-drag */
-.upload-item.selected.dragging {
- opacity: .3;
- transform: scale(.95);
- border: 2px dashed var(--accent-primary);
- background-color: var(--accent-primary-alpha);
-}
-
-/* Improved drop zone feedback for multiple items */
-.dragover.multi-drop {
- animation: multi-drop-pulse .8s infinite ease-in-out;
- border-style: solid;
-}
-
-@keyframes multi-drop-pulse {
- 0%, 100% {
- background-color: var(--accent-primary-alpha);
- transform: scale(1.02);
- border-color: var(--accent-primary);
- }
- 50% {
- background-color: var(--accent-secondary-alpha, var(--accent-primary-alpha));
- transform: scale(1.04);
- border-color: var(--accent-secondary, var(--accent-primary));
- }
-}
-
-/* Enhanced feedback for successful drops */
-@keyframes drop-success {
- 0% {
- background-color: var(--success-alpha);
- transform: scale(1.1);
- }
- 100% {
- background-color: transparent;
- transform: scale(1);
- }
-}
-
-.drop-success {
- animation: drop-success .6s ease-out;
-}
-
-.drag-preview {
- border: 2px solid red !important;
- background: rgba(255, 0, 0, .1) !important;
-}
-
-.drag-preview.multi-item {
- border: 2px solid blue !important;
- background: rgba(0, 0, 255, .1) !important;
-}
-
-.dragging {
- opacity: .5 !important;
- border: 2px dashed orange !important;
-}
-
-.dragover {
- background: rgba(0, 255, 0, .2) !important;
- border: 2px dashed green !important;
-}
-
-.dragover.multi-drop::before {
- content: "Drop " attr(data-item-count) " items here";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: rgba(0, 0, 0, .8);
- color: white;
- padding: 8px 16px;
- border-radius: 4px;
- font-size: 14px;
- font-weight: bold;
- z-index: 1000;
- pointer-events: none;
-}
-
-.drag-preview {
- /* Ensure drag preview is always visible */
- position: fixed !important;
- z-index: 9999 !important;
- pointer-events: none !important;
-
- /* Improve visual appearance */
- box-shadow: 0 8px 25px rgba(0,0,0,.3);
- border-radius: 8px;
- overflow: hidden;
-
- /* Ensure it's not affected by parent transforms or overflow */
- transform-style: preserve-3d;
-}
-
-.drag-preview.multi-item {
- /* Ensure proper stacking context for multi-item previews */
- isolation: isolate;
-}
-
-.drag-preview .upload-item {
- /* Ensure child items are positioned correctly */
- border-radius: 4px;
- overflow: hidden;
- box-shadow: 0 2px 8px rgba(0,0,0,.15);
-}
-
-.drag-preview .upload-item img {
- /* Prevent image layout issues during drag */
- max-width: 100%;
- height: auto;
- display: block;
-}
-
-/* Debug styles - remove in production */
-.drag-preview {
- border: 2px solid red !important;
-}
-
-.drag-preview.multi-item {
- border: 2px solid blue !important;
-}
-
-/* Hide complex UI elements in drag preview */
-.drag-preview details,
-.drag-preview .actions,
-.drag-preview .progress {
- display: none !important;
-}
-
-/* Simplify the preview to just show the image */
-.drag-preview .preview {
- width: 100% !important;
- height: 100% !important;
-}
-
-.drag-preview .preview img {
- width: 100% !important;
- height: 100% !important;
- object-fit: cover !important;
-}
-
-
-.upload-group summary {
- padding: 0!important;
-}
-
-
-/* Mobile-First Image Grouping Layout - Using Existing Templates */
-
-/* Base mobile layout - stack everything vertically */
-@media (max-width: 768px) {
-
- .item-grid.preview details,
- .item-grid.group details {
- display: none;
- }
- .group-display {
- display: flex;
- flex-direction: column;
- gap: 0;
- height: calc(100vh - var(--height) - var(--height));
- position: fixed;
- top: var(--height);
- bottom: var(--height);
- left: 0;
- right: 0;
- z-index:999;
- }
-
- .preview-wrap,
- .sidebar {
- flex: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
- overflow: hidden;
- overflow-y: auto;
- }
- /* Preview section - top half of screen */
- .preview-wrap {
- background: var(--base);
- border-bottom: 2px solid var(--action-0);
- }
-
- /* Preview actions - sticky at top */
- .preview-actions {
- position: sticky;
- top: 0;
- z-index: 10;
- background: var(--base);
- border-bottom: 1px solid var(--base-200);
- flex-shrink: 0;
- }
-
- /* Preview grid - scrollable area */
- .item-grid.preview {
- flex: 1;
- grid-template-columns: repeat(3, 1fr);
- gap: .75rem;
- padding: .5rem;
- margin-top: 0;
- }
- .item-grid + .hint {
- margin-top: 0;
- }
-
- /* Groups section - bottom half with sticky header */
- .sidebar {
- background: var(--base-200);
- border-top: 3px solid var(--action-50);
- }
-
- /* Groups header - sticky */
- .sidebar .header {
- border-bottom: 1px solid var(--base-200);
- padding: 1rem;
- flex-shrink: 0;
- }
-
- /* Create group button */
- .create-group-from-selection {
- margin: 0 1rem 1rem 1rem;
- flex-shrink: 0;
- min-height: 44px; /* Touch target */
- padding: .75rem 1rem;
- font-size: .9rem;
- }
-
- /* Groups container - scrollable */
- .item-grid.groups {
- flex: 1;
- margin: 0;
- grid-template-columns: repeat(2, 1fr); /* Single column on mobile */
- gap: 1rem;
- }
-
- /* Enhanced empty group for mobile */
- .empty-group {
- aspect-ratio: unset;
- grid-column: 1/-1;
- transition: all .2s ease;
- }
-
- .item-grid.groups .item-grid {
- grid-template-columns: repeat(3, 1fr);
- }
- .item-grid.groups .item-grid details {
- display: none;
- }
-
- .empty-group:hover,
- .empty-group.dragover {
- border-color: var(--action-0);
- background: var(--action-rgb-subtle-hover);
- transform: scale(1.02);
- }
-
- /* Upload button - fixed at bottom */
- .submit-uploads {
- position: fixed !important;
- bottom: var(--offHeight);
- right: .5rem;
- z-index: 20;
- height: 3rem;
- font-size: 1.1rem;
- font-weight: 600;
- box-shadow: var(--shadow);
- border-radius: var(--outerRadius);
- }
-
- .submit-uploads:hover {
- transform: translateY(-2px);
- box-shadow: 0 8px 25px rgba(0,0,0,.2);
- }
-
- /* Enhanced upload items for mobile */
- .upload-item {
- border-radius: var(--innerRadius);
- overflow: hidden;
- background: var(--base);
- border: 1px solid var(--base-200);
- transition: transform .2s ease;
- }
-
- .upload-item:hover {
- transform: scale(1.02);
- }
-
- /* Mobile-friendly actions overlay */
- .upload-item .actions {
- padding: .5rem;
- }
-
- .upload-item .actions button {
- min-width: 44px;
- min-height: 44px;
- padding: .75rem;
- border-radius: var(--innerRadius);
- }
-
- /* Better checkbox targets */
- .upload-item .upload-select + label {
- min-width: 44px;
- min-height: 44px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: var(--innerRadius);
- }
-
- /* Enhanced group styling for mobile */
- .upload-group {
- background: var(--base-100);
- border-radius: var(--innerRadius);
- border: 1px solid var(--base-200);
- padding: 1rem;
- margin-bottom: 1rem;
- }
-
- .upload-group .group-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 1rem;
- padding-bottom: .5rem;
- border-bottom: 1px solid var(--base-200);
- flex-wrap: wrap;
- gap: .5rem;
- }
-
- .upload-group .group-actions {
- display: flex;
- gap: .5rem;
- flex-wrap: wrap;
- }
-
- .upload-group .group-actions button {
- flex: 1;
- min-width: 100px;
- min-height: 44px;
- padding: .5rem .75rem;
- font-size: .9rem;
- border-radius: var(--innerRadius);
- }
-
- .upload-group .item-grid.group {
- grid-template-columns: repeat(2, 1fr);
- gap: .5rem;
- margin-bottom: 1rem;
- }
-
- .upload-group .group-item {
- aspect-ratio: 1;
- border-radius: 4px;
- overflow: hidden;
- border: 1px solid var(--base-200);
- }
-
- /* Hide file upload container on mobile when in grouping mode */
- .group-display:not([hidden]) ~ .file-upload-container {
- display: none;
- }
-
- /* Enhanced selection controls for mobile */
- .selection-controls {
- display: flex;
- flex-direction: column;
- gap: 0;
- }
-
- .selection-controls .selected {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: .5rem;
- }
-
- .selection-actions {
- display: flex;
- padding: 0;
- }
-
- .selection-actions button {
- flex: 1;
- padding: .25rem;
- font-size: .9rem;
- border-radius: var(--innerRadius);
- }
-
- /* Enhanced dragging states for mobile */
- .upload-item.dragging {
- opacity: .7;
- transform: scale(.95) rotate(3deg);
- z-index: 1000;
- box-shadow: 0 8px 25px rgba(0,0,0,.3);
- }
-
- .dragover {
- background: var(--action-rgb-subtle) !important;
- border-color: var(--action-0) !important;
- transform: scale(1.05);
- animation: mobile-drop-pulse .8s infinite ease-in-out;
- }
-
- @keyframes mobile-drop-pulse {
- 0%, 100% {
- background-color: var(--action-rgb-subtle);
- transform: scale(1.02);
- }
- 50% {
- background-color: var(--action-rgb-subtle-hover);
- transform: scale(1.04);
- }
- }
-
- /* Enhanced selection states */
- .upload-item.selected {
- border: 2px solid var(--action-0);
- background-color: var(--action-rgb-subtle);
- }
-
- .upload-item.selected::after {
- content: '✓';
- position: absolute;
- top: .5rem;
- right: .5rem;
- background: var(--action-0);
- color: white;
- border-radius: 50%;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- font-weight: bold;
- z-index: 10;
- animation: selection-pop .3s ease;
- }
-
- @keyframes selection-pop {
- 0% {
- transform: scale(0);
- opacity: 0;
- }
- 70% {
- transform: scale(1.2);
- opacity: 1;
- }
- 100% {
- transform: scale(1);
- opacity: 1;
- }
- }
-
- /* Enhanced details/summary for mobile */
- .upload-item details summary {
- padding: .75rem;
- background: var(--base-100);
- border-radius: var(--innerRadius);
- cursor: pointer;
- display: flex;
- align-items: center;
- gap: .5rem;
- font-size: .9rem;
- font-weight: 500;
- min-height: 44px; /* Touch target */
- }
-
- .upload-item details[open] summary {
- border-radius: var(--innerRadius) var(--innerRadius) 0 0;
- border-bottom: 1px solid var(--base-200);
- }
-
- /* Enhanced forms for mobile */
- .upload-meta input,
- .upload-meta textarea {
- padding: .75rem;
- font-size: 16px; /* Prevents zoom on iOS */
- border-radius: var(--innerRadius);
- border: 2px solid var(--base-200);
- transition: border-color .2s ease;
- }
-
- .upload-meta input:focus,
- .upload-meta textarea:focus {
- border-color: var(--action-0);
- outline: none;
- box-shadow: 0 0 0 3px var(--action-rgb-subtle);
- }
-}
-
-/* Tablet adjustments */
-@media (min-width: 769px) and (max-width: 1024px) {
- .group-display {
- grid-template-columns: 1fr;
- gap: 1.5rem;
- }
-
- .item-grid.preview {
- grid-template-columns: repeat(4, 1fr);
- }
-
- .item-grid.groups {
- grid-template-columns: repeat(2, 1fr);
- }
-}
-
-
-body:has(.group-display:not([hidden])) {
- overflow:hidden;
-}
-
-.today_hours .group-fields {
- width: 100%;
- display: flex;
- justify-content: center;
- gap: .5rem;
-}
-.today_hours .field {
- margin: 0;
-}
-
-
-.jvb-integration-connection {
- background: var(--base);
- border: 2px solid var(--base-200);
- border-radius: 8px;
- padding: 1.5rem;
- margin-bottom: 1.5rem;
- position: relative;
- transition: all 0.3s ease;
-}
-
-
-/* Integration Grid */
-.jvb-integrations-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
- gap: 1.5rem;
- margin-top: 1rem;
-}
-
-/* Connection Header */
-.jvb-connection-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 1.5rem;
- padding-bottom: 1rem;
- border-bottom: 2px solid #ddd;
-}
-
-.jvb-service-info h3.jvb-service-name {
- font-weight: bold;
- text-transform: uppercase;
- color: var(--contrast);
-}
-
-.jvb-service-description {
- margin: 0;
- color: var(--contrast-50);
-}
-
-.jvb-connection-status {
- text-align: right;
- min-width: 150px;
-}
-
-.jvb-status-indicator {
- font-size: 1.2rem;
- margin-right: 0.5rem;
-}
-
-.jvb-connection-status.connected .jvb-status-indicator {
- color: #22c55e;
-}
-
-.jvb-connection-status.disconnected .jvb-status-indicator {
- color: #ef4444;
-}
-
-.jvb-status-text {
- font-weight: bold;
- font-size: var(--small);
- text-transform: uppercase;
-}
-
-.jvb-last-tested {
- display: block;
- color: #888;
- font-size: 0.75rem;
- margin-top: 0.25rem;
-}
-
-/* Settings Section */
-.jvb-settings-section,
-.jvb-integration-settings {
- margin-bottom: 1.5rem;
-}
-
-.jvb-integration-settings h4 {
- margin: 0 0 1rem 0;
- font-size: 1.1rem;
- font-weight: bold;
- color: var(--contrast);
- text-transform: uppercase;
-}
-
-/* Form Fields */
-.jvb-form-field {
- margin-bottom: 1rem;
-}
-
-.jvb-form-field label {
- display: block;
- font-weight: bold;
- margin-bottom: 0.5rem;
- color: var(--contrast);
- text-transform: uppercase;
-}
-
-.jvb-form-field input,
-.jvb-form-field select {
- width: 100%;
- padding: 0.75rem;
- border: 2px solid #ddd;
- border-radius: 4px;
- font-size: 0.9rem;
- background: white;
- transition: border-color 0.3s ease;
-}
-
-.jvb-form-field input:focus,
-.jvb-form-field select:focus {
- outline: none;
- border-color: var(--action-50);
- box-shadow: 0 0 0 3px rgba(var(--action-rgb), 0.1);
-}
-
-.jvb-form-field .description {
- font-size: 0.8rem;
- color: #666;
- margin-top: 0.5rem;
- line-height: 1.4;
-}
-
-/* Checkbox Labels */
-.jvb-checkbox-label {
- display: flex !important;
- align-items: center;
- gap: 0.5rem;
- text-transform: none !important;
- font-weight: normal !important;
- cursor: pointer;
-}
-
-.jvb-checkbox-label input[type="checkbox"] {
- width: auto !important;
- margin: 0;
-}
-
-/* Settings Help */
-.jvb-settings-help {
- background: var(--base-200);
- border: 1px solid var(--base);
- border-radius: 4px;
- padding: 1rem;
- margin-top: 1rem;
-}
-
-.jvb-settings-help ol {
- margin: 0.5rem 0 0 1.5rem;
- padding: 0;
-}
-
-.jvb-settings-help a {
- text-decoration: none;
- font-weight: bold;
-}
-
-/* Connection Actions */
-.jvb-connection-actions {
- display: flex;
- gap: 0.75rem;
- flex-wrap: wrap;
- border-top: 2px solid #ddd;
- padding-top: 1rem;
- align-items: center;
-}
-
-.jvb-connection-actions .button {
- font-family: 'Courier New', monospace;
- font-weight: bold;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- border-radius: 4px;
- padding: 0.6rem 1.2rem;
- font-size: 0.8rem;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.jvb-connect-button.button-primary {
- background: var(--action-50);
- border-color: var(--action-50);
- color: white;
- --o: .2;
- box-shadow: 0 2px 4px var(--action-rgb);
-}
-
-.jvb-connect-button.button-primary:hover {
- background: #e6007a;
- border-color: #e6007a;
- transform: translateY(-1px);
- box-shadow: 0 4px 8px rgba(var(--action-rgb), 0.3);
-}
-
-.jvb-test-button {
- background: white;
- border-color: #22c55e;
- color: #22c55e;
-}
-
-.jvb-test-button:hover {
- background: #22c55e;
- color: white;
-}
-
-.jvb-sync-button {
- background: white;
- border-color: var(--action-50);
- color: var(--action-50);
-}
-
-.jvb-sync-button:hover {
- background: var(--action-50);
- color: white;
-}
-
-.jvb-disconnect-button {
- color: #ef4444 !important;
- border: none !important;
- background: none !important;
- text-decoration: underline;
- margin-left: auto;
-}
-
-.jvb-disconnect-button:hover {
- color: #dc2626 !important;
- background: none !important;
-}
-
-/* Loading States */
-.jvb-integration-form.loading .button {
- opacity: 0.7;
- pointer-events: none;
-}
-
-.jvb-integration-form.loading .jvb-connect-button::after {
- content: ' (Saving...)';
-}
-
-.jvb-integration-form.loading .jvb-test-button::after {
- content: ' (Testing...)';
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
- .jvb-integrations-grid {
- grid-template-columns: 1fr;
- }
-
- .jvb-connection-header {
- flex-direction: column;
- gap: 1rem;
- }
-
- .jvb-connection-status {
- text-align: left;
- min-width: auto;
- }
-
- .jvb-connection-actions {
- flex-direction: column;
- }
-
- .jvb-connection-actions .button {
- width: 100%;
- text-align: center;
- }
-
- .jvb-disconnect-button {
- margin-left: 0 !important;
- }
-}
-
-form .tabs {
- position: sticky;
- top: var(--offHeight);
- left: 0;
- right: 0;
- z-index: 50;
- background: var(--base);
-}
-.tabs.icon {
- position: relative;
- top: 0;
- z-index: 0;
- background: transparent;
- margin: 0;
- border: none;
-}
-
-nav.tabs {
- height: fit-content;
-}
-
-.form-actions {
- display: flex;
-}
-
-.spinner {
- width: 12px;
- height: 12px;
- border: 2px solid transparent;
- border-top: 2px solid var(--action-50);
- border-radius: 50%;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
-
-/****************************************************************************
-*
-* LOCATION FIELD
-*
-****************************************************************************/
-/* Location field container */
-.field.location {
- position: relative;
- margin-bottom: 2rem;
-}
-
-
-.dropdown>ul>li {
- cursor: pointer;
-}
-.dropdown>ul>li:hover {
- background-color: var(--base-50);
-}
-/* Location search wrapper */
-.location-search-wrapper {
- position: relative;
- width: 100%;
-}
-
-/* Places Autocomplete wrapper */
-.places-autocomplete-wrapper {
- width: 100%;
- position: relative;
-}
-
-/* Google Places Autocomplete Element */
-gmp-place-autocomplete {
- font-family: var(--body);
- height: fit-content;
-
- /* Borders */
- border: 1px solid transparent !important;
- border-bottom: 2px solid var(--base-200, #ddd) !important;
- border-radius: var(--innerRadius, 4px) !important;
-
- /* Colors */
- background-color: var(--base, #fff) !important;
- color: var(--contrast, #333) !important;
-
- /* Interaction */
- outline: none !important;
- transition: border-color 0.2s ease !important;
-}
-
-/* Focus state */
-gmp-place-autocomplete:focus,
-gmp-place-autocomplete:focus-within {
- border-bottom-color: var(--action-0, #007cba) !important;
- outline: none !important;
-}
-
-/* Location preview container */
-.location-preview {
- margin-top: 1rem;
-}
-
-/* Location map */
-.location-map {
- width: 100%;
- height: 200px;
- border: 1px solid var(--base-200, #ddd);
- border-radius: var(--innerRadius, 4px);
- overflow: hidden;
- background-color: var(--base-100, #f5f5f5);
- position: relative;
-}
-
-/* Loading state for map */
-.location-map:empty::before {
- content: "Loading map...";
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: var(--base-400, #999);
- font-size: var(--small, 14px);
-}
-
-/* Location links */
-.location-links {
- margin-top: 1rem;
- display: flex;
- gap: 1rem;
- flex-wrap: wrap;
-}
-
-.location-links a {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.75rem 1.25rem;
- background-color: var(--base-100, #f5f5f5);
- border: 1px solid var(--base-200, #ddd);
- border-radius: var(--innerRadius, 4px);
- text-decoration: none;
- color: var(--contrast, #333);
- font-size: var(--small, 14px);
- transition: all 0.2s ease;
-}
-
-.location-links a:hover {
- background-color: var(--base-200, #e5e5e5);
- border-color: var(--base-300, #ccc);
- transform: translateY(-1px);
-}
-
-.location-links a svg {
- width: 16px;
- height: 16px;
-}
-
-/* Google Places dropdown customization */
-.pac-container {
- z-index: 9999 !important;
- border-radius: var(--innerRadius, 4px) !important;
- border: 1px solid var(--base-200, #ddd) !important;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
- margin-top: 4px !important;
- font-family: inherit !important;
-}
-
-.pac-item {
- padding: 0.75rem 1rem !important;
- border-bottom: 1px solid var(--base-100, #f5f5f5) !important;
- cursor: pointer !important;
- font-size: inherit !important;
-}
-
-.pac-item:last-child {
- border-bottom: none !important;
-}
-
-.pac-item:hover,
-.pac-item-selected {
- background-color: var(--base-100, #f5f5f5) !important;
-}
-
-/* Map info window */
-.map-info-window {
- padding: 0.5rem;
- font-size: var(--small, 14px);
- line-height: 1.4;
- max-width: 200px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
- .location-links {
- flex-direction: column;
- }
-
- .location-links a {
- width: 100%;
- justify-content: center;
- }
-
- .location-map {
- height: 150px;
- }
-}
-
-/* Admin-specific styles */
-.wp-admin .field.location {
- max-width: 600px;
-}
-
-.wp-admin .location-search-wrapper {
- background: #fff;
- padding: 1rem;
- border: 1px solid #ddd;
- border-radius: 4px;
-}
-
-/***
-HOURS SET
- */
-
-.group-fields.hours .group-fields,
-.group-fields.hours .group-fields .field {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-.group-fields.hours .group-fields {
- padding: 1rem .5rem;
- gap: 1rem;
-}
-.group-fields.hours .group-fields:nth-of-type(2n+1) {
- background-color: var(--base);
-}
-.group-fields.hours .group-fields .field {
- margin: 0;
-}
-
-.group-fields.hours .true-false {
- flex: 1;
-}
-.group-fields.hours .time {
- position: relative;
-}
-.group-fields.hours .time label {
- margin: 0;
- font-size: var(--small);
- position: absolute;
- top: -1rem;
- left: 0;
- color: var(--contrast-200);
-}
-
-dialog .post_thumbnail {
- margin: 0;
-}
-dialog .post_thumbnail .item-grid img {
- aspect-ratio: 20/9;
-}
-dialog .post_title {
- margin-top: 1rem;
-}
-dialog nav.tabs {
- top: 0;
-}
-
-dialog .tabs h2 {
- font-size: var(--small);
- font-weight: 300;
-}
-
-dialog .tabs button {
- padding: .25rem .75rem;
-}
-
-.field:has([name=status]) .field-group {
- align-items: center;
-}
-.field:has([name=status]) .field-group span {
- margin-right: auto;
-}
-
-
-[data-type=single] [for=select-item] {
- display: none;
-}
-form.table img {
- max-height: 8rem;
-}
-
-.multi-select {
- width: 100%;
-}
-details.multi-select summary {
- display: flex;
- justify-content: flex-start;
-}
-
-.grid-view .item {
- border-radius: var(--outerRadius);
-}
-.grid-view img {
- border-radius: var(--innerRadius);
-}
-
-.item-grid:has(.select-item:checked) .item {
- padding: 2rem;
-}
-.item-grid .item:has(.select-item:checked) {
- padding: .5rem;
- background-color: var(--action-0);
-}
-
-.grid-view .item > input[type=checkbox]:not(.label-button) + label {
- padding-left: 0;
- margin: 0;
-}
-.grid-view .item > input[type=checkbox] + label::before {
- transform: unset;
- top: .5rem;
- left: .5rem;
-}
-.grid-view .item > input[type=checkbox] + label::after {
- top: .5rem;
- left: .75rem;
- transform: translateY(20%) rotate(45deg);
-}
\ No newline at end of file
diff --git a/favourites-backup.css b/favourites-backup.css
deleted file mode 100644
index 6635831..0000000
--- a/favourites-backup.css
+++ /dev/null
@@ -1,967 +0,0 @@
-/* Controls Section */
-.controls {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 1.5rem;
- gap: 1rem;
- flex-wrap: wrap;
-}
-
-/* Type Filters */
-.type-filters {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
-}
-
-.type-filter {
- flex: 1;
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.5rem 1rem;
- border: 2px solid transparent;
- border-radius: 4px;
- background: none;
- cursor: pointer;
- width: fit-content;
- transition: all var(--timing) var(--function);
-}
-.type-filter.active {
- flex: 2;
-}
-.type-filter span:first-of-type {
- max-width: 0;
- transform: scaleX(0);
- transform-origin: right;
- transition: max-width var(--timing) var(--function);
- transition-property: max-width, transform;
-}
-.type-filter.active span:first-of-type {
- max-width: 100%;
- transform: scaleX(1);
- transform-origin: left;
- transition: max-width var(--timing) var(--function);
- transition-property: max-width, transform;
-}
-
-.type-filter:hover,
-.type-filter.active {
- border-color: #FF0080;
-}
-
-.type-filter .count {
- background: #EFEFEF;
- padding: 0.25rem 0.5rem;
- border-radius: 12px;
- font-size: 0.875rem;
-}
-
-/* View Controls */
-.view-toggle {
- padding: 0.5rem;
- border: none;
- background: none;
- cursor: pointer;
- opacity: 0.5;
- transition: opacity 0.3s ease;
-}
-
-.view-toggle[aria-pressed="true"] {
- opacity: 1;
-}
-
-/* Bulk Controls */
-.bulk-controls {
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 1rem;
- background: #EFEFEF;
- border-radius: 4px;
- margin-bottom: 1rem;
-}
-
-.bulk-select {
- display: flex;
- align-items: center;
- gap: 1rem;
-}
-
-.selected-count {
- color: #666;
- font-size: 0.875rem;
-}
-
-.bulk-actions {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-.bulk-actions button {
- padding: .5rem .75rem;
-}
-.bulk-actions button svg {
- width: var(--small);
- height: var(--small);
-}
-
-.bulk-action-select {
- padding: 0.5rem;
- border-radius: 4px;
- border: 1px solid #ddd;
-}
-
-/* Grid View */
-
-.favourite-item {
- position: relative;
- border-radius: 8px;
- overflow: hidden;
- aspect-ratio: 1;
- background: #EFEFEF;
- transition: transform 0.3s ease;
-}
-
-.favourite-item:hover {
- transform: translateY(-4px);
-}
-/*.favourite-item a:before,*/
-/*.favourite-item a:after {*/
-/* display: none;*/
-/*}*/
-
-.favourite-item img {
- width: 100%;
- height: 100%;
- aspect-ratio: 1;
- object-fit: cover;
-}
-
-/* List View */
-.favourites-grid.list-view {
- display: block;
-}
-
-.list-view .favourite-item {
- display: flex;
- margin-bottom: 1rem;
- transform: none;
-}
-
-.list-view .favourite-item img {
- width: 150px;
- height: 150px;
-}
-
-.list-view .item-info {
- flex: 1;
-}
-
-/* Item Info */
-.item-info {
- padding: 1rem;
- position: absolute;
- width: calc(100% - 2rem);
- bottom: 0;
- z-index: 5;
- text-align: center;
- background: rgba(250, 250, 250,.65);
- backdrop-filter: blur(5px);
-}
-
-.item-info h3 {
- margin: 0!important;
- font-size: 1.1rem;
-}
-
-.item-labels {
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
- margin-bottom: 0.5rem;
-}
-
-.label {
- display: flex;
- align-items: center;
- gap: 0.25rem;
- font-size: 0.875rem;
-}
-
-/* Lists Section */
-.lists-section {
- margin: 2rem 0;
-}
-
-.lists-section h2 {
- font-size: 1.5rem;
- margin-bottom: 1rem;
-}
-
-.lists-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: 1rem;
-}
-
-.list-card {
- padding: 1rem;
- background: #EFEFEF;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.3s ease;
-}
-
-.list-card:hover {
- transform: translateY(-2px);
- background: #e5e5e5;
-}
-
-.list-card h3 {
- margin: 0 0 0.5rem;
- font-size: 1.1rem;
-}
-
-.list-card p {
- margin: 0 0 1rem;
- font-size: 0.875rem;
- color: #666;
-}
-
-.list-meta {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 0.875rem;
-}
-
-.shared-status {
- display: flex;
- align-items: center;
- gap: 0.25rem;
- color: #FF0080;
-}
-
-/* Modals */
-dialog {
- border: none;
- border-radius: 8px;
- padding: 2rem;
- max-width: 500px;
- width: 90%;
- background: #EFEFEF;
-}
-
-dialog::backdrop {
- background: rgba(27, 27, 27, 0.5);
- backdrop-filter: blur(2px);
-}
-
-dialog h2 {
- margin: 0 0 1.5rem;
- font-size: 1.5rem;
-}
-
-.field {
- margin-bottom: 1.5rem;
-}
-
-.field label {
- display: block;
- margin-bottom: 0.5rem;
- font-weight: bold;
-}
-
-.field input[type="text"],
-.field textarea {
- width: 100%;
- padding: 0.75rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 1rem;
-}
-
-.field textarea {
- min-height: 100px;
- resize: vertical;
-}
-
-.lists-options {
- max-height: 300px;
- overflow-y: auto;
- margin-bottom: 1.5rem;
-}
-
-.list-option {
- display: flex;
- align-items: center;
- padding: 0.75rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- margin-bottom: 0.5rem;
- cursor: pointer;
- transition: background-color 0.3s ease;
-}
-
-.list-option:hover {
- background-color: #e5e5e5;
-}
-
-.list-option input[type="radio"] {
- margin-right: 1rem;
-}
-
-.list-name {
- flex: 1;
-}
-
-.item-count {
- color: #666;
- font-size: 0.875rem;
-}
-
-.actions {
- display: flex;
- justify-content: flex-end;
- gap: 1rem;
- margin-top: 2rem;
-}
-.actions button[type="submit"] {
- width: fit-content;
- height: fit-content;
-}
-
-.create-list-btn {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- background: #FF0080;
- color: white;
-}
-
-.create-list-btn:hover {
- background: #e60073;
-}
-
-.cancel {
- background: #EFEFEF;
- color: #666;
-}
-
-.cancel:hover {
- background: #e5e5e5;
-}
-
-.apply-bulk,
-.create,
-.add {
- background: #FF0080;
- color: white;
-}
-
-.apply-bulk:hover,
-.create:hover,
-.add:hover {
- background: #e60073;
-}
-
-/* Empty State */
-.no-favourites {
- text-align: center;
- padding: 3rem;
- background: #EFEFEF;
- border-radius: 8px;
-}
-
-.no-favourites h3 {
- font-size: 1.5rem;
- margin-bottom: 1rem;
-}
-
-.no-favourites p {
- color: #666;
- margin-bottom: 0.5rem;
-}
-
-/* Selection Styles */
-.favourite-select {
- position: absolute;
- top: 1rem;
- left: 1rem;
- z-index: 2;
-}
-
-button.favourite {
- position: absolute;
- top: 1rem;
- right: 1rem;
- z-index: 2;
- background: none;
- border: none;
- padding: 0.5rem;
- cursor: pointer;
- color: var(--light-0);
-}
-button.favourite:hover {
- color: var(--pink);
- background-color: rgba(250, 250, 250,65);
- backdrop-filter: blur(5px);
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
- .controls {
- flex-direction: column;
- align-items: stretch;
- }
-
- .bulk-controls {
- flex-direction: column;
- gap: 1rem;
- }
-
- .lists-grid {
- grid-template-columns: 1fr;
- }
-
- .list-view .favourite-item {
- flex-direction: column;
- }
-
- .list-view .favourite-item img {
- width: 100%;
- height: 200px;
- }
-}
-
-/* Animations */
-@keyframes fadeIn {
- from { opacity: 0; transform: translateY(10px); }
- to { opacity: 1; transform: translateY(0); }
-}
-
-.favourite-item {
- animation: fadeIn 0.3s ease;
-}
-
-/* List Management Styles */
-
-.my-lists .lists {
- margin-top: 1rem;
-}
-
-.my-lists .no-items {
- text-align: center;
- padding: 2rem;
- color: #666;
- background: #EFEFEF;
- border-radius: 8px;
-}
-
-/* List Card Styles */
-.list-card {
- background: #EFEFEF;
- border-radius: 8px;
- padding: 1rem;
- margin-bottom: 1rem;
- transition: all var(--timing) var(--function);
-}
-
-.list-card:hover {
- transform: translateY(-2px);
-}
-
-.list-card .list-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 0.5rem;
-}
-
-.list-card h3 {
- margin: 0;
- font-size: 1.1rem;
-}
-
-.list-card .list-actions {
- display: flex;
- gap: 0.5rem;
-}
-
-.list-card .list-actions button {
- background: none;
- border: none;
- padding: 0.5rem;
- cursor: pointer;
- display: flex;
- align-items: center;
- gap: 0.25rem;
- border-radius: 4px;
- transition: background-color var(--timing) var(--function);
-}
-
-.list-card .list-actions button:hover {
- background: rgba(0, 0, 0, 0.1);
-}
-
-.list-card .list-actions button span {
- font-size: 0.875rem;
-}
-
-.list-card .list-actions .delete-list {
- color: #dc2626;
-}
-
-.list-card p {
- margin: 0 0 1rem;
- font-size: 0.9rem;
- color: #666;
-}
-
-.list-meta {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 0.875rem;
- color: #666;
-}
-
-.list-meta .shared-status {
- display: flex;
- align-items: center;
- gap: 0.25rem;
- color: #FF0080;
-}
-
-/* Create List Modal Styles */
-.create-list-modal {
- border: none;
- border-radius: 8px;
- padding: 2rem;
- max-width: 500px;
- background: #EFEFEF;
-}
-
-.create-list-modal::backdrop {
- background: rgba(27, 27, 27, 0.5);
- backdrop-filter: blur(2px);
-}
-
-.create-list-modal h2 {
- margin: 0 0 1.5rem;
- font-size: 1.5rem;
-}
-
-.create-list-modal .field {
- margin-bottom: 1.5rem;
-}
-
-.create-list-modal .field label {
- display: block;
- margin-bottom: 0.5rem;
- font-weight: 500;
-}
-
-.create-list-modal .field input,
-.create-list-modal .field textarea {
- width: 100%;
- padding: 0.75rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 1rem;
-}
-
-.create-list-modal .field textarea {
- min-height: 100px;
- resize: vertical;
-}
-
-.create-list-modal .actions {
- display: flex;
- justify-content: flex-end;
- gap: 1rem;
- margin-top: 2rem;
-}
-
-.create-list-modal .actions button {
- padding: 0.75rem 1.5rem;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 0.875rem;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- transition: all var(--timing) var(--function);
-}
-
-.create-list-modal .actions .cancel {
- background: #e5e5e5;
- color: #666;
-}
-
-.create-list-modal .actions .create {
- background: #FF0080;
- color: white;
-}
-
-.create-list-modal .actions button:hover {
- transform: translateY(-1px);
-}
-
-/* Viewing List State */
-body.viewing-list .type-filters {
- opacity: 0.5;
- pointer-events: none;
-}
-
-body.viewing-list .my-lists {
- position: relative;
-}
-
-body.viewing-list .my-lists::after {
- content: 'Viewing List';
- position: absolute;
- top: 1rem;
- right: 1rem;
- background: #FF0080;
- color: white;
- padding: 0.25rem 0.75rem;
- border-radius: 4px;
- font-size: 0.875rem;
-}
-
-/* Viewing List State */
-body.viewing-list .my-lists {
- position: relative;
-}
-
-body.viewing-list .my-lists::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(183, 51, 46, 0.05);
- pointer-events: none;
- border-radius: 8px;
-}
-
-body.viewing-list .list-card[data-id="${currentListId}"] {
- background: #FF0080;
- color: white;
-}
-
-body.viewing-list .list-card[data-id="${currentListId}"] p {
- color: rgba(255, 255, 255, 0.8);
-}
-
-/* Clear List View Button */
-.clear-list-view {
- position: absolute;
- top: 1rem;
- right: 1rem;
- background: #FF0080;
- color: white;
- border: none;
- padding: 0.5rem 1rem;
- border-radius: 4px;
- cursor: pointer;
- display: flex;
- align-items: center;
- gap: 0.5rem;
- font-size: 0.875rem;
- transition: all var(--timing) var(--function);
-}
-
-.clear-list-view:hover {
- transform: translateY(-1px);
- background: #e60073;
-}
-
-/* Empty List State */
-.list-empty-state {
- background: #EFEFEF;
- padding: 2rem;
- border-radius: 8px;
- text-align: center;
- margin: 2rem 0;
- grid-column: span 3;
-}
-
-.list-empty-state h3 {
- margin: 0 0 1rem;
- font-size: 1.5rem;
- font-family: var(--heading);
-}
-
-.list-empty-state p {
- margin: 0 0 1rem;
-}
-
-.list-empty-state ol {
- text-align: left;
- max-width: 400px;
- margin: 1rem auto;
-}
-
-.list-empty-state ol li {
- margin-bottom: 0.5rem;
-}
-
-.list-empty-state .start-browsing {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- background: #FF0080;
- color: white;
- border: none;
- padding: 0.75rem 1.5rem;
- border-radius: 4px;
- font-size: 1rem;
- cursor: pointer;
- transition: all var(--timing) var(--function);
- margin-top: 1rem;
-}
-
-.list-empty-state .start-browsing:hover {
- background: #e60073;
- transform: translateY(-2px);
-}
-
-/* Also add a back button when viewing a list */
-body.viewing-list .my-lists::before {
- content: "← Back to All";
- position: absolute;
- top: 1rem;
- left: 1rem;
- padding: 0.25rem 0.75rem;
- border-radius: 4px;
- font-size: 0.875rem;
- cursor: pointer;
- transition: all var(--timing) var(--function);
- color: #FF0080;
-}
-
-body.viewing-list .my-lists::before:hover {
- background: rgba(183, 51, 46, 0.1);
-}
-
-/* Add to List Modal Styles */
-.lists-options {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- margin: 1rem 0;
-}
-
-.list-option {
- display: flex;
- align-items: center;
- padding: 0.75rem;
- border: 2px solid #EFEFEF;
- border-radius: 4px;
- cursor: pointer;
- transition: all var(--timing) var(--function);
-}
-
-.list-option:hover {
- border-color: #FF0080;
-}
-
-.list-option input[type="radio"] {
- margin-right: 1rem;
-}
-
-.list-details {
- display: flex;
- flex-direction: column;
- gap: 0.25rem;
-}
-
-.list-name {
- font-weight: 500;
-}
-
-.item-count {
- font-size: 0.875rem;
- color: #666;
-}
-
-.list-divider {
- position: relative;
- text-align: center;
- margin: 1rem 0;
-}
-
-.list-divider::before,
-.list-divider::after {
- content: '';
- position: absolute;
- top: 50%;
- width: calc(50% - 2rem);
- height: 1px;
- background: #ddd;
-}
-
-.list-divider::before {
- left: 0;
-}
-
-.list-divider::after {
- right: 0;
-}
-
-.list-divider span {
- background: #EFEFEF;
- padding: 0 1rem;
- color: #666;
- font-size: 0.875rem;
-}
-
-.create-new-list {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
- width: 100%;
- padding: 0.75rem;
- background: #FF0080;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: all var(--timing) var(--function);
-}
-
-.create-new-list:hover {
- background: #e60073;
- transform: translateY(-1px);
-}
-
-.no-lists {
- text-align: center;
- padding: 1rem;
- color: #666;
- margin-bottom: 1rem;
-}
-
-.share-list-modal {
- max-width: 500px;
- width: 90%;
-}
-
-.share-input-group {
- margin-bottom: 1.5rem;
-}
-
-.input-with-button {
- display: flex;
- gap: 0.5rem;
-}
-
-.input-with-button input {
- flex: 1;
-}
-
-.shared-with {
- margin-top: 2rem;
-}
-
-.shared-users {
- margin-top: 1rem;
-}
-
-.shared-user {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0.5rem;
- border-radius: 4px;
- background: #EFEFEF;
- margin-bottom: 0.5rem;
-}
-
-.shared-user button {
- color: #FF0080;
- padding: 0.25rem;
-}
-
-.shared-user button:hover {
- background: rgba(183, 51, 46, 0.1);
- border-radius: 4px;
-}
-
-.shared-user.pending {
- background: rgba(183, 51, 46, 0.05);
- border: 1px dashed #FF0080;
-}
-
-.pending-badge {
- background: #FF0080;
- color: white;
- padding: 0.25rem 0.5rem;
- border-radius: 12px;
- font-size: 0.75rem;
-}
-
-.shared-user.pending .delete-button {
- opacity: 0.5;
- cursor: not-allowed;
-}
-.list-meta .meta-stats {
- display: flex;
- justify-content: space-between;
- width:100%;
- gap: 0.25rem;
-}
-
-.list-meta .share-count {
- font-size: 0.9em;
- color: #666;
-}
-
-.notes-section {
- margin-top: 1rem;
- border-top: 1px solid rgba(0,0,0,0.1);
- padding-top: 0.5rem;
-}
-
-.toggle-notes {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- background: none;
- border: none;
- padding: 0.25rem 0;
- color: #666;
- cursor: pointer;
-}
-
-.toggle-notes:hover {
- color: #FF0080;
-}
-
-.notes-content {
- margin-top: 0.5rem;
-}
-
-.notes-input {
- width: 100%;
- min-height: 80px;
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- resize: vertical;
- font-family: inherit;
-}
-
-.notes-input:focus {
- outline: none;
- border-color: #FF0080;
-}
-
-
diff --git a/feed-backup.css b/feed-backup.css
deleted file mode 100644
index 73304e2..0000000
--- a/feed-backup.css
+++ /dev/null
@@ -1,1690 +0,0 @@
-.feed-block {
- max-width: var(--full);
- margin: 0 auto;
-}
-
- .feed-block > *:not(.feed-grid){
- max-width: var(--alignWide);
- margin: 1rem var(--mr) 1rem var(--ml)!important;
- }
- .feed-block > h1:first-of-type {
- margin-top: 6rem!important;
- }
-.feed-block[data-loading="true"] {
- opacity: 0.7;
-}
-
-.feed-block:empty::before {
- content: "Looks like there's nothing here yet.";
- display: block;
- text-align: center;
- padding: 2rem;
-}
-
-.feed-filters {
- margin: 2rem auto;
-}
-
-.filter-group {
- display: flex;
- gap: .5rem;
- flex-wrap: wrap;
- margin-bottom: .25rem;
- position: relative;
- padding-top: 1.5rem;
-}
-
-
-.filter-button {
- padding: 0.5rem 1rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- background: none;
- cursor: pointer;
-}
-
-.filter-button.active {
- background: #000;
- color: #fff;
-}
-
-.advanced-filters {
- display: flex;
- gap: 1rem;
- flex-wrap: wrap;
-}
-
-.feed-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: .5rem;
- margin-bottom: 2rem;
-}
-@media (min-width: 768px){
- .feed-grid {
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: 1rem;
- }
-}
-
-.feed-item {
- position: relative;
- border-radius: 8px;
- overflow: hidden;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
- height: fit-content;
-}
- .feed-item.artist {
- grid-column: span 2;
- }
-.feed-item summary {
- border: none;
- position: relative;
- padding: .25rem;
-}
- .feed-item summary a,
- .feed-item summary img {
- width: 100%;
- height: 100%;
- aspect-ratio: 1;
- }
-.feed-item summary:after {
- z-index: 11;
- position: absolute;
- bottom: .35rem;
- right: .7rem;
- width: 1.5rem;
- height: 1.5rem;
- cursor: pointer;
-}
-
-.feed-item:hover summary,
-.feed-item[open] summary {
- background-color: transparent;
-}
- .feed-item summary:hover:after,
- .feed-item[open] > summary:after {
- background-color: var(--light-0);
- transform: rotate(0);
- }
-
-.feed-item-image img {
- width: 100%;
- height: 250px;
- object-fit: cover;
-}
-
-.feed-item-info {
- padding: 1rem;
- background: #fff;
-}
-
-.order-filter {
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- background: white;
-}
-
-.order-filter:focus {
- border-color: #000;
- outline: none;
-}
-
-.scroll-sentinel {
- height: 10px;
- margin: 2rem 0;
-}
-
-.loading-spinner {
- display: flex;
- justify-content: center;
- padding: 2rem;
-}
-
-.loading-spinner::after {
- content: '';
- width: 40px;
- height: 40px;
- border: 4px solid #ddd;
- border-top-color: #000;
- border-radius: 50%;
- animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
- to { transform: rotate(360deg); }
-}
-
-
-.feed-item {
- --increase: 300ms;
- --delay: var(--increase);
- opacity: 0;
- transition: opacity var(--timing) var(--function) var(--delay);
-}
-/* Progressive loading animation */
-.feed-item[data-loaded] {
- opacity: 1;
-}
-.feed-item[data-loaded] + .feed-item[data-loaded]{
- --delay: var(--delay) + var(--increase);
- transition: opacity var(--timing) var(--function) var(--delay);
-}
-
-
-
-@keyframes fadeIn {
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.feed-loader {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: 2rem;
- gap: 1rem;
-}
-
-.load-more {
- opacity: 1;
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.75rem 1.5rem;
- background: #1b1b1b;
- color: #f9f9f9;
- border: none;
- border-radius: 4px;
- font-family: var(--heading);
- font-size: 1.2rem;
- cursor: pointer;
- transition: all var(--timing) var(--timing);
-}
-.load-more[hidden]{
- opacity: 0;
- transition: all var(--timing) var(--function);
-}
-
-.load-more:hover {
- background: #FF0080;
- transform: translateY(-2px);
-}
-
-.load-more:focus-visible {
- outline: 2px solid #FF0080;
- outline-offset: 2px;
-}
-
-.loading-spinner {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- color: #666;
-}
-
-.loading-spinner svg {
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
-}
-
-/* Hide load more when no more content */
-.feed-loader[data-empty] {
- display: none;
-}
-
-.feed-loader {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: 2rem;
- gap: 1rem;
-}
-
-.load-more {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.75rem 1.5rem;
- background: #1b1b1b;
- color: #f9f9f9;
- border: none;
- border-radius: 4px;
- font-family: var(--heading);
- font-size: 1.2rem;
- cursor: pointer;
- transition: all var(--timing) var(--timing);
-}
-
-.load-more:hover {
- background: #FF0080;
- transform: translateY(-2px);
-}
-
-.load-more:focus-visible {
- outline: 2px solid #FF0080;
- outline-offset: 2px;
-}
-
-.loading-spinner {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- color: #666;
-}
-.loading-spinner[hidden] {
- display: none;
-}
-
-.loading-spinner svg {
- animation: spin 1s linear infinite;
-}
-.loading-spinner[hidden] svg {
- animation: none;
-}
-
-@keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
-}
-
-/* Hide load more when no more content */
-.feed-loader[data-empty] {
- display: none;
-}
-.type-filter[hidden]{
- display: none;
-}
-
-.type-filter input[type=checkbox] {
- position: absolute;
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-
-.feed-filters .filter-toggle,
-.feed-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 #ddd;
- border-radius: 4px;
- font-size: .875rem;
- transition: border-color var(--timing) var(--function);
- margin-bottom: .5rem;
-}
-.feed-filters .type-filter label {
- flex-direction: column;
-}
- .feed-filters svg {
- width: 25px;
- height: 25px;
- }
- .feed-filters .order-options label svg {
- width: 20px;
- height: 20px;
- }
- .feed-filters label:hover,
- .feed-filters input:checked + label {
- background-color: var(--light-0);
- border-color: var(--pink);
- color: var(--pink);
- }
-
-.feed-filters label .label {
- position: absolute;
- visibility: hidden;
- top: 0;
- right: 4rem;
- opacity: 0;
- transition: transform var(--timing) var(--function);
- transition-property: max-width, transform;
-}
-
-.feed-filters input:checked + label .label {
- visibility: visible;
- opacity: 1;
-}
-.feed-block > details.more-info[open] {
- margin-bottom: 3rem!important;
- position: relative;
- background-color: var(--light-0);
- padding-bottom: 1rem!important;
-}
-details.more-info[open]:after {
- content: '';
- display: block;
- margin: -25px auto 0;
- width: 80%;
- height: 25px;
- border-radius: 125px / 12px;
- box-shadow: 0 0 8px #000;
- z-index: -1;
- position: absolute;
- bottom: 0;
- left: 10%;
-}
-.feed-filters details summary {
- display: flex;
- border: 0;
- flex-wrap: nowrap;
- padding: 2rem 0 0;
- gap: .125rem;
-}
- .feed-filters details summary:after {
- position: absolute;
- top: 0;
- right: -1rem;
- width: 4rem;
- mask-position: right;
- height: 1.5rem;
- }
- .feed-filters details summary:hover:after {
- background-color: var(--pink);
- }
-
- .feed-filters details[open] > summary:after {
- mask-image: var(--minus);
- background-color: var(--pink);
- transform: none;
- transition: none;
- }
- .type-filter.favourites-toggle {
- margin-left: .35rem;
- }
- .type-filter.favourites-toggle label {
- position: relative;
- }
- .type-filter.favourites-toggle label .label {
- top: 100%;
- right: 0;
- }
-
- .feed-filters details summary:hover,
- .feed-filters details[open] summary {
- background-color: transparent;
- color: var(--black);
- transition: none;
- }
-
-.feed-filters .order-options label .label {
- transform: scaleX(0);
- max-width: 0;
- transform-origin: right;
-}
-.feed-filters .content-types label .label {
- max-height: 0;
- transform: scaleY(0);
- transform-origin: top;
-}
-.feed-filters input:checked + label .label {
- opacity: 1;
- transition: transform var(--timing) var(--function);
- transition-property: max-width, transform;
-}
-.feed-filters .order-options input:checked + label .label {
- max-width: 200px;
- margin-left: .5rem;
- transform: scaleX(1);
-}
-.feed-filters .content-types input:checked + label .label {
- margin-top: .5rem;
- transform: scaleY(1);
- max-height: 40px;
-}
-
-
-
-
-/* Visual feedback for checked state */
-.type-filter input[type=checkbox]:checked + label {
- background: rgba(0, 0, 0, 0.1);
- border-radius: 4px;
-}
-
-/* Focus state for accessibility */
-.type-filter input[type=checkbox]:focus-visible + label {
- outline: 2px solid #FF0080;
- outline-offset: 2px;
- border-radius: 4px;
-}
-
-/* Filter buttons */
-.filter-button {
- position: relative;
- padding: 0.5rem;
- border: none;
- background: none;
- cursor: pointer;
- transition: all var(--timing) var(--function);
-}
-
-.filter-button .label {
- position: absolute;
- top: 100%;
- left: 50%;
- transform: translateX(-50%);
- font-size: 0.8rem;
- white-space: nowrap;
- opacity: 0;
- transition: opacity var(--timing) var(--function);
-}
-
-.filter-button.active .label {
- opacity: 1;
-}
-
-/* Taxonomy filters */
-
-.filter-toggle {
- position: relative;
- padding: 0.5rem;
- border: none;
- background: none;
- cursor: pointer;
-}
-
-.filter-toggle .label {
- position: absolute;
- top: 100%;
- left: 50%;
- transform: translateX(-50%);
- font-size: 0.8rem;
- white-space: nowrap;
- opacity: 0;
- transition: opacity var(--timing) var(--function);
-}
-
-.filter-toggle[aria-expanded="true"] .label {
- opacity: 1;
-}
-
-/*.filter-dropdown {*/
-/* position: absolute;*/
-/* top: 100%;*/
-/* left: 0;*/
-/* min-width: 200px;*/
-/* background: #fff;*/
-/* border-radius: 4px;*/
-/* box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
-/* z-index: 100;*/
-/* padding: 0.5rem;*/
-/*}*/
-
-.selected-filters {
- display: flex;
- flex-wrap: wrap;
- gap: 0.25rem;
- margin-top: 0.25rem;
-}
-
-.selected-filter {
- display: flex;
- align-items: center;
- gap: 0.25rem;
- padding: 0.25rem 0.5rem;
- background: #f0f0f0;
- border-radius: 4px;
- font-size: 0.8rem;
-}
-
-.selected-filter button {
- border: none;
- background: none;
- padding: 0;
- cursor: pointer;
- color: #666;
-}
-
-
-.feed-item {
- position: relative;
- border-radius: 0.5rem;
- overflow: hidden;
- background: #fff;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-button.favourite {
- position: absolute;
- top: 0.5rem;
- right: 0.5rem;
- z-index: 2;
- background: rgba(255,255,255,0.9);
- border: none;
- border-radius: 50%;
- padding: 0.5rem;
- cursor: pointer;
- transition: transform var(--timing) var(--function);
-}
-
-button.favourite:hover {
- transform: scale(1.1);
-}
-
-button.favourite.favourited svg {
- fill: #FF0080;
- stroke: #FF0080;
-}
-
-.feed-image {
- display: block;
- aspect-ratio: 1;
- overflow: hidden;
-}
-
-.feed-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform var(--timing) var(--function);
-}
-
-.feed-image:hover img {
- transform: scale(1.05);
-}
-
-.item-info {
- padding: .25rem 1rem;
-}
-
-.item-info h3 {
- margin: 0!important;
- font-size: 1.1rem;
- text-align: center;
-}
-
-.taxonomy-lists {
- margin: 0.5rem 0;
-}
-
-.taxonomy-group {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: 0.5rem;
- margin-bottom: 0.25rem;
-}
-
-.taxonomy-group ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.taxonomy-group a {
- color: inherit;
- text-decoration: none;
- font-size: 0.9rem;
-}
-
-.taxonomy-group a:hover {
- color: #FF0080;
-}
-
-.item-labels {
- margin-top: 0.5rem;
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
-}
-
-.label {
- display: flex;
- align-items: center;
- gap: 0.25rem;
- font-size: 0.9rem;
-}
-
-.label a {
- color: inherit;
- text-decoration: none;
-}
-
-.label a:hover {
- color: #FF0080;
-}
-
-button.favourite {
- position: absolute;
- top: .5rem;
- right: .5rem;
- z-index: 10;
- background: rgba(255,255,255,0.75);
- border-radius: 50%;
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
- border: none;
- cursor: pointer;
- width: 2rem;
- height: 2rem;
- display: flex;
- justify-content: center;
- align-items: center;
- backdrop-filter: blur(5px);
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-button.favourite:hover {
- transform: scale(1.1);
- color: var(--pink);
- background: white;
- box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-}
-
-button.favourite.favourited {
- color: #ff4b6c;
- animation: favourite-pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-@keyframes favourite-pop {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.3); }
- 75% { transform: scale(0.9); }
- 100% { transform: scale(1); }
-}
-
-.artist-tattoos {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
-}
- .artist-tattoos a {
- overflow: hidden;
- }
-.artist-tattoos .feed-image {
- grid-row: span 2;
- grid-column: span 2;
-}
-
-.tattoo-preview {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: hidden;
- border-radius: 4px;
-}
-
-.tattoo-preview img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: transform var(--timing) var(--function);
-}
-
-.tattoo-preview:hover img {
- transform: scale(1.1);
-}
-
-.notification-popup-container {
- position: fixed;
- display: flex;
- flex-direction: column-reverse;
- gap: 0.5rem;
- z-index: 1000;
- pointer-events: none;
- padding: 1rem;
-}
-
-.notification-popup-container.bottom-right {
- right: 0;
- bottom: 5rem;
-}
-
-.notification-popup-container.top-right {
- right: 0;
- top: 1rem;
-}
-
-.notification-popup {
- background: #f9f9f9;
- border-radius: 8px;
- padding: 1rem;
- display: flex;
- align-items: flex-start;
- gap: 1rem;
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
- transform: translateX(100%);
- opacity: 0;
- transition: all var(--timing) var(--function);
- pointer-events: all;
- max-width: 400px;
- width: 100%;
- border-left: 4px solid;
-}
-
-.notification-popup.show {
- transform: translateX(0);
- opacity: 1;
-}
-
-/* Priority styles */
-.notification-popup.priority-high {
- border-color: #dc3545;
-}
-
-.notification-popup.priority-medium {
- border-color: #FF0080;
-}
-
-.notification-popup.priority-low {
- border-color: #28a745;
-}
-
-.notification-icon {
- flex-shrink: 0;
- width: 24px;
- height: 24px;
- color: #1b1b1b;
-}
-
-.notification-content {
- flex-grow: 1;
-}
-
-.notification-message {
- margin: 0 0 0.5rem;
- font-size: 0.875rem;
- line-height: 1.4;
-}
-
-.notification-actions {
- display: flex;
- gap: 0.5rem;
- margin-top: 0.5rem;
-}
-
-.notification-action {
- padding: 0.25rem 0.5rem;
- border-radius: 4px;
- border: none;
- background: #1b1b1b;
- color: white;
- font-size: 0.75rem;
- display: flex;
- align-items: center;
- gap: 0.25rem;
- cursor: pointer;
- transition: all var(--timing) var(--function);
-}
-
-.notification-action:hover {
- opacity: 0.9;
-}
-
-.notification-action.accept {
- background: #28a745;
-}
-
-.notification-action.decline {
- background: #dc3545;
-}
-
-.close-notification {
- background: none;
- border: none;
- padding: 0.25rem;
- color: #666;
- cursor: pointer;
- flex-shrink: 0;
-}
-
-.floating-notification-button {
- position: fixed;
- right: 2rem;
- bottom: 2rem;
- width: 3rem;
- height: 3rem;
- border-radius: 50%;
- background: #1b1b1b;
- border: none;
- color: white;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 2px 8px rgba(0,0,0,0.2);
- transition: all var(--timing) var(--function);
- z-index: 1000;
-}
-
-.floating-notification-button:hover {
- transform: scale(1.1);
-}
-
-.floating-notification-button.has-notifications {
- background: #FF0080;
-}
-
-.notification-count {
- position: absolute;
- top: -8px;
- right: -8px;
- background: #1b1b1b;
- color: white;
- border-radius: 50%;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- font-weight: bold;
- opacity: 0;
- transform: scale(0);
- transition: all var(--timing) var(--function);
-}
-
-.notification-count.show {
- opacity: 1;
- transform: scale(1);
-}
-@media (min-width: 768px){
- .feed-filters details summary {
- gap: .5rem;
- justify-content: flex-start;
- }
- .type-filter.favourites-toggle {
- margin-left: auto;
- }
-}
-@media (max-width: 768px) {
- .notification-popup-container {
- padding: 0.5rem;
- }
-
- .notification-popup {
- max-width: calc(100vw - 1rem);
- }
-
- .floating-notification-button {
- right: 1rem;
- bottom: 1rem;
- }
-}
-
-.feed-item.highlighted {
- position: relative;
- animation: highlight 2s ease-out;
-}
-
-@keyframes highlight {
- 0%, 100% {
- box-shadow: none;
- }
- 50% {
- box-shadow: 0 0 0 4px #FF0080;
- }
-}
-
-.feed-filters {
- margin-bottom: 2rem;
-}
-
-
-.type-filter.label {
- font-weight: bold;
- color: #666;
- padding-right:.25rem;
- position: absolute;
- top: 0;
-}
-
-
-.filter-toggle:hover,
-.filter-toggle[aria-expanded="true"] {
- border-color: #FF0080;
- color: #FF0080;
-}
-
-.selected-filters-section {
- display: flex;
- align-items: flex-start;
- gap: 1rem;
- width: 100%;
-}
-
-.selected-filters {
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
- flex: 1;
-}
-
-.clear-filters {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.25rem 0.75rem;
- border: none;
- background: none;
- color: #666;
- cursor: pointer;
- font-size: 0.875rem;
- border-radius: 2rem;
-}
-
-.clear-filters:hover {
- color: #FF0080;
- background: #f5f5f5;
-}
-
-.clear-filters[hidden] {
- display: none;
-}
-
-.selected-filter {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.25rem 0.75rem;
- background: #f5f5f5;
- border-radius: 2rem;
- font-size: 0.875rem;
-}
-
-.selected-filter svg {
- width: 20px;
- height: 20px;
- color: #666;
-}
-
-.selected-filter .filter-name {
- margin-right: 0.25rem;
-}
-
-.selected-filter .remove-filter {
- padding: 0;
- border: none;
- background: none;
- color: #666;
- cursor: pointer;
- display: flex;
- align-items: center;
-}
-
-.selected-filter .remove-filter:hover {
- color: #FF0080;
-}
-
-.filter-dropdowns {
- position: relative;
-}
-
-.filter-dropdown::backdrop {
- backdrop-filter: blur(5px);
- background-color: rgba(19, 20, 22,.4);
-}
-.filter-dropdown[open] {
- width: min(500px, 90vw);
- border-radius: 1rem;
- height: 90vh;
- overflow: hidden;
- padding: 1.5rem;
- display: flex;
- flex-direction: column;
-}
-input[type=search]{
- font-family: var(--body);
- font-size: var(--medium);
- padding: 1rem 1.5rem;
- border-radius: var(--radius);
- background-color: var(--light-0);
- outline: none;
- border: 1px solid transparent;
- border-bottom: 2px solid var(--offwhite);
- width: calc(100% - 3.25rem);
- transition: background-color var(--timing) var(--function);
- transition-property: background-color, border;
-}
-
-.filter-dropdown .options-container {
- overflow: hidden;
- overflow-y: auto;
- max-height: 100%;
-}
- .filter-dropdown .options-container::-webkit-scrollbar {
- width: 12px;
- }
-
- .filter-dropdown .options-container::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- border-radius: 10px;
- }
-
- .filter-dropdown .options-container::-webkit-scrollbar-thumb {
- border-radius: 10px;
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
- }
-.filter-dropdown #close {
- position: fixed;
- bottom: 1rem;
- right: 1rem;
- width: 4rem;
- height: 4rem;
- border-radius: 4px;
- background-color: var(--light-0);
-}
-
-/*.filter-dropdown {*/
-/* position: absolute;*/
-/* top: 100%;*/
-/* left: 0;*/
-/* right: 0;*/
-/* background: white;*/
-/* border: 1px solid #ddd;*/
-/* border-radius: 4px;*/
-/* box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
-/* padding: 1rem;*/
-/* z-index: 100;*/
-/* max-height: 400px;*/
-/* overflow-y: auto;*/
-/*}*/
-
-.search-container {
- display: flex;
- margin-bottom: 2rem;
-}
- .search-container .icon {
- width: 5rem;
- height: 5rem;
- }
-
-
-
-.options-container {
- display: flex;
- flex-wrap: wrap;
- gap: 0.75rem;
- justify-content: space-evenly;
- padding: 1rem;
- align-items: flex-start;
-}
- #filter-dropdown-e_theme .options-container,
- #filter-dropdown-e_arttheme .options-container {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- gap: 4px;
- position: relative;
- }
-nav .options-container li {
- display: block;
- min-height: 0;
-}
-.term-content {
- display: flex;
- justify-content: space-between;
-}
-.options-container ul {
- display: block;
- padding: 0;
- margin: 0;
- list-style: none;
-}
-.options-container li > .children ul {
- max-height: 0;
- border-left: 1px solid var(--blackish);
- border-radius: 1rem;
- transform: scaleY(0);
- overflow: hidden;
- transition: transform var(--timing) var(--function);
- transition-property: transform, max-height;
- transform-origin: top;
-}
-.options-container li.open > .children > ul {
- max-height: 100%;
- padding: .5rem 0 .5rem 1rem;
- transform: scaleY(1);
- transition: transform var(--timing) var(--function);
- transition-property: transform, max-height;
-}
-
-.filter-option {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.5rem;
- cursor: pointer;
- position: relative;
- z-index: 1;
- width: 100%;
-}
-
-.filter-option:hover {
- background: #f5f5f5;
-}
-
-.feed-filters {
- position: relative;
-}
-
-
-.feed-filters .feed-controls {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 2rem;
- width: 100%;
-}
-.feed-filters .order-options {
- padding-top: 1.5rem;
- position: relative;
-}
-.feed-filters .order-options,
-.feed-filters .order-by {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- justify-content: space-between;
-}
-
-.feed-filters .radio-group-label {
- display: flex;
- gap: 0.5rem;
-}
-
-.feed-filters .radio-group-label input[type=radio],
-.feed-filters .order-direction input[type=radio] {
- position: absolute;
- opacity: 0;
- width: 0;
- height: 0;
-}
-.feed-filters *[hidden],
-.feed-filters input[type=radio][hidden] + label {
- display: none!important;
-}
-
-
-
-.feed-filters .order-direction {
- display: flex;
- gap: 0.25rem;
-}
-
-
-@media (max-width: 768px) {
- .feed-filters .feed-controls {
- flex-direction: column;
- gap: 1rem;
- }
-
- .feed-filters .order-options {
- width: 100%;
- }
-
- .feed-filters .order-by {
- flex: 1;
- }
-
- .feed-filters .radio-group-label {
- flex: 1;
- justify-content: flex-start;
- }
-
- .feed-filters .radio-group-label .label {
- display: none;
- }
-
- .feed-filters .radio-group-label label {
- padding: 0.35rem;
- }
-}
-
-.filter-controls {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
-}
-
-
-.filter-option .shop-name {
- color: #666;
- font-size: 0.875rem;
- margin-left: 0.5rem;
- opacity: 0.8;
-}
-
-.filter-option .shop-name::before {
- content: "at";
- margin-right: 0.25rem;
- opacity: 0.6;
-}
-
-/* Improve filter option layout */
-.filter-option {
- display: flex;
- align-items: center;
- padding: 0.5rem;
- transition: background-color 0.2s;
-}
-
-.filter-option:hover {
- background-color: rgba(0, 0, 0, 0.05);
-}
-
-.filter-option input[type=checkbox] {
- margin-right: 0.5rem;
-}
-
-.filter-option label {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- cursor: pointer;
- flex: 1;
-}
-
-/* Search results highlighting */
-.filter-option.highlight {
- background-color: rgba(183, 51, 46, 0.1);
-}
-
-/* Empty state */
-.options-container:empty::after {
- content: "No results found";
- display: block;
- padding: 1rem;
- text-align: center;
- color: #666;
- font-style: italic;
-}
-
-/** Loading **/
-.feed-overlay {
- display: none;
- opacity: 0;
- visibility: hidden;
-}
-.loading .feed-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: 0!important;
- max-width: none!important;
- width: 100%;
- height: 100%;
- background: rgba(19, 20, 22, 0.75);
- backdrop-filter: blur(8px);
- -webkit-backdrop-filter: blur(8px);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1000;
- opacity: 1;
- visibility: visible;
- transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-
-.feed-overlay-content {
- background: white;
- padding: 2rem;
- border-radius: 1rem;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
- text-align: center;
- width: min(400px, 60vw);
-}
-/* Loader Container */
-.loading .loader-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- min-height: 200px;
- padding: 2rem;
- background: rgba(255, 255, 255, 0.9);
- backdrop-filter: blur(5px);
- border-radius: 1rem;
- margin: 2rem 0;
-}
-
-/* Icon Container */
-.loading .loading-icon-container {
- position: relative;
- margin-bottom: 1.5rem;
- animation: dance 1s ease-in-out infinite;
- transition: opacity 0.2s ease;
- will-change: transform, opacity;
-}
-
-.loading .loading-message .icon svg {
- width: 24px;
- height: 24px;
- margin-right: 1rem;
- animation: spin 2s ease-in-out infinite;
- transition: color 0.3s ease;
-}
-
-/* Message Styling */
-.loading .loading-message {
- will-change: opacity;
-
- font-size: 1rem;
- color: #666;
- text-align: center;
- min-height: 24px;
- transition: opacity 0.2s ease;
- margin-bottom: 1rem;
-}
-
-/* Dancing Animation */
-@keyframes dance {
- 0%, 100% {
- transform: rotate(-5deg) scale(1);
- }
- 50% {
- transform: rotate(5deg) scale(1.1);
- }
-}
-
-/* Spin Animation */
-@keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 25% {
- transform: rotate(-15deg);
- }
- 75% {
- transform: rotate(15deg);
- }
- 100% {
- transform: rotate(0deg);
- }
-}
-
-/* Fade Animations */
-.loading .fade-out {
- animation: fadeOut 0.3s ease-in-out forwards;
-}
-
-@keyframes fadeOut {
- from {
- opacity: 1;
- transform: translateY(0);
- }
- to {
- opacity: 0;
- transform: translateY(10px);
- }
-}
-
-/* Entry Animation */
-.loading .loader-container {
- animation: fadeIn 0.3s ease-in-out;
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(-10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-/* Shimmer effect on message */
-.loading .feed-overlay::after {
- content: '';
- position: absolute;
- z-index: -1;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: linear-gradient(
- 90deg,
- rgba(255,255,255,0) 0%,
- rgba(255,255,255,0.05) 50%,
- rgba(255,255,255,0) 100%
- );
- animation: shimmer 3s ease-in-out infinite;
-}
-
-@keyframes shimmer {
- 0% {
- transform: translateX(-100%);
- }
- 50%, 100% {
- transform: translateX(100%);
- }
-}
-
-.loading .loading-message {
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
-}
-.loading .loading-message p {
- opacity: 1;
- transform: scaleY(1);
- transform-origin: bottom;
- transition:opacity var(--timing) var(--function);
- transition-property: transform, opacity;
-}
-.loading .changing .loading-message p {
- opacity: 0;
- transform: scaleY(0);
- transform-origin: top;
- transition:opacity var(--timing) var(--function);
- transition-property: transform, opacity;
-}
-
-.loading .dots-wrapper {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-/*.loading .loading-dots,*/
-/*.loading .loading-dots:before,*/
-/*.loading .loading-dots:after {*/
-/* position: relative;*/
-/* width: 8px;*/
-/* height: 8px;*/
-/* border-radius: 4px;*/
-/* background-color: var(--pink);*/
-/* color: var(--pink);*/
-/* animation: bounce .666s infinite;*/
-/* margin: 0 4px;*/
-/*}*/
-/*.loading .loading-dots:before {*/
-/* animation-delay: -.3s;*/
-/* left: -16px;*/
-/*}*/
-/*.loading .loading-dots:after {*/
-/* right: -8px;*/
-/* animation-delay: 0s;*/
-/*}*/
-/*.loading .loading-dots {*/
-/* animation-delay: -.15s;*/
-/*}*/
-/*.loading .loading-dots::before, .loading-dots::after {*/
-/* content: "";*/
-/* display: block;*/
-/* position: absolute;*/
-/* top: 0;*/
-/*}*/
-
-
-/*@keyframes bounce {*/
-/* 0%, 100% {*/
-/* transform: translateY(-25%);*/
-/* animation-timing-function: cubic-bezier(0.8,0,1,1);*/
-/* }*/
-/* 50% {*/
-/* transform: none;*/
-/* animation-timing-function: cubic-bezier(0,0,0.2,1);*/
-/* }*/
-/*}*/
-
-/*.loading .loading-dots {*/
-/* width: 15px;*/
-/* aspect-ratio: 1;*/
-/* border-radius: 50%;*/
-/* clip-path: inset(-45px);*/
-/* box-shadow: -60px 15px,-60px 15px,-60px 15px;*/
-/* transform: translateY(-15px);*/
-/* animation: l19 1s infinite linear;*/
-/*}*/
-/*@keyframes l19{*/
-/* 16.67% {box-shadow:-60px 15px,-60px 15px,19px 15px}*/
-/* 33.33% {box-shadow:-60px 15px, 0px 15px,19px 15px}*/
-/* 40%,60%{box-shadow:-19px 15px, 0px 15px,19px 15px}*/
-/* 66.67% {box-shadow:-19px 15px, 0px 15px,60px 15px}*/
-/* 83.33% {box-shadow:-19px 15px, 60px 15px,60px 15px}*/
-/* 100% {box-shadow: 60px 15px, 60px 15px,60px 15px}*/
-/*}*/
-
-
-.loading .loading-dots {
- color: var(--pink);
- width: 4px;
- aspect-ratio: 1;
- border-radius: 50%;
- box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
- transform: translateX(-38px) scale(.666);
- animation: bubble .5s infinite alternate linear;
-}
-
-@keyframes bubble {
- 50% {box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px}
- 100% {box-shadow: 19px 0 0 0 , 38px 0 0 3px, 57px 0 0 7px}
-}
-
-.loading .feed-overlay h2 {
- width: fit-content;
- margin: 1rem auto !important;
- color: #0000;
- -webkit-text-stroke: 1px #000;
- --g:conic-gradient(var(--pink) 0 0) no-repeat text;
- background:var(--g) 0,var(--g) 1ch,var(--g) 2ch,var(--g) 3ch,var(--g) 4ch,var(--g) 5ch,var(--g) 6ch;
- animation:
- l17-0 1s linear infinite alternate,
- l17-1 2s linear infinite;
-}
-
-@keyframes l17-0 {
- 0% {background-size: 1ch 0 }
- 100% {background-size: 1ch 100%}
-}
-@keyframes l17-1 {
- 0%,50% {background-position-y: 100%, 0}
- 50.01%,to {background-position-y: 0, 100%}
-}
-
-.feed-grid details summary .handle {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: rgba(250, 250, 250,.3);
- backdrop-filter: blur(5px);
- border-radius: var(--radius);
- z-index: 1;
- padding: .25rem .25rem .25rem 1.1rem;
-}
-
-.feed-grid details summary .handle {
- background-color: rgba(250, 250, 250,.2);
- backdrop-filter: blur(5px);
- border: none;
-}
-.feed-grid details:hover summary .handle,
-.feed-grid details[open] summary .handle {
- background-color: rgba(183, 51, 46,.4);
- backdrop-filter: blur(5px);
-}
-
-.feed-grid .empty-state {
- width: 100%;
- grid-column-end: 100;
- text-align: center;
- padding: 4rem 1rem;
- color: var(--blackish);
-}
-
-.feed-grid .empty-state h3 {
- font-family: var(--heading);
- font-size: var(--xlarge);
- margin-bottom: 2rem;
- text-transform: uppercase;
-}
-
-.feed-grid .empty-state p {
- font-family: var(--body);
- font-size: var(--medium);
- line-height: 1.6;
- margin: 0.5rem 0;
-}
-
-.feed-grid .empty-state p:last-child {
- margin-top: 2rem;
- color: #FF0080;
-}
-
-@media (max-width: 768px) {
- .feed-grid .empty-state {
- padding: 2rem 1rem;
- }
-
- .feed-grid .empty-state h3 {
- font-size: var(--large);
- }
-}
-
-.feed-empty-state {
- grid-column-start: 1;
- grid-column-end: 2;
- text-align: center;
- padding: 2rem;
- background: #f9f9f9;
- border-radius: 1rem;
- margin: 0 auto;
- max-width: 600px;
-}
-
-.feed-empty-state h3 {
- text-align: center;
- font-family: var(--heading);
- font-size: clamp(1.5rem, 3vw, 2.5rem);
- margin: 0 0 2rem 0!important;
- color: #FF0080;
-}
-
-.feed-empty-state p {
- font-family: var(--body);
- margin: 1rem 0;
- font-size: clamp(1rem, 2vw, 1.2rem);
- line-height: 1.4;
-}
-
-.feed-empty-state p:last-child {
- color: #FF0080;
- margin-top: 2rem;
-}
-
-@media (max-width: 768px) {
- .feed-empty-state {
- grid-column-end: none;
- padding: 2rem 1rem;
- margin: 1rem;
- }
-}
\ No newline at end of file
diff --git a/logged-in-backup.css b/logged-in-backup.css
deleted file mode 100644
index ea65a90..0000000
--- a/logged-in-backup.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.notifications .mark-read {
- display: flex;
- transition: border-color var(--timing) var(--function);
-}
- .notifications .mark-read:hover {
- border: 1px solid var(--pink);
- transition: border-color var(--timing) var(--function);
- }
-
-.notifications .mark-read .hide {
- position: absolute;
-}
-.notifications .mark-read:hover .show,
-.notifications .mark-read .hide {
- transform: scale(0);
- transform-origin: center;
- opacity: 0;
- transition: opacity var(--timing) var(--function);
- transition-property: opacity, transform;
-}
-.notifications .mark-read .show,
-.notifications .mark-read:hover .hide {
- transform: scale(1);
- transform-origin: center;
- opacity: 1;
- transition: opacity var(--timing) var(--function);
- transition-property: opacity, transform;
-}
-
-.notifications .empty-state {
- padding: 1rem 0;
-}
-.notifications #view-all {
- background-color: var(--overlay);
-}
-
-.notification-preview {
- transition: all 0.3s ease-out;
-}
-
-.notification-preview.fade-in {
- opacity: 0;
- transform: translateX(-20px);
-}
-
-.notification-preview.fade-out {
- opacity: 0;
- transform: translateX(20px);
-}
-
-.notification-preview.slide-out {
- opacity: 0;
- transform: translateX(100%);
-}
-
-.empty-state {
- transition: opacity 0.3s ease-out;
-}
-
-.empty-state.fade-in {
- opacity: 0;
-}
\ No newline at end of file
diff --git a/logged-in.css b/logged-in.css
deleted file mode 100644
index e69de29..0000000
--- a/logged-in.css
+++ /dev/null
diff --git a/nav-backup.css b/nav-backup.css
deleted file mode 100644
index c6f9020..0000000
--- a/nav-backup.css
+++ /dev/null
@@ -1,812 +0,0 @@
-/* Main Navigation css */
-nav.fixed {
- position: fixed;
- width: var(--navHeight)!important;
- height: var(--navHeight)!important;
- bottom:0;
- right: 0;
-}
-
- header:first-of-type {
- position: sticky;
- top: 0;
- left: 0;
- right: 0;
- height: var(--navHeight);
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 .5rem 0 2rem;
- background-color: var(--blacker);
- z-index: 999;
- box-shadow: rgba(19, 20, 22, 0.45) 0 0 16px;
- }
- header:first-of-type nav ul {
- background-color: var(--blacker);
- }
- header:first-of-type nav ul a {
- height: var(--navHeight);
- }
- @media (min-width: 768px){
- .admin-bar header:first-of-type {
- top: 30px;
- }
- }
-
- header:first-of-type .title {
- margin: 0;
- font-family: var(--heading);
- font-weight: 400;
- width: 100%;
- font-size: var(--small);
- color: var(--light-0);
- }
- header:first-of-type a {
- text-decoration: none;
- text-transform: lowercase;
- color: var(--light-0);
- padding: 0 1rem;
- font-size: var(--small);
- transition: color var(--timing) var(--function);
- }
- header:first-of-type .title a {
- font-size: var(--small);
- }
-
- header:first-of-type .title a:hover {
- color: var(--pink);
- transition: color var(--timing) var(--function);
- }
- nav {
- position: relative;
- height: fit-content;
- }
- nav ul {
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 0;
- padding: 0;
- }
- nav li {
- list-style: none;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- }
- nav .has-submenu li a,
- nav .has-submenu li {
- width: 100%;
- }
- nav > ul {
- justify-content: flex-end;
- }
- nav a {
- padding: 0 2rem;
- display: flex;
- justify-content: center;
- align-items: center;
- text-decoration: none;
- transition: all var(--timing) var(--function);
- }
- nav .has-submenu > a {
- padding-right: .5rem;
- }
-
- nav a:hover {
- background-color: var(--pink);
- color: var(--light-0);
- transition: all var(--timing) var(--function);
- }
- nav.term-list a:hover {
- color: var(--pink);
- }
- nav.is-style-condensed a {
- border-bottom: .25rem solid transparent;
- }
- nav .current > a {
- border-bottom: .25rem solid var(--pink);
- }
- nav.fixed .current {
- border-color: var(--pink);
- background-color: rgba(183, 51, 46,.5);
- }
- nav.fixed .current a {
- border-bottom: none;
- }
- .has-submenu button.toggle {
- height: var(--navHeight);
- width: var(--navHeight);
- border: 4px solid var(--blacker);
- background-color: var(--blacker);
- color: var(--light-0);
- }
- .has-submenu button.toggle:hover {
- background-color: var(--pink);
- color: var(--blacker);
- }
- .has-submenu.open button.toggle,
- .has-submenu:hover button.toggle {
- border-color: var(--pink);
- }
- nav button.toggle svg {
- transform: rotate(0deg);
- transition: all var(--timing) var(--function);
- }
- .has-submenu.open button.toggle.notifications svg,
- .has-submenu:hover button.toggle.notifications svg,
- .has-submenu.open button.toggle.quick-help svg,
- .has-submenu:hover button.toggle.quick-help svg {
- transform: rotate(0deg);
- }
- .has-submenu.open button.toggle svg,
- .has-submenu:hover button.toggle svg {
- transform: rotate(900deg);
- transition: all var(--timing) var(--function);
- }
-
- nav ul.submenu {
- position: absolute;
- top: 100%;
- left: 0;
- flex-direction: column;
- max-height: 0;
- transform: scaleY(0);
- width: max-content;
- min-width: 100%;
- border: 2px solid var(--blackish);
- transition: all var(--timing) var(--function);
- }
- nav li:nth-last-of-type(2) ul.submenu,
- nav li:last-of-type ul.submenu {
- right: 0;
- left: auto;
- }
-
-
- .has-submenu.open .submenu,
- .has-submenu:hover .submenu {
- transform: scaleY(1);
- max-height: 1000%;
- transition: all var(--timing) var(--function);
- }
- nav .toggle.main {
- display: none;
- }
- /*@media (max-width: 768px){*/
- /* nav.mobile {*/
- /* width: 5rem;*/
- /* height: 100%;*/
- /* }*/
- /* nav.mobile > ul {*/
- /* position: fixed;*/
- /* display: flex;*/
- /* flex-direction: column;*/
- /* justify-content: center;*/
- /* align-items: center;*/
- /* background-color: var(--overlay-heavy);*/
- /* backdrop-filter: blur(5px);*/
- /* z-index: 9999999;*/
- /* margin: 0;*/
- /* padding: 4rem 0 4rem 0;*/
- /* top: 0;*/
- /* right: -300vw;*/
- /* width: 100vw;*/
- /* height: calc(100vh - 8rem);*/
- /* overflow:hidden;*/
- /* overflow-y: scroll;*/
- /* transition: right var(--timing) var(--function);*/
- /* }*/
- /* nav.mobile > button.toggle {*/
- /* width: 5rem;*/
- /* height: 100%;*/
- /* display: flex;*/
- /* justify-content: center;*/
- /* align-items: center;*/
- /* background-color: var(--blacker);*/
- /* color: var(--light-0);*/
- /* }*/
-
- /* nav.mobile.open > button.toggle {*/
- /* z-index: 10000000;*/
- /* position: fixed;*/
- /* top: 0;*/
- /* width: calc(100% - 4rem);*/
- /* right: 2rem;*/
- /* height: 4rem;*/
- /* background-color: transparent;*/
- /* }*/
- /* nav.mobile > button.toggle:hover {*/
- /* background-color: var(--pink);*/
- /* }*/
- /* nav.mobile.open > button.toggle .menu svg,*/
- /* nav.mobile >button.toggle .close svg {*/
- /* transform: scale(0);*/
- /* height: 0;*/
- /* width: 0;*/
- /* }*/
- /* nav.mobile > button.toggle .menu svg,*/
- /* nav.mobile.open > button.toggle .close svg {*/
- /* transform: scale(1);*/
- /* height: 32px;*/
- /* width: 32px;*/
- /* }*/
-
- /* nav.mobile.open > ul {*/
- /* right: 0;*/
- /* transition: right var(--timing) var(--function);*/
- /* }*/
-
- /* nav.mobile li {*/
- /* list-style: none;*/
- /* display: flex;*/
- /* justify-content: flex-start;*/
- /* align-items: center;*/
- /* width: 100%;*/
- /* border: 2px solid var(--black);*/
- /* min-height: var(--navHeight);*/
- /* }*/
- /* nav.mobile li button,*/
- /* nav.mobile li a {*/
- /* height: var(--navHeight);*/
- /* color: var(--light-0);*/
- /* width: 100%;*/
- /* display: flex;*/
- /* justify-content: center;*/
- /* align-items: center;*/
- /* background-color: transparent;*/
- /* padding: 0;*/
- /* }*/
- /* nav.mobile .has-submenu button.toggle {*/
- /* width: 20%;*/
- /* height: var(--navHeight);*/
- /* }*/
- /* nav.mobile .has-submenu button.quick-help {*/
- /* width: 100%;*/
- /* }*/
- /* nav.mobile li button:hover,*/
- /* nav.mobile li a:hover {*/
- /* background-color: var(--pink);*/
- /* color: var(--black);*/
- /* }*/
- /* nav.mobile li.has-submenu {*/
- /* flex-wrap: wrap;*/
- /* }*/
- /* nav.mobile li ul.submenu {*/
- /* position: relative;*/
- /* top: 0;*/
- /* max-height: 0;*/
- /* transform:scaleY(0);*/
- /* width: 80%;*/
- /* padding: 0;*/
- /* margin: 0;*/
- /* transition: all var(--timing) var(--function);*/
- /* }*/
- /* nav.mobile li.open ul.submenu {*/
- /* max-height: 100%;*/
- /* transform: scaleY(1);*/
- /* padding: 0 2rem;*/
- /* transition: all var(--timing) var(--function);*/
- /* }*/
- /* nav.mobile li .toggle svg {*/
- /* transform: rotate(0deg);*/
- /* transition: all var(--timing) var(--function);*/
- /* }*/
- /* nav.mobile li.open .toggle svg {*/
- /* transform: rotate(900deg);*/
- /* transition: all var(--timing) var(--function);*/
- /* }*/
- /* nav.mobile .submenu li {*/
- /* border: 2px solid var(--black);*/
- /* background-color: var(--blackish);*/
- /* }*/
- /* nav.mobile .submenu a {*/
- /* width: 100%;*/
- /* }*/
- /* nav.mobile .submenu li+li {*/
- /* border-top: none;*/
- /* }*/
- /*}*/
- .wp-site-blocks {
- position: relative;
- }
- nav#breadcrumbs {
- position: absolute;
- top: 4rem;
- left: 0;
- width: fit-content;
- max-width:100%;
- padding: .25rem .5rem;
- background: rgba(250, 250, 250,.75);
- backdrop-filter: blur(2px);
- z-index: 998;
- height: fit-content;
- margin-block-start: 0;
- font-size: var(--small);
- flex-wrap: wrap;
- }
-
- nav#breadcrumbs {
- max-width: var(--full);
- }
- nav#breadcrumbs ol{
- display: flex;
- justify-content: flex-start;
- margin: 0;
- padding: 0;
- flex-wrap: wrap;
- }
- nav#breadcrumbs li {
- list-style: none;
- min-height: 0;
- display: flex;
- }
- nav#breadcrumbs li+li:before {
- content: " / ";
- display: inline-block;
- margin: 0 .125rem;
- }
-
- nav#breadcrumbs a {
- background-color: transparent;
- white-space: nowrap;
- height: auto;
- padding: 2px;
- display:flex;
- }
-
- nav#breadcrumbs li:first-of-type a {
- padding: 0 .125rem;
- }
- nav#breadcrumbs li:first-of-type a:hover {
- color: var(--pink);
- border-color: transparent;
- }
-
- nav.on-this-page {
- max-width: none;
- z-index: 99;
- margin: 0;
- position: fixed;
- bottom: 4rem;
- left:0;
- right: 0;
- height: fit-content;
- width: calc(100% - 2rem);
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 1rem;
- background: var(--light-0);
- box-shadow: var(--shadow);
- color: var(--offwhiteText);
- }
- nav.on-this-page.small {
- font-size: var(--small);
- }
- nav.on-this-page ul {
- flex: 1;
- height: 100%;
- width: 100%;
- justify-content: center;
- }
- nav.on-this-page.small ul {
- justify-content: flex-start;
- flex-wrap: wrap;
- }
- nav.on-this-page > label {
- width: 100%;
- max-width: 25%;
- display: flex;
- justify-content: space-around;
- color: var(--black);
- font-size: var(--small);
- text-transform: uppercase;
- align-items: center;
- }
- nav.on-this-page#search > label {
- max-width: fit-content;
- padding: 0 1rem;
- }
- nav.on-this-page:not(.letters) ul {
- max-width: 75%;
- }
- nav.on-this-page#search ul {
- max-width: 100%;
- }
- nav.on-this-page:not(.letters):not(#search) li {
- flex-shrink: 0;
- transform: scaleX(0);
- max-width: 0;
- overflow: hidden;
- transition: transform var(--timing) var(--function);
- transition-property: transform, max-width;
- }
- /*nav.on-this-page:not(.letters):not(#search) li.adj,*/
- nav.on-this-page:not(.letters):not(#search) li.active {
- transform: scaleX(1);
- width: 100%;
- flex-shrink: 1;
- }
- nav.on-this-page:not(.letters):not(#search) li.active {
- max-width: fit-content;
- }
-
- nav.on-this-page:not(.letters) ul li a {
- height: calc(100% - .25rem);
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- background-color: var(--light-0);
- padding: 0 .25rem;
- white-space:nowrap;
- gap: .66em;
- border-bottom: .25rem solid var(--light-0);
- transition: background-color var(--timing) var(--function);
- transition-property: background-color, border;
- }
- nav.on-this-page#search a > span {
- display: none;
- }
- nav.on-this-page h2 {
- position: absolute;
- height: 1.5rem;
- top: -1.5rem;
- left: 0;
- padding: .2rem;
- background-color: var(--light-0);
- }
- nav.on-this-page:not(.letters) ul li.active a,
- nav.on-this-page:not(.letters) ul li a:hover {
- border-color: var(--pink);
- color: var(--pink);
- transition: background-color var(--timing) var(--function);
- transition-property: background-color, border;
- }
- #search.on-this-page ul li {
- width: fit-content;
- }
- #search.on-this-page ul li.active a,
- #search.on-this-page ul li a:hover {
- background-color: var(--pink);
- color: var(--light-0);
- transition: background-color var(--timing) var(--function);
- transition-property: background-color, color;
- }
- nav.on-this-page:not(.letters) ul li {
- width: 25%;
- height: 100%;
- min-height: 0;
- text-align: center;
- }
-
-nav.always {
- width: 5rem;
- height: 100%;
-}
-nav.always > ul {
- position: fixed;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
- z-index: 9999999;
- margin: 0;
- padding: 4rem 0 0;
- top: 0;
- right: -300vw;
- width: 100%;
- height: calc(100vh - 8rem);
- overflow:hidden;
- overflow-y: scroll;
- transition: right var(--timing) var(--function);
-}
-nav.always > button.toggle {
- position:fixed;
- bottom: 0;
- right: 0;
- width: 4rem;
- height: 4rem;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: var(--black);
- color: var(--light-0);
- transition: width var(--timing) var(--function);
- transition-property: width, background-color;
-}
-
-nav.always.open > button.toggle {
- z-index: 10000000;
- width:100%;
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
- transition: width var(--timing) var(--function);
- transition-property: width, background-color;
-}
-nav.always > button.toggle:hover {
- background-color: var(--pink);
-}
-nav.always.open > button.toggle .menu svg,
-nav.always >button.toggle .close svg {
- transform: scale(0);
- height: 0;
- width: 0;
-}
-nav.always > button.toggle .menu svg,
-nav.always.open > button.toggle .close svg {
- transform: scale(1);
- height: 32px;
- width: 32px;
-}
-header nav svg {
- width: 32px;
- height: 32px;
-}
-.notifications.has-submenu > ul {
- position: fixed;
- width: 100%;
- top: 4rem;
- background: var(--overlay-heavy);
- transform-origin: top;
- backdrop-filter: blur(5px);
-}
- .notifications.has-submenu > ul > li {
- background-color: var(--light-0);
- max-width: min(500px, 90vw);
- width: 100%;
- }
-nav.always.open > ul {
- width: calc(100% + 16px);
- right: -16px;
- transition: right var(--timing) var(--function);
-}
- @media (max-width:768px){
- nav.always.open > ul {
- width: 100%;
- right: 0;
- }
- }
-
-nav.always li {
- list-style: none;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- width: 100%;
- border: 2px solid var(--black);
- min-height: var(--navHeight);
-}
-nav.always li button,
-nav.always li a {
- height: var(--navHeight);
- color: var(--light-0);
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: transparent;
- padding: 0;
-}
-nav.always .has-submenu button.toggle {
- width: 20%;
- height: var(--navHeight);
-}
-nav.always .has-submenu button.quick-help {
- width: 100%;
-}
-nav.always li button:hover,
-nav.always li a:hover {
- background-color: var(--pink);
- color: var(--black);
-}
-nav.always li.has-submenu {
- flex-wrap: wrap;
-}
-nav.always li ul.submenu {
- position: relative;
- top: 0;
- max-height: 0;
- transform:scaleY(0);
- width: 80%;
- padding: 0;
- margin: 0;
- transition: all var(--timing) var(--function);
-}
-nav.always li.open ul.submenu {
- max-height: 100%;
- transform: scaleY(1);
- padding: 0 2rem;
- transition: all var(--timing) var(--function);
-}
-nav.always li .toggle svg {
- transform: rotate(0deg);
- transition: all var(--timing) var(--function);
-}
-nav.always li.open .toggle svg {
- transform: rotate(900deg);
- transition: all var(--timing) var(--function);
-}
-nav.always .submenu li {
- border: 2px solid var(--black);
- background-color: var(--blackish);
-}
-nav.always .submenu a {
- width: 100%;
-}
-nav.always .submenu li+li {
- border-top: none;
-}
-
- @media (min-width: 768px){
-
- nav.on-this-page:not(.letters) ul {
- flex-wrap: nowrap;
- }
- nav.on-this-page:not(.letters) ul li {
- width: 100%;
- }
- nav.on-this-page:not(.letters):not(#search) li.adj,
- nav.on-this-page:not(.letters):not(#search) li.active {
- transform: scaleX(1);
- max-width: 50%;
- width: 100%;
- flex-shrink: 1;
- }
- nav.on-this-page:not(.letters):not(#search) li.adj {
- max-width: 25%;
- }
-
- nav.on-this-page#search a > span {
- display: inline-block;
- }
- nav.on-this-page h2 {
- position: relative;
- top: 0;
- height: auto;
- font-size: var(--medium);
- }
- nav.on-this-page:not(.letters) ul li a {
- padding: .5rem 1rem .25rem 1rem;
- }
- }
-
- nav.on-this-page.open {
- height: calc(100% - 8rem);
- width: 100%;
- display: flex;
- flex-direction: column-reverse;
- background-color: rgba(250, 250, 250,.8);
- backdrop-filter: blur(5px);
- }
- nav.on-this-page.open label {
- max-width: 90%;
- margin-top: 1rem;
- }
- nav.on-this-page.open .toggle svg {
- transform: rotate(45deg);
- }
- nav.on-this-page.open ul {
- max-width: 90%;
- flex-direction: column;
- justify-content: flex-end;
- }
- nav.on-this-page.open:not(.letters):not(#search) ul li {
- background-color: transparent;
- max-width: 100%!important;
- width: 100%;
- height: fit-content;
- transform: scaleX(1);
- flex-shrink: 1;
- overflow:visible;
- }
- nav.on-this-page.open ul li a {
- background-color: transparent;
- padding: .5rem 0;
- }
-
- nav.artists li,
- nav.theme li {
- min-height: 0;
- font-size: var(--small);
- }
- nav.artists a,
- nav.theme a {
- height: fit-content;
- background-color: transparent;
- font-size: var(--small);
- }
- nav.artists > ul,
- nav.theme > ul {
- height: fit-content;
- display: flex;
- }
-
- nav.artists {
- margin: 0 var(--mr) 1rem var(--ml);
- }
-
-
-nav.on-this-page.letters {
- position: fixed;
- bottom: 4rem;
- left: 0;
- right: 0;
- height: fit-content;
- max-width: 100vw;
- width: 100%;
- padding: 0;
- z-index: 99;
- background-color: var(--offwhite);
-}
-nav.on-this-page.letters ul {
- height: auto;
- justify-content: center;
- flex-wrap: wrap;
- width: 100%;
-}
-nav.on-this-page.letters li {
- width: calc(7.69% - 2px);
- height: 2rem;
- min-height: 2rem;
- border: 1px solid var(--light-0);
- background-color: var(--offwhite);
- color: var(--light-0);
-}
-nav.on-this-page.letters li:nth-of-type(even) {
- border-color: var(--light-0);
-}
-nav.on-this-page.letters a {
- width: 100%;
- height: 100%;
- padding: 0;
- background-color: var(--offwhite);
- color: var(--pink);
-}
-nav.on-this-page.letters .active a,
-nav.on-this-page.letters a:hover,
-nav.on-this-page.letters a:focus,
-nav.on-this-page.letters .current a {
- background-color: var(--pink);
- color: var(--blacker);
-}
-
-@media (min-width:768px){
- nav.on-this-page.letters ul {
- flex-wrap: nowrap;
- }
- nav.on-this-page.letters li {
- width: calc(3.846% - 2px);
- }
-}
-
-footer nav a {
- font-size: var(--small);
-}
-
-nav.directory-list {
- max-width: 100%;
- margin: 1rem auto;
-}
- nav.directory-list ul {
- padding: 0 1rem;
- gap: .25rem;
- flex-wrap: wrap;
- justify-content: flex-start;
- }
- nav.directory-list a {
- padding: .25rem .5rem;
- }
- nav.directory-list .title {
- margin-right: 1rem;
- text-transform: uppercase;
- }
- nav.directory-list .current a {
- border-bottom: none;
- background-color: var(--blacker);
- color: var(--light-0);
- }
\ No newline at end of file
diff --git a/nav2.css b/nav2.css
deleted file mode 100644
index 39100a4..0000000
--- a/nav2.css
+++ /dev/null
@@ -1,567 +0,0 @@
-.wp-site
-nav {
- --height: fit-content;
- display: flex;
- height: var(--height);
-}
-body > header,
-.wp-site-blocks > header nav{
- --height: 3rem;
-}
-
-
-nav ul {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- list-style: none;
- flex-flow: row wrap;
- gap: 1rem;
- padding: 0;
- margin: 0;
-}
- body > header nav > ul,
- .wp-site-blocks > header nav > ul {
- flex-flow: row nowrap;
- gap: 0;
- }
-nav a {
- padding: .25rem 1rem;
- text-decoration: none;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
- nav li,
- nav a {
- display: flex;
- height: var(--height);
- }
- nav .has-submenu > a {
- padding-right: .5rem;
- }
- nav a:hover {
- background-color: var(--action-0);
- color: var(--light-0);
- }
- nav li {
- list-style: none;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- }
- nav li + li:before {
- content: ''
- }
-
- nav .has-submenu li a,
- nav .has-submenu li {
- width: 100%;
- height: calc(var(--height) * .8);
- }
-
- footer nav:first-of-type a:hover {
- background-color: transparent;
- color: var(--action-100);
- }
- footer nav:first-of-type li {
- display: flex;
- align-items: center;
- }
-footer nav:first-of-type li + li::before {
- content: "·";
- display: block;
- color: var(--contrast-200);
-}
-
-/** Main Navigation **/
-body > header,
-.wp-site-blocks > header {
- position: sticky;
- top: 0;
- left: 0;
- right: 0;
- height: var(--height);
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 .5rem;
- background-color: var(--base);
- z-index: 9999;
- box-shadow: var(--shadow);
-}
-
-
-nav.fixed {
- z-index: 5;
- --height: 4rem;
- position: fixed;
- width: var(--height);
- height: var(--height);
- bottom:0;
- right: 0;
-}
-
-nav.fixed.bottom {
- width: calc(100% - var(--height));
- left: 0;
- box-shadow: var(--shadow);
-}
-.fixed.bottom ul {
- justify-content: space-between;
- background-color: var(--base);
-}
-.fixed.bottom li {
- flex: 1;
-}
-.fixed.bottom a {
- width: 100%;
-}
- .fixed.bottom a:hover {
- background-color: var(--action-0);
- color: var(--light-0);
- }
-
-body > header nav ul,
-.wp-site-blocks > header nav ul {
- background-color: var(--overlay-medium);
-}
-
-header .title {
- margin: 0 0 0 .25rem;
- font-family: var(--heading);
- font-weight: 400;
- width: 100%;
- height: 100%;
- font-size: var(--small);
- color: var(--contrast);
- display: flex;
- align-items: flex-start;
- justify-content:center;
-}
- .title .icon {
- --w: 5em;
- align-items: flex-start;
- }
-
-.wp-site-blocks > header p.title:not(:has(a)),
-.wp-site-blocks > header p.title a {
- padding: 0;
-}
-body > header nav > ul > li > a,
-body > header nav > ul > li > button,
-.wp-site-blocks > header nav > ul > li > a,
-.wp-site-blocks > header nav > ul > li > button {
- padding: 0 .25em;
-}
-
-@media (min-width: 768px){
- .wp-site-blocks > header p.title:not(:has(a)),
- p.title a {
- padding: 0 1rem;
- }
- .p-title {
- margin: 0 0 0 2rem;
- }
-}
-body > header a,
-.wp-site-blocks > header a {
- /*text-transform: lowercase;*/
- color: var(--contrast);
- padding: 0;
- font-size: var(--small);
-}
-@media (min-width: 768px){
- body > header a {
- padding: 0 1em;
- }
-}
- .title a {
- font-size: var(--small);
- text-decoration: none;
- display: flex;
- align-items: center;
- }
- .title a:hover {
- color: var(--action-0);
- }
- .title a::before,
- .title a::after {
- font-size: 2em;
- max-width:.5em;
- font-weight: 100;
- }
- .title a:not(:hover)::before,
- .title a:not(:hover)::after {
- color: transparent;
- }
-nav ul .icon {
- padding: 0 .5rem;
-}
- /** Submenus **/
-.has-submenu button.toggle {
- height: var(--height);
- padding: 0;
- background-color: var(--base);
- color: var(--contrast);
- border-radius: 0;
-}
- .has-submenu button.toggle:hover {
- background-color: var(--action-0);
- color: var(--base);
- }
- nav button.toggle svg {
- transform: rotate(0deg);
- transition: all var(--timing) var(--function);
- }
- .has-submenu.open button.toggle:not(.notifications, .quick-help) svg,
- .has-submenu:hover button.toggle:not(.notifications, .quick-help) svg {
- transform: rotate(900deg);
- transition: all var(--timing) var(--function);
- }
- .has-submenu.open button.toggle,
- .has-submenu:hover button.toggle {
- border-color: var(--action-0);
- }
-nav ul.submenu {
- position: absolute;
- top: 100%;
- left: 0;
- flex-flow: column nowrap;
- max-height: 0;
- gap: 0;
- transform: scaleY(0);
- width: max-content;
- min-width: 100%;
- background-color: var(--overlay-light);
- border: 2px solid var(--overlay-light);
- transition: all var(--timing) var(--function);
-}
- nav ul.submenu li {
- background-color: var(--overlay-heavy);
- border: 1px solid var(--base-50);
- }
- nav ul.submenu li:hover {
- background-color: var(--overlay-action-heavy);
- }
- nav ul.submenu a:hover {
- background-color: transparent;
- }
-body > header .submenu,
-.wp-site-blocks > header .submenu {
- right: 0;
- left: auto;
-}
-
-.has-submenu.open .submenu,
-.has-submenu:hover .submenu {
- transform: scaleY(1);
- max-height: 1000%;
- transition: all var(--timing) var(--function);
-}
-.notifications .submenu {
- position: fixed;
- top: -300vh;
- left: 0;
- right: 0;
- z-index: -1;
- background-color: var(--overlay-heavy);
-}
- .notifications .submenu li {
- max-width: min(600px, 90vw);
- background-color: var(--base);
- }
- .notifications #view-all {
- background-color: var(--base-100);
- }
-.notifications.has-submenu:hover .submenu,
-.notifications.open .submenu {
- top: 3rem;
-}
-
-/** Main Nav **/
-nav.always {
- width: 5rem;
- height: 5rem;
-}
-/*body > header nav.always > ul,*/
-.wp-site-blocks>header nav.always > ul {
- position: fixed;
- display: flex;
- flex-flow: column nowrap;
- justify-content: flex-end;
- align-items: center;
- background-color: var(--overlay-medium);
- backdrop-filter: blur(5px);
- z-index: 9999999;
- margin: 0;
- padding: 4rem 0 2rem;
- top: 0;
- right: -300vw;
- width: 100%;
- height: calc(100vh - 8rem);
- overflow:hidden;
- overflow-y: scroll;
- transition: right var(--timing) var(--function);
-}
- nav.always >ul li:hover,
- nav.always >ul li:focus-within,
- nav.always >ul li.active {
- background-color: var(--overlay-heavy);
- }
- nav.always li,
- nav.always li a{
- width: 100%;
- justify-content: flex-end;
- }
- nav.always li a{
- padding-right: 2rem;
- }
-nav.always > button.toggle {
- position:fixed;
- bottom: 0;
- right: 0;
- width: 4rem;
- height: 4rem;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: var(--base);
- color: var(--contrast);
- transition: width var(--timing) var(--function);
- transition-property: width, background-color;
- border-radius: 0;
- box-shadow: var(--shadow);
-}
-
-nav.always.open > button.toggle {
- z-index: 10000000;
- width:100%;
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
- transition: width var(--timing) var(--function);
- transition-property: width, background-color;
-}
-nav.always > button.toggle:hover {
- background-color: var(--action-0);
-}
-nav.always.open > button.toggle .menu,
-nav.always >button.toggle .close {
- transform: scale(0);
- height: 0;
- width: 0;
-}
-nav.always > button.toggle .menu,
-nav.always.open > button.toggle .close {
- transform: scale(1);
- height: 32px;
- width: 32px;
-}
-
-.wp-site-blocks>header nav.always.open > ul {
- width: calc(100% + 16px);
- right: -16px;
- padding-right: 16px;
- transition: right var(--timing) var(--function);
-}
-.wp-site-blocks>header nav.always.open > ul li a {
- padding-right: 2rem;
-}
-
-nav#breadcrumbs {
- max-width: var(--full);
- position: absolute;
- background-color: var(--overlay-medium);
- font-size: var(--small);
- padding: .125em;
-}
- nav#breadcrumbs ol {
- margin: 0;
- padding: 0;
- list-style: none;
- display: flex;
- align-items: center;
- }
- nav#breadcrumbs ol li + li:before {
- content: '/';
- color: var(--contrast-200);
- }
- nav#breadcrumbs li:last-of-type {
- margin-right: .5em;
- }
- nav#breadcrumbs a {
- padding: 0 .125rem;
- white-space: nowrap;
- height: 2em;
- color: var(--contrast);
- }
- nav#breadcrumbs svg {
- width: 20px;
- height: 20px;
- }
-
-nav.on-this-page {
- max-width: none;
- z-index: 99;
- margin: 0;
- position: fixed;
- bottom: 0;
- left: 0;
- height: 4rem;
- width: calc(100vw - 6rem);
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 .5rem;
- background-color: var(--overlay-medium);
- box-shadow: var(--shadow);
- color: var(--base-200);
-}
- nav.on-this-page ul {
- gap: 0;
- width: 100%;
- justify-content: flex-start;
- }
- nav.on-this-page a {
- width: 100%;
- height: 100%;
- }
- nav.on-this-page li:not(.has) {
- padding: 0;
- }
- nav.letters li {
- width: 100%;
- max-width: calc(7.69% - 2px);
- }
- nav.on-this-page .active a {
- background-color: var(--overlay-action-heavy);
- color: var(--light-0);
- }
-
- @media (min-width: 768px){
- nav.letters li {
- max-width: none;
- width: fit-content;
- }
- nav.letters a,
- nav.letters li:not(.has){
- padding: .25rem .66rem;
- }
- }
- nav.index {
- background-color: var(--overlay-heavy);
- justify-content: flex-start;
- gap: .5em;
- }
- nav.index ul {
- --height: 3rem;
- height: var(--height);
- justify-content: flex-start;
- width: fit-content;
- }
-
- nav.index li {
- flex-shrink: 0;
- transform: scaleX(0);
- transform-origin: right;
- max-width: 0;
- overflow: hidden;
- transition: transform var(--timing) var(--function);
- transition-property: transform;
- height: 100%;
- }
-
- nav.index li.active {
- transform: scaleX(1);
- transform-origin: left;
- width: 100%;
- flex-shrink: 1;
- max-width: fit-content;
- }
- @media (min-width: 768px ){
- nav.index li.adj {
- transform: scaleX(1);
- transform-origin: left;
- width: 100%;
- flex-shrink: 1;
- max-width: fit-content;
- }
- }
- nav.index a {
- width: 100%;
- height: calc(100% - 4px);
- padding-top: 0;
- padding-bottom: 0;
- border-bottom: 4px solid transparent;
- }
- nav.index .active a {
- border-color: var(--action-0);
- color: var(--contrast);
- }
- nav.index a:hover,
- nav.index .active a:hover {
- background-color: var(--action-0);
- color: var(--light-0);
- }
- nav.index label {
- display: flex;
- color: var(--contrast);
- align-items: center;
- margin: 0;
- }
- nav.index label button {
- margin-left: 1em;
- }
-
-nav.index.open {
- height: calc(100% - 8rem);
- z-index: 999999999;
- width: 100%;
- display: flex;
- flex-direction: column-reverse;
- background-color: var(--overlay-heavy);
- backdrop-filter: blur(5px);
- align-items: flex-end;
-}
-nav.index.open label {
- max-width: 90%;
- margin-top: 1rem;
- margin-right: 2rem;
-}
-nav.index.open .toggle svg {
- transform: rotate(45deg);
-}
-nav.index.open ul {
- height:100%;
- max-width: 100%;
- width: 100%;
- flex-direction: column;
- justify-content: flex-end;
-}
-nav.index.open ul li {
- background-color: transparent;
- max-width: 100%!important;
- width: 100%;
- height: var(--height);
- transform: scaleX(1);
- flex-shrink: 1;
- overflow:visible;
-}
-nav.index.open ul li a {
- background-color: transparent;
- justify-content: flex-end;
- padding: 0 2rem 0 0;
- height: calc(var(--height) - 4px);
-}
-nav.index.open ul li a:hover {
- background-color: var(--overlay-action-heavy);
-}
-/**
-To center the logo between two navigations:
- */
-header .title {
- width: 100%;
- margin: 0 2rem;
-}
diff --git a/quick-access-backup.css b/quick-access-backup.css
deleted file mode 100644
index 359c15d..0000000
--- a/quick-access-backup.css
+++ /dev/null
@@ -1,348 +0,0 @@
-.quick-access{
- z-index: 9999;
- height: var(--navHeight);
- position: fixed;
- bottom: 0;
- left: 0;
- right: var(--navHeight);
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: var(--blacker);
- box-shadow: var(--shadow);
-}
-button#randomizor,
-.quick-access input:checked + label,
-.quick-access label,
-.quick-access button {
- height: var(--navHeight);
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- background-color: var(--blacker);
- color: var(--light-0);
- transition: all var(--timing) var(--function);
- transition-property: background-color, color;
-}
-.quick-access .open label {
- background-color: var(--blackish);
-}
-.quick-access .search button,
-button#randomizor {
- width: var(--buttonWidth);
- transition: width var(--timing) var(--function);
- transition-property: width, transform;
-}
-button#randomizor span {
- font-size: var(--small);
-}
-button#randomizor sup {
- font-size: .75em;
-}
-.quick-access button.close,
-.quick-access button.toggle {
- border: .5rem solid var(--blackish);
- width: var(--navHeight);
- transition: width var(--timing) var(--function);
- transition-property: width, transform;
-}
-
-.quick-access .open button.toggle .more,
-.quick-access button.toggle .close {
-transform: scale(0);
-max-width: 0;
-max-height: 0;
-transition: all var(--timing) var(--function);
- transition-property: transform;
-}
-.quick-access .open button.toggle .close,
-.quick-access button.toggle .more {
-transform: scale(1);
-max-width: 100%;
-max-height: 100%;
-transition: all var(--timing) var(--function);
- transition-property: transform;
-}
-
-.quick-access label {
- font-size: var(--small);
- cursor: pointer;
- width: var(--navHeight);
-}
-.quick-access .open label {
- width: 100%;
-}
-
-.quick-access .randomizor label {
-transform: scaleX(0);
-max-width: 0;
-}
-.quick-access .randomizor.open label,
-.quick-access .randomizor input:checked + label {
-transform: scaleX(1);
-max-width: 100%;
-}
-button#randomizor:hover,
-.quick-access label:hover,
-.quick-access .open input:checked + label,
-.quick-access button:hover {
- background-color: var(--pink);
- color: var(--black);
- transition: all var(--timing) var(--function);
- transition-property: background-color, color;
-}
-button#randomizor span,
-.quick-access label span{
-transform: scaleY(0);
-max-height: 0;
-transition: all var(--timing) var(--function);
- transition-property: transform, max-height;
-}
-
-button#randomizor:hover span,
-.quick-access .open a span,
-.quick-access input:checked + label:hover span,
-.quick-access .open label span,
-.quick-access .open input:checked + label span {
-transform: scaleY(1);
-max-height: 100%;
-transition: all var(--timing) var(--function);
- transition-property: transform, max-height;
-}
-
-button#randomizor svg,
-.quick-access label svg {
- width: 32px;
- height: 32px;
- transition: all var(--timing) var(--function);
- transition-property: width, height;
-}
-button#randomizor:hover svg,
-.quick-access .open input:checked + label svg,
-.quick-access input:checked + label:hover svg {
- width: 25px;
- height: 25px;
- transition: all var(--timing) var(--function);
- transition-property: width, height;
-}
-input[type=radio],
-input[type=checkbox]{
- position: absolute;
- left: -300vw;
-transform: scale(0);
-max-width: 0;
-max-height: 0;
-}
-.quick-access .randomizor.close .options,
-.quick-access .close input:checked + label,
-.quick-access .close button.toggle {
-transform: scale(0);
-max-width: 0;
-max-height: 0;
-transition: width var(--timing) var(--function);
- transition-property: width, transform;
-}
-.quick-access .close a,
-.quick-access .close button.search {
- width: 4rem;
- transition: width var(--timing) var(--function);
-}
-
-.quick-access form {
- display: flex;
- height: var(--navHeight);
- margin-bottom: 0;
-}
-.quick-access form.search {
- justify-content: flex-end;
-}
-.quick-access.search {
- flex-wrap: wrap;
-}
-.quick-access.search form.search {
- width: 100%;
- order: 1;
- justify-content: center;
-}
-.quick-access.search form.randomizor {
- order: 2;
- width: 0;
-}
-
-.quick-access .options {
- padding: 0;
- margin: 0;
- border: 2px solid var(--black);
- padding-block-end: 0;
- padding-block-start:0;
- padding-inline-start:0;
- padding-inline-end: 0;
- margin-inline-start: 0;
- margin-inline-end: 0;
- min-inline-size: 0;
- display: flex;
- transform-origin: bottom;
- width: 100%;
- bottom: 0;
- overflow: visible;
- transition: bottom var(--timing) var(--function) .25s;
-}
-.quick-access .open .options {
- z-index: -1;
-}
-
-.quick-access .randomizor .options {
- justify-content: flex-start;
- width: 4rem;
-}
-.quick-access .randomizor.open .options {
- left: 0;
- width: 100%;
- position: fixed;
-}
-.quick-access .search .options {
- justify-content: flex-end;
- position: fixed;
-transform: scaleY(0);
-max-height: 0;
-right: 0;
-}
-.quick-access .search.open .options,
-.quick-access .randomizor.open .options {
- bottom: calc(var(--navHeight) - 2px);
- transform: scaleY(1);
- max-height: 4rem;
-transition: bottom var(--timing) var(--function);
-}
-.quick-access legend {
- transform: scale(0) translateX(-50%);
- max-width: 0;
- max-height: 0;
-position: absolute;
- background-color: var(--blacker);
- bottom: 0;
- left: 50%;
- z-index: -1;
- width: 66.666%;
- text-align: center;
- margin: 0 auto;
- border-top-left-radius: .75rem;
- border-top-right-radius: .75rem;
- padding: .5rem 1rem;
- transition: bottom var(--timing) var(--function);
-}
-.quick-access .open legend {
- transform: scale(1) translateX(-50%);
- max-width: 100%;
- max-height: 100%;
- bottom: 100%;
- transition: bottom var(--timing) var(--function) .35s;
-}
-.quick-access button.close,
-.quick-access input[type=search] {
-transform: scaleX(0);
-max-width: 0;
-transition: width var(--timing) var(--function);
- transition-property: width, transform;
-}
-.quick-access .open button.close,
-.quick-access .open input[type=search] {
-transform: scale(1);
-max-width: 100%;
-max-height: 100%;
-transition: width var(--timing) var(--function);
- transition-property: width, transform;
-}
-.quick-access input[type=search] {
- width: calc(100% - 10rem);
- padding: 0 1rem;
- font-size: var(--large);
- font-family: var(--body);
-}
-
-aside#seen-all {
- position: fixed;
- width: 66.6vw;
- right: .25rem;
- bottom: -200vh;
- z-index: 999;
- padding: 1rem;
- border-radius: 1rem;
- background: var(--light-0);
- transition: bottom var(--timing) var(--function);
- box-shadow: var(--shadow);
-}
-aside#seen-all.did-it{
- bottom: 4.5rem;
- transition: bottom var(--timing) var(--function) .5s;
-}
-aside#seen-all button {
- position: absolute;
- right: .5rem;
- top: .5rem;
- background: transparent;
- color: var(--black);
-}
-aside#seen-all .button {
- padding: .5rem 1.5rem;
- border-radius: 4px;
- text-decoration: none;
-}
-.quick-access label.screen-reader-text {
- width: 0;
-}
-@media (max-width: 768px){
- .quick-access .search {
- width: 25vw;
- }
- .quick-access input[type=search] {
- font-size: var(--medium);
- }
-}
-
-button[aria-busy="true"] {
- position: relative;
- cursor: wait;
-}
-
-button[aria-busy="true"]::after {
- content: "";
- position: absolute;
- width: 1em;
- height: 1em;
- border: 2px solid rgba(255, 255, 255, 0.3);
- border-top-color: white;
- border-radius: 50%;
- animation: loading 0.75s infinite linear;
-}
-
-@keyframes loading {
- to {
- transform: rotate(360deg);
- }
-}
-
-.quick-access.loading #randomizor,
-.quick-access.loading #random-item label,
-.quick-access.loading #random-item .toggle{
- color: var(--lighter);
- cursor: wait;
- pointer-events: none;
-}
-
-.quick-access.loading #random-item {
- position: relative;
-}
-.quick-access.loading #random-item:after {
- content: "";
- position: absolute;
- top: calc(50% - .5em);
- left: calc(50% - .5em);
- width: 1em;
- height: 1em;
- border: 2px solid rgba(183, 51, 46, 0.3);
- border-top-color: var(--pink);
- border-radius: 50%;
- animation: loading 0.75s infinite linear;
-}
\ No newline at end of file
diff --git a/quick-access.css b/quick-access.css
deleted file mode 100644
index d043136..0000000
--- a/quick-access.css
+++ /dev/null
@@ -1,349 +0,0 @@
-/*.quick-access{*/
-/* --buttonWidth: 6rem;*/
-/* --navHeight: 4rem;*/
-/* z-index: 999;*/
-/* height: var(--navHeight);*/
-/* position: fixed;*/
-/* bottom: 0;*/
-/* left: 0;*/
-/* right: var(--navHeight);*/
-/* display: flex;*/
-/* justify-content: space-between;*/
-/* align-items: center;*/
-/* background-color: var(--base);*/
-/* box-shadow: var(--shadow);*/
-/*}*/
-/*button#randomizor,*/
-/*.quick-access input:checked + label,*/
-/*.quick-access label,*/
-/*.quick-access button {*/
-/* height: var(--navHeight);*/
-/* display: flex;*/
-/* justify-content: center;*/
-/* align-items: center;*/
-/* flex-direction: column;*/
-/* background-color: var(--base);*/
-/* color: var(--contrast);*/
-/* transition: all var(--timing) var(--function);*/
-/* transition-property: background-color, color;*/
-/*}*/
-/*.quick-access .open label {*/
-/* background-color: var(--base-50);*/
-/*}*/
-/*.quick-access .search button,*/
-/*button#randomizor {*/
-/* width: var(--buttonWidth);*/
-/* transition: width var(--timing) var(--function);*/
-/* transition-property: width, transform;*/
-/*}*/
-/*button#randomizor span {*/
-/* font-size: var(--small);*/
-/*}*/
-/*button#randomizor sup {*/
-/* font-size: .75em;*/
-/*}*/
-/*.quick-access button.close,*/
-/*.quick-access button.toggle {*/
-/* border: .5rem solid var(--base-50);*/
-/* width: var(--navHeight);*/
-/* transition: width var(--timing) var(--function);*/
-/* transition-property: width, transform;*/
-/*}*/
-
-/*.quick-access .open button.toggle .more,*/
-/*.quick-access button.toggle .close {*/
-/* transform: scale(0);*/
-/* max-width: 0;*/
-/* max-height: 0;*/
-/* transition: all var(--timing) var(--function);*/
-/* transition-property: transform;*/
-/*}*/
-/*.quick-access .open button.toggle .close,*/
-/*.quick-access button.toggle .more {*/
-/* transform: scale(1);*/
-/* max-width: 100%;*/
-/* max-height: 100%;*/
-/* transition: transform var(--timing) var(--function);*/
-/*}*/
-
-/*.quick-access label {*/
-/* font-size: var(--small);*/
-/* cursor: pointer;*/
-/* width: var(--navHeight);*/
-/*}*/
-/*.quick-access .open label {*/
-/* width: 100%;*/
-/*}*/
-
-/*.quick-access .randomizor label {*/
-/* transform: scaleX(0);*/
-/* max-width: 0;*/
-/*}*/
-/*.quick-access .randomizor.open label,*/
-/*.quick-access .randomizor input:checked + label {*/
-/* transform: scaleX(1);*/
-/* max-width: 100%;*/
-/*}*/
-/*button#randomizor:hover,*/
-/*.quick-access label:hover,*/
-/*.quick-access .open input:checked + label,*/
-/*.quick-access button:hover {*/
-/* background-color: var(--action-50);*/
-/* color: var(--base-100);*/
-/* transition: all var(--timing) var(--function);*/
-/* transition-property: background-color, color;*/
-/*}*/
-/*button#randomizor span,*/
-/*.quick-access label span{*/
-/* transform: scaleY(0);*/
-/* max-height: 0;*/
-/* transition: all var(--timing) var(--function);*/
-/* transition-property: transform, max-height;*/
-/*}*/
-
-/*button#randomizor:hover span,*/
-/*.quick-access .open a span,*/
-/*.quick-access input:checked + label:hover span,*/
-/*.quick-access .open label span,*/
-/*.quick-access .open input:checked + label span {*/
-/* transform: scaleY(1);*/
-/* max-height: 100%;*/
-/* transition: all var(--timing) var(--function);*/
-/* transition-property: transform, max-height;*/
-/*}*/
-
-/*button#randomizor svg,*/
-/*.quick-access label svg {*/
-/* width: 32px;*/
-/* height: 32px;*/
-/* transition: all var(--timing) var(--function);*/
-/* transition-property: width, height;*/
-/*}*/
-/*button#randomizor:hover svg,*/
-/*.quick-access .open input:checked + label svg,*/
-/*.quick-access input:checked + label:hover svg {*/
-/* width: 25px;*/
-/* height: 25px;*/
-/* transition: all var(--timing) var(--function);*/
-/* transition-property: width, height;*/
-/*}*/
-/*input[type=radio],*/
-/*input[type=checkbox]{*/
-/* position: absolute;*/
-/* left: -300vw;*/
-/* transform: scale(0);*/
-/* max-width: 0;*/
-/* max-height: 0;*/
-/*}*/
-/*.quick-access .randomizor.close .options,*/
-/*.quick-access .close input:checked + label,*/
-/*.quick-access .close button.toggle {*/
-/* transform: scale(0);*/
-/* max-width: 0;*/
-/* max-height: 0;*/
-/* transition: width var(--timing) var(--function);*/
-/* transition-property: width, transform;*/
-/*}*/
-/*.quick-access .close a,*/
-/*.quick-access .close button.search {*/
-/* width: 4rem;*/
-/* transition: width var(--timing) var(--function);*/
-/*}*/
-
-/*.quick-access form {*/
-/* display: flex;*/
-/* height: var(--navHeight);*/
-/* margin-bottom: 0;*/
-/*}*/
-/*.quick-access form.search {*/
-/* justify-content: flex-end;*/
-/*}*/
-/*.quick-access.search {*/
-/* flex-wrap: wrap;*/
-/*}*/
-/*.quick-access.search form.search {*/
-/* width: 100%;*/
-/* order: 1;*/
-/* justify-content: center;*/
-/*}*/
-/*.quick-access.search form.randomizor {*/
-/* order: 2;*/
-/* width: 0;*/
-/*}*/
-
-/*.quick-access .options {*/
-/* padding: 0;*/
-/* margin: 0;*/
-/* border: 2px solid var(--base-100);*/
-/* padding-block-end: 0;*/
-/* padding-block-start:0;*/
-/* padding-inline-start:0;*/
-/* padding-inline-end: 0;*/
-/* margin-inline-start: 0;*/
-/* margin-inline-end: 0;*/
-/* min-inline-size: 0;*/
-/* display: flex;*/
-/* transform-origin: bottom;*/
-/* width: 100%;*/
-/* bottom: 0;*/
-/* overflow: visible;*/
-/* transition: bottom var(--timing) var(--function) .25s;*/
-/*}*/
-/*.quick-access .open .options {*/
-/* z-index: -1;*/
-/*}*/
-
-/*.quick-access .randomizor .options {*/
-/* justify-content: flex-start;*/
-/* width: 4rem;*/
-/*}*/
-/*.quick-access .randomizor.open .options {*/
-/* left: 0;*/
-/* width: 100%;*/
-/* position: fixed;*/
-/*}*/
-/*.quick-access .search .options {*/
-/* justify-content: flex-end;*/
-/* position: fixed;*/
-/* transform: scaleY(0);*/
-/* max-height: 0;*/
-/* right: 0;*/
-/*}*/
-/*.quick-access .search.open .options,*/
-/*.quick-access .randomizor.open .options {*/
-/* bottom: calc(var(--navHeight) - 2px);*/
-/* transform: scaleY(1);*/
-/* max-height: 4rem;*/
-/* transition: bottom var(--timing) var(--function);*/
-/*}*/
-/*.quick-access legend {*/
-/* transform: scale(0) translateX(-50%);*/
-/* max-width: 0;*/
-/* max-height: 0;*/
-/* position: absolute;*/
-/* background-color: var(--base);*/
-/* bottom: 0;*/
-/* left: 50%;*/
-/* z-index: -1;*/
-/* width: 66.666%;*/
-/* text-align: center;*/
-/* margin: 0 auto;*/
-/* border-top-left-radius: .75rem;*/
-/* border-top-right-radius: .75rem;*/
-/* padding: .5rem 1rem;*/
-/* transition: bottom var(--timing) var(--function);*/
-/*}*/
-/*.quick-access .open legend {*/
-/* transform: scale(1) translateX(-50%);*/
-/* max-width: 100%;*/
-/* max-height: 100%;*/
-/* bottom: 100%;*/
-/* transition: bottom var(--timing) var(--function) .35s;*/
-/*}*/
-/*.quick-access button.close,*/
-/*.quick-access input[type=search] {*/
-/* transform: scaleX(0);*/
-/* max-width: 0;*/
-/* transition: width var(--timing) var(--function);*/
-/* transition-property: width, transform;*/
-/*}*/
-/*.quick-access .open button.close,*/
-/*.quick-access .open input[type=search] {*/
-/* transform: scale(1);*/
-/* max-width: 100%;*/
-/* max-height: 100%;*/
-/* transition: width var(--timing) var(--function);*/
-/* transition-property: width, transform;*/
-/*}*/
-/*.quick-access input[type=search] {*/
-/* width: calc(100% - 10rem);*/
-/* padding: 0 1rem;*/
-/* font-size: var(--large);*/
-/* font-family: var(--body);*/
-/*}*/
-
-/*aside#seen-all {*/
-/* position: fixed;*/
-/* width: 66.6vw;*/
-/* right: .25rem;*/
-/* bottom: -200vh;*/
-/* z-index: 999;*/
-/* padding: 1rem;*/
-/* border-radius: 1rem;*/
-/* background: var(--base);*/
-/* transition: bottom var(--timing) var(--function);*/
-/* box-shadow: var(--shadow);*/
-/*}*/
-/*aside#seen-all.did-it{*/
-/* bottom: 4.5rem;*/
-/* transition: bottom var(--timing) var(--function) .5s;*/
-/*}*/
-/*aside#seen-all button {*/
-/* position: absolute;*/
-/* right: .5rem;*/
-/* top: .5rem;*/
-/* background: transparent;*/
-/* color: var(--base-100);*/
-/*}*/
-/*aside#seen-all .button {*/
-/* padding: .5rem 1.5rem;*/
-/* border-radius: 4px;*/
-/* text-decoration: none;*/
-/*}*/
-/*.quick-access label.screen-reader-text {*/
-/* width: 0;*/
-/*}*/
-/*@media (max-width: 768px){*/
-/* .quick-access .search {*/
-/* width: 25vw;*/
-/* }*/
-/* .quick-access input[type=search] {*/
-/* font-size: var(--medium);*/
-/* }*/
-/*}*/
-
-/*button[aria-busy="true"] {*/
-/* position: relative;*/
-/* cursor: wait;*/
-/*}*/
-
-/*button[aria-busy="true"]::after {*/
-/* content: "";*/
-/* position: absolute;*/
-/* width: 1em;*/
-/* height: 1em;*/
-/* border: 2px solid var(--overlay-light);*/
-/* border-top-color: var(--contrast);*/
-/* border-radius: 50%;*/
-/* animation: loading 0.75s infinite linear;*/
-/*}*/
-
-/*@keyframes loading {*/
-/* to {*/
-/* transform: rotate(360deg);*/
-/* }*/
-/*}*/
-
-/*.quick-access.loading #randomizor,*/
-/*.quick-access.loading #random-item label,*/
-/*.quick-access.loading #random-item .toggle{*/
-/* color: var(--lighter);*/
-/* cursor: wait;*/
-/* pointer-events: none;*/
-/*}*/
-
-/*.quick-access.loading #random-item {*/
-/* position: relative;*/
-/*}*/
-/*.quick-access.loading #random-item:after {*/
-/* content: "";*/
-/* position: absolute;*/
-/* top: calc(50% - .5em);*/
-/* left: calc(50% - .5em);*/
-/* width: 1em;*/
-/* height: 1em;*/
-/* border: 2px solid var(--action-200);*/
-/* border-top-color: var(--action-50);*/
-/* border-radius: 50%;*/
-/* animation: loading 0.75s infinite linear;*/
-/*}*/
\ No newline at end of file
--
Gitblit v1.10.0