/* MonEx design tokens: single source of truth for colour, type, elevation. Loaded after bootstrap.min.css so the remapped --bs-* variables win — Bootstrap reads its components from them, so values here re-skin the app with no blade edits. */ :root, [data-bs-theme='light'] { /* Palette taken from stock-rate-realtime.css: cream paper, warm ink, brass accent. */ --mx-ground: #faf6ec; --mx-surface: #ffffff; --mx-surface-sub: #f4ede1; --mx-line: #e6dfcd; --mx-line-strong: #d6cfbf; --mx-text: #1a1714; --mx-text-soft: #4a423a; --mx-muted: #877d6e; --mx-ink: #1a1714; --mx-ink-contrast: #faf6ec; --mx-brass: #8d6420; --mx-brass-bright: #b8893a; --mx-brass-wash: #f6ecd8; /* Direction: reserved for Beli/Jual and what follows from it (status, balance). */ --mx-beli: #2f6b4e; --mx-beli-wash: #e4efe6; --mx-jual: #a13d2a; --mx-jual-wash: #f7e5df; --mx-warn: #8d6420; --mx-warn-wash: #f6ecd8; --mx-shadow-sm: 0 1px 0 rgba(26, 23, 20, 0.04); --mx-shadow: 0 1px 0 rgba(26, 23, 20, 0.04), 0 8px 24px -16px rgba(26, 23, 20, 0.18); --mx-radius: 10px; --mx-radius-sm: 7px; --mx-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mx-font-display: 'Archivo', 'Inter', system-ui, sans-serif; --mx-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --mx-navbar-h: 50px; /* partials/footer.blade.php renders an absolutely-positioned copyright strip at the bottom of every page; content that ignores it renders underneath. */ --mx-footer-h: 18px; /* Everything between the viewport edges and a page's content area: the navbar, the layout container's mt-2 + mb-3, and the footer strip. */ --mx-chrome-h: calc(var(--mx-navbar-h) + 1.5rem + var(--mx-footer-h)); --mx-board-pad: 1rem; } /* Ready but not enabled; switch on with . */ [data-bs-theme='dark'] { --mx-ground: #0a1114; --mx-surface: #121d21; --mx-surface-sub: #162327; --mx-line: #23343a; --mx-line-strong: #35494f; --mx-text: #e7eeea; --mx-text-soft: #b8c6c1; --mx-muted: #8b9c98; --mx-ink: #e9b949; --mx-ink-contrast: #0a1114; --mx-brass: #e9b949; --mx-brass-wash: #2a2416; --mx-beli: #3abf9f; --mx-beli-wash: #102a26; --mx-jual: #e88a63; --mx-jual-wash: #2e1c16; --mx-warn: #d9a63c; --mx-warn-wash: #2a2415; --mx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --mx-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.7); } /* Bootstrap remap */ :root, [data-bs-theme='light'], [data-bs-theme='dark'] { --bs-body-bg: var(--mx-ground); --bs-body-color: var(--mx-text); --bs-secondary-color: var(--mx-muted); --bs-secondary-bg: var(--mx-surface-sub); --bs-tertiary-bg: var(--mx-surface-sub); --bs-emphasis-color: var(--mx-text); --bs-border-color: var(--mx-line); --bs-border-color-translucent: var(--mx-line); --bs-border-radius: var(--mx-radius-sm); --bs-border-radius-lg: var(--mx-radius); --bs-primary: var(--mx-ink); --bs-primary-rgb: 26, 23, 20; --bs-primary-bg-subtle: var(--mx-surface-sub); --bs-primary-border-subtle: var(--mx-line-strong); --bs-success: var(--mx-beli); --bs-success-rgb: 47, 107, 78; --bs-danger: var(--mx-jual); --bs-danger-rgb: 161, 61, 42; --bs-warning: var(--mx-warn); --bs-warning-rgb: 141, 100, 32; --bs-link-color: var(--mx-brass); --bs-link-hover-color: var(--mx-text); --bs-focus-ring-color: rgba(141, 100, 32, 0.35); --bs-body-font-family: var(--mx-font-sans); --bs-font-monospace: var(--mx-font-mono); --bs-card-bg: var(--mx-surface); /* SweetAlert remap: the bundled build reads its whole shell from these, so the dialogs re-skin with no call-site edits. Button colours are the exception — 197 call sites pass confirmButtonColor as an inline style, which only js/monex/swal-theme.js can disarm. */ --swal2-width: 25rem; --swal2-padding: 0; --swal2-background: var(--mx-surface); --swal2-color: var(--mx-text); --swal2-border: 1px solid var(--mx-line-strong); --swal2-border-radius: var(--mx-radius); --swal2-backdrop: rgba(26, 23, 20, 0.45); --swal2-outline: 0 0 0 3px rgba(141, 100, 32, 0.35); --swal2-icon-zoom: 0.72; --swal2-title-padding: 1.2rem 1.5rem 0.4rem; --swal2-html-container-padding: 0 1.5rem 1.25rem; --swal2-actions-width: 100%; --swal2-actions-margin: 0; --swal2-actions-padding: 0.7rem 1.15rem; --swal2-actions-justify-content: flex-end; --swal2-actions-background: var(--mx-ground); --swal2-input-background: var(--mx-surface-sub); --swal2-input-border: 1px solid var(--mx-line-strong); --swal2-input-border-radius: var(--mx-radius-sm); --swal2-input-focus-border: 1px solid var(--mx-brass-bright); --swal2-validation-message-background: var(--mx-jual-wash); --swal2-validation-message-color: var(--mx-jual); --swal2-timer-progress-bar-background: var(--mx-brass); --swal2-footer-border-color: var(--mx-line); --swal2-footer-color: var(--mx-muted); --swal2-close-button-color: var(--mx-muted); } [data-bs-theme='dark'] { --bs-primary-rgb: 233, 185, 73; --bs-success-rgb: 58, 191, 159; --bs-danger-rgb: 232, 138, 99; --bs-warning-rgb: 217, 166, 60; --bs-focus-ring-color: rgba(233, 185, 73, 0.35); } /* type */ body { font-family: var(--mx-font-sans); color: var(--mx-text); background-color: var(--mx-ground); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--mx-font-display); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } /* Digits compared down a column must line up — this is what makes rate, nominal and stock scannable at a glance. */ .table td, .table th, input[type='number'], .mx-num { font-variant-numeric: tabular-nums; } .mx-num { font-family: var(--mx-font-mono); letter-spacing: -0.02em; } /* Buttons: Bootstrap 5.3 compiles literal hex into each variant's --bs-btn-*, so remapping --bs-primary alone does NOT restyle buttons. Every variant this app actually uses is overridden below. */ .btn-primary { --bs-btn-color: var(--mx-ink-contrast); --bs-btn-bg: var(--mx-ink); --bs-btn-border-color: var(--mx-ink); --bs-btn-hover-color: var(--mx-ink-contrast); --bs-btn-hover-bg: color-mix(in srgb, var(--mx-ink) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--mx-ink) 85%, #000); --bs-btn-active-color: var(--mx-ink-contrast); --bs-btn-active-bg: color-mix(in srgb, var(--mx-ink) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--mx-ink) 75%, #000); --bs-btn-disabled-color: var(--mx-ink-contrast); --bs-btn-disabled-bg: var(--mx-ink); --bs-btn-disabled-border-color: var(--mx-ink); --bs-btn-focus-shadow-rgb: 141, 100, 32; } /* This bootstrap build ships --bs-secondary as purple (#732062); btn-secondary is the app's Tutup/Batal/Kembali button, so it reads as a quiet dismiss instead. */ .btn-secondary { --bs-btn-color: var(--mx-text); --bs-btn-bg: var(--mx-surface); --bs-btn-border-color: var(--mx-line-strong); --bs-btn-hover-color: var(--mx-text); --bs-btn-hover-bg: var(--mx-surface-sub); --bs-btn-hover-border-color: var(--mx-line-strong); --bs-btn-active-color: var(--mx-text); --bs-btn-active-bg: var(--mx-surface-sub); --bs-btn-active-border-color: var(--mx-line-strong); --bs-btn-disabled-color: var(--mx-muted); --bs-btn-disabled-bg: var(--mx-surface); --bs-btn-disabled-border-color: var(--mx-line); --bs-btn-focus-shadow-rgb: 141, 100, 32; } .btn-success { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-bg: var(--mx-beli); --bs-btn-border-color: var(--mx-beli); --bs-btn-hover-bg: color-mix(in srgb, var(--mx-beli) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--mx-beli) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--mx-beli) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--mx-beli) 75%, #000); --bs-btn-disabled-bg: var(--mx-beli); --bs-btn-disabled-border-color: var(--mx-beli); } .btn-danger { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-bg: var(--mx-jual); --bs-btn-border-color: var(--mx-jual); --bs-btn-hover-bg: color-mix(in srgb, var(--mx-jual) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--mx-jual) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--mx-jual) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--mx-jual) 75%, #000); --bs-btn-disabled-bg: var(--mx-jual); --bs-btn-disabled-border-color: var(--mx-jual); } .btn-warning { --bs-btn-color: #fff; --bs-btn-bg: var(--mx-warn); --bs-btn-border-color: var(--mx-warn); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--mx-warn) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--mx-warn) 85%, #000); --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--mx-warn) 75%, #000); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--mx-warn); --bs-btn-disabled-border-color: var(--mx-warn); } /* btn-info and btn-dark are the datatable export/refresh buttons on every report page. */ .btn-info { --bs-btn-color: var(--mx-text); --bs-btn-bg: var(--mx-surface); --bs-btn-border-color: var(--mx-line-strong); --bs-btn-hover-color: var(--mx-text); --bs-btn-hover-bg: var(--mx-surface-sub); --bs-btn-hover-border-color: var(--mx-line-strong); --bs-btn-active-color: var(--mx-text); --bs-btn-active-bg: var(--mx-surface-sub); --bs-btn-active-border-color: var(--mx-line-strong); --bs-btn-disabled-color: var(--mx-muted); --bs-btn-disabled-bg: var(--mx-surface); --bs-btn-disabled-border-color: var(--mx-line); } .btn-dark { --bs-btn-color: var(--mx-ink-contrast); --bs-btn-bg: var(--mx-ink); --bs-btn-border-color: var(--mx-ink); --bs-btn-hover-color: var(--mx-ink-contrast); --bs-btn-hover-bg: color-mix(in srgb, var(--mx-ink) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--mx-ink) 85%, #000); --bs-btn-active-color: var(--mx-ink-contrast); --bs-btn-active-bg: color-mix(in srgb, var(--mx-ink) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--mx-ink) 75%, #000); } .btn-outline-primary { --bs-btn-color: var(--mx-text); --bs-btn-border-color: var(--mx-line-strong); --bs-btn-hover-color: var(--mx-ink-contrast); --bs-btn-hover-bg: var(--mx-ink); --bs-btn-hover-border-color: var(--mx-ink); --bs-btn-active-color: var(--mx-ink-contrast); --bs-btn-active-bg: var(--mx-ink); --bs-btn-active-border-color: var(--mx-ink); } .btn-outline-secondary { --bs-btn-color: var(--mx-text); --bs-btn-border-color: var(--mx-line-strong); --bs-btn-hover-color: var(--mx-text); --bs-btn-hover-bg: var(--mx-surface-sub); --bs-btn-hover-border-color: var(--mx-line-strong); --bs-btn-active-color: var(--mx-text); --bs-btn-active-bg: var(--mx-surface-sub); --bs-btn-active-border-color: var(--mx-line-strong); } /* Left at the build's #ea1e00, this sat at 4.15 on --mx-ground and read off-brand next to every other red in the app. */ .btn-outline-danger { --bs-btn-color: var(--mx-jual); --bs-btn-border-color: var(--mx-jual); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--mx-jual); --bs-btn-hover-border-color: var(--mx-jual); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--mx-jual); --bs-btn-active-border-color: var(--mx-jual); } /* surfaces */ .card { border-color: var(--mx-line); box-shadow: var(--mx-shadow-sm); } .form-control, .form-select { border-color: var(--mx-line-strong); } .form-control::placeholder { color: var(--mx-muted); } /* Neutralises .table-primary and .text-bg-info, used as table heads on older screens. */ .table > thead > tr > th, .table > thead.table-primary > tr > th, .table > thead > tr > th.text-bg-info { background-color: var(--mx-surface-sub) !important; color: var(--mx-muted) !important; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--mx-line) !important; box-shadow: none !important; } .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, a:focus-visible { outline: 2px solid var(--mx-brass); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }