X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=simpleWebSlides.css;h=c2c72b72dcd254c52e0961f8180fcebcb350acff;hb=HEAD;hp=1ebd3f707ba7b361d844ef41e6f8afc5b20f87c4;hpb=17470c738558740aa2b3cb754bf38bad52157816;p=hacks%2FsimpleWebSlides.git diff --git a/simpleWebSlides.css b/simpleWebSlides.css index 1ebd3f7..c2c72b7 100644 --- a/simpleWebSlides.css +++ b/simpleWebSlides.css @@ -1,35 +1,332 @@ -@import url(simpleWebSlides_screen.css) screen; -@import url(simpleWebSlides_print.css) print; - +/* Common */ body { - overflow:hidden; + margin:0; + padding:0; + box-sizing: border-box; +} + +.sws-active-object { + visibility: visible; +} +.sws-inactive-object { + opacity: 0; +} + +.sws-canvas { + display:flex; + justify-content: center; + flex-direction:column; + box-sizing: border-box; } -.canvas { - top: 0pt; - left:0pt; - right:0pt; - bottom:0pt; +.sws-cover .sws-content { + text-align:center; } +/* Layout of a canvas */ +.sws-header , .sws-title,{ + height:5%; +} + +.sws-inner-canvas { + height: 80%; + text-align: justify; +} + +.sws-content { + margin: 0; + padding: 0; + display: block; + box-sizing: border-box; +} + +.sws-footer{ + height: 10%; +} -.centerbox { +.sws-header, .sws-title, .sws-inner-canvas, .sws-footer{ display:block; - text-align: center; - vertical-align: middle; + margin:0; + padding:0; + width: 100%; + box-sizing: border-box; + overflow:hidden; +} + +body > h1, body > h2, body > h3, body > a.sws-previous { + display: none; +} +/* Display Mode */ +/****************************************/ + + + +/* display mode */ +/* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */ +:root.sws-display .sws-canvas { + max-width: 100vw; + max-height: 100vh; + overflow:hidden; + +} + +:root.sws-by-width body { + font-size: 3.5vh; } +:root.sws-by-height.sws-aspect-4-3 body { + font-size: 2.625vw; +} +:root.sws-by-height.sws-aspect-16-9 body { + font-size: 1.96875vw; +} +:root.sws-by-height.sws-aspect-16-10 body { + font-size: 2.1875vw; +} + +:root.sws-by-width.sws-aspect-4-3 .sws-canvas { + width:133.3vh; + height:100vh; +} + +:root.sws-by-width.sws-aspect-16-9 .sws-canvas { + width:177.7vh; + height:100vh; +} + +:root.sws-by-width.sws-aspect-16-10 .sws-canvas { + width:160vh; + height:100vh; +} + +:root.sws-by-height.sws-aspect-4-3 .sws-canvas { + width:100vw; + height:75vw; +} + +:root.sws-by-height.sws-aspect-16-9 .sws-canvas { + width:100vw; + height:56.25vw; +} + +:root.sws-by-height.sws-aspect-16-10 .sws-canvas { + width:100vw; + height:62.5vw; +} + +:root.sws-display body::after{ + display:inline-block; + height:100vh; + width:0; + content: ""; + vertical-align:middle; + +} + +:root.sws-display .sws-canvas { + display:inline-block; + padding: 0; + max-width: 100vw; +} + +:root.sws-display .sws-inactive-slide { + display: none; +} + +:root.sws-display body { + background: black; + overflow: hidden; + text-align:center; +} + + +/* Print Mode */ +/* ****************************************** */ -.slide { - position:absolute; +:root.sws-print body { + background: white; + width: 297mm; + padding: 0; + margin: 0; + font-size: 21pt; } -.slide .footer { - position: absolute; +@media print { + + @page { + size: 297mm 210mm; + margin: 0; + padding: 0; + +} + +:root.sws-print .sws-canvas { + width: 297mm; + height: 210mm; + /* not 210mm to avoid rounding errors */ + page-break-after: always; + padding: 0pt 0pt 0pt 0pt; + margin: 0pt 0pt 0pt 0pt; +} + +:root.sws-print .sws-canvas:last { + page-break-after: avoid; +} +} +:root.sws-print .sws-inactive-slide { + opacity: 1; +} + +p { width: 100%; } + +/* counters for the toc */ + +.sws-toc ul { + counter-reset: list-item; +} + +.sws-toc li { + counter-increment: list-item; + +} +.sws-toc li::marker { + content : counters(list-item, '.'); +} + + +/* Control Panel */ +/*****************************************/ + + + +@font-face { + font-family: 'entypo'; + font-style: normal; + font-weight: normal; + src: url('entypo.woff') format('woff'); +} +/* entypo */ +.sws-symbol { + font-family: 'entypo'; +} + +#sws-control-panel-canvas { + position: fixed; + z-index: 100; left: 0pt; - right: 0pt; bottom: 0pt; + width: 100%; + height: 100%; + overflow:hidden; + text-align: center; + display:none; } -body > h1, body > h2, body > h3 { - display: none; +#sws-control-panel { +/* visibility: hidden;*/ + font-size:6vmin; + width: 100vmin; + bottom: 0vh; + display:inline-block; + border-radius: 1vmin; + background-color: white; + opacity: 0.9; + color: black; + z-index: 100; + margin-left: auto; + margin-right:auto; + vertical-align:middle; +} + + +#sws-control-panel-canvas:after{ + content:""; + display:inline-block; + width: 0vmin; + height: 100%; + background:pink; + vertical-align:bottom; +} + +#sws-control-panel-title-bar { + width: 100%; + font-size: 3vmin; + text-align:right; +} + +#sws-control-panel select + { + display: inline-block; + vertical-align: middle; + font-size: 3vmin; + } + +#sws-control-panel-navigation { + text-align: center; } + +#sws-control-panel a { + color: black; + text-decoration: none; + display: inline-block; + padding: 0pt 1em 0pt 1em; + vertical-align: middle; +} + +#sws-control-panel-title-bar a { + padding:0vmin 2vmin 0vmin 0vmin; + margin: 0 0 0 0; +} + +#sws-control-panel a:hover { + cursor: pointer; +} +#sws-control-panel-slide-input +{ + font-size: 3vmin; + width: 3em; + vertical-align:middle; +} +#sws-control-panel-total-slides { + font-size: 3vmin; + vertical-align:middle; +} + +#sws-control-panel-navigation-bar { + width: 50vmin; +} +#sws-print-container { + top: 0; + left: 0; + width: 29.7cm; + overflow: auto; + border: 1px; + padding: 1px 1px 1px 1px; +} + +#sws-help-panel-canvas { + color:white; + background:black; + z-index: 101; + position:fixed; + width:30%; + left:35%; + top:25%; + opacity: 0.9; + border-radius: 1vmin; + display:none; +} +#sws-help-panel-canvas * { + color: white; + font-family: sans; +} +#sws-help-panel-canvas h1 { + font-size: large; +} + +/* embedded SVG images are inlined and their height matches twice the font-size */ +object[type="image/svg+xml"] { + display:inline-block; + font-size:inherit; + height: 2em; + vertical-align:middle; +} \ No newline at end of file