gpkvt/abgame
1
0
Fork 0
Code Issues Pull requests Projects Releases 4 Packages Wiki Activity

Changed CSS colors to vars

Browse source
This commit is contained in:
gpkvt 2023-06-03 22:54:37 +02:00
parent 8872b73c00
commit f072a0777a
5 changed files with 81 additions and 280 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.ini
View file

@ -5,7 +5,7 @@ base_url = https://ab.21x9.org
timezone = Europe/Berlin timezone = Europe/Berlin
mail = abgame@21x9.org mail = abgame@21x9.org
separator_char = ; separator_char = ;
theme = auto theme = dark
[i18n] [i18n]
lang = de lang = de

68
static/css/auto.css → static/css/base.css
View file

@ -1,12 +1,12 @@
body { body {
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
background-color: #333333; background-color: var(--bg);
} }
html, html,
body { body {
border-color: #E7E5E2; border-color: var(--br);
color: #E7E5E2; color: var(--fg);
} }
hr { hr {
@ -14,7 +14,7 @@ hr {
} }
a { a {
color: #8FA3A9; color: var(--fg-lnk);
} }
#header { #header {
@ -23,8 +23,8 @@ a {
width: 100%; width: 100%;
padding-top: 25px; padding-top: 25px;
padding-bottom: 25px; padding-bottom: 25px;
background-color: #8FA3A9; background-color: var(--bg-header);
color: #243233; color: var(--fg-header);
font-weight: bolder; font-weight: bolder;
font-size: large; font-size: large;
} }
@ -48,7 +48,7 @@ a {
align-items: center; align-items: center;
display: flex; display: flex;
padding: 5px; padding: 5px;
background-color: #89A6C0; background-color: var(--bg-ab);
} }
.a { .a {
@ -58,8 +58,8 @@ a {
padding: 25px; padding: 25px;
border-radius: 10px; border-radius: 10px;
border: 1px solid transparent; border: 1px solid transparent;
background-color: #F7D214; background-color: var(--bg-a);
color: #243233; color: var(--fg-a);
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
@ -78,8 +78,8 @@ a {
padding: 25px; padding: 25px;
border-radius: 10px; border-radius: 10px;
border: 1px solid transparent; border: 1px solid transparent;
background-color: #243233; background-color: var(--bg-b);
color: #F7D214; color: var(--fg-b);
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
@ -103,9 +103,9 @@ input[type="radio"] {
} }
.ab input:checked+label { .ab input:checked+label {
background-color: #B3472B; background-color: var(--bg-ab-chkd);
border: 1px solid #000000; border: 1px solid var(--br-ab-chkd);
color: #E7E5E2; color: var(--fg-ab-chkd);
} }
.separator { .separator {
@ -119,7 +119,7 @@ input[type="radio"] {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #243233; color: var(--fg-sep);
} }
#footer { #footer {
@ -134,7 +134,7 @@ input[type="radio"] {
border-radius: 10px; border-radius: 10px;
padding-top: 25px; padding-top: 25px;
padding-bottom: 25px; padding-bottom: 25px;
color: #F7D214; color: var(--fg-que);
font-weight: bold; font-weight: bold;
} }
@ -146,8 +146,8 @@ input[type="radio"] {
border-radius: 10px; border-radius: 10px;
padding-top: 25px; padding-top: 25px;
padding-bottom: 25px; padding-bottom: 25px;
background-color: #8FA3A9; background-color: var(--bg-nxt);
color: #243233; color: var(--fg-nxt);
font-weight: bold; font-weight: bold;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
font-size: medium; font-size: medium;
@ -198,51 +198,51 @@ input[type="radio"] {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background-color: #181a1b !important; background-color: var(--bg) !important;
} }
#header { #header {
background-color: rgb(74, 91, 96) !important; background-color: var(--bg-header) !important;
color: rgb(205, 200, 194) !important; color: var(--fg-header) !important;
} }
.a { .a {
border-color: transparent !important; border-color: transparent !important;
background-color: rgb(143, 120, 5) !important; background-color: var(--bg-a) !important;
color: rgb(29, 40, 41) !important; color: var(--fg-a) !important;
} }
.b { .b {
border-color: transparent !important; border-color: transparent !important;
background-color: rgb(29, 40, 41) !important; background-color: var(--bg-b) !important;
color: rgb(248, 214, 41) !important; color: var(--fg-b) !important;
} }
.ab { .ab {
background-color: rgb(56, 81, 104) !important; background-color: var(--bg-ab) !important;
} }
.ab input:checked+label { .ab input:checked+label {
background-color: rgb(143, 57, 34) !important; background-color: var(--bg-ab-chkd) !important;
border-color: rgb(140, 130, 115) !important; border-color: var(--br-ab-chkd) !important;
color: rgb(215, 212, 207) !important; color: var(--fg-ab-chkd) !important;
} }
.separator { .separator {
color: rgb(205, 200, 194); color: var(--fg-sep);
} }
#next { #next {
border-color: initial !important; border-color: initial !important;
background-color: rgb(74, 91, 96) !important; background-color: var(--bg-nxt) !important;
color: rgb(205, 200, 194) !important; color: var(--fg-nxt) !important;
} }
#questions { #questions {
color: rgb(248, 214, 41) !important; color: var(--fg-que) !important;
} }
a { a {
color: rgb(169, 162, 151) !important; color: var(--fg-lnk) !important;
} }
} }

62
static/css/dark.css
View file

