/* =================================================== HAYVANPAZARI.COM — Dark Mode v2.0 (Tam Optimizasyon) Selector: [data-theme="dark"] on =================================================== */ /* ── 1. CSS Degiskenleri ───────────────────────────── */ :root { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #f1f5f9; --text-primary: #212529; --text-secondary: #6c757d; --border-color: #dee2e6; --card-bg: #ffffff; --shadow: rgba(0, 0, 0, 0.1); --input-bg: #ffffff; --hover-bg: #f8f9fa; --code-bg: #f1f5f9; } [data-theme="dark"] { --bg-primary: #111827; --bg-secondary: #1F2937; --bg-tertiary: #1a2332; --text-primary: #F3F4F6; --text-secondary: #9CA3AF; --border-color: #374151; --card-bg: #1F2937; --shadow: rgba(0, 0, 0, 0.5); --input-bg: #374151; --hover-bg: #374151; --code-bg: #1e293b; color-scheme: dark; } /* ── 2. Base ───────────────────────────────────────── */ body { background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } [data-theme="dark"] body { background-color: #111827 !important; color: #F3F4F6 !important; } /* ── 3. Bootstrap bg-* Override'lar ────────────────── */ [data-theme="dark"] .bg-white { background-color: #1F2937 !important; } [data-theme="dark"] .bg-light { background-color: #1a2332 !important; } [data-theme="dark"] .bg-body { background-color: #111827 !important; } [data-theme="dark"] .bg-body-secondary { background-color: #1F2937 !important; } [data-theme="dark"] .bg-body-tertiary { background-color: #1a2332 !important; } /* ── 4. Text Override'lar ──────────────────────────── */ [data-theme="dark"] .text-dark { color: #E5E7EB !important; } [data-theme="dark"] .text-body { color: #F3F4F6 !important; } [data-theme="dark"] .text-muted { color: #9CA3AF !important; } [data-theme="dark"] .text-secondary { color: #9CA3AF !important; } [data-theme="dark"] .text-black-50 { color: rgba(255, 255, 255, 0.5) !important; } [data-theme="dark"] .text-black { color: #F3F4F6 !important; } [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: #F3F4F6; } [data-theme="dark"] p { color: #D1D5DB; } [data-theme="dark"] small, [data-theme="dark"] .small { color: #9CA3AF; } [data-theme="dark"] label { color: #D1D5DB; } [data-theme="dark"] .lead { color: #D1D5DB; } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) { color: #34D399; } [data-theme="dark"] .text-light { color: #D1D5DB !important; } /* ── 5. Card ───────────────────────────────────────── */ [data-theme="dark"] .card { background-color: #1F2937 !important; border-color: #374151 !important; color: #F3F4F6; } [data-theme="dark"] .card-header { background-color: #1a2332 !important; border-bottom-color: #374151 !important; color: #F3F4F6; } [data-theme="dark"] .card-footer { background-color: #1a2332 !important; border-top-color: #374151 !important; color: #D1D5DB; } [data-theme="dark"] .card-body { color: #D1D5DB; } [data-theme="dark"] .card-title { color: #F3F4F6; } [data-theme="dark"] .card-text { color: #D1D5DB; } /* ── 6. Navbar ─────────────────────────────────────── */ .navbar { background-color: var(--nav-solid-color, #064E3B) !important; border-bottom: none; } [data-theme="dark"] .navbar { background-color: #0f3d2e !important; border-bottom: 1px solid #374151; } [data-theme="dark"] .navbar .nav-link { color: #D1D5DB !important; } [data-theme="dark"] .navbar .nav-link:hover { color: #F3F4F6 !important; } [data-theme="dark"] .navbar-brand { color: #F3F4F6 !important; } /* ── 7. Mobile Top Bar & Drawer ────────────────────── */ .mobile-top-bar { background-color: var(--nav-solid-color, #064E3B) !important; border-bottom: none; } [data-theme="dark"] .mobile-top-bar { background-color: #0f3d2e !important; border-bottom: 1px solid #374151; } [data-theme="dark"] .mobile-drawer { background-color: #1F2937 !important; } [data-theme="dark"] .mobile-drawer-header { background-color: #0f3d2e !important; } [data-theme="dark"] .mobile-drawer-link { color: #D1D5DB !important; border-bottom-color: #374151 !important; } [data-theme="dark"] .mobile-drawer-link:hover { background-color: #374151 !important; } /* ── 8. Bottom Navigation ──────────────────────────── */ [data-theme="dark"] .bottom-nav { background-color: #1F2937 !important; border-top: 1px solid #374151 !important; } [data-theme="dark"] .bottom-nav-item { color: #9CA3AF !important; } [data-theme="dark"] .bottom-nav-item.active { color: #34D399 !important; } /* ── 9. Form Kontrolleri ───────────────────────────── */ [data-theme="dark"] .form-control { background-color: #374151 !important; border-color: #4B5563 !important; color: #F3F4F6 !important; } [data-theme="dark"] .form-control::placeholder { color: #6B7280 !important; } [data-theme="dark"] .form-control:focus { background-color: #374151 !important; border-color: #059669 !important; color: #F3F4F6 !important; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25) !important; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: #1F2937 !important; color: #6B7280 !important; } [data-theme="dark"] .form-select { background-color: #374151 !important; border-color: #4B5563 !important; color: #F3F4F6 !important; } [data-theme="dark"] .form-select option { background-color: #374151; color: #F3F4F6; } [data-theme="dark"] .form-check-input { background-color: #374151; border-color: #4B5563; } [data-theme="dark"] .form-check-input:checked { background-color: #059669; border-color: #059669; } [data-theme="dark"] .form-check-label { color: #D1D5DB; } [data-theme="dark"] .form-label { color: #D1D5DB; } [data-theme="dark"] .form-text { color: #6B7280 !important; } [data-theme="dark"] .input-group-text { background-color: #374151 !important; border-color: #4B5563 !important; color: #D1D5DB !important; } [data-theme="dark"] .form-floating > label { color: #6B7280; } /* ── 10. Butonlar ──────────────────────────────────── */ [data-theme="dark"] .btn-outline-secondary { border-color: #4B5563 !important; color: #D1D5DB !important; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #374151 !important; border-color: #4B5563 !important; color: #F3F4F6 !important; } [data-theme="dark"] .btn-outline-primary { border-color: #059669 !important; color: #34D399 !important; } [data-theme="dark"] .btn-outline-primary:hover { background-color: #059669 !important; color: #fff !important; } [data-theme="dark"] .btn-outline-dark { border-color: #4B5563 !important; color: #D1D5DB !important; } [data-theme="dark"] .btn-outline-dark:hover { background-color: #374151 !important; color: #F3F4F6 !important; } [data-theme="dark"] .btn-outline-light { border-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .btn-light { background-color: #374151 !important; border-color: #4B5563 !important; color: #D1D5DB !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ── 11. Dropdown ──────────────────────────────────── */ [data-theme="dark"] .dropdown-menu { background-color: #1F2937 !important; border-color: #374151 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .dropdown-item { color: #D1D5DB !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #374151 !important; color: #F3F4F6 !important; } [data-theme="dark"] .dropdown-item.active { background-color: #059669 !important; color: #fff !important; } [data-theme="dark"] .dropdown-divider { border-top-color: #374151; } /* ── 12. Modal ─────────────────────────────────────── */ [data-theme="dark"] .modal-content { background-color: #1F2937 !important; border-color: #374151 !important; color: #F3F4F6; } [data-theme="dark"] .modal-header { border-bottom-color: #374151 !important; color: #F3F4F6; } [data-theme="dark"] .modal-footer { border-top-color: #374151 !important; } [data-theme="dark"] .modal-title { color: #F3F4F6; } [data-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } /* ── 13. Table ─────────────────────────────────────── */ [data-theme="dark"] .table { color: #D1D5DB !important; border-color: #374151; } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: #374151; color: #D1D5DB; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03) !important; color: #D1D5DB; } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.05) !important; color: #F3F4F6; } [data-theme="dark"] .table-light, [data-theme="dark"] .table-light > th, [data-theme="dark"] .table-light > td, [data-theme="dark"] thead.table-light > tr > th, [data-theme="dark"] thead.bg-light > tr > th { background-color: #1a2332 !important; color: #D1D5DB !important; border-color: #374151; } [data-theme="dark"] thead.bg-light { background-color: #1a2332 !important; } [data-theme="dark"] thead.bg-light th { background-color: #1a2332 !important; color: #D1D5DB !important; } [data-theme="dark"] .table-bordered { border-color: #374151; } [data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: #374151; } /* ── 14. List Group ────────────────────────────────── */ [data-theme="dark"] .list-group-item { background-color: #1F2937 !important; border-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: #374151 !important; color: #F3F4F6 !important; } [data-theme="dark"] .list-group-item.active { background-color: #059669 !important; border-color: #059669 !important; color: #fff !important; } /* ── 15. Accordion ─────────────────────────────────── */ [data-theme="dark"] .accordion-item { background-color: #1F2937 !important; border-color: #374151 !important; } [data-theme="dark"] .accordion-button { background-color: #1F2937 !important; color: #F3F4F6 !important; border-color: #374151; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #1a2332 !important; color: #34D399 !important; box-shadow: inset 0 -1px 0 #374151; } [data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); } [data-theme="dark"] .accordion-body { background-color: #1F2937 !important; color: #D1D5DB !important; } [data-theme="dark"] .accordion-button.bg-light { background-color: #1F2937 !important; } [data-theme="dark"] .accordion-body.bg-light { background-color: #1a2332 !important; } /* ── 16. Alert ─────────────────────────────────────── */ [data-theme="dark"] .alert { border-color: #374151; } [data-theme="dark"] .alert-light { background-color: #1a2332 !important; border-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .alert-info { background-color: rgba(59, 130, 246, 0.15) !important; border-color: rgba(59, 130, 246, 0.3) !important; color: #93C5FD !important; } [data-theme="dark"] .alert-success { background-color: rgba(5, 150, 105, 0.15) !important; border-color: rgba(5, 150, 105, 0.3) !important; color: #6EE7B7 !important; } [data-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.15) !important; border-color: rgba(245, 158, 11, 0.3) !important; color: #FCD34D !important; } [data-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #FCA5A5 !important; } [data-theme="dark"] .alert a { color: #34D399; } /* ── 17. Badge ─────────────────────────────────────── */ [data-theme="dark"] .badge.bg-light { background-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .badge.bg-white { background-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .badge.bg-secondary { background-color: #4B5563 !important; color: #D1D5DB !important; } /* ── 18. Breadcrumb ────────────────────────────────── */ [data-theme="dark"] .breadcrumb { background-color: transparent; } [data-theme="dark"] .breadcrumb-item a { color: #34D399; } [data-theme="dark"] .breadcrumb-item.active { color: #9CA3AF; } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #6B7280; } /* ── 19. Nav Tabs & Pills ──────────────────────────── */ [data-theme="dark"] .nav-tabs { border-bottom-color: #374151; } [data-theme="dark"] .nav-tabs .nav-link { color: #9CA3AF; } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: #374151; color: #D1D5DB; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: #1F2937; border-color: #374151 #374151 #1F2937; color: #F3F4F6; } [data-theme="dark"] .nav-pills .nav-link { color: #9CA3AF; } [data-theme="dark"] .nav-pills .nav-link.active { background-color: #059669; color: #fff; } /* ── 20. Pagination ────────────────────────────────── */ [data-theme="dark"] .page-link { background-color: #1F2937 !important; border-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .page-link:hover { background-color: #374151 !important; color: #F3F4F6 !important; } [data-theme="dark"] .page-item.active .page-link { background-color: #059669 !important; border-color: #059669 !important; color: #fff !important; } [data-theme="dark"] .page-item.disabled .page-link { background-color: #111827 !important; border-color: #374151 !important; color: #4B5563 !important; } /* ── 21. Toast / Popover / Tooltip ─────────────────── */ [data-theme="dark"] .toast { background-color: #1F2937 !important; border-color: #374151 !important; color: #D1D5DB; } [data-theme="dark"] .toast-header { background-color: #1a2332 !important; border-bottom-color: #374151 !important; color: #F3F4F6; } [data-theme="dark"] .popover { background-color: #1F2937; border-color: #374151; } [data-theme="dark"] .popover-header { background-color: #1a2332; border-bottom-color: #374151; color: #F3F4F6; } [data-theme="dark"] .popover-body { color: #D1D5DB; } [data-theme="dark"] .tooltip-inner { background-color: #374151; color: #F3F4F6; } /* ── 22. Border Overrides ──────────────────────────── */ [data-theme="dark"] .border { border-color: #374151 !important; } [data-theme="dark"] .border-bottom { border-bottom-color: #374151 !important; } [data-theme="dark"] .border-top { border-top-color: #374151 !important; } [data-theme="dark"] .border-start { border-left-color: #374151 !important; } [data-theme="dark"] .border-end { border-right-color: #374151 !important; } [data-theme="dark"] .border-secondary { border-color: #4B5563 !important; } [data-theme="dark"] .border-success { border-color: #059669 !important; } [data-theme="dark"] hr { border-color: #374151; opacity: 0.5; } /* ── 23. Search & Autocomplete ─────────────────────── */ [data-theme="dark"] .search-suggestions, [data-theme="dark"] #searchSuggestions, [data-theme="dark"] #searchSuggestionsMobile, [data-theme="dark"] #breedSuggestions { background-color: #1F2937 !important; border-color: #374151 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .suggestion-item { color: #D1D5DB; border-color: #374151; } [data-theme="dark"] .suggestion-item:hover { background-color: #374151; color: #F3F4F6; } /* ── 24. Footer ────────────────────────────────────── */ [data-theme="dark"] footer { background-color: #0B1120 !important; color: #9CA3AF; } [data-theme="dark"] footer a { color: #6EE7B7 !important; } [data-theme="dark"] footer .text-light { color: #9CA3AF !important; } /* ── 25. Hero Section ──────────────────────────────── */ [data-theme="dark"] .hero-section { background: linear-gradient(135deg, #064E3B 0%, #047857 100%) !important; } /* ── 26. Sections & Wrappers ───────────────────────── */ [data-theme="dark"] .search-section, [data-theme="dark"] .tools-section, [data-theme="dark"] .daily-stats, [data-theme="dark"] .categories-section { background-color: #1F2937 !important; border-color: #374151 !important; } [data-theme="dark"] section { color: #D1D5DB; } /* ── 27. Category Header ───────────────────────────── */ [data-theme="dark"] .category-header { background-color: #1F2937 !important; border-color: #374151 !important; } [data-theme="dark"] .category-header h3, [data-theme="dark"] .category-header p { color: #D1D5DB !important; } /* ── 28. Listing Cards ─────────────────────────────── */ [data-theme="dark"] .listing-card { background-color: #1F2937 !important; border-color: #374151 !important; } [data-theme="dark"] .listing-card .card-body { color: #D1D5DB; } [data-theme="dark"] .listing-card .card-title a, [data-theme="dark"] .listing-card .card-title { color: #F3F4F6 !important; } [data-theme="dark"] .text-decoration-none.text-dark { color: #F3F4F6 !important; } /* ── 29. Profile & Dashboard ───────────────────────── */ [data-theme="dark"] .dashboard-sidebar .list-group-item { background-color: #1F2937 !important; color: #D1D5DB !important; } [data-theme="dark"] .dashboard-sidebar .list-group-item:hover, [data-theme="dark"] .dashboard-sidebar .list-group-item.active { background-color: #374151 !important; color: #34D399 !important; } [data-theme="dark"] .stat-card { background-color: #1F2937 !important; border-color: #374151 !important; } /* ── 30. Conversation / Messages ───────────────────── */ [data-theme="dark"] .message-bubble { background-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .conversation-item { border-color: #374151 !important; } [data-theme="dark"] .conversation-item:hover { background-color: #1a2332 !important; } /* ── 31. PWA Install Banner ────────────────────────── */ [data-theme="dark"] .pwa-install-banner, [data-theme="dark"] .pwa-mini-banner { background-color: #1F2937 !important; border-color: #374151 !important; color: #D1D5DB; } /* ── 32. Image Placeholders ────────────────────────── */ [data-theme="dark"] .listing-image.bg-light, [data-theme="dark"] .bg-light.d-flex.align-items-center.justify-content-center { background-color: #374151 !important; } /* ── 33. Step Pills (Create Listing) ───────────────── */ [data-theme="dark"] .listing-step-pill { background-color: #1F2937 !important; border-color: #374151 !important; color: #9CA3AF !important; } [data-theme="dark"] .listing-step-pill.active, [data-theme="dark"] .listing-step-pill.done { background-color: rgba(5, 150, 105, 0.15) !important; border-color: #059669 !important; color: #34D399 !important; } /* ── 34. Price Tracker / Feed Calculator Cards ─────── */ [data-theme="dark"] .card.border-0.bg-light { background-color: #1a2332 !important; } [data-theme="dark"] .border.rounded.p-3.bg-light { background-color: #1a2332 !important; border-color: #374151 !important; } /* ── 35. About / Legal Pages Circles ───────────────── */ [data-theme="dark"] .bg-light.rounded-circle { background-color: #374151 !important; } [data-theme="dark"] .bg-light.rounded { background-color: #1a2332 !important; } [data-theme="dark"] .bg-light.p-3.rounded { background-color: #1a2332 !important; border-color: #374151 !important; } /* ── 36. Inline Style Overrides ────────────────────── */ [data-theme="dark"] [style*="background:#D1FAE5"], [data-theme="dark"] [style*="background: #D1FAE5"], [data-theme="dark"] [style*="background-color:#D1FAE5"], [data-theme="dark"] [style*="background: linear-gradient(135deg, #D1FAE5"] { background: #1a2332 !important; } [data-theme="dark"] [style*="color:#064E3B"], [data-theme="dark"] [style*="color: #064E3B"] { color: #34D399 !important; } /* ── 37. Skeleton Loader ───────────────────────────── */ [data-theme="dark"] .skeleton-img { background: linear-gradient(90deg, #374151 25%, #4B5563 50%, #374151 75%) !important; background-size: 200% 100%; } [data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, #374151 25%, #4B5563 50%, #374151 75%) !important; background-size: 200% 100%; } /* ── 38. Scroll to Top ─────────────────────────────── */ [data-theme="dark"] .scroll-to-top { background-color: #1F2937 !important; border-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .scroll-to-top:hover { background-color: #374151 !important; } /* ── 39. Social Share ──────────────────────────────── */ [data-theme="dark"] .social-share-btn { background-color: #374151 !important; color: #D1D5DB !important; } [data-theme="dark"] .social-share-btn:hover { background-color: #4B5563 !important; } /* ── 40. Theme Toggle Button ───────────────────────── */ .theme-toggle { position: fixed; bottom: 80px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--card-bg); border: 2px solid var(--border-color); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 1000; box-shadow: 0 4px 12px var(--shadow); transition: all 0.3s ease; } .theme-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 16px var(--shadow); } [data-theme="dark"] .theme-toggle { background-color: #374151; border-color: #4B5563; color: #FCD34D; } /* ── 41. WhatsApp Float ────────────────────────────── */ [data-theme="dark"] .whatsapp-float { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } /* ── 42. Misc Bootstrap Overrides ──────────────────── */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .bg-success { background-color: #059669 !important; } [data-theme="dark"] .bg-danger { background-color: #DC2626 !important; } [data-theme="dark"] .bg-warning { background-color: #D97706 !important; } [data-theme="dark"] .bg-info { background-color: #0284C7 !important; } [data-theme="dark"] .progress { background-color: #374151; } [data-theme="dark"] .spinner-border { color: #059669; } [data-theme="dark"] code { background-color: #1a2332; color: #34D399; } [data-theme="dark"] pre { background-color: #1a2332; border-color: #374151; color: #D1D5DB; } [data-theme="dark"] blockquote { border-left-color: #374151; color: #9CA3AF; } [data-theme="dark"] ::selection { background-color: rgba(5, 150, 105, 0.4); color: #F3F4F6; } [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #111827; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4B5563; } /* ── 43. Responsive ────────────────────────────────── */ @media (max-width: 768px) { .theme-toggle { bottom: 70px; right: 15px; width: 45px; height: 45px; font-size: 18px; } }