1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-10-04 14:37:14 +02:00
theme.park/CSS/themes/tautulli/tautulli-base.css

576 lines
21 KiB
CSS

/* 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);
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;
color: var(--text);
}
/* Text */
p,
.news-title, .news-date {
color: var(--text);
}
.help-block ,h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small,
.h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small,
h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small,
.header-bar span,
.dashboard-activity-info-time, strong,
.summary-content-details-tag strong,
.padded-header h1, h2, h3, h4, h5, h6,
.config-scheduler-table th,
#tautulli-news .open .news-title, #tautulli-news .open .news-date, #tautulli-news .accordion li.open .link i.fa {
color: var(--text-hover);
}
.list-unstyled {
color: #fff;
}
.text-muted, .small-muted {
color: var(--text-muted);
}
/* LINKS */
a,
a.no-highlight,
.news-body a {
color: var(--link-color);
}
a:hover,
a.no-highlight:hover,
.dashboard-activity-metadata-title a:hover,
.dashboard-activity-metadata-user a:hover {
color: var(--link-color-hover);
}
#plexpy-notifiers-table .friendly_name, #notifier-config-modal span.notifier_id, #plexpy-newsletters-table .friendly_name,
#newsletter-config-modal span.newsletter_id, #plexpy-mobile-devices-table .friendly_name, #mobile-device-config-modal span.notifier_id {
color: #fff;
}
/* Navbar */
.navbar {
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;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#search_form #search_button.btn-inactive {
background-color: #0000;
}
.nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus {
color: #f9be03;
background-color: rgba(0, 0, 0, 0.25);
}
.nav > li > a {
color: var(--text);
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: rgba(255, 255, 255, 0.08);
color: var(--text-hover);
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
background-color: rgba(255, 255, 255, 0.08);
color:rgb(var(--accent-color));
}
/* Dropdown */
.dropdown-menu {
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;
}
.dropdown-menu > li > a {
color: var(--text);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-color: rgba(255, 255, 255, 0.08);
color: var(--text-hover);
}
.dropdown-menu .divider {
background-color: rgba(255, 255, 255, 0.08);
}
select, .react-selectize.bootstrap3.root-node .react-selectize-control {
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;
}
/* Dashboard */
.dashboard-stats-background, .dashboard-activity-background, .dashboard-activity-poster-container {
background-color: rgba(0, 0, 0, 0.25);
}
.dashboard-activity-progress-bar {
background-color: rgba(0, 0, 0, 0.25);
}
.dashboard-activity-progress .buffer-bar {
background-color: rgba(255, 255, 255, 0.25);
}
.dashboard-activity-metadata-user a {
color: var(--link-color);
}
.dashboard-activity-metadata-subtitle-container {
color: #fff;
}
.dashboard-recent-media-metacontainer h3.text-muted a {
color: #fff;
}
.dashboard-recent-media-metacontainer h3.text-muted {
color: #fff;
}
/* Buttons */
.btn-dark {
background-color: var(--button-color);
border-color: var(--button-color);
}
.btn-dark:hover {
color: var(--button-text-hover);
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
}
.btn-dark:active, .btn-dark.active, .open > .dropdown-toggle.btn-dark, .btn-dark.active:focus {
color: var(--button-text-hover);
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
}
.btn:focus:not(select), .btn.focus:not(select), .btn-dark:focus:not(select), .btn-dark.focus:not(select), .btn-dark:active:focus:not(select) {
color: var(--button-text-hover);
background-color: var(--button-color-hover) !important;
}
.btn-dark.active:hover {
background-color: var(--button-color-hover);
}
.btn-dark.inactive:hover {
background-color: rgba(255, 255, 255, 0.08);
}
.btn-danger.btn-edit {
background-color: rgba(255, 255, 255, 0.25);
}
.btn-form {
background-color: var(--button-color);
}
.btn-form:hover {
background-color: var(--button-color-hover);
}
/* Inputs */
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background-color: rgba(0, 0, 0, 0.25);
}
.react-selectize.root-node .react-selectize-control, .selectize-control.form-control .selectize-input {
background: rgba(0, 0, 0, 0.25) !important;
}
/*Formcontrol */
select.form-control, div.form-control .selectize-input {
background-color: rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
.form-inline .input-group > .form-control {
width: auto;
}
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: rgba(236, 236, 236, 0.25);
}
textarea.form-control {
background-color: rgba(0, 0, 0, 0.25);
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
color: #fff;
background: rgba(0, 0, 0, 0.25);
}
.form-control:focus {
border-color: transparent;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Settings table cards */
.table-card-header {
background-color: rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
border-top: 1px solid #00000000;
}
.table-card-back {
background-color: rgba(0, 0, 0, 0.15);
}
table.display thead th {
color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25);
}
table.display thead tr:hover {
background-color: rgba(0, 0, 0, 0.45);
}
/*Settings menu */
.card-back-full {
background-color: transparent;
}
.nav-settings > li > a {
border-bottom: 1px solid transparent;
color: var(--text);
}
.nav-settings > li {
background-color: rgba(0, 0, 0, 0.45);
border-top: 1px solid transparent;
}
.nav-settings > .active > a, .nav-settings > .active > a:hover, .nav-settings > .active > a:focus {
background-color: rgba(0, 0, 0, 0.25);
}
.nav-settings > li > a:hover, .nav-settings > li > a:focus {
color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08);
}
.card {
background-color: rgba(0, 0, 0, 0.25);
border-top: 1px solid #00000000;
}
.card-sortable {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.card-handle {
color: #fff;
background-color: rgba(0, 0, 0, 0.25);
}
/*Notification agents menu */
.stacked-configs > li {
background-color: rgba(0, 0, 0, 0.25);
}
.stacked-configs > li > span {
color: #FFF;
border-left: 2px solid rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stacked-configs > li > span:hover, .stacked-configs > li > span:focus {
color: #fff;
background-color: rgba(255, 255, 255, 0.08);
}
.stacked-configs > li > span > a.toggle-left, .stacked-configs > li > span > span.toggle-left {
color: #999;
}
span > a.active, .stacked-configs > li > span > span.active {
color: #f9be03;
}
.inline-pre {
background-color: rgba(255, 255, 255, 0.25);
}
/* Summary containers */
.summary-container .table-card-header, .summary-container .table-card-back {
background: rgba(0, 0, 0, 0.45);
}
.summary-navbar {
background-color: rgba(0, 0, 0, 0.25);
}
/* pagination */
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
background-color: rgba(0, 0, 0, 0.25);
border-color: #00000000;
}
.pagination > li > a, .pagination > li > span {
background-color: var(--button-color);
border: 1px solid var(--button-color);
color: var(--button-text);
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
background-color: var(--button-color-hover);
border: 1px solid var(--button-color-hover);
color: var(--button-text-hover);
}
/* Graphs */
.graphs-instance {
background-color: rgba(0, 0, 0, 0.45);
}
/* Modal */
.modal-content {
border: none;
}
.modal-body li {
color: #fff;
}
.modal-body {
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;
}
.modal-header {
background: var(--modal-header-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;
border-bottom: 1px solid rgb(var(--accent-color));
}
.modal-footer {
background: var(--modal-footer-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;
border-top: 1px solid rgb(var(--accent-color));
}
.modal-config-section {
border-top: 1px solid rgba(255, 255, 255, .08);
}
#changelog-modal .modal-body > h2 {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#notifier-config-modal .nav-tabs > li > a, #newsletter-config-modal .nav-tabs > li > a {
color: var(--text);
}
#notifier-config-modal .nav-tabs > li.active > a, #notifier-config-modal .nav-tabs > li.active > a:hover, #notifier-config-modal .nav-tabs > li.active > a:focus, #newsletter-config-modal .nav-tabs > li.active > a, #newsletter-config-modal .nav-tabs > li.active > a:hover, #newsletter-config-modal .nav-tabs > li.active > a:focus {
color: var(--text-hover);
background: rgba(0, 0, 0, 0.45);
}
#notifier-config-modal .nav-tabs > li.active > a, #notifier-config-modal .nav-tabs > li.active > a:hover, #notifier-config-modal .nav-tabs > li.active > a:focus, #newsletter-config-modal .nav-tabs > li.active > a, #newsletter-config-modal .nav-tabs > li.active > a:hover, #newsletter-config-modal .nav-tabs > li.active > a:focus {
border: 1px solid #0000;
border-bottom-color: transparent;
}
#notifier-config-modal .nav-tabs > li > a:hover, #newsletter-config-modal .nav-tabs > li > a:hover {
border-color: #0000;
background: rgba(255, 255, 255, 0.08);
color: var(--text-hover);
}
#notifier-config-modal .nav-tabs, #newsletter-config-modal .nav-tabs {
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.accordion {
background: rgba(0, 0, 0, 0.25);
}
.accordion li .link {
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.accordion li .link:hover, .accordion li .link:hover i.fa {
background: rgba(255, 255, 255, 0.08);
}
.submenu {
background: rgba(0, 0, 0, 0.25);
}
/* Stream info */
.stream-info {
background-color: rgba(0, 0, 0, 0.25);
}
/* Edit metadata */
.item-children-section-title {
background-color: rgba(255, 255, 255, 0.08);
border-bottom: 1px solid #00000000;
border-top: 1px solid #00000000;
}
/* Mobile */
.navbar-toggle:hover, .navbar-toggle:focus {
background-color: rgba(255, 255, 255, 0.08);
}
.navbar-toggle {
background-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 768px) {
.navbar-collapse.in {
box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7);
}
}
#login-methods .submenu {
background: transparent;
}
.login-container .remember-group {
color: #eee;
}
#login-methods > li.open > div {
color: rgb(var(--accent-color));
}
/* Buttons */
.btn-bright {
color: #fff;
background-color: var(--button-color);
box-shadow: inset 0 1px 0 var(--button-color);
}
.btn-bright:hover {
color: #fff;
background-color: var(--button-color-hover);
box-shadow: inset 0 1px 0 var(--button-color-hover);
}
.btn-bright:active, .btn-bright.active, .open > .dropdown-toggle.btn-bright, #menu_link_show_advanced_settings.active {
color: #fff;
background-color: var(--button-color-hover);
box-shadow: inset 0 1px 0 var(--button-color-hover);
}
.btn-bright:active:hover, .btn-bright.active:hover, .open > .dropdown-toggle.btn-bright:hover, .btn-bright:active:focus, .btn-bright.active:focus, .open > .dropdown-toggle.btn-bright:focus, .btn-bright:active.focus, .btn-bright.active.focus, .open > .dropdown-toggle.btn-bright.focus {
color: #fff;
background-color: var(--button-color-hover);
box-shadow: inset 0 1px 0 var(--button-color-hover);
}
.btn:focus:not(#history-user):not(#graph-user):not(#sync-user), .btn.focus, .btn-dark:focus, .btn-dark.focus, .btn-dark:active:focus {
color: #fff;
background-color: var(--button-color-hover) !important;
opacity: .8;
}
.btn-bright.disabled, .btn-bright[disabled], fieldset[disabled] .btn-bright, .btn-bright.disabled:hover, .btn-bright[disabled]:hover, fieldset[disabled] .btn-bright:hover, .btn-bright.disabled:focus, .btn-bright[disabled]:focus, fieldset[disabled] .btn-bright:focus, .btn-bright.disabled.focus, .btn-bright[disabled].focus, fieldset[disabled] .btn-bright.focus, .btn-bright.disabled:active, .btn-bright[disabled]:active, fieldset[disabled] .btn-bright:active, .btn-bright.disabled.active, .btn-bright[disabled].active, fieldset[disabled] .btn-bright.active {
background-color: var(--button-color);
border-color: var(--button-color);
}
/* Accents */
.badge {
color: var(--label-text-color);
background-color: rgb(var(--accent-color));
}
.summary-content {
color: rgb(var(--accent-color));
}
.nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus {
color: rgb(var(--accent-color));
}
.dashboard-activity-progress .progress-bar {
background-color: rgb(var(--accent-color));
background-image: -moz-linear-gradient(top, var(--accent-color-hover), rgb(var(--accent-color)));
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--accent-color-hover)), to(rgb(var(--accent-color))));
background-image: -webkit-linear-gradient(top, var(--accent-color-hover, rgb(var(--accent-color))));
background-image: -o-linear-gradient(top, var(--accent-color-hover, rgb(var(--accent-color))));
background-image: linear-gradient(to bottom, var(--accent-color-hover, rgb(var(--accent-color))));
}
.dashboard-stats-info-item .sub-count {
color: rgb(var(--accent-color));
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
background-color: var(--button-color-hover);
border-color: var(--button-color-hover);
color: var(--button-text-hover);
}
a:hover, a:focus {
color: var(--link-color-hover);
}
table.display td:hover a {
color: var(--link-color-hover);
}
.user-overview-stats-instance h3, .user-player-instance-playcount h3, .summary-content-title h1, .summary-content-title h1 a {
color: var(--text-hover);
}
.user-info-nav > .active > a {
color: rgb(var(--accent-color));
}
a:hover .dashboard-recent-media-poster, a:hover .dashboard-recent-media-cover {
-webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
-moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
}
.nav-settings > .active > a, .nav-settings > .active > a:hover, .nav-settings > .active > a:focus {
color: rgb(var(--accent-color));
}
div.advanced-setting {
border-left: 1px solid rgb(var(--accent-color));
}
.docker-setting {
color: rgb(var(--accent-color));
}
.modal-body strong, .modal-body strong i.fa {
color: rgb(var(--accent-color));
}
.user-info-nav a:hover {
color: var(--accent-color-hover)
}
a:hover .dashboard-activity-poster, a:hover .dashboard-activity-cover {
-webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
-moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
}
a:hover .dashboard-stats-poster, a:hover .dashboard-stats-cover, a:hover .dashboard-stats-circle, a:hover .dashboard-stats-square {
-webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
-moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
}
a:hover .item-children-poster {
-webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
-moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
}
.dashboard-activity-terminate-session:hover {
color: rgb(var(--accent-color));
}
a .dashboard-activity-metadata-user-thumb:hover {
-webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
-moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
}
.stream-info .heading {
color: rgb(var(--accent-color));
}
a .library-user-instance-box:hover {
-webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
-moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
}
.summary-navbar-list .breadcrumb a:hover {
color: rgb(var(--accent-color));
}
.dashboard-recent-media-metacontainer h3.text-muted a:hover {
color: rgb(var(--accent-color));
}
a .poster-face:hover, a .cover-face:hover, a .users-poster-face:hover,.summary-poster-face-overlay {
-webkit-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
-moz-box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
box-shadow: inset 0 0 0 2px rgb(var(--accent-color));
}
.submenu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
span > a.active, .stacked-configs > li > span > span.active {
color: rgb(var(--accent-color));
}
.accordion li.open .link, .accordion li.open .link i.fa {
color: rgb(var(--accent-color));
}
.news-body a:hover {
color: var(--link-color-hover);
}