diff options
author | Christian Grothoff <christian@grothoff.org> | 2020-10-12 14:20:31 +0200 |
---|---|---|
committer | Christian Grothoff <christian@grothoff.org> | 2020-10-12 14:20:31 +0200 |
commit | eaefc57f2ea5434ad6b7f1c11ee4daa0fc92c76c (patch) | |
tree | c7b9ed3351fc16272225553d4e0911108bc8a722 | |
parent | 0968eb3d4023a8a0a37f7069f162eb786a6e04d2 (diff) | |
download | web-common-eaefc57f2ea5434ad6b7f1c11ee4daa0fc92c76c.tar.gz web-common-eaefc57f2ea5434ad6b7f1c11ee4daa0fc92c76c.tar.bz2 web-common-eaefc57f2ea5434ad6b7f1c11ee4daa0fc92c76c.zip |
update web-common
-rw-r--r-- | demo.css | 41 | ||||
-rw-r--r-- | navbar.css | 75 | ||||
-rw-r--r-- | tsconfig.json | 1 |
3 files changed, 107 insertions, 10 deletions
@@ -1,25 +1,30 @@ +@charset "UTF-8"; /* style common to all demo pages */ - .demobar h1 { text-align: center; } + .demobar > p { - padding: 0.5em; + padding: 0.5em; } + .demobar a, .demobar a:visited { color: inherit; } + .adorn-brackets::before { content: "❬"; color: #aa3939; } + .adorn-brackets::after { content: "❭"; color: #aa3939; } + .tt { - font-family: 'Lucida Console', Monaco, monospace; + font-family: "Lucida Console", Monaco, monospace; } .informational-ok { @@ -37,6 +42,7 @@ .content { overflow-x: auto; } + .demobar { overflow-x: auto; background-color: #033; @@ -44,26 +50,41 @@ } body { - overflow-y: scroll; + overflow-x: hidden; + overflow-y: auto; +} + +body * { + /* margin-left: 0.5vw; */ + left: 0.1vw; } @media (min-width: 500px) { .content { - margin-left: 25%; + /* margin-left: 0vw; */ padding-left: 2em; margin-right: 1em; - overflow-x: auto; + overflow-x: hidden; + overflow-y: auto; } + .demobar { - height: 100%; + /* height: 100%; */ + /* width: 25%; */ + /* NOTE: Please use "vh"/"vw" instead of "%" when possible, in the future. */ + height: min-content; + width: 100vw; margin: 0; top: 0; left: 0; background-color: #033; color: white; - position: fixed; - width: 25%; + position: relative; padding-right: 1em; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; + text-align: center; } } + +/*# sourceMappingURL=demo.css.map */ diff --git a/navbar.css b/navbar.css new file mode 100644 index 0000000..aabacc3 --- /dev/null +++ b/navbar.css @@ -0,0 +1,75 @@ +/** + * @author Torsten Grothoff + * @name navbar.css + * @description Makes the navigation bar have styles + * @license LGPL-3.0-or-later + */ +.navcontainer { + overflow: hidden; + background: #144; + margin-bottom: 50px; + width: 100%; + color: white; + position: -webkit-sticky; + position: sticky; + top: 0px; + width: 100vw; + backdrop-filter: blur(10px); + opacity: 1; + z-index: 10000; +} + +nav { + left: 1vw; + position: relative; + background: #144; + z-index: 10000; +} + +nav a, nav span, .navbtn { + border: none; + color: white; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + background: #00000000; + height: inherit; +} + +nav a, nav span, .navbtn { + padding: 15px 32px; +} + +nav a:hover, nav span:hover, .navbtn:hover { + background: #00000022; +} + +nav a.active, nav span.active, .navbtn.active { + background-color: #4CAF50; +} + +nav a.active:hover, nav span.active:hover, .navbtn.active:hover { + background: #377c39; +} + +nav a, nav span, .navbtn { + cursor: pointer; +} + +nav .right { + float: right; + margin-right: 5vw; +} +nav .right div.nav { + display: none; +} +nav .right div.nav:hover { + display: block; +} + +nav .right:hover div.nav { + display: block; +} + +/*# sourceMappingURL=navbar.css.map */ diff --git a/tsconfig.json b/tsconfig.json index 8b7e894..1a14563 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,6 +10,7 @@ "lib": ["ES6", "DOM"] }, "files": [ + "taler-wallet-lib.ts", "chrome-any.d.ts" ] } |