diff options
| author | Stephen Kraus <8003332+stephenmk@users.noreply.github.com> | 2022-05-14 08:59:38 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-14 09:59:38 -0400 |
| commit | 6a74746113c724e750620d10b58ad6bac94060c9 (patch) | |
| tree | 9e3cfbc7e7a5bc3b3c243ab1f2608aa46c99a193 /ext/css | |
| parent | e9843f67cb6b3ca903015d85e4c1e2ed18557cb0 (diff) | |
Add new structured content features: lists and the HTML `lang` attribute (#2129)
* Add support for structured content lists and `list-style-type` style
A full list of supported style types is documented here:
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
There's nothing in this code preventing a term bank from assigning,
for example, a `list-style-type` style to a `div` element, but it
doesn't seem like browsers will complain about things like that.
* Add support for `lang` attribute in structured content
Support added for the following node types:
"ruby", "rt", "rp", "table", "thead", "tbody", "tfoot", "tr", "td",
"th", "span", "div", "ol", "ul", "li", "a"
I couldn't get it to work for the alt-hover text on "img" tags.
Tests are included in the file
"test/data/dictionaries/valid-dictionary/term_bank_1.json"
* Add styles for structured content lists
* Add override rules for new structured-content list styles
see: https://github.com/FooSoft/yomichan/pull/2129
Co-authored-by: stephenmk <stephenmk@users.noreply.github.com>
Diffstat (limited to 'ext/css')
| -rw-r--r-- | ext/css/structured-content.css | 18 |
1 files changed, 18 insertions, 0 deletions
diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css index 485527e5..5e863318 100644 --- a/ext/css/structured-content.css +++ b/ext/css/structured-content.css @@ -235,3 +235,21 @@ padding: 0.25em; vertical-align: top; } +.gloss-sc-ol, +.gloss-sc-ul { + padding-left: var(--list-padding2); +} +:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] { + display: inline; + list-style: none; + padding-left: 0; +} +:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li { + display: inline; +} +:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before { + white-space: pre-wrap; + content: var(--compact-list-separator); + display: inline; + color: var(--text-color-light3); +} |