From 229f71d51b5064ffde6d9d84db0975f45cb3fc3e Mon Sep 17 00:00:00 2001 From: GilbN Date: Tue, 7 Dec 2021 22:46:20 +0100 Subject: [PATCH] *arr popover/tooltip changes --- css/base/lidarr/lidarr-base.css | 34 ++++++++------ css/base/prowlarr/prowlarr-base.css | 34 ++++++++------ css/base/radarr/radarr-base.css | 34 ++++++++------ css/base/readarr/readarr-base.css | 34 ++++++++------ css/base/sonarr/sonarr-base.css | 69 ++++++++++++++--------------- 5 files changed, 117 insertions(+), 88 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-tooltipContainer-"] { - color: #fff; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; +} + +@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-tooltipContainer-"] { - color: #fff; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; +} + +@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-tooltipContainer-"] { - color: #fff; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; +} + +@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-tooltipContainer-"] { - color: #fff; +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; +} + +@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-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); +[class*="Tooltip-body-"], +[class*="Tooltip-tooltipContainer-"], +[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { + background: #1f1f1f; + color: #eee; +} + +@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 {