simpleWebSlides.css

   1
   2 /*         Common           */
   3 body {
   4     margin: 0 0 0 0;
   5     padding: 0 0 0 0;
   6     overflow:hidden;
   7     -webkit-box-sizing: border-box;
   8     box-sizing: border-box;
   9     -moz-box-sizing: border-box;
  10 }
  11
  12 .sws-active-slide {
  13     display: block;
  14 }
  15 .sws-active-object {
  16     visibility: visible;
  17 }
  18 .sws-inactive-object {
  19         visibility: hidden;
  20 }
  21
  22
  23 .sws-canvas {
  24     display: -webkit-flex;
  25     display: flex;
  26     flex-direction: column;
  27     -webkit-flex-direction: column;
  28     /* We make the box sizing border-box so that the user can freely add
  29        padding and borders to canvas without changing the overall
  30        layout */
  31     -webkit-box-sizing: border-box;
  32     box-sizing: border-box;
  33     -moz-box-sizing: border-box;
  34 }
  35
  36 .sws-cover {
  37     justify-content: center;
  38     -webkit-justify-content: center;
  39     text-align:center;
  40 }
  41
  42 /* Layout of a canvas */
  43 .sws-header , .sws-title,{
  44     -webkit-box-align:start;
  45     display:block;
  46 }
  47
  48 .sws-inner-canvas {
  49     top-margin: auto;
  50     bottom-margin: auto;
  51     display:flex;
  52     display:-webkit-flex;
  53     flex: 3;
  54     -webkit-flex: 3;
  55     flex-direction: column;
  56     -webkit-flex-direction: column;
  57     justify-content: center;
  58     -webkit-justify-content:center;
  59 }
  60
  61 .sws-content {
  62     margin: 0vh;
  63     padding: 0vh;
  64     display:block;
  65     width: 100%;
  66 }
  67
  68 .sws-footer{
  69     display:block;
  70 }
  71
  72 .sws-header, .sws-title, .sws-inner-canvas, .sws-footer{
  73     margin: 0 0 0 0;
  74     padding: 0 0 0 0;
  75     width: 100%;
  76 }
  77
  78
  79
  80 body > h1, body > h2, body > h3 {
  81     display: none;
  82 }
  83 /*             Display Mode             */
  84 /****************************************/
  85
  86
  87
  88 :root.sws-display .sws-canvas {
  89     width:133.3vh;
  90     height:100vh;
  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 @page { margin: 0pt 0pt 0pt 0pt; }
 133
 134 :root.sws-print body {
 135     background: white;
 136 }
 137
 138 :root.sws-print body {
 139     width: 297mm;
 140     height: 210mm;
 141     overflow:hidden;
 142     padding: 0pt 0pt 0pt 0pt;
 143     margin: 0pt 0pt 0pt 0pt;
 144
 145 }
 146
 147 :root.sws-print .sws-canvas {
 148     position: relative;
 149     width: 297mm;
 150     height: 210mm;
 151     clear:both;
 152     float:left;
 153     page-break-after: always;
 154     padding: 0pt 0pt 0pt 0pt;
 155     margin: 0pt 0pt 0pt 0pt;
 156     overflow: hidden;
 157 }
 158
 159 :root.sws-print .sws-canvas:last{
 160     page-break-after: avoid;
 161 }
 162 :root.sws-print .sws-inactive-slide {
 163     opacity: 1;
 164 }
 165
 166
 167 p { width: 100%; }
 168
 169
 170
 171 /*             Control Panel             */
 172 /*****************************************/
 173
 174
 175
 176 @font-face {
 177   font-family: 'entypo';
 178   font-style: normal;
 179   font-weight: normal;
 180   src: url('entypo.woff') format('woff');
 181 }
 182 /* entypo */
 183 .sws-symbol {
 184     font-family: 'entypo';
 185 }
 186
 187 #sws-control-panel-canvas {
 188     position: fixed;
 189     z-index: 100;
 190     left: 0pt;
 191     bottom: 0pt;
 192     width: 100%;
 193     height: 100%;
 194     overflow:hidden;
 195     text-align: center;
 196     display:none;
 197 }
 198
 199 #sws-control-panel {
 200 /*    visibility: hidden;*/
 201     font-size:6vh;
 202     width: 100vh;
 203     bottom: 0vh;
 204     display:inline-block;
 205     border-radius: 1vh;
 206     background-color: white;
 207     opacity: 0.9;
 208     color: black;
 209     z-index: 100;
 210     margin-left: auto;
 211     margin-right:auto;
 212     vertical-align:middle;
 213 }
 214
 215
 216 #sws-control-panel-canvas:after{
 217     content:"";
 218     display:inline-block;
 219     width: 0vh;
 220     height: 100%;
 221     background:pink;
 222     vertical-align:bottom;
 223 }
 224
 225 #sws-control-panel-title-bar {
 226     width: 100%;
 227     font-size: 3vh;
 228     text-align:right;
 229 }
 230
 231 #sws-control-panel select
 232  {
 233      display: inline-block;
 234      vertical-align: middle;
 235      font-size: 3vh;
 236  }
 237
 238 #sws-control-panel-navigation {
 239     text-align: center;
 240 }
 241
 242 #sws-control-panel a {
 243     color: black;
 244     text-decoration: none;
 245     display: inline-block;
 246     padding: 0pt 1em 0pt 1em;
 247     vertical-align: middle;
 248 }
 249
 250 #sws-control-panel-title-bar a {
 251     padding:0vh 2vh 0vh 0vh;
 252     margin: 0 0 0 0;
 253 }
 254
 255 #sws-control-panel a:hover {
 256     cursor: pointer;
 257 }
 258 #sws-control-panel-slide-input
 259 {
 260     font-size: 3vh;
 261     width: 3em;
 262     vertical-align:middle;
 263 }
 264 #sws-control-panel-total-slides {
 265     font-size: 3vh;
 266     vertical-align:middle;
 267 }
 268
 269 #sws-control-panel-navigation-bar {
 270     width: 50vh;
 271 }
 272 #sws-print-container {
 273     top: 0;
 274     left: 0;
 275     width: 29.7cm;
 276     overflow: auto;
 277     border: 1px;
 278     padding: 1px 1px 1px 1px;
 279 }