From d7c32dcde924d9a3afb3790103f401be3b25ad73 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 12 Mar 2020 12:34:50 +0300
Subject: [PATCH] Fix radiobutton focus marker

---
 src/elements/emby-radio/emby-radio.css | 105 ++++++++++++++-----------
 src/elements/emby-radio/emby-radio.js  |  20 ++++-
 src/themes/purplehaze/theme.css        |   9 +++
 3 files changed, 87 insertions(+), 47 deletions(-)

diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css
index 6db3c39e4d..34af657b9c 100644
--- a/src/elements/emby-radio/emby-radio.css
+++ b/src/elements/emby-radio/emby-radio.css
@@ -4,7 +4,6 @@
     display: inline-block;
     box-sizing: border-box;
     margin: 0;
-    padding-left: 24px;
 }
 
 .radio-label-block {
@@ -31,67 +30,81 @@
     border: none;
 }
 
-.mdl-radio__outer-circle {
-    position: absolute;
-    top: 4px;
-    left: 0;
-    display: inline-block;
-    box-sizing: border-box;
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    cursor: pointer;
-    border: 2px solid currentcolor;
+.mdl-radio__circles {
+    position: relative;
+    margin-right: 0.54em;
+    width: 1.08em;
+    height: 1.08em;
     border-radius: 50%;
-    z-index: 2;
+    cursor: pointer;
 }
 
-.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle {
-    border: 2px solid #00a4dc;
+.mdl-radio__circles svg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
 }
 
-.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
-    border: 2px solid rgba(0, 0, 0, 0.26);
+.mdl-radio__button:disabled + .mdl-radio__circles {
     cursor: auto;
 }
 
+.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
+    color: #00a4dc;
+}
+
+.mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__outer-circle {
+    color: rgba(0, 0, 0, 0.26);
+}
+
 .mdl-radio__inner-circle {
-    position: absolute;
-    z-index: 1;
-    margin: 0;
-    top: 8px;
-    left: 4px;
-    box-sizing: border-box;
-    width: 8px;
-    height: 8px;
-    cursor: pointer;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 0.2s;
     transition-property: -webkit-transform;
     transition-property: transform;
     transition-property: transform, -webkit-transform;
-    -webkit-transform: scale3d(0, 0, 0);
-    transform: scale3d(0, 0, 0);
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    transform-origin: 50% 50%;
+}
+
+.mdl-radio__button:checked + .mdl-radio__circles .mdl-radio__inner-circle {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__inner-circle {
+    color: rgba(0, 0, 0, 0.26);
+}
+
+.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
+    color: #00a4dc;
+}
+
+.mdl-radio__focus-circle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    margin: 0;
     border-radius: 50%;
     background: #00a4dc;
+    opacity: 0.26;
+    transition-duration: 0.2s;
+    transition-property: -webkit-transform;
+    transition-property: transform;
+    transition-property: transform, -webkit-transform;
+    -webkit-transform: scale(0);
+    transform: scale(0);
 }
 
-.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-}
-
-.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    background: rgba(0, 0, 0, 0.26);
-    cursor: auto;
-}
-
-.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76);
-}
-
-.mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26);
+.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
+    -webkit-transform: scale(1.75);
+    transform: scale(1.75);
 }
 
 .mdl-radio__label {
diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js
index 000c656822..86c08678e1 100644
--- a/src/elements/emby-radio/emby-radio.js
+++ b/src/elements/emby-radio/emby-radio.js
@@ -43,7 +43,25 @@ define(['css!./emby-radio', 'registerElement'], function () {
         labelTextElement.classList.add('radioButtonLabel');
         labelTextElement.classList.add('mdl-radio__label');
 
-        labelElement.insertAdjacentHTML('beforeend', '<span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span>');
+        var html = '';
+
+        html += '<div class="mdl-radio__circles">';
+
+        html += '<svg>';
+        html += '<defs>';
+        html += '<clipPath id="cutoff">';
+        html += '<circle cx="50%" cy="50%" r="50%" />';
+        html += '</clipPath>';
+        html += '</defs>';
+        html += '<circle class="mdl-radio__outer-circle" cx="50%" cy="50%" r="50%" fill="none" stroke="currentcolor" stroke-width="0.26em" clip-path="url(#cutoff)" />';
+        html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />';
+        html += '</svg>';
+
+        html += '<div class="mdl-radio__focus-circle"></div>';
+
+        html += '</div>';
+
+        this.insertAdjacentHTML('afterend', html);
 
         this.addEventListener('keydown', onKeyDown);
     };
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index 9c13841422..a31b5a924f 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -438,6 +438,15 @@ a[data-role=button] {
     color: #f8f8fe;
 }
 
+.mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__outer-circle,
+.mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__inner-circle {
+    color: #ff77f1;
+}
+
+.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
+    background: #00a4dc;
+}
+
 .emby-tab-button {
     color: #999;
 }