40 lines
872 B
CSS
40 lines
872 B
CSS
.panel {
|
|
width: min(390px, calc(100vw - var(--mantine-spacing-xl)));
|
|
max-height: min(70vh, 700px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.viewport {
|
|
background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--mobile-column-count), minmax(0, 1fr));
|
|
grid-auto-flow: row;
|
|
grid-auto-rows: 42px;
|
|
gap: var(--mantine-spacing-xs);
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
|
|
border-radius: var(--mantine-radius-sm);
|
|
background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
|
|
}
|
|
|
|
.itemContent {
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.panel,
|
|
.item {
|
|
scroll-behavior: auto;
|
|
transition: none;
|
|
}
|
|
}
|