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