422 lines
11 KiB
SCSS
422 lines
11 KiB
SCSS
// Settings
|
|
$transition-in : .25s;
|
|
$transition-out : 1s;
|
|
// Settings
|
|
|
|
.wmd-icon>input{display : none;}
|
|
.wmd-code-block{
|
|
display : block;
|
|
position : relative;
|
|
margin : 2em 4%;
|
|
margin-bottom : 4em;
|
|
font-size : .9em;
|
|
.code{
|
|
position : relative;
|
|
top : 2.5em;
|
|
width : 100%;
|
|
height : auto;
|
|
max-height : 30em;
|
|
overflow-x : hidden;
|
|
overflow-y : auto;
|
|
}
|
|
.data{
|
|
position : absolute;
|
|
list-style-type : none;
|
|
margin : 0em 2em;
|
|
padding : 0em;
|
|
li{
|
|
display : inline-block;
|
|
margin : 0em;
|
|
padding : .1em .4em;
|
|
height : 1.2em;
|
|
border : .1em solid #BBB;
|
|
box-shadow : 0em 0em .8em inset #BBB;
|
|
&::before{font-family : monospace;}
|
|
&>[data-i18n]{display : none;}
|
|
}
|
|
[data-icon]{margin-right : .3em;}
|
|
&>:first-child{display : none;}
|
|
&>:nth-child(2){border-radius : .6em 0em 0em .6em;}
|
|
&>:last-child{border-radius : 0em .6em .6em 0em;}
|
|
}
|
|
ol{
|
|
width : 100%;
|
|
margin : 0em;
|
|
padding : 0em;
|
|
padding-bottom : 1.5em;
|
|
font-family : monospace;
|
|
li{
|
|
margin-left : 4em;
|
|
&::marker{font-size : .85em;}
|
|
&:nth-child(2n + 1){background-color : rgba(200, 200, 200, .2);}
|
|
}
|
|
}
|
|
.content{
|
|
position : absolute;
|
|
top : 0em;
|
|
left : 6.3em;
|
|
right : 0em;
|
|
margin : 0em;
|
|
font-family : monospace;
|
|
background : transparent;
|
|
overflow-y : hidden;
|
|
overflow-x : auto;
|
|
&>div,&>pre{
|
|
padding : .1em;
|
|
white-space : nowrap;
|
|
box-sizing : border-box;
|
|
}
|
|
}
|
|
&[data-type=mermaid] svg{font-size : 1em;}
|
|
}
|
|
.wmd-quote{
|
|
display : flex;
|
|
margin : 1em 2em;
|
|
padding-left : .5em;
|
|
font-size : .9em;
|
|
border-left : .5em solid #AAA;
|
|
border-radius : .5em 0em 0em .5em;
|
|
flex-direction : row;
|
|
&>div{
|
|
flex : auto;
|
|
align-self : start;
|
|
&+div{
|
|
width : 100%;
|
|
padding-left : 1em;
|
|
}
|
|
}
|
|
.quote-type{
|
|
text-align : center;
|
|
span{
|
|
display : block;
|
|
&+span{font-weight : 900;}
|
|
}
|
|
}
|
|
[data-avatar]{
|
|
width : 4em;
|
|
height : 4em;
|
|
border-radius : 1em;
|
|
background-color : #888;
|
|
background-position : center center;
|
|
background-size : cover;
|
|
}
|
|
[data-icon]{font-size : 3em;}
|
|
[data-avatar=srx00],[data-avatar=kyman]{
|
|
background-color : transparent;
|
|
background-image :
|
|
url("https://cdn.k3y.pw/data/KyMAN-water-mark.png"),
|
|
url("https://cdn.local/data/KyMAN-water-mark.png");
|
|
}
|
|
}
|
|
|
|
[data-include]{
|
|
&>.link{
|
|
margin-top : 2em;
|
|
font-size : .9em;
|
|
opacity : .8;
|
|
}
|
|
&+h1,&+h2,&+h3,&+h4,&+h5,&+h6{margin-top : 0em;}
|
|
&>.wmarkdown{&>h1,&>h2,&>h3,&>h4,&>h5,&>h6{&:first-child{margin-top : 0em;}}}
|
|
[data-include]>.link>a{display : none;}
|
|
}
|
|
|
|
.wmd-title{
|
|
&>:last-child{
|
|
margin-left : .3em;
|
|
font-size : .6em;
|
|
span{
|
|
opacity : .3;
|
|
transition-duration : $transition-out;
|
|
transition-property : opacity;
|
|
&::before{margin : 0em;}
|
|
&:hover{
|
|
opacity : 1;
|
|
transition-duration : $transition-in;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wmd-table{
|
|
padding : 1em 0em;
|
|
margin-left : 5%;
|
|
margin-right : 5%;
|
|
text-align : center;
|
|
font-size : .9em;
|
|
table{
|
|
max-width : 100%;
|
|
margin-left : auto;
|
|
margin-right : auto;
|
|
border-collapse : separate;
|
|
border-spacing : 0;
|
|
border : .1em solid #888;
|
|
box-sizing : border-box;
|
|
border-radius : .3em;
|
|
td,th{
|
|
padding : .2em .5em;
|
|
border : .05em solid mix(#888, rgba(255, 255, 255, 0), 50%);
|
|
}
|
|
&>:first-child>:first-child>:first-child{border-top-left-radius : .3em;}
|
|
&>:first-child>:first-child>:last-child{border-top-right-radius : .3em;}
|
|
&>:last-child>:last-child>:first-child{border-bottom-left-radius : .3em;}
|
|
&>:last-child>:last-child>:last-child{border-bottom-right-radius : .3em;}
|
|
}
|
|
thead,tfoot{th,td{background-color : mix(#888, rgba(255, 255, 255, 0), 10%);}}
|
|
tbody>tr{
|
|
td,th{
|
|
background-color : rgba(255, 255, 255, 0);
|
|
transition-duration : $transition-out;
|
|
transition-property : background-color;
|
|
}
|
|
&:nth-child(n):hover{td,th{
|
|
background-color : mix(#888, rgba(255, 255, 255, 0), 10%);
|
|
transition-duration : $transition-in;
|
|
}}
|
|
&:nth-child(2n + 1){&>td,&>th{
|
|
background-color : mix(#888, rgba(255, 255, 255, 0), 20%);
|
|
}}
|
|
}
|
|
}
|
|
|
|
.wmd-list,.wmd-main-menu{
|
|
[data-deployed=false]{&~ul,&~ol{display : none;}}
|
|
[data-icon=deploy]{
|
|
user-select : none;
|
|
&+[data-i18n]{display : none;}
|
|
}
|
|
}
|
|
|
|
.wmd,.wmd-dictionary-box{.wmd-dictionary-item[data-role]{cursor : help;}}
|
|
.wmd-dictionary-box{
|
|
position : absolute;
|
|
max-width : 15em;
|
|
max-height : 15em;
|
|
padding : .3em;
|
|
border : .1em solid #888;
|
|
background-color : #EFEFEF;
|
|
overflow : auto;
|
|
box-sizing : border-box;
|
|
box-shadow : .1em .1em .2em #000;
|
|
border-radius : .5em;
|
|
.links{text-align : center;}
|
|
a[href]{
|
|
display : inline-block;
|
|
width : 2em;
|
|
height : 2em;
|
|
margin : .3em;
|
|
background-color : rgba(0, 0, 0, .1);
|
|
border : .1em solid #888;
|
|
background-position : center center;
|
|
background-size : cover;
|
|
box-sizing : border-box;
|
|
border-radius : 1em;
|
|
}
|
|
}
|
|
|
|
.wmd-main-menu-button{
|
|
padding : 0em 1em;
|
|
text-align : right;
|
|
[data-icon]{
|
|
&::before{
|
|
margin : 0em;
|
|
font-size : 2em;
|
|
}
|
|
&+span{display : none;}
|
|
}
|
|
}
|
|
.wmd-main-menu{
|
|
position : absolute;
|
|
top : 0em;
|
|
right : 0em;
|
|
margin-top : 4em;
|
|
margin-right : 1em;
|
|
padding : .3em;
|
|
border : .1em solid #888;
|
|
background-color : #EFEFEF;
|
|
overflow : hidden;
|
|
z-index : 100;
|
|
border-radius : .5em;
|
|
box-shadow :
|
|
// 0em 0em 1em inset #888,
|
|
.1em .1em .2em #000;
|
|
&>ul{
|
|
max-width : 25em;
|
|
max-height : 25em;
|
|
margin : 0em;
|
|
padding : 0em;
|
|
overflow : auto;
|
|
}
|
|
ul{
|
|
list-style-type : none;
|
|
padding-right : 0em;
|
|
}
|
|
a:first-child{
|
|
margin-left : 1.1em;
|
|
}
|
|
li{
|
|
padding : .2em .3em;
|
|
background-color : rgba(0, 0, 0, 0);
|
|
transition-property : background-color;
|
|
transition-duration : $transition-in;
|
|
&:hover{
|
|
background-color : rgba(0, 0, 0, .1);
|
|
transition-duration : $transition-in;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wmd-media{
|
|
&:not([data-type=icon]){
|
|
display : block;
|
|
position : relative;
|
|
left : 50%;
|
|
width : 30em;
|
|
margin-left : -15em;
|
|
text-align : center;
|
|
box-sizing : border-box;
|
|
img{
|
|
width : 100%;
|
|
height : auto;
|
|
max-width : 30em;
|
|
max-height : 30em;
|
|
&+span{
|
|
// display : none;
|
|
background-position : center center;
|
|
background-size : cover;
|
|
}
|
|
}
|
|
&[data-type=image] .text{display : none;}
|
|
&[data-type=picture] .text{
|
|
display : block;
|
|
width : 100%;
|
|
margin-top : -.2em;
|
|
text-align : right;
|
|
font-size : .85em;
|
|
}
|
|
}
|
|
&[data-type=icon]{
|
|
display : inline-block;
|
|
height : 1em;
|
|
// vertical-align : middle;
|
|
img{
|
|
width : auto;
|
|
height : 100%;
|
|
}
|
|
.text{display : none;}
|
|
}
|
|
}
|
|
|
|
.wmd-code-doc{
|
|
display : block;
|
|
width : 100%;
|
|
font-size : .85em;
|
|
border : none;
|
|
min-inline-size : auto;
|
|
// border-radius : .5em;
|
|
overflow-x : auto;
|
|
box-sizing : border-box;
|
|
legend{display : none;}
|
|
.description{
|
|
font-family : monospace;
|
|
white-space : pre;
|
|
}
|
|
.return-type{margin-right : 1em;}
|
|
.return-type,.typed{
|
|
&:before{content : "[";}
|
|
&:after{content : "]";}
|
|
}
|
|
.environment,.access{
|
|
display : inline-block;
|
|
margin-right : 1em;
|
|
text-transform : capitalize;
|
|
}
|
|
.arguments{
|
|
&:before{content : "(";}
|
|
&:after{content : ")";}
|
|
}
|
|
.argument{
|
|
display : block;
|
|
width : 100%;
|
|
padding-left : 4em;
|
|
box-sizing : border-box;
|
|
&>span+span{margin-left : 1em;}
|
|
&>:nth-child(5):before{
|
|
content : "=";
|
|
margin-right : 1em;
|
|
// margin : 0em 1em;
|
|
}
|
|
}
|
|
.default-value::before{content : "= ";}
|
|
&[data-arguments-l='0']>.definition{display : none;}
|
|
}
|
|
|
|
.wmd-color-sample{
|
|
display : inline-block;
|
|
width : 1em;
|
|
height : 1em;
|
|
border : .1em solid #222;
|
|
vertical-align : middle;
|
|
border-radius : .3em;
|
|
box-shadow : 0em 0em .2em #EFEFEF;
|
|
&>*{display : none;}
|
|
}
|
|
|
|
.wmd-avatars{
|
|
|
|
$size : 7em;
|
|
$half : $size * .5;
|
|
$favicon : 1.8em;
|
|
|
|
display : block;
|
|
list-style-type : none;
|
|
text-align : center;
|
|
&>*{
|
|
display : inline-block;
|
|
position : relative;
|
|
width : $size;
|
|
height : $size;
|
|
margin : 1em;
|
|
.wmd-media{
|
|
left : auto;
|
|
margin : 0em;
|
|
width : 100%;
|
|
height : 100%;
|
|
}
|
|
a+a{
|
|
display : block;
|
|
position : absolute;
|
|
width : $favicon;
|
|
height : $favicon;
|
|
border : .1em solid #888;
|
|
background-color : #EFEFEF;
|
|
background-position : center center;
|
|
background-size : cover;
|
|
border-radius : 50%;
|
|
box-sizing : border-box;
|
|
}
|
|
}
|
|
@for $i from 1 through 20{
|
|
[data-links='#{$i}']{
|
|
@for $j from 1 through $i{
|
|
&>:nth-child(#{$j + 1}){
|
|
top : ($size / 2) - ($favicon / 2);
|
|
left : ($size / 2) - ($favicon / 2);
|
|
margin-top : calc(sin(#{$j * (360deg / $i) + 45deg}) * #{$size / 2});
|
|
margin-left : calc(cos(#{$j * (360deg / $i)} + 45deg) * #{$size / 2});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
img{display : none;}
|
|
.image{
|
|
display : block;
|
|
position : absolute;
|
|
top : 0em;
|
|
left : 0em;
|
|
width : 100%;
|
|
height : 100%;
|
|
border : .1em solid #888;
|
|
border-radius : 50%;
|
|
box-sizing : border-box;
|
|
}
|
|
} |