/* * samsyn.css – SAMSYN-specific layout patterns * * Canon classes (strategios.css) cover most utilities. This file holds * SAMSYN-specific structural patterns that have no generic equivalent. * * Rsync:ed from APP/shared/css/patterns/ to SAMSYN/app/static/ at deploy. * Import order: loaded after strategios.css in base.html . */ /* ─── Form / landing page wrapper ───────────────────────────────────────── Used on: auth/login, participant/join, participant/group_landing Replaces: style="max-width:24–28rem;margin:... auto 0" ─────────────────────────────────────────────────────────────────────── */ .samsyn-form-wrap { max-width: 24rem; margin-inline: auto; } /* ─── Content page wrapper ───────────────────────────────────────────────── Used on: public/om (max-width:40rem prose container) .container-narrow (42rem) is used directly on that page — no extra rule needed. ─────────────────────────────────────────────────────────────────────── */ /* ─── Admin content wrapper ──────────────────────────────────────────────── Used on: admin/dm_link (max-width:32rem) ─────────────────────────────────────────────────────────────────────── */ .samsyn-admin-wrap { max-width: 32rem; margin-inline: auto; } /* ─── Maintenance banner section ─────────────────────────────────────────── Used on: base.html maintenance block (replaces padding-bottom:0 override) ─────────────────────────────────────────────────────────────────────── */ .samsyn-maintenance-wrap { padding-bottom: 0; } /* ─── Section top-padding modifier ───────────────────────────────────────── Used on: public/om section (padding-top:var(--s-12) override on .section) ─────────────────────────────────────────────────────────────────────── */ .samsyn-section-top { padding-top: var(--s-12); } /* ─── Vote point row ──────────────────────────────────────────────────────── Used on: partials/status (agenda point list row) Replaces: style="display:flex;justify-content:space-between;align-items:center; background:var(--bg-elevated);border:1px solid var(--border); border-radius:var(--radius-sm);padding:var(--s-2) var(--s-3)" ─────────────────────────────────────────────────────────────────────── */ .samsyn-point-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); } /* ─── Data table ────────────────────────────────────────────────────────── Used on: admin/results, demo/results, public/metod Voting data tables with right-aligned monospace numbers and header cells. ─────────────────────────────────────────────────────────────────────── */ .samsyn-table { width: 100%; border-collapse: collapse; } .samsyn-table th { padding: var(--s-3) var(--s-4) var(--s-3) 0; font-weight: 500; color: var(--fg); white-space: nowrap; text-align: left; } .samsyn-table td { padding: var(--s-2) var(--s-3); text-align: right; } .samsyn-table td:first-child { text-align: left; padding-left: 0; } .samsyn-table .mono { font-family: ui-monospace, monospace; } /* ─── Image with border (chart/screenshot thumbnails) ─────────────────── */ .samsyn-img-bordered { border-radius: var(--radius-sm); border: 1px solid var(--border); } /* ─── Section heading (h2/h3 size overrides) ────────────────────────────── Canon h2 is styled as a small-caps label. SAMSYN needs actual heading-sized h2/h3 elements. These classes override the canon style when applied. ────────────────────────────────────────────────────────── */ .samsyn-heading { font-size: 1.25rem; font-weight: 600; } .samsyn-heading--sm { font-size: 1.125rem; font-weight: 600; } /* ─── Session code display ───────────────────────────────────────────────── */ .samsyn-code-display { font-size: 1.875rem; font-family: ui-monospace, monospace; } /* ─── Wide wrapper (36rem) ─────────────────────────────────────────────── */ .samsyn-wide-wrap { max-width: 36rem; margin-inline: auto; } /* ─── Card padding override (var(--s-6) on cards that need more room) ──── */ .samsyn-card-spacious { padding: var(--s-6); } /* ─── Minimal column width (table columns, select dropdowns) ──────────── */ .min-w-120 { min-width: 120px; } /* ─── Section with background + top border ────────────────────────────── */ .samsyn-section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); padding: var(--s-8) 0; } /* ─── Action button (tall, padded, for primary form actions) ──────────── */ .samsyn-btn-action { margin-top: var(--s-6); font-size: 1.125rem; border-radius: var(--radius); }