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.
 ------------------------------
 
 <!--- We welcome all PR’s though this doesn’t guarantee it will be accepted. -->
 
+## Bug fixes
+
+- When submitting bugfixes please show a before and after screenshot of the fix, and a description of what the fix does.
+
 ## Description:
 <!--- Describe your changes in detail -->
 <!--- Add before and after screenshots of your changes -->
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 3f64e954..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);
 
 }
 
@@ -504,7 +505,7 @@ hr {
 }
 
 .close:hover {
-    var(--text) !important;
+    color: var(--text-hover) !important;
     text-decoration: none;
 }
 
@@ -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 bb2ae99f..1942df0e 100644
--- a/css/base/bitwarden/bitwarden-base.css
+++ b/css/base/bitwarden/bitwarden-base.css
@@ -10,6 +10,9 @@
 /*		   		        Made by @gilbN					 */
 /* 			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 * {
     outline: none;
 }
@@ -91,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,
@@ -116,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,
@@ -129,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;
 }
@@ -154,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: rgb(0 0 0 / 15%) !important;
+html[class*="theme_"] app-password-generator .card-password .card-body {
+    background: var(--transparency-dark-15);
 }
 
 html[class*="theme_"] .password-number {
@@ -277,19 +279,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;
 }
 
@@ -330,13 +332,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 {
@@ -371,24 +373,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-25);
     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 */
@@ -528,7 +530,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);
 }
 
@@ -556,7 +558,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;
 }
 
@@ -578,47 +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));
 }
-
-/* PLACEHOLDER TEXT */
-input::-webkit-input-placeholder {
-    color: var(--text);
+html[class*="theme_"] .btn-outline-secondary i {
+    color: var(--button-text) !important;
 }
-
-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 {
-    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;
@@ -629,7 +597,7 @@ input:focus:-ms-input-placeholder {
 }
 
 .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;
@@ -641,11 +609,11 @@ input:focus:-ms-input-placeholder {
 
 /* 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 {
@@ -665,7 +633,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 1a2ed7e8..cf8f95b2 100644
--- a/css/base/calibreweb/calibreweb-base.css
+++ b/css/base/calibreweb/calibreweb-base.css
@@ -13,6 +13,10 @@
  /* "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");
+@import url("/css/defaults/transparent.css");
+
  :root {
     --color-background: var(--main-bg-color);
     --color-primary: rgb(var(--accent-color));
@@ -200,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 */
@@ -222,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 ffdb27a9..09e9de18 100644
--- a/css/base/deluge/deluge-base.css
+++ b/css/base/deluge/deluge-base.css
@@ -13,6 +13,8 @@
  /* 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");
+@import url("/css/defaults/transparent.css");
 
  html {
      background: var(--main-bg-color);
@@ -33,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,
@@ -55,7 +57,7 @@
  }
 
  .ext-el-mask {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
  }
 
  .ext-el-mask-msg {
@@ -303,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;
  }
@@ -348,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,
@@ -434,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;
  }
@@ -778,6 +780,10 @@
      color: var(--button-text);
  }
 
+ #deluge-statusbar .x-btn button {
+    color: var(--text)
+}
+
  .x-btn em {
      font-style: normal;
      font-weight: normal;
@@ -1029,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 {
@@ -1061,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;
  }
 
@@ -1079,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;
  }
@@ -1105,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;
 
  }
@@ -1146,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;
@@ -1507,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 {
@@ -1773,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;
  }
@@ -1951,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 {
@@ -2299,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 {
@@ -2369,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;
  }
@@ -2384,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 c109aa34..def06c96 100644
--- a/css/base/dozzle/dozzle-base.css
+++ b/css/base/dozzle/dozzle-base.css
@@ -10,10 +10,13 @@
 /*		   		        Made by @gilbN					 */
 /*			      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));
@@ -51,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);
 
 }
 
@@ -108,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;
 }
 
@@ -152,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);
 }
 
@@ -232,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 {
@@ -251,7 +254,7 @@ code {
 /* Events */
 
 .events {
-    background: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
 }
 
 .scroll-progress svg circle {
@@ -268,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 379e1563..b86d7ca3 100644
--- a/css/base/duplicacy/duplicacy-base.css
+++ b/css/base/duplicacy/duplicacy-base.css
@@ -10,6 +10,8 @@
 /*		   		        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);
@@ -64,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;
 }
 
@@ -76,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;
 }
 
@@ -146,27 +148,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;
@@ -181,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,
@@ -206,7 +187,7 @@ label {
 #schedule-19,
 #schedule-20,
 [id*="#schedule-"] {
-    background-color: rgb(0 0 0 / 8%);
+    background: var(--transparency-dark-10);
 }
 
 /* TIMELINE */
@@ -238,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;
@@ -246,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;
 }
 
@@ -256,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 */
@@ -265,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,
@@ -341,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;
 }
@@ -352,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;
 }
 
@@ -372,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;
 }
 
@@ -403,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,
@@ -448,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;
 }
@@ -541,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,
@@ -608,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);
 }
 
@@ -649,7 +630,7 @@ hr {
 
 /* PROGRESS BARS */
 .progress {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .progress-bar {
@@ -662,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 b4ea5322..9463def3 100644
--- a/css/base/emby/emby-base.css
+++ b/css/base/emby/emby-base.css
@@ -1,3 +1,6 @@
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 :root {
     --theme-primary-color: var(--accent-color);
     --theme-text-color: var(--text);
@@ -9,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);
 }
@@ -27,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);
     }
@@ -39,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 +176,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 +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
 }
 
@@ -332,7 +335,7 @@ html {
 
 @media(hover: hover) and (pointer:fine) {
     .actionSheetMenuItem:hover {
-        background-color: rgba(255, 255, 255, .2)
+        background: var(--transparency-light-20)
     }
 }
 
@@ -396,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 2a15beff..336962d8 100644
--- a/css/base/filebrowser/filebrowser-base.css
+++ b/css/base/filebrowser/filebrowser-base.css
@@ -10,41 +10,8 @@
 /*		   		        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");
+@import url("/css/defaults/transparent.css");
 
 .message {
     color: var(--text-hover);
@@ -82,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;
 }
 
@@ -137,7 +104,7 @@ body {
 }
 
 nav {
-    background: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     height: 100%;
     top: 64px;
     width: 240px;
@@ -158,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));
 }
 
@@ -167,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;
@@ -208,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;
@@ -247,7 +214,7 @@ body {
 }
 
 .share__box__info {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .share__box__download {
@@ -305,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);
 }
 
@@ -338,7 +305,7 @@ select>option {
 }
 
 #search .boxes {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
     padding: 15px;
 }
 
@@ -347,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 {
@@ -377,7 +344,7 @@ select>option {
 }
 
 .card {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
 }
 
 .card h3 {
@@ -438,7 +405,7 @@ table th {
 }
 
 #search #input {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 #listing.mosaic .item {
@@ -447,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 9f8d81f9..329a38aa 100644
--- a/css/base/flood/flood-base.css
+++ b/css/base/flood/flood-base.css
@@ -12,6 +12,9 @@
 
 /* MOBILE */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 @media (max-width: 720px) {
 
     .modal__body,
@@ -85,7 +88,7 @@ p,
 
 
 .panel--light {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 .panel {
@@ -99,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);
@@ -123,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);
@@ -148,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 {
@@ -175,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%);
 
 }
@@ -186,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 {
@@ -208,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%);
@@ -223,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%);
@@ -262,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);
 }
 
@@ -287,20 +290,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;
@@ -327,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);
 }
@@ -467,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;
 }
 
@@ -486,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);
 }
@@ -637,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);
 }
 
@@ -656,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;
 }
 
