projects / bookreader.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Merge raj's read to me feature.
[bookreader.git] / BookReader / BookReader.css
diff --git a/BookReader/BookReader.css b/BookReader/BookReader.css
index c019d16..4774b81 100644 (file)
--- a/BookReader/BookReader.css
+++ b/BookReader/BookReader.css
@@ -22,21 +22,24 @@ h3 {
     position: fixed;
     top: 0;
     left: 0;
-    height: 50px;
+    height: 40px;
     padding: 0;
     width: 100%;
     z-index: 100;
     background-color: #e2dcc5;
+    overflow: hidden;
 }
 #BRtoolbar .label {
     font-size: 1.1em;
     color: #999;
 }
 #BRtoolbar a {
-    color: #ccc!important;
+    color: #ccc;
     text-decoration: underline;
 }
-
+#BRtoolbarbuttons {
+    float: right;
+}
 #BRcontainer {
     top:5px;
     bottom:5px;
@@ -45,6 +48,7 @@ h3 {
     overflow-x:auto;
     overflow-y:scroll;    
     position:absolute;
+    background-color: #939598;
 }
 
 #BRpageview {
@@ -82,12 +86,14 @@ h3 {
 }
 
 #BRbookcover {
-    border: 1px solid rgb(68, 25, 17);
-    background-color: #663929;
-    -moz-border-radius: 6px;
-    -moz-box-shadow: 3px 3px 8px #222;
-    -webkit-border-radius: 6px;
-    -webkit-box-shadow: 2px 2px 8px #222;
+    /* border: 1px solid rgb(68, 25, 17); */
+    /* background-color: #663929; */
+    position: absolute;
+    background-image: url(images/back_pages.png);
+    -moz-box-shadow: 1px 0 3px #000;
+    -webkit-box-shadow: 1px 0 3px #000;
+    /* -moz-border-radius: 6px; */
+    /* -webkit-border-radius: 6px; */
 }
 
 .BRpageimage {
@@ -95,19 +101,23 @@ h3 {
 }
 
 .BRleafEdgeR {
+    /*
     border-style: solid solid solid none;
     border-color: rgb(51, 51, 34);
     border-width: 1px 1px 1px 0px;
-    background: transparent url(images/right_edges.png) repeat scroll 0% 0%;
+    */
+    background: transparent url(images/back_pages.png) repeat scroll 0% 0%;
     position: absolute;
 }
 
 .BRleafEdgeL {
+    /*
     border-style: solid none solid solid;
     border-color: rgb(51, 51, 34);
     border-width: 1px 0px 1px 1px;
+    */
     /* background: transparent url(images/left_edges.png) repeat scroll 0% 0%; */
-    background: transparent url(image/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
+    background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
     position: absolute;
 }
 
@@ -120,8 +130,8 @@ h3 {
     position: absolute;
 }
 
-#BRbookspine {
-    border: 1px solid rgb(68, 25, 17);
+#BRbookspine {    
+    /* border: 1px solid rgb(68, 25, 17); */
     background-color: rgb(68, 25, 17);
     position: absolute;
 }
@@ -152,6 +162,7 @@ h3 {
     filter: alpha(opacity = 20);
     background-color: #00f;
     position:absolute;
+}
 
 .hidden {
   display: none;
@@ -168,12 +179,31 @@ h3 {
     font-size: 12px;
     font-weight: 700;
 }
-
+#BRreturn {
+    /* display: block; */
+    /* float: left; */
+    /* margin: 0 10px 0 5px; */
+    font-family: "Lucida Grande","Arial",sans-serif;
+    color: #333;
+    height: 20px;
+}
+#BRreturn span {
+    font-size: 12px;
+    display: block;
+    height: 12px;
+}
+#BRreturn a {
+    font-size: 14px;
+    display: block;
+    color: #036daa;
+    height: 18px;
+    overflow: hidden;
+}
 .BRicon {
     display: block;
     float: left;
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
     padding: 0;
     margin: 0;
     vertical-align: middle;
@@ -184,39 +214,41 @@ h3 {
     background-repeat: no-repeat;
 }
 
-/* Absolute path used since the html might be generated at /stream/id or elsewhere */
 .BRicon.logo {background-position:0 0;}
-.BRicon.fit {background-position:-50px 0;}
-.BRicon.fit:hover {background-position:-100px 0;}
-.BRicon.glass {background-position:-150px 0;cursor:default;}
-/*.BRicon.glass:hover {background-position:-200px 0;}*/
-.BRicon.bookmark {background-position:-250px 0;}
-.BRicon.bookmark:hover {background-position:-300px 0;}
-.BRicon.print {background-position:-350px 0;}
-.BRicon.print:hover {background-position:-400px 0;}
-.BRicon.link {background-position:-450px 0;}
-.BRicon.link:hover {background-position:-500px 0;}
-.BRicon.embed {background-position:-550px;}
-.BRicon.embed:hover {background-position:-600px 0;}
-.BRicon.read {background-position:-650px 0;}
-.BRicon.read:hover {background-position:-700px 0;}
-.BRicon.full {background-position:-750px 0;}
-.BRicon.full:hover {background-position:-800px 0;}
-.BRicon.thumb {background-position:-850px 0;}
-.BRicon.thumb:hover {background-position:-900px 0;}
-.BRicon.twopg {background-position:-950px 0;display:none;}
-.BRicon.twopg:hover {background-position:-1000px 0;}
+.BRicon.info {background-position:-40px 0;}
+.BRicon.info:hover {background-position:-80px 0;}
+.BRicon.share {background-position:-120px 0;}
+.BRicon.share:hover {background-position:-160px 0;}
+.BRicon.read {background-position:-200px 0;}
+.BRicon.read:hover {background-position:-240px 0;}
+.BRicon.unread {background-position:-280px 0;}
+.BRicon.unread:hover {background-position:-320px 0;}
+.BRicon.full {background-position:-360px 0;}
+.BRicon.full:hover {background-position:-400px 0;}
+.BRicon.book_left {background-position:-440px 0;}
+.BRicon.book_left:hover {background-position:-480px 0;}
+.BRicon.book_right {background-position:-520px 0;}
+.BRicon.book_right:hover {background-position:-560px 0;}
+.BRicon.zoom_out {background-position:-606px 0;}
+.BRicon.zoom_out:hover {background-position:-646px 0;}
+.BRicon.zoom_in {background-position:-686px 0;}
+.BRicon.zoom_in:hover {background-position:-726px 0;}
+
 
 /* NOT CURRENTLY IN USE
-.BRicon.zoom_out {background-position:;}
-.BRicon.zoom_out:hover {background-position:;}
-.BRicon.zoom_in {background-position:;}
-.BRicon.zoom_in:hover {background-position:;}
+.BRicon.embed {background-position:-440px;}
+.BRicon.embed:hover {background-position:-480px 0;}
+.BRicon.read {background-position:-520px 0;}
+.BRicon.read:hover {background-position:-560px 0;}
+.BRicon.full {background-position:-600px 0;}
+.BRicon.full:hover {background-position:-640px 0;}
+.BRicon.thumb {background-position:-680px 0;}
+.BRicon.thumb:hover {background-position:-720px 0;}
+.BRicon.twopg {background-position:-760px 0;display:none;}
+.BRicon.twopg:hover {background-position:-800px 0;}
 .BRicon.one_page_mode {background-position:;}
 .BRicon.two_page_mode {background-position:;}
 .BRicon.thumbnail_mode {background-position:;}
-.BRicon.book_left {background-position:;}
-.BRicon.book_right {background-position:;}
 .BRicon.book_up {background-position:;}
 .BRicon.book_down {background-position:;}
 .BRicon.book_leftmost {background-position:;}
@@ -229,10 +261,9 @@ h3 {
 a.logo {
     display: block;
     float: left;
-    width: 57px;
-    height: 46px;
+    width: 40px;
+    height: 40px;
     background: transparent url(images/icon_home.png) no-repeat 0 0;
-    margin: 12px 10px 0 10px;
 }
 a.popOff {
     position: absolute;
@@ -256,18 +287,20 @@ a.popOff span {
 
 form#booksearch {
     float: left;
-    margin-right: 40px;
+    margin-right: 10px;
 }
 form#booksearch input[type=search] {
-    width: 216px;
-    height: 24px;
-    line-height: 24px;
+    width: 280px;
+    height: 22px;
+    line-height: 22px;
     font-family: "Arial", sans-serif;
-    font-size: 12px;
+    font-size: 13px;
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: field;
-    margin-top: 13px;
+    margin: 9px 0 0 0;
+    padding: 0;
+    border: 1px inset #ccc;
 }
 form#booksearch button {
     width: 30px;
@@ -339,15 +372,18 @@ a.BRgrey:visited   { color: #666; }
     background-image: url(images/transparent.png); # Required to capture mouse on IE
 }
 
-/* XXXmang still needed? */
 .BRtwoPagePopUp {
-    border: 1px solid black;
-    padding: 2px 6px;
+    padding: 6px;
     position: absolute;
-    font-family: sans-serif;
-    font-size: 14px;
-    background-color: rgb(255, 255, 238);
-    opacity: 0.85;
+    font-family: Arial, sans-serif;
+    font-size: 11px;
+    color: white;
+    background-color: #939598;
+    opacity: 0.85,
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    white-space: nowrap;
 }
 
 /* COLORBOX POP-UP */
@@ -371,32 +407,129 @@ a.BRgrey:visited   { color: #666; }
         #cboxClose{position:absolute;top:20px;right:20px;display:block;width:32px;height:32px;background-image:url(/images/icons/icon_close-pop.png);background-position:0 0;background-repeat:no-repeat;}
         #cboxClose:hover{background-position:0 -32px;}
 
+div#BRpage {
+    float: right;
+    width: 80px;
+    padding-left:12px;
+    text-align: right;
+}
 div#BRnav {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 50px;
+    height: 40px;
     overflow: visible;
     z-index: 100;
     background-color: #e2dcc5;    
 }
 div#BRnavpos {
     position: relative;
