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.
200 lines
3.3 KiB
200 lines
3.3 KiB
svg |
|
display: block |
|
width: auto |
|
height: auto |
|
max-width: 100% |
|
max-height: 100% |
|
margin: auto |
|
|
|
a |
|
text-decoration: inherit |
|
color: inherit |
|
cursor: pointer |
|
|
|
header |
|
z-index: 98 |
|
display: flex |
|
overflow: visible |
|
justify-content: space-between |
|
background-color: blue |
|
color: white |
|
line-height: 1em |
|
cursor: grabbing |
|
h1 |
|
z-index: 99 |
|
font-size: 100% |
|
margin: 0.5em |
|
&::before |
|
width: 1em |
|
content: "☰" |
|
color: white |
|
margin-right: .25em |
|
&:hover #menu |
|
display: block |
|
#menu |
|
display: none |
|
background-color: #ccc |
|
color: black |
|
margin: 1px |
|
padding: 0 |
|
border: 1px solid black |
|
z-index: 100 |
|
.menu |
|
margin: 0 |
|
padding: .5em |
|
label::after |
|
content: ':' |
|
padding-right: 1ex |
|
&:hover |
|
background-color: #eee |
|
.menu + .menu |
|
border-top: 1px solid black |
|
&:hover |
|
display: block |
|
a |
|
display: none |
|
&[href] |
|
display: block |
|
#info |
|
#zoom |
|
margin: 0.5em |
|
display: flex |
|
a |
|
margin 0 0.1em |
|
#zoomin |
|
cursor: zoom-in |
|
#zoomreset |
|
cursor: pointer |
|
#zoomout |
|
cursor: zoom-out |
|
#downloads, #info |
|
display: flex |
|
#clock |
|
margin: 0.5em |
|
#status |
|
margin: 0.5em |
|
cursor: pointer |
|
&.wait |
|
&::before |
|
content: "⌛" |
|
color: inherit |
|
&.error |
|
&::before |
|
content: "✘" |
|
color: red |
|
&.success |
|
&::before |
|
content: "✔" |
|
color: green |
|
&.paused |
|
&::before |
|
content: "⏯" |
|
color: yellow |
|
#orientation |
|
margin: 0.5em |
|
cursor: pointer |
|
&.lr |
|
&::before |
|
content: "→" |
|
&.tb |
|
&::before |
|
content: "↓" |
|
&.rl |
|
&::before |
|
content: "←" |
|
&.bt |
|
&::before |
|
content: "↑" |
|
|
|
#error |
|
display: none |
|
background-color: red |
|
|
|
.top |
|
header |
|
position: fixed |
|
top: 0 |
|
left: 0 |
|
width: 100% |
|
height: 2em |
|
#menu |
|
position: absolute |
|
main |
|
position: absolute |
|
top: 2em |
|
left: 0 |
|
right: 0 |
|
bottom: 0 |
|
overflow: auto |
|
|
|
.bottom |
|
header |
|
position: fixed |
|
bottom: 0 |
|
left: 0 |
|
width: 100% |
|
height: 2em |
|
#menu |
|
position: absolute |
|
transform: translate(0, -100%) translate(0, -1em) |
|
main |
|
position: absolute |
|
top: 0 |
|
left: 0 |
|
right: 0 |
|
bottom: 2em |
|
overflow: auto |
|
|
|
.left |
|
header |
|
position: fixed |
|
top: 0 |
|
left: 0 |
|
width: 100vh |
|
height: 2em |
|
transform-origin: right top |
|
transform: translate(-100%) rotate(270deg) |
|
#orientation |
|
transform: rotate(90deg) |
|
#menu |
|
transform-origin: top left |
|
transform: rotate(90deg) translate(0, -100%) |
|
main |
|
position: absolute |
|
top: 0 |
|
right: 0 |
|
left: 2em |
|
bottom: 0 |
|
|
|
.right |
|
header |
|
position: fixed |
|
top: 0 |
|
right: 0 |
|
width: 100vh |
|
height: 2em |
|
transform-origin: left top |
|
transform: translate(100%) rotate(90deg) |
|
#orientation |
|
transform: rotate(270deg) |
|
#menu |
|
transform-origin: top left |
|
transform: rotate(270deg) translate(-100%) |
|
main |
|
position: absolute |
|
top: 0 |
|
left: 0 |
|
right: 2em |
|
bottom: 0 |
|
overflow: auto |
|
|
|
.imagecontainer |
|
padding: 1em |
|
|
|
#image |
|
height: 100% |
|
|
|
div#loading |
|
text-align: center |
|
margin-top: 40vh |
|
font-size: 200%
|
|
|