diff options
| -rw-r--r-- | css/read.css | 61 | ||||
| -rw-r--r-- | read.html | 45 |
2 files changed, 58 insertions, 48 deletions
diff --git a/css/read.css b/css/read.css index 93b1b05..07e4958 100644 --- a/css/read.css +++ b/css/read.css @@ -12,58 +12,81 @@ font-size : 18px; display : table; } + .loading > div { display : table-cell; vertical-align : middle; } + .notice { width : 120px; padding-left : 5px; } + .header { top : 5px; left : 0px; width : 100%; height : 24px; } + .footer { bottom : 5px; left : 0px; width : 100%; height : 24px; } + .header, .footer { position : absolute; font-size : 13px; - display : table; + display : flex; padding-left : 10px; padding-right : 10px; color : #999; - - table-layout : fixed; + align-items : center; } -.header > *, .footer > * { - display : table-cell; - vertical-align : middle; +.header .title, .footer .chapter { overflow : hidden; text-overflow: ellipsis; white-space : nowrap; } + .header .title { - margin-left : 16px; + margin-left : 10px; + flex-grow : 2; } + +.footer .chapter { + padding-right : 10px; +} + +.footer .spacer { + flex-grow : 2; +} + .footer .location { cursor : pointer; text-align : right; } + .toolbar { text-align : right; + display : flex; + flex-direction : row; } + .toolbar > * { - margin-left : 10px; cursor : pointer; + margin : 0 4px; + padding : 0 2px; +} + +.toolbar > *:last-child { + margin-right : 0; } + #reader { position : absolute; top : 32px; @@ -71,36 +94,24 @@ left : 32px; right : 32px; } + #left, #right { position : absolute; - top : 32px; - bottom : 32px; + top : 48px; + bottom : 48px; width : 0px; z-index : 10; } + #left { left : 0px; } + #right { right : 0px; } -@media (max-width: 992px) { - .toolbar { - width : 128px; - } -} - -@media (max-width: 767px) { - .toolbar { - width : 105px; - } -} - @media (max-width: 576px) { - .toolbar { - width : 105px; - } #reader { left : 24px; right : 24px; @@ -187,45 +187,44 @@ <div class="container"> <div class="header"> - <span> - <a href="#" onclick="save_and_close()">« Exit</a> - <span class="title"></span> - </span> - <span class="toolbar"> + <a href="#" onclick="save_and_close()">« Exit</a> + <div class="title"> </div> + <div class="toolbar"> - <span class="prev_location_btn" + <div class="prev_location_btn" onclick="open_previous_location(this)" style="display : none"> - <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> - </span> + <div class="glyphicon glyphicon-chevron-left" aria-hidden="true"></div> + </div> - <span data-toggle="modal" data-target="#search-modal"> - <span class="glyphicon glyphicon-search" aria-hidden="true"></span> - </span> + <div data-toggle="modal" data-target="#search-modal"> + <div class="glyphicon glyphicon-search" aria-hidden="true"></div> + </div> - <span onclick="toggle_fullscreen()"> - <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span> - </span> + <div onclick="toggle_fullscreen()"> + <div class="glyphicon glyphicon-fullscreen" aria-hidden="true"></div> + </div> - <span data-toggle="modal" data-target="#settings-modal"> - <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> - </span> + <div data-toggle="modal" data-target="#settings-modal"> + <div class="glyphicon glyphicon-wrench" aria-hidden="true"></div> + </div> - </span> + </div> </div> +<div id="left"></div> +<div id="right"></div> + +<div id="reader"></div> + <div class="footer"> <div class="chapter" data-toggle="modal" data-target="#toc-modal"></div> + <div class="spacer"> </div> <div class="location"> <span id="cur_page">?</span> / <span id="total_pages">?</span> (<span id="page_pct">?</span>) </div> </div> -<div id="left"></div> -<div id="right"></div> - -<div id="reader"></div> - <div class="loading"> <div class="loading_message"> Opening book... |