/** * Üst menü logosu: Tailwind sınıfı h-16 (4rem) + CDN sırası / önbellek için yedek. * Global .h-10 override kaldırıldı (ikonlar ve diğer h-10 kullanımları bozulmasın). */ #navbar img[alt="SpySEO Logo"] { height: 2.5rem !important; width: auto !important; } /* ------------------------------------------------------------------ Soft White Light Mode (Dashboard-wide) Applies when does NOT have .dark ------------------------------------------------------------------- */ html:not(.dark) body { /* Apple/ikas-like: neutral light canvas */ background: #f5f5f7; color: #111827; } /* Footer must stay readable (do not remap its dark surface) */ html:not(.dark) #siteFooter { background: #0b1220 !important; color: rgba(255, 255, 255, 0.88) !important; } html:not(.dark) #siteFooter a, html:not(.dark) #siteFooter a:visited { color: rgba(255, 255, 255, 0.88) !important; } html:not(.dark) #siteFooter a:hover { color: rgba(255, 255, 255, 1) !important; } html:not(.dark) #siteFooter .text-white { color: #ffffff !important; } html:not(.dark) #siteFooter .text-slate-400 { color: rgba(255,255,255,0.62) !important; } html:not(.dark) #siteFooter .text-slate-300 { color: rgba(255,255,255,0.74) !important; } html:not(.dark) #siteFooter .text-slate-200 { color: rgba(255,255,255,0.88) !important; } /* Base surfaces */ html:not(.dark) .bg-slate-950 { background-color: #f8fafc !important; } html:not(.dark) .bg-slate-900 { background-color: #f1f5f9 !important; } html:not(.dark) .bg-slate-800 { background-color: #ffffff !important; } html:not(.dark) .bg-slate-700 { background-color: #ffffff !important; } html:not(.dark) .bg-gray-950 { background-color: #f8fafc !important; } html:not(.dark) .bg-gray-900 { background-color: #f1f5f9 !important; } html:not(.dark) .bg-gray-900\/80 { background-color: rgba(248, 250, 252, 0.96) !important; } html:not(.dark) .bg-gray-900\/60 { background-color: rgba(248, 250, 252, 0.92) !important; } html:not(.dark) .bg-gray-900\/50 { background-color: rgba(248, 250, 252, 0.88) !important; } html:not(.dark) .bg-gray-900\/40 { background-color: rgba(248, 250, 252, 0.82) !important; } html:not(.dark) .bg-gray-800 { background-color: #ffffff !important; } html:not(.dark) .bg-gray-800\/80 { background-color: rgba(255, 255, 255, 0.96) !important; } html:not(.dark) .bg-gray-800\/60 { background-color: rgba(255, 255, 255, 0.92) !important; } html:not(.dark) .bg-gray-800\/50 { background-color: rgba(255, 255, 255, 0.88) !important; } html:not(.dark) .bg-gray-800\/40 { background-color: rgba(255, 255, 255, 0.82) !important; } html:not(.dark) .bg-gray-700 { background-color: #ffffff !important; } html:not(.dark) .bg-gray-700\/80 { background-color: rgba(255, 255, 255, 0.92) !important; } html:not(.dark) .bg-gray-700\/60 { background-color: rgba(255, 255, 255, 0.88) !important; } /* Neutral “selected/hover fills” (avoid green haze everywhere in light mode) */ html:not(.dark) .bg-gray-700\/50 { background-color: rgba(17, 24, 39, 0.06) !important; } html:not(.dark) .bg-gray-700\/40 { background-color: rgba(17, 24, 39, 0.05) !important; } html:not(.dark) .bg-gray-700\/30 { background-color: rgba(17, 24, 39, 0.04) !important; } html:not(.dark) .bg-gray-700\/20 { background-color: rgba(17, 24, 39, 0.03) !important; } html:not(.dark) .bg-gray-700\/10 { background-color: rgba(17, 24, 39, 0.02) !important; } /* Borders */ html:not(.dark) .border-slate-800 { border-color: rgba(15, 23, 42, 0.10) !important; } html:not(.dark) .border-slate-700 { border-color: rgba(15, 23, 42, 0.10) !important; } html:not(.dark) .border-slate-600 { border-color: rgba(15, 23, 42, 0.12) !important; } html:not(.dark) .border-gray-800 { border-color: rgba(15, 23, 42, 0.08) !important; } html:not(.dark) .border-gray-700 { border-color: rgba(15, 23, 42, 0.10) !important; } html:not(.dark) .border-gray-700\/50 { border-color: rgba(15, 23, 42, 0.08) !important; } html:not(.dark) .border-gray-600 { border-color: rgba(15, 23, 42, 0.12) !important; } html:not(.dark) .border-slate-700 { border-color: rgba(15, 23, 42, 0.10) !important; } /* Text */ /* In light mode most "text-white" usages should become dark */ html:not(.dark) .text-white { color: #111827 !important; } /* --------------------------------------------------------------- Light mode: keep white text on green primary buttons (Some templates use bg-* without explicitly adding text-white) ---------------------------------------------------------------- */ html:not(.dark) button.bg-primary-500, html:not(.dark) button.bg-primary-600, html:not(.dark) button.bg-primary-700, html:not(.dark) button.bg-emerald-500, html:not(.dark) button.bg-emerald-600, html:not(.dark) button.bg-emerald-700, html:not(.dark) button.bg-green-500, html:not(.dark) button.bg-green-600, html:not(.dark) button.bg-green-700, html:not(.dark) a.bg-primary-500, html:not(.dark) a.bg-primary-600, html:not(.dark) a.bg-primary-700, html:not(.dark) a.bg-emerald-500, html:not(.dark) a.bg-emerald-600, html:not(.dark) a.bg-emerald-700, html:not(.dark) a.bg-green-500, html:not(.dark) a.bg-green-600, html:not(.dark) a.bg-green-700, html:not(.dark) [role="button"].bg-primary-500, html:not(.dark) [role="button"].bg-primary-600, html:not(.dark) [role="button"].bg-primary-700, html:not(.dark) [role="button"].bg-emerald-500, html:not(.dark) [role="button"].bg-emerald-600, html:not(.dark) [role="button"].bg-emerald-700, html:not(.dark) [role="button"].bg-green-500, html:not(.dark) [role="button"].bg-green-600, html:not(.dark) [role="button"].bg-green-700 { color: rgba(255, 255, 255, 0.98) !important; } /* NOTE: do NOT use [class*="bg-primary-"] here. It matches Tailwind variants like hover:bg-primary-600 and makes text invisible on white. */ /* Green primary gradients used on buttons */ html:not(.dark) button.bg-gradient-to-r.from-primary-600.to-primary-500, html:not(.dark) a.bg-gradient-to-r.from-primary-600.to-primary-500, html:not(.dark) [role="button"].bg-gradient-to-r.from-primary-600.to-primary-500, html:not(.dark) button.bg-gradient-to-r.from-emerald-600.to-emerald-500, html:not(.dark) a.bg-gradient-to-r.from-emerald-600.to-emerald-500, html:not(.dark) [role="button"].bg-gradient-to-r.from-emerald-600.to-emerald-500, html:not(.dark) button.bg-gradient-to-r.from-green-600.to-green-500, html:not(.dark) a.bg-gradient-to-r.from-green-600.to-green-500, html:not(.dark) [role="button"].bg-gradient-to-r.from-green-600.to-green-500 { color: rgba(255, 255, 255, 0.98) !important; } /* ...but on colored buttons/badges we keep white text for contrast */ html:not(.dark) .bg-blue-600.text-white, html:not(.dark) .bg-blue-500.text-white, html:not(.dark) .bg-emerald-700.text-white, html:not(.dark) .bg-emerald-600.text-white, html:not(.dark) .bg-emerald-500.text-white, html:not(.dark) .bg-green-700.text-white, html:not(.dark) .bg-green-600.text-white, html:not(.dark) .bg-green-500.text-white, html:not(.dark) .bg-purple-700.text-white, html:not(.dark) .bg-purple-600.text-white, html:not(.dark) .bg-red-600.text-white, html:not(.dark) .bg-red-500.text-white, html:not(.dark) .bg-indigo-600.text-white, html:not(.dark) .bg-indigo-500.text-white, html:not(.dark) .bg-primary-950.text-white, html:not(.dark) .bg-primary-900.text-white, html:not(.dark) .bg-primary-800.text-white, html:not(.dark) .bg-primary-700.text-white, html:not(.dark) .bg-primary-600.text-white, html:not(.dark) .bg-primary-500.text-white, /* Gradients: text-white must stay white */ html:not(.dark) .bg-gradient-to-r.text-white, html:not(.dark) .bg-gradient-to-br.text-white, html:not(.dark) .bg-gradient-to-b.text-white, html:not(.dark) .bg-gradient-to-tr.text-white, html:not(.dark) .bg-gradient-to-l.text-white, html:not(.dark) .bg-gradient-to-t.text-white, html:not(.dark) .from-primary-950.text-white, html:not(.dark) .from-primary-900.text-white, html:not(.dark) .from-primary-800.text-white, html:not(.dark) .from-primary-700.text-white, html:not(.dark) .from-primary-600.text-white, html:not(.dark) .from-primary-500.text-white, html:not(.dark) .to-primary-950.text-white, html:not(.dark) .to-primary-900.text-white, html:not(.dark) .to-primary-800.text-white, html:not(.dark) .to-primary-700.text-white, html:not(.dark) .to-primary-600.text-white, html:not(.dark) .to-primary-500.text-white { color: #ffffff !important; } /* Topbar Admin link: keep solid purple + white label in light mode (global text-white remap otherwise fights this) */ html:not(.dark) #btnTopbarAdmin { background-color: #7e22ce !important; /* purple-700 */ color: #ffffff !important; border-color: rgba(126, 34, 206, 0.35) !important; } html:not(.dark) #btnTopbarAdmin:hover { background-color: #9333ea !important; /* purple-600 */ color: #ffffff !important; } html:not(.dark) .text-gray-200 { color: #0f172a !important; } html:not(.dark) .text-gray-300 { color: #1f2937 !important; } html:not(.dark) .text-gray-400 { color: #334155 !important; } html:not(.dark) .text-gray-500 { color: #475569 !important; } html:not(.dark) .text-gray-600 { color: #64748b !important; } html:not(.dark) .text-gray-700 { color: #94a3b8 !important; } /* Subtle hover/selected states (neutral, Apple-like) */ html:not(.dark) .hover\:bg-gray-800:hover { background-color: rgba(17, 24, 39, 0.04) !important; } html:not(.dark) .hover\:bg-gray-700:hover { background-color: rgba(17, 24, 39, 0.05) !important; } html:not(.dark) .hover\:bg-slate-700:hover { background-color: rgba(17, 24, 39, 0.05) !important; } html:not(.dark) .hover\:bg-slate-800:hover { background-color: rgba(17, 24, 39, 0.04) !important; } html:not(.dark) .hover\:bg-slate-900:hover { background-color: rgba(17, 24, 39, 0.06) !important; } /* Softer row hovers (avoid “dirty gray” blocks in light mode) */ html:not(.dark) tr.hover\:bg-gray-700\/50:hover, html:not(.dark) .hover\:bg-gray-700\/50:hover { background-color: rgba(248, 250, 252, 0.98) !important; } /* Rankings PDF: hide “İşlem / Toplu seç” column */ #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData .ranking-col-action { display: none !important; } /* Rankings PDF: show header + make table compact, hide unused columns */ #rankingsPdfWrapper.rankings-pdf-mode #rankingsPdfHeader { display: flex !important; } /* Hide columns in PDF (class-based; resilient to DOM changes) */ #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData .ranking-col-drag, #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData .ranking-col-region, #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData .ranking-col-trend, #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData .ranking-col-page, #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData .ranking-col-published, #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData .ranking-col-lastchecked, #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData .ranking-col-action { display: none !important; } /* Smaller typography + tighter spacing in PDF */ #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData { font-size: 11px !important; min-width: 0 !important; /* override min-w-[940px] so portrait can fit */ width: 100% !important; table-layout: fixed !important; } #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData thead { font-size: 10px !important; } #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData th, #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData td { padding-top: 4px !important; padding-bottom: 4px !important; line-height: 1.15 !important; } #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableData td { padding-left: 8px !important; padding-right: 8px !important; } /* PDF: remove scroll clipping so all visible columns render */ #rankingsPdfWrapper.rankings-pdf-mode #rankingsTableScroll { overflow: visible !important; } /* Makaleler — alt sayfalama şeridi */ html:not(.dark) #articles-pagination { background-color: rgba(255, 255, 255, 0.98) !important; border-color: rgba(15, 23, 42, 0.08) !important; } html:not(.dark) #articles-pagination .text-gray-500, html:not(.dark) #articles-pagination .text-gray-300 { color: #475569 !important; } html:not(.dark) #articles-pagination button.bg-gray-700 { background-color: #ffffff !important; color: #0f172a !important; border-color: rgba(15, 23, 42, 0.12) !important; } html:not(.dark) #articles-pagination button.bg-gray-700:hover { background-color: rgba(241, 245, 249, 0.98) !important; } /* Planlanan makaleler — takvim grid zemin (yüklenirken gri görünmesin) */ html:not(.dark) #planned-calendar-grid.bg-gray-900\/50 { background-color: rgba(255, 255, 255, 0.96) !important; } /* Destek (kullanıcı) sayfası — talep satırı hover */ html:not(.dark) body.support-page .support-ticket-user:hover { background-color: rgba(248, 250, 252, 0.98) !important; } html:not(.dark) body.support-page .support-ticket-user[class*="bg-gray-900/40"] { background-color: rgba(226, 232, 240, 0.65) !important; } /* Kelime sıra tablosu — seçili satır (yeşil vurguyu light mode’da yumuşat) */ html:not(.dark) tr.bg-green-900\/15 { background-color: rgba(16, 185, 129, 0.07) !important; } /* Kelime sıra takibi — açık zeminli küçük aksiyon butonları (Ekle / Temizle) */ html:not(.dark) #rankingsToolbarRow .bg-gray-600.text-white { background-color: #e2e8f0 !important; color: #0f172a !important; border-color: rgba(15, 23, 42, 0.12) !important; } html:not(.dark) #rankingsToolbarRow .bg-gray-600.text-white:hover { background-color: #cbd5e1 !important; } /* Admin screen: fix light-mode hover/text contrast */ html:not(.dark) body.admin-page .hover\:text-white:hover { color: #0f172a !important; } html:not(.dark) body.admin-page .hover\:bg-gray-800\/30:hover { background-color: rgba(16, 185, 129, 0.06) !important; } html:not(.dark) body.admin-page .hover\:bg-gray-800\/50:hover { background-color: rgba(16, 185, 129, 0.07) !important; } html:not(.dark) body.admin-page .hover\:bg-gray-800\/80:hover { background-color: rgba(16, 185, 129, 0.08) !important; } html:not(.dark) body.admin-page .support-ticket-btn:hover { background-color: rgba(248, 250, 252, 0.98) !important; } /* Make "tinted" action buttons readable on white surfaces */ html:not(.dark) body.admin-page .bg-purple-600\/20.text-purple-300, html:not(.dark) body.admin-page .bg-purple-600\/20.text-purple-400, html:not(.dark) body.admin-page .bg-purple-600\/20.text-purple-500 { color: #6d28d9 !important; /* purple-700-ish */ } html:not(.dark) body.admin-page .bg-green-600\/20.text-green-300, html:not(.dark) body.admin-page .bg-green-600\/20.text-green-400, html:not(.dark) body.admin-page .bg-green-600\/20.text-green-500 { color: #047857 !important; /* emerald-700-ish */ } html:not(.dark) body.admin-page .bg-red-600\/10.text-red-300, html:not(.dark) body.admin-page .bg-red-600\/10.text-red-400, html:not(.dark) body.admin-page .bg-red-600\/10.text-red-500 { color: #b91c1c !important; /* red-700-ish */ } /* Inputs: keep white, soft borders */ html:not(.dark) input, html:not(.dark) textarea, html:not(.dark) select { background: #ffffff !important; color: #0f172a !important; border-color: rgba(15, 23, 42, 0.14) !important; } /* Tables / row fills that still look gray */ html:not(.dark) .divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(15, 23, 42, 0.08) !important; } html:not(.dark) .divide-gray-700\/50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(15, 23, 42, 0.06) !important; }