From bdd0ffc129225656552c58ef7051392ae2b3568a Mon Sep 17 00:00:00 2001 From: s-ol Date: Sun, 10 Nov 2019 02:08:32 +0100 Subject: movable slices --- src/template.html | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 61 insertions(+), 6 deletions(-) (limited to 'src/template.html') diff --git a/src/template.html b/src/template.html index f071025..401c9da 100644 --- a/src/template.html +++ b/src/template.html @@ -14,29 +14,84 @@ width: 100vw; height: 100vh; + overflow: hidden; + flex-direction: column; + + background: #212121; + color: #696969; + font-family: sans-serif; } header { display: flex; + min-height: 7em; justify-content: space-between; + flex-wrap: wrap; - height: 150px; flex: 0 0 auto; } + header > div { + display: flex; + + flex-direction: column; + margin: 0.5em 1em; + } + + header > div > span { + font-size: 2em; + } + + button { + margin: 0.2em 0; + flex: 1; + + border: 2px solid #696969; + color: #696969; + background: none; + + transition: background 300ms, color 300ms; + } + + button:hover { + background: #696969; + color: #212121; + } + + key { + font-size: 0.8rem; + line-height: 0.8rem; + padding: 0.2rem; + font-family: monospace; + + background: #696969; + color: #212121; + } + + div { + padding: 0 0.5em 0.5em; + } + #main { flex: 1 1 0; + width: auto !important; + height: auto !important; } -

+ +

+ hotkeys — + 1-5 track fingers — + shift rotate slice — + alt scale slice — + S export data — + L import data — + R reset +

-- cgit v1.2.3