From 6b4eac36d6ff46881b26a36556a07280ccd69783 Mon Sep 17 00:00:00 2001 From: jaseg Date: Sat, 30 Mar 2019 04:01:03 +0900 Subject: gerboweb: Initial design revision --- gerboweb/static/style.css | 149 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 124 insertions(+), 25 deletions(-) (limited to 'gerboweb/static/style.css') diff --git a/gerboweb/static/style.css b/gerboweb/static/style.css index 975c7f2..ede89d4 100644 --- a/gerboweb/static/style.css +++ b/gerboweb/static/style.css @@ -35,30 +35,61 @@ --cg5: #4cffa4; --cg6: #b7ffda; --cg7: #e1fff0; + + --cr1: #300900; + --cr2: #611200; + --cr3: #961c00; + --cr4: #d12700; + --cr5: #ff6e4c; + --cr6: #ffc5b7; + --cr7: #ffe7e1; + + --cb1: #001b30; + --cb2: #003761; + --cb3: #005596; + --cb4: #0076d1; + --cb5: #4cb1ff; + --cb6: #b7e0ff; + --cb7: #e1f2ff; + --cb8: #f5fbff; } body { font-family: 'Helvetica', 'Arial', sans-serif; - color: var(--c-metallic4); + color: var(--cb1); display: flex; flex-direction: row; justify-content: center; margin: 0; - background-color: hsl(10 10% 97%); + background-color: var(--cb8); } .layout-container { flex-basis: 55em; flex-shrink: 1; flex-grow: 0; - padding: 3em; + padding: 45px; background-color: white; } +div.header { + background-image: url("/static/bg10.jpg"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + display: flex; + margin-left: -45px; + margin-right: -45px; + margin-bottom: 3em; + padding-left: 3em; + padding-right: 3em; + text-shadow: 1px 1px 1px black; +} + div.flash-success { - background-color: var(--c-green1); - color: hsl(80 20% 20%); - text-shadow: 0 0 2px var(--c-green1); + background-color: var(--cg6); + color: var(--cg1); + text-shadow: 0 0 2px var(--cg7); border-radius: 5px; margin: 1em; padding-left: 3em; @@ -79,6 +110,13 @@ div.flash-success::before { div.desc { margin-top: 5em; margin-bottom: 7em; + + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; + text-align: justify; + + color: white; } div.loading-message { @@ -89,6 +127,7 @@ div.loading-message { .steps { display: flex; flex-direction: column; + counter-reset: step; } .step { @@ -99,6 +138,29 @@ div.loading-message { flex-wrap: wrap; width: 100%; padding-top: 20px; + position: relative; + margin-bottom: 1em; + margin-top: 2em; +} + +.step > .description::before { + counter-increment: step; + content: counter(step); + + font-weight: 700; + font-size: 30px; + text-align: center; + border-radius: 50%; + background-color: var(--cg5); + + display: block; + position: absolute; + top: 15px; + left: 0; + width: 60px; + + line-height: 50px; + padding-top: 10px; } .step > .description { @@ -115,7 +177,9 @@ div.loading-message { .step > .description > h2 { text-align: right; - margin-top: 0 + margin-top: 0; + padding-left: 60px; + height: 60px; } .step > .controls { @@ -124,28 +188,28 @@ div.loading-message { display: flex; flex-direction: column; align-items: stretch; - margin-right: 20px; - margin-left: 20px; + margin-right: 1em; + margin-left: 1em; padding: 1em; - background-color: hsl(210 40% 97%); + background-color: var(--cb8); border-radius: 5px; } input.reset-button { - background-color: var(--c-red1); - color: var(--c-grey1); - text-shadow: 0 0 2px var(--c-red3); + background-color: var(--cr4); + color: white; + text-shadow: 0 0 2px var(--cr1); border: 0; border-radius: 5px; padding: 0.5em 1em 0.5em 1em; } input.submit-button { - background-color: var(--c-green2); - color: hsl(80 20% 20%); - text-shadow: 0 0 2px var(--c-green1); + background-color: var(--cg4); + color: var(--cg1); + text-shadow: 0 0 2px var(--cg7); font-weight: bold; margin-left: 1em; border: 0; @@ -173,8 +237,8 @@ input.submit-button { a.output-download:link, a.output-download:hover, a.output-download:visited, a.output-download:active { font-size: 30pt; font-weight: bold; - color: var(--c-metallic4); - text-shadow: 0.5px 0.5px 0.5px var(--c-metallic2); + color: var(--cb1); + text-shadow: 0.5px 0.5px 0.5px var(--cb6); } .preview-images { @@ -185,21 +249,56 @@ a.output-download:link, a.output-download:hover, a.output-download:visited, a.ou justify-content: space-around; } -.preview { +a.preview:link, a.preview:hover, a.preview:visited, a.preview:active { + text-decoration: none; width: 200px; height: 200px; border-radius: 5px; + margin: 1em; display: flex; justify-content: center; align-items: center; + background-color: var(--cb3); + background-blend-mode: multiply; + background-size: contain; + background-repeat: no-repeat; + background-position: 50% 50%; + box-shadow: 1px 1px 5px 1px #001b304d; } -a.overlay:link, a.overlay:hover, a.overlay:visited, a.overlay:active { +.overlay { text-align: center; - font-size: 30pt; + font-size: 50pt; font-weight: bold; - color: var(--c-metallic4); - text-shadow: 0.5px 0.5px 0.5px var(--c-metallic2); + color: var(--cg4); + mix-blend-mode: screen; +} + +.sample-images { + text-align: center; +} + +.sample-images > h1 { + color: white; + padding-top: 5px; + line-height: 70px; + /* background-image: linear-gradient(to top right, var(--cg5), var(--cg6)); */ + + background-image: url("/static/bg10.jpg"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + + margin-left: -45px; + margin-right: -45px; + margin-top: 3em; + text-shadow: 1px 1px 1px black; +} + +.sample-images > img { + width: 300px; + height: 300px; + margin: 1em; } /* Spinner from https://loading.io/css/ */ @@ -216,10 +315,10 @@ a.overlay:link, a.overlay:hover, a.overlay:visited, a.overlay:active { width: 51px; height: 51px; margin: 6px; - border: 6px solid var(--c-metallic4); + border: 6px solid var(--cb1); border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: var(--c-metallic4) transparent transparent transparent; + border-color: var(--cb1) transparent transparent transparent; } .lds-ring div:nth-child(1) { animation-delay: -0.45s; -- cgit