/* assets/css/style.css Dark theme styles scoped under .site-dark — Safe: only applies when veya 'site-dark' sınıfına sahipse. — This prevents admin pages from being unexpectedly dark. */ /* Basic reset / shared */ * { box-sizing: border-box; } html,body { height:100%; margin:0; padding:0; font-family: Inter, Arial, Helvetica, sans-serif; } img,video,iframe { display:block; max-width:100%; } /* ---------- Default light rules (keep minimal, to avoid breaking admin) ---------- */ body { background:#ffffff; color:#111111; } .wrap, .container { max-width:1200px; margin:0 auto; padding:0 14px; } /* ---------- Dark theme (applies only when .site-dark is present on or ) ---------- */ .site-dark, .site-dark body, .site-dark html { --bg: #0b0b0d; /* overall background */ --panel: #0f1113; /* cards / panels */ --muted: #9aa0a6; /* muted text */ --text: #e6e6e6; /* primary text */ --accent: #ff2d7a; /* pink accent */ --accent-2: #d63a7f; --border: rgba(255,255,255,0.04); background: var(--bg) !important; color: var(--text) !important; } /* Scope everything to .site-dark so admin remains unchanged unless class applied */ .site-dark body, .site-dark { background: var(--bg); color: var(--text); } /* Header / top bar */ .site-dark .site-header, .site-dark header, .site-dark .nav, .site-dark .topbar { background: #0b0b0d; border-bottom: 2px solid rgba(255,45,122,0.14); color: var(--text); } /* Logo accent */ .site-dark .logo, .site-dark .brand { color: var(--text); } .site-dark .brand .accent { color: var(--accent); font-weight:700; } /* Container / wrap */ .site-dark .wrap, .site-dark .container, .site-dark .video-wrap { max-width:1200px; margin: 18px auto; padding: 0 14px; } /* Footer */ .site-dark footer { background: rgba(0,0,0,0.28); color: #a9a9a9; text-align:center; padding: 14px 0; margin-top: 28px; } /* ---------- Grid / thumbnails ---------- */ .site-dark .videos-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 18px 0; align-items: start; } .site-dark .video-card { background: transparent; border-radius: 10px; overflow: hidden; display:flex; flex-direction: column; color: var(--text); } /* thumb area (16:9) */ .site-dark .video-card .thumb, .site-dark .video-card .media, .site-dark .responsive-embed { width:100%; aspect-ratio: 16 / 9; position:relative; background:#000; border-radius:8px; overflow:hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.6); } /* thumbnail image/video/iframe */ .site-dark .video-card img, .site-dark .video-card video, .site-dark .video-card iframe, .site-dark .responsive-embed img, .site-dark .responsive-embed video, .site-dark .responsive-embed iframe { position:absolute; top:0;left:0;width:100%;height:100%; object-fit:cover; border:0; } /* meta under thumb */ .site-dark .video-card .meta { padding: 8px 8px; color: var(--muted); font-size:13px; } /* title */ .site-dark .video-title { font-size:14px; margin-top:8px; font-weight:600; color: var(--text); } .site-dark .video-title a { color: var(--text); text-decoration:none; } .site-dark .video-title a:hover { color: var(--accent); text-decoration:underline; } /* small badges */ .site-dark .badge { display:inline-block; padding:4px 8px; border-radius:12px; font-size:12px; background: rgba(255,255,255,0.03); color: var(--muted); } /* ---------- PLAYER (page) ---------- */ .site-dark .video-page .video-wrap, .site-dark .video-wrap { max-width:1100px; margin:22px auto; padding:0 14px; } /* player card */ .site-dark .player, .site-dark .video-page .player { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-radius:12px; padding:16px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.45); color: var(--text); } /* title */ .site-dark .player .title { font-size:20px; font-weight:700; color:var(--text); margin-bottom:12px; } /* responsive embed: cap by viewport */ .site-dark .player .resp, .site-dark .player .responsive-embed { position:relative; width:100%; height: min(64vh, calc(100vw * 9 / 16)); max-height: 76vh; overflow:hidden; border-radius:8px; background:#000; border:1px solid rgba(255,255,255,0.02); } /* ensure media inside is visible and centered, show controls */ .site-dark .player .resp iframe, .site-dark .player .resp video, .site-dark .player .resp img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; background:#000; border:0; } /* info area */ .site-dark .player .info { margin-top:12px; color:var(--muted); font-size:14px; } .site-dark .player .tags a { display:inline-block; margin-right:8px; margin-top:6px; padding:6px 10px; background:rgba(255,255,255,0.02); border-radius:12px; color:var(--text); text-decoration:none; font-size:13px; } /* meta aside */ .site-dark .meta { width:300px; flex: 0 0 300px; color:var(--muted); } .site-dark .meta a { color: var(--accent); text-decoration:none; } .site-dark .meta a:hover { color: var(--accent-2); text-decoration:underline; } /* home button */ .site-dark .home-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,0.02); color:var(--text); text-decoration:none; border:1px solid rgba(255,255,255,0.02); } .site-dark .home-btn:hover { transform:translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.45); } /* small screens */ @media (max-width:900px) { .site-dark .videos-list { gap:12px; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); } .site-dark .player .resp { height: min(50vh, calc(100vw * 9 / 16)); } .site-dark .meta { width:100%; order:2; margin-top:12px; } .site-dark .player { order:1; } } /* final polish: small border radius for iframes */ .site-dark .resp iframe, .site-dark .video-card .thumb iframe { border-radius:8px; } /* If some other global styles are stronger, consider increasing specificity for the above selectors */ /* End of dark theme CSS */