//.feed-block {
|
// max-width: var(--full);
|
// margin: 0 auto;
|
//
|
// &:target {
|
// scroll-snap-margin-top: 5rem;
|
// scroll-margin-top: 5rem;
|
// outline: 0;
|
// border-radius: 0;
|
// padding: 0;
|
//
|
// .feed-item {
|
// outline: double var(--pink-0);
|
// }
|
// }
|
//}
|
//
|
//.loading .feed-block {
|
// opacity: .7;
|
//}
|
//
|
//.label {
|
// display: flex;
|
// align-items: center;
|
// gap: .25rem;
|
// font-size: .9rem;
|
// a:hover {
|
// color: var(--pink-0);
|
// }
|
//}
|
//
|
///** Filters Form **/
|
//.feed-filters {
|
// margin: 2rem 0;
|
// position: sticky;
|
// top: 3rem;
|
// z-index: 15;
|
// background: rgba(var(--base-rgb),var(--op-6));
|
// padding: .25rem 3rem;
|
// details[open] summary {
|
// background-color: var(--overlay);
|
// }
|
// summary {
|
// justify-content: flex-start;
|
//
|
// > * {
|
// order: 3;
|
// }
|
// .label {
|
// order: 1;
|
// }
|
// .filter-label {
|
// order: 2;
|
// }
|
// &::after {
|
// order: 4;
|
// }
|
// #favourites + label {
|
// margin-left: auto;
|
// }
|
// #favourites + label:hover,
|
// #favourites:checked + label {
|
// border-color: var(--pink-0);
|
// background-color: var(--pink-0);
|
// color: var(--white);
|
//
|
// }
|
// #favourites:checked + label {
|
// animation: pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
// }
|
// }
|
//
|
// details[open],
|
// summary:hover {
|
// background-color: rgba(var(--base-rgb),var(--op-6));
|
// }
|
//
|
// &:has(#favourites) {
|
// summary::after {
|
// margin-left: 1rem;
|
// }
|
// }
|
//}
|
//summary > * {
|
// order: 3;
|
//}
|
//summary .label {
|
// order: 1;
|
//}
|
//.filter-label {
|
// display: inline-block;
|
// vertical-align: middle;
|
// height: 1.3em;
|
// order: 2;
|
// margin: 0;
|
// padding: 0;
|
//
|
// li {
|
// list-style: none;
|
// height: 0;
|
// overflow: hidden;
|
// &.active {
|
// height: 100%;
|
// }
|
// }
|
//}
|
//.filter-group {
|
// display: flex;
|
// align-items: center;
|
// gap: .5rem;
|
// flex-wrap: wrap;
|
// label {
|
// font-weight: 100;
|
// }
|
// &:has(.order-by) {
|
// justify-content: space-between;
|
// }
|
// .order-by,
|
// .order-direction {
|
// display: flex;
|
// flex-wrap: wrap;
|
// gap: .5rem;
|
// flex: 1;
|
// justify-content: flex-start;
|
// .label {
|
// width: 100%;
|
// }
|
//
|
// label:has(.label) {
|
// padding: 0 .35rem;
|
// gap: .5rem;
|
// .label {
|
// font-size: 1rem;
|
// }
|
// }
|
// }
|
//}
|
//.filter-group >.label {
|
// width: 100%;
|
//}
|
//
|
///**
|
//Feed Grid
|
// */
|
//.feed-grid {
|
// display: grid;
|
// grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
// gap: .5rem;
|
// margin-bottom: 2rem;
|
// padding: 0 4rem;
|
// --delay: 0s;
|
// --increase: .1s;
|
//}
|
//.feed-empty-state {
|
// grid-column: 1/-1;
|
// text-align: center;
|
// padding: 2rem;
|
// background: var(--base-100);
|
// border-radius: var(--radius);
|
// margin: 0 auto;
|
// max-width: 600px;
|
//}
|
///**
|
//Placeholders
|
// */
|
//.placeholder {
|
// aspect-ratio: 1;
|
// background: var(--base);
|
// border: 1rem solid var(--base-50);
|
// border-radius: 1rem;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
//
|
// .icon {
|
// --w: 50%;
|
// color: var(--base-200);
|
// animation: dance 2.5s ease-in-out infinite;
|
//
|
// }
|
//}
|
//
|
///**
|
//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(--trans-base) var(--delay);
|
// height: fit-content;
|
// padding: 0;
|
//
|
// img {
|
// opacity: .7;
|
// filter: grayscale(.5) sepia(.3) blur(7px);
|
// }
|
// &[data-loaded=true] {
|
// img {
|
// opacity: 1;
|
// filter: none;
|
// }
|
// }
|
//
|
// a {
|
// &::before,
|
// &::after {
|
// display: none;
|
// }
|
// }
|
// details a {
|
// font-size: clamp(1rem, 0.9306rem + 0.2222vw, 1.125rem);
|
// }
|
//
|
// &[data-loaded] {
|
// opacity: 1;
|
// + [data-loaded] {
|
// --delay: var(--delay) + var(--increase);
|
// }
|
// }
|
//
|
// &.highlighted {
|
// box-shadow: 0 0 0 4px #FF0080, 0 8px 16px rgba(0, 0, 0, 0.1);
|
// animation: highlight-puls 2s ease-in-out;
|
// }
|
// &[open],
|
// &:hover {
|
// .handle {
|
// background-color: var(--overlay-pink-medium);
|
// backdrop-filter: blur(5px);
|
// }
|
// }
|
// summary {
|
// width: calc(100% - 1rem);
|
// height: 100%;
|
// aspect-ratio: 1;
|
// .handle {
|
// position: absolute;
|
// bottom: 0;
|
// left: 0;
|
// right: 0;
|
// background-color: rgba(var(--base-rgb),var(--op-3));
|
// backdrop-filter: blur(5px);
|
// border-radius: var(--radius);
|
// z-index: 1;
|
// padding: .25rem .25rem .25rem 1.1rem;
|
// }
|
// &::after {
|
// z-index: 11;
|
// position: absolute;
|
// bottom: .35rem;
|
// right: .7rem;
|
// width: 1.5rem;
|
// height: 1.5rem;
|
// cursor: pointer;
|
// }
|
// }
|
//
|
// label {
|
// font-weight: normal;
|
// text-transform: none;
|
// .icon {
|
// --w: 1.5em;
|
// }
|
// }
|
//}
|
///**
|
//Load More Button
|
// */
|
//.load-more {
|
// opacity: 1;
|
// margin: 1rem auto;
|
// width: 66.666%;
|
// display: flex;
|
// align-items: center;
|
// gap: .5rem;
|
// padding: .75rem 1.5rem;
|
// background: var(--base);
|
// color: var(--contrast);
|
// border-radius: 4px;
|
// font-size: var(--txt-medium);
|
// transition: all var(--trans-base);
|
// border: 2px solid transparent;
|
// &[hidden] {
|
// opacity: 0;
|
// transition: all var(--trans-base);
|
// }
|
// &:hover {
|
// background: var(--pink-50);
|
// border-color: var(--contrast);
|
// color: var(--white);
|
// }
|
//}
|
///**
|
//favourite button
|
// */
|
//button.favourite {
|
// position: absolute;
|
// top: .5rem;
|
// right: .5rem;
|
// z-index: 10;
|
// background: rgba(var(--base-rgb),var(--op-4));
|
// border-radius: 50%;
|
// box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle);
|
// border: none;
|
// width: 2rem;
|
// height: 2rem;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
// backdrop-filter: blur(5px);
|
// transition: all var(--trans-base);
|
//
|
// &:hover {
|
// transform: scale(1.1);
|
// color: var(--pink-0);
|
// background: var(--base);
|
// box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
// }
|
//
|
// &.favourited {
|
// animation: pop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
// }
|
//}
|
//
|
//
|
///** Images **/
|
//.feed-image {
|
// display: block;
|
// aspect-ratio: 1;
|
// overflow: hidden;
|
// width: 100%;
|
// height: 100%;
|
//}
|
//.feed-images {
|
// width: 100%;
|
// height: 100%;
|
// &.multi {
|
// display :grid;
|
// grid-template-columns: repeat(3, 1fr);
|
// grid-auto-rows: 1fr;
|
// gap: 4px;
|
//
|
// > a {
|
// width: 100%;
|
// height: 100%;
|
// aspect-ratio: 1;
|
// }
|
// .feed-image {
|
// grid-row: span 2;
|
// grid-column: span 2;
|
// }
|
// }
|
// img {
|
// width: 100%;
|
// height: 100%;
|
// object-fit: cover;
|
// transition: transform var(--trans-t) var(--trans-fn);
|
// }
|
// a:hover img {
|
// transform: scale(1.05);
|
// }
|
//}
|
//
|
//.feed-item {
|
// &:nth-of-type(4n+2) .multi .feed-image {
|
// grid-column: 2 / span 2;
|
// grid-row: 1 / span 2;
|
// }
|
// &:nth-of-type(4n+3) .multi .feed-image {
|
// grid-row: 2 / span 2;
|
// grid-column: 1 / span 2;
|
// }
|
// &:nth-of-type(4n+4) .multi .feed-image {
|
// grid-column: 2 / span 2;
|
// grid-row: 2 / span 2;
|
// }
|
//}
|
//
|
///** Item Information **/
|
//.item-info {
|
// padding: .25rem;
|
// border-left: 1px solid var(--base-200);
|
// >div + div {
|
// margin-top: .5em;
|
// position: relative;
|
//
|
// &::before {
|
// content: '';
|
// display: block;
|
// position: absolute;
|
// top: -.3em;
|
// left: -.25rem;
|
// width: 66.6%;
|
// border-bottom: 1px solid var(--base-200);
|
// }
|
// }
|
// h3 {
|
// margin: 0 0 .5em 0!important;
|
// font-size: 1.1rem;
|
// font-family: var(--body);
|
// font-weight: var(--fw-b);
|
// }
|
// span {
|
// text-transform: uppercase;
|
// display: flex;
|
// align-items: center;
|
// }
|
// .icon {
|
// --w: 1.1em;
|
// margin-right: .5em;
|
// display: inline-block;
|
// vertical-align: middle;
|
// }
|
//}
|
//.item-list {
|
// ul {
|
// margin: 0;
|
// padding: .5em 0;
|
// display: flex;
|
// flex-wrap: wrap;
|
// gap: .5rem;
|
// li {
|
// list-style: none;
|
// }
|
// }
|
// a {
|
// background-color: var(--pink-0);
|
// border: 1px solid transparent;
|
// border-radius: 4px;
|
// color: var(--light-0);
|
// padding: .25em;
|
// line-height: .8;
|
// &:visited {
|
// background-color: var(--pink-100);
|
// color: var(--white);
|
// }
|
// &:visited:hover,
|
// &:visited:focus,
|
// &:hover,
|
// &:focus {
|
// background-color: transparent;
|
// border-color: var(--contrast);
|
// color: var(--contrast);
|
// }
|
// }
|
//}
|
///**
|
//Loading
|
// */
|
//.loading {
|
// opacity: .7;
|
//}
|
//
|
//.loading-overlay {
|
// position: fixed;
|
// top: 0;
|
// left: 0;
|
// right: 0;
|
// bottom: 0;
|
// background-color: rgba(var(--base-rgb),var(--op-4));
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// transition: opacity 0.3s ease, visibility 0.3s ease;
|
// z-index: 9999;
|
// opacity: 0;
|
// visibility: hidden;
|
//}
|
//.loading .loading-overlay {
|
// opacity: 1;
|
// visibility: visible;
|
//
|
// &::after {
|
// content: '';
|
// position: absolute;
|
// z-index: -1;
|
// inset: 0;
|
// background: linear-gradient(
|
// 90deg,
|
// var(--shimmer)
|
// );
|
// animation: shimmer 3s ease-in-out infinite;
|
// }
|
//
|
// .wrapper {
|
// background-color: rgba(var(--base-rgb),var(--op-6));
|
// padding: 2rem;
|
// border-radius: var(--radius);
|
// text-align: center;
|
// max-width: 90%;
|
// width: 400px;
|
// height: 300px;
|
// z-index: 5;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
// position: relative;
|
//
|
// .spinner {
|
// --h: 150px;
|
// --w: calc(var(--h) * 2);
|
// border-top: 5px solid var(--pink-0);
|
// border-radius: 50%;
|
// position: absolute;
|
// width: var(--w);
|
// height: var(--w);
|
// top: calc(50% - var(--h));
|
// left: calc(50% - var(--h));
|
// opacity: .5;
|
// z-index: 0;
|
// animation: spin 1s var(--trans-t) infinite;
|
// }
|
// div.icon {
|
// height: 50px;
|
// width: 50px;
|
//
|
// .icon {
|
// --w: 100%;
|
// svg {
|
// animation: dance 2s ease-in-out infinite;
|
// transition: color 0.3s ease;
|
// }
|
// }
|
// }
|
// .status {
|
// height: 200px;
|
// width: 100%;
|
// z-index: 5;
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
//
|
// h3 {
|
// margin: 1.5rem 0 .25rem!important;
|
// color: var(--contrast-200);
|
// }
|
// .message {
|
// margin: 0;
|
// max-width: 275px;
|
// color: var(--contrast-100);
|
// font-size: var(--txt-x-small);
|
// animation: flicker 2s infinite;
|
// }
|
// }
|
// }
|
//}
|
//
|
//
|
///* Animations */
|
//@keyframes highlight {
|
// 0%, 100% {
|
// box-shadow: none;
|
// }
|
// 50% {
|
// box-shadow: 0 0 0 4px var(--pink-0);
|
// }
|
//}
|
//
|
//@keyframes 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 }
|
//}
|
//@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); }
|
//}
|
//
|
//@keyframes spin {
|
// to { transform: rotate(360deg); }
|
//}
|
//
|
//@keyframes shimmer {
|
// 0% { transform: translateX(-100%); }
|
// 50%, 100% { transform: translateX(100%); }
|
//}
|
//@keyframes dance {
|
// 0%, 100% { transform: rotate(-5deg) scale(1);}
|
// 50% { transform: rotate(5deg) scale(1.1); }
|
//}
|
//@keyframes flicker {
|
// 0% { opacity: 0.6; }
|
// 50% { opacity: 1; }
|
// 100% { opacity: 0.6; }
|
//}
|
//
|
//
|
///**
|
//Accessibility
|
// */
|
//
|
///* Keyboard navigable feed items */
|
//.feed-item[tabindex="0"] {
|
// 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;
|
//}
|
//
|
//
|
//.feed-block .item {
|
// summary {
|
// a {
|
// background-color: var(--action-0);
|
// display: flex;
|
// gap: .25rem;
|
// flex-wrap: nowrap;
|
// aspect-ratio: 1;
|
// position: relative;
|
// }
|
// img {
|
// width: 50%;
|
// height: 100%;
|
// object-fit: cover;
|
// }
|
//
|
// }
|
//}
|
|
|
.feed-block {
|
grid-column: full;
|
.filters {
|
padding: 1rem 0;
|
max-width:var(--wide);
|
margin: 0 auto;
|
|
.remove-term.remove-term {
|
width: max-content;
|
height: max-content
|
}
|
}
|
.filter-group {
|
position: relative;
|
padding: 2rem 0;
|
.label {
|
position: absolute;
|
left: 0;
|
}
|
> .label {
|
top: 0;
|
}
|
[type=radio] {
|
position:absolute;
|
left: var(--offScreen);
|
}
|
button, label {
|
position: relative;
|
padding: .5rem;
|
height: max-content;
|
&:hover {
|
color: var(--action-contrast);
|
}
|
}
|
button:hover .label,
|
:checked + label .label,
|
label:hover .label {
|
opacity: 1;
|
visibility: visible;
|
}
|
&:has(label:hover) :checked + label .label,
|
button .label,
|
label .label {
|
--height: max-content;
|
opacity: 0;
|
visibility: hidden;
|
bottom: -2rem;
|
width: max-content;
|
white-space: nowrap;
|
font-weight: var(--fw-b);
|
}
|
|
|
}
|
h3 {
|
margin: 0 0 .25rem;
|
font-size: var(--medium);
|
}
|
}
|
/** PLACEHOLDERS **/
|
.placeholder {
|
aspect-ratio: 1;
|
background: var(--base);
|
border: 1rem solid var(--base-50);
|
border-radius: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
i.icon {
|
--w: 50%;
|
color: var(--base-200);
|
animation: dance 2.5s ease-in-out infinite;
|
}
|
}
|
|
.item-grid {
|
padding: 0 var(--chip);
|
max-width: none;
|
}
|
/** FEED ITEM **/
|
.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);
|
height: fit-content;
|
padding: 0;
|
details {
|
z-index: var(--z-2);
|
width: 100%;
|
position: relative;
|
padding: 0;
|
summary {
|
position:absolute;
|
top: -3rem;
|
left:0;
|
width: 100%;
|
background-color: rgba(var(--base-rgb),var(--op-2));
|
backdrop-filter: blur(5px);
|
&:hover {
|
background-color: rgba(var(--action-rgb),var(--op-45));
|
}
|
}
|
&[open] {
|
padding: .25rem .5rem;
|
summary .icon {
|
opacity: 0;
|
}
|
}
|
|
}
|
|
img {
|
object-fit: cover;
|
width: 100%;
|
height: 100%;
|
//opacity: .7;
|
//filter: grayscale(.5) sepia(.3);
|
&:hover {
|
opacity: .8;
|
}
|
}
|
|
&[data-timeline] {
|
.images {
|
aspect-ratio: 3/2;
|
padding: 0 0 1rem;
|
span {
|
width: 50%;
|
position: absolute;
|
background-color: var(--action-0);
|
color: var(--action-contrast);
|
padding: .25rem .5rem;
|
&:first-of-type {
|
bottom: 0;
|
right: 50%;
|
text-align: right;
|
}
|
&:last-of-type {
|
top: 0;
|
left: 50%;
|
}
|
}
|
> a {
|
position: relative;
|
display: flex;
|
flex-wrap: nowrap;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
img {
|
width: 50%;
|
object-fit: cover;
|
height: 100%;
|
&:first-of-type {
|
border-right: 1px solid var(--action-0);
|
}
|
}
|
}
|
|
|
a {
|
&::before,
|
&::after {
|
display: none;
|
}
|
}
|
|
label {
|
font-weight: normal;
|
text-transform: none;
|
.icon {
|
--w: 1.5em;
|
}
|
}
|
}
|
|
|
.item-grid:has([data-timeline]) {
|
grid-template-columns: repeat(1, 1fr);
|
}
|
|
@media (min-width:768px) {
|
.item-grid:has([data-timeline]) {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
.items-wrap [type=radio],
|
.items-wrap [type=checkbox] {
|
position: absolute;
|
opacity: 0;
|
left: -200vw;
|
}
|
|
.items-wrap [type=radio] + label,
|
.items-wrap [type=checkbox] + label {
|
position: relative;
|
cursor: pointer;
|
}
|
|
.items-wrap [type=radio] + label:hover,
|
.items-wrap [type=checkbox] + label:hover {
|
color: var(--action-0);
|
}
|
|
.items-wrap [type=radio] + label::before,
|
.items-wrap [type=checkbox] + label::before,
|
.items-wrap [type=radio] + label::after,
|
.items-wrap [type=checkbox] + label::after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
}
|
|
.items-wrap [type=radio] + label::after,
|
.items-wrap [type=checkbox] + label::after {
|
left: 5px;
|
transform: translateY(-70%) rotate(45deg);
|
width: 5px;
|
height: 10px;
|
border: solid var(--light-0);
|
border-width: 0 2px 2px 0;
|
display: none;
|
}
|
|
.items-wrap [type=radio] + label::before,
|
.items-wrap [type=checkbox] + label::before {
|
left: 0;
|
transform: translateY(-50%);
|
width: 1rem;
|
height: 1rem;
|
border: 2px solid var(--contrast-200);
|
background-color: var(--base);
|
border-radius: var(--radius);
|
}
|
|
.items-wrap [type=radio]:hover + label::before,
|
.items-wrap [type=checkbox]:hover + label::before {
|
border-color: var(--action-200);
|
}
|
|
.items-wrap [type=radio]:checked + label::before,
|
.items-wrap [type=checkbox]:checked + label::before{
|
background-color: var(--action-0);
|
border-color: var(--action-100);
|
}
|
|
.items-wrap [type=radio]:checked + label::before {
|
border-radius: 50%;
|
}
|
|
.items-wrap [type=checkbox]:checked + label::after {
|
display: block;
|
left: 5px;
|
top: 50%;
|
transform: translateY(-70%) rotate(45deg);
|
width: .35rem;
|
height: .66rem;
|
border: solid var(--light-0);
|
border-width: 0 2px 2px 0;
|
}
|
|
.items-wrap :disabled + label {
|
cursor: not-allowed;
|
background-color: var(--base-50);
|
color: var(--base-200);
|
border-color: var(--base-200);
|
}
|
|
.items-wrap :disabled + label:hover {
|
background-color: var(--base-50);
|
color: var(--base-200);
|
border-color: var(--base-200);
|
}
|
|
.items-wrap :disabled + label::before {
|
border-color: var(--base-200);
|
}
|
|
#jvb-selector .items-wrap [type=radio] + label,
|
#jvb-selector .items-wrap [type=checkbox] + label{
|
flex: 1;
|
padding-left: 2rem!important;
|
transform-origin: top center;
|
will-change: transform;
|
}
|
|
.feed-block + footer {
|
grid-column: full;
|
padding: 0!important;
|
margin: 0;
|
background-color: var(--base-50);
|
z-index: 0;
|
display: flex;
|
justify-content: flex-end;
|
button {
|
width: max-content;
|
margin-left: auto;
|
padding: .35rem .25rem;
|
--w: 1.3em!important;
|
flex-wrap: nowrap;
|
justify-content:flex-start;
|
transition: var(--trans-size);
|
font-size: var(--txt-x-small);
|
min-height: 0;
|
span {
|
display: none;
|
white-space: nowrap;
|
}
|
&:focus span,
|
&:hover span {
|
display: block;
|
}
|
}
|
}
|
