GoPLS Viewer

Home|gopls/cmd/present/static/styles.css
1@media screen {
2  /* Framework */
3  html {
4    height: 100%;
5  }
6
7  body {
8    margin: 0;
9    padding: 0;
10
11    display: block !important;
12
13    height: 100%;
14    height: 100vh;
15
16    overflow: hidden;
17
18    background: rgb(215, 215, 215);
19    background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
20    background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
21    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
22    background: -webkit-gradient(
23      radial,
24      50% 50%,
25      0,
26      50% 50%,
27      500,
28      from(rgb(240, 240, 240)),
29      to(rgb(190, 190, 190))
30    );
31
32    -webkit-font-smoothing: antialiased;
33  }
34
35  .slides {
36    width: 100%;
37    height: 100%;
38    left: 0;
39    top: 0;
40
41    position: absolute;
42
43    -webkit-transform: translate3d(0, 0, 0);
44  }
45
46  .slides > article {
47    display: block;
48
49    position: absolute;
50    overflow: hidden;
51
52    width: 900px;
53    height: 700px;
54
55    left: 50%;
56    top: 50%;
57
58    margin-left: -450px;
59    margin-top: -350px;
60
61    padding: 40px 60px;
62
63    box-sizing: border-box;
64    -o-box-sizing: border-box;
65    -moz-box-sizing: border-box;
66    -webkit-box-sizing: border-box;
67
68    border-radius: 10px;
69    -o-border-radius: 10px;
70    -moz-border-radius: 10px;
71    -webkit-border-radius: 10px;
72
73    background-color: white;
74
75    border: 1px solid rgba(0, 0, 0, 0.3);
76
77    transition: transform 0.3s ease-out;
78    -o-transition: -o-transform 0.3s ease-out;
79    -moz-transition: -moz-transform 0.3s ease-out;
80    -webkit-transition: -webkit-transform 0.3s ease-out;
81  }
82  .slides.layout-widescreen > article {
83    margin-left: -550px;
84    width: 1100px;
85  }
86  .slides.layout-faux-widescreen > article {
87    margin-left: -550px;
88    width: 1100px;
89
90    padding: 40px 160px;
91  }
92
93  .slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
94  .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
95    background-position-x: 0, 840px;
96  }
97
98  /* Clickable/tappable areas */
99
100  .slide-area {
101    z-index: 1000;
102
103    position: absolute;
104    left: 0;
105    top: 0;
106    width: 150px;
107    height: 700px;
108
109    left: 50%;
110    top: 50%;
111
112    cursor: pointer;
113    margin-top: -350px;
114
115    tap-highlight-color: transparent;
116    -o-tap-highlight-color: transparent;
117    -moz-tap-highlight-color: transparent;
118    -webkit-tap-highlight-color: transparent;
119  }
120  #prev-slide-area {
121    margin-left: -550px;
122  }
123  #next-slide-area {
124    margin-left: 400px;
125  }
126  .slides.layout-widescreen #prev-slide-area,
127  .slides.layout-faux-widescreen #prev-slide-area {
128    margin-left: -650px;
129  }
130  .slides.layout-widescreen #next-slide-area,
131  .slides.layout-faux-widescreen #next-slide-area {
132    margin-left: 500px;
133  }
134
135  /* Slides */
136
137  .slides > article {
138    display: none;
139  }
140  .slides > article.far-past {
141    display: block;
142    transform: translate(-2040px);
143    -o-transform: translate(-2040px);
144    -moz-transform: translate(-2040px);
145    -webkit-transform: translate3d(-2040px, 0, 0);
146  }
147  .slides > article.past {
148    display: block;
149    transform: translate(-1020px);
150    -o-transform: translate(-1020px);
151    -moz-transform: translate(-1020px);
152    -webkit-transform: translate3d(-1020px, 0, 0);
153  }
154  .slides > article.current {
155    display: block;
156    transform: translate(0);
157    -o-transform: translate(0);
158    -moz-transform: translate(0);
159    -webkit-transform: translate3d(0, 0, 0);
160  }
161  .slides > article.next {
162    display: block;
163    transform: translate(1020px);
164    -o-transform: translate(1020px);
165    -moz-transform: translate(1020px);
166    -webkit-transform: translate3d(1020px, 0, 0);
167  }
168  .slides > article.far-next {
169    display: block;
170    transform: translate(2040px);
171    -o-transform: translate(2040px);
172    -moz-transform: translate(2040px);
173    -webkit-transform: translate3d(2040px, 0, 0);
174  }
175
176  .slides.layout-widescreen > article.far-past,
177  .slides.layout-faux-widescreen > article.far-past {
178    display: block;
179    transform: translate(-2260px);
180    -o-transform: translate(-2260px);
181    -moz-transform: translate(-2260px);
182    -webkit-transform: translate3d(-2260px, 0, 0);
183  }
184  .slides.layout-widescreen > article.past,
185  .slides.layout-faux-widescreen > article.past {
186    display: block;
187    transform: translate(-1130px);
188    -o-transform: translate(-1130px);
189    -moz-transform: translate(-1130px);
190    -webkit-transform: translate3d(-1130px, 0, 0);
191  }
192  .slides.layout-widescreen > article.current,
193  .slides.layout-faux-widescreen > article.current {
194    display: block;
195    transform: translate(0);
196    -o-transform: translate(0);
197    -moz-transform: translate(0);
198    -webkit-transform: translate3d(0, 0, 0);
199  }
200  .slides.layout-widescreen > article.next,
201  .slides.layout-faux-widescreen > article.next {
202    display: block;
203    transform: translate(1130px);
204    -o-transform: translate(1130px);
205    -moz-transform: translate(1130px);
206    -webkit-transform: translate3d(1130px, 0, 0);
207  }
208  .slides.layout-widescreen > article.far-next,
209  .slides.layout-faux-widescreen > article.far-next {
210    display: block;
211    transform: translate(2260px);
212    -o-transform: translate(2260px);
213    -moz-transform: translate(2260px);
214    -webkit-transform: translate3d(2260px, 0, 0);
215  }
216}
217
218@media print {
219  /* Set page layout */
220  @page {
221    size: A4 landscape;
222  }
223
224  body {
225    display: block !important;
226  }
227
228  .slides > article {
229    display: block;
230
231    position: relative;
232
233    page-break-inside: never;
234    page-break-after: always;
235
236    overflow: hidden;
237  }
238
239  h2 {
240    position: static !important;
241    margin-top: 400px !important;
242    margin-bottom: 100px !important;
243  }
244
245  div.code {
246    background: rgb(240, 240, 240);
247  }
248
249  /* Add explicit links */
250  a:link:after,
251  a:visited:after {
252    content: ' (' attr(href) ') ';
253    font-size: 50%;
254  }
255
256  #help {
257    display: none;
258    visibility: hidden;
259  }
260}
261
262/* Styles for slides */
263
264.slides > article {
265  font-family: 'Open Sans', Arial, sans-serif;
266
267  color: black;
268  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
269
270  font-size: 26px;
271  line-height: 36px;
272
273  letter-spacing: -1px;
274}
275
276b {
277  font-weight: 600;
278}
279
280a {
281  color: rgb(0, 102, 204);
282  text-decoration: none;
283}
284a:visited {
285  color: rgba(0, 102, 204, 0.75);
286}
287a:hover {
288  color: black;
289}
290
291p {
292  margin: 0;
293  padding: 0;
294
295  margin-top: 20px;
296}
297p:first-child {
298  margin-top: 0;
299}
300
301h1 {
302  font-size: 60px;
303  line-height: 60px;
304
305  padding: 0;
306  margin: 0;
307  margin-top: 200px;
308  margin-bottom: 5px;
309  padding-right: 40px;
310
311  font-weight: 600;
312
313  letter-spacing: -3px;
314
315  color: rgb(51, 51, 51);
316}
317
318h2 {
319  font-size: 45px;
320  line-height: 45px;
321
322  position: absolute;
323  bottom: 150px;
324
325  padding: 0;
326  margin: 0;
327  padding-right: 40px;
328
329  font-weight: 600;
330
331  letter-spacing: -2px;
332
333  color: rgb(51, 51, 51);
334}
335
336h3 {
337  font-size: 30px;
338  line-height: 36px;
339
340  padding: 0;
341  margin: 0;
342  padding-right: 40px;
343
344  font-weight: 600;
345
346  letter-spacing: -1px;
347
348  color: rgb(51, 51, 51);
349}
350
351ul {
352  margin: 0;
353  padding: 0;
354  margin-top: 20px;
355  margin-left: 1.5em;
356}
357li {
358  padding: 0;
359  margin: 0 0 0.5em 0;
360}
361
362div.code {
363  padding: 5px 10px;
364  margin-top: 20px;
365  margin-bottom: 20px;
366  overflow: hidden;
367
368  background: rgb(240, 240, 240);
369  border: 1px solid rgb(224, 224, 224);
370}
371pre {
372  margin: 0;
373  padding: 0;
374
375  font-family: 'Droid Sans Mono', 'Courier New', monospace;
376  font-size: 18px;
377  line-height: 24px;
378  letter-spacing: -1px;
379
380  color: black;
381}
382
383pre.numbers span:before {
384  content: attr(num);
385  margin-right: 1em;
386  display: inline-block;
387}
388
389code {
390  font-size: 95%;
391  font-family: 'Droid Sans Mono', 'Courier New', monospace;
392
393  color: black;
394}
395
396article > .image,
397article > .video {
398  text-align: center;
399  margin-top: 40px;
400}
401
402article.background {
403  background-size: contain;
404  background-repeat: round;
405}
406
407table {
408  width: 100%;
409  border-collapse: collapse;
410  margin-top: 40px;
411}
412th {
413  font-weight: 600;
414  text-align: left;
415}
416td,
417th {
418  border: 1px solid rgb(224, 224, 224);
419  padding: 5px 10px;
420  vertical-align: top;
421}
422
423p.link {
424  margin-left: 20px;
425}
426
427.pagenumber {
428  color: #8c8c8c;
429  font-size: 75%;
430  position: absolute;
431  bottom: 0px;
432  right: 10px;
433}
434
435/* Code */
436div.code {
437  outline: 0px solid transparent;
438}
439div.playground {
440  position: relative;
441}
442div.output {
443  position: absolute;
444  left: 50%;
445  top: 50%;
446  right: 40px;
447  bottom: 40px;
448  background: #202020;
449  padding: 5px 10px;
450  z-index: 2;
451
452  border-radius: 10px;
453  -o-border-radius: 10px;
454  -moz-border-radius: 10px;
455  -webkit-border-radius: 10px;
456}
457div.output pre {
458  margin: 0;
459  padding: 0;
460  background: none;
461  border: none;
462  width: 100%;
463  height: 100%;
464  overflow: auto;
465}
466div.output .stdout,
467div.output pre {
468  color: #e6e6e6;
469}
470div.output .stderr,
471div.output .error {
472  color: rgb(255, 200, 200);
473}
474div.output .system,
475div.output .exit {
476  color: rgb(255, 230, 120);
477}
478.buttons {
479  position: relative;
480  float: right;
481  top: -60px;
482  right: 10px;
483}
484div.output .buttons {
485  position: absolute;
486  float: none;
487  top: auto;
488  right: 5px;
489  bottom: 5px;
490}
491
492/* Presenter details */
493.presenter {
494  margin-top: 20px;
495}
496.presenter p,
497.presenter .link {
498  margin: 0;
499  font-size: 28px;
500  line-height: 1.2em;
501}
502
503/* Output resize details */
504.ui-resizable-handle {
505  position: absolute;
506}
507.ui-resizable-n {
508  cursor: n-resize;
509  height: 7px;
510  width: 100%;
511  top: -5px;
512  left: 0;
513}
514.ui-resizable-w {
515  cursor: w-resize;
516  width: 7px;
517  left: -5px;
518  top: 0;
519  height: 100%;
520}
521.ui-resizable-nw {
522  cursor: nw-resize;
523  width: 9px;
524  height: 9px;
525  left: -5px;
526  top: -5px;
527}
528iframe {
529  border: none;
530}
531figcaption {
532  color: #666;
533  text-align: center;
534  font-size: 0.75em;
535}
536
537#help {
538  font-family: 'Open Sans', Arial, sans-serif;
539  text-align: center;
540  color: white;
541  background: #000;
542  opacity: 0.5;
543  position: fixed;
544  bottom: 25px;
545  left: 50px;
546  right: 50px;
547  padding: 20px;
548
549  border-radius: 10px;
550  -o-border-radius: 10px;
551  -moz-border-radius: 10px;
552  -webkit-border-radius: 10px;
553}
554
MembersX
Members
X
CodeThinker, Enjoy your reading code