my personal site
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Enhance admin HTML styling and functionality

- Added a disableMobile option to improve mobile usability.
- Introduced new CSS variables for consistent text sizing across elements.
- Updated various font sizes in the layout to utilize the new variables for better scalability and readability.
- Improved button and input styles for enhanced user interaction and accessibility.

+125 -66
+125 -66
workers/gymtracker-ads-api/src/admin-html.ts
··· 195 195 time_24hr: true, 196 196 dateFormat: 'Y-m-d\\TH:i', 197 197 minuteIncrement: 5, 198 + disableMobile: true, 198 199 plugins: [rangePlugin({ input: '#end_at' })], 199 200 onChange: () => { updateClearDatesVisibility(); markDirty(); debouncePreview(); }, 200 201 }; ··· 1202 1203 --font: 'DM Sans', system-ui, sans-serif; 1203 1204 --font-mono: 'JetBrains Mono', monospace; 1204 1205 --cta-orange: #E87722; 1206 + --text-xs: 11px; 1207 + --text-sm: 12px; 1208 + --text-base: 14px; 1209 + --text-md: 15px; 1210 + --text-lg: 16px; 1211 + --text-xl: 17px; 1205 1212 } 1206 - html { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; line-height: 1.5; -webkit-text-size-adjust: 100%; } 1207 - body { height: 100vh; margin: 0; overflow: hidden; min-width: 0; } 1213 + html { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--text-base); line-height: 1.5; -webkit-text-size-adjust: 100%; } 1214 + body { height: 100vh; margin: 0; overflow: hidden; min-width: 0; -webkit-tap-highlight-color: transparent; } 1208 1215 1209 1216 .dashboard-wrap { 1210 1217 display: grid; ··· 1225 1232 min-width: 0; 1226 1233 } 1227 1234 .topbar-home { 1228 - font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; 1235 + font-size: var(--text-sm); font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; 1236 + touch-action: manipulation; 1229 1237 } 1230 1238 .topbar-home:hover { color: var(--accent); } 1231 1239 .topbar-center { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; min-width: 0; } 1232 - .topbar-title { font-size: 13px; font-weight: 500; white-space: nowrap; } 1240 + .topbar-title { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; } 1233 1241 .topbar-sep { color: var(--border); flex-shrink: 0; opacity: 0.7; } 1234 - .topbar-sub { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 1242 + .topbar-sub { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 1235 1243 .topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } 1236 1244 .topbar-refresh { 1237 1245 padding: 4px 8px; font-size: 14px; line-height: 1; ··· 1243 1251 .dot { width: 6px; height: 6px; background: var(--border); flex-shrink: 0; } 1244 1252 .dot.on { background: var(--green); } 1245 1253 .dot.err { background: var(--red); } 1246 - .status-text { color: var(--muted); font-size: 11px; } 1254 + .status-text { color: var(--muted); font-size: var(--text-xs); } 1247 1255 .status-text.status-ok { color: var(--green); } 1248 1256 .status-text.status-err { color: var(--red); } 1249 1257 ··· 1273 1281 .status-banner-dot.ok { background: var(--green); } 1274 1282 .status-banner-dot.pending { background: var(--muted); } 1275 1283 .status-banner-dot.err { background: var(--red); } 1276 - .status-banner-text { font-size: 13px; font-weight: 500; } 1277 - .status-banner-sub { color: var(--muted); font-size: 11px; margin-top: 2px; } 1284 + .status-banner-text { font-size: var(--text-sm); font-weight: 500; } 1285 + .status-banner-sub { color: var(--muted); font-size: var(--text-xs); margin-top: 2px; } 1278 1286 .btn-as-link { 1279 1287 padding: 7px 12px; 1280 - font-size: 12px; 1288 + font-size: var(--text-sm); 1281 1289 font-family: var(--font); 1282 1290 border: 1px solid var(--accent); 1283 1291 color: var(--accent); ··· 1316 1324 border-bottom: 1px solid var(--border); 1317 1325 flex-shrink: 0; 1318 1326 } 1319 - .form-overlay-header h2 { font-size: 14px; font-weight: 500; margin: 0; min-width: 0; } 1327 + .form-overlay-header h2 { font-size: var(--text-md); font-weight: 500; margin: 0; min-width: 0; } 1320 1328 .active-inactive-toggle.active-inactive-header { justify-self: center; width: auto; min-width: 180px; margin-top: 0; } 1321 1329 .form-overlay-header > button { 1322 1330 padding: 4px 8px; ··· 1350 1358 .group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } 1351 1359 .group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0 0 6px; cursor: pointer; color: inherit; font: inherit; } 1352 1360 .group-toggle .group-label { margin-bottom: 0; } 1353 - .group-toggle-icon { font-size: 10px; color: var(--muted); } 1354 - .group-label { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0; } 1361 + .group-toggle-icon { font-size: var(--text-xs); color: var(--muted); } 1362 + .group-label { font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0; } 1355 1363 .field { display: flex; flex-direction: column; gap: 4px; } 1356 - .field-label { color: var(--muted); font-size: 11px; margin: 0; } 1357 - .field-error { display: block; font-size: 11px; color: var(--red); margin: 0; min-height: 0; } 1358 - .checkbox-label { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; cursor: pointer; } 1364 + .field-label { color: var(--muted); font-size: var(--text-xs); margin: 0; } 1365 + .field-error { display: block; font-size: var(--text-xs); color: var(--red); margin: 0; min-height: 0; } 1366 + .checkbox-label { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: var(--text-sm); cursor: pointer; } 1359 1367 .checkbox-label input { width: auto; margin: 0; } 1360 1368 1361 1369 input, select { ··· 1366 1374 border: 1px solid var(--border); 1367 1375 color: var(--text); 1368 1376 font-family: var(--font-mono); 1369 - font-size: 14px; 1377 + font-size: var(--text-base); 1370 1378 padding: 10px 12px; 1371 1379 outline: none; 1372 1380 transition: border-color 0.15s; ··· 1377 1385 1378 1386 button { 1379 1387 font-family: var(--font); 1380 - font-size: 12px; 1388 + font-size: var(--text-sm); 1381 1389 transition: color 0.15s, border-color 0.15s, background 0.15s; 1382 1390 padding: 7px 12px; 1383 1391 cursor: pointer; ··· 1385 1393 background: transparent; 1386 1394 color: var(--muted); 1387 1395 transition: color 0.1s, border-color 0.1s, background 0.1s; 1396 + touch-action: manipulation; 1388 1397 } 1389 1398 button:hover:not(:disabled) { color: var(--text); border-color: var(--text); } 1390 1399 button.primary { border-color: var(--accent); color: var(--accent); } ··· 1406 1415 pointer-events: none; 1407 1416 } 1408 1417 .clear-dates-wrap { margin-top: 6px; } 1409 - .clear-dates-btn { padding: 2px 0; font-size: 10px; color: var(--muted); border: none; background: none; cursor: pointer; text-decoration: underline; } 1418 + .clear-dates-btn { padding: 2px 0; font-size: var(--text-xs); color: var(--muted); border: none; background: none; cursor: pointer; text-decoration: underline; } 1410 1419 .clear-dates-btn:hover { color: var(--text); } 1411 1420 1412 1421 .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; position: relative; } ··· 1416 1425 display: flex; width: 100%; margin-top: 12px; border: 1px solid var(--border); 1417 1426 } 1418 1427 .active-inactive-btn { 1419 - flex: 1; padding: 10px 16px; font-size: 13px; font-weight: 500; 1428 + flex: 1; padding: 10px 16px; font-size: var(--text-sm); font-weight: 500; 1420 1429 border: none; background: transparent; color: var(--muted); 1421 1430 cursor: pointer; transition: color 0.15s, background 0.15s; 1422 1431 } ··· 1431 1440 .schedule-group { gap: 8px; } 1432 1441 .schedule-group .date-presets { margin-top: 8px; margin-bottom: 0; } 1433 1442 .tier-btn { 1434 - flex: 1; padding: 10px 16px; font-size: 13px; font-weight: 500; 1443 + flex: 1; padding: 10px 16px; font-size: var(--text-sm); font-weight: 500; 1435 1444 border: none; background: transparent; color: var(--muted); 1436 1445 cursor: pointer; transition: color 0.15s, background 0.15s; 1437 1446 } 1438 1447 .tier-btn:not(:last-child) { border-right: none; } 1439 1448 .tier-btn:hover { color: var(--text); } 1440 1449 .tier-btn.active { background: rgba(20,184,166,0.12); color: var(--accent); } 1441 - .unsaved-indicator { font-size: 11px; color: var(--yellow); position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; } 1442 - .save-status { font-size: 11px; color: var(--muted); position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; } 1450 + .unsaved-indicator { font-size: var(--text-xs); color: var(--yellow); position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; } 1451 + .save-status { font-size: var(--text-xs); color: var(--muted); position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; } 1443 1452 .save-status.status-ok { color: var(--green); } 1444 1453 .save-status.status-err { color: var(--red); } 1445 1454 ··· 1461 1470 .new-ad-card { justify-content: center; align-items: center; text-align: center; color: var(--muted); min-height: 80px; padding-right: 12px; } 1462 1471 .new-ad-card:hover { border-color: var(--accent); color: var(--accent); background: rgba(20,184,166,0.08); } 1463 1472 .new-ad-plus { font-size: 20px; line-height: 1; } 1464 - .new-ad-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } 1473 + .new-ad-label { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } 1465 1474 .ads-status-filters { display: flex; flex-wrap: wrap; gap: 4px; } 1466 - .status-filter { padding: 4px 8px; font-size: 10px; } 1475 + .status-filter { padding: 4px 8px; font-size: var(--text-xs); } 1467 1476 .status-filter.active { border-color: var(--accent); color: var(--accent); } 1468 1477 .ad-cards-group:last-child { margin-bottom: 0; } 1469 - .ad-cards-group-label { font-size: 10px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; } 1478 + .ad-cards-group-label { font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; } 1470 1479 .ad-card-wrap { position: relative; min-width: 0; height: 100%; } 1471 1480 .ad-card-wrap .ad-card { position: relative; min-width: 0; min-height: 80px; width: 100%; height: 100%; } 1472 1481 .ad-card-action { 1473 1482 position: absolute; top: 8px; right: 8px; 1474 - padding: 6px 10px; font-size: 12px; 1475 - display: flex; align-items: center; gap: 6px; 1476 - z-index: 1; flex-shrink: 0; 1483 + padding: 8px; display: flex; align-items: center; justify-content: center; 1484 + z-index: 1; flex-shrink: 0; 1485 + } 1486 + .ad-card-action-icon-wrap { 1487 + position: relative; display: inline-flex; width: 18px; height: 18px; 1488 + align-items: center; justify-content: center; flex-shrink: 0; 1489 + } 1490 + .ad-card-action-icon { 1491 + font-size: 16px; line-height: 1; transition: opacity 0.15s; 1492 + display: flex; align-items: center; justify-content: center; 1493 + width: 18px; height: 18px; 1477 1494 } 1478 - .ad-card-action-icon-wrap { position: relative; display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; } 1479 - .ad-card-action-icon { font-size: 14px; line-height: 1; transition: opacity 0.15s; } 1480 1495 .ad-card-action-icon-action { position: absolute; opacity: 0; } 1481 1496 .ad-card-action:hover .ad-card-action-icon-state { opacity: 0; } 1482 1497 .ad-card-action:hover .ad-card-action-icon-action { opacity: 1; } ··· 1492 1507 } 1493 1508 .ad-card { 1494 1509 display: flex; flex-direction: column; align-items: flex-start; gap: 4px; 1495 - padding: 10px 12px; padding-right: 56px; border: 1px solid var(--border); background: var(--surface); 1510 + padding: clamp(10px, 2.5vw, 14px) clamp(12px, 3vw, 16px); 1511 + padding-right: 56px; border: 1px solid var(--border); background: var(--surface); 1496 1512 color: var(--text); font: inherit; text-align: left; cursor: pointer; 1497 1513 transition: border-color 0.15s, background 0.15s; box-sizing: border-box; 1514 + min-height: clamp(72px, 18vw, 88px); 1498 1515 } 1499 1516 .ad-card:hover { border-color: var(--text); } 1500 1517 .ad-card.selected { border-color: var(--accent); background: rgba(20,184,166,0.08); } 1501 - .ad-card-head { font-weight: 500; font-size: 11px; } 1502 - .ad-card-dates { font-size: 10px; color: var(--muted); } 1503 - .ad-card-stats { font-size: 10px; color: var(--green); display: block; margin-top: 2px; } 1504 - .ad-card-tier { font-size: 9px; color: var(--muted); text-transform: uppercase; } 1518 + .ad-card-head { font-weight: 500; font-size: var(--text-sm); line-height: 1.4; word-break: break-word; } 1519 + .ad-card-dates { font-size: var(--text-xs); color: var(--muted); line-height: 1.4; } 1520 + .ad-card-stats { font-size: var(--text-xs); color: var(--green); display: block; margin-top: 2px; line-height: 1.4; } 1521 + .ad-card-tier { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; line-height: 1.4; } 1505 1522 .ad-kpi-box { margin-bottom: 16px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); } 1506 1523 .ad-kpi-box .group-label { margin-bottom: 8px; } 1507 1524 .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; } 1508 1525 .kpi-item { display: flex; flex-direction: column; gap: 2px; } 1509 - .kpi-label { font-size: 9px; color: var(--muted); text-transform: uppercase; } 1510 - .kpi-value { font-size: 13px; font-weight: 500; color: var(--green); } 1511 - .chip { font-size: 10px; font-weight: 500; padding: 2px 6px; border: 1px solid transparent; line-height: 1.5; } 1526 + .kpi-label { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; } 1527 + .kpi-value { font-size: var(--text-sm); font-weight: 500; color: var(--green); } 1528 + .chip { font-size: var(--text-xs); font-weight: 500; padding: 2px 6px; border: 1px solid transparent; line-height: 1.5; } 1512 1529 .chip-live { color: var(--green); background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); } 1513 1530 .chip-scheduled { color: var(--accent); background: rgba(20,184,166,0.15); border-color: rgba(20,184,166,0.3); } 1514 1531 .chip-ended { color: var(--muted); background: rgba(115,115,115,0.1); opacity: 0.9; } ··· 1516 1533 1517 1534 #adCards.loading, #calendarWrap.loading { opacity: 0.6; pointer-events: none; } 1518 1535 .calendar-empty { margin-top: 16px; padding: 24px; border: 1px dashed var(--border); background: var(--surface); text-align: center; max-width: 240px; } 1519 - .calendar-empty-text { color: var(--muted); font-size: 13px; margin: 0; } 1536 + .calendar-empty-text { color: var(--muted); font-size: var(--text-sm); margin: 0; } 1520 1537 .calendar-wrap { margin-top: 16px; border: 1px solid var(--border); background: var(--surface); padding: 18px 22px; width: 100%; min-width: 340px; max-width: 100%; } 1521 1538 .calendar-header { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 14px; } 1522 - .cal-month-label { font-size: 15px; font-weight: 500; color: var(--text); margin: 0; } 1523 - .cal-nav { padding: 4px 10px; font-size: 11px; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; } 1539 + .cal-month-label { font-size: var(--text-md); font-weight: 500; color: var(--text); margin: 0; } 1540 + .cal-nav { padding: 4px 10px; font-size: var(--text-xs); background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; } 1524 1541 .cal-nav.cal-today { margin-left: 8px; } 1525 1542 .cal-nav:hover { color: var(--text); border-color: var(--text); } 1526 1543 .calendar-grid { display: flex; flex-direction: column; gap: 0; } 1527 - .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 8px; border-bottom: 1px solid var(--border); } 1544 + .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 8px; border-bottom: 1px solid var(--border); } 1528 1545 .cal-weekdays span { text-align: center; } 1529 1546 .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); width: 100%; } 1530 - .cal-cell { min-height: 80px; height: auto; padding: 10px; background: var(--surface); display: flex; flex-direction: column; font-size: 11px; } 1547 + .cal-cell { min-height: 80px; height: auto; padding: 10px; background: var(--surface); display: flex; flex-direction: column; font-size: var(--text-xs); } 1531 1548 .cal-cell.other-month { background: var(--bg); } 1532 1549 .cal-cell.other-month .cal-cell-num { color: var(--muted); opacity: 0.6; } 1533 1550 .cal-cell.today { outline: 1px solid var(--accent); outline-offset: -1px; z-index: 1; } 1534 1551 .cal-cell.today .cal-cell-num { color: var(--accent); font-weight: 500; } 1535 1552 .cal-cell.has-conflict { outline: 1px dashed var(--yellow); outline-offset: -1px; } 1536 - .cal-cell-num { font-size: 12px; color: var(--text); margin-bottom: 4px; } 1553 + .cal-cell-num { font-size: var(--text-sm); color: var(--text); margin-bottom: 4px; } 1537 1554 .cal-cell-ads { display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; overflow: hidden; } 1538 - .cal-ad-pill { font-size: 10px; padding: 5px 8px; min-height: 28px; border: none; cursor: pointer; font-family: var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } 1555 + .cal-ad-pill { font-size: var(--text-xs); padding: 5px 8px; min-height: 28px; border: none; cursor: pointer; font-family: var(--font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } 1539 1556 .cal-ad-pill.chip-live { background: rgba(34,197,94,0.2); color: var(--green); } 1540 1557 .cal-ad-pill.chip-scheduled { background: rgba(20,184,166,0.2); color: var(--accent); } 1541 1558 .cal-ad-pill.chip-ended { background: rgba(102,102,102,0.2); color: var(--muted); } 1542 1559 .cal-ad-pill.chip-paused { background: rgba(251,191,36,0.2); color: var(--yellow); } 1543 1560 .cal-ad-pill:hover { opacity: 0.9; } 1544 1561 .cal-ad-pill.selected { outline: 1px solid var(--text); outline-offset: 1px; } 1545 - .cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted); } 1562 + .cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted); } 1546 1563 .cal-legend-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; vertical-align: middle; } 1547 1564 .cal-legend-dot.live { background: var(--green); } 1548 1565 .cal-legend-dot.scheduled { background: var(--accent); } ··· 1556 1573 .id-version-row input:first-child { flex: 1; min-width: 0; } 1557 1574 .id-version-row .version-input { width: 64px; min-width: 64px; flex-shrink: 0; } 1558 1575 .id-version-header { min-width: 0; max-width: 320px; justify-self: center; } 1559 - .id-version-header input { min-height: 36px; padding: 6px 10px; font-size: 13px; } 1576 + .id-version-header input { min-height: 36px; padding: 6px 10px; font-size: var(--text-sm); } 1560 1577 .ad-preview { border: 1px solid var(--border); padding: 0; background: var(--surface); min-height: 8rem; overflow: hidden; } 1561 - .preview { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; text-align: left; width: 100%; max-width: 100%; } 1578 + .preview { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: var(--text-base); text-align: left; width: 100%; max-width: 100%; } 1562 1579 .preview.preview-text { padding: 16px; } 1563 1580 .preview.preview-banner .preview-copy-block, 1564 1581 .preview.preview-feature .preview-copy-block { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; width: 100%; } 1565 1582 .preview-sponsor-line { display: flex; align-items: center; gap: 8px; } 1566 - .preview-sponsor { font-size: 13px; color: var(--muted); } 1583 + .preview-sponsor { font-size: var(--text-sm); color: var(--muted); } 1567 1584 .preview-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; } 1568 1585 .preview-copy { display: flex; flex-direction: column; gap: 10px; width: 100%; } 1569 - .preview-headline { font-size: 17px; font-weight: 600; line-height: 1.3; } 1570 - .preview-subline { font-size: 14px; color: var(--muted); line-height: 1.4; } 1586 + .preview-headline { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; } 1587 + .preview-subline { font-size: var(--text-base); color: var(--muted); line-height: 1.4; } 1571 1588 .preview-cta-wrap { 1572 1589 display: flex; align-items: center; justify-content: center; gap: 6px; 1573 1590 width: 100%; padding: 10px 0; 1574 1591 color: var(--cta-orange); background: rgba(232, 119, 34, 0.12); 1575 - font-size: 14px; font-weight: 500; cursor: default; border: none; 1592 + font-size: var(--text-base); font-weight: 500; cursor: default; border: none; 1576 1593 } 1577 - .preview-cta-arrow { font-size: 12px; opacity: 0.9; } 1594 + .preview-cta-arrow { font-size: var(--text-sm); opacity: 0.9; } 1578 1595 .preview-img-wrap { width: 100%; overflow: hidden; position: relative; background: var(--border); } 1579 1596 .preview-img { width: 100%; height: 100%; object-fit: cover; display: block; } 1580 1597 .preview-img-wrap.preview-img-error { background: var(--border); } 1581 1598 .preview-img-wrap.preview-img-error .preview-img { display: none; } 1582 - .preview-img-placeholder { width: 100%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); } 1599 + .preview-img-placeholder { width: 100%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); color: var(--muted); } 1583 1600 1584 1601 ::-webkit-scrollbar { width: 4px; height: 4px; } 1585 1602 ::-webkit-scrollbar-thumb { background: var(--border); } ··· 1595 1612 @media (min-width: 1200px) { 1596 1613 .schedule-grid { grid-template-columns: 1fr minmax(480px, 640px); } 1597 1614 .cal-cell { min-height: 88px; } 1598 - .cal-ad-pill { font-size: 11px; min-height: 30px; } 1615 + .cal-ad-pill { font-size: var(--text-xs); min-height: 30px; } 1599 1616 } 1600 1617 1601 1618 @media (max-width: 768px) { 1619 + .form-overlay { padding: 0; align-items: stretch; justify-content: stretch; } 1620 + .form-overlay-backdrop { display: none; } 1621 + .form-overlay-panel { 1622 + width: 100%; height: 100%; max-width: none; max-height: none; 1623 + border: none; border-radius: 0; 1624 + } 1602 1625 .admin-editor-grid { grid-template-columns: 1fr; } 1603 1626 .preview-pane { position: static; } 1604 - .calendar-wrap { max-width: 100%; padding: 10px 12px; min-width: 300px; } 1627 + .calendar-wrap { max-width: 100%; padding: 10px 12px; min-width: 0; } 1605 1628 .cal-cell { min-height: 56px; padding: 6px; } 1606 - .cal-cell-num { font-size: 10px; } 1607 - .cal-ad-pill { font-size: 8px; padding: 0 3px; } 1629 + .cal-cell-num { font-size: var(--text-xs); } 1630 + .cal-ad-pill { font-size: var(--text-xs); padding: 4px 6px; min-height: 36px; } 1631 + .topbar-refresh { 1632 + min-width: 44px; min-height: 44px; padding: 0 12px; 1633 + display: flex; align-items: center; justify-content: center; 1634 + border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); 1635 + border-radius: 0; 1636 + } 1637 + .topbar-refresh:hover { border-left-color: var(--accent); border-right-color: var(--accent); } 1638 + .status-filter { min-height: 44px; min-width: 44px; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: center; } 1639 + .cal-nav { min-height: 44px; min-width: 44px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; } 1640 + .cal-nav.cal-today { min-width: auto; padding: 10px 14px; } 1641 + .form-overlay-header { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 12px; } 1642 + .form-overlay-header h2 { grid-column: 1; grid-row: 1; } 1643 + .form-overlay-header > button[aria-label="Close"] { grid-column: 2; grid-row: 1; min-width: 44px; min-height: 44px; padding: 10px; } 1644 + .active-inactive-toggle.active-inactive-header { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin-top: 0; } 1645 + .form-overlay-header .active-inactive-btn { min-height: 44px; } 1608 1646 } 1609 1647 @media (max-width: 640px) { 1648 + :root { 1649 + --text-xs: 12px; 1650 + --text-sm: 13px; 1651 + --text-base: 15px; 1652 + --text-md: 16px; 1653 + } 1610 1654 .dashboard-wrap { grid-template-rows: 40px 1fr; } 1611 1655 .main { padding: 12px 16px; } 1612 1656 .overview-status-banner { padding: 10px 12px; margin-bottom: 12px; } 1613 - .status-banner-text { font-size: 12px; } 1614 - .status-banner-sub { font-size: 10px; } 1615 - .calendar-wrap { margin-top: 12px; min-width: 260px; } 1616 - .cal-cell { min-height: 50px; padding: 5px; font-size: 9px; } 1617 - .cal-legend { margin-top: 10px; padding-top: 10px; gap: 8px; font-size: 9px; } 1618 - .ad-card { padding: 8px 10px; min-width: 0; } 1619 - .ad-card-head { font-size: 10px; } 1657 + .status-banner-text { font-size: var(--text-sm); } 1658 + .status-banner-sub { font-size: var(--text-xs); } 1659 + .calendar-wrap { margin-top: 12px; min-width: 0; } 1660 + .cal-cell { min-height: 50px; padding: 5px; font-size: var(--text-xs); } 1661 + .cal-legend { margin-top: 10px; padding-top: 10px; gap: 8px; font-size: var(--text-xs); } 1662 + .ad-card { padding: 10px 12px; min-width: 0; padding-right: 52px; } 1663 + .ad-card-action { min-width: 44px; min-height: 44px; padding: 10px; } 1664 + .ad-card-action-icon-wrap { width: 20px; height: 20px; } 1665 + .ad-card-action-icon { font-size: 18px; width: 20px; height: 20px; } 1620 1666 .form-actions, .form-actions-right { gap: 8px; } 1667 + .date-presets button { min-height: 44px; min-width: 44px; padding: 10px 14px; } 1668 + .tier-btn, .active-inactive-btn { min-height: 44px; } 1669 + .btn-as-link { min-height: 44px; padding: 10px 16px; } 1621 1670 } 1622 1671 @media (max-width: 400px) { 1623 - .topbar { padding: 0 8px; gap: 6px; } 1672 + .topbar { padding: 0 8px; gap: 8px; } 1624 1673 .topbar-sub { display: none; } 1625 1674 .topbar-sep { display: none; } 1675 + .topbar-title { font-size: var(--text-sm); } 1676 + .topbar-home { font-size: var(--text-sm); } 1677 + .main-toolbar { flex-direction: column; align-items: stretch; } 1678 + .toolbar-search { max-width: none; } 1679 + .form-actions { flex-direction: column; align-items: stretch; } 1680 + .form-actions-right { margin-left: 0; flex-wrap: wrap; } 1681 + .form-actions-right button { flex: 1; min-height: 44px; } 1682 + .delete-btn { min-height: 44px; } 1683 + .new-ad-card { min-height: 88px; } 1684 + .ad-cards { grid-template-columns: 1fr; } 1626 1685 } 1627 1686 </style> 1628 1687 </body>