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     justify-content: center;
  18     flex-direction:column;
  19     box-sizing: border-box;
  20 }
  21
  22 .sws-cover .sws-content {
  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:block;
  49     margin:0;
  50     padding:0;
  51     width: 100%;
  52     box-sizing: border-box;
  53     overflow:hidden;
  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: 3.5vh;
  75 }
  76 :root.sws-by-height.sws-aspect-4-3 body {
  77     font-size: 2.625vw;
  78 }
  79 :root.sws-by-height.sws-aspect-16-9 body {
  80     font-size: 1.96875vw;
  81 }
  82 :root.sws-by-height.sws-aspect-16-10 body {
  83     font-size: 2.1875vw;
  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 :root.sws-print body {
 146     background: white;
 147     width: 297mm;
 148     padding: 0;
 149     margin: 0;
 150     font-size: 21pt;
 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     width: 297mm;
 164     height: 210mm;
 165     /* not 210mm to avoid rounding errors */
 166     page-break-after: always;
 167     padding: 0pt 0pt 0pt 0pt;
 168     margin: 0pt 0pt 0pt 0pt;
 169 }
 170
 171 :root.sws-print .sws-canvas:last {
 172     page-break-after: avoid;
 173 }
 174 }
 175 :root.sws-print .sws-inactive-slide {
 176     opacity: 1;
 177 }
 178
 179 p { width: 100%; }
 180
 181 /* counters for the toc */
 182
 183 .sws-toc ul {
 184     counter-reset: list-item;
 185 }
 186
 187 .sws-toc li {
 188     counter-increment: list-item;
 189
 190 }
 191 .sws-toc li::marker {
 192     content : counters(list-item, '.');
 193 }
 194
 195
 196 /*             Control Panel             */
 197 /*****************************************/
 198
 199
 200
 201 @font-face {
 202   font-family: 'entypo';
 203   font-style: normal;
 204   font-weight: normal;
 205   src: url('entypo.woff') format('woff');
 206 }
 207 /* entypo */
 208 .sws-symbol {
 209     font-family: 'entypo';
 210 }
 211
 212 #sws-control-panel-canvas {
 213     position: fixed;
 214     z-index: 100;
 215     left: 0pt;
 216     bottom: 0pt;
 217     width: 100%;
 218     height: 100%;
 219     overflow:hidden;
 220     text-align: center;
 221     display:none;
 222 }
 223
 224 #sws-control-panel {
 225 /*    visibility: hidden;*/
 226     font-size:6vmin;
 227     width: 100vmin;
 228     bottom: 0vh;
 229     display:inline-block;
 230     border-radius: 1vmin;
 231     background-color: white;
 232     opacity: 0.9;
 233     color: black;
 234     z-index: 100;
 235     margin-left: auto;
 236     margin-right:auto;
 237     vertical-align:middle;
 238 }
 239
 240
 241 #sws-control-panel-canvas:after{
 242     content:"";
 243     display:inline-block;
 244     width: 0vmin;
 245     height: 100%;
 246     background:pink;
 247     vertical-align:bottom;
 248 }
 249
 250 #sws-control-panel-title-bar {
 251     width: 100%;
 252     font-size: 3vmin;
 253     text-align:right;
 254 }
 255
 256 #sws-control-panel select
 257  {
 258      display: inline-block;
 259      vertical-align: middle;
 260      font-size: 3vmin;
 261  }
 262
 263 #sws-control-panel-navigation {
 264     text-align: center;
 265 }
 266
 267 #sws-control-panel a {
 268     color: black;
 269     text-decoration: none;
 270     display: inline-block;
 271     padding: 0pt 1em 0pt 1em;
 272     vertical-align: middle;
 273 }
 274
 275 #sws-control-panel-title-bar a {
 276     padding:0vmin 2vmin 0vmin 0vmin;
 277     margin: 0 0 0 0;
 278 }
 279
 280 #sws-control-panel a:hover {
 281     cursor: pointer;
 282 }
 283 #sws-control-panel-slide-input
 284 {
 285     font-size: 3vmin;
 286     width: 3em;
 287     vertical-align:middle;
 288 }
 289 #sws-control-panel-total-slides {
 290     font-size: 3vmin;
 291     vertical-align:middle;
 292 }
 293
 294 #sws-control-panel-navigation-bar {
 295     width: 50vmin;
 296 }
 297 #sws-print-container {
 298     top: 0;
 299     left: 0;
 300     width: 29.7cm;
 301     overflow: auto;
 302     border: 1px;
 303     padding: 1px 1px 1px 1px;
 304 }
 305
 306 #sws-help-panel-canvas {
 307     color:white;
 308     background:black;
 309     z-index: 101;
 310     position:fixed;
 311     width:30%;
 312     left:35%;
 313     top:25%;
 314     opacity: 0.9;
 315     border-radius: 1vmin;
 316     display:none;
 317 }
 318 #sws-help-panel-canvas * {
 319     color: white;
 320     font-family: sans;
 321 }
 322 #sws-help-panel-canvas h1 {
 323     font-size: large;
 324 }
 325
 326 /* embedded SVG images are inlined and their height matches twice the font-size */
 327 object[type="image/svg+xml"] {
 328     display:inline-block;
 329     font-size:inherit;
 330     height: 2em;
 331     vertical-align:middle;
 332 }