wallet-core/packages/taler-wallet-webextension/static/style/wallet.css

294 lines
3.8 KiB
CSS

body {
font-size: 100%;
overflow-y: scroll;
margin-top: 2em;
}
.wallet-container {
margin: 0px;
padding: 0px;
}
section.main {
border: solid 5px black;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
padding-top: 2em;
max-width: 50%;
padding: 2em;
}
header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
header #logo {
float: left;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
text-align: center;
background-image: url(/img/logo.png);
background-size: 100px;
}
aside {
width: 100px;
float: left;
}
section.main {
margin: auto;
padding: 20px;
height: 100%;
max-width: 50%;
}
section.main h1:first-child {
margin-top: 0;
}
h1 {
font-size: 160%;
font-family: "monospace";
}
h2 {
font-size: 140%;
font-family: "monospace";
}
h3 {
font-size: 120%;
font-family: "monospace";
}
h4,
h5,
h6 {
font-family: "monospace";
font-size: 100%;
}
.form-row {
padding-top: 5px;
padding-bottom: 5px;
}
label {
padding-right: 1em;
}
input.url {
width: 25em;
}
.json-key {
color: brown;
}
.json-value {
color: navy;
}
.json-string {
color: olive;
}
button.confirm-pay {
float: right;
}
/* We use fading to hide slower DOM updates */
.fade {
-webkit-animation: fade 0.7s;
animation: fade 0.7s;
opacity: 1;
}
@-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
button.linky {
background: none !important;
border: none;
padding: 0 !important;
font-family: arial, sans-serif;
color: #069;
text-decoration: underline;
cursor: pointer;
}
.blacklink a:link,
.blacklink a:visited,
.blacklink a:hover,
.blacklink a:active {
color: #000;
}
table,
th,
td {
border: 1px solid black;
}
button.accept {
background-color: #5757d2;
border: 1px solid black;
border-radius: 5px;
margin: 1em 0;
padding: 0.5em;
font-weight: bold;
color: white;
}
button.linky {
background: none !important;
border: none;
padding: 0 !important;
font-family: arial, sans-serif;
color: #069;
text-decoration: underline;
cursor: pointer;
}
button.accept:disabled {
background-color: #dedbe8;
border: 1px solid white;
border-radius: 5px;
margin: 1em 0;
padding: 0.5em;
font-weight: bold;
color: #2c2c2c;
}
input.url {
width: 25em;
}
table {
border-collapse: collapse;
}
td {
border-left: 1px solid black;
border-right: 1px solid black;
text-align: center;
padding: 0.3em;
}
span.spacer {
padding-left: 0.5em;
padding-right: 0.5em;
}
.button-success,
.button-destructive,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65);
}
.button-destructive {
background: rgb(202, 60, 60);
}
.button-warning {
background: rgb(223, 117, 20);
}
.button-secondary {
background: rgb(66, 184, 221);
}
a.actionLink {
color: black;
}
.errorbox {
border: 1px solid;
display: inline-block;
margin: 1em;
padding: 1em;
font-weight: bold;
background: #ff8a8a;
}
.okaybox {
border: 1px solid;
display: inline-block;
margin: 1em;
padding: 1em;
font-weight: bold;
background: #00fa9a;
}
a.opener {
color: black;
}
.opener-open::before {
content: "\25bc";
}
.opener-collapsed::before {
content: "\25b6 ";
}
.svg-icon {
display: inline-flex;
align-self: center;
position: relative;
height: 1em;
width: 1em;
}
.svg-icon svg {
height: 1em;
width: 1em;
}
object.svg-icon.svg-baseline {
transform: translate(0, 0.125em);
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
button.pure-button {
font-size: 120%;
padding: 0.5em;
}