/* ========================================================================== apple-ui.css — Apple-inspired design system for the iBO Pro / NeptuneTV panel -------------------------------------------------------------------------- Loaded LAST, after bootstrap.min.css, darkly/bootstrap.css, simple-sidebar.css and style.css, so it wins on equal specificity. It restyles the existing Bootstrap 4 markup in place — no page markup has to change. Themes: light by default, dark via prefers-color-scheme, and either one forced by (set by js/theme.js). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Type — SF Pro on Apple platforms, graceful fallbacks elsewhere */ --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ap-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Radii — Apple's hardware-ish curvature */ --ap-r-sm: 8px; --ap-r-md: 12px; --ap-r-lg: 18px; --ap-r-xl: 22px; --ap-r-pill: 980px; /* Motion */ --ap-ease: cubic-bezier(0.28, 0.11, 0.32, 1); --ap-fast: 0.18s var(--ap-ease); --ap-slow: 0.4s var(--ap-ease); /* Layout */ --ap-sidebar-w: 15rem; --ap-nav-h: 56px; /* Light palette (default) */ --ap-bg: #f5f5f7; --ap-surface: #ffffff; --ap-surface-2: #fbfbfd; --ap-surface-raised: #ffffff; --ap-nav-bg: rgba(255, 255, 255, 0.72); --ap-sidebar-bg: rgba(251, 251, 253, 0.8); --ap-text: #1d1d1f; --ap-text-2: #6e6e73; --ap-text-3: #86868b; --ap-on-accent: #ffffff; --ap-separator: rgba(0, 0, 0, 0.1); --ap-separator-strong: rgba(0, 0, 0, 0.16); --ap-fill: rgba(0, 0, 0, 0.04); --ap-fill-hover: rgba(0, 0, 0, 0.06); --ap-accent: #0071e3; --ap-accent-hover: #0077ed; --ap-accent-ring: rgba(0, 113, 227, 0.28); --ap-red: #d70015; --ap-red-hover: #e5152b; --ap-green: #248a3d; --ap-orange: #c25e00; --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.08); --ap-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07), 0 0 1px rgba(0, 0, 0, 0.1); --ap-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.08); color-scheme: light; } /* Dark palette — applied by system preference, unless a theme is forced */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ap-bg: #000000; --ap-surface: #1d1d1f; --ap-surface-2: #161617; --ap-surface-raised: #2c2c2e; --ap-nav-bg: rgba(22, 22, 23, 0.72); --ap-sidebar-bg: rgba(22, 22, 23, 0.82); --ap-text: #f5f5f7; --ap-text-2: #a1a1a6; --ap-text-3: #86868b; --ap-on-accent: #ffffff; --ap-separator: rgba(255, 255, 255, 0.12); --ap-separator-strong: rgba(255, 255, 255, 0.2); --ap-fill: rgba(255, 255, 255, 0.06); --ap-fill-hover: rgba(255, 255, 255, 0.1); --ap-accent: #0a84ff; --ap-accent-hover: #3d9bff; --ap-accent-ring: rgba(10, 132, 255, 0.35); --ap-red: #ff453a; --ap-red-hover: #ff6961; --ap-green: #30d158; --ap-orange: #ff9f0a; --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --ap-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --ap-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); color-scheme: dark; } } /* Forced dark — same values, driven by the toggle instead of the OS */ :root[data-theme="dark"] { --ap-bg: #000000; --ap-surface: #1d1d1f; --ap-surface-2: #161617; --ap-surface-raised: #2c2c2e; --ap-nav-bg: rgba(22, 22, 23, 0.72); --ap-sidebar-bg: rgba(22, 22, 23, 0.82); --ap-text: #f5f5f7; --ap-text-2: #a1a1a6; --ap-text-3: #86868b; --ap-on-accent: #ffffff; --ap-separator: rgba(255, 255, 255, 0.12); --ap-separator-strong: rgba(255, 255, 255, 0.2); --ap-fill: rgba(255, 255, 255, 0.06); --ap-fill-hover: rgba(255, 255, 255, 0.1); --ap-accent: #0a84ff; --ap-accent-hover: #3d9bff; --ap-accent-ring: rgba(10, 132, 255, 0.35); --ap-red: #ff453a; --ap-red-hover: #ff6961; --ap-green: #30d158; --ap-orange: #ff9f0a; --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --ap-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --ap-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { background-color: var(--ap-bg) !important; background-image: none !important; color: var(--ap-text) !important; font-family: var(--ap-font) !important; font-size: 15px; line-height: 1.47059; font-weight: 400; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ap-font); color: var(--ap-text); font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; } h1, .h1 { font-size: 2.5rem; letter-spacing: -0.03em; } h2, .h2 { font-size: 1.75rem; letter-spacing: -0.026em; } h3, .h3 { font-size: 1.3125rem; } h4, .h4 { font-size: 1.0625rem; } p { color: var(--ap-text-2); } a { color: var(--ap-accent); text-decoration: none; transition: color var(--ap-fast), opacity var(--ap-fast); } a:hover, a:focus { color: var(--ap-accent-hover); text-decoration: none; } hr { border-top-color: var(--ap-separator); } small, .small { color: var(--ap-text-3); } code, kbd, pre, samp { font-family: var(--ap-mono); } ::selection { background: var(--ap-accent-ring); color: var(--ap-text); } /* Consistent focus ring everywhere — accessibility, Apple-style */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .list-group-item:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ap-accent-ring) !important; border-radius: var(--ap-r-sm); } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--ap-separator-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ap-separator-strong); border-radius: var(--ap-r-pill); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--ap-text-3); background-clip: content-box; } /* -------------------------------------------------------------------------- 3. Vanta background The animated dark "net" reads as noise on a light surface, so it only shows in dark mode — and it sits behind everything either way. -------------------------------------------------------------------------- */ #net-canvas, .vanta-canvas { position: fixed !important; inset: 0; z-index: -1 !important; pointer-events: none; opacity: 0; transition: opacity var(--ap-slow); } :root[data-theme="dark"] #net-canvas, :root[data-theme="dark"] .vanta-canvas { opacity: 0.35; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #net-canvas, :root:not([data-theme="light"]) .vanta-canvas { opacity: 0.35; } } /* particles.js leftovers from the old theme */ #particles-js, .particles-js-canvas-el { display: none !important; } /* -------------------------------------------------------------------------- 4. Shell — sidebar, nav, content -------------------------------------------------------------------------- */ #wrapper { min-height: 100vh; } #sidebar-wrapper { background: var(--ap-sidebar-bg) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-right: 1px solid var(--ap-separator); position: sticky !important; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; z-index: 1030; transition: margin var(--ap-slow); } #sidebar-wrapper .sidebar-heading { padding: 1.25rem 1.25rem 0.75rem; border-bottom: 1px solid var(--ap-separator); margin-bottom: 0.5rem; } .sidebar-logo { display: flex; align-items: center; justify-content: center; } .sidebar-logo img { width: 128px !important; max-width: 100%; height: auto; object-fit: contain; } /* The panel-name link that sits between the logo and the menu */ #sidebar-wrapper > span { display: block; padding: 0 0.75rem 0.5rem; } #sidebar-wrapper > span > .list-group-item { font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase; color: var(--ap-text-3) !important; background: transparent !important; padding: 0.4rem 0.75rem !important; text-align: center; } #sidebar-wrapper > span > .list-group-item:hover { color: var(--ap-accent) !important; } #sidebar-wrapper .list-group { width: var(--ap-sidebar-w); padding: 0 0.625rem 2rem; background: transparent !important; } /* Sidebar links — quiet by default, filled pill when hovered/active */ #sidebar-wrapper .list-group-item, #sidebar-wrapper .list-group-item-action { background: transparent !important; border: none !important; color: var(--ap-text-2) !important; font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em; padding: 0.5rem 0.75rem !important; border-radius: var(--ap-r-sm) !important; margin-bottom: 2px; display: flex; align-items: center; white-space: nowrap; transition: background var(--ap-fast), color var(--ap-fast); } #sidebar-wrapper .list-group-item-action:hover, #sidebar-wrapper .list-group-item-action:focus { background: var(--ap-fill-hover) !important; color: var(--ap-text) !important; } #sidebar-wrapper .list-group-item.active, #sidebar-wrapper .list-group-item-action.active { background: var(--ap-accent) !important; color: var(--ap-on-accent) !important; font-weight: 600; } #sidebar-wrapper .list-group-item i, #sidebar-wrapper .list-group-item .fa { margin-right: 0.625rem !important; width: 1.125rem; text-align: center; font-size: 0.9375rem; opacity: 0.75; flex: none; } #sidebar-wrapper .list-group-item.active i { opacity: 1; } /* Collapsible sidebar groups */ #sidebar-wrapper .dropdown { position: static; } #sidebar-wrapper .dropdown-toggle::after { margin-left: auto; transition: transform var(--ap-fast); border-top-color: currentColor; opacity: 0.5; } #sidebar-wrapper .dropdown.show > .dropdown-toggle::after { transform: rotate(180deg); } #sidebar-wrapper .dropdown.show > .dropdown-toggle { color: var(--ap-text) !important; } #sidebar-wrapper .dropdown-menu { position: static !important; float: none; transform: none !important; width: 100%; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 0 0 0.875rem !important; margin: 0 0 0.25rem !important; border-left: 1px solid var(--ap-separator); margin-left: 0.75rem !important; } #sidebar-wrapper .dropdown-menu .list-group-item { font-size: 0.78125rem; } /* Top bar */ #page-content-wrapper { background: transparent; min-height: 100vh; } .navbar.ctnav, nav.ctnav { background: var(--ap-nav-bg) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ap-separator); padding: 0.5rem 1.25rem !important; min-height: var(--ap-nav-h); position: sticky; top: 0; z-index: 1020; } /* Hamburger + theme toggle — subtle icon buttons, not primary actions */ .ctnav #menu-toggle, .ctnav .ap-icon-btn { background: var(--ap-fill) !important; border: 1px solid var(--ap-separator) !important; color: var(--ap-text) !important; width: 2.25rem; height: 2.25rem; padding: 0 !important; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; box-shadow: none !important; transition: background var(--ap-fast), transform var(--ap-fast); } .ctnav #menu-toggle:hover, .ctnav .ap-icon-btn:hover { background: var(--ap-fill-hover) !important; transform: scale(1.05); } .ctnav #menu-toggle:active, .ctnav .ap-icon-btn:active { transform: scale(0.96); } /* Show the icon matching the theme we can switch *to* */ .ap-icon-btn .ap-icon-dark { display: none; } :root[data-theme="dark"] .ap-icon-btn .ap-icon-dark { display: inline; } :root[data-theme="dark"] .ap-icon-btn .ap-icon-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ap-icon-btn .ap-icon-dark { display: inline; } :root:not([data-theme="light"]) .ap-icon-btn .ap-icon-light { display: none; } } .ap-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } /* Signed-in address. Secondary information, so it stays quiet and is the first thing dropped when the bar gets tight. */ .ap-whoami { font-size: 0.8125rem; color: var(--ap-text-2); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 767.98px) { .ap-whoami { display: none; } } .ctnav .btn-danger { background: transparent !important; border: 1px solid var(--ap-separator-strong) !important; color: var(--ap-text) !important; font-size: 0.8125rem; font-weight: 500; padding: 0.35rem 0.9rem !important; border-radius: var(--ap-r-pill) !important; } .ctnav .btn-danger:hover { background: var(--ap-red) !important; border-color: var(--ap-red) !important; color: #fff !important; } .container-fluid { padding: 1.75rem 2rem 3rem; } /* -------------------------------------------------------------------------- 5. Cards -------------------------------------------------------------------------- */ .card, .card.ctcard, .ctcard, .ctluser-main, .ctheading { background: var(--ap-surface) !important; border: 1px solid var(--ap-separator) !important; border-radius: var(--ap-r-lg) !important; box-shadow: var(--ap-shadow-sm); overflow: hidden; transition: box-shadow var(--ap-slow); } .card:hover { box-shadow: var(--ap-shadow-md); } .card-header, .card-header-warning { background: transparent !important; border-bottom: 1px solid var(--ap-separator) !important; padding: 1.5rem 1.75rem 1.25rem !important; color: var(--ap-text) !important; } /* The pages wrap card titles in
— undo it, Apple headings are left-set */ .card-header center, .ctheading center { text-align: left; display: block; } .card-header h2, .card-header h3, .ctheading h2 { font-size: 1.5rem !important; font-weight: 600 !important; letter-spacing: -0.026em !important; text-transform: none !important; color: var(--ap-text) !important; margin: 0 !important; padding: 0 !important; } .card-header h2 i, .ctheading h2 i { margin-right: 0.625rem !important; color: var(--ap-accent); font-size: 0.875em; } .card-body { padding: 1.75rem !important; } .card-body h3 { font-size: 1.0625rem !important; font-weight: 600; color: var(--ap-text); margin-bottom: 1.25rem; } .ctmain-table, .ctmain-form { padding: 0 !important; } .ctmain-table > .card-body, .ctmain-form > .card-body { padding: 0 !important; } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn { font-family: var(--ap-font); font-size: 0.875rem !important; font-weight: 500 !important; letter-spacing: -0.01em; line-height: 1.35; padding: 0.5rem 1.125rem !important; border-radius: var(--ap-r-pill) !important; border: 1px solid transparent !important; box-shadow: none !important; text-transform: none !important; transition: background var(--ap-fast), border-color var(--ap-fast), color var(--ap-fast), transform var(--ap-fast), opacity var(--ap-fast); } .btn:active { transform: scale(0.97); } /* Filled — the single primary action on a page */ .btn-primary, .btn-info, .btn-success, .ctbtn { background: var(--ap-accent) !important; border-color: var(--ap-accent) !important; color: var(--ap-on-accent) !important; } .btn-primary:hover, .btn-info:hover, .btn-success:hover, .ctbtn:hover { background: var(--ap-accent-hover) !important; border-color: var(--ap-accent-hover) !important; color: var(--ap-on-accent) !important; } .btn-danger { background: var(--ap-red) !important; border-color: var(--ap-red) !important; color: #fff !important; } .btn-danger:hover { background: var(--ap-red-hover) !important; border-color: var(--ap-red-hover) !important; } .btn-warning { background: var(--ap-orange) !important; border-color: var(--ap-orange) !important; color: #fff !important; } .btn-secondary, .btn-light, .btn-default { background: var(--ap-fill) !important; border-color: var(--ap-separator) !important; color: var(--ap-text) !important; } .btn-secondary:hover, .btn-light:hover, .btn-default:hover { background: var(--ap-fill-hover) !important; } .btn-outline-primary, .btn-outline-info { background: transparent !important; border-color: var(--ap-accent) !important; color: var(--ap-accent) !important; } .btn-outline-primary:hover, .btn-outline-info:hover { background: var(--ap-accent) !important; color: var(--ap-on-accent) !important; } .btn-sm { padding: 0.3rem 0.8rem !important; font-size: 0.8125rem !important; } .btn-lg { padding: 0.75rem 1.75rem !important; font-size: 1rem !important; } .btn:disabled, .btn.disabled { opacity: 0.4; transform: none; } /* Row actions in tables — compact square icon buttons, not pills */ td .btn, td .btn-ok { width: 2rem; height: 2rem; padding: 0 !important; border-radius: var(--ap-r-sm) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem !important; } td .btn-info { background: var(--ap-fill) !important; border-color: var(--ap-separator) !important; color: var(--ap-text) !important; } td .btn-info:hover { background: var(--ap-accent) !important; border-color: var(--ap-accent) !important; color: var(--ap-on-accent) !important; } td .btn-danger { background: var(--ap-fill) !important; border-color: var(--ap-separator) !important; color: var(--ap-red) !important; } td .btn-danger:hover { background: var(--ap-red) !important; border-color: var(--ap-red) !important; color: #fff !important; } /* The pages wrap primary buttons in
; keep them centred but tidy */ .card-body > .col-12 > center { display: block; margin-bottom: 0.5rem; } /* -------------------------------------------------------------------------- 7. Forms -------------------------------------------------------------------------- */ .form-group { margin-bottom: 1.25rem; } label, .form-label, .ctinput label { display: block; color: var(--ap-text-2) !important; font-size: 0.8125rem !important; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.4rem; } .form-control, .ctinput input, .ctinput select, .ctinput textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="url"], select, textarea { background: var(--ap-surface-2) !important; background-color: var(--ap-surface-2) !important; border: 1px solid var(--ap-separator-strong) !important; border-radius: var(--ap-r-md) !important; color: var(--ap-text) !important; font-family: var(--ap-font) !important; font-size: 0.9375rem !important; line-height: 1.4; height: auto !important; padding: 0.625rem 0.875rem !important; box-shadow: none !important; transition: border-color var(--ap-fast), box-shadow var(--ap-fast), background var(--ap-fast); } .form-control:focus, .ctinput input:focus, .ctinput select:focus, .ctinput textarea:focus, input:focus, select:focus, textarea:focus { background: var(--ap-surface) !important; background-color: var(--ap-surface) !important; border-color: var(--ap-accent) !important; color: var(--ap-text) !important; outline: none !important; box-shadow: 0 0 0 4px var(--ap-accent-ring) !important; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--ap-text-3) !important; opacity: 1; } textarea.form-control { min-height: 7rem; } select, select.form-control { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2386868b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.875rem center !important; background-size: 12px 8px !important; padding-right: 2.25rem !important; } input[type="file"] { padding: 0.5rem !important; font-size: 0.8125rem !important; } input[type="file"]::file-selector-button { background: var(--ap-fill); border: 1px solid var(--ap-separator); border-radius: var(--ap-r-pill); color: var(--ap-text); font-family: var(--ap-font); font-size: 0.8125rem; padding: 0.35rem 0.9rem; margin-right: 0.75rem; cursor: pointer; transition: background var(--ap-fast); } input[type="file"]::file-selector-button:hover { background: var(--ap-fill-hover); } input[type="checkbox"], input[type="radio"] { accent-color: var(--ap-accent); width: 1rem; height: 1rem; } /* Search / input groups */ .input-group { gap: 0; } .input-group .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: none !important; } .input-group-append .btn { border-radius: 0 var(--ap-r-md) var(--ap-r-md) 0 !important; margin-left: 0 !important; } .input-group-addon, .input-group-text { background: var(--ap-fill) !important; border: 1px solid var(--ap-separator-strong) !important; color: var(--ap-text-2) !important; border-radius: 0 var(--ap-r-md) var(--ap-r-md) 0 !important; } .fa-eye, .fa-eye-slash { color: var(--ap-text-2) !important; margin: 0 !important; font-size: 1rem !important; } /* -------------------------------------------------------------------------- 8. Tables -------------------------------------------------------------------------- */ .table-responsive { border-radius: var(--ap-r-md); border: 1px solid var(--ap-separator); overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { color: var(--ap-text) !important; margin-bottom: 0 !important; font-size: 0.875rem; border-collapse: separate; border-spacing: 0; width: 100%; } .table thead th, .table th { background: var(--ap-surface-2) !important; color: var(--ap-text-2) !important; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.05em; text-transform: uppercase; border: none !important; border-bottom: 1px solid var(--ap-separator) !important; padding: 0.75rem 1rem !important; white-space: nowrap; vertical-align: middle; } .table td, .table-sm td, .table-sm th { border: none !important; border-bottom: 1px solid var(--ap-separator) !important; padding: 0.75rem 1rem !important; vertical-align: middle !important; color: var(--ap-text) !important; white-space: nowrap; } .table tbody tr:last-child td { border-bottom: none !important; } /* Darkly stripes every odd row; replace with a quiet hover instead */ .table-striped tbody tr:nth-of-type(odd), .table-striped tbody tr:nth-of-type(even) { background-color: transparent !important; } .table tbody tr { transition: background var(--ap-fast); } .table tbody tr:hover { background-color: var(--ap-fill) !important; } /* Each row is its own in these pages — keep the rule between them */ .table tbody:last-of-type tr:last-child td { border-bottom: none !important; } .table-sm td:last-child, .cttable td:last-child { display: table-cell !important; white-space: nowrap; } .table td:last-child .btn { margin-right: 0.25rem; vertical-align: middle; } /* -------------------------------------------------------------------------- 9. DataTables chrome -------------------------------------------------------------------------- */ .dataTables_wrapper { color: var(--ap-text-2) !important; font-size: 0.8125rem; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: 1rem; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: var(--ap-surface-2) !important; border: 1px solid var(--ap-separator-strong) !important; border-radius: var(--ap-r-md) !important; color: var(--ap-text) !important; padding: 0.4rem 0.75rem !important; margin-left: 0.5rem; } .dataTables_wrapper .dataTables_info { padding-top: 1rem; color: var(--ap-text-3) !important; } .dataTables_wrapper .dataTables_paginate { padding-top: 0.75rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { background: transparent !important; border: 1px solid var(--ap-separator) !important; border-radius: var(--ap-r-sm) !important; color: var(--ap-text) !important; padding: 0.3rem 0.7rem !important; margin: 0 2px; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--ap-fill-hover) !important; border-color: var(--ap-separator-strong) !important; color: var(--ap-text) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--ap-accent) !important; border-color: var(--ap-accent) !important; color: var(--ap-on-accent) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.35; } /* -------------------------------------------------------------------------- 10. Hand-rolled pagination (mac_users.php, activation_code.php, …) The old rule painted every page link solid red; make them real controls. -------------------------------------------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 1.5rem; padding: 0; background: transparent !important; } a.pagination, a.pagination-gap, a.pagination-red { background-color: transparent !important; color: var(--ap-text) !important; border: 1px solid var(--ap-separator) !important; border-radius: var(--ap-r-sm) !important; padding: 0.35rem 0.75rem !important; margin: 0 !important; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; min-width: 2rem; text-align: center; transition: background var(--ap-fast), border-color var(--ap-fast); } a.pagination-gap:hover { background-color: var(--ap-fill-hover) !important; border-color: var(--ap-separator-strong) !important; color: var(--ap-text) !important; } a.pagination.active, a.pagination-red { background-color: var(--ap-accent) !important; border-color: var(--ap-accent) !important; color: var(--ap-on-accent) !important; font-weight: 600; } /* -------------------------------------------------------------------------- 11. Modals -------------------------------------------------------------------------- */ .modal-backdrop.show { background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 1 !important; } .modal-dialog { max-width: 24rem; margin: 1.75rem auto; } .modal-content { background: var(--ap-surface-raised) !important; border: 1px solid var(--ap-separator) !important; border-radius: var(--ap-r-xl) !important; box-shadow: var(--ap-shadow-lg) !important; color: var(--ap-text) !important; overflow: hidden; text-align: center; } .modal-header { border-bottom: none !important; padding: 1.75rem 1.75rem 0.5rem !important; display: block !important; } .modal-header h2 { font-size: 1.25rem !important; font-weight: 600 !important; color: var(--ap-text) !important; margin: 0 !important; width: 100%; } .modal-body { padding: 0 1.75rem 1.5rem !important; color: var(--ap-text-2) !important; font-size: 0.9375rem; } .modal-footer { border-top: 1px solid var(--ap-separator) !important; padding: 0.875rem 1.75rem !important; display: flex; gap: 0.625rem; justify-content: center; } .modal-footer .btn { flex: 1; max-width: 10rem; } .modal-footer .btn-primary { background: var(--ap-fill) !important; border-color: var(--ap-separator) !important; color: var(--ap-text) !important; } .modal-footer .btn-primary:hover { background: var(--ap-fill-hover) !important; } /* --- form dialogs (add / edit playlist, notes) -------------------------- */ /* Confirmations are narrow and centred; a dialog holding a form is neither. */ .modal-dialog.ap-wide { max-width: 40rem; } .ap-modal-body { text-align: left; padding: 1.5rem 1.75rem !important; max-height: calc(100vh - 14rem); overflow-y: auto; } .ap-modal-body hr { border: 0; border-top: 1px solid var(--ap-separator); margin: 1.25rem 0; } .ap-modal-body .form-group:last-child { margin-bottom: 0; } .ap-modal-hint { margin: 0.4rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--ap-text-3); } /* Two fields side by side, stacking on narrow screens. */ .ap-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 575.98px) { .ap-modal-row { grid-template-columns: 1fr; } .modal-dialog.ap-wide { max-width: calc(100% - 1.5rem); } } /* Checkbox rows — the label is the hit target, not just the box. */ .ap-check-line { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0; font-size: 0.9375rem; font-weight: 400; color: var(--ap-text) !important; cursor: pointer; } .ap-check-line input[type="checkbox"] { flex: none; margin-top: 0.15rem; width: 1.0625rem; height: 1.0625rem; accent-color: var(--ap-accent); cursor: pointer; } .ap-check-line strong { font-weight: 600; } .ap-mode-block { margin-bottom: 1.25rem; } /* --- the saved-servers picker ------------------------------------------ */ .ap-dns-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.25rem 0.625rem; } .ap-dns-head .ap-modal-hint { margin: 0; } .ap-dns-list { border: 1px solid var(--ap-separator); border-radius: var(--ap-r-md); max-height: 15rem; overflow-y: auto; } .ap-dns-item { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0.6875rem 0.875rem; border-bottom: 1px solid var(--ap-separator); cursor: pointer; transition: background var(--ap-fast); } .ap-dns-item:last-child { border-bottom: none; } .ap-dns-item:hover { background: var(--ap-fill); } .ap-dns-item input[type="checkbox"] { flex: none; width: 1.0625rem; height: 1.0625rem; accent-color: var(--ap-accent); cursor: pointer; } .ap-dns-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ap-dns-title { font-size: 0.875rem; font-weight: 500; color: var(--ap-text); } .ap-dns-url { font-family: var(--ap-mono); font-size: 0.6875rem; color: var(--ap-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Says what ticking this one will actually do. */ .ap-dns-badge { flex: none; padding: 0.15rem 0.5rem; border-radius: var(--ap-r-pill); background: var(--ap-fill); border: 1px solid var(--ap-separator); font-size: 0.625rem; font-weight: 600; color: var(--ap-text-2); white-space: nowrap; } @media (max-width: 575.98px) { .ap-dns-badge { display: none; } } /* Says what pressing the button will actually do, before it is pressed. */ .ap-preview { display: none; margin: 0 0 1.25rem; padding: 0.75rem 0.875rem; border-radius: var(--ap-r-md); background: var(--ap-fill); border-left: 3px solid var(--ap-accent); font-size: 0.8125rem; line-height: 1.5; color: var(--ap-text-2); } .ap-preview.is-on { display: block; } .ap-preview.is-warn { border-left-color: var(--ap-orange); } /* --- DNS Settings: a server and its DNS entries ------------------------- */ .ap-server { border: 1px solid var(--ap-separator); border-radius: var(--ap-r-md); margin-bottom: 1.25rem; overflow: hidden; } .ap-server-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.875rem 1rem; background: var(--ap-surface-2); border-bottom: 1px solid var(--ap-separator); } .ap-server-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ap-text); } .ap-server-count { margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: var(--ap-r-pill); background: var(--ap-fill); border: 1px solid var(--ap-separator); font-size: 0.6875rem; font-weight: 600; color: var(--ap-text-2); font-variant-numeric: tabular-nums; } .ap-server-actions { display: flex; gap: 0.375rem; } .ap-server-empty { margin: 0; padding: 0.875rem 1rem; font-size: 0.8125rem; color: var(--ap-text-3); } .ap-server .table-responsive { border: none; border-radius: 0; } /* Trial expiry. Colour is the state, not decoration - overdue and nearly-due have to be readable at a glance in a long list. */ .ap-exp { font-variant-numeric: tabular-nums; } .ap-exp.is-soon { color: var(--ap-orange); font-weight: 600; } .ap-exp.is-over { color: var(--ap-red); font-weight: 600; } /* --- per-server account status ------------------------------------------ One line per server: "Trex : Active". The colour carries the state, so it has to be legible in a dense list and in both appearances - all of these are theme-aware variables, not fixed hex. */ /* DNS label in the playlists table - the name inside its server (DNS1, VPN). */ .ap-dns-label { font-weight: 600; color: var(--ap-text); } .ap-srv-line { white-space: nowrap; line-height: 1.7; } .ap-srv-line + .ap-srv-line { margin-top: 0.125rem; } .ap-srv-name { font-weight: 600; color: var(--ap-text); } .ap-srv-sep { color: var(--ap-text-3); margin: 0 0.3rem; } .ap-st { font-weight: 600; font-size: 0.8125rem; } .ap-st.is-active { color: var(--ap-green); } .ap-st.is-trial { color: var(--ap-accent); } .ap-st.is-soon { color: var(--ap-orange); } .ap-st.is-expired { color: var(--ap-red); } /* "Account doesn't exist" is a data problem, not a subscription state - grey plus a strike reads as "gone" without competing with expired-red. */ .ap-st.is-missing { color: var(--ap-text-3); text-decoration: line-through; } /* Neither of these is a subscription state - they mean "we do not know yet". */ .ap-st.is-unreachable { color: var(--ap-text-3); font-weight: 400; } .ap-st.is-unknown { color: var(--ap-text-3); font-weight: 400; font-style: italic; } /* The wrapper carries the tooltip: a disabled button receives no mouse events, so a title on the button alone disappears exactly when the user most needs to know why it is greyed out. */ .ap-check-wrap { display: inline-block; } .ap-check-wrap .btn[disabled] { pointer-events: none; } .ap-check-note { font-size: 0.8125rem; margin-top: 0.375rem; } /* --- the Actions dialog -------------------------------------------------- */ .ap-manage-mac { font-family: var(--ap-mono); font-size: 0.9375rem; color: var(--ap-text); margin-bottom: 0.25rem; } .ap-manage-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ap-separator); } /* --- progress bar for the push-out to MAC users ------------------------- */ .ap-bar { height: 6px; border-radius: 980px; background: var(--ap-fill); overflow: hidden; margin: 1rem 0 0.5rem; } .ap-bar-fill { height: 100%; width: 0; border-radius: 980px; background: var(--ap-accent); transition: width 0.25s var(--ap-ease); } .ap-bar-note { margin: 0 0 1rem; font-size: 0.75rem; color: var(--ap-text-3); font-variant-numeric: tabular-nums; } .ap-synclog { max-height: 9rem; overflow-y: auto; padding: 0.625rem 0.75rem; border: 1px solid var(--ap-separator); border-radius: var(--ap-r-md); background: var(--ap-surface-2); font-family: var(--ap-mono); font-size: 0.6875rem; line-height: 1.6; color: var(--ap-text-2); } .ap-synclog:empty { display: none; } .ap-synclog-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Short explainer at the top of a screen that introduces a concept. */ .ap-explain { background: var(--ap-surface-2); border: 1px solid var(--ap-separator); border-left: 3px solid var(--ap-accent); border-radius: var(--ap-r-md); padding: 1rem 1.125rem; margin-bottom: 1.5rem; } .ap-explain h4 { margin: 0 0 0.625rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-text-3); } .ap-explain p { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 1.55; color: var(--ap-text-2); } .ap-explain .ap-explain-last { margin-bottom: 0; } .ap-explain strong { color: var(--ap-text); font-weight: 600; } .ap-explain code { padding: 0.1rem 0.375rem; border-radius: 5px; background: var(--ap-fill); border: 1px solid var(--ap-separator); font-family: var(--ap-mono); font-size: 0.8125em; color: var(--ap-text); } /* -------------------------------------------------------------------------- 12. Alerts / toasts -------------------------------------------------------------------------- */ #pageMessages { left: 50%; transform: translateX(-50%); position: fixed; top: 0.75rem; width: min(28rem, calc(100% - 2rem)); z-index: 9999; text-align: left; pointer-events: none; } #pageMessages .alert { pointer-events: auto; } .alert, .ctalert { background: var(--ap-surface-raised) !important; border: 1px solid var(--ap-separator) !important; border-radius: var(--ap-r-md) !important; box-shadow: var(--ap-shadow-lg) !important; color: var(--ap-text) !important; padding: 0.875rem 2.5rem 0.875rem 1rem !important; font-size: 0.875rem; position: relative; margin-bottom: 0.5rem; } .alert h3, .alert h4, .ctalert h3 { font-size: 0.9375rem !important; font-weight: 600; color: var(--ap-text) !important; margin: 0 0 0.15rem; } /* Severity shows as a 3px leading bar, not a wash of colour */ .alert::before { content: ""; position: absolute; left: 0; top: 0.625rem; bottom: 0.625rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--ap-accent); } .alert-success::before { background: var(--ap-green); } .alert-danger::before { background: var(--ap-red); } .alert-warning::before { background: var(--ap-orange); } .alert-info::before { background: var(--ap-accent); } .alert .fa { margin-right: 0.4rem; color: var(--ap-text-2); } .alert-success .fa { color: var(--ap-green); } .alert-danger .fa { color: var(--ap-red); } .alert-warning .fa { color: var(--ap-orange); } .alert .close { position: absolute; top: 0.5rem; right: 0.625rem; font-size: 1.125rem; color: var(--ap-text-3) !important; opacity: 1; text-shadow: none; padding: 0.25rem; line-height: 1; } .alert .close:hover { color: var(--ap-text) !important; } /* -------------------------------------------------------------------------- 13. Media previews used by the theme pages -------------------------------------------------------------------------- */ .ctapplogo img, .ctappbg img { width: 100%; max-width: 18rem; height: auto; object-fit: contain; border-radius: var(--ap-r-md); border: 1px solid var(--ap-separator); background: var(--ap-surface-2); padding: 0.75rem; } /* -------------------------------------------------------------------------- 14. Responsive -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .container-fluid { padding: 1.25rem 1rem 2.5rem; } .card-body { padding: 1.25rem !important; } .card-header { padding: 1.25rem 1.25rem 1rem !important; } .card-header h2 { font-size: 1.25rem !important; } } @media (max-width: 767.98px) { body { font-size: 14px; } #sidebar-wrapper { position: fixed !important; z-index: 1045; box-shadow: var(--ap-shadow-lg); } .container-fluid { padding: 1rem 0.875rem 2.5rem; } .card { border-radius: var(--ap-r-md) !important; } .card-header h2 { font-size: 1.125rem !important; } .modal-dialog { max-width: calc(100% - 2rem); } #pageMessages { width: calc(100% - 1.5rem); } .table td, .table th { padding: 0.625rem 0.75rem !important; } } /* -------------------------------------------------------------------------- 15. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } #net-canvas, .vanta-canvas { display: none !important; } }