From 05dd0652a768ac05740d1465d30e1792b874414f Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Wed, 20 Apr 2022 11:00:24 -0700 Subject: add web interface using Wasm --- web/static/style.css | 305 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 305 insertions(+) create mode 100644 web/static/style.css (limited to 'web/static/style.css') diff --git a/web/static/style.css b/web/static/style.css new file mode 100644 index 0000000..f22e29c --- /dev/null +++ b/web/static/style.css @@ -0,0 +1,305 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap'); + +body { + color: #ddd; + background-color: #1a1a1a; + font-family: 'Lato', sans-serif; + user-select: none; + + margin: 0; + padding: 0; +} + +div#main { + height: calc(100vh - 2*2px); + width: calc(100vw - 2*2px); + margin: 2px; + + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: min-content 1fr; + grid-template-areas: "keypad settings-bar" "keypad match"; +} + +div#keypad { + grid-area: keypad; + + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: min-content 2fr; + grid-auto-rows: 1fr; +} + +div#oi { + font-size: 4vh; + + display: flex; + align-items: center; + justify-content: center; +} + +div#user-rem, div#boat-rem { + background-color: #333; + font-size: 3vh; + + margin: 2px; + padding: 0.25em; + + display: flex; + align-items: center; + justify-content: left; +} + +div#boat-rem { + grid-column: 3; + + justify-content: right; +} + +div#user-rem.active, div#boat-rem.active { + background-color: #240; +} + +div#prompt-container { + grid-column: 1 / span 3; + + background-color: #333; + + margin: 2px; + + display: grid; + grid-template-rows: 1fr 3fr 1fr; + grid-template-columns: 1fr; +} + +div#prompt-msg, div#prompt, div#prompt-sugg { + font-size: 3vh; + + display: grid; + align-items: center; + justify-content: center; +} + +div#prompt { + font-size: 10vh; +} + +div#prompt-sugg { + color: #aaa; +} + +div.key { + color: #aaa; + background-color: #282828; + font-size: 3vh; + + margin: 2px; + + display: flex; + align-items: center; + justify-content: center; +} + +@media (hover: hover) and (pointer: fine) { + div.key:hover { + background-color: #240; + } +} + +div.key:active { + color: #fff; + background-color: #360; +} + +div.key.num { + font-size: 5vh; + font-weight: 700; +} + +div#settings-bar { + grid-area: settings-bar; + + background-color: #333; + font-size: 3vh; + + margin: 2px; + padding: 0.25em; + + display: flex; + align-items: center; + justify-content: left; + gap: 0.25em; +} + +div#settings-bar div.input.first { + margin-left: auto; +} + +div#settings-bar div.input { + background-color: #282828; + + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} + +div#settings-bar span { + padding: 0 0.25em; +} + +div#settings-bar input { + color: #ddd; + background-color: #304; + font-family: inherit; + font-size: 3vh; + text-align: right; + + width: 4ch; + padding: 0 0.25em; + border: 0; +} + +div#settings-bar div.help-button { + background-color: #304; + font-weight: bold; + + padding: 0 0.5em; +} + +@media (hover: hover) and (pointer: fine) { + div#settings-bar input:hover { + background-color: #608; + } + + div#settings-bar div.help-button:hover { + background-color: #608; + } +} + +div#settings-bar input#stdev:focus { + color: #fff; + background-color: #80a; +} + +div#settings-bar div.help-button:active { + color: #fff; + background-color: #80a; +} + +div#settings-bar input#stdev:focus { + outline: #5a0 solid 3px; +} + +div#match { + grid-area: match; + + background-color: #333; + font-size: 3vh; + + overflow-y: scroll; + margin: 2px; + padding: 0.25em; + + display: grid; + grid-template-columns: repeat(6, max-content); + grid-auto-rows: min-content; + grid-row-gap: 0.2em; + grid-column-gap: 1em; +} + +div#match div { + font-family: monospace; + white-space: pre; + + min-width: 3ch; + + 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 .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 .darts { color: #888; justify-content: left; } + +.modal { + background-color: rgba(0, 0, 0, 0.6); + + width: 100%; + height: 100%; + + display: none; + position: fixed; + top: 0; + left: 0; + z-index: 1; +} + +.modal-content { + background-color: #333; + font-size: 1.4em; + font-family: 'Source Serif Pro', serif; + + width: calc(min(40em, 90vw) - 4em); + max-height: calc(calc(100vh - 10vw) - 4em); + margin: 5vw auto; + padding: 2em; + outline: #5a0 solid 3px; + overflow: scroll; +} + +@media (max-width: 400px) { + .modal-content { + font-size: 1em; + } +} + +.modal-content p { + margin: 0; +} + +.modal-content p + p { + margin-top: 1em; +} + +a { + color: #5a0; +} + +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"; + } +} + +@media (max-aspect-ratio: 3/5) { + div#settings-bar div.input { + display: flex; + flex-direction: column; + } + + div#settings-bar span { + padding: 0 0.25em; + } + + div#settings-bar .help-button { + font-size: 6vh; + } +} -- cgit v1.2.3-70-g09d2