From 8203f11e898d9205b3a70e2801f2d8e891f508b8 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Mon, 21 Dec 2020 19:21:03 -0500
Subject: 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
---
 ext/bg/css/settings2.css | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

(limited to 'ext/bg/css')

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 */
-- 
cgit v1.2.3