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