simon/quickdraw-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added new color css variables

Browse Source
This commit is contained in:
simon
2026-08-12 14:11:01 -04:00
parent 78d3ab31f9
commit f5f0b167ab
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+15 -9
View File
@@ -11,7 +11,13 @@
font-family: sans-serif; font-family: sans-serif;
} }
:root { :root {
/**
--bg: #161616; --bg: #161616;
--bg-green: #182118;
--fg-green: #e1ffdb;
*/
--bg: #182118;
--fg: #e1ffdb;
} }
html { html {
height: 100vh; height: 100vh;
@@ -37,7 +43,7 @@
#center { #center {
height: 50px; height: 50px;
width: 50px; width: 50px;
background-color: red; background-color: var(--fg);
/** border: 5px solid red; */ /** border: 5px solid red; */
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
@@ -48,7 +54,7 @@
height: 50px; height: 50px;
width: 50px; width: 50px;
background-color: var(--bg); background-color: var(--bg);
border: 10px solid red; border: 10px solid var(--fg);
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
} }
@@ -57,7 +63,7 @@
} }
.target::after { .target::after {
position: absolute; position: absolute;
background-color: red; background-color: var(--fg);
border-radius: 2rem; border-radius: 2rem;
height: 10px; height: 10px;
width: 10px; width: 10px;
@@ -69,7 +75,7 @@
.red-dot { .red-dot {
height: 50px; height: 50px;
width: 50px; width: 50px;
background-color: red; background-color: var(--fg);
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
} }
@@ -104,7 +110,7 @@
min-height: 15%; min-height: 15%;
width: 100%; width: 100%;
color: red; color: var(--fg);
text-align: center; text-align: center;
line-height: 1rem; line-height: 1rem;
@@ -129,9 +135,9 @@
button { button {
background-color: var(--bg); background-color: var(--bg);
color: red; color: var(--fg);
padding: 12px 12px; padding: 12px 12px;
border: 2px solid red; border: 2px solid var(--fg);
border-radius: 1rem; border-radius: 1rem;
font-size: .75rem; font-size: .75rem;
font-weight: bold; font-weight: bold;
@@ -141,7 +147,7 @@
text-decoration: underline; text-decoration: underline;
} }
button:active { button:active {
background-color: red; background-color: var(--fg);
color: var(--bg); color: var(--bg);
font-style: italic; font-style: italic;
} }
@@ -526,7 +532,7 @@
if (roundNumber == maxNormalRounds) { if (roundNumber == maxNormalRounds) {
if (totalTime < highScore || highScore == 0) { if (totalTime < highScore || highScore == 0) {
if (highScore == 0) { if (highScore == 0) {
alert("high score set!"); alert("high score set, congratulations! can you go faster?");
} }
else { else {
alert("NEW FASTEST TIME!!! previous best: " + highScore.toFixed(3) + "s. congratulations cowboy."); alert("NEW FASTEST TIME!!! previous best: " + highScore.toFixed(3) + "s. congratulations cowboy.");