/* ============================================================ theme.css — ToNoikiasame Dark Mode Όλα τα dark mode styles εδώ. Μην τροποποιείς το index.php. ============================================================ */ /* ── Toggle Button ── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--border); background: transparent; cursor: pointer; font-size: 17px; flex-shrink: 0; transition: background 0.18s, border-color 0.18s, transform 0.15s; line-height: 1; padding: 0; } .theme-toggle:hover { background: var(--primary-light); border-color: var(--primary); transform: scale(1.08); } .theme-toggle:active { transform: scale(0.95); } /* ── Smooth transition for everything ── */ body, header, .listing-card, .detail-section, .detail-specs-bar, .contact-box, .login-card, .post-section, .pro-card, .pricing-card, .account-dropdown, .filter-drawer, .detail-share-sheet, input, select, textarea, .login-input, .pro-form input, .post-field input, .post-field select, .post-field textarea { transition: background 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; } /* ============================================================ DARK MODE — activated via [data-theme="dark"] on ============================================================ */ [data-theme="dark"] { /* ── CSS Variables Override ── */ --bg: #0f1117; --white: #1a1d27; --text: #e8eaf0; --muted: #8892a4; --border: #2a2f3e; --primary: #4d9bff; --primary-dark: #2d7aed; --primary-light: #1a2540; --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.35); --green: #22c55e; --premium: #f59e0b; } /* ── Body & Base ── */ [data-theme="dark"] body { background: var(--bg); color: var(--text); } /* ── Header ── */ [data-theme="dark"] header { background: #13161f; border-bottom-color: var(--border); } [data-theme="dark"] .header-search { background: #1e2230; border-color: var(--border); } [data-theme="dark"] .hs-city input { color: var(--text); background: transparent; } [data-theme="dark"] .hs-city input::placeholder { color: var(--muted); } [data-theme="dark"] .hs-type select { color: var(--muted); background: transparent; } [data-theme="dark"] .hs-divider { background: var(--border); } [data-theme="dark"] .btn-login { border-color: var(--border); color: var(--text); background: transparent; } [data-theme="dark"] .btn-login:hover { background: #1e2230; } /* ── Nav ── */ [data-theme="dark"] .header-nav { border-top-color: var(--border); } [data-theme="dark"] .nav-item { color: var(--muted); } [data-theme="dark"] .nav-item:hover { color: var(--text); } [data-theme="dark"] .nav-item.active { color: var(--primary); border-bottom-color: var(--primary); } /* ── Main header logo in dark mode ── */ [data-theme="dark"] .header-top > .logo, [data-theme="dark"] .header-top > .logo span { color: #ffffff !important; } [data-theme="dark"] .header-top > .logo img { filter: none !important; } /* ── Theme toggle in dark ── */ [data-theme="dark"] .theme-toggle { border-color: var(--border); background: #1e2230; color: var(--text); } [data-theme="dark"] .theme-toggle:hover { background: var(--primary-light); border-color: var(--primary); } /* ── Cards & Listings ── */ [data-theme="dark"] .listing-card { background: var(--white); border-color: var(--border); box-shadow: var(--shadow); } [data-theme="dark"] .listing-card:hover { box-shadow: var(--shadow-md); border-color: #3a4255; } [data-theme="dark"] .card-title { color: #dce2ef; } [data-theme="dark"] .card-price-num { color: var(--primary); } [data-theme="dark"] .card-spec, [data-theme="dark"] .card-location, [data-theme="dark"] .card-age { color: var(--muted); } [data-theme="dark"] .card-badge { background: #1a2540; color: var(--primary); } [data-theme="dark"] .card-right { background: #16192280; border-left-color: var(--border); } /* ── Detail Page ── */ [data-theme="dark"] .detail-section { background: var(--white); border-color: var(--border); } [data-theme="dark"] .detail-section-header { background: #16192280; border-bottom-color: var(--border); color: #c8d0e0; } [data-theme="dark"] .detail-specs-bar { background: var(--white); border-color: var(--border); } [data-theme="dark"] .d-spec-val { color: #dce2ef; } [data-theme="dark"] .d-spec-label { color: var(--muted); } [data-theme="dark"] .detail-header-left h1 { color: #dce2ef; } [data-theme="dark"] .detail-desc { color: #b0baca; } [data-theme="dark"] .detail-feature { color: #a8b5c8; } [data-theme="dark"] .detail-breadcrumb { color: var(--muted); } [data-theme="dark"] .detail-info-item { background: #16192280; border-color: var(--border); } [data-theme="dark"] .detail-info-value { color: #dce2ef; } [data-theme="dark"] .detail-info-label { color: var(--muted); } [data-theme="dark"] .detail-meta div { color: var(--muted); } /* ── Detail slider ── */ [data-theme="dark"] .detail-slider-frame { background: #1a1d27; border-color: var(--border); } /* ── Contact box ── */ [data-theme="dark"] .contact-box { background: var(--white); border-color: var(--border); } [data-theme="dark"] .contact-person { border-bottom-color: var(--border); } [data-theme="dark"] .contact-name { color: var(--text); } /* ── Post Page ── */ [data-theme="dark"] .post-section { background: var(--white); border-color: var(--border); } [data-theme="dark"] .post-section-title { background: #16192280; border-bottom-color: var(--border); color: var(--muted); } [data-theme="dark"] .post-field { border-bottom-color: var(--border); } [data-theme="dark"] .post-field label { color: var(--muted); } [data-theme="dark"] .post-field input, [data-theme="dark"] .post-field select, [data-theme="dark"] .post-field textarea { color: var(--text); background: transparent; } [data-theme="dark"] .post-field input::placeholder, [data-theme="dark"] .post-field textarea::placeholder { color: var(--muted); } [data-theme="dark"] .post-check-item { background: #1e2230; border-color: var(--border); color: #b0baca; } [data-theme="dark"] .post-check-item:hover { border-color: var(--primary); } [data-theme="dark"] .free-banner { background: #0d2318; border-color: #1a5c38; color: #4ade80; } /* ── Upload area ── */ [data-theme="dark"] .upload-shell { background: #13172280; border-color: #2a3a5e; } [data-theme="dark"] .upload-preview-item { background: #1e2230; border-color: var(--border); } [data-theme="dark"] .upload-preview-thumb { background: #16192280; } [data-theme="dark"] .upload-preview-name { color: var(--text); } [data-theme="dark"] .upload-preview-size { color: var(--muted); } [data-theme="dark"] .upload-empty { background: #1e2230; border-color: var(--border); color: var(--muted); } [data-theme="dark"] .upload-remove-btn { background: #2d1215; border-color: #5c2020; color: #f87171; } /* ── Login Page ── */ [data-theme="dark"] .login-card { background: var(--white); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .login-badge { background: var(--primary-light); color: var(--primary); } [data-theme="dark"] .login-title { color: var(--text); } [data-theme="dark"] .login-input { background: #13161f; border-color: var(--border); color: var(--text); } [data-theme="dark"] .login-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(77,155,255,0.15); } [data-theme="dark"] .login-btn-secondary { background: #1e2230; border-color: var(--border); color: var(--text); } [data-theme="dark"] .login-demo { background: #13172280; border-color: #2a3a5e; color: #7eb8ff; } /* ── Account Dropdown ── */ [data-theme="dark"] .account-dropdown { background: #1a1d27; border-color: var(--border); box-shadow: 0 8px 28px rgba(0,0,0,0.45); } [data-theme="dark"] .account-dropdown-user { border-bottom-color: var(--border); } [data-theme="dark"] .account-dropdown-name { color: var(--text); } [data-theme="dark"] .account-dropdown-email { color: var(--muted); } [data-theme="dark"] .account-dropdown-item { color: var(--text); } [data-theme="dark"] .account-dropdown-item:hover { background: #1e2230; } /* ── Pro Page ── */ [data-theme="dark"] .pro-card { background: var(--white); border-color: #2a3a5e; } [data-theme="dark"] .pro-list div { color: #a8b5c8; } [data-theme="dark"] .pro-form input { background: #13161f; border-color: var(--border); color: var(--text); } [data-theme="dark"] .pro-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(77,155,255,0.15); } [data-theme="dark"] .pro-price-card { background: var(--white); color: var(--text); } [data-theme="dark"] .pricing-card { background: #16192280; border-color: #2a3a5e; } [data-theme="dark"] .pricing-card.featured { background: linear-gradient(180deg, #1a2540 0%, #131b30 100%); border-color: #3a5a9e; } [data-theme="dark"] .pricing-card.flexible { background: #1e1505; border-color: #5c3500; } [data-theme="dark"] .pricing-price { color: #dce2ef; } [data-theme="dark"] .pricing-qty { color: #c0cce0; } [data-theme="dark"] .pricing-note { color: var(--muted); } [data-theme="dark"] .pro-free-strip { background: #0d2318; border-color: #1a5c38; color: #4ade80; } [data-theme="dark"] .private-limit-box { background: #1e1505; border-color: #5c3500; color: #fb923c; } [data-theme="dark"] .register-pro-box { background: var(--primary-light); border-color: #2a3a5e; color: #93c5fd; } /* ── Filters / Sidebar ── */ [data-theme="dark"] .sidebar { background: var(--bg); } [data-theme="dark"] .filter-section { background: var(--white); border-color: var(--border); } [data-theme="dark"] .filter-title { color: var(--text); border-bottom-color: var(--border); } [data-theme="dark"] .filter-label { color: var(--muted); } [data-theme="dark"] .filter-input, [data-theme="dark"] .filter-select { background: #13161f; border-color: var(--border); color: var(--text); } [data-theme="dark"] .filter-input::placeholder { color: var(--muted); } [data-theme="dark"] .filter-input:focus, [data-theme="dark"] .filter-select:focus { border-color: var(--primary); } [data-theme="dark"] .top-filters-card { background: var(--white); border-color: var(--border); } /* ── Mobile Filter Drawer ── */ [data-theme="dark"] .filter-drawer { background: #1a1d27; border-top: 1px solid var(--border); } [data-theme="dark"] .drawer-handle { background: var(--border); } [data-theme="dark"] .drawer-title { color: var(--text); } /* ── City Dropdown ── */ [data-theme="dark"] .city-dropdown { background: #1a1d27; border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } [data-theme="dark"] .city-item { color: var(--text); } [data-theme="dark"] .city-item:hover, [data-theme="dark"] .city-item.active { background: #1e2230; } /* ── Sort bar ── */ [data-theme="dark"] .sort-bar { color: var(--muted); } [data-theme="dark"] .sort-btn { background: #1e2230; border-color: var(--border); color: var(--muted); } [data-theme="dark"] .sort-btn.active, [data-theme="dark"] .sort-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); } /* ── Results count ── */ [data-theme="dark"] .results-count { color: var(--muted); } /* ── Sticky Contact Bar ── */ [data-theme="dark"] .detail-sticky-contact { background: rgba(19,22,31,0.98) !important; border-top-color: var(--border) !important; } /* ── Share Sheet ── */ [data-theme="dark"] .detail-share-sheet { background: #1a1d27 !important; border-color: var(--border) !important; } [data-theme="dark"] .detail-share-backdrop { background: rgba(0,0,0,0.65) !important; } [data-theme="dark"] .detail-share-title { color: var(--text) !important; } [data-theme="dark"] .detail-share-close { background: #1e2230 !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="dark"] .detail-share-option { background: #1e2230 !important; border-color: var(--border) !important; color: var(--text) !important; } [data-theme="dark"] .detail-share-option:hover { background: var(--primary-light) !important; border-color: var(--primary) !important; color: var(--primary) !important; } [data-theme="dark"] .detail-share-option.whatsapp { background: #0a2015 !important; color: #4ade80 !important; border-color: #1a5c38 !important; } [data-theme="dark"] .detail-share-option.viber { background: #1a1030 !important; color: #a78bfa !important; border-color: #4c1d95 !important; } [data-theme="dark"] .detail-share-option.copy { background: #1e1505 !important; color: #fb923c !important; border-color: #5c3500 !important; } [data-theme="dark"] .detail-share-copy-note { color: var(--muted) !important; } /* ── Agency box ── */ [data-theme="dark"] #dAgencyBox { background: var(--white) !important; border-color: var(--border) !important; } [data-theme="dark"] .agency-promo-card img, [data-theme="dark"] .agency-promo-media img { background: #1e2230 !important; border-color: var(--border) !important; } /* ── Alerts ── */ [data-theme="dark"] .account-alert.success { background: #0d2318; border-color: #1a5c38; color: #4ade80; } [data-theme="dark"] .account-alert.error { background: #2d1215; border-color: #5c2020; color: #f87171; } [data-theme="dark"] .login-message.error { background: #2d1215; border-color: #5c2020; color: #f87171; } [data-theme="dark"] .login-message.success { background: #0d2318; border-color: #1a5c38; color: #4ade80; } /* ── Landing hero (unchanged — it's already colorful) ── */ /* ── Empty states ── */ [data-theme="dark"] .empty-state .es-title { color: var(--text); } /* ── Buttons (delete) ── */ [data-theme="dark"] .btn-delete-card { background: #2d1215; border-color: #5c2020; color: #f87171; } [data-theme="dark"] .btn-delete-card:hover { background: #3d1a1d; } /* ── Bulk delete panel ── */ [data-theme="dark"] .bulk-delete-panel { background: #16192280; border-color: var(--border); } /* ── Listings section header ── */ [data-theme="dark"] .section-header, [data-theme="dark"] .section-title { color: var(--text); } /* ── Landing tab ── */ [data-theme="dark"] .landing-tab { color: rgba(255,255,255,0.7); } [data-theme="dark"] .landing-tab.active { color: #fff; border-bottom-color: #fff; } /* ── Map fallback ── */ [data-theme="dark"] .detail-map-fallback { background: #1a1d27; border-color: var(--border); color: var(--muted); } /* ── Scrollbars (webkit) ── Do not set width/height only in dark mode. Changing scrollbar size on theme toggle causes the whole centered layout to shift. Keep the browser/default scrollbar dimensions and only recolor it. ───────────────────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #13161f; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2f3e; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4050; } /* ============================================================ FINAL HARD OVERRIDES — fixed by ChatGPT Σκοπός: να μη μένουν λευκές κάρτες/κουτιά στο dark mode. Δεν πειράζει PHP / JS / μηχανισμούς. ============================================================ */ [data-theme="dark"] { color-scheme: dark; } /* Base */ [data-theme="dark"] body { background: #0f1117 !important; color: #f8fafc !important; } /* Header / top area */ [data-theme="dark"] header, [data-theme="dark"] .header-top, [data-theme="dark"] .header-nav { background: #11141c !important; border-color: #2a2f3e !important; } /* Inputs/search/selects */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .filter-input, [data-theme="dark"] .filter-select, [data-theme="dark"] .sort-select, [data-theme="dark"] .header-search, [data-theme="dark"] .hs-city input, [data-theme="dark"] .hs-type select, [data-theme="dark"] .landing-search-field input, [data-theme="dark"] .landing-search-field select, [data-theme="dark"] .top-filters-grid input, [data-theme="dark"] .top-filters-grid select, [data-theme="dark"] .top-filters-card input, [data-theme="dark"] .top-filters-card select { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #b8c0cf !important; } /* Big white filter containers */ [data-theme="dark"] .top-filters-card, [data-theme="dark"] .top-filters-grid, [data-theme="dark"] .filter-card, [data-theme="dark"] .filter-body, [data-theme="dark"] .filters, [data-theme="dark"] .filter-panel, [data-theme="dark"] .search-card, [data-theme="dark"] .landing-search-wrap, [data-theme="dark"] .mobile-search-box, [data-theme="dark"] .filter-drawer { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; box-shadow: 0 12px 28px rgba(0,0,0,0.32) !important; } /* Landing / home white cards under hero */ [data-theme="dark"] .landing-tile, [data-theme="dark"] .landing-info-card, [data-theme="dark"] .landing-card, [data-theme="dark"] .home-type-card, [data-theme="dark"] .category-card, [data-theme="dark"] .quick-card, [data-theme="dark"] .shortcut-card, [data-theme="dark"] .type-card { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; box-shadow: 0 12px 28px rgba(0,0,0,0.32) !important; } [data-theme="dark"] .landing-tile-title, [data-theme="dark"] .landing-section h2, [data-theme="dark"] .landing-section p { color: #ffffff !important; } [data-theme="dark"] .landing-tile-icon { background: #20283a !important; color: #7eb8ff !important; } /* Listing cards */ [data-theme="dark"] .listing-card { background: #171b25 !important; background-color: #171b25 !important; border-color: #343b4d !important; color: #ffffff !important; box-shadow: 0 10px 26px rgba(0,0,0,0.32) !important; } [data-theme="dark"] .listing-card:hover { background: #1d2230 !important; background-color: #1d2230 !important; border-color: #475169 !important; } [data-theme="dark"] .card-img { background: #141823 !important; background-color: #141823 !important; border-color: #343b4d !important; } [data-theme="dark"] .card-right { background: #202431 !important; background-color: #202431 !important; border-left-color: #343b4d !important; } [data-theme="dark"] .card-title, [data-theme="dark"] .card-location, [data-theme="dark"] .card-spec, [data-theme="dark"] .card-price-num, [data-theme="dark"] .card-price-per, [data-theme="dark"] .card-time, [data-theme="dark"] .card-age { color: #ffffff !important; } [data-theme="dark"] .feature-tag, [data-theme="dark"] .results-tag, [data-theme="dark"] .city-chip { background: #20283a !important; background-color: #20283a !important; border-color: #3d4a62 !important; color: #ffffff !important; } /* Account page: main box, stats and package slot boxes */ [data-theme="dark"] .account-card, [data-theme="dark"] .account-summary, [data-theme="dark"] .account-panel, [data-theme="dark"] .account-box, [data-theme="dark"] .account-stat, [data-theme="dark"] .account-stats, [data-theme="dark"] .metric, [data-theme="dark"] .package-slots-box, [data-theme="dark"] .package-slots-box span, [data-theme="dark"] .bulk-delete-panel { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important; } [data-theme="dark"] .package-slots-box span, [data-theme="dark"] .account-stat strong, [data-theme="dark"] .account-stat span, [data-theme="dark"] .metric strong, [data-theme="dark"] .metric span { color: #ffffff !important; } /* Account dropdown */ [data-theme="dark"] .account-dropdown, [data-theme="dark"] .account-dropdown-user, [data-theme="dark"] .account-dropdown-item, [data-theme="dark"] .dropdown, [data-theme="dark"] .dropdown-menu { background: #171b25 !important; background-color: #171b25 !important; border-color: #343b4d !important; color: #ffffff !important; } [data-theme="dark"] .account-dropdown-item:hover { background: #20283a !important; } /* Detail page */ [data-theme="dark"] .detail-section, [data-theme="dark"] .detail-specs-bar, [data-theme="dark"] .detail-contact-panel, [data-theme="dark"] #dAgencyBox, [data-theme="dark"] .contact-box, [data-theme="dark"] .detail-share-sheet, [data-theme="dark"] .detail-map-loading, [data-theme="dark"] .detail-map-fallback { background: #171b25 !important; background-color: #171b25 !important; border-color: #343b4d !important; color: #ffffff !important; } [data-theme="dark"] .detail-section-header { background: #202431 !important; background-color: #202431 !important; color: #ffffff !important; border-color: #343b4d !important; } [data-theme="dark"] .detail-info-grid, [data-theme="dark"] .detail-info-item, [data-theme="dark"] .property-info-grid, [data-theme="dark"] .property-info-grid > *, [data-theme="dark"] .property-details-grid, [data-theme="dark"] .property-details-grid > *, [data-theme="dark"] .details-grid, [data-theme="dark"] .details-grid > *, [data-theme="dark"] .specs-grid, [data-theme="dark"] .specs-grid > *, [data-theme="dark"] .property-detail-item, [data-theme="dark"] .property-detail-box, [data-theme="dark"] .spec-box, [data-theme="dark"] .info-tile { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; } /* Catch unknown classes in Στοιχεία ακινήτου */ [data-theme="dark"] [class*="detail"][class*="info"], [data-theme="dark"] [class*="property"][class*="detail"], [data-theme="dark"] [class*="property"][class*="info"], [data-theme="dark"] [class*="spec"][class*="item"], [data-theme="dark"] [class*="spec"][class*="box"] { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; } /* Post / edit / pro pages */ [data-theme="dark"] .post-section, [data-theme="dark"] .post-card, [data-theme="dark"] .post-wrap, [data-theme="dark"] .post-field, [data-theme="dark"] .pro-card, [data-theme="dark"] .pricing-card, [data-theme="dark"] .pro-price-card, [data-theme="dark"] .form-section, [data-theme="dark"] .field, [data-theme="dark"] .locked-box, [data-theme="dark"] .login-card, [data-theme="dark"] .box, [data-theme="dark"] .card { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; } [data-theme="dark"] .post-section-title, [data-theme="dark"] .section-title { background: #202431 !important; background-color: #202431 !important; color: #ffffff !important; border-color: #343b4d !important; } [data-theme="dark"] .post-check-item, [data-theme="dark"] .check-item, [data-theme="dark"] .room-btn { background: #202431 !important; background-color: #202431 !important; color: #ffffff !important; border-color: #3d4a62 !important; } /* Inline/light hardcoded backgrounds. Keep it scoped to normal UI elements. */ [data-theme="dark"] div[style*="background:#fff"], [data-theme="dark"] div[style*="background: #fff"], [data-theme="dark"] div[style*="background:#ffffff"], [data-theme="dark"] div[style*="background: #ffffff"], [data-theme="dark"] div[style*="background:white"], [data-theme="dark"] div[style*="background: white"], [data-theme="dark"] div[style*="background-color:#fff"], [data-theme="dark"] div[style*="background-color: #fff"], [data-theme="dark"] div[style*="background-color:#ffffff"], [data-theme="dark"] div[style*="background-color: #ffffff"], [data-theme="dark"] div[style*="background-color:white"], [data-theme="dark"] div[style*="background-color: white"], [data-theme="dark"] button[style*="background:#fff"], [data-theme="dark"] button[style*="background: #fff"], [data-theme="dark"] label[style*="background:#fff"], [data-theme="dark"] label[style*="background: #fff"] { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; } /* Text visibility */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div, [data-theme="dark"] label, [data-theme="dark"] small, [data-theme="dark"] strong, [data-theme="dark"] a, [data-theme="dark"] .muted, [data-theme="dark"] .sub, [data-theme="dark"] .note, [data-theme="dark"] .card-sub, [data-theme="dark"] .detail-sub, [data-theme="dark"] .detail-desc, [data-theme="dark"] .detail-feature, [data-theme="dark"] .detail-feature-empty, [data-theme="dark"] .detail-info-label, [data-theme="dark"] .detail-info-value, [data-theme="dark"] .d-spec-val, [data-theme="dark"] .d-spec-label { color: #ffffff !important; } /* But keep the blue price color where useful */ [data-theme="dark"] .card-price-num, [data-theme="dark"] .detail-price-big, [data-theme="dark"] .pricing-price { color: var(--primary) !important; } /* Main action buttons stay colored */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-post, [data-theme="dark"] .btn-submit, [data-theme="dark"] .btn-filter-apply, [data-theme="dark"] .btn-mobile-search, [data-theme="dark"] .landing-search-btn, [data-theme="dark"] .hs-btn, [data-theme="dark"] .detail-contact-main, [data-theme="dark"] .detail-sticky-btn.primary { background: linear-gradient(135deg, #2d7aed 0%, #1d4ed8 100%) !important; background-color: #2d7aed !important; color: #ffffff !important; border-color: #1d4ed8 !important; } /* WhatsApp stays green */ [data-theme="dark"] .detail-sticky-btn.whatsapp, [data-theme="dark"] .detail-share-option.whatsapp { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; background-color: #16a34a !important; color: #ffffff !important; border-color: #16a34a !important; } /* Share buttons */ [data-theme="dark"] .detail-share-option { background: #202431 !important; background-color: #202431 !important; color: #ffffff !important; border-color: #3d4a62 !important; } [data-theme="dark"] .detail-share-option.twitter { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; } [data-theme="dark"] .detail-share-option.copy { background: #2b1a08 !important; background-color: #2b1a08 !important; color: #ffffff !important; border-color: #7c2d12 !important; } /* Keep images and map normal */ [data-theme="dark"] img, [data-theme="dark"] video, [data-theme="dark"] canvas, [data-theme="dark"] iframe, [data-theme="dark"] .leaflet-container, [data-theme="dark"] .leaflet-container * { color: initial; } /* Leaflet controls readable */ [data-theme="dark"] .leaflet-control, [data-theme="dark"] .leaflet-control a { background: #171b25 !important; background-color: #171b25 !important; color: #ffffff !important; border-color: #343b4d !important; } /* Mobile sticky bar */ [data-theme="dark"] .detail-sticky-contact { background: rgba(17, 20, 28, 0.98) !important; border-color: #343b4d !important; box-shadow: 0 -14px 34px rgba(0,0,0,0.48) !important; } /* Prevent washed-out disabled buttons from becoming unreadable */ [data-theme="dark"] button:disabled, [data-theme="dark"] .disabled { opacity: 0.55; color: #ffffff !important; } /* ============================================================ FINAL TWO REMAINING WHITE INFO BOXES Fixes: 1) account professional info strip 2) post page professional credits/free banner strip ============================================================ */ [data-theme="dark"] .free-banner, [data-theme="dark"] .private-limit-box, [data-theme="dark"] .register-pro-box, [data-theme="dark"] .account-alert, [data-theme="dark"] .account-alert.success, [data-theme="dark"] .account-alert.error, [data-theme="dark"] .pro-free-strip, [data-theme="dark"] .package-info-box, [data-theme="dark"] .package-status-box, [data-theme="dark"] .package-message, [data-theme="dark"] .credits-info-box, [data-theme="dark"] .credits-message, [data-theme="dark"] .professional-info-box, [data-theme="dark"] .professional-status-box, [data-theme="dark"] .post-info-box, [data-theme="dark"] .post-notice, [data-theme="dark"] .notice-box, [data-theme="dark"] .info-banner, [data-theme="dark"] .status-banner, [data-theme="dark"] .warning-box { background:#171b25 !important; background-color:#171b25 !important; color:#ffffff !important; border-color:#343b4d !important; box-shadow:0 10px 24px rgba(0,0,0,0.24) !important; } [data-theme="dark"] .free-banner *, [data-theme="dark"] .private-limit-box *, [data-theme="dark"] .register-pro-box *, [data-theme="dark"] .account-alert *, [data-theme="dark"] .pro-free-strip *, [data-theme="dark"] .package-info-box *, [data-theme="dark"] .package-status-box *, [data-theme="dark"] .package-message *, [data-theme="dark"] .credits-info-box *, [data-theme="dark"] .credits-message *, [data-theme="dark"] .professional-info-box *, [data-theme="dark"] .professional-status-box *, [data-theme="dark"] .post-info-box *, [data-theme="dark"] .post-notice *, [data-theme="dark"] .notice-box *, [data-theme="dark"] .info-banner *, [data-theme="dark"] .status-banner *, [data-theme="dark"] .warning-box * { color:#ffffff !important; } /* Catch those exact light strips even if they are simple divs with inline/light styling */ [data-theme="dark"] div[style*="background:#f8fafc"], [data-theme="dark"] div[style*="background: #f8fafc"], [data-theme="dark"] div[style*="background:#f1f5f9"], [data-theme="dark"] div[style*="background: #f1f5f9"], [data-theme="dark"] div[style*="background:#eff6ff"], [data-theme="dark"] div[style*="background: #eff6ff"], [data-theme="dark"] div[style*="background:#ecfdf5"], [data-theme="dark"] div[style*="background: #ecfdf5"], [data-theme="dark"] div[style*="background:#fff"], [data-theme="dark"] div[style*="background: #fff"], [data-theme="dark"] div[style*="background:#ffffff"], [data-theme="dark"] div[style*="background: #ffffff"], [data-theme="dark"] div[style*="background:white"], [data-theme="dark"] div[style*="background: white"], [data-theme="dark"] div[style*="background-color:#f8fafc"], [data-theme="dark"] div[style*="background-color: #f8fafc"], [data-theme="dark"] div[style*="background-color:#f1f5f9"], [data-theme="dark"] div[style*="background-color: #f1f5f9"], [data-theme="dark"] div[style*="background-color:#eff6ff"], [data-theme="dark"] div[style*="background-color: #eff6ff"], [data-theme="dark"] div[style*="background-color:#ecfdf5"], [data-theme="dark"] div[style*="background-color: #ecfdf5"], [data-theme="dark"] div[style*="background-color:#fff"], [data-theme="dark"] div[style*="background-color: #fff"], [data-theme="dark"] div[style*="background-color:#ffffff"], [data-theme="dark"] div[style*="background-color: #ffffff"], [data-theme="dark"] div[style*="background-color:white"], [data-theme="dark"] div[style*="background-color: white"] { background:#171b25 !important; background-color:#171b25 !important; color:#ffffff !important; border-color:#343b4d !important; } [data-theme="dark"] div[style*="background:#f8fafc"] *, [data-theme="dark"] div[style*="background: #f8fafc"] *, [data-theme="dark"] div[style*="background:#f1f5f9"] *, [data-theme="dark"] div[style*="background: #f1f5f9"] *, [data-theme="dark"] div[style*="background:#eff6ff"] *, [data-theme="dark"] div[style*="background: #eff6ff"] *, [data-theme="dark"] div[style*="background:#ecfdf5"] *, [data-theme="dark"] div[style*="background: #ecfdf5"] *, [data-theme="dark"] div[style*="background:#fff"] *, [data-theme="dark"] div[style*="background: #fff"] *, [data-theme="dark"] div[style*="background:#ffffff"] *, [data-theme="dark"] div[style*="background: #ffffff"] *, [data-theme="dark"] div[style*="background:white"] *, [data-theme="dark"] div[style*="background: white"] * { color:#ffffff !important; } /* The account summary strip is inside the account card after the 3 stat boxes */ [data-theme="dark"] .account-card > div, [data-theme="dark"] .account-summary > div, [data-theme="dark"] .account-panel > div, [data-theme="dark"] .account-box > div { color:#ffffff !important; } /* But make only pale direct children dark, so we don't ruin colored buttons */ [data-theme="dark"] .account-card > div:not(.account-actions):not(.card-actions), [data-theme="dark"] .post-wrap > div:not(.post-section), [data-theme="dark"] .post-page > div:not(.post-section) { border-color:#343b4d !important; } /* Small pale pill/button text that was fading */ [data-theme="dark"] .btn-delete-card:disabled, [data-theme="dark"] .bulk-delete-btn:disabled, [data-theme="dark"] button:disabled { color:#ffffff !important; opacity:.62 !important; } /* ============================================================ FINAL PILL + SWITCH FIX Fixes: 1) "Επαγγελματίας δωρεάν" pill 2) replaces sun/moon icon with elegant iPhone-style switch ============================================================ */ /* The remaining white professional plan pill */ [data-theme="dark"] .account-plan-pill { background:#171b25 !important; background-color:#171b25 !important; color:#ffffff !important; border-color:#343b4d !important; box-shadow:none !important; } [data-theme="dark"] .account-plan-pill *, [data-theme="dark"] .account-stat-row .account-plan-pill { color:#ffffff !important; } /* Elegant small black switch instead of emoji button */ .theme-toggle { width:38px !important; height:22px !important; min-width:38px !important; border:none !important; border-radius:999px !important; background:#050505 !important; padding:2px !important; display:inline-flex !important; align-items:center !important; justify-content:flex-start !important; cursor:pointer !important; position:relative !important; z-index:9999 !important; font-size:0 !important; line-height:0 !important; overflow:hidden !important; color:transparent !important; box-shadow:inset 0 1px 3px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.18) !important; transform:translateX(-12px) !important; transition:background .22s ease, box-shadow .22s ease !important; -webkit-tap-highlight-color:transparent !important; touch-action:manipulation !important; } .theme-toggle:hover { background:#000 !important; border-color:transparent !important; transform:translateX(-12px) scale(1.03) !important; } .theme-toggle:active { transform:translateX(-12px) scale(.97) !important; } .theme-toggle::before { content:'' !important; width:18px !important; height:18px !important; min-width:18px !important; border-radius:999px !important; background:#ffffff !important; box-shadow:0 2px 6px rgba(0,0,0,.34) !important; transform:translateX(0) !important; transition:transform .22s cubic-bezier(.22,1.2,.32,1), background .22s ease !important; } .theme-toggle.is-dark::before, [data-theme="dark"] .theme-toggle::before { transform:translateX(16px) !important; background:#2d7aed !important; } [data-theme="dark"] .theme-toggle { background:#050505 !important; color:transparent !important; border-color:transparent !important; } @media (max-width:768px) { .theme-toggle { width:36px !important; height:21px !important; min-width:36px !important; transform:translateX(-8px) !important; } .theme-toggle:hover { transform:translateX(-8px) scale(1.03) !important; } .theme-toggle:active { transform:translateX(-8px) scale(.97) !important; } .theme-toggle::before { width:17px !important; height:17px !important; min-width:17px !important; } .theme-toggle.is-dark::before, [data-theme="dark"] .theme-toggle::before { transform:translateX(15px) !important; } } /* ============================================================ DESKTOP ONLY — move theme switch further left Δεν επηρεάζει κινητό / tablet κάτω από 769px. ============================================================ */ @media (min-width: 769px) { .theme-toggle { transform: translateX(-40px) !important; } .theme-toggle:hover { transform: translateX(-40px) scale(1.03) !important; } .theme-toggle:active { transform: translateX(-40px) scale(.97) !important; } } /* ============================================================ DARK MODE LOGO — handled by theme.js swapping the image src Το λευκό logo είναι αρχείο: logo_white_dark_mode.png ============================================================ */ .logo img[alt="ToNoikiasame"] { opacity: 1 !important; } [data-theme="dark"] .logo img[alt="ToNoikiasame"] { opacity: 1 !important; filter: none !important; -webkit-filter: none !important; } /* ============================================================ SAFE PATCH — Dark mode cards for listing extra features only Scope: detail page extra features boxes (#dExtraFeaturesWrap / #dTags) Δεν αλλάζει theme.js, layout, search, gallery, map ή λειτουργίες. ============================================================ */ [data-theme="dark"] #dExtraFeaturesWrap #dTags.detail-tags-grid > .detail-tag-item, [data-theme="dark"] #dExtraFeaturesWrap .detail-tags-grid > .detail-tag-item, [data-theme="dark"] #dExtraFeaturesWrap .detail-tags-grid > div, [data-theme="dark"] #dTags > .detail-tag-item { background: #171b25 !important; background-color: #171b25 !important; color: #f8fafc !important; border-color: #343b4d !important; box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important; } [data-theme="dark"] #dExtraFeaturesWrap #dTags.detail-tags-grid > .detail-tag-item::before, [data-theme="dark"] #dExtraFeaturesWrap .detail-tags-grid > .detail-tag-item::before, [data-theme="dark"] #dTags > .detail-tag-item::before { color: #22c55e !important; } /* ============================================================ PREMIUM THEME SWITCH EFFECT — SAFE POLISH ONLY Scope: only while html has .theme-switching for a few ms. Δεν αλλάζει χρώματα, θέσεις, padding, margins, sizes ή layout. Δεν κάνει transition σε transform για να μη μετακινηθεί τίποτα. ============================================================ */ html.theme-switching body, html.theme-switching body *:not(.theme-toggle):not(.theme-toggle *):not(img):not(video):not(canvas):not(iframe):not(.leaflet-container):not(.leaflet-container *) { transition-property: background-color, color, border-color, box-shadow, opacity !important; transition-duration: 240ms !important; transition-timing-function: cubic-bezier(.22,.61,.36,1) !important; transition-delay: 0ms !important; } html.theme-switching::before { content: "" !important; position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; pointer-events: none !important; background: rgba(255,255,255,.04) !important; opacity: 0 !important; animation: tnThemePremiumVeil 240ms cubic-bezier(.22,.61,.36,1) both !important; } html[data-theme="dark"].theme-switching::before { background: rgba(15,17,23,.10) !important; } @keyframes tnThemePremiumVeil { 0% { opacity: 0; } 42% { opacity: .16; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { html.theme-switching body, html.theme-switching body * { transition: none !important; } html.theme-switching::before { animation: none !important; opacity: 0 !important; } } /* ============================================================ DESKTOP DARK MODE — property gallery arrows visibility fix Scope: only desktop, only arrows inside the property photo gallery. Δεν αλλάζει θέση, μέγεθος, gallery, mobile ή λειτουργίες. ============================================================ */ @media (min-width: 861px) { html[data-theme="dark"] .main-img .gallery-arrow { color: #111827 !important; text-shadow: none !important; } html[data-theme="dark"] .main-img .gallery-arrow:hover { color: #000000 !important; } } /* ============================================================ DESKTOP DARK MODE — index detail slider arrows visibility fix Scope: only desktop, only the two inline arrow buttons in index.php detail slider. Δεν αλλάζει θέση, μέγεθος, gallery, mobile ή λειτουργίες. ============================================================ */ @media (min-width: 861px) { html[data-theme="dark"] .detail-slider-frame > button[onclick="sliderPrev()"], html[data-theme="dark"] .detail-slider-frame > button[onclick="sliderNext()"] { color: #111827 !important; background: rgba(255,255,255,0.92) !important; text-shadow: none !important; } html[data-theme="dark"] .detail-slider-frame > button[onclick="sliderPrev()"]:hover, html[data-theme="dark"] .detail-slider-frame > button[onclick="sliderNext()"]:hover { color: #000000 !important; background: rgba(255,255,255,0.98) !important; } }