Repository navigation
Expand file tree
/
Copy pathtemplate-style.css
More file actions
162 lines (146 loc) · 7.28 KB
/
Copy pathtemplate-style.css
File metadata and controls
162 lines (146 loc) · 7.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/* ========== 核心布局 ========== */
:root { --sidebar-w: 220px; }
html { font-size: 16px; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
color: #333; background: #fff; margin: 0; padding: 0;
}
html, body { height: 100%; overflow: hidden; }
/* ========== 阅读模式 ========== */
.read-mode { display: flex; justify-content: center; height: 100vh; }
.read-mode .page-container { display: flex; height: 100vh; max-width: 1300px; width: 100%; min-width: 0; }
/* 阅读模式 - 左侧目录栏 */
#toc-sidebar {
flex-shrink: 0; background: #f5f5f5;
height: 100vh;
width: var(--sidebar-w);
display: flex; flex-direction: column;
border-right: 1px solid #e0e0e0;
padding: 0 12px; z-index: 100;
box-shadow: 1px 0 4px rgba(0,0,0,0.04);
}
.sidebar-logo {
display: flex; align-items: center; gap: 10px;
padding: 16px 8px; border-bottom: 1px solid #e0e0e0;
flex-shrink: 0;
}
.sidebar-logo .logo-icon { font-size: 28px; }
.sidebar-logo .logo-word { font-size: 16px; font-weight: 700; color: #1565c0; }
.sidebar-logo .logo-sub { font-size: 11px; color: #999; }
#toc-sidebar nav { flex: 1; overflow-y: auto; padding: 8px 0; }
#toc-sidebar nav a {
display: block; font-size: 14px; color: #666;
text-decoration: none; padding: 5px 8px;
border-radius: 4px; margin-bottom: 2px;
transition: all 0.15s; border-left: 3px solid transparent;
cursor: default;
}
#toc-sidebar nav a:hover { background: #f0f4ff; color: #1565c0; }
#toc-sidebar nav a.active { background: #e3f0ff; color: #1565c0; font-weight: 600; border-left-color: #5b7fa5; }
#toc-sidebar nav a.toc-h3 { padding-left: 20px; font-size: 13px; }
#toc-sidebar nav a.toc-rev { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d0d0d0; color: #888; font-size: 13px; }
.sidebar-footer {
padding: 12px 0; font-size: 12px; color: #999;
border-top: 1px solid #e0e0e0; text-align: center;
flex-shrink: 0;
}
/* 阅读模式 - 右侧主内容区 */
#main-content { flex: 1; padding: 20px 40px; outline: none; overflow-y: auto; height: 100vh; min-width: 0; cursor: default; }
#main-content > p:not(.num-item):not(.title-meta) { margin-left: 15px; }
#main-content > table { margin-left: 15px; }
h1 { color: #1565c0; font-size: 26px; font-weight: 700; margin: 0; }
h1.doc-title-wrap {
text-align: center; padding: 50px 20px; margin: 0 0 50px 0;
border: 2px solid #5b7fa5; border-radius: 8px;
background: #e3f2fd;
position: relative;
display: inline-block; width: 100%;
box-sizing: border-box;
}
.meta { text-align: center; color: #666; font-size: 14px; margin: 14px 0 20px; }
.rule-item {
background: #f0f4ff; border-left: 4px solid #5b7fa5; border-radius: 4px;
padding: 8px 14px; margin: 12px 0 8px; font-weight: 600; font-size: 15px; color: #1a1a1a;
}
.rule-item-num { color: #1565c0; margin-right: 8px; }
ol.sub-items { margin-top: 6px; padding-left: 0; list-style-type: none; counter-reset: sub-counter; }
ol.sub-items > li { counter-increment: sub-counter; display: flex; margin-bottom: 4px; margin-left: calc(15px + 2em); }
ol.sub-items > li::before { content: counter(sub-counter, lower-alpha) ") "; font-weight: 700; color: #333; min-width: 2em; flex-shrink: 0; }
ol.sub-items > li > span.sub-text { flex: 1; min-width: 0; }
ul.sub-items-unordered { margin-top: 6px; padding-left: 0; list-style: none; }
ul.sub-items-unordered > li { display: flex; margin-bottom: 4px; margin-left: calc(15px + 2em); }
ul.sub-items-unordered > li::before { content: "•"; color: #333; min-width: 1.5em; flex-shrink: 0; }
ul.sub-items-unordered > li > span.sub-text { flex: 1; min-width: 0; }
p.num-item { margin: 10px 0 6px 15px; display: flex; align-items: baseline; min-width: 0; }
p.num-item > strong { flex-shrink: 0; min-width: 2em; }
p.num-item > .num-text { flex: 1; min-width: 0; }
p.num-item + p.num-item { margin-top: 12px; }
p.num-item code { word-break: break-all; }
.title-meta {
text-align: center; color: #888; font-size: 14px; margin-top: 14px; margin-bottom: 0;
font-weight: 400;
}
h2 { color: #1565c0; border-bottom: 2px solid #5b7fa5; padding-bottom: 4px; margin-top: 32px; scroll-margin-top: 20px; font-size: 18px; }
h3 { color: #1a1a1a; font-size: 16px; font-weight: 700; margin: 24px 0 10px; padding: 0 0 6px 10px; border-left: 3px solid #5b7fa5; border-bottom: 1px solid #ddd; scroll-margin-top: 20px; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin: 12px 0; }
th { background: #e8eef6; color: #1a1a1a; padding: 8px 10px; text-align: left; font-size: 14px; font-weight: 700; }
td { padding: 6px 10px; border-bottom: 1px solid #eee; font-size: 14px; font-weight: 400; }
tr:hover td { background: #f8f9fa; }
.good { color: #27ae60; font-weight: bold; }
.medium { color: #f39c12; font-weight: bold; }
.bad { color: #e74c3c; font-weight: bold; }
/* Checklist 表格 */
table.checklist { font-size: 14px; }
table.checklist th { text-align: center; font-size: 14px; font-weight: 700; white-space: nowrap; }
table.checklist td:nth-child(1) { text-align: center; width: 40px; }
table.checklist td:nth-child(2) { white-space: nowrap; font-weight: 500; }
table.checklist td:nth-child(4),
table.checklist td:nth-child(5) { width: 80px; }
p { margin: 8px 0; line-height: 1.6; }
/* ========== 内容样式组件 ========== */
/* 用法：在套用时勾选需要的组件，未使用的从CSS和示例中删除 */
/* 要点框 — 绿色左边线，适合关键结论/核心要点 */
.key-box {
background: #eef6ee; border-left: 4px solid #27ae60;
padding: 14px 20px; margin: 20px 0;
border-radius: 0 4px 4px 0;
}
.key-box p { margin: 4px 0; line-height: 1.6; }
/* 示例框 — 浅蓝灰背景，适合计算示例/操作步骤 */
.example-box {
background: #f7f9fb; border: 1px solid #d5dde5;
border-radius: 4px; padding: 18px 22px;
margin: 18px 0;
}
.example-box .label { font-weight: bold; color: #1565c0; font-size: 15px; margin-bottom: 8px; }
.example-box p { margin: 4px 0; line-height: 1.6; }
.example-box .step { margin: 4px 0; padding-left: 1em; }
.example-box .result { font-weight: bold; color: #1565c0; margin-top: 8px; }
/* 应用框 — 暖色边框，适合总结性应用/一句话结论 */
.apply-box {
background: #fdf8ee; border: 1px solid #e8d5b0;
border-radius: 4px; padding: 18px 22px;
margin: 18px 0;
}
.apply-box .label { font-weight: bold; color: #8b6914; font-size: 15px; margin-bottom: 10px; }
.apply-box p { margin: 4px 0; line-height: 1.6; }
/* 警告框 — 红色左边线，适合重要警告/禁止事项 */
.warn-box {
background: #fef5f5; border-left: 4px solid #e74c3c;
padding: 14px 20px; margin: 20px 0;
border-radius: 0 4px 4px 0;
}
.warn-box p { margin: 4px 0; line-height: 1.6; }
/* 提示框 — 蓝色左边线，适合补充说明/小提示 */
.tip-box {
background: #eef3ff; border-left: 4px solid #5b7fa5;
padding: 14px 20px; margin: 20px 0;
border-radius: 0 4px 4px 0;
}
.tip-box p { margin: 4px 0; line-height: 1.6; }
/* 滚动条 */
::-webkit-scrollbar { width: 14px; cursor: default; }
::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 7px; cursor: default; }
::-webkit-scrollbar-thumb { background: #d5d5d5; border-radius: 7px; border: 3px solid #f0f0f0; cursor: default; }
::-webkit-scrollbar-thumb:hover { background: #bbb; cursor: default; }