octomode/static/main.css

@charset "utf-8";

:root{
	--highlightcolor: #f3c6ff;
}

body{
	min-width: 900px;
	background-color: darkkhaki;
}

/* GENERAL RULES */

/* main title element that says "in octomode" */
h1 em.octomode{
	color: var(--highlightcolor);
	text-decoration: underline;
}

/* navigation */
div#nav{
	position: fixed;
	width: calc(100% - 1em);
	top: 0;
	left: 0;
	margin: 0;
	padding: 0 0.5em;
}
	div#nav h1{
		position: absolute;
		width: auto;
		line-height: 0;
		margin: 0.75em 15px;
		float: left;
		font-size: 32px;
	}
	div#nav div#buttons{
		margin: 0.5em 15px;
		float: right;
	}
	div#nav div#buttons a,
	div#nav div#buttons a:visited,
	div#nav div#buttons a.link{
		text-decoration: none;
		color: inherit;
	}
	div#nav div#buttons a.link{
		padding-right: 0.25em;
	}
	div#nav div#buttons button{
		padding: 0.2em 1em 0.4em;
		/* border: 2px groove var(--highlightcolor); */
		/* border-radius: 1em; */
	}
	button:hover{
		cursor: pointer;
	}
	div#nav span.info{
		font-size: 16px;
		line-height: 0;
		vertical-align: middle;
		cursor: pointer;
	}
	div#nav span.info:hover{
		opacity: 0.75;
	}
	div#nav div.hidden{
		position: absolute;
		right: 1.5em;
		margin-top: 8px;
	}
	div#nav input{
		min-width: 300px;
	}
	/* click logic (CSS only) */
	span#click_md {
		cursor: pointer;
	}
	div#show_md{
		display: none;
	}
	span#click_md:focus + div#show_md{
		display: block;
	}
	span#click_css {
		cursor: pointer;
	}
	div#show_css{
		display: none;
	}
	span#click_css:focus + div#show_css{
		display: block;
	}

/* iframe rules */
iframe{
	width: 100%;
	height: 100%;
	border: none;
}
/* main content area */
div#wrapper{
	position: fixed;
	top: 50px;
	left: 25px;
	width: calc(100vw - 25px - 25px);
	height: calc(100vh - 50px - 25px);
}

/* start page */
body.start-page *{
	font-family: serif;
	font-size: 115%;
	font-weight: bold;
}
body.start-page h1 em.octomode{
	font-size: 32px;
}


/* Z-INDEX */
div#wrapper,
div.pagedjs_pages{
	z-index: 1;
}
div#nav{
	z-index: 11;
}