/* ============================================================================ * ss-ui.css — GSOC design system * * Single source of truth for the dark-blue "GPT 5.5" design language. * Extracted from schedule.php's Shift Information modal + Pending Approvals * banner, which are the canonical reference implementations. * * Component naming uses BEM-ish double-underscore for elements and * double-hyphen for modifiers, prefixed `ss-` so they never collide with * Bootstrap or legacy class names. * * .ss-modal rounded glow-edged dialog (Shift Information) * .ss-modal__close square X close, top-right * .ss-notice colored-banner attention block (Pending Approvals) * .ss-notice--warning amber accent * .ss-notice--danger red accent * .ss-notice--info blue accent * .ss-notice--success green accent * .ss-btn base button shape * .ss-btn--primary single blue CTA, bottom-right of form * .ss-btn--outline-danger red outline + tinted infill * .ss-btn--outline-warning amber outline + tinted infill * .ss-btn--outline-info blue outline + tinted infill * .ss-btn--ghost transparent, neutral border * .ss-input / .ss-select / .ss-textarea dark popsicle form fields * .ss-section-label uppercase muted form-section label * .ss-pill small rounded badge * .ss-card base panel surface * * Usage: include this stylesheet via the page (or include the helper * `ss_ui_assets()` from `includes/ss-ui-components.php`). * ========================================================================= */ :root { /* Surface stack: bg is the page, surface is the card, surface-2 is the inner panel (e.g. the form area inside a modal). */ --ss-bg: #000710; --ss-surface: #020b16; --ss-surface-2: #060f1b; --ss-panel: #0f1a32; --ss-border: #1f2e52; --ss-border-soft: rgba(31, 46, 82, 0.55); --ss-text: #e6edf7; --ss-text-muted: #8893ab; --ss-text-dim: #6b7488; /* Accent palette — semantic, not literal. Components mix these into rgba() tints for outline buttons / notice banners. */ --ss-blue: #3b82f6; --ss-blue-strong: #2563eb; --ss-blue-soft: #93c5fd; --ss-amber: #f59e0b; --ss-amber-text: #fbbf24; --ss-red: #ef4444; --ss-red-soft: #fca5a5; --ss-green: #22c55e; --ss-green-soft: #86efac; /* Glow used on focused modals and CTAs. */ --ss-glow-blue: 0 0 26px rgba(59, 130, 246, 0.36), 0 0 70px rgba(59, 130, 246, 0.18), 0 18px 50px rgba(0, 0, 0, 0.58); --ss-radius: 12px; --ss-radius-lg: 16px; --ss-radius-pill: 999px; } /* ============================================================================ * Modal — rounded, blue-tinted border, outer glow, square X close * ========================================================================= */ .ss-modal .modal-content, .ss-modal.modal-content, .modal-content.ss-modal { border-radius: var(--ss-radius-lg) !important; overflow: hidden !important; background: var(--ss-surface) !important; border: 1px solid rgba(59, 130, 246, 0.72) !important; background-clip: padding-box !important; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22), 0 0 0 1px rgba(59, 130, 246, 0.50), var(--ss-glow-blue) !important; color: var(--ss-text); } .ss-modal .modal-header, .ss-modal .modal-body, .ss-modal .modal-footer { background: var(--ss-surface) !important; color: var(--ss-text); border-color: var(--ss-border-soft) !important; } .ss-modal .modal-header { padding: 16px 18px 12px 18px !important; } .ss-modal .modal-body { padding: 0 16px 16px 16px !important; } .ss-modal .modal-title { color: var(--ss-text); font-weight: 600; } .ss-modal__form, .ss-modal .ss-modal__form { background: var(--ss-surface-2) !important; border: 1px solid rgba(59, 130, 246, 0.24) !important; border-radius: 14px !important; padding: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } /* Square X close in the top-right corner. Replaces Bootstrap's circular icon. */ .ss-modal .btn-close, .ss-modal .ss-modal__close, .ss-modal__close { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; padding: 0 !important; margin: 0 !important; border-radius: 8px !important; background-color: rgba(15, 26, 50, 0.92) !important; background-image: none !important; border: 1px solid rgba(59, 130, 246, 0.35) !important; opacity: 1 !important; filter: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 0 12px rgba(59,130,246,0.12) !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .ss-modal .btn-close::before, .ss-modal .ss-modal__close::before, .ss-modal__close::before { content: "×" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -53%) !important; color: #e6edf7 !important; font-size: 22px !important; font-weight: 500 !important; line-height: 1 !important; display: block !important; } .ss-modal .btn-close::after, .ss-modal .ss-modal__close::after, .ss-modal__close::after { display: none !important; } .ss-modal .btn-close:hover, .ss-modal .ss-modal__close:hover, .ss-modal__close:hover { background-color: rgba(30, 58, 138, 0.42) !important; border-color: rgba(96, 165, 250, 0.55) !important; } /* ============================================================================ * Notice / banner — Pending Approvals shape, semantic variants * ========================================================================= */ .ss-notice { background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.45); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; color: var(--ss-text); } .ss-notice__strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .ss-notice__left { display: flex; align-items: center; gap: 12px; } .ss-notice__icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(245, 158, 11, 0.18); color: var(--ss-amber); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .ss-notice__title { color: var(--ss-text); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; } .ss-notice__count { background: var(--ss-amber); color: #1a1207; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; } .ss-notice__actions { display: flex; gap: 8px; flex-wrap: wrap; } .ss-notice__sub { color: var(--ss-text-muted); font-size: 12.5px; margin-top: 8px; display: flex; align-items: flex-start; gap: 6px; } .ss-notice__sub i { margin-top: 3px; flex-shrink: 0; } /* --- semantic colors --- */ .ss-notice--warning { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.45); } .ss-notice--warning .ss-notice__icon { background: rgba(245, 158, 11, 0.18); color: var(--ss-amber); } .ss-notice--warning .ss-notice__count { background: var(--ss-amber); color: #1a1207; } .ss-notice--danger { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.45); } .ss-notice--danger .ss-notice__icon { background: rgba(239, 68, 68, 0.18); color: var(--ss-red-soft); } .ss-notice--danger .ss-notice__count { background: var(--ss-red); color: #fff; } .ss-notice--info { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.45); } .ss-notice--info .ss-notice__icon { background: rgba(59, 130, 246, 0.18); color: var(--ss-blue-soft); } .ss-notice--info .ss-notice__count { background: var(--ss-blue); color: #fff; } .ss-notice--success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.45); } .ss-notice--success .ss-notice__icon { background: rgba(34, 197, 94, 0.18); color: var(--ss-green-soft); } .ss-notice--success .ss-notice__count { background: var(--ss-green); color: #07210f; } /* Dismissable variant — pair with a [data-ss-notice-dismiss] button */ .ss-notice[hidden] { display: none !important; } /* ============================================================================ * Buttons * ========================================================================= */ .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid transparent; background: transparent; color: var(--ss-text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .ss-btn:focus-visible { outline: 2px solid var(--ss-blue); outline-offset: 2px; } .ss-btn:disabled, .ss-btn[aria-disabled="true"], .ss-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Single primary CTA — blue infill, bottom-right of forms */ .ss-btn--primary { background: var(--ss-blue); border-color: var(--ss-blue-strong); color: #fff; } .ss-btn--primary:hover:not(:disabled) { background: var(--ss-blue-strong); border-color: var(--ss-blue-strong); color: #fff; box-shadow: 0 0 16px rgba(59, 130, 246, 0.35); } /* Outline variants — colored border, tinted infill, colored label */ .ss-btn--outline-danger { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.55); color: var(--ss-red-soft); } .ss-btn--outline-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.20); border-color: rgba(239, 68, 68, 0.85); color: #fecaca; } .ss-btn--outline-warning { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.55); color: var(--ss-amber-text); } .ss-btn--outline-warning:hover:not(:disabled) { background: rgba(245, 158, 11, 0.20); border-color: rgba(245, 158, 11, 0.85); color: var(--ss-amber-text); } .ss-btn--outline-info { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.55); color: var(--ss-blue-soft); } .ss-btn--outline-info:hover:not(:disabled) { background: rgba(59, 130, 246, 0.20); border-color: rgba(59, 130, 246, 0.85); color: #bfdbfe; } .ss-btn--outline-success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.55); color: var(--ss-green-soft); } .ss-btn--outline-success:hover:not(:disabled) { background: rgba(34, 197, 94, 0.20); border-color: rgba(34, 197, 94, 0.85); color: #bbf7d0; } .ss-btn--ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--ss-border); color: var(--ss-text); } .ss-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: var(--ss-blue); } /* Size variants */ .ss-btn--sm { padding: 5px 10px; font-size: 12px; } .ss-btn--lg { padding: 9px 18px; font-size: 14px; } /* Icon-only square button */ .ss-btn--icon { width: 34px; height: 34px; padding: 0; border-radius: 8px; } /* ============================================================================ * Form fields — popsicle-shaped dark inputs * ========================================================================= */ .ss-input, .ss-select, .ss-textarea, input.ss-input, select.ss-select, textarea.ss-textarea { background: #071426 !important; border: 1px solid var(--ss-border) !important; color: var(--ss-text) !important; border-radius: 8px !important; padding: 8px 12px; font-size: 13.5px; width: 100%; line-height: 1.4; } .ss-input::placeholder, .ss-textarea::placeholder { color: var(--ss-text-dim); } .ss-input:focus, .ss-select:focus, .ss-textarea:focus { border-color: var(--ss-blue) !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important; outline: none; } /* When used inside an ss-modal, the existing Bootstrap form-control / form-select markup should auto-skin to the same look. */ .ss-modal .form-control, .ss-modal .form-select { background: #071426 !important; border: 1px solid var(--ss-border) !important; color: var(--ss-text) !important; border-radius: 8px !important; font-size: 13.5px; } .ss-modal .form-control::placeholder { color: var(--ss-text-dim); } .ss-modal .form-control:focus, .ss-modal .form-select:focus { border-color: var(--ss-blue) !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important; } /* Uppercase muted section label that sits above an input. */ .ss-section-label, .ss-modal label, .ss-modal .form-label { color: var(--ss-text-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; display: block; } /* ============================================================================ * Pills / badges * ========================================================================= */ .ss-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--ss-panel); border: 1px solid var(--ss-border); color: var(--ss-text); font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: var(--ss-radius-pill); line-height: 1.4; } .ss-pill--blue { background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.45); color: var(--ss-blue-soft); } .ss-pill--amber { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.45); color: var(--ss-amber-text); } .ss-pill--red { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.45); color: var(--ss-red-soft); } .ss-pill--green { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.45); color: var(--ss-green-soft); } .ss-pill--muted { background: rgba(255,255,255,0.04); border-color: var(--ss-border); color: var(--ss-text-muted); } /* ============================================================================ * Panels / cards * ========================================================================= */ .ss-card { background: var(--ss-surface-2); border: 1px solid var(--ss-border); border-radius: 14px; padding: 16px; color: var(--ss-text); } .ss-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .ss-card__title { font-size: 15px; font-weight: 600; color: var(--ss-text); margin: 0; } /* ============================================================================ * Data card + data table — canonical "section panel with a table inside" * * Lifted directly from the Recent Time Cards block in employee_dashboard.php * (the user's reference design for tables across the app). The card surface * is darker than .ss-card (#0e1520 vs #060f1b) and the header style uses * uppercase 850-weight to match the dashboard module headers. * *
*
*

All Employees

*
* …
*
* ========================================================================= */ .ss-data-card { background: #0e1520; color: #e5edf6; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24); padding: 22px 24px; margin-bottom: 18px; overflow: hidden; } .ss-data-card__header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .ss-data-card__title { color: #f8fafc; font-size: 1.05rem; font-weight: 850; letter-spacing: 0.03em; margin: 0; text-transform: uppercase; } .ss-data-card__actions { display: inline-flex; align-items: center; gap: 14px; } .ss-data-table { width: 100%; margin: 0; border-collapse: collapse; color: rgba(226, 232, 240, 0.82); } .ss-data-table thead th { background: rgba(2, 9, 18, 0.82); border-bottom: 1px solid rgba(148, 163, 184, 0.16); border-top: 0; color: #f8fafc; font-size: 0.76rem; font-weight: 850; padding: 10px 8px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .ss-data-table tbody td { border-bottom: 1px solid rgba(148, 163, 184, 0.10); color: rgba(226, 232, 240, 0.82); font-size: 0.84rem; font-weight: 650; padding: 10px 8px; vertical-align: middle; } .ss-data-table tbody tr:hover td { background: rgba(59, 130, 246, 0.06); } .ss-data-table tbody tr:last-child td { border-bottom: 0; } /* Compact "site code" badge used for the 2-letter location pill in the Recent Time Cards table. Useful anywhere we want a short tag that reads as an intentional code. */ .ss-pill--loc { display: inline-block; min-width: 30px; padding: 3px 8px; border-radius: 999px; background: rgba(59, 130, 246, 0.16); border: 1px solid rgba(96, 165, 250, 0.35); color: #cfe1ff; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; } /* ============================================================================ * Toast — small floating notification (right edge of viewport) * Used for transient success / error responses (e.g. clock-in success) * ========================================================================= */ .ss-toast-container { position: fixed; top: 80px; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; pointer-events: none; } .ss-toast { min-width: 280px; max-width: 380px; background: var(--ss-surface); border: 1px solid rgba(59, 130, 246, 0.45); border-radius: 12px; padding: 12px 14px; color: var(--ss-text); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18), 0 0 24px rgba(59, 130, 246, 0.22), 0 12px 28px rgba(0, 0, 0, 0.4); pointer-events: auto; animation: ss-toast-in 0.18s ease-out; } .ss-toast--warning { border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 0 24px rgba(245, 158, 11, 0.18), 0 12px 28px rgba(0, 0, 0, 0.4); } .ss-toast--danger { border-color: rgba(239, 68, 68, 0.55); box-shadow: 0 0 24px rgba(239, 68, 68, 0.18), 0 12px 28px rgba(0, 0, 0, 0.4); } .ss-toast--success { border-color: rgba(34, 197, 94, 0.55); box-shadow: 0 0 24px rgba(34, 197, 94, 0.18), 0 12px 28px rgba(0, 0, 0, 0.4); } .ss-toast__title { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; } .ss-toast__body { font-size: 12.5px; color: var(--ss-text-muted); } @keyframes ss-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ss-toast { animation: none; } } /* ============================================================================ * Layout helpers * ========================================================================= */ .ss-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .ss-form-actions__left, .ss-form-actions__right { display: flex; gap: 8px; flex-wrap: wrap; } .ss-form-actions__right { margin-left: auto; } /* ============================================================================ * Mobile * ========================================================================= */ @media (max-width: 575.98px) { .ss-modal .modal-header { padding: 12px 14px 8px 14px !important; } .ss-modal .modal-body { padding: 0 12px 12px 12px !important; } .ss-modal__form { padding: 12px !important; } .ss-toast { min-width: 0; max-width: calc(100vw - 32px); } .ss-notice { padding: 12px 14px; } .ss-form-actions { flex-direction: column; align-items: stretch; } .ss-form-actions__left, .ss-form-actions__right { width: 100%; justify-content: stretch; } .ss-form-actions__right { margin-left: 0; } .ss-btn { justify-content: center; } }