@@ -705,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 54ce6d34..e6c788ce 100644
--- a/css/base/gaps/gaps-base.css
+++ b/css/base/gaps/gaps-base.css
@@ -10,6 +10,9 @@
 /*		   		        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;
@@ -52,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;
 }
 
@@ -64,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;
 }
 
@@ -110,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,
@@ -150,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,
@@ -175,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 {
@@ -279,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;
 }
 
@@ -296,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 {
@@ -311,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)
 }
 
@@ -320,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 {
@@ -350,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 304c0176..9f43e61c 100644
--- a/css/base/gitea/gitea-base.css
+++ b/css/base/gitea/gitea-base.css
@@ -12,6 +12,9 @@
 
 @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);
     --color-caret: white;
@@ -117,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;
 }
@@ -130,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;
 }
 
@@ -222,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);
 }
 
@@ -247,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);
 }
@@ -255,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);
 }
 
@@ -268,7 +271,7 @@ b:hover,
 }
 
 .ui.segment {
-    background: rgb(0 0 0 / 15%) !important;
+    background: var(--transparency-dark-15) !important;
 }
 
 .ui.attached.segment,
@@ -280,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);
 }
 
@@ -290,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;
 
 }
 
@@ -315,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 {
@@ -328,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;
 }
@@ -342,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 {
@@ -354,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);
 
 }
 
@@ -439,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 {
@@ -490,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;
 }
 
@@ -527,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);
 }
 
@@ -545,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);
 }
 
@@ -562,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;
 }
 
@@ -638,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%);
 }
 
@@ -647,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;
@@ -655,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);
 }
 
@@ -684,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 {
@@ -714,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 {
@@ -803,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 {
@@ -812,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 {
@@ -861,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;
 }
 
@@ -870,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 {
@@ -900,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 {
@@ -930,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);
     ;
 }
 
@@ -957,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 {
@@ -1003,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 {
@@ -1018,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 {
@@ -1040,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;
 }
 
@@ -1076,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 {
@@ -1112,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);
 }
@@ -1143,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 */
@@ -1170,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,
@@ -1180,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,
@@ -1317,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);
 }
 
@@ -1414,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;
@@ -1446,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;
@@ -1470,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;
 }
@@ -1479,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;
 }
@@ -1488,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;
 }
@@ -1496,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;
@@ -1504,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;
@@ -1514,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);
 }
@@ -1540,39 +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);
-}
-
-
-/* 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;
+    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 e06e0d2d..e6cb2db3 100644
--- a/css/base/guacamole/guacamole-base.css
+++ b/css/base/guacamole/guacamole-base.css
@@ -10,6 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none !important;
@@ -47,41 +49,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 {
@@ -112,7 +79,7 @@ input:focus:-ms-input-placeholder {
     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;
 }
 
@@ -124,7 +91,7 @@ input:focus:-ms-input-placeholder {
     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;
 }
 
@@ -134,7 +101,7 @@ div.login-ui {
 }
 
 .login-ui div.login-dialog {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: none;
 }
 
@@ -155,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,
@@ -180,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],
@@ -196,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,
@@ -280,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 {
@@ -303,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);
 }
 
@@ -334,7 +301,7 @@ table.sorted td {
 }
 
 .header .filter {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .filter .search-string {
@@ -346,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;
 }
 
@@ -368,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);
 }
 
@@ -414,7 +381,7 @@ textarea {
 
 .clipboard,
 .clipboard-service-target {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -453,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,
@@ -486,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 {
@@ -503,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;
 }
 
@@ -523,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 ff885471..bc8f42eb 100644
--- a/css/base/jackett/jackett-base.css
+++ b/css/base/jackett/jackett-base.css
@@ -9,6 +9,10 @@
 
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
+
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 * {
     outline: none !important;
 }
@@ -70,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;
 }
 
@@ -82,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;
 }
 
@@ -101,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);
 }
 
 
@@ -119,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 {
@@ -140,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);
@@ -165,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,
@@ -182,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 {
@@ -201,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%);
@@ -234,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);
 }
 
@@ -301,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,
@@ -309,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;
 }
 
@@ -375,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);
 }
 
@@ -403,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 5bef3117..628ac1d7 100644
--- a/css/base/jellyfin/jellyfin-base.css
+++ b/css/base/jellyfin/jellyfin-base.css
@@ -1,3 +1,6 @@
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 :root {
     --theme-primary-color: var(--accent-color);
     --theme-text-color: var(--text);
@@ -9,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);
 }
@@ -27,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);
     }
@@ -39,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);
 }
@@ -171,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) {
@@ -213,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
 }
 
@@ -339,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);
     }
 }
@@ -374,7 +377,7 @@ html {
 
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
-    background: rgba(30, 30, 30, .9)
+    background: var(--transparency-dark-90)
 }
 
 .listItem-border {
@@ -382,7 +385,7 @@ html {
 }
 
 .listItem-focusscale:focus {
-    background: rgba(54, 54, 54, .8)
+    background: var(--transparency-dark-80)
 }
 
 .listItemIcon:not(.listItemIcon-transparent) {
@@ -409,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)
 }
 
@@ -703,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 4043bada..49c84b0b 100644
--- a/css/base/kitana/kitana-base.css
+++ b/css/base/kitana/kitana-base.css
@@ -10,6 +10,9 @@
 /*		   		        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;
@@ -74,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 {
@@ -109,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 {
@@ -120,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;
 }
 
@@ -150,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;
 }
 
@@ -159,7 +162,7 @@ ul li:hover {
 }
 
 .alert-secondary {
-    background-color: rgb(255 255 255 / 20%);
+    background: var(--transparency-light-20);
 }
 
 /* BUTTONS */
@@ -189,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;
 }
 
@@ -228,26 +231,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..813b1d16 100644
--- a/css/base/lazylibrarian/lazylibrarian-base.css
+++ b/css/base/lazylibrarian/lazylibrarian-base.css
@@ -9,6 +9,10 @@
 
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
+
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 * {
     outline: none !important;
 }
@@ -55,42 +59,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 {
@@ -121,7 +89,7 @@ input:focus:-ms-input-placeholder {
     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;
 }
 
@@ -133,7 +101,7 @@ input:focus:-ms-input-placeholder {
     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;
 }
 
@@ -168,7 +136,7 @@ input:focus:-ms-input-placeholder {
 .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 */
@@ -340,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;
 }
@@ -359,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;
 }
