/** * Forum shell overrides (Tailwind handles most styling). * * @package TribeEngine */ /* * Dark/light theme tokens. minimal_starter_tailwind_config() (functions.php) * points every custom Tailwind color (cream/page/ink/muted/border/brand/ * heart/mod) at these variables instead of fixed hex values, so toggling * data-theme on (see #toggleTheme in assets/js/forum.js) reskins every * screen that uses those tokens in one place — no dark: variant needed on * each element. Tailwind's built-in `white` isn't part of that token system * (it's a fixed literal), but it's what every card/sheet/modal surface uses * as its background, so it gets its own targeted override below via * --et-surface instead. */ :root { --et-cream: #FAF7F2; --et-page: #EAE6DC; --et-ink: #2A241D; --et-muted: #8B8375; --et-border: #E7E0D2; --et-brand: #33538B; --et-brand-dark: #25406B; --et-brand-light: #E8ECF6; --et-heart: #DE5145; --et-mod: #B4530F; --et-surface: #FFFFFF; } :root[data-theme="dark"] { --et-cream: #14171C; --et-page: #1B1F27; --et-ink: #EEF1F5; --et-muted: #9AA3B5; --et-border: #2C313D; --et-brand: #6D8FD4; --et-brand-dark: #587BC4; --et-brand-light: #26314A; --et-heart: #F0776B; --et-mod: #E0975A; --et-surface: #1E2330; } [data-theme="dark"] .bg-white { background-color: var(--et-surface); } [data-theme="dark"] .shadow-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } /* Keep composer fields legible against dark modal and sheet surfaces. */ [data-theme="dark"] #threadTextarea, [data-theme="dark"] .et-comment-textarea, [data-theme="dark"] .et-comment-textarea:focus { background-color: var(--et-cream); color: var(--et-ink); } [data-theme="dark"] #threadTextarea::placeholder, [data-theme="dark"] .et-comment-textarea::placeholder { color: var(--et-muted); } #threadTextarea { white-space: pre-wrap; overflow-wrap: anywhere; } #threadTextarea[data-empty="true"]::before { content: attr(data-placeholder); color: var(--et-muted); pointer-events: none; } html, body { height: 100%; margin: 0; } body.et-forum-app { background-color: var(--et-page); } /* * The phone frame clips its contents but must never scroll itself — the inner *
is the only scroller. With plain overflow:hidden the * frame is still a scroll container, so focusing an input inside a bottom sheet * that slides up from below (e.g. Forgot password) made the browser scroll the * frame to reach the off-screen input — dragging every bottom-anchored hidden * sheet up into view. overflow:clip is not a scroll container, so it can't be * scrolled by focus, anchors, or script. The ID selector outranks Tailwind's * .overflow-hidden utility, so no !important is needed. */ #et-forum-app { overflow: clip; } /* Screen reader skip link */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #fff; clip: auto !important; clip-path: none; color: #2a241d; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 0.5rem; line-height: normal; padding: 0.75rem 1rem; text-decoration: none; top: 0.5rem; width: auto; z-index: 100000; } /* Hide WP admin bar push if present — keep shell height stable */ body.admin-bar.et-forum-app { min-height: calc(100% - 32px); } @media screen and (max-width: 782px) { body.admin-bar.et-forum-app { min-height: calc(100% - 46px); } } /* Slick-powered category chip rows (board tabs, post-to picker) — horizontal scroll, no wrap */ .et-chip-slider .slick-list { padding: 2px 0; } .et-chip-slider .slick-track { display: flex; align-items: center; } .et-chip-slider .slick-slide { height: auto; margin-right: 8px; } .et-chip-slider.slick-initialized { display: block; } /* Reels — TikTok-style vertical snap-scroll video feed */ .et-reels-scroll { scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ } .et-reels-scroll::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } .et-reel-slide { scroll-snap-align: start; scroll-snap-stop: always; height: 100%; width: 100%; position: relative; display: flex; flex-shrink: 0; } .et-reel-slide video, .et-reel-slide .plyr { width: 100%; height: 100%; } /* * Reel slide stacking order, bottom to top. Every layer needs an explicit * z-index: the Plyr wrapper is a positioned element, so anything above it that * relies on z-index:auto (the caption/actions overlay) would otherwise be * painted *under* the video once Plyr wraps it. * * 0 .et-reel-backdrop blurred poster fill * 1 .plyr the video itself * 2 .et-reel-overlay author, caption, like/comment/save/share rail * 24 .et-reel-progress scrub bar * 25 .et-reel-mute-btn sound toggle */ .et-reel-slide .plyr { position: relative; z-index: 1; } .et-reel-slide .et-reel-overlay { z-index: 2; } /* Plyr paints its wrapper black by default, which would hide the blurred backdrop. */ .et-reel-slide .plyr, .et-reel-slide .plyr__video-wrapper { background: transparent; } .et-reel-slide .plyr__video-wrapper { height: 100%; } /* * Fit mode is decided per clip from its intrinsic dimensions — applyReelFit() * in assets/js/forum.js adds one of these two classes on loadedmetadata. * `cover` is the pre-metadata default because reels are overwhelmingly * portrait: guessing `contain` made the common case flash black bars for a * frame before the class landed. */ .et-reel-slide video { object-fit: cover; } .et-reel-slide.et-reel-fit-cover video { object-fit: cover; } .et-reel-slide.et-reel-fit-contain video { object-fit: contain; } /* * Blurred poster fill behind letterboxed (landscape/square) reels, the way * YouTube Shorts backs a non-vertical upload. Hidden for portrait clips, which * already cover the slide edge to edge. */ .et-reel-backdrop { position: absolute; inset: 0; z-index: 0; background-color: #000; background-position: center; background-size: cover; filter: blur(28px) brightness(0.55); transform: scale(1.15); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .et-reel-slide.et-reel-fit-contain .et-reel-backdrop { opacity: 1; } /* Reels run without Plyr's control bar — the mute button and scrub bar replace it. */ .et-reel-slide .plyr__controls, .et-reel-slide .plyr__control--overlaid { display: none !important; } /* Sound toggle, pinned top right over the video (offset for the notch/status bar). */ .et-reel-mute-btn { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 12px; z-index: 25; width: 38px; height: 38px; border: 0; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); cursor: pointer; transition: background-color 0.2s ease; } .et-reel-mute-btn:hover { background-color: rgba(0, 0, 0, 0.65); } /* Two classes so it beats the display:flex above regardless of stylesheet order. */ .et-reel-mute-btn.hidden { display: none; } /* * Scrub bar along the bottom of the reel. --et-reel-nav-h is measured off the * real bottom nav in openReelsScreen() so the bar always clears it. The 14px * of vertical padding is hit area for dragging, not visual weight — only the * inner track is painted. */ .et-reel-progress { position: absolute; left: 0; right: 0; bottom: var(--et-reel-nav-h, 58px); z-index: 24; padding: 14px 12px; cursor: pointer; touch-action: none; /* let a horizontal drag scrub instead of scroll-snapping the feed */ } .et-reel-progress-track { position: relative; height: 3px; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.3); transition: height 0.15s ease; } .et-reel-progress.is-scrubbing .et-reel-progress-track { height: 6px; } .et-reel-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9999px; background-color: #fff; } /* * Reel caption — clamped to 3 lines, with a "See more" that expands it into a * scrollable block capped at 38% of the slide so a long post can never bury the * video or push the action rail off screen. */ .et-reel-caption-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Clipped text is itself a tap target for expanding (see the .et-reel-caption-text click handler); once expanded it reverts to a normal scrollable block. */ .et-reel-caption.is-truncated .et-reel-caption-text { cursor: pointer; } .et-reel-caption.is-expanded .et-reel-caption-text { display: block; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; /* keep scroll-to-end from snapping the reel feed */ scrollbar-width: none; padding-right: 2px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%); } .et-reel-caption.is-expanded .et-reel-caption-text::-webkit-scrollbar { display: none; } /* Only shown once the text is measured as actually clipped (or once expanded, so there is always a way back). */ .et-reel-caption-toggle { display: none; margin-top: 2px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.85); font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); cursor: pointer; } .et-reel-caption.is-truncated .et-reel-caption-toggle, .et-reel-caption.is-expanded .et-reel-caption-toggle { display: block; } /* * Deep-linked comment flash — a notification tap scrolls to its comment and * runs this once so the eye lands on the right row. Fades out on its own; the * class is stripped by JS after the animation. */ .et-comment-flash { animation: et-comment-flash 2.4s ease-out 1; border-radius: 12px; } @keyframes et-comment-flash { 0%, 55% { background-color: var(--et-brand-light); box-shadow: 0 0 0 6px var(--et-brand-light); } 100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; } } @media (prefers-reduced-motion: reduce) { .et-comment-flash { animation-duration: 0.01s; background-color: var(--et-brand-light); } } /* Reply context bar — shown as flex when a reply is in progress */ .et-reply-context.flex { display: flex; } /* Comment textarea — hide scrollbar in all browsers */ .et-comment-textarea { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ } .et-comment-textarea::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } /* * "Continue with Google" button on the auth modal. Google's brand guidance is * a light and a dark variant; the forum theme flips on [data-theme="dark"] on * , so both are defined against the theme tokens rather than prefers-*. */ .et-social-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--et-muted); font-size: 12px; font-weight: 700; } .et-social-divider::before, .et-social-divider::after { content: ""; flex: 1; height: 1px; background: var(--et-border); } .et-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border-radius: 12px; border: 1px solid #dadce0; background: #ffffff; color: #3c4043; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease; } .et-google-btn:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60, 64, 67, .16); } .et-google-icon { display: inline-flex; width: 18px; height: 18px; } /* Dark variant — Google's dark button is #131314 with a subtle border. The G logo stays full-colour on both, per Google's guidance. */ [data-theme="dark"] .et-google-btn { background: #131314; border-color: #5f6368; color: #e3e3e3; } [data-theme="dark"] .et-google-btn:hover { background: #1e1f20; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); } /* Bottom nav floats semi-transparent over reel video while Reels is active (class toggled by JS) */ .et-nav-overlay { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(8px); }