-
Notifications
You must be signed in to change notification settings - Fork 0
/
maxiang.css
196 lines (170 loc) · 4.37 KB
/
maxiang.css
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
/* Original highlight.js style */
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #f6f8fa;
color: black;
}
body {
color: #24292e;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-size: 16px;
line-height: 1.5em;
padding: 1em;
margin: auto;
max-width: 64em;
background: #ffffff;
}
h1 {
font-size: 2em;
font-weight: 700;
line-height: 1.1;
color:#000000;
}
h2, h3, h4, h5, h6 {
line-height: 1.5em;
margin-top: 2.2em;
margin-bottom: 4px;
}
h2 {
font-size: 1.4em;
color: #000000;
border-bottom: 2px solid #ff5900;
font-weight: 700;
line-height: 1.4;
}
h3 {
border-bottom: 2px solid #CCCCCC;
font-weight: 700;
font-size: 1.2em;
line-height: 1.4;
}
h4 {
font-weight: 700;
text-transform: uppercase;
font-size: 1.1em;
line-height: 1.4;
}
h5, h6 {
font-size: .9em;
}
h5 {
font-weight: bold;
text-transform: uppercase;
}
h6 {
font-weight: normal;
color: #AAA;
}
/* set `` style */
code {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
padding: 0 0.2em;
line-height: 1;
font-size: .95em;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* set paragraph style */
p {
line-height: 1.8;
}
/* set ``` style */
pre {
color: #666;
font-family: "Courier New", sans-serif, monospace, Consolas;
}
/* set > style */
blockquote {
color: #6a737d;
background-color: #f6f8fa;
font-family: "Courier New", monospace, Consolas;
}
/* set ** style */
strong {
font-family: Consolas, "Courier New", monospace;
padding: 0 0.2em;
line-height: 1;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/* ------------------------------------ table ------------------------------------ */
/* --------------样式调整-------------- */
/* 基础概念
* <table>: 表格
* <thead>: table header 表头区
* <th>: table headings 表头单元格内容
* <tbody>: table body 表格内容区
* <tr>: table row 表行
* <td>: table data 单元格内容
*/
/* 基本样式 */
table {
width: 100%; /*表格宽度*/
max-width: 65em; /*表格最大宽度,避免表格过宽*/
border: 1px solid #dedede; /*表格外边框设置*/
margin: 15px auto; /*外边距*/
border-collapse: collapse; /*使用单一线条的边框*/
empty-cells: show; /*单元格无内容依旧绘制边框*/
}
table th,
table td {
height: 35px; /*统一每一行的默认高度*/
border: 1px solid #dedede; /*内部边框样式*/
padding: 0 10px; /*内边距*/
}
/* 表头样式 */
table th {
font-weight: bold; /*加粗*/
text-align: center !important; /*内容居中,加上 !important 避免被 Markdown 样式覆盖*/
background: rgba(158,188,226,0.2); /*背景色*/
}
/*
* 隔行变色
* 使用选择器选取复数行设置背景色。一般 Markdown 表格编译后都有 <tbody> 包裹内容,那下面就相当于从表格第二行开始计数
table tbody tr:nth-child(2n) {
background: rgba(158,188,226,0.12);
}
*/
/*
* 悬浮变色
* 鼠标悬浮时该行改变背景色
*/
table tr:hover {
background: #efefef;
}
/* --------------------------自适应优化-------------------------- */
/*
* 表头不换行
* 设置表头单元格内容不换行,这样可以通过表头控制该列的最小宽度,避免浏览器窗口缩小时内容被压缩得太紧
*/
table th {
white-space: nowrap; /*表头内容强制在一行显示*/
}
/*
* 首列不换行
* 表格第一列单元格内容不换行,多数情况下表格首列不应该被压缩换行
*/
table td:nth-child(1) {
white-space: nowrap;
}
/*
* 格滚动条
* 添加 JavaScript 代码,用一个 <div> 把表格包裹起来,父元素宽度不足时显示横向滚动条,避免表格撑破布局
*/
[].slice.call(document.querySelectorAll('table')).forEach(function(el){
var wrapper = document.createElement('div');
wrapper.className = 'table-area';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
})
/* jQuery */
$("table").wrap("<div class='table-area'></div>");
.table-area {
overflow: auto;
}
/* ------------------------------------ table end ------------------------------------ */