diff options
author | shivam kohli <kohlishivam5522@gmail.com> | 2018-08-01 04:51:02 +0530 |
---|---|---|
committer | shivam kohli <kohlishivam5522@gmail.com> | 2018-08-01 04:51:02 +0530 |
commit | 4cd509378bd1d823f851f64e0b7d3635457c8f13 (patch) | |
tree | 898fcd9bfee582c552b5e97b99ae1dec96faf8c3 /static | |
parent | cc56d2a73f1a58ccc40062bc95153843195ee055 (diff) | |
download | codeless-4cd509378bd1d823f851f64e0b7d3635457c8f13.tar.gz codeless-4cd509378bd1d823f851f64e0b7d3635457c8f13.tar.bz2 codeless-4cd509378bd1d823f851f64e0b7d3635457c8f13.zip |
Styling changed according to Bank Demo
Diffstat (limited to 'static')
-rw-r--r-- | static/inventory/bank.css | 76 | ||||
-rw-r--r-- | static/inventory/card.css | 59 | ||||
-rw-r--r-- | static/inventory/sidenav.css | 114 | ||||
-rw-r--r-- | static/inventory/table.css | 112 | ||||
-rw-r--r-- | static/inventory/web-common/.gitignore | 6 | ||||
-rw-r--r-- | static/inventory/web-common/demo.css | 69 | ||||
-rw-r--r-- | static/inventory/web-common/taler-fallback.css | 15 |
7 files changed, 451 insertions, 0 deletions
diff --git a/static/inventory/bank.css b/static/inventory/bank.css new file mode 100644 index 0000000..0b195ba --- /dev/null +++ b/static/inventory/bank.css @@ -0,0 +1,76 @@ +h1.nav { + width: 92%; + display: inline-block; +} + +div.pages-list { + margin-top: 15px; +} + +a.page-number { + color: blue; +} + +a.current-page-number { + color: inherit; +} + +a.pure-button { + position: absolute; + right: 20px; + top: 23px; +} + +.cancelled { + text-decoration: line-through; +} + +input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type="number"] { + -moz-appearance: textfield; +} + +#transfer-fields { + display: flex; + flex-wrap: wrap; +} + +#id_amount { + width: 6em; + display: inline-block; + border-radius: 4px 0px 0px 4px; +} + +/** + * Amount without the currency, + * placed left to a .currency-indicator. + */ +#main .amount { + width: 6em; + display: inline-block; + border-radius: 4px 0px 0px 4px; +} + +/* + * Currency indicator to the right of input fields, + * with non-rounded corners to the left. + */ +#main .currency-indicator { + color: black; + display: inline-block; + border-radius: 0px 4px 4px 0px; +} + +#main .fieldlabel { + display: block; + padding-bottom: 0.5em; +} + +#main .fieldbox { + margin-right: 1em; + margin-bottom: 0.5em; +} diff --git a/static/inventory/card.css b/static/inventory/card.css new file mode 100644 index 0000000..ca0c299 --- /dev/null +++ b/static/inventory/card.css @@ -0,0 +1,59 @@ +.btn { + background-color: white; + border: 1px solid #cccccc; + color: #696969; + padding: 0.5rem; + text-transform: lowercase; +} +.btnblock { + display: block; + width: 100%; +} +.cards { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; +} +.cards__item { + /*display: flex;*/ + padding: 1rem; +} +@media (min-width: 40rem) { + .cards__item { + width: 50%; + } +} +@media (min-width: 56rem) { + .cards__item { + width: 33.3333%; + } +} +.card { + background-color: white; + border-radius: 0.25rem; + box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25); + display: flex; + flex-direction: column; + overflow: hidden; +} +.card__content { + display: flex; + flex: 1 1 auto; + flex-direction: column; + padding: 1rem; +} +.card__title { + color: #696969; + font-size: 1.25rem; + font-weight: 300; + letter-spacing: 2px; + text-transform: uppercase; +} +.card__text { + flex: 1 1 auto; + font-size: 0.875rem; + line-height: 1.5; + margin-bottom: 1.25rem; +}
\ No newline at end of file diff --git a/static/inventory/sidenav.css b/static/inventory/sidenav.css new file mode 100644 index 0000000..66d25df --- /dev/null +++ b/static/inventory/sidenav.css @@ -0,0 +1,114 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + background-color: #f0f0f0; +} +body { + /*color: #999999;*/ + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: 400; + letter-spacing: 0; + padding: 1rem; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: "liga" on; +} +#contact {width:100%; height:100%; margin 0 auto; /*background: #DDD;*/ } + +.container {width:900px; height:auto; margin: 0 auto; padding: 50px 0;} + +#contact .container form input, +#contact .container form textarea { + width:97.4%; + height:30px; + padding:5px 10px; + font-size: 12px; + color:#999; + letter-spacing:1px; + background: #FFF; + border:2px solid #FFF; + margin-bottom:25px;} + +#contact .container form input:focus, +#contact .container form textarea:focus { + border:2px solid #dd4545; + color:#999;} + +#contact .container form textarea { + height:150px;} + +#contact .container form .submit { + width:97%; + padding:5px 10px; + font-size: 12px; + letter-spacing:1px; + background:#dd4545; + height:40px; + text-transform:uppercase; + letter-spacing:1px; + color:#FFF; + border:2px solid #b43838; + -webkit-transition:all .1s ease-in-out; + -moz-transition:all .1s ease-in-out; + -ms-transition:all .1s ease-in-out; + -o-transition:all .1s ease-in-out; + transition:all .1s ease-in-out;} + +#contact .container form .submit:hover { + color:#FFF; + border:2px solid #dd4545; + background: #b43838; + cursor:pointer;} + +#contact .container form .required { + color:#b43838;} + +ul { + color:red; + font-size:20px; + list-style-type: none; + margin: 0; + padding: 0;} + +.tooltip { + position: relative; + display: inline-block; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 300px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -60px; + opacity: 0; + transition: opacity 0.3s; +} + +.tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; + }
\ No newline at end of file diff --git a/static/inventory/table.css b/static/inventory/table.css new file mode 100644 index 0000000..aae793d --- /dev/null +++ b/static/inventory/table.css @@ -0,0 +1,112 @@ +.table-fill { + background: white; + border-radius:3px; + border-collapse: collapse; + height: 320px; + margin: auto; + max-width: 600px; + padding:5px; + width: 100%; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); + animation: float 5s infinite; +} + +th { + color:#D5DDE5;; + background:#1b1e24; + border-bottom:4px solid #9ea7af; + border-right: 1px solid #343a45; + font-size:23px; + font-weight: 100; + padding:24px; + text-align:left; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + vertical-align:middle; +} + +th:first-child { + border-top-left-radius:3px; +} + +th:last-child { + border-top-right-radius:3px; + border-right:none; +} + +tr { + border-top: 1px solid #C1C3D1; + border-bottom-: 1px solid #C1C3D1; + color:#45485a; + font-size:16px; + font-weight:normal; + text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); +} + +tr:hover td { + background:#4E5066; + color:#FFFFFF; + border-top: 1px solid #22262e; +} + +tr:first-child { + border-top:none; +} + +tr:last-child { + border-bottom:none; +} + +tr:nth-child(odd) td { + background:#EBEBEB; +} + +tr:nth-child(odd):hover td { + background:#4E5066; +} + +tr:last-child td:first-child { + border-bottom-left-radius:3px; +} + +tr:last-child td:last-child { + border-bottom-right-radius:3px; +} + +td { + background:#FFFFFF; + padding:20px; + text-align:left; + vertical-align:middle; + font-weight:300; + font-size:18px; + text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); + border-right: 1px solid #C1C3D1; +} + +td:last-child { + border-right: 0px; +} + +th.text-left { + text-align: left; +} + +th.text-center { + text-align: center; +} + +th.text-right { + text-align: right; +} + +td.text-left { + text-align: left; +} + +td.text-center { + text-align: center; +} + +td.text-right { + text-align: right; +}
\ No newline at end of file diff --git a/static/inventory/web-common/.gitignore b/static/inventory/web-common/.gitignore new file mode 100644 index 0000000..e64e5c1 --- /dev/null +++ b/static/inventory/web-common/.gitignore @@ -0,0 +1,6 @@ +Makefile +Makefile.in +# these should be commited pre-build to the repo, too: +#taler-wallet-lib.js + +.idea diff --git a/static/inventory/web-common/demo.css b/static/inventory/web-common/demo.css new file mode 100644 index 0000000..b2688ad --- /dev/null +++ b/static/inventory/web-common/demo.css @@ -0,0 +1,69 @@ +/* style common to all demo pages */ + +.demobar h1 { + text-align: center; +} +.demobar > p { + 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; +} + +.informational-ok { + background: lightgreen; + border-radius: 1em; + padding: 0.5em; +} + +.informational-fail { + background: lightpink; + border-radius: 1em; + padding: 0.5em; +} + +.content { + overflow-x: auto; +} +.demobar { + overflow-x: auto; + background-color: #033; + color: white; +} + +body { + overflow-y: scroll; +} + +@media (min-width: 500px) { + .content { + margin-left: 25%; + padding-left: 2em; + margin-right: 1em; + overflow-x: auto; + } + .demobar { + height: 100%; + margin: 0; + top: 0; + left: 0; + background-color: #033; + color: white; + position: fixed; + width: 25%; + padding-right: 1em; + overflow: auto; + } +} diff --git a/static/inventory/web-common/taler-fallback.css b/static/inventory/web-common/taler-fallback.css new file mode 100644 index 0000000..e403d71 --- /dev/null +++ b/static/inventory/web-common/taler-fallback.css @@ -0,0 +1,15 @@ +/* Fallback stylesheet. Should be included in the document as follows: + * + * <link rel="stylesheet" + * href="taler-fallback.css" + * id="taler-presence-stylesheet /> + * + * When either the taler-wallet-lib is included or the wallet is presence, + * it will take over this stylesheet for presence detection. + * + * This fallback stylesheet makes sure that classes for presence detection + * are displayed correctly, even if JavaScript is disabled and the wallet + * is not present. + */ + +.taler-installed-show { display: none; } |