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/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 6b6a5eb8c7..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: flex-start; + 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/apphost.js b/src/components/apphost.js index d6099b6ddf..0c4d2a6dca 100644 --- a/src/components/apphost.js +++ b/src/components/apphost.js @@ -168,23 +168,25 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet return false; } - var savedResult = appSettings.get(htmlMediaAutoplayAppStorageKey); - return "true" === savedResult || "false" !== savedResult && null; + return true; } - function cueSupported() { + function supportsCue() { try { var video = document.createElement("video"); var style = document.createElement("style"); + style.textContent = "video::cue {background: inherit}"; document.body.appendChild(style); document.body.appendChild(video); + var cue = window.getComputedStyle(video, "::cue").background; document.body.removeChild(style); document.body.removeChild(video); + return !!cue.length; } catch (err) { - console.log("Error detecting cue support:" + err); + console.log("error detecting cue support: " + err); return false; } } @@ -204,8 +206,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet } } - var htmlMediaAutoplayAppStorageKey = "supportshtmlmediaautoplay0"; - var supportedFeatures = function () { var features = []; @@ -280,7 +280,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet //features.push("multiserver"); features.push("screensaver"); - if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || cueSupported())) { + if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || supportsCue())) { features.push("subtitleappearancesettings"); } @@ -299,18 +299,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet return features; }(); - if (supportedFeatures.indexOf("htmlvideoautoplay") === -1 && supportsHtmlMediaAutoplay() !== false) { - require(["autoPlayDetect"], function (autoPlayDetect) { - autoPlayDetect.supportsHtmlMediaAutoplay().then(function () { - appSettings.set(htmlMediaAutoplayAppStorageKey, "true"); - supportedFeatures.push("htmlvideoautoplay"); - supportedFeatures.push("htmlaudioautoplay"); - }, function () { - appSettings.set(htmlMediaAutoplayAppStorageKey, "false"); - }); - }); - } - /** * Do exit according to platform */ @@ -435,7 +423,9 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet } } }; + var doc = self.document; + var isHidden = false; if (doc) { if (void 0 !== doc.visibilityState) { @@ -459,8 +449,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet } } - var isHidden = false; - if (doc) { doc.addEventListener(visibilityChange, function () { if (document[visibilityState]) { 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/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 44c5b3b079..92cc6d38ac 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -1018,7 +1018,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana return text; } - var html = ''; 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 a71b053a21..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') @@ -1401,7 +1403,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa dlg.classList.add('videoPlayerContainer'); if (options.backdropUrl) { - dlg.classList.add('videoPlayerContainer-withBackdrop'); dlg.style.backgroundImage = "url('" + options.backdropUrl + "')"; } @@ -1410,11 +1411,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa dlg.classList.add('videoPlayerContainer-onTop'); } - // playsinline new for iOS 10 - // https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html - var html = ''; - var cssClass = 'htmlvideoplayer'; if (!browser.chromecast) { @@ -1449,7 +1446,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa self._mediaElement = videoElement; if (mediaManager) { - if (!mediaManager.embyInit) { initMediaManager(); mediaManager.embyInit = true; @@ -1465,9 +1461,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } else { resolve(videoElement); } - }); - } else { if (options.backdropUrl) { dlg.classList.add('videoPlayerContainer-withBackdrop'); 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/layoutManager.js b/src/components/layoutManager.js index 1059bf5758..21bcdf5933 100644 --- a/src/components/layoutManager.js +++ b/src/components/layoutManager.js @@ -2,7 +2,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve 'use strict'; function setLayout(instance, layout, selectedLayout) { - if (layout === selectedLayout) { instance[layout] = true; document.documentElement.classList.add('layout-' + layout); @@ -38,7 +37,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve }; LayoutManager.prototype.getSavedLayout = function (layout) { - return appSettings.get('layout'); }; @@ -64,4 +62,4 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve }; return new LayoutManager(); -}); \ No newline at end of file +}); 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/autoplaydetect.js b/src/components/playback/autoplaydetect.js deleted file mode 100644 index 3610eef2ab..0000000000 --- a/src/components/playback/autoplaydetect.js +++ /dev/null @@ -1,61 +0,0 @@ -define([], function () { - 'use strict'; - - function supportsHtmlMediaAutoplay() { - - return new Promise(function (resolve, reject) { - - var timeout; - var elem = document.createElement('video'); - var elemStyle = elem.style; - //skip the test if video itself, or the autoplay - //element on it isn't supported - if (!('autoplay' in elem)) { - reject(); - return; - } - elemStyle.position = 'absolute'; - elemStyle.height = 0; - elemStyle.width = 0; - - elem.setAttribute('autoplay', 'autoplay'); - elem.style.display = 'none'; - document.body.appendChild(elem); - - var testAutoplay = function (arg) { - clearTimeout(timeout); - elem.removeEventListener('playing', testAutoplay); - elem.removeEventListener('play', testAutoplay); - var supported = (arg && arg.type === 'playing') || (arg && arg.type === 'play') || elem.currentTime !== 0; - elem.parentNode.removeChild(elem); - - if (supported) { - resolve(); - } else { - reject(); - } - }; - - // play needed for firefox - elem.addEventListener('play', testAutoplay); - elem.addEventListener('playing', testAutoplay); - - try { - elem.src = 'data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAG1wNDJpc29tYXZjMQAAAz5tb292AAAAbG12aGQAAAAAzaNacc2jWnEAAV+QAAFfkAABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAGGlvZHMAAAAAEICAgAcAT////3//AAACQ3RyYWsAAABcdGtoZAAAAAHNo1pxzaNacQAAAAEAAAAAAAFfkAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAEAAAABAAAAAAAd9tZGlhAAAAIG1kaGQAAAAAzaNacc2jWnEAAV+QAAFfkFXEAAAAAAAhaGRscgAAAAAAAAAAdmlkZQAAAAAAAAAAAAAAAAAAAAGWbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABVnN0YmwAAACpc3RzZAAAAAAAAAABAAAAmWF2YzEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAEAAQAEgAAABIAAAAAAAAAAEOSlZUL0FWQyBDb2RpbmcAAAAAAAAAAAAAAAAAAAAAAAAY//8AAAAxYXZjQwH0AAr/4QAZZ/QACq609NQYBBkAAAMAAQAAAwAKjxImoAEABWjOAa8gAAAAEmNvbHJuY2xjAAYAAQAGAAAAGHN0dHMAAAAAAAAAAQAAAAUAAEZQAAAAKHN0c3oAAAAAAAAAAAAAAAUAAAIqAAAACAAAAAgAAAAIAAAACAAAAChzdHNjAAAAAAAAAAIAAAABAAAABAAAAAEAAAACAAAAAQAAAAEAAAAYc3RjbwAAAAAAAAACAAADYgAABaQAAAAUc3RzcwAAAAAAAAABAAAAAQAAABFzZHRwAAAAAAREREREAAAAb3VkdGEAAABnbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcgAAAAAAAAAAAAAAAAAAAAA6aWxzdAAAADKpdG9vAAAAKmRhdGEAAAABAAAAAEhhbmRCcmFrZSAwLjkuOCAyMDEyMDcxODAwAAACUm1kYXQAAAHkBgX/4NxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxMjAgLSBILjI2NC9NUEVHLTQgQVZDIGNvZGVjIC0gQ29weWxlZnQgMjAwMy0yMDExIC0gaHR0cDovL3d3dy52aWRlb2xhbi5vcmcveDI2NC5odG1sIC0gb3B0aW9uczogY2FiYWM9MCByZWY9MSBkZWJsb2NrPTE6MDowIGFuYWx5c2U9MHgxOjAgbWU9ZXNhIHN1Ym1lPTkgcHN5PTAgbWl4ZWRfcmVmPTAgbWVfcmFuZ2U9NCBjaHJvbWFfbWU9MSB0cmVsbGlzPTAgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0wIGNocm9tYV9xcF9vZmZzZXQ9MCB0aHJlYWRzPTYgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MCB3ZWlnaHRwPTAga2V5aW50PTUwIGtleWludF9taW49NSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmM9Y3FwIG1idHJlZT0wIHFwPTAAgAAAAD5liISscR8A+E4ACAACFoAAITAAAgsAAPgYCoKgoC+L4vi+KAvi+L4YfAEAACMzgABF9AAEUGUgABDJiXnf4AAAAARBmiKUAAAABEGaQpQAAAAEQZpilAAAAARBmoKU'; - var promise = elem.play(); - if (promise && promise.catch) { - promise.catch(reject); - } - - timeout = setTimeout(testAutoplay, 500); - } catch (e) { - reject(); - return; - } - }); - } - - return { - supportsHtmlMediaAutoplay: supportsHtmlMediaAutoplay - }; -}); \ No newline at end of file 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/usersettings/usersettings.js b/src/components/usersettings/usersettings.js deleted file mode 100644 index 6b3dc90d49..0000000000 --- a/src/components/usersettings/usersettings.js +++ /dev/null @@ -1,5 +0,0 @@ -define(['userSettingsBuilder'], function (userSettingsBuilder) { - 'use strict'; - - return new userSettingsBuilder(); -}); \ No newline at end of file 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/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 += '
'; + html += '
'; + html += '
'; } else { - html += '
'; + html += '
'; } html += cardBuilder.getCardsHtml(recommendation.Items, { shape: getPortraitShape(), scalable: true, overlayPlayButton: true, - allowBottomPadding: allowBottomPadding + allowBottomPadding: allowBottomPadding, + showTitle: true, + showYear: true, + centerText: true }); + + if (enableScrollX()) { + html += '
'; + } html += "
"; html += "
"; return html; diff --git a/src/controllers/playback/nowplayingpage.js b/src/controllers/playback/nowplaying.js similarity index 100% rename from src/controllers/playback/nowplayingpage.js rename to src/controllers/playback/nowplaying.js diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index bd12ba5075..122b2c8080 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/videoosd.js @@ -1,4 +1,4 @@ -define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "mediaInfo", "focusManager", "imageLoader", "scrollHelper", "events", "connectionManager", "browser", "globalize", "apphost", "layoutManager", "userSettings", "scrollStyles", "emby-slider", "paper-icon-button-light", "css!assets/css/videoosd"], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings) { +define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "mediaInfo", "focusManager", "imageLoader", "scrollHelper", "events", "connectionManager", "browser", "globalize", "apphost", "layoutManager", "userSettings", "keyboardnavigation", "scrollStyles", "emby-slider", "paper-icon-button-light", "css!assets/css/videoosd"], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings, keyboardnavigation) { "use strict"; function seriesImageUrl(item, options) { @@ -437,6 +437,11 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med }); currentVisibleMenu = null; toggleSubtitleSync("hide"); + + // Firefox does not blur by itself + if (document.activeElement) { + document.activeElement.blur(); + } } } @@ -1087,64 +1092,79 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med */ var NavigationKeys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]; + /** + * Clicked element. + * To skip 'click' handling on Firefox/Edge. + */ + var clickedElement; + function onWindowKeyDown(e) { + clickedElement = e.srcElement; + + var key = keyboardnavigation.getKeyName(e); + if (!currentVisibleMenu && 32 === e.keyCode) { playbackManager.playPause(currentPlayer); showOsd(); return; } - if (layoutManager.tv && NavigationKeys.indexOf(e.key) != -1) { + if (layoutManager.tv && NavigationKeys.indexOf(key) != -1) { showOsd(); return; } - switch (e.key) { + switch (key) { + case "Enter": + showOsd(); + break; + case "Escape": + case "Back": + // Ignore key when some dialog is opened + if (currentVisibleMenu === "osd" && !document.querySelector(".dialogContainer")) { + hideOsd(); + e.stopPropagation(); + } + break; case "k": playbackManager.playPause(currentPlayer); showOsd(); break; - case "l": case "ArrowRight": case "Right": playbackManager.fastForward(currentPlayer); showOsd(); break; - case "j": case "ArrowLeft": case "Left": playbackManager.rewind(currentPlayer); showOsd(); break; - case "f": if (!e.ctrlKey && !e.metaKey) { playbackManager.toggleFullscreen(currentPlayer); showOsd(); } break; - case "m": playbackManager.toggleMute(currentPlayer); showOsd(); break; - case "NavigationLeft": case "GamepadDPadLeft": case "GamepadLeftThumbstickLeft": - // Ignores gamepad events that are always triggered, even when not focused. + // Ignores gamepad events that are always triggered, even when not focused. if (document.hasFocus()) { playbackManager.rewind(currentPlayer); showOsd(); } break; - case "NavigationRight": case "GamepadDPadRight": case "GamepadLeftThumbstickRight": - // Ignores gamepad events that are always triggered, even when not focused. + // Ignores gamepad events that are always triggered, even when not focused. if (document.hasFocus()) { playbackManager.fastForward(currentPlayer); showOsd(); @@ -1152,6 +1172,14 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med } } + function onWindowMouseDown(e) { + clickedElement = e.srcElement; + } + + function onWindowTouchStart(e) { + clickedElement = e.srcElement; + } + function getImgUrl(item, chapter, index, maxWidth, apiClient) { if (chapter.ImageTag) { return apiClient.getScaledImageUrl(item.Id, { @@ -1280,6 +1308,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med showOsd(); inputManager.on(window, onInputCommand); dom.addEventListener(window, "keydown", onWindowKeyDown, { + capture: true + }); + dom.addEventListener(window, window.PointerEvent ? "pointerdown" : "mousedown", onWindowMouseDown, { + passive: true + }); + dom.addEventListener(window, "touchstart", onWindowTouchStart, { passive: true }); } catch (e) { @@ -1294,6 +1328,12 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med } dom.removeEventListener(window, "keydown", onWindowKeyDown, { + capture: true + }); + dom.removeEventListener(window, window.PointerEvent ? "pointerdown" : "mousedown", onWindowMouseDown, { + passive: true + }); + dom.removeEventListener(window, "touchstart", onWindowTouchStart, { passive: true }); stopOsdHideTimer(); @@ -1465,7 +1505,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med playbackManager.previousTrack(currentPlayer); }); view.querySelector(".btnPause").addEventListener("click", function () { - playbackManager.playPause(currentPlayer); + // Ignore 'click' if another element was originally clicked (Firefox/Edge issue) + if (this.contains(clickedElement)) { + playbackManager.playPause(currentPlayer); + } }); view.querySelector(".btnNextTrack").addEventListener("click", function () { playbackManager.nextTrack(currentPlayer); diff --git a/src/dashboardgeneral.html b/src/dashboardgeneral.html index 6387128d5e..559e80ee0a 100644 --- a/src/dashboardgeneral.html +++ b/src/dashboardgeneral.html @@ -56,21 +56,6 @@
-
-

${HeaderAutomaticUpdates}

- -
- -
${LabelAllowServerAutoRestartHelp}
-
-
-

${HeaderBranding}

diff --git a/src/elements/emby-button/emby-button.css b/src/elements/emby-button/emby-button.css index ee15e2e125..2776dec65d 100644 --- a/src/elements/emby-button/emby-button.css +++ b/src/elements/emby-button/emby-button.css @@ -8,20 +8,26 @@ font-size: inherit; font-family: inherit; color: inherit; + + /* These are getting an outline in opera tv browsers, which run chrome 30 */ + outline: none !important; outline-width: 0; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 0; padding: 0.9em 1em; vertical-align: middle; border: 0; - vertical-align: middle; border-radius: 0.2em; - /* These are getting an outline in opera tv browsers, which run chrome 30 */ - outline: none !important; - position: relative; font-weight: 600; + + /* Disable webkit tap highlighting */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-decoration: none; + /* Not crazy about this but it normalizes heights between anchors and buttons */ line-height: 1.35; transform-origin: center; @@ -42,7 +48,7 @@ } .button-flat:hover { - opacity: .5; + opacity: 0.5; } .button-link { @@ -79,7 +85,7 @@ display: block; align-items: center; justify-content: center; - margin: .25em 0; + margin: 0.25em 0; width: 100%; } @@ -88,12 +94,15 @@ display: inline-flex; align-items: center; box-sizing: border-box; - margin: 0 .29em; + margin: 0 0.29em; background: transparent; text-align: center; font-size: inherit; font-family: inherit; color: inherit; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 0; @@ -101,15 +110,17 @@ min-height: initial; width: auto; height: auto; - padding: .556em; + padding: 0.556em; vertical-align: middle; border: 0; - vertical-align: middle; + /* These are getting an outline in opera tv browsers, which run chrome 30 */ outline: none !important; - position: relative; overflow: hidden; border-radius: 50%; + + /* Disable webkit tap highlighting */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); justify-content: center; transform-origin: center; transition: 0.2s; @@ -120,32 +131,33 @@ z-index: 1; } - .paper-icon-button-light::-moz-focus-inner { - border: 0; - } +.paper-icon-button-light::-moz-focus-inner { + border: 0; +} - .paper-icon-button-light:disabled { - opacity: 0.3; - cursor: default; - } +.paper-icon-button-light:disabled { + opacity: 0.3; + cursor: default; +} - .paper-icon-button-light > i { - font-size: 1.66956521739130434em; - /* Make sure its on top of the ripple */ - position: relative; - z-index: 1; - vertical-align: middle; - } +.paper-icon-button-light > i { + font-size: 1.66956521739130434em; - .paper-icon-button-light > div { - max-height: 100%; - transform: scale(1.8); - position: relative; - z-index: 1; - vertical-align: middle; - display: inline; - margin: 0 auto; - } + /* Make sure its on top of the ripple */ + position: relative; + z-index: 1; + vertical-align: middle; +} + +.paper-icon-button-light > div { + max-height: 100%; + transform: scale(1.8); + position: relative; + z-index: 1; + vertical-align: middle; + display: inline; + margin: 0 auto; +} .emby-button-foreground { position: relative; @@ -159,7 +171,6 @@ .filterButtonBubble { color: #fff; position: absolute; - background: #444; top: 0; right: 0; width: 1.6em; @@ -170,7 +181,7 @@ justify-content: center; font-size: 82%; border-radius: 100em; - box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2); - background: #03A9F4; + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); + background: #03a9f4; font-weight: bold; } diff --git a/src/elements/emby-checkbox/emby-checkbox.css b/src/elements/emby-checkbox/emby-checkbox.css index 4e27928e2a..e694342571 100644 --- a/src/elements/emby-checkbox/emby-checkbox.css +++ b/src/elements/emby-checkbox/emby-checkbox.css @@ -32,12 +32,16 @@ .emby-checkbox { position: absolute; + /* This is for focusing purposes, so the focusManager doesn't skip over it */ width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; appearance: none; border: none; } @@ -46,14 +50,13 @@ position: absolute; top: 3px; left: 0; - display: inline-block; box-sizing: border-box; width: 1.83em; height: 1.83em; margin: 0; overflow: hidden; border: 2px solid currentcolor; - border-radius: .14em; + border-radius: 0.14em; z-index: 2; display: flex; align-items: center; @@ -98,18 +101,18 @@ flex-wrap: wrap; } - .checkboxList-verticalwrap > .emby-checkbox-label { - display: inline-flex; - margin: .3em 0 .3em 0; - width: 12em; - } +.checkboxList-verticalwrap > .emby-checkbox-label { + display: inline-flex; + margin: 0.3em 0 0.3em 0; + width: 12em; +} .checkboxList-paperList { padding: 1em !important; } .checkboxListLabel { - margin-bottom: .25em; + margin-bottom: 0.25em; } @keyframes repaintChrome { @@ -121,3 +124,13 @@ padding: 0; } } + +@-webkit-keyframes repaintChrome { + from { + padding: 0; + } + + to { + padding: 0; + } +} diff --git a/src/elements/emby-collapse/emby-collapse.css b/src/elements/emby-collapse/emby-collapse.css index 0a982e975d..dd22c20b5b 100644 --- a/src/elements/emby-collapse/emby-collapse.css +++ b/src/elements/emby-collapse/emby-collapse.css @@ -1,5 +1,5 @@ .emby-collapse { - margin: .5em 0; + margin: 0.5em 0; } .collapseContent { @@ -18,10 +18,9 @@ text-transform: none; width: 100%; text-align: left; - text-transform: none; - border-width: 0 0 .1em 0; + border-width: 0 0 0.1em 0; border-style: solid; - padding-left: .1em; + padding-left: 0.1em; background: transparent; box-shadow: none; } @@ -30,7 +29,7 @@ transform-origin: 50% 50%; transition: transform 180ms ease-out; position: absolute; - right: .5em; + right: 0.5em; font-size: 1.5em; } diff --git a/src/elements/emby-input/emby-input.css b/src/elements/emby-input/emby-input.css index 57a46ec7b6..176f8874e8 100644 --- a/src/elements/emby-input/emby-input.css +++ b/src/elements/emby-input/emby-input.css @@ -2,22 +2,24 @@ display: block; margin: 0; margin-bottom: 0 !important; - /* Remove select styling */ - /* Font size must the 16px or larger to prevent iOS page zoom on focus */ - font-size: 110%; - /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; - padding: .4em .25em; - /* Prevent padding from causing width overflow */ + padding: 0.4em 0.25em; + + /* must the 16px or larger to prevent iOS page zoom on focus */ + font-size: 110%; + + /* prevent padding from causing width overflow */ + -webkit-box-sizing: border-box; box-sizing: border-box; outline: none !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; } - .emby-input::-moz-focus-inner { - border: 0; - } +.emby-input::-moz-focus-inner { + border: 0; +} .inputContainer { margin-bottom: 1.8em; @@ -25,13 +27,14 @@ .inputLabel { display: inline-block; - margin-bottom: .25em; + margin-bottom: 0.25em; } .emby-input + .fieldDescription { - margin-top: .25em; + margin-top: 0.25em; } .emby-input-iconbutton { + -webkit-align-self: flex-end; align-self: flex-end; } diff --git a/src/elements/emby-progressring/emby-progressring.css b/src/elements/emby-progressring/emby-progressring.css index 7bef7c35f7..014db3aedf 100644 --- a/src/elements/emby-progressring/emby-progressring.css +++ b/src/elements/emby-progressring/emby-progressring.css @@ -11,9 +11,9 @@ width: 100%; height: 100%; border-radius: 50%; - border: .25em solid rgba(0, 0, 0, 1); + border: 0.25em solid rgba(0, 0, 0, 1); box-sizing: border-box; - background: rgba(0, 0, 0, .9); + background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; @@ -51,7 +51,7 @@ width: 200%; height: 200%; border-radius: 50%; - border-width: .25em; + border-width: 0.25em; border-style: solid; box-sizing: border-box; } diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css index 6b8575bc86..6db3c39e4d 100644 --- a/src/elements/emby-radio/emby-radio.css +++ b/src/elements/emby-radio/emby-radio.css @@ -4,29 +4,29 @@ display: inline-block; box-sizing: border-box; margin: 0; - padding-left: 0; + padding-left: 24px; } .radio-label-block { display: flex; align-items: center; - margin-top: .5em; - margin-bottom: .5em; -} - -.mdl-radio { - padding-left: 24px; + margin-top: 0.5em; + margin-bottom: 0.5em; } .mdl-radio__button { line-height: 24px; position: absolute; + /* 1px is for focusing purposes, so the focusManager doesn't skip over it */ width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; appearance: none; border: none; } @@ -51,7 +51,7 @@ } .mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle { - border: 2px solid rgba(0,0,0, 0.26); + border: 2px solid rgba(0, 0, 0, 0.26); cursor: auto; } @@ -67,27 +67,31 @@ cursor: pointer; transition-duration: 0.28s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-property: -webkit-transform; transition-property: transform; + transition-property: transform, -webkit-transform; + -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); border-radius: 50%; background: #00a4dc; } .mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { + -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - background: rgba(0,0,0, 0.26); + background: rgba(0, 0, 0, 0.26); cursor: auto; } .mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76); + box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76); } .mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle { - box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26) + box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26); } .mdl-radio__label { @@ -95,6 +99,6 @@ } .mdl-radio__button:disabled + .mdl-radio__label { - color: rgba(0,0,0, 0.26); + color: rgba(0, 0, 0, 0.26); cursor: auto; } diff --git a/src/elements/emby-select/emby-select.css b/src/elements/emby-select/emby-select.css index 4aff8cab92..b508e5d0e3 100644 --- a/src/elements/emby-select/emby-select.css +++ b/src/elements/emby-select/emby-select.css @@ -2,52 +2,60 @@ display: block; margin: 0; margin-bottom: 0 !important; + /* Remove select styling */ + /* Font size must the 16px or larger to prevent iOS page zoom on focus */ font-size: 110%; + /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; - padding: .5em 1.9em .5em .5em; + padding: 0.5em 1.9em 0.5em 0.5em; + /* Prevent padding from causing width overflow */ box-sizing: border-box; outline: none !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; } - .emby-select[disabled] { - background: none !important; - border-color: transparent !important; - color: inherit !important; - appearance: none; - } - -.selectContainer-inline > .emby-select { - padding: .3em 1.9em .3em .5em; - font-size: inherit; +.emby-select[disabled] { + background: none !important; + border-color: transparent !important; + color: inherit !important; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } - .selectContainer-inline > .emby-select[disabled] { - padding-left: 0; - padding-right: 0; - } - .emby-select::-moz-focus-inner { border: 0; } +.selectContainer-inline > .emby-select { + padding: 0.3em 1.9em 0.3em 0.5em; + font-size: inherit; +} + +.selectContainer-inline > .emby-select[disabled] { + padding-left: 0; + padding-right: 0; +} + .emby-select-focusscale { transition: transform 180ms ease-out !important; + -webkit-transform-origin: center center; transform-origin: center center; } - .emby-select-focusscale:focus { - transform: scale(1.04); - z-index: 1; - } +.emby-select-focusscale:focus { + transform: scale(1.04); + z-index: 1; +} .emby-select + .fieldDescription { - margin-top: .25em; + margin-top: 0.25em; } .selectContainer { @@ -63,31 +71,32 @@ .selectLabel { display: block; - margin-bottom: .25em; + margin-bottom: 0.25em; } .selectContainer-inline > .selectLabel { margin-bottom: 0; - margin-right: .5em; + margin-right: 0.5em; flex-shrink: 0; } .emby-select-withcolor { + -webkit-appearance: none; appearance: none; - border-radius: .2em; + border-radius: 0.2em; } .selectArrowContainer { position: absolute; - right: .3em; - top: .2em; + right: 0.3em; + top: 0.2em; color: inherit; pointer-events: none; } .selectContainer-inline > .selectArrowContainer { top: initial; - bottom: .24em; + bottom: 0.24em; font-size: 90%; } @@ -96,7 +105,7 @@ } .selectArrow { - margin-top: .35em; + margin-top: 0.35em; font-size: 1.7em; } diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css index 6fc861deb0..30d4ccb6d8 100644 --- a/src/elements/emby-slider/emby-slider.css +++ b/src/elements/emby-slider/emby-slider.css @@ -1,73 +1,85 @@ -_:-ms-input-placeholder { +:-ms-input-placeholder { appearance: none; + -ms-appearance: none; height: 2.223em; margin: 0; } .mdl-slider { width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; appearance: none; - height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/ + height: 150%;/* 150% is needed, else ie and edge won't display the thumb properly */ background: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; outline: 0; color: #00a4dc; + -webkit-align-self: center; + -ms-flex-item-align: center; align-self: center; z-index: 1; cursor: pointer; margin: 0; + + /* Disable webkit tap highlighting */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; } - .mdl-slider::-moz-focus-outer { - border: 0; - } +.mdl-slider::-moz-focus-outer { + border: 0; +} - .mdl-slider::-ms-tooltip { - display: none; - } +.mdl-slider::-ms-tooltip { + display: none; +} - .mdl-slider::-webkit-slider-runnable-track { - background: transparent; - } +.mdl-slider::-webkit-slider-runnable-track { + background: transparent; +} - .mdl-slider::-moz-range-track { - background: #444; - border: none; - width: calc(100% - 20px); - } +.mdl-slider::-moz-range-track { + background: #444; + border: none; + width: calc(100% - 20px); +} - .mdl-slider::-moz-range-progress { - background: #00a4dc; - width: calc(100% - 20px); - } +.mdl-slider::-moz-range-progress { + background: #00a4dc; + width: calc(100% - 20px); +} - .mdl-slider::-ms-track { - background: none; - color: transparent; - height: .2em; - width: 100%; - border: none; - } +.mdl-slider::-ms-track { + background: none; + color: transparent; + height: 0.2em; + width: 100%; + border: none; +} - .mdl-slider::-ms-fill-lower { - display: none; - } +.mdl-slider::-ms-fill-lower { + display: none; +} - .mdl-slider::-ms-fill-upper { - display: none; - } +.mdl-slider::-ms-fill-upper { + display: none; +} - .mdl-slider::-webkit-slider-thumb { - appearance: none; - width: 1.2em; - height: 1.2em; - box-sizing: border-box; - border-radius: 50%; - background: #00a4dc; - border: none; - transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); - } +.mdl-slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 1.2em; + height: 1.2em; + box-sizing: border-box; + border-radius: 50%; + background: #00a4dc; + border: none; + transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); +} .mdl-slider-hoverthumb::-webkit-slider-thumb { transform: none; @@ -91,27 +103,27 @@ _:-ms-input-placeholder { height: 0.9em; box-sizing: border-box; border-radius: 50%; - background-image: none; background: #00a4dc; + background-image: none; border: none; - transform: Scale(1.4, 1.4); + transform: scale(1.4, 1.4); } .mdl-slider::-ms-thumb { - appearance: none; + -webkit-appearance: none; width: 1.8em; height: 1.8em; box-sizing: border-box; border-radius: 50%; background: #00a4dc; border: none; - transform: scale(.9, .9); + transform: scale(0.9, 0.9); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .mdl-slider-hoverthumb::-ms-thumb { - margin-left: -.4em; - transform: scale(.5, .5); + margin-left: -0.4em; + transform: scale(0.5, 0.5); } .mdl-slider:hover::-ms-thumb { @@ -149,15 +161,15 @@ _:-ms-input-placeholder { .mdl-slider-background-flex-container { width: 100%; box-sizing: border-box; - margin-top: -.05em; + margin-top: -0.05em; top: 50%; position: absolute; } .mdl-slider-background-flex { background: #333; - height: .2em; - margin-top: -.08em; + height: 0.2em; + margin-top: -0.08em; width: 100%; top: 50%; left: 0; @@ -173,7 +185,7 @@ _:-ms-input-placeholder { } .mdl-slider-background-lower { - /*transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/ + /* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */ position: absolute; left: 0; width: 0; @@ -188,15 +200,16 @@ _:-ms-input-placeholder { .mdl-slider-background-lower-withtransform { width: 100%; - /*transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/ + + /* transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); */ transform-origin: left center; transform: scaleX(0); } .mdl-slider-background-upper { - /*transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/ + /* transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */ background: #666; - background: rgba(255, 255, 255, .4); + background: rgba(255, 255, 255, 0.4); position: absolute; left: 0; width: 0; @@ -218,5 +231,5 @@ _:-ms-input-placeholder { .sliderBubbleText { margin: 0; - padding: .5em .75em; + padding: 0.5em 0.75em; } diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index c340e79359..24592f4515 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -1,4 +1,4 @@ -define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager) { +define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) { 'use strict'; var EmbySliderPrototype = Object.create(HTMLInputElement.prototype); @@ -250,7 +250,7 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement * Handle KeyDown event */ function onKeyDown(e) { - switch (e.key) { + switch (keyboardnavigation.getKeyName(e)) { case 'ArrowLeft': case 'Left': stepKeyboard(this, -this.keyboardStepDown || -1); diff --git a/src/elements/emby-textarea/emby-textarea.css b/src/elements/emby-textarea/emby-textarea.css index 0dab1b1ece..0866664914 100644 --- a/src/elements/emby-textarea/emby-textarea.css +++ b/src/elements/emby-textarea/emby-textarea.css @@ -2,30 +2,35 @@ display: block; margin: 0; margin-bottom: 0 !important; + /* Remove select styling */ + /* Font size must the 16px or larger to prevent iOS page zoom on focus */ font-size: inherit; + /* General select styles: change as needed */ font-family: inherit; font-weight: inherit; color: inherit; - padding: .35em .25em; + padding: 0.35em 0.25em; + /* Prevent padding from causing width overflow */ box-sizing: border-box; outline: none !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; } - .emby-textarea::-moz-focus-inner { - border: 0; - } +.emby-textarea::-moz-focus-inner { + border: 0; +} .textareaLabel { display: inline-block; - transition: all .2s ease-out; - margin-bottom: .25em; + transition: all 0.2s ease-out; + margin-bottom: 0.25em; } .emby-textarea + .fieldDescription { - margin-top: .25em; + margin-top: 0.25em; } diff --git a/src/elements/emby-toggle/emby-toggle.css b/src/elements/emby-toggle/emby-toggle.css index 3b14b8cf09..3b5c5a5f64 100644 --- a/src/elements/emby-toggle/emby-toggle.css +++ b/src/elements/emby-toggle/emby-toggle.css @@ -9,6 +9,10 @@ margin: 0; padding: 0; overflow: visible; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; flex-direction: row-reverse; justify-content: flex-end; @@ -24,6 +28,9 @@ margin: 0; padding: 0; opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; appearance: none; border: none; } @@ -34,7 +41,7 @@ } .mdl-switch__track { - background: rgba(128,128,128, 0.5); + background: rgba(128, 128, 128, 0.5); height: 1em; border-radius: 1em; cursor: pointer; @@ -45,7 +52,7 @@ } .mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track { - background: rgba(0,0,0, 0.12); + background: rgba(0, 0, 0, 0.12); cursor: auto; } @@ -53,7 +60,7 @@ background: #999; position: absolute; left: 0; - top: -.25em; + top: -0.25em; height: 1.44em; width: 1.44em; border-radius: 50%; @@ -70,11 +77,11 @@ .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { background: #00a4dc; left: 1.466em; - box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 0.56em 0 rgba(0, 0, 0, 0.12); } .mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb { - background: rgb(189,189,189); + background: rgb(189, 189, 189); cursor: auto; } @@ -82,17 +89,18 @@ position: absolute; top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; box-sizing: border-box; - width: .6em; - height: .6em; + width: 0.6em; + height: 0.6em; border-radius: 50%; background-color: transparent; } .mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper { - box-shadow: 0 0 0 1.39em rgba(0, 0, 0, .05); + box-shadow: 0 0 0 1.39em rgba(0, 0, 0, 0.05); } .mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper { @@ -105,10 +113,10 @@ margin: 0; display: inline-flex; align-items: center; - margin-left: .7em; + margin-left: 0.7em; } .mdl-switch__input[disabled] .mdl-switch__label { - color: rgb(189,189,189); + color: rgb(189, 189, 189); cursor: auto; } diff --git a/src/nowplaying.html b/src/nowplaying.html index 44b7e38163..bc595a6c90 100644 --- a/src/nowplaying.html +++ b/src/nowplaying.html @@ -72,67 +72,72 @@
-