diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-12-21 19:21:03 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-12-21 19:21:03 -0500 |
| commit | 8203f11e898d9205b3a70e2801f2d8e891f508b8 (patch) | |
| tree | 66db00121f5c8d4ac96d7a956c4551d6781e0fc9 /ext/bg/css | |
| parent | 18043babeb8735a7707f273eab2b9364aa42ab7a (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')
| -rw-r--r-- | ext/bg/css/settings2.css | 31 |
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 */ |