/* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ /* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ /* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ /* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ /* 88 */ /* dP */ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); @import url("/css/defaults/transparent.css"); * { outline: none !important; } html, body, .wizard-background, .content-container, html, body, .wizard-background, .content-container, #main-container\ dark > mat-sidenav-container, #main-container\ dark > mat-sidenav-container > mat-sidenav-content { color: var(--text) !important; background: var(--main-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .content-container .top-bar-container { background: transparent !important; } .container-alert { color: var(--text-hover); background: var(--transparency-dark-50) !important; border-color: rgb(var(--accent-color)) !important; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, legend { color: var(--text-hover); } /* LINKS */ a { color: var(--link-color); } a:hover { color: var(--link-color-hover); } .forgot-password:active, .forgot-password:focus, .forgot-password:hover { color: var(--link-color-hover) !important; } /* SCROLLBAR */ ::-webkit-scrollbar-thumb { border-radius: 3px; background: rgb(255 255 255 / 30%); } /* TOP NAV */ .top-search-bar .mat-form-field-flex { border: 1px solid rgba(255, 255, 255, 0.10) !important; background: var(--transparency-dark-45); } /* Drop down menu */ .mat-menu-panel, #requestsToDisplayDropdown-panel { background: var(--drop-down-menu-bg); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { color: rgb(var(--accent-color)); } .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { background: var(--transparency-dark-25); } #main-container\ dark > mat-sidenav-container > mat-sidenav-content > mat-toolbar > button { color: rgb(var(--accent-color)); } /* SIDE NAV */ @media only screen and (min-width: 1025px){ #main-container\ dark > mat-sidenav-container > mat-sidenav-content { margin-left: 256px !important; } } /* OMBI TEXT */ .sidenav-container .sidenav .application-name { color: rgb(var(--accent-color)) !important; } @media (min-width: 768px) { .sidenav-container .sidenav { background: var(--transparency-dark-45) !important; } } .sidenav-container .sidenav { background: var(--modal-bg-color) !important; color: var(--text-hover); font-family: Montserrat, sans-serif; width: 16rem; } .sidenav-container .sidenav .menu-spacing { margin-bottom: 5%; /* padding-left: .5rem; padding-right: .5rem; */ } .mat-drawer-backdrop.mat-drawer-shown { background: var(--transparency-dark-50); backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .mat-list-base { padding-top: 8px; display: block; -webkit-tap-highlight-color: transparent; padding-left: .5rem; padding-right: .5rem; } .sidenav-container[_ngcontent-icv-c127] .sidenav[_ngcontent-icv-c127] .active-list-item[_ngcontent-icv-c127] { color: rgb(var(--accent-color)) !important; } .sidenav-container .sidenav .active-list-item, .sidenav-container .sidenav .active-list-item:hover { color: rgb(var(--accent-color)) !important; background: var(--transparency-light-15) !important; border-radius: .375rem !important; padding: 10px 20px; height: auto; } [id*="nav-"] { color: var(--text) !important; } .sidenav-container .sidenav .mat-list-item { font-family: Roboto, sans-serif; font-size: 16px; font-weight: 400; padding: 10px 0 0 0; height: auto; margin-bottom: .5rem; width: 15rem !important; padding-left: .5rem !important; padding-right: .5rem !important; } .sidenav-container .sidenav .mat-drawer-inner-container { width: 100%; height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; } .sidenav-container .sidenav .mat-list-base .mat-list-item .mat-list-item-content, .sidenav-container .sidenav.mat-list-base .mat-list-option .mat-list-item-content { padding: 0 !important; } .sidenav-container .sidenav .mat-list-base .mat-list-item .mat-list-item-ripple, .sidenav-container .sidenav.mat-list-base .mat-list-option .mat-list-item-ripple { display: none !important; } .sidenav-container .sidenav.mat-action-list .mat-list-item:focus, .sidenav-container .sidenav.mat-list-option:focus, .sidenav-container .sidenav .mat-nav-list .mat-list-item:focus, .sidenav-container .sidenav.mat-action-list .mat-list-item:focus:hover, .sidenav-container .sidenav.mat-list-option:focus:hover, .sidenav-container .sidenav .mat-nav-list .mat-list-item:focus:hover { background: hsla(0, 0%, 100%, .04); border-radius: .375rem !important; color: rgb(var(--accent-color)) !important; } .sidenav-container .sidenav .mat-action-list .mat-list-item:hover:not(.active-list-item), .mat-list-option:hover:not(.active-list-item), .sidenav-container .sidenav .mat-nav-list .mat-list-item:hover:not(.active-list-item) { background: hsla(0, 0%, 100%, .04); border-radius: .375rem !important; color: var(--text-hover) !important; } .active-advanced.fa-filter{ color: rgb(var(--accent-color)); background:none; } /* DISCOVER PAGE */ .discover-filter-buttons-group { background: var(--transparency-light-10) !important; border: 1px solid rgb(255 255 255 / 10%) !important; border-radius: 30px; color: var(--text-hover); margin-bottom: 10px; margin-right: 30px; } .discover-filter-buttons-group .button-active { background: var(--transparency-dark-45) !important; } #search-filter{ color:var(--text); } .small-middle-container [div*="_ngcontent-"] { margin: auto; width: 100% !important; } .small-middle-container.ng-star-inserted { width: 85% !important; margin: 10px auto auto !important; } .small-middle-container[div*="_ngcontent-"] { width: 95% !important; margin: 10px auto auto !important; } /* @media (min-width: 768px) { .content-container { margin-left: 255px !important; } .content-container .section { margin: 6px !important; } } */ .detailed-container { border: none !important; background-color: var(--transparency-dark-25) !important; } .detailed-container .poster { border: 1px solid transparent !important; } /* CARDS */ .ombi-card { padding: 0px !important; margin: 5px !important; } /* #cardImage, .ombi-card { border-radius: .75rem !important; } #cardImage { min-height: 225px; } */ .p-carousel-indicators, .p-carousel-items-container { display: flex; padding-bottom: 5px; flex-direction: row; } .c .card-top-info { top: -1px !important; position: absolute; border-radius:10px 10px 0 0 !important; background-color: var(--transparency-dark-90) !important; } .ombi-card .button-request-container .button-request { /* padding-left: .5rem !important; padding-right: .5rem !important; */ } #info-wrapper .mat-card, .mat-expansion-panel { background: var(--main-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } #info-wrapper .mat-card.mat-card-flat:not([class*=mat-elevation-z]) { box-shadow: 0 0 0 0 rgb(0 0 0 / 20%), 0 0 0 0 rgb(0 0 0 / 14%), 0 0 0 0 rgb(0 0 0 / 12%); background: transparent; } #info-wrapper .mat-card .label, #info-wrapper .mat-card .mat-card-header { color: var(--text-hover); } #info-wrapper .mat-card, #info-wrapper .mat-card-content { color: var(--text); } .btn-ombi { background-color: var(--transparency-dark-85) !important; /* backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; */ border-radius: .375rem !important; padding: 0 .375rem !important; } .btn-ombi.mat-raised-button { line-height: 29.4px !important; } .btn-ombi:hover { background-color: var(--button-color-hover) !important; color: var(--button-text-hover) !important; } .c .button-request-container { padding: 0 .375rem !important; /* padding: .375rem !important; */ } .ombi-card .button-request-container { position: relative; width: 100%; margin: -40px 0 0 !important; opacity: 0; transition: .3s ease; } .p-carousel-item, .ombi-card { transition: .3s ease-in-out; } .ombi-card #cardImage:hover { /* transform: scale(1.02) !important; */ } /* Search results */ @media (min-width: 768px) { #searchResults .ombi-card { margin-bottom: 15px !important; margin-left: 0px !important; height: 100% !important; } } #searchResults { margin-bottom: 15px !important; } /* Wizard */ .wizard-background .mat-stepper-horizontal, .mat-stepper-vertical, .mat-tooltip { background: rgb(0, 0, 0, .25) !important; } small.important { color: red; background: var(--transparency-dark-25); border-radius: 5px; padding: 5px; } .mat-step-header .mat-step-label, .mat-step-header .mat-step-optional { color: var(--text) !important; } /* Accents */ .mat-step-header .mat-step-icon { background-color: rgb(var(--accent-color)) !important; color: var(--button-text) !important; } .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { background-color: rgb(var(--accent-color)) !important; } /* slide toggle */ .mat-slide-toggle.mat-checked .mat-slide-toggle-bar { background-color: rgba(var(--accent-color), .54) !important; } .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { background-color: rgb(var(--accent-color)) !important; } /* BUTTONS */ .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .buttons .mat-raised-button { color: var(--button-text) !important; background-color: var(--button-color) !important; } .mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex):not(.mat-raised-button.mat-error) { box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); background: var(--button-color); border: 1px solid var(--button-color); } .mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex):not(.mat-raised-button.mat-error):hover { box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); background: var(--button-color-hover) !important; border: 1px solid var(--button-color-hover) !important; } .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { border-color: rgb(var(--accent-color)); } .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple { background-color: rgb(var(--accent-color)); } /* Plex buttons */ .viewon-btn.plex, .viewon-btn.emby, .viewon-btn.jellyfin { background: transparent !important; } /* login button */ button#sign-in { color: var(--button-text) !important; } .mat-fab.mat-primary, .mat-flat-button.mat-primary, .mat-mini-fab.mat-primary, .mat-raised-button.mat-primary { box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%); background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } button.admin-cog { color: var(--button-color) !important; } .grow:hover { color: var(--text-hover); } /* FORMS */ ::ng-deep .dark .mat-form-field.mat-focused .mat-form-field-label, ::ng-deep .mat-form-field.mat-focused .mat-form-field-label { color: rgb(var(--accent-color)) !important; } .mat-form-field.mat-focused .mat-form-field-label.mat-accent, .mat-focused .mat-form-field-required-marker, .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix:after, .mat-form-field.mat-focused.mat-accent .mat-select-arrow, .mat-toolbar .mat-focused .mat-form-field-ripple, .mat-toolbar .mat-form-field-ripple, .mat-toolbar .mat-form-field-underline, .mat-toolbar .mat-focused .mat-form-field-label, .mat-toolbar .mat-form-field-label, .mat-toolbar .mat-form-field.mat-focused .mat-select-arrow, .mat-toolbar .mat-select-arrow, .mat-toolbar .mat-select-value, .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick, .mat-form-field.mat-focused .mat-form-field-label, .mat-form-field.mat-focused .mat-form-field-ripple { color: rgb(var(--accent-color)) !important; } .mat-toolbar .mat-form-field-underline,.mat-toolbar .mat-form-field-ripple,.mat-toolbar .mat-focused .mat-form-field-ripple { background-color: rgb(var(--accent-color)); } .mat-input-element,.login-card .mat-input-element { caret-color: rgb(var(--accent-color)) !important; } input:-internal-autofill-selected { appearance: menulist-button; background-image: none !important; background-color: -internal-light-dark(rgba(232, 240, 254, 0), rgba(70, 90, 126, 0.4)) !important; color: -internal-light-dark(black, white) !important; } .mat-form-field.mat-focused .mat-form-field-ripple, .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-toolbar .mat-form-field-underline,.mat-toolbar .mat-form-field-ripple, .mat-toolbar .mat-focused .mat-form-field-ripple { background-color: rgb(var(--accent-color)); } .form-control:focus { border-color: rgb(var(--accent-color)); box-shadow: 0 0 0 0.2rem rgb(var(--accent-color) / 25%); } .form-control:focus { border: 1px solid rgb(var(--accent-color)); } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px rgb(var(--accent-color)), inset 0 0 0 1px rgb(var(--accent-color)), inset 0 0 0 1px rgb(var(--accent-color)), inset 0 0 0 1px rgb(var(--accent-color)); } .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus { border-color: rgb(var(--accent-color)); } /* Check box*/ .mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element, .mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element { background: rgb(var(--accent-color)) !important; } /* popups */ .mat-snack-bar-container { color: var(--text); background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) } /* Login page */ .login-card H1.login_logo { color: rgb(var(--accent-color)) !important; } /* TABLES */ .table { color: var(--text); } .mat-table-sticky, .mat-table tbody, .mat-table tfoot, .mat-table thead, [mat-footer-row], [mat-header-row], [mat-row], mat-footer-row, mat-header-row, mat-row { background: rgb(255 255 255 / 0%); } .mat-paginator, .mat-table { background: var(--transparency-dark-25) } tr.mat-header-row { background: var(--transparency-dark-45) } .table thead th { vertical-align: bottom; border-bottom: 2px solid var(--transparency-light-25); border-top: 1px solid var(--transparency-light-25); } /* Details page */ #info-wrapper .p-carousel-item { max-width: none; } #viewCollectionBtn { background: var(--button-color); } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { background: rgb(var(--accent-color)); color: #121212; } #info-wrapper .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary { background-color: rgb(var(--accent-color)); color: var(--label-text-color); } hr { border-top: 1px solid rgb(var(--accent-color)); } .full-screenshot.enabled.overlay { background-image: linear-gradient(180deg, transparent, 50%, rgb(var(--accent-color), 0.1)); } .social-icons-container { background-color: hsl(0deg 0% 0% / 85%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* MODAL */ .mat-autocomplete-panel, .mat-dialog-container { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .mat-bottom-sheet-container { background: var(--modal-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } /* OTHER */ .mat-tooltip { background: var(--drop-down-menu-bg) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; background-size: auto, cover; -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; } .mat-progress-spinner.mat-accent circle, .mat-spinner.mat-accent circle { stroke: rgb(var(--accent-color)); } /* ADVANCED SEARCH MODAL */ .alert-info { background: var(--transparency-light-25) !important; border-color: rgba(255, 255, 255, .1) !important; color: var(--text-hover) !important; }