kstenhouse/Ultrachromic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moooore

Browse Source
This commit is contained in:
Casper Talvio
2021-07-20 01:37:31 +03:00
parent 781dc43d1c
commit 2b9f35cfcf
8 changed files with 642 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
base.css
View File

@@ -119,6 +119,18 @@
.visualCardBox, .cardImageContainer {
box-shadow: none;
}
.backgroundProgress > div {
background-color: #0000;
}
#divRunningTasks span {
color: rgba(255,255,255,0.75) !important;
}
.itemsContainer > .card > .cardBox {
margin-left: 0.6em !important;
}
.itemsContainer > .card > .cardBox {
margin-right: 0.8em;
}
/*ANIMATIONS*/
/*Fade as images load*/

3
fixes.css
View File

@@ -110,6 +110,9 @@
}
/*Improve some menu alignments*/
.emby-tab-button {
padding: 1.75em 1.7em;
}
.formDialogHeaderTitle {
margin-left: 1em;
}

9
presets/monochromic_values.css
View File

@@ -1,9 +0,0 @@
@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);
}

3
rounding.css
View File

@@ -78,6 +78,9 @@ progress::-webkit-progress-value {
.actionSheetMenuItem:hover {
border-radius: 0 !important;
}
fieldset {
border-radius: var(--rounding);
}
.osdPoster img {
border-radius: var(--rounding); border: none;
}

201
skinmanager.json Normal file
View File

@@ -0,0 +1,201 @@
"name": "Ultrachromic",
"author": "CTalvio/EdgeMentality",
"description": "The final form, the true evolution of the chromic theme saga! Mix and match, accent and make the chromic theme of your dreams!",
"defaultCss": "/*Custom*/",
"categories": [{
"name": "Fonts",
"options": [{
"type": "googleFonts",
"name": "Change Font",
"css": "html {font-family: '$',sans-serif ; } body,h1,h2,h3 { font-family: '$' ,sans-serif;}"
},
{
"type": "number",
"name": "Title Font Size",
"description": "Change the size of the font used at titles.",
"step": "0.1",
"css": "h1 {font-size: $em;}",
"default": "1.8"
}
]
},
{
"name": "Home/Dashboard Page",
"options": [{
"type": "checkBox",
"name": "Enlarge Tab Buttons",
"description": "Enlarges the tab buttons, suggested, genres, etc. By default they are really tiny, especially on mobile.",
"css": ".headerTabs.sectionTabs {text-size-adjust: 110%; font-size: 110%;}.pageTitle {margin-top: auto; margin-bottom: auto;}.emby-tab-button {padding: 1.75em 1.7em;}"
}]
},
{
"name": "Miscellaneous",
"options": [{
"type": "selector",
"name": "Poster card hover effect",
"description": "Changes the hover effect on Movie/TV show/Music poster card.",
"css": "/*poster-eff*/",
"selections": [{
"name": "Scale in and out",
"css": " /* Dynamic Poster effect-option1*/ .cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.card:hover .cardBox{transform: scale(1.1);}"
},
{
"name": "Pop up and down",
"css": "/*Dynamic Poster effect-option2*/.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s, box-shadow .2s;}.card:hover .cardBox{transform: translatey(-5px);box-shadow: 0px 5px 10px black;}"
},
{
"name": "Poster Image in and out",
"css": "/*Dynamic Poster effect-option3*/.card:hover .cardImageContainer{filter:background-size: 120%} .cardImageContainer{background-size: 105%;transition: all .2s;}"
},
{
"name": "Poster Image blur",
"css": "/*Dynamic Poster effect-option4*/.card:hover .cardImageContainer{filter: blur(2px);} .cardImageContainer{transition: all .2s;}"
}
]
},
{
"type": "selector",
"name": "Icon Pack",
"description": "Changes all icons like dashboard and play. Choose non google fonts if you are blocking google fonts",
"css": "/*Icons*/",
"selections": [{
"name": "Default",
"css": ""
},
{
"name": "Outlined",
"css": "@import url('https://prayag17.github.io/Jellyfin-Icons/Outline.css');"
},
{
"name": "Rounded",
"css": "@import url('https://prayag17.github.io/Jellyfin-Icons/round.css');"
},
{
"name": "Sharp",
"css": "@import url('https://prayag17.github.io/Jellyfin-Icons/Sharp.css');"
}, {
"name": "Outlined-Non google fonts",
"css": "@import url('https://prayag17.github.io/Jellyfin-Icons/Outline.css');"
},
{
"name": "Rounded-Non google fonts",
"css": "@import url('https://prayag17.github.io/Jellyfin-Icons/round.css');"
},
{
"name": "Sharp-Non google fonts",
"css": "@import url('https://prayag17.github.io/Jellyfin-Icons/Sharp.css');"
}
]
},
{
"type": "checkBox",
"name": "Image gradient in title page",
"description": "removes the bg of detail ribbon and replace it with image gradient",
"css": ".detailRibbon {background: transparent;}.itemBackdrop {-webkit-mask: linear-gradient(to bottom, black 50%,transparent);mask: linear-gradient(to bottom, black 50%,transparent);}"
},
{
"type": "checkBox",
"name": "Minimal Actor's card",
"description": "display actor's cards in minimal and compact way",
"css": "/*Actors*/.card[data-type=Actor] .cardBox {background: none;position: relative;}.card[data-type=Actor] .cardScalable {height: 0;overflow: hidden;padding-top: 100%;border-radius: var(--rounding);}.card[data-type=Actor] .cardText {position: absolute;background: transparent !important;}.card[data-type=Actor] .cardImageContainer::after {content: '';background: linear-gradient(360deg, rgba(0,0,0,0.75), transparent 70%);width: 100%;bottom: 0;position: absolute;padding-top: 100%;}.card[data-type=Actor].cardText-secondary {bottom: 0%;width: -webkit-fill-available;border-radius: 0px 0px 10px 10px;height: 22px;}.card[data-type=Actor] .cardText-first {bottom: 23.5px;width: -webkit-fill-available;height: 22px;}.layout-mobile .card[data-type=Actor] .cardText-first {color: white !important;}.card[data-type=Actor] .cardScalable {overflow: hidden;border-radius: var(--rounding);height: 3rem;}.card[data-type=Actor] .cardOverlayButton-br {position: absolute;bottom: 23% !important;right: 0 !important;}.card[data-type=Actor] .cardPadder {background: none;}.card[data-type=Actor] .cardImageIcon {bottom: 41%;position: absolute;left: 50%;transform: translateX(-50%);}"
},
{
"type": "selector",
"name": "Episode View",
"description": "Theme episode list",
"selections": [{
"name": "Card",
"css": " #itemDetailPage .vertical-list {display: grid;grid-template-columns: 30% 30% 30%;padding: 0 6px !important;height: fit-content;justify-content: space-evenly;-webkit-box-orient: horizontal;-webkit-box-direction: normal;margin: -6px;width: calc(100% - 6px);}.listItem-withContentWrapper:hover .listItemImageButton.itemAction.paper-icon-button-light {opacity: 100%;}@media (max-width: 901px){#itemDetailPage .vertical-list {grid-template-columns: 30% 30%;}}.listItem-withContentWrapper {transition: none;height: fit-content;max-width: 100%;margin: 6px;border-radius: var(--rounding);overflow: hidden;padding: 0;overflow: hidden;}.listItem-withContentWrapper:hover{background: transparent;}.listItem-content {height: 100%;}.listItem-content {display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;width: 100%;display: grid;grid-template-columns: 100%;}.listItemImage.listItemImage-large.itemAction.lazy {height: 14rem;width: 100%;padding: 0 !important;margin: 0 !important;top: 0;left: 0;}.layout-mobile #itemDetailPage .vertical-list {grid-template-columns: 100%;}.secondary.listItem-overview.listItemBodyText {height: fit-content;}.layout-mobile .listItem-bottomoverview {padding: 0 10px;}.listItemBody.itemAction {padding: 0 5px;}.listItemImageButton.itemAction.paper-icon-button-light {opacity: 0;color: var(--accent);transition: all .2s;}.layout-mobile .listItemImageButton.itemAction.paper-icon-button-light{opacity: 100% !important;}"
},
{
"name": "Compact List",
"css": ".listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px;margin: 0;}"
}
]
},
{
"type": "checkBox",
"name": "Blur episode thumbnail",
"description": "Blur episode thumbnail to prevent spoiler. Note: Doesn't in browser's that dont support backdrop-filter, i.e firefox(can be enabled though), opera and more(unknown).",
"css": " .nextUpSection.verticalSection.detailVerticalSection>div>div>div>div.cardScalable>button {filter: blur(10px);}div.listItem>div>div>button:nth-child(1) {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}div.listItem>div>div>button:nth-child(1):hover {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}#childrenContent>div>div>div>div.listItemImage.listItemImage large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast>button {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast>button:hover {border-radius: 0px;height: 85%;width: 85%;backdrop-filter: blur(20px);}@supports not ( (backdrop-filter: blur(10px)) or (--webkit-backdrop-filter: blur(10px))) {#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast {filter: blur(10px);}}@supports not ( (backdrop-filter: blur(10px)) or (--webkit-backdrop-filter: blur(10px))) {#itemDetailPage>div.detailPageWrapperContainer>div.detailPageSecondaryContainer>div.detailPageContent>div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>.itemsContainer>.card.overflowBackdropCard.card-hoverable.card-withuserdata>div>.cardScalable {background: rgba(0, 0, 0, .5);filter: blur(10px);transition: none !important;filter: blur(10px);}}#itemDetailPage>div.detailPageWrapperContainer>div.detailPageSecondaryContainer>div.detailPageContent>div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>.itemsContainer>.card.overflowBackdropCard.card-hoverable.card-withuserdata>div>.cardScalable>button {border-radius: 0px;height: 0%;width: 0%;background: rgba(0, 0, 0, .5);filter: blur(10px);transition: none !important;backdrop-filter: blur(10px);}.cardScalable{overflow: hidden;}"
},
{
"type": "checkBox",
"name": "Blur Dialog Background",
"description": "Blur Menu and dialog background. Note: Works in Chrome and Edge only, functionalty can be enable, click on help button for info.",
"css": ".mainDrawer {background: transparent;backdrop-filter: blur(20px);}"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Title Page Button text color",
"description": "change button's text color.",
"css": ".raised{color: $;}",
"default": "#ffffff"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Title Page Button background color",
"description": "change background color of button.",
"css": ".raised{background-color: $;}",
"default": "#303030"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Idle button color-foreground",
"description": "This modifies the color of buttons like cast and search.",
"css": ".paper-icon-button-light{color: $; transititon: all .2s;}",
"default": "#ffffff"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Idle button color-background",
"description": "This modifies the background color of buttons like cast and search.",
"css": ".paper-icon-button-light{background-color: $ !important; transition: all .2s;}",
"default": "#00000000"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Hover button color-foreground",
"description": "This modifies the color of buttons like cast and search when your cursor is on it.",
"css": ".paper-icon-button-light:hover{color: $ !important;}",
"default": "#00a4dc"
},
{
"type": "colorPicker",
"mode": "hex",
"name": "Hover button color-background",
"description": "This modifies the background color of buttons like cast and search when your cursor is on it.",
"css": ".paper-icon-button-light:hover{background-color: $ !important;}",
"default": "#00a4db33"
},
{
"type": "number",
"name": "Border Radius",
"description": "Change the rounding",
"css": ":root{--btn-rounding: $px; --rounding: $px;} .missingIndicator, .unairedIndicator {border-radius: var(--rounding);}.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;}.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;}#user_usage_report_table, .detailTable {border-radius: var(--rounding);}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;}::-webkit-scrollbar-thumb {border-radius: var(--rounding);} .paper-icon-button-light{border-radius: var(--btn-rounding) !impotant;}",
"default": "0"
},
{
"type": "colorPicker",
"name": "Background-color",
"description": "change background-color of the background",
"css": ".backgroundContainer.withBackdrop {background-color: $;}",
"default": "rgba(0, 0, 0, 0.86)"
},
{
"type": "blurSlider",
"name": "Backdrop Blur",
"description": "adds blur to the backdrop images default is zero",
"css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}",
"default": "0"
}
]
}
]
}
]

