Android/folioreader/src/main/assets/css/Style.css

   1 /**
   2  *  Style.css
   3  *  FolioReaderKit
   4  *
   5  *  Created by Heberti Almeida on 06/05/15.
   6  *  Copyright (c) 2015 Folio Reader. All rights reserved.
   7  */
   8
   9 /* CSS Reset */
  10 html, body, div, span, applet, object, iframe,
  11 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  12 a, abbr, acronym, address, big, cite, code,
  13 del, dfn, em, img, ins, kbd, q, s, samp,
  14 small, strike, strong, sub, sup, tt, var,
  15 b, u, i, center,
  16 dl, dt, dd, li,
  17 fieldset, form, label, legend,
  18 table, caption, tbody, tfoot, thead, tr, th, td,
  19 article, aside, canvas, details, embed,
  20 figure, figcaption, footer, header, hgroup,
  21 menu, nav, output, ruby, section, summary,
  22 time, mark, audio, video {
  23     margin: 0;
  24     vertical-align: baseline;
  25 }
  26
  27 /* HTML5 display-role reset for older browsers */
  28 article, aside, details, figcaption, figure,
  29 footer, header, hgroup, menu, nav, section {
  30     display: block;
  31 }
  32
  33 /* ePUB */
  34 html {
  35     -webkit-text-size-adjust: none; /* Never autoresize text */
  36     padding: 0 0 !important;
  37 }
  38
  39 body {
  40     padding: 40px 20px !important;
  41     overflow: !important;
  42 }
  43
  44 /* Custom padding for tablets */
  45 @media only screen and (min-device-width: 768px){
  46     body {
  47         padding: 60px 80px !important;
  48     }
  49 }
  50
  51 /* Table */
  52 table {
  53     border-collapse: collapse;
  54     border-spacing: 0;
  55 }
  56 tbody, tfoot, thead {
  57     vertical-align: middle !important;
  58 }
  59 td, th, tr {
  60     vertical-align: inherit !important;
  61 }
  62
  63 /* List */
  64 dd, dir, menu, ol, ul { margin-left: 30px !important; }
  65 ol { list-style-type: decimal !important; }
  66 li { display: list-item !important; }
  67 ol ol, ol ul, ul ol, ul ul {
  68     margin-bottom: 0 !important;
  69     margin-top: 0 !important;
  70 }
  71
  72 /* Links */
  73 a { -webkit-touch-callout: none; } /* Disable link callback */
  74 * { -webkit-user-select: text; }
  75 img { -webkit-user-select: none; }
  76 p {
  77     margin: 1.3em 0 1.5em 0;
  78     line-height: 1.40em !important;
  79     text-indent: 1.25em;
  80 }
  81 b, strong, th {font-weight: bolder !important;}
  82
  83 /* Forced font overrides */
  84 code, kbd, pre, samp, tt {
  85     font-family: monospace, monospace !important;
  86     font-size: 1em;
  87 }
  88 button, input, select, textarea { display: inline-block !important; }
  89 /*h1, h2, h3, h4, h5, h6 { font-weight: 400!important; }*/
  90 del, s, strike { text-decoration: line-through!important; }
  91 hr {
  92     background-color: rgba(0,0,0,.1) !important;
  93     border: none !important;
  94     height: 1px !important;
  95 }
  96
  97
  98 /* Sub and Super */
  99 big { font-size: 1.15em !important; }
 100 small, sub, sup { font-size: .65em !important; }
 101 sub { vertical-align: sub !important; }
 102 sup {
 103     font-family: monospace !important;
 104     vertical-align: super !important;
 105 }
 106
 107
 108 /* iBooks like */
 109 a { text-decoration: none; }
 110 pre { white-space: pre-wrap; }
 111 @page { margin: 0 0 !important; }
 112 table, ol, il { text-align: -webkit-auto; }
 113 h1 ,h2 ,h3 ,h4 ,h5 ,h6 {
 114     text-align: -webkit-auto;
 115     text-rendering: optimizelegibility;
 116 }
 117
 118 /* allow breaking of words on headers and anchors as they tend to be larger font size or contain longer words */
 119 a, h1, h2, h3, h4, h5, h6 {
 120     word-break: break-word !important;
 121     -webkit-hyphens: none !important;
 122     hyphens: none !important;
 123 }
 124
 125 /* Begin Ted */
 126 img, svg, audio, video {
 127     max-height: 95% !important;
 128     max-width: 100% !important;
 129     box-sizing: border-box;
 130     object-fit: contain;
 131     page-break-inside: avoid;
 132 }
 133
 134 /* End Ted */
 135
 136 /* Divs are also used to size images so make sure the authors get what they intended */
 137 /* which is for the images boxed in them to be completely visible on screen */
 138 div { max-width: 100%; }
 139 aside[epub|type~="footnote"] { display: none !important; }
 140 ruby > rt, ruby > rp { -webkit-user-select: none; }
 141 * { -webkit-font-smoothing: subpixel-antialiased }
 142
 143
 144 /*
 145  *
 146  * Highlight classes
 147  *
 148  */
 149
 150 lk {
 151     -webkit-touch-callout: none;
 152     -webkit-user-select: none;
 153 }
 154
 155 /* Remove tap highlight */
 156 input, textarea, button, highlight, select, a {
 157     -webkit-tap-highlight-color: rgba(0,0,0,0);
 158 }
 159
 160 /* Highlight styles */
 161 html .highlight_yellow {background:rgb(255, 235, 107)}
 162 html .highlight_green {background:#C0ED72}
 163 html .highlight_blue {background:#ADD8FF}
 164 html .highlight_pink {background:#FFB0CA}
 165 html .highlight_underline {
 166     text-decoration: none;
 167     border-bottom: 2px solid #F02814;
 168 }
 169
 170 html .highlight_yellow, html .highlight_green, html .highlight_blue, html .highlight_pink, span.epub-media-overlay-playing {
 171     border-radius: 3px;
 172     padding: 0 2px;
 173     margin: 0 -2px;
 174 }
 175
 176 /* default media overlay style */
 177 .mediaOverlayStyle0 span.epub-media-overlay-playing {
 178     background: #ccc
 179 }
 180
 181 .mediaOverlayStyle1 .epub-media-overlay-playing {
 182     border-bottom: dotted 2px transparent;
 183     border-radius: 0;
 184 }
 185
 186
 187
 188 /*
 189  *
 190  * Night mode
 191  *
 192  */
 193
 194 html {
 195     -webkit-transition: all 0.6s ease;
 196     background-color: #FFFFFF !important;
 197 }
 198
 199 body {
 200     background-color: transparent !important;
 201 }
 202
 203 html.nightMode {
 204     background-color: #131313 !important;
 205 }
 206
 207 .nightMode p, .nightMode div {
 208     color: #767676 !important;
 209     background-color: transparent !important;
 210 }
 211
 212 .nightMode h1, .nightMode h2, .nightMode h3, .nightMode h4, .nightMode h5, .nightMode h6 {
 213     color: #848484 !important;
 214 }
 215
 216 html.nightMode .highlight_yellow {background:rgba(255, 235, 107, 0.9)}
 217 html.nightMode .highlight_green {background:rgba(192, 237, 114, 0.9)}
 218 html.nightMode .highlight_blue {background:rgba(173, 216, 255, 0.9)}
 219 html.nightMode .highlight_pink {background:rgba(255, 176, 202, 0.9)}
 220 html.nightMode .highlight_underline {border-bottom: 2px solid rgba(240, 40, 20, 0.6)}
 221
 222
 223 /*
 224  *
 225  * Font classes
 226  *
 227  */
 228
 229 @font-face {
 230     font-family: 'andada';
 231     src: url('file:///android_asset/fonts/andada/Andada-Regular.otf');
 232 }
 233
 234 @font-face {
 235     font-family: 'garamond';
 236     src: url('file:///android_asset/fonts/ebgaramond/EBGaramond-Regular.ttf');
 237 }
 238
 239 @font-face {
 240     font-family: 'lato';
 241     src: url('file:///android_asset/fonts/lato/Lato-Regular.ttf');
 242 }
 243
 244 @font-face {
 245     font-family: 'lora';
 246     src: url('file:///android_asset/fonts/lora/Lora-Regular.ttf');
 247 }
 248
 249 @font-face {
 250     font-family: 'raleway';
 251     src: url('file:///android_asset/fonts/raleway/Raleway-Regular.ttf');
 252 }
 253
 254 .andada, .andada p, .andada span, .andada div {
 255      font-family: "andada", sans-serif !important;
 256  }
 257 .garamond, .garamond p, .garamond span, .garamond div {
 258      font-family: "garamond", sans-serif !important;
 259  }
 260 .lato, .lato p, .lato span, .lato div {
 261      font-family: "lato", serif !important;
 262  }
 263 .lora, .lora p, .lora span, .lora div {
 264      font-family: "lora", serif !important;
 265  }
 266 .raleway, .raleway p, .raleway span, .raleway div {
 267      font-family: "raleway", sans-serif !important;
 268  }
 269
 270 html.textSizeOne { font-size: 13px !important; }
 271 html.textSizeTwo { font-size: 15px !important; }
 272 html.textSizeThree { font-size: 17px !important; }
 273 html.textSizeFour { font-size: 19px !important; }
 274 html.textSizeFive { font-size: 21px !important; }
 275
 276 h1 {
 277     font-size: 2em;
 278     line-height: 1.2;
 279 }
 280 h2 {
 281     font-size: 1.5em;
 282     line-height: 1.2;
 283 }
 284 h3 {
 285     font-size: 1.17em;
 286     line-height: 1.2;
 287 }
 288 h4 {
 289     font-size: 1em;
 290     line-height: 1.2;
 291 }
 292 h5 {
 293     font-size: 0.83em;
 294     line-height: 1.2;
 295 }
 296 h6 {
 297     font-size: 0.67em;
 298     line-height: 1.2;
 299 }
 300 body {
 301     word-break: break-word !important;
 302     -webkit-hyphens: auto !important;
 303     hyphens: auto !important;
 304 }
 305 p, span, div {
 306     font-size: 1em;
 307     line-height: 1.5 !important;
 308 }
 309 @media only screen and (min-device-width: 600px) {
 310     div {
 311         font-size: 1em;
 312         line-height: 1.438em !important;
 313     }
 314     body {
 315         -webkit-hyphens: none !important;
 316         hyphens: none !important;
 317     }
 318 }
 319
 320 /*
 321  *
 322  * Margin sizes
 323  *
 324  */
 325 html.marginSizeOne body { padding: 20px 10px !important; }
 326 html.marginSizeTwo body { padding: 20px 20px !important; }
 327 html.marginSizeThree body { padding: 20px 30px !important; }
 328 html.marginSizeFour body { padding: 20px 40px !important; }
 329 html.marginSizeFive body { padding: 20px 50px !important; }
 330
 331 /*
 332  *
 333  * Interline sizes
 334  *
 335  */
 336
 337 html.interlineSizeOne p { line-height: 1.00em !important; }
 338 html.interlineSizeTwo p { line-height: 1.40em !important; }
 339 html.interlineSizeThree p { line-height: 1.60em !important; }
 340 html.interlineSizeFour p { line-height: 2.00em !important; }
 341 html.interlineSizeFive p { line-height: 2.40em !important; }
 342
 343 p.paragraph {
 344         text-align: left !important;
 345 }