mygraine/calendar.css at master · LeaVerou/mygraine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
main {
	padding: 1em;
}

.headers {
	display: none;
	color: hsl(var(--gray), 50%);
	font-weight: bold;
}

.align-by-weeks .headers-weekdays,
.align-by-times .headers-times {
	display: contents;
}

.headers-weekdays {
	text-align: center;
}

.headers-times > div {
	grid-column: 1;
	padding: .25em;
}

	.headers-times > div:first-of-type {
		grid-row: 1;
	}

.recent-migraines {
	display: grid;
	grid-gap: .2em;
}

	.recent-migraines.align-by-times {
		position: relative;
		grid-column-gap: clamp(0px, 10vw / var(--total-days), .2em);
	}

.align-by-weeks.recent-migraines {
	grid-template-columns: repeat(7, 1fr);
}

.align-by-times.recent-migraines {
	grid-template-columns: auto repeat(var(--total-days), 1fr);
	grid-template-rows: repeat(24, 1fr);
	grid-auto-flow: column;
}

.day {
	position: relative;
	border-radius: .2em;
	background: hsl(220 10% 70%);
	color: white;
	font-weight: bold;
	text-decoration: none;
	overflow: hidden;
	min-height: 1.8em;
}

	.align-by-weeks .day {
		grid-column: var(--weekday);
	}

	.align-by-times .day {
		grid-row: 1 / span 24;
		--dir: bottom;
		writing-mode: tb;

		--font-size: clamp(0px,
			(100vw - 10em)
			 / var(--total-days), 1em);
		font-size: var(--font-size);
		background-image: linear-gradient(to bottom, hsl(0 0% 100% / .3) 1px, transparent 0);
		background-size: 100% calc(100% / 24);
	}

		.align-by-times .day:first-of-type {
			grid-column: 2;
		}

	.day > span {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

.migraine {
	--hue: calc(30 - 6 * var(--intensity, 2.5));
	--lightness: calc(70% - var(--intensity, 2.5) * 10%);
	--color: hsl(var(--hue), 100%, var(--lightness));

	background: var(--color, var(--no-intensity));
	color: white;
	font-weight: bold;
	text-decoration: none;
}

	.recent-migraines.time-relative .migraine.migraine.unknown-end-time {
		background: linear-gradient(to var(--dir, right), var(--color, hsl(21, 100%, 55%)), transparent);
	}

	.recent-migraines:not(.time-relative) .day {
		display: flex;
	}

	.recent-migraines.time-relative .migraine {
		position: absolute;
		inset: 0;
		inset-inline-start: calc(var(--start) / 24 * 100%);
		inset-inline-end: calc(100% * (1 - var(--end) / 24));
	}

	.recent-migraines:not(.time-relative) .migraine {
		flex: 1;
	}

	.recent-migraines:not(.time-relative) .migraine:not(.longest-segment) {
		display: none;
	}

	.recent-migraines:not(.time-relative) .migraine:is(.overlap-ended, .overlap-spanned) {
		opacity: .2;
	}