move body styles to new .reveal-viewport
This commit is contained in:
parent
f26fc20b55
commit
ff62b96a5d
|
@ -19,7 +19,7 @@ html {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
@import "./exposer";
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
@include bodyBackground();
|
||||
background-color: $backgroundColor;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -33,7 +33,7 @@
|
|||
--selection-background-color: rgba(79, 64, 28, 0.99);
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #f7f2d3;
|
||||
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
|
||||
|
|
|
@ -35,7 +35,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||
--selection-background-color: #bee4fd;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #191919;
|
||||
background-color: #191919; }
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@
|
|||
--selection-background-color: #a23;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #222;
|
||||
background-color: #222; }
|
||||
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
--selection-background-color: #FF5E99;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #1c1e20;
|
||||
background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
|
||||
|
|
|
@ -39,7 +39,7 @@ html * {
|
|||
--selection-background-color: #d33682;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #002b36;
|
||||
background-color: #002b36; }
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
--selection-background-color: #e7ad52;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #111;
|
||||
background-color: #111; }
|
||||
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
--selection-background-color: #26351C;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #F0F1EB;
|
||||
background-color: #F0F1EB; }
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||
--selection-background-color: rgba(0, 0, 0, 0.99);
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #fff;
|
||||
background-color: #fff; }
|
||||
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
--selection-background-color: #134674;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #add9e4;
|
||||
background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));
|
||||
|
|
|
@ -39,7 +39,7 @@ html * {
|
|||
--selection-background-color: #d33682;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #fdf6e3;
|
||||
background-color: #fdf6e3; }
|
||||
|
||||
|
|
|
@ -35,7 +35,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||
--selection-background-color: #98bdef;
|
||||
--selection-color: #fff; }
|
||||
|
||||
body {
|
||||
.reveal-viewport {
|
||||
background: #fff;
|
||||
background-color: #fff; }
|
||||
|
||||
|
|
|
@ -230,6 +230,13 @@ export default function( revealElement, options ) {
|
|||
dom.wrapper.classList.remove( 'no-hover' );
|
||||
}
|
||||
|
||||
if( config.embedded === true ) {
|
||||
revealElement.classList.add( 'reveal-viewport' );
|
||||
}
|
||||
else {
|
||||
document.body.classList.add( 'reveal-viewport' );
|
||||
}
|
||||
|
||||
backgrounds.render();
|
||||
slideNumber.render();
|
||||
controls.render();
|
||||
|
|
|
@ -12,26 +12,22 @@
|
|||
<link rel="stylesheet" href="../../dist/theme/white.css" id="theme">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body style="background: #ddd;">
|
||||
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<div class="deck1" style="width: 100%; height: 50vh; padding: 10px;">
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>1.1</section>
|
||||
<section>1.2</section>
|
||||
<section>1.3</section>
|
||||
</div>
|
||||
<div class="reveal deck1" style="width: 100%; height: 50vh; margin: 10px;">
|
||||
<div class="slides">
|
||||
<section>1.1</section>
|
||||
<section>1.2</section>
|
||||
<section>1.3</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="deck2" style="width: 100%; height: 50vh; padding: 10px;">
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>2.1</section>
|
||||
<section>2.2</section>
|
||||
<section>2.3</section>
|
||||
</div>
|
||||
<div class="reveal deck2" style="width: 100%; height: 50vh; margin: 10px;">
|
||||
<div class="slides">
|
||||
<section>2.1</section>
|
||||
<section>2.2</section>
|
||||
<section>2.3</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -40,10 +36,14 @@
|
|||
|
||||
<script>
|
||||
|
||||
let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ) );
|
||||
let r1 = new Reveal( document.querySelector( '.deck1' ), {
|
||||
embedded: true
|
||||
} );
|
||||
r1.initialize();
|
||||
|
||||
let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ) );
|
||||
let r2 = new Reveal( document.querySelector( '.deck2' ), {
|
||||
embedded: true
|
||||
} );
|
||||
r2.initialize();
|
||||
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue