fix(nav): match the theme toggle icon size and baseline to its neighbours

Measured in the live header: the toggle's glyph was 15.25px tall centred at
y=31.5, while the account and search icons are 14px tall centred at y=34.09.
Two causes stack up:

- `.toggle-radius` is a fixed 29x29 circle with no font-size, so the sun/moon
  pseudo-elements inherit `.navbar-top`'s 15px. The sibling `.jio-nav-icon`
  buttons pin 14px, so the toggle glyph renders a size larger.
- The toggle sits alone in a 29px `.navbar-form`, while the account cluster is
  34px (6px padding + 20px line box + 6px). Both clusters are top-aligned, so
  their centres differ by 2.5px.

Pin the toggle's glyph to 14px and give its cluster the same 34px flex line as
its neighbours. Scoped to `.navbar-top`, so the mobile drawer and the floating
rail (which also carry .toggle-theme) keep their own geometry.

Verified via headless Edge + CDP on https://localhost: glyph now 14px, centre
delta 0.09px (was 2.5px); pixel measurement shows the sun at 14.0px against
14.0px for the search icon.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Opus 5 committed 2026-11-03 21:36:56 +08:00
1 parent 02246c7ec8
commit ba32e0ef9c
3 files changed
+29 -1

No files matched your search

+14
View File
@@ -40,6 +40,20 @@
user-select: none;
}
/* 主题切换圆钮的图标与相邻导航图标同尺寸、同基线。
* .toggle-radius 固定 29px 且不设字号,字形会继承 .navbar-top 的 15px,
* 比旁边 14px 的账户/搜索图标大一圈;同时 29px 的集群比 34px 的账户集群矮,
* 同为顶部对齐时中心低 2.5px。这里对齐字号,并把圆钮在 34px 行内垂直居中。 */
.navbar-top .toggle-theme.toggle-radius {
font-size: 14px;
}
.navbar-top .navbar-form:has(> .toggle-theme) {
display: flex;
align-items: center;
min-height: 34px;
}
.navbar-search .line-form-input:focus,
.navbar-search .line-form-input:focus-visible {
outline: 0;