Jason Zimdars
62 lines
1.2 KiB
CSS
62 lines
1.2 KiB
CSS
.events {
|
|
--grid-lines: 3px;
|
|
|
|
border-block-start: 1px solid var(--color-subtle);
|
|
display: grid;
|
|
gap: var(--grid-lines);
|
|
grid-template-columns: repeat(4, 1fr);
|
|
padding-block-start: var(--block-space);
|
|
}
|
|
|
|
.event {
|
|
margin: var(--inline-space);
|
|
|
|
&.out-of-range {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.events--none {
|
|
padding: calc(3 * var(--block-space));
|
|
}
|
|
|
|
.event-grid-item {
|
|
background-color: var(--color-selected);
|
|
block-size: 100%;
|
|
border-radius: var(--grid-lines);
|
|
display: flex;
|
|
inline-size: 100%;
|
|
min-block-size: var(--block-space);
|
|
|
|
&:nth-child(-n + 8) {
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
&:nth-child(1n + 57) {
|
|
background-color: var(--color-highlight);
|
|
}
|
|
|
|
&.current-hour {
|
|
background-color: var(--color-selected-dark);
|
|
}
|
|
}
|
|
|
|
.event-grid-time {
|
|
position: relative;
|
|
|
|
time {
|
|
align-items: center;
|
|
background: var(--color-bg);
|
|
border-radius: 2em;
|
|
display: inline-flex;
|
|
font-size: var(--text-small);
|
|
font-weight: 600;
|
|
inline-size: max-content;
|
|
margin: 0 auto;
|
|
padding: 0 var(--inline-space-double);
|
|
position: absolute;
|
|
text-transform: uppercase;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|