Added icon toggle button for thumbnail mode
[bookreader.git] / GnuBook / GnuBook.css
index 0dc302e..9f0e06a 100644 (file)
@@ -1,12 +1,17 @@
 #GnuBook {
  border:1px solid black;
  position:absolute;
+ font-family: arial, sans-serif;
 }
 
 #GBtoolbar {
     height:25px;
     width:100%;
-    background-color: rgb(241, 239, 237);    
+    background-color: #E6E4E1;
+}
+
+#GBtoolbar .label {
+    font-size: 0.9em;
 }
 
 #GBcontainer {
     overflow-x:auto;
     overflow-y:scroll;    
     /*text-align: center;*/
-    background-color: #625E25;
+    background-color: #FCFCFC;
     position:absolute;
 }
 
+#GBpageview {
+    background-color: #FCFCFC;
+}
+
 .GBpagediv1up {
-    background-color: #ccc;
+    background-color: #FFFFEE;
     overflow:hidden;
-    border-right:3px solid #333;
-    border-bottom:3px solid #333;    
+    border-right: 2px solid #717171;
+    border-bottom: 2px solid #717171;
+    border-left: 1px solid #909090;
+    border-top: 1px solid #909090;
+    cursor: move;
 }
 
 .GBpagediv2up {
 #GnuBookSearch {
     border:1px solid black;
     position:absolute;
-    background-color: #625E25;    
+    background-color: #E6E4E1;
+    font-family: arial, sans-serif;
 }
 
 #GnuBookSearchResults {
-    background-color: #f8f8f8;  
+    background-color: #FCFCFC;
     top: 25px;
     bottom: 0px;
     overflow:auto;    
     position: absolute;
     left: 0px;
     right: 0px;    
+    font-family: arial, san-serif;
     font-size: 0.85em; 
     padding: 2px;
 }
     border: none;
 }
 
+/* Absolute path used since the html might be generated at /stream/id or elsewhere */
+.GBicon.logo { background: url(images/logo_icon.png) no-repeat; }
+.GBicon.zoom_out { background: url(images/zoom_out_icon.png) no-repeat; }
+.GBicon.zoom_in { background: url(images/zoom_in_icon.png) no-repeat; }
+.GBicon.one_page_mode { background: url(images/one_page_mode_icon.png) no-repeat; }
+.GBicon.two_page_mode { background: url(images/two_page_mode_icon.png) no-repeat; }
+.GBicon.thumbnail_mode { background: url(images/thumbnail_mode_icon.png) no-repeat; }
+.GBicon.embed { background: url(images/embed_icon.png) no-repeat; }
+.GBicon.book_left { background: url(images/book_left_icon.png) no-repeat; }
+.GBicon.book_right { background: url(images/book_right_icon.png) no-repeat; }
+.GBicon.book_up { background: url(images/book_up_icon.png) no-repeat; }
+.GBicon.book_down { background: url(images/book_down_icon.png) no-repeat; }
+.GBicon.book_leftmost { background: url(images/book_leftmost_icon.png) no-repeat; }
+.GBicon.book_rightmost { background: url(images/book_rightmost_icon.png) no-repeat; }
+.GBicon.book_top { background: url(images/book_top_icon.png) no-repeat; }
+.GBicon.book_bottom { background: url(images/book_bottom_icon.png) no-repeat; }
+
+
+.GBicon.play { background: url(images/control_play_icon.png) no-repeat; }
+.GBicon.pause { background: url(images/control_pause_icon.png) no-repeat; }
+
+/* Icons with this class should have a 48x24 image which contains
+   the regular and hover images side-by-side */
+.GBicon.rollover:hover { background-position: -24px 0; }
+
+/* Special logic for the logo, which is an actual link */
+a.GBicon {
+    display: block;
+    text-decoration: none;
+    border: none;
+    float: left;
+}
+
 /* footer stuff, from Rebecca's demo */
 #GBfooter { 
     position:absolute;
     /*width: 100%;*/    /* this causes horizontal scroll bar in FF */
     right: 0px;
     clear: both; 
-    color: #FFF
+    color: #000000
     padding: 0px 0px 0px 10px; 
-    background: #625E25
+    background: #CCCCCC
     height: 2em; 
     line-height: 25px; 
     vertical-align: middle; 
-    font-size: 12px; 
+    font-family: arial, sans-serif;
+    font-size: 12px;
 }
 
 .GBlogotype {
@@ -100,6 +148,10 @@ a.GBwhite                  { color: #fff }
 a.GBwhite:hover                { text-decoration: none; }
 a.GBwhite:visited              { color: #fff }
 
+a.GBblack           { color: #000000 }
+a.GBblack:hover     { text-decoration: none; }
+a.GBblack:visited   { color: #000000 }
+
 .GBnavlinks {
     float:right; 
     padding: 0px 20px 0px 0px; 
@@ -129,15 +181,6 @@ a.GBwhite:visited          { color: #fff }
     float: left; 
 }
 
-.GBicon.zoom_out { background: url(images/zoom_out.png) no-repeat; }
-.GBicon.zoom_in { background: url(images/zoom_in.png) no-repeat; }
-.GBicon.script { background: url(images/script.png) no-repeat; }
-.GBicon.book_open { background: url(images/book_open.png) no-repeat; }
-.GBicon.page_code { background: url(images/page_code.png) no-repeat; }
-.GBicon.book_left { background: url(images/book_left.png) no-repeat; }
-.GBicon.book_right { background: url(images/book_right.png) no-repeat; }
-.GBicon.book_up { background: url(images/page_white_get.png) no-repeat; }
-.GBicon.book_down { background: url(images/page_white_put.png) no-repeat; }
-
-.GBicon.play { background: url(images/control_play_blue.png) no-repeat; }
-.GBicon.pause { background: url(images/control_pause_blue.png) no-repeat; }
+.GBfliparea {
+    background-image: url(images/transparent.png); # Required to capture mouse on IE
+}