mirror of
https://github.com/hakimel/reveal.js.git
synced 2025-04-21 04:52:14 +02:00
refactored overlays; new icons and reduced selector specificity
This commit is contained in:
Hakim El Hattab
parent
983c6248f7
commit
31ba65ce86
@ -1454,7 +1454,7 @@ $overlayHeaderPadding: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal > .overlay .spinner {
|
||||
.reveal .overlay-spinner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
@ -1470,7 +1470,8 @@ $overlayHeaderPadding: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal > .overlay header {
|
||||
.reveal .overlay-header {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -1478,22 +1479,24 @@ $overlayHeaderPadding: 5px;
|
||||
padding: $overlayHeaderPadding;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.reveal > .overlay header a {
|
||||
display: inline-block;
|
||||
.reveal .overlay-header a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $overlayHeaderHeight;
|
||||
height: $overlayHeaderHeight;
|
||||
line-height: 36px;
|
||||
padding: 0 10px;
|
||||
float: right;
|
||||
opacity: 0.6;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.reveal > .overlay header a:hover {
|
||||
.reveal .overlay-header a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.reveal > .overlay header a .icon {
|
||||
.reveal .overlay-header .icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@ -1502,14 +1505,14 @@ $overlayHeaderPadding: 5px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.reveal > .overlay header a.close .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
|
||||
.reveal .overlay-close .icon {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODU0IDIuODU0YS41LjUgMCAwIDAtLjcwOC0uNzA4TDcuNSA2Ljc5MyAyLjg1NCAyLjE0NmEuNS41IDAgMSAwLS43MDguNzA4TDYuNzkzIDcuNWwtNC42NDcgNC42NDZhLjUuNSAwIDAgMCAuNzA4LjcwOEw3LjUgOC4yMDdsNC42NDYgNC42NDdhLjUuNSAwIDAgMCAuNzA4LS43MDhMOC4yMDcgNy41bDQuNjQ3LTQuNjQ2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
|
||||
}
|
||||
.reveal > .overlay header a.external .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
|
||||
.reveal .overlay-external .icon {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
|
||||
}
|
||||
|
||||
.reveal > .overlay .viewport {
|
||||
.reveal .overlay-viewport {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: $overlayHeaderHeight + $overlayHeaderPadding*2;
|
||||
@ -1518,7 +1521,7 @@ $overlayHeaderPadding: 5px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-preview .viewport iframe {
|
||||
.reveal .overlay-preview .overlay-viewport iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
@ -1530,12 +1533,12 @@ $overlayHeaderPadding: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport iframe {
|
||||
.reveal .overlay-preview.loaded .overlay-viewport iframe {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport-inner {
|
||||
.reveal .overlay-preview.loaded .overlay-viewport-inner {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
@ -1544,26 +1547,26 @@ $overlayHeaderPadding: 5px;
|
||||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.reveal > .overlay.overlay-preview .x-frame-error {
|
||||
.reveal .overlay-preview .x-frame-error {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.3s;
|
||||
}
|
||||
.reveal > .overlay.overlay-preview.loaded .x-frame-error {
|
||||
.reveal .overlay-preview.loaded .x-frame-error {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-preview.loaded .spinner {
|
||||
.reveal .overlay-preview.loaded .overlay-spinner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-help .viewport {
|
||||
.reveal .overlay-help .overlay-viewport {
|
||||
overflow: auto;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner {
|
||||
.reveal .overlay-help .overlay-viewport-inner {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
padding: 20px 20px 80px 20px;
|
||||
@ -1571,25 +1574,25 @@ $overlayHeaderPadding: 5px;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
.reveal .overlay-help .overlay-viewport-inner .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table {
|
||||
.reveal .overlay-help .overlay-viewport-inner table {
|
||||
border: 1px solid #fff;
|
||||
border-collapse: collapse;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
.reveal .overlay-help .overlay-viewport-inner table th,
|
||||
.reveal .overlay-help .overlay-viewport-inner table td {
|
||||
width: 200px;
|
||||
padding: 14px;
|
||||
border: 1px solid #fff;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
.reveal .overlay-help .overlay-viewport-inner table th {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
26
js/reveal.js
26
js/reveal.js
@ -819,14 +819,14 @@ export default function( revealElement, options ) {
|
||||
dom.wrapper.appendChild( dom.overlay );
|
||||
|
||||
dom.overlay.innerHTML =
|
||||
`<header>
|
||||
<a class="close" href="#"><span class="icon"></span></a>
|
||||
<a class="external" href="${url}" target="_blank"><span class="icon"></span></a>
|
||||
`<header class="overlay-header">
|
||||
<a class="overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
|
||||
<a class="overlay-close" href="#"><span class="icon"></span></a>
|
||||
</header>
|
||||
<div class="spinner"></div>
|
||||
<div class="viewport">
|
||||
<div class="overlay-spinner"></div>
|
||||
<div class="overlay-viewport">
|
||||
<iframe src="${url}"></iframe>
|
||||
<small class="viewport-inner">
|
||||
<small class="overlay-viewport-inner">
|
||||
<span class="x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
|
||||
</small>
|
||||
</div>`;
|
||||
@ -835,12 +835,12 @@ export default function( revealElement, options ) {
|
||||
dom.overlay.classList.add( 'loaded' );
|
||||
}, false );
|
||||
|
||||
dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => {
|
||||
dom.overlay.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
closeOverlay();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
|
||||
dom.overlay.querySelector( '.external' ).addEventListener( 'click', event => {
|
||||
dom.overlay.querySelector( '.overlay-external' ).addEventListener( 'click', event => {
|
||||
closeOverlay();
|
||||
}, false );
|
||||
|
||||
@ -902,15 +902,15 @@ export default function( revealElement, options ) {
|
||||
html += '</table>';
|
||||
|
||||
dom.overlay.innerHTML = `
|
||||
<header>
|
||||
<a class="close" href="#"><span class="icon"></span></a>
|
||||
<header class="overlay-header">
|
||||
<a class="overlay-close" href="#"><span class="icon"></span></a>
|
||||
</header>
|
||||
<div class="viewport">
|
||||
<div class="viewport-inner">${html}</div>
|
||||
<div class="overlay-viewport">
|
||||
<div class="overlay-viewport-inner">${html}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
dom.overlay.querySelector( '.close' ).addEventListener( 'click', event => {
|
||||
dom.overlay.querySelector( '.overlay-close' ).addEventListener( 'click', event => {
|
||||
closeOverlay();
|
||||
event.preventDefault();
|
||||
}, false );
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user