@@ -368,7 +336,7 @@ select.form-control:active,
 /* TABLE */
 
 table {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 thead {
@@ -376,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 {
@@ -399,7 +367,7 @@ thead {
 /* BOOKWALL */
 
 .table-responsive>.table {
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10)
 }
 
 /* SETTINGS */
@@ -408,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;
@@ -425,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 {
@@ -484,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 e5dbc293..2c38406d 100644
--- a/css/base/librespeed/librespeed-base.css
+++ b/css/base/librespeed/librespeed-base.css
@@ -10,6 +10,9 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 html,
 body {
     background: var(--main-bg-color) !important;
@@ -102,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..f934a224 100644
--- a/css/base/lidarr/lidarr-base.css
+++ b/css/base/lidarr/lidarr-base.css
@@ -11,6 +11,8 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @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;
@@ -21,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-color: rgba(0, 0, 0, 0.25) !important;
-}
-
-[class*="SelectInput-select-"]:active,
-[class*="SelectInput-select-"]:focus {
-    background: #1e1e1e !important;
-}
-
-[class*="AutoSuggestInput-suggestionsList-"],
-[class*="AutoSuggestInput-suggestionsContainerOpen-"],
-[class*="AutoSuggestInput-suggestionsContainer-"] {
-    background-color: #323232 !important;
-    color: white;
-    border: none !important;
-}
-
-[class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="CheckInput-primaryIsChecked-"] {
-    border-color: 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-color: rgba(0, 0, 0, .35);
-    color: var(--text);
-}
-
-/* SEARCH DROPDOWN HEADER */
-
-[class*="PageHeader-donate-"] {
-    color: #c4273c !important;
-}
-
 /* LIDARR SPECIFIC */
 [class*="ArtistSearchInput-sectionTitle-"] {
     color: var(--text-hover);
@@ -232,148 +43,14 @@ a:hover {
 }
 
 [class*="ArtistSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08)
-}
-
-[class*"=ArtistSearchInput-artistContainer-"]::-webkit-scrollbar-thumb,
-[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.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;
-}
-
-[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;
-}
-
-/* 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-color: rgba(255, 255, 255, 0.20) !important;
-    color: var(--text-hover);
-}
-
-[class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-[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-color: rgba(0, 0, 0, .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-color: rgba(0, 0, 0, 0.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);
+    background: var(--transparency-dark-10)
 }
 
 /* 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 {
@@ -385,27 +62,18 @@ a:hover {
 }
 
 [class*="ArtistIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="ArtistIndexOverview-link-"]:hover {
     text-decoration: none;
 }
 
-[class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
-}
-
-[class*=".ProgressBar-purple-"] {
-    background-color: rgb(var(--accent-color));
-}
-
-
 /*ARTIST PAGE*/
 [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-"],
@@ -419,36 +87,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);
@@ -456,12 +94,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,222 +108,31 @@ 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);
 }
 
-[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: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
-}
-
-/* TOP MENU SERIES */
-[class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
-    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-"] {
-    background-color: rgba(255, 255, 255, 0.08);
-    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: hsla(0, 0%, 100%, .08) !important;
-    color: var(--text-hover);
-    text-decoration: none;
-}
-
-[class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-/* ALPHABET JUMP BAR */
-[class*="PageJumpBar-jumpBar-"] {
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 /* SEARCH BAR */
-[class*="Input-input-"],
 [class*="AddNewArtist-searchIconContainer-"],
-[class*="AddNewItem-searchIconContainer-"],
-[class*="CheckInput-isIndeterminate-"] {
+[class*="AddNewItem-searchIconContainer-"] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -704,30 +151,7 @@ a:hover {
     font-size: 12px;
 }
 
-[class*="Input-input-"]:focus {
-    outline: 0;
-    border-color: var(--text-hover);
-    box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.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);
 }
@@ -741,20 +165,11 @@ 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;
 }
 
-[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-"] {
@@ -775,7 +190,7 @@ a:hover {
 }
 
 [class*="ImportArtistSearchResult-artist-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* IMPORT */
@@ -786,53 +201,18 @@ 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;
-    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-color: rgba(255, 255, 255, 0.08);
-}
-
-/*Title*/
-
-[class*="PageJumpBarItem-jumpBarItem-"]:hover {
-    color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
-}
-
-/*Posters*/
-
-
-/* MASS EDITOR */
-
-/* FOOTER */
-[class*="PageContentFooter-contentFooter-"] {
-    border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25) !important;
     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;
@@ -885,274 +265,6 @@ a:hover {
     border-left-color: transparent !important;
 }
 
-[class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="CalendarDay-dayOfMonth-"] {
-    border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="CalendarDay-isToday-"],
-[class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .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-color: hsla(0, 0%, 100%, .08) !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-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-[class*="NamingOption-option-"] {
-    border: 1px solid transparent;
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
-}
-
-/* PROFILES */
-[class*="Card-card-"],
-[class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
-    box-shadow: 0 0 10px 1px #000000;
-    color: var(--text);
-}
-
-
-[class*="-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-color: rgba(0, 0, 0, .25);
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
-}
-
-[class*="KeyValueListInputItem-keyInput-"],
-[class*="KeyValueListInputItem-valueInput-"] {
-    border: none;
-    background: transparent;
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
-    border: 1px solid transparent;
-    background: rgba(0, 0, 0, .25);
-}
-
-[class*="QualityDefinitions-sizeLimitHelpText-"] {
-    color: var(--text);
-}
-
-/* PROFILES */
-[class*="Indexers-center-"] {
-    background-color: transparent;
-    border: none;
-}
-
-[class*="Card-card-"],
-[class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .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-color: rgba(0, 0, 0, 0.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-color: rgba(0, 0, 0, 0.25);
-    color: var(--text);
-}
-
-.panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
-}
-
-.forgot-password {
-    color: var(--text) !important;
-}
-
-input[type=email],
-input[type=password] {
-    border: none;
-    background-color: rgba(255, 255, 255, 0.08);
-    color: 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-color: rgba(255, 255, 255, 0.25);
-}
-
-/* Custom filter */
-[class*="FilterBuilderRow-filterRow-"]:hover {
-    background-color: transparent;
-}
-
-[class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-/* -------------------------LIDARR STUFF------------------------------*/
-
 [class*="ArtistIndexHeader-sortName-"]:hover,
 [class*="ArtistIndexHeader-artistType-"]:hover,
 [class*="ArtistIndexHeader-trackCount-"]:hover,
@@ -1167,7 +279,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,25 +293,16 @@ 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);
 }
 
 [class*="AlbumStudioAlbum-missingWanted-"] {
     background-color: #f05050;
+    color: #fff;
 }
 
 [class*="AlbumStudioAlbum-allTracks-"] {
     background-color: #0b8750;
+    color: #fff;
 }
-
-/* 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/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 ce16cf06..8fab2422 100644
--- a/css/base/moviematch/moviematch-base.css
+++ b/css/base/moviematch/moviematch-base.css
@@ -10,6 +10,9 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 * {
     outline: none;
 
@@ -57,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)
 }
@@ -137,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 52912d82..11414476 100644
--- a/css/base/netdata/netdata-base.css
+++ b/css/base/netdata/netdata-base.css
@@ -10,6 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body,
 [class*="styled__SocialMediaContainer-"] {
@@ -81,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,
@@ -104,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,
@@ -117,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));
 }
@@ -130,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 {
@@ -142,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 {
@@ -199,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 {
@@ -249,7 +251,7 @@ a:hover,
 }
 
 .panel {
-    background: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
 }
 
 .panel-default>.panel-heading {
@@ -261,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 {
@@ -315,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-"]) {
@@ -402,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 93c212c6..c983419f 100644
--- a/css/base/nzbget/nzbget-base.css
+++ b/css/base/nzbget/nzbget-base.css
@@ -10,6 +10,9 @@
 /*		   		        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;
@@ -24,7 +27,7 @@ body {
 
 /* scroller */
 ::-webkit-scrollbar-corner {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 ::-webkit-scrollbar {
@@ -37,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 {
@@ -99,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,
@@ -108,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,
@@ -156,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 {
@@ -170,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 {
@@ -183,7 +186,7 @@ tr.checked:nth-child(odd) .progress {
 
 .bar-text-left,
 .bar-text-right {
-    var(--text-hover);
+    color: var(--text-hover);
 }
 
 /* NAVBAR */
@@ -209,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;
 }
 
@@ -239,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;
 
 
 }
@@ -248,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 {
@@ -285,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 {
@@ -381,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);
 }
 
@@ -389,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);
 }
 
@@ -401,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);
 }
 
@@ -448,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 {
@@ -470,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;
 }
@@ -478,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)
 }
@@ -519,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;
@@ -564,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 {
@@ -596,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;
 }
 
@@ -623,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;
@@ -638,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 82b4959a..2dc21f09 100644
--- a/css/base/nzbhydra2/nzbhydra2-base.css
+++ b/css/base/nzbhydra2/nzbhydra2-base.css
@@ -10,7 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
-@import url(/css/defaults/placeholders.css);
+@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 368f78f8..2a3be240 100644
--- a/css/base/ombi/ombi-base.css
+++ b/css/base/ombi/ombi-base.css
@@ -10,6 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none !important;
@@ -38,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;
 }
 
@@ -82,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 */
@@ -103,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));
@@ -124,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;
     }
 }
 
@@ -142,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;
 }
@@ -162,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;
@@ -228,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);
@@ -237,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{
@@ -272,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;
     }
 }
 
@@ -338,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;
@@ -377,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;
@@ -438,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;
 }
@@ -478,14 +480,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 {
@@ -642,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 */
@@ -732,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 052b2028..40449ba2 100644
--- a/css/base/organizr/organizr-base.css
+++ b/css/base/organizr/organizr-base.css
@@ -1,4 +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*/
@@ -257,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,
@@ -278,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*/
@@ -288,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 {
@@ -319,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;
 }
 
@@ -380,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,
@@ -400,42 +402,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 {
@@ -466,7 +432,7 @@ input:focus:-ms-input-placeholder {
     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;
 }
 
@@ -478,7 +444,7 @@ input:focus:-ms-input-placeholder {
     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;
 }
 
@@ -513,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 {
@@ -529,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),
@@ -561,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,
@@ -578,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 {
@@ -644,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;
     }
@@ -686,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;
 }
 
@@ -717,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;
@@ -728,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;
@@ -764,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;
 }
 
@@ -773,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;
 }
 
@@ -825,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);
     }
@@ -848,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);
     }
@@ -859,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;
     }
 }
 
@@ -1014,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);
 }
 
@@ -1097,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);
 }
@@ -1191,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;
 }
 
@@ -1226,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 {
@@ -1448,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;
@@ -1482,7 +1448,7 @@ a:hover,
 }
 
 #homepageOrderhealthchecks .card-body {
-    background: rgba(255, 255, 255, 0.2);
+    background: var(--transparency-light-20);
 }
 
 .card,
@@ -1501,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 {
@@ -1528,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 {
@@ -1554,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 {
@@ -1574,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,
@@ -1632,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);
 }
 
@@ -1749,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*/
@@ -1782,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%);
 
 }
@@ -2306,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,
@@ -2452,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);
 }
 
@@ -2540,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 eebd42bc..bcabaaa9 100644
--- a/css/base/overseerr/overseerr-base.css
+++ b/css/base/overseerr/overseerr-base.css
@@ -1,3 +1,6 @@
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 /* TEXT */
 [class*="text-gray-"]:not(button:disabled):not(button) {
     color: var(--text);
@@ -123,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);
 }
 
@@ -155,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;
 }
 
@@ -165,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)
 }
 
@@ -216,7 +219,7 @@ body {
 }
 
 #search_field {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 
@@ -299,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 */
@@ -370,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);
@@ -422,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 {
@@ -430,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);
 }
 
@@ -482,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);
 }
 