-    width: 100%;
-    height: 50px;
+    margin-right: 80px;
+    height: 40px;
+}
+div#BRpager {
+    position: relative;
+    margin-left: -10px;
+    height: 40px;
+}
+div#BRslider {
+    position: absolute;
+    top: 13px;
+    height: 27px;
+}
+
+/* XXXmang verify correct use of handle class */
+#BRpager .ui-slider-handle {
+    position: absolute;
+    width: 23px;
+    height: 27px;
+    top: 13px;
+    left: -11px;
+    background: url(images/slider.png);
+    z-index: 103;
+}
+ /*   
+  width: 8px;
+  height: 14px;
+  position: absolute;
+  top: -4px;
+  background: #478AFF;
+  border: solid 1px black;
+}
+*/
+
+div#BRfiller {
+    position: absolute;
+    height: 40px;
+    width: 10px;
+    background-color: #e2dcc5;
+    top: 0;
+    left: 0;
+    z-index: 102;
+}
+div#slider {
+    position: absolute;
+    width: 2500px;
+    height: 27px;
+    top: 0;
+    left: -2478px;
+    background-color: #000;
+    opacity: .1;
+    z-index: 101;
+}
+div#pager {
+    position: absolute;
+    width: 23px;
+    height: 27px;
+    top: 0;
+    left: 8px;
+    background: url(images/slider.png);
+    z-index: 103;
+}
+div#pagenum {
+    display: none;
+    position: absolute;
+    left: 24px;
+    top: 4px;
+    color: #999;
+    font-size: 11px;
+    line-height: 19px;
+    font-weight: 700;
+    padding: 0 5px;
+    width: 80px;
+    text-align: right;
+    background-color: #000;
+    font-family: "Lucida Grande", "Arial", sans-serif;
+}
+div#pagenum span {
+    color: #ffa337;
+    font-style: italic;
 }
 div#BRnavline {
     position: relative;
