@charset "utf-8"; | |
@import "util"; | |
/** | |
* Media rules for different screen sizes. | |
* This will override some basic rules. | |
*/ | |
$standard-margin: 4px; | |
// (orientation: portrait), | |
@media all and (max-width: 42.5em) { | |
body, | |
#search > ol, | |
#search div.snippet > span, | |
header, | |
header input, | |
div#resultinfo, | |
#pagination > a { | |
font-size: 9pt; | |
} | |
header { | |
padding-right: 8px; | |
}; | |
header form { | |
padding-left: 0; | |
padding-top: 33px; | |
} | |
.vc { | |
font-size: 9pt; | |
.builder { | |
.doc { | |
padding-left: 3em; | |
} | |
* .docGroup { | |
margin-left: 3em; | |
} | |
> .doc { | |
padding-left: .5em; | |
} | |
> .docGroup { | |
margin-left: .5em; | |
} | |
} | |
} | |
h1 { | |
margin-left: 10px; | |
width: 130px; | |
height: 40px; | |
background: { | |
size: 100%; | |
position: 50% 0; | |
} | |
z-index: 110; | |
} | |
#searchbar { | |
padding-right: 30px; | |
input { | |
font-size: 9pt; | |
} | |
button[type=submit] { | |
right: 0; | |
} | |
} | |
.level-1 { | |
padding-bottom: 2px; | |
} | |
.level-2 { | |
padding-bottom: 4px; | |
} | |
main { | |
margin-left: $standard-margin; | |
margin-right: $standard-margin; | |
} | |
header .button { | |
margin-right: $standard-margin; | |
&.top { | |
height: auto; | |
} | |
} | |
#search ol { | |
> li:target, > li.active { | |
> div > div.snippet { | |
margin: 2px 2em 2px 4px; | |
} | |
} | |
> li div.meta { | |
display: none; | |
} | |
} | |
div.matchinfo { | |
font-size: 9pt; | |
} | |
div.matchtable tr > * { | |
padding: 1pt 3pt; | |
} | |
div.matchtree { //, div.metatable { | |
h6 { | |
display: block; | |
float: none; | |
} | |
> div { // , > dl { | |
margin-left: 2px; | |
} | |
} | |
#kalamar-bg { | |
overflow: hidden; | |
} | |
#logos { | |
margin-left: 0; | |
margin-right: 0; | |
> div { | |
border-top-width: 14px; | |
padding-right: 0; | |
.logo > * { | |
background: { | |
size: 60%; | |
position: 0 0; | |
} | |
} | |
} | |
} | |
div.intro { | |
width: 100%; | |
} | |
body.embedded aside > div { | |
top: 0; | |
transform: translateY(0); | |
} | |
aside { | |
&:not(:focus):not(.active) { | |
margin-left: -1 * $logo-left-distance; | |
&::after { | |
font-size: 12pt; | |
height: 11pt; | |
text-align: right; | |
padding-right: 3pt; | |
padding-top: 2pt; | |
} | |
} | |
ul { | |
font-size: 9pt; | |
line-height: 1em; | |
} | |
&.active ~ main div.intro, | |
&.active ~ main.page { | |
margin-left: $standard-margin !important; | |
} | |
&.active { | |
position: relative; | |
display: block; | |
padding-top: 0; | |
width: 100%; | |
top: 0; | |
border-width: 0; | |
fieldset input { | |
font-size: 9pt; | |
} | |
&::after { | |
display: none; | |
} | |
p, hr { | |
display: none; | |
} | |
} | |
} | |
#tutorial { | |
border-radius: 0; | |
border-width: 0; | |
right: 0; | |
left: 0; | |
bottom: 0; | |
top: 0; | |
padding: 0; | |
iframe { | |
border-radius: 0; | |
} | |
> ul.action.right { | |
height: 1.5em; | |
right: 20px; | |
border-bottom-left-radius: 5px; | |
border-bottom-right-radius: 5px; | |
} | |
} | |
main.page { | |
margin-right: 20px; | |
} | |
} | |
@media print { | |
body, html, select, g > text { | |
color: black; | |
} | |
header, aside { | |
display: none; | |
} | |
main.page { | |
margin: 1em; | |
} | |
#kalamar-bg { | |
display: none; | |
} | |
a.embedded-link { | |
color: black; | |
text-decoration: underline; | |
} | |
pre.query.tutorial { | |
background-color: white; | |
color: black; | |
margin-left: 1em; | |
margin-right: 1em; | |
} | |
blockquote.warning { | |
background-color: grey; | |
color: white; | |
border-left-color: black; | |
border-left-width: 1em; | |
} | |
} |