@ -1,48 +1,24 @@
body { :root {
background-color: #181a1b !important; --bg: #243233;
} --fg: #E7E5E2;
--br: #E7E5E2;
--fg-lnk: rgb(169, 162, 151);
#header { --bg-header: rgb(74, 91, 96);
background-color: rgb(74, 91, 96) !important; --fg-header: rgb(205, 200, 194);
color: rgb(205, 200, 194) !important; --bg-ab: rgb(56, 81, 104);
}
.a { --bg-a: rgb(143, 120, 5);
border-color: transparent !important; --fg-a: rgb(29, 40, 41);
background-color: rgb(143, 120, 5) !important; --bg-b: rgb(29, 40, 41);
color: rgb(29, 40, 41) !important; --fg-b: rgb(248, 214, 41);
}
.b { --bg-ab-chkd: rgb(143, 57, 34);
border-color: transparent !important; --fg-ab-chkd: rgb(215, 212, 207);
background-color: rgb(29, 40, 41) !important; --br-ab-chkd: rgb(140, 130, 115);
color: rgb(248, 214, 41) !important;
}
.ab { --fg-sep: rgb(205, 200, 194);
background-color: rgb(56, 81, 104) !important; --fg-que: rgb(248, 214, 41);
} --bg-nxt: rgb(74, 91, 96)
--fg-nxt: rgb(205, 200, 194);
.ab input:checked+label {
background-color: rgb(143, 57, 34) !important;
border-color: rgb(140, 130, 115) !important;
color: rgb(215, 212, 207) !important;
}
.separator {
color: rgb(205, 200, 194);
}
#next {
border-color: initial !important;
background-color: rgb(74, 91, 96) !important;
color: rgb(205, 200, 194) !important;
}
#questions {
color: rgb(248, 214, 41) !important;
}
a {
color: rgb(169, 162, 151) !important;
} }

219
static/css/light.css
View file

@ -1,197 +1,24 @@
body { :root {
font-family: 'Courier New', Courier, monospace; --bg: #E7E5E2;
background-color: #333333; --fg: #243233;
} --br: #243233;
--fg-lnk: #8FA3A9;
html,
body { --bg-header: #8FA3A9;
border-color: #E7E5E2; --fg-header: #243233;
color: #E7E5E2; --bg-ab: #89A6C0;
}
--bg-a: #F7D214;
hr { --fg-a: #243233;
display: none; --bg-b: #243233;
} --fg-b: #F7D214;
a { --bg-ab-chkd: #B3472B;
color: #8FA3A9; --fg-ab-chkd: #E7E5E2;
} --br-ab-chkd: #000000;
#header { --fg-sep: #243233;
border-radius: 10px; --fg-que: #243233;
text-align: center; --bg-nxt: #8FA3A9;
width: 100%; --fg-nxt: #243233;
padding-top: 25px;
padding-bottom: 25px;
background-color: #8FA3A9;
color: #243233;
font-weight: bolder;
font-size: large;
}
#content {
min-width: 400px;
max-width: 900px;
width: 65%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ab {
float: none;
border-radius: 10px;
margin-top: 10px;
justify-content: center;
align-items: center;
display: flex;
padding: 5px;
background-color: #89A6C0;
}
.a {
float: left;
width: 45%;
box-sizing: border-box;
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: #F7D214;
color: #243233;
font-weight: bold;
text-align: left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
text-indent: -25px;
padding-left: 50px;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
.b {
float: left;
width: 45%;
box-sizing: border-box;
padding: 25px;
border-radius: 10px;
border: 1px solid transparent;
background-color: #243233;
color: #F7D214;
font-weight: bold;
text-align: left;
font-family: 'Courier New', Courier, monospace;
cursor: pointer;
text-indent: -25px;
padding-left: 50px;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}
input[type="radio"] {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
cursor: pointer;
}
.ab input:checked+label {
background-color: #B3472B;
border: 1px solid #000000;
color: #E7E5E2;
}
.separator {
float: left;
width: 10%;
box-sizing: border-box;
writing-mode: vertical-lr;
transform: rotate(210deg);
font-size: x-small;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
color: #243233;
}
#footer {
margin-top: 10px;
}
#questions {
font-size: small;
text-align: center;
width: 45%;
float: left;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
color: #F7D214;
font-weight: bold;
}
#next {
text-align: center;
width: 45%;
float: left;
border: 0px;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 25px;
background-color: #8FA3A9;
color: #243233;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
font-size: medium;
display: block;
cursor: pointer;
}
@media only screen and (max-width:1600px) {
#content {
min-width: 75%;
}
}
@media only screen and (max-width:1280px) {
#content {
min-width: 95%;
}
}
@media only screen and (max-width:640px) {
#content {
min-width: 95%;
transform: none;
position: absolute;
top: 5px;
left: 50%;
transform: translate(-50%);
}
#next {
min-width: 100%;
}
#questions {
min-width: 100%;
padding-top: 0px;
padding-bottom: 5px;
}
.a {
font-size: small;
}
.b {
font-size: small;
}
} }

8
templates/index.html
View file

@ -3,13 +3,11 @@
<head> <head>
<title>{{ title }}</title> <title>{{ title }}</title>
{%- if theme == "dark" %} <link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}">
<link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}"> {%- if theme == "light" %}
<link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
{%- elif theme == "light" %}
<link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}"> <link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}">
{%- else %} {%- else %}
<link rel="stylesheet" type="text/css" href="/css/auto.css?t={{ epoch }}"> <link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
{%- endif %} {%- endif %}
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}"> <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}"> <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">