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
mail = abgame@21x9.org
separator_char = ;
theme = auto
theme = dark
[i18n]
lang = de

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

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

62
static/css/dark.css
View file

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

219
static/css/light.css
View file

@ -1,197 +1,24 @@
body {
font-family: 'Courier New', Courier, monospace;
background-color: #333333;
}
html,
body {
border-color: #E7E5E2;
color: #E7E5E2;
}
hr {
display: none;
}
a {
color: #8FA3A9;
}
#header {
border-radius: 10px;
text-align: center;
width: 100%;
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;
}
:root {
--bg: #E7E5E2;
--fg: #243233;
--br: #243233;
--fg-lnk: #8FA3A9;
--bg-header: #8FA3A9;
--fg-header: #243233;
--bg-ab: #89A6C0;
--bg-a: #F7D214;
--fg-a: #243233;
--bg-b: #243233;
--fg-b: #F7D214;
--bg-ab-chkd: #B3472B;
--fg-ab-chkd: #E7E5E2;
--br-ab-chkd: #000000;
--fg-sep: #243233;
--fg-que: #243233;
--bg-nxt: #8FA3A9;
--fg-nxt: #243233;
}

8
templates/index.html
View file

@ -3,13 +3,11 @@
<head>
<title>{{ title }}</title>
{%- if theme == "dark" %}
<link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}">
<link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
{%- elif theme == "light" %}
<link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}">
{%- if theme == "light" %}
<link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}">
{%- 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 %}
<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') }}">