@@ -514,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);
 }
 
 
@@ -527,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);
 }
 
 
@@ -535,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 c1f0acca..7fec4649 100644
--- a/css/base/petio/petio-base.css
+++ b/css/base/petio/petio-base.css
@@ -10,6 +10,9 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 * {
     outline: none;
 }
@@ -79,7 +82,7 @@ h6,
 
 /* MENU */
 .menu {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 @media (max-width: 1099.98px) {
@@ -99,7 +102,7 @@ h6,
 
 @media (min-width: 1100px) {
     .page .sidebar {
-        background: rgb(0 0 0 / 25%);
+        background: var(--transparency-dark-25);
     }
 }
 
@@ -203,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 {
@@ -222,7 +225,7 @@ p a:hover,
 }
 
 .filter--item {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .spinner svg {
@@ -255,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;
 }
@@ -404,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),
@@ -446,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)
 }
 
@@ -454,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 {
@@ -478,25 +481,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..773dddc8 100644
--- a/css/base/pihole/pihole-base.css
+++ b/css/base/pihole/pihole-base.css
@@ -10,7 +10,8 @@
   /*		   		        Made by @gilbN					 */
   /* 			      https://github.com/gilbN/theme.park			 */
 
-  @import url(/css/defaults/placeholders.css);
+  @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 df02c356..a2ec7766 100644
--- a/css/base/plex/plex-base.css
+++ b/css/base/plex/plex-base.css
@@ -10,6 +10,9 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 * {
   outline: none;
 }
@@ -139,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%);
 }
 
@@ -155,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-"] {
@@ -174,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);
   }
 }
 
@@ -202,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-"] {
@@ -240,6 +243,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;
@@ -506,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%);
@@ -520,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 {
@@ -537,6 +552,7 @@ circle {
 }
 
 /* BUTTONS */
+
 .btn-primary {
   border-color: var(--button-color);
   color: var(--button-text);
@@ -551,6 +567,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);
 }
@@ -589,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%);
@@ -690,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..cb2353ec 100644
--- a/css/base/prowlarr/prowlarr-base.css
+++ b/css/base/prowlarr/prowlarr-base.css
@@ -11,207 +11,9 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @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-color: rgba(0, 0, 0, 0.25) !important;
-}
-
-[class*="SelectInput-select-"]:active,
-[class*="SelectInput-select-"]:focus {
-    background: #1e1e1e !important;
-}
-
-[class*="AutoSuggestInput-suggestionsList-"],
-[class*="AutoSuggestInput-suggestionsContainerOpen-"],
-[class*="AutoSuggestInput-suggestionsContainer-"] {
-    background-color: #323232 !important;
-    color: white;
-    border: none !important;
-}
-
-[class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="CheckInput-primaryIsChecked-"] {
-    border-color: 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-color: rgba(0, 0, 0, .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);
 }
