WMarkDown/Public/scss/WMarkDown.scss

// Settings
$transition-in : .25s;
$transition-out : 1s;
// Settings

.wmd-icon>input{display : none;}
.wmd-code-block{
    display : block;
    position : relative;
    margin : 2em 4%;
    margin-bottom : 4em;
    font-size : .9em;
    .code{
        position : relative;
        top : 2.5em;
        width : 100%;
        height : auto;
        max-height : 30em;
        overflow-x : hidden;
        overflow-y : auto;
    }
    .data{
        position : absolute;
        list-style-type : none;
        margin : 0em 2em;
        padding : 0em;
        li{
            display : inline-block;
            margin : 0em;
            padding : .1em .4em;
            height : 1.2em;
            border : .1em solid #BBB;
            box-shadow : 0em 0em .8em inset #BBB;
            &::before{font-family : monospace;}
            &>[data-i18n]{display : none;}
        }
        [data-icon]{margin-right : .3em;}
        &>:first-child{display : none;}
        &>:nth-child(2){border-radius : .6em 0em 0em .6em;}
        &>:last-child{border-radius : 0em .6em .6em 0em;}
    }
    ol{
        width : 100%;
        margin : 0em;
        padding : 0em;
        padding-bottom : 1.5em;
        font-family : monospace;
        li{
            margin-left : 4em;
            &::marker{font-size : .85em;}
            &:nth-child(2n + 1){background-color : rgba(200, 200, 200, .2);}
        }
    }
    .content{
        position : absolute;
        top : 0em;
        left : 6.3em;
        right : 0em;
        margin : 0em;
        font-family : monospace;
        background : transparent;
        overflow-y : hidden;
        overflow-x : auto;
        &>div,&>pre{
            padding : .1em;
            white-space : nowrap;
            box-sizing : border-box;
        }
    }
    &[data-type=mermaid] svg{font-size : 1em;}
}
.wmd-quote{
    display : flex;
    margin : 1em 2em;
    padding-left : .5em;
    font-size : .9em;
    border-left : .5em solid #AAA;
    border-radius : .5em 0em 0em .5em;
    flex-direction : row;
    &>div{
        flex : auto;
        align-self : start;
        &+div{
            width : 100%;
            padding-left : 1em;
        }
    }
    .quote-type{
        text-align : center;
        span{
            display : block;
            &+span{font-weight : 900;}
        }
    }
    [data-avatar]{
        width : 4em;
        height : 4em;
        border-radius : 1em;
        background-color : #888;
        background-position : center center;
        background-size : cover;
    }
    [data-icon]{font-size : 3em;}
    [data-avatar=srx00],[data-avatar=kyman]{
        background-color : transparent;
        background-image : 
            url("https://cdn.k3y.pw/data/KyMAN-water-mark.png"), 
            url("https://cdn.local/data/KyMAN-water-mark.png");
    }
}

[data-include]{
    &>.link{
        margin-top : 2em;
        font-size : .9em;
        opacity : .8;
    }
    &+h1,&+h2,&+h3,&+h4,&+h5,&+h6{margin-top : 0em;}
    &>.wmarkdown{&>h1,&>h2,&>h3,&>h4,&>h5,&>h6{&:first-child{margin-top : 0em;}}}
    [data-include]>.link>a{display : none;}
}

.wmd-title{
    &>:last-child{
        margin-left : .3em;
        font-size : .6em;
        span{
            opacity : .3;
            transition-duration : $transition-out;
            transition-property : opacity;
            &::before{margin : 0em;}
            &:hover{
                opacity : 1;
                transition-duration : $transition-in;
            }
        }
    }
}

