From 9e3eb9992f3cb2b7b3364adaee014ce68501cffd Mon Sep 17 00:00:00 2001 From: rainydaysavings Date: Thu, 27 Aug 2020 03:26:46 +0100 Subject: [PATCH] [UI] Posting form styling work --- public/assets/css/network/public.css | 53 +++++++++++++----- public/assets/css/network/public_mid.css | 63 +++++++++++++++------- public/assets/css/network/public_small.css | 63 +++++++++++++++------- 3 files changed, 127 insertions(+), 52 deletions(-) diff --git a/public/assets/css/network/public.css b/public/assets/css/network/public.css index e861ea2aac..32782b96aa 100644 --- a/public/assets/css/network/public.css +++ b/public/assets/css/network/public.css @@ -141,9 +141,10 @@ border-radius: var(--small-size); border: solid 2px var(--accent-low); background-color: var(--bg3); - padding: 2%; + padding: 1%; } +/* scope options */ .scope { order: 1; width: 100%; @@ -152,31 +153,55 @@ color: var(--fg); font-size: var(--medium-size); } +.scope div { + display: inline; + vertical-align: middle; + flex: 1; + color: var(--fg); + border-radius: var(--small-size); + background-color: var(--bg2); + padding: 1%; +} .scope .required { order: 1; - width: 100%; - flex-grow: 1; - flex-shrink: 0; font-weight: 800; - margin: 0; - padding: 0; } .scope #form_scope { order: 2; - width: 100%; flex-grow: 1; - flex-shrink: 0; - color: var(--fg); - border: none; - vertical-align: center; - overflow-x: hidden; + flex-shrink: 1; } .scope #form_scope label { margin-right: var(--small-size); margin-left: 0.2em; } -.notice-input { +/* input box */ +.content-input { order: 2; - width: 80%; + flex-grow: 1; + flex-shrink: 0; } +#form_content { + background-color: var(--bg2); + padding: 1%; + color: var(--fg); + font-size: var(--unit-size); + border-radius: var(--small-size); + margin-top: 0.2em; + width: 100%; + box-sizing: border-box; + height: calc(8 * var(--unit-size)); +} + +/* options */ +.notice-options { + order: 3; + display: inline-flex; + justify-content: flex-start; + width: 100%; + box-sizing: border-box; +} +.send { + margin-left: auto; +} \ No newline at end of file diff --git a/public/assets/css/network/public_mid.css b/public/assets/css/network/public_mid.css index c5526e32c2..6fb65d7e32 100644 --- a/public/assets/css/network/public_mid.css +++ b/public/assets/css/network/public_mid.css @@ -135,45 +135,70 @@ flex: max-content; margin-left: 4%; margin-right: 4%; + border-radius: var(--small-size); + border: solid 2px var(--accent-low); + background-color: var(--bg3); + padding: 1%; } +/* scope options */ .scope { order: 1; - width: 20%; + width: 100%; display: flex; flex-wrap: wrap; color: var(--fg); font-size: var(--medium-size); +} +.scope div { + display: inline; + vertical-align: middle; + flex: 1; + color: var(--fg); border-radius: var(--small-size); - background-color: var(--bg3); - padding: 2%; + background-color: var(--bg2); + padding: 1%; } .scope .required { order: 1; - width: 100%; - flex-grow: 1; - flex-shrink: 0; font-weight: 800; - margin: 0; - padding: 0; } .scope #form_scope { order: 2; - width: 100%; flex-grow: 1; - flex-shrink: 0; - border-radius: var(--small-size); - background-color: var(--bg3); - box-shadow: var(--shadow); - color: var(--fg); - border: none; + flex-shrink: 1; } .scope #form_scope label { - width: 100%; - + margin-right: var(--small-size); + margin-left: 0.2em; } -.notice-input { +/* input box */ +.content-input { order: 2; - width: 80%; + flex-grow: 1; + flex-shrink: 0; } +#form_content { + background-color: var(--bg2); + padding: 1%; + color: var(--fg); + font-size: var(--unit-size); + border-radius: var(--small-size); + margin-top: 0.2em; + width: 100%; + box-sizing: border-box; + height: calc(8 * var(--unit-size)); +} + +/* options */ +.notice-options { + order: 3; + display: inline-flex; + justify-content: flex-start; + width: 100%; + box-sizing: border-box; +} +.send { + margin-left: auto; +} \ No newline at end of file diff --git a/public/assets/css/network/public_small.css b/public/assets/css/network/public_small.css index 070b56f579..72a6d9b61f 100644 --- a/public/assets/css/network/public_small.css +++ b/public/assets/css/network/public_small.css @@ -135,45 +135,70 @@ flex: max-content; margin-left: 4%; margin-right: 4%; + border-radius: var(--small-size); + border: solid 2px var(--accent-low); + background-color: var(--bg3); + padding: 1%; } +/* scope options */ .scope { order: 1; - width: 20%; + width: 100%; display: flex; flex-wrap: wrap; color: var(--fg); font-size: var(--medium-size); +} +.scope div { + display: inline; + vertical-align: middle; + flex: 1; + color: var(--fg); border-radius: var(--small-size); - background-color: var(--bg3); - padding: 2%; + background-color: var(--bg2); + padding: 1%; } .scope .required { order: 1; - width: 100%; - flex-grow: 1; - flex-shrink: 0; font-weight: 800; - margin: 0; - padding: 0; } .scope #form_scope { order: 2; - width: 100%; flex-grow: 1; - flex-shrink: 0; - border-radius: var(--small-size); - background-color: var(--bg3); - box-shadow: var(--shadow); - color: var(--fg); - border: none; + flex-shrink: 1; } .scope #form_scope label { - width: 100%; - + margin-right: var(--small-size); + margin-left: 0.2em; } -.notice-input { +/* input box */ +.content-input { order: 2; - width: 80%; + flex-grow: 1; + flex-shrink: 0; } +#form_content { + background-color: var(--bg2); + padding: 1%; + color: var(--fg); + font-size: var(--unit-size); + border-radius: var(--small-size); + margin-top: 0.2em; + width: 100%; + box-sizing: border-box; + height: calc(8 * var(--unit-size)); +} + +/* options */ +.notice-options { + order: 3; + display: inline-flex; + justify-content: flex-start; + width: 100%; + box-sizing: border-box; +} +.send { + margin-left: auto; +} \ No newline at end of file