Mapeate/Public/scss/Mapeate.base.scss

.mapeate{

    position : absolute;
    top : 0em;
    left : 0em;
    width : 100%;
    height : 100%;
    color : $color-delante;
    background-color : $color-detras;
    overflow : hidden;

    &,h1,h2,h3,h4,h5,h6{font-size : 1em;}
    &,input,textarea,button{font-family : $fuente-principal;}

    [data-visible=false]{display : none !important;}

    a[href]{text-decoration : none;}

    button,[type=button],[type=reset],[type=submit],[rol=button],[type=text],[type=number],[type=date],[type=datetime],[type=time],textarea{
        font-size : 1em;
        border : .1em solid $color-primario;
        box-sizing : border-box;
        border-radius : $tamano-curvatura;
        box-shadow : 0em 0em $tamano-curvatura inset $color-primario;
        transition-property : color,box-shadow,border-color;
        transition-duration : $transicion-salida;
        outline : none;
        &:hover{transition-duration : $transicion-entrada;}
        &:hover,&:focus{
            border-color : $color-secundario;
            box-shadow : 0em 0em $tamano-curvatura inset $color-secundario;
        }
        &[disabled],&[readonly]{
            color :$color-gris;
            border-color : $color-gris;
            box-shadow : 0em 0em $tamano-curvatura inset $color-gris;
        }
    }
    [type=text],[type=number],[type=date],[type=datetime],[type=time],textarea{color : $color-delante;}
    button,[type=button],[type=reset],[type=submit],[rol=button]{
        color : $color-primario;
        background-color : $color-detras;
        cursor : pointer;
        &:hover{color : $color-secundario;}
    }
    // a[href],[onclick],[onmousedown],[onmouseup]{&:not([rol=button]):not(button):not(input):not(textarea):not(path):not(g):not(circle){
    a[href],[onclick],[onmousedown],[onmouseup]{&:not([rol=button],button,input,textarea,path,g,circle){
        color : $color-primario;
        cursor : pointer;
        transition-property : color;
        transition-duration : $transicion-salida;
        &:hover{
            color : $color-secundario;
            transition-duration : $transicion-entrada;
        }
        &[disabled]{color : $color-gris;}
    }}
    label[for]{
        padding : 0em .3em;
        color :$color-delante;
        border : .1em solid $color-delante;
        box-shadow : 0em 0em $tamano-curvatura inset $color-gris;
    }

    [data-icon]::before{
        margin : 0em .4em;
        font-family : $fuente-iconificada;
        font-size : 1em;
        vertical-align : middle;
    }

    nav ul{
        margin : 0em;
        padding : 0em;
        list-style-type : none;
    }

    .entrada{
        display : inline-block;
        &>input,&>textarea,&>button{
            width : 100%;
            height : 100%;
        }
    }

    .grupo{
        display : table;
        // &>span{height : 100%;}
        // &>span{&,input,button,textarea{height : 100%;}}
        &>*{
            display : table-cell;
            box-sizing : border-box;
        }
        *{border-radius : 0em;}
        &>:first-child{&,button,input,textarea,label{
            border-top-left-radius : $tamano-curvatura;
            border-bottom-left-radius : $tamano-curvatura;
        }}
        &>:last-child{&,button,input,textarea,label{
            border-top-right-radius : $tamano-curvatura;
            border-bottom-right-radius : $tamano-curvatura;
        }}
    }

    .posicionador{
        display : none;
        position : absolute;
        top : 0em;
        right : 0em;
        margin : .5em;
        button{
            position : absolute;
            top : 0em;
            right : 0em;
            width : 1em;
            height : 1em;
            span{display : none;}
        }
        .arriba-izquierda{
            margin-right : 1em;
            border-radius : 1em .2em 0em .2em;
        }
        .arriba-derecha{
            border-radius : .2em 1em .2em 0em;
        }
        .abajo-izquierda{
            margin-right : 1em;
            margin-top : 1em;
            border-radius : .2em 0em .2em 1em;
        }
        .abajo-derecha{
            margin-top : 1em;
            border-radius : 0em .2em 1em .2em;
        }
    }

    .imagen{
        display : inline-block;
        span{
            display : inline-block;
            width : 100%;
            height : 100%;
            background-position : center center;
            background-size : cover;
        }
    }

    header,main,footer{
        position : absolute;
        left : 0em;
        width : 100%;
    }

    header{
        top : 0em;
        height : $tamano-cabecera;
        z-index : 20;
    }

    main{
        top : $tamano-cabecera;
        bottom : $tamano-pie;
        overflow : auto;
        z-index : 10;
    }

    footer{
        bottom : 0em;
        height : $tamano-pie;
        z-index : 30;
    }

    h1{
        position : absolute;
        top : 0em;
        left : 0em;
        margin : ($tamano-cabecera * .02) .1em;
        font-size : $tamano-cabecera * .8;
        span{vertical-align : middle;}
        img{
            width : auto;
            height : 1em;
            &+span{display : none;}
        }
        span+span{font-size : .85em;}
    }

    .menu-principal{
        position : absolute;
        left : 50%;
        bottom : 0em;
        width : 30em;
        margin-left : -15em;
        text-align : center;
        li{
            display : inline-block;
            margin : 0em 1em;
        }
    }
    &[data-menu-principal-completo=false] .menu-principal{
        left : 55%;
        li{margin : 0em .2em;}
        [data-icon]::before{
            font-size : 2em;
            margin : 0em;
        }
        span+span{display : none;}
    }

    .menu-links{
        position : absolute;
        top : 0em;
        right : 0em;
        margin : .1em;
        li{
            display : inline-block;
            width : 1em;
            height : 1em;
            margin : 0em .2em;
            font-size : 2em;
            text-align : center;
            // background-color : $color-delante;
            border-radius : .5em;
            &>a{
                // font-size : .77em;
                vertical-align : top;
            }
            [data-i18n]{display : none;}
        }
        [data-icon]::before{
            margin : 0em;
            // font-size : .7em;
        }
    }

    .menu-mapas{
        position : absolute;
        top : 50%;
        left : 50%;
        margin : -18em -18em;
        width : 36em;
        height : 36em;
        legend{
            margin-top : 1em;
            font-size : 1.5em;
            font-weight : 900;
        }
        .buscador{
            label{
                padding-right : .4em;
                font-weight : 900;
                &::after{content : ":";}
            }
            .entrada{width : 100%;}
            [data-icon]+span{display : none;}
        }
        .buscador{&,.entrada{width : 100%;}}
        nav{
            position : absolute;
            top : 6em;
            bottom : 0em;
            width : 100%;
            overflow : auto;
            &>ul>li{
                display : block;
                position : relative;
                width : 100%;
                min-height : 8em;
                margin : .5em 0em;
                overflow : hidden;
                border-radius : 1em;
                ul{
                    display : inline-block;
                    width : 25em;
                }
            }
        }
        .imagen{
            position : absolute;
            width : 8em;
            height : 100%;
            margin-right : 1em;
            opacity : .4;
            transition-duration : $transicion-salida;
            transition-property : opacity;
            &~*{
                display : block;
                margin-left : 8.5em;
            }
            &+span>span{
                display : block;
                margin-bottom : .5em;
                font-size : 1.3em;
                font-weight : 900;
            }
        }
        li{
            &:hover .imagen{
                opacity : 1;
                transition-duration : $transicion-entrada;
            }
        }
        img{display : none}
        [data-icon]+[data-i18n]{
            font-weight : 900;
            &::after{
                content : ":";
            }
        }
    }

    .licencias{
        display : block;
        width : 100%;
        margin : .1em 0em;
        font-size : .85em;
        font-weight : 900;
        text-align : center;
        img{
            width : auto;
            height : 1em;
        }
    }

    .juego{
        margin : 0em;
        padding : 0em;
        border : none;
        overflow : hidden;
        fieldset{position : absolute;}
        &>legend{display : none;}
        &,.mapa,.mapa>div{
            position : absolute;
            top : 0em;
            left : 0em;
            width : 100%;
            height : 100%;
        }
        .mapa{
            margin : 0em;
            padding : 0em;
            border : none;
            z-index : 10;
            -webkit-user-select : none;
            -ms-user-select : none;
            user-select : none;
            legend{&,&+p{display : none;}}
            [data-habilitado=false],[data-acertado=false]{
                cursor : default;
                title{display : none;}
            }
            [data-habilitado=true]{
                &[data-acertado=false]{
                    &,path,circle,polygon,polyline{
                        cursor : pointer;
                        fill : mix($color-primario, $color-detras, 50%);
                        transition-property : fill;
                        transition-duration : $transicion-salida;
                    }
                    &:hover{&,path,circle,polygon,polyline{
                        fill : mix($color-secundario, $color-detras, 50%);
                        transition-duration : $transicion-entrada;
                    }}
                }
                &[data-acertado=true]{&,path,circle,polygon,polyline{fill : mix($color-acertado, $color-detras, 50%);}}
            }
            @for $i from 1 through 4{
                [data-nivel-#{$i}=false][data-nivel-#{$i}-ocultable=true] .nivel-#{$i}{display : none;}
            }
        }
        svg{
            position : absolute;
            top : 50%;
            left : 50%;
            // box-shadow : 0em 0em .4em inset $color-gris;
        }
        .puntos,.elemento,.objetivos,.consola,.temporizador{
            @include ventana(10em);
            legend{cursor : move;}
        }
        .puntos{
            height : 3.5em;
            margin : 1em .5em;
            z-index : 30;
        }
        .elemento{
            height : 5.5em;
            margin : 7em .5em;
            z-index : 20;
        }
        .consola{
            display : none;
            width : 20em;
            height : 7em;
            margin : 1em 13em;
            z-index : 50;
            section{
                width : 100%;
                height : 6em;
                margin-top : 2.5em;
                background-color : $color-delante;
                color : $color-detras;
                font-family : $fuente-monoespaciada;
                font-size : .85em;
            }
        }
        .temporizador{
            right : 0em;
            margin-top : 1em;
            margin-right : 1em;
            z-index : 60;
            legend{text-align : right;}
        }
        .elemento,.puntos,.temporizador{section{
            font-weight : 900;
            text-align : center;
        }}
        .objetivos{
            margin : 15em .5em;
            z-index : 40;
            img{
                width : auto;
                height : 1em;
                margin : 0em .3em;
                vertical-align : middle;
            }
            nav{
                width : 100%;
                max-height : 10em;
                overflow-x : hidden;
                overflow-y : auto;
            }
            li{
                padding : .3em .2em;
                border-radius : 0em;
            }
            ul{
                &>:first-child{border-radius : $tamano-curvatura $tamano-curvatura 0em 0em;}
                &>:last-child{border-radius : 0em 0em $tamano-curvatura $tamano-curvatura;}
            }
            [data-seleccionado=true]{&,&:hover{
                color : $color-seleccionado;
                border-color : $color-seleccionado;
                box-shadow : 0em 0em $tamano-curvatura inset $color-seleccionado;
            }}
            li[data-ok=true]{&,&:hover{
                color : $color-acertado;
                border-color : $color-acertado;
                box-shadow : 0em 0em $tamano-curvatura inset $color-acertado;
            }}
        }
    }

    .niveles{
        label{
            display : inline-block;
            margin : .1em .2em;
            padding : .2em .2em;
            cursor : pointer;
            color : $color-delante;
            border : .1em solid $color-gris;
            border-radius : .4em;
            opacity : .5;
            box-shadow : 0em 0em .4em inset $color-gris;
            transition-property : border-color,box-shadow,opacity;
            transition-duration : $transicion-salida;
            &:hover{
                transition-duration : $transicion-entrada;
                box-shadow : 0em 0em .4em inset $color-delante;
            }
            &[data-seleccionado=true]{
                // border-color : $color-primario;
                opacity : 1;
                // box-shadow : 0em 0em .4em inset $color-primario;
            }
        }
        label [data-i18n],[type=checkbox],.nivel{display : none;}
        .elementos>span+span{
            &:before{content : "[";}
            &:after{content : "]";}
        }
    }

    // [data-posicion=arriba_izquierda]{
    //     top : 0em;
    //     left : 0em;
    // }
    // [data-posicion=arriba_derecha]{
    //     top : 0em;
    //     right : 0em;
    // }
    // [data-posicion=abajo_izquierda]{
    //     left : 0em;
    //     bottom : 0em;
    // }
    // [data-posicion=abajo_derecha]{
    //     right : 0em;
    //     bottom : 0em;
    // }

    .dialogo{
        z-index : 9000;
        &,.fondo{
            position : absolute;
            top : 0em;
            left : 0em;
            width : 100%;
            height : 100%;
            overflow : hidden;
        }
        .fondo{
            background-color : mix(rgba(0, 0, 0, 0), $color-delante, 20%);
            z-index : 10;
        }
        fieldset{
            position : absolute;
            top : 50%;
            left : 50%;
            height : 20em;
            margin-top : -10em;
            margin-left : -16em;
            z-index : 20;
            @include ventana(32em);
        }
        section{
            position : absolute;
            top : 2em;
            left : 0em;
            right : 0em;
            bottom : 2em;
            margin : 1em;
            overflow : auto;
        }
        .grupo{
            position : absolute;
            bottom : 0em;
            left : 0em;
            width : 100%;
            margin-bottom : .5em;
            text-align : center;
        }
    }

    .resumen-fin-juego{
        span[data-i18n]{
            font-weight : 900;
            &::after{content : ":";}
        }
    }

}