From f7843b9cb557feb71643b9b94b3dd3a43d3efbdf Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 2 Jan 2025 10:06:51 -0800 Subject: [PATCH] New: Added colored outline to input boxes that are in focus --- Theme/ElegantFin-theme-nightly.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 576528e..95ebed7 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -17,7 +17,7 @@ --btnSubmitColor: rgb(61, 54, 178); --btnSubmitBorderColor: rgb(117 111 226); --checkboxCheckedBgColor: rgb(79, 70, 229); - --checkboxUncheckedFocusedBorderColor: rgb(37, 99, 235); + --highlightOutlineColor: rgb(37, 99, 235); --textColor: rgb(209, 213, 219); --dimTextColor: rgb(156, 163, 175); --activeColorAlpha: rgb(201 143 255 / 40%); @@ -812,14 +812,14 @@ progress+span { } .emby-checkbox:focus:not(:checked)+span+.checkboxOutline { - border-color: var(--checkboxUncheckedFocusedBorderColor) !important; + border-color: var(--highlightOutlineColor) !important; outline: var(--borderWidth) solid gray; outline-offset: calc(-2.5*var(--borderWidth)); } .emby-checkbox:focus+span+.checkboxOutline { border-color: white !important; - outline: var(--borderWidth) solid var(--checkboxUncheckedFocusedBorderColor); + outline: var(--borderWidth) solid var(--highlightOutlineColor); } .cardIndicators { @@ -1231,12 +1231,13 @@ div[data-role=controlgroup] a.ui-btn-active { .emby-select-withcolor:focus, .emby-input:focus, .emby-textarea:focus { - border-color: #c1c1c1 !important; + border-color: var(--highlightOutlineColor) !important; + outline: thin solid var(--highlightOutlineColor) !important; } -.emby-select-withcolor:hover:not(.emby-select[disabled]), -.emby-input:hover, -.emby-textarea:hover { +.emby-select-withcolor:hover:not(.emby-select[disabled], :focus), +.emby-input:hover:not(:focus), +.emby-textarea:hover:not(:focus) { border-color: var(--dimTextColor) !important; }