bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Localize navigation and production UI

Browse Source
This commit is contained in:
b0txec
2026-08-22 14:48:16 +03:00
parent f3197bf340
commit 06088653b1
6 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/css/menu.module.css
+1 -1
View File
@@ -2,6 +2,6 @@
.header.scrolled{border-color:rgba(79,127,185,.3);background:linear-gradient(110deg,rgba(246,251,255,.82),rgba(218,234,253,.78),rgba(235,246,255,.84));box-shadow:0 8px 26px rgba(31,77,132,.12);backdrop-filter:blur(24px) saturate(140%)}
.brand{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;transition:opacity 180ms}.brand:hover{opacity:.88}.brandMark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#4499e6,#15579b);color:#fff;font-family:Monda,sans-serif;font-size:23px;box-shadow:0 9px 22px rgba(26,91,157,.28),0 0 0 5px rgba(52,137,216,.08);transform-origin:left center;transition:transform 280ms cubic-bezier(.23,1,.32,1),box-shadow 280ms}.brandCopy{width:190px;transform-origin:left center;transition:transform 280ms cubic-bezier(.23,1,.32,1),opacity 220ms}.brand strong,.brand small{display:block;white-space:nowrap}.brand strong{font-size:18px;letter-spacing:-.01em}.brand small{margin-top:3px;color:var(--text-muted);font-size:12px}.scrolled .brandMark{transform:scale(.8);box-shadow:0 5px 13px rgba(26,91,157,.22)}.scrolled .brandCopy{transform:translateX(-7px) scale(.88);opacity:.82}
.navigation,.menu{display:flex;align-items:center}.navigation{gap:8px}.menu{gap:5px;margin:0;padding:0;list-style:none}.menu li{margin:0;padding:0}.menu a,.moreButton,.morePanel a{font-size:14px;font-weight:700}.menu a{position:relative;display:block;padding:10px 13px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 180ms,background 180ms,transform 180ms}.menu a:after{content:"";position:absolute;right:13px;bottom:4px;left:13px;height:2px;border-radius:2px;background:var(--accent);opacity:0;transform:scaleX(.35);transition:opacity 180ms,transform 220ms}.menu a:hover{background:rgba(255,255,255,.5);color:var(--text);transform:translateY(-1px)}.menu a.active{background:rgba(224,239,255,.78);color:var(--accent-strong)}.menu a.active:after{opacity:1;transform:scaleX(1)}
.moreMenu{position:relative}.moreButton{display:flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:44px;padding:0 12px;border:1px solid rgba(88,134,187,.24);border-radius:12px;background:rgba(255,255,255,.56);color:var(--text-muted);cursor:pointer;transition:color 180ms,background 180ms,border-color 180ms,transform 180ms}.moreButton:hover,.moreButton.active{border-color:rgba(42,119,199,.36);background:rgba(224,239,255,.88);color:var(--accent-strong)}.moreButton:hover{transform:translateY(-1px)}.moreLabel{font-size:13px}.morePanel{position:absolute;top:calc(100% + 10px);right:0;display:grid;min-width:230px;padding:8px;border:1px solid rgba(87,133,185,.28);border-radius:15px;background:rgba(247,251,255,.97);box-shadow:0 18px 50px rgba(25,65,110,.2);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transform-origin:top right;transition:opacity 160ms,transform 180ms,visibility 160ms;backdrop-filter:blur(22px)}.morePanel.open{opacity:1;visibility:visible;transform:none}.morePanel a{padding:12px 14px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 160ms,background 160ms}.morePanel a:hover,.morePanel a.active{background:rgba(222,238,255,.88);color:var(--accent-strong)}
.moreMenu{position:relative}.moreButton{display:flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:44px;padding:0 12px;border:1px solid rgba(88,134,187,.24);border-radius:12px;background:rgba(255,255,255,.56);color:var(--text-muted);cursor:pointer;transition:color 180ms,background 180ms,border-color 180ms,transform 180ms}.moreButton:hover,.moreButton.active{border-color:rgba(42,119,199,.36);background:rgba(224,239,255,.88);color:var(--accent-strong)}.moreButton:hover{transform:translateY(-1px)}.moreLabel{font-size:13px}.morePanel{position:absolute;top:calc(100% + 10px);right:0;display:grid;gap:3px;min-width:230px;padding:8px;border:1px solid rgba(87,133,185,.28);border-radius:15px;background:rgba(247,251,255,.97);box-shadow:0 18px 50px rgba(25,65,110,.2);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transform-origin:top right;transition:opacity 160ms,transform 180ms,visibility 160ms;backdrop-filter:blur(22px)}.morePanel.open{opacity:1;visibility:visible;transform:none}.morePanel a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 160ms,background 160ms,transform 160ms}.morePanel a svg{flex:0 0 auto;color:var(--accent)}.morePanel a:hover,.morePanel a.active{background:rgba(222,238,255,.88);color:var(--accent-strong);transform:translateX(-2px)}
@media(max-width:980px){.header{gap:16px;padding-inline:20px}.brandCopy{width:auto}.brand small{display:none}.moreLabel{display:none}.menu a{padding-inline:9px;font-size:13px}}
@media(max-width:760px){.header{height:auto;min-height:74px;align-items:flex-start;flex-direction:column;padding-block:12px}.navigation{width:100%}.menu{max-width:calc(100% - 58px);overflow-x:auto}.menu a{white-space:nowrap}.moreMenu{margin-left:auto}.morePanel{position:fixed;top:132px;right:16px;left:16px}}