hyl.st
Proof of concept for the other one
1/* Calendar Viewer - styles.css */
2
3/* ── Split pane layout ── */
4
5.cal-view-root {
6 display: flex;
7 flex-direction: column;
8 height: 100%;
9 overflow: hidden;
10}
11
12.cal-pane-top {
13 flex: 1 1 50%;
14 min-height: 0;
15 overflow-y: auto;
16 position: relative;
17 border-bottom: 1px solid var(--background-modifier-border);
18}
19
20.cal-pane-bottom {
21 flex: 1 1 50%;
22 min-height: 0;
23 position: relative;
24}
25
26/* ── Calendar container ── */
27
28.cal-container {
29 padding: 8px;
30 font-family: var(--font-interface);
31 position: relative;
32}
33
34/* ── Header ── */
35
36.cal-header {
37 display: flex;
38 align-items: center;
39 justify-content: space-between;
40 margin-bottom: 8px;
41 padding: 0 4px;
42}
43
44.cal-nav-btn {
45 background: none;
46 border: 1px solid var(--background-modifier-border);
47 border-radius: 4px;
48 cursor: pointer;
49 font-size: 18px;
50 line-height: 1;
51 padding: 2px 8px;
52 color: var(--text-normal);
53}
54
55.cal-nav-btn:hover {
56 background: var(--background-modifier-hover);
57}
58
59.cal-month-label {
60 font-weight: 600;
61 font-size: 14px;
62 color: var(--text-normal);
63}
64
65/* ── Day-of-week row ── */
66
67.cal-dow-row {
68 display: grid;
69 grid-template-columns: repeat(7, 1fr);
70 gap: 1px;
71 margin-bottom: 2px;
72}
73
74.cal-dow-cell {
75 text-align: center;
76 font-size: 11px;
77 font-weight: 600;
78 color: var(--text-muted);
79 padding: 2px 0;
80}
81
82/* ── Grid ── */
83
84.cal-grid {
85 display: grid;
86 grid-template-columns: repeat(7, 1fr);
87 gap: 1px;
88}
89
90.cal-cell {
91 min-height: 48px;
92 border: 1px solid var(--background-modifier-border);
93 border-radius: 3px;
94 padding: 2px;
95 display: flex;
96 flex-direction: column;
97 overflow: hidden;
98}
99
100.cal-cell-empty {
101 border-color: transparent;
102}
103
104.cal-day-number {
105 font-size: 11px;
106 color: var(--text-muted);
107 text-align: right;
108 padding: 1px 3px 0 0;
109 line-height: 1.2;
110}
111
112.cal-cell-today {
113 background: var(--background-modifier-hover);
114}
115
116.cal-cell-today .cal-day-number {
117 color: var(--text-accent);
118 font-weight: 700;
119}
120
121.cal-cell-has-events {
122 background: var(--background-primary);
123}
124
125/* ── Event chips ── */
126
127.cal-cell-events {
128 display: flex;
129 flex-direction: column;
130 gap: 1px;
131 margin-top: 1px;
132 overflow: hidden;
133}
134
135.cal-event-chip {
136 font-size: 10px;
137 line-height: 1.3;
138 padding: 1px 3px;
139 border-radius: 2px;
140 background: var(--interactive-accent);
141 color: var(--text-on-accent);
142 white-space: nowrap;
143 overflow: hidden;
144 text-overflow: ellipsis;
145 cursor: pointer;
146}
147
148.cal-event-chip:hover {
149 opacity: 0.85;
150}
151
152.cal-event-sold-out {
153 background: var(--text-muted);
154 opacity: 0.6;
155}
156
157.cal-event-selected {
158 outline: 2px solid var(--text-accent);
159 outline-offset: 1px;
160 opacity: 1 !important;
161}
162
163/* ── Popover ── */
164
165.cal-popover {
166 position: absolute;
167 z-index: 100;
168 background: var(--background-primary);
169 border: 1px solid var(--background-modifier-border);
170 border-radius: 6px;
171 padding: 10px 12px;
172 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
173 max-width: 260px;
174 font-size: 12px;
175 line-height: 1.5;
176}
177
178.cal-popover-title {
179 font-weight: 600;
180 font-size: 13px;
181 color: var(--text-normal);
182 margin-bottom: 4px;
183}
184
185.cal-popover-title a {
186 color: var(--text-accent);
187 text-decoration: none;
188}
189
190.cal-popover-title a:hover {
191 text-decoration: underline;
192}
193
194.cal-sold-out {
195 color: var(--text-muted);
196 font-weight: 400;
197 font-size: 11px;
198}
199
200.cal-popover-date {
201 color: var(--text-muted);
202 margin-bottom: 4px;
203}
204
205.cal-popover-venue {
206 color: var(--text-normal);
207 margin-bottom: 4px;
208}
209
210.cal-popover-venue a {
211 color: var(--text-accent);
212 text-decoration: none;
213}
214
215.cal-popover-venue a:hover {
216 text-decoration: underline;
217}
218
219.cal-popover-notes {
220 color: var(--text-faint);
221 font-style: italic;
222 margin-top: 4px;
223}
224
225/* ── Map ── */
226
227.cal-map {
228 width: 100%;
229 height: 100%;
230}
231
232/* SVG teardrop pin markers */
233.cal-pin-icon {
234 background: none !important;
235 border: none !important;
236 filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
237}
238
239/* Override Leaflet popup styles to match Obsidian theme */
240.cal-map-popup .leaflet-popup-content-wrapper {
241 background: var(--background-primary);
242 color: var(--text-normal);
243 border-radius: 6px;
244 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
245 font-family: var(--font-interface);
246 font-size: 12px;
247}
248
249.cal-map-popup .leaflet-popup-tip {
250 background: var(--background-primary);
251}
252
253.cal-map-popup .leaflet-popup-content {
254 margin: 8px 12px;
255 line-height: 1.5;
256}
257
258.cal-popup-event {
259 margin-bottom: 6px;
260}
261
262.cal-popup-event:last-child {
263 margin-bottom: 0;
264}
265
266.cal-popup-event a {
267 color: var(--text-accent);
268 text-decoration: none;
269}
270
271.cal-popup-event a:hover {
272 text-decoration: underline;
273}
274
275.cal-popup-venue {
276 color: var(--text-muted);
277 font-size: 11px;
278}
279
280/* Highlight ring around selected marker */
281.cal-marker-highlight {
282 animation: cal-pulse 1.5s ease-out;
283}
284
285@keyframes cal-pulse {
286 0% {
287 stroke-opacity: 0.8;
288 fill-opacity: 0.3;
289 }
290 100% {
291 stroke-opacity: 0.3;
292 fill-opacity: 0.1;
293 }
294}
295
296/* Leaflet zoom/attribution tweaks for sidebar */
297.cal-pane-bottom .leaflet-control-zoom {
298 margin-top: 6px;
299 margin-right: 6px;
300}
301
302.cal-pane-bottom .leaflet-control-attribution {
303 font-size: 9px;
304 background: var(--background-primary-alt) !important;
305 color: var(--text-faint);
306}
307
308.cal-pane-bottom .leaflet-control-attribution a {
309 color: var(--text-muted);
310}
311
312/* Fix Leaflet container background for dark themes */
313.cal-pane-bottom .leaflet-container {
314 background: var(--background-primary-alt);
315}