159 lines
2.3 KiB
CSS
159 lines
2.3 KiB
CSS
body {
|
|
background-color: #121212;
|
|
color: #faf9f6;
|
|
transition-duration: 3s;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
canvas {
|
|
cursor: pointer;
|
|
}
|
|
|
|
footer {
|
|
position: absolute;
|
|
padding: 1rem;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
footer p {
|
|
text-align: right;
|
|
cursor: pointer;
|
|
}
|
|
|
|
html {
|
|
font-family: "Courier New", Courier, monospace;
|
|
}
|
|
|
|
input {
|
|
height: 1.5rem;
|
|
width: 15rem;
|
|
}
|
|
|
|
li {
|
|
padding: 0.75rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul {
|
|
padding: 0;
|
|
list-style-type: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.add-item-button {
|
|
height: 2rem;
|
|
width: 15.5rem;
|
|
margin-top: 0.5rem;
|
|
background-color: #6495ed;
|
|
border: 0.05rem solid black;
|
|
box-shadow: 0 0.7rem 0 -0.1rem #6082b6, 0 0.75rem 0 -0.05rem black;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.add-item-button:hover {
|
|
transform: translate(0, 0.25rem);
|
|
box-shadow: 0 0.5rem 0 -0.1rem #6082b6, 0 0.55rem 0 -0.05rem black;
|
|
}
|
|
|
|
.add-item-button:active {
|
|
transform: translate(0, 0.5rem);
|
|
box-shadow: 0 0.1rem 0 -0.1rem #6082b6, 0 0.15rem 0 -0.05rem black;
|
|
}
|
|
|
|
.counter {
|
|
font-size: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-delete {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
float: right;
|
|
}
|
|
|
|
.light-dark-mode {
|
|
float: right;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.menu {
|
|
width: 24rem;
|
|
}
|
|
|
|
.menu-item-list {
|
|
text-align: center;
|
|
}
|
|
|
|
.moon-sun {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
.remove-all-items-button {
|
|
width: 5.4rem;
|
|
height: 2rem;
|
|
background-color: #6495ed;
|
|
border: 0.05rem solid black;
|
|
box-shadow: 0 0.7rem 0 -0.1rem #6082b6, 0 0.75rem 0 -0.05rem black;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.remove-all-items-button:hover {
|
|
transform: translate(0, 0.25rem);
|
|
box-shadow: 0 0.5rem 0 -0.1rem #6082b6, 0 0.55rem 0 -0.05rem black;
|
|
}
|
|
|
|
.remove-all-items-button:active {
|
|
transform: translate(0, 0.5rem);
|
|
box-shadow: 0 0.1rem 0 -0.1rem #6082b6, 0 0.15rem 0 -0.05rem black;
|
|
}
|
|
|
|
.roulette-wheel {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 60rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.open-close-menu {
|
|
display: flex;
|
|
justify-content: right;
|
|
}
|
|
|
|
.winner {
|
|
font-size: 32px;
|
|
margin-bottom: 1rem;
|
|
height: 28px;
|
|
}
|
|
|
|
@media screen and (max-width: 1580px) {
|
|
canvas {
|
|
margin-top: 5rem;
|
|
height: 20rem;
|
|
margin: auto;
|
|
}
|
|
|
|
.menu {
|
|
width: 23.5rem;
|
|
}
|
|
|
|
.roulette-wheel {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
transform: translate(0, 0);
|
|
margin: 0;
|
|
}
|
|
|
|
footer {
|
|
position: relative;
|
|
}
|
|
}
|