app/resources/zstyle.css
@font-face {
font-family: "monospace";
src: url(NotoSansMono-Regular.ttf);
}
@font-face {
font-family: "FontAwesome";
src: url(fontawesome-webfont.eot);
}
/* include padding and border in width/height */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* fill whole viewport */
body, .body {
margin: 0;
height: 100vh;
}
/* util */
.hidden {
display: none !important;
}
/* main look and feel */
:root {
--arizen-fg: #1B2F59;
--panel-bg: #ffffff;
--button-bg: #f3f3f3;
--button-fg: #1B2F59;
--border-color: #c4cddb;
--money-negative: #942824;
--money-positive: #61b884;
--odd-bg: #f3f3f3;
--hover-bg: #69FFBD;
--hover-fg: #69FFBD;
}
body {
color: #1B2F59;;
background: #f3f3f3;
font-family: 'Raleway', 'Lato', sans-serif;
}
div {
border-color: var(--arizen-fg); /* TODO */
}
button {
cursor: pointer;
font: inherit;
outline: none;
color: var(--button-fg);
border: none;
/*border-radius: 2px;*/
padding: 4px 10px;
background: var(--button-bg);
}
button:not(:disabled):hover,
button:not(:disabled):focus {
/*filter: brightness(90%);*/
background: var(--hover-bg);
}
button:disabled {
cursor: default;
background: lightgray;
}
.smallButton {
padding: 3px 6px;
}
input[type="text"],
input[type="number"],
select,
textarea {
font: inherit;
background: var(--panel-bg);
color: var(--arizen-fg);
outline: none;
transition: all 0.2s;
}
input[type="text"],
input[type="number"],
select {
border: none;
border-bottom: 1px solid var(--arizen-fg);
margin-bottom: 2px;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
border-bottom: 1px solid var(--hover-fg);
}
select {
background: var(--panel-bg);
}
select option {
margin: 40px;
background: inherit;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
select:focus > option:checked {
color: var(--arizen-fg) !important;
}
textarea {
border: 1px solid var(--arizen-fg);
margin: 0;
}
textarea:focus {
border: 1px solid var(--hover-fg);
}
hr {
margin: 0 0 5px;
width: 100%;
border: 0;
height: 1px;
background: var(--hover-fg);
flex-shrink: 0;
}
h2 {
margin: 0;
font-weight: inherit;
font-size: 120%;
}
.filler {
flex-grow: 99;
}
.form {
display: grid;
grid-template-columns: max-content auto;
grid-column-gap: 10px;
grid-row-gap: 5px;
align-items: baseline;
}
.formInput {
display: flex;
}
.formInput > input {
flex-grow: 2;
margin-right: 5px;
}
.formButtons {
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
.formDivider {
grid-column: span 2;
margin: 10px 0;
background: var(--arizen-fg);
}
dialog {
border: none;
color: inherit;
}
arizen-dialog > [slot="content"] {
padding: 10px;
overflow: auto;
}
.positive {
color: var(--money-positive);
}
.negative {
color: var(--money-negative);
}
.monospace {
font-family: "monospace" !important;
}
.warning {
color: var(--money-negative);
font-weight: bolder;
}
/* TODO this doesn't belong here */
.aboutDialogContent {
padding: 15px !important;
display: flex;
flex-direction: column;
align-items: center;
}
.aboutDialogContent .form > :nth-child(odd) {
font-weight: bolder;
}
.aboutAuthors {
display: flex;
flex-direction: column;
}
.aboutDialogContent .zenLogo {
margin-top: 20px;
}
/* TODO this doesn't belong here */
.settingsDialogContent {
min-width: 800px;
}
.container {
display: block;
position: relative;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 12px;
cursor: pointer;
}
.container input {
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 19px;
width: 19px;
background-color: #bbb;
}
.container input:checked ~ .checkmark {
background-color: var(--arizen-fg);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.createButtonCheck {
align-items: center;
}
.createWalletContainer {
text-align: center;
}
.newAddressPrintArea {
text-align: center;
margin: auto;
display: none;
}
.zenLogo {
text-align: center;
}
.namePrivateKey {
color: red;
display: block;
}
.qrPrivate {
display: block;
}
.keyPrivate {
font-size: 75%;
color: red;
}
.nametAddr {
color: green;
display: block;
}
.qrtAddr {
display: block;
}
.tAddr {
font-size: 75%;
color: green;
}
.hToolbar {
display: flex;
flex-direction: row;
}
.hToolbar > *:not(:first-child) {
margin-left: 10px;
}