diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css index 0b17a82ed4..f8671ce265 100644 --- a/src/elements/emby-radio/emby-radio.css +++ b/src/elements/emby-radio/emby-radio.css @@ -53,7 +53,7 @@ cursor: auto; } -.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle { +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle { color: #00a4dc; } @@ -80,7 +80,7 @@ color: rgba(0, 0, 0, 0.26); } -.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle { +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle { color: #00a4dc; } @@ -103,7 +103,7 @@ transform: scale(0); } -.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle { +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle { -webkit-transform: scale(1.75); transform: scale(1.75); } diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js index 86c08678e1..46a3e3826c 100644 --- a/src/elements/emby-radio/emby-radio.js +++ b/src/elements/emby-radio/emby-radio.js @@ -1,4 +1,4 @@ -define(['css!./emby-radio', 'registerElement'], function () { +define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) { 'use strict'; var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); @@ -23,6 +23,7 @@ define(['css!./emby-radio', 'registerElement'], function () { } EmbyRadioPrototype.attachedCallback = function () { + var showFocus = !layoutManager.mobile; if (this.getAttribute('data-radio') === 'true') { return; @@ -37,6 +38,9 @@ define(['css!./emby-radio', 'registerElement'], function () { labelElement.classList.add('mdl-radio'); labelElement.classList.add('mdl-js-radio'); labelElement.classList.add('mdl-js-ripple-effect'); + if (showFocus) { + labelElement.classList.add('show-focus'); + } var labelTextElement = labelElement.querySelector('span'); @@ -57,7 +61,9 @@ define(['css!./emby-radio', 'registerElement'], function () { html += ''; html += ''; - html += '
'; + if (showFocus) { + html += '
'; + } html += ''; diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index d65071afa4..45f43abc2f 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -438,12 +438,12 @@ 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 { +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__outer-circle, +.mdl-radio.show-focus .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 { +.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle { background: #00a4dc; }