BOtis
Level 1
(0 points)
Q: CSS: Detection & Style (White vs Sepia vs Night)
I'm having difficulty locating instructions on how to modify CSS for the three viewing modes.
The only example I could find used @media, but either I don't have the correct element names,
or I have some other syntax error, or I should be using some other mechanism to change styles?
Is it even possible for an ePub to detect these modes since it may be at the application level?
Is it possible to do this within one CSS file or would it require:
- White.css
- Sepia.css
- Night.css
If so, what mechanism would be used to switch between them?
I notice that Play Books has the same feature except White is called Day,
would the calls/tags be the same, or would I need to also make a Day.css?
Using the CSS file below:
- Everything behaves as expected in White mode (except @media of course)
- All the colors work in Sepia mode, except the body "background-color" is changed
It would be nice to change the body font "color" to #704214 to match the theme... - Night mode seems to set ALL "color" to #ffffff and "background-color" to #000000
I lose color on headings, equations, tables, and horizontal rules (Color = Information)
I had to use "border-color: #666666;" to make <hr> and <table> visible...
iBooks still renders color from an SVG file: (fill=#666666) (fill=#cc0000) (fill=#0000cc)
Would it be possible to use something akin to a net mask to auto adjust color levels?
i.e. #00CC00 on a White background would switch to #003300 on a Black background?
I realize this 'Black & White' night mode may be a feature and not a bug, but this reminds me of IE vs FF all over again...
<!DOCTYPE html>
<html>
<head>
<style>
@media white { /* Day */
* { color: #000000; }
body { background-color: #ffffff; }
}
@media black { /* Night */
* { color: #ffffff; }
body { background-color: #000000; }
}
@media sepia { /* Sepia */
* { color: #704214; }
body { background-color: #eae4d3; }
}
body {
font-family: sans-serif;
font-size: 0.75em;
font-weight: normal;
}
code { /* Equations */
color: #990000;
font-family: monospace;
font-weight: bold;
line-height: normal;
}
h1 { /* Title */
color: #0000ff;
font-family: serif;
font-size: 2.0em;
font-weight: bold;
margin-top: 0.25em;
margin-bottom: 0.25em;
text-align: center;
text-shadow: 1px 1px #999999;
}
h2, h3, h4, h5, th { /* Headings */
font-family: sans-serif;
font-weight: bold;
}
h2 {
color: #0000cc;
font-size: 1.25em;
margin-top: 0.75em;
margin-bottom: 0.75em;
text-align: center;
}
h3 {
color: #000099;
font-size: 1.125em;
margin-top: 0.8em;
margin-bottom: 0.4em;
}
h4 {
color: #000066;
font-size: 1.0em;
margin-top: 0.6em;
margin-bottom: 0.3em;
}
h5 {
color: #000033;
font-size: 0.875em;
margin-top: 0.4em;
margin-bottom: 0.2em;
}
hr { /* Gecko - WebKit\Blink - Trident */
clear: both;
color: #cc0000;
background-color: #cc0000;
border-color: #666666; /* Night */
border-style: solid;
border-width: 1px;
display: block;
height: 1px;
margin-top: 1px;
margin-bottom: 1px;
text-align: center;
width: 75%;
}
i {
color: #666666;
}
li {
margin-top: 0.1em;
margin-bottom: 0.1em;
}
ol, ul {
margin-top: 0.2em;
margin-bottom: 0.2em;
}
p {
text-indent: 2.5em;
text-align: justify;
}
table {
border-collapse: collapse;
text-align: center;
}
table, th, td {
border-color: #666666; /* Night */
border-style: solid;
border-width: 1px;
padding: 0.5em;
}
th {
color: #ffffff;
background-color: #999999;
}
</style>
</head>
</html>
iPhone 5, iOS 8.1
Posted on Nov 13, 2014 12:06 AM
