New: Improved accessibility on focus borders in TV layout

This commit is contained in:
lscambo13
2025-01-15 09:05:38 -08:00
parent 415d3d8ecd
commit d7d5e46714

View File

@@ -61,27 +61,20 @@ html {
}
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-radius: var(--largerRadius) !important;
border: solid rgba(0, 0, 0, 1) var(--borderWidth) !important;
outline: var(--borderWidth) rgba(255, 255, 255, 1) solid;
transition: border .1s;
border-color: var(--highlightOutlineColor) !important;
filter: brightness(1.125);
}
.emby-button.show-focus:focus,
.paper-icon-button-light.show-focus:focus {
background: #2f3a53;
outline: var(--borderWidth) rgb(255 255 255) solid !important;
outline-offset: calc(-1*var(--borderWidth));
background-color: var(--highlightOutlineColor);
color: #fff;
transition: outline 0s, border 0s;
}
.emby-tabs .emby-button.show-focus:focus {
outline: .05em rgb(255 255 255) solid !important;
outline-offset: -1em;
outline: none !important;
color: #fff;
border-radius: var(--largerRadius);
background-color: var(--highlightOutlineColor) !important;
}
[dir=ltr] .itemsContainer>.card>.cardBox {
@@ -830,6 +823,10 @@ progress+span {
outline: solid var(--borderWidth) white;
}
.layout-tv .emby-checkbox:checked+span+.checkboxOutline {
outline: none;
}
.checkboxOutline {
top: unset;
height: 1.3em;
@@ -899,6 +896,14 @@ progress+span {
outline: var(--borderWidth) solid var(--highlightOutlineColor);
}
.layout-tv .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
outline: none;
}
.layout-tv .emby-checkbox:focus+span+.checkboxOutline {
outline: none;
}
.cardIndicators {
-webkit-align-items: center;
align-items: center;
@@ -1149,6 +1154,10 @@ div[data-role=controlgroup] a.ui-btn-active {
border-color: transparent !important;
}
.listItem-border.emby-button.show-focus:focus {
border-radius: var(--smallRadius);
}
.alphaPickerButton {
font-family: monospace;
margin: .15em;
@@ -1167,6 +1176,10 @@ div[data-role=controlgroup] a.ui-btn-active {
justify-content: center;
}
.alphaPickerButton-tv:focus {
background-color: var(--highlightOutlineColor);
}
[dir=ltr] .padded-left.vertical-wrap {
padding-left: 5% !important;
}
@@ -1336,6 +1349,13 @@ div[data-role=controlgroup] a.ui-btn-active {
outline: thin solid var(--highlightOutlineColor) !important;
}
.layout-tv .emby-select-withcolor:focus,
.layout-tv .emby-input:focus,
.layout-tv .emby-textarea:focus {
border-color: var(--highlightOutlineColor) !important;
outline: none !important;
}
.emby-select-withcolor>option {
color: inherit;
background-color: var(--selectorBackgroundColor);
@@ -1415,6 +1435,7 @@ div[data-role=controlgroup] a.ui-btn-active {
.layout-tv .headerLeft {
overflow: unset;
margin: .25em .5em;
}
.mdl-spinner__circle {