.calendar_view { overflow-x: scroll; svg { height: 108px; } } .shelf { max-width: 1400px; padding: 0; * { box-sizing: border-box; padding: 0; margin: 0; } .cards { display: grid; grid-auto-columns: 100%; grid-column-gap: var(--pico-block-spacing-horizontal); grid-auto-flow: column; padding: var(--pico-nav-link-spacing-vertical) 0px; list-style: none; overflow-x: scroll; scroll-snap-type: x mandatory; scrollbar-width: thin; //firefox 100+ broke this in macos scrollbar-color: var(--pico-range-active-border-color) var(--pico-range-border-color); &::-webkit-scrollbar { height: var(--pico-nav-link-spacing-vertical); } &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track { border-radius: 92px; } &::-webkit-scrollbar-thumb { background: var(--pico-range-active-border-color); } &::-webkit-scrollbar-track { background: var(--pico-range-border-color); } } .card { display: flex; flex-direction: column; padding: 0px; // border-radius: 5px; scroll-snap-align: start; transition: all 0.2s; text-align: center; vertical-align: middle; a { margin-top: auto; } img { background: var(--pico-background-color); // border-radius: 5px; width: 100%; min-height: 3rem; vertical-align: middle; margin: auto; font-size: 80%; border: 2px solid transparent; } a:hover img { border: 2px solid var(--pico-primary-hover); } a>div { font-size: 80%; text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; min-height: 2.5rem; } } @media (min-width: 200px) { .cards { grid-auto-columns: calc(25% - var(--pico-block-spacing-horizontal)); } } @media (min-width: 500px) { .cards { grid-auto-columns: calc(20% - var(--pico-block-spacing-horizontal)); } } @media (min-width: 769px) { .cards { grid-auto-columns: calc(calc(100% / 6) - var(--pico-block-spacing-horizontal)); } } @media (min-width: 1281px) { .cards { grid-auto-columns: calc(calc(100% / 8) - var(--pico-block-spacing-horizontal)); } } } @media (min-width: 769px) { .sidebar .shelf .cards { grid-auto-columns: calc(34% - var(--pico-spacing)) !important; gap: var(--pico-spacing) !important; } } #sibling .cards{ a>div { font-size: 80%; word-wrap: break-word; min-height: 2.5rem; span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 确保每一行都显示省略号 */ width: 100%; /* 确保容器宽度 */ } } } @media (min-width: 769px) { #sibling .cards { grid-auto-columns: calc(calc(100% / 4) - var(--pico-block-spacing-horizontal)); } } @media (min-width: 1281px) { #sibling .cards { grid-auto-columns: calc(calc(100% / 6) - var(--pico-block-spacing-horizontal)); } }