File manager - Edit - /home/webapp69.cm.in.th/u69319090041/Shop41/public/assets/css/style.css
Back
/* Admin Dashboard Color Contrast & UI Enhancements */ .admin-sidebar-nav .list-group-item.active { background-color: var(--primary-accent, #4f46e5) !important; color: #ffffff !important; border-color: var(--primary-accent, #4f46e5) !important; } [data-theme="dark"] .admin-sidebar-nav .list-group-item { background-color: #1e293b; color: #e2e8f0; } [data-theme="dark"] .admin-sidebar-nav .list-group-item.active { background-color: #6366f1 !important; color: #ffffff !important; } /* Active & Inactive Nav Tabs Color Contrast Fix - High Specificity Override */ html[data-theme="dark"] .nav-tabs .nav-link.active, html body .nav-tabs .nav-link.active, .nav-tabs .nav-link.active { color: #0f172a !important; font-weight: 700 !important; background-color: #ffffff !important; border-color: #ffffff !important; } html[data-theme="dark"] .nav-tabs .nav-link:not(.active), html body .nav-tabs .nav-link:not(.active), .nav-tabs .nav-link:not(.active) { color: #cbd5e1 !important; background-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .nav-tabs .nav-link:not(.active):hover, html body .nav-tabs .nav-link:not(.active):hover { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.2) !important; } /* Warning & Suspend Action Button Contrast Fix */ .btn-warning, .btn-outline-warning { color: #0f172a !important; font-weight: 600 !important; } .btn-warning:hover { color: #000000 !important; background-color: #f59e0b !important; } /* Custom CSS for Edit Buttons (แก้ไข) for high contrast */ .btn-edit-custom { color: #ffffff !important; background-color: #f59e0b !important; border: 1px solid #f59e0b !important; font-weight: 600 !important; transition: all 0.2s ease-in-out; } .btn-edit-custom:hover { color: #ffffff !important; background-color: #d97706 !important; border-color: #d97706 !important; } [data-theme="dark"] .btn-edit-custom { color: #111827 !important; background-color: #fde047 !important; /* Bright yellow for dark mode */ border-color: #fde047 !important; } [data-theme="dark"] .btn-edit-custom:hover { color: #000000 !important; background-color: #facc15 !important; border-color: #facc15 !important; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap'); :root { --bg-color: #f8f9fa; --card-bg: #ffffff; --text-color: #212529; --text-muted: #6c757d; --border-color: #e9ecef; --navbar-bg: rgba(255, 255, 255, 0.95); --primary-accent: #4f46e5; --primary-hover: #4338ca; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); --radius-lg: 16px; --radius-sm: 8px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="dark"] { --bg-color: #0f172a; --card-bg: #1e293b; --text-color: #ffffff; --text-muted: #d1d5db; --border-color: #334155; --navbar-bg: rgba(15, 23, 42, 0.97); --primary-accent: #818cf8; --primary-hover: #a5b4fc; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6); } /* Dark Mode - Global text overrides */ [data-theme="dark"] body { color: #ffffff; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #ffffff !important; } [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] li, [data-theme="dark"] label, [data-theme="dark"] td, [data-theme="dark"] th { color: #f3f4f6; } [data-theme="dark"] .text-muted { color: #d1d5db !important; } [data-theme="dark"] .text-secondary { color: #e5e7eb !important; } [data-theme="dark"] .text-dark { color: #ffffff !important; } [data-theme="dark"] .text-reset { color: #ffffff !important; } [data-theme="dark"] a.text-decoration-none { color: #ffffff !important; } /* Dark Mode - Footer */ [data-theme="dark"] footer { background-color: #1e293b !important; border-top-color: #334155 !important; color: #d1d5db !important; } [data-theme="dark"] footer p, [data-theme="dark"] footer span, [data-theme="dark"] footer strong { color: #e5e7eb !important; } [data-theme="dark"] footer .text-muted, [data-theme="dark"] footer .text-secondary { color: #d1d5db !important; } /* Dark Mode - Navbar */ [data-theme="dark"] .navbar, [data-theme="dark"] .sticky-navbar { background-color: rgba(15, 23, 42, 0.97) !important; border-bottom: 1px solid #334155; } [data-theme="dark"] .navbar-brand, [data-theme="dark"] .nav-link { color: #ffffff !important; } [data-theme="dark"] .nav-link:hover { color: #818cf8 !important; } /* Dark Mode - Cards */ [data-theme="dark"] .card, [data-theme="dark"] .card-custom { background-color: #1e293b; border-color: #334155; color: #ffffff; } [data-theme="dark"] .card-title, [data-theme="dark"] .card-text { color: #ffffff; } [data-theme="dark"] .bg-light { background-color: #1e293b !important; color: #ffffff !important; } /* Dark Mode - Buttons */ [data-theme="dark"] .btn-outline-secondary { color: #ffffff; border-color: #475569; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #475569; color: #ffffff; } [data-theme="dark"] .btn-outline-primary { color: #818cf8; border-color: #818cf8; } [data-theme="dark"] .btn-outline-primary:hover { background-color: #818cf8; color: #ffffff; } [data-theme="dark"] .btn-outline-warning { color: #fbbf24; border-color: #fbbf24; } [data-theme="dark"] .btn-outline-danger { color: #f87171; border-color: #f87171; } [data-theme="dark"] .btn-outline-success { color: #4ade80; border-color: #4ade80; } /* Dark Mode - Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #0f172a; border-color: #475569; color: #ffffff; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #0f172a; border-color: #818cf8; color: #ffffff; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.25); } [data-theme="dark"] .form-control::placeholder { color: #64748b; } [data-theme="dark"] .form-label { color: #ffffff; } [data-theme="dark"] .input-group-text { background-color: #1e293b; border-color: #475569; color: #ffffff; } /* Tables - Light Mode */ .table { color: #1e293b; } .table td, .table th { color: #1e293b; } /* Dark Mode - Tables */ [data-theme="dark"] .table { color: #ffffff !important; border-color: #334155; --bs-table-bg: #1f2937; --bs-table-color: #ffffff; } [data-theme="dark"] .table td, [data-theme="dark"] .table th { color: #ffffff !important; background-color: #1f2937 !important; border-color: #334155 !important; } [data-theme="dark"] .table thead th { background-color: #111827 !important; color: #ffffff !important; border-color: #475569 !important; } [data-theme="dark"] .table tbody tr { background-color: #1f2937 !important; border-color: #334155 !important; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: #374151 !important; color: #ffffff !important; } [data-theme="dark"] .table-hover tbody tr:hover td { background-color: #374151 !important; color: #ffffff !important; } [data-theme="dark"] .table-borderless td, [data-theme="dark"] .table-borderless th { border-color: #334155; } /* Dark Mode - Dropdowns */ [data-theme="dark"] .dropdown-menu { background-color: #1e293b; border-color: #334155; } [data-theme="dark"] .dropdown-item { color: #ffffff; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #334155; color: #ffffff; } [data-theme="dark"] .dropdown-divider { border-color: #475569; } /* Dark Mode - Badges */ [data-theme="dark"] .badge.bg-secondary { background-color: #475569 !important; color: #f1f5f9; } [data-theme="dark"] .badge.bg-info { background-color: #0e7490 !important; color: #f0f9ff; } [data-theme="dark"] .badge.bg-warning { background-color: #d97706 !important; color: #fffbeb; } [data-theme="dark"] .badge.bg-light { background-color: #334155 !important; color: #ffffff !important; } /* Dark Mode - Alerts */ [data-theme="dark"] .alert-success { background-color: #14532d; border-color: #166534; color: #bbf7d0; } [data-theme="dark"] .alert-danger { background-color: #7f1d1d; border-color: #991b1b; color: #fecaca; } [data-theme="dark"] .alert-warning { background-color: #78350f; border-color: #92400e; color: #fde68a; } /* Dark Mode - List Groups */ [data-theme="dark"] .list-group-item { background-color: #1e293b; border-color: #334155; color: #ffffff; } [data-theme="dark"] .list-group-item:hover { background-color: #253352; color: #ffffff; } [data-theme="dark"] .list-group-item.active { background-color: #818cf8; border-color: #818cf8; color: #ffffff; } [data-theme="dark"] .list-group-item-action { color: #ffffff; } /* Dark Mode - Modals */ [data-theme="dark"] .modal-content { background-color: #1e293b; border-color: #334155; color: #ffffff; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: #334155; } /* Dark Mode - Pagination */ [data-theme="dark"] .page-link { background-color: #1e293b; border-color: #334155; color: #818cf8; } [data-theme="dark"] .page-link:hover { background-color: #334155; color: #a5b4fc; } [data-theme="dark"] .page-item.active .page-link { background-color: #818cf8; border-color: #818cf8; } /* Dark Mode - Hr */ [data-theme="dark"] hr { border-color: #334155; } /* Dark Mode - Img thumbnail */ [data-theme="dark"] .img-thumbnail { background-color: #1e293b; border-color: #475569; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro", "Inter", "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.01em; line-height: 1.4; background-color: var(--bg-color); color: var(--text-color); transition: var(--transition); min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; } /* Glassmorphism Header */ .sticky-navbar { background-color: var(--navbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); transition: var(--transition); } /* ════════════════════════════════════════════ HERO BANNER ════════════════════════════════════════════ */ .hero-section { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); border: 1px solid var(--border-color); } .hero-banner-bg { position: relative; width: 100%; line-height: 0; } .hero-banner-img { width: 100%; max-height: 380px; object-fit: cover; object-position: center top; display: block; transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1); } .hero-section:hover .hero-banner-img { transform: scale(1.025); } @media (max-width: 768px) { .hero-section { border-radius: 14px; } .hero-banner-img { max-height: 220px; } } /* ════════════════════════════════════════════ FILTER BAR (Category Pills + Search) ════════════════════════════════════════════ */ .filter-bar-wrapper { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 1rem 1.25rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } [data-theme="dark"] .filter-bar-wrapper { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); } /* Category Pill Buttons (Modern Card Tabs) */ .cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 50px; font-size: 0.88rem; font-weight: 500; text-decoration: none; background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: -0.01em; white-space: nowrap; } .cat-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); border-color: rgba(79, 70, 229, 0.3); color: var(--primary-accent); } .cat-pill--active { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #ffffff !important; border-color: transparent; box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35); font-weight: 600; } .cat-pill--active:hover { background: linear-gradient(135deg, #6366f1, #8b5cf6); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79, 70, 229, 0.45); } /* Dark Mode Overrides for Category Pills */ [data-theme="dark"] .cat-pill { background: #1e293b; border-color: rgba(255, 255, 255, 0.05); color: #cbd5e1; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .cat-pill:hover { background: #27354f; border-color: rgba(129, 140, 248, 0.4); color: #ffffff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .cat-pill--active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #ffffff !important; border-color: transparent; box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); } /* Custom Search Input — Unified Dark-Glass Style */ .search-input-wrap { position: relative; display: flex; align-items: center; flex: 1; } .search-icon { position: absolute; left: 14px; font-size: 0.85rem; pointer-events: none; z-index: 1; line-height: 1; opacity: 0.6; } .search-input { width: 100%; padding: 0.58rem 1rem 0.58rem 2.5rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(30, 41, 59, 0.75); color: #e2e8f0; font-size: 0.875rem; font-family: inherit; outline: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .search-input::placeholder { color: #64748b; font-size: 0.85rem; } .search-input:focus { border-color: rgba(129, 140, 248, 0.6); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.14); background: rgba(30, 41, 59, 0.92); } /* Light mode: slightly lighter glass */ [data-theme="light"] .search-input { background: rgba(15, 23, 42, 0.07); border-color: rgba(0, 0, 0, 0.1); color: #1e293b; } [data-theme="light"] .search-input::placeholder { color: #94a3b8; } [data-theme="light"] .search-input:focus { background: rgba(15, 23, 42, 0.1); border-color: rgba(79, 70, 229, 0.45); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); color: #0f172a; } /* Sort Select — Unified Dark-Glass Style */ .sort-select { padding: 0.58rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(30, 41, 59, 0.75); color: #e2e8f0; font-size: 0.83rem; font-family: inherit; min-width: 142px; outline: none; cursor: pointer; appearance: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .sort-select option { background: #1e293b; color: #e2e8f0; } .sort-select:hover { border-color: rgba(129, 140, 248, 0.4); background: rgba(30, 41, 59, 0.9); } .sort-select:focus { border-color: rgba(129, 140, 248, 0.6); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.14); background: rgba(30, 41, 59, 0.92); } /* Light mode sort */ [data-theme="light"] .sort-select { background: rgba(15, 23, 42, 0.07); border-color: rgba(0, 0, 0, 0.1); color: #1e293b; } [data-theme="light"] .sort-select option { background: #ffffff; color: #1e293b; } [data-theme="light"] .sort-select:hover { border-color: rgba(79, 70, 229, 0.35); background: rgba(15, 23, 42, 0.1); } [data-theme="light"] .sort-select:focus { border-color: rgba(79, 70, 229, 0.45); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); color: #0f172a; } /* Cards & UI Elements */ .card-custom { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04); transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; display: flex; flex-direction: column; } .card-custom:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); border-color: rgba(79, 70, 229, 0.3); } /* Product Image Wrapper & Fixed Aspect Ratio */ .product-img-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: #f8fafc; display: block; } [data-theme="dark"] .product-img-wrapper { background-color: #0f172a; } .product-card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .card-custom:hover .product-card-img { transform: scale(1.07); } /* Product Card Badges & Tags */ .badge-tag-new { background: linear-gradient(135deg, #10b981, #059669); color: #ffffff; padding: 5px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35); z-index: 2; } .store-badge { background-color: rgba(79, 70, 229, 0.08); color: var(--primary-accent); border: 1px solid rgba(79, 70, 229, 0.18); font-size: 0.73rem; font-weight: 500; border-radius: 6px; padding: 3px 8px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s ease; } .store-badge:hover { background-color: var(--primary-accent); color: #ffffff !important; } [data-theme="dark"] .store-badge { background-color: rgba(129, 140, 248, 0.15); color: #a5b4fc; border-color: rgba(129, 140, 248, 0.3); } [data-theme="dark"] .store-badge:hover { background-color: #818cf8; color: #ffffff !important; } .product-title-link { color: var(--text-color); text-decoration: none; font-size: 0.95rem; font-weight: 400; line-height: 1.38; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; transition: color 0.2s ease; } .product-title-link:hover { color: var(--primary-accent); } /* Prices */ .price-current { color: var(--primary-accent); font-size: 1.15rem; font-weight: 700; } .price-strike { color: var(--text-muted); text-decoration: line-through; font-size: 0.82rem; } .discount-badge { background-color: #fee2e2; color: #ef4444; font-size: 0.7rem; font-weight: 700; padding: 2px 6px; border-radius: 12px; border: 1px solid #fca5a5; } [data-theme="dark"] .discount-badge { background-color: rgba(239, 68, 68, 0.2); color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); } /* Button Custom */ .btn-primary-custom { background: linear-gradient(135deg, var(--primary-accent), var(--primary-hover)); color: #ffffff; border: none; border-radius: 50px; padding: 9px 16px; font-weight: 600; font-size: 0.88rem; transition: all 0.25s ease; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22); } .btn-primary-custom:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(79, 70, 229, 0.38); color: #ffffff; } .btn-primary-custom:active { transform: translateY(0); } /* Timeline status */ .timeline { list-style: none; padding: 0; position: relative; } .timeline:before { content: ''; position: absolute; top: 0; bottom: 0; left: 20px; width: 4px; background: var(--border-color); } .timeline-item { position: relative; padding-left: 50px; margin-bottom: 24px; } .timeline-icon { position: absolute; left: 4px; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--card-bg); border: 2px solid var(--primary-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } /* Color Utility Classes for high contrast on white backgrounds */ .text-gray-900 { color: #111827 !important; } .text-gray-800 { color: #1f2937 !important; } .text-gray-700 { color: #374151 !important; } .text-gray-600 { color: #4b5563 !important; } .text-gray-500 { color: #6b7280 !important; } /* Shop Profile Card Custom Styling */ .shop-profile-card .card-body { background-color: #ffffff !important; color: #1f2937 !important; } .shop-profile-card h2, .shop-profile-card .shop-title { color: #111827 !important; } .shop-profile-card .shop-desc { color: #4b5563 !important; } .shop-profile-card .shop-info-item, .shop-profile-card .shop-info-item span { color: #4b5563 !important; } /* Ensure action buttons inside shop profile card have optimal contrast */ .shop-profile-card .btn-success { background-color: #10b981 !important; border-color: #10b981 !important; color: #ffffff !important; } .shop-profile-card .btn-success:hover { background-color: #059669 !important; border-color: #059669 !important; color: #ffffff !important; } .shop-profile-card .btn-outline-primary { color: #4f46e5 !important; border-color: #4f46e5 !important; background-color: transparent !important; } .shop-profile-card .btn-outline-primary:hover { color: #ffffff !important; background-color: #4f46e5 !important; border-color: #4f46e5 !important; } /* Minimal Size Button / Chip Styling */ .btn-size { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; font-size: 0.88rem; font-weight: 600; border-radius: 10px; border: 1.5px solid #cbd5e1; background-color: #ffffff; color: #334155 !important; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); outline: none; } .btn-size:hover { background-color: #f1f5f9; border-color: #94a3b8; color: #0f172a !important; transform: translateY(-1px); } .btn-size.active { background: linear-gradient(135deg, #4f46e5, #4338ca) !important; border-color: #4338ca !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important; } /* Dark Mode adaptation for Size Buttons */ [data-theme="dark"] .btn-size { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .btn-size:hover { background-color: #334155 !important; border-color: #475569 !important; color: #ffffff !important; } [data-theme="dark"] .btn-size.active { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; border-color: #818cf8 !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45) !important; }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.24 |
proxy
|
phpinfo
|
Settings