AnP/Public/scss/AnP.base.scss

@mixin main_color_web($mode){
    background-color : map-deep-get($color, $mode, "back");
    color : map-deep-get($color, $mode, "fore");
    a[href],[data-role=link],button,[type=submit],[type=button],[type=reset],[role=button]{
        color : map-deep-get($color, $mode, "primary");
        &:hover{color : map-deep-get($color, $mode, "secondary");}
    }
    button,[type=submit],[type=button],[type=reset],[role=button]{
        border-color : map-deep-get($color, $mode, "primary");
        box-shadow : 0em 0em .2em inset map-deep-get($color, $mode, "primary");
        &:hover{
            border-color : map-deep-get($color, $mode, "secondary");
            box-shadow : 0em 0em .2em inset map-deep-get($color, $mode, "secondary");
        }
    }
}

.anp{

    position : relative;
    top : 0em;
    left : 0em;
    width : 100%;
    height : 100%;
    overflow : hidden;
    &,input,textarea,select,button{font-family : $font-normal;}

    button,input,textarea,select{font-size : 1em;}

    a[href]{text-decoration : none;}
    a[href],[data-role=link],button,[type=submit],[type=button],[type=reset],[role=button]{
        cursor : pointer;
        transition-duration : $transition-out;
        transition-property : color;
        &:hover{transition-duration : $transition-in;}
    }
    button,[type=submit],[type=button],[type=reset],[role=button]{
        cursor : pointer;
        border-width : .1em;
        border-style : solid;
        border-radius : $border-radius;
        transition-property : color, border-color, box-shadow;
    }
    .buttons{
        text-align : center;
        button{border-radius : 0em;}
        &>:first-child{
            border-top-left-radius : $border-radius;
            border-bottom-left-radius : $border-radius;
        }
        &>:last-child{
            border-top-right-radius : $border-radius;
            border-bottom-right-radius : $border-radius;
        }
    }

    header,main,footer{
        position : absolute;
        left : 0em;
        width : 100%;
    }
    header{
        display : flex;
        align-items : center;
        top : 0em;
        height : $header-height;
        z-index : 20;
    }
    main{
        top : $header-height;
        bottom : $footer-height;
        z-index : 10;
    }
    footer{
        display : flex;
        align-items : center;
        bottom : 0em;
        height : $footer-height;
        z-index : 30;
    }

    &[data-forced-gui-mode=default][data-gui-mode=default]{
        @include main_color_web(light);
    }
    @each $key in (dark, light){
        &[data-forced-gui-mode=#{$key}],&[data-forced-gui-mode=default][data-gui-mode=#{$key}]{
            @include main_color_web($key);
        }
    }

    .input{
        display : inline-block;
        position : relative;
        width : 100%;
        min-width : 0%;
        &>textarea{
            width : 100%;
            height : 5em;
            min-width : 0%;
            min-height : 0%;
            resize : none;
        }
    }

    h1{
        flex-grow : 0;
        font-size : 1em;
        margin : 0em;
        white-space : nowrap;
        a>*,.image>*{vertical-align : middle;}
        img{
            width : auto;
            height : .8 * $header-height;
            margin-top : .1 * $header-height;
            margin-left : 1em + .1 * $header-height;
            margin-right : .1 * $header-height;
            &+span{display : none;}
        }
        .text{
            font-size : .8 * $header-height;
            font-weight : 900;
        }
    }

    .top-menu{
        flex-grow : 1;
        &>ul{
            margin : 0em;
            padding : 0em;
            text-align : center;
            list-style-type : none;
            li{
                display : inline-block;
                margin : 0em 1em;
            }
        }
    }

    .sessions-mini{
        flex-grow : 0;
        display : relative;
        width : 3 * $header-height;
        height : 100%;
        .image{
            position : absolute;
            top : 0em;
            right : 0em;
            width : $header-height;
            height : $header-height;
            cursor : pointer;
            background-color : $color-grey;
            overflow : hidden;
            border-radius : 0% 0% 0% 50%;
            transition-duration : $transition-out;
            transition-property : border-radius;
            &:hover{
                border-radius : 0% 0% 0% 10%;
                transition-duration : $transition-in;
            }
        }
        img{
            width : auto;
            height : 100%;
            &+span{display : none;}
        }
        .info{
            position : absolute;
            top : .2em;
            right : $header-height + .5em;
            margin : 0em;
            padding : 0em;
            text-align : right;
            list-style-type : none;
            li{font-size : .85em;}
            [data-icon]+[data-i18n]{display : none;}
        }
        nav{
            position : absolute;
            bottom : .5em;
            right : $header-height + .5em;
            text-align : right;
            ul{
                margin : 0em;
                padding : 0em;
                text-align : center;
                list-style-type : none;
                li{
                    display : inline-block;
                    margin : 0em .2em;
                }
            }
            [data-icon]{
                &::before{margin : 0em;}
                &+[data-i18n]{display : none;}
            }
        }
    }

    .gui-controls{
        flex-grow : 0;
        white-space : nowrap;
        [data-icon]{
            &::before{margin : 0em;}
            &+[data-i18n]{display : none;}
        }
    }

    .licenses{
        display : flex;
        align-items : center;
        flex-grow : 1;
        &>*{
            margin : 0em .3em;
            text-align : center;
            font-size : .7em;
            font-weight : 900;
        }
        &>[data-i18n=cc_by_nc_sa_4]{
            display : flex;
            align-items : center;
            span{flex-grow : 1;}
            img{
                flex-grow : 0;
                width : auto;
                height : $footer-height;
                margin : 0em .3em;
            }
        }
    }

    .i18n-selector{
        flex-grow : 0;
        width : 10em;
        white-space : nowrap;
        ul{
            position : absolute;
            bottom : 0em;
            right : 0em;
            margin : 0em;
            padding : 0em .3em;
            text-align : right;
            list-style-type : none;
            &:hover li{
                margin-top : 0em;
                opacity : 1;
                transition-duration : $transition-in;
            }
        }
        li{
            position : relative;
            margin-top : -1em - .28em;
            transition-duration : $transition-out;
            transition-property : margin-top, opacity;
            &>*{vertical-align : middle;}
        }
        [data-selected=false]{opacity : 0;}
        img{
            width : auto;
            height : 1em;
            margin-right : .3em;
        }
    }

}