epub3.css in asciidoctor-epub3-1.5.0.alpha.18

- old
+ new

@@ -79,12 +79,12 @@
   font-weight: bold;
 }
 
 b.button {
   font-weight: normal;
-  text-shadow: 1px 0 0 #666665;
-  color: #191918;
+  text-shadow: 1px 0 0 #333332;
+  color: #101010;
   white-space: nowrap;
 }
 
 b.button .label {
   padding: 0 0.25em;
@@ -141,11 +141,11 @@
   max-width: 100%;
 }
 
 mark {
   background-color: #FFC14F;
-  color: #191918;
+  color: #101010;
 }
 
 small {
   font-size: 80%;
 }
@@ -196,18 +196,40 @@
 
 td, th {
   padding: 0;
 }
 
+/* We need to apply text-align to <p> too in order to override global text-align:justify */
+th.halign-left, td.halign-left, th.halign-left > p, td.halign-left > p {
+  text-align: left
+}
+
+th.halign-right, td.halign-right, th.halign-right > p, td.halign-right > p {
+  text-align: right
+}
+
+th.halign-center, td.halign-center, th.halign-center > p, td.halign-center > p {
+  text-align: center
+}
+
+th.valign-top, td.valign-top, th.valign-top > p, td.valign-top > p {
+  vertical-align: top
+}
+
+th.valign-bottom, td.valign-bottom, th.valign-bottom > p, td.valign-bottom > p {
+  vertical-align: bottom
+}
+
+th.valign-middle, td.valign-middle, th.valign-middle > p, td.valign-middle > p {
+  vertical-align: middle
+}
+
 body a:link {
-  color: #333332;
-  /* hack for font color in iBooks and Gitden (though Gitden would accept color !important too) */
-  -webkit-text-fill-color: #333332;
   /* Kindle requires the !important on text-decoration */
   /* In night mode, the only indicator of a link is the underline, so we need it or a background image */
   text-decoration: none !important;
-  border-bottom: 1px dashed #666665;
+  border-bottom: 1px dashed #333332;
   /* allow URLs to break anywhere if they don't fit on a line; but how do we know it's a URL? */
   /*
   word-break: break-all;
   */
 }
@@ -220,13 +242,13 @@
   background-size: 100% 1px;
   background-position: 0 1.2em;
 }
 
 body a:visited {
-  color: #666665;
+  color: #333332;
   /* hack for font color in iBooks */
-  -webkit-text-fill-color: #666665;
+  -webkit-text-fill-color: #333332;
 }
 
 code.literal {
   /* don't let it affect line spacing */
   /* disable since M+ 1mn won't interrupt line height */
@@ -268,22 +290,21 @@
 
 body p,
 ul, ol, li, dl, dt, dd, footer,
 div.verse .attribution, table.table th, table.table td,
 figcaption, caption {
-  color: #333332;
   /* NOTE iBooks will forcefully override font-family of text inside div, p and span elements when font other than Original is selected */
   /* NOTE iBooks honors Original font for prose text if declared in display-options.xml */
   font-family: "Noto Serif", serif;
 }
 
 body p, li, dt, dd, footer {
   line-height: 1.6;
 }
 
 code, kbd, pre {
-  color: #191918;
+  color: #101010;
   font-family: "M+ 1mn", monospace;
   -webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */
 }
 
 /* QUESTION should we kern preformatted text blocks? */
@@ -460,21 +481,21 @@
   display: block;
 }
 
 ul > li::before {
   content: "\25AA"; /* small black square */
-  color: #666665;
+  color: #333332;
 }
 
 ul ul > li::before {
   content: "\25E6"; /* small white circle */
   color: #57AD68;
 }
 
 ul ul ul > li::before {
   content: "\2022"; /* small black circle */
-  color: #666665;
+  color: #333332;
 }
 
 ul ul ul ul > li::before {
   content: "\25AB"; /* small white square */
   color: #57AD68;
@@ -532,26 +553,24 @@
   text-align: left;
 }
 
 /* sized based on the major third modular scale (4:5, 16px, 24px) */
 h1, h2 {
-  color: #333332;
   font-size: 1.5em;
   word-spacing: -0.075em;
   margin-top: 1em; /* 1.5rem */
   margin-bottom: -0.3333em; /* -0.5rem, 0.5rem to content */
 }
 
 h3 {
-  color: #333332;
   font-size: 1.25em;
   margin-top: 0.84em; /* 1.05rem */
   margin-bottom: -0.5em; /* -0.625rem, 0.375rem to content */
 }
 
 h4 {
-  color: #4F4F4C;
+  color: #202020;
   font-weight: 200;
 
   font-size: 1.1em;
   margin-top: 1em; /* 1.1rem */
   margin-bottom: -0.818em; /* -0.9rem, 0.1rem to content */
@@ -562,11 +581,11 @@
   /*margin-bottom: -0.75em;*/ /* -0.9rem, 0.1rem to content */
   margin-bottom: -0.625em; /* -0.75rem, 0.25rem to content */
 }
 
 h5 {
-  color: #666665;
+  color: #333332;
   /*
   font-size: 1em;
   text-transform: uppercase;
   margin-top: 1em;
   margin-bottom: -1em;
@@ -592,11 +611,11 @@
   /* NOTE div must have at least 1px top padding for background to fill */
   /* would like to use vh units for top and bottom padding */
   /*padding: 0.75em 1.5em 0.25em 1.5em;*/
   padding: 0.25em 0;
   margin-bottom: 2.5em;
-  border-bottom: 1px solid #666665;
+  border-bottom: 1px solid #333332;
   /* TODO maybe what we need to get articles to start in left column
   -webkit-column-break-before: left;
   page-break-before: left;
   */
 }
