mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-07-31 11:50:25 +02:00
.overlay -> .r-overlay to reduce risk of conflict, move overlay up to viewport level
This commit is contained in:
Hakim El Hattab
@@ -1448,7 +1448,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.reveal > .overlay {
|
||||
.r-overlay {
|
||||
position: absolute;
|
||||
top: var(--r-overlay-margin);
|
||||
right: var(--r-overlay-margin);
|
||||
@@ -1461,9 +1461,10 @@ $controlsArrowAngleActive: 36deg;
|
||||
transition: all 0.3s ease;
|
||||
color: #fff;
|
||||
animation: fade-in 0.3s ease;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.reveal .overlay-viewport {
|
||||
.r-overlay-viewport {
|
||||
position: absolute;
|
||||
top: var(--r-overlay-padding);
|
||||
right: var(--r-overlay-padding);
|
||||
@@ -1474,7 +1475,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.reveal .overlay-header {
|
||||
.r-overlay-header {
|
||||
display: flex;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
@@ -1483,7 +1484,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
height: var(--r-overlay-header-height);
|
||||
gap: 6px;
|
||||
}
|
||||
.reveal .overlay-header .overlay-button {
|
||||
.r-overlay-header .r-overlay-button {
|
||||
all: unset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1499,11 +1500,11 @@ $controlsArrowAngleActive: 36deg;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.reveal .overlay-header .overlay-button:hover {
|
||||
.r-overlay-header .r-overlay-button:hover {
|
||||
opacity: 1;
|
||||
background-color: rgba( 255, 255, 255, 0.15 );
|
||||
}
|
||||
.reveal .overlay-header .icon {
|
||||
.r-overlay-header .icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -1512,14 +1513,14 @@ $controlsArrowAngleActive: 36deg;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.reveal .overlay-close .icon {
|
||||
.r-overlay-close .icon {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODU0IDIuODU0YS41LjUgMCAwIDAtLjcwOC0uNzA4TDcuNSA2Ljc5MyAyLjg1NCAyLjE0NmEuNS41IDAgMSAwLS43MDguNzA4TDYuNzkzIDcuNWwtNC42NDcgNC42NDZhLjUuNSAwIDAgMCAuNzA4LjcwOEw3LjUgOC4yMDdsNC42NDYgNC42NDdhLjUuNSAwIDAgMCAuNzA4LS43MDhMOC4yMDcgNy41bDQuNjQ3LTQuNjQ2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
|
||||
}
|
||||
.reveal .overlay-external .icon {
|
||||
.r-overlay-external .icon {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
|
||||
}
|
||||
|
||||
.reveal .overlay-content {
|
||||
.r-overlay-content {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -1530,7 +1531,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
animation: scale-up 0.5s cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
.reveal .overlay-spinner {
|
||||
.r-overlay-spinner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
@@ -1546,7 +1547,7 @@ $controlsArrowAngleActive: 36deg;
|
||||
}
|
||||
|
||||
// Preview overlay
|
||||
.reveal .overlay-preview iframe {
|
||||
.r-overlay-preview iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
@@ -1558,13 +1559,13 @@ $controlsArrowAngleActive: 36deg;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview[data-state="loaded"] iframe {
|
||||
.r-overlay-preview[data-state="loaded"] iframe {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview img,
|
||||
.reveal .overlay-preview video {
|
||||
.r-overlay-preview img,
|
||||
.r-overlay-preview video {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
@@ -1574,27 +1575,27 @@ $controlsArrowAngleActive: 36deg;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview[data-preview-fit="none"] img,
|
||||
.reveal .overlay-preview[data-preview-fit="none"] video {
|
||||
.r-overlay-preview[data-preview-fit="none"] img,
|
||||
.r-overlay-preview[data-preview-fit="none"] video {
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview[data-preview-fit="scale-down"] img,
|
||||
.reveal .overlay-preview[data-preview-fit="scale-down"] video {
|
||||
.r-overlay-preview[data-preview-fit="scale-down"] img,
|
||||
.r-overlay-preview[data-preview-fit="scale-down"] video {
|
||||
object-fit: scale-down;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview[data-preview-fit="contain"] img,
|
||||
.reveal .overlay-preview[data-preview-fit="contain"] video {
|
||||
.r-overlay-preview[data-preview-fit="contain"] img,
|
||||
.r-overlay-preview[data-preview-fit="contain"] video {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview[data-preview-fit="cover"] img,
|
||||
.reveal .overlay-preview[data-preview-fit="cover"] video {
|
||||
.r-overlay-preview[data-preview-fit="cover"] img,
|
||||
.r-overlay-preview[data-preview-fit="cover"] video {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview[data-state="loaded"] .overlay-content-inner {
|
||||
.r-overlay-preview[data-state="loaded"] .r-overlay-content-inner {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
@@ -1603,57 +1604,58 @@ $controlsArrowAngleActive: 36deg;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.reveal .overlay-preview .overlay-error {
|
||||
.r-overlay-preview .r-overlay-error {
|
||||
font-size: 18px;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview .x-frame-error {
|
||||
.r-overlay-preview .x-frame-error {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.3s;
|
||||
}
|
||||
.reveal .overlay-preview[data-state="loaded"] .x-frame-error {
|
||||
.r-overlay-preview[data-state="loaded"] .x-frame-error {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.reveal .overlay-preview[data-state="loading"] .overlay-spinner {
|
||||
.r-overlay-preview[data-state="loading"] .r-overlay-spinner {
|
||||
opacity: 0.6;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// Help overlay
|
||||
.reveal .overlay-help .overlay-content {
|
||||
.r-overlay-help .r-overlay-content {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.reveal .overlay-help-content {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
.r-overlay-help-content {
|
||||
max-width: 560px;
|
||||
padding: 20px 0;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.reveal .overlay-help-content .title {
|
||||
.r-overlay-help-content .title {
|
||||
font-size: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.reveal .overlay-help-content table {
|
||||
.r-overlay-help-content table {
|
||||
border: 1px solid #fff;
|
||||
border-collapse: collapse;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.reveal .overlay-help-content table th,
|
||||
.reveal .overlay-help-content table td {
|
||||
width: 200px;
|
||||
.r-overlay-help-content table th,
|
||||
.r-overlay-help-content table td {
|
||||
width: 240px;
|
||||
padding: 14px;
|
||||
border: 1px solid #fff;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.reveal .overlay-help-content table th {
|
||||
.r-overlay-help-content table th {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
@@ -1969,7 +1971,7 @@ $notesWidthPercent: 25%;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.overlay,
|
||||
.r-overlay,
|
||||
.pause-overlay {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
2
dist/reveal.css
vendored
2
dist/reveal.css
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.esm.js
vendored
2
dist/reveal.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.esm.js.map
vendored
2
dist/reveal.esm.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js
vendored
2
dist/reveal.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js.map
vendored
2
dist/reveal.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -42,14 +42,14 @@ export default class Overlay {
|
||||
createOverlay( className ) {
|
||||
|
||||
this.dom = document.createElement( 'div' );
|
||||
this.dom.classList.add( 'overlay' );
|
||||
this.dom.classList.add( 'r-overlay' );
|
||||
this.dom.classList.add( className );
|
||||
|
||||
this.viewport = document.createElement( 'div' );
|
||||
this.viewport.classList.add( 'overlay-viewport' );
|
||||
this.viewport.classList.add( 'r-overlay-viewport' );
|
||||
|
||||
this.dom.appendChild( this.viewport );
|
||||
this.Reveal.getRevealElement().appendChild( this.dom );
|
||||
this.Reveal.getViewportElement().appendChild( this.dom );
|
||||
|
||||
}
|
||||
|
||||
@@ -62,19 +62,19 @@ export default class Overlay {
|
||||
|
||||
this.close();
|
||||
|
||||
this.createOverlay( 'overlay-preview' );
|
||||
this.createOverlay( 'r-overlay-preview' );
|
||||
this.dom.dataset.state = 'loading';
|
||||
|
||||
this.viewport.innerHTML =
|
||||
`<header class="overlay-header">
|
||||
<a class="overlay-button overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
|
||||
<button class="overlay-button overlay-close"><span class="icon"></span></button>
|
||||
`<header class="r-overlay-header">
|
||||
<a class="r-overlay-button r-overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
|
||||
<button class="r-overlay-button r-overlay-close"><span class="icon"></span></button>
|
||||
</header>
|
||||
<div class="overlay-spinner"></div>
|
||||
<div class="overlay-content">
|
||||
<div class="r-overlay-spinner"></div>
|
||||
<div class="r-overlay-content">
|
||||
<iframe src="${url}"></iframe>
|
||||
<small class="overlay-content-inner">
|
||||
<span class="overlay-error x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
|
||||
<small class="r-overlay-content-inner">
|
||||
<span class="r-overlay-error x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
|
||||
</small>
|
||||
</div>`;
|
||||
|
||||
@@ -82,12 +82,12 @@ export default class Overlay {
|
||||
this.dom.dataset.state = 'loaded';
|
||||
}, false );
|
||||
|
||||
this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
|
||||
this.close();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
|
||||
this.dom.querySelector( '.overlay-external' ).addEventListener( 'click', event => {
|
||||
this.dom.querySelector( '.r-overlay-external' ).addEventListener( 'click', event => {
|
||||
this.close();
|
||||
}, false );
|
||||
|
||||
@@ -111,18 +111,18 @@ export default class Overlay {
|
||||
|
||||
this.close();
|
||||
|
||||
this.createOverlay( 'overlay-preview' );
|
||||
this.createOverlay( 'r-overlay-preview' );
|
||||
this.dom.dataset.state = 'loading';
|
||||
this.dom.dataset.previewFit = trigger ? trigger.dataset.previewFit || 'scale-down' : 'scale-down';
|
||||
|
||||
this.viewport.innerHTML =
|
||||
`<header class="overlay-header">
|
||||
<button class="overlay-button overlay-close">Esc <span class="icon"></span></button>
|
||||
`<header class="r-overlay-header">
|
||||
<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
|
||||
</header>
|
||||
<div class="overlay-spinner"></div>
|
||||
<div class="overlay-content"></div>`;
|
||||
<div class="r-overlay-spinner"></div>
|
||||
<div class="r-overlay-content"></div>`;
|
||||
|
||||
const contentElement = this.dom.querySelector( '.overlay-content' );
|
||||
const contentElement = this.dom.querySelector( '.r-overlay-content' );
|
||||
|
||||
if( mediaType === 'image' ) {
|
||||
|
||||
@@ -137,7 +137,7 @@ export default class Overlay {
|
||||
img.addEventListener( 'error', () => {
|
||||
this.dom.dataset.state = 'error';
|
||||
contentElement.innerHTML =
|
||||
`<span class="overlay-error">Unable to load image.</span>`
|
||||
`<span class="r-overlay-error">Unable to load image.</span>`
|
||||
}, false );
|
||||
|
||||
// Hide image overlays when clicking outside the overlay
|
||||
@@ -154,6 +154,7 @@ export default class Overlay {
|
||||
video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
|
||||
video.loop = this.dom.dataset.previewLoop === 'true' ? true : false;
|
||||
video.muted = this.dom.dataset.previewMuted === 'true' ? true : false;
|
||||
video.playsInline = true;
|
||||
video.src = url;
|
||||
contentElement.appendChild( video );
|
||||
|
||||
@@ -164,7 +165,7 @@ export default class Overlay {
|
||||
video.addEventListener( 'error', () => {
|
||||
this.dom.dataset.state = 'error';
|
||||
contentElement.innerHTML =
|
||||
`<span class="overlay-error">Unable to load video.</span>`;
|
||||
`<span class="r-overlay-error">Unable to load video.</span>`;
|
||||
}, false );
|
||||
|
||||
}
|
||||
@@ -172,7 +173,7 @@ export default class Overlay {
|
||||
throw new Error( 'Please specify a valid media type to preview' );
|
||||
}
|
||||
|
||||
this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', ( event ) => {
|
||||
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', ( event ) => {
|
||||
this.close();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
@@ -210,7 +211,7 @@ export default class Overlay {
|
||||
|
||||
this.close();
|
||||
|
||||
this.createOverlay( 'overlay-help' );
|
||||
this.createOverlay( 'r-overlay-help' );
|
||||
|
||||
let html = '<p class="title">Keyboard Shortcuts</p>';
|
||||
|
||||
@@ -232,15 +233,15 @@ export default class Overlay {
|
||||
html += '</table>';
|
||||
|
||||
this.viewport.innerHTML = `
|
||||
<header class="overlay-header">
|
||||
<button class="overlay-button overlay-close">Esc <span class="icon"></span></button>
|
||||
<header class="r-overlay-header">
|
||||
<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
|
||||
</header>
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-help-content">${html}</div>
|
||||
<div class="r-overlay-content">
|
||||
<div class="r-overlay-help-content">${html}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.dom.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
|
||||
this.close();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
|
||||
Reference in New Issue
Block a user