mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #451 from dkanada/style

Browse source 
Improve button style when focused
This commit is contained in:
dkanada 2019-09-14 02:24:27 -07:00 • committed by GitHub
commit 09e38ca931
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 148 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/actionsheet/actionsheet.css
View file

@ -36,6 +36,7 @@
font-weight: inherit; font-weight: inherit;
box-shadow: none; box-shadow: none;
flex-shrink: 0; flex-shrink: 0;
border-radius: 0;
} }
.actionSheetMenuItem:focus { .actionSheetMenuItem:focus {

1
src/components/displaysettings/displaysettings.template.html
View file

@ -119,6 +119,7 @@
<option value="tv">${TV}</option> <option value="tv">${TV}</option>
</select> </select>
<div class="fieldDescription">${DisplayModeHelp}</div> <div class="fieldDescription">${DisplayModeHelp}</div>
<div class="fieldDescription">${LabelPleaseRestart}</div>
</div> </div>
<div class="selectContainer hide selectSkinContainer"> <div class="selectContainer hide selectSkinContainer">

50
src/components/emby-button/emby-button.css
View file

@ -3,7 +3,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
margin: 0 .29em; margin: 0 0.3em;
text-align: center; text-align: center;
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
@ -15,11 +15,11 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
z-index: 0; z-index: 0;
padding: .86em 1em; padding: 0.9em 1em;
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
vertical-align: middle; vertical-align: middle;
border-radius: .2em; border-radius: 0.2em;
/* These are getting an outline in opera tv browsers, which run chrome 30 */ /* These are getting an outline in opera tv browsers, which run chrome 30 */
outline: none !important; outline: none !important;
position: relative; position: relative;
@ -29,6 +29,13 @@
text-decoration: none; text-decoration: none;
/* Not crazy about this but it normalizes heights between anchors and buttons */ /* Not crazy about this but it normalizes heights between anchors and buttons */
line-height: 1.35; line-height: 1.35;
transform-origin: center;
transition: 0.2s;
}
.emby-button.show-focus:focus {
transform: scale(1.4);
z-index: 1;
} }
.emby-button::-moz-focus-inner { .emby-button::-moz-focus-inner {
@ -54,17 +61,6 @@
text-decoration: underline; text-decoration: underline;
} }
.emby-button-focusscale {
transition: transform 180ms ease-out !important;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.emby-button-focusscale:focus {
transform: scale(1.16);
z-index: 1;
}
.emby-button > i { .emby-button > i {
/* For non-fab buttons that have icons */ /* For non-fab buttons that have icons */
font-size: 1.36em; font-size: 1.36em;
@ -77,7 +73,7 @@
.fab { .fab {
display: inline-flex; display: inline-flex;
border-radius: 50%; border-radius: 50%;
padding: .6em; padding: 0.6em;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -125,14 +121,22 @@
/* Disable webkit tap highlighting */ /* Disable webkit tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
justify-content: center; justify-content: center;
transform-origin: center;
transition: 0.2s;
}
.paper-icon-button-light.show-focus:focus {
transform: scale(1.6);
z-index: 1;
} }
.paper-icon-button-light::-moz-focus-inner { .paper-icon-button-light::-moz-focus-inner {
border: 0; border: 0;
} }
.paper-icon-button-light[disabled] { .paper-icon-button-light:disabled {
opacity: .3; opacity: 0.3;
cursor: default;
} }
.paper-icon-button-light > i { .paper-icon-button-light > i {
@ -159,17 +163,6 @@
z-index: 1; z-index: 1;
} }
.icon-button-focusscale {
transition: transform 180ms ease-out !important;
-webkit-transform-origin: center center;
transform-origin: center center;
}
.icon-button-focusscale:focus {
transform: scale(1.3);
z-index: 1;
}
.btnFilterWithBubble { .btnFilterWithBubble {
position: relative; position: relative;
} }
@ -180,7 +173,6 @@
background: #444; background: #444;
top: 0; top: 0;
right: 0; right: 0;
/* padding: .5em; */
width: 1.6em; width: 1.6em;
height: 1.6em; height: 1.6em;
z-index: 100000000; z-index: 100000000;

24
src/components/emby-button/emby-button.js
View file

@ -21,30 +21,23 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
} }
EmbyButtonPrototype.createdCallback = function () { EmbyButtonPrototype.createdCallback = function () {
if (this.classList.contains('emby-button')) { if (this.classList.contains('emby-button')) {
return; return;
} }
this.classList.add('emby-button'); this.classList.add('emby-button');
// TODO replace all instances of element-showfocus with this method
if (layoutManager.tv) { if (layoutManager.tv) {
if (this.getAttribute('data-focusscale') !== 'false') { // handles all special css for tv layout
this.classList.add('emby-button-focusscale'); // this method utilizes class chaining
} this.classList.add('show-focus');
this.classList.add('emby-button-tv');
} }
}; };
EmbyButtonPrototype.attachedCallback = function () { EmbyButtonPrototype.attachedCallback = function () {
if (this.tagName === 'A') { if (this.tagName === 'A') {
dom.removeEventListener(this, 'click', onAnchorClick, {});
dom.removeEventListener(this, 'click', onAnchorClick, { dom.addEventListener(this, 'click', onAnchorClick, {});
});
dom.addEventListener(this, 'click', onAnchorClick, {
});
if (this.getAttribute('data-autohide') === 'true') { if (this.getAttribute('data-autohide') === 'true') {
if (appHost.supports('externallinks')) { if (appHost.supports('externallinks')) {
@ -57,9 +50,7 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
}; };
EmbyButtonPrototype.detachedCallback = function () { EmbyButtonPrototype.detachedCallback = function () {
dom.removeEventListener(this, 'click', onAnchorClick, {});
dom.removeEventListener(this, 'click', onAnchorClick, {
});
}; };
EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
@ -75,6 +66,5 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
extends: 'a' extends: 'a'
}); });
// For extension purposes
return EmbyButtonPrototype; return EmbyButtonPrototype;
}); });

3
src/components/emby-button/paper-icon-button-light.js
View file

@ -4,11 +4,10 @@ define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layo
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
EmbyButtonPrototype.createdCallback = function () { EmbyButtonPrototype.createdCallback = function () {
this.classList.add('paper-icon-button-light'); this.classList.add('paper-icon-button-light');
if (layoutManager.tv) { if (layoutManager.tv) {
this.classList.add('icon-button-focusscale'); this.classList.add('show-focus');
} }
}; };

7
src/components/emby-checkbox/emby-checkbox.css
View file

@ -73,13 +73,12 @@
} }
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked { .emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
/* background-color set by theme */ /* background color set by theme */
/*background-color: #52B54B;*/
display: flex !important; display: flex !important;
} }
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked { .emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked {
/* background-color set by theme */ /* background color set by theme */
display: none !important; display: none !important;
} }
@ -94,7 +93,7 @@
.checkboxList > .emby-checkbox-label { .checkboxList > .emby-checkbox-label {
display: flex; display: flex;
margin: .5em 0; margin: 0.5em 0;
} }
.checkboxList-verticalwrap { .checkboxList-verticalwrap {

5
src/components/emby-checkbox/emby-checkbox.js
View file

@ -4,7 +4,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
function onKeyDown(e) { function onKeyDown(e) {
// Don't submit form on enter // Don't submit form on enter
if (e.keyCode === 13) { if (e.keyCode === 13) {
e.preventDefault(); e.preventDefault();
@ -22,7 +21,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false; var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
function forceRefresh(loading) { function forceRefresh(loading) {
var elem = this.parentNode; var elem = this.parentNode;
elem.style.webkitAnimationName = 'repaintChrome'; elem.style.webkitAnimationName = 'repaintChrome';
@ -36,7 +34,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
} }
EmbyCheckboxPrototype.attachedCallback = function () { EmbyCheckboxPrototype.attachedCallback = function () {
if (this.getAttribute('data-embycheckbox') === 'true') { if (this.getAttribute('data-embycheckbox') === 'true') {
return; return;
} }
@ -68,7 +65,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
this.addEventListener('keydown', onKeyDown); this.addEventListener('keydown', onKeyDown);
if (enableRefreshHack) { if (enableRefreshHack) {
forceRefresh.call(this, true); forceRefresh.call(this, true);
dom.addEventListener(this, 'click', forceRefresh, { dom.addEventListener(this, 'click', forceRefresh, {
passive: true passive: true
@ -86,7 +82,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
}; };
EmbyCheckboxPrototype.detachedCallback = function () { EmbyCheckboxPrototype.detachedCallback = function () {
this.removeEventListener('keydown', onKeyDown); this.removeEventListener('keydown', onKeyDown);
dom.removeEventListener(this, 'click', forceRefresh, { dom.removeEventListener(this, 'click', forceRefresh, {

8
src/components/emby-slider/emby-slider.css
View file

@ -70,8 +70,8 @@ _:-ms-input-placeholder {
.mdl-slider::-webkit-slider-thumb { .mdl-slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.8em; width: 1.2em;
height: 1.8em; height: 1.2em;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
background: #00a4dc; background: #00a4dc;
@ -80,11 +80,11 @@ _:-ms-input-placeholder {
} }
.mdl-slider-hoverthumb::-webkit-slider-thumb { .mdl-slider-hoverthumb::-webkit-slider-thumb {
transform: scale(.7, .7); transform: none;
} }
.mdl-slider:hover::-webkit-slider-thumb { .mdl-slider:hover::-webkit-slider-thumb {
transform: none; transform: scale(1.6);
} }
.slider-no-webkit-thumb::-webkit-slider-thumb { .slider-no-webkit-thumb::-webkit-slider-thumb {

27
src/components/emby-tabs/emby-tabs.css
View file

@ -2,7 +2,7 @@
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
cursor: pointer; cursor: pointer;
outline: none !important; outline: none;
width: auto; width: auto;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
@ -10,36 +10,25 @@
vertical-align: middle; vertical-align: middle;
flex-shrink: 0; flex-shrink: 0;
margin: 0; margin: 0;
padding: 1em .9em; padding: 1em 0.9em;
position: relative; position: relative;
height: auto; height: auto;
min-width: initial; min-width: initial;
line-height: initial; line-height: initial;
border-radius: 0 !important; border-radius: 0;
overflow: hidden; overflow: hidden;
font-weight: 600; font-weight: 600;
} }
/*.emby-tab-button-active { .emby-tab-button.show-focus:focus {
color: #52B54B; /* these buttons are small so scale larger than usual */
} transform: scale(1.6) !important;
background: 0 !important;
.emby-tab-button-active.emby-button-tv {
color: #fff;
}*/
.emby-tab-button.emby-button-tv:focus {
/*color: #52B54B;*/
transform: scale(1.32);
transform-origin: center center;
} }
.emby-tabs-slider { .emby-tabs-slider {
position: relative; position: relative;
} overflow: hidden;
.emby-tab-button-ripple-effect {
background: rgba(0,0,0,.7) !important;
} }
.tabContent:not(.is-active) { .tabContent:not(.is-active) {

2
src/components/guide/guide.css
View file

@ -424,7 +424,7 @@
border-color: transparent !important; border-color: transparent !important;
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.show-focus:focus {
border-radius: .15em !important; border-radius: .15em !important;
transform: none !important; transform: none !important;
} }

2
src/components/homescreensettings/homescreensettings.template.html
View file

@ -7,7 +7,7 @@
<option value="horizontal">${Horizontal}</option> <option value="horizontal">${Horizontal}</option>
<option value="vertical">${Vertical}</option> <option value="vertical">${Vertical}</option>
</select> </select>
<div class="fieldDescription">Changes take effect after signing out or restarting the app.</div> <div class="fieldDescription">${LabelPleaseRestart}</div>
</div> </div>
<div class="selectContainer"> <div class="selectContainer">

22
src/components/listview/listview.css
View file

@ -39,8 +39,16 @@
} }
.listItem-border { .listItem-border {
border-bottom-width: .1em; display: block;
border-bottom-style: solid; margin: 0;
padding: 0;
border-width: 0 0 0.1em 0;
border-style: solid;
border-radius: 0;
}
.listItem-border.show-focus:focus {
transform: scale(1.0) !important;
} }
.listItemImage, .listItemIcon, .listItemAside { .listItemImage, .listItemIcon, .listItemAside {
@ -131,16 +139,15 @@
.listItemImageButton-icon { .listItemImageButton-icon {
background: rgba(0,0,0,.4); background: rgba(0,0,0,.4);
border: .08em solid currentColor; border: 0.1em solid currentColor;
border-radius: 100em; border-radius: 100em;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: .21em; padding: 0.2em;
} }
@media all and (max-width: 64em) { @media all and (max-width: 64em) {
.listItemImage-large { .listItemImage-large {
width: 33.75vw; width: 33.75vw;
height: 22.5vw; height: 22.5vw;
@ -148,7 +155,7 @@
} }
.listItemImageButton { .listItemImageButton {
font-size: 1.02em !important; font-size: 1em !important;
} }
.listItemBody { .listItemBody {
@ -157,7 +164,6 @@
} }
@media all and (max-width: 50em) { @media all and (max-width: 50em) {
.listItemBody { .listItemBody {
padding-right: .5em; padding-right: .5em;
} }
@ -245,14 +251,12 @@
} }
@media all and (max-width: 50em) { @media all and (max-width: 50em) {
.listItem .endsAt, .listItem .criticRating, .listItem-overview { .listItem .endsAt, .listItem .criticRating, .listItem-overview {
display: none !important; display: none !important;
} }
} }
@media all and (min-width: 50em) { @media all and (min-width: 50em) {
.listItem-bottomoverview { .listItem-bottomoverview {
display: none !important; display: none !important;
} }

26
src/components/themes/appletv/theme.css
View file

@ -71,13 +71,12 @@ html {
background: #f0f0f0 background: #f0f0f0
} }
.paper-icon-button-light:hover { .paper-icon-button-light:hover:not(:disabled) {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2); background-color: rgba(0,164,220, .2);
transition: 0.2s;
} }
.paper-icon-button-light:focus { .paper-icon-button-light.show-focus:focus {
color: #00a4dc; color: #00a4dc;
} }
@ -341,24 +340,25 @@ html {
color: #fff color: #fff
} }
.emby-button-focusscale:focus { .emby-button.show-focus:focus {
background: #00a4dc; background: #00a4dc;
color: #fff color: #fff
} }
.emby-tab-button { .emby-tab-button {
color: #999; color: #999;
color: rgba(0, 0, 0, .5)
} }
.emby-tab-button-active, .emby-tab-button-active {
.emby-tab-button-active.emby-button-tv { color: #fff;
color: #fff }
}
.emby-tab-button.show-focus:focus {
.emby-tab-button.emby-button-tv:focus { color: #fff;
}
.emby-tab-button:hover {
color: #fff; color: #fff;
background: 0 0
} }
.channelPrograms, .channelPrograms,
@ -413,7 +413,7 @@ html {
color: #00a4dc color: #00a4dc
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.show-focus:focus {
background-color: #00a4dc; background-color: #00a4dc;
color: #fff color: #fff
} }

17
src/components/themes/blueradiance/theme.css
View file

@ -58,13 +58,12 @@ html {
} }
} }
.paper-icon-button-light:hover { .paper-icon-button-light:hover:not(:disabled) {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2); background-color: rgba(0,164,220, .2);
transition: 0.2s;
} }
.paper-icon-button-light:focus { .paper-icon-button-light.show-focus:focus {
color: #00a4dc; color: #00a4dc;
} }
@ -327,27 +326,25 @@ html {
color: #fff color: #fff
} }
.emby-button-focusscale:focus { .emby-button.show-focus:focus {
background: #00a4dc; background: #00a4dc;
color: #fff color: #fff
} }
.emby-tab-button { .emby-tab-button {
color: #999; color: #999;
color: rgba(255, 255, 255, .4)
} }
.emby-tab-button-active { .emby-tab-button-active {
color: #00a4dc color: #00a4dc
} }
.emby-tab-button-active.emby-button-tv { .emby-tab-button.show-focus:focus {
color: #fff color: #00a4dc;
} }
.emby-tab-button.emby-button-tv:focus { .emby-tab-button:hover {
color: #00a4dc; color: #00a4dc;
background: 0 0
} }
.channelPrograms, .channelPrograms,
@ -401,7 +398,7 @@ html {
color: #00a4dc color: #00a4dc
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.show-focus:focus {
background-color: #00a4dc; background-color: #00a4dc;
color: #fff color: #fff
} }

28
src/components/themes/dark/theme.css
View file

@ -39,13 +39,12 @@ html {
background-color: rgba(0, 0, 0, .86) background-color: rgba(0, 0, 0, .86)
} }
.paper-icon-button-light:hover { .paper-icon-button-light:hover:not(:disabled) {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2); background-color: rgba(0,164,220, .2);
transition: 0.2s;
} }
.paper-icon-button-light:focus { .paper-icon-button-light.show-focus:focus {
color: #00a4dc; color: #00a4dc;
} }
@ -304,28 +303,25 @@ html {
color: #fff color: #fff
} }
.emby-button-focusscale:focus { .emby-button.show-focus:focus {
background: #00a4dc; background: #00a4dc;
color: #fff color: #fff
} }
.emby-tab-button { .emby-tab-button {
color: #999; color: #999;
color: rgba(255, 255, 255, .4)
} }
.emby-tab-button-active { .emby-tab-button-active {
color: #fff
}
.emby-tab-button-active.emby-button-tv {
color: #999;
color: rgba(255, 255, 255, .4)
}
.emby-tab-button.emby-button-tv:focus {
color: #fff; color: #fff;
background: 0 0 }
.emby-tab-button.show-focus:focus {
color: #00a4dc;
}
.emby-tab-button:hover {
color: #00a4dc;
} }
.channelPrograms, .channelPrograms,
@ -379,7 +375,7 @@ html {
color: #00a4dc color: #00a4dc
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.show-focus:focus {
background-color: #00a4dc; background-color: #00a4dc;
color: #fff color: #fff
} }

27
src/components/themes/emby/theme.css
View file

@ -39,13 +39,12 @@ html {
background-color: rgba(0, 0, 0, .86) background-color: rgba(0, 0, 0, .86)
} }
.paper-icon-button-light:hover { .paper-icon-button-light:hover:not(:disabled) {
color: #52b54b; color: #52b54b;
background-color: rgba(82, 181, 75, .2); background-color: rgba(82, 181, 75, .2);
transition: 0.2s;
} }
.paper-icon-button-light:focus { .paper-icon-button-light.show-focus:focus {
color: #52b54b; color: #52b54b;
} }
@ -304,27 +303,25 @@ html {
color: #fff color: #fff
} }
.emby-button-focusscale:focus { .emby-button.show-focus:focus {
background: #52b54b; background: #52b54b;
color: #fff color: #fff
} }
.emby-tab-button { .emby-tab-button {
color: #999; color: #999;
color: rgba(255, 255, 255, .4)
} }
.emby-tab-button-active { .emby-tab-button-active {
color: #52b54b
}
.emby-tab-button-active.emby-button-tv {
color: #fff
}
.emby-tab-button.emby-button-tv:focus {
color: #52b54b; color: #52b54b;
background: 0 0 }
.emby-tab-button.show-focus:focus {
color: #52b54b;
}
.emby-tab-button:hover {
color: #52b54b;
} }
.channelPrograms, .channelPrograms,
@ -378,7 +375,7 @@ html {
color: #52b54b color: #52b54b
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.show-focus:focus {
background-color: #52b54b; background-color: #52b54b;
color: #fff color: #fff
} }

27
src/components/themes/light/theme.css
View file

@ -55,13 +55,12 @@ html {
background-color: #f0f0f0 background-color: #f0f0f0
} }
.paper-icon-button-light:hover { .paper-icon-button-light:hover:not(:disabled) {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2); background-color: rgba(0,164,220, .2);
transition: 0.2s;
} }
.paper-icon-button-light:focus { .paper-icon-button-light.show-focus:focus {
color: #00a4dc; color: #00a4dc;
} }
@ -323,27 +322,25 @@ html {
color: #fff color: #fff
} }
.emby-button-focusscale:focus { .emby-button.show-focus:focus {
background: #00a4dc; background: #00a4dc;
color: #fff color: #fff
} }
.emby-tab-button { .emby-tab-button {
color: #999; color: #999;
color: rgba(255, 255, 255, .5)
} }
.emby-tab-button-active { .emby-tab-button-active {
color: #00a4dc
}
.emby-tab-button-active.emby-button-tv {
color: #fff
}
.emby-tab-button.emby-button-tv:focus {
color: #00a4dc; color: #00a4dc;
background: 0 0 }
.emby-tab-button.show-focus:focus {
color: #00a4dc;
}
.emby-tab-button:hover {
color: #00a4dc;
} }
.channelPrograms, .channelPrograms,
@ -397,7 +394,7 @@ html {
color: #00a4dc color: #00a4dc
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.show-focus:focus {
background-color: #00a4dc; background-color: #00a4dc;
color: #fff color: #fff
} }

23
src/components/themes/purple-haze/theme.css
View file

@ -58,13 +58,12 @@ html {
} }
} }
.paper-icon-button-light:hover { .paper-icon-button-light:hover:not(:disabled) {
color: rgb(12, 232, 214); color: rgb(12, 232, 214);
background-color: rgba(0,164,220, .2); background-color: rgba(0,164,220, .2);
transition: 0.2s;
} }
.paper-icon-button-light:focus { .paper-icon-button-light.show-focus:focus {
color: #ff77f1; color: #ff77f1;
} }
@ -420,27 +419,25 @@ a[data-role=button] {
color: #f8f8fe color: #f8f8fe
} }
.emby-button-focusscale:focus { .emby-button.show-focus:focus {
background: #8ae9c1; background: #8ae9c1;
color: #f8f8fe color: #f8f8fe
} }
.emby-tab-button { .emby-tab-button {
color: #999; color: #999;
color: rgba(255, 255, 255, .4)
} }
.emby-tab-button-active { .emby-tab-button-active {
color: #f8f8fe color: #f8f8fe;
} }
.emby-tab-button-active.emby-button-tv { .emby-tab-button.show-focus:focus {
color: #f8f8fe color: #ff77f1;
} }
.emby-tab-button.emby-button-tv:focus { .emby-tab-button:hover {
color: #ff77f1; color: #ff77f1;
background: 0 0
} }
.channelPrograms, .channelPrograms,
@ -494,7 +491,7 @@ a[data-role=button] {
color: #ff77f1 color: #ff77f1
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.show-focus:focus {
background-color: #48C3C8; background-color: #48C3C8;
color: #fff color: #fff
} }

20
src/components/themes/wmc/theme.css
View file

@ -64,13 +64,12 @@ html {
background: rgba(17, 98, 164, .9) background: rgba(17, 98, 164, .9)
} }
.paper-icon-button-light:hover { .paper-icon-button-light:hover:not(:disabled) {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2); background-color: rgba(0,164,220, .2);
transition: 0.2s;
} }
.paper-icon-button-light:focus { .paper-icon-button-light.show-focus:focus {
color: #00a4dc; color: #00a4dc;
} }
@ -325,24 +324,25 @@ html {
color: #fff color: #fff
} }
.emby-button-focusscale:focus { .emby-button.show-focus:focus {
background: #00a4dc; background: #00a4dc;
color: #fff color: #fff
} }
.emby-tab-button { .emby-tab-button {
color: #999; color: #999;
color: rgba(255, 255, 255, .5)
} }
.emby-tab-button-active, .emby-tab-button-active {
.emby-tab-button-active.emby-button-tv {
color: #fff color: #fff
} }
.emby-tab-button.emby-button-tv:focus { .emby-tab-button.show-focus:focus {
color: #fff;
}
.emby-tab-button:hover {
color: #fff; color: #fff;
background: 0 0
} }
.channelPrograms, .channelPrograms,
@ -397,7 +397,7 @@ html {
color: #00a4dc color: #00a4dc
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.show-focus:focus {
background-color: #00a4dc; background-color: #00a4dc;
color: #fff color: #fff
} }

