From da35b697bc5ed625e8c0f90f00e03d073bd17e6f Mon Sep 17 00:00:00 2001 From: deathbybandaid Date: Tue, 29 Jun 2021 08:22:17 -0400 Subject: [PATCH] update 6-29-21 --- CSS/addons/organizr/glass/glass-base.css | 2 + CSS/addons/sonarr/sonarr-4k-logo.css | 32 +- CSS/themes/adguard/adguard-base.css | 1 - CSS/themes/adguard/plex.css | 2 +- CSS/themes/bazarr/aquamarine.css | 1 + CSS/themes/bazarr/bazarr-base.css | 19 +- CSS/themes/bazarr/dark.css | 1 + CSS/themes/bazarr/dracula.css | 35 + CSS/themes/bazarr/hotline.css | 1 + CSS/themes/bazarr/organizr-dark.css | 1 + CSS/themes/bazarr/plex.css | 1 + CSS/themes/bazarr/space-gray.css | 1 + CSS/themes/jackett/jackett-base.css | 4 +- CSS/themes/jellyfin/jellyfin-base.css | 1 + CSS/themes/librespeed/librespeed-base.css | 8 +- CSS/themes/librespeed/organizr-dark.css | 4 +- CSS/themes/lidarr/aquamarine.css | 1 + CSS/themes/lidarr/dark.css | 1 + CSS/themes/lidarr/dracula.css | 42 + CSS/themes/lidarr/hotline.css | 1 + CSS/themes/lidarr/lidarr-base.css | 20 +- CSS/themes/lidarr/organizr-dark.css | 1 + CSS/themes/lidarr/plex.css | 1 + CSS/themes/lidarr/space-gray.css | 1 + CSS/themes/ombi/aquamarine.css | 20 +- CSS/themes/ombi/dark.css | 22 +- CSS/themes/ombi/hotline.css | 21 +- CSS/themes/ombi/ombi-base.css | 1062 ++++++++++----------- CSS/themes/ombi/ombiv3-base.css | 616 ++++++++++++ CSS/themes/ombi/organizr-dark.css | 20 +- CSS/themes/ombi/plex.css | 19 +- CSS/themes/ombi/space-gray.css | 20 +- CSS/themes/plex/plex-base.css | 41 +- CSS/themes/prowlarr/aquamarine.css | 1 + CSS/themes/prowlarr/dark.css | 1 + CSS/themes/prowlarr/dracula.css | 42 + CSS/themes/prowlarr/hotline.css | 1 + CSS/themes/prowlarr/organizr-dark.css | 1 + CSS/themes/prowlarr/plex.css | 1 + CSS/themes/prowlarr/prowlarr-base.css | 19 +- CSS/themes/prowlarr/space-gray.css | 1 + CSS/themes/radarr/aquamarine.css | 1 + CSS/themes/radarr/dark.css | 1 + CSS/themes/radarr/dracula.css | 41 + CSS/themes/radarr/hotline.css | 1 + CSS/themes/radarr/organizr-dark.css | 1 + CSS/themes/radarr/plex.css | 1 + CSS/themes/radarr/radarr-base.css | 24 +- CSS/themes/radarr/space-gray.css | 1 + CSS/themes/readarr/aquamarine.css | 1 + CSS/themes/readarr/dark.css | 1 + CSS/themes/readarr/dracula.css | 42 + CSS/themes/readarr/hotline.css | 1 + CSS/themes/readarr/organizr-dark.css | 1 + CSS/themes/readarr/plex.css | 1 + CSS/themes/readarr/readarr-base.css | 26 +- CSS/themes/readarr/space-gray.css | 1 + CSS/themes/sonarr/aquamarine.css | 1 + CSS/themes/sonarr/dark.css | 1 + CSS/themes/sonarr/dracula.css | 42 + CSS/themes/sonarr/hotline.css | 1 + CSS/themes/sonarr/organizr-dark.css | 1 + CSS/themes/sonarr/plex.css | 3 +- CSS/themes/sonarr/sonarr-base.css | 975 +------------------ CSS/themes/sonarr/space-gray.css | 1 + CSS/themes/vuetorrent/vuetorrent-base.css | 18 +- CSS/themes/xbackbone/aquamarine.css | 33 + CSS/themes/xbackbone/dark.css | 33 + CSS/themes/xbackbone/hotline.css | 33 + CSS/themes/xbackbone/organizr-dark.css | 33 + CSS/themes/xbackbone/plex.css | 33 + CSS/themes/xbackbone/space-gray.css | 33 + CSS/themes/xbackbone/xbackbone-base.css | 312 ++++++ README.md | 2 +- 74 files changed, 2218 insertions(+), 1572 deletions(-) create mode 100644 CSS/themes/bazarr/dracula.css create mode 100644 CSS/themes/lidarr/dracula.css create mode 100644 CSS/themes/ombi/ombiv3-base.css create mode 100644 CSS/themes/prowlarr/dracula.css create mode 100644 CSS/themes/radarr/dracula.css create mode 100644 CSS/themes/readarr/dracula.css create mode 100644 CSS/themes/sonarr/dracula.css create mode 100644 CSS/themes/xbackbone/aquamarine.css create mode 100644 CSS/themes/xbackbone/dark.css create mode 100644 CSS/themes/xbackbone/hotline.css create mode 100644 CSS/themes/xbackbone/organizr-dark.css create mode 100644 CSS/themes/xbackbone/plex.css create mode 100644 CSS/themes/xbackbone/space-gray.css create mode 100644 CSS/themes/xbackbone/xbackbone-base.css diff --git a/CSS/addons/organizr/glass/glass-base.css b/CSS/addons/organizr/glass/glass-base.css index 87a19ace..a9a515a2 100644 --- a/CSS/addons/organizr/glass/glass-base.css +++ b/CSS/addons/organizr/glass/glass-base.css @@ -493,6 +493,8 @@ background: var(--div-background-color-15) !important; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; + -webkit-backdrop-filter: blur(10px) !important; + backdrop-filter: blur(10px) !important; } /* Email users */ diff --git a/CSS/addons/sonarr/sonarr-4k-logo.css b/CSS/addons/sonarr/sonarr-4k-logo.css index c72d0614..4dc8e3bc 100644 --- a/CSS/addons/sonarr/sonarr-4k-logo.css +++ b/CSS/addons/sonarr/sonarr-4k-logo.css @@ -1,12 +1,12 @@ /* Desktop */ @media (min-width: 752px) { .navbar-brand>img { - display:none !important; + display:none !important; } .navbar > .container-fluid .navbar-brand:before { background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); display: inline-block; - width: 128px; + width: 128px; height: 128px; content:""; background-size: cover; @@ -20,14 +20,14 @@ @media (max-width: 1200px) { .navbar-brand .visible-xs img, .logo-text { display: none !important; - } + } .navbar-brand .visible-xs { display: inline !important; - } + } .navbar > .container-fluid .navbar-brand:before { background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); display: inline-block; - width: 64px; + width: 64px; height: 64px; content:""; background-size: cover; @@ -41,14 +41,14 @@ @media (max-width: 767px) { .navbar-brand .visible-xs img { display: none !important; - } + } .navbar-brand .visible-xs { display: inline !important; - } + } .navbar > .container-fluid .navbar-brand:before { background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); display: inline-block; - width: 32px; + width: 32px; height: 32px; content:""; background-size: cover; @@ -67,31 +67,31 @@ [class*="PageHeader\/logoContainer\/"]:before { background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); display: inline-block; - width: 32px; + width: 32px; height: 32px; content:""; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; - } -} + } +} @media (max-width: 767px) { [class*="PageHeader\/logo\/"] { display: none !important; - } + } [class*="PageHeader\/logoContainer\/"]:before { background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); display: inline-block; - width: 32px; + width: 32px; height: 32px; content:""; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; - } + } } [class*="LoadingPage\/logoFull\/"] { @@ -101,7 +101,7 @@ [class*="LoadingPage\/page\/"]:before { background-image: url("https://htpc.deathbybandaid.net/assets/theme.park/CSS/addons/sonarr/sonarr-4k.png"); display: inline-block; - width: 48px; + width: 48px; height: 48px; content:""; background-size: cover; @@ -112,4 +112,4 @@ margin-right: auto; margin-left: auto; -} +} \ No newline at end of file diff --git a/CSS/themes/adguard/adguard-base.css b/CSS/themes/adguard/adguard-base.css index efb92fc5..3a195995 100644 --- a/CSS/themes/adguard/adguard-base.css +++ b/CSS/themes/adguard/adguard-base.css @@ -20,7 +20,6 @@ body { html { height: 100%; width: 100%; - overflow: hidden; } body { diff --git a/CSS/themes/adguard/plex.css b/CSS/themes/adguard/plex.css index b6d001d4..ccfc62f9 100644 --- a/CSS/themes/adguard/plex.css +++ b/CSS/themes/adguard/plex.css @@ -25,4 +25,4 @@ --tooltip-link-color: #e5a00d; --text: #eee; --text-hover: #fff; -} +} \ No newline at end of file diff --git a/CSS/themes/bazarr/aquamarine.css b/CSS/themes/bazarr/aquamarine.css index 6321e9aa..4212eeef 100644 --- a/CSS/themes/bazarr/aquamarine.css +++ b/CSS/themes/bazarr/aquamarine.css @@ -27,6 +27,7 @@ --queue-color: #009688; --link-color: #0ed2bf; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/bazarr/bazarr-base.css b/CSS/themes/bazarr/bazarr-base.css index 97e6eb07..a352e0f6 100644 --- a/CSS/themes/bazarr/bazarr-base.css +++ b/CSS/themes/bazarr/bazarr-base.css @@ -220,7 +220,7 @@ a:hover { } } .sidebar-container .badge-secondary { - color: var(--button-text); + color: var(--label-text-color); background-color: var(--queue-color); } /* TOP NAV BAR */ @@ -299,6 +299,7 @@ a:hover { .progress-bar.bg-primary { background: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; } .progress-bar.bg-warning { @@ -311,6 +312,11 @@ a:hover { background-color: rgba(255, 193, 7, .8); } +.badge-primary { + color: #fff; + background-color: rgb(var(--accent-color)); +} + .popover { background-color: #1f1f1f; border: 1px solid rgba(255, 255, 255, .2); @@ -698,4 +704,15 @@ line { color: var(--text-hover); background-color: hsla(0, 0%, 0%, .35); border-bottom: 1px solid rgba(0,0,0,.05); +} + +.alert-container .toast-container .toast .toast-body .progress .progress-bar { + text-shadow: -2px -2px 5px rgb(var(--accent-color)),2px -2px 5px rgb(var(--accent-color)),-2px 2px 5px rgb(var(--accent-color)),2px 2px 5px rgb(var(--accent-color)); + overflow: visible +} + +/* LOGS */ +/* Stack traceback */ +code.zmdi-language-python-alt { + color: var(--text); } \ No newline at end of file diff --git a/CSS/themes/bazarr/dark.css b/CSS/themes/bazarr/dark.css index 59d7de3f..bc51efcc 100644 --- a/CSS/themes/bazarr/dark.css +++ b/CSS/themes/bazarr/dark.css @@ -27,6 +27,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/bazarr/dracula.css b/CSS/themes/bazarr/dracula.css new file mode 100644 index 00000000..fc71872f --- /dev/null +++ b/CSS/themes/bazarr/dracula.css @@ -0,0 +1,35 @@ + +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* BAZARR AQUAMARINE THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/bazarr/bazarr-base.css); +:root { + --main-bg-color: #282a36; + --modal-bg-color: #282a36; + + --button-color: #bd93f9; + --button-color-hover: #ff79c6; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 80, 250, 123; + --accent-color-hover: #50fa7b; + --queue-color: #50fa7b; + --link-color: #ff79c6; + --link-color-hover: #8be9fd; + --label-text-color: #282a36; + + --text:#6272a4; + --text-hover: #95adfa; + --text-muted: #999; +} \ No newline at end of file diff --git a/CSS/themes/bazarr/hotline.css b/CSS/themes/bazarr/hotline.css index d069ccd9..219fa679 100644 --- a/CSS/themes/bazarr/hotline.css +++ b/CSS/themes/bazarr/hotline.css @@ -27,6 +27,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/bazarr/organizr-dark.css b/CSS/themes/bazarr/organizr-dark.css index f073dee2..dee1879e 100644 --- a/CSS/themes/bazarr/organizr-dark.css +++ b/CSS/themes/bazarr/organizr-dark.css @@ -27,6 +27,7 @@ --queue-color: #2cabe3; --link-color: #2cabe3; --link-color-hover: #fff; + --label-text-color: #fff; --text:#96a2b4; --text-hover: #fff; diff --git a/CSS/themes/bazarr/plex.css b/CSS/themes/bazarr/plex.css index 65638bc6..ae8f3e60 100644 --- a/CSS/themes/bazarr/plex.css +++ b/CSS/themes/bazarr/plex.css @@ -27,6 +27,7 @@ --queue-color: #27c24c; --link-color: #e5a00d; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/bazarr/space-gray.css b/CSS/themes/bazarr/space-gray.css index 1f69ca0f..94dd701e 100644 --- a/CSS/themes/bazarr/space-gray.css +++ b/CSS/themes/bazarr/space-gray.css @@ -27,6 +27,7 @@ --queue-color: #81a6b7; --link-color: #9adfff; --link-color-hover: #fff; + --label-text-color: #fff; --text: #eee; --text-hover: #fff; diff --git a/CSS/themes/jackett/jackett-base.css b/CSS/themes/jackett/jackett-base.css index 14df2922..a10e3b14 100644 --- a/CSS/themes/jackett/jackett-base.css +++ b/CSS/themes/jackett/jackett-base.css @@ -215,6 +215,6 @@ fieldset[disabled] .form-control { .alert-info { color: #ffffff; - background-color: var(--modal-bg-color); + background: var(--modal-bg-color); border-color: transparent; -} \ No newline at end of file +} diff --git a/CSS/themes/jellyfin/jellyfin-base.css b/CSS/themes/jellyfin/jellyfin-base.css index b00a0f52..4ac0251c 100644 --- a/CSS/themes/jellyfin/jellyfin-base.css +++ b/CSS/themes/jellyfin/jellyfin-base.css @@ -83,6 +83,7 @@ html { } .detailButton-icon { + background: none !important; border-color: rgba(255,255,255,.3) } diff --git a/CSS/themes/librespeed/librespeed-base.css b/CSS/themes/librespeed/librespeed-base.css index 09701cb7..18a3acc1 100644 --- a/CSS/themes/librespeed/librespeed-base.css +++ b/CSS/themes/librespeed/librespeed-base.css @@ -40,12 +40,12 @@ div.meterText:empty:before { } #startStopBtn { color: #ffffff; - background: var(--button-color); - border: 0.15em solid var(--button-color); + background: var(--start-button-color); + border: 0.15em solid var(--start-button-color); } #startStopBtn:hover { - border: 0.15em solid var(--button-color-hover); - background: var(--button-color-hover); + border: 0.15em solid var(--start-button-color-hover); + background: var(--start-button-color-hover); } #startStopBtn.running { background: #FF3030 !important; diff --git a/CSS/themes/librespeed/organizr-dark.css b/CSS/themes/librespeed/organizr-dark.css index f5fc60bc..7cab3498 100644 --- a/CSS/themes/librespeed/organizr-dark.css +++ b/CSS/themes/librespeed/organizr-dark.css @@ -16,6 +16,6 @@ :root { --main-bg-color: #1f1f1f; --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); + --start-button-color: #2cabe3; + --start-button-color-hover: rgb(44 171 227 / .8); } \ No newline at end of file diff --git a/CSS/themes/lidarr/aquamarine.css b/CSS/themes/lidarr/aquamarine.css index 17341c74..dc31bb83 100644 --- a/CSS/themes/lidarr/aquamarine.css +++ b/CSS/themes/lidarr/aquamarine.css @@ -34,6 +34,7 @@ --queue-color: #009688; --link-color: #0ed2bf; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/lidarr/dark.css b/CSS/themes/lidarr/dark.css index 13921f29..30f8c850 100644 --- a/CSS/themes/lidarr/dark.css +++ b/CSS/themes/lidarr/dark.css @@ -34,6 +34,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/lidarr/dracula.css b/CSS/themes/lidarr/dracula.css new file mode 100644 index 00000000..32e84c16 --- /dev/null +++ b/CSS/themes/lidarr/dracula.css @@ -0,0 +1,42 @@ + +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* LIDARR AQUAMARINE THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/lidarr/lidarr-base.css); +:root { + --main-bg-color: #282a36; + --modal-bg-color: #282a36; + + --calendar-downloading: 122 67 182; + --calendar-downloaded: 39 194 76; + --calendar-unreleased: 93 156 236; + --calendar-partial: 255, 165, 0; + --calendar-unmonitored: 173 173 173; + --calendar-missing: 240 80 80; + + --button-color: #bd93f9; + --button-color-hover: #ff79c6; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: #50fa7b; + --accent-color-hover: #50fa7b; + --queue-color: #50fa7b; + --link-color: #ff79c6; + --link-color-hover: #8be9fd; + --label-text-color: #282a36; + + --text:#6272a4; + --text-hover: #95adfa; + --text-muted: #999; +} \ No newline at end of file diff --git a/CSS/themes/lidarr/hotline.css b/CSS/themes/lidarr/hotline.css index e38e8772..a57261a8 100644 --- a/CSS/themes/lidarr/hotline.css +++ b/CSS/themes/lidarr/hotline.css @@ -35,6 +35,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/lidarr/lidarr-base.css b/CSS/themes/lidarr/lidarr-base.css index fc8e9596..dc699c7e 100644 --- a/CSS/themes/lidarr/lidarr-base.css +++ b/CSS/themes/lidarr/lidarr-base.css @@ -315,6 +315,10 @@ a:hover { color: #fff; } +[class*="ArtistDetailsSeason-albums-"] { + border-top: 1px solid rgba(255, 255, 255, 0.5); +} + .fa-search:hover { color: var(--text-hover) !important; } @@ -322,11 +326,11 @@ a:hover { [class*="Label-default-"] { border-color: var(--accent-color); background-color: var(--accent-color); - color: #fff; + color: var(--label-text-color); } -[class*="Icon-default-"]:hover { - color: #fff; +[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { + color: var(--text-hover); } [class*="MonitorToggleButton-toggleButton-"] { @@ -414,13 +418,13 @@ a:hover { [class*="Label-info-"] { border-color: var(--accent-color); background-color: var(--accent-color); - color: #fff; + color: var(--label-text-color); } [class*="PageSidebarItem-status-"][class*="Label-info-"] { border-color: var(--queue-color); background-color: var(--queue-color); - color: #fff; + color: var(--label-text-color); } /* Table options*/ @@ -443,6 +447,10 @@ a:hover { color: var(--text-hover); } +[class*="TableRowCell-cell-"] { + border-top: 1px solid rgb(255 255 255 / 25%); +} + /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { background-color: rgba(0, 0, 0, .25); @@ -517,7 +525,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: #FFF + color: var(--label-text-color); } [class*="ArtistSearchInput-container-"] [class*="Input-input-"] { diff --git a/CSS/themes/lidarr/organizr-dark.css b/CSS/themes/lidarr/organizr-dark.css index 89878f0e..1acf226f 100644 --- a/CSS/themes/lidarr/organizr-dark.css +++ b/CSS/themes/lidarr/organizr-dark.css @@ -34,6 +34,7 @@ --queue-color: #2cabe3; --link-color: #2cabe3; --link-color-hover: #fff; + --label-text-color: #fff; --text:#96a2b4; --text-hover: #fff; diff --git a/CSS/themes/lidarr/plex.css b/CSS/themes/lidarr/plex.css index 35cb3c65..a9cb27ee 100644 --- a/CSS/themes/lidarr/plex.css +++ b/CSS/themes/lidarr/plex.css @@ -34,6 +34,7 @@ --queue-color: #27c24c; --link-color: #e5a00d; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/lidarr/space-gray.css b/CSS/themes/lidarr/space-gray.css index 470182d7..a36fe02d 100644 --- a/CSS/themes/lidarr/space-gray.css +++ b/CSS/themes/lidarr/space-gray.css @@ -34,6 +34,7 @@ --queue-color: #81a6b7; --link-color: #81a6b7; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/ombi/aquamarine.css b/CSS/themes/ombi/aquamarine.css index d761d675..599c8478 100644 --- a/CSS/themes/ombi/aquamarine.css +++ b/CSS/themes/ombi/aquamarine.css @@ -16,9 +16,19 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --request-button: #009688; - --request-button-hover: #12afa0; - --loading-bar: #0b3161; - --accent-color: #eee; - --label-color: #009688; + + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 0, 150, 136; + --accent-color-hover: #12afa0; + --queue-color: #009688; + --link-color: #0ed2bf; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; } diff --git a/CSS/themes/ombi/dark.css b/CSS/themes/ombi/dark.css index 4b3c3594..9d570f06 100644 --- a/CSS/themes/ombi/dark.css +++ b/CSS/themes/ombi/dark.css @@ -16,9 +16,19 @@ :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; - --request-button: #c1c1c1; - --request-button-hover: rgba(255, 255, 255, 0.25); - --loading-bar: #df691a; - --accent-color: #c1c1c1; - --label-color: rgba(255, 255, 255, 0.25); -} + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 100, 100, 100; + --accent-color-hover: #ffffff73; + --queue-color: #6b5; + --link-color: #ddd; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; + } diff --git a/CSS/themes/ombi/hotline.css b/CSS/themes/ombi/hotline.css index 3b7ff3f4..68f007e1 100644 --- a/CSS/themes/ombi/hotline.css +++ b/CSS/themes/ombi/hotline.css @@ -16,10 +16,19 @@ :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; - --request-button:#F44336; - --request-button-hover: #0b3161; - --loading-bar: #F44336 ; - --accent-color: #ff6155; - --label-color: rgba(11, 49, 97, 0.75); - + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 244, 67, 54; + --accent-color-hover: #0b3161; + --queue-color: #6b5; + --link-color: #ddd; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; } \ No newline at end of file diff --git a/CSS/themes/ombi/ombi-base.css b/CSS/themes/ombi/ombi-base.css index 67d51a6c..9cdb62cb 100644 --- a/CSS/themes/ombi/ombi-base.css +++ b/CSS/themes/ombi/ombi-base.css @@ -11,606 +11,570 @@ /* Made by @gilbN */ /* https://htpc.deathbybandaid.net/assets/theme.park */ -body { - background: var(--main-bg-color); -} - /* Scrollbar */ - @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; - } -/* Navbar */ -@media (max-width: 924px) { - .collapse.in, .navbar-nav { - background: var(--main-bg-color); - } - } -@media (max-width: 924px) { - .navbar-left, .navbar-right { - float: none!important; - box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); - } - } - -.navbar-default .navbar-brand { - color: var(--accent-color); -} -.navbar-default { - background: var(--main-bg-color); - border-color: #FFF; -} -.nav-tabs { - border-bottom: 1px solid transparent; - margin-bottom: 3px !important; -} -.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { - background-color: rgba(0, 0, 0, 0.25); +* { + outline: none !important; } -.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { - background-color: rgba(255, 255, 255, 0.08); - color: #fff; +html, +body, +.wizard-background, +.content-container, +.mat-sidenav-container, +.content-container .top-bar-container { + color: var(--text) !important; + background: var(--main-bg-color) !important; } -.navbar-default .navbar-nav>.open>a { - background-color: rgba(0, 0, 0, 0.25); - color: #fff; -} -.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { - background-color: rgba(0, 0, 0, 0.25); -} -.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { - background-color: transparent; -} -.ui-tooltip .ui-tooltip-text{ -background-color:var(--modal-bg-color) !important; -} -@media (max-width: 924px) { - .navbar-collapse.collapse { - box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); - } - } - - /* Loading bar */ - .pace .pace-progress { - background: var(--loading-bar) !important; -} -.pace .pace-progress-inner { - box-shadow: 0 0 10px var(--loading-bar), 0 0 5px var(--loading-bar) !important; +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, legend { + color: var(--text-hover); } -/* Search bar */ -.search-bar-background[_ngcontent-c1] { +/* 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-color: transparent !important; -} -.search-bar-background[_ngcontent-c2] { - background-color: transparent; -} -@media (min-width: 979px) { -.form-control-search[_ngcontent-c2] { - width: 100%; -} -} -.form-control-custom { - background-color: rgba(0, 0, 0, 0.25) !important; - border-radius: 0px; -} -.form-control-search { - height: 49px; + background: rgb(255 255 255 / 30%); +} + +/* TOP NAV */ +.top-search-bar .mat-form-field-flex { + border: 1px solid rgba(255, 255, 255, 0.10); + background-color: rgba(0, 0, 0, 0.45); } -.right-radius { - border-radius: 0px; -} -.input-group-addon { - background-color: rgba(0, 0, 0, 0.25); - border-bottom: 2px; +/* Drop down menu */ +.mat-menu-panel, +#requestsToDisplayDropdown-panel { + background: var(--modal-bg-color); } -.nav-tabs.nav-justified { - margin-bottom: 3px; +.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) { + color: rgb(var(--accent-color)); } -@media (max-width: 978px) { -.form-control-search[_ngcontent-c1] { - width: -webkit-fill-available !important; + +.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { + background: hsl(0deg 0% 0% / 25%); } + +/* SIDE NAV */ +/* OMBI TEXT */ +.sidenav-container .sidenav .application-name { + color: rgb(var(--accent-color)) !important; } @media (min-width: 768px) { -.nav-tabs.nav-justified>li>a { - border-bottom: none; + .sidenav-container .sidenav { + background: hsla(0, 0%, 0%, 0.438) !important; + } } + +.sidenav-container .sidenav { + background: var(--modal-bg-color) !important; + color: #fff; + font-family: Montserrat, sans-serif; + width: 16rem; } -@media (min-width: 979px) { -.form-control-search[_ngcontent-c1] { + +.sidenav-container .sidenav .menu-spacing { + margin-bottom: 5%; + /* padding-left: .5rem; + padding-right: .5rem; */ +} + +.mat-drawer-backdrop.mat-drawer-shown { + background-color: hsl(0deg 0% 0% / 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: var(--text-hover) !important; +} + +.sidenav-container .sidenav .active-list-item { + color: var(--text-hover); + background: rgb(255 255 255 / 15%) !important; + border-radius: .375rem !important; + padding: 10px 20px; + height: auto; + width: 16rem !important; +} + +.sidenav-container .sidenav .mat-list-item { + color: var(--text) !important; + 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%; -} -} -.refine-option[_ngcontent-c1] { - box-shadow: none; -} -#movieTabButton:hover, #tvTabButton:hover { - border: 1px solid transparent; + height: 100%; + overflow: hidden; + -webkit-overflow-scrolling: touch; } -/* Expand season request */ -.content-space[_ngcontent-c3] { - padding: 15px; - background: rgba(0, 0, 0, 0.25); -} -.table-striped>tbody>tr:nth-of-type(odd) { - background-color: rgba(0, 0, 0, 0.25); -} -.table-hover>tbody>tr:hover { - background-color: rgba(255, 255, 255, 0.08); -} -table.table>thead>tr>th.active { - background-color: rgba(255, 255, 255, 0.08); -} -/*filter */ -.ui-widget-content { - background: var(--main-bg-color) !important; -} -.ui-state-active { - color: #ffffff!important; - background-color: rgba(0, 0, 0, 0.25)!important; -} -.ui-state-default { - border: 2px solid rgba(255, 255, 255, 0.25); +.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; } -/*dropdown menu */ -.dropdown-menu { - background: var(--modal-bg-color); - box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); -} -.dropdown-menu>li>a:hover { - background-color: rgba(255, 255, 255, 0.08); -} -.navbar-nav>li>.dropdown-menu { - width: 163.5px; -} -.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { - background-color: rgba(0, 0, 0, 0.45); +.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; } -/* Settings */ -hr { - border: 1px dashed #d7d7d7; +.sidenav-container .sidenav.mat-action-list .mat-list-item:focus, +.sidenav-container .sidenav .mat-action-list .mat-list-item:hover, +.sidenav-container .sidenav.mat-list-option:focus, +.mat-list-option:hover, +.sidenav-container .sidenav .mat-nav-list .mat-list-item:focus, +.sidenav-container .sidenav .mat-nav-list .mat-list-item:hover { + background: hsla(0, 0%, 100%, .04); + border-radius: .375rem !important; + color: var(--text-hover) !important; } -/* Buttons */ -.btn-primary-outline{ - color: var(--request-button) !important; - border-color: var(--request-button) !important; - outline: none !important; -} -.open>.btn-primary-outline.dropdown-toggle,.btn-primary-outline.active, .btn-primary-outline.focus, .btn-primary-outline:active, .btn-primary-outline:focus, .btn-primary-outline:hover{ - background-color: var(--request-button-hover) !important; - border-color: transparent !important; +/* DISCOVER PAGE */ +.discover-filter-buttons-group { + background: rgb(255 255 255 / 8%) !important; + border: 1px solid rgb(255 255 255 / 10%) !important; + border-radius: 30px; + color: #fff; + margin-bottom: 10px; + margin-right: 30px; } -.btn-primary-outline:hover { - background-color: var(--request-button-hover) !important; - border-color: transparent!important; -} -.btn-link { - color: #ffffff; -} -.btn-link:focus, .btn-link:hover { - color: #ddd; -} -.input-group-addon .btn-group .btn { - outline: none !important; - border: 1px solid transparent !important; - margin-right: 1px; - background: none; - padding: 5px 10px; - width: auto !important; -} -.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 { - background: rgba(255, 255, 255, 0.35) !important; +.discover-filter-buttons-group .button-active { + background: rgba(0, 0, 0, 0.45) !important; } -.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group { - margin-left: 3px; -} -i.fa.fa-minus, i.fa.fa-plus { - display:none; +.small-middle-container [div*="_ngcontent-"] { + margin: auto; + width: 100% !important; } - - -.btn-success-outline { - -o-transition: all .8s; - -moz-transition: all .8s; - -webkit-transition: all .8s; - transition: all .8s; - color: #ffffff!important; - background-color: rgba(255, 255, 255, 0.35); - background-image: none; - text-transform: uppercase; - border-color: transparent !important; - width: 137.28px; - text-align: center !important; - font-size: 12px; - height: 29.45px; - padding: 5px 10px; -} -.btn-success-outline.active, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline:focus, .btn-success-outline:hover, .open>.btn-success-outline.dropdown-toggle { - color: #fff!important; - background-color: rgba(92, 184, 92, .75)!important; - border-color: transparent!important; +.small-middle-container.ng-star-inserted { + width: 85% !important; + margin: 10px auto auto !important; } -.btn-primary-outline { - -o-transition: all .8s; - -moz-transition: all .8s; - -webkit-transition: all .8s; - transition: all .8s; - color: #ffffff !important; - border-color: #f4433600 !important; - outline: none !important; - text-transform: uppercase; - background: rgba(255, 255, 255, 0.35); - font-size: 12px; - height: 29.45px; - min-width: 137.28px; - padding: 5px 10px; - text-align: center !important; - +.small-middle-container[div*="_ngcontent-"] { + width: 95% !important; + margin: 10px auto auto !important; } -.btn-info-outline, .btn-danger-outline { - -o-transition: all .8s; - -moz-transition: all .8s; - -webkit-transition: all .8s; - transition: all .8s; - color: #ffffff!important; - background-color: rgba(255, 255, 255, 0.35); - background-image: none; - border-color: transparent !important; - width: 137.28px; - text-transform: uppercase; - text-align: center !important; - height: 29.45px; - min-width: fit-content; - font-size: 12px; - padding: 5px 10px; -} - - .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { - -o-transition: all .8s; - -moz-transition: all .8s; - -webkit-transition: all .8s; - transition: all .8s; - color: #ffffff!important; - background-color: rgba(255, 255, 255, 0.35); - background-image: none; - border-color: transparent !important; - width: 137.28px; - text-transform: uppercase; - text-align: center !important; - height: 29.45px; - font-size: 12px; - padding: 5px 10px; - border-radius: .25rem!important; -} -.btn-split .btn.dropdown-toggle { - border-radius: 0 .25rem .25rem 0!important; - padding: 3.5px 10px; - border: none; -} -.btn-split .btn.dropdown-toggle:hover, .btn-split .btn.dropdown-toggle:active, .btn-split .btn.dropdown-toggle:focus, .btn-split .btn.dropdown-toggle.active { -background: none !important; -} -.btn-warning-outline { - -o-transition: all .8s; - -moz-transition: all .8s; - -webkit-transition: all .8s; - transition: all .8s; - color: #fff!important; - background-color: transparent; - background-image: none; - border-color: transparent !important; -} -.btn-warning-outline.active, .btn-warning-outline.focus, .btn-warning-outline:active, .btn-warning-outline:focus, .btn-warning-outline:hover, .open>.btn-warning-outline.dropdown-toggle,.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle):hover { - color: #fff!important; - background-color: rgba(196, 134, 42, 0.75)!important; - border-color: transparent!important; -} - - -.btn-info-outline.active, .btn-info-outline.focus, .btn-info-outline:active, .btn-info-outline:focus, .btn-info-outline:hover, .open>.btn-info-outline.dropdown-toggle { - color: #fff!important; - background-color: rgba(91, 192, 222, 0.75)!important; - border-color: transparent !important; -} - -@media (max-width: 1090px) { - .btn-danger-outline, .btn-info-outline, .btn-primary-outline, .btn-success-outline, .fa-eye:before, .fa-check:before,.fa-plus:before, .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { - content: ""; +@media (min-width: 768px) { + .content-container { + margin-left: 255px !important; } + + .content-container .section { + margin: 6px !important; } -.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group { - margin-left: -25px; -} -/* Settings menu */ - -.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover { - background-color: rgba(0, 0, 0, 0.45) !important; - border: 1px solid #00000000 !important; - border-radius: 3px; -} -.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { - background-color: rgba(0, 0, 0, 0.45) !important; - border: 1px solid #00000000 !important; - border-radius: 3px; -} -.nav-tabs>li>a:hover { - border-color: transparent; -} -.nav>li>a:focus, .nav>li>a:hover { - background-color: rgba(255, 255, 255, 0.08); - border-radius: 3px; -} -.nav .open>a, .nav .open>a:focus, .nav .open>a:hover { - background-color: rgba(0, 0, 0, 0.25); - border-color: #00000000; -} -.panel { - background-color: rgba(0, 0, 0, 0.45); } -.card-header { - background-color: rgba(0, 0, 0, 0.25); - color: #ebebeb; - padding: 10px 15px; - border-bottom: 1px solid #00000000; -} -a.active { - background-color: rgba(0, 0, 0, 0.45); +/* MOBILE */ +@media (min-width: 768px) { + .sidenav-container .sidenav { + background: hsla(0, 0%, 0%, 0.438) !important; + } } -.ui-state-highlight { -background: var(--modal-bg-color); -} -legend { - border-bottom: 1px solid rgba(255, 255, 255, 0.25); -} -/* Main page */ -.backdrop { - box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6) !important; -} -a>h4 { - color: var(--accent-color); -} -.label-info { - background-color: var(--label-color); -} -.label-success { - background-color: rgba(92, 184, 92, 0.75); -} -.fa-film:before { - content: "\F008"; - color: rgba(255, 255, 255, 0.6); -} @media (max-width: 768px) { - .input-group-addon .btn-group { - position: absolute; - right: 0px; - top: 54px; - box-shadow: 0 0 0; + .p-carousel-item { + min-height: 230px !important; + max-width: 11.7rem !important + } + + .p-carousel .p-carousel-content .p-carousel-next, + .p-carousel .p-carousel-content .p-carousel-prev { + display: none; + } + + .right { + text-align: right !important; + margin-top: -61px; } } -/* Issues */ - -.side-back { - box-shadow: 0 0 10px #000000ad; +.p-carousel-item { + min-height: 290px; + max-height: 290px; + max-width: 12rem; } +@media (max-width: 768px) { +.section h2 { + margin-left: 5px !important; + } +} +@media (min-width: 768px) { + .section h2 { + margin-left: 63px !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: .75rem .75rem 0 0 !important; + background-color: rgba(0, 0, 0, 0.7) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + transition: 0s -webkit-filter linear; +} + +.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); +} + +#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: rgba(0, 0, 0, 0.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) !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 img { + min-height: 354px; + } +} + +#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: rgba(0, 0, 0, .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) { + 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); +} + +/* 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); +} + +button.admin-cog { + color: var(--button-color) !important; +} + +.grow:hover { + color: #fff; +} + +/* 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-checkbox-checked.mat-accent .mat-checkbox-background, +.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background { + background-color: rgb(var(--accent-color)); +} + .form-control:focus { - border-color: transparent; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; + 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); + 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) +} -/* OMBI V4*/ - - - body { - background: var(--main-bg-color); - } - a { - color: var(--accent-color); - } - a: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); - } - - - - /* 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) - } - - .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; - } - /* MODAL */ - .dark .mat-dialog-container,.mat-dialog-container { - background: var(--modal-bg-color); - color: var(--text); - } - - div.dark .details, .details { - background: transparent !important; - } - - - /* 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); - } - - /* 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; - } - 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); - } - \ No newline at end of file +/* Login page */ +.login-card H1.login_logo { + color: rgb(var(--accent-color)) !important; +} + +/* TABLES */ + +.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: rgba(0, 0, 0, 0.25); +} + +tr.mat-header-row { + background: rgba(0, 0, 0, 0.45); +} + +.table thead th { + vertical-align: bottom; + border-bottom: 2px solid rgb(255 255 255 / 25%); + border-top: 1px solid rgb(255 255 255 / 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)); +} + +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); +} + +.mat-bottom-sheet-container { + background: var(--modal-bg-color); +} + +/* OTHER */ +.mat-tooltip { + background: var(--modal-bg-color) !important; +} + +.mat-progress-spinner.mat-accent circle,.mat-spinner.mat-accent circle { + stroke: rgb(var(--accent-color)); +} \ No newline at end of file diff --git a/CSS/themes/ombi/ombiv3-base.css b/CSS/themes/ombi/ombiv3-base.css new file mode 100644 index 00000000..67d51a6c --- /dev/null +++ b/CSS/themes/ombi/ombiv3-base.css @@ -0,0 +1,616 @@ + +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +body { + background: var(--main-bg-color); +} + /* Scrollbar */ + @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; + } +/* Navbar */ +@media (max-width: 924px) { + .collapse.in, .navbar-nav { + background: var(--main-bg-color); + } + } + +@media (max-width: 924px) { + .navbar-left, .navbar-right { + float: none!important; + box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); + } + } + +.navbar-default .navbar-brand { + color: var(--accent-color); +} +.navbar-default { + background: var(--main-bg-color); + border-color: #FFF; +} +.nav-tabs { + border-bottom: 1px solid transparent; + margin-bottom: 3px !important; +} +.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { + background-color: rgba(0, 0, 0, 0.25); +} + +.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { + background-color: rgba(255, 255, 255, 0.08); + color: #fff; +} +.navbar-default .navbar-nav>.open>a { + background-color: rgba(0, 0, 0, 0.25); + color: #fff; +} +.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { + background-color: rgba(0, 0, 0, 0.25); +} +.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { + background-color: transparent; +} +.ui-tooltip .ui-tooltip-text{ +background-color:var(--modal-bg-color) !important; +} +@media (max-width: 924px) { + .navbar-collapse.collapse { + box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); + } + } + + /* Loading bar */ + .pace .pace-progress { + background: var(--loading-bar) !important; +} +.pace .pace-progress-inner { + box-shadow: 0 0 10px var(--loading-bar), 0 0 5px var(--loading-bar) !important; +} + +/* Search bar */ +.search-bar-background[_ngcontent-c1] { + border-radius: 3px; + background-color: transparent !important; +} +.search-bar-background[_ngcontent-c2] { + background-color: transparent; +} +@media (min-width: 979px) { +.form-control-search[_ngcontent-c2] { + width: 100%; +} +} +.form-control-custom { + background-color: rgba(0, 0, 0, 0.25) !important; + border-radius: 0px; +} +.form-control-search { + height: 49px; +} + +.right-radius { + border-radius: 0px; +} +.input-group-addon { + background-color: rgba(0, 0, 0, 0.25); + border-bottom: 2px; +} + +.nav-tabs.nav-justified { + margin-bottom: 3px; +} +@media (max-width: 978px) { +.form-control-search[_ngcontent-c1] { + width: -webkit-fill-available !important; +} +} + +@media (min-width: 768px) { +.nav-tabs.nav-justified>li>a { + border-bottom: none; +} +} +@media (min-width: 979px) { +.form-control-search[_ngcontent-c1] { + width: 100%; +} +} +.refine-option[_ngcontent-c1] { + box-shadow: none; +} +#movieTabButton:hover, #tvTabButton:hover { + border: 1px solid transparent; +} + +/* Expand season request */ +.content-space[_ngcontent-c3] { + padding: 15px; + background: rgba(0, 0, 0, 0.25); +} +.table-striped>tbody>tr:nth-of-type(odd) { + background-color: rgba(0, 0, 0, 0.25); +} +.table-hover>tbody>tr:hover { + background-color: rgba(255, 255, 255, 0.08); +} +table.table>thead>tr>th.active { + background-color: rgba(255, 255, 255, 0.08); +} +/*filter */ +.ui-widget-content { + background: var(--main-bg-color) !important; +} +.ui-state-active { + color: #ffffff!important; + background-color: rgba(0, 0, 0, 0.25)!important; +} +.ui-state-default { + border: 2px solid rgba(255, 255, 255, 0.25); +} + +/*dropdown menu */ +.dropdown-menu { + background: var(--modal-bg-color); + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); +} +.dropdown-menu>li>a:hover { + background-color: rgba(255, 255, 255, 0.08); +} +.navbar-nav>li>.dropdown-menu { + width: 163.5px; +} +.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { + background-color: rgba(0, 0, 0, 0.45); +} + +/* Settings */ +hr { + border: 1px dashed #d7d7d7; +} + +/* Buttons */ +.btn-primary-outline{ + color: var(--request-button) !important; + border-color: var(--request-button) !important; + outline: none !important; +} +.open>.btn-primary-outline.dropdown-toggle,.btn-primary-outline.active, .btn-primary-outline.focus, .btn-primary-outline:active, .btn-primary-outline:focus, .btn-primary-outline:hover{ + background-color: var(--request-button-hover) !important; + border-color: transparent !important; +} + +.btn-primary-outline:hover { + background-color: var(--request-button-hover) !important; + border-color: transparent!important; +} +.btn-link { + color: #ffffff; +} +.btn-link:focus, .btn-link:hover { + color: #ddd; +} +.input-group-addon .btn-group .btn { + outline: none !important; + border: 1px solid transparent !important; + margin-right: 1px; + background: none; + padding: 5px 10px; + width: auto !important; +} +.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 { + background: rgba(255, 255, 255, 0.35) !important; +} + +.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group { + margin-left: 3px; +} +i.fa.fa-minus, i.fa.fa-plus { + display:none; +} + + + +.btn-success-outline { + -o-transition: all .8s; + -moz-transition: all .8s; + -webkit-transition: all .8s; + transition: all .8s; + color: #ffffff!important; + background-color: rgba(255, 255, 255, 0.35); + background-image: none; + text-transform: uppercase; + border-color: transparent !important; + width: 137.28px; + text-align: center !important; + font-size: 12px; + height: 29.45px; + padding: 5px 10px; +} +.btn-success-outline.active, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline:focus, .btn-success-outline:hover, .open>.btn-success-outline.dropdown-toggle { + color: #fff!important; + background-color: rgba(92, 184, 92, .75)!important; + border-color: transparent!important; +} + +.btn-primary-outline { + -o-transition: all .8s; + -moz-transition: all .8s; + -webkit-transition: all .8s; + transition: all .8s; + color: #ffffff !important; + border-color: #f4433600 !important; + outline: none !important; + text-transform: uppercase; + background: rgba(255, 255, 255, 0.35); + font-size: 12px; + height: 29.45px; + min-width: 137.28px; + padding: 5px 10px; + text-align: center !important; + +} + +.btn-info-outline, .btn-danger-outline { + -o-transition: all .8s; + -moz-transition: all .8s; + -webkit-transition: all .8s; + transition: all .8s; + color: #ffffff!important; + background-color: rgba(255, 255, 255, 0.35); + background-image: none; + border-color: transparent !important; + width: 137.28px; + text-transform: uppercase; + text-align: center !important; + height: 29.45px; + min-width: fit-content; + font-size: 12px; + padding: 5px 10px; +} + + .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { + -o-transition: all .8s; + -moz-transition: all .8s; + -webkit-transition: all .8s; + transition: all .8s; + color: #ffffff!important; + background-color: rgba(255, 255, 255, 0.35); + background-image: none; + border-color: transparent !important; + width: 137.28px; + text-transform: uppercase; + text-align: center !important; + height: 29.45px; + font-size: 12px; + padding: 5px 10px; + border-radius: .25rem!important; +} +.btn-split .btn.dropdown-toggle { + border-radius: 0 .25rem .25rem 0!important; + padding: 3.5px 10px; + border: none; +} +.btn-split .btn.dropdown-toggle:hover, .btn-split .btn.dropdown-toggle:active, .btn-split .btn.dropdown-toggle:focus, .btn-split .btn.dropdown-toggle.active { +background: none !important; +} +.btn-warning-outline { + -o-transition: all .8s; + -moz-transition: all .8s; + -webkit-transition: all .8s; + transition: all .8s; + color: #fff!important; + background-color: transparent; + background-image: none; + border-color: transparent !important; +} +.btn-warning-outline.active, .btn-warning-outline.focus, .btn-warning-outline:active, .btn-warning-outline:focus, .btn-warning-outline:hover, .open>.btn-warning-outline.dropdown-toggle,.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle):hover { + color: #fff!important; + background-color: rgba(196, 134, 42, 0.75)!important; + border-color: transparent!important; +} + + +.btn-info-outline.active, .btn-info-outline.focus, .btn-info-outline:active, .btn-info-outline:focus, .btn-info-outline:hover, .open>.btn-info-outline.dropdown-toggle { + color: #fff!important; + background-color: rgba(91, 192, 222, 0.75)!important; + border-color: transparent !important; +} + +@media (max-width: 1090px) { + .btn-danger-outline, .btn-info-outline, .btn-primary-outline, .btn-success-outline, .fa-eye:before, .fa-check:before,.fa-plus:before, .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { + content: ""; + } + } +.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group { + margin-left: -25px; +} +/* Settings menu */ + +.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover { + background-color: rgba(0, 0, 0, 0.45) !important; + border: 1px solid #00000000 !important; + border-radius: 3px; +} +.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { + background-color: rgba(0, 0, 0, 0.45) !important; + border: 1px solid #00000000 !important; + border-radius: 3px; +} +.nav-tabs>li>a:hover { + border-color: transparent; +} +.nav>li>a:focus, .nav>li>a:hover { + background-color: rgba(255, 255, 255, 0.08); + border-radius: 3px; +} +.nav .open>a, .nav .open>a:focus, .nav .open>a:hover { + background-color: rgba(0, 0, 0, 0.25); + border-color: #00000000; +} +.panel { + background-color: rgba(0, 0, 0, 0.45); +} + +.card-header { + background-color: rgba(0, 0, 0, 0.25); + color: #ebebeb; + padding: 10px 15px; + border-bottom: 1px solid #00000000; +} +a.active { + background-color: rgba(0, 0, 0, 0.45); +} + +.ui-state-highlight { +background: var(--modal-bg-color); +} +legend { + border-bottom: 1px solid rgba(255, 255, 255, 0.25); +} +/* Main page */ +.backdrop { + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6) !important; +} +a>h4 { + color: var(--accent-color); +} +.label-info { + background-color: var(--label-color); +} +.label-success { + background-color: rgba(92, 184, 92, 0.75); +} +.fa-film:before { + content: "\F008"; + color: rgba(255, 255, 255, 0.6); +} + +@media (max-width: 768px) { + .input-group-addon .btn-group { + position: absolute; + right: 0px; + top: 54px; + box-shadow: 0 0 0; + } +} + +/* Issues */ + +.side-back { + box-shadow: 0 0 10px #000000ad; +} +.form-control:focus { + border-color: transparent; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; +} + + + +/* OMBI V4*/ + + + body { + background: var(--main-bg-color); + } + a { + color: var(--accent-color); + } + a: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); + } + + + + /* 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) + } + + .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; + } + /* MODAL */ + .dark .mat-dialog-container,.mat-dialog-container { + background: var(--modal-bg-color); + color: var(--text); + } + + div.dark .details, .details { + background: transparent !important; + } + + + /* 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); + } + + /* 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; + } + 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); + } + \ No newline at end of file diff --git a/CSS/themes/ombi/organizr-dark.css b/CSS/themes/ombi/organizr-dark.css index d4aa68c7..82eb495d 100644 --- a/CSS/themes/ombi/organizr-dark.css +++ b/CSS/themes/ombi/organizr-dark.css @@ -16,9 +16,19 @@ :root { --main-bg-color: #1f1f1f; --modal-bg-color: #1b1b1b; - --request-button: #2cabe3; - --request-button-hover: rgb(44 171 227 / .8); - --loading-bar: #2cabe3; - --accent-color: #2cabe3; - --label-color: #2cabe3; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 44, 171, 227; + --accent-color-hover: white; + --queue-color: #2cabe3; + --link-color: #2cabe3; + --link-color-hover: #fff; + + --text:#96a2b4; + --text-hover: #fff; + --text-muted: #999; } diff --git a/CSS/themes/ombi/plex.css b/CSS/themes/ombi/plex.css index 0519be3b..cbf757a3 100644 --- a/CSS/themes/ombi/plex.css +++ b/CSS/themes/ombi/plex.css @@ -16,10 +16,19 @@ :root { --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --request-button:#cc7b19; - --request-button-hover: #e59029; - --loading-bar: #cc7b19 ; - --accent-color: #f9be03; - --label-color: #cc7b19; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --button-text-hover: #fff; + --accent-color: 229, 160, 13; + --accent-color-hover: #ffc107; + --queue-color: #27c24c; + --link-color: #e5a00d; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; } \ No newline at end of file diff --git a/CSS/themes/ombi/space-gray.css b/CSS/themes/ombi/space-gray.css index d5509534..8a158519 100644 --- a/CSS/themes/ombi/space-gray.css +++ b/CSS/themes/ombi/space-gray.css @@ -16,9 +16,19 @@ :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; - --request-button:#81a6b7; - --request-button-hover: #607D8B; - --loading-bar: #81a6b7; - --accent-color: #c3dde8; - --label-color: #607d8b; + + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 129, 166, 183; + --accent-color-hover: #607D8B; + --queue-color: #81a6b7; + --link-color: #81a6b7; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; } diff --git a/CSS/themes/plex/plex-base.css b/CSS/themes/plex/plex-base.css index c58cd3be..bc023fea 100644 --- a/CSS/themes/plex/plex-base.css +++ b/CSS/themes/plex/plex-base.css @@ -39,7 +39,8 @@ a, color: var(--link-color) } -a:hover { +a:hover, +.artwork-file-container:hover a { color: var(--link-color-hover); } @@ -109,7 +110,9 @@ a:hover { [class*="PageHeaderTabDropdown-isSelected-"], [class*="MultiSelectPageHeader-selectedTitle-"], [class*="PageHeaderMultiselectActions-container-"], -[class*="PageHeaderMultiselectActions-count-"] { +[class*="PageHeaderMultiselectActions-count-"], +[class*="PivotTab-selectedButton-"], +[class*="PivotTabDropdown-isSelected-"] { color: rgb(var(--accent-color)); border-color: rgb(var(--accent-color)); } @@ -144,6 +147,10 @@ a:hover { transform: scale(1.4); } +[class*="SelectButton-selectButton-"].isActive [class*="SelectButton-selectCircle-"] { + background: rgb(var(--accent-color-hover)); + } + [class*="PlayButton-playButton-"]:hover [class*="PlayButton-playCircle-"], [class*="PlayPauseOverlay-playCircle-"] { border-color: rgb(var(--accent-color)); @@ -379,18 +386,21 @@ fieldset[disabled] .btn-primary:hover { color: var(--text-color); } -[class*="Button-primary-"] { +[class*="Button-primary-"], +.selectize-control.multi .selectize-input>div { background-color: var(--button-color); color: var(--button-text); } -[class*="Button-primary-"]:hover { +[class*="Button-primary-"]:hover, +.selectize-control.multi .selectize-input>div.active { background-color: var(--button-color-hover); color: var(--button-text-hover); } /* DROPDOWN MENU */ -[class*="Menu-menu-"] { +[class*="Menu-menu-"], +.selectize-dropdown, .selectize-dropdown.form-control { background: var(--modal-bg-color); } @@ -399,6 +409,27 @@ fieldset[disabled] .btn-primary:hover { color: rgb(var(--accent-color)); } +[class*="Tooltip-tooltip-"] { + background-color: var(--button-color); + color: #fff; +} + +[class*="Tooltip-tooltipBottomArrow-"]:after { + border-top-color: var(--button-color); +} + +[class*="Tooltip-tooltipTopArrow-"]:after { + border-bottom-color: var(--button-color); +} + +[class*="Tooltip-tooltipRightArrow-"]:after { + border-left-color: var(--button-color); +} + +[class*="Tooltip-tooltipLeftArrow-"]:after { + border-right-color: var(--button-color); +} + /* SETTINGS */ [class*="SettingsFormSection-sectionWrapper-"], [class*="ServerDashboardPageSection-section-"], diff --git a/CSS/themes/prowlarr/aquamarine.css b/CSS/themes/prowlarr/aquamarine.css index c2f9cf1d..c6f60878 100644 --- a/CSS/themes/prowlarr/aquamarine.css +++ b/CSS/themes/prowlarr/aquamarine.css @@ -34,6 +34,7 @@ --queue-color: #009688; --link-color: #0ed2bf; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/prowlarr/dark.css b/CSS/themes/prowlarr/dark.css index 245ec1a1..113cf0bc 100644 --- a/CSS/themes/prowlarr/dark.css +++ b/CSS/themes/prowlarr/dark.css @@ -34,6 +34,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/prowlarr/dracula.css b/CSS/themes/prowlarr/dracula.css new file mode 100644 index 00000000..1922508b --- /dev/null +++ b/CSS/themes/prowlarr/dracula.css @@ -0,0 +1,42 @@ + +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* PROWLARR DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/prowlarr/prowlarr-base.css); +:root { + --main-bg-color: #282a36; + --modal-bg-color: #282a36; + + --calendar-in-cinemas: 53, 197, 244; + --calendar-downloading: 122 67 182; + --calendar-unmonitored: 173 173 173; + --calendar-unaired: 93 156 236; + --calendar-missing: 240 80 80; + --calendar-available: 39 194 76; + + --button-color: #bd93f9; + --button-color-hover: #ff79c6; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: #50fa7b; + --accent-color-hover: #50fa7b; + --queue-color: #50fa7b; + --link-color: #ff79c6; + --link-color-hover: #8be9fd; + --label-text-color: #282a36; + + --text:#6272a4; + --text-hover: #95adfa; + --text-muted: #999; +} diff --git a/CSS/themes/prowlarr/hotline.css b/CSS/themes/prowlarr/hotline.css index 7e903e4d..85e852d3 100644 --- a/CSS/themes/prowlarr/hotline.css +++ b/CSS/themes/prowlarr/hotline.css @@ -34,6 +34,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/prowlarr/organizr-dark.css b/CSS/themes/prowlarr/organizr-dark.css index e0308b0f..5e59538f 100644 --- a/CSS/themes/prowlarr/organizr-dark.css +++ b/CSS/themes/prowlarr/organizr-dark.css @@ -34,6 +34,7 @@ --queue-color: #2cabe3; --link-color: #2cabe3; --link-color-hover: #fff; + --label-text-color: #fff; --text:#96a2b4; --text-hover: #fff; diff --git a/CSS/themes/prowlarr/plex.css b/CSS/themes/prowlarr/plex.css index 3844f400..072ea2b1 100644 --- a/CSS/themes/prowlarr/plex.css +++ b/CSS/themes/prowlarr/plex.css @@ -34,6 +34,7 @@ --queue-color: #27c24c; --link-color: #e5a00d; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/prowlarr/prowlarr-base.css b/CSS/themes/prowlarr/prowlarr-base.css index 35ef78f7..82e0b6cd 100644 --- a/CSS/themes/prowlarr/prowlarr-base.css +++ b/CSS/themes/prowlarr/prowlarr-base.css @@ -286,8 +286,8 @@ a:hover { color: var(--text-hover) !important; } -[class*="Icon-default-"]:hover { - color: #fff; +[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { + color: var(--text-hover); } [class*="MonitorToggleButton-toggleButton-"] { @@ -364,19 +364,19 @@ a:hover { [class*="Label-default-"] { border-color: var(--accent-color); background-color: var(--accent-color); - color: #fff; + color: var(--label-text-color); } [class*="Label-info-"] { border-color: var(--accent-color); background-color: var(--accent-color); - color: #fff; + color: var(--label-text-color); } [class*="PageSidebarItem-status-"][class*="Label-info-"] { border-color: var(--queue-color); background-color: var(--queue-color); - color: #fff; + color: var(--label-text-color); } [class*="MovieDetails-selectedTab-"] { @@ -407,6 +407,10 @@ a:hover { color: var(--text-hover); } +[class*="TableRowCell-cell-"] { + border-top: 1px solid rgb(255 255 255 / 25%); +} + /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { background-color: rgba(0, 0, 0, .25); @@ -514,7 +518,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: #FFF + color: var(--label-text-color); } [class*="IndexerSearchInput-container-"] [class*="Input-input-"] { @@ -826,7 +830,8 @@ a:hover { [class*="QualityProfiles-center-"], [class*="LanguageProfiles-center-"], [class*="ReleaseProfiles-center-"], -[class*="Applications-center-"] { +[class*="Applications-center-"], +[class*="AppProfiles-center-"] { background-color: transparent; border: none; color: var(--text); diff --git a/CSS/themes/prowlarr/space-gray.css b/CSS/themes/prowlarr/space-gray.css index b69ebd31..24ca8171 100644 --- a/CSS/themes/prowlarr/space-gray.css +++ b/CSS/themes/prowlarr/space-gray.css @@ -34,6 +34,7 @@ --queue-color: #81a6b7; --link-color: #81a6b7; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/radarr/aquamarine.css b/CSS/themes/radarr/aquamarine.css index 25288501..889086cb 100644 --- a/CSS/themes/radarr/aquamarine.css +++ b/CSS/themes/radarr/aquamarine.css @@ -34,6 +34,7 @@ --queue-color: #009688; --link-color: #0ed2bf; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/radarr/dark.css b/CSS/themes/radarr/dark.css index 17c8477c..71cffae9 100644 --- a/CSS/themes/radarr/dark.css +++ b/CSS/themes/radarr/dark.css @@ -34,6 +34,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/radarr/dracula.css b/CSS/themes/radarr/dracula.css new file mode 100644 index 00000000..dd44b8d4 --- /dev/null +++ b/CSS/themes/radarr/dracula.css @@ -0,0 +1,41 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* RADARR DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/radarr/radarr-base.css); +:root { + --main-bg-color: #282a36; + --modal-bg-color: #282a36; + + --calendar-in-cinemas: 53, 197, 244; + --calendar-downloading: 122 67 182; + --calendar-unmonitored: 173 173 173; + --calendar-unaired: 93 156 236; + --calendar-missing: 240 80 80; + --calendar-available: 39 194 76; + + --button-color: #bd93f9; + --button-color-hover: #ff79c6; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: #50fa7b; + --accent-color-hover: #50fa7b; + --queue-color: #50fa7b; + --link-color: #ff79c6; + --link-color-hover: #8be9fd; + --label-text-color: #282a36; + + --text:#6272a4; + --text-hover: #95adfa; + --text-muted: #999; +} diff --git a/CSS/themes/radarr/hotline.css b/CSS/themes/radarr/hotline.css index 9bb15c93..470cfd66 100644 --- a/CSS/themes/radarr/hotline.css +++ b/CSS/themes/radarr/hotline.css @@ -34,6 +34,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/radarr/organizr-dark.css b/CSS/themes/radarr/organizr-dark.css index 75e31b3f..def412f9 100644 --- a/CSS/themes/radarr/organizr-dark.css +++ b/CSS/themes/radarr/organizr-dark.css @@ -34,6 +34,7 @@ --queue-color: #2cabe3; --link-color: #2cabe3; --link-color-hover: #fff; + --label-text-color: #fff; --text:#96a2b4; --text-hover: #fff; diff --git a/CSS/themes/radarr/plex.css b/CSS/themes/radarr/plex.css index 244a4882..dc7c6a0e 100644 --- a/CSS/themes/radarr/plex.css +++ b/CSS/themes/radarr/plex.css @@ -34,6 +34,7 @@ --queue-color: #27c24c; --link-color: #e5a00d; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/radarr/radarr-base.css b/CSS/themes/radarr/radarr-base.css index f386b467..c68277cf 100644 --- a/CSS/themes/radarr/radarr-base.css +++ b/CSS/themes/radarr/radarr-base.css @@ -290,8 +290,8 @@ a:hover { color: var(--text-hover) !important; } -[class*="Icon-default-"]:hover { - color: #fff; +[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { + color: var(--text-hover); } [class*="MonitorToggleButton-toggleButton-"] { @@ -357,7 +357,7 @@ a:hover { } [class*="Label-default-"] [class*="IconButton-button-"] { - color: #eee; + color: var(--label-text-color); } [class*="IconButton-button-"]:hover { @@ -368,19 +368,19 @@ a:hover { [class*="Label-default-"] { border-color: var(--accent-color); background-color: var(--accent-color); - color: #fff; + color: var(--label-text-color); } [class*="Label-info-"] { border-color: var(--accent-color); background-color: var(--accent-color); - color: #fff; + color: var(--label-text-color); } [class*="PageSidebarItem-status-"][class*="Label-info-"] { border-color: var(--queue-color); background-color: var(--queue-color); - color: #fff; + color: var(--label-text-color); } [class*="MovieDetails-selectedTab-"] { @@ -411,6 +411,10 @@ a:hover { color: var(--text-hover); } +[class*="TableRowCell-cell-"] { + border-top: 1px solid rgb(255 255 255 / 25%); +} + /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { background-color: rgba(0, 0, 0, .25); @@ -518,7 +522,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: #FFF + color: var(--label-text-color); } [class*="MovieSearchInput-container-"] [class*="Input-input-"] { @@ -636,6 +640,12 @@ a:hover { text-decoration: none; } +[class*="DiscoverMoviePoster-title-"], +[class*="DiscoverMoviePosterInfo-info-"] { + background-color: rgba(255, 255, 255, 0.08); + color: var(--text); +} + /*Title*/ [class*="AddListMovieOverview-link-"] { color: var(--text); diff --git a/CSS/themes/radarr/space-gray.css b/CSS/themes/radarr/space-gray.css index 479384a7..0df391fb 100644 --- a/CSS/themes/radarr/space-gray.css +++ b/CSS/themes/radarr/space-gray.css @@ -34,6 +34,7 @@ --queue-color: #81a6b7; --link-color: #81a6b7; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/readarr/aquamarine.css b/CSS/themes/readarr/aquamarine.css index 05e8bf0a..f264e6ce 100644 --- a/CSS/themes/readarr/aquamarine.css +++ b/CSS/themes/readarr/aquamarine.css @@ -34,6 +34,7 @@ --queue-color: #009688; --link-color: #0ed2bf; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/readarr/dark.css b/CSS/themes/readarr/dark.css index 8fa42922..5deb4fcd 100644 --- a/CSS/themes/readarr/dark.css +++ b/CSS/themes/readarr/dark.css @@ -34,6 +34,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/readarr/dracula.css b/CSS/themes/readarr/dracula.css new file mode 100644 index 00000000..f2615e6c --- /dev/null +++ b/CSS/themes/readarr/dracula.css @@ -0,0 +1,42 @@ + +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* READARR AQUAMARINE THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/readarr/readarr-base.css); +:root { + --main-bg-color: #282a36; + --modal-bg-color: #282a36; + + --calendar-downloading: 122 67 182; + --calendar-downloaded: 39 194 76; + --calendar-unreleased: 93 156 236; + --calendar-partial: 255, 165, 0; + --calendar-unmonitored: 173 173 173; + --calendar-missing: 240 80 80; + + --button-color: #bd93f9; + --button-color-hover: #ff79c6; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: #50fa7b; + --accent-color-hover: #50fa7b; + --queue-color: #50fa7b; + --link-color: #ff79c6; + --link-color-hover: #8be9fd; + --label-text-color: #282a36; + + --text:#6272a4; + --text-hover: #95adfa; + --text-muted: #999; +} \ No newline at end of file diff --git a/CSS/themes/readarr/hotline.css b/CSS/themes/readarr/hotline.css index b276e911..f341e386 100644 --- a/CSS/themes/readarr/hotline.css +++ b/CSS/themes/readarr/hotline.css @@ -35,6 +35,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/readarr/organizr-dark.css b/CSS/themes/readarr/organizr-dark.css index 43f26dcf..367909c7 100644 --- a/CSS/themes/readarr/organizr-dark.css +++ b/CSS/themes/readarr/organizr-dark.css @@ -34,6 +34,7 @@ --queue-color: #2cabe3; --link-color: #2cabe3; --link-color-hover: #fff; + --label-text-color: #fff; --text:#96a2b4; --text-hover: #fff; diff --git a/CSS/themes/readarr/plex.css b/CSS/themes/readarr/plex.css index 2f9511d4..eb30a081 100644 --- a/CSS/themes/readarr/plex.css +++ b/CSS/themes/readarr/plex.css @@ -34,6 +34,7 @@ --queue-color: #27c24c; --link-color: #e5a00d; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/readarr/readarr-base.css b/CSS/themes/readarr/readarr-base.css index 0f0afcc1..e3886e84 100644 --- a/CSS/themes/readarr/readarr-base.css +++ b/CSS/themes/readarr/readarr-base.css @@ -322,11 +322,11 @@ a:hover { [class*="Label-default-"] { border-color: var(--accent-color); background-color: var(--accent-color); - color: #fff; + color: var(--label-text-color); } -[class*="Icon-default-"]:hover { - color: #fff; +[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { + color: var(--text-hover); } [class*="MonitorToggleButton-toggleButton-"] { @@ -442,6 +442,10 @@ a:hover { color: var(--text-hover); } +[class*="TableRowCell-cell-"] { + border-top: 1px solid rgb(255 255 255 / 25%); +} + /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { background-color: rgba(0, 0, 0, .25); @@ -511,19 +515,19 @@ a:hover { /* SEARCH BAR */ [class*="Input-input-"], -[class*="AddNewArtist-searchIconContainer-"], +[class*="AddNewItem-searchIconContainer-"], [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: #FFF + color: var(--label-text-color); } -[class*="ArtistSearchInput-container-"] [class*="Input-input-"] { +[class*="AuthorSearchInput-input-"][class*="Input-input-"] { background: transparent; border-bottom: solid 1px #fff; } -[class*="ArtistSearchInput-container-"] [class*="Input-input-"]:focus { +[class*="AuthorSearchInput-input-"][class*="Input-input-"]:focus { border-bottom: none; background: transparent; } @@ -1003,6 +1007,14 @@ input[type=password] { background-color: rgba(0, 0, 0, .25); } +[class*="AuthorDetailsSeason-books-"] { + border-top: 1px solid rgb(255 255 255 / 50%); +} + +[class*="AuthorDetails-tabList-"] { + border-bottom: 1px solid rgb(255 255 255 / 50%); +} + [class*="BookDetails-selectedTab-"] { border-bottom: 4px solid var(--accent-color); } diff --git a/CSS/themes/readarr/space-gray.css b/CSS/themes/readarr/space-gray.css index 31211c21..7ebb3b93 100644 --- a/CSS/themes/readarr/space-gray.css +++ b/CSS/themes/readarr/space-gray.css @@ -34,6 +34,7 @@ --queue-color: #81a6b7; --link-color: #81a6b7; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/sonarr/aquamarine.css b/CSS/themes/sonarr/aquamarine.css index 579139e7..94e902a5 100644 --- a/CSS/themes/sonarr/aquamarine.css +++ b/CSS/themes/sonarr/aquamarine.css @@ -34,6 +34,7 @@ --queue-color: #009688; --link-color: #0ed2bf; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/sonarr/dark.css b/CSS/themes/sonarr/dark.css index b5c619fa..bb6a876e 100644 --- a/CSS/themes/sonarr/dark.css +++ b/CSS/themes/sonarr/dark.css @@ -35,6 +35,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/sonarr/dracula.css b/CSS/themes/sonarr/dracula.css new file mode 100644 index 00000000..102966c5 --- /dev/null +++ b/CSS/themes/sonarr/dracula.css @@ -0,0 +1,42 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* SONARR DRACULA THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); +:root { + --main-bg-color: #282a36; + --modal-bg-color: #282a36; + + --calendar-tv-unaired-premiere: 53 197 244; + --calendar-tv-downloading: 122 67 182; + --calendar-tv-unmonitored: 173 173 173; + --calendar-tv-unaired: 93 156 236; + --calendar-tv-missing: 240 80 80; + --calendar-tv-on-air: 255 165 0; + --calendar-tv-available: 39 194 76; + + --button-color: #bd93f9; + --button-color-hover: #ff79c6; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: #50fa7b; + --accent-color-hover: #50fa7b; + --queue-color: #50fa7b; + --link-color: #ff79c6; + --link-color-hover: #8be9fd; + --label-text-color: #282a36; + + --text:#6272a4; + --text-hover: #95adfa; + --text-muted: #999; +} \ No newline at end of file diff --git a/CSS/themes/sonarr/hotline.css b/CSS/themes/sonarr/hotline.css index d73fb18a..1d06ba1b 100644 --- a/CSS/themes/sonarr/hotline.css +++ b/CSS/themes/sonarr/hotline.css @@ -34,6 +34,7 @@ --queue-color: #6b5; --link-color: #ddd; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/sonarr/organizr-dark.css b/CSS/themes/sonarr/organizr-dark.css index 50da31c1..83378ece 100644 --- a/CSS/themes/sonarr/organizr-dark.css +++ b/CSS/themes/sonarr/organizr-dark.css @@ -34,6 +34,7 @@ --queue-color: #2cabe3; --link-color: #2cabe3; --link-color-hover: #fff; + --label-text-color: #fff; --text:#96a2b4; --text-hover: #fff; diff --git a/CSS/themes/sonarr/plex.css b/CSS/themes/sonarr/plex.css index 82627125..4f933945 100644 --- a/CSS/themes/sonarr/plex.css +++ b/CSS/themes/sonarr/plex.css @@ -11,7 +11,7 @@ /* https://htpc.deathbybandaid.net/assets/theme.park */ /* SONARR PLEX THEME */ -@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/sonarr/sonarr-base.css); +@import url(https://gflix.app/theme.park/CSS/themes/sonarr/sonarr-base.css); :root { --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; @@ -34,6 +34,7 @@ --queue-color: #27c24c; --link-color: #e5a00d; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/sonarr/sonarr-base.css b/CSS/themes/sonarr/sonarr-base.css index acdd084b..74fa486b 100644 --- a/CSS/themes/sonarr/sonarr-base.css +++ b/CSS/themes/sonarr/sonarr-base.css @@ -24,927 +24,6 @@ body { /* Froms */ -[class*="FormInputHelpText\/helpText\/"] { - color: var(--text); -} - -[class*="FormInputGroup\/inputUnit\/"] { - color: var(--text) !important; -} - -/* LINKS */ -[class*="Link\/to\/"] { - color: var(--text); -} - -[class*="Link\/to\/"]:hover { - color: var(--text-hover); - text-decoration: none; -} - -a { - color: var(--link-color); -} - -a:hover { - color: var(--link-color-hover); -} - -[class*="TableRowCell\/cell\/"] [class*="Link\/to\/"], -[class*="EpisodeTitleLink\/link\/"] { - color: var(--link-color) !important; -} - -[class*="TableRowCell\/cell\/"] [class*="Link\/to\/"]:hover, -[class*="EpisodeTitleLink\/link\/"]:hover { - color: var(--link-color-hover) !important; -} - -/* Buttons */ - -[class*="Button\/default\/"] { - color: var(--button-text); - background-color: var(--button-color); - border-color: transparent; -} - -[class*="Button\/default\/"]:hover { - border-color: transparent; - background-color: var(--button-color-hover) !important; - color: var(--button-text-hover); -} - -[class*="Button\/primary\/"] { - border-color: transparent; - background-color: var(--button-color); - color: var(--button-text); -} - -[class*="Button\/primary\/"]:hover { - border-color: transparent; - background-color: var(--button-color-hover) !important; - color: var(--button-text-hover); -} - -[class*="Button\/success\/"] { - border-color: var(--button-color); - background-color: var(--button-color); - color: var(--button-text); -} - -[class*="Button\/success\/"]:hover { - border-color: var(--button-color-hover); - background-color: var(--button-color-hover); - color: var(--button-text-hover); -} - -/* LOADING PAGE */ -[class*="ErrorPage\/page\/"], -[class*="ErrorPage\/version\/"], -[class*="LoadingMessage\/loadingMessage\/"] { - color: var(--text); -} - -[class*="LoadingIndicator\/ripple\/"] { - border: 2px solid #fff; -} - -/* MODAL */ -[class*="ModalHeader\/modalHeader\/"] { - background: var(--modal-bg-color); - color: #fff; - border-bottom: var(--accent-color); -} - -[class*="ModalContent\/modalContent\/"] { - background: var(--modal-bg-color); - color: var(--text); -} - -[class*="ModalFooter\/modalFooter\/"] { - background: var(--modal-bg-color); - color: #fff; - border-top: 1px solid var(--accent-color); -} - -[class*="ModalContent\/closeButton\/"]:hover { - color: var(--text-hover); -} - -/* SONARR SPECIFIC */ -/* NOTE calendar modal popup */ -[class*="EpisodeSummary\/infoTitle\/"], -[class*="EpisodeDetailsModalContent\/tab\/"], -[class*="DescriptionListItemTitle\/title\/"] { - color: #fff; -} - -/* INPUT */ -[class*="TagInput\/internalInput\/"] { - background-color: transparent; - color: #fff; -} - -[class*="SelectInput\/select\/"] { - background-color: rgba(0, 0, 0, 0.25) !important; -} - -[class*="SelectInput\/select\/"]:active, -[class*="SelectInput\/select\/"]:focus { - background: #1e1e1e !important; -} - -[class*="AutoSuggestInput\/suggestionsList\/"], -[class*="AutoSuggestInput\/suggestionsContainerOpen\/"], -[class*="AutoSuggestInput\/suggestionsContainer\/"] { - background-color: #323232 !important; - color: white; - border: none !important; -} - -[class*="AutoSuggestInput\/suggestionHighlighted\/"] { - background-color: hsla(0, 0%, 100%, .08); -} - -[class*="CheckInput\/primaryIsChecked\/"] { - border-color: var(--accent-color) !important; - background-color: var(--accent-color) !important; -} - -/* HEADER */ - -[class*="PageHeader\/header\/"] { - background-color: rgba(0, 0, 0, .35); -} - -/* SEARCH DROPDOWN HEADER */ - -[class*="PageHeader\/donate\/"] { - color: #c4273c !important; -} - -/* SONARR SPECIFIC */ -[class*="SeriesSearchInput\/sectionTitle\/"] { - color: #fff; -} - -[class*="SeriesSearchInput\/containerOpen\/"] [class*="SeriesSearchInput\/seriesContainer\/"] { - border: none !important; - background: var(--modal-bg-color); - color: #fff !important; - box-shadow: 0 0 10px 1px transparent !important; -} - -[class*="SeriesSearchInput\/highlighted\/"] { - background-color: hsla(0, 0%, 100%, .08); -} - -[class*="SeriesSearchInput\/seriesContainer\/"]::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.25) !important; -} - -[class*="Scroller\/scroller\/"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08); -} - -[class*="Scroller\/scroller\/"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25); -} - -/* SIDE MENU */ -[class*="PageSidebar\/sidebarContainer\/"] { - background-color: rgba(0, 0, 0, .25); -} - -[class*="PageSidebar\/sidebar\/"] { - background-color: transparent; -} - -[class*="PageSidebarItem\/link\/"]:hover, -[class*="PageSidebarItem\/link\/"]:focus { - color: var(--text-hover) !important; - background-color: hsla(0, 0%, 100%, .08); - text-decoration: none; -} - -[class*="PageSidebarItem\/isActiveLink\/"] { - color: #FFF !important; - background-color: hsla(0, 0%, 100%, .08) !important; -} - -[class*="PageSidebarItem\/isActiveParentLink\/"] { - background-color: transparent; -} - -@media only screen and (max-width: 768px) { - [class*="PageSidebar\/sidebarContainer\/"] { - background: var(--main-bg-color) !important; - } -} - -[class*="PageSidebarItem\/isActiveItem\/"] { - border-left: 3px solid var(--accent-color); -} - -/* SERIES PAGE */ -/* SONARR SPECIFIC */ -[class*="SeriesIndexPoster\/controls\/"] { - background-color: #000 !important; -} - -/* OVERVIEW PAGE */ - -[class*="SeriesIndexOverviews\/container\/"], -[class*="SeriesIndexOverviews\/container\/"]:hover { - background-color: transparent !important; -} - -[clas*="SeriesIndexOverview\/container\/"]:hover [class*="SeriesIndexOverview\/content\/"] { - background-color: transparent; -} - -[class*="SeriesIndexOverview\/content\/"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; -} - -[class*="SeriesIndexOverview\/link\/"]:hover { - text-decoration: none; -} - -[class*="ProgressBar\/container\/"] { - background-color: rgba(0, 0, 0, 0.25); -} - -[class*=".ProgressBar\/purple\/"] { - background-color: var(--accent-color); -} - -/* SHOW PAGE */ -[class*="SeriesDetailsSeason\/season\/"], -[class*="SeriesDetailsSeason\/collapseButtonContainer\/"] { - border: none !important; - background-color: rgba(0, 0, 0, .25) !important; -} - -[class*="SeriesDetailsSeason\/actionButton\/"], -[class*="SeriesDetailsSeason\/collapseButtonIcon\/"] { - color: var(--text) !important; -} - -[class*="SeriesDetailsSeason\/sizeOnDisk\/"] { - color: var(--text-muted); -} - -.fa-search:hover { - color: var(--text-hover) !important; -} - -[class*="Icon\/default\/"]:hover { - color: var(--text-hover); -} - -[class*="MonitorToggleButton\/toggleButton\/"] { - color: #dadada; -} - -[class*="ProtocolLabel\/torrent\/"] { - border-color: #00853d !important; - background-color: #00853d !important; -} - -[class*="ProtocolLabel\/usenet\/"] { - border-color: #17b1d9 !important; - background-color: #17b1d9 !important; -} - -[class*="SeriesDetailsSeason\/seasonNumber\/"] { - color: #fff; -} - -[class*="SeriesDetailsSeason\/collapseButtonContainer\/"] { - border: none !important; - background-color: rgba(0, 0, 0, .25) !important; -} - -[class*="Popover\/title\/"], -[class*="SeasonInfo\/title\/"], -[class*="Popover\/body\/"], -[class*="Tooltip\/bod\/"] { - background: var(--modal-bg-color) !important; -} - -[class*="Tooltip\/tooltipContainer\/"] { - color: #fff; -} - -[class*="Tooltip\/tooltip\/"][class*=Tooltip\/inverse\/] { - background: var(--modal-bg-color); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -} - -[class*="Tooltip\/bottom\/"][class*="Tooltip\/inverse\/"] { - border-bottom-color: #fff; -} - -[class*="Tooltip\/bottom\/"][class*="Tooltip\/default\/"] { - border-bottom-color: #fff !important; -} - -[class*="Tooltip\/right\/"][class*="Tooltip\/default\/"] { - border-right-color: #fff !important; -} - -[class*="EpisodeTitleLink\/link\/"]:hover { - color: var(--link-color-hover); -} - -[class*="IconButton\/button\/"] { - color: var(--text); -} - -[class*="IconButton\/button\/"]:hover { - background-color: transparent; - color: var(--text-hover) !important; -} - -[class*="Label\/default\/"] { - border-color: var(--accent-color); - background-color: var(--accent-color); - color: #fff; -} - -[class*="Label\/info\/"] { - border-color: var(--accent-color); - background-color: var(--accent-color); - color: #fff; -} - -[class*="PageSidebarItem\/status\/"][class*="Label\/info\/"] { - border-color: var(--queue-color); - background-color: var(--queue-color); - color: #fff; -} - -/* Table options*/ -[class*="TableOptionsColumn\/column\/"] { - background: rgba(0, 0, 0, .25); - color: #FFF; - border: none; -} - -[class*="TableHeaderCell\/headerCell\/"] { - color: #fff; -} - -[class*="Table\/table\/"] { - color: var(--text); -} - -[class*="TableRow\/row\/"]:hover { - background-color: hsla(0, 0%, 100%, .08); - color: var(--text-hover); -} - -/* TOP MENU SERIES */ -[class*="PageToolbar\/toolbar\/"] { - background-color: rgba(0, 0, 0, .25); - color: var(--text); -} - -[class*="PageToolbarButton\/toolbarButton\/"][class*="PageToolbarButton\/isDisabled\/"] { - opacity: .5; - color: var(--text); -} - -[class*="PageToolbarButton\/toolbarButton\/"][class*="PageToolbarButton\/isDisabled\/"]:hover, -[class*="PageToolbarButton\/isDisabled\/"]:hover { - color: var(--text) !important; -} - -[class*="PageToolbarButton\/label\/"] { - color: var(--text); -} - -[class*="PageToolbarButton\/toolbarButton\/"]:hover { - color: var(--text-hover); -} - -[class*="MenuButton\/menuButton\/"]:hover { - color: var(--text-hover); -} - -/* POSTERS */ -[class*="SeriesIndexPoster\/title\/"], -[class*="SeriesIndexPoster\/nextAiring\/"], -[class*="SeriesIndexPosterInfo\/info\/"] { - background-color: rgba(255, 255, 255, 0.08); - color: var(--text); -} - -/* SERIES TOP HEADER DROPDOWN */ -[class*="MenuItem\/menuItem\/"], -[class*="MenuContent\/menuContent\/"] { - background: var(--modal-bg-color); - color: var(--text); -} - -[class*="MenuContent\/scroller\/"] { - box-shadow: black 0 0 5px 0px; -} - -[class*="MenuItem\/menuItem\/"]:hover, -[class*="MenuItem\/menuItem\/"]:focus { - background: hsla(0, 0%, 100%, .08) !important; - color: var(--text-hover); - text-decoration: none; -} - -[class*="MenuItemSeparator\/separator\/"] { - background-color: hsla(0, 0%, 100%, .08) !important; -} - -/* ALPHABET JUMP BAR */ -[class*="PageJumpBar\/jumpBar\/"] { - color: #FFF; -} - -/* MINI RIGHT SCROLL BAR */ -[class*="OverlayScroller\/thumb\/"], -[class*="ImportSeriesSelectSeries\/results\/"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08) !important; -} - -[class*="OverlayScroller\/thumb\/"]:hover, -[class*="ImportSeriesSelectSeries\/results\/"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25) !important; -} - -/* ADD NEW */ -[class*="EnhancedSelectInput\/options\/"] { - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 4px; - background: var(--modal-bg-color); - color: var(--text); -} -[class*="EnhancedSelectInputOption\/isSelected\/"], -[class*="EnhancedSelectInputOption\/isSelected\/"]:hover { - background-color: rgba(255, 255, 255, 0.20) !important; -} - -[class*="EnhancedSelectInputOption\/option\/"]:hover { - background-color: rgba(255, 255, 255, 0.08); -} - -[class*="HintedSelectInputOption\/hintText\/"], -[class*="RootFolderSelectInputOption\/freeSpace\/"] { - color: var(--text); -} - -/* SEARCH BAR */ -[class*="Input\/input\/"], -[class*="AddNewSeries\/searchIconContainer\/"], -[class*="CheckInput\/isIndeterminate\/"] { - border: none; - background-color: rgba(255, 255, 255, 0.08); - color: #FFF -} - -[class*="SeriesSearchInput\/container\/"] [class*="Input\/input\/"] { - background: transparent; - border-bottom: solid 1px #fff; -} - -[class*="SeriesSearchInput\/container\/"] [class*="Input\/input\/"]:focus { - border-bottom: none; - background: transparent; -} - -[class*="SeriesSearchResult\/alternateTitle\/"] { - color: #ffffff; - font-size: 12px; -} - -[class*="Input\/input\/"]:focus { - outline: 0; - border-color: #fff; - box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); -} - -[class*="TagInput\/input\/"][class*="TagInput\/isFocused\/"] { - outline: 0; - border-color: #fff; - box-shadow: none; -} - -/* MOVE THIS */ -::placeholder { - color: var(--text); -} - -:-ms-input-placeholder { - color: var(--text) -} - -::-webkit-input-placeholder { - color: var(--text); -} - -/* TEXT COLOR */ -[class*="PageContentBody\/innerContentBody\/"] { - color: var(--text); -} - -/* SEARCH RESULTS */ -[class*="AddNewSeriesSearchResult\/underlay\/"] { - background-color: transparent !important; -} - -[class*="AddNewSeriesSearchResult\/underlay\/"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; -} - -[class*="AddNewSeriesSearchResult\/year\/"] { - color: #fff; -} - -[class*="RootFolderSelectInputSelectedValue\/seriesFolder\/"], -[class*="RootFolderSelectInputSelectedValue\/freeSpace\/"] { - color: #fff; -} - -/* IMPORT */ - -[class*="FieldSet\/legend\/"] { - color: #FFF; - border-bottom: 1px solid var(--accent-color); -} - -[class*="VirtualTableRow\/row\/"]:hover { - background-color: hsla(0, 0%, 100%, .08); -} - -/* Drop down menu/button*/ -[class*="ImportSeriesSelectSeries\/button\/"] { - border: none !important; - background-color: rgba(0, 0, 0, .25) !important; -} - -[class*="ImportSeriesSearchResult\/series\/"]:hover { - background-color: rgba(255, 255, 255, 0.08); -} - -[class*="ImportSeriesSelectSeries\/content\/"], -[class*="ImportSeriesSelectSeries\/searchIconContainer\/"] { - border: none; - background-color: var(--modal-bg-color); - color: white; -} - -[class*="ImportSeriesTitle\/year\/"] { - color: var(--text-muted); -} - -/* MASS EDITOR */ -/* FOOTER */ -[class*="PageContentFooter\/contentFooter\/"] { - border: none; - background-color: rgba(0, 0, 0, .25); - color: #FFF; -} - -/* SEASON PASS */ - -[class*="SeasonPassSeason\/season\/"] { - border: none; - background-color: rgba(0, 0, 0, .25) !important; -} - -[class*="SeasonPassSeason\/allEpisodes\/"] { - background-color: #5cb85c; -} - -/* CALENDAR */ -[class*="CalendarEvent\/downloaded\/"] { - background: rgb(var(--calendar-tv-available) / .7) !important; - border-left-color: transparent !important; - color: #fff; -} - -[class*="Calendar\/calendar\/"] [class*="CalendarEvent\/downloaded\/"]:hover { - background: rgb(var(--calendar-tv-available) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent\/missing\/"] { - background: rgb(var(--calendar-tv-missing) / .7) !important; - border-left-color: transparent !important; - color: #fff; -} - -[class*="Calendar\/calendar\/"] [class*="CalendarEvent\/missing\/"]:hover { - background: rgb(var(--calendar-tv-missing) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent\/unaired\/"] { - background: rgb(var(--calendar-tv-unaired) / .7) !important; - border-left-color: transparent !important; - color: #fff; -} - -[class*="Calendar\/calendar\/"] [class*="CalendarEvent\/unaired\/"]:hover { - background: rgb(var(--calendar-tv-unaired) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent\/unmonitored\/"] { - background: rgb(var(--calendar-tv-unmonitored) / .7) !important; - border-left-color: transparent !important; - color: #fff; -} - -[class*="Calendar\/calendar\/"] [class*="CalendarEvent\/unmonitored\/"]:hover { - background: rgb(var(--calendar-tv-unmonitored) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent\/onAir\/"] { - background: rgb(var(--calendar-tv-on-air) / .7) !important; - border-left-color: transparent !important; - color: #fff; -} - -[class*="Calendar\/calendar\/"] [class*="CalendarEvent\/onAir\/"]:hover { - background: rgb(var(--calendar-tv-on-air) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent\/downloading\/"] { - background: rgb(var(--calendar-tv-downloading) / .7) !important; - border-left-color: transparent !important; - color: #fff; -} - -[class*="Calendar\/calendar\/"] [class*="CalendarEvent\/downloading\/"]:hover { - background: rgb(var(--calendar-tv-downloading) / .5) !important; - border-left-color: transparent !important; -} - -[class*="DayOfWeek\/dayOfWeek\/"] { - background-color: hsla(0, 0%, 100%, .08); - color: #fff; -} - -[class*="CalendarDay\/dayOfMonth\/"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background-color: rgba(0, 0, 0, .25); -} - -[class*="CalendarDay\/isToday\/"] { - background-color: hsla(0, 0%, 100%, .08) !important; -} - -[class*="CalendarDay\/day\/"], -[class*="CalendarDays\/days\/"] { - -webkit-box-flex: 1; - -webkit-flex: 1 0 14.28%; - flex: 1 0 14.28%; - overflow: hidden; - min-height: 70px; - border-bottom: 1px solid hsla(0, 0%, 100%, .08); - border-left: 1px solid hsla(0, 0%, 100%, .08); - border-right: 1px solid hsla(0, 0%, 100%, .08); -} - -[class*="CalendarEvent\/seriesTitle\/"], -[class*="CalendarEvent\/episodeInfo\/"], -[class*="CalendarEvent\/airTime\/"], -[class*="Legend\/legend\/"] [class*="LegendItem\/legendItem\/"] { - color: #ffffff !important; -} - -[class*="CalendarEvent\/event\/"] { - border-bottom: 1px solid transparent; -} - -[class*="CalendarEventGroup\/eventGroup\/"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08) !important; -} - -[class*="CalendarEventGroup\/seriesTitle\/"] { - color: #ffffff !important; -} - -[class*="CalendarEventGroup\/airTime\/"] { - color: var(--text); -} - -[class*="CalendarEventGroup\/episodeInfo\/"] { - color: var(--text); -} - -/* calendar agenda */ -[class*="AgendaEvent\/event\/"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; -} - -/*QUEUE PAGE */ -/* Manual Import*/ -[class*="SelectEpisodeModalContent\/path\/"] { - color: var(--text); -} - -/* SETTINGS */ -[class*="PageContentBody\/innerContentBody"] [class*="Link\/to"] { - color: #fff; -} - -[class*="Settings\/summary"] { - color: var(--text); -} - -[class*="FormLabel\/large\/"] { - color: #fff -} - -[class*="FormLabel\/isAdvanced\/"] { - color: #ff902b; -} - -/* MEDIA MANAGEMENT - FILE NAME TOKENS */ -[class*="NamingOption\/option\/"] { - border: 1px solid transparent; -} - -[class*="NamingOption\/token\/"] { - background-color: rgba(255, 255, 255, 0.15); -} - -[class*="NamingOption\/example\/"] { - background-color: rgba(255, 255, 255, 0.25); -} - -[class*="NamingOption\/option\/"]:hover [class*="NamingOption\/token\/"] { - background-color: rgba(255, 255, 2550, 0.25); -} - -[class*="NamingOption\/option\/"]:hover [class*="NamingOption\/example\/"] { - background-color: rgba(255, 255, 2550, 0.35); -} - -/* PROFILES */ -[class*="Card\/card\/"], -[class*="QualityProfiles\/addQualityProfile\/"] { - background-color: rgba(0, 0, 0, .45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - -[class*="Card\/card\/"] { - color: var(--text-hover); -} - -[class*="QualityProfiles\/center\/"], -[class*="LanguageProfiles\/center\/"], -[class*="ReleaseProfiles\/center\/"] { - background-color: transparent; - border: none; - color: var(--text); -} - -[class*="QualityProfileItem\/qualityProfileItem\/"], -[class*="QualityProfileItemGroup\/qualityProfileItemGroup\/"], -[class*="LanguageProfileItem\/languageProfileItem\/"] { - border: none; - background-color: rgba(0, 0, 0, .25); - color: #FFF; -} - -[class*="QualityProfileItemGroup\/qualityProfileItemGroup\/"][class*="QualityProfileItemGroup\/editGroups\/"] { - background: rgba(0, 0, 0, 0.25); -} - -[class*="KeyValueListInputItem\/keyInput\/"], -[class*="KeyValueListInputItem\/valueInput\/"] { - border: none; - background: transparent; - color: white; -} - -[class*="QualityDefinitions\/sizeLimitHelpText\/"] { - color: var(--text); -} -/* PROFILES */ -[class*="Indexers\/center\/"] { - background-color: transparent; - border: none; - color: var(--text); -} - -/* INDEXERS */ - -/* DOWNLOAD CLIENTS */ -[class*="DownloadClients\/center\/"] { - background-color: transparent; - border: none; - color: var(--text); -} - -/*INPORT LISTS */ -[class*="ImportLists\/center\/"] { - background-color: transparent; - border: none; - color: var(--text); -} - -/* CONNECTIONS */ -[class*="Notifications\/center\/"] { - background-color: transparent; - border: none; - color: var(--text); -} - -/* LOG */ -[class*="Alert\/info\/"] { - border-color: transparent; - background-color: rgba(0, 0, 0, 0.25); - color: #FFC107; -} - -/* Login Page */ - -.panel-body { - background-color: rgba(0, 0, 0, 0.25); - color: var(--text); -} - -.panel-header { - background-color: rgba(0, 0, 0, 0.45); -} - -.forgot-password { - color: var(--text) !important; -} - -input[type=email], -input[type=password] { - border: none; - background-color: rgba(255, 255, 255, 0.08); - color: #FFF; -} - -.button { - border-color: var(--button-color); - background-color: var(--button-color); - cursor: pointer; -} -.button:hover { - border-color: var(--button-color-hover); - background-color: var(--button-color-hover); - color: #fff; - text-decoration: none; -} -.form-input:focus { - outline: 0; - border-color: #fff; - box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); -} - -/* Custom filter */ -[class*="FilterBuilderRow\/filterRow\/"]:hover { - background-color: transparent; -} - -[class*="CustomFilter\/customFilter\/"]:hover { - background-color: hsla(0, 0%, 100%, .08); -} - -/* Scene information */ -[class*="ReleaseSceneIndicator\/levelNone\/"] { - border-color: var(--text); - color: var(--text); - opacity: 1; -} - -[class*="ReleaseSceneIndicator\/levelMapped\/"] { - border-color: var(--text); - color: var(--text); -} - -/* Scrollbar test fix - -[class*="PageContentBody\/contentBody\/"], -[class*="PageSidebar\/sidebar\/"] { - margin-right: -70px !important; - margin-bottom: -70px !important; -} - - -/* Nightly */ -/* Froms */ - [class*="FormInputHelpText-helpText-"] { color: var(--text); } @@ -1208,6 +287,10 @@ a:hover { background-color: rgba(0, 0, 0, .25) !important; } +[class*="SeriesDetailsSeason-episodes-"] { + border-top: 1px solid rgb(255 255 255 / 50%); +} + [class*="SeriesDetailsSeason-actionButton-"], [class*="SeriesDetailsSeason-collapseButtonIcon-"] { color: var(--text) !important; @@ -1217,11 +300,15 @@ a:hover { color: var(--text-muted); } +[class*="SeriesDetails-contentContainer-"] { + color: var(--text); +} + .fa-search:hover { color: var(--text-hover) !important; } -[class*="Icon-default-"]:hover { +[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { color: var(--text-hover); } @@ -1286,24 +373,31 @@ a:hover { [class*="IconButton-button-"]:hover { background-color: transparent; - color: var(--text-hover); + color: var(--text-hover) !important; } [class*="Label-default-"] { border-color: var(--accent-color); background-color: var(--accent-color); + color: var(--label-text-color); } [class*="Label-info-"] { border-color: var(--accent-color); background-color: var(--accent-color); - color: #fff; + color: var(--label-text-color); } [class*="PageSidebarItem-status-"][class*="Label-info-"] { border-color: var(--queue-color); background-color: var(--queue-color); - color: #fff; + color: var(--label-text-color); +} + +[class*="Label-success-"] { + border-color: #27c24c; + background-color: #27c24c; + color: var(--label-text-color); } /* Table options*/ @@ -1326,6 +420,10 @@ a:hover { color: var(--text-hover); } +[class*="TableRowCell-cell-"] { + border-top: 1px solid rgb(255 255 255 / 25%); +} + /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { background-color: rgba(0, 0, 0, .25); @@ -1427,7 +525,7 @@ a:hover { [class*="CheckInput-isIndeterminate-"] { border: none; background-color: rgba(255, 255, 255, 0.08); - color: #FFF + color: var(--label-text-color); } [class*="SeriesSearchInput-container-"] [class*="Input-input-"] { @@ -1809,6 +907,31 @@ a:hover { color: var(--text) !important; } +input[type=email], +input[type=password] { + border: none; + background-color: rgba(255, 255, 255, 0.08); + color: #FFF; +} + +.button { + border-color: var(--button-color); + background-color: var(--button-color); + cursor: pointer; +} +.button:hover { + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); + color: #fff; + text-decoration: none; +} +.form-input:focus { + outline: 0; + border-color: #fff; + box-shadow: none; + background-color: rgba(255, 255, 255, 0.25); +} + /* Custom filter */ [class*="FilterBuilderRow-filterRow-"]:hover { background-color: transparent; diff --git a/CSS/themes/sonarr/space-gray.css b/CSS/themes/sonarr/space-gray.css index 67488194..b10bfb00 100644 --- a/CSS/themes/sonarr/space-gray.css +++ b/CSS/themes/sonarr/space-gray.css @@ -34,6 +34,7 @@ --queue-color: #81a6b7; --link-color: #81a6b7; --link-color-hover: #fff; + --label-text-color: #fff; --text:#eee; --text-hover: #fff; diff --git a/CSS/themes/vuetorrent/vuetorrent-base.css b/CSS/themes/vuetorrent/vuetorrent-base.css index 4a4c3971..c2e0f61e 100644 --- a/CSS/themes/vuetorrent/vuetorrent-base.css +++ b/CSS/themes/vuetorrent/vuetorrent-base.css @@ -107,14 +107,20 @@ p, /* TOP NAVBAR */ .theme--light.v-app-bar.v-toolbar.v-sheet, .theme--dark.v-app-bar.v-toolbar.v-sheet { - background-color: rgba(0, 0, 0, .25) !important; color: var(--text) !important; } +.v-app-bar.v-app-bar--hide-shadow { + background-color: rgba(0, 0, 0, .25) !important; +} + +.v-app-bar.v-app-bar--is-scrolled{ + background: var(--main-bg-color) !important; +} + .v-navigation-drawer__content .theme--dark.v-card, .v-navigation-drawer__content .theme--light.v-card { background: rgba(0, 0, 0, 0) !important; - } /* SIDE MENU */ @@ -302,7 +308,11 @@ p, .v-menu__content .theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled), .v-menu__content .theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) { color: var(--text) !important; - background: var(--modal-bg-color) !important; +} + +.v-menu__content .theme--dark.theme--dark.v-list, +.v-menu__content .theme--light.theme--light.v-list { +background: var(--modal-bg-color) !important; } .theme--dark.v-icon, @@ -312,7 +322,7 @@ p, .theme--light.v-divider, .theme--dark.v-divider { - border-color: rgba(255, 255, 255, .65) !important; + border-color: rgba(255, 255, 255,.2) !important; } /* TABLE */ diff --git a/CSS/themes/xbackbone/aquamarine.css b/CSS/themes/xbackbone/aquamarine.css new file mode 100644 index 00000000..68004ce9 --- /dev/null +++ b/CSS/themes/xbackbone/aquamarine.css @@ -0,0 +1,33 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* XBACKBONE AQUAMARINE THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 0, 150, 136; + --accent-color-hover: #12afa0; + --queue-color: #009688; + --link-color: #0ed2bf; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; +} \ No newline at end of file diff --git a/CSS/themes/xbackbone/dark.css b/CSS/themes/xbackbone/dark.css new file mode 100644 index 00000000..a8bbf291 --- /dev/null +++ b/CSS/themes/xbackbone/dark.css @@ -0,0 +1,33 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* XBACKBONE DARK THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); +: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); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 100, 100, 100; + --accent-color-hover: #ffffff73; + --queue-color: #6b5; + --link-color: #ddd; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; + } \ No newline at end of file diff --git a/CSS/themes/xbackbone/hotline.css b/CSS/themes/xbackbone/hotline.css new file mode 100644 index 00000000..dd760fe4 --- /dev/null +++ b/CSS/themes/xbackbone/hotline.css @@ -0,0 +1,33 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* XBACKBONE HOTLINE THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); +: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); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 244, 67, 54; + --accent-color-hover: #0b3161; + --queue-color: #6b5; + --link-color: #ddd; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; +} \ No newline at end of file diff --git a/CSS/themes/xbackbone/organizr-dark.css b/CSS/themes/xbackbone/organizr-dark.css new file mode 100644 index 00000000..6631e75b --- /dev/null +++ b/CSS/themes/xbackbone/organizr-dark.css @@ -0,0 +1,33 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* XBACKBONE ORGANIZR-DARK THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 44, 171, 227; + --accent-color-hover: white; + --queue-color: #2cabe3; + --link-color: #2cabe3; + --link-color-hover: #fff; + + --text:#96a2b4; + --text-hover: #fff; + --text-muted: #999; + } \ No newline at end of file diff --git a/CSS/themes/xbackbone/plex.css b/CSS/themes/xbackbone/plex.css new file mode 100644 index 00000000..ce5b8d6e --- /dev/null +++ b/CSS/themes/xbackbone/plex.css @@ -0,0 +1,33 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* XBACKBONE PLEX THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-base.css); +:root { + --main-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/blur-noise.png"), url("https://htpc.deathbybandaid.net/assets/theme.park/Resources/preset-dark2.png") center center/cover no-repeat fixed; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 229, 160, 13; + --accent-color-hover: #ffc107; + --queue-color: #27c24c; + --link-color: #e5a00d; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; + } \ No newline at end of file diff --git a/CSS/themes/xbackbone/space-gray.css b/CSS/themes/xbackbone/space-gray.css new file mode 100644 index 00000000..deece252 --- /dev/null +++ b/CSS/themes/xbackbone/space-gray.css @@ -0,0 +1,33 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +/* XBACKBONE SPACE GRAY THEME */ +@import url(https://htpc.deathbybandaid.net/assets/theme.park/CSS/themes/xbackbone/xbackbone-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; + + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --button-text-hover: #fff; + + --accent-color: 96, 125, 139; + --accent-color-hover: #81a6b7; + --queue-color: #81a6b7; + --link-color: #81a6b7; + --link-color-hover: #fff; + + --text:#eee; + --text-hover: #fff; + --text-muted: #999; +} diff --git a/CSS/themes/xbackbone/xbackbone-base.css b/CSS/themes/xbackbone/xbackbone-base.css new file mode 100644 index 00000000..ff27dc37 --- /dev/null +++ b/CSS/themes/xbackbone/xbackbone-base.css @@ -0,0 +1,312 @@ +/* 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://htpc.deathbybandaid.net/assets/theme.park */ + +.bg-light { + background: var(--main-bg-color) !important; +} + +/* Scrollbar */ +@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; +} + +/* TEXT */ +body, +.table, +.navbar-dark .navbar-nav .nav-link, +.dropdown-menu, +.dropdown-item { + color: var(--text); +} + +.navbar-dark .navbar-nav .nav-link:focus, +.navbar-dark .navbar-nav .nav-link:hover { + color: var(--text-hover); +} + +.card-header { + color: #FFF; +} + +.text-muted { + color: var(--text-muted) !important; +} + +code { + font-size: .875em; + color: #d63384; + word-wrap: break-word; + background: rgb(0 0 0 / 50%); + padding: 2px 6px; + border-radius: 5px; +} + +/* LINKS */ +a { + color: var(--link-color); + text-decoration: underline; +} + +a:hover { + color: var(--link-color-hover); +} + +/* TOP NAV */ +.bg-primary { + background: rgba(0, 0, 0, .15) !important; +} + +/* DROPDOWN MENU */ +.dropdown-menu { + background: var(--modal-bg-color); +} + +.dropdown-item:focus, +.dropdown-item:hover { + color: var(--text-hover); + background-color: rgba(255, 255, 255, .1); +} + +.dropdown-item.disabled, +.dropdown-item:disabled { + color: var(--text-muted); + pointer-events: none; + background-color: transparent; +} + +.dropdown-divider { + border-top: 1px solid rgb(255 255 255 / 15%); +} + +/* TABLES */ +.table-hover>tbody>tr:hover { + color: var(--text-hover); +} + +.table { + border-color: rgb(255 255 255 / 20%); +} + +.table>:not(:last-child)>:last-child>* { + border-bottom-color: rgb(255 255 255 / 50%); +} + +/* BUTTONS */ + +.btn-light { + color: var(--button-text); + background-color: rgba(255, 255, 255, .08); + border-color: rgba(255, 255, 255, .08); +} + +.btn-light:hover { + color: var(--button-text-hover); + background-color: rgba(255, 255, 255, .08); + border-color: rgba(255, 255, 255, .08); +} + +.btn-primary, +.btn-outline-dark, +.btn-outline-secondary { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +.btn-primary:hover, +.btn-outline-dark:hover, +.btn-outline-secondary:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-outline-primary, +.btn-outline-info { + color: var(--button-color); + border-color: var(--button-color); +} + +.btn-outline-primary:hover, +.btn-outline-info:hover, +.btn-check:active+.btn-outline-primary, +.btn-check:checked+.btn-outline-primary, +.btn-outline-primary.active, +.btn-outline-primary.dropdown-toggle.show, +.btn-outline-primary:active, +.btn-check:active+.btn-outline-info, +.btn-check:checked+.btn-outline-info, +.btn-outline-info.active, +.btn-outline-info.dropdown-toggle.show, +.btn-outline-info:active { + color: var(--button-text-hover); + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); +} + +.btn-check:focus+.btn-outline-primary, +.btn-outline-primary:focus, +.btn-check:focus+.btn-outline-info, +.btn-outline-info:focus, +.btn-check:active+.btn-outline-primary:focus, +.btn-check:checked+.btn-outline-primary:focus, +.btn-outline-primary.active:focus, +.btn-outline-primary.dropdown-toggle.show:focus, +.btn-outline-primary:active:focus, +.btn-check:active+.btn-outline-info:focus, +.btn-check:checked+.btn-outline-info:focus, +.btn-outline-info.active:focus, +.btn-outline-info.dropdown-toggle.show:focus, +.btn-outline-info:active:focus { + box-shadow: 0 0 0 0.25rem rgb(var(--accent-color), .5); +} + +/* FORMS */ +.form-control { + color: #fff; + background-color: rgba(0, 0, 0, .15); + border: 1px solid rgba(0, 0, 0, .15); +} + +.form-control:focus { + color: #fff; + background: #1f1f1f; + border-color: rgba(255, 255, 255, .15); + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0); +} + +textarea.form-control:focus { + color: #fff; + background: rgba(0, 0, 0, .35); + border-color: rgba(255, 255, 255, .15); + outline: 0; + box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 0%); +} + +.form-control:disabled, +.form-control[readonly] { + background-color: rgba(255, 255, 255, .15); + opacity: 1; +} + +.form-check-input:checked { + background-color: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); +} + +.form-check-input:focus { + border-color: rgb(var(--accent-color)); + outline: 0; + box-shadow: 0 0 0 0.25rem rgb(var(--accent-color), .25); +} + +.dropzone { + border: 2px dashed rgb(255 255 255 / 30%); +} + +/* PAGINATION */ +.page-link { + color: var(--button-text); + background-color: var(--button-color); + border: 1px solid var(--button-color); +} + +.page-link:hover { + + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border: 1px solid var(--button-color-hover); +} + +.page-link:focus { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + box-shadow: 0 0 0 0.25rem rgb(var(--accent-color) / 25%); +} + +.page-item.disabled .page-link { + color: var(--text-muted); + pointer-events: none; + background-color: rgba(255, 255, 255, .08); + border-color: rgba(255, 255, 255, .08); +} + +/* CARDS */ +.card { + background-color: rgba(0, 0, 0, .25); +} + +.image-card:hover .overlay { + opacity: 1; + transition: opacity .3s ease-in-out; + -moz-transition: opacity .3s ease-in-out; + -webkit-transition: opacity .3s ease-in-out; + background: rgba(0, 0, 0, .5); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); +} + +/* PLACEHOLDER TEXT */ +::placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-moz-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-ms-input-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +::-webkit-input-placeholder { + color: var(--text) !important; + opacity: .5; +} \ No newline at end of file diff --git a/README.md b/README.md index 8ee58965..3acc168d 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [![Discord](https://img.shields.io/discord/591352397830553601.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=Discord&logo=discord)](https://discord.gg/HM5uUKU "Discord for theme installation support") [![GitHub Stars](https://img.shields.io/github/stars/gilbn/theme.park.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&logo=github)](https://htpc.deathbybandaid.net/assets/theme.park) [![Support](https://img.shields.io/static/v1.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=&message=sponsor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABN0lEQVQ4T2NkoBAwIuv/HxDggMT/wLhhwwUQ/39AgAEDA4MATI5xw4YDcDaaAf+R+AcZN2wAG/g/IACkwR7JALjFYAbU5v0k+sYR5BLG/wEBCQwMDAUMDAz6DM3NDAxz5zIwPHhAjFkXGRgYJoAMaGBgYKgH6wgPZ2DYt4+B4fVrYgwAqWlENYBYbQwMDO8+sjH8+cvUSbYB6w9Kv/vwlW0aWYE4Z5MCAwfrf7fYnxN3wwwAxTEorvHGBMjZBy+Ivvv6jSXi20+OU+kMnR/RExIoQEGxIo8eHM/fcDA8fc114/J9/jVJv/prsSYkaJqYwMDAEIBsCMjme894bl6+w7s76e/EXGTDUVwAk0CJWgYGBliAIduM0wVIhoCS8X7kAMMWy1hdAPUKOGCXbJdnhQUYSQYQm6YAtdh8zhSGm1AAAAAASUVORK5CYII=)](https://github.com/sponsors/GilbN "Donate!") -[![GitHub](https://img.shields.io/github/license/gilbn/theme.park.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge)](https://htpc.deathbybandaid.net/assets/theme.park/blob/master/LICENSE) +[![GitHub](https://img.shields.io/github/license/gilbn/theme.park.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge)](https://htpc.deathbybandaid.net/assets/theme.park/LICENSE) [![GitHub Package Repository](https://img.shields.io/static/v1.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=theme-park.dev&message=Packages&logo=github)](https://github.com/users/GilbN/packages/container/package/theme.park) [![Docker Pulls](https://img.shields.io/docker/pulls/gilbn/theme.park.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=pulls&logo=docker)](https://hub.docker.com/r/gilbn/theme.park) [![Blog](https://img.shields.io/static/v1.svg?color=009688&labelColor=555555&logoColor=ffffff&style=for-the-badge&label=technicalramblings&message=Blog)](https://technicalramblings.com/ "A blog with different guides :)")