twigs-web/src/styles.css

143 lines
No EOL
1.8 KiB
CSS

/* You can add global styles to this file, and also import other style files */
html,
body {
background: #F1F1F1;
font-family: Roboto, "Helvetica Neue", sans-serif;
margin: 0;
padding: 0;
}
p {
color: #333333;
margin: 0;
}
a.mat-fab {
position: fixed;
right: 2em;
bottom: 2em;
}
.text-small {
font-size: 90%;
color: #333333;
}
mat-toolbar.mat-toolbar-row,
mat-toolbar.mat-toolbar-single-row {
padding: 0;
}
mat-toolbar>span {
display: flex;
width: 33%;
;
}
mat-toolbar>span:nth-child(1) {
justify-content: flex-start;
}
mat-toolbar>span:nth-child(2) {
justify-content: center;
}
mat-toolbar>span:nth-child(3) {
justify-content: flex-end;
}
/* mat-toolbar a.mat-button {
font-size: 1em;
}
mat-toolbar a.mat-button .mat-icon {
vertical-align: text-top;
}
mat-toolbar mat-icon {
vertical-align: middle;
cursor: pointer;
} */
mat-toolbar .action-item {
font-weight: normal;
cursor: pointer;
font-size: 0.9em;
}
mat-toolbar .action-item a {
vertical-align: middle;
}
mat-sidenav-container.mat-drawer-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
mat-sidenav-container .mat-drawer-backdrop.mat-drawer-shown {
background-color: rgba(0, 0, 0, 0.8);
}
mat-sidenav {
min-width: 300px;
}
.mat-progress-spinner {
top: 5em;
left: calc(50% - 25px);
}
.income {
color: #81C784;
}
.expense {
color: #E57373;
}
/**
* Forms
*/
.form {
padding: 1em;
color: #333333;
}
.form .mat-form-field,
.form .button {
display: block;
}
.form mat-radio-button {
padding-bottom: 15px;
}
.form button {
width: 100%;
margin: 1em 0;
}
@media (prefers-color-scheme: dark) {
html,
body {
background: #333333;
}
p {
color: #F1F1F1;
}
.text-small {
color: #BDBDBD;
}
.form {
color: #F1F1F1;
}
}