414
type/dark-withaccent.css Normal file
View File

@@ -0,0 +1,414 @@
/*This file contains color and style changes for the dark theme type*/
:root {--selection: 120, 120, 120;}
/*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;
}
/*Colors for title_2*/
.layout-desktop .detailRibbon {
background: rgba(0,0,0,.2) !important;
}
.itemBackdrop::after {
background: rgba(0,0,0,.5) !important;
}
/*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 {
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%);
}
/*Dash and general UI styling*/
.navMenuOption-selected, .selectionCommandsPanel {
background: #101010 !important;
}
.mainDrawer {
background-color: rgba(0, 0, 0, 0.8);
}
.raised,
.fab,
a[data-role="button"] {
background: rgba(40, 40, 40, 0.8) !important;
transition: all 0.2s !important;
}
.raised:hover,
.fab:hover,
.navMenuOption:hover,
.actionSheetMenuItem:hover {
background: rgba(80, 80, 80, 0.8) !important;
}
.paper-icon-button-light:hover {
background-color: rgba(0, 0, 0, 0.4) !important;
}
.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;
}
progress {
background: rgba(0, 0, 0, 0.5) !important;
}
/*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)
}
}
/*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;
}
.raised:hover,
.fab:hover,
a[data-role="button"]:hover {
background: rgba(var(--accent),0.5) !important;
}
.subtitleappearance-preview {
background: linear-gradient(140deg,rgb(var(--accent)),#111) !important;
}
.navMenuOption-selected {
color: rgba(var(--accent));
}
.mdl-slider-background-lower {
background-color: rgba(var(--accent));
}
.playbackProgress>div {
background-color: rgba(var(--accent),0.75);
}
progress::-moz-progress-bar {
background-color: rgba(var(--accent),0.75);
}
progress::-webkit-progress-value {
background-color: rgba(var(--accent),0.75);
}
.taskProgressInner {
background: rgba(var(--accent),0.75) !important;
}
.transcodingProgress>div,
.itemProgressBarForeground {
background-color: rgba(var(--accent),0.35);
}
.mdl-slider-background-lower {
background-color: rgb(var(--accent));
}
.mdl-slider::-moz-range-thumb {
background: rgb(var(--accent));
}
.mdl-slider::-ms-thumb {
background: rgb(var(--accent));
}
.mdl-slider::-webkit-slider-thumb {
background: rgb(var(--accent));
}
.iconOsdProgressInner {
background: rgb(var(--accent));
}
.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(var(--accent)) !important;
}
#itemDetailPage .button-link {color: inherit !important;}
.navMenuOption:hover,
.actionSheetMenuItem:hover {
background-color: rgba(var(--accent),0.5) !important;
}
.emby-checkbox:checked + span + .checkboxOutline,
.emby-textarea:focus,
.emby-select-withcolor:focus,
.emby-input:focus,
.itemSelectionPanel {
border: 0.01em solid rgba(var(--accent),0.5) !important;
}
.upNextDialog-countdownText {
color: rgba(var(--accent));
}
.mdl-spinner__layer-1 {
border-color: rgba(var(--accent));
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
background: rgba(var(--accent), 0.5);
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
background: rgba(var(--accent));
}
::-webkit-scrollbar-thumb {
background: rgba(var(--accent),0.8) !important;
}
* {
scrollbar-color: rgba(var(--accent),0.8) #0000 !important;
}
/* Syncplay theming*/
.syncPlayIconCircle {
color: rgba(var(--accent),1) !important;
text-shadow: none !important;
}

7
type/dark.css
View File

@@ -1,6 +1,13 @@
/*This file contains color and style changes for the dark theme type*/
:root {--selection: 120, 120, 120;}
.transcodingProgress > div, .itemProgressBarForeground {
background-color: rgba(255,255,255,0.3);
}
.playbackProgress > div {
background-color: rgba(255,255,255,0.75);
}
/*Some themeing for the dashboard*/
#user_usage_report_table,

2
type/light.css
View File

@@ -318,6 +318,8 @@ h4,
.backgroundContainer {
background-color: #cecece !important;
}
.dialog, .innerCardFooter {
background-color: #cecece;
.formDialogHeader, .formDialogFooter {
background-color: #eaeaea !important;