CSS lint (#1201)

* Use single quotes instead of double

* Install stylelint

* Set up config

* Update package/tests

* Fix lint issues

* Update CSS rules

1 files changed, 62 insertions, 64 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 7790d8a7..0e4b2012 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -70,7 +70,7 @@
     --tag-border-style: none;
     --tag-font-weight: bold;
 
-    --compact-list-separator: " | ";
+    --compact-list-separator: ' | ';
     --list-padding1: 1.4em;
     --list-padding2: var(--list-padding1);
 
@@ -218,7 +218,7 @@
     background-color: transparent;
 }
 :root {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: var(--font-size);
     line-height: var(--line-height);
     height: 100%;
@@ -441,11 +441,6 @@ a {
 :root[data-popup-action-bar-location=bottom] .content-sidebar-bottom {
     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 */
@@ -464,6 +459,11 @@ button.sidebar-button {
     border-radius: 0;
     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 {
     cursor: default;
 }
@@ -615,7 +615,7 @@ button.action-button:active {
     box-shadow: none;
 }
 button.action-button::before {
-    content: "";
+    content: '';
     width: var(--action-button-size);
     height: var(--action-button-size);
     display: block;
@@ -624,19 +624,19 @@ button.action-button::before {
     background-size: contain;
 }
 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 {
-    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 {
-    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 {
-    background-image: url("/mixed/img/play-audio.svg");
+    background-image: url('/mixed/img/play-audio.svg');
 }
 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 {
     display: none;
@@ -694,24 +694,24 @@ button.action-button[data-icon=source-term]::before {
     display: block;
 }
 .tag-frequency-separator::before {
-    content: ":";
+    content: ':';
 }
 .tag-frequency-disambiguation-separator::before {
-    content: ":";
+    content: ':';
 }
 .tag-frequency-disambiguation::before {
-    content: "(";
+    content: '(';
 }
 .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-reading,
-.entry[data-unique-expression-count="1"] .tag-frequency-disambiguation-separator,
-.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-reading,
-.entry[data-unique-expression-count="1"][data-unique-reading-count="1"] .tag-frequency-disambiguation {
+.entry[data-unique-expression-count='1'] .tag-frequency-disambiguation-separator,
+.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-reading,
+.entry[data-unique-expression-count='1'][data-unique-reading-count='1'] .tag-frequency-disambiguation {
     display: none;
 }
 
@@ -762,7 +762,7 @@ button.action-button[data-icon=source-term]::before {
     display: none;
 }
 .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;
     display: inline;
 }
@@ -782,7 +782,7 @@ button.action-button[data-icon=source-term]::before {
     display: none;
 }
 .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 {
     height: var(--entry-current-indicator-width);
-    transition:
-        height var(--entry-current-indicator-transition-duration) linear;
+    transition: 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-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 {
     display: block;
     position: sticky;
-    transition:
-        height var(--entry-current-indicator-transition-duration) linear;
+    transition: height var(--entry-current-indicator-transition-duration) linear;
 }
 :root[data-popup-current-indicator-mode=none] .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;
 }
 .entry-current-indicator-icon::before {
-    content: "";
+    content: '';
     width: var(--action-button-size);
     height: var(--action-button-size);
     display: block;
     background-color: transparent;
     background-repeat: no-repeat;
     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);
     list-style-type: decimal;
 }
-.term-definition-list[data-count="0"],
-.term-definition-list[data-count="1"] {
+.term-definition-list[data-count='0'],
+.term-definition-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
@@ -979,8 +977,8 @@ button.action-button[data-icon=source-term]::before {
     padding: 0 0 0 var(--list-padding2);
     list-style-type: circle;
 }
-.term-glossary-list[data-count="0"],
-.term-glossary-list[data-count="1"] {
+.term-glossary-list[data-count='0'],
+.term-glossary-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
@@ -991,17 +989,17 @@ button.action-button[data-icon=source-term]::before {
 .term-definition-disambiguation-list {
     color: var(--text-color-light);
 }
-.term-definition-disambiguation-list[data-count="0"] {
+.term-definition-disambiguation-list[data-count='0'] {
     display: none;
 }
 .term-definition-disambiguation-list::before {
-    content: "(";
+    content: '(';
 }
 .term-definition-disambiguation-list::after {
-    content: " only) ";
+    content: ' only) ';
 }
 .term-definition-disambiguation+.term-definition-disambiguation::before {
-    content: ", ";
+    content: ', ';
 }
 .term-glossary-separator,
 .term-reason-separator {
@@ -1013,8 +1011,8 @@ button.action-button[data-icon=source-term]::before {
 .term-special-tags>.frequencies {
     display: inline;
 }
-.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='0'] .term-entry-body-section-header,
+.term-entry-body[data-section-count='1'] .term-entry-body-section-header {
     display: none;
 }
 
@@ -1033,8 +1031,8 @@ button.action-button[data-icon=source-term]::before {
     padding: 0 0 0 var(--list-padding1);
     list-style-type: decimal;
 }
-.term-pitch-accent-group-list[data-count="0"],
-.term-pitch-accent-group-list[data-count="1"] {
+.term-pitch-accent-group-list[data-count='0'],
+.term-pitch-accent-group-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
@@ -1044,8 +1042,8 @@ button.action-button[data-icon=source-term]::before {
     list-style-type: circle;
     display: block;
 }
-.term-pitch-accent-list[data-count="0"],
-.term-pitch-accent-list[data-count="1"] {
+.term-pitch-accent-list[data-count='0'],
+.term-pitch-accent-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
     display: inline;
@@ -1058,8 +1056,8 @@ button.action-button[data-icon=source-term]::before {
     display: list-item;
     line-height: 1.5;
 }
-.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='0'] .term-pitch-accent,
+.term-pitch-accent-list[data-count='1'] .term-pitch-accent {
     display: inline;
 }
 .term-pitch-accent-group-tag-list {
@@ -1070,18 +1068,18 @@ button.action-button[data-icon=source-term]::before {
     color: var(--text-color-light);
 }
 .term-pitch-accent-disambiguation-list::before {
-    content: "(";
+    content: '(';
 }
 .term-pitch-accent-disambiguation-list::after {
-    content: " only)";
+    content: ' only)';
 }
 .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;
 }
-.term-pitch-accent-tag-list:not([data-count="0"]) {
+.term-pitch-accent-tag-list:not([data-count='0']) {
     margin-right: 0.375em;
 }
 .term-pitch-accent-character {
@@ -1092,7 +1090,7 @@ button.action-button[data-icon=source-term]::before {
     border-color: var(--pitch-accent-annotation-color);
 }
 .term-pitch-accent-character[data-pitch='high']::before {
-    content: "";
+    content: '';
     display: block;
     user-select: none;
     pointer-events: none;
@@ -1115,10 +1113,10 @@ button.action-button[data-icon=source-term]::before {
     margin-right: 0.1em;
 }
 .term-pitch-accent-position::before {
-    content: " [";
+    content: ' [';
 }
 .term-pitch-accent-position::after {
-    content: "]";
+    content: ']';
 }
 .term-pitch-accent-details {
     display: inline-block;
@@ -1196,7 +1194,7 @@ button.action-button[data-icon=source-term]::before {
     color: var(--text-color-light);
 }
 .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;
     width: 100%;
     height: 100%;
@@ -1227,17 +1225,17 @@ button.action-button[data-icon=source-term]::before {
     image-rendering: crisp-edges;
 }
 .term-glossary-image-aspect-ratio-sizer {
-    content: "";
+    content: '';
     display: inline-block;
     width: 0;
     vertical-align: top;
     font-size: 0;
 }
 .term-glossary-image-link-text::before {
-    content: "[";
+    content: '[';
 }
 .term-glossary-image-link-text::after {
-    content: "]";
+    content: ']';
 }
 
 
@@ -1247,7 +1245,7 @@ button.action-button[data-icon=source-term]::before {
     position: relative;
 }
 .kanji-glyph {
-    font-family: kanji-stroke-orders;
+    font-family: kanji-stroke-orders, sans-serif;
     font-size: 8.5em;
     line-height: 1;
     padding: 0.01em;
@@ -1292,8 +1290,8 @@ button.action-button[data-icon=source-term]::before {
     padding: 0 0 0 var(--list-padding1);
     list-style-type: decimal;
 }
-.kanji-glossary-list[data-count="0"],
-.kanji-glossary-list[data-count="1"] {
+.kanji-glossary-list[data-count='0'],
+.kanji-glossary-list[data-count='1'] {
     padding-left: 0;
     list-style-type: none;
 }
@@ -1346,7 +1344,7 @@ button.action-button[data-icon=source-term]::before {
 }
 .progress-bar-indeterminant::before,
 .progress-bar-indeterminant::after {
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     left: 0;
@@ -1567,7 +1565,7 @@ button.footer-notification-close-button:active {
     display: none;
 }
 :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;
 }
 :root[data-glossary-layout-mode=compact] .term-glossary-list {
@@ -1596,7 +1594,7 @@ button.footer-notification-close-button:active {
     padding-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] {
     display: none;
 }