Skip to content

Commit 1f3f48a

Browse files
JayPanozJayPanoz
authored
Merge pull request #185 from readium/beta-14
- consolidates custom colors for theming into a single user submodule - removes the fontOverride flag following the removal of advancedSettings - removes day mode and migrate its declarations in base - creates opt-out flag for overflow
2 parents 74c2ad1 + 50841be commit 1f3f48a

77 files changed

Lines changed: 912 additions & 708 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Readium CSS provides styles for reflowable text:
99
- paged and scrolled views;
1010
- a “patch” for HTML5 Suggested Rendering specific to publications (e.g. extra styles for hyphenation, breaks, etc.);
1111
- default styles for unstyled ebooks;
12-
- reading modes (day, night, and sepia);
12+
- reading modes (night and sepia);
1313
- themes;
1414
- user settings;
1515
- a set of baselines and recommendations for accessibility, overrides, and internationalization.

‎backstop.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,15 @@
7272
"misMatchThreshold" : 0.1
7373
},
7474
{
75-
"label": "Day mode pref",
76-
"url": "http://localhost:8000/tests/day.html",
75+
"label": "Default colors pref",
76+
"url": "http://localhost:8000/tests/default-colors.html",
77+
"delay": 0,
78+
"selectors": ["document"],
79+
"misMatchThreshold" : 0.1
80+
},
81+
{
82+
"label": "Default custom colors pref",
83+
"url": "http://localhost:8000/tests/default-custom-colors.html",
7784
"delay": 0,
7885
"selectors": ["document"],
7986
"misMatchThreshold" : 0.1

‎css/ReadMe.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ In the `css/src` folder, you’ll find all the needed stylesheets you will proce
7777
```
7878
@import "../ReadiumCSS-config.css";
7979
@import "modules/ReadiumCSS-base.css";
80-
@import "modules/ReadiumCSS-day_mode.css";
8180
@import "modules/ReadiumCSS-fonts.css";
8281
@import "modules/ReadiumCSS-html5patch.css";
8382
@import "modules/ReadiumCSS-safeguards.css";
@@ -176,17 +175,19 @@ root.style.setProperty("--USER__bodyHyphens", "auto");
176175

177176
Of course this example is simplistic. You could for instance create an helper to set multiple properties at once.
178177

179-
#### Apply sepia theme/mode
178+
#### Apply sepia mode
180179

181-
To apply the sepia theme/mode, you can use a flag that will apply preset values.
180+
To apply the sepia mode, you can use a flag that will apply preset values.
182181

183182
```
184183
root.style.setProperty("--USER__appearance", "readium-sepia-on");
185184
```
186185

187186
## Create Themes
188187

189-
In this model, themes are a set of user settings you can store and retrieve. Add the properties to `html` and you get a theme.
188+
In Readium CSS model, themes are a set of user settings you can store and retrieve. Add the properties to `html` and you get a theme.
189+
190+
Depending on the prefix you are using, `--RS__` or `--USER__`, your theme will override the publisher’s styles or not. The rule being `USER > PUBLISHER > RS`.
190191

191192
Check the [User Preferences doc](../docs/CSS12-user_prefs.md) for a list of available user variables.
192193

‎css/ReadiumCSS-config.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@
1515
@custom-selector :--paged-view [style*="readium-paged-on"];
1616
@custom-selector :--scroll-view [style*="readium-scroll-on"];
1717

18-
/* Font-family override */
19-
@custom-selector :--font-override [style*="readium-font-on"];
20-
2118
/* Disabling the new implementation for font-size */
2219
@custom-selector :--deprecated-font-size [style*="readium-deprecatedFontSize-on"];
2320

@@ -37,6 +34,9 @@
3734
/* Disabling pagination for vertical writing */
3835
@custom-selector :--no-vertical-pagination [style*="readium-noVerticalPagination-on"];
3936

37+
/* Disabling overflow */
38+
@custom-selector :--no-overflow [style*="readium-noOverflow-on"];
39+
4040
/* Hiding ruby */
4141
@custom-selector :--no-ruby [style*="readium-noRuby-on"];
4242

‎css/demo/demo-script.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ document.addEventListener("DOMContentLoaded", function() {
88
label.textContent = "Add ReadiumCSS flags and prefs: ";
99
input.type = "text";
1010
input.name = "rcss";
11-
input.value = "--RS__advancedSettings: readium-advanced-on; --USER__fontOverride: readium-font-on;"
1211
label.appendChild(input);
1312
document.documentElement.appendChild(label);
1413

‎css/dist/ReadiumCSS-after.css‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Readium CSS (v. 2.0.0-beta.13)
2+
* Readium CSS (v. 2.0.0-beta.14)
33
* Developers: Jiminy Panoz
44
* Copyright (c) 2017. Readium Foundation. All rights reserved.
55
* Use of this source code is governed by a BSD-style license which is detailed in the
@@ -66,17 +66,20 @@ body{
6666
max-width:var(--RS__defaultLineLength) !important;
6767
padding:0 var(--RS__pageGutter) !important;
6868
margin:0 auto !important;
69-
overflow:hidden;
7069
box-sizing:border-box;
7170
}
7271

72+
:root:not([style*="readium-noOverflow-on"]) body{
73+
overflow:hidden;
74+
}
75+
7376
@supports (overflow: clip){
7477

75-
:root{
78+
:root:not([style*="readium-noOverflow-on"]){
7679
overflow:clip;
7780
}
7881

79-
body{
82+
:root:not([style*="readium-noOverflow-on"]) body{
8083
overflow:clip;
8184
overflow-clip-margin:content-box;
8285
}
@@ -96,16 +99,19 @@ body{
9699

97100
:root[style*="readium-scroll-on"] body{
98101
max-width:var(--RS__defaultLineLength) !important;
102+
}
103+
104+
:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
99105
overflow:auto;
100106
}
101107

102108
@supports (overflow: clip){
103109

104-
:root[style*="readium-scroll-on"]{
110+
:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){
105111
overflow:auto;
106112
}
107113

108-
:root[style*="readium-scroll-on"] body{
114+
:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
109115
overflow:clip;
110116
}
111117
}
@@ -352,47 +358,47 @@ body{
352358
hyphens:inherit;
353359
}
354360

355-
:root[style*="readium-font-on"][style*="--USER__fontFamily"]{
361+
:root[style*="--USER__fontFamily"]{
356362
font-family:var(--USER__fontFamily) !important;
357363
}
358364

359-
:root[style*="readium-font-on"][style*="--USER__fontFamily"] *{
365+
:root[style*="--USER__fontFamily"] *{
360366
font-family:revert !important;
361367
}
362368

363-
:root[style*="readium-font-on"][style*="AccessibleDfA"]{
369+
:root[style*="AccessibleDfA"]{
364370
font-family:AccessibleDfA, Verdana, Tahoma, "Trebuchet MS", sans-serif !important;
365371
}
366372

367-
:root[style*="readium-font-on"][style*="IA Writer Duospace"]{
373+
:root[style*="IA Writer Duospace"]{
368374
font-family:"IA Writer Duospace", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace !important;
369375
}
370376

371-
:root[style*="readium-font-on"][style*="AccessibleDfA"],:root[style*="readium-font-on"][style*="IA Writer Duospace"],
377+
:root[style*="AccessibleDfA"],:root[style*="IA Writer Duospace"],
372378
:root[style*="readium-a11y-on"]{
373379
font-style:normal !important;
374380
font-weight:normal !important;
375381
}
376382

377-
:root[style*="readium-font-on"][style*="AccessibleDfA"] *:not(code):not(var):not(kbd):not(samp),:root[style*="readium-font-on"][style*="IA Writer Duospace"] *:not(code):not(var):not(kbd):not(samp),
383+
:root[style*="AccessibleDfA"] *:not(code):not(var):not(kbd):not(samp),:root[style*="IA Writer Duospace"] *:not(code):not(var):not(kbd):not(samp),
378384
:root[style*="readium-a11y-on"] *:not(code):not(var):not(kbd):not(samp){
379385
font-family:inherit !important;
380386
font-style:inherit !important;
381387
font-weight:inherit !important;
382388
}
383389

384-
:root[style*="readium-font-on"][style*="AccessibleDfA"] *,:root[style*="readium-font-on"][style*="IA Writer Duospace"] *,
390+
:root[style*="AccessibleDfA"] *,:root[style*="IA Writer Duospace"] *,
385391
:root[style*="readium-a11y-on"] *{
386392
text-decoration:none !important;
387393
font-variant-caps:normal !important;
388394
font-variant-numeric:normal !important;
389395
font-variant-position:normal !important;
390396
}
391397

392-
:root[style*="readium-font-on"][style*="AccessibleDfA"] sup,:root[style*="readium-font-on"][style*="IA Writer Duospace"] sup,
398+
:root[style*="AccessibleDfA"] sup,:root[style*="IA Writer Duospace"] sup,
393399
:root[style*="readium-a11y-on"] sup,
394-
:root[style*="readium-font-on"][style*="AccessibleDfA"] sub,
395-
:root[style*="readium-font-on"][style*="IA Writer Duospace"] sub,
400+
:root[style*="AccessibleDfA"] sub,
401+
:root[style*="IA Writer Duospace"] sub,
396402
:root[style*="readium-a11y-on"] sub{
397403
font-size:1rem !important;
398404
vertical-align:baseline !important;
@@ -467,20 +473,20 @@ body{
467473
font-variant:none;
468474
}
469475

470-
:root[style*="readium-font-on"][style*="--USER__fontWeight"] body{
476+
:root[style*="--USER__fontWeight"] body{
471477
font-weight:var(--USER__fontWeight) !important;
472478
}
473479

474-
:root[style*="readium-font-on"][style*="--USER__fontWeight"] b,
475-
:root[style*="readium-font-on"][style*="--USER__fontWeight"] strong{
480+
:root[style*="--USER__fontWeight"] b,
481+
:root[style*="--USER__fontWeight"] strong{
476482
font-weight:bolder;
477483
}
478484

479-
:root[style*="readium-font-on"][style*="--USER__fontWidth"] body{
485+
:root[style*="--USER__fontWidth"] body{
480486
font-stretch:var(--USER__fontWidth) !important;
481487
}
482488

483-
:root[style*="readium-font-on"][style*="--USER__fontOpticalSizing"] body{
489+
:root[style*="--USER__fontOpticalSizing"] body{
484490
font-optical-sizing:var(--USER__fontOpticalSizing) !important;
485491
}
486492

‎css/dist/ReadiumCSS-before.css‎

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Readium CSS (v. 2.0.0-beta.13)
2+
* Readium CSS (v. 2.0.0-beta.14)
33
* Developers: Jiminy Panoz
44
* Copyright (c) 2017. Readium Foundation. All rights reserved.
55
* Use of this source code is governed by a BSD-style license which is detailed in the
@@ -38,6 +38,31 @@
3838
--RS__lineHeightCompensation:1;
3939

4040
--RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation));
41+
42+
--RS__selectionTextColor:inherit;
43+
44+
--RS__selectionBackgroundColor:#b4d8fe;
45+
46+
--RS__visitedColor:#551A8B;
47+
48+
--RS__linkColor:#0000EE;
49+
50+
--RS__textColor:#121212;
51+
52+
--RS__backgroundColor:#FFFFFF;
53+
color:var(--RS__textColor) !important;
54+
55+
background-color:var(--RS__backgroundColor) !important;
56+
}
57+
58+
::-moz-selection{
59+
color:var(--RS__selectionTextColor);
60+
background-color:var(--RS__selectionBackgroundColor);
61+
}
62+
63+
::selection{
64+
color:var(--RS__selectionTextColor);
65+
background-color:var(--RS__selectionBackgroundColor);
4166
}
4267

4368
html{
@@ -193,36 +218,6 @@ math{
193218
--RS__lineHeightCompensation:1.167;
194219
}
195220

196-
:root{
197-
198-
--RS__selectionTextColor:inherit;
199-
200-
--RS__selectionBackgroundColor:#b4d8fe;
201-
202-
--RS__visitedColor:#551A8B;
203-
204-
--RS__linkColor:#0000EE;
205-
206-
--RS__textColor:#121212;
207-
208-
--RS__backgroundColor:#FFFFFF;
209-
}
210-
211-
:root{
212-
color:var(--RS__textColor) !important;
213-
background-color:var(--RS__backgroundColor) !important;
214-
}
215-
216-
::-moz-selection{
217-
color:var(--RS__selectionTextColor);
218-
background-color:var(--RS__selectionBackgroundColor);
219-
}
220-
221-
::selection{
222-
color:var(--RS__selectionTextColor);
223-
background-color:var(--RS__selectionBackgroundColor);
224-
}
225-
226221
@font-face{
227222
font-family:AccessibleDfA;
228223
font-style:normal;

‎css/dist/ReadiumCSS-default.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Readium CSS (v. 2.0.0-beta.13)
2+
* Readium CSS (v. 2.0.0-beta.14)
33
* Developers: Jiminy Panoz
44
* Copyright (c) 2017. Readium Foundation. All rights reserved.
55
* Use of this source code is governed by a BSD-style license which is detailed in the

‎css/dist/cjk-horizontal/ReadiumCSS-after.css‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Readium CSS (v. 2.0.0-beta.13)
2+
* Readium CSS (v. 2.0.0-beta.14)
33
* Developers: Jiminy Panoz
44
* Copyright (c) 2017. Readium Foundation. All rights reserved.
55
* Use of this source code is governed by a BSD-style license which is detailed in the
@@ -66,17 +66,20 @@ body{
6666
max-width:var(--RS__defaultLineLength) !important;
6767
padding:0 var(--RS__pageGutter) !important;
6868
margin:0 auto !important;
69-
overflow:hidden;
7069
box-sizing:border-box;
7170
}
7271

72+
:root:not([style*="readium-noOverflow-on"]) body{
73+
overflow:hidden;
74+
}
75+
7376
@supports (overflow: clip){
7477

75-
:root{
78+
:root:not([style*="readium-noOverflow-on"]){
7679
overflow:clip;
7780
}
7881

79-
body{
82+
:root:not([style*="readium-noOverflow-on"]) body{
8083
overflow:clip;
8184
overflow-clip-margin:content-box;
8285
}
@@ -96,16 +99,19 @@ body{
9699

97100
:root[style*="readium-scroll-on"] body{
98101
max-width:var(--RS__defaultLineLength) !important;
102+
}
103+
104+
:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
99105
overflow:auto;
100106
}
101107

102108
@supports (overflow: clip){
103109

104-
:root[style*="readium-scroll-on"]{
110+
:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){
105111
overflow:auto;
106112
}
107113

108-
:root[style*="readium-scroll-on"] body{
114+
:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{
109115
overflow:clip;
110116
}
111117
}
@@ -318,11 +324,11 @@ body{
318324
max-width:var(--USER__lineLength) !important;
319325
}
320326

321-
:root[style*="readium-font-on"][style*="--USER__fontFamily"]{
327+
:root[style*="--USER__fontFamily"]{
322328
font-family:var(--USER__fontFamily) !important;
323329
}
324330

325-
:root[style*="readium-font-on"][style*="--USER__fontFamily"] *{
331+
:root[style*="--USER__fontFamily"] *{
326332
font-family:revert !important;
327333
}
328334

@@ -357,20 +363,20 @@ body{
357363
margin-bottom:var(--USER__paraSpacing) !important;
358364
}
359365

360-
:root[style*="readium-font-on"][style*="--USER__fontWeight"] body{
366+
:root[style*="--USER__fontWeight"] body{
361367
font-weight:var(--USER__fontWeight) !important;
362368
}
363369

364-
:root[style*="readium-font-on"][style*="--USER__fontWeight"] b,
365-
:root[style*="readium-font-on"][style*="--USER__fontWeight"] strong{
370+
:root[style*="--USER__fontWeight"] b,
371+
:root[style*="--USER__fontWeight"] strong{
366372
font-weight:bolder;
367373
}
368374

369-
:root[style*="readium-font-on"][style*="--USER__fontWidth"] body{
375+
:root[style*="--USER__fontWidth"] body{
370376
font-stretch:var(--USER__fontWidth) !important;
371377
}
372378

373-
:root[style*="readium-font-on"][style*="--USER__fontOpticalSizing"] body{
379+
:root[style*="--USER__fontOpticalSizing"] body{
374380
font-optical-sizing:var(--USER__fontOpticalSizing) !important;
375381
}
376382

0 commit comments

Comments
 (0)