Mapeate/Public/scss/Mapeate.css

603 lines
22 KiB
CSS

.mapeate {
position: absolute;
top: 0em;
left: 0em;
width: 100%;
height: 100%;
color: #222;
background-color: #EFEFEF;
overflow: hidden; }
.mapeate, .mapeate h1, .mapeate h2, .mapeate h3, .mapeate h4, .mapeate h5, .mapeate h6 {
font-size: 1em; }
.mapeate, .mapeate input, .mapeate textarea, .mapeate button {
font-family: "Roboto"; }
.mapeate [data-visible=false] {
display: none !important; }
.mapeate a[href] {
text-decoration: none; }
.mapeate button, .mapeate [type=button], .mapeate [type=reset], .mapeate [type=submit], .mapeate [rol=button], .mapeate [type=text], .mapeate [type=number], .mapeate [type=date], .mapeate [type=datetime], .mapeate [type=time], .mapeate textarea {
font-size: 1em;
border: 0.1em solid #D50F0A;
box-sizing: border-box;
border-radius: 0.4em;
box-shadow: 0em 0em 0.4em inset #D50F0A;
transition-property: color,box-shadow,border-color;
transition-duration: 1s;
outline: none; }
.mapeate button:hover, .mapeate [type=button]:hover, .mapeate [type=reset]:hover, .mapeate [type=submit]:hover, .mapeate [rol=button]:hover, .mapeate [type=text]:hover, .mapeate [type=number]:hover, .mapeate [type=date]:hover, .mapeate [type=datetime]:hover, .mapeate [type=time]:hover, .mapeate textarea:hover {
transition-duration: 0.2s; }
.mapeate button:hover, .mapeate button:focus, .mapeate [type=button]:hover, .mapeate [type=button]:focus, .mapeate [type=reset]:hover, .mapeate [type=reset]:focus, .mapeate [type=submit]:hover, .mapeate [type=submit]:focus, .mapeate [rol=button]:hover, .mapeate [rol=button]:focus, .mapeate [type=text]:hover, .mapeate [type=text]:focus, .mapeate [type=number]:hover, .mapeate [type=number]:focus, .mapeate [type=date]:hover, .mapeate [type=date]:focus, .mapeate [type=datetime]:hover, .mapeate [type=datetime]:focus, .mapeate [type=time]:hover, .mapeate [type=time]:focus, .mapeate textarea:hover, .mapeate textarea:focus {
border-color: #0A0FD5;
box-shadow: 0em 0em 0.4em inset #0A0FD5; }
.mapeate button[disabled], .mapeate button[readonly], .mapeate [type=button][disabled], .mapeate [type=button][readonly], .mapeate [type=reset][disabled], .mapeate [type=reset][readonly], .mapeate [type=submit][disabled], .mapeate [type=submit][readonly], .mapeate [rol=button][disabled], .mapeate [rol=button][readonly], .mapeate [type=text][disabled], .mapeate [type=text][readonly], .mapeate [type=number][disabled], .mapeate [type=number][readonly], .mapeate [type=date][disabled], .mapeate [type=date][readonly], .mapeate [type=datetime][disabled], .mapeate [type=datetime][readonly], .mapeate [type=time][disabled], .mapeate [type=time][readonly], .mapeate textarea[disabled], .mapeate textarea[readonly] {
color: #898989;
border-color: #898989;
box-shadow: 0em 0em 0.4em inset #898989; }
.mapeate [type=text], .mapeate [type=number], .mapeate [type=date], .mapeate [type=datetime], .mapeate [type=time], .mapeate textarea {
color: #222; }
.mapeate button, .mapeate [type=button], .mapeate [type=reset], .mapeate [type=submit], .mapeate [rol=button] {
color: #D50F0A;
background-color: #EFEFEF;
cursor: pointer; }
.mapeate button:hover, .mapeate [type=button]:hover, .mapeate [type=reset]:hover, .mapeate [type=submit]:hover, .mapeate [rol=button]:hover {
color: #0A0FD5; }
.mapeate a[href]:not([rol=button], button, input, textarea, path, g, circle), .mapeate [onclick]:not([rol=button], button, input, textarea, path, g, circle), .mapeate [onmousedown]:not([rol=button], button, input, textarea, path, g, circle), .mapeate [onmouseup]:not([rol=button], button, input, textarea, path, g, circle) {
color: #D50F0A;
cursor: pointer;
transition-property: color;
transition-duration: 1s; }
.mapeate a[href]:not([rol=button], button, input, textarea, path, g, circle):hover, .mapeate [onclick]:not([rol=button], button, input, textarea, path, g, circle):hover, .mapeate [onmousedown]:not([rol=button], button, input, textarea, path, g, circle):hover, .mapeate [onmouseup]:not([rol=button], button, input, textarea, path, g, circle):hover {
color: #0A0FD5;
transition-duration: 0.2s; }
.mapeate a[href]:not([rol=button], button, input, textarea, path, g, circle)[disabled], .mapeate [onclick]:not([rol=button], button, input, textarea, path, g, circle)[disabled], .mapeate [onmousedown]:not([rol=button], button, input, textarea, path, g, circle)[disabled], .mapeate [onmouseup]:not([rol=button], button, input, textarea, path, g, circle)[disabled] {
color: #898989; }
.mapeate label[for] {
padding: 0em .3em;
color: #222;
border: 0.1em solid #222;
box-shadow: 0em 0em 0.4em inset #898989; }
.mapeate [data-icon]::before {
margin: 0em .4em;
font-family: "FA5FS";
font-size: 1em;
vertical-align: middle; }
.mapeate nav ul {
margin: 0em;
padding: 0em;
list-style-type: none; }
.mapeate .entrada {
display: inline-block; }
.mapeate .entrada > input, .mapeate .entrada > textarea, .mapeate .entrada > button {
width: 100%;
height: 100%; }
.mapeate .grupo {
display: table; }
.mapeate .grupo > * {
display: table-cell;
box-sizing: border-box; }
.mapeate .grupo * {
border-radius: 0em; }
.mapeate .grupo > :first-child, .mapeate .grupo > :first-child button, .mapeate .grupo > :first-child input, .mapeate .grupo > :first-child textarea, .mapeate .grupo > :first-child label {
border-top-left-radius: 0.4em;
border-bottom-left-radius: 0.4em; }
.mapeate .grupo > :last-child, .mapeate .grupo > :last-child button, .mapeate .grupo > :last-child input, .mapeate .grupo > :last-child textarea, .mapeate .grupo > :last-child label {
border-top-right-radius: 0.4em;
border-bottom-right-radius: 0.4em; }
.mapeate .posicionador {
display: none;
position: absolute;
top: 0em;
right: 0em;
margin: .5em; }
.mapeate .posicionador button {
position: absolute;
top: 0em;
right: 0em;
width: 1em;
height: 1em; }
.mapeate .posicionador button span {
display: none; }
.mapeate .posicionador .arriba-izquierda {
margin-right: 1em;
border-radius: 1em .2em 0em .2em; }
.mapeate .posicionador .arriba-derecha {
border-radius: .2em 1em .2em 0em; }
.mapeate .posicionador .abajo-izquierda {
margin-right: 1em;
margin-top: 1em;
border-radius: .2em 0em .2em 1em; }
.mapeate .posicionador .abajo-derecha {
margin-top: 1em;
border-radius: 0em .2em 1em .2em; }
.mapeate .imagen {
display: inline-block; }
.mapeate .imagen span {
display: inline-block;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover; }
.mapeate header, .mapeate main, .mapeate footer {
position: absolute;
left: 0em;
width: 100%; }
.mapeate header {
top: 0em;
height: 4em;
z-index: 20; }
.mapeate main {
top: 4em;
bottom: 1em;
overflow: auto;
z-index: 10; }
.mapeate footer {
bottom: 0em;
height: 1em;
z-index: 30; }
.mapeate h1 {
position: absolute;
top: 0em;
left: 0em;
margin: 0.08em 0.1em;
font-size: 3.2em; }
.mapeate h1 span {
vertical-align: middle; }
.mapeate h1 img {
width: auto;
height: 1em; }
.mapeate h1 img + span {
display: none; }
.mapeate h1 span + span {
font-size: .85em; }
.mapeate .menu-principal {
position: absolute;
left: 50%;
bottom: 0em;
width: 30em;
margin-left: -15em;
text-align: center; }
.mapeate .menu-principal li {
display: inline-block;
margin: 0em 1em; }
.mapeate[data-menu-principal-completo=false] .menu-principal {
left: 55%; }
.mapeate[data-menu-principal-completo=false] .menu-principal li {
margin: 0em .2em; }
.mapeate[data-menu-principal-completo=false] .menu-principal [data-icon]::before {
font-size: 2em;
margin: 0em; }
.mapeate[data-menu-principal-completo=false] .menu-principal span + span {
display: none; }
.mapeate .menu-links {
position: absolute;
top: 0em;
right: 0em;
margin: .1em; }
.mapeate .menu-links li {
display: inline-block;
width: 1em;
height: 1em;
margin: 0em .2em;
font-size: 2em;
text-align: center;
border-radius: .5em; }
.mapeate .menu-links li > a {
vertical-align: top; }
.mapeate .menu-links li [data-i18n] {
display: none; }
.mapeate .menu-links [data-icon]::before {
margin: 0em; }
.mapeate .menu-mapas {
position: absolute;
top: 50%;
left: 50%;
margin: -18em -18em;
width: 36em;
height: 36em; }
.mapeate .menu-mapas legend {
margin-top: 1em;
font-size: 1.5em;
font-weight: 900; }
.mapeate .menu-mapas .buscador label {
padding-right: .4em;
font-weight: 900; }
.mapeate .menu-mapas .buscador label::after {
content: ":"; }
.mapeate .menu-mapas .buscador .entrada {
width: 100%; }
.mapeate .menu-mapas .buscador [data-icon] + span {
display: none; }
.mapeate .menu-mapas .buscador, .mapeate .menu-mapas .buscador .entrada {
width: 100%; }
.mapeate .menu-mapas nav {
position: absolute;
top: 6em;
bottom: 0em;
width: 100%;
overflow: auto; }
.mapeate .menu-mapas nav > ul > li {
display: block;
position: relative;
width: 100%;
min-height: 8em;
margin: .5em 0em;
overflow: hidden;
border-radius: 1em; }
.mapeate .menu-mapas nav > ul > li ul {
display: inline-block;
width: 25em; }
.mapeate .menu-mapas .imagen {
position: absolute;
width: 8em;
height: 100%;
margin-right: 1em;
opacity: .4;
transition-duration: 1s;
transition-property: opacity; }
.mapeate .menu-mapas .imagen ~ * {
display: block;
margin-left: 8.5em; }
.mapeate .menu-mapas .imagen + span > span {
display: block;
margin-bottom: .5em;
font-size: 1.3em;
font-weight: 900; }
.mapeate .menu-mapas li:hover .imagen {
opacity: 1;
transition-duration: 0.2s; }
.mapeate .menu-mapas img {
display: none; }
.mapeate .menu-mapas [data-icon] + [data-i18n] {
font-weight: 900; }
.mapeate .menu-mapas [data-icon] + [data-i18n]::after {
content: ":"; }
.mapeate .licencias {
display: block;
width: 100%;
margin: .1em 0em;
font-size: .85em;
font-weight: 900;
text-align: center; }
.mapeate .licencias img {
width: auto;
height: 1em; }
.mapeate .juego {
margin: 0em;
padding: 0em;
border: none;
overflow: hidden; }
.mapeate .juego fieldset {
position: absolute; }
.mapeate .juego > legend {
display: none; }
.mapeate .juego, .mapeate .juego .mapa, .mapeate .juego .mapa > div {
position: absolute;
top: 0em;
left: 0em;
width: 100%;
height: 100%; }
.mapeate .juego .mapa {
margin: 0em;
padding: 0em;
border: none;
z-index: 10;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none; }
.mapeate .juego .mapa legend, .mapeate .juego .mapa legend + p {
display: none; }
.mapeate .juego .mapa [data-habilitado=false], .mapeate .juego .mapa [data-acertado=false] {
cursor: default; }
.mapeate .juego .mapa [data-habilitado=false] title, .mapeate .juego .mapa [data-acertado=false] title {
display: none; }
.mapeate .juego .mapa [data-habilitado=true][data-acertado=false], .mapeate .juego .mapa [data-habilitado=true][data-acertado=false] path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false] circle {
cursor: pointer;
fill: #e27f7d;
transition-property: fill;
transition-duration: 1s; }
.mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover circle {
fill: #7d7fe2;
transition-duration: 0.2s; }
.mapeate .juego .mapa [data-habilitado=true][data-acertado=true], .mapeate .juego .mapa [data-habilitado=true][data-acertado=true] path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=true] circle {
fill: #78b378; }
.mapeate .juego .mapa [data-nivel-1=false][data-nivel-1-ocultable=true] .nivel-1 {
display: none; }
.mapeate .juego .mapa [data-nivel-2=false][data-nivel-2-ocultable=true] .nivel-2 {
display: none; }
.mapeate .juego .mapa [data-nivel-3=false][data-nivel-3-ocultable=true] .nivel-3 {
display: none; }
.mapeate .juego .mapa [data-nivel-4=false][data-nivel-4-ocultable=true] .nivel-4 {
display: none; }
.mapeate .juego svg {
position: absolute;
top: 50%;
left: 50%; }
.mapeate .juego .puntos, .mapeate .juego .elemento, .mapeate .juego .objetivos, .mapeate .juego .consola, .mapeate .juego .temporizador {
width: 10em;
padding: .5em;
background-color: #EFEFEF;
border: 0.1em solid #898989;
border-radius: 0.4em;
box-shadow: 0em 0em 0.4em inset #898989, 0.1em 0.1em 0.2em #222; }
.mapeate .juego .puntos legend, .mapeate .juego .elemento legend, .mapeate .juego .objetivos legend, .mapeate .juego .consola legend, .mapeate .juego .temporizador legend {
float: left;
width: 10em;
height: 1.2em;
margin: .4em 0em;
font-weight: 900;
text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none; }
.mapeate .juego .puntos legend + p, .mapeate .juego .elemento legend + p, .mapeate .juego .objetivos legend + p, .mapeate .juego .consola legend + p, .mapeate .juego .temporizador legend + p {
display: none;
clear: both; }
.mapeate .juego .puntos legend, .mapeate .juego .elemento legend, .mapeate .juego .objetivos legend, .mapeate .juego .consola legend, .mapeate .juego .temporizador legend {
cursor: move; }
.mapeate .juego .puntos {
height: 3.5em;
margin: 1em .5em;
z-index: 30; }
.mapeate .juego .elemento {
height: 5.5em;
margin: 7em .5em;
z-index: 20; }
.mapeate .juego .consola {
display: none;
width: 20em;
height: 7em;
margin: 1em 13em;
z-index: 50; }
.mapeate .juego .consola section {
width: 100%;
height: 6em;
margin-top: 2.5em;
background-color: #222;
color: #EFEFEF;
font-family: "Roboto Mono";
font-size: .85em; }
.mapeate .juego .temporizador {
right: 0em;
margin-top: 1em;
margin-right: 1em;
z-index: 60; }
.mapeate .juego .temporizador legend {
text-align: right; }
.mapeate .juego .elemento section, .mapeate .juego .puntos section, .mapeate .juego .temporizador section {
font-weight: 900;
text-align: center; }
.mapeate .juego .objetivos {
margin: 15em .5em;
z-index: 40; }
.mapeate .juego .objetivos img {
width: auto;
height: 1em;
margin: 0em .3em;
vertical-align: middle; }
.mapeate .juego .objetivos nav {
width: 100%;
max-height: 10em;
overflow-x: hidden;
overflow-y: auto; }
.mapeate .juego .objetivos li {
padding: .3em .2em;
border-radius: 0em; }
.mapeate .juego .objetivos ul > :first-child {
border-radius: 0.4em 0.4em 0em 0em; }
.mapeate .juego .objetivos ul > :last-child {
border-radius: 0em 0em 0.4em 0.4em; }
.mapeate .juego .objetivos [data-seleccionado=true], .mapeate .juego .objetivos [data-seleccionado=true]:hover {
color: #770;
border-color: #770;
box-shadow: 0em 0em 0.4em inset #770; }
.mapeate .juego .objetivos li[data-ok=true], .mapeate .juego .objetivos li[data-ok=true]:hover {
color: #070;
border-color: #070;
box-shadow: 0em 0em 0.4em inset #070; }
.mapeate .niveles label {
display: inline-block;
margin: .1em .2em;
padding: .2em .2em;
cursor: pointer;
color: #222;
border: 0.1em solid #898989;
border-radius: .4em;
opacity: .5;
box-shadow: 0em 0em 0.4em inset #898989;
transition-property: border-color,box-shadow,opacity;
transition-duration: 1s; }
.mapeate .niveles label:hover {
transition-duration: 0.2s;
box-shadow: 0em 0em 0.4em inset #222; }
.mapeate .niveles label[data-seleccionado=true] {
opacity: 1; }
.mapeate .niveles label [data-i18n], .mapeate .niveles [type=checkbox], .mapeate .niveles .nivel {
display: none; }
.mapeate .niveles .elementos > span + span:before {
content: "["; }
.mapeate .niveles .elementos > span + span:after {
content: "]"; }
.mapeate .dialogo {
z-index: 9000; }
.mapeate .dialogo, .mapeate .dialogo .fondo {
position: absolute;
top: 0em;
left: 0em;
width: 100%;
height: 100%;
overflow: hidden; }
.mapeate .dialogo .fondo {
background-color: rgba(34, 34, 34, 0.8);
z-index: 10; }
.mapeate .dialogo fieldset {
position: absolute;
top: 50%;
left: 50%;
height: 20em;
margin-top: -10em;
margin-left: -16em;
z-index: 20;
width: 32em;
padding: .5em;
background-color: #EFEFEF;
border: 0.1em solid #898989;
border-radius: 0.4em;
box-shadow: 0em 0em 0.4em inset #898989, 0.1em 0.1em 0.2em #222; }
.mapeate .dialogo fieldset legend {
float: left;
width: 32em;
height: 1.2em;
margin: .4em 0em;
font-weight: 900;
text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none; }
.mapeate .dialogo fieldset legend + p {
display: none;
clear: both; }
.mapeate .dialogo section {
position: absolute;
top: 2em;
left: 0em;
right: 0em;
bottom: 2em;
margin: 1em;
overflow: auto; }
.mapeate .dialogo .grupo {
position: absolute;
bottom: 0em;
left: 0em;
width: 100%;
margin-bottom: .5em;
text-align: center; }
.mapeate .resumen-fin-juego span[data-i18n] {
font-weight: 900; }
.mapeate .resumen-fin-juego span[data-i18n]::after {
content: ":"; }
[data-clase=global] {
/*
* Below are Cascading Style Sheet (CSS) definitions in use in this file,
* which allow easily changing how countries are displayed.
*
* The styles are applied in the order in which they are defined (and re-defined) here in the preamble.
*/
/*
* Circles around small countries and territories
*
* Change opacity to 1 to display all circles
*/
/*
* Smaller circles around subnational territories: Australian external territories, Chinese SARs, Dutch special municipalities, and French DOMs (overseas regions/departments) [but not French COMs (overseas collectivities)]
*
* Change opacity to 1 to display all circles
*/
/*
* Land
* (all land, as opposed to water, should belong to this class; in order to modify the coastline for land pieces with no borders on them a special class "coastxx" has been added below)
*/
/*
* Styles for coastlines of islands and continents with no borders on them
* (all of them should also belong to the class "landxx" - to allow for all land to be modified at once by refining "landxx" style's definition further down)
*/
/*
* Styles for territories without permanent population (the largest of which is Antarctica)
*
* Change opacity to 0 to hide all territories
*/
/*
* Circles around small countries without permanent population
*
* Change opacity to 1 to display all circles
*/
/*
* Styles for territories with limited or no recognition
* (all of them - including Taiwan - are overlays (i.e. duplicate layers) over their "host" countries, and so not showing them doesn't leave any gaps on the map)
*
* Change opacity to 1 to display all territories
*/
/*
* Smaller circles around small territories with limited or no recognition
*
* Change opacity to 1 to display all circles
*/
/*
* Oceans, seas, and large lakes
*/
/*
* Reserved class names:
*
* .eu - for members of European Union
* .eaeu - for members of Eurasian Economic Union
*/
/*
* Additional style rules
*
* The following are examples of colouring countries.
* These can be substituted with custom styles to colour the countries on the map.
*
* Colour a few countries:
*
* .gb, .au, .nc
* {
* fill: #ff0000;
* }
*
* Colour a few small-country circles (along with the countries):
*
* .ms, .ky
* {
* opacity: 1;
* fill: #ff0000;
* }
*
*/ }
[data-clase=global] .circlexx {
opacity: 1;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.5; }
[data-clase=global] .subxx {
opacity: 1;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.3; }
[data-clase=global] .landxx {
fill: #c0c0c0;
stroke: #ffffff;
stroke-width: 0.5;
fill-rule: evenodd; }
[data-clase=global] .coastxx {
stroke-width: 0.2; }
[data-clase=global] .antxx {
opacity: 1;
fill: #c0c0c0; }
[data-clase=global] .noxx {
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.5; }
[data-clase=global] .limitxx {
opacity: 0;
fill: #c0c0c0;
stroke: #ffffff;
stroke-width: 0.2;
fill-rule: evenodd; }
[data-clase=global] .unxx {
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.3; }
[data-clase=global] .oceanxx {
opacity: 1;
fill: #ffffff;
stroke: #000000;
stroke-width: 0.5; }
/*# sourceMappingURL=Mapeate.css.map */