diff options
-rw-r--r-- | css/app.less | 282 | ||||
-rw-r--r-- | css/reader_iframe.css | 44 | ||||
-rw-r--r-- | dist/app.min.css | 1 | ||||
-rw-r--r-- | dist/reader_iframe.min.css | 1 |
4 files changed, 328 insertions, 0 deletions
diff --git a/css/app.less b/css/app.less new file mode 100644 index 0000000..f27291a --- /dev/null +++ b/css/app.less @@ -0,0 +1,282 @@ +body.epube-index { + .display-flex { + display: flex; + flex-wrap: wrap; + } + + .separate-search { + padding : 8px; + } + + .row { + > div { + padding-top : 10px; + } + + .thumbnail { + height : 200px; + width : 140px; + margin-bottom : 0; + } + + @media(max-width: 641px) { + .col-xxs-6 { + width: 50%; + } + } + + .thumbnail img { + width : 100%; + height : 100%; + background-size : cover; + background-position : center; + background-repeat: no-repeat; + } + + .thumbnail.read img { + opacity : 0.5; + filter : grayscale(100%); + } + } + + .epube-app-filler { + height : 60px; + display : none; + } + + .in_progress { + font-style : italic; + } + + .caption div { + overflow : hidden; + text-overflow: ellipsis; + white-space : nowrap; + } + + ::selection { + background : #007d71; + color : white; + } + + ::-webkit-scrollbar { + width: 4px; + } + + ::-webkit-scrollbar-thumb { + background-color: #007d71; + } + + ::-webkit-scrollbar-track { + background-color: #eee; + } + +} + +body.epube-reader { + + .loading { + position : absolute; + color : #999; + top : 0px; + left : 0px; + height : 100%; + width : 100%; + z-index : 32; + text-align : center; + background : white; + padding : 16px; + 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 : flex; + padding-left : 10px; + padding-right : 10px; + color : #999; + align-items : center; + } + + .header .title, .footer .chapter_wrapper { + overflow : hidden; + text-overflow: ellipsis; + white-space : nowrap; + } + + .header .title { + margin-left : 10px; + flex-grow : 2; + text-align : center; + font-weight : bold; + } + + .footer .chapter_wrapper { + padding-right : 10px; + cursor : pointer; + } + + .footer .spacer { + flex-grow : 2; + position : relative; + height : 12px; + } + + .footer .spacer .toc-bar-entry { + position : absolute; + background: #999; + top: 0; + bottom : 0; + width : 1px; + } + + .footer .spacer .toc-bar-entry.current-position { + background : #C33; + } + + .footer .location { + cursor : pointer; + text-align : right; + } + + @media (max-width: 539px) { + .spacer > .toc-bar-entry { + display : none; + } + } + + @media (min-width: 540px) { + .footer .chapter_wrapper, .footer .location { + width : 25%; + } + } + + @media (min-width: 800px) { + .footer .chapter_wrapper, .footer .location { + width : 20%; + } + } + + .toolbar { + text-align : right; + display : flex; + flex-direction : row; + } + + .toolbar > * { + cursor : pointer; + margin : 0 4px; + padding : 0 2px; + } + + .toolbar > *:last-child { + margin-right : 0; + } + + #reader { + position : absolute; + top : 32px; + bottom : 32px; + left : 32px; + right : 32px; + } + + #left, #right { + position : absolute; + top : 48px; + bottom : 48px; + width : 0px; + z-index : 10; + } + + #left { + left : 0px; + } + + #right { + right : 0px; + } + + @media (max-width: 576px) { + #reader { + left : 24px; + right : 24px; + } + } + + .chapter { + cursor : pointer; + } + + .toc_list, .search_results, .dict_result { + max-height : 300px; + height : auto; + overflow : auto; + } + + .dict_result h1, + .dict_result h2, + .dict_result h3 { + font-size : 14px; + margin-top : 0; + } + + .dict_result h2 { + font-weight : bold; + } + + .toc_list b.pull-right, + .search_results b.pull-right { + margin-right : 8px; + margin-left : 16px; + } + + .toc_sublist { + margin-left : 16px; + } + + ::-webkit-scrollbar { + width: 4px; + } + + ::-webkit-scrollbar-thumb { + background-color: rgba(0,0,0,0.2); + } + + ::-webkit-scrollbar-track { + background-color:rgba(0,0,0,0.1); + } +} + +body.is-epube-app.epube-reader { + .header .toolbar, + .header a { + display : none; + } +} diff --git a/css/reader_iframe.css b/css/reader_iframe.css new file mode 100644 index 0000000..1b222ea --- /dev/null +++ b/css/reader_iframe.css @@ -0,0 +1,44 @@ +a { + color : #007d71; + text-decoration : none; +} + +a:visited { + text-decoration: underline; +} + +a:hover, +a:focus { + color: #00302c; + text-decoration: underline; +} + +blockquote { + font-style : italic; +} + +/* ugly hack: this assumes default prefix used for epube - /books/ + * since CSS is loaded inline, relative urls won't work properly so + * it's hardcoded for the time being (the alternative is pointing to + * website root) */ + +/* fonts below are freely available although license is likely proprietary + * so i'm not bundling the files */ + +@font-face { + font-family: Caecilia; + src: local('PMN Caecilia 55'), url('/books/lib/fonts/pmn-caecilia-55.ttf') format('truetype'); + font-weight : normal; +} + +@font-face { + font-family: Caecilia; + src: local('PMN Caecilia 75'), url('/books/lib/fonts/pmn-caecilia-75.ttf') format('truetype'); + font-weight : bold; +} + +@font-face { + font-family: Caecilia; + src: local('PMN Caecilia 56'), url('/books/lib/fonts/pmn-caecilia-56.ttf') format('truetype'); + font-style : italic; +} diff --git a/dist/app.min.css b/dist/app.min.css new file mode 100644 index 0000000..ccf4711 --- /dev/null +++ b/dist/app.min.css @@ -0,0 +1 @@ +body.epube-index .caption div,body.epube-reader .footer .chapter_wrapper,body.epube-reader .header .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.epube-index .display-flex{display:flex;flex-wrap:wrap}body.epube-index .separate-search{padding:8px}body.epube-index .row>div{padding-top:10px}body.epube-index .row .thumbnail{height:200px;width:140px;margin-bottom:0}@media (max-width:641px){body.epube-index .row .col-xxs-6{width:50%}}body.epube-index .row .thumbnail img{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}body.epube-index .row .thumbnail.read img{opacity:.5;filter:grayscale(100%)}body.epube-index .epube-app-filler{height:60px;display:none}body.epube-index .in_progress{font-style:italic}body.epube-index ::selection{background:#007d71;color:#fff}body.epube-index ::-webkit-scrollbar{width:4px}body.epube-index ::-webkit-scrollbar-thumb{background-color:#007d71}body.epube-index ::-webkit-scrollbar-track{background-color:#eee}body.epube-reader .loading{position:absolute;color:#999;top:0;left:0;height:100%;width:100%;z-index:32;text-align:center;background:#fff;padding:16px;font-size:18px;display:table}body.epube-reader .loading>div{display:table-cell;vertical-align:middle}body.epube-reader .notice{width:120px;padding-left:5px}body.epube-reader .header{top:5px;left:0;width:100%;height:24px}body.epube-reader .footer{bottom:5px;left:0;width:100%;height:24px}body.epube-reader .footer,body.epube-reader .header{position:absolute;font-size:13px;display:flex;padding-left:10px;padding-right:10px;color:#999;align-items:center}body.epube-reader .header .title{margin-left:10px;flex-grow:2;text-align:center;font-weight:700}body.epube-reader .footer .chapter_wrapper{padding-right:10px;cursor:pointer}body.epube-reader .footer .spacer{flex-grow:2;position:relative;height:12px}body.epube-reader .footer .spacer .toc-bar-entry{position:absolute;background:#999;top:0;bottom:0;width:1px}body.epube-reader .footer .spacer .toc-bar-entry.current-position{background:#C33}body.epube-reader .footer .location{cursor:pointer;text-align:right}@media (max-width:539px){body.epube-reader .spacer>.toc-bar-entry{display:none}}@media (min-width:540px){body.epube-reader .footer .chapter_wrapper,body.epube-reader .footer .location{width:25%}}@media (min-width:800px){body.epube-reader .footer .chapter_wrapper,body.epube-reader .footer .location{width:20%}}body.epube-reader .toolbar{text-align:right;display:flex;flex-direction:row}body.epube-reader .toolbar>*{cursor:pointer;margin:0 4px;padding:0 2px}body.epube-reader .toolbar>:last-child{margin-right:0}body.epube-reader #reader{position:absolute;top:32px;bottom:32px;left:32px;right:32px}body.epube-reader #left,body.epube-reader #right{position:absolute;top:48px;bottom:48px;width:0;z-index:10}body.epube-reader #left{left:0}body.epube-reader #right{right:0}@media (max-width:576px){body.epube-reader #reader{left:24px;right:24px}}body.epube-reader .chapter{cursor:pointer}body.epube-reader .dict_result,body.epube-reader .search_results,body.epube-reader .toc_list{max-height:300px;height:auto;overflow:auto}body.epube-reader .dict_result h1,body.epube-reader .dict_result h2,body.epube-reader .dict_result h3{font-size:14px;margin-top:0}body.epube-reader .dict_result h2{font-weight:700}body.epube-reader .search_results b.pull-right,body.epube-reader .toc_list b.pull-right{margin-right:8px;margin-left:16px}body.epube-reader .toc_sublist{margin-left:16px}body.epube-reader ::-webkit-scrollbar{width:4px}body.epube-reader ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}body.epube-reader ::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1)}body.is-epube-app.epube-reader .header .toolbar,body.is-epube-app.epube-reader .header a{display:none}
\ No newline at end of file diff --git a/dist/reader_iframe.min.css b/dist/reader_iframe.min.css new file mode 100644 index 0000000..c9c1682 --- /dev/null +++ b/dist/reader_iframe.min.css @@ -0,0 +1 @@ +a:focus,a:hover,a:visited{text-decoration:underline}a{color:#007d71;text-decoration:none}a:focus,a:hover{color:#00302c}blockquote{font-style:italic}@font-face{font-family:Caecilia;src:local('PMN Caecilia 55'),url(/books/lib/fonts/pmn-caecilia-55.ttf) format('truetype');font-weight:400}@font-face{font-family:Caecilia;src:local('PMN Caecilia 75'),url(/books/lib/fonts/pmn-caecilia-75.ttf) format('truetype');font-weight:700}@font-face{font-family:Caecilia;src:local('PMN Caecilia 56'),url(/books/lib/fonts/pmn-caecilia-56.ttf) format('truetype');font-style:italic}
\ No newline at end of file |