567 lines
18 KiB
SCSS
567 lines
18 KiB
SCSS
.anp{
|
|
@each $mode, $is_dark in (
|
|
"dark" : "true",
|
|
"light" : "false"
|
|
){&[data-gui-mode=#{$mode}],&[data-gui-mode=default][data-dark-mode=#{$is_dark}]{
|
|
.wmd-code-block{
|
|
.data li{
|
|
border-color : map-deep-get($color, $mode, fore);
|
|
box-shadow : 0em 0em .8em inset map-deep-get($color, $mode, fore);
|
|
}
|
|
ol li:nth-child(2n + 1){background-color : mix(map-deep-get($color, grey), map-deep-get($color, $mode, back), 20%);}
|
|
}
|
|
.wmd-code-sample-block>nav>ul>li{
|
|
border-color : map-deep-get($color, $mode, fore);
|
|
&[data-selected=true]{box-shadow : 0em 0em .2em inset map-deep-get($color, $mode, fore);}
|
|
&:hover{box-shadow : 0em 0em 1.2em inset map-deep-get($color, $mode, fore);}
|
|
}
|
|
.wmd-quote{
|
|
border-left-color : mix(map-deep-get($color, grey), map-deep-get($color, $mode, fore), 20%);
|
|
[data-avatar]{background-color : map-deep-get($color, grey);}
|
|
}
|
|
.wmd-table table{
|
|
td,th{border-color : mix(map-deep-get($color, grey), map-deep-get($color, $mode, transparent), 50%);}
|
|
thead,tfoot{th,td{background-color : mix(map-deep-get($color, grey), map-deep-get($color, $mode, transparent), 10%);}}
|
|
tbody>tr{
|
|
td,th{
|
|
background-color : map-deep-get($color, $mode, transparent);
|
|
}
|
|
&:nth-child(n):hover{td,th{
|
|
background-color : mix(map-deep-get($color, grey), map-deep-get($color, $mode, transparent), 10%);
|
|
}}
|
|
&:nth-child(2n + 1){&>td,&>th{
|
|
background-color : mix(map-deep-get($color, grey), map-deep-get($color, $mode, transparent), 20%);
|
|
}}
|
|
}
|
|
}
|
|
.wmd-dictionary-box{
|
|
border-color : map-deep-get($color, grey);
|
|
background-color : map-deep-get($color, $mode, back);
|
|
// box-shadow : .1em .1em .2em map-deep-get($color, $mode, full);
|
|
box-shadow : .1em .1em .2em map-deep-get($color, grey);
|
|
a[href]{
|
|
background-color : mix(map-deep-get($color, $mode, full), map-deep-get($color, $mode, transparent), 10%);
|
|
border-color : map-deep-get($color, grey);
|
|
}
|
|
}
|
|
.wmd-main-menu{
|
|
border : .1em solid map-deep-get($color, grey);
|
|
background-color : map-deep-get($color, $mode, back);
|
|
box-shadow : .1em .1em .2em map-deep-get($color, grey);
|
|
li{
|
|
background-color : map-deep-get($color, $mode, transparent);
|
|
&:hover{background-color : mix(map-deep-get($color, $mode, fore), map-deep-get($color, $mode, transparent), 5%);}
|
|
}
|
|
}
|
|
.wmd-color-sample{
|
|
border-color : map-deep-get($color, $mode, fore);
|
|
box-shadow : 0em 0em .2em map-deep-get($color, $mode, back);
|
|
}
|
|
.wmd-avatars{
|
|
a+a{
|
|
border : .1em solid map-deep-get($color, grey);
|
|
background-color : map-deep-get($color, $mode, back);
|
|
}
|
|
.image{border-color : map-deep-get($color, grey);}
|
|
}
|
|
.wmd-dictionary-item[data-role][data-i]{
|
|
color : mix(map-deep-get($color, $mode, primary), map-deep-get($color, $mode, fore), 50%);
|
|
}
|
|
[data-deployed]>[data-icon=deploy]{
|
|
color : mix(map-deep-get($color, $mode, primary), map-deep-get($color, $mode, fore), 50%);
|
|
&:hover{
|
|
color : mix(map-deep-get($color, $mode, secondary), map-deep-get($color, $mode, fore), 50%);
|
|
}
|
|
}
|
|
}}
|
|
[data-deployed]>[data-icon=deploy]{
|
|
transition-property : color;
|
|
transition-duration : $transition-out;
|
|
&:hover{
|
|
transition-duration : $transition-in;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wmd-icon.checkbox>input+span::before{content : unicode("f0c8"); font-family : "FA6FR";}
|
|
.wmd-icon.checkbox>input:disabled+span::before{content : unicode("f0c8"); font-family : "FA6FS"; opacity : .5;}
|
|
.wmd-icon.checkbox>input:checked+span::before{content : unicode("f14a"); font-family : "FA6FR";}
|
|
.wmd-icon.radio-button>input+span::before{content : unicode("f111"); font-family : "FA6FR";}
|
|
.wmd-icon.radio-button>input:disabled+span::before{content : unicode("f111"); font-family : "FA6FS"; opacity : .5;}
|
|
.wmd-icon.radio-button>input:checked+span::before{content : unicode("f192"); font-family : "FA6FR";}
|
|
.wmd-icon.tick>input+span::before{content : unicode("f00d"); font-family : "FA6FS";}
|
|
.wmd-icon.tick>input:disabled+span::before{content : unicode("f560"); font-family : "FA6FS";}
|
|
.wmd-icon.tick>input:checked+span::before{content : unicode("f00c"); font-family : "FA6FS";}
|
|
.wmarkdown [data-icon=warning]::before,.wmarkdown [data-icon=warn]::before{content : unicode("f071"); font-family : "FA6FS";}
|
|
.wmarkdown [data-icon=ask]::before,.wmarkdown [data-icon=question]::before{content : unicode("f059"); font-family : "FA6FS";}
|
|
.wmarkdown [data-icon=answer]::before{content : unicode("f138"); font-family : "FA6FS";}
|
|
.wmarkdown [data-icon=comment]::before{content : unicode("f075"); font-family : "FA6FR";}
|
|
.wmarkdown [data-icon=note]::before{content : unicode("f249"); font-family : "FA6FR";}
|
|
.wmarkdown [data-icon=characters]::before{content : unicode("f031"); font-family : "FA6FS";}
|
|
.wmarkdown [data-icon=lines]::before{content : unicode("f039"); font-family : "FA6FS";}
|
|
.wmd-code-block [data-icon=type]::before{content : unicode("f15b"); font-family : "FA6FR";}
|
|
.wmd-code-block[data-type=html] [data-icon]::before{content : unicode("f1c9"); font-family : "FA6FR";}
|
|
.wmarkdown [data-icon=link]::before{content : unicode("f0c1"); font-family : "FA6FS";}
|
|
.wmarkdown [data-deployed=true]>[data-icon=deploy]::before,
|
|
.wmd-main-menu [data-deployed=true]>[data-icon=deploy]::before{content : unicode("f146"); font-family : "FA6FR";}
|
|
.wmarkdown [data-deployed=false]>[data-icon=deploy]::before,
|
|
.wmd-main-menu [data-deployed=false]>[data-icon=deploy]::before{content : unicode("f0fe"); font-family : "FA6FR";}
|
|
.wmd-main-menu-button [data-icon=menu]::before{content : unicode("f0c9"); font-family : "FA6FS";}
|
|
.wmarkdown [data-icon=view_switch]::before{content : unicode("f074"); font-family : "FA6FS";}
|
|
.wmd-dictionary-box a{
|
|
&[data-type=phone],&[data-type=mail],&[data-type=samba]{&::before{
|
|
display : inline-block;
|
|
padding : .4em 0em;
|
|
font-family : "FA6FS";
|
|
}}
|
|
&[data-type=samba]::before{content : unicode("");}
|
|
&[data-type=phone]::before{content : unicode("f095");}
|
|
&[data-type=mail]::before{content : "@";}
|
|
}
|
|
|
|
.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-width : .1em;
|
|
border-style : solid;
|
|
&::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;}
|
|
}
|
|
}
|
|
.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-code-sample-block{
|
|
&[data-processed=false]{display : none;}
|
|
&>nav>ul{
|
|
margin : 0em;
|
|
padding : 0em;
|
|
list-style-type : none;
|
|
text-align : left;
|
|
&>li{
|
|
display : inline-block;
|
|
padding : .2em .5em;
|
|
border-width : .1em;
|
|
border-style : solid;
|
|
cursor : pointer;
|
|
box-shadow : 0em 0em .8em inset $color-fore;
|
|
transition-duration : $transition-out;
|
|
transition-property : box-shadow;
|
|
&:hover{
|
|
transition-duration : $transition-in;
|
|
}
|
|
}
|
|
&>:first-child{border-radius : .3em 0em 0em .3em;}
|
|
&>:last-child{border-radius : 0em .3em .3em 0em;}
|
|
}
|
|
}
|
|
.wmd-quote{
|
|
display : flex;
|
|
margin : 1em 2em;
|
|
padding-left : .5em;
|
|
font-size : .9em;
|
|
border-left-width : .5em;
|
|
border-left-style : solid;
|
|
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-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");
|
|
}
|
|
}
|
|
|
|
.wmd{
|
|
[data-include]{
|
|
&>.link{
|
|
margin-top : 2em;
|
|
font-size : .9em;
|
|
opacity : .8;
|
|
}
|
|
@for $i from 1 through 6{
|
|
// font-size : (6 - $i) * 3em;
|
|
&+h#{$i}{margin-top : 0em;}
|
|
&>.wmarkdown{&>h#{$i}{&:first-child{margin-top : 0em;}}}
|
|
}
|
|
[data-include]>.link>a{display : none;}
|
|
}
|
|
@for $i from 1 through 6{h#{$i}{font-size : (7 - $i) * .4 + 1em;}}
|
|
}
|
|
|
|
.wmd-title{
|
|
&>span+span: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-width : .05em;
|
|
border-style : solid;
|
|
}
|
|
&>: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;}
|
|
}
|
|
tbody>tr{
|
|
td,th{
|
|
transition-duration : $transition-out;
|
|
transition-property : background-color;
|
|
}
|
|
&:nth-child(n):hover{td,th{
|
|
transition-duration : $transition-in;
|
|
}}
|
|
}
|
|
}
|
|
|
|
.wmd{
|
|
span{&[data-deployed=false],&[data-deployed=true]{cursor : pointer;}}
|
|
&>ul{margin : 1em 0em;}
|
|
ul{
|
|
padding : 0em 2em;
|
|
font-size : 1em;
|
|
}
|
|
}
|
|
.wmd-main-menu ul{list-style-type : none;}
|
|
.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][data-i]{cursor : help;}}
|
|
.wmd-dictionary-box{
|
|
position : absolute;
|
|
max-width : 15em;
|
|
max-height : 15em;
|
|
padding : .3em;
|
|
border-width : .1em;
|
|
border-style : solid;
|
|
overflow : auto;
|
|
box-sizing : border-box;
|
|
border-radius : .5em;
|
|
.links{text-align : center;}
|
|
a[href]{
|
|
display : inline-block;
|
|
width : 2em;
|
|
height : 2em;
|
|
margin : .3em;
|
|
border-width : .1em;
|
|
border-style : solid;
|
|
vertical-align : middle;
|
|
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-width : .1em;
|
|
border-style : solid;
|
|
overflow : hidden;
|
|
z-index : 100;
|
|
border-radius : .5em;
|
|
&>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;
|
|
transition-property : background-color;
|
|
transition-duration : $transition-in;
|
|
&:hover{
|
|
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,.constant,.reference{
|
|
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-width : .1em;
|
|
border-style : solid;
|
|
vertical-align : middle;
|
|
border-radius : .3em;
|
|
&>*{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-width : .1em;
|
|
border-style : solid;
|
|
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-width : .1em;
|
|
border-style : solid;
|
|
border-radius : 50%;
|
|
box-sizing : border-box;
|
|
}
|
|
} |