Fixed read in browser button in caliblur theme

cps/static/css/caliBlur.css

@@ -3133,7 +3133,7 @@ div.btn-group[role=group][aria-label="Download, send to Kindle, reading"] > div.
     float: left
 }
 
-#add-to-shelf, #btnGroupDrop1, #read-in-browser, #sendbtn, .book-meta .btn-toolbar > .btn-group > .btn-group:nth-child(1) > a:first-of-type, .book-meta .btn-toolbar > .btn-group > .btn-warning, .btn-toolbar > .btn-group > #btnGroupDrop2, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 {
+#add-to-shelf, #btnGroupDrop1, #readbtn,  #sendbtn, .book-meta .btn-toolbar > .btn-group > .btn-group:nth-child(1) > a:first-of-type, .book-meta .btn-toolbar > .btn-group > .btn-warning, .btn-toolbar > .btn-group > #btnGroupDrop2, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 {
     background: 0 0;
     color: transparent;
     width: 50px;
@@ -3142,20 +3142,16 @@ div.btn-group[role=group][aria-label="Download, send to Kindle, reading"] > div.
     overflow: hidden;
     padding: 0
 }
-#readbtn {
-  height: 100%;
-  padding: 16px;
-}
 
 #add-to-shelf > span.caret, #btnGroupDrop1 > span.caret, #read-in-browser > span.caret, .btn-toolbar > .btn-group > #btnGroupDrop2 > span.caret, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span.caret {
     padding-bottom: 5px
 }
 
-#add-to-shelf > span, #btnGroupDrop1 > span, #read-in-browser > span, #sendbtn > span, .book-meta .btn-toolbar > .btn-group > .btn-group:nth-child(1) > a:first-of-type > span, .book-meta .btn-toolbar > .btn-group > .btn-warning > span, .btn-toolbar > .btn-group > #btnGroupDrop2 > span, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span {
+#add-to-shelf > span, #btnGroupDrop1 > span, #readbtn > span, #sendbtn > span, .book-meta .btn-toolbar > .btn-group > .btn-group:nth-child(1) > a:first-of-type > span, .book-meta .btn-toolbar > .btn-group > .btn-warning > span, .btn-toolbar > .btn-group > #btnGroupDrop2 > span, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span {
     color: hsla(0, 0%, 100%, .7)
 }
 
-#add-to-shelf:hover span, #btnGroupDrop1:hover > span, #read-in-browser:hover > span, #sendbtn:hover > span, .book-meta .btn-toolbar > .btn-group > .btn-group:nth-child(1) > a:first-of-type:hover > span, .book-meta .btn-toolbar > .btn-group > .btn-warning:hover > span, .btn-toolbar > .btn-group > #btnGroupDrop2:hover > span, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2:hover > span {
+#add-to-shelf:hover span, #btnGroupDrop1:hover > span, #readbtn:hover > span, #sendbtn:hover > span, .book-meta .btn-toolbar > .btn-group > .btn-group:nth-child(1) > a:first-of-type:hover > span, .book-meta .btn-toolbar > .btn-group > .btn-warning:hover > span, .btn-toolbar > .btn-group > #btnGroupDrop2:hover > span, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2:hover > span {
     color: #fff
 }
 
@@ -3165,13 +3161,13 @@ div.btn-group[role=group][aria-label="Download, send to Kindle, reading"] > div.
     font-size: 18px
 }
 
-#sendbtn > span, .book-meta .btn-toolbar > .btn-group > .btn-group:nth-child(1) > a:first-of-type > span, .book-meta .btn-toolbar > .btn-group > .btn-warning > span.glyphicon-edit {
+#sendbtn > span, #readbtn > span, .book-meta .btn-toolbar > .btn-group > .btn-group:nth-child(1) > a:first-of-type > span, .book-meta .btn-toolbar > .btn-group > .btn-warning > span.glyphicon-edit {
     font-size: 16px;
     line-height: 54px;
     width: 100%
 }
 
-#read-in-browser > span.glyphicon-eye-open:before, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span.glyphicon-eye-open:before {
+#readbtn > span.glyphicon-book:before, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span.glyphicon-book:before {
     content: "\e352";
     font-family: Glyphicons Regular, serif;
     font-size: 18px;
