alex/yomichan
1
Fork 0
Code Releases Activity

Update structured content CSS styles (#1770)

Browse Source
This commit is contained in:
toasted-nutbread 2021-06-27 15:01:35 -04:00 committed by GitHub
parent 94819e0ec3
commit 24ef820ba8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,16 +62,24 @@
padding: 0.25em; padding: 0.25em;
} }
.gloss-image-background { .gloss-image-background {
--image: none;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--text-color); background-color: var(--text-color);
-webkit-mask-repeat: no-repeat;
--image: none; -webkit-mask-position: center center;
--icon-size: contain; -webkit-mask-mode: alpha;
--icon-image: var(--image); -webkit-mask-size: contain;
-webkit-mask-image: var(--image);
mask-repeat: no-repeat;
mask-position: center center;
mask-mode: alpha;
mask-size: contain;
mask-image: var(--image);
} }
.gloss-image { .gloss-image {
display: inline-block; display: inline-block;
@ -192,7 +200,6 @@
.gloss-sc-table { .gloss-sc-table {
table-layout: auto; table-layout: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0;
} }
.gloss-sc-tbody { .gloss-sc-tbody {
background-color: transparent; background-color: transparent;
@ -205,7 +212,9 @@
} }
.gloss-sc-th, .gloss-sc-th,
.gloss-sc-td { .gloss-sc-td {
border: calc(1em / var(--font-size-no-units)) solid var(--text-color-light2); border-width: calc(1em / var(--font-size-no-units));
border-style: solid;
border-color: var(--text-color-light2);
padding: 0.25em; padding: 0.25em;
vertical-align: top; vertical-align: top;
} }

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

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