/* Theme Name: XTube Theme URI: https://example.com/xtube Author: XTube Author URI: https://example.com Description: A WordPress theme with a pixel-faithful xvideos.com look — dense dark grid, tight thumbs with title below, A–Z actor sidebar, sort tabs above the loop. Built to be data-compatible with the WP-Script plugin ecosystem and the WP-Script RetroTube theme's data model (thumb, trailer_url, duration, hd_video, post_views_count, video_embed, thumbs). Contains no adult content. Light/dark/auto display-mode toggle is included; dark is the default. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: xtube Domain Path: /languages Tags: one-column, two-columns, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, translation-ready, block-templates, wide-blocks */ /*-------------------------------------------------------------- # CSS Custom Properties (color tokens) # xvideos.com style: dark is the default. The mode is selected by # [data-theme="light"] or [data-theme="dark"] on , applied by # an inline script in header.php before paint to prevent FOUC. When # neither attribute is set, prefers-color-scheme drives the "auto" # behavior. The same variable names drive everything — only the # palettes change. --------------------------------------------------------------*/ :root, [data-theme="dark"] { --xtube-bg: #141414; --xtube-surface: #1b1b1b; --xtube-surface-alt: #181818; --xtube-surface-soft: #222222; --xtube-text: #cccccc; --xtube-text-strong: #ffffff; --xtube-text-muted: #888888; --xtube-text-faint: #555555; --xtube-primary: #d92121; --xtube-primary-hover: #b81818; --xtube-primary-soft: rgba(217, 33, 33, 0.18); --xtube-accent-bar: #d92121; --xtube-border: #2a2a2a; --xtube-border-strong: #333333; --xtube-divider: #222222; --xtube-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); --xtube-shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.5); --xtube-overlay: rgba(0, 0, 0, 0.55); --xtube-thumb-bg: #0a0a0a; --xtube-badge-bg: rgba(0, 0, 0, 0.78); --xtube-badge-text: #ffffff; --xtube-rating-bg: #f5d76e; --xtube-code-bg: #202224; --xtube-focus: #d92121; color-scheme: dark; } [data-theme="light"] { --xtube-bg: #f3f3f3; --xtube-surface: #ffffff; --xtube-surface-alt: #fafafa; --xtube-surface-soft: #ececec; --xtube-text: #1f2328; --xtube-text-strong: #0c0f14; --xtube-text-muted: #5a6470; --xtube-text-faint: #8a94a3; --xtube-primary: #cc0000; --xtube-primary-hover: #a00000; --xtube-primary-soft: rgba(204, 0, 0, 0.12); --xtube-accent-bar: #cc0000; --xtube-border: #e3e3e3; --xtube-border-strong: #c8cdd5; --xtube-divider: #ececec; --xtube-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); --xtube-shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.1); --xtube-overlay: rgba(0, 0, 0, 0.4); --xtube-thumb-bg: #1a1a1a; --xtube-badge-bg: rgba(0, 0, 0, 0.78); --xtube-badge-text: #ffffff; --xtube-rating-bg: #f5d76e; --xtube-code-bg: #f0f2f5; --xtube-focus: #2563eb; color-scheme: light; } /* prefers-color-scheme: dark is the implicit default above. The light override below only fires when the user has explicitly picked light OR when their OS reports light AND no user choice is set. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme-source^="user-dark"]):not([data-theme-source^="default-dark"]):not([data-theme-source^="cookie-dark"]) { --xtube-bg: #f5f5f5; --xtube-surface: #ffffff; --xtube-surface-alt: #fafafa; --xtube-surface-soft: #ececec; --xtube-text: #333333; --xtube-text-strong: #111111; --xtube-text-muted: #777777; --xtube-text-faint: #aaaaaa; --xtube-primary: #d92121; --xtube-primary-hover: #b81818; --xtube-primary-soft: rgba(217, 33, 33, 0.12); --xtube-accent-bar: #d92121; --xtube-border: #e8e8e8; --xtube-border-strong: #d0d0d0; --xtube-divider: #f0f0f0; --xtube-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); --xtube-shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.1); --xtube-overlay: rgba(0, 0, 0, 0.4); --xtube-thumb-bg: #1a1a1a; --xtube-badge-bg: rgba(0, 0, 0, 0.78); --xtube-badge-text: #ffffff; --xtube-rating-bg: #f5d76e; --xtube-code-bg: #f0f2f5; --xtube-focus: #d92121; color-scheme: light; } } /*-------------------------------------------------------------- # Base / normalize --------------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } body { margin: 0; background-color: var(--xtube-bg); color: var(--xtube-text); font-family: Arial, Helvetica, "Liberation Sans", sans-serif; font-size: 13px; line-height: 1.45; transition: background-color 200ms ease, color 200ms ease; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--xtube-text); text-decoration: none; transition: color 120ms ease; } a:hover, a:focus { color: var(--xtube-text-strong); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--xtube-focus); outline-offset: 2px; border-radius: 3px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--xtube-surface); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: var(--xtube-primary); display: block; font-size: 14px; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }