Tons of changes
This commit is contained in:
Casper Talvio
103
base.css
Normal file
103
base.css
Normal file
@@ -0,0 +1,103 @@
|
||||
/*Top "task bar" enlarge text*/
|
||||
.headerTabs.sectionTabs {
|
||||
text-size-adjust: 110%;
|
||||
font-size: 110%;
|
||||
}
|
||||
.pageTitle {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
.emby-tab-button {
|
||||
padding: 1.75em 1.7em;
|
||||
}
|
||||
|
||||
/*Accommodate mobile and set positions, I think*/
|
||||
.cardIndicators,
|
||||
.listItemIndicators {
|
||||
right: 0.3em;
|
||||
top: 0.3em;
|
||||
}
|
||||
|
||||
@media all and (min-width: 70em){
|
||||
.cardOverlayFab-primary {
|
||||
background-color: #00000000;
|
||||
}
|
||||
.cardOverlayButtonIcon {
|
||||
background-color: #00000000 !important;
|
||||
}
|
||||
.cardOverlayContainer {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 70em){
|
||||
.cardOverlayButtonIcon {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
.cardOverlayButton {
|
||||
padding: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
/*Media player*/
|
||||
.nowPlayingPageImage {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upNextDialog-countdownText {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/*Narrow margins, theme main page*/
|
||||
.cardBox-bottompadded {
|
||||
margin-bottom: 0.6em !important;
|
||||
}
|
||||
.itemsContainer > .card > .cardBox {
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
.raised.homeLibraryButton {
|
||||
background: rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
.raised.homeLibraryButton:hover {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
.raised.homeLibraryButton:hover {transition: filter 0.2s}
|
||||
.raised.homeLibraryButton {transition: filter 0.2s}
|
||||
.homeLibraryButton {
|
||||
min-width: 12em;
|
||||
margin: 0.4em;
|
||||
}
|
||||
|
||||
/*ANIMATIONS*/
|
||||
/*Fade as images load*/
|
||||
.blurhash-canvas {
|
||||
transition: 0.2s;
|
||||
}
|
||||
.cardImageContainer {
|
||||
transition: 0.7s;
|
||||
}
|
||||
|
||||
/*Hover background for buttons*/
|
||||
.button-flat:hover {
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
.button-flat {
|
||||
padding: .5em !important;
|
||||
margin: .2em !important;
|
||||
}
|
||||
|
||||
/*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);
|
||||
}
|
||||
20
cardindicator_2.css
Normal file
20
cardindicator_2.css
Normal file
@@ -0,0 +1,20 @@
|
||||
/*Card indicators*/
|
||||
.cardIndicators,
|
||||
.listItemIndicators {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.innerCardFooter {
|
||||
border-radius: 0px var(--rounding) !important;
|
||||
box-shadow: 1px -1px 4px 0 rgba(0,0,0,0.3);
|
||||
}
|
||||
.countIndicator, .playedIndicator {
|
||||
border-radius: 0px var(--rounding) !important;
|
||||
box-shadow: -1px 1px 4px 0 rgba(0,0,0,0.3);
|
||||
}
|
||||
.countIndicator {
|
||||
background: rgba(var(--accent),0.8);
|
||||
}
|
||||
.playedIndicator, .innerCardFooter {
|
||||
background: rgba(0,0,0,0.4)
|
||||
}
|
||||
143
colorful.css
Normal file
143
colorful.css
Normal file
@@ -0,0 +1,143 @@
|
||||
.dialog,
|
||||
.mainDrawer,
|
||||
.toast,
|
||||
.appfooter {
|
||||
background-color: rgba(8, 8, 8, 0.85);
|
||||
}
|
||||
@supports (backdrop-filter: blur(15px)) {
|
||||
.dialog, .mainDrawer, .toast, .appfooter {
|
||||
backdrop-filter: blur(15px);
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/*Accenting*/
|
||||
.drawer-open {
|
||||
box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important;
|
||||
border-right: solid 1px rgba(var(--accent), 1) !important;
|
||||
}
|
||||
|
||||
.preload {
|
||||
background-color: black;
|
||||
}
|
||||
.backgroundContainer {
|
||||
background-color: rgba(var(--accent),0.17) !important;
|
||||
}
|
||||
.formDialogHeader,
|
||||
.formDialogFooter {
|
||||
background-color: rgba(var(--accent),0.15) !important;
|
||||
}
|
||||
.button-flat:hover {
|
||||
background: rgba(var(--accent),0.25);
|
||||
}
|
||||
.paper-icon-button-light:hover {
|
||||
background-color: rgba(var(--accent),0.25) !important;
|
||||
}
|
||||
|
||||
.navMenuOption-selected {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.subtitleappearance-preview {
|
||||
background: linear-gradient(140deg,rgba(var(--accent)),#111) !important;
|
||||
}
|
||||
.navMenuOption-selected, .selectionCommandsPanel {
|
||||
background: rgba(var(--accent), 0.8) !important;
|
||||
}
|
||||
.raised,
|
||||
.fab,
|
||||
a[data-role="button"] {
|
||||
background: rgba(var(--accent), 0.8) !important;
|
||||
transition: all 0.2s !important;
|
||||
}
|
||||
|
||||
/*Glow accent*/
|
||||
.raised.homeLibraryButton {
|
||||
box-shadow: 0px 0px 5px rgba(var(--accent), 0) !important;
|
||||
border: solid 1px rgba(var(--accent),0) !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.cardOverlayContainer {
|
||||
border: solid 1px rgba(var(--accent),0.0) !important;
|
||||
}
|
||||
|
||||
/*Various box-shadows*/
|
||||
.cardBox:not(.visualCardBox) .cardPadder, .cardContent-shadow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
body, h1, h2, h3, h4, .textActionButton, .emby-button-foreground {
|
||||
text-shadow: 0px 0px 4px rgba(0,0,0,.6) !important;
|
||||
}
|
||||
.blurhashed {
|
||||
box-shadow: 0 0 4px 0 rgba(0,0,0,.6) !important;
|
||||
}
|
||||
|
||||
/*Change look of fields*/
|
||||
.infoBanner {
|
||||
background: rgba(var(--accent),0.15) !important;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid rgba(var(--accent), 0.3);
|
||||
}
|
||||
.checkboxOutline,
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select-withcolor {
|
||||
border: none !important;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#itemDetailPage .emby-select-withcolor {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*Change look of in-focus fields*/
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-select-withcolor:focus,
|
||||
.itemSelectionPanel {
|
||||
border: none !important;
|
||||
background: rgba(var(--accent), 0.25) !important;
|
||||
}
|
||||
.checkboxIcon {
|
||||
color: rgba(var(--accent));
|
||||
}
|
||||
|
||||
progress {
|
||||
border: 0px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
border: 0px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
.taskProgressOuter {
|
||||
border: 0px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
/*Colors for loading spinner and other stuff*/
|
||||
.mdl-spinner__layer-1 {border-color: rgba(var(--accent), 1);}
|
||||
.mdl-spinner__layer-2 {border-color: rgba(var(--accent), .8);}
|
||||
.mdl-spinner__layer-3 {border-color: rgba(var(--accent), .6);}
|
||||
.mdl-spinner__layer-4 {border-color: rgba(var(--accent), .5);}
|
||||
|
||||
|
||||
.defaultCardBackground1 {
|
||||
background-color: rgba(var(--accent), .5);
|
||||
}
|
||||
.defaultCardBackground2 {
|
||||
background-color: rgba(var(--accent), .4);
|
||||
}
|
||||
.defaultCardBackground3 {
|
||||
background-color: rgba(var(--accent), .8);
|
||||
}
|
||||
.defaultCardBackground4 {
|
||||
background-color: rgba(var(--accent), .7);
|
||||
}
|
||||
.defaultCardBackground5 {
|
||||
background-color: rgba(var(--accent), .6);
|
||||
}
|
||||
41
compactepisodes.css
Normal file
41
compactepisodes.css
Normal file
@@ -0,0 +1,41 @@
|
||||
/*Size episode preview images in a more compact way*/
|
||||
.listItem:hover {
|
||||
transition: 0.2s;
|
||||
}
|
||||
.listItemImage.listItemImage-large.itemAction.lazy {
|
||||
transition: filter 0.2s
|
||||
}
|
||||
.listItemImageButton-icon {
|
||||
padding: 0;
|
||||
}
|
||||
.secondary.listItem-overview.listItemBodyText {
|
||||
height: 61px;
|
||||
margin: 0;
|
||||
}
|
||||
.listItemImageButton {
|
||||
margin: auto;
|
||||
font-size: 1.6em !important;
|
||||
}
|
||||
@media all and (min-width: 100em){
|
||||
.listItemImage.listItemImage-large.itemAction.lazy {
|
||||
height: 110px;
|
||||
}
|
||||
.listItem-content {
|
||||
height: 115px;
|
||||
}
|
||||
.secondary.listItem-overview.listItemBodyText {
|
||||
height: 4em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 100em){
|
||||
.listItemImage.listItemImage-large.itemAction.lazy {height: 80px;}
|
||||
.listItem-content {height: 85px;}
|
||||
.secondary.listItem-overview.listItemBodyText {height: 2.5em; margin: 0;}
|
||||
}
|
||||
|
||||
.missingIndicator, .unairedIndicator {
|
||||
background: #ae3030eb;
|
||||
padding: .3em .6em;
|
||||
color: #fff;
|
||||
}
|
||||
209
dark.css
Normal file
209
dark.css
Normal file
@@ -0,0 +1,209 @@
|
||||
/*Blur backdrops, feel free to edit the intensity of the blur/saturation/dimming*/
|
||||
.backdropImage {
|
||||
filter: blur(60px) saturate(200%) contrast(160%) brightness(25%);
|
||||
}
|
||||
.backgroundContainer.withBackdrop {
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
/*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);
|
||||
}
|
||||
|
||||
/*Theme the library scan progress bar*/
|
||||
progress {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 0px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
#divRunningTasks span {
|
||||
color: rgba(255,255,255,0.75) !important;
|
||||
}
|
||||
.taskProgressOuter {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
.taskProgressInner {
|
||||
background: rgba(255,255,255,0.75) !important;
|
||||
}
|
||||
#scheduledTasksPage span {
|
||||
color: rgba(255,255,255,0.75) !important;
|
||||
}
|
||||
|
||||
/*Login background*/
|
||||
#loginPage {
|
||||
background: url(https://i.imgur.com/9vL4iNf.png) !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
/*Make watched icon, footer on chapter thumnails (and other things), and count indicator dark and transparent*/
|
||||
.innerCardFooter,
|
||||
.countIndicator,
|
||||
.playedIndicator {
|
||||
background: rgba(0,0,0,0.4);
|
||||
box-shadow: none;
|
||||
}
|
||||
.countIndicator {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*Modify subtitle settings page*/
|
||||
.subtitleappearance-preview {
|
||||
background: linear-gradient(140deg,#444,#111) !important;
|
||||
}
|
||||
|
||||
/*Affects blurhash to remove the saturated colors to fit overall look*/
|
||||
.blurhash-canvas {
|
||||
filter: opacity(60%) saturate(60%);
|
||||
}
|
||||
|
||||
/*Colors for loading spinner, placeholders, scroll bars*/
|
||||
.mdl-spinner__layer-1 {border-color: rgba(255, 255, 255, 1);}
|
||||
.mdl-spinner__layer-2 {border-color: rgba(128, 128, 128, 1);}
|
||||
.mdl-spinner__layer-3 {border-color: rgba(40, 40, 40, 1);}
|
||||
.mdl-spinner__layer-4 {border-color: rgba(0, 0, 0, 1);}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #0000;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #0000;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(120,120,120,0.6) !important;
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-color: rgba(120,120,120,0.6) #0000 !important;
|
||||
}
|
||||
|
||||
.defaultCardBackground1 {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
.defaultCardBackground2 {
|
||||
background-color: #141414;
|
||||
}
|
||||
.defaultCardBackground3 {
|
||||
background-color: #212121;
|
||||
}
|
||||
.defaultCardBackground4 {
|
||||
background-color: #333333;
|
||||
}
|
||||
.defaultCardBackground5 {
|
||||
background-color: #666666;
|
||||
}
|
||||
|
||||
/*Theme syncplay*/
|
||||
.syncPlayIconCircle {
|
||||
color: rgba(255,255,255,1) !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(0,0,0,.7);
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,.3)
|
||||
}
|
||||
70% {
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1);
|
||||
color:rgba(0,0,0,.6);
|
||||
background:rgba(0,0,0,0);
|
||||
box-shadow:0 0 0 60px rgba(0,0,0,0)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(0,0,0,.7);
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(0,0,0,.7);
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,.3)
|
||||
}
|
||||
70% {
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1);
|
||||
color:rgba(0,0,0,.6);
|
||||
background:rgba(0,0,0,0);
|
||||
box-shadow:0 0 0 60px rgba(0,0,0,0)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(0,0,0,.7);
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes infinite-pulse {
|
||||
0% {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(0,0,0,.7);
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,.3)
|
||||
}
|
||||
70% {
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1);
|
||||
color:rgba(0,0,0,.6);
|
||||
background:rgba(0,0,0,0);
|
||||
box-shadow:0 0 0 60px rgba(0,0,0,0)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(0,0,0,.7);
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
@keyframes infinite-pulse {
|
||||
0% {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(0,0,0,.7);
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,.3)
|
||||
}
|
||||
70% {
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1);
|
||||
color:rgba(0,0,0,.6);
|
||||
background:rgba(0,0,0,0);
|
||||
box-shadow:0 0 0 60px rgba(0,0,0,0)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(0,0,0,.7);
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
22
dialogues.css
Normal file
22
dialogues.css
Normal file
@@ -0,0 +1,22 @@
|
||||
/*Theme dialogues, drop downs, toasts*/
|
||||
.dialog,
|
||||
.toast {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.actionSheetMenuItem:hover {
|
||||
background-color: rgba(0, 164, 220, 0.2);
|
||||
}
|
||||
.mainDrawer {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.navMenuOption:hover {
|
||||
background: rgba(0, 164, 220, 0.2);
|
||||
}
|
||||
.formDialogHeader, .formDialogFooter {
|
||||
background-color: #101010 !important;
|
||||
}
|
||||
.formDialogHeader.formDialogHeader-clear.justify-content-center,
|
||||
.formDialogFooter.formDialogFooter-clear.formDialogFooter-flex,
|
||||
.collapseContent {
|
||||
background-color: #0000 !important;
|
||||
}
|
||||
34
fields.css
Normal file
34
fields.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/*Tweak entry fields, checkamarks*/
|
||||
.emby-input,
|
||||
.emby-textarea {
|
||||
padding: .4em .55em;
|
||||
}
|
||||
.emby-select {
|
||||
padding: .35em 1.9em .35em .35em;
|
||||
}
|
||||
.selectArrow {
|
||||
margin-top: 1.05em;
|
||||
}
|
||||
.checkboxOutline,
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select-withcolor {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 0.01em solid rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-select-withcolor:focus {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.emby-textarea:focus,
|
||||
.emby-select-withcolor:focus,
|
||||
.emby-input:focus,
|
||||
.itemSelectionPanel {
|
||||
border: 0.01em solid rgba(40, 40, 40, 0.8) !important;
|
||||
}
|
||||
.emby-checkbox:checked + span + .checkboxOutline {
|
||||
background-color: rgba(20, 20, 20, 0.8) !important;
|
||||
border: 0.01em solid rgba(255, 255, 255, 0.22) !important;
|
||||
}
|
||||
104
fixes.css
Normal file
104
fixes.css
Normal file
@@ -0,0 +1,104 @@
|
||||
/*Change backdrop behaviour on mobile pre-10.7.0*/
|
||||
@media all and (max-width: 32em) {
|
||||
.itemBackdrop {
|
||||
width: 100vw!important;
|
||||
height: 100vh!important;
|
||||
position: fixed;
|
||||
}
|
||||
.detailPageWrapperContainer {
|
||||
margin-top: 5em;
|
||||
}
|
||||
.itemBackdrop {
|
||||
filter: blur(45px) saturate(200%) contrast(160%) brightness(25%);
|
||||
}
|
||||
}
|
||||
|
||||
/*Media player*/
|
||||
.startTimeText, .endTimeText {
|
||||
width: 3.4em;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.osdTitle {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.videoOsdBottom {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.skinHeader-withBackground.osdHeader {
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
/*Accommodate ultrawide aspect ratios*/
|
||||
@media (min-aspect-ratio: 1.98/1) {
|
||||
.detailImageContainer .card {
|
||||
width: 21vw;
|
||||
}
|
||||
.detailPagePrimaryContainer {
|
||||
padding-left: 28.45vw !important;
|
||||
}
|
||||
.detailPageContent {
|
||||
padding-left: 28.45vw;
|
||||
}
|
||||
}
|
||||
@media (min-aspect-ratio: 2.7/1) {
|
||||
.detailImageContainer .card {
|
||||
width: 16vw;
|
||||
}
|
||||
.detailPagePrimaryContainer {
|
||||
padding-left: 23.45vw !important;
|
||||
}
|
||||
.detailPageContent {
|
||||
padding-left: 23.45vw;
|
||||
}
|
||||
}
|
||||
|
||||
/*Fix weird shevron off centering*/
|
||||
.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
|
||||
padding-top:0em;
|
||||
}
|
||||
.sectionTitle {
|
||||
margin-left: .4em !important;
|
||||
margin-top: .2em !important;
|
||||
margin-bottom: .2em !important;
|
||||
}
|
||||
.sectionTitleTextButton > .material-icons {
|
||||
margin: 0;
|
||||
}
|
||||
.layout-mobile .sectionTitleTextButton > .material-icons {
|
||||
padding-top: .2em;
|
||||
}
|
||||
|
||||
/*Fix the UI shifting around*/
|
||||
.nowPlayingBarCurrentTime {
|
||||
width: 6em;
|
||||
}
|
||||
.osdTextContainer {
|
||||
margin: 0 !important;
|
||||
margin-top: 0.2em !important;
|
||||
padding-left: 0.5em !important;
|
||||
padding-right: 0.5em !important;
|
||||
}
|
||||
|
||||
/*Fix top right user icon when using a profile image*/
|
||||
.headerUserButtonRound {
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
|
||||
/*Improve some menu alignments*/
|
||||
.formDialogContent {
|
||||
margin-bottom: 6.2em;
|
||||
}
|
||||
.dialogContentInner {
|
||||
padding: .5em 1em 1em;
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.listItem-indexnumberleft {
|
||||
margin: 1em;
|
||||
}
|
||||
.listItem {
|
||||
padding-left: 1em;
|
||||
}
|
||||
3
jf_font.css
Normal file
3
jf_font.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
97
kaleidochromic_preset.css
Normal file
97
kaleidochromic_preset.css
Normal file
@@ -0,0 +1,97 @@
|
||||
@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/colorful.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/minimalisticlogin.css');
|
||||
@import url('https://ctalvio.github.io/Ultrachromic/fields.css');
|
||||
@import url('https://ctalvio.github.io/Ultrachromic/dialogues.css');
|
||||
|
||||
:root {--accent: 98, 121, 205;}
|
||||
:root {--rounding: 12px;}
|
||||
|
||||
|
||||
/*Cosmetic fixes for quirks (drop down padding and dialogue hover rounding)*/
|
||||
.detailTrackSelect {
|
||||
padding-left: .2em !important;
|
||||
}
|
||||
@media all and (max-width: 100em){
|
||||
.detailTrackSelect {
|
||||
padding-left: .5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.actionSheetMenuItem:hover {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.itemsContainer>.card>.cardBox {
|
||||
margin-left: 0.6em !important;
|
||||
}
|
||||
|
||||
@media all and (min-width: 131.25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(6.3vw - 1.2em) !important;
|
||||
height: calc(6.3vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 120em) and (max-width: 131.25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(6.4vw - 1.2em) !important;
|
||||
height: calc(6.4vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 100em) and (max-width: 120em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(7.6vw - 1.2em) !important;
|
||||
height: calc(7.6vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 87.5em) and (max-width: 100em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(9.3vw - 1.2em) !important;
|
||||
height: calc(9.3vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 75em) and (max-width: 87.5em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(10.5vw - 1.2em) !important;
|
||||
height: calc(10.5vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 50em) and (max-width: 75em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(15vw - 1.2em) !important;
|
||||
height: calc(15vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 43.75em) and (max-width: 50em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(20.1vw - 1.2em) !important;
|
||||
height: calc(20.1vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 25em) and (max-width: 43.75em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(31.2vw - 1.2em) !important;
|
||||
height: calc(31.2vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(40vw - 1.2em) !important;
|
||||
height: calc(40vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*Style backdrop*/
|
||||
.backdropImage {
|
||||
filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);
|
||||
}
|
||||
@media all and (max-width: 32em) {
|
||||
.itemBackdrop {
|
||||
filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);
|
||||
}
|
||||
}
|
||||
35
light.css
Normal file
35
light.css
Normal file
@@ -0,0 +1,35 @@
|
||||
.navMenuOption:hover, .actionSheetMenuItem:hover {
|
||||
background-color: rgba(var(--accent),1) !important;
|
||||
}
|
||||
|
||||
/*Login background*/
|
||||
#loginPage {
|
||||
background: url(https://imgur.com/S3WiZIM.png) !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
/*Theme the library scan progress bar*/
|
||||
progress {
|
||||
background: #cecece !important;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
background: #cecece !important;
|
||||
border: 0px solid rgba(255, 255, 255);
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
background-color: rgba(255,255,255);
|
||||
}
|
||||
#divRunningTasks span {
|
||||
color: black !important;
|
||||
}
|
||||
.taskProgressOuter {
|
||||
background: #cecece !important;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
}
|
||||
.taskProgressInner {
|
||||
background: rgba(255,255,255) !important;
|
||||
}
|
||||
#scheduledTasksPage span {
|
||||
color: rgba(255,255,255) !important;
|
||||
}
|
||||
18
minimalisticlogin.css
Normal file
18
minimalisticlogin.css
Normal file
@@ -0,0 +1,18 @@
|
||||
/*Narrow the login form, size according to display size (bigger on mobile)*/
|
||||
#loginPage .readOnlyContent,
|
||||
#loginPage form {
|
||||
max-width: 22em;
|
||||
}
|
||||
|
||||
/*Hide "please login" text, margin is to prevent login form moving too far up*/
|
||||
#loginPage h1 {
|
||||
display: none
|
||||
}
|
||||
#loginPage .padded-left.padded-right.padded-bottom-page {
|
||||
margin-top: 50px
|
||||
}
|
||||
|
||||
/*Hide "manual" and "forgot" buttons}*/
|
||||
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
|
||||
display: none
|
||||
}
|
||||
181
monochromic_preset.css
Normal file
181
monochromic_preset.css
Normal file
@@ -0,0 +1,181 @@
|
||||
@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/dark.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/minimalisticlogin.css');
|
||||
@import url('https://ctalvio.github.io/Ultrachromic/fields.css');
|
||||
@import url('https://ctalvio.github.io/Ultrachromic/dialogues.css');
|
||||
|
||||
:root {--rounding: 5px;}
|
||||
|
||||
/*Modified progress bar, play and item menu buttons*/
|
||||
.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
|
||||
border-radius: 0px !important;
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.itemProgressBar {
|
||||
height: 2000em;
|
||||
background: #0000;
|
||||
}
|
||||
.playbackProgress>div {
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
.transcodingProgress>div, .itemProgressBarForeground {
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
|
||||
border-radius: 0px !important;
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
/*Some themeing for the dashboard*/
|
||||
|
||||
#user_usage_report_table,
|
||||
.detailTable {
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
.detailTableBodyRow-shaded {
|
||||
background: #0000 !important;
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
background: #101010;
|
||||
}
|
||||
.navMenuOptionText {
|
||||
margin-top: 0;
|
||||
}
|
||||
.backgroundProgress > div {
|
||||
background-color: #0000;
|
||||
}
|
||||
|
||||
.visualCardBox, .cardImageContainer {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
||||
background: rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.dashboardSection h3 {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.sessionCardFooter {
|
||||
border: none;
|
||||
}
|
||||
.paperList,
|
||||
.visualCardBox {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.listItem-border {
|
||||
border-color: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid rgba(40, 40, 40, 0.8);
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
/*Color theming*/
|
||||
|
||||
/*Theme process progress ring*/
|
||||
.progressring-spiner {
|
||||
border-color: rgba(var(--accent));
|
||||
border-width: .35em;
|
||||
}
|
||||
.progressring {
|
||||
margin: .4em;
|
||||
}
|
||||
.progressring-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*Theme user setting tab buttons*/
|
||||
div[data-role="controlgroup"] a.ui-btn-active {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
a[data-role="button"]:hover {
|
||||
background: rgba(80, 80, 80, 0.8) !important;
|
||||
}
|
||||
|
||||
div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/*Theme media player*/
|
||||
|
||||
.mdl-slider-background-lower {
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
.mdl-slider::-ms-thumb {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
.iconOsdProgressInner {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.videoOsdBottom {
|
||||
background: rgba(0,0,0,.7);
|
||||
}
|
||||
.skinHeader-withBackground.osdHeader {
|
||||
background: rgba(0,0,0,.7) !important;
|
||||
}
|
||||
|
||||
/*Theme buttons and cards*/
|
||||
.navMenuOption-selected,
|
||||
.selectionCommandsPanel {
|
||||
background: #101010 !important;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover,
|
||||
.raised.homeLibraryButton:hover,
|
||||
.button-flat:hover,
|
||||
.playstatebutton-icon-played,
|
||||
.ratingbutton-icon-withrating,
|
||||
.paper-icon-button-light:hover:not(:disabled),
|
||||
.emby-tab-button:hover,
|
||||
.selectLabelFocused,
|
||||
.inputLabelFocused,
|
||||
.textareaLabelFocused,
|
||||
.buttonActive,
|
||||
.button-link{
|
||||
color: rgba(120, 120, 120, 0.6) !important;
|
||||
}
|
||||
|
||||
#itemDetailPage .button-link {color: inherit !important;}
|
||||
|
||||
.listItemIcon {
|
||||
background: #0000 !important;
|
||||
}
|
||||
|
||||
.raised,
|
||||
.fab,
|
||||
a[data-role="button"] {
|
||||
background: rgba(40, 40, 40, 0.8) !important;
|
||||
transition: all 0.2s !important;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
.raised:hover,
|
||||
.fab:hover,
|
||||
.navMenuOption:hover,
|
||||
.actionSheetMenuItem:hover {
|
||||
background: rgba(80, 80, 80, 0.8) !important;
|
||||
}
|
||||
349
novachromic_preset.css
Normal file
349
novachromic_preset.css
Normal file
@@ -0,0 +1,349 @@
|
||||
@import url('https://ctalvio.github.io/Monochromic/default_style.css');
|
||||
@import url('https://ctalvio.github.io/Monochromic/customcolor-advanced_style.css');
|
||||
@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');
|
||||
|
||||
:root {--accent: 255, 255, 255;}
|
||||
:root {--rounding: 0px;}
|
||||
|
||||
|
||||
/*Various themeing*/
|
||||
#itemDetailPage .emby-select-withcolor {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../jellyfin/web/assets/img/banner-dark.png);
|
||||
}
|
||||
|
||||
.backdropImage {
|
||||
filter: blur(22px) saturate(95%) contrast(15%) brightness(155%);
|
||||
}
|
||||
.infoBanner {
|
||||
color: #000;
|
||||
background: #eaeaea;
|
||||
}
|
||||
#indexPage .transcodingProgress > div, #indexPage .itemProgressBarForeground {
|
||||
background-color: rgba(var(--accent),0.35);
|
||||
}
|
||||
|
||||
/*Make various stuff black, remove text shading*/
|
||||
.endsAtText,
|
||||
.osdTextContainer,
|
||||
.listItemBodyText,
|
||||
.textareaLabelUnfocused,
|
||||
.paper-icon-button-light:hover,
|
||||
.raised.homeLibraryButton:hover,
|
||||
.button-flat:hover,
|
||||
.playstatebutton-icon-played,
|
||||
.ratingbutton-icon-withrating,
|
||||
.paper-icon-button-light:hover:not(:disabled),
|
||||
.emby-tab-button:hover,
|
||||
.selectLabelFocused,
|
||||
.inputLabelFocused,
|
||||
.textareaLabelFocused,
|
||||
.buttonActive,
|
||||
.button-link,
|
||||
.emby-tab-button-active,
|
||||
.toast,
|
||||
.cardText,
|
||||
.paperListLabel,
|
||||
#scheduledTasksPage span,
|
||||
.raised.homeLibraryButton:hover,
|
||||
body,
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
.textActionButton,
|
||||
.inputLabel,
|
||||
.inputLabelUnfocused,
|
||||
.fieldDescription,
|
||||
.navMenuOption-selected,
|
||||
.raised,
|
||||
.countIndicator,
|
||||
.playedIndicator,
|
||||
.mediaInfoItem,
|
||||
.nowPlayingBarCurrentTime,
|
||||
.paper-icon-button-light {
|
||||
text-shadow: none !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.cardText-secondary,
|
||||
.fieldDescription,
|
||||
.guide-programNameCaret,
|
||||
.listItem,
|
||||
.secondary,
|
||||
.nowPlayingBarSecondaryText,
|
||||
.programSecondaryTitle,
|
||||
.secondaryText {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.cardOverlayContainer:hover, .dialog, .toast, .raised.homeLibraryButton:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.alphaPickerButton {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#dashboardPage .playbackProgress>div {
|
||||
background-color: rgba(0,0,0,0.75);
|
||||
}
|
||||
#dashboardPage .transcodingProgress>div, #dashboardPage .itemProgressBarForeground {
|
||||
background-color: rgba(0,0,0,0.23);
|
||||
}
|
||||
.sessionAppInfo {
|
||||
filter: brightness(10%);
|
||||
}
|
||||
#devicesPage .cardImage {
|
||||
filter: brightness(20%);
|
||||
}
|
||||
|
||||
/*Theme media player*/
|
||||
.videoOsdBottom {
|
||||
background: rgba(210,210,210,.72);
|
||||
padding-top: 0;
|
||||
}
|
||||
.skinHeader-withBackground.osdHeader {
|
||||
background: rgba(255,255,255,.7) !important;
|
||||
height: 5em;
|
||||
}
|
||||
.mdl-slider-background-flex {
|
||||
background: rgba(0,0,0,.45);
|
||||
}
|
||||
|
||||
/*Syncplay*/
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(var(--accent),.7);
|
||||
background:rgba(var(--accent),.3);
|
||||
box-shadow:0 0 0 0 rgba(var(--accent),.3)
|
||||
}
|
||||
70% {
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1);
|
||||
color:rgba(var(--accent),0);
|
||||
background:rgba(var(--accent),0);
|
||||
box-shadow:0 0 0 60px rgba(var(--accent),0)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(var(--accent),0);
|
||||
background:rgba(var(--accent),0);
|
||||
box-shadow:0 0 0 0 rgba(var(--accent),0)
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(var(--accent),.7);
|
||||
background:rgba(var(--accent),.3);
|
||||
box-shadow:0 0 0 0 rgba(var(--accent),.3)
|
||||
}
|
||||
70% {
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1);
|
||||
color:rgba(var(--accent),0);
|
||||
background:rgba(var(--accent),0);
|
||||
box-shadow:0 0 0 60px rgba(var(--accent),0)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(var(--accent),0);
|
||||
background:rgba(var(--accent),0);
|
||||
box-shadow:0 0 0 0 rgba(var(--accent),0)
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes infinite-pulse {
|
||||
0% {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(var(--accent),.7);
|
||||
background:rgba(var(--accent),.3);
|
||||
box-shadow:0 0 0 0 rgba(var(--accent),.3)
|
||||
}
|
||||
70% {
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1);
|
||||
color:rgba(var(--accent),.6);
|
||||
background:rgba(var(--accent),0);
|
||||
box-shadow:0 0 0 60px rgba(var(--accent),0)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(var(--accent),.7);
|
||||
background:rgba(var(--accent),.3);
|
||||
box-shadow:0 0 0 0 rgba(var(--accent),0)
|
||||
}
|
||||
}
|
||||
@keyframes infinite-pulse {
|
||||
0% {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(var(--accent),.7);
|
||||
background:rgba(var(--accent),.3);
|
||||
box-shadow:0 0 0 0 rgba(var(--accent),.3)
|
||||
}
|
||||
70% {
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1);
|
||||
color:rgba(var(--accent),.6);
|
||||
background:rgba(var(--accent),0);
|
||||
box-shadow:0 0 0 60px rgba(var(--accent),0)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(.95);
|
||||
transform:scale(.95);
|
||||
color:rgba(var(--accent),.7);
|
||||
background:rgba(var(--accent),.3);
|
||||
box-shadow:0 0 0 0 rgba(var(--accent),0)
|
||||
}
|
||||
}
|
||||
|
||||
/*Make various stuff light*/
|
||||
.sessionNowPlayingInnerContent {
|
||||
background: rgba(220,220,220,.8);
|
||||
}
|
||||
.emby-select-withcolor > option {
|
||||
color: #333;
|
||||
background: #cecece;
|
||||
}
|
||||
.raised.homeLibraryButton {
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
.raised.homeLibraryButton:hover {
|
||||
background: rgba(200, 200, 200, 0.25) !important;
|
||||
}
|
||||
|
||||
.navMenuOption-selected {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navMenuOption-selected, .selectionCommandsPanel {
|
||||
background: #cecece !important;
|
||||
}
|
||||
|
||||
.playedIndicator {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.nowPlayingContextMenu, .nowPlayingPlaylist, html {
|
||||
background-color: #cecece !important;
|
||||
}
|
||||
|
||||
.backgroundContainer, .dialog, .innerCardFooter {
|
||||
background-color: #cecece;
|
||||
}
|
||||
|
||||
.formDialogHeader, .formDialogFooter {
|
||||
background-color: #eaeaea !important;
|
||||
}
|
||||
|
||||
.cardOverlayContainer {
|
||||
background-color: rgba(200, 200, 200, 0.7);
|
||||
}
|
||||
|
||||
.listItem:hover {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.dialog,
|
||||
#user_usage_report_table,
|
||||
.detailTable,
|
||||
.mainDrawer,
|
||||
.toast,
|
||||
.nowPlayingBarTop,
|
||||
.paperList,
|
||||
.visualCardBox,
|
||||
.checkboxOutline,
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select-withcolor {
|
||||
background-color: rgba(245, 245, 245, 0.8);
|
||||
}
|
||||
|
||||
/*Accenting*/
|
||||
|
||||
.ratingbutton-icon-withrating,
|
||||
.playstatebutton-icon-played {
|
||||
color: rgba(var(--accent)) !important;
|
||||
}
|
||||
|
||||
.countIndicator {
|
||||
background: rgba(var(--accent),0.8);
|
||||
}
|
||||
|
||||
.button-flat:hover {
|
||||
background: rgba(var(--accent),0.55);
|
||||
}
|
||||
.paper-icon-button-light:hover {
|
||||
background-color: rgba(var(--accent),0.55) !important;
|
||||
}
|
||||
|
||||
.raised,
|
||||
.fab,
|
||||
a[data-role="button"] {
|
||||
background: rgba(var(--accent), 0.8) !important;
|
||||
transition: all 0.2s !important;
|
||||
}
|
||||
|
||||
.raised.homeLibraryButton {
|
||||
box-shadow: none !important;
|
||||
border: solid 1px rgba(var(--accent),0) !important;
|
||||
}
|
||||
.cardOverlayContainer:hover,
|
||||
.dialog,
|
||||
.toast,
|
||||
.raised.homeLibraryButton:hover {
|
||||
box-shadow: none !important;
|
||||
border: solid 1px rgba(var(--accent),0.6) !important;
|
||||
}
|
||||
.cardOverlayContainer {
|
||||
border: solid 1px rgba(var(--accent),0.0) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-select-withcolor:focus,
|
||||
.itemSelectionPanel {
|
||||
background: rgba(var(--accent), 0.25) !important;
|
||||
}
|
||||
.checkboxIcon {
|
||||
color: rgba(var(--accent));
|
||||
}
|
||||
|
||||
/*Colors for loading spinner and other stuff*/
|
||||
.mdl-spinner__layer-1 {border-color: rgba(var(--accent), 1);}
|
||||
.mdl-spinner__layer-2 {border-color: rgba(var(--accent), .8);}
|
||||
.mdl-spinner__layer-3 {border-color: rgba(var(--accent), .6);}
|
||||
.mdl-spinner__layer-4 {border-color: rgba(var(--accent), .5);}
|
||||
|
||||
|
||||
.defaultCardBackground1 {
|
||||
background-color: rgba(var(--accent), .5);
|
||||
}
|
||||
.defaultCardBackground2 {
|
||||
background-color: rgba(var(--accent), .4);
|
||||
}
|
||||
.defaultCardBackground3 {
|
||||
background-color: rgba(var(--accent), .8);
|
||||
}
|
||||
.defaultCardBackground4 {
|
||||
background-color: rgba(var(--accent), .7);
|
||||
}
|
||||
.defaultCardBackground5 {
|
||||
background-color: rgba(var(--accent), .6);
|
||||
}
|
||||
107
rounding.css
Normal file
107
rounding.css
Normal file
@@ -0,0 +1,107 @@
|
||||
/*Rounded corners on pretty much everything*/
|
||||
|
||||
progress {
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
.taskProgressOuter,
|
||||
.taskProgressInner {
|
||||
border-radius: var(--rounding) !important;
|
||||
}
|
||||
.formDialogHeader {
|
||||
border-top-left-radius: var(--rounding);
|
||||
border-top-right-radius: var(--rounding);
|
||||
}
|
||||
.formDialogFooter {
|
||||
border-bottom-left-radius: var(--rounding);
|
||||
border-bottom-right-radius: var(--rounding);
|
||||
}
|
||||
.cardOverlayContainer {
|
||||
border-radius: var(--rounding) !important;
|
||||
}
|
||||
.missingIndicator,
|
||||
.unairedIndicator,
|
||||
.detailTable,
|
||||
.primaryImageWrapper > img,
|
||||
.toast,
|
||||
.paperList,
|
||||
.cardContent,
|
||||
.sessionNowPlayingInnerContent,
|
||||
.listItem:hover,
|
||||
.cardImage,
|
||||
.fab,
|
||||
.raised,
|
||||
.multiSelectCheckboxOutline,
|
||||
.itemSelectionPanel,
|
||||
.cardContent-button,
|
||||
.cardContent-shadow,
|
||||
.itemDetailImage,
|
||||
.cardOverlayButton-hover,
|
||||
.cardImageContainer,
|
||||
.cardPadder,
|
||||
.listItemImage,
|
||||
.listItemImageButton,
|
||||
.listItemButton,
|
||||
.headerButton,
|
||||
.paper-icon-button-light,
|
||||
.innerCardFooter,
|
||||
.blurhash-canvas,
|
||||
.dialog,
|
||||
.countIndicator,
|
||||
.playedIndicator,
|
||||
.listItemIcon,
|
||||
.listItem-border,
|
||||
.button-flat,
|
||||
.visualCardBox,
|
||||
.checkboxOutline,
|
||||
.emby-select-withcolor,
|
||||
.chapterThumbTextContainer,
|
||||
.chapterThumbContainer,
|
||||
.chapterThumb,
|
||||
.emby-input,
|
||||
.emby-textarea,
|
||||
.emby-select-withcolor,
|
||||
.nowPlayingPageImage,
|
||||
.upNextDialog-poster-img,
|
||||
.upNextContainer,
|
||||
.cardOverlayButtonIcon {
|
||||
border-radius: var(--rounding) !important;
|
||||
}
|
||||
.osdPoster img {
|
||||
border-radius: var(--rounding); border: none;
|
||||
}
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
.mdl-slider::-ms-thumb {
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role="button"]:first-child {
|
||||
border-bottom-left-radius: var(--rounding);
|
||||
border-top-left-radius: var(--rounding);
|
||||
}
|
||||
div[data-role="controlgroup"] a[data-role="button"]:last-child {
|
||||
border-bottom-right-radius: var(--rounding);
|
||||
border-top-right-radius: var(--rounding);
|
||||
}
|
||||
#dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent {
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
}
|
||||
#divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent {
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
}
|
||||
#userProfilesPage .cardImage, #userProfilesPage .cardContent {
|
||||
border-radius: var(--rounding) var(--rounding) 0 0 !important;
|
||||
}
|
||||
116
smallercast.css
Normal file
116
smallercast.css
Normal file
@@ -0,0 +1,116 @@
|
||||
/*Shrink and square (or round) cast thumnails*/
|
||||
@media all and (min-width: 131.25em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 6.3vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 120em) and (max-width: 131.25em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 6.4vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 100em) and (max-width: 120em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 7.6vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 87.5em) and (max-width: 100em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 9.3vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 75em) and (max-width: 87.5em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 10.5vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 50em) and (max-width: 75em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 15vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 43.75em) and (max-width: 50em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 20.1vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 25em) and (max-width: 43.75em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 31.2vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 25em){
|
||||
#castContent .card.overflowPortraitCard {
|
||||
width: 40vw !important;
|
||||
font-size: 90% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cardPadder {
|
||||
background-color: #0000 !important; box-shadow: none !important;
|
||||
}
|
||||
|
||||
/*Correct image aspect ratio behaviour, set border-radius to zero for square tiles*/
|
||||
|
||||
@media all and (min-width: 131.25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(6.3vw - 0.6em) !important;
|
||||
height: calc(6.3vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 120em) and (max-width: 131.25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(6.4vw - 0.6em) !important;
|
||||
height: calc(6.4vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 100em) and (max-width: 120em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(7.6vw - 0.6em) !important;
|
||||
height: calc(7.6vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 87.5em) and (max-width: 100em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(9.3vw - 0.6em) !important;
|
||||
height: calc(9.3vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 75em) and (max-width: 87.5em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(10.5vw - 0.6em) !important;
|
||||
height: calc(10.5vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 50em) and (max-width: 75em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(15vw - 0.6em) !important;
|
||||
height: calc(15vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 43.75em) and (max-width: 50em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(20.1vw - 0.6em) !important;
|
||||
height: calc(20.1vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 25em) and (max-width: 43.75em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(31.2vw - 0.6em) !important;
|
||||
height: calc(31.2vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(40vw - 0.6em) !important;
|
||||
height: calc(40vw - 0.6em) !important;
|
||||
}
|
||||
}
|
||||
34
title_1.css
Normal file
34
title_1.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/*Tweak series/movie/album title screen*/
|
||||
.detailImageContainer .card {
|
||||
position:fixed;
|
||||
}
|
||||
|
||||
.mainDetailButtons {
|
||||
font-size: 120%;
|
||||
}
|
||||
@media all and (max-width: 100em){
|
||||
.mainDetailButtons {
|
||||
font-size: 155%;
|
||||
}
|
||||
}
|
||||
|
||||
.detailSectionContent {
|
||||
max-width: 66em;
|
||||
}
|
||||
.trackSelections {
|
||||
max-width: 22em;
|
||||
}
|
||||
.detailLogo {
|
||||
display: none;
|
||||
}
|
||||
.detailPagePrimaryContainer {
|
||||
background: rgba(0,0,0,0) !important;
|
||||
}
|
||||
@media all and (min-width: 32em){
|
||||
.itemBackdrop {
|
||||
display: none;
|
||||
}
|
||||
.layout-desktop .detailRibbon {
|
||||
margin-top: 13vh;
|
||||
}
|
||||
}
|
||||
74
transparentbanner.css
Normal file
74
transparentbanner.css
Normal file
@@ -0,0 +1,74 @@
|
||||
/*Banner transparency*/
|
||||
.skinHeader {
|
||||
background: none !important;
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
#dashboardPage,
|
||||
#dashboardGeneralPage,
|
||||
#userProfilesPage,
|
||||
#devicesPage,
|
||||
#serverActivityPage,
|
||||
#liveTvStatusPage,
|
||||
#liveTvSettingsPage,
|
||||
#networkingPage,
|
||||
#apiKeysPage,
|
||||
#logPage,
|
||||
#notificationSettingsPage,
|
||||
#scheduledTasksPage,
|
||||
#itemDetailPage {
|
||||
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
|
||||
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@media all and (min-width: 100em){
|
||||
#indexPage,
|
||||
#moviesPage,
|
||||
#tvRecommendedPage,
|
||||
#musicRecommendedPage {
|
||||
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px);
|
||||
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 70px, rgb(0, 0, 0) 120px);
|
||||
overflow: scroll;
|
||||
}
|
||||
#encodingSettingsPage,
|
||||
#mediaLibraryPage,
|
||||
#dlnaSettingsPage,
|
||||
#pluginsPage {
|
||||
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
|
||||
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 60px, rgb(0, 0, 0) 90px);
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 100em){
|
||||
#indexPage,
|
||||
#moviesPage,
|
||||
#tvRecommendedPage,
|
||||
#encodingSettingsPage,
|
||||
#mediaLibraryPage,
|
||||
#dlnaSettingsPage,
|
||||
#pluginsPage,
|
||||
#musicRecommendedPage {
|
||||
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
|
||||
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 135px);
|
||||
overflow: scroll;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 100em){
|
||||
#indexPage,
|
||||
#moviesPage,
|
||||
#tvRecommendedPage,
|
||||
#encodingSettingsPage,
|
||||
#mediaLibraryPage,
|
||||
#dlnaSettingsPage,
|
||||
#pluginsPage,
|
||||
#musicRecommendedPage {
|
||||
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
|
||||
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0, 0, 0, 0) 100px, rgb(0, 0, 0) 130px);
|
||||
overflow: scroll;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user