3
src/css/site.css
View file

@ -70,11 +70,10 @@ div[data-role=page] {
.page, .page,
.pageWithAbsoluteTabs .pageTabContent { .pageWithAbsoluteTabs .pageTabContent {
/* provides room for the music controls */ /* provides room for the music controls */
padding-bottom: 5em !important padding-bottom: 5em !important;
} }
@media all and (min-width:50em) { @media all and (min-width:50em) {
.readOnlyContent, .readOnlyContent,
form { form {
max-width: 54em max-width: 54em

14
src/mypreferencesmenu.html
View file

@ -4,7 +4,7 @@
<div class="readOnlyContent" style="margin: 0 auto;"> <div class="readOnlyContent" style="margin: 0 auto;">
<div class="verticalSection verticalSection-extrabottompadding"> <div class="verticalSection verticalSection-extrabottompadding">
<h2 class="sectionTitle headerUsername" style="padding-left:.25em;"></h2> <h2 class="sectionTitle headerUsername" style="padding-left:.25em;"></h2>
<a is="emby-linkbutton" style="display:block; padding: 0; margin:0;" data-ripple="false" href="#" class="lnkMyProfile listItem-border"> <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkMyProfile listItem-border">
<div class="listItem"> <div class="listItem">
<i class="md-icon listItemIcon listItemIcon-transparent">person</i> <i class="md-icon listItemIcon listItemIcon-transparent">person</i>
<div class="listItemBody"> <div class="listItemBody">
@ -13,7 +13,7 @@
</div> </div>
</a> </a>
<a is="emby-linkbutton" style="display:block; padding: 0; margin:0;" data-ripple="false" href="#" class="lnkDisplayPreferences listItem-border"> <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkDisplayPreferences listItem-border">
<div class="listItem"> <div class="listItem">
<i class="md-icon listItemIcon listItemIcon-transparent">tv</i> <i class="md-icon listItemIcon listItemIcon-transparent">tv</i>
<div class="listItemBody"> <div class="listItemBody">
@ -22,7 +22,7 @@
</div> </div>
</a> </a>
<a is="emby-linkbutton" style="display:block; padding: 0; margin:0;" data-ripple="false" href="#" class="lnkHomePreferences listItem-border"> <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkHomePreferences listItem-border">
<div class="listItem"> <div class="listItem">
<i class="md-icon listItemIcon listItemIcon-transparent">home</i> <i class="md-icon listItemIcon listItemIcon-transparent">home</i>
<div class="listItemBody"> <div class="listItemBody">
@ -31,7 +31,7 @@
</div> </div>
</a> </a>
<a is="emby-linkbutton" style="display:block; padding: 0; margin:0;" data-ripple="false" href="#" class="lnkLanguagePreferences listItem-border"> <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkLanguagePreferences listItem-border">
<div class="listItem"> <div class="listItem">
<i class="md-icon listItemIcon listItemIcon-transparent">play_circle_filled</i> <i class="md-icon listItemIcon listItemIcon-transparent">play_circle_filled</i>
<div class="listItemBody"> <div class="listItemBody">
@ -40,7 +40,7 @@
</div> </div>
</a> </a>
<a is="emby-linkbutton" style="display:block; padding: 0; margin:0;" data-ripple="false" href="#" class="lnkSubtitlePreferences listItem-border"> <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkSubtitlePreferences listItem-border">
<div class="listItem"> <div class="listItem">
<i class="md-icon listItemIcon listItemIcon-transparent">closed_caption</i> <i class="md-icon listItemIcon listItemIcon-transparent">closed_caption</i>
<div class="listItemBody"> <div class="listItemBody">
@ -70,7 +70,7 @@
</div> </div>
<div class="userSection verticalSection verticalSection-extrabottompadding"> <div class="userSection verticalSection verticalSection-extrabottompadding">
<h2 class="sectionTitle" style="padding-left:.25em;">${HeaderUser}</h2> <h2 class="sectionTitle" style="padding-left:.25em;">${HeaderUser}</h2>
<a is="emby-linkbutton" style="display:block; padding: 0; margin:0;" data-ripple="false" href="selectserver.html" class="selectServer hide listItem-border"> <a is="emby-linkbutton" data-ripple="false" href="selectserver.html" class="selectServer hide listItem-border">
<div class="listItem"> <div class="listItem">
<i class="md-icon listItemIcon listItemIcon-transparent">wifi</i> <i class="md-icon listItemIcon listItemIcon-transparent">wifi</i>
<div class="listItemBody"> <div class="listItemBody">
@ -78,7 +78,7 @@
</div> </div>
</div> </div>
</a> </a>
<a is="emby-linkbutton" style="display:block; padding: 0; margin:0;" data-ripple="false" href="#" class="btnLogout listItem-border"> <a is="emby-linkbutton" data-ripple="false" href="#" class="btnLogout listItem-border">
<div class="listItem"> <div class="listItem">
<i class="md-icon listItemIcon listItemIcon-transparent">exit_to_app</i> <i class="md-icon listItemIcon listItemIcon-transparent">exit_to_app</i>
<div class="listItemBody"> <div class="listItemBody">

1
src/strings/en-us.json
View file

@ -765,6 +765,7 @@
"LabelPlayer": "Player:", "LabelPlayer": "Player:",
"LabelPlaylist": "Playlist:", "LabelPlaylist": "Playlist:",
"LabelPlayMethod": "Play method:", "LabelPlayMethod": "Play method:",
"LabelPleaseRestart": "Changes will take effect after manually reloading the web client.",
"LabelPostProcessor": "Post-processing application:", "LabelPostProcessor": "Post-processing application:",
"LabelPostProcessorArguments": "Post-processor command line arguments:", "LabelPostProcessorArguments": "Post-processor command line arguments:",
"LabelPostProcessorArgumentsHelp": "Use {path} as the path to the recording file.", "LabelPostProcessorArgumentsHelp": "Use {path} as the path to the recording file.",