summaryrefslogtreecommitdiff
path: root/web/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'web/static/style.css')
-rw-r--r--web/static/style.css168
1 files changed, 95 insertions, 73 deletions
diff --git a/web/static/style.css b/web/static/style.css
index 6bd312f..5287cfc 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -3,7 +3,7 @@
body {
color: #ddd;
- background-color: #1a1a1a;
+ background-color: #000;
font-family: 'Lato', sans-serif;
user-select: none;
@@ -12,69 +12,108 @@ body {
}
div#main {
+ background-color: #1a1a1a;
+
height: calc(100vh - 2*2px);
- width: calc(100vw - 2*2px);
- margin: 2px;
+ width: min(80vh, calc(100vw - 2*2px));
+ margin: 0 auto;
+ padding: 2px;
display: grid;
- grid-template-columns: min-content 2fr;
- grid-template-rows: min-content 1fr;
- grid-template-areas: "keypad settings-bar" "keypad match";
+ grid-template-columns: 1fr;
+ grid-template-rows: min-content min-content 2fr 2fr;
+ grid-template-areas: "settings-bar" "rem-bar" "match" "keypad";
}
div#keypad {
grid-area: keypad;
- font-size: 2vh;
-
- width: clamp(54vh, 30vw, 60vh);
+ font-size: clamp(1.5vh, 2vw, 2vh);
display: grid;
grid-template-columns: repeat(3, 1fr);
- grid-template-rows: min-content 2fr;
+ grid-template-rows: 1.2fr;
grid-auto-rows: 1fr;
}
div#oi {
+ visibility: hidden;
+
+ background-color: #1a1a1a;
font-size: 2em;
+ height: 1.2em;
+ width: 3ch;
+
+ position: absolute;
+ left: 50%;
+ right: 50%;
+ top: 50%;
+ bottom: 50%;
+ transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
}
-div#user-rem, div#boat-rem {
- background-color: #333;
+div#rem-bar {
+ position: relative;
+ grid-column: 1 / span 3;
+
+ font-size: clamp(1.5vh, 2vw, 2vh);
+
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+}
+
+div#user-state, div#boat-state {
+ background-color: #222;
font-size: 1.5em;
margin: 2px;
padding: 0.4rem;
+ flex-direction: column;
display: flex;
align-items: center;
- justify-content: left;
}
-div#boat-rem {
- grid-column: 3;
+div#user-state.active, div#boat-state.active {
+ background-color: #240;
+}
+div#user-rem, div#boat-rem {
+ font-size: 3em;
+ font-weight: bold;
+}
+
+div#boat-rem {
justify-content: right;
}
-div#user-rem.active, div#boat-rem.active {
- background-color: #240;
+div#user-name, div#boat-name {
+ color: #aaa;
+}
+
+div#user-sugg, div#boat-sugg {
+ color: #aaa;
+ font-size: 0.8em;
+}
+
+div#user-sugg:after, div#boat-sugg:after {
+ content: '\200b';
}
div#prompt-container {
grid-column: 1 / span 3;
- background-color: #333;
+ background-color: #222;
margin: 2px;
- display: grid;
- grid-template-rows: 1fr 3fr 1fr;
- grid-template-columns: 1fr;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
div#prompt-msg, div#prompt, div#prompt-sugg {
@@ -82,15 +121,22 @@ div#prompt-msg, div#prompt, div#prompt-sugg {
display: grid;
align-items: center;
- justify-content: center;
}
-div#prompt {
- font-size: 5em;
+div#prompt-msg, div#prompt-sugg {
+ flex: 1;
+ color: #aaa;
+ padding: 0 0.4rem;
}
div#prompt-sugg {
- color: #aaa;
+ text-align: right;
+}
+
+div#prompt {
+ text-align: center;
+ font-size: 3em;
+ width: 4ch;
}
div.key {
@@ -124,8 +170,8 @@ div.key.num {
div#settings-bar {
grid-area: settings-bar;
- background-color: #333;
- font-size: 2vh;
+ background-color: #222;
+ font-size: clamp(1.5vh, 2vw, 2vh);
margin: 2px;
padding: 0.4rem;
@@ -145,7 +191,7 @@ div#settings-bar div.input.first {
}
div#settings-bar div.input {
- background-color: #282828;
+ background-color: #333;
display: flex;
flex-wrap: wrap;
@@ -159,7 +205,7 @@ div#settings-bar span {
div#settings-bar input {
color: #ddd;
- background-color: #304;
+ background-color: #3d2466;
font-family: inherit;
font-size: 1em;
text-align: right;
@@ -170,68 +216,62 @@ div#settings-bar input {
}
div#settings-bar div.help-button {
- background-color: #304;
- font-weight: bold;
+ background-color: #3d2466;
+ font-weight: 700;
padding: 0 0.4em;
}
@media (hover: hover) and (pointer: fine) {
div#settings-bar input:hover {
- background-color: #608;
+ background-color: #5c3699;
}
div#settings-bar div.help-button:hover {
- background-color: #608;
+ background-color: #5c3699;
}
}
-div#settings-bar input#stdev:focus {
+div#settings-bar input:focus {
color: #fff;
- background-color: #80a;
+ background-color: #6e41b8;
+ outline: #5a0 solid 3px;
}
div#settings-bar div.help-button:active {
color: #fff;
- background-color: #80a;
-}
-
-div#settings-bar input#stdev:focus {
- outline: #5a0 solid 3px;
+ background-color: #6e41b8;
}
div#match {
grid-area: match;
- background-color: #333;
- font-size: 2vh;
+ background-color: #222;
+ font-size: clamp(1.5vh, 2vw, 2vh);
- overflow-y: scroll;
+ overflow: auto;
+ scrollbar-gutter: stable both-edges;
margin: 2px;
padding: 0.4rem;
display: grid;
- grid-template-columns: repeat(6, max-content);
+ grid-template-columns: 1.5ch repeat(5, 2fr) 1.5ch;
grid-auto-rows: min-content;
grid-row-gap: 0.3em;
- grid-column-gap: 1.5em;
}
div#match div {
- font-size: 1.5em;
- font-family: monospace;
- white-space: pre;
+ font-size: 2em;
- min-width: 3ch;
+ min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
-div#match .user-name { color: #aaa; background-color: #444; grid-column: 2 / span 2; justify-content: center; }
-div#match .boat-name { color: #aaa; background-color: #444; grid-column: 4 / span 2; justify-content: center; }
-div#match .visit-no { color: #888; grid-column: 1; }
+div#match .visit-col1 { grid-column: 2; }
+div#match .visit-col3 { color: #888; grid-column: 4; }
div#match .p0 { color: #f00; font-weight: bold; }
div#match .p1 { color: #f00; }
div#match .p20 { color: #f60; }
@@ -240,7 +280,7 @@ div#match .p60 { color: #dd0; }
div#match .p100 { color: #2c2; }
div#match .p140 { color: #0f0; }
div#match .p180 { color: #0f0; font-weight: bold; }
-div#match .darts { color: #888; justify-content: left; }
+div#match .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; }
.modal {
background-color: rgba(0, 0, 0, 0.6);
@@ -256,7 +296,7 @@ div#match .darts { color: #888; justify-content: left; }
}
.modal-content {
- background-color: #333;
+ background-color: #222;
font-size: 1.4em;
font-family: 'Source Serif Pro', serif;
@@ -290,24 +330,7 @@ a:hover {
color: #7d0;
}
-@media (max-aspect-ratio: 1/1) {
- div#main {
- grid-template-columns: 1fr;
- grid-template-rows: min-content 1fr 3fr;
- grid-template-areas: "settings-bar" "match" "keypad";
- }
-
- div#keypad, div#match, div#settings-bar {
- font-size: clamp(1.5vh, 2vw, 2vh);
- }
-
- div#keypad {
- width: auto;
- }
-}
-
-/*
-@media (max-aspect-ratio: 3/5) {
+@media (max-aspect-ratio: 9/20) {
div#settings-bar div.input {
display: flex;
flex-direction: column;
@@ -321,4 +344,3 @@ a:hover {
font-size: 3em;
}
}
-*/
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 19:36:16 +0000