alvierahman90/capitals_quiz
1
0
Fork 0
mirror of https://github.com/alvierahman90/capitals_quiz.git synced 2026-02-11 18:53:59 +00:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: alvierahman90:38b1530202e92fe64a288703ec6bfe7ff8efb1fd
Branches Tags
alvierahman90:main
..
compare: alvierahman90:cf2e7abf28acd913fd3ae51a7c54614480ec9ef5
Branches Tags
alvierahman90:main

4 Commits
38b1530202 ... cf2e7abf28

Author SHA1 Message Date
Alvie Rahman
cf2e7abf28 more fixing styles 2022-04-13 03:00:40 +01:00
Alvie Rahman
925c7744fe more fixing styles 2022-04-13 02:59:24 +01:00
Alvie Rahman
0f44c34f65 more fixing styles 2022-04-13 02:57:14 +01:00
Alvie Rahman
cf94bcf486 update styles 2022-04-13 02:55:01 +01:00
2 changed files with 18 additions and 13 deletions
Expand all files Collapse all files

22
game_styles.css
View File

@@ -21,25 +21,25 @@ input {
@keyframes correct { @keyframes correct {
0% { 0% {
background: var(--default-bg); background: var(--bg);
} }
50% { 50% {
background: var(--green); background: var(--green);
} }
100% { 100% {
background: var(--default-bg); background: var(--bg);
} }
} }
@keyframes incorrect { @keyframes incorrect {
0% { 0% {
background: var(--default-bg); background: var(--bg);
} }
50% { 50% {
background: var(--red); background: var(--red);
} }
100% { 100% {
background: var(--default-bg); background: var(--bg);
} }
} }
@@ -74,10 +74,12 @@ input {
--okay: var(--yellow); --okay: var(--yellow);
--bad: var(--red); --bad: var(--red);
background: var(--good); background: var(--good);
color: var(--dark);
} }
#time { #time {
background: var(--blue); background: var(--blue);
color: var(--dark);
} }
#gameinfo { #gameinfo {
@@ -90,6 +92,7 @@ input {
#previousQuestionAnswer { #previousQuestionAnswer {
background: var(--green); background: var(--green);
color: var(--dark);
} }
#game .answer { #game .answer {
@@ -113,29 +116,35 @@ input {
#a { #a {
background-color: var(--a-color); background-color: var(--a-color);
border-color: var(--a-color); border-color: var(--a-color);
color: var(--dark);
} }
#b { #b {
background-color: var(--b-color); background-color: var(--b-color);
border-color: var(--b-color); border-color: var(--b-color);
color: var(--dark);
} }
#c { #c {
background-color: var(--c-color); background-color: var(--c-color);
border-color: var(--c-color); border-color: var(--c-color);
color: var(--dark);
} }
#d { #d {
background-color: var(--d-color); background-color: var(--d-color);
border-color: var(--d-color); border-color: var(--d-color);
color: var(--dark);
} }
span#questionCountry { span#questionCountry {
background-color: var(--question-country-color); background-color: var(--question-country-color);
color: var(--dark);
} }
span#questionCapital { span#questionCapital {
background-color: var(--question-capital-color); background-color: var(--question-capital-color);
color: var(--dark);
} }
#settings { #settings {
@@ -154,8 +163,8 @@ span#questionCapital {
} }
#settings .regionListItem:hover { #settings .regionListItem:hover {
background: #d9d9d9; background: var(--light);
color: black; color: var(--dark);
} }
/* toggle switches */ /* toggle switches */
@@ -242,6 +251,7 @@ input[type="radio"] + label {
} }
input[type="radio"]:checked + label { input[type="radio"]:checked + label {
background-color: var(--yellow); background-color: var(--yellow);
color: var(--dark);
} }
#previousQuestionAnswer { #previousQuestionAnswer {

9
styles.css
View File

@@ -1,10 +1,8 @@
@import url("https://styles.alv.cx/base.css"); @import url("https://styles.alv.cx/base.css");
@import url("https://styles.alv.cx/modules/darkmode.css");
@import url("https://styles.alv.cx/modules/colors/gruvbox.css");
:root { :root {
--default-bg: #fefefe;
--dark-bg: #b8b8b8;
--selected-bg: #383838;
--default-fg: #454545;
--red: #ab4642; --red: #ab4642;
--orange: #dc9656; --orange: #dc9656;
--yellow: #f7ca88; --yellow: #f7ca88;
@@ -17,14 +15,11 @@
body { body {
font-family: monospace; font-family: monospace;
color: var(--default-fg);
font-size: 16px; font-size: 16px;
margin: 0 auto; margin: 0 auto;
max-width: 800px; max-width: 800px;
padding: 2em; padding: 2em;
line-height: 1.1; line-height: 1.1;
text-align: justify;
background-color: var(--default-bg);
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {