examples/simple-viewer/style.css
/*
// Copyright (C) 2022, 2024 Artifex Software, Inc.
//
// This file is part of MuPDF.
//
// MuPDF 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.
//
// MuPDF 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 MuPDF. If not, see <https://www.gnu.org/licenses/agpl-3.0.en.html>
//
// Alternative licensing terms are available from the licensor.
// For commercial licensing, see <https://www.artifex.com/> or contact
// Artifex Software, Inc., 39 Mesa Street, Suite 108A, San Francisco,
// CA 94129, USA, for further information.
*/

* {
	box-sizing: border-box;
}

/* APPEARANCE */

html {
	font-family: sans-serif;
	font-size: 18px;
	background-color: gray;
}

header {
	border-bottom: 1px solid black;
	background-color: gainsboro;
}

footer {
	border-top: 1px solid black;
	background-color: gainsboro;
}

aside {
	background-color: white;
	border-right: 1px solid black;
}

#message {
	text-align: center;
	font-size: 24pt;
	font-weight: bold;
	color: silver;
}

details[open] > summary {
	background-color: #0004;
}

menu {
	min-width: 140px;
	border: 1px solid black;
	background-color: white;
	color: black;
}

menu li:hover {
	background-color: black;
	color: white;
}

/* LAYOUT */

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	width: 100%;
	height: 100%;
	overflow: clip;
}

header {
	position: relative;
	user-select: none;
	grid-column: 1/3;
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
}

footer {
	grid-column: 1/3;
	grid-row: 3;
	display: flex;
	padding: 8px;
	gap: 8px;
}

aside {
	grid-column: 1;
	grid-row: 2;
	overflow-y: auto;
	width: 250px;
}

main {
	grid-column: 2;
	grid-row: 2;
	overflow: scroll;
}

summary {
	padding: 4px 8px;
	cursor: pointer;
	list-style: none;
}

/* workaround for bug in Safari details appearance */
summary::-webkit-details-marker {
	display: none;
}

menu {
	position: absolute;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 500;
}

menu li {
	padding: 4px 8px;
	cursor: pointer;
}

/* OUTLINE */

#outline {
	font-size: 12px;
}

#outline ul {
	margin: 0;
	padding-left: 20px;
}

#outline a {
	color: black;
	text-decoration: none;
}

#outline a:hover {
	color: blue;
	text-decoration: underline;
}

/* PAGES */

#pages {
	margin: 0 auto;
}

div.page {
	position: relative;
	background-color: white;
	margin: 16px auto;
	box-shadow: 0px 2px 8px #0004;
}

div.page * {
	position: absolute;
}

div.page canvas {
	user-select: none;
}

svg.text {
	width: 100%;
	height: 100%;
}

svg.text text {
	white-space: pre;
	line-height: 1;
	fill: transparent;
}

svg.text ::selection {
	background: hsla(220, 100%, 50%, 0.2);
	color: transparent;
}

div.link a:hover {
	border: 1px dotted blue;
}

#pages.do-content-select div.link {
	pointer-events: none;
}

div.search > div {
	pointer-events: none;
	border: 1px solid hotpink;
	background-color: lightpink;
	mix-blend-mode: multiply;
}