@@ -231,451 +33,7 @@ a:hover {
 }
 
 [class*="IndexerSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="IndexerSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-/* SIDE MENU */
-[class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="PageSidebar-sidebar-"] {
-    background-color: transparent;
-}
-
-[class*="PageSidebarItem-link-"] {
-    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-color: rgba(0, 0, 0, 0.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-color: rgba(255, 255, 255, 0.08);
-}
-
-[class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-[class*="MovieIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="MovieIndexOverview-link-"]:hover {
-    text-decoration: none;
-}
-
-[class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
-}
-
-[class*=".ProgressBar-purple-"] {
-    background-color: rgb(var(--accent-color));
-}
-
-/* MOVIE PAGE */
-[class*="MovieDetailsSeason-season-"],
-[class*="MovieDetailsSeason-collapseButtonContainer-"] {
-    border: none !important;
-    background-color: rgba(0, 0, 0, .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-color: rgba(0, 0, 0, .25) !important;
-}
-
-[class*="MovieFileEditorTable-container-"] {
-    border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, 0.25);
-}
-
-[class*="ExtraFileTable-container-"] {
-    border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .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: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
-}
-
-/* TOP MENU SERIES */
-[class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
-    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-color: rgba(255, 255, 255, 0.08);
-    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: hsla(0, 0%, 100%, .08) !important;
-    color: var(--text-hover);
-    text-decoration: none;
-}
-
-[class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-/* ALPHABET JUMP BAR */
-[class*="PageJumpBar-jumpBar-"] {
-    color: var(--text-hover);
-}
-
-/* MINI RIGHT SCROLL BAR */
-[class*="OverlayScroller-thumb-"],
-[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="OverlayScroller-thumb-"]:hover,
-[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.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-color: rgba(255, 255, 255, 0.20) !important;
-    color: var(--text-hover);
-}
-
-[class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-[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-color: rgba(255, 255, 255, 0.08);
-    color: var(--text-hover);
+    background: var(--transparency-dark-10);
 }
 
 [class*="IndexerSearchInput-container-"] [class*="Input-input-"] {
@@ -693,357 +51,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-color: rgba(255, 255, 255, 0.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-color: hsla(0, 0%, 100%, .08) !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-color: rgba(255, 255, 255, 0.08);
-}
-
-/* Drop down menu/button*/
-[class*="ImportMovieSelectMovie-button-"] {
-    border: none !important;
-    background-color: rgba(0, 0, 0, 0.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-color: rgba(255, 255, 255, 0.08);
-}
-
-[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-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="PageJumpBarItem-jumpBarItem-"]:hover {
-    color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
-}
-
-/*Posters*/
-[class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
-    color: var(--text-hover);
-}
-
-/* MASS EDITOR */
-/* FOOTER */
-[class*="PageContentFooter-contentFooter-"] {
-    border: none;
-    background-color: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="CalendarDay-dayOfMonth-"] {
-    border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="CalendarDay-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="CalendarDay-day-"],
-[class*="CalendarDays-days-"] {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 0 14.28%;
-    flex: 1 0 14.28%;
-    overflow: hidden;
-    min-height: 70px;
-    border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    border-left: 1px solid hsla(0, 0%, 100%, .08);
-    border-right: 1px solid hsla(0, 0%, 100%, .08);
-    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-color: hsla(0, 0%, 100%, .08) !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-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-[class*="NamingOption-option-"] {
-    border: 1px solid transparent;
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
-}
-
-/* PROFILES */
-[class*="Card-card-"],
-[class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
-    box-shadow: 0 0 10px 1px #000000;
-    color: var(--text);
-}
-
-
-[class*="-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-color: rgba(0, 0, 0, .25);
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.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: rgba(0, 0, 0, .25);
-}
-
 /* Indexers */
-[class*="Indexers-center-"],
 [class*="IndexerProxies-center-"] {
     background-color: transparent;
     border: none;
@@ -1054,110 +62,10 @@ 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-color: rgba(0, 0, 0, 0.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-color: rgba(0, 0, 0, 0.25);
-    color: var(--text);
-}
-
-.panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
-}
-
-.forgot-password {
-    color: var(--text) !important;
-}
-
-input[type=email],
-input[type=password] {
-    border: none;
-    background-color: rgba(255, 255, 255, 0.08);
-    color: 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-color: rgba(255, 255, 255, 0.25);
-}
-
-/* Custom filter */
-[class*="FilterBuilderRow-filterRow-"]:hover {
-    background-color: transparent;
-}
-
-[class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="SelectMovieModalContent-path-"] {
-    color: var(--text);
-}
-
 /* ChartJS */
 [class*="Stats-fullWidthChart-"],
 [class*="Stats-halfWidthChart-"] {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 canvas {
@@ -1170,20 +78,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,11 +103,6 @@ canvas {
 }
 
 [class*="HistoryRowParameter-value-"] {
-    background-color: rgb(255 255 255 / 50%);
+    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/qbittorrent/qbittorrent-base.css b/css/base/qbittorrent/qbittorrent-base.css
index 56205d07..367a451c 100644
--- a/css/base/qbittorrent/qbittorrent-base.css
+++ b/css/base/qbittorrent/qbittorrent-base.css
@@ -11,6 +11,8 @@
 /*			      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");
 
 ::-webkit-scrollbar {
   width: 10px;
@@ -18,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,
@@ -59,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;
@@ -74,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;
@@ -83,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;
@@ -91,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;
@@ -161,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);
@@ -209,7 +211,7 @@ label {
 }
 
 #desktopNavbar {
-  background: rgba(0, 0, 0, 0.25);
+  background: var(--transparency-dark-25);
   height: 20px;
   border-bottom: 1px solid transparent;
 }
@@ -220,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);
 }
 
@@ -269,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);
 }
@@ -283,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);
 }
 
@@ -341,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;
@@ -352,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;
@@ -368,7 +370,7 @@ li.divider {
 }
 
 #main input[type="password"i] {
-  background-color: rgba(0, 0, 0, .45);
+  background: var(--transparency-dark-45);
 }
 
 #loginform #login {
@@ -457,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 */
@@ -472,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;
 }
 
@@ -500,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 {
@@ -513,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;
 }
 
@@ -549,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;
 }
 
@@ -577,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;
 }
@@ -617,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..ca316ca4 100644
--- a/css/base/radarr/radarr-base.css
+++ b/css/base/radarr/radarr-base.css
@@ -11,207 +11,19 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @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-color: rgba(0, 0, 0, 0.25) !important;
-}
-
-[class*="SelectInput-select-"]:active,
-[class*="SelectInput-select-"]:focus {
-    background: #1e1e1e !important;
-}
-
-[class*="AutoSuggestInput-suggestionsList-"],
-[class*="AutoSuggestInput-suggestionsContainerOpen-"],
-[class*="AutoSuggestInput-suggestionsContainer-"] {
-    background-color: #323232 !important;
-    color: white;
-    border: none !important;
-}
-
-[class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="CheckInput-primaryIsChecked-"] {
-    border-color: 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-color: rgba(0, 0, 0, .35);
-    color: var(--text);
-}
-
-/* SEARCH DROPDOWN HEADER */
-
-[class*="PageHeader-donate-"] {
-    color: #c4273c !important;
-}
-
-/* RADARR SPECIFIC */
 [class*="MovieSearchInput-sectionTitle-"] {
     color: var(--text-hover);
 }
@@ -231,81 +43,20 @@ a:hover {
 }
 
 [class*="MovieSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-/* SIDE MENU */
-[class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="PageSidebar-sidebar-"] {
-    background-color: transparent;
-}
-
-[class*="PageSidebarItem-link-"] {
-    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-color: rgba(0, 0, 0, 0.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);
+    background: var(--transparency-dark-10);
 }
 
 /* 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;
@@ -316,34 +67,26 @@ 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 {
     text-decoration: none;
 }
 
-[class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
-}
-
-[class*=".ProgressBar-purple-"] {
-    background-color: rgb(var(--accent-color));
-}
-
 /* MOVIE PAGE */
 [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-"],
@@ -355,59 +98,18 @@ 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);
 }
 
 [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);
-}
-
-[class*="ExtraFileTable-container-"] {
-    border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
-[class*="Popover-title-"],
-[class*="SeasonInfo-title-"],
-[class*="Popover-body-"],
-[class*="Tooltip-body-"],
-[class*="Tooltip-tooltipContainer-"],
-[class*="Tooltip-tooltip-"][class*="Tooltip-default-"] {
-    background: #1f1f1f;
-    color: #eee;
+    background: var(--transparency-dark-25);
 }
 
 /* @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter:blur(1em)) {
@@ -425,60 +127,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));
 }
@@ -487,206 +135,20 @@ 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: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
-}
-
-/* TOP MENU SERIES */
-[class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
-    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-color: rgba(255, 255, 255, 0.08);
+    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: hsla(0, 0%, 100%, .08) !important;
-    color: var(--text-hover);
-    text-decoration: none;
-}
-
-[class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-/* ALPHABET JUMP BAR */
-[class*="PageJumpBar-jumpBar-"] {
-    color: var(--text-hover);
-}
-
-/* MINI RIGHT SCROLL BAR */
-[class*="OverlayScroller-thumb-"],
-[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="OverlayScroller-thumb-"]:hover,
-[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.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-color: rgba(255, 255, 255, 0.20) !important;
-    color: var(--text-hover);
-}
-
-[class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-[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-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -709,32 +171,7 @@ a:hover {
     color: var(--text-hover) !important;
 }
 
-[class*="Input-input-"]:focus {
-    outline: 0;
-    border-color: var(--text-hover);
-    box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-[class*="TagInput-input-"][class*="TagInput-isFocused-"] {
-    outline: 0;
-    border-color: #fff;
-    box-shadow: none;
-}
-
-/* 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;
@@ -742,38 +179,25 @@ 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-"] {
     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-color: rgba(255, 255, 255, 0.08);
-}
-
 /* 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 +215,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 +234,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,33 +248,16 @@ a:hover {
 }
 
 [class*="AddListMovieOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="PageJumpBarItem-jumpBarItem-"]:hover {
-    color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10) !important;
 }
 
 /*Posters*/
 [class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
-    color: var(--text-hover);
-}
-
-/* MASS EDITOR */
-/* FOOTER */
-[class*="PageContentFooter-contentFooter-"] {
-    border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-light-10);
     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;
@@ -927,277 +334,16 @@ a:hover {
     border-left-color: transparent !important;
 }
 
-[class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="CalendarDay-dayOfMonth-"] {
-    border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="CalendarDay-isToday-"],
-[class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .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-color: hsla(0, 0%, 100%, .08) !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-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-[class*="NamingOption-option-"] {
-    border: 1px solid transparent;
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
-}
-
-/* PROFILES */
-[class*="Card-card-"],
-[class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
-    box-shadow: 0 0 10px 1px #000000;
-    color: var(--text);
-}
-
-
-[class*="-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-color: rgba(0, 0, 0, .25);
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
-}
-
-[class*="KeyValueListInputItem-keyInput-"],
-[class*="KeyValueListInputItem-valueInput-"] {
-    border: none;
-    background: transparent;
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
-    border: 1px solid transparent;
-    background: rgba(0, 0, 0, .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-color: rgba(0, 0, 0, 0.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-color: rgba(0, 0, 0, 0.25);
-    color: var(--text);
-}
-
-.panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
-}
-
-.forgot-password {
-    color: var(--text) !important;
-}
-
-input[type=email],
-input[type=password] {
-    border: none;
-    background-color: rgba(255, 255, 255, 0.08);
-    color: 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-color: rgba(255, 255, 255, 0.25);
-}
-
 /* Custom filter */
-[class*="FilterBuilderRow-filterRow-"]:hover {
-    background-color: transparent;
-}
-
-[class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
 [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/readarr/readarr-base.css b/css/base/readarr/readarr-base.css
index 64d2c38a..4d165ec9 100644
--- a/css/base/readarr/readarr-base.css
+++ b/css/base/readarr/readarr-base.css
@@ -11,6 +11,8 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @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;
@@ -20,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-color: rgba(0, 0, 0, 0.25) !important;
-}
-
-[class*="SelectInput-select-"]:active,
-[class*="SelectInput-select-"]:focus {
-    background: #1e1e1e !important;
-}
-
-[class*="AutoSuggestInput-suggestionsList-"],
-[class*="AutoSuggestInput-suggestionsContainerOpen-"],
-[class*="AutoSuggestInput-suggestionsContainer-"] {
-    background-color: #323232 !important;
-    color: white;
-    border: none !important;
-}
-
-[class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="CheckInput-primaryIsChecked-"] {
-    border-color: 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-color: rgba(0, 0, 0, .35);
-    color: var(--text);
-}
-
-/* SEARCH DROPDOWN HEADER */
-
-[class*="PageHeader-donate-"] {
-    color: #c4273c !important;
-}
-
-/* LIDARR SPECIFIC */
 [class*="AuthorSearchInput-sectionTitle-"] {
     color: var(--text-hover);
 }
@@ -231,148 +41,14 @@ a:hover {
 }
 
 [class*="AuthorSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08)
-}
-
-[class*"=AuthorSearchInput-authorContainer-"]::-webkit-scrollbar-thumb,
-[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.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;
-}
-
-[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;
-}
-
-/* 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-color: rgba(255, 255, 255, 0.20) !important;
-    color: var(--text-hover);
-}
-
-[class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-[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-color: rgba(0, 0, 0, .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-color: rgba(0, 0, 0, 0.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);
+    background: var(--transparency-dark-10)
 }
 
 /* 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 {
@@ -384,157 +60,56 @@ a:hover {
 }
 
 [class*="AuthorIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="AuthorIndexOverview-link-"]:hover {
     text-decoration: none;
 }
 
-[class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
-}
-
-[class*=".ProgressBar-purple-"] {
-    background-color: rgb(var(--accent-color));
-}
-
-
-/*ARTIST PAGE*/
+/*AUTHOR PAGE*/
 [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-"],
-[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-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);
-}
-
-[class*="AlbumDetails-selectedTab-"] {
+[class*="AuthorDetails-selectedTab-"] {
     border-bottom: 4px solid rgb(var(--accent-color));
 }
 
-[class*="AlbumDetailsMedium-collapseButtonContainer-"] {
+[class*="AuthorDetailsMedium-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);
 }
 
-[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,
@@ -544,152 +119,19 @@ 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: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
-}
-
-/* TOP MENU SERIES */
-[class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
-    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-"],
 [class*="BookIndexPoster-title-"],
 [class*="BookIndexPosterInfo-info-"] {
-    background-color: rgba(255, 255, 255, 0.08);
-    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: hsla(0, 0%, 100%, .08) !important;
-    color: var(--text-hover);
-    text-decoration: none;
-}
-
-[class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-/* ALPHABET JUMP BAR */
-[class*="PageJumpBar-jumpBar-"] {
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 /* SEARCH BAR */
-[class*="Input-input-"],
-[class*="AddNewItem-searchIconContainer-"],
-[class*="CheckInput-isIndeterminate-"] {
+[class*="AddNewItem-searchIconContainer-"]{
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -708,56 +150,25 @@ a:hover {
     font-size: 12px;
 }
 
-[class*="Input-input-"]:focus {
-    outline: 0;
-    border-color: var(--text-hover);
-    box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.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 {
-    background-color: hsla(0, 0%, 100%, .08);
+[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-"] {
@@ -778,7 +189,7 @@ a:hover {
 }
 
 [class*="ImportAuthorSearchResult-author-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* IMPORT */
@@ -787,55 +198,15 @@ a:hover {
     color: var(--text-hover);
 }
 
-[class*="ExpandingFileDetails-fileDetails-"] {
-    border: 1px solid rgb(255 255 255 / .1);
-    background-color: rgb(255 255 255 / 8%);
-}
-
 /* IMPORT NEW ARTIST */
 /* Drop down menu/button*/
 [class*="ImportAuthorSelectAuthor-button-"] {
     border: none;
-    background-color: rgba(0, 0, 0, 0.25) !important;
-    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-color: rgba(255, 255, 255, 0.08);
-}
-
-/*Title*/
-
-[class*="PageJumpBarItem-jumpBarItem-"]:hover {
-    color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
-}
-
-/*Posters*/
-
-
-/* MASS EDITOR */
-
-/* FOOTER */
-[class*="PageContentFooter-contentFooter-"] {
-    border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25) !important;
     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;
@@ -888,300 +259,22 @@ a:hover {
     border-left-color: transparent !important;
 }
 
-[class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="CalendarDay-dayOfMonth-"] {
-    border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="CalendarDay-isToday-"],
-[class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .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-color: hsla(0, 0%, 100%, .08) !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-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-[class*="NamingOption-option-"] {
-    border: 1px solid transparent;
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
-}
-
-/* PROFILES */
-[class*="Card-card-"],
-[class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
-    box-shadow: 0 0 10px 1px #000000;
-    color: var(--text);
-}
-
-
-[class*="-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-color: rgba(0, 0, 0, .25);
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
-}
-
-[class*="KeyValueListInputItem-keyInput-"],
-[class*="KeyValueListInputItem-valueInput-"] {
-    border: none;
-    background: transparent;
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
-    border: 1px solid transparent;
-    background: rgba(0, 0, 0, .25);
-}
-
-[class*="QualityDefinitions-sizeLimitHelpText-"] {
-    color: var(--text);
-}
-
-/* PROFILES */
-[class*="Indexers-center-"] {
-    background-color: transparent;
-    border: none;
-}
-
-[class*="Card-card-"],
-[class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .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-color: rgba(0, 0, 0, 0.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-color: rgba(0, 0, 0, 0.25);
-    color: var(--text);
-}
-
-.panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
-}
-
-.forgot-password {
-    color: var(--text) !important;
-}
-
-input[type=email],
-input[type=password] {
-    border: none;
-    background-color: rgba(255, 255, 255, 0.08);
-    color: 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-color: rgba(255, 255, 255, 0.25);
-}
-
-/* Custom filter */
-[class*="FilterBuilderRow-filterRow-"]:hover {
-    background-color: transparent;
-}
-
-[class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-/* Readarr */
-
 /* Library */
-
 [class*="AuthorIndexPoster-link-"],
 [class*="AuthorIndexPoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* Add New*/
@@ -1192,7 +285,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 +296,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 +324,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 +337,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-"] {
@@ -1287,9 +380,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/requestrr/requestrr-base.css b/css/base/requestrr/requestrr-base.css
index ebaf9f48..b247993e 100644
--- a/css/base/requestrr/requestrr-base.css
+++ b/css/base/requestrr/requestrr-base.css
@@ -10,7 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /* 			      https://github.com/gilbN/theme.park			 */
 
-@import url(/css/defaults/placeholders.css);
+@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 d5a366d1..0ab61d9e 100644
--- a/css/base/resilio-sync/resilio-sync-base.css
+++ b/css/base/resilio-sync/resilio-sync-base.css
@@ -11,7 +11,8 @@
 /* 			      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");
+@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 5949da0e..031be0a3 100644
--- a/css/base/rutorrent/rutorrent-base.css
+++ b/css/base/rutorrent/rutorrent-base.css
@@ -12,6 +12,8 @@
 /* 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");
+@import url("/css/defaults/transparent.css");
 
 @font-face {
     font-family: 'Roboto' !important
@@ -48,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);
@@ -66,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;
@@ -153,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);
@@ -167,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 {
@@ -181,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;
 }
@@ -206,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 {
@@ -232,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;
@@ -417,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
 }
@@ -536,7 +538,7 @@ div.tab {
 }
 
 div#lcont {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     font-family: 'Roboto'
 }
 
@@ -548,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 {
@@ -564,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'
 }
 
@@ -579,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 {
@@ -613,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;
@@ -625,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;
@@ -724,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;
@@ -734,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;
@@ -744,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;
 }
@@ -760,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;
 }
@@ -771,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
 }
@@ -791,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
 }
 
@@ -817,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;
@@ -956,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
 }
 
@@ -979,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;
 }
@@ -1023,7 +1025,7 @@ Input.TextboxLarge {
 }
 
 div.tab {
-    background-color: rgba(0, 0, 0, 0.25)
+    background: var(--transparency-dark-25)
 }
 
 div#t div#ind {
@@ -1062,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;
 }
 
@@ -1074,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;
 }
 
@@ -1085,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
 }
@@ -1231,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;
@@ -1295,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) {
@@ -1477,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;
@@ -1493,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;
@@ -1745,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;
 }
@@ -1759,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);
 }
 
@@ -1781,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 6424d4a3..364203b9 100644
--- a/css/base/sabnzbd/sabnzbd-base.css
+++ b/css/base/sabnzbd/sabnzbd-base.css
@@ -9,7 +9,8 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
-@import url(/css/defaults/placeholders.css);
+@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,31 +808,18 @@ 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;
 }
 
-.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);
@@ -847,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;
@@ -895,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;
@@ -992,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*/
@@ -1045,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;
@@ -1057,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;
 }
 
@@ -1093,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 {
@@ -1115,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 {
@@ -1123,7 +1111,7 @@ button.list-group-item:focus {
 }
 
 .fade.in {
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--transparency-dark-60)
 }
 
 .fade {
@@ -1156,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..0a2deaf2 100644
--- a/css/base/sonarr/sonarr-base.css
+++ b/css/base/sonarr/sonarr-base.css
@@ -11,6 +11,8 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @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;
@@ -22,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-"],
@@ -171,61 +39,9 @@ a:hover {
     color: var(--text-hover);
 }
 
-/* INPUT */
-[class*="TagInput-internalInput-"] {
-    background-color: transparent;
-    color: var(--text-hover);
-}
-
-[class*="SelectInput-select-"] {
-    background-color: rgba(0, 0, 0, 0.25) !important;
-}
-
-[class*="SelectInput-select-"]:active,
-[class*="SelectInput-select-"]:focus {
-    background: #1e1e1e !important;
-}
-
-[class*="AutoSuggestInput-suggestionsList-"],
-[class*="AutoSuggestInput-suggestionsContainerOpen-"],
-[class*="AutoSuggestInput-suggestionsContainer-"] {
-    background-color: #323232 !important;
-    color: white;
-    border: none !important;
-}
-
-[class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="CheckInput-primaryIsChecked-"] {
-    border-color: 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-color: rgba(0, 0, 0, .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-color: rgb(0 0 0 / 40%);
+    background: var(--transparency-dark-40);
 }
 
 [class*="SeriesSearchInput-sectionTitle-"] {
@@ -247,77 +63,15 @@ a:hover {
 }
 
 [class*="SeriesSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="SeriesSearchInput-seriesContainer-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25) !important;
-}
-
-[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-/* SIDE MENU */
-[class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="PageSidebar-sidebar-"] {
-    background-color: transparent;
-}
-
-[class*="PageSidebarItem-link-"] {
-    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-color: rgba(0, 0, 0, 0.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);
+    background: var(--transparency-dark-10);
 }
 
 /* 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;
@@ -328,27 +82,18 @@ a:hover {
 }
 
 [class*="SeriesIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="SeriesIndexOverview-link-"]:hover {
     text-decoration: none;
 }
 
-[class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
-}
-
-
-[class*=".ProgressBar-purple-"] {
-    background-color: rgb(var(--accent-color));
-}
-
 /* SHOW PAGE */
 [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-"] {
@@ -373,97 +118,19 @@ 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);
 }
 
 [class*="SeriesDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
-}
-
-[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
-[class*="Popover-title-"],
-[class*="SeasonInfo-title-"],
-[class*="Popover-body-"],
-[class*="Tooltip-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;
+    background: var(--transparency-dark-25) !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;
@@ -475,221 +142,18 @@ 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: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
-}
-
-/* TOP MENU SERIES */
-[class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
-    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-"],
 [class*="SeriesIndexPosterInfo-info-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     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: hsla(0, 0%, 100%, .08) !important;
-    color: var(--text-hover);
-    text-decoration: none;
-}
-
-[class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-/* ALPHABET JUMP BAR */
-[class*="PageJumpBar-jumpBar-"] {
-    color: var(--text-hover);
-}
-
-/* MINI RIGHT SCROLL BAR */
-[class*="OverlayScroller-thumb-"],
-[class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="OverlayScroller-thumb-"]:hover,
-[class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25) !important;
-}
-
-/* ADD NEW */
-[class*="EnhancedSelectInput-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-color: rgba(255, 255, 255, 0.20) !important;
-    color: var(--text-hover);
-}
-
-[class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-[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-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -708,70 +172,35 @@ a:hover {
     font-size: 12px;
 }
 
-[class*="Input-input-"]:focus {
-    outline: 0;
-    border-color: var(--text-hover);
-    box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.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;
 }
 
 [class*="AddNewSeriesSearchResult-underlay-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="AddNewSeriesSearchResult-year-"] {
     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-color: hsla(0, 0%, 100%, .08);
-}
-
 /* 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-"],
@@ -792,19 +221,11 @@ a:hover {
     color: var(--text-muted);
 }
 
-/* MASS EDITOR */
-/* FOOTER */
-[class*="PageContentFooter-contentFooter-"] {
-    border: none;
-    background-color: rgba(0, 0, 0, .25);
-    color: var(--text-hover);
-}
-
 /* SEASON PASS */
 
 [class*="SeasonPassSeason-season-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SeasonPassSeason-allEpisodes-"] {
@@ -882,49 +303,12 @@ a:hover {
     border-left-color: transparent !important;
 }
 
-[class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="CalendarDay-dayOfMonth-"] {
-    border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="CalendarDay-isToday-"],
-[class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .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;
 }
@@ -937,186 +321,12 @@ a:hover {
     color: #eee;
 }
 
-/* calendar agenda */
-[class*="AgendaEvent-event-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
 /*QUEUE PAGE */
 /* Manual Import*/
 [class*="SelectEpisodeModalContent-path-"] {
     color: var(--text);
 }
 
-/* SETTINGS */
-[class*="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-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
-}
-
-/* PROFILES */
-[class*="Card-card-"],
-[class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
-    box-shadow: 0 0 10px 1px #000000;
-    color: var(--text);
-}
-
-[class*="-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-color: rgba(0, 0, 0, .25);
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.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-color: rgba(0, 0, 0, 0.25);
-    color: #FFC107;
-}
-
-/* Login Page */
-
-.panel-body {
-    background-color: rgba(0, 0, 0, 0.25);
-    color: var(--text);
-}
-
-.panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
-}
-
-.forgot-password {
-    color: var(--text) !important;
-}
-
-input[type=email],
-input[type=password] {
-    border: none;
-    background-color: rgba(255, 255, 255, 0.08);
-    color: 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-color: rgba(255, 255, 255, 0.25);
-}
-
-/* Custom filter */
-[class*="FilterBuilderRow-filterRow-"]:hover {
-    background-color: transparent;
-}
-
-[class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
 /* Scene information */
 [class*="ReleaseSceneIndicator-levelNone-"] {
     border-color: var(--text);
@@ -1127,9 +337,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/base/synclounge/synclounge-base.css b/css/base/synclounge/synclounge-base.css
index c57ecac2..7519645c 100644
--- a/css/base/synclounge/synclounge-base.css
+++ b/css/base/synclounge/synclounge-base.css
@@ -10,7 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /* 			      https://github.com/gilbN/theme.park			 */
 
-@import url(/css/defaults/placeholders.css);
+@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 436f2b3f..9c8b78bd 100644
--- a/css/base/tautulli/tautulli-base.css
+++ b/css/base/tautulli/tautulli-base.css
@@ -9,6 +9,10 @@
 
 /*		   		        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;
@@ -128,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 {
@@ -137,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));
 }
 
@@ -166,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,
@@ -202,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 {
@@ -272,7 +276,7 @@ select,
 }
 
 .btn-danger.btn-edit {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 .btn-form {
@@ -300,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) {
@@ -323,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,
@@ -347,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 {
@@ -359,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 */
@@ -388,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;
 }
 
@@ -415,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 {
@@ -432,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,
@@ -446,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 */
@@ -466,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;
 }
 
@@ -488,7 +492,7 @@ span>a.active,
 
 /* Graphs */
 .graphs-instance {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 /* Modal */
@@ -555,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,
@@ -571,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);
 }
 
@@ -581,7 +585,7 @@ span>a.active,
 }
 
 .accordion {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .accordion li .link {
@@ -591,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;
 }
@@ -613,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 f413bdc3..732d51ac 100644
--- a/css/base/transmission/transmission-base.css
+++ b/css/base/transmission/transmission-base.css
@@ -10,6 +10,9 @@
 /*		   		        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");
+@import url("/css/defaults/transparent.css");
+
 
 * {
     outline: none !important;
@@ -65,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;
 }
 
@@ -77,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;
 }
 
@@ -99,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;
 }
@@ -243,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 {
@@ -283,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 {
@@ -291,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 */
@@ -322,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,
@@ -419,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);
 }
@@ -442,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);
 }
@@ -480,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,
@@ -493,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 {
@@ -512,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,
@@ -533,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 {
@@ -552,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,
@@ -573,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 {
@@ -592,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,
@@ -613,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 {
@@ -632,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,
@@ -651,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 */
@@ -781,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;
 }
@@ -971,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 faef37a5..a9e5cdad 100644
--- a/css/base/unraid/unraid-base.css
+++ b/css/base/unraid/unraid-base.css
@@ -10,6 +10,9 @@
 /*		   		        Made by @gilbN					 */
 /* 			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 * {
     outline: none;
 }
@@ -93,7 +96,7 @@ pre {
 }
 
 #header .block {
-    background-color: rgb(0 0 0 / 20%);
+    background: var(--transparency-dark-20);
     border-radius: 0px 0px 0px 25px;
 }
 
@@ -120,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);
 }
 
@@ -151,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 {
@@ -175,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,
@@ -191,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 {
@@ -284,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 */
@@ -354,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;
 }
 
@@ -380,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;
 }
 
@@ -454,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,
@@ -591,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 */
@@ -635,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;
 }
 
@@ -643,24 +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;
-}
-
-::placeholder {
-    color: var(--text-muted) !important;
-}
-
-:-ms-input-placeholder {
-    color: var(--text-muted) !important;
-}
-
-::-webkit-input-placeholder {
-    color: var(--text-muted) !important;
+    background-color: var(--transparency-dark-15) !important;
 }
 
 /* MODAL */
@@ -695,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 */
@@ -744,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 c5a31673..54bcdb9d 100644
--- a/css/base/vuetorrent/vuetorrent-base.css
+++ b/css/base/vuetorrent/vuetorrent-base.css
@@ -12,6 +12,9 @@
 
 /* MOBILE */
 
+@import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
+
 @media (max-width: 720px) {
 
     .modal__body,
@@ -47,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
 }
 
@@ -100,7 +103,7 @@ p,
 
 /* CARDS */
 [class*="theme--"].v-card {
-    background-color: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     color: var(--text);
 }
 
@@ -110,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 {
@@ -130,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) {
@@ -162,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);
     }
 }
 
@@ -197,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,
@@ -404,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,
@@ -433,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 98eb4e8e..b7eaa31b 100644
--- a/css/base/webtools/webtools-base.css
+++ b/css/base/webtools/webtools-base.css
@@ -10,6 +10,9 @@
 /*		   		        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;
@@ -70,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%);
 }
 
@@ -80,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);
 }
 
@@ -134,7 +137,7 @@ content-loading .contentLoading {
 
 /* PAGES */
 .sub .settings {
-    background: rgb(255 255 255 / 25%);
+    background: var(--transparency-light-25);
 }
 
 label {
@@ -148,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;
 }
 
@@ -181,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);
 }
 
@@ -194,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);
 
 }
 
@@ -227,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 {
@@ -241,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);
 }
 
@@ -346,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;
@@ -357,36 +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%);
-}
-
-/* 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;
+    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..0353e116 100644
--- a/css/base/whisparr/whisparr-base.css
+++ b/css/base/whisparr/whisparr-base.css
@@ -11,1193 +11,5 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.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-color: rgba(0, 0, 0, 0.25) !important;
-}
-
-[class*="SelectInput-select-"]:active,
-[class*="SelectInput-select-"]:focus {
-    background: #1e1e1e !important;
-}
-
-[class*="AutoSuggestInput-suggestionsList-"],
-[class*="AutoSuggestInput-suggestionsContainerOpen-"],
-[class*="AutoSuggestInput-suggestionsContainer-"] {
-    background-color: #323232 !important;
-    color: white;
-    border: none !important;
-}
-
-[class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="CheckInput-primaryIsChecked-"] {
-    border-color: 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-color: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-}
-
-[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-/* SIDE MENU */
-[class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="PageSidebar-sidebar-"] {
-    background-color: transparent;
-}
-
-[class*="PageSidebarItem-link-"] {
-    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-color: rgba(0, 0, 0, 0.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-color: rgba(255, 255, 255, 0.08);
-}
-
-[class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-[class*="MovieIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="MovieIndexOverview-link-"]:hover {
-    text-decoration: none;
-}
-
-[class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
-}
-
-[class*=".ProgressBar-purple-"] {
-    background-color: rgb(var(--accent-color));
-}
-
-/* MOVIE PAGE */
-[class*="MovieDetailsSeason-season-"],
-[class*="MovieDetailsSeason-collapseButtonContainer-"] {
-    border: none !important;
-    background-color: rgba(0, 0, 0, .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-color: rgba(0, 0, 0, .25) !important;
-}
-
-[class*="MovieFileEditorTable-container-"] {
-    border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, 0.25);
-}
-
-[class*="ExtraFileTable-container-"] {
-    border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
-[class*="Popover-title-"],
-[class*="SeasonInfo-title-"],
-[class*="Popover-body-"],
-[class*="Tooltip-body-"],
-[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: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
-}
-
-/* TOP MENU SERIES */
-[class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
-    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-color: rgba(255, 255, 255, 0.08);
-    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: hsla(0, 0%, 100%, .08) !important;
-    color: var(--text-hover);
-    text-decoration: none;
-}
-
-[class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-/* ALPHABET JUMP BAR */
-[class*="PageJumpBar-jumpBar-"] {
-    color: var(--text-hover);
-}
-
-/* MINI RIGHT SCROLL BAR */
-[class*="OverlayScroller-thumb-"],
-[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="OverlayScroller-thumb-"]:hover,
-[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.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-color: rgba(255, 255, 255, 0.20) !important;
-    color: var(--text-hover);
-}
-
-[class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-}
-
-[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-color: rgba(255, 255, 255, 0.08);
-    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-color: rgba(255, 255, 255, 0.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-color: hsla(0, 0%, 100%, .08) !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-color: rgba(255, 255, 255, 0.08);
-}
-
-/* Drop down menu/button*/
-[class*="ImportMovieSelectMovie-button-"] {
-    border: none !important;
-    background-color: rgba(0, 0, 0, 0.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-color: rgba(255, 255, 255, 0.08);
-}
-
-[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-color: rgba(255, 255, 255, 0.08);
-    color: var(--text-hover);
-}
-
-/*Title*/
-[class*="AddListMovieOverview-link-"] {
-    color: var(--text);
-}
-
-[class*="AddListMovieOverview-link-"]:hover {
-    color: var(--text-hover);
-}
-
-[class*="AddListMovieOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
-}
-
-[class*="PageJumpBarItem-jumpBarItem-"]:hover {
-    color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
-}
-
-/*Posters*/
-[class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
-    color: var(--text-hover);
-}
-
-/* MASS EDITOR */
-/* FOOTER */
-[class*="PageContentFooter-contentFooter-"] {
-    border: none;
-    background-color: rgba(0, 0, 0, .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-color: hsla(0, 0%, 100%, .08);
-    color: var(--text-hover);
-}
-
-[class*="CalendarDay-dayOfMonth-"] {
-    border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
-}
-
-[class*="CalendarDay-isToday-"],
-[class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .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-color: hsla(0, 0%, 100%, .08) !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-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
-}
-
-[class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
-}
-
-[class*="NamingOption-option-"] {
-    border: 1px solid transparent;
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
-}
-
-[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
-}
-
-/* PROFILES */
-[class*="Card-card-"],
-[class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
-    box-shadow: 0 0 10px 1px #000000;
-    color: var(--text);
-}
-
-
-[class*="-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-color: rgba(0, 0, 0, .25);
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
-}
-
-[class*="KeyValueListInputItem-keyInput-"],
-[class*="KeyValueListInputItem-valueInput-"] {
-    border: none;
-    background: transparent;
-    color: var(--text-hover);
-}
-
-[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
-    border: 1px solid transparent;
-    background: rgba(0, 0, 0, .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-color: rgba(0, 0, 0, 0.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-color: rgba(0, 0, 0, 0.25);
-    color: var(--text);
-}
-
-.panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
-}
-
-.forgot-password {
-    color: var(--text) !important;
-}
-
-input[type=email],
-input[type=password] {
-    border: none;
-    background-color: rgba(255, 255, 255, 0.08);
-    color: 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-color: rgba(255, 255, 255, 0.25);
-}
-
-/* Custom filter */
-[class*="FilterBuilderRow-filterRow-"]:hover {
-    background-color: transparent;
-}
-
-[class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
-}
-
-[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/defaults/transparent.css");
+@import url("/css/base/radarr/radarr-base.css");
\ No newline at end of file
diff --git a/css/base/xbackbone/xbackbone-base.css b/css/base/xbackbone/xbackbone-base.css
index b4cca0d5..8619cf70 100644
--- a/css/base/xbackbone/xbackbone-base.css
+++ b/css/base/xbackbone/xbackbone-base.css
@@ -10,6 +10,9 @@
 /*		   		        Made by @gilbN					 */
 /* 			      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;
     background-repeat: repeat, no-repeat;
@@ -29,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;
 }
 
@@ -41,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;
 }
 
@@ -77,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;
 }
@@ -97,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 {
@@ -128,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,
@@ -160,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);
 }
 
@@ -331,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);
 }
 
@@ -345,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%);
@@ -353,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;
 }
 
@@ -395,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 {
@@ -409,28 +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);
-}
-
-/* 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/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
diff --git a/css/defaults/servarr-base.css b/css/defaults/servarr-base.css
new file mode 100644
index 00000000..0130dc61
--- /dev/null
+++ b/css/defaults/servarr-base.css
@@ -0,0 +1,903 @@
+/*    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);
+}
+
+*::-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-"] {
+    color: var(--text);
+}
+
+[class*="FormInputGroup-inputUnit-"] {
+    color: var(--text) !important;
+}
+
+/* LINKS */
+[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{
+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);
+}
+
+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);
+    box-shadow: none;
+}
+
+/* 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);
+}
+
+[class*="ExtraFileTable-container-"] {
+    border: 1px solid transparent;
+    background: var(--transparency-dark-25);
+}
+
+.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*="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*="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);
+}
+
+/* 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;
+}
+
+/* INPUT */
+[class*="Input-input-"],
+[class*="CheckInput-isIndeterminate-"] {
+    border: none;
+    background: var(--transparency-light-05);
+    color: var(--text-hover);
+}
+
+[class*="Input-input-"]:focus {
+    outline: 0;
+    border-color: var(--text-hover);
+    box-shadow: none;
+    background: var(--transparency-light-10);
+}
+
+[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-dark-05);
+}
+
+/*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,
+[class*="Applications-center-"]:hover {
+    color: var(--text-hover);
+}
+
+[class*="QualityProfiles-center-"],
+[class*="LanguageProfiles-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-"] {
+    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);
+}
+
+/* INDEXSERS */
+[class*="Indexers-center-"] {
+    background-color: transparent;
+    border: none;
+}
+[class*="Restrictions-center-"] {
+    border: 1px solid transparent;
+    background-color: transparent;
+}
+
+/* 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;
+}
+
+/* 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
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
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;