From d58f2e8ec443a8894aa7317cfcae92a066ecb3c2 Mon Sep 17 00:00:00 2001 From: edvwib Date: Tue, 20 Dec 2022 23:30:39 +0100 Subject: [PATCH] Enable Stylelint rules for vendor prefixes This commit also removes a bunch of vendor prefixes that were in the styles but are no longer needed since PostCSS and Autoprefixer handles generating them. --- .stylelintrc.json | 5 + CONTRIBUTORS.md | 1 + src/assets/css/dashboard.scss | 41 +--- src/assets/css/librarybrowser.scss | 9 +- src/assets/css/metadataeditor.scss | 4 - src/assets/css/scrollstyles.scss | 3 - src/assets/css/videoosd.scss | 48 ----- src/components/filterdialog/style.scss | 1 - src/components/homesections/homesections.scss | 2 - src/components/indicators/indicators.scss | 4 - src/components/loading/loading.scss | 200 ------------------ .../remotecontrol/remotecontrol.scss | 42 ---- src/components/subtitlesync/subtitlesync.scss | 2 - src/elements/emby-button/emby-button.scss | 6 - src/elements/emby-checkbox/emby-checkbox.scss | 13 -- src/elements/emby-input/emby-input.scss | 2 - src/elements/emby-radio/emby-radio.scss | 11 - src/elements/emby-select/emby-select.scss | 4 - src/elements/emby-slider/emby-slider.scss | 21 +- src/elements/emby-tabs/emby-tabs.scss | 2 - src/elements/emby-toggle/emby-toggle.scss | 7 - src/index.html | 12 -- src/libraries/navdrawer/navdrawer.scss | 15 -- src/themes/appletv/theme.css | 9 - src/themes/blueradiance/theme.css | 9 - src/themes/dark/theme.css | 5 - src/themes/light/theme.css | 6 - src/themes/purplehaze/theme.css | 8 - src/themes/wmc/theme.css | 11 - 29 files changed, 14 insertions(+), 489 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 78232b3f0..0e7a31f32 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -13,6 +13,7 @@ "at-rule-name-case": "lower", "at-rule-name-space-after": "always-single-line", "at-rule-no-unknown": true, + "at-rule-no-vendor-prefix": true, "at-rule-semicolon-newline-after": "always", "block-closing-brace-empty-line-before": "never", "block-closing-brace-newline-after": "always", @@ -77,6 +78,7 @@ "media-feature-colon-space-before": "never", "media-feature-name-case": "lower", "media-feature-name-no-unknown": true, + "media-feature-name-no-vendor-prefix": true, "media-feature-parentheses-space-inside": "never", "media-feature-range-operator-space-after": "always", "media-feature-range-operator-space-before": "always", @@ -103,6 +105,7 @@ ] } ], + "property-no-vendor-prefix": true, "rule-empty-line-before": [ "always-multi-line", { "except": ["first-nested"], "ignore": ["after-comment"] @@ -116,6 +119,7 @@ "selector-list-comma-newline-after": "always", "selector-list-comma-space-before": "never", "selector-max-empty-lines": 0, + "selector-no-vendor-prefix": true, "selector-pseudo-class-case": "lower", "selector-pseudo-class-no-unknown": true, "selector-pseudo-class-parentheses-space-inside": "never", @@ -134,6 +138,7 @@ "string-no-newline": true, "unit-case": "lower", "unit-no-unknown": true, + "value-no-vendor-prefix": true, "value-list-comma-newline-after": "always-multi-line", "value-list-comma-space-after": "always-single-line", "value-list-comma-space-before": "never", diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 2368a5431..bdb879fee 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -57,6 +57,7 @@ - [Meet Pandya](https://github.com/meet-k-pandya) - [Peter Spenler](https://github.com/peterspenler) - [Vankerkom](https://github.com/vankerkom) + - [edvwib](https://github.com/edvwib) # Emby Contributors diff --git a/src/assets/css/dashboard.scss b/src/assets/css/dashboard.scss index 8d32ec2c8..d2866c0ee 100644 --- a/src/assets/css/dashboard.scss +++ b/src/assets/css/dashboard.scss @@ -1,8 +1,6 @@ .dashboardColumn, .dashboardSections { flex-direction: column; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; } .dashboardFooter { @@ -16,8 +14,6 @@ progress { appearance: none; - -moz-appearance: none; - -webkit-appearance: none; margin: 0; background: #ccc !important; } @@ -81,8 +77,7 @@ a[data-role=button] { background: #292929 !important; background-clip: padding-box; -webkit-font-smoothing: antialiased; - -webkit-user-select: none; - -webkit-background-clip: padding-box; + user-select: none; cursor: pointer !important; font-family: inherit !important; font-weight: 500 !important; @@ -96,23 +91,17 @@ a[data-role=button] { div[data-role=controlgroup] a[data-role=button] { display: inline-block !important; margin: 0 !important; - -webkit-box-shadow: none !important; box-shadow: none !important; - -webkit-border-radius: 0; border-radius: 0; } div[data-role=controlgroup] a[data-role=button]:first-child { - -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 { - -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; } @@ -191,23 +180,14 @@ div[data-role=controlgroup] a.ui-btn-active { } .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; } @@ -216,7 +196,6 @@ div[data-role=controlgroup] a.ui-btn-active { } .sessionNowPlayingContent { - -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; @@ -233,7 +212,6 @@ div[data-role=controlgroup] a.ui-btn-active { } .dashboardSection { - -webkit-flex-shrink: 0; flex-shrink: 0; margin: 0 0 2em; } @@ -433,7 +411,6 @@ div[data-role=controlgroup] a.ui-btn-active { } .disabledUser { - -webkit-filter: grayscale(100%); filter: grayscale(100%); } @@ -449,37 +426,21 @@ div[data-role=controlgroup] a.ui-btn-active { 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 { - -webkit-transform: rotate(0); transform: rotate(0); } to { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .rotatingCircle { - -webkit-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; } .pluginPreviewImg { - -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); } diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index 58cf9b39e..0d7cbf6f6 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -82,7 +82,6 @@ .headerSelectedPlayer, .itemMiscInfo, .navMenuOptionText { - -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } @@ -1529,13 +1528,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { .detail-clamp-text { overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 12; - -webkit-box-orient: vertical; + display: flex; + flex-direction: column; + line-clamp: 12; } @media all and (min-width: 40em) { .detail-clamp-text { - -webkit-line-clamp: 6; + line-clamp: 6; } } diff --git a/src/assets/css/metadataeditor.scss b/src/assets/css/metadataeditor.scss index 9521728a6..49103275f 100644 --- a/src/assets/css/metadataeditor.scss +++ b/src/assets/css/metadataeditor.scss @@ -34,17 +34,13 @@ .jstree-wholerow-hovered { background: #38c !important; - -webkit-border-radius: 0 !important; border-radius: 0 !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; } diff --git a/src/assets/css/scrollstyles.scss b/src/assets/css/scrollstyles.scss index 67c620225..b7640926e 100644 --- a/src/assets/css/scrollstyles.scss +++ b/src/assets/css/scrollstyles.scss @@ -1,6 +1,5 @@ .scrollX { overflow-x: auto; - -webkit-overflow-scrolling: touch; overflow-y: hidden; white-space: nowrap; } @@ -27,13 +26,11 @@ .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; } diff --git a/src/assets/css/videoosd.scss b/src/assets/css/videoosd.scss index ff5e94e72..b7f06c08d 100644 --- a/src/assets/css/videoosd.scss +++ b/src/assets/css/videoosd.scss @@ -1,9 +1,6 @@ .chapterThumbTextContainer, .videoOsdBottom { user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; } .videoOsdBottom { @@ -53,17 +50,13 @@ } .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; } .chapterThumb { background-position: center center; - -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; border: 0; @@ -117,13 +110,8 @@ .videoOsdBottom .buttons { padding: 0.25em 0 0; - display: -webkit-box; - display: -webkit-flex; display: flex; - -webkit-flex-wrap: wrap; flex-wrap: wrap; - -webkit-box-align: center; - -webkit-align-items: center; align-items: center; [dir="rtl"] & { @@ -133,33 +121,24 @@ .osdVolumeSliderContainer { width: 9em; - -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 1em 0 0.29em; display: flex; - -webkit-align-items: center; align-items: center; } .osdTimeText { margin-left: 1em; margin-right: auto; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -170,7 +149,6 @@ .osdMediaInfo { display: flex; - -webkit-align-items: center; align-items: center; } @@ -179,23 +157,14 @@ } .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: 0.7em; padding-left: 0.5em; } .osdMainTextContainer { - -webkit-box-align: baseline; - -webkit-align-items: baseline; align-items: baseline; } @@ -203,30 +172,13 @@ 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% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .osdMediaStatus .animate { - -webkit-animation: spin 4s linear infinite; - -moz-animation: spin 4s linear infinite; animation: spin 4s linear infinite; } diff --git a/src/components/filterdialog/style.scss b/src/components/filterdialog/style.scss index f05ef2e4a..3dcd418b4 100644 --- a/src/components/filterdialog/style.scss +++ b/src/components/filterdialog/style.scss @@ -5,7 +5,6 @@ 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; diff --git a/src/components/homesections/homesections.scss b/src/components/homesections/homesections.scss index 2a119c098..5225ead7c 100644 --- a/src/components/homesections/homesections.scss +++ b/src/components/homesections/homesections.scss @@ -12,13 +12,11 @@ .homeLibraryIcon { 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; } diff --git a/src/components/indicators/indicators.scss b/src/components/indicators/indicators.scss index 3130150d3..29137a5df 100644 --- a/src/components/indicators/indicators.scss +++ b/src/components/indicators/indicators.scss @@ -21,7 +21,6 @@ .indicator { border-radius: 100em; - display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -56,7 +55,6 @@ .countIndicator { border-radius: 100em; - display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -68,7 +66,6 @@ .playedIndicator { border-radius: 100em; - display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -80,7 +77,6 @@ .videoIndicator { background: #444; border-radius: 100em; - display: -webkit-flex; display: flex; align-items: center; justify-content: center; diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss index 170bcd1ee..9d184e7f2 100644 --- a/src/components/loading/loading.scss +++ b/src/components/loading/loading.scss @@ -7,20 +7,11 @@ .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); } } @@ -37,7 +28,6 @@ } .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; } @@ -46,7 +36,6 @@ } .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; } @@ -55,7 +44,6 @@ } .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; } @@ -64,90 +52,39 @@ } .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; } -@-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); } } @@ -161,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; @@ -213,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; @@ -257,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; @@ -301,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; @@ -353,7 +198,6 @@ border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; - -webkit-animation: none; animation: none; position: absolute; top: 0; @@ -377,91 +221,47 @@ .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; } -@-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/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss index c05a0b7a3..aa8714e8d 100644 --- a/src/components/remotecontrol/remotecontrol.scss +++ b/src/components/remotecontrol/remotecontrol.scss @@ -3,14 +3,8 @@ } .nowPlayingInfoContainer { - display: -webkit-box; - display: -webkit-flex; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; flex-direction: row; - -webkit-flex-shrink: 0; flex-shrink: 0; } @@ -65,7 +59,6 @@ .infoContainer, .sliderContainer { - -webkit-flex-shrink: 0; flex-shrink: 0; } @@ -85,27 +78,19 @@ } .nowPlayingInfoButtons { - display: -webkit-box; - display: -webkit-flex; display: flex; - -webkit-box-align: center; - -webkit-align-items: center; align-items: center; - -webkit-flex-shrink: 0; flex-shrink: 0; } .nowPlayingInfoControls, .nowPlayingTime { display: flex; - display: -webkit-box; - display: -webkit-flex; } .nowPlayingPageImageContainer { width: 16%; position: relative; - -webkit-flex-shrink: 0; flex-shrink: 0; [dir="ltr"] & { @@ -138,16 +123,9 @@ } .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; - -webkit-box-pack: center; - -webkit-justify-content: center; justify-content: center; } @@ -158,14 +136,9 @@ right: 0; margin: 0 auto; width: 100%; - -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; border-radius: 0.2em; user-select: none; - -moz-user-select: none; - -webkit-user-drag: none; - -webkit-user-select: none; - -ms-user-select: none; } .contextMenuList { @@ -307,12 +280,7 @@ } .nowPlayingInfoContainer { - -webkit-box-orient: vertical !important; - -webkit-box-direction: normal !important; - -webkit-flex-direction: column !important; flex-direction: column !important; - -webkit-box-align: center; - -webkit-align-items: center; align-items: center; width: 100%; height: calc(100% - 4.2em); @@ -339,8 +307,6 @@ } .nowPlayingInfoButtons { - -webkit-box-pack: center; - -webkit-justify-content: center; justify-content: center; font-size: 1.5em; margin-left: -0.5em; @@ -369,14 +335,10 @@ flex-shrink: 1; margin: 0.5em 0 0; width: 100%; - -webkit-box-pack: start !important; - -webkit-justify-content: start !important; justify-content: start !important; } .nowPlayingSecondaryButtons { - -webkit-box-pack: center; - -webkit-justify-content: center; justify-content: center; } @@ -467,8 +429,6 @@ .nowPlayingTime { display: flex; - -webkit-box-align: center; - -webkit-align-items: center; align-items: center; margin: 0 1em; } @@ -479,13 +439,11 @@ .smallBackdropPosterItem .cardOverlayInner > div { white-space: nowrap; - -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .playlistIndexIndicatorImage { - -webkit-background-size: initial initial !important; background-size: initial !important; background-image: url(../../assets/img/equalizer.gif) !important; } diff --git a/src/components/subtitlesync/subtitlesync.scss b/src/components/subtitlesync/subtitlesync.scss index a63d9915b..b0c3d6a75 100644 --- a/src/components/subtitlesync/subtitlesync.scss +++ b/src/components/subtitlesync/subtitlesync.scss @@ -46,8 +46,6 @@ margin-right: 1%; top: 2.5em; height: 1.4em; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; flex-grow: 1; border-radius: 0.3em; z-index: 1; diff --git a/src/elements/emby-button/emby-button.scss b/src/elements/emby-button/emby-button.scss index c4df43301..d89b83cf6 100644 --- a/src/elements/emby-button/emby-button.scss +++ b/src/elements/emby-button/emby-button.scss @@ -12,9 +12,6 @@ /* 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; @@ -97,9 +94,6 @@ 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; diff --git a/src/elements/emby-checkbox/emby-checkbox.scss b/src/elements/emby-checkbox/emby-checkbox.scss index d2b6aa390..5007b9de9 100644 --- a/src/elements/emby-checkbox/emby-checkbox.scss +++ b/src/elements/emby-checkbox/emby-checkbox.scss @@ -39,9 +39,6 @@ margin: 0; padding: 0; opacity: 0; - -ms-appearance: none; - -moz-appearance: none; - -webkit-appearance: none; appearance: none; border: none; } @@ -130,13 +127,3 @@ padding: 0; } } - -@-webkit-keyframes repaintChrome { - from { - padding: 0; - } - - to { - padding: 0; - } -} diff --git a/src/elements/emby-input/emby-input.scss b/src/elements/emby-input/emby-input.scss index c71069981..d8923313f 100644 --- a/src/elements/emby-input/emby-input.scss +++ b/src/elements/emby-input/emby-input.scss @@ -10,7 +10,6 @@ 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); @@ -69,6 +68,5 @@ } .emby-input-iconbutton { - -webkit-align-self: flex-end; align-self: flex-end; } diff --git a/src/elements/emby-radio/emby-radio.scss b/src/elements/emby-radio/emby-radio.scss index 5f743c9d7..5f2c018f2 100644 --- a/src/elements/emby-radio/emby-radio.scss +++ b/src/elements/emby-radio/emby-radio.scss @@ -23,9 +23,6 @@ margin: 0; padding: 0; opacity: 0; - -ms-appearance: none; - -moz-appearance: none; - -webkit-appearance: none; appearance: none; border: none; } @@ -77,16 +74,12 @@ .mdl-radio__inner-circle { transition-duration: 0.2s; - transition-property: -webkit-transform; transition-property: transform; - transition-property: transform, -webkit-transform; - -webkit-transform: scale(0); transform: scale(0); transform-origin: 50% 50%; } .mdl-radio__button:checked + .mdl-radio__circles .mdl-radio__inner-circle { - -webkit-transform: scale(1); transform: scale(1); } @@ -110,15 +103,11 @@ background: #00a4dc; opacity: 0.26; transition-duration: 0.2s; - transition-property: -webkit-transform; transition-property: transform; - transition-property: transform, -webkit-transform; - -webkit-transform: scale(0); transform: scale(0); } .mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle { - -webkit-transform: scale(1.75); transform: scale(1.75); } diff --git a/src/elements/emby-select/emby-select.scss b/src/elements/emby-select/emby-select.scss index 62205c8b9..d909e8af6 100644 --- a/src/elements/emby-select/emby-select.scss +++ b/src/elements/emby-select/emby-select.scss @@ -31,8 +31,6 @@ background: none !important; border-color: transparent !important; color: inherit !important; - -webkit-appearance: none; - -moz-appearance: none; appearance: none; } @@ -59,7 +57,6 @@ .emby-select-focusscale { transition: transform 180ms ease-out !important; - -webkit-transform-origin: center center; transform-origin: center center; } @@ -99,7 +96,6 @@ } .emby-select-withcolor { - -webkit-appearance: none; appearance: none; border-radius: 0.2em; } diff --git a/src/elements/emby-slider/emby-slider.scss b/src/elements/emby-slider/emby-slider.scss index f40e6329d..a1d690b0f 100644 --- a/src/elements/emby-slider/emby-slider.scss +++ b/src/elements/emby-slider/emby-slider.scss @@ -1,26 +1,11 @@ -:-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 */ 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; @@ -68,7 +53,7 @@ } .mdl-slider::-webkit-slider-thumb { - -webkit-appearance: none; + appearance: none; width: 1.08em; height: 1.08em; box-sizing: border-box; @@ -88,7 +73,7 @@ } .mdl-slider::-moz-range-thumb { - -moz-appearance: none; + appearance: none; width: 1.08em; height: 1.08em; box-sizing: border-box; @@ -108,7 +93,7 @@ } .mdl-slider::-ms-thumb { - -webkit-appearance: none; + appearance: none; width: 1.4em; height: 1.4em; box-sizing: border-box; diff --git a/src/elements/emby-tabs/emby-tabs.scss b/src/elements/emby-tabs/emby-tabs.scss index fe29f4614..6fea11f43 100644 --- a/src/elements/emby-tabs/emby-tabs.scss +++ b/src/elements/emby-tabs/emby-tabs.scss @@ -1,6 +1,4 @@ .emby-tab-button { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; background: transparent; box-shadow: none; diff --git a/src/elements/emby-toggle/emby-toggle.scss b/src/elements/emby-toggle/emby-toggle.scss index b4583336a..505d2b367 100644 --- a/src/elements/emby-toggle/emby-toggle.scss +++ b/src/elements/emby-toggle/emby-toggle.scss @@ -10,9 +10,6 @@ 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; @@ -28,9 +25,6 @@ margin: 0; padding: 0; opacity: 0; - -ms-appearance: none; - -moz-appearance: none; - -webkit-appearance: none; appearance: none; border: none; } @@ -96,7 +90,6 @@ position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; box-sizing: border-box; diff --git a/src/index.html b/src/index.html index 667246288..6d58a3dcd 100644 --- a/src/index.html +++ b/src/index.html @@ -126,16 +126,6 @@ left: 0; } - @-webkit-keyframes fadein { - from { - opacity: 0; - } - - to { - opacity: 1; - } - } - @keyframes fadein { from { opacity: 0; @@ -147,7 +137,6 @@ } .splashLogo { - -webkit-animation: fadein 0.5s; animation: fadein 0.5s; width: 30%; height: 30%; @@ -158,7 +147,6 @@ position: fixed; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } diff --git a/src/libraries/navdrawer/navdrawer.scss b/src/libraries/navdrawer/navdrawer.scss index 1f475ce13..d990137de 100644 --- a/src/libraries/navdrawer/navdrawer.scss +++ b/src/libraries/navdrawer/navdrawer.scss @@ -11,16 +11,10 @@ .touch-menu-la { 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; [div="rtl"] & { - -webkit-transition: -webkit-transform ease-out 40ms, right ease-out 260ms; - -o-transition: transform ease-out 40ms, right ease-out 260ms; transition: transform ease-out 40ms, right ease-out 260ms; } @@ -28,25 +22,18 @@ } .touch-menu-la.transition { - -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; [div="rtl"] & { - -webkit-transition: -webkit-transform ease-out 240ms, right ease-out 260ms; - -o-transition: transform ease-out 240ms, right ease-out 260ms; transition: transform ease-out 240ms, right ease-out 260ms; } } .drawer-open { - -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4); box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4); } .scrollContainer { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; flex-grow: 1; } @@ -55,8 +42,6 @@ right: 0; opacity: 0; z-index: 1098; - -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, 0.3); diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index b2e104237..86f7e9373 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -51,14 +51,10 @@ html { .nowPlayingPlaylist, .nowPlayingContextMenu { background: #d5e9f2; - -webkit-background-size: 100% 100%; background-size: 100% 100%; } .backgroundContainer.withBackdrop { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 212, 222, 0.94)), color-stop(rgba(235, 250, 254, 0.94)), color-stop(rgba(227, 220, 212, 0.94)), color-stop(rgba(206, 214, 216, 0.94)), to(rgba(192, 211, 218, 0.94))); - background: -webkit-linear-gradient(top, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94)); - background: -o-linear-gradient(top, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94)); background: linear-gradient(to bottom, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94)); } @@ -209,9 +205,6 @@ a[data-role=button] { .playlistSectionButton { color: rgba(0, 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); } @@ -294,7 +287,6 @@ a[data-role=button] { color: inherit; background: rgba(255, 255, 255, 0.9); border: 0.16em solid rgba(0, 0, 0, 0.158); - -webkit-border-radius: 0.2em; border-radius: 0.2em; } @@ -460,7 +452,6 @@ a[data-role=button] { color: #000; background: #fff3a5; padding: 1em; - -webkit-border-radius: 0.25em; border-radius: 0.25em; } diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index 5c41ec66f..fefc10297 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -25,7 +25,6 @@ html { } .skinHeader.semiTransparent { - -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background-color: rgba(0, 0, 0, 0.3); @@ -52,7 +51,6 @@ html { .backgroundContainer { background: url(bg.jpg) center top no-repeat #033361; - -webkit-background-size: cover; background-size: cover; } @@ -238,9 +236,6 @@ a[data-role=button] { .detailRibbon { 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); } @@ -291,7 +286,6 @@ a[data-role=button] { color: inherit; background: rgba(0, 0, 0, 0.5); border: 0.16em solid transparent; - -webkit-border-radius: 0.2em; border-radius: 0.2em; } @@ -450,7 +444,6 @@ a[data-role=button] { color: #ddd; background: #111; padding: 1em; - -webkit-border-radius: 0.25em; border-radius: 0.25em; } @@ -485,7 +478,6 @@ a[data-role=button] { } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } @@ -502,7 +494,6 @@ a[data-role=button] { ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { border-radius: 2px; - -webkit-border-radius: 2px; background: center no-repeat #888; } diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 6b7de5dd0..4901458f6 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -25,7 +25,6 @@ html { } .skinHeader.semiTransparent { - -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(0, 0, 0, 0.4); } @@ -260,7 +259,6 @@ html { color: inherit; background: #292929; border: 0.16em solid #292929; - -webkit-border-radius: 0.2em; border-radius: 0.2em; } @@ -416,7 +414,6 @@ html { color: #ddd; background: #111; padding: 1em; - -webkit-border-radius: 0.25em; border-radius: 0.25em; } @@ -443,7 +440,6 @@ html { } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } @@ -460,7 +456,6 @@ html { ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { border-radius: 2px; - -webkit-border-radius: 2px; background: center no-repeat #888; } diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index 4b2d0866f..c614e1a8c 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -30,12 +30,10 @@ html { } .osdHeader { - -webkit-box-shadow: none !important; box-shadow: none !important; } .skinHeader.semiTransparent { - -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(0, 0, 0, 0.4); } @@ -289,7 +287,6 @@ a[data-role=button] { color: inherit; background: #fff; border: 0.16em solid rgba(0, 0, 0, 0.158); - -webkit-border-radius: 0.2em; border-radius: 0.2em; } @@ -441,7 +438,6 @@ a[data-role=button] { color: #000; background: #fff3a5; padding: 1em; - -webkit-border-radius: 0.25em; border-radius: 0.25em; } @@ -476,7 +472,6 @@ a[data-role=button] { } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } @@ -489,7 +484,6 @@ a[data-role=button] { ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { border-radius: 2px; - -webkit-border-radius: 2px; background: center no-repeat #999; } diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index cedfcf23d..69148a36c 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -21,7 +21,6 @@ html { } .skinHeader.semiTransparent { - -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background-color: rgba(0, 0, 0, 0.3); @@ -48,7 +47,6 @@ html { .backgroundContainer { background: url(bg.jpg) center top no-repeat #030322; - -webkit-background-size: cover; background-size: cover; } @@ -321,8 +319,6 @@ a[data-role=button] { .detailRibbon { 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%); } @@ -373,7 +369,6 @@ a[data-role=button] { color: inherit; background: rgba(0, 0, 0, 0.5); border: 0.16em solid transparent; - -webkit-border-radius: 0.2em; border-radius: 0.2em; } @@ -546,7 +541,6 @@ a[data-role=button] { color: #0e0f2d; background: #dbe6ff; padding: 1em; - -webkit-border-radius: 0.25em; border-radius: 0.25em; } @@ -598,7 +592,6 @@ a[data-role=button] { } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } @@ -615,7 +608,6 @@ a[data-role=button] { ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { border-radius: 2px; - -webkit-border-radius: 2px; background: center no-repeat #888; } diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index 25fa6daf4..8a44d81b3 100644 --- a/src/themes/wmc/theme.css +++ b/src/themes/wmc/theme.css @@ -31,7 +31,6 @@ html { } .skinHeader.semiTransparent { - -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background-color: rgba(0, 0, 0, 0.3); @@ -53,9 +52,6 @@ html { .dialog, .nowPlayingPlaylist, .nowPlayingContextMenu { - 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); background-color: #0f3562; } @@ -190,9 +186,6 @@ a[data-role=button] { .formDialogFooter:not(.formDialogFooter-clear), .playlistSectionButton { 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, 0.78); } @@ -274,7 +267,6 @@ a[data-role=button] { color: inherit; background: rgba(255, 255, 255, 0.2); border: 0.16em solid rgba(255, 255, 255, 0.135); - -webkit-border-radius: 0.2em; border-radius: 0.2em; } @@ -431,7 +423,6 @@ a[data-role=button] { color: #000; background: #fff3a5; padding: 1em; - -webkit-border-radius: 0.25em; border-radius: 0.25em; } @@ -467,7 +458,6 @@ a[data-role=button] { ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-track-piece { @@ -483,7 +473,6 @@ a[data-role=button] { ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { border-radius: 2px; - -webkit-border-radius: 2px; background: center no-repeat rgba(255, 255, 255, 0.7); }