mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #451 from dkanada/style
Improve button style when focused
This commit is contained in:
dkanada
GitHub
commit
09e38ca931
22 changed files with 148 additions and 194 deletions
|
|
@ -36,6 +36,7 @@
|
|||
font-weight: inherit;
|
||||
box-shadow: none;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.actionSheetMenuItem:focus {
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@
|
|||
<option value="tv">${TV}</option>
|
||||
</select>
|
||||
<div class="fieldDescription">${DisplayModeHelp}</div>
|
||||
<div class="fieldDescription">${LabelPleaseRestart}</div>
|
||||
</div>
|
||||
|
||||
<div class="selectContainer hide selectSkinContainer">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 0 .29em;
|
||||
margin: 0 0.3em;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
padding: .86em 1em;
|
||||
padding: 0.9em 1em;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: .2em;
|
||||
border-radius: 0.2em;
|
||||
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
||||
outline: none !important;
|
||||
position: relative;
|
||||
|
|
@ -29,6 +29,13 @@
|
|||
text-decoration: none;
|
||||
/* Not crazy about this but it normalizes heights between anchors and buttons */
|
||||
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 {
|
||||
|
|
@ -54,17 +61,6 @@
|
|||
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 {
|
||||
/* For non-fab buttons that have icons */
|
||||
font-size: 1.36em;
|
||||
|
|
@ -77,7 +73,7 @@
|
|||
.fab {
|
||||
display: inline-flex;
|
||||
border-radius: 50%;
|
||||
padding: .6em;
|
||||
padding: 0.6em;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -125,14 +121,22 @@
|
|||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
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 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.paper-icon-button-light[disabled] {
|
||||
opacity: .3;
|
||||
.paper-icon-button-light:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.paper-icon-button-light > i {
|
||||
|
|
@ -159,17 +163,6 @@
|
|||
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 {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -180,7 +173,6 @@
|
|||
background: #444;
|
||||
top: 0;
|
||||
right: 0;
|
||||
/* padding: .5em; */
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
z-index: 100000000;
|
||||
|
|
|
|||
|
|
@ -21,30 +21,23 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
|
|||
}
|
||||
|
||||
EmbyButtonPrototype.createdCallback = function () {
|
||||
|
||||
if (this.classList.contains('emby-button')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.add('emby-button');
|
||||
|
||||
// TODO replace all instances of element-showfocus with this method
|
||||
if (layoutManager.tv) {
|
||||
if (this.getAttribute('data-focusscale') !== 'false') {
|
||||
this.classList.add('emby-button-focusscale');
|
||||
}
|
||||
this.classList.add('emby-button-tv');
|
||||
// handles all special css for tv layout
|
||||
// this method utilizes class chaining
|
||||
this.classList.add('show-focus');
|
||||
}
|
||||
};
|
||||
|
||||
EmbyButtonPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.tagName === 'A') {
|
||||
|
||||
dom.removeEventListener(this, 'click', onAnchorClick, {
|
||||
});
|
||||
|
||||
dom.addEventListener(this, 'click', onAnchorClick, {
|
||||
});
|
||||
dom.removeEventListener(this, 'click', onAnchorClick, {});
|
||||
dom.addEventListener(this, 'click', onAnchorClick, {});
|
||||
|
||||
if (this.getAttribute('data-autohide') === 'true') {
|
||||
if (appHost.supports('externallinks')) {
|
||||
|
|
@ -57,9 +50,7 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
|
|||
};
|
||||
|
||||
EmbyButtonPrototype.detachedCallback = function () {
|
||||
|
||||
dom.removeEventListener(this, 'click', onAnchorClick, {
|
||||
});
|
||||
dom.removeEventListener(this, 'click', onAnchorClick, {});
|
||||
};
|
||||
|
||||
EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback;
|
||||
|
|
@ -75,6 +66,5 @@ define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css
|
|||
extends: 'a'
|
||||
});
|
||||
|
||||
// For extension purposes
|
||||
return EmbyButtonPrototype;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,11 +4,10 @@ define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layo
|
|||
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
|
||||
|
||||
EmbyButtonPrototype.createdCallback = function () {
|
||||
|
||||
this.classList.add('paper-icon-button-light');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
this.classList.add('icon-button-focusscale');
|
||||
this.classList.add('show-focus');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -16,4 +15,4 @@ define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layo
|
|||
prototype: EmbyButtonPrototype,
|
||||
extends: 'button'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -73,13 +73,12 @@
|
|||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
|
||||
/* background-color set by theme */
|
||||
/*background-color: #52B54B;*/
|
||||
/* background color set by theme */
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked {
|
||||
/* background-color set by theme */
|
||||
/* background color set by theme */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +93,7 @@
|
|||
|
||||
.checkboxList > .emby-checkbox-label {
|
||||
display: flex;
|
||||
margin: .5em 0;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.checkboxList-verticalwrap {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
|||
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
||||
// Don't submit form on enter
|
||||
if (e.keyCode === 13) {
|
||||
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;
|
||||
|
||||
function forceRefresh(loading) {
|
||||
|
||||
var elem = this.parentNode;
|
||||
|
||||
elem.style.webkitAnimationName = 'repaintChrome';
|
||||
|
|
@ -36,7 +34,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
|||
}
|
||||
|
||||
EmbyCheckboxPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embycheckbox') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
|
@ -68,7 +65,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
|||
this.addEventListener('keydown', onKeyDown);
|
||||
|
||||
if (enableRefreshHack) {
|
||||
|
||||
forceRefresh.call(this, true);
|
||||
dom.addEventListener(this, 'click', forceRefresh, {
|
||||
passive: true
|
||||
|
|
@ -86,7 +82,6 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
|
|||
};
|
||||
|
||||
EmbyCheckboxPrototype.detachedCallback = function () {
|
||||
|
||||
this.removeEventListener('keydown', onKeyDown);
|
||||
|
||||
dom.removeEventListener(this, 'click', forceRefresh, {
|
||||
|
|
|
|||
|
|
@ -70,8 +70,8 @@ _:-ms-input-placeholder {
|
|||
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
|
|
@ -80,11 +80,11 @@ _:-ms-input-placeholder {
|
|||
}
|
||||
|
||||
.mdl-slider-hoverthumb::-webkit-slider-thumb {
|
||||
transform: scale(.7, .7);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.mdl-slider:hover::-webkit-slider-thumb {
|
||||
transform: none;
|
||||
transform: scale(1.6);
|
||||
}
|
||||
|
||||
.slider-no-webkit-thumb::-webkit-slider-thumb {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
background: transparent;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
outline: none !important;
|
||||
outline: none;
|
||||
width: auto;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
|
@ -10,36 +10,25 @@
|
|||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
padding: 1em .9em;
|
||||
padding: 1em 0.9em;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-width: initial;
|
||||
line-height: initial;
|
||||
border-radius: 0 !important;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/*.emby-tab-button-active {
|
||||
color: #52B54B;
|
||||
.emby-tab-button.show-focus:focus {
|
||||
/* 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 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.emby-tab-button-ripple-effect {
|
||||
background: rgba(0,0,0,.7) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tabContent:not(.is-active) {
|
||||
|
|
|
|||
|
|
@ -424,7 +424,7 @@
|
|||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-button-tv:focus {
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
border-radius: .15em !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<option value="horizontal">${Horizontal}</option>
|
||||
<option value="vertical">${Vertical}</option>
|
||||
</select>
|
||||
<div class="fieldDescription">Changes take effect after signing out or restarting the app.</div>
|
||||
<div class="fieldDescription">${LabelPleaseRestart}</div>
|
||||
</div>
|
||||
|
||||
<div class="selectContainer">
|
||||
|
|
|
|||
|
|
@ -39,8 +39,16 @@
|
|||
}
|
||||
|
||||
.listItem-border {
|
||||
border-bottom-width: .1em;
|
||||
border-bottom-style: solid;
|
||||
display: block;
|
||||
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 {
|
||||
|
|
@ -126,21 +134,20 @@
|
|||
}
|
||||
|
||||
.listItemImageButton:hover {
|
||||
transform: scale(1.2, 1.2);
|
||||
transform: scale(1.2, 1.2);
|
||||
}
|
||||
|
||||
.listItemImageButton-icon {
|
||||
background: rgba(0,0,0,.4);
|
||||
border: .08em solid currentColor;
|
||||
border: 0.1em solid currentColor;
|
||||
border-radius: 100em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: .21em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
@media all and (max-width: 64em) {
|
||||
|
||||
.listItemImage-large {
|
||||
width: 33.75vw;
|
||||
height: 22.5vw;
|
||||
|
|
@ -148,7 +155,7 @@
|
|||
}
|
||||
|
||||
.listItemImageButton {
|
||||
font-size: 1.02em !important;
|
||||
font-size: 1em !important;
|
||||
}
|
||||
|
||||
.listItemBody {
|
||||
|
|
@ -157,7 +164,6 @@
|
|||
}
|
||||
|
||||
@media all and (max-width: 50em) {
|
||||
|
||||
.listItemBody {
|
||||
padding-right: .5em;
|
||||
}
|
||||
|
|
@ -245,14 +251,12 @@
|
|||
}
|
||||
|
||||
@media all and (max-width: 50em) {
|
||||
|
||||
.listItem .endsAt, .listItem .criticRating, .listItem-overview {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 50em) {
|
||||
|
||||
.listItem-bottomoverview {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,13 +71,12 @@ html {
|
|||
background: #f0f0f0
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: #00a4dc;
|
||||
background-color: rgba(0,164,220, .2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus {
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
|
|
@ -341,24 +340,25 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.emby-button-focusscale:focus {
|
||||
.emby-button.show-focus:focus {
|
||||
background: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
color: #999;
|
||||
color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
.emby-tab-button-active,
|
||||
.emby-tab-button-active.emby-button-tv {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button.emby-button-tv:focus {
|
||||
.emby-tab-button-active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emby-tab-button.show-focus:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
color: #fff;
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.channelPrograms,
|
||||
|
|
@ -413,7 +413,7 @@ html {
|
|||
color: #00a4dc
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-button-tv:focus {
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
background-color: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,13 +58,12 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: #00a4dc;
|
||||
background-color: rgba(0,164,220, .2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus {
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
|
|
@ -327,27 +326,25 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.emby-button-focusscale:focus {
|
||||
.emby-button.show-focus:focus {
|
||||
background: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
color: #999;
|
||||
color: rgba(255, 255, 255, .4)
|
||||
}
|
||||
|
||||
.emby-tab-button-active {
|
||||
color: #00a4dc
|
||||
}
|
||||
|
||||
.emby-tab-button-active.emby-button-tv {
|
||||
color: #fff
|
||||
.emby-tab-button.show-focus:focus {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.emby-tab-button.emby-button-tv:focus {
|
||||
.emby-tab-button:hover {
|
||||
color: #00a4dc;
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.channelPrograms,
|
||||
|
|
@ -401,7 +398,7 @@ html {
|
|||
color: #00a4dc
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-button-tv:focus {
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
background-color: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,13 +39,12 @@ html {
|
|||
background-color: rgba(0, 0, 0, .86)
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: #00a4dc;
|
||||
background-color: rgba(0,164,220, .2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus {
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
|
|
@ -304,28 +303,25 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.emby-button-focusscale:focus {
|
||||
.emby-button.show-focus:focus {
|
||||
background: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
color: #999;
|
||||
color: rgba(255, 255, 255, .4)
|
||||
}
|
||||
|
||||
.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;
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.emby-tab-button.show-focus:focus {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.channelPrograms,
|
||||
|
|
@ -379,7 +375,7 @@ html {
|
|||
color: #00a4dc
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-button-tv:focus {
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
background-color: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,13 +39,12 @@ html {
|
|||
background-color: rgba(0, 0, 0, .86)
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: #52b54b;
|
||||
background-color: rgba(82, 181, 75, .2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus {
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
color: #52b54b;
|
||||
}
|
||||
|
||||
|
|
@ -304,27 +303,25 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.emby-button-focusscale:focus {
|
||||
.emby-button.show-focus:focus {
|
||||
background: #52b54b;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
color: #999;
|
||||
color: rgba(255, 255, 255, .4)
|
||||
}
|
||||
|
||||
.emby-tab-button-active {
|
||||
color: #52b54b
|
||||
}
|
||||
|
||||
.emby-tab-button-active.emby-button-tv {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button.emby-button-tv:focus {
|
||||
color: #52b54b;
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.emby-tab-button.show-focus:focus {
|
||||
color: #52b54b;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
color: #52b54b;
|
||||
}
|
||||
|
||||
.channelPrograms,
|
||||
|
|
@ -378,7 +375,7 @@ html {
|
|||
color: #52b54b
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-button-tv:focus {
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
background-color: #52b54b;
|
||||
color: #fff
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,13 +55,12 @@ html {
|
|||
background-color: #f0f0f0
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: #00a4dc;
|
||||
background-color: rgba(0,164,220, .2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus {
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
|
|
@ -323,27 +322,25 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.emby-button-focusscale:focus {
|
||||
.emby-button.show-focus:focus {
|
||||
background: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
color: #999;
|
||||
color: rgba(255, 255, 255, .5)
|
||||
}
|
||||
|
||||
.emby-tab-button-active {
|
||||
color: #00a4dc
|
||||
}
|
||||
|
||||
.emby-tab-button-active.emby-button-tv {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button.emby-button-tv:focus {
|
||||
color: #00a4dc;
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.emby-tab-button.show-focus:focus {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.channelPrograms,
|
||||
|
|
@ -397,7 +394,7 @@ html {
|
|||
color: #00a4dc
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-button-tv:focus {
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
background-color: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,13 +58,12 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: rgb(12, 232, 214);
|
||||
background-color: rgba(0,164,220, .2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus {
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
color: #ff77f1;
|
||||
}
|
||||
|
||||
|
|
@ -420,27 +419,25 @@ a[data-role=button] {
|
|||
color: #f8f8fe
|
||||
}
|
||||
|
||||
.emby-button-focusscale:focus {
|
||||
.emby-button.show-focus:focus {
|
||||
background: #8ae9c1;
|
||||
color: #f8f8fe
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
color: #999;
|
||||
color: rgba(255, 255, 255, .4)
|
||||
}
|
||||
|
||||
.emby-tab-button-active {
|
||||
color: #f8f8fe
|
||||
color: #f8f8fe;
|
||||
}
|
||||
|
||||
.emby-tab-button-active.emby-button-tv {
|
||||
color: #f8f8fe
|
||||
}
|
||||
|
||||
.emby-tab-button.emby-button-tv:focus {
|
||||
.emby-tab-button.show-focus:focus {
|
||||
color: #ff77f1;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
color: #ff77f1;
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.channelPrograms,
|
||||
|
|
@ -494,7 +491,7 @@ a[data-role=button] {
|
|||
color: #ff77f1
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-button-tv:focus {
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
background-color: #48C3C8;
|
||||
color: #fff
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,13 +64,12 @@ html {
|
|||
background: rgba(17, 98, 164, .9)
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
.paper-icon-button-light:hover:not(:disabled) {
|
||||
color: #00a4dc;
|
||||
background-color: rgba(0,164,220, .2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus {
|
||||
.paper-icon-button-light.show-focus:focus {
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
|
|
@ -325,24 +324,25 @@ html {
|
|||
color: #fff
|
||||
}
|
||||
|
||||
.emby-button-focusscale:focus {
|
||||
.emby-button.show-focus:focus {
|
||||
background: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button {
|
||||
color: #999;
|
||||
color: rgba(255, 255, 255, .5)
|
||||
}
|
||||
|
||||
.emby-tab-button-active,
|
||||
.emby-tab-button-active.emby-button-tv {
|
||||
.emby-tab-button-active {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.emby-tab-button.emby-button-tv:focus {
|
||||
.emby-tab-button.show-focus:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.emby-tab-button:hover {
|
||||
color: #fff;
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
.channelPrograms,
|
||||
|
|
@ -397,7 +397,7 @@ html {
|
|||
color: #00a4dc
|
||||
}
|
||||
|
||||
.guide-date-tab-button.emby-button-tv:focus {
|
||||
.guide-date-tab-button.show-focus:focus {
|
||||
background-color: #00a4dc;
|
||||
color: #fff
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,11 +70,10 @@ div[data-role=page] {
|
|||
.page,
|
||||
.pageWithAbsoluteTabs .pageTabContent {
|
||||
/* provides room for the music controls */
|
||||
padding-bottom: 5em !important
|
||||
padding-bottom: 5em !important;
|
||||
}
|
||||
|
||||
@media all and (min-width:50em) {
|
||||
|
||||
.readOnlyContent,
|
||||
form {
|
||||
max-width: 54em
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="readOnlyContent" style="margin: 0 auto;">
|
||||
<div class="verticalSection verticalSection-extrabottompadding">
|
||||
<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">
|
||||
<i class="md-icon listItemIcon listItemIcon-transparent">person</i>
|
||||
<div class="listItemBody">
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
</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">
|
||||
<i class="md-icon listItemIcon listItemIcon-transparent">tv</i>
|
||||
<div class="listItemBody">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</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">
|
||||
<i class="md-icon listItemIcon listItemIcon-transparent">home</i>
|
||||
<div class="listItemBody">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
</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">
|
||||
<i class="md-icon listItemIcon listItemIcon-transparent">play_circle_filled</i>
|
||||
<div class="listItemBody">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
</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">
|
||||
<i class="md-icon listItemIcon listItemIcon-transparent">closed_caption</i>
|
||||
<div class="listItemBody">
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
</div>
|
||||
<div class="userSection verticalSection verticalSection-extrabottompadding">
|
||||
<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">
|
||||
<i class="md-icon listItemIcon listItemIcon-transparent">wifi</i>
|
||||
<div class="listItemBody">
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<i class="md-icon listItemIcon listItemIcon-transparent">exit_to_app</i>
|
||||
<div class="listItemBody">
|
||||
|
|
|
|||
|
|
@ -765,6 +765,7 @@
|
|||
"LabelPlayer": "Player:",
|
||||
"LabelPlaylist": "Playlist:",
|
||||
"LabelPlayMethod": "Play method:",
|
||||
"LabelPleaseRestart": "Changes will take effect after manually reloading the web client.",
|
||||
"LabelPostProcessor": "Post-processing application:",
|
||||
"LabelPostProcessorArguments": "Post-processor command line arguments:",
|
||||
"LabelPostProcessorArgumentsHelp": "Use {path} as the path to the recording file.",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue