137 lines
2.9 KiB
CSS
137 lines
2.9 KiB
CSS
/*
|
|
This file styles jellyfin and can be imported by adding:
|
|
@import url("https://bocken.org/other/jellyfin.css");
|
|
under Server -> General -> Custom CSS Code
|
|
*/
|
|
/* jellyscrub default: width: 15vw, annoying for smaller screen sizes */
|
|
.chapterThumbContainer{
|
|
width: min(80vw, 500px, 50vh);
|
|
}
|
|
/* Attempt to change accent color */
|
|
|
|
:root{
|
|
--nord0: #2E3440;
|
|
--blue: #5E81AC;
|
|
--lightblue: #81A1C1;
|
|
--swiper-theme-color: var(--blue);
|
|
}
|
|
|
|
.selectionCommandsPanel,
|
|
.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator,
|
|
.itemProgressBarForeground,
|
|
.mdl-slider-background-lower,
|
|
.iconOsdProgressInner{
|
|
background-color: var(--blue);
|
|
}
|
|
.mdl-slider,
|
|
.emby-tab-button:hover{
|
|
color: var(--blue);
|
|
}
|
|
@media (hover: hover) and (pointer: fine){
|
|
.paper-icon-button-light:hover:not(:disabled) {
|
|
color: var(--lightblue);
|
|
background-color: rgba(var(--blue), 0.2);
|
|
}
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.mdl-spinner__layer{
|
|
border-color: var(--blue);
|
|
}
|
|
|
|
/* volume and timeline button color */
|
|
/* Need to be separate to apply*/
|
|
input[type="range"]::-moz-range-thumb{
|
|
background-color: var(--blue);
|
|
}
|
|
input[type="range"]::-webkit-slider-thumb{
|
|
background-color: var(--blue);
|
|
}
|
|
|
|
.listItemIcon:not(.listItemIcon-transparent),
|
|
.navMenuOption-selected,
|
|
.button-submit,
|
|
.defaultCardBackground1,
|
|
.defaultCardBackground2,
|
|
.defaultCardBackground3,
|
|
.defaultCardBackground4,
|
|
.defaultCardBackground5,
|
|
.emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground
|
|
{
|
|
background-color: var(--blue) !important;
|
|
}
|
|
.button-link,
|
|
.button-flat:hover{
|
|
color: var(--blue);
|
|
}
|
|
.emby-checkbox:checked + span + .checkboxOutline{
|
|
border-color: var(--blue);
|
|
}
|
|
.btnUserRating:hover,
|
|
.cardOverlayButton:has(.favorite):hover{
|
|
color: #BF616A !important;
|
|
}
|
|
|
|
.emby-input:focus, .emby-textarea:focus{
|
|
border-color: var(--blue);
|
|
}
|
|
.emby-select-withcolor:focus{
|
|
border-color: var(--blue) !important;
|
|
}
|
|
.listItemIcon:not(.listItemIcon-transparent),
|
|
.navMenuOption-selected,
|
|
.button-submit,
|
|
.defaultCardBackground1,
|
|
.defaultCardBackground2,
|
|
.defaultCardBackground3,
|
|
.defaultCardBackground4,
|
|
.defaultCardBackground5,
|
|
.emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground,
|
|
.taskProgressInner
|
|
{
|
|
background-color: var(--blue) !important;
|
|
}
|
|
|
|
#divRunningTasks > p > progress + span,
|
|
div.taskProgressOuter + span{
|
|
color: var(--blue) !important;
|
|
}
|
|
progress[value] {
|
|
background-color: var(--blue);
|
|
}
|
|
progress[value]::-webkit-progress-value {
|
|
background-color: var(--blue);
|
|
}
|
|
|
|
/* For Mozilla-based browsers (Firefox) */
|
|
progress[value]::-moz-progress-bar {
|
|
background-color: var(--blue);
|
|
}
|
|
|
|
.skinHeader,
|
|
.mainDrawer{
|
|
background: var(--nord0);
|
|
}
|
|
.card{
|
|
transition: 200ms;
|
|
}
|
|
.card:hover{
|
|
scale: 1.05;
|
|
}
|
|
|
|
.listItem{
|
|
transition: 200ms;
|
|
}
|
|
.listItme
|
|
.listItem:hover {
|
|
scale: 1.02;
|
|
}
|
|
@media (max-width: 64em){
|
|
.listItemImageButton, .listItemIndicators {
|
|
font-size: initial !important;
|
|
}
|
|
}
|
|
.emby-scroller{
|
|
overflow: visible !important;
|
|
}
|