Jellyfin_Themes/HInt_of_green_custom.css
2022-11-17 10:37:35 +01:00

1170 lines
No EOL
22 KiB
CSS

#loginPage {
background: url(https://git.yippie.land/Yippie/Jellyfin_Themes/raw/branch/main/resources/login.webp?maxwidth=1520&fidelity=grand);
background-size: cover
}
.manualLoginForm {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%
}
#loginPage .sectionTitle {
display: none
}
#loginPage .button-submit {
margin-top: 50px;
background: #2f5d62
}
#loginPage .checkboxContainer {
display: none
}
#loginPage .emby-input:focus,
.emby-textarea:focus {
border-color: #2f5d62
}
#loginPage .inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
color: #2f5d62
}
.manualLoginForm {
display: block;
margin-left: auto;
margin-right: auto;
width: 70%
}
#loginPage .sectionTitle {
display: none
}
#loginPage .button-submit {
margin-top: 50px;
background: #2f5d62
}
#loginPage .checkboxContainer {
display: none
}
#loginPage .emby-input:focus,
.emby-textarea:focus {
border-color: #2f5d62
}
#loginPage .inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
color: #2f5d62
}
#loginPage .raised.cancel.block.btnManual.emby-button {
display: none
}
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
display: none
}
.skinHeader.semiTransparent {
background-color: rgba(0, 0, 0, 0)
}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
background: 0 0;
background-color: rgba(0, 0, 0, 0)
}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
background: 0 0;
background-color: rgba(0, 0, 0, 0)
}
.headerTabs {
display: none
}
.emby-input:focus,
.emby-textarea:focus {
border-color: #2f5d62
}
@media all and (min-width:50em) {
.homePage .emby-scroller {
margin-right: 0
}
.homePage .emby-scrollbuttons {
display: none
}
.homePage .itemsContainer {
flex-wrap: wrap
}
}
.formDialogHeader {
border-top-left-radius: 10px;
border-top-right-radius: 10px
}
.formDialogFooter {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px
}
.cardOverlayContainer {
border-radius: 10px !important
}
.blurhash-canvas,
.button-flat,
.cardContent,
.cardContent-button,
.cardContent-shadow,
.cardImage,
.cardImageContainer,
.cardOverlayButton-hover,
.cardOverlayButtonIcon,
.cardPadder,
.chapterThumb,
.chapterThumbContainer,
.chapterThumbTextContainer,
.checkboxOutline,
.countIndicator,
.dialog,
.emby-input,
.emby-select-withcolor,
.emby-textarea,
.fab,
.headerButton,
.innerCardFooter,
.itemDetailImage,
.itemSelectionPanel,
.listItem-border,
.listItem:hover,
.listItemButton,
.listItemIcon,
.listItemImage,
.listItemImageButton,
.multiSelectCheckboxOutline,
.nowPlayingPageImage,
.paper-icon-button-light,
.paperList,
.playedIndicator,
.primaryImageWrapper>img,
.raised,
.sessionNowPlayingInnerContent,
.toast,
.upNextContainer,
.upNextDialog-poster-img,
.visualCardBox {
border-radius: 10px !important
}
.osdPoster img {
border-radius: 10px;
border: none
}
.mdl-slider::-moz-range-thumb {
border-radius: 10px
}
.mdl-slider::-ms-thumb {
border-radius: 10px
}
.mdl-slider::-webkit-slider-thumb {
border-radius: 10px
}
div[data-role=controlgroup] a[data-role=button]:first-child {
border-bottom-left-radius: 10px;
border-top-left-radius: 10px
}
div[data-role=controlgroup] a[data-role=button]:last-child {
border-bottom-right-radius: 10px;
border-top-right-radius: 10px
}
#dashboardPage .cardContent,
#dashboardPage .sessionNowPlayingInnerContent {
border-radius: 10px 10px 0 0 !important
}
#divVirtualFolders .cardContent,
#divVirtualFolders .cardImageContainer {
border-radius: 10px 10px 0 0 !important
}
#userProfilesPage .cardContent,
#userProfilesPage .cardImage {
border-radius: 10px 10px 0 0 !important
}
.cardOverlayFab-primary {
background-color: #00000000;
transition: 8sec
}
.cardOverlayButtonIcon {
background-color: #00000000 !important
}
.detailLogo {
display: none
}
.detailPagePrimaryContainer {
background: rgba(0, 0, 0, 0) !important
}
@media all and (min-width:100em) {
.itemBackdrop::after {
background-color: rgba(0, 0, 0, .05)
}
}
@media all and (min-width:32em) and (max-width:100em) {
.itemBackdrop::after {
background-color: rgba(0, 0, 0, .1) !important
}
.itemBackdrop {
height: 10em !important;
background-image: none !important
}
}
.itemProgressBar {
height: 2.5px;
background: rgba(0, 0, 0, 0)
}
.cardIndicators {
right: .3em;
top: .3em
}
.paper-icon-button-light:hover {
background-color: rgba(0, 0, 0, 0)
}
.cardOverlayButtonIcon {
background-color: #00000000 !important
}
.cardOverlayContainer {
background-color: rgba(0, 0, 0, .7)
}
.cardOverlayButtonIcon {
background-color: rgba(0, 0, 0, .5) !important
}
.cardOverlayButton {
padding: .3em
}
.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
}
}
.section0 .cardScalable {
display: none
}
.section0 .sectionTitle {
display: none
}
.section0 .itemsContainer {
align-items: center;
justify-content: center
}
.section0 button.itemAction.textActionButton {
height: 3.5em;
background: rgba(0, 0, 0, .5);
border-radius: 10px
}
.section0 .overflowBackdropCard,
.section0 .overflowSmallBackdropCard {
max-width: 9vw
}
.section0 .emby-scroller {
margin-right: 0
}
.section0 .emby-scrollbuttons {
display: none
}
.section0 .itemsContainer {
flex-wrap: wrap
}
@media (max-width:75em) and (orientation:landscape) {
.section0 {
display: none
}
}
@media (max-width:75em) {
.section0 {
display: none
}
}
.raised.homeLibraryButton:hover {
transition: filter 1s
}
.raised.homeLibraryButton {
transition: filter 1s
}
.homeLibraryButton {
min-width: 12em;
margin: .4em
}
#loginPage .readOnlyContent,
#loginPage form {
max-width: 44em
}
#loginPage h1 {
display: none
}
#loginPage .padded-left.padded-right.padded-bottom-page {
margin-top: 50px
}
.material-icons.person {
display: none
}
.headerButton.headerButtonRight.headerUserButton.paper-icon-button-light {
display: none
}
.emby-tabs-slider {
display: none
}
div.alphaPickerRow-vertical {
display: none !important
}
.btnShuffle.button-flat {
display: none
}
.trackSelections {
max-width: 22em
}
#scenesCollapsible {
display: none
}
#castContent .card.overflowPortraitCard {
width: 4.2cm;
font-size: 90%
}
#castContent .personCard {
width: auto
}
#castContent .personCard .cardBox {
margin-bottom: 0;
margin-right: 0
}
#castContent {
flex-wrap: wrap;
max-height: 9.75em
}
div.personCard>:first-child>:first-child {
display: none
}
.itemDetailPage .cardText {
text-align: left
}
.itemDetailPage .textActionButton {
text-align: left
}
@media all and (min-width:50em) {
.itemDetailPage .emby-scroller {
margin-right: 0
}
.itemDetailPage .emby-scrollbuttons {
display: none
}
.itemDetailPage .itemsContainer {
flex-wrap: wrap
}
}
@media all and (min-width:50em) {
.homePage .emby-scroller {
margin-right: 0
}
.homePage .emby-scrollbuttons {
display: none
}
.homePage .itemsContainer {
flex-wrap: wrap
}
}
.headerTabs.sectionTabs {
text-size-adjust: 110%;
font-size: 110%
}
.pageTitle {
margin-top: auto;
margin-bottom: auto
}
.emby-tab-button {
padding: 1.75em 1.7em
}
.itemDetailPage .moreFromSeasonSection {
display: none !important
}
.itemDetailPage .btnPlayTrailer {
display: none !important
}
.itemDetailPage .btnUserRating {
display: none !important
}
@media only screen and (max-device-width:429px) and (max-device-height:927px) and (-webkit-device-pixel-ratio:3) {
.layout-mobile #itemDetailPage .detailLogo {
height: 35%;
top: 21%
}
}
@media only screen and (max-device-width:391px) and (max-device-height:845px) and (-webkit-device-pixel-ratio:3) {
.layout-mobile #itemDetailPage .detailLogo {
top: 28%
}
}
@media only screen and (max-device-width:376px) and (max-device-height:813px) and (-webkit-device-pixel-ratio:3) {
.layout-mobile #itemDetailPage .detailLogo {
top: 33%
}
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 100;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Th.woff2) format('woff2'), url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Th.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 300;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Lt.woff2) format('woff2'), url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Lt.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 400;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Rg.woff2) format('woff2'), url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Rg.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 700;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Md.woff2) format('woff2'), url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Md.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 800;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Bd.woff2) format('woff2'), url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Bd.woff) format('woff')
}
@font-face {
font-family: 'Netflix Sans';
font-weight: 900;
src: url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Blk.woff2) format('woff2'), url(https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/NetflixSans_W_Blk.woff) format('woff')
}
body,
h1,
h2,
h3,
h4 {
font-family: 'Netflix Sans' !important
}
.videoSubtitles {
font-family: 'Netflix Sans', sans-serif !important;
font-weight: 700 !important;
text-shadow: 0 0 8px #000 !important
}
video::-webkit-media-text-track-display {
font-family: "Netflix Sans", sans-serif !important;
font-weight: 700 !important;
text-shadow: #000 0 0 .2em !important
}
video::-webkit-media-text-track-container {
font-family: "Netflix Sans", sans-serif !important;
font-weight: 700 !important;
text-shadow: #000 0 0 .2em !important
}
video:cue {
font-family: "Netflix Sans", sans-serif !important;
font-weight: 700 !important;
text-shadow: #000 0 0 .2em !important
}
#itemDetailPage .detailLogo {
position: static;
margin-left: 32.5%;
display: block;
-webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, .75));
filter: drop-shadow(0 0 10px rgba(2, 2, 2, .75));
flex-shrink: 0;
background-position: 0 50%;
margin-top: -8vh
}
.layout-desktop .detailRibbon {
margin-top: 0
}
.layout-mobile .detailRibbon {
margin-top: 0 !important
}
.layout-mobile .detailLogo {
display: none !important
}
.layout-mobile .detailPagePrimaryContainer.padded-left.padded-right.detailRibbon {
padding-top: 4.5rem !important
}
#itemDetailPage .itemName.infoText.parentNameLast {
display: none
}
.hide+.detailPageWrapperContainer .itemName {
display: block !important
}
.itemName {
margin: .5em 0 !important
}
.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast {
display: block
}
.backdropImage {
filter: blur(100px) saturate(170%) contrast(150%) brightness(50%)
}
.backgroundContainer.withBackdrop {
background-color: rgba(47, 93, 98, .3)
}
.layout-desktop .itemBackdrop::after {
opacity: 0;
margin-top: -30px
}
.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
border-radius: 0 !important;
background: rgba(0, 0, 0, .7)
}
.itemProgressBar {
height: 2000em;
background: #0000
}
.playbackProgress>div {
background-color: rgba(0, 0, 0, .75)
}
.itemProgressBarForeground,
.transcodingProgress>div {
background-color: rgba(0, 0, 0, .3)
}
.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
border-radius: 0 !important;
background: rgba(0, 0, 0, 0)
}
.button-link {
color: #5e8b7e
}
@media (hover:hover) and (pointer:fine) {
.paper-icon-button-light:hover:not(:disabled) {
color: #a7c4bc;
background-color: rgba(47, 93, 98, .2)
}
}
.emby-select,
.emby-select-withcolor {
background-color: rgba(223, 238, 234, .2);
border-style: hidden
}
.mdl-slider-background-lower {
background-color: #a7c4bc
}
.mdl-slider::-moz-range-thumb {
background: #a7c4bc
}
.mdl-slider::-ms-thumb {
background: #a7c4bc
}
.mdl-slider::-webkit-slider-thumb {
background: #a7c4bc
}
.iconOsdProgressInner {
background: #a7c4bc
}
.videoOsdBottom {
background: rgba(0, 0, 0, .7);
padding-top: 1em
}
.upNextDialog-countdownText {
color: #a7c4bc
}
.navMenuOption:hover {
background: rgba(223, 238, 234, .2)
}
.block {
background-color: #2f5d62
}
.checkboxIcon-checked {
background-color: #2f5d62;
border-style: none
}
.emby-checkbox:checked+span+.checkboxOutline {
background-color: #2f5d62;
border-style: none
}
.defaultCardBackground1 {
background-color: #698474
}
.defaultCardBackground2 {
background-color: #889e81
}
.defaultCardBackground3 {
background-color: #bac7a7
}
.defaultCardBackground4 {
background-color: #004445
}
.defaultCardBackground5 {
background-color: #a7c4bc
}
.navMenuOption-selected {
background-color: #a7c4bc !important
}
:root {
--swiper-theme-color: #2f5d62
}
progress {
background: rgba(0, 0, 0, .5) !important;
border: 1px solid rgba(167, 196, 188, .22)
}
progress::-webkit-progress-bar {
background: rgba(0, 0, 0, .5) !important;
border: 0 solid rgba(167, 196, 188, .22)
}
progress::-moz-progress-bar {
background-color: rgba(167, 196, 188, .75)
}
progress::-webkit-progress-value {
background-color: rgba(167, 196, 188, .75)
}
#divRunningTasks span {
color: rgba(167, 196, 188, .75) !important
}
.taskProgressOuter {
background: rgba(0, 0, 0, .5) !important;
border: 1px solid rgba(167, 196, 188, .22)
}
.taskProgressInner {
background: rgba(167, 196, 188, .75) !important
}
#scheduledTasksPage span {
color: rgba(167, 196, 188, .75) !important
}
.progressring-spiner {
border-color: #a7c4bc;
border-width: .35em
}
.progressring {
margin: .4em
}
.progressring-bg {
display: none
}
.blurhash-canvas {
filter: opacity(60%) saturate(60%)
}
div[data-role=controlgroup] a.ui-btn-active {
background: rgba(0, 0, 0, .5) !important;
color: #fff !important
}
a[data-role=button]:hover {
background: rgba(167, 196, 188, .8) !important
}
div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
margin: 0 !important
}
.button-submit:hover {
background: rgba(167, 196, 188, .8)
}
.cardOverlayButtonIcon:hover {
background-color: rgba(167, 196, 188, .5) !important
}
.cardOverlayButtonIcon {
background-color: rgba(0, 0, 0, 0) !important
}
.cardOverlayContainer {
background-color: rgba(0, 0, 0, .3)
}
.button-flat:hover {
color: #2f5d62
}
.actionSheetMenuItem:hover {
background-color: #2f5d62
}
.listItemIcon:not {
background-color: #2f5d62 !important
}
.dashboardFooter {
display: none
}
.button-submit:focus {
background-color: #2f5d62
}
.toastVisible {
color: #2f5d62;
background: #c9e4c5
}
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance:none) {
.backdropImage {
filter: none
}
.backgroundContainer.withBackdrop {
background-color: rgba(0, 0, 0, .7)
}
}
}
.inputLabelFocused {
color: #a7c4bc
}
.listItemIcon {
background-color: #2f5d62 !important
}
.mdl-spinner__layer-1 {
border-color: #2f5d62
}
.mdl-spinner__layer-2 {
border-color: #5e8b7e
}
.mdl-spinner__layer-3 {
border-color: #a7c4bc
}
.mdl-spinner__layer-4 {
border-color: #dfeeea
}
.countIndicator,
.fullSyncIndicator,
.playedIndicator {
background: rgba(47, 93, 98, .6);
color: #fff
}
.playedIndicator {
background: rgba(47, 93, 98, .6);
color: #fff
}
.textActionButton:hover {
text-decoration: none !important;
color: #a7c4bc !important
}
.listItemIcon-transparent {
background-color: rgba(0, 0, 0, 0) !important
}
.volume_off {
color: #a7c4bc !important
}
.dialog {
background-color: #0d7377
}
.listItem-border {
border-style: none
}
.endsAt,
.endsAtText {
display: none !important
}
.playstatebutton-icon-played {
color: #5e8b7e
}
.playstatebutton-icon-played:hover {
color: #2f5d62
}
:not(.detailImageContainer)>.card:not(.overflowSquareCard) .cardImageContainer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
background-size: cover;
transition: .4s
}
:not(.detailImageContainer)>.card:not(.overflowSquareCard):hover .cardImageContainer::before {
transform: scale(1.02)
}
:not(.detailPageSecondaryContainer)>.card:not(.overflowSquareCard) .cardImageContainer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
background-size: cover;
transition: .4s
}
:not(.detailPageSecondaryContainer)>.card:not(.overflowSquareCard):hover .cardImageContainer::before {
transform: scale(1.02)
}
.button-accent-flat {
color: #5e8b7e !important
}
.jstree-default .jstree-wholerow-clicked {
background: #5e8b7e !important
}
.metadataSidebarIcon {
color: #2f5d62
}
.jstree-wholerow-hovered {
background: #5e8b7e !important
}
.collapseContent,
.formDialogFooter:not(.formDialogFooter-clear),
.formDialogHeader:not(.formDialogHeader-clear),
.paperList,
.visualCardBox {
background-color: rgba(0, 0, 0, 0) !important
}
.ratingbutton-icon-withrating {
color: #2f5d62
}
.playerStats-stat-label,
.sectionTitleTextButton:hover {
color: #a7c4bc !important
}
.selectionCommandsPanel {
background: #2f5d62
}
.itemSelectionPanel {
border-top-color: #2f5d62;
border-top-style: solid;
border-top-width: 1px;
border-right-color: #2f5d62;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: #2f5d62;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #2f5d62;
border-left-style: solid;
border-left-width: 1px;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1
}
.button-submit {
background: #2f5d62
}
.overview-expand emby-button:hover {
color: #2f5d62
}
#btnShutdown.raised.emby-button:hover,
#deviceDeleteAll.raised.button-alt.headerHelpButton.emby-button:hover {
color: red;
background: pink
}
#btnRestartServer.raised.emby-button:hover {
color: #e27802;
background: #fcecdd
}
.raised.btnRefresh.emby-button:hover {
color: #293b5f;
background: #dbe6fd
}
.raised.emby-button:hover {
color: #2f5d62;
background: #c9e4c5
}
.fab.btnAddDevice.submit.sectionTitleButton.emby-button:hover,
.fab.btnAddProvider.submit.emby-button:hover,
.fab.btnAddUser.submit.sectionTitleButton.emby-button:hover {
color: #21094e;
background: #beaee2
}
.sessionCardFooter.cardFooter,
.visualCardBox-cardFooter {
color: #2f5d62;
background: #a7c4bc;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px
}
.emby-checkbox-label:hover {
color: #a7c4bc
}
.videoOsdBottom {
background-color: rgba(0, 0, 0, 0) !important;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)) !important
}
.headerTop {
background-color: rgba(0, 0, 0, 0) !important;
background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) !important
}
.sliderBubble {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #2f5d62;
background: #a7c4bc;
box-shadow: 0 3px 3px rgba(0, 0, 0, .2)
}
.subtitleSyncContainer {
background: rgba(0, 0, 0, .5)
}
:root {
--accent: 255, 255, 255;
}
.itemProgressBar {
height: 5px;
background: rgba(0, 0, 0, .5);
}
.playbackProgress>div,
.itemProgressBarForeground {
background-color: rgba(var(--accent), 0.75) !important;
}
.transcodingProgress>div {
background-color: rgba(var(--accent), 0.35) !important;
}
#loginPage {
background: url(https://git.yippie.land/Yippie/Jellyfin_Themes/raw/branch/main/resources/login.webp);
background-size: cover
}
.backdropImage {
filter: blur(2px) saturate(120%) contrast(120%) brightness(20%);
}
.playedIndicator {
background: #5dd000;
}
.headerCastButton {
display: none;
}
.headerSyncButton {
display: none;
}
#castCollapsible {
display: none;
}
div.nextUpSection {
display: none;
}
div.starRatingContainer {
display: none;
}
.itemBackdrop {
height: 15vh;
}
.layout-mobile .itemBackdrop {
height: 10vh;
}