simpleWebSlides.css

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