diff --git a/CSS/themes/tautulli/dark.css b/CSS/themes/tautulli/dark.css index 2717adf0..67543a57 100644 --- a/CSS/themes/tautulli/dark.css +++ b/CSS/themes/tautulli/dark.css @@ -16,4 +16,8 @@ :root { --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.25); + --accent-color-hover: rgba(255, 255, 255, 0.45); } \ No newline at end of file diff --git a/CSS/themes/tautulli/hotline.css b/CSS/themes/tautulli/hotline.css index ee47e4f5..85f8e739 100644 --- a/CSS/themes/tautulli/hotline.css +++ b/CSS/themes/tautulli/hotline.css @@ -16,4 +16,8 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; } \ No newline at end of file diff --git a/CSS/themes/tautulli/organizr-dark.css b/CSS/themes/tautulli/organizr-dark.css index 1464d197..56bb082d 100644 --- a/CSS/themes/tautulli/organizr-dark.css +++ b/CSS/themes/tautulli/organizr-dark.css @@ -16,4 +16,8 @@ :root { --main-bg-color: #1f1f1f; --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; } \ No newline at end of file diff --git a/CSS/themes/tautulli/plex.css b/CSS/themes/tautulli/plex.css index 3d462f18..a3a540f6 100644 --- a/CSS/themes/tautulli/plex.css +++ b/CSS/themes/tautulli/plex.css @@ -16,4 +16,8 @@ :root { --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; - } \ No newline at end of file + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; +} \ No newline at end of file diff --git a/CSS/themes/tautulli/space-gray.css b/CSS/themes/tautulli/space-gray.css index dbc4005d..41c7449d 100644 --- a/CSS/themes/tautulli/space-gray.css +++ b/CSS/themes/tautulli/space-gray.css @@ -15,5 +15,9 @@ @import url(https://gilbn.github.io/theme.park/CSS/themes/tautulli/tautulli-base.css); :root { --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; } \ No newline at end of file diff --git a/CSS/themes/tautulli/tautulli-base.css b/CSS/themes/tautulli/tautulli-base.css index af571847..17e28e65 100644 --- a/CSS/themes/tautulli/tautulli-base.css +++ b/CSS/themes/tautulli/tautulli-base.css @@ -261,11 +261,11 @@ span > a.active, .stacked-configs > li > span > span.active { } .modal-header { background: var(--modal-bg-color); - border-bottom: 1px solid rgba(255, 255, 255, 0.15); + border-bottom: 1px solid var(--accent-color); } .modal-footer { background: var(--modal-bg-color); - border-top: 1px solid rgba(255, 255, 255, 0.15); + border-top: 1px solid var(--accent-color); } .modal-config-section { border-top: 1px solid rgba(255, 255, 255, .08); @@ -326,4 +326,151 @@ span > a.active, .stacked-configs > li > span > span.active { .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: 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, .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 */ +.nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus { + color: var(--accent-color); +} +.dashboard-activity-progress .progress-bar { + background-color: var(--accent-color); + background-image: -moz-linear-gradient(top, var(--accent-color-hover), var(--accent-color)); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--accent-color-hover)), to(var(--accent-color))); + background-image: -webkit-linear-gradient(top, var(--accent-color-hover, var(--accent-color))); + background-image: -o-linear-gradient(top, var(--accent-color-hover, var(--accent-color))); + background-image: linear-gradient(to bottom, var(--accent-color-hover, var(--accent-color))); + +} +.dashboard-stats-info-item .sub-count { + color: 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(--accent-color); + border-color: var(--accent-color); +} +a:hover, a:focus { + color: var(--accent-color); +} +table.display td:hover a { + color: var(--accent-color); +} +.user-overview-stats-instance h3, .user-player-instance-playcount h3, .summary-content-title h1, .summary-content-title h1 a { + color: var(--accent-color); +} +.user-info-nav > .active > a { + color: var(--accent-color); +} +a:hover .dashboard-recent-media-poster, a:hover .dashboard-recent-media-cover { + webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.nav-settings > .active > a, .nav-settings > .active > a:hover, .nav-settings > .active > a:focus { + color: var(--accent-color); +} +div.advanced-setting { + border-left: 1px solid var(--accent-color); +} +.docker-setting { + color: var(--accent-color); +} +.modal-body strong, .modal-body strong i.fa { + color: 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 var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px 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 var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +a:hover .item-children-poster { + webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.dashboard-activity-terminate-session:hover { + color: var(--accent-color); +} +a .dashboard-activity-metadata-user-thumb:hover { + -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.stream-info .heading { + color: var(--accent-color); +} +a .library-user-instance-box:hover { + -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.summary-navbar-list .breadcrumb a:hover { + color: var(--accent-color); +} +.dashboard-recent-media-metacontainer h3.text-muted a:hover { + color: var(--accent-color); +} +a .poster-face:hover, a .cover-face:hover, a .users-poster-face:hover { + -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px 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: var(--accent-color); +} +.accordion li.open .link, .accordion li.open .link i.fa { + color: var(--accent-color); +} +.news-body a:hover { + color: var(--accent-color); } \ No newline at end of file