From 229f71d51b5064ffde6d9d84db0975f45cb3fc3e Mon Sep 17 00:00:00 2001 From: GilbN Date: Tue, 7 Dec 2021 22:46:20 +0100 Subject: [PATCH 1/5] *arr popover/tooltip changes --- css/base/lidarr/lidarr-base.css | 30 ++++++++----- css/base/prowlarr/prowlarr-base.css | 30 ++++++++----- css/base/radarr/radarr-base.css | 30 ++++++++----- css/base/readarr/readarr-base.css | 30 ++++++++----- css/base/sonarr/sonarr-base.css | 65 ++++++++++++++--------------- 5 files changed, 107 insertions(+), 78 deletions(-) diff --git a/css/base/lidarr/lidarr-base.css b/css/base/lidarr/lidarr-base.css index 1b40ad2f..9f40b1f0 100644 --- a/css/base/lidarr/lidarr-base.css +++ b/css/base/lidarr/lidarr-base.css @@ -447,22 +447,30 @@ a:hover { color: #fff; } +[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], [class*="SeasonInfo-title-"], [class*="Popover-body-"], -[class*="Tooltip-body-"] { - background: var(--modal-bg-color) !important; - background-repeat: repeat, no-repeat !important; - background-attachment: fixed, fixed !important; - background-position: center center, center center !important; - background-size: auto, cover !important; - -webkit-background-size: auto, cover !important; - -moz-background-size: auto, cover !important; - -o-background-size: auto, cover !important; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; } -[class*="Tooltip-tooltipContainer-"] { - color: #fff; +@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { + [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], + [class*="Popover-title-"], + [class*="SeasonInfo-title-"], + [class*="Popover-body-"], + [class*="Tooltip-body-"], + [class*="Tooltip-tooltipContainer-"], + [class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + -webkit-backdrop-filter: saturate(1) blur(1.5em); + backdrop-filter: saturate(1) blur(1.5em); + background: rgb(var(--accent-color),0.05); + color: white; + } } [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { diff --git a/css/base/prowlarr/prowlarr-base.css b/css/base/prowlarr/prowlarr-base.css index 2527c5c5..169a2863 100644 --- a/css/base/prowlarr/prowlarr-base.css +++ b/css/base/prowlarr/prowlarr-base.css @@ -385,22 +385,30 @@ a:hover { color: #fff; } +[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], [class*="SeasonInfo-title-"], [class*="Popover-body-"], -[class*="Tooltip-body-"] { - background: var(--modal-bg-color) !important; - background-repeat: repeat, no-repeat !important; - background-attachment: fixed, fixed !important; - background-position: center center, center center !important; - background-size: auto, cover !important; - -webkit-background-size: auto, cover !important; - -moz-background-size: auto, cover !important; - -o-background-size: auto, cover !important; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; } -[class*="Tooltip-tooltipContainer-"] { - color: #fff; +@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { + [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], + [class*="Popover-title-"], + [class*="SeasonInfo-title-"], + [class*="Popover-body-"], + [class*="Tooltip-body-"], + [class*="Tooltip-tooltipContainer-"], + [class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + -webkit-backdrop-filter: saturate(1) blur(1.5em); + backdrop-filter: saturate(1) blur(1.5em); + background: rgb(var(--accent-color),0.05); + color: white; + } } [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { diff --git a/css/base/radarr/radarr-base.css b/css/base/radarr/radarr-base.css index 48452a21..d0e4fb06 100644 --- a/css/base/radarr/radarr-base.css +++ b/css/base/radarr/radarr-base.css @@ -386,22 +386,30 @@ a:hover { background-color: rgba(0, 0, 0, .25); } +[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], [class*="SeasonInfo-title-"], [class*="Popover-body-"], -[class*="Tooltip-body-"] { - background: var(--modal-bg-color) !important; - background-repeat: repeat, no-repeat !important; - background-attachment: fixed, fixed !important; - background-position: center center, center center !important; - background-size: auto, cover !important; - -webkit-background-size: auto, cover !important; - -moz-background-size: auto, cover !important; - -o-background-size: auto, cover !important; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; } -[class*="Tooltip-tooltipContainer-"] { - color: #fff; +@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { + [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], + [class*="Popover-title-"], + [class*="SeasonInfo-title-"], + [class*="Popover-body-"], + [class*="Tooltip-body-"], + [class*="Tooltip-tooltipContainer-"], + [class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + -webkit-backdrop-filter: saturate(1) blur(1.5em); + backdrop-filter: saturate(1) blur(1.5em); + background: rgb(var(--accent-color),0.05); + color: white; + } } [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css index b656fedf..322355b2 100644 --- a/css/base/readarr/readarr-base.css +++ b/css/base/readarr/readarr-base.css @@ -443,22 +443,30 @@ a:hover { color: #fff; } +[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], [class*="SeasonInfo-title-"], [class*="Popover-body-"], -[class*="Tooltip-body-"] { - background: var(--modal-bg-color) !important; - background-repeat: repeat, no-repeat !important; - background-attachment: fixed, fixed !important; - background-position: center center, center center !important; - background-size: auto, cover !important; - -webkit-background-size: auto, cover !important; - -moz-background-size: auto, cover !important; - -o-background-size: auto, cover !important; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; } -[class*="Tooltip-tooltipContainer-"] { - color: #fff; +@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { + [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], + [class*="Popover-title-"], + [class*="SeasonInfo-title-"], + [class*="Popover-body-"], + [class*="Tooltip-body-"], + [class*="Tooltip-tooltipContainer-"], + [class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + -webkit-backdrop-filter: saturate(1) blur(1.5em); + backdrop-filter: saturate(1) blur(1.5em); + background: rgb(var(--accent-color),0.05); + color: white; + } } [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css index 3dbee4b5..b1ac8c90 100644 --- a/css/base/sonarr/sonarr-base.css +++ b/css/base/sonarr/sonarr-base.css @@ -12,13 +12,13 @@ :root { --calendar-tv-unaired-premiere: 53 197 244; - --calendar-tv-downloading: 122 67 182; + --calendar-tv-downloading: 122 67 182; --calendar-tv-unmonitored: 173 173 173; - --calendar-tv-unaired: 93 156 236; + --calendar-tv-unaired: 93 156 236; --calendar-tv-missing: 240 80 80; - --calendar-tv-on-air: 255 165 0; + --calendar-tv-on-air: 255 165 0; --calendar-tv-available: 39 194 76; - } +} body { background: var(--main-bg-color); @@ -44,11 +44,11 @@ body { /* LINKS */ [class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]) { - color: var(--link-color); - } - + color: var(--link-color); +} + [class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover { -color: var(--link-color-hover); + color: var(--link-color-hover); } a { @@ -290,6 +290,7 @@ a:hover { #sidebar-toggle-button { color: var(--text); } + #sidebar-toggle-button:hover, #sidebar-toggle-button:focus, #sidebar-toggle-button:active { @@ -392,46 +393,42 @@ a:hover { background-color: rgba(0, 0, 0, .25) !important; } +[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], [class*="SeasonInfo-title-"], [class*="Popover-body-"], -[class*="Tooltip-bod-"] { - background: var(--modal-bg-color) !important; - background-repeat: repeat, no-repeat !important; - background-attachment: fixed, fixed !important; - background-position: center center, center center !important; - background-size: auto, cover !important; - -webkit-background-size: auto, cover !important; - -moz-background-size: auto, cover !important; - -o-background-size: auto, cover !important; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; } -[class*="Tooltip-tooltipContainer-"] { - color: #fff; -} - -[class*="Tooltip-tooltip-"][class*=Tooltip-inverse-] { - background: var(--modal-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { + [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], + [class*="Popover-title-"], + [class*="SeasonInfo-title-"], + [class*="Popover-body-"], + [class*="Tooltip-body-"], + [class*="Tooltip-tooltipContainer-"], + [class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + -webkit-backdrop-filter: saturate(1) blur(1.5em); + backdrop-filter: saturate(1) blur(1.5em); + background: rgb(var(--accent-color),0.05); + color: white; + } } [class*="Tooltip-bottom-"][class*="Tooltip-inverse-"] { - border-bottom-color: #fff; + border-bottom-color: var(--text); } [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { - border-bottom-color: #fff !important; + border-bottom-color: var(--text) !important; } [class*="Tooltip-right-"][class*="Tooltip-default-"] { - border-right-color: #fff !important; + border-right-color: var(--text) !important; } [class*="EpisodeTitleLink-link-"]:hover { From e239c8c2407d0107bb256e40899ce91d956b5da2 Mon Sep 17 00:00:00 2001 From: GilbN Date: Tue, 7 Dec 2021 22:53:00 +0100 Subject: [PATCH 2/5] *arr Tooltip 2: Just The Tip, Electric Boogaloo --- css/base/lidarr/lidarr-base.css | 4 ++++ css/base/prowlarr/prowlarr-base.css | 4 ++++ css/base/radarr/radarr-base.css | 4 ++++ css/base/readarr/readarr-base.css | 4 ++++ css/base/sonarr/sonarr-base.css | 4 ++++ 5 files changed, 20 insertions(+) diff --git a/css/base/lidarr/lidarr-base.css b/css/base/lidarr/lidarr-base.css index 9f40b1f0..b0692c7d 100644 --- a/css/base/lidarr/lidarr-base.css +++ b/css/base/lidarr/lidarr-base.css @@ -473,6 +473,10 @@ a:hover { } } +[class*="Tooltip-top-"][class*="Tooltip-inverse-"] { + border-top-color: var(--text); +} + [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { border-bottom-color: var(--text); } diff --git a/css/base/prowlarr/prowlarr-base.css b/css/base/prowlarr/prowlarr-base.css index 169a2863..aae3e9cd 100644 --- a/css/base/prowlarr/prowlarr-base.css +++ b/css/base/prowlarr/prowlarr-base.css @@ -411,6 +411,10 @@ a:hover { } } +[class*="Tooltip-top-"][class*="Tooltip-inverse-"] { + border-top-color: var(--text); +} + [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { border-bottom-color: var(--text); } diff --git a/css/base/radarr/radarr-base.css b/css/base/radarr/radarr-base.css index d0e4fb06..006c8851 100644 --- a/css/base/radarr/radarr-base.css +++ b/css/base/radarr/radarr-base.css @@ -412,6 +412,10 @@ a:hover { } } +[class*="Tooltip-top-"][class*="Tooltip-inverse-"] { + border-top-color: var(--text); +} + [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { border-bottom-color: var(--text); } diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css index 322355b2..f47e0613 100644 --- a/css/base/readarr/readarr-base.css +++ b/css/base/readarr/readarr-base.css @@ -469,6 +469,10 @@ a:hover { } } +[class*="Tooltip-top-"][class*="Tooltip-inverse-"] { + border-top-color: var(--text); +} + [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { border-bottom-color: var(--text); } diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css index b1ac8c90..fda44da1 100644 --- a/css/base/sonarr/sonarr-base.css +++ b/css/base/sonarr/sonarr-base.css @@ -419,6 +419,10 @@ a:hover { } } +[class*="Tooltip-top-"][class*="Tooltip-inverse-"] { + border-top-color: var(--text); +} + [class*="Tooltip-bottom-"][class*="Tooltip-inverse-"] { border-bottom-color: var(--text); } From e324c4c6e0be100f466be94d526476cd33226d92 Mon Sep 17 00:00:00 2001 From: GilbN Date: Tue, 7 Dec 2021 23:08:53 +0100 Subject: [PATCH 3/5] *arr cloneButton hover fix --- css/base/lidarr/lidarr-base.css | 5 +++++ css/base/prowlarr/prowlarr-base.css | 5 +++++ css/base/radarr/radarr-base.css | 5 +++++ css/base/readarr/readarr-base.css | 5 +++++ css/base/sonarr/sonarr-base.css | 4 ++++ 5 files changed, 24 insertions(+) diff --git a/css/base/lidarr/lidarr-base.css b/css/base/lidarr/lidarr-base.css index b0692c7d..f33e0877 100644 --- a/css/base/lidarr/lidarr-base.css +++ b/css/base/lidarr/lidarr-base.css @@ -966,6 +966,11 @@ input:focus:-ms-input-placeholder { color: var(--text); } + +[class*="-cloneButton-"][class*="IconButton-button-"]:hover { + color: white; +} + [class*="Card-card-"]:hover { color: var(--text-hover); } diff --git a/css/base/prowlarr/prowlarr-base.css b/css/base/prowlarr/prowlarr-base.css index aae3e9cd..bc113068 100644 --- a/css/base/prowlarr/prowlarr-base.css +++ b/css/base/prowlarr/prowlarr-base.css @@ -980,6 +980,11 @@ input:focus:-ms-input-placeholder { color: var(--text); } + +[class*="-cloneButton-"][class*="IconButton-button-"]:hover { + color: white; +} + [class*="Card-card-"]:hover, [class*="Applications-center-"]:hover { color: var(--text-hover); diff --git a/css/base/radarr/radarr-base.css b/css/base/radarr/radarr-base.css index 006c8851..138adbdc 100644 --- a/css/base/radarr/radarr-base.css +++ b/css/base/radarr/radarr-base.css @@ -996,6 +996,11 @@ input:focus:-ms-input-placeholder { color: var(--text); } + +[class*="-cloneButton-"][class*="IconButton-button-"]:hover { + color: white; +} + [class*="Card-card-"]:hover { color: var(--text-hover); } diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css index f47e0613..b36d8e85 100644 --- a/css/base/readarr/readarr-base.css +++ b/css/base/readarr/readarr-base.css @@ -968,6 +968,11 @@ input:focus:-ms-input-placeholder { color: var(--text); } + +[class*="-cloneButton-"][class*="IconButton-button-"]:hover { + color: white; +} + [class*="Card-card-"]:hover { color: var(--text-hover); } diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css index fda44da1..dc85836c 100644 --- a/css/base/sonarr/sonarr-base.css +++ b/css/base/sonarr/sonarr-base.css @@ -976,6 +976,10 @@ input:focus:-ms-input-placeholder { color: var(--text); } +[class*="-cloneButton-"][class*="IconButton-button-"]:hover { + color: white; +} + [class*="Card-card-"]:hover { color: var(--text-hover); } From 6883c52cb498d6aa60d297db5d24ad04352ba3d9 Mon Sep 17 00:00:00 2001 From: GilbN Date: Tue, 7 Dec 2021 23:16:00 +0100 Subject: [PATCH 4/5] Sonarr SeasonInfo-title- fix --- css/base/sonarr/sonarr-base.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css index dc85836c..f5a16e74 100644 --- a/css/base/sonarr/sonarr-base.css +++ b/css/base/sonarr/sonarr-base.css @@ -407,7 +407,6 @@ a:hover { @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], - [class*="SeasonInfo-title-"], [class*="Popover-body-"], [class*="Tooltip-body-"], [class*="Tooltip-tooltipContainer-"], @@ -417,6 +416,9 @@ a:hover { background: rgb(var(--accent-color),0.05); color: white; } + [class*="SeasonInfo-title-"] { + background: transparent; + } } [class*="Tooltip-top-"][class*="Tooltip-inverse-"] { From 0a1c8759aae7bc17d45f12f8152f198831522dec Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 11 Dec 2021 17:52:32 +0100 Subject: [PATCH 5/5] Readarr calendar color fixes. --- css/base/readarr/readarr-base.css | 53 ++++++++++++++++++++----------- 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css index b36d8e85..b09568d3 100644 --- a/css/base/readarr/readarr-base.css +++ b/css/base/readarr/readarr-base.css @@ -11,12 +11,11 @@ /* https://github.com/gilbN/theme.park */ :root { - --calendar-downloading: 122 67 182; --calendar-downloaded: 39 194 76; - --calendar-unreleased: 93 156 236; - --calendar-partial: 255, 165, 0; + --calendar-downloading: 122 67 182; --calendar-unmonitored: 173 173 173; - --calendar-missing: 240 80 80; + --calendar-missing: 240 80 80; + --calendar-unreleased: 93 156 236; } body { @@ -824,58 +823,59 @@ input:focus:-ms-input-placeholder { } /* CALENDAR */ -[class*="CalendarEvent-downloaded-"] { - background: rgb(var(--calendar-available) / .7) !important; +[class*="CalendarEvent-downloaded-"]:not([class*="AgendaEvent-"]) { + background: rgb(var(--calendar-downloaded) / .7) !important; border-left-color: transparent !important; } -[class*="Calendar-calendar-"] [class*="CalendarEvent-downloaded-"]:hover { - background: rgb(var(--calendar-available) / .5) !important; +[class*="Calendar-calendar-"] [class*="CalendarEvent-downloaded-"]:hover:not([class*="AgendaEvent-"]) { + background: rgb(var(--calendar-downloaded) / .5) !important; border-left-color: transparent !important; } -[class*="CalendarEvent-missing-"] { +[class*="CalendarEvent-missing-"]:not([class*="AgendaEvent-"]) { background: rgb(var(--calendar-missing) / .7) !important; border-left-color: transparent !important; } -[class*="Calendar-calendar-"] [class*="CalendarEvent-missing-"]:hover { +[class*="Calendar-calendar-"] [class*="CalendarEvent-missing-"]:hover:not([class*="AgendaEvent-"]) { background: rgba(var(--calendar-missing) / .5) !important; border-left-color: transparent !important; } -[class*="CalendarEvent-unreleased-"] { - background: rgb(var(--calendar-unaired) / .7) !important; +[class*="CalendarEvent-unreleased-"]:not([class*="AgendaEvent-"]) { + background: rgb(var(--calendar-unreleased) / .7) !important; border-left-color: transparent !important; } -[class*="Calendar-calendar-"] [class*="CalendarEvent-unreleased-"]:hover { - background: rgb(var(--calendar-unaired) / .5) !important; +[class*="Calendar-calendar-"] [class*="CalendarEvent-unreleased-"]:hover:not([class*="AgendaEvent-"]) { + background: rgb(var(--calendar-unreleased) / .5) !important; border-left-color: transparent !important; } -[class*="CalendarEvent-unmonitored-"] { +[class*="CalendarEvent-unmonitored-"]:not([class*="AgendaEvent-"]) { background: rgb(var(--calendar-unmonitored) / .7) !important; border-left-color: transparent !important; } -[class*="Calendar-calendar-"] [class*="CalendarEvent-unmonitored-"]:hover { +[class*="Calendar-calendar-"] [class*="CalendarEvent-unmonitored-"]:hover:not([class*="AgendaEvent-"]) { background: rgb(var(--calendar-unmonitored) / .5) !important; border-left-color: transparent !important; } -[class*="CalendarEvent-downloading-"] { +[class*="CalendarEvent-downloading-"]:not([class*="AgendaEvent-"]) { background: rgb(var(--calendar-downloading) / .7) !important; border-left-color: transparent !important; } -[class*="Calendar-calendar-"] [class*="CalendarEvent-downloading-"]:hover { +[class*="Calendar-calendar-"] [class*="CalendarEvent-downloading-"]:hover:not([class*="AgendaEvent-"]) { background: rgb(var(--calendar-downloading) / .5) !important; border-left-color: transparent !important; } [class*="DayOfWeek-dayOfWeek-"] { background-color: hsla(0, 0%, 100%, .08); + color: #fff; } [class*="CalendarDay-dayOfMonth-"] { @@ -886,6 +886,23 @@ input:focus:-ms-input-placeholder { [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { background-color: hsla(0, 0%, 100%, .25) !important; + color: #fff; +} + +[class*="CalendarEvent-authorName-"] a, +[class*="CalendarEvent-authorName-"], +[class*="CalendarEvent-bookTitle-"] a, +[class*="CalendarEvent-bookTitle-"]{ +color: #eee !important; +} + +[class*="CalendarEvent-authorName-"] a:hover, +[class*="CalendarEvent-bookTitle-"] a:hover{ +color: #fff !important; +} + +[class*="CalendarEvent-event-"] { + border-left: 4px solid var(--text); } [class*="CalendarDay-day-"],