/* Base Feed Container */
|
.feed-block {
|
max-width: var(--full);
|
margin: 0 auto;
|
}
|
|
.feed-block > *:not(.feed-grid, h2) {
|
max-width: var(--alignWide);
|
margin: 1rem var(--mr) 1rem var(--ml);
|
}
|
.feed-block > h2 {
|
max-width: var(--maxWidth);
|
}
|
|
.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 Grid Layout */
|
.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(4, 1fr);
|
gap: 1rem;
|
}
|
.feed-empty-state {
|
grid-column: 2/ span 2!important;
|
}
|
}
|
|
@media (min-width: 1200px){
|
.feed-grid{
|
grid-template-columns: repeat(6, 1fr);
|
}
|
.feed-empty-state {
|
grid-column: 2 / span 4!important;
|
}
|
}
|
/* Feed Items */
|
.feed-item {
|
position: relative;
|
border-radius: 0.5rem;
|
overflow: hidden;
|
background: var(--base-50);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
opacity: 0;
|
transition: opacity var(--transition-base) var(--delay);
|
height: fit-content;
|
padding: 0;
|
}
|
|
.feed-item[data-loaded] {
|
opacity: 1;
|
}
|
|
.feed-item[data-loaded] + .feed-item[data-loaded] {
|
--delay: var(--delay) + var(--increase);
|
}
|
|
.feed-item.artist {
|
grid-column: span 2;
|
}
|
|
.feed-item.highlighted {
|
animation: highlight 2s ease-out;
|
}
|
|
/* Feed Item Images */
|
.feed-image {
|
display: block;
|
aspect-ratio: 1;
|
overflow: hidden;
|
width: 100%;
|
height: 100%;
|
}
|
.artist-tattoos img,
|
.feed-image img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
transition: transform var(--timing) var(--function);
|
}
|
|
.artist-tattoos a:hover img,
|
.feed-image:hover img {
|
transform: scale(1.05);
|
}
|
|
/* Item Information */
|
.item-info {
|
padding: .25rem 1rem;
|
}
|
|
.item-info h3 {
|
margin: 0!important;
|
font-size: 1.1rem;
|
font-family: var(--body);
|
font-weight: var(--bWeight);
|
text-align: center;
|
}
|
.item-info span {
|
text-transform: uppercase;
|
display: flex;
|
align-items: center;
|
}
|
.item-info .icon {
|
margin-right: 1em;
|
}
|
|
/* Taxonomy Lists */
|
.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;
|
}
|
|
/* Labels */
|
.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: var(--action-0);
|
}
|
|
/* Favorite Button */
|
button.favourite {
|
position: absolute;
|
top: .5rem;
|
right: .5rem;
|
z-index: 10;
|
background: var(--overlay-medium);
|
border-radius: 50%;
|
box-shadow: var(--subtle);
|
border: none;
|
cursor: pointer;
|
width: 2rem;
|
height: 2rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
backdrop-filter: blur(5px);
|
transition: all var(--transition-base);
|
}
|
|
button.favourite:hover {
|
transform: scale(1.1);
|
color: var(--action-0);
|
background: var(--base);
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
}
|
|
button.favourite.favourited {
|
animation: favourite-pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
}
|
|
/* Filters */
|
.feed-filters {
|
margin: 2rem auto;
|
position: relative;
|
}
|
|
.feed-filters .feed-controls {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
gap: 2rem;
|
width: 100%;
|
}
|
|
.feed-filters details summary {
|
justify-content: flex-start;
|
padding: 2rem .5rem .5rem;
|
/* display: flex;*/
|
/* border: 0;*/
|
/* flex-wrap: nowrap;*/
|
/* padding: 2rem .5rem .5rem;*/
|
/* gap: .125rem;*/
|
/* position: relative;*/
|
/* justify-content: flex-start;*/
|
/* gap: .5rem;*/
|
/* border-radius: var(--innerRadius);*/
|
}
|
.feed-filters details[open] summary {
|
background-color: var(--base-50);
|
}
|
.feed-filters summary:after {
|
position:absolute;
|
right: .5rem;
|
top: .5rem;
|
}
|
.radio-group-label > label,
|
.feed-filters .filter-toggle,
|
.feed-filters .type-filter > 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;
|
}
|
.type-filter:hover {
|
color: var(--action-0);
|
border-color: var(--action-0);
|
transition: var(--transition-color);
|
}
|
.feed-filters .type-filter > label {
|
flex-direction: column;
|
}
|
.type-filter.favourites-toggle {
|
margin-left: auto;
|
}
|
.type-filter.favourites-toggle label {
|
position: relative;
|
}
|
.type-filter.favourites-toggle label .label {
|
top: 100%;
|
right: 0;
|
}
|
input[hidden] + label {
|
display: none;
|
}
|
.feed-filters svg {
|
width: 25px;
|
height: 25px;
|
}
|
.order-options {
|
position: relative;
|
display: flex;
|
justify-content: space-between;
|
}
|
.order-options .order-by {
|
display: flex;
|
}
|
.order-options .order-direction,
|
.order-options .order-by .radio-group-label{
|
display: flex;
|
padding-top: 1.5rem;
|
position: relative;
|
}
|
.order-options .order-by > .label {
|
margin-right: 2rem;
|
}
|
.radio-group-label {
|
display: flex;
|
gap: .5rem;
|
}
|
.feed-filters .radio-group-label label .label {
|
top: .5rem;
|
right: .5rem;
|
}
|
.feed-filters .order-options label svg {
|
width: 20px;
|
height: 20px;
|
}
|
.radio-group-label input:checked + label,
|
.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: .5rem;
|
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-filters .filters {
|
padding: 1rem;
|
margin-top: 1rem;
|
background-color: transparent;
|
}
|
.has-filters.filters {
|
background-color: var(--base-50);
|
}
|
.filter-group {
|
display: flex;
|
gap: .5rem;
|
flex-wrap: wrap;
|
margin-bottom: .25rem;
|
position: relative;
|
}
|
|
/* Loading States */
|
.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: var(--overlay-medium);
|
backdrop-filter: blur(5px);
|
-webkit-backdrop-filter: blur(5px);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 999999;
|
opacity: 1;
|
visibility: visible;
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
}
|
.feed-overlay-content {
|
background: var(--base);
|
padding: 2rem;
|
border-radius: 1rem;
|
box-shadow: var(--shadow);
|
text-align: center;
|
width: min(400px, 60vw);
|
}
|
.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 {
|
width: 3em;
|
height: 3em;
|
}
|
.loading .loading-message .icon svg {
|
width: 100%;
|
height: 100%;
|
margin-right: 1rem;
|
animation: dance 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;
|
}
|
|
.loading .loading-dots {
|
color: var(--action-0);
|
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;
|
}
|
|
/* Empty States */
|
.feed-empty-state {
|
grid-column-start: 1;
|
grid-column-end: 2;
|
text-align: center;
|
padding: 2rem;
|
background: var(--base);
|
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;
|
color: var(--action-0);
|
}
|
|
.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: var(--action-0);
|
margin-top: 2rem;
|
}
|
|
/* Animations */
|
@keyframes highlight {
|
0%, 100% {
|
box-shadow: none;
|
}
|
50% {
|
box-shadow: 0 0 0 4px var(--action-0);
|
}
|
}
|
|
@keyframes favourite-pop {
|
0% { transform: scale(1); }
|
50% { transform: scale(1.3); }
|
75% { transform: scale(0.9); }
|
100% { transform: scale(1); }
|
}
|
|
@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 }
|
}
|
/* Dancing Animation */
|
@keyframes dance {
|
0%, 100% { transform: rotate(-5deg) scale(1);}
|
50% { transform: rotate(5deg) scale(1.1); }
|
}
|
|
/* Artist Tattoos Grid */
|
.artist-tattoos {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: .25em;
|
}
|
|
.artist-tattoos a:has(img) {
|
overflow: hidden;
|
background-color: var(--base-100);
|
}
|
.artist-tattoos a:not(.feed-image) img{
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
.artist-tattoos a::before,
|
.artist-tattoos a::after {
|
display: none;
|
}
|
|
.artist-tattoos .feed-image {
|
grid-row: span 2;
|
grid-column: span 2;
|
}
|
|
/* Details & Summary */
|
.feed-item summary .handle {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background-color: var(--overlay-light);
|
backdrop-filter: blur(5px);
|
border-radius: var(--innerRadius);
|
z-index: 1;
|
padding: .25rem .25rem .25rem 1.1rem;
|
}
|
|
.feed-item:hover summary .handle,
|
.feed-item[open] summary .handle {
|
background-color: var(--overlay-action-medium);
|
backdrop-filter: blur(5px);
|
}
|
.feed-item summary:after {
|
z-index: 11;
|
position: absolute;
|
bottom: .35rem;
|
right: .7rem;
|
width: 1.5rem;
|
height: 1.5rem;
|
cursor: pointer;
|
}
|
|
/* Loading Title Animation */
|
.loading .feed-overlay h2 {
|
width: fit-content;
|
margin: 1rem auto!important;
|
color: transparent;
|
-webkit-text-stroke: 1px var(--contrast);
|
--g: conic-gradient(var(--action-0) 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% }
|
}
|
|
/* Loading Message Transitions */
|
.loading .loading-message {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
overflow: hidden;
|
}
|
|
|
.loading .dots-wrapper {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.loading .loading-message p {
|
opacity: 1;
|
transform: scaleY(1);
|
transform-origin: bottom;
|
transition: opacity var(--transition-base),
|
transform var(--transition-base);
|
}
|
|
.loading .changing .loading-message p {
|
opacity: 0;
|
transform: scaleY(0);
|
transform-origin: top;
|
}
|
|
/* Shimmer Effect */
|
.loading .feed-overlay::after {
|
content: '';
|
position: absolute;
|
z-index: -1;
|
inset: 0;
|
background: linear-gradient(
|
90deg,
|
var(--shimmer)
|
);
|
animation: shimmer 3s ease-in-out infinite;
|
}
|
|
@keyframes shimmer {
|
0% { transform: translateX(-100%); }
|
50%, 100% { transform: translateX(100%); }
|
}
|
|
/* Media Queries */
|
@media (max-width: 768px) {
|
.feed-filters .feed-controls {
|
flex-direction: column;
|
gap: 1rem;
|
}
|
|
.feed-empty-state {
|
grid-column-end: none;
|
padding: 2rem 1rem;
|
margin: 1rem;
|
}
|
|
.feed-filters details summary {
|
gap: .5rem;
|
justify-content: flex-start;
|
}
|
}
|
|
*[hidden],
|
*[hidden] + label{
|
display: none;
|
}
|
|
.feed-loader {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
gap: 1rem;
|
margin: 2rem auto 0!important;
|
}
|
.load-more {
|
opacity: 1;
|
display: flex;
|
align-items: center;
|
gap: 0.5rem;
|
padding: 0.75rem 1.5rem;
|
background: var(--base-200);
|
color: var(--contrast-200);
|
border: none;
|
border-radius: 4px;
|
font-size: var(--medium);
|
cursor: pointer;
|
transition: all var(--transition-base);
|
}
|
.load-more[hidden]{
|
opacity: 0;
|
transition: all var(--transition-base);
|
}
|
|
.load-more:hover {
|
background: var(--action-0);
|
transform: translateY(-2px);
|
}
|
|
.load-more:focus-visible {
|
outline: 2px solid var(--action-0);
|
outline-offset: 2px;
|
}
|
|
.feed-filters:not(:has(details)){
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
}
|
.feed-filters:not(:has(details)) .favourites-toggle {
|
position: absolute;
|
top: 1.5rem;
|
left: -3.5rem;
|
z-index: 10;
|
}
|
@media (min-width: 768px){
|
.feed-filters:not(:has(details)) .favourites-toggle {
|
right: 0;
|
left: auto;
|
}
|
}
|
|
.icon.colour {
|
background: rgb(183, 51, 46);
|
background: linear-gradient(180deg, rgba(183, 51, 46,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
|
mask-image: var(--colour);
|
-webkit-mask-image: var(--colour);
|
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-size: contain;
|
mask-repeat: no-repeat;
|
mask-size: contain;
|
width: 1.25rem;
|
height: 1.25rem;
|
}
|
|
/* Accessibility-focused CSS */
|
|
/* Focus styles - make keyboard focus visible and consistent */
|
.feed-item:focus,
|
.feed-item:focus-visible,
|
button:focus,
|
button:focus-visible,
|
[role="button"]:focus,
|
[role="button"]:focus-visible,
|
a:focus,
|
a:focus-visible,
|
input:focus,
|
input:focus-visible,
|
select:focus,
|
select:focus-visible,
|
textarea:focus,
|
textarea:focus-visible {
|
outline: 2px solid #FF0080 !important;
|
outline-offset: 2px !important;
|
box-shadow: 0 0 0 4px rgba(183, 51, 46, 0.2) !important;
|
}
|
|
/* Remove focus outline for mouse users but keep it for keyboard users */
|
:focus:not(:focus-visible) {
|
outline: none !important;
|
box-shadow: none !important;
|
}
|
|
/* Skip link for keyboard navigation */
|
.skip-to-content {
|
background: #FF0080;
|
color: white;
|
height: auto;
|
left: 50%;
|
padding: 8px;
|
position: absolute;
|
transform: translateY(-100%) translateX(-50%);
|
transition: transform 0.3s;
|
width: auto;
|
z-index: 100;
|
}
|
|
.skip-to-content:focus {
|
transform: translateY(0%) translateX(-50%);
|
}
|
|
/* Loading states - ensure they're accessible */
|
[aria-busy="true"] {
|
cursor: progress;
|
}
|
|
/* Disabled states */
|
[aria-disabled="true"],
|
[disabled] {
|
cursor: not-allowed;
|
opacity: 0.7;
|
}
|
|
/* High contrast mode support */
|
@media (forced-colors: active) {
|
.feed-item {
|
border: 1px solid CanvasText;
|
}
|
|
button,
|
[role="button"] {
|
border: 1px solid ButtonText;
|
}
|
|
button.favourite.favourited {
|
background-color: Highlight;
|
color: HighlightText;
|
}
|
}
|
|
/* Reduce animations for users who prefer reduced motion */
|
@media (prefers-reduced-motion: reduce) {
|
*,
|
*::before,
|
*::after {
|
animation-duration: 0.01ms !important;
|
animation-iteration-count: 1 !important;
|
transition-duration: 0.01ms !important;
|
scroll-behavior: auto !important;
|
}
|
|
.feed-overlay-content,
|
.loading-dots,
|
.gallery-modal {
|
animation: none !important;
|
transition: none !important;
|
}
|
|
.feed-item {
|
transition: none !important;
|
}
|
}
|
|
/* Keyboard navigable feed items */
|
.feed-item[tabindex="0"] {
|
cursor: pointer;
|
position: relative;
|
}
|
|
.feed-item[tabindex="0"]::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
pointer-events: none;
|
border: 2px solid transparent;
|
transition: border-color 0.2s ease;
|
}
|
|
.feed-item[tabindex="0"]:focus::after {
|
border-color: #FF0080;
|
}
|
|
/* Highlighted item */
|
.feed-item.highlighted {
|
box-shadow: 0 0 0 4px #FF0080, 0 8px 16px rgba(0, 0, 0, 0.1);
|
animation: highlight-pulse 2s ease-in-out;
|
}
|
|
@keyframes highlight-pulse {
|
0%, 100% { box-shadow: 0 0 0 4px #FF0080, 0 8px 16px rgba(0, 0, 0, 0.1); }
|
50% { box-shadow: 0 0 0 8px #FF0080, 0 12px 24px rgba(0, 0, 0, 0.15); }
|
}
|
|
/* Error states */
|
.error-state {
|
padding: 2rem;
|
border: 1px solid #FF0080;
|
border-radius: 0.5rem;
|
margin: 2rem 0;
|
text-align: center;
|
}
|
|
.error-state h3 {
|
color: #FF0080;
|
margin-top: 0;
|
}
|
|
.error-state button {
|
margin-top: 1rem;
|
}
|
|
/* Error feedback modal */
|
.error-feedback-modal {
|
padding: 2rem;
|
border: 2px solid #FF0080;
|
border-radius: 0.5rem;
|
max-width: 500px;
|
width: 100%;
|
}
|
|
.error-feedback-modal h2 {
|
margin-top: 0;
|
color: #FF0080;
|
}
|
|
.error-feedback-modal textarea {
|
width: 100%;
|
min-height: 100px;
|
margin: 1rem 0;
|
padding: 0.5rem;
|
border: 1px solid #ccc;
|
border-radius: 0.25rem;
|
}
|
|
.error-feedback-modal .actions {
|
display: flex;
|
justify-content: flex-end;
|
gap: 1rem;
|
}
|
|
.error-feedback-modal button {
|
padding: 0.5rem 1rem;
|
border: 1px solid #ccc;
|
border-radius: 0.25rem;
|
background: #f5f5f5;
|
cursor: pointer;
|
}
|
|
.error-feedback-modal button.primary {
|
background: #FF0080;
|
color: white;
|
border-color: #FF0080;
|
}
|
|
/* Dialog accessibility improvements */
|
dialog::backdrop {
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
|
dialog.filter-dropdown {
|
max-height: 80vh;
|
overflow: auto;
|
}
|
|
dialog.filter-dropdown .close-modal {
|
position: sticky;
|
top: 0;
|
z-index: 1;
|
}
|
|
/**
|
Term Breadcrumbs
|
*/
|
|
.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: 0.9rem;
|
position: relative;
|
top: 0.5em;
|
}
|
|
.common-term {
|
background: var(--base-50);
|
border-radius: var(--innerRadius);
|
}
|
|
.loading-indicator {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 0.5rem;
|
padding: 1rem;
|
color: var(--contrast-100);
|
font-size: 0.9rem;
|
}
|
|
.loading-indicator svg {
|
animation: spin 1s linear infinite;
|
}
|
|
.pagination-info {
|
text-align: center;
|
padding: 0.5rem;
|
font-size: 0.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: 0.5rem;
|
background: var(--base-50);
|
border-radius: 4px;
|
}
|
|
.back-to-parent {
|
display: flex;
|
align-items: center;
|
gap: 0.5rem;
|
border: none;
|
background: none;
|
color: var(--contrast);
|
cursor: pointer;
|
padding: 0.5rem;
|
border-radius: 4px;
|
font-size: var(--small);
|
}
|
|
.back-to-parent:hover {
|
background: var(--base-100);
|
}
|
|
.term-row {
|
display: flex;
|
align-items: center;
|
gap: 0.5rem;
|
width: 100%;
|
padding: 0.25rem 0;
|
}
|
|
.toggle-children {
|
border: none;
|
background: none;
|
padding: 0.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: 0.5rem;
|
margin-bottom: 1rem;
|
padding: 0.5rem;
|
background: var(--base-50);
|
border-radius: 4px;
|
}
|
|
.term-breadcrumb .path {
|
display: flex;
|
align-items: center;
|
gap: 0.25rem;
|
flex-wrap: wrap;
|
}
|
|
.term-breadcrumb button {
|
border: none;
|
background: none;
|
padding: 0.25rem 0.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-term-section {
|
margin-top: 2rem;
|
padding-top: 1rem;
|
border-top: 1px solid var(--base-100);
|
}
|
|
.suggestion-prompt {
|
font-size: var(--small);
|
color: var(--contrast-50);
|
margin-bottom: 1rem;
|
}
|
|
.create-term-form {
|
display: flex;
|
flex-direction: column;
|
gap: 0.5rem;
|
}
|
|
.form-row {
|
display: flex;
|
align-items: center;
|
gap: 0.5rem;
|
}
|
|
.name-row {
|
position: relative;
|
}
|
|
.name-row input {
|
width: 100%;
|
padding: 0.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: 0.5rem;
|
cursor: pointer;
|
}
|
|
dialog[open].gallery-modal {
|
width: calc(100vw - var(--padding) * 2);
|
height: 99vh;
|
background: var(--base);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.gallery-content {
|
position: relative;
|
max-width: 100%;
|
max-height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 2rem;
|
}
|
.gallery-favourite button.favourite {
|
top: unset;
|
bottom: 1rem;
|
right: 1rem;
|
}
|
|
.gallery-image {
|
max-width: 100%;
|
max-height: calc(100vh - 4rem);
|
object-fit: contain;
|
}
|
|
.gallery-close {
|
position: absolute;
|
top: 1rem;
|
right: 1rem;
|
background: none;
|
border: none;
|
color: white;
|
cursor: pointer;
|
padding: 0.5rem;
|
z-index: 10;
|
transition: color 0.3s ease;
|
}
|
|
.gallery-close:hover {
|
color: #FF0080;
|
}
|
|
.gallery-nav {
|
position: absolute;
|
top: 50%;
|
height: 50%;
|
z-index: 5;
|
transform: translateY(-50%);
|
border: none;
|
color: var(--contrast);
|
cursor: pointer;
|
padding: 1rem;
|
transition: color 0.3s ease;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.gallery-nav:hover {
|
background-color: var(--overlay-heavy);
|
}
|
|
.gallery-nav:hover {
|
color: #FF0080;
|
}
|
|
.gallery-prev {
|
left: 1rem;
|
}
|
|
.gallery-next {
|
right: 1rem;
|
}
|
|
.gallery-counter {
|
position: absolute;
|
top: 1rem;
|
left: 1rem;
|
color: white;
|
font-size: 0.875rem;
|
}
|
|
.gallery-content details {
|
position:absolute;
|
bottom: 1rem;
|
left: 2rem;
|
width: calc(100% - 4rem);
|
background-color: var(--overlay-light);
|
padding: 0;
|
}
|
.gallery-content details:hover,
|
.gallery-content details[open] {
|
background-color: var(--overlay-heavy);
|
backdrop-filter: blur(5px);
|
}
|
