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