From 6a6ba2d484f443b722b483141049ed93e3cbc7a9 Mon Sep 17 00:00:00 2001 From: GilbN Date: Fri, 22 Apr 2022 16:47:11 +0200 Subject: [PATCH 01/34] fix: :bug: Ombi: button fixes --- css/base/ombi/ombi-base.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css/base/ombi/ombi-base.css b/css/base/ombi/ombi-base.css index 368f78f8..6fd349cf 100644 --- a/css/base/ombi/ombi-base.css +++ b/css/base/ombi/ombi-base.css @@ -478,14 +478,16 @@ small.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) { +.mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex):not(.mat-raised-button.mat-error) { 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); + border: 1px solid var(--button-color); } -.mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex):hover { +.mat-raised-button:not([class*=mat-elevation-z]):not(.mat-raised-button.mat-warn):not(.viewon-btn.plex):not(.mat-raised-button.mat-error):hover { 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-hover) !important; + border: 1px solid var(--button-color-hover) !important; } .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { From 9d52351eb913252fbc348716f74268748f62389c Mon Sep 17 00:00:00 2001 From: GilbN Date: Fri, 22 Apr 2022 16:47:34 +0200 Subject: [PATCH 02/34] fix: :bug: Plex: Accent fixes --- css/base/plex/plex-base.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/css/base/plex/plex-base.css b/css/base/plex/plex-base.css index df02c356..ded6559c 100644 --- a/css/base/plex/plex-base.css +++ b/css/base/plex/plex-base.css @@ -240,6 +240,18 @@ body,[class*="FullPageBackground-backgroundContainer-"] { /* ACCENTS */ +[class*="TabButton-selected-"] { + color: rgb(var(--accent-color)); +} + +[class*="TabButton-selected-"]:after { + background-color: rgb(var(--accent-color)); +} + +[class*="TabButton-selected-"]:hover:after { + background-color: rgb(var(--accent-color),.8); +} + .heart-rating.user-rating, .star-rating.user-rating { color: rgb(var(--accent-color)); opacity: 1; @@ -537,6 +549,7 @@ circle { } /* BUTTONS */ + .btn-primary { border-color: var(--button-color); color: var(--button-text); @@ -551,6 +564,13 @@ circle { background-color: var(--button-color-hover); } +.selectize-control.plugin-remove_button [data-value] .remove { + color: var(--button-text); +} +.selectize-control.plugin-remove_button [data-value] .remove:hover { + color: var(--button-text-hover); +} + [class*="Button-primary"].isDisabled { background: var(--button-color); } From 2186e5029682e29cb93980c28e3e56fbf252402b Mon Sep 17 00:00:00 2001 From: GilbN Date: Fri, 22 Apr 2022 16:50:07 +0200 Subject: [PATCH 03/34] style: :lipstick: plex theme-option: modal color change, add plex poster var --- css/theme-options/plex.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css/theme-options/plex.css b/css/theme-options/plex.css index fa39c140..65782532 100644 --- a/css/theme-options/plex.css +++ b/css/theme-options/plex.css @@ -5,8 +5,8 @@ --main-bg-color: url("/resources/blur-noise.png") repeat scroll 0% 0%, radial-gradient(circle at 0% 100%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%), radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%), rgb(0, 0, 0) center center/cover no-repeat fixed; */ --main-bg-color: radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), black center center/cover no-repeat fixed; - --modal-bg-color: #1f2326; - --modal-header-color: #1f2326; + --modal-bg-color: #282828; + --modal-header-color: #323232; --modal-footer-color: #323232; --drop-down-menu-bg: #191a1c; @@ -28,6 +28,7 @@ /*Specials*/ --arr-queue-color: #27c24c; /* Servarr apps + Bazarr*/ + --plex-poster-unwatched: #e5a00d; --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ --gitea-color-primary-dark-4: 255, 193, 7; --overseerr-gradient: url("/resources/blur-noise.png") repeat scroll 0% 0%, radial-gradient(circle at 0% 100% , rgba(54, 66, 84, 0.55) 0% , rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%) center center/cover no-repeat fixed , radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%) center center/cover no-repeat fixed , rgb(0, 0, 0,.9) center center/cover no-repeat fixed; From f6d8a5c11b4424ae0f6eeb16eaa70d670758b11e Mon Sep 17 00:00:00 2001 From: GilbN Date: Fri, 22 Apr 2022 17:01:28 +0200 Subject: [PATCH 04/34] fix: :bug: Deluge: statusbar color fix --- css/base/deluge/deluge-base.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/base/deluge/deluge-base.css b/css/base/deluge/deluge-base.css index ffdb27a9..f8609779 100644 --- a/css/base/deluge/deluge-base.css +++ b/css/base/deluge/deluge-base.css @@ -778,6 +778,10 @@ color: var(--button-text); } + #deluge-statusbar .x-btn button { + color: var(--text) +} + .x-btn em { font-style: normal; font-weight: normal; From affa3f8984896052227c70a216b1b18f15e49289 Mon Sep 17 00:00:00 2001 From: GilbN Date: Fri, 22 Apr 2022 21:55:52 +0200 Subject: [PATCH 05/34] fix: :lipstick: Set placeholders to use wildcard --- css/defaults/placeholders.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/css/defaults/placeholders.css b/css/defaults/placeholders.css index da06139c..c06c3fdd 100644 --- a/css/defaults/placeholders.css +++ b/css/defaults/placeholders.css @@ -1,34 +1,34 @@ -input::-webkit-input-placeholder { - color: var(--text) !important; +*::-webkit-input-placeholder { + color: var(--text-muted) !important; } -input:focus::-webkit-input-placeholder { +*:focus::-webkit-input-placeholder { color: var(--text-hover) !important; } /* Firefox < 19 */ -input:-moz-placeholder { - color: var(--text) !important; +*:-moz-placeholder { + color: var(--text-muted) !important; } -input:focus:-moz-placeholder { +*:focus:-moz-placeholder { color: var(--text-hover) !important; } /* Firefox > 19 */ -input::-moz-placeholder { - color: var(--text) !important; +*::-moz-placeholder { + color: var(--text-muted) !important; } -input:focus::-moz-placeholder { +*:focus::-moz-placeholder { color: var(--text-hover) !important; } /* Internet Explorer 10 */ -input:-ms-input-placeholder { - color: var(--text) !important; +*:-ms-input-placeholder { + color: var(--text-muted) !important; } -input:focus:-ms-input-placeholder { +*:focus:-ms-input-placeholder { color: var(--text-hover) !important; } \ No newline at end of file From 51c3e69582f8b20366b89665bedb879e7df80f75 Mon Sep 17 00:00:00 2001 From: GilbN Date: Fri, 22 Apr 2022 21:56:42 +0200 Subject: [PATCH 06/34] import placeholder in all bases --- css/base/bazarr/bazarr-base.css | 2 +- css/base/bitwarden/bitwarden-base.css | 38 +----------------- css/base/calibreweb/calibreweb-base.css | 3 ++ css/base/deluge/deluge-base.css | 1 + css/base/dozzle/dozzle-base.css | 2 + css/base/duplicacy/duplicacy-base.css | 22 +---------- css/base/emby/emby-base.css | 2 + css/base/filebrowser/filebrowser-base.css | 36 +---------------- css/base/flood/flood-base.css | 16 +------- css/base/gaps/gaps-base.css | 2 + css/base/gitea/gitea-base.css | 24 +----------- css/base/guacamole/guacamole-base.css | 36 +---------------- css/base/jackett/jackett-base.css | 3 ++ css/base/jellyfin/jellyfin-base.css | 2 + css/base/kitana/kitana-base.css | 24 +----------- css/base/lazylibrarian/lazylibrarian-base.css | 39 ++----------------- css/base/librespeed/librespeed-base.css | 2 + css/base/moviematch/moviematch-base.css | 2 + css/base/netdata/netdata-base.css | 1 + css/base/nzbget/nzbget-base.css | 2 + css/base/nzbhydra2/nzbhydra2-base.css | 2 +- css/base/ombi/ombi-base.css | 1 + css/base/organizr/organizr-base.css | 37 +----------------- css/base/overseerr/overseerr-base.css | 2 + css/base/petio/petio-base.css | 23 +---------- css/base/pihole/pihole-base.css | 2 +- css/base/plex/plex-base.css | 2 + css/base/qbittorrent/qbittorrent-base.css | 1 + css/base/requestrr/requestrr-base.css | 2 +- css/base/resilio-sync/resilio-sync-base.css | 2 +- css/base/rutorrent/rutorrent-base.css | 1 + css/base/sabnzbd/sabnzbd-base.css | 15 +------ css/base/synclounge/synclounge-base.css | 2 +- css/base/tautulli/tautulli-base.css | 3 ++ css/base/transmission/transmission-base.css | 2 + css/base/unraid/unraid-base.css | 14 +------ css/base/vuetorrent/vuetorrent-base.css | 2 + css/base/webtools/webtools-base.css | 23 +---------- css/base/xbackbone/xbackbone-base.css | 23 +---------- 39 files changed, 66 insertions(+), 352 deletions(-) diff --git a/css/base/bazarr/bazarr-base.css b/css/base/bazarr/bazarr-base.css index 3f64e954..06720e1c 100644 --- a/css/base/bazarr/bazarr-base.css +++ b/css/base/bazarr/bazarr-base.css @@ -504,7 +504,7 @@ hr { } .close:hover { - var(--text) !important; + color: var(--text-hover) !important; text-decoration: none; } diff --git a/css/base/bitwarden/bitwarden-base.css b/css/base/bitwarden/bitwarden-base.css index bb2ae99f..427bedc5 100644 --- a/css/base/bitwarden/bitwarden-base.css +++ b/css/base/bitwarden/bitwarden-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + * { outline: none; } @@ -579,42 +581,6 @@ html[class*="theme_"] .table td [class*="fa-"] { color: rgb(var(--accent-color)); } -/* PLACEHOLDER TEXT */ -input::-webkit-input-placeholder { - color: var(--text); -} - -input:focus::-webkit-input-placeholder { - color: #000; -} - -/* Firefox < 19 */ -input:-moz-placeholder { - color: var(--text); -} - -input:focus:-moz-placeholder { - color: #000; -} - -/* Firefox > 19 */ -input::-moz-placeholder { - color: var(--text); -} - -input:focus::-moz-placeholder { - color: #000; -} - -/* Internet Explorer 10 */ -input:-ms-input-placeholder { - color: var(--text); -} - -input:focus:-ms-input-placeholder { - color: #000; -} - /* ADMIN PAGE */ .bg-light { diff --git a/css/base/calibreweb/calibreweb-base.css b/css/base/calibreweb/calibreweb-base.css index 1a2ed7e8..bbcb5746 100644 --- a/css/base/calibreweb/calibreweb-base.css +++ b/css/base/calibreweb/calibreweb-base.css @@ -13,6 +13,9 @@ /* "Re-skin" of CaliBlur https://github.com/leram84/layer.Cake/tree/master/caliBlur */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ /* APP VARS*/ + +@import url("/css/defaults/placeholders.css"); + :root { --color-background: var(--main-bg-color); --color-primary: rgb(var(--accent-color)); diff --git a/css/base/deluge/deluge-base.css b/css/base/deluge/deluge-base.css index f8609779..53538ad7 100644 --- a/css/base/deluge/deluge-base.css +++ b/css/base/deluge/deluge-base.css @@ -13,6 +13,7 @@ /* Based on https://github.com/HalianElf/Deluge-Dark/blob/master/deluge.css */ @import url('https://fonts.googleapis.com/css?family=Roboto'); + @import url("/css/defaults/placeholders.css"); html { background: var(--main-bg-color); diff --git a/css/base/dozzle/dozzle-base.css b/css/base/dozzle/dozzle-base.css index c109aa34..1ec59533 100644 --- a/css/base/dozzle/dozzle-base.css +++ b/css/base/dozzle/dozzle-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + :root { --scheme-main-ter: var(--main-bg-color); --text-strong-color: var(--button-text-hover); diff --git a/css/base/duplicacy/duplicacy-base.css b/css/base/duplicacy/duplicacy-base.css index 379e1563..b16b369a 100644 --- a/css/base/duplicacy/duplicacy-base.css +++ b/css/base/duplicacy/duplicacy-base.css @@ -10,6 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); body { background: var(--main-bg-color); @@ -146,27 +147,6 @@ label { color: var(--accent-color-hover); } -/* 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; -} - /* CARDS */ .card { background: transparent; diff --git a/css/base/emby/emby-base.css b/css/base/emby/emby-base.css index b4ea5322..37e4c163 100644 --- a/css/base/emby/emby-base.css +++ b/css/base/emby/emby-base.css @@ -1,3 +1,5 @@ +@import url("/css/defaults/placeholders.css"); + :root { --theme-primary-color: var(--accent-color); --theme-text-color: var(--text); diff --git a/css/base/filebrowser/filebrowser-base.css b/css/base/filebrowser/filebrowser-base.css index 2a15beff..67f64a40 100644 --- a/css/base/filebrowser/filebrowser-base.css +++ b/css/base/filebrowser/filebrowser-base.css @@ -10,41 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ -/* PLACEHOLDERS */ -input::-webkit-input-placeholder { - color: var(--text); -} - -input:focus::-webkit-input-placeholder { - color: var(--text-hover); -} - -/* Firefox < 19 */ -input:-moz-placeholder { - color: var(--text); -} - -input:focus:-moz-placeholder { - color: var(--text-hover); -} - -/* Firefox > 19 */ -input::-moz-placeholder { - color: var(--text); -} - -input:focus::-moz-placeholder { - color: var(--text-hover); -} - -/* Internet Explorer 10 */ -input:-ms-input-placeholder { - color: var(--text); -} - -input:focus:-ms-input-placeholder { - color: var(--text-hover); -} +@import url("/css/defaults/placeholders.css"); .message { color: var(--text-hover); diff --git a/css/base/flood/flood-base.css b/css/base/flood/flood-base.css index 9f8d81f9..c6452e1f 100644 --- a/css/base/flood/flood-base.css +++ b/css/base/flood/flood-base.css @@ -12,6 +12,8 @@ /* MOBILE */ +@import url("/css/defaults/placeholders.css"); + @media (max-width: 720px) { .modal__body, @@ -287,20 +289,6 @@ p, border-color: var(--button-color-hover); } - - -::placeholder { - color: var(--text) !important; -} - -:-ms-input-placeholder { - color: var(--text) !important; -} - -::-webkit-input-placeholder { - color: var(--text) !important; -} - .error { background: #f34570; border-radius: 3px; diff --git a/css/base/gaps/gaps-base.css b/css/base/gaps/gaps-base.css index 54ce6d34..6fc97d17 100644 --- a/css/base/gaps/gaps-base.css +++ b/css/base/gaps/gaps-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + body { background: var(--main-bg-color); background-repeat: repeat, no-repeat; diff --git a/css/base/gitea/gitea-base.css b/css/base/gitea/gitea-base.css index 304c0176..94837f8b 100644 --- a/css/base/gitea/gitea-base.css +++ b/css/base/gitea/gitea-base.css @@ -12,6 +12,8 @@ @import url("/css/base/gitea/chroma.css"); @import url("/css/base/gitea/monaco_vs_dark.css"); +@import url("/css/defaults/placeholders.css"); + :root { --color-text: var(--text); --color-caret: white; @@ -1553,28 +1555,6 @@ textarea:hover { background-color: rgb(0 0 0 / 0.25); } - -/* PLACEHOLDER TEXT */ -::placeholder { - color: var(--text) !important; - opacity: .5; -} - -:-moz-placeholder { - color: var(--text) !important; - opacity: .5; -} - -:-ms-input-placeholder { - color: var(--text) !important; - opacity: .5; -} - -::-webkit-input-placeholder { - color: var(--text) !important; - opacity: .5; -} - /* HIGHLIGHTING */ ::-webkit-selection { background-color: rgb(var(--accent-color)) !important; diff --git a/css/base/guacamole/guacamole-base.css b/css/base/guacamole/guacamole-base.css index e06e0d2d..1c13fbe0 100644 --- a/css/base/guacamole/guacamole-base.css +++ b/css/base/guacamole/guacamole-base.css @@ -10,6 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); * { outline: none !important; @@ -47,41 +48,6 @@ div.displayMiddle { -o-background-size: auto, cover; } -input::-webkit-input-placeholder { - color: var(--text) !important; -} - -input:focus::-webkit-input-placeholder { - color: var(--text-hover) !important; -} - -/* Firefox < 19 */ -input:-moz-placeholder { - color: var(--text) !important; -} - -input:focus:-moz-placeholder { - color: var(--text-hover) !important; -} - -/* Firefox > 19 */ -input::-moz-placeholder { - color: var(--text) !important; -} - -input:focus::-moz-placeholder { - color: var(--text-hover) !important; -} - -/* Internet Explorer 10 */ -input:-ms-input-placeholder { - color: var(--text) !important; -} - -input:focus:-ms-input-placeholder { - color: var(--text-hover) !important; -} - /* Scrollbar */ @media only screen and (min-width: 768px) { html { diff --git a/css/base/jackett/jackett-base.css b/css/base/jackett/jackett-base.css index ff885471..2dde7f32 100644 --- a/css/base/jackett/jackett-base.css +++ b/css/base/jackett/jackett-base.css @@ -9,6 +9,9 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ + +@import url("/css/defaults/placeholders.css"); + * { outline: none !important; } diff --git a/css/base/jellyfin/jellyfin-base.css b/css/base/jellyfin/jellyfin-base.css index 5bef3117..8dc1bcd2 100644 --- a/css/base/jellyfin/jellyfin-base.css +++ b/css/base/jellyfin/jellyfin-base.css @@ -1,3 +1,5 @@ +@import url("/css/defaults/placeholders.css"); + :root { --theme-primary-color: var(--accent-color); --theme-text-color: var(--text); diff --git a/css/base/kitana/kitana-base.css b/css/base/kitana/kitana-base.css index 4043bada..9bcade69 100644 --- a/css/base/kitana/kitana-base.css +++ b/css/base/kitana/kitana-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + body { background: var(--main-bg-color); background-repeat: repeat, no-repeat; @@ -228,26 +230,4 @@ ul li:hover { color: var(--text-hover); background-color: #97b3d2; border-color: #97b3d2 -} - - -/* 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/css/base/lazylibrarian/lazylibrarian-base.css b/css/base/lazylibrarian/lazylibrarian-base.css index addaa5fd..54ca6b27 100644 --- a/css/base/lazylibrarian/lazylibrarian-base.css +++ b/css/base/lazylibrarian/lazylibrarian-base.css @@ -9,6 +9,9 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ + +@import url("/css/defaults/placeholders.css"); + * { outline: none !important; } @@ -55,42 +58,6 @@ a:hover, color: var(--link-color-hover); } -input::-webkit-input-placeholder { - color: var(--text-muted) !important; -} - -input:focus::-webkit-input-placeholder { - color: var(--text-hover) !important; -} - -/* Placeholders */ -/* Firefox < 19 */ -input:-moz-placeholder { - color: var(--text-muted) !important; -} - -input:focus:-moz-placeholder { - color: var(--text-hover) !important; -} - -/* Firefox > 19 */ -input::-moz-placeholder { - color: var(--text-muted) !important; -} - -input:focus::-moz-placeholder { - color: var(--text-hover) !important; -} - -/* Internet Explorer 10 */ -input:-ms-input-placeholder { - color: var(--text-muted) !important; -} - -input:focus:-ms-input-placeholder { - color: var(--text-hover) !important; -} - /* SCROLLBAR */ @media only screen and (min-width: 768px) { html { diff --git a/css/base/librespeed/librespeed-base.css b/css/base/librespeed/librespeed-base.css index e5dbc293..2401ba74 100644 --- a/css/base/librespeed/librespeed-base.css +++ b/css/base/librespeed/librespeed-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + html, body { background: var(--main-bg-color) !important; diff --git a/css/base/moviematch/moviematch-base.css b/css/base/moviematch/moviematch-base.css index ce16cf06..5beaf4f1 100644 --- a/css/base/moviematch/moviematch-base.css +++ b/css/base/moviematch/moviematch-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + * { outline: none; diff --git a/css/base/netdata/netdata-base.css b/css/base/netdata/netdata-base.css index 52912d82..ff8714a2 100644 --- a/css/base/netdata/netdata-base.css +++ b/css/base/netdata/netdata-base.css @@ -10,6 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); body, [class*="styled__SocialMediaContainer-"] { diff --git a/css/base/nzbget/nzbget-base.css b/css/base/nzbget/nzbget-base.css index 93c212c6..ae02ea89 100644 --- a/css/base/nzbget/nzbget-base.css +++ b/css/base/nzbget/nzbget-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + body { background: var(--main-bg-color); background-repeat: repeat, no-repeat; diff --git a/css/base/nzbhydra2/nzbhydra2-base.css b/css/base/nzbhydra2/nzbhydra2-base.css index 82b4959a..5ba98cb9 100644 --- a/css/base/nzbhydra2/nzbhydra2-base.css +++ b/css/base/nzbhydra2/nzbhydra2-base.css @@ -10,7 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ -@import url(/css/defaults/placeholders.css); +@import url("/css/defaults/placeholders.css"); body, html { diff --git a/css/base/ombi/ombi-base.css b/css/base/ombi/ombi-base.css index 6fd349cf..fb0a7c7d 100644 --- a/css/base/ombi/ombi-base.css +++ b/css/base/ombi/ombi-base.css @@ -10,6 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); * { outline: none !important; diff --git a/css/base/organizr/organizr-base.css b/css/base/organizr/organizr-base.css index 052b2028..9458395a 100644 --- a/css/base/organizr/organizr-base.css +++ b/css/base/organizr/organizr-base.css @@ -1,4 +1,5 @@ @import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900); +@import url("/css/defaults/placeholders.css"); /*Theme Colors*/ /*bootstrap Color*/ /*Normal Color*/ @@ -400,42 +401,6 @@ pre { box-shadow: inset 0 0 3px rgba(0, 0, 0, 0); } -/* PLACEHOLDERS */ -input::-webkit-input-placeholder { - color: var(--text) !important; -} - -input:focus::-webkit-input-placeholder { - color: var(--text-hover) !important; -} - -/* Firefox < 19 */ -input:-moz-placeholder { - color: var(--text) !important; -} - -input:focus:-moz-placeholder { - color: var(--text-hover) !important; -} - -/* Firefox > 19 */ -input::-moz-placeholder { - color: var(--text) !important; -} - -input:focus::-moz-placeholder { - color: var(--text-hover) !important; -} - -/* Internet Explorer 10 */ -input:-ms-input-placeholder { - color: var(--text) !important; -} - -input:focus:-ms-input-placeholder { - color: var(--text-hover) !important; -} - /* Scrollbar */ @media only screen and (min-width: 768px) { html { diff --git a/css/base/overseerr/overseerr-base.css b/css/base/overseerr/overseerr-base.css index eebd42bc..a4df0b06 100644 --- a/css/base/overseerr/overseerr-base.css +++ b/css/base/overseerr/overseerr-base.css @@ -1,3 +1,5 @@ +@import url("/css/defaults/placeholders.css"); + /* TEXT */ [class*="text-gray-"]:not(button:disabled):not(button) { color: var(--text); diff --git a/css/base/petio/petio-base.css b/css/base/petio/petio-base.css index c1f0acca..6539a661 100644 --- a/css/base/petio/petio-base.css +++ b/css/base/petio/petio-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + * { outline: none; } @@ -478,25 +480,4 @@ a.rbc-show-more { .calendar--event p { color: var(--text-hover) !important; -} - -/* PLACEHOLDER TEXT */ -::placeholder { - color: var(--text) !important; - opacity: .5; -} - -:-moz-placeholder { - color: var(--text) !important; - opacity: .5; -} - -:-ms-input-placeholder { - color: var(--text) !important; - opacity: .5; -} - -::-webkit-input-placeholder { - color: var(--text) !important; - opacity: .5; } \ No newline at end of file diff --git a/css/base/pihole/pihole-base.css b/css/base/pihole/pihole-base.css index f3a59787..128aa3d0 100644 --- a/css/base/pihole/pihole-base.css +++ b/css/base/pihole/pihole-base.css @@ -10,7 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ - @import url(/css/defaults/placeholders.css); + @import url("/css/defaults/placeholders.css"); body { background: var(--main-bg-color) !important; diff --git a/css/base/plex/plex-base.css b/css/base/plex/plex-base.css index ded6559c..610f0a6e 100644 --- a/css/base/plex/plex-base.css +++ b/css/base/plex/plex-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + * { outline: none; } diff --git a/css/base/qbittorrent/qbittorrent-base.css b/css/base/qbittorrent/qbittorrent-base.css index 56205d07..2cab3574 100644 --- a/css/base/qbittorrent/qbittorrent-base.css +++ b/css/base/qbittorrent/qbittorrent-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); +@import url("/css/defaults/placeholders.css"); ::-webkit-scrollbar { width: 10px; diff --git a/css/base/requestrr/requestrr-base.css b/css/base/requestrr/requestrr-base.css index ebaf9f48..a22b0b3f 100644 --- a/css/base/requestrr/requestrr-base.css +++ b/css/base/requestrr/requestrr-base.css @@ -10,7 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ -@import url(/css/defaults/placeholders.css); +@import url("/css/defaults/placeholders.css"); body { color: var(--text); diff --git a/css/base/resilio-sync/resilio-sync-base.css b/css/base/resilio-sync/resilio-sync-base.css index d5a366d1..c7a7fb5a 100644 --- a/css/base/resilio-sync/resilio-sync-base.css +++ b/css/base/resilio-sync/resilio-sync-base.css @@ -11,7 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css); -@import url(/css/defaults/placeholders.css); +@import url("/css/defaults/placeholders.css"); body, .tableScrollContainer, diff --git a/css/base/rutorrent/rutorrent-base.css b/css/base/rutorrent/rutorrent-base.css index 5949da0e..5c4d145c 100644 --- a/css/base/rutorrent/rutorrent-base.css +++ b/css/base/rutorrent/rutorrent-base.css @@ -12,6 +12,7 @@ /* Based on https://github.com/themightykitten/ruTorrent-MaterialDesign */ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); @import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,300); +@import url("/css/defaults/placeholders.css"); @font-face { font-family: 'Roboto' !important diff --git a/css/base/sabnzbd/sabnzbd-base.css b/css/base/sabnzbd/sabnzbd-base.css index 6424d4a3..2e128256 100644 --- a/css/base/sabnzbd/sabnzbd-base.css +++ b/css/base/sabnzbd/sabnzbd-base.css @@ -9,7 +9,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ -@import url(/css/defaults/placeholders.css); +@import url("/css/defaults/placeholders.css"); body { background: var(--main-bg-color) !important; @@ -819,19 +819,6 @@ table { border-radius: 3px !important; } -.form-control::-moz-placeholder { - color: var(--text-muted) !important; - opacity: 1 -} - -.form-control:-ms-input-placeholder { - color: var(--text-muted) !important; -} - -.form-control::-webkit-input-placeholder { - color: var(--text-muted) !important; -} - .col2 p, .col2-cats { color: var(--text-hover); diff --git a/css/base/synclounge/synclounge-base.css b/css/base/synclounge/synclounge-base.css index c57ecac2..bd414548 100644 --- a/css/base/synclounge/synclounge-base.css +++ b/css/base/synclounge/synclounge-base.css @@ -10,7 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ -@import url(/css/defaults/placeholders.css); +@import url("/css/defaults/placeholders.css"); :root { --v-primary-base: rgb(var(--accent-color)); diff --git a/css/base/tautulli/tautulli-base.css b/css/base/tautulli/tautulli-base.css index 436f2b3f..3e0eee76 100644 --- a/css/base/tautulli/tautulli-base.css +++ b/css/base/tautulli/tautulli-base.css @@ -9,6 +9,9 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ + +@import url("/css/defaults/placeholders.css"); + body { background: var(--main-bg-color); background-repeat: repeat, no-repeat; diff --git a/css/base/transmission/transmission-base.css b/css/base/transmission/transmission-base.css index f413bdc3..306c9c92 100644 --- a/css/base/transmission/transmission-base.css +++ b/css/base/transmission/transmission-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); +@import url("/css/defaults/placeholders.css"); + * { outline: none !important; diff --git a/css/base/unraid/unraid-base.css b/css/base/unraid/unraid-base.css index faef37a5..e9a7c65d 100644 --- a/css/base/unraid/unraid-base.css +++ b/css/base/unraid/unraid-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + * { outline: none; } @@ -651,18 +653,6 @@ div.shade-black { background-color: rgb(0 0 0 / 15%) !important; } -::placeholder { - color: var(--text-muted) !important; -} - -:-ms-input-placeholder { - color: var(--text-muted) !important; -} - -::-webkit-input-placeholder { - color: var(--text-muted) !important; -} - /* MODAL */ /* .sweet-alert { diff --git a/css/base/vuetorrent/vuetorrent-base.css b/css/base/vuetorrent/vuetorrent-base.css index c5a31673..65e61be2 100644 --- a/css/base/vuetorrent/vuetorrent-base.css +++ b/css/base/vuetorrent/vuetorrent-base.css @@ -12,6 +12,8 @@ /* MOBILE */ +@import url("/css/defaults/placeholders.css"); + @media (max-width: 720px) { .modal__body, diff --git a/css/base/webtools/webtools-base.css b/css/base/webtools/webtools-base.css index 98eb4e8e..2af73e66 100644 --- a/css/base/webtools/webtools-base.css +++ b/css/base/webtools/webtools-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + body { background: var(--main-bg-color); background-repeat: repeat, no-repeat; @@ -368,25 +370,4 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla .logs .logDetails table tr:nth-child(even) { background-color: rgb(255 255 255 / 8%); -} - -/* 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/css/base/xbackbone/xbackbone-base.css b/css/base/xbackbone/xbackbone-base.css index b4cca0d5..8c41d36f 100644 --- a/css/base/xbackbone/xbackbone-base.css +++ b/css/base/xbackbone/xbackbone-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/placeholders.css"); + .bg-light { background: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; @@ -412,25 +414,4 @@ textarea.form-control:focus { 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 From c3803d070b7d46c76e3dac2b15d3d01265ddec00 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 23 Apr 2022 01:14:15 +0200 Subject: [PATCH 07/34] feat: :lipstick: Adds transparency vars --- css/base/adguard/adguard-base.css | 58 +++--- css/base/bazarr/bazarr-base.css | 81 ++++---- css/base/bitwarden/bitwarden-base.css | 39 ++-- css/base/calibreweb/calibreweb-base.css | 5 +- css/base/deluge/deluge-base.css | 47 ++--- css/base/dozzle/dozzle-base.css | 21 ++- css/base/duplicacy/duplicacy-base.css | 41 +++-- css/base/duplicati/duplicati-base.css | 15 +- css/base/emby/emby-base.css | 23 +-- css/base/filebrowser/filebrowser-base.css | 33 ++-- css/base/flood/flood-base.css | 33 ++-- css/base/gaps/gaps-base.css | 29 +-- css/base/gitea/gitea-base.css | 139 +++++++------- css/base/grafana/grafana-base.css | 174 +++++++++--------- css/base/grafana/organizr-dashboard.css | 72 ++++---- css/base/guacamole/guacamole-base.css | 51 ++--- css/base/jackett/jackett-base.css | 33 ++-- css/base/jellyfin/jellyfin-base.css | 29 +-- css/base/kitana/kitana-base.css | 25 +-- css/base/lazylibrarian/lazylibrarian-base.css | 25 +-- css/base/librespeed/librespeed-base.css | 3 +- css/base/lidarr/lidarr-base.css | 115 ++++++------ css/base/logarr/logarr-base.css | 56 +++--- css/base/monitorr/monitorr-base.css | 47 ++--- css/base/monitorr/organizr-dashboard.css | 14 +- css/base/moviematch/moviematch-base.css | 7 +- css/base/mylar3/mylar3-base.css | 33 ++-- css/base/netdata/netdata-base.css | 27 +-- css/base/nzbget/nzbget-base.css | 71 +++---- css/base/nzbhydra2/nzbhydra2-base.css | 43 ++--- css/base/ombi/ombi-base.css | 35 ++-- css/base/organizr/organizr-base.css | 107 +++++------ css/base/overseerr/overseerr-base.css | 29 +-- css/base/petio/petio-base.css | 23 +-- css/base/pihole/pihole-base.css | 59 +++--- css/base/plex/plex-base.css | 21 ++- css/base/plpp/plpp-base.css | 20 +- css/base/portainer/portainer-base.css | 83 ++++----- css/base/prowlarr/prowlarr-base.css | 123 +++++++------ css/base/qbittorrent/qbittorrent-base.css | 63 +++---- css/base/radarr/radarr-base.css | 113 ++++++------ css/base/readarr/readarr-base.css | 129 ++++++------- css/base/requestrr/requestrr-base.css | 39 ++-- css/base/resilio-sync/resilio-sync-base.css | 73 ++++---- css/base/rutorrent/rutorrent-base.css | 91 ++++----- css/base/sabnzbd/sabnzbd-base.css | 75 ++++---- css/base/sonarr/sonarr-base.css | 101 +++++----- css/base/synclounge/synclounge-base.css | 7 +- css/base/tautulli/tautulli-base.css | 81 ++++---- css/base/thelounge/thelounge-base.css | 22 ++- css/base/transmission/transmission-base.css | 47 ++--- css/base/unraid/unraid-base.css | 41 +++-- css/base/uptime-kuma/uptime-kuma-base.css | 23 +-- css/base/vuetorrent/vuetorrent-base.css | 25 +-- css/base/webtools/webtools-base.css | 45 ++--- css/base/whisparr/whisparr-base.css | 113 ++++++------ css/base/xbackbone/xbackbone-base.css | 27 +-- css/defaults/transparent.css | 28 +++ 58 files changed, 1551 insertions(+), 1481 deletions(-) create mode 100644 css/defaults/transparent.css diff --git a/css/base/adguard/adguard-base.css b/css/base/adguard/adguard-base.css index 1fd3fc58..e87ce6bb 100644 --- a/css/base/adguard/adguard-base.css +++ b/css/base/adguard/adguard-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color); @@ -61,7 +62,7 @@ body *:hover::-webkit-scrollbar-thumb { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -73,7 +74,7 @@ body *:hover::-webkit-scrollbar-thumb { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -113,7 +114,7 @@ h6, } .login__form .card { - background: rgba(0, 0, 0, 0.08); + background: var(--transparency-dark-10); border: 1px solid rgb(0 0 0 / 0.08); } @@ -183,7 +184,7 @@ h6, /* FOOTER */ .footer { - background: rgba(0, 0, 0, 0.08); + background: var(--transparency-dark-10); border-top: 1px solid rgba(255, 255, 255, 0.03); color: var(--text); } @@ -235,7 +236,7 @@ h6, .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover { cursor: pointer; - background: rgb(0 0 0 / 0.15); + background: var(--transparency-dark-15); overflow: hidden; } @@ -245,7 +246,7 @@ h6, /* CARDS*/ .card { - background-color: rgb(0 0 0 / 8%); + background-color: var(--transparency-dark-10); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); } @@ -331,7 +332,7 @@ h6, .dropdown-item:focus { color: var(--text-hover); text-decoration: none; - background-color: rgb(255 255 255 / 0.08); + background-color: var(--transparency-dark-10); } .select__menu { @@ -347,7 +348,7 @@ h6, } .select__option:hover { - background: rgba(255, 255, 255, .08) !important; + background: var(--transparency-dark-10) !important; } .select__option { @@ -366,11 +367,11 @@ h6, /* INSTALL */ .setup__container { - background-color: rgb(0 0 0 / 8%); + background-color: var(--transparency-dark-10); } .setup__progress-wrap { - background-color: rgb(0 0 0 / 50%); + background-color: var(--transparency-dark-50); } .setup__logo { @@ -388,7 +389,7 @@ h6, .dropdown-item.active, .dropdown-item:active { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .service__icon { @@ -397,7 +398,7 @@ h6, /* LOGS */ .logs__table { - background-color: rgb(0 0 0 / 8%); + background-color: var(--transparency-dark-10); } .logs__text, @@ -447,7 +448,7 @@ h6, .ReactTable .-loading, .ReactTable .-loading>div { - background: rgba(255, 255, 255, 0.5); + background: var(--transparency-light-50); } .ReactTable .rt-thead .rt-th, @@ -461,7 +462,7 @@ h6, } .ReactTable .rt-thead.-header { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .ReactTable .rt-thead .rt-th.-sort-asc, .ReactTable .rt-thead .rt-td.-sort-asc { @@ -495,7 +496,7 @@ h6, /* FORMS */ .form-control { color: var(--text); - background: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); border: 1px solid rgba(255, 255, 255, .1) } @@ -511,7 +512,7 @@ h6, border-color: transparent; -webkit-box-shadow: none; box-shadow: none; - background: rgba(255, 255, 255, 0.2); + background: var(--transparency-light-20); color: var(--text-hover); } @@ -523,7 +524,7 @@ h6, .custom-select { color: var(--text); - background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center; + background: var(--transparency-light-10) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center; background-size: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.1); @@ -544,7 +545,7 @@ select:focus { } .icon--selected { - background-color: rgb(0 0 0 / 15%); + background-color: var(--transparency-dark-15); border: solid 1px transparent; } @@ -581,7 +582,7 @@ select:focus { .btn-secondary { color: var(--button-text); - background-color: rgb(255 255 255 / 25%); + background-color: var(--transparency-light-25); border-color: rgb(255 255 255 / 0%); -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); @@ -623,7 +624,7 @@ select:focus { } .ReactModal__Overlay--after-open { - background-color: rgb(0 0 0 / 0.7) !important; + background-color: var(--transparency-dark-70) !important; } /* MOBILE */ @@ -657,21 +658,4 @@ select:focus { .dropdown-menu { background: #1f1f1f !important; } -} - -/* PLACEHOLDER TEXT */ -::placeholder { - color: var(--text); -} - -:-moz-placeholder { - color: var(--text); -} - -:-ms-input-placeholder { - color: var(--text); -} - -::-webkit-input-placeholder { - color: var(--text); } \ No newline at end of file diff --git a/css/base/bazarr/bazarr-base.css b/css/base/bazarr/bazarr-base.css index 06720e1c..34dfa18f 100644 --- a/css/base/bazarr/bazarr-base.css +++ b/css/base/bazarr/bazarr-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none; @@ -30,7 +31,7 @@ body { /* scroller */ ::-webkit-scrollbar-corner { - background-color: hsla(0, 0%, 100%, .08); + background-color: var(--transparency-dark-10); } ::-webkit-scrollbar { @@ -42,7 +43,7 @@ body { ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; - background-color: rgba(255, 255, 255, 0.35) !important; + background-color: var(--transparency-light-35) !important; } a, @@ -63,21 +64,21 @@ a:hover { } .page-link { - background-color: rgba(255, 255, 255, .07); - border: 1px solid rgba(255, 255, 255, .1); + background-color: var(--transparency-light-10); + border: 1px solid var(--transparency-light-10); } .page-link:hover { color: var(--link-color-hover); text-decoration: none; - background-color: rgba(0, 0, 0, .15); - border: 1px solid rgba(255, 255, 255, .1); + background-color: var(--transparency-dark-15); + border: 1px solid var(--transparency-light-10); } .page-item.disabled .page-link { color: var(--link-color); - background-color: rgba(255, 255, 255, .07); - border: 1px solid rgba(255, 255, 255, .1); + background-color: var(--transparency-light-10); + border: 1px solid var(--transparency-light-10); } .page-link:focus { @@ -100,7 +101,7 @@ a:hover { } .table-striped tbody tr:nth-of-type(odd) { - background-color: rgb(0 0 0 / 15%); + background-color: var(--transparency-dark-15); } .text-dark { @@ -149,13 +150,13 @@ label, .form-control { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.08); + background-color: var(--transparency-light-10); + border: 1px solid var(--transparency-light-10); } .form-control:focus { - background-color: rgba(255, 255, 255, 0.25) !important; - border-color: rgba(255, 255, 255, 0.25) !important; + background-color: var(--transparency-light-25) !important; + border-color: var(--transparency-light-25) !important; outline: 0; box-shadow: none; color: var(--text-hover); @@ -163,10 +164,10 @@ label, .form-control:disabled, .form-control[readonly] { - background-color: rgb(255 255 255 / 15%); + background-color: var(--transparency-light-15); opacity: .7; color: var(--text-hover); - border: 1px solid rgb(255 255 255 / 15%); + border: 1px solid var(--transparency-light-15); } :root .form-control:focus { @@ -180,7 +181,7 @@ label, .bootstrap-tagsinput { color: var(--text); - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; border: 1px solid transparent !important; } @@ -195,7 +196,7 @@ label, .input-group-text { color: var(--text); - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border: 1px solid transparent; } @@ -205,7 +206,7 @@ label, } .custom-chip-input:focus-within { - border-color: rgb(255 255 255 / 10%); + border-color: var(--transparency-light-10); } .custom-chip-input .custom-chip { @@ -221,7 +222,7 @@ label, /* SIDEBAR */ .sidebar-container { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .sidebar-container .sidebar-button, @@ -233,7 +234,7 @@ label, .sidebar-container .sidebar-button:active, .sidebar-container .sidebar-button:focus { color: rgb(var(--accent-color)) !important; - background-color: rgba(0, 0, 0, 0.15) !important; + background-color: var(--transparency-dark-15) !important; } .sidebar-container .sidebar-button:hover, @@ -249,7 +250,7 @@ label, .sidebar-container .sidebar-button.sb-active, .sidebar-container .sidebar-button.sb-active:hover, .sidebar-container .button.active { - background-color: rgba(0, 0, 0, 0.15) !important; + background-color: var(--transparency-dark-15) !important; color: rgb(var(--accent-color)) !important; } @@ -298,7 +299,7 @@ label, /* TOP NAV BAR */ .header-container .bg-primary { - background-color: rgba(0, 0, 0, .35) !important; + background: var(--transparency-dark-35) !important; } .header-container .btn-primary { @@ -333,7 +334,7 @@ label, -webkit-background-size: auto, cover !important; -moz-background-size: auto, cover !important; -o-background-size: auto, cover !important; - border-bottom: solid 1px rgba(255, 255, 255, .1); + border-bottom: solid 1px var(--transparency-light-10); } @@ -355,21 +356,21 @@ label, .auth-card .card-footer { background-color: transparent; - border-top: 1px solid rgba(255, 255, 255, .1); + border-top: 1px solid var(--transparency-light-10); } hr { - border-top: 1px solid rgb(255 255 255 / 10%); + border-top: 1px solid var(--transparency-light-10); } .card { - background-color: rgba(0, 0, 0, .45); + background-color: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } .card-header { - border-bottom: 1px solid rgb(255 255 255 / 10%); + border-bottom: 1px solid var(--transparency-light-10); } .settings-card:hover, @@ -380,8 +381,8 @@ hr { .alert-secondary { color: var(--text); - background-color: rgba(255, 255, 255, .15); - border-color: rgba(255, 255, 255, .15); + background-color: var(--transparency-light-15); + border-color: var(--transparency-light-15); } /* Series page */ @@ -391,7 +392,7 @@ hr { } .progress { - background-color: rgb(255 255 255 / 20%); + background-color: var(--transparency-light-20); } .progress-bar.bg-primary { @@ -421,17 +422,17 @@ hr { .popover { background-color: #1f1f1f; - border: 1px solid rgba(255, 255, 255, .2); + border: 1px solid var(--transparency-light-20); } .bs-popover-auto[x-placement^=top]>.arrow:after, .bs-popover-top>.arrow:after { - border-top-color: rgba(255, 255, 255, .5); + border-top-color: var(--transparency-light-50); } .popover-header { background-color: #1f1f1f; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--transparency-light-10); } @@ -638,7 +639,7 @@ hr { } .custom-control-input:focus~.custom-control-label:before { - box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .07); + box-shadow: 0 0 0 0.2rem var(--transparency-light-10); } .custom-control-input:checked~.custom-control-label:before { @@ -721,11 +722,11 @@ input { .dropdown-item:focus, .dropdown-item:hover { color: var(--text-hover); - background-color: hsla(0, 0%, 100%, .08); + background-color: var(--transparency-dark-10); } .custom-selector .selector__control { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-color: rgba(0, 0, 0, 0) !important; color: var(--text-hover); } @@ -741,7 +742,7 @@ input { } .custom-selector .selector__control--is-focused { - border-color: rgba(255, 255, 255, .2) !important; + border-color: var(--transparency-light-20) !important; } .selector__menu { @@ -757,7 +758,7 @@ input { } .custom-selector .selector__option--is-selected:active { - background-color: rgba(255, 255, 255, .07) !important; + background-color: var(--transparency-light-10) !important; } .custom-selector .selector__option--is-focused { @@ -801,7 +802,7 @@ input { } .recharts-rectangle.recharts-tooltip-cursor { - fill: rgba(255, 255, 255, .15) !important; + fill: var(--transparency-light-15) !important; } text { @@ -833,7 +834,7 @@ line { .toast-header { color: var(--text-hover); - background-color: hsla(0, 0%, 0%, .35); + background: var(--transparency-dark-35); border-bottom: 1px solid rgba(0, 0, 0, .05); } diff --git a/css/base/bitwarden/bitwarden-base.css b/css/base/bitwarden/bitwarden-base.css index 427bedc5..3a923b67 100644 --- a/css/base/bitwarden/bitwarden-base.css +++ b/css/base/bitwarden/bitwarden-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none; @@ -93,7 +94,7 @@ html[class*="theme_"] .navbar .nav-item>.nav-link { .table-hover tbody tr:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); } h1, @@ -118,7 +119,7 @@ html[class*="theme_"] .card-header, /* NAVBAR */ .navbar { - background-color: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; } .navbar-dark .navbar-nav .show>.nav-link, @@ -131,12 +132,12 @@ html[class*="theme_"] .card-header, /* CARDS */ html[class*="theme_"] .card-header { - background-color: rgb(0 0 0 / 45%); + background-color: var(--transparency-dark-45); color: var(--text-hover); } .card { - background-color: rgba(255, 255, 255, 0.07) !important; + background-color: var(--transparency-dark-10) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--text) !important; } @@ -158,7 +159,7 @@ app-vault-groupings .card li.active>div>.fa { body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4, body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4>div { - background-color: rgb(0 0 0 / 15%) !important; + background-color: var(--transparency-dark-15) !important; } html[class*="theme_"] .password-number { @@ -279,19 +280,19 @@ html[class*="theme_"] .form-control-file { html[class*="theme_"] .form-control:focus { box-shadow: none; border-color: transparent; - background: rgb(253 253 253 / 15%); + background: var(--transparency-light-15); } html[class*="theme_"] .form-control { color: var(--text); - background-color: rgb(0 0 0 / 0.25); + background: var(--transparency-dark-25); border: 1px solid transparent; } html[class*="theme_"] .form-control:disabled, .form-control[readonly] { - background-color: rgb(255 255 255 / 25%); + background-color: var(--transparency-light-25); opacity: 1; } @@ -332,13 +333,13 @@ html[class*="theme_"] .dropdown-item:hover, html[class*="theme_"] .dropdown-item:focus { color: var(--text-hover); text-decoration: none; - background-color: rgb(255 255 255 / 0.08); + background-color: var(--transparency-light-10); } a.text-danger:hover, a.text-danger:focus { color: #dd4b39 !important; - background-color: rgb(255 255 255 / 0.08) !important; + background-color: var(--transparency-light-10) !important; } .dropdown-menu .text-danger { @@ -373,24 +374,24 @@ html[class*="theme_"] .footer { html[class*="theme_"] .list-group-item.active { border-color: rgba(255, 255, 255, 0.15); color: rgb(var(--accent-color)); - background-color: rgb(255 255 255 / 10%); + background: var(--transparency-light-10); border-left: 3px solid rgb(var(--accent-color)); } html[class*="theme_"] .callout { - background-color: rgb(255 255 255 / 15%); + background: var(--transparency-light-15); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); } html[class*="theme_"] .list-group-item { - background-color: rgb(0 0 0 / 35%); + background: var(--transparency-dark-35); border: 1px solid rgb(255 255 255 / 8%); color: var(--text); } html[class*="theme_"] .progress { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } /* BUTTONS */ @@ -530,7 +531,7 @@ html[class*="theme_"] .org-nav .nav-tabs a.active { } html[class*="theme_"] .nav-tabs .nav-link.active { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-color: rgba(255, 255, 255, 0.15); } @@ -558,7 +559,7 @@ html[class*="theme_"] .org-nav .nav-tabs a:not(.active) { .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--text); - background-color: rgb(255 255 255 / 25%); + background-color: var(--transparency-light-25); border-color: transparent; } @@ -607,11 +608,11 @@ html[class*="theme_"] .table td [class*="fa-"] { /* Cards */ .bg-secondary { - background-color: rgb(255 255 255 / 10%) !important; + background: var(--transparency-light-10) !important; } .bg-white { - background-color: rgba(255, 255, 255, 0.1) !important; + background: var(--transparency-light-10) !important; } html[class*="theme_"] .groupings .card .card-body a { @@ -631,7 +632,7 @@ html[class*="theme_"] .groupings .card .card-body a { color: var(--text); pointer-events: none; cursor: auto; - background-color: rgb(0 0 0 / 10%); + background: var(--transparency-dark-10); border-color: rgb(0 0 0 / 10%); } diff --git a/css/base/calibreweb/calibreweb-base.css b/css/base/calibreweb/calibreweb-base.css index bbcb5746..cf8f95b2 100644 --- a/css/base/calibreweb/calibreweb-base.css +++ b/css/base/calibreweb/calibreweb-base.css @@ -15,6 +15,7 @@ /* APP VARS*/ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --color-background: var(--main-bg-color); @@ -203,7 +204,7 @@ .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { color: var(--text-hover); - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /* SIDEMENU */ @@ -225,7 +226,7 @@ -webkit-transition: color .2s; -o-transition: color .2s; transition: color .2s; - background-color: rgba(0, 0, 0, .55) !important; + background: var(--transparency-dark-55) !important; } /* NAVBAR */ diff --git a/css/base/deluge/deluge-base.css b/css/base/deluge/deluge-base.css index 53538ad7..09e9de18 100644 --- a/css/base/deluge/deluge-base.css +++ b/css/base/deluge/deluge-base.css @@ -14,6 +14,7 @@ @import url('https://fonts.googleapis.com/css?family=Roboto'); @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); html { background: var(--main-bg-color); @@ -34,20 +35,20 @@ /* scroller */ ::-webkit-scrollbar-corner { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } ::-webkit-scrollbar { width: 10px; height: 10px; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } ::-webkit-scrollbar-thumb { -webkit-border-radius: 2px; border-radius: 2px; - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .x-grid3-header table, @@ -56,7 +57,7 @@ } .ext-el-mask { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .ext-el-mask-msg { @@ -304,13 +305,13 @@ } ul.x-tab-strip-top { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); background-image: none; border-bottom-color: transparent; } ul.x-tab-strip-bottom { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); //background-image: url(../images/gray/tabs/tab-strip-btm-bg.gif); border-top-color: transparent; } @@ -349,7 +350,7 @@ ul.x-tab-strip li { float: left; margin-left: 2px; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } #torrentDetails dl dt, @@ -435,7 +436,7 @@ .x-form-text, textarea.x-form-field { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); background-image: none; border-color: transparent; } @@ -1034,7 +1035,7 @@ } .x-grid3 { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .x-grid-panel .x-panel-mc .x-panel-body { @@ -1066,12 +1067,12 @@ } .x-grid3-row-alt { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .x-grid3-row-over { border-color: transparent; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); background-image: none; } @@ -1084,7 +1085,7 @@ } .x-grid3-header { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); background-image: none; color: var(--text-hover) !important; } @@ -1110,7 +1111,7 @@ td.sort-desc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); background-image: none; } @@ -1151,7 +1152,7 @@ } .x-grid3-row-selected { - background-color: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; background-image: none; border-color: transparent; color: var(--text-hover) !important; @@ -1512,11 +1513,11 @@ } .x-tree-node .x-tree-node-over { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .x-tree-node .x-tree-selected { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .x-tree-drop-ok-append .x-dd-drop-icon { @@ -1778,7 +1779,7 @@ .x-menu-item-active { background-image: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); border-color: transparent; color: var(--text-hover) !important; } @@ -1956,7 +1957,7 @@ font-family: 'Roboto', tahoma, arial, verdana, sans-serif; border-color: transparent; background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .x-panel-body { @@ -2304,12 +2305,12 @@ } .x-layout-collapsed { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-color: transparent; } .x-layout-collapsed-over { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .x-layout-split-west .x-layout-mini { @@ -2374,7 +2375,7 @@ } .x-list-header { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); background-image: none; color: var(--text-hover) !important; } @@ -2389,11 +2390,11 @@ } .x-list-over { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .x-list-selected { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover) !important; } diff --git a/css/base/dozzle/dozzle-base.css b/css/base/dozzle/dozzle-base.css index 1ec59533..def06c96 100644 --- a/css/base/dozzle/dozzle-base.css +++ b/css/base/dozzle/dozzle-base.css @@ -11,11 +11,12 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --scheme-main-ter: var(--main-bg-color); --text-strong-color: var(--button-text-hover); - --border-color: rgb(255 255 255 / 25%); + --border-color: var(--transparency-light-25); --logo-color: rgb(var(--accent-color)); --body-background-color: var(--main-bg-color); --border-hover-color: rgb(var(--accent-color)); @@ -53,14 +54,14 @@ section header, /* Scrollbar */ html.has-custom-scrollbars ::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, .25); + background: var(--transparency-light-25); outline: 1px solid #0000; border-radius: 4px; } html.has-custom-scrollbars ::-webkit-scrollbar-thumb:active, html.has-custom-scrollbars ::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, .45); + background: var(--transparency-light-45); } @@ -110,13 +111,13 @@ p, a.panel-block:hover, label.panel-block:hover { - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); color: var(--text-strong-color); } /* Side Menu*/ .menu-list a:hover { - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); color: var(--text-hover) !important; } @@ -154,7 +155,7 @@ li.exited a { .autocomplete .dropdown-item.is-hovered, a.dropdown-item:hover, button.dropdown-item:hover { - background: rgba(255, 255, 255, .25); + background: var(--transparency-light-25); color: var(--text-strong-color); } @@ -234,7 +235,7 @@ section .is-scrollbar-notification button { } code { - background: rgba(0, 0, 0, .35) !important; + background: var(--transparency-dark-35) !important; } .switch input[type=checkbox]:checked+.check { @@ -253,7 +254,7 @@ code { /* Events */ .events { - background: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); } .scroll-progress svg circle { @@ -270,10 +271,10 @@ code { } .events.medium { - background: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); } .date { color: rgb(var(--accent-color)) !important; - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } \ No newline at end of file diff --git a/css/base/duplicacy/duplicacy-base.css b/css/base/duplicacy/duplicacy-base.css index b16b369a..b86d7ca3 100644 --- a/css/base/duplicacy/duplicacy-base.css +++ b/css/base/duplicacy/duplicacy-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color); @@ -65,7 +66,7 @@ a.disabled-link { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -77,7 +78,7 @@ a.disabled-link { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -161,7 +162,7 @@ label { .col-xs-4 .card, .col-xs-12 .card, .col-xs-8 .card { - background: rgb(0 0 0 / 8%) !important; + background: var(--transparency-dark-10) !important; } #schedule-0, @@ -186,7 +187,7 @@ label { #schedule-19, #schedule-20, [id*="#schedule-"] { - background-color: rgb(0 0 0 / 8%); + background: var(--transparency-dark-10); } /* TIMELINE */ @@ -218,7 +219,7 @@ label { .card .nav-tabs>li.active>a:hover { color: var(--text); cursor: default; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: 1px solid rgba(255, 255, 255, .25); border-bottom-color: var(--text); border-radius: 6px 6px 0 0; @@ -226,7 +227,7 @@ label { .card .nav>li>a:hover, .card .nav>li>a:focus { - background-color: rgba(255, 255, 255, .07); + background: var(--transparency-light-10); border: 1px solid transparent; } @@ -236,8 +237,8 @@ label { } .navbar-default { - background-color: rgb(0 0 0 / 26%); - border-bottom: 1px solid rgb(255 255 255 / 25%); + background: var(--transparency-dark-25); + border-bottom: 1px solid var(--transparency-light-25); } /* SIDEBAR */ @@ -245,7 +246,7 @@ label { .sidebar[data-background-color="black"]:before, .off-canvas-sidebar[data-background-color="black"]:after, .off-canvas-sidebar[data-background-color="black"]:before { - background: rgb(0 0 0 / 10%); + background: var(--transparency-dark-10); } .sidebar[data-background-color="black"] .logo, @@ -321,7 +322,7 @@ label { .nav-tabs>li.active>a:hover { color: var(--text); cursor: default; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: 1px solid transparent; border-bottom-color: transparent; } @@ -332,7 +333,7 @@ label { } .modal-body .nav-tabs>li.active>a:hover { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: 1px solid transparent; } @@ -352,7 +353,7 @@ label { .modal-body .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border-color: transparent; } @@ -383,18 +384,18 @@ label { .form-control, textarea { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); } .form-control:focus { - background-color: rgb(0 0 0 / 50%); + background: var(--transparency-dark-50); } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); } #input_s3_provider:focus, @@ -428,7 +429,7 @@ fieldset[disabled] .form-control { .timepicker-spinner .btn:hover, .timepicker-spinner .btn:focus { - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); color: var(--text-hover); border: 1px solid transparent; } @@ -521,7 +522,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt } .close { - var(--text-hover); + color: var(--text-hover); } .navbar .navbar-nav>li>a.btn-success, @@ -588,7 +589,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt .table>thead>tr>td.active, .table>thead>tr>th.active, .row-clickable.active { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -629,7 +630,7 @@ hr { /* PROGRESS BARS */ .progress { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .progress-bar { @@ -642,7 +643,7 @@ hr { /* FOOTER */ .main-panel>.footer { - background: rgb(0 0 0 / 0.25); + background: var(--transparency-dark-25); } /* MOBILE */ diff --git a/css/base/duplicati/duplicati-base.css b/css/base/duplicati/duplicati-base.css index d91b8cc1..3bc31a39 100644 --- a/css/base/duplicati/duplicati-base.css +++ b/css/base/duplicati/duplicati-base.css @@ -1,4 +1,5 @@ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none !important; @@ -153,14 +154,14 @@ form.styled select, form.styled .input.select select { color: var(--text); border: none; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } form.styled input:focus, form.styled textarea:focus { color: var(--text-hover); border: none; - background: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); } select:focus, @@ -204,7 +205,7 @@ body .container .body .contextmenu { } body .container .body .contextmenu li a:hover { - background: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); color: var(--text-hover); } @@ -310,7 +311,7 @@ ul.tabs>li { /* FOLDER TREE*/ .tree-view li div.selected { border-color: rgba(255, 255, 255, .1); - background-color: rgba(252, 252, 252, .25); + background: var(--transparency-light-25); } @@ -321,7 +322,7 @@ body .container .header .state .progress-bar { /* LOGIN */ #login h2 { - background: rgba(255, 255, 255, .15); + background: var(--transparency-light-15); color: var(--text); } @@ -330,7 +331,7 @@ body .container .header .state .progress-bar { } #login fieldset { - background-color: rgba(255, 255, 255, .15); + background: var(--transparency-light-15); } #login fieldset input[type="submit"] { @@ -345,6 +346,6 @@ body .container .header .state .progress-bar { #login fieldset input[type="email"], #login fieldset input[type="password"] { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); } \ No newline at end of file diff --git a/css/base/emby/emby-base.css b/css/base/emby/emby-base.css index 37e4c163..9463def3 100644 --- a/css/base/emby/emby-base.css +++ b/css/base/emby/emby-base.css @@ -1,4 +1,5 @@ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --theme-primary-color: var(--accent-color); @@ -11,15 +12,15 @@ --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); + --docked-drawer-background: var(--transparency-dark-25); --button-background: var(--button-color); - --card-background: rgba(0, 0, 0, 0.15); + --card-background: var(--transparency-dark-15); --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); --header-background: var(--theme-background); --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); + --line-background: var(--transparency-light-10); --line-size: .08em; --scrollbar-thumb-background: rgba(255,255,255,.3); } @@ -29,9 +30,9 @@ --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); + --docked-drawer-background: var(--transparency-dark-25); --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); + --card-background: var(--transparency-dark-15); --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } @@ -41,9 +42,9 @@ --theme-background: var(--main-bg-color); --header-blur-background: rgba(20,20,20,0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); + --docked-drawer-background: var(--transparency-dark-25); --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); + --card-background: var(--transparency-dark-15); --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29,29,31,0.66); } @@ -175,7 +176,7 @@ html { } .backgroundContainer.withBackdrop { - background-color: rgba(0, 0, 0, .83) + background: var(--transparency-dark-80) } @media not all and (min-width: 50em) { @@ -217,7 +218,7 @@ html { .emby-select-withcolor { color: inherit; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: var(--line-size) solid transparent } @@ -334,7 +335,7 @@ html { @media(hover: hover) and (pointer:fine) { .actionSheetMenuItem:hover { - background-color: rgba(255, 255, 255, .2) + background: var(--transparency-light-20) } } @@ -398,7 +399,7 @@ html { .emby-input, .emby-textarea { color: inherit; - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border: var(--line-size) solid rgba(255, 255, 255, 0.1) } diff --git a/css/base/filebrowser/filebrowser-base.css b/css/base/filebrowser/filebrowser-base.css index 67f64a40..336962d8 100644 --- a/css/base/filebrowser/filebrowser-base.css +++ b/css/base/filebrowser/filebrowser-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); .message { color: var(--text-hover); @@ -48,7 +49,7 @@ th { #login input[type=password], #login input[type=text] { color: var(--text-hover) !important; - background-color: rgba(0, 0, 0, 0.15) !important; + background: var(--transparency-dark-15) !important; border: none; } @@ -103,7 +104,7 @@ body { } nav { - background: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); height: 100%; top: 64px; width: 240px; @@ -124,7 +125,7 @@ nav .action { } nav .action:hover { - background-color: rgba(255, 255, 255, 0.05); + background: var(--transparency-light-05); color: rgb(var(--accent-color)); } @@ -133,7 +134,7 @@ nav>div { } header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; @@ -174,20 +175,20 @@ body { } #listing.list .item { - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); color: var(--text); border: none; } #listing.list .item:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); border: none; transition: .4s; } #listing.list .item.header { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); color: var(--text-hover); border-bottom: none; right: auto; @@ -213,7 +214,7 @@ body { } .share__box__info { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .share__box__download { @@ -271,13 +272,13 @@ svg { } #listing .item { - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); color: var(--text); border: none; } .input { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -304,7 +305,7 @@ select>option { } #search .boxes { - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); padding: 15px; } @@ -313,11 +314,11 @@ select>option { } #search .boxes>div>div { - background-color: rgba(0, 0, 0, .10); + background: var(--transparency-dark-10); } #search .boxes>div>div:hover { - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); } #search.active #input { @@ -343,7 +344,7 @@ select>option { } .card { - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); } .card h3 { @@ -404,7 +405,7 @@ table th { } #search #input { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } #listing.mosaic .item { @@ -413,7 +414,7 @@ table th { #listing.mosaic .item:hover { box-shadow: none !important; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .dashboard p label { diff --git a/css/base/flood/flood-base.css b/css/base/flood/flood-base.css index c6452e1f..329a38aa 100644 --- a/css/base/flood/flood-base.css +++ b/css/base/flood/flood-base.css @@ -13,6 +13,7 @@ /* MOBILE */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); @media (max-width: 720px) { @@ -87,7 +88,7 @@ p, .panel--light { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .panel { @@ -101,7 +102,7 @@ p, .input, .inverse .input { - background: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); color: var(--text-hover); border: 1px solid #0000; box-shadow: 0 1px 1px rgba(210, 216, 222, 0), 0 1px 3px 1px rgba(210, 216, 222, 0); @@ -125,7 +126,7 @@ p, .button--quaternary, .inverse .button--quaternary { - background: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); border-color: transparent; box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 1px 3px 1px rgba(0, 0, 0, 0); color: var(--text); @@ -150,7 +151,7 @@ p, .context-menu__items .select__item:focus-visible, .context-menu__items .select__item:hover { - background: rgba(255, 255, 255, .15); + background: var(--transparency-light-15); } .inverse .form__element__addon { @@ -177,7 +178,7 @@ p, } .sortable-list__item { - background: rgb(255 255 255 / 10%); + background: var(--transparency-light-10); border: 1px solid rgb(255 255 255 / 10%); } @@ -188,7 +189,7 @@ p, .css-q5wzhq:hover { color: var(--text-hover); - background: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); } .css-m5tpeq:hover { @@ -210,14 +211,14 @@ p, .inverse .button--tertiary:focus, .inverse .button--tertiary:hover { - background: rgba(255, 255, 255, .35); + background: var(--transparency-light-35); border-color: #0000; box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%); text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%); } .inverse .button--tertiary:active { - background: rgba(255, 255, 255, .35); + background: var(--transparency-light-35); border-color: #0000; box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%); text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%); @@ -225,7 +226,7 @@ p, .inverse .button--tertiary:focus, .inverse .button--tertiary:hover { - background: rgba(255, 255, 255, .35); + background: var(--transparency-light-35); border-color: #0000; box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%); text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%); @@ -264,7 +265,7 @@ p, .menu__item.is-selectable:focus-within, .menu__item.is-selectable:hover { - background: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -315,7 +316,7 @@ p, .dark .table__row--heading, .table__row--heading { - background: rgba(255, 255, 255, .15); + background: var(--transparency-light-15); box-shadow: 0 1px 0 hsl(0deg 0% 100% / 12%); color: var(--text-hover); } @@ -455,7 +456,7 @@ p, .dark .action:hover, .action:focus-visible, .action:hover { - background: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); box-shadow: none; } @@ -474,7 +475,7 @@ p, /* SIDE MENU */ .dark .application__sidebar, .application__sidebar { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); box-shadow: 1px 0 hsl(0deg 0% 100% / 12%); color: var(--text); } @@ -625,7 +626,7 @@ p, .modal--vertical.modal--tabs-in-header .modal__header, .modal--vertical.modal--tabs-in-body .modal__tabs { /* Modal side menu*/ - background: rgb(0 0 0 / 45%) !important; + background: var(--transparency-dark-45) !important; color: var(--text-hover); } @@ -644,7 +645,7 @@ p, .modal__tabs .modal__tab.is-active { color: var(--text-hover); - background: rgb(255 255 255 / 15%); + background: var(--transparency-light-15); border-radius: 3px 3px 0px 0px; } @@ -693,7 +694,7 @@ p, } .interactive-list { - background: rgb(255 255 255 / 10%); + background: var(--transparency-light-10); border: 1px solid rgb(255 255 255 / 10%); box-shadow: 0 1px 1px rgb(0 0 0 / 15%), 0 1px 3px 1px rgb(0 0 0 / 20%); color: var(--text); diff --git a/css/base/gaps/gaps-base.css b/css/base/gaps/gaps-base.css index 6fc97d17..e6c788ce 100644 --- a/css/base/gaps/gaps-base.css +++ b/css/base/gaps/gaps-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color); @@ -54,7 +55,7 @@ body { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -66,7 +67,7 @@ body { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -112,7 +113,7 @@ label { /* Header */ .bg-primary { background-color: transparent !important; - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .navbar .list-ul-active, @@ -152,12 +153,12 @@ label { table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd, table.dataTable tbody tr { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } table.dataTable thead th, @@ -177,14 +178,14 @@ table.dataTable.display tbody td { .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: var(--text) !important; border: 1px solid transparent; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:active { color: var(--text-hover) !important; border: 1px solid transparent; - background: rgba(255, 255, 255, .08); + background: var(--transparency-light-10) } .dataTables_wrapper .dataTables_paginate .paginate_button:active { @@ -281,7 +282,7 @@ table.dataTable.display tbody td { .nav-pills .nav-item.open .nav-link:focus, .nav-tabs .nav-item.show .nav-link { color: rgb(var(--accent-color)); - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); border-color: transparent; } @@ -298,13 +299,13 @@ table.dataTable.display tbody td { .nav-tabs .nav-link:focus, .nav-tabs .nav-item.open .nav-link:hover, .nav-pills .nav-item.open .nav-link:hover { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-color: transparent; color: var(--text-hover); } .nav-tabs .nav-link.active:hover { - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); } .badge-primary { @@ -313,7 +314,7 @@ table.dataTable.display tbody td { } #plexServers .card-header { - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); color: var(--text-hover) } @@ -322,12 +323,12 @@ table.dataTable.display tbody td { } #plexServers .list-group-item { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: none; } #plexServers .card-footer { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .dropdown-menu { @@ -352,7 +353,7 @@ table.dataTable.display tbody td { .dropdown-item:focus { color: var(--text-hover); text-decoration: none; - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10) } /* Input */ diff --git a/css/base/gitea/gitea-base.css b/css/base/gitea/gitea-base.css index 94837f8b..9f43e61c 100644 --- a/css/base/gitea/gitea-base.css +++ b/css/base/gitea/gitea-base.css @@ -13,6 +13,7 @@ @import url("/css/base/gitea/chroma.css"); @import url("/css/base/gitea/monaco_vs_dark.css"); @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --color-text: var(--text); @@ -119,7 +120,7 @@ a:hover, min-height: 50px; border: 3px solid transparent; border-radius: 8px !important; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; box-shadow: none !important; } @@ -132,7 +133,7 @@ a:hover, min-height: 50px; border: 3px solid transparent; border-radius: 8px !important; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -224,21 +225,21 @@ b:hover, .following.bar.light.ui.secondary.menu .active.item, .following.bar.lightui.secondary.menu .active.item:hover { box-shadow: none; - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; color: rgb(var(--accent-color)); } .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover { - background: rgb(255 255 255 / 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } .ui.secondary.menu .active.item, .ui.secondary.menu .active.item:hover { box-shadow: none; - background: rgba(0, 0, 0, .05); + background: var(--transparency-dark-05); color: var(--text-hover); } @@ -249,7 +250,7 @@ b:hover, } .organization.settings .ui.menu { - background: rgb(0 0 0 / 10%); + background: var(--transparency-dark-10); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); } @@ -257,7 +258,7 @@ b:hover, .organization.settings .ui.vertical.menu { display: block; flex-direction: column; - background: rgb(0 0 0 / 15%); + background: var(--transparency-dark-15); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); } @@ -270,7 +271,7 @@ b:hover, } .ui.segment { - background: rgb(0 0 0 / 15%) !important; + background: var(--transparency-dark-15) !important; } .ui.attached.segment, @@ -282,7 +283,7 @@ b:hover, } .ui .info.segment.top { - background-color: rgb(0 0 0 / 15%) !important; + background-color: var(--transparency-dark-15) !important; color: var(--text); } @@ -292,17 +293,17 @@ b:hover, } .ui.info.message { - background-color: rgb(0 0 0 / 15%); + background-color: var(--transparency-dark-15); color: #276f86; } .ui.attached.header { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border: 1px solid transparent; } .explore .navbar { - background-color: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; } @@ -317,7 +318,7 @@ b:hover, } .ui.progress { - background: rgb(255 255 255 / 10%); + background: var(--transparency-light-10); } .ui.progress[data-percent="0"] .bar .progress { @@ -330,11 +331,11 @@ b:hover, } .pagination.menu { - background: rgba(255, 255, 255, .08) !important; + background: var(--transparency-light-10) !important; } .ui.pagination.menu .active.item { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); box-shadow: none; } @@ -344,7 +345,7 @@ b:hover, } .feeds .list ul li.private { - background-color: rgb(255 255 255 / 10%); + background: var(--transparency-light-10); } .ui.secondary.pointing.menu { @@ -356,7 +357,7 @@ b:hover, } .ui.repository.list .item:not(:first-child) { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid var(--transparency-light-25); } @@ -441,7 +442,7 @@ b:hover, /* SIGN IN NAV BAR*/ .ui.menu.new-menu { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .ui.menu.new-menu::after { @@ -492,13 +493,13 @@ b:hover, } .ui.menu .ui.dropdown .menu>.active.item { - background: rgb(0 0 0 / 10%) !important; + background: var(--transparency-dark-10) !important; color: rgb(var(--accent-color)) !important; } .ui.menu .ui.dropdown .menu>.item:hover, .ui.menu .ui.dropdown .menu>.selected.item { - background: rgb(255 255 255 / 0.07) !important; + background: var(--transparency-light-10) !important; color: var(--text-hover) !important; } @@ -529,12 +530,12 @@ b:hover, } .ui.dropdown .menu>.item:hover { - background: rgb(255 255 255 / 0.07); + background: var(--transparency-light-10); } .ui.dropdown .menu .selected.item, .ui.dropdown.selected { - background: rgb(0 0 0 / 0.25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -547,7 +548,7 @@ b:hover, input:hover, textarea:hover { border-color: rgb(255 255 255 / 20%); - background: rgb(0 0 0 / .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -564,14 +565,14 @@ textarea:hover { } .ui.selection.dropdown { - background: rgb(0 0 0 / .25); + background: var(--transparency-dark-25); color: var(--text-hover); border-color: rgb(255 255 255 / 10%); } .ui.selection.dropdown:focus { border-color: rgba(255, 255, 255, .08); - background: rgb(0 0 0 / 50%); + background: var(--transparency-dark-50); box-shadow: none; } @@ -640,7 +641,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c #app .ui.item.menu, .ui.item.menu .item { - background: rgb(0 0 0 / 15%); + background: var(--transparency-dark-15); border-color: rgb(255 255 255 / 10%); } @@ -649,7 +650,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c } .ui.menu .active.item { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); font-weight: 400; box-shadow: none; @@ -657,25 +658,25 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c .ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } .ui.menu a.item:hover { color: var(--text-hover); - background: rgb(0 0 0 / 15%); + background: var(--transparency-dark-15); } #app .ui.link.menu .item:hover, .ui.menu .dropdown.item:hover, .ui.menu .link.item:hover { cursor: pointer; - background: rgba(0, 0, 0, .03); + background: var(--transparency-dark-05); color: var(--text-hover); } #app .ui.secondary.segment { - background: rgb(0 0 0 / 15%); + background: var(--transparency-dark-15); color: rgba(0, 0, 0, .6); } @@ -686,7 +687,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover { } .heatmap-color-0 { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .activity-bar-graph { @@ -716,7 +717,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover { /* REPOSITORY */ .repository .header-wrapper { - background-color: rgb(0 0 0 / 24%); + background: var(--transparency-dark-25); } .repository .diff-detail-box { @@ -805,7 +806,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover { .tag-code, .tag-code td { - background: rgba(255, 255, 255, .1) !important; + background: var(--transparency-light-10) !important; } .tag-code td.lines-num { @@ -814,11 +815,11 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover { a.blob-excerpt { color: var(--text); - background: rgba(255, 255, 255, .1) !important; + background: var(--transparency-light-10) !important; } td.blob-excerpt { - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); } .repo-header .ui.breadcrumb a { @@ -863,7 +864,7 @@ td.blob-excerpt { .ui.card, .ui.cards>.card { - background: rgb(0 0 0 / 15%); + background: var(--transparency-dark-15); box-shadow: none; } @@ -872,7 +873,7 @@ td.blob-excerpt { .ui.link.cards .card:not(.icon):hover, a.ui.card:hover { border: 1px solid rgb(255 255 255 / 20%); - background: rgb(255 255 255 / 15%); + background: var(--transparency-light-15); } .repository .ui.menu { @@ -902,7 +903,7 @@ a.ui.card:hover { margin-bottom: 10px; border: 1px solid rgb(255 255 255 / .1); border-radius: 3px; - background: rgb(255 255 255 / 10%); + background: var(--transparency-light-10); } .repository.release #release-list { @@ -932,7 +933,7 @@ a.ui.card:hover { /* WIKI */ .repository.wiki.pages .ui.ui.table td.grey:not(.marked), .repository.wiki.pages .ui.ui.ui.ui.table tr.grey:not(.marked) { - background: rgb(255 255 255 / 0.08); + background: var(--transparency-light-10); ; } @@ -959,11 +960,11 @@ a.ui.card:hover { #git-graph-container #rev-list li.highlight, #git-graph-container #rev-list li.hover { - background-color: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); } #git-graph-container #rev-list li.highlight.hover { - background-color: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); } #git-graph-container li .author { @@ -1005,7 +1006,7 @@ a.ui.card:hover { } .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { - background-color: rgba(0, 0, 0, 0.15) !important; + background: var(--transparency-dark-15) !important; } .repository #commits-table.ui.table>tbody { @@ -1020,7 +1021,7 @@ a.ui.card:hover { .CodeMirror, .EasyMDEContainer .CodeMirror { border: 1px solid rgb(255 255 255 / .1); - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .CodeMirror-focused { @@ -1042,14 +1043,14 @@ a.ui.card:hover { .editor-toolbar a:hover, .editor-toolbar button.active, .editor-toolbar button:hover { - background: rgb(255 255 255 / 25%); - border-color: rgb(255 255 255 / 25%); + background: var(--transparency-light-25); + border-color: var(--transparency-light-25); } .dropzone { min-height: 150px; border: 2px solid rgba(0, 0, 0, .3); - background: rgb(255 255 255 / 25%) !important; + background: var(--transparency-light-25) !important; padding: 20px; } @@ -1078,7 +1079,7 @@ a.ui.card:hover { } .repository.view.issue .comment-list .comment .content>.header { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .repository.view.issue .comment-list .comment .content>.header .actions a { @@ -1114,7 +1115,7 @@ a.ui.card:hover { /* TABLE */ .ui.table>thead>tr>th { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @@ -1145,19 +1146,19 @@ w .ui.table>tr>td { } .repository.file.list #repo-files-table tr:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .ui.table tbody tr td.selectable:hover, .ui.ui.selectable.table>tbody>tr:hover { - background: rgb(255 255 255 / 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } /* FOOTER */ footer { - background-color: rgb(0 0 0 / 25%); - border-top: 1px solid rgb(255 255 255 / 25%); + background: var(--transparency-dark-25); + border-top: 1px solid var(--transparency-light-25); } /* BUTTONS / CHECKBOXES */ @@ -1172,7 +1173,7 @@ footer { } .ui.toggle.checkbox input:checked~label:before { - background-color: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; } .ui.toggle.checkbox input:checked~label, @@ -1182,8 +1183,8 @@ footer { .ui.toggle.checkbox label:before, .ui.toggle.checkbox input:focus:checked~label:before { - background: rgb(255 255 255 / 10%) !important; - background-color: rgb(255 255 255 / 10%) !important; + background: var(--transparency-light-10) !important; + background: var(--transparency-light-10) !important; } .ui.toggle.checkbox input:focus:checked~label, @@ -1319,7 +1320,7 @@ footer { .ui.basic.buttons .button:focus, .ui.basic.buttons .button:hover { - background: rgb(0 0 0 / 15%); + background: var(--transparency-dark-15); color: var(--button-text); } @@ -1416,7 +1417,7 @@ a.ui.labels .label:hover { .repository #commits-table td.sha .sha.label .detail.icon, .repository #repo-files-table .sha.label .detail.icon, .repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); margin: -6px -10px -4px 0; padding: 5px 4px 5px 6px; border: 0; @@ -1448,7 +1449,7 @@ input { .ui.form input[type=time], .ui.form input[type=url], .ui.form input { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border: 1px solid transparent; color: var(--text); border-radius: .28571429rem; @@ -1472,7 +1473,7 @@ input { color: var(--text); border-color: rgb(0 0 0 / 15%); border-radius: .28571429rem; - background: rgb(0 0 0 / 50%); + background: var(--transparency-dark-50); box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35); caret-color: var(--text) !important; } @@ -1481,7 +1482,7 @@ input { .ui.form textarea:focus:hover, input:focus:hover, textarea:focus:hover { - background: rgb(0 0 0 / 50%) !important; + background: var(--transparency-dark-50) !important; border-color: rgb(255 255 255 / .1) !important; color: var(--text-hover) !important; } @@ -1490,7 +1491,7 @@ textarea:focus:hover { .ui.form textarea:hover, input:hover, textarea:hover { - background: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; border-color: rgb(255 255 255 / .1) !important; color: var(--text-hover) !important; } @@ -1498,7 +1499,7 @@ textarea:hover { .ui.form textarea:focus { color: var(--text); border-color: transparent; - background: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35); -webkit-appearance: none; caret-color: var(--text) !important; @@ -1506,7 +1507,7 @@ textarea:hover { .ui.form textarea, .ui.input textarea { - background: rgb(0 0 0 / .25); + background: var(--transparency-dark-25); border: 1px solid rgba(34, 36, 38, .15); color: var(--text); caret-color: var(--text) !important; @@ -1516,14 +1517,14 @@ textarea:hover { .ui.input.focus>input, .ui.input>input:focus { border-color: transparent; - background: rgb(0 0 0 / 50%); + background: var(--transparency-dark-50); color: var(--text); box-shadow: none; caret-color: var(--text) !important; } .ui.input>input { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border: 1px solid rgba(34, 36, 38, .15); color: var(--text); } @@ -1542,17 +1543,17 @@ textarea:hover { } .markdown:not(code) table tr { - background-color: rgba(0, 0, 0, .26); + background: var(--transparency-dark-25); border-top: 1px solid #ccc; } .markdown:not(code) table tr:nth-child(2n) { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); } .markdown:not(code) code, .markdown:not(code) tt { - background-color: rgb(0 0 0 / 0.25); + background: var(--transparency-dark-25); } /* HIGHLIGHTING */ diff --git a/css/base/grafana/grafana-base.css b/css/base/grafana/grafana-base.css index a26fb18f..d22c958e 100644 --- a/css/base/grafana/grafana-base.css +++ b/css/base/grafana/grafana-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/transparent.css"); + body { color: var(--text) !important; background: var(--main-bg-color) !important; @@ -57,7 +59,7 @@ p { .page-header-canvas, .page-toolbar[class*="css-"] { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; box-shadow: none !important; border-bottom: none !important; } @@ -88,7 +90,7 @@ p { } .variable-value-dropdown.single .selected { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .css-0.gf-form-select-box__menu { @@ -109,28 +111,28 @@ p { .time-picker-calendar .react-calendar__navigation, .time-picker-calendar .react-calendar__navigation__arrow, .time-picker-calendar .react-calendar__navigation__label { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .time-picker-calendar .react-calendar__month-view__weekdays { - background-color: rgba(0, 0, 0, 0.6); + background: var(--transparency-dark-60); } .time-picker-calendar .react-calendar__tile--active, .time-picker-calendar .react-calendar__tile--active:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); border: 1px solid rgba(0, 0, 0, 0); } .time-picker-calendar .time-picker-calendar-tile:hover { -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.08); box-shadow: 0 0 4px #ffffff00; - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); border: 1px solid rgba(255, 255, 255, 0.08); } .time-picker-calendar .react-calendar__month-view__days { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } .time-picker-calendar .time-picker-calendar-tile { @@ -161,11 +163,11 @@ p { /* Configuration menu */ .card-item { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .card-item:hover { - background: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } .card-item-sub-name, @@ -180,53 +182,53 @@ p { .gf-tabs-link.active, .gf-tabs-link.active:focus, .gf-tabs-link.active:hover { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .filter-table tbody tr:nth-child(odd) { - background: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } .cta-form { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .empty-list-cta { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .layout-selector button { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text-hover); } .layout-selector button.active { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); color: var(--text-hover); } /* Configuration menu - Teams */ .css-1ph0cdx-call-to-action-card { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .grafana-info-box { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } /* sidemenu */ .sidemenu-open, .sidemenu { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .sidemenu__logo:hover { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .sidemenu-item.active, .sidemenu-item:hover { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; color: rgb(var(--accent-color)) !important; border-image: none; border-color: rgb(var(--accent-color)); @@ -279,7 +281,7 @@ p { .dropdown-menu--menu>li>a:hover, .dropdown-menu--navbar>li>a:hover, .dropdown-menu--sidemenu>li>a:hover { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover) !important; } @@ -296,7 +298,7 @@ p { } .dropdown-submenu:hover>a { - Background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .icon-circle:hover .fa:hover, @@ -356,21 +358,21 @@ p { /* Dashboard row */ .dashboard-row--collapsed { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .search-section { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); border: none; } .search-item { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15) } .search-item.selected, .search-item:hover { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .search-section__header { @@ -393,7 +395,7 @@ p { /* Dashboard settings menu */ .dashboard-settings__aside { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .dashboard-page--settings-open .navbar { @@ -421,15 +423,15 @@ p { } .gf-form-select-wrapper { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } .dashboard-settings__nav-item.active { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .gf-form-checkbox { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: none; } @@ -468,7 +470,7 @@ p { /* Variable label box */ .gf-form-label { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; border: none !important; } @@ -477,7 +479,7 @@ p { } .gf-form-label--btn:hover { - background: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; } .variable-option.highlighted, @@ -488,7 +490,7 @@ p { /* Variable dashboard dropdown */ .variable-value-link { padding: 7.4px 10px !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; border: none !important; color: var(--text-hover) !important; } @@ -521,7 +523,7 @@ p { /* NAVBAR BUTTONS */ .navbar-button { color: var(--text-hover) !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) !important; border: none !important; } @@ -533,7 +535,7 @@ p { /* PANEL BACKGROUND COLOR*/ .panel-container { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: transparent; box-shadow: none !important; } @@ -545,7 +547,7 @@ p { } .panel-header:hover { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .panel-title-text:hover { @@ -577,7 +579,7 @@ div.flot-text { /* table panel background color */ .table-panel-container { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } /* table panel border size */ @@ -588,7 +590,7 @@ div.flot-text { } .table-panel-header-bg { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-top: 2px solid transparent; border-bottom: 2px solid transparent; @@ -596,7 +598,7 @@ div.flot-text { /* Panel tables */ .css-58bavm-thead { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .css-sq6g4h-row { @@ -608,15 +610,15 @@ div.flot-text { } .css-2n373z { - border-right: 1px solid rgb(255 255 255 / 25%); + border-right: 1px solid var(--transparency-light-25); } .css-sq6g4h-row:hover { - background-color: rgb(255 255 255 / 0.08); + background-color: var(--transparency-light-10); } .css-3o5ryu { - background: rgb(0 0 0 / 45%); + background: var(--transparency-dark-45); } .css-1n8kpcb-activeTabStyle, @@ -638,12 +640,12 @@ div>.scrollbar-view>div>[class*="css-"], #reactRoot>div>div.main-view>div.css-1mwktlb>div[class*="css-"]>div[class*="css-"]>div>div.Pane.vertical.Pane1>div>div.Pane.horizontal.Pane2>div>div>div[class*="css-"], .css-v2fjpc, .css-ld7ft6 { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .tabbed-view-header { box-shadow: none; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-bottom: none; } @@ -654,28 +656,28 @@ div>.scrollbar-view>div>[class*="css-"], /* panel query settings */ .panel-editor__right, .toolbar { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .query-editor-row__header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .query-editor-row__body { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } .panel-options-group { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } .gf-form-switch { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: transparent; } .viz-picker__item { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: transparent; } @@ -687,12 +689,12 @@ div>.scrollbar-view>div>[class*="css-"], .viz-picker__item:hover { box-shadow: 0 0 6px #eb7b18 !important; - background: rgba(0, 0, 0, 0.4); + background: var(--transparency-dark-40); border: 1px solid #eb7b18 !important; } .panel-options-group__header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .custom-scrollbar .thumb-vertical, @@ -706,7 +708,7 @@ div>.scrollbar-view>div>[class*="css-"], .toolbar__main { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); border: transparent; } @@ -743,15 +745,15 @@ border-color: #b56d16 !important; }*/ .btn-inverse { - background: rgba(0, 0, 0, 0.25); - -webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3); - box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3); + background: var(--transparency-dark-25); + -webkit-box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3); + box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3); } .btn-primary, .btn-success { - -webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3); - box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3); + -webkit-box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3); + box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3); } .btn-inverse.active, @@ -760,7 +762,7 @@ border-color: #b56d16 !important; .btn-inverse:focus, .btn-inverse:hover, .btn-inverse[disabled] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* New Dashboard */ @@ -775,7 +777,7 @@ border-color: #b56d16 !important; } .add-panel__header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); box-shadow: none; border-bottom: 0px; } @@ -786,13 +788,13 @@ border-color: #b56d16 !important; } .query-type-toggle .btn.active { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); border: none; border-radius: 3px; } .toggle-button-group .btn { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); background-image: none; border-color: #00000000; border-radius: 3px !important; @@ -800,7 +802,7 @@ border-color: #b56d16 !important; } .toggle-button-group .btn:hover { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .logs-panel-options { @@ -810,7 +812,7 @@ border-color: #b56d16 !important; /* JSON Model */ .gf-code-dark { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: #e0e0e0; } @@ -929,7 +931,7 @@ input:focus { } .css-1bjepp-input-input { - background-color: hsla(0, 0%, 100%, .25); + background: var(--transparency-dark-25); border-radius: 3px; border-color: transparent; -webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important; @@ -956,7 +958,7 @@ input:focus { /*Disabled input*/ .css-1bjepp-input-input:disabled { - background-color: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); color: rgb(159, 167, 179); } @@ -1013,7 +1015,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container } .css-y0yg3l { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; border-color: transparent; } @@ -1024,18 +1026,18 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container /*Folder bars*/ .css-1umfglk { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .css-1umfglk:hover { - background: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35) } /* Login Error message*/ .css-1ow9mne-input-input { line-height: 1.5; height: 38px; - background-color: hsla(0, 0%, 100%, .25); + background: var(--transparency-dark-25); border-radius: 3px; border-color: transparent; -webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important; @@ -1059,12 +1061,12 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container /*Welcome to Grafana*/ .css-15xxblz, .css-1ld19yb { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .css-1as70ku, .css-u5zjuh { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .css-17abkeq, @@ -1088,7 +1090,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container .css-10pj50r, .css-15rfc12 { - background: rgb(0 0 0 / 50%); + background: var(--transparency-dark-50); } /*Header*/ @@ -1115,7 +1117,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container /*Query box*/ .css-hz0utb { - background: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); border-right: 1px solid rgba(0, 0, 0, 0); } @@ -1127,7 +1129,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container } .css-lvafs5 { - background: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); } .css-ui3sz4-activeTabStyle { @@ -1143,31 +1145,31 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container border-width: 0px 1px 1px; border-radius: 3px 3px 0px 0px; border-color: transparent !important; - background: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); overflow: hidden; } .css-1awj6q7-counter { - background-color: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); color: rgb(255, 255, 255); } /*Transform tab*/ .css-y2f54e { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .css-y2f54e:hover { - background: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); } .css-1e8invk::before { - background: rgba(0, 0, 0, .35) !important; + background: var(--transparency-dark-35) !important; } /* Right side menu*/ .css-1xj5tuf { - background: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); border-left: 1px solid transparent; } @@ -1192,7 +1194,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container /*Visualization*/ .css-1lemfi9 { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-color: transparent; } @@ -1235,7 +1237,7 @@ body>grafana-app>div>div>react-container>div>div.css-azp59k>div.css-1bd2u9>div>d border-style: solid; border-color: rgba(255, 255, 255, 0); border-image: initial; - background: rgba(255, 255, 255, .08) + background: var(--transparency-light-10) } input:checked+.gf-form-switch__slider { @@ -1258,7 +1260,7 @@ input:checked+.gf-form-switch__slider { /*SETTINGS*/ /*Teams*/ .css-1w9m9al-call-to-action-card { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } /*DASHBOARD SETINGS*/ @@ -1275,14 +1277,14 @@ input:checked+.gf-form-switch__slider { } .navbar--edit { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-bottom: 1px solid transparent; -webkit-box-shadow: 0 0 10px transparent; box-shadow: 0 0 10px transparent; } .grafana-info-box { - background-color: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); border-top: 3px solid rgb(var(--accent-color)); } diff --git a/css/base/grafana/organizr-dashboard.css b/css/base/grafana/organizr-dashboard.css index c7eeaea0..a175678b 100644 --- a/css/base/grafana/organizr-dashboard.css +++ b/css/base/grafana/organizr-dashboard.css @@ -34,13 +34,13 @@ div.flot-text { /* sidemenu */ .sidemenu-open .sidemenu { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .sidemenu__logo:hover { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .sidemenu-item.active, .sidemenu-item:hover { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } @media (max-width: 768px) { .sidemenu .sidemenu__logo_small_breakpoint { @@ -71,15 +71,15 @@ div.flot-text { } .search-field-wrapper>input { height: 55px !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .search-field-icon { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } /* Dashboard settings menu */ .dashboard-settings__aside { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .dashboard-page--settings-open .navbar { background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)) !important; @@ -103,14 +103,14 @@ div.flot-text { /*Datasources Menu*/ .add-data-source-item { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); -webkit-box-shadow: none; box-shadow: none; } .add-data-source-item:hover { -webkit-box-shadow: none; box-shadow: none; - background: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); border: 1px solid #00000000; color: var(--text-hover); } @@ -121,7 +121,7 @@ div.flot-text { /* Variable label box */ .gf-form-label { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; border: none !important; color: var(--text-hover); } @@ -138,7 +138,7 @@ div.flot-text { /* Variable dashboard dropdown */ .variable-value-link { padding: 7.4px 10px !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; border: none !important; color: #FFFFFF !important; } @@ -146,7 +146,7 @@ div.flot-text { /* Variable input box */ .gf-form-input { color: #FFFFFF !important; - background-color: rgba(255, 255, 255, 0.15) !important; + background: var(--transparency-light-15) !important; border: 0px solid #262628 !important; } @@ -154,7 +154,7 @@ div.flot-text { /* NAVBAR BUTTONS */ .navbar-button { color: var(--text-hover) !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important; border: none !important; } @@ -166,7 +166,7 @@ div.flot-text { /* PANEL BACKGROUND COLOR*/ .panel-container { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: transparent; box-shadow: none !important; } @@ -175,7 +175,7 @@ background-color: transparent; border: transparent; } .panel-header:hover { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .panel-loading { color: transparent; @@ -204,7 +204,7 @@ div.flot-text { /* table panel background color */ .table-panel-container { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } /* table panel border size */ .table-panel-table td { @@ -215,7 +215,7 @@ div.flot-text { /* Edit panel tabs */ .tabbed-view-header { box-shadow: none; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-bottom: none; } .tabbed-view-panel-title { @@ -242,7 +242,7 @@ div.flot-text { background: linear-gradient(135deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)); } .add-panel__header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); box-shadow: none; border-bottom: 0px; } @@ -351,7 +351,7 @@ box-shadow: none !important; } /*Disabled input*/ .css-1bjepp-input-input:disabled { - background-color: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); color: rgb(159, 167, 179); } .css-1bjepp-input-input:hover {border-color: transparent;} @@ -372,7 +372,7 @@ transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s; .css-1m6pigl:checked + label { color: var(--accent-color) !important; border-color: rgba(255, 255, 255, .1); -background: rgba(0, 0, 0, .5); +background: var(--transparency-dark-50) } .css-b40tk8:focus + label { box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important; @@ -383,7 +383,7 @@ background: var(--main-bg-color); border-color: transparent; } .css-y0yg3l { -background: rgba(0, 0, 0, .25) !important; +background: var(--transparency-dark-25) !important; border-color: transparent; } @@ -394,10 +394,10 @@ border-bottom: 1px solid rgba(0, 0, 0, 0); /*Folder bars*/ .css-1umfglk { -background: rgba(0, 0, 0, .25); +background: var(--transparency-dark-25) } .css-1umfglk:hover { -background: rgba(0, 0, 0, .35); +background: var(--transparency-dark-35) } /* Login Error message*/ @@ -424,10 +424,10 @@ margin: 10px 0px 0px; } /*Welcome to Grafana*/ -.css-15xxblz,.css-1ld19yb {background: rgba(0, 0, 0, .25);} +.css-15xxblz,.css-1ld19yb {background: var(--transparency-dark-25)} .css-1as70ku, .css-u5zjuh { -background: rgba(0, 0, 0, .25);} +background: var(--transparency-dark-25)} .css-17abkeq, .css-5ak73y { color: var(--text-hover); } @@ -454,7 +454,7 @@ background: var(--main-bg-color); } /*Query box*/ .css-hz0utb { -background: rgba(0, 0, 0, .35); +background: var(--transparency-dark-35); border-right: 1px solid rgba(0, 0, 0, 0); } .query-keyword, .css-wvxxxy, .css-fpnw35 { @@ -462,7 +462,7 @@ border-right: 1px solid rgba(0, 0, 0, 0); color: var(--accent-color); } .css-lvafs5 { - background: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); } .css-ui3sz4-activeTabStyle { @@ -478,19 +478,19 @@ border-image: initial; border-width: 0px 1px 1px; border-radius: 3px 3px 0px 0px; border-color: transparent !important; -background: rgba(0, 0, 0, .5); +background: var(--transparency-dark-50); overflow: hidden; } .css-1awj6q7-counter { -background-color: rgba(0, 0, 0, .5); +background: var(--transparency-dark-50); color: rgb(255, 255, 255); } /*Transform tab*/ .css-y2f54e { -background: rgba(0, 0, 0, .25); +background: var(--transparency-dark-25); } .css-y2f54e:hover { -background: rgba(0, 0, 0, .35); +background: var(--transparency-dark-35); } .css-1e8invk::before { background:rgba(0, 0, 0, .35) !important; @@ -498,7 +498,7 @@ background:rgba(0, 0, 0, .35) !important; /* Right side menu*/ .css-1xj5tuf { -background: rgba(0, 0, 0, .35); +background: var(--transparency-dark-35); border-left: 1px solid transparent; } /*Dropdown bottom borders*/ @@ -517,7 +517,7 @@ background: var(--accent-color); } /*Visualization*/ .css-1lemfi9 { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-color: transparent; } .css-1fsv7gr:hover > div:first-child { @@ -548,7 +548,7 @@ height: 100%; border-style: solid; border-color: rgba(255, 255, 255, 0); border-image: initial; - background: rgba(255, 255, 255, .08) + background: var(--transparency-light-10) } input:checked+.gf-form-switch__slider { background: var(--accent-color); @@ -568,7 +568,7 @@ border-color: rgba(255, 255, 255, .09); /*SETTINGS*/ /*Teams*/ .css-1w9m9al-call-to-action-card { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } @@ -577,13 +577,13 @@ border-color: rgba(255, 255, 255, .09); background: var(--main-bg-color); } .navbar--edit { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-bottom: 1px solid transparent; -webkit-box-shadow: 0 0 10px transparent; box-shadow: 0 0 10px transparent; } .grafana-info-box { -background-color: rgba(0, 0, 0, .5); +background: var(--transparency-dark-50); border-top: 3px solid var(--accent-color); } /* Variables*/ diff --git a/css/base/guacamole/guacamole-base.css b/css/base/guacamole/guacamole-base.css index 1c13fbe0..e6cb2db3 100644 --- a/css/base/guacamole/guacamole-base.css +++ b/css/base/guacamole/guacamole-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none !important; @@ -78,7 +79,7 @@ div.displayMiddle { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -90,7 +91,7 @@ div.displayMiddle { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -100,7 +101,7 @@ div.login-ui { } .login-ui div.login-dialog { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: none; } @@ -121,22 +122,22 @@ a.button:hover { } .login-ui .login-fields .labeled-field input:focus { - background: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; outline: none; } .login-ui .login-fields .labeled-field.empty input { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; outline: none; } .login-ui .login-fields .labeled-field.empty input:focus { - background: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; outline: none; } .login-ui .login-dialog .login-fields input { - background-color: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; } div.location, @@ -146,7 +147,7 @@ input[type=number], input[type=password], textarea { color: var(--text-hover) !important; - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } input[type=checkbox], @@ -162,7 +163,7 @@ textarea { /* HOME MENU */ .header h2 { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .connection .icon.vnc, @@ -246,17 +247,17 @@ table.sorted td { } .settings table.session-list tr.session:hover { - background: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } .menu-dropdown.open, .menu-dropdown.open:hover { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .menu-dropdown { border-left: none; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .menu-dropdown .menu-contents li a { @@ -269,17 +270,17 @@ table.sorted td { .menu-dropdown .menu-contents li a.current, .menu-dropdown .menu-contents li a.current:hover { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover) } .menu-dropdown .menu-contents li a:hover { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } .menu-dropdown:hover { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -300,7 +301,7 @@ table.sorted td { } .header .filter { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .filter .search-string { @@ -312,7 +313,7 @@ table.sorted td { padding-left: 2.25em !important; width: 100%; max-width: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 0; } @@ -334,12 +335,12 @@ textarea { } .recent-connections .connection:hover { - background: hsla(0, 0%, 100%, 0.08); + background: var(--transparency-dark-10); color: var(--link-color-hover); } .list-item:not(.selected) .caption:hover { - background: hsla(0, 0%, 100%, 0.07); + background: var(--transparency-dark-10); color: var(--link-color-hover); } @@ -380,7 +381,7 @@ textarea { .clipboard, .clipboard-service-target { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -419,7 +420,7 @@ textarea { } .page-tabs .page-list li a[href]:hover { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .user a:visited, @@ -452,7 +453,7 @@ input[type=number], input[type=password], textarea { border: 0; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .location-chooser .dropdown { @@ -469,14 +470,14 @@ textarea { .page-tabs .page-list li a[href].current:hover, .section-tabs li a.current, .section-tabs li a.current:hover { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); cursor: default; color: rgb(var(--accent-color)) !important; } .page-tabs .page-list li a[href]:hover, .section-tabs li a:hover { - background-color: hsla(0, 0%, 100%, 0.07); + background: var(--transparency-dark-10); color: var(--text-hover) !important; } @@ -489,7 +490,7 @@ textarea { } .manage-user .notice.read-only { - background: hsla(0, 0%, 100%, 0.07); + background: var(--transparency-dark-10); } /* DUA 2FA PAGE */ diff --git a/css/base/jackett/jackett-base.css b/css/base/jackett/jackett-base.css index 2dde7f32..bc8f42eb 100644 --- a/css/base/jackett/jackett-base.css +++ b/css/base/jackett/jackett-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none !important; @@ -73,7 +74,7 @@ hr { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -85,7 +86,7 @@ hr { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -104,7 +105,7 @@ hr { .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { color: var(--text-hover) !important; - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } @@ -122,7 +123,7 @@ hr { .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--button-text) !important; border: 1px solid transparent; - background: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { @@ -143,7 +144,7 @@ a:hover { } .dataTables_wrapper .dataTables_filter input { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); border: none; outline: none; color: var(--text-hover); @@ -168,14 +169,14 @@ table.dataTable.cell-border tbody td { button, input, textarea { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: none; outline: none; } #page { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } table.dataTable.stripe tbody tr.odd, @@ -185,7 +186,7 @@ table.dataTable.display tbody tr.odd { table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } table.dataTable tbody tr { @@ -204,13 +205,13 @@ table.dataTable thead td { .form-control { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid #ccc0; } select { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text) !important; border: 1px solid rgba(0, 0, 0, 0) !important; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); @@ -237,13 +238,13 @@ select:focus { .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .dataTables_length select, .dataTables_filter input, .dataTable.compact tfoot td select { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid rgba(204, 204, 204, 0); } @@ -304,7 +305,7 @@ fieldset[disabled] .form-control { .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .dropdown-menu>.active>a, @@ -312,7 +313,7 @@ fieldset[disabled] .form-control { .dropdown-menu>.active>a:hover { color: var(--text-hover); text-decoration: none; - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); outline: 0; } @@ -378,7 +379,7 @@ fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover { - background-color: hsla(0, 0%, 100%, 0.35); + background: var(--transparency-light-35); border-color: hsla(0, 0%, 100%, 0.35); } @@ -406,7 +407,7 @@ fieldset[disabled] .btn-primary:hover { .input-group-addon { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid #0000; } diff --git a/css/base/jellyfin/jellyfin-base.css b/css/base/jellyfin/jellyfin-base.css index 8dc1bcd2..628ac1d7 100644 --- a/css/base/jellyfin/jellyfin-base.css +++ b/css/base/jellyfin/jellyfin-base.css @@ -1,4 +1,5 @@ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --theme-primary-color: var(--accent-color); @@ -11,15 +12,15 @@ --theme-background: var(--main-bg-color); --header-blur-background: rgba(20, 20, 20, 0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); + --docked-drawer-background: var(--transparency-dark-25); --button-background: var(--button-color); - --card-background: rgba(0, 0, 0, 0.15); + --card-background: var(--transparency-dark-15); --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29, 29, 31, 0.66); --header-background: var(--theme-background); --theme-body-secondary-text-color: rgba(255, 255, 255, .6); - --line-background: rgba(255, 255, 255, .08); + --line-background: var(--transparency-light-10); --line-size: .08em; --scrollbar-thumb-background: rgba(255, 255, 255, .3); } @@ -29,9 +30,9 @@ --theme-background: var(--main-bg-color); --header-blur-background: rgba(20, 20, 20, 0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); + --docked-drawer-background: var(--transparency-dark-25); --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); + --card-background: var(--transparency-dark-15); --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29, 29, 31, 0.66); } @@ -41,9 +42,9 @@ --theme-background: var(--main-bg-color); --header-blur-background: rgba(20, 20, 20, 0.66); --drawer-background: #2C2C2E; - --docked-drawer-background: rgba(0, 0, 0, 0.25); + --docked-drawer-background: var(--transparency-dark-25); --button-background: #1f1f1f; - --card-background: rgba(0, 0, 0, 0.15); + --card-background: var(--transparency-dark-15); --footer-background: var(--modal-footer-color); --footer-blur-background: rgba(29, 29, 31, 0.66); } @@ -173,7 +174,7 @@ html { } .backgroundContainer.withBackdrop { - background-color: rgba(0, 0, 0, .83) + background: var(--transparency-dark-80) } @media not all and (min-width: 50em) { @@ -215,7 +216,7 @@ html { .emby-select-withcolor { color: inherit; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: var(--line-size) solid transparent } @@ -341,7 +342,7 @@ html { @media(hover: hover) and (pointer:fine) { .actionSheetMenuItem:hover { - background-color: rgba(255, 255, 255, .2); + background: var(--transparency-light-20); color: var(--text-hover); } } @@ -376,7 +377,7 @@ html { .detailTableBodyRow-shaded:nth-child(even) { background: #1c1c1c; - background: rgba(30, 30, 30, .9) + background: var(--transparency-dark-90) } .listItem-border { @@ -384,7 +385,7 @@ html { } .listItem-focusscale:focus { - background: rgba(54, 54, 54, .8) + background: var(--transparency-dark-80) } .listItemIcon:not(.listItemIcon-transparent) { @@ -411,7 +412,7 @@ html { .emby-input, .emby-textarea { color: inherit; - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border: var(--line-size) solid rgba(255, 255, 255, 0.1) } @@ -705,7 +706,7 @@ html { .scrollbuttoncontainer { color: var(--text-hover); - background: rgba(20, 20, 20, .5) + background: var(--transparency-dark-50) } .recordingIcon-active { diff --git a/css/base/kitana/kitana-base.css b/css/base/kitana/kitana-base.css index 9bcade69..49c84b0b 100644 --- a/css/base/kitana/kitana-base.css +++ b/css/base/kitana/kitana-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color); @@ -76,7 +77,7 @@ label { /* NAVBAR */ #nav .bg-dark { - background: hsla(0, 0%, 0%, .25) !important; + background: var(--transparency-dark-25) !important; } .navbar-dark .navbar-nav .nav-link { @@ -111,7 +112,7 @@ label { .dropdown-item:active, .dropdown:active:hover { color: var(--text-hover); - background-color: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; } .dropdown-item { @@ -122,29 +123,29 @@ label { .dropdown-item:focus { color: var(--text-hover); text-decoration: none; - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } /* CARDS */ .card { - background: rgb(255 255 255 / 8%) !important; + background: var(--transparency-light-10) !important; border: 1px solid transparent; } .card-header { color: var(--text-hover); - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border-bottom: 1px solid rgba(255, 255, 255, .125) !important; } ul li { - background-color: rgb(255 255 255 / 8%) !important; + background: var(--transparency-light-10) !important; border: none !important; } ul li:hover { - background-color: rgb(255 255 255 / 16%) !important; + background: var(--transparency-light-15) !important; border: none; } @@ -152,7 +153,7 @@ ul li:hover { .plugin_content .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--text-hover) !important; - background-color: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; border-color: #4440 #4440 transparent; } @@ -161,7 +162,7 @@ ul li:hover { } .alert-secondary { - background-color: rgb(255 255 255 / 20%); + background: var(--transparency-light-20); } /* BUTTONS */ @@ -191,20 +192,20 @@ ul li:hover { .badge-secondary { color: var(--button-text); - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } /* FORMS */ .form-control { color: var(--text) !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; border: 1px solid transparent !important; box-shadow: none !important; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus { - background-color: rgb(0 0 0 / 50%) !important; + background: var(--transparency-dark-50) !important; color: var(--text-hover) !important; } diff --git a/css/base/lazylibrarian/lazylibrarian-base.css b/css/base/lazylibrarian/lazylibrarian-base.css index 54ca6b27..813b1d16 100644 --- a/css/base/lazylibrarian/lazylibrarian-base.css +++ b/css/base/lazylibrarian/lazylibrarian-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none !important; @@ -88,7 +89,7 @@ a:hover, min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -100,7 +101,7 @@ a:hover, min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -135,7 +136,7 @@ a:hover, .navbar-default .navbar-nav>li>a:focus { color: var(--text-hover); background-image: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } /* BUTTONS */ @@ -307,7 +308,7 @@ button.close { .form-control { color: var(--text); - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); background-image: none; border: 1px solid transparent; } @@ -326,7 +327,7 @@ select.form-control:active, .configtable .input-group .form-control:active, .configtable .input-group .form-control:focus { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; background-image: none; border: 1px solid transparent; } @@ -335,7 +336,7 @@ select.form-control:active, /* TABLE */ table { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } thead { @@ -343,11 +344,11 @@ thead { } .table-striped>tbody>tr:nth-of-type(odd) { - background-color: rgba(0, 0, 0, 0.08); + background: var(--transparency-dark-10); } .table-hover>tbody>tr:hover { - background-color: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; } .table-bordered { @@ -366,7 +367,7 @@ thead { /* BOOKWALL */ .table-responsive>.table { - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10) } /* SETTINGS */ @@ -375,7 +376,7 @@ thead { .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { color: rgb(var(--accent-color)); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); border: 1px solid TRANSPARENT; border-bottom-color: transparent; cursor: default; @@ -392,7 +393,7 @@ thead { .nav>li>a:hover, .nav>li>a:focus { text-decoration: none; - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } .input-group-addon { @@ -451,6 +452,6 @@ legend { pre { color: var(--text); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid transparent; } \ No newline at end of file diff --git a/css/base/librespeed/librespeed-base.css b/css/base/librespeed/librespeed-base.css index 2401ba74..2c38406d 100644 --- a/css/base/librespeed/librespeed-base.css +++ b/css/base/librespeed/librespeed-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); html, body { @@ -104,7 +105,7 @@ a:-webkit-any-link:hover { input { font-family: "Roboto", sans-serif; color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; -webkit-rtl-ordering: logical; Font-size: 16px; padding: 10px; diff --git a/css/base/lidarr/lidarr-base.css b/css/base/lidarr/lidarr-base.css index d9dae3ef..0012a8cf 100644 --- a/css/base/lidarr/lidarr-base.css +++ b/css/base/lidarr/lidarr-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --calendar-downloading: 122 67 182; @@ -169,7 +170,7 @@ a:hover { } [class*="SelectInput-select-"] { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="SelectInput-select-"]:active, @@ -186,7 +187,7 @@ a:hover { } [class*="AutoSuggestInput-suggestionHighlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="CheckInput-primaryIsChecked-"] { @@ -202,7 +203,7 @@ a:hover { /* HEADER */ [class*="PageHeader-header-"] { - background-color: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); color: var(--text); } @@ -232,25 +233,25 @@ a:hover { } [class*="ArtistSearchInput-highlighted-"] { - background-color: hsla(0, 0%, 100%, .08) + background: var(--transparency-dark-10) } [class*"=ArtistSearchInput-artistContainer-"]::-webkit-scrollbar-thumb, [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* MINI RIGHT SCROLL BAR */ [class*="OverlayScroller-thumb-"], [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="OverlayScroller-thumb-"]:hover, [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } /* ADD NEW */ @@ -273,12 +274,12 @@ a:hover { [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { - background-color: rgba(255, 255, 255, 0.20) !important; + background: var(--transparency-light-20) !important; color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="HintedSelectInputOption-hintText-"] { @@ -314,7 +315,7 @@ a:hover { /* SIDE MENU */ [class*="PageSidebar-sidebarContainer-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="PageSidebar-sidebar-"] { @@ -337,7 +338,7 @@ a:hover { } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } @media only screen and (max-width: 768px) { @@ -385,7 +386,7 @@ a:hover { } [class*="ArtistIndexOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="ArtistIndexOverview-link-"]:hover { @@ -393,7 +394,7 @@ a:hover { } [class*="ProgressBar-container-"] { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*=".ProgressBar-purple-"] { @@ -405,7 +406,7 @@ a:hover { [class*="ArtistDetailsSeason-albumType-"], [class*="ArtistDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="ArtistDetailsSeason-header-"], @@ -456,12 +457,12 @@ a:hover { [class*="AlbumDetailsMedium-medium-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="ExtraFileTable-container-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="AlbumDetails-selectedTab-"] { @@ -470,16 +471,16 @@ a:hover { [class*="AlbumDetailsMedium-collapseButtonContainer-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="ArtistIndexProgressBar-progress-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="ArtistIndexBanner-title-"], [class*="ArtistIndexBannerInfo-info-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -580,7 +581,7 @@ a:hover { /* Table options*/ [class*="TableOptionsColumn-column-"] { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); border: none; } @@ -594,17 +595,17 @@ a:hover { } [class*="TableRow-row-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="TableRowCell-cell-"] { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid var(--transparency-light-25); } /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); } @@ -637,7 +638,7 @@ a:hover { /* POSTERS */ [class*="ArtistIndexPoster-title-"], [class*="ArtistIndexPosterInfo-info-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -665,13 +666,13 @@ a:hover { [class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:focus { - background: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover); text-decoration: none; } [class*="MenuItemSeparator-separator-"] { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* ALPHABET JUMP BAR */ @@ -685,7 +686,7 @@ a:hover { [class*="AddNewItem-searchIconContainer-"], [class*="CheckInput-isIndeterminate-"] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -708,7 +709,7 @@ a:hover { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="TagInput-input-"][class*="TagInput-isFocused-"] { @@ -741,7 +742,7 @@ a:hover { [class*="AddNewArtistSearchResult-searchResult-"]:hover, [class*="AddNewArtistSearchResult-underlay-"]:hover, [class*="AddNewAlbumSearchResult-underlay-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: inherit; text-decoration: none; } @@ -775,7 +776,7 @@ a:hover { } [class*="ImportArtistSearchResult-artist-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* IMPORT */ @@ -786,14 +787,14 @@ a:hover { [class*="ExpandingFileDetails-fileDetails-"] { border: 1px solid rgb(255 255 255 / .1); - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } /* IMPORT NEW ARTIST */ /* Drop down menu/button*/ [class*="ImportArtistSelectArtist-button-"] { border: none; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover); } @@ -806,14 +807,14 @@ a:hover { } [class*="VirtualTableRow-row-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /*Title*/ [class*="PageJumpBarItem-jumpBarItem-"]:hover { color: var(--text-hover); - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /*Posters*/ @@ -824,7 +825,7 @@ a:hover { /* FOOTER */ [class*="PageContentFooter-contentFooter-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -886,18 +887,18 @@ a:hover { } [class*="DayOfWeek-dayOfWeek-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="CalendarDay-dayOfMonth-"] { border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background-color: hsla(0, 0%, 100%, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="CalendarDay-day-"], @@ -923,7 +924,7 @@ a:hover { /* calendar agenda */ [class*="AgendaEvent-event-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* SETTINGS */ @@ -950,15 +951,15 @@ a:hover { } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"] { @@ -966,17 +967,17 @@ a:hover { } [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 2550, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 2550, 0.35); + background: var(--transparency-light-35); } /* PROFILES */ [class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } @@ -1001,12 +1002,12 @@ a:hover { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="LanguageProfileItem-languageProfileItem-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } [class*="KeyValueListInputItem-keyInput-"], @@ -1018,7 +1019,7 @@ a:hover { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { border: 1px solid transparent; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } [class*="QualityDefinitions-sizeLimitHelpText-"] { @@ -1033,7 +1034,7 @@ a:hover { [class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } @@ -1077,7 +1078,7 @@ a:hover { /* LOG */ [class*="Alert-info-"] { border-color: transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: #FFC107; } @@ -1103,12 +1104,12 @@ a:hover { /* Login Page */ .panel-body { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text); } .panel-header { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .forgot-password { @@ -1118,7 +1119,7 @@ a:hover { input[type=email], input[type=password] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -1139,7 +1140,7 @@ input[type=password] { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* Custom filter */ @@ -1148,7 +1149,7 @@ input[type=password] { } [class*="CustomFilter-customFilter-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /* -------------------------LIDARR STUFF------------------------------*/ @@ -1167,7 +1168,7 @@ input[type=password] { [class*="ArtistIndexHeader-trackProgress-"]:hover, [class*="ArtistIndexHeader-latestAlbum-"]:hover, [class*="ArtistIndexHeader-actions-"]:hover { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -1181,7 +1182,7 @@ input[type=password] { [class*="AlbumStudioAlbum-album-"], [class*="AlbumStudioAlbum-tracks-"] { border: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text-hover); } diff --git a/css/base/logarr/logarr-base.css b/css/base/logarr/logarr-base.css index a78c502b..a6974bd9 100644 --- a/css/base/logarr/logarr-base.css +++ b/css/base/logarr/logarr-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/transparent.css"); + body { font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif; background: var(--main-bg-color) !important; @@ -56,13 +58,13 @@ body { } .expand::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .2) !important; + background: var(--transparency-dark-20) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .expand::-webkit-scrollbar-thumb:hover { - background-color: hsla(0, 0%, 100%, .5) !important; + background: var(--transparency-light-50) !important; } body::-webkit-scrollbar-track { @@ -76,18 +78,18 @@ body::-webkit-scrollbar { } body::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .2) !important; + background: var(--transparency-dark-20) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } body::-webkit-scrollbar-thumb:hover { - background-color: hsla(0, 0%, 100%, .5) !important; + background: var(--transparency-light-50) !important; } .flex-child { border-radius: 0px; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); } @@ -158,7 +160,7 @@ body.fade-out { } .expandtoggle:hover { - background-color: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; } .expandtoggle:checked~.expandtoggle::before { @@ -190,7 +192,7 @@ body.fade-out { overflow: auto; transition: height 0.5s; color: rgb(255, 255, 255); - background-color: rgba(0, 0, 0, 0.3); + background: var(--transparency-dark-30); word-wrap: break-word; padding: 0 10px 0 10px; } @@ -263,55 +265,55 @@ input:valid { /* Sidebar */ #sidebar-wrapper { box-shadow: none !important; - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:hover:before { -webkit-transition: none !important; transition: none !important; - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); transition: none !important; -webkit-transition: none !important; } .sidebar-nav li:first-child a { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(2):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(3):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(4):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(5):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(6):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(7):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(8):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(9):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } #modalloading { @@ -339,7 +341,7 @@ input:valid { } #stats { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; padding-left: .0rem !important; padding-right: 1.11rem !important; box-shadow: none; @@ -403,13 +405,13 @@ input:valid { } #time { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; color: var(--text-hover) !important; box-shadow: none; } #slidertable { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; box-shadow: none; } @@ -432,14 +434,14 @@ input:valid { /*Service tile*/ .col-lg-4 { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; } .col-lg-4:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; @@ -480,7 +482,7 @@ input:valid { } #clock { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; color: var(--text-hover) !important; box-shadow: none; } @@ -497,7 +499,7 @@ input:valid { .pace, .pace-progress { - background: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; } .pace, @@ -574,7 +576,7 @@ input:valid { @media only screen and (max-width: 768px) { #dateRight { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; color: var(--text-hover) !important; box-shadow: none; } diff --git a/css/base/monitorr/monitorr-base.css b/css/base/monitorr/monitorr-base.css index 78a7868f..b7a5e1a9 100644 --- a/css/base/monitorr/monitorr-base.css +++ b/css/base/monitorr/monitorr-base.css @@ -10,6 +10,7 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/transparent.css"); #footer:after { color: var(--text-hover); @@ -41,13 +42,13 @@ body::-webkit-scrollbar { } body::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .2) !important; + background: var(--transparency-dark-20) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } body::-webkit-scrollbar-thumb:hover { - background-color: hsla(0, 0%, 100%, .5) !important; + background: var(--transparency-light-50) !important; } @@ -63,13 +64,13 @@ body::-webkit-scrollbar-thumb:hover { } #myModal3::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .2) !important; + background: var(--transparency-dark-20) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } #myModal3::-webkit-scrollbar-thumb:hover { - background-color: hsla(0, 0%, 100%, .5) !important; + background: var(--transparency-light-50) !important; } #includedContent { @@ -125,55 +126,55 @@ body::-webkit-scrollbar-thumb:hover { /* Sidebar */ #sidebar-wrapper { box-shadow: none !important; - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:hover:before { -webkit-transition: none !important; transition: none !important; - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); transition: none !important; -webkit-transition: none !important; } .sidebar-nav li:first-child a { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(2):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(3):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(4):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(5):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(6):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(7):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(8):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } .sidebar-nav li:nth-child(9):before { - background-color: rgba(0, 0, 0, 0.07); + background: var(--transparency-dark-10); } #modalloading { @@ -201,7 +202,7 @@ body::-webkit-scrollbar-thumb:hover { } #stats { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; padding-left: .0rem !important; padding-right: 1.11rem !important; box-shadow: none; @@ -263,13 +264,13 @@ body::-webkit-scrollbar-thumb:hover { } #time { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; color: var(--text-hover) !important; box-shadow: none; } #slidertable { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; box-shadow: none; } @@ -292,14 +293,14 @@ body::-webkit-scrollbar-thumb:hover { /*Service tile*/ .col-lg-4 { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; } .col-lg-4:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; @@ -340,7 +341,7 @@ body::-webkit-scrollbar-thumb:hover { } #clock { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; color: var(--text-hover) !important; box-shadow: none; } @@ -357,7 +358,7 @@ body::-webkit-scrollbar-thumb:hover { .pace, .pace-progress { - background: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; } .pace, diff --git a/css/base/monitorr/organizr-dashboard.css b/css/base/monitorr/organizr-dashboard.css index 766cbee3..207e7e6f 100644 --- a/css/base/monitorr/organizr-dashboard.css +++ b/css/base/monitorr/organizr-dashboard.css @@ -20,7 +20,7 @@ body { } #stats { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; padding-left: .0rem !important; padding-right: 1.11rem !important; box-shadow: none; @@ -60,13 +60,13 @@ body { } #time { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; color: var(--text-hover) !important; box-shadow: none; } #slidertable { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; box-shadow: none; } @@ -89,14 +89,14 @@ body { /*Service tile*/ .col-lg-4 { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; } .col-lg-4:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; margin: 1rem .1rem 1.5rem 1rem !important; width: 9rem !important; box-shadow: none; @@ -137,7 +137,7 @@ body { } #clock { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; color: var(--text-hover) !important; box-shadow: none; } @@ -154,7 +154,7 @@ body { .pace, .pace-progress { - background: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; } .pace, diff --git a/css/base/moviematch/moviematch-base.css b/css/base/moviematch/moviematch-base.css index 5beaf4f1..8fab2422 100644 --- a/css/base/moviematch/moviematch-base.css +++ b/css/base/moviematch/moviematch-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none; @@ -59,7 +60,7 @@ footer, .login-form input, input, .TextInput { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: 1px solid transparent; color: var(--text) } @@ -139,11 +140,11 @@ input:focus { } .RoomInfoBar { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } /* MENUS POPOVER */ .PopoverMenuButton:hover { - background: rgb(255 255 255 / 15%) !important; + background: var(--transparency-light-15) !important; color: var(--mm-white); } \ No newline at end of file diff --git a/css/base/mylar3/mylar3-base.css b/css/base/mylar3/mylar3-base.css index 6b3ba80e..bbf5687b 100644 --- a/css/base/mylar3/mylar3-base.css +++ b/css/base/mylar3/mylar3-base.css @@ -1,4 +1,5 @@ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none !important; @@ -240,7 +241,7 @@ table { border-collapse: collapse; border-spacing: 0; border: 1px solid rgba(255, 255, 255, 0.1) !important; - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } table th { @@ -322,8 +323,8 @@ table td a { .dataTables_filter input { - background: none repeat scroll 0 0 rgb(255 255 255 / 10%); - border: 1px solid rgb(255 255 255 / 10%); + background: none repeat scroll 0 0 var(--transparency-light-10); + border: 1px solid var(--transparency-light-10); font-size: 15px; padding: 2px 4px; color: var(--text); @@ -340,20 +341,20 @@ table.display thead th { } /* table.display tr.odd { - background-color: rgba(255, 255, 255, 0.15) !important; + background: var(--transparency-light-15) !important; } table.display tr.even { - background-color: rgba(255, 255, 255, 0.05) !important; + background: var(--transparency-light-05) !important; } */ /* DataTables row classes */ table.display tr.odd.gradeA { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } table.display tr.even.gradeA { - background-color: rgba(255, 255, 255, 0.05); + background: var(--transparency-light-05); } table.display tr.odd.gradeB { @@ -528,7 +529,7 @@ table.display_no_select tr.gradeZ td { table.display_no_select thead th { padding: 3px 18px 3px 10px; - background-color: rgba(0, 0, 0, 0.1); + background: var(--transparency-dark-10); font-weight: bold; font-size: 16px; } @@ -545,7 +546,7 @@ button { } select { - background: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); color: var(--text); } @@ -567,7 +568,7 @@ input { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; - background: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); border: none; color: var(--text); padding: 2px 4px; @@ -723,12 +724,12 @@ form .row input[type=password] { max-width: 230px; margin-right: 5px; padding: 3px 5px; - background: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } form .row input[type=text]:focus, form .row input[type=password]:focus { - background: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } form .row small { @@ -1167,7 +1168,7 @@ div#searchbar input[type=text] { margin-right: 10px; padding: 4px 5px 4px 25px; width: 150px; - background: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } div#searchbar .mini-icon { @@ -3234,7 +3235,7 @@ div.alphabetInfo { /* JQUERY UI */ .ui-tabs .ui-tabs-panel { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); border: 1px solid rgba(255, 255, 255, 0.1); } @@ -3249,7 +3250,7 @@ div.alphabetInfo { } .ui-tabs .ui-tabs-nav li { - background: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); color: var(--text); } @@ -3318,7 +3319,7 @@ body>div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-res } .wrap input { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); border-radius: 7px !important; margin-bottom: 10px; } diff --git a/css/base/netdata/netdata-base.css b/css/base/netdata/netdata-base.css index ff8714a2..11414476 100644 --- a/css/base/netdata/netdata-base.css +++ b/css/base/netdata/netdata-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body, [class*="styled__SocialMediaContainer-"] { @@ -82,14 +83,14 @@ a:hover, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover) !important; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .navbar-default, @@ -105,7 +106,7 @@ a:hover, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: var(--text-hover) !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .navbar-default .navbar-nav>li>a, @@ -118,7 +119,7 @@ a:hover, .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { - background-color: rgba(0, 0, 0, 0.15) !important; + background: var(--transparency-dark-15) !important; border: 1px solid #00000000 !important; color: rgb(var(--accent-color)); } @@ -131,7 +132,7 @@ a:hover, .nav>li>a:hover, .nav>li>a:focus { - background-color: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; } .nav-tabs>li>a:hover { @@ -143,7 +144,7 @@ a:hover, } #my-netdata-dropdown-content .agent-item:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .sign-in-btn { @@ -200,14 +201,14 @@ a:hover, } [class*="item__PanelRowContainer-"]:hover { - background: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .modal-content { @@ -250,7 +251,7 @@ a:hover, } .panel { - background: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; } .panel-default>.panel-heading { @@ -262,7 +263,7 @@ table { } .table-hover>tbody>tr:hover { - background-color: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; } .table>thead>tr>th { @@ -316,7 +317,7 @@ table { } [class*="sidebar__Wrapper-"] { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*="sidebar__Wrapper-"] [class*="flex-sc-"]:not([class*="collapsible__Animated-"]) { @@ -403,12 +404,12 @@ hr { .pagination>li>a, .pagination>li>span { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; border: 1px solid transparent !important; } .pagination>li>a:hover { - background-color: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; } /* Buttons */ diff --git a/css/base/nzbget/nzbget-base.css b/css/base/nzbget/nzbget-base.css index ae02ea89..c983419f 100644 --- a/css/base/nzbget/nzbget-base.css +++ b/css/base/nzbget/nzbget-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color); @@ -26,7 +27,7 @@ body { /* scroller */ ::-webkit-scrollbar-corner { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } ::-webkit-scrollbar { @@ -39,7 +40,7 @@ body { ::-webkit-scrollbar-thumb { -webkit-border-radius: 2px; border-radius: 2px; - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .modal-header { @@ -101,7 +102,7 @@ h6 { } .table-striped tbody tr:nth-child(odd) { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .table-striped tbody tr:nth-child(odd) td, @@ -110,40 +111,40 @@ h6 { } .table-striped tbody tr:nth-child(even) { - background-color: rgba(0, 0, 0, 0.08); + background: var(--transparency-dark-10); } .table tbody tr:hover, .table tbody tr:hover td, .table tbody tr:hover a { color: var(--text-hover); - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .table-striped tbody tr.checked:nth-child(2n+1) td, .checked .progress { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } tr.checked, tr.checked td, tr.checked:nth-child(odd) .progress { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .table tbody tr.checked:hover, .table tbody tr.checked:hover td { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .table tbody tr.checked:hover, .table tbody tr.checked:hover td { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .table.check-simple tbody tr.checked:hover, .table.check-simple tbody tr.checked:hover td { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .table th, @@ -158,12 +159,12 @@ tr.checked:nth-child(odd) .progress { .pagination a { border: none; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .pagination a:hover, .pagination .active a { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .pagination .active a { @@ -172,7 +173,7 @@ tr.checked:nth-child(odd) .progress { /* PROGRESS BAR */ .progress { - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .progress-warning.progress-striped .bar { @@ -185,7 +186,7 @@ tr.checked:nth-child(odd) .progress { .bar-text-left, .bar-text-right { - var(--text-hover); + color: var(--text-hover); } /* NAVBAR */ @@ -211,16 +212,16 @@ tr.checked:nth-child(odd) .progress { .navbar .nav>li>a:hover { color: rgb(var(--accent-color)) !important; - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .navbar .nav .active>a { - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: rgb(var(--accent-color)); } .navbar .nav .active>a:hover { - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--accent-color-hover) !important; } @@ -241,7 +242,7 @@ div.check:hover { .navbar-search .search-query { color: var(--text); - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } @@ -250,7 +251,7 @@ div.check:hover { .navbar-search .search-query.focused { color: var(--text-hover) !important; text-shadow: none; - background-color: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; } .focused .search-caret-button .caret { @@ -287,7 +288,7 @@ div.check:hover { .dropdown-menu .active>a, .dropdown-menu .active>a:hover { color: var(--text-hover); - background-color: hsla(0, 0%, 100%, .05); + background: var(--transparency-dark-05); } .dropdown-menu .divider { @@ -383,7 +384,7 @@ div.check:hover { #ConfigData>div:nth-child(4)>div>button, #ConfigData>div:nth-child(5)>div>button { text-shadow: unset; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -391,7 +392,7 @@ div.check:hover { #ConfigData>div:nth-child(4)>div>button:hover, #ConfigData>div:nth-child(5)>div>button:hover { text-shadow: unset; - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } @@ -403,18 +404,18 @@ div.check:hover { } #ConfigData input.btn { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; text-shadow: unset; color: #a8a8a8; } #Config_ViewButton { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text-hover); } #Config_ViewButton:hover { - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } @@ -450,7 +451,7 @@ div.check:hover { } .config-header .btn { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .btn-group.open .btn.dropdown-toggle { @@ -472,7 +473,7 @@ div.check:hover { input, textarea, .uneditable-input { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; color: var(--text) !important; border: transparent; } @@ -480,13 +481,13 @@ textarea, input:focus:not(.btn), textarea:focus, .uneditable-input:focus { - background: rgba(255, 255, 255, 0.10) !important; + background: var(--transparency-light-10) !important; color: var(--text-hover) !important; border: transparent; } select { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid #00000000; color: var(--text) } @@ -521,7 +522,7 @@ textarea:focus { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border: 0px; - background-color: hsla(0, 0%, 100%, .05); + background: var(--transparency-dark-05); text-shadow: unset; color: var(--text-hover); text-transform: capitalize; @@ -566,12 +567,12 @@ label { text-shadow: 0 -1px 0 rgb(0 0 0 / 25%); white-space: nowrap; vertical-align: baseline; - background-color: rgb(255 255 255 / 25%); + background-color: var(--transparency-light-25); } #ConfigNav { border: 1px solid rgba(0, 0, 0, .25); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } #ConfigNav.nav-list a { @@ -598,7 +599,7 @@ label { } .nav>li>a:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover) !important; } @@ -625,7 +626,7 @@ span.help-option-title { .input-prepend .add-on, .input-append .add-on { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); background-image: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -640,7 +641,7 @@ span.help-option-title { } .config-settitle { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-bottom: none; } diff --git a/css/base/nzbhydra2/nzbhydra2-base.css b/css/base/nzbhydra2/nzbhydra2-base.css index 5ba98cb9..2dc21f09 100644 --- a/css/base/nzbhydra2/nzbhydra2-base.css +++ b/css/base/nzbhydra2/nzbhydra2-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body, html { @@ -40,7 +41,7 @@ a:hover { } .navbar-default { - background-color: rgba(0, 0, 0, 0.6); + background: var(--transparency-dark-60); border-color: transparent; } @@ -48,13 +49,13 @@ a:hover { .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: rgb(var(--accent-color)); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .navbar-default .navbar-nav>li>a { @@ -87,7 +88,7 @@ a:hover { .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { color: rgb(var(--accent-color)); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid #1a1f2000; border-bottom-color: transparent; } @@ -99,7 +100,7 @@ a:hover { .nav>li>a:focus, .nav>li>a:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .nav-tabs>li>a { @@ -284,7 +285,7 @@ h6 { .dropdown-menu>li>a:hover { text-decoration: none; color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } .history-title { @@ -299,7 +300,7 @@ h6 { .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default { color: var(--text-muted); - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { @@ -334,13 +335,13 @@ h6 { .form-control { border: 1px solid transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .form-control:focus { border-color: rgba(255, 255, 255, 0); - background: rgba(0, 0, 0, 0.35); + background: var(--transparency-dark-35); outline: 0; -webkit-box-shadow: none; box-shadow: none; @@ -353,19 +354,19 @@ select.form-control:focus { /* .input-group-addon { outline: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid transparent; } */ /* Categories */ .panel { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid transparent; } .repeatsection { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); box-shadow: 0 0 4px 1px transparent; } @@ -416,19 +417,19 @@ hr { } .well { - background-color: hsla(0, 0%, 0%, 0.45); + background-color: var(--transparency-dark-45); border: 1px solid #00000000; } /* Updates */ .alert-warning { - background: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); border-color: transparent; color: var(--text-hover); } .panel-default>.panel-heading { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .panel-default>.panel-heading { @@ -437,13 +438,13 @@ hr { } .list-group-item { - background-color: rgba(0, 0, 0, 0.08); + background: var(--transparency-dark-10); border: 1px solid rgba(255, 255, 255, 0.1); } /* Table */ table { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .table>thead>tr>th { @@ -461,7 +462,7 @@ table { } .table-hover>tbody>tr:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .search-result-tbody { @@ -469,7 +470,7 @@ table { } pre { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); border: 1px solid transparent; } @@ -492,7 +493,7 @@ body>div>div.center-form.panel.col-md-8>div>form>button:active { /* SEARCH */ .search-results-table { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border: 1px solid rgba(255, 255, 255, 0.1); } @@ -547,7 +548,7 @@ body>div>div.center-form.panel.col-md-8>div>form>button:active { .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { color: var(--text-muted); - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); border-color: rgba(255, 255, 255, .1); cursor: not-allowed } diff --git a/css/base/ombi/ombi-base.css b/css/base/ombi/ombi-base.css index fb0a7c7d..2a3be240 100644 --- a/css/base/ombi/ombi-base.css +++ b/css/base/ombi/ombi-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none !important; @@ -39,7 +40,7 @@ html, body, .wizard-background, .content-container, #main-container\ dark > mat- .container-alert { color: var(--text-hover); - background-color: rgb(0 0 0 / 50%) !important; + background: var(--transparency-dark-50) !important; border-color: rgb(var(--accent-color)) !important; } @@ -83,7 +84,7 @@ a:hover { /* 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); + background: var(--transparency-dark-45); } /* Drop down menu */ @@ -104,7 +105,7 @@ a:hover { } .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { - background: hsl(0deg 0% 0% / 25%); + background: var(--transparency-dark-25); } #main-container\ dark > mat-sidenav-container > mat-sidenav-content > mat-toolbar > button { color: rgb(var(--accent-color)); @@ -125,7 +126,7 @@ a:hover { @media (min-width: 768px) { .sidenav-container .sidenav { - background: hsla(0, 0%, 0%, 0.438) !important; + background: var(--transparency-dark-45) !important; } } @@ -143,7 +144,7 @@ a:hover { } .mat-drawer-backdrop.mat-drawer-shown { - background-color: hsl(0deg 0% 0% / 50%); + background: var(--transparency-dark-50); backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } @@ -163,7 +164,7 @@ a:hover { .sidenav-container .sidenav .active-list-item, .sidenav-container .sidenav .active-list-item:hover { color: rgb(var(--accent-color)) !important; - background: rgb(255 255 255 / 15%) !important; + background: var(--transparency-light-15) !important; border-radius: .375rem !important; padding: 10px 20px; height: auto; @@ -229,7 +230,7 @@ a:hover { /* DISCOVER PAGE */ .discover-filter-buttons-group { - background: rgb(255 255 255 / 8%) !important; + background: var(--transparency-light-10) !important; border: 1px solid rgb(255 255 255 / 10%) !important; border-radius: 30px; color: var(--text-hover); @@ -238,7 +239,7 @@ a:hover { } .discover-filter-buttons-group .button-active { - background: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; } #search-filter{ @@ -273,7 +274,7 @@ a:hover { /* MOBILE */ @media (min-width: 768px) { .sidenav-container .sidenav { - background: hsla(0, 0%, 0%, 0.438) !important; + background: var(--transparency-dark-45) !important; } } @@ -339,7 +340,7 @@ a:hover { top: -1px !important; position: absolute; border-radius: .75rem .75rem 0 0 !important; - background-color: rgba(0, 0, 0, 0.7) !important; + background-color: var(--transparency-dark-70) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; transition: 0s -webkit-filter linear; @@ -378,7 +379,7 @@ a:hover { } .btn-ombi { - background-color: rgba(0, 0, 0, 0.85) !important; + background-color: var(--transparency-dark-85) !important; /* backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; */ border-radius: .375rem !important; @@ -439,7 +440,7 @@ a:hover { small.important { color: red; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-radius: 5px; padding: 5px; } @@ -645,17 +646,17 @@ mat-row { .mat-paginator, .mat-table { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } tr.mat-header-row { - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-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%); + border-bottom: 2px solid var(--transparency-light-25); + border-top: 1px solid var(--transparency-light-25); } /* Details page */ @@ -735,7 +736,7 @@ hr { /* ADVANCED SEARCH MODAL */ .alert-info { - background: rgba(255, 255, 255, .25) !important; + background: var(--transparency-light-25) !important; border-color: rgba(255, 255, 255, .1) !important; color: var(--text-hover) !important; } \ No newline at end of file diff --git a/css/base/organizr/organizr-base.css b/css/base/organizr/organizr-base.css index 9458395a..40449ba2 100644 --- a/css/base/organizr/organizr-base.css +++ b/css/base/organizr/organizr-base.css @@ -1,5 +1,6 @@ @import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900); @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); /*Theme Colors*/ /*bootstrap Color*/ /*Normal Color*/ @@ -258,10 +259,10 @@ h6 { /* settings */ /* header*/ [id*="settings-"]>div>div.panel-heading:not(form > div > div.panel-heading) { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } [id*="settings-"]>div>div.panel-heading .bg-org:not(form > div > div.panel-heading) { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } #account-area > div > div > div > div, @@ -279,7 +280,7 @@ h6 { #homepage-Deluge-form > fieldset > div > div.panel-wrapper.collapse.in > div > div > div > div.tab-pane.fade.in.active > div > div > div > div > div > div > div { - background: rgba(0, 0, 0, .1); + background: var(--transparency-dark-10) } /* Homepage Item Modals*/ @@ -289,15 +290,15 @@ h6 { [id$="FYI"] > div > div > div > div > div > div > div, #\39 w59f92rirFYI > div > div > div > div > div > div > div, [id$="Setup"] > div > div > div > div > div { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } [id*="settings-"] .panel { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } #customize-appearance-form>ul>li.active>a { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } #settings-main-system-settings { @@ -320,33 +321,33 @@ select.form-control:focus { .form-material .form-control:focus, .form-control:focus { - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); border: 1px solid rgba(255, 255, 255, 0.1); } .form-material .form-control, .form-control { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-radius: 3px; } #githubVersions .bg-org { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } /* Ace editor stuff */ .ace-idle-fingers { - background-color: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover) !important; } .ace-idle-fingers .ace_marker-layer .ace_active-line { - background: rgba(255, 255, 255, 0.15) !important; + background: var(--transparency-light-15) !important; } .ace-idle-fingers .ace_gutter { - background: rgb(255 255 255 / 10%) !important; + background: var(--transparency-light-10) !important; color: var(--text-hover) !important; } @@ -381,7 +382,7 @@ pre { #loginLogTable>tbody>.even, #organizrLogTable>tbody>.even { - background: rgba(255, 255, 255, 0.10); + background: var(--transparency-light-10); } .dataTables_wrapper .dataTables_paginate .paginate_button.current, @@ -431,7 +432,7 @@ pre { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -443,7 +444,7 @@ pre { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -478,7 +479,7 @@ th.jsgrid-control-field.jsgrid-align-center { .jsGrid-Users, .jsgrid-header-sort-desc, .jsgrid-header-sort-asc { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } tr.jsgrid-header-row th { @@ -494,14 +495,14 @@ tr.jsgrid-header-row th { .jsgrid-filter-row>td, .jsgrid-header-sortable:hover { - background: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; color: var(--text-hover) !important; } /* Calendar */ #calendar .fc-content-skeleton>table>thead>tr { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15) } .fc-event:not(.homepage-drag), @@ -526,12 +527,12 @@ tr.jsgrid-header-row th { .fc-unthemed .fc-row, .fc-unthemed .fc-popover { border-color: transparent; - background: rgba(0, 0, 0, 0.05); + background: var(--transparency-dark-05) } .bg-theme, .fc-day-header { - background: rgba(0, 0, 0, .3) !important; + background: var(--transparency-dark-30) !important; } .bg-theme, @@ -543,15 +544,15 @@ tr.jsgrid-header-row th { .fc th.fc-wed, .fc th.fc-fri, .fc-button { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } th.fc-day-header.fc-widget-header.fc-today { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .fc-widget-content.fc-today { - background-color: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } .fc-popover { @@ -609,7 +610,7 @@ th.fc-day-header.fc-widget-header.fc-today { #lockScreen .white-box { width: 100% !important; height: 100% !important; - background: rgb(0 0 0 / 45%) !important; + background: var(--transparency-dark-45) !important; margin-top: auto !important; border-radius: 0px !important; } @@ -651,7 +652,7 @@ th.fc-day-header.fc-widget-header.fc-today { } .blockMsg { - background: rgba(0, 0, 0, 0.9) !important; + background: var(--transparency-dark-90) !important; border: none !important; } @@ -682,7 +683,7 @@ label[for="checkbox-login"]:hover { #recoverform>div:nth-child(3)>div>button, #leave-recover, #form-lockscreen>div.form-group.text-center>div>button { - background: rgb(255 255 255 / 15%) !important; + background: var(--transparency-light-15) !important; color: var(--text) !important; border-radius: 25px; border: none; @@ -693,7 +694,7 @@ label[for="checkbox-login"]:hover { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); border-radius: 15px; - background-color: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text-hover) !important; @@ -729,7 +730,7 @@ label[for="checkbox-login"]:hover { /*2FA login button*/ .panel-wrapper .panel-body>.btn-warning, .btn-warning.disabled { - background: hsla(0, 0%, 0%, 0.25) !important; + background: var(--transparency-dark-25) !important; border: 1px solid #ffc36d00 !important; } @@ -738,7 +739,7 @@ label[for="checkbox-login"]:hover { .panel-yellow .panel-heading { color: var(--text-hover); border-radius: 3px; - background-color: rgba(0, 0, 0, 0.3); + background: var(--transparency-dark-30); border-color: #00000000; } @@ -790,7 +791,7 @@ label[for="checkbox-login"]:hover { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); border-radius: 15px; - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @@ -813,7 +814,7 @@ label[for="checkbox-login"]:hover { @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { #splashScreen { overflow-y: scroll; - background: rgb(0 0 0 / 80%) !important; + background: var(--transparency-dark-80) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @@ -824,7 +825,7 @@ label[for="checkbox-login"]:hover { @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { #splashScreen { overflow-y: scroll; - background: rgb(0 0 0 / 90%) !important; + background: var(--transparency-dark-90) !important; } } @@ -979,7 +980,7 @@ label[for="checkbox-login"]:hover { } .bg-success.text-inverse { - background-color: rgba(255, 255, 255, 0.15) !important; + background: var(--transparency-light-15) !important; color: var(--text-hover); } @@ -1062,7 +1063,7 @@ label[for="checkbox-login"]:hover { /* Homepage Now playing card */ .nowPlayingItem>.white-box>.el-card-item { - background: rgba(0, 0, 0, 0.15) !important; + background: var(--transparency-dark-15) !important; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); } @@ -1156,7 +1157,7 @@ label[for="checkbox-login"]:hover { #homepageOrderdownloader .nav-tabs>li.active>a:hover, #homepageOrderdownloader .nav-tabs>li.active:hover { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; opacity: 1; } @@ -1191,7 +1192,7 @@ label[for="checkbox-login"]:hover { } .fc-button:hover { - background: rgba(255, 255, 255, .08) !important; + background: var(--transparency-light-10) !important; } .fc-button { @@ -1413,13 +1414,13 @@ a:hover, .progress-bar-inverse, .progress { - background: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } /* Homepage health checks */ @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .bg-inverse .healthPosition { - background: rgba(255, 255, 255, 0.2) !important; + background: var(--transparency-light-20) !important; -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border-radius: 3px; @@ -1447,7 +1448,7 @@ a:hover, } #homepageOrderhealthchecks .card-body { - background: rgba(255, 255, 255, 0.2); + background: var(--transparency-light-20); } .card, @@ -1466,7 +1467,7 @@ a:hover, /* Homepage Tautulli Cards*/ #homepageOrdertautulli .library-card .card-body, #homepageOrdertautulli div:nth-child(8) .card-body { - background: rgba(255, 255, 255, .2); + background: var(--transparency-light-20) } .homepage-tautulli-card .cardCountType { @@ -1493,12 +1494,12 @@ a:hover, } .unifiCards .panel-wrapper.collapse.in { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15) } /* Homepage Monitor Cards */ #homepageOrderMonitorr .card-body { - background: rgba(255, 255, 255, 0.2); + background: var(--transparency-light-20); } #homepageOrderMonitorr .col-lg-2 { @@ -1519,11 +1520,11 @@ a:hover, /*Homepage WeatherAndAir Cards*/ #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a { - background: rgba(0, 0, 0, .2); + background: var(--transparency-dark-20); } .health-and-pollutant-section .content-current { - background: rgba(255, 255, 255, .2); + background: var(--transparency-light-20) } #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a::after { @@ -1539,13 +1540,13 @@ a:hover, } #homepageOrderWeatherAndAir .white-box { - background: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); border-radius: 3px; } /*Homepage Speedtest Cards*/ #allSpeedtest .speedtest-card { - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); } #allSpeedtest .speedtest-card .text-muted, @@ -1597,7 +1598,7 @@ body > div.swal-overlay.swal-overlay--show-modal > div { #user-list-div .ms-container .ms-selectable, #user-list-div .ms-container .ms-selection { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); color: var(--text); } @@ -1714,7 +1715,7 @@ body { .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } /*Right panel*/ @@ -1747,7 +1748,7 @@ background: rgb(0 0 0 / 0%) !important; } .sidebar { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); box-shadow: 1px 0px 20px rgb(0 0 0 / 20%); } @@ -2271,7 +2272,7 @@ fieldset[disabled] .form-control { .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .asColorPicker-dropdown, @@ -2417,14 +2418,14 @@ pre, select, table.dataTable.display tbody tr.odd, table.dataTable.stripe tbody tr.odd { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15) } input:focus:not(select), input:active:not(select), .form-control:focus:not(select), .form-control:active:not(select) { - background: rgba(0, 0, 0, 0.445); + background: var(--transparency-dark-45); border: 1px solid rgba(120, 130, 140, 0.4); } @@ -2505,7 +2506,7 @@ span.select2-results { } */ .panel-blue .panel-heading, .panel-info .panel-heading, #help-modal-body > div > div { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } #account-area > div > div > div > div > div.panel-wrapper.collapse.in.main-email-panel > div > div > div > div > div, #plexRecent > div.col-lg-12 > div, diff --git a/css/base/overseerr/overseerr-base.css b/css/base/overseerr/overseerr-base.css index a4df0b06..bcabaaa9 100644 --- a/css/base/overseerr/overseerr-base.css +++ b/css/base/overseerr/overseerr-base.css @@ -1,4 +1,5 @@ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); /* TEXT */ [class*="text-gray-"]:not(button:disabled):not(button) { @@ -125,7 +126,7 @@ input[type=text], select, textarea { border-color: rgba(255, 255, 255, .1); - background-color: rgba(7, 7, 7, .25); + background: var(--transparency-dark-25); color: var(--text); } @@ -157,7 +158,7 @@ span.bg-indigo-500 { .react-select-container .react-select__control { border-color: rgba(255, 255, 255, 0.1) !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; color: var(--text) !important; } @@ -167,7 +168,7 @@ span.bg-indigo-500 { } .react-select-container .react-select__option--is-focused { - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); color: var(--text-hover) } @@ -218,7 +219,7 @@ body { } #search_field { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } @@ -301,11 +302,11 @@ body>div.z-50.fixed.inset-0.overflow-hidden.bg-opacity-70.bg-gray-800.enter-done } body>div.z-50.fixed.inset-0.overflow-hidden.bg-opacity-70.bg-gray-800.enter-done>div>section>div>div>div>div.overflow-hidden.bg-gray-600.rounded-md.shadow { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } #__next>div>div.fixed.top-0.bottom-0.left-0.z-30.hidden.lg\:flex.lg\:flex-shrink-0>div>div>div>div.px-2>a { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } /* LOADER */ @@ -372,7 +373,7 @@ a.slider-title:hover { .media-facts { border-color: rgba(255, 255, 255, 0.1); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text-hover) !important; --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); @@ -424,7 +425,7 @@ a.slider-title:hover { /* SETTINGS */ code { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-6>div.hidden.overflow-x-scroll.border-b.border-gray-600.sm\:block.hide-scrollbar>nav>a.px-1.py-4.ml-8.text-sm.font-medium.leading-5.transition.duration-300.border-b-2.border-transparent.whitespace-nowrap.first\:ml-0.text-indigo-500.border-indigo-600 { @@ -432,7 +433,7 @@ code { } #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-10.text-white>div>ul>li>div { - background: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); border-color: rgba(255, 255, 255, 0.1); } @@ -484,7 +485,7 @@ code { table>thead>tr>th, #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-10.text-white>div>div.flex.flex-col>div>div>div>table>tbody>tr.bg-gray-700, #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div>div>div>table>tbody>tr.bg-gray-700 { - background: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; border-color: rgba(255, 255, 255, 0.1); } @@ -516,7 +517,7 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent } body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-center.w-full.h-full.bg-gray-800.bg-opacity-70>div>div.relative.mt-4.text-sm.leading-5.text-gray-300>div.flex.flex-col>div>div>div>table>tbody { - background: rgb(255, 255, 255, .1); + background: var(--transparency-light-10); } @@ -529,7 +530,7 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent } #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div.media-header>div.media-actions>span>span>div>div>div>a:hover { - background: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } @@ -537,13 +538,13 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent background: var(--drop-down-menu-bg); } [aria-labelledby="user-menu"] a:hover{ - background-color: rgba(255, 255, 255, 0.05); + background: var(--transparency-light-05); } /* LOGIN */ #__next>div>div.relative.z-50.mt-8.sm\:mx-auto.sm\:w-full.sm\:max-w-md>div>button, #__next>div>div.relative.z-50.mt-8.sm\:mx-auto.sm\:w-full.sm\:max-w-md>div>div:nth-child(3)>button { - background: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } /* TOAST */ diff --git a/css/base/petio/petio-base.css b/css/base/petio/petio-base.css index 6539a661..7fec4649 100644 --- a/css/base/petio/petio-base.css +++ b/css/base/petio/petio-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none; @@ -81,7 +82,7 @@ h6, /* MENU */ .menu { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } @media (max-width: 1099.98px) { @@ -101,7 +102,7 @@ h6, @media (min-width: 1100px) { .page .sidebar { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } } @@ -205,12 +206,12 @@ p a:hover, /* OTHER */ .widget--item hr { - background: rgb(255 255 255 / 50%); + background: var(--transparency-light-50); } .widget--item--inner, .sr--instance--inner { - background: hsl(0deg 0% 0% / 15%); + background: var(--transparency-dark-15); } .filter--add:hover { @@ -224,7 +225,7 @@ p a:hover, } .filter--item { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .spinner svg { @@ -257,7 +258,7 @@ code { .color-blue, .color-red { /* Ratings */ - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border-radius: 5px; padding: 0px 7px; } @@ -406,7 +407,7 @@ code { thead { color: var(--text-hover); - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .generic-table tr:not(.child):not(.sub) th:nth-child(odd), @@ -448,7 +449,7 @@ input[type=checkbox]:checked:after { input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus { border-bottom: 2px solid rgb(var(--accent-color)); - background: rgba(255, 255, 255, .2); + background: var(--transparency-light-20); color: var(--text-hover) } @@ -456,18 +457,18 @@ input:not([type=checkbox]):not(.styled-input--input):not([type=file]), .login-wrap input { border-bottom: 2px solid rgba(0, 0, 0, 0); color: var(--text); - background: rgb(255 255 255 / 10%); + background: var(--transparency-light-10); } .search-form input:focus { - background: hsla(0, 0%, 100%, .1) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover) !important; border-bottom: 2px solid rgba(0, 0, 0, 0) !important; } /* CALENDAR */ .rbc-show-more { - background-color: hsl(0deg 0% 0% / 25%); + background: var(--transparency-dark-25); } .rbc-day-bg.rbc-today { diff --git a/css/base/pihole/pihole-base.css b/css/base/pihole/pihole-base.css index 128aa3d0..773dddc8 100644 --- a/css/base/pihole/pihole-base.css +++ b/css/base/pihole/pihole-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color) !important; @@ -41,7 +42,7 @@ .treeview-menu>li.active>a, .treeview-menu>li>a:hover { color: var(--text-hover); - background: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } .h1, @@ -106,7 +107,7 @@ padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, .25); border-top: 1px solid rgba(255, 255, 255, .25); - background-color: rgba(255, 255, 255, .2) !important; + background: var(--transparency-light-20) !important; } .navbar-nav>.user-menu>.dropdown-menu>.user-body a { @@ -122,24 +123,24 @@ .skin-blue .main-header .logo, .main-header .navbar, .main-header .logo { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .skin-blue .main-header .logo:hover, .skin-blue .main-header .navbar .sidebar-toggle:hover, .sidebar-menu>li:hover>a { - background-color: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); color: var(--text-hover) !important; } .sidebar-menu>li.active>a { - background-color: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); color: rgb(var(--accent-color)) !important; } /* Footer */ .main-footer { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); border-top: 1px solid rgb(255 255 255 / 20%); } @@ -161,13 +162,13 @@ .wrapper, .main-sidebar, .left-side { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .skin-blue .sidebar-menu>li.header, .sidebar-menu>li.header { color: rgb(var(--accent-color)); - background: rgba(0, 0, 0, .2); + background: var(--transparency-dark-20); } .treeview-menu>li>a { @@ -175,7 +176,7 @@ } .sidebar-menu>li>.treeview-menu { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } /* Menus */ @@ -184,12 +185,12 @@ .sidebar-menu>li:hover>a, .sidebar-menu>li.active>a { color: var(--text-hover); - background: rgba(0, 0, 0, .1); + background: var(--transparency-dark-10); border-left-color: rgb(var(--accent-color)); } .skin-blue .sidebar-menu>li>.treeview-menu { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .skin-blue .treeview-menu>li>a { @@ -233,18 +234,18 @@ .main-footer .nav-tabs, .nav-tabs-custom .nav-tabs { - background-color: rgb(0 0 0 / 0.25); + background: var(--transparency-dark-25); border-bottom-color: rgb(255 255 255 / 15%); } .nav-tabs-custom>.nav-tabs>li:hover { - background-color: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); color: var(--text-hover); border-top-color: rgb(var(--accent-color)); } .nav-tabs-custom>.nav-tabs>li:hover>a { - background-color: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); } /* Dashboard */ @@ -254,14 +255,14 @@ } .box { - background: rgba(0, 0, 0, .24); + background: var(--transparency-dark-25); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } .box-solid>.box-header, .box>.box-header { color: var(--text); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } /* Total queries box*/ @@ -290,7 +291,7 @@ } .table-bordered { - background: rgba(0, 0, 0, .1); + background: var(--transparency-dark-10) } .table-bordered>thead>tr>th, @@ -303,7 +304,7 @@ } .table-striped>tbody>tr:nth-of-type(odd) { - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); } /* Query Log */ @@ -354,7 +355,7 @@ /* Login */ .panel-default { border-color: transparent; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .panel-default>.panel-heading { @@ -366,7 +367,7 @@ .panel, .panel-body, .panel-default>.panel-heading { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border-radius: 0px; border: 1px solid transparent; color: var(--text); @@ -374,7 +375,7 @@ /* Blacklist */ .nav-tabs-custom { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .nav-tabs-custom>.tab-content { @@ -393,7 +394,7 @@ .nav-tabs-custom>.nav-tabs>li.active>a, .nav-tabs-custom>.nav-tabs>li.active:hover>a { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: rgb(var(--accent-color)) !important; } @@ -411,11 +412,11 @@ /* Network */ .table-striped>tbody>tr:nth-of-type(odd) { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .table-striped>tbody>tr:nth-of-type(even) { - background-color: rgba(0, 0, 0, .5) !important; + background: var(--transparency-dark-50) !important; } #network-entries_wrapper.text-center { @@ -504,13 +505,13 @@ pre, .box-footer, .datatables_processing { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); } .dataTables_wrapper input[type="search"] { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -529,7 +530,7 @@ .daterangepicker select.ampmselect, .form-control, div.dataTables_wrapper div.dataTables_length select { - background-color: rgb(0 0 0 / 0.25); + background: var(--transparency-dark-25); color: var(--text); border: 1px solid rgb(255 255 255 / 15%); } @@ -568,7 +569,7 @@ min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -587,6 +588,6 @@ min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } \ No newline at end of file diff --git a/css/base/plex/plex-base.css b/css/base/plex/plex-base.css index 610f0a6e..a2ec7766 100644 --- a/css/base/plex/plex-base.css +++ b/css/base/plex/plex-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none; @@ -141,7 +142,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] { } [class*="BottomBar-bottomBar-"] { - background-color: rgb(0 0 0 / 70%); + background: var(--transparency-dark-70); box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%); } @@ -157,7 +158,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] { [class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"], [class*="SourceSidebar-sidebar-"] { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } [class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] { @@ -176,7 +177,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] { background: var(--header-blur-background); -webkit-backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em); - background-color: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); } } @@ -204,7 +205,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] { /* NAVBAR */ [class*="NavBar-container-"] { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="NavBarActivityButton-isHighlighted-"] [class*="NavBarActivityButton-activityIcon-"] { @@ -520,13 +521,13 @@ circle { .modal-body-with-panes .modal-nav-pane { background-image: none; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } .well, .files ul li { color: var(--text); - background-color: rgb(0 0 0 / 10%); + background: var(--transparency-dark-10); border: 1px solid transparent; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); @@ -534,7 +535,7 @@ circle { .edit-section-modal .wizard-blocks-group>.wizard-block.selectable:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); } .edit-section-modal .wizard-blocks-group>.wizard-block.selectable { @@ -611,7 +612,7 @@ fieldset[disabled] .btn-primary:hover { .edit-lock-addon { color: var(--button-color-hover); - background-color: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); border-color: transparent; -webkit-box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%); box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%); @@ -712,11 +713,11 @@ hr { [class*="DirectoryListTableHeader-tableHeaderCell-"], [class*="DirectoryListTableHeader-columnMenuButton-"] { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } a>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover, button>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover, [class*="DirectoryListTableHeader-columnMenuButton-"]:hover { - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } \ No newline at end of file diff --git a/css/base/plpp/plpp-base.css b/css/base/plpp/plpp-base.css index 0edf3862..1db10139 100644 --- a/css/base/plpp/plpp-base.css +++ b/css/base/plpp/plpp-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/transparent.css"); + body { background: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; @@ -57,7 +59,7 @@ body { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -69,7 +71,7 @@ body { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -78,12 +80,12 @@ legend { } .navbar-inverse { - background-color: rgba(0, 0, 0, 0.6); + background: var(--transparency-dark-60); border-color: transparent; } .side-nav { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } .navbar-inverse .navbar-nav>li>a { @@ -92,7 +94,7 @@ legend { .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .nav>li.selected>a { @@ -139,7 +141,7 @@ legend { .plpp_table.even:hover, .plpp_table.odd:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } .panel-heading { @@ -204,7 +206,7 @@ div.plpp_slider { } table { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } table, @@ -229,7 +231,7 @@ table, .pagination>li>a, .pagination>li>span { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: transparent; } @@ -240,7 +242,7 @@ table, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus { color: #BDBDBD; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: transparent; cursor: not-allowed; } diff --git a/css/base/portainer/portainer-base.css b/css/base/portainer/portainer-base.css index 3d8baaa4..c5ae15e0 100644 --- a/css/base/portainer/portainer-base.css +++ b/css/base/portainer/portainer-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --text-json-tree-branch-preview-color: var(--text); @@ -47,7 +48,7 @@ min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -59,7 +60,7 @@ min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -127,7 +128,7 @@ ul.sidebar .sidebar-list a { /* NEWS */ .motd-body { - background-color: rgba(255, 255, 255, 0.15) !important; + background: var(--transparency-light-15) !important; } /* LOGIN */ @@ -148,16 +149,16 @@ ul.sidebar .sidebar-list a { /* SIDEBAR */ #sidebar-wrapper { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .sidebar-header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } ul.sidebar .sidebar-list a.active { color: rgb(var(--accent-color)); - background: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); border-left: 3px solid rgb(var(--accent-color)); } @@ -165,7 +166,7 @@ ul.sidebar .sidebar-list a.active { .sidebar-footer, ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active), ul.sidebar .sidebar-main a { - background: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); color: var(--text-hover); } @@ -180,7 +181,7 @@ ul.sidebar .sidebar-title { ul.sidebar .sidebar-list .sidebar-sublist a.active { border-left: 3px solid rgb(var(--accent-color)); - background: rgba(255, 255, 255, .08); + background: var(--transparency-light-10) } ul.sidebar .sidebar-title { @@ -201,33 +202,33 @@ ul.sidebar .sidebar-title { /* WIDGETS */ .widget { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-color: transparent; } .widget .widget-body table thead { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .widget .widget-header { color: var(--text-hover); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-bottom: 1px solid transparent; } /* DATATABLES */ .datatable .toolBar { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .datatable .footer { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text); } .blocklist-item--selected, .blocklist-item:hover { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); color: var(--text); } @@ -244,11 +245,11 @@ ul.sidebar .sidebar-title { border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 8px; - background: rgba(255, 255, 255, .15); + background: var(--transparency-light-15) } .datatable .searchBar:focus-within { - background:rgba(255, 255, 255, .25); + background: var(--transparency-light-25); color: var(--text-hover); } @@ -267,7 +268,7 @@ ul.sidebar .sidebar-title { .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active { - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } .table-hover>tbody>tr.active:hover>td, @@ -275,11 +276,11 @@ ul.sidebar .sidebar-title { .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover { - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } .table .table { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .label-default { @@ -356,7 +357,7 @@ fieldset[disabled] .btn-primary:hover { .bootbox-form .checkbox i, .switch i { - background: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } .btn.focus, @@ -392,7 +393,7 @@ fieldset[disabled] .btn-primary:hover { .ui-select-bootstrap>.ui-select-match>.btn:focus { text-align: left !important; color: var(--button-text-hover); - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); border-color: #00000000; } @@ -405,7 +406,7 @@ fieldset[disabled] .btn-primary:hover { .pagination>.disabled>span:hover { color: var(--text-muted); cursor: not-allowed; - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); border-color: transparent; } @@ -446,7 +447,7 @@ select:focus, select.form-control:focus { } .form-control { - background-color: rgba(255, 255, 255, 0.15) !important; + background: var(--transparency-light-15) !important; border: 1px solid transparent; color: var(--text); } @@ -492,14 +493,14 @@ output { .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover, .ui-select-bootstrap .ui-select-choices-row.active>span { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .ui-select-bootstrap .ui-select-choices-row>span:focus, .ui-select-bootstrap .ui-select-choices-row>span:hover, .ui-select-choices-row:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } /* APP TEMPLATES */ @@ -513,7 +514,7 @@ output { /* ADD NETWORK */ .boxselector_wrapper input[type=radio]:checked+label { - background: rgba(255, 255, 255, .15); + background: var(--transparency-light-15); color: var(--text-hover); border-color: transparent; } @@ -521,7 +522,7 @@ output { .boxselector_wrapper label { -webkit-box-shadow: none; box-shadow: none; - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); border: 1px solid transparent; } @@ -554,13 +555,13 @@ output { /* STACKS */ .CodeMirror { - background: rgba(255, 255, 255, 0.10); + background: var(--transparency-light-10); color: var(--text-hover); } .CodeMirror-gutters { border-right: 1px solid rgba(255, 255, 255, 0.25); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); caret-color: var(--text-hover); } @@ -584,7 +585,7 @@ output { .nav-tabs>li.active>a:hover { color: var(--text-hover); cursor: default; - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); border: 1px solid #ddd0; border-bottom-color: transparent; } @@ -596,18 +597,18 @@ output { .nav>li>a:focus, .nav>li>a:hover { text-decoration: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .nav-tabs>li>a { border: 1px solid rgba(0, 0, 0, 0); - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15) } /* LOGS */ .log_viewer { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); border: 1px solid transparent; } @@ -623,7 +624,7 @@ json-tree .key { pre { color: var(--text-hover); - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); border: 1px solid transparent; } @@ -690,17 +691,17 @@ pre { } .widget .widget-body table .ng-scope tr { - background: rgba(0, 0, 0, .25) !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; + background: var(--transparency-dark-25) !important; } .widget .widget-body table thead { - background-color: rgba(0, 0, 0, .25) !important; - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; + background: var(--transparency-dark-25) !important; } .widget .widget-body table tbody .ng-isolate-scope div { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; background: rgba(0, 0, 0, 0) !important; } @@ -710,6 +711,6 @@ pre { } .widget .widget-body table thead tr:hover { - background-color: rgba(0, 0, 0, .35) !important; - background: rgba(0, 0, 0, .35) !important; + background: var(--transparency-dark-35) !important; + background: var(--transparency-dark-35) !important; } diff --git a/css/base/prowlarr/prowlarr-base.css b/css/base/prowlarr/prowlarr-base.css index e25b0820..dc512401 100644 --- a/css/base/prowlarr/prowlarr-base.css +++ b/css/base/prowlarr/prowlarr-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color); @@ -166,7 +167,7 @@ a:hover { } [class*="SelectInput-select-"] { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="SelectInput-select-"]:active, @@ -183,7 +184,7 @@ a:hover { } [class*="AutoSuggestInput-suggestionHighlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="CheckInput-primaryIsChecked-"] { @@ -200,7 +201,7 @@ a:hover { /* HEADER */ [class*="PageHeader-header-"] { - background-color: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); box-shadow: none; color: var(--text); } @@ -231,16 +232,16 @@ a:hover { } [class*="IndexerSearchInput-highlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="IndexerSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* SIDE MENU */ [class*="PageSidebar-sidebarContainer-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="PageSidebar-sidebar-"] { @@ -263,7 +264,7 @@ a:hover { } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } @media only screen and (max-width: 768px) { @@ -310,15 +311,15 @@ a:hover { } [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="AddListMoviePoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="MovieIndexOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="MovieIndexOverview-link-"]:hover { @@ -326,7 +327,7 @@ a:hover { } [class*="ProgressBar-container-"] { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*=".ProgressBar-purple-"] { @@ -337,7 +338,7 @@ a:hover { [class*="MovieDetailsSeason-season-"], [class*="MovieDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="MovieDetailsSeason-actionButton-"], @@ -376,17 +377,17 @@ a:hover { [class*="MovieDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="MovieFileEditorTable-container-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*="ExtraFileTable-container-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .Table-table-2C3O8 { @@ -498,7 +499,7 @@ a:hover { /* Table options*/ [class*="TableOptionsColumn-column-"] { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); border: none; } @@ -512,17 +513,17 @@ a:hover { } [class*="TableRow-row-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="TableRowCell-cell-"] { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid var(--transparency-light-25); } /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); } @@ -558,7 +559,7 @@ a:hover { [class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"], [class*="MovieCreditPoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -585,13 +586,13 @@ a:hover { [class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:focus { - background: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover); text-decoration: none; } [class*="MenuItemSeparator-separator-"] { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* ALPHABET JUMP BAR */ @@ -602,12 +603,12 @@ a:hover { /* MINI RIGHT SCROLL BAR */ [class*="OverlayScroller-thumb-"], [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="OverlayScroller-thumb-"]:hover, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } /* ADD NEW */ @@ -631,12 +632,12 @@ a:hover { [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { - background-color: rgba(255, 255, 255, 0.20) !important; + background: var(--transparency-light-20) !important; color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="HintedSelectInputOption-hintText-"] { @@ -674,7 +675,7 @@ a:hover { [class*="AddNewMovie-searchIconContainer-"], [class*="CheckInput-isIndeterminate-"] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -701,7 +702,7 @@ a:hover { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="TagInput-input-"][class*="TagInput-isFocused-"] { @@ -724,7 +725,7 @@ a:hover { [class*="AddNewMovieSearchResult-searchResult-"]:hover, [class*="AddNewMovieSearchResult-underlay-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="AddNewmovieModalContent-year-"] { @@ -749,13 +750,13 @@ a:hover { } [class*="VirtualTableRow-row-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* Drop down menu/button*/ [class*="ImportMovieSelectMovie-button-"] { border: none !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="ImportMovieSelectMovie-content-"], @@ -773,7 +774,7 @@ a:hover { } [class*="ImportMovieSearchResult-movie-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="ImportMovieTitle-year-"] { @@ -800,17 +801,17 @@ a:hover { } [class*="AddListMovieOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="PageJumpBarItem-jumpBarItem-"]:hover { color: var(--text-hover); - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /*Posters*/ [class*="AddListMoviePoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -818,7 +819,7 @@ a:hover { /* FOOTER */ [class*="PageContentFooter-contentFooter-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -874,17 +875,17 @@ a:hover { } [class*="DayOfWeek-dayOfWeek-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="CalendarDay-dayOfMonth-"] { border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="CalendarDay-isToday-"] { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="CalendarDay-day-"], @@ -932,7 +933,7 @@ a:hover { /* calendar agenda */ [class*="AgendaEvent-event-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* SETTINGS */ @@ -959,15 +960,15 @@ a:hover { } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"] { @@ -975,17 +976,17 @@ a:hover { } [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 2550, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 2550, 0.35); + background: var(--transparency-light-35); } /* PROFILES */ [class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } @@ -1018,12 +1019,12 @@ a:hover { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="LanguageProfileItem-languageProfileItem-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } [class*="QualityDefinitions-sizeLimitHelpText-"] { @@ -1039,7 +1040,7 @@ a:hover { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { border: 1px solid transparent; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } /* Indexers */ @@ -1076,7 +1077,7 @@ a:hover { /* LOG */ [class*="Alert-info-"] { border-color: transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: #FFC107; } @@ -1102,12 +1103,12 @@ a:hover { /* Login Page */ .panel-body { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text); } .panel-header { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .forgot-password { @@ -1117,7 +1118,7 @@ a:hover { input[type=email], input[type=password] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -1138,7 +1139,7 @@ input[type=password] { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* Custom filter */ @@ -1147,7 +1148,7 @@ input[type=password] { } [class*="CustomFilter-customFilter-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="SelectMovieModalContent-path-"] { @@ -1157,7 +1158,7 @@ input[type=password] { /* ChartJS */ [class*="Stats-fullWidthChart-"], [class*="Stats-halfWidthChart-"] { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } canvas { @@ -1170,20 +1171,20 @@ canvas { } [class*="QueryParameterOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="QueryParameterOption-example-"] { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="QueryParameterOption-option-"]:hover [class*="QueryParameterOption-token-"] { - background-color: rgba(255, 255, 2550, 0.25); + background: var(--transparency-light-25); } [class*="QueryParameterOption-option-"]:hover [class*="QueryParameterOption-example-"] { - background-color: rgba(255, 255, 2550, 0.35); + background: var(--transparency-light-35); } /* HISTORY */ @@ -1195,7 +1196,7 @@ canvas { } [class*="HistoryRowParameter-value-"] { - background-color: rgb(255 255 255 / 50%); + background: var(--transparency-light-50); color: #1f1f1f; } diff --git a/css/base/qbittorrent/qbittorrent-base.css b/css/base/qbittorrent/qbittorrent-base.css index 2cab3574..367a451c 100644 --- a/css/base/qbittorrent/qbittorrent-base.css +++ b/css/base/qbittorrent/qbittorrent-base.css @@ -12,6 +12,7 @@ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); ::-webkit-scrollbar { width: 10px; @@ -19,13 +20,13 @@ } ::-webkit-scrollbar-corner { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } html, @@ -60,13 +61,13 @@ body { input:disabled { color: rgb(84, 84, 84); cursor: default; - background-color: rgb(255, 255, 255, .05) !important; + background: var(--transparency-light-05) !important; border: none !important; } input[type="text"i] { color: var(--text-hover); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-width: 0px; outline: none; border: none; @@ -75,7 +76,7 @@ input[type="text"i] { input[type="password"i] { color: var(--text-hover); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-width: 0px; outline: none; border: none; @@ -84,7 +85,7 @@ input[type="password"i] { input[type="number"i] { color: var(--text-hover); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-width: 0px; outline: none; border: none; @@ -92,7 +93,7 @@ input[type="number"i] { input[type="file"i] { color: var(--text-hover); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-width: 0px; outline: none; border: none; @@ -162,7 +163,7 @@ h4, -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); padding-top: 0; - /* background: rgba(0, 0, 0, 0.25); */ + /* background: var(--transparency-dark-25) */ width: 400px; height: 460px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); @@ -210,7 +211,7 @@ label { } #desktopNavbar { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); height: 20px; border-bottom: 1px solid transparent; } @@ -221,11 +222,11 @@ label { #desktopNavbar ul li a:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } #desktopNavbar li ul li a:hover { - background: rgba(255, 255, 255, .08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -270,7 +271,7 @@ label { } .dynamicTable th { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; border-right-color: rgba(255, 255, 255, .08) !important; color: var(--text-hover); } @@ -284,20 +285,20 @@ label { } .dynamicTable { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .dynamicTable tbody tr { - background-color: rgba(0, 0, 0, 0.08) !important; + background: var(--transparency-dark-10) !important; } .dynamicTable tbody tr:nth-child(even), .dynamicTable tbody tr.alt { - background-color: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; } .dynamicTable tbody tr:hover { - background-color: rgba(255, 255, 255, 0.15) !important; + background: var(--transparency-light-15) !important; color: var(--text-hover); } @@ -342,7 +343,7 @@ li.divider { #main input[type="text"i] { color: var(--text-hover); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-width: 0px; outline: none; border: none; @@ -353,12 +354,12 @@ li.divider { } #main input[type="text"i]:focus { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); } #main input[type="password"i] { color: var(--text-hover); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-width: 0px; outline: none; border: none; @@ -369,7 +370,7 @@ li.divider { } #main input[type="password"i] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); } #loginform #login { @@ -458,13 +459,13 @@ ul.filterList li:hover:before { } .columnHandle { - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); border: 1px solid transparent; } /*Sidemenu - Bottom menu*/ .bottomPanel { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } /* Bottom menu */ @@ -473,7 +474,7 @@ ul.filterList li:hover:before { } .panel-header { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; border-bottom: 1px solid transparent !important; } @@ -501,11 +502,11 @@ ul.filterList li:hover:before { } .tab-menu li a:hover { - background: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; } .toolbarTabs { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .progressbar_dark { @@ -514,7 +515,7 @@ ul.filterList li:hover:before { } .progressbar_light { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover) !important; } @@ -550,13 +551,13 @@ fieldset { .mochaToolButton { margin-right: 10px; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-radius: 5px; } .mochaToolButton:hover { margin-right: 10px; - background: rgba(255, 255, 255, .25); + background: var(--transparency-light-25); border-radius: 5px; } @@ -578,7 +579,7 @@ fieldset { width: 100%; position: relative; height: 29px; - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; overflow: hidden; border-top: none !important; } @@ -618,14 +619,14 @@ fieldset.settings { textarea:disabled { color: rgb(84, 84, 84); cursor: default; - background-color: rgb(255, 255, 255, .05) !important; + background: var(--transparency-light-05) !important; border: none !important; } textarea { color: var(--text-hover) !important; cursor: default; - background-color: rgb(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; border: none !important; } diff --git a/css/base/radarr/radarr-base.css b/css/base/radarr/radarr-base.css index 5f49ed54..143f8694 100644 --- a/css/base/radarr/radarr-base.css +++ b/css/base/radarr/radarr-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --calendar-in-cinemas: 53 197 244; @@ -168,7 +169,7 @@ a:hover { } [class*="SelectInput-select-"] { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="SelectInput-select-"]:active, @@ -185,7 +186,7 @@ a:hover { } [class*="AutoSuggestInput-suggestionHighlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="CheckInput-primaryIsChecked-"] { @@ -201,7 +202,7 @@ a:hover { /* HEADER */ [class*="PageHeader-header-"] { - background-color: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); color: var(--text); } @@ -231,16 +232,16 @@ a:hover { } [class*="MovieSearchInput-highlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* SIDE MENU */ [class*="PageSidebar-sidebarContainer-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="PageSidebar-sidebar-"] { @@ -263,7 +264,7 @@ a:hover { } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } @media only screen and (max-width: 768px) { @@ -316,15 +317,15 @@ a:hover { } [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="AddListMoviePoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="MovieIndexOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="MovieIndexOverview-link-"]:hover { @@ -332,7 +333,7 @@ a:hover { } [class*="ProgressBar-container-"] { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*=".ProgressBar-purple-"] { @@ -343,7 +344,7 @@ a:hover { [class*="MovieDetailsSeason-season-"], [class*="MovieDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="MovieDetailsSeason-actionButton-"], @@ -386,17 +387,17 @@ a:hover { [class*="MovieDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="MovieFileEditorTable-container-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*="ExtraFileTable-container-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], @@ -509,7 +510,7 @@ a:hover { /* Table options*/ [class*="TableOptionsColumn-column-"] { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); border: none; } @@ -523,17 +524,17 @@ a:hover { } [class*="TableRow-row-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="TableRowCell-cell-"] { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid var(--transparency-light-25); } /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); } @@ -569,7 +570,7 @@ a:hover { [class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"], [class*="MovieCreditPoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -596,13 +597,13 @@ a:hover { [class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:focus { - background: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover); text-decoration: none; } [class*="MenuItemSeparator-separator-"] { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* ALPHABET JUMP BAR */ @@ -613,12 +614,12 @@ a:hover { /* MINI RIGHT SCROLL BAR */ [class*="OverlayScroller-thumb-"], [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="OverlayScroller-thumb-"]:hover, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } /* ADD NEW */ @@ -642,12 +643,12 @@ a:hover { [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { - background-color: rgba(255, 255, 255, 0.20) !important; + background: var(--transparency-light-20) !important; color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="HintedSelectInputOption-hintText-"] { @@ -686,7 +687,7 @@ a:hover { [class*="AddNewMovie-searchIconContainer-"], [class*="CheckInput-isIndeterminate-"] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -713,7 +714,7 @@ a:hover { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="TagInput-input-"][class*="TagInput-isFocused-"] { @@ -742,7 +743,7 @@ a:hover { [class*="AddNewMovieSearchResult-searchResult-"]:hover, [class*="AddNewMovieSearchResult-underlay-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="AddNewmovieModalContent-year-"] { @@ -767,13 +768,13 @@ a:hover { } [class*="VirtualTableRow-row-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* Drop down menu/button*/ [class*="ImportMovieSelectMovie-button-"] { border: none !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="ImportMovieSelectMovie-content-"], @@ -791,7 +792,7 @@ a:hover { } [class*="ImportMovieSearchResult-movie-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="ImportMovieTitle-year-"] { @@ -810,7 +811,7 @@ a:hover { [class*="DiscoverMoviePoster-title-"], [class*="DiscoverMoviePosterInfo-info-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -824,17 +825,17 @@ a:hover { } [class*="AddListMovieOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="PageJumpBarItem-jumpBarItem-"]:hover { color: var(--text-hover); - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /*Posters*/ [class*="AddListMoviePoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -842,7 +843,7 @@ a:hover { /* FOOTER */ [class*="PageContentFooter-contentFooter-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -928,18 +929,18 @@ a:hover { } [class*="DayOfWeek-dayOfWeek-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="CalendarDay-dayOfMonth-"] { border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background-color: hsla(0, 0%, 100%, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="CalendarDay-day-"], @@ -990,7 +991,7 @@ a:hover { /* calendar agenda */ [class*="AgendaEvent-event-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* SETTINGS */ @@ -1017,15 +1018,15 @@ a:hover { } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"] { @@ -1033,17 +1034,17 @@ a:hover { } [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 2550, 0.25); + background: var(--transparency-dark-25); } [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 2550, 0.35); + background: var(--transparency-dark-35); } /* PROFILES */ [class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } @@ -1068,12 +1069,12 @@ a:hover { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="LanguageProfileItem-languageProfileItem-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } [class*="KeyValueListInputItem-keyInput-"], @@ -1085,7 +1086,7 @@ a:hover { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { border: 1px solid transparent; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } [class*="QualityDefinitions-sizeLimitHelpText-"] { @@ -1119,7 +1120,7 @@ a:hover { /* LOG */ [class*="Alert-info-"] { border-color: transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: #FFC107; } @@ -1145,12 +1146,12 @@ a:hover { /* Login Page */ .panel-body { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text); } .panel-header { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .forgot-password { @@ -1160,7 +1161,7 @@ a:hover { input[type=email], input[type=password] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -1181,7 +1182,7 @@ input[type=password] { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* Custom filter */ @@ -1190,7 +1191,7 @@ input[type=password] { } [class*="CustomFilter-customFilter-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="SelectMovieModalContent-path-"] { diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css index 64d2c38a..744c1416 100644 --- a/css/base/readarr/readarr-base.css +++ b/css/base/readarr/readarr-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --calendar-downloaded: 39 194 76; @@ -168,7 +169,7 @@ a:hover { } [class*="SelectInput-select-"] { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="SelectInput-select-"]:active, @@ -185,7 +186,7 @@ a:hover { } [class*="AutoSuggestInput-suggestionHighlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="CheckInput-primaryIsChecked-"] { @@ -201,7 +202,7 @@ a:hover { /* HEADER */ [class*="PageHeader-header-"] { - background-color: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); color: var(--text); } @@ -231,25 +232,25 @@ a:hover { } [class*="AuthorSearchInput-highlighted-"] { - background-color: hsla(0, 0%, 100%, .08) + background: var(--transparency-dark-10) } [class*"=AuthorSearchInput-authorContainer-"]::-webkit-scrollbar-thumb, [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* MINI RIGHT SCROLL BAR */ [class*="OverlayScroller-thumb-"], [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="OverlayScroller-thumb-"]:hover, [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } /* ADD NEW */ @@ -272,12 +273,12 @@ a:hover { [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { - background-color: rgba(255, 255, 255, 0.20) !important; + background: var(--transparency-light-20) !important; color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="HintedSelectInputOption-hintText-"] { @@ -313,7 +314,7 @@ a:hover { /* SIDE MENU */ [class*="PageSidebar-sidebarContainer-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="PageSidebar-sidebar-"] { @@ -336,7 +337,7 @@ a:hover { } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } @media only screen and (max-width: 768px) { @@ -384,7 +385,7 @@ a:hover { } [class*="AuthorIndexOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="AuthorIndexOverview-link-"]:hover { @@ -392,7 +393,7 @@ a:hover { } [class*="ProgressBar-container-"] { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*=".ProgressBar-purple-"] { @@ -404,7 +405,7 @@ a:hover { [class*="AuthorDetailsSeason-albumType-"], [class*="AuthorDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="AuthorDetailsSeason-header-"], @@ -451,12 +452,12 @@ a:hover { [class*="AlbumDetailsMedium-medium-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="ExtraFileTable-container-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="AlbumDetails-selectedTab-"] { @@ -465,16 +466,16 @@ a:hover { [class*="AlbumDetailsMedium-collapseButtonContainer-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="AuthorIndexProgressBar-progress-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="AuthorIndexBanner-title-"], [class*="AuthorIndexBannerInfo-info-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -583,7 +584,7 @@ a:hover { /* Table options*/ [class*="TableOptionsColumn-column-"] { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); border: none; } @@ -597,17 +598,17 @@ a:hover { } [class*="TableRow-row-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="TableRowCell-cell-"] { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid var(--transparency-light-25); } /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); } @@ -642,7 +643,7 @@ a:hover { [class*="AuthorIndexPosterInfo-info-"], [class*="BookIndexPoster-title-"], [class*="BookIndexPosterInfo-info-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -670,13 +671,13 @@ a:hover { [class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:focus { - background: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover); text-decoration: none; } [class*="MenuItemSeparator-separator-"] { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* ALPHABET JUMP BAR */ @@ -689,7 +690,7 @@ a:hover { [class*="AddNewItem-searchIconContainer-"], [class*="CheckInput-isIndeterminate-"] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -712,7 +713,7 @@ a:hover { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="TagInput-input-"][class*="TagInput-isFocused-"] { @@ -745,7 +746,7 @@ a:hover { [class*="AddNewAuthorSearchResult-searchResult-"]:hover, [class*="AddNewAuthorSearchResult-underlay-"]:hover, [class*="AddNewAlbumSearchResult-underlay-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: inherit; text-decoration: none; } @@ -778,7 +779,7 @@ a:hover { } [class*="ImportAuthorSearchResult-author-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* IMPORT */ @@ -789,14 +790,14 @@ a:hover { [class*="ExpandingFileDetails-fileDetails-"] { border: 1px solid rgb(255 255 255 / .1); - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } /* IMPORT NEW ARTIST */ /* Drop down menu/button*/ [class*="ImportAuthorSelectAuthor-button-"] { border: none; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover); } @@ -809,14 +810,14 @@ a:hover { } [class*="VirtualTableRow-row-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /*Title*/ [class*="PageJumpBarItem-jumpBarItem-"]:hover { color: var(--text-hover); - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /*Posters*/ @@ -827,7 +828,7 @@ a:hover { /* FOOTER */ [class*="PageContentFooter-contentFooter-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -889,18 +890,18 @@ a:hover { } [class*="DayOfWeek-dayOfWeek-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="CalendarDay-dayOfMonth-"] { border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background-color: hsla(0, 0%, 100%, .25) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover); } @@ -943,7 +944,7 @@ color: var(--text-hover) !important; /* calendar agenda */ [class*="AgendaEvent-event-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* SETTINGS */ @@ -970,15 +971,15 @@ color: var(--text-hover) !important; } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"] { @@ -986,17 +987,17 @@ color: var(--text-hover) !important; } [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 2550, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 2550, 0.35); + background: var(--transparency-light-35); } /* PROFILES */ [class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } @@ -1021,12 +1022,12 @@ color: var(--text-hover) !important; [class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="LanguageProfileItem-languageProfileItem-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } [class*="KeyValueListInputItem-keyInput-"], @@ -1038,7 +1039,7 @@ color: var(--text-hover) !important; [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { border: 1px solid transparent; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } [class*="QualityDefinitions-sizeLimitHelpText-"] { @@ -1053,7 +1054,7 @@ color: var(--text-hover) !important; [class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } @@ -1101,7 +1102,7 @@ color: var(--text-hover) !important; /* LOG */ [class*="Alert-info-"] { border-color: transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: #FFC107; } @@ -1127,12 +1128,12 @@ color: var(--text-hover) !important; /* Login Page */ .panel-body { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text); } .panel-header { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .forgot-password { @@ -1142,7 +1143,7 @@ color: var(--text-hover) !important; input[type=email], input[type=password] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -1163,7 +1164,7 @@ input[type=password] { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* Custom filter */ @@ -1172,7 +1173,7 @@ input[type=password] { } [class*="CustomFilter-customFilter-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /* Readarr */ @@ -1181,7 +1182,7 @@ input[type=password] { [class*="AuthorIndexPoster-link-"], [class*="AuthorIndexPoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* Add New*/ @@ -1192,7 +1193,7 @@ input[type=password] { [class*="AddNewAuthorSearchResult-underlay-"]:hover, [class*="AddNewBookSearchResult-underlay-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: inherit; text-decoration: none; } @@ -1203,17 +1204,17 @@ input[type=password] { } [class*="AuthorIndexBanner-title-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="AuthorIndexOverview-container-"]:hover [class*="AuthorIndexOverview-content-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /*Books Tab*/ [class*="AuthorDetailsSeason-bookType-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="AuthorDetailsSeason-books-"] { @@ -1231,7 +1232,7 @@ input[type=password] { [class*="BookshelfBook-book-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; ; } @@ -1244,18 +1245,18 @@ input[type=password] { [class*="BookFileEditorTableContent-filesTable-"] { border: 1px solid rgb(255 255 255 / 10%); border-top: 1px solid rgb(255 255 255 / 50%); - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } /*Series Tab*/ [class*="AuthorDetailsSeries-bookType-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="AuthorDetailsSeries-collapseButtonContainer-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="AuthorDetailsSeries-bookTypeLabel-"] { diff --git a/css/base/requestrr/requestrr-base.css b/css/base/requestrr/requestrr-base.css index a22b0b3f..b247993e 100644 --- a/css/base/requestrr/requestrr-base.css +++ b/css/base/requestrr/requestrr-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { color: var(--text); @@ -70,20 +71,20 @@ h6, .nav-link.active:hover, .nav-link.active:focus { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .navbar-light .navbar-nav .nav-link:focus:not(.nav-link.active), .navbar-light .navbar-nav .nav-link:hover:not(.nav-link.active) { color: var(--text-hover); - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } @media (min-width: 768px) { .navbar-vertical.navbar-expand-md.fixed-left { left: 0; border-width: 0 1px 0 0; - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } } @@ -122,7 +123,7 @@ h6, .fade { -webkit-transition: opacity .15s linear; transition: opacity .15s linear; - background: rgba(0, 0, 0, 0.15) !important; + background: var(--transparency-dark-15) !important; } .bg-secondary { @@ -140,7 +141,7 @@ h6, .bg-white, .footer { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .footer { @@ -182,7 +183,7 @@ h6, /* FORMS */ .form-control:disabled, .form-control[readonly] { - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); opacity: 1; border: 1px solid transparent; color: gray; @@ -190,12 +191,12 @@ h6, .form-control-alternative, .has-danger .form-control { - background: rgba(0, 0, 0, 0.25); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); + background: var(--transparency-dark-25); } .form-control-alternative:focus { - background: rgba(0, 0, 0, 0.5); + background: var(--transparency-dark-50); } .form-control:focus { @@ -203,7 +204,7 @@ h6, } .has-success .form-control { - background-color: rgba(0, 0, 0, 0.5); + background-color: var(--transparency-dark-50); } .form-control { @@ -236,7 +237,7 @@ h6, .react-dropdown-select.dropdown { color: var(--text); - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .react-dropdown-select.dropdown .react-dropdown-select-item-selected { @@ -279,7 +280,7 @@ h6, .btn-default, .btn-default:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); border-color: transparent; } @@ -287,14 +288,14 @@ h6, .btn-default:not(:disabled):not(.disabled):active, .show>.btn-default.dropdown-toggle { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.26); + background-color: var(--transparency-dark-25); border-color: transparent; } .btn-default.disabled, .btn-default:disabled { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); border-color: transparent; opacity: .5; } @@ -327,19 +328,19 @@ h6, } #root>div>div.mt--8.pb-5.container>div>div>div { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } #root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(1)>div>input, #root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(2)>div>input, #root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(3)>div>input { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; border: 10px solid transparent; } .input-group-text { color: var(--text); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: 1px solid transparent !important; } @@ -381,7 +382,7 @@ h6, min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -393,6 +394,6 @@ h6, min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } \ No newline at end of file diff --git a/css/base/resilio-sync/resilio-sync-base.css b/css/base/resilio-sync/resilio-sync-base.css index c7a7fb5a..0ab61d9e 100644 --- a/css/base/resilio-sync/resilio-sync-base.css +++ b/css/base/resilio-sync/resilio-sync-base.css @@ -12,6 +12,7 @@ @import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css); @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body, .tableScrollContainer, @@ -78,7 +79,7 @@ a:hover { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -90,7 +91,7 @@ a:hover { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -142,34 +143,34 @@ UL.jqueryFileTree A, /* NAVBAR */ .bt-navbar { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .bt-navbar .btn.dropdown-toggle { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } .bt-navbar .btn.dropdown-toggle:hover { - background-color: rgb(255 255 255 / 16%); + background: var(--transparency-light-15); } .bt-navbar .btn.btn-tab.active, .bt-navbar .btn.btn-tab:active { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border-bottom-color: rgb(var(--accent-color)); } .bt-navbar .btn:hover { - background-color: rgb(255 255 255 / 8%) !important; + background: var(--transparency-light-10) !important; } .bt-navbar .btn#try-pro-button { - background-color: rgb(0 0 0 / 50%); + background: var(--transparency-dark-50); color: var(--button-text); } .bt-navbar .btn#try-pro-button:hover { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } .bt-navbar .btn.btn-tab { @@ -206,12 +207,12 @@ UL.jqueryFileTree A, .dropdown-menu li a:focus, .dropdown-menu li a:hover { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--text-hover); } #columns-context .bt-checkbox:hover { - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); } .context-menu .bt-checkbox label, @@ -229,12 +230,12 @@ UL.jqueryFileTree A, } .sync-level .add-folder-mode li.selected a { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .sync-level .add-folder-mode li:not(.selected) a:focus, .sync-level .add-folder-mode li:not(.selected) a:hover { - background-color: rgb(255 255 255 / .08); + background: var(--transparency-light-10); } .sync-level .add-folder-mode .btn-group { @@ -244,14 +245,14 @@ UL.jqueryFileTree A, button.selectpicker.btn-default { border-color: #ccc0 !important; color: var(--text) !important; - background-color: rgb(0 0 0 / 25%) !important; + background: var(--transparency-dark-25) !important; } .btn-group.open .dropdown-toggle { -webkit-box-shadow: none !important; box-shadow: none !important; border: none; - background: rgb(0 0 0 / 50%) !important; + background: var(--transparency-dark-50) !important; } .animating { @@ -331,7 +332,7 @@ button.selectpicker.btn-default { .bt-navbar #choose-share-type-menu .container-fluid .menu-item:hover, .bt-navbar .choose-dropdown-menu .container-fluid .menu-item:focus, .bt-navbar .choose-dropdown-menu .container-fluid .menu-item:hover { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } @@ -367,7 +368,7 @@ button.selectpicker.btn-default { .context-menu li a:focus, .context-menu li a:hover { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--text-hover) !important; } @@ -387,7 +388,7 @@ button.selectpicker.btn-default { } #general-settings #languagedrop { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border: transparent; } @@ -454,17 +455,17 @@ button.selectpicker.btn-default { } #choose-product-dialog .product-container .product { - background-color: rgb(255 255 255 / 0.08); + background-color: var(--transparency-light-10); border: 1px solid transparent; } .modal-header .close:hover { - background: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } ul.jqueryFileTree a.active, ul.jqueryFileTree a:hover { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -506,7 +507,7 @@ ul.jqueryFileTree a:hover { #file-sharing-content .shareOptionsContainer .shareOption:hover, #sharing-content .shareOptionsContainer .shareOption:hover, .sharing-dialog-content .shareOptionsContainer .shareOption:hover { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -561,7 +562,7 @@ ul.jqueryFileTree a:hover { .modal-filter .btn:hover, .modal-input .btn:focus, .modal-filter animating { - background: rgb(255 255 255 / .08) !important; + background: var(--transparency-light-10) !important; } /* PAGES */ @@ -582,7 +583,7 @@ ul.jqueryFileTree a:hover { #historyContainer .table-filter-panel, .resizableTableContainer .table-filter-panel, .tableContainerWithFilterPanel .table-filter-panel { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border-bottom: 1px solid rgb(255 255 255 / 10%); } @@ -592,7 +593,7 @@ ul.jqueryFileTree a:hover { /* FOOTER */ #sync-core-state { - background-color: rgb(0 0 0 / 50%); + background: var(--transparency-dark-50); border-top: 1px solid rgb(255 255 255 / 10%); } @@ -624,7 +625,7 @@ ul.jqueryFileTree a:hover { #statusPanel .nav-pills a.tab-button:focus, #statusPanel .nav-pills a.tab-button:hover, #statusPanel .nav-pills .active>a { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } #statusPanel .tab-content { @@ -632,7 +633,7 @@ ul.jqueryFileTree a:hover { } #statusPanel .chart-wrapper { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); border-right: 1px solid rgba(255, 255, 255, .1); } @@ -666,12 +667,12 @@ ul.jqueryFileTree a:hover { /* SETTINGS */ .settings-tabs-wrapper .settings-tabs-buttons .left-nav-button.active { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); color: rgb(var(--accent-color)); } .settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } .settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) .txt-button { @@ -692,12 +693,12 @@ ul.jqueryFileTree a:hover { .settings-tabs-wrapper .settings-tabs-buttons { border-right: 1px solid rgb(255 255 255 / 10%); - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } /* IDENTITY */ #my-devices .my-devices .single-my-device:hover:not(.disabled) { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } #my-devices .my-devices .link-device-block #device-to-qr .device-link { @@ -745,20 +746,20 @@ ul.jqueryFileTree a:hover { .transfer-table .transfer-row .optionsColumn .options-button.active, .transfer-table .transfer-row .optionsColumn .options-button:hover { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } /* FORMS */ .form-control { color: var(--text) !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; border: 1px solid transparent !important; box-shadow: none !important; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .form-control:focus { - background-color: rgba(0, 0, 0, .5) !important; + background: var(--transparency-dark-50) !important; color: var(--text-hover) !important; } @@ -766,13 +767,13 @@ ul.jqueryFileTree a:hover { #advanced-settings-dialog .verticalScrollContainer tr:active, #advanced-settings-dialog .verticalScrollContainer tr:focus, #advanced-settings-dialog .verticalScrollContainer tr:hover { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--text-hover); } .table-hover>tbody>tr.active, .table-hover>tbody>tr:hover:not(.no-hover) { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--text-hover); } diff --git a/css/base/rutorrent/rutorrent-base.css b/css/base/rutorrent/rutorrent-base.css index 5c4d145c..031be0a3 100644 --- a/css/base/rutorrent/rutorrent-base.css +++ b/css/base/rutorrent/rutorrent-base.css @@ -13,6 +13,7 @@ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); @import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,300); @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); @font-face { font-family: 'Roboto' !important @@ -49,7 +50,7 @@ div#preload { } hr { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); height: 1px; border-width: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); @@ -67,7 +68,7 @@ div#cover { } div#msg { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-top: 1px solid #3330; border-bottom: 1px solid #0000; font-size: 11px; @@ -154,7 +155,7 @@ ul.CMenu li a.dis:hover { } ul.CMenu li hr { - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); height: 1px; border-width: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); @@ -168,13 +169,13 @@ ul.CMenu li a.exp { } ul.CMenu li a.exp:hover { - background: rgba(255, 255, 255, .08); + background: var(--transparency-light-10) ; } ul.CMenu li a.sel { color: var(--text-hover); - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15) } ul.CMenu li ul li a.sel { @@ -182,7 +183,7 @@ ul.CMenu li ul li a.sel { } ul.CMenu li a:hover { - background-color: rgba(255, 255, 255, 0.08) !important; + background: var(--transparency-light-10) !important; color: var(--text-hover); text-shadow: 0 -1px 0 #000; } @@ -207,7 +208,7 @@ ul.CMenu li ul li a.dis:hover { } div.stable-body table tbody tr.even:nth-child(2n+1) td { - background: rgba(255, 255, 255, 0.08) !important + background: var(--transparency-light-10) !important } .stable-body td { @@ -233,7 +234,7 @@ div.stable-body table tbody tr.even:nth-child(2n+1) td { } div#t { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); background-image: none; border-bottom: none; padding: 4px 0 2px 0; @@ -418,7 +419,7 @@ div#stg-header { div#CatList { border: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-right: 1px solid transparent; border-left: none } @@ -537,7 +538,7 @@ div.tab { } div#lcont { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); font-family: 'Roboto' } @@ -549,13 +550,13 @@ div#gcont table td.Header { } div#gcont table tr { - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); font-family: 'Roboto'; color: var(--text); } div#gcont table tr td { - background: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } div#gcont table { @@ -565,11 +566,11 @@ div#gcont table { div.graph_tab { color: var(--text-hover); border-color: transparent; - background-color: rgba(0, 0, 0, 0.25) + background: var(--transparency-dark-25); } div.table_tab { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); font-family: 'Roboto' } @@ -580,14 +581,14 @@ div#modalbg { div#List { margin-right: 6px; border: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#FileList, div#TrackerList, div#PeerList, div#Speed { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .dlg-window { @@ -614,7 +615,7 @@ a.dlg-close:visited { } div.dlg-header { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-bottom: none; font-family: 'Roboto'; text-transform: uppercase; @@ -626,7 +627,7 @@ div.dlg-header { font-size: 11px; font-family: monospace; line-height: 11px; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); white-space: pre; overflow: scroll; height: 198px; @@ -725,7 +726,7 @@ div#tdcont { } div#HDivider { - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); cursor: e-resize; height: 0; margin: 0; @@ -735,7 +736,7 @@ div#HDivider { div#RSSList { border: none !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; overflow: hidden; display: block; -moz-user-select: none; @@ -745,13 +746,13 @@ div#RSSList { div#HDivider:hover, div#VDivider:hover { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } div#tcreate textarea#trackers { color: var(--text-hover); border: none !important; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-radius: 2px; cursor: text; } @@ -761,7 +762,7 @@ input[type="password"], select { color: var(--text-hover); border: none; - background: rgba(0, 0, 0, 0.25) url(/resources/rutorrent/headers.png) repeat-x scroll 0 -138px; + background: var(--transparency-dark-25) url(/resources/rutorrent/headers.png) repeat-x scroll 0 -138px; border-radius: 2px; outline: none; } @@ -772,7 +773,7 @@ input[type="file"][disabled], select[disabled] { color: var(--text-hover); border: none; - background: rgba(0, 0, 0, 0.08) url(/resources/rutorrent/headers.png) repeat scroll 0 0 !important; + background: var(--transparency-dark-10) url(/resources/rutorrent/headers.png) repeat scroll 0 0 !important; border-radius: 2px; opacity: .2 } @@ -792,7 +793,7 @@ textarea { #FS_downlink { color: var(--text-hover); border: none !important; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-radius: 2px } @@ -818,7 +819,7 @@ input.Button:focus { } ul#tabbar { - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); border: none; color: #606060; height: 24px; @@ -957,19 +958,19 @@ div.dlg-window { } div#yesnoDlg div.dlg-header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); text-shadow: 0 -1px 0 #000 } div#stg-header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); text-shadow: 0 -1px 0 #000; color: var(--text-hover); } div#dlgHelp-header, div#dlgHelp div.dlg-header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); text-shadow: 0 -1px 0 #000 } @@ -980,7 +981,7 @@ div#tadd { } div#tadd-header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-bottom: 1px solid #3330; text-shadow: 0 -1px 0 #000; } @@ -1024,7 +1025,7 @@ Input.TextboxLarge { } div.tab { - background-color: rgba(0, 0, 0, 0.25) + background: var(--transparency-dark-25) } div#t div#ind { @@ -1063,7 +1064,7 @@ span#loadimg { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -1075,7 +1076,7 @@ span#loadimg { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -1086,19 +1087,19 @@ input#add_button { } div#lcont div.std { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); height: 17px; line-height: 17px; border-bottom: 1px solid transparent; } div#lcont div.std:nth-child(2n+1) { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } #StatusBar { border-top: 1px solid transparent; - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); color: #ccc; font-family: Roboto } @@ -1232,7 +1233,7 @@ span.det { .stable-head { color: var(--text-hover); - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); border: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0); font-family: Ubuntu; @@ -1296,13 +1297,13 @@ div#tdcont .stable { } .stable-body tr.selected td { - background: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); color: var(--text-hover); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0); } div.stable-body table tbody tr.even td { - background: rgba(0, 0, 0, 0.08); + background: var(--transparency-dark-10); } div.stable-body table tbody tr.even td:nth-child(2n+1) { @@ -1478,7 +1479,7 @@ div.graph_tab { } div#tcreate div.dlg-header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-bottom: 1px solid transparent; text-shadow: 0px -1px 0px #000; background-image: none !important; @@ -1494,7 +1495,7 @@ div#dlgAddRSS { div#dlgAddRSS-header, div#dlgAddRSS div.dlg-header { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-bottom: 1px solid transparent; text-shadow: 0px -1px 0px #000; background-image: none !important; @@ -1746,7 +1747,7 @@ div#logoffDlg div.dlg-header { font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif; cursor: text; - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover) !important; outline: none !important; } @@ -1760,13 +1761,13 @@ div#logoffDlg div.dlg-header { #dlgEditRatioRules .lf_rru li input.TextboxFocus, #dlgEditRules .lf_rur li input.TextboxFocus { - background-color: rgb(255 255 255 / 25%); + background-color: var(--transparency-light-25); color: var(--text-hover); } #dlgEditRatioRules .lf_rru li input.TextboxNormal, #dlgEditRules .lf_rur li input.TextboxNormal { - background-color: rgb(255 255 255 / .08) !important; + background: var(--transparency-light-10) !important; color: var(--text-hover); } @@ -1782,5 +1783,5 @@ div#logoffDlg div.dlg-header { div#dlgEditRules-header, #dlgEditRatioRules-header, div#dlgEditRules div.dlg-header { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } \ No newline at end of file diff --git a/css/base/sabnzbd/sabnzbd-base.css b/css/base/sabnzbd/sabnzbd-base.css index 2e128256..364203b9 100644 --- a/css/base/sabnzbd/sabnzbd-base.css +++ b/css/base/sabnzbd/sabnzbd-base.css @@ -10,6 +10,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color) !important; @@ -106,7 +107,7 @@ a:focus { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -118,7 +119,7 @@ a:focus { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -133,7 +134,7 @@ hr { } .navbar-inverse { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-color: transparent !important; } @@ -169,7 +170,7 @@ hr { .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } .ui-slider-horizontal, @@ -183,7 +184,7 @@ hr { } .main-content { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); border: none; } @@ -214,7 +215,7 @@ hr { } .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } .navbar-inverse .navbar-toggle { @@ -224,7 +225,7 @@ hr { .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .dropdown-header { @@ -504,7 +505,7 @@ td.delete .dropdown>a .caret { } .table-striped>tbody>tr:nth-of-type(odd) { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } tbody.no-downloads tr td { @@ -524,15 +525,15 @@ tbody>tr>td:first-child { } table { - background-color: rgba(0, 0, 0, 0.25) !important + background: var(--transparency-dark-25) !important } table:hover { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } .table-hover>tbody>tr:hover { - background-color: rgba(255, 255, 255, 0.07) !important; + background-color: var(--transparency-dark-10) !important; color: var(--text-hover); } @@ -555,7 +556,7 @@ tr td.row-extra-text, .table-messages .table-messages-remove { border-bottom: 1px solid transparent !important; - background: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } .progress .progress-bar .fileDetails { @@ -601,7 +602,7 @@ tr td.row-extra-text, .multioperations-selector { border: 1px solid transparent !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } #history-options .hover-button { @@ -610,7 +611,7 @@ tr td.row-extra-text, #history-tab .table>tbody>tr:nth-of-type(2n+1), .table-striped>tbody>tr:nth-of-type(2n+1) { - background-color: rgba(255, 255, 255, 0.05); + background: var(--transparency-light-05); } .pagination>li>a, @@ -653,7 +654,7 @@ tr td.row-extra-text, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus { color: var(--text-muted); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border: 1px solid transparent; } @@ -664,7 +665,7 @@ tr td.row-extra-text, .form-control { color: var(--text-hover); - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .form-control:focus { @@ -691,13 +692,13 @@ tr td.row-extra-text, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { color: #555; - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } .nav>li>a:hover, .nav>li>a:focus { text-decoration: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .badge { @@ -723,7 +724,7 @@ tr td.row-extra-text, } .navbar-default .navbar-nav>.open>a { - background-color: hsla(0, 0%, 0%, .15); + background: var(--transparency-dark-15); } .navbar-default .navbar-nav>li>a:hover, @@ -732,12 +733,12 @@ tr td.row-extra-text, } .navbar-default .navbar-nav>li>a:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover) !important; } .navbar-default .navbar-nav>li>a.active { - background-color: hsla(0, 0%, 0%, .15) !important; + background: var(--transparency-dark-15) !important; color: rgb(var(--accent-color)) !important; } @@ -747,7 +748,7 @@ tr td.row-extra-text, .colmask { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .padTable:not(.ui-sortable) { @@ -775,7 +776,7 @@ table { .alt, .infoTableSeperator.alt { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .info-container { @@ -807,14 +808,14 @@ table { .form-control.advanced-button.config-hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); border-color: rgba(255, 255, 255, 0.25); border-radius: 3px !important; } .form-control.advanced-button.config-hover:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.3); + background: var(--transparency-light-30); border-color: rgba(255, 255, 255, 0.3); border-radius: 3px !important; } @@ -834,7 +835,7 @@ input[type="date"], textarea, select { border: none; - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); border-radius: 3px !important; color: var(--text-hover) !important; outline: none; @@ -882,7 +883,7 @@ input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus { - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); border: none; -webkit-box-shadow: none !important; box-shadow: none !important; @@ -979,12 +980,12 @@ select[disabled]:hover { /*Folder modal*/ .list-group-item { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border: none; } .example { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } /*modal*/ @@ -1032,7 +1033,7 @@ select[disabled]:hover { .modal-body>.nav-tabs>li.active>a:hover, .modal-body>.nav-tabs>li.active>a:focus { color: rgb(var(--accent-color)) !important; - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; border: transparent; border-bottom-color: transparent; cursor: default; @@ -1044,7 +1045,7 @@ select[disabled]:hover { .modal-body>.nav>li>a:hover, .modal-body>.nav>li>a:focus { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover) !important; } @@ -1080,11 +1081,11 @@ select[disabled]:hover { #modal-options .table-server-connections thead { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } #modal-options .table-server-connections thead { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } #modal-item-files .item-files-table .progress small { @@ -1102,7 +1103,7 @@ a.list-group-item:focus, button.list-group-item:focus { text-decoration: none; color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .form-control { @@ -1110,7 +1111,7 @@ button.list-group-item:focus { } .fade.in { - background: rgba(0, 0, 0, 0.6); + background: var(--transparency-dark-60) } .fade { @@ -1143,11 +1144,11 @@ fieldset[disabled] .form-control { } .language:hover { - background-color: rgb(255 255 255 / 10%); + background: var(--transparency-light-10); } .container .quoteBlock { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } #content a, diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css index 0f3c1725..14dde3c5 100644 --- a/css/base/sonarr/sonarr-base.css +++ b/css/base/sonarr/sonarr-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --calendar-tv-unaired-premiere: 53 197 244; @@ -178,7 +179,7 @@ a:hover { } [class*="SelectInput-select-"] { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="SelectInput-select-"]:active, @@ -195,7 +196,7 @@ a:hover { } [class*="AutoSuggestInput-suggestionHighlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="CheckInput-primaryIsChecked-"] { @@ -211,7 +212,7 @@ a:hover { /* HEADER */ [class*="PageHeader-header-"] { - background-color: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); color: var(--text); } @@ -225,7 +226,7 @@ a:hover { [class*="EpisodeDetailsModalContent-selectedTab-"] { border-color: var(--accent-color-hover); - background-color: rgb(0 0 0 / 40%); + background: var(--transparency-dark-40); } [class*="SeriesSearchInput-sectionTitle-"] { @@ -247,24 +248,24 @@ a:hover { } [class*="SeriesSearchInput-highlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="SeriesSearchInput-seriesContainer-"]::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* SIDE MENU */ [class*="PageSidebar-sidebarContainer-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="PageSidebar-sidebar-"] { @@ -287,7 +288,7 @@ a:hover { } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } @media only screen and (max-width: 768px) { @@ -328,7 +329,7 @@ a:hover { } [class*="SeriesIndexOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="SeriesIndexOverview-link-"]:hover { @@ -336,7 +337,7 @@ a:hover { } [class*="ProgressBar-container-"] { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } @@ -348,7 +349,7 @@ a:hover { [class*="SeriesDetailsSeason-season-"], [class*="SeriesDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="SeriesDetailsSeason-episodes-"] { @@ -403,7 +404,7 @@ a:hover { [class*="SeriesDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], @@ -520,7 +521,7 @@ a:hover { /* Table options*/ [class*="TableOptionsColumn-column-"] { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); border: none; } @@ -534,17 +535,17 @@ a:hover { } [class*="TableRow-row-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="TableRowCell-cell-"] { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid var(--transparency-light-25); } /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); } @@ -574,7 +575,7 @@ a:hover { [class*="SeriesIndexPoster-title-"], [class*="SeriesIndexPoster-nextAiring-"], [class*="SeriesIndexPosterInfo-info-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -601,13 +602,13 @@ a:hover { [class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:focus { - background: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover); text-decoration: none; } [class*="MenuItemSeparator-separator-"] { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* ALPHABET JUMP BAR */ @@ -618,12 +619,12 @@ a:hover { /* MINI RIGHT SCROLL BAR */ [class*="OverlayScroller-thumb-"], [class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="OverlayScroller-thumb-"]:hover, [class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } /* ADD NEW */ @@ -647,12 +648,12 @@ a:hover { [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { - background-color: rgba(255, 255, 255, 0.20) !important; + background: var(--transparency-light-20) !important; color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="HintedSelectInputOption-hintText-"] { @@ -689,7 +690,7 @@ a:hover { [class*="AddNewSeries-searchIconContainer-"], [class*="CheckInput-isIndeterminate-"] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -712,7 +713,7 @@ a:hover { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="TagInput-input-"][class*="TagInput-isFocused-"] { @@ -736,7 +737,7 @@ a:hover { } [class*="AddNewSeriesSearchResult-underlay-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="AddNewSeriesSearchResult-year-"] { @@ -761,17 +762,17 @@ a:hover { } [class*="VirtualTableRow-row-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /* Drop down menu/button*/ [class*="ImportSeriesSelectSeries-button-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="ImportSeriesSearchResult-series-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="ImportSeriesSelectSeries-content-"], @@ -796,7 +797,7 @@ a:hover { /* FOOTER */ [class*="PageContentFooter-contentFooter-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -804,7 +805,7 @@ a:hover { [class*="SeasonPassSeason-season-"] { border: none; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="SeasonPassSeason-allEpisodes-"] { @@ -883,18 +884,18 @@ a:hover { } [class*="DayOfWeek-dayOfWeek-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="CalendarDay-dayOfMonth-"] { border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background-color: hsla(0, 0%, 100%, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="CalendarDay-day-"], @@ -939,7 +940,7 @@ a:hover { /* calendar agenda */ [class*="AgendaEvent-event-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /*QUEUE PAGE */ @@ -972,25 +973,25 @@ a:hover { } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 2550, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 2550, 0.35); + background: var(--transparency-light-35); } /* PROFILES */ [class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } @@ -1014,12 +1015,12 @@ a:hover { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="LanguageProfileItem-languageProfileItem-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } [class*="KeyValueListInputItem-keyInput-"], @@ -1062,19 +1063,19 @@ a:hover { /* LOG */ [class*="Alert-info-"] { border-color: transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: #FFC107; } /* Login Page */ .panel-body { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text); } .panel-header { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .forgot-password { @@ -1084,7 +1085,7 @@ a:hover { input[type=email], input[type=password] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -1105,7 +1106,7 @@ input[type=password] { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* Custom filter */ @@ -1114,7 +1115,7 @@ input[type=password] { } [class*="CustomFilter-customFilter-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /* Scene information */ diff --git a/css/base/synclounge/synclounge-base.css b/css/base/synclounge/synclounge-base.css index bd414548..7519645c 100644 --- a/css/base/synclounge/synclounge-base.css +++ b/css/base/synclounge/synclounge-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --v-primary-base: rgb(var(--accent-color)); @@ -40,7 +41,7 @@ h4 { .v-toolbar__content, .v-toolbar__extension { - background-color: rgba(0, 0, 0, 0.6) !important; + background: var(--transparency-dark-60) !important; } p a { @@ -146,7 +147,7 @@ p a { .flex.md3 .application .theme--dark.v-card, .theme--dark .v-card { - background: rgba(255, 255, 255, 0.10) !important; + background: var(--transparency-light-10) !important; color: var(--text-hover); } @@ -156,7 +157,7 @@ p a { } .theme--dark.v-text-field--solo>.v-input__control>.v-input__slot { - background: rgb(0 0 0 / 0.50); + background: var(--transparency-dark-50); } .v-navigation-drawer { diff --git a/css/base/tautulli/tautulli-base.css b/css/base/tautulli/tautulli-base.css index 3e0eee76..9c8b78bd 100644 --- a/css/base/tautulli/tautulli-base.css +++ b/css/base/tautulli/tautulli-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color); @@ -131,7 +132,7 @@ a.no-highlight:hover, .nav>li.active>a:hover, .nav>li.active>a:focus { color: #f9be03; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .nav>li>a { @@ -140,14 +141,14 @@ a.no-highlight:hover, .nav>li>a:hover, .nav>li>a:focus { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: rgb(var(--accent-color)); } @@ -169,12 +170,12 @@ a.no-highlight:hover, .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } .dropdown-menu .divider { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } select, @@ -205,15 +206,15 @@ select, .dashboard-stats-background, .dashboard-activity-background, .dashboard-activity-poster-container { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .dashboard-activity-progress-bar { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .dashboard-activity-progress .buffer-bar { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } .dashboard-activity-metadata-user a { @@ -275,7 +276,7 @@ select, } .btn-danger.btn-edit { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } .btn-form { @@ -303,18 +304,18 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .react-selectize.root-node .react-selectize-control, .selectize-control.form-control .selectize-input { - background: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } /*Formcontrol */ select.form-control, div.form-control .selectize-input { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } @media (min-width: 768px) { @@ -326,11 +327,11 @@ div.form-control .selectize-input { .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - background-color: rgba(236, 236, 236, 0.25); + background: var(--transparency-dark-25); } textarea.form-control { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } textarea:focus, @@ -350,7 +351,7 @@ input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { color: var(--text-hover); - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .form-control:focus { @@ -362,22 +363,22 @@ input[type="color"]:focus, /* Settings table cards */ .table-card-header { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-top: 1px solid #00000000; } .table-card-back { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } table.display thead th { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } table.display thead tr:hover { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } /*Settings menu */ @@ -391,24 +392,24 @@ table.display thead tr:hover { } .nav-settings>li { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); border-top: 1px solid transparent; } .nav-settings>.active>a, .nav-settings>.active>a:hover, .nav-settings>.active>a:focus { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .nav-settings>li>a:hover, .nav-settings>li>a:focus { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .card { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-top: 1px solid #00000000; } @@ -418,12 +419,12 @@ table.display thead tr:hover { .card-handle { color: var(--text-hover); - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } /*Notification agents menu */ .stacked-configs>li { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } .stacked-configs>li>span { @@ -435,7 +436,7 @@ table.display thead tr:hover { .stacked-configs>li>span:hover, .stacked-configs>li>span:focus { color: var(--text-hover); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .stacked-configs>li>span>a.toggle-left, @@ -449,17 +450,17 @@ span>a.active, } .inline-pre { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* Summary containers */ .summary-container .table-card-header, .summary-container .table-card-back { - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45) } .summary-navbar { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } /* pagination */ @@ -469,7 +470,7 @@ span>a.active, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); border-color: #00000000; } @@ -491,7 +492,7 @@ span>a.active, /* Graphs */ .graphs-instance { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } /* Modal */ @@ -558,7 +559,7 @@ span>a.active, #newsletter-config-modal .nav-tabs>li.active>a:hover, #newsletter-config-modal .nav-tabs>li.active>a:focus { color: var(--text-hover); - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45) } #notifier-config-modal .nav-tabs>li.active>a, @@ -574,7 +575,7 @@ span>a.active, #notifier-config-modal .nav-tabs>li>a:hover, #newsletter-config-modal .nav-tabs>li>a:hover { border-color: #0000; - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -584,7 +585,7 @@ span>a.active, } .accordion { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } .accordion li .link { @@ -594,21 +595,21 @@ span>a.active, .accordion li .link:hover, .accordion li .link:hover i.fa { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .submenu { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } /* Stream info */ .stream-info { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } /* Edit metadata */ .item-children-section-title { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); border-bottom: 1px solid #00000000; border-top: 1px solid #00000000; } @@ -616,11 +617,11 @@ span>a.active, /* Mobile */ .navbar-toggle:hover, .navbar-toggle:focus { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } .navbar-toggle { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } @media (max-width: 768px) { diff --git a/css/base/thelounge/thelounge-base.css b/css/base/thelounge/thelounge-base.css index efb54f17..0a0a9a3e 100644 --- a/css/base/thelounge/thelounge-base.css +++ b/css/base/thelounge/thelounge-base.css @@ -10,12 +10,14 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url("/css/defaults/transparent.css"); + #chat .userlist .names { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } #chat .user-mode:before { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } @media (max-width: 768px) { @@ -37,7 +39,7 @@ #viewport.menu-dragging #sidebar, #viewport.menu-open #sidebar { box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5); - background: rgba(0, 0, 0, 0.85); + background: var(--transparency-dark-85) } } @@ -53,20 +55,20 @@ } #form { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); border-color: #0086ff00; color: var(--body-color); } #sidebar .active, #sidebar .active:hover { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } #chat .msg.motd .text, code, .irc-monospace { - background: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); color: #f3f3f3; } @@ -78,7 +80,7 @@ code, } #chat .msg[data-type=motd] .text { - background: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* Dropdown menu */ @@ -106,7 +108,7 @@ code, .textcomplete-item:focus, .textcomplete-item:hover, .textcomplete-menu .active { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); transition: none; outline: 0; } @@ -125,12 +127,12 @@ code, } #chat .userlist .count { - background-color: rgba(0, 0, 0, 0.6); + background: var(--transparency-dark-60); } #footer button:hover, #sidebar .chan:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } #settings .extra-help:before { diff --git a/css/base/transmission/transmission-base.css b/css/base/transmission/transmission-base.css index 306c9c92..732d51ac 100644 --- a/css/base/transmission/transmission-base.css +++ b/css/base/transmission/transmission-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { @@ -67,7 +68,7 @@ body { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -79,7 +80,7 @@ body { min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -101,7 +102,7 @@ div#torrent_inspector #inspector_header #torrent_inspector_name, /* Toolbar */ div#toolbar { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); background-image: none; border-bottom: 1px solid transparent; } @@ -245,7 +246,7 @@ div#toolbar>div#toolbar-inspector:before { #statusbar { border-bottom: 1px solid transparent; background-image: none; - background-color: rgba(0, 0, 0, 0.25) + background: var(--transparency-dark-25) } #statusbar #filter input#torrent_search { @@ -285,7 +286,7 @@ div#toolbar>div#toolbar-inspector:before { ul.torrent_list, ul.torrent_list li.torrent.even { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } ul.torrent_list li.torrent div.torrent_name { @@ -293,14 +294,14 @@ ul.torrent_list li.torrent div.torrent_name { } ul.torrent_list li.torrent.selected { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } ul.torrent_list li.torrent { border-bottom: 1px solid rgba(204, 204, 204, 0.1); padding: 4px 30px 5px 14px; color: var(--text); - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* Modal */ @@ -324,7 +325,7 @@ div#upload_container div.dialog_window div.dialog_message label { input { color: var(--text-hover); - background: rgba(0, 0, 0, .25) + background: var(--transparency-dark-25) } #add-dialog-folder-input, @@ -421,7 +422,7 @@ div.dialog_container div.dialog_window a:active { .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid transparent; - background: rgba(255, 255, 255, .1) !important; + background: var(--transparency-light-10) !important; font-weight: normal; color: var(--text); } @@ -444,7 +445,7 @@ div.dialog_container div.dialog_window a:active { .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid transparent; - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); font-weight: normal; color: var(--text); } @@ -482,7 +483,7 @@ div#torrent_inspector { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>* { border-color: transparent; height: auto; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector div.inspector_torrent_file_list_entry_name, @@ -495,7 +496,7 @@ div#torrent_inspector div.tracker_host { /*Info button*/ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info { background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:hover:before { @@ -514,7 +515,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-inf div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info.selected { background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active, @@ -535,7 +536,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-inf /*Peers Button*/ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers { background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:hover:before { @@ -554,7 +555,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-pee div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers.selected { background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active, @@ -575,7 +576,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-pee /*Tracker Button*/ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers { background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:hover:before { @@ -594,7 +595,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-tra div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers.selected { background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active, @@ -615,7 +616,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-tra /*Files Button*/ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files { background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:hover:before { @@ -634,7 +635,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-fil div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files.selected { background-image: none; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active, @@ -653,7 +654,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-fil } tr.inspector_peer_entry.odd { - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } /* Priority buttons */ @@ -783,13 +784,13 @@ div.file-priority-radiobox>div.high.selectedbefore { } div#torrent_inspector li.inspector_tracker_entry.odd { - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); } /*Bottom Toolbar*/ div.torrent_footer { border-top: 1px solid transparent; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); background-image: none; height: 30px; } @@ -973,7 +974,7 @@ ul.torrent_list li.torrent.compact div.torrent_name { .ui-widget-header .ui-state-focus { border: 1px solid transparent; background: none; - background-color: rgba(255, 255, 255, 0.1); + background: var(--transparency-light-10); color: var(--text-hover); outline: none; } diff --git a/css/base/unraid/unraid-base.css b/css/base/unraid/unraid-base.css index e9a7c65d..a9e5cdad 100644 --- a/css/base/unraid/unraid-base.css +++ b/css/base/unraid/unraid-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); * { outline: none; @@ -95,7 +96,7 @@ pre { } #header .block { - background-color: rgb(0 0 0 / 20%); + background: var(--transparency-dark-20); border-radius: 0px 0px 0px 25px; } @@ -122,12 +123,12 @@ pre { } textarea { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } /*DASHBOARD*/ table.share_status.dashboard { - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); border: 1px solid rgba(255, 255, 255, .25); } @@ -153,7 +154,7 @@ table.tablesorter thead tr th { .sys, .usage-disk, .usage-bar { - background: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35) } .usage-disk>span:first-child { @@ -177,12 +178,12 @@ table.tablesorter thead tr th { /*MAIN*/ #title { border-bottom: 1px solid rgba(255, 255, 255, .25); - background-color: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); color: var(--text-hover); } table { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } table.disk_status thead tr:first-child td, @@ -193,11 +194,11 @@ table.tablesorter thead tr th, table.tablesorter tbody tr:nth-child(even), table.tablesorter thead tr .tablesorter-headerAsc, table.tablesorter thead tr .tablesorter-headerDesc { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } table.disk_status tbody tr:nth-child(even) { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } table.disk_status thead tr:last-child { @@ -286,7 +287,7 @@ a.button:hover, /* USERS */ div.user-list { border: 1px solid rgba(255, 255, 255, .15); - background-color: rgba(255, 255, 255, .05); + background: var(--transparency-light-05); } /* SETTINGS */ @@ -356,8 +357,8 @@ div.tab [type=radio]+label:hover { } div.tab [type=radio]+label { - border: 1px solid rgb(255 255 255 / 25%); - background-color: rgb(0 0 0 / 50%); + border: 1px solid var(--transparency-light-25); + background: var(--transparency-dark-50); opacity: 0.5; } @@ -382,7 +383,7 @@ background-color: var(--text); } .ca_holderDocker { - background-color: rgb(0 0 0 / 10%) !important; + background: var(--transparency-dark-10) !important; border-color: rgb(0 0 0 / 25%) !important; } @@ -456,12 +457,12 @@ li.caMenuItem:hover { } .ca_holder { - background-color: rgb(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; border-color: rgba(255, 255, 255, 0.1) !important; } .ca_holder:hover { - background-color: rgba(0, 0, 0, 0.45) !important; + background: var(--transparency-dark-45) !important; } .supportButton, @@ -593,7 +594,7 @@ span .maxPerPage { #searchBox, .searchSubmit { - background: rgba(255, 255, 255, 0.05) !important; + background: var(--transparency-light-05) !important; } /* CA slide in menu */ @@ -637,7 +638,7 @@ div.tabs { } .dropdown-menu .divider { - background-color: rgb(255 255 255 / 10%) !important; + background: var(--transparency-light-10) !important; border-bottom: 1px solid rgb(255 255 255 / 10%) !important; } @@ -645,12 +646,12 @@ div.tabs { .dropdown-menu li>a:focus, .dropdown-submenu:hover>a { color: var(--text-hover) !important; - background: rgb(255 255 255 / 10%) !important; + background: var(--transparency-light-10) !important; } /*VM MANAGER*/ div.shade-black { - background-color: rgb(0 0 0 / 15%) !important; + background-color: var(--transparency-dark-15) !important; } /* MODAL */ @@ -685,7 +686,7 @@ blockquote { border-top: 2px solid rgb(0 0 0 / 25%); border-bottom: 2px solid rgb(0 0 0 / 25%); color: var(--text); - background-color: rgb(0 0 0 / 10%); + background: var(--transparency-dark-10); } /* MY SERVERS */ @@ -734,7 +735,7 @@ unraid-authed::part(div[data-v-050c892a] > button) { /* Edit template*/ #contDescription { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); padding: 1%; border-radius: 5px; } diff --git a/css/base/uptime-kuma/uptime-kuma-base.css b/css/base/uptime-kuma/uptime-kuma-base.css index e0d1f21f..16a5bc7b 100644 --- a/css/base/uptime-kuma/uptime-kuma-base.css +++ b/css/base/uptime-kuma/uptime-kuma-base.css @@ -1,4 +1,5 @@ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body, .dark { @@ -80,21 +81,21 @@ a, .shadow-box, .dark .shadow-box { box-shadow: 0px 0px 20px 10px #0000001a; - background: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } .list .item:hover { - background-color: rgba(255, 255, 255, .15) !important; + background: var(--transparency-light-15) !important; } .dark .list .item.active, .list .item.active { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .dark .hp-bar-big .beat.empty, .hp-bar-big .beat.empty { - background-color: rgba(255, 255, 255, .45) !important; + background: var(--transparency-light-45) !important; } @@ -114,7 +115,7 @@ td { .dark .table-hover>tbody>tr:hover, .table-hover>tbody>tr:hover { - --bs-table-accent-bg: rgba(0, 0, 0, .2); + --bs-table-accent-bg: var(--transparency-dark-20); color: var(--text); } @@ -132,7 +133,7 @@ td { .dropdown-item:hover, .dropdown-item:focus { color: var(--text-hover) !important; - background-color: rgba(255, 255, 255, .1) !important; + background: var(--transparency-light-10) !important; } .dark .dropdown-clear-data ul { @@ -144,7 +145,7 @@ td { /* HEADER */ .dark header, #app>div>header { - background-color: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; border-bottom-color: rgba(255, 255, 255, 0) !important; } @@ -268,7 +269,7 @@ td { .form-select, .form-control { color: var(--text); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; } @@ -326,7 +327,7 @@ td { .multiselect__option--selected, .dark .multiselect__option--selected { - background: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); color: var(--text-hover); font-weight: 700; } @@ -340,7 +341,7 @@ td { .dark .multiselect__tags, .multiselect__tags { color: var(--text); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); border-color: transparent; } @@ -348,7 +349,7 @@ td { .dark .multiselect__single, .multiselect__input, .multiselect__single { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; color: var(--text-hover) !important; } diff --git a/css/base/vuetorrent/vuetorrent-base.css b/css/base/vuetorrent/vuetorrent-base.css index 65e61be2..54bcdb9d 100644 --- a/css/base/vuetorrent/vuetorrent-base.css +++ b/css/base/vuetorrent/vuetorrent-base.css @@ -13,6 +13,7 @@ /* MOBILE */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); @media (max-width: 720px) { @@ -49,12 +50,12 @@ html { /* SCROLL BAR */ #app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); border-radius: 20px } #app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, .25); + background: var(--transparency-light-25); border-radius: 20px } @@ -102,7 +103,7 @@ p, /* CARDS */ [class*="theme--"].v-card { - background-color: rgba(0, 0, 0, .5); + background: var(--transparency-dark-50); color: var(--text); } @@ -112,7 +113,7 @@ p, } .v-app-bar.v-app-bar--hide-shadow { - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } .v-app-bar.v-app-bar--is-scrolled { @@ -132,18 +133,18 @@ p, /* SIDE MENU */ .v-application .primary { - background: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; color: var(--text) !important; } .v-application .secondary { - background-color: rgba(255, 255, 255, .15) !important; + background: var(--transparency-light-15) !important; border-color: rgba(255, 255, 255, .15) !important; } [class*="theme--"].v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border { - background-color: rgba(0, 0, 0, .12); + background: var(--transparency-dark-10); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { @@ -164,7 +165,7 @@ p, .v-navigation-drawer--temporary:not(.v-navigation-drawer--close), .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) { - background-color: rgba(0, 0, 0, 0.9); + background: var(--transparency-dark-10); } } @@ -199,7 +200,7 @@ p, } [class*="theme--"].v-tabs>.v-tabs-bar { - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); } .v-application .white, @@ -406,12 +407,12 @@ p, /* TABLE */ [class*="theme--"].v-data-table { - background-color: rgba(0, 0, 0, .65); + background: var(--transparency-dark-65); color: var(--text); } [class*="theme--"].v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) { - background: rgb(255 255 255 / 15%); + background: var(--transparency-light-15); } [class*="theme--"].v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>td:last-child, @@ -435,7 +436,7 @@ p, /* TOOLTIP */ .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title, .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { - background: rgba(0, 0, 0, 0.7); + background: var(--transparency-dark-70); border-bottom: 1px solid rgba(255, 255, 255, .1); } diff --git a/css/base/webtools/webtools-base.css b/css/base/webtools/webtools-base.css index 2af73e66..b7eaa31b 100644 --- a/css/base/webtools/webtools-base.css +++ b/css/base/webtools/webtools-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); body { background: var(--main-bg-color); @@ -72,7 +73,7 @@ content-loading .contentLoading { /* NAVBAR */ .head { - background-color: rgb(0 0 0 / 0.25); + background: var(--transparency-dark-25); box-shadow: 0 0 0 0px rgb(0 0 0 / 0%); } @@ -82,23 +83,23 @@ content-loading .contentLoading { /* SIDE MENU */ .menu .toggle { - background: rgb(0 0 0 / .25); + background: var(--transparency-dark-25); color: var(--accent-color); } .menu { - background-color: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); } .menu .item { - background: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--button-text); box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .0); } .menu .item:hover { - background: rgb(255 255 255 / .16); + background: var(--transparency-light-15); color: var(--text-hover); } @@ -136,7 +137,7 @@ content-loading .contentLoading { /* PAGES */ .sub .settings { - background: rgb(255 255 255 / 25%); + background: var(--transparency-light-25); } label { @@ -150,30 +151,30 @@ label { .fm .sections .section, .playlists .userContainer .fileContainer, .playlists .playlistContainer { - background: rgb(255 255 255 / .08); + background: var(--transparency-light-10); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0); border: transparent; } .uas .type:hover { - background: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--text-hover); } .sub .rowShow:hover, .uas .repoContainer .repo:hover, .fm .sections .section:hover { - background: rgb(255 255 255 / .16); + background: var(--transparency-light-15); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0); } .expanded:hover { - background: rgb(255 255 255 / .08) !important; + background: var(--transparency-light-10) !important; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0); } .sub .rowShow .lineShow .contentShow .detail { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); color: var(--text) !important; } @@ -183,11 +184,11 @@ label { } .sub .rowShow .lineShow .contentShow .detail .subItem.selected { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); } .sub .rowShow .lineShow .contentShow .detail .subItem.checked { - background: rgba(255, 255, 255, 0.5); + background: var(--transparency-light-50); color: var(--text-hover); } @@ -196,12 +197,12 @@ label { } .sub .rowShow .lineShow .contentShow .tvshow { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); color: var(--button-text); } .sub .rowShow .lineShow .contentShow .tvshow:hover { - background-color: rgb(255 255 255 / 16%); + background: var(--transparency-light-15); } @@ -229,11 +230,11 @@ label { } .logs .logDetails { - background-color: rgb(255 255 255 / 14%); + background: var(--transparency-light-15); } .logs .search { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } .logs .logDetails table tr.danger { @@ -243,7 +244,7 @@ label { .uas .repoContainer .repo .details .row, .uas .repoContainer .repo .details .row:nth-child(2n) { - background: rgb(0 0 0 / 25%); + background: var(--transparency-dark-25); color: var(--text); } @@ -348,7 +349,7 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla .uas .typesMenu .search .searchInput, .logs .search .searchInput { color: var(--text) !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; border: 1px solid transparent !important; box-shadow: none !important; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; @@ -359,15 +360,15 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla .uas .manualInstall:focus, .uas .typesMenu .search .searchInput:focus, .logs .search .searchInput:focus { - background-color: rgba(0, 0, 0, .5) !important; + background: var(--transparency-dark-50) !important; color: var(--text-hover) !important; } /* TABLE */ .info tr:nth-child(2n+1) { - background-color: rgb(255 255 255 / 0.08); + background-color: var(--transparency-light-10); } .logs .logDetails table tr:nth-child(even) { - background-color: rgb(255 255 255 / 8%); + background: var(--transparency-light-10); } \ No newline at end of file diff --git a/css/base/whisparr/whisparr-base.css b/css/base/whisparr/whisparr-base.css index ee8c724a..27999f6a 100644 --- a/css/base/whisparr/whisparr-base.css +++ b/css/base/whisparr/whisparr-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); :root { --calendar-in-cinemas: 53 197 244; @@ -168,7 +169,7 @@ a:hover { } [class*="SelectInput-select-"] { - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="SelectInput-select-"]:active, @@ -185,7 +186,7 @@ a:hover { } [class*="AutoSuggestInput-suggestionHighlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="CheckInput-primaryIsChecked-"] { @@ -201,7 +202,7 @@ a:hover { /* HEADER */ [class*="PageHeader-header-"] { - background-color: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); color: var(--text); } @@ -231,16 +232,16 @@ a:hover { } [class*="MovieSearchInput-highlighted-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* SIDE MENU */ [class*="PageSidebar-sidebarContainer-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="PageSidebar-sidebar-"] { @@ -263,7 +264,7 @@ a:hover { } [class*="PageSidebarItem-isActiveParentLink-"] { - background-color: rgba(0, 0, 0, 0.15); + background: var(--transparency-dark-15); } @media only screen and (max-width: 768px) { @@ -316,15 +317,15 @@ a:hover { } [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="AddListMoviePoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="MovieIndexOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="MovieIndexOverview-link-"]:hover { @@ -332,7 +333,7 @@ a:hover { } [class*="ProgressBar-container-"] { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*=".ProgressBar-purple-"] { @@ -343,7 +344,7 @@ a:hover { [class*="MovieDetailsSeason-season-"], [class*="MovieDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="MovieDetailsSeason-actionButton-"], @@ -386,17 +387,17 @@ a:hover { [class*="MovieDetailsSeason-collapseButtonContainer-"] { border: none !important; - background-color: rgba(0, 0, 0, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="MovieFileEditorTable-container-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); } [class*="ExtraFileTable-container-"] { border: 1px solid transparent; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], @@ -509,7 +510,7 @@ a:hover { /* Table options*/ [class*="TableOptionsColumn-column-"] { - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); border: none; } @@ -523,17 +524,17 @@ a:hover { } [class*="TableRow-row-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="TableRowCell-cell-"] { - border-top: 1px solid rgb(255 255 255 / 25%); + border-top: 1px solid var(--transparency-light-25); } /* TOP MENU SERIES */ [class*="PageToolbar-toolbar-"] { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text); } @@ -569,7 +570,7 @@ a:hover { [class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"], [class*="MovieCreditPoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -596,13 +597,13 @@ a:hover { [class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:focus { - background: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; color: var(--text-hover); text-decoration: none; } [class*="MenuItemSeparator-separator-"] { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* ALPHABET JUMP BAR */ @@ -613,12 +614,12 @@ a:hover { /* MINI RIGHT SCROLL BAR */ [class*="OverlayScroller-thumb-"], [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="OverlayScroller-thumb-"]:hover, [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background-color: rgba(255, 255, 255, 0.25) !important; + background: var(--transparency-light-25) !important; } /* ADD NEW */ @@ -642,12 +643,12 @@ a:hover { [class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"]:hover { - background-color: rgba(255, 255, 255, 0.20) !important; + background: var(--transparency-light-20) !important; color: var(--text-hover); } [class*="EnhancedSelectInputOption-option-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="HintedSelectInputOption-hintText-"] { @@ -686,7 +687,7 @@ a:hover { [class*="AddNewMovie-searchIconContainer-"], [class*="CheckInput-isIndeterminate-"] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -713,7 +714,7 @@ a:hover { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="TagInput-input-"][class*="TagInput-isFocused-"] { @@ -742,7 +743,7 @@ a:hover { [class*="AddNewMovieSearchResult-searchResult-"]:hover, [class*="AddNewMovieSearchResult-underlay-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="AddNewmovieModalContent-year-"] { @@ -767,13 +768,13 @@ a:hover { } [class*="VirtualTableRow-row-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } /* Drop down menu/button*/ [class*="ImportMovieSelectMovie-button-"] { border: none !important; - background-color: rgba(0, 0, 0, 0.25) !important; + background: var(--transparency-dark-25) !important; } [class*="ImportMovieSelectMovie-content-"], @@ -791,7 +792,7 @@ a:hover { } [class*="ImportMovieSearchResult-movie-"]:hover { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); } [class*="ImportMovieTitle-year-"] { @@ -810,7 +811,7 @@ a:hover { [class*="DiscoverMoviePoster-title-"], [class*="DiscoverMoviePosterInfo-info-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -824,17 +825,17 @@ a:hover { } [class*="AddListMovieOverview-content-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } [class*="PageJumpBarItem-jumpBarItem-"]:hover { color: var(--text-hover); - background: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } /*Posters*/ [class*="AddListMoviePoster-title-"] { - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -842,7 +843,7 @@ a:hover { /* FOOTER */ [class*="PageContentFooter-contentFooter-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } @@ -928,18 +929,18 @@ a:hover { } [class*="DayOfWeek-dayOfWeek-"] { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); color: var(--text-hover); } [class*="CalendarDay-dayOfMonth-"] { border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background-color: hsla(0, 0%, 100%, .25) !important; + background: var(--transparency-dark-25) !important; } [class*="CalendarDay-day-"], @@ -990,7 +991,7 @@ a:hover { /* calendar agenda */ [class*="AgendaEvent-event-"]:hover { - background-color: hsla(0, 0%, 100%, .08) !important; + background: var(--transparency-dark-10) !important; } /* SETTINGS */ @@ -1017,15 +1018,15 @@ a:hover { } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 255, 0.15); + background: var(--transparency-light-15); } [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"] { @@ -1033,17 +1034,17 @@ a:hover { } [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background-color: rgba(255, 255, 2550, 0.25); + background: var(--transparency-light-25); } [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background-color: rgba(255, 255, 2550, 0.35); + background: var(--transparency-light-35); } /* PROFILES */ [class*="Card-card-"], [class*="QualityProfiles-addQualityProfile-"] { - background-color: rgba(0, 0, 0, .45); + background: var(--transparency-dark-45); box-shadow: 0 0 10px 1px #000000; color: var(--text); } @@ -1068,12 +1069,12 @@ a:hover { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="LanguageProfileItem-languageProfileItem-"] { border: none; - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); color: var(--text-hover); } [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25) } [class*="KeyValueListInputItem-keyInput-"], @@ -1085,7 +1086,7 @@ a:hover { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { border: 1px solid transparent; - background: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25) } [class*="QualityDefinitions-sizeLimitHelpText-"] { @@ -1119,7 +1120,7 @@ a:hover { /* LOG */ [class*="Alert-info-"] { border-color: transparent; - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: #FFC107; } @@ -1145,12 +1146,12 @@ a:hover { /* Login Page */ .panel-body { - background-color: rgba(0, 0, 0, 0.25); + background: var(--transparency-dark-25); color: var(--text); } .panel-header { - background-color: rgba(0, 0, 0, 0.45); + background: var(--transparency-dark-45); } .forgot-password { @@ -1160,7 +1161,7 @@ a:hover { input[type=email], input[type=password] { border: none; - background-color: rgba(255, 255, 255, 0.08); + background: var(--transparency-light-10); color: var(--text-hover); } @@ -1181,7 +1182,7 @@ input[type=password] { outline: 0; border-color: var(--text-hover); box-shadow: none; - background-color: rgba(255, 255, 255, 0.25); + background: var(--transparency-light-25); } /* Custom filter */ @@ -1190,7 +1191,7 @@ input[type=password] { } [class*="CustomFilter-customFilter-"]:hover { - background-color: hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-10); } [class*="SelectMovieModalContent-path-"] { diff --git a/css/base/xbackbone/xbackbone-base.css b/css/base/xbackbone/xbackbone-base.css index 8c41d36f..8619cf70 100644 --- a/css/base/xbackbone/xbackbone-base.css +++ b/css/base/xbackbone/xbackbone-base.css @@ -11,6 +11,7 @@ /* https://github.com/gilbN/theme.park */ @import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); .bg-light { background: var(--main-bg-color) !important; @@ -31,7 +32,7 @@ min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .2); + background: var(--transparency-dark-20); background-clip: padding-box; } @@ -43,7 +44,7 @@ min-height: 50px; border: 3px solid transparent; border-radius: 8px; - background-color: hsla(0, 0%, 100%, .5); + background: var(--transparency-light-50); background-clip: padding-box; } @@ -79,7 +80,7 @@ code { font-size: .875em; color: #d63384; word-wrap: break-word; - background: rgb(0 0 0 / 50%); + background: var(--transparency-dark-50); padding: 2px 6px; border-radius: 5px; } @@ -99,7 +100,7 @@ a:hover { /* TOP NAV */ .bg-primary { - background: rgba(0, 0, 0, .15) !important; + background: var(--transparency-dark-15) !important; } .navbar-dark .navbar-brand { @@ -130,7 +131,7 @@ a:hover { .dropdown-item:focus, .dropdown-item:hover { color: var(--text-hover); - background-color: rgba(255, 255, 255, .1); + background: var(--transparency-light-10); } .dropdown-item.disabled, @@ -162,13 +163,13 @@ a:hover { .btn-light { color: var(--button-text); - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); border-color: rgba(255, 255, 255, .08); } .btn-light:hover { color: var(--button-text-hover); - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); border-color: rgba(255, 255, 255, .08); } @@ -333,7 +334,7 @@ a:hover { /* FORMS */ .form-control { color: var(--text-hover); - background-color: rgba(0, 0, 0, .15); + background: var(--transparency-dark-15); border: 1px solid rgba(0, 0, 0, .15); } @@ -347,7 +348,7 @@ a:hover { textarea.form-control:focus { color: var(--text-hover); - background: rgba(0, 0, 0, .35); + background: var(--transparency-dark-35); border-color: rgba(255, 255, 255, .15); outline: 0; box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 0%); @@ -355,7 +356,7 @@ textarea.form-control:focus { .form-control:disabled, .form-control[readonly] { - background-color: rgba(255, 255, 255, .15); + background: var(--transparency-light-15); opacity: 1; } @@ -397,13 +398,13 @@ textarea.form-control:focus { .page-item.disabled .page-link { color: var(--text-muted); pointer-events: none; - background-color: rgba(255, 255, 255, .08); + background-color: var(--transparency-light-10); border-color: rgba(255, 255, 255, .08); } /* CARDS */ .card { - background-color: rgba(0, 0, 0, .25); + background: var(--transparency-dark-25); } .image-card:hover .overlay { @@ -411,7 +412,7 @@ textarea.form-control:focus { 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); + background: var(--transparency-dark-50); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } \ No newline at end of file diff --git a/css/defaults/transparent.css b/css/defaults/transparent.css new file mode 100644 index 00000000..4eaec9b7 --- /dev/null +++ b/css/defaults/transparent.css @@ -0,0 +1,28 @@ +:root { + --transparency-dark-05: rgba(0, 0, 0, .05); + --transparency-dark-10: rgba(0, 0, 0, .10); + --transparency-dark-15: rgba(0, 0, 0, .15); + --transparency-dark-25: rgba(0, 0, 0, .25); + --transparency-dark-35: rgba(0, 0, 0, .35); + --transparency-dark-40: rgba(0, 0, 0, .40); + --transparency-dark-45: rgba(0, 0, 0, .45); + --transparency-dark-50: rgba(0, 0, 0, .50); + --transparency-dark-55: rgba(0, 0, 0, .55); + --transparency-dark-60: rgba(0, 0, 0, .60); + --transparency-dark-65: rgba(0, 0, 0, .65); + --transparency-dark-70: rgba(0, 0, 0, .70); + --transparency-dark-75: rgba(0, 0, 0, .75); + --transparency-dark-80: rgba(0, 0, 0, .80); + --transparency-dark-85: rgba(0, 0, 0, .85); + --transparency-dark-90: rgba(0, 0, 0, .90); + --transparency-light-05: rgba(255, 255, 255, .05); + --transparency-light-10: rgba(255, 255, 255, .10); + --transparency-light-15: rgba(255, 255, 255, .15); + --transparency-light-20: rgba(255, 255, 255, .20); + --transparency-light-25: rgba(255, 255, 255, .25); + --transparency-light-30: rgba(255, 255, 255, .30); + --transparency-light-35: rgba(255, 255, 255, .35); + --transparency-light-45: rgba(255, 255, 255, .45); + --transparency-light-50: rgba(255, 255, 255, .50); + --transparency-light-55: rgba(255, 255, 255, .55); + } \ No newline at end of file From 694ed09af90c78a2d6b05c2a812e91718e18aebc Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 23 Apr 2022 21:43:08 +0200 Subject: [PATCH 08/34] fix: :bug: arr: CalendarDay-isToday- color fix --- css/base/lidarr/lidarr-base.css | 2 +- css/base/prowlarr/prowlarr-base.css | 2 +- css/base/radarr/radarr-base.css | 2 +- css/base/readarr/readarr-base.css | 2 +- css/base/sonarr/sonarr-base.css | 2 +- css/base/whisparr/whisparr-base.css | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/css/base/lidarr/lidarr-base.css b/css/base/lidarr/lidarr-base.css index 0012a8cf..eea4bad5 100644 --- a/css/base/lidarr/lidarr-base.css +++ b/css/base/lidarr/lidarr-base.css @@ -898,7 +898,7 @@ a:hover { [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background: var(--transparency-dark-25) !important; + background: var(--transparency-light-25) !important; } [class*="CalendarDay-day-"], diff --git a/css/base/prowlarr/prowlarr-base.css b/css/base/prowlarr/prowlarr-base.css index dc512401..b99ebfa0 100644 --- a/css/base/prowlarr/prowlarr-base.css +++ b/css/base/prowlarr/prowlarr-base.css @@ -885,7 +885,7 @@ a:hover { } [class*="CalendarDay-isToday-"] { - background: var(--transparency-dark-10) !important; + background: var(--transparency-light-10) !important; } [class*="CalendarDay-day-"], diff --git a/css/base/radarr/radarr-base.css b/css/base/radarr/radarr-base.css index 143f8694..94412d18 100644 --- a/css/base/radarr/radarr-base.css +++ b/css/base/radarr/radarr-base.css @@ -940,7 +940,7 @@ a:hover { [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background: var(--transparency-dark-25) !important; + background: var(--transparency-light-25) !important; } [class*="CalendarDay-day-"], diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css index 744c1416..e8688cbc 100644 --- a/css/base/readarr/readarr-base.css +++ b/css/base/readarr/readarr-base.css @@ -901,7 +901,7 @@ a:hover { [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background: var(--transparency-dark-25) !important; + background: var(--transparency-light-25) !important; color: var(--text-hover); } diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css index 14dde3c5..0f7c42b6 100644 --- a/css/base/sonarr/sonarr-base.css +++ b/css/base/sonarr/sonarr-base.css @@ -895,7 +895,7 @@ a:hover { [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background: var(--transparency-dark-25) !important; + background: var(--transparency-light-25) !important; } [class*="CalendarDay-day-"], diff --git a/css/base/whisparr/whisparr-base.css b/css/base/whisparr/whisparr-base.css index 27999f6a..be1c1b0e 100644 --- a/css/base/whisparr/whisparr-base.css +++ b/css/base/whisparr/whisparr-base.css @@ -940,7 +940,7 @@ a:hover { [class*="CalendarDay-isToday-"], [class*="DayOfWeek-isToday-"] { - background: var(--transparency-dark-25) !important; + background: var(--transparency-light-25) !important; } [class*="CalendarDay-day-"], From 623301bc180a1440193608eb7bd8075aaafc363f Mon Sep 17 00:00:00 2001 From: GilbN Date: Sun, 24 Apr 2022 11:03:48 +0200 Subject: [PATCH 09/34] fix: :bug: Bitwarden: Password generator fix, btn fix, bg fixes --- css/base/bitwarden/bitwarden-base.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/css/base/bitwarden/bitwarden-base.css b/css/base/bitwarden/bitwarden-base.css index 3a923b67..1942df0e 100644 --- a/css/base/bitwarden/bitwarden-base.css +++ b/css/base/bitwarden/bitwarden-base.css @@ -157,9 +157,8 @@ app-vault-groupings .card li.active>div>.fa { color: rgb(var(--accent-color)); } -body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4, -body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4>div { - background-color: var(--transparency-dark-15) !important; +html[class*="theme_"] app-password-generator .card-password .card-body { + background: var(--transparency-dark-15); } html[class*="theme_"] .password-number { @@ -385,7 +384,7 @@ html[class*="theme_"] .callout { } html[class*="theme_"] .list-group-item { - background: var(--transparency-dark-35); + background: var(--transparency-dark-25); border: 1px solid rgb(255 255 255 / 8%); color: var(--text); } @@ -581,11 +580,13 @@ app-org-vault-groupings .card li.active>div a:first-of-type { html[class*="theme_"] .table td [class*="fa-"] { color: rgb(var(--accent-color)); } - +html[class*="theme_"] .btn-outline-secondary i { + color: var(--button-text) !important; +} /* ADMIN PAGE */ .bg-light { - background: var(--main-bg-color) !important; + background: var(--main-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; @@ -596,7 +597,7 @@ html[class*="theme_"] .table td [class*="fa-"] { } .bg-light .navbar { - background: var(--main-bg-color) !important; + background: var(--main-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; From 5068f601b33514d8bc86eadfc9daa245659d20c3 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sun, 24 Apr 2022 13:16:49 +0200 Subject: [PATCH 10/34] refactor: :art: arr: Refactor sonarr and radarr-base to use servarr-base.css --- css/base/radarr/radarr-base.css | 863 +----------------------------- css/base/sonarr/sonarr-base.css | 791 +--------------------------- css/defaults/servarr-base.css | 895 ++++++++++++++++++++++++++++++++ 3 files changed, 905 insertions(+), 1644 deletions(-) create mode 100644 css/defaults/servarr-base.css diff --git a/css/base/radarr/radarr-base.css b/css/base/radarr/radarr-base.css index 94412d18..a125a644 100644 --- a/css/base/radarr/radarr-base.css +++ b/css/base/radarr/radarr-base.css @@ -12,207 +12,18 @@ @import url("/css/defaults/placeholders.css"); @import url("/css/defaults/transparent.css"); +@import url("/css/defaults/servarr-base.css"); :root { --calendar-in-cinemas: 53 197 244; - --calendar-downloading: 122 67 182; + --calendar-downloading: 122 67 182; --calendar-unmonitored: 173 173 173; - --calendar-unaired: 93 156 236; + --calendar-unaired: 93 156 236; --calendar-missing: 240 80 80; --calendar-missing-unmonitored: 255 165 0; --calendar-available: 39 194 76; - } - -body { - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); } -/* Froms */ - -[class*="FormInputHelpText-helpText-"] { - color: var(--text); -} - -[class*="FormInputGroup-inputUnit-"] { - color: var(--text) !important; -} - -/* LINKS */ -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]):not([class*="AgendaEvent"]) { - color: var(--link-color); - } - -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover { -color: var(--link-color-hover); -} - -a { - color: var(--link-color); -} - -a:hover { - color: var(--link-color-hover); -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"] { - color: var(--link-color) !important; -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"]: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 var(--text-hover); -} - -/* MODAL */ -[class*="ModalHeader-modalHeader-"] { - background: var(--modal-header-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-modalContent-"] { - 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; - color: var(--text); -} - -[class*="ModalFooter-modalFooter-"] { - background: var(--modal-footer-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-top: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-closeButton-"]:hover { - color: var(--text-hover); -} - -/* INPUT */ -[class*="TagInput-internalInput-"] { - background-color: transparent; - color: var(--text-hover); -} - -[class*="SelectInput-select-"] { - background: var(--transparency-dark-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: var(--transparency-dark-10); -} - -[class*="CheckInput-primaryIsChecked-"] { - border-color: rgb(var(--accent-color)) !important; - background-color: rgb(var(--accent-color)) !important; - color: var(--label-text-color) !important; -} - -[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { - background: #fff; -} - -/* HEADER */ - -[class*="PageHeader-header-"] { - background: var(--transparency-dark-35); - color: var(--text); -} - -/* SEARCH DROPDOWN HEADER */ - -[class*="PageHeader-donate-"] { - color: #c4273c !important; -} - -/* RADARR SPECIFIC */ [class*="MovieSearchInput-sectionTitle-"] { color: var(--text-hover); } @@ -239,74 +50,17 @@ a:hover { background: var(--transparency-light-25); } -/* SIDE MENU */ -[class*="PageSidebar-sidebarContainer-"] { - background: var(--transparency-dark-25); -} - -[class*="PageSidebar-sidebar-"] { - background-color: transparent; -} - -[class*="PageSidebarItem-link-"] { - color: var(--text-hover) -} - -[class*="PageSidebarItem-link-"]:hover { - color: rgb(var(--accent-color)); - text-decoration: none; -} - -[class*="PageSidebarItem-isActiveLink-"], -[class*="PageSidebarItem-isActiveLink-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*="PageSidebarItem-isActiveParentLink-"] { - background: var(--transparency-dark-15); -} - -@media only screen and (max-width: 768px) { - [class*="PageSidebar-sidebarContainer-"] { - background: var(--main-bg-color) !important; - 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; - } -} - -[class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid rgb(var(--accent-color)); -} - -#sidebar-toggle-button { - color: var(--text); -} -#sidebar-toggle-button:hover, -#sidebar-toggle-button:focus, -#sidebar-toggle-button:active { - color: var(--text-hover); -} - /* MOVIES PAGE */ -/* RADARR SPECIFIC */ [class*="MovieIndexPoster-controls-"] { background-color: rgb(var(--accent-color)) !important; } [class*="MovieTitlesTableContent-blankpad-"], -[class*="ExtraFileTableContent-blankpad-"], [class*="MovieHistoryTableContent-blankpad-"] { color: var(--text); } /* OVERVIEW PAGE */ - [class*="MovieIndexOverviews-container-"], [class*="MovieIndexOverviews-container-"]:hover { background-color: transparent !important; @@ -332,14 +86,6 @@ a:hover { text-decoration: none; } -[class*="ProgressBar-container-"] { - background: var(--transparency-dark-25); -} - -[class*=".ProgressBar-purple-"] { - background-color: rgb(var(--accent-color)); -} - /* MOVIE PAGE */ [class*="MovieDetailsSeason-season-"], [class*="MovieDetailsSeason-collapseButtonContainer-"] { @@ -356,31 +102,6 @@ a:hover { background: transparent; } -.fa-search:hover { - color: var(--text-hover) !important; -} - -[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { - color: var(--text-hover); -} - -[class*="MonitorToggleButton-toggleButton-"] { - color: var(--text-hover); -} - - -[class*="ProtocolLabel-torrent-"] { - border-color: #00853d !important; - background-color: #00853d !important; - color: #fff !important; -} - -[class*="ProtocolLabel-usenet-"] { - border-color: #17b1d9 !important; - background-color: #17b1d9 !important; - color: #fff !important; -} - [class*="MovieDetailsSeason-seasonNumber-"] { color: var(--text-hover); } @@ -395,22 +116,6 @@ a:hover { background: var(--transparency-dark-25); } -[class*="ExtraFileTable-container-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25); -} - -[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-"] { - background: #1f1f1f; - color: #eee; -} - /* @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], @@ -426,60 +131,6 @@ a:hover { } } */ -[class*="Tooltip-top-"][class*="Tooltip-inverse-"] { - border-top-color: var(--text); -} - -[class*="Tooltip-bottom-"][class*="Tooltip-default-"] { - border-bottom-color: var(--text); -} - -[class*="Tooltip-right-"][class*="Tooltip-default-"] { - border-right-color: var(--text); -} - -[class*="EpisodeTitleLink-link-"]:hover { - color: var(--text-hover); - text-decoration: none; -} - -[class*="IconButton-button-"] { - color: var(--text); -} - -[class*="Label-default-"] [class*="IconButton-button-"], -[class*="Label-small-"] [class*="IconButton-button-"]:hover { - color: var(--label-text-color); -} - -[class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - -[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - -[class*="Label-default-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="Label-info-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--arr-queue-color); - background-color: var(--arr-queue-color); - color: var(--label-text-color); -} - [class*="MovieDetails-selectedTab-"] { border-bottom: 4px solid rgb(var(--accent-color)); } @@ -488,82 +139,6 @@ a:hover { color: var(--text-hover); } -[class*="Label-success-"] { - border-color: #27c24c; - background-color: #27c24c; - color: #000; -} - -[class*="Label-disabled-"][class*="Label-outline-"] { - color: #000; -} - -[class*="Label-outline-"] { - background-color: #999; -} - -[class*="Label-disabled-"] { - border-color: #999; - background-color: #999; - color: #000; -} - -/* Table options*/ -[class*="TableOptionsColumn-column-"] { - background: var(--transparency-dark-25); - color: var(--text-hover); - border: none; -} - -[class*="TableHeaderCell-headerCell-"] { - color: var(--text-hover); -} - -[class*="Table-table-"] { - color: var(--text); -} - -[class*="TableRow-row-"]:hover { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="TableRowCell-cell-"] { - border-top: 1px solid var(--transparency-light-25); -} - -/* TOP MENU SERIES */ -[class*="PageToolbar-toolbar-"] { - background: var(--transparency-dark-25); - color: var(--text); -} - -[class*="PageToolbarButton-label-"] { - 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: rgb(var(--accent-color)); -} - -[class*="MenuButton-menuButton-"]:hover { - color: rgb(var(--accent-color)); -} - /* POSTERS */ [class*="MovieIndexPoster-title-"], [class*="MovieIndexPoster-nextAiring-"], @@ -574,118 +149,8 @@ a:hover { color: var(--text-hover); } -/* LIBRARY TOP HEADER DROPDOWN */ -[class*="MenuItem-menuItem-"] { - color: var(--text); - background: 0; -} - -[class*="MenuContent-menuContent-"] { - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; -} - -[class*="MenuContent-scroller-"] { - box-shadow: black 0 0 5px 0px; -} - -[class*="MenuItem-menuItem-"]:hover, -[class*="MenuItem-menuItem-"]:focus { - background: var(--transparency-dark-10) !important; - color: var(--text-hover); - text-decoration: none; -} - -[class*="MenuItemSeparator-separator-"] { - background: var(--transparency-dark-10) !important; -} - -/* ALPHABET JUMP BAR */ -[class*="PageJumpBar-jumpBar-"] { - color: var(--text-hover); -} - -/* MINI RIGHT SCROLL BAR */ -[class*="OverlayScroller-thumb-"], -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background: var(--transparency-dark-10) !important; -} - -[class*="OverlayScroller-thumb-"]:hover, -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background: var(--transparency-light-25) !important; -} - -/* ADD NEW */ - -[class*="EnhancedSelectInput-options-"] { - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-options-"] { - border: 1px solid rgba(var(--accent-color)) !important; -} - -[class*="EnhancedSelectInputOption-isSelected-"], -[class*="EnhancedSelectInputOption-isSelected-"]:hover { - background: var(--transparency-light-20) !important; - color: var(--text-hover); -} - -[class*="EnhancedSelectInputOption-option-"]:hover { - background: var(--transparency-light-10); -} - -[class*="HintedSelectInputOption-hintText-"] { - color: var(--text); -} - -[class*="EnhancedSelectInput-optionsModalScroller-"] { - border: 1px solid var(--drop-down-menu-bg); - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"] { - color: var(--button-text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"]:hover { - color: var(--button-text-hover); -} - -[class*="EnhancedSelectInput-mobileCloseButtonContainer-"] { - - border-bottom: 1px solid rgba(255, 255, 255, 0.25); -} - /* SEARCH BAR */ -[class*="Input-input-"], -[class*="AddNewMovie-searchIconContainer-"], -[class*="CheckInput-isIndeterminate-"] { +[class*="AddNewMovie-searchIconContainer-"] { border: none; background: var(--transparency-light-10); color: var(--text-hover); @@ -710,32 +175,7 @@ a:hover { color: var(--text-hover) !important; } -[class*="Input-input-"]:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -[class*="TagInput-input-"][class*="TagInput-isFocused-"] { - outline: 0; - border-color: #fff; - box-shadow: none; -} - -/* TEXT COLOR */ - -[class*="PageContentBody-innerContentBody-"], -[class*="PageContentBody-contentBody-"], -.react-tabs__tab-panel .react-tabs__tab-panel--selected>div { - color: var(--text); -} - /* SEARCH RESULTS */ -[class*="SearchResult-title-"]{ - color:var(--link-color); -} - [class*="AddNewMovieSearchResult-searchResult-"], [class*="AddNewMovieSearchResult-underlay-"] { background-color: transparent !important; @@ -750,27 +190,14 @@ a:hover { color: var(--text-hover); } -[class*="RootFolderSelectInputSelectedValue-movieFolder-"], -[class*="RootFolderSelectInputSelectedValue-freeSpace-"] { +[class*="RootFolderSelectInputSelectedValue-movieFolder-"] { color: var(--text-hover); } -[class*="RootFolderSelectInputOption-freeSpace-"], [class*="RootFolderSelectInputOption-movieFolder-"] { color: var(--text-muted); } -/* IMPORT */ - -[class*="FieldSet-legend-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="VirtualTableRow-row-"]:hover { - background: var(--transparency-light-10); -} - /* Drop down menu/button*/ [class*="ImportMovieSelectMovie-button-"] { border: none !important; @@ -828,30 +255,13 @@ a:hover { background: var(--transparency-dark-10) !important; } -[class*="PageJumpBarItem-jumpBarItem-"]:hover { - color: var(--text-hover); - background: var(--transparency-dark-10); -} - /*Posters*/ [class*="AddListMoviePoster-title-"] { background: var(--transparency-light-10); color: var(--text-hover); } -/* MASS EDITOR */ -/* FOOTER */ -[class*="PageContentFooter-contentFooter-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - /* CALENDAR */ -[class*="CircularProgressBar-circularProgressBarContainer-"] svg circle { - stroke: #fff; -} - [class*="CalendarEvent-downloaded-"] { background: rgb(var(--calendar-available) / .7) !important; border-left-color: transparent !important; @@ -928,277 +338,16 @@ a:hover { border-left-color: transparent !important; } -[class*="DayOfWeek-dayOfWeek-"] { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="CalendarDay-dayOfMonth-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background: var(--transparency-dark-25); -} - -[class*="CalendarDay-isToday-"], -[class*="DayOfWeek-isToday-"] { - background: var(--transparency-light-25) !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); - color: var(--text-hover); -} - [class*="CalendarEvent-movieTitle-"], -[class*="CalendarEvent-movieInfo-"], -[class*="CalendarEvent-episodeInfo-"], -[class*="CalendarEvent-airTime-"], -[class*="CalendarEvent-link-"] { +[class*="CalendarEvent-movieInfo-"] { color: #fff !important; } -[class*="CalendarEvent-event-"] { - border-bottom: 1px solid transparent; -} - -[class*="CalendarEventGroup-eventGroup-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08) !important; -} - [class*="CalendarEventGroup-movieTitle-"] { color: var(--text-hover) !important; } -[class*="CalendarEventGroup-airTime-"] { - color: #fff; -} - -[class*="CalendarEventGroup-episodeInfo-"] { - color: #fff; -} - -[class*="LegendItem-missingMonitoredColorImpaired-"], -[class*="LegendItem-missingUnmonitoredColorImpaired-"] { - background: transparent; -} - -/* calendar agenda */ -[class*="AgendaEvent-event-"]:hover { - background: var(--transparency-dark-10) !important; -} - -/* SETTINGS */ -[class*="Settings-link-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="Settings-summary-"] { - color: var(--text); -} - -[class*="FormLabel-large-"] { - color: var(--text-hover); -} - -[class*="FormLabel-isAdvanced-"] { - color: #ff902b; -} - -/* MEDIA MANAGEMENT - FILE NAME TOKENS */ -[class*="NamingOption-small-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-example-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background: var(--transparency-dark-25); -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background: var(--transparency-dark-35); -} - -/* PROFILES */ -[class*="Card-card-"], -[class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-dark-45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - - -[class*="-cloneButton-"][class*="IconButton-button-"]:hover { - color: var(--text-hover); -} - -[class*="Card-card-"]:hover { - color: var(--text-hover); -} - -[class*="QualityProfiles-center-"], -[class*="LanguageProfiles-center-"], -[class*="ReleaseProfiles-center-"] { - background-color: transparent; - border: none; -} - -[class*="QualityProfileItem-qualityProfileItem-"], -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], -[class*="LanguageProfileItem-languageProfileItem-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: var(--transparency-dark-25) -} - -[class*="KeyValueListInputItem-keyInput-"], -[class*="KeyValueListInputItem-valueInput-"] { - border: none; - background: transparent; - color: var(--text-hover); -} - -[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25) -} - -[class*="QualityDefinitions-sizeLimitHelpText-"] { - color: var(--text); -} - -/* PROFILES */ -[class*="Indexers-center-"] { - background-color: transparent; - border: none; -} - -/* DOWNLOAD CLIENTS */ -[class*="DownloadClients-center-"] { - background-color: transparent; - border: none; -} - -/* CONNECTIONS */ -[class*="Notifications-center-"] { - background-color: transparent; - border: none; -} - -/* LISTS */ -[class*="ImportLists-center-"] { - background-color: transparent; - border: none; -} - -/* LOG */ -[class*="Alert-info-"] { - border-color: transparent; - background: var(--transparency-dark-25); - color: #FFC107; -} - -/* INDEXER */ -[class*="Restrictions-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* LISTS */ -[class*="NetImports-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* CUSTOM FORMAT */ -[class*="CustomFormats-center-"], -[class*="EditCustomFormatModalContent-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* Login Page */ - -.panel-body { - background: var(--transparency-dark-25); - color: var(--text); -} - -.panel-header { - background: var(--transparency-dark-45); -} - -.forgot-password { - color: var(--text) !important; -} - -input[type=email], -input[type=password] { - border: none; - background: var(--transparency-light-10); - color: var(--text-hover); -} - -.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: var(--button-text-hover); - text-decoration: none; -} - -.form-input:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - /* Custom filter */ -[class*="FilterBuilderRow-filterRow-"]:hover { - background-color: transparent; -} - -[class*="CustomFilter-customFilter-"]:hover { - background: var(--transparency-dark-10); -} - [class*="SelectMovieModalContent-path-"] { color: var(--text); -} - -/* Updates */ -[class*="Updates-info-"]{ - border-bottom: 1px solid rgb(var(--accent-color)); } \ No newline at end of file diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css index 0f7c42b6..f7e66d73 100644 --- a/css/base/sonarr/sonarr-base.css +++ b/css/base/sonarr/sonarr-base.css @@ -12,6 +12,7 @@ @import url("/css/defaults/placeholders.css"); @import url("/css/defaults/transparent.css"); +@import url("/css/defaults/servarr-base.css"); :root { --calendar-tv-unaired-premiere: 53 197 244; @@ -23,148 +24,14 @@ --calendar-tv-available: 39 194 76; } -body { - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -/* Froms */ - -[class*="FormInputHelpText-helpText-"] { - color: var(--text); -} - -[class*="FormInputGroup-inputUnit-"] { - color: var(--text) !important; -} - -/* LINKS */ -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]) { - color: var(--link-color); -} - -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover { - color: var(--link-color-hover); -} - -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 var(--text-hover); -} - -/* MODAL */ -[class*="ModalHeader-modalHeader-"] { - background: var(--modal-header-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-modalContent-"] { - 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; - color: var(--text); -} - -[class*="ModalFooter-modalFooter-"] { - background: var(--modal-footer-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-top: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-closeButton-"]:hover { - color: var(--text-hover); -} - -/* SONARR SPECIFIC */ /* NOTE calendar modal popup */ [class*="EpisodeSummary-infoTitle-"], [class*="EpisodeDetailsModalContent-tab-"], @@ -172,58 +39,6 @@ a:hover { color: var(--text-hover); } -/* INPUT */ -[class*="TagInput-internalInput-"] { - background-color: transparent; - color: var(--text-hover); -} - -[class*="SelectInput-select-"] { - background: var(--transparency-dark-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: var(--transparency-dark-10); -} - -[class*="CheckInput-primaryIsChecked-"] { - border-color: rgb(var(--accent-color)) !important; - background-color: rgb(var(--accent-color)) !important; - color: var(--label-text-color) !important; -} - -[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { - background: #fff; -} - -/* HEADER */ - -[class*="PageHeader-header-"] { - background: var(--transparency-dark-35); - color: var(--text); -} - -/* SEARCH DROPDOWN HEADER */ - -[class*="PageHeader-donate-"] { - color: #c4273c !important; -} - -/* SONARR SPECIFIC */ - [class*="EpisodeDetailsModalContent-selectedTab-"] { border-color: var(--accent-color-hover); background: var(--transparency-dark-40); @@ -255,70 +70,12 @@ a:hover { background: var(--transparency-light-25) !important; } -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background: var(--transparency-dark-10); -} - -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background: var(--transparency-light-25); -} - -/* SIDE MENU */ -[class*="PageSidebar-sidebarContainer-"] { - background: var(--transparency-dark-25); -} - -[class*="PageSidebar-sidebar-"] { - background-color: transparent; -} - -[class*="PageSidebarItem-link-"] { - color: var(--text-hover) -} - -[class*="PageSidebarItem-link-"]:hover { - color: rgb(var(--accent-color)); - text-decoration: none; -} - -[class*="PageSidebarItem-isActiveLink-"], -[class*="PageSidebarItem-isActiveLink-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*="PageSidebarItem-isActiveParentLink-"] { - background: var(--transparency-dark-15); -} - -@media only screen and (max-width: 768px) { - [class*="PageSidebar-sidebarContainer-"] { - background: var(--main-bg-color) !important; - } -} - -[class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid rgb(var(--accent-color)); -} - -#sidebar-toggle-button { - color: var(--text); -} - -#sidebar-toggle-button:hover, -#sidebar-toggle-button:focus, -#sidebar-toggle-button:active { - color: var(--text-hover); -} - /* SERIES PAGE */ -/* SONARR SPECIFIC */ [class*="SeriesIndexPoster-controls-"] { background-color: rgb(var(--accent-color)) !important; } /* OVERVIEW PAGE */ - [class*="SeriesIndexOverviews-container-"], [class*="SeriesIndexOverviews-container-"]:hover { background-color: transparent !important; @@ -336,15 +93,6 @@ a:hover { text-decoration: none; } -[class*="ProgressBar-container-"] { - background: var(--transparency-dark-25); -} - - -[class*=".ProgressBar-purple-"] { - background-color: rgb(var(--accent-color)); -} - /* SHOW PAGE */ [class*="SeriesDetailsSeason-season-"], [class*="SeriesDetailsSeason-collapseButtonContainer-"] { @@ -374,30 +122,6 @@ a:hover { color: var(--text); } -.fa-search:hover { - color: var(--text-hover) !important; -} - -[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { - color: var(--text-hover); -} - -[class*="MonitorToggleButton-toggleButton-"] { - color: #dadada; -} - -[class*="ProtocolLabel-torrent-"] { - border-color: #00853d !important; - background-color: #00853d !important; - color: #fff !important; -} - -[class*="ProtocolLabel-usenet-"] { - border-color: #17b1d9 !important; - background-color: #17b1d9 !important; - color: #fff !important; -} - [class*="SeriesDetailsSeason-seasonNumber-"] { color: var(--text-hover); } @@ -407,64 +131,10 @@ a:hover { background: var(--transparency-dark-25) !important; } -[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-"] { - 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*="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*="SeasonInfo-title-"] { - background: transparent; - } -} */ - -[class*="Tooltip-top-"][class*="Tooltip-inverse-"] { - border-top-color: var(--text); -} - -[class*="Tooltip-bottom-"][class*="Tooltip-inverse-"] { - border-bottom-color: var(--text); -} - -[class*="Tooltip-bottom-"][class*="Tooltip-default-"] { - border-bottom-color: var(--text) !important; -} - -[class*="Tooltip-right-"][class*="Tooltip-default-"] { - border-right-color: var(--text) !important; -} - [class*="EpisodeTitleLink-link-"]:hover { color: var(--link-color-hover); } -[class*="IconButton-button-"] { - color: var(--text); -} - -[class*="IconButton-button-"]:hover, -[class*="Label-small-"] [class*="IconButton-button-"] { - background-color: transparent; - color: var(--label-text-color); -} - [class*="SeriesIndexPoster-action-"] .fa-search:hover { background-color: transparent; color: var(--label-text-color) !important; @@ -476,101 +146,6 @@ a:hover { color: var(--text-hover); } -[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - -[class*="Label-default-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="Label-info-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="PageSidebarItem-status-"] [class*="Label-info-"] { - border-color: var(--arr-queue-color); - background-color: var(--arr-queue-color); - color: var(--label-text-color); -} - -[class*="Label-success-"] { - border-color: #27c24c; - background-color: #27c24c; - color: #000; -} - -[class*="Label-disabled-"][class*="Label-outline-"] { - color: #000; -} - -[class*="Label-outline-"] { - background-color: #999; -} - -[class*="Label-disabled-"] { - border-color: #999; - background-color: #999; - color: #000; -} - -/* Table options*/ -[class*="TableOptionsColumn-column-"] { - background: var(--transparency-dark-25); - color: var(--text-hover); - border: none; -} - -[class*="TableHeaderCell-headerCell-"] { - color: var(--text-hover); -} - -[class*="Table-table-"] { - color: var(--text); -} - -[class*="TableRow-row-"]:hover { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="TableRowCell-cell-"] { - border-top: 1px solid var(--transparency-light-25); -} - -/* TOP MENU SERIES */ -[class*="PageToolbar-toolbar-"] { - background: var(--transparency-dark-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: rgb(var(--accent-color)); -} - -[class*="MenuButton-menuButton-"]:hover { - color: rgb(var(--accent-color)); -} - /* POSTERS */ [class*="SeriesIndexPoster-title-"], [class*="SeriesIndexPoster-nextAiring-"], @@ -579,116 +154,17 @@ a:hover { color: var(--text-hover); } -/* SERIES TOP HEADER DROPDOWN */ -[class*="MenuItem-menuItem-"] { - color: var(--text); - background: 0; -} - -[class*="MenuContent-menuContent-"] { - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; -} - -[class*="MenuContent-scroller-"] { - box-shadow: black 0 0 5px 0px; -} - -[class*="MenuItem-menuItem-"]:hover, -[class*="MenuItem-menuItem-"]:focus { - background: var(--transparency-dark-10) !important; - color: var(--text-hover); - text-decoration: none; -} - -[class*="MenuItemSeparator-separator-"] { - background: var(--transparency-dark-10) !important; -} - -/* ALPHABET JUMP BAR */ -[class*="PageJumpBar-jumpBar-"] { - color: var(--text-hover); -} - /* MINI RIGHT SCROLL BAR */ -[class*="OverlayScroller-thumb-"], [class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb { background: var(--transparency-dark-10) !important; } -[class*="OverlayScroller-thumb-"]:hover, [class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb:hover { background: var(--transparency-light-25) !important; } -/* ADD NEW */ -[class*="EnhancedSelectInput-optionsContainer-"] { - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-options-"] { - border: 1px solid rgba(var(--accent-color)) !important; - background-color: transparent; -} - -[class*="EnhancedSelectInputOption-isSelected-"], -[class*="EnhancedSelectInputOption-isSelected-"]:hover { - background: var(--transparency-light-20) !important; - color: var(--text-hover); -} - -[class*="EnhancedSelectInputOption-option-"]:hover { - background: var(--transparency-light-10); -} - -[class*="HintedSelectInputOption-hintText-"] { - color: var(--text); -} - -[class*="EnhancedSelectInput-optionsModalScroller-"] { - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"] { - color: var(--button-text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"]:hover { - color: var(--button-text-hover); -} - -[class*="EnhancedSelectInput-mobileCloseButtonContainer-"] { - border-bottom: 1px solid rgba(255, 255, 255, 0.25); -} - /* SEARCH BAR */ -[class*="Input-input-"], -[class*="AddNewSeries-searchIconContainer-"], -[class*="CheckInput-isIndeterminate-"] { +[class*="AddNewSeries-searchIconContainer-"] { border: none; background: var(--transparency-light-10); color: var(--text-hover); @@ -709,29 +185,7 @@ a:hover { font-size: 12px; } -[class*="Input-input-"]:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -[class*="TagInput-input-"][class*="TagInput-isFocused-"] { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; -} - -/* TEXT COLOR */ -[class*="PageContentBody-innerContentBody-"] { - color: var(--text); -} - /* SEARCH RESULTS */ -[class*="SearchResult-title-"]{ - color:var(--link-color); -} - [class*="AddNewSeriesSearchResult-underlay-"] { background-color: transparent !important; } @@ -744,27 +198,14 @@ a:hover { color: var(--text-hover); } -[class*="RootFolderSelectInputSelectedValue-seriesFolder-"], -[class*="RootFolderSelectInputSelectedValue-freeSpace-"] { +[class*="RootFolderSelectInputSelectedValue-seriesFolder-"] { color: var(--text-hover); } -[class*="RootFolderSelectInputOption-freeSpace-"], [class*="RootFolderSelectInputOption-seriesFolder-"] { color: var(--text-muted); } -/* IMPORT */ - -[class*="FieldSet-legend-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="VirtualTableRow-row-"]:hover { - background: var(--transparency-dark-10); -} - /* Drop down menu/button*/ [class*="ImportSeriesSelectSeries-button-"] { border: none !important; @@ -793,14 +234,6 @@ a:hover { color: var(--text-muted); } -/* MASS EDITOR */ -/* FOOTER */ -[class*="PageContentFooter-contentFooter-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - /* SEASON PASS */ [class*="SeasonPassSeason-season-"] { @@ -883,49 +316,12 @@ a:hover { border-left-color: transparent !important; } -[class*="DayOfWeek-dayOfWeek-"] { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="CalendarDay-dayOfMonth-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background: var(--transparency-dark-25); -} - -[class*="CalendarDay-isToday-"], -[class*="DayOfWeek-isToday-"] { - background: var(--transparency-light-25) !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); - color: var(--text-hover); -} - [class*="CalendarEvent-seriesTitle-"], [class*="CalendarEvent-episodeInfo-"], -[class*="CalendarEvent-airTime-"], -[class*="Legend-legend-"] [class*="LegendItem-legendItem-"] { +[class*="CalendarEvent-airTime-"] { color: #fff !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: #fff !important; } @@ -938,186 +334,12 @@ a:hover { color: #eee; } -/* calendar agenda */ -[class*="AgendaEvent-event-"]:hover { - background: var(--transparency-dark-10) !important; -} - /*QUEUE PAGE */ /* Manual Import*/ [class*="SelectEpisodeModalContent-path-"] { color: var(--text); } -/* SETTINGS */ -[class*="Settings-link-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="Settings-summary"] { - color: var(--text); -} - -[class*="FormLabel-large-"] { - color: var(--text-hover); -} - -[class*="FormLabel-isAdvanced-"] { - color: #ff902b; -} - -/* MEDIA MANAGEMENT - FILE NAME TOKENS */ -[class*="NamingOption-option-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-example-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background: var(--transparency-light-35); -} - -/* PROFILES */ -[class*="Card-card-"], -[class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-dark-45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - -[class*="-cloneButton-"][class*="IconButton-button-"]:hover { - color: var(--text-hover); -} - -[class*="Card-card-"]:hover { - color: var(--text-hover); -} - -[class*="QualityProfiles-center-"], -[class*="LanguageProfiles-center-"], -[class*="ReleaseProfiles-center-"] { - background-color: transparent; - border: none; -} - -[class*="QualityProfileItem-qualityProfileItem-"], -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], -[class*="LanguageProfileItem-languageProfileItem-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: var(--transparency-dark-25) -} - -[class*="KeyValueListInputItem-keyInput-"], -[class*="KeyValueListInputItem-valueInput-"] { - border: none; - background: transparent; - color: var(--text-hover); -} - -[class*="QualityDefinitions-sizeLimitHelpText-"] { - color: var(--text); -} - -/* PROFILES */ -[class*="Indexers-center-"] { - background-color: transparent; - border: none; -} - -/* INDEXERS */ - -/* DOWNLOAD CLIENTS */ -[class*="DownloadClients-center-"] { - background-color: transparent; - border: none; -} - -/*INPORT LISTS */ -[class*="ImportLists-center-"] { - background-color: transparent; - border: none; -} - -/* CONNECTIONS */ -[class*="Notifications-center-"] { - background-color: transparent; - border: none; -} - -/* LOG */ -[class*="Alert-info-"] { - border-color: transparent; - background: var(--transparency-dark-25); - color: #FFC107; -} - -/* Login Page */ - -.panel-body { - background: var(--transparency-dark-25); - color: var(--text); -} - -.panel-header { - background: var(--transparency-dark-45); -} - -.forgot-password { - color: var(--text) !important; -} - -input[type=email], -input[type=password] { - border: none; - background: var(--transparency-light-10); - color: var(--text-hover); -} - -.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: var(--button-text-hover); - text-decoration: none; -} - -.form-input:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -/* Custom filter */ -[class*="FilterBuilderRow-filterRow-"]:hover { - background-color: transparent; -} - -[class*="CustomFilter-customFilter-"]:hover { - background: var(--transparency-dark-10); -} - /* Scene information */ [class*="ReleaseSceneIndicator-levelNone-"] { border-color: var(--text); @@ -1128,9 +350,4 @@ input[type=password] { [class*="ReleaseSceneIndicator-levelMapped-"] { border-color: var(--text); color: var(--text); -} - -/* Updates */ -[class*="Updates-info-"]{ - border-bottom: 1px solid rgb(var(--accent-color)); } \ No newline at end of file diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css new file mode 100644 index 00000000..53656679 --- /dev/null +++ b/css/defaults/servarr-base.css @@ -0,0 +1,895 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +@import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); + + +body { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +/* Froms */ + +[class*="FormInputHelpText-helpText-"] { + color: var(--text); +} + +[class*="FormInputGroup-inputUnit-"] { + color: var(--text) !important; +} + +/* LINKS */ +[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]):not([class*="AgendaEvent"]) { + color: var(--link-color); + } + +[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover { +color: var(--link-color-hover); +} + +a { + color: var(--link-color); +} + +a:hover { + color: var(--link-color-hover); +} + +[class*="TableRowCell-cell-"] [class*="Link-to-"] { + color: var(--link-color) !important; +} + +[class*="TableRowCell-cell-"] [class*="Link-to-"]: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 var(--text-hover); +} + +/* MODAL */ +[class*="ModalHeader-modalHeader-"] { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); +} + +[class*="ModalContent-modalContent-"] { + 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; + color: var(--text); +} + +[class*="ModalFooter-modalFooter-"] { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text-hover); + border-top: 1px solid rgb(var(--accent-color)); +} + +[class*="ModalContent-closeButton-"]:hover { + color: var(--text-hover); +} + +/* INPUT */ +[class*="TagInput-internalInput-"] { + background-color: transparent; + color: var(--text-hover); +} + +[class*="SelectInput-select-"] { + background: var(--transparency-dark-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: var(--transparency-dark-10); +} + +[class*="CheckInput-primaryIsChecked-"] { + border-color: rgb(var(--accent-color)) !important; + background-color: rgb(var(--accent-color)) !important; + color: var(--label-text-color) !important; +} + +[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { + background: #fff; +} + +/* HEADER */ + +[class*="PageHeader-header-"] { + background: var(--transparency-dark-35); + color: var(--text); +} + +/* SEARCH DROPDOWN HEADER */ + +[class*="PageHeader-donate-"] { + color: #c4273c !important; +} + +/* SIDE MENU */ +[class*="PageSidebar-sidebarContainer-"] { + background: var(--transparency-dark-25); +} + +[class*="PageSidebar-sidebar-"] { + background-color: transparent; +} + +[class*="PageSidebarItem-link-"] { + color: var(--text-hover) +} + +[class*="PageSidebarItem-link-"]:hover { + color: rgb(var(--accent-color)); + text-decoration: none; +} + +[class*="PageSidebarItem-isActiveLink-"], +[class*="PageSidebarItem-isActiveLink-"]:hover, +[class*="PageSidebarItem-link-"]:focus { + color: rgb(var(--accent-color)) !important; +} + +[class*="PageSidebarItem-isActiveParentLink-"] { + background: var(--transparency-dark-15); +} + +@media only screen and (max-width: 768px) { + [class*="PageSidebar-sidebarContainer-"] { + background: var(--main-bg-color) !important; + 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; + } +} + +[class*="PageSidebarItem-isActiveItem-"] { + border-left: 3px solid rgb(var(--accent-color)); +} + +#sidebar-toggle-button { + color: var(--text); +} +#sidebar-toggle-button:hover, +#sidebar-toggle-button:focus, +#sidebar-toggle-button:active { + color: var(--text-hover); +} + +/* OVERVIEW PAGE */ + +[class*="ProgressBar-container-"] { + background: var(--transparency-dark-25); +} + +[class*=".ProgressBar-purple-"] { + background-color: rgb(var(--accent-color)); +} + +/* ITEM PAGE */ + +[class*="ExtraFileTableContent-blankpad-"] { + color: var(--text); +} + +.fa-search:hover { + color: var(--text-hover) !important; +} + +[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { + color: var(--text-hover); +} + +[class*="MonitorToggleButton-toggleButton-"] { + color: var(--text-hover); +} + + +[class*="ProtocolLabel-torrent-"] { + border-color: #00853d !important; + background-color: #00853d !important; + color: #fff !important; +} + +[class*="ProtocolLabel-usenet-"] { + border-color: #17b1d9 !important; + background-color: #17b1d9 !important; + color: #fff !important; +} + +[class*="ExtraFileTable-container-"] { + border: 1px solid transparent; + background: var(--transparency-dark-25); +} + +[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-"] { + 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-top-"][class*="Tooltip-inverse-"] { + border-top-color: var(--text); +} + +[class*="Tooltip-bottom-"][class*="Tooltip-default-"] { + border-bottom-color: var(--text); +} + +[class*="Tooltip-right-"][class*="Tooltip-default-"] { + border-right-color: var(--text); +} + +[class*="EpisodeTitleLink-link-"]:hover { + color: var(--text-hover); + text-decoration: none; +} + +[class*="IconButton-button-"] { + color: var(--text); +} + +[class*="Label-default-"] [class*="IconButton-button-"], +[class*="Label-small-"] [class*="IconButton-button-"]:hover { + color: var(--label-text-color); +} + +[class*="IconButton-button-"]:hover { + background-color: transparent; + color: var(--text-hover); +} + +[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { + background-color: transparent; + color: var(--text-hover); +} + +[class*="Label-default-"] { + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +[class*="Label-info-"] { + border-color: rgb(var(--accent-color)); + background-color: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +[class*="PageSidebarItem-status-"][class*="Label-info-"] { + border-color: var(--arr-queue-color); + background-color: var(--arr-queue-color); + color: var(--label-text-color); +} + +[class*="Label-success-"] { + border-color: #27c24c; + background-color: #27c24c; + color: #000; +} + +[class*="Label-disabled-"][class*="Label-outline-"] { + color: #000; +} + +[class*="Label-outline-"] { + background-color: #999; +} + +[class*="Label-disabled-"] { + border-color: #999; + background-color: #999; + color: #000; +} + +/* Table options*/ +[class*="TableOptionsColumn-column-"] { + background: var(--transparency-dark-25); + color: var(--text-hover); + border: none; +} + +[class*="TableHeaderCell-headerCell-"] { + color: var(--text-hover); +} + +[class*="Table-table-"] { + color: var(--text); +} + +[class*="TableRow-row-"]:hover { + background: var(--transparency-dark-10); + color: var(--text-hover); +} + +[class*="TableRowCell-cell-"] { + border-top: 1px solid var(--transparency-light-25); +} + +/* TOP MENU */ +[class*="PageToolbar-toolbar-"] { + background: var(--transparency-dark-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: rgb(var(--accent-color)); +} + +[class*="MenuButton-menuButton-"]:hover { + color: rgb(var(--accent-color)); +} + +/* LIBRARY TOP HEADER DROPDOWN */ +[class*="MenuItem-menuItem-"] { + color: var(--text); + background: 0; +} + +[class*="MenuContent-menuContent-"] { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +[class*="MenuContent-scroller-"] { + box-shadow: black 0 0 5px 0px; +} + +[class*="MenuItem-menuItem-"]:hover, +[class*="MenuItem-menuItem-"]:focus { + background: var(--transparency-dark-10) !important; + color: var(--text-hover); + text-decoration: none; +} + +[class*="MenuItemSeparator-separator-"] { + background: var(--transparency-dark-10) !important; +} + +/* ALPHABET JUMP BAR */ +[class*="PageJumpBar-jumpBar-"] { + color: var(--text-hover); +} + +/* MINI RIGHT SCROLL BAR */ +[class*="OverlayScroller-thumb-"], +[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { + background: var(--transparency-dark-10) !important; +} + +[class*="OverlayScroller-thumb-"]:hover, +[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { + background: var(--transparency-light-25) !important; +} + +/* ADD NEW */ + +[class*="EnhancedSelectInput-options-"], +[class*="EnhancedSelectInput-optionsContainer-"] { + border-radius: 4px; + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +[class*="EnhancedSelectInput-options-"] { + border: 1px solid rgba(var(--accent-color)) !important; +} + +[class*="EnhancedSelectInputOption-isSelected-"], +[class*="EnhancedSelectInputOption-isSelected-"]:hover { + background: var(--transparency-light-20) !important; + color: var(--text-hover); +} + + +[class*="EnhancedSelectInputOption-option-"]:hover { + background: var(--transparency-light-10); +} + +[class*="HintedSelectInputOption-hintText-"] { + color: var(--text); +} + +[class*="EnhancedSelectInput-optionsModalScroller-"] { + border: 1px solid var(--drop-down-menu-bg); + border-radius: 4px; + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +[class*="EnhancedSelectInput-mobileCloseButton-"] { + color: var(--button-text); +} + +[class*="EnhancedSelectInput-mobileCloseButton-"]:hover { + color: var(--button-text-hover); +} + +[class*="EnhancedSelectInput-mobileCloseButtonContainer-"] { + + border-bottom: 1px solid rgba(255, 255, 255, 0.25); +} + +[class*="EnhancedSelectInputOption-isMobile-"] { + border-bottom: 1px solid var(--transparency-light-10) !important; +} + +/* SEARCH BAR */ +[class*="Input-input-"], +[class*="CheckInput-isIndeterminate-"] { + border: none; + background: var(--transparency-light-10); + color: var(--text-hover); +} + +[class*="Input-input-"]:focus { + outline: 0; + border-color: var(--text-hover); + box-shadow: none; + background: var(--transparency-light-25); +} + +[class*="TagInput-input-"][class*="TagInput-isFocused-"] { + outline: 0; + border-color: #fff; + box-shadow: none; +} + +/* TEXT COLOR */ + +[class*="PageContentBody-innerContentBody-"], +[class*="PageContentBody-contentBody-"], +.react-tabs__tab-panel .react-tabs__tab-panel--selected>div { + color: var(--text); +} + +/* SEARCH RESULTS */ +[class*="SearchResult-title-"]{ + color:var(--link-color); +} + +[class*="RootFolderSelectInputSelectedValue-freeSpace-"] { + color: var(--text-hover); +} + +[class*="RootFolderSelectInputOption-freeSpace-"] { + color: var(--text-muted); +} + +/* IMPORT */ + +[class*="FieldSet-legend-"] { + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); +} + +[class*="VirtualTableRow-row-"]:hover { + background: var(--transparency-light-10); +} + + +/*Title*/ +[class*="PageJumpBarItem-jumpBarItem-"]:hover { + color: var(--text-hover); + background: var(--transparency-dark-10); +} + +/* MASS EDITOR */ +/* FOOTER */ +[class*="PageContentFooter-contentFooter-"] { + border: none; + background: var(--transparency-dark-25); + color: var(--text-hover); +} + +/* CALENDAR */ +[class*="CircularProgressBar-circularProgressBarContainer-"] svg circle { + stroke: #fff; +} + +[class*="DayOfWeek-dayOfWeek-"] { + background: var(--transparency-dark-10); + color: var(--text-hover); +} + +[class*="CalendarDay-dayOfMonth-"] { + border-bottom: 1px solid hsla(0, 0%, 100%, .08); + background: var(--transparency-dark-25); +} + +[class*="CalendarDay-isToday-"], +[class*="DayOfWeek-isToday-"] { + background: var(--transparency-light-25) !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); + color: var(--text-hover); +} + +[class*="CalendarEvent-link-"], +[class*="Legend-legend-"] [class*="LegendItem-legendItem-"] { + color: #fff !important; +} + +[class*="CalendarEvent-event-"] { + border-bottom: 1px solid transparent; +} + +[class*="CalendarEventGroup-eventGroup-"] { + border-bottom: 1px solid hsla(0, 0%, 100%, .08) !important; +} + +[class*="LegendItem-missingMonitoredColorImpaired-"], +[class*="LegendItem-missingUnmonitoredColorImpaired-"] { + background: transparent; +} + +/* calendar agenda */ +[class*="AgendaEvent-event-"]:hover { + background: var(--transparency-dark-10) !important; +} + +/* SETTINGS */ +[class*="Settings-link-"] { + color: var(--text-hover); + border-bottom: 1px solid rgb(var(--accent-color)); +} + +[class*="Settings-summary-"] { + color: var(--text); +} + +[class*="FormLabel-large-"] { + color: var(--text-hover); +} + +[class*="FormLabel-isAdvanced-"] { + color: #ff902b; +} + +/* MEDIA MANAGEMENT - FILE NAME TOKENS */ +[class*="NamingOption-small-"] { + border: 1px solid transparent; +} + +[class*="NamingOption-token-"] { + background: var(--transparency-light-15); +} + +[class*="NamingOption-example-"] { + background: var(--transparency-light-25); +} + +[class*="NamingOption-option-"] { + border: 1px solid transparent; +} + +[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { + background: var(--transparency-dark-25); +} + +[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { + background: var(--transparency-dark-35); +} + +/* PROFILES */ +[class*="Card-card-"], +[class*="QualityProfiles-addQualityProfile-"] { + background: var(--transparency-dark-45); + box-shadow: 0 0 10px 1px #000000; + color: var(--text); +} + +[class*="-cloneButton-"][class*="IconButton-button-"]:hover { + color: var(--text-hover); +} + +[class*="Card-card-"]:hover { + color: var(--text-hover); +} + +[class*="QualityProfiles-center-"], +[class*="LanguageProfiles-center-"], +[class*="ReleaseProfiles-center-"] { + background-color: transparent; + border: none; +} + +[class*="QualityProfileItem-qualityProfileItem-"], +[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], +[class*="LanguageProfileItem-languageProfileItem-"] { + border: none; + background: var(--transparency-dark-25); + color: var(--text-hover); +} + +[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { + background: var(--transparency-dark-25) +} + +[class*="KeyValueListInputItem-keyInput-"], +[class*="KeyValueListInputItem-valueInput-"] { + border: none; + background: transparent; + color: var(--text-hover); +} + +[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { + border: 1px solid transparent; + background: var(--transparency-dark-25) +} + +[class*="QualityDefinitions-sizeLimitHelpText-"] { + color: var(--text); +} + +/* PROFILES */ +[class*="Indexers-center-"] { + background-color: transparent; + border: none; +} + +/* DOWNLOAD CLIENTS */ +[class*="DownloadClients-center-"] { + background-color: transparent; + border: none; +} + +/* CONNECTIONS */ +[class*="Notifications-center-"] { + background-color: transparent; + border: none; +} + +/* LISTS */ +[class*="ImportLists-center-"] { + background-color: transparent; + border: none; +} + +/* LOG */ +[class*="Alert-info-"] { + border-color: transparent; + background: var(--transparency-dark-25); + color: #FFC107; +} + +/* INDEXER */ +[class*="Restrictions-center-"] { + border: 1px solid transparent; + background-color: transparent; +} + +/* LISTS */ +[class*="NetImports-center-"] { + border: 1px solid transparent; + background-color: transparent; +} + +/* CUSTOM FORMAT */ +[class*="CustomFormats-center-"], +[class*="EditCustomFormatModalContent-center-"] { + border: 1px solid transparent; + background-color: transparent; +} + +/* Login Page */ + +.panel-body { + background: var(--transparency-dark-25); + color: var(--text); +} + +.panel-header { + background: var(--transparency-dark-45); +} + +.forgot-password { + color: var(--text) !important; +} + +input[type=email], +input[type=password] { + border: none; + background: var(--transparency-light-10); + color: var(--text-hover); +} + +.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: var(--button-text-hover); + text-decoration: none; +} + +.form-input:focus { + outline: 0; + border-color: var(--text-hover); + box-shadow: none; + background: var(--transparency-light-25); +} + +/* Custom filter */ +[class*="FilterBuilderRow-filterRow-"]:hover { + background-color: transparent; +} + +[class*="CustomFilter-customFilter-"]:hover { + background: var(--transparency-dark-10); +} + + +/* Updates */ +[class*="Updates-info-"]{ + border-bottom: 1px solid rgb(var(--accent-color)); +} \ No newline at end of file From 12866a05758a799fc12d32e4861b27c1d34249b9 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sun, 24 Apr 2022 13:38:58 +0200 Subject: [PATCH 11/34] Update PR template --- .github/CONTRIBUTING.md | 8 ++++---- .github/pull_request_template.md | 5 +++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 3121d921..eb34244b 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -3,6 +3,10 @@ - If you want to discuss changes, you can also bring it up in our Discord server - PR's are done against the develop branch. +## Bug fixes + +- When submitting bugfixes please show a before and after screenshot of the fix, and a description of what the fix does. + ## New theme option - The current variables in use can be found in any of the CSS files in `/css/theme-options/` and `/css/community-theme-options/` @@ -24,7 +28,3 @@ Remember to also to change the variables in the the `Specials` section even if y - When creating a new theme for an application please test multiple theme options to make sure it looks good on all options not just your favorite. - The PR must contain a screenshot of all the different theme options. Optionally you can also include screenshots with the community theme options. - -## Bug fixes - -- When submitting bugfixes please show a before and after screenshot of the fix, and a description of what the fix does. diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 879155f1..9dd35b0e 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -15,10 +15,15 @@ - [ ] I have read the [contributing](https://github.com/GilbN/theme.park/blob/master/.github/CONTRIBUTING.md) guideline and understand that I have made the correct modifications +- PR's are done against the develop branch. ------------------------------ +## Bug fixes + +- When submitting bugfixes please show a before and after screenshot of the fix, and a description of what the fix does. + ## Description: From 389b2590e3da20f952347cfeaa3e3017ae82cbd4 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sun, 24 Apr 2022 18:24:29 +0200 Subject: [PATCH 12/34] refactor: :art: Refactor lidarr, prowlarr,readarr, whisparr to use servarr-base.css --- css/base/lidarr/lidarr-base.css | 895 +------------------- css/base/prowlarr/prowlarr-base.css | 1096 +----------------------- css/base/readarr/readarr-base.css | 931 +-------------------- css/base/whisparr/whisparr-base.css | 1191 +-------------------------- css/defaults/servarr-base.css | 52 +- 5 files changed, 54 insertions(+), 4111 deletions(-) diff --git a/css/base/lidarr/lidarr-base.css b/css/base/lidarr/lidarr-base.css index eea4bad5..009169cf 100644 --- a/css/base/lidarr/lidarr-base.css +++ b/css/base/lidarr/lidarr-base.css @@ -12,6 +12,7 @@ @import url("/css/defaults/placeholders.css"); @import url("/css/defaults/transparent.css"); +@import url("/css/defaults/servarr-base.css"); :root { --calendar-downloading: 122 67 182; @@ -22,197 +23,6 @@ --calendar-missing: 240 80 80; } -body { - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -/* Froms */ - -[class*="FormInputHelpText-helpText-"] { - color: var(--text); -} - -[class*="FormInputGroup-inputUnit-"] { - color: var(--text) !important; -} - -/* LINKS */ -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]) { - color: var(--link-color); - } - -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover { -color: var(--link-color-hover); -} - -a { - color: var(--link-color); -} - -a:hover { - color: var(--link-color-hover); -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"] { - color: var(--link-color) !important; -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"]: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 var(--text-hover); -} - -/* MODAL */ -[class*="ModalHeader-modalHeader-"] { - background: var(--modal-header-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="Modal-large-"], -[class*="Modal-modal-"], -[class*="ModalContent-modalContent-"] { - 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; - color: var(--text); -} - -[class*="ModalFooter-modalFooter-"] { - background: var(--modal-footer-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-top: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-closeButton-"]:hover { - color: var(--text-hover); -} - -/* INPUT */ -[class*="TagInput-internalInput-"] { - background-color: transparent; - color: var(--text-hover); -} - -[class*="SelectInput-select-"] { - background: var(--transparency-dark-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: var(--transparency-dark-10); -} - -[class*="CheckInput-primaryIsChecked-"] { - border-color: rgb(var(--accent-color)) !important; - background-color: rgb(var(--accent-color)) !important; - color: var(--label-text-color) !important; -} - -[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { - background: #fff; -} - -/* HEADER */ - -[class*="PageHeader-header-"] { - background: var(--transparency-dark-35); - color: var(--text); -} - -/* SEARCH DROPDOWN HEADER */ - -[class*="PageHeader-donate-"] { - color: #c4273c !important; -} - /* LIDARR SPECIFIC */ [class*="ArtistSearchInput-sectionTitle-"] { color: var(--text-hover); @@ -242,139 +52,18 @@ a:hover { } /* MINI RIGHT SCROLL BAR */ -[class*="OverlayScroller-thumb-"], -[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb, -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { +[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb { background: var(--transparency-dark-10) !important; } - -[class*="OverlayScroller-thumb-"]:hover, -[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover, -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { +[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover { background: var(--transparency-light-25) !important; } -/* ADD NEW */ -[class*="EnhancedSelectInput-options-"] { - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-options-"] { - border: 1px solid rgba(var(--accent-color)) !important; -} - -[class*="EnhancedSelectInputOption-isSelected-"], -[class*="EnhancedSelectInputOption-isSelected-"]:hover { - background: var(--transparency-light-20) !important; - color: var(--text-hover); -} - -[class*="EnhancedSelectInputOption-option-"]:hover { - background: var(--transparency-light-10); -} - -[class*="HintedSelectInputOption-hintText-"] { - color: var(--text); -} - -[class*="EnhancedSelectInput-optionsModalScroller-"] { - border: 1px solid var(--drop-down-menu-bg); - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"] { - color: var(--button-text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"]:hover { - color: var(--button-text-hover); -} - -[class*="EnhancedSelectInput-mobileCloseButtonContainer-"] { - - border-bottom: 1px solid rgba(255, 255, 255, 0.25); -} - -/* SIDE MENU */ -[class*="PageSidebar-sidebarContainer-"] { - background: var(--transparency-dark-25); -} - -[class*="PageSidebar-sidebar-"] { - background-color: transparent; -} - -[class*="PageSidebarItem-link-"] { - color: var(--text-hover) -} - -[class*="PageSidebarItem-link-"]:hover { - color: rgb(var(--accent-color)); - text-decoration: none; -} - -[class*="PageSidebarItem-isActiveLink-"], -[class*="PageSidebarItem-isActiveLink-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*="PageSidebarItem-isActiveParentLink-"] { - background: var(--transparency-dark-15); -} - -@media only screen and (max-width: 768px) { - [class*="PageSidebar-sidebarContainer-"] { - background: var(--main-bg-color) !important; - 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; - } -} - -[class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid rgb(var(--accent-color)); -} - -#sidebar-toggle-button { - color: var(--text); -} -#sidebar-toggle-button:hover, -#sidebar-toggle-button:focus, -#sidebar-toggle-button:active { - color: var(--text-hover); -} - /* LIBRARY PAGE */ -/* LIDARR SPECIFIC */ [class*="ArtistIndexPoster-controls-"] { background-color: rgb(var(--accent-color)) !important; } -/* OVERVIEW PAGE */ - /* OVERVIEW PAGE */ [class*="ArtistIndexOverview-container-"], [class*="ArtistIndexOverview-container-"]:hover { @@ -393,15 +82,6 @@ a:hover { text-decoration: none; } -[class*="ProgressBar-container-"] { - background: var(--transparency-dark-25); -} - -[class*=".ProgressBar-purple-"] { - background-color: rgb(var(--accent-color)); -} - - /*ARTIST PAGE*/ [class*="ArtistDetailsSeason-albumType-"], [class*="ArtistDetailsSeason-collapseButtonContainer-"] { @@ -420,36 +100,6 @@ a:hover { border-top: 1px solid rgba(255, 255, 255, 0.5); } -/* .fa-search:hover { - color: var(--text-hover) !important; -} */ - -[class*="Label-default-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { - color: var(--text-hover); -} - -[class*="MonitorToggleButton-toggleButton-"] { - color: #dadada; -} - -[class*="ProtocolLabel-torrent-"] { - border-color: #00853d !important; - background-color: #00853d !important; - color: #fff !important; -} - -[class*="ProtocolLabel-usenet-"] { - border-color: #17b1d9 !important; - background-color: #17b1d9 !important; - color: #fff !important; -} - /*ARTIST ALBUM PAGE*/ [class*="AlbumDetailsMedium-mediumNumber-"] { color: var(--text-hover); @@ -484,157 +134,6 @@ a:hover { color: var(--text-hover); } -[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-"] { - background: #1f1f1f; - color: var(--text); -} -/* -@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-top-"][class*="Tooltip-inverse-"] { - border-top-color: var(--text); -} - -[class*="Tooltip-bottom-"][class*="Tooltip-default-"] { - border-bottom-color: var(--text); -} - -[class*="Tooltip-right-"][class*="Tooltip-default-"] { - border-right-color: var(--text); -} - -[class*="EpisodeTitleLink-link-"]:hover { - color: var(--text-hover); - text-decoration: none; -} - -[class*="IconButton-button-"] { - color: var(--text); -} - -[class*="Label-default-"] [class*="IconButton-button-"], -[class*="Label-small-"] [class*="IconButton-button-"]:hover { - color: var(--label-text-color); -} - -[class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - -[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - - -[class*="Label-info-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--arr-queue-color); - background-color: var(--arr-queue-color); - color: var(--label-text-color); -} - -[class*="Label-success-"] { - border-color: #27c24c; - background-color: #27c24c; - color: #000; -} - -[class*="Label-disabled-"][class*="Label-outline-"] { - color: #000; -} - -[class*="Label-outline-"] { - background-color: #999; -} - -[class*="Label-disabled-"] { - border-color: #999; - background-color: #999; - color: #000; -} - -/* Table options*/ -[class*="TableOptionsColumn-column-"] { - background: var(--transparency-dark-25); - color: var(--text-hover); - border: none; -} - -[class*="TableHeaderCell-headerCell-"] { - color: var(--text-hover); -} - -[class*="Table-table-"] { - color: var(--text); -} - -[class*="TableRow-row-"]:hover { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="TableRowCell-cell-"] { - border-top: 1px solid var(--transparency-light-25); -} - -/* TOP MENU SERIES */ -[class*="PageToolbar-toolbar-"] { - background: var(--transparency-dark-25); - color: var(--text); -} - -[class*="PageToolbarButton-label-"] { - 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: rgb(var(--accent-color)); -} - -[class*="MenuButton-menuButton-"]:hover { - color: rgb(var(--accent-color)); -} - /* POSTERS */ [class*="ArtistIndexPoster-title-"], [class*="ArtistIndexPosterInfo-info-"] { @@ -642,49 +141,9 @@ a:hover { color: var(--text-hover); } - -/* TOP HEADER DROPDOWN */ -[class*="MenuItem-menuItem-"] { - color: var(--text); - background: 0; -} - -[class*="MenuContent-menuContent-"] { - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; -} - -[class*="MenuContent-scroller-"] { - box-shadow: black 0 0 5px 0px; -} - -[class*="MenuItem-menuItem-"]:hover, -[class*="MenuItem-menuItem-"]:focus { - background: var(--transparency-dark-10) !important; - color: var(--text-hover); - text-decoration: none; -} - -[class*="MenuItemSeparator-separator-"] { - background: var(--transparency-dark-10) !important; -} - -/* ALPHABET JUMP BAR */ -[class*="PageJumpBar-jumpBar-"] { - color: var(--text-hover); -} - /* SEARCH BAR */ -[class*="Input-input-"], [class*="AddNewArtist-searchIconContainer-"], -[class*="AddNewItem-searchIconContainer-"], -[class*="CheckInput-isIndeterminate-"] { +[class*="AddNewItem-searchIconContainer-"] { border: none; background: var(--transparency-light-10); color: var(--text-hover); @@ -705,30 +164,7 @@ a:hover { font-size: 12px; } -[class*="Input-input-"]:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -[class*="TagInput-input-"][class*="TagInput-isFocused-"] { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; -} - -/* TEXT COLOR */ - -[class*="PageContentBody-innerContentBody-"] { - color: var(--text); -} - /* SEARCH RESULTS */ -[class*="SearchResult-title-"]{ - color:var(--link-color); -} - [class*="AddNewArtistSearchResult-year-"] { color: var(--text-hover); } @@ -747,15 +183,6 @@ a:hover { text-decoration: none; } -[class*="RootFolderSelectInputSelectedValue-freeSpace-"] { - color: var(--text-hover); -} - -[class*="RootFolderSelectInputOption-freeSpace-"], -[class*="RootFolderSelectInputOption-seriesFolder-"] { - color: var(--text-muted); -} - /* IMPORT ARTIST */ [class*="ImportArtistSelectArtist-content-"], [class*="ImportArtistSelectArtist-searchIconContainer-"] { @@ -798,42 +225,7 @@ a:hover { color: var(--text-hover); } - -/* IMPORT */ - -[class*="FieldSet-legend-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="VirtualTableRow-row-"]:hover { - background: var(--transparency-light-10); -} - -/*Title*/ - -[class*="PageJumpBarItem-jumpBarItem-"]:hover { - color: var(--text-hover); - background: var(--transparency-dark-10); -} - -/*Posters*/ - - -/* MASS EDITOR */ - -/* FOOTER */ -[class*="PageContentFooter-contentFooter-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - /* CALENDAR */ -[class*="CircularProgressBar-circularProgressBarContainer-"] svg circle { - stroke: #fff; -} - [class*="CalendarEvent-downloaded-"] { background: rgb(var(--calendar-available) / .7) !important; border-left-color: transparent !important; @@ -886,274 +278,6 @@ a:hover { border-left-color: transparent !important; } -[class*="DayOfWeek-dayOfWeek-"] { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="CalendarDay-dayOfMonth-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background: var(--transparency-dark-25); -} - -[class*="CalendarDay-isToday-"], -[class*="DayOfWeek-isToday-"] { - background: var(--transparency-light-25) !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); - color: var(--text-hover); -} - -[class*="CalendarEvent-event-"] { - border-bottom: 1px solid transparent; -} - -[class*="CalendarEventGroup-eventGroup-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08) !important; -} - -/* calendar agenda */ -[class*="AgendaEvent-event-"]:hover { - background: var(--transparency-dark-10) !important; -} - -/* SETTINGS */ -[class*="Settings-link-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="Settings-summary-"] { - color: var(--text); -} - -[class*="FormLabel-large-"] { - color: var(--text-hover); -} - -[class*="FormLabel-isAdvanced-"] { - color: #ff902b; -} - -/* MEDIA MANAGEMENT - FILE NAME TOKENS */ -[class*="NamingOption-small-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-example-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background: var(--transparency-light-35); -} - -/* PROFILES */ -[class*="Card-card-"], -[class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-dark-45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - - -[class*="-cloneButton-"][class*="IconButton-button-"]:hover { - color: var(--text-hover); -} - -[class*="Card-card-"]:hover { - color: var(--text-hover); -} - -[class*="QualityProfiles-center-"], -[class*="LanguageProfiles-center-"], -[class*="ReleaseProfiles-center-"] { - background-color: transparent; - border: none; -} - -[class*="QualityProfileItem-qualityProfileItem-"], -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], -[class*="LanguageProfileItem-languageProfileItem-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: var(--transparency-dark-25) -} - -[class*="KeyValueListInputItem-keyInput-"], -[class*="KeyValueListInputItem-valueInput-"] { - border: none; - background: transparent; - color: var(--text-hover); -} - -[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25) -} - -[class*="QualityDefinitions-sizeLimitHelpText-"] { - color: var(--text); -} - -/* PROFILES */ -[class*="Indexers-center-"] { - background-color: transparent; - border: none; -} - -[class*="Card-card-"], -[class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-dark-45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - -[class*="QualityProfiles-center-"], -[class*="LanguageProfiles-center-"], -[class*="MetadataProfiles-center-"], -[class*="RootFolders-center-"] { - background-color: transparent; - border: none; -} - -[class*="Indexers-center-"], -[class*="Restrictions-center-"], -[class*="DownloadClients-center-"], -[class*="ImportLists-center-"], -[class*="Notifications-center-"] { - display: inline-block; - padding: 15px 20px 15px; - border-radius: 4px; -} - -/* DOWNLOAD CLIENTS */ -[class*="DownloadClients-center-"] { - background-color: transparent; - border: none; -} - -/* CONNECTIONS */ -[class*="Notifications-center-"] { - background-color: transparent; - border: none; -} - -/* LISTS */ -[class*="ImportLists-center-"] { - background-color: transparent; - border: none; -} - -/* LOG */ -[class*="Alert-info-"] { - border-color: transparent; - background: var(--transparency-dark-25); - color: #FFC107; -} - -/* INDEXER */ -[class*="Restrictions-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* LISTS */ -[class*="NetImports-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* CUSTOM FORMAT */ -[class*="CustomFormats-center-"], -[class*="EditCustomFormatModalContent-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* Login Page */ - -.panel-body { - background: var(--transparency-dark-25); - color: var(--text); -} - -.panel-header { - background: var(--transparency-dark-45); -} - -.forgot-password { - color: var(--text) !important; -} - -input[type=email], -input[type=password] { - border: none; - background: var(--transparency-light-10); - color: var(--text-hover); -} - -.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: var(--text-hover); - text-decoration: none; -} - -.form-input:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -/* Custom filter */ -[class*="FilterBuilderRow-filterRow-"]:hover { - background-color: transparent; -} - -[class*="CustomFilter-customFilter-"]:hover { - background: var(--transparency-dark-10); -} - -/* -------------------------LIDARR STUFF------------------------------*/ - [class*="ArtistIndexHeader-sortName-"]:hover, [class*="ArtistIndexHeader-artistType-"]:hover, [class*="ArtistIndexHeader-trackCount-"]:hover, @@ -1193,14 +317,3 @@ input[type=password] { [class*="AlbumStudioAlbum-allTracks-"] { background-color: #0b8750; } - -/* CONNECTIONS */ -[class*="Label-danger-"][class*="Label-outline-"] { - color: var(--text-hover); - background-color: #f05050; -} - -/* Updates */ -[class*="Updates-info-"]{ - border-bottom: 1px solid rgb(var(--accent-color)); -} \ No newline at end of file diff --git a/css/base/prowlarr/prowlarr-base.css b/css/base/prowlarr/prowlarr-base.css index b99ebfa0..ff0df3e3 100644 --- a/css/base/prowlarr/prowlarr-base.css +++ b/css/base/prowlarr/prowlarr-base.css @@ -12,207 +12,8 @@ @import url("/css/defaults/placeholders.css"); @import url("/css/defaults/transparent.css"); +@import url("/css/defaults/servarr-base.css"); -body { - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -/* Froms */ - -[class*="FormInputHelpText-helpText-"] { - color: var(--text); -} - -[class*="FormInputGroup-inputUnit-"] { - color: var(--text) !important; -} - -/* LINKS */ -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="PageHeader-"]):not([class*="Button-small-"]) { - color: var(--link-color); - } - -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="PageHeader-translate"]):hover:not([class*="Button-small-"]):hover { -color: var(--link-color-hover); -} - -[class*="PageHeaderActionsMenu-menuButton-"]:hover { - color: #515253; -} - -[class*="PageHeader-donate-"]:hover { - color: #9c1f30 !important; -} - -a { - color: var(--link-color); -} - -a:hover { - color: var(--link-color-hover); -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"] { - color: var(--link-color) !important; -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"]: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-358v5"] { - color: var(--text); -} - -[class*="LoadingIndicator-ripple-"] { - border: 2px solid var(--text-hover); -} - -/* MODAL */ -[class*="ModalHeader-modalHeader-"] { - background: var(--modal-header-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-modalContent-"] { - 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; - color: var(--text); -} - -[class*="ModalFooter-modalFooter-"] { - background: var(--modal-footer-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-top: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-closeButton-"]:hover { - color: var(--text-hover); -} - -/* INPUT */ -[class*="TagInput-internalInput-"] { - background-color: transparent; - color: var(--text-hover); -} - -[class*="SelectInput-select-"] { - background: var(--transparency-dark-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: var(--transparency-dark-10); -} - -[class*="CheckInput-primaryIsChecked-"] { - border-color: rgb(var(--accent-color)) !important; - background-color: rgb(var(--accent-color)) !important; - color: var(--label-text-color) !important; -} - -[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { - background: #fff; - border: 1px solid #ccc; -} - -/* HEADER */ - -[class*="PageHeader-header-"] { - background: var(--transparency-dark-35); - box-shadow: none; - color: var(--text); -} - -/* SEARCH DROPDOWN HEADER */ - -[class*="PageHeader-donate-"] { - color: #c4273c !important; -} - -/* RADARR SPECIFIC */ [class*="IndexerSearchInput-sectionTitle-"] { color: var(--text-hover); } @@ -239,446 +40,6 @@ a:hover { background: var(--transparency-light-25); } -/* SIDE MENU */ -[class*="PageSidebar-sidebarContainer-"] { - background: var(--transparency-dark-25); -} - -[class*="PageSidebar-sidebar-"] { - background-color: transparent; -} - -[class*="PageSidebarItem-link-"] { - color: var(--text-hover) -} - -[class*="PageSidebarItem-link-"]:hover { - color: rgb(var(--accent-color)); - text-decoration: none; -} - -[class*="PageSidebarItem-isActiveLink-"], -[class*="PageSidebarItem-isActiveLink-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*="PageSidebarItem-isActiveParentLink-"] { - background: var(--transparency-dark-15); -} - -@media only screen and (max-width: 768px) { - [class*="PageSidebar-sidebarContainer-"] { - background: var(--main-bg-color) !important; - 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; - } -} - -[class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid rgb(var(--accent-color)); -} - -#sidebar-toggle-button { - color: var(--text); -} -#sidebar-toggle-button:hover, -#sidebar-toggle-button:focus, -#sidebar-toggle-button:active { - color: var(--text-hover); -} - -/* MOVIES PAGE */ -/* RADARR SPECIFIC */ -[class*="MovieIndexPoster-controls-"] { - background-color: rgb(var(--accent-color)) !important; -} - -/* OVERVIEW PAGE */ - -[class*="MovieIndexOverviews-container-"], -[class*="MovieIndexOverviews-container-"]:hover { - background-color: transparent !important; -} - -[class*="MovieIndexOverview-container-"]:hover [class*="MovieIndexOverview-content-"] { - background-color: transparent; -} - -[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] { - background: var(--transparency-light-10); -} - -[class*="AddListMoviePoster-title-"] { - background: var(--transparency-light-10); -} - -[class*="MovieIndexOverview-content-"]:hover { - background: var(--transparency-dark-10) !important; -} - -[class*="MovieIndexOverview-link-"]:hover { - text-decoration: none; -} - -[class*="ProgressBar-container-"] { - background: var(--transparency-dark-25); -} - -[class*=".ProgressBar-purple-"] { - background-color: rgb(var(--accent-color)); -} - -/* MOVIE PAGE */ -[class*="MovieDetailsSeason-season-"], -[class*="MovieDetailsSeason-collapseButtonContainer-"] { - border: none !important; - background: var(--transparency-dark-25) !important; -} - -[class*="MovieDetailsSeason-actionButton-"], -[class*="MovieDetailsSeason-collapseButtonIcon-"] { - color: var(--text) !important; -} - -.fa-search:hover { - color: var(--text-hover) !important; -} - -[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { - color: var(--text-hover); -} - -[class*="MonitorToggleButton-toggleButton-"] { - color: var(--text-hover); -} - - -[class*="ProtocolLabel-torrent-"] { - border-color: #00853d !important; - background-color: #00853d !important; - color: #fff !important; -} - -[class*="ProtocolLabel-usenet-"] { - border-color: #17b1d9 !important; - background-color: #17b1d9 !important; - color: #fff !important; -} - -[class*="MovieDetailsSeason-seasonNumber-"] { - color: var(--text-hover); -} - -[class*="MovieDetailsSeason-collapseButtonContainer-"] { - border: none !important; - background: var(--transparency-dark-25) !important; -} - -[class*="MovieFileEditorTable-container-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25); -} - -[class*="ExtraFileTable-container-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25); -} - -.Table-table-2C3O8 { - color: var(--text-hover); -} - -[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-"] { - 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-top-"][class*="Tooltip-inverse-"] { - border-top-color: var(--text); -} - -[class*="Tooltip-bottom-"][class*="Tooltip-default-"] { - border-bottom-color: var(--text); -} - -[class*="Tooltip-right-"][class*="Tooltip-default-"] { - border-right-color: var(--text); -} - -[class*="EpisodeTitleLink-link-"]:hover { - color: var(--text-hover); - text-decoration: none; -} - -[class*="IconButton-button-"] { - color: var(--text); -} - -[class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--label-text-color); -} - -[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - -[class*="Label-default-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="Label-info-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="Label-success-"] { - border-color: #27c24c; - background-color: #27c24c; - color: #000; -} - -[class*="Label-outline-"] { - background-color: #999; -} - -[class*="Label-disabled-"] { - border-color: #999; - background-color: #999; - color: #000; -} - -[class*="Label-disabled-"][class*="Label-outline-"] { - color: #000; -} - -[class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--arr-queue-color); - background-color: var(--arr-queue-color); - color: var(--label-text-color); -} - -[class*="MovieDetails-selectedTab-"] { - border-bottom: 4px solid rgb(var(--accent-color)); -} - -[class*="MovieDetails-tabList-"] { - color: var(--text-hover); -} - -/* Table options*/ -[class*="TableOptionsColumn-column-"] { - background: var(--transparency-dark-25); - color: var(--text-hover); - border: none; -} - -[class*="TableHeaderCell-headerCell-"] { - color: var(--text-hover); -} - -[class*="Table-table-"] { - color: var(--text); -} - -[class*="TableRow-row-"]:hover { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="TableRowCell-cell-"] { - border-top: 1px solid var(--transparency-light-25); -} - -/* TOP MENU SERIES */ -[class*="PageToolbar-toolbar-"] { - background: var(--transparency-dark-25); - color: var(--text); -} - -[class*="PageToolbarButton-label-"] { - 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: rgb(var(--accent-color)); -} - -[class*="MenuButton-menuButton-"]:hover { - color: rgb(var(--accent-color)); -} - -/* POSTERS */ -[class*="MovieIndexPoster-title-"], -[class*="MovieIndexPoster-nextAiring-"], -[class*="MovieIndexPosterInfo-info-"], -[class*="MovieIndexPosterInfo-info-"], -[class*="MovieCreditPoster-title-"] { - background: var(--transparency-light-10); - color: var(--text-hover); -} - -/* LIBRARY TOP HEADER DROPDOWN */ -[class*="MenuItem-menuItem-"] { - color: var(--text); - background: 0; -} - -[class*="MenuContent-menuContent-"] { - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; -} - -[class*="MenuContent-scroller-"] { - box-shadow: black 0 0 5px 0px; -} - -[class*="MenuItem-menuItem-"]:hover, -[class*="MenuItem-menuItem-"]:focus { - background: var(--transparency-dark-10) !important; - color: var(--text-hover); - text-decoration: none; -} - -[class*="MenuItemSeparator-separator-"] { - background: var(--transparency-dark-10) !important; -} - -/* ALPHABET JUMP BAR */ -[class*="PageJumpBar-jumpBar-"] { - color: var(--text-hover); -} - -/* MINI RIGHT SCROLL BAR */ -[class*="OverlayScroller-thumb-"], -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background: var(--transparency-dark-10) !important; -} - -[class*="OverlayScroller-thumb-"]:hover, -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background: var(--transparency-light-25) !important; -} - -/* ADD NEW */ - -[class*="EnhancedSelectInput-options-"] { - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-options-"] { - border: 1px solid rgba(var(--accent-color)) !important; -} - -[class*="EnhancedSelectInputOption-isSelected-"], -[class*="EnhancedSelectInputOption-isSelected-"]:hover { - background: var(--transparency-light-20) !important; - color: var(--text-hover); -} - -[class*="EnhancedSelectInputOption-option-"]:hover { - background: var(--transparency-light-10); -} - -[class*="HintedSelectInputOption-hintText-"] { - color: var(--text); -} - -[class*="EnhancedSelectInput-optionsModalScroller-"] { - border: 1px solid var(--drop-down-menu-bg); - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"] { - color: var(--button-text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"]:hover { - color: var(--button-text-hover); -} - -[class*="EnhancedSelectInput-mobileCloseButtonContainer-"] { - - border-bottom: 1px solid rgba(255, 255, 255, 0.25); -} -/* SEARCH BAR */ -[class*="Input-input-"], -[class*="AddNewMovie-searchIconContainer-"], -[class*="CheckInput-isIndeterminate-"] { - border: none; - background: var(--transparency-light-10); - color: var(--text-hover); -} - [class*="IndexerSearchInput-container-"] [class*="Input-input-"] { background: transparent; border-bottom: solid 1px var(--text); @@ -694,357 +55,7 @@ a:hover { font-size: 12px; } -[class*="AddNewMovieSearchResult-year-"] { - color: var(--text-hover) !important; -} - -[class*="Input-input-"]:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -[class*="TagInput-input-"][class*="TagInput-isFocused-"] { - outline: 0; - border-color: #fff; - box-shadow: none; -} - -/* TEXT COLOR */ - -[class*="PageContentBody-innerContentBody-"] { - color: var(--text); -} - -/* SEARCH RESULTS */ -[class*="AddNewMovieSearchResult-searchResult-"], -[class*="AddNewMovieSearchResult-underlay-"] { - background-color: transparent !important; -} - -[class*="AddNewMovieSearchResult-searchResult-"]:hover, -[class*="AddNewMovieSearchResult-underlay-"]:hover { - background: var(--transparency-dark-10) !important; -} - -[class*="AddNewmovieModalContent-year-"] { - color: var(--text-hover); -} - -[class*="RootFolderSelectInputSelectedValue-movieFolder-"], -[class*="RootFolderSelectInputSelectedValue-freeSpace-"] { - color: var(--text-hover); -} - -[class*="RootFolderSelectInputOption-freeSpace-"], -[class*="RootFolderSelectInputOption-movieFolder-"] { - color: var(--text-muted); -} - -/* IMPORT */ - -[class*="FieldSet-legend-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="VirtualTableRow-row-"]:hover { - background: var(--transparency-light-10); -} - -/* Drop down menu/button*/ -[class*="ImportMovieSelectMovie-button-"] { - border: none !important; - background: var(--transparency-dark-25) !important; -} - -[class*="ImportMovieSelectMovie-content-"], -[class*="ImportMovieSelectMovie-searchIconContainer-"] { - border: none; - 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; - color: var(--text-hover); -} - -[class*="ImportMovieSearchResult-movie-"]:hover { - background: var(--transparency-light-10); -} - -[class*="ImportMovieTitle-year-"] { - color: var(--text-muted); -} - -/* DISCOVER */ -[class*="DiscoverMovieOverview-link-"] { - color: var(--text); -} - -[class*="DiscoverMovieOverview-link-"]:hover { - color: var(--text-hover); - text-decoration: none; -} - -/*Title*/ -[class*="AddListMovieOverview-link-"] { - color: var(--text); -} - -[class*="AddListMovieOverview-link-"]:hover { - color: var(--text-hover); -} - -[class*="AddListMovieOverview-content-"]:hover { - background: var(--transparency-dark-10) !important; -} - -[class*="PageJumpBarItem-jumpBarItem-"]:hover { - color: var(--text-hover); - background: var(--transparency-dark-10); -} - -/*Posters*/ -[class*="AddListMoviePoster-title-"] { - background: var(--transparency-light-10); - color: var(--text-hover); -} - -/* MASS EDITOR */ -/* FOOTER */ -[class*="PageContentFooter-contentFooter-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - -/* CALENDAR */ -[class*="CalendarEvent-downloaded-"] { - background: rgb(var(--calendar-available) / .7) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-downloaded-"]:hover { - background: rgb(var(--calendar-available) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-missing-"] { - background: rgb(var(--calendar-missing) / .7) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-missing-"]:hover { - background: rgba(var(--calendar-missing) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-unreleased-"] { - background: rgb(var(--calendar-unaired) / .7) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-unreleased-"]:hover { - background: rgb(var(--calendar-unaired) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-unmonitored-"] { - background: rgb(var(--calendar-unmonitored) / .7) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-unmonitored-"]:hover { - background: rgb(var(--calendar-unmonitored) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-downloading-"] { - background: rgb(var(--calendar-downloading) / .7) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-downloading-"]:hover { - background: rgb(var(--calendar-downloading) / .5) !important; - border-left-color: transparent !important; -} - -[class*="DayOfWeek-dayOfWeek-"] { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="CalendarDay-dayOfMonth-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background: var(--transparency-dark-25); -} - -[class*="CalendarDay-isToday-"] { - background: var(--transparency-light-10) !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); - color: var(--text-hover); -} - -[class*="CalendarEvent-movieTitle-"], -[class*="CalendarEvent-episodeInfo-"], -[class*="CalendarEvent-airTime-"] { - color: var(--text-hover) !important; -} - -[class*="CalendarEvent-movieInfo-"] { - color: var(--text); -} - -[class*="CalendarEvent-event-"] { - border-bottom: 1px solid transparent; -} - -[class*="CalendarEventGroup-eventGroup-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08) !important; -} - -[class*="CalendarEventGroup-movieTitle-"] { - color: var(--text-hover) !important; -} - -[class*="CalendarEventGroup-airTime-"] { - color: #fff; -} - -[class*="CalendarEventGroup-episodeInfo-"] { - color: #fff; -} - -/* calendar agenda */ -[class*="AgendaEvent-event-"]:hover { - background: var(--transparency-dark-10) !important; -} - -/* SETTINGS */ -[class*="Settings-link-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="Settings-summary-"] { - color: var(--text); -} - -[class*="FormLabel-large-"] { - color: var(--text-hover); -} - -[class*="FormLabel-isAdvanced-"] { - color: #ff902b; -} - -/* MEDIA MANAGEMENT - FILE NAME TOKENS */ -[class*="NamingOption-small-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-example-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background: var(--transparency-light-35); -} - -/* PROFILES */ -[class*="Card-card-"], -[class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-dark-45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - - -[class*="-cloneButton-"][class*="IconButton-button-"]:hover { - color: var(--text-hover); -} - -[class*="Card-card-"]:hover, -[class*="Applications-center-"]:hover { - color: var(--text-hover); -} - -[class*="QualityProfiles-center-"], -[class*="LanguageProfiles-center-"], -[class*="ReleaseProfiles-center-"] { - background-color: transparent; - border: none; - color: var(--text); -} - -[class*="Applications-center-"], -[class*="AppProfiles-center-"] { - background-color: transparent; - border: none; -} - -[class*="QualityProfileItem-qualityProfileItem-"], -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], -[class*="LanguageProfileItem-languageProfileItem-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: var(--transparency-dark-25) -} - -[class*="QualityDefinitions-sizeLimitHelpText-"] { - color: var(--text); -} - -[class*="KeyValueListInputItem-keyInput-"], -[class*="KeyValueListInputItem-valueInput-"] { - border: none; - background: transparent; - color: var(--text-hover); -} - -[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25) -} - /* Indexers */ -[class*="Indexers-center-"], [class*="IndexerProxies-center-"] { background-color: transparent; border: none; @@ -1055,106 +66,6 @@ a:hover { color: var(--text-hover); } -/* DOWNLOAD CLIENTS */ -[class*="DownloadClients-center-"] { - background-color: transparent; - border: none; -} - -/* CONNECTIONS */ -[class*="Notifications-center-"] { - background-color: transparent; - border: none; -} - -/* LISTS */ -[class*="ImportLists-center-"] { - background-color: transparent; - border: none; - color: var(--text); -} - -/* LOG */ -[class*="Alert-info-"] { - border-color: transparent; - background: var(--transparency-dark-25); - color: #FFC107; -} - -/* INDEXER */ -[class*="Restrictions-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* LISTS */ -[class*="NetImports-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* CUSTOM FORMAT */ -[class*="CustomFormats-center-"], -[class*="EditCustomFormatModalContent-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* Login Page */ - -.panel-body { - background: var(--transparency-dark-25); - color: var(--text); -} - -.panel-header { - background: var(--transparency-dark-45); -} - -.forgot-password { - color: var(--text) !important; -} - -input[type=email], -input[type=password] { - border: none; - background: var(--transparency-light-10); - color: var(--text-hover); -} - -.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: var(--button-text-hover); - text-decoration: none; -} - -.form-input:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -/* Custom filter */ -[class*="FilterBuilderRow-filterRow-"]:hover { - background-color: transparent; -} - -[class*="CustomFilter-customFilter-"]:hover { - background: var(--transparency-dark-10); -} - -[class*="SelectMovieModalContent-path-"] { - color: var(--text); -} - /* ChartJS */ [class*="Stats-fullWidthChart-"], [class*="Stats-halfWidthChart-"] { @@ -1199,8 +110,3 @@ canvas { background: var(--transparency-light-50); color: #1f1f1f; } - -/* Updates */ -[class*="Updates-info-"]{ - border-bottom: 1px solid rgb(var(--accent-color)); -} \ No newline at end of file diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css index e8688cbc..d5ae60d0 100644 --- a/css/base/readarr/readarr-base.css +++ b/css/base/readarr/readarr-base.css @@ -12,6 +12,7 @@ @import url("/css/defaults/placeholders.css"); @import url("/css/defaults/transparent.css"); +@import url("/css/defaults/servarr-base.css"); :root { --calendar-downloaded: 39 194 76; @@ -21,198 +22,6 @@ --calendar-unreleased: 93 156 236; } -body { - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -/* Froms */ - -[class*="FormInputHelpText-helpText-"] { - color: var(--text); -} - -[class*="FormInputGroup-inputUnit-"] { - color: var(--text) !important; -} - -/* LINKS */ -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]) { - color: var(--link-color); - } - -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover { -color: var(--link-color-hover); -} - -a { - color: var(--link-color); -} - -a:hover { - color: var(--link-color-hover); -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"] { - color: var(--link-color) !important; -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"]: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 var(--text-hover); -} - -/* MODAL */ -[class*="ModalHeader-modalHeader-"] { - background: var(--modal-header-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="Modal-large-"], -[class*="Modal-modal-"], -[class*="ModalContent-modalContent-"] { - 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; - color: var(--text); -} - -[class*="ModalFooter-modalFooter-"] { - background: var(--modal-footer-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-top: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-closeButton-"]:hover { - color: var(--button-text-hover); -} - -/* INPUT */ -[class*="TagInput-internalInput-"] { - background-color: transparent; - color: var(--text-hover); -} - -[class*="SelectInput-select-"] { - background: var(--transparency-dark-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: var(--transparency-dark-10); -} - -[class*="CheckInput-primaryIsChecked-"] { - border-color: rgb(var(--accent-color)) !important; - background-color: rgb(var(--accent-color)) !important; - color: var(--label-text-color) !important; -} - -[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { - background: #fff; -} - -/* HEADER */ - -[class*="PageHeader-header-"] { - background: var(--transparency-dark-35); - color: var(--text); -} - -/* SEARCH DROPDOWN HEADER */ - -[class*="PageHeader-donate-"] { - color: #c4273c !important; -} - -/* LIDARR SPECIFIC */ [class*="AuthorSearchInput-sectionTitle-"] { color: var(--text-hover); } @@ -241,139 +50,19 @@ a:hover { } /* MINI RIGHT SCROLL BAR */ -[class*="OverlayScroller-thumb-"], -[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb, -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { +[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb { background: var(--transparency-dark-10) !important; } -[class*="OverlayScroller-thumb-"]:hover, -[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover, -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { +[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover { background: var(--transparency-light-25) !important; } -/* ADD NEW */ -[class*="EnhancedSelectInput-options-"] { - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-options-"] { - border: 1px solid rgba(var(--accent-color)) !important; -} - -[class*="EnhancedSelectInputOption-isSelected-"], -[class*="EnhancedSelectInputOption-isSelected-"]:hover { - background: var(--transparency-light-20) !important; - color: var(--text-hover); -} - -[class*="EnhancedSelectInputOption-option-"]:hover { - background: var(--transparency-light-10); -} - -[class*="HintedSelectInputOption-hintText-"] { - color: var(--text); -} - -[class*="EnhancedSelectInput-optionsModalScroller-"] { - border: 1px solid var(--drop-down-menu-bg); - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"] { - color: var(--button-text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"]:hover { - color: var(--button-text-hover); -} - -[class*="EnhancedSelectInput-mobileCloseButtonContainer-"] { - - border-bottom: 1px solid rgba(255, 255, 255, 0.25); -} - -/* SIDE MENU */ -[class*="PageSidebar-sidebarContainer-"] { - background: var(--transparency-dark-25); -} - -[class*="PageSidebar-sidebar-"] { - background-color: transparent; -} - -[class*="PageSidebarItem-link-"] { - color: var(--text-hover) -} - -[class*="PageSidebarItem-link-"]:hover { - color: rgb(var(--accent-color)); - text-decoration: none; -} - -[class*="PageSidebarItem-isActiveLink-"], -[class*="PageSidebarItem-isActiveLink-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*="PageSidebarItem-isActiveParentLink-"] { - background: var(--transparency-dark-15); -} - -@media only screen and (max-width: 768px) { - [class*="PageSidebar-sidebarContainer-"] { - background: var(--main-bg-color) !important; - 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; - } -} - -[class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid rgb(var(--accent-color)); -} - -#sidebar-toggle-button { - color: var(--text); -} -#sidebar-toggle-button:hover, -#sidebar-toggle-button:focus, -#sidebar-toggle-button:active { - color: var(--text-hover); -} - /* LIBRARY PAGE */ -/* LIDARR SPECIFIC */ [class*="AuthorIndexPoster-controls-"] { background-color: rgb(var(--accent-color)) !important; } -/* OVERVIEW PAGE */ - /* OVERVIEW PAGE */ [class*="AuthorIndexOverview-container-"], [class*="AuthorIndexOverview-container-"]:hover { @@ -392,16 +81,7 @@ a:hover { text-decoration: none; } -[class*="ProgressBar-container-"] { - background: var(--transparency-dark-25); -} - -[class*=".ProgressBar-purple-"] { - background-color: rgb(var(--accent-color)); -} - - -/*ARTIST PAGE*/ +/*AUTHOR PAGE*/ [class*="AuthorDetailsSeason-albumType-"], [class*="AuthorDetailsSeason-collapseButtonContainer-"] { border: none !important; @@ -409,62 +89,27 @@ a:hover { } [class*="AuthorDetailsSeason-header-"], -[class*="AuthorDetailsSeason-albumCount-"], +[class*="AuthorDetailsSeason-bookCount-"], [class*="AuthorDetails-metadataMessage-"], -[class*="AuthorDetailsSeason-albumCount-"] { +[class*="AuthorDetailsSeason-bookCount-"] { color: var(--text-hover); } -.fa-search:hover { - color: var(--text-hover) !important; -} - -[class*="Label-default-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { +/*AUTHOR PAGE*/ +[class*="AuthorDetailsMedium-mediumNumber-"] { color: var(--text-hover); } -[class*="MonitorToggleButton-toggleButton-"] { - color: var(--text-hover); -} - -[class*="ProtocolLabel-torrent-"] { - border-color: #00853d !important; - background-color: #00853d !important; - color: #fff !important; -} - -[class*="ProtocolLabel-usenet-"] { - border-color: #17b1d9 !important; - background-color: #17b1d9 !important; - color: #fff !important; -} - -/*ARTIST ALBUM PAGE*/ -[class*="AlbumDetailsMedium-mediumNumber-"] { - color: var(--text-hover); -} - -[class*="AlbumDetailsMedium-medium-"] { +[class*="AuthorDetailsMedium-medium-"] { border: none; background: var(--transparency-dark-25); } -[class*="ExtraFileTable-container-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25); -} - -[class*="AlbumDetails-selectedTab-"] { +[class*="AuthorDetails-selectedTab-"] { border-bottom: 4px solid rgb(var(--accent-color)); } -[class*="AlbumDetailsMedium-collapseButtonContainer-"] { +[class*="AuthorDetailsMedium-collapseButtonContainer-"] { border: none; background: var(--transparency-dark-25); } @@ -479,63 +124,6 @@ a:hover { color: var(--text-hover); } -[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-"] { - 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-top-"][class*="Tooltip-inverse-"] { - border-top-color: var(--text); -} - -[class*="Tooltip-bottom-"][class*="Tooltip-default-"] { - border-bottom-color: var(--text); -} - -[class*="Tooltip-right-"][class*="Tooltip-default-"] { - border-right-color: var(--text); -} - -[class*="EpisodeTitleLink-link-"]:hover { - color: var(--text-hover); - text-decoration: none; -} - -[class*="IconButton-button-"] { - color: var(--text); -} - -[class*="Label-default-"] [class*="IconButton-button-"], -[class*="Label-small-"] [class*="IconButton-button-"]:hover { - color: var(--label-text-color); -} - -[class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--label-text-color); -} - [class*="AuthorDetailsHeader-monitorToggleButton-"]:hover, [class*="AuthorDetails-authorNavigationButton-"]:hover, [class*="AuthorDetails-authorUpButton-"]:hover, @@ -545,99 +133,6 @@ a:hover { color: var(--text-hover); } -[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - -[class*="Label-info-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: #fff; -} - -[class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--arr-queue-color); - background-color: var(--arr-queue-color); - color: #fff; -} - -[class*="Label-success-"] { - border-color: #27c24c; - background-color: #27c24c; - color: #000; -} - -[class*="Label-disabled-"][class*="Label-outline-"] { - color: #000; -} - -[class*="Label-outline-"] { - background-color: #999; -} - -[class*="Label-disabled-"] { - border-color: #999; - background-color: #999; - color: #000; -} - -/* Table options*/ -[class*="TableOptionsColumn-column-"] { - background: var(--transparency-dark-25); - color: var(--text-hover); - border: none; -} - -[class*="TableHeaderCell-headerCell-"] { - color: var(--text-hover); -} - -[class*="Table-table-"] { - color: var(--text); -} - -[class*="TableRow-row-"]:hover { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="TableRowCell-cell-"] { - border-top: 1px solid var(--transparency-light-25); -} - -/* TOP MENU SERIES */ -[class*="PageToolbar-toolbar-"] { - background: var(--transparency-dark-25); - color: var(--text); -} - -[class*="PageToolbarButton-label-"] { - 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: rgb(var(--accent-color)); -} - -[class*="MenuButton-menuButton-"]:hover { - color: rgb(var(--accent-color)); -} - /* POSTERS */ [class*="AuthorIndexPoster-title-"], [class*="AuthorIndexPosterInfo-info-"], @@ -647,48 +142,8 @@ a:hover { color: var(--text-hover); } - -/* TOP HEADER DROPDOWN */ -[class*="MenuItem-menuItem-"] { - color: var(--text); - background: 0; -} - -[class*="MenuContent-menuContent-"] { - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; -} - -[class*="MenuContent-scroller-"] { - box-shadow: black 0 0 5px 0px; -} - -[class*="MenuItem-menuItem-"]:hover, -[class*="MenuItem-menuItem-"]:focus { - background: var(--transparency-dark-10) !important; - color: var(--text-hover); - text-decoration: none; -} - -[class*="MenuItemSeparator-separator-"] { - background: var(--transparency-dark-10) !important; -} - -/* ALPHABET JUMP BAR */ -[class*="PageJumpBar-jumpBar-"] { - color: var(--text-hover); -} - /* SEARCH BAR */ -[class*="Input-input-"], -[class*="AddNewItem-searchIconContainer-"], -[class*="CheckInput-isIndeterminate-"] { +[class*="AddNewItem-searchIconContainer-"]{ border: none; background: var(--transparency-light-10); color: var(--text-hover); @@ -709,56 +164,25 @@ a:hover { font-size: 12px; } -[class*="Input-input-"]:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -[class*="TagInput-input-"][class*="TagInput-isFocused-"] { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; -} - -/* TEXT COLOR */ - -[class*="PageContentBody-innerContentBody-"] { - color: var(--text); -} - /* SEARCH RESULTS */ -[class*="SearchResult-title-"]{ - color:var(--link-color); -} - [class*="AddNewAuthorSearchResult-year-"] { color: var(--text-hover); } [class*="AddNewAuthorSearchResult-searchResult-"], [class*="AddNewAuthorSearchResult-underlay-"], -[class*="AddNewAlbumSearchResult-underlay-"] { +[class*="AddNewAuthorSearchResult-underlay-"] { background-color: transparent; } [class*="AddNewAuthorSearchResult-searchResult-"]:hover, [class*="AddNewAuthorSearchResult-underlay-"]:hover, -[class*="AddNewAlbumSearchResult-underlay-"]:hover { +[class*="AddNewAuthorSearchResult-underlay-"]:hover { background: var(--transparency-dark-10); color: inherit; text-decoration: none; } -[class*="RootFolderSelectInputSelectedValue-freeSpace-"] { - color: var(--text-hover); -} - -[class*="RootFolderSelectInputOption-freeSpace-"] { - color: var(--text-muted); -} - /* IMPORT ARTIST */ [class*="ImportAuthorSelectAuthor-content-"], [class*="ImportAuthorSelectAuthor-searchIconContainer-"] { @@ -788,11 +212,6 @@ a:hover { color: var(--text-hover); } -[class*="ExpandingFileDetails-fileDetails-"] { - border: 1px solid rgb(255 255 255 / .1); - background: var(--transparency-light-10); -} - /* IMPORT NEW ARTIST */ /* Drop down menu/button*/ [class*="ImportAuthorSelectAuthor-button-"] { @@ -801,42 +220,7 @@ a:hover { color: var(--text-hover); } - -/* IMPORT */ - -[class*="FieldSet-legend-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="VirtualTableRow-row-"]:hover { - background: var(--transparency-light-10); -} - -/*Title*/ - -[class*="PageJumpBarItem-jumpBarItem-"]:hover { - color: var(--text-hover); - background: var(--transparency-dark-10); -} - -/*Posters*/ - - -/* MASS EDITOR */ - -/* FOOTER */ -[class*="PageContentFooter-contentFooter-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - /* CALENDAR */ -[class*="CircularProgressBar-circularProgressBarContainer-"] svg circle { - stroke: #fff; -} - [class*="CalendarEvent-downloaded-"]:not([class*="AgendaEvent-"]) { background: rgb(var(--calendar-downloaded) / .7) !important; border-left-color: transparent !important; @@ -889,297 +273,19 @@ a:hover { border-left-color: transparent !important; } -[class*="DayOfWeek-dayOfWeek-"] { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="CalendarDay-dayOfMonth-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background: var(--transparency-dark-25); -} - -[class*="CalendarDay-isToday-"], -[class*="DayOfWeek-isToday-"] { - background: var(--transparency-light-25) !important; - color: var(--text-hover); -} - [class*="CalendarEvent-authorName-"] a, [class*="CalendarEvent-authorName-"], [class*="CalendarEvent-bookTitle-"] a, [class*="CalendarEvent-bookTitle-"]{ -color: #fff !important; +color: #eee !important; } [class*="CalendarEvent-authorName-"] a:hover, [class*="CalendarEvent-bookTitle-"] a:hover{ -color: var(--text-hover) !important; +color: #fff !important; } -[class*="CalendarEvent-event-"] { - border-left: 4px solid var(--text); -} - -[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); - color: var(--text-hover); -} - -[class*="CalendarEvent-event-"] { - border-bottom: 1px solid transparent; -} - -[class*="CalendarEventGroup-eventGroup-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08) !important; -} - -/* calendar agenda */ -[class*="AgendaEvent-event-"]:hover { - background: var(--transparency-dark-10) !important; -} - -/* SETTINGS */ -[class*="Settings-link-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="Settings-summary-"] { - color: var(--text); -} - -[class*="FormLabel-large-"] { - color: var(--text-hover); -} - -[class*="FormLabel-isAdvanced-"] { - color: #ff902b; -} - -/* MEDIA MANAGEMENT - FILE NAME TOKENS */ -[class*="NamingOption-small-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-example-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background: var(--transparency-light-35); -} - -/* PROFILES */ -[class*="Card-card-"], -[class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-dark-45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - - -[class*="-cloneButton-"][class*="IconButton-button-"]:hover { - color: var(--text-hover); -} - -[class*="Card-card-"]:hover { - color: var(--text-hover); -} - -[class*="QualityProfiles-center-"], -[class*="LanguageProfiles-center-"], -[class*="ReleaseProfiles-center-"] { - background-color: transparent; - border: none; -} - -[class*="QualityProfileItem-qualityProfileItem-"], -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], -[class*="LanguageProfileItem-languageProfileItem-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: var(--transparency-dark-25) -} - -[class*="KeyValueListInputItem-keyInput-"], -[class*="KeyValueListInputItem-valueInput-"] { - border: none; - background: transparent; - color: var(--text-hover); -} - -[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25) -} - -[class*="QualityDefinitions-sizeLimitHelpText-"] { - color: var(--text); -} - -/* PROFILES */ -[class*="Indexers-center-"] { - background-color: transparent; - border: none; -} - -[class*="Card-card-"], -[class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-dark-45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - -[class*="QualityProfiles-center-"], -[class*="LanguageProfiles-center-"], -[class*="MetadataProfiles-center-"], -[class*="RootFolders-center-"] { - background-color: transparent; - border: none; -} - -[class*="RootFolders-center-"] { - border: 1px solid transparent; -} - -[class*="Indexers-center-"], -[class*="Restrictions-center-"], -[class*="DownloadClients-center-"], -[class*="ImportLists-center-"], -[class*="Notifications-center-"] { - display: inline-block; - padding: 15px 20px 15px; - border-radius: 4px; -} - -/* DOWNLOAD CLIENTS */ -[class*="DownloadClients-center-"] { - background-color: transparent; - border: none; -} - -/* CONNECTIONS */ -[class*="Notifications-center-"] { - background-color: transparent; - border: none; -} - -/* LISTS */ -[class*="ImportLists-center-"] { - background-color: transparent; - border: none; -} - -/* LOG */ -[class*="Alert-info-"] { - border-color: transparent; - background: var(--transparency-dark-25); - color: #FFC107; -} - -/* INDEXER */ -[class*="Restrictions-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* LISTS */ -[class*="NetImports-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* CUSTOM FORMAT */ -[class*="CustomFormats-center-"], -[class*="EditCustomFormatModalContent-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* Login Page */ - -.panel-body { - background: var(--transparency-dark-25); - color: var(--text); -} - -.panel-header { - background: var(--transparency-dark-45); -} - -.forgot-password { - color: var(--text) !important; -} - -input[type=email], -input[type=password] { - border: none; - background: var(--transparency-light-10); - color: var(--text-hover); -} - -.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: var(--button-text-hover); - text-decoration: none; -} - -.form-input:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -/* Custom filter */ -[class*="FilterBuilderRow-filterRow-"]:hover { - background-color: transparent; -} - -[class*="CustomFilter-customFilter-"]:hover { - background: var(--transparency-dark-10); -} - -/* Readarr */ - /* Library */ - [class*="AuthorIndexPoster-link-"], [class*="AuthorIndexPoster-title-"] { background: var(--transparency-light-10); @@ -1288,9 +394,4 @@ input[type=password] { /*Specific Book Page*/ [class*="BookDetails-tab-"] { color: var(--text-hover); -} - -/* Updates */ -[class*="Updates-info-"]{ - border-bottom: 1px solid rgb(var(--accent-color)); } \ No newline at end of file diff --git a/css/base/whisparr/whisparr-base.css b/css/base/whisparr/whisparr-base.css index be1c1b0e..0353e116 100644 --- a/css/base/whisparr/whisparr-base.css +++ b/css/base/whisparr/whisparr-base.css @@ -12,1193 +12,4 @@ @import url("/css/defaults/placeholders.css"); @import url("/css/defaults/transparent.css"); - -:root { - --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-missing-unmonitored: 255 165 0; - --calendar-available: 39 194 76; - } - -body { - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -/* Froms */ - -[class*="FormInputHelpText-helpText-"] { - color: var(--text); -} - -[class*="FormInputGroup-inputUnit-"] { - color: var(--text) !important; -} - -/* LINKS */ -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]):not([class*="AgendaEvent"]) { - color: var(--link-color); - } - -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover { -color: var(--link-color-hover); -} - -a { - color: var(--link-color); -} - -a:hover { - color: var(--link-color-hover); -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"] { - color: var(--link-color) !important; -} - -[class*="TableRowCell-cell-"] [class*="Link-to-"]: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 var(--text-hover); -} - -/* MODAL */ -[class*="ModalHeader-modalHeader-"] { - background: var(--modal-header-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-modalContent-"] { - 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; - color: var(--text); -} - -[class*="ModalFooter-modalFooter-"] { - background: var(--modal-footer-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text-hover); - border-top: 1px solid rgb(var(--accent-color)); -} - -[class*="ModalContent-closeButton-"]:hover { - color: var(--text-hover); -} - -/* INPUT */ -[class*="TagInput-internalInput-"] { - background-color: transparent; - color: var(--text-hover); -} - -[class*="SelectInput-select-"] { - background: var(--transparency-dark-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: var(--transparency-dark-10); -} - -[class*="CheckInput-primaryIsChecked-"] { - border-color: rgb(var(--accent-color)) !important; - background-color: rgb(var(--accent-color)) !important; - color: var(--label-text-color) !important; -} - -[class*="CheckInput-input-"][class*="CheckInput-isNotChecked-"] { - background: #fff; -} - -/* HEADER */ - -[class*="PageHeader-header-"] { - background: var(--transparency-dark-35); - color: var(--text); -} - -/* SEARCH DROPDOWN HEADER */ - -[class*="PageHeader-donate-"] { - color: #c4273c !important; -} - -/* RADARR SPECIFIC */ -[class*="MovieSearchInput-sectionTitle-"] { - color: var(--text-hover); -} - -[class*="MovieSearchInput-containerOpen-"] [class*="MovieSearchInput-movieContainer-"] { - border: none !important; - 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; - color: var(--text-hover) !important; - box-shadow: 0 0 10px 1px transparent !important; -} - -[class*="MovieSearchInput-highlighted-"] { - background: var(--transparency-dark-10); -} - -[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { - background: var(--transparency-light-25); -} - -/* SIDE MENU */ -[class*="PageSidebar-sidebarContainer-"] { - background: var(--transparency-dark-25); -} - -[class*="PageSidebar-sidebar-"] { - background-color: transparent; -} - -[class*="PageSidebarItem-link-"] { - color: var(--text-hover) -} - -[class*="PageSidebarItem-link-"]:hover { - color: rgb(var(--accent-color)); - text-decoration: none; -} - -[class*="PageSidebarItem-isActiveLink-"], -[class*="PageSidebarItem-isActiveLink-"]:hover, -[class*="PageSidebarItem-link-"]:focus { - color: rgb(var(--accent-color)) !important; -} - -[class*="PageSidebarItem-isActiveParentLink-"] { - background: var(--transparency-dark-15); -} - -@media only screen and (max-width: 768px) { - [class*="PageSidebar-sidebarContainer-"] { - background: var(--main-bg-color) !important; - 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; - } -} - -[class*="PageSidebarItem-isActiveItem-"] { - border-left: 3px solid rgb(var(--accent-color)); -} - -#sidebar-toggle-button { - color: var(--text); -} -#sidebar-toggle-button:hover, -#sidebar-toggle-button:focus, -#sidebar-toggle-button:active { - color: var(--text-hover); -} - -/* MOVIES PAGE */ -/* RADARR SPECIFIC */ -[class*="MovieIndexPoster-controls-"] { - background-color: rgb(var(--accent-color)) !important; -} - -[class*="MovieTitlesTableContent-blankpad-"], -[class*="ExtraFileTableContent-blankpad-"], -[class*="MovieHistoryTableContent-blankpad-"] { - color: var(--text); -} - -/* OVERVIEW PAGE */ - -[class*="MovieIndexOverviews-container-"], -[class*="MovieIndexOverviews-container-"]:hover { - background-color: transparent !important; -} - -[class*="MovieIndexOverview-container-"]:hover [class*="MovieIndexOverview-content-"] { - background-color: transparent; -} - -[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] { - background: var(--transparency-light-10); -} - -[class*="AddListMoviePoster-title-"] { - background: var(--transparency-light-10); -} - -[class*="MovieIndexOverview-content-"]:hover { - background: var(--transparency-dark-10) !important; -} - -[class*="MovieIndexOverview-link-"]:hover { - text-decoration: none; -} - -[class*="ProgressBar-container-"] { - background: var(--transparency-dark-25); -} - -[class*=".ProgressBar-purple-"] { - background-color: rgb(var(--accent-color)); -} - -/* MOVIE PAGE */ -[class*="MovieDetailsSeason-season-"], -[class*="MovieDetailsSeason-collapseButtonContainer-"] { - border: none !important; - background: var(--transparency-dark-25) !important; -} - -[class*="MovieDetailsSeason-actionButton-"], -[class*="MovieDetailsSeason-collapseButtonIcon-"] { - color: var(--text) !important; -} - -[class*="MovieFileStatus-missing"].colorImpaired { - background: transparent; -} - -.fa-search:hover { - color: var(--text-hover) !important; -} - -[class*="Icon-default-"]:hover:not([class*="Label-large-"] [class*="Icon-default-"], [class*="PathInput-fileBrowserButton-"]svg) { - color: var(--text-hover); -} - -[class*="MonitorToggleButton-toggleButton-"] { - color: #dadada; -} - - -[class*="ProtocolLabel-torrent-"] { - border-color: #00853d !important; - background-color: #00853d !important; - color: #fff !important; -} - -[class*="ProtocolLabel-usenet-"] { - border-color: #17b1d9 !important; - background-color: #17b1d9 !important; - color: #fff !important; -} - -[class*="MovieDetailsSeason-seasonNumber-"] { - color: var(--text-hover); -} - -[class*="MovieDetailsSeason-collapseButtonContainer-"] { - border: none !important; - background: var(--transparency-dark-25) !important; -} - -[class*="MovieFileEditorTable-container-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25); -} - -[class*="ExtraFileTable-container-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25); -} - -[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-"] { - 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-top-"][class*="Tooltip-inverse-"] { - border-top-color: var(--text); -} - -[class*="Tooltip-bottom-"][class*="Tooltip-default-"] { - border-bottom-color: var(--text); -} - -[class*="Tooltip-right-"][class*="Tooltip-default-"] { - border-right-color: var(--text); -} - -[class*="EpisodeTitleLink-link-"]:hover { - color: var(--text-hover); - text-decoration: none; -} - -[class*="IconButton-button-"] { - color: var(--text); -} - -[class*="Label-default-"] [class*="IconButton-button-"], -[class*="Label-small-"] [class*="IconButton-button-"]:hover { - color: var(--label-text-color); -} - -[class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - -[class*="Table-tableContainer-"] [class*="IconButton-button-"]:hover { - background-color: transparent; - color: var(--text-hover); -} - -[class*="Label-default-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="Label-info-"] { - border-color: rgb(var(--accent-color)); - background-color: rgb(var(--accent-color)); - color: var(--label-text-color); -} - -[class*="PageSidebarItem-status-"][class*="Label-info-"] { - border-color: var(--arr-queue-color); - background-color: var(--arr-queue-color); - color: var(--label-text-color); -} - -[class*="MovieDetails-selectedTab-"] { - border-bottom: 4px solid rgb(var(--accent-color)); -} - -[class*="MovieDetails-tabList-"] { - color: var(--text-hover); -} - -[class*="Label-success-"] { - border-color: #27c24c; - background-color: #27c24c; - color: #000; -} - -[class*="Label-disabled-"][class*="Label-outline-"] { - color: #000; -} - -[class*="Label-outline-"] { - background-color: #999; -} - -[class*="Label-disabled-"] { - border-color: #999; - background-color: #999; - color: #000; -} - -/* Table options*/ -[class*="TableOptionsColumn-column-"] { - background: var(--transparency-dark-25); - color: var(--text-hover); - border: none; -} - -[class*="TableHeaderCell-headerCell-"] { - color: var(--text-hover); -} - -[class*="Table-table-"] { - color: var(--text); -} - -[class*="TableRow-row-"]:hover { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="TableRowCell-cell-"] { - border-top: 1px solid var(--transparency-light-25); -} - -/* TOP MENU SERIES */ -[class*="PageToolbar-toolbar-"] { - background: var(--transparency-dark-25); - color: var(--text); -} - -[class*="PageToolbarButton-label-"] { - 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: rgb(var(--accent-color)); -} - -[class*="MenuButton-menuButton-"]:hover { - color: rgb(var(--accent-color)); -} - -/* POSTERS */ -[class*="MovieIndexPoster-title-"], -[class*="MovieIndexPoster-nextAiring-"], -[class*="MovieIndexPosterInfo-info-"], -[class*="MovieIndexPosterInfo-info-"], -[class*="MovieCreditPoster-title-"] { - background: var(--transparency-light-10); - color: var(--text-hover); -} - -/* LIBRARY TOP HEADER DROPDOWN */ -[class*="MenuItem-menuItem-"] { - color: var(--text); - background: 0; -} - -[class*="MenuContent-menuContent-"] { - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; -} - -[class*="MenuContent-scroller-"] { - box-shadow: black 0 0 5px 0px; -} - -[class*="MenuItem-menuItem-"]:hover, -[class*="MenuItem-menuItem-"]:focus { - background: var(--transparency-dark-10) !important; - color: var(--text-hover); - text-decoration: none; -} - -[class*="MenuItemSeparator-separator-"] { - background: var(--transparency-dark-10) !important; -} - -/* ALPHABET JUMP BAR */ -[class*="PageJumpBar-jumpBar-"] { - color: var(--text-hover); -} - -/* MINI RIGHT SCROLL BAR */ -[class*="OverlayScroller-thumb-"], -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background: var(--transparency-dark-10) !important; -} - -[class*="OverlayScroller-thumb-"]:hover, -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background: var(--transparency-light-25) !important; -} - -/* ADD NEW */ - -[class*="EnhancedSelectInput-options-"] { - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-options-"] { - border: 1px solid rgba(var(--accent-color)) !important; -} - -[class*="EnhancedSelectInputOption-isSelected-"], -[class*="EnhancedSelectInputOption-isSelected-"]:hover { - background: var(--transparency-light-20) !important; - color: var(--text-hover); -} - -[class*="EnhancedSelectInputOption-option-"]:hover { - background: var(--transparency-light-10); -} - -[class*="HintedSelectInputOption-hintText-"] { - color: var(--text); -} - -[class*="EnhancedSelectInput-optionsModalScroller-"] { - border: 1px solid var(--drop-down-menu-bg); - border-radius: 4px; - background: var(--drop-down-menu-bg); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - color: var(--text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"] { - color: var(--button-text); -} - -[class*="EnhancedSelectInput-mobileCloseButton-"]:hover { - color: var(--button-text-hover); -} - -[class*="EnhancedSelectInput-mobileCloseButtonContainer-"] { - - border-bottom: 1px solid rgba(255, 255, 255, 0.25); -} - -/* SEARCH BAR */ -[class*="Input-input-"], -[class*="AddNewMovie-searchIconContainer-"], -[class*="CheckInput-isIndeterminate-"] { - border: none; - background: var(--transparency-light-10); - color: var(--text-hover); -} - -[class*="MovieSearchInput-container-"] [class*="Input-input-"] { - background: transparent; - border-bottom: solid 1px var(--text); -} - -[class*="MovieSearchInput-container-"] [class*="Input-input-"]:focus { - border-bottom: none; - background: transparent; -} - -[class*="MovieSearchResult-alternateTitle-"] { - color: var(--text-hover); - font-size: 12px; -} - -[class*="AddNewMovieSearchResult-year-"] { - color: var(--text-hover) !important; -} - -[class*="Input-input-"]:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -[class*="TagInput-input-"][class*="TagInput-isFocused-"] { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; -} - -/* TEXT COLOR */ - -[class*="PageContentBody-innerContentBody-"], -[class*="PageContentBody-contentBody-"], -.react-tabs__tab-panel .react-tabs__tab-panel--selected>div { - color: var(--text); -} - -/* SEARCH RESULTS */ -[class*="SearchResult-title-"]{ - color:var(--link-color); -} - -[class*="AddNewMovieSearchResult-searchResult-"], -[class*="AddNewMovieSearchResult-underlay-"] { - background-color: transparent !important; -} - -[class*="AddNewMovieSearchResult-searchResult-"]:hover, -[class*="AddNewMovieSearchResult-underlay-"]:hover { - background: var(--transparency-dark-10) !important; -} - -[class*="AddNewmovieModalContent-year-"] { - color: var(--text-hover); -} - -[class*="RootFolderSelectInputSelectedValue-movieFolder-"], -[class*="RootFolderSelectInputSelectedValue-freeSpace-"] { - color: var(--text-hover); -} - -[class*="RootFolderSelectInputOption-freeSpace-"], -[class*="RootFolderSelectInputOption-movieFolder-"] { - color: var(--text-muted); -} - -/* IMPORT */ - -[class*="FieldSet-legend-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="VirtualTableRow-row-"]:hover { - background: var(--transparency-light-10); -} - -/* Drop down menu/button*/ -[class*="ImportMovieSelectMovie-button-"] { - border: none !important; - background: var(--transparency-dark-25) !important; -} - -[class*="ImportMovieSelectMovie-content-"], -[class*="ImportMovieSelectMovie-searchIconContainer-"] { - border: none; - 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; - color: var(--text-hover); -} - -[class*="ImportMovieSearchResult-movie-"]:hover { - background: var(--transparency-light-10); -} - -[class*="ImportMovieTitle-year-"] { - color: var(--text-muted); -} - -/* DISCOVER */ -[class*="DiscoverMovieOverview-link-"] { - color: var(--text); -} - -[class*="DiscoverMovieOverview-link-"]:hover { - color: var(--text-hover); - text-decoration: none; -} - -[class*="DiscoverMoviePoster-title-"], -[class*="DiscoverMoviePosterInfo-info-"] { - background: var(--transparency-light-10); - color: var(--text-hover); -} - -/*Title*/ -[class*="AddListMovieOverview-link-"] { - color: var(--text); -} - -[class*="AddListMovieOverview-link-"]:hover { - color: var(--text-hover); -} - -[class*="AddListMovieOverview-content-"]:hover { - background: var(--transparency-dark-10) !important; -} - -[class*="PageJumpBarItem-jumpBarItem-"]:hover { - color: var(--text-hover); - background: var(--transparency-dark-10); -} - -/*Posters*/ -[class*="AddListMoviePoster-title-"] { - background: var(--transparency-light-10); - color: var(--text-hover); -} - -/* MASS EDITOR */ -/* FOOTER */ -[class*="PageContentFooter-contentFooter-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - -/* CALENDAR */ -[class*="CircularProgressBar-circularProgressBarContainer-"] svg circle { - stroke: #fff; -} - -[class*="CalendarEvent-downloaded-"] { - background: rgb(var(--calendar-available) / .7) !important; - border-left-color: transparent !important; -} - -[class*="Calendar-calendar-"] [class*="CalendarEvent-downloaded-"]:hover { - background: rgb(var(--calendar-available) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-missing-"], -[class*="CalendarEvent-missingMonitored"] { - background: rgb(var(--calendar-missing) / .7) !important; - border-left-color: transparent !important; -} - -[class*="Calendar-calendar-"] [class*="CalendarEvent-missing-"]:hover, -[class*="Calendar-calendar-"] [class*="CalendarEvent-missingMonitored"]:hover { - background: rgba(var(--calendar-missing) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-missingUnmonitored-"] { - background: rgb(var(--calendar-missing-unmonitored) / .7) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-missingUnmonitored-"]:hover { - background: rgb(var(--calendar-missing-unmonitored) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-unreleased-"], -[class*="CalendarEvent-continuing-"] { - background: rgb(var(--calendar-unaired) / .7) !important; - border-left-color: transparent !important; -} - -[class*="Calendar-calendar-"] [class*="CalendarEvent-unreleased-"]:hover, -[class*="Calendar-calendar-"] [class*="CalendarEvent-continuing-"]:hover { - background: rgb(var(--calendar-unaired) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-event-"] { - background: rgb(var(--calendar-unmonitored) / .7); - border-left-color: transparent; -} - -[class*="Calendar-calendar-"] [class*="CalendarEvent-event-"]:hover { - background: rgb(var(--calendar-unmonitored) / .5); - border-left-color: transparent; -} - -[class*="CalendarEvent-unmonitored-"] { - background: rgb(var(--calendar-unmonitored) / .7) !important; - border-left-color: transparent !important; -} - -[class*="Calendar-calendar-"] [class*="CalendarEvent-unmonitored-"]:hover { - background: rgb(var(--calendar-unmonitored) / .5) !important; - border-left-color: transparent !important; -} - -[class*="CalendarEvent-downloading-"], -[class*="CalendarEvent-queue-"] { - background: rgb(var(--calendar-downloading) / .7) !important; - border-left-color: transparent !important; -} - -[class*="Calendar-calendar-"] [class*="CalendarEvent-downloading-"]:hover, -[class*="Calendar-calendar-"] [class*="CalendarEvent-queue-"]:hover { - background: rgb(var(--calendar-downloading) / .5) !important; - border-left-color: transparent !important; -} - -[class*="DayOfWeek-dayOfWeek-"] { - background: var(--transparency-dark-10); - color: var(--text-hover); -} - -[class*="CalendarDay-dayOfMonth-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08); - background: var(--transparency-dark-25); -} - -[class*="CalendarDay-isToday-"], -[class*="DayOfWeek-isToday-"] { - background: var(--transparency-light-25) !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); - color: var(--text-hover); -} - -[class*="CalendarEvent-movieTitle-"], -[class*="CalendarEvent-movieInfo-"], -[class*="CalendarEvent-episodeInfo-"], -[class*="CalendarEvent-airTime-"], -[class*="CalendarEvent-link-"] { - color: #fff !important; -} - -[class*="CalendarEvent-event-"] { - border-bottom: 1px solid transparent; -} - -[class*="CalendarEventGroup-eventGroup-"] { - border-bottom: 1px solid hsla(0, 0%, 100%, .08) !important; -} - -[class*="CalendarEventGroup-movieTitle-"] { - color: var(--text-hover) !important; -} - -[class*="CalendarEventGroup-airTime-"] { - color: #fff; -} - -[class*="CalendarEventGroup-episodeInfo-"] { - color: #fff; -} - -[class*="LegendItem-missingMonitoredColorImpaired-"], -[class*="LegendItem-missingUnmonitoredColorImpaired-"] { - background: transparent; -} - -/* calendar agenda */ -[class*="AgendaEvent-event-"]:hover { - background: var(--transparency-dark-10) !important; -} - -/* SETTINGS */ -[class*="Settings-link-"] { - color: var(--text-hover); - border-bottom: 1px solid rgb(var(--accent-color)); -} - -[class*="Settings-summary-"] { - color: var(--text); -} - -[class*="FormLabel-large-"] { - color: var(--text-hover); -} - -[class*="FormLabel-isAdvanced-"] { - color: #ff902b; -} - -/* MEDIA MANAGEMENT - FILE NAME TOKENS */ -[class*="NamingOption-small-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-token-"] { - background: var(--transparency-light-15); -} - -[class*="NamingOption-example-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"] { - border: 1px solid transparent; -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { - background: var(--transparency-light-25); -} - -[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { - background: var(--transparency-light-35); -} - -/* PROFILES */ -[class*="Card-card-"], -[class*="QualityProfiles-addQualityProfile-"] { - background: var(--transparency-dark-45); - box-shadow: 0 0 10px 1px #000000; - color: var(--text); -} - - -[class*="-cloneButton-"][class*="IconButton-button-"]:hover { - color: var(--text-hover); -} - -[class*="Card-card-"]:hover { - color: var(--text-hover); -} - -[class*="QualityProfiles-center-"], -[class*="LanguageProfiles-center-"], -[class*="ReleaseProfiles-center-"] { - background-color: transparent; - border: none; -} - -[class*="QualityProfileItem-qualityProfileItem-"], -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], -[class*="LanguageProfileItem-languageProfileItem-"] { - border: none; - background: var(--transparency-dark-25); - color: var(--text-hover); -} - -[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { - background: var(--transparency-dark-25) -} - -[class*="KeyValueListInputItem-keyInput-"], -[class*="KeyValueListInputItem-valueInput-"] { - border: none; - background: transparent; - color: var(--text-hover); -} - -[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25) -} - -[class*="QualityDefinitions-sizeLimitHelpText-"] { - color: var(--text); -} - -/* PROFILES */ -[class*="Indexers-center-"] { - background-color: transparent; - border: none; -} - -/* DOWNLOAD CLIENTS */ -[class*="DownloadClients-center-"] { - background-color: transparent; - border: none; -} - -/* CONNECTIONS */ -[class*="Notifications-center-"] { - background-color: transparent; - border: none; -} - -/* LISTS */ -[class*="ImportLists-center-"] { - background-color: transparent; - border: none; -} - -/* LOG */ -[class*="Alert-info-"] { - border-color: transparent; - background: var(--transparency-dark-25); - color: #FFC107; -} - -/* INDEXER */ -[class*="Restrictions-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* LISTS */ -[class*="NetImports-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* CUSTOM FORMAT */ -[class*="CustomFormats-center-"], -[class*="EditCustomFormatModalContent-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - -/* Login Page */ - -.panel-body { - background: var(--transparency-dark-25); - color: var(--text); -} - -.panel-header { - background: var(--transparency-dark-45); -} - -.forgot-password { - color: var(--text) !important; -} - -input[type=email], -input[type=password] { - border: none; - background: var(--transparency-light-10); - color: var(--text-hover); -} - -.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: var(--button-text-hover); - text-decoration: none; -} - -.form-input:focus { - outline: 0; - border-color: var(--text-hover); - box-shadow: none; - background: var(--transparency-light-25); -} - -/* Custom filter */ -[class*="FilterBuilderRow-filterRow-"]:hover { - background-color: transparent; -} - -[class*="CustomFilter-customFilter-"]:hover { - background: var(--transparency-dark-10); -} - -[class*="SelectMovieModalContent-path-"] { - color: var(--text); -} - -/* Updates */ -[class*="Updates-info-"]{ - border-bottom: 1px solid rgb(var(--accent-color)); -} \ No newline at end of file +@import url("/css/base/radarr/radarr-base.css"); \ No newline at end of file diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index 53656679..c5e79267 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -37,14 +37,22 @@ body { } /* LINKS */ -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]):not([class*="AgendaEvent"]) { +[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):not([class*="Button-"]):not([class*="AgendaEvent"]):not([class*="PageHeader-"]) { color: var(--link-color); } -[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover { +[class*="Link-to-"]:not([class*="PageSidebarItem-link-"]):hover:not([class*="Button-"]):hover{ color: var(--link-color-hover); } +[class*="PageHeader-donate-"]:hover { + color: #9c1f30 !important; +} + +[class*="PageHeaderActionsMenu-menuButton-"]:hover { + color: var(--link-color-hover); +} + a { color: var(--link-color); } @@ -195,6 +203,7 @@ a:hover { [class*="PageHeader-header-"] { background: var(--transparency-dark-35); color: var(--text); + box-shadow: none; } /* SEARCH DROPDOWN HEADER */ @@ -273,6 +282,11 @@ a:hover { color: var(--text); } +[class*="ExtraFileTable-container-"] { + border: 1px solid transparent; + background: var(--transparency-dark-25); +} + .fa-search:hover { color: var(--text-hover) !important; } @@ -298,10 +312,6 @@ a:hover { color: #fff !important; } -[class*="ExtraFileTable-container-"] { - border: 1px solid transparent; - background: var(--transparency-dark-25); -} [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Popover-title-"], @@ -341,11 +351,6 @@ a:hover { border-right-color: var(--text); } -[class*="EpisodeTitleLink-link-"]:hover { - color: var(--text-hover); - text-decoration: none; -} - [class*="IconButton-button-"] { color: var(--text); } @@ -748,17 +753,26 @@ a:hover { color: var(--text-hover); } -[class*="Card-card-"]:hover { +[class*="Card-card-"]:hover, +[class*="Applications-center-"]:hover { color: var(--text-hover); } [class*="QualityProfiles-center-"], [class*="LanguageProfiles-center-"], -[class*="ReleaseProfiles-center-"] { +[class*="ReleaseProfiles-center-"], +[class*="MetadataProfiles-center-"], +[class*="RootFolders-center-"], +[class*="Applications-center-"], +[class*="AppProfiles-center-"] { background-color: transparent; border: none; } +[class*="RootFolders-center-"] { + border: 1px solid transparent; +} + [class*="QualityProfileItem-qualityProfileItem-"], [class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="LanguageProfileItem-languageProfileItem-"] { @@ -787,11 +801,15 @@ a:hover { color: var(--text); } -/* PROFILES */ +/* INDEXSERS */ [class*="Indexers-center-"] { background-color: transparent; border: none; } +[class*="Restrictions-center-"] { + border: 1px solid transparent; + background-color: transparent; +} /* DOWNLOAD CLIENTS */ [class*="DownloadClients-center-"] { @@ -818,12 +836,6 @@ a:hover { color: #FFC107; } -/* INDEXER */ -[class*="Restrictions-center-"] { - border: 1px solid transparent; - background-color: transparent; -} - /* LISTS */ [class*="NetImports-center-"] { border: 1px solid transparent; From d9479069362b98200238adb73fc65e8ecfd33158 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sun, 24 Apr 2022 20:59:24 +0200 Subject: [PATCH 13/34] fix: :bug: arr: move styling to servarr base --- css/base/lidarr/lidarr-base.css | 15 ++------------- css/base/prowlarr/prowlarr-base.css | 4 ---- css/base/radarr/radarr-base.css | 4 ---- css/base/readarr/readarr-base.css | 14 -------------- css/base/sonarr/sonarr-base.css | 13 ------------- css/defaults/servarr-base.css | 23 ++++++++++------------- 6 files changed, 12 insertions(+), 61 deletions(-) diff --git a/css/base/lidarr/lidarr-base.css b/css/base/lidarr/lidarr-base.css index 009169cf..f934a224 100644 --- a/css/base/lidarr/lidarr-base.css +++ b/css/base/lidarr/lidarr-base.css @@ -46,19 +46,6 @@ background: var(--transparency-dark-10) } -[class*"=ArtistSearchInput-artistContainer-"]::-webkit-scrollbar-thumb, -[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb { - background: var(--transparency-light-25); -} - -/* MINI RIGHT SCROLL BAR */ -[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb { - background: var(--transparency-dark-10) !important; -} -[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover { - background: var(--transparency-light-25) !important; -} - /* LIBRARY PAGE */ [class*="ArtistIndexPoster-controls-"] { background-color: rgb(var(--accent-color)) !important; @@ -312,8 +299,10 @@ [class*="AlbumStudioAlbum-missingWanted-"] { background-color: #f05050; + color: #fff; } [class*="AlbumStudioAlbum-allTracks-"] { background-color: #0b8750; + color: #fff; } diff --git a/css/base/prowlarr/prowlarr-base.css b/css/base/prowlarr/prowlarr-base.css index ff0df3e3..cb2353ec 100644 --- a/css/base/prowlarr/prowlarr-base.css +++ b/css/base/prowlarr/prowlarr-base.css @@ -36,10 +36,6 @@ background: var(--transparency-dark-10); } -[class*="IndexerSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { - background: var(--transparency-light-25); -} - [class*="IndexerSearchInput-container-"] [class*="Input-input-"] { background: transparent; border-bottom: solid 1px var(--text); diff --git a/css/base/radarr/radarr-base.css b/css/base/radarr/radarr-base.css index a125a644..ca316ca4 100644 --- a/css/base/radarr/radarr-base.css +++ b/css/base/radarr/radarr-base.css @@ -46,10 +46,6 @@ background: var(--transparency-dark-10); } -[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { - background: var(--transparency-light-25); -} - /* MOVIES PAGE */ [class*="MovieIndexPoster-controls-"] { background-color: rgb(var(--accent-color)) !important; diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css index d5ae60d0..4d165ec9 100644 --- a/css/base/readarr/readarr-base.css +++ b/css/base/readarr/readarr-base.css @@ -44,20 +44,6 @@ background: var(--transparency-dark-10) } -[class*"=AuthorSearchInput-authorContainer-"]::-webkit-scrollbar-thumb, -[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb { - background: var(--transparency-light-25); -} - -/* MINI RIGHT SCROLL BAR */ -[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb { - background: var(--transparency-dark-10) !important; -} - -[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover { - background: var(--transparency-light-25) !important; -} - /* LIBRARY PAGE */ [class*="AuthorIndexPoster-controls-"] { background-color: rgb(var(--accent-color)) !important; diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css index f7e66d73..0a2deaf2 100644 --- a/css/base/sonarr/sonarr-base.css +++ b/css/base/sonarr/sonarr-base.css @@ -66,10 +66,6 @@ background: var(--transparency-dark-10); } -[class*="SeriesSearchInput-seriesContainer-"]::-webkit-scrollbar-thumb { - background: var(--transparency-light-25) !important; -} - /* SERIES PAGE */ [class*="SeriesIndexPoster-controls-"] { background-color: rgb(var(--accent-color)) !important; @@ -154,15 +150,6 @@ color: var(--text-hover); } -/* MINI RIGHT SCROLL BAR */ -[class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb { - background: var(--transparency-dark-10) !important; -} - -[class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb:hover { - background: var(--transparency-light-25) !important; -} - /* SEARCH BAR */ [class*="AddNewSeries-searchIconContainer-"] { border: none; diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index c5e79267..1822ffb5 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -26,6 +26,15 @@ body { color: var(--text); } +*::-webkit-scrollbar-thumb, +[class*="-thumb-"] { + background-color: var(--transparency-light-25) !important; +} +*::-webkit-scrollbar-thumb:hover, +[class*="-thumb-"]:hover { + background-color: var(--transparency-light-35) !important; +} + /* Froms */ [class*="FormInputHelpText-helpText-"] { @@ -497,17 +506,6 @@ a:hover { color: var(--text-hover); } -/* MINI RIGHT SCROLL BAR */ -[class*="OverlayScroller-thumb-"], -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { - background: var(--transparency-dark-10) !important; -} - -[class*="OverlayScroller-thumb-"]:hover, -[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { - background: var(--transparency-light-25) !important; -} - /* ADD NEW */ [class*="EnhancedSelectInput-options-"], @@ -624,10 +622,9 @@ a:hover { } [class*="VirtualTableRow-row-"]:hover { - background: var(--transparency-light-10); + background: var(--transparency-dark-05); } - /*Title*/ [class*="PageJumpBarItem-jumpBarItem-"]:hover { color: var(--text-hover); From d9a4160c147a87ccabe44d521e671d9bb645658a Mon Sep 17 00:00:00 2001 From: GilbN Date: Sun, 24 Apr 2022 21:22:07 +0200 Subject: [PATCH 14/34] fix: :lipstick: servarr: input background fix --- css/defaults/servarr-base.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index 1822ffb5..0130dc61 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -186,8 +186,7 @@ a:hover { } [class*="AutoSuggestInput-suggestionsList-"], -[class*="AutoSuggestInput-suggestionsContainerOpen-"], -[class*="AutoSuggestInput-suggestionsContainer-"] { +[class*="AutoSuggestInput-suggestionsContainerOpen-"] [class*="AutoSuggestInput-suggestionsContainer-"] { background-color: #323232 !important; color: white; border: none !important; @@ -572,11 +571,11 @@ a:hover { border-bottom: 1px solid var(--transparency-light-10) !important; } -/* SEARCH BAR */ +/* INPUT */ [class*="Input-input-"], [class*="CheckInput-isIndeterminate-"] { border: none; - background: var(--transparency-light-10); + background: var(--transparency-light-05); color: var(--text-hover); } @@ -584,7 +583,7 @@ a:hover { outline: 0; border-color: var(--text-hover); box-shadow: none; - background: var(--transparency-light-25); + background: var(--transparency-light-10); } [class*="TagInput-input-"][class*="TagInput-isFocused-"] { From 14b481ef057ded7732572efbe001e4c3e153053d Mon Sep 17 00:00:00 2001 From: Zemoj Date: Mon, 25 Apr 2022 09:41:00 -0700 Subject: [PATCH 15/34] Fix Modal Windows RSS Manager and Rules Manager (#365) * Fix Modal Windows RSS Manager and Rules Manager * use transparency vars Co-authored-by: GilbN <24592972+GilbN@users.noreply.github.com> --- css/base/rutorrent/rutorrent-base.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/css/base/rutorrent/rutorrent-base.css b/css/base/rutorrent/rutorrent-base.css index 031be0a3..1cc005fa 100644 --- a/css/base/rutorrent/rutorrent-base.css +++ b/css/base/rutorrent/rutorrent-base.css @@ -1784,4 +1784,19 @@ div#dlgEditRules-header, #dlgEditRatioRules-header, div#dlgEditRules div.dlg-header { background: var(--transparency-dark-25) !important; +} + +#filterList, #filterProps, #ruleList{ + background: var(--modal-bg-color); +} + +.lf li input.TextboxFocus{ + background: var(--transparency-light-25); + color: var(--text-hover); + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0); +} + +.lf li input.TextboxNormal{ + background: var(--transparency-dark-10); + color: var(--text); } \ No newline at end of file From c5ebf9b9ababd986cb68c1a27372b00f41fd2958 Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 19:40:08 +0200 Subject: [PATCH 16/34] fix: :bug: Guacamole: Fixes for #367 --- css/base/guacamole/guacamole-base.css | 139 +++++++++++++++----------- 1 file changed, 80 insertions(+), 59 deletions(-) diff --git a/css/base/guacamole/guacamole-base.css b/css/base/guacamole/guacamole-base.css index e6cb2db3..bbc356d5 100644 --- a/css/base/guacamole/guacamole-base.css +++ b/css/base/guacamole/guacamole-base.css @@ -26,7 +26,8 @@ h6 { color: var(--text-hover); } -body { +body, +.logged-out-modal guac-modal { background: var(--main-bg-color) !important; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -49,52 +50,6 @@ div.displayMiddle { -o-background-size: auto, cover; } -/* 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); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - } -} - -::-webkit-scrollbar { - width: 14px; -} - -::-webkit-scrollbar-thumb { - min-height: 50px; - border: 3px solid transparent; - border-radius: 8px; - background: var(--transparency-dark-20); - 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: var(--transparency-light-50); - background-clip: padding-box; -} - /* LOGIN MENU */ div.login-ui { background: inherit; @@ -105,6 +60,10 @@ div.login-ui { border: none; } +.login-ui .login-fields .labeled-field .field-header:focus { + color: transparent !important; +} + input[type="submit"], button, a.button { @@ -121,6 +80,11 @@ a.button:hover { cursor: pointer; } +select:focus { + background-color: var(--drop-down-menu-bg); + color: var(--text); +} + .login-ui .login-fields .labeled-field input:focus { background: var(--transparency-dark-45) !important; outline: none; @@ -162,27 +126,42 @@ textarea { /* HOME MENU */ .header h2 { - color: var(--text-hover); - background: var(--transparency-dark-25); + color: rgb(var(--accent-color)); } .connection .icon.vnc, .connection .icon.rdp { background-image: url(/resources/guacamole/guac-monitor.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .connection .icon.ssh, .connection .icon.telnet { background-image: url(/resources/guacamole/guac-text.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .user-menu .menu-dropdown .menu-title { background-image: url(/resources/guacamole/guac-user.png); background-color: transparent; + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .user-menu .menu-dropdown .menu-contents li a[href="#/"] { background-image: url(/resources/guacamole/guac-home-dark.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"], @@ -190,30 +169,58 @@ textarea { .user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"], .user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] { background-image: url(/resources/guacamole/guac-config-dark.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .user-menu .menu-dropdown .menu-contents li a.logout { background-image: url(/resources/guacamole/guac-logout-dark.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .icon.user { background-image: url(/resources/guacamole/guac-user.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .pager .icon.first-page { background-image: url(/resources/guacamole/guac-first-page.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .pager .icon.prev-page { background-image: url(/resources/guacamole/guac-prev-page.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .pager .icon.next-page { background-image: url(/resources/guacamole/guac-next-page.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .pager .icon.last-page { background-image: url(/resources/guacamole/guac-last-page.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .loading::before { @@ -222,19 +229,39 @@ textarea { table.sorted th.sort-primary.sort-descending:after { background-image: url(/resources/guacamole/up.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .menu-dropdown .menu-indicator { background-image: url(/resources/guacamole/down.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } .menu-dropdown .menu-indicator:hover { background-image: url(/resources/guacamole/down.png); color: #f9be03; + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; } table.sorted th.sort-primary:after { background-image: url(/resources/guacamole/down.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: 0.75em; + padding-left: 2.5em; +} + +.form-field .password-field input[type=password]~.icon.toggle-password { + filter: invert(1); } thead { @@ -255,11 +282,6 @@ table.sorted td { background: var(--transparency-dark-25) } -.menu-dropdown { - border-left: none; - background: var(--transparency-dark-25) -} - .menu-dropdown .menu-contents li a { display: block; cursor: pointer; @@ -270,7 +292,6 @@ table.sorted td { .menu-dropdown .menu-contents li a.current, .menu-dropdown .menu-contents li a.current:hover { - background: var(--transparency-dark-25); color: var(--text-hover) } @@ -300,10 +321,6 @@ table.sorted td { color: var(--text-hover); } -.header .filter { - background: var(--transparency-dark-25); -} - .filter .search-string { background-image: url(/resources/guacamole/magnifier.png) !important; background-repeat: no-repeat !important; @@ -606,4 +623,8 @@ input[type=radio] { .related-objects .abbreviated-related-objects ul li label span { color: var(--label-text-color) !important; +} + +.attributes .form h3, .header { + background: var(--transparency-dark-25) } \ No newline at end of file From 074df2fdbb3212c87483f8b13055810096fcc3e3 Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 19:45:26 +0200 Subject: [PATCH 17/34] style: :lipstick: Removed gradient color from --drop-down-menu-bg var --- css/theme-options/aquamarine.css | 2 +- css/theme-options/hotline.css | 2 +- css/theme-options/nord.css | 2 +- css/theme-options/space-gray.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/css/theme-options/aquamarine.css b/css/theme-options/aquamarine.css index e263f729..7f025001 100644 --- a/css/theme-options/aquamarine.css +++ b/css/theme-options/aquamarine.css @@ -5,7 +5,7 @@ --modal-header-color: linear-gradient(-90deg, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(-90deg, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --drop-down-menu-bg: linear-gradient(135deg, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --drop-down-menu-bg: #265c74; --button-color: #009688; --button-color-hover: #12afa0; diff --git a/css/theme-options/hotline.css b/css/theme-options/hotline.css index 5cba2099..1cf394f1 100644 --- a/css/theme-options/hotline.css +++ b/css/theme-options/hotline.css @@ -5,7 +5,7 @@ --modal-header-color: linear-gradient(-90deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(-90deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%) center center/cover no-repeat fixed; - --drop-down-menu-bg: linear-gradient(90deg, rgba(247,101,184,1) 0%, rgba(21, 95, 165) 100%) center center/cover no-repeat fixed; + --drop-down-menu-bg: #5e61ab; --button-color: #f98dc9; --button-color-hover: #ff4cb1; diff --git a/css/theme-options/nord.css b/css/theme-options/nord.css index dc62b646..66e2ab52 100644 --- a/css/theme-options/nord.css +++ b/css/theme-options/nord.css @@ -5,7 +5,7 @@ --modal-header-color: #434C5E; --modal-footer-color: #434C5E; - --drop-down-menu-bg: #3B4252; + --drop-down-menu-bg: #333947; --button-color: #79b8ca; --button-color-hover: #6a9daf; diff --git a/css/theme-options/space-gray.css b/css/theme-options/space-gray.css index 8c996eb8..b8691b12 100644 --- a/css/theme-options/space-gray.css +++ b/css/theme-options/space-gray.css @@ -5,7 +5,7 @@ --modal-header-color: linear-gradient(-90deg, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(-90deg, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; - --drop-down-menu-bg: linear-gradient(-90deg, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; + --drop-down-menu-bg: #576c75; --button-color: #607D8B; --button-color-hover: #81a6b7; From e977930f0165825456a09cd2152e5f1e35246e78 Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 19:47:00 +0200 Subject: [PATCH 18/34] style: :lipstick: starr: use --drop-down-menu-bg var on selects --- css/defaults/servarr-base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index 0130dc61..7889402b 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -182,12 +182,12 @@ a:hover { [class*="SelectInput-select-"]:active, [class*="SelectInput-select-"]:focus { - background: #1e1e1e !important; + background: var(--drop-down-menu-bg) !important; } [class*="AutoSuggestInput-suggestionsList-"], [class*="AutoSuggestInput-suggestionsContainerOpen-"] [class*="AutoSuggestInput-suggestionsContainer-"] { - background-color: #323232 !important; + background-color: var(--drop-down-menu-bg) !important; color: white; border: none !important; } From 1c52851bb71c131a196bf9b69941b741e2c155c0 Mon Sep 17 00:00:00 2001 From: Zemoj Date: Mon, 25 Apr 2022 12:00:39 -0700 Subject: [PATCH 19/34] Override RSS Header Background Image (#368) After latest release RSS window header shows a tiling image caused by transparent background styling. I looked at other headers and for some reason this is the only one with this tiling image. Before: https://i.imgur.com/Sk1Gs0a.png After: https://i.imgur.com/AgSObmX.png --- css/base/rutorrent/rutorrent-base.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/base/rutorrent/rutorrent-base.css b/css/base/rutorrent/rutorrent-base.css index 1cc005fa..1ad02b5c 100644 --- a/css/base/rutorrent/rutorrent-base.css +++ b/css/base/rutorrent/rutorrent-base.css @@ -1799,4 +1799,8 @@ div#dlgEditRules div.dlg-header { .lf li input.TextboxNormal{ background: var(--transparency-dark-10); color: var(--text); -} \ No newline at end of file +} + +div#dlgEditFilters div.dlg-header{ + background-image:none; +} From 1357d30860d493e1f7ae9b606c6fb0ea4493bca2 Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 21:51:15 +0200 Subject: [PATCH 20/34] fix: :bug: Guacamole: couple of tweaks in input/select --- css/base/guacamole/guacamole-base.css | 32 ++++++++++++++++----------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/css/base/guacamole/guacamole-base.css b/css/base/guacamole/guacamole-base.css index bbc356d5..85f07a45 100644 --- a/css/base/guacamole/guacamole-base.css +++ b/css/base/guacamole/guacamole-base.css @@ -60,9 +60,6 @@ div.login-ui { border: none; } -.login-ui .login-fields .labeled-field .field-header:focus { - color: transparent !important; -} input[type="submit"], button, @@ -79,30 +76,31 @@ a.button:hover { border: none; cursor: pointer; } - +select { + background: var(--transparency-dark-10); + color: var(--text); + border-color: transparent; +} select:focus { background-color: var(--drop-down-menu-bg); color: var(--text); } .login-ui .login-fields .labeled-field input:focus { - background: var(--transparency-dark-45) !important; outline: none; } .login-ui .login-fields .labeled-field.empty input { - background: var(--transparency-dark-25) !important; outline: none; + background: rgba(0, 0, 0, 0.15); + caret-color: var(--text); } .login-ui .login-fields .labeled-field.empty input:focus { - background: var(--transparency-dark-45) !important; outline: none; + color: black; } -.login-ui .login-dialog .login-fields input { - background: var(--transparency-dark-45) !important; -} div.location, input[type=text], @@ -111,7 +109,7 @@ input[type=number], input[type=password], textarea { color: var(--text-hover) !important; - background: var(--transparency-dark-25) !important; + background: var(--transparency-dark-25); } input[type=checkbox], @@ -120,8 +118,12 @@ input[type=text], input[type=email], input[type=radio], textarea { - color: var(--text-hover) !important; - background: transparent; + color: var(--text-hover); +} + +.login-ui .login-dialog .login-fields input { + background: white; + color: black !important; } /* HOME MENU */ @@ -627,4 +629,8 @@ input[type=radio] { .attributes .form h3, .header { background: var(--transparency-dark-25) +} + +.connection-parameters .form .fields { + border-left: 3px solid rgb(var(--accent-color)); } \ No newline at end of file From 5d325c9d02eacade9582fa37c7735efed65e60fd Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 22:25:56 +0200 Subject: [PATCH 21/34] fix: :bug: Organizr: button color hover fix --- css/base/organizr/organizr-base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/base/organizr/organizr-base.css b/css/base/organizr/organizr-base.css index 40449ba2..93f240a2 100644 --- a/css/base/organizr/organizr-base.css +++ b/css/base/organizr/organizr-base.css @@ -1403,8 +1403,8 @@ a:hover, .el-element-overlay .el-card-item .el-overlay-1 .el-info>li a:hover { background: transparent; - color: var(--text-hover) !important; - border: var(--text-hover) !important; + color: var(--text-hover); + border: var(--text-hover); } .progress-bar-info { From 8e070d669a059e10d29203c279e7e40947e5a511 Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 23:07:43 +0200 Subject: [PATCH 22/34] fix: :bug: VueTorrent: Accent fixes, label text fixes --- css/base/vuetorrent/vuetorrent-base.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/css/base/vuetorrent/vuetorrent-base.css b/css/base/vuetorrent/vuetorrent-base.css index 54bcdb9d..e24086f3 100644 --- a/css/base/vuetorrent/vuetorrent-base.css +++ b/css/base/vuetorrent/vuetorrent-base.css @@ -78,6 +78,10 @@ p, color: var(--text-hover); } +.v-select__slot>label { + color: var(--text-hover) !important; +} + .v-application .grey--text { color: var(--text-muted) !important; caret-color: var(--text-muted) !important; @@ -86,7 +90,8 @@ p, [class*="theme--"].v-tabs>.v-tabs-bar .v-tab--disabled, [class*="theme--"].v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active), [class*="theme--"].v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-btn, -[class*="theme--"].v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-icon { +[class*="theme--"].v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-icon, +[class*="theme--"].v-messages { color: var(--text); } @@ -456,10 +461,16 @@ p, /* MOBILE */ + + [class*="theme--"].v-btn.v-btn--has-bg { background-color: rgb(var(--accent-color)); } +.v-speed-dial--is-active svg { + fill: var(--label-text-color) !important; +} + .v-speed-dial__list .v-icon__svg { fill: var(--text-hover); } \ No newline at end of file From aec8436ad5fff211248c17dd05d8aadfcd26c4e4 Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 23:40:53 +0200 Subject: [PATCH 23/34] fix: :bug: VueTorrent: More accent/button color fixes --- css/base/vuetorrent/vuetorrent-base.css | 26 +++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/css/base/vuetorrent/vuetorrent-base.css b/css/base/vuetorrent/vuetorrent-base.css index e24086f3..4a85bae4 100644 --- a/css/base/vuetorrent/vuetorrent-base.css +++ b/css/base/vuetorrent/vuetorrent-base.css @@ -204,6 +204,28 @@ p, caret-color: var(--button-color) !important; } +.v-btn.v-application.primary { + background-color: var(--button-color) !important; + border-color: var(--button-color) !important; + color: var(--button-text) !important; +} + +[class*="theme--"].v-btn.v-btn--disabled.v-btn--has-bg { + background-color: var(--button-color) !important; + color: var(--button-text) !important; + opacity: .5; +} +[class*="theme--"].v-btn.v-btn--has-bg:not(.v-btn--round) { + background-color: var(--button-color) !important; + color: var(--button-text) !important; +} + +button>.v-btn--is-elevated .v-btn--has-bg.v-icon__svg { + fill: var(--button-text); +} +.v-icon__svg{ + fill: rgb(var(--accent-color)) !important; +} [class*="theme--"].v-tabs>.v-tabs-bar { background: var(--transparency-dark-15); } @@ -234,8 +256,8 @@ p, } .v-application .accent .v-icon__svg { - color: var(--text-hover) !important; - fill: var(--text-hover) !important; + color: var(--button-text) !important; + fill: var(--button-text) !important; } .v-application .deep-purple.accent-4 { background-color: rgb(var(--accent-color))!important; From a89bb07487810e5f25d430ab8521b4293dbca904 Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 23:42:08 +0200 Subject: [PATCH 24/34] Forgot one --- css/base/vuetorrent/vuetorrent-base.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/base/vuetorrent/vuetorrent-base.css b/css/base/vuetorrent/vuetorrent-base.css index 4a85bae4..9cd8975e 100644 --- a/css/base/vuetorrent/vuetorrent-base.css +++ b/css/base/vuetorrent/vuetorrent-base.css @@ -265,6 +265,10 @@ button>.v-btn--is-elevated .v-btn--has-bg.v-icon__svg { color: var(--label-text-color); } +.v-btn--is-elevated.v-btn--has-bg .v-icon__svg:not(.v-btn--round>span>span>svg) { + fill: var(--button-text) !important; +} + .v-application .deep-purple--text.text--accent-4{ color: rgb(var(--accent-color)) !important; caret-color: rgb(var(--accent-color)) !important; From c08d212c5026058ce1adfe48ff26d6c4ed949b40 Mon Sep 17 00:00:00 2001 From: GilbN Date: Mon, 25 Apr 2022 23:57:39 +0200 Subject: [PATCH 25/34] fix: :bug: VueTorrent: Table fix, torrent card text fix --- css/base/vuetorrent/vuetorrent-base.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/base/vuetorrent/vuetorrent-base.css b/css/base/vuetorrent/vuetorrent-base.css index 9cd8975e..c247e8ba 100644 --- a/css/base/vuetorrent/vuetorrent-base.css +++ b/css/base/vuetorrent/vuetorrent-base.css @@ -344,6 +344,10 @@ button>.v-btn--is-elevated .v-btn--has-bg.v-icon__svg { color: #FFF; } +.v-list-item__content .caption.grey--text { + color: #b1b1b1 !important; +} + .v-application .torrent-paused-color .caption, .v-application .torrent-seeding-color .caption, .v-application .torrent-done-color .caption { @@ -438,7 +442,7 @@ button>.v-btn--is-elevated .v-btn--has-bg.v-icon__svg { /* TABLE */ [class*="theme--"].v-data-table { - background: var(--transparency-dark-65); + background: transparent; color: var(--text); } From 24beeaa26cc2f594c085e425c817ffb583af3d74 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 30 Apr 2022 11:09:20 +0200 Subject: [PATCH 26/34] fix: :lipstick: Remove hardcode select bg --- css/base/adguard/adguard-base.css | 8 ++++---- css/base/bazarr/bazarr-base.css | 6 +++--- css/base/bitwarden/bitwarden-base.css | 4 ++-- css/base/duplicati/duplicati-base.css | 2 +- css/base/filebrowser/filebrowser-base.css | 2 +- css/base/jackett/jackett-base.css | 4 ++-- css/base/mylar3/mylar3-base.css | 2 +- css/base/organizr/organizr-base.css | 4 ++-- css/base/overseerr/overseerr-base.css | 2 +- css/base/portainer/portainer-base.css | 2 +- css/base/rutorrent/rutorrent-base.css | 4 ++-- css/base/sabnzbd/sabnzbd-base.css | 6 +++--- css/base/uptime-kuma/uptime-kuma-base.css | 2 +- css/base/vuetorrent/vuetorrent-base.css | 11 ++--------- css/base/xbackbone/xbackbone-base.css | 2 +- css/defaults/servarr-base.css | 2 +- 16 files changed, 28 insertions(+), 35 deletions(-) diff --git a/css/base/adguard/adguard-base.css b/css/base/adguard/adguard-base.css index e87ce6bb..4c2944a5 100644 --- a/css/base/adguard/adguard-base.css +++ b/css/base/adguard/adguard-base.css @@ -532,7 +532,7 @@ h6, .custom-select:focus { color: var(--text-hover); - background: #1f1f1f url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center; + background: var(--drop-down-menu-bg) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center; background-size: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.2); @@ -541,7 +541,7 @@ h6, select.form-control.select:focus, select:focus { color: var(--text-hover); - background: #1f1f1f !important; + background: var(--drop-down-menu-bg) !important; } .icon--selected { @@ -634,7 +634,7 @@ select:focus { } .dropdown-menu { - background: #1f1f1f !important; + background: var(--drop-down-menu-bg) !important; } .ReactModal__Content { @@ -656,6 +656,6 @@ select:focus { } .dropdown-menu { - background: #1f1f1f !important; + background: var(--drop-down-menu-bg) !important; } } \ No newline at end of file diff --git a/css/base/bazarr/bazarr-base.css b/css/base/bazarr/bazarr-base.css index 34dfa18f..4fe9f307 100644 --- a/css/base/bazarr/bazarr-base.css +++ b/css/base/bazarr/bazarr-base.css @@ -421,7 +421,7 @@ hr { } .popover { - background-color: #1f1f1f; + background-color: var(--drop-down-menu-bg); border: 1px solid var(--transparency-light-20); } @@ -431,7 +431,7 @@ hr { } .popover-header { - background-color: #1f1f1f; + background-color: var(--drop-down-menu-bg); border-bottom: 1px solid var(--transparency-light-10); } @@ -797,7 +797,7 @@ input { /* RECHARTS */ .recharts-default-tooltip { - background: #1f1f1f !important; + background: var(--drop-down-menu-bg) !important; border: transparent !important; } diff --git a/css/base/bitwarden/bitwarden-base.css b/css/base/bitwarden/bitwarden-base.css index 1942df0e..d64b1e99 100644 --- a/css/base/bitwarden/bitwarden-base.css +++ b/css/base/bitwarden/bitwarden-base.css @@ -296,7 +296,7 @@ html[class*="theme_"] .form-control:disabled, } select:focus { - background: #1f1f1f !important; + background: var(--drop-down-menu-bg) !important; } /* DROPDOWN MENU */ @@ -319,7 +319,7 @@ html[class*="theme_"] .navbar .dropdown-menu .dropdown-item-text { html[class*="theme_"] .dropdown-menu, html[class*="theme_"] .dropdown-item { - background: #1f1f1f; + background: var(--drop-down-menu-bg); color: var(--text-hover); } diff --git a/css/base/duplicati/duplicati-base.css b/css/base/duplicati/duplicati-base.css index 3bc31a39..0652bbaf 100644 --- a/css/base/duplicati/duplicati-base.css +++ b/css/base/duplicati/duplicati-base.css @@ -167,7 +167,7 @@ form.styled textarea:focus { select:focus, form.styled select:focus, form.styled .input.select select:focus { - background: #1f1f1f; + background: var(--drop-down-menu-bg); color: var(--text-hover); border: none; diff --git a/css/base/filebrowser/filebrowser-base.css b/css/base/filebrowser/filebrowser-base.css index 336962d8..561f911f 100644 --- a/css/base/filebrowser/filebrowser-base.css +++ b/css/base/filebrowser/filebrowser-base.css @@ -283,7 +283,7 @@ svg { } select>option { - background: #1f1f1f; + background: var(--drop-down-menu-bg); } #search #input { diff --git a/css/base/jackett/jackett-base.css b/css/base/jackett/jackett-base.css index bc8f42eb..dc1e2d7d 100644 --- a/css/base/jackett/jackett-base.css +++ b/css/base/jackett/jackett-base.css @@ -222,9 +222,9 @@ select { } select:focus { - background: #1f1f1f !important; + background: var(--drop-down-menu-bg) !important; color: var(--text) !important; - border: 1px solid #1f1f1f !important; + border: 1px solid var(--drop-down-menu-bg) !important; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); } diff --git a/css/base/mylar3/mylar3-base.css b/css/base/mylar3/mylar3-base.css index bbf5687b..3b2bc81e 100644 --- a/css/base/mylar3/mylar3-base.css +++ b/css/base/mylar3/mylar3-base.css @@ -551,7 +551,7 @@ select { } select:focus { - background: #1f1f1f; + background: var(--drop-down-menu-bg); color: var(--text); } diff --git a/css/base/organizr/organizr-base.css b/css/base/organizr/organizr-base.css index 93f240a2..2726f401 100644 --- a/css/base/organizr/organizr-base.css +++ b/css/base/organizr/organizr-base.css @@ -315,7 +315,7 @@ h6 { /* forms */ select.form-control:focus { box-shadow: none; - background: #1f1f1f; + background: var(--drop-down-menu-bg); border: 1px solid rgba(120, 130, 140, 0.4); } @@ -2255,7 +2255,7 @@ fieldset[disabled] .form-control { .fc-unthemed .fc-divider, .fc-unthemed .fc-popover .fc-header { - background: #1f1f1f; + background: var(--drop-down-menu-bg); } .table-hover>tbody>tr:hover, diff --git a/css/base/overseerr/overseerr-base.css b/css/base/overseerr/overseerr-base.css index bcabaaa9..d12d00cc 100644 --- a/css/base/overseerr/overseerr-base.css +++ b/css/base/overseerr/overseerr-base.css @@ -179,7 +179,7 @@ label { } select:focus { - background: #1f1f1f; + background: var(--drop-down-menu-bg); } diff --git a/css/base/portainer/portainer-base.css b/css/base/portainer/portainer-base.css index c5ae15e0..f318b5b8 100644 --- a/css/base/portainer/portainer-base.css +++ b/css/base/portainer/portainer-base.css @@ -443,7 +443,7 @@ fieldset[disabled] .btn-primary:hover { /* FORM CONTROL */ select:focus, select.form-control:focus { - background: #1f1f1f !important; + background: var(--drop-down-menu-bg) !important; } .form-control { diff --git a/css/base/rutorrent/rutorrent-base.css b/css/base/rutorrent/rutorrent-base.css index 1ad02b5c..427b72b3 100644 --- a/css/base/rutorrent/rutorrent-base.css +++ b/css/base/rutorrent/rutorrent-base.css @@ -374,9 +374,9 @@ div#t div#go:hover { div select { -webkit-appearance: none !important; - background: #1f1f1f url(/resources/rutorrent/dropdown.png) no-repeat 0 0; + background: var(--drop-down-menu-bg) url(/resources/rutorrent/dropdown.png) no-repeat 0 0; background-position: right; - border: 1px solid #1f1f1f; + border: 1px solid var(--drop-down-menu-bg); padding-right: 15px !important; } diff --git a/css/base/sabnzbd/sabnzbd-base.css b/css/base/sabnzbd/sabnzbd-base.css index 364203b9..2a42f217 100644 --- a/css/base/sabnzbd/sabnzbd-base.css +++ b/css/base/sabnzbd/sabnzbd-base.css @@ -509,7 +509,7 @@ td.delete .dropdown>a .caret { } tbody.no-downloads tr td { - border-bottom: 1px solid #1f1f1f !important; + border-bottom: 1px solid var(--drop-down-menu-bg) !important; } tbody>tr>td:last-child { @@ -967,13 +967,13 @@ input[type="date"]::-webkit-calendar-picker-indicator { input[disabled], select[disabled] { - background-color: #1f1f1f; + background-color: var(--drop-down-menu-bg); opacity: .5; } input[disabled]:hover, select[disabled]:hover { - background-color: #1f1f1f; + background-color: var(--drop-down-menu-bg); opacity: .5; } diff --git a/css/base/uptime-kuma/uptime-kuma-base.css b/css/base/uptime-kuma/uptime-kuma-base.css index 16a5bc7b..bd158e29 100644 --- a/css/base/uptime-kuma/uptime-kuma-base.css +++ b/css/base/uptime-kuma/uptime-kuma-base.css @@ -278,7 +278,7 @@ td { .dark .form-control:focus, .form-select:focus, .form-control:focus { - background: #1f1f1f; + background: var(--drop-down-menu-bg); box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25); border-color: rgba(var(--accent-color), 0.25); } diff --git a/css/base/vuetorrent/vuetorrent-base.css b/css/base/vuetorrent/vuetorrent-base.css index c247e8ba..70bf4dd1 100644 --- a/css/base/vuetorrent/vuetorrent-base.css +++ b/css/base/vuetorrent/vuetorrent-base.css @@ -45,7 +45,7 @@ body, html { color: var(--text); - background: #1f1f1f !important; + background: var(--drop-down-menu-bg) !important; } /* SCROLL BAR */ @@ -422,14 +422,7 @@ button>.v-btn--is-elevated .v-btn--has-bg.v-icon__svg { } .v-menu__content [class*="theme--"][class*="theme--"].v-list { - background: var(--modal-bg-color) !important; - 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; + background: var(--drop-down-menu-bg) } [class*="theme--"].v-icon { diff --git a/css/base/xbackbone/xbackbone-base.css b/css/base/xbackbone/xbackbone-base.css index 8619cf70..ceda8e74 100644 --- a/css/base/xbackbone/xbackbone-base.css +++ b/css/base/xbackbone/xbackbone-base.css @@ -340,7 +340,7 @@ a:hover { .form-control:focus { color: var(--text-hover); - background: #1f1f1f; + background: var(--drop-down-menu-bg); border-color: rgba(255, 255, 255, .15); outline: 0; box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0); diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index 7889402b..3c122147 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -328,7 +328,7 @@ a:hover { [class*="Tooltip-body-"], [class*="Tooltip-tooltipContainer-"], [class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { - background: #1f1f1f; + background: var(--drop-down-menu-bg); color: #eee; } From fd918584a3b961909c3a53503a6b1f1690c44519 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 30 Apr 2022 15:08:39 +0200 Subject: [PATCH 27/34] style: :lipstick: starr: tooltip colors --- css/defaults/servarr-base.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index 3c122147..e85564a2 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -329,7 +329,7 @@ a:hover { [class*="Tooltip-tooltipContainer-"], [class*="Tooltip-tooltip-"][class*="Tooltip-default-"] { background: var(--drop-down-menu-bg); - color: #eee; + color: var(--text-hover); } /* @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) { @@ -348,7 +348,11 @@ a:hover { } */ [class*="Tooltip-top-"][class*="Tooltip-inverse-"] { - border-top-color: var(--text); + border-top-color: var(--drop-down-menu-bg); +} + +[class*="Tooltip-bottom-"][class*="Tooltip-inverse-"] { + border-bottom-color: var(--drop-down-menu-bg); } [class*="Tooltip-bottom-"][class*="Tooltip-default-"] { From e7cc6da022acfcc6b3930ccb305a5dd97c222ebc Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 30 Apr 2022 22:21:04 +0200 Subject: [PATCH 28/34] feat: :rocket: Add Nginx Proxy Manager theme --- .../nginxproxymanager-base.css | 347 ++++++++++++++++++ 1 file changed, 347 insertions(+) create mode 100644 css/base/nginxproxymanager/nginxproxymanager-base.css diff --git a/css/base/nginxproxymanager/nginxproxymanager-base.css b/css/base/nginxproxymanager/nginxproxymanager-base.css new file mode 100644 index 00000000..b375dfea --- /dev/null +++ b/css/base/nginxproxymanager/nginxproxymanager-base.css @@ -0,0 +1,347 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +@import url("/css/defaults/placeholders.css"); +@import url("/css/defaults/transparent.css"); + +body { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text); +} + +.header, .footer { + background: var(--transparency-dark-25); + color: var(--text); +} + +.modal-content { + 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; + color: var(--text); + border: none; +} + +.modal-header { + background: var(--modal-header-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-bottom: 1px solid var(--transparency-light-10); + color: var(--text-hover) +} + +.modal-footer { + background: var(--modal-footer-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + border-top: 1px solid var(--transparency-light-10); +} +/* NAVIGATION */ + +.navbar-light .navbar-brand { + color: rgb(var(--accent-color)) +} + +.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { + color: var(--accent-color-hover); +} + +.nav-tabs { + color: var(--link-color); +} +.nav-tabs .nav-link:hover:not(.disabled) { + border-color: var(--accent-color-hover); + color: var(--accent-color-hover); +} + +.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { + color: var(--accent-color-hover); + background-color: transparent; + border-color: var(--accent-color-hover) var(--accent-color-hover) var(--accent-color-hover); +} + +.navbar-light .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} + +.navbar-light .navbar-toggler { + color: rgba(0,0,0,0.5); + border-color: var(--transparency-light-10); +} + +.nav-tabs { + border-bottom: 1px solid var(--transparency-light-10); +} + + +/* DROPDOWNS AND SELECTS */ +.dropdown-menu { + background: var(--drop-down-menu-bg); + color: var(--text); + border: 1px solid var(--transparency-light-10); +} +.dropdown-item, +.card-options a { + color: var(--text); +} +.dropdown-item:hover, .dropdown-item:focus, +.card-options a:hover { + color: var(--text-hover); + text-decoration: none; + background-color: var(--transparency-dark-10); +} + +.dropdown-header { + color: var(--text-hover); +} + +.dropdown-icon { + color: rgb(var(--accent-color)); +} + +.dropdown-divider { + border-top: 1px solid var(--transparency-light-10); +} + +/* TEXT */ +p { + color: var(--text); +} +.text-default { + color: var(--text) !important; +} + +.text-muted, +.custom-switch-description, +.text-gray, +.text-secondary { + color: var(--text-muted) !important; +} + +.text-blue { + color: rgb(var(--accent-color)) !important; +} + +/* LINKS */ +a,.footer a:not(.btn) { + color: var(--link-color); +} +a:hover, a:focus, .footer a:not(.btn):hover { + color: var(--link-color-hover); +} + +/* CARDS */ +.card { + background: var(--transparency-dark-25); +} + +.card-status[class*="bg-"] { + background: rgb(var(--accent-color)) !important; +} + + +/* FORMS AND INPUTS */ + +.form-control, +.selectize-input, .selectize-control.single .selectize-input.input-active, +.selectize-control.single { + color: var(--text); + background-color: var(--transparency-dark-15); + border: 1px solid rgba(0,40,100,0.12); +} +.form-control:focus, +.selectize-input:focus, +.selectize-input.focus, +.selectize-input.full { + color: var(--text-hover); + background-color: var(--transparency-dark-25); + border-color: rgb(var(--accent-color)); + outline: 0; + box-shadow: 0 0 0 2px rgb(var(--accent-color),.25); +} + +.form-control:disabled, .form-control[readonly] { + background-color: var(--transparency-light-35); + opacity: 1; +} + +select:focus { + background: var(--drop-down-menu-bg) !important; + color: var(--text) !important; +} + +.selectize-dropdown { + background: var(--drop-down-menu-bg); + border: 1px solid var(--transparency-light-10); +} + +.selectize-dropdown .active { + color: var(--text); + background-color: var(--transparency-light-10); +} + +.selectize-control.single .selectize-input:after { + background: none; +} + +.selectize-dropdown, .selectize-input, .selectize-input input { + color: var(--text); +} + +.selectize-control.multi .selectize-input>div { + background: rgb(var(--accent-color)); + color: var(--label-text-color); +} + +.selectize-dropdown .create { + color: var(--text); +} +.selectize-dropdown .active.create { + color: var(--text-hover); +} + +.custom-file-label { + color: var(--text-muted); + background: var(--transparency-dark-15); + border: 1px solid var(--transparency-light-10); +} + +.custom-file-label::after { + color: var(--button-text); + background-color: var(--button-color); + border-left: 1px solid var(--transparency-light-10); +} + +.form-fieldset { + background: var(--transparency-dark-25); + border: 1px solid var(--transparency-light-10); +} + +/* BUTTONS */ + +[class*="btn-"]:not(.btn-list), +.card-options a:not(.dropdown-item.add-item), +.input-group-text { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +[class*="btn-"]:hover:not(.btn-list), +.card-options a:hover:not(.dropdown-item.add-item), +[class*="btn-"]:not(:disabled):not(.disabled):not(.btn-list):active, [class*="btn-"]:not(:disabled):not(.disabled):not(.btn-list).active, .show>[class*="btn-"].dropdown-toggle, +[class*="btn-"].disabled,[class*="btn-"]:disabled { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +[class*="btn-"]:focus, [class*="btn-"].focus { + box-shadow: 0 0 0 2px rgb(var(--accent-color), .5); +} +.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show>.btn-secondary.dropdown-toggle:focus { + box-shadow: 0 0 0 2px rgb(var(--accent-color), .5); +} + +.custom-switch-input:checked ~ .custom-switch-indicator { + background: var(--button-color); +} + +.custom-switch-input:focus ~ .custom-switch-indicator { + box-shadow: 0 0 0 2px rgba(var(--accent-color),0.25); + border-color: var(--button-color) +} + +.custom-switch-description { + margin-left: .5rem; + color: #6e7687; + transition: .3s color +} + +.custom-switch-input:checked ~ .custom-switch-description { + color: #495057 +} + +/* TABLES */ +.table th, .text-wrap table th { + color: var(--text-hover); +} + +.table th, .text-wrap table th, .table td, .text-wrap table td { + border-top: 1px solid var(--transparency-light-10); +} + +.table thead th, .text-wrap table thead th { + border-bottom: 1px solid rgb(var(--accent-color)); +} + +/* OTHER */ + +.loader { + color: rgb(var(--accent-color)); +} + +.tag { + color: var(--label-text-color); + background-color: rgb(var(--accent-color)); +} + +.tag[class*="hover-"]:hover, [class*="hover-"]:active, [class*="hover-"]:focus { + background-color: var(--accent-color-hover); + color: var(--label-text-color); +} + +[class*="tag-"] { + background-color: var(--accent-color-hover); + color: var(--label-text-color); +} + +.icon { + color: var(--text) !important; +} + +.close { + color: var(--text); + text-shadow: 0 1px 0 var(--text); +} +.close:hover, .close:focus { + color: var(--text-hover); +} + +pre { + color: var(--text); + background-color: var(--transparency-dark-15); + + text-shadow: 0 1px transparent; +} \ No newline at end of file From fda8fe1ff865f98fb687b144b1eadb43b600e155 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 30 Apr 2022 22:39:27 +0200 Subject: [PATCH 29/34] npm name change --- .../nginx-proxy-manager-base.css} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename css/base/{nginxproxymanager/nginxproxymanager-base.css => nginx-proxy-manager/nginx-proxy-manager-base.css} (100%) diff --git a/css/base/nginxproxymanager/nginxproxymanager-base.css b/css/base/nginx-proxy-manager/nginx-proxy-manager-base.css similarity index 100% rename from css/base/nginxproxymanager/nginxproxymanager-base.css rename to css/base/nginx-proxy-manager/nginx-proxy-manager-base.css From d0a3938a5102c8e9020c99f65bf1be2b23ccaa74 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 30 Apr 2022 23:13:09 +0200 Subject: [PATCH 30/34] npm readme --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 871094a1..ffe4387e 100644 --- a/README.md +++ b/README.md @@ -266,6 +266,10 @@ +

+

Nginx Proxy Manager

+ +

Grafana (Deprecated)

@@ -289,10 +293,6 @@

The Lounge (Deprecated)

- - - From 838f4938221ae93236d9867787c079086cf3c3b0 Mon Sep 17 00:00:00 2001 From: GilbN Date: Tue, 10 May 2022 21:57:05 +0200 Subject: [PATCH 31/34] fix: :lipstick: Servarr: table text color --- css/defaults/servarr-base.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css index e85564a2..1ca1accc 100644 --- a/css/defaults/servarr-base.css +++ b/css/defaults/servarr-base.css @@ -444,6 +444,14 @@ a:hover { border-top: 1px solid var(--transparency-light-25); } +[class*="TablePager-records-"] { + color: var(--text); +} + +[class*="TablePager-disabledPageButton-"] { + color: var(--text-muted); +} + /* TOP MENU */ [class*="PageToolbar-toolbar-"] { background: var(--transparency-dark-25); From be93b660699cad3ff3434ffa93a068bef886848c Mon Sep 17 00:00:00 2001 From: GilbN Date: Tue, 10 May 2022 21:57:22 +0200 Subject: [PATCH 32/34] fix: :bug: Plex: accent fix --- css/base/plex/plex-base.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/css/base/plex/plex-base.css b/css/base/plex/plex-base.css index a2ec7766..37e3d6c4 100644 --- a/css/base/plex/plex-base.css +++ b/css/base/plex/plex-base.css @@ -305,7 +305,8 @@ button:hover [class*="DisclosureArrow-disclosureArrow-"] { } [class*="PivotTab-selectedButton-"]:after, -[class*="TabButton-selectedButton-"]:after { +[class*="TabButton-selectedButton-"]:after, +[class*="PageHeaderTabButton-isSelected-"]:after { background-color: rgb(var(--accent-color)) !important; } From 67105928e3e20432105a626f637723b34d355648 Mon Sep 17 00:00:00 2001 From: GilbN Date: Wed, 11 May 2022 22:27:36 +0200 Subject: [PATCH 33/34] fix: :bug: Organizr: fix log label colors, fix select focus colors --- css/base/organizr/organizr-base.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/css/base/organizr/organizr-base.css b/css/base/organizr/organizr-base.css index 2726f401..cc2ba61b 100644 --- a/css/base/organizr/organizr-base.css +++ b/css/base/organizr/organizr-base.css @@ -150,16 +150,16 @@ h6 { color: var(--text-hover); } -.btn:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success), +.btn:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success):not(.log-label):not(.log-details), .cbutton { background: var(--button-color); border-color: var(--button-color); color: var(--button-text); } -.btn:hover:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success), -.btn:active:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success), -.btn:focus:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success), +.btn:hover:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success):not(.log-label):not(.log-details), +.btn:active:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success):not(.log-label):not(.log-details), +.btn:focus:not(.btn-danger):not(.bg-plex):not(.btn-youtube):not(.btn-info.btn-circle):not(.btn-success):not(.log-label):not(.log-details), .cbutton:hover { background: var(--button-color-hover); border-color: var(--button-color-hover); @@ -2429,6 +2429,10 @@ input:active:not(select), border: 1px solid rgba(120, 130, 140, 0.4); } +select:focus { + background: var(--drop-down-menu-bg); + color: var(--text); +} .cp-container .cp-pills li a { padding: 5px; From 340139b835f2ec67c7c84271e980f9629f1c7070 Mon Sep 17 00:00:00 2001 From: GilbN Date: Sat, 14 May 2022 14:16:28 +0200 Subject: [PATCH 34/34] fix url format, and subfilter --- css/base/grafana/organizr-dashboard.css | 4 +-- css/base/guacamole/guacamole-base.css | 2 +- css/base/rutorrent/rutorrent-base.css | 2 +- .../blackberry-carol.css | 4 +-- css/community-theme-options/mind.css | 2 +- css/community-theme-options/power.css | 2 +- css/community-theme-options/reality.css | 2 +- css/community-theme-options/soul.css | 2 +- css/community-theme-options/space.css | 2 +- css/community-theme-options/time.css | 2 +- css/theme-options/maroon.css | 30 +++++++++++++++++++ css/theme-options/plex.css | 8 ++--- docker/root/defaults/default | 1 + 13 files changed, 47 insertions(+), 16 deletions(-) create mode 100644 css/theme-options/maroon.css diff --git a/css/base/grafana/organizr-dashboard.css b/css/base/grafana/organizr-dashboard.css index a175678b..3285b8f5 100644 --- a/css/base/grafana/organizr-dashboard.css +++ b/css/base/grafana/organizr-dashboard.css @@ -250,8 +250,8 @@ div.flot-text { @import url(/css/base/grafana/grafana-base.css); :root { - --main-bg-color: url("/resources/blur-noise.png"), url("/resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("/resources/blur-noise.png"), url("/resources/preset-dark2.png") center center/cover no-repeat fixed; + --main-bg-color: url(/resources/blur-noise.png), url(/resources/preset-light2.png) center center/cover no-repeat fixed; + --modal-bg-color: url(/resources/blur-noise.png), url(/resources/preset-dark2.png) center center/cover no-repeat fixed; --button-color: #cc7b19; --button-color-hover: #e59029; diff --git a/css/base/guacamole/guacamole-base.css b/css/base/guacamole/guacamole-base.css index 64a9caa7..ad899665 100644 --- a/css/base/guacamole/guacamole-base.css +++ b/css/base/guacamole/guacamole-base.css @@ -230,7 +230,7 @@ textarea { } .loading::before { - background-image: url('/resources/guacamole/cog.png'); + background-image: url(/resources/guacamole/cog.png); } table.sorted th.sort-primary.sort-descending:after { diff --git a/css/base/rutorrent/rutorrent-base.css b/css/base/rutorrent/rutorrent-base.css index 427b72b3..aab21045 100644 --- a/css/base/rutorrent/rutorrent-base.css +++ b/css/base/rutorrent/rutorrent-base.css @@ -1625,7 +1625,7 @@ div#dlgEditRatioRules { } #autodl-multiselect-header { - background-image: url("/resources/rutorrent/dlg-autodl-irc.gif"); + background-image: url(/resources/rutorrent/dlg-autodl-irc.gif"); } .shieven { diff --git a/css/community-theme-options/blackberry-carol.css b/css/community-theme-options/blackberry-carol.css index 3dcbd0b3..51ce48be 100644 --- a/css/community-theme-options/blackberry-carol.css +++ b/css/community-theme-options/blackberry-carol.css @@ -1,5 +1,5 @@ :root { - --main-bg-color: url("/resources/blur-noise.png"), + --main-bg-color: url(/resources/blur-noise.png), radial-gradient(at center center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9) 120%) center center/cover no-repeat fixed, radial-gradient(at bottom center, rgba(0, 0, 0, 0.15), hsla(0, 14%, 18%, 0.45), hsla(0, 18%, 5%, 0.6)) center center/cover no-repeat fixed, radial-gradient(at bottom center, rgba(167, 6, 6, 0.15), hsla(0, 14%, 18%, 0), hsla(0, 18%, 5%, 0)) center center/cover no-repeat fixed, @@ -34,7 +34,7 @@ --plex-poster-unwatched: rgb(100, 15, 15); --petio-spinner: invert(68%) sepia(13%) saturate(766%) hue-rotate(170deg) brightness(90%) contrast(79%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ --gitea-color-primary-dark-4: 100, 15, 15; - --overseerr-gradient: url("/resources/blur-noise.png"), + --overseerr-gradient: url(/resources/blur-noise.png), radial-gradient(at center center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9) 120%) center center/cover no-repeat fixed, radial-gradient(at bottom center, rgba(0, 0, 0, 0.15), hsla(0, 14%, 18%, 0.45), hsla(0, 18%, 5%, 0.6)) center center/cover no-repeat fixed, radial-gradient(at bottom center, rgba(167, 6, 6, 0.15), hsla(0, 14%, 18%, 0), hsla(0, 18%, 5%, 0)) center center/cover no-repeat fixed, diff --git a/css/community-theme-options/mind.css b/css/community-theme-options/mind.css index c01a8cab..bd65d1ae 100644 --- a/css/community-theme-options/mind.css +++ b/css/community-theme-options/mind.css @@ -1,6 +1,6 @@ :root { --main-bg-color: radial-gradient(ellipse at center bottom, rgba(255, 242, 0, .7) 0%, #0d0400 80%, rgba(0, 0, 0, 1) 100%) center center/cover no-repeat fixed, - url("/resources/mind.jpg") center center/cover no-repeat fixed; + url(/resources/mind.jpg) center center/cover no-repeat fixed; --modal-bg-color: linear-gradient(180deg, rgba(51, 49, 0, 1) 0%, #000 100%) center center/cover no-repeat fixed; --modal-header-color: linear-gradient(180deg, rgba(51, 49, 0, 1) 0%, #000 100%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(180deg, rgba(51, 49, 0, 1) 0%, #000 100%) center center/cover no-repeat fixed; diff --git a/css/community-theme-options/power.css b/css/community-theme-options/power.css index 5b3c3054..e3e059c2 100644 --- a/css/community-theme-options/power.css +++ b/css/community-theme-options/power.css @@ -1,6 +1,6 @@ :root { --main-bg-color: radial-gradient(ellipse at center bottom, rgba(166, 40, 140, .7) 0%, rgba(11,8,51,1) 80%, rgba(0,0,0,1) 100%) center center/cover no-repeat fixed, - url("/resources/power.jpg") center center/cover no-repeat fixed; + url(/resources/power.jpg) center center/cover no-repeat fixed; --modal-bg-color: linear-gradient(180deg, rgba(35, 0, 57, 1) 0%, #000 100%) center center/cover no-repeat fixed; --modal-header-color: linear-gradient(180deg, rgba(35, 0, 57, 1) 0%, #000 100%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(180deg, rgba(35, 0, 57, 1) 0%, #000 100%) center center/cover no-repeat fixed; diff --git a/css/community-theme-options/reality.css b/css/community-theme-options/reality.css index 21ef4c22..411fda46 100644 --- a/css/community-theme-options/reality.css +++ b/css/community-theme-options/reality.css @@ -1,6 +1,6 @@ :root { --main-bg-color: radial-gradient(ellipse at center bottom, rgba(232, 11, 11, 0.7) 0%, #08000d 80%, rgba(0,0,0,1) 100%) center center/cover no-repeat fixed, - url("/resources/reality.jpg") center center/cover no-repeat fixed; + url(/resources/reality.jpg) center center/cover no-repeat fixed; --modal-bg-color: linear-gradient(180deg, rgba(102, 5, 5, 1) 0%, #000 100%) center center/cover no-repeat fixed; --modal-header-color: linear-gradient(180deg, rgba(102, 5, 5, 1) 0%, #000 100%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(180deg, rgba(102, 5, 5, 1) 0%, #000 100%) center center/cover no-repeat fixed; diff --git a/css/community-theme-options/soul.css b/css/community-theme-options/soul.css index 43202921..07c2b204 100644 --- a/css/community-theme-options/soul.css +++ b/css/community-theme-options/soul.css @@ -1,6 +1,6 @@ :root { --main-bg-color: radial-gradient(ellipse at center bottom, rgba(255, 153, 0, .7) 0%, #3c0015 80%, rgba(0, 0, 0, 1) 100%) center center/cover no-repeat fixed, - url("/resources/soul.jpg") center center/cover no-repeat fixed; + url(/resources/soul.jpg) center center/cover no-repeat fixed; --modal-bg-color: linear-gradient(180deg, rgba(140, 64, 2, 1) 0%, #3c0015 100%) center center/cover no-repeat fixed; --modal-header-color: linear-gradient(180deg, rgba(140, 64, 2, 1) 0%, #3c0015 100%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(180deg, rgba(140, 64, 2, 1) 0%, #3c0015 100%) center center/cover no-repeat fixed; diff --git a/css/community-theme-options/space.css b/css/community-theme-options/space.css index ff3ec9e7..0f922ed3 100644 --- a/css/community-theme-options/space.css +++ b/css/community-theme-options/space.css @@ -1,6 +1,6 @@ :root { --main-bg-color: radial-gradient(ellipse at center bottom, rgba(0, 98, 255, .7) 0%, #020013 80%, rgb(0, 0, 0) 100%) center center/cover no-repeat fixed, - url("/resources/space.jpg") center center/cover no-repeat fixed; + url(/resources/space.jpg) center center/cover no-repeat fixed; --modal-bg-color: linear-gradient(180deg, rgb(0, 57, 148) 0%, #10003c 100%) center center/cover no-repeat fixed; --modal-headercolor: linear-gradient(180deg, rgb(0, 57, 148) 0%, #10003c 100%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(180deg, rgb(0, 57, 148) 0%, #10003c 100%) center center/cover no-repeat fixed; diff --git a/css/community-theme-options/time.css b/css/community-theme-options/time.css index ac159ae0..6cc9173f 100644 --- a/css/community-theme-options/time.css +++ b/css/community-theme-options/time.css @@ -1,6 +1,6 @@ :root { --main-bg-color: radial-gradient(ellipse at center bottom, rgba(109, 247, 81, .7) 0%, #00130c 80%, rgb(0, 0, 0) 100%) center center/cover no-repeat fixed, - url("/resources/time.jpg") center center/cover no-repeat fixed; + url(/resources/time.jpg) center center/cover no-repeat fixed; --modal-bg-color: linear-gradient(180deg, rgba(2, 77, 0, 1) 0%, #00130c 100%) center center/cover no-repeat fixed; --modal-header-color: linear-gradient(180deg, rgba(2, 77, 0, 1) 0%, #00130c 100%) center center/cover no-repeat fixed; --modal-footer-color: linear-gradient(180deg, rgba(2, 77, 0, 1) 0%, #00130c 100%) center center/cover no-repeat fixed; diff --git a/css/theme-options/maroon.css b/css/theme-options/maroon.css new file mode 100644 index 00000000..7fcc03bd --- /dev/null +++ b/css/theme-options/maroon.css @@ -0,0 +1,30 @@ +:root { + --main-bg-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed; + + --modal-bg-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed; + --modal-header-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed; + --modal-footer-color: radial-gradient( circle farthest-corner at 48.4% 47.5%, rgba(76,21,51,1) 0%, rgba(34,10,37,1) 90% ) center center/cover no-repeat fixed; + + --drop-down-menu-bg: #204c80; + + --button-color: #7b154d; + --button-color-hover: rgb(150, 26, 94); + --button-text: #eee; + --button-text-hover: #FFF; + + --accent-color: 208, 103, 160; + --accent-color-hover: rgb(var(--accent-color),.8); + --queue-color: #6b5; + --link-color: rgb(162, 28, 101); + --link-color-hover: rgb(150, 26, 94); + + --text:#dadada; + --text-hover: #fff; + --text-muted: #999; + + --arr-queue-color: rgb(0, 255, 157); + --plex-poster-unwatched: rgb(123, 21, 77); + --petio-spinner: invert(13%) sepia(77%) saturate(2418%) hue-rotate(306deg) brightness(94%) contrast(98%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ + --gitea-color-primary-dark-4: 150, 26, 94; + --overseerr-gradient: linear-gradient(0deg, rgba(76,21,51,.9) 0%, rgb(34,10,37,.9) 100%) center center/cover no-repeat fixed; + } \ No newline at end of file diff --git a/css/theme-options/plex.css b/css/theme-options/plex.css index 65782532..1d475303 100644 --- a/css/theme-options/plex.css +++ b/css/theme-options/plex.css @@ -1,8 +1,8 @@ :root { /* - --main-bg-color: url("/resources/blur-noise.png"), url("/resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("/resources/blur-noise.png"), url("/resources/preset-dark2.png") center center/cover no-repeat fixed; - --main-bg-color: url("/resources/blur-noise.png") repeat scroll 0% 0%, radial-gradient(circle at 0% 100%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%), radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%), rgb(0, 0, 0) center center/cover no-repeat fixed; + --main-bg-color: url(/resources/blur-noise.png), url(/resources/preset-light2.png) center center/cover no-repeat fixed; + --modal-bg-color: url(/resources/blur-noise.png), url(/resources/preset-dark2.png) center center/cover no-repeat fixed; + --main-bg-color: url(/resources/blur-noise.png) repeat scroll 0% 0%, radial-gradient(circle at 0% 100%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%), radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%), rgb(0, 0, 0) center center/cover no-repeat fixed; */ --main-bg-color: radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), black center center/cover no-repeat fixed; --modal-bg-color: #282828; @@ -31,5 +31,5 @@ --plex-poster-unwatched: #e5a00d; --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);/* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ --gitea-color-primary-dark-4: 255, 193, 7; - --overseerr-gradient: url("/resources/blur-noise.png") repeat scroll 0% 0%, radial-gradient(circle at 0% 100% , rgba(54, 66, 84, 0.55) 0% , rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%) center center/cover no-repeat fixed , radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%) center center/cover no-repeat fixed , rgb(0, 0, 0,.9) center center/cover no-repeat fixed; + --overseerr-gradient: url(/resources/blur-noise.png) repeat scroll 0% 0%, radial-gradient(circle at 0% 100% , rgba(54, 66, 84, 0.55) 0% , rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 100% 100%, rgba(113, 135, 153, 0.55) 0%, rgba(113, 135, 153, 0.043) 70%, rgba(113, 135, 153, 0) 80%) center center/cover no-repeat fixed , radial-gradient(circle at 100% 0%, rgba(54, 66, 84, 0.55) 0%, rgba(54, 66, 84, 0.043) 70%, rgba(54, 66, 84, 0) 80%), radial-gradient(circle at 0% 0%, rgba(91, 114, 135, 0.55) 0%, rgba(91, 114, 135, 0.043) 70%, rgba(91, 114, 135, 0) 80%) center center/cover no-repeat fixed , rgb(0, 0, 0,.9) center center/cover no-repeat fixed; } \ No newline at end of file diff --git a/docker/root/defaults/default b/docker/root/defaults/default index daf39bad..ce58534f 100644 --- a/docker/root/defaults/default +++ b/docker/root/defaults/default @@ -20,6 +20,7 @@ server { alias /config/www/; sub_filter_types *; sub_filter 'url("/css/' 'url("/themepark/css/'; + sub_filter 'url(/resources/' 'url(/themepark/resources/'; sub_filter_once off; try_files $uri $uri/ /index.html; }