Mojolicious-Plugin-RevealJS
view release on metacpan or search on metacpan
share/public/revealjs/css/reveal.scss view on Meta::CPAN
z-index: 10;
background-color: rgba( 0, 0, 0, 0.2 );
color: #fff;
}
.reveal .progress:after {
content: '';
display: block;
position: absolute;
height: 10px;
width: 100%;
top: -10px;
}
.reveal .progress span {
display: block;
height: 100%;
width: 0px;
background-color: currentColor;
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/*********************************************
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
position: absolute;
display: block;
right: 8px;
bottom: 8px;
z-index: 31;
font-family: Helvetica, sans-serif;
font-size: 12px;
line-height: 1;
color: #fff;
background-color: rgba( 0, 0, 0, 0.4 );
padding: 5px;
}
.reveal .slide-number a {
color: currentColor;
}
.reveal .slide-number-delimiter {
margin: 0 3px;
}
/*********************************************
* SLIDES
*********************************************/
.reveal {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none;
}
// Mobile Safari sometimes overlays a header at the top
// of the page when in landscape mode. Using fixed
// positioning ensures that reveal.js reduces its height
// when this header is visible.
@media only screen and (orientation : landscape) {
.reveal.ua-iphone {
position: fixed;
}
}
.reveal .slides {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
pointer-events: none;
overflow: visible;
z-index: 1;
text-align: center;
perspective: 600px;
perspective-origin: 50% 40%;
}
.reveal .slides>section {
-ms-perspective: 600px;
}
.reveal .slides>section,
.reveal .slides>section>section {
display: none;
position: absolute;
width: 100%;
padding: 20px 0px;
pointer-events: auto;
z-index: 10;
transform-style: flat;
transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/* Global transition speed settings */
.reveal[data-transition-speed="fast"] .slides section {
transition-duration: 400ms;
}
.reveal[data-transition-speed="slow"] .slides section {
transition-duration: 1200ms;
}
/* Slide-specific transition speed overrides */
.reveal .slides section[data-transition-speed="fast"] {
transition-duration: 400ms;
}
.reveal .slides section[data-transition-speed="slow"] {
share/public/revealjs/css/reveal.scss view on Meta::CPAN
}
.reveal.page .slides>section.stack {
padding: 0;
background: none;
}
.reveal.page .slides>section.past {
transform-origin: 0% 0%;
transform: translate3d(-40%, 0, 0) rotateY(-80deg);
}
.reveal.page .slides>section.future {
transform-origin: 100% 0%;
transform: translate3d(0, 0, 0);
}
.reveal.page .slides>section>section.past {
transform-origin: 0% 0%;
transform: translate3d(0, -40%, 0) rotateX(80deg);
}
.reveal.page .slides>section>section.future {
transform-origin: 0% 100%;
transform: translate3d(0, 0, 0);
}
/*********************************************
* FADE TRANSITION
*********************************************/
.reveal .slides section[data-transition=fade],
.reveal.fade .slides section:not([data-transition]),
.reveal.fade .slides>section>section:not([data-transition]) {
transform: none;
transition: opacity 0.5s;
}
.reveal.fade.overview .slides section,
.reveal.fade.overview .slides>section>section {
transition: none;
}
/*********************************************
* NO TRANSITION
*********************************************/
@include transition-global(none) {
transform: none;
transition: none;
}
/*********************************************
* PAUSED MODE
*********************************************/
.reveal .pause-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
visibility: hidden;
opacity: 0;
z-index: 100;
transition: all 1s ease;
}
.reveal .pause-overlay .resume-button {
position: absolute;
bottom: 20px;
right: 20px;
color: #ccc;
border-radius: 2px;
padding: 6px 14px;
border: 2px solid #ccc;
font-size: 16px;
background: transparent;
cursor: pointer;
&:hover {
color: #fff;
border-color: #fff;
}
}
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1;
}
/*********************************************
* FALLBACK
*********************************************/
.no-transforms {
overflow-y: auto;
}
.no-transforms .reveal .slides {
position: relative;
width: 80%;
height: auto !important;
top: 0;
left: 50%;
margin: 0;
text-align: center;
}
.no-transforms .reveal .controls,
.no-transforms .reveal .progress {
display: none !important;
}
.no-transforms .reveal .slides section {
display: block !important;
opacity: 1 !important;
position: relative !important;
height: auto;
min-height: 0;
top: 0;
left: -50%;
margin: 70px 0;
transform: none;
}
.no-transforms .reveal .slides section section {
left: 0;
}
.reveal .no-transition,
.reveal .no-transition * {
transition: none !important;
}
/*********************************************
* PER-SLIDE BACKGROUNDS
*********************************************/
.reveal .backgrounds {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
share/public/revealjs/css/reveal.scss view on Meta::CPAN
.reveal.overview-deactivating .slides section {
transition: none;
}
.reveal.overview .backgrounds .slide-background,
.reveal.overview-deactivating .backgrounds .slide-background {
transition: none;
}
/*********************************************
* RTL SUPPORT
*********************************************/
.reveal.rtl .slides,
.reveal.rtl .slides h1,
.reveal.rtl .slides h2,
.reveal.rtl .slides h3,
.reveal.rtl .slides h4,
.reveal.rtl .slides h5,
.reveal.rtl .slides h6 {
direction: rtl;
font-family: sans-serif;
}
.reveal.rtl pre,
.reveal.rtl code {
direction: ltr;
}
.reveal.rtl ol,
.reveal.rtl ul {
text-align: right;
}
.reveal.rtl .progress span {
float: right
}
/*********************************************
* PARALLAX BACKGROUND
*********************************************/
.reveal.has-parallax-background .backgrounds {
transition: all 0.8s ease;
}
/* Global transition speed settings */
.reveal.has-parallax-background[data-transition-speed="fast"] .backgrounds {
transition-duration: 400ms;
}
.reveal.has-parallax-background[data-transition-speed="slow"] .backgrounds {
transition-duration: 1200ms;
}
/*********************************************
* LINK PREVIEW OVERLAY
*********************************************/
.reveal .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: rgba( 0, 0, 0, 0.9 );
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.reveal .overlay.visible {
opacity: 1;
visibility: visible;
}
.reveal .overlay .spinner {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
z-index: 10;
background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52...
visibility: visible;
opacity: 0.6;
transition: all 0.3s ease;
}
.reveal .overlay header {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 40px;
z-index: 2;
border-bottom: 1px solid #222;
}
.reveal .overlay header a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 36px;
padding: 0 10px;
float: right;
opacity: 0.6;
box-sizing: border-box;
}
.reveal .overlay header a:hover {
opacity: 1;
}
.reveal .overlay header a .icon {
display: inline-block;
width: 20px;
height: 20px;
background-position: 50% 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.reveal .overlay header a.close .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1...
}
.reveal .overlay header a.external .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod...
}
.reveal .overlay .viewport {
position: absolute;
display: flex;
top: 40px;
right: 0;
bottom: 0;
left: 0;
}
.reveal .overlay.overlay-preview .viewport iframe {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border: 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.reveal .overlay.overlay-preview.loaded .viewport iframe {
opacity: 1;
visibility: visible;
}
.reveal .overlay.overlay-preview.loaded .viewport-inner {
position: absolute;
z-index: -1;
left: 0;
top: 45%;
width: 100%;
text-align: center;
letter-spacing: normal;
}
.reveal .overlay.overlay-preview .x-frame-error {
opacity: 0;
transition: opacity 0.3s ease 0.3s;
}
.reveal .overlay.overlay-preview.loaded .x-frame-error {
opacity: 1;
}
.reveal .overlay.overlay-preview.loaded .spinner {
opacity: 0;
visibility: hidden;
transform: scale(0.2);
}
.reveal .overlay.overlay-help .viewport {
overflow: auto;
color: #fff;
}
.reveal .overlay.overlay-help .viewport .viewport-inner {
width: 600px;
margin: auto;
padding: 20px 20px 80px 20px;
text-align: center;
letter-spacing: normal;
}
.reveal .overlay.overlay-help .viewport .viewport-inner .title {
font-size: 20px;
}
.reveal .overlay.overlay-help .viewport .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 {
width: 200px;
padding: 14px;
border: 1px solid #fff;
vertical-align: middle;
}
.reveal .overlay.overlay-help .viewport .viewport-inner table th {
padding-top: 20px;
padding-bottom: 20px;
}
/*********************************************
* PLAYBACK COMPONENT
*********************************************/
.reveal .playback {
position: absolute;
left: 15px;
bottom: 20px;
z-index: 30;
cursor: pointer;
transition: all 400ms ease;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
.reveal.overview .playback {
opacity: 0;
visibility: hidden;
}
/*********************************************
* ROLLING LINKS
*********************************************/
.reveal .roll {
display: inline-block;
line-height: 1.2;
overflow: hidden;
vertical-align: top;
perspective: 400px;
perspective-origin: 50% 50%;
}
.reveal .roll:hover {
background: none;
text-shadow: none;
}
.reveal .roll span {
display: block;
position: relative;
padding: 0 2px;
pointer-events: none;
transition: all 400ms ease;
transform-origin: 50% 0%;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.reveal .roll:hover span {
background: rgba(0,0,0,0.5);
transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
}
.reveal .roll span:after {
content: attr(data-title);
( run in 2.398 seconds using v1.01-cache-2.11-cpan-97f6503c9c8 )