/* ============================================================ MM aiKeyboard admin panel design system Light + dark themes keyed off (layered on top of Bootstrap 5.3) ============================================================ */ :root, [data-bs-theme="light"] { --page-bg: #f4f6f9; --surface: #ffffff; --surface-2: #f7f9fc; --border: #e5e9f0; --border-strong: #d5dbe5; --text: #17212f; --text-2: #5a6577; --text-3: #8792a3; --accent: #2a78d6; --accent-hover: #2168be; --accent-soft: rgba(42, 120, 214, 0.10); --success: #178a43; --success-soft: rgba(23, 138, 67, 0.12); --warning: #a06a00; --warning-soft: rgba(237, 161, 0, 0.14); --danger: #ce3b3b; --danger-soft: rgba(206, 59, 59, 0.10); --info: #0c7d8f; --info-soft: rgba(12, 125, 143, 0.10); --neutral-soft: rgba(90, 101, 119, 0.10); --sidebar-bg: #101b2c; --sidebar-text: #93a1b8; --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-active: rgba(42, 120, 214, 0.22); --sidebar-border: rgba(255, 255, 255, 0.08); --shadow-card: 0 1px 2px rgba(16, 27, 44, 0.05); --shadow-pop: 0 12px 32px rgba(16, 27, 44, 0.16); --viz-series: #2a78d6; --viz-series-dim: #a9c9ef; --viz-grid: #e9edf3; --viz-axis: #c8cfda; --viz-label: #8792a3; --bs-body-bg: var(--page-bg); --bs-body-color: var(--text); --bs-border-color: var(--border); } [data-bs-theme="dark"] { --page-bg: #0e1420; --surface: #171e2b; --surface-2: #1d2534; --border: #263042; --border-strong: #334056; --text: #e8edf5; --text-2: #a6b1c2; --text-3: #8b96a8; --accent: #4b93e8; --accent-hover: #66a5ee; --accent-soft: rgba(75, 147, 232, 0.16); --success: #3dbb6e; --success-soft: rgba(61, 187, 110, 0.16); --warning: #e5a93d; --warning-soft: rgba(229, 169, 61, 0.16); --danger: #e66767; --danger-soft: rgba(230, 103, 103, 0.14); --info: #3fb5c9; --info-soft: rgba(63, 181, 201, 0.14); --neutral-soft: rgba(166, 177, 194, 0.12); --sidebar-bg: #0b111c; --sidebar-text: #8b98ad; --sidebar-text-active: #ffffff; --sidebar-hover: rgba(255, 255, 255, 0.05); --sidebar-active: rgba(75, 147, 232, 0.20); --sidebar-border: rgba(255, 255, 255, 0.07); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5); --viz-series: #4b93e8; --viz-series-dim: #2c4467; --viz-grid: #232d3e; --viz-axis: #33415a; --viz-label: #74809a; --bs-body-bg: var(--page-bg); --bs-body-color: var(--text); --bs-border-color: var(--border); } /* ---------- base ---------- */ body { background: var(--page-bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Pyidaungsu", sans-serif; font-size: 0.9rem; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } code { color: var(--text-2); background: var(--neutral-soft); border-radius: 5px; padding: 1px 6px; font-size: 0.8em; } ::selection { background: var(--accent-soft); } /* ---------- app shell ---------- */ .app-shell { min-height: 100vh; } .app-sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; background: var(--sidebar-bg); display: flex; flex-direction: column; z-index: 1040; transition: transform 0.22s ease; } .app-main { margin-left: 248px; display: flex; flex-direction: column; min-height: 100vh; } .app-content { flex: 1; padding: 24px 28px 48px; max-width: 1440px; width: 100%; min-width: 0; } /* Let flex/grid children shrink below their content's min width, so wide tables scroll inside .table-wrap instead of widening the page */ .app-main { min-width: 0; } .row > * { min-width: 0; } /* ---------- sidebar ---------- */ .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 16px; border-bottom: 1px solid var(--sidebar-border); } .sidebar-brand img { width: 30px; height: 30px; border-radius: 8px; } .sidebar-brand .brand-name { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; line-height: 1.1; } .sidebar-brand .brand-sub { color: var(--sidebar-text); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px; } .sidebar-nav .nav-section { color: var(--sidebar-text); opacity: 0.75; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 12px 6px; } .sidebar-nav .nav-section:first-child { padding-top: 2px; } .sidebar-nav .nav-item-link { display: flex; align-items: center; gap: 11px; color: var(--sidebar-text); padding: 9px 12px; border-radius: 9px; font-size: 0.875rem; font-weight: 500; margin-bottom: 2px; position: relative; } .sidebar-nav .nav-item-link i { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } .sidebar-nav .nav-item-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); } .sidebar-nav .nav-item-link.active { background: var(--sidebar-active); color: var(--sidebar-text-active); } .sidebar-nav .nav-item-link.active::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .sidebar-foot { border-top: 1px solid var(--sidebar-border); padding: 14px 16px; display: flex; align-items: center; gap: 10px; } .sidebar-foot .avatar { flex-shrink: 0; } .sidebar-foot .who { flex: 1; min-width: 0; } .sidebar-foot .who .name { color: #fff; font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-foot .who .role { color: var(--sidebar-text); font-size: 0.7rem; } .sidebar-foot .logout-btn { color: var(--sidebar-text); font-size: 1rem; padding: 6px 8px; border-radius: 8px; } .sidebar-foot .logout-btn:hover { color: #fff; background: var(--sidebar-hover); } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(9, 14, 22, 0.55); z-index: 1035; } /* ---------- topbar ---------- */ .app-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: color-mix(in srgb, var(--page-bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .topbar-toggle { display: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 9px; padding: 5px 10px; font-size: 1.05rem; line-height: 1; } .topbar-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-3); white-space: nowrap; overflow: hidden; } .topbar-crumbs .crumb-current { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .topbar-search { display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 5px 11px; color: var(--text-3); } .topbar-search input { border: 0; outline: 0; background: transparent; color: var(--text); font-size: 0.83rem; width: 170px; } .topbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } @media (max-width: 575.98px) { .topbar-search input { width: 90px; } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 0.95rem; transition: all 0.12s ease; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } /* ---------- page head ---------- */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .page-head h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .page-head .page-sub { color: var(--text-2); font-size: 0.85rem; margin-top: 3px; } .page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- cards ---------- */ .panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); } .panel-card .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .panel-card .panel-head .panel-title { font-size: 0.92rem; font-weight: 650; margin: 0; display: flex; align-items: center; gap: 8px; } .panel-card .panel-head .panel-title i { color: var(--text-3); } .panel-card .panel-body { padding: 18px; } .panel-card .panel-body.p-0 { padding: 0; } /* legacy bootstrap cards used by widgets */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); } .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 650; font-size: 0.92rem; padding: 14px 18px; } /* ---------- stat tiles ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .stat-tile .stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stat-tile .stat-label { color: var(--text-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } .stat-tile .stat-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .stat-tile .stat-ico.ico-success { background: var(--success-soft); color: var(--success); } .stat-tile .stat-ico.ico-warning { background: var(--warning-soft); color: var(--warning); } .stat-tile .stat-ico.ico-danger { background: var(--danger-soft); color: var(--danger); } .stat-tile .stat-ico.ico-info { background: var(--info-soft); color: var(--info); } .stat-tile .stat-ico.ico-neutral { background: var(--neutral-soft); color: var(--text-2); } .stat-tile .stat-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .stat-tile .stat-foot { color: var(--text-3); font-size: 0.76rem; display: flex; align-items: center; gap: 6px; } .stat-tile .stat-foot .delta-up { color: var(--success); font-weight: 600; } .stat-tile .stat-foot .delta-flat { color: var(--text-3); } /* ---------- tables ---------- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--text); margin-bottom: 0; font-size: 0.865rem; } .table > thead th { color: var(--text-3); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 1px solid var(--border); padding: 10px 14px; white-space: nowrap; } .table > tbody td { padding: 10px 14px; vertical-align: middle; border-color: var(--border); } .table > tbody tr:last-child td { border-bottom: 0; } .table thead a { color: var(--text-2); } .table thead a.asc::after { content: " ↑"; color: var(--accent); } .table thead a.desc::after { content: " ↓"; color: var(--accent); } .table .filters td { padding: 6px 8px; background: var(--surface-2); } .table .filters .form-control, .table .filters select { font-size: 0.8rem; padding: 4px 8px; border-radius: 7px; } .table-wrap { overflow-x: auto; border-radius: 0 0 14px 14px; } .num { font-variant-numeric: tabular-nums; } /* GridView summary line */ .summary { color: var(--text-3); font-size: 0.78rem; padding: 12px 18px 0; } .panel-body .summary, .panel-body.p-0 .summary { padding: 12px 18px 8px; } .empty { color: var(--text-3); padding: 28px 18px; text-align: center; } /* ---------- badges ---------- */ .badge-soft { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.4; } .badge-soft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-soft.no-dot::before { display: none; } .badge-soft-success { background: var(--success-soft); color: var(--success); } .badge-soft-warning { background: var(--warning-soft); color: var(--warning); } .badge-soft-danger { background: var(--danger-soft); color: var(--danger); } .badge-soft-info { background: var(--info-soft); color: var(--info); } .badge-soft-accent { background: var(--accent-soft); color: var(--accent); } .badge-soft-neutral { background: var(--neutral-soft); color: var(--text-2); } /* legacy badge classes still in some views */ .badge-active { background: var(--success-soft); color: var(--success); } .badge-inactive { background: var(--neutral-soft); color: var(--text-2); } .badge-deleted { background: var(--danger-soft); color: var(--danger); } .badge-free { background: var(--neutral-soft); color: var(--text-2); } .badge-premium { background: var(--warning-soft); color: var(--warning); } .badge-pro { background: var(--info-soft); color: var(--info); } .badge.badge-active, .badge.badge-inactive, .badge.badge-deleted, .badge.badge-free, .badge.badge-premium, .badge.badge-pro { font-weight: 600; border-radius: 999px; padding: 4px 10px; } /* ---------- buttons ---------- */ .btn { border-radius: 9px; font-size: 0.85rem; font-weight: 550; } .btn-sm { border-radius: 8px; font-size: 0.78rem; } .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-color: var(--accent); --bs-btn-active-border-color: var(--accent); } .btn-outline-secondary, .btn-outline-danger { --bs-btn-border-color: var(--border-strong); } .btn-ghost { color: var(--text-2); border: 1px solid var(--border); background: var(--surface); } .btn-ghost:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); } /* ---------- forms ---------- */ .form-control, .form-select { background: var(--surface); border-color: var(--border-strong); color: var(--text); border-radius: 9px; font-size: 0.865rem; } .form-control:focus, .form-select:focus { background: var(--surface); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); margin-bottom: 5px; } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-section-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .help-block { color: var(--danger); font-size: 0.78rem; margin-top: 4px; } .has-error .form-control { border-color: var(--danger); } .hint-block { color: var(--text-3); font-size: 0.76rem; margin-top: 4px; } /* ---------- pagination ---------- */ .pagination { --bs-pagination-bg: var(--surface); --bs-pagination-color: var(--text-2); --bs-pagination-border-color: var(--border); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-color: var(--text); --bs-pagination-hover-border-color: var(--border-strong); --bs-pagination-focus-bg: var(--surface-2); --bs-pagination-focus-color: var(--text); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-color: var(--text-3); --bs-pagination-disabled-border-color: var(--border); font-size: 0.82rem; margin: 0; flex-wrap: wrap; } /* Yii LinkPager renders bare
  • — normalize to pill buttons */ .pagination li a, .pagination li span { display: inline-block; padding: 5px 11px; margin: 0 2px 4px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); } .pagination li a:hover { background: var(--surface-2); color: var(--text); } .pagination li.active a, .pagination li.active span { background: var(--accent); border-color: var(--accent); color: #fff; } .pagination li.disabled a, .pagination li.disabled span { color: var(--text-3); pointer-events: none; } /* ---------- alerts / flashes ---------- */ .alert { border-radius: 12px; font-size: 0.86rem; border: 1px solid transparent; } .alert-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .alert-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .alert-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } /* ---------- avatars ---------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.82rem; flex-shrink: 0; text-transform: uppercase; } .avatar-lg { width: 52px; height: 52px; font-size: 1.15rem; } /* ---------- charts ---------- */ .viz-bars { width: 100%; display: block; } .viz-bars .bar { fill: var(--viz-series); } .viz-bars .bar:hover { fill: var(--accent-hover); } .viz-bars .grid { stroke: var(--viz-grid); stroke-width: 1; } .viz-bars .baseline { stroke: var(--viz-axis); stroke-width: 1; } .viz-bars .tick, .viz-bars .xlabel { fill: var(--viz-label); font-size: 10px; font-family: inherit; font-variant-numeric: tabular-nums; } .viz-bars .peak-label { fill: var(--text-2); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; } .swipe-mini .kb { fill: var(--surface-2); stroke: var(--border-strong); } .swipe-mini .trace { fill: none; stroke: var(--viz-series); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .swipe-mini .start { fill: var(--viz-series); stroke: var(--surface); stroke-width: 2; } .meter { height: 6px; border-radius: 999px; background: var(--viz-series-dim); overflow: hidden; min-width: 60px; } .meter > span { display: block; height: 100%; border-radius: 999px; background: var(--viz-series); } /* ---------- misc ---------- */ .kv-list { margin: 0; } .kv-list .kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.86rem; } .kv-list .kv-row:last-child { border-bottom: 0; } .kv-list .kv-key { color: var(--text-2); flex-shrink: 0; } .kv-list .kv-val { text-align: right; word-break: break-word; min-width: 0; } .detail-view { width: 100%; } .detail-view th { color: var(--text-2); font-weight: 600; width: 38%; } .sticker-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; text-align: center; height: 100%; display: flex; flex-direction: column; transition: border-color 0.12s ease; } .sticker-cell:hover { border-color: var(--border-strong); } .sticker-cell.is-cover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .glyph { font-size: 1.5rem; line-height: 1.2; } .mono-scroll { max-height: 380px; overflow: auto; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; color: var(--text-2); margin: 0; } .text-secondary-c { color: var(--text-2) !important; } .text-muted-c { color: var(--text-3) !important; } .breadcrumb-lite { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-3); margin-bottom: 8px; } /* ---------- login ---------- */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1000px 500px at 85% -10%, var(--accent-soft), transparent 60%), radial-gradient(800px 420px at -10% 110%, var(--accent-soft), transparent 55%), var(--page-bg); } .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-pop); padding: 36px 34px 30px; } .login-card .login-logo { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px; } .login-card h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: 2px; } .login-card .login-sub { color: var(--text-2); font-size: 0.84rem; margin-bottom: 22px; } /* ---------- responsive ---------- */ @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); } body.sidebar-open .app-sidebar { transform: translateX(0); } body.sidebar-open .sidebar-backdrop { display: block; } .app-main { margin-left: 0; } .topbar-toggle { display: inline-flex; } .app-topbar { padding: 10px 16px; } .app-content { padding: 18px 16px 40px; } } @media print { .app-sidebar, .app-topbar { display: none; } .app-main { margin-left: 0; } }