.wmd-table{
    padding : 1em 0em;
    margin-left : 5%;
    margin-right : 5%;
    text-align : center;
    font-size : .9em;
    table{
        max-width : 100%;
        margin-left : auto;
        margin-right : auto;
        border-collapse : separate;
        border-spacing : 0;
        border : .1em solid #888;
        box-sizing : border-box;
        border-radius : .3em;
        td,th{
            padding : .2em .5em;
            border : .05em solid mix(#888, rgba(255, 255, 255, 0), 50%);
        }
        &>:first-child>:first-child>:first-child{border-top-left-radius : .3em;}
        &>:first-child>:first-child>:last-child{border-top-right-radius : .3em;}
        &>:last-child>:last-child>:first-child{border-bottom-left-radius : .3em;}
        &>:last-child>:last-child>:last-child{border-bottom-right-radius : .3em;}
    }
    thead,tfoot{th,td{background-color : mix(#888, rgba(255, 255, 255, 0), 10%);}}
    tbody>tr{
        td,th{
            background-color : rgba(255, 255, 255, 0);
            transition-duration : $transition-out;
            transition-property : background-color;
        }
        &:nth-child(n):hover{td,th{
            background-color : mix(#888, rgba(255, 255, 255, 0), 10%);
            transition-duration : $transition-in;
        }}
        &:nth-child(2n + 1){&>td,&>th{
            background-color : mix(#888, rgba(255, 255, 255, 0), 20%);
        }}
    }
}

.wmd-list,.wmd-main-menu{
    [data-deployed=false]{&~ul,&~ol{display : none;}}
    [data-icon=deploy]{
        user-select : none;
        &+[data-i18n]{display : none;}
    }
}

.wmd,.wmd-dictionary-box{.wmd-dictionary-item[data-role]{cursor : help;}}
.wmd-dictionary-box{
    position : absolute;
    max-width : 15em;
    max-height : 15em;
    padding : .3em;
    border : .1em solid #888;
    background-color : #EFEFEF;
    overflow : auto;
    box-sizing : border-box;
    box-shadow : .1em .1em .2em #000;
    border-radius : .5em;
    .links{text-align : center;}
    a[href]{
        display : inline-block;
        width : 2em;
        height : 2em;
        margin : .3em;
        background-color : rgba(0, 0, 0, .1);
        border : .1em solid #888;
        background-position : center center;
        background-size : cover;
        box-sizing : border-box;
        border-radius : 1em;
    }
}

.wmd-main-menu-button{
    padding : 0em 1em;
    text-align : right;
    [data-icon]{
        &::before{
            margin : 0em;
            font-size : 2em;
        }
        &+span{display : none;}
    }
}
.wmd-main-menu{
    position : absolute;
    top : 0em;
    right : 0em;
    margin-top : 4em;
    margin-right : 1em;
    padding : .3em;
    border : .1em solid #888;
    background-color : #EFEFEF;
    overflow : hidden;
    z-index : 100;
    border-radius : .5em;
    box-shadow : 
        // 0em 0em 1em inset #888, 
        .1em .1em .2em #000;
    &>ul{
        max-width : 25em;
        max-height : 25em;
        margin : 0em;
        padding : 0em;
        overflow : auto;
    }
    ul{
        list-style-type : none;
        padding-right : 0em;
    }
    a:first-child{
        margin-left : 1.1em;
    }
    li{
        padding : .2em .3em;
        background-color : rgba(0, 0, 0, 0);
        transition-property : background-color;
        transition-duration : $transition-in;
        &:hover{
            background-color : rgba(0, 0, 0, .1);
            transition-duration : $transition-in;
        }
    }
}

.wmd-media{
    &:not([data-type=icon]){
        display : block;
        position : relative;
        left : 50%;
        width : 30em;
        margin-left : -15em;
        text-align : center;
        box-sizing : border-box;
        img{
            width : 100%;
            height : auto;
            max-width : 30em;
            max-height : 30em;
            &+span{
                // display : none;
                background-position : center center;
                background-size : cover;
            }
        }
        &[data-type=image] .text{display : none;}
        &[data-type=picture] .text{
            display : block;
            width : 100%;
            margin-top : -.2em;
            text-align : right;
            font-size : .85em;
        }
    }
    &[data-type=icon]{
        display : inline-block;
        height : 1em;
        // vertical-align : middle;
        img{
            width : auto;
            height : 100%;
        }
        .text{display : none;}
    }
}

.wmd-code-doc{
    display : block;
    width : 100%;
    font-size : .85em;
    border : none;
    min-inline-size : auto;
    // border-radius : .5em;
    overflow-x : auto;
    box-sizing : border-box;
    legend{display : none;}
    .description{
        font-family : monospace;
        white-space : pre;
    }
    .return-type{margin-right : 1em;}
    .return-type,.typed{
        &:before{content : "[";}
        &:after{content : "]";}
    }
    .environment,.access{
        display : inline-block;
        margin-right : 1em;
        text-transform : capitalize;
    }
    .arguments{
        &:before{content : "(";}
        &:after{content : ")";}
    }
    .argument{
        display : block;
        width : 100%;
        padding-left : 4em;
        box-sizing : border-box;
        &>span+span{margin-left : 1em;}
        &>:nth-child(5):before{
            content : "=";
            margin-right : 1em;
            // margin : 0em 1em;
        }
    }
    .default-value::before{content : "= ";}
    &[data-arguments-l='0']>.definition{display : none;}
}

.wmd-color-sample{
    display : inline-block;
    width : 1em;
    height : 1em;
    border : .1em solid #222;
    vertical-align : middle;
    border-radius : .3em;
    box-shadow : 0em 0em .2em #EFEFEF;
    &>*{display : none;}
}

.wmd-avatars{

    $size : 7em;
    $half : $size * .5;
    $favicon : 1.8em;

    display : block;
    list-style-type : none;
    text-align : center;
    &>*{
        display : inline-block;
        position : relative;
        width : $size;
        height : $size;
        margin : 1em;
        .wmd-media{
            left : auto;
            margin : 0em;
            width : 100%;
            height : 100%;
        }
        a+a{
            display : block;
            position : absolute;
            width : $favicon;
            height : $favicon;
            border : .1em solid #888;
            background-color : #EFEFEF;
            background-position : center center;
            background-size : cover;
            border-radius : 50%;
            box-sizing : border-box;
        }
    }
    @for $i from 1 through 20{
        [data-links='#{$i}']{
            @for $j from 1 through $i{
                &>:nth-child(#{$j + 1}){
                    top : ($size / 2) - ($favicon / 2);
                    left : ($size / 2) - ($favicon / 2);
                    margin-top : calc(sin(#{$j * (360deg / $i) + 45deg}) * #{$size / 2});
                    margin-left : calc(cos(#{$j * (360deg / $i)} + 45deg) * #{$size / 2});
                }
            }
        }
    }
    img{display : none;}
    .image{
        display : block;
        position : absolute;
        top : 0em;
        left : 0em;
        width : 100%;
        height : 100%;
        border : .1em solid #888;
        border-radius : 50%;
        box-sizing : border-box;
    }
}