File manager - Edit - /home/webapp69.cm.in.th/u69319090015/Shop/assets/css/style.css
Back
/* Global Theme Variables */ :root { --primary-color: #1a1a1a; --accent-color: #8f8270; --bg-color: #faf9f6; --card-bg: #ffffff; --text-color: #1a1a1a; --text-muted: #757575; --border-color: rgba(0, 0, 0, 0.08); --navbar-bg: rgba(255, 255, 255, 0.85); --hero-bg-1: #f3f0ea; --hero-bg-2: #e6e1d6; --input-bg: #ffffff; --input-border: #e0e0e0; } [data-bs-theme="dark"] { --primary-color: #f0f0f0; --accent-color: #bcaaa4; --bg-color: #121212; --card-bg: #1e1e1e; --text-color: #e0e0e0; --text-muted: #a0a0a0; --border-color: rgba(255, 255, 255, 0.1); --navbar-bg: rgba(18, 18, 18, 0.85); --hero-bg-1: #1a1a1a; --hero-bg-2: #242424; --input-bg: #2a2a2a; --input-border: #404040; } body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; } .navbar { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--border-color); transition: background-color 0.3s ease; } .product-card, .cart-card, .checkout-card, .auth-card, .result-card { background-color: var(--card-bg) !important; color: var(--text-color); border: 1px solid var(--border-color); } .hero-section { background: linear-gradient(135deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%) !important; color: var(--text-color); } .bg-light { background-color: var(--input-bg) !important; color: var(--text-color); } .form-control, .form-select { background-color: var(--input-bg); color: var(--text-color); border-color: var(--input-border); } .form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--text-color); border-color: var(--accent-color); } .dropdown-menu { background-color: var(--card-bg); border: 1px solid var(--border-color); } .dropdown-item { color: var(--text-color); } .dropdown-item:hover { background-color: var(--input-bg); color: var(--accent-color); } .btn-dark-custom { background-color: var(--primary-color); color: var(--bg-color); border: 1px solid var(--primary-color); } .btn-dark-custom:hover { background-color: var(--accent-color); border-color: var(--accent-color); color: #ffffff; } .theme-toggle-btn { border: 1px solid var(--border-color); background: transparent; color: var(--text-color); border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; } .theme-toggle-btn:hover { background-color: var(--border-color); } /* Dark Mode Overrides for High Text Contrast */ [data-bs-theme="dark"] .nav-link, [data-bs-theme="dark"] .navbar-brand, [data-bs-theme="dark"] .text-muted { color: #e0e0e0 !important; } [data-bs-theme="dark"] .btn-outline-dark { color: #ffffff !important; border-color: #666666 !important; } [data-bs-theme="dark"] .btn-outline-dark:hover { background-color: #ffffff !important; color: #121212 !important; } [data-bs-theme="dark"] .btn-dark { background-color: #ffffff !important; color: #121212 !important; border-color: #ffffff !important; } [data-bs-theme="dark"] .btn-dark:hover { background-color: var(--accent-color) !important; color: #ffffff !important; border-color: var(--accent-color) !important; } [data-bs-theme="dark"] .badge-cart { background-color: var(--accent-color) !important; color: #ffffff !important; } /* Footer Styling */ footer { background-color: var(--card-bg) !important; border-top: 1px solid var(--border-color) !important; transition: background-color 0.3s ease; } [data-bs-theme="dark"] footer { background-color: #121212 !important; border-top-color: rgba(255, 255, 255, 0.1) !important; } [data-bs-theme="dark"] footer p, [data-bs-theme="dark"] footer span, [data-bs-theme="dark"] footer div, [data-bs-theme="dark"] footer .text-muted { color: #a0a0a0 !important; } [data-bs-theme="light"] footer p.text-muted { color: #6c757d !important; } /* Comprehensive Full Dark Mode (OLED / Pitch Dark Theme) Rules */ [data-bs-theme="dark"] body { background-color: #121212 !important; color: #e0e0e0 !important; } [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .product-card, [data-bs-theme="dark"] .cart-card, [data-bs-theme="dark"] .checkout-card, [data-bs-theme="dark"] .auth-card, [data-bs-theme="dark"] .result-card, [data-bs-theme="dark"] .seller-card, [data-bs-theme="dark"] .summary-card { background-color: #1e1e1e !important; color: #e0e0e0 !important; border-color: rgba(255, 255, 255, 0.1) !important; } [data-bs-theme="dark"] .table, [data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table-hover > tbody > tr:hover { --bs-table-bg: #1e1e1e !important; --bs-table-color: #e0e0e0 !important; --bs-table-hover-bg: #2a2a2a !important; --bs-table-hover-color: #ffffff !important; color: #e0e0e0 !important; border-color: rgba(255, 255, 255, 0.1) !important; } [data-bs-theme="dark"] .table th, [data-bs-theme="dark"] .table td { color: #e0e0e0 !important; border-color: rgba(255, 255, 255, 0.1) !important; } [data-bs-theme="dark"] .hero-section { background: linear-gradient(135deg, #181818 0%, #222222 100%) !important; color: #ffffff !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #2a2a2a !important; color: #ffffff !important; border-color: #444444 !important; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #2a2a2a !important; color: #ffffff !important; border-color: var(--accent-color) !important; } [data-bs-theme="dark"] .text-dark { color: #f0f0f0 !important; } [data-bs-theme="dark"] .text-secondary { color: #b0b0b0 !important; } [data-bs-theme="dark"] .btn-light-custom { background-color: #2a2a2a !important; color: #ffffff !important; border-color: #444444 !important; } [data-bs-theme="dark"] .btn-dark-custom { background-color: #ffffff !important; color: #121212 !important; border-color: #ffffff !important; } [data-bs-theme="dark"] .btn-dark-custom:hover { background-color: var(--accent-color) !important; color: #ffffff !important; border-color: var(--accent-color) !important; } [data-bs-theme="dark"] .modal-content { background-color: #1e1e1e !important; color: #e0e0e0 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.23 |
proxy
|
phpinfo
|
Settings