added some rough styling for toggling the top bar

Author: matthewrobertson

css/light_theme.css

@@ -0,0 +1,81 @@
+/*
+Syntax error: Undefined mixin 'box-shadow'.
+        on line 12 of css/sass/light_theme.scss, in `box-shadow'
+        from line 12 of css/sass/light_theme.scss
+
+7: }
+8: 
+9: // reflowable paginated style
+10: 
+11: 	.page-margin {
+12: 		@include box-shadow(0 0 5px 5px #777);
+13: 	}
+14: 
+15: 	.page-margin, .page {
+16: 		background-color: #FFF;
+17: 	}
+
+Backtrace:
+css/sass/light_theme.scss:12:in `box-shadow'
+css/sass/light_theme.scss:12
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:170:in `visit_mixin'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:37:in `visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:18:in `visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:53:in `map'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:53:in `visit_children'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:27:in `block in visit_children'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:39:in `with_environment'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:26:in `visit_children'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:37:in `block in visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:238:in `visit_rule'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:37:in `visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:18:in `visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:53:in `map'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:53:in `visit_children'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:27:in `block in visit_children'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:39:in `with_environment'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:26:in `visit_children'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:37:in `block in visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:47:in `visit_root'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:37:in `visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:18:in `visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:7:in `visit'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/root_node.rb:20:in `render'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/engine.rb:299:in `_render'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/engine.rb:246:in `render'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/plugin/compiler.rb:339:in `update_stylesheet'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/plugin/compiler.rb:202:in `block in update_stylesheets'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/plugin/compiler.rb:200:in `each'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/plugin/compiler.rb:200:in `update_stylesheets'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/plugin/compiler.rb:272:in `block (4 levels) in watch'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/path.rb:73:in `call'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/path.rb:73:in `run_callback'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/path.rb:55:in `callback_action'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/path.rb:35:in `update'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/state/directory.rb:39:in `block in modified'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/state/directory.rb:37:in `each'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/state/directory.rb:37:in `modified'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/state/directory.rb:18:in `refresh'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/backends/polling.rb:17:in `block (2 levels) in run'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/backends/polling.rb:17:in `each'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/backends/polling.rb:17:in `block in run'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/backends/polling.rb:15:in `loop'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/backends/polling.rb:15:in `run'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm/monitor.rb:26:in `run'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/fssm-0.2.8.1/lib/fssm.rb:70:in `monitor'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/plugin/compiler.rb:265:in `watch'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/plugin.rb:107:in `method_missing'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/exec.rb:431:in `watch_or_update'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/exec.rb:302:in `process_result'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/exec.rb:41:in `parse'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/exec.rb:21:in `parse!'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/bin/sass:8:in `<top (required)>'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290/bin/sass:19:in `load'
+/Users/matthew/.rvm/gems/ruby-1.9.2-p290/bin/sass:19:in `<main>'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Syntax error: Undefined mixin 'box-shadow'.\A         on line 12 of css/sass/light_theme.scss, in `box-shadow'\A         from line 12 of css/sass/light_theme.scss\A \A 7: }\A 8: \A 9: // reflowable paginated style\A 10: \A 11: 	.page-margin {\A 12: 		@include box-shadow(0 0 5px 5px #777);\A 13: 	}\A 14: \A 15: 	.page-margin, .page {\A 16: 		background-color: #FFF;\A 17: 	}"; }

css/readium_paginator.css

@@ -1,23 +1,23 @@
 /*
 Syntax error: Undefined mixin 'box-shadow'.
-        on line 145 of css/sass/readium_paginator.scss, in `box-shadow'
-        from line 145 of css/sass/readium_paginator.scss
+        on line 136 of css/sass/readium_paginator.scss, in `box-shadow'
+        from line 136 of css/sass/readium_paginator.scss
 
-140:     position: absolute;
-141:     top: 2%;
-142:     left: 50%;
-143:     height:96%;
-144:     width: 1px;
-145:     @include box-shadow(0 0 15px 3px rgba(5, 5, 5, 0.7));
-146: 	display: none;
-147: 	background-color: #444;
-148: 	opacity: 0.6;
-149: 	z-index: 10;
-150: }
+131:     position: absolute;
+132:     top: 2%;
+133:     left: 50%;
+134:     height:96%;
+135:     width: 1px;
+136:     @include box-shadow(0 0 15px 3px rgba(5, 5, 5, 0.7));
+137: 	display: none;
+138: 	background-color: #444;
+139: 	opacity: 0.6;
+140: 	z-index: 10;
+141: }
 
 Backtrace:
-css/sass/readium_paginator.scss:145:in `box-shadow'
-css/sass/readium_paginator.scss:145
+css/sass/readium_paginator.scss:136:in `box-shadow'
+css/sass/readium_paginator.scss:136
 /Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:170:in `visit_mixin'
 /Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:37:in `visit'
 /Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:18:in `visit'
@@ -78,4 +78,4 @@ css/sass/readium_paginator.scss:145
 body:before {
   white-space: pre;
   font-family: monospace;
-  content: "Syntax error: Undefined mixin 'box-shadow'.\A         on line 145 of css/sass/readium_paginator.scss, in `box-shadow'\A         from line 145 of css/sass/readium_paginator.scss\A \A 140:     position: absolute;\A 141:     top: 2%;\A 142:     left: 50%;\A 143:     height:96%;\A 144:     width: 1px;\A 145:     @include box-shadow(0 0 15px 3px rgba(5, 5, 5, 0.7));\A 146: 	display: none;\A 147: 	background-color: #444;\A 148: 	opacity: 0.6;\A 149: 	z-index: 10;\A 150: }"; }
+  content: "Syntax error: Undefined mixin 'box-shadow'.\A         on line 136 of css/sass/readium_paginator.scss, in `box-shadow'\A         from line 136 of css/sass/readium_paginator.scss\A \A 131:     position: absolute;\A 132:     top: 2%;\A 133:     left: 50%;\A 134:     height:96%;\A 135:     width: 1px;\A 136:     @include box-shadow(0 0 15px 3px rgba(5, 5, 5, 0.7));\A 137: 	display: none;\A 138: 	background-color: #444;\A 139: 	opacity: 0.6;\A 140: 	z-index: 10;\A 141: }"; }

css/sass/light_theme.scss

@@ -1,3 +1,40 @@
-.light_theme {
-	
+//.light_theme { <---- eventually we will scope all this in the theme, but for now there is only one
+
+// general styles
+
+html, body, #container { 
+	background-color: #BBB;
+}
+
+// reflowable paginated style
+
+	.page-margin {
+		@include box-shadow(0 0 5px 5px #777);
+	}
+
+	.page-margin, .page {
+		background-color: #FFF;
+	}
+
+	#content {
+		color: #EEE;
+	}
+
+.dark-theme {
+	#readium-content-container {
+		color: #030303;
+	}
+
+	.page-margin {
+		border-left: 1px solid #000;
+		border-right: 1px solid #000;
+	}
+
+	.page-margin, .page {
+		background-color: #444;
+	}
+
+	#content {
+		color: #EEE;
+	}
 }

css/sass/readium_paginator.scss

@@ -4,7 +4,6 @@ html, body {
 	height: 100%;  
 	width: 100%;
 	overflow: hidden;
-	background-color: #BBB;
 }
 
 #container {
@@ -20,7 +19,6 @@ html, body {
 }
 
 #content {
-    color: #444;
     font: normal 16px/1.25 'Helvetica Neue', sans-serif;
 }
 
@@ -62,8 +60,6 @@ html, body {
 	width: 60%;
 	margin: 0 auto;
 	padding: 0;
-	-webkit-box-shadow: 0 0 5px 5px #888;
-	background-color: white;
 	overflow: visible;
 }
 
@@ -75,7 +71,6 @@ html, body {
 }
 
 .page {
-    background-color: white;
     border: none;
     content: -webkit-from-flow('foo');
     -webkit-flow-from: foo;
@@ -92,10 +87,6 @@ html, body {
 	width: 0px;
 }
 
-#container {
-	background-color: #BBB;
-}
-
 .clearfix:after {
     content: " ";
     display: block;

css/sass/top_bar.scss

@@ -2,24 +2,27 @@
 
 #toolbar-el {
 	height: 40px;
+	width: 100%;
+	padding: 0;
+	margin: 0;
 }
 
 #top-bar {
 	width: 100%;
 	position: fixed;
-	height: 30px;
-	padding-top: 10px;
+	height: 40px;
 	top: 0px;
 	z-index: 1000;
 	opacity: 0.9;
 	-moz-opacity: 0.9;
 	filter:alpha(opacity=9);
 	@include transition (all 0.3s linear);
 	@include linear-gradient(top, #353F5E, #000011);
-	text-align: center;
 	color: #DDD;
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 	border-bottom: 3px solid #6FA64D;
+	padding: 0; margin: 0;
+	text-align: center;
 }
 
 #back-to-lib-button {
@@ -28,26 +31,54 @@
 }
 
 
-img#readium-icon {
-	height: 25px;
-	width: 45px;
-	margin: auto 0px;
-	padding: 0px;
-	position: relative;
-	display: inline;
+.top-bar-button {
+	margin-top: 8px;
 }
 
-.top-bar-button img#readium-icon{
-	top: 0px;
+
+#right-wrapper {
+	float: right;
 }
 
 #bar-logo {
+	text-decoration: none;
+	img {
+			max-height: 37px;
+			max-width: 139px;
+	}
+}
+
+
+#show-toolbar-button {
+	width: 25px;
+	height: 18px;	
+	background-color: #838383;
+	border: 1px solid #555;
 	position: relative;
-	top: -10px;
-	right: 20px;
+	top: 10px; right: 10px;
+	text-align: center;
+	@include border-radius(4px);
 	img {
-		max-height: 37px;
-		max-width: 139px;
-		clear: both;
+		margin-top: 2px;
 	}
+}
+
+#hide-toolbar-button {
+	height: 40px;
+	display: inline-block;
+	position: relative;
+	top: -30px;
+	img {
+		position: relative;
+		top: 15px;
+		right: 1px;
+	}
+}
+
+.bar-divider {
+	width: 0;
+	height: 40px;
+	display: inline-block;
+	border-left: 1px solid black;
+	border-right: 1px solid #353F5E;
 }

css/sass/viewer_manifest.scss

@@ -5,4 +5,5 @@
 @import 'readium_info_modal';
 @import 'scrolling_paginator';
 @import 'toc';
-@import 'top_bar';
+@import 'top_bar';
+@import 'light_theme';

css/top_bar.css

@@ -1,23 +1,23 @@
 /*
 Syntax error: Undefined mixin 'transition'.
-        on line 17 of css/sass/top_bar.scss, in `transition'
-        from line 17 of css/sass/top_bar.scss
+        on line 19 of css/sass/top_bar.scss, in `transition'
+        from line 19 of css/sass/top_bar.scss
 
-12: 	top: 0px;
-13: 	z-index: 1000;
-14: 	opacity: 0.9;
-15: 	-moz-opacity: 0.9;
-16: 	filter:alpha(opacity=9);
-17: 	@include transition (all 0.3s linear);
-18: 	@include linear-gradient(top, #353F5E, #000011);
-19: 	text-align: center;
-20: 	color: #DDD;
-21: 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
-22: 	border-bottom: 3px solid #6FA64D;
+14: 	top: 0px;
+15: 	z-index: 1000;
+16: 	opacity: 0.9;
+17: 	-moz-opacity: 0.9;
+18: 	filter:alpha(opacity=9);
+19: 	@include transition (all 0.3s linear);
+20: 	@include linear-gradient(top, #353F5E, #000011);
+21: 	color: #DDD;
+22: 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
+23: 	border-bottom: 3px solid #6FA64D;
+24: 	padding: 0; margin: 0;
 
 Backtrace:
-css/sass/top_bar.scss:17:in `transition'
-css/sass/top_bar.scss:17
+css/sass/top_bar.scss:19:in `transition'
+css/sass/top_bar.scss:19
 /Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:170:in `visit_mixin'
 /Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/base.rb:37:in `visit'
 /Users/matthew/.rvm/gems/ruby-1.9.2-p290@readium/gems/sass-3.1.15/lib/sass/tree/visitors/perform.rb:18:in `visit'
@@ -78,4 +78,4 @@ css/sass/top_bar.scss:17
 body:before {
   white-space: pre;
   font-family: monospace;
-  content: "Syntax error: Undefined mixin 'transition'.\A         on line 17 of css/sass/top_bar.scss, in `transition'\A         from line 17 of css/sass/top_bar.scss\A \A 12: 	top: 0px;\A 13: 	z-index: 1000;\A 14: 	opacity: 0.9;\A 15: 	-moz-opacity: 0.9;\A 16: 	filter:alpha(opacity=9);\A 17: 	@include transition (all 0.3s linear);\A 18: 	@include linear-gradient(top, #353F5E, #000011);\A 19: 	text-align: center;\A 20: 	color: #DDD;\A 21: 	font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif; \A 22: 	border-bottom: 3px solid #6FA64D;"; }
+  content: "Syntax error: Undefined mixin 'transition'.\A         on line 19 of css/sass/top_bar.scss, in `transition'\A         from line 19 of css/sass/top_bar.scss\A \A 14: 	top: 0px;\A 15: 	z-index: 1000;\A 16: 	opacity: 0.9;\A 17: 	-moz-opacity: 0.9;\A 18: 	filter:alpha(opacity=9);\A 19: 	@include transition (all 0.3s linear);\A 20: 	@include linear-gradient(top, #353F5E, #000011);\A 21: 	color: #DDD;\A 22: 	font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif; \A 23: 	border-bottom: 3px solid #6FA64D;\A 24: 	padding: 0; margin: 0;"; }