You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.1 KiB
CSS
121 lines
2.1 KiB
CSS
svg .world-title-wrapper, svg .level-title-wrapper div {
|
|
overflow: visible;
|
|
}
|
|
|
|
svg .world-title-wrapper div, svg .level-title-wrapper div {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
svg .world-title-wrapper div, svg .level-title-wrapper div {
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
overflow: visible;
|
|
|
|
}
|
|
|
|
svg .world-title, svg .level-title {
|
|
color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
svg .world-title {
|
|
font-weight: 700;
|
|
}
|
|
|
|
svg .level-title {
|
|
font-weight: 400;
|
|
opacity: 0;
|
|
transition: opacity .3s;
|
|
}
|
|
|
|
svg .level:hover .level-title {
|
|
opacity: 1;
|
|
}
|
|
|
|
svg .disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.world-selection {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 2em;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.world-selection-menu {
|
|
right: 1em;
|
|
top: 1em;
|
|
/* margin: 1em; */
|
|
/* border: 1px solid var(--clr-primary); */
|
|
border: 1px solid var(--clr-primary);
|
|
background-color: #fff;
|
|
border-radius: .5em;
|
|
filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
|
|
}
|
|
|
|
.world-selection-menu.desktop {
|
|
position: absolute;
|
|
}
|
|
|
|
.world-selection-menu .btn, .welcome .btn {
|
|
min-width: 5em;
|
|
text-align: center;
|
|
margin-left: .4em;
|
|
margin-right: .4em;
|
|
margin-bottom: .2em;
|
|
}
|
|
|
|
.world-selection-menu .slider-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* width: 100%; */
|
|
height: 7em;
|
|
/* min-width: 16em; */
|
|
padding: .5em 1em 1.3em 1em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.difficulty-label {
|
|
/* font-size: 0.875em; */
|
|
padding-bottom: 1.2em;
|
|
}
|
|
|
|
/* Test for mobile `title`s */
|
|
/* @media (pointer: coarse), (hover: none) {
|
|
[title] {
|
|
position: relative;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
}
|
|
[title]:focus::after {
|
|
content: attr(title);
|
|
position: absolute;
|
|
top: 90%;
|
|
color: #000;
|
|
background-color: #fff;
|
|
border: 1px solid;
|
|
width: fit-content;
|
|
padding: 3px;
|
|
}
|
|
} */
|
|
|
|
.world-label {
|
|
/* border: 2px solid purple; */
|
|
padding: .2em;
|
|
border-radius: .5em;
|
|
}
|
|
|
|
.world-selection-menu .helpButton {
|
|
position: absolute;
|
|
right: .5em;
|
|
top: .5em;
|
|
color: var(--clr-primary);
|
|
}
|