data/styles/epub3.css in asciidoctor-epub3-1.5.0.alpha.6 vs data/styles/epub3.css in asciidoctor-epub3-1.5.0.alpha.7
- old
+ new
@@ -23,11 +23,11 @@
/* don't set margin on body as that's how many readers frame reading area */
/* can't set the font-family on body in Kindle */
body {
padding: 0 !important;
/* add margin to ~ match Kindle's narrow setting */
- /* don't use !important on margin as it breaks calibre */
+ /* don't use !important on margin as it interferes with reader overrides (Calibre and Kindle) */
margin: 0;
font-size: 100%;
/* NOTE putting optimizeLegibility on the body slows down rendering considerably */
text-rendering: optimizeSpeed;
/* -webkit-font-smoothing has no noticable effect and is controversial, so leaving it off */
@@ -36,14 +36,14 @@
/* disables night mode in Aldiko, hoo-ha! */
html body {
background-color: #FFFFFF;
}
-/* sets minimum margin permitted */
-/* @page not supported by Kindle or GitDen */
+/* @page only applies to EPUB2 readers; not supported by EPUB3 readers such as Kindle and Gitden */
@page {
- /* push the top & bottom margins down in Aldiko to emulate Kindle (Kindle uses ~ 10% of screen by default )*/
+ /* sets minimum margin permitted */
+ /* pushes the top & bottom margins down in Aldiko to emulate Kindle (Kindle uses ~ 10% of screen by default )*/
margin: 1cm;
}
div, p, blockquote, pre, figure, figcaption,
h1, h2, h3, h4, h5, h6,
@@ -893,11 +893,11 @@
text-align: right;
}
blockquote footer .context {
font-size: 0.9em;
- letter-spacing: -0.1em;
+ letter-spacing: -0.05em;
color: #666665;
}
/* Kindle requires text-align: center on surrounding div to align image to center */
figure.image div.content {
@@ -914,12 +914,11 @@
pre {
text-align: left; /* fix for Namo */
margin-top: 1em; /* 0.85rem */
/*margin-top: 1.176em;*/ /* 1rem */
white-space: pre-wrap;
- /*word-break: break-all;*/ /* break at the end of the line, no matter what */
- word-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
+ 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;
padding: 0.5rem 0.75rem;
/*
@@ -983,32 +982,32 @@
border-width: 0;
background: none !important;
}
aside.note {
- border-left-color: #B3B3B1;
- background-color: #E1E1E1; /* 25% opacity of border */
+ border-left-color: #FFC14F;
+ background-color: #FFF0D4; /* 25% opacity of border */
}
aside.tip {
- border-left-color: #57AD68;
- background-color: #D4EAD9; /* 25% opacity of border */
+ border-left-color: #40403E;
+ background-color: #D0D0CF; /* 25% opacity of border */
}
aside.caution {
- border-left-color: #666665;
- background-color: #D8D8D8; /* 25% opacity of border */
+ border-left-color: #7F7F7D;
+ background-color: #DFDFDF; /* 25% opacity of border */
}
aside.warning {
border-left-color: #C83737;
- background-color: #F1CCCC; /* 25% opacity of border */
+ background-color: #F1CECE; /* 25% opacity of border */
}
aside.important {
- border-left-color: #FFC14F;
- background-color: #FFEFD2; /* 25% opacity of border */
+ border-left-color: #F2642A;
+ background-color: #FCD9CA; /* 25% opacity of border */
}
aside.admonition::before {
display: block;
font-family: "FontAwesome";
@@ -1016,11 +1015,11 @@
line-height: 1;
width: 1em;
text-align: center;
margin-bottom: -0.25em;
margin-left: -0.5em;
- text-shadow: 0px 1px 2px rgba(102, 102, 101, 0.3);
+ text-shadow: 0px 1px 1px rgba(102, 102, 101, 0.15);
}
aside.admonition > div.content {
font-size: 90%;
margin-top: -1em; /* prevent at top of content when using block form of admonition */
@@ -1037,60 +1036,57 @@
background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, <color> 45%, <color> 55%, rgba(255,255,255,0) 57.5%);
*/
}
aside.note::before {
- /*content: "\f0f4";*/ /* fa-coffee */
content: "\f040"; /* fa-pencil */
- color: #B3B3B1; /* 179,179,177 */
+ color: #FFC14F;
}
aside[class~="note"] > div[class~="content"] {
- background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #B3B3B1 45%, #B3B3B1 55%, rgba(255,255,255,0) 57.5%);
- background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #B3B3B1 45%, #B3B3B1 55%, rgba(255,255,255,0) 57.5%);
+ background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255,255,255,0) 57.5%);
+ background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255,255,255,0) 57.5%);
}
aside.tip::before {
- /*content: "\f069";*/ /* fa-asterisk */
- /*content: "\f0d6";*/ /* fa-money */
- content: "\f15a"; /* fa-bitcoin */
- color: #57AD68; /* 87,173,104 */
+ content: "\f0eb"; /* fa-lightbulb-o */
+ color: #40403E;
}
aside[class~="tip"] > div[class~="content"] {
- background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #57AD68 45%, #57AD68 55%, rgba(255,255,255,0) 57.5%);
- background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #57AD68 45%, #57AD68 55%, rgba(255,255,255,0) 57.5%);
+ background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #40403E 45%, #40403E 55%, rgba(255,255,255,0) 57.5%);
+ background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #40403E 45%, #40403E 55%, rgba(255,255,255,0) 57.5%);
}
aside.caution::before {
content: "\f0c2"; /* fa-cloud */
- color: #666665; /* 102,102,101 */
+ color: #7F7F7D;
}
aside[class~="caution"] > div[class~="content"] {
- background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #666665 45%, #666665 55%, rgba(255,255,255,0) 57.5%);
- background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #666665 45%, #666665 55%, rgba(255,255,255,0) 57.5%);
+ background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #7F7F7D 45%, #7F7F7D 55%, rgba(255,255,255,0) 57.5%);
+ background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #7F7F7D 45%, #7F7F7D 55%, rgba(255,255,255,0) 57.5%);
}
aside.warning::before {
content: "\f0e7"; /* fa-bolt */
- color: #C83737; /* 200,55,55 */
+ color: #C83737;
}
aside[class~="warning"] > div[class~="content"] {
background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #C83737 45%, #C83737 55%, rgba(255,255,255,0) 57.5%);
background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #C83737 45%, #C83737 55%, rgba(255,255,255,0) 57.5%);
}
aside.important::before {
content: "\f12a"; /* fa-exclamation */
- color: #FFC14F; /* 255,193,79 */
+ color: #F2642A;
}
aside[class~="important"] > div[class~="content"] {
- background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255,255,255,0) 57.5%);
- background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255,255,255,0) 57.5%);
+ background-image: -webkit-linear-gradient(left, rgba(255,255,255,0) 42.5%, #F2642A 45%, #F2642A 55%, rgba(255,255,255,0) 57.5%);
+ background-image: linear-gradient(to right, rgba(255,255,255,0) 42.5%, #F2642A 45%, #F2642A 55%, rgba(255,255,255,0) 57.5%);
}
aside.admonition > h2 {
margin-top: 0;
margin-bottom: 1.5em;
@@ -1135,17 +1131,22 @@
table.table thead th {
border-bottom: 1px solid #80807F;
}
-table.table td > p {
+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 td > p + p,
+table.table div.embed > * + * {
margin-top: 1em;
}
table.table-framed {
border-width: 1px;
@@ -1165,11 +1166,11 @@
border-color: #80807F;
}
table.table-grid th,
table.table-grid td {
- border-width: 0 1px 1px 0;
+ border-width: 0 1px 1px 0;
border-style: solid;
border-color: #80807F;
}
table.table-grid thead tr > *:last-child {
@@ -1181,17 +1182,17 @@
border-bottom-width: 0;
}
table.table-grid-rows tbody th,
table.table-grid-rows tbody td {
- border-width: 1px 0 0 0;
+ border-width: 1px 0 0 0;
border-style: solid;
border-color: #80807F;
}
table.table-grid-cols th,
table.table-grid-cols td {
- border-width: 0 1px 0 0;
+ border-width: 0 1px 0 0;
border-style: solid;
border-color: #80807F;
}
table.table-grid-cols thead th:last-child {