/* * app.css — Custom overrides on top of Bootstrap 5 * Keeps the dark cooperative portal aesthetic while using Bootstrap's grid/components */ /* ── Thai Font ─────────────────────────────────────────────── */ @font-face { font-family: "RSU"; src: url(../fonts/RSU_Regular.ttf); } @font-face { font-family: "RSU"; src: url(../fonts/RSU_light.ttf); font-weight: 300; } /* ── CSS Variables (overridden by theme.php) ────────────────── */ :root { --app-bg-body: #333333; --app-bg-header: #cc0000; --app-bg-info-1: #444444; --app-bg-info-2: #222222; --app-tx-color: #ffffff; --app-tx-header: #ffffff; } /* ── Base ───────────────────────────────────────────────────── */ body { font-family: "RSU", "Sarabun", sans-serif; font-size: 1.1rem; background-color: var(--app-bg-body); color: var(--app-tx-color); } /* ── Navbar ─────────────────────────────────────────────────── */ .app-navbar { background-color: var(--app-bg-header) !important; color: var(--app-tx-header); } .app-navbar .navbar-brand, .app-navbar .nav-link { color: var(--app-tx-header) !important; } /* ── Font Size Levels ───────────────────────────────────────── */ /* Applied to via JS, scales all rem-based sizes */ body.fs-level-2 { font-size: 1.2rem !important; } body.fs-level-3 { font-size: 1.3rem !important; } body.fs-level-4 { font-size: 1.45rem !important; } /* Font size toggle buttons */ .font-size-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); background: transparent; color: #fff; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .font-size-btn:hover { background: rgba(255,255,255,0.15); } .font-size-btn.active { background: rgba(255,255,255,0.3); border-color: #fff; } .font-size-btn.fs-sm { font-size: 0.75rem; } .font-size-btn.fs-md { font-size: 0.9rem; } .font-size-btn.fs-lg { font-size: 1.05rem; } .font-size-btn.fs-xl { font-size: 1.2rem; font-weight: bold; } /* ── Sidebar ────────────────────────────────────────────────── */ .app-sidebar { background-color: var(--app-bg-body); min-height: 100vh; padding: 1rem; border-right: 1px solid rgba(255,255,255,0.1); } .sidebar-avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 0.75rem; position: relative; background-color: #000; } .sidebar-avatar img { width:100%; height:100%; object-fit:cover; } .sidebar-add-photo { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #000; font-size: 1.2rem; line-height: 28px; text-align: center; position: absolute; bottom: 0; right: 3px; text-decoration: none; display: block; } .sidebar-member-name { font-size: 1.2rem; font-weight: bold; } /* Sidebar nav links */ .sidebar-nav .nav-link { color: var(--app-tx-color); padding: 0.4rem 0.5rem; font-size: 0.9rem; border-radius: 4px; } .sidebar-nav .nav-link:hover { background: rgba(255,255,255,0.1); } .sidebar-nav .nav-icon { width: 24px; height: 24px; object-fit: contain; margin-right: 0.4rem; vertical-align: middle; } /* ── Main Content ───────────────────────────────────────────── */ .app-content { background: linear-gradient(var(--app-bg-info-1), var(--app-bg-info-2)); min-height: 100vh; padding: 1rem; } /* ── Headings ───────────────────────────────────────────────── */ h1 { font-size: 3rem; } h2 { font-size: 2.5rem; } h3 { font-size: 2rem; } h4 { font-size: 1.8rem; } h5 { font-size: 1.75rem; } h6 { font-size: 1.5rem; } /* ── Receive & Loan Sub-tabs ────────────────────────────────── */ #receiveTabs .nav-link, #loanTabs .nav-link { color: #fff; background-color: #999; border-color: #999 #999 transparent; } #receiveTabs .nav-link.active, #loanTabs .nav-link.active { color: #333; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; } /* ── Tabs ───────────────────────────────────────────────────── */ .app-tabs .nav-link { color: var(--app-tx-color); opacity: 0.7; border: 1px solid transparent; font-size: 1.5rem; } .app-tabs .nav-link.active { background: rgba(255,255,255,0.15); color: var(--app-tx-color); opacity: 1; border-color: rgba(255,255,255,0.3); } /* ── Page Header ────────────────────────────────────────────── */ .page-topic { font-size: 2rem; color: var(--app-tx-header); padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 1rem; } .page-topic img { height: 1.5rem; vertical-align: middle; margin-right: 0.4rem; } /* ── Money / Amount Classes ─────────────────────────────────── */ .amount-share { font-size: 2.5rem; color: #00ff00; display: block; text-shadow: 0 0 10px rgba(0,0,0,0.8); } .amount-loan { font-size: 2.5rem; color: #ff0000; display: block; text-shadow: 0 0 10px rgba(0,0,0,0.8); } .amount-deposit { font-size: 2.5rem; color: #ffff00; display: block; text-shadow: 0 0 10px rgba(0,0,0,0.8); } .amount-interest { font-size: 2.5rem; color: #00ff00; display: block; text-shadow: 0 0 10px rgba(0,0,0,0.8); } .amount-sub { font-size: 1.25rem; color: #ff4444; display: block; } /* ── Tables ─────────────────────────────────────────────────── */ .app-table { background-color: #fff; color: #000; font-size: 0.85em; width: 95%; margin: 0 auto; } .app-table thead th { background-color: #222; color: #fff; text-align: center; } .app-table td { border: 1px solid #000; padding: 0.4rem 0.5rem; } .app-table .disabled-cell { background-color: #999; } .app-table .number-right { text-align: right; } /* ── Dark Box ───────────────────────────────────────────────── */ .dark-box { background-color: rgba(0,0,0,0.5); padding: 1rem; margin-bottom: 1rem; border-radius: 4px; } /* ── Login Page ─────────────────────────────────────────────── */ .login-card { background: linear-gradient(var(--app-bg-info-1), var(--app-bg-info-2)); border: 1px solid rgba(255,255,255,0.3); color: var(--app-tx-color); max-width: 460px; margin: auto; } .login-logo { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; margin: 0 auto 1rem; } .login-logo img { width: 100%; height: 100%; object-fit: cover; } /* ── Buttons ────────────────────────────────────────────────── */ .btn-app-primary { background-color: #fff; color: #000b44; border: none; border-radius: 5px; padding: 0.3rem 1.2rem; } .btn-app-primary:hover { background-color: #e0e0e0; color: #000; } /* ── Responsive: mobile stacks sidebar below header ────────── */ @media (max-width: 767px) { .app-sidebar { min-height: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); } .app-tabs .nav-link { font-size: 1rem; padding: 0.3rem 0.5rem; } } /* ── Print ──────────────────────────────────────────────────── */ @media print { .app-navbar, .app-sidebar { display: none !important; } .app-content { margin: 0 !important; padding: 0 !important; background: #fff; color: #000; } }