@@ -5163,11 +5159,11 @@ body.login > div.navbar.navbar-default.navbar-static-top > div > div.navbar-head
     right: 5px
 }
 
-#read-in-browser[aria-expanded=true], #shelf-actions > .btn-group.open, .downloadBtn.open, .profileDrop[aria-expanded=true] {
+#shelf-actions > .btn-group.open, .downloadBtn.open, .profileDrop[aria-expanded=true] {
     pointer-events: none
 }
 
-#btnGroupDrop1[aria-expanded=true] > span, #read-in-browser[aria-expanded=true] > span, #shelf-actions > .btn-group.open > #add-to-shelf > span {
+#btnGroupDrop1[aria-expanded=true] > span, #shelf-actions > .btn-group.open > #add-to-shelf > span {
     color: #fff
 }
 
@@ -7484,14 +7480,14 @@ body.edituser.admin > div.container-fluid > div.row-fluid > div.col-sm-10 > div.
     margin-left: 8px
 }
 
-#read-in-browser > span.caret, .btn-toolbar > .btn-group > #btnGroupDrop2 > span.caret, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span.caret {
+.btn-toolbar > .btn-group > #btnGroupDrop2 > span.caret, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span.caret {
     position: absolute;
     margin-left: 0;
     left: 33px;
     top: 28px
 }
 
-#read-in-browser > span.glyphicon-eye-open:before, .btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span.glyphicon-eye-open:before {
+.btn-toolbar > .btn-group > .btn-group > #btnGroupDrop2 > span.glyphicon-eye-open:before {
     margin-left: 8px
 }
 
@@ -7892,7 +7888,7 @@ body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .glyphic
     }
 }
 
-#sendbtn2 {
+#sendbtn2, #read-in-browser {
     background: 0 0;
     color: transparent;
     width: 50px;
@@ -7902,15 +7898,15 @@ body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .glyphic
     padding: 0
 }
 
-#sendbtn2 > span {
+#sendbtn2 > span, #read-in-browser > span {
     color: hsla(0, 0%, 100%, .7)
 }
 
-#sendbtn2 > span.glyphicon-send:before {
+#sendbtn2 > span.glyphicon-send:before, #read-in-browser > span.glyphicon-book:before  {
     margin-left: 8px
 }
 
-#sendbtn2 > span.caret {
+#sendbtn2> span.caret, #read-in-browser > span.caret {
     position: absolute;
     margin-left: 0;
     left: 33px;
@@ -7918,11 +7914,11 @@ body.mailset > div.container-fluid > div > div.col-sm-10 > div.discover .glyphic
     padding-bottom: 5px
 }
 
-#sendbtn2:focus span, #sendbtn2:hover span {
+#sendbtn2:focus span, #sendbtn2:hover span, #read-in-browser:focus span, #read-in-browser:hover span {
     color: #fff
 }
 
-#sendbtn2[aria-expanded=true] {
+#sendbtn2[aria-expanded=true], #read-in-browser[aria-expanded=true] {
     pointer-events: none
 }
 

cps/templates/detail.html

@@ -57,7 +57,7 @@
               <div class="btn-group" role="group">
               {% if reader_list|length > 1 %}
                 <button id="read-in-browser" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  <span class="glyphicon glyphicon-eye-open"></span> {{_('Read in Browser')}}
+                  <span class="glyphicon glyphicon-book"></span> {{_('Read in Browser')}}
                   <span class="caret"></span>
                 </button>
                     <ul class="dropdown-menu" aria-labelledby="read-in-browser">
@@ -66,7 +66,7 @@
                     {%endfor%}
                     </ul>
                 {% else %}
-                  <a target="_blank" href="{{url_for('web.read_book', book_id=entry.id, book_format=reader_list[0])}}" id="readbtn" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-eye-open"></span> {{_('Read in Browser')}} - {{reader_list[0]}}</a>
+                  <a target="_blank" href="{{url_for('web.read_book', book_id=entry.id, book_format=reader_list[0])}}" id="readbtn" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-book"></span> {{_('Read in Browser')}} - {{reader_list[0]}}</a>
                 {% endif %}
               </div>
             {% endif %}