|
24 | 24 |
|
25 | 25 | <li>1 default stylesheet for unstyled ebooks;</li> |
26 | 26 |
|
27 | | - <li>1 stylesheet for user highlights and media overlays;</li> |
28 | | - |
29 | 27 | <li>1 stylesheet to deal with the OS’ a11y modes.</li> |
30 | 28 | </ul> |
31 | 29 |
|
|
374 | 372 | </section> |
375 | 373 | </section> |
376 | 374 |
|
377 | | - <section id="user-highlights-and-media-overlays" class="level2"> |
378 | | - <h2 id="sigil_toc_id_134">User highlights and media overlays</h2> |
379 | | - |
380 | | - <section id="highlights" class="level3"> |
381 | | - <h3 class="sigil_not_in_toc">Highlights</h3> |
382 | | - |
383 | | - <p>You can use classic [insert famous highlighters’ brand] colors in all their neon glory:</p> |
384 | | - |
385 | | - <ul> |
386 | | - <li>yellow;</li> |
387 | | - |
388 | | - <li>green;</li> |
389 | | - |
390 | | - <li>orange;</li> |
| 375 | + <section id="os-a11y-modes" class="level2"> |
| 376 | + <h2 id="sigil_toc_id_134">OS’ a11y modes</h2> |
| 377 | + |
| 378 | + <p>This stylesheet is intended to deal with a11y settings users can set at the OS level, whenever possible:</p> |
391 | 379 |
|
392 | | - <li>pink.</li> |
393 | | - </ul> |
394 | | - |
395 | | - <p>There’s no blue since it is too close to the default <code>::selection</code>.</p> |
396 | | - |
397 | | - <p>Ideally, you should offer users the possibility to switch colors when highlighting as they might use a color pattern to manage different types of highlights/notes.</p> |
398 | | - |
399 | | - <p>There’s a class syntax you can use to differentiate highlights: <code>.readiumCSS-{color}-highlight</code> e.g. <code>.readiumCSS-yellow-highlight</code> or <code>.readiumCSS-pink-highlight</code>.</p> |
400 | | - |
401 | | - <p>Values are declared in <code>rgba</code> so that those colors don’t have to be redefined in night modes.</p> |
402 | | - |
403 | | - <p>At first sight, contrast is OK for those colors in default and night mode, but it will obviously depend on the <code>background-color</code> and <code>color</code> values you’re using for themes.</p> |
404 | | - </section> |
405 | | - |
406 | | - <section id="media-overlays" class="level3"> |
407 | | - <h3 class="sigil_not_in_toc">Media Overlays</h3> |
408 | | - |
409 | | - <p>We’re using the same one as Readium 1 for interop reasons.</p> |
410 | | - |
411 | | - <pre><code>.readiumCSS-mo-active-default { |
412 | | - background-color: yellow !important; |
413 | | - color: black !important; |
414 | | -}</code></pre> |
415 | | - |
416 | | - <p>It has been prefixed with <code>readiumCSS-</code> but you can get rid of it if needed.</p> |
417 | | - </section> |
418 | | - |
419 | | - <section id="os-a11y-modes" class="level3"> |
420 | | - <h3 class="sigil_not_in_toc">OS’ a11y modes</h3> |
421 | | - |
422 | | - <p>This stylesheet is intended to deal with a11y settings users can set at the OS level, whenever possible:</p> |
423 | | - |
424 | | - <ul> |
425 | | - <li>high-contrast mode;</li> |
| 380 | + <ul> |
| 381 | + <li>high-contrast mode;</li> |
426 | 382 |
|
427 | | - <li>inverted colors;</li> |
| 383 | + <li>inverted colors;</li> |
428 | 384 |
|
429 | | - <li>monochrome;</li> |
| 385 | + <li>monochrome;</li> |
430 | 386 |
|
431 | | - <li>reduced motion.</li> |
432 | | - </ul> |
| 387 | + <li>reduced motion.</li> |
| 388 | + </ul> |
433 | 389 |
|
434 | | - <p>For <code>monochrome</code>, we’ll have to adjust reading modes (night, sepia, etc.) in their specific stylesheet; we’ll see if we can at least manage some more global settings in there.</p> |
435 | | - </section> |
| 390 | + <p>For <code>monochrome</code>, we’ll have to adjust reading modes (night, sepia, etc.) in their specific stylesheet; we’ll see if we can at least manage some more global settings in there.</p> |
436 | 391 | </section> |
437 | 392 | </section> |
438 | 393 | </body> |
|
0 commit comments