Spaces:
Runtime error
Runtime error
| body { | |
| color: #2c3e50; | |
| margin: 0; | |
| width: 96vw; | |
| height: 96vh; | |
| margin-top: 2vh; | |
| margin-left: 2vw; | |
| font-family: sans-serif; | |
| } | |
| ul { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| /***** CONTAINERS & BUTTONS *****/ | |
| .kumiko-reader { | |
| z-index: 1; | |
| cursor: pointer; | |
| border: 1px dotted blue; | |
| padding: 1px; /* make sure to see panel borders even for pages with no margin (e.g. xkcd) */ | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .pagenb, .burger, .prev, .menu > ul, .license { | |
| z-index: 20; | |
| padding: 0.1em 0.4em; | |
| background-color: #34495e; | |
| color: #ecf0f1; | |
| font-weight: bold; | |
| } | |
| .menu { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .menu ul { | |
| display: flex; | |
| flex-direction: column; | |
| border: 2px solid #ecf0f1; | |
| border-radius: 5px; | |
| padding: 2em; | |
| font-size: 150%; | |
| position: relative; | |
| } | |
| .menu .kbd { font-size: 80%; display: flex; justify-content: space-between;} | |
| .menu .kbd span:nth-child(1) { color: #bdc3c7; margin-right: 1em; } | |
| .menu .exit { | |
| position: absolute; | |
| right: 1vmin; | |
| top: 1vmin; | |
| font-style: normal; | |
| } | |
| /* Fading corner icons/infos */ | |
| .prev { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| font-size: 6vmin; | |
| font-style: normal; | |
| } | |
| .burger { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| font-size: 6vmin; | |
| font-style: normal; | |
| } | |
| .pagenb { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| .prev, .burger, .pagenb { | |
| transition-property: opacity; | |
| transition-duration: 2s; | |
| opacity: 0.1; | |
| } | |
| .prev:active, .burger:active, .pagenb:active { | |
| transition-duration: 0s; | |
| opacity: 1; | |
| } | |
| .license { | |
| position: absolute; | |
| bottom: 0; | |
| right: 15%; | |
| } | |
| .license, .license a { | |
| color: #ecf0f1; | |
| } | |
| /***** PANELS *****/ | |
| .panel { | |
| z-index: 10; | |
| position: absolute; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel { | |
| border: 2px solid #3498db; | |
| margin-left: -2px; | |
| margin-top: -2px; | |
| } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel.unknown { | |
| border: 4px solid #e74c3c; | |
| } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel:hover, | |
| .kumiko-reader.debug .container:not(.zoomed) .panel:active { | |
| background-color: rgba(52,152,219,0.5); | |
| } | |
| .kumiko-reader:not(.debug) .container .panel *, | |
| .kumiko-reader.debug .container.zoomed .panel * { | |
| display: none; | |
| } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel span { | |
| color: #3498db; | |
| font-size: 75%; | |
| background-color: white; | |
| opacity: 0.9; | |
| border-radius: 30px; | |
| padding: 2px 6px; | |
| } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel.unknown span { | |
| color: #e74c3c; | |
| } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel span.panelnb { font-size: 150%; } | |
| /* Debug show panel edges */ | |
| .kumiko-reader.debug .container:not(.zoomed) .panel span.top { position: absolute; top: 0; left: 45%; } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel span.bottom { position: absolute; bottom: 0; left: 45%; } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel span.left { position: absolute; left: 0; top: 45%; } | |
| .kumiko-reader.debug .container:not(.zoomed) .panel span.right { position: absolute; right: 0; top: 45%; } | |
| /* Debug mode */ | |
| .imgbox { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-around; | |
| } | |
| .imgbox > div { width: 25%; } | |
| .imgbox img { width: 100%; border: 1px dotted gray; } | |
| .imgbox p { text-align: center;} | |