style.css (8593B)
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 /* Month view (calendar grid) */ 138 139 .month-nav { 140 display: flex; 141 align-items: center; 142 justify-content: space-between; 143 gap: 8px; 144 margin-bottom: 0.75rem; 145 } 146 147 .month-label { 148 font-size: 0.9rem; 149 font-weight: 600; 150 color: var(--text); 151 text-align: center; 152 flex: 1; 153 } 154 155 .month-weekday-header { 156 display: grid; 157 grid-template-columns: repeat(7, minmax(0, 1fr)); 158 gap: 6px; 159 margin-bottom: 6px; 160 } 161 162 .month-weekday-header span { 163 font-size: 0.65rem; 164 text-transform: uppercase; 165 letter-spacing: 0.06em; 166 color: var(--text-dim); 167 text-align: center; 168 } 169 170 .month-grid { 171 display: flex; 172 flex-direction: column; 173 gap: 6px; 174 } 175 176 /* Week rows in the calendar grid use a fluid 7-column grid so they always 177 fit exactly within the panel's width with no horizontal scrollbar. */ 178 .month-week-row { 179 display: grid; 180 grid-template-columns: repeat(7, minmax(0, 1fr)); 181 gap: 6px; 182 } 183 184 .month-week-row .tile { 185 width: 100%; 186 height: auto; 187 aspect-ratio: 1 / 1; 188 } 189 190 /* Days padded in from the previous/next month, shown dimmed to keep the 191 grid full without drawing focus away from the current month. */ 192 .tile.other-month { 193 opacity: 0.35; 194 } 195 196 /* Modal */ 197 198 .modal-overlay { 199 position: fixed; 200 inset: 0; 201 background: rgba(0,0,0,0.75); 202 display: flex; 203 align-items: center; 204 justify-content: center; 205 z-index: 100; 206 padding: 1rem; 207 } 208 209 .modal-box { 210 background: var(--surface); 211 border-radius: 14px; 212 padding: 1.5rem; 213 width: 100%; 214 max-width: 480px; 215 max-height: 90vh; 216 overflow-y: auto; 217 box-shadow: 0 8px 40px rgba(0,0,0,0.6); 218 } 219 220 .modal-box h2 { margin-bottom: 0.3rem; font-size: 1.1rem; } 221 .total-units { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem; } 222 .total-units strong { color: var(--accent); } 223 224 .drink-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1rem; } 225 .drink-table th, 226 .drink-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #2a2a3a; } 227 .drink-table th { color: var(--text-dim); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; } 228 229 .actions { display: flex; gap: 5px; } 230 231 .btn-sm { 232 border: none; 233 border-radius: 5px; 234 padding: 4px 9px; 235 cursor: pointer; 236 font-size: 0.9rem; 237 font-weight: 700; 238 line-height: 1; 239 } 240 .btn-minus { background: #2a2a3a; color: #aaa; } 241 .btn-plus { background: #1a4a2a; color: #8eff9e; } 242 .btn-del { background: #4a1a1a; color: #ff8080; } 243 .btn-sm:hover { opacity: 0.85; } 244 245 /* Add drink form */ 246 .add-drink-form { 247 margin-top: 1rem; 248 padding-top: 1rem; 249 border-top: 1px solid #2a2a3a; 250 } 251 252 .add-drink-form h3 { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.6rem; } 253 254 .add-drink-row { 255 display: flex; 256 gap: 8px; 257 align-items: flex-end; 258 flex-wrap: wrap; 259 } 260 261 .add-field { 262 display: flex; 263 flex-direction: column; 264 gap: 4px; 265 flex: 1; 266 min-width: 90px; 267 } 268 269 .add-field label { 270 font-size: 0.72rem; 271 color: var(--text-dim); 272 text-transform: uppercase; 273 letter-spacing: 0.06em; 274 } 275 276 .add-field select, 277 .add-field input { 278 background: var(--surface2); 279 color: var(--text); 280 border: 1px solid #333; 281 border-radius: 6px; 282 padding: 6px 10px; 283 font-size: 0.9rem; 284 width: 100%; 285 } 286 287 .add-field input[type=number] { -moz-appearance: textfield; } 288 .add-field input::-webkit-inner-spin-button { display: none; } 289 290 .abv-preview { 291 margin-top: 0.5rem; 292 font-size: 0.8rem; 293 color: var(--accent); 294 min-height: 1.2em; 295 } 296 297 .btn-add { 298 background: var(--accent); 299 color: #fff; 300 border: none; 301 border-radius: 6px; 302 padding: 8px 16px; 303 cursor: pointer; 304 font-size: 0.9rem; 305 font-weight: 600; 306 white-space: nowrap; 307 align-self: flex-end; 308 } 309 .btn-add:hover { opacity: 0.9; } 310 311 .btn-close { 312 margin-top: 1rem; 313 width: 100%; 314 background: #2a2a3a; 315 color: var(--text-dim); 316 border: none; 317 border-radius: 6px; 318 padding: 8px; 319 cursor: pointer; 320 font-size: 0.85rem; 321 } 322 .btn-close:hover { background: #333; } 323 324 .no-drinks { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.5rem; } 325 326 /* Legend */ 327 328 .legend { 329 position: fixed; 330 bottom: 0; 331 left: 0; 332 right: 0; 333 display: flex; 334 justify-content: center; 335 flex-wrap: wrap; 336 gap: 6px 14px; 337 background: var(--surface); 338 border-top: 1px solid #2a2a3a; 339 padding: 0.6rem 1rem; 340 z-index: 50; 341 } 342 .legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-dim); } 343 .legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } 344 345 /* Summary */ 346 347 #summary { margin-bottom: 1.5rem; } 348 349 .summary-grid { 350 display: grid; 351 grid-template-columns: repeat(3, 1fr); 352 gap: 10px; 353 } 354 355 .summary-card { 356 background: var(--surface); 357 border-radius: var(--radius); 358 padding: 0.9rem 0.75rem; 359 display: flex; 360 flex-direction: column; 361 align-items: center; 362 gap: 4px; 363 } 364 365 .summary-val { 366 font-size: clamp(1.4rem, 5vw, 2rem); 367 font-weight: 700; 368 color: var(--accent); 369 line-height: 1; 370 } 371 372 .summary-val-sub { 373 font-size: 0.65em; 374 color: var(--text-dim); 375 font-weight: 400; 376 } 377 378 .summary-label { 379 font-size: 0.7rem; 380 text-transform: uppercase; 381 letter-spacing: 0.08em; 382 color: var(--text-dim); 383 }