sendou.ink/app/components/elements/Calendar.module.css
Kalle fef1ffc955
Design refresh + a bunch of stuff (#2864)
Co-authored-by: hfcRed <hfcred@gmx.net>
2026-03-19 17:51:42 +02:00

81 lines
1.2 KiB
CSS

.root {
background-color: var(--color-bg);
border-radius: var(--radius-box);
padding: var(--s-4);
border: var(--border-style);
max-width: fit-content;
}
.header {
display: flex;
gap: var(--s-2);
justify-content: space-between;
align-items: center;
margin-block-end: var(--s-1);
min-width: 250px;
}
.heading {
font-size: var(--font-lg);
}
.navButton {
background-color: transparent;
color: var(--color-text-accent);
border: none;
padding: 0;
border-radius: 100%;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.navIcon {
width: 27.5px;
}
.grid {
width: 100%;
}
.headerCell {
color: var(--color-text-high);
}
.cell {
display: grid;
place-items: center;
font-size: var(--font-sm);
padding: var(--s-1-5);
width: 35px;
height: 35px;
border-radius: var(--radius-field);
outline-color: var(--color-accent);
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.cell[data-outside-month] {
display: none;
}
.cell[data-disabled] {
opacity: 0.5;
background-color: transparent !important;
}
.cell[data-selected] {
background-color: var(--color-bg-high);
color: var(--color-text-accent);
}
.cell:hover {
background-color: var(--color-bg-high);
outline: initial;
}