simpleWebSlides.css

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