diff --git a/WIP.css b/WIP.css index 30db6c0..ef266b9 100644 --- a/WIP.css +++ b/WIP.css @@ -5,6 +5,104 @@ } } +/* +.cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover { + box-shadow: 0px 0px 5px rgb(var(--accent)) !important; + border: solid 1px rgba(var(--accent),0.6) !important; +} + +body.force-scroll { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + justify-content: flex-start; + overflow: hidden; +} + + + +.skinHeader { + position: static; + width: 100%; + align-self: flex-start; +} + +.mainAnimatedPages { + height: 100vh; + position: relative !important; + overflow: hidden; +} + +.libraryPage:not(.noSecondaryNavPage) { + padding: 0 !important; +} + +div#itemDetailPage { + display: flex; + flex-direction: column; + flex-wrap: nowrap; +} + +@media (min-width: 40em) { + .dashboardDocument .skinBody { + left: 20em; + width: calc(100vw - 20em); + } +} + +div#loginPage { + margin-top: 0 !important; + position: fixed; +} + +div[data-role=page] { + margin: 0 !important; + padding: 0 !important; + position: static; + width: 100%; + height: 100%; + overflow-y: scroll; + -webkit-mask: linear-gradient(to bottom, transparent, black 15px calc(100% - 15px), transparent); + mask: linear-gradient(to bottom, transparent, black 15px calc(100% - 15px), transparent); +} + +.layout-tv .mainAnimatedPages { + overflow: visible; + mask: none; + -webkit-mask: none; +} + +div#videoOsdPage { + overflow: hidden !important; + margin-top: 0 !important; + -webkit-mask: none !important; + mask: none !important; +} + +div[data-role=page]:not(.withTabs) { + margin-top: 0 !important; +} + +div#itemBackdrop { + display: none; +} + +.layout-desktop .detailRibbon { + margin-top: 7.2em; +} + +.layout-mobile #itemDetailPage { + position: fixed; + -webkit-mask: none; + mask: none; + margin-top: 4em !important; + height: calc(100vh - 4em); +} +*/ + + + /*From Mono*/ /*Modified item status progress bar, play and item menu buttons*/ .innerCardFooter.fullInnerCardFooter.innerCardFooterClear { diff --git a/base.css b/base.css index 3a04aef..bd0a1fe 100644 --- a/base.css +++ b/base.css @@ -68,6 +68,31 @@ color: white; } +/*Shrink the mouseover chapter image when scrobbling, still media player*/ +.chapterThumb { + height: 14vh; + min-width: 14vh; + box-shadow: 0 0 1.9vh #000; +} +.chapterThumbText { + font-size: 1em; +} +.sliderBubble { + background: #0000; +} +.chapterThumbTextContainer { + right: auto; + bottom: 4px; + padding: .25em 0.7em; +} +.chapterThumbContainer { + box-shadow: 0 0 1.9vh #000; +} +.sliderBubble { + -webkit-transform: translate3d(-50%,-108%,0); + transform: translate3d(-50%,-108%,0); +} + /*Narrow margins, theme main page*/ .cardBox-bottompadded { margin-bottom: 0.6em !important; @@ -87,6 +112,13 @@ min-width: 12em; margin: 0.4em; } +.listItem:hover { + transition: 0.2s; + background: rgba(0, 0, 0, 0.4); +} +.visualCardBox, .cardImageContainer { + box-shadow: none; +} /*ANIMATIONS*/ /*Fade as images load*/ @@ -115,18 +147,6 @@ margin-right: .2em; } -/*Shrink the mouseover chapter image when scrobbling*/ -.chapterThumb { - height: 14vh; - min-width: 14vh; -} -.chapterThumbText { - font-size: 1em; -} -.sliderBubble { - background: #0000; -} - /*Rating star, normally yellow*/ .starIcon { color: rgba(255,255,255,.8); diff --git a/compactepisodes.css b/compactepisodes.css index 29998a5..47fa835 100644 --- a/compactepisodes.css +++ b/compactepisodes.css @@ -1,7 +1,4 @@ /*Size episode preview images in a more compact way*/ -.listItem:hover { - transition: 0.2s; -} .listItemImage.listItemImage-large.itemAction.lazy { transition: filter 0.2s } diff --git a/presets/monochromic_preset.css b/presets/monochromic_preset.css index 436662c..95f08f3 100644 --- a/presets/monochromic_preset.css +++ b/presets/monochromic_preset.css @@ -1,13 +1,18 @@ +@import url('https://ctalvio.github.io/Ultrachromic/presets/monochromic_values.css'); @import url('https://ctalvio.github.io/Ultrachromic/jf_font.css'); -@import url('https://ctalvio.github.io/Ultrachromic/base.css'); @import url('https://ctalvio.github.io/Ultrachromic/fixes.css'); -@import url('https://ctalvio.github.io/Ultrachromic/type/dark.css'); +@import url('https://ctalvio.github.io/Ultrachromic/base.css'); +@import url('https://ctalvio.github.io/Ultrachromic/rounding.css'); @import url('https://ctalvio.github.io/Ultrachromic/smallercast.css'); @import url('https://ctalvio.github.io/Ultrachromic/compactepisodes.css'); -@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner.css'); +@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner-dashboard.css'); @import url('https://ctalvio.github.io/Ultrachromic/minimalisticlogin.css'); -@import url('https://ctalvio.github.io/Ultrachromic/fields.css'); +@import url('https://ctalvio.github.io/Ultrachromic/fields_1.css'); @import url('https://ctalvio.github.io/Ultrachromic/dialogues.css'); +@import url('https://ctalvio.github.io/Ultrachromic/cardindicator_1.css'); +@import url('https://ctalvio.github.io/Ultrachromic/title_1.css'); +@import url('https://ctalvio.github.io/Ultrachromic/type/dark.css'); +@import url('https://ctalvio.github.io/Ultrachromic/overlayprogress.css'); :root {--rounding: 5px;} diff --git a/presets/monochromic_values.css b/presets/monochromic_values.css new file mode 100644 index 0000000..da7f077 --- /dev/null +++ b/presets/monochromic_values.css @@ -0,0 +1,9 @@ +@import url('https://ctalvio.github.io/Ultrachromic/accentlist.css'); +/*Values used by monochromic when not accented*/ + +.transcodingProgress > div, .itemProgressBarForeground { + background-color: rgba(255,255,255,0.3); +} +.playbackProgress > div { + background-color: rgba(255,255,255,0.75); +} \ No newline at end of file diff --git a/presets/novachromic_preset.css b/presets/novachromic_preset.css index ba0bf2d..6543f87 100644 --- a/presets/novachromic_preset.css +++ b/presets/novachromic_preset.css @@ -1,13 +1,18 @@ @import url('https://ctalvio.github.io/Ultrachromic/jf_font.css'); -@import url('https://ctalvio.github.io/Ultrachromic/base.css'); @import url('https://ctalvio.github.io/Ultrachromic/fixes.css'); -@import url('https://ctalvio.github.io/Ultrachromic/type/light.css'); +@import url('https://ctalvio.github.io/Ultrachromic/base.css'); +@import url('https://ctalvio.github.io/Ultrachromic/accentlist.css'); +@import url('https://ctalvio.github.io/Ultrachromic/rounding.css'); @import url('https://ctalvio.github.io/Ultrachromic/smallercast.css'); @import url('https://ctalvio.github.io/Ultrachromic/compactepisodes.css'); -@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner.css'); +@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner-dashboard.css'); @import url('https://ctalvio.github.io/Ultrachromic/minimalisticlogin.css'); -@import url('https://ctalvio.github.io/Ultrachromic/fields.css'); +@import url('https://ctalvio.github.io/Ultrachromic/fields_1.css'); @import url('https://ctalvio.github.io/Ultrachromic/dialogues.css'); +@import url('https://ctalvio.github.io/Ultrachromic/cardindicator_2.css'); +@import url('https://ctalvio.github.io/Ultrachromic/title_1.css'); +@import url('https://ctalvio.github.io/Ultrachromic/type/light.css'); +@import url('https://ctalvio.github.io/Ultrachromic/overlayprogress.css'); :root {--rounding: 0px;} diff --git a/rounding.css b/rounding.css index a0abe99..94168c6 100644 --- a/rounding.css +++ b/rounding.css @@ -75,6 +75,9 @@ progress::-webkit-progress-value { .cardOverlayButtonIcon { border-radius: var(--rounding) !important; } +.actionSheetMenuItem:hover { + border-radius: 0 !important; +} .osdPoster img { border-radius: var(--rounding); border: none; } diff --git a/type/dark.css b/type/dark.css index 403e780..a7e0eac 100644 --- a/type/dark.css +++ b/type/dark.css @@ -58,15 +58,14 @@ fieldset { background: rgba(0,0,0,.5) !important; } -/*Episode hover*/ -.listItem:hover { - background: rgba(0, 0, 0, 0.4); -} /*Homepage modifications, transparent footerplayer and fixed sectiontitles*/ .appfooter { background: rgba(0,0,0,0.9); } +.button-flat:hover { + background: rgba(0,0,0,0.4); +} /*Theme the library scan progress bar*/ progress { diff --git a/type/light.css b/type/light.css index 09d5e7d..35983c2 100644 --- a/type/light.css +++ b/type/light.css @@ -315,8 +315,8 @@ h4, background-color: #cecece !important; } -.backgroundContainer, .dialog, .innerCardFooter { - background-color: #cecece; +.backgroundContainer { + background-color: #cecece !important; } .formDialogHeader, .formDialogFooter {