my personal site
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
+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>