summaryrefslogtreecommitdiff
path: root/ext/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-03-27 13:21:34 -0400
committerGitHub <noreply@github.com>2021-03-27 13:21:34 -0400
commit422f011facc4beba59bbe66a80bcc6aeb3648c6b (patch)
treee161151d76895b283e33b3bcbb7ca21b9cb6a5b2 /ext/css
parentaf768624ac3a08dad11ceed3f009e942a84323af (diff)
Update hotkey settings design (#1564)
* Update PopupMenu event prevention * Use vars for button padding * Add button-inner-label style * Add input-button button * Update display of scope selection * Add hidden argument text input field * Remove unnecessary calls * Display a strike through the enabled button when no scopes are selected
Diffstat (limited to 'ext/css')
-rw-r--r--ext/css/material.css52
-rw-r--r--ext/css/settings.css47
2 files changed, 83 insertions, 16 deletions
diff --git a/ext/css/material.css b/ext/css/material.css
index a5fcee29..efa5a730 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -798,10 +798,13 @@ button,
--button-current-background-color: var(--button-background-color);
--button-current-shadow: var(--button-shadow);
+ --button-padding-vertical: 0.5em;
+ --button-padding-horizontal: 1em;
+
border-width: var(--thin-border-size);
border-style: solid;
border-radius: 0.3em;
- padding: 0.5em 1em;
+ padding: var(--button-padding-vertical) var(--button-padding-horizontal);
font-weight: bold;
font-size: inherit;
font-family: inherit;
@@ -940,6 +943,35 @@ button.low-emphasis.danger {
--button-disabled-background-color: var(--danger-color-transparent0);
}
+/* Input button */
+button.input-button {
+ --button-content-color: var(--button-default-icon-color);
+ --button-border-color: var(--input-background-color);
+ --button-background-color: var(--input-background-color);
+ --button-hover-background-color: var(--input-background-color-dark);
+ --button-active-background-color: var(--input-background-color-darker);
+
+ --button-padding-vertical: 0;
+ --button-padding-horizontal: 0.5em;
+
+ text-align: left;
+ font-weight: normal;
+ border-style: none;
+ border-width: 0;
+ width: var(--input-width-large);
+ height: var(--input-height);
+ line-height: var(--input-height);
+ box-sizing: border-box;
+ position: relative;
+}
+button.input-button.input-with-suffix-button {
+ flex: 1 1 auto;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-style: none;
+ z-index: 1;
+}
+
/* Input suffix button */
button.input-suffix-button {
--button-content-color: var(--button-default-icon-color);
@@ -985,6 +1017,16 @@ input[type=number][data-invalid=true]+button.input-suffix-button {
}
+/* Button inner label */
+.button-inner-label {
+ margin-top: calc(-1 * var(--button-padding-vertical));
+ margin-bottom: calc(-1 * var(--button-padding-vertical));
+ margin-left: calc(-1 * var(--button-padding-horizontal));
+ margin-right: calc(-1 * var(--button-padding-horizontal));
+ padding: var(--button-padding-vertical) var(--button-padding-horizontal);
+}
+
+
/* Material design icon button */
button.icon-button {
--button-content-color: var(--button-default-icon-color);
@@ -1140,7 +1182,9 @@ button.popup-menu-item {
--button-disabled-background-color: transparent;
--button-disabled-shadow: none;
- padding: 0.625em 1.5em;
+ --button-padding-vertical: 0.625em;
+ --button-padding-horizontal: 1.5em;
+
flex: 1 1 auto;
border-radius: 0;
border-style: none;
@@ -1174,7 +1218,9 @@ button.popup-menu-item:not([hidden]) {
}
:root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item,
.popup-menu.popup-menu-small button.popup-menu-item {
- padding: 0.5em 0.75em;
+ --button-padding-vertical: 0.5em;
+ --button-padding-horizontal: 0.75em;
+
font-size: var(--font-size-small);
}
.popup-menu-item-group {
diff --git a/ext/css/settings.css b/ext/css/settings.css
index cd90b7d3..6bc06bf7 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -2047,9 +2047,34 @@ input.sentence-termination-character-input2 {
.hotkey-list-item-action {
flex: 1 1 auto;
}
-.hotkey-list-item-enabled-label {
- align-self: center;
- margin-left: 1em;
+.hotkey-list-item-enabled-button-container {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: stretch;
+ margin-left: 0.375em;
+}
+button.hotkey-list-item-enabled-button {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: stretch;
+ width: auto;
+}
+button.hotkey-list-item-enabled-button[data-scope-count='0'] {
+ text-decoration: line-through;
+}
+.hotkey-list-item-enabled-button-label {
+ flex: 1 1 auto;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+}
+.hotkey-list-item-enabled-button-label>.checkbox {
+ margin-right: 0.5em;
+}
+.hotkey-list-item-action-argument {
+ margin-left: 0.375em;
+ flex: 1 1 auto;
+ visibility: hidden;
}
.hotkey-list-item-flex-row {
display: flex;
@@ -2059,19 +2084,15 @@ input.sentence-termination-character-input2 {
.hotkey-list-item-flex-row-label {
margin: 0 0.5em 0 1em;
}
-.hotkey-scope-checkbox-container {
+
+.hotkey-scope-popup-menu-item-label {
+ flex: 1 1 auto;
+ display: flex;
flex-flow: row nowrap;
align-items: center;
- cursor: pointer;
-}
-.hotkey-scope-checkbox-container:not([hidden]) {
- display: flex;
}
-.hotkey-scope-checkbox-container:not(:last-child) {
- margin-right: 0.75em;
-}
-.hotkey-scope-checkbox-container>span {
- padding-left: 0.375em;
+.hotkey-scope-popup-menu-item-label>.checkbox {
+ margin-right: 0.5em;
}
.inline-icon {