solvable-sheep-game/src/App.css
2022-09-16 02:39:24 +08:00

93 lines
1.4 KiB
CSS

#root {
text-align: center;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.app {
width: 100%;
margin: 0 auto;
}
.scene-container {
width: 100%;
padding-bottom: 100%;
position: relative;
cursor: pointer;
}
.scene-inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: visible;
font-size: 30px;
}
.symbol {
width: 12.5%;
padding-bottom: 12.5%;
position: absolute;
transition: 0.3s;
left: 0;
top: 0;
}
.symbol-inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 2px solid #444;
background-color: #eee;
}
.queue-container {
border-radius: 8px;
width: 100%;
padding-bottom: 15%;
border: 2px solid gray;
margin-bottom: 16px;
}
.flex-container {
display: flex;
gap: 8px;
}
.flex-center {
justify-content: center;
align-items: center;
}
.flex-grow {
flex-grow: 1;
}
.flex-between {
justify-content: space-between;
align-items: center;
}
.modal {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
background-color: rgb(0 0 0 / 10%);
top: 0;
left: 0;
}