| | |
| | | } |
| | | |
| | | .feed-block > *:not(.feed-grid, h2) { |
| | | max-width: var(--alignWide); |
| | | max-width: var(--wide); |
| | | margin: 1rem var(--mr) 1rem var(--ml); |
| | | } |
| | | .feed-block > h2 { |
| | | max-width: var(--maxWidth); |
| | | max-width: var(--content); |
| | | } |
| | | |
| | | .feed-block[data-loading="true"] { |
| | |
| | | position: relative; |
| | | border-radius: 0.5rem; |
| | | overflow: hidden; |
| | | background: var(--base-50); |
| | | background: rgb(var(--base-50)); |
| | | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| | | opacity: 0; |
| | | transition: opacity var(--transition-base) var(--delay); |
| | | transition: opacity var(--trans-base) var(--delay); |
| | | height: fit-content; |
| | | padding: 0; |
| | | } |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | transition: transform var(--timing) var(--function); |
| | | transition: transform var(--trans-t) var(--trans-fn); |
| | | } |
| | | |
| | | .artist-tattoos a:hover img, |
| | |
| | | margin: 0!important; |
| | | font-size: 1.1rem; |
| | | font-family: var(--body); |
| | | font-weight: var(--bWeight); |
| | | font-weight: var(--fw-b); |
| | | text-align: center; |
| | | } |
| | | .item-info span { |
| | |
| | | } |
| | | |
| | | .label a:hover { |
| | | color: var(--action-0); |
| | | color: rgb(var(--action-0)); |
| | | } |
| | | |
| | | /* Favorite Button */ |
| | |
| | | top: .5rem; |
| | | right: .5rem; |
| | | z-index: 10; |
| | | background: var(--overlay-medium); |
| | | background: rgba(var(--base),var(--op-4)); |
| | | border-radius: 50%; |
| | | box-shadow: var(--subtle); |
| | | border: none; |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | backdrop-filter: blur(5px); |
| | | transition: all var(--transition-base); |
| | | transition: all var(--trans-base); |
| | | } |
| | | |
| | | button.favourite:hover { |
| | | transform: scale(1.1); |
| | | color: var(--action-0); |
| | | background: var(--base); |
| | | color: rgb(var(--action-0)); |
| | | background: rgb(var(--base)); |
| | | box-shadow: 0 4px 8px rgba(0,0,0,0.15); |
| | | } |
| | | |
| | |
| | | /* position: relative;*/ |
| | | /* justify-content: flex-start;*/ |
| | | /* gap: .5rem;*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | } |
| | | .feed-filters details[open] summary { |
| | | background-color: var(--base-50); |
| | | background-color: rgb(var(--base-50)); |
| | | } |
| | | .feed-filters summary:after { |
| | | position:absolute; |
| | |
| | | width: fit-content; |
| | | height: fit-content; |
| | | cursor: pointer; |
| | | border: 1px solid var(--base-200); |
| | | border: 1px solid rgb(var(--base-200)); |
| | | border-radius: 4px; |
| | | font-size: .875rem; |
| | | transition: border-color var(--transition-base); |
| | | transition: border-color var(--trans-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); |
| | | color: rgb(var(--action-0)); |
| | | border-color: rgb(var(--action-0)); |
| | | transition: var(--trans-color); |
| | | } |
| | | .feed-filters .type-filter > label { |
| | | flex-direction: column; |
| | |
| | | top: .5rem; |
| | | right: 4rem; |
| | | opacity: 0; |
| | | transition: transform var(--timing) var(--function); |
| | | transition: transform var(--trans-t) var(--trans-fn); |
| | | transition-property: max-width, transform; |
| | | } |
| | | .feed-filters input:checked + label .label { |
| | |
| | | background-color: transparent; |
| | | } |
| | | .has-filters.filters { |
| | | background-color: var(--base-50); |
| | | background-color: rgb(var(--base-50)); |
| | | } |
| | | .filter-group { |
| | | display: flex; |
| | |
| | | max-width: none!important; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: var(--overlay-medium); |
| | | background: rgba(var(--base),var(--op-4)); |
| | | backdrop-filter: blur(5px); |
| | | -webkit-backdrop-filter: blur(5px); |
| | | display: flex; |
| | |
| | | transition: opacity 0.3s ease, visibility 0.3s ease; |
| | | } |
| | | .feed-overlay-content { |
| | | background: var(--base); |
| | | background: rgb(var(--base)); |
| | | padding: 2rem; |
| | | border-radius: 1rem; |
| | | box-shadow: var(--shadow); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | text-align: center; |
| | | width: min(400px, 60vw); |
| | | } |
| | |
| | | width: 3em; |
| | | height: 3em; |
| | | } |
| | | .loading .loading-message .icon svg { |
| | | width: 100%; |
| | | height: 100%; |
| | | margin-right: 1rem; |
| | | .loading .loading-message .icon { |
| | | animation: dance 2s ease-in-out infinite; |
| | | transition: color 0.3s ease; |
| | | } |
| | |
| | | } |
| | | |
| | | .loading .loading-dots { |
| | | color: var(--action-0); |
| | | color: rgb(var(--action-0)); |
| | | width: 4px; |
| | | aspect-ratio: 1; |
| | | border-radius: 50%; |
| | |
| | | grid-column-end: 2; |
| | | text-align: center; |
| | | padding: 2rem; |
| | | background: var(--base); |
| | | background: rgb(var(--base)); |
| | | border-radius: 1rem; |
| | | margin: 0 auto; |
| | | max-width: 600px; |
| | |
| | | font-family: var(--heading); |
| | | font-size: clamp(1.5rem, 3vw, 2.5rem); |
| | | margin: 0 0 2rem 0; |
| | | color: var(--action-0); |
| | | color: rgb(var(--action-0)); |
| | | } |
| | | |
| | | .feed-empty-state p { |
| | |
| | | } |
| | | |
| | | .feed-empty-state p:last-child { |
| | | color: var(--action-0); |
| | | color: rgb(var(--action-0)); |
| | | margin-top: 2rem; |
| | | } |
| | | |
| | |
| | | box-shadow: none; |
| | | } |
| | | 50% { |
| | | box-shadow: 0 0 0 4px var(--action-0); |
| | | box-shadow: 0 0 0 4px rgb(var(--action-0)); |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | .artist-tattoos a:has(img) { |
| | | overflow: hidden; |
| | | background-color: var(--base-100); |
| | | background-color: rgb(var(--base-100)); |
| | | } |
| | | .artist-tattoos a:not(.feed-image) img{ |
| | | width: 100%; |
| | |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | background-color: var(--overlay-light); |
| | | background-color: rgba(var(--base),var(--op-3)); |
| | | backdrop-filter: blur(5px); |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | z-index: 1; |
| | | padding: .25rem .25rem .25rem 1.1rem; |
| | | } |
| | |
| | | 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; |
| | | -webkit-text-stroke: 1px rgb(var(--contrast)); |
| | | --g: conic-gradient(rgb(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; |
| | |
| | | opacity: 1; |
| | | transform: scaleY(1); |
| | | transform-origin: bottom; |
| | | transition: opacity var(--transition-base), |
| | | transform var(--transition-base); |
| | | transition: opacity var(--trans-base), |
| | | transform var(--trans-base); |
| | | } |
| | | |
| | | .loading .changing .loading-message p { |
| | |
| | | align-items: center; |
| | | gap: 0.5rem; |
| | | padding: 0.75rem 1.5rem; |
| | | background: var(--base-200); |
| | | color: var(--contrast-200); |
| | | background: rgb(var(--base-200)); |
| | | color: rgb(var(--contrast-200)); |
| | | border: none; |
| | | border-radius: 4px; |
| | | font-size: var(--medium); |
| | | font-size: var(--txt-medium); |
| | | cursor: pointer; |
| | | transition: all var(--transition-base); |
| | | transition: all var(--trans-base); |
| | | } |
| | | .load-more[hidden]{ |
| | | opacity: 0; |
| | | transition: all var(--transition-base); |
| | | transition: all var(--trans-base); |
| | | } |
| | | |
| | | .load-more:hover { |
| | | background: var(--action-0); |
| | | background: rgb(var(--action-0)); |
| | | transform: translateY(-2px); |
| | | } |
| | | |
| | | .load-more:focus-visible { |
| | | outline: 2px solid var(--action-0); |
| | | outline: 2px solid rgb(var(--action-0)); |
| | | outline-offset: 2px; |
| | | } |
| | | |
| | |
| | | position: relative; |
| | | text-align: center; |
| | | margin: 1rem 0; |
| | | border-bottom: 1px solid var(--base-200); |
| | | border-bottom: 1px solid rgb(var(--base-200)); |
| | | } |
| | | |
| | | .term-divider span { |
| | | background: var(--base); |
| | | background: rgb(var(--base)); |
| | | padding: 0 1rem; |
| | | color: var(--contrast); |
| | | color: rgb(var(--contrast)); |
| | | font-size: 0.9rem; |
| | | position: relative; |
| | | top: 0.5em; |
| | | } |
| | | |
| | | .common-term { |
| | | background: var(--base-50); |
| | | border-radius: var(--innerRadius); |
| | | background: rgb(var(--base-50)); |
| | | border-radius: var(--radius); |
| | | } |
| | | |
| | | .loading-indicator { |
| | |
| | | justify-content: center; |
| | | gap: 0.5rem; |
| | | padding: 1rem; |
| | | color: var(--contrast-100); |
| | | color: rgb(var(--contrast-100)); |
| | | font-size: 0.9rem; |
| | | } |
| | | |
| | | .loading-indicator svg { |
| | | .loading-indicator .icon { |
| | | animation: spin 1s linear infinite; |
| | | } |
| | | |
| | |
| | | text-align: center; |
| | | padding: 0.5rem; |
| | | font-size: 0.9rem; |
| | | color: var(--contrast-100); |
| | | border-top: 1px solid var(--base-100); |
| | | color: rgb(var(--contrast-100)); |
| | | border-top: 1px solid rgb(var(--base-100)); |
| | | } |
| | | |
| | | @keyframes spin { |
| | |
| | | .term-breadcrumb { |
| | | margin-bottom: 1rem; |
| | | padding: 0.5rem; |
| | | background: var(--base-50); |
| | | background: rgb(var(--base-50)); |
| | | border-radius: 4px; |
| | | } |
| | | |
| | |
| | | gap: 0.5rem; |
| | | border: none; |
| | | background: none; |
| | | color: var(--contrast); |
| | | color: rgb(var(--contrast)); |
| | | cursor: pointer; |
| | | padding: 0.5rem; |
| | | border-radius: 4px; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .back-to-parent:hover { |
| | | background: var(--base-100); |
| | | background: rgb(var(--base-100)); |
| | | } |
| | | |
| | | .term-row { |
| | |
| | | background: none; |
| | | padding: 0.25rem; |
| | | cursor: pointer; |
| | | color: var(--contrast); |
| | | color: rgb(var(--contrast)); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | |
| | | } |
| | | |
| | | .toggle-children:hover { |
| | | background: var(--base-50); |
| | | background: rgb(var(--base-50)); |
| | | } |
| | | |
| | | .loading-indicator { |
| | |
| | | .loading-indicator .loading { |
| | | width: 16px; |
| | | height: 16px; |
| | | border: 2px solid var(--base-100); |
| | | border-top-color: var(--contrast); |
| | | border: 2px solid rgb(var(--base-100)); |
| | | border-top-color: rgb(var(--contrast)); |
| | | border-radius: 50%; |
| | | animation: spin 1s linear infinite; |
| | | } |
| | |
| | | gap: 0.5rem; |
| | | margin-bottom: 1rem; |
| | | padding: 0.5rem; |
| | | background: var(--base-50); |
| | | background: rgb(var(--base-50)); |
| | | border-radius: 4px; |
| | | } |
| | | |
| | |
| | | padding: 0.25rem 0.5rem; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | color: var(--contrast); |
| | | font-size: var(--small); |
| | | color: rgb(var(--contrast)); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .term-breadcrumb button:hover { |
| | | background: var(--base-100); |
| | | background: rgb(var(--base-100)); |
| | | } |
| | | |
| | | .path-separator { |
| | | color: var(--contrast-50); |
| | | color: rgb(var(--contrast-50)); |
| | | } |
| | | |
| | | .path-level { |
| | |
| | | .create-term-section { |
| | | margin-top: 2rem; |
| | | padding-top: 1rem; |
| | | border-top: 1px solid var(--base-100); |
| | | border-top: 1px solid rgb(var(--base-100)); |
| | | } |
| | | |
| | | .suggestion-prompt { |
| | | font-size: var(--small); |
| | | color: var(--contrast-50); |
| | | font-size: var(--txt-small); |
| | | color: rgb(var(--contrast-50)); |
| | | margin-bottom: 1rem; |
| | | } |
| | | |
| | |
| | | .name-row input { |
| | | width: 100%; |
| | | padding: 0.5rem; |
| | | border: 2px solid var(--base-100); |
| | | border: 2px solid rgb(var(--base-100)); |
| | | border-radius: 4px; |
| | | background: var(--base); |
| | | color: var(--contrast); |
| | | background: rgb(var(--base)); |
| | | color: rgb(var(--contrast)); |
| | | } |
| | | |
| | | .name-row input:focus { |
| | | border-color: var(--action-0); |
| | | border-color: rgb(var(--action-0)); |
| | | outline: none; |
| | | } |
| | | |
| | | .parent-row { |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .parent-row label { |
| | |
| | | dialog[open].gallery-modal { |
| | | width: calc(100vw - var(--padding) * 2); |
| | | height: 99vh; |
| | | background: var(--base); |
| | | background: rgb(var(--base)); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | |
| | | z-index: 5; |
| | | transform: translateY(-50%); |
| | | border: none; |
| | | color: var(--contrast); |
| | | color: rgb(var(--contrast)); |
| | | cursor: pointer; |
| | | padding: 1rem; |
| | | transition: color 0.3s ease; |
| | |
| | | align-items: center; |
| | | } |
| | | .gallery-nav:hover { |
| | | background-color: var(--overlay-heavy); |
| | | background-color: rgba(var(--base),var(--op-6)); |
| | | } |
| | | |
| | | .gallery-nav:hover { |
| | |
| | | bottom: 1rem; |
| | | left: 2rem; |
| | | width: calc(100% - 4rem); |
| | | background-color: var(--overlay-light); |
| | | background-color: rgba(var(--base),var(--op-3)); |
| | | padding: 0; |
| | | } |
| | | .gallery-content details:hover, |
| | | .gallery-content details[open] { |
| | | background-color: var(--overlay-heavy); |
| | | background-color: rgba(var(--base),var(--op-6)); |
| | | backdrop-filter: blur(5px); |
| | | } |