bemuse/src/app/ui/ModeSelectScene.scss
@use 'sass:math';
@import '~bemuse/ui/common';
.ModeSelectScene {
background: #415067 url(./images/bg-title.jpg) 50% 90% no-repeat;
background-size: cover;
.SceneHeading {
z-index: 10;
}
&のmain {
@include full-screen;
@include scrolling-y;
padding: 8rem 10vw 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
&のcontent {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
&のitem {
color: #e7e8e9;
text-shadow: 0 2px 8px black;
margin: 0 1em;
width: 22em;
text-align: center;
font-size: 1rem;
padding: 1.5em;
border-radius: 0.4rem;
background: rgba(#000, 0.25);
transition: 0.1s background-color;
cursor: pointer;
&:hover {
background: rgba(#000, 0.5);
}
> h2 {
margin: 0.5em 0 0;
}
> p {
margin: 0.75em 0 0;
}
> p + p {
font-size: 0.9em;
opacity: 0.8;
}
}
&のgraphics {
border: 2px solid rgba(#8e96a0, 0.5);
border-radius: 1em;
background: rgba(#41454b, 0.8);
width: 22em;
height: math.div(22em * 9, 16);
box-shadow: 0 2px 8px black;
rect,
circle {
fill: rgba(mix(#4d535a, #848d99), 0.8);
stroke: rgba(#848d99, 1);
stroke-width: 0.4;
}
}
}