New: Added colored outline to input boxes that are in focus

This commit is contained in:
lscambo13
2025-01-02 10:06:51 -08:00
parent d763c5d8f2
commit f7843b9cb5

View File

@@ -17,7 +17,7 @@
--btnSubmitColor: rgb(61, 54, 178); --btnSubmitColor: rgb(61, 54, 178);
--btnSubmitBorderColor: rgb(117 111 226); --btnSubmitBorderColor: rgb(117 111 226);
--checkboxCheckedBgColor: rgb(79, 70, 229); --checkboxCheckedBgColor: rgb(79, 70, 229);
--checkboxUncheckedFocusedBorderColor: rgb(37, 99, 235); --highlightOutlineColor: rgb(37, 99, 235);
--textColor: rgb(209, 213, 219); --textColor: rgb(209, 213, 219);
--dimTextColor: rgb(156, 163, 175); --dimTextColor: rgb(156, 163, 175);
--activeColorAlpha: rgb(201 143 255 / 40%); --activeColorAlpha: rgb(201 143 255 / 40%);
@@ -812,14 +812,14 @@ progress+span {
} }
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: var(--checkboxUncheckedFocusedBorderColor) !important; border-color: var(--highlightOutlineColor) !important;
outline: var(--borderWidth) solid gray; outline: var(--borderWidth) solid gray;
outline-offset: calc(-2.5*var(--borderWidth)); outline-offset: calc(-2.5*var(--borderWidth));
} }
.emby-checkbox:focus+span+.checkboxOutline { .emby-checkbox:focus+span+.checkboxOutline {
border-color: white !important; border-color: white !important;
outline: var(--borderWidth) solid var(--checkboxUncheckedFocusedBorderColor); outline: var(--borderWidth) solid var(--highlightOutlineColor);
} }
.cardIndicators { .cardIndicators {
@@ -1231,12 +1231,13 @@ div[data-role=controlgroup] a.ui-btn-active {
.emby-select-withcolor:focus, .emby-select-withcolor:focus,
.emby-input:focus, .emby-input:focus,
.emby-textarea: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-select-withcolor:hover:not(.emby-select[disabled], :focus),
.emby-input:hover, .emby-input:hover:not(:focus),
.emby-textarea:hover { .emby-textarea:hover:not(:focus) {
border-color: var(--dimTextColor) !important; border-color: var(--dimTextColor) !important;
} }