alex/yomichan
1
Fork 0
Code Releases Activity

Update CSS rules for images (#1777)

Browse Source
This commit is contained in:
toasted-nutbread 2021-06-28 22:12:17 -04:00 committed by GitHub
parent 9f3d267e24
commit 1f1a958a71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ext/css/display.css
View File

@ -1128,6 +1128,7 @@ button.action-button[data-icon=source-term]::before {
color: var(--text-color-light3); color: var(--text-color-light3);
} }
.gloss-content { .gloss-content {
display: block;
white-space: pre-line; white-space: pre-line;
} }
.definition-disambiguation-list { .definition-disambiguation-list {
@ -1153,6 +1154,9 @@ button.action-button[data-icon=source-term]::before {
opacity: 0; opacity: 0;
white-space: pre-wrap; white-space: pre-wrap;
} }
.gloss-separator {
display: none;
}
.definition-item { .definition-item {
display: list-item; display: list-item;
position: relative; position: relative;
@ -1170,6 +1174,7 @@ button.action-button[data-icon=source-term]::before {
flex-flow: row nowrap; flex-flow: row nowrap;
} }
.definition-item-content { .definition-item-content {
width: 100%;
flex: 1 1 auto; flex: 1 1 auto;
background-color: transparent; background-color: transparent;
transition: background-color var(--animation-duration) ease-in-out; transition: background-color var(--animation-duration) ease-in-out;
@ -2006,6 +2011,12 @@ button.footer-notification-close-button {
display: inline; display: inline;
color: var(--text-color-light3); 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-list[data-term-count='0'],
:root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation[data-type=reading] { :root[data-show-pitch-accent-downstep-notation=true] .pitch-accent-disambiguation[data-type=reading] {

4
ext/css/structured-content.css
View File

@ -20,6 +20,7 @@
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
max-width: 100%; max-width: 100%;
max-height: 100vh;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
line-height: 0; line-height: 0;
@ -35,6 +36,7 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
line-height: 1; line-height: 1;
max-width: 100%;
} }
.gloss-image-link[href]:hover { .gloss-image-link[href]:hover {
cursor: pointer; cursor: pointer;
@ -119,7 +121,7 @@
:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background { :root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
image-rendering: auto; 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; display: inline-block;
width: 0; width: 0;
vertical-align: top; vertical-align: top;

6
ext/data/structured-content-style.json
View File

@ -5,6 +5,7 @@
["display", "inline-block"], ["display", "inline-block"],
["white-space", "nowrap"], ["white-space", "nowrap"],
["max-width", "100%"], ["max-width", "100%"],
["max-height", "100vh"],
["position", "relative"], ["position", "relative"],
["vertical-align", "top"], ["vertical-align", "top"],
["line-height", "0"], ["line-height", "0"],
@ -19,7 +20,8 @@
["color", "inherit"], ["color", "inherit"],
["display", "inline-block"], ["display", "inline-block"],
["position", "relative"], ["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": [ "styles": [
["display", "inline-block"], ["display", "inline-block"],
["width", "0"], ["width", "0"],

2
ext/js/display/structured-content-generator.js
View File

@ -101,7 +101,7 @@ class StructuredContentGenerator {
const imageContainer = this._createElement('span', 'gloss-image-container'); const imageContainer = this._createElement('span', 'gloss-image-container');
node.appendChild(imageContainer); node.appendChild(imageContainer);
const aspectRatioSizer = this._createElement('span', 'gloss-image-aspect-ratio-sizer'); const aspectRatioSizer = this._createElement('span', 'gloss-image-sizer');
imageContainer.appendChild(aspectRatioSizer); imageContainer.appendChild(aspectRatioSizer);
const imageBackground = this._createElement('span', 'gloss-image-background'); const imageBackground = this._createElement('span', 'gloss-image-background');