/* ============================================================ XGOAL 360 — Design tokens & global modernization Bootstrap 4 + AdminLTE 3 stay in charge of layout mechanics; this file only refines shape, depth, type and interaction. Load AFTER webroot/css/xgoal.css (brand tokens) and BEFORE xgoal/header.css, xgoal/sidebar.css, xgoal/login.css. ============================================================ */ /* ── Design tokens ─────────────────────────────────────────── */ :root { /* Typography */ --font-main: 'DM Sans', 'Segoe UI', sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; /* Brand (see webroot/css/xgoal.css for the source values) */ --x-primary: var(--xgoal-primary, #0376ea); --x-primary-dark: #025bb5; --x-primary-alpha: rgba(3, 118, 234, 0.1); --x-primary-ring: rgba(3, 118, 234, 0.25); /* Shape */ --x-radius-sm: 0.5rem; --x-radius-md: 0.75rem; --x-radius-lg: 1rem; --x-radius-pill: 999px; /* Surfaces & text (light theme defaults) */ --x-body-bg: #f4f5f9; --x-surface: #ffffff; --x-surface-2: #f8f9fc; --x-border: #e7e9f0; --x-text: #1f2430; --x-text-muted: #6b7280; /* Elevation */ --x-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06); --x-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --x-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12); } body { font-size: 0.9rem; } /* ── Dark mode tokens ───────────────────────────────────────── Hooks into AdminLTE's own body.dark-mode class (already ships with full component coverage). We only redefine the tokens our own xgoal/* files consume, plus a few structural fixes AdminLTE doesn't quite finish. */ body.dark-mode { --x-body-bg: #14161c; --x-surface: #1b1e27; --x-surface-2: #20232d; --x-border: rgba(255, 255, 255, 0.08); --x-text: #e5e7eb; --x-text-muted: #9aa0ac; --x-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --x-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45); --x-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); } /* Prevents a light flash while the theme-detection script runs. */ html.x-theme-pending body { visibility: hidden; } /* ── Base typography ────────────────────────────────────────── AdminLTE ships Source Sans Pro on ; DM Sans reads as a cleaner, more current grotesque without breaking density. */ body { font-family: var(--font-main); background-color: var(--x-body-bg); color: var(--x-text); } .content-wrapper { background-color: var(--x-body-bg); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ── Buttons ────────────────────────────────────────────────── Only shape/interaction — every btn-* keeps its Bootstrap hue. */ .btn { border-radius: var(--x-radius-sm); font-weight: 500; letter-spacing: 0.01em; transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-sm { border-radius: 0.4rem; } .btn-block, .btn-lg { border-radius: var(--x-radius-md); } .btn:focus, .btn.focus { box-shadow: 0 0 0 0.2rem var(--x-primary-ring); } .btn-xgoal-primary, .btn-xgoal-secondary { border-radius: var(--x-radius-sm); } /* ── Cards ──────────────────────────────────────────────────── AdminLTE bakes 0.25rem into card/card-header/card-footer at compile time, so the radius override needs to be explicit on each of those, not just the wrapping .card. */ .card { border: 1px solid var(--x-border); border-radius: var(--x-radius-md); box-shadow: var(--x-shadow-sm); background-color: var(--x-surface); transition: box-shadow 0.2s ease; } .card-header, .card-header:first-child { border-top-left-radius: var(--x-radius-md); border-top-right-radius: var(--x-radius-md); background-color: transparent; } .card-footer, .card-footer:last-child { border-bottom-left-radius: var(--x-radius-md); border-bottom-right-radius: var(--x-radius-md); } .card.card-outline { border-top-width: 3px; } /* ── Forms ──────────────────────────────────────────────────── Focus rings tie every input back to the brand accent without touching the neutral Bootstrap border colors at rest. */ .form-control, .custom-select, .input-group-text { border-radius: var(--x-radius-sm); border-color: var(--x-border); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .custom-select:focus { border-color: var(--x-primary); box-shadow: 0 0 0 0.2rem var(--x-primary-ring); } .custom-control-input:checked~.custom-control-label::before { border-color: var(--x-primary); background-color: var(--x-primary); } .input-group > .form-control, .input-group > .custom-select, .input-group > .input-group-text, .input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-prepend > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-append > .btn { border-radius: 0 !important; } .input-group > .form-control:first-child, .input-group > .custom-select:first-child, .input-group > .input-group-text:first-child, .input-group > .input-group-prepend:first-child > .input-group-text, .input-group > .input-group-prepend:first-child > .btn { border-top-left-radius: var(--x-radius-sm) !important; border-bottom-left-radius: var(--x-radius-sm) !important; } .input-group > .form-control:last-child, .input-group > .custom-select:last-child, .input-group > .input-group-text:last-child, .input-group > .input-group-append:last-child > .input-group-text, .input-group > .input-group-append:last-child > .btn { border-top-right-radius: var(--x-radius-sm) !important; border-bottom-right-radius: var(--x-radius-sm) !important; } /* ── Dropdowns & modals ───────────────────────────────────────── */ .dropdown-menu { border: 1px solid var(--x-border); border-radius: var(--x-radius-md); box-shadow: var(--x-shadow-md); padding: 0.4rem; background-color: var(--x-surface); } .dropdown-item { border-radius: var(--x-radius-sm); padding: 0.5rem 0.75rem; transition: background-color 0.12s ease; } .modal-content { border: 0; border-radius: var(--x-radius-lg); box-shadow: var(--x-shadow-lg); } .modal-header, .modal-footer { border-color: var(--x-border); } /* ── Badges, alerts, pagination ───────────────────────────────── */ .badge { border-radius: var(--x-radius-sm); font-weight: 600; letter-spacing: 0.02em; } .badge.badge-pill { border-radius: var(--x-radius-pill); } .alert { border: 0; border-radius: var(--x-radius-md); box-shadow: var(--x-shadow-sm); } /* ── Flash messages ─────────────────────────────────────────── templates/element/flash/_alert.php. Trades the stock solid-color alert-success/-danger/... panel for a quiet surface card with a colored icon chip + left accent, matching the kr-icon-* chip language used elsewhere (dashboard, Results/Goals) without reusing those kr- classes directly (they're scoped to that reskin). border-left is set after the border shorthand so it overrides just that one side. */ .x-flash { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--x-border); border-left: 3px solid var(--x-flash-accent, var(--x-primary)); animation: x-flash-in 0.25s ease-out; } @keyframes x-flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .x-flash-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; } .x-flash-message { flex: 1 1 auto; min-width: 0; padding-top: 0.1rem; color: var(--x-text); font-size: 0.875rem; line-height: 1.5; } .x-flash-close { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--x-radius-sm); background: transparent; color: var(--x-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; opacity: 1; transition: background-color 0.15s ease, color 0.15s ease; } .x-flash-close:hover, .x-flash-close:focus { background: var(--x-surface-2); color: var(--x-text); } .x-flash--success { --x-flash-accent: var(--success); } .x-flash--success .x-flash-icon { background: rgba(40, 167, 69, 0.15); color: var(--success); } .x-flash--error { --x-flash-accent: var(--danger); } .x-flash--error .x-flash-icon { background: rgba(220, 53, 69, 0.15); color: var(--danger); } .x-flash--warning { --x-flash-accent: var(--warning); } .x-flash--warning .x-flash-icon { background: rgba(245, 158, 11, 0.15); color: #b45309; } .x-flash--info { --x-flash-accent: var(--info); } .x-flash--info .x-flash-icon { background: rgba(23, 162, 184, 0.15); color: var(--info); } .x-flash--default { --x-flash-accent: var(--secondary); } .x-flash--default .x-flash-icon { background: var(--x-surface-2); color: var(--x-text-muted); } .page-link { border-radius: var(--x-radius-sm); margin: 0 2px; border-color: var(--x-border); } .pagination .page-item.active .page-link { box-shadow: var(--x-shadow-sm); } /* ── Tabs ─────────────────────────────────────────────────────── */ .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--x-text-muted); transition: color 0.15s ease, border-color 0.15s ease; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--x-primary); border-bottom-color: var(--x-primary); background: transparent; } /* ── Theme toggle switch ────────────────────────────────────── Signature interaction of this redesign: a pill switch with a sliding sun/moon knob, tinted with the brand accent when active. Shared by the header and the login screen. */ .x-theme-toggle { display: inline-flex; align-items: center; width: 46px; height: 26px; border-radius: var(--x-radius-pill); border: 1px solid var(--x-border); background: var(--x-surface-2); padding: 2px; cursor: pointer; position: relative; transition: background-color 0.2s ease, border-color 0.2s ease; } .x-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem var(--x-primary-ring); } .x-theme-toggle__knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease; transform: translateX(0); } .x-theme-toggle__knob i { font-size: 0.65rem; color: #f59e0b; } body.dark-mode .x-theme-toggle { background: var(--x-surface); border-color: var(--x-border); } body.dark-mode .x-theme-toggle .x-theme-toggle__knob { transform: translateX(20px); background: var(--x-primary); } body.dark-mode .x-theme-toggle .x-theme-toggle__knob i { color: #fff; } /* ── Scrollbars (Webkit) ──────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(120, 120, 130, 0.3); border-radius: var(--x-radius-pill); } ::-webkit-scrollbar-thumb:hover { background-color: var(--x-primary); } /* .x-flash--warning icon: #b45309 is picked for contrast on the pale-yellow *light* tint and goes muddy on the dark one — same fix already applied to .kr-icon-warning in webroot/css/xgoal.css. */ body.dark-mode .x-flash--warning .x-flash-icon { color: #fbbf24; }