| | |
| | | padding: 1rem 0; |
| | | max-width:var(--wide); |
| | | margin: 0 auto; |
| | | |
| | | .remove-term.remove-term { |
| | | width: max-content; |
| | | height: max-content |
| | | } |
| | | } |
| | | .filter-group { |
| | | position: relative; |
| | |
| | | |
| | | .item-grid { |
| | | padding: 0 var(--chip); |
| | | max-width: none; |
| | | max-width: 100%; |
| | | } |
| | | /** FEED ITEM **/ |
| | | .feed.item { |
| | |
| | | |
| | | img { |
| | | object-fit: cover; |
| | | width: 100%; |
| | | height: 100%; |
| | | //opacity: .7; |
| | | //filter: grayscale(.5) sepia(.3); |
| | | &:hover { |
| | |
| | | |
| | | |
| | | .item-grid:has([data-timeline]) { |
| | | grid-template-columns: repeat(1, 1fr); |
| | | grid-template-columns: repeat(auto-fill, minmax(250px, 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; |
| | | } |
| | | } |
| | | } |