You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
454 lines
11 KiB
454 lines
11 KiB
|
|
// https://verytoolz.com/blog/03bfb3598f/
|
|
.markdown-body {
|
|
--color-fg-default: #24292f; // 文本色-默认
|
|
--color-fg-muted: #57606a; // 文本色-柔和
|
|
--color-fg-subtle: #6e7781; // 文本色-微妙
|
|
--color-canvas-default: #ffffff; // 底色-默认
|
|
--color-canvas-subtle: #f6f8fa; // 底色-微妙
|
|
--color-border-default: #d0d7de; // 边框色-默认
|
|
--color-border-muted: hsla(210, 18%, 87%, 1); // 边框色-柔和
|
|
--color-neutral-muted: rgba(175, 184, 193, 0.2); // 边框色-中性
|
|
--color-accent-fg: #0969da; // 文本强调色
|
|
--color-accent-emphasis: #0969da; // 背景强调色
|
|
--color-attention-subtle: #fff8c5; // 背景注意色
|
|
--color-danger-fg: #cf222e; // 文本危险色
|
|
--color-mark-default: rgb(255, 255, 0); // mark 默认色
|
|
--color-mark-fg: rgb(255, 187, 0); // mark 强调色
|
|
}
|
|
|
|
.markdown-body {
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
text-rendering: optimizelegibility;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
color: var(--color-fg-muted);
|
|
&::before {
|
|
display: table;
|
|
content: '';
|
|
}
|
|
&::after {
|
|
display: table;
|
|
clear: both;
|
|
content: '';
|
|
}
|
|
> *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
> *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
p,
|
|
blockquote,
|
|
ul,
|
|
ol,
|
|
dl,
|
|
table,
|
|
hr,
|
|
form,
|
|
pre,
|
|
details {
|
|
margin-top: 0;
|
|
margin-bottom: 1em;
|
|
}
|
|
blockquote {
|
|
& > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
& > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
/* 统一显示成块状元素 */
|
|
details,
|
|
figcaption,
|
|
figure {
|
|
display: block;
|
|
}
|
|
/* HTML5 媒体文件跟 img 保持一致 */
|
|
audio,
|
|
canvas,
|
|
video {
|
|
display: inline-block;
|
|
}
|
|
/* 按钮内部间距统一 */
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
/* 定义元素显示为斜体 */
|
|
dfn {
|
|
font-style: italic;
|
|
}
|
|
/* 去掉各Table cell 的边距并让其边重合 */
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
display: block;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
}
|
|
/* 可拖动文件添加拖动手势 */
|
|
[draggable] {
|
|
cursor: move;
|
|
}
|
|
/* 加粗元素 */
|
|
b,
|
|
strong {
|
|
font-weight: var(--base-text-weight-semibold, 600);
|
|
}
|
|
/* 缩写元素样式统一 */
|
|
abbr,
|
|
acronym {
|
|
border-bottom: none;
|
|
font-variant: normal;
|
|
text-decoration: underline dotted;
|
|
}
|
|
/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
|
|
abbr {
|
|
cursor: help;
|
|
}
|
|
/* 一致的 del 样式 */
|
|
del {
|
|
text-decoration: line-through;
|
|
}
|
|
/* a标签去除下划线 */
|
|
a {
|
|
text-decoration: none;
|
|
&:not([href]) {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
/* 默认不显示下划线，保持页面简洁 */
|
|
ins {
|
|
text-decoration: none;
|
|
}
|
|
/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
|
|
* 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
|
|
* 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
|
|
* 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
|
|
* 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
|
|
*/
|
|
u,
|
|
.typo-u {
|
|
text-decoration: underline;
|
|
}
|
|
/* 隐藏指定元素 */
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
/* 伸缩框显示为列表元素 */
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
q:before,
|
|
q:after {
|
|
content: '';
|
|
}
|
|
caption,
|
|
th {
|
|
text-align: left;
|
|
}
|
|
caption[align='center'],
|
|
th[align='center'] {
|
|
text-align: center;
|
|
}
|
|
address,
|
|
caption,
|
|
cite,
|
|
em,
|
|
th,
|
|
var {
|
|
font-weight: 400;
|
|
}
|
|
/* 标记，类似于手写的荧光笔的作用 */
|
|
mark {
|
|
background: var(--color-mark-default);
|
|
// background: #fffdd1;
|
|
// border-bottom: 1px solid #ffedce;
|
|
padding: 2px;
|
|
|
|
&.active{
|
|
background: var(--color-mark-fg);
|
|
}
|
|
// margin: 0 5px;
|
|
}
|
|
/* 统一h1元素的间隔和字体大小 */
|
|
h1 {
|
|
margin: 0.67em 0;
|
|
font-weight: var(--base-text-weight-semibold, 600);
|
|
font-size: 2em;
|
|
}
|
|
/* small字体缩小 */
|
|
small {
|
|
font-size: 90%;
|
|
}
|
|
/* 上下标显示 */
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
sub a,
|
|
sup a {
|
|
padding: 0 0.1em;
|
|
}
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
/* 代码相关的字体大小统一 */
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp,
|
|
pre tt {
|
|
font-family: monospace;
|
|
font-size: 1em;
|
|
}
|
|
/* 去除默认边框 */
|
|
fieldset,
|
|
img {
|
|
border: 0;
|
|
}
|
|
/* 图片初始化样式 */
|
|
img {
|
|
border-style: none;
|
|
max-width: 100%;
|
|
box-sizing: content-box;
|
|
margin: 0 auto;
|
|
background-color: var(--color-canvas-default);
|
|
}
|
|
/* 可附标题内容元素的间距 */
|
|
figure {
|
|
margin: 1em 40px;
|
|
}
|
|
/* 间隔线 */
|
|
/* 一致化 horizontal rule */
|
|
hr {
|
|
box-sizing: content-box;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
border-bottom: 1px solid var(--color-border-muted);
|
|
height: 0.25em;
|
|
padding: 0;
|
|
margin: 24px 0;
|
|
background-color: var(--color-border-default);
|
|
border: 0;
|
|
&::before {
|
|
display: table;
|
|
content: '';
|
|
}
|
|
&::after {
|
|
display: table;
|
|
clear: both;
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
/* 表单元素并不继承父级 font 的问题 */
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
margin: 0;
|
|
overflow: visible;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
/* 外观显示为按钮 */
|
|
[type='button'],
|
|
[type='reset'],
|
|
[type='submit'] {
|
|
-webkit-appearance: button;
|
|
}
|
|
/* 这两个表单样式规则覆盖 */
|
|
[type='checkbox'],
|
|
[type='radio'] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
/* 数字按钮内部高度自动 */
|
|
[type='number']::-webkit-inner-spin-button,
|
|
[type='number']::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
/* 搜索按钮内图标外观去除 */
|
|
[type='search']::-webkit-search-cancel-button,
|
|
[type='search']::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
/* 输入框的占位符样式 */
|
|
::-webkit-input-placeholder {
|
|
color: inherit;
|
|
opacity: 0.54;
|
|
}
|
|
/* 文件选择按钮样式统一 */
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button;
|
|
font: inherit;
|
|
}
|
|
/* 占位符显示统一 */
|
|
::placeholder {
|
|
color: var(--color-fg-subtle);
|
|
opacity: 1;
|
|
}
|
|
/* table内的td,th去除留白 */
|
|
td,
|
|
th {
|
|
padding: 0;
|
|
}
|
|
/* 伸缩框鼠标显示 */
|
|
details summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
details:not([open]) > *:not(summary) {
|
|
display: none !important;
|
|
}
|
|
/* 按键显示 */
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
|
|
Liberation Mono, monospace;
|
|
line-height: 10px;
|
|
color: var(--color-fg-default);
|
|
vertical-align: middle;
|
|
background-color: var(--color-canvas-subtle);
|
|
border: solid 1px var(--color-neutral-muted);
|
|
border-bottom-color: var(--color-neutral-muted);
|
|
border-radius: 6px;
|
|
box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
|
|
}
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
content: '';
|
|
display: table;
|
|
}
|
|
.clearfix:after {
|
|
clear: both;
|
|
}
|
|
.clearfix {
|
|
zoom: 1;
|
|
}
|
|
/* 强制文本换行 */
|
|
.textwrap,
|
|
.textwrap td,
|
|
.textwrap th {
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
.textwrap-table {
|
|
table-layout: fixed;
|
|
}
|
|
ul {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
margin-left: 2em;
|
|
list-style: disc;
|
|
}
|
|
ol {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
margin-left: 2em;
|
|
list-style: decimal;
|
|
li {
|
|
padding-left: 0.4em;
|
|
}
|
|
}
|
|
li + li {
|
|
margin-top: 0.25em;
|
|
}
|
|
li {
|
|
ul {
|
|
margin-bottom: 0.8em;
|
|
margin-left: 2em;
|
|
list-style: circle;
|
|
li {
|
|
ul {
|
|
list-style: square;
|
|
}
|
|
}
|
|
}
|
|
ol {
|
|
margin-bottom: 0.8em;
|
|
margin-left: 2em;
|
|
}
|
|
}
|
|
.task-list-item {
|
|
list-style-type: none;
|
|
position: relative;
|
|
> input {
|
|
&:nth-child(1) {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
label {
|
|
font-weight: 400;
|
|
}
|
|
.handle {
|
|
display: none;
|
|
}
|
|
input[type='checkbox'] {
|
|
width: 0.9em;
|
|
height: 0.9em;
|
|
position: absolute;
|
|
left: -1.3em;
|
|
top: 0.35em;
|
|
}
|
|
}
|
|
.task-list-item.enabled {
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.task-list-item + .task-list-item {
|
|
margin-top: 3px;
|
|
}
|
|
.contains-task-list {
|
|
// margin-left: 0.6em;
|
|
&:dir(rtl) {
|
|
.task-list-item {
|
|
input[type='checkbox'] {
|
|
margin: 0 -1.6em 0.25em 0.2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.toc{
|
|
margin-left: 0;
|
|
}
|
|
|
|
dl {
|
|
display: block;
|
|
margin-block-start: 1em;
|
|
margin-block-end: 1em;
|
|
margin-inline-start: 0px;
|
|
margin-inline-end: 0px;
|
|
unicode-bidi: isolate;
|
|
dt {
|
|
display: block;
|
|
unicode-bidi: isolate;
|
|
}
|
|
dd {
|
|
display: block;
|
|
margin-inline-start: 40px;
|
|
unicode-bidi: isolate;
|
|
}
|
|
}
|
|
}
|
|
|