384 lines
9.1 KiB
CSS
384 lines
9.1 KiB
CSS
/**
|
|
* month view
|
|
**/
|
|
.calendar.month {
|
|
@apply grid col-span-3 pb-6 2xl:pb-8 pt-2;
|
|
grid-template-rows: 2rem 1fr;
|
|
|
|
hgroup {
|
|
@apply grid grid-cols-7 w-full gap-1;
|
|
|
|
> span {
|
|
@apply uppercase text-right pr-4 font-bold;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
@apply grid grid-cols-7 w-full gap-1;
|
|
contain: paint;
|
|
grid-auto-rows: 1fr;
|
|
|
|
li {
|
|
@apply relative px-1 pt-8 border-t-md border-gray-900;
|
|
|
|
&::before {
|
|
@apply absolute top-0 right-px w-auto h-8 flex items-center justify-end pr-4 text-sm font-medium;
|
|
content: attr(data-day-number);
|
|
}
|
|
|
|
&.day--outside {
|
|
@apply bg-gray-50 text-gray-700;
|
|
}
|
|
|
|
&.day--today {
|
|
@apply bg-cyan-100;
|
|
}
|
|
|
|
/* need to handle this for various 4, 5, and 7 day configs */
|
|
&:nth-child(-n+7) { /* first 7 items */
|
|
@apply border-t-2;
|
|
}
|
|
&:nth-last-child(-n+7) { /* last 7 items */
|
|
@apply border-b-md;
|
|
}
|
|
|
|
/*&:last-child {
|
|
@apply rounded-br-lg;
|
|
}*/
|
|
|
|
/* events */
|
|
.event {
|
|
@apply flex items-center text-xs gap-1 px-1 py-px font-medium truncate rounded-sm bg-transparent;
|
|
transition: background-color 125ms ease-in-out;
|
|
animation: event-slide 350ms ease-in-out both;
|
|
|
|
.indicator {
|
|
--indicator-bg: var(--event-color);
|
|
}
|
|
|
|
.title {
|
|
@apply grow truncate;
|
|
}
|
|
|
|
time {
|
|
@apply text-2xs shrink-0 mt-px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, var(--event-color) 25%, #fff 100%);
|
|
}
|
|
|
|
&.hidden {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* time-based views
|
|
*/
|
|
.calendar.time {
|
|
@apply grid;
|
|
grid-template-columns: 6rem auto;
|
|
grid-template-rows: 4.5rem auto 5rem;
|
|
--row-height: 2.5rem;
|
|
--now-row: 1;
|
|
--now-col-start: 1;
|
|
--now-col-end: 2;
|
|
|
|
/* top day bar */
|
|
hgroup {
|
|
@apply bg-white col-span-2 border-b-2 border-primary pl-24 sticky z-10;
|
|
top: 5.5rem;
|
|
|
|
span.name {
|
|
@apply font-semibold uppercase text-sm;
|
|
}
|
|
|
|
a.number {
|
|
@apply flex items-center justify-center text-xl h-10 w-10 rounded-full bg-gray-100 font-semibold;
|
|
aspect-ratio: 1 / 1;
|
|
|
|
&:hover {
|
|
@apply bg-gray-200;
|
|
}
|
|
}
|
|
|
|
div.day-header {
|
|
@apply relative flex flex-col gap-2px justify-start items-start;
|
|
animation: header-slide 250ms ease-in;
|
|
|
|
&:not(:last-of-type)::after {
|
|
@apply block w-px bg-gray-200 absolute -right-2 top-18;
|
|
content: '';
|
|
height: calc(100dvh - 16rem);
|
|
}
|
|
|
|
&.active {
|
|
a.number {
|
|
@apply bg-teal-500 text-white;
|
|
|
|
&:hover {
|
|
@apply bg-teal-600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* time column */
|
|
ol.time {
|
|
@apply grid z-0 pt-4;
|
|
grid-template-rows: repeat(var(--grid-rows, 96), var(--row-height));
|
|
|
|
time {
|
|
@apply relative flex items-center justify-end items-start pr-4;
|
|
@apply text-xs text-secondary font-mono;
|
|
|
|
&::after {
|
|
@apply block absolute h-px bg-gray-200;
|
|
width: calc(100cqw - 6rem);
|
|
content: '';
|
|
top: 0.6rem;
|
|
left: 6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* event positioning */
|
|
ol.events {
|
|
@apply grid py-4;
|
|
grid-template-rows: repeat(var(--grid-rows, 96), var(--row-height));
|
|
--event-col: 0;
|
|
--event-row: 0;
|
|
--event-end: 4;
|
|
--event-bg: var(--color-gray-100);
|
|
--event-fg: var(--color-primary);
|
|
|
|
li.event {
|
|
@apply flex rounded-md relative;
|
|
background-color: var(--event-bg);
|
|
color: var(--event-fg);
|
|
grid-row-start: var(--event-row);
|
|
grid-row-end: var(--event-end);
|
|
grid-column-start: var(--event-col);
|
|
grid-column-end: calc(var(--event-col) + 1);
|
|
top: 0.6rem;
|
|
transition: translate 100ms ease-in;
|
|
|
|
> a {
|
|
@apply flex flex-col grow px-3 py-2 gap-2px;
|
|
|
|
> span {
|
|
@apply font-semibold leading-none break-all;
|
|
}
|
|
|
|
> time {
|
|
@apply text-sm;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@apply -translate-y-2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* bottom controls */
|
|
footer {
|
|
@apply bg-white flex items-end justify-end col-span-2 border-t-md border-primary z-10;
|
|
@apply sticky bottom-0 pb-8;
|
|
}
|
|
|
|
/* now indicator */
|
|
.now-indicator {
|
|
@apply relative pointer-events-none z-10 border-t-3 border-red-600 opacity-90 -ml-2;
|
|
grid-row: var(--now-row);
|
|
grid-column: var(--now-col-start) / var(--now-col-end);
|
|
width: calc(100% + 1rem);
|
|
top: 0.6rem;
|
|
|
|
&::before {
|
|
@apply block w-3 h-3 rounded-full bg-red-600 -translate-y-1/2 -mt-[1.5px];
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
|
|
/* step handling */
|
|
.calendar.time[data-density="30"] {
|
|
--row-height: 2rem;
|
|
|
|
ol.time li:nth-child(2n) {
|
|
visibility: hidden; /* preserves space + row alignment */
|
|
}
|
|
}
|
|
.calendar.time[data-density="60"] {
|
|
--row-height: 1.25rem;
|
|
|
|
ol.time li:not(:nth-child(4n + 1)) {
|
|
visibility: hidden; /* preserves space + row alignment */
|
|
}
|
|
}
|
|
|
|
/**
|
|
* day view
|
|
*/
|
|
.calendar.day {
|
|
container: day / inline-size;
|
|
|
|
hgroup {
|
|
@apply flex items-start justify-start;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* week view
|
|
*/
|
|
.calendar.week {
|
|
container: week / inline-size;
|
|
--days: 7;
|
|
|
|
hgroup {
|
|
@apply grid gap-x-2;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
ol.events {
|
|
@apply gap-x-2;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
--col: calc(100% / var(--days));
|
|
|
|
/* draw a 1px line at the start of each column repeat + highlight weekends */
|
|
/* need to factor in weekends on/off */
|
|
background-image:
|
|
linear-gradient(
|
|
to right,
|
|
var(--color-gray-10) var(--col),
|
|
transparent var(--col),
|
|
transparent calc((var(--col) * 6) + 5px),
|
|
var(--color-gray-10) calc((var(--col) * 6) + 5px)
|
|
);
|
|
background-position: 0;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&[data-weekstart="0"] {
|
|
ol.events {
|
|
background-image:
|
|
linear-gradient(
|
|
to right,
|
|
transparent,
|
|
transparent calc((var(--col) * 5) + 5px),
|
|
var(--color-gray-10) calc((var(--col) * 5) + 5px)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* four-day view
|
|
*/
|
|
.calendar.four {
|
|
container: four / inline-size;
|
|
--days: 4;
|
|
|
|
hgroup {
|
|
@apply grid gap-x-2;
|
|
grid-template-columns: repeat(var(--days), 1fr);
|
|
}
|
|
|
|
ol.events {
|
|
@apply gap-x-2;
|
|
grid-template-columns: repeat(var(--days), 1fr);
|
|
--col: calc(100% / var(--days));
|
|
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
to right,
|
|
transparent,
|
|
transparent var(--col),
|
|
var(--color-gray-200) var(--col),
|
|
var(--color-gray-200) calc(var(--col) + 1px)
|
|
);
|
|
background-position: 0;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* calendar list in the left bar
|
|
**/
|
|
#calendar-toggles {
|
|
@apply pb-6;
|
|
|
|
summary {
|
|
@apply flex items-center gap-1 justify-start;
|
|
|
|
span {
|
|
@apply capitalize;
|
|
}
|
|
|
|
a {
|
|
@apply hidden -mt-2px;
|
|
}
|
|
|
|
&:hover {
|
|
a {
|
|
@apply flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
li.calendar-toggle {
|
|
@apply relative;
|
|
|
|
/* hide the edit link by default */
|
|
.edit-link {
|
|
@apply hidden absolute pl-4 right-0 top-1/2 -translate-y-1/2 underline text-sm;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 33%);
|
|
}
|
|
|
|
/* show menu on hover */
|
|
&:hover {
|
|
.edit-link {
|
|
@apply block;
|
|
}
|
|
}
|
|
|
|
/* limit calendar titles to 1 line */
|
|
.checkbox-label span {
|
|
@apply line-clamp-1;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* animations
|
|
**/
|
|
@keyframes event-slide {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-1rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes header-slide {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-0.25rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|