OpenLP

Merge lp:~tomasgroth/openlp/reveal-css into lp:openlp

  1. reveal-css
  2. Merge into trunk
Proposed by Tomas Groth
Status: Merged
Merged at revision: 2903
Proposed branch: lp:~tomasgroth/openlp/reveal-css
Merge into: lp:openlp
Diff against target: 428 lines (+92/-85)
1 file modified
openlp/core/display/html/reveal.css (+92/-85)
To merge this branch: bzr merge lp:~tomasgroth/openlp/reveal-css
Reviewer Review Type Date Requested Status
Tim Bentley Approve
Review via email: mp+372798@code.launchpad.net

Commit message

Forgot to update to latest CSS when updating RevealJS to 3.8.0.

To post a comment you must log in.
Revision history for this message
Raoul Snyman (raoul-snyman) wrote :

JavaScript tests passed!

Revision history for this message
Raoul Snyman (raoul-snyman) wrote :

Linux tests passed!

Revision history for this message
Raoul Snyman (raoul-snyman) wrote :

macOS tests passed!

Revision history for this message
Raoul Snyman (raoul-snyman) wrote :

Linting passed!

Revision history for this message
Tim Bentley (trb143) :
review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'openlp/core/display/html/reveal.css'
2--- openlp/core/display/html/reveal.css 2019-02-11 20:34:20 +0000
3+++ openlp/core/display/html/reveal.css 2019-09-15 12:54:31 +0000
4@@ -3,47 +3,24 @@
5 * http://revealjs.com
6 * MIT licensed
7 *
8- * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
9+ * Copyright (C) 2019 Hakim El Hattab, http://hakim.se
10 */
11 /*********************************************
12- * RESET STYLES
13- *********************************************/
14-html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
15-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
16-.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
17-.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
18-.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
19-.reveal b, .reveal u, .reveal center,
20-.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
21-.reveal fieldset, .reveal form, .reveal label, .reveal legend,
22-.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
23-.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
24-.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
25-.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
26-.reveal time, .reveal mark, .reveal audio, .reveal video {
27- margin: 0;
28- padding: 0;
29- border: 0;
30- font-size: 100%;
31- font: inherit;
32- vertical-align: baseline; }
33-
34-.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
35-.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
36- display: block; }
37-
38-/*********************************************
39 * GLOBAL STYLES
40 *********************************************/
41-html,
42-body {
43+html {
44 width: 100%;
45 height: 100%;
46+ height: 100vh;
47+ height: calc( var(--vh, 1vh) * 100);
48 overflow: hidden; }
49
50 body {
51+ height: 100%;
52+ overflow: hidden;
53 position: relative;
54 line-height: 1;
55+ margin: 0;
56 background-color: #fff;
57 color: #000; }
58
59@@ -272,7 +249,7 @@
60 visibility: hidden;
61 opacity: 0;
62 -webkit-appearance: none;
63- -webkit-tap-highlight-color: transparent; }
64+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
65 .reveal .controls .controls-arrow:before,
66 .reveal .controls .controls-arrow:after {
67 content: '';
68@@ -366,10 +343,16 @@
69 .reveal .controls .enabled.fragmented:hover {
70 opacity: 1; }
71
72+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
73+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
74+ display: none; }
75+
76+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
77 .reveal:not(.has-vertical-slides) .controls .navigate-left {
78 bottom: 1.4em;
79 right: 5.5em; }
80
81+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
82 .reveal:not(.has-vertical-slides) .controls .navigate-right {
83 bottom: 1.4em;
84 right: 0.5em; }
85@@ -486,12 +469,8 @@
86 width: 100%;
87 height: 100%;
88 overflow: hidden;
89- -ms-touch-action: none;
90- touch-action: none; }
91-
92-@media only screen and (orientation: landscape) {
93- .reveal.ua-iphone {
94- position: fixed; } }
95+ -ms-touch-action: pinch-zoom;
96+ touch-action: pinch-zoom; }
97
98 .reveal .slides {
99 position: absolute;
100@@ -512,7 +491,8 @@
101 perspective-origin: 50% 40%; }
102
103 .reveal .slides > section {
104- -ms-perspective: 600px; }
105+ -webkit-perspective: 600px;
106+ perspective: 600px; }
107
108 .reveal .slides > section,
109 .reveal .slides > section > section {
110@@ -544,7 +524,8 @@
111 .reveal .slides > section.stack {
112 padding-top: 0;
113 padding-bottom: 0;
114- pointer-events: none; }
115+ pointer-events: none;
116+ height: 100%; }
117
118 .reveal .slides > section.present,
119 .reveal .slides > section > section.present {
120@@ -761,14 +742,14 @@
121 .reveal .slides > section > section[data-transition=zoom].past,
122 .reveal .slides > section > section[data-transition~=zoom-out].past,
123 .reveal.zoom .slides > section > section:not([data-transition]).past {
124- -webkit-transform: translate(0, -150%);
125- transform: translate(0, -150%); }
126+ -webkit-transform: scale(16);
127+ transform: scale(16); }
128
129 .reveal .slides > section > section[data-transition=zoom].future,
130 .reveal .slides > section > section[data-transition~=zoom-in].future,
131 .reveal.zoom .slides > section > section:not([data-transition]).future {
132- -webkit-transform: translate(0, 150%);
133- transform: translate(0, 150%); }
134+ -webkit-transform: scale(0.2);
135+ transform: scale(0.2); }
136
137 /*********************************************
138 * CUBE TRANSITION
139@@ -989,34 +970,35 @@
140 .no-transforms {
141 overflow-y: auto; }
142
143+.no-transforms .reveal {
144+ overflow: visible; }
145+
146 .no-transforms .reveal .slides {
147 position: relative;
148 width: 80%;
149- height: auto !important;
150+ max-width: 1280px;
151+ height: auto;
152 top: 0;
153- left: 50%;
154- margin: 0;
155+ margin: 0 auto;
156 text-align: center; }
157
158 .no-transforms .reveal .controls,
159 .no-transforms .reveal .progress {
160- display: none !important; }
161+ display: none; }
162
163 .no-transforms .reveal .slides section {
164- display: block !important;
165- opacity: 1 !important;
166- position: relative !important;
167+ display: block;
168+ opacity: 1;
169+ position: relative;
170 height: auto;
171 min-height: 0;
172 top: 0;
173- left: -50%;
174+ left: 0;
175+ margin: 10vh 0;
176 margin: 70px 0;
177 -webkit-transform: none;
178 transform: none; }
179
180-.no-transforms .reveal .slides section section {
181- left: 0; }
182-
183 .reveal .no-transition,
184 .reveal .no-transition * {
185 transition: none !important; }
186@@ -1041,7 +1023,7 @@
187 opacity: 0;
188 visibility: hidden;
189 overflow: hidden;
190- background-color: transparent;
191+ background-color: rgba(0, 0, 0, 0);
192 transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
193
194 .reveal .slide-background-content {
195@@ -1294,9 +1276,9 @@
196 transition-duration: 1200ms; }
197
198 /*********************************************
199- * LINK PREVIEW OVERLAY
200+ * OVERLAY FOR LINK PREVIEWS AND HELP
201 *********************************************/
202-.reveal .overlay {
203+.reveal > .overlay {
204 position: absolute;
205 top: 0;
206 left: 0;
207@@ -1308,11 +1290,11 @@
208 visibility: hidden;
209 transition: all 0.3s ease; }
210
211-.reveal .overlay.visible {
212+.reveal > .overlay.visible {
213 opacity: 1;
214 visibility: visible; }
215
216-.reveal .overlay .spinner {
217+.reveal > .overlay .spinner {
218 position: absolute;
219 display: block;
220 top: 50%;
221@@ -1326,7 +1308,7 @@
222 opacity: 0.6;
223 transition: all 0.3s ease; }
224
225-.reveal .overlay header {
226+.reveal > .overlay header {
227 position: absolute;
228 left: 0;
229 top: 0;
230@@ -1335,7 +1317,7 @@
231 z-index: 2;
232 border-bottom: 1px solid #222; }
233
234-.reveal .overlay header a {
235+.reveal > .overlay header a {
236 display: inline-block;
237 width: 40px;
238 height: 40px;
239@@ -1345,10 +1327,10 @@
240 opacity: 0.6;
241 box-sizing: border-box; }
242
243-.reveal .overlay header a:hover {
244+.reveal > .overlay header a:hover {
245 opacity: 1; }
246
247-.reveal .overlay header a .icon {
248+.reveal > .overlay header a .icon {
249 display: inline-block;
250 width: 20px;
251 height: 20px;
252@@ -1356,13 +1338,13 @@
253 background-size: 100%;
254 background-repeat: no-repeat; }
255
256-.reveal .overlay header a.close .icon {
257+.reveal > .overlay header a.close .icon {
258 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }
259
260-.reveal .overlay header a.external .icon {
261+.reveal > .overlay header a.external .icon {
262 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }
263
264-.reveal .overlay .viewport {
265+.reveal > .overlay .viewport {
266 position: absolute;
267 display: -webkit-box;
268 display: -ms-flexbox;
269@@ -1372,7 +1354,7 @@
270 bottom: 0;
271 left: 0; }
272
273-.reveal .overlay.overlay-preview .viewport iframe {
274+.reveal > .overlay.overlay-preview .viewport iframe {
275 width: 100%;
276 height: 100%;
277 max-width: 100%;
278@@ -1382,11 +1364,11 @@
279 visibility: hidden;
280 transition: all 0.3s ease; }
281
282-.reveal .overlay.overlay-preview.loaded .viewport iframe {
283+.reveal > .overlay.overlay-preview.loaded .viewport iframe {
284 opacity: 1;
285 visibility: visible; }
286
287-.reveal .overlay.overlay-preview.loaded .viewport-inner {
288+.reveal > .overlay.overlay-preview.loaded .viewport-inner {
289 position: absolute;
290 z-index: -1;
291 left: 0;
292@@ -1395,46 +1377,46 @@
293 text-align: center;
294 letter-spacing: normal; }
295
296-.reveal .overlay.overlay-preview .x-frame-error {
297+.reveal > .overlay.overlay-preview .x-frame-error {
298 opacity: 0;
299 transition: opacity 0.3s ease 0.3s; }
300
301-.reveal .overlay.overlay-preview.loaded .x-frame-error {
302+.reveal > .overlay.overlay-preview.loaded .x-frame-error {
303 opacity: 1; }
304
305-.reveal .overlay.overlay-preview.loaded .spinner {
306+.reveal > .overlay.overlay-preview.loaded .spinner {
307 opacity: 0;
308 visibility: hidden;
309 -webkit-transform: scale(0.2);
310 transform: scale(0.2); }
311
312-.reveal .overlay.overlay-help .viewport {
313+.reveal > .overlay.overlay-help .viewport {
314 overflow: auto;
315 color: #fff; }
316
317-.reveal .overlay.overlay-help .viewport .viewport-inner {
318+.reveal > .overlay.overlay-help .viewport .viewport-inner {
319 width: 600px;
320 margin: auto;
321 padding: 20px 20px 80px 20px;
322 text-align: center;
323 letter-spacing: normal; }
324
325-.reveal .overlay.overlay-help .viewport .viewport-inner .title {
326+.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
327 font-size: 20px; }
328
329-.reveal .overlay.overlay-help .viewport .viewport-inner table {
330+.reveal > .overlay.overlay-help .viewport .viewport-inner table {
331 border: 1px solid #fff;
332 border-collapse: collapse;
333 font-size: 16px; }
334
335-.reveal .overlay.overlay-help .viewport .viewport-inner table th,
336-.reveal .overlay.overlay-help .viewport .viewport-inner table td {
337+.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
338+.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
339 width: 200px;
340 padding: 14px;
341 border: 1px solid #fff;
342 vertical-align: middle; }
343
344-.reveal .overlay.overlay-help .viewport .viewport-inner table th {
345+.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
346 padding-top: 20px;
347 padding-bottom: 20px; }
348
349@@ -1448,13 +1430,33 @@
350 z-index: 30;
351 cursor: pointer;
352 transition: all 400ms ease;
353- -webkit-tap-highlight-color: transparent; }
354+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
355
356 .reveal.overview .playback {
357 opacity: 0;
358 visibility: hidden; }
359
360 /*********************************************
361+ * CODE HIGHLGIHTING
362+ *********************************************/
363+.reveal .hljs table {
364+ margin: initial; }
365+
366+.reveal .hljs-ln-code,
367+.reveal .hljs-ln-numbers {
368+ padding: 0;
369+ border: 0; }
370+
371+.reveal .hljs-ln-numbers {
372+ opacity: 0.6;
373+ padding-right: 0.75em;
374+ text-align: right;
375+ vertical-align: top; }
376+
377+.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
378+ opacity: 0.4; }
379+
380+/*********************************************
381 * ROLLING LINKS
382 *********************************************/
383 .reveal .roll {
384@@ -1512,7 +1514,7 @@
385 .reveal .speaker-notes {
386 display: none;
387 position: absolute;
388- width: 25vw;
389+ width: 33.3333333333%;
390 height: 100%;
391 top: 0;
392 left: 100%;
393@@ -1540,7 +1542,7 @@
394 opacity: 0.5; }
395
396 .reveal.show-notes {
397- max-width: 75vw;
398+ max-width: 75%;
399 overflow: visible; }
400
401 .reveal.show-notes .speaker-notes {
402@@ -1555,19 +1557,24 @@
403 border-left: 0;
404 max-width: none;
405 max-height: 70%;
406+ max-height: 70vh;
407 overflow: visible; }
408 .reveal.show-notes .speaker-notes {
409 top: 100%;
410 left: 0;
411 width: 100%;
412- height: 42.8571428571%; } }
413+ height: 42.8571428571%;
414+ height: 30vh;
415+ border: 0; } }
416
417 @media screen and (max-width: 600px) {
418 .reveal.show-notes {
419- max-height: 60%; }
420+ max-height: 60%;
421+ max-height: 60vh; }
422 .reveal.show-notes .speaker-notes {
423 top: 100%;
424- height: 66.6666666667%; }
425+ height: 66.6666666667%;
426+ height: 40vh; }
427 .reveal .speaker-notes {
428 font-size: 14px; } }
429