octomode/static/main.css

101 lines
1.4 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{
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;
}
/* Z-INDEX */
div#wrapper,
div.pagedjs_pages{
z-index: 1;
}
div#nav{
z-index: 11;
}