From 878b33750fb225e4439c2fa7eda582d27ce12284 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Tue, 30 Aug 2022 18:05:06 -0700 Subject: [PATCH] Add hover background color to editor tabs (with transitions) --- editor/css/editor-libs/tabby.css | 33 +++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/editor/css/editor-libs/tabby.css b/editor/css/editor-libs/tabby.css index 8349958d8..409392d84 100644 --- a/editor/css/editor-libs/tabby.css +++ b/editor/css/editor-libs/tabby.css @@ -4,23 +4,26 @@ background: var(--background-secondary); } -button[role='tab'] { - background-color: transparent; - color: var(--text-secondary); - padding: .5em 30px; - border: 0 none; - border-bottom: 3px solid transparent; - border-top: 3px solid transparent; - font: var(--type-emphasis-m); - cursor: pointer; +button[role="tab"] { + background-color: transparent; + color: var(--text-secondary); + padding: 0.5em 30px; + border: 0 none; + border-bottom: 3px solid transparent; + border-top: 3px solid transparent; + font: var(--type-emphasis-m); + cursor: pointer; + transition: color 0.2s, background-color 0.2s; } -button[role='tab']:hover, -button[role='tab']:focus { - color: var(--text-primary); +button[role="tab"]:hover, +button[role="tab"]:focus { + background-color: var(--background-tertiary); + color: var(--text-primary); } -button[aria-selected='true'] { - color: var(--accent-primary); - border-bottom-color: var(--accent-primary); +button[aria-selected="true"] { + color: var(--accent-primary); + border-bottom-color: var(--accent-primary); + background-color: var(--background-tertiary); }