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;
background: linear-gradient(to right, #000000, #1e3c72); /* Black to blue gradient */
color: #fff;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
overflow: hidden; flex-direction: column;
} }
/* Styling for the app container */ header {
#app {
width: 80%;
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; text-align: center;
margin-bottom: 30px;
} }
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;
color: white;
font-size: 1rem;
border: none;
padding: 10px 20px; padding: 10px 20px;
margin: 10px 0; font-size: 1.2em;
border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; background-color: #1e3c72;
color: white;
border: 2px solid #fff;
border-radius: 8px;
transition: background-color 0.3s, transform 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 {
display: none;
text-align: center; text-align: center;
}
#xp-bar {
width: 100%;
height: 20px;
background-color: #333;
border-radius: 10px;
margin: 10px 0;
}
#xp-progress {
height: 100%;
background-color: #00aaff;
border-radius: 10px;
width: 0;
transition: width 0.5s;
}
/* Game screens styling */
#blackjack, #slots, #roulette, #crash, #horse, #war, #coinflip, #keno, #stats {
margin-top: 20px; margin-top: 20px;
} }
.hidden { .game h2 {
display: none; font-size: 2em;
margin-bottom: 20px;
} }
/* Stats screen */ .game p {
#stats p { font-size: 1.2em;
font-size: 1.2rem; margin-bottom: 20px;
} }
/* Adjustments for mobile */ footer {
@media (max-width: 768px) { position: absolute;
body { bottom: 20px;
flex-direction: column; font-size: 1em;
padding: 20px; color: #ddd;
} text-align: center;
#app {
width: 100%; width: 100%;
max-width: none;
} }
h1, h2, h3 { /* Game results */
font-size: 1.5rem; #race-result, #blackjack-result, #slots-result, #coin-flip-result {
} font-size: 1.5em;
margin-top: 20px;
button { font-weight: bold;
font-size: 0.9rem;
padding: 8px 16px;
}
} }