浏览代码

move body styles to new .reveal-viewport

Hakim El Hattab 5 年之前
父节点
当前提交
ff62b96a5d

+ 1 - 1
css/reveal.scss

@@ -19,7 +19,7 @@ html {
 	overflow: hidden;
 }
 
-body {
+.reveal-viewport {
 	height: 100%;
 	overflow: hidden;
 	position: relative;

+ 1 - 1
css/theme/template/theme.scss

@@ -6,7 +6,7 @@
 
 @import "./exposer";
 
-body {
+.reveal-viewport {
 	@include bodyBackground();
 	background-color: $backgroundColor;
 }

文件差异内容过多而无法显示
+ 0 - 0
dist/reveal.css


文件差异内容过多而无法显示
+ 0 - 0
dist/reveal.min.js


+ 1 - 1
dist/theme/beige.css

@@ -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));

+ 1 - 1
dist/theme/black.css

@@ -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; }
 

+ 1 - 1
dist/theme/blood.css

@@ -38,7 +38,7 @@
   --selection-background-color: #a23;
   --selection-color: #fff; }
 
-body {
+.reveal-viewport {
   background: #222;
   background-color: #222; }
 

+ 1 - 1
dist/theme/league.css

@@ -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));

+ 1 - 1
dist/theme/moon.css

@@ -39,7 +39,7 @@ html * {
   --selection-background-color: #d33682;
   --selection-color: #fff; }
 
-body {
+.reveal-viewport {
   background: #002b36;
   background-color: #002b36; }
 

+ 1 - 1
dist/theme/night.css

@@ -33,7 +33,7 @@
   --selection-background-color: #e7ad52;
   --selection-color: #fff; }
 
-body {
+.reveal-viewport {
   background: #111;
   background-color: #111; }
 

+ 1 - 1
dist/theme/serif.css

@@ -35,7 +35,7 @@
   --selection-background-color: #26351C;
   --selection-color: #fff; }
 
-body {
+.reveal-viewport {
   background: #F0F1EB;
   background-color: #F0F1EB; }
 

+ 1 - 1
dist/theme/simple.css

@@ -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; }
 

+ 1 - 1
dist/theme/sky.css

@@ -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));

+ 1 - 1
dist/theme/solarized.css

@@ -39,7 +39,7 @@ html * {
   --selection-background-color: #d33682;
   --selection-color: #fff; }
 
-body {
+.reveal-viewport {
   background: #fdf6e3;
   background-color: #fdf6e3; }
 

+ 1 - 1
dist/theme/white.css

@@ -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; }
 

+ 7 - 0
js/reveal.js

@@ -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();

+ 17 - 17
test/examples/multiple-instances.html

@@ -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>

部分文件因为文件数量过多而无法显示