aboutsummaryrefslogtreecommitdiff
path: root/ext/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-03-31 18:17:28 -0400
committerGitHub <noreply@github.com>2021-03-31 18:17:28 -0400
commitbcbd413e571d772a4438f57138169ad1a6a3b5a8 (patch)
treee8768f5e91e62759e2dce7179359aa83ff6e4d0f /ext/css
parentcbcfdcacaf68efb09e47932f5b14881b982aecd2 (diff)
Definition collapsing when overflowing (#1575)
* Add double-down-chevron.svg * Add options * Update dictionary importers * Update settings * Add support for collapsible definitions * Improve case when there is a very small amount of overflow * Fix incorrect enabled state of newly imported dictionaries
Diffstat (limited to 'ext/css')
-rw-r--r--ext/css/display.css71
-rw-r--r--ext/css/material.css1
-rw-r--r--ext/css/settings.css39
3 files changed, 111 insertions, 0 deletions
diff --git a/ext/css/display.css b/ext/css/display.css
index 887a04a6..c8669fa2 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -101,6 +101,9 @@
--animation-duration: 0.125s;
--animation-duration2: calc(2 * var(--animation-duration));
+ --collapsible-definition-line-count: 3;
+ --collapsible-definition-test-offset: 0.2em;
+
/* Colors */
--background-color: #ffffff;
--glossary-image-background-color: #eeeeee;
@@ -1154,6 +1157,74 @@ button.action-button[data-icon=source-term]::before {
opacity: 0;
white-space: pre-wrap;
}
+.definition-item {
+ display: list-item;
+ position: relative;
+}
+.definition-item-inner.collapsible.collapsed {
+ max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
+ overflow: hidden;
+}
+.definition-item-inner.collapse-test {
+ max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
+ overflow: hidden;
+}
+.definition-item-inner {
+ display: flex;
+ flex-flow: row nowrap;
+}
+.definition-item-content {
+ flex: 1 1 auto;
+ background-color: transparent;
+ transition: background-color var(--animation-duration) ease-in-out;
+}
+button.definition-item-expansion-button {
+ --button-content-color: var(--text-color-light4);
+ --button-border-color: transparent;
+ --button-background-color: transparent;
+
+ --button-hover-content-color: var(--text-color-light1);
+ --button-hover-border-color: var(--accent-color-lighter);
+ --button-hover-background-color: var(--accent-color-lighter);
+
+ --button-active-content-color: var(--text-color);
+ --button-active-border-color: var(--accent-color-light);
+ --button-active-background-color: var(--accent-color-light);
+
+ --button-padding-vertical: 0;
+ --button-padding-horizontal: 0.125em;
+
+ flex: 0 0 auto;
+ order: 1;
+ border-radius: 0;
+ border: 0;
+}
+.definition-item-inner:not(.collapsible)>button.definition-item-expansion-button {
+ display: none;
+}
+button.definition-item-expansion-button:hover+.definition-item-content,
+button.definition-item-expansion-button:active+.definition-item-content,
+button.definition-item-expansion-button:focus+.definition-item-content {
+ background-color: var(--accent-color-transparent25);
+}
+button.definition-item-expansion-button:focus:not(:focus-visible)+.definition-item-content {
+ background-color: transparent;
+}
+button.definition-item-expansion-button:focus:hover+.definition-item-content,
+button.definition-item-expansion-button:focus:active+.definition-item-content,
+button.definition-item-expansion-button:focus:focus-visible+.definition-item-content {
+ background-color: var(--accent-color-transparent25);
+}
+.definition-item-expansion-button-icon {
+ transform: rotate(0deg);
+ width: calc(16em / var(--font-size-no-units));
+ height: calc(16em / var(--font-size-no-units));
+ background-color: var(--button-current-content-color);
+ transition: background-color var(--animation-duration) ease-in-out;
+}
+.definition-item-inner.collapsible:not(.collapsed)>button.definition-item-expansion-button>.definition-item-expansion-button-icon {
+ transform: rotate(180deg);
+}
/* Frequencies */
diff --git a/ext/css/material.css b/ext/css/material.css
index 703f1268..08345769 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -234,6 +234,7 @@
.icon[data-icon=question-mark-thick] { --icon-image: url(/images/question-mark-thick.svg); }
.icon[data-icon=left-chevron] { --icon-image: url(/images/left-chevron.svg); }
.icon[data-icon=right-chevron] { --icon-image: url(/images/right-chevron.svg); }
+.icon[data-icon=double-down-chevron] { --icon-image: url(/images/double-down-chevron.svg); }
.icon[data-icon=plus-thick] { --icon-image: url(/images/plus-thick.svg); }
.icon[data-icon=clipboard] { --icon-image: url(/images/clipboard.svg); }
.icon[data-icon=key] { --icon-image: url(/images/key.svg); }
diff --git a/ext/css/settings.css b/ext/css/settings.css
index e2485925..22439409 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -47,6 +47,7 @@
--outline-item-icon-size: 32px;
--input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
--input-short-height: 24px;
+ --input-medium-width: calc(var(--input-width-large) * 0.75);
--fab-button-size: 56px;
--fab-button-padding: 16px;
--modal-width: 600px;
@@ -657,6 +658,11 @@ input[type=number].short-width,
select.short-width {
width: var(--input-short-width);
}
+input[type=text].medium-width,
+input[type=number].medium-width,
+select.medium-width {
+ width: var(--input-medium-width);
+}
input[type=text].short-height,
input[type=number].short-height,
select.short-height {
@@ -2125,6 +2131,39 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] {
background-color: var(--warning-color);
}
+.collapsible-dictionary-list {
+ width: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: stretch;
+}
+.collapsible-dictionary-item {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ margin-left: calc(var(--modal-padding-horizontal) * -1);
+ margin-right: calc(var(--modal-padding-horizontal) * -1);
+ padding: var(--settings-group-inner-horizontal-padding-fourth) var(--modal-padding-horizontal);
+}
+.collapsible-dictionary-item:not(:first-child) {
+ border-top: var(--thin-border-size) solid var(--separator-color2);
+}
+.collapsible-dictionary-cell {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+}
+.collapsible-dictionary-cell:first-of-type {
+ flex: 1 1 auto;
+}
+.collapsible-dictionary-cell:not(:first-of-type) {
+ flex: 0 0 auto;
+ margin-left: 1em;
+}
+.collapsible-dictionary-cell-label {
+ margin-left: 0.375em;
+}
+
/* Generic layouts */
.margin-above {