diff --git a/package.json b/package.json index c5f0e75c8..09b793cd3 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "license": "GPL-2.0-or-later", "devDependencies": { "clean-webpack-plugin": "^3.0.0", - "copy-webpack-plugin": "^5.0.3", + "copy-webpack-plugin": "^5.1.1", "css-loader": "^2.1.0", "eslint": "^5.16.0", "file-loader": "^3.0.1", diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css index 1c69dfccb..d1f0b540a 100644 --- a/src/assets/css/dashboard.css +++ b/src/assets/css/dashboard.css @@ -1,5 +1,6 @@ .dashboardColumn, .dashboardSections { + flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal } @@ -416,6 +417,7 @@ div[data-role=controlgroup] a.ui-btn-active { } a[data-role=button] { + background-clip: padding-box; -webkit-font-smoothing: antialiased; -webkit-user-select: none; -webkit-background-clip: padding-box; diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index c03cc2691..8b312eed4 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -488,9 +488,11 @@ } .detailImageContainer { - width: 280px; - margin-right: 2em; - flex-shrink: 0; + margin: 1.25em 0; + position: sticky; + top: 15%; + float: left; + width: 22.786458333333332vw; } .detailPagePrimaryContent { @@ -504,8 +506,8 @@ width: 25em; height: 9.375em; position: absolute; - top: 13.5%; - right: 19.5%; + top: 14.5%; + right: 10.5%; -webkit-background-size: contain; background-size: contain } @@ -535,13 +537,9 @@ } .itemDetailImage { - width: 100%; + width: 100% !important; + box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); - box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37) -} - -.thumbDetailImageContainer { - width: 400px } @media all and (max-width:62.5em) { @@ -554,19 +552,6 @@ } } -@media all and (min-width:62.5em) { - .itemBackdrop { - display: none - } - - .detailPagePrimaryContainer { - display: -webkit-box; - display: -webkit-flex; - display: flex; - margin-bottom: 3em - } -} - @media all and (max-width:75em) { .lnkSibling { display: none !important @@ -621,6 +606,7 @@ .detailButton-mobile, .mainDetailButtons { + display: flex; display: -webkit-box; display: -webkit-flex } diff --git a/src/assets/css/scrollstyles.css b/src/assets/css/scrollstyles.css index aa2f7dafa..431cd2ba1 100644 --- a/src/assets/css/scrollstyles.css +++ b/src/assets/css/scrollstyles.css @@ -11,8 +11,6 @@ .hiddenScrollX, .layout-tv .scrollX { -ms-overflow-style: none; - /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */ - /*overflow: -moz-scrollbars-none;*/ } .hiddenScrollX-forced { @@ -50,4 +48,4 @@ .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar { width: 0 !important; display: none; -} \ No newline at end of file +} diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index f9c4798e9..c43696dd4 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -1,5 +1,6 @@ .chapterThumbTextContainer, .videoOsdBottom { + user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none @@ -137,8 +138,10 @@ .osdMediaInfo, .volumeButtons { + display: flex; display: -webkit-box; display: -webkit-flex; + align-items: center; -webkit-box-align: center } @@ -218,9 +221,25 @@ margin-left: auto; } -@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } -@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } -@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(360deg); + } +} + +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + } +} + +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform:rotate(360deg); + } +} + .osdMediaStatus .animate { -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index e63b9a4bb..96d0698f4 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -83,7 +83,8 @@ button { /* These both are needed in case cardBox is a button */ -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none !important; - contain: layout style; + contain: layout; + contain: style; } .card.show-focus:not(.show-animation) .cardBox { diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 9bd91731a..cbd2f1fa0 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -53,6 +53,7 @@ .nowPlayingInfoControls, .nowPlayingTime { + display: flex; display: -webkit-box; display: -webkit-flex } diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index d194dc203..6e580ebea 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -404,13 +404,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#E4E2DC)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #E4E2DC); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #E4E2DC); - background: linear-gradient(rgba(0, 0, 0, 0), #E4E2DC) -} - .infoBanner { color: #000; background: #fff3a5; diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index 02e8e46ea..0c13a696b 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -407,13 +407,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818); - background: linear-gradient(rgba(0, 0, 0, 0), #181818) -} - .infoBanner { color: #ddd; background: #111; diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 5758f5d09..fee28f50f 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -377,13 +377,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#101010)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #101010); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #101010); - background: linear-gradient(rgba(0, 0, 0, 0), #101010) -} - .infoBanner { color: #ddd; background: #111; diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index 65a9d5cf9..0d96abc53 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -396,13 +396,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2); - background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2) -} - .infoBanner { color: #000; background: #fff3a5; diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index 1892423ae..c8d7aa465 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -500,13 +500,6 @@ a[data-role=button] { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818); - background: linear-gradient(rgba(0, 0, 0, 0), #181818) -} - .infoBanner { color: #0e0f2d; background: #dbe6ff; diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index 0367f080d..290164080 100644 --- a/src/themes/wmc/theme.css +++ b/src/themes/wmc/theme.css @@ -391,13 +391,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#115E9E)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #115E9E); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #115E9E); - background: linear-gradient(rgba(0, 0, 0, 0), #115E9E) -} - .infoBanner { color: #000; background: #fff3a5; diff --git a/webpack.prod.js b/webpack.prod.js index 8880a2168..2055051da 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -20,5 +20,5 @@ module.exports = merge(common, { use: ["file-loader"] } ] - }, + } }); diff --git a/yarn.lock b/yarn.lock index 6a7d56f9d..1526957e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -694,10 +694,10 @@ cacache@^11.3.3: unique-filename "^1.1.1" y18n "^4.0.0" -cacache@^12.0.2: - version "12.0.2" - resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.2.tgz#8db03205e36089a3df6954c66ce92541441ac46c" - integrity sha512-ifKgxH2CKhJEg6tNdAwziu6Q33EvuG26tYcda6PT3WKisZcYDXsnEdnRv67Po3yCzFfaSoMjGZzJyD2c3DT1dg== +cacache@^12.0.3: + version "12.0.3" + resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390" + integrity sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw== dependencies: bluebird "^3.5.5" chownr "^1.1.1" @@ -1038,12 +1038,12 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= -copy-webpack-plugin@^5.0.3: - version "5.0.4" - resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.4.tgz#c78126f604e24f194c6ec2f43a64e232b5d43655" - integrity sha512-YBuYGpSzoCHSSDGyHy6VJ7SHojKp6WHT4D7ItcQFNAYx2hrwkMe56e97xfVR0/ovDuMTrMffXUiltvQljtAGeg== +copy-webpack-plugin@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz#5481a03dea1123d88a988c6ff8b78247214f0b88" + integrity sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg== dependencies: - cacache "^11.3.3" + cacache "^12.0.3" find-cache-dir "^2.1.0" glob-parent "^3.1.0" globby "^7.1.1" @@ -1051,9 +1051,9 @@ copy-webpack-plugin@^5.0.3: loader-utils "^1.2.3" minimatch "^3.0.4" normalize-path "^3.0.0" - p-limit "^2.2.0" + p-limit "^2.2.1" schema-utils "^1.0.0" - serialize-javascript "^1.7.0" + serialize-javascript "^2.1.2" webpack-log "^2.0.0" core-util-is@~1.0.0: @@ -2751,7 +2751,7 @@ js-tokens@^4.0.0: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== -js-yaml@^3.13.0: +js-yaml@^3.13.0, js-yaml@^3.13.1: version "3.13.1" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847" integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw== @@ -2759,7 +2759,7 @@ js-yaml@^3.13.0: argparse "^1.0.7" esprima "^4.0.0" -json-parse-better-errors@^1.0.2: +json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9" integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw== @@ -4929,10 +4929,10 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" -webcomponents.js-2@^0.7.24: +webcomponents.js@^0.7.24: version "0.7.24" - resolved "https://registry.yarnpkg.com/webcomponents.js-2/-/webcomponents.js-2-0.7.24.tgz#c0ffef99749c3970aa3ae71363ea6f0a40bcada6" - integrity sha1-wP/vmXScOXCqOucTY+pvCkC8raY= + resolved "https://registry.yarnpkg.com/webcomponents.js/-/webcomponents.js-0.7.24.tgz#2116fbfa1468ec416a7befdaa333e1d118f69c04" + integrity sha1-IRb7+hRo7EFqe+/aozPh0Rj2nAQ= webpack-cli@^3.3.9: version "3.3.9"