diff --git a/.ci/azure-pipelines.yml b/.ci/azure-pipelines.yml
index 0d6b018e07..1b16b94b62 100644
--- a/.ci/azure-pipelines.yml
+++ b/.ci/azure-pipelines.yml
@@ -57,3 +57,7 @@ jobs:
- script: 'yarn run lint'
displayName: 'Run ESLint'
+
+ - script: |
+ yarn run stylelint
+ displayName: 'Run stylelint'
diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 0000000000..93e3592099
--- /dev/null
+++ b/.stylelintrc
@@ -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,
+ }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 76d01b1841..55c02ffbd9 100644
--- a/package.json
+++ b/package.json
@@ -5,15 +5,17 @@
"repository": "https://github.com/jellyfin/jellyfin-web",
"license": "GPL-2.0-or-later",
"devDependencies": {
- "autoprefixer": "^9.7.3",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^2.1.0",
"eslint": "^5.16.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
- "postcss-loader": "^3.0.0",
"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-cli": "^3.3.9",
"webpack-concat-plugin": "^3.0.0",
@@ -28,6 +30,7 @@
"howler": "^2.1.2",
"jquery": "^3.4.1",
"jstree": "^3.3.7",
+ "libass-wasm": "^2.1.1",
"libjass": "^0.11.0",
"native-promise-only": "^0.8.0-a",
"requirejs": "^2.3.5",
@@ -35,7 +38,6 @@
"shaka-player": "^2.5.5",
"sortablejs": "^1.9.0",
"swiper": "^3.4.2",
- "libass-wasm": "^2.1.1",
"webcomponents.js": "^0.7.24",
"whatwg-fetch": "^1.1.1"
},
@@ -51,13 +53,13 @@
"Chrome 53",
"Chrome 56",
"Chrome 63",
- "Explorer 11",
"Firefox ESR"
],
"scripts": {
"serve": "webpack-dev-server --config webpack.dev.js --open",
"build": "webpack --config webpack.prod.js",
"lint": "eslint \"src\"",
+ "stylelint": "stylelint src/**/*.css",
"prepare": "webpack --config webpack.prod.js"
}
}
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index a26de7e9f1..0000000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
- plugins: [
- require('autoprefixer')
- ]
-}
diff --git a/scripts/scdup.py b/scripts/scdup.py
new file mode 100644
index 0000000000..468e31f14a
--- /dev/null
+++ b/scripts/scdup.py
@@ -0,0 +1,41 @@
+import sys
+import os
+import json
+
+# load every key in the source language
+# check the keys in all translations
+# remove keys that only exist in translations
+
+cwd = os.getcwd()
+langdir = cwd + '/../src/strings'
+langlst = os.listdir(langdir)
+
+langlst.remove('en-us.json')
+print(langlst)
+input('press enter to continue')
+
+keysus = []
+with open(langdir + '/' + 'en-us.json') as en:
+ langus = json.load(en)
+ for key in langus:
+ keysus.append(key)
+
+for lang in langlst:
+ with open(langdir + '/' + lang, 'r') as f:
+ inde = 2
+ if '\n \"' in f.read():
+ inde = 4
+ f.close()
+ with open(langdir + '/' + lang, 'r+') as f:
+ langjson = json.load(f)
+ langjnew = {}
+ for key in langjson:
+ if key in keysus:
+ langjnew[key] = langjson[key]
+ f.seek(0)
+ f.write(json.dumps(langjnew, indent=inde, sort_keys=False, ensure_ascii=False))
+ f.write('\n')
+ f.truncate()
+ f.close()
+
+print('DONE')
diff --git a/scripts/scgen.py b/scripts/scgen.py
new file mode 100644
index 0000000000..0d831426e6
--- /dev/null
+++ b/scripts/scgen.py
@@ -0,0 +1,40 @@
+import os
+import subprocess
+import json
+
+# load all keys in the source language
+# check entire codebase for usages
+# print unused keys to a text file
+# TODO: dynamic string usages cause false positives
+
+cwd = os.getcwd()
+langdir = cwd + '/../src/strings'
+langlst = []
+langlst.append('en-us.json')
+
+# unused keys
+dep = []
+
+def grep(key):
+ command = 'grep -r -E "(\(\\\"|\(\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key
+ p = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
+ output = p.stdout.readlines()
+ if output:
+ print('DONE: ' + key)
+ return True
+ print('UNUSED: ' + key)
+ dep.append(key)
+ return False
+
+for lang in langlst:
+ with open(langdir + '/' + lang) as f:
+ langjson = json.load(f)
+ for key in langjson:
+ grep(key)
+
+print(dep)
+print('LENGTH: ' + str(len(dep)))
+with open('scout.txt', 'w') as out:
+ for item in dep:
+ out.write(item + '\n')
+ out.close()
diff --git a/scripts/scrm.py b/scripts/scrm.py
new file mode 100644
index 0000000000..9bd5bc2a48
--- /dev/null
+++ b/scripts/scrm.py
@@ -0,0 +1,34 @@
+import sys
+import os
+import json
+
+# load text file containing unused keys
+# remove the keys from all string files
+
+cwd = os.getcwd()
+langdir = cwd + '/../src/strings'
+langlst = os.listdir(langdir)
+
+keys = []
+
+with open('scout.txt', 'r') as f:
+ for line in f:
+ keys.append(line.strip('\n'))
+
+for lang in langlst:
+ with open(langdir + '/' + lang, 'r') as f:
+ inde = 2
+ if '\n \"' in f.read():
+ inde = 4
+ f.close()
+ with open(langdir + '/' + lang, 'r+') as f:
+ langjson = json.load(f)
+ for key in keys:
+ langjson.pop(key, None)
+ f.seek(0)
+ f.write(json.dumps(langjson, indent=inde, sort_keys=False, ensure_ascii=False))
+ f.write('\n')
+ f.truncate()
+ f.close()
+
+print('DONE')
diff --git a/src/assets/css/clearbutton.css b/src/assets/css/clearbutton.css
index 2d3f8d6800..9e6c105258 100644
--- a/src/assets/css/clearbutton.css
+++ b/src/assets/css/clearbutton.css
@@ -9,4 +9,4 @@
vertical-align: middle;
font-family: inherit;
font-size: inherit;
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css
index d4928db691..8c8a9ca7f1 100644
--- a/src/assets/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@@ -1,262 +1,314 @@
.dashboardColumn,
.dashboardSections {
flex-direction: column;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
}
.dashboardFooter {
margin-top: 3.5em;
- text-align: center
+ text-align: center;
}
.dashboardFooter a {
- margin: 0 .7em
+ margin: 0 0.7em;
}
progress {
appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
margin: 0;
- background: #ccc !important
+ background: #ccc !important;
}
-progress[role]:after {
- background-image: none
+progress[role]::after {
+ background-image: none;
}
progress::-webkit-progress-bar {
- background: #ccc
+ background: #ccc;
}
progress::-moz-progress-bar {
- background-color: #00a4dc
+ background-color: #00a4dc;
}
progress::-webkit-progress-value {
- background-color: #00a4dc
+ background-color: #00a4dc;
}
-progress[aria-valuenow]:before {
- border-radius: .4em;
- background-color: #00a4dc
+progress[aria-valuenow]::before {
+ border-radius: 0.4em;
+ background-color: #00a4dc;
}
.localnav {
- margin-bottom: 2.2em !important
+ margin-bottom: 2.2em !important;
}
-@media all and (min-width:50em) {
-
- .type-interior>.ui-panel-content-wrap>div[data-role=content],
- .type-interior>div[data-role=content] {
+@media all and (min-width: 50em) {
+ .type-interior > div[data-role=content],
+ .type-interior > .ui-panel-content-wrap > div[data-role=content] {
padding-right: 0;
padding-left: 0;
padding-top: 0;
- overflow: hidden
+ overflow: hidden;
}
}
.dashboardDocument .dashboardEntryHeaderButton,
.dashboardDocument .lnkManageServer {
- display: none !important
+ display: none !important;
}
.adminDrawerLogo {
padding: 1.5em 1em 1.2em;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 1em;
- display: block
+ display: block;
}
.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] {
display: inline-block !important;
margin: 0 !important;
+ -webkit-box-shadow: none !important;
box-shadow: none !important;
- border-radius: 0
+ -webkit-border-radius: 0;
+ border-radius: 0;
}
div[data-role=controlgroup] a[data-role=button]:first-child {
- border-bottom-left-radius: .3125em;
- border-top-left-radius: .3125em
+ -webkit-border-bottom-left-radius: 0.3125em;
+ border-bottom-left-radius: 0.3125em;
+ -webkit-border-top-left-radius: 0.3125em;
+ border-top-left-radius: 0.3125em;
}
div[data-role=controlgroup] a[data-role=button]:last-child {
- border-bottom-right-radius: .3125em;
- border-top-right-radius: .3125em
+ -webkit-border-bottom-right-radius: 0.3125em;
+ border-bottom-right-radius: 0.3125em;
+ -webkit-border-top-right-radius: 0.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;
- margin: 0 0 0 -.4em !important
+ margin: 0 0 0 -0.4em !important;
}
div[data-role=controlgroup] a.ui-btn-active {
background: #00a4dc !important;
- color: #292929 !important
+ color: #292929 !important;
}
-.header .imageLink {
- display: inline-block
+.sessionAppInfo img {
+ max-width: 40px;
+ max-height: 40px;
+ margin-right: 8px;
}
-.header .imageLink img {
- height: 2.1em;
- vertical-align: middle
-}
-
-.content-primary {
- padding-top: 6em;
- padding-right: 1em;
- padding-left: 1em
-}
-
-.withTabs .content-primary {
- padding-top: 9em !important
-}
-
-@media all and (min-width:40em) {
- .content-primary {
- padding-top: 7em
- }
-
- .withTabs .content-primary {
- padding-top: 10em !important
- }
-}
-
-@media all and (min-width:84em) {
- .withTabs .content-primary {
- padding-top: 7em !important
- }
-}
-
-.content-primary ul:first-child {
- margin-top: 0
-}
-
-.dashboardSections {
- display: flex;
- flex-direction: column
-}
-
-.dashboardColumn {
- display: flex;
- flex-direction: column;
- flex-shrink: 0;
- flex-grow: 1
-}
-
-.activeSession:not(.playingSession) .sessionNowPlayingContent {
- display: none
-}
-
-.dashboardSection {
- 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 {
- flex-wrap: wrap;
- 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%
+.appLinks img {
+ height: 36px;
}
.wizardContent h2 img {
height: 2.5em;
vertical-align: middle;
- margin-right: .5em;
+ margin-right: 0.5em;
position: relative;
- top: -.3em
+ top: -0.3em;
}
-.scheduledTaskPaperIconItem {
- outline: 0 !important
+.header .imageLink {
+ display: inline-block;
}
-.activeSession {
- width: 100% !important
+.header .imageLink img {
+ height: 2.1em;
+ vertical-align: middle;
}
-.activitylogUserPhoto {
- height:1.71em;
- width:1.71em;
- border-radius:100%;
- margin-right:.5em;
- background-size:cover;
- background-repeat:no-repeat;
- background-position:center;
+.content-primary {
+ padding-top: 6em;
+ padding-right: 1em;
+ padding-left: 1em;
}
-@media all and (min-width:40em) {
- .activeSession {
- width: 100% !important
+.withTabs .content-primary {
+ padding-top: 9em !important;
+}
+
+@media all and (min-width: 40em) {
+ .content-primary {
+ padding-top: 7em;
+ }
+
+ .withTabs .content-primary {
+ padding-top: 10em !important;
}
}
-@media all and (min-width:50em) {
+@media all and (min-width: 84em) {
+ .withTabs .content-primary {
+ padding-top: 7em !important;
+ }
+}
+
+.content-primary ul:first-child {
+ margin-top: 0;
+}
+
+.dashboardSections {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+}
+
+.dashboardColumn {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ -webkit-flex-shrink: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ flex-grow: 1;
+}
+
+.sessionNowPlayingContent {
+ -webkit-background-size: cover;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 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: 50% !important
+ width: 100% !important;
+ }
+}
+
+@media all and (min-width: 50em) {
+ .activeSession {
+ width: 50% !important;
}
}
.sessionCardFooter {
- padding-top: .5em !important;
+ padding-top: 0.5em !important;
padding-bottom: 1em !important;
border-top: 1px solid #eee;
text-align: center;
- position: relative
+ position: relative;
}
.sessionAppInfo {
@@ -265,22 +317,11 @@ div[data-role=controlgroup] a.ui-btn-active {
}
.sessionCardButtons {
- min-height: 2.7em
+ min-height: 2.7em;
}
.sessionCardButton {
- margin: 0
-}
-
-.sessionNowPlayingContent {
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0
+ margin: 0;
}
.sessionNowPlayingInnerContent {
@@ -289,23 +330,23 @@ div[data-role=controlgroup] a.ui-btn-active {
left: 0;
right: 0;
bottom: 0;
- font-weight: 400
+ font-weight: 400;
}
-.sessionNowPlayingContent-withbackground+.sessionNowPlayingInnerContent {
+.sessionNowPlayingContent-withbackground + .sessionNowPlayingInnerContent {
color: #fff !important;
- background: rgba(0, 0, 0, .7)
+ background: rgba(0, 0, 0, 0.7);
}
.sessionAppName {
vertical-align: top;
- max-width: 200px
+ max-width: 200px;
}
.sessionNowPlayingDetails {
display: flex;
position: absolute;
- bottom: 0px;
+ bottom: 0;
width: 100%;
}
@@ -315,12 +356,6 @@ div[data-role=controlgroup] a.ui-btn-active {
padding: 0.8em 0.5em;
}
-.sessionAppInfo img {
- max-width: 40px;
- max-height: 40px;
- margin-right: 8px;
-}
-
.sessionNowPlayingTime {
flex-shrink: 0;
align-self: flex-end;
@@ -332,6 +367,13 @@ div[data-role=controlgroup] a.ui-btn-active {
white-space: nowrap;
}
+.playbackProgress,
+.transcodingProgress {
+ margin: 0;
+ width: 100%;
+ background: transparent !important;
+}
+
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
position: absolute;
@@ -342,13 +384,6 @@ div[data-role=controlgroup] a.ui-btn-active {
width: 100%;
}
-.playbackProgress,
-.transcodingProgress {
- margin: 0px;
- width: 100%;
- background: transparent !important;
-}
-
.playbackProgress > div {
z-index: 1000;
background-color: #00a4dc;
@@ -358,70 +393,70 @@ div[data-role=controlgroup] a.ui-btn-active {
background-color: #dd4919;
}
-@media all and (max-width:34.375em) {
+@media all and (max-width: 34.375em) {
.sessionAppName {
- max-width: 160px
+ max-width: 160px;
}
}
-@media all and (max-width:31.25em) {
+@media all and (max-width: 31.25em) {
.sessionAppName {
- max-width: 150px
+ max-width: 150px;
}
}
.disabledUser {
- filter: grayscale(100%)
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
}
.disabledUserBanner {
- margin: 0 0 2em
+ margin: 0 0 2em;
}
.appLinks a {
- text-decoration: none !important
-}
-
-.appLinks a+a {
- margin-left: 5px
-}
-
-.appLinks img {
- height: 36px
-}
-
-a[data-role=button] {
- 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;
- background: #292929 !important;
+}
+
+.appLinks a + a {
+ margin-left: 5px;
+}
+
+@-webkit-keyframes rotating {
+ from {
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
+ }
+
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
}
@keyframes rotating {
from {
- transform: rotate(0)
+ -webkit-transform: rotate(0);
+ transform: rotate(0);
}
to {
- transform: rotate(360deg)
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
}
}
.rotatingCircle {
- animation: rotating 2s linear infinite
+ -webkit-animation: rotating 2s linear infinite;
+ animation: rotating 2s linear infinite;
}
.pluginPreviewImg {
- 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 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
-.ui-bar-a{
+.ui-bar-a {
text-align: center;
padding: 0 20px;
}
diff --git a/src/assets/css/detailtable.css b/src/assets/css/detailtable.css
index 33f0608365..4e2e16511c 100644
--- a/src/assets/css/detailtable.css
+++ b/src/assets/css/detailtable.css
@@ -1,7 +1,7 @@
.detailTableBodyCell,
.detailTableHeaderCell {
border-spacing: 0;
- padding: .4em
+ padding: 0.4em;
}
.detailTable {
@@ -9,11 +9,11 @@
border-spacing: 0;
text-align: left;
width: 100%;
- margin: 0 auto
+ margin: 0 auto;
}
.detailTableHeaderCell {
font-weight: 700;
text-align: left;
- vertical-align: top
-}
\ No newline at end of file
+ vertical-align: top;
+}
diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.css
index b35e25d57b..a5a479f2f5 100644
--- a/src/assets/css/flexstyles.css
+++ b/src/assets/css/flexstyles.css
@@ -44,4 +44,4 @@
.align-self-flex-end {
align-self: flex-end;
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css
index da5515fc1e..30fd1e2eb6 100644
--- a/src/assets/css/fonts.css
+++ b/src/assets/css/fonts.css
@@ -1,13 +1,13 @@
html {
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%;
+ -webkit-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 */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
}
diff --git a/src/assets/css/ios.css b/src/assets/css/ios.css
index 47fa7bd538..57de0c5fdd 100644
--- a/src/assets/css/ios.css
+++ b/src/assets/css/ios.css
@@ -1,8 +1,8 @@
html {
- font-size: 82% !important
+ font-size: 82% !important;
}
.formDialogFooter {
position: static !important;
- margin: 0 -1em !important
-}
\ No newline at end of file
+ margin: 0 -1em !important;
+}
diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index af106959e0..26b65115b6 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -1,7 +1,7 @@
.headerUserImage,
.navMenuOption,
.pageTitle {
- vertical-align: middle
+ vertical-align: middle;
}
.detailButton-mobile,
@@ -9,34 +9,35 @@
.listPaging,
.sectionTabs,
.viewSettings {
- text-align: center
+ text-align: center;
}
.headerSelectedPlayer,
.itemMiscInfo,
.navMenuOptionText {
+ -o-text-overflow: ellipsis;
text-overflow: ellipsis;
- overflow: hidden
+ overflow: hidden;
}
.libraryPage {
- padding-top: 7em !important
+ padding-top: 7em !important;
}
.itemDetailPage {
- padding-top: 0em !important
+ padding-top: 0 !important;
}
.standalonePage {
- padding-top: 4.5em !important
+ padding-top: 4.5em !important;
}
.wizardPage {
- padding-top: 7em !important
+ padding-top: 7em !important;
}
.libraryPage:not(.noSecondaryNavPage) {
- padding-top: 7.5em !important
+ padding-top: 7.5em !important;
}
.absolutePageTabContent {
@@ -47,22 +48,27 @@
z-index: 1;
margin: 0 !important;
top: 6.9em !important;
- transition: transform .2s ease-out
+ -webkit-transition: -webkit-transform 0.2s ease-out;
+ -o-transition: transform 0.2s ease-out;
+ transition: transform 0.2s ease-out;
}
.pageTabContent:not(.is-active) {
- display: none !important
+ display: none !important;
}
.headerUserImage {
+ -webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
+ -webkit-border-radius: 100em;
border-radius: 100em;
- display: inline-block
+ display: inline-block;
}
.headerUserButtonRound div {
+ -webkit-border-radius: 100em;
border-radius: 100em;
background-size: cover;
background-repeat: no-repeat;
@@ -70,41 +76,74 @@
}
.headerButton {
- flex-shrink: 0
+ -webkit-flex-shrink: 0;
+ flex-shrink: 0;
}
.hideMainDrawer .mainDrawerButton {
- display: none
+ display: none;
+}
+
+.headerLeft {
+ display: flex;
+ -webkit-align-items: center;
+ align-items: center;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ flex-grow: 1;
+ overflow: hidden;
+ justify-content: flex-start;
+}
+
+.headerRight {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-align-items: center;
+ align-items: center;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ justify-content: flex-end;
}
.noHeaderRight .headerRight,
.noHomeButtonHeader .headerHomeButton {
- display: none !important
+ display: none !important;
}
.pageTitle {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
display: inline-flex;
- margin: .3em 0 0 .5em;
+ margin: 0.3em 0 0 0.5em;
height: 1.7em;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
- flex-shrink: 1
+ -webkit-flex-shrink: 1;
+ flex-shrink: 1;
}
.headerLeft,
.skinHeader {
- display: flex;
+ display: -webkit-box;
+ display: -webkit-flex;
}
.detailButton-mobile,
.skinHeader {
flex-direction: column;
+ -webkit-flex-direction: column;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
}
.pageTitleWithLogo {
background-position: left center;
+ -webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
- width: 13.2em
+ width: 13.2em;
}
.skinHeader {
@@ -116,122 +155,114 @@
border: 0;
display: flex;
flex-direction: column;
- contain: layout style paint
-}
-
-.headerLeft,
-.headerRight {
- justify-content: center;
+ contain: layout style paint;
}
.hiddenViewMenuBar .skinHeader {
- display: none
+ display: none;
}
.headerTop {
- padding: .54em 0
-}
-
-.headerLeft {
- display: flex;
- align-items: center;
- flex-grow: 1;
- overflow: hidden;
- justify-content: left;
+ padding: 0.54em 0;
}
.sectionTabs {
- width: 100%
-}
-
-.headerRight {
- display: flex;
- align-items: center;
- justify-content: flex-end
+ width: 100%;
}
.selectedMediaFolder {
- background-color: #f2f2f2 !important
+ background-color: #f2f2f2 !important;
}
.navMenuOption {
+ display: -webkit-box !important;
+ display: -webkit-flex !important;
display: flex !important;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
text-decoration: none;
color: inherit;
- padding: .9em 0 .9em 2.4em !important;
+ padding: 0.9em 0 0.9em 2.4em !important;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
flex-grow: 1;
font-weight: 400 !important;
margin: 0 !important;
- border-radius: 0 !important
+ -webkit-border-radius: 0 !important;
+ border-radius: 0 !important;
}
.navMenuOptionIcon {
margin-right: 1.2em;
- flex-shrink: 0
+ -webkit-flex-shrink: 0;
+ flex-shrink: 0;
}
.navMenuOptionText {
- white-space: nowrap
+ white-space: nowrap;
}
.sidebarHeader {
padding-left: 1.2em;
- margin: 1em 0 .5em
+ margin: 1em 0 0.5em;
}
.dashboardDocument .skinBody {
- transition: left ease-in-out .3s, padding ease-in-out .3s;
+ -webkit-transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
+ -o-transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
+ transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
position: absolute;
top: 0;
right: 0;
bottom: 0;
- left: 0
+ left: 0;
}
.layout-desktop .searchTabButton,
.layout-mobile .searchTabButton,
.layout-tv .headerSearchButton {
- display: none !important
+ display: none !important;
}
.mainDrawer-scrollContainer {
- padding-bottom: 10vh
+ padding-bottom: 10vh;
}
-@media all and (min-width:40em) {
-
+@media all and (min-width: 40em) {
.dashboardDocument .adminDrawerLogo,
.dashboardDocument .mainDrawerButton {
- display: none !important
+ display: none !important;
}
.dashboardDocument .mainDrawer {
z-index: inherit !important;
left: 0 !important;
top: 0 !important;
+ -webkit-transform: none !important;
transform: none !important;
+ -webkit-box-shadow: none !important;
box-shadow: none !important;
width: 20.205em !important;
- font-size: 94%
+ font-size: 94%;
}
.dashboardDocument .mainDrawer-scrollContainer {
- margin-top: 5em !important
+ margin-top: 5em !important;
}
.dashboardDocument .skinBody {
- left: 20em
+ left: 20em;
}
}
-@media all and (max-width:60em) {
+@media all and (max-width: 60em) {
.libraryDocument .mainDrawerButton {
- display: none
+ display: none;
}
}
-@media all and (max-width:84em) {
+@media all and (max-width: 84em) {
.withSectionTabs .headerTop {
padding-bottom: 0.2em;
}
@@ -241,31 +272,36 @@
}
}
-@media all and (min-width:84em) {
+@media all and (min-width: 84em) {
.headerTop {
- padding: 1.489em 0
+ padding: 1.489em 0;
}
.headerTabs {
+ -webkit-align-self: center;
align-self: center;
width: auto;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
justify-content: center;
margin-top: -3.34em;
position: relative;
- top: -1.05em
+ top: -1.05em;
}
.libraryPage:not(.noSecondaryNavPage) {
- padding-top: 4.6em !important
+ padding-top: 4.6em !important;
}
.pageWithAbsoluteTabs:not(.noSecondaryNavPage) {
- padding-top: 6.7em !important
+ padding-top: 6.7em !important;
}
.absolutePageTabContent {
- top: 5.7em !important
+ top: 5.7em !important;
}
.dashboardDocument .mainDrawer-scrollContainer {
@@ -275,22 +311,22 @@
.headerSelectedPlayer {
max-width: 10em;
- white-space: nowrap
+ white-space: nowrap;
}
-@media all and (max-width:37.5em) {
+@media all and (max-width: 37.5em) {
.headerSelectedPlayer {
- display: none
+ display: none;
}
}
.hidingAnimatedTab {
- visibility: hidden
+ visibility: hidden;
}
.headerArrowImage {
height: 20px;
- margin-left: .5em
+ margin-left: 0.5em;
}
.backdropContainer {
@@ -299,113 +335,113 @@
left: 0;
right: 0;
bottom: 0;
- z-index: -1
+ z-index: -1;
}
.libraryPage .header {
- padding-bottom: 0
+ padding-bottom: 0;
}
.flexPageTabContent.is-active {
- display: flex !important
+ display: -webkit-box !important;
+ display: -webkit-flex !important;
+ display: flex !important;
}
.viewSettings {
- margin: 0 0 .25em
+ margin: 0 0 0.25em;
}
-.viewControls+.listTopPaging {
- margin-left: .5em !important
+.listTopPaging,
+.viewControls {
+ display: inline-block;
+}
+
+.viewControls + .listTopPaging {
+ margin-left: 0.5em !important;
}
.criticReview {
margin: 1.5em 0;
background: #222;
- padding: .8em .8em .8em 3em;
- border-radius: .3em;
- position: relative
+ padding: 0.8em 0.8em 0.8em 3em;
+ -webkit-border-radius: 0.3em;
+ border-radius: 0.3em;
+ position: relative;
}
.detailLogo,
.itemBackdrop {
background-repeat: no-repeat;
- background-position: center center
+ background-position: center center;
}
.criticReview:first-child {
- margin-top: .5em
+ margin-top: 0.5em;
}
.criticReview img {
- width: 2.4em
+ width: 2.4em;
}
.criticRatingScore {
- margin-bottom: .5em
+ margin-bottom: 0.5em;
}
.itemTag {
display: inline-block;
- margin-right: 1em
+ margin-right: 1em;
}
.itemOverview {
- white-space: pre-wrap
+ white-space: pre-wrap;
}
.itemLinks {
- padding: 0
+ padding: 0;
}
.itemLinks p {
- margin: .5em 0
+ margin: 0.5em 0;
}
.reviewLink,
.reviewerName {
- margin-top: .5em
+ margin-top: 0.5em;
}
.reviewerName {
- color: #ccc
+ color: #ccc;
}
.reviewDate {
- margin-left: 1em
+ margin-left: 1em;
}
.reviewScore {
position: absolute;
- left: .8em
+ left: 0.8em;
}
.itemBackdrop {
+ -webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 50vh;
- position: relative
+ position: relative;
}
.itemBackdropProgressBar {
position: absolute !important;
bottom: 0;
left: 0;
- right: 0
+ right: 0;
}
.desktopMiscInfoContainer {
position: absolute;
- bottom: .75em
-}
-
-.layout-mobile .detailPagePrimaryContainer {
- display: block;
- position: relative;
-}
-
-.layout-tv .detailPagePrimaryContainer {
- position: relative;
+ bottom: 0.75em;
}
.detailPagePrimaryContainer {
@@ -418,6 +454,15 @@
z-index: 2;
}
+.layout-mobile .detailPagePrimaryContainer {
+ display: block;
+ position: relative;
+}
+
+.layout-tv .detailPagePrimaryContainer {
+ position: relative;
+}
+
.infoWrapper {
flex: 1 0 0;
}
@@ -437,11 +482,6 @@
padding-right: 2%;
}
-.layout-mobile .detailImageContainer,
-.layout-tv .detailImageContainer {
- position: relative;
-}
-
.detailImageContainer {
margin: 1.25em 0;
position: sticky;
@@ -450,9 +490,16 @@
width: 22.786458333333332vw;
}
+.layout-mobile .detailImageContainer,
+.layout-tv .detailImageContainer {
+ position: relative;
+}
+
.detailPagePrimaryContent {
position: relative;
- flex-grow: 1
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ flex-grow: 1;
}
.detailLogo {
@@ -461,22 +508,23 @@
position: absolute;
top: 14.5%;
right: 10.5%;
- background-size: contain
+ -webkit-background-size: contain;
+ background-size: contain;
}
-@media all and (max-width:87.5em) {
+@media all and (max-width: 87.5em) {
.detailLogo {
- right: 5%
+ right: 5%;
}
}
-@media all and (max-width:75em) {
+@media all and (max-width: 75em) {
.detailLogo {
- right: 2%
+ right: 2%;
}
}
-@media all and (max-width:68.75em) {
+@media all and (max-width: 68.75em) {
.detailLogo {
width: 14.91em;
height: 3.5em;
@@ -484,161 +532,189 @@
bottom: 5%;
top: auto;
background-position: center right;
- display: none
+ display: none;
}
}
.itemDetailImage {
width: 100% !important;
- 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);
+ -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
-@media all and (max-width:62.5em) {
+@media all and (max-width: 62.5em) {
.detailPageContent {
- position: relative
+ position: relative;
}
.btnPlaySimple {
- display: none !important
+ display: none !important;
}
}
-@media all and (max-width:75em) {
+@media all and (max-width: 75em) {
.lnkSibling {
- display: none !important
+ display: none !important;
}
}
.parentName {
display: block;
- margin-bottom: .5em
+ margin-bottom: 0.5em;
+}
+
+.btnSyncComplete {
+ background: #673ab7 !important;
+}
+
+.btnSyncComplete i {
+ -webkit-border-radius: 100em;
+ border-radius: 100em;
}
.emby-button.detailFloatingButton {
position: absolute;
- background-color: rgba(0, 0, 0, .5) !important;
+ background-color: rgba(0, 0, 0, 0.5) !important;
z-index: 1;
top: 50%;
left: 50%;
margin: -2.2em 0 0 -2.2em;
- border: 2.7px solid rgba(255, 255, 255, .6);
- padding: .38em !important;
- color: rgba(255, 255, 255, .76)
+ padding: 0.4em !important;
+ color: rgba(255, 255, 255, 0.76);
}
.emby-button.detailFloatingButton i {
- font-size: 3.5em
+ font-size: 3.5em;
}
-@media all and (max-width:62.5em) {
+@media all and (max-width: 62.5em) {
.parentName {
- margin-bottom: 1em
+ margin-bottom: 1em;
}
.itemDetailPage {
- padding-top: 0 !important
+ padding-top: 0 !important;
}
.detailimg-hidemobile {
- display: none
+ display: none;
}
}
-@media all and (min-width:31.25em) {
+@media all and (min-width: 31.25em) {
.mobileDetails {
- display: none
+ display: none;
}
}
-@media all and (max-width:31.25em) {
+@media all and (max-width: 31.25em) {
.desktopDetails {
- display: none !important
+ display: none !important;
}
}
.detailButton-mobile,
.mainDetailButtons {
display: flex;
+ display: -webkit-box;
+ display: -webkit-flex;
}
.itemName {
- margin: .5em 0
+ margin: 0.5em 0;
}
.empty {
- margin: 0
+ margin: 0;
}
-.detailCollapsibleSection:not(.hide)+.detailCollapsibleSection {
- margin-top: -2em
+.detailCollapsibleSection:not(.hide) + .detailCollapsibleSection {
+ margin-top: -2em;
}
.detailPageCollabsible {
- margin-top: 0
+ margin-top: 0;
}
.mainDetailButtons {
display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
+ -webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 1em 0;
}
.recordingFields button {
margin-left: 0;
- margin-right: .5em;
- flex-shrink: 0
+ margin-right: 0.5em;
+ -webkit-flex-shrink: 0;
+ flex-shrink: 0;
}
-.mainDetailButtons.hide+.recordingFields {
- margin-top: 1.5em !important
+.mainDetailButtons.hide + .recordingFields {
+ margin-top: 1.5em !important;
}
.detailButton-mobile {
display: flex;
flex-direction: column;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
justify-content: center;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
margin: 0 !important;
- padding: .5em .7em !important
+ padding: 0.5em 0.7em !important;
}
.detailButton {
- margin: 0 .5em 0 0 !important
+ margin: 0 0.5em 0 0 !important;
}
-@media all and (min-width:29em) {
+@media all and (min-width: 29em) {
.detailButton-mobile {
- padding-left: .75em !important;
- padding-right: .75em !important
+ padding-left: 0.75em !important;
+ padding-right: 0.75em !important;
}
}
-@media all and (min-width:32em) {
+@media all and (min-width: 32em) {
.detailButton-mobile {
- padding-left: .8em !important;
- padding-right: .8em !important
+ padding-left: 0.8em !important;
+ padding-right: 0.8em !important;
}
}
-@media all and (min-width:35em) {
+@media all and (min-width: 35em) {
.detailButton-mobile {
- padding-left: .85em !important;
- padding-right: .85em !important
+ padding-left: 0.85em !important;
+ padding-right: 0.85em !important;
}
}
.detailButton-mobile-content {
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
flex-direction: column;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
justify-content: center;
- align-items: center
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ align-items: center;
}
.detailButton-mobile-icon {
font-size: 1.6em !important;
width: 1em;
- height: 1em
+ height: 1em;
}
.detailImageProgressContainer {
@@ -647,62 +723,64 @@
}
.detailButton-mobile-text {
- margin-top: .7em;
+ margin-top: 0.7em;
font-size: 80%;
- font-weight: 400
+ font-weight: 400;
}
-@media all and (max-width:62.5em) {
+@media all and (max-width: 62.5em) {
.mainDetailButtons {
- margin-left: -.5em
+ margin-left: -0.5em;
}
.detailButton {
- display: none !important
+ display: none !important;
}
}
-@media all and (min-width:62.5em) {
+@media all and (min-width: 62.5em) {
.detailFloatingButton {
- display: none !important
+ display: none !important;
}
.mainDetailButtons {
font-size: 108%;
- margin: 1.25em 0
+ margin: 1.25em 0;
}
}
-.listTopPaging,
-.viewControls {
- display: inline-block
-}
-
-@media all and (max-width:50em) {
+@media all and (max-width: 50em) {
.editorMenuLink {
- display: none
+ display: none;
}
}
.itemMiscInfo {
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-flex-wrap: wrap;
flex-wrap: wrap;
- align-items: center
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ align-items: center;
}
-@media all and (max-width:31.25em) {
+@media all and (max-width: 31.25em) {
.mobileDetails .itemMiscInfo {
text-align: center;
- justify-content: center
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
}
.itemMiscInfo .endsAt {
- display: none
+ display: none;
}
}
.layout-tv .detailVerticalSection {
- margin-bottom: 3.4em !important
+ margin-bottom: 3.4em !important;
}
.detailPageContent {
@@ -710,7 +788,7 @@
border-collapse: collapse;
}
-@media all and (max-width:62.5em) {
+@media all and (max-width: 62.5em) {
.detailPageContent-nodetailimg {
padding-top: 0;
}
@@ -719,92 +797,89 @@
.mediaInfoStream {
margin: 0 3em 0 0;
display: inline-block;
- vertical-align: top
+ vertical-align: top;
}
.mediaInfoStreamType {
display: block;
- margin: 1em 0
+ margin: 1em 0;
}
.mediaInfoAttribute,
.mediaInfoLabel {
- display: inline-block
+ display: inline-block;
}
.mediaInfoLabel {
margin-right: 1em;
- font-weight: 600
+ font-weight: 600;
}
.recordingProgressBar::-moz-progress-bar {
- background-color: #c33
+ background-color: #c33;
}
.recordingProgressBar::-webkit-progress-value {
- background-color: #c33
+ background-color: #c33;
}
-.recordingProgressBar[aria-valuenow]:before {
- background-color: #c33
+.recordingProgressBar[aria-valuenow]::before {
+ background-color: #c33;
}
.timelineHeader {
- margin-bottom: .25em;
+ margin-bottom: 0.25em;
line-height: 1.25em;
- line-height: initial
+ line-height: initial;
}
.itemsContainer {
- margin: 0 auto
+ margin: 0 auto;
}
-@media all and (max-height:31.25em) {
+@media all and (max-height: 31.25em) {
.itemBackdrop {
- height: 52vh
+ height: 52vh;
}
}
-@media all and (max-width:75em) {
+@media all and (max-width: 75em) {
.listViewUserDataButtons {
- display: none !important
+ display: none !important;
}
}
-@media all and (max-width:62.5em) {
+@media all and (max-width: 62.5em) {
.detailsHiddenOnMobile {
- display: none
+ display: none;
}
}
-.btnSyncComplete {
- background: #673AB7 !important
-}
-
-.btnSyncComplete i {
- border-radius: 100em
-}
-
.bulletSeparator {
- margin: 0 .35em
+ margin: 0 0.35em;
}
.mediaInfoIcons {
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
margin: 1em 0;
- flex-wrap: wrap
+ -webkit-flex-wrap: wrap;
+ flex-wrap: wrap;
}
.verticalSection-extrabottompadding {
- margin-bottom: 2.7em
+ margin-bottom: 2.7em;
}
.sectionTitleButton,
.sectionTitleIconButton {
margin-right: 0 !important;
display: inline-block;
- vertical-align: middle
+ vertical-align: middle;
}
.sectionTitleContainer {
@@ -830,43 +905,49 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
.sectionTitleButton {
margin-left: 1.5em !important;
- flex-shrink: 0
+ -webkit-flex-shrink: 0;
+ flex-shrink: 0;
}
.sectionTitleButton + .sectionTitleButton {
- margin-left: .5em !important
+ margin-left: 0.5em !important;
}
.sectionTitleIconButton {
margin-left: 1.5em !important;
+ -webkit-flex-shrink: 0;
flex-shrink: 0;
font-size: 84% !important;
- padding: .5em !important
+ padding: 0.5em !important;
}
.horizontalItemsContainer {
- display: flex
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
}
.sectionTitleTextButton {
margin: 0 !important;
+ display: -webkit-inline-box !important;
+ display: -webkit-inline-flex !important;
display: inline-flex !important;
- color: inherit !important
+ color: inherit !important;
}
.sectionTitleTextButton:not(.padded-left) {
- padding: 0 !important
+ padding: 0 !important;
}
.sectionTitleTextButton.padded-left {
padding-bottom: 0 !important;
padding-right: 0 !important;
- padding-top: 0 !important
+ padding-top: 0 !important;
}
-.sectionTitleTextButton>.sectionTitle {
+.sectionTitleTextButton > .sectionTitle {
margin-bottom: 0;
- margin-top: 0
+ margin-top: 0;
}
.padded-left {
@@ -895,7 +976,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
margin-bottom: -1em;
}
-@media all and (min-height:31.25em) {
+@media all and (min-height: 31.25em) {
.padded-left-withalphapicker {
padding-left: 7.5%;
}
@@ -906,7 +987,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
}
.searchfields-icon {
- color: #aaaaaa;
+ color: #aaa;
}
.button-accent-flat {
@@ -917,25 +998,27 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
text-decoration: none;
font-weight: inherit !important;
vertical-align: middle;
- color: inherit !important
+ color: inherit !important;
}
.itemsViewSettingsContainer {
- justify-content: center
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
}
-@media all and (min-width:40em) {
+@media all and (min-width: 40em) {
.listIconButton-autohide {
- display: none !important
+ display: none !important;
}
}
-@media all and (max-width:40em) {
+@media all and (max-width: 40em) {
.listTextButton-autohide {
- display: none !important
+ display: none !important;
}
}
-.itemsViewSettingsContainer>.button-flat {
- margin: 0
+.itemsViewSettingsContainer > .button-flat {
+ margin: 0;
}
diff --git a/src/assets/css/livetv.css b/src/assets/css/livetv.css
index 93e3e029c8..695adff8c5 100644
--- a/src/assets/css/livetv.css
+++ b/src/assets/css/livetv.css
@@ -1,9 +1,9 @@
.guideVerticalScroller {
- padding-bottom: 15em
+ padding-bottom: 15em;
}
-@media all and (min-width:62.5em) {
+@media all and (min-width: 62.5em) {
#guideTab {
- padding-left: .5em
+ padding-left: 0.5em;
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/metadataeditor.css b/src/assets/css/metadataeditor.css
index c5de6f3efe..190f53187f 100644
--- a/src/assets/css/metadataeditor.css
+++ b/src/assets/css/metadataeditor.css
@@ -1,53 +1,57 @@
.editPageSidebar {
- display: block
+ display: block;
}
.editPageSidebar-withcontent {
- display: none
+ display: none;
}
.libraryTree {
- margin-left: .25em
+ margin-left: 0.25em;
}
.offlineEditorNode {
- color: #c33
+ color: #c33;
}
.editorNode img {
height: 18px;
- margin: 0 .35em;
+ margin: 0 0.35em;
vertical-align: middle;
position: relative;
- top: -2px
+ top: -2px;
}
.jstree-anchor {
- font-weight: 400 !important
+ font-weight: 400 !important;
}
.jstree-wholerow-hovered {
background: #38c !important;
+ -webkit-border-radius: 0 !important;
border-radius: 0 !important;
- box-shadow: none !important
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
}
.jstree-default .jstree-hovered {
background: 0 0 !important;
+ -webkit-border-radius: 0 !important;
border-radius: 0 !important;
+ -webkit-box-shadow: none !important;
box-shadow: none !important;
- color: #fff !important
+ color: #fff !important;
}
.jstree-default .jstree-wholerow-clicked {
- background: #00a4dc !important
+ background: #00a4dc !important;
}
.metadataSidebarIcon {
- margin-right: .4em
+ margin-right: 0.4em;
}
-@media all and (min-width:50em) {
+@media all and (min-width: 50em) {
.editPageSidebar {
position: fixed;
top: 5.2em;
@@ -55,21 +59,21 @@
left: 0;
width: 30%;
border-right: 1px solid #555;
- display: block
+ display: block;
}
.editPageInnerContent {
float: right;
- width: 68.5%
+ width: 68.5%;
}
}
-@media all and (min-width:112.5em) {
+@media all and (min-width: 112.5em) {
.editPageSidebar {
- width: 25%
+ width: 25%;
}
.editPageInnerContent {
- width: 73.5%
+ width: 73.5%;
}
}
diff --git a/src/assets/css/scrollstyles.css b/src/assets/css/scrollstyles.css
index 69039ce341..1cb3207e06 100644
--- a/src/assets/css/scrollstyles.css
+++ b/src/assets/css/scrollstyles.css
@@ -1,5 +1,6 @@
.scrollX {
overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
overflow-y: hidden;
white-space: nowrap;
}
@@ -8,39 +9,50 @@
scroll-behavior: smooth;
}
-.hiddenScrollX, .layout-tv .scrollX {
- scrollbar-width: none;
+.hiddenScrollX,
+.layout-tv .scrollX {
+ -ms-overflow-style: none;
}
.hiddenScrollX-forced {
- scrollbar-width: none;
+ overflow: -moz-scrollbars-none;
}
-.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
+.hiddenScrollX::-webkit-scrollbar,
+.layout-tv .scrollX::-webkit-scrollbar {
height: 0 !important;
display: none;
}
.scrollY {
overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
.smoothScrollY {
overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
overflow-x: hidden;
scroll-behavior: smooth;
}
-.hiddenScrollY, .layout-tv .smoothScrollY {
- scrollbar-width: none;
+.hiddenScrollY,
+.layout-tv .smoothScrollY {
+ -ms-overflow-style: none;
+
+ /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
+
+ /* overflow: -moz-scrollbars-none; */
}
.hiddenScrollY-forced {
- scrollbar-width: 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;
display: none;
}
diff --git a/src/assets/css/site.css b/src/assets/css/site.css
index 6491799117..55ce4c8807 100644
--- a/src/assets/css/site.css
+++ b/src/assets/css/site.css
@@ -2,7 +2,7 @@ body,
html {
margin: 0;
padding: 0;
- height: 100%
+ height: 100%;
}
.backgroundContainer {
@@ -11,52 +11,58 @@ html {
left: 0;
right: 0;
bottom: 0;
- contain: strict
+ contain: strict;
}
html {
- line-height: 1.35
+ line-height: 1.35;
}
.layout-mobile,
.layout-tv {
- user-select: none
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
body {
overflow-x: hidden;
background-color: transparent !important;
+ -webkit-font-smoothing: antialiased;
}
.mainAnimatedPage {
- contain: style size !important
+ contain: style size !important;
}
.pageContainer {
- overflow-x: visible !important
+ overflow-x: visible !important;
}
.bodyWithPopupOpen {
- overflow-y: hidden !important
+ overflow-y: hidden !important;
}
div[data-role=page] {
- outline: 0
+ outline: 0;
}
.pageTitle {
margin-top: 0;
- font-family: inherit
+ font-family: inherit;
}
.fieldDescription {
- padding-left: .15em;
+ padding-left: 0.15em;
font-weight: 400;
- white-space: normal !important
+ white-space: normal !important;
}
-.fieldDescription+.fieldDescription {
- margin-top: .3em
+.fieldDescription + .fieldDescription {
+ margin-top: 0.3em;
}
.content-primary,
@@ -67,21 +73,21 @@ div[data-role=page] {
padding-bottom: 5em !important;
}
-@media all and (min-width:50em) {
+@media all and (min-width: 50em) {
.readOnlyContent,
form {
- max-width: 54em
+ max-width: 54em;
}
}
.headerHelpButton {
margin-left: 1.25em !important;
- padding-bottom: .4em !important;
- padding-top: .4em !important
+ padding-bottom: 0.4em !important;
+ padding-top: 0.4em !important;
}
.mediaInfoContent {
margin-left: auto;
margin-right: auto;
- width: 85%
+ width: 85%;
}
diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css
index f20abf9d07..f4f198325b 100644
--- a/src/assets/css/videoosd.css
+++ b/src/assets/css/videoosd.css
@@ -1,6 +1,9 @@
.chapterThumbTextContainer,
.videoOsdBottom {
user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
}
.osdPoster img,
@@ -8,52 +11,59 @@
.videoOsdBottom {
bottom: 0;
left: 0;
- right: 0
+ right: 0;
}
.osdHeader {
- transition: opacity .3s ease-out;
+ -webkit-transition: opacity 0.3s ease-out;
+ -o-transition: opacity 0.3s ease-out;
+ transition: opacity 0.3s ease-out;
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.7) !important;
+ -webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
color: #eee !important;
}
.osdHeader-hidden {
- opacity: 0
+ opacity: 0;
}
.osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) {
- display: none
+ display: none;
}
.chapterThumbContainer {
+ -webkit-box-shadow: 0 0 1.9vh #000;
box-shadow: 0 0 1.9vh #000;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
flex-grow: 1;
- position: relative
+ position: relative;
}
.chapterThumb {
background-position: center center;
+ -webkit-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
border: 0;
height: 20vh;
- min-width: 20vh
+ min-width: 20vh;
}
-@media all and (orientation:portrait) {
+@media all and (orientation: portrait) {
.chapterThumb {
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 {
height: 30vh;
- min-width: 30vh
+ min-width: 30vh;
}
}
@@ -62,161 +72,218 @@
bottom: 0;
left: 0;
right: 0;
- background: rgba(0, 0, 0, .7);
- padding: .25em .5em;
- user-select: none
+ background: rgba(0, 0, 0, 0.7);
+ padding: 0.25em 0.5em;
+ user-select: none;
}
.chapterThumbText {
- padding: .25em 0;
+ padding: 0.25em 0;
margin: 0;
- opacity: 1
+ opacity: 1;
}
.chapterThumbText-dim {
- opacity: .6
+ opacity: 0.6;
}
.videoOsdBottom {
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
padding: 1%;
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
flex-direction: row;
will-change: opacity;
+ -webkit-transition: opacity 0.3s ease-out;
+ -o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
color: #fff;
- user-select: none
+ user-select: none;
+ -webkit-touch-callout: none;
}
.videoOsdBottom-hidden {
- opacity: 0
+ opacity: 0;
}
.osdControls {
- flex-grow: 1
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ flex-grow: 1;
}
.videoOsdBottom .buttons {
- padding: .25em 0 0;
+ padding: 0.25em 0 0;
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-flex-wrap: wrap;
flex-wrap: wrap;
- align-items: center
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ align-items: center;
}
.osdVolumeSliderContainer {
width: 9em;
- flex-grow: 1
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ flex-grow: 1;
}
.osdMediaInfo,
.volumeButtons {
display: flex;
+ display: -webkit-box;
+ display: -webkit-flex;
align-items: center;
+ -webkit-box-align: center;
}
.volumeButtons {
- margin: 0 .5em 0 auto;
+ margin: 0 0.5em 0 auto;
display: flex;
- align-items: center
+ -webkit-align-items: center;
+ align-items: center;
}
.osdTimeText {
margin-left: 1em;
- user-select: none
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.osdPoster {
width: 10%;
position: relative;
- margin-right: .5em
+ margin-right: 0.5em;
}
.osdPoster img {
position: absolute;
height: auto;
width: 100%;
+ -webkit-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-select: none
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-drag: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
}
.osdTitle,
.osdTitleSmall {
- margin: 0 1em 0 0
+ margin: 0 1em 0 0;
}
.osdMediaInfo {
display: flex;
- align-items: center
+ -webkit-align-items: center;
+ align-items: center;
}
.osdSecondaryMediaInfo {
- padding-left: .6em !important
+ padding-left: 0.6em !important;
}
.osdTextContainer {
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
user-select: none;
- margin-bottom: .7em;
- padding-left: .5em
+ margin-bottom: 0.7em;
+ padding-left: 0.5em;
}
.osdMainTextContainer {
- align-items: baseline
+ -webkit-box-align: baseline;
+ -webkit-align-items: baseline;
+ align-items: baseline;
}
.osdMediaStatus {
margin-left: auto;
}
+@-moz-keyframes spin {
+ 100% {
+ -moz-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@-webkit-keyframes spin {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
@keyframes spin {
100% {
- transform:rotate(360deg);
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
}
}
.osdMediaStatus .animate {
- animation:spin 4s linear infinite;
+ -webkit-animation: spin 4s linear infinite;
+ -moz-animation: spin 4s linear infinite;
+ animation: spin 4s linear infinite;
}
.pageContainer {
top: 0;
- position: fixed
+ position: fixed;
}
-@media all and (max-width:30em) {
-
+@media all and (max-width: 30em) {
.btnFastForward,
.btnRewind,
.osdMediaInfo,
.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 {
- margin: 0
+ margin: 0;
}
}
-@media all and (max-width:43em) {
+@media all and (max-width: 43em) {
.videoOsdBottom .volumeButtons,
.osdMediaStatus span {
- display: none !important
- }
-}
-@media all and (max-width:50em) {
- .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
- display: none !important
+ display: none !important;
}
}
-@media all and (max-width:75em) {
- .videoOsdBottom .endsAtText {
- display: none !important
+@media all and (max-width: 50em) {
+ .videoOsdBottom .btnFastForward,
+ .videoOsdBottom .btnRewind {
+ display: none !important;
+ }
+}
+
+@media all and (max-width: 75em) {
+ .videoOsdBottom .endsAtText {
+ display: none !important;
}
}
diff --git a/src/themes/logodark.png b/src/assets/img/banner-dark.png
similarity index 100%
rename from src/themes/logodark.png
rename to src/assets/img/banner-dark.png
diff --git a/src/themes/logowhite.png b/src/assets/img/banner-light.png
similarity index 100%
rename from src/themes/logowhite.png
rename to src/assets/img/banner-light.png
diff --git a/src/assets/img/logo.png b/src/assets/img/icon-transparent.png
similarity index 100%
rename from src/assets/img/logo.png
rename to src/assets/img/icon-transparent.png
diff --git a/src/bundle.js b/src/bundle.js
index 54623fab74..28626c2a02 100644
--- a/src/bundle.js
+++ b/src/bundle.js
@@ -17,7 +17,7 @@ _define("fetch", function() {
});
// flvjs
-var flvjs = require("flv.js").default;
+var flvjs = require("flv.js/dist/flv").default;
_define("flvjs", function() {
return flvjs;
});
diff --git a/src/components/actionsheet/actionsheet.css b/src/components/actionsheet/actionsheet.css
index 8e5084038a..87d6e9466c 100644
--- a/src/components/actionsheet/actionsheet.css
+++ b/src/components/actionsheet/actionsheet.css
@@ -4,7 +4,7 @@
padding: 0;
border: none;
max-height: 84%;
- border-radius: .1em !important;
+ border-radius: 0.1em !important;
}
.actionsheet-not-fullscreen {
@@ -24,7 +24,7 @@
.actionSheetContent {
margin: 0 !important;
- padding: .4em 0 !important;
+ padding: 0.4em 0 !important;
flex-direction: column;
display: flex;
justify-content: center;
@@ -45,7 +45,7 @@
}
.actionsheetListItemBody {
- padding: .4em 1em .4em .6em !important;
+ padding: 0.4em 1em 0.4em 0.6em !important;
}
.actionSheetItemText {
@@ -59,13 +59,13 @@
}
.actionSheetItemAsideText {
- opacity: .7;
+ opacity: 0.7;
font-size: 90%;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
margin-left: 5em;
- margin-right: .5em;
+ margin-right: 0.5em;
}
.actionSheetScroller {
@@ -83,14 +83,14 @@
}
.actionsheetDivider {
- height: .07em;
- margin: .25em 0;
+ height: 0.07em;
+ margin: 0.25em 0;
flex-shrink: 0;
}
.actionSheetTitle {
- margin: .6em 0 .7em !important;
- padding: 0 .9em;
+ margin: 0.6em 0 0.7em !important;
+ padding: 0 0.9em;
flex-grow: 0;
}
@@ -100,7 +100,7 @@
}
.actionsheetMenuItemIcon {
- margin: 0 .85em 0 .45em !important;
+ margin: 0 0.85em 0 0.45em !important;
padding: 0 !important;
}
@@ -110,6 +110,6 @@
.btnCloseActionSheet {
position: fixed;
- top: .75em;
- left: .5em;
+ top: 0.75em;
+ left: 0.5em;
}
diff --git a/src/components/alphapicker/style.css b/src/components/alphapicker/style.css
index 29543421eb..c93341bc7d 100644
--- a/src/components/alphapicker/style.css
+++ b/src/components/alphapicker/style.css
@@ -35,16 +35,15 @@
font-size: inherit;
min-width: initial;
margin: 0;
- padding: .1em .4em;
+ padding: 0.1em 0.4em;
width: auto;
- border-radius: .1em;
+ border-radius: 0.1em;
font-weight: normal;
flex-shrink: 0;
flex-grow: 1;
}
@media all and (max-height: 50em) {
-
.alphaPicker-fixed {
bottom: 5em;
}
@@ -56,14 +55,12 @@
}
@media all and (max-height: 49em) {
-
.alphaPicker-vertical {
font-size: 94%;
}
}
@media all and (max-height: 44em) {
-
.alphaPicker-vertical {
font-size: 90%;
}
@@ -75,14 +72,12 @@
}
@media all and (max-height: 37em) {
-
.alphaPicker-vertical {
font-size: 82%;
}
}
@media all and (max-height: 32em) {
-
.alphaPicker-vertical {
font-size: 74%;
}
@@ -113,15 +108,14 @@
}
.alphaPicker-fixed-left {
- left: .4em;
+ left: 0.4em;
}
.alphaPicker-fixed-right {
- right: .4em;
+ right: 0.4em;
}
@media all and (min-width: 62.5em) {
-
.alphaPicker-fixed-left {
left: 1em;
}
@@ -132,7 +126,6 @@
}
@media all and (max-height: 31.25em) {
-
.alphaPicker-fixed {
display: none !important;
}
diff --git a/src/components/appfooter/appfooter.css b/src/components/appfooter/appfooter.css
index 789bc1db20..93cb3a75a5 100644
--- a/src/components/appfooter/appfooter.css
+++ b/src/components/appfooter/appfooter.css
@@ -8,6 +8,6 @@
contain: layout style;
}
- .appfooter.headroom--unpinned {
- transform: translateY(100%)!important;
- }
\ No newline at end of file
+.appfooter.headroom--unpinned {
+ transform: translateY(100%) !important;
+}
diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 5520ce2c7e..96bd28e8d1 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -1,23 +1,24 @@
+button {
+ -webkit-border-fit: border !important;
+}
+
button::-moz-focus-inner {
padding: 0;
border: 0;
}
-button {
- -webkit-border-fit: border !important;
-}
-
.card {
border: 0;
font-size: inherit !important;
font-family: inherit !important;
text-transform: none;
- background-color: transparent !important;
background: none !important;
+ background-color: transparent !important;
margin: 0;
padding: 0;
display: block;
color: inherit !important;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none !important;
cursor: pointer;
contain: layout style;
@@ -54,17 +55,27 @@ button {
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%;
contain: strict;
}
-.cardPadder-square, .cardPadder-mixedSquare, .cardPadder-overflowSquare, .overflowSquareCard-textCardPadder {
+.cardPadder-square,
+.cardPadder-mixedSquare,
+.cardPadder-overflowSquare,
+.overflowSquareCard-textCardPadder {
padding-bottom: 100%;
contain: strict;
}
-.cardPadder-portrait, .cardPadder-mixedPortrait, .cardPadder-overflowPortrait, .overflowPortraitCard-textCardPadder {
+.cardPadder-portrait,
+.cardPadder-mixedPortrait,
+.cardPadder-overflowPortrait,
+.overflowPortraitCard-textCardPadder {
padding-bottom: 150%;
contain: strict;
}
@@ -79,23 +90,26 @@ button {
margin: 0.6em;
transition: none;
border: 0 solid transparent;
+
+ /* These both are needed in case cardBox is a button */
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none !important;
contain: layout;
contain: style;
}
+.card.show-animation .cardBox {
+ will-change: transform;
+ transition: transform 200ms ease-out;
+}
+
.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:not(.visualCardBox) .cardScalable {
- border: .5em solid transparent;
-}
-
-.card.show-animation .cardBox {
- will-change: transform;
- transition: transform 200ms ease-out;
+ border: 0.5em solid transparent;
}
.card.show-animation:focus > .cardBox {
@@ -120,7 +134,7 @@ button {
.btnCardOptions {
position: absolute;
- bottom: .25em;
+ bottom: 0.25em;
right: 0;
margin: 0 !important;
z-index: 1;
@@ -131,8 +145,8 @@ button {
position: absolute;
align-items: center;
justify-content: center;
- top: .3em;
- left: .3em;
+ top: 0.3em;
+ left: 0.3em;
text-align: center;
vertical-align: middle;
width: 1.6em;
@@ -146,12 +160,14 @@ button {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
+ display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-clip: content-box !important;
color: inherit;
+
/* This is only needed for scalable cards */
height: 100%;
contain: strict;
@@ -173,12 +189,16 @@ button {
left: 0;
right: 0;
bottom: 0;
+
/* Needed in case this is a button */
display: block;
+
/* Needed in case this is a button */
margin: 0 !important;
+
/* Needed in safari */
height: 100%;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none !important;
contain: strict;
}
@@ -207,10 +227,6 @@ button {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
}
-.cardImageContainer {
- display: flex;
-}
-
.cardImage {
position: absolute;
top: 0;
@@ -226,6 +242,7 @@ button {
.cardImage-img {
max-height: 100%;
max-width: 100%;
+
/* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
min-height: 70%;
min-width: 70%;
@@ -252,17 +269,17 @@ button {
}
.cardFooter {
- padding: .3em .3em .5em .3em;
+ padding: 0.3em 0.3em 0.5em 0.3em;
position: relative;
}
.visualCardBox {
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
- border-radius: .145em;
+ border-radius: 0.145em;
}
.innerCardFooter {
- background: rgba(0,0,0,.7);
+ background: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
left: 0;
@@ -282,7 +299,7 @@ button {
}
.cardText {
- padding: .06em .5em;
+ padding: 0.06em 0.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -294,7 +311,24 @@ button {
}
.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 {
@@ -304,7 +338,7 @@ button {
}
.innerCardFooter > .cardText {
- padding: .3em .5em;
+ padding: 0.3em 0.5em;
}
.cardFooter-withlogo {
@@ -336,23 +370,6 @@ button {
text-align: center;
}
-.textActionButton {
- border: 0 !important;
- background: transparent;
- border: 0 !important;
- padding: 0 !important;
- cursor: pointer;
- outline: none !important;
- color: inherit;
- vertical-align: middle;
- font-family: inherit;
- font-size: inherit;
-}
-
-.textActionButton:hover {
- text-decoration: underline;
-}
-
.cardImageIcon {
font-size: 5em;
color: inherit;
@@ -360,12 +377,12 @@ button {
.cardImageIcon-small {
font-size: 3em;
- margin-bottom: .1em;
+ margin-bottom: 0.1em;
}
.cardIndicators {
- right: .225em;
- top: .225em;
+ right: 0.225em;
+ top: 0.225em;
position: absolute;
display: flex;
align-items: center;
@@ -382,16 +399,16 @@ button {
}
.programAttributeIndicator {
- padding: .18em .5em;
+ padding: 0.18em 0.5em;
color: #fff;
font-weight: 500;
}
.cardOverlayButton {
- color: rgba(255, 255, 255, .76);
+ color: rgba(255, 255, 255, 0.76);
margin: 0;
z-index: 1;
- padding: .75em;
+ padding: 0.75em;
font-size: 88%;
}
@@ -402,7 +419,7 @@ button {
}
.cardOverlayButtonIcon {
- background-color: rgba(0,0,0,.7) !important;
+ background-color: rgba(0, 0, 0, 0.7) !important;
border-radius: 100em;
width: 1.5em !important;
height: 1.5em !important;
@@ -424,10 +441,10 @@ button {
height: 2.6em;
top: 50%;
left: 50%;
- background-color: rgba(0,0,0,.5) !important;
- border: .06em solid rgba(255,255,255,.6);
- padding: .38em !important;
- color: rgba(255, 255, 255, .76);
+ background-color: rgba(0, 0, 0, 0.5) !important;
+ border: 0.06em solid rgba(255, 255, 255, 0.6);
+ padding: 0.38em !important;
+ color: rgba(255, 255, 255, 0.76);
transition: transform 200ms ease-out;
}
@@ -474,13 +491,15 @@ button {
width: 33.333333333333333333333333333333%;
}
- .squareCard, .portraitCard {
+ .squareCard,
+ .portraitCard {
width: 33.333333333333333333333333333333%;
}
}
@media (min-width: 43.75em) {
- .squareCard, .portraitCard {
+ .squareCard,
+ .portraitCard {
width: 25%;
}
}
@@ -496,7 +515,8 @@ button {
width: 50%;
}
- .squareCard, .portraitCard {
+ .squareCard,
+ .portraitCard {
width: 20%;
}
@@ -516,7 +536,8 @@ button {
width: 25%;
}
- .squareCard, .portraitCard {
+ .squareCard,
+ .portraitCard {
width: 16.666666666666666666666666666667%;
}
@@ -529,9 +550,9 @@ button {
}
}
-
@media (min-width: 87.5em) {
- .squareCard, .portraitCard {
+ .squareCard,
+ .portraitCard {
width: 14.285714285714285714285714285714%;
}
@@ -549,13 +570,15 @@ button {
width: 20%;
}
- .squareCard, .portraitCard {
+ .squareCard,
+ .portraitCard {
width: 12.5%;
}
}
@media (min-width: 120em) {
- .squareCard, .portraitCard {
+ .squareCard,
+ .portraitCard {
width: 11.111111111111111111111111111111%;
}
}
@@ -565,7 +588,8 @@ button {
width: 25%;
}
- .squareCard, .portraitCard {
+ .squareCard,
+ .portraitCard {
width: 10%;
}
}
@@ -596,7 +620,8 @@ button {
width: 72vw;
}
-.overflowSquareCard, .overflowPortraitCard {
+.overflowSquareCard,
+.overflowPortraitCard {
width: 40vw;
}
@@ -621,29 +646,34 @@ button {
}
@media (min-width: 43.75em) {
- .overflowSquareCard, .overflowPortraitCard {
+ .overflowSquareCard,
+ .overflowPortraitCard {
width: 23.1vw;
}
}
@media (min-width: 48.125em) {
- .overflowBackdropCard, .overflowSmallBackdropCard {
+ .overflowBackdropCard,
+ .overflowSmallBackdropCard {
width: 30vw;
}
}
@media (orientation: landscape) {
- .overflowBackdropCard, .overflowSmallBackdropCard {
+ .overflowBackdropCard,
+ .overflowSmallBackdropCard {
width: 30vw;
}
- .overflowSquareCard, .overflowPortraitCard {
+ .overflowSquareCard,
+ .overflowPortraitCard {
width: 23.1vw;
}
}
@media (orientation: landscape) and (min-width: 48.125em) {
- .overflowBackdropCard, .overflowSmallBackdropCard {
+ .overflowBackdropCard,
+ .overflowSmallBackdropCard {
width: 23.1vw;
}
}
@@ -655,55 +685,60 @@ button {
}
@media (min-width: 50em) {
- .overflowSquareCard, .overflowPortraitCard {
+ .overflowSquareCard,
+ .overflowPortraitCard {
width: 18.5vw;
}
}
@media (min-width: 75em) {
- .overflowBackdropCard, .overflowSmallBackdropCard {
+ .overflowBackdropCard,
+ .overflowSmallBackdropCard {
width: 23.1vw;
}
- .overflowSquareCard, .overflowPortraitCard {
+ .overflowSquareCard,
+ .overflowPortraitCard {
width: 15.5vw;
}
}
@media (min-width: 87.5em) {
- .overflowSquareCard, .overflowPortraitCard {
+ .overflowSquareCard,
+ .overflowPortraitCard {
width: 13.3vw;
}
}
@media (min-width: 100em) {
-
- .overflowBackdropCard, .overflowSmallBackdropCard {
+ .overflowBackdropCard,
+ .overflowSmallBackdropCard {
width: 18.7vw;
}
- .overflowSquareCard, .overflowPortraitCard {
+ .overflowSquareCard,
+ .overflowPortraitCard {
width: 11.6vw;
}
}
@media (min-width: 120em) {
-
- .overflowSquareCard, .overflowPortraitCard {
+ .overflowSquareCard,
+ .overflowPortraitCard {
width: 10.3vw;
}
}
@media (min-width: 131.25em) {
-
- .overflowSquareCard, .overflowPortraitCard {
+ .overflowSquareCard,
+ .overflowPortraitCard {
width: 9.3vw;
}
}
@media (min-width: 156.25em) {
-
- .overflowBackdropCard, .overflowSmallBackdropCard {
+ .overflowBackdropCard,
+ .overflowSmallBackdropCard {
width: 15.6vw;
}
}
@@ -720,7 +755,8 @@ button {
padding-bottom: 87.75%;
}
-.itemsContainer-tv > .overflowSquareCard, .itemsContainer-tv > .overflowPortraitCard {
+.itemsContainer-tv > .overflowSquareCard,
+.itemsContainer-tv > .overflowPortraitCard {
width: 15.6vw;
}
@@ -729,9 +765,9 @@ button {
}
.cardOverlayContainer {
- background: rgba(0,0,0,0.5);
+ background: rgba(0, 0, 0, 0.5);
opacity: 0;
- transition: opacity .2s;
+ transition: opacity 0.2s;
position: absolute;
top: 0;
left: 0;
@@ -760,7 +796,7 @@ button {
}
.cardOverlayFab-primary {
- background-color: rgba(0,0,0,0.7);
+ background-color: rgba(0, 0, 0, 0.7);
font-size: 130%;
padding: 0;
width: 3em;
diff --git a/src/components/dialogHelper/dialoghelper.css b/src/components/dialogHelper/dialoghelper.css
index aa4145e016..df2adf075f 100644
--- a/src/components/dialogHelper/dialoghelper.css
+++ b/src/components/dialogHelper/dialoghelper.css
@@ -15,10 +15,12 @@
.dialog {
margin: 0;
- border-radius: .2em;
+ border-radius: 0.2em;
+ -webkit-font-smoothing: antialiased;
border: 0;
padding: 0;
will-change: transform, opacity;
+
/* Strict does not work well with actionsheet */
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);
@@ -50,13 +52,13 @@
to {
opacity: 0;
- transform: scale(.5);
+ transform: scale(0.5);
}
}
@keyframes scaleup {
from {
- transform: scale(.5);
+ transform: scale(0.5);
opacity: 0;
}
@@ -77,7 +79,6 @@
}
@keyframes fadeout {
-
from {
opacity: 1;
}
@@ -100,7 +101,6 @@
}
@keyframes slidedown {
-
from {
opacity: 1;
transform: none;
@@ -113,8 +113,8 @@
}
@media all and (max-width: 80em), all and (max-height: 45em) {
-
- .dialog-fixedSize, .dialog-fullscreen-lowres {
+ .dialog-fixedSize,
+ .dialog-fullscreen-lowres {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
@@ -126,7 +126,6 @@
}
@media all and (min-width: 80em) and (min-height: 45em) {
-
.dialog-medium {
width: 80%;
height: 80%;
@@ -168,5 +167,5 @@
}
.dialogBackdropOpened {
- opacity: .5;
+ opacity: 0.5;
}
diff --git a/src/components/directorybrowser/directorybrowser.css b/src/components/directorybrowser/directorybrowser.css
index 0f3f22f073..ef6d58934f 100644
--- a/src/components/directorybrowser/directorybrowser.css
+++ b/src/components/directorybrowser/directorybrowser.css
@@ -1,8 +1,8 @@
#ulDirectoryPickerList a {
- padding-top: .4em;
- padding-bottom: .4em
+ padding-top: 0.4em;
+ padding-bottom: 0.4em;
}
.lblDirectoryPickerPath {
- white-space: nowrap
-}
\ No newline at end of file
+ white-space: nowrap;
+}
diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.css b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
index 6786824bd6..32e60292ad 100644
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css
+++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
@@ -4,11 +4,11 @@
right: 0;
align-items: center;
justify-content: center;
- min-width:104px;
- min-height:24px;
+ min-width: 104px;
+ min-height: 24px;
padding-top: 1.25em;
z-index: 1;
- color: #ffffff;
+ color: #fff;
display: flex;
}
diff --git a/src/components/emby-scroller/emby-scroller.js b/src/components/emby-scroller/emby-scroller.js
index 0b36483be3..f943047f52 100644
--- a/src/components/emby-scroller/emby-scroller.js
+++ b/src/components/emby-scroller/emby-scroller.js
@@ -155,7 +155,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
initCenterFocus(this, this.scroller);
}
- if (bindHeader) {
+ if (bindHeader && layoutManager.mobile) {
initHeadroom(this);
}
diff --git a/src/components/filterdialog/style.css b/src/components/filterdialog/style.css
index 989b7c1245..f05ef2e4a8 100644
--- a/src/components/filterdialog/style.css
+++ b/src/components/filterdialog/style.css
@@ -5,31 +5,32 @@
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
+ -webkit-border-radius: 0 !important;
border-radius: 0 !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 {
top: 10% !important;
- bottom: 25% !important
+ bottom: 25% !important;
}
}
-@media all and (max-width:400px) {
+@media all and (max-width: 400px) {
.dynamicFilterDialog {
width: auto;
left: 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 {
width: 20.16em;
margin-left: -10.08em !important;
- left: 50% !important
+ left: 50% !important;
}
}
diff --git a/src/components/formdialog.css b/src/components/formdialog.css
index b976d8130e..788331da94 100644
--- a/src/components/formdialog.css
+++ b/src/components/formdialog.css
@@ -5,14 +5,15 @@
}
.formDialogHeader {
- padding: 1em .5em;
+ padding: 1em 0.5em;
display: flex;
align-items: center;
flex-shrink: 0;
}
.formDialogHeaderTitle {
- margin-left: .25em;
+ margin-left: 0.25em;
+
/* In case of h1, h2, h3 */
margin-top: 0;
margin-bottom: 0;
@@ -23,7 +24,7 @@
}
.dialogContentInner {
- padding: .5em 1em 20em 1em;
+ padding: 0.5em 1em 20em 1em;
}
.dialogContentInner-mini {
@@ -46,6 +47,7 @@
display: flex;
position: absolute;
padding: 1.25em 1em;
+
/* Without this emby-checkbox is able to appear on top */
z-index: 1;
align-items: center;
@@ -62,11 +64,11 @@
padding-bottom: 1.5em;
flex-direction: column;
width: 80% !important;
- padding-top: .5em;
+ padding-top: 0.5em;
}
.formDialogFooterItem {
- margin: .5em !important;
+ margin: 0.5em !important;
flex-grow: 1;
text-align: center;
flex-basis: 0;
@@ -91,7 +93,6 @@
}
@media all and (min-width: 50em) {
-
.formDialogFooterItem {
max-width: 80%;
}
@@ -103,7 +104,6 @@
}
@media all and (min-width: 80em) {
-
.formDialogFooterItem {
max-width: 70%;
}
diff --git a/src/components/guide/guide.css b/src/components/guide/guide.css
index 7dd0594149..3b776e6dde 100644
--- a/src/components/guide/guide.css
+++ b/src/components/guide/guide.css
@@ -14,12 +14,12 @@
}
.layout-desktop .tvGuideHeader {
- margin-bottom: .5em;
+ margin-bottom: 0.5em;
}
.guideHeaderDateSelection {
font-size: 86%;
- padding: .4em 0;
+ padding: 0.4em 0;
}
.guide-headerTimeslots {
@@ -39,10 +39,10 @@
.guideProgramIndicator {
text-transform: uppercase;
- border-radius: .25em;
- margin-right: .5em;
+ border-radius: 0.25em;
+ margin-right: 0.5em;
font-size: 82%;
- padding: .2em .25em;
+ padding: 0.2em 0.25em;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -51,6 +51,8 @@
}
.guide-channelTimeslotHeader {
+ border: 0 !important;
+ border-right-color: transparent;
flex-shrink: 0;
justify-content: center;
}
@@ -69,9 +71,14 @@
}
.channelPrograms {
+ height: 4.42em;
+ contain: strict;
+ display: flex;
+ flex-direction: column;
+ border-style: solid;
+ border-width: 1px 0 1px 0;
white-space: nowrap;
position: relative;
- contain: strict;
box-sizing: border-box;
}
@@ -80,31 +87,32 @@
}
.guideSpacer {
- width: .3em;
+ width: 0.3em;
flex-shrink: 0;
}
-.channelPrograms, .timeslotHeadersInner {
+.channelPrograms,
+.timeslotHeadersInner {
width: 1800vw;
}
@media all and (min-width: 37.5em) {
-
- .channelPrograms, .timeslotHeadersInner {
+ .channelPrograms,
+ .timeslotHeadersInner {
width: 1400vw;
}
}
@media all and (min-width: 50em) {
-
- .channelPrograms, .timeslotHeadersInner {
+ .channelPrograms,
+ .timeslotHeadersInner {
width: 1200vw;
}
}
@media all and (min-width: 80em) {
-
- .channelPrograms, .timeslotHeadersInner {
+ .channelPrograms,
+ .timeslotHeadersInner {
width: 810vw;
}
}
@@ -112,11 +120,17 @@
.timeslotHeader {
display: inline-flex;
align-items: center;
- text-indent: .25em;
+ text-indent: 0.25em;
width: 2.0833333333333333333333333333333%;
}
-.guide-channelHeaderCell, .guide-channelTimeslotHeader {
+.programCell,
+.guide-channelHeaderCell {
+ outline: none !important;
+}
+
+.guide-channelHeaderCell,
+.guide-channelTimeslotHeader {
padding: 0 !important;
cursor: pointer;
outline: none !important;
@@ -130,11 +144,12 @@
display: flex;
align-items: center;
text-decoration: none;
+
/* Needed in firefox */
text-align: left;
contain: strict;
flex-shrink: 0;
- border-radius: .12em;
+ border-radius: 0.12em;
color: inherit;
}
@@ -148,37 +163,38 @@
background: transparent;
}
-.guide-channelTimeslotHeader {
- border: 0 !important;
-}
-
/* 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.
*/
-.channelsContainer, .guide-channelTimeslotHeader {
+.channelsContainer,
+.guide-channelTimeslotHeader {
width: 24vw;
}
-@media all and (min-width:31.25em) {
- .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 31.25em) {
+ .channelsContainer,
+ .guide-channelTimeslotHeader {
width: 16vw;
}
}
-@media all and (min-width:37.5em) {
- .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 37.5em) {
+ .channelsContainer,
+ .guide-channelTimeslotHeader {
width: 16vw;
}
}
-@media all and (min-width:50em) {
- .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 50em) {
+ .channelsContainer,
+ .guide-channelTimeslotHeader {
width: 14vw;
}
}
-@media all and (min-width:80em) {
- .channelsContainer, .guide-channelTimeslotHeader {
+@media all and (min-width: 80em) {
+ .channelsContainer,
+ .guide-channelTimeslotHeader {
width: 12vw;
}
}
@@ -197,34 +213,26 @@
}
@media all and (max-width: 50em) {
-
- .newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon {
+ .newTvProgram,
+ .liveTvProgram,
+ .premiereTvProgram,
+ .guideHdIcon {
display: none;
}
}
-.channelPrograms {
- height: 4.42em;
- contain: strict;
- display: flex;
- flex-direction: column;
- border-style: solid;
- border-width: 1px 0 1px 0;
+.channelPrograms + .channelPrograms,
+.guide-channelHeaderCell + .guide-channelHeaderCell {
+ margin-top: -1px;
}
- .channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell {
- margin-top: -1px;
- }
-
-.channelPrograms-tv, .guide-channelHeaderCell-tv {
+.channelPrograms-tv,
+.guide-channelHeaderCell-tv {
height: 3em;
}
-.guide-channelTimeslotHeader {
- border-right-color: transparent;
-}
-
-.guide-channelTimeslotHeader, .timeslotHeader {
+.guide-channelTimeslotHeader,
+.timeslotHeader {
background: transparent !important;
height: 2.8em;
}
@@ -253,6 +261,7 @@
text-decoration: none;
overflow: hidden;
align-items: center;
+
/* Needed for Firefox */
text-align: left;
contain: strict;
@@ -261,7 +270,7 @@
}
.guideProgramName {
- padding: 0 .7em 0;
+ padding: 0 0.7em 0;
overflow: hidden;
text-overflow: ellipsis;
align-items: center;
@@ -269,7 +278,8 @@
position: relative;
flex-grow: 1;
contain: layout style paint;
- /*transition: transform 60ms ease-out;*/
+
+ /* transition: transform 60ms ease-out; */
}
.guide-programNameCaret {
@@ -289,11 +299,11 @@
.guideProgramSecondaryInfo {
display: flex;
align-items: center;
- margin-top: .1em;
+ margin-top: 0.1em;
}
.programIcon {
- margin-left: .5em;
+ margin-left: 0.5em;
height: 1em;
width: 1em;
font-size: 1.6em;
@@ -304,16 +314,16 @@
.guide-programTextIcon {
font-weight: bold;
- font-size: .9em;
- padding: .16em .3em;
- border-radius: .25em;
- margin-right: .35em;
+ font-size: 0.9em;
+ padding: 0.16em 0.3em;
+ border-radius: 0.25em;
+ margin-right: 0.35em;
width: auto;
height: auto;
}
.guide-programTextIcon-tv {
- font-size: .74em;
+ font-size: 0.74em;
}
.guideChannelNumber {
@@ -345,14 +355,12 @@
}
@media all and (min-width: 62.5em) {
-
.guideChannelName {
max-width: 40%;
}
}
@media all and (max-width: 62.5em) {
-
.guideChannelNumber {
display: none;
}
@@ -368,21 +376,19 @@
flex-direction: column;
}
-.channelsContainer, .programGrid {
+.channelsContainer,
+.programGrid {
contain: layout style paint;
}
-.programCell, .guide-channelHeaderCell {
- outline: none !important;
-}
-
-.timerIcon, .seriesTimerIcon {
- color: #cc3333 !important;
+.timerIcon,
+.seriesTimerIcon {
+ color: #c33 !important;
}
.seriesTimerIcon-inactive {
color: inherit !important;
- opacity: .7;
+ opacity: 0.7;
}
.guideOptions {
@@ -392,7 +398,6 @@
}
@media all and (max-width: 50em), all and (max-height: 37.5em) {
-
.tvGuideHeader {
padding-left: 0;
}
@@ -415,16 +420,16 @@
}
.guide-date-tab-button {
- padding: .3em .7em !important;
- margin: 0 .3em !important;
+ padding: 0.3em 0.7em !important;
+ margin: 0 0.3em !important;
font-weight: normal;
}
- .guide-date-tab-button.emby-tab-button-active {
- border-color: transparent !important;
- }
+.guide-date-tab-button.emby-tab-button-active {
+ border-color: transparent !important;
+}
- .guide-date-tab-button.show-focus:focus {
- border-radius: .15em !important;
- transform: none !important;
- }
+.guide-date-tab-button.show-focus:focus {
+ border-radius: 0.15em !important;
+ transform: none !important;
+}
diff --git a/src/components/guide/programs.css b/src/components/guide/programs.css
index 7a559e173f..34976e81ec 100644
--- a/src/components/guide/programs.css
+++ b/src/components/guide/programs.css
@@ -1,15 +1,15 @@
.newTvProgram {
- background: #3388cc;
+ background: #38c;
color: #fff;
}
.liveTvProgram {
- background: #cc3333;
+ background: #c33;
color: #fff;
}
.premiereTvProgram {
- background: #EF6C00;
+ background: #ef6c00;
color: #fff;
}
diff --git a/src/components/headroom/headroom.css b/src/components/headroom/headroom.css
index caac40a1b6..df985892ff 100644
--- a/src/components/headroom/headroom.css
+++ b/src/components/headroom/headroom.css
@@ -8,4 +8,4 @@
.headroom--unpinned:not(.headroomDisabled) {
transform: translateY(-100%);
-}
\ No newline at end of file
+}
diff --git a/src/components/homesections/homesections.css b/src/components/homesections/homesections.css
index 5df2440f82..2a119c0981 100644
--- a/src/components/homesections/homesections.css
+++ b/src/components/homesections/homesections.css
@@ -1,23 +1,24 @@
.homeLibraryButton {
min-width: 18%;
- margin: .5em !important;
+ margin: 0.5em !important;
}
@media all and (max-width: 50em) {
-
.homeLibraryButton {
width: 46% !important;
}
}
.homeLibraryIcon {
- margin-left: .5em;
- margin-right: .5em;
- flex-shrink: 0
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ -webkit-flex-shrink: 0;
+ flex-shrink: 0;
}
.homeLibraryText {
white-space: nowrap;
+ -o-text-overflow: ellipsis;
text-overflow: ellipsis;
- overflow: hidden
+ overflow: hidden;
}
diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js
index f47b96ba6e..d2f9632adb 100644
--- a/src/components/htmlvideoplayer/plugin.js
+++ b/src/components/htmlvideoplayer/plugin.js
@@ -1054,7 +1054,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
var options = {
video: videoElement,
subUrl: getTextTrackUrl(track, item),
- fonts: attachments.map(i => i.DeliveryUrl),
+ fonts: attachments.map(function (i) {
+ return i.DeliveryUrl;
+ }),
workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js",
onError: function() {
htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror')
diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css
index e1875ff332..5ecf4af66a 100644
--- a/src/components/htmlvideoplayer/style.css
+++ b/src/components/htmlvideoplayer/style.css
@@ -42,6 +42,7 @@ video::-webkit-media-controls {
.htmlvideoplayer::cue {
background-color: transparent;
text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
+ -webkit-font-smoothing: antialiased;
font-family: inherit;
}
@@ -71,7 +72,7 @@ video::-webkit-media-controls {
@keyframes htmlvideoplayer-zoomin {
from {
transform: scale3d(0.2, 0.2, 0.2);
- opacity: .6;
+ opacity: 0.6;
}
to {
diff --git a/src/components/imageeditor/imageeditor.css b/src/components/imageeditor/imageeditor.css
index d45400cac9..5587e7d8d1 100644
--- a/src/components/imageeditor/imageeditor.css
+++ b/src/components/imageeditor/imageeditor.css
@@ -6,4 +6,4 @@
.first-imageEditor-buttons {
margin-top: 2em;
-}
\ No newline at end of file
+}
diff --git a/src/components/images/style.css b/src/components/images/style.css
index 06fbf1f9cf..2836dd0159 100644
--- a/src/components/images/style.css
+++ b/src/components/images/style.css
@@ -1,5 +1,22 @@
.lazy-image-fadein {
+ opacity: 0;
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 {
@@ -16,14 +33,6 @@
}
}
-.lazy-image-fadein {
- opacity: 0;
- animation-duration: .8s;
- animation-name: popInAnimation;
- animation-fill-mode: forwards;
- animation-timing-function: cubic-bezier(0,0,.5,1);
-}
-
@keyframes popInAnimation {
0% {
opacity: 0;
@@ -32,4 +41,4 @@
100% {
opacity: 1;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/imageuploader/style.css b/src/components/imageuploader/style.css
index bd86d8bff3..dc4fecb108 100644
--- a/src/components/imageuploader/style.css
+++ b/src/components/imageuploader/style.css
@@ -1,6 +1,7 @@
.imageEditor-dropZone {
- border: .2em dashed currentcolor;
- border-radius: .25em;
+ border: 0.2em dashed currentcolor;
+ border-radius: 0.25em;
+
/* padding: 1.6em; */
text-align: center;
position: relative;
@@ -8,4 +9,4 @@
display: flex;
align-items: center;
justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/src/components/indicators/indicators.css b/src/components/indicators/indicators.css
index b0d0119c05..e4e7985817 100644
--- a/src/components/indicators/indicators.css
+++ b/src/components/indicators/indicators.css
@@ -1,8 +1,8 @@
.itemProgressBar {
background: #333;
- background: rgba(51,51,51,.8);
+ background: rgba(51, 51, 51, 0.8);
position: relative;
- height: .28em;
+ height: 0.28em;
}
.itemProgressBarForeground {
@@ -14,6 +14,7 @@
.indicator {
border-radius: 100em;
+ display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@@ -23,7 +24,7 @@
}
.timerIndicator {
- color: #CB272A;
+ color: #cb272a;
}
.timerIndicator-inactive {
@@ -31,7 +32,7 @@
}
.indicator + .indicator {
- margin-left: .25em;
+ margin-left: 0.25em;
}
.indicatorIcon {
@@ -42,6 +43,7 @@
.countIndicator {
border-radius: 100em;
+ display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@@ -53,6 +55,7 @@
.playedIndicator {
border-radius: 100em;
+ display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@@ -64,6 +67,7 @@
.videoIndicator {
background: #444;
border-radius: 100em;
+ display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
@@ -81,12 +85,13 @@
color: #333;
}
-.missingIndicator, .unairedIndicator {
- background: #cc3333;
- padding: .25em .5em;
+.missingIndicator,
+.unairedIndicator {
+ background: #c33;
+ padding: 0.25em 0.5em;
border-radius: 100em;
color: #fff;
font-size: 84%;
font-weight: 500;
- margin: 0 .25em;
-}
\ No newline at end of file
+ margin: 0 0.25em;
+}
diff --git a/src/components/keyboardnavigation.js b/src/components/keyboardnavigation.js
index 8c0bb1a3ae..d1ed03138c 100644
--- a/src/components/keyboardnavigation.js
+++ b/src/components/keyboardnavigation.js
@@ -1,36 +1,133 @@
-define(['inputManager', 'focusManager'], function(inputManager, focusManager) {
- 'use strict';
+define(["inputManager", "layoutManager"], function (inputManager, layoutManager) {
+ "use strict";
console.log("keyboardnavigation");
+ /**
+ * Key name mapping.
+ */
+ // Add more to support old browsers
+ var KeyNames = {
+ 13: "Enter",
+ 19: "Pause",
+ 27: "Escape",
+ 32: "Space",
+ 37: "ArrowLeft",
+ 38: "ArrowUp",
+ 39: "ArrowRight",
+ 40: "ArrowDown",
+ // MediaRewind (Tizen/WebOS)
+ 412: "MediaRewind",
+ // MediaStop (Tizen/WebOS)
+ 413: "MediaStop",
+ // MediaPlay (Tizen/WebOS)
+ 415: "MediaPlay",
+ // MediaFastForward (Tizen/WebOS)
+ 417: "MediaFastForward",
+ // Back (WebOS)
+ 461: "Back",
+ // Back (Tizen)
+ 10009: "Back",
+ // MediaTrackPrevious (Tizen)
+ 10232: "MediaTrackPrevious",
+ // MediaTrackNext (Tizen)
+ 10233: "MediaTrackNext",
+ // MediaPlayPause (Tizen)
+ 10252: "MediaPlayPause"
+ };
+
+ var hasFieldKey = false;
+ try {
+ hasFieldKey = "key" in new KeyboardEvent("keydown");
+ } catch (e) {
+ console.log("error checking 'key' field");
+ }
+
+ if (!hasFieldKey) {
+ // Add [a..z]
+ for (var i = 65; i <= 90; i++) {
+ KeyNames[i] = String.fromCharCode(i).toLowerCase();
+ }
+ }
+
+ /**
+ * Returns key name from event.
+ *
+ * @param {KeyboardEvent} keyboard event
+ * @return {string} key name
+ */
+ function getKeyName(event) {
+ return KeyNames[event.keyCode] || event.key;
+ }
+
function enable() {
- document.addEventListener('keydown', function(e) {
+ document.addEventListener("keydown", function (e) {
var capture = true;
- switch (e.keyCode) {
- case 37: // ArrowLeft
- inputManager.handle('left');
+ switch (getKeyName(e)) {
+ case "ArrowLeft":
+ inputManager.handle("left");
break;
- case 38: // ArrowUp
- inputManager.handle('up');
+ case "ArrowUp":
+ inputManager.handle("up");
break;
- case 39: // ArrowRight
- inputManager.handle('right');
+ case "ArrowRight":
+ inputManager.handle("right");
break;
- case 40: // ArrowDown
- inputManager.handle('down');
+ case "ArrowDown":
+ inputManager.handle("down");
break;
+
+ case "Back":
+ inputManager.handle("back");
+ break;
+
+ case "Escape":
+ if (layoutManager.tv) {
+ inputManager.handle("back");
+ } else {
+ capture = false;
+ }
+ break;
+
+ case "MediaPlay":
+ inputManager.handle("play");
+ break;
+ case "Pause":
+ inputManager.handle("pause");
+ break;
+ case "MediaPlayPause":
+ inputManager.handle("playpause");
+ break;
+ case "MediaRewind":
+ inputManager.handle("rewind");
+ break;
+ case "MediaFastForward":
+ inputManager.handle("fastforward");
+ break;
+ case "MediaStop":
+ inputManager.handle("stop");
+ break;
+ case "MediaTrackPrevious":
+ inputManager.handle("previoustrack");
+ break;
+ case "MediaTrackNext":
+ inputManager.handle("nexttrack");
+ break;
+
default:
capture = false;
}
+
if (capture) {
console.log("Disabling default event handling");
e.preventDefault();
}
});
-
}
+
return {
- enable: enable
+ enable: enable,
+ getKeyName: getKeyName
};
});
diff --git a/src/components/lazyloader/lazyedgehack.css b/src/components/lazyloader/lazyedgehack.css
index e0fea48c40..e358872f16 100644
--- a/src/components/lazyloader/lazyedgehack.css
+++ b/src/components/lazyloader/lazyedgehack.css
@@ -1,5 +1,5 @@
.lazy {
/* In edge, intersection observer will not fire on 0px sized elements */
- min-width: .1em;
- min-height: .1em;
+ min-width: 0.1em;
+ min-height: 0.1em;
}
diff --git a/src/components/listview/listview.css b/src/components/listview/listview.css
index bdd9cd8acf..1a37e45561 100644
--- a/src/components/listview/listview.css
+++ b/src/components/listview/listview.css
@@ -10,7 +10,7 @@
display: block;
align-items: center;
text-align: left;
- padding: .25em .25em .25em .5em;
+ padding: 0.25em 0.25em 0.25em 0.5em;
cursor: pointer;
overflow: hidden;
}
@@ -50,14 +50,18 @@
}
.listItem-border.show-focus:focus {
- transform: scale(1.0) !important;
+ transform: scale(1) !important;
}
-.listItemImage, .listItemIcon, .listItemAside {
+.listItemImage,
+.listItemIcon,
+.listItemAside {
flex-shrink: 0;
}
-.listItemBody, .listItemImage, .listItemIcon {
+.listItemBody,
+.listItemImage,
+.listItemIcon {
display: inline-block;
vertical-align: middle;
}
@@ -71,13 +75,13 @@
}
.listViewDragHandle {
- margin-left: -.25em !important;
+ margin-left: -0.25em !important;
touch-action: none;
}
.listItemBody {
flex-grow: 1;
- padding: .85em .75em;
+ padding: 0.85em 0.75em;
overflow: hidden;
text-overflow: ellipsis;
flex-direction: column;
@@ -85,8 +89,15 @@
justify-content: center;
}
+.listItem,
+.listItemBody,
+.listItemMediaInfo {
+ display: flex;
+ contain: layout style;
+}
+
.layout-tv .listItemBody {
- padding: .35em .75em;
+ padding: 0.35em 0.75em;
}
.listItemBody-noleftpadding {
@@ -95,7 +106,7 @@
.listItemBodyText {
margin: 0;
- padding: .1em 0;
+ padding: 0.1em 0;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -121,7 +132,7 @@
width: 19.5vw;
height: 13vw;
background-position: center center;
- margin-right: .75em;
+ margin-right: 0.75em;
}
.listItemImageButton {
@@ -161,13 +172,13 @@
}
.listItemBody {
- padding-left: .75em;
+ padding-left: 0.75em;
}
}
@media all and (max-width: 50em) {
.listItemBody {
- padding-right: .5em;
+ padding-right: 0.5em;
}
}
@@ -180,15 +191,15 @@
width: 1em !important;
height: 1em !important;
font-size: 143%;
- padding: 0 .25em 0 0;
+ padding: 0 0.25em 0 0;
}
.listItemIcon:not(.listItemIcon-transparent) {
background-color: #00a4dc;
color: #fff;
- padding: .5em;
+ padding: 0.5em;
border-radius: 100em;
- margin: 0 .2em 0 .4em;
+ margin: 0 0.2em 0 0.4em;
}
.listItemProgressBar {
@@ -199,7 +210,7 @@
}
.listItem:focus {
- border-radius: .2em;
+ border-radius: 0.2em;
}
.listItem:focus .secondary {
@@ -207,7 +218,7 @@
}
.listItem-focusscale {
- transition: transform .2s ease-out;
+ transition: transform 0.2s ease-out;
}
.listItem-focusscale:focus {
@@ -215,7 +226,7 @@
}
.paperList {
- margin: .5em auto;
+ margin: 0.5em auto;
}
.paperList-clear {
@@ -234,26 +245,23 @@
}
.listItemIndicators {
- right: .324em;
- top: .324em;
+ right: 0.324em;
+ top: 0.324em;
position: absolute;
display: flex;
align-items: center;
}
-.listItem, .listItemBody, .listItemMediaInfo {
- display: flex;
- contain: layout style;
-}
-
.listItem-bottomoverview {
font-size: 88%;
margin-bottom: 1em;
- margin-top: .2em;
+ margin-top: 0.2em;
}
@media all and (max-width: 50em) {
- .listItem .endsAt, .listItem .criticRating, .listItem-overview {
+ .listItem .endsAt,
+ .listItem .criticRating,
+ .listItem-overview {
display: none !important;
}
}
diff --git a/src/components/loading/loading.css b/src/components/loading/loading.css
index e3f10c0e2e..dae33aa9b8 100644
--- a/src/components/loading/loading.css
+++ b/src/components/loading/loading.css
@@ -7,11 +7,20 @@
.mdlSpinnerActive {
display: inline-block;
+ -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
}
+@-webkit-keyframes mdl-spinner__container-rotate {
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
@keyframes mdl-spinner__container-rotate {
to {
+ -webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@@ -24,67 +33,121 @@
}
.mdl-spinner__layer-1 {
- border-color: rgb(66,165,245);
+ border-color: rgb(66, 165, 245);
}
.mdl-spinner__layer-1-active {
+ -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__layer-2 {
- border-color: rgb(244,67,54);
+ border-color: rgb(244, 67, 54);
}
.mdl-spinner__layer-2-active {
+ -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__layer-3 {
- border-color: rgb(253,216,53);
+ border-color: rgb(253, 216, 53);
}
.mdl-spinner__layer-3-active {
+ -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__layer-4 {
- border-color: rgb(76,175,80);
+ border-color: rgb(76, 175, 80);
}
.mdl-spinner__layer-4-active {
+ -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
-@keyframes mdl-spinner__fill-unfill-rotate {
+@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
12.5% {
+ -webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25% {
+ -webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5% {
+ -webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50% {
+ -webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5% {
+ -webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75% {
+ -webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5% {
+ -webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
to {
+ -webkit-transform: rotate(1080deg);
+ transform: rotate(1080deg);
+ }
+}
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+ 12.5% {
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg);
+ }
+
+ 25% {
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ }
+
+ 37.5% {
+ -webkit-transform: rotate(405deg);
+ transform: rotate(405deg);
+ }
+
+ 50% {
+ -webkit-transform: rotate(540deg);
+ transform: rotate(540deg);
+ }
+
+ 62.5% {
+ -webkit-transform: rotate(675deg);
+ transform: rotate(675deg);
+ }
+
+ 75% {
+ -webkit-transform: rotate(810deg);
+ transform: rotate(810deg);
+ }
+
+ 87.5% {
+ -webkit-transform: rotate(945deg);
+ transform: rotate(945deg);
+ }
+
+ to {
+ -webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
}
@@ -98,6 +161,32 @@
* - https://github.com/Polymer/paper-spinner/issues/9
* - https://code.google.com/p/chromium/issues/detail?id=436255
*/
+@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
+ from {
+ opacity: 0.99;
+ }
+
+ 25% {
+ opacity: 0.99;
+ }
+
+ 26% {
+ opacity: 0;
+ }
+
+ 89% {
+ opacity: 0;
+ }
+
+ 90% {
+ opacity: 0.99;
+ }
+
+ 100% {
+ opacity: 0.99;
+ }
+}
+
@keyframes mdl-spinner__layer-1-fade-in-out {
from {
opacity: 0.99;
@@ -124,6 +213,28 @@
}
}
+@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
+ from {
+ opacity: 0;
+ }
+
+ 15% {
+ opacity: 0;
+ }
+
+ 25% {
+ opacity: 0.99;
+ }
+
+ 50% {
+ opacity: 0.99;
+ }
+
+ 51% {
+ opacity: 0;
+ }
+}
+
@keyframes mdl-spinner__layer-2-fade-in-out {
from {
opacity: 0;
@@ -146,6 +257,28 @@
}
}
+@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
+ from {
+ opacity: 0;
+ }
+
+ 40% {
+ opacity: 0;
+ }
+
+ 50% {
+ opacity: 0.99;
+ }
+
+ 75% {
+ opacity: 0.99;
+ }
+
+ 76% {
+ opacity: 0;
+ }
+}
+
@keyframes mdl-spinner__layer-3-fade-in-out {
from {
opacity: 0;
@@ -168,6 +301,28 @@
}
}
+@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
+ from {
+ opacity: 0;
+ }
+
+ 65% {
+ opacity: 0;
+ }
+
+ 75% {
+ opacity: 0.99;
+ }
+
+ 90% {
+ opacity: 0.99;
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
@keyframes mdl-spinner__layer-4-fade-in-out {
from {
opacity: 0;
@@ -190,6 +345,23 @@
}
}
+.mdl-spinner__circle {
+ box-sizing: border-box;
+ height: 100%;
+ border-width: 0.21em;
+ border-style: solid;
+ border-color: inherit;
+ border-bottom-color: transparent !important;
+ border-radius: 50%;
+ -webkit-animation: none;
+ animation: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
.mdl-spinner__circle-clipper {
display: inline-block;
position: relative;
@@ -199,69 +371,97 @@
border-color: inherit;
}
- .mdl-spinner__circle-clipper .mdl-spinner__circle {
- width: 200%;
- }
-
-.mdl-spinner__circle {
- box-sizing: border-box;
- height: 100%;
- border-width: .21em;
- border-style: solid;
- border-color: inherit;
- border-bottom-color: transparent !important;
- border-radius: 50%;
- animation: none;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
+.mdl-spinner__circle-clipper .mdl-spinner__circle {
+ width: 200%;
}
.mdl-spinner__circleLeft {
border-right-color: transparent !important;
+ -webkit-transform: rotate(129deg);
transform: rotate(129deg);
}
.mdl-spinner__circleLeft-active {
+ -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.mdl-spinner__circleRight {
left: -100%;
border-left-color: transparent !important;
+ -webkit-transform: rotate(-129deg);
transform: rotate(-129deg);
}
.mdl-spinner__circleRight-active {
+ -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
-@keyframes mdl-spinner__left-spin {
+@-webkit-keyframes mdl-spinner__left-spin {
from {
+ -webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
50% {
+ -webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
to {
+ -webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
}
+@keyframes mdl-spinner__left-spin {
+ from {
+ -webkit-transform: rotate(130deg);
+ transform: rotate(130deg);
+ }
+
+ 50% {
+ -webkit-transform: rotate(-5deg);
+ transform: rotate(-5deg);
+ }
+
+ to {
+ -webkit-transform: rotate(130deg);
+ transform: rotate(130deg);
+ }
+}
+
+@-webkit-keyframes mdl-spinner__right-spin {
+ from {
+ -webkit-transform: rotate(-130deg);
+ transform: rotate(-130deg);
+ }
+
+ 50% {
+ -webkit-transform: rotate(5deg);
+ transform: rotate(5deg);
+ }
+
+ to {
+ -webkit-transform: rotate(-130deg);
+ transform: rotate(-130deg);
+ }
+}
+
@keyframes mdl-spinner__right-spin {
from {
+ -webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
50% {
+ -webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
to {
+ -webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
}
diff --git a/src/components/logoscreensaver/plugin.js b/src/components/logoscreensaver/plugin.js
index 521afd2690..0eb5e85d31 100644
--- a/src/components/logoscreensaver/plugin.js
+++ b/src/components/logoscreensaver/plugin.js
@@ -160,7 +160,7 @@ define(["pluginManager"], function (pluginManager) {
elem.classList.add("logoScreenSaver");
document.body.appendChild(elem);
- elem.innerHTML = '';
+ elem.innerHTML = '
';
}
stopInterval();
diff --git a/src/components/mediainfo/mediainfo.css b/src/components/mediainfo/mediainfo.css
index 2203ba6676..b957c3a5b2 100644
--- a/src/components/mediainfo/mediainfo.css
+++ b/src/components/mediainfo/mediainfo.css
@@ -4,13 +4,13 @@
}
.mediaInfoText {
- padding: .22em .5em;
- border-radius: .25em;
+ padding: 0.22em 0.5em;
+ border-radius: 0.25em;
font-size: 92%;
display: flex;
align-items: center;
white-space: nowrap;
- margin: 0 .5em 0 0;
+ margin: 0 0.5em 0 0;
}
.mediaInfoText-upper {
@@ -21,7 +21,7 @@
width: auto;
height: auto;
font-size: 1.6em;
- margin-right: .6em;
+ margin-right: 0.6em;
}
.mediaInfoItem:last-child {
@@ -63,8 +63,8 @@
.mediaInfoProgramAttribute {
text-transform: uppercase;
- padding: .16em .6em;
- border-radius: .15em;
+ padding: 0.16em 0.6em;
+ border-radius: 0.15em;
font-size: 80%;
}
@@ -73,13 +73,13 @@
}
.mediaInfoOfficialRating {
- border: .09em solid currentColor;
- padding: 0 .6em;
+ border: 0.09em solid currentColor;
+ padding: 0 0.6em;
height: 1.3em;
line-height: 1.8em;
display: flex;
align-items: center;
justify-content: center;
- border-radius: .1em;
+ border-radius: 0.1em;
font-size: 96%;
}
diff --git a/src/components/multiselect/multiselect.css b/src/components/multiselect/multiselect.css
index 9c2a58cd20..e9c66c57a4 100644
--- a/src/components/multiselect/multiselect.css
+++ b/src/components/multiselect/multiselect.css
@@ -4,7 +4,7 @@
left: 0;
right: 0;
top: 0;
- background-color: rgba(0, 0, 0, .3);
+ background-color: rgba(0, 0, 0, 0.3);
z-index: 99998;
}
@@ -13,7 +13,7 @@
top: 0;
left: 0;
right: 0;
- padding: 1em .5em;
+ padding: 1em 0.5em;
display: flex;
align-items: center;
z-index: 99999;
diff --git a/src/components/navdrawer/navdrawer.css b/src/components/navdrawer/navdrawer.css
index 5d63e150d1..6d5d098de2 100644
--- a/src/components/navdrawer/navdrawer.css
+++ b/src/components/navdrawer/navdrawer.css
@@ -3,40 +3,50 @@
position: fixed;
top: 0;
bottom: 0;
- contain: strict
+ contain: strict;
}
.touch-menu-la {
- background-color: #FFF;
+ background-color: #fff;
will-change: transform;
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-transition: -webkit-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;
- z-index: 1099
+ z-index: 1099;
}
.touch-menu-la.transition {
- transition: 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;
+ transition: transform ease-out 240ms, left ease-out 260ms;
}
.drawer-open {
- 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, 0.4);
}
.scrollContainer {
- flex-grow: 1
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ flex-grow: 1;
}
.tmla-mask {
left: 0;
right: 0;
- background-color: #000;
opacity: 0;
z-index: 1098;
- 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 0.38s, visibility ease-in-out 0.38s;
+ transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
will-change: opacity;
- background-color: rgba(0, 0, 0, .3)
+ background-color: rgba(0, 0, 0, 0.3);
}
.tmla-mask.backdrop {
- opacity: 1
-}
\ No newline at end of file
+ opacity: 1;
+}
diff --git a/src/components/nowplayingbar/nowplayingbar.css b/src/components/nowplayingbar/nowplayingbar.css
index 120a0508a0..b1e77715ff 100644
--- a/src/components/nowplayingbar/nowplayingbar.css
+++ b/src/components/nowplayingbar/nowplayingbar.css
@@ -16,7 +16,7 @@
}
.nowPlayingBar-hidden {
- transform: translate3d(0,100%,0);
+ transform: translate3d(0, 100%, 0);
}
.nowPlayingBarTop {
@@ -28,7 +28,8 @@
justify-content: center;
}
-.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
+.mediaButton,
+.nowPlayingBarUserDataButtons .btnUserItemRating {
vertical-align: middle;
margin: 0;
text-align: center;
@@ -62,6 +63,7 @@
.nowPlayingBarCenter {
vertical-align: middle;
text-align: center;
+
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
z-index: 2;
flex-grow: 1;
@@ -74,7 +76,7 @@
.nowPlayingBarPositionContainer {
position: absolute !important;
left: 0;
- top: -.56em;
+ top: -0.56em;
right: 0;
z-index: 1;
}
@@ -89,7 +91,8 @@
.nowPlayingBarRight {
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 */
z-index: 2;
display: flex;
@@ -121,7 +124,6 @@
}
@media all and (max-width: 70em) {
-
.nowPlayingBarRight .nowPlayingBarUserDataButtons {
display: none;
}
@@ -155,13 +157,15 @@
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
display: none !important;
}
+
.nowPlayingBarInfoContainer {
width: 70%;
}
}
@media all and (max-width: 24em) {
- .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+ .nowPlayingBar .muteButton,
+ .nowPlayingBar .unmuteButton {
display: none;
}
}
diff --git a/src/components/playback/iconosd.css b/src/components/playback/iconosd.css
index b2c4fca91a..8f197a179e 100644
--- a/src/components/playback/iconosd.css
+++ b/src/components/playback/iconosd.css
@@ -4,11 +4,11 @@
right: 3%;
z-index: 100000;
background: #222;
- background: rgba(0, 0, 0, .8);
+ background: rgba(0, 0, 0, 0.8);
padding: 1em;
color: #fff;
backdrop-filter: blur(5px);
- border-radius: .25em;
+ border-radius: 0.25em;
transition: opacity 200ms ease-out;
}
@@ -19,22 +19,22 @@
.iconOsdIcon {
font-size: 320%;
display: block;
- margin: .25em .7em;
+ margin: 0.25em 0.7em;
}
.iconOsdProgressOuter {
- margin: 1.5em .25em 1em;
- height: .35em;
+ margin: 1.5em 0.25em 1em;
+ height: 0.35em;
background: #222;
- border-radius: .25em;
+ border-radius: 0.25em;
}
.iconOsdProgressInner {
background: #00a4dc;
height: 100%;
- border-radius: .25em;
+ border-radius: 0.25em;
}
.brightnessOsdProgressInner {
- background: #FF9800;
-}
\ No newline at end of file
+ background: #ff9800;
+}
diff --git a/src/components/playerstats/playerstats.css b/src/components/playerstats/playerstats.css
index b9d6355bd2..dfdf75a2e0 100644
--- a/src/components/playerstats/playerstats.css
+++ b/src/components/playerstats/playerstats.css
@@ -1,11 +1,10 @@
.playerStats {
- background: rgba(28,28,28,0.8);
- border-radius: .3em;
+ background: rgba(28, 28, 28, 0.8);
+ border-radius: 0.3em;
color: #fff;
left: 1.5em;
position: absolute;
top: 5em;
- color: #fff;
}
.playerStats-tv {
@@ -23,8 +22,8 @@
.playerStats-closeButton {
position: absolute;
- top: .25em;
- right: .25em;
+ top: 0.25em;
+ right: 0.25em;
color: #ccc;
z-index: 1;
}
@@ -44,7 +43,7 @@
.playerStats-stat-label {
font-weight: 500;
- margin: 0 .5em 0 0;
+ margin: 0 0.5em 0 0;
}
.playerStats-stat-header {
diff --git a/src/components/recordingcreator/recordingcreator.css b/src/components/recordingcreator/recordingcreator.css
index dc1ba9b31a..031d04b860 100644
--- a/src/components/recordingcreator/recordingcreator.css
+++ b/src/components/recordingcreator/recordingcreator.css
@@ -9,7 +9,7 @@
}
.recordingDialog-itemName {
- margin-top: .7em;
+ margin-top: 0.7em;
}
.recordingDetailsContainer {
diff --git a/src/components/recordingcreator/recordingfields.css b/src/components/recordingcreator/recordingfields.css
index c8492f5298..db0c7e0692 100644
--- a/src/components/recordingcreator/recordingfields.css
+++ b/src/components/recordingcreator/recordingfields.css
@@ -4,9 +4,9 @@
}
.recordingIcon-active {
- color: #cc3333;
+ color: #c33;
}
.recordSeriesContainer {
- margin-bottom: .8em;
-}
\ No newline at end of file
+ margin-bottom: 0.8em;
+}
diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css
index 673f301c1e..83a1c48e5f 100644
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@@ -1,49 +1,89 @@
.nowPlayingInfoContainer {
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
- flex-direction: row
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ flex-direction: row;
}
.navigationSection {
- text-align: center
+ text-align: center;
+}
+
+.btnArrowUp {
+ border-radius: 40% 40% 10% 10%;
+}
+
+.btnArrowLeft {
+ border-radius: 40% 10% 10% 40%;
+}
+
+.btnArrowRight {
+ border-radius: 10% 40% 40% 10%;
+}
+
+.btnArrowDown {
+ border-radius: 10% 10% 40% 40%;
+}
+
+.btnOk {
+ border-radius: 10%;
}
.nowPlayingPageTitle {
- margin: 0 0 .5em .5em
+ margin: 0 0 0.5em 0.5em;
}
.nowPlayingPositionSliderContainer {
- margin: .7em 0 .7em 1em
+ margin: 0.7em 0 0.7em 1em;
}
.nowPlayingInfoButtons {
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
- flex-wrap: wrap
+ -webkit-flex-wrap: wrap;
+ flex-wrap: wrap;
}
.nowPlayingInfoControls,
.nowPlayingTime {
display: flex;
+ display: -webkit-box;
+ display: -webkit-flex;
}
.nowPlayingPageImageContainer {
width: 20%;
- margin-right: .25em;
+ margin-right: 0.25em;
position: relative;
- flex-shrink: 0
+ -webkit-flex-shrink: 0;
+ flex-shrink: 0;
}
-@media all and (min-width:50em) {
+@media all and (min-width: 50em) {
.nowPlayingPageImageContainer {
- width: 16%
+ width: 16%;
}
}
.nowPlayingInfoControls {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
flex-grow: 1;
display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: column;
flex-direction: column;
- justify-content: center
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
}
.nowPlayingPageImage {
@@ -51,118 +91,149 @@
left: 0;
right: 0;
width: 100%;
+ -webkit-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-select: none;
+ -moz-user-select: none;
+ -webkit-user-drag: none;
+ -webkit-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 {
+ -webkit-box-orient: vertical !important;
+ -webkit-box-direction: normal !important;
+ -webkit-flex-direction: column !important;
flex-direction: column !important;
- align-items: center
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ align-items: center;
}
.nowPlayingPageTitle {
text-align: center;
- margin: .5em 0 .75em
+ margin: 0.5em 0 0.75em;
}
.nowPlayingPositionSliderContainer {
- margin: .7em 1em
+ margin: 0.7em 1em;
}
.nowPlayingInfoButtons {
- justify-content: center
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
}
.nowPlayingPageImageContainer {
width: auto;
- margin-right: 0
+ margin-right: 0;
}
.nowPlayingInfoControls {
margin-top: 1em;
- max-width: 100%
+ max-width: 100%;
}
.nowPlayingPageImage {
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 {
- height: 30vh
+ height: 30vh;
}
}
.nowPlayingTime {
display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
- margin: 0 1em
+ margin: 0 1em;
}
.nowPlayingSecondaryButtons {
+ display: -webkit-box;
+ display: -webkit-flex;
display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
align-items: center;
+ -webkit-flex-wrap: wrap;
flex-wrap: wrap;
- justify-content: center
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
}
-@media all and (min-width:50em) {
+@media all and (min-width: 50em) {
.nowPlayingSecondaryButtons {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
flex-grow: 1;
- justify-content: flex-end
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ justify-content: flex-end;
}
}
-@media all and (min-width:80em) {
+@media all and (min-width: 80em) {
.nowPlayingPageImageContainer {
- margin-right: .75em
+ margin-right: 0.75em;
}
}
.nowPlayingNavButtonContainer {
- width: 30em
+ width: 30em;
}
-.smallBackdropPosterItem .cardOverlayInner>div {
+.smallBackdropPosterItem .cardOverlayInner > div {
white-space: nowrap;
+ -o-text-overflow: ellipsis;
text-overflow: ellipsis;
- overflow: hidden
+ overflow: hidden;
}
.playlistIndexIndicatorImage {
+ -webkit-background-size: initial initial !important;
background-size: initial !important;
- background-image: url(assets/img/equalizer.gif) !important;
+ background-image: url(../../assets/img/equalizer.gif) !important;
}
.hideVideoButtons .videoButton {
- display: none
+ display: none;
}
.nowPlayingVolumeSliderContainer {
- width: 9em
+ width: 9em;
}
-@media all and (max-width:50em) {
+@media all and (max-width: 50em) {
.nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
- display: none !important
+ display: none !important;
+ }
+
+ .navigationSection .collapseContent i {
+ font-size: 4em;
}
}
-@media all and (max-width:47em) {
+@media all and (max-width: 47em) {
.nowPlayingInfoButtons .repeatToggleButton {
- display: none !important
+ display: none !important;
}
}
-@media all and (max-width:34em) {
+@media all and (max-width: 34em) {
.nowPlayingInfoButtons .btnNowPlayingFastForward,
.nowPlayingInfoButtons .btnNowPlayingRewind,
.nowPlayingInfoButtons .playlist .listItemMediaInfo {
- display: none !important
+ display: none !important;
}
}
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 3a48c2dbef..6c43e81756 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -215,23 +215,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
context.querySelector(".sendTextSection").classList.add("hide");
}
- if (!currentPlayer.isLocalPlayer) {
+ if (-1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
context.querySelector(".navigationSection").classList.remove("hide");
} else {
context.querySelector(".navigationSection").classList.add("hide");
}
- buttonVisible(context.querySelector(".btnArrowUp"), -1 != supportedCommands.indexOf("MoveUp"));
- buttonVisible(context.querySelector(".btnArrowLeft"), -1 != supportedCommands.indexOf("MoveDown"));
- buttonVisible(context.querySelector(".btnArrowRight"), -1 != supportedCommands.indexOf("MoveRight"));
- buttonVisible(context.querySelector(".btnArrowDown"), -1 != supportedCommands.indexOf("MoveLeft"));
- buttonVisible(context.querySelector(".btnOk"), -1 != supportedCommands.indexOf("Select"));
- buttonVisible(context.querySelector(".btnBack"), -1 != supportedCommands.indexOf("Back"));
- buttonVisible(context.querySelector(".btnContextMenu"), -1 != supportedCommands.indexOf("ToggleContextMenu"));
- buttonVisible(context.querySelector(".btnShowSearch"), -1 != supportedCommands.indexOf("GoToSearch"));
- buttonVisible(context.querySelector(".bthShowSettings"), -1 != supportedCommands.indexOf("GoToSettings"));
- buttonVisible(context.querySelector(".btnGoHome"), -1 != supportedCommands.indexOf("GoHome"));
-
buttonVisible(context.querySelector(".btnStop"), null != item);
buttonVisible(context.querySelector(".btnNextTrack"), null != item);
buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);
diff --git a/src/components/search/searchfields.css b/src/components/search/searchfields.css
index 01981ed998..08d8515c86 100644
--- a/src/components/search/searchfields.css
+++ b/src/components/search/searchfields.css
@@ -4,8 +4,8 @@
}
.searchfields-icon {
- margin-bottom: .1em;
- margin-right: .25em;
+ margin-bottom: 0.1em;
+ margin-right: 0.25em;
font-size: 2em;
align-self: flex-end;
}
diff --git a/src/components/skinManager.js b/src/components/skinManager.js
index 06125e947a..b757aab3d6 100644
--- a/src/components/skinManager.js
+++ b/src/components/skinManager.js
@@ -34,15 +34,12 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
id: "dark",
isDefault: true,
isDefaultServerDashboard: true
- }, {
- name: "Emby",
- id: "emby"
}, {
name: "Light",
id: "light"
}, {
name: "Purple Haze",
- id: "purple-haze"
+ id: "purplehaze"
}, {
name: "Windows Media Center",
id: "wmc"
diff --git a/src/components/slideshow/style.css b/src/components/slideshow/style.css
index 1167a972c8..2bea7c9696 100644
--- a/src/components/slideshow/style.css
+++ b/src/components/slideshow/style.css
@@ -3,11 +3,14 @@
background: #000;
}
-.slideshowSwiperContainer, .swiper-wrapper, .swiper-slide {
+.slideshowSwiperContainer,
+.swiper-wrapper,
+.swiper-slide {
background: #000;
}
-.slideshowImage, .slideshowSwiperContainer {
+.slideshowImage,
+.slideshowSwiperContainer {
position: fixed;
top: 0;
right: 0;
@@ -27,11 +30,12 @@
.slideshowImageText {
position: fixed;
- bottom: .25em;
- right: .5em;
+ bottom: 0.25em;
+ right: 0.5em;
color: #fff;
z-index: 1002;
font-weight: normal;
+
/* 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;
}
@@ -41,6 +45,9 @@
height: auto;
max-width: 100%;
max-height: 100%;
+ -ms-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
@@ -49,26 +56,26 @@
.slideshowButtonIcon {
color: #fff;
- opacity: .7;
+ opacity: 0.7;
}
.btnSlideshowPrevious {
- left: .5vh;
+ left: 0.5vh;
top: 45vh;
z-index: 1002;
position: absolute;
}
.btnSlideshowNext {
- right: .5vh;
+ right: 0.5vh;
top: 45vh;
z-index: 1002;
position: absolute;
}
.topActionButtons {
- right: .5vh;
- top: .5vh;
+ right: 0.5vh;
+ top: 0.5vh;
z-index: 1002;
position: absolute;
}
@@ -78,9 +85,9 @@
left: 0;
bottom: 0;
right: 0;
- background-color: rgba(0, 0, 0, .7);
+ background-color: rgba(0, 0, 0, 0.7);
color: #fff;
- padding: .5%;
+ padding: 0.5%;
display: flex;
flex-direction: row;
align-items: center;
@@ -92,9 +99,9 @@
left: 0;
top: 0;
right: 0;
- background-color: rgba(0, 0, 0, .7);
+ background-color: rgba(0, 0, 0, 0.7);
color: #fff;
- padding: .5%;
+ padding: 0.5%;
display: flex;
flex-direction: row;
align-items: center;
@@ -118,14 +125,14 @@
.slideTextInner {
margin: 0 auto;
max-width: 60%;
- background: rgba(0,0,0,.8);
+ background: rgba(0, 0, 0, 0.8);
display: inline-block;
- padding: .5em 1em;
- border-radius: .25em;
+ padding: 0.5em 1em;
+ border-radius: 0.25em;
}
.slideTitle {
- margin: 0 0 .25em;
+ margin: 0 0 0.25em;
}
.slideSubtitle {
diff --git a/src/components/subtitleeditor/subtitleeditor.css b/src/components/subtitleeditor/subtitleeditor.css
index a97b20b38a..08e6faffba 100644
--- a/src/components/subtitleeditor/subtitleeditor.css
+++ b/src/components/subtitleeditor/subtitleeditor.css
@@ -1,3 +1,3 @@
.originalSubtitleFileLabel {
margin-right: 1em;
-}
\ No newline at end of file
+}
diff --git a/src/components/subtitlesync/subtitlesync.css b/src/components/subtitlesync/subtitlesync.css
index 38a15be901..2ff8a3e905 100644
--- a/src/components/subtitlesync/subtitlesync.css
+++ b/src/components/subtitlesync/subtitlesync.css
@@ -3,8 +3,8 @@
margin-left: 30%;
margin-right: 30%;
height: 4.2em;
- background: rgba(28,28,28,0.8);
- border-radius: .3em;
+ background: rgba(28, 28, 28, 0.8);
+ border-radius: 0.3em;
color: #fff;
position: absolute;
}
@@ -14,7 +14,7 @@
top: 0;
right: 0;
color: #ccc;
- z-index: 2;
+ z-index: 2;
}
.subtitleSyncTextField {
@@ -27,7 +27,7 @@
text-align: center;
font-size: 20px;
color: white;
- z-index: 2;
+ z-index: 2;
}
#prompt {
@@ -40,7 +40,9 @@
margin-right: 1%;
top: 2.5em;
height: 1.4em;
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
flex-grow: 1;
- border-radius: .3em;
- z-index: 1;
-}
\ No newline at end of file
+ border-radius: 0.3em;
+ z-index: 1;
+}
diff --git a/src/components/toast/toast.css b/src/components/toast/toast.css
index 09d89abca5..28d6cb52fc 100644
--- a/src/components/toast/toast.css
+++ b/src/components/toast/toast.css
@@ -3,9 +3,9 @@
min-width: 20em;
box-sizing: border-box;
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
- border-radius: .15em;
+ border-radius: 0.15em;
cursor: default;
- transition: transform .3s ease-out;
+ transition: transform 0.3s ease-out;
min-height: initial;
padding: 1em 1.5em;
bottom: 1em;
diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css
index 784c79cbb7..15f91b29d9 100644
--- a/src/components/upnextdialog/upnextdialog.css
+++ b/src/components/upnextdialog/upnextdialog.css
@@ -11,6 +11,7 @@
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
user-select: none;
+ -webkit-touch-callout: none;
}
.upNextDialog-hidden {
@@ -27,7 +28,7 @@
position: relative;
margin-right: 1em;
flex-shrink: 0;
- margin-bottom: .5em;
+ margin-bottom: 0.5em;
}
.upNextDialog-button {
@@ -36,7 +37,6 @@
}
@media all and (orientation: landscape) {
-
.upNextDialog {
flex-direction: row;
}
@@ -66,4 +66,8 @@
border: 0;
user-drag: none;
user-select: none;
+ -moz-user-select: none;
+ -webkit-user-drag: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
}
diff --git a/src/components/userdatabuttons/userdatabuttons.css b/src/components/userdatabuttons/userdatabuttons.css
index 0138631734..f93f47ffcc 100644
--- a/src/components/userdatabuttons/userdatabuttons.css
+++ b/src/components/userdatabuttons/userdatabuttons.css
@@ -1,3 +1,3 @@
.btnUserDataOn {
- color: #cc3333 !important;
-}
\ No newline at end of file
+ color: #c33 !important;
+}
diff --git a/src/components/viewManager/viewContainer.css b/src/components/viewManager/viewContainer.css
index edfa101976..61d9345014 100644
--- a/src/components/viewManager/viewContainer.css
+++ b/src/components/viewManager/viewContainer.css
@@ -5,8 +5,10 @@
right: 0;
bottom: 0;
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 {
@@ -18,6 +20,7 @@
opacity: 0;
}
}
+
@keyframes view-fadein {
from {
opacity: 0;
@@ -66,4 +69,4 @@
to {
transform: translate3d(100%, 0, 0);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/youtubeplayer/style.css b/src/components/youtubeplayer/style.css
index 8c59a541cf..1328e6f3d5 100644
--- a/src/components/youtubeplayer/style.css
+++ b/src/components/youtubeplayer/style.css
@@ -9,13 +9,13 @@
align-items: center;
}
- .youtubePlayerContainer.onTop {
- z-index: 1000;
- }
+.youtubePlayerContainer.onTop {
+ z-index: 1000;
+}
- .youtubePlayerContainer video {
- margin: 0 !important;
- padding: 0 !important;
- width: 100%;
- height: 100%;
- }
\ No newline at end of file
+.youtubePlayerContainer video {
+ margin: 0 !important;
+ padding: 0 !important;
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/controllers/dashboard/general.js b/src/controllers/dashboard/general.js
index c37e5e9a46..34b275ba27 100644
--- a/src/controllers/dashboard/general.js
+++ b/src/controllers/dashboard/general.js
@@ -16,18 +16,6 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
return '"
})).val(config.UICulture);
currentLanguage = config.UICulture;
- if (systemInfo.CanSelfUpdate) {
- page.querySelector(".fldAutomaticUpdates").classList.remove("hide");
- } else {
- page.querySelector(".fldAutomaticUpdates").classList.add("hide");
- }
- $("#chkEnableAutomaticServerUpdates", page).checked(config.EnableAutoUpdate);
- $("#chkEnableAutomaticRestart", page).checked(config.EnableAutomaticRestart);
- if (systemInfo.CanSelfRestart) {
- page.querySelector("#fldEnableAutomaticRestart").classList.remove("hide");
- } else {
- page.querySelector("#fldEnableAutomaticRestart").classList.add("hide");
- }
if (systemInfo.CanSelfRestart || systemInfo.CanSelfUpdate) {
$(".autoUpdatesContainer", page).removeClass("hide");
} else {
@@ -48,8 +36,6 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
config.MetadataNetworkPath = $("#txtMetadataNetworkPath", form).val();
var requiresReload = (config.UICulture !== currentLanguage);
config.AutoRunWebApp = $("#chkAutoRunWebApp", form).checked();
- config.EnableAutomaticRestart = $("#chkEnableAutomaticRestart", form).checked();
- config.EnableAutoUpdate = $("#chkEnableAutomaticServerUpdates", form).checked();
ApiClient.updateServerConfiguration(config).then(function() {
ApiClient.getNamedConfiguration(brandingConfigKey).then(function(brandingConfig) {
brandingConfig.LoginDisclaimer = form.querySelector("#txtLoginDisclaimer").value;
diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js
index c25487fd32..72d50a25a3 100644
--- a/src/controllers/livetvstatus.js
+++ b/src/controllers/livetvstatus.js
@@ -187,16 +187,12 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
switch (providerId = providerId.toLowerCase()) {
case "m3u":
return "M3U";
-
case "hdhomerun":
- return "HDHomerun";
-
+ return "HDHomeRun";
case "hauppauge":
return "Hauppauge";
-
case "satip":
return "DVB";
-
default:
return "Unknown";
}
@@ -206,13 +202,8 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
switch (providerId = providerId.toLowerCase()) {
case "schedulesdirect":
return "Schedules Direct";
-
case "xmltv":
- return "Xml TV";
-
- case "emby":
- return "Emby Guide";
-
+ return "XMLTV";
default:
return "Unknown";
}
@@ -222,12 +213,8 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
switch (providerId = providerId.toLowerCase()) {
case "xmltv":
return "livetvguideprovider.html?type=xmltv";
-
case "schedulesdirect":
return "livetvguideprovider.html?type=schedulesdirect";
-
- case "emby":
- return "livetvguideprovider.html?type=emby";
}
}
@@ -238,7 +225,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
id: "SchedulesDirect"
});
menuItems.push({
- name: "Xml TV",
+ name: "XMLTV",
id: "xmltv"
});
diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js
index e51274d254..6d32e4ab2a 100644
--- a/src/controllers/movies/moviegenres.js
+++ b/src/controllers/movies/moviegenres.js
@@ -114,7 +114,10 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
shape: getPortraitShape(),
scalable: true,
overlayMoreButton: true,
- allowBottomPadding: false
+ allowBottomPadding: true,
+ showTitle: true,
+ centerText: true,
+ showYear: true
});
}
if (result.Items.length >= query.Limit) {
diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js
index 0327217e44..31ded5c594 100644
--- a/src/controllers/movies/moviesrecommended.js
+++ b/src/controllers/movies/moviesrecommended.js
@@ -1,4 +1,4 @@
-define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) {
+define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-scroller", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) {
"use strict";
function enableScrollX() {
@@ -114,18 +114,25 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
var allowBottomPadding = true;
if (enableScrollX()) {
- allowBottomPadding = false;
- html += '