From 50d6864a681327b56f6397f7b2cbbf441daa31cf Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Thu, 9 Jan 2020 19:35:19 +0100 Subject: [PATCH] Revert vendor prefix removal --- src/assets/css/dashboard.css | 49 ++++- src/assets/css/fonts.css | 1 + src/assets/css/librarybrowser.css | 129 +++++++++-- src/assets/css/metadataeditor.css | 4 + src/assets/css/scrollstyles.css | 17 +- src/assets/css/site.css | 6 + src/assets/css/videoosd.css | 67 +++++- src/components/cardbuilder/card.css | 9 +- src/components/dialogHelper/dialoghelper.css | 1 + src/components/filterdialog/style.css | 1 + src/components/homesections/homesections.css | 2 + src/components/htmlvideoplayer/style.css | 1 + src/components/images/style.css | 12 ++ src/components/indicators/indicators.css | 4 + src/components/loading/loading.css | 204 +++++++++++++++++- src/components/navdrawer/navdrawer.css | 11 + .../remotecontrol/remotecontrol.css | 48 ++++- src/components/slideshow/style.css | 3 + src/components/subtitlesync/subtitlesync.css | 2 + src/components/upnextdialog/upnextdialog.css | 5 + src/elements/emby-button/emby-button.css | 10 + src/elements/emby-checkbox/emby-checkbox.css | 5 +- src/elements/emby-input/emby-input.css | 3 + src/elements/emby-radio/emby-radio.css | 7 + src/elements/emby-select/emby-select.css | 5 + src/elements/emby-slider/emby-slider.css | 16 +- src/elements/emby-textarea/emby-textarea.css | 1 + src/elements/emby-toggle/emby-toggle.css | 8 + src/themes/appletv/theme.css | 20 ++ src/themes/blueradiance/theme.css | 23 +- src/themes/dark/theme.css | 14 +- src/themes/light/theme.css | 12 ++ src/themes/purplehaze/theme.css | 23 +- src/themes/wmc/theme.css | 26 ++- 34 files changed, 698 insertions(+), 51 deletions(-) diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css index d4928db691..1c69dfccb4 100644 --- a/src/assets/css/dashboard.css +++ b/src/assets/css/dashboard.css @@ -1,6 +1,7 @@ .dashboardColumn, .dashboardSections { - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal } .dashboardFooter { @@ -14,6 +15,8 @@ progress { appearance: none; + -moz-appearance: none; + -webkit-appearance: none; margin: 0; background: #ccc !important } @@ -73,17 +76,23 @@ progress[aria-valuenow]:before { 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: .3125em; border-bottom-left-radius: .3125em; + -webkit-border-top-left-radius: .3125em; border-top-left-radius: .3125em } div[data-role=controlgroup] a[data-role=button]:last-child { + -webkit-border-bottom-right-radius: .3125em; border-bottom-right-radius: .3125em; + -webkit-border-top-right-radius: .3125em; border-top-right-radius: .3125em } @@ -137,14 +146,23 @@ 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 } @@ -153,6 +171,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .dashboardSection { + -webkit-flex-shrink: 0; flex-shrink: 0; margin: 0 0 2em } @@ -168,7 +187,11 @@ div[data-role=controlgroup] a.ui-btn-active { @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 } @@ -273,6 +296,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .sessionNowPlayingContent { + -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; @@ -371,6 +395,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .disabledUser { + -webkit-filter: grayscale(100%); filter: grayscale(100%) } @@ -391,7 +416,9 @@ 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; cursor: pointer !important; font-family: inherit !important; font-weight: 500 !important; @@ -403,21 +430,37 @@ a[data-role=button] { background: #292929 !important; } -@keyframes rotating { +@-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 .0725em .29em 0 rgba(0, 0, 0, .37); box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37) } diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css index da5515fc1e..12f1eaf4b7 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.css @@ -4,6 +4,7 @@ html { html { font-size: 93%; + -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index b9f406bc0d..c03cc2691f 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -15,6 +15,7 @@ .headerSelectedPlayer, .itemMiscInfo, .navMenuOptionText { + -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden } @@ -47,6 +48,8 @@ z-index: 1; margin: 0 !important; top: 6.9em !important; + -webkit-transition: -webkit-transform .2s ease-out; + -o-transition: transform .2s ease-out; transition: transform .2s ease-out } @@ -55,14 +58,17 @@ } .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 } .headerUserButtonRound div { + -webkit-border-radius: 100em; border-radius: 100em; background-size: cover; background-repeat: no-repeat; @@ -70,6 +76,7 @@ } .headerButton { + -webkit-flex-shrink: 0; flex-shrink: 0 } @@ -83,25 +90,34 @@ } .pageTitle { + display: -webkit-inline-box; + display: -webkit-inline-flex; display: inline-flex; margin: .3em 0 0 .5em; height: 1.7em; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; + -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 @@ -121,7 +137,7 @@ .headerLeft, .headerRight { - justify-content: center; + -webkit-box-align: center } .hiddenViewMenuBar .skinHeader { @@ -134,7 +150,10 @@ .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; @@ -145,8 +164,13 @@ } .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 } @@ -155,19 +179,27 @@ } .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; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1; font-weight: 400 !important; margin: 0 !important; + -webkit-border-radius: 0 !important; border-radius: 0 !important } .navMenuOptionIcon { margin-right: 1.2em; + -webkit-flex-shrink: 0; flex-shrink: 0 } @@ -181,6 +213,8 @@ } .dashboardDocument .skinBody { + -webkit-transition: left ease-in-out .3s, padding ease-in-out .3s; + -o-transition: left ease-in-out .3s, padding ease-in-out .3s; transition: left ease-in-out .3s, padding ease-in-out .3s; position: absolute; top: 0; @@ -210,7 +244,9 @@ 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% @@ -247,9 +283,14 @@ } .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; @@ -307,6 +348,8 @@ } .flexPageTabContent.is-active { + display: -webkit-box !important; + display: -webkit-flex !important; display: flex !important } @@ -322,6 +365,7 @@ margin: 1.5em 0; background: #222; padding: .8em .8em .8em 3em; + -webkit-border-radius: .3em; border-radius: .3em; position: relative } @@ -380,6 +424,7 @@ } .itemBackdrop { + -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; @@ -443,15 +488,15 @@ } .detailImageContainer { - margin: 1.25em 0; - position: sticky; - top: 15%; - float: left; - width: 22.786458333333332vw; + width: 280px; + margin-right: 2em; + flex-shrink: 0; } .detailPagePrimaryContent { position: relative; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1 } @@ -459,8 +504,9 @@ width: 25em; height: 9.375em; position: absolute; - top: 14.5%; - right: 10.5%; + top: 13.5%; + right: 19.5%; + -webkit-background-size: contain; background-size: contain } @@ -489,8 +535,13 @@ } .itemDetailImage { - width: 100% !important; - box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); + width: 100%; + -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) { @@ -503,6 +554,19 @@ } } +@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 @@ -557,7 +621,8 @@ .detailButton-mobile, .mainDetailButtons { - display: flex; + display: -webkit-box; + display: -webkit-flex } .itemName { @@ -578,7 +643,10 @@ .mainDetailButtons { display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; + -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 1em 0; } @@ -586,6 +654,7 @@ .recordingFields button { margin-left: 0; margin-right: .5em; + -webkit-flex-shrink: 0; flex-shrink: 0 } @@ -596,7 +665,11 @@ .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 @@ -628,9 +701,18 @@ } .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; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center } @@ -684,14 +766,21 @@ } .itemMiscInfo { + 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 } @media all and (max-width:31.25em) { .mobileDetails .itemMiscInfo { text-align: center; + -webkit-box-pack: center; + -webkit-justify-content: center; justify-content: center } @@ -781,6 +870,7 @@ } .btnSyncComplete i { + -webkit-border-radius: 100em; border-radius: 100em } @@ -789,9 +879,14 @@ } .mediaInfoIcons { + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; margin: 1em 0; + -webkit-flex-wrap: wrap; flex-wrap: wrap } @@ -829,6 +924,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { .sectionTitleButton { margin-left: 1.5em !important; + -webkit-flex-shrink: 0; flex-shrink: 0 } @@ -838,17 +934,22 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { .sectionTitleIconButton { margin-left: 1.5em !important; + -webkit-flex-shrink: 0; flex-shrink: 0; font-size: 84% !important; padding: .5em !important } .horizontalItemsContainer { + 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 } @@ -920,6 +1021,8 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .itemsViewSettingsContainer { + -webkit-box-pack: center; + -webkit-justify-content: center; justify-content: center } diff --git a/src/assets/css/metadataeditor.css b/src/assets/css/metadataeditor.css index c5de6f3efe..542c7c8f2b 100644 --- a/src/assets/css/metadataeditor.css +++ b/src/assets/css/metadataeditor.css @@ -28,13 +28,17 @@ .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.css b/src/assets/css/scrollstyles.css index 69039ce341..aa2f7dafad 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; } @@ -9,11 +10,13 @@ } .hiddenScrollX, .layout-tv .scrollX { - scrollbar-width: none; + -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 { - scrollbar-width: none; + overflow: -moz-scrollbars-none; } .hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar { @@ -23,24 +26,28 @@ .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; + -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 { width: 0 !important; display: none; -} +} \ No newline at end of file diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 6491799117..292fc67454 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -20,12 +20,18 @@ html { .layout-mobile, .layout-tv { + -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 { diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index f20abf9d07..f9c4798e97 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -1,6 +1,8 @@ .chapterThumbTextContainer, .videoOsdBottom { - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none } .osdPoster img, @@ -12,10 +14,13 @@ } .osdHeader { + -webkit-transition: opacity .3s ease-out; + -o-transition: opacity .3s ease-out; transition: opacity .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; } @@ -29,13 +34,17 @@ } .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; @@ -81,12 +90,20 @@ 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 { @@ -94,35 +111,49 @@ } .osdControls { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1 } .videoOsdBottom .buttons { padding: .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 } .osdVolumeSliderContainer { width: 9em; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1 } .osdMediaInfo, .volumeButtons { - display: flex; - align-items: center; + display: -webkit-box; + display: -webkit-flex; + -webkit-box-align: center } .volumeButtons { margin: 0 .5em 0 auto; display: flex; + -webkit-align-items: center; align-items: center } .osdTimeText { margin-left: 1em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none } @@ -136,10 +167,15 @@ 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; 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, @@ -149,6 +185,7 @@ .osdMediaInfo { display: flex; + -webkit-align-items: center; align-items: center } @@ -157,14 +194,23 @@ } .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 } .osdMainTextContainer { + -webkit-box-align: baseline; + -webkit-align-items: baseline; align-items: baseline } @@ -172,13 +218,12 @@ margin-left: auto; } -@keyframes spin { - 100% { - 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; animation:spin 4s linear infinite; } diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index 5520ce2c7e..e63b9a4bb1 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -18,6 +18,7 @@ button { padding: 0; display: block; color: inherit !important; + -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none !important; cursor: pointer; contain: layout style; @@ -79,9 +80,10 @@ 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; + contain: layout style; } .card.show-focus:not(.show-animation) .cardBox { @@ -146,6 +148,7 @@ button { background-size: cover; background-repeat: no-repeat; background-position: center center; + display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -179,6 +182,7 @@ button { margin: 0 !important; /* Needed in safari */ height: 100%; + -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none !important; contain: strict; } @@ -342,6 +346,7 @@ button { border: 0 !important; padding: 0 !important; cursor: pointer; + -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none !important; color: inherit; vertical-align: middle; diff --git a/src/components/dialogHelper/dialoghelper.css b/src/components/dialogHelper/dialoghelper.css index aa4145e016..2cc20b5ff2 100644 --- a/src/components/dialogHelper/dialoghelper.css +++ b/src/components/dialogHelper/dialoghelper.css @@ -16,6 +16,7 @@ .dialog { margin: 0; border-radius: .2em; + -webkit-font-smoothing: antialiased; border: 0; padding: 0; will-change: transform, opacity; diff --git a/src/components/filterdialog/style.css b/src/components/filterdialog/style.css index 989b7c1245..9851c2d7b9 100644 --- a/src/components/filterdialog/style.css +++ b/src/components/filterdialog/style.css @@ -5,6 +5,7 @@ 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.css b/src/components/homesections/homesections.css index 5df2440f82..45df67c482 100644 --- a/src/components/homesections/homesections.css +++ b/src/components/homesections/homesections.css @@ -13,11 +13,13 @@ .homeLibraryIcon { margin-left: .5em; margin-right: .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/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css index e1875ff332..32c090eeae 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; } diff --git a/src/components/images/style.css b/src/components/images/style.css index 06fbf1f9cf..5cf39c1e4b 100644 --- a/src/components/images/style.css +++ b/src/components/images/style.css @@ -18,9 +18,21 @@ .lazy-image-fadein { opacity: 0; + -webkit-animation-duration: .8s; + -moz-animation-duration: .8s; + -o-animation-duration: .8s; animation-duration: .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,.5,1); + -moz-animation-timing-function: cubic-bezier(0,0,.5,1); + -o-animation-timing-function: cubic-bezier(0,0,.5,1); animation-timing-function: cubic-bezier(0,0,.5,1); } diff --git a/src/components/indicators/indicators.css b/src/components/indicators/indicators.css index b0d0119c05..c2d089e1af 100644 --- a/src/components/indicators/indicators.css +++ b/src/components/indicators/indicators.css @@ -14,6 +14,7 @@ .indicator { border-radius: 100em; + display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -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; diff --git a/src/components/loading/loading.css b/src/components/loading/loading.css index e3f10c0e2e..6d8472fc15 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); } } @@ -28,6 +37,7 @@ } .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; } @@ -36,6 +46,7 @@ } .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; } @@ -44,6 +55,7 @@ } .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; } @@ -52,39 +64,90 @@ } .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; @@ -211,6 +366,7 @@ border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; + -webkit-animation: none; animation: none; position: absolute; top: 0; @@ -221,47 +377,91 @@ .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/navdrawer/navdrawer.css b/src/components/navdrawer/navdrawer.css index 5d63e150d1..f774c6919f 100644 --- a/src/components/navdrawer/navdrawer.css +++ b/src/components/navdrawer/navdrawer.css @@ -9,20 +9,29 @@ .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; z-index: 1099 } .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 } .drawer-open { + -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, .4); box-shadow: 2px 0 12px rgba(0, 0, 0, .4) } .scrollContainer { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1 } @@ -32,6 +41,8 @@ background-color: #000; opacity: 0; z-index: 1098; + -webkit-transition: opacity ease-in-out .38s, visibility ease-in-out .38s; + -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s; transition: opacity ease-in-out .38s, visibility ease-in-out .38s; will-change: opacity; background-color: rgba(0, 0, 0, .3) diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 349416a979..9bd91731a7 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -1,5 +1,10 @@ .nowPlayingInfoContainer { + display: -webkit-box; + display: -webkit-flex; display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; flex-direction: row } @@ -36,20 +41,27 @@ } .nowPlayingInfoButtons { + 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 } .nowPlayingInfoControls, .nowPlayingTime { - display: flex; + display: -webkit-box; + display: -webkit-flex } .nowPlayingPageImageContainer { width: 20%; margin-right: .25em; position: relative; + -webkit-flex-shrink: 0; flex-shrink: 0 } @@ -60,9 +72,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; + -webkit-box-pack: center; + -webkit-justify-content: center; justify-content: center } @@ -71,15 +90,25 @@ 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; 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) { .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 } @@ -93,6 +122,8 @@ } .nowPlayingInfoButtons { + -webkit-box-pack: center; + -webkit-justify-content: center; justify-content: center } @@ -120,20 +151,33 @@ .nowPlayingTime { display: flex; + -webkit-box-align: center; + -webkit-align-items: center; align-items: center; 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; + -webkit-box-pack: center; + -webkit-justify-content: center; justify-content: center } @media all and (min-width:50em) { .nowPlayingSecondaryButtons { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; flex-grow: 1; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; justify-content: flex-end } } @@ -150,11 +194,13 @@ .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/slideshow/style.css b/src/components/slideshow/style.css index 1167a972c8..43211a8fef 100644 --- a/src/components/slideshow/style.css +++ b/src/components/slideshow/style.css @@ -41,6 +41,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%; diff --git a/src/components/subtitlesync/subtitlesync.css b/src/components/subtitlesync/subtitlesync.css index 38a15be901..112e624722 100644 --- a/src/components/subtitlesync/subtitlesync.css +++ b/src/components/subtitlesync/subtitlesync.css @@ -40,6 +40,8 @@ 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; diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css index 784c79cbb7..336a90d58e 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 { @@ -66,4 +67,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/elements/emby-button/emby-button.css b/src/elements/emby-button/emby-button.css index ee15e2e125..2201b2cd77 100644 --- a/src/elements/emby-button/emby-button.css +++ b/src/elements/emby-button/emby-button.css @@ -9,6 +9,9 @@ font-family: inherit; color: inherit; outline-width: 0; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; user-select: none; cursor: pointer; z-index: 0; @@ -21,6 +24,8 @@ 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; @@ -94,6 +99,9 @@ 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; @@ -110,6 +118,8 @@ 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; diff --git a/src/elements/emby-checkbox/emby-checkbox.css b/src/elements/emby-checkbox/emby-checkbox.css index 4e27928e2a..5641893f63 100644 --- a/src/elements/emby-checkbox/emby-checkbox.css +++ b/src/elements/emby-checkbox/emby-checkbox.css @@ -38,6 +38,9 @@ margin: 0; padding: 0; opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; appearance: none; border: none; } @@ -112,7 +115,7 @@ margin-bottom: .25em; } -@keyframes repaintChrome { +@-webkit-keyframes repaintChrome { from { padding: 0; } diff --git a/src/elements/emby-input/emby-input.css b/src/elements/emby-input/emby-input.css index 57a46ec7b6..d888eb570d 100644 --- a/src/elements/emby-input/emby-input.css +++ b/src/elements/emby-input/emby-input.css @@ -10,8 +10,10 @@ font-weight: inherit; padding: .4em .25em; /* 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%; } @@ -33,5 +35,6 @@ } .emby-input-iconbutton { + -webkit-align-self: flex-end; align-self: flex-end; } diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css index 6b8575bc86..25fdc5b933 100644 --- a/src/elements/emby-radio/emby-radio.css +++ b/src/elements/emby-radio/emby-radio.css @@ -27,6 +27,9 @@ margin: 0; padding: 0; opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; appearance: none; border: none; } @@ -67,13 +70,17 @@ 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); } diff --git a/src/elements/emby-select/emby-select.css b/src/elements/emby-select/emby-select.css index 4aff8cab92..76b28c4208 100644 --- a/src/elements/emby-select/emby-select.css +++ b/src/elements/emby-select/emby-select.css @@ -12,6 +12,7 @@ /* Prevent padding from causing width overflow */ box-sizing: border-box; outline: none !important; + -webkit-tap-highlight-color: rgba(0,0,0,0); width: 100%; } @@ -19,6 +20,8 @@ background: none !important; border-color: transparent !important; color: inherit !important; + -webkit-appearance: none; + -moz-appearance: none; appearance: none; } @@ -38,6 +41,7 @@ .emby-select-focusscale { transition: transform 180ms ease-out !important; + -webkit-transform-origin: center center; transform-origin: center center; } @@ -73,6 +77,7 @@ } .emby-select-withcolor { + -webkit-appearance: none; appearance: none; border-radius: .2em; } diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css index 6fc861deb0..945cdd5214 100644 --- a/src/elements/emby-slider/emby-slider.css +++ b/src/elements/emby-slider/emby-slider.css @@ -1,21 +1,31 @@ _:-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; margin: 0; + /* Disable webkit tap highlighting */ + -webkit-tap-highlight-color: rgba(0,0,0,0); display: block; } @@ -59,7 +69,7 @@ _:-ms-input-placeholder { } .mdl-slider::-webkit-slider-thumb { - appearance: none; + -webkit-appearance: none; width: 1.2em; height: 1.2em; box-sizing: border-box; @@ -98,7 +108,7 @@ _:-ms-input-placeholder { } .mdl-slider::-ms-thumb { - appearance: none; + -webkit-appearance: none; width: 1.8em; height: 1.8em; box-sizing: border-box; diff --git a/src/elements/emby-textarea/emby-textarea.css b/src/elements/emby-textarea/emby-textarea.css index 0dab1b1ece..6ac8262236 100644 --- a/src/elements/emby-textarea/emby-textarea.css +++ b/src/elements/emby-textarea/emby-textarea.css @@ -13,6 +13,7 @@ /* Prevent padding from causing width overflow */ box-sizing: border-box; outline: none !important; + -webkit-tap-highlight-color: rgba(0,0,0,0); width: 100%; } diff --git a/src/elements/emby-toggle/emby-toggle.css b/src/elements/emby-toggle/emby-toggle.css index 3b14b8cf09..fb91419cbc 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; } @@ -82,6 +89,7 @@ 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/themes/appletv/theme.css b/src/themes/appletv/theme.css index 4b694d6ece..d194dc2034 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -23,10 +23,14 @@ 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) } .skinHeader.semiTransparent { + -webkit-backdrop-filter: none !important; backdrop-filter: none !important } @@ -41,10 +45,14 @@ html { .backgroundContainer, .dialog { 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, .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)) } @@ -181,6 +189,9 @@ 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) } @@ -245,6 +256,7 @@ html { color: inherit; background: rgba(255, 255, 255, .9); border: .07em solid rgba(0, 0, 0, .158); + -webkit-border-radius: .15em; border-radius: .15em } @@ -392,10 +404,18 @@ 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; padding: 1em; + -webkit-border-radius: .25em; border-radius: .25em } diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index 5ab67ca317..02e8e46ea2 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -17,12 +17,19 @@ 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 { + -webkit-backdrop-filter: none !important; 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)) } @@ -37,6 +44,7 @@ html { .backgroundContainer { background: url(bg.jpg) center top no-repeat #033361; + -webkit-background-size: cover; background-size: cover } @@ -173,7 +181,7 @@ html { color: rgba(255, 255, 255, .78) } -@supports (backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(1, 2, 50, .7); backdrop-filter: blur(20px) @@ -245,6 +253,7 @@ html { color: inherit; background: rgba(0, 0, 0, .5); border: .07em solid transparent; + -webkit-border-radius: .15em; border-radius: .15em } @@ -398,10 +407,18 @@ 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; padding: 1em; + -webkit-border-radius: .25em; border-radius: .25em } @@ -433,7 +450,7 @@ html { } ::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } ::-webkit-scrollbar-track-piece { @@ -442,7 +459,7 @@ 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/dark/theme.css b/src/themes/dark/theme.css index bff054169d..5758f5d097 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -20,6 +20,7 @@ html { } .skinHeader.semiTransparent { + -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(0, 0, 0, 0.4); } @@ -226,6 +227,7 @@ html { color: inherit; background: #292929; border: .07em solid #292929; + -webkit-border-radius: .15em; border-radius: .15em } @@ -375,10 +377,18 @@ 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; padding: 1em; + -webkit-border-radius: .25em; border-radius: .25em } @@ -410,7 +420,7 @@ html { } ::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } ::-webkit-scrollbar-track-piece { @@ -419,7 +429,7 @@ 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 719678d0a6..65a9d5cf9f 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -23,14 +23,17 @@ html { background-color: #303030; color: #ccc; color: rgba(255, 255, 255, .87); + -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37) } .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); } @@ -246,6 +249,7 @@ html { color: inherit; background: #fff; border: .07em solid rgba(0, 0, 0, .158); + -webkit-border-radius: .15em; border-radius: .15em } @@ -392,10 +396,18 @@ 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; padding: 1em; + -webkit-border-radius: .25em; border-radius: .25em } diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index c53e80e80a..1892423aeb 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -17,12 +17,19 @@ 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 { + -webkit-backdrop-filter: none !important; 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)) } @@ -37,6 +44,7 @@ html { .backgroundContainer { background: url(bg.jpg) center top no-repeat #030322; + -webkit-background-size: cover; background-size: cover } @@ -261,7 +269,7 @@ a[data-role=button] { color: rgba(255, 255, 255, .78) } -@supports (backdrop-filter:blur(10px)) { +@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) { .appfooter-blurred { background: rgba(6, 37, 111, .7); backdrop-filter: blur(20px) @@ -333,6 +341,7 @@ a[data-role=button] { color: inherit; background: rgba(0, 0, 0, .5); border: .07em solid transparent; + -webkit-border-radius: .15em; border-radius: .15em } @@ -491,10 +500,18 @@ 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; padding: 1em; + -webkit-border-radius: .25em; border-radius: .25em } @@ -532,7 +549,7 @@ a[data-role=button] { } ::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } ::-webkit-scrollbar-track-piece { @@ -541,7 +558,7 @@ 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 e51f4311ef..0367f080dc 100644 --- a/src/themes/wmc/theme.css +++ b/src/themes/wmc/theme.css @@ -23,12 +23,19 @@ 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) } .skinHeader.semiTransparent { + -webkit-backdrop-filter: none !important; 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)) } @@ -39,6 +46,9 @@ 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) } @@ -160,6 +170,9 @@ 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) } @@ -226,6 +239,7 @@ html { color: inherit; background: rgba(255, 255, 255, .2); border: .07em solid rgba(255, 255, 255, .135); + -webkit-border-radius: .15em; border-radius: .15em } @@ -377,10 +391,18 @@ 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; padding: 1em; + -webkit-border-radius: .25em; border-radius: .25em } @@ -412,7 +434,7 @@ html { } ::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) } ::-webkit-scrollbar-track-piece { @@ -421,7 +443,7 @@ html { ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { - border-radius: 2px; + -webkit-border-radius: 2px; background: center no-repeat rgba(255, 255, 255, .7) }