From 63971776a5db6ad0d3a68361f64a74aa9e78aff5 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 3 Jan 2021 15:30:38 -0500 Subject: CSS lint (#1201) * Use single quotes instead of double * Install stylelint * Set up config * Update package/tests * Fix lint issues * Update CSS rules --- ext/mixed/css/display.css | 126 ++++++++++++++++++++++----------------------- ext/mixed/css/material.css | 91 ++++++++++++++++++-------------- ext/mixed/css/search.css | 7 +-- 3 files changed, 117 insertions(+), 107 deletions(-) (limited to 'ext/mixed/css') 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; } diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css index 82c61a41..a21dc2bb 100644 --- a/ext/mixed/css/material.css +++ b/ext/mixed/css/material.css @@ -145,6 +145,7 @@ .icon { --icon-image: none; --icon-size: contain; + -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-mode: alpha; @@ -174,14 +175,20 @@ .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=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=magnifying-glass] { --icon-image: url(/mixed/img/magnifying-glass.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=window] { --icon-image: url(/mixed/img/window.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 */ @@ -210,7 +217,6 @@ label.checkbox { width: 1em; height: 1em; position: relative; - cursor: pointer; } .checkbox>input[type=checkbox]:disabled+.checkbox-body { cursor: default; @@ -326,13 +332,14 @@ label.toggle { box-shadow: 0 0.0625em 0.25em 0 var(--shadow-color), 0 0.125em 0.125em 0 var(--shadow-color); - transition: transform var(--animation-duration) ease-in-out, - background-color var(--animation-duration) ease-in-out; + transition: + transform var(--animation-duration) ease-in-out, + background-color var(--animation-duration) ease-in-out; } .toggle-body>.toggle-knob::after { position: absolute; display: block; - content: ""; + content: ''; left: -0.75em; top: -0.75em; right: -0.75em; @@ -343,20 +350,22 @@ label.toggle { transform: scale(0); opacity: 0; visibility: hidden; - transition: transform 0s ease-in-out var(--animation-duration2), - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility 0s ease-in-out var(--animation-duration2); + transition: + transform 0s ease-in-out var(--animation-duration2), + background-color var(--animation-duration2) ease-in-out, + 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:active>input[type=checkbox]:not(:disabled)+.toggle-body>.toggle-knob::after { transform: scale(1); opacity: 1; visibility: visible; - transition: transform var(--animation-duration2) ease-in-out, - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility var(--animation-duration2) ease-in-out; + transition: + transform var(--animation-duration2) ease-in-out, + background-color 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 { opacity: 0.5; @@ -445,9 +454,10 @@ label.radio { -webkit-mask-image: url(/mixed/img/radio-button-dot.svg); opacity: 1; transform: none; - transition: transform var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility var(--animation-duration2) ease-in-out; + transition: + transform 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-dot { @@ -456,14 +466,15 @@ label.radio { .radio>input[type=radio]:not(:checked)+.radio-body>.radio-dot { opacity: 0; transform: scale(0); - transition: transform 0s ease-in-out var(--animation-duration2), - opacity var(--animation-duration2) ease-in-out, - visibility 0s ease-in-out var(--animation-duration2); + transition: + transform 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 { position: absolute; display: block; - content: ""; + content: ''; left: -0.75em; top: -0.75em; right: -0.75em; @@ -474,20 +485,22 @@ label.radio { transform: scale(0); opacity: 0; visibility: hidden; - transition: transform 0s ease-in-out var(--animation-duration2), - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility 0s ease-in-out var(--animation-duration2); + transition: + transform 0s ease-in-out var(--animation-duration2), + background-color var(--animation-duration2) ease-in-out, + 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:active>input[type=radio]:not(:disabled)+.radio-body::after { transform: scale(1); opacity: 1; visibility: visible; - transition: transform var(--animation-duration2) ease-in-out, - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility var(--animation-duration2) ease-in-out; + transition: + transform var(--animation-duration2) ease-in-out, + background-color 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 { opacity: 0.5; @@ -804,7 +817,7 @@ button.icon-button:active { .icon-button>.icon-button-inner::after { position: absolute; display: block; - content: ""; + content: ''; left: 0; top: 0; right: 0; @@ -815,19 +828,21 @@ button.icon-button:active { transform: scale(0); opacity: 0; visibility: hidden; - transition: transform 0s ease-in-out var(--animation-duration2), - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility 0s ease-in-out var(--animation-duration2); + transition: + transform 0s ease-in-out var(--animation-duration2), + background-color var(--animation-duration2) ease-in-out, + opacity var(--animation-duration2) ease-in-out, + visibility 0s ease-in-out var(--animation-duration2); } .icon-button:focus>.icon-button-inner::after { transform: scale(1); opacity: 1; visibility: visible; - transition: transform var(--animation-duration2) ease-in-out, - background-color var(--animation-duration2) ease-in-out, - opacity var(--animation-duration2) ease-in-out, - visibility var(--animation-duration2) ease-in-out; + transition: + transform var(--animation-duration2) ease-in-out, + background-color 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 { display: block; diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css index f0d69b3d..eb537ba4 100644 --- a/ext/mixed/css/search.css +++ b/ext/mixed/css/search.css @@ -41,8 +41,7 @@ body { background-color: var(--background-color); margin: 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); height: 100%; overflow: hidden; @@ -72,7 +71,6 @@ h1 { flex: 1 1 auto; box-sizing: border-box; padding: var(--textarea-padding); - font-family: 'Courier New', Courier, monospace; background-color: var(--input-background-color); border-radius: 0; line-height: var(--textarea-line-height); @@ -84,8 +82,7 @@ h1 { max-height: calc(var(--textarea-line-height) * 10 + var(--textarea-padding) * 2); resize: vertical; font-size: var(--font-size); - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: var(--text-color); + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; white-space: pre-wrap; z-index: 1; } -- cgit v1.2.3