149 lines
2.2 KiB
CSS
149 lines
2.2 KiB
CSS
@charset "utf-8";
|
|
|
|
body{
|
|
min-width: 900px;
|
|
}
|
|
|
|
/* GENERAL RULES */
|
|
|
|
/* main title element that says "in octomode" */
|
|
h1 em.octomode{
|
|
color: darkorchid;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
div#nav div#buttons{
|
|
margin: 0.5em 15px;
|
|
float: right;
|
|
}
|
|
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[type="text"]{
|
|
min-width: 300px;
|
|
}
|
|
div#nav .layout-options {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
margin-left: 0.5em;
|
|
font-size: 0.9em;
|
|
}
|
|
div#nav .layout-options label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
cursor: pointer;
|
|
}
|
|
div#nav .layout-options input[type="checkbox"] {
|
|
margin: 0;
|
|
}
|
|
/* 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);
|
|
}
|
|
|
|
|
|
/* Z-INDEX */
|
|
div#wrapper,
|
|
div.pagedjs_pages{
|
|
z-index: 1;
|
|
}
|
|
div#nav{
|
|
z-index: 11;
|
|
}
|
|
|
|
/* start page */
|
|
body.start-page {
|
|
font-family: serif;
|
|
font-size: 115%;
|
|
}
|
|
|
|
.start-page ul {
|
|
max-height: 66vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.start-page .cols {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.start-page .home_pad_iframe {
|
|
height: 75vh;
|
|
/* margin: 5rem; */
|
|
/* width: calc(100vw - 13rem); */
|
|
border: 1px solid black;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
.start-page .home_pad_iframe {
|
|
margin: 1rem;
|
|
width: 90vw;
|
|
}
|
|
|
|
.start-page .cols {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
}
|