diff --git a/index.html b/index.html index 77fd935..feadd7a 100644 --- a/index.html +++ b/index.html @@ -24,25 +24,13 @@ } button{font:inherit;border:none;background:none;color:inherit;cursor:pointer} - /* ---------- left icon sidebar (collapsible) ---------- */ body{transition:padding-left .22s ease} .sidebar{position:fixed;left:0;top:0;bottom:0;width:62px;background:#191c22;z-index:45; - display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 0; - transition:transform .22s ease} - .sbtoggle{color:#7c828d} - body.sbhide{padding-left:0} - body.sbhide .sidebar{transform:translateX(-100%)} - /* floating reopen button, shown only when the rail is hidden */ - .sbshow{position:fixed;left:10px;top:12px;z-index:46;width:38px;height:38px;border-radius:11px; - background:#191c22;color:#fff;display:none;align-items:center;justify-content:center; - box-shadow:0 5px 16px rgba(20,24,35,.32)} - .sbshow:hover{background:#23262e} - body.sbhide .sbshow{display:flex} + display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 0} .sblogo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#3b6ef6,#9b8cff);margin-bottom:12px;flex:none} .sbicon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#9aa1ac;flex:none} .sbicon:hover{background:rgba(255,255,255,.08);color:#fff} .sbicon.active{background:rgba(255,255,255,.13);color:#fff} - .sbsettings{margin-top:auto} .sbpop{position:absolute;z-index:55;display:none;background:var(--surface);border:1px solid var(--line); border-radius:14px;box-shadow:0 18px 48px rgba(20,24,35,.26)} .sbpop.show{display:block} @@ -50,16 +38,6 @@ .sbsearchpop input{width:100%;min-height:42px;border:none;border-radius:11px;background:#eceef2; padding:0 15px;font:inherit;font-size:15px;color:var(--ink)} .sbsearchpop input:focus{outline:2px solid var(--accent)} - .sbsettingspop{left:72px;bottom:14px;width:300px;padding:16px 18px} - .sbset-h{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:13px} - .sbset-l{display:block;font-size:12px;font-weight:700;color:var(--ink-3);margin-bottom:6px} - .sbsettingspop input{width:100%;min-height:40px;border:1px solid var(--line);border-radius:10px; - padding:0 13px;font:inherit;font-size:14px;color:var(--ink);background:#fafbfc} - .sbsettingspop input:focus{outline:none;border-color:var(--accent)} - .sbset-note{font-size:11.5px;color:var(--ink-3);margin:7px 1px 0} - .sbset-btn{margin-top:14px;width:100%;background:#eef0f4;color:var(--ink-2);font-weight:700; - font-size:13px;border-radius:10px;padding:10px} - .sbset-btn:hover{background:#e4e7ec} /* ---------- top bar ---------- */ header{ @@ -614,7 +592,6 @@ .sblogo{width:26px;height:26px;margin-bottom:8px} .sbicon{width:38px;height:38px} .sbsearchpop{left:56px;width:min(290px,calc(100vw - 64px))} - .sbsettingspop{left:56px;width:min(280px,calc(100vw - 64px))} /* the chart fills the screen and scrolls inside itself, like a native app */ main{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column; padding:8px 10px calc(env(safe-area-inset-bottom) + 8px)} @@ -687,29 +664,13 @@ - -