From 71b2f13214405ec43cb1d4e55d32bd7786758e16 Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Sat, 23 Apr 2022 03:11:48 -0700 Subject: misc web ui cleanup --- web/static/style.css | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) (limited to 'web/static/style.css') diff --git a/web/static/style.css b/web/static/style.css index fe686a2..70a0c70 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -22,7 +22,7 @@ div#main { display: grid; grid-template-columns: 1fr; grid-template-rows: min-content min-content 2fr 2fr; - grid-template-areas: "settings-bar" "rem-bar" "match" "keypad"; + grid-template-areas: "settings-bar" "rem-bar" "visits" "keypad"; } div#keypad { @@ -66,7 +66,7 @@ div#rem-bar { grid-template-columns: repeat(2, 1fr); } -div#p1-state, div#p2-state { +div#p1-info, div#p2-info { background-color: #222; font-size: 1.5em; @@ -78,7 +78,7 @@ div#p1-state, div#p2-state { align-items: center; } -div#p1-state.active, div#p2-state.active { +div#p1-info.active, div#p2-info.active { background-color: #2a390a; } @@ -122,24 +122,24 @@ div#prompt-container { justify-content: center; } -div#prompt-msg, div#prompt, div#prompt-sugg { +div#prompt-msg-l, div#prompt-input, div#prompt-msg-r { font-size: 1.5em; display: grid; align-items: center; } -div#prompt-msg, div#prompt-sugg { +div#prompt-msg-l, div#prompt-msg-r { flex: 1; color: #aaa; padding: 0 0.4rem; } -div#prompt-sugg { +div#prompt-msg-r { text-align: right; } -div#prompt { +div#prompt-input { text-align: center; font-size: 3em; width: 4ch; @@ -249,8 +249,8 @@ div#settings-bar div.help-button:active { background-color: #6e41b8; } -div#match { - grid-area: match; +div#visits { + grid-area: visits; background-color: #222; font-size: clamp(1.5vh, 2vw, 2vh); @@ -266,7 +266,7 @@ div#match { grid-row-gap: 0.3em; } -div#match div { +div#visits div { font-size: 2em; min-width: 0; @@ -276,17 +276,17 @@ div#match div { justify-content: center; } -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; } -div#match .p40 { color: #fa0; } -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 .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; } +div#visits .visit-col1 { grid-column: 2; } +div#visits .visit-col3 { color: #888; grid-column: 4; } +div#visits .p0 { color: #f00; font-weight: bold; } +div#visits .p1 { color: #f00; } +div#visits .p20 { color: #f60; } +div#visits .p40 { color: #fa0; } +div#visits .p60 { color: #dd0; } +div#visits .p100 { color: #2c2; } +div#visits .p140 { color: #0f0; } +div#visits .p180 { color: #0f0; font-weight: bold; } +div#visits .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; } .modal { background-color: rgba(0, 0, 0, 0.6); -- cgit v1.2.3-70-g09d2