diff options
Diffstat (limited to 'packages/demobank-ui/src/scss/bank.scss')
-rw-r--r-- | packages/demobank-ui/src/scss/bank.scss | 264 |
1 files changed, 264 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/scss/bank.scss b/packages/demobank-ui/src/scss/bank.scss new file mode 100644 index 000000000..b524cfe29 --- /dev/null +++ b/packages/demobank-ui/src/scss/bank.scss @@ -0,0 +1,264 @@ +.navcontainer:not(.default-navcontainer) { + margin-bottom: 0 !important; +} + +.abort-button { + margin-left: 2px; + border: 2px solid rgb(0, 120, 231); + color: rgb(0, 120, 231); + font-size: 87%; + margin-top: 1px; + background: white; +} + +div.pages-list { + margin-top: 15px; +} + +.login-div, +.register-div { + display: block; + text-align: center; +} + +a.page-number { + color: blue; +} + +a.current-page-number { + color: inherit; + background-color: inherit; +} + +.cancelled { + text-decoration: line-through; +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* This CSS code styles the tab */ +.tab { + overflow: hidden; +} + +.logout { + float: right; + border: 20px; + margin-right: 15px; + margin-top: 15px; +} + +.tab button { + background-color: lightgray; + color: black; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 18px 19px; + border: 2px solid #c1c1c1; + transition: 0.5s; + font-weight: bold; +} + +.tab button:hover { + background-color: yellow; + border: 2px solid #c1c1c1; + color: black; +} + +.tab button.active { + background-color: orange; + border: 2px solid #c1c1c1; + color: black; + font-weight: bold; +} + +.tabcontent { + display: none; + padding: 8px 16px; + border: 2px solid #c1c1c1; + width: max-content; +} + +.tabcontent.active { + display: block; +} + +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; +} + +input { + background-color: inherit; +} + +.large-amount { + font-weight: bold; + font-size: x-large; +} + +.currency { + font-style: oblique; +} + +/* + * Currency indicator to the right of input fields, + * with non-rounded corners to the left. + */ +#main .currency-indicator { + color: black; + border-radius: 0px 4px 4px 0px; + position: relative; +} + +#main .fieldlabel { + display: block; + padding-bottom: 0.5em; +} + +#main .fieldbox { + margin-right: 1em; + margin-bottom: 0.5em; +} + +#logout-button { + display: block; + width: fit-content; +} + +.register-form > .pure-form, +.login-form > .pure-form { + background: #4a4a4a; + color: #ffffff; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + padding: 16px 16px; + border-radius: 8px; + width: max-content; + .formFieldLabel { + margin: 2px 2px; + } + input[type="text"], + input[type="password"] { + border: none; + border-radius: 4px; + background: #6a6a6a; + color: #fefefe; + box-shadow: none; + } + input[placeholder="Password"][type="password"] { + margin-bottom: 8px; + } + .btn-register, + .btn-login { + float: left; + } + .btn-cancel { + float: right; + } + h2 { + margin-top: 0; + margin-bottom: 10px; + } +} + + +.challenge-div { + display: block; + text-align: center; +} + +.challenge-form > .pure-form { + background: #4a4a4a; + color: #ffffff; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + padding: 16px 16px; + border-radius: 8px; + width: max-content; + .formFieldLabel { + margin: 2px 2px; + } + input[type="text"] { + border: none; + border-radius: 4px; + background: #6a6a6a; + color: #fefefe; + box-shadow: none; + } + .btn-confirm { + float: left; + } + .btn-cancel { + float: right; + } + h2 { + margin-top: 0; + margin-bottom: 10px; + } +} + + +.wire-transfer-form > .pure-form, +.payto-form > .pure-form, +.reserve-form > .pure-form { + background: #4a4a4a; + color: #ffffff; + display: inline-block; + text-align: left; + margin-left: auto; + margin-right: auto; + padding: 16px 16px; + border-radius: 8px; + width: max-content; + .formFieldLabel { + margin: 2px 2px; + } + input[type="text"] { + border: none; + border-radius: 4px; + background: #6a6a6a; + color: #fefefe; + box-shadow: none; + } +} + + +html { + background: #ffffff; + color: #2a2a2a; +} + +.hint { + scale: 0.7; +} |