iOS/Pods/FolioReaderKit/Source/Resources/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     overflow: hidden;
  38 }
  39
  40 body {
  41     padding: 40px 20px !important;
  42     overflow: hidden !important;
  43 }
  44
  45 * {
  46     page-break-before: initial !important; /* Reset page breaks to default */
  47 }
  48
  49 /* Custom padding for tablets */
  50 @media only screen and (min-device-width: 768px){
  51     body {
  52         padding: 60px 80px !important;
  53     }
  54 }
  55
  56 /* Table */
  57 table {
  58     border-collapse: collapse;
  59     border-spacing: 0;
  60 }
  61 tbody, tfoot, thead {
  62     vertical-align: middle !important;
  63 }
  64 td, th, tr {
  65     vertical-align: inherit !important;
  66 }
  67
  68 /* List */
  69 dd, dir, menu, ol, ul { margin-left: 30px !important; }
  70 ol { list-style-type: decimal !important; }
  71 li { display: list-item !important; }
  72 ol ol, ol ul, ul ol, ul ul {
  73     margin-bottom: 0 !important;
  74     margin-top: 0 !important;
  75 }
  76
  77 /* Links */
  78 a { -webkit-touch-callout: none; } /* Disable link callback */
  79 * { -webkit-user-select: text; }
  80 img { -webkit-user-select: none; }
  81 p {
  82     margin: 1.3em 0 1.5em 0;
  83     line-height: 1.40em !important;
  84     text-indent: 1.25em;
  85 }
  86
  87 b, strong, th {font-weight: bolder !important;}
  88
  89 /* Forced font overrides */
  90 code, kbd, pre, samp, tt {
  91     font-family: monospace, monospace !important;
  92     font-size: 1em;
  93 }
  94 button, input, select, textarea { display: inline-block !important; }
  95 /*h1, h2, h3, h4, h5, h6 { font-weight: 400!important; }*/
  96 del, s, strike { text-decoration: line-through!important; }
  97 hr {
  98     background-color: rgba(0,0,0,.1) !important;
  99     border: none !important;
 100     height: 1px !important;
 101 }
 102
 103
 104 /* Sub and Super */
 105 big { font-size: 1.15em !important; }
 106 small, sub, sup { font-size: .65em !important; }
 107 sub { vertical-align: sub !important; }
 108 sup {
 109     font-family: monospace !important;
 110     vertical-align: super !important;
 111 }
 112
 113
 114 /* iBooks like */
 115 a { text-decoration: none; }
 116 pre { white-space: pre-wrap; }
 117 @page { margin: 0 0 !important; }
 118 table, ol, il { text-align: -webkit-auto; }
 119 h1 ,h2 ,h3 ,h4 ,h5 ,h6 {
 120     text-align: -webkit-auto;
 121     text-rendering: optimizelegibility;
 122 }
 123
 124 /* allow breaking of words on headers and anchors as they tend to be larger font size or contain longer words */
 125 a, h1, h2, h3, h4, h5, h6 {
 126     word-break: break-word !important;
 127     -webkit-hyphens: none !important;
 128     hyphens: none !important;
 129 }
 130
 131 /* Begin Ted */
 132 img, svg, audio, video {
 133     max-height: 95% !important;
 134     max-width: 100% !important;
 135     box-sizing: border-box;
 136     object-fit: contain;
 137     page-break-inside: avoid;
 138 }
 139
 140 /* End Ted */
 141
 142 /* Divs are also used to size images so make sure the authors get what they intended */
 143 /* which is for the images boxed in them to be completely visible on screen */
 144 div { max-width: 100%; }
 145 aside[epub|type~="footnote"] { display: none !important; }
 146 ruby > rt, ruby > rp { -webkit-user-select: none; }
 147 * { -webkit-font-smoothing: subpixel-antialiased }
 148
 149
 150 /*
 151  *
 152  * Highlight classes
 153  *
 154  */
 155
 156 highlight {
 157     -webkit-touch-callout: none;
 158     -webkit-user-select: none;
 159 }
 160
 161 /* Remove tap highlight */
 162 input, textarea, button, highlight, select, a {
 163     -webkit-tap-highlight-color: rgba(0,0,0,0);
 164 }
 165
 166 /* Highlight styles */
 167 html .highlight-yellow {background:rgb(255, 235, 107)}
 168 html .highlight-green {background:#C0ED72}
 169 html .highlight-blue {background:#ADD8FF}
 170 html .highlight-pink {background:#FFB0CA}
 171 html .highlight-underline {
 172     text-decoration: none;
 173     border-bottom: 2px solid #F02814;
 174 }
 175
 176 html .highlight-yellow, html .highlight-green, html .highlight-blue, html .highlight-pink, span.epub-media-overlay-playing {
 177     border-radius: 3px;
 178     padding: 0 2px;
 179     margin: 0 -2px;
 180 }
 181
 182 /* default media overlay style */
 183 .mediaOverlayStyle0 span.epub-media-overlay-playing {
 184     background: #ccc
 185 }
 186
 187 .mediaOverlayStyle1 .epub-media-overlay-playing {
 188     border-bottom: dotted 2px transparent;
 189     border-radius: 0;
 190 }
 191
 192
 193
 194 /*
 195  *
 196  * Night mode
 197  *
 198  */
 199
 200 html, body {
 201     -webkit-transition: all 0.6s ease;
 202 }
 203
 204 html {
 205     background-color: #FFFFFF !important;
 206 }
 207
 208 body {
 209     background-color: transparent !important;
 210 }
 211
 212 html.nightMode, html.nightMode body {
 213     background-color: #131313 !important;
 214 }
 215
 216 .nightMode p, .nightMode div, .nightMode span:not(.epub-media-overlay-playing) {
 217     color: #767676 !important;
 218     background-color: transparent !important;
 219 }
 220
 221 .nightMode h1, .nightMode h2, .nightMode h3, .nightMode h4, .nightMode h5, .nightMode h6 {
 222     color: #848484 !important;
 223 }
 224
 225 .nightMode a {
 226     color: white;
 227 }
 228
 229 html.nightMode .highlight-yellow {background:rgba(255, 235, 107, 0.9)}
 230 html.nightMode .highlight-green {background:rgba(192, 237, 114, 0.9)}
 231 html.nightMode .highlight-blue {background:rgba(173, 216, 255, 0.9)}
 232 html.nightMode .highlight-pink {background:rgba(255, 176, 202, 0.9)}
 233 html.nightMode .highlight-underline {border-bottom: 2px solid rgba(240, 40, 20, 0.6)}
 234
 235
 236 /*
 237  *
 238  * Font classes
 239  *
 240  */
 241
 242 .andada, .andada p, .andada span, .andada div { font-family: "Andada", sans-serif !important; }
 243 .lato, .lato p, .lato span, .lato div { font-family: "Lato", serif !important; }
 244 .lora, .lora p, .lora span, .lora div { font-family: "Lora", serif !important; }
 245 .raleway, .raleway p, .raleway span, .raleway div { font-family: "Raleway", sans-serif !important; }
 246
 247 html.textSizeOne, .textSizeOne body { font-size: 13px !important; }
 248 html.textSizeTwo, .textSizeTwo body { font-size: 15px !important; }
 249 html.textSizeThree, .textSizeThree body { font-size: 17px !important; }
 250 html.textSizeFour, .textSizeFour body { font-size: 19px !important; }
 251 html.textSizeFive, .textSizeFive body { font-size: 21px !important; }
 252
 253 body.marginSizeOne, .marginSizeOne body { padding: 20px 10px !important; }
 254 body.marginSizeTwo, .marginSizeTwo body { padding: 20px 20px !important; }
 255 body.marginSizeThree, .marginSizeThree body { padding: 20px 30px !important; }
 256 body.marginSizeFour, .marginSizeFour body { padding: 20px 40px !important; }
 257 body.marginSizeFive, .marginSizeFive body { padding: 20px 50px !important; }
 258
 259 html.interlineSizeOne p { line-height: 1.20em !important; }
 260 html.interlineSizeTwo p { line-height: 1.40em !important; }
 261 html.interlineSizeThree p { line-height: 1.60em !important; }
 262 html.interlineSizeFour p { line-height: 2.00em !important; }
 263 html.interlineSizeFive p { line-height: 2.40em !important; }
 264
 265 h1 {
 266     font-size: 2em;
 267     line-height: 1.2;
 268 }
 269 h2 {
 270     font-size: 1.5em;
 271     line-height: 1.2;
 272 }
 273 h3 {
 274     font-size: 1.17em;
 275     line-height: 1.2;
 276 }
 277 h4 {
 278     font-size: 1em;
 279     line-height: 1.2;
 280 }
 281 h5 {
 282     font-size: 0.83em;
 283     line-height: 1.2;
 284 }
 285 h6 {
 286     font-size: 0.67em;
 287     line-height: 1.2;
 288 }
 289 body {
 290     word-break: break-word !important;
 291     -webkit-hyphens: auto !important;
 292     hyphens: auto !important;
 293 }
 294 p, span, div {
 295     font-size: 1em;
 296 /*    line-height: 1.5 !important;*/
 297 }
 298 @media only screen and (min-device-width: 600px) {
 299     div {
 300         font-size: 1em;
 301         line-height: 1.438em !important;
 302     }
 303     body {
 304         -webkit-hyphens: none !important;
 305         hyphens: none !important;
 306     }
 307 }