From 8c1446266c0b517de89554468c8b647e3450b223 Mon Sep 17 00:00:00 2001 From: DrPandemic Date: Thu, 16 May 2019 18:23:46 -0400 Subject: [PATCH] Changes checkbox focus appearance --- CONTRIBUTORS.md | 1 + .../emby-checkbox/emby-checkbox.css | 29 ++----------------- src/components/emby-checkbox/emby-checkbox.js | 2 +- src/components/themes/appletv/theme.css | 16 ++++++---- src/components/themes/blueradiance/theme.css | 12 +++++--- src/components/themes/dark/theme.css | 12 +++++--- src/components/themes/emby/theme.css | 12 +++++--- src/components/themes/light/theme.css | 16 ++++++---- src/components/themes/purple-haze/theme.css | 12 +++++--- src/components/themes/wmc/theme.css | 16 ++++++---- 10 files changed, 67 insertions(+), 61 deletions(-) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 0dd6a53512..61838888e4 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -22,6 +22,7 @@ - [LogicalPhallacy](https://github.com/LogicalPhallacy) - [thornbill](https://github.com/thornbill) - [redSpoutnik](https://github.com/redSpoutnik) + - [DrPandemic](https://github.com/drpandemic) # Emby Contributors diff --git a/src/components/emby-checkbox/emby-checkbox.css b/src/components/emby-checkbox/emby-checkbox.css index dc12b2de82..ed70747db2 100644 --- a/src/components/emby-checkbox/emby-checkbox.css +++ b/src/components/emby-checkbox/emby-checkbox.css @@ -63,29 +63,6 @@ justify-content: center; } -/* Commenting this out - set by theme */ -/*.emby-checkbox:checked + span + span + .checkboxOutline { - border-color: #52B54B; -}*/ - -.emby-checkbox-focushelper { - position: absolute; - top: -0.915em; - left: -0.915em; - width: 3.66em; - height: 3.66em; - display: inline-block; - box-sizing: border-box; - margin: 3px 0 0 0; - border-radius: 50%; - background-color: transparent; -} - -/* Commenting this out - set by theme */ -/*.emby-checkbox:focus + span + .emby-checkbox-focushelper { - background-color: rgba(82, 181, 75, 0.26); -}*/ - .checkboxIcon { font-size: 1.6em; color: #fff; @@ -95,18 +72,18 @@ display: none; } -.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-checked { +.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked { /* background-color set by theme */ /*background-color: #52B54B;*/ display: flex !important; } -.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-unchecked { +.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked { /* background-color set by theme */ display: none !important; } -.emby-checkbox:checked[disabled] + span + span + .checkboxOutline > .checkboxIcon { +.emby-checkbox:checked[disabled] + span + .checkboxOutline > .checkboxIcon { background-color: rgba(0, 0, 0, 0.26); } diff --git a/src/components/emby-checkbox/emby-checkbox.js b/src/components/emby-checkbox/emby-checkbox.js index 9afb67bc02..6144f6892b 100644 --- a/src/components/emby-checkbox/emby-checkbox.js +++ b/src/components/emby-checkbox/emby-checkbox.js @@ -61,7 +61,7 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b var uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; var checkHtml = '' + checkedIcon + ''; var uncheckedHtml = '' + uncheckedIcon + ''; - labelElement.insertAdjacentHTML('beforeend', '' + checkHtml + uncheckedHtml + ''); + labelElement.insertAdjacentHTML('beforeend', '' + checkHtml + uncheckedHtml + ''); labelTextElement.classList.add('checkboxLabel'); diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css index 2342568cec..dd4e9ce4d3 100644 --- a/src/components/themes/appletv/theme.css +++ b/src/components/themes/appletv/theme.css @@ -281,11 +281,19 @@ html { border: .07em solid rgba(0, 0, 0, .158) } -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:checked+span+.checkboxOutline, .emby-select-withcolor:focus { border-color: #00a4dc } +.emby-checkbox:focus+span+.checkboxOutline { + border-color: #fff; +} + +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #00a4dc; +} + .emby-select-withcolor>option { color: #000; background: #fff @@ -296,11 +304,7 @@ html { color: #fff } -.emby-checkbox:focus+span+.emby-checkbox-focushelper { - background-color: rgba(0,164,220, .26) -} - -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #00a4dc } diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css index c8ee55effe..b94932b0e7 100644 --- a/src/components/themes/blueradiance/theme.css +++ b/src/components/themes/blueradiance/theme.css @@ -274,15 +274,19 @@ html { color: #fff !important } -.emby-checkbox:checked+span+span+.checkboxOutline { +.emby-checkbox:checked+span+.checkboxOutline { border-color: #00a4dc } -.emby-checkbox:focus+span+.emby-checkbox-focushelper { - background-color: rgba(0,164,220, .26) +.emby-checkbox:focus+span+.checkboxOutline { + border-color: #fff; } -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #00a4dc; +} + +.emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #00a4dc } diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css index 8f89ebef5d..1f3d7713e2 100644 --- a/src/components/themes/dark/theme.css +++ b/src/components/themes/dark/theme.css @@ -259,15 +259,19 @@ html { color: #fff !important } -.emby-checkbox:checked+span+span+.checkboxOutline { +.emby-checkbox:checked+span+.checkboxOutline { border-color: #00a4dc } -.emby-checkbox:focus+span+.emby-checkbox-focushelper { - background-color: rgba(0,164,220, .26) +.emby-checkbox:focus+span+.checkboxOutline { + border-color: #fff; } -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #00a4dc; +} + +.emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #00a4dc } diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css index 3e5809c191..0bdf5d3e7d 100644 --- a/src/components/themes/emby/theme.css +++ b/src/components/themes/emby/theme.css @@ -259,15 +259,19 @@ html { color: #fff !important } -.emby-checkbox:checked+span+span+.checkboxOutline { +.emby-checkbox:checked+span+.checkboxOutline { border-color: #52b54b } -.emby-checkbox:focus+span+.emby-checkbox-focushelper { - background-color: rgba(82, 181, 75, .26) +.emby-checkbox:focus+span+.checkboxOutline { + border-color: #fff; } -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #52b54b; +} + +.emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #52b54b } diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css index ac8c0e040e..717a47a8a7 100644 --- a/src/components/themes/light/theme.css +++ b/src/components/themes/light/theme.css @@ -267,11 +267,19 @@ html { border: .07em solid rgba(0, 0, 0, .158) } -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:checked+span+.checkboxOutline, .emby-select-withcolor:focus { border-color: #00a4dc } +.emby-checkbox:focus+span+.checkboxOutline { + border-color: #000; +} + +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #00a4dc; +} + .emby-select-withcolor>option { color: #000; background: #fff @@ -282,11 +290,7 @@ html { color: #fff } -.emby-checkbox:focus+span+.emby-checkbox-focushelper { - background-color: rgba(0,164,220, .26) -} - -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #00a4dc } diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css index b3c3843eff..34762f0847 100644 --- a/src/components/themes/purple-haze/theme.css +++ b/src/components/themes/purple-haze/theme.css @@ -303,15 +303,19 @@ progress::-webkit-progress-value { color: #fff !important } -.emby-checkbox:checked+span+span+.checkboxOutline { +.emby-checkbox:checked+span+.checkboxOutline { border-color: #48C3C8 } -.emby-checkbox:focus+span+.emby-checkbox-focushelper { - background-color: rgba(0,164,220, .26) +.emby-checkbox:focus+span+.checkboxOutline { + border-color: #fff; } -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #48C3C8; +} + +.emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #48C3C8 } diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css index ac18837eea..9f0ba41b76 100644 --- a/src/components/themes/wmc/theme.css +++ b/src/components/themes/wmc/theme.css @@ -261,11 +261,19 @@ html { border: .07em solid rgba(255, 255, 255, .135) } -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:checked+span+.checkboxOutline, .emby-select-withcolor:focus { border-color: #00a4dc } +.emby-checkbox:focus+span+.checkboxOutline { + border-color: #fff; +} + +.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { + border-color: #00a4dc; +} + .emby-select-withcolor>option { color: #000; background: #fff @@ -276,11 +284,7 @@ html { color: #fff } -.emby-checkbox:focus+span+.emby-checkbox-focushelper { - background-color: rgba(0,164,220, .26) -} - -.emby-checkbox:checked+span+span+.checkboxOutline, +.emby-checkbox:checked+span+.checkboxOutline, .itemProgressBarForeground { background-color: #00a4dc }