diff --git a/src/components/emby-button/emby-button.css b/src/components/emby-button/emby-button.css index 25141eaa21..38d62b1299 100644 --- a/src/components/emby-button/emby-button.css +++ b/src/components/emby-button/emby-button.css @@ -21,7 +21,6 @@ outline: none !important; position: relative; font-weight: 600; - /* Disable webkit tap highlighting */ text-decoration: none; /* Not crazy about this but it normalizes heights between anchors and buttons */ line-height: 1.35; @@ -111,7 +110,6 @@ position: relative; overflow: hidden; border-radius: 50%; - /* Disable webkit tap highlighting */ justify-content: center; transform-origin: center; transition: 0.2s; diff --git a/src/components/emby-checkbox/emby-checkbox.css b/src/components/emby-checkbox/emby-checkbox.css index 319565b0ef..4e27928e2a 100644 --- a/src/components/emby-checkbox/emby-checkbox.css +++ b/src/components/emby-checkbox/emby-checkbox.css @@ -112,7 +112,7 @@ margin-bottom: .25em; } -@-webkit-keyframes repaintChrome { +@keyframes repaintChrome { from { padding: 0; } diff --git a/src/components/emby-radio/emby-radio.css b/src/components/emby-radio/emby-radio.css index 0db9641b87..6b8575bc86 100644 --- a/src/components/emby-radio/emby-radio.css +++ b/src/components/emby-radio/emby-radio.css @@ -68,7 +68,6 @@ transition-duration: 0.28s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform; - transition-property: transform, -webkit-transform; transform: scale3d(0, 0, 0); border-radius: 50%; background: #00a4dc; diff --git a/src/components/emby-slider/emby-slider.css b/src/components/emby-slider/emby-slider.css index c442d110ac..1ca441188a 100644 --- a/src/components/emby-slider/emby-slider.css +++ b/src/components/emby-slider/emby-slider.css @@ -16,7 +16,6 @@ _:-ms-input-placeholder { z-index: 1; cursor: pointer; margin: 0; - /* Disable webkit tap highlighting */ display: block; } @@ -60,7 +59,7 @@ _:-ms-input-placeholder { } .mdl-slider::-webkit-slider-thumb { - -webkit-appearance: none; + appearance: none; width: 1.2em; height: 1.2em; box-sizing: border-box; @@ -99,7 +98,7 @@ _:-ms-input-placeholder { } .mdl-slider::-ms-thumb { - -webkit-appearance: none; + appearance: none; width: 1.8em; height: 1.8em; box-sizing: border-box; diff --git a/src/components/loading/loading.css b/src/components/loading/loading.css index c98d071e3d..e3f10c0e2e 100644 --- a/src/components/loading/loading.css +++ b/src/components/loading/loading.css @@ -10,12 +10,6 @@ animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; } -@-webkit-keyframes mdl-spinner__container-rotate { - to { - transform: rotate(360deg); - } -} - @keyframes mdl-spinner__container-rotate { to { transform: rotate(360deg); @@ -61,40 +55,6 @@ 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; } -@-webkit-keyframes mdl-spinner__fill-unfill-rotate { - 12.5% { - transform: rotate(135deg); - } - - 25% { - transform: rotate(270deg); - } - - 37.5% { - transform: rotate(405deg); - } - - 50% { - transform: rotate(540deg); - } - - 62.5% { - transform: rotate(675deg); - } - - 75% { - transform: rotate(810deg); - } - - 87.5% { - transform: rotate(945deg); - } - - to { - transform: rotate(1080deg); - } -} - @keyframes mdl-spinner__fill-unfill-rotate { 12.5% { transform: rotate(135deg); @@ -138,32 +98,6 @@ * - 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; @@ -190,28 +124,6 @@ } } -@-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; @@ -234,28 +146,6 @@ } } -@-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; @@ -278,28 +168,6 @@ } } -@-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; @@ -370,20 +238,6 @@ animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } -@-webkit-keyframes mdl-spinner__left-spin { - from { - transform: rotate(130deg); - } - - 50% { - transform: rotate(-5deg); - } - - to { - transform: rotate(130deg); - } -} - @keyframes mdl-spinner__left-spin { from { transform: rotate(130deg); @@ -398,20 +252,6 @@ } } -@-webkit-keyframes mdl-spinner__right-spin { - from { - transform: rotate(-130deg); - } - - 50% { - transform: rotate(5deg); - } - - to { - transform: rotate(-130deg); - } -} - @keyframes mdl-spinner__right-spin { from { transform: rotate(-130deg); diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index bdaaeef594..76d4f834e2 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -23,6 +23,7 @@ .nowPlayingInfoControls, .nowPlayingTime { + display: flex; } .nowPlayingPageImageContainer { @@ -53,7 +54,7 @@ box-shadow: 0 0 1.9vh #000; border: .1em solid #222; user-drag: none; - user-select: none + user-select: none; } @media all and (orientation:portrait) and (max-width:50em) { diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css index fc102654c7..74f4b35e8e 100644 --- a/src/components/themes/appletv/theme.css +++ b/src/components/themes/appletv/theme.css @@ -23,17 +23,11 @@ html { .skinHeader-withBackground { color: rgba(0, 0, 0, .7); background: #303030; - background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB)); - background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB); - background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB); background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB) } -@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) { +@supports (backdrop-filter:blur(1.5em)) { .skinHeader-blurred { - background: -webkit-gradient(linear, left top, right top, from(rgba(188, 188, 188, .7)), color-stop(rgba(167, 180, 183, .7)), color-stop(rgba(190, 181, 165, .7)), color-stop(rgba(173, 190, 194, .7)), to(rgba(185, 199, 203, .7))); - background: -webkit-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7)); - background: -o-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7)); background: linear-gradient(to right, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7)); backdrop-filter: blur(1.5em) } @@ -58,9 +52,6 @@ html { } .backgroundContainer.withBackdrop { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 212, 222, .94)), color-stop(rgba(235, 250, 254, .94)), color-stop(rgba(227, 220, 212, .94)), color-stop(rgba(206, 214, 216, .94)), to(rgba(192, 211, 218, .94))); - background: -webkit-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94)); - background: -o-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94)); background: linear-gradient(to bottom, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94)) } @@ -197,13 +188,10 @@ html { .formDialogFooter:not(.formDialogFooter-clear) { color: rgba(0, 0, 0, .7); background: #303030; - background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB)); - background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB); - background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB); background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB) } -@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(24, 24, 24, .7); backdrop-filter: blur(20px) @@ -419,9 +407,6 @@ html { } .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) } diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css index 8764136fa4..a280eeff66 100644 --- a/src/components/themes/blueradiance/theme.css +++ b/src/components/themes/blueradiance/theme.css @@ -17,18 +17,12 @@ html { .skinHeader-withBackground { background: #303030; - background: -webkit-gradient(linear, left top, right top, from(#291A31), color-stop(#033664), color-stop(#011432), color-stop(#141A3A), to(#291A31)); - background: -webkit-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31); - background: -o-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31); background: linear-gradient(to right, #291A31, #033664, #011432, #141A3A, #291A31) } .skinHeader.semiTransparent { backdrop-filter: none !important; background-color: rgba(0, 0, 0, .3); - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); - background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) } @@ -179,7 +173,7 @@ html { color: rgba(255, 255, 255, .78) } -@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(24, 24, 24, .7); backdrop-filter: blur(20px) @@ -405,9 +399,6 @@ html { } .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) } @@ -446,6 +437,7 @@ html { } ::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } ::-webkit-scrollbar-track-piece { diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css index e5d0132e04..7c826b9a97 100644 --- a/src/components/themes/dark/theme.css +++ b/src/components/themes/dark/theme.css @@ -161,7 +161,7 @@ html { color: rgba(255, 255, 255, .78) } -@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(24, 24, 24, .7); backdrop-filter: blur(20px) @@ -383,9 +383,6 @@ html { } .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) } @@ -424,6 +421,7 @@ html { } ::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } ::-webkit-scrollbar-track-piece { diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css index 2d3e635e2d..bce2e738bb 100644 --- a/src/components/themes/emby/theme.css +++ b/src/components/themes/emby/theme.css @@ -161,7 +161,7 @@ html { color: rgba(255, 255, 255, .78) } -@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(24, 24, 24, .7); backdrop-filter: blur(20px) @@ -383,9 +383,6 @@ html { } .itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#1a1a1a)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #1a1a1a); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #1a1a1a); background: linear-gradient(rgba(0, 0, 0, 0), #1a1a1a) } diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css index 0fef58a17f..556e2cb5f6 100644 --- a/src/components/themes/light/theme.css +++ b/src/components/themes/light/theme.css @@ -186,7 +186,7 @@ html { color: rgba(255, 255, 255, .78) } -@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(24, 24, 24, .7); backdrop-filter: blur(20px) @@ -400,9 +400,6 @@ html { } .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) } diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css index 97097eff7d..c04c21f52d 100644 --- a/src/components/themes/purple-haze/theme.css +++ b/src/components/themes/purple-haze/theme.css @@ -17,18 +17,12 @@ html { .skinHeader-withBackground { background: #000420; - background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%); - background: -webkit-linear-gradient(left, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%); background: linear-gradient(to right, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000420', endColorstr='#000420',GradientType=1 ); } .skinHeader.semiTransparent { backdrop-filter: none !important; background-color: rgba(0, 0, 0, .3); - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); - background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) } @@ -267,7 +261,7 @@ a[data-role=button] { color: rgba(255, 255, 255, .78) } -@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(24, 24, 24, .7); backdrop-filter: blur(20px) @@ -498,9 +492,6 @@ a[data-role=button] { } .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) } diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css index 464056f1ca..21f5abf8f4 100644 --- a/src/components/themes/wmc/theme.css +++ b/src/components/themes/wmc/theme.css @@ -23,13 +23,10 @@ html { .formDialogHeader:not(.formDialogHeader-clear), .skinHeader-withBackground { background-color: #0C2450; - background: -webkit-gradient(linear, left top, left bottom, from(#0C2450), to(#081B3B)); - background: -webkit-linear-gradient(top, #0C2450, #081B3B); - background: -o-linear-gradient(top, #0C2450, #081B3B); background: linear-gradient(to bottom, #0C2450, #081B3B) } -@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) { +@supports (backdrop-filter:blur(1.5em)) { .skinHeader-blurred { background: rgba(20, 20, 20, .7); backdrop-filter: blur(1.5em) @@ -39,9 +36,6 @@ html { .skinHeader.semiTransparent { backdrop-filter: none !important; background-color: rgba(0, 0, 0, .3); - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); - background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) } @@ -52,9 +46,6 @@ html { .backgroundContainer, .dialog { background-color: #0F3562; - background: -webkit-gradient(linear, left top, left bottom, from(#0F3562), color-stop(#1162A4), to(#03215F)); - background: -webkit-linear-gradient(top, #0F3562, #1162A4, #03215F); - background: -o-linear-gradient(top, #0F3562, #1162A4, #03215F); background: linear-gradient(to bottom, #0F3562, #1162A4, #03215F) } @@ -176,14 +167,11 @@ html { .appfooter, .formDialogFooter:not(.formDialogFooter-clear) { background: #0C2450; - background: -webkit-gradient(linear, left bottom, left top, from(#0C2450), to(#081B3B)); - background: -webkit-linear-gradient(bottom, #0C2450, #081B3B); - background: -o-linear-gradient(bottom, #0C2450, #081B3B); background: linear-gradient(to top, #0C2450, #081B3B); color: rgba(255, 255, 255, .78) } -@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(24, 24, 24, .7); backdrop-filter: blur(20px) @@ -404,9 +392,6 @@ html { } .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) } diff --git a/src/css/dashboard.css b/src/css/dashboard.css index c39afcd373..d4928db691 100644 --- a/src/css/dashboard.css +++ b/src/css/dashboard.css @@ -403,16 +403,6 @@ a[data-role=button] { background: #292929 !important; } -@-webkit-keyframes rotating { - from { - transform: rotate(0) - } - - to { - transform: rotate(360deg) - } -} - @keyframes rotating { from { transform: rotate(0) diff --git a/src/css/site.css b/src/css/site.css index 895944f77f..6491799117 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -25,7 +25,7 @@ html { body { overflow-x: hidden; - background-color: transparent !important + background-color: transparent !important; } .mainAnimatedPage { diff --git a/src/css/videoosd.css b/src/css/videoosd.css index 9be46da4ea..f20abf9d07 100644 --- a/src/css/videoosd.css +++ b/src/css/videoosd.css @@ -172,9 +172,12 @@ margin-left: auto; } -@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } -@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } -@keyframes spin { 100% { transform:rotate(360deg); } } +@keyframes spin { + 100% { + transform:rotate(360deg); + } +} + .osdMediaStatus .animate { animation:spin 4s linear infinite; }