mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #709 from MrTimscampi/browserslist-lint
Add CSS linting and enforce style
This commit is contained in:
dkanada
GitHub
commit
3ce568eac8
72 changed files with 4284 additions and 2010 deletions
|
|
@ -57,3 +57,7 @@ jobs:
|
||||||
|
|
||||||
- script: 'yarn run lint'
|
- script: 'yarn run lint'
|
||||||
displayName: 'Run ESLint'
|
displayName: 'Run ESLint'
|
||||||
|
|
||||||
|
- script: |
|
||||||
|
yarn run stylelint
|
||||||
|
displayName: 'Run stylelint'
|
||||||
|
|
|
||||||
143
.stylelintrc
Normal file
143
.stylelintrc
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
{
|
||||||
|
"plugins": [
|
||||||
|
"stylelint-no-browser-hacks/lib",
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"at-rule-empty-line-before": [ "always", {
|
||||||
|
except: [
|
||||||
|
"blockless-after-same-name-blockless",
|
||||||
|
"first-nested",
|
||||||
|
],
|
||||||
|
ignore: ["after-comment"],
|
||||||
|
} ],
|
||||||
|
"at-rule-name-case": "lower",
|
||||||
|
"at-rule-name-space-after": "always-single-line",
|
||||||
|
"at-rule-no-unknown": true,
|
||||||
|
"at-rule-semicolon-newline-after": "always",
|
||||||
|
"block-closing-brace-empty-line-before": "never",
|
||||||
|
"block-closing-brace-newline-after": "always",
|
||||||
|
"block-closing-brace-newline-before": "always-multi-line",
|
||||||
|
"block-closing-brace-space-before": "always-single-line",
|
||||||
|
"block-no-empty": true,
|
||||||
|
"block-opening-brace-newline-after": "always-multi-line",
|
||||||
|
"block-opening-brace-space-after": "always-single-line",
|
||||||
|
"block-opening-brace-space-before": "always",
|
||||||
|
"color-hex-case": "lower",
|
||||||
|
"color-hex-length": "short",
|
||||||
|
"color-no-invalid-hex": true,
|
||||||
|
"comment-empty-line-before": [ "always", {
|
||||||
|
except: ["first-nested"],
|
||||||
|
ignore: ["stylelint-commands"],
|
||||||
|
} ],
|
||||||
|
"comment-no-empty": true,
|
||||||
|
"comment-whitespace-inside": "always",
|
||||||
|
"custom-property-empty-line-before": [ "always", {
|
||||||
|
except: [
|
||||||
|
"after-custom-property",
|
||||||
|
"first-nested",
|
||||||
|
],
|
||||||
|
ignore: [
|
||||||
|
"after-comment",
|
||||||
|
"inside-single-line-block",
|
||||||
|
],
|
||||||
|
} ],
|
||||||
|
"declaration-bang-space-after": "never",
|
||||||
|
"declaration-bang-space-before": "always",
|
||||||
|
"declaration-block-no-duplicate-properties": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
ignore: ["consecutive-duplicates-with-different-values"]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"declaration-block-no-shorthand-property-overrides": true,
|
||||||
|
"declaration-block-semicolon-newline-after": "always-multi-line",
|
||||||
|
"declaration-block-semicolon-space-after": "always-single-line",
|
||||||
|
"declaration-block-semicolon-space-before": "never",
|
||||||
|
"declaration-block-single-line-max-declarations": 1,
|
||||||
|
"declaration-block-trailing-semicolon": "always",
|
||||||
|
"declaration-colon-newline-after": "always-multi-line",
|
||||||
|
"declaration-colon-space-after": "always-single-line",
|
||||||
|
"declaration-colon-space-before": "never",
|
||||||
|
"font-family-no-duplicate-names": true,
|
||||||
|
"function-calc-no-invalid": true,
|
||||||
|
"function-calc-no-unspaced-operator": true,
|
||||||
|
"function-comma-newline-after": "always-multi-line",
|
||||||
|
"function-comma-space-after": "always-single-line",
|
||||||
|
"function-comma-space-before": "never",
|
||||||
|
"function-linear-gradient-no-nonstandard-direction": true,
|
||||||
|
"function-max-empty-lines": 0,
|
||||||
|
"function-name-case": "lower",
|
||||||
|
"function-parentheses-newline-inside": "always-multi-line",
|
||||||
|
"function-parentheses-space-inside": "never-single-line",
|
||||||
|
"function-whitespace-after": "always",
|
||||||
|
"indentation": 4,
|
||||||
|
"keyframe-declaration-no-important": true,
|
||||||
|
"length-zero-no-unit": true,
|
||||||
|
"max-empty-lines": 1,
|
||||||
|
"media-feature-colon-space-after": "always",
|
||||||
|
"media-feature-colon-space-before": "never",
|
||||||
|
"media-feature-name-case": "lower",
|
||||||
|
"media-feature-name-no-unknown": true,
|
||||||
|
"media-feature-parentheses-space-inside": "never",
|
||||||
|
"media-feature-range-operator-space-after": "always",
|
||||||
|
"media-feature-range-operator-space-before": "always",
|
||||||
|
"media-query-list-comma-newline-after": "always-multi-line",
|
||||||
|
"media-query-list-comma-space-after": "always-single-line",
|
||||||
|
"media-query-list-comma-space-before": "never",
|
||||||
|
"no-descending-specificity": true,
|
||||||
|
"no-duplicate-at-import-rules": true,
|
||||||
|
"no-duplicate-selectors": true,
|
||||||
|
"no-empty-source": true,
|
||||||
|
"no-eol-whitespace": true,
|
||||||
|
"no-extra-semicolons": true,
|
||||||
|
"no-invalid-double-slash-comments": true,
|
||||||
|
"no-missing-end-of-source-newline": true,
|
||||||
|
"number-leading-zero": "always",
|
||||||
|
"number-no-trailing-zeros": true,
|
||||||
|
"plugin/no-browser-hacks": true,
|
||||||
|
"property-case": "lower",
|
||||||
|
"property-no-unknown": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"ignoreProperties": [
|
||||||
|
"user-drag"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"rule-empty-line-before": [ "always-multi-line", {
|
||||||
|
except: ["first-nested"],
|
||||||
|
ignore: ["after-comment"],
|
||||||
|
} ],
|
||||||
|
"selector-attribute-brackets-space-inside": "never",
|
||||||
|
"selector-attribute-operator-space-after": "never",
|
||||||
|
"selector-attribute-operator-space-before": "never",
|
||||||
|
"selector-combinator-space-after": "always",
|
||||||
|
"selector-combinator-space-before": "always",
|
||||||
|
"selector-descendant-combinator-no-non-space": true,
|
||||||
|
"selector-list-comma-newline-after": "always",
|
||||||
|
"selector-list-comma-space-before": "never",
|
||||||
|
"selector-max-empty-lines": 0,
|
||||||
|
"selector-pseudo-class-case": "lower",
|
||||||
|
"selector-pseudo-class-no-unknown": true,
|
||||||
|
"selector-pseudo-class-parentheses-space-inside": "never",
|
||||||
|
"selector-pseudo-element-case": "lower",
|
||||||
|
"selector-pseudo-element-colon-notation": "double",
|
||||||
|
"selector-pseudo-element-no-unknown": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"ignorePseudoElements": [
|
||||||
|
"cue"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"selector-type-case": "lower",
|
||||||
|
"selector-type-no-unknown": true,
|
||||||
|
"string-no-newline": true,
|
||||||
|
"unit-case": "lower",
|
||||||
|
"unit-no-unknown": true,
|
||||||
|
"value-list-comma-newline-after": "always-multi-line",
|
||||||
|
"value-list-comma-space-after": "always-single-line",
|
||||||
|
"value-list-comma-space-before": "never",
|
||||||
|
"value-list-max-empty-lines": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -12,6 +12,10 @@
|
||||||
"file-loader": "^3.0.1",
|
"file-loader": "^3.0.1",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^3.2.0",
|
||||||
"style-loader": "^0.23.1",
|
"style-loader": "^0.23.1",
|
||||||
|
"stylelint": "^13.0.0",
|
||||||
|
"stylelint-config-rational-order": "^0.1.2",
|
||||||
|
"stylelint-no-browser-hacks": "^1.2.1",
|
||||||
|
"stylelint-order": "^4.0.0",
|
||||||
"webpack": "^4.41.0",
|
"webpack": "^4.41.0",
|
||||||
"webpack-cli": "^3.3.9",
|
"webpack-cli": "^3.3.9",
|
||||||
"webpack-concat-plugin": "^3.0.0",
|
"webpack-concat-plugin": "^3.0.0",
|
||||||
|
|
@ -26,6 +30,7 @@
|
||||||
"howler": "^2.1.2",
|
"howler": "^2.1.2",
|
||||||
"jquery": "^3.4.1",
|
"jquery": "^3.4.1",
|
||||||
"jstree": "^3.3.7",
|
"jstree": "^3.3.7",
|
||||||
|
"libass-wasm": "^2.1.1",
|
||||||
"libjass": "^0.11.0",
|
"libjass": "^0.11.0",
|
||||||
"native-promise-only": "^0.8.0-a",
|
"native-promise-only": "^0.8.0-a",
|
||||||
"requirejs": "^2.3.5",
|
"requirejs": "^2.3.5",
|
||||||
|
|
@ -33,7 +38,6 @@
|
||||||
"shaka-player": "^2.5.5",
|
"shaka-player": "^2.5.5",
|
||||||
"sortablejs": "^1.9.0",
|
"sortablejs": "^1.9.0",
|
||||||
"swiper": "^3.4.2",
|
"swiper": "^3.4.2",
|
||||||
"libass-wasm": "^2.1.1",
|
|
||||||
"webcomponents.js": "^0.7.24",
|
"webcomponents.js": "^0.7.24",
|
||||||
"whatwg-fetch": "^1.1.1"
|
"whatwg-fetch": "^1.1.1"
|
||||||
},
|
},
|
||||||
|
|
@ -49,13 +53,13 @@
|
||||||
"Chrome 53",
|
"Chrome 53",
|
||||||
"Chrome 56",
|
"Chrome 56",
|
||||||
"Chrome 63",
|
"Chrome 63",
|
||||||
"Explorer 11",
|
|
||||||
"Firefox ESR"
|
"Firefox ESR"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "webpack-dev-server --config webpack.dev.js --open",
|
"serve": "webpack-dev-server --config webpack.dev.js --open",
|
||||||
"build": "webpack --config webpack.prod.js",
|
"build": "webpack --config webpack.prod.js",
|
||||||
"lint": "eslint \"src\"",
|
"lint": "eslint \"src\"",
|
||||||
|
"stylelint": "stylelint src/**/*.css",
|
||||||
"prepare": "webpack --config webpack.prod.js"
|
"prepare": "webpack --config webpack.prod.js"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,16 @@
|
||||||
.dashboardSections {
|
.dashboardSections {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-box-direction: normal
|
-webkit-box-direction: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardFooter {
|
.dashboardFooter {
|
||||||
margin-top: 3.5em;
|
margin-top: 3.5em;
|
||||||
text-align: center
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardFooter a {
|
.dashboardFooter a {
|
||||||
margin: 0 .7em
|
margin: 0 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
|
|
@ -19,59 +19,74 @@ progress {
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #ccc !important
|
background: #ccc !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress[role]:after {
|
progress[role]::after {
|
||||||
background-image: none
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-bar {
|
progress::-webkit-progress-bar {
|
||||||
background: #ccc
|
background: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-moz-progress-bar {
|
progress::-moz-progress-bar {
|
||||||
background-color: #00a4dc
|
background-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-value {
|
progress::-webkit-progress-value {
|
||||||
background-color: #00a4dc
|
background-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress[aria-valuenow]:before {
|
progress[aria-valuenow]::before {
|
||||||
border-radius: .4em;
|
border-radius: 0.4em;
|
||||||
background-color: #00a4dc
|
background-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.localnav {
|
.localnav {
|
||||||
margin-bottom: 2.2em !important
|
margin-bottom: 2.2em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
|
.type-interior > div[data-role=content],
|
||||||
.type-interior>.ui-panel-content-wrap>div[data-role=content],
|
.type-interior > .ui-panel-content-wrap > div[data-role=content] {
|
||||||
.type-interior>div[data-role=content] {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
overflow: hidden
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardDocument .dashboardEntryHeaderButton,
|
.dashboardDocument .dashboardEntryHeaderButton,
|
||||||
.dashboardDocument .lnkManageServer {
|
.dashboardDocument .lnkManageServer {
|
||||||
display: none !important
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.adminDrawerLogo {
|
.adminDrawerLogo {
|
||||||
padding: 1.5em 1em 1.2em;
|
padding: 1.5em 1em 1.2em;
|
||||||
border-bottom: 1px solid #e0e0e0;
|
border-bottom: 1px solid #e0e0e0;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
display: block
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.adminDrawerLogo img {
|
.adminDrawerLogo img {
|
||||||
height: 4em
|
height: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[data-role=button] {
|
||||||
|
background: #292929 !important;
|
||||||
|
background-clip: padding-box;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-webkit-background-clip: padding-box;
|
||||||
|
cursor: pointer !important;
|
||||||
|
font-family: inherit !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
margin: 0 0.25em !important;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.8em 1em;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=controlgroup] a[data-role=button] {
|
div[data-role=controlgroup] a[data-role=button] {
|
||||||
|
|
@ -80,70 +95,88 @@ div[data-role=controlgroup] a[data-role=button] {
|
||||||
-webkit-box-shadow: none !important;
|
-webkit-box-shadow: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
-webkit-border-radius: 0;
|
-webkit-border-radius: 0;
|
||||||
border-radius: 0
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=controlgroup] a[data-role=button]:first-child {
|
div[data-role=controlgroup] a[data-role=button]:first-child {
|
||||||
-webkit-border-bottom-left-radius: .3125em;
|
-webkit-border-bottom-left-radius: 0.3125em;
|
||||||
border-bottom-left-radius: .3125em;
|
border-bottom-left-radius: 0.3125em;
|
||||||
-webkit-border-top-left-radius: .3125em;
|
-webkit-border-top-left-radius: 0.3125em;
|
||||||
border-top-left-radius: .3125em
|
border-top-left-radius: 0.3125em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=controlgroup] a[data-role=button]:last-child {
|
div[data-role=controlgroup] a[data-role=button]:last-child {
|
||||||
-webkit-border-bottom-right-radius: .3125em;
|
-webkit-border-bottom-right-radius: 0.3125em;
|
||||||
border-bottom-right-radius: .3125em;
|
border-bottom-right-radius: 0.3125em;
|
||||||
-webkit-border-top-right-radius: .3125em;
|
-webkit-border-top-right-radius: 0.3125em;
|
||||||
border-top-right-radius: .3125em
|
border-top-right-radius: 0.3125em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
|
div[data-role=controlgroup] a[data-role=button] + a[data-role=button] {
|
||||||
border-left-width: 0 !important;
|
border-left-width: 0 !important;
|
||||||
margin: 0 0 0 -.4em !important
|
margin: 0 0 0 -0.4em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=controlgroup] a.ui-btn-active {
|
div[data-role=controlgroup] a.ui-btn-active {
|
||||||
background: #00a4dc !important;
|
background: #00a4dc !important;
|
||||||
color: #292929 !important
|
color: #292929 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionAppInfo img {
|
||||||
|
max-width: 40px;
|
||||||
|
max-height: 40px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appLinks img {
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizardContent h2 img {
|
||||||
|
height: 2.5em;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
position: relative;
|
||||||
|
top: -0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .imageLink {
|
.header .imageLink {
|
||||||
display: inline-block
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .imageLink img {
|
.header .imageLink img {
|
||||||
height: 2.1em;
|
height: 2.1em;
|
||||||
vertical-align: middle
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-primary {
|
.content-primary {
|
||||||
padding-top: 6em;
|
padding-top: 6em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
padding-left: 1em
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.withTabs .content-primary {
|
.withTabs .content-primary {
|
||||||
padding-top: 9em !important
|
padding-top: 9em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:40em) {
|
@media all and (min-width: 40em) {
|
||||||
.content-primary {
|
.content-primary {
|
||||||
padding-top: 7em
|
padding-top: 7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.withTabs .content-primary {
|
.withTabs .content-primary {
|
||||||
padding-top: 10em !important
|
padding-top: 10em !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:84em) {
|
@media all and (min-width: 84em) {
|
||||||
.withTabs .content-primary {
|
.withTabs .content-primary {
|
||||||
padding-top: 7em !important
|
padding-top: 7em !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-primary ul:first-child {
|
.content-primary ul:first-child {
|
||||||
margin-top: 0
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardSections {
|
.dashboardSections {
|
||||||
|
|
@ -151,7 +184,7 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
flex-direction: column
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboardColumn {
|
.dashboardColumn {
|
||||||
|
|
@ -164,136 +197,7 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1
|
flex-grow: 1;
|
||||||
}
|
|
||||||
|
|
||||||
.activeSession:not(.playingSession) .sessionNowPlayingContent {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboardSection {
|
|
||||||
-webkit-flex-shrink: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 0 0 2em
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboardSection h3 {
|
|
||||||
margin-top: .5em;
|
|
||||||
margin-bottom: .5em
|
|
||||||
}
|
|
||||||
|
|
||||||
.activeRecordingItems>.card {
|
|
||||||
width: 50%
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width:70em) {
|
|
||||||
.dashboardSections {
|
|
||||||
-webkit-flex-wrap: wrap;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-webkit-flex-direction: row;
|
|
||||||
flex-direction: row
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboardColumn-2-60 {
|
|
||||||
width: 46%
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboardColumn-2-40 {
|
|
||||||
width: 27%
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboardSection {
|
|
||||||
padding: 0 1.5em
|
|
||||||
}
|
|
||||||
|
|
||||||
.activeRecordingItems>.card {
|
|
||||||
width: 25%
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.premiumBanner img {
|
|
||||||
position: absolute;
|
|
||||||
text-align: right;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 4.4em;
|
|
||||||
height: 4.4em
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizardContent {
|
|
||||||
max-width: 62em;
|
|
||||||
padding: .5em 2em 1em;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: #fff
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizardNavigation {
|
|
||||||
text-align: right
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizardContent form {
|
|
||||||
max-width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizardContent h2 img {
|
|
||||||
height: 2.5em;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: .5em;
|
|
||||||
position: relative;
|
|
||||||
top: -.3em
|
|
||||||
}
|
|
||||||
|
|
||||||
.scheduledTaskPaperIconItem {
|
|
||||||
outline: 0 !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.activeSession {
|
|
||||||
width: 100% !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.activitylogUserPhoto {
|
|
||||||
height:1.71em;
|
|
||||||
width:1.71em;
|
|
||||||
border-radius:100%;
|
|
||||||
margin-right:.5em;
|
|
||||||
background-size:cover;
|
|
||||||
background-repeat:no-repeat;
|
|
||||||
background-position:center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width:40em) {
|
|
||||||
.activeSession {
|
|
||||||
width: 100% !important
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
|
||||||
.activeSession {
|
|
||||||
width: 50% !important
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionCardFooter {
|
|
||||||
padding-top: .5em !important;
|
|
||||||
padding-bottom: 1em !important;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
text-align: center;
|
|
||||||
position: relative
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionAppInfo {
|
|
||||||
padding: 0.5em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionCardButtons {
|
|
||||||
min-height: 2.7em
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionCardButton {
|
|
||||||
margin: 0
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionNowPlayingContent {
|
.sessionNowPlayingContent {
|
||||||
|
|
@ -305,7 +209,119 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeSession:not(.playingSession) .sessionNowPlayingContent {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboardSection {
|
||||||
|
-webkit-flex-shrink: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0 0 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboardSection h3 {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeRecordingItems > .card {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 70em) {
|
||||||
|
.dashboardSections {
|
||||||
|
-webkit-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboardColumn-2-60 {
|
||||||
|
width: 46%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboardColumn-2-40 {
|
||||||
|
width: 27%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboardSection {
|
||||||
|
padding: 0 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeRecordingItems > .card {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizardContent {
|
||||||
|
max-width: 62em;
|
||||||
|
padding: 0.5em 2em 1em;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizardNavigation {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizardContent form {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scheduledTaskPaperIconItem {
|
||||||
|
outline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeSession {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activitylogUserPhoto {
|
||||||
|
height: 1.71em;
|
||||||
|
width: 1.71em;
|
||||||
|
border-radius: 100%;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 40em) {
|
||||||
|
.activeSession {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 50em) {
|
||||||
|
.activeSession {
|
||||||
|
width: 50% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionCardFooter {
|
||||||
|
padding-top: 0.5em !important;
|
||||||
|
padding-bottom: 1em !important;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionAppInfo {
|
||||||
|
padding: 0.5em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionCardButtons {
|
||||||
|
min-height: 2.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sessionCardButton {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionNowPlayingInnerContent {
|
.sessionNowPlayingInnerContent {
|
||||||
|
|
@ -314,23 +330,23 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
font-weight: 400
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionNowPlayingContent-withbackground+.sessionNowPlayingInnerContent {
|
.sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background: rgba(0, 0, 0, .7)
|
background: rgba(0, 0, 0, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionAppName {
|
.sessionAppName {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
max-width: 200px
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionNowPlayingDetails {
|
.sessionNowPlayingDetails {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -340,12 +356,6 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
padding: 0.8em 0.5em;
|
padding: 0.8em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sessionAppInfo img {
|
|
||||||
max-width: 40px;
|
|
||||||
max-height: 40px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sessionNowPlayingTime {
|
.sessionNowPlayingTime {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
|
@ -357,6 +367,13 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.playbackProgress,
|
||||||
|
.transcodingProgress {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
.activeSession .playbackProgress,
|
.activeSession .playbackProgress,
|
||||||
.activeSession .transcodingProgress {
|
.activeSession .transcodingProgress {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -367,13 +384,6 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playbackProgress,
|
|
||||||
.transcodingProgress {
|
|
||||||
margin: 0px;
|
|
||||||
width: 100%;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playbackProgress > div {
|
.playbackProgress > div {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
|
|
@ -383,90 +393,70 @@ div[data-role=controlgroup] a.ui-btn-active {
|
||||||
background-color: #dd4919;
|
background-color: #dd4919;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:34.375em) {
|
@media all and (max-width: 34.375em) {
|
||||||
.sessionAppName {
|
.sessionAppName {
|
||||||
max-width: 160px
|
max-width: 160px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:31.25em) {
|
@media all and (max-width: 31.25em) {
|
||||||
.sessionAppName {
|
.sessionAppName {
|
||||||
max-width: 150px
|
max-width: 150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabledUser {
|
.disabledUser {
|
||||||
-webkit-filter: grayscale(100%);
|
-webkit-filter: grayscale(100%);
|
||||||
filter: grayscale(100%)
|
filter: grayscale(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabledUserBanner {
|
.disabledUserBanner {
|
||||||
margin: 0 0 2em
|
margin: 0 0 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appLinks a {
|
.appLinks a {
|
||||||
text-decoration: none !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.appLinks a+a {
|
|
||||||
margin-left: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.appLinks img {
|
|
||||||
height: 36px
|
|
||||||
}
|
|
||||||
|
|
||||||
a[data-role=button] {
|
|
||||||
background-clip: padding-box;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
cursor: pointer !important;
|
|
||||||
font-family: inherit !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
margin: 0 .25em !important;
|
|
||||||
display: inline-block;
|
|
||||||
padding: .8em 1em;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
background: #292929 !important;
|
}
|
||||||
|
|
||||||
|
.appLinks a + a {
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes rotating {
|
@-webkit-keyframes rotating {
|
||||||
from {
|
from {
|
||||||
-webkit-transform: rotate(0);
|
-webkit-transform: rotate(0);
|
||||||
transform: rotate(0)
|
transform: rotate(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
transform: rotate(360deg)
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rotating {
|
@keyframes rotating {
|
||||||
from {
|
from {
|
||||||
-webkit-transform: rotate(0);
|
-webkit-transform: rotate(0);
|
||||||
transform: rotate(0)
|
transform: rotate(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
transform: rotate(360deg)
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.rotatingCircle {
|
.rotatingCircle {
|
||||||
-webkit-animation: rotating 2s linear infinite;
|
-webkit-animation: rotating 2s linear infinite;
|
||||||
animation: rotating 2s linear infinite
|
animation: rotating 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pluginPreviewImg {
|
.pluginPreviewImg {
|
||||||
-webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
|
-webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||||
box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
|
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-bar-a{
|
.ui-bar-a {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
.detailTableBodyCell,
|
.detailTableBodyCell,
|
||||||
.detailTableHeaderCell {
|
.detailTableHeaderCell {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
padding: .4em
|
padding: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTable {
|
.detailTable {
|
||||||
|
|
@ -9,11 +9,11 @@
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTableHeaderCell {
|
.detailTableHeaderCell {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
vertical-align: top
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
@ -1,14 +1,13 @@
|
||||||
html {
|
html {
|
||||||
font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
|
font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 93%;
|
font-size: 93%;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
text-size-adjust: 100%;
|
text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
/* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */
|
/* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */
|
||||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
html {
|
html {
|
||||||
font-size: 82% !important
|
font-size: 82% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogFooter {
|
.formDialogFooter {
|
||||||
position: static !important;
|
position: static !important;
|
||||||
margin: 0 -1em !important
|
margin: 0 -1em !important;
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,9 +1,9 @@
|
||||||
.guideVerticalScroller {
|
.guideVerticalScroller {
|
||||||
padding-bottom: 15em
|
padding-bottom: 15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:62.5em) {
|
@media all and (min-width: 62.5em) {
|
||||||
#guideTab {
|
#guideTab {
|
||||||
padding-left: .5em
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,29 +1,29 @@
|
||||||
.editPageSidebar {
|
.editPageSidebar {
|
||||||
display: block
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editPageSidebar-withcontent {
|
.editPageSidebar-withcontent {
|
||||||
display: none
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryTree {
|
.libraryTree {
|
||||||
margin-left: .25em
|
margin-left: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.offlineEditorNode {
|
.offlineEditorNode {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editorNode img {
|
.editorNode img {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
margin: 0 .35em;
|
margin: 0 0.35em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px
|
top: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jstree-anchor {
|
.jstree-anchor {
|
||||||
font-weight: 400 !important
|
font-weight: 400 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jstree-wholerow-hovered {
|
.jstree-wholerow-hovered {
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
-webkit-border-radius: 0 !important;
|
-webkit-border-radius: 0 !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
-webkit-box-shadow: none !important;
|
-webkit-box-shadow: none !important;
|
||||||
box-shadow: none !important
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jstree-default .jstree-hovered {
|
.jstree-default .jstree-hovered {
|
||||||
|
|
@ -40,18 +40,18 @@
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
-webkit-box-shadow: none !important;
|
-webkit-box-shadow: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jstree-default .jstree-wholerow-clicked {
|
.jstree-default .jstree-wholerow-clicked {
|
||||||
background: #00a4dc !important
|
background: #00a4dc !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadataSidebarIcon {
|
.metadataSidebarIcon {
|
||||||
margin-right: .4em
|
margin-right: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
.editPageSidebar {
|
.editPageSidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 5.2em;
|
top: 5.2em;
|
||||||
|
|
@ -59,21 +59,21 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
border-right: 1px solid #555;
|
border-right: 1px solid #555;
|
||||||
display: block
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editPageInnerContent {
|
.editPageInnerContent {
|
||||||
float: right;
|
float: right;
|
||||||
width: 68.5%
|
width: 68.5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:112.5em) {
|
@media all and (min-width: 112.5em) {
|
||||||
.editPageSidebar {
|
.editPageSidebar {
|
||||||
width: 25%
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editPageInnerContent {
|
.editPageInnerContent {
|
||||||
width: 73.5%
|
width: 73.5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,8 @@
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollX, .layout-tv .scrollX {
|
.hiddenScrollX,
|
||||||
|
.layout-tv .scrollX {
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -17,7 +18,8 @@
|
||||||
overflow: -moz-scrollbars-none;
|
overflow: -moz-scrollbars-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
|
.hiddenScrollX::-webkit-scrollbar,
|
||||||
|
.layout-tv .scrollX::-webkit-scrollbar {
|
||||||
height: 0 !important;
|
height: 0 !important;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -35,17 +37,22 @@
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollY, .layout-tv .smoothScrollY {
|
.hiddenScrollY,
|
||||||
|
.layout-tv .smoothScrollY {
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
|
|
||||||
/* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
|
/* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
|
||||||
/*overflow: -moz-scrollbars-none;*/
|
|
||||||
|
/* overflow: -moz-scrollbars-none; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollY-forced {
|
.hiddenScrollY-forced {
|
||||||
overflow: -moz-scrollbars-none;
|
overflow: -moz-scrollbars-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {
|
.hiddenScrollY::-webkit-scrollbar,
|
||||||
|
.layout-tv .smoothScrollY::-webkit-scrollbar,
|
||||||
|
.layout-tv .scrollY::-webkit-scrollbar {
|
||||||
width: 0 !important;
|
width: 0 !important;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ body,
|
||||||
html {
|
html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer {
|
.backgroundContainer {
|
||||||
|
|
@ -11,11 +11,11 @@ html {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
contain: strict
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
line-height: 1.35
|
line-height: 1.35;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-mobile,
|
.layout-mobile,
|
||||||
|
|
@ -25,44 +25,44 @@ html {
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
-webkit-font-smoothing: antialiased
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainAnimatedPage {
|
.mainAnimatedPage {
|
||||||
contain: style size !important
|
contain: style size !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageContainer {
|
.pageContainer {
|
||||||
overflow-x: visible !important
|
overflow-x: visible !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bodyWithPopupOpen {
|
.bodyWithPopupOpen {
|
||||||
overflow-y: hidden !important
|
overflow-y: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=page] {
|
div[data-role=page] {
|
||||||
outline: 0
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageTitle {
|
.pageTitle {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-family: inherit
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldDescription {
|
.fieldDescription {
|
||||||
padding-left: .15em;
|
padding-left: 0.15em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
white-space: normal !important
|
white-space: normal !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldDescription+.fieldDescription {
|
.fieldDescription + .fieldDescription {
|
||||||
margin-top: .3em
|
margin-top: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-primary,
|
.content-primary,
|
||||||
|
|
@ -73,21 +73,21 @@ div[data-role=page] {
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerHelpButton {
|
.headerHelpButton {
|
||||||
margin-left: 1.25em !important;
|
margin-left: 1.25em !important;
|
||||||
padding-bottom: .4em !important;
|
padding-bottom: 0.4em !important;
|
||||||
padding-top: .4em !important
|
padding-top: 0.4em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoContent {
|
.mediaInfoContent {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
width: 85%
|
width: 85%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none
|
-ms-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdPoster img,
|
.osdPoster img,
|
||||||
|
|
@ -11,13 +11,13 @@
|
||||||
.videoOsdBottom {
|
.videoOsdBottom {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdHeader {
|
.osdHeader {
|
||||||
-webkit-transition: opacity .3s ease-out;
|
-webkit-transition: opacity 0.3s ease-out;
|
||||||
-o-transition: opacity .3s ease-out;
|
-o-transition: opacity 0.3s ease-out;
|
||||||
transition: opacity .3s ease-out;
|
transition: opacity 0.3s ease-out;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: rgba(0, 0, 0, 0.7) !important;
|
background: rgba(0, 0, 0, 0.7) !important;
|
||||||
|
|
@ -27,11 +27,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdHeader-hidden {
|
.osdHeader-hidden {
|
||||||
opacity: 0
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
|
.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
|
||||||
display: none
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapterThumbContainer {
|
.chapterThumbContainer {
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
position: relative
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapterThumb {
|
.chapterThumb {
|
||||||
|
|
@ -50,20 +50,20 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 20vh;
|
height: 20vh;
|
||||||
min-width: 20vh
|
min-width: 20vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (orientation:portrait) {
|
@media all and (orientation: portrait) {
|
||||||
.chapterThumb {
|
.chapterThumb {
|
||||||
height: 30vw;
|
height: 30vw;
|
||||||
min-width: 30vw
|
min-width: 30vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height:50em) and (orientation:landscape) {
|
@media all and (max-height: 50em) and (orientation: landscape) {
|
||||||
.chapterThumb {
|
.chapterThumb {
|
||||||
height: 30vh;
|
height: 30vh;
|
||||||
min-width: 30vh
|
min-width: 30vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -72,19 +72,19 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: rgba(0, 0, 0, .7);
|
background: rgba(0, 0, 0, 0.7);
|
||||||
padding: .25em .5em;
|
padding: 0.25em 0.5em;
|
||||||
user-select: none
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapterThumbText {
|
.chapterThumbText {
|
||||||
padding: .25em 0;
|
padding: 0.25em 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
opacity: 1
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapterThumbText-dim {
|
.chapterThumbText-dim {
|
||||||
opacity: .6
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.videoOsdBottom {
|
.videoOsdBottom {
|
||||||
|
|
@ -104,21 +104,21 @@
|
||||||
transition: opacity 0.3s ease-out;
|
transition: opacity 0.3s ease-out;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-touch-callout: none
|
-webkit-touch-callout: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.videoOsdBottom-hidden {
|
.videoOsdBottom-hidden {
|
||||||
opacity: 0
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdControls {
|
.osdControls {
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.videoOsdBottom .buttons {
|
.videoOsdBottom .buttons {
|
||||||
padding: .25em 0 0;
|
padding: 0.25em 0 0;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -126,14 +126,14 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdVolumeSliderContainer {
|
.osdVolumeSliderContainer {
|
||||||
width: 9em;
|
width: 9em;
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMediaInfo,
|
.osdMediaInfo,
|
||||||
|
|
@ -142,14 +142,14 @@
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
-webkit-box-align: center
|
-webkit-box-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.volumeButtons {
|
.volumeButtons {
|
||||||
margin: 0 .5em 0 auto;
|
margin: 0 0.5em 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdTimeText {
|
.osdTimeText {
|
||||||
|
|
@ -157,13 +157,13 @@
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdPoster {
|
.osdPoster {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: .5em
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdPoster img {
|
.osdPoster img {
|
||||||
|
|
@ -172,28 +172,28 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-box-shadow: 0 0 1.9vh #000;
|
-webkit-box-shadow: 0 0 1.9vh #000;
|
||||||
box-shadow: 0 0 1.9vh #000;
|
box-shadow: 0 0 1.9vh #000;
|
||||||
border: .08em solid #222;
|
border: 0.08em solid #222;
|
||||||
user-drag: none;
|
user-drag: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-ms-user-select: none
|
-ms-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdTitle,
|
.osdTitle,
|
||||||
.osdTitleSmall {
|
.osdTitleSmall {
|
||||||
margin: 0 1em 0 0
|
margin: 0 1em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMediaInfo {
|
.osdMediaInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdSecondaryMediaInfo {
|
.osdSecondaryMediaInfo {
|
||||||
padding-left: .6em !important
|
padding-left: 0.6em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdTextContainer {
|
.osdTextContainer {
|
||||||
|
|
@ -207,14 +207,14 @@
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
margin-bottom: .7em;
|
margin-bottom: 0.7em;
|
||||||
padding-left: .5em
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMainTextContainer {
|
.osdMainTextContainer {
|
||||||
-webkit-box-align: baseline;
|
-webkit-box-align: baseline;
|
||||||
-webkit-align-items: baseline;
|
-webkit-align-items: baseline;
|
||||||
align-items: baseline
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMediaStatus {
|
.osdMediaStatus {
|
||||||
|
|
@ -224,63 +224,66 @@
|
||||||
@-moz-keyframes spin {
|
@-moz-keyframes spin {
|
||||||
100% {
|
100% {
|
||||||
-moz-transform: rotate(360deg);
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
@-webkit-keyframes spin {
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: rotate(360deg);
|
||||||
transform:rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdMediaStatus .animate {
|
.osdMediaStatus .animate {
|
||||||
-webkit-animation:spin 4s linear infinite;
|
-webkit-animation: spin 4s linear infinite;
|
||||||
-moz-animation:spin 4s linear infinite;
|
-moz-animation: spin 4s linear infinite;
|
||||||
animation:spin 4s linear infinite;
|
animation: spin 4s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageContainer {
|
.pageContainer {
|
||||||
top: 0;
|
top: 0;
|
||||||
position: fixed
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:30em) {
|
@media all and (max-width: 30em) {
|
||||||
|
|
||||||
.btnFastForward,
|
.btnFastForward,
|
||||||
.btnRewind,
|
.btnRewind,
|
||||||
.osdMediaInfo,
|
.osdMediaInfo,
|
||||||
.osdPoster {
|
.osdPoster {
|
||||||
display: none !important
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:33.75em) {
|
@media all and (max-width: 33.75em) {
|
||||||
.videoOsdBottom .paper-icon-button-light {
|
.videoOsdBottom .paper-icon-button-light {
|
||||||
margin: 0
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:43em) {
|
@media all and (max-width: 43em) {
|
||||||
.videoOsdBottom .volumeButtons,
|
.videoOsdBottom .volumeButtons,
|
||||||
.osdMediaStatus span {
|
.osdMediaStatus span {
|
||||||
display: none !important
|
display: none !important;
|
||||||
}
|
|
||||||
}
|
|
||||||
@media all and (max-width:50em) {
|
|
||||||
.videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
|
|
||||||
display: none !important
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:75em) {
|
@media all and (max-width: 50em) {
|
||||||
.videoOsdBottom .endsAtText {
|
.videoOsdBottom .btnFastForward,
|
||||||
display: none !important
|
.videoOsdBottom .btnRewind {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 75em) {
|
||||||
|
.videoOsdBottom .endsAtText {
|
||||||
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
max-height: 84%;
|
max-height: 84%;
|
||||||
border-radius: .1em !important;
|
border-radius: 0.1em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheet-not-fullscreen {
|
.actionsheet-not-fullscreen {
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
.actionSheetContent {
|
.actionSheetContent {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: .4em 0 !important;
|
padding: 0.4em 0 !important;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -45,7 +45,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetListItemBody {
|
.actionsheetListItemBody {
|
||||||
padding: .4em 1em .4em .6em !important;
|
padding: 0.4em 1em 0.4em 0.6em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetItemText {
|
.actionSheetItemText {
|
||||||
|
|
@ -59,13 +59,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetItemAsideText {
|
.actionSheetItemAsideText {
|
||||||
opacity: .7;
|
opacity: 0.7;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: 5em;
|
margin-left: 5em;
|
||||||
margin-right: .5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetScroller {
|
.actionSheetScroller {
|
||||||
|
|
@ -83,14 +83,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetDivider {
|
.actionsheetDivider {
|
||||||
height: .07em;
|
height: 0.07em;
|
||||||
margin: .25em 0;
|
margin: 0.25em 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetTitle {
|
.actionSheetTitle {
|
||||||
margin: .6em 0 .7em !important;
|
margin: 0.6em 0 0.7em !important;
|
||||||
padding: 0 .9em;
|
padding: 0 0.9em;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,7 +100,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetMenuItemIcon {
|
.actionsheetMenuItemIcon {
|
||||||
margin: 0 .85em 0 .45em !important;
|
margin: 0 0.85em 0 0.45em !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -110,6 +110,6 @@
|
||||||
|
|
||||||
.btnCloseActionSheet {
|
.btnCloseActionSheet {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: .75em;
|
top: 0.75em;
|
||||||
left: .5em;
|
left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -35,16 +35,15 @@
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
min-width: initial;
|
min-width: initial;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: .1em .4em;
|
padding: 0.1em 0.4em;
|
||||||
width: auto;
|
width: auto;
|
||||||
border-radius: .1em;
|
border-radius: 0.1em;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 50em) {
|
@media all and (max-height: 50em) {
|
||||||
|
|
||||||
.alphaPicker-fixed {
|
.alphaPicker-fixed {
|
||||||
bottom: 5em;
|
bottom: 5em;
|
||||||
}
|
}
|
||||||
|
|
@ -56,14 +55,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 49em) {
|
@media all and (max-height: 49em) {
|
||||||
|
|
||||||
.alphaPicker-vertical {
|
.alphaPicker-vertical {
|
||||||
font-size: 94%;
|
font-size: 94%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 44em) {
|
@media all and (max-height: 44em) {
|
||||||
|
|
||||||
.alphaPicker-vertical {
|
.alphaPicker-vertical {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
}
|
}
|
||||||
|
|
@ -75,14 +72,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 37em) {
|
@media all and (max-height: 37em) {
|
||||||
|
|
||||||
.alphaPicker-vertical {
|
.alphaPicker-vertical {
|
||||||
font-size: 82%;
|
font-size: 82%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 32em) {
|
@media all and (max-height: 32em) {
|
||||||
|
|
||||||
.alphaPicker-vertical {
|
.alphaPicker-vertical {
|
||||||
font-size: 74%;
|
font-size: 74%;
|
||||||
}
|
}
|
||||||
|
|
@ -113,15 +108,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPicker-fixed-left {
|
.alphaPicker-fixed-left {
|
||||||
left: .4em;
|
left: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPicker-fixed-right {
|
.alphaPicker-fixed-right {
|
||||||
right: .4em;
|
right: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 62.5em) {
|
@media all and (min-width: 62.5em) {
|
||||||
|
|
||||||
.alphaPicker-fixed-left {
|
.alphaPicker-fixed-left {
|
||||||
left: 1em;
|
left: 1em;
|
||||||
}
|
}
|
||||||
|
|
@ -132,7 +126,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 31.25em) {
|
@media all and (max-height: 31.25em) {
|
||||||
|
|
||||||
.alphaPicker-fixed {
|
.alphaPicker-fixed {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,6 @@
|
||||||
contain: layout style;
|
contain: layout style;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter.headroom--unpinned {
|
.appfooter.headroom--unpinned {
|
||||||
transform: translateY(100%)!important;
|
transform: translateY(100%) !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,24 @@
|
||||||
|
button {
|
||||||
|
-webkit-border-fit: border !important;
|
||||||
|
}
|
||||||
|
|
||||||
button::-moz-focus-inner {
|
button::-moz-focus-inner {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
|
||||||
-webkit-border-fit: border !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: inherit !important;
|
font-size: inherit !important;
|
||||||
font-family: inherit !important;
|
font-family: inherit !important;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
background-color: transparent !important;
|
|
||||||
background: none !important;
|
background: none !important;
|
||||||
|
background-color: transparent !important;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: block;
|
display: block;
|
||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
contain: layout style;
|
contain: layout style;
|
||||||
|
|
@ -55,17 +55,27 @@ button {
|
||||||
contain: layout style;
|
contain: layout style;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardPadder-backdrop, .cardPadder-mixedBackdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop, .cardPadder-overflowSmallBackdrop {
|
.cardPadder-backdrop,
|
||||||
|
.cardPadder-mixedBackdrop,
|
||||||
|
.cardPadder-smallBackdrop,
|
||||||
|
.cardPadder-overflowBackdrop,
|
||||||
|
.cardPadder-overflowSmallBackdrop {
|
||||||
padding-bottom: 56.25%;
|
padding-bottom: 56.25%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardPadder-square, .cardPadder-mixedSquare, .cardPadder-overflowSquare, .overflowSquareCard-textCardPadder {
|
.cardPadder-square,
|
||||||
|
.cardPadder-mixedSquare,
|
||||||
|
.cardPadder-overflowSquare,
|
||||||
|
.overflowSquareCard-textCardPadder {
|
||||||
padding-bottom: 100%;
|
padding-bottom: 100%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardPadder-portrait, .cardPadder-mixedPortrait, .cardPadder-overflowPortrait, .overflowPortraitCard-textCardPadder {
|
.cardPadder-portrait,
|
||||||
|
.cardPadder-mixedPortrait,
|
||||||
|
.cardPadder-overflowPortrait,
|
||||||
|
.overflowPortraitCard-textCardPadder {
|
||||||
padding-bottom: 150%;
|
padding-bottom: 150%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
@ -80,25 +90,26 @@ button {
|
||||||
margin: 0.6em;
|
margin: 0.6em;
|
||||||
transition: none;
|
transition: none;
|
||||||
border: 0 solid transparent;
|
border: 0 solid transparent;
|
||||||
|
|
||||||
/* These both are needed in case cardBox is a button */
|
/* These both are needed in case cardBox is a button */
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
contain: layout;
|
contain: layout;
|
||||||
contain: style;
|
contain: style;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card.show-animation .cardBox {
|
||||||
|
will-change: transform;
|
||||||
|
transition: transform 200ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
.card.show-focus:not(.show-animation) .cardBox {
|
.card.show-focus:not(.show-animation) .cardBox {
|
||||||
margin: .4em;
|
margin: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
|
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
|
||||||
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
|
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
border: .5em solid transparent;
|
border: 0.5em solid transparent;
|
||||||
}
|
|
||||||
|
|
||||||
.card.show-animation .cardBox {
|
|
||||||
will-change: transform;
|
|
||||||
transition: transform 200ms ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.show-animation:focus > .cardBox {
|
.card.show-animation:focus > .cardBox {
|
||||||
|
|
@ -123,7 +134,7 @@ button {
|
||||||
|
|
||||||
.btnCardOptions {
|
.btnCardOptions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: .25em;
|
bottom: 0.25em;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
@ -134,8 +145,8 @@ button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
top: .3em;
|
top: 0.3em;
|
||||||
left: .3em;
|
left: 0.3em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 1.6em;
|
width: 1.6em;
|
||||||
|
|
@ -156,6 +167,7 @@ button {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-clip: content-box !important;
|
background-clip: content-box !important;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
/* This is only needed for scalable cards */
|
/* This is only needed for scalable cards */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
@ -177,13 +189,16 @@ button {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
/* Needed in case this is a button */
|
/* Needed in case this is a button */
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
/* Needed in case this is a button */
|
/* Needed in case this is a button */
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
|
|
||||||
/* Needed in safari */
|
/* Needed in safari */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
@ -212,10 +227,6 @@ button {
|
||||||
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardImageContainer {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cardImage {
|
.cardImage {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -231,6 +242,7 @@ button {
|
||||||
.cardImage-img {
|
.cardImage-img {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
/* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
|
/* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
|
||||||
min-height: 70%;
|
min-height: 70%;
|
||||||
min-width: 70%;
|
min-width: 70%;
|
||||||
|
|
@ -257,17 +269,17 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter {
|
.cardFooter {
|
||||||
padding: .3em .3em .5em .3em;
|
padding: 0.3em 0.3em 0.5em 0.3em;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||||
border-radius: .145em;
|
border-radius: 0.145em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.innerCardFooter {
|
.innerCardFooter {
|
||||||
background: rgba(0,0,0,.7);
|
background: rgba(0, 0, 0, 0.7);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -287,7 +299,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText {
|
.cardText {
|
||||||
padding: .06em .5em;
|
padding: 0.06em 0.5em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -299,7 +311,24 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText-first {
|
.cardText-first {
|
||||||
padding-top: .24em;
|
padding-top: 0.24em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textActionButton {
|
||||||
|
border: 0 !important;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0 !important;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
outline: none !important;
|
||||||
|
color: inherit;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textActionButton:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText > .textActionButton {
|
.cardText > .textActionButton {
|
||||||
|
|
@ -309,7 +338,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.innerCardFooter > .cardText {
|
.innerCardFooter > .cardText {
|
||||||
padding: .3em .5em;
|
padding: 0.3em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter-withlogo {
|
.cardFooter-withlogo {
|
||||||
|
|
@ -341,24 +370,6 @@ button {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.textActionButton {
|
|
||||||
border: 0 !important;
|
|
||||||
background: transparent;
|
|
||||||
border: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
outline: none !important;
|
|
||||||
color: inherit;
|
|
||||||
vertical-align: middle;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textActionButton:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cardImageIcon {
|
.cardImageIcon {
|
||||||
font-size: 5em;
|
font-size: 5em;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -366,12 +377,12 @@ button {
|
||||||
|
|
||||||
.cardImageIcon-small {
|
.cardImageIcon-small {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
margin-bottom: .1em;
|
margin-bottom: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardIndicators {
|
.cardIndicators {
|
||||||
right: .225em;
|
right: 0.225em;
|
||||||
top: .225em;
|
top: 0.225em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -388,16 +399,16 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.programAttributeIndicator {
|
.programAttributeIndicator {
|
||||||
padding: .18em .5em;
|
padding: 0.18em 0.5em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayButton {
|
.cardOverlayButton {
|
||||||
color: rgba(255, 255, 255, .76);
|
color: rgba(255, 255, 255, 0.76);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: .75em;
|
padding: 0.75em;
|
||||||
font-size: 88%;
|
font-size: 88%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -408,7 +419,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayButtonIcon {
|
.cardOverlayButtonIcon {
|
||||||
background-color: rgba(0,0,0,.7) !important;
|
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||||
border-radius: 100em;
|
border-radius: 100em;
|
||||||
width: 1.5em !important;
|
width: 1.5em !important;
|
||||||
height: 1.5em !important;
|
height: 1.5em !important;
|
||||||
|
|
@ -430,10 +441,10 @@ button {
|
||||||
height: 2.6em;
|
height: 2.6em;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
background-color: rgba(0,0,0,.5) !important;
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||||
border: .06em solid rgba(255,255,255,.6);
|
border: 0.06em solid rgba(255, 255, 255, 0.6);
|
||||||
padding: .38em !important;
|
padding: 0.38em !important;
|
||||||
color: rgba(255, 255, 255, .76);
|
color: rgba(255, 255, 255, 0.76);
|
||||||
transition: transform 200ms ease-out;
|
transition: transform 200ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -480,13 +491,15 @@ button {
|
||||||
width: 33.333333333333333333333333333333%;
|
width: 33.333333333333333333333333333333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 33.333333333333333333333333333333%;
|
width: 33.333333333333333333333333333333%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 43.75em) {
|
@media (min-width: 43.75em) {
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -502,7 +515,8 @@ button {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -522,7 +536,8 @@ button {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 16.666666666666666666666666666667%;
|
width: 16.666666666666666666666666666667%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -535,9 +550,9 @@ button {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 87.5em) {
|
@media (min-width: 87.5em) {
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 14.285714285714285714285714285714%;
|
width: 14.285714285714285714285714285714%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -555,13 +570,15 @@ button {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 12.5%;
|
width: 12.5%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 120em) {
|
@media (min-width: 120em) {
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 11.111111111111111111111111111111%;
|
width: 11.111111111111111111111111111111%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -571,7 +588,8 @@ button {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard, .portraitCard {
|
.squareCard,
|
||||||
|
.portraitCard {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -602,7 +620,8 @@ button {
|
||||||
width: 72vw;
|
width: 72vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 40vw;
|
width: 40vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -627,29 +646,34 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 43.75em) {
|
@media (min-width: 43.75em) {
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 23.1vw;
|
width: 23.1vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 48.125em) {
|
@media (min-width: 48.125em) {
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowBackdropCard,
|
||||||
|
.overflowSmallBackdropCard {
|
||||||
width: 30vw;
|
width: 30vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation: landscape) {
|
@media (orientation: landscape) {
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowBackdropCard,
|
||||||
|
.overflowSmallBackdropCard {
|
||||||
width: 30vw;
|
width: 30vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 23.1vw;
|
width: 23.1vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation: landscape) and (min-width: 48.125em) {
|
@media (orientation: landscape) and (min-width: 48.125em) {
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowBackdropCard,
|
||||||
|
.overflowSmallBackdropCard {
|
||||||
width: 23.1vw;
|
width: 23.1vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -661,55 +685,60 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 50em) {
|
@media (min-width: 50em) {
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 18.5vw;
|
width: 18.5vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 75em) {
|
@media (min-width: 75em) {
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowBackdropCard,
|
||||||
|
.overflowSmallBackdropCard {
|
||||||
width: 23.1vw;
|
width: 23.1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 15.5vw;
|
width: 15.5vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 87.5em) {
|
@media (min-width: 87.5em) {
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 13.3vw;
|
width: 13.3vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 100em) {
|
@media (min-width: 100em) {
|
||||||
|
.overflowBackdropCard,
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowSmallBackdropCard {
|
||||||
width: 18.7vw;
|
width: 18.7vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowSquareCard,
|
||||||
|
.overflowPortraitCard {
|
||||||
width: 11.6vw;
|
width: 11.6vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 120em) {
|
@media (min-width: 120em) {
|
||||||
|
.overflowSquareCard,
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowPortraitCard {
|
||||||
width: 10.3vw;
|
width: 10.3vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 131.25em) {
|
@media (min-width: 131.25em) {
|
||||||
|
.overflowSquareCard,
|
||||||
.overflowSquareCard, .overflowPortraitCard {
|
.overflowPortraitCard {
|
||||||
width: 9.3vw;
|
width: 9.3vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 156.25em) {
|
@media (min-width: 156.25em) {
|
||||||
|
.overflowBackdropCard,
|
||||||
.overflowBackdropCard, .overflowSmallBackdropCard {
|
.overflowSmallBackdropCard {
|
||||||
width: 15.6vw;
|
width: 15.6vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -726,7 +755,8 @@ button {
|
||||||
padding-bottom: 87.75%;
|
padding-bottom: 87.75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemsContainer-tv > .overflowSquareCard, .itemsContainer-tv > .overflowPortraitCard {
|
.itemsContainer-tv > .overflowSquareCard,
|
||||||
|
.itemsContainer-tv > .overflowPortraitCard {
|
||||||
width: 15.6vw;
|
width: 15.6vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -735,9 +765,9 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayContainer {
|
.cardOverlayContainer {
|
||||||
background: rgba(0,0,0,0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity .2s;
|
transition: opacity 0.2s;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -766,7 +796,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayFab-primary {
|
.cardOverlayFab-primary {
|
||||||
background-color: rgba(0,0,0,0.7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
font-size: 130%;
|
font-size: 130%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 3em;
|
width: 3em;
|
||||||
|
|
|
||||||
|
|
@ -15,11 +15,12 @@
|
||||||
|
|
||||||
.dialog {
|
.dialog {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: .2em;
|
border-radius: 0.2em;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
will-change: transform, opacity;
|
will-change: transform, opacity;
|
||||||
|
|
||||||
/* Strict does not work well with actionsheet */
|
/* Strict does not work well with actionsheet */
|
||||||
contain: style paint;
|
contain: style paint;
|
||||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||||
|
|
@ -51,13 +52,13 @@
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(.5);
|
transform: scale(0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scaleup {
|
@keyframes scaleup {
|
||||||
from {
|
from {
|
||||||
transform: scale(.5);
|
transform: scale(0.5);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -78,7 +79,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeout {
|
@keyframes fadeout {
|
||||||
|
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -101,7 +101,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slidedown {
|
@keyframes slidedown {
|
||||||
|
|
||||||
from {
|
from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: none;
|
transform: none;
|
||||||
|
|
@ -114,8 +113,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 80em), all and (max-height: 45em) {
|
@media all and (max-width: 80em), all and (max-height: 45em) {
|
||||||
|
.dialog-fixedSize,
|
||||||
.dialog-fixedSize, .dialog-fullscreen-lowres {
|
.dialog-fullscreen-lowres {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
top: 0 !important;
|
top: 0 !important;
|
||||||
bottom: 0 !important;
|
bottom: 0 !important;
|
||||||
|
|
@ -127,7 +126,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 80em) and (min-height: 45em) {
|
@media all and (min-width: 80em) and (min-height: 45em) {
|
||||||
|
|
||||||
.dialog-medium {
|
.dialog-medium {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
|
|
@ -169,5 +167,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogBackdropOpened {
|
.dialogBackdropOpened {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
#ulDirectoryPickerList a {
|
#ulDirectoryPickerList a {
|
||||||
padding-top: .4em;
|
padding-top: 0.4em;
|
||||||
padding-bottom: .4em
|
padding-bottom: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lblDirectoryPickerPath {
|
.lblDirectoryPickerPath {
|
||||||
white-space: nowrap
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
@ -4,11 +4,11 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width:104px;
|
min-width: 104px;
|
||||||
min-height:24px;
|
min-height: 24px;
|
||||||
padding-top: 1.25em;
|
padding-top: 1.25em;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: #ffffff;
|
color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,29 +8,29 @@
|
||||||
-webkit-border-radius: 0 !important;
|
-webkit-border-radius: 0 !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
max-height: none !important;
|
max-height: none !important;
|
||||||
max-width: none !important
|
max-width: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-height:600px) {
|
@media all and (min-height: 600px) {
|
||||||
.dynamicFilterDialog {
|
.dynamicFilterDialog {
|
||||||
top: 10% !important;
|
top: 10% !important;
|
||||||
bottom: 25% !important
|
bottom: 25% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:400px) {
|
@media all and (max-width: 400px) {
|
||||||
.dynamicFilterDialog {
|
.dynamicFilterDialog {
|
||||||
width: auto;
|
width: auto;
|
||||||
left: 10vw !important;
|
left: 10vw !important;
|
||||||
right: 10vw !important;
|
right: 10vw !important;
|
||||||
margin-left: 0 !important
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:400px) {
|
@media all and (min-width: 400px) {
|
||||||
.dynamicFilterDialog {
|
.dynamicFilterDialog {
|
||||||
width: 20.16em;
|
width: 20.16em;
|
||||||
margin-left: -10.08em !important;
|
margin-left: -10.08em !important;
|
||||||
left: 50% !important
|
left: 50% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeader {
|
.formDialogHeader {
|
||||||
padding: 1em .5em;
|
padding: 1em 0.5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeaderTitle {
|
.formDialogHeaderTitle {
|
||||||
margin-left: .25em;
|
margin-left: 0.25em;
|
||||||
|
|
||||||
/* In case of h1, h2, h3 */
|
/* In case of h1, h2, h3 */
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -23,7 +24,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogContentInner {
|
.dialogContentInner {
|
||||||
padding: .5em 1em 20em 1em;
|
padding: 0.5em 1em 20em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialogContentInner-mini {
|
.dialogContentInner-mini {
|
||||||
|
|
@ -46,6 +47,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 1.25em 1em;
|
padding: 1.25em 1em;
|
||||||
|
|
||||||
/* Without this emby-checkbox is able to appear on top */
|
/* Without this emby-checkbox is able to appear on top */
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -62,11 +64,11 @@
|
||||||
padding-bottom: 1.5em;
|
padding-bottom: 1.5em;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 80% !important;
|
width: 80% !important;
|
||||||
padding-top: .5em;
|
padding-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogFooterItem {
|
.formDialogFooterItem {
|
||||||
margin: .5em !important;
|
margin: 0.5em !important;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
|
|
@ -91,7 +93,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 50em) {
|
@media all and (min-width: 50em) {
|
||||||
|
|
||||||
.formDialogFooterItem {
|
.formDialogFooterItem {
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
|
|
@ -103,7 +104,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 80em) {
|
@media all and (min-width: 80em) {
|
||||||
|
|
||||||
.formDialogFooterItem {
|
.formDialogFooterItem {
|
||||||
max-width: 70%;
|
max-width: 70%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,12 +14,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-desktop .tvGuideHeader {
|
.layout-desktop .tvGuideHeader {
|
||||||
margin-bottom: .5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideHeaderDateSelection {
|
.guideHeaderDateSelection {
|
||||||
font-size: 86%;
|
font-size: 86%;
|
||||||
padding: .4em 0;
|
padding: 0.4em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-headerTimeslots {
|
.guide-headerTimeslots {
|
||||||
|
|
@ -39,10 +39,10 @@
|
||||||
|
|
||||||
.guideProgramIndicator {
|
.guideProgramIndicator {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
margin-right: .5em;
|
margin-right: 0.5em;
|
||||||
font-size: 82%;
|
font-size: 82%;
|
||||||
padding: .2em .25em;
|
padding: 0.2em 0.25em;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -51,6 +51,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelTimeslotHeader {
|
.guide-channelTimeslotHeader {
|
||||||
|
border: 0 !important;
|
||||||
|
border-right-color: transparent;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
@ -69,9 +71,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelPrograms {
|
.channelPrograms {
|
||||||
|
height: 4.42em;
|
||||||
|
contain: strict;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px 0 1px 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
contain: strict;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -80,31 +87,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideSpacer {
|
.guideSpacer {
|
||||||
width: .3em;
|
width: 0.3em;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelPrograms, .timeslotHeadersInner {
|
.channelPrograms,
|
||||||
|
.timeslotHeadersInner {
|
||||||
width: 1800vw;
|
width: 1800vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 37.5em) {
|
@media all and (min-width: 37.5em) {
|
||||||
|
.channelPrograms,
|
||||||
.channelPrograms, .timeslotHeadersInner {
|
.timeslotHeadersInner {
|
||||||
width: 1400vw;
|
width: 1400vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 50em) {
|
@media all and (min-width: 50em) {
|
||||||
|
.channelPrograms,
|
||||||
.channelPrograms, .timeslotHeadersInner {
|
.timeslotHeadersInner {
|
||||||
width: 1200vw;
|
width: 1200vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 80em) {
|
@media all and (min-width: 80em) {
|
||||||
|
.channelPrograms,
|
||||||
.channelPrograms, .timeslotHeadersInner {
|
.timeslotHeadersInner {
|
||||||
width: 810vw;
|
width: 810vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -112,11 +120,17 @@
|
||||||
.timeslotHeader {
|
.timeslotHeader {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-indent: .25em;
|
text-indent: 0.25em;
|
||||||
width: 2.0833333333333333333333333333333%;
|
width: 2.0833333333333333333333333333333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelHeaderCell, .guide-channelTimeslotHeader {
|
.programCell,
|
||||||
|
.guide-channelHeaderCell {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-channelHeaderCell,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
|
|
@ -130,11 +144,12 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
/* Needed in firefox */
|
/* Needed in firefox */
|
||||||
text-align: left;
|
text-align: left;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
border-radius: .12em;
|
border-radius: 0.12em;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -148,37 +163,38 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelTimeslotHeader {
|
|
||||||
border: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell
|
/* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell
|
||||||
This was causing channelsContainer to extend beyond the fixed width on ps4, tizen, lg and opera tv.
|
This was causing channelsContainer to extend beyond the fixed width on ps4, tizen, lg and opera tv.
|
||||||
*/
|
*/
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 24vw;
|
width: 24vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:31.25em) {
|
@media all and (min-width: 31.25em) {
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 16vw;
|
width: 16vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:37.5em) {
|
@media all and (min-width: 37.5em) {
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 16vw;
|
width: 16vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 14vw;
|
width: 14vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:80em) {
|
@media all and (min-width: 80em) {
|
||||||
.channelsContainer, .guide-channelTimeslotHeader {
|
.channelsContainer,
|
||||||
|
.guide-channelTimeslotHeader {
|
||||||
width: 12vw;
|
width: 12vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -197,34 +213,26 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em) {
|
@media all and (max-width: 50em) {
|
||||||
|
.newTvProgram,
|
||||||
.newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon {
|
.liveTvProgram,
|
||||||
|
.premiereTvProgram,
|
||||||
|
.guideHdIcon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelPrograms {
|
.channelPrograms + .channelPrograms,
|
||||||
height: 4.42em;
|
.guide-channelHeaderCell + .guide-channelHeaderCell {
|
||||||
contain: strict;
|
margin-top: -1px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px 0 1px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell {
|
.channelPrograms-tv,
|
||||||
margin-top: -1px;
|
.guide-channelHeaderCell-tv {
|
||||||
}
|
|
||||||
|
|
||||||
.channelPrograms-tv, .guide-channelHeaderCell-tv {
|
|
||||||
height: 3em;
|
height: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelTimeslotHeader {
|
.guide-channelTimeslotHeader,
|
||||||
border-right-color: transparent;
|
.timeslotHeader {
|
||||||
}
|
|
||||||
|
|
||||||
.guide-channelTimeslotHeader, .timeslotHeader {
|
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
height: 2.8em;
|
height: 2.8em;
|
||||||
}
|
}
|
||||||
|
|
@ -253,6 +261,7 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
/* Needed for Firefox */
|
/* Needed for Firefox */
|
||||||
text-align: left;
|
text-align: left;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
@ -261,7 +270,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideProgramName {
|
.guideProgramName {
|
||||||
padding: 0 .7em 0;
|
padding: 0 0.7em 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -269,7 +278,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
contain: layout style paint;
|
contain: layout style paint;
|
||||||
/*transition: transform 60ms ease-out;*/
|
|
||||||
|
/* transition: transform 60ms ease-out; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programNameCaret {
|
.guide-programNameCaret {
|
||||||
|
|
@ -289,11 +299,11 @@
|
||||||
.guideProgramSecondaryInfo {
|
.guideProgramSecondaryInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: .1em;
|
margin-top: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programIcon {
|
.programIcon {
|
||||||
margin-left: .5em;
|
margin-left: 0.5em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
|
|
@ -304,16 +314,16 @@
|
||||||
|
|
||||||
.guide-programTextIcon {
|
.guide-programTextIcon {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: .9em;
|
font-size: 0.9em;
|
||||||
padding: .16em .3em;
|
padding: 0.16em 0.3em;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
margin-right: .35em;
|
margin-right: 0.35em;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programTextIcon-tv {
|
.guide-programTextIcon-tv {
|
||||||
font-size: .74em;
|
font-size: 0.74em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideChannelNumber {
|
.guideChannelNumber {
|
||||||
|
|
@ -345,14 +355,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 62.5em) {
|
@media all and (min-width: 62.5em) {
|
||||||
|
|
||||||
.guideChannelName {
|
.guideChannelName {
|
||||||
max-width: 40%;
|
max-width: 40%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 62.5em) {
|
@media all and (max-width: 62.5em) {
|
||||||
|
|
||||||
.guideChannelNumber {
|
.guideChannelNumber {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -368,21 +376,19 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelsContainer, .programGrid {
|
.channelsContainer,
|
||||||
|
.programGrid {
|
||||||
contain: layout style paint;
|
contain: layout style paint;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell, .guide-channelHeaderCell {
|
.timerIcon,
|
||||||
outline: none !important;
|
.seriesTimerIcon {
|
||||||
}
|
color: #c33 !important;
|
||||||
|
|
||||||
.timerIcon, .seriesTimerIcon {
|
|
||||||
color: #cc3333 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.seriesTimerIcon-inactive {
|
.seriesTimerIcon-inactive {
|
||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
opacity: .7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guideOptions {
|
.guideOptions {
|
||||||
|
|
@ -392,7 +398,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em), all and (max-height: 37.5em) {
|
@media all and (max-width: 50em), all and (max-height: 37.5em) {
|
||||||
|
|
||||||
.tvGuideHeader {
|
.tvGuideHeader {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -415,16 +420,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button {
|
.guide-date-tab-button {
|
||||||
padding: .3em .7em !important;
|
padding: 0.3em 0.7em !important;
|
||||||
margin: 0 .3em !important;
|
margin: 0 0.3em !important;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.emby-tab-button-active {
|
.guide-date-tab-button.emby-tab-button-active {
|
||||||
border-color: transparent !important;
|
border-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.show-focus:focus {
|
.guide-date-tab-button.show-focus:focus {
|
||||||
border-radius: .15em !important;
|
border-radius: 0.15em !important;
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
.newTvProgram {
|
.newTvProgram {
|
||||||
background: #3388cc;
|
background: #38c;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.liveTvProgram {
|
.liveTvProgram {
|
||||||
background: #cc3333;
|
background: #c33;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.premiereTvProgram {
|
.premiereTvProgram {
|
||||||
background: #EF6C00;
|
background: #ef6c00;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,24 @@
|
||||||
.homeLibraryButton {
|
.homeLibraryButton {
|
||||||
min-width: 18%;
|
min-width: 18%;
|
||||||
margin: .5em !important;
|
margin: 0.5em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em) {
|
@media all and (max-width: 50em) {
|
||||||
|
|
||||||
.homeLibraryButton {
|
.homeLibraryButton {
|
||||||
width: 46% !important;
|
width: 46% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeLibraryIcon {
|
.homeLibraryIcon {
|
||||||
margin-left: .5em;
|
margin-left: 0.5em;
|
||||||
margin-right: .5em;
|
margin-right: 0.5em;
|
||||||
-webkit-flex-shrink: 0;
|
-webkit-flex-shrink: 0;
|
||||||
flex-shrink: 0
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeLibraryText {
|
.homeLibraryText {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
-o-text-overflow: ellipsis;
|
-o-text-overflow: ellipsis;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -72,7 +72,7 @@ video::-webkit-media-controls {
|
||||||
@keyframes htmlvideoplayer-zoomin {
|
@keyframes htmlvideoplayer-zoomin {
|
||||||
from {
|
from {
|
||||||
transform: scale3d(0.2, 0.2, 0.2);
|
transform: scale3d(0.2, 0.2, 0.2);
|
||||||
opacity: .6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,22 @@
|
||||||
.lazy-image-fadein {
|
.lazy-image-fadein {
|
||||||
|
opacity: 0;
|
||||||
animation: lazy-image-fadein 330ms ease-in normal both;
|
animation: lazy-image-fadein 330ms ease-in normal both;
|
||||||
|
-webkit-animation-duration: 0.8s;
|
||||||
|
-moz-animation-duration: 0.8s;
|
||||||
|
-o-animation-duration: 0.8s;
|
||||||
|
animation-duration: 0.8s;
|
||||||
|
-webkit-animation-name: popInAnimation;
|
||||||
|
-moz-animation-name: popInAnimation;
|
||||||
|
-o-animation-name: popInAnimation;
|
||||||
|
animation-name: popInAnimation;
|
||||||
|
-webkit-animation-fill-mode: forwards;
|
||||||
|
-moz-animation-fill-mode: forwards;
|
||||||
|
-o-animation-fill-mode: forwards;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
|
||||||
|
-moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
|
||||||
|
-o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
|
||||||
|
animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.lazy-image-fadein-fast {
|
.lazy-image-fadein-fast {
|
||||||
|
|
@ -16,26 +33,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lazy-image-fadein {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-animation-duration: .8s;
|
|
||||||
-moz-animation-duration: .8s;
|
|
||||||
-o-animation-duration: .8s;
|
|
||||||
animation-duration: .8s;
|
|
||||||
-webkit-animation-name: popInAnimation;
|
|
||||||
-moz-animation-name: popInAnimation;
|
|
||||||
-o-animation-name: popInAnimation;
|
|
||||||
animation-name: popInAnimation;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
-moz-animation-fill-mode: forwards;
|
|
||||||
-o-animation-fill-mode: forwards;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
-webkit-animation-timing-function: cubic-bezier(0,0,.5,1);
|
|
||||||
-moz-animation-timing-function: cubic-bezier(0,0,.5,1);
|
|
||||||
-o-animation-timing-function: cubic-bezier(0,0,.5,1);
|
|
||||||
animation-timing-function: cubic-bezier(0,0,.5,1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes popInAnimation {
|
@keyframes popInAnimation {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
.imageEditor-dropZone {
|
.imageEditor-dropZone {
|
||||||
border: .2em dashed currentcolor;
|
border: 0.2em dashed currentcolor;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
|
|
||||||
/* padding: 1.6em; */
|
/* padding: 1.6em; */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
.itemProgressBar {
|
.itemProgressBar {
|
||||||
background: #333;
|
background: #333;
|
||||||
background: rgba(51,51,51,.8);
|
background: rgba(51, 51, 51, 0.8);
|
||||||
position: relative;
|
position: relative;
|
||||||
height: .28em;
|
height: 0.28em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground {
|
.itemProgressBarForeground {
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.timerIndicator {
|
.timerIndicator {
|
||||||
color: #CB272A;
|
color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timerIndicator-inactive {
|
.timerIndicator-inactive {
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator + .indicator {
|
.indicator + .indicator {
|
||||||
margin-left: .25em;
|
margin-left: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicatorIcon {
|
.indicatorIcon {
|
||||||
|
|
@ -85,12 +85,13 @@
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.missingIndicator, .unairedIndicator {
|
.missingIndicator,
|
||||||
background: #cc3333;
|
.unairedIndicator {
|
||||||
padding: .25em .5em;
|
background: #c33;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
border-radius: 100em;
|
border-radius: 100em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 84%;
|
font-size: 84%;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0 .25em;
|
margin: 0 0.25em;
|
||||||
}
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.lazy {
|
.lazy {
|
||||||
/* In edge, intersection observer will not fire on 0px sized elements */
|
/* In edge, intersection observer will not fire on 0px sized elements */
|
||||||
min-width: .1em;
|
min-width: 0.1em;
|
||||||
min-height: .1em;
|
min-height: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: .25em .25em .25em .5em;
|
padding: 0.25em 0.25em 0.25em 0.5em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -50,14 +50,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-border.show-focus:focus {
|
.listItem-border.show-focus:focus {
|
||||||
transform: scale(1.0) !important;
|
transform: scale(1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemImage, .listItemIcon, .listItemAside {
|
.listItemImage,
|
||||||
|
.listItemIcon,
|
||||||
|
.listItemAside {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemBody, .listItemImage, .listItemIcon {
|
.listItemBody,
|
||||||
|
.listItemImage,
|
||||||
|
.listItemIcon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
@ -71,13 +75,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listViewDragHandle {
|
.listViewDragHandle {
|
||||||
margin-left: -.25em !important;
|
margin-left: -0.25em !important;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemBody {
|
.listItemBody {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: .85em .75em;
|
padding: 0.85em 0.75em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -85,8 +89,15 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.listItem,
|
||||||
|
.listItemBody,
|
||||||
|
.listItemMediaInfo {
|
||||||
|
display: flex;
|
||||||
|
contain: layout style;
|
||||||
|
}
|
||||||
|
|
||||||
.layout-tv .listItemBody {
|
.layout-tv .listItemBody {
|
||||||
padding: .35em .75em;
|
padding: 0.35em 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemBody-noleftpadding {
|
.listItemBody-noleftpadding {
|
||||||
|
|
@ -95,7 +106,7 @@
|
||||||
|
|
||||||
.listItemBodyText {
|
.listItemBodyText {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: .1em 0;
|
padding: 0.1em 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
@ -121,7 +132,7 @@
|
||||||
width: 19.5vw;
|
width: 19.5vw;
|
||||||
height: 13vw;
|
height: 13vw;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
margin-right: .75em;
|
margin-right: 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemImageButton {
|
.listItemImageButton {
|
||||||
|
|
@ -161,13 +172,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemBody {
|
.listItemBody {
|
||||||
padding-left: .75em;
|
padding-left: 0.75em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 50em) {
|
@media all and (max-width: 50em) {
|
||||||
.listItemBody {
|
.listItemBody {
|
||||||
padding-right: .5em;
|
padding-right: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -180,15 +191,15 @@
|
||||||
width: 1em !important;
|
width: 1em !important;
|
||||||
height: 1em !important;
|
height: 1em !important;
|
||||||
font-size: 143%;
|
font-size: 143%;
|
||||||
padding: 0 .25em 0 0;
|
padding: 0 0.25em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemIcon:not(.listItemIcon-transparent) {
|
.listItemIcon:not(.listItemIcon-transparent) {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: .5em;
|
padding: 0.5em;
|
||||||
border-radius: 100em;
|
border-radius: 100em;
|
||||||
margin: 0 .2em 0 .4em;
|
margin: 0 0.2em 0 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemProgressBar {
|
.listItemProgressBar {
|
||||||
|
|
@ -199,7 +210,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus {
|
.listItem:focus {
|
||||||
border-radius: .2em;
|
border-radius: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus .secondary {
|
.listItem:focus .secondary {
|
||||||
|
|
@ -207,7 +218,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-focusscale {
|
.listItem-focusscale {
|
||||||
transition: transform .2s ease-out;
|
transition: transform 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-focusscale:focus {
|
.listItem-focusscale:focus {
|
||||||
|
|
@ -215,7 +226,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.paperList {
|
.paperList {
|
||||||
margin: .5em auto;
|
margin: 0.5em auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paperList-clear {
|
.paperList-clear {
|
||||||
|
|
@ -234,26 +245,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItemIndicators {
|
.listItemIndicators {
|
||||||
right: .324em;
|
right: 0.324em;
|
||||||
top: .324em;
|
top: 0.324em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem, .listItemBody, .listItemMediaInfo {
|
|
||||||
display: flex;
|
|
||||||
contain: layout style;
|
|
||||||
}
|
|
||||||
|
|
||||||
.listItem-bottomoverview {
|
.listItem-bottomoverview {
|
||||||
font-size: 88%;
|
font-size: 88%;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
margin-top: .2em;
|
margin-top: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-1 {
|
.mdl-spinner__layer-1 {
|
||||||
border-color: rgb(66,165,245);
|
border-color: rgb(66, 165, 245);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-1-active {
|
.mdl-spinner__layer-1-active {
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-2 {
|
.mdl-spinner__layer-2 {
|
||||||
border-color: rgb(244,67,54);
|
border-color: rgb(244, 67, 54);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-2-active {
|
.mdl-spinner__layer-2-active {
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-3 {
|
.mdl-spinner__layer-3 {
|
||||||
border-color: rgb(253,216,53);
|
border-color: rgb(253, 216, 53);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-3-active {
|
.mdl-spinner__layer-3-active {
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-4 {
|
.mdl-spinner__layer-4 {
|
||||||
border-color: rgb(76,175,80);
|
border-color: rgb(76, 175, 80);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__layer-4-active {
|
.mdl-spinner__layer-4-active {
|
||||||
|
|
@ -345,23 +345,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-spinner__circle-clipper {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mdl-spinner__circle-clipper .mdl-spinner__circle {
|
|
||||||
width: 200%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mdl-spinner__circle {
|
.mdl-spinner__circle {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-width: .21em;
|
border-width: 0.21em;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: inherit;
|
border-color: inherit;
|
||||||
border-bottom-color: transparent !important;
|
border-bottom-color: transparent !important;
|
||||||
|
|
@ -375,6 +362,19 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mdl-spinner__circle-clipper {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdl-spinner__circle-clipper .mdl-spinner__circle {
|
||||||
|
width: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
.mdl-spinner__circleLeft {
|
.mdl-spinner__circleLeft {
|
||||||
border-right-color: transparent !important;
|
border-right-color: transparent !important;
|
||||||
-webkit-transform: rotate(129deg);
|
-webkit-transform: rotate(129deg);
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText {
|
.mediaInfoText {
|
||||||
padding: .22em .5em;
|
padding: 0.22em 0.5em;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
font-size: 92%;
|
font-size: 92%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 0 .5em 0 0;
|
margin: 0 0.5em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText-upper {
|
.mediaInfoText-upper {
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
margin-right: .6em;
|
margin-right: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoItem:last-child {
|
.mediaInfoItem:last-child {
|
||||||
|
|
@ -63,8 +63,8 @@
|
||||||
|
|
||||||
.mediaInfoProgramAttribute {
|
.mediaInfoProgramAttribute {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
padding: .16em .6em;
|
padding: 0.16em 0.6em;
|
||||||
border-radius: .15em;
|
border-radius: 0.15em;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -73,13 +73,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoOfficialRating {
|
.mediaInfoOfficialRating {
|
||||||
border: .09em solid currentColor;
|
border: 0.09em solid currentColor;
|
||||||
padding: 0 .6em;
|
padding: 0 0.6em;
|
||||||
height: 1.3em;
|
height: 1.3em;
|
||||||
line-height: 1.8em;
|
line-height: 1.8em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: .1em;
|
border-radius: 0.1em;
|
||||||
font-size: 96%;
|
font-size: 96%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: rgba(0, 0, 0, .3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
z-index: 99998;
|
z-index: 99998;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 1em .5em;
|
padding: 1em 0.5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,11 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
contain: strict
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
.touch-menu-la {
|
.touch-menu-la {
|
||||||
background-color: #FFF;
|
background-color: #fff;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
|
|
@ -15,39 +15,38 @@
|
||||||
-webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
|
-webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
|
||||||
-o-transition: transform ease-out 40ms, left ease-out 260ms;
|
-o-transition: transform ease-out 40ms, left ease-out 260ms;
|
||||||
transition: transform ease-out 40ms, left ease-out 260ms;
|
transition: transform ease-out 40ms, left ease-out 260ms;
|
||||||
z-index: 1099
|
z-index: 1099;
|
||||||
}
|
}
|
||||||
|
|
||||||
.touch-menu-la.transition {
|
.touch-menu-la.transition {
|
||||||
-webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
|
-webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
|
||||||
-o-transition: transform ease-out 240ms, left ease-out 260ms;
|
-o-transition: transform ease-out 240ms, left ease-out 260ms;
|
||||||
transition: transform ease-out 240ms, left ease-out 260ms
|
transition: transform ease-out 240ms, left ease-out 260ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-open {
|
.drawer-open {
|
||||||
-webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
|
-webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
|
||||||
box-shadow: 2px 0 12px rgba(0, 0, 0, .4)
|
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollContainer {
|
.scrollContainer {
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tmla-mask {
|
.tmla-mask {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: #000;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 1098;
|
z-index: 1098;
|
||||||
-webkit-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
|
-webkit-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
|
||||||
-o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
|
-o-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
|
||||||
transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
|
transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
|
||||||
will-change: opacity;
|
will-change: opacity;
|
||||||
background-color: rgba(0, 0, 0, .3)
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tmla-mask.backdrop {
|
.tmla-mask.backdrop {
|
||||||
opacity: 1
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBar-hidden {
|
.nowPlayingBar-hidden {
|
||||||
transform: translate3d(0,100%,0);
|
transform: translate3d(0, 100%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBarTop {
|
.nowPlayingBarTop {
|
||||||
|
|
@ -28,7 +28,8 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
|
.mediaButton,
|
||||||
|
.nowPlayingBarUserDataButtons .btnUserItemRating {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -62,6 +63,7 @@
|
||||||
.nowPlayingBarCenter {
|
.nowPlayingBarCenter {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
@ -74,7 +76,7 @@
|
||||||
.nowPlayingBarPositionContainer {
|
.nowPlayingBarPositionContainer {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: -.56em;
|
top: -0.56em;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -89,7 +91,8 @@
|
||||||
|
|
||||||
.nowPlayingBarRight {
|
.nowPlayingBarRight {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 .5em 0 auto;
|
margin: 0 0.5em 0 auto;
|
||||||
|
|
||||||
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -121,7 +124,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 70em) {
|
@media all and (max-width: 70em) {
|
||||||
|
|
||||||
.nowPlayingBarRight .nowPlayingBarUserDataButtons {
|
.nowPlayingBarRight .nowPlayingBarUserDataButtons {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -155,13 +157,15 @@
|
||||||
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
|
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBarInfoContainer {
|
.nowPlayingBarInfoContainer {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 24em) {
|
@media all and (max-width: 24em) {
|
||||||
.nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
|
.nowPlayingBar .muteButton,
|
||||||
|
.nowPlayingBar .unmuteButton {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,11 @@
|
||||||
right: 3%;
|
right: 3%;
|
||||||
z-index: 100000;
|
z-index: 100000;
|
||||||
background: #222;
|
background: #222;
|
||||||
background: rgba(0, 0, 0, .8);
|
background: rgba(0, 0, 0, 0.8);
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
transition: opacity 200ms ease-out;
|
transition: opacity 200ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -19,22 +19,22 @@
|
||||||
.iconOsdIcon {
|
.iconOsdIcon {
|
||||||
font-size: 320%;
|
font-size: 320%;
|
||||||
display: block;
|
display: block;
|
||||||
margin: .25em .7em;
|
margin: 0.25em 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconOsdProgressOuter {
|
.iconOsdProgressOuter {
|
||||||
margin: 1.5em .25em 1em;
|
margin: 1.5em 0.25em 1em;
|
||||||
height: .35em;
|
height: 0.35em;
|
||||||
background: #222;
|
background: #222;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconOsdProgressInner {
|
.iconOsdProgressInner {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brightnessOsdProgressInner {
|
.brightnessOsdProgressInner {
|
||||||
background: #FF9800;
|
background: #ff9800;
|
||||||
}
|
}
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
.playerStats {
|
.playerStats {
|
||||||
background: rgba(28,28,28,0.8);
|
background: rgba(28, 28, 28, 0.8);
|
||||||
border-radius: .3em;
|
border-radius: 0.3em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
left: 1.5em;
|
left: 1.5em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5em;
|
top: 5em;
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.playerStats-tv {
|
.playerStats-tv {
|
||||||
|
|
@ -23,8 +22,8 @@
|
||||||
|
|
||||||
.playerStats-closeButton {
|
.playerStats-closeButton {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: .25em;
|
top: 0.25em;
|
||||||
right: .25em;
|
right: 0.25em;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -44,7 +43,7 @@
|
||||||
|
|
||||||
.playerStats-stat-label {
|
.playerStats-stat-label {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 0 .5em 0 0;
|
margin: 0 0.5em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playerStats-stat-header {
|
.playerStats-stat-header {
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.recordingDialog-itemName {
|
.recordingDialog-itemName {
|
||||||
margin-top: .7em;
|
margin-top: 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recordingDetailsContainer {
|
.recordingDetailsContainer {
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.recordingIcon-active {
|
.recordingIcon-active {
|
||||||
color: #cc3333;
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recordSeriesContainer {
|
.recordSeriesContainer {
|
||||||
margin-bottom: .8em;
|
margin-bottom: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
@ -5,39 +5,39 @@
|
||||||
-webkit-box-orient: horizontal;
|
-webkit-box-orient: horizontal;
|
||||||
-webkit-box-direction: normal;
|
-webkit-box-direction: normal;
|
||||||
-webkit-flex-direction: row;
|
-webkit-flex-direction: row;
|
||||||
flex-direction: row
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigationSection {
|
.navigationSection {
|
||||||
text-align: center
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnArrowUp{
|
.btnArrowUp {
|
||||||
border-radius: 40% 40% 10% 10%;
|
border-radius: 40% 40% 10% 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnArrowLeft{
|
.btnArrowLeft {
|
||||||
border-radius: 40% 10% 10% 40%;
|
border-radius: 40% 10% 10% 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnArrowRight{
|
.btnArrowRight {
|
||||||
border-radius: 10% 40% 40% 10%;
|
border-radius: 10% 40% 40% 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnArrowDown{
|
.btnArrowDown {
|
||||||
border-radius: 10% 10% 40% 40%;
|
border-radius: 10% 10% 40% 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnOk{
|
.btnOk {
|
||||||
border-radius: 10%;
|
border-radius: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingPageTitle {
|
.nowPlayingPageTitle {
|
||||||
margin: 0 0 .5em .5em
|
margin: 0 0 0.5em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingPositionSliderContainer {
|
.nowPlayingPositionSliderContainer {
|
||||||
margin: .7em 0 .7em 1em
|
margin: 0.7em 0 0.7em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingInfoButtons {
|
.nowPlayingInfoButtons {
|
||||||
|
|
@ -48,27 +48,27 @@
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
-webkit-flex-wrap: wrap;
|
-webkit-flex-wrap: wrap;
|
||||||
flex-wrap: wrap
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingInfoControls,
|
.nowPlayingInfoControls,
|
||||||
.nowPlayingTime {
|
.nowPlayingTime {
|
||||||
display: flex;
|
display: flex;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex
|
display: -webkit-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingPageImageContainer {
|
.nowPlayingPageImageContainer {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
margin-right: .25em;
|
margin-right: 0.25em;
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-flex-shrink: 0;
|
-webkit-flex-shrink: 0;
|
||||||
flex-shrink: 0
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
.nowPlayingPageImageContainer {
|
.nowPlayingPageImageContainer {
|
||||||
width: 16%
|
width: 16%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -83,7 +83,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
-webkit-justify-content: center;
|
-webkit-justify-content: center;
|
||||||
justify-content: center
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingPageImage {
|
.nowPlayingPageImage {
|
||||||
|
|
@ -93,16 +93,16 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
-webkit-box-shadow: 0 0 1.9vh #000;
|
-webkit-box-shadow: 0 0 1.9vh #000;
|
||||||
box-shadow: 0 0 1.9vh #000;
|
box-shadow: 0 0 1.9vh #000;
|
||||||
border: .1em solid #222;
|
border: 0.1em solid #222;
|
||||||
user-drag: none;
|
user-drag: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-ms-user-select: none
|
-ms-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (orientation:portrait) and (max-width:50em) {
|
@media all and (orientation: portrait) and (max-width: 50em) {
|
||||||
.nowPlayingInfoContainer {
|
.nowPlayingInfoContainer {
|
||||||
-webkit-box-orient: vertical !important;
|
-webkit-box-orient: vertical !important;
|
||||||
-webkit-box-direction: normal !important;
|
-webkit-box-direction: normal !important;
|
||||||
|
|
@ -110,43 +110,43 @@
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingPageTitle {
|
.nowPlayingPageTitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: .5em 0 .75em
|
margin: 0.5em 0 0.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingPositionSliderContainer {
|
.nowPlayingPositionSliderContainer {
|
||||||
margin: .7em 1em
|
margin: 0.7em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingInfoButtons {
|
.nowPlayingInfoButtons {
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
-webkit-justify-content: center;
|
-webkit-justify-content: center;
|
||||||
justify-content: center
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingPageImageContainer {
|
.nowPlayingPageImageContainer {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-right: 0
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingInfoControls {
|
.nowPlayingInfoControls {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
max-width: 100%
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingPageImage {
|
.nowPlayingPageImage {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 36vh
|
height: 36vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (orientation:portrait) and (max-width:40em) {
|
@media all and (orientation: portrait) and (max-width: 40em) {
|
||||||
.nowPlayingPageImage {
|
.nowPlayingPageImage {
|
||||||
height: 30vh
|
height: 30vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -155,7 +155,7 @@
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0 1em
|
margin: 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingSecondaryButtons {
|
.nowPlayingSecondaryButtons {
|
||||||
|
|
@ -169,35 +169,35 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
-webkit-justify-content: center;
|
-webkit-justify-content: center;
|
||||||
justify-content: center
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:50em) {
|
@media all and (min-width: 50em) {
|
||||||
.nowPlayingSecondaryButtons {
|
.nowPlayingSecondaryButtons {
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
-webkit-box-pack: end;
|
-webkit-box-pack: end;
|
||||||
-webkit-justify-content: flex-end;
|
-webkit-justify-content: flex-end;
|
||||||
justify-content: flex-end
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width:80em) {
|
@media all and (min-width: 80em) {
|
||||||
.nowPlayingPageImageContainer {
|
.nowPlayingPageImageContainer {
|
||||||
margin-right: .75em
|
margin-right: 0.75em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingNavButtonContainer {
|
.nowPlayingNavButtonContainer {
|
||||||
width: 30em
|
width: 30em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.smallBackdropPosterItem .cardOverlayInner>div {
|
.smallBackdropPosterItem .cardOverlayInner > div {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
-o-text-overflow: ellipsis;
|
-o-text-overflow: ellipsis;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistIndexIndicatorImage {
|
.playlistIndexIndicatorImage {
|
||||||
|
|
@ -207,32 +207,33 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.hideVideoButtons .videoButton {
|
.hideVideoButtons .videoButton {
|
||||||
display: none
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingVolumeSliderContainer {
|
.nowPlayingVolumeSliderContainer {
|
||||||
width: 9em
|
width: 9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:50em) {
|
@media all and (max-width: 50em) {
|
||||||
.nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
|
.nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
|
||||||
display: none !important
|
display: none !important;
|
||||||
}
|
}
|
||||||
.navigationSection .collapseContent i{
|
|
||||||
|
.navigationSection .collapseContent i {
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:47em) {
|
@media all and (max-width: 47em) {
|
||||||
.nowPlayingInfoButtons .repeatToggleButton {
|
.nowPlayingInfoButtons .repeatToggleButton {
|
||||||
display: none !important
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:34em) {
|
@media all and (max-width: 34em) {
|
||||||
.nowPlayingInfoButtons .btnNowPlayingFastForward,
|
.nowPlayingInfoButtons .btnNowPlayingFastForward,
|
||||||
.nowPlayingInfoButtons .btnNowPlayingRewind,
|
.nowPlayingInfoButtons .btnNowPlayingRewind,
|
||||||
.nowPlayingInfoButtons .playlist .listItemMediaInfo {
|
.nowPlayingInfoButtons .playlist .listItemMediaInfo {
|
||||||
display: none !important
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchfields-icon {
|
.searchfields-icon {
|
||||||
margin-bottom: .1em;
|
margin-bottom: 0.1em;
|
||||||
margin-right: .25em;
|
margin-right: 0.25em;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,14 @@
|
||||||
background: #000;
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slideshowSwiperContainer, .swiper-wrapper, .swiper-slide {
|
.slideshowSwiperContainer,
|
||||||
|
.swiper-wrapper,
|
||||||
|
.swiper-slide {
|
||||||
background: #000;
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slideshowImage, .slideshowSwiperContainer {
|
.slideshowImage,
|
||||||
|
.slideshowSwiperContainer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -27,11 +30,12 @@
|
||||||
|
|
||||||
.slideshowImageText {
|
.slideshowImageText {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: .25em;
|
bottom: 0.25em;
|
||||||
right: .5em;
|
right: 0.5em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
z-index: 1002;
|
z-index: 1002;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
/* Add an outline */
|
/* Add an outline */
|
||||||
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||||||
}
|
}
|
||||||
|
|
@ -52,26 +56,26 @@
|
||||||
|
|
||||||
.slideshowButtonIcon {
|
.slideshowButtonIcon {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: .7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnSlideshowPrevious {
|
.btnSlideshowPrevious {
|
||||||
left: .5vh;
|
left: 0.5vh;
|
||||||
top: 45vh;
|
top: 45vh;
|
||||||
z-index: 1002;
|
z-index: 1002;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnSlideshowNext {
|
.btnSlideshowNext {
|
||||||
right: .5vh;
|
right: 0.5vh;
|
||||||
top: 45vh;
|
top: 45vh;
|
||||||
z-index: 1002;
|
z-index: 1002;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topActionButtons {
|
.topActionButtons {
|
||||||
right: .5vh;
|
right: 0.5vh;
|
||||||
top: .5vh;
|
top: 0.5vh;
|
||||||
z-index: 1002;
|
z-index: 1002;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
@ -81,9 +85,9 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: rgba(0, 0, 0, .7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: .5%;
|
padding: 0.5%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -95,9 +99,9 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: rgba(0, 0, 0, .7);
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: .5%;
|
padding: 0.5%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -121,14 +125,14 @@
|
||||||
.slideTextInner {
|
.slideTextInner {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 60%;
|
max-width: 60%;
|
||||||
background: rgba(0,0,0,.8);
|
background: rgba(0, 0, 0, 0.8);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .5em 1em;
|
padding: 0.5em 1em;
|
||||||
border-radius: .25em;
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slideTitle {
|
.slideTitle {
|
||||||
margin: 0 0 .25em;
|
margin: 0 0 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slideSubtitle {
|
.slideSubtitle {
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
margin-left: 30%;
|
margin-left: 30%;
|
||||||
margin-right: 30%;
|
margin-right: 30%;
|
||||||
height: 4.2em;
|
height: 4.2em;
|
||||||
background: rgba(28,28,28,0.8);
|
background: rgba(28, 28, 28, 0.8);
|
||||||
border-radius: .3em;
|
border-radius: 0.3em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
@ -43,6 +43,6 @@
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex-grow: 1;
|
-webkit-flex-grow: 1;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
border-radius: .3em;
|
border-radius: 0.3em;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
min-width: 20em;
|
min-width: 20em;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||||
border-radius: .15em;
|
border-radius: 0.15em;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
transition: transform .3s ease-out;
|
transition: transform 0.3s ease-out;
|
||||||
min-height: initial;
|
min-height: initial;
|
||||||
padding: 1em 1.5em;
|
padding: 1em 1.5em;
|
||||||
bottom: 1em;
|
bottom: 1em;
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-bottom: .5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upNextDialog-button {
|
.upNextDialog-button {
|
||||||
|
|
@ -37,7 +37,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (orientation: landscape) {
|
@media all and (orientation: landscape) {
|
||||||
|
|
||||||
.upNextDialog {
|
.upNextDialog {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
.btnUserDataOn {
|
.btnUserDataOn {
|
||||||
color: #cc3333 !important;
|
color: #c33 !important;
|
||||||
}
|
}
|
||||||
|
|
@ -5,8 +5,10 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
contain: layout style size;
|
contain: layout style size;
|
||||||
/* Can't use will-change because it causes the alpha picker to move when the page scrolls*/
|
|
||||||
/*will-change: transform;*/
|
/* Can't use will-change because it causes the alpha picker to move when the page scrolls */
|
||||||
|
|
||||||
|
/* will-change: transform; */
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes view-fadeout {
|
@keyframes view-fadeout {
|
||||||
|
|
@ -18,6 +20,7 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes view-fadein {
|
@keyframes view-fadein {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
|
||||||
|
|
@ -9,13 +9,13 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.youtubePlayerContainer.onTop {
|
.youtubePlayerContainer.onTop {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.youtubePlayerContainer video {
|
.youtubePlayerContainer video {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,9 @@
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
|
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
||||||
|
outline: none !important;
|
||||||
outline-width: 0;
|
outline-width: 0;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
|
|
@ -18,15 +21,13 @@
|
||||||
padding: 0.9em 1em;
|
padding: 0.9em 1em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border: 0;
|
border: 0;
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
|
||||||
outline: none !important;
|
|
||||||
position: relative;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
/* 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);
|
||||||
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;
|
transform-origin: center;
|
||||||
|
|
@ -47,7 +48,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-flat:hover {
|
.button-flat:hover {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-link {
|
.button-link {
|
||||||
|
|
@ -84,7 +85,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: .25em 0;
|
margin: 0.25em 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -93,7 +94,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.29em;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
|
@ -109,17 +110,17 @@
|
||||||
min-height: initial;
|
min-height: initial;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: .556em;
|
padding: 0.556em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border: 0;
|
border: 0;
|
||||||
vertical-align: middle;
|
|
||||||
/* 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;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
||||||
/* 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;
|
transform-origin: center;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
|
|
@ -130,24 +131,25 @@
|
||||||
z-index: 1;
|
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: 0.3;
|
opacity: 0.3;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light > i {
|
.paper-icon-button-light > i {
|
||||||
font-size: 1.66956521739130434em;
|
font-size: 1.66956521739130434em;
|
||||||
|
|
||||||
/* Make sure its on top of the ripple */
|
/* Make sure its on top of the ripple */
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light > div {
|
.paper-icon-button-light > div {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
transform: scale(1.8);
|
transform: scale(1.8);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -155,7 +157,7 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-button-foreground {
|
.emby-button-foreground {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -169,7 +171,6 @@
|
||||||
.filterButtonBubble {
|
.filterButtonBubble {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #444;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 1.6em;
|
width: 1.6em;
|
||||||
|
|
@ -180,7 +181,7 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 82%;
|
font-size: 82%;
|
||||||
border-radius: 100em;
|
border-radius: 100em;
|
||||||
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||||
background: #03A9F4;
|
background: #03a9f4;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,7 @@
|
||||||
|
|
||||||
.emby-checkbox {
|
.emby-checkbox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
/* This is for focusing purposes, so the focusManager doesn't skip over it */
|
/* This is for focusing purposes, so the focusManager doesn't skip over it */
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
|
|
@ -49,14 +50,13 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 1.83em;
|
width: 1.83em;
|
||||||
height: 1.83em;
|
height: 1.83em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 2px solid currentcolor;
|
border: 2px solid currentcolor;
|
||||||
border-radius: .14em;
|
border-radius: 0.14em;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -101,18 +101,18 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxList-verticalwrap > .emby-checkbox-label {
|
.checkboxList-verticalwrap > .emby-checkbox-label {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
margin: .3em 0 .3em 0;
|
margin: 0.3em 0 0.3em 0;
|
||||||
width: 12em;
|
width: 12em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxList-paperList {
|
.checkboxList-paperList {
|
||||||
padding: 1em !important;
|
padding: 1em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxListLabel {
|
.checkboxListLabel {
|
||||||
margin-bottom: .25em;
|
margin-bottom: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes repaintChrome {
|
@keyframes repaintChrome {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
.emby-collapse {
|
.emby-collapse {
|
||||||
margin: .5em 0;
|
margin: 0.5em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapseContent {
|
.collapseContent {
|
||||||
|
|
@ -18,10 +18,9 @@
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-transform: none;
|
border-width: 0 0 0.1em 0;
|
||||||
border-width: 0 0 .1em 0;
|
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
padding-left: .1em;
|
padding-left: 0.1em;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
@ -30,7 +29,7 @@
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
transition: transform 180ms ease-out;
|
transition: transform 180ms ease-out;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: .5em;
|
right: 0.5em;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,24 +2,28 @@
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
|
||||||
/* Remove select styling */
|
/* Remove select styling */
|
||||||
|
|
||||||
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
|
|
||||||
/* General select styles: change as needed */
|
/* General select styles: change as needed */
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
padding: .4em .25em;
|
padding: 0.4em 0.25em;
|
||||||
|
|
||||||
/* Prevent padding from causing width overflow */
|
/* Prevent padding from causing width overflow */
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input::-moz-focus-inner {
|
.emby-input::-moz-focus-inner {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputContainer {
|
.inputContainer {
|
||||||
margin-bottom: 1.8em;
|
margin-bottom: 1.8em;
|
||||||
|
|
@ -27,11 +31,11 @@
|
||||||
|
|
||||||
.inputLabel {
|
.inputLabel {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: .25em;
|
margin-bottom: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input + .fieldDescription {
|
.emby-input + .fieldDescription {
|
||||||
margin-top: .25em;
|
margin-top: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input-iconbutton {
|
.emby-input-iconbutton {
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,9 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: .25em solid rgba(0, 0, 0, 1);
|
border: 0.25em solid rgba(0, 0, 0, 1);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: rgba(0, 0, 0, .9);
|
background: rgba(0, 0, 0, 0.9);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
width: 200%;
|
width: 200%;
|
||||||
height: 200%;
|
height: 200%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border-width: .25em;
|
border-width: 0.25em;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,23 +4,20 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 0;
|
padding-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-label-block {
|
.radio-label-block {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: .5em;
|
margin-top: 0.5em;
|
||||||
margin-bottom: .5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
|
||||||
|
|
||||||
.mdl-radio {
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-radio__button {
|
.mdl-radio__button {
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
/* 1px is for focusing purposes, so the focusManager doesn't skip over it */
|
/* 1px is for focusing purposes, so the focusManager doesn't skip over it */
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
|
|
@ -54,7 +51,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
|
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
|
||||||
border: 2px solid rgba(0,0,0, 0.26);
|
border: 2px solid rgba(0, 0, 0, 0.26);
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -85,16 +82,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||||
background: rgba(0,0,0, 0.26);
|
background: rgba(0, 0, 0, 0.26);
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||||
box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76);
|
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 {
|
.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)
|
box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-radio__label {
|
.mdl-radio__label {
|
||||||
|
|
@ -102,6 +99,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-radio__button:disabled + .mdl-radio__label {
|
.mdl-radio__button:disabled + .mdl-radio__label {
|
||||||
color: rgba(0,0,0, 0.26);
|
color: rgba(0, 0, 0, 0.26);
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,56 +2,60 @@
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
|
||||||
/* Remove select styling */
|
/* Remove select styling */
|
||||||
|
|
||||||
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
|
|
||||||
/* General select styles: change as needed */
|
/* General select styles: change as needed */
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
padding: .5em 1.9em .5em .5em;
|
padding: 0.5em 1.9em 0.5em 0.5em;
|
||||||
|
|
||||||
/* Prevent padding from causing width overflow */
|
/* Prevent padding from causing width overflow */
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select[disabled] {
|
.emby-select[disabled] {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
border-color: transparent !important;
|
border-color: transparent !important;
|
||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
|
||||||
|
|
||||||
.selectContainer-inline > .emby-select {
|
|
||||||
padding: .3em 1.9em .3em .5em;
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectContainer-inline > .emby-select[disabled] {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emby-select::-moz-focus-inner {
|
.emby-select::-moz-focus-inner {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.selectContainer-inline > .emby-select {
|
||||||
|
padding: 0.3em 1.9em 0.3em 0.5em;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectContainer-inline > .emby-select[disabled] {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.emby-select-focusscale {
|
.emby-select-focusscale {
|
||||||
transition: transform 180ms ease-out !important;
|
transition: transform 180ms ease-out !important;
|
||||||
-webkit-transform-origin: center center;
|
-webkit-transform-origin: center center;
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-focusscale:focus {
|
.emby-select-focusscale:focus {
|
||||||
transform: scale(1.04);
|
transform: scale(1.04);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select + .fieldDescription {
|
.emby-select + .fieldDescription {
|
||||||
margin-top: .25em;
|
margin-top: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectContainer {
|
.selectContainer {
|
||||||
|
|
@ -67,32 +71,32 @@
|
||||||
|
|
||||||
.selectLabel {
|
.selectLabel {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: .25em;
|
margin-bottom: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectContainer-inline > .selectLabel {
|
.selectContainer-inline > .selectLabel {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-right: .5em;
|
margin-right: 0.5em;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor {
|
.emby-select-withcolor {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
border-radius: .2em;
|
border-radius: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectArrowContainer {
|
.selectArrowContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: .3em;
|
right: 0.3em;
|
||||||
top: .2em;
|
top: 0.2em;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectContainer-inline > .selectArrowContainer {
|
.selectContainer-inline > .selectArrowContainer {
|
||||||
top: initial;
|
top: initial;
|
||||||
bottom: .24em;
|
bottom: 0.24em;
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,7 +105,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectArrow {
|
.selectArrow {
|
||||||
margin-top: .35em;
|
margin-top: 0.35em;
|
||||||
font-size: 1.7em;
|
font-size: 1.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
_:-ms-input-placeholder {
|
:-ms-input-placeholder {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-ms-appearance: none;
|
-ms-appearance: none;
|
||||||
height: 2.223em;
|
height: 2.223em;
|
||||||
|
|
@ -11,7 +11,7 @@ _:-ms-input-placeholder {
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-ms-appearance: none;
|
-ms-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/
|
height: 150%;/* 150% is needed, else ie and edge won't display the thumb properly */
|
||||||
background: transparent;
|
background: transparent;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
|
@ -25,51 +25,52 @@ _:-ms-input-placeholder {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
/* 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);
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-moz-focus-outer {
|
.mdl-slider::-moz-focus-outer {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-ms-tooltip {
|
.mdl-slider::-ms-tooltip {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-webkit-slider-runnable-track {
|
.mdl-slider::-webkit-slider-runnable-track {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-moz-range-track {
|
.mdl-slider::-moz-range-track {
|
||||||
background: #444;
|
background: #444;
|
||||||
border: none;
|
border: none;
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-moz-range-progress {
|
.mdl-slider::-moz-range-progress {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-ms-track {
|
.mdl-slider::-ms-track {
|
||||||
background: none;
|
background: none;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
height: .2em;
|
height: 0.2em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-ms-fill-lower {
|
.mdl-slider::-ms-fill-lower {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-ms-fill-upper {
|
.mdl-slider::-ms-fill-upper {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-webkit-slider-thumb {
|
.mdl-slider::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
width: 1.2em;
|
width: 1.2em;
|
||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
|
|
@ -78,7 +79,7 @@ _:-ms-input-placeholder {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
border: none;
|
border: none;
|
||||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider-hoverthumb::-webkit-slider-thumb {
|
.mdl-slider-hoverthumb::-webkit-slider-thumb {
|
||||||
transform: none;
|
transform: none;
|
||||||
|
|
@ -102,10 +103,10 @@ _:-ms-input-placeholder {
|
||||||
height: 0.9em;
|
height: 0.9em;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-image: none;
|
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
|
background-image: none;
|
||||||
border: none;
|
border: none;
|
||||||
transform: Scale(1.4, 1.4);
|
transform: scale(1.4, 1.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider::-ms-thumb {
|
.mdl-slider::-ms-thumb {
|
||||||
|
|
@ -116,13 +117,13 @@ _:-ms-input-placeholder {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
border: none;
|
border: none;
|
||||||
transform: scale(.9, .9);
|
transform: scale(0.9, 0.9);
|
||||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider-hoverthumb::-ms-thumb {
|
.mdl-slider-hoverthumb::-ms-thumb {
|
||||||
margin-left: -.4em;
|
margin-left: -0.4em;
|
||||||
transform: scale(.5, .5);
|
transform: scale(0.5, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider:hover::-ms-thumb {
|
.mdl-slider:hover::-ms-thumb {
|
||||||
|
|
@ -160,15 +161,15 @@ _:-ms-input-placeholder {
|
||||||
.mdl-slider-background-flex-container {
|
.mdl-slider-background-flex-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin-top: -.05em;
|
margin-top: -0.05em;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider-background-flex {
|
.mdl-slider-background-flex {
|
||||||
background: #333;
|
background: #333;
|
||||||
height: .2em;
|
height: 0.2em;
|
||||||
margin-top: -.08em;
|
margin-top: -0.08em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -184,7 +185,7 @@ _:-ms-input-placeholder {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider-background-lower {
|
.mdl-slider-background-lower {
|
||||||
/*transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
/* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|
@ -199,15 +200,16 @@ _:-ms-input-placeholder {
|
||||||
|
|
||||||
.mdl-slider-background-lower-withtransform {
|
.mdl-slider-background-lower-withtransform {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/*transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
|
||||||
|
/* transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
|
||||||
transform-origin: left center;
|
transform-origin: left center;
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-slider-background-upper {
|
.mdl-slider-background-upper {
|
||||||
/*transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
/* transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
|
||||||
background: #666;
|
background: #666;
|
||||||
background: rgba(255, 255, 255, .4);
|
background: rgba(255, 255, 255, 0.4);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|
@ -229,5 +231,5 @@ _:-ms-input-placeholder {
|
||||||
|
|
||||||
.sliderBubbleText {
|
.sliderBubbleText {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: .5em .75em;
|
padding: 0.5em 0.75em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,31 +2,35 @@
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
|
||||||
/* Remove select styling */
|
/* Remove select styling */
|
||||||
|
|
||||||
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
|
||||||
/* General select styles: change as needed */
|
/* General select styles: change as needed */
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
padding: .35em .25em;
|
padding: 0.35em 0.25em;
|
||||||
|
|
||||||
/* Prevent padding from causing width overflow */
|
/* Prevent padding from causing width overflow */
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-textarea::-moz-focus-inner {
|
.emby-textarea::-moz-focus-inner {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.textareaLabel {
|
.textareaLabel {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transition: all .2s ease-out;
|
transition: all 0.2s ease-out;
|
||||||
margin-bottom: .25em;
|
margin-bottom: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-textarea + .fieldDescription {
|
.emby-textarea + .fieldDescription {
|
||||||
margin-top: .25em;
|
margin-top: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-switch__track {
|
.mdl-switch__track {
|
||||||
background: rgba(128,128,128, 0.5);
|
background: rgba(128, 128, 128, 0.5);
|
||||||
height: 1em;
|
height: 1em;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
||||||
background: rgba(0,0,0, 0.12);
|
background: rgba(0, 0, 0, 0.12);
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
background: #999;
|
background: #999;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: -.25em;
|
top: -0.25em;
|
||||||
height: 1.44em;
|
height: 1.44em;
|
||||||
width: 1.44em;
|
width: 1.44em;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
@ -77,11 +77,11 @@
|
||||||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
left: 1.466em;
|
left: 1.466em;
|
||||||
box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12);
|
box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 0.56em 0 rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||||
background: rgb(189,189,189);
|
background: rgb(189, 189, 189);
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -93,14 +93,14 @@
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: .6em;
|
width: 0.6em;
|
||||||
height: .6em;
|
height: 0.6em;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
|
.mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
|
||||||
box-shadow: 0 0 0 1.39em rgba(0, 0, 0, .05);
|
box-shadow: 0 0 0 1.39em rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
|
.mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
|
||||||
|
|
@ -113,10 +113,10 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: .7em;
|
margin-left: 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdl-switch__input[disabled] .mdl-switch__label {
|
.mdl-switch__input[disabled] .mdl-switch__label {
|
||||||
color: rgb(189,189,189);
|
color: rgb(189, 189, 189);
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,68 +1,68 @@
|
||||||
.skinHeader,
|
.skinHeader,
|
||||||
html {
|
html {
|
||||||
color: #222;
|
color: #222;
|
||||||
color: rgba(0, 0, 0, .87)
|
color: rgba(0, 0, 0, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizardStartForm,
|
.wizardStartForm,
|
||||||
.ui-corner-all,
|
.ui-corner-all,
|
||||||
.ui-shadow {
|
.ui-shadow {
|
||||||
background-color: #303030
|
background-color: #303030;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-collapsible-button {
|
.emby-collapsible-button {
|
||||||
border-color: #ccc;
|
border-color: #ccc;
|
||||||
border-color: rgba(0, 0, 0, .158)
|
border-color: rgba(0, 0, 0, 0.158);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapseContent {
|
.collapseContent {
|
||||||
background-color: #eaeaea
|
background-color: #eaeaea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeader:not(.formDialogHeader-clear),
|
.formDialogHeader:not(.formDialogHeader-clear),
|
||||||
.skinHeader-withBackground {
|
.skinHeader-withBackground {
|
||||||
color: rgba(0, 0, 0, .7);
|
color: rgba(0, 0, 0, 0.7);
|
||||||
background: #303030;
|
background: #303030;
|
||||||
background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB));
|
background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));
|
||||||
background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
|
background: -webkit-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||||
background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
|
background: -o-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||||
background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
|
background: linear-gradient(to right, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader.semiTransparent {
|
.skinHeader.semiTransparent {
|
||||||
-webkit-backdrop-filter: none !important;
|
-webkit-backdrop-filter: none !important;
|
||||||
backdrop-filter: none !important
|
backdrop-filter: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageTitleWithDefaultLogo {
|
.pageTitleWithDefaultLogo {
|
||||||
background-image: url(../../assets/img/banner-dark.png)
|
background-image: url(../../assets/img/banner-dark.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background: #D5E9F2
|
background: #d5e9f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer,
|
.backgroundContainer,
|
||||||
.dialog {
|
.dialog {
|
||||||
background: #D5E9F2;
|
background: #d5e9f2;
|
||||||
-webkit-background-size: 100% 100%;
|
-webkit-background-size: 100% 100%;
|
||||||
background-size: 100% 100%
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer.withBackdrop {
|
.backgroundContainer.withBackdrop {
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 212, 222, .94)), color-stop(rgba(235, 250, 254, .94)), color-stop(rgba(227, 220, 212, .94)), color-stop(rgba(206, 214, 216, .94)), to(rgba(192, 211, 218, .94)));
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 212, 222, 0.94)), color-stop(rgba(235, 250, 254, 0.94)), color-stop(rgba(227, 220, 212, 0.94)), color-stop(rgba(206, 214, 216, 0.94)), to(rgba(192, 211, 218, 0.94)));
|
||||||
background: -webkit-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94));
|
background: -webkit-linear-gradient(top, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94));
|
||||||
background: -o-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94));
|
background: -o-linear-gradient(top, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94));
|
||||||
background: linear-gradient(to bottom, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94))
|
background: linear-gradient(to bottom, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94));
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheet {
|
.actionSheet {
|
||||||
background: #f0f0f0
|
background: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light:hover:not(:disabled) {
|
.paper-icon-button-light:hover:not(:disabled) {
|
||||||
color: #00a4dc;
|
color: #00a4dc;
|
||||||
background-color: rgba(0,164,220, .2);
|
background-color: rgba(0, 164, 220, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light.show-focus:focus {
|
.paper-icon-button-light.show-focus:focus {
|
||||||
|
|
@ -72,31 +72,31 @@ html {
|
||||||
.fab,
|
.fab,
|
||||||
.raised {
|
.raised {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
background: rgba(0, 0, 0, .14);
|
background: rgba(0, 0, 0, 0.14);
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab:focus,
|
.fab:focus,
|
||||||
.raised:focus {
|
.raised:focus {
|
||||||
background: rgba(0, 0, 0, .24)
|
background: rgba(0, 0, 0, 0.24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit {
|
.button-submit {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit:focus {
|
.button-submit:focus {
|
||||||
background: #0cb0e8
|
background: #0cb0e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-delete {
|
.button-delete {
|
||||||
background: rgb(247, 0, 0);
|
background: rgb(247, 0, 0);
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxLabel {
|
.checkboxLabel {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxListLabel,
|
.checkboxListLabel,
|
||||||
|
|
@ -105,49 +105,49 @@ html {
|
||||||
.paperListLabel,
|
.paperListLabel,
|
||||||
.textareaLabelUnfocused {
|
.textareaLabelUnfocused {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(0, 0, 0, .7)
|
color: rgba(0, 0, 0, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-link,
|
.button-link,
|
||||||
.inputLabelFocused,
|
.inputLabelFocused,
|
||||||
.selectLabelFocused,
|
.selectLabelFocused,
|
||||||
.textareaLabelFocused {
|
.textareaLabelFocused {
|
||||||
color: green
|
color: green;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxOutline {
|
.checkboxOutline {
|
||||||
border-color: currentColor
|
border-color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paperList,
|
.paperList,
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-color: rgba(0, 0, 0, .1)
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground1 {
|
.defaultCardBackground1 {
|
||||||
background-color: #009688
|
background-color: #009688;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground2 {
|
.defaultCardBackground2 {
|
||||||
background-color: #D32F2F
|
background-color: #d32f2f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground3 {
|
.defaultCardBackground3 {
|
||||||
background-color: #0288D1
|
background-color: #0288d1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground4 {
|
.defaultCardBackground4 {
|
||||||
background-color: #388E3C
|
background-color: #388e3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground5 {
|
.defaultCardBackground5 {
|
||||||
background-color: #F57F17
|
background-color: #f57f17;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogFooter:not(.formDialogFooter-clear) {
|
.formDialogFooter:not(.formDialogFooter-clear) {
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
border-top: 1px solid rgba(0, 0, 0, .08)
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText-secondary,
|
.cardText-secondary,
|
||||||
|
|
@ -158,177 +158,177 @@ html {
|
||||||
.programSecondaryTitle,
|
.programSecondaryTitle,
|
||||||
.secondaryText {
|
.secondaryText {
|
||||||
color: #888;
|
color: #888;
|
||||||
color: rgba(0, 0, 0, .5)
|
color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetDivider {
|
.actionsheetDivider {
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
background: rgba(0, 0, 0, .14)
|
background: rgba(0, 0, 0, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter-vibrant .cardText-secondary {
|
.cardFooter-vibrant .cardText-secondary {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: .5
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeader a,
|
.formDialogHeader a,
|
||||||
.toast {
|
.toast {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetMenuItem:hover {
|
.actionSheetMenuItem:hover {
|
||||||
background-color: #ddd
|
background-color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
background: #303030;
|
background: #303030;
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter,
|
.appfooter,
|
||||||
.formDialogFooter:not(.formDialogFooter-clear) {
|
.formDialogFooter:not(.formDialogFooter-clear) {
|
||||||
color: rgba(0, 0, 0, .7);
|
color: rgba(0, 0, 0, 0.7);
|
||||||
background: #303030;
|
background: #303030;
|
||||||
background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB));
|
background: -webkit-gradient(linear, left top, right top, from(#bcbcbc), color-stop(#a7b4b7), color-stop(#beb5a5), color-stop(#adbec2), to(#b9c7cb));
|
||||||
background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
|
background: -webkit-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||||
background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
|
background: -o-linear-gradient(left, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||||
background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
|
background: linear-gradient(to right, #bcbcbc, #a7b4b7, #beb5a5, #adbec2, #b9c7cb);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBarSecondaryText {
|
.nowPlayingBarSecondaryText {
|
||||||
color: #999
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSelectionPanel {
|
.itemSelectionPanel {
|
||||||
border: 1px solid #00a4dc
|
border: 1px solid #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionCommandsPanel {
|
.selectionCommandsPanel {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upNextDialog-countdownText {
|
.upNextDialog-countdownText {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton {
|
.alphaPickerButton {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(0, 0, 0, .7);
|
color: rgba(0, 0, 0, 0.7);
|
||||||
background-color: transparent
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-selected,
|
.alphaPickerButton-selected,
|
||||||
.alphaPickerButton-tv:focus {
|
.alphaPickerButton-tv:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTableBodyRow-shaded:nth-child(even) {
|
.detailTableBodyRow-shaded:nth-child(even) {
|
||||||
background: #f8f8f8;
|
background: #f8f8f8;
|
||||||
background: rgba(0, 0, 0, .1)
|
background: rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-border {
|
.listItem-border {
|
||||||
border-color: rgba(0, 0, 0, .1) !important
|
border-color: rgba(0, 0, 0, 0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus {
|
.listItem:focus {
|
||||||
background: rgba(0, 0, 0, .2)
|
background: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progressring-spiner {
|
.progressring-spiner {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText {
|
.mediaInfoText {
|
||||||
color: #333;
|
color: #333;
|
||||||
background: #fff
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoTimerIcon,
|
.mediaInfoTimerIcon,
|
||||||
.starIcon {
|
.starIcon {
|
||||||
color: #CB272A
|
color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input,
|
.emby-input,
|
||||||
.emby-textarea {
|
.emby-textarea {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: rgba(255, 255, 255, .9);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
border: .07em solid rgba(0, 0, 0, .158);
|
border: 0.07em solid rgba(0, 0, 0, 0.158);
|
||||||
-webkit-border-radius: .15em;
|
-webkit-border-radius: 0.15em;
|
||||||
border-radius: .15em
|
border-radius: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input:focus,
|
.emby-input:focus,
|
||||||
.emby-textarea:focus {
|
.emby-textarea:focus {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor {
|
.emby-select-withcolor {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: rgba(255, 255, 255, .9);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
border: .07em solid rgba(0, 0, 0, .158)
|
border: 0.07em solid rgba(0, 0, 0, 0.158);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline,
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
.emby-select-withcolor:focus {
|
.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;
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor>option {
|
.emby-checkbox:focus + span + .checkboxOutline {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
|
.itemProgressBarForeground {
|
||||||
|
background-color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
||||||
|
border-color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-select-withcolor > option {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: #fff
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-tv-withcolor:focus {
|
.emby-select-tv-withcolor:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline,
|
|
||||||
.itemProgressBarForeground {
|
|
||||||
background-color: #00a4dc
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground-recording {
|
.itemProgressBarForeground-recording {
|
||||||
background-color: #CB272A
|
background-color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countIndicator,
|
.countIndicator,
|
||||||
.fullSyncIndicator,
|
.fullSyncIndicator,
|
||||||
.playedIndicator {
|
.playedIndicator {
|
||||||
background: #00a4dc
|
background: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullSyncIndicator {
|
.fullSyncIndicator {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainDrawer {
|
.mainDrawer {
|
||||||
background: #fff
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption:hover {
|
.navMenuOption:hover {
|
||||||
background: #f2f2f2
|
background: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption-selected {
|
.navMenuOption-selected {
|
||||||
background: #00a4dc !important;
|
background: #00a4dc !important;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-button.show-focus:focus {
|
.emby-button.show-focus:focus {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button {
|
.emby-tab-button {
|
||||||
|
|
@ -351,89 +351,89 @@ html {
|
||||||
.guide-channelHeaderCell,
|
.guide-channelHeaderCell,
|
||||||
.programCell {
|
.programCell {
|
||||||
border-color: #555;
|
border-color: #555;
|
||||||
border-color: rgba(0, 0, 0, .1)
|
border-color: rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-sports {
|
.programCell-sports {
|
||||||
background: #3949AB !important
|
background: #3949ab !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-movie {
|
.programCell-movie {
|
||||||
background: #5E35B1 !important
|
background: #5e35b1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-kids {
|
.programCell-kids {
|
||||||
background: #039BE5 !important
|
background: #039be5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-news {
|
.programCell-news {
|
||||||
background: #43A047 !important
|
background: #43a047 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-active {
|
.programCell-active {
|
||||||
background: rgba(0, 0, 0, .1) !important
|
background: rgba(0, 0, 0, 0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelHeaderCell:focus,
|
.guide-channelHeaderCell:focus,
|
||||||
.programCell:focus {
|
.programCell:focus {
|
||||||
background-color: #00a4dc !important;
|
background-color: #00a4dc !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programTextIcon {
|
.guide-programTextIcon {
|
||||||
color: #1e1e1e;
|
color: #1e1e1e;
|
||||||
background: #555
|
background: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-headerTimeslots {
|
.guide-headerTimeslots {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button {
|
.guide-date-tab-button {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(0, 0, 0, .54)
|
color: rgba(0, 0, 0, 0.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.emby-tab-button-active,
|
.guide-date-tab-button.emby-tab-button-active,
|
||||||
.guide-date-tab-button:focus {
|
.guide-date-tab-button:focus {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.show-focus:focus {
|
.guide-date-tab-button.show-focus:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infoBanner {
|
.infoBanner {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: #fff3a5;
|
background: #fff3a5;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
-webkit-border-radius: .25em;
|
-webkit-border-radius: 0.25em;
|
||||||
border-radius: .25em
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ratingbutton-icon-withrating {
|
.ratingbutton-icon-withrating {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadbutton-icon-complete,
|
.downloadbutton-icon-complete,
|
||||||
.downloadbutton-icon-on {
|
.downloadbutton-icon-on {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playstatebutton-icon-played {
|
.playstatebutton-icon-played {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeatButton-active {
|
.repeatButton-active {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:focus .cardBox.visualCardBox,
|
.card:focus .cardBox.visualCardBox,
|
||||||
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
border-color: #00a4dc !important
|
border-color: #00a4dc !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadataSidebarIcon {
|
.metadataSidebarIcon {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,66 @@
|
||||||
.skinHeader,
|
.skinHeader,
|
||||||
html {
|
html {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
color: rgba(255, 255, 255, .8)
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizardStartForm,
|
.wizardStartForm,
|
||||||
.ui-corner-all,
|
.ui-corner-all,
|
||||||
.ui-shadow {
|
.ui-shadow {
|
||||||
background-color: #303030
|
background-color: #303030;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-collapsible-button {
|
.emby-collapsible-button {
|
||||||
border-color: #383838;
|
border-color: #383838;
|
||||||
border-color: rgba(255, 255, 255, .135)
|
border-color: rgba(255, 255, 255, 0.135);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader-withBackground {
|
.skinHeader-withBackground {
|
||||||
background: #303030;
|
background: #303030;
|
||||||
background: -webkit-gradient(linear, left top, right top, from(#291A31), color-stop(#033664), color-stop(#011432), color-stop(#141A3A), to(#291A31));
|
background: -webkit-gradient(linear, left top, right top, from(#291a31), color-stop(#033664), color-stop(#011432), color-stop(#141a3a), to(#291a31));
|
||||||
background: -webkit-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31);
|
background: -webkit-linear-gradient(left, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||||
background: -o-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31);
|
background: -o-linear-gradient(left, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||||
background: linear-gradient(to right, #291A31, #033664, #011432, #141A3A, #291A31)
|
background: linear-gradient(to right, #291a31, #033664, #011432, #141a3a, #291a31);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader.semiTransparent {
|
.skinHeader.semiTransparent {
|
||||||
-webkit-backdrop-filter: none !important;
|
-webkit-backdrop-filter: none !important;
|
||||||
backdrop-filter: none !important;
|
backdrop-filter: none !important;
|
||||||
background-color: rgba(0, 0, 0, .3);
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
|
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageTitleWithDefaultLogo {
|
.pageTitleWithDefaultLogo {
|
||||||
background-image: url(../../assets/img/banner-light.png)
|
background-image: url(../../assets/img/banner-light.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog,
|
.dialog,
|
||||||
html {
|
html {
|
||||||
background-color: #033361
|
background-color: #033361;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer {
|
.backgroundContainer {
|
||||||
background: url(bg.jpg) center top no-repeat #033361;
|
background: url(bg.jpg) center top no-repeat #033361;
|
||||||
-webkit-background-size: cover;
|
-webkit-background-size: cover;
|
||||||
background-size: cover
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer.withBackdrop {
|
.backgroundContainer.withBackdrop {
|
||||||
opacity: .86
|
opacity: 0.86;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation:portrait) {
|
@media (orientation: portrait) {
|
||||||
.backgroundContainer {
|
.backgroundContainer {
|
||||||
background-position: 30% top
|
background-position: 30% top;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light:hover:not(:disabled) {
|
.paper-icon-button-light:hover:not(:disabled) {
|
||||||
color: #00a4dc;
|
color: #00a4dc;
|
||||||
background-color: rgba(0,164,220, .2);
|
background-color: rgba(0, 164, 220, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light.show-focus:focus {
|
.paper-icon-button-light.show-focus:focus {
|
||||||
|
|
@ -69,32 +69,32 @@ html {
|
||||||
|
|
||||||
.fab,
|
.fab,
|
||||||
.raised {
|
.raised {
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab:focus,
|
.fab:focus,
|
||||||
.raised:focus {
|
.raised:focus {
|
||||||
background: rgba(0, 0, 0, .7)
|
background: rgba(0, 0, 0, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit {
|
.button-submit {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit:focus {
|
.button-submit:focus {
|
||||||
background: #0cb0e8;
|
background: #0cb0e8;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-delete {
|
.button-delete {
|
||||||
background: rgb(247, 0, 0);
|
background: rgb(247, 0, 0);
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxLabel {
|
.checkboxLabel {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxListLabel,
|
.checkboxListLabel,
|
||||||
|
|
@ -103,17 +103,17 @@ html {
|
||||||
.paperListLabel,
|
.paperListLabel,
|
||||||
.textareaLabelUnfocused {
|
.textareaLabelUnfocused {
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
color: rgba(255, 255, 255, .7)
|
color: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputLabelFocused,
|
.inputLabelFocused,
|
||||||
.selectLabelFocused,
|
.selectLabelFocused,
|
||||||
.textareaLabelFocused {
|
.textareaLabelFocused {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxOutline {
|
.checkboxOutline {
|
||||||
border-color: currentColor
|
border-color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapseContent,
|
.collapseContent,
|
||||||
|
|
@ -121,27 +121,27 @@ html {
|
||||||
.formDialogHeader:not(.formDialogHeader-clear),
|
.formDialogHeader:not(.formDialogHeader-clear),
|
||||||
.paperList,
|
.paperList,
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
background-color: rgba(0, 0, 0, .5)
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground1 {
|
.defaultCardBackground1 {
|
||||||
background-color: #d2b019
|
background-color: #d2b019;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground2 {
|
.defaultCardBackground2 {
|
||||||
background-color: #338abb
|
background-color: #338abb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground3 {
|
.defaultCardBackground3 {
|
||||||
background-color: #6b689d
|
background-color: #6b689d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground4 {
|
.defaultCardBackground4 {
|
||||||
background-color: #dd452b
|
background-color: #dd452b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground5 {
|
.defaultCardBackground5 {
|
||||||
background-color: #5ccea9
|
background-color: #5ccea9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText-secondary,
|
.cardText-secondary,
|
||||||
|
|
@ -152,187 +152,187 @@ html {
|
||||||
.programSecondaryTitle,
|
.programSecondaryTitle,
|
||||||
.secondaryText {
|
.secondaryText {
|
||||||
color: #999;
|
color: #999;
|
||||||
color: rgba(255, 255, 255, .5)
|
color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetDivider {
|
.actionsheetDivider {
|
||||||
background: #444;
|
background: #444;
|
||||||
background: rgba(255, 255, 255, .14)
|
background: rgba(255, 255, 255, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter-vibrant .cardText-secondary {
|
.cardFooter-vibrant .cardText-secondary {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: .5
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetMenuItem:hover {
|
.actionSheetMenuItem:hover {
|
||||||
background-color: rgba(0, 0, 0, .5)
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
background: #303030;
|
background: #303030;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter {
|
.appfooter {
|
||||||
background: #033664;
|
background: #033664;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
color: rgba(255, 255, 255, .78)
|
color: rgba(255, 255, 255, 0.78);
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
|
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
|
||||||
.appfooter-blurred {
|
.appfooter-blurred {
|
||||||
background: rgba(1, 2, 50, .7);
|
background: rgba(1, 2, 50, 0.7);
|
||||||
backdrop-filter: blur(20px)
|
backdrop-filter: blur(20px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSelectionPanel {
|
.itemSelectionPanel {
|
||||||
border: 1px solid #00a4dc
|
border: 1px solid #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionCommandsPanel {
|
.selectionCommandsPanel {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upNextDialog-countdownText {
|
.upNextDialog-countdownText {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton {
|
.alphaPickerButton {
|
||||||
color: #999;
|
color: #999;
|
||||||
color: rgba(255, 255, 255, .5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
background-color: transparent
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-selected {
|
.alphaPickerButton-selected {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-tv:focus {
|
.alphaPickerButton-tv:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTableBodyRow-shaded:nth-child(even) {
|
.detailTableBodyRow-shaded:nth-child(even) {
|
||||||
background: #1c1c1c;
|
background: #1c1c1c;
|
||||||
background: rgba(30, 30, 30, .9)
|
background: rgba(30, 30, 30, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-border {
|
.listItem-border {
|
||||||
border-color: rgba(255, 255, 255, .1) !important
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus {
|
.listItem:focus {
|
||||||
background: rgba(0, 0, 0, .3)
|
background: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progressring-spiner {
|
.progressring-spiner {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-flat-accent,
|
.button-flat-accent,
|
||||||
.button-link {
|
.button-link {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText {
|
.mediaInfoText {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
background: rgba(170, 170, 190, .2)
|
background: rgba(170, 170, 190, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoTimerIcon,
|
.mediaInfoTimerIcon,
|
||||||
.starIcon {
|
.starIcon {
|
||||||
color: #CB272A
|
color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input,
|
.emby-input,
|
||||||
.emby-textarea {
|
.emby-textarea {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
border: .07em solid transparent;
|
border: 0.07em solid transparent;
|
||||||
-webkit-border-radius: .15em;
|
-webkit-border-radius: 0.15em;
|
||||||
border-radius: .15em
|
border-radius: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input:focus,
|
.emby-input:focus,
|
||||||
.emby-textarea:focus {
|
.emby-textarea:focus {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor {
|
.emby-select-withcolor {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
border: .07em solid transparent
|
border: 0.07em solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor>option {
|
.emby-select-withcolor > option {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: #222
|
background: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor:focus {
|
.emby-select-withcolor:focus {
|
||||||
border-color: #00a4dc !important
|
border-color: #00a4dc !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-tv-withcolor:focus {
|
.emby-select-tv-withcolor:focus {
|
||||||
background-color: #00a4dc !important;
|
background-color: #00a4dc !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline {
|
.emby-checkbox:checked + span + .checkboxOutline {
|
||||||
border-color: #00a4dc
|
|
||||||
}
|
|
||||||
|
|
||||||
.emby-checkbox:focus+span+.checkboxOutline {
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
|
|
||||||
border-color: #00a4dc;
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline,
|
.emby-checkbox:focus + span + .checkboxOutline {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
.itemProgressBarForeground {
|
.itemProgressBarForeground {
|
||||||
background-color: #00a4dc
|
background-color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
||||||
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground-recording {
|
.itemProgressBarForeground-recording {
|
||||||
background-color: #CB272A
|
background-color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countIndicator,
|
.countIndicator,
|
||||||
.fullSyncIndicator,
|
.fullSyncIndicator,
|
||||||
.playedIndicator {
|
.playedIndicator {
|
||||||
background: #00a4dc
|
background: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullSyncIndicator {
|
.fullSyncIndicator {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainDrawer {
|
.mainDrawer {
|
||||||
background-color: rgba(0, 0, 0, .5)
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-open {
|
.drawer-open {
|
||||||
background-color: #011432
|
background-color: #011432;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption:hover {
|
.navMenuOption:hover {
|
||||||
background: rgba(221, 221, 221, 0.068)
|
background: rgba(221, 221, 221, 0.068);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption-selected {
|
.navMenuOption-selected {
|
||||||
background: #00a4dc !important;
|
background: #00a4dc !important;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-button.show-focus:focus {
|
.emby-button.show-focus:focus {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button {
|
.emby-tab-button {
|
||||||
|
|
@ -340,7 +340,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button-active {
|
.emby-tab-button-active {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button.show-focus:focus {
|
.emby-tab-button.show-focus:focus {
|
||||||
|
|
@ -354,112 +354,114 @@ html {
|
||||||
.channelPrograms,
|
.channelPrograms,
|
||||||
.guide-channelHeaderCell,
|
.guide-channelHeaderCell,
|
||||||
.programCell {
|
.programCell {
|
||||||
border-color: rgba(255, 255, 255, .05)
|
border-color: rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-sports {
|
.programCell-sports {
|
||||||
background: #3949AB !important
|
background: #3949ab !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-movie {
|
.programCell-movie {
|
||||||
background: #5E35B1 !important
|
background: #5e35b1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-kids {
|
.programCell-kids {
|
||||||
background: #039BE5 !important
|
background: #039be5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-news {
|
.programCell-news {
|
||||||
background: #43A047 !important
|
background: #43a047 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-active {
|
.programCell-active {
|
||||||
background: rgba(0, 0, 0, .4) !important
|
background: rgba(0, 0, 0, 0.4) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelHeaderCell:focus,
|
.guide-channelHeaderCell:focus,
|
||||||
.programCell:focus {
|
.programCell:focus {
|
||||||
background-color: #00a4dc !important;
|
background-color: #00a4dc !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programTextIcon {
|
.guide-programTextIcon {
|
||||||
color: #1e1e1e;
|
color: #1e1e1e;
|
||||||
background: #555
|
background: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-headerTimeslots {
|
.guide-headerTimeslots {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button {
|
.guide-date-tab-button {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(255, 255, 255, .3)
|
color: rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.emby-tab-button-active,
|
.guide-date-tab-button.emby-tab-button-active,
|
||||||
.guide-date-tab-button:focus {
|
.guide-date-tab-button:focus {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.show-focus:focus {
|
.guide-date-tab-button.show-focus:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infoBanner {
|
.infoBanner {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
background: #111;
|
background: #111;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
-webkit-border-radius: .25em;
|
-webkit-border-radius: 0.25em;
|
||||||
border-radius: .25em
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ratingbutton-icon-withrating {
|
.ratingbutton-icon-withrating {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadbutton-icon-complete,
|
.downloadbutton-icon-complete,
|
||||||
.downloadbutton-icon-on {
|
.downloadbutton-icon-on {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playstatebutton-icon-played {
|
.playstatebutton-icon-played {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeatButton-active {
|
.repeatButton-active {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:focus .cardBox.visualCardBox,
|
.card:focus .cardBox.visualCardBox,
|
||||||
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
border-color: #00a4dc !important
|
border-color: #00a4dc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track-piece {
|
||||||
|
background-color: #3b3b3b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-desktop ::-webkit-scrollbar {
|
.layout-desktop ::-webkit-scrollbar {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em
|
height: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track-piece {
|
|
||||||
background-color: #3b3b3b
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:horizontal,
|
::-webkit-scrollbar-thumb:horizontal,
|
||||||
::-webkit-scrollbar-thumb:vertical {
|
::-webkit-scrollbar-thumb:vertical {
|
||||||
|
border-radius: 2px;
|
||||||
-webkit-border-radius: 2px;
|
-webkit-border-radius: 2px;
|
||||||
background: center no-repeat #888
|
background: center no-repeat #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeslotHeaders-desktop::-webkit-scrollbar {
|
.timeslotHeaders-desktop::-webkit-scrollbar {
|
||||||
height: .7em
|
height: 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadataSidebarIcon {
|
.metadataSidebarIcon {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
.skinHeader,
|
.skinHeader,
|
||||||
html {
|
html {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
color: rgba(255, 255, 255, .8)
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizardStartForm,
|
.wizardStartForm,
|
||||||
.ui-corner-all,
|
.ui-corner-all,
|
||||||
.ui-shadow {
|
.ui-shadow {
|
||||||
background-color: #101010
|
background-color: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-collapsible-button {
|
.emby-collapsible-button {
|
||||||
border-color: #383838;
|
border-color: #383838;
|
||||||
border-color: rgba(255, 255, 255, .135)
|
border-color: rgba(255, 255, 255, 0.135);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader-withBackground {
|
.skinHeader-withBackground {
|
||||||
background-color: #101010
|
background-color: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader.semiTransparent {
|
.skinHeader.semiTransparent {
|
||||||
|
|
@ -26,22 +26,22 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageTitleWithDefaultLogo {
|
.pageTitleWithDefaultLogo {
|
||||||
background-image: url(../../assets/img/banner-light.png)
|
background-image: url(../../assets/img/banner-light.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer,
|
.backgroundContainer,
|
||||||
.dialog,
|
.dialog,
|
||||||
html {
|
html {
|
||||||
background-color: #101010
|
background-color: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer.withBackdrop {
|
.backgroundContainer.withBackdrop {
|
||||||
background-color: rgba(0, 0, 0, .86)
|
background-color: rgba(0, 0, 0, 0.86);
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light:hover:not(:disabled) {
|
.paper-icon-button-light:hover:not(:disabled) {
|
||||||
color: #00a4dc;
|
color: #00a4dc;
|
||||||
background-color: rgba(0,164,220, .2);
|
background-color: rgba(0, 164, 220, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light.show-focus:focus {
|
.paper-icon-button-light.show-focus:focus {
|
||||||
|
|
@ -51,31 +51,31 @@ html {
|
||||||
.fab,
|
.fab,
|
||||||
.raised {
|
.raised {
|
||||||
background: #303030;
|
background: #303030;
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab:focus,
|
.fab:focus,
|
||||||
.raised:focus {
|
.raised:focus {
|
||||||
background: #383838
|
background: #383838;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit {
|
.button-submit {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit:focus {
|
.button-submit:focus {
|
||||||
background: #0cb0e8;
|
background: #0cb0e8;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-delete {
|
.button-delete {
|
||||||
background: rgb(247, 0, 0);
|
background: rgb(247, 0, 0);
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxLabel {
|
.checkboxLabel {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxListLabel,
|
.checkboxListLabel,
|
||||||
|
|
@ -84,17 +84,17 @@ html {
|
||||||
.paperListLabel,
|
.paperListLabel,
|
||||||
.textareaLabelUnfocused {
|
.textareaLabelUnfocused {
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
color: rgba(255, 255, 255, .7)
|
color: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputLabelFocused,
|
.inputLabelFocused,
|
||||||
.selectLabelFocused,
|
.selectLabelFocused,
|
||||||
.textareaLabelFocused {
|
.textareaLabelFocused {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxOutline {
|
.checkboxOutline {
|
||||||
border-color: currentColor
|
border-color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapseContent,
|
.collapseContent,
|
||||||
|
|
@ -102,27 +102,27 @@ html {
|
||||||
.formDialogHeader:not(.formDialogHeader-clear),
|
.formDialogHeader:not(.formDialogHeader-clear),
|
||||||
.paperList,
|
.paperList,
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
background-color: #242424
|
background-color: #242424;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground1 {
|
.defaultCardBackground1 {
|
||||||
background-color: #d2b019
|
background-color: #d2b019;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground2 {
|
.defaultCardBackground2 {
|
||||||
background-color: #338abb
|
background-color: #338abb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground3 {
|
.defaultCardBackground3 {
|
||||||
background-color: #6b689d
|
background-color: #6b689d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground4 {
|
.defaultCardBackground4 {
|
||||||
background-color: #dd452b
|
background-color: #dd452b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground5 {
|
.defaultCardBackground5 {
|
||||||
background-color: #5ccea9
|
background-color: #5ccea9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText-secondary,
|
.cardText-secondary,
|
||||||
|
|
@ -133,176 +133,176 @@ html {
|
||||||
.programSecondaryTitle,
|
.programSecondaryTitle,
|
||||||
.secondaryText {
|
.secondaryText {
|
||||||
color: #999;
|
color: #999;
|
||||||
color: rgba(255, 255, 255, .5)
|
color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetDivider {
|
.actionsheetDivider {
|
||||||
background: #444;
|
background: #444;
|
||||||
background: rgba(255, 255, 255, .14)
|
background: rgba(255, 255, 255, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter-vibrant .cardText-secondary {
|
.cardFooter-vibrant .cardText-secondary {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: .5
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetMenuItem:hover {
|
.actionSheetMenuItem:hover {
|
||||||
background-color: #242424
|
background-color: #242424;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
background: #303030;
|
background: #303030;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter {
|
.appfooter {
|
||||||
background: #101010;
|
background: #101010;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
color: rgba(255, 255, 255, .78)
|
color: rgba(255, 255, 255, 0.78);
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSelectionPanel {
|
.itemSelectionPanel {
|
||||||
border: 1px solid #00a4dc
|
border: 1px solid #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionCommandsPanel {
|
.selectionCommandsPanel {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upNextDialog-countdownText {
|
.upNextDialog-countdownText {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton {
|
.alphaPickerButton {
|
||||||
color: #999;
|
color: #999;
|
||||||
color: rgba(255, 255, 255, .5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
background-color: transparent
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-selected {
|
.alphaPickerButton-selected {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-tv:focus {
|
.alphaPickerButton-tv:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTableBodyRow-shaded:nth-child(even) {
|
.detailTableBodyRow-shaded:nth-child(even) {
|
||||||
background: #1c1c1c;
|
background: #1c1c1c;
|
||||||
background: rgba(30, 30, 30, .9)
|
background: rgba(30, 30, 30, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-border {
|
.listItem-border {
|
||||||
border-color: rgba(34, 34, 34, .9) !important
|
border-color: rgba(34, 34, 34, 0.9) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus {
|
.listItem:focus {
|
||||||
background: #333
|
background: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progressring-spiner {
|
.progressring-spiner {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-flat-accent,
|
.button-flat-accent,
|
||||||
.button-link {
|
.button-link {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText {
|
.mediaInfoText {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
background: rgba(170, 170, 190, .2)
|
background: rgba(170, 170, 190, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoTimerIcon,
|
.mediaInfoTimerIcon,
|
||||||
.starIcon {
|
.starIcon {
|
||||||
color: #CB272A
|
color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input,
|
.emby-input,
|
||||||
.emby-textarea {
|
.emby-textarea {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: #292929;
|
background: #292929;
|
||||||
border: .07em solid #292929;
|
border: 0.07em solid #292929;
|
||||||
-webkit-border-radius: .15em;
|
-webkit-border-radius: 0.15em;
|
||||||
border-radius: .15em
|
border-radius: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input:focus,
|
.emby-input:focus,
|
||||||
.emby-textarea:focus {
|
.emby-textarea:focus {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor {
|
.emby-select-withcolor {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: #292929;
|
background: #292929;
|
||||||
border: .07em solid #292929
|
border: 0.07em solid #292929;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor>option {
|
.emby-select-withcolor > option {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: #222
|
background: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor:focus {
|
.emby-select-withcolor:focus {
|
||||||
border-color: #00a4dc !important
|
border-color: #00a4dc !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-tv-withcolor:focus {
|
.emby-select-tv-withcolor:focus {
|
||||||
background-color: #00a4dc !important;
|
background-color: #00a4dc !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline {
|
.emby-checkbox:checked + span + .checkboxOutline {
|
||||||
border-color: #00a4dc
|
|
||||||
}
|
|
||||||
|
|
||||||
.emby-checkbox:focus+span+.checkboxOutline {
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
|
|
||||||
border-color: #00a4dc;
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline,
|
.emby-checkbox:focus + span + .checkboxOutline {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
.itemProgressBarForeground {
|
.itemProgressBarForeground {
|
||||||
background-color: #00a4dc
|
background-color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
||||||
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground-recording {
|
.itemProgressBarForeground-recording {
|
||||||
background-color: #CB272A
|
background-color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countIndicator,
|
.countIndicator,
|
||||||
.fullSyncIndicator,
|
.fullSyncIndicator,
|
||||||
.playedIndicator {
|
.playedIndicator {
|
||||||
background: #00a4dc
|
background: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullSyncIndicator {
|
.fullSyncIndicator {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainDrawer {
|
.mainDrawer {
|
||||||
background-color: #101010
|
background-color: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption:hover {
|
.navMenuOption:hover {
|
||||||
background: #252528
|
background: #252528;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption-selected {
|
.navMenuOption-selected {
|
||||||
background: #00a4dc !important;
|
background: #00a4dc !important;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-button.show-focus:focus {
|
.emby-button.show-focus:focus {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button {
|
.emby-tab-button {
|
||||||
|
|
@ -324,112 +324,114 @@ html {
|
||||||
.channelPrograms,
|
.channelPrograms,
|
||||||
.guide-channelHeaderCell,
|
.guide-channelHeaderCell,
|
||||||
.programCell {
|
.programCell {
|
||||||
border-color: rgba(255, 255, 255, .05)
|
border-color: rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-sports {
|
.programCell-sports {
|
||||||
background: #3949AB !important
|
background: #3949ab !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-movie {
|
.programCell-movie {
|
||||||
background: #5E35B1 !important
|
background: #5e35b1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-kids {
|
.programCell-kids {
|
||||||
background: #039BE5 !important
|
background: #039be5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-news {
|
.programCell-news {
|
||||||
background: #43A047 !important
|
background: #43a047 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-active {
|
.programCell-active {
|
||||||
background: #1e1e1e !important
|
background: #1e1e1e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelHeaderCell:focus,
|
.guide-channelHeaderCell:focus,
|
||||||
.programCell:focus {
|
.programCell:focus {
|
||||||
background-color: #00a4dc !important;
|
background-color: #00a4dc !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programTextIcon {
|
.guide-programTextIcon {
|
||||||
color: #1e1e1e;
|
color: #1e1e1e;
|
||||||
background: #555
|
background: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-headerTimeslots {
|
.guide-headerTimeslots {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button {
|
.guide-date-tab-button {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(255, 255, 255, .3)
|
color: rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.emby-tab-button-active,
|
.guide-date-tab-button.emby-tab-button-active,
|
||||||
.guide-date-tab-button:focus {
|
.guide-date-tab-button:focus {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.show-focus:focus {
|
.guide-date-tab-button.show-focus:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infoBanner {
|
.infoBanner {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
background: #111;
|
background: #111;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
-webkit-border-radius: .25em;
|
-webkit-border-radius: 0.25em;
|
||||||
border-radius: .25em
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ratingbutton-icon-withrating {
|
.ratingbutton-icon-withrating {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadbutton-icon-complete,
|
.downloadbutton-icon-complete,
|
||||||
.downloadbutton-icon-on {
|
.downloadbutton-icon-on {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playstatebutton-icon-played {
|
.playstatebutton-icon-played {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeatButton-active {
|
.repeatButton-active {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:focus .cardBox.visualCardBox,
|
.card:focus .cardBox.visualCardBox,
|
||||||
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
border-color: #00a4dc !important
|
border-color: #00a4dc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track-piece {
|
||||||
|
background-color: #3b3b3b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-desktop ::-webkit-scrollbar {
|
.layout-desktop ::-webkit-scrollbar {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em
|
height: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track-piece {
|
|
||||||
background-color: #3b3b3b
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:horizontal,
|
::-webkit-scrollbar-thumb:horizontal,
|
||||||
::-webkit-scrollbar-thumb:vertical {
|
::-webkit-scrollbar-thumb:vertical {
|
||||||
|
border-radius: 2px;
|
||||||
-webkit-border-radius: 2px;
|
-webkit-border-radius: 2px;
|
||||||
background: center no-repeat #888
|
background: center no-repeat #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeslotHeaders-desktop::-webkit-scrollbar {
|
.timeslotHeaders-desktop::-webkit-scrollbar {
|
||||||
height: .7em
|
height: 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadataSidebarIcon {
|
.metadataSidebarIcon {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
432
src/themes/emby/theme.css
Normal file
432
src/themes/emby/theme.css
Normal file
|
|
@ -0,0 +1,432 @@
|
||||||
|
.skinHeader,
|
||||||
|
html {
|
||||||
|
color: #ddd;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizardStartForm,
|
||||||
|
.ui-corner-all,
|
||||||
|
.ui-shadow {
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-collapsible-button {
|
||||||
|
border-color: #383838;
|
||||||
|
border-color: rgba(255, 255, 255, 0.135);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skinHeader-withBackground {
|
||||||
|
background-color: #1f1f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skinHeader.semiTransparent {
|
||||||
|
backdrop-filter: none !important;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageTitleWithDefaultLogo {
|
||||||
|
background-image: url(../logowhite.png);
|
||||||
|
}
|
||||||
|
|
||||||
|
.backgroundContainer,
|
||||||
|
.dialog,
|
||||||
|
html {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backgroundContainer.withBackdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.86);
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-icon-button-light:hover:not(:disabled) {
|
||||||
|
color: #52b54b;
|
||||||
|
background-color: rgba(82, 181, 75, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-icon-button-light.show-focus:focus {
|
||||||
|
color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab,
|
||||||
|
.raised {
|
||||||
|
background: #303030;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab:focus,
|
||||||
|
.raised:focus {
|
||||||
|
background: #383838;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-submit {
|
||||||
|
background: #52b54b;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-submit:focus {
|
||||||
|
background: #5ec157;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-delete {
|
||||||
|
background: rgb(247, 0, 0);
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxLabel {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxListLabel,
|
||||||
|
.inputLabel,
|
||||||
|
.inputLabelUnfocused,
|
||||||
|
.paperListLabel,
|
||||||
|
.textareaLabelUnfocused {
|
||||||
|
color: #bbb;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputLabelFocused,
|
||||||
|
.selectLabelFocused,
|
||||||
|
.textareaLabelFocused {
|
||||||
|
color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxOutline {
|
||||||
|
border-color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapseContent,
|
||||||
|
.formDialogFooter:not(.formDialogFooter-clear),
|
||||||
|
.formDialogHeader:not(.formDialogHeader-clear),
|
||||||
|
.paperList,
|
||||||
|
.visualCardBox {
|
||||||
|
background-color: #242424;
|
||||||
|
}
|
||||||
|
|
||||||
|
.defaultCardBackground1 {
|
||||||
|
background-color: #d2b019;
|
||||||
|
}
|
||||||
|
|
||||||
|
.defaultCardBackground2 {
|
||||||
|
background-color: #338abb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.defaultCardBackground3 {
|
||||||
|
background-color: #6b689d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.defaultCardBackground4 {
|
||||||
|
background-color: #dd452b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.defaultCardBackground5 {
|
||||||
|
background-color: #5ccea9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardText-secondary,
|
||||||
|
.fieldDescription,
|
||||||
|
.guide-programNameCaret,
|
||||||
|
.listItem .secondary,
|
||||||
|
.nowPlayingBarSecondaryText,
|
||||||
|
.programSecondaryTitle,
|
||||||
|
.secondaryText {
|
||||||
|
color: #999;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionsheetDivider {
|
||||||
|
background: #444;
|
||||||
|
background: rgba(255, 255, 255, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardFooter-vibrant .cardText-secondary {
|
||||||
|
color: inherit;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionSheetMenuItem:hover {
|
||||||
|
background-color: #242424;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
background: #303030;
|
||||||
|
color: #fff;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
.appfooter {
|
||||||
|
background: #101010;
|
||||||
|
color: #ccc;
|
||||||
|
color: rgba(255, 255, 255, 0.78);
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSelectionPanel {
|
||||||
|
border: 1px solid #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectionCommandsPanel {
|
||||||
|
background: #52b54b;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upNextDialog-countdownText {
|
||||||
|
color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alphaPickerButton {
|
||||||
|
color: #999;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alphaPickerButton-selected {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alphaPickerButton-tv:focus {
|
||||||
|
background-color: #52b54b;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detailTableBodyRow-shaded:nth-child(even) {
|
||||||
|
background: #1c1c1c;
|
||||||
|
background: rgba(30, 30, 30, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem-border {
|
||||||
|
border-color: rgba(34, 34, 34, 0.9) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem:focus {
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progressring-spiner {
|
||||||
|
border-color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-flat-accent,
|
||||||
|
.button-link {
|
||||||
|
color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaInfoText {
|
||||||
|
color: #ddd;
|
||||||
|
background: rgba(170, 170, 190, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaInfoTimerIcon,
|
||||||
|
.starIcon {
|
||||||
|
color: #cb272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-input,
|
||||||
|
.emby-textarea {
|
||||||
|
color: inherit;
|
||||||
|
background: #292929;
|
||||||
|
border: 0.07em solid #292929;
|
||||||
|
border-radius: 0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-input:focus,
|
||||||
|
.emby-textarea:focus {
|
||||||
|
border-color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-select-withcolor {
|
||||||
|
color: inherit;
|
||||||
|
background: #292929;
|
||||||
|
border: 0.07em solid #292929;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-select-withcolor > option {
|
||||||
|
color: inherit;
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-select-withcolor:focus {
|
||||||
|
border-color: #52b54b !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-select-tv-withcolor:focus {
|
||||||
|
background-color: #52b54b !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:checked + span + .checkboxOutline {
|
||||||
|
border-color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:focus + span + .checkboxOutline {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
|
.itemProgressBarForeground {
|
||||||
|
background-color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
||||||
|
border-color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemProgressBarForeground-recording {
|
||||||
|
background-color: #cb272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countIndicator,
|
||||||
|
.fullSyncIndicator,
|
||||||
|
.playedIndicator {
|
||||||
|
background: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullSyncIndicator {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainDrawer {
|
||||||
|
background-color: #1c1c1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenuOption:hover {
|
||||||
|
background: #252528;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMenuOption-selected {
|
||||||
|
background: #52b54b !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-button.show-focus:focus {
|
||||||
|
background: #52b54b;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-tab-button {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-tab-button-active {
|
||||||
|
color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-tab-button.show-focus:focus {
|
||||||
|
color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-tab-button:hover {
|
||||||
|
color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.channelPrograms,
|
||||||
|
.guide-channelHeaderCell,
|
||||||
|
.programCell {
|
||||||
|
border-color: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.programCell-sports {
|
||||||
|
background: #3949ab !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programCell-movie {
|
||||||
|
background: #5e35b1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programCell-kids {
|
||||||
|
background: #039be5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programCell-news {
|
||||||
|
background: #43a047 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programCell-active {
|
||||||
|
background: #1e1e1e !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-channelHeaderCell:focus,
|
||||||
|
.programCell:focus {
|
||||||
|
background-color: #52b54b !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-programTextIcon {
|
||||||
|
color: #1e1e1e;
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-headerTimeslots {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-date-tab-button {
|
||||||
|
color: #555;
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-date-tab-button.emby-tab-button-active,
|
||||||
|
.guide-date-tab-button:focus {
|
||||||
|
color: #52b54b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guide-date-tab-button.show-focus:focus {
|
||||||
|
background-color: #52b54b;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBanner {
|
||||||
|
color: #ddd;
|
||||||
|
background: #111;
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratingbutton-icon-withrating {
|
||||||
|
color: #c33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downloadbutton-icon-complete,
|
||||||
|
.downloadbutton-icon-on {
|
||||||
|
color: #4285f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playstatebutton-icon-played {
|
||||||
|
color: #c33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repeatButton-active {
|
||||||
|
color: #4285f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:focus .cardBox.visualCardBox,
|
||||||
|
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
|
border-color: #52b54b !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track-piece {
|
||||||
|
background-color: #3b3b3b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-desktop ::-webkit-scrollbar {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:horizontal,
|
||||||
|
::-webkit-scrollbar-thumb:vertical {
|
||||||
|
border-radius: 2px;
|
||||||
|
background: center no-repeat #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeslotHeaders-desktop::-webkit-scrollbar {
|
||||||
|
height: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadataSidebarIcon {
|
||||||
|
color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
.skinHeader,
|
.skinHeader,
|
||||||
html {
|
html {
|
||||||
color: #222;
|
color: #222;
|
||||||
color: rgba(0, 0, 0, .87)
|
color: rgba(0, 0, 0, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizardStartForm,
|
.wizardStartForm,
|
||||||
.ui-corner-all,
|
.ui-corner-all,
|
||||||
.ui-shadow {
|
.ui-shadow {
|
||||||
background-color: #303030
|
background-color: #303030;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-collapsible-button {
|
.emby-collapsible-button {
|
||||||
border-color: #ccc;
|
border-color: #ccc;
|
||||||
border-color: rgba(0, 0, 0, .158)
|
border-color: rgba(0, 0, 0, 0.158);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapseContent {
|
.collapseContent {
|
||||||
background-color: #eaeaea
|
background-color: #eaeaea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader-withBackground {
|
.skinHeader-withBackground {
|
||||||
background-color: #303030;
|
background-color: #303030;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
color: rgba(255, 255, 255, .87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
-webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
|
-webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||||
box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
|
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||||
}
|
}
|
||||||
|
|
||||||
.osdHeader {
|
.osdHeader {
|
||||||
-webkit-box-shadow: none !important;
|
-webkit-box-shadow: none !important;
|
||||||
box-shadow: none !important
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader.semiTransparent {
|
.skinHeader.semiTransparent {
|
||||||
|
|
@ -39,25 +39,25 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageTitleWithDefaultLogo {
|
.pageTitleWithDefaultLogo {
|
||||||
background-image: url(../../assets/img/banner-light.png)
|
background-image: url(../../assets/img/banner-light.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer,
|
.backgroundContainer,
|
||||||
html {
|
html {
|
||||||
background-color: #f2f2f2
|
background-color: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer.withBackdrop {
|
.backgroundContainer.withBackdrop {
|
||||||
background-color: rgba(255, 255, 255, .80)
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog {
|
.dialog {
|
||||||
background-color: #f0f0f0
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light:hover:not(:disabled) {
|
.paper-icon-button-light:hover:not(:disabled) {
|
||||||
color: #00a4dc;
|
color: #00a4dc;
|
||||||
background-color: rgba(0,164,220, .2);
|
background-color: rgba(0, 164, 220, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light.show-focus:focus {
|
.paper-icon-button-light.show-focus:focus {
|
||||||
|
|
@ -67,30 +67,30 @@ html {
|
||||||
.fab,
|
.fab,
|
||||||
.raised {
|
.raised {
|
||||||
background: #d8d8d8;
|
background: #d8d8d8;
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab:focus,
|
.fab:focus,
|
||||||
.raised:focus {
|
.raised:focus {
|
||||||
background: #ccc
|
background: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit {
|
.button-submit {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit:focus {
|
.button-submit:focus {
|
||||||
background: #0cb0e8
|
background: #0cb0e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-delete {
|
.button-delete {
|
||||||
background: rgb(247, 0, 0);
|
background: rgb(247, 0, 0);
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxLabel {
|
.checkboxLabel {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxListLabel,
|
.checkboxListLabel,
|
||||||
|
|
@ -98,55 +98,55 @@ html {
|
||||||
.inputLabelUnfocused,
|
.inputLabelUnfocused,
|
||||||
.paperListLabel,
|
.paperListLabel,
|
||||||
.textareaLabelUnfocused {
|
.textareaLabelUnfocused {
|
||||||
color: #555
|
color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-link,
|
.button-link,
|
||||||
.inputLabelFocused,
|
.inputLabelFocused,
|
||||||
.selectLabelFocused,
|
.selectLabelFocused,
|
||||||
.textareaLabelFocused {
|
.textareaLabelFocused {
|
||||||
color: green
|
color: green;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxOutline {
|
.checkboxOutline {
|
||||||
border-color: currentColor
|
border-color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.paperList,
|
.paperList,
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
background-color: #fff
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground1 {
|
.defaultCardBackground1 {
|
||||||
background-color: #009688
|
background-color: #009688;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground2 {
|
.defaultCardBackground2 {
|
||||||
background-color: #D32F2F
|
background-color: #d32f2f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground3 {
|
.defaultCardBackground3 {
|
||||||
background-color: #0288D1
|
background-color: #0288d1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground4 {
|
.defaultCardBackground4 {
|
||||||
background-color: #388E3C
|
background-color: #388e3c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground5 {
|
.defaultCardBackground5 {
|
||||||
background-color: #F57F17
|
background-color: #f57f17;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeader:not(.formDialogHeader-clear) {
|
.formDialogHeader:not(.formDialogHeader-clear) {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogFooter:not(.formDialogFooter-clear) {
|
.formDialogFooter:not(.formDialogFooter-clear) {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
border-top: 1px solid rgba(0, 0, 0, .08);
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText-secondary,
|
.cardText-secondary,
|
||||||
|
|
@ -156,172 +156,172 @@ html {
|
||||||
.nowPlayingBarSecondaryText,
|
.nowPlayingBarSecondaryText,
|
||||||
.programSecondaryTitle,
|
.programSecondaryTitle,
|
||||||
.secondaryText {
|
.secondaryText {
|
||||||
color: #888
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetDivider {
|
.actionsheetDivider {
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
background: rgba(0, 0, 0, .14)
|
background: rgba(0, 0, 0, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter-vibrant .cardText-secondary {
|
.cardFooter-vibrant .cardText-secondary {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: .5
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeader a,
|
.formDialogHeader a,
|
||||||
.toast {
|
.toast {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetMenuItem:hover {
|
.actionSheetMenuItem:hover {
|
||||||
background-color: #ddd
|
background-color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
background: #303030;
|
background: #303030;
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter {
|
.appfooter {
|
||||||
background: #282828;
|
background: #282828;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
color: rgba(255, 255, 255, .78)
|
color: rgba(255, 255, 255, 0.78);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowPlayingBarSecondaryText {
|
.nowPlayingBarSecondaryText {
|
||||||
color: #999
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSelectionPanel {
|
.itemSelectionPanel {
|
||||||
border: 1px solid #00a4dc
|
border: 1px solid #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionCommandsPanel {
|
.selectionCommandsPanel {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upNextDialog-countdownText {
|
.upNextDialog-countdownText {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton {
|
.alphaPickerButton {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(0, 0, 0, .7);
|
color: rgba(0, 0, 0, 0.7);
|
||||||
background-color: transparent
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-selected,
|
.alphaPickerButton-selected,
|
||||||
.alphaPickerButton-tv:focus {
|
.alphaPickerButton-tv:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTableBodyRow-shaded:nth-child(even) {
|
.detailTableBodyRow-shaded:nth-child(even) {
|
||||||
background: #f8f8f8
|
background: #f8f8f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-border {
|
.listItem-border {
|
||||||
border-color: #f0f0f0 !important
|
border-color: #f0f0f0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus {
|
.listItem:focus {
|
||||||
background: #ddd
|
background: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progressring-spiner {
|
.progressring-spiner {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText {
|
.mediaInfoText {
|
||||||
color: #333;
|
color: #333;
|
||||||
background: #fff
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoTimerIcon,
|
.mediaInfoTimerIcon,
|
||||||
.starIcon {
|
.starIcon {
|
||||||
color: #CB272A
|
color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input,
|
.emby-input,
|
||||||
.emby-textarea {
|
.emby-textarea {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: .07em solid rgba(0, 0, 0, .158);
|
border: 0.07em solid rgba(0, 0, 0, 0.158);
|
||||||
-webkit-border-radius: .15em;
|
-webkit-border-radius: 0.15em;
|
||||||
border-radius: .15em
|
border-radius: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input:focus,
|
.emby-input:focus,
|
||||||
.emby-textarea:focus {
|
.emby-textarea:focus {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor {
|
.emby-select-withcolor {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: .07em solid rgba(0, 0, 0, .158)
|
border: 0.07em solid rgba(0, 0, 0, 0.158);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline,
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
.emby-select-withcolor:focus {
|
.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;
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor>option {
|
.emby-checkbox:focus + span + .checkboxOutline {
|
||||||
|
border-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
|
.itemProgressBarForeground {
|
||||||
|
background-color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
||||||
|
border-color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-select-withcolor > option {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: #fff
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-tv-withcolor:focus {
|
.emby-select-tv-withcolor:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline,
|
|
||||||
.itemProgressBarForeground {
|
|
||||||
background-color: #00a4dc
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground-recording {
|
.itemProgressBarForeground-recording {
|
||||||
background-color: #CB272A
|
background-color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countIndicator,
|
.countIndicator,
|
||||||
.fullSyncIndicator,
|
.fullSyncIndicator,
|
||||||
.playedIndicator {
|
.playedIndicator {
|
||||||
background: #00a4dc
|
background: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullSyncIndicator {
|
.fullSyncIndicator {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainDrawer {
|
.mainDrawer {
|
||||||
background: #fff
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption:hover {
|
.navMenuOption:hover {
|
||||||
background: #f2f2f2
|
background: #f2f2f2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption-selected {
|
.navMenuOption-selected {
|
||||||
background: #00a4dc !important;
|
background: #00a4dc !important;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-button.show-focus:focus {
|
.emby-button.show-focus:focus {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button {
|
.emby-tab-button {
|
||||||
|
|
@ -343,89 +343,89 @@ html {
|
||||||
.channelPrograms,
|
.channelPrograms,
|
||||||
.guide-channelHeaderCell,
|
.guide-channelHeaderCell,
|
||||||
.programCell {
|
.programCell {
|
||||||
border-color: rgba(0, 0, 0, .12)
|
border-color: rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-sports {
|
.programCell-sports {
|
||||||
background: #3949AB !important
|
background: #3949ab !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-movie {
|
.programCell-movie {
|
||||||
background: #5E35B1 !important
|
background: #5e35b1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-kids {
|
.programCell-kids {
|
||||||
background: #039BE5 !important
|
background: #039be5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-news {
|
.programCell-news {
|
||||||
background: #43A047 !important
|
background: #43a047 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-active {
|
.programCell-active {
|
||||||
background: rgba(0, 0, 0, .1) !important
|
background: rgba(0, 0, 0, 0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelHeaderCell:focus,
|
.guide-channelHeaderCell:focus,
|
||||||
.programCell:focus {
|
.programCell:focus {
|
||||||
background-color: #00a4dc !important;
|
background-color: #00a4dc !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programTextIcon {
|
.guide-programTextIcon {
|
||||||
color: #1e1e1e;
|
color: #1e1e1e;
|
||||||
background: #555
|
background: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-headerTimeslots {
|
.guide-headerTimeslots {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button {
|
.guide-date-tab-button {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(0, 0, 0, .54)
|
color: rgba(0, 0, 0, 0.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.emby-tab-button-active,
|
.guide-date-tab-button.emby-tab-button-active,
|
||||||
.guide-date-tab-button:focus {
|
.guide-date-tab-button:focus {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.show-focus:focus {
|
.guide-date-tab-button.show-focus:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infoBanner {
|
.infoBanner {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: #fff3a5;
|
background: #fff3a5;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
-webkit-border-radius: .25em;
|
-webkit-border-radius: 0.25em;
|
||||||
border-radius: .25em
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ratingbutton-icon-withrating {
|
.ratingbutton-icon-withrating {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadbutton-icon-complete,
|
.downloadbutton-icon-complete,
|
||||||
.downloadbutton-icon-on {
|
.downloadbutton-icon-on {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playstatebutton-icon-played {
|
.playstatebutton-icon-played {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeatButton-active {
|
.repeatButton-active {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:focus .cardBox.visualCardBox,
|
.card:focus .cardBox.visualCardBox,
|
||||||
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
border-color: #00a4dc !important
|
border-color: #00a4dc !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadataSidebarIcon {
|
.metadataSidebarIcon {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,65 @@
|
||||||
.skinHeader,
|
.skinHeader,
|
||||||
html {
|
html {
|
||||||
color: #f8f8fe;
|
color: #f8f8fe;
|
||||||
color: rgba(248, 248, 254, 0.973)
|
color: rgba(248, 248, 254, 0.973);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizardStartForm,
|
.wizardStartForm,
|
||||||
.ui-corner-all,
|
.ui-corner-all,
|
||||||
.ui-shadow {
|
.ui-shadow {
|
||||||
background-color: #303030
|
background-color: #303030;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-collapsible-button {
|
.emby-collapsible-button {
|
||||||
border-color: #383838;
|
border-color: #383838;
|
||||||
border-color: rgba(255, 255, 255, .135)
|
border-color: rgba(255, 255, 255, 0.135);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader-withBackground {
|
.skinHeader-withBackground {
|
||||||
background: #000420;
|
background: #000420;
|
||||||
background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||||
background: -webkit-linear-gradient(left, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
|
background: -webkit-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||||
background: linear-gradient(to right, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
|
background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000420', endColorstr='#000420',GradientType=1 );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader.semiTransparent {
|
.skinHeader.semiTransparent {
|
||||||
-webkit-backdrop-filter: none !important;
|
-webkit-backdrop-filter: none !important;
|
||||||
backdrop-filter: none !important;
|
backdrop-filter: none !important;
|
||||||
background-color: rgba(0, 0, 0, .3);
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
|
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageTitleWithDefaultLogo {
|
.pageTitleWithDefaultLogo {
|
||||||
background-image: url(../../assets/img/banner-light.png)
|
background-image: url(../../assets/img/banner-light.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dialog,
|
.dialog,
|
||||||
html {
|
html {
|
||||||
background-color: #230c33
|
background-color: #230c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer {
|
.backgroundContainer {
|
||||||
background: url(bg.jpg) center top no-repeat #030322;
|
background: url(bg.jpg) center top no-repeat #030322;
|
||||||
-webkit-background-size: cover;
|
-webkit-background-size: cover;
|
||||||
background-size: cover
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer.withBackdrop {
|
.backgroundContainer.withBackdrop {
|
||||||
opacity: .86
|
opacity: 0.86;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (orientation:portrait) {
|
@media (orientation: portrait) {
|
||||||
.backgroundContainer {
|
.backgroundContainer {
|
||||||
background-position: 30% top
|
background-position: 30% top;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light:hover:not(:disabled) {
|
.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, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light.show-focus:focus {
|
.paper-icon-button-light.show-focus:focus {
|
||||||
|
|
@ -68,35 +67,35 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
border-radius: .4em;
|
border-radius: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-bar {
|
progress::-webkit-progress-bar {
|
||||||
border-radius: .4em;
|
border-radius: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-moz-progress-bar {
|
progress::-moz-progress-bar {
|
||||||
border-radius: .4em;
|
border-radius: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress::-webkit-progress-value {
|
progress::-webkit-progress-value {
|
||||||
border-radius: .4em;
|
border-radius: 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab,
|
.fab,
|
||||||
.raised {
|
.raised {
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
color: rgba(255, 255, 255, .87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab:focus,
|
.fab:focus,
|
||||||
.raised:focus {
|
.raised:focus {
|
||||||
background: #ff77f1
|
background: #ff77f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[data-role=controlgroup] a.ui-btn-active {
|
div[data-role=controlgroup] a.ui-btn-active {
|
||||||
background: #55828b !important;
|
background: #55828b !important;
|
||||||
color: #e1e5f2 !important
|
color: #e1e5f2 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[data-role=button] {
|
a[data-role=button] {
|
||||||
|
|
@ -114,7 +113,21 @@ a[data-role=button] {
|
||||||
.button-alt,
|
.button-alt,
|
||||||
.btnOption {
|
.btnOption {
|
||||||
background: rgb(72, 195, 200);
|
background: rgb(72, 195, 200);
|
||||||
color: rgb(225, 229, 242)
|
color: rgb(225, 229, 242);
|
||||||
|
}
|
||||||
|
|
||||||
|
#btnResetPassword,
|
||||||
|
.btnForgotPassword,
|
||||||
|
.btnCancel,
|
||||||
|
.button-cancel {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
.alphaPickerButton {
|
||||||
|
color: #999;
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#btnResetPassword:hover,
|
#btnResetPassword:hover,
|
||||||
|
|
@ -136,39 +149,31 @@ a[data-role=button] {
|
||||||
.btnManual:hover,
|
.btnManual:hover,
|
||||||
.block:hover {
|
.block:hover {
|
||||||
background: rgb(12, 232, 214);
|
background: rgb(12, 232, 214);
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit:focus {
|
.button-submit:focus {
|
||||||
background: #ff77f1
|
background: #ff77f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-delete {
|
.button-delete {
|
||||||
background: rgb(247, 0, 0);
|
background: rgb(247, 0, 0);
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
|
||||||
|
|
||||||
#btnResetPassword,
|
|
||||||
.btnForgotPassword,
|
|
||||||
.btnCancel,
|
|
||||||
.button-cancel {
|
|
||||||
background: rgba(0, 0, 0, .5);
|
|
||||||
color: rgba(255, 255, 255, .87);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemName {
|
.itemName {
|
||||||
color: #f1f7ee
|
color: #f1f7ee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.textareaLabel,
|
.textareaLabel,
|
||||||
.sectionTitle,
|
.sectionTitle,
|
||||||
.fieldDescription,
|
.fieldDescription,
|
||||||
.checkboxLabel {
|
.checkboxLabel {
|
||||||
color: #f1f7ee
|
color: #f1f7ee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxLabel {
|
.checkboxLabel {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectLabel,
|
.selectLabel,
|
||||||
|
|
@ -184,15 +189,15 @@ a[data-role=button] {
|
||||||
.inputLabelFocused,
|
.inputLabelFocused,
|
||||||
.selectLabelFocused,
|
.selectLabelFocused,
|
||||||
.textareaLabelFocused {
|
.textareaLabelFocused {
|
||||||
color: #ff77f1
|
color: #ff77f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxOutline {
|
.checkboxOutline {
|
||||||
border-color: currentColor
|
border-color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardContent {
|
.cardContent {
|
||||||
border-radius: 1.000em
|
border-radius: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapseContent,
|
.collapseContent,
|
||||||
|
|
@ -200,36 +205,37 @@ a[data-role=button] {
|
||||||
.formDialogHeader:not(.formDialogHeader-clear),
|
.formDialogHeader:not(.formDialogHeader-clear),
|
||||||
.paperList,
|
.paperList,
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
border-radius: 1.000em
|
border-radius: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardOverlayContainer {
|
.cardOverlayContainer {
|
||||||
border-radius: 0.8em;
|
border-radius: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visualCardBox .cardOverlayContainer {
|
.visualCardBox .cardOverlayContainer {
|
||||||
border-bottom-right-radius: 0em;
|
border-bottom-right-radius: 0;
|
||||||
border-bottom-left-radius: 0em;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground1 {
|
.defaultCardBackground1 {
|
||||||
background-color: #d2b019
|
background-color: #d2b019;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground2 {
|
.defaultCardBackground2 {
|
||||||
background-color: #338abb
|
background-color: #338abb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground3 {
|
.defaultCardBackground3 {
|
||||||
background-color: #6b689d
|
background-color: #6b689d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground4 {
|
.defaultCardBackground4 {
|
||||||
background-color: #dd452b
|
background-color: #dd452b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground5 {
|
.defaultCardBackground5 {
|
||||||
background-color: #5ccea9
|
background-color: #5ccea9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText-secondary,
|
.cardText-secondary,
|
||||||
|
|
@ -240,151 +246,145 @@ a[data-role=button] {
|
||||||
.programSecondaryTitle,
|
.programSecondaryTitle,
|
||||||
.secondaryText {
|
.secondaryText {
|
||||||
color: #999;
|
color: #999;
|
||||||
color: rgba(255, 255, 255, .5)
|
color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetDivider {
|
.actionsheetDivider {
|
||||||
background: #444;
|
background: #444;
|
||||||
background: rgba(255, 255, 255, .14)
|
background: rgba(255, 255, 255, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter-vibrant .cardText-secondary {
|
.cardFooter-vibrant .cardText-secondary {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: .5
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetMenuItem:hover {
|
.actionSheetMenuItem:hover {
|
||||||
background-color: rgba(0, 0, 0, .5)
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
background: #303030;
|
background: #303030;
|
||||||
color: #f8f8fe;
|
color: #f8f8fe;
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter {
|
.appfooter {
|
||||||
background: #06256f;
|
background: #06256f;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
color: rgba(255, 255, 255, .78)
|
color: rgba(255, 255, 255, 0.78);
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
|
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
|
||||||
.appfooter-blurred {
|
.appfooter-blurred {
|
||||||
background: rgba(6, 37, 111, .7);
|
background: rgba(6, 37, 111, 0.7);
|
||||||
backdrop-filter: blur(20px)
|
backdrop-filter: blur(20px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSelectionPanel {
|
.itemSelectionPanel {
|
||||||
border: 1px solid #48C3C8
|
border: 1px solid #48c3c8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionCommandsPanel {
|
.selectionCommandsPanel {
|
||||||
background: #48C3C8;
|
background: #48c3c8;
|
||||||
color: #f8f8fe
|
color: #f8f8fe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upNextDialog-countdownText {
|
.upNextDialog-countdownText {
|
||||||
color: #48C3C8
|
color: #48c3c8;
|
||||||
}
|
|
||||||
|
|
||||||
.alphaPickerButton {
|
|
||||||
color: #999;
|
|
||||||
color: rgba(255, 255, 255, .5);
|
|
||||||
background-color: transparent
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-selected {
|
.alphaPickerButton-selected {
|
||||||
color: #0ce8d6
|
color: #0ce8d6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-tv:focus {
|
.alphaPickerButton-tv:focus {
|
||||||
background: #ff77f1;
|
background: #ff77f1;
|
||||||
color: #f8f8fe !important
|
color: #f8f8fe !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTableBodyRow-shaded:nth-child(even) {
|
.detailTableBodyRow-shaded:nth-child(even) {
|
||||||
background: #1c1c1c;
|
background: #1c1c1c;
|
||||||
background: rgba(30, 30, 30, .9)
|
background: rgba(30, 30, 30, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-border {
|
.listItem-border {
|
||||||
border-color: rgba(255, 255, 255, .1) !important
|
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus {
|
.listItem:focus {
|
||||||
background: rgba(0, 0, 0, .3)
|
background: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progressring-spiner {
|
.progressring-spiner {
|
||||||
border-color: #48C3C8
|
border-color: #48c3c8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-flat-accent,
|
.button-flat-accent,
|
||||||
.button-link {
|
.button-link {
|
||||||
color: #48C3C8
|
color: #48c3c8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText {
|
.mediaInfoText {
|
||||||
color: #f8f8fe;
|
color: #f8f8fe;
|
||||||
background: rgba(170, 170, 190, .2)
|
background: rgba(170, 170, 190, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoTimerIcon,
|
.mediaInfoTimerIcon,
|
||||||
.starIcon {
|
.starIcon {
|
||||||
color: #f2b01e
|
color: #f2b01e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input,
|
.emby-input,
|
||||||
.emby-textarea {
|
.emby-textarea {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
border: .07em solid transparent;
|
border: 0.07em solid transparent;
|
||||||
-webkit-border-radius: .15em;
|
-webkit-border-radius: 0.15em;
|
||||||
border-radius: .15em
|
border-radius: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input:focus,
|
.emby-input:focus,
|
||||||
.emby-textarea:focus {
|
.emby-textarea:focus {
|
||||||
border-color: #ff77f1
|
border-color: #ff77f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor {
|
.emby-select-withcolor {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
border: .07em solid transparent
|
border: 0.07em solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor>option {
|
.emby-select-withcolor > option {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: #030322d7
|
background: #030322d7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor:focus {
|
.emby-select-withcolor:focus {
|
||||||
border-color: #ff77f1 !important
|
border-color: #ff77f1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-tv-withcolor:focus {
|
.emby-select-tv-withcolor:focus {
|
||||||
background-color: #ff77f1 !important;
|
background-color: #ff77f1 !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline {
|
.emby-checkbox:checked + span + .checkboxOutline {
|
||||||
background-color: #030322;
|
background-color: #030322;
|
||||||
border:2px solid rgb(72, 195, 200);
|
border: 2px solid rgb(72, 195, 200);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
|
.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
|
||||||
color: rgb(12, 232, 214);
|
color: rgb(12, 232, 214);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
|
.emby-checkbox:focus + span + .checkboxOutline {
|
||||||
border:2px solid #ff77f1;
|
border-color: #ff77f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:focus+span+.checkboxOutline {
|
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
||||||
border-color: #ff77f1;
|
border: 2px solid #ff77f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground {
|
.itemProgressBarForeground {
|
||||||
|
|
@ -392,7 +392,7 @@ a[data-role=button] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground-recording {
|
.itemProgressBarForeground-recording {
|
||||||
background-color: #CB272A
|
background-color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countIndicator,
|
.countIndicator,
|
||||||
|
|
@ -402,30 +402,30 @@ a[data-role=button] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullSyncIndicator {
|
.fullSyncIndicator {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainDrawer {
|
.mainDrawer {
|
||||||
color: #f8f8fe;
|
color: #f8f8fe;
|
||||||
background: rgba(0, 0, 0, .5)
|
background: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-open {
|
.drawer-open {
|
||||||
background-color: #030322
|
background-color: #030322;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption:hover {
|
.navMenuOption:hover {
|
||||||
background: rgba(221, 221, 221, 0.068)
|
background: rgba(221, 221, 221, 0.068);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption-selected {
|
.navMenuOption-selected {
|
||||||
background: #6f0765 !important;
|
background: #6f0765 !important;
|
||||||
color: #f8f8fe
|
color: #f8f8fe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-button.show-focus:focus {
|
.emby-button.show-focus:focus {
|
||||||
background: #8ae9c1;
|
background: #8ae9c1;
|
||||||
color: #f8f8fe
|
color: #f8f8fe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button {
|
.emby-tab-button {
|
||||||
|
|
@ -447,130 +447,82 @@ a[data-role=button] {
|
||||||
.channelPrograms,
|
.channelPrograms,
|
||||||
.guide-channelHeaderCell,
|
.guide-channelHeaderCell,
|
||||||
.programCell {
|
.programCell {
|
||||||
border-color: rgba(255, 255, 255, .05)
|
border-color: rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-sports {
|
.programCell-sports {
|
||||||
background: #3949AB !important
|
background: #3949ab !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-movie {
|
.programCell-movie {
|
||||||
background: #5E35B1 !important
|
background: #5e35b1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-kids {
|
.programCell-kids {
|
||||||
background: #039BE5 !important
|
background: #039be5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-news {
|
.programCell-news {
|
||||||
background: #43A047 !important
|
background: #43a047 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-active {
|
.programCell-active {
|
||||||
background: rgba(0, 0, 0, .4) !important
|
background: rgba(0, 0, 0, 0.4) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelHeaderCell:focus,
|
.guide-channelHeaderCell:focus,
|
||||||
.programCell:focus {
|
.programCell:focus {
|
||||||
background-color: #48C3C8 !important;
|
background-color: #48c3c8 !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programTextIcon {
|
.guide-programTextIcon {
|
||||||
color: #1e1e1e;
|
color: #1e1e1e;
|
||||||
background: #555
|
background: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-headerTimeslots {
|
.guide-headerTimeslots {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button {
|
.guide-date-tab-button {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(255, 255, 255, .3)
|
color: rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.emby-tab-button-active,
|
.guide-date-tab-button.emby-tab-button-active,
|
||||||
.guide-date-tab-button:focus {
|
.guide-date-tab-button:focus {
|
||||||
color: #ff77f1
|
color: #ff77f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.show-focus:focus {
|
.guide-date-tab-button.show-focus:focus {
|
||||||
background-color: #48C3C8;
|
background-color: #48c3c8;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infoBanner {
|
.infoBanner {
|
||||||
color: #0e0f2d;
|
color: #0e0f2d;
|
||||||
background: #dbe6ff;
|
background: #dbe6ff;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
-webkit-border-radius: .25em;
|
-webkit-border-radius: 0.25em;
|
||||||
border-radius: .25em
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ratingbutton-icon-withrating {
|
.ratingbutton-icon-withrating {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadbutton-icon-complete,
|
.downloadbutton-icon-complete,
|
||||||
.downloadbutton-icon-on {
|
.downloadbutton-icon-on {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playstatebutton-icon-played {
|
.playstatebutton-icon-played {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeatButton-active {
|
.repeatButton-active {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
|
||||||
|
|
||||||
.card:focus .cardBox.visualCardBox,
|
|
||||||
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
|
||||||
border-color: #ff77f1 !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-desktop,
|
|
||||||
.scrollY {
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: #888 rgba(59, 59, 59, 0.5)
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-desktop ::-webkit-scrollbar {
|
|
||||||
width: .4em;
|
|
||||||
height: 1em
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track-piece {
|
|
||||||
background-color: rgba(59, 59, 59, 0.5)
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:horizontal,
|
|
||||||
::-webkit-scrollbar-thumb:vertical {
|
|
||||||
-webkit-border-radius: 2px;
|
|
||||||
background: center no-repeat #888
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeslotHeaders-desktop::-webkit-scrollbar {
|
|
||||||
height: .7em
|
|
||||||
}
|
|
||||||
|
|
||||||
.mediaInfoOfficialRating {
|
|
||||||
border: .09em solid #583fa0;
|
|
||||||
background-color: #dbe6ff;
|
|
||||||
color: #0e0f2d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metadataSidebarIcon {
|
|
||||||
color: #dbe6ff
|
|
||||||
}
|
|
||||||
|
|
||||||
.personCard .overflowPortraitCard {
|
|
||||||
width: 40vw;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.personCard .cardScalable {
|
.personCard .cardScalable {
|
||||||
|
|
@ -578,6 +530,56 @@ a[data-role=button] {
|
||||||
border: 1px solid rgb(255, 255, 255);
|
border: 1px solid rgb(255, 255, 255);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card:focus .cardBox.visualCardBox,
|
||||||
|
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
|
border-color: #ff77f1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-desktop,
|
||||||
|
.scrollY {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #888 rgba(59, 59, 59, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track-piece {
|
||||||
|
background-color: rgba(59, 59, 59, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-desktop ::-webkit-scrollbar {
|
||||||
|
width: 0.4em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:horizontal,
|
||||||
|
::-webkit-scrollbar-thumb:vertical {
|
||||||
|
border-radius: 2px;
|
||||||
|
-webkit-border-radius: 2px;
|
||||||
|
background: center no-repeat #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeslotHeaders-desktop::-webkit-scrollbar {
|
||||||
|
height: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mediaInfoOfficialRating {
|
||||||
|
border: 0.09em solid #583fa0;
|
||||||
|
background-color: #dbe6ff;
|
||||||
|
color: #0e0f2d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadataSidebarIcon {
|
||||||
|
color: #dbe6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.personCard .overflowPortraitCard {
|
||||||
|
width: 40vw;
|
||||||
|
}
|
||||||
|
|
||||||
.personCard .cardPadder-overflowPortrait,
|
.personCard .cardPadder-overflowPortrait,
|
||||||
.personCard .cardPadder-portrait {
|
.personCard .cardPadder-portrait {
|
||||||
padding-bottom: 100%;
|
padding-bottom: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,64 +1,64 @@
|
||||||
html {
|
html {
|
||||||
color: #eee;
|
color: #eee;
|
||||||
color: rgba(255, 255, 255, .9);
|
color: rgba(255, 255, 255, 0.9);
|
||||||
background-color: #0F3562
|
background-color: #0f3562;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizardStartForm,
|
.wizardStartForm,
|
||||||
.ui-corner-all,
|
.ui-corner-all,
|
||||||
.ui-shadow {
|
.ui-shadow {
|
||||||
background-color: #0C2450
|
background-color: #0c2450;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-collapsible-button {
|
.emby-collapsible-button {
|
||||||
border-color: #383838;
|
border-color: #383838;
|
||||||
border-color: rgba(255, 255, 255, .135)
|
border-color: rgba(255, 255, 255, 0.135);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader {
|
.skinHeader {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
color: rgba(255, 255, 255, .78)
|
color: rgba(255, 255, 255, 0.78);
|
||||||
}
|
}
|
||||||
|
|
||||||
.formDialogHeader:not(.formDialogHeader-clear),
|
.formDialogHeader:not(.formDialogHeader-clear),
|
||||||
.skinHeader-withBackground {
|
.skinHeader-withBackground {
|
||||||
background-color: #0C2450;
|
background: -webkit-gradient(linear, left top, left bottom, from(#0c2450), to(#081b3b));
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(#0C2450), to(#081B3B));
|
background: -webkit-linear-gradient(top, #0c2450, #081b3b);
|
||||||
background: -webkit-linear-gradient(top, #0C2450, #081B3B);
|
background: -o-linear-gradient(top, #0c2450, #081b3b);
|
||||||
background: -o-linear-gradient(top, #0C2450, #081B3B);
|
background: linear-gradient(to bottom, #0c2450, #081b3b);
|
||||||
background: linear-gradient(to bottom, #0C2450, #081B3B)
|
background-color: #0c2450;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skinHeader.semiTransparent {
|
.skinHeader.semiTransparent {
|
||||||
-webkit-backdrop-filter: none !important;
|
-webkit-backdrop-filter: none !important;
|
||||||
backdrop-filter: none !important;
|
backdrop-filter: none !important;
|
||||||
background-color: rgba(0, 0, 0, .3);
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
|
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
|
||||||
background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageTitleWithDefaultLogo {
|
.pageTitleWithDefaultLogo {
|
||||||
background-image: url(../../assets/img/banner-light.png)
|
background-image: url(../../assets/img/banner-light.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer,
|
.backgroundContainer,
|
||||||
.dialog {
|
.dialog {
|
||||||
background-color: #0F3562;
|
background: -webkit-gradient(linear, left top, left bottom, from(#0f3562), color-stop(#1162a4), to(#03215f));
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(#0F3562), color-stop(#1162A4), to(#03215F));
|
background: -webkit-linear-gradient(top, #0f3562, #1162a4, #03215f);
|
||||||
background: -webkit-linear-gradient(top, #0F3562, #1162A4, #03215F);
|
background: -o-linear-gradient(top, #0f3562, #1162a4, #03215f);
|
||||||
background: -o-linear-gradient(top, #0F3562, #1162A4, #03215F);
|
background: linear-gradient(to bottom, #0f3562, #1162a4, #03215f);
|
||||||
background: linear-gradient(to bottom, #0F3562, #1162A4, #03215F)
|
background-color: #0f3562;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgroundContainer.withBackdrop {
|
.backgroundContainer.withBackdrop {
|
||||||
background: rgba(17, 98, 164, .9)
|
background: rgba(17, 98, 164, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light:hover:not(:disabled) {
|
.paper-icon-button-light:hover:not(:disabled) {
|
||||||
color: #00a4dc;
|
color: #00a4dc;
|
||||||
background-color: rgba(0,164,220, .2);
|
background-color: rgba(0, 164, 220, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.paper-icon-button-light.show-focus:focus {
|
.paper-icon-button-light.show-focus:focus {
|
||||||
|
|
@ -68,31 +68,31 @@ html {
|
||||||
.fab,
|
.fab,
|
||||||
.raised {
|
.raised {
|
||||||
background: #082845;
|
background: #082845;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab:focus,
|
.fab:focus,
|
||||||
.raised:focus {
|
.raised:focus {
|
||||||
background: #143451
|
background: #143451;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit {
|
.button-submit {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-submit:focus {
|
.button-submit:focus {
|
||||||
background: #0cb0e8;
|
background: #0cb0e8;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-delete {
|
.button-delete {
|
||||||
background: rgb(247, 0, 0);
|
background: rgb(247, 0, 0);
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxLabel {
|
.checkboxLabel {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxListLabel,
|
.checkboxListLabel,
|
||||||
|
|
@ -101,43 +101,43 @@ html {
|
||||||
.paperListLabel,
|
.paperListLabel,
|
||||||
.textareaLabelUnfocused {
|
.textareaLabelUnfocused {
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
color: rgba(255, 255, 255, .7)
|
color: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputLabelFocused,
|
.inputLabelFocused,
|
||||||
.selectLabelFocused,
|
.selectLabelFocused,
|
||||||
.textareaLabelFocused {
|
.textareaLabelFocused {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxOutline {
|
.checkboxOutline {
|
||||||
border-color: currentColor
|
border-color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapseContent,
|
.collapseContent,
|
||||||
.paperList,
|
.paperList,
|
||||||
.visualCardBox {
|
.visualCardBox {
|
||||||
background-color: #0F3562
|
background-color: #0f3562;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground1 {
|
.defaultCardBackground1 {
|
||||||
background-color: #d2b019
|
background-color: #d2b019;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground2 {
|
.defaultCardBackground2 {
|
||||||
background-color: #338abb
|
background-color: #338abb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground3 {
|
.defaultCardBackground3 {
|
||||||
background-color: #6b689d
|
background-color: #6b689d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground4 {
|
.defaultCardBackground4 {
|
||||||
background-color: #dd452b
|
background-color: #dd452b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultCardBackground5 {
|
.defaultCardBackground5 {
|
||||||
background-color: #5ccea9
|
background-color: #5ccea9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardText-secondary,
|
.cardText-secondary,
|
||||||
|
|
@ -148,174 +148,174 @@ html {
|
||||||
.programSecondaryTitle,
|
.programSecondaryTitle,
|
||||||
.secondaryText {
|
.secondaryText {
|
||||||
color: #999;
|
color: #999;
|
||||||
color: rgba(255, 255, 255, .5)
|
color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsheetDivider {
|
.actionsheetDivider {
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
background: rgba(255, 255, 255, .14)
|
background: rgba(255, 255, 255, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardFooter-vibrant .cardText-secondary {
|
.cardFooter-vibrant .cardText-secondary {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: .5
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast {
|
.toast {
|
||||||
background: #081B3B;
|
background: #081b3b;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
color: rgba(255, 255, 255, .87)
|
color: rgba(255, 255, 255, 0.87);
|
||||||
}
|
}
|
||||||
|
|
||||||
.appfooter,
|
.appfooter,
|
||||||
.formDialogFooter:not(.formDialogFooter-clear) {
|
.formDialogFooter:not(.formDialogFooter-clear) {
|
||||||
background: #0C2450;
|
background: #0c2450;
|
||||||
background: -webkit-gradient(linear, left bottom, left top, from(#0C2450), to(#081B3B));
|
background: -webkit-gradient(linear, left bottom, left top, from(#0c2450), to(#081b3b));
|
||||||
background: -webkit-linear-gradient(bottom, #0C2450, #081B3B);
|
background: -webkit-linear-gradient(bottom, #0c2450, #081b3b);
|
||||||
background: -o-linear-gradient(bottom, #0C2450, #081B3B);
|
background: -o-linear-gradient(bottom, #0c2450, #081b3b);
|
||||||
background: linear-gradient(to top, #0C2450, #081B3B);
|
background: linear-gradient(to top, #0c2450, #081b3b);
|
||||||
color: rgba(255, 255, 255, .78)
|
color: rgba(255, 255, 255, 0.78);
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemSelectionPanel {
|
.itemSelectionPanel {
|
||||||
border: 1px solid #00a4dc
|
border: 1px solid #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectionCommandsPanel {
|
.selectionCommandsPanel {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upNextDialog-countdownText {
|
.upNextDialog-countdownText {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton {
|
.alphaPickerButton {
|
||||||
color: #999;
|
color: #999;
|
||||||
color: rgba(255, 255, 255, .5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
background-color: transparent
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alphaPickerButton-selected,
|
.alphaPickerButton-selected,
|
||||||
.alphaPickerButton-tv:focus {
|
.alphaPickerButton-tv:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailTableBodyRow-shaded:nth-child(even) {
|
.detailTableBodyRow-shaded:nth-child(even) {
|
||||||
background: #1c1c1c;
|
background: #1c1c1c;
|
||||||
background: rgba(0, 0, 0, .3)
|
background: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem-border {
|
.listItem-border {
|
||||||
border-color: rgba(0, 0, 0, .3) !important
|
border-color: rgba(0, 0, 0, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem:focus {
|
.listItem:focus {
|
||||||
background: #333
|
background: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progressring-spiner {
|
.progressring-spiner {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-flat-accent,
|
.button-flat-accent,
|
||||||
.button-link {
|
.button-link {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoText {
|
.mediaInfoText {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
background: rgba(170, 170, 190, .2)
|
background: rgba(170, 170, 190, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mediaInfoTimerIcon,
|
.mediaInfoTimerIcon,
|
||||||
.starIcon {
|
.starIcon {
|
||||||
color: #CB272A
|
color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input,
|
.emby-input,
|
||||||
.emby-textarea {
|
.emby-textarea {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: rgba(255, 255, 255, .2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border: .07em solid rgba(255, 255, 255, .135);
|
border: 0.07em solid rgba(255, 255, 255, 0.135);
|
||||||
-webkit-border-radius: .15em;
|
-webkit-border-radius: 0.15em;
|
||||||
border-radius: .15em
|
border-radius: 0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-input:focus,
|
.emby-input:focus,
|
||||||
.emby-textarea:focus {
|
.emby-textarea:focus {
|
||||||
border-color: #00a4dc
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor {
|
.emby-select-withcolor {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
background: rgba(255, 255, 255, .2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
border: .07em solid rgba(255, 255, 255, .135)
|
border: 0.07em solid rgba(255, 255, 255, 0.135);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline,
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
.emby-select-withcolor:focus {
|
.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;
|
border-color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-withcolor>option {
|
.emby-checkbox:focus + span + .checkboxOutline {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:checked + span + .checkboxOutline,
|
||||||
|
.itemProgressBarForeground {
|
||||||
|
background-color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
|
||||||
|
border-color: #00a4dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emby-select-withcolor > option {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: #fff
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-select-tv-withcolor:focus {
|
.emby-select-tv-withcolor:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.emby-checkbox:checked+span+.checkboxOutline,
|
|
||||||
.itemProgressBarForeground {
|
|
||||||
background-color: #00a4dc
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemProgressBarForeground-recording {
|
.itemProgressBarForeground-recording {
|
||||||
background-color: #CB272A
|
background-color: #cb272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countIndicator,
|
.countIndicator,
|
||||||
.fullSyncIndicator,
|
.fullSyncIndicator,
|
||||||
.playedIndicator {
|
.playedIndicator {
|
||||||
background: #00a4dc
|
background: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullSyncIndicator {
|
.fullSyncIndicator {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainDrawer {
|
.mainDrawer {
|
||||||
background-color: #0F3562;
|
background-color: #0f3562;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
color: rgba(255, 255, 255, .7)
|
color: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionSheetMenuItem:hover,
|
.actionSheetMenuItem:hover,
|
||||||
.navMenuOption:hover {
|
.navMenuOption:hover {
|
||||||
background: #252528;
|
background: #252528;
|
||||||
background: rgba(0, 0, 0, .2)
|
background: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navMenuOption-selected {
|
.navMenuOption-selected {
|
||||||
background: #00a4dc !important;
|
background: #00a4dc !important;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-button.show-focus:focus {
|
.emby-button.show-focus:focus {
|
||||||
background: #00a4dc;
|
background: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button {
|
.emby-tab-button {
|
||||||
|
|
@ -323,7 +323,7 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button-active {
|
.emby-tab-button-active {
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emby-tab-button.show-focus:focus {
|
.emby-tab-button.show-focus:focus {
|
||||||
|
|
@ -338,108 +338,110 @@ html {
|
||||||
.guide-channelHeaderCell,
|
.guide-channelHeaderCell,
|
||||||
.programCell {
|
.programCell {
|
||||||
border-color: #999;
|
border-color: #999;
|
||||||
border-color: rgba(255, 255, 255, .1)
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-sports {
|
.programCell-sports {
|
||||||
background: #3949AB !important
|
background: #3949ab !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-movie {
|
.programCell-movie {
|
||||||
background: #5E35B1 !important
|
background: #5e35b1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-kids {
|
.programCell-kids {
|
||||||
background: #039BE5 !important
|
background: #039be5 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-news {
|
.programCell-news {
|
||||||
background: #43A047 !important
|
background: #43a047 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.programCell-active {
|
.programCell-active {
|
||||||
background: rgba(0, 0, 0, .3) !important
|
background: rgba(0, 0, 0, 0.3) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-channelHeaderCell:focus,
|
.guide-channelHeaderCell:focus,
|
||||||
.programCell:focus {
|
.programCell:focus {
|
||||||
background-color: #00a4dc !important;
|
background-color: #00a4dc !important;
|
||||||
color: #fff !important
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-programTextIcon {
|
.guide-programTextIcon {
|
||||||
color: #1e1e1e;
|
color: #1e1e1e;
|
||||||
background: #555
|
background: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-headerTimeslots {
|
.guide-headerTimeslots {
|
||||||
color: inherit
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button {
|
.guide-date-tab-button {
|
||||||
color: #555;
|
color: #555;
|
||||||
color: rgba(255, 255, 255, .3)
|
color: rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.emby-tab-button-active,
|
.guide-date-tab-button.emby-tab-button-active,
|
||||||
.guide-date-tab-button:focus {
|
.guide-date-tab-button:focus {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-date-tab-button.show-focus:focus {
|
.guide-date-tab-button.show-focus:focus {
|
||||||
background-color: #00a4dc;
|
background-color: #00a4dc;
|
||||||
color: #fff
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infoBanner {
|
.infoBanner {
|
||||||
color: #000;
|
color: #000;
|
||||||
background: #fff3a5;
|
background: #fff3a5;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
-webkit-border-radius: .25em;
|
-webkit-border-radius: 0.25em;
|
||||||
border-radius: .25em
|
border-radius: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ratingbutton-icon-withrating {
|
.ratingbutton-icon-withrating {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.downloadbutton-icon-complete,
|
.downloadbutton-icon-complete,
|
||||||
.downloadbutton-icon-on {
|
.downloadbutton-icon-on {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playstatebutton-icon-played {
|
.playstatebutton-icon-played {
|
||||||
color: #c33
|
color: #c33;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeatButton-active {
|
.repeatButton-active {
|
||||||
color: #4285F4
|
color: #4285f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:focus .cardBox.visualCardBox,
|
.card:focus .cardBox.visualCardBox,
|
||||||
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
|
||||||
border-color: #fff !important
|
border-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track-piece {
|
||||||
|
background-color: #081b3b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-desktop ::-webkit-scrollbar {
|
.layout-desktop ::-webkit-scrollbar {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em
|
height: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track-piece {
|
|
||||||
background-color: #081B3B
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:horizontal,
|
::-webkit-scrollbar-thumb:horizontal,
|
||||||
::-webkit-scrollbar-thumb:vertical {
|
::-webkit-scrollbar-thumb:vertical {
|
||||||
|
border-radius: 2px;
|
||||||
-webkit-border-radius: 2px;
|
-webkit-border-radius: 2px;
|
||||||
background: center no-repeat rgba(255, 255, 255, .7)
|
background: center no-repeat rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadataSidebarIcon {
|
.metadataSidebarIcon {
|
||||||
color: #00a4dc
|
color: #00a4dc;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue