X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=simpleWebSlides.css;h=c2c72b72dcd254c52e0961f8180fcebcb350acff;hb=HEAD;hp=7bacd83696eef1e36aff15627e028f237fcf0076;hpb=a03a60eccb6d035b1ccc7c9dc53c7b03abd48dc6;p=hacks%2FsimpleWebSlides.git diff --git a/simpleWebSlides.css b/simpleWebSlides.css index 7bacd83..c2c72b7 100644 --- a/simpleWebSlides.css +++ b/simpleWebSlides.css @@ -1,11 +1,8 @@ - /* Common */ body { - margin: 0 0 0 0; - padding: 0 0 0 0; - -webkit-box-sizing: border-box; + margin:0; + padding:0; box-sizing: border-box; - -moz-box-sizing: border-box; } .sws-active-object { @@ -15,156 +12,170 @@ body { opacity: 0; } - .sws-canvas { - display: -webkit-flex; - display: flex; - flex-direction: column; - -webkit-flex-direction: column; - /* We make the box sizing border-box so that the user can freely add - padding and borders to canvas without changing the overall - layout */ - -webkit-box-sizing: border-box; + display:flex; + justify-content: center; + flex-direction:column; box-sizing: border-box; - -moz-box-sizing: border-box; } -.sws-cover { - justify-content: center; - -webkit-justify-content: center; +.sws-cover .sws-content { text-align:center; } /* Layout of a canvas */ .sws-header , .sws-title,{ - -webkit-box-align:start; - display:block; + height:5%; } .sws-inner-canvas { - top-margin: auto; - bottom-margin: auto; - display:flex; - display:-webkit-flex; - flex: 3; - -webkit-flex: 3; - flex-direction: column; - -webkit-flex-direction: column; - justify-content: center; - -webkit-justify-content:center; + height: 80%; + text-align: justify; } .sws-content { - margin: 0vh; - padding: 0vh; - display:block; - width: 100%; + margin: 0; + padding: 0; + display: block; + box-sizing: border-box; } .sws-footer{ - position: relative; - display:block; - bottom: 0pt; - left: 0pt; + height: 10%; } .sws-header, .sws-title, .sws-inner-canvas, .sws-footer{ - margin: 0 0 0 0; - padding: 0 0 0 0; + display:block; + margin:0; + padding:0; width: 100%; + box-sizing: border-box; + overflow:hidden; } - - -body > h1, body > h2, body > h3 { +body > h1, body > h2, body > h3, body > a.sws-previous { display: none; } /* Display Mode */ /****************************************/ -:root.sws-display body { - overflow:hidden; -} +/* display mode */ +/* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */ :root.sws-display .sws-canvas { - width:133.3vh; - height:100vh; -} + max-width: 100vw; + max-height: 100vh; + overflow:hidden; +} -/* display mode */ -/* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */ +: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-aspect-4-3 .sws-canvas { - width:133.3vh; - height:100vh; +:root.sws-by-width.sws-aspect-4-3 .sws-canvas { + width:133.3vh; + height:100vh; } -:root.sws-aspect-16-9 .sws-canvas { +:root.sws-by-width.sws-aspect-16-9 .sws-canvas { width:177.7vh; height:100vh; } -:root.sws-aspect-16-10 .sws-canvas { +: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 { - position: relative; - margin-left: auto; - margin-right: auto; - padding: 0vh; - margin-top: 0vh; - margin-bottom: 0vh; + 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 */ /* ****************************************** */ -@page { margin: 0pt 0pt 0pt 0pt; } - :root.sws-print body { background: white; + width: 297mm; + padding: 0; + margin: 0; + font-size: 21pt; } -:root.sws-print body { - width: 297mm; - height: 210mm; - padding: 0pt 0pt 0pt 0pt; - margin: 0pt 0pt 0pt 0pt; +@media print { + + @page { + size: 297mm 210mm; + margin: 0; + padding: 0; } :root.sws-print .sws-canvas { - position: relative; width: 297mm; height: 210mm; - clear:both; - float:left; + /* not 210mm to avoid rounding errors */ page-break-after: always; padding: 0pt 0pt 0pt 0pt; margin: 0pt 0pt 0pt 0pt; - overflow: hidden; } -:root.sws-print .sws-canvas:last{ +: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 */ @@ -212,11 +223,11 @@ p { width: 100%; } #sws-control-panel { /* visibility: hidden;*/ - font-size:6vh; - width: 100vh; + font-size:6vmin; + width: 100vmin; bottom: 0vh; display:inline-block; - border-radius: 1vh; + border-radius: 1vmin; background-color: white; opacity: 0.9; color: black; @@ -230,7 +241,7 @@ p { width: 100%; } #sws-control-panel-canvas:after{ content:""; display:inline-block; - width: 0vh; + width: 0vmin; height: 100%; background:pink; vertical-align:bottom; @@ -238,7 +249,7 @@ p { width: 100%; } #sws-control-panel-title-bar { width: 100%; - font-size: 3vh; + font-size: 3vmin; text-align:right; } @@ -246,7 +257,7 @@ p { width: 100%; } { display: inline-block; vertical-align: middle; - font-size: 3vh; + font-size: 3vmin; } #sws-control-panel-navigation { @@ -262,7 +273,7 @@ p { width: 100%; } } #sws-control-panel-title-bar a { - padding:0vh 2vh 0vh 0vh; + padding:0vmin 2vmin 0vmin 0vmin; margin: 0 0 0 0; } @@ -271,17 +282,17 @@ p { width: 100%; } } #sws-control-panel-slide-input { - font-size: 3vh; + font-size: 3vmin; width: 3em; vertical-align:middle; } #sws-control-panel-total-slides { - font-size: 3vh; + font-size: 3vmin; vertical-align:middle; } #sws-control-panel-navigation-bar { - width: 50vh; + width: 50vmin; } #sws-print-container { top: 0; @@ -301,7 +312,7 @@ p { width: 100%; } left:35%; top:25%; opacity: 0.9; - border-radius: 1vh; + border-radius: 1vmin; display:none; } #sws-help-panel-canvas * { @@ -310,4 +321,12 @@ p { width: 100%; } } #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