2024-11-17, 09:58 PM
Here's my very messy one :
It's scyfin theme from loof2736 but some parts are edited to feel more consistent.
Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
@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;
}
.emby-textarea {
font-family: monospace;
font-size: 10pt;
}
.trackSelections {
display: none;
}
.itemTags {
display: none;
}
.itemExternalLinks {
display: none;
}
.btnPlayTrailer{
display: none;
}
.btnPlaystate {
display: none;
}
.btnPreviousChapter {
display: none;
}
.btnNextChapter {
display: none;
}
.iconOsd {
display: none;
}
.videoOsdBottom .buttons .mediaInfoCriticRating {
display: none;
}
.videoOsdBottom .buttons .mediaInfoItem {
display: none;
}
.mediaInfoCriticRatingFresh, .mediaInfoCriticRatingRotten {
display: none;
}
.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {
background: #fff;
}
.layout-desktop .mainDetailButtons .btnPlay::after {
content: "Lire" !important;
}
#skipIntro {
&.upNextContainer {
background-color: transparent !important;
backdrop-filter: none !important;
}
.emby-button {
border-radius:100px !important;
background-color: rgba(0, 0, 0, 0.7) !important;
&:hover, &:focus {
background-color: rgba(151, 151, 151, 0.7) !important;
}
}
}
#skipIntro .emby-button:hover {
background: rgb(var(--accent));
box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
filter: brightness(1.2);
}
#skipIntro .emby-button:focus {
background: rgb(var(--accent));
box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
}
.mdl-slider::-webkit-slider-thumb {
background: #fff;
}
.detailRibbon {
background: linear-gradient(to top, var(--primary-background-color), transparent) !important;
}
.backdropContainer {
height: 80vh;
}
.layout-desktop .detailPageContent {
padding-left: 3.3% !important;
padding-right: 3.3% !important;
}
[dir=ltr] .padded-right,
[dir=rtl] .padded-left {
padding-right:0%;
}
.mainDetailButtons {
margin-right: 3.3%;
}
.emby-scroller {
margin-right: 0% !important;
}
@media (max-width: 1599px) {
.layout-desktop .headerRight {
margin-right: 15px !important;
}
.layout-desktop .headerLeft {
margin-left: 15px !important;
}
.headerRight {
position: absolute !important;
right: 0px !important;
}
}
.layout-mobile .itemBackdrop {
margin-top: 0px;
}
.layout-mobile .headroom--top .headerRight ,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
background: rgba(255, 255, 255, 0) !important;
backdrop-filter: none !important;
}
.layout-mobile .headroom--top,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)) !important; !important;
transition: background .5s ease-in-out !important;
}
.layout-mobile .detailSectionContent {
padding: 0px 20px !important;
}
.layout-mobile .headerRight {
background-color: var(--primary-background-transparent) !important;
backdrop-filter: none !important;
}
.headerTabs {
backdrop-filter: blur !important;
}
.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .parentName {
text-align:left;
justify-content: left;
}
[dir=ltr] .padded-left {
padding-left:5%;
}
.mainDetailButtons {
margin-right: 5%;
}
/* Fix for group section labels */
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
min-width: 95px;
}
.layout-mobile .headroom--not-top {
background: rgba(0, 0, 0, 0.41) !important;
transition: backdrop-filter .5s ease-in-out !important;
}
.material-icons.fast_rewind::before {
content: "\e059";
}
.material-icons.fast_forward::before {
content: "\e057";
}
.material-icons.audiotrack::before {
content: "\e91f";
}
/* Moz */
.mdl-slider::-moz-range-thumb {
height: 8px !important;
width: 8px !important;
border-radius: 100px !important;
}
.mdl-slider-hoverthumb:hover::-moz-range-thumb {
transform: scale(2);
}
.mdl-slider-background-flex {
height: 9px !important;
background: hsla(0,0%,100%,.15) !important;
backdrop-filter: blur(15px);
}
.videoOsdBottom {
padding-bottom: 0.65em;
}
.cardOverlayButton-br {
bottom: initial;
top: 0;
}
.playedIndicator {
background: #fff !important;
color: #222;
}
.listItemImage-large {
border-radius: 10px;
}
.layout-desktop .detailSectionContent {
padding: 20px 20px 0px 20px !important;
}
.detailLogo {
height: 22vh;
width: 22vw;
}
@media (max-width: 68.75em) {
.detailLogo {
display: block;
}
}
[dir="ltr"] .listItem {
padding: 10px 10px 10px 10px;
text-align: left;
}
[dir="ltr"] .cardIndicators {
right: 0;
left: .225em;
padding: 3px;
}
.countIndicator, .playedIndicator {
border-radius: 11px;
width: fit-content;
padding-left: 6px;
padding-right: 6px;
}
.countIndicator {
color: #000000e7 !important
}
@media (hover: hover) and (pointer: fine) {
.paper-icon-button-light:hover:not(:disabled) {
color: rgb(255, 255, 255) !important;
transform: scale(1.2);
}
}
@media (hover: hover) and (pointer: fine) {
.paper-icon-button-light:hover:not(:disabled) {
color: var(--primary-accent-color) !important;
background-color: transparent !important;
}
}
.alphaPicker {
display: none;
}
.material-icons.sort_by_alpha::before {
content: "\e164";
}
.material-icons.view_comfortable::before, .material-icons.view_comfy::before {
content: "\e5c3";
}
[dir="ltr"] .padded-left {
padding-left: 4%;
}
[dir="ltr"] .padded-right, [dir="rtl"] .padded-left {
padding-right: 4%;
}
[dir="ltr"] .itemsContainer > .card > .cardBox {
margin-left: .6em;
margin-right: .6em;
}
.layout-desktop .headerTabs {
margin-left: 0px !important;
}
.sectionTabs {
background: transparent !important;
}
.selectionCommandsPanel{
background-color: rgb(21, 21, 21) !important;
}
/* .pageTitleWithDefaultLogo {
background-image: url(https://custom_image.png);
} */
@media (max-width: 1599px) {
.layout-desktop .headerTabs {
margin-top: 0px !important;
}
}