1+ /*nav-style.css */
2+
3+ /* 屏蔽全局雪花特效 (如果有) */
4+ body > canvas { display : none !important ; }
5+
6+ /* 基础 MkDocs 样式重置 */
7+ .md-content__inner > h1 { display : none; }
8+ .md-content { padding : 0 !important ; max-width : 100% !important ; }
9+ .md-grid { max-width : 100% !important ; margin : 0 !important ; }
10+
11+ /* --- 变量定义 --- */
12+ : root {
13+ --page-bg : # f2f3f5 ;
14+ --text-main : # 1d1d1f ;
15+ --text-sub : # 86868b ;
16+ --sidebar-width : 160px ;
17+ --sidebar-collapsed-width : 68px ;
18+ --sidebar-top : 150px ;
19+ --sidebar-bottom : 40px ;
20+ --sidebar-bg : rgba (255 , 255 , 255 , 0.75 );
21+ --sidebar-hover : rgba (0 , 0 , 0 , 0.05 );
22+ --sidebar-active-bg : # 007aff ;
23+ --sidebar-active-text : # ffffff ;
24+ --section-box-bg : rgba (255 , 255 , 255 , 0.6 );
25+ --card-bg : # ffffff ;
26+ --card-border : rgba (0 , 0 , 0 , 0.05 );
27+ }
28+
29+ [data-md-color-scheme = "slate" ] {
30+ --page-bg : transparent;
31+ --text-main : # f5f5f7 ;
32+ --text-sub : # a1a1a6 ;
33+ --sidebar-bg : rgba (30 , 30 , 35 , 0.5 );
34+ --sidebar-hover : rgba (255 , 255 , 255 , 0.1 );
35+ --sidebar-active-bg : # 0a84ff ;
36+ --section-box-bg : rgba (44 , 44 , 46 , 0.4 );
37+ --card-bg : rgba (44 , 44 , 46 , 0.6 );
38+ --card-border : rgba (255 , 255 , 255 , 0.1 );
39+ }
40+
41+ .nav-page-wrapper { position : relative; min-height : 100vh ; background-color : var (--page-bg ); color : var (--text-main ); font-family : -apple-system, system-ui, sans-serif; padding-top : 20px ; }
42+ [data-md-color-scheme = "slate" ] .nav-page-wrapper { background : radial-gradient (ellipse at bottom, # 1b2735 0% , # 090a0f 100% ); }
43+
44+ /*强制隐藏侧边栏 (覆盖 custom.css 的 display: block) */
45+ @media screen and (min-width : 768px ) and (max-width : 1219px ) { .md-sidebar--primary , .md-sidebar--secondary { display : none !important ; } }
46+
47+ /* --- 侧边栏样式 --- */
48+ .nav-sidebar { position : fixed; left : 15px ; width : var (--sidebar-width ); top : var (--sidebar-top ); bottom : var (--sidebar-bottom ); background : var (--sidebar-bg ); backdrop-filter : blur (20px ); -webkit-backdrop-filter : blur (20px ); border-radius : 24px ; box-shadow : 0 8px 32px rgba (0 , 0 , 0 , 0.2 ); z-index : 100 ; padding : 10px 8px ; display : flex; flex-direction : column; transition : width 0.3s ease; overflow : hidden; border : 1px solid var (--card-border ); user-select : none; }
49+ .nav-sidebar .collapsed { width : var (--sidebar-collapsed-width ); }
50+
51+ .resizer { position : absolute; left : 0 ; width : 100% ; height : 10px ; cursor : ns-resize; z-index : 101 ; opacity : 0 ; transition : opacity 0.2s ; }
52+ .resizer : hover { opacity : 1 ; background : rgba (128 , 128 , 128 , 0.2 ); }
53+ .resizer .top { top : 0 ; } .resizer .bottom { bottom : 0 ; }
54+
55+ .sidebar-menu { flex : 1 ; overflow-y : auto; overflow-x : hidden; margin : 5px 0 ; padding-top : 5px ; }
56+ .sidebar-menu ::-webkit-scrollbar { width : 4px ; }
57+ .sidebar-menu ::-webkit-scrollbar-thumb { background : rgba (128 , 128 , 128 , 0.3 ); border-radius : 4px ; }
58+
59+ .sidebar-item { display : flex; align-items : center; padding : 10px 10px ; margin-bottom : 4px ; border-radius : 12px ; color : var (--text-main ); cursor : pointer; transition : background 0.2s ; }
60+ .sidebar-item : hover { background-color : var (--sidebar-hover ); }
61+ .sidebar-icon { font-size : 18px ; width : 24px ; text-align : center; margin-right : 10px ; flex-shrink : 0 ; }
62+ .sidebar-text { font-size : 13px ; font-weight : 500 ; white-space : nowrap; opacity : 1 ; transition : opacity 0.2s ; }
63+ .nav-sidebar .collapsed .sidebar-text { display : none; }
64+
65+ .sidebar-footer { border-top : 1px solid var (--card-border ); padding-top : 5px ; flex-shrink : 0 ; display : flex; gap : 5px ; }
66+ .footer-btn { flex : 1 ; background : transparent; border : none; cursor : pointer; color : var (--text-sub ); padding : 8px 0 ; border-radius : 8px ; display : flex; justify-content : center; align-items : center; transition : background 0.2s ; }
67+ .footer-btn : hover { background : var (--sidebar-hover ); color : var (--text-main ); }
68+
69+ /* --- 主内容样式 --- */
70+ .nav-main { margin-left : calc (var (--sidebar-width ) + 30px ); margin-right : 20px ; padding-bottom : 80px ; transition : margin-left 0.3s ease; }
71+ .nav-sidebar .collapsed ~ .nav-main { margin-left : calc (var (--sidebar-collapsed-width ) + 30px ); }
72+
73+ .header-area { text-align : center; margin-bottom : 50px ; }
74+ .main-title { font-size : 32px ; font-weight : 800 ; margin-bottom : 15px ; }
75+
76+ .category-box { background : var (--section-box-bg ); backdrop-filter : blur (10px ); border-radius : 24px ; padding : 25px ; margin-bottom : 30px ; border : 1px solid var (--card-border );content-visibility : auto; contain-intrinsic-size : 1px 300px ; }
77+ .category-title { font-size : 18px ; font-weight : 700 ; margin-bottom : 15px ; display : flex; align-items : center; gap : 8px ; padding-left : 5px ; scroll-margin-top : 100px ; }
78+ .grid-wrapper { display : grid; grid-template-columns : repeat (auto-fill, minmax (120px , 1fr )); gap : 12px ; }
79+
80+ /* 卡片 */
81+ .nav-card { background : var (--card-bg ); border : 1px solid var (--card-border ); border-radius : 14px ; padding : 12px 8px ; display : flex; flex-direction : column; align-items : center; text-align : center; text-decoration : none !important ; color : var (--text-main ) !important ; transition : transform 0.2s , box-shadow 0.2s ; overflow : hidden; }
82+ .nav-card : hover { transform : translateY (-3px ); box-shadow : 0 8px 16px rgba (0 , 0 , 0 , 0.15 ); }
83+ .nav-card .icon-img { width : 32px ; height : 32px ; margin-bottom : 8px ; border-radius : 6px ; object-fit : contain; background : white; padding : 2px ; }
84+ .nav-card .title { font-size : 13px ; font-weight : 600 ; margin-bottom : 2px ; width : 100% ; white-space : nowrap; overflow : hidden; text-overflow : ellipsis;}
85+ .nav-card .desc { font-size : 10px ; color : var (--text-sub ); opacity : 0.8 ; width : 100% ; white-space : nowrap; overflow : hidden; text-overflow : ellipsis;}
86+
87+ /* --- 底部文字渐变动画 --- */
88+ .footer-quote {
89+ text-align : center;
90+ color : var (--text-sub );
91+ font-size : 13px ;
92+ margin-top : 30px ;
93+ opacity : 0.7 ;
94+ min-height : 20px ;
95+ }
96+
97+ # typing-text {
98+ transition : opacity 0.8s ease-in-out;
99+ opacity : 1 ;
100+ }
101+
102+ @media screen and (max-width : 768px ) {
103+ .nav-sidebar { left : 5px ; width : 60px ; top : 80px ; bottom : 80px ; }
104+ .nav-sidebar .sidebar-text { display : none; }
105+ .resizer { display : none; }
106+ .nav-main { margin-left : 70px ; margin-right : 10px ; }
107+ .sidebar-footer { display : none; }
108+ }
0 commit comments