فهرست منبع

initial work for #552

Hakim El Hattab 11 سال پیش
والد
کامیت
00c9d1ee7d
12فایلهای تغییر یافته به همراه28 افزوده شده و 25 حذف شده
  1. 5 9
      css/reveal.css
  2. 1 1
      css/theme/beige.css
  3. 1 1
      css/theme/default.css
  4. 1 1
      css/theme/moon.css
  5. 1 1
      css/theme/night.css
  6. 1 1
      css/theme/serif.css
  7. 1 1
      css/theme/simple.css
  8. 1 1
      css/theme/sky.css
  9. 1 1
      css/theme/solarized.css
  10. 1 1
      css/theme/template/theme.scss
  11. 2 2
      index.html
  12. 12 5
      js/reveal.js

+ 5 - 9
css/reveal.css

@@ -13,7 +13,7 @@
  * RESET STYLES
  * RESET STYLES
  *********************************************/
  *********************************************/
 
 
-html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
+.reveal-viewport, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
 .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
 .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
 .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
 .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
 .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
 .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
@@ -44,15 +44,11 @@ html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal i
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
 
 
-html,
-body {
+.reveal-viewport {
+	position: relative;
 	width: 100%;
 	width: 100%;
 	height: 100%;
 	height: 100%;
 	overflow: hidden;
 	overflow: hidden;
-}
-
-body {
-	position: relative;
 	line-height: 1;
 	line-height: 1;
 }
 }
 
 
@@ -367,7 +363,7 @@ body {
 
 
 .reveal .controls {
 .reveal .controls {
 	display: none;
 	display: none;
-	position: fixed;
+	position: absolute;
 	width: 110px;
 	width: 110px;
 	height: 110px;
 	height: 110px;
 	z-index: 30;
 	z-index: 30;
@@ -448,7 +444,7 @@ body {
  *********************************************/
  *********************************************/
 
 
 .reveal .progress {
 .reveal .progress {
-	position: fixed;
+	position: absolute;
 	display: none;
 	display: none;
 	height: 3px;
 	height: 3px;
 	width: 100%;
 	width: 100%;

+ 1 - 1
css/theme/beige.css

@@ -14,7 +14,7 @@
 /*********************************************
 /*********************************************
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
-body {
+.reveal-viewport {
   background: #f7f2d3;
   background: #f7f2d3;
   background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
   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));
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));

+ 1 - 1
css/theme/default.css

@@ -14,7 +14,7 @@
 /*********************************************
 /*********************************************
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
-body {
+.reveal-viewport {
   background: #1c1e20;
   background: #1c1e20;
   background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
   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));
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));

+ 1 - 1
css/theme/moon.css

@@ -20,7 +20,7 @@ html * {
 /*********************************************
 /*********************************************
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
-body {
+.reveal-viewport {
   background: #002b36;
   background: #002b36;
   background-color: #002b36; }
   background-color: #002b36; }
 
 

+ 1 - 1
css/theme/night.css

@@ -8,7 +8,7 @@
 /*********************************************
 /*********************************************
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
-body {
+.reveal-viewport {
   background: #111111;
   background: #111111;
   background-color: #111111; }
   background-color: #111111; }
 
 

+ 1 - 1
css/theme/serif.css

@@ -10,7 +10,7 @@
 /*********************************************
 /*********************************************
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
-body {
+.reveal-viewport {
   background: #f0f1eb;
   background: #f0f1eb;
   background-color: #f0f1eb; }
   background-color: #f0f1eb; }
 
 

+ 1 - 1
css/theme/simple.css

@@ -10,7 +10,7 @@
 /*********************************************
 /*********************************************
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
-body {
+.reveal-viewport {
   background: white;
   background: white;
   background-color: white; }
   background-color: white; }
 
 

+ 1 - 1
css/theme/sky.css

@@ -11,7 +11,7 @@
 /*********************************************
 /*********************************************
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
-body {
+.reveal-viewport {
   background: #add9e4;
   background: #add9e4;
   background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
   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));
   background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4));

+ 1 - 1
css/theme/solarized.css

@@ -20,7 +20,7 @@ html * {
 /*********************************************
 /*********************************************
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
-body {
+.reveal-viewport {
   background: #fdf6e3;
   background: #fdf6e3;
   background-color: #fdf6e3; }
   background-color: #fdf6e3; }
 
 

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

@@ -4,7 +4,7 @@
  * GLOBAL STYLES
  * GLOBAL STYLES
  *********************************************/
  *********************************************/
 
 
-body {
+.reveal-viewport {
 	@include bodyBackground();
 	@include bodyBackground();
 	background-color: $backgroundColor;
 	background-color: $backgroundColor;
 }
 }

+ 2 - 2
index.html

@@ -1,5 +1,5 @@
 <!doctype html>
 <!doctype html>
-<html lang="en">
+<html lang="en" style="height: 100%;">
 
 
 	<head>
 	<head>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
@@ -30,7 +30,7 @@
 		<![endif]-->
 		<![endif]-->
 	</head>
 	</head>
 
 
-	<body>
+	<body class="reveal-viewport">
 
 
 		<div class="reveal">
 		<div class="reveal">
 
 

+ 12 - 5
js/reveal.js

@@ -165,11 +165,18 @@ var Reveal = (function(){
 
 
 		checkCapabilities();
 		checkCapabilities();
 
 
-		if( !supports2DTransforms && !supports3DTransforms ) {
-			document.body.setAttribute( 'class', 'no-transforms' );
+		dom.viewport = document.querySelector( '.reveal-viewport' );
+
+		// If there's viewport defined use the body element
+		if( !dom.viewport ) {
+			dom.viewport = document.body;
+			dom.viewport.className += ' reveal-viewport';
+		}
 
 
-			// If the browser doesn't support core features we won't be
-			// using JavaScript to control the presentation
+		// If the browser doesn't support core features we fall back
+		// to a JavaScript-free mode without transforms
+		if( !supports2DTransforms && !supports3DTransforms ) {
+			dom.viewport.className += ' no-transforms';
 			return;
 			return;
 		}
 		}
 
 
@@ -1313,7 +1320,7 @@ var Reveal = (function(){
 	 */
 	 */
 	function enterFullscreen() {
 	function enterFullscreen() {
 
 
-		var element = document.body;
+		var element = dom.viewport;
 
 
 		// Check which implementation is available
 		// Check which implementation is available
 		var requestMethod = element.requestFullScreen ||
 		var requestMethod = element.requestFullScreen ||