diff --git a/vidflow.html b/vidflow.html index 4cb5f82..3e991aa 100644 --- a/vidflow.html +++ b/vidflow.html @@ -17,7 +17,7 @@ --accent:#ff2200;--accent2:#00d4ff;--text:#f0f0ff;--dim:#6668a0; --font-d:'Bebas Neue',Impact,'Arial Black',sans-serif; --font-b:'Rajdhani',sans-serif; - --top-h:52px;--bot-h:58px; + --top-h:52px;--bot-h:76px; } html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--font-b);color:var(--text);user-select:none;-webkit-tap-highlight-color:transparent} @@ -51,6 +51,11 @@ html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-famil /* Player */ #pw{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000} #pw-cover{position:absolute;inset:0;z-index:1;background:transparent} +#po-overlay{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;background:rgba(6,6,15,.88)} +.po-msg{text-align:center} +.po-icon{font-size:52px;margin-bottom:12px;opacity:.7} +.po-title{font-family:var(--font-d);font-size:28px;letter-spacing:4px;margin-bottom:8px} +.po-sub{font-size:12px;color:var(--dim);letter-spacing:1px} #pw iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:none;pointer-events:none} /* Overlays */ @@ -112,13 +117,15 @@ html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-famil #pb-thumb{position:absolute;right:-5px;top:-3px;width:10px;height:10px;background:#fff;border-radius:50%;opacity:0;transition:opacity .15s;pointer-events:none} /* Bottom bar */ -#bb{position:absolute;bottom:0;left:0;right:0;height:var(--bot-h);z-index:5;display:flex;align-items:center;padding:0 14px;gap:12px} +#bb{position:absolute;bottom:0;left:0;right:0;height:var(--bot-h);z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:5px 14px;gap:2px} +.bb-top{display:flex;align-items:center;gap:8px;overflow:hidden} +.bb-bot{display:flex;justify-content:center;align-items:center} .np-lbl{font-family:var(--font-d);font-size:12px;letter-spacing:2.5px;color:var(--accent);flex-shrink:0;display:flex;align-items:center;gap:5px;white-space:nowrap} .np-lbl-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;animation:dot-p 1s ease-in-out infinite} .np-wrap{flex:1;overflow:hidden;height:100%;display:flex;align-items:center;position:relative} #np-ticker{white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:.4px;will-change:transform;position:absolute;left:0;top:50%;transform-origin:left center;margin-top:-10px} .np-art{color:var(--accent2)} -.ctrls{display:flex;align-items:center;gap:3px;flex-shrink:0} +.ctrls{display:flex;align-items:center;gap:3px} .c-btn{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--dim);cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:15px;transition:.15s} .c-btn:hover{background:rgba(255,255,255,.12);color:var(--text)} .c-btn.act{background:rgba(0,212,255,.13);border-color:var(--accent2);color:var(--accent2)} @@ -274,6 +281,13 @@ body.idle .gt,body.idle .gb,body.idle .gr,body.idle .gl{opacity:0;transition:opa