/* * App theme + shell (Revolut-style) layered on Bootstrap 5. Everything is driven by CSS variables so * a single [data-theme="dark"] switch on recolors the whole app — including the legacy * Bootstrap-3 classes (panel/btn-default/table-condensed/col-md-offset/…) still used by not-yet- * restyled page templates. Layout is a fixed left sidebar + sticky topbar + scrolling content. */ /* ============================ Theme tokens ============================ */ :root { --accent: #5fb878; --accent-dark: #4ca566; --accent-soft: rgba(95, 184, 120, 0.12); --bg: #f4f6fa; --surface: #ffffff; --surface-2: #f7f9fb; --surface-3: #eef1f6; --text: #1f2733; --text-muted: #8a93a4; --border: #e7eaf0; --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12); --sidebar-w: 244px; --topbar-h: 60px; --pos: #2e9e5b; /* positive / success */ --pos-bg: rgba(46, 158, 91, 0.12); --neg: #d9534f; /* negative / danger */ --neg-bg: rgba(217, 83, 79, 0.12); --warn: #e0922f; /* pending / warning */ --warn-bg: rgba(224, 146, 47, 0.14); } html[data-theme="dark"] { --accent: #5fb878; --accent-dark: #6cc685; --accent-soft: rgba(95, 184, 120, 0.18); --bg: #0f131a; --surface: #171c25; --surface-2: #1e2531; --surface-3: #252d3b; --text: #e6e9ef; --text-muted: #98a2b3; --border: #2a313d; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --pos-bg: rgba(46, 158, 91, 0.20); --neg-bg: rgba(217, 83, 79, 0.22); --warn-bg: rgba(224, 146, 47, 0.22); } * { scrollbar-color: var(--border) transparent; } body { background: var(--bg); color: var(--text); font-size: 14px; } h1, h2, h3, h4, h5 { color: var(--text); font-weight: 600; } a { color: var(--accent-dark); } hr { border-color: var(--border); } /* ============================ App shell ============================ */ .app-shell { min-height: 100vh; } .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; z-index: 1040; transition: transform 0.2s ease; } .app-sidebar__brand { display: flex; align-items: center; height: var(--topbar-h); padding: 0 20px; border-bottom: 1px solid var(--border); } .app-sidebar__brand img { max-height: 30px; max-width: 170px; } .app-nav { padding: 12px 12px 24px; } .app-nav__section { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; padding: 16px 12px 6px; } .app-nav__item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 2px; border-radius: 10px; color: var(--text-muted); font-weight: 500; text-decoration: none; white-space: nowrap; } .app-nav__item:hover { background: var(--surface-2); color: var(--text); } .app-nav__item.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; } .app-nav__item i { width: 18px; text-align: center; font-size: 15px; } .app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } .app-topbar { position: sticky; top: 0; height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 24px; z-index: 1030; } .app-topbar__title { font-size: 18px; font-weight: 600; margin: 0; } .app-content { padding: 24px; flex: 1; } .app-footer { color: var(--text-muted); text-align: center; padding: 18px 24px 28px; border-top: 1px solid var(--border); margin-top: 8px; } .app-footer__links { margin-bottom: 8px; display: flex; gap: 8px; justify-content: center; align-items: center; } .app-footer__links a { color: var(--accent-dark); font-weight: 500; } .app-footer__legal { font-size: 11.5px; line-height: 1.5; max-width: 900px; margin: 0 auto; color: var(--text-muted); } .sidebar-backdrop { display: none; } /* Mobile: sidebar slides over content */ @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); } .app-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .app-main { margin-left: 0; } .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1035; } } /* ============================ Topbar controls ============================ */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .app-topbar .dropdown-menu { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: 12px; } .app-topbar .dropdown-item { color: var(--text); border-radius: 8px; } .app-topbar .dropdown-item:hover { background: var(--surface-2); } /* ============================ Cards / panels ============================ */ .card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 20px; } .card-header, .panel-heading { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 600; background: transparent; border-top-left-radius: 14px; border-top-right-radius: 14px; color: var(--text); } .card-body, .panel-body { padding: 20px; color: var(--text); } /* ============================ Tables ============================ */ .table { margin-bottom: 0; color: var(--text); /* Drive Bootstrap's own table CSS vars from the theme (otherwise BS overrides our color in dark). */ --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-striped-color: var(--text); --bs-table-striped-bg: var(--surface-2); --bs-table-hover-color: var(--text); --bs-table-hover-bg: var(--surface-2); --bs-table-active-color: var(--text); --bs-table-active-bg: var(--surface-2); } .table > thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 600; } .table > tbody > tr > td { vertical-align: middle; border-color: var(--border); color: var(--text); } .table > thead > tr > th { border-color: var(--border); } .table-condensed > tbody > tr > td, .table-condensed > thead > tr > th { padding: 8px 12px; } .table-hover > tbody > tr:hover, .table tbody tr:hover { background: var(--surface-2); } .table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--border) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surface-2); color: var(--text); } /* ============================ Buttons ============================ */ .btn { border-radius: 9px; font-weight: 500; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; } .btn-default { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .btn-default:hover { background: var(--surface-2); color: var(--text); } .btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 7px; } .btn-link { color: var(--accent-dark); } /* ============================ Forms ============================ */ .form-control, .form-select { border-radius: 9px; border-color: var(--border); background: var(--surface); color: var(--text); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft); background: var(--surface); color: var(--text); } .form-control::placeholder { color: var(--text-muted); } .form-control:disabled, .form-control[readonly] { background: var(--surface-3); color: var(--text-muted); } .form-label, label { color: var(--text); } .form-group { margin-bottom: 1rem; } .form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; } .form-inline .form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; } .form-inline label { font-size: 12px; color: var(--text-muted); margin: 0; font-weight: 600; } .input-group-addon { display: flex; align-items: center; padding: 0 12px; background: var(--surface-3); border: 1px solid var(--border); border-left: 0; border-radius: 0 9px 9px 0; color: var(--text-muted); } /* ============================ Status pills ============================ */ .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; } .pill-pos { background: var(--pos-bg); color: var(--pos); } .pill-neg { background: var(--neg-bg); color: var(--neg); } .pill-warn { background: var(--warn-bg); color: var(--warn); } .pill-muted { background: var(--surface-3); color: var(--text-muted); } /* ============================ Legacy grid offsets (removed in BS5) ============================ */ .col-md-offset-1 { margin-left: 8.3333%; } .col-md-offset-2 { margin-left: 16.6666%; } .col-md-offset-3 { margin-left: 25%; } /* ============================ Misc legacy helpers ============================ */ .pull-right { float: right; } .text-muted { color: var(--text-muted) !important; } .themeprimary { color: var(--accent) !important; } .white { color: #fff !important; } .badge { background: var(--accent); } .alert { border-radius: 11px; } .dropdown-menu { background: var(--surface); border-color: var(--border); } .dropdown-item { color: var(--text); } .dropdown-item:hover { background: var(--surface-2); color: var(--text); } .dropdown-divider { border-color: var(--border); } /* notification icon chips */ .bg-darkorange { background: #f0932b !important; } .bg-warning { background: #f6b93b !important; } .bg-palegreen { background: var(--accent) !important; } .bg-themeprimary { background: #4a90d9 !important; } [class*="bg-"][class*="fa"], .fa[class*="bg-"], .glyphicon[class*="bg-"] { padding: 6px; border-radius: 8px; display: inline-block; width: 30px; text-align: center; color: #fff; } /* ============================ Balance cards (Revolut-style overview) ============================ */ .balance-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; } .balance-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); position: relative; } .balance-card.is-primary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } .balance-card__ccy { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; font-size: 13px; } .balance-card__amount { font-size: 22px; font-weight: 700; margin-top: 8px; } .balance-card__star { color: var(--accent); } /* ============================ Avatars (table rows) ============================ */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; font-size: 12px; flex: 0 0 auto; text-transform: uppercase; } .cell-with-avatar { display: inline-flex; align-items: center; gap: 10px; } .unread-dot { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); } /* ============================ Detail side-panel (Revolut-style) ============================ */ .row-click { cursor: pointer; } .row-click.active { background: var(--accent-soft) !important; } .detail-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.2s ease; z-index: 1050; overflow-y: auto; } .detail-panel.open { transform: translateX(0); } .detail-panel__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); } .detail-panel__amount { font-size: 26px; font-weight: 700; } .detail-panel__sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; } .detail-panel__body { padding: 12px 24px 28px; } .detail-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); } .detail-row .k { color: var(--text-muted); white-space: nowrap; } .detail-row .v { font-weight: 500; text-align: right; word-break: break-all; } .detail-close { background: none; border: 0; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; } .detail-backdrop { display: none; } .detail-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1045; } .amount-pos { color: var(--pos); font-weight: 600; } .amount-neg { color: var(--text); font-weight: 600; } /* ============================ Auth (login) ============================ */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 32px 28px; } .auth-logo { text-align: center; margin-bottom: 22px; } .auth-logo img { max-height: 46px; max-width: 220px; } .auth-theme-toggle { position: absolute; top: 18px; right: 18px; } /* Theme-aware logo swap */ .logo-dark { display: none; } html[data-theme="dark"] .logo-light { display: none; } html[data-theme="dark"] .logo-dark { display: inline; }