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