/* ═══════════════════════════════════════════════════════════════════════ styles.css — Media Toolkit, Tool 15 ShivamNath.com design system ═══════════════════════════════════════════════════════════════════════ */ /* ─── Design Tokens ──────────────────────────────────────────────────── */ :root { --accent: #c07b3a; --accent-muted: #c07b3a18; --accent-hover: #a06028; --pico-primary: #c07b3a; --pico-primary-hover: #a06028; --font-mono: 'DM Mono', monospace; --font-body: 'Outfit', sans-serif; --radius: 10px; } /* ─── Base — lock viewport, no page scroll ───────────────────────────── */ /* overflow: clip instead of overflow: hidden on the root. WHY: `overflow: hidden` on / has two problems on mobile: 1. It prevents the browser from resizing the viewport when the on-screen keyboard appears (iOS Safari, Android Chrome), which can push content off-screen with no way to scroll back. 2. It suppresses scroll chaining, breaking pull-to-refresh and momentum scrolling on some Android WebViews. `overflow: clip` gives us the same "no page scroll" visual behaviour but does NOT establish a scroll container, so the browser keeps full control of the viewport geometry. It is supported in all browsers that support FFmpeg.wasm (Chrome 90+, Firefox 102+, Safari 16+). The `overflow-x: clip` on body below handles any accidental horizontal overflow from tool controls without touching vertical scroll behaviour. */ html { height: 100%; overflow: clip; font-family: var(--font-body); } body { height: 100%; overflow-x: clip; /* block horizontal bleed; allow vertical if needed */ font-family: var(--font-body); } body { display: flex; flex-direction: column; } /* ─── Site Header ────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.5rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: color-mix(in srgb, var(--pico-background-color) 82%, transparent); border-bottom: 1px solid var(--pico-muted-border-color); } .site-logo { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--pico-color); letter-spacing: -0.01em; } .site-logo .tld { color: var(--accent); } .theme-btn { font-family: var(--font-mono); font-size: 0.75rem; background: transparent; border: 1px solid var(--pico-muted-border-color); border-radius: 6px; padding: 0.28rem 0.65rem; cursor: pointer; color: var(--pico-muted-color); transition: border-color 0.18s, color 0.18s; line-height: 1.4; } .theme-btn:hover { border-color: var(--accent); color: var(--accent); } /* ─── Main ───────────────────────────────────────────────────────────── */ /* overflow: auto instead of overflow: hidden. On very small viewports (< 480 px tall — compact Android phones, some foldables) the tool content may exceed the available height. `hidden` silently clips it with no recovery; `auto` lets the user scroll to reach controls that would otherwise be inaccessible. On normal viewports the content fits and no scrollbar appears, so the visual result is identical. */ main { flex: 1; overflow: auto; display: flex; flex-direction: column; justify-content: center; padding: 0.75rem 1.5rem 0.5rem; } /* ─── Tool Wrapper ───────────────────────────────────────────────────── */ .tool-wrapper { width: 100%; max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; /* ensure content fits within the viewport minus header */ max-height: calc(100vh - 70px); } /* ─── Tool Eyebrow + H1 ──────────────────────────────────────────────── */ .tool-header { display: flex; flex-direction: column; gap: 0.1rem; flex-shrink: 0; } .tool-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } h1 { font-family: var(--font-body); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; margin: 0; color: var(--pico-color); line-height: 1.15; } /* ─── Tab Bar (segmented control) ────────────────────────────────────── */ .tab-bar { display: flex; border: 1px solid var(--pico-muted-border-color); border-radius: var(--radius); /* overflow: clip clips the child button corners to the border-radius without creating a scroll container (which hidden would do). */ overflow: clip; flex-shrink: 0; } .tab-btn { flex: 1; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; padding: 0.52rem 0.4rem; background: transparent; border: none; border-right: 1px solid var(--pico-muted-border-color); cursor: pointer; color: var(--pico-muted-color); transition: background 0.15s, color 0.15s; white-space: nowrap; letter-spacing: 0.01em; line-height: 1; } .tab-btn:last-child { border-right: none; } .tab-btn.active { background: var(--accent); color: #fff; } .tab-btn:not(.active):hover { background: var(--accent-muted); color: var(--accent); } /* ─── Content Grid ───────────────────────────────────────────────────── */ .content-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0.85rem; flex: 1; min-height: 0; /* critical: allows grid children to shrink */ } /* ─── Left Panel ─────────────────────────────────────────────────────── */ .left-panel { display: flex; flex-direction: column; gap: 0.55rem; min-height: 0; } /* ─── Drop Zone ──────────────────────────────────────────────────────── */ .drop-zone { flex: 1; border: 1.5px dashed var(--pico-muted-border-color); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.18s, background 0.18s; min-height: 0; outline: none; /* we handle focus via box-shadow */ } .drop-zone:hover, .drop-zone:focus-visible { border-color: var(--accent); background: var(--accent-muted); } .drop-zone.drag-over { border-style: solid; border-color: var(--accent); background: var(--accent-muted); } .drop-zone-inner { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.25rem 1rem; text-align: center; /* children stay interactive even though parent handles click */ pointer-events: none; } /* Re-enable pointer events only on the button inside drop zone */ .drop-zone-inner .btn-secondary { pointer-events: all; } .drop-icon { font-size: 1.8rem; line-height: 1; display: block; } .drop-label { font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; color: var(--pico-color); margin: 0; } .drop-sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--pico-muted-color); margin: 0; } /* ─── File Info Bar ──────────────────────────────────────────────────── */ .file-info { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.65rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--radius); flex-shrink: 0; } .file-meta { display: flex; flex-direction: column; gap: 0.05rem; overflow: hidden; } .file-name { font-family: var(--font-mono); font-size: 0.75rem; color: var(--pico-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; display: block; } .file-size { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent); display: block; } /* ─── Right Panel ────────────────────────────────────────────────────── */ .right-panel { display: flex; flex-direction: column; gap: 0.55rem; min-height: 0; } /* ─── Preview Area ───────────────────────────────────────────────────── */ .preview-area { flex: 1; border: 1px solid var(--pico-muted-border-color); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; /* overflow: clip — intentional: constrains the video/GIF to the box. Using clip (not hidden) so the element doesn't accidentally become a scroll container, which would trap touch-scroll on mobile. */ overflow: clip; min-height: 0; /* subtle tinted background */ background: color-mix(in srgb, var(--pico-background-color) 97%, var(--accent)); } .preview-placeholder { font-family: var(--font-mono); font-size: 0.75rem; color: var(--pico-muted-color); margin: 0; user-select: none; } #videoPreview { width: 100%; height: 100%; object-fit: contain; display: block; } #audioPreview { width: 88%; } /* ─── Tool Controls ──────────────────────────────────────────────────── */ .tool-controls { display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; } /* Label above inputs (shared across all control types) */ .ctrl-label { font-family: var(--font-mono); font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pico-muted-color); display: block; margin-bottom: 0.2rem; } /* Select dropdown */ .ctrl-select { font-family: var(--font-mono); font-size: 0.8rem; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 0.38rem 0.6rem; background: var(--pico-background-color); color: var(--pico-color); width: 100%; margin: 0; cursor: pointer; appearance: auto; transition: border-color 0.18s, box-shadow 0.18s; } .ctrl-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); } /* Text / time input */ .ctrl-input { font-family: var(--font-mono); font-size: 0.8rem; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 0.38rem 0.6rem; background: var(--pico-background-color); color: var(--pico-color); width: 100%; margin: 0; box-sizing: border-box; transition: border-color 0.18s, box-shadow 0.18s; } .ctrl-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); } /* Remove number input spinners */ .ctrl-input[type="number"]::-webkit-outer-spin-button, .ctrl-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ctrl-input[type="number"] { -moz-appearance: textfield; } /* Two-column time input row */ .time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } /* Two-column select row */ .select-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0.5rem; } /* ─── Merger File List ────────────────────────────────────────────────── */ .merger-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.28rem; max-height: 90px; overflow-y: auto; } /* Subtle scrollbar */ .merger-list::-webkit-scrollbar { width: 3px; } .merger-list::-webkit-scrollbar-track { background: transparent; } .merger-list::-webkit-scrollbar-thumb { background: var(--pico-muted-border-color); border-radius: 4px; } .merger-item { display: flex; align-items: center; justify-content: space-between; padding: 0.28rem 0.5rem; border: 1px solid var(--pico-muted-border-color); border-radius: 6px; gap: 0.4rem; } .merger-item-name { font-family: var(--font-mono); font-size: 0.7rem; color: var(--pico-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .merger-item-size { font-family: var(--font-mono); font-size: 0.62rem; color: var(--accent); flex-shrink: 0; } .merger-empty { font-family: var(--font-mono); font-size: 0.72rem; color: var(--pico-muted-color); padding: 0.25rem 0; } /* ─── Social Preset Grid ──────────────────────────────────────────────── */ .preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .preset-card { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 0.45rem 0.4rem; cursor: pointer; text-align: center; background: transparent; transition: border-color 0.15s, background 0.15s, transform 0.15s; line-height: 1; } .preset-card:hover { border-color: var(--accent); background: var(--accent-muted); transform: translateY(-1px); } .preset-card.selected { border-color: var(--accent); background: var(--accent-muted); } .preset-name { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--pico-color); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preset-detail { font-family: var(--font-mono); font-size: 0.6rem; color: var(--pico-muted-color); display: block; margin-top: 0.18rem; } .preset-size { font-family: var(--font-mono); font-size: 0.58rem; color: var(--accent); display: block; margin-top: 0.1rem; } /* ─── Buttons ────────────────────────────────────────────────────────── */ /* Primary action */ .btn-primary { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1rem; cursor: pointer; width: 100%; transition: background 0.18s, opacity 0.18s; flex-shrink: 0; } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-primary:disabled { opacity: 0.38; cursor: not-allowed; } /* Secondary / utility */ .btn-secondary { font-family: var(--font-mono); font-size: 0.75rem; background: transparent; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 0.35rem 0.85rem; cursor: pointer; color: var(--pico-muted-color); transition: border-color 0.18s, color 0.18s; } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } /* Ghost (no border, no bg — for close/remove actions) */ .btn-ghost { font-family: var(--font-mono); font-size: 0.68rem; background: transparent; border: none; cursor: pointer; color: var(--pico-muted-color); padding: 0.15rem 0.3rem; border-radius: 4px; transition: color 0.15s; flex-shrink: 0; line-height: 1; } .btn-ghost:hover { color: var(--accent); } /* Full-width secondary (used in merger add-more) */ .btn-secondary-full { font-family: var(--font-mono); font-size: 0.75rem; background: transparent; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 0.38rem 0.85rem; cursor: pointer; color: var(--pico-muted-color); width: 100%; transition: border-color 0.18s, color 0.18s; } .btn-secondary-full:hover { border-color: var(--accent); color: var(--accent); } /* ─── Log Panel ──────────────────────────────────────────────────────── */ .log-panel { flex-shrink: 0; height: 108px; border: 1px solid var(--pico-muted-border-color); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .log-header { display: flex; align-items: center; justify-content: space-between; padding: 0.28rem 0.6rem; border-bottom: 1px solid var(--pico-muted-border-color); flex-shrink: 0; gap: 0.5rem; background: color-mix(in srgb, var(--pico-background-color) 97%, var(--accent)); } .log-title { font-family: var(--font-mono); font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pico-muted-color); user-select: none; } .log-header-right { display: flex; align-items: center; gap: 0.5rem; } .log-progress-wrap { display: flex; align-items: center; } .log-progress-track { width: 90px; height: 3px; background: var(--pico-muted-border-color); border-radius: 2px; overflow: hidden; } .log-progress-bar { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width 0.22s ease; } .log-body { flex: 1; overflow-y: auto; padding: 0.3rem 0.6rem; display: flex; flex-direction: column; gap: 0.06rem; } .log-body::-webkit-scrollbar { width: 3px; } .log-body::-webkit-scrollbar-track { background: transparent; } .log-body::-webkit-scrollbar-thumb { background: var(--pico-muted-border-color); border-radius: 2px; } .log-entry { font-family: var(--font-mono); font-size: 0.63rem; line-height: 1.55; display: block; white-space: pre-wrap; word-break: break-all; } .log-ts { color: var(--pico-muted-color); margin-right: 0.4em; user-select: none; opacity: 0.55; } .log-info { color: var(--pico-muted-color); } .log-success { color: #27ae60; } .log-error { color: #e74c3c; } .log-warn { color: var(--accent); } .log-ffmpeg { color: var(--pico-muted-color); opacity: 0.45; } /* ─── Back Link ──────────────────────────────────────────────────────── */ .back-link { font-family: var(--font-mono); font-size: 0.82rem; color: var(--pico-muted-color); text-decoration: none; align-self: flex-start; flex-shrink: 0; transition: color 0.18s; } .back-link:hover { color: var(--accent); } /* ─── Video Converter — format segmented control ────────────────────── */ /* A smaller sibling of .tab-bar used inline inside the tool controls. Three buttons: MP4 / WebM / GIF. */ .format-seg { display: flex; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; overflow: hidden; } .seg-btn { flex: 1; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; padding: 0.38rem 0.4rem; background: transparent; border: none; border-right: 1px solid var(--pico-muted-border-color); cursor: pointer; color: var(--pico-muted-color); transition: background 0.14s, color 0.14s; line-height: 1; } .seg-btn:last-child { border-right: none; } .seg-btn.active { background: var(--accent); color: #fff; } .seg-btn:not(.active):hover { background: var(--accent-muted); color: var(--accent); } /* ─── GIF notice note ────────────────────────────────────────────────── */ .cvt-note { font-family: var(--font-mono); font-size: 0.63rem; color: var(--accent); margin: 0; opacity: 0.85; line-height: 1.4; } /* ─── Result area (download row) ─────────────────────────────────────── */ .result-area { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.65rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--radius); background: color-mix(in srgb, var(--pico-background-color) 96%, var(--accent)); } /* Download anchor styled as a primary-action button */ .btn-download { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 0.32rem 0.75rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.16s; flex-shrink: 0; } .btn-download:hover { background: var(--accent-hover); color: #fff; } /* Filename / size label next to the download button */ .result-size { font-family: var(--font-mono); font-size: 0.67rem; color: var(--pico-muted-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── GIF preview image (replaces