summaryrefslogtreecommitdiff
path: root/ext/mixed
diff options
context:
space:
mode:
Diffstat (limited to 'ext/mixed')
-rw-r--r--ext/mixed/css/display.css126
-rw-r--r--ext/mixed/css/material.css91
-rw-r--r--ext/mixed/css/search.css7
3 files changed, 117 insertions, 107 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;
}
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;
}