mirror of
https://github.com/CTalvio/Ultrachromic
synced 2026-01-15 13:52:53 -03:00
Finalized banner transparency
This commit is contained in:
Casper Talvio
@@ -1,4 +1,5 @@
|
||||
/*This file contains color changes for the colorful theme type*/
|
||||
/*This file contains color and style changes for the colorful theme type*/
|
||||
:root {--accent: 98, 121, 205;}
|
||||
|
||||
.dialog,
|
||||
.mainDrawer,
|
||||
@@ -6,12 +7,6 @@
|
||||
.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 {
|
||||
@@ -53,23 +48,7 @@ a[data-role="button"] {
|
||||
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*/
|
||||
/*Various box-shadows, might be related to glowstyle*/
|
||||
.cardBox:not(.visualCardBox) .cardPadder, .cardContent-shadow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@@ -85,48 +64,7 @@ body, h1, h2, h3, h4, .textActionButton, .emby-button-foreground {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/*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*/
|
||||
/*Colors for loading spinner, placeholders, scroll bars*/
|
||||
.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);}
|
||||
|
||||
127
type/dark.css
127
type/dark.css
@@ -1,9 +1,52 @@
|
||||
/*Blur backdrops, feel free to edit the intensity of the blur/saturation/dimming*/
|
||||
.backdropImage {
|
||||
filter: blur(60px) saturate(200%) contrast(160%) brightness(25%);
|
||||
/*This file contains color and style changes for the dark theme type*/
|
||||
|
||||
/*Some themeing for the dashboard*/
|
||||
|
||||
#user_usage_report_table,
|
||||
.detailTable {
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
.backgroundContainer.withBackdrop {
|
||||
background-color: rgba(0,0,0,0);
|
||||
.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;
|
||||
}
|
||||
|
||||
/*Colors for title_2*/
|
||||
@@ -122,43 +165,6 @@ a[data-role="button"] {
|
||||
color: rgba(120, 120, 120, 0.6) !important;
|
||||
}
|
||||
|
||||
/*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;
|
||||
@@ -256,4 +262,41 @@ a[data-role="button"] {
|
||||
background:rgba(0,0,0,.3);
|
||||
box-shadow:0 0 0 0 rgba(0,0,0,0)
|
||||
}
|
||||
}
|
||||
|
||||
/*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;
|
||||
}
|
||||
15
type/itemstyle_1-glow.css
Normal file
15
type/itemstyle_1-glow.css
Normal file
@@ -0,0 +1,15 @@
|
||||
/*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;
|
||||
}
|
||||
@@ -1,3 +1,73 @@
|
||||
/*This file contains color changes for the light theme type*/
|
||||
:root {--accent: 255, 255, 255;}
|
||||
|
||||
/*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);
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
color: #000;
|
||||
background: #eaeaea;
|
||||
}
|
||||
#indexPage .transcodingProgress > div, #indexPage .itemProgressBarForeground {
|
||||
background-color: rgba(var(--accent),0.35);
|
||||
}
|
||||
|
||||
/*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));
|
||||
}
|
||||
|
||||
.navMenuOption:hover, .actionSheetMenuItem:hover {
|
||||
background-color: rgba(var(--accent),1) !important;
|
||||
}
|
||||
@@ -280,4 +350,27 @@ h4,
|
||||
.emby-textarea,
|
||||
.emby-select-withcolor {
|
||||
background-color: rgba(245, 245, 245, 0.8);
|
||||
}
|
||||
|
||||
/*Colors for loading spinner, placeholders, scroll bars*/
|
||||
.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);
|
||||
}
|
||||
Reference in New Issue
Block a user