a css style to make yuque atricle view comfortably.
yuque-article-style by liwoodq
Details
Authorliwoodq
LicenseNo License
Categoryyuque
Created
Updated
Size8.9 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
created at 2021.11.3
Source code
/* ==UserStyle==
@name yuque-article-style
@version 20211123.09.00
@namespace userstyles.world/user/liwoodq
@description a css style to make yuque atricle view comfortably.
@author liwoodq
@license No License
==/UserStyle== */
@-moz-document url-prefix("https://www.yuque.com/liwqend/") {
/* author: liwq */
/* 整体样式,字体-背景 */
div[class*="DocReader-module_content"],
.ne-editor-body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif!important;
background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0);
background-size: 20px 20px;
background-position: 50%;
}
/* ------------------------------------- 阅读状态 -------------------------------------------*/
/* 标题颜色修改 */
#article-title,
.lake-title {
color: #4169e1!important;
}
.ne-viewer-body ne-h1,
.ne-viewer-body ne-h2,
.ne-viewer-body ne-h3,
.ne-viewer-body ne-h4,
.ne-viewer-body ne-h5,
.ne-viewer-body ne-h6,
.ne-viewer-body ne-h7 {
color: #4169e1;
border-left: 4px solid;
padding: 0 0 0 10px;
}
/* 文本 */
.ne-viewer-body div,
.ne-viewer-body p,
.ne-viewer-body textarea,
.ne-viewer-body ne-text {
color: #595959;
}
/* 标题颜色,加粗 */
.ne-viewer-body ne-heading-content ne-text {
color: #4169e1;
font-weight: 600;
}
/* h1 */
.ne-viewer-body ne-h1 {
border-left: none;
border-bottom: 2px solid #4169e1;
padding: 0;
}
.ne-viewer-body ne-h1 ne-text {
background: #4169e1;
color: #fff;
margin: 0 3px 0 0;
padding: 3px 10px 0;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
/* 链接加粗 */
.ne-viewer-body a ne-text,
ne-link ne-text {
font-weight: 600;
}
.ne-link:hover {
border-bottom: 1px solid #4169e1;
}
/* 特殊提示框偏移量 */
.ne-viewer-body ne-alert[ne-alert-type="tips"]:before,
.ne-viewer-body ne-alert[ne-alert-type="info"]:before,
.ne-viewer-body ne-alert[ne-alert-type="success"]:before,
.ne-viewer-body ne-alert[ne-alert-type="warning"]:before,
.ne-viewer-body ne-alert[ne-alert-type="danger"]:before {
left: 222px;
}
/* ------------------------------------- 编辑状态 -------------------------------------------*/
/* 标题 */
.ne-editor-body ne-h1,
.ne-editor-body ne-h2,
.ne-editor-body ne-h3,
.ne-editor-body ne-h4,
.ne-editor-body ne-h5,
.ne-editor-body ne-h6,
.ne-editor-body ne-h7 {
color: #4169e1;
border-left: 4px solid;
padding: 0 0 0 10px;
}
/* 文本 */
.ne-editor-body div,
.ne-editor-body p,
.ne-editor-body span,
.ne-editor-body textarea {
color: #595959;
}
/* 标题颜色,加粗 */
.ne-editor-body ne-heading-content ne-text {
color: #4169e1;
font-weight: 600;
}
/* h1 */
.ne-editor-body ne-h1 {
border-left: none;
border-bottom: 2px solid #4169e1;
padding: 0;
}
.ne-editor-body ne-h1 ne-text {
background: #4169e1;
color: #fff;
margin: 0 3px 0 0;
padding: 3px 10px 0;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
/* 链接加粗 */
.ne-editor-body ne-link ne-text {
font-weight: 600;
}
.ne-editor-body ne-link ne-text::before {
content: '⌕';
font-size: 18px;
}
/* 链接样式 */
.ne-editor-body ne-link ne-text::before {
content: '⌕';
font-size: 18px;
}
ne-link:hover {
border-bottom: 1px solid #4169e1;
}
/* 特殊提示框偏移量 */
.ne-editor-body ne-alert[ne-alert-type="tips"]:before,
.ne-editor-body ne-alert[ne-alert-type="info"]:before,
.ne-editor-body ne-alert[ne-alert-type="success"]:before,
.ne-editor-body ne-alert[ne-alert-type="warning"]:before,
.ne-editor-body ne-alert[ne-alert-type="danger"]:before {
left: 546px;
}
/* ------------------------------------- 其他 -------------------------------------------*/
/* 行内代码 */
ne-code-content {
padding: .065em .5em!important;
border: none!important;
background-color: #f7f7f7!important;
}
ne-code-content ne-text {
color: #ff7d2c!important;
}
/* 代码块 */
ne-card[data-card-name="codeblock"] {
border: none!important;
}
/* 提示块,ne-alert */
ne-alert[ne-alert-type="tips"],
ne-alert[ne-alert-type="info"],
ne-alert[ne-alert-type="success"],
ne-alert[ne-alert-type="warning"],
ne-alert[ne-alert-type="danger"] {
border-top: none;
border-bottom: none;
border-right: none;
border-left: 4px solid;
background-color: #f7f7f7;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: 20px;
}
ne-alert[ne-alert-type="tips"] ne-text,
ne-alert[ne-alert-type="info"] ne-text,
ne-alert[ne-alert-type="success"] ne-text,
ne-alert[ne-alert-type="warning"] ne-text,
ne-alert[ne-alert-type="danger"] ne-text {
font-weight: bold;
}
ne-alert[ne-alert-type="tips"]:before,
ne-alert[ne-alert-type="info"]:before,
ne-alert[ne-alert-type="success"]:before,
ne-alert[ne-alert-type="warning"]:before,
ne-alert[ne-alert-type="danger"]:before {
position: absolute;
color: #fff;
width: 20px;
height: 20px;
border-radius: 100%;
text-align: center;
line-height: 20px;
font-weight: bold;
font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
}
ne-alert[ne-alert-type="tips"] {
border-left-color: #a6a6a6;
}
ne-alert[ne-alert-type="tips"]:before {
content: "i";
background: #a6a6a6;
}
ne-alert[ne-alert-type="info"] {
border-left-color: #6ac5fd;
}
ne-alert[ne-alert-type="info"]:before {
content: "?";
background: #6ac5fd;
}
ne-alert[ne-alert-type="success"] {
border-left-color: #42b983;
}
ne-alert[ne-alert-type="success"]:before {
content: "✔";
background: #42b983;
}
ne-alert[ne-alert-type="warning"] {
border-left-color: #ffa500;
}
ne-alert[ne-alert-type="warning"]:before {
content: "!";
background: #ffa500;
}
ne-alert[ne-alert-type="danger"] {
border-left-color: #f66;
}
ne-alert[ne-alert-type="danger"]:before {
content: "✘";
background: #f66;
}
/* 表格 */
tbody tr:first-child td {
background-color: #25B864;
}
tbody tr:first-child td ne-text {
color: #fff;
font-weight: 600;
}
}
@-moz-document url-prefix("https://www.yuque.com/liwqend/") {
.ne-code-viewer {
background-color: #0F111A;
}
/*
Name: material
Author: Mattia Astorino (http://github.com/equinusocio)
Website: https://material-theme.site/
*/
.cm-s-default.CodeMirror {
background-color: #0F111A;
color: #8F93A2;
}
.cm-s-default .CodeMirror-gutters {
background: #0F111A;
color: #464B5D;
border: none;
}
.cm-s-default .CodeMirror-guttermarker,
.cm-s-default .CodeMirror-guttermarker-subtle,
.cm-s-default .CodeMirror-linenumber {
color: #464B5D;
}
.cm-s-default .CodeMirror-cursor {
border-left: 1px solid #FFCC00;
}
.cm-s-default.cm-fat-cursor .CodeMirror-cursor {
background-color: #a2a8a175 !important;
}
.cm-s-default .cm-animate-fat-cursor {
background-color: #a2a8a175 !important;
}
.cm-s-default div.CodeMirror-selected {
background: rgba(113, 124, 180, 0.2);
}
.cm-s-default.CodeMirror-focused div.CodeMirror-selected {
background: rgba(113, 124, 180, 0.2);
}
.cm-s-default .CodeMirror-line::selection,
.cm-s-default .CodeMirror-line>span::selection,
.cm-s-default .CodeMirror-line>span>span::selection {
background: rgba(128, 203, 196, 0.2);
}
.cm-s-default .CodeMirror-line::-moz-selection,
.cm-s-default .CodeMirror-line>span::-moz-selection,
.cm-s-default .CodeMirror-line>span>span::-moz-selection {
background: rgba(128, 203, 196, 0.2);
}
.cm-s-default .CodeMirror-activeline-background {
background: rgba(0, 0, 0, 0.5);
}
.cm-s-default .cm-keyword {
color: #C792EA;
}
.cm-s-default .cm-operator {
color: #89DDFF;
}
.cm-s-default .cm-variable-2 {
color: #EEFFFF;
}
.cm-s-default .cm-variable-3,
.cm-s-default .cm-type {
color: #f07178;
}
.cm-s-default .cm-builtin {
color: #FFCB6B;
}
.cm-s-default .cm-atom {
color: #F78C6C;
}
.cm-s-default .cm-number {
color: #FF5370;
}
.cm-s-default .cm-def {
color: #82AAFF;
}
.cm-s-default .cm-string {
color: #C3E88D;
}
.cm-s-default .cm-string-2 {
color: #f07178;
}
.cm-s-default .cm-comment {
color: #464B5D;
}
.cm-s-default .cm-variable {
color: #f07178;
}
.cm-s-default .cm-tag {
color: #FF5370;
}
.cm-s-default .cm-meta {
color: #FFCB6B;
}
.cm-s-default .cm-attribute {
color: #C792EA;
}
.cm-s-default .cm-property {
color: #C792EA;
}
.cm-s-default .cm-qualifier {
color: #DECB6B;
}
.cm-s-default .cm-variable-3,
.cm-s-default .cm-type {
color: #DECB6B;
}
.cm-s-default .cm-error {
color: rgba(255, 255, 255, 1.0);
background-color: #FF5370;
}
.cm-s-default .CodeMirror-matchingbracket {
text-decoration: underline;
color: white !important;
}
}