simpleWebSlides.css

   1 /*         Common           */
   2 body {
   3     margin:0;
   4     padding:0;
   5     box-sizing: border-box;
   6 }
   7
   8 .sws-active-object {
   9     visibility: visible;
  10 }
  11 .sws-inactive-object {
  12     opacity: 0;
  13 }
  14
  15 .sws-canvas {
  16     box-sizing: border-box;
  17     text-align: center;
  18     vertical-align:middle;
  19 }
  20 .sws-cover {
  21     justify-content: center;
  22     -webkit-justify-content: center;
  23     text-align:center;
  24 }
  25
  26 /* Layout of a canvas */
  27 .sws-header , .sws-title,{
  28     height:5%;
  29 }
  30
  31 .sws-inner-canvas {
  32     height: 80%;
  33     text-align: justify;
  34 }
  35
  36 .sws-content {
  37     margin: 0;
  38     padding: 0;
  39     display: block;
  40     box-sizing: border-box;
  41 }
  42
  43 .sws-footer{
  44     height: 10%;
  45 }
  46
  47 .sws-header, .sws-title, .sws-inner-canvas, .sws-footer{
  48     display:inline-block;
  49     margin:0;
  50     padding:0;
  51     width: 100%;
  52     box-sizing: border-box;
  53 }
  54
  55
  56
  57 body > h1, body > h2, body > h3, body > a.sws-previous {
  58     display: none;
  59 }
  60 /*             Display Mode             */
  61 /****************************************/
  62
  63
  64
  65 /* display mode */
  66 /* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */
  67 :root.sws-display .sws-canvas {
  68     max-width: 100vw;
  69     max-height: 100vh;
  70     overflow:hidden;
  71
  72 }
  73
  74
  75 :root.sws-by-width.sws-aspect-4-3 .sws-canvas {
  76     width:133.3vh;
  77     height:100vh;
  78 }
  79
  80 :root.sws-by-width.sws-aspect-16-9 .sws-canvas {
  81     width:177.7vh;
  82     height:100vh;
  83 }
  84
  85 :root.sws-by-width.sws-aspect-16-10 .sws-canvas {
  86     width:160vh;
  87     height:100vh;
  88 }
  89
  90 :root.sws-by-height.sws-aspect-4-3 .sws-canvas {
  91     width:100vw;
  92     height:75vw;
  93 }
  94
  95 :root.sws-by-height.sws-aspect-16-9 .sws-canvas {
  96     width:100vw;
  97     height:56.25vw;
  98 }
  99
 100 :root.sws-by-height.sws-aspect-16-10 .sws-canvas {
 101     width:100vw;
 102     height:62.5vw;
 103 }
 104
 105 :root.sws-display body::after{
 106     display:inline-block;
 107     height:100vh;
 108     width:0;
 109     content: "";
 110     vertical-align:middle;
 111
 112 }
 113
 114 :root.sws-display .sws-canvas {
 115     display:inline-block;
 116     padding: 0;
 117     max-width: 100vw;
 118 }
 119
 120 :root.sws-display .sws-inactive-slide {
 121     display: none;
 122 }
 123
 124 :root.sws-display body {
 125     background: black;
 126     overflow: hidden;
 127     text-align:center;
 128 }
 129
 130
 131 /*                 Print Mode                 */
 132 /* ****************************************** */
 133
 134
 135 :root.sws-print body {
 136     background: white;
 137     width: 297mm;
 138     padding: 0pt 0pt 0pt 0pt;
 139     margin: 0pt 0pt 0pt 0pt;
 140
 141 }
 142 @media print {
 143
 144     @page {
 145         size: 297mm 210mm;
 146         margin: 0;
 147         padding: 0;
 148
 149 }
 150
 151 :root.sws-print .sws-canvas {
 152     position: relative;
 153     width: 297mm;
 154     height: 209mm;
 155     /* not 210mm to avoid rounding errors */
 156     page-break-after: always;
 157     padding: 0pt 0pt 0pt 0pt;
 158     margin: 0pt 0pt 0pt 0pt;
 159     overflow: hidden;
 160 }
 161
 162 :root.sws-print .sws-canvas:last {
 163     page-break-after: avoid;
 164 }
 165 }
 166 :root.sws-print .sws-inactive-slide {
 167     opacity: 1;
 168 }
 169
 170
 171 p { width: 100%; }
 172
 173 /* counters for the toc */
 174
 175 .sws-toc ul {
 176     counter-reset: list-item;
 177 }
 178
 179 .sws-toc li {
 180     counter-increment: list-item;
 181
 182 }
 183 .sws-toc li::marker {
 184     content : counters(list-item, '.');
 185 }
 186
 187
 188 /*             Control Panel             */
 189 /*****************************************/
 190
 191
 192
 193 @font-face {
 194   font-family: 'entypo';
 195   font-style: normal;
 196   font-weight: normal;
 197   src: url('entypo.woff') format('woff');
 198 }
 199 /* entypo */
 200 .sws-symbol {
 201     font-family: 'entypo';
 202 }
 203
 204 #sws-control-panel-canvas {
 205     position: fixed;
 206     z-index: 100;
 207     left: 0pt;
 208     bottom: 0pt;
 209     width: 100%;
 210     height: 100%;
 211     overflow:hidden;
 212     text-align: center;
 213     display:none;
 214 }
 215
 216 #sws-control-panel {
 217 /*    visibility: hidden;*/
 218     font-size:6vmin;
 219     width: 100vmin;
 220     bottom: 0vh;
 221     display:inline-block;
 222     border-radius: 1vmin;
 223     background-color: white;
 224     opacity: 0.9;
 225     color: black;
 226     z-index: 100;
 227     margin-left: auto;
 228     margin-right:auto;
 229     vertical-align:middle;
 230 }
 231
 232
 233 #sws-control-panel-canvas:after{
 234     content:"";
 235     display:inline-block;
 236     width: 0vmin;
 237     height: 100%;
 238     background:pink;
 239     vertical-align:bottom;
 240 }
 241
 242 #sws-control-panel-title-bar {
 243     width: 100%;
 244     font-size: 3vmin;
 245     text-align:right;
 246 }
 247
 248 #sws-control-panel select
 249  {
 250      display: inline-block;
 251      vertical-align: middle;
 252      font-size: 3vmin;
 253  }
 254
 255 #sws-control-panel-navigation {
 256     text-align: center;
 257 }
 258
 259 #sws-control-panel a {
 260     color: black;
 261     text-decoration: none;
 262     display: inline-block;
 263     padding: 0pt 1em 0pt 1em;
 264     vertical-align: middle;
 265 }
 266
 267 #sws-control-panel-title-bar a {
 268     padding:0vmin 2vmin 0vmin 0vmin;
 269     margin: 0 0 0 0;
 270 }
 271
 272 #sws-control-panel a:hover {
 273     cursor: pointer;
 274 }
 275 #sws-control-panel-slide-input
 276 {
 277     font-size: 3vmin;
 278     width: 3em;
 279     vertical-align:middle;
 280 }
 281 #sws-control-panel-total-slides {
 282     font-size: 3vmin;
 283     vertical-align:middle;
 284 }
 285
 286 #sws-control-panel-navigation-bar {
 287     width: 50vmin;
 288 }
 289 #sws-print-container {
 290     top: 0;
 291     left: 0;
 292     width: 29.7cm;
 293     overflow: auto;
 294     border: 1px;
 295     padding: 1px 1px 1px 1px;
 296 }
 297
 298 #sws-help-panel-canvas {
 299     color:white;
 300     background:black;
 301     z-index: 101;
 302     position:fixed;
 303     width:30%;
 304     left:35%;
 305     top:25%;
 306     opacity: 0.9;
 307     border-radius: 1vmin;
 308     display:none;
 309 }
 310 #sws-help-panel-canvas * {
 311     color: white;
 312     font-family: sans;
 313 }
 314 #sws-help-panel-canvas h1 {
 315     font-size: large;
 316 }
 317
 318 /* embedded SVG images are inlined and their height matches twice the size of a small letter x */
 319 object[type="image/svg+xml"] {
 320     display:inline-block;
 321     font-size:inherit;
 322     height: 2.5ex;
 323     vertical-align:middle;
 324 }