agentbox
8466a6e029
CI / test-and-package (push) Successful in 38s
Add .manage-form label styling and .manage-form input[type="text"] rule to match the existing password input styling, so the ntfy topic URL field looks consistent with the rest of the UI.
259 lines
8.0 KiB
CSS
259 lines
8.0 KiB
CSS
/* ── Reset & Base ── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: #f5f5f5;
|
|
--surface: #fff;
|
|
--text: #222;
|
|
--muted: #888;
|
|
--border: #ddd;
|
|
--green: #2e7d32;
|
|
--green-bg: #e8f5e9;
|
|
--red: #c62828;
|
|
--red-bg: #ffebee;
|
|
--orange: #e65100;
|
|
--orange-bg: #fff3e0;
|
|
--gray-bg: #f0f0f0;
|
|
--primary: #1565c0;
|
|
--radius: 8px;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── Nav ── */
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 24px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.brand { font-size: 1.2rem; font-weight: 700; }
|
|
.nav-right { display: flex; align-items: center; gap: 12px; }
|
|
.nav-household { font-weight: 600; font-size: 0.85rem; color: var(--primary); background: #e3f2fd; padding: 2px 10px; border-radius: 12px; }
|
|
.nav-user { font-weight: 500; color: var(--muted); }
|
|
|
|
/* ── Buttons ── */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
color: var(--text);
|
|
transition: background 0.15s;
|
|
}
|
|
.btn:hover { background: #eee; }
|
|
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
|
|
.btn-primary:hover { background: #0d47a1; }
|
|
.btn-sm { padding: 4px 10px; font-size: 0.8rem; }
|
|
|
|
/* ── Container ── */
|
|
.container { max-width: 720px; margin: 32px auto; padding: 0 16px; }
|
|
|
|
/* ── Forms ── */
|
|
.form-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 32px;
|
|
max-width: 420px;
|
|
margin: 40px auto;
|
|
}
|
|
.register-card { max-width: 480px; }
|
|
.form-card h2 { margin-bottom: 20px; }
|
|
.form-card label { display: block; margin: 12px 0 4px; font-weight: 500; font-size: 0.9rem; }
|
|
.form-card input[type="text"],
|
|
.form-card input[type="password"] {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
}
|
|
.form-card button[type="submit"] { margin-top: 20px; width: 100%; }
|
|
.form-footer { margin-top: 16px; text-align: center; font-size: 0.85rem; color: var(--muted); }
|
|
|
|
/* Household section */
|
|
.household-section {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 16px;
|
|
margin: 16px 0;
|
|
}
|
|
.household-section legend {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
padding: 0 8px;
|
|
}
|
|
.radio-label {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 12px 0 4px !important;
|
|
cursor: pointer;
|
|
font-weight: 400 !important;
|
|
}
|
|
.radio-label input[type="radio"] { margin: 0; }
|
|
.household-block {
|
|
margin: 4px 0 12px 24px;
|
|
}
|
|
.select-input, .text-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
background: var(--surface);
|
|
}
|
|
.hint { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
|
|
|
|
/* ── Flashes ── */
|
|
.flashes { margin-bottom: 16px; }
|
|
.flash {
|
|
padding: 10px 16px;
|
|
border-radius: var(--radius);
|
|
margin-bottom: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.flash-error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
|
|
.flash-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
|
|
|
|
/* ── Dashboard ── */
|
|
.dashboard-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.dashboard-header h2 { font-size: 1.3rem; }
|
|
.date-nav { display: flex; align-items: center; gap: 8px; }
|
|
.date-display { font-weight: 600; font-size: 0.95rem; }
|
|
|
|
.table-wrapper {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow-x: auto;
|
|
}
|
|
.meal-table { width: 100%; border-collapse: collapse; }
|
|
.meal-table th, .meal-table td {
|
|
padding: 12px 16px;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.meal-table th {
|
|
background: #fafafa;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--muted);
|
|
}
|
|
.meal-table th:first-child, .meal-table td:first-child { text-align: left; }
|
|
.user-cell { font-weight: 600; min-width: 100px; }
|
|
.meal-col { min-width: 180px; }
|
|
|
|
/* ── Response Cells ── */
|
|
.response-cell { vertical-align: middle; }
|
|
.response-cell.status-yes { background: var(--green-bg); }
|
|
.response-cell.status-no { background: var(--red-bg); }
|
|
.response-cell.status-not_answered { background: var(--gray-bg); }
|
|
|
|
.btn-row { display: flex; gap: 6px; justify-content: center; }
|
|
|
|
/* ── Chips ── */
|
|
.chip {
|
|
padding: 6px 18px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 20px;
|
|
background: var(--surface);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
transition: all 0.15s;
|
|
}
|
|
.chip:hover:not(:disabled) { border-color: #999; }
|
|
.chip:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.chip-yes.active { background: var(--green); color: #fff; border-color: var(--green); }
|
|
.chip-no.active { background: var(--red); color: #fff; border-color: var(--red); }
|
|
|
|
/* ── Changed-mind badge ── */
|
|
.changed-badge {
|
|
font-size: 0.7rem;
|
|
color: var(--orange);
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
}
|
|
.response-cell.changed-mind {
|
|
box-shadow: inset 0 0 0 2px var(--orange);
|
|
}
|
|
|
|
/* ── Static badge (history view for other users) ── */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 14px;
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
.badge-yes { background: var(--green); color: #fff; }
|
|
.badge-no { background: var(--red); color: #fff; }
|
|
.muted { color: var(--muted); }
|
|
|
|
.empty-state { text-align: center; color: var(--muted); margin: 40px 0; }
|
|
|
|
/* ── User tags ── */
|
|
.admin-tag { font-size: 0.65rem; font-weight: 600; color: var(--orange); background: var(--orange-bg); padding: 1px 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle; }
|
|
.you-tag { font-size: 0.65rem; font-weight: 600; color: var(--primary); background: #e3f2fd; padding: 1px 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle; }
|
|
|
|
/* ── Action column ── */
|
|
.action-col { width: 80px; }
|
|
.action-cell { vertical-align: middle; }
|
|
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); font-size: 0.8rem; padding: 4px 10px; }
|
|
.btn-danger:hover { background: #b71c1c; }
|
|
|
|
/* ── Manage section ── */
|
|
.manage-section { margin-top: 24px; }
|
|
.manage-details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
|
|
.manage-details summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
|
|
.manage-forms { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; }
|
|
.manage-form { flex: 1; min-width: 220px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
|
|
.manage-form h4 { margin-bottom: 8px; font-size: 0.9rem; }
|
|
.manage-form .hint { margin-bottom: 8px; }
|
|
.manage-form label { display: block; margin: 12px 0 4px; font-weight: 500; font-size: 0.85rem; }
|
|
.manage-form input[type="text"],
|
|
.manage-form input[type="password"] { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 8px; }
|
|
|
|
/* ── Language footer ── */
|
|
.lang-footer {
|
|
text-align: center;
|
|
padding: 16px;
|
|
margin-top: 32px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.lang-link {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
margin: 0 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
border-radius: 12px;
|
|
transition: all 0.15s;
|
|
}
|
|
.lang-link:hover { background: #eee; color: var(--text); }
|
|
.lang-active { background: var(--primary); color: #fff; }
|
|
.lang-active:hover { background: #0d47a1; color: #fff; }
|