/*!********************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/feed/style.scss ***! \********************************************************************************************************************************************************************************************************************************************/ /***** START FRESH *****/ .feed-block { grid-column: full; } .feed-block .placeholder { aspect-ratio: 1; background: rgb(var(--base)); border: 1rem solid rgb(var(--base-50)); border-radius: 1rem; display: flex; justify-content: center; align-items: center; --w: 50%; color: rgb(var(--base-200)); } .feed-block .placeholder i.icon { animation: dance 2.5s ease-in-out infinite; } .feed-block .item-grid { max-width: var(--full); } .feed-block .item-grid:has([data-timeline]) { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .feed-block .item { overflow: hidden; background: rgb(var(--base-50)); box-shadow: rgba(var(--base), var(--op-2)) var(--shdw); height: -moz-fit-content; height: fit-content; padding: 0; } .feed-block .item h3 { margin: 0; font-size: var(--txt-medium); } .feed-block .item details { z-index: var(--z-2); width: 100%; position: relative; padding: 0; } .feed-block .item details summary { position: absolute; top: calc(var(--chip_) * -1); right: 0; width: 100%; background-color: rgba(var(--base), var(--op-2)); backdrop-filter: blur(5px); } .feed-block .item details summary:hover { background-color: rgba(var(--action-0), var(--op-45)); } .feed-block .item details[open] { padding: 0.25rem 0.5rem; } .feed-block .item img:hover { opacity: 0.8; } .feed-block .item[data-timeline] .images { aspect-ratio: 3/2; padding: 0 0 1rem; } .feed-block .item[data-timeline] .images span { width: 50%; position: absolute; background-color: rgb(var(--action-0)); color: rgb(var(--action-contrast)); padding: 0.25rem 0.5rem; } .feed-block .item[data-timeline] .images span:first-of-type { bottom: 0; left: 50%; text-align: left; } .feed-block .item[data-timeline] .images span:last-of-type { top: 0; right: 50%; } .feed-block .item[data-timeline] .images img { width: 50%; } .feed-block .item[data-timeline] .images img:first-of-type { border-left: 2px solid rgb(var(--action-0)); } .feed-block .item a::before, .feed-block .item a::after { display: none; } .feed-block .item label { font-weight: normal; text-transform: none; --w: 1.5em; } .feed-block .all-filters summary { display: flex; justify-content: space-between; } .all-filters { font-size: var(--txt-x-small); } .all-filters[open] { border: 2px solid rgb(var(--action-0)); padding: 0; border-radius: 0 0 var(--radius-outer) var(--radius-outer); } .all-filters summary { width: 100%; } .all-filters[open] summary, .all-filters summary:hover { background-color: rgb(var(--action-0)); color: rgb(var(--action-contrast)); } .all-filters[open] summary::after, .all-filters summary:hover::after { background-color: rgb(var(--action-contrast)); } .all-filters > .row.row { padding: 0 0.75rem 2rem; width: var(--content); } .all-filters > .row.row.search { padding-bottom: 0; } .all-filters > .row.row { position: relative; } .all-filters > .row.row > .label, .all-filters > .row.row > .row > .label { font-family: var(--heading); font-weight: var(--fw-h-bold); text-transform: uppercase; } .all-filters > .row.row > .label { width: 20%; } .all-filters > .row.row > .row > .label { white-space: nowrap; } .all-filters button, .all-filters .btn + label { width: var(--chipchip); min-height: var(--chipchip); padding: 0; } .all-filters button .label, .all-filters .row:has(> .btn:not(:checked) + label:hover) :checked + label .label, .all-filters .btn + label .label { position: absolute; bottom: -2rem; width: -moz-max-content; width: max-content; white-space: nowrap; opacity: 0; z-index: var(--z-4); } .all-filters button:hover .label, .all-filters .btn:checked + label .label, .all-filters .btn + label:hover .label { opacity: 1; } .all-filters .search.row, .all-filters .view.row { display: none; } .all-filters .ordering { padding: 2rem 0 0.75rem 0; } .all-filters .ordering > .row label { position: unset; } .all-filters .ordering .row .label { top: -1rem; color: rgb(var(--contrast)); } .all-filters .ordering .row.orderby .label { right: 0; } .all-filters .ordering .row.order-direction .label { left: 0; } .search-container:not(.open) input[type=search], .search-container:not(.open) .clear-search { transform: scaleX(0); transform-origin: right; width: 0; padding: 0; transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base); } .search-container button { padding: 0.5rem; } .search-container .icon { --w: 1.5rem; } .search-container.open input[type=search], .search-container.open .clear-search { transform: scaleX(1); transform-origin: right; transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base); } .all-filters > .search, input[type=search], .search-container { width: 100%; } .toggle-text input + label { font-weight: normal; color: var(--contrast) !important; text-transform: none; cursor: pointer; position: relative; padding: 0.25rem 0.5rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: 1px dashed transparent; } .toggle-text input + label::before, .toggle-text input + label::after { display: none !important; } .toggle-text input + label .text { position: relative; margin: 0; --gap: 0; font-weight: bold; width: -moz-fit-content; width: fit-content; padding: 2px 4px; border: 1px solid rgb(var(--action-50)); border-radius: var(--radius); color: rgb(var(--action-50)); } .toggle-text input + label .off { --mid: -100%; } .toggle-text input + label .on { --mid: 100%; } .toggle-text input + label .off, .toggle-text input + label .on { transition: var(--trans-transform), opacity var(--trans-base); } .toggle-text input + label .off, .toggle-text input:checked + label .on { opacity: 1; max-width: 100%; transform: translate3d(0, 0, 0); } .toggle-text input + label .on, .toggle-text input:checked + label .off { opacity: 0; max-width: 0; transform: translate3d(0, var(--mid), 0); } .toggle-text:hover label { border-color: rgb(var(--action-200)); } .toggle-text:hover .text { background-color: rgb(var(--action-50)); color: rgb(var(--action-contrast)); border-color: rgb(var(--action-50)); }