coastercast/Buzzer
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CSS changes

Browse source
This commit is contained in:
Oliver Rümpelein 2021-09-25 16:53:48 +02:00
parent 7357528bb5
commit bdab8f4982
3 changed files with 30 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/main/kotlin/de/pheerai/buzzer/clients/playerClient.kt
View file

@ -7,6 +7,11 @@ fun HTML.createPlayerDocument() {
head { head {
meta { charset = "UTF-8" } meta { charset = "UTF-8" }
title { +"JS Client" } title { +"JS Client" }
link(
href = "/assets/colors.css",
rel = "stylesheet",
type = "text/css"
)
link( link(
href = "/assets/player.css", href = "/assets/player.css",
rel = "stylesheet", rel = "stylesheet",

11
src/main/resources/css/colors.css Normal file
View file

@ -0,0 +1,11 @@
:root {
--highlight-dark: #03045eff;
--background: #023e8aff;
--foreground: #0077b6ff;
--blue-green: #0096c7ff;
--cerulean-crayola: #00b4d8ff;
--highlight01: #48cae4ff;
--lowlight-text: #90e0efff;
--text: #ade8f4ff;
--highlight-text: #caf0f8ff;
}

23
src/main/resources/css/player.css
View file

@ -5,8 +5,8 @@ body, html {
box-sizing: border-box; box-sizing: border-box;
padding: 5px; padding: 5px;
margin: 0; margin: 0;
background-color: #1E1A4A; background-color: var(--background);
color: lightgray; color: var(--text);
} }
div.parent { div.parent {
@ -19,10 +19,10 @@ div.parent {
div.input { div.input {
border-radius: 50px; border-radius: 50px;
max-width: 100%; max-width: 100%;
margin-bottom: 3%; margin-bottom: 1vh;
display: grid; display: grid;
grid-template-columns: auto 50px 1fr; grid-template-columns: auto 50px 1fr;
background-color: #411C52; background-color: var(--foreground);
padding-left: 20px; padding-left: 20px;
} }
@ -37,7 +37,12 @@ div.input > input {
font-size: 4vh; font-size: 4vh;
border-bottom-right-radius: 50px; border-bottom-right-radius: 50px;
border-top-right-radius: 50px; border-top-right-radius: 50px;
background-color: #551D57; background-color: var(--foreground);
color: var(--text);
}
input::placeholder {
color: var(--lowlight-text);
} }
div > .submit { div > .submit {
@ -46,9 +51,9 @@ div > .submit {
max-width: 100%; max-width: 100%;
font-size: 4vh; font-size: 4vh;
height: 100%; height: 100%;
border: solid 1px #5B1D4A; border: solid 1px var(--highlight-dark);
background-color: #411C52; background-color: var(--foreground);
color: lightgray; color: var(--text);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -56,5 +61,5 @@ div > .submit {
} }
div > button.active { div > button.active {
background-color: #5B1D4A; background-color: var(--highlight01);
} }