224 lines
3.5 KiB
CSS
224 lines
3.5 KiB
CSS
/*
|
|
|
|
Atom One Dark by Daniel Gamage
|
|
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
|
|
|
|
base: #282c34
|
|
mono-1: #abb2bf
|
|
mono-2: #818896
|
|
mono-3: #5c6370
|
|
hue-1: #56b6c2
|
|
hue-2: #61aeee
|
|
hue-3: #c678dd
|
|
hue-4: #98c379
|
|
hue-5: #e06c75
|
|
hue-5-2: #be5046
|
|
hue-6: #d19a66
|
|
hue-6-2: #e6c07b
|
|
|
|
*/
|
|
|
|
.hljs {
|
|
display: block;
|
|
overflow-x: auto;
|
|
padding: 0.5em;
|
|
color: #424242;
|
|
background: #FAFAFA;
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
color: #424242;
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-doctag,
|
|
.hljs-keyword,
|
|
.hljs-formula {
|
|
color: #c678dd;
|
|
}
|
|
|
|
.hljs-section,
|
|
.hljs-name,
|
|
.hljs-selector-tag,
|
|
.hljs-deletion,
|
|
.hljs-subst {
|
|
color: #e06c75;
|
|
}
|
|
|
|
.hljs-literal {
|
|
color: #56b6c2;
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-regexp,
|
|
.hljs-addition,
|
|
.hljs-attribute,
|
|
.hljs-meta-string {
|
|
color: #98c379;
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.hljs-class .hljs-title {
|
|
color: #e6c07b;
|
|
}
|
|
|
|
.hljs-attr,
|
|
.hljs-variable,
|
|
.hljs-template-variable,
|
|
.hljs-type,
|
|
.hljs-selector-class,
|
|
.hljs-selector-attr,
|
|
.hljs-selector-pseudo,
|
|
.hljs-number {
|
|
color: #d19a66;
|
|
}
|
|
|
|
.hljs-symbol,
|
|
.hljs-bullet,
|
|
.hljs-link,
|
|
.hljs-meta,
|
|
.hljs-selector-id,
|
|
.hljs-title {
|
|
color: #61aeee;
|
|
}
|
|
|
|
.hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-link {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.component-demo .u-panel {
|
|
padding: 18px 20px;
|
|
border: 1px solid #F0F0F0;
|
|
}
|
|
.component-demo .u-panel-default .u-panel-heading{
|
|
background-color: #fff;
|
|
padding: 0;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
.component-demo p{
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.component-demo .component-title{
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.component-demo .component-code{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
color: #E14C46;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
.component-demo .u-panel .u-panel-body{
|
|
padding: 0;
|
|
}
|
|
|
|
.component-drawerc .pre-js,.component-drawerc .pre-css{
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.component-drawerc .drawer-body {
|
|
padding: 20px 20px;
|
|
}
|
|
.component-drawerc .component-code-copy {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #424242;
|
|
padding: 10px 0;
|
|
position: relative;
|
|
}
|
|
.component-drawerc .component-code-copy .uf-copy::before{
|
|
content: "\e6fc";
|
|
}
|
|
.component-drawerc .component-code-copy .uf{
|
|
font-weight: 100;
|
|
}
|
|
.component-drawerc .component-code-copy.copy-css{
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.component-drawerc .component-code-copy .u-clipboard{
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
/* 抽屉组件样式覆盖 */
|
|
.component-drawerc{
|
|
/* position: fixed; */
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1!important;
|
|
width: 0;
|
|
height: 100%;
|
|
}
|
|
.component-drawerc .drawer-mask{
|
|
background-color: rgba(0,0,0,.3);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
|
|
z-index: 2;
|
|
}
|
|
.component-drawerc .drawer-close{
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.component-drawerc .drawer{
|
|
position: fixed;
|
|
background-color: #fff;
|
|
transition: transform 300ms ease-in-out;
|
|
overflow: auto;
|
|
}
|
|
.component-drawerc .drawer-left{
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
}
|
|
.component-drawerc .drawer-right{
|
|
top: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
z-index: 3;
|
|
}
|
|
.component-drawerc .drawer-top{
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.component-drawerc .drawer-bottom{
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.component-drawerc .drawer-header{
|
|
padding: 0 20px;
|
|
border-radius: 0;
|
|
background: #E14C46;
|
|
color: #fff;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
}
|
|
.component-drawerc .drawer-header-title{
|
|
margin: 0;
|
|
color: #fff;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
} |