/* 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 */ body { background: var(--main-bg-color); } a,b { color: var(--accent-color); } a:hover, b:hover { color: var(--accent-color-hover); } .mat-drawer-container, .dark .mat-drawer-container { background: var(--main-bg-color); color: var(--text); } /* HEADER */ .mat-toolbar.mat-primary, .dark .mat-toolbar.mat-primary { background: rgba(0, 0, 0, .25); color: var(--text); } .dark .mat-toolbar, .mat-toolbar,.mat-list-base .mat-list-item, .mat-list-base .mat-list-option { color: var(--text); } /* SEARCH */ .dark .mat-autocomplete-panel, .mat-autocomplete-panel { background: var(--modal-bg-color); color: var(--text); } /* Scrollbar */ ::-webkit-scrollbar { width: 7px; background: hsl(0deg 0% 0% / 0%); } @media only screen and (min-width: 768px) { html { height: 100%; width: 100%; overflow: hidden; } body { overflow-y: auto; height: 100%; background: var(--main-bg-color) } } ::-webkit-scrollbar { width: 14px; } ::-webkit-scrollbar-thumb { min-height: 50px; border: 3px solid transparent; border-radius: 8px; background-color: hsla(0,0%,100%,.2); background-clip: padding-box; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb:hover { min-height: 50px; border: 3px solid transparent; border-radius: 8px; background-color: hsla(0,0%,100%,.5); background-clip: padding-box; } /* SIDEBAR */ .dark .mat-drawer, .dark .mat-drawer.mat-drawer-push, .mat-drawer, .mat-drawer.mat-drawer-push { background-color: rgba(0, 0, 0, .25); color: var(--text) } .dark .mat-drawer-side { border-right: 1px solid transparent; } .dark .active-list-item, .active-list-item, .active-list-item { background: var(--accent-color) !important; background-color: var(--accent-color) !important; color: var(--text)!important; font-weight: 500; } /* CARDS */ .mat-card, .dark .mat-card { background: rgb(0 0 0 / 25%); color: var(--text); } .grow:hover { transform: scale(1.1); color: var(--text-hover) } .notrequested { border-bottom: 3px solid var(--accent-color) !important; } /* BUTTONS */ .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, .dark .mat-fab.mat-accent, .dark .mat-flat-button.mat-accent, .dark .mat-mini-fab.mat-accent, .dark .mat-raised-button.mat-accent { background-color: var(--button-color); color: var(--text) } .mat-raised-button:hover , .dark .mat-raised-button:hover { background-color: var(--button-color-hover); color: var(--text) } .dark .mat-fab.mat-primary, .dark .mat-flat-button.mat-primary, .dark .mat-mini-fab.mat-primary, .dark .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-flat-button.mat-primary, .mat-mini-fab.mat-primary, .mat-raised-button.mat-primary { background: rgba(255, 255, 255, .1); } .btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover { z-index: 1; background: var(--button-color-hover) !important; } .btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) { margin-left: 0px; } .mat-raised-button:not([class*=mat-elevation-z]), .dark .mat-raised-button:not([class*=mat-elevation-z]) { box-shadow: none; } button:focus { outline: 1px dotted; outline: none; } .dark .mat-slide-toggle.mat-checked .mat-slide-toggle-bar, .mat-slide-toggle.mat-checked .mat-slide-toggle-bar { background-color: var(--accent-color); } .dark .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb, .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { background-color: var(--accent-color); } /* MODAL */ .dark .mat-dialog-container,.mat-dialog-container { background: var(--modal-bg-color); color: var(--text); } div.dark .details, .details { background: transparent !important; } .dark .mat-dialog-container .dark .mat-raised-button.mat-primary,.mat-dialog-container .mat-raised-button.mat-primary { background: var(--button-color); } .dark .mat-dialog-container .dark .mat-raised-button.mat-primary:hover,.mat-dialog-container .mat-raised-button.mat-primary:hover { background: var(--button-color-hover); } .dark .mat-dialog-container .media-icons, .mat-dialog-container .media-icons { color: var(--text) !important; } .mat-slide-toggle-bar, .dark .mat-slide-toggle-bar { background-color: rgba(0,0,0,.38); } .mat-slide-toggle-thumb, .dark .mat-slide-toggle-thumb { background-color: #fafafa; } /* SETTINGS */ /* Table */ .mat-table, .dark .mat-table { background: #0000002e; color: var(--text) } .mat-cell, .mat-footer-cell,.dark .mat-cell, .dark .mat-footer-cell { color: var(--text) } /* Drop down menu*/ .dark .mat-menu-panel,.mat-menu-panel { background: var(--modal-bg-color); } .dark .mat-select-panel { background: var(--modal-bg-color); } .mat-tab-label, .mat-tab-link, .dark .mat-tab-label, .dark .mat-tab-link { color: var(--text); } .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar, .dark .mat-tab-group.mat-primary .mat-ink-bar, .dark .mat-tab-nav-bar.mat-primary .mat-ink-bar { background-color: var(--accent-color); } .dark .mat-tab-header, .dark .mat-tab-nav-bar, .mat-tab-header, .mat-tab-nav-bar { border-bottom: 1px solid hsla(0,0%,100%,.12); } .mat-form-field-appearance-outline .mat-form-field-outline-thick { color: hsla(0,0%,100%,.12); } .dark .mat-form-field-appearance-outline .mat-form-field-outline, .mat-form-field-appearance-outline .mat-form-field-outline { color: hsla(0,0%,100%,.3); } .dark .mat-form-field-label, .dark .mat-hint, .mat-form-field-label, .mat-hint { color: hsla(0,0%,100%,.7); } .dark .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick { color: hsla(0,0%,100%,.7); } .dark .mat-input-element { caret-color: var(--text); } /* MOVEI TV PAGE*/ .dark .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent, .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent { background-color: var(--accent-color); color: var(--text); } .mat-expansion-panel, .dark .mat-expansion-panel { background: rgb(0 0 0 / 25%); color: var(--text) !important; } .mat-expansion-panel-header-title { color: var(--text); } #info-wrapper .sidebar .poster { border: 3px solid rgb(255 255 255 / 10%); box-shadow: none; } .ui-carousel-next, body .ui-carousel .ui-carousel-content .ui-carousel-prev { background-color: var(--accent-color); border: 1px solid var(--accent-color); border-radius: 50%; margin: .2em; color: #fff; transition: color .2s; } .ui-carousel-next:hover, body .ui-carousel .ui-carousel-content .ui-carousel-prev:hover { background: var(--button-color-hover); } body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon { background-color: var(--accent-color); } #summary-wrapper .grey-text { color: var(--text); } #info-wrapper .media-icons { color: var(--text)!important; } #info-wrapper .media-icons:hover { color: var(--text-hover)!important; } #info-wrapper .grow-social:hover { color: var(--text-hover)!important; } #info-wrapper .dark .mat-fab, .dark .mat-flat-button, .dark .mat-mini-fab, .dark .mat-raised-button,#info-wrapper .mat-fab, .mat-flat-button, .mat-mini-fab, .mat-raised-button { color: #fff; background-color: var(--button-color); } #info-wrapper .dark .mat-mini-fab:hover, #info-wrapper .mat-raised-button:hover { color: #fff; background-color: var(--button-color-hover); } /*LOGIN PAGE */ .dark .mat-elevation-z8, .mat-elevation-z8 { box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dark .mat-checkbox-checked.mat-accent .mat-checkbox-background,.dark .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background { background-color: var(--accent-color) }