Collective PDF rendering environment (work-in-progress)
https://cc.vvvvvvaria.org/wiki/Octomode
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
1.9 KiB
128 lines
1.9 KiB
@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;
|
|
}
|
|
|