Update style.css

This commit is contained in:
Voxel 2025-04-14 17:38:06 -04:00 committed by GitHub
parent b6f92c2769
commit 6f9f5eecff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,147 +1,88 @@
/* Apply global styles */ /* Apply global styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(to right, #000000, #00aaff); /* Black to Blue gradient */ margin: 0;
color: white; padding: 0;
display: flex; background: linear-gradient(to right, #000000, #1e3c72); /* Black to blue gradient */
justify-content: center; color: #fff;
align-items: center; display: flex;
height: 100vh; justify-content: center;
overflow: hidden; align-items: center;
height: 100vh;
flex-direction: column;
} }
/* Styling for the app container */ header {
#app { text-align: center;
width: 80%; margin-bottom: 30px;
max-width: 900px;
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
/* General screen styling */
.screen {
display: none;
}
.screen.active {
display: block;
}
/* Heading styles */
h1, h2, h3 {
color: #ffffff;
text-align: center;
} }
h1 { h1 {
font-size: 2.5rem; font-size: 3em;
margin-bottom: 20px; margin: 0;
} }
h2 { p {
font-size: 2rem; font-size: 1.2em;
margin-bottom: 10px;
} }
h3 { /* Game selection buttons */
font-size: 1.5rem; .game-selection {
margin: 20px 0; display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
} }
/* Button styles */
button { button {
background-color: #00aaff; padding: 10px 20px;
color: white; font-size: 1.2em;
font-size: 1rem; cursor: pointer;
border: none; background-color: #1e3c72;
padding: 10px 20px; color: white;
margin: 10px 0; border: 2px solid #fff;
border-radius: 5px; border-radius: 8px;
cursor: pointer; transition: background-color 0.3s, transform 0.3s;
transition: background-color 0.3s;
} }
button:hover { button:hover {
background-color: #0077cc; background-color: #154c79;
transform: scale(1.05);
} }
/* Input styles */ button:active {
input[type="text"], background-color: #0d3a56;
input[type="number"],
input[type="file"],
select {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #333;
background-color: #222;
color: white;
font-size: 1rem;
} }
/* Main menu styling */ /* Game container styles */
#main-menu { .game {
text-align: center; display: none;
text-align: center;
margin-top: 20px;
} }
#xp-bar { .game h2 {
width: 100%; font-size: 2em;
height: 20px; margin-bottom: 20px;
background-color: #333;
border-radius: 10px;
margin: 10px 0;
} }
#xp-progress { .game p {
height: 100%; font-size: 1.2em;
background-color: #00aaff; margin-bottom: 20px;
border-radius: 10px;
width: 0;
transition: width 0.5s;
} }
/* Game screens styling */ footer {
#blackjack, #slots, #roulette, #crash, #horse, #war, #coinflip, #keno, #stats { position: absolute;
margin-top: 20px; bottom: 20px;
} font-size: 1em;
color: #ddd;
.hidden { text-align: center;
display: none;
}
/* Stats screen */
#stats p {
font-size: 1.2rem;
}
/* Adjustments for mobile */
@media (max-width: 768px) {
body {
flex-direction: column;
padding: 20px;
}
#app {
width: 100%; width: 100%;
max-width: none; }
}
/* Game results */
h1, h2, h3 { #race-result, #blackjack-result, #slots-result, #coin-flip-result {
font-size: 1.5rem; font-size: 1.5em;
} margin-top: 20px;
font-weight: bold;
button {
font-size: 0.9rem;
padding: 8px 16px;
}
} }