From 25cfee0d29a9fea2240905a97d0f5d694f8c2c21 Mon Sep 17 00:00:00 2001 From: Marat Radchenko Date: Sat, 4 Jul 2020 17:03:30 +0300 Subject: [PATCH] resolves #338 rescale color palette to use darker shades of grey This change also removes Kindle-specific color adjustments so minor color changes are expected on Kindle --- CHANGELOG.adoc | 1 + data/styles/color-palette.css | 19 ++++---- data/styles/epub3-css3-only.css | 33 -------------- data/styles/epub3.css | 80 ++++++++++++++------------------- 4 files changed, 43 insertions(+), 90 deletions(-) diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index cca2e7fd..0cf5efc6 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -12,6 +12,7 @@ For a detailed view of what has changed, refer to the {uri-repo}/commits/master[ * store syntax highlighter CSS in a separate file (#339) * initial landmarks support: appendix, bibliography, bodymatter, cover, frontmatter, glossary, index, preface, toc (#174) * add support for MathML (#10) +* rescale color palette to use darker shades of grey (#338) == 1.5.0.alpha.17 (2020-05-25) - @slonopotamus diff --git a/data/styles/color-palette.css b/data/styles/color-palette.css index e8796da9..e86b2678 100644 --- a/data/styles/color-palette.css +++ b/data/styles/color-palette.css @@ -1,19 +1,16 @@ .palette-grayscale { - color: #191918; /* black :: literal, blockquote text */ - color: #333332; /* off-black :: body text, heading default, chapter header background */ - color: #4F4F4C; /* deep gray :: h4 */ - /* what about 40403E or 4C4C4B? for h4 */ - color: #666665; /* dark gray :: h5, visited link, list bullets, abstract, caption, open quote */ - color: #80807F; /* medium gray :: table borders */ - color: #B3B3B1; /* gray :: chapter title, footer subtitle, sidebar border */ - color: #DCDCDE; /* lighter gray :: footer lines, byline text, pre border, masthead bottom line */ - /* what about DEDEDC instead of DCDCDE? */ - color: #F2F2F2; /* off white :: pre background, sidebar background */ + color: #000000; /* black :: body text, heading default */ + color: #101010; /* off-black :: code, literal, blockquote text */ + color: #202020; /* deep gray :: h4 */ + color: #333332; /* dark gray :: h5, visited link, list bullets, abstract, caption, open quote */ + color: #707070; /* medium gray :: table borders */ + color: #C8C8C8; /* gray :: footer subtitle, sidebar border */ + color: #E0E0E0; /* off white :: pre background, sidebar background */ color: #FFFFFF; /* white :: chapter subtitle */ } .palette-color { - color: #468C54; /* medium green :: code annotation numbers */ + color: #468C54 ; /* medium green :: code annotation numbers */ color: #57AD68; /* green :: end mark, chapter title keyword */ color: #A9D8B2; /* light green */ } diff --git a/data/styles/epub3-css3-only.css b/data/styles/epub3-css3-only.css index 294219fb..ab636b93 100644 --- a/data/styles/epub3-css3-only.css +++ b/data/styles/epub3-css3-only.css @@ -83,39 +83,6 @@ body code, body kbd, body pre, pre :not(code) { } } -/* Use darker font colors on Kindle Paperwhite and Oasis */ -@media amzn-kf8 and (device-height: 1024px) and (device-width: 758px), amzn-kf8 and (device-height: 758px) and (device-width: 1024px), amzn-kf8 and (device-height: 1680px) and (device-width: 1264px), amzn-kf8 and (device-height: 1264px) and (device-width: 1680px) { - body p, - div.abstract > p, - ul, ol, li, dl, dt, dd, footer, - div.verse .attribution, table.table th, table.table td, - figcaption, caption, - h1, h2, h3, h4, h5 { - color: #000000; - } - - body a:link, - div.abstract > p a:link { - color: #000000; - -webkit-text-fill-color: #000000; - } - - body a:visited { - color: #333332; - -webkit-text-fill-color: #333332; - } - - .chapter-header { - color: #191918; - border-bottom-color: #191918; - } - - h1.chapter-title .subtitle, - .chapter-header p.byline { - color: #000000; - } -} - .chapter-header p.byline { height: auto; /* Aldiko requires this value to be 0; reset it for all others */ } diff --git a/data/styles/epub3.css b/data/styles/epub3.css index d703eaf7..2067fe75 100644 --- a/data/styles/epub3.css +++ b/data/styles/epub3.css @@ -81,8 +81,8 @@ b, strong { b.button { font-weight: normal; - text-shadow: 1px 0 0 #666665; - color: #191918; + text-shadow: 1px 0 0 #333332; + color: #101010; white-space: nowrap; } @@ -143,7 +143,7 @@ img { mark { background-color: #FFC14F; - color: #191918; + color: #101010; } small { @@ -199,13 +199,10 @@ td, th { } 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; @@ -222,9 +219,9 @@ body:first-of-type a:link { } 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 { @@ -270,7 +267,6 @@ 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; @@ -281,7 +277,7 @@ body p, li, dt, dd, footer { } code, kbd, pre { - color: #191918; + color: #101010; font-family: "M+ 1mn", monospace; -webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */ } @@ -462,7 +458,7 @@ ul > li::before { ul > li::before { content: "\25AA"; /* small black square */ - color: #666665; + color: #333332; } ul ul > li::before { @@ -472,7 +468,7 @@ ul ul > li::before { ul ul ul > li::before { content: "\2022"; /* small black circle */ - color: #666665; + color: #333332; } ul ul ul ul > li::before { @@ -534,7 +530,6 @@ ul.references > li > span.principal { /* 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 */ @@ -542,14 +537,13 @@ h1, h2 { } 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; @@ -564,7 +558,7 @@ h4 { } h5 { - color: #666665; + color: #333332; /* font-size: 1em; text-transform: uppercase; @@ -594,7 +588,7 @@ h5 code { /*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; @@ -607,7 +601,7 @@ h1.chapter-title { 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; @@ -615,7 +609,6 @@ h1.chapter-title { 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 */ @@ -632,7 +625,6 @@ h1.chapter-title b { } .chapter-header p.byline { - color: #333332; /* float left and height 0 takes this line out of the flow */ float: left; height: 0; @@ -663,15 +655,15 @@ div.abstract { } 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 { @@ -748,7 +740,7 @@ figcaption, caption { font-size: 0.9em; font-style: italic; - color: #666665; + color: #333332; letter-spacing: -0.01em; line-height: 1.4; text-align: left; @@ -780,10 +772,10 @@ figure.listing > figcaption + pre { } 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); @@ -811,7 +803,7 @@ aside.sidebar > h2 { 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; @@ -848,7 +840,7 @@ div[class~="blockquote"] { } blockquote > p { - color: #191918; + color: #101010; font-style: italic; /* @@ -865,7 +857,7 @@ blockquote > p { 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 */ @@ -898,7 +890,7 @@ blockquote footer { blockquote footer .context { font-size: 0.9em; letter-spacing: -0.05em; - color: #666665; + color: #333332; } pre { @@ -909,14 +901,10 @@ pre { 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 { @@ -1120,7 +1108,7 @@ table.table th { } table.table thead th { - border-bottom: 1px solid #80807F; + border-bottom: 1px solid #707070; } table.table td > p, @@ -1141,26 +1129,26 @@ table.table div.embed > * + * { table.table-framed { 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; border-style: solid; - border-color: #80807F; + border-color: #707070; } table.table-grid thead tr > *:last-child { @@ -1176,14 +1164,14 @@ 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 { @@ -1214,7 +1202,7 @@ hr.pagebreak + * { img.headshot { float: left; - border: 1px solid #80807F; + border: 1px solid #707070; padding: 1px; margin: 0.35em 1em 0.15em 0; height: 5em !important;