From 57ed5db808a602ffeb0d1f69040255d60e34520f Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 8 Feb 2013 23:08:44 +0400 Subject: [PATCH] did some work on magazine styling, added dark and light themes... Signed-off-by: Alex A. Naanou --- index.html | 10 ++-- magazine-custom.css | 112 +++++++++++++++++++++++++++++++++++++++++++- magazine.css | 34 ++++++++++---- 3 files changed, 141 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 4d5cb7b..c26ec8e 100755 --- a/index.html +++ b/index.html @@ -5,7 +5,8 @@ PortableMag - + + @@ -162,7 +163,7 @@ $(document).ready(function(){ -
+
@@ -300,7 +301,7 @@ $(document).ready(function(){
-
Magazine Title
+
Magazine Title
@@ -334,7 +335,7 @@ $(document).ready(function(){
-
+
@@ -918,7 +919,6 @@ $(document).ready(function(){ var t = parseInt($('#transition_duration').attr('value')) t = t == null ? TRANSITION_DURATION : t t = t < 25 ? 25 : t - console.log(t) TRANSITION_DURATION = t setTransitionDuration($('.scaler'), t) setTransitionDuration($('.magazine'), t) diff --git a/magazine-custom.css b/magazine-custom.css index 73eac0e..7ee5199 100755 --- a/magazine-custom.css +++ b/magazine-custom.css @@ -4,16 +4,23 @@ **********************************************************************/ /*************************************** main structural elements ****/ + .viewer { background: gray; } +.magazine { + background: transparent; +} + .magazine .cover { - background: white; +} + +.article { + background: transparent; } .article .cover { - background: white; } .page { @@ -22,8 +29,109 @@ font-family: Arial; } +.cover { + background: white; +} + + +.top-toolbar, .bottom-toolbar { + font-size: 14px; + color: silver; +} + +.top-toolbar .title, +.bottom-toolbar .title { + font-size: 40px; +} + +/* toolbar links */ +.top-toolbar a, .bottom-toolbar a { + color: silver; + text-decoration: none; +} + +.button { + font-size: 25px; + font-weight: bold; + cursor: hand; +} + +.bottom-toolbar .page-number { + color: gray; +} + +.navigator { +} + +.navigator .bar { + background: silver; +} + +.navigator .bar .indicator { + background: yellow; +} + +.navigator .bar .article { + background: white; +} + +.navigator .bar .bookmark { + background: red; +} + +.page-number-text { + color: gray; +} + + + + +/**************************************************** light theme ****/ + +.light { + color: gray; + background: white; +} + +.light.viewer { +} + +.magazine { +} + +.light .magazine .cover { +} + +.light .article .cover { +} + +.light .page { +} + + + +/**************************************************** dark theme ****/ + +.dark { + color: white; + background: black; +} + +.dark.viewer { +} + +.dark .magazine .cover { +} + +.dark .article .cover { +} + +.dark .page { +} + /*********************************************************************/ + body { font-family: arial; } diff --git a/magazine.css b/magazine.css index 938eb4c..c2d05fb 100755 --- a/magazine.css +++ b/magazine.css @@ -265,7 +265,6 @@ body { .top-toolbar, .bottom-toolbar { display: block; position: absolute; - z-index: 1000; text-align: center; overflow: hidden; @@ -287,6 +286,11 @@ body { bottom: 0px; width: 100%; } +.page-view-mode .top-toolbar, +.page-view-mode .bottom-toolbar { + display: none; +} + /* title */ .top-toolbar .title, .bottom-toolbar .title { @@ -304,12 +308,14 @@ body { text-align: right; } /* toolbar links */ -.top-toolbar a, .bottom-toolbar a { +.top-toolbar a, +.bottom-toolbar a { color: silver; text-decoration: none; } /* toolbar controls */ -.top-toolbar .controls, .bottom-toolbar .controls { +.top-toolbar .controls, +.bottom-toolbar .controls { margin-top: 10px; } /* toolbar buttons */ @@ -327,11 +333,6 @@ body { margin-left: 20px; margin-right: 20px; } -/* page view mode */ -.page-view-mode .top-toolbar, -.page-view-mode .bottom-toolbar { - height: 0px; -} /* page indicator */ .bottom-toolbar .page-number { @@ -528,6 +529,23 @@ body { +/*********************************************************************/ + +body { + font-family: arial; +} + +.page a, +.page a:visited, +.page a:active { + color: blue; +} +.page a:hover { + color: red; +} + + + /*********************************************************************/ /* keep this at the end... */ .unanimated {