Changes checkbox focus appearance

jellyfin · May 17, 2019 · 8c14462 · 8c14462
1 parent d4ea091
commit 8c14462
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 61 deletions.
diff --git 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
@@ -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
@@ -61,7 +61,7 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
         var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
         var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>';
         var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>';
-        labelElement.insertAdjacentHTML('beforeend', '<span class="emby-checkbox-focushelper"></span><span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
+        labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
 
         labelTextElement.classList.add('checkboxLabel');
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
 }