X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=simpleWebSlides.css;h=51ae0871df59d5df3babb237c036f0712ce71d25;hb=564cbcc2c27a723d2bdf12cf690a66eb7f36b813;hp=0a4341842345060b8cbfd6d36a92e5fdda6a373a;hpb=8c3cd44b47743bc0918e35b14e262563589c9da3;p=hacks%2FsimpleWebSlides.git diff --git a/simpleWebSlides.css b/simpleWebSlides.css index 0a43418..51ae087 100644 --- a/simpleWebSlides.css +++ b/simpleWebSlides.css @@ -1,38 +1,104 @@ -/* default is 4:3 */ -@page { margin: 0pt 0pt 0pt 0pt; } +/* Common */ +body { + margin: 0 0 0 0; + padding: 0 0 0 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -moz-box-sizing: border-box; +} -:root.sws-print body { - width: 297mm; - overflow:auto; - padding: 0pt 0pt 0pt 0pt; - margin: 0pt 0pt 0pt 0pt; +.sws-active-object { + visibility: visible; +} +.sws-inactive-object { + 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 */ + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; +} +.sws-cover { + justify-content: center; + -webkit-justify-content: center; + text-align:center; } -:root.sws-print .sws-canvas { +/* Layout of a canvas */ +.sws-header , .sws-title,{ + -webkit-box-align:start; + display:block; +} + +.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; +} + +.sws-content { + margin: 0vh; + padding: 0vh; + display:block; + width: 100%; +} + +.sws-footer{ position: relative; - display:inline-block; - height: 210mm; - page-break-after: auto; - padding: 0pt 0pt 0pt 0pt; - margin: 0pt 0pt 0pt 0pt; - overflow: hidden; + display:block; + bottom: 0pt; + left: 0pt; } -.sws-canvas :last { - page-break-after: avoid; +.sws-header, .sws-title, .sws-inner-canvas, .sws-footer{ + margin: 0 0 0 0; + padding: 0 0 0 0; + width: 100%; +} + + + +body > h1, body > h2, body > h3 { + display: none; +} +/* Display Mode */ +/****************************************/ + + +:root.sws-display body { + overflow:hidden; } :root.sws-display .sws-canvas { width:133.3vh; height:100vh; + overflow:hidden; } + +/* display mode */ +/* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */ + :root.sws-aspect-4-3 .sws-canvas { width:133.3vh; height:100vh; - } + :root.sws-aspect-16-9 .sws-canvas { width:177.7vh; height:100vh; @@ -43,7 +109,6 @@ height:100vh; } - :root.sws-display .sws-canvas { position: relative; margin-left: auto; @@ -53,71 +118,82 @@ margin-bottom: 0vh; } -.sws-active-slide { - display: block; -} - :root.sws-display .sws-inactive-slide { display: none; } - -:root.sws-print .sws-inactive-slide { - opacity: 1; +:root.sws-display body { + background: black; } -.sws-active-object { - visibility: visible; + +/* Print Mode */ +/* ****************************************** */ + + +:root.sws-print body { + background: white; + width: 297mm; + padding: 0pt 0pt 0pt 0pt; + margin: 0pt 0pt 0pt 0pt; + } +@media print { + @page { + size: 297mm 210mm; + margin: 0pt; + padding: 0pt; -@media screen { - .sws-inactive-object { - visibility: hidden; - } } -.sws-header, .sws-title, .sws-inner-canvas, .sws-footer { - position: absolute; - width: 100%; - display:inline-block; - padding: 0vh; - margin: 0vh; - border: 0vh; +:root.sws-print .sws-canvas { + position: relative; + width: 297mm; + height: 209mm; + /* not 210mm to avoid rounding errors */ + page-break-after: always; + padding: 0pt 0pt 0pt 0pt; + margin: 0pt 0pt 0pt 0pt; + overflow: hidden; } -.sws-title { - vertical-align:middle; + +:root.sws-print .sws-canvas:last { + page-break-after: avoid; } -.sws-inner-canvas { - /* white-space: nowrap;*/ } -.sws-content { - margin: 0vh; - padding: 0vh; - display:inline-block; - width: 100%; - vertical-align: middle; - max-height: 100%; - overflow:hidden; +:root.sws-print .sws-inactive-slide { + opacity: 1; } -.sws-vertical-align { - display:inline-block; - height: 33%; - width: 0%; - vertical-align:text-bottom; + + +p { width: 100%; } + +/* counters for the toc */ + +.sws-toc ul { + counter-reset: list-item; } +.sws-toc li { + counter-increment: list-item; -body > h1, body > h2, body > h3 { - display: none; } +.sws-toc li::marker { + content : counters(list-item, '.'); +} + + +/* Control Panel */ +/*****************************************/ + + @font-face { font-family: 'entypo'; - font-style: 'normal'; - font-weight: 'normal'; + font-style: normal; + font-weight: normal; src: url('entypo.woff') format('woff'); } - /* entypo */ .sws-symbol { font-family: 'entypo'; @@ -134,6 +210,7 @@ body > h1, body > h2, body > h3 { text-align: center; display:none; } + #sws-control-panel { /* visibility: hidden;*/ font-size:6vh; @@ -180,8 +257,8 @@ body > h1, body > h2, body > h3 { #sws-control-panel a { color: black; text-decoration: none; - display:inline-block; - padding:0pt 1em; 0pt 1em; + display: inline-block; + padding: 0pt 1em 0pt 1em; vertical-align: middle; } @@ -214,4 +291,32 @@ body > h1, body > h2, body > h3 { 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: 1vh; + 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 size of a small letter x */ +object[type="image/svg+xml"] { + display:inline-block; + font-size:inherit; + height: 2.5ex; + vertical-align:middle; } \ No newline at end of file