diff options
author | Wojtek Kosior <koszko@koszko.org> | 2022-01-08 14:47:39 +0100 |
---|---|---|
committer | Wojtek Kosior <koszko@koszko.org> | 2022-01-08 14:48:12 +0100 |
commit | 448820a11634de6ec356c77b8c7c0cf4937b344c (patch) | |
tree | 06147c3d40475ba863ccea9904ba4cdfe1d66db0 /html/base.css | |
parent | 372d24ea3a52e376f953deeffeb7847d008b81c9 (diff) | |
download | browser-extension-448820a11634de6ec356c77b8c7c0cf4937b344c.tar.gz browser-extension-448820a11634de6ec356c77b8c7c0cf4937b344c.zip |
work on UI components
This commit introduces some HTML and javascript (and tests for it) to use in constructing the new UI. This is partial work that is not yet finished.
Diffstat (limited to 'html/base.css')
-rw-r--r-- | html/base.css | 82 |
1 files changed, 16 insertions, 66 deletions
diff --git a/html/base.css b/html/base.css index dde50e7..6085f5f 100644 --- a/html/base.css +++ b/html/base.css @@ -34,101 +34,51 @@ body { overflow: auto; } -.bold, h2 { +.bold, h1, h2, h3 { font-weight: bold; } +h1, h2, h3 { + margin: 0.3em; + text-shadow: 0 0 0 #454; +} + h2 { - margin: 8px; font-size: 120%; } h3 { - padding: 5px; font-size: 108%; - text-shadow: 0 0 0 #454; } -textarea { - font-family: monospace; +li { + margin-top: 0.25em; + margin-bottom: 0.25em; } -input[type="checkbox"], input[type="radio"], .hide { - display: none; -} - -.camouflage { - visibility: hidden; +li:first-child { + margin-top: 0; } -.show_next:not(:checked)+* { +.hide { display: none; } -.show_hide_next2:not(:checked)+* { - display: none; -} - -.show_hide_next2:checked+*+* { - display: none; -} - -button, .button { +button { background-color: #4CAF50; border: none; - border-radius: 8px; + border-radius: 0.4em; color: white; text-align: center; text-decoration: none; display: inline-block; - padding: 6px 12px; - margin: 2px 0px; + padding: 0.4em 0.8em; -moz-user-select: none; user-select: none; cursor: pointer; - font: 400 15px sans-serif; -} - -button.slimbutton, .button.slimbutton { - padding: 2px 4px; - margin: 0; + font: 400 0.9em sans-serif; } button:hover, .button:hover { box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } - -aside { - background: #3f8dc6; - margin: 5px 0; - padding: 0.3em 1em; - border-radius: 3px; - color: #fff; -} - -textarea: { - resize: none; -} - -.has_bottom_line::after, .has_upper_line::before { - content: ""; - display: block; - height: 8px; - background: linear-gradient(transparent, #555); -} - -.has_bottom_line::after { - background: linear-gradient(#555, transparent); -} - -.has_bottom_thin_line { - border-bottom: dashed #4CAF50 1px; -} - -.has_upper_thin_line { - border-top: dashed #4CAF50 1px; -} - -.nowrap { - white-space: nowrap; -} |