380 lines
8.5 KiB
CSS
380 lines
8.5 KiB
CSS
/* Import pixelated font from Google Fonts */
|
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
|
|
|
/* General body styles with pixelated feel */
|
|
body {
|
|
font-family: 'Press Start 2P', monospace; /* Pixelated font for retro look */
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #000; /* Solid black background for pixel style */
|
|
color: #FFF; /* White text */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
image-rendering: pixelated; /* Force pixelated rendering */
|
|
image-rendering: -moz-crisp-edges; /* Firefox */
|
|
image-rendering: crisp-edges; /* Safari */
|
|
}
|
|
|
|
/* Header with pixel shadow */
|
|
h1 {
|
|
font-size: 2.7rem;
|
|
margin-top: 25px;
|
|
text-shadow: 2px 2px 0px #FF0000; /* Red pixel shadow */
|
|
letter-spacing: 1px;
|
|
color: #FFFF00; /* Yellow for retro feel */
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.5rem;
|
|
margin-top: 20px;
|
|
text-shadow: 2px 2px 0px #FF0000;
|
|
color: #FFFF00;
|
|
}
|
|
|
|
/* Menu with pixelated buttons */
|
|
.menu {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.menu a {
|
|
text-decoration: none;
|
|
color: #FFF;
|
|
padding: 10px 18px;
|
|
background: #333; /* Dark gray for pixel button */
|
|
border: 2px solid #FFF; /* White border for pixel edge */
|
|
border-radius: 0; /* No rounded corners for pixel style */
|
|
box-shadow: 4px 4px 0px #000; /* Raised pixel effect */
|
|
transition: none; /* Remove smooth transitions for instant pixel feel */
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-size: 0.8rem; /* Smaller font for pixel look */
|
|
}
|
|
|
|
.menu a:hover {
|
|
background: #555; /* Lighter gray on hover */
|
|
box-shadow: 2px 2px 0px #000; /* Slightly less raised */
|
|
}
|
|
|
|
.user-info {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 5px;
|
|
text-align: center;
|
|
width: 100%;
|
|
display: block;
|
|
color: #00FF00; /* Green for user info */
|
|
}
|
|
|
|
/* Game container with pixelated border */
|
|
.game-container {
|
|
margin-top: 20px;
|
|
background: #111; /* Dark background */
|
|
padding: 25px;
|
|
border: 4px solid #FFF; /* Thick white border for pixel */
|
|
border-radius: 0; /* Square corners */
|
|
box-shadow: 8px 8px 0px #000; /* Heavy shadow for 3D pixel effect */
|
|
text-align: center;
|
|
width: 95%;
|
|
max-width: 520px;
|
|
}
|
|
|
|
canvas {
|
|
border: 4px solid #FFF; /* Pixel border */
|
|
border-radius: 0; /* Square */
|
|
background: #000; /* Black canvas background */
|
|
box-shadow: 4px 4px 0px #000; /* Pixel shadow */
|
|
image-rendering: pixelated; /* Ensure canvas renders pixelated */
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
#score {
|
|
font-size: 1.6rem;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
color: #FFFF00; /* Yellow score */
|
|
}
|
|
|
|
/* Controls with pixel buttons */
|
|
.controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
select {
|
|
padding: 8px 12px;
|
|
border: 2px solid #FFF;
|
|
border-radius: 0;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
background: #333;
|
|
color: #FFF;
|
|
font-family: 'Press Start 2P', monospace;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 22px;
|
|
font-size: 1rem;
|
|
border: 2px solid #FFF;
|
|
border-radius: 0;
|
|
color: #FFF;
|
|
background: #FF0000; /* Red button */
|
|
box-shadow: 4px 4px 0px #000;
|
|
transition: none;
|
|
cursor: pointer;
|
|
font-family: 'Press Start 2P', monospace;
|
|
}
|
|
|
|
button:hover {
|
|
background: #CC0000; /* Darker red */
|
|
box-shadow: 2px 2px 0px #000;
|
|
}
|
|
|
|
/* Leaderboard body */
|
|
.leaderboard-body {
|
|
padding: 20px;
|
|
text-align: center;
|
|
min-height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.leaderboard-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 25px auto;
|
|
width: 95%;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.lb-column {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
background: #222; /* Dark gray */
|
|
padding: 20px;
|
|
border: 4px solid #FFF;
|
|
border-radius: 0;
|
|
box-shadow: 8px 8px 0px #000;
|
|
}
|
|
|
|
.lb-column h3 {
|
|
margin-top: 0;
|
|
text-transform: uppercase;
|
|
font-size: 1.5rem;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 15px;
|
|
text-shadow: 2px 2px 0px #000;
|
|
}
|
|
|
|
.easy-title { color: #00FF00; border-bottom: 4px solid #00FF00; display: inline-block; padding-bottom: 5px; }
|
|
.medium-title { color: #0000FF; border-bottom: 4px solid #0000FF; display: inline-block; padding-bottom: 5px; }
|
|
.hard-title { color: #FF00FF; border-bottom: 4px solid #FF00FF; display: inline-block; padding-bottom: 5px; }
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
color: #FFF;
|
|
border: 2px solid #FFF;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
th {
|
|
background: #444;
|
|
padding: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
border: 2px solid #FFF;
|
|
}
|
|
|
|
td {
|
|
padding: 12px;
|
|
background: #333;
|
|
border: 1px solid #FFF;
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background: #555;
|
|
}
|
|
|
|
tr:hover td {
|
|
background: #777;
|
|
transition: none;
|
|
}
|
|
|
|
.back-button {
|
|
display: inline-block;
|
|
margin: 25px auto;
|
|
padding: 10px 22px;
|
|
background: #00FF00; /* Green */
|
|
border: 2px solid #FFF;
|
|
border-radius: 0;
|
|
color: #000; /* Black text for contrast */
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
box-shadow: 4px 4px 0px #000;
|
|
transition: none;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: #00CC00;
|
|
box-shadow: 2px 2px 0px #000;
|
|
}
|
|
|
|
/* Login body */
|
|
.login-body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
background: #000;
|
|
}
|
|
|
|
.login-box {
|
|
position: relative;
|
|
width: 380px;
|
|
background: #333;
|
|
border: 4px solid #FFF;
|
|
border-radius: 0;
|
|
padding: 25px;
|
|
box-shadow: 8px 8px 0px #000;
|
|
animation: none; /* Remove animation for pixel feel */
|
|
}
|
|
|
|
.login-box input, .login-box button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border: 2px solid #FFF;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
font-size: 1rem;
|
|
background: #000;
|
|
color: #FFF;
|
|
font-family: 'Press Start 2P', monospace;
|
|
}
|
|
|
|
.login-box button {
|
|
background: #FF0000;
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: none;
|
|
box-shadow: 4px 4px 0px #000;
|
|
}
|
|
|
|
.login-box button:hover {
|
|
background: #CC0000;
|
|
box-shadow: 2px 2px 0px #000;
|
|
}
|
|
|
|
.login-box hr {
|
|
margin: 25px 0;
|
|
border: 2px solid #FFF;
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
/* Game modal with pixel style */
|
|
.game-modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background: #222;
|
|
padding: 40px;
|
|
border: 4px solid #FFF;
|
|
border-radius: 0;
|
|
text-align: center;
|
|
width: 90%;
|
|
max-width: 350px;
|
|
box-shadow: 8px 8px 0px #000;
|
|
animation: none;
|
|
}
|
|
|
|
.modal-content h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 10px;
|
|
color: #FFFF00;
|
|
}
|
|
|
|
.modal-content p {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin-bottom: 25px;
|
|
color: #FFF;
|
|
}
|
|
|
|
.modal-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-bottom: 25px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.modal-buttons button {
|
|
padding: 10px 20px;
|
|
font-size: 1rem;
|
|
border: 2px solid #FFF;
|
|
border-radius: 0;
|
|
box-shadow: 4px 4px 0px #000;
|
|
font-family: 'Press Start 2P', monospace;
|
|
}
|
|
|
|
#saveScoreBtn {
|
|
background: #00FF00;
|
|
color: #000;
|
|
box-shadow: 4px 4px 0px #000;
|
|
}
|
|
|
|
.leaderboard-link, .back-link {
|
|
display: block;
|
|
margin-top: 10px;
|
|
text-decoration: none;
|
|
color: #FFF;
|
|
font-size: 0.9rem;
|
|
padding: 8px;
|
|
border: 2px solid #FFF;
|
|
border-radius: 0;
|
|
background: #333;
|
|
box-shadow: 4px 4px 0px #000;
|
|
transition: none;
|
|
font-family: 'Press Start 2P', monospace;
|
|
}
|
|
|
|
.leaderboard-link:hover, .back-link:hover {
|
|
background: #555;
|
|
box-shadow: 2px 2px 0px #000;
|
|
}
|
|
|
|
/* Media queries for mobile */
|
|
@media (max-width: 600px) {
|
|
h1 { font-size: 2.2rem; }
|
|
canvas { width: 100%; height: auto; }
|
|
.leaderboard-wrapper { flex-direction: column; }
|
|
.lb-column { width: 100%; min-width: auto; }
|
|
} |