diff options
| -rw-r--r-- | ext/css/display.css | 11 | ||||
| -rw-r--r-- | ext/css/structured-content.css | 4 | ||||
| -rw-r--r-- | ext/data/structured-content-style.json | 6 | ||||
| -rw-r--r-- | ext/js/display/structured-content-generator.js | 2 |
4 files changed, 19 insertions, 4 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index b23ae5e5..c6a39526 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -1128,6 +1128,7 @@ button.action-button[data-icon=source-term]::before { color: var(--text-color-light3); } .gloss-content { + display: block; white-space: pre-line; } .definition-disambiguation-list { @@ -1153,6 +1154,9 @@ button.action-button[data-icon=source-term]::before { opacity: 0; white-space: pre-wrap; } +.gloss-separator { + display: none; +} .definition-item { display: list-item; position: relative; @@ -1170,6 +1174,7 @@ button.action-button[data-icon=source-term]::before { flex-flow: row nowrap; } .definition-item-content { + width: 100%; flex: 1 1 auto; background-color: transparent; transition: background-color var(--animation-duration) ease-in-out; @@ -2006,6 +2011,12 @@ button.footer-notification-close-button { display: inline; color: var(--text-color-light3); } +:root[data-glossary-layout-mode=compact] .gloss-content { + display: inline; +} +:root[data-glossary-layout-mode=compact] .gloss-separator { + display: inline; +} :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation-list[data-term-count='0'], :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation[data-type=reading] { diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css index ea0bf5cd..37cfde86 100644 --- a/ext/css/structured-content.css +++ b/ext/css/structured-content.css @@ -20,6 +20,7 @@ display: inline-block; white-space: nowrap; max-width: 100%; + max-height: 100vh; position: relative; vertical-align: top; line-height: 0; @@ -35,6 +36,7 @@ display: inline-block; position: relative; line-height: 1; + max-width: 100%; } .gloss-image-link[href]:hover { cursor: pointer; @@ -119,7 +121,7 @@ :root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background { image-rendering: auto; } -.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-aspect-ratio-sizer { +.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer { display: inline-block; width: 0; vertical-align: top; diff --git a/ext/data/structured-content-style.json b/ext/data/structured-content-style.json index 80a71e1c..cae7ff9f 100644 --- a/ext/data/structured-content-style.json +++ b/ext/data/structured-content-style.json @@ -5,6 +5,7 @@ ["display", "inline-block"], ["white-space", "nowrap"], ["max-width", "100%"], + ["max-height", "100vh"], ["position", "relative"], ["vertical-align", "top"], ["line-height", "0"], @@ -19,7 +20,8 @@ ["color", "inherit"], ["display", "inline-block"], ["position", "relative"], - ["line-height", "1"] + ["line-height", "1"], + ["max-width", "100%"] ] }, { @@ -130,7 +132,7 @@ ] }, { - "selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image-aspect-ratio-sizer"], + "selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer"], "styles": [ ["display", "inline-block"], ["width", "0"], diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index 98706ca9..833df6f6 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -101,7 +101,7 @@ class StructuredContentGenerator { const imageContainer = this._createElement('span', 'gloss-image-container'); node.appendChild(imageContainer); - const aspectRatioSizer = this._createElement('span', 'gloss-image-aspect-ratio-sizer'); + const aspectRatioSizer = this._createElement('span', 'gloss-image-sizer'); imageContainer.appendChild(aspectRatioSizer); const imageBackground = this._createElement('span', 'gloss-image-background'); |