-    margin: 0 20px;
     height: 2px;
     width: auto;
     background-color: #000;
-    top: 24px;
+    top: -29px;
+    margin: 0 10px;
+}
+.BRnavend {
+    position: absolute;
+    top: -2px;
+    width: 1px;
+    height: 6px;
+    background-color: #000;
+}
+#BRnavleft {
+    left: 0;
+}
+#BRnavright {
+    right: 0;
 }
 div.chapter {
     position: absolute;
-    top: 0;
+    top: -13px;
     width: 18px;
     height: 27px;
     background: transparent url(images/marker_chap.png) no-repeat;
@@ -411,7 +544,7 @@ div.title span {
 }
 div.search {
     position: absolute;
-    top: 0;
+    top: -13px;
     width: 18px;
     height: 27px;
     background-color: transparent;
@@ -465,7 +598,7 @@ div.search div.pointer {
 }
 div.searchChap {
     position: absolute;
-    top: 0;
+    top: -13px;
     width: 18px;
     height: 27px;
     background-color: transparent;
@@ -479,12 +612,78 @@ div.searchChap.front {
 #BRnav .front {
     z-index: 10001;
 }
-div#pager {
+div#BRzoomer {
+    position: fixed;
+    bottom: 40px;
+    right: 0;
+    width: 26px;
+    height: 190px;
+    z-index: 100;
+}
+div#BRzoompos {
+    position: relative;
+    width: 26px;
+    height: 190px;
+    top: 0;
+    left: 0;
+}
+div#BRzoomer button {
     position: absolute;
-    top: 11px;
-    left: 5px;
-    width: 30px;
-    height: 30px;
-    background: transparent url(images/focus_chap.png) no-repeat 0 0;
-    cursor: e-resize;
+    left: 0;
+    background-color: #e2dcc5;
+    width: 26px;
+}
+div#BRzoomer button:hover {
+    background-color: #000;
+}
+div#BRzoomer .zoom_out {
+    top: 0;
+    -webkit-border-top-left-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+    -moz-border-radius-topleft: 6px;
+    -moz-border-radius-bottomleft: 6px;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+    -webkit-box-shadow: 2px 2px 2px #333;
+    -moz-box-shadow: 2px 2px 2px #333;
+    box-shadow: 2px 2px 2px #333;
+}
+div#BRzoomer .zoom_in {
+    bottom: 0;
+    -webkit-border-top-left-radius: 6px;
+    -moz-border-radius-topleft: 6px;
+    border-top-left-radius: 6px;
+}
+div#BRzoomcontrol {
+    position: relative;
+    top: 40px;
+    left:3px;
+    width: 23px;
+    height: 110px;    
+}
+div#BRzoomstrip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 23px;
+    height: 110px;
+    background-color: #000;
+    opacity: .1;
+}
+div#BRzoombtn {
+    position: absolute;
+    width: 23px;
+    height: 23px;
+    top: 0;
+    left: 0;
+    background: url("images/icon_zoomer.png");
+}
+
+.BRttsPopUp {
+    position: absolute;
+    background-color: #E6E4E1;
+    background-image: url(images/progressbar.gif);
+    background-repeat:no-repeat;
+    font-size: 0.8em; 
+    z-index: 3;    
 }
Unnamed repository; edit this file 'description' to name the repository.