2025-07-04 15:08:52 +02:00
|
|
|
.k-items{position:relative;display:grid;container-type:inline-size}.k-items[data-layout=list]{gap:2px}.k-items[data-layout=cardlets]{--items-size: 1fr;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(var(--items-size),1fr))}@container (min-width: 15rem){.k-items[data-layout=cardlets]{--items-size: 15rem}}.k-items[data-layout=cards]{display:grid;gap:1.5rem;grid-template-columns:1fr}@container (min-width: 6rem){.k-items[data-layout=cards][data-size=tiny]{grid-template-columns:repeat(auto-fill,minmax(6rem,1fr))}}@container (min-width: 9rem){.k-items[data-layout=cards][data-size=small]{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}}@container (min-width: 12rem){.k-items[data-layout=cards][data-size=auto],.k-items[data-layout=cards][data-size=medium]{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}}@container (min-width: 15rem){.k-items[data-layout=cards][data-size=large]{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}}@container (min-width: 18rem){.k-items[data-layout=cards][data-size=huge]{grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}}.k-collection-footer{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:nowrap;gap:var(--spacing-12);margin-top:var(--spacing-2)}.k-empty{max-width:100%}:root{--item-button-height: var(--height-md);--item-button-width: var(--height-md);--item-height: auto;--item-height-cardlet: calc(var(--height-md) * 3)}.k-item{position:relative;background:var(--color-white);box-shadow:var(--shadow);border-radius:var(--rounded);height:var(--item-height);container-type:inline-size}.k-item:has(a:focus){outline:2px solid var(--color-focus)}@supports not selector(:has(*)){.k-item:focus-within{outline:2px solid var(--color-focus)}}.k-item .k-icon-frame{--back: var(--color-gray-300)}.k-item-content{line-height:1.25;overflow:hidden;padding:var(--spacing-2)}.k-item-content a:focus{outline:0}.k-item-content a:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.k-item-info{color:var(--color-text-dimmed)}.k-item-options{transform:translate(0);z-index:1;display:flex;align-items:center;justify-content:space-between}.k-item-options[data-only-option=true]{justify-content:flex-end}.k-item-options .k-button{--button-height: var(--item-button-height);--button-width: var(--item-button-width)}.k-item .k-sort-button{position:absolute;z-index:2}.k-item:not(:hover):not(.k-sortable-fallback) .k-sort-button{opacity:0}.k-item[data-layout=list]{--item-height: var( --field-input-height );--item-button-height: var(--item-height);--item-button-width: auto;display:grid;height:var(--item-height);align-items:center;grid-template-columns:1fr auto}.k-item[data-layout=list][data-has-image=true]{grid-template-columns:var(--item-height) 1fr auto}.k-item[data-layout=list] .k-frame{--ratio: 1/1;border-start-start-radius:var(--rounded);border-end-start-radius:var(--rounded);height:var(--item-height)}.k-item[data-layout=list] .k-item-content{display:flex;min-width:0;white-space:nowrap;gap:var(--spacing-2);justify-content:space-between}.k-item[data-layout=list] .k-item-title,.k-item[data-layout=list] .k-item-info{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.k-item[data-layout=list] .k-item-title{flex-shrink:1}.k-item[data-layout=list] .k-item-info{flex-shrink:2}@container (max-width: 30rem){.k-item[data-layout=list] .k-item-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.k-item[data-layout=list] .k-item-info{display:none}}.k-item[data-layout=list] .k-sort-button{--button-width: calc(1.5rem + var(--spacing-1));--button-height: var(--item-height);left:calc(-1 * var(--button-width))}.k-item:is([data-layout=cardlets],[data-layout=cards]) .k-sort-button{top:var(--spacing-2);inset-inline-start:var(--spacing-2);background:#ffffff7f;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 2px 5px #0003;--button-width: 1.5rem;--button-height: 1.5rem;--button-rounded: var(--rounded-sm);--button-padding: 0;--icon-size: 14px}.k-item:is([data-layout=cardlets],[data-layout=cards]) .k-sort-button:hover{background:#f
|
