ledger-pyreport/ledger_pyreport/static/main.css

/*
    ledger-pyreport
    Copyright © 2020  Lee Yingtong Li (RunasSudo)

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

body {
	font-family: 'TeX Gyre Termes', 'Nimbus Roman', 'Times New Roman', 'Liberation Serif', Times, serif;
	padding: 2em;
}

body.narrow-report {
	padding: 0;
}

@media screen and (min-width: 37cm) {
	body.narrow-report article.page {
		width: 21cm;
		
		box-sizing: border-box;
		margin: 0.5cm 0 0.5cm 0;
		padding: 1cm;
		
		border: 2px solid #ccc;
		box-shadow: 4px 4px 4px #777;
	}
}

/* Left/right boxes */

@media screen and (min-width: 37cm) {
	body.narrow-report div.page-container {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
	
	body.narrow-report aside.leftbox, body.narrow-report aside.rightbox {
		width: 7cm;
	}
	
	body.narrow-report aside.leftbox > div, body.narrow-report aside.rightbox > div {
		width: 7cm;
		box-sizing: border-box;
		padding: 0.5cm;
		border: 1px solid #ccc;
	}
	
	body.narrow-report aside.leftbox {
		position: relative;
		order: -1;
		margin: 0.5cm 1cm 0.5cm auto;
	}
	
	body.narrow-report aside.rightbox {
		position: relative;
		margin: 0.5cm auto 0.5cm 1cm;
	}
	
	body.narrow-report aside.leftbox > div, body.narrow-report aside.rightbox > div {
		position: fixed;
		overflow-y: auto;
		max-height: calc(100% - 1cm);
	}
	
	body.narrow-report aside.leftbox > div :last-child, body.narrow-report aside.rightbox > div :last-child {
		margin-bottom: 0;
	}
}

/* Tables */

h1 {
	text-align: center;
	font-size: x-large;
	font-weight: bold;
	margin: 0;
}

h2 {
	text-align: center;
	font-size: medium;
	font-weight: normal;
	margin: 0.2em 0 1em 0;
}

table.ledger {
	width: 100%;
	border-collapse: collapse;
}

table.ledger td, table.ledger th {
	padding: 2px 2px 2px 2px;
	vertical-align: top;
}

table.ledger th {
	text-align: left;
}
table.ledger th.h1 {
	text-align: center;
}

table.ledger tr:hover {
	background-color: #eee;
}

table.ledger tr.total td {
	font-weight: bold;
}
table.ledger tr.total:not(.explicit-rules) td {
	border-top: 1pt solid black;
	border-bottom: 1pt solid black;
}

table.ledger.onedesc tr td:not(:first-child), table.ledger.onedesc tr th:not(:first-child) {
	text-align: right;
	width: 6em;
}

table.ledger tr.trn-first td {
	padding-top: 1.5mm;
}
table.ledger tr.trn-last td {
	padding-bottom: 1.5mm;
}

table.ledger a {
	color: black;
	text-decoration: none;
}

table.ledger a:hover {
	color: blue;
	text-decoration: underline;
}

/* Navigation bar */

.nav-links {
	color: #888;
	margin: 0;
	padding: 0;
}
.nav-links li {
	list-style: none;
}
.nav-links a {
	color: #888;
}
.nav-links a:hover {
	color: #666;
}

body:not(.narrow-report) .nav-links {
	position: absolute;
	top: 0;
	left: 0;
}
body:not(.narrow-report) .nav-links li {
	display: inline;
}
body:not(.narrow-report) .nav-links li:not(:last-child)::after {
	content: " | ";
}
@media screen and (max-width: 37cm) {
	body {
		padding: 2em !important;
	}
	
	.nav-links {
		position: absolute;
		top: 0;
		left: 0;
	}
	.nav-links li {
		display: inline;
	}
	.nav-links li.width-toggle {
		display: none;
	}
	.nav-links li:not(:first-child)::before {
		content: " | ";
	}
}

/* Home page */

.index-group {
	margin-bottom: 1em;
	line-height: 2;
}
label {
	margin-left: 1ex;
	white-space: nowrap;
}

/* Toasts */

.toast {
	opacity: 0%;
	transition: opacity 0.2s;
	
	position: fixed;
	bottom: 2em;
	left: 50%;
	transform: translateX(-50%);
	
	background-color: #eee;
	padding: 0.5em 1.5em;
	border: 1px solid #666;
}
.toast.visible {
	opacity: 100%;
	transition: opacity 0s;
}

@media print {
	.nav-header {
		display: none;
	}
}