diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/static/style.css | 83 |
1 files changed, 38 insertions, 45 deletions
diff --git a/web/static/style.css b/web/static/style.css index eee09b2..e1e79d3 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -5,7 +5,7 @@ body { color-scheme: dark; color: #eee; - background-color: #111; + background-color: #000; font-family: 'Lato', sans-serif; user-select: none; @@ -17,13 +17,18 @@ div#main { background-color: #1a1a1a; height: 100vh; - width: min(80vh, 100vw); + width: 100vw; margin: 0 auto; display: grid; - grid-template-columns: 1fr; - grid-template-rows: min-content min-content minmax(0, 2fr) minmax(0, 3fr); - grid-template-areas: 'settings-bar' 'info' 'visits' 'controls'; + grid-template-columns: 80vh 1fr; + grid-template-rows: min-content min-content minmax(0, 3fr); + grid-template-areas: 'settings-bar settings-bar' 'info visits' 'controls visits'; +} + +div#main.right-controls { + grid-template-columns: 1fr 80vh; + grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls'; } div#controls { @@ -31,8 +36,6 @@ div#controls { font-size: clamp(1.5vh, 2.5vw, 2vh); - margin: 2px 0 0 0; - display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(5em, auto); @@ -314,10 +317,6 @@ div#settings-bar div.button { padding: 0 0.4em; } -#flip-controls-button { - display: none; -} - @media (hover: hover) and (pointer: fine) { div#settings-bar input:hover { background-color: #5c3699; @@ -342,6 +341,7 @@ div#settings-bar div.button:active { div#visits { grid-area: visits; + background-color: #111; font-size: clamp(1.5vh, 2.5vw, 2vh); overflow: auto; @@ -349,7 +349,7 @@ div#visits { padding: 0.4rem; display: grid; - grid-template-columns: 2ch 1fr repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) 1fr 2ch; + grid-template-columns: repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) min-content; grid-auto-rows: min-content; grid-row-gap: 0.3em; } @@ -364,10 +364,10 @@ div#visits div { justify-content: center; } -div#visits .visit-col1 { grid-column: 3; } -div#visits .visit-col2 { grid-column: 4; } -div#visits .visit-col3 { color: #666; grid-column: 5; } -div#visits .visit-col6 { color: #666; grid-column: 9; } +div#visits .visit-col1 { grid-column: 1; } +div#visits .visit-col2 { grid-column: 2; } +div#visits .visit-col3 { color: #555; grid-column: 3; } +div#visits .visit-col6 { color: #555; grid-column: 6; } div#visits .p0 { color: #e00018; } div#visits .p20 { color: #e06000; } div#visits .p40 { color: #e09800; } @@ -376,8 +376,14 @@ div#visits .p100 { color: #78c018; } div#visits .p140 { color: #20e018; } div#visits .p180 { color: #20e018; font-weight: bold; } div#visits .visit-col6 { color: #666; justify-content: left; white-space: nowrap; } -div#visits .visit-col6:not(:empty):before { content: '…\2003'; } -div#visits .visit-name1, div#visits .visit-name2 { display: none; } +div#visits .visit-col6:not(:empty):before { content: '\2003'; } +div#visits .visit-name1 { grid-column: 1 / span 2; } +div#visits .visit-name2 { grid-column: 4 / span 2; } +div#visits .visit-name1, div#visits .visit-name2 { + color: #555; + border-bottom: 2px solid #555; + display: flex; +} .modal { background-color: #000a; @@ -443,42 +449,29 @@ a:hover { } } -@media (min-aspect-ratio: 1.6) { +@media (max-aspect-ratio: 1.6) { div#main { - width: 100vw; - - grid-template-columns: 80vh 1fr; - grid-template-rows: min-content min-content minmax(0, 3fr); - grid-template-areas: 'settings-bar settings-bar' 'info visits' 'controls visits'; - } - - div#main.right-controls { - grid-template-columns: 1fr 80vh; - grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls'; + width: min(80vh, 100vw); + grid-template-columns: 1fr; + grid-template-rows: min-content min-content minmax(0, 2fr) minmax(0, 3fr); + grid-template-areas: 'settings-bar' 'info' 'visits' 'controls'; } #flip-controls-button { - display: unset; + display: none; } div#controls { - margin-top: 0; + margin-top: 2px; } div#visits { - background-color: #111; - grid-template-columns: repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) min-content; - } - div#visits .visit-col1 { grid-column: 1; } - div#visits .visit-col2 { grid-column: 2; } - div#visits .visit-col3 { color: #555; grid-column: 3; } - div#visits .visit-col6 { color: #555; justify-content: center; grid-column: 6; } - div#visits .visit-col6:not(:empty):before { content: '\2003'; } - div#visits .visit-name1 { grid-column: 1 / span 2; } - div#visits .visit-name2 { grid-column: 4 / span 2; } - div#visits .visit-name1, div#visits .visit-name2 { - color: #555; - border-bottom: 2px solid #555; - display: flex; + grid-template-columns: 2ch 1fr repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) 1fr 2ch; } + div#visits .visit-col1 { grid-column: 3; } + div#visits .visit-col2 { grid-column: 4; } + div#visits .visit-col3 { grid-column: 5; } + div#visits .visit-col6 { grid-column: 9; justify-content: left; } + div#visits .visit-col6:not(:empty):before { content: '…\2003'; } + div#visits .visit-name1, div#visits .visit-name2 { display: none; } } |