/* ============================================================ YouTubeLoop.net — 2026 modern skin Overlay on top of Bootstrap 3 markup. Purely visual: no JS hooks or DOM structure are touched. Loaded LAST in , so it wins over the Bootstrap bundle on equal specificity. ============================================================ */ :root { /* Brand */ --brand: #f2542d; --brand-2: #ff7a45; --brand-ink: #c8431a; --grad: linear-gradient(135deg, #ff7a45 0%, #f2542d 55%, #e5402a 100%); /* Neutrals */ --bg: #f7f8fa; --surface: #ffffff; --surface-2: #f2f4f7; --text: #191c24; --muted: #656d7a; --border: #e6e9ef; --border-2: #d7dbe3; /* Shape */ --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --shadow: 0 6px 20px rgba(16,24,40,.09); --shadow-lg: 0 18px 48px rgba(16,24,40,.16); --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; --ease: cubic-bezier(.4, 0, .2, 1); } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--text); background-color: var(--bg); background-image: radial-gradient(1100px 520px at 8% -8%, rgba(255,122,69,.12), transparent 60%), radial-gradient(1000px 520px at 100% 0%, rgba(64,120,255,.08), transparent 55%); background-attachment: fixed; background-repeat: no-repeat; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } h1, h2, h3, h4, h5, .navbar-brand span { letter-spacing: -0.02em; font-weight: 700; } a { color: var(--brand); transition: color .15s var(--ease); } a:hover, a:focus { color: var(--brand-ink); text-decoration: none; } ::selection { background: rgba(242,84,45,.22); } :focus-visible { outline: 3px solid rgba(242,84,45,.45); outline-offset: 2px; } /* ---------- Navbar: glass ---------- */ .navbar-default, .navbar-default.navbar-fixed-top { background-color: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border: none; border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 6px 24px rgba(16,24,40,.05); } .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover { color: var(--text); } .navbar-brand span { color: var(--text); } .navbar-brand .fa-repeat { color: var(--brand); } /* ---------- Hero search (input-group pill) ---------- */ .navbar-form .input-group { box-shadow: var(--shadow); border-radius: var(--r-pill); } .navbar-form .form-control, #impSrch { height: 50px; border: 1.5px solid var(--border-2); border-right: none; border-radius: var(--r-pill) 0 0 var(--r-pill); padding: 0 22px; font-size: 15px; color: var(--text); background: var(--surface); box-shadow: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } #impSrch::placeholder { color: #9aa1ad; } .navbar-form .input-group:focus-within { box-shadow: var(--shadow), 0 0 0 4px rgba(242,84,45,.16); } .navbar-form .input-group:focus-within .form-control { border-color: var(--brand); } /* "Go loop!" button */ .navbar-form .input-group-btn > .btn, #btnGo { height: 50px; border: none; border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--grad); color: #fff; font-weight: 600; padding: 0 28px; letter-spacing: .01em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); transition: filter .15s var(--ease), transform .1s var(--ease); } #btnGo:hover, #btnGo:focus { color: #fff; filter: brightness(1.05) saturate(1.05); } #btnGo:active { transform: translateY(1px); } #btnGo i { font-style: italic; opacity: .95; } /* ---------- Buttons ---------- */ .btn { border-radius: var(--r-sm); font-weight: 600; transition: transform .1s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease); } .btn-default { background: var(--surface); border: 1.5px solid var(--border-2); color: var(--text); box-shadow: var(--shadow-sm); } .btn-default:hover, .btn-default:focus { background: var(--surface); border-color: var(--brand); color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); } .btn-default:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-primary { background: var(--grad); border: none; box-shadow: var(--shadow-sm); } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.05); } .btn-success { background: linear-gradient(135deg, #34d399, #10b981); border: none; } /* Turn segmented Bootstrap groups into spaced modern chips */ .btn-group > .btn { border-radius: var(--r-sm) !important; } .btn-group > .btn + .btn { margin-left: 6px; } .btn-group-wrap .btn-group { margin: 4px 6px; } /* Player toolbar labels ("Playlist", "Link", "Auto") */ #dvPlayerBar .cl-white, .cl-white { color: var(--muted) !important; font-weight: 600; } /* ---------- Search results / media rows ---------- */ #dvSrchRes .title { font-weight: 700; letter-spacing: -0.02em; margin: 26px 0 18px; } .media { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; margin-top: 12px; box-shadow: var(--shadow-sm); transition: transform .12s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); } .oneVideo.media:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2); } .media img { border-radius: 10px; } .media img + span.badge { background: rgba(16,18,25,.82); border-radius: 8px; } /* ---------- Player rows ---------- */ .playerRow { margin-bottom: 44px; } .ytContaner iframe { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); } /* ---------- Bootstrap-slider (loop range) ---------- */ .slider-track { background: var(--surface-2); box-shadow: none; border-radius: var(--r-pill); height: 8px; } .slider-selection { background: var(--grad); box-shadow: none; border-radius: var(--r-pill); } .slider-handle { background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 6px rgba(16,24,40,.22); opacity: 1; width: 20px; height: 20px; transition: transform .1s var(--ease), box-shadow .15s var(--ease); } .slider-handle:hover { transform: scale(1.12); box-shadow: 0 3px 10px rgba(242,84,45,.4); } /* ---------- Share link input ---------- */ .share-link-inp input { background: var(--grad); border-radius: var(--r-pill); height: 46px; line-height: 46px; border: none; box-shadow: var(--shadow); } /* ---------- Cards (browse playlists, best loops) ---------- */ .pl-card, .card, .thumbnail { border-radius: var(--r) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm); transition: transform .14s var(--ease), box-shadow .18s var(--ease), border-color .15s var(--ease); overflow: hidden; background: var(--surface); } .pl-card:hover, .thumbnail:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-2) !important; } /* Landing / article call-to-action buttons */ .art .cta { background: var(--grad) !important; border-radius: var(--r-pill) !important; box-shadow: var(--shadow); transition: filter .15s var(--ease), transform .1s var(--ease); } .art .cta:hover { filter: brightness(1.05); transform: translateY(-1px); } /* ---------- Modal ---------- */ .modal-content { border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--border); } .modal-footer { border-top: 1px solid var(--border); } /* ---------- Panels / wells ---------- */ .panel, .well { border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } /* ---------- Footer: modern dark ---------- */ #footer { background: #0f1218 !important; color: #9aa2b1; margin-top: 48px; padding: 34px 0; border-top: 1px solid rgba(255,255,255,.06); } #footer a { color: #ffbfa6 !important; font-weight: 500; } #footer a:hover { color: #fff !important; } #footer i { color: var(--brand-2); } #footer p { margin: 6px 0; } /* ---------- Responsive hardening ---------- */ /* Kill horizontal scroll on phones (slider tooltip + Bootstrap negative margins overflow the viewport otherwise). */ html, body { max-width: 100%; overflow-x: hidden; } @media (max-width: 767px) { /* main.css bleeds the footer with margin:-20px → horizontal scroll. Make it a clean full-width bar with inner padding instead. */ #footer { margin-left: 0 !important; margin-right: 0 !important; padding: 28px 16px !important; } /* 16px input font stops iOS from auto-zooming on focus */ #impSrch, .navbar-form .form-control { font-size: 16px; } /* Hero search + CTA stay comfortably tappable */ #impSrch, .navbar-form .input-group-btn > .btn, #btnGo { height: 48px; } /* Player toolbar chips wrap neatly instead of stretching */ .btn-group-wrap { display: flex; flex-wrap: wrap; justify-content: center; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } /* ============================================================ Dark mode (auto) — covers the main surfaces. Kept conservative so hardcoded Bootstrap whites don't clash. ============================================================ */ @media (prefers-color-scheme: dark) { :root { --bg: #0d0f14; --surface: #161a22; --surface-2: #1e232d; --text: #e8eaef; --muted: #9aa2b1; --border: #262c37; --border-2: #333a47; } body { background-image: radial-gradient(1100px 520px at 8% -8%, rgba(255,122,69,.10), transparent 60%), radial-gradient(1000px 520px at 100% 0%, rgba(64,120,255,.08), transparent 55%); } .navbar-default, .navbar-default.navbar-fixed-top { background-color: rgba(18,21,28,.72); border-bottom: 1px solid var(--border); } .navbar-default .navbar-brand, .navbar-brand span { color: var(--text); } #impSrch, .navbar-form .form-control { background: var(--surface); color: var(--text); border-color: var(--border-2); } #impSrch::placeholder { color: #6b7280; } .btn-default { background: var(--surface); color: var(--text); border-color: var(--border-2); } .btn-default:hover, .btn-default:focus { background: var(--surface-2); } .media, .pl-card, .card, .thumbnail, .panel, .well { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); } .slider-track { background: var(--surface-2); } .modal-content { background: var(--surface); color: var(--text); } .modal-header, .modal-footer { border-color: var(--border); } /* keep the dark footer readable (it's already dark) */ #footer { background: #090b0f !important; } }