/* ═══════════════════════════════════════════════════════════════════════════ RETROMODS — PROFILE THEME SYSTEM (profile-theme.css) All visual properties are driven by CSS custom properties so every aspect of the profile card can be changed from the settings panel without touching any HTML or JS. Defaults reproduce the "blue Web 2.0" look shown in the reference screenshot. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── ROOT DEFAULTS (blue Web 2.0 theme) Every variable here is overridden at runtime by profile-tail.js writing inline CSS variables onto or .w2-profile-card. ───────────────────────────────────────────────────────────────────────── */ :root { /* ── Card shell ── */ --pt-card-bg: #1565c0; --pt-card-radius: 8px; --pt-card-border: rgba(255,255,255,0.18); --pt-card-shadow: 0 6px 24px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.5); --pt-card-max-width: 987px; /* ── Channel header ── */ --pt-header-top: #1e88e5; --pt-header-bottom: #1565c0; --pt-header-border: rgba(0,0,0,0.35); --pt-header-highlight: rgba(255,255,255,0.3); --pt-header-padding: 14px 16px; /* ── Avatar ── */ --pt-avatar-size: 72px; --pt-avatar-radius: 6px; --pt-avatar-border: rgba(255,255,255,0.8); --pt-avatar-border-w: 2px; --pt-avatar-bg: #0d47a1; /* ── Username / meta text ── */ --pt-username-size: 22px; --pt-username-color: #ffffff; --pt-meta-color: rgba(255,255,255,0.75); /* ── Action buttons (Follow / Edit) ── */ --pt-btn-bg-top: #3a3a3a; --pt-btn-bg-bottom: #1a1a1a; --pt-btn-color: #ffffff; --pt-btn-radius: 4px; --pt-btn-border: rgba(0,0,0,0.5); /* ── Message button ── */ --pt-msg-btn-top: #2e7d32; --pt-msg-btn-bottom: #1b5e20; /* ── Block button ── */ --pt-block-btn-top: #7a1a1a; --pt-block-btn-bottom: #4a0a0a; /* ── Tab bar ── */ --pt-tabs-top: #1565c0; --pt-tabs-bottom: #0d47a1; --pt-tabs-border: rgba(0,0,0,0.4); --pt-tab-color: rgba(255,255,255,0.8); --pt-tab-active-color: #ffffff; --pt-tab-active-border: #29b6f6; --pt-tab-hover-bg: rgba(255,255,255,0.1); /* ── Widget header ── */ --pt-widget-hdr-top: #29b6f6; --pt-widget-hdr-bottom: #0277bd; --pt-widget-hdr-color: #ffffff; --pt-widget-hdr-size: 13px; /* ── Widget body ── (clean white panels like the reference) */ --pt-widget-body-bg: #ffffff; --pt-widget-text: #1a1a1a; --pt-widget-divider: rgba(0,0,0,0.10); /* ── Left column ── (transparent so the card's blue shows through) */ --pt-left-col-bg: transparent; --pt-left-col-border: rgba(0,0,0,0.25); /* ── Right column ── (transparent so the card's blue shows through) */ --pt-right-col-bg: transparent; /* ── Info rows (More Info widget) ── (dark text on white body) */ --pt-info-label-color: #1a1a1a; --pt-info-value-color: #444444; /* ── Console list ── (dark text on white body) */ --pt-console-text: #1a1a1a; --pt-console-divider: rgba(0,0,0,0.10); /* ── Post button ── */ --pt-post-btn-top: #29b6f6; --pt-post-btn-bottom: #0277bd; /* ── Video player controls ── */ --pt-player-ctrl-bg: #0d0d0d; --pt-player-progress: #33cc00; --pt-player-thumb: #c8c8c8; /* ── Video meta ── */ --pt-video-title-color: #ffffff; --pt-video-desc-color: rgba(255,255,255,0.6); --pt-video-stats-color: rgba(255,255,255,0.5); /* ── Watch button ── */ --pt-watch-btn-top: #43a047; --pt-watch-btn-bottom: #145214; --pt-watch-btn-color: #ffffff; /* ── Page background ── */ --pt-page-bg: transparent; --pt-scene-padding: 24px 16px 32px; /* ── Font ── */ --pt-font: 'Poppins', sans-serif; --pt-font-size-base: 13px; /* ── Footer ── */ --pt-footer-btn-opacity: 1; --pt-ribbon-opacity: 1; /* ── Misc ── */ --pt-border-radius-sm: 4px; --pt-border-radius-md: 6px; --pt-border-radius-lg: 8px; } /* ───────────────────────────────────────────────────────────────────────── CARD SHELL — fills the full main-content width, no centering margin ───────────────────────────────────────────────────────────────────────── */ .w2-profile-card { position: relative; z-index: 1; /* Centered card at the editable max width (default 987px) */ max-width: var(--pt-card-max-width, 987px) !important; width: 100% !important; margin: 0 auto !important; border-radius: var(--pt-card-radius, 8px) !important; background: var(--pt-card-bg) !important; box-shadow: var(--pt-card-shadow) !important; border: none !important; border-top: 1px solid var(--pt-card-border) !important; overflow: hidden; font-family: var(--pt-font) !important; font-size: var(--pt-font-size-base) !important; } /* ───────────────────────────────────────────────────────────────────────── CHANNEL HEADER ───────────────────────────────────────────────────────────────────────── */ .w2-channel-header { display: grid !important; grid-template-columns: var(--pt-avatar-size) 1fr auto !important; gap: 12px !important; align-items: center !important; padding: var(--pt-header-padding) !important; background: linear-gradient( to bottom, var(--pt-header-top) 0%, var(--pt-header-bottom) 100% ) !important; border-bottom: 2px solid var(--pt-header-border) !important; border-radius: 0 !important; box-shadow: inset 0 1px 0 var(--pt-header-highlight) !important; } /* ───────────────────────────────────────────────────────────────────────── AVATAR ───────────────────────────────────────────────────────────────────────── */ .w2-avatar { width: var(--pt-avatar-size) !important; height: var(--pt-avatar-size) !important; border-radius: var(--pt-avatar-radius) !important; border: var(--pt-avatar-border-w) solid var(--pt-avatar-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4) !important; overflow: hidden !important; flex-shrink: 0 !important; background: var(--pt-avatar-bg) !important; } .w2-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ───────────────────────────────────────────────────────────────────────── USERNAME + META ───────────────────────────────────────────────────────────────────────── */ .w2-head-copy h2 { margin: 0 0 2px !important; font-size: var(--pt-username-size) !important; font-weight: bold !important; color: var(--pt-username-color) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important; letter-spacing: 0.3px !important; } .w2-head-copy .channel-meta { font-size: 12px !important; color: var(--pt-meta-color) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; } /* ───────────────────────────────────────────────────────────────────────── ACTION BUTTONS ───────────────────────────────────────────────────────────────────────── */ .w2-profile-actions { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; justify-content: flex-end !important; } .w2-action-btn { padding: 6px 14px !important; border-radius: var(--pt-btn-radius) !important; font-size: 12px !important; font-weight: bold !important; cursor: pointer !important; border: 1px solid var(--pt-btn-border) !important; background: linear-gradient(to bottom, var(--pt-btn-bg-top) 0%, var(--pt-btn-bg-bottom) 100%) !important; color: var(--pt-btn-color) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 3px rgba(0,0,0,0.5) !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.6) !important; transition: filter 0.15s !important; } .w2-action-btn:hover { filter: brightness(1.15) !important; } .w2-msg-btn { background: linear-gradient(to bottom, var(--pt-msg-btn-top) 0%, var(--pt-msg-btn-bottom) 100%) !important; } /* Block button keeps its own override from inline style but we expose the variable */ #block-profile-btn.w2-action-btn { background: linear-gradient(to bottom, var(--pt-block-btn-top) 0%, var(--pt-block-btn-bottom) 100%) !important; color: #ffcccc !important; } /* ───────────────────────────────────────────────────────────────────────── TAB BAR ───────────────────────────────────────────────────────────────────────── */ .w2-channel-tabs { display: flex !important; flex-wrap: wrap !important; background: linear-gradient( to bottom, var(--pt-tabs-top) 0%, var(--pt-tabs-bottom) 100% ) !important; border-bottom: 2px solid var(--pt-tabs-border) !important; margin: 0 !important; border-radius: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important; } .w2-channel-tabs a { display: flex !important; align-items: center !important; padding: 9px 16px !important; font-size: 13px !important; font-weight: bold !important; color: var(--pt-tab-color) !important; text-decoration: none !important; border-right: 1px solid rgba(0,0,0,0.25) !important; border-left: 1px solid rgba(255,255,255,0.06) !important; text-shadow: 0 -1px 0 rgba(0,0,0,0.5) !important; transition: background 0.15s, color 0.15s !important; white-space: nowrap !important; } .w2-channel-tabs a:hover { background: var(--pt-tab-hover-bg) !important; color: var(--pt-tab-active-color) !important; } .w2-channel-tabs a.active { background: linear-gradient( to bottom, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.15) 100% ) !important; color: var(--pt-tab-active-color) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important; border-bottom: 2px solid var(--pt-tab-active-border) !important; } /* ───────────────────────────────────────────────────────────────────────── HOME GRID ───────────────────────────────────────────────────────────────────────── */ .w2-home-grid { display: grid !important; grid-template-columns: 240px 1fr !important; gap: 0 !important; align-items: start !important; margin: 0 !important; background: transparent !important; } .w2-left-col { display: flex !important; flex-direction: column !important; gap: 0 !important; border-right: 1px solid var(--pt-left-col-border) !important; background: var(--pt-left-col-bg) !important; } .w2-right-col { display: flex !important; flex-direction: column !important; gap: 0 !important; background: var(--pt-right-col-bg) !important; } /* ───────────────────────────────────────────────────────────────────────── WIDGETS ───────────────────────────────────────────────────────────────────────── */ .w2-widget { border: none !important; border-radius: 0 !important; border-bottom: 1px solid rgba(0,0,0,0.25) !important; background: var(--pt-widget-body-bg) !important; box-shadow: none !important; overflow: visible !important; } .w2-widget:last-child { border-bottom: none !important; } /* Widget header */ .w2-widget-header { margin: 0 !important; padding: 7px 12px !important; font-size: var(--pt-widget-hdr-size) !important; font-weight: bold !important; color: var(--pt-widget-hdr-color) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important; letter-spacing: 0.2px !important; background: linear-gradient( to bottom, var(--pt-widget-hdr-top) 0%, var(--pt-widget-hdr-bottom) 100% ) !important; border-bottom: 1px solid rgba(0,0,0,0.4) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3) !important; } /* Widget body text */ .w2-widget-body p, .w2-widget .yt-box p, .profile-page .w2-widget p { padding: 8px 12px !important; margin: 0 !important; font-size: var(--pt-font-size-base) !important; color: var(--pt-widget-text) !important; line-height: 1.5 !important; border-top: 1px solid var(--pt-widget-divider) !important; } .w2-widget-body p:first-child, .w2-widget .yt-box p:first-child, .profile-page .w2-widget p:first-child { border-top: none !important; } /* ───────────────────────────────────────────────────────────────────────── MORE INFO ROWS ───────────────────────────────────────────────────────────────────────── */ .w2-more-info-body { padding: 4px 0; } .w2-info-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--pt-widget-divider); font-size: 12px; color: var(--pt-info-label-color); line-height: 1.4; } .w2-info-row:last-child { border-bottom: none; } .w2-info-label { flex: 1; font-size: 12px; color: var(--pt-info-label-color); } .w2-info-value { font-size: 12px; color: var(--pt-info-value-color); } /* ───────────────────────────────────────────────────────────────────────── CONSOLE LIST ───────────────────────────────────────────────────────────────────────── */ .w2-console-list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .w2-console-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; border-top: 1px solid var(--pt-console-divider) !important; color: var(--pt-console-text) !important; font-size: 13px !important; } .w2-console-item:first-child { border-top: none !important; } .w2-console-img { width: 40px !important; height: 30px !important; object-fit: contain !important; flex-shrink: 0 !important; border-radius: 2px !important; } .w2-console-img-ph { display: inline-block !important; background: rgba(255,255,255,0.1) !important; border-radius: 2px !important; } .w2-console-name { font-size: 13px; color: var(--pt-console-text); } /* ───────────────────────────────────────────────────────────────────────── POST BUTTON ───────────────────────────────────────────────────────────────────────── */ .w2-post-btn { display: inline-block; padding: 6px 16px; border-radius: var(--pt-btn-radius); font-size: 12px; font-weight: bold; cursor: pointer; border: 1px solid rgba(0,0,0,0.4); background: linear-gradient( to bottom, var(--pt-post-btn-top) 0%, var(--pt-post-btn-bottom) 100% ); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.4); text-shadow: 0 -1px 0 rgba(0,0,0,0.4); } .w2-post-btn:hover { filter: brightness(1.1); } /* ───────────────────────────────────────────────────────────────────────── FLASH-STYLE VIDEO PLAYER ───────────────────────────────────────────────────────────────────────── */ .w2-player-widget { border-bottom: 1px solid rgba(0,0,0,0.3) !important; } .w2-player-body { padding: 0 !important; } .w2-video-player { position: relative; width: 100%; background: #000; user-select: none; } .w2-video-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a0000; overflow: hidden; } .w2-video-el { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } .w2-video-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); transition: opacity 0.2s; cursor: pointer; } .w2-big-play-btn { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(to bottom, rgba(60,60,60,0.92) 0%, rgba(20,20,20,0.92) 100%); border: 2px solid rgba(255,255,255,0.35); box-shadow: 0 2px 12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.1s, background 0.15s; } .w2-big-play-btn:hover { transform: scale(1.08); background: linear-gradient(to bottom, rgba(80,80,80,0.95) 0%, rgba(30,30,30,0.95) 100%); } .w2-big-play-btn svg { width: 22px; height: 22px; margin-left: 3px; } .w2-flash-controls { background: linear-gradient(to bottom, #1a1a1a 0%, var(--pt-player-ctrl-bg) 100%); border-top: 1px solid rgba(255,255,255,0.08); padding: 0; } .w2-progress-track { position: relative; width: 100%; height: 6px; background: #1c1c1c; border-top: 1px solid #000; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; overflow: visible; } .w2-progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(to bottom, color-mix(in srgb, var(--pt-player-progress) 80%, #fff 20%) 0%, var(--pt-player-progress) 50%, color-mix(in srgb, var(--pt-player-progress) 60%, #000 40%) 100%); box-shadow: 0 0 4px color-mix(in srgb, var(--pt-player-progress) 70%, transparent 30%); pointer-events: none; transition: width 0.1s linear; } .w2-progress-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(to bottom, #e0e0e0 0%, #a0a0a0 100%); border: 1px solid rgba(0,0,0,0.6); box-shadow: 0 1px 4px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.5); pointer-events: none; transition: left 0.1s linear; } .w2-ctrl-row { display: flex; align-items: center; gap: 2px; padding: 4px 6px; height: 34px; } .w2-ctrl-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 3px; background: transparent; color: var(--pt-player-thumb); cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.12s, color 0.12s; } .w2-ctrl-btn svg { width: 14px; height: 14px; display: block; } .w2-ctrl-btn:hover { background: linear-gradient(to bottom, #3a3a3a 0%, #222 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .w2-ctrl-btn:active { background: #111; box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); } .w2-vol-slider-wrap { display: flex; align-items: center; width: 60px; flex-shrink: 0; } .w2-vol-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--pt-player-progress) 0%, var(--pt-player-progress) var(--range-progress, 100%), #333 var(--range-progress, 100%), #333 100%); cursor: pointer; outline: none; border: none; } .w2-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(to bottom, #e0e0e0 0%, #a0a0a0 100%); border: 1px solid rgba(0,0,0,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); cursor: pointer; } .w2-vol-slider::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(to bottom, #e0e0e0 0%, #a0a0a0 100%); border: 1px solid rgba(0,0,0,0.5); cursor: pointer; } .w2-time-display { font-size: 11px; font-family: 'Courier New', Courier, monospace; color: #aaa; white-space: nowrap; padding: 0 4px; flex-shrink: 0; } .w2-ctrl-spacer { flex: 1; } /* ───────────────────────────────────────────────────────────────────────── VIDEO META ───────────────────────────────────────────────────────────────────────── */ .w2-video-meta { padding: 10px 12px 12px; background: #ffffff; border-top: 1px solid rgba(0,0,0,0.12); } .w2-video-title { margin: 0 0 4px; font-size: 18px; font-weight: normal; color: #111; line-height: 1.3; } .w2-video-desc { margin: 0 0 6px; font-size: 13px; color: #555; line-height: 1.4; } .w2-video-stats { display: flex; gap: 12px; font-size: 12px; color: #888; margin-bottom: 8px; } .w2-video-reactions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .w2-react-like, .w2-react-dislike, .w2-react-views { font-size: 12px; color: var(--pt-widget-text); } .w2-watch-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 14px; border-radius: var(--pt-btn-radius); font-size: 12px; font-weight: bold; text-decoration: none; color: var(--pt-watch-btn-color); background: linear-gradient(to bottom, var(--pt-watch-btn-top) 0%, var(--pt-watch-btn-bottom) 100%); border: 1px solid rgba(0,0,0,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 0 rgba(0,0,0,0.5); transition: filter 0.15s; } .w2-watch-btn:hover { filter: brightness(1.12); } /* ───────────────────────────────────────────────────────────────────────── BADGE SHAPES ───────────────────────────────────────────────────────────────────────── */ .w2-badge-triangle { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; font-size: 11px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.7); background: linear-gradient(135deg, #546e7a 0%, #263238 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); flex-shrink: 0; } .w2-badge-star { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; font-size: 12px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.7); background: radial-gradient(circle, #f9a825 0%, #e65100 100%); clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); flex-shrink: 0; } /* ───────────────────────────────────────────────────────────────────────── SCENE WRAPPER — centers a fixed-width card on the site's striped page background (the card itself is the only blue element). ───────────────────────────────────────────────────────────────────────── */ /* Keep the site's normal (striped) page background — DON'T flood it blue. Only remove the dark/green fixed fade overlay behind the card. */ body:has(.profile-page)::before, body.profile-bg-fade:has(.profile-page)::before { display: none !important; } /* Shell + main are transparent so the page background shows through. */ .site-shell:has(.profile-page), .main-content.profile-page, body.profile-theme-active .main-content.profile-page { background: transparent !important; background-image: none !important; } /* Main content: a centered column that holds the card, padded top so it floats below the header and reaches the footer at the bottom. */ .main-content.profile-page { max-width: 1180px !important; width: 100% !important; margin: 0 auto !important; padding: 40px 16px 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; box-sizing: border-box !important; } .profile-scene-wrapper { position: relative; width: 100% !important; flex: 1 1 auto !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: center !important; } /* The card respects its editable max-width (987px) and is centered. It grows down to meet the footer (no dark gap). */ .profile-scene-wrapper > .w2-profile-card { flex: 1 1 auto !important; width: 100% !important; max-width: var(--pt-card-max-width, 987px) !important; margin: 0 auto !important; } /* No gap between the card's bottom and the footer. */ .main-content.profile-page, .profile-scene-wrapper, .profile-scene-wrapper > .w2-profile-card { margin-bottom: 0 !important; } .site-footer { margin-top: 0 !important; } .profile-bg-decorations { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } /* ───────────────────────────────────────────────────────────────────────── CHANNEL LAYOUT + TABS — remove margin-top that styles.css adds ───────────────────────────────────────────────────────────────────────── */ .profile-page .channel-layout { margin-top: 0 !important; } /* The old profile styles add margin-top:15px to .channel-tabs — kill it */ .profile-page .w2-channel-tabs, .w2-channel-tabs { margin-top: 0 !important; } /* Kill any ::before fade overlay on the profile main-content */ .main-content.profile-page::before { display: none !important; } /* ───────────────────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .w2-home-grid { grid-template-columns: 1fr !important; } .w2-left-col { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.3) !important; } .w2-channel-header { grid-template-columns: 60px 1fr !important; } .w2-profile-actions { grid-column: 1 / -1 !important; } /* Keep zero padding on mobile too */ .profile-scene-wrapper { padding: 0 !important; } } /* ───────────────────────────────────────────────────────────────────────── PROFILE SETTINGS MODAL — EXTENDED THEME EDITOR The extra controls added to the modal write back to these CSS variables. ───────────────────────────────────────────────────────────────────────── */ /* Collapsible section toggle */ .pt-section-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 8px 0; border-bottom: 1px solid #333; margin-bottom: 14px; } .pt-section-toggle h4 { margin: 0 !important; font-size: 15px !important; color: #fff !important; } .pt-section-toggle .pt-chevron { width: 18px; height: 18px; fill: #aaa; transition: transform 0.2s; } .pt-section-toggle.collapsed .pt-chevron { transform: rotate(-90deg); } .pt-section-body { overflow: hidden; transition: max-height 0.25s ease; } .pt-section-body.collapsed { max-height: 0 !important; } /* Color grid */ .pt-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; margin-bottom: 16px; } .pt-color-item { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; color: #aaa; text-align: center; cursor: pointer; } .pt-color-swatch { width: 48px; height: 48px; border: 1px solid #000; box-shadow: 0 2px 5px rgba(0,0,0,0.5); cursor: pointer; border-radius: 3px; transition: transform 0.1s; } .pt-color-swatch:hover { transform: scale(1.08); } /* Slider rows */ .pt-slider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .pt-slider-item { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #bbb; } .pt-slider-item input[type="range"] { width: 100%; accent-color: #29b6f6; } /* Select rows */ .pt-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .pt-select-item { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #bbb; } .pt-select-item select { background: #2a2a2a; border: 1px solid #444; color: #eee; padding: 6px 8px; border-radius: 3px; font-size: 12px; cursor: pointer; } /* Text input rows */ .pt-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } .pt-text-item { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #bbb; } .pt-text-item input[type="text"] { background: #2a2a2a; border: 1px solid #444; color: #eee; padding: 6px 8px; border-radius: 3px; font-size: 12px; width: 100%; box-sizing: border-box; } /* Live preview strip */ .pt-preview-strip { height: 32px; border-radius: 4px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(255,255,255,0.7); font-weight: bold; letter-spacing: 1px; transition: background 0.2s; } /* Reset button */ .pt-reset-btn { background: #333; border: 1px solid #555; color: #ccc; padding: 6px 14px; border-radius: 3px; font-size: 12px; cursor: pointer; transition: background 0.15s; } .pt-reset-btn:hover { background: #444; color: #fff; }