Skip to content

Commit abe6003

Browse files
cropflrecropflre
committed
新增移动端底部导航视觉规范
1 parent f6bb24c commit abe6003

1 file changed

Lines changed: 157 additions & 0 deletions

File tree

‎web/src/styles/mobile-bottom-nav.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/* Nowen Video · Mobile bottom navigation
2+
*
3+
* Mobile navigation is intentionally isolated from the desktop rail styles.
4+
* This keeps the bottom bar compact, safe-area aware and stable across the
5+
* layered visual stylesheets used by the web client.
6+
*/
7+
8+
.nv-mobile-nav {
9+
display: none;
10+
}
11+
12+
@media (max-width: 48rem) {
13+
.nv-main-scroll {
14+
scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
15+
}
16+
17+
.nv-page-container {
18+
padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
19+
}
20+
21+
.nv-mobile-nav {
22+
position: fixed;
23+
z-index: 120;
24+
left: 0 !important;
25+
right: 0 !important;
26+
bottom: 0 !important;
27+
min-height: calc(64px + env(safe-area-inset-bottom, 0px));
28+
display: grid !important;
29+
grid-template-columns: repeat(4, minmax(0, 1fr));
30+
align-items: start;
31+
gap: 0;
32+
padding:
33+
6px
34+
max(10px, env(safe-area-inset-right, 0px))
35+
max(6px, env(safe-area-inset-bottom, 0px))
36+
max(10px, env(safe-area-inset-left, 0px));
37+
box-sizing: border-box;
38+
border: 0 !important;
39+
border-top: 1px solid var(--nv-border-default) !important;
40+
border-radius: 0 !important;
41+
background: rgba(12, 13, 18, .94) !important;
42+
box-shadow: 0 -12px 36px rgba(0, 0, 0, .16) !important;
43+
backdrop-filter: blur(24px) saturate(130%) !important;
44+
-webkit-backdrop-filter: blur(24px) saturate(130%) !important;
45+
isolation: isolate;
46+
}
47+
48+
:root:not([data-theme="light"]) .nv-mobile-nav,
49+
[data-theme="dark"] .nv-mobile-nav {
50+
background: color-mix(in srgb, var(--nv-bg-canvas) 91%, transparent) !important;
51+
}
52+
53+
[data-theme="light"] .nv-mobile-nav {
54+
border-top-color: rgba(24, 25, 29, .08) !important;
55+
background: rgba(255, 255, 255, .95) !important;
56+
box-shadow: 0 -10px 30px rgba(28, 28, 32, .08) !important;
57+
}
58+
59+
.nv-mobile-nav-item {
60+
min-width: 0;
61+
height: 52px;
62+
display: flex;
63+
flex-direction: column;
64+
align-items: center;
65+
justify-content: center;
66+
gap: 3px;
67+
padding: 2px 4px;
68+
border: 0;
69+
border-radius: 13px;
70+
background: transparent;
71+
color: var(--nv-text-tertiary);
72+
text-decoration: none;
73+
-webkit-tap-highlight-color: transparent;
74+
touch-action: manipulation;
75+
transition:
76+
color 160ms var(--nv-ease-standard, ease),
77+
background-color 160ms var(--nv-ease-standard, ease),
78+
transform 120ms var(--nv-ease-standard, ease);
79+
}
80+
81+
.nv-mobile-nav-item:hover {
82+
background: var(--nv-fill-hover);
83+
color: var(--nv-text-secondary);
84+
}
85+
86+
.nv-mobile-nav-item:active {
87+
transform: scale(.97);
88+
}
89+
90+
.nv-mobile-nav-item:focus-visible {
91+
outline: 2px solid var(--nv-focus-ring);
92+
outline-offset: -2px;
93+
}
94+
95+
.nv-mobile-nav-icon {
96+
width: 34px;
97+
height: 27px;
98+
display: grid;
99+
place-items: center;
100+
border-radius: 10px;
101+
color: currentColor;
102+
transition:
103+
color 160ms var(--nv-ease-standard, ease),
104+
background-color 160ms var(--nv-ease-standard, ease),
105+
box-shadow 160ms var(--nv-ease-standard, ease);
106+
}
107+
108+
.nv-mobile-nav-icon svg {
109+
width: 20px;
110+
height: 20px;
111+
stroke-width: 1.9;
112+
}
113+
114+
.nv-mobile-nav-label {
115+
max-width: 100%;
116+
overflow: hidden;
117+
font-size: 10.5px;
118+
font-weight: 560;
119+
line-height: 1.05;
120+
letter-spacing: -.01em;
121+
text-align: center;
122+
text-overflow: ellipsis;
123+
white-space: nowrap;
124+
}
125+
126+
.nv-mobile-nav-item[data-active="true"] {
127+
background: transparent;
128+
color: var(--nv-action-primary);
129+
}
130+
131+
.nv-mobile-nav-item[data-active="true"] .nv-mobile-nav-icon {
132+
background: color-mix(in srgb, var(--nv-action-primary) 13%, transparent);
133+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nv-action-primary) 10%, transparent);
134+
}
135+
136+
.nv-mobile-nav-item[data-active="true"] .nv-mobile-nav-label {
137+
font-weight: 680;
138+
}
139+
140+
[data-theme="light"] .nv-mobile-nav-item[data-active="true"] .nv-mobile-nav-icon {
141+
background: color-mix(in srgb, var(--nv-action-primary) 10%, white);
142+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nv-action-primary) 13%, transparent);
143+
}
144+
}
145+
146+
@media (max-width: 22rem) {
147+
.nv-mobile-nav-label {
148+
font-size: 10px;
149+
}
150+
}
151+
152+
@media (prefers-reduced-motion: reduce) {
153+
.nv-mobile-nav-item,
154+
.nv-mobile-nav-icon {
155+
transition: none;
156+
}
157+
}

0 commit comments

Comments
 (0)