#wip(scss): Fixing styles and added dynamic colors.

This commit is contained in:
KyMAN 2025-04-24 07:10:56 +02:00
parent 775739bd16
commit 04252462e9
7 changed files with 764 additions and 501 deletions

View 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;
}
}

View 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;
}

View File

@ -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,16 +239,43 @@
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; }
[data-include] + h1, [data-include] + h2, [data-include] + h3, [data-include] + h4, [data-include] + h5, [data-include] + h6 {
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 {
margin-top: 0em; }
[data-include] [data-include] > .link > a {
display: none; }
[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 {
margin-top: 0em; }
[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; }
.wmd-title > :last-child {
margin-left: .3em;
@ -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

View File

@ -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";

View 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;

View File

@ -1 +1 @@
0.0.3.8
0.0.3.9