/* Giao dien Terminal - CHI co hieu luc khi .
Toan bo style.css (giao dien goc) khong bi dong toi - bat/tat qua dropdown chon giao dien o navbar,
luu trong localStorage, khong can tai lai trang. */
:root[data-theme="terminal"] {
--term-bg: #0c0e0c;
--term-bg-deep: #000000;
--term-panel: #0f130f;
--term-panel-light: #141914;
--term-green: #33ff33;
--term-green-dim: #1f9c1f;
--term-amber: #ffb000;
--term-red: #ff5555;
--term-text: #33ff33;
--term-text-dim: #2a7a2a;
--term-border: rgba(51, 255, 51, 0.35);
}
:root[data-theme="terminal"] body {
background-color: var(--term-bg);
background-image:
repeating-linear-gradient(0deg, rgba(51, 255, 51, 0.03) 0px, rgba(51, 255, 51, 0.03) 1px, transparent 1px, transparent 3px),
radial-gradient(ellipse at center, rgba(51, 255, 51, 0.06), transparent 65%);
color: var(--term-text);
font-family: "IBM Plex Mono", "Share Tech Mono", monospace;
}
:root[data-theme="terminal"] h1,
:root[data-theme="terminal"] h2,
:root[data-theme="terminal"] h3,
:root[data-theme="terminal"] h4,
:root[data-theme="terminal"] h5,
:root[data-theme="terminal"] h6,
:root[data-theme="terminal"] .navbar-brand {
font-family: "VT323", "IBM Plex Mono", monospace;
font-weight: 400;
color: var(--term-green);
text-shadow: 0 0 4px rgba(51, 255, 51, 0.5);
letter-spacing: 0.03em;
}
:root[data-theme="terminal"] .navbar-brand::after {
content: "_";
animation: termCursorBlink 1s step-end infinite;
}
@keyframes termCursorBlink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
:root[data-theme="terminal"] a {
color: var(--term-green);
}
:root[data-theme="terminal"] .text-muted {
color: var(--term-text-dim) !important;
}
/* ---------- Theme toggle dropdown ---------- */
:root[data-theme="terminal"] .dropdown-menu {
background-color: var(--term-panel);
border: 1px solid var(--term-border);
border-radius: 0;
box-shadow: 0 0 20px rgba(51, 255, 51, 0.15);
}
:root[data-theme="terminal"] .dropdown-item {
color: var(--term-text);
font-family: "IBM Plex Mono", monospace;
}
:root[data-theme="terminal"] .dropdown-item:hover,
:root[data-theme="terminal"] .dropdown-item:focus {
background-color: rgba(51, 255, 51, 0.1);
color: var(--term-green);
}
:root[data-theme="terminal"] .dropdown-item.active {
background-color: var(--term-green);
color: var(--term-bg-deep);
}
/* ---------- Header ---------- */
:root[data-theme="terminal"] .navbar.app-navbar {
background-color: var(--term-bg-deep) !important;
border-bottom: 1px solid var(--term-border);
}
:root[data-theme="terminal"] .app-navbar .navbar-brand {
color: var(--term-green) !important;
}
:root[data-theme="terminal"] .app-navbar .nav-link {
color: var(--term-text) !important;
}
:root[data-theme="terminal"] .app-navbar .nav-link::before {
content: "> ";
color: var(--term-green-dim);
}
:root[data-theme="terminal"] .app-navbar .nav-link:hover {
color: var(--term-green) !important;
text-shadow: 0 0 6px rgba(51, 255, 51, 0.7);
}
:root[data-theme="terminal"] .app-navbar .navbar-text {
color: var(--term-text-dim) !important;
}
:root[data-theme="terminal"] .navbar-toggler {
border-color: var(--term-border);
filter: invert(1) hue-rotate(80deg);
}
/* ---------- Buttons ---------- */
:root[data-theme="terminal"] .btn {
border-radius: 0;
font-family: "IBM Plex Mono", monospace;
}
:root[data-theme="terminal"] .btn-primary {
background-color: transparent;
border: 1px solid var(--term-green);
color: var(--term-green);
}
:root[data-theme="terminal"] .btn-primary:hover,
:root[data-theme="terminal"] .btn-primary:focus {
background-color: var(--term-green);
color: var(--term-bg-deep);
box-shadow: 0 0 16px rgba(51, 255, 51, 0.6);
}
:root[data-theme="terminal"] .btn-outline-secondary {
background-color: transparent;
border: 1px solid var(--term-text-dim);
color: var(--term-text);
}
:root[data-theme="terminal"] .btn-outline-secondary:hover {
background-color: var(--term-green);
border-color: var(--term-green);
color: var(--term-bg-deep);
}
:root[data-theme="terminal"] .btn-outline-danger {
border-color: var(--term-red);
color: var(--term-red);
}
:root[data-theme="terminal"] .btn-outline-danger:hover {
background-color: var(--term-red);
color: var(--term-bg-deep);
}
:root[data-theme="terminal"] .btn-outline-primary {
border-color: var(--term-amber);
color: var(--term-amber);
}
:root[data-theme="terminal"] .btn-outline-primary:hover {
background-color: var(--term-amber);
color: var(--term-bg-deep);
}
/* ---------- Cards ---------- */
:root[data-theme="terminal"] .card {
background-color: var(--term-panel);
border: 1px solid var(--term-border);
border-radius: 0;
box-shadow: none;
color: var(--term-text);
}
:root[data-theme="terminal"] a.card-link-hover:hover {
box-shadow: 0 0 20px rgba(51, 255, 51, 0.25);
}
:root[data-theme="terminal"] .card-title {
color: var(--term-green);
}
:root[data-theme="terminal"] .card-title::before {
content: "$ ";
color: var(--term-green-dim);
}
/* ---------- Modal ---------- */
:root[data-theme="terminal"] .modal-content {
background-color: var(--term-panel);
border: 1px solid var(--term-border);
border-radius: 0;
box-shadow: 0 0 30px rgba(51, 255, 51, 0.2);
}
:root[data-theme="terminal"] .modal-header {
border-bottom: 1px solid var(--term-border);
}
:root[data-theme="terminal"] .modal-title {
color: var(--term-green);
font-family: "VT323", "IBM Plex Mono", monospace;
letter-spacing: 0.03em;
}
:root[data-theme="terminal"] .modal-body {
color: var(--term-text);
}
:root[data-theme="terminal"] .btn-close {
filter: invert(1) hue-rotate(80deg);
}
/* ---------- Badges / status ---------- */
:root[data-theme="terminal"] .badge-status {
background-color: rgba(51, 255, 51, 0.08);
color: var(--term-green);
border: 1px solid var(--term-green);
border-radius: 0;
}
:root[data-theme="terminal"] .badge-status.on-hero {
background-color: rgba(0, 0, 0, 0.5);
color: var(--term-green);
border: 1px solid var(--term-green);
}
/* ---------- Back link ---------- */
:root[data-theme="terminal"] .back-link {
background-color: transparent;
border-color: var(--term-border);
border-radius: 0;
color: var(--term-text);
}
:root[data-theme="terminal"] .back-link:hover {
color: var(--term-bg-deep);
border-color: var(--term-green);
background-color: var(--term-green);
}
:root[data-theme="terminal"] .back-link-icon {
background-color: rgba(51, 255, 51, 0.1);
color: var(--term-green);
border-radius: 0;
}
:root[data-theme="terminal"] .back-link:hover .back-link-icon {
background-color: var(--term-bg-deep);
color: var(--term-green);
}
/* ---------- Hero ---------- */
:root[data-theme="terminal"] .hero-cover {
background-color: var(--term-bg-deep);
}
:root[data-theme="terminal"] .hero-cover::before {
background: linear-gradient(180deg, rgba(51, 255, 51, 0.12) 0%, rgba(0, 0, 0, 0.9) 100%);
}
:root[data-theme="terminal"] .hero-eyebrow {
color: var(--term-amber);
}
:root[data-theme="terminal"] .hero-cover h1 {
color: var(--term-green);
text-shadow: 0 0 10px rgba(51, 255, 51, 0.6);
}
:root[data-theme="terminal"] .hero-sub {
color: rgba(51, 255, 51, 0.75);
}
/* ---------- Section icon badges ---------- */
:root[data-theme="terminal"] .section-icon {
border-radius: 0;
background: var(--term-panel-light) !important;
border: 1px solid var(--term-green);
box-shadow: 0 0 10px rgba(51, 255, 51, 0.2);
font-family: "IBM Plex Mono", monospace;
font-size: 1.1rem;
font-weight: 600;
color: var(--term-green);
text-shadow: 0 0 4px rgba(51, 255, 51, 0.5);
}
/* ---------- Stat tiles ---------- */
:root[data-theme="terminal"] .stat-tile {
background: var(--term-panel-light);
border: 1px solid var(--term-border);
border-radius: 0;
}
:root[data-theme="terminal"] .stat-tile:hover {
box-shadow: 0 0 16px rgba(51, 255, 51, 0.2);
}
:root[data-theme="terminal"] .stat-tile .stat-value {
font-family: "VT323", monospace;
color: var(--term-green);
text-shadow: 0 0 6px rgba(51, 255, 51, 0.5);
}
:root[data-theme="terminal"] .stat-tile.positive .stat-value {
color: var(--term-green);
}
:root[data-theme="terminal"] .stat-tile.negative .stat-value {
color: var(--term-red);
text-shadow: 0 0 6px rgba(255, 85, 85, 0.5);
}
:root[data-theme="terminal"] .stat-tile .stat-label {
color: var(--term-text-dim);
}
/* ---------- Progress bar (ty le chi/thu) ---------- */
:root[data-theme="terminal"] .progress {
background-color: var(--term-panel-light);
border: 1px solid var(--term-border);
border-radius: 0;
}
:root[data-theme="terminal"] .progress-bar {
background-color: var(--term-green);
}
:root[data-theme="terminal"] .progress-bar.bg-danger {
background-color: var(--term-red) !important;
}
/* ---------- Tx card list (Thu-Chi mobile) ---------- */
:root[data-theme="terminal"] .tx-card {
background-color: var(--term-panel);
border: 1px solid var(--term-border);
border-radius: 0;
}
:root[data-theme="terminal"] .tx-card-date {
color: var(--term-text-dim);
}
:root[data-theme="terminal"] .tx-card-amount.text-success {
color: var(--term-green) !important;
}
:root[data-theme="terminal"] .tx-card-amount.text-danger {
color: var(--term-red) !important;
}
/* ---------- Forms ---------- */
:root[data-theme="terminal"] .form-control,
:root[data-theme="terminal"] .form-select {
background-color: var(--term-bg-deep);
border: 1px solid var(--term-border);
color: var(--term-text);
border-radius: 0;
font-family: "IBM Plex Mono", monospace;
}
:root[data-theme="terminal"] .form-control:focus,
:root[data-theme="terminal"] .form-select:focus {
background-color: var(--term-bg-deep);
color: var(--term-text);
border-color: var(--term-green);
box-shadow: 0 0 0 0.2rem rgba(51, 255, 51, 0.2);
}
:root[data-theme="terminal"] .form-control::placeholder {
color: var(--term-text-dim);
opacity: 0.8;
}
:root[data-theme="terminal"] .form-label {
color: var(--term-text-dim);
}
:root[data-theme="terminal"] .form-label::before {
content: "# ";
}
:root[data-theme="terminal"] .form-check-input {
background-color: var(--term-bg-deep);
border-color: var(--term-border);
border-radius: 0;
}
:root[data-theme="terminal"] .form-check-input:checked {
background-color: var(--term-green);
border-color: var(--term-green);
}
/* ---------- Tables ---------- */
:root[data-theme="terminal"] .table {
color: var(--term-text);
border-color: var(--term-border);
font-family: "IBM Plex Mono", monospace;
}
:root[data-theme="terminal"] .table > :not(caption) > * > * {
background-color: transparent;
color: var(--term-text);
border-bottom-color: var(--term-border);
}
:root[data-theme="terminal"] .table thead th {
background-color: var(--term-panel-light) !important;
color: var(--term-green);
font-weight: 700;
}
/* ---------- Alerts ---------- */
:root[data-theme="terminal"] .alert-success {
background-color: rgba(51, 255, 51, 0.08);
border-color: var(--term-green);
color: var(--term-green);
border-radius: 0;
}
:root[data-theme="terminal"] .alert-danger {
background-color: rgba(255, 85, 85, 0.1);
border-color: var(--term-red);
color: var(--term-red);
border-radius: 0;
}
:root[data-theme="terminal"] .alert-warning {
background-color: rgba(255, 176, 0, 0.1);
border-color: var(--term-amber);
color: var(--term-amber);
border-radius: 0;
}
:root[data-theme="terminal"] .border-danger {
border-color: var(--term-red) !important;
box-shadow: 0 0 10px rgba(255, 85, 85, 0.3);
}
/* ---------- Empty-state icon ---------- */
:root[data-theme="terminal"] .empty-state-msg::before {
content: "[!] ";
color: var(--term-amber);
}
/* ---------- Cute button accent (nut chinh chua co emoji rieng) ---------- */
:root[data-theme="terminal"] .btn-cute::before {
content: "> ";
}
/* ---------- Misc ---------- */
:root[data-theme="terminal"] .card-img-top {
filter: grayscale(0.3) contrast(1.1) sepia(0.15) hue-rotate(60deg);
}
:root[data-theme="terminal"] .progress-thumb,
:root[data-theme="terminal"] .photo-preview-item .progress-thumb {
border: 1px solid var(--term-border);
border-radius: 0;
}
/* ---------- Lich tien do thi cong + moc thu tien (thay the ban Gantt truoc do) - vuong thanh
(border-radius: 0) dung tinh than CLI cua theme nay, khac voi bo tron o 2 theme kia. ---------- */
:root[data-theme="terminal"] .progress-cal-legend {
color: var(--term-text-dim);
}
:root[data-theme="terminal"] .progress-cal-month-label {
color: var(--term-text);
}
:root[data-theme="terminal"] .progress-cal-weekdays span {
color: var(--term-text-dim);
}
:root[data-theme="terminal"] .progress-cal-payment-icon {
color: var(--term-green);
}
:root[data-theme="terminal"] .progress-cal-dot {
border-radius: 0;
}
:root[data-theme="terminal"] .progress-cal-day {
background: var(--term-panel-light);
border-color: var(--term-border);
color: var(--term-text);
border-radius: 0;
}
:root[data-theme="terminal"] .progress-cal-day.is-today {
outline-color: var(--term-green);
}
:root[data-theme="terminal"] .progress-cal-dot.is-done {
background: var(--term-green);
}
:root[data-theme="terminal"] .progress-cal-day.is-done {
background: rgba(51, 255, 51, 0.14);
border-color: var(--term-green);
color: var(--term-green);
}
:root[data-theme="terminal"] .progress-cal-dot.is-overdue {
background: var(--term-red);
}
:root[data-theme="terminal"] .progress-cal-day.is-overdue {
background: rgba(255, 85, 85, 0.14);
border-color: var(--term-red);
color: var(--term-red);
}
:root[data-theme="terminal"] .progress-cal-dot.is-pending {
background: var(--term-amber);
}
:root[data-theme="terminal"] .progress-notify-box {
background: var(--term-panel-light);
border-radius: 0;
}
:root[data-theme="terminal"] .progress-notify-photo-btn {
background: transparent;
border-color: var(--term-border);
color: var(--term-text);
border-radius: 0;
}
:root[data-theme="terminal"] .progress-notify-photo-btn:hover {
background: rgba(51, 255, 51, 0.12);
}
:root[data-theme="terminal"] .progress-cal-day.is-pending {
background: rgba(255, 176, 0, 0.14);
border-color: var(--term-amber);
color: var(--term-amber);
}
:root[data-theme="terminal"] .progress-cal-summary-dot {
background: var(--term-green);
border-radius: 0;
}
:root[data-theme="terminal"] .stat-summary-sticky {
background-color: var(--term-bg);
}
:root[data-theme="terminal"] .filter-active-dot {
background: var(--term-red);
border-radius: 0;
}