♻️(document): 调整文档结构
This commit is contained in:
就眠儀式
158
package/document-component/src/assets/css/code.css
Normal file
158
package/document-component/src/assets/css/code.css
Normal file
@@ -0,0 +1,158 @@
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
code .token.deleted {
|
||||
color: #ec5975;
|
||||
}
|
||||
|
||||
div[class*='language-'] {
|
||||
position: relative;
|
||||
margin: 1rem -1.5rem;
|
||||
background-color: #fafafa;
|
||||
overflow-x: auto;
|
||||
border: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
li > div[class*='language-'] {
|
||||
border-radius: 6px 0 0 6px;
|
||||
margin: 1rem -1.5rem 1rem -1.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
div[class*='language-'] {
|
||||
margin: 1rem 1.8rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
li > div[class*='language-'] {
|
||||
margin: 1rem 0 1rem 0rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.lay-code div[class*='language-'] {
|
||||
margin: 1rem 0.8rem;
|
||||
margin: 0.5rem 0.8rem 1rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='language-'] pre,
|
||||
[class*='language-'] code {
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
[class*='language-'] pre {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: transparent;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
[class*='language-'] pre p {
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
[class*='language-'] code {
|
||||
padding: 0;
|
||||
color: #303133;
|
||||
background-color: #fafafa;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 23px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
*
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
38
package/document-component/src/assets/css/index.css
Normal file
38
package/document-component/src/assets/css/index.css
Normal file
@@ -0,0 +1,38 @@
|
||||
@import './code.css';
|
||||
@import './markdown.css';
|
||||
@import './mobile.css';
|
||||
|
||||
.layui-menu-lg li {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.layui-menu-lg .layui-menu-body-title a:hover,
|
||||
.layui-menu-lg li:hover {
|
||||
background: 0 0;
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
|
||||
.layui-menu-lg li .layui-menu-body-panel {
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.layui-menu-lg li .layui-menu-body-panel-left {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.layui-menu .layui-menu-item-checked,
|
||||
.layui-menu .layui-menu-item-checked2 {
|
||||
background-color: var(--global-neutral-color-2) !important;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.layui-menu .layui-menu-item-checked a,
|
||||
.layui-menu .layui-menu-item-checked2 a {
|
||||
color: var(--global-checked-color);
|
||||
}
|
||||
|
||||
.layui-menu-body-title a {
|
||||
display: block;
|
||||
margin: -5px -15px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
243
package/document-component/src/assets/css/markdown.css
Normal file
243
package/document-component/src/assets/css/markdown.css
Normal file
@@ -0,0 +1,243 @@
|
||||
.utterances {
|
||||
margin-top: 30px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.4;
|
||||
font-size: 16px;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 600 !important;
|
||||
font-size: 16.8px !important;
|
||||
margin-top: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 700;
|
||||
font-size: 16.8px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
h1:hover .header-anchor,
|
||||
h1:focus .header-anchor,
|
||||
h2:hover .header-anchor,
|
||||
h2:focus .header-anchor,
|
||||
h3:hover .header-anchor,
|
||||
h3:focus .header-anchor,
|
||||
h4:hover .header-anchor,
|
||||
h4:focus .header-anchor,
|
||||
h5:hover .header-anchor,
|
||||
h5:focus .header-anchor,
|
||||
h6:hover .header-anchor,
|
||||
h6:focus .header-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 420px) {
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 4px !important;
|
||||
margin-bottom: 22px !important;
|
||||
color: #000000d9 !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 20px !important;
|
||||
font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
|
||||
helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
|
||||
segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
area,
|
||||
button,
|
||||
[role='button'],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
a.header-anchor {
|
||||
float: left;
|
||||
margin-top: 0.125em;
|
||||
margin-left: -0.87em;
|
||||
padding-right: 0.23em;
|
||||
font-size: 0.85em;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
a.header-anchor:hover,
|
||||
a.header-anchor:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.site-doc-icon {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.site-doc-icon li .doc-icon-name,
|
||||
.site-doc-icon li .doc-icon-code {
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
.site-doc-icon li .doc-icon-fontclass {
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
padding: 0 5px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.site-doc-icon li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16.5%;
|
||||
height: 105px;
|
||||
line-height: 25px;
|
||||
padding: 20px 0;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #e2e2e2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
.site-doc-icon li:hover{
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
.site-doc-icon li .layui-icon {
|
||||
display: inline-block;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.site-doc-color {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.site-doc-necolor li div {
|
||||
border-radius: 0;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.site-doc-color li div {
|
||||
padding: 20px 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.site-doc-bgcolor li {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.anim .site-doc-anim li {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16.5%;
|
||||
height: 105px;
|
||||
line-height: 25px;
|
||||
padding: 20px 0;
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
border: 1px solid #e2e2e2;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li .layui-anim {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
line-height: 125px;
|
||||
margin: 0 auto 10px;
|
||||
text-align: center;
|
||||
background-color: var(--global-primary-color);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li .code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.layui-menu-item-group {
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.layui-menu .layui-menu-item-group > .layui-menu-body-title {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.lay-link:hover{
|
||||
color: #5FB878;
|
||||
}
|
||||
29
package/document-component/src/assets/css/mobile.css
Normal file
29
package/document-component/src/assets/css/mobile.css
Normal file
@@ -0,0 +1,29 @@
|
||||
@media screen and (max-width:768px) {
|
||||
#app > .layui-layout > .layui-header > .layui-logo {
|
||||
display: none;
|
||||
}
|
||||
#app > .layui-layout > .layui-header > .layui-layout-right {
|
||||
display: none;
|
||||
}
|
||||
#app > .layui-layout > .layui-header > .layui-layout-left {
|
||||
display: none;
|
||||
}
|
||||
#app > .layui-layout > .layui-layout > .layui-side {
|
||||
display: none;
|
||||
}
|
||||
#app > .layui-layout > .layui-layout > .layui-body {
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
}
|
||||
#app > .layui-layout > .layui-layout > .layui-body > div {
|
||||
padding: 10px!important;
|
||||
margin-right: 0px!important;
|
||||
width: calc(100% - 20px)!important;
|
||||
}
|
||||
#app > .layui-layout > .layui-layout > .layui-body .lay-aside {
|
||||
display: none;
|
||||
}
|
||||
.site-banner {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user