alex/yomichan
1
Fork 0
Code Releases Activity

CSS lint (#1201)

Browse Source 
* Use single quotes instead of double

* Install stylelint

* Set up config

* Update package/tests

* Fix lint issues

* Update CSS rules
This commit is contained in:
toasted-nutbread 2021-01-03 15:30:38 -05:00 committed by GitHub
parent d50d7a4a3a
commit 63971776a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 2025 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/ci.yml vendored
View File

@ -21,6 +21,10 @@ jobs:
run: npm run test-lint run: npm run test-lint
env: env:
CI: true CI: true
- name: Lint CSS
run: npm run test-lint-css
env:
CI: true
- name: Tests - name: Tests
run: npm run test-code run: npm run test-code
env: env:

54
.stylelintrc.json Normal file
View File

@ -0,0 +1,54 @@
{
"extends": "stylelint-config-recommended",
"ignoreFiles": [
"ext/mixed/lib/**/*.css"
],
"rules": {
"font-family-name-quotes": "always-where-recommended",
"string-quotes": "single",
"color-named": "never",
"declaration-no-important": true,
"function-calc-no-invalid": true,
"function-calc-no-unspaced-operator": true,
"string-no-newline": true,
"unit-no-unknown": true,
"block-no-empty": true,
"no-extra-semicolons": true,
"no-invalid-double-slash-comments": true,
"font-weight-notation": "named-where-possible",
"color-hex-case": "lower",
"function-comma-space-after": "always",
"function-comma-space-before": "never",
"function-name-case": "lower",
"function-parentheses-space-inside": "never",
"function-whitespace-after": "always",
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"unit-case": "lower",
"value-keyword-case": "lower",
"property-case": "lower",
"indentation": 4,
"max-empty-lines": 2,
"selector-type-no-unknown": null,
"no-descending-specificity": null,
"no-duplicate-selectors": null,
"selector-combinator-space-before": "never",
"selector-combinator-space-after": "never",
"selector-list-comma-newline-after": "always-multi-line",
"rule-empty-line-before": null,
"block-opening-brace-space-before": [
"always",
{
"ignoreSelectors": "/^\\.icon/"
}
],
"block-opening-brace-space-after": "always-single-line",
"color-hex-length": null,
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always-single-line",
"length-zero-no-unit": null,
"selector-pseudo-element-colon-notation": "double",
"custom-property-empty-line-before": null,
"at-rule-empty-line-before": null
}
}

15
ext/bg/css/context.css
View File

@ -18,7 +18,7 @@
body { body {
padding: 10px; padding: 10px;
margin: 0; margin: 0;
font-family: "Segoe UI", Tahoma, sans-serif; font-family: 'Segoe UI', Tahoma, sans-serif;
font-size: 14px; font-size: 14px;
} }
@ -90,7 +90,7 @@ label {
padding: 0; padding: 0;
} }
.link-group-icon[data-icon=chevron]::after { .link-group-icon[data-icon=chevron]::after {
content: ""; content: '';
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -139,8 +139,8 @@ body[data-loaded=true] .toggle-group {
display: block; display: block;
padding: 6px 12px; padding: 6px 12px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: normal;
line-height: 1.42857143; line-height: calc(20 / 14);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
@ -203,7 +203,7 @@ body[data-loaded=true] .toggle-group {
background-color: #ffffff; background-color: #ffffff;
background-image: linear-gradient(#ffffff, #e0e0e0); background-image: linear-gradient(#ffffff, #e0e0e0);
background-repeat: repeat-x; background-repeat: repeat-x;
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
} }
.toggle-off:focus, .toggle-off:focus,
.toggle-off:hover, .toggle-off:hover,
@ -215,7 +215,7 @@ body[data-loaded=true] .toggle-group {
} }
.toggle-off:active, .toggle-off:active,
.toggle-handle:active { .toggle-handle:active {
background-color:#d4d4d4; background-color: #d4d4d4;
background-image: none; background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
border-color: #8c8c8c; border-color: #8c8c8c;
@ -234,14 +234,13 @@ body[data-loaded=true] .toggle-group {
border: 1px solid #cccccc; border: 1px solid #cccccc;
margin: 0; margin: 0;
padding: 2px 3px; padding: 2px 3px;
margin: 0;
cursor: pointer; cursor: pointer;
} }
.nav-button+.nav-button { .nav-button+.nav-button {
margin-left: -1px; margin-left: -1px;
} }
.nav-button::after { .nav-button::after {
content: ""; content: '';
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;

2
ext/bg/css/pitch-accents-preview.css
View File

@ -27,7 +27,7 @@ body {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: calc(20 / 14); line-height: calc(20 / 14);
} }

2
ext/bg/css/popup-preview.css
View File

@ -39,7 +39,7 @@ body {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
} }

15
ext/bg/css/settings.css
View File

@ -76,11 +76,11 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
.condition>.input-group-btn { .condition>.input-group-btn {
width: auto; width: auto;
} }
.condition>.profile-condition-prefix:after { .condition>.profile-condition-prefix::after {
content: "IF"; content: 'IF';
} }
.condition:nth-child(n+2)>.profile-condition-prefix:after { .condition:nth-child(n+2)>.profile-condition-prefix::after {
content: "AND"; content: 'AND';
} }
.profile-condition-prefix { .profile-condition-prefix {
@ -152,7 +152,7 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.scan-input-index:after { .scan-input-index::after {
display: block; display: block;
counter-increment: scan-input-id; counter-increment: scan-input-id;
content: counter(scan-input-id); content: counter(scan-input-id);
@ -265,7 +265,7 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
width: 39px; width: 39px;
text-align: center; text-align: center;
} }
.generic-input-list .generic-input-prefix:after { .generic-input-list .generic-input-prefix::after {
counter-increment: generic-input-id; counter-increment: generic-input-id;
content: counter(generic-input-id); content: counter(generic-input-id);
} }
@ -276,7 +276,6 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
width: 100%; width: 100%;
min-height: 34px; min-height: 34px;
line-height: 18px; line-height: 18px;
height: 96px;
resize: vertical; resize: vertical;
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
white-space: pre; white-space: pre;
@ -395,7 +394,7 @@ html:root[data-operating-system=openbsd] [data-hide-for-operating-system~=openbs
.dictionary-details-table { .dictionary-details-table {
display: table; display: table;
width: 100% width: 100%;
} }
.dictionary-details-entry { .dictionary-details-entry {

51
ext/bg/css/settings2.css
View File

@ -67,7 +67,7 @@
--text-color-lighter: #888888; --text-color-lighter: #888888;
--separator-color1: #cccccc; --separator-color1: #cccccc;
--separator-color2: #eeeeee; --separator-color2: #eeeeee;
--outline-item-background-color: rgba(13, 13, 13, 0.0); --outline-item-background-color: rgba(13, 13, 13, 0);
--outline-item-background-color-hover: rgba(13, 13, 13, 0.15); --outline-item-background-color-hover: rgba(13, 13, 13, 0.15);
--warning-color: #96751c; --warning-color: #96751c;
--warning-color-light: hsl(44, 80%, 65%); --warning-color-light: hsl(44, 80%, 65%);
@ -116,7 +116,7 @@ body {
padding: 0; padding: 0;
border: none; border: none;
font-size: var(--font-size); font-size: var(--font-size);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: var(--text-color); color: var(--text-color);
line-height: var(--line-height-default); line-height: var(--line-height-default);
height: 100%; height: 100%;
@ -130,9 +130,15 @@ ul {
margin: 0; margin: 0;
padding: 0 0 0 1.5em; padding: 0 0 0 1.5em;
} }
p+p, p+ol, p+ul, p+p,
ol+p, ol+ol, ol+ul, p+ol,
ul+p, ul+ol, ul+ul, p+ul,
ol+p,
ol+ol,
ol+ul,
ul+p,
ul+ol,
ul+ul,
li { li {
margin: 0.425em 0; margin: 0.425em 0;
} }
@ -326,8 +332,9 @@ h3 {
} }
.sidebar:hover { .sidebar:hover {
max-width: var(--sidebar-size); max-width: var(--sidebar-size);
transition: max-width var(--animation-duration) ease-out 0.5s, transition:
box-shadow var(--animation-duration) ease-out; max-width var(--animation-duration) ease-out 0.5s,
box-shadow var(--animation-duration) ease-out;
} }
.sidebar-inner { .sidebar-inner {
width: 100%; width: 100%;
@ -455,9 +462,10 @@ h3 {
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
transition: width var(--animation-duration) ease-in-out, transition:
max-width var(--animation-duration) ease-in-out, width var(--animation-duration) ease-in-out,
box-shadow var(--animation-duration) ease-in-out; max-width var(--animation-duration) ease-in-out,
box-shadow var(--animation-duration) ease-in-out;
} }
.preview-sidebar-inner { .preview-sidebar-inner {
width: 100%; width: 100%;
@ -807,7 +815,7 @@ select.short-height {
margin-right: calc(var(--modal-padding-horizontal) * -1); margin-right: calc(var(--modal-padding-horizontal) * -1);
} }
.modal-body .settings-item+.settings-item { .modal-body .settings-item+.settings-item {
border-top: none border-top: none;
} }
.modal-body .settings-item-left { .modal-body .settings-item-left {
padding-left: var(--modal-padding-horizontal); padding-left: var(--modal-padding-horizontal);
@ -1094,8 +1102,9 @@ button.popup-menu-item:disabled {
width: 100%; width: 100%;
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
transition: width var(--animation-duration) ease-in-out, transition:
max-width var(--animation-duration) ease-in-out; width var(--animation-duration) ease-in-out,
max-width var(--animation-duration) ease-in-out;
} }
.fab-container-right-inner2 { .fab-container-right-inner2 {
display: flex; display: flex;
@ -1128,7 +1137,7 @@ button.fab-button:active {
.fab-button-background { .fab-button-background {
position: absolute; position: absolute;
display: block; display: block;
content: ""; content: '';
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
@ -1264,7 +1273,7 @@ body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-previe
} }
.dictionary-details-table { .dictionary-details-table {
display: table; display: table;
width: 100% width: 100%;
} }
.dictionary-details-entry { .dictionary-details-entry {
display: table-row; display: table-row;
@ -1332,7 +1341,7 @@ body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-previe
flex: 0 0 auto; flex: 0 0 auto;
min-width: 4em; min-width: 4em;
text-align: center; text-align: center;
align-self: stretch align-self: stretch;
} }
.profile-entry-cell:nth-child(5) { .profile-entry-cell:nth-child(5) {
flex: 0 0 auto; flex: 0 0 auto;
@ -1426,10 +1435,10 @@ input[type=text].profile-entry-name-input {
margin-right: 0.25em; margin-right: 0.25em;
} }
.profile-condition-prefix::after { .profile-condition-prefix::after {
content: "if" content: 'if';
} }
.profile-condition:nth-child(n+2)>.profile-condition-prefix::after { .profile-condition:nth-child(n+2)>.profile-condition-prefix::after {
content: "and" content: 'and';
} }
select.profile-condition-type, select.profile-condition-type,
select.profile-condition-operator { select.profile-condition-operator {
@ -1743,9 +1752,9 @@ code.anki-field-marker {
grid-template-columns: auto auto 1fr auto; grid-template-columns: auto auto 1fr auto;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: grid-template-areas:
"index pattern-label pattern button" 'index pattern-label pattern button'
". replacement-label replacement button" '. replacement-label replacement button'
". test-label test ."; '. test-label test .';
column-gap: 0.25em; column-gap: 0.25em;
row-gap: 0.25em; row-gap: 0.25em;
align-items: stretch; align-items: stretch;

126
ext/mixed/css/display.css
View File

@ -70,7 +70,7 @@
--tag-border-style: none; --tag-border-style: none;
--tag-font-weight: bold; --tag-font-weight: bold;
--compact-list-separator: " | "; --compact-list-separator: ' | ';
--list-padding1: 1.4em; --list-padding1: 1.4em;
--list-padding2: var(--list-padding1); --list-padding2: var(--list-padding1);
@ -218,7 +218,7 @@
background-color: transparent; background-color: transparent;
} }
:root { :root {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); line-height: var(--line-height);
height: 100%; height: 100%;
@ -441,11 +441,6 @@ a {
:root[data-popup-action-bar-location=bottom] .content-sidebar-bottom { :root[data-popup-action-bar-location=bottom] .content-sidebar-bottom {
flex-flow: row nowrap; flex-flow: row nowrap;
} }
:root[data-popup-action-bar-location=top] button.sidebar-button,
:root[data-popup-action-bar-location=bottom] button.sidebar-button {
width: var(--sidebar-width) !important;
height: 100% !important;
}
/* Sidebar buttons */ /* Sidebar buttons */
@ -464,6 +459,11 @@ button.sidebar-button {
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
} }
:root[data-popup-action-bar-location=top] button.sidebar-button,
:root[data-popup-action-bar-location=bottom] button.sidebar-button {
width: var(--sidebar-width);
height: 100%;
}
button.sidebar-button:disabled { button.sidebar-button:disabled {
cursor: default; cursor: default;
} }
@ -615,7 +615,7 @@ button.action-button:active {
box-shadow: none; box-shadow: none;
} }
button.action-button::before { button.action-button::before {
content: ""; content: '';
width: var(--action-button-size); width: var(--action-button-size);
height: var(--action-button-size); height: var(--action-button-size);
display: block; display: block;
@ -624,19 +624,19 @@ button.action-button::before {
background-size: contain; background-size: contain;
} }
button.action-button[data-icon=view-note]::before { button.action-button[data-icon=view-note]::before {
background-image: url("/mixed/img/view-note.svg"); background-image: url('/mixed/img/view-note.svg');
} }
button.action-button[data-icon=add-term-kanji]::before { button.action-button[data-icon=add-term-kanji]::before {
background-image: url("/mixed/img/add-term-kanji.svg"); background-image: url('/mixed/img/add-term-kanji.svg');
} }
button.action-button[data-icon=add-term-kana]::before { button.action-button[data-icon=add-term-kana]::before {
background-image: url("/mixed/img/add-term-kana.svg"); background-image: url('/mixed/img/add-term-kana.svg');
} }
button.action-button[data-icon=play-audio]::before { button.action-button[data-icon=play-audio]::before {
background-image: url("/mixed/img/play-audio.svg"); background-image: url('/mixed/img/play-audio.svg');
} }
button.action-button[data-icon=source-term]::before { button.action-button[data-icon=source-term]::before {
background-image: url("/mixed/img/source-term.svg"); background-image: url('/mixed/img/source-term.svg');
} }
.entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio { .entry[data-type=term][data-expression-multi=true] .actions>button.action-button.action-play-audio {
display: none; display: none;
@ -694,24 +694,24 @@ button.action-button[data-icon=source-term]::before {
display: block; display: block;
} }
.tag-frequency-separator::before { .tag-frequency-separator::before {
content: ":"; content: ':';
} }
.tag-frequency-disambiguation-separator::before { .tag-frequency-disambiguation-separator::before {
content: ":"; content: ':';
} }
.tag-frequency-disambiguation::before { .tag-frequency-disambiguation::before {
content: "("; content: '(';
} }
.tag-frequency-disambiguation::after { .tag-frequency-disambiguation::after {
content: ") "; content: ') ';
} }
.frequencies .tag[data-reading-is-same=true] .tag-frequency-disambiguation-separator, .frequencies .tag[data-reading-is-same=true] .tag-frequency-disambiguation-separator,
.frequencies .tag[data-reading-is-same=true] .tag-frequency-disambiguation-reading, .frequencies .tag[data-reading-is-same=true] .tag-frequency-disambiguation-reading,
.entry[data-unique-expression-count="1"] .tag-frequency-disambiguation-separator, .entry[data-unique-expression-count='1'] .tag-frequency-disambiguation-separator,
.entry[data-unique-expression-count="1"] .tag-frequency-disambiguation-expression, .entry[data-unique-expression-count='1'] .tag-frequency-disambiguation-expression,
.entry[data-unique-reading-count="1"] .tag-frequency-disambiguation-separator, .entry[data-unique-reading-count='1'] .tag-frequency-disambiguation-separator,
.entry[data-unique-reading-count="1"] .tag-frequency-disambiguation-reading, .entry[data-unique-reading-count='1'] .tag-frequency-disambiguation-reading,
.entry[data-unique-expression-count="1"][data-unique-reading-count="1"] .tag-frequency-disambiguation { .entry[data-unique-expression-count='1'][data-unique-reading-count='1'] .tag-frequency-disambiguation {
display: none; display: none;
} }
@ -762,7 +762,7 @@ button.action-button[data-icon=source-term]::before {
display: none; display: none;
} }
.term-reasons>.term-reason+.term-reason-separator+.term-reason::before { .term-reasons>.term-reason+.term-reason-separator+.term-reason::before {
content: " \00AB "; /* The two spaces is not a typo */ content: ' \00AB '; /* The two spaces is not a typo */
white-space: pre-wrap; white-space: pre-wrap;
display: inline; display: inline;
} }
@ -782,7 +782,7 @@ button.action-button[data-icon=source-term]::before {
display: none; display: none;
} }
.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after { .term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after {
content: "\3001"; content: '\3001';
} }
@ -823,8 +823,7 @@ button.action-button[data-icon=source-term]::before {
} }
.entry.entry-current .entry-current-indicator-inner { .entry.entry-current .entry-current-indicator-inner {
height: var(--entry-current-indicator-width); height: var(--entry-current-indicator-width);
transition: transition: height var(--entry-current-indicator-transition-duration) linear;
height var(--entry-current-indicator-transition-duration) linear;
} }
:root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator, :root[data-popup-current-indicator-mode=dot-left] .entry-current-indicator,
:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator { :root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator {
@ -834,8 +833,7 @@ button.action-button[data-icon=source-term]::before {
:root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner { :root[data-popup-current-indicator-mode=dot-right] .entry-current-indicator-inner {
display: block; display: block;
position: sticky; position: sticky;
transition: transition: height var(--entry-current-indicator-transition-duration) linear;
height var(--entry-current-indicator-transition-duration) linear;
} }
:root[data-popup-current-indicator-mode=none] .entry-current-indicator, :root[data-popup-current-indicator-mode=none] .entry-current-indicator,
:root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator, :root[data-popup-current-indicator-mode=asterisk] .entry-current-indicator,
@ -906,14 +904,14 @@ button.action-button[data-icon=source-term]::before {
display: none; display: none;
} }
.entry-current-indicator-icon::before { .entry-current-indicator-icon::before {
content: ""; content: '';
width: var(--action-button-size); width: var(--action-button-size);
height: var(--action-button-size); height: var(--action-button-size);
display: block; display: block;
background-color: transparent; background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-image: url("/mixed/img/entry-current.svg"); background-image: url('/mixed/img/entry-current.svg');
} }
@ -969,8 +967,8 @@ button.action-button[data-icon=source-term]::before {
padding: 0 0 0 var(--list-padding1); padding: 0 0 0 var(--list-padding1);
list-style-type: decimal; list-style-type: decimal;
} }
.term-definition-list[data-count="0"], .term-definition-list[data-count='0'],
.term-definition-list[data-count="1"] { .term-definition-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
@ -979,8 +977,8 @@ button.action-button[data-icon=source-term]::before {
padding: 0 0 0 var(--list-padding2); padding: 0 0 0 var(--list-padding2);
list-style-type: circle; list-style-type: circle;
} }
.term-glossary-list[data-count="0"], .term-glossary-list[data-count='0'],
.term-glossary-list[data-count="1"] { .term-glossary-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
@ -991,17 +989,17 @@ button.action-button[data-icon=source-term]::before {
.term-definition-disambiguation-list { .term-definition-disambiguation-list {
color: var(--text-color-light); color: var(--text-color-light);
} }
.term-definition-disambiguation-list[data-count="0"] { .term-definition-disambiguation-list[data-count='0'] {
display: none; display: none;
} }
.term-definition-disambiguation-list::before { .term-definition-disambiguation-list::before {
content: "("; content: '(';
} }
.term-definition-disambiguation-list::after { .term-definition-disambiguation-list::after {
content: " only) "; content: ' only) ';
} }
.term-definition-disambiguation+.term-definition-disambiguation::before { .term-definition-disambiguation+.term-definition-disambiguation::before {
content: ", "; content: ', ';
} }
.term-glossary-separator, .term-glossary-separator,
.term-reason-separator { .term-reason-separator {
@ -1013,8 +1011,8 @@ button.action-button[data-icon=source-term]::before {
.term-special-tags>.frequencies { .term-special-tags>.frequencies {
display: inline; display: inline;
} }
.term-entry-body[data-section-count="0"] .term-entry-body-section-header, .term-entry-body[data-section-count='0'] .term-entry-body-section-header,
.term-entry-body[data-section-count="1"] .term-entry-body-section-header { .term-entry-body[data-section-count='1'] .term-entry-body-section-header {
display: none; display: none;
} }
@ -1033,8 +1031,8 @@ button.action-button[data-icon=source-term]::before {
padding: 0 0 0 var(--list-padding1); padding: 0 0 0 var(--list-padding1);
list-style-type: decimal; list-style-type: decimal;
} }
.term-pitch-accent-group-list[data-count="0"], .term-pitch-accent-group-list[data-count='0'],
.term-pitch-accent-group-list[data-count="1"] { .term-pitch-accent-group-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
@ -1044,8 +1042,8 @@ button.action-button[data-icon=source-term]::before {
list-style-type: circle; list-style-type: circle;
display: block; display: block;
} }
.term-pitch-accent-list[data-count="0"], .term-pitch-accent-list[data-count='0'],
.term-pitch-accent-list[data-count="1"] { .term-pitch-accent-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
display: inline; display: inline;
@ -1058,8 +1056,8 @@ button.action-button[data-icon=source-term]::before {
display: list-item; display: list-item;
line-height: 1.5; line-height: 1.5;
} }
.term-pitch-accent-list[data-count="0"] .term-pitch-accent, .term-pitch-accent-list[data-count='0'] .term-pitch-accent,
.term-pitch-accent-list[data-count="1"] .term-pitch-accent { .term-pitch-accent-list[data-count='1'] .term-pitch-accent {
display: inline; display: inline;
} }
.term-pitch-accent-group-tag-list { .term-pitch-accent-group-tag-list {
@ -1070,18 +1068,18 @@ button.action-button[data-icon=source-term]::before {
color: var(--text-color-light); color: var(--text-color-light);
} }
.term-pitch-accent-disambiguation-list::before { .term-pitch-accent-disambiguation-list::before {
content: "("; content: '(';
} }
.term-pitch-accent-disambiguation-list::after { .term-pitch-accent-disambiguation-list::after {
content: " only)"; content: ' only)';
} }
.term-pitch-accent-disambiguation+.term-pitch-accent-disambiguation::before { .term-pitch-accent-disambiguation+.term-pitch-accent-disambiguation::before {
content: ", "; content: ', ';
} }
.term-pitch-accent-disambiguation-list[data-count="0"] { .term-pitch-accent-disambiguation-list[data-count='0'] {
display: none; display: none;
} }
.term-pitch-accent-tag-list:not([data-count="0"]) { .term-pitch-accent-tag-list:not([data-count='0']) {
margin-right: 0.375em; margin-right: 0.375em;
} }
.term-pitch-accent-character { .term-pitch-accent-character {
@ -1092,7 +1090,7 @@ button.action-button[data-icon=source-term]::before {
border-color: var(--pitch-accent-annotation-color); border-color: var(--pitch-accent-annotation-color);
} }
.term-pitch-accent-character[data-pitch='high']::before { .term-pitch-accent-character[data-pitch='high']::before {
content: ""; content: '';
display: block; display: block;
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
@ -1115,10 +1113,10 @@ button.action-button[data-icon=source-term]::before {
margin-right: 0.1em; margin-right: 0.1em;
} }
.term-pitch-accent-position::before { .term-pitch-accent-position::before {
content: " ["; content: ' [';
} }
.term-pitch-accent-position::after { .term-pitch-accent-position::after {
content: "]"; content: ']';
} }
.term-pitch-accent-details { .term-pitch-accent-details {
display: inline-block; display: inline-block;
@ -1196,7 +1194,7 @@ button.action-button[data-icon=source-term]::before {
color: var(--text-color-light); color: var(--text-color-light);
} }
.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after { .term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay::after {
content: "Image failed to load"; content: 'Image failed to load';
display: table-cell; display: table-cell;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1227,17 +1225,17 @@ button.action-button[data-icon=source-term]::before {
image-rendering: crisp-edges; image-rendering: crisp-edges;
} }
.term-glossary-image-aspect-ratio-sizer { .term-glossary-image-aspect-ratio-sizer {
content: ""; content: '';
display: inline-block; display: inline-block;
width: 0; width: 0;
vertical-align: top; vertical-align: top;
font-size: 0; font-size: 0;
} }
.term-glossary-image-link-text::before { .term-glossary-image-link-text::before {
content: "["; content: '[';
} }
.term-glossary-image-link-text::after { .term-glossary-image-link-text::after {
content: "]"; content: ']';
} }
@ -1247,7 +1245,7 @@ button.action-button[data-icon=source-term]::before {
position: relative; position: relative;
} }
.kanji-glyph { .kanji-glyph {
font-family: kanji-stroke-orders; font-family: kanji-stroke-orders, sans-serif;
font-size: 8.5em; font-size: 8.5em;
line-height: 1; line-height: 1;
padding: 0.01em; padding: 0.01em;
@ -1292,8 +1290,8 @@ button.action-button[data-icon=source-term]::before {
padding: 0 0 0 var(--list-padding1); padding: 0 0 0 var(--list-padding1);
list-style-type: decimal; list-style-type: decimal;
} }
.kanji-glossary-list[data-count="0"], .kanji-glossary-list[data-count='0'],
.kanji-glossary-list[data-count="1"] { .kanji-glossary-list[data-count='1'] {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
} }
@ -1346,7 +1344,7 @@ button.action-button[data-icon=source-term]::before {
} }
.progress-bar-indeterminant::before, .progress-bar-indeterminant::before,
.progress-bar-indeterminant::after { .progress-bar-indeterminant::after {
content: ""; content: '';
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
@ -1567,7 +1565,7 @@ button.footer-notification-close-button:active {
display: none; display: none;
} }
:root[data-glossary-layout-mode=compact] .term-definition-tag-list, :root[data-glossary-layout-mode=compact] .term-definition-tag-list,
:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count="0"]) { :root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count='0']) {
display: inline; display: inline;
} }
:root[data-glossary-layout-mode=compact] .term-glossary-list { :root[data-glossary-layout-mode=compact] .term-glossary-list {
@ -1596,7 +1594,7 @@ button.footer-notification-close-button:active {
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
} }
:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count="0"], :root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count='0'],
:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] { :root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] {
display: none; display: none;
} }

91
ext/mixed/css/material.css
View File

@ -145,6 +145,7 @@
.icon { .icon {
--icon-image: none; --icon-image: none;
--icon-size: contain; --icon-size: contain;
-webkit-mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center; -webkit-mask-position: center center;
-webkit-mask-mode: alpha; -webkit-mask-mode: alpha;
@ -174,14 +175,20 @@
.icon[data-icon=hamburger-menu] { --icon-image: url(/mixed/img/hamburger-menu.svg); } .icon[data-icon=hamburger-menu] { --icon-image: url(/mixed/img/hamburger-menu.svg); }
.icon[data-icon=kebab-menu] { --icon-image: url(/mixed/img/kebab-menu.svg); } .icon[data-icon=kebab-menu] { --icon-image: url(/mixed/img/kebab-menu.svg); }
.icon[data-icon=mouse] { --icon-image: url(/mixed/img/mouse.svg); } .icon[data-icon=mouse] { --icon-image: url(/mixed/img/mouse.svg); }
.icon[data-icon=material-down-arrow] { --icon-image: url(/mixed/img/material-down-arrow.svg); --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); }
.icon[data-icon=material-right-arrow] { --icon-image: url(/mixed/img/material-right-arrow.svg); --icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2); }
.icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); } .icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); }
.icon[data-icon=magnifying-glass] { --icon-image: url(/mixed/img/magnifying-glass.svg); } .icon[data-icon=magnifying-glass] { --icon-image: url(/mixed/img/magnifying-glass.svg); }
.icon[data-icon=collapse] { --icon-image: url(/mixed/img/collapse.svg); } .icon[data-icon=collapse] { --icon-image: url(/mixed/img/collapse.svg); }
.icon[data-icon=expand] { --icon-image: url(/mixed/img/expand.svg); } .icon[data-icon=expand] { --icon-image: url(/mixed/img/expand.svg); }
.icon[data-icon=window] { --icon-image: url(/mixed/img/window.svg); } .icon[data-icon=window] { --icon-image: url(/mixed/img/window.svg); }
.icon[data-icon=cross] { --icon-image: url(/mixed/img/cross.svg); } .icon[data-icon=cross] { --icon-image: url(/mixed/img/cross.svg); }
.icon[data-icon=material-down-arrow] {
--icon-image: url(/mixed/img/material-down-arrow.svg);
--icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
}
.icon[data-icon=material-right-arrow] {
--icon-image: url(/mixed/img/material-right-arrow.svg);
--icon-size: var(--material-arrow-dimension1) var(--material-arrow-dimension2);
}
/* Checkbox */ /* Checkbox */
@ -210,7 +217,6 @@ label.checkbox {
width: 1em; width: 1em;
height: 1em; height: 1em;
position: relative; position: relative;
cursor: pointer;
} }
.checkbox>input[type=checkbox]:disabled+.checkbox-body { .checkbox>input[type=checkbox]:disabled+.checkbox-body {
cursor: default; cursor: default;
@ -326,13 +332,14 @@ label.toggle {
box-shadow: box-shadow:
0 0.0625em 0.25em 0 var(--shadow-color), 0 0.0625em 0.25em 0 var(--shadow-color),
0 0.125em 0.125em 0 var(--shadow-color); 0 0.125em 0.125em 0 var(--shadow-color);
transition: transform var(--animation-duration) ease-in-out, transition:
background-color var(--animation-duration) ease-in-out; transform var(--animation-duration) ease-in-out,
background-color var(--animation-duration) ease-in-out;
} }
.toggle-body>.toggle-knob::after { .toggle-body>.toggle-knob::after {
position: absolute; position: absolute;
display: block; display: block;
content: ""; content: '';
left: -0.75em; left: -0.75em;
top: -0.75em; top: -0.75em;
right: -0.75em; right: -0.75em;
@ -343,20 +350,22 @@ label.toggle {
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transform 0s ease-in-out var(--animation-duration2), transition:
background-color var(--animation-duration2) ease-in-out, transform 0s ease-in-out var(--animation-duration2),
opacity var(--animation-duration2) ease-in-out, background-color var(--animation-duration2) ease-in-out,
visibility 0s ease-in-out var(--animation-duration2); opacity var(--animation-duration2) ease-in-out,
visibility 0s ease-in-out var(--animation-duration2);
} }
.toggle>input[type=checkbox]:focus:not(:disabled)+.toggle-body>.toggle-knob::after, .toggle>input[type=checkbox]:focus:not(:disabled)+.toggle-body>.toggle-knob::after,
.toggle:active>input[type=checkbox]:not(:disabled)+.toggle-body>.toggle-knob::after { .toggle:active>input[type=checkbox]:not(:disabled)+.toggle-body>.toggle-knob::after {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: transform var(--animation-duration2) ease-in-out, transition:
background-color var(--animation-duration2) ease-in-out, transform var(--animation-duration2) ease-in-out,
opacity var(--animation-duration2) ease-in-out, background-color var(--animation-duration2) ease-in-out,
visibility var(--animation-duration2) ease-in-out; opacity var(--animation-duration2) ease-in-out,
visibility var(--animation-duration2) ease-in-out;
} }
.toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after { .toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after {
opacity: 0.5; opacity: 0.5;
@ -445,9 +454,10 @@ label.radio {
-webkit-mask-image: url(/mixed/img/radio-button-dot.svg); -webkit-mask-image: url(/mixed/img/radio-button-dot.svg);
opacity: 1; opacity: 1;
transform: none; transform: none;
transition: transform var(--animation-duration2) ease-in-out, transition:
opacity var(--animation-duration2) ease-in-out, transform var(--animation-duration2) ease-in-out,
visibility var(--animation-duration2) ease-in-out; opacity var(--animation-duration2) ease-in-out,
visibility var(--animation-duration2) ease-in-out;
} }
.radio>input[type=radio]:disabled+.radio-body>.radio-border, .radio>input[type=radio]:disabled+.radio-body>.radio-border,
.radio>input[type=radio]:disabled+.radio-body>.radio-dot { .radio>input[type=radio]:disabled+.radio-body>.radio-dot {
@ -456,14 +466,15 @@ label.radio {
.radio>input[type=radio]:not(:checked)+.radio-body>.radio-dot { .radio>input[type=radio]:not(:checked)+.radio-body>.radio-dot {
opacity: 0; opacity: 0;
transform: scale(0); transform: scale(0);
transition: transform 0s ease-in-out var(--animation-duration2), transition:
opacity var(--animation-duration2) ease-in-out, transform 0s ease-in-out var(--animation-duration2),
visibility 0s ease-in-out var(--animation-duration2); opacity var(--animation-duration2) ease-in-out,
visibility 0s ease-in-out var(--animation-duration2);
} }
.radio-body::after { .radio-body::after {
position: absolute; position: absolute;
display: block; display: block;
content: ""; content: '';
left: -0.75em; left: -0.75em;
top: -0.75em; top: -0.75em;
right: -0.75em; right: -0.75em;
@ -474,20 +485,22 @@ label.radio {
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transform 0s ease-in-out var(--animation-duration2), transition:
background-color var(--animation-duration2) ease-in-out, transform 0s ease-in-out var(--animation-duration2),
opacity var(--animation-duration2) ease-in-out, background-color var(--animation-duration2) ease-in-out,
visibility 0s ease-in-out var(--animation-duration2); opacity var(--animation-duration2) ease-in-out,
visibility 0s ease-in-out var(--animation-duration2);
} }
.radio>input[type=radio]:focus:not(:disabled)+.radio-body::after, .radio>input[type=radio]:focus:not(:disabled)+.radio-body::after,
.radio:active>input[type=radio]:not(:disabled)+.radio-body::after { .radio:active>input[type=radio]:not(:disabled)+.radio-body::after {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: transform var(--animation-duration2) ease-in-out, transition:
background-color var(--animation-duration2) ease-in-out, transform var(--animation-duration2) ease-in-out,
opacity var(--animation-duration2) ease-in-out, background-color var(--animation-duration2) ease-in-out,
visibility var(--animation-duration2) ease-in-out; opacity var(--animation-duration2) ease-in-out,
visibility var(--animation-duration2) ease-in-out;
} }
.radio>input[type=radio]:focus+.radio-body::after { .radio>input[type=radio]:focus+.radio-body::after {
opacity: 0.5; opacity: 0.5;
@ -804,7 +817,7 @@ button.icon-button:active {
.icon-button>.icon-button-inner::after { .icon-button>.icon-button-inner::after {
position: absolute; position: absolute;
display: block; display: block;
content: ""; content: '';
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
@ -815,19 +828,21 @@ button.icon-button:active {
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transform 0s ease-in-out var(--animation-duration2), transition:
background-color var(--animation-duration2) ease-in-out, transform 0s ease-in-out var(--animation-duration2),
opacity var(--animation-duration2) ease-in-out, background-color var(--animation-duration2) ease-in-out,
visibility 0s ease-in-out var(--animation-duration2); opacity var(--animation-duration2) ease-in-out,
visibility 0s ease-in-out var(--animation-duration2);
} }
.icon-button:focus>.icon-button-inner::after { .icon-button:focus>.icon-button-inner::after {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: transform var(--animation-duration2) ease-in-out, transition:
background-color var(--animation-duration2) ease-in-out, transform var(--animation-duration2) ease-in-out,
opacity var(--animation-duration2) ease-in-out, background-color var(--animation-duration2) ease-in-out,
visibility var(--animation-duration2) ease-in-out; opacity var(--animation-duration2) ease-in-out,
visibility var(--animation-duration2) ease-in-out;
} }
.icon-button>.icon-button-inner>.icon { .icon-button>.icon-button-inner>.icon {
display: block; display: block;

7
ext/mixed/css/search.css
View File

@ -41,8 +41,7 @@ body {
background-color: var(--background-color); background-color: var(--background-color);
margin: 0; margin: 0;
padding: 0; padding: 0;
margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--text-color); color: var(--text-color);
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -72,7 +71,6 @@ h1 {
flex: 1 1 auto; flex: 1 1 auto;
box-sizing: border-box; box-sizing: border-box;
padding: var(--textarea-padding); padding: var(--textarea-padding);
font-family: 'Courier New', Courier, monospace;
background-color: var(--input-background-color); background-color: var(--input-background-color);
border-radius: 0; border-radius: 0;
line-height: var(--textarea-line-height); line-height: var(--textarea-line-height);
@ -84,8 +82,7 @@ h1 {
max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2); max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2);
resize: vertical; resize: vertical;
font-size: var(--font-size); font-size: var(--font-size);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: var(--text-color);
white-space: pre-wrap; white-space: pre-wrap;
z-index: 1; z-index: 1;
} }

1807
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -7,8 +7,9 @@
}, },
"scripts": { "scripts": {
"build": "node ./dev/build.js", "build": "node ./dev/build.js",
"test": "npm run test-lint && npm run test-code && npm run test-manifest && npm run test-build", "test": "npm run test-lint && npm run test-lint-css && npm run test-code && npm run test-manifest && npm run test-build",
"test-lint": "eslint . && node ./dev/lint/global-declarations.js && node ./dev/lint/html-scripts.js", "test-lint": "eslint . && node ./dev/lint/global-declarations.js && node ./dev/lint/html-scripts.js",
"test-lint-css": "npx stylelint \"**/*.css\"",
"test-lint-web-ext": "npx web-ext lint", "test-lint-web-ext": "npx web-ext lint",
"test-code": "node ./test/test-all.js ./test --skip ./test/test-manifest.js", "test-code": "node ./test/test-all.js ./test --skip ./test/test-manifest.js",
"test-manifest": "node ./test/test-manifest.js", "test-manifest": "node ./test/test-manifest.js",
@ -40,6 +41,8 @@
"fake-indexeddb": "^3.1.2", "fake-indexeddb": "^3.1.2",
"jsdom": "^16.4.0", "jsdom": "^16.4.0",
"parse5": "^6.0.1", "parse5": "^6.0.1",
"stylelint": "^13.8.0",
"stylelint-config-recommended": "^3.0.0",
"web-ext": "^5.4.1" "web-ext": "^5.4.1"
} }
} }

8
test/data/html/test-stylesheet.css
View File

@ -1,5 +1,5 @@
body { body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
max-width: 680px; max-width: 680px;
padding: 0 1em; padding: 0 1em;
@ -39,9 +39,9 @@ y-test {
border-radius: 4px; border-radius: 4px;
} }
.test:before, .test::before,
y-test:before { y-test::before {
content: "Test " counter(test-id); content: 'Test ' counter(test-id);
display: block; display: block;
counter-increment: test-id; counter-increment: test-id;
margin-bottom: 0.5em; margin-bottom: 0.5em;