/* ========================================================================== Memberius — Universal Form API -------------------------------------------------------------------------- Single source of truth za sve form elemente (input, label, textarea, select+Tom-Select, checkbox, radio, switch, invalid feedback, honeypot, form-section divider). Loadira se u svim aktivnim layoutima. Theme switching: light je default; dark se aktivira preko `html[data-theme="dark"]`. Layouti s tamnom pozadinom (public-auth, plus editorial public-landing / public-tenant koji već imaju theme system) postavljaju taj atribut na `` rootu. Sve boje, radius i sjene izvedene su iz design-tokens.css (--brand-*). ========================================================================== */ :root { --form-text: var(--brand-ink-900); --form-text-muted: var(--brand-ink-500); --form-placeholder: var(--brand-ink-300); --form-border: var(--brand-ink-200); --form-border-hover: var(--brand-ink-300); --form-border-focus: var(--brand-secondary-500); --form-border-invalid: var(--brand-danger); --form-bg: var(--brand-paper); --form-surface: var(--brand-paper); --form-bg-readonly: var(--brand-ink-50); --form-label: var(--brand-ink-500); --form-label-strong: var(--brand-ink-700); --form-accent: var(--brand-primary-500); --form-accent-bg: var(--brand-primary-50); --form-accent-text: var(--brand-primary-700); --form-pill-bg: var(--brand-primary-50); --form-pill-text: var(--brand-primary-700); --form-pill-border: var(--brand-primary-100); --form-ring: var(--brand-shadow-ring); } html[data-theme="dark"] { --form-text: rgba(255, 255, 255, 0.92); --form-text-muted: rgba(255, 255, 255, 0.55); --form-placeholder: rgba(255, 255, 255, 0.4); --form-border: rgba(255, 255, 255, 0.15); --form-border-hover: rgba(255, 255, 255, 0.3); --form-border-focus: var(--brand-secondary-500); --form-border-invalid: #f87171; --form-bg: rgba(255, 255, 255, 0.04); --form-surface: var(--brand-ink-800); --form-bg-readonly: rgba(255, 255, 255, 0.06); --form-label: rgba(255, 255, 255, 0.78); --form-label-strong: rgba(255, 255, 255, 0.95); --form-accent: var(--brand-secondary-500); --form-accent-bg: rgba(112, 145, 230, 0.12); --form-accent-text: var(--brand-secondary-300); --form-pill-bg: rgba(112, 145, 230, 0.12); --form-pill-text: var(--brand-secondary-300); --form-pill-border: rgba(112, 145, 230, 0.3); --form-ring: 0 0 0 3px rgba(112, 145, 230, 0.35); } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .memberius-input-container { margin-bottom: 16px; } .memberius-form-section-title { font-family: var(--brand-font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--form-accent-text); margin: 1.75rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--form-border); } .memberius-form-section-title:first-child { margin-top: 0; } .memberius-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- Label -------------------------------------------------------------------------- */ .memberius-label { font-family: var(--brand-font-body); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; width: 100%; margin: 0; padding-bottom: 0.5rem; color: var(--form-label); } .memberius-label.no-text-format { font-weight: 400; text-transform: none; font-size: 0.95rem; letter-spacing: 0; } .memberius-checkbox-label { font-family: var(--brand-font-body); font-weight: 400; text-transform: none; font-size: 0.92rem; letter-spacing: 0; padding: 0 0 0 4px; color: var(--form-text); } /* -------------------------------------------------------------------------- Input — underline pattern (border-bottom only) -------------------------------------------------------------------------- */ .memberius-input { border: none; background-color: transparent; border-radius: 0; position: relative; border-bottom: 1.5px solid var(--form-border); padding: 4px 0 6px; width: 100%; font-family: var(--brand-font-body); font-size: 0.95rem; color: var(--form-text); transition: border-color 0.2s ease; } .memberius-input::placeholder { color: var(--form-placeholder); opacity: 1; } .memberius-input:not(.memberius-input-checkbox):not([type="checkbox"]):not([type="radio"]):focus { border: none; border-bottom: 1.5px solid var(--form-border-focus); background-color: transparent; box-shadow: none; outline: 0; } .memberius-input.is-invalid { border-bottom-color: var(--form-border-invalid); } .memberius-input[readonly], input[readonly] { background-color: var(--form-bg-readonly); color: var(--form-text-muted); border-color: var(--form-border); cursor: not-allowed; } .memberius-input-textarea { resize: vertical; min-height: 5.5rem; } /* Native date picker: invert calendar icon on dark theme */ html[data-theme="dark"] .memberius-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; } /* The original 's own border-bottom (admin TS pattern already handles this elsewhere). */ .ts-wrapper.locked .ts-control { background-color: var(--form-bg-readonly); color: var(--form-text-muted); border-color: var(--form-border); cursor: not-allowed; } .ts-wrapper.disabled, .ts-wrapper.locked { opacity: 0.55; cursor: not-allowed; } /* -------------------------------------------------------------------------- Custom Tom-Select render templates -------------------------------------------------------------------------- Members signup form (`tomSelectRenderGroupSchedules()` u member-signup.js) renderira grupe s nazivom, statusom i rasporedima. -------------------------------------------------------------------------- */ .memberius-signup-group-option { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.15rem 0; } .memberius-signup-group-name { font-weight: 600; color: var(--form-label-strong); display: flex; align-items: center; gap: 0.5rem; } .memberius-signup-group-status { display: inline-block; font-size: 0.7rem; font-weight: 500; padding: 0.1rem 0.55rem; border-radius: var(--brand-radius-pill); background: var(--form-pill-bg); color: var(--form-pill-text); } .memberius-signup-group-schedules { font-size: 0.8rem; color: var(--form-text-muted); line-height: 1.4; } .memberius-signup-group-schedule-row { white-space: nowrap; } .memberius-signup-group-schedules-empty { font-style: italic; color: var(--form-text-muted); } /* -------------------------------------------------------------------------- Pagination (Bootstrap .page-link override, theme-aware) -------------------------------------------------------------------------- Koristi se uglavnom iz Laravel paginacije (`$paginator->links()`). -------------------------------------------------------------------------- */ .page-link { background: transparent; border-color: var(--form-border); color: var(--form-text-muted); } .page-link:hover { background: var(--form-accent-bg); border-color: var(--form-pill-border); color: var(--form-accent-text); } .page-item.active .page-link { background: var(--form-accent); border-color: var(--form-accent); color: var(--brand-paper); } .page-item.disabled .page-link { background: transparent; border-color: var(--form-border); color: var(--form-placeholder); opacity: 0.5; }