style.css (9926B)
1 :root { 2 --bg: #0f0f13; 3 --surface: #1a1a24; 4 --surface2: #22222f; 5 --text: #e8e8f0; 6 --text-dim: #888899; 7 --accent: #6c8ebf; 8 --radius: 10px; 9 /* Fluid tile */ 10 --tile-size: clamp(52px, calc((100vw - 2rem - 40px) / 5), 100px); 11 } 12 13 * { box-sizing: border-box; margin: 0; padding: 0; } 14 15 body { 16 background: var(--bg); 17 color: var(--text); 18 font-family: system-ui, sans-serif; 19 min-height: 100vh; 20 padding: 1.5rem 1rem 4.5rem; 21 } 22 23 h2 { font-size: 1.1rem; margin-bottom: 0.5rem; } 24 25 /* Tiles */ 26 27 .tile { 28 width: var(--tile-size); 29 height: var(--tile-size); 30 border-radius: var(--radius); 31 display: flex; 32 flex-direction: column; 33 align-items: center; 34 justify-content: center; 35 cursor: pointer; 36 user-select: none; 37 transition: transform 0.15s, box-shadow 0.15s; 38 font-size: clamp(0.6rem, 1.5vw, 0.78rem); 39 font-weight: 600; 40 position: relative; 41 flex-shrink: 0; 42 } 43 44 .tile:hover { transform: scale(1.07); } 45 .date-label { font-size: clamp(0.55rem, 1.4vw, 0.72rem); opacity: 0.85; } 46 .units { font-size: clamp(0.75rem, 2vw, 1.05rem); font-weight: 700; margin-top: 3px; } 47 .tile.today { outline: 2px solid white; outline-offset: 2px; } 48 49 /* Colour classes */ 50 .tile.zero { background: #1e1e2e; color: #aaa; } 51 .tile.empty-past { background: transparent; color: #666; border: 1.5px solid #555; box-shadow: 0 0 8px 1px rgba(150,150,255,0.18); } 52 .tile.blue { background: #1a4a7a; color: #9fd3ff; } 53 .tile.green { background: #1a5c2a; color: #8eff9e; } 54 .tile.yellow { background: #5c4a00; color: #ffe066; } 55 .tile.orange { background: #6b2e00; color: #ffb347; } 56 .tile.red { background: #6b0a0a; color: #ff8080; } 57 .tile.purple { background: #3d0a6b; color: #d18fff; } 58 .tile.black { background: #0a0a0a; color: #666; border: 1px solid #333; } 59 60 /* Layouts */ 61 62 .section { margin-bottom: 1.5rem; } 63 64 .section-label { 65 font-size: 0.7rem; 66 text-transform: uppercase; 67 letter-spacing: 0.1em; 68 color: var(--text-dim); 69 margin-bottom: 0.5rem; 70 display: flex; 71 align-items: center; 72 gap: 0.5rem; 73 flex-wrap: wrap; 74 } 75 76 .tiles-row { 77 display: flex; 78 gap: 10px; 79 flex-wrap: nowrap; 80 overflow-x: auto; 81 padding-bottom: 4px; 82 } 83 84 .tiles-row::-webkit-scrollbar { height: 4px; } 85 .tiles-row::-webkit-scrollbar-track { background: transparent; } 86 .tiles-row::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; } 87 88 /* Navigation */ 89 90 .controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } 91 92 .btn-nav { 93 background: var(--surface2); 94 border: 1px solid #333; 95 color: var(--text); 96 border-radius: 6px; 97 padding: 3px 10px; 98 cursor: pointer; 99 font-size: 0.8rem; 100 transition: background 0.15s; 101 white-space: nowrap; 102 } 103 .btn-nav:hover { background: #333; } 104 .btn-nav:disabled { opacity: 0.4; cursor: default; } 105 106 .offset-display { 107 font-size: 0.75rem; 108 color: var(--text-dim); 109 min-width: 60px; 110 text-align: center; 111 } 112 113 /* Detail Summary */ 114 115 details { 116 background: var(--surface); 117 border-radius: var(--radius); 118 margin-bottom: 1rem; 119 } 120 121 details > summary { 122 padding: 0.75rem 1rem; 123 cursor: pointer; 124 font-weight: 600; 125 font-size: 0.9rem; 126 list-style: none; 127 display: flex; 128 justify-content: space-between; 129 align-items: center; 130 color: var(--accent); 131 } 132 133 details > summary::after { content: "▸"; transition: transform 0.2s; } 134 details[open] > summary::after { transform: rotate(90deg); } 135 details > .details-inner { padding: 0.75rem 1rem 1rem; overflow-x: auto; } 136 137 /* Period summary (weeks / months) */ 138 139 .period-toggle { 140 display: flex; 141 gap: 6px; 142 margin-bottom: 0.75rem; 143 } 144 145 .period-toggle .btn-nav { flex: 1; padding: 6px 10px; } 146 .period-toggle .btn-nav.active { 147 background: var(--accent); 148 border-color: var(--accent); 149 color: #fff; 150 } 151 152 .period-list { 153 display: flex; 154 flex-direction: column; 155 gap: 6px; 156 max-height: 320px; 157 overflow-y: auto; 158 padding-right: 4px; 159 } 160 161 .period-list::-webkit-scrollbar { width: 4px; } 162 .period-list::-webkit-scrollbar-track { background: transparent; } 163 .period-list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; } 164 165 .period-row { 166 display: grid; 167 grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); 168 align-items: center; 169 gap: 8px; 170 background: var(--surface2); 171 border-radius: 8px; 172 padding: 8px 10px; 173 } 174 175 .period-row.current { outline: 1px solid var(--accent); } 176 177 .period-label { 178 font-size: 0.85rem; 179 font-weight: 600; 180 min-width: 0; 181 white-space: nowrap; 182 overflow: hidden; 183 text-overflow: ellipsis; 184 } 185 186 .period-stat { 187 display: flex; 188 flex-direction: column; 189 align-items: center; 190 line-height: 1.2; 191 } 192 .period-stat strong { font-size: 0.95rem; color: var(--accent); } 193 .period-stat small { 194 font-size: 0.6rem; 195 text-transform: uppercase; 196 letter-spacing: 0.05em; 197 color: var(--text-dim); 198 } 199 200 /* Month view (calendar grid) */ 201 202 .month-nav { 203 display: flex; 204 align-items: center; 205 justify-content: space-between; 206 gap: 8px; 207 margin-bottom: 0.75rem; 208 } 209 210 .month-label { 211 font-size: 0.9rem; 212 font-weight: 600; 213 color: var(--text); 214 text-align: center; 215 flex: 1; 216 } 217 218 .month-weekday-header { 219 display: grid; 220 grid-template-columns: repeat(7, minmax(0, 1fr)); 221 gap: 6px; 222 margin-bottom: 6px; 223 } 224 225 .month-weekday-header span { 226 font-size: 0.65rem; 227 text-transform: uppercase; 228 letter-spacing: 0.06em; 229 color: var(--text-dim); 230 text-align: center; 231 } 232 233 .month-grid { 234 display: flex; 235 flex-direction: column; 236 gap: 6px; 237 } 238 239 /* Week rows in the calendar grid use a fluid 7-column grid so they always 240 fit exactly within the panel's width with no horizontal scrollbar. */ 241 .month-week-row { 242 display: grid; 243 grid-template-columns: repeat(7, minmax(0, 1fr)); 244 gap: 6px; 245 } 246 247 .month-week-row .tile { 248 width: 100%; 249 height: auto; 250 aspect-ratio: 1 / 1; 251 } 252 253 /* Days padded in from the previous/next month, shown dimmed to keep the 254 grid full without drawing focus away from the current month. */ 255 .tile.other-month { 256 opacity: 0.35; 257 } 258 259 /* Modal */ 260 261 .modal-overlay { 262 position: fixed; 263 inset: 0; 264 background: rgba(0,0,0,0.75); 265 display: flex; 266 align-items: center; 267 justify-content: center; 268 z-index: 100; 269 padding: 1rem; 270 } 271 272 .modal-box { 273 background: var(--surface); 274 border-radius: 14px; 275 padding: 1.5rem; 276 width: 100%; 277 max-width: 480px; 278 max-height: 90vh; 279 overflow-y: auto; 280 box-shadow: 0 8px 40px rgba(0,0,0,0.6); 281 } 282 283 .modal-box h2 { margin-bottom: 0.3rem; font-size: 1.1rem; } 284 .total-units { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem; } 285 .total-units strong { color: var(--accent); } 286 287 .drink-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1rem; } 288 .drink-table th, 289 .drink-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #2a2a3a; } 290 .drink-table th { color: var(--text-dim); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; } 291 292 .actions { display: flex; gap: 5px; } 293 294 .btn-sm { 295 border: none; 296 border-radius: 5px; 297 padding: 4px 9px; 298 cursor: pointer; 299 font-size: 0.9rem; 300 font-weight: 700; 301 line-height: 1; 302 } 303 .btn-minus { background: #2a2a3a; color: #aaa; } 304 .btn-plus { background: #1a4a2a; color: #8eff9e; } 305 .btn-del { background: #4a1a1a; color: #ff8080; } 306 .btn-sm:hover { opacity: 0.85; } 307 308 /* Add drink form */ 309 .add-drink-form { 310 margin-top: 1rem; 311 padding-top: 1rem; 312 border-top: 1px solid #2a2a3a; 313 } 314 315 .add-drink-form h3 { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.6rem; } 316 317 .add-drink-row { 318 display: flex; 319 gap: 8px; 320 align-items: flex-end; 321 flex-wrap: wrap; 322 } 323 324 .add-field { 325 display: flex; 326 flex-direction: column; 327 gap: 4px; 328 flex: 1; 329 min-width: 90px; 330 } 331 332 .add-field label { 333 font-size: 0.72rem; 334 color: var(--text-dim); 335 text-transform: uppercase; 336 letter-spacing: 0.06em; 337 } 338 339 .add-field select, 340 .add-field input { 341 background: var(--surface2); 342 color: var(--text); 343 border: 1px solid #333; 344 border-radius: 6px; 345 padding: 6px 10px; 346 font-size: 0.9rem; 347 width: 100%; 348 } 349 350 .add-field input[type=number] { -moz-appearance: textfield; } 351 .add-field input::-webkit-inner-spin-button { display: none; } 352 353 .abv-preview { 354 margin-top: 0.5rem; 355 font-size: 0.8rem; 356 color: var(--accent); 357 min-height: 1.2em; 358 } 359 360 .btn-add { 361 background: var(--accent); 362 color: #fff; 363 border: none; 364 border-radius: 6px; 365 padding: 8px 16px; 366 cursor: pointer; 367 font-size: 0.9rem; 368 font-weight: 600; 369 white-space: nowrap; 370 align-self: flex-end; 371 } 372 .btn-add:hover { opacity: 0.9; } 373 374 .btn-close { 375 margin-top: 1rem; 376 width: 100%; 377 background: #2a2a3a; 378 color: var(--text-dim); 379 border: none; 380 border-radius: 6px; 381 padding: 8px; 382 cursor: pointer; 383 font-size: 0.85rem; 384 } 385 .btn-close:hover { background: #333; } 386 387 .no-drinks { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.5rem; } 388 389 /* Legend */ 390 391 .legend { 392 position: fixed; 393 bottom: 0; 394 left: 0; 395 right: 0; 396 display: flex; 397 justify-content: center; 398 flex-wrap: wrap; 399 gap: 6px 14px; 400 background: var(--surface); 401 border-top: 1px solid #2a2a3a; 402 padding: 0.6rem 1rem; 403 z-index: 50; 404 } 405 .legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-dim); } 406 .legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } 407 408 /* Summary */ 409 410 #summary { margin-bottom: 1.5rem; } 411 412 .summary-grid { 413 display: grid; 414 grid-template-columns: repeat(3, 1fr); 415 gap: 10px; 416 } 417 418 .summary-card { 419 background: var(--surface); 420 border-radius: var(--radius); 421 padding: 0.9rem 0.75rem; 422 display: flex; 423 flex-direction: column; 424 align-items: center; 425 gap: 4px; 426 } 427 428 .summary-val { 429 font-size: clamp(1.4rem, 5vw, 2rem); 430 font-weight: 700; 431 color: var(--accent); 432 line-height: 1; 433 } 434 435 .summary-val-sub { 436 font-size: 0.65em; 437 color: var(--text-dim); 438 font-weight: 400; 439 } 440 441 .summary-label { 442 font-size: 0.7rem; 443 text-transform: uppercase; 444 letter-spacing: 0.08em; 445 color: var(--text-dim); 446 }