| | |
| | | } |
| | | |
| | | .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"] { |
| | |
| | | background: 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 { |
| | |
| | | top: .5rem; |
| | | right: .5rem; |
| | | z-index: 10; |
| | | background: var(--overlay-medium); |
| | | background: rgba(var(--base-rgb),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 { |
| | |
| | | /* 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); |
| | |
| | | border: 1px solid 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 { |
| | |
| | | .type-filter:hover { |
| | | color: var(--action-0); |
| | | border-color: var(--action-0); |
| | | transition: var(--transition-color); |
| | | 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 { |
| | |
| | | max-width: none!important; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: var(--overlay-medium); |
| | | background: rgba(var(--base-rgb),var(--op-4)); |
| | | backdrop-filter: blur(5px); |
| | | -webkit-backdrop-filter: blur(5px); |
| | | display: flex; |
| | |
| | | background: var(--base); |
| | | padding: 2rem; |
| | | border-radius: 1rem; |
| | | box-shadow: var(--shadow); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | text-align: center; |
| | | width: min(400px, 60vw); |
| | | } |
| | |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | background-color: var(--overlay-light); |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | backdrop-filter: blur(5px); |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | z-index: 1; |
| | | padding: .25rem .25rem .25rem 1.1rem; |
| | | } |
| | |
| | | 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 { |
| | |
| | | color: 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 { |
| | |
| | | |
| | | .common-term { |
| | | background: var(--base-50); |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | } |
| | | |
| | | .loading-indicator { |
| | |
| | | cursor: pointer; |
| | | padding: 0.5rem; |
| | | border-radius: 4px; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .back-to-parent:hover { |
| | |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | color: var(--contrast); |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .term-breadcrumb button:hover { |
| | |
| | | } |
| | | |
| | | .suggestion-prompt { |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | color: var(--contrast-50); |
| | | margin-bottom: 1rem; |
| | | } |
| | |
| | | } |
| | | |
| | | .parent-row { |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .parent-row label { |
| | |
| | | align-items: center; |
| | | } |
| | | .gallery-nav:hover { |
| | | background-color: var(--overlay-heavy); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | } |
| | | |
| | | .gallery-nav:hover { |
| | |
| | | bottom: 1rem; |
| | | left: 2rem; |
| | | width: calc(100% - 4rem); |
| | | background-color: var(--overlay-light); |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | padding: 0; |
| | | } |
| | | .gallery-content details:hover, |
| | | .gallery-content details[open] { |
| | | background-color: var(--overlay-heavy); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | backdrop-filter: blur(5px); |
| | | } |