@@ -605,19 +624,18 @@
   font-weight: 200;
   font-size: 1.2em;
   margin-top: 3.5em; /* 4.2rem - would like to use 9vh */
   margin-bottom: 0;
   padding-bottom: 0.8333em; /* 1.2rem */
-  color: #666665;
+  color: #333332;
   text-transform: uppercase; /* not supported in Adobe Digital Editions */
   word-spacing: -0.075em;
   letter-spacing: -0.01em;
 }
 
 h1.chapter-title .subtitle {
   font-weight: 400;
-  color: #333332;
   display: block;
   font-size: 1.5em;
   margin: 0 0 0 0.75em; /* would like to use 2vw */
   line-height: 1.2; /* line-height will remain 1.4 on Kindle, see hack in media query */
 }
@@ -630,11 +648,10 @@
 h1.chapter-title b {
   font-weight: inherit;
 }
 
 .chapter-header p.byline {
-  color: #333332;
   /* float left and height 0 takes this line out of the flow */
   float: left;
   height: 0;
   width: 100%;
   text-align: right;
@@ -661,19 +678,19 @@
 div.abstract {
   margin: 5% 1.5em 2.5em 1.5em;
 }
 
 div.abstract > p {
-  color: #666665;
+  color: #333332;
   font-size: 1.05em; /* or 1.1em? */
   line-height: 1.75;
 }
 
 div.abstract > p a:link {
-  color: #666665;
+  color: #333332;
   /* hack for font color in iBooks */
-  -webkit-text-fill-color: #666665;
+  -webkit-text-fill-color: #333332;
 }
 
 div.abstract > p:first-child::first-line {
   font-weight: bold;
   -webkit-font-feature-settings: "kern" off;
@@ -746,11 +763,11 @@
 
 figcaption,
 caption {
   font-size: 0.9em;
   font-style: italic;
-  color: #666665;
+  color: #333332;
   letter-spacing: -0.01em;
   line-height: 1.4;
   text-align: left;
   padding-left: 0.1em;
   page-break-inside: avoid;
@@ -778,14 +795,14 @@
 figure.listing > figcaption + pre {
   margin-top: 0.294em; /* 0.25rem */
 }
 
 aside.sidebar {
-  border: 1px solid #B3B3B1;
+  border: 1px solid #C8C8C8;
   padding: 0 1.5em;
   font-size: 0.9em;
-  background-color: #F2F2F2;
+  background-color: #E0E0E0;
   text-align: right; /* aligns heading to right */
   /*
   -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.15);
   box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.15);
   */
@@ -809,11 +826,11 @@
   */
   font-weight: 400;
   letter-spacing: 0;
   display: inline-block;
   white-space: nowrap; /* for some reason it's wrapping prematurely */
-  border: 1px solid #B3B3B1;
+  border: 1px solid #C8C8C8;
   padding: 1.5em .75em .5em .75em;
   margin: -1em 0.5em -0.25em 0.5em;
   background-color: #FFFFFF;
   /*
   -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.1);
@@ -846,11 +863,11 @@
 div[class~="blockquote"] {
   display: table;
 }
 
 blockquote > p {
-  color: #191918;
+  color: #101010;
   font-style: italic;
 
   /*
   font-size: 1.2em;
   word-spacing: 0.1em;
@@ -863,11 +880,11 @@
   line-height: 1.75;
 }
 
 blockquote > p:first-of-type::before {
   display: inline-block;
-  color: #666665;
+  color: #333332;
   text-shadow: 0 1px 2px rgba(102, 102, 101, 0.3);
 
   /* using serif quote from entypo */
   font-family: "FontIcons";
 
@@ -896,29 +913,25 @@
 }
 
 blockquote footer .context {
   font-size: 0.9em;
   letter-spacing: -0.05em;
-  color: #666665;
+  color: #333332;
 }
 
 pre {
   text-align: left; /* fix for Namo */
   margin-top: 1em; /* 0.85rem */
   /*margin-top: 1.176em;*/ /* 1rem */
   white-space: pre-wrap;
   overflow-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
   font-size: 0.85em;
   line-height: 1.4; /* matches what Kindle uses and can't go less */
-  background-color: #F2F2F2;
+  background-color: #E0E0E0;
   padding: 0.6em 0.9em; /* this is supposed to be '0.5rem 0.75rem' but Sony Readers crash when see that (at least, PRS-350, PRS-505, PRS-T1) */
-  /*
-  border-top: 3px solid #DCDCDE;
-  */
-  /* QUESTION #B3B3B1? */
-  border-top: 1px solid #DCDCDE;
-  border-right: 1px solid #DCDCDE;
+  border-top: 1px solid #C8C8C8;
+  border-right: 1px solid #C8C8C8;
 }
 
 body:first-of-type pre {
   background-color: rgba(0, 0, 0, 0.05); /* using transparency is night-mode friendly */
   /*background-color: rgba(51, 51, 50, 0.06);*/ /* using transparency is night-mode friendly */
@@ -1107,85 +1120,79 @@
 
 table.table th,
 table.table td {
   line-height: 1.4;
   padding: 0.5em 0.5em 1em 0.1em;
-  vertical-align: top;
-  text-align: left;
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
 }
 
 table.table th {
   font-weight: bold;
 }
 
 table.table thead th {
-  border-bottom: 1px solid #80807F;
+  border-bottom: 1px solid #707070;
 }
 
 table.table td > p,
 table.table div.embed > * {
   margin-top: 0;
 }
 
-table.table td > p {
-  text-align: left;
-}
-
 /* REVIEW */
 table.table td > p + p,
 table.table div.embed > * + * {
   margin-top: 1em;
 }
 
-table.table-framed {
+table.table-framed-all {
   border-width: 1px;
   border-style: solid;
-  border-color: #80807F;
+  border-color: #707070;
 }
 
 table.table-framed-topbot {
   border-width: 1px 0;
   border-style: solid;
-  border-color: #80807F;
+  border-color: #707070;
 }
 
 table.table-framed-sides {
   border-width: 0 1px;
   border-style: solid;
-  border-color: #80807F;
+  border-color: #707070;
 }
 
-table.table-grid th,
-table.table-grid td {
-  border-width: 0 1px 1px 0;
+table.table-grid-all th,
+table.table-grid-all td {
+  border-width: 1px 1px 1px 1px;
   border-style: solid;
-  border-color: #80807F;
+  border-color: #707070;
 }
 
-table.table-grid thead tr > *:last-child {
+table.table-grid-all thead tr > *:last-child {
   border-right-width: 0;
 }
 
-table.table-grid tbody tr:last-child > th,
-table.table-grid tbody tr:last-child > td {
+table.table-grid-all tbody tr:last-child > th,
+table.table-grid-all tbody tr:last-child > td {
   border-bottom-width: 0;
 }
 
 table.table-grid-rows tbody th,
 table.table-grid-rows tbody td {
   border-width: 1px 0 0 0;
   border-style: solid;
-  border-color: #80807F;
+  border-color: #707070;
 }
 
 table.table-grid-cols th,
 table.table-grid-cols td {
   border-width: 0 1px 0 0;
   border-style: solid;
-  border-color: #80807F;
+  border-color: #707070;
 }
 
 table.table-grid-cols thead th:last-child {
   border-right-width: 0;
 }
@@ -1212,11 +1219,11 @@
   border-bottom: 1px solid #B3B3B3;
 }
 
 img.headshot {
   float: left;
-  border: 1px solid #80807F;
+  border: 1px solid #707070;
   padding: 1px;
   margin: 0.35em 1em 0.15em 0;
   height: 5em !important;
   width: 5em !important;
 }
@@ -1248,9 +1255,14 @@
   background-image: none;
 }
 
 nav#toc ol {
   list-style-type: none;
+}
+
+/* Calibre doesn't hide <nav hidden="hidden"> for some reason */
+nav[hidden~="hidden"] {
+  display: none;
 }
 
 .icon {
   display: none;
 }