#wip(scss): Fixing styles and added dynamic colors.
This commit is contained in:
parent
775739bd16
commit
04252462e9
518
Public/scss/WMarkDown.base.scss
Normal file
518
Public/scss/WMarkDown.base.scss
Normal file
@ -0,0 +1,518 @@
|
||||
.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{
|
||||
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>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");
|
||||
}
|
||||
}
|
||||
|
||||
[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;}
|
||||
}
|
||||
|
||||
.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-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-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-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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
19
Public/scss/WMarkDown.common.scss
Normal file
19
Public/scss/WMarkDown.common.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@use "sass:map";
|
||||
@use "sass:list";
|
||||
@use "sass:meta";
|
||||
|
||||
@function unicode($code){
|
||||
@return unquote("\"") + unquote(str-insert($code, "\\", 1)) + unquote("\"");
|
||||
}
|
||||
|
||||
@function map-deep-get($scope, $keys...){
|
||||
|
||||
$i : 1;
|
||||
|
||||
@while (type-of($scope) == map) and ($i <= length($keys)){
|
||||
$scope : map-get($scope, nth($keys, $i));
|
||||
$i : $i + 1;
|
||||
}
|
||||
|
||||
@return $scope;
|
||||
}
|
||||
@ -1,3 +1,120 @@
|
||||
@use "sass:map";
|
||||
@use "sass:list";
|
||||
@use "sass:meta";
|
||||
.anp[data-gui-mode=dark] .wmd-code-block .data li, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-code-block .data li {
|
||||
border-color: #EFEFEF;
|
||||
box-shadow: 0em 0em 0.8em inset #EFEFEF; }
|
||||
.anp[data-gui-mode=dark] .wmd-code-block ol li:nth-child(2n + 1), .anp[data-gui-mode=default][data-dark-mode=true] .wmd-code-block ol li:nth-child(2n + 1) {
|
||||
background-color: #373737; }
|
||||
.anp[data-gui-mode=dark] .wmd-code-sample-block > nav > ul > li, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-code-sample-block > nav > ul > li {
|
||||
border-color: #EFEFEF; }
|
||||
.anp[data-gui-mode=dark] .wmd-code-sample-block > nav > ul > li[data-selected=true], .anp[data-gui-mode=default][data-dark-mode=true] .wmd-code-sample-block > nav > ul > li[data-selected=true] {
|
||||
box-shadow: 0em 0em 0.2em inset #EFEFEF; }
|
||||
.anp[data-gui-mode=dark] .wmd-code-sample-block > nav > ul > li:hover, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-code-sample-block > nav > ul > li:hover {
|
||||
box-shadow: 0em 0em 1.2em inset #EFEFEF; }
|
||||
.anp[data-gui-mode=dark] .wmd-quote, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-quote {
|
||||
border-left-color: #dbdbdb; }
|
||||
.anp[data-gui-mode=dark] .wmd-quote [data-avatar], .anp[data-gui-mode=default][data-dark-mode=true] .wmd-quote [data-avatar] {
|
||||
background-color: #898989; }
|
||||
.anp[data-gui-mode=dark] .wmd-table table td, .anp[data-gui-mode=dark] .wmd-table table th, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table td, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table th {
|
||||
border-color: rgba(137, 137, 137, 0.5); }
|
||||
.anp[data-gui-mode=dark] .wmd-table table thead th, .anp[data-gui-mode=dark] .wmd-table table thead td, .anp[data-gui-mode=dark] .wmd-table table tfoot th, .anp[data-gui-mode=dark] .wmd-table table tfoot td, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table thead th, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table thead td, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table tfoot th, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table tfoot td {
|
||||
background-color: rgba(137, 137, 137, 0.1); }
|
||||
.anp[data-gui-mode=dark] .wmd-table table tbody > tr td, .anp[data-gui-mode=dark] .wmd-table table tbody > tr th, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table tbody > tr td, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table tbody > tr th {
|
||||
background-color: rgba(0, 0, 0, 0); }
|
||||
.anp[data-gui-mode=dark] .wmd-table table tbody > tr:nth-child(n):hover td, .anp[data-gui-mode=dark] .wmd-table table tbody > tr:nth-child(n):hover th, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table tbody > tr:nth-child(n):hover td, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table tbody > tr:nth-child(n):hover th {
|
||||
background-color: rgba(137, 137, 137, 0.1); }
|
||||
.anp[data-gui-mode=dark] .wmd-table table tbody > tr:nth-child(2n + 1) > td, .anp[data-gui-mode=dark] .wmd-table table tbody > tr:nth-child(2n + 1) > th, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table tbody > tr:nth-child(2n + 1) > td, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-table table tbody > tr:nth-child(2n + 1) > th {
|
||||
background-color: rgba(137, 137, 137, 0.2); }
|
||||
.anp[data-gui-mode=dark] .wmd-dictionary-box, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-dictionary-box {
|
||||
border-color: #898989;
|
||||
background-color: #222;
|
||||
box-shadow: 0.1em 0.1em 0.2em #898989; }
|
||||
.anp[data-gui-mode=dark] .wmd-dictionary-box a[href], .anp[data-gui-mode=default][data-dark-mode=true] .wmd-dictionary-box a[href] {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-color: #898989; }
|
||||
.anp[data-gui-mode=dark] .wmd-main-menu, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-main-menu {
|
||||
border: 0.1em solid #898989;
|
||||
background-color: #222;
|
||||
box-shadow: 0.1em 0.1em 0.2em #898989; }
|
||||
.anp[data-gui-mode=dark] .wmd-main-menu li, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-main-menu li {
|
||||
background-color: rgba(0, 0, 0, 0); }
|
||||
.anp[data-gui-mode=dark] .wmd-main-menu li:hover, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-main-menu li:hover {
|
||||
background-color: rgba(239, 239, 239, 0.05); }
|
||||
.anp[data-gui-mode=dark] .wmd-color-sample, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-color-sample {
|
||||
border-color: #EFEFEF;
|
||||
box-shadow: 0em 0em 0.2em #222; }
|
||||
.anp[data-gui-mode=dark] .wmd-avatars a + a, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-avatars a + a {
|
||||
border: 0.1em solid #898989;
|
||||
background-color: #222; }
|
||||
.anp[data-gui-mode=dark] .wmd-avatars .image, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-avatars .image {
|
||||
border-color: #898989; }
|
||||
.anp[data-gui-mode=dark] .wmd-dictionary-item, .anp[data-gui-mode=default][data-dark-mode=true] .wmd-dictionary-item {
|
||||
color: #89a9d0; }
|
||||
.anp[data-gui-mode=dark] [data-deployed] > [data-icon=deploy], .anp[data-gui-mode=default][data-dark-mode=true] [data-deployed] > [data-icon=deploy] {
|
||||
color: #89a9d0; }
|
||||
.anp[data-gui-mode=dark] [data-deployed] > [data-icon=deploy]:hover, .anp[data-gui-mode=default][data-dark-mode=true] [data-deployed] > [data-icon=deploy]:hover {
|
||||
color: #d0a989; }
|
||||
.anp[data-gui-mode=light] .wmd-code-block .data li, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-code-block .data li {
|
||||
border-color: #222;
|
||||
box-shadow: 0em 0em 0.8em inset #222; }
|
||||
.anp[data-gui-mode=light] .wmd-code-block ol li:nth-child(2n + 1), .anp[data-gui-mode=default][data-dark-mode=false] .wmd-code-block ol li:nth-child(2n + 1) {
|
||||
background-color: #dbdbdb; }
|
||||
.anp[data-gui-mode=light] .wmd-code-sample-block > nav > ul > li, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-code-sample-block > nav > ul > li {
|
||||
border-color: #222; }
|
||||
.anp[data-gui-mode=light] .wmd-code-sample-block > nav > ul > li[data-selected=true], .anp[data-gui-mode=default][data-dark-mode=false] .wmd-code-sample-block > nav > ul > li[data-selected=true] {
|
||||
box-shadow: 0em 0em 0.2em inset #222; }
|
||||
.anp[data-gui-mode=light] .wmd-code-sample-block > nav > ul > li:hover, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-code-sample-block > nav > ul > li:hover {
|
||||
box-shadow: 0em 0em 1.2em inset #222; }
|
||||
.anp[data-gui-mode=light] .wmd-quote, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-quote {
|
||||
border-left-color: #373737; }
|
||||
.anp[data-gui-mode=light] .wmd-quote [data-avatar], .anp[data-gui-mode=default][data-dark-mode=false] .wmd-quote [data-avatar] {
|
||||
background-color: #898989; }
|
||||
.anp[data-gui-mode=light] .wmd-table table td, .anp[data-gui-mode=light] .wmd-table table th, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table td, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table th {
|
||||
border-color: rgba(137, 137, 137, 0.5); }
|
||||
.anp[data-gui-mode=light] .wmd-table table thead th, .anp[data-gui-mode=light] .wmd-table table thead td, .anp[data-gui-mode=light] .wmd-table table tfoot th, .anp[data-gui-mode=light] .wmd-table table tfoot td, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table thead th, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table thead td, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table tfoot th, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table tfoot td {
|
||||
background-color: rgba(137, 137, 137, 0.1); }
|
||||
.anp[data-gui-mode=light] .wmd-table table tbody > tr td, .anp[data-gui-mode=light] .wmd-table table tbody > tr th, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table tbody > tr td, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table tbody > tr th {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
.anp[data-gui-mode=light] .wmd-table table tbody > tr:nth-child(n):hover td, .anp[data-gui-mode=light] .wmd-table table tbody > tr:nth-child(n):hover th, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table tbody > tr:nth-child(n):hover td, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table tbody > tr:nth-child(n):hover th {
|
||||
background-color: rgba(137, 137, 137, 0.1); }
|
||||
.anp[data-gui-mode=light] .wmd-table table tbody > tr:nth-child(2n + 1) > td, .anp[data-gui-mode=light] .wmd-table table tbody > tr:nth-child(2n + 1) > th, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table tbody > tr:nth-child(2n + 1) > td, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-table table tbody > tr:nth-child(2n + 1) > th {
|
||||
background-color: rgba(137, 137, 137, 0.2); }
|
||||
.anp[data-gui-mode=light] .wmd-dictionary-box, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-dictionary-box {
|
||||
border-color: #898989;
|
||||
background-color: #EFEFEF;
|
||||
box-shadow: 0.1em 0.1em 0.2em #898989; }
|
||||
.anp[data-gui-mode=light] .wmd-dictionary-box a[href], .anp[data-gui-mode=default][data-dark-mode=false] .wmd-dictionary-box a[href] {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-color: #898989; }
|
||||
.anp[data-gui-mode=light] .wmd-main-menu, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-main-menu {
|
||||
border: 0.1em solid #898989;
|
||||
background-color: #EFEFEF;
|
||||
box-shadow: 0.1em 0.1em 0.2em #898989; }
|
||||
.anp[data-gui-mode=light] .wmd-main-menu li, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-main-menu li {
|
||||
background-color: rgba(255, 255, 255, 0); }
|
||||
.anp[data-gui-mode=light] .wmd-main-menu li:hover, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-main-menu li:hover {
|
||||
background-color: rgba(34, 34, 34, 0.05); }
|
||||
.anp[data-gui-mode=light] .wmd-color-sample, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-color-sample {
|
||||
border-color: #222;
|
||||
box-shadow: 0em 0em 0.2em #EFEFEF; }
|
||||
.anp[data-gui-mode=light] .wmd-avatars a + a, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-avatars a + a {
|
||||
border: 0.1em solid #898989;
|
||||
background-color: #EFEFEF; }
|
||||
.anp[data-gui-mode=light] .wmd-avatars .image, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-avatars .image {
|
||||
border-color: #898989; }
|
||||
.anp[data-gui-mode=light] .wmd-dictionary-item, .anp[data-gui-mode=default][data-dark-mode=false] .wmd-dictionary-item {
|
||||
color: #224a7b; }
|
||||
.anp[data-gui-mode=light] [data-deployed] > [data-icon=deploy], .anp[data-gui-mode=default][data-dark-mode=false] [data-deployed] > [data-icon=deploy] {
|
||||
color: #224a7b; }
|
||||
.anp[data-gui-mode=light] [data-deployed] > [data-icon=deploy]:hover, .anp[data-gui-mode=default][data-dark-mode=false] [data-deployed] > [data-icon=deploy]:hover {
|
||||
color: #7b4a22; }
|
||||
.anp [data-deployed] > [data-icon=deploy] {
|
||||
transition-property: color;
|
||||
transition-duration: 1s; }
|
||||
.anp [data-deployed] > [data-icon=deploy]:hover {
|
||||
transition-duration: 0.35s; }
|
||||
|
||||
.wmd-icon > input {
|
||||
display: none; }
|
||||
|
||||
@ -25,8 +142,8 @@
|
||||
margin: 0em;
|
||||
padding: .1em .4em;
|
||||
height: 1.2em;
|
||||
border: 0.1em solid #BBB;
|
||||
box-shadow: 0em 0em 0.8em inset #BBB; }
|
||||
border-width: .1em;
|
||||
border-style: solid; }
|
||||
.wmd-code-block .data li::before {
|
||||
font-family: monospace; }
|
||||
.wmd-code-block .data li > [data-i18n] {
|
||||
@ -49,8 +166,6 @@
|
||||
margin-left: 4em; }
|
||||
.wmd-code-block ol li::marker {
|
||||
font-size: .85em; }
|
||||
.wmd-code-block ol li:nth-child(2n + 1) {
|
||||
background-color: rgba(200, 200, 200, 0.2); }
|
||||
.wmd-code-block .content {
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
@ -78,16 +193,14 @@
|
||||
.wmd-code-sample-block > nav > ul > li {
|
||||
display: inline-block;
|
||||
padding: .2em .5em;
|
||||
border: 0.1em solid #BBB;
|
||||
border-width: .1em;
|
||||
border-style: solid;
|
||||
cursor: pointer;
|
||||
box-shadow: 0em 0em 0.8em inset #BBB;
|
||||
box-shadow: 0em 0em 0.8em inset #222;
|
||||
transition-duration: 1s;
|
||||
transition-property: box-shadow; }
|
||||
.wmd-code-sample-block > nav > ul > li[data-selected=true] {
|
||||
box-shadow: 0em 0em 0.2em inset #BBB; }
|
||||
.wmd-code-sample-block > nav > ul > li:hover {
|
||||
box-shadow: 0em 0em 1.2em inset #BBB;
|
||||
transition-duration: 0.25s; }
|
||||
transition-duration: 0.35s; }
|
||||
.wmd-code-sample-block > nav > ul > :first-child {
|
||||
border-radius: .3em 0em 0em .3em; }
|
||||
.wmd-code-sample-block > nav > ul > :last-child {
|
||||
@ -98,7 +211,8 @@
|
||||
margin: 1em 2em;
|
||||
padding-left: .5em;
|
||||
font-size: .9em;
|
||||
border-left: .5em solid #AAA;
|
||||
border-left-width: .5em;
|
||||
border-left-style: solid;
|
||||
border-radius: .5em 0em 0em .5em;
|
||||
flex-direction: row; }
|
||||
.wmd-quote > div {
|
||||
@ -117,7 +231,6 @@
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
border-radius: 1em;
|
||||
background-color: #888;
|
||||
background-position: center center;
|
||||
background-size: cover; }
|
||||
.wmd-quote [data-icon] {
|
||||
@ -126,13 +239,40 @@
|
||||
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] {
|
||||
font-size: 15em;
|
||||
font-size: 12em;
|
||||
font-size: 9em;
|
||||
font-size: 6em;
|
||||
font-size: 3em;
|
||||
font-size: 0em; }
|
||||
[data-include] > .link {
|
||||
margin-top: 2em;
|
||||
font-size: .9em;
|
||||
opacity: .8; }
|
||||
[data-include] + h1, [data-include] + h2, [data-include] + h3, [data-include] + h4, [data-include] + h5, [data-include] + h6 {
|
||||
[data-include] + h1 {
|
||||
margin-top: 0em; }
|
||||
[data-include] > .wmarkdown > h1:first-child, [data-include] > .wmarkdown > h2:first-child, [data-include] > .wmarkdown > h3:first-child, [data-include] > .wmarkdown > h4:first-child, [data-include] > .wmarkdown > h5:first-child, [data-include] > .wmarkdown > h6:first-child {
|
||||
[data-include] > .wmarkdown > h1:first-child {
|
||||
margin-top: 0em; }
|
||||
[data-include] + h2 {
|
||||
margin-top: 0em; }
|
||||
[data-include] > .wmarkdown > h2:first-child {
|
||||
margin-top: 0em; }
|
||||
[data-include] + h3 {
|
||||
margin-top: 0em; }
|
||||
[data-include] > .wmarkdown > h3:first-child {
|
||||
margin-top: 0em; }
|
||||
[data-include] + h4 {
|
||||
margin-top: 0em; }
|
||||
[data-include] > .wmarkdown > h4:first-child {
|
||||
margin-top: 0em; }
|
||||
[data-include] + h5 {
|
||||
margin-top: 0em; }
|
||||
[data-include] > .wmarkdown > h5:first-child {
|
||||
margin-top: 0em; }
|
||||
[data-include] + h6 {
|
||||
margin-top: 0em; }
|
||||
[data-include] > .wmarkdown > h6:first-child {
|
||||
margin-top: 0em; }
|
||||
[data-include] [data-include] > .link > a {
|
||||
display: none; }
|
||||
@ -148,7 +288,7 @@
|
||||
margin: 0em; }
|
||||
.wmd-title > :last-child span:hover {
|
||||
opacity: 1;
|
||||
transition-duration: 0.25s; }
|
||||
transition-duration: 0.35s; }
|
||||
|
||||
.wmd-table {
|
||||
padding: 1em 0em;
|
||||
@ -167,7 +307,8 @@
|
||||
border-radius: .3em; }
|
||||
.wmd-table table td, .wmd-table table th {
|
||||
padding: .2em .5em;
|
||||
border: 0.05em solid rgba(136, 136, 136, 0.5); }
|
||||
border-width: .05em;
|
||||
border-style: solid; }
|
||||
.wmd-table table > :first-child > :first-child > :first-child {
|
||||
border-top-left-radius: .3em; }
|
||||
.wmd-table table > :first-child > :first-child > :last-child {
|
||||
@ -176,17 +317,11 @@
|
||||
border-bottom-left-radius: .3em; }
|
||||
.wmd-table table > :last-child > :last-child > :last-child {
|
||||
border-bottom-right-radius: .3em; }
|
||||
.wmd-table thead th, .wmd-table thead td, .wmd-table tfoot th, .wmd-table tfoot td {
|
||||
background-color: rgba(136, 136, 136, 0.1); }
|
||||
.wmd-table tbody > tr td, .wmd-table tbody > tr th {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
transition-duration: 1s;
|
||||
transition-property: background-color; }
|
||||
.wmd-table tbody > tr:nth-child(n):hover td, .wmd-table tbody > tr:nth-child(n):hover th {
|
||||
background-color: rgba(136, 136, 136, 0.1);
|
||||
transition-duration: 0.25s; }
|
||||
.wmd-table tbody > tr:nth-child(2n + 1) > td, .wmd-table tbody > tr:nth-child(2n + 1) > th {
|
||||
background-color: rgba(136, 136, 136, 0.2); }
|
||||
transition-duration: 0.35s; }
|
||||
|
||||
.wmd-list [data-deployed=false] ~ ul, .wmd-list [data-deployed=false] ~ ol, .wmd-main-menu [data-deployed=false] ~ ul, .wmd-main-menu [data-deployed=false] ~ ol {
|
||||
display: none; }
|
||||
@ -203,11 +338,10 @@
|
||||
max-width: 15em;
|
||||
max-height: 15em;
|
||||
padding: .3em;
|
||||
border: .1em solid #888;
|
||||
background-color: #EFEFEF;
|
||||
border-width: .1em;
|
||||
border-style: solid;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
box-shadow: .1em .1em .2em #000;
|
||||
border-radius: .5em; }
|
||||
.wmd-dictionary-box .links {
|
||||
text-align: center; }
|
||||
@ -216,8 +350,8 @@
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: .3em;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: .1em solid #888;
|
||||
border-width: .1em;
|
||||
border-style: solid;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
@ -239,12 +373,11 @@
|
||||
margin-top: 4em;
|
||||
margin-right: 1em;
|
||||
padding: .3em;
|
||||
border: .1em solid #888;
|
||||
background-color: #EFEFEF;
|
||||
border-width: .1em;
|
||||
border-style: solid;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
border-radius: .5em;
|
||||
box-shadow: .1em .1em .2em #000; }
|
||||
border-radius: .5em; }
|
||||
.wmd-main-menu > ul {
|
||||
max-width: 25em;
|
||||
max-height: 25em;
|
||||
@ -258,12 +391,10 @@
|
||||
margin-left: 1.1em; }
|
||||
.wmd-main-menu li {
|
||||
padding: .2em .3em;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.25s; }
|
||||
transition-duration: 0.35s; }
|
||||
.wmd-main-menu li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
transition-duration: 0.25s; }
|
||||
transition-duration: 0.35s; }
|
||||
|
||||
.wmd-media:not([data-type=icon]) {
|
||||
display: block;
|
||||
@ -342,10 +473,10 @@
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: .1em solid #222;
|
||||
border-width: .1em;
|
||||
border-style: solid;
|
||||
vertical-align: middle;
|
||||
border-radius: .3em;
|
||||
box-shadow: 0em 0em .2em #EFEFEF; }
|
||||
border-radius: .3em; }
|
||||
.wmd-color-sample > * {
|
||||
display: none; }
|
||||
|
||||
@ -369,8 +500,8 @@
|
||||
position: absolute;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
border: .1em solid #888;
|
||||
background-color: #EFEFEF;
|
||||
border-width: .1em;
|
||||
border-style: solid;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
@ -1434,7 +1565,8 @@
|
||||
left: 0em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: .1em solid #888;
|
||||
border-width: .1em;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box; }
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,448 +1 @@
|
||||
// Settings
|
||||
$color-fore : #BBB;
|
||||
$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 $color-fore;
|
||||
box-shadow : 0em 0em .8em inset $color-fore;
|
||||
&::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-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 : .1em solid $color-fore;
|
||||
cursor : pointer;
|
||||
box-shadow : 0em 0em .8em inset $color-fore;
|
||||
transition-duration : $transition-out;
|
||||
transition-property : box-shadow;
|
||||
&[data-selected=true]{box-shadow : 0em 0em .2em inset $color-fore;}
|
||||
&:hover{
|
||||
box-shadow : 0em 0em 1.2em inset $color-fore;
|
||||
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 : .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,.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 : .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;
|
||||
}
|
||||
}
|
||||
@import "WMarkDown.settings.scss", "WMarkDown.common.scss", "WMarkDown.base.scss";
|
||||
41
Public/scss/WMarkDown.settings.scss
Normal file
41
Public/scss/WMarkDown.settings.scss
Normal file
@ -0,0 +1,41 @@
|
||||
// Colors.
|
||||
$color-fore : #222;
|
||||
$color-back : #EFEFEF;
|
||||
$color-primary : #2272D4;
|
||||
$color-secondary : #D47222;
|
||||
$color : (
|
||||
light : (
|
||||
fore : $color-fore,
|
||||
back : $color-back,
|
||||
primary : $color-primary,
|
||||
secondary : $color-secondary,
|
||||
input-back : mix($color-back, #FFF, 80%),
|
||||
transparent : rgba(255, 255, 255, 0),
|
||||
full : #FFF
|
||||
),
|
||||
dark : (
|
||||
fore : $color-back,
|
||||
back : $color-fore,
|
||||
primary : mix($color-primary, $color-fore, 80%),
|
||||
secondary : mix($color-secondary, $color-fore, 80%),
|
||||
input-back : mix($color-fore, #000, 80%),
|
||||
transparent : rgba(0, 0, 0, 0),
|
||||
full : #000
|
||||
),
|
||||
grey : mix($color-fore, $color-back, 50%)
|
||||
);
|
||||
|
||||
// Sizes.
|
||||
$header-height : 4em;
|
||||
$footer-height : 2em;
|
||||
$border-radius : .3em;
|
||||
|
||||
// Fonts.
|
||||
$font-normal : "Roboto", Arial;
|
||||
$font-mono : "RobotoMono", monospace;
|
||||
$font-icon : "FA6FS";
|
||||
|
||||
// Transitions.
|
||||
$transition-in : .35s;
|
||||
$transition-out : 1s;
|
||||
$transition : .5s;
|
||||
Loading…
Reference in New Issue
Block a user