summaryrefslogtreecommitdiff
path: root/ext/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-04-30 18:01:16 -0400
committerGitHub <noreply@github.com>2021-04-30 18:01:16 -0400
commit076e2012259cb7c446ee6cca8e574861f3f163db (patch)
treefaa9088083c654cbb57f4fa91bff76ec3d14d5e2 /ext/css
parentd77d8e44e01e8a4d533b75d286c777f9f7f986bc (diff)
Improve dictionary options (#1640)
* Update dictionary options layout * Update extras * Improve display when no dictionaries are installed * Implement "All" toggle * Move modal * Update welcome page * Remove resizer button * Fix ordering * Fix extra closing tag
Diffstat (limited to 'ext/css')
-rw-r--r--ext/css/settings.css187
1 files changed, 124 insertions, 63 deletions
diff --git a/ext/css/settings.css b/ext/css/settings.css
index 6bc377c2..f0070a1f 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -1313,65 +1313,6 @@ body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-previe
display: none;
}
-.dictionary-info {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
-}
-.dictionary-info-label {
- margin-left: 1em;
-}
-
-.dictionary-title {
- color: inherit;
- transition: color var(--animation-duration) ease-in-out;
-}
-.dictionary-item[data-enabled=false] .dictionary-title {
- color: var(--text-color-light2);
-}
-
-.dictionary-list {
- display: flex;
- flex-flow: column nowrap;
- width: 100%;
-}
-.dictionary-list>.settings-item,
-.dictionary-list>.settings-item+.settings-item {
- margin-left: calc(var(--modal-padding-horizontal) * -1);
- margin-right: calc(var(--modal-padding-horizontal) * -1);
- border-top: var(--thin-border-size) solid var(--separator-color2);
-}
-.dictionary-details-table {
- display: table;
- width: 100%;
-}
-.dictionary-details-entry {
- display: table-row;
-}
-.dictionary-details-entry+.dictionary-details-entry>* {
- padding-top: 0.25em;
-}
-.dictionary-details-entry-label {
- display: table-cell;
- font-weight: bold;
- white-space: nowrap;
- padding-right: 0.5em;
-}
-.dictionary-details-entry-info {
- display: table-cell;
- white-space: pre-line;
-}
-.dictionary-counts {
- width: 100%;
- box-sizing: border-box;
- font-size: inherit;
- max-height: 10em;
- line-height: 1.25;
- font-family: 'Courier New', Courier, monospace;
- white-space: pre;
- overflow: auto;
-}
-
.profile-add-button-container {
display: flex;
flex-flow: row nowrap;
@@ -2096,28 +2037,47 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] {
top: calc(1em * (3 / var(--font-size-no-units)));
}
-.warning-badge {
+.badge {
position: relative;
width: var(--badge-size);
height: var(--badge-size);
margin: 0;
padding: 0;
- background-color: var(--warning-color-light);
border-radius: 50%;
box-shadow: var(--shadow-vertical);
}
-.warning-badge:not([hidden]) {
+.badge:not([hidden]) {
display: block;
}
-.warning-badge>.icon {
+.badge>.icon {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
+}
+.badge.badge-small-icon>.icon {
+ margin: calc(1em / var(--font-size-no-units));
+}
+.badge.info-badge {
+ background-color: var(--accent-color-lighter);
+}
+.badge.info-badge>.icon {
+ background-color: var(--accent-color);
+}
+.badge.warning-badge {
+ background-color: var(--warning-color-light);
+}
+.badge.warning-badge>.icon {
background-color: var(--warning-color);
}
+.badge.danger-badge {
+ background-color: var(--danger-color-lighter);
+}
+.badge.danger-badge>.icon {
+ background-color: var(--danger-color);
+}
.collapsible-dictionary-list {
width: 100%;
@@ -2160,6 +2120,107 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] {
}
+/* Dictionary settings */
+.dictionary-list {
+ width: 100%;
+ display: grid;
+ grid-template-columns: auto 1fr auto auto;
+ grid-template-rows: auto;
+ place-items: center start;
+ margin-top: 0.5em;
+}
+.dictionary-list[data-count='0']>.dictionary-item-top {
+ display: none;
+}
+.dictionary-item-button-height {
+ height: var(--icon-button-size);
+}
+.dictionary-item {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ border-top: var(--thin-border-size) solid var(--separator-color2);
+}
+.dictionary-item-enabled-toggle-container {
+ margin-right: 0.5em;
+}
+.dictionary-item-title-container {
+ flex: 1 1 auto;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ margin-right: 0.5em;
+}
+.dictionary-title {
+ color: inherit;
+ transition: color var(--animation-duration) ease-in-out;
+}
+.dictionary-item[data-enabled=false] .dictionary-title {
+ color: var(--text-color-light2);
+}
+input[type=number].dictionary-priority {
+ margin-top: 0;
+ margin-right: 0.5em;
+}
+.dictionary-outdated-button,
+.dictionary-integrity-button {
+ --button-content-color: transparent;
+ --button-border-color: transparent;
+ --button-background-color: transparent;
+ --button-shadow: none;
+
+ --button-hover-content-color: transparent;
+ --button-hover-border-color: transparent;
+ --button-hover-background-color: transparent;
+ --button-hover-shadow: none;
+
+ --button-active-content-color: transparent;
+ --button-active-border-color: transparent;
+ --button-active-background-color: transparent;
+ --button-active-shadow: none;
+
+ --button-disabled-content-color: transparent;
+ --button-disabled-border-color: transparent;
+ --button-disabled-background-color: transparent;
+ --button-disabled-shadow: none;
+
+ --button-padding-vertical: 0;
+ --button-padding-horizontal: 0;
+
+ margin-left: 0.375em;
+}
+.dictionary-details-table {
+ display: table;
+ width: 100%;
+}
+.dictionary-details-entry {
+ display: table-row;
+}
+.dictionary-details-entry+.dictionary-details-entry>* {
+ padding-top: 0.25em;
+}
+.dictionary-details-entry-label {
+ display: table-cell;
+ font-weight: bold;
+ white-space: nowrap;
+ padding-right: 0.5em;
+}
+.dictionary-details-entry-info {
+ display: table-cell;
+ white-space: pre-line;
+}
+.dictionary-counts {
+ width: 100%;
+ box-sizing: border-box;
+ font-size: inherit;
+ max-height: 10em;
+ line-height: 1.25;
+ font-family: 'Courier New', Courier, monospace;
+ white-space: pre;
+ overflow: auto;
+}
+
+
/* Generic layouts */
.margin-above {
margin-top: 0.85em;