aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/css/settings2.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-21 19:21:03 -0500
committerGitHub <noreply@github.com>2020-12-21 19:21:03 -0500
commit8203f11e898d9205b3a70e2801f2d8e891f508b8 (patch)
tree66db00121f5c8d4ac96d7a956c4551d6781e0fc9 /ext/bg/css/settings2.css
parent18043babeb8735a7707f273eab2b9364aa42ab7a (diff)
Improve settings item button styles (#1155)
* Improve styles for settings-item-button * Add hover/active styles to settings-item-button * Use consistent phrasing for setting buttons and include ellipsis
Diffstat (limited to 'ext/bg/css/settings2.css')
-rw-r--r--ext/bg/css/settings2.css31
1 files changed, 24 insertions, 7 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 10634dc0..765a9c55 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -610,13 +610,6 @@ h3 {
.settings-item:not([hidden]) {
display: block;
}
-.settings-item-button {
- cursor: pointer;
-}
-a.settings-item-button {
- color: var(--text-color-default);
- text-decoration: none;
-}
.settings-item-outer {
display: block;
width: 100%;
@@ -694,6 +687,30 @@ a.settings-item-button {
:root:not([data-advanced=true]) .advanced-only {
display: none;
}
+.settings-item.settings-item-button,
+a.settings-item.settings-item-button {
+ cursor: pointer;
+ color: var(--text-color-default);
+ text-decoration: none;
+ background-color: transparent;
+ transition: background-color var(--animation-duration) ease-in-out;
+}
+.settings-item.settings-item-button>.settings-item-inner,
+.settings-item.settings-item-button>.settings-item-inner>.settings-item-left,
+.settings-item.settings-item-button>.settings-item-inner>.settings-item-right {
+ margin-top: 0;
+}
+.settings-item.settings-item-button:hover,
+.settings-item.settings-item-button:active {
+ background-color: var(--background-color);
+}
+.settings-item.settings-item-button .icon-button>.icon-button-inner>.icon {
+ transition: background-color var(--animation-duration) ease-in-out;
+}
+.settings-item.settings-item-button:hover .icon-button>.icon-button-inner>.icon,
+.settings-item.settings-item-button:active .icon-button>.icon-button-inner>.icon {
+ background-color: var(--accent-color);
+}
/* Settings item groups */