WikiNote3/wikinote/static/css/main.css

/*
    WikiNote3
    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/>.
*/

html, body {
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size: 12pt; /* 10.5pt */
}

@media screen and (min-width: 37cm) {
	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;
	}
}

@media screen and (max-width: 37cm) {
	body {
		padding: 1cm;
	}
}

/* Left/right boxes */

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

@media screen and (max-width: 37cm) {
	aside.leftbox > div, aside.rightbox > div {
		border-top: 2px solid #ccc;
		margin-top: 0.5cm;
		padding-top: 0.5cm;
	}
}

@media print {
	aside.leftbox, aside.rightbox {
		display: none;
	}
}

/* Table of contents */

ul.toc {
	padding: 0;
}

ul.toc li {
	list-style-type: none;
}

/* Breadcrumbs */

nav.breadcrumbs {
	font-size: 0.8rem;
	margin-bottom: 0.25cm;
	color: #555753ff;
}

nav.breadcrumbs img {
	height: 0.9em;
}

/* Page content styling */

h1, h2, h3, h4, h5, h6 {
	color: #204a87ff;
	font-weight: 600;
	margin-bottom: 0.25cm;
}
h1 {
	font-size: 1.33rem; /* 14pt */
	margin-top: 0;
}
h2 {
	font-size: 1.14rem; /* 12pt */
	margin-top: 0.4cm;
}
h3 {
	font-size: 1rem; /* 10.5pt */
	margin-top: 0.4cm;
}
h4, h5, h6 {
	font-size: 1rem; /* 10.5pt */
	margin-top: 0.4cm;
	font-weight: normal;
	font-style: italic;
}

section > div.two-columns > aside > h3:first-child,
section > div.two-columns > aside > h4:first-child {
	margin-top: 0.15cm; /* Adjust for 0.25cm of heading above */
}

p {
	margin-top: 0;
	margin-bottom: 0.25cm;
}
p, ul {
	line-height: 1.4;
}

ul, ol {
	margin-top: 0;
	padding-left: 1.8rem;
}
section > ul, section > ol {
	margin-bottom: 0.25cm;
}
ul > li {
	list-style-type: '\2022    ';
}
ul > li > ul > li {
	list-style-type: '\25e6    ';
}
ol p {
	margin: 0;
}

section > div:not(:last-child) {
	margin-bottom: 0.25cm;
}

table {
	border-collapse: collapse;
	margin-bottom: 0.25cm;
	width: 100%;
}
table tr:not(.na) td, table tr:not(.na) th {
	border-top: 0.5pt solid black;
}
table tr:not(.nb) td, table tr:not(.nb) th {
	border-bottom: 0.5pt solid black;
}
table td, table th {
	padding: 0.5mm 1mm;
}
table th {
	font-weight: 600;
	text-align: left;
}
table tr.heading th {
	text-align: center;
}

span.blue {
	color: #204a87;
	font-weight: 600;
	font-style: normal;
}

a {
	color: #3465a4;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a.redlink {
	color: #cc0000ff !important;
}

a span.url {
	word-break: break-all;
}

a.smart-url > span.url {
	display: none;
}
@media print {
	a.smart-url > span.url {
		display: inline;
	}
	a.smart-url > span:not(.url) {
		display: none;
	}
}

div.two-columns {
	display: flex;
}
div.two-columns > aside {
	width: 50%;
}
div.two-columns > aside:not(:last-of-type) {
	margin-right: 1em;
}

/* Remove trailing margins */

div.admonition > p:last-child, div.admonition > div > p:last-child,
div.admonition > ul:last-child, div.admonition > ol:last-child,
td > ul:last-child {
	margin-bottom: 0;
}

/* Admonitions */

div.admonition {
	padding: 0.5em;
	margin-bottom: 0.25cm;
	background-color: #eee;
}
div.admonition.warning {
	background-color: #fef7b8ff;
}
div.admonition.error {
	background-color: #fcd4d4ff;
}
p.admonition-title {
	font-weight: 600;
}

div.admonition.pharm {
	background-color: #d9f1f3;
}
div.admonition.pharm .drug-circle {
	height: 1.8rem;
	width: 1.8rem;
	border-radius: 0.9rem;
	
	color: #2e3436ff;
	background-color: white;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	font-size: 0.8rem;
	
	margin: 0.25cm 0;
}
div.admonition.pharm .drug-circle.drug-circle-pm {
	font-size: 1.2rem;
}
div.admonition.pharm a.drug {
	color: black;
	font-weight: 600;
}
span.alt-drugs {
	color: #888a85;
	text-decoration: underline;
	text-decoration-style: dashed;
	cursor: pointer;
}

div.admonition.buzzword {
	background-color: #d8f6bcff;
	display: flex;
	align-items: center;
}
div.admonition.buzzword > img {
	width: 32px;
	margin-right: 8px;
}

/* Tooltips */
.tooltip {
	position: relative;
	display: inline-block;
}
.tooltip .tooltip-content {
	display: none;
	position: absolute;
	background-color: white;
	border: 1px solid #d3d7cfff;
	border-radius: 8px;
	padding: 8px;
	z-index: 99;
	width: 60vw;
	
	color: black;
	font-weight: initial;
}
.tooltip:hover > .tooltip-content {
	display: block;
}
.tooltip-content > section > p:last-child {
	margin-bottom: 0;
}

/* Steps */

span.step {
	font-weight: 600;
}
span.step .step-circle {
	height: 1.8rem;
	width: 1.8rem;
	border-radius: 0.9rem;
	
	color: white;
	background-color: #2e3436ff;
	
	display: inline-flex;
	justify-content: center;
	align-items: center;
	
	margin-right: 1ex;
}

/* Footnotes */

sup.footnote-ref, sup.footnote-ref a {
	color: #888a85;
	text-decoration: none;
}
div.footnote {
	font-size: small;
	
	border-top: 2px solid #444;
	padding-top: 0.25cm;
	margin-top: 0.25cm;
}
div.footnote ol {
	margin: 0;
}

/* Expanding and collapsing */

button.expcol {
	border: 1px solid #888a85;
	font-size: 0.5rem;
	padding: 3px;
	vertical-align: middle;
	opacity: 0.2;
}
h1:hover button.expcol, h2:hover button.expcol {
	opacity: 1.0;
}
section.collapsed {
	display: none;
}