1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-09-11 19:32:24 +02:00

feat: 💄 Adds transparency vars

This commit is contained in:
GilbN 2022-04-23 01:14:15 +02:00
parent 51c3e69582
commit c3803d070b
58 changed files with 1551 additions and 1481 deletions

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -61,7 +62,7 @@ body *:hover::-webkit-scrollbar-thumb {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -73,7 +74,7 @@ body *:hover::-webkit-scrollbar-thumb {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -113,7 +114,7 @@ h6,
} }
.login__form .card { .login__form .card {
background: rgba(0, 0, 0, 0.08); background: var(--transparency-dark-10);
border: 1px solid rgb(0 0 0 / 0.08); border: 1px solid rgb(0 0 0 / 0.08);
} }
@ -183,7 +184,7 @@ h6,
/* FOOTER */ /* FOOTER */
.footer { .footer {
background: rgba(0, 0, 0, 0.08); background: var(--transparency-dark-10);
border-top: 1px solid rgba(255, 255, 255, 0.03); border-top: 1px solid rgba(255, 255, 255, 0.03);
color: var(--text); color: var(--text);
} }
@ -235,7 +236,7 @@ h6,
.tooltip-custom__container .button-action--arrow-option:not(:disabled):hover { .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
cursor: pointer; cursor: pointer;
background: rgb(0 0 0 / 0.15); background: var(--transparency-dark-15);
overflow: hidden; overflow: hidden;
} }
@ -245,7 +246,7 @@ h6,
/* CARDS*/ /* CARDS*/
.card { .card {
background-color: rgb(0 0 0 / 8%); background-color: var(--transparency-dark-10);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text); color: var(--text);
} }
@ -331,7 +332,7 @@ h6,
.dropdown-item:focus { .dropdown-item:focus {
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
background-color: rgb(255 255 255 / 0.08); background-color: var(--transparency-dark-10);
} }
.select__menu { .select__menu {
@ -347,7 +348,7 @@ h6,
} }
.select__option:hover { .select__option:hover {
background: rgba(255, 255, 255, .08) !important; background: var(--transparency-dark-10) !important;
} }
.select__option { .select__option {
@ -366,11 +367,11 @@ h6,
/* INSTALL */ /* INSTALL */
.setup__container { .setup__container {
background-color: rgb(0 0 0 / 8%); background-color: var(--transparency-dark-10);
} }
.setup__progress-wrap { .setup__progress-wrap {
background-color: rgb(0 0 0 / 50%); background-color: var(--transparency-dark-50);
} }
.setup__logo { .setup__logo {
@ -388,7 +389,7 @@ h6,
.dropdown-item.active, .dropdown-item.active,
.dropdown-item:active { .dropdown-item:active {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
.service__icon { .service__icon {
@ -397,7 +398,7 @@ h6,
/* LOGS */ /* LOGS */
.logs__table { .logs__table {
background-color: rgb(0 0 0 / 8%); background-color: var(--transparency-dark-10);
} }
.logs__text, .logs__text,
@ -447,7 +448,7 @@ h6,
.ReactTable .-loading, .ReactTable .-loading,
.ReactTable .-loading>div { .ReactTable .-loading>div {
background: rgba(255, 255, 255, 0.5); background: var(--transparency-light-50);
} }
.ReactTable .rt-thead .rt-th, .ReactTable .rt-thead .rt-th,
@ -461,7 +462,7 @@ h6,
} }
.ReactTable .rt-thead.-header { .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 { .ReactTable .rt-thead .rt-th.-sort-asc, .ReactTable .rt-thead .rt-td.-sort-asc {
@ -495,7 +496,7 @@ h6,
/* FORMS */ /* FORMS */
.form-control { .form-control {
color: var(--text); color: var(--text);
background: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
border: 1px solid rgba(255, 255, 255, .1) border: 1px solid rgba(255, 255, 255, .1)
} }
@ -511,7 +512,7 @@ h6,
border-color: transparent; border-color: transparent;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: rgba(255, 255, 255, 0.2); background: var(--transparency-light-20);
color: var(--text-hover); color: var(--text-hover);
} }
@ -523,7 +524,7 @@ h6,
.custom-select { .custom-select {
color: var(--text); 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; background-size: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
@ -544,7 +545,7 @@ select:focus {
} }
.icon--selected { .icon--selected {
background-color: rgb(0 0 0 / 15%); background-color: var(--transparency-dark-15);
border: solid 1px transparent; border: solid 1px transparent;
} }
@ -581,7 +582,7 @@ select:focus {
.btn-secondary { .btn-secondary {
color: var(--button-text); color: var(--button-text);
background-color: rgb(255 255 255 / 25%); background-color: var(--transparency-light-25);
border-color: rgb(255 255 255 / 0%); border-color: rgb(255 255 255 / 0%);
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05); -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); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
@ -623,7 +624,7 @@ select:focus {
} }
.ReactModal__Overlay--after-open { .ReactModal__Overlay--after-open {
background-color: rgb(0 0 0 / 0.7) !important; background-color: var(--transparency-dark-70) !important;
} }
/* MOBILE */ /* MOBILE */
@ -657,21 +658,4 @@ select:focus {
.dropdown-menu { .dropdown-menu {
background: #1f1f1f !important; 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);
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none; outline: none;
@ -30,7 +31,7 @@ body {
/* scroller */ /* scroller */
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: hsla(0, 0%, 100%, .08); background-color: var(--transparency-dark-10);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -42,7 +43,7 @@ body {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, 0.35) !important; background-color: var(--transparency-light-35) !important;
} }
a, a,
@ -63,21 +64,21 @@ a:hover {
} }
.page-link { .page-link {
background-color: rgba(255, 255, 255, .07); background-color: var(--transparency-light-10);
border: 1px solid rgba(255, 255, 255, .1); border: 1px solid var(--transparency-light-10);
} }
.page-link:hover { .page-link:hover {
color: var(--link-color-hover); color: var(--link-color-hover);
text-decoration: none; text-decoration: none;
background-color: rgba(0, 0, 0, .15); background-color: var(--transparency-dark-15);
border: 1px solid rgba(255, 255, 255, .1); border: 1px solid var(--transparency-light-10);
} }
.page-item.disabled .page-link { .page-item.disabled .page-link {
color: var(--link-color); color: var(--link-color);
background-color: rgba(255, 255, 255, .07); background-color: var(--transparency-light-10);
border: 1px solid rgba(255, 255, 255, .1); border: 1px solid var(--transparency-light-10);
} }
.page-link:focus { .page-link:focus {
@ -100,7 +101,7 @@ a:hover {
} }
.table-striped tbody tr:nth-of-type(odd) { .table-striped tbody tr:nth-of-type(odd) {
background-color: rgb(0 0 0 / 15%); background-color: var(--transparency-dark-15);
} }
.text-dark { .text-dark {
@ -149,13 +150,13 @@ label,
.form-control { .form-control {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08); background-color: var(--transparency-light-10);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--transparency-light-10);
} }
.form-control:focus { .form-control:focus {
background-color: rgba(255, 255, 255, 0.25) !important; background-color: var(--transparency-light-25) !important;
border-color: rgba(255, 255, 255, 0.25) !important; border-color: var(--transparency-light-25) !important;
outline: 0; outline: 0;
box-shadow: none; box-shadow: none;
color: var(--text-hover); color: var(--text-hover);
@ -163,10 +164,10 @@ label,
.form-control:disabled, .form-control:disabled,
.form-control[readonly] { .form-control[readonly] {
background-color: rgb(255 255 255 / 15%); background-color: var(--transparency-light-15);
opacity: .7; opacity: .7;
color: var(--text-hover); color: var(--text-hover);
border: 1px solid rgb(255 255 255 / 15%); border: 1px solid var(--transparency-light-15);
} }
:root .form-control:focus { :root .form-control:focus {
@ -180,7 +181,7 @@ label,
.bootstrap-tagsinput { .bootstrap-tagsinput {
color: var(--text); color: var(--text);
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
} }
@ -195,7 +196,7 @@ label,
.input-group-text { .input-group-text {
color: var(--text); color: var(--text);
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -205,7 +206,7 @@ label,
} }
.custom-chip-input:focus-within { .custom-chip-input:focus-within {
border-color: rgb(255 255 255 / 10%); border-color: var(--transparency-light-10);
} }
.custom-chip-input .custom-chip { .custom-chip-input .custom-chip {
@ -221,7 +222,7 @@ label,
/* SIDEBAR */ /* SIDEBAR */
.sidebar-container { .sidebar-container {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.sidebar-container .sidebar-button, .sidebar-container .sidebar-button,
@ -233,7 +234,7 @@ label,
.sidebar-container .sidebar-button:active, .sidebar-container .sidebar-button:active,
.sidebar-container .sidebar-button:focus { .sidebar-container .sidebar-button:focus {
color: rgb(var(--accent-color)) !important; 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, .sidebar-container .sidebar-button:hover,
@ -249,7 +250,7 @@ label,
.sidebar-container .sidebar-button.sb-active, .sidebar-container .sidebar-button.sb-active,
.sidebar-container .sidebar-button.sb-active:hover, .sidebar-container .sidebar-button.sb-active:hover,
.sidebar-container .button.active { .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; color: rgb(var(--accent-color)) !important;
} }
@ -298,7 +299,7 @@ label,
/* TOP NAV BAR */ /* TOP NAV BAR */
.header-container .bg-primary { .header-container .bg-primary {
background-color: rgba(0, 0, 0, .35) !important; background: var(--transparency-dark-35) !important;
} }
.header-container .btn-primary { .header-container .btn-primary {
@ -333,7 +334,7 @@ label,
-webkit-background-size: auto, cover !important; -webkit-background-size: auto, cover !important;
-moz-background-size: auto, cover !important; -moz-background-size: auto, cover !important;
-o-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 { .auth-card .card-footer {
background-color: transparent; background-color: transparent;
border-top: 1px solid rgba(255, 255, 255, .1); border-top: 1px solid var(--transparency-light-10);
} }
hr { hr {
border-top: 1px solid rgb(255 255 255 / 10%); border-top: 1px solid var(--transparency-light-10);
} }
.card { .card {
background-color: rgba(0, 0, 0, .45); background-color: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
.card-header { .card-header {
border-bottom: 1px solid rgb(255 255 255 / 10%); border-bottom: 1px solid var(--transparency-light-10);
} }
.settings-card:hover, .settings-card:hover,
@ -380,8 +381,8 @@ hr {
.alert-secondary { .alert-secondary {
color: var(--text); color: var(--text);
background-color: rgba(255, 255, 255, .15); background-color: var(--transparency-light-15);
border-color: rgba(255, 255, 255, .15); border-color: var(--transparency-light-15);
} }
/* Series page */ /* Series page */
@ -391,7 +392,7 @@ hr {
} }
.progress { .progress {
background-color: rgb(255 255 255 / 20%); background-color: var(--transparency-light-20);
} }
.progress-bar.bg-primary { .progress-bar.bg-primary {
@ -421,17 +422,17 @@ hr {
.popover { .popover {
background-color: #1f1f1f; 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-auto[x-placement^=top]>.arrow:after,
.bs-popover-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 { .popover-header {
background-color: #1f1f1f; background-color: #1f1f1f;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid var(--transparency-light-10);
} }
@ -638,7 +639,7 @@ hr {
} }
.custom-control-input:focus~.custom-control-label:before { .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 { .custom-control-input:checked~.custom-control-label:before {
@ -721,11 +722,11 @@ input {
.dropdown-item:focus, .dropdown-item:focus,
.dropdown-item:hover { .dropdown-item:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: hsla(0, 0%, 100%, .08); background-color: var(--transparency-dark-10);
} }
.custom-selector .selector__control { .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; border-color: rgba(0, 0, 0, 0) !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -741,7 +742,7 @@ input {
} }
.custom-selector .selector__control--is-focused { .custom-selector .selector__control--is-focused {
border-color: rgba(255, 255, 255, .2) !important; border-color: var(--transparency-light-20) !important;
} }
.selector__menu { .selector__menu {
@ -757,7 +758,7 @@ input {
} }
.custom-selector .selector__option--is-selected:active { .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 { .custom-selector .selector__option--is-focused {
@ -801,7 +802,7 @@ input {
} }
.recharts-rectangle.recharts-tooltip-cursor { .recharts-rectangle.recharts-tooltip-cursor {
fill: rgba(255, 255, 255, .15) !important; fill: var(--transparency-light-15) !important;
} }
text { text {
@ -833,7 +834,7 @@ line {
.toast-header { .toast-header {
color: var(--text-hover); 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); border-bottom: 1px solid rgba(0, 0, 0, .05);
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none; outline: none;
@ -93,7 +94,7 @@ html[class*="theme_"] .navbar .nav-item>.nav-link {
.table-hover tbody tr:hover { .table-hover tbody tr:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10);
} }
h1, h1,
@ -118,7 +119,7 @@ html[class*="theme_"] .card-header,
/* NAVBAR */ /* NAVBAR */
.navbar { .navbar {
background-color: rgb(0 0 0 / 25%) !important; background: var(--transparency-dark-25) !important;
} }
.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .show>.nav-link,
@ -131,12 +132,12 @@ html[class*="theme_"] .card-header,
/* CARDS */ /* CARDS */
html[class*="theme_"] .card-header { html[class*="theme_"] .card-header {
background-color: rgb(0 0 0 / 45%); background-color: var(--transparency-dark-45);
color: var(--text-hover); color: var(--text-hover);
} }
.card { .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; border-color: rgba(255, 255, 255, 0.1) !important;
color: var(--text) !important; color: var(--text) !important;
} }
@ -158,7 +159,7 @@ app-vault-groupings .card li.active>div>.fa {
body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4, body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4,
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 { body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4>div {
background-color: rgb(0 0 0 / 15%) !important; background-color: var(--transparency-dark-15) !important;
} }
html[class*="theme_"] .password-number { html[class*="theme_"] .password-number {
@ -279,19 +280,19 @@ html[class*="theme_"] .form-control-file {
html[class*="theme_"] .form-control:focus { html[class*="theme_"] .form-control:focus {
box-shadow: none; box-shadow: none;
border-color: transparent; border-color: transparent;
background: rgb(253 253 253 / 15%); background: var(--transparency-light-15);
} }
html[class*="theme_"] .form-control { html[class*="theme_"] .form-control {
color: var(--text); color: var(--text);
background-color: rgb(0 0 0 / 0.25); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
} }
html[class*="theme_"] .form-control:disabled, html[class*="theme_"] .form-control:disabled,
.form-control[readonly] { .form-control[readonly] {
background-color: rgb(255 255 255 / 25%); background-color: var(--transparency-light-25);
opacity: 1; opacity: 1;
} }
@ -332,13 +333,13 @@ html[class*="theme_"] .dropdown-item:hover,
html[class*="theme_"] .dropdown-item:focus { html[class*="theme_"] .dropdown-item:focus {
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
background-color: rgb(255 255 255 / 0.08); background-color: var(--transparency-light-10);
} }
a.text-danger:hover, a.text-danger:hover,
a.text-danger:focus { a.text-danger:focus {
color: #dd4b39 !important; color: #dd4b39 !important;
background-color: rgb(255 255 255 / 0.08) !important; background-color: var(--transparency-light-10) !important;
} }
.dropdown-menu .text-danger { .dropdown-menu .text-danger {
@ -373,24 +374,24 @@ html[class*="theme_"] .footer {
html[class*="theme_"] .list-group-item.active { html[class*="theme_"] .list-group-item.active {
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
color: rgb(var(--accent-color)); 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)); border-left: 3px solid rgb(var(--accent-color));
} }
html[class*="theme_"] .callout { 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); border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text); color: var(--text);
} }
html[class*="theme_"] .list-group-item { html[class*="theme_"] .list-group-item {
background-color: rgb(0 0 0 / 35%); background: var(--transparency-dark-35);
border: 1px solid rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 8%);
color: var(--text); color: var(--text);
} }
html[class*="theme_"] .progress { html[class*="theme_"] .progress {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
/* BUTTONS */ /* BUTTONS */
@ -530,7 +531,7 @@ html[class*="theme_"] .org-nav .nav-tabs a.active {
} }
html[class*="theme_"] .nav-tabs .nav-link.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); border-color: rgba(255, 255, 255, 0.15);
} }
@ -558,7 +559,7 @@ html[class*="theme_"] .org-nav .nav-tabs a:not(.active) {
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { .nav-tabs .nav-item.show .nav-link {
color: var(--text); color: var(--text);
background-color: rgb(255 255 255 / 25%); background-color: var(--transparency-light-25);
border-color: transparent; border-color: transparent;
} }
@ -607,11 +608,11 @@ html[class*="theme_"] .table td [class*="fa-"] {
/* Cards */ /* Cards */
.bg-secondary { .bg-secondary {
background-color: rgb(255 255 255 / 10%) !important; background: var(--transparency-light-10) !important;
} }
.bg-white { .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 { html[class*="theme_"] .groupings .card .card-body a {
@ -631,7 +632,7 @@ html[class*="theme_"] .groupings .card .card-body a {
color: var(--text); color: var(--text);
pointer-events: none; pointer-events: none;
cursor: auto; cursor: auto;
background-color: rgb(0 0 0 / 10%); background: var(--transparency-dark-10);
border-color: rgb(0 0 0 / 10%); border-color: rgb(0 0 0 / 10%);
} }

View File

@ -15,6 +15,7 @@
/* APP VARS*/ /* APP VARS*/
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
:root { :root {
--color-background: var(--main-bg-color); --color-background: var(--main-bg-color);
@ -203,7 +204,7 @@
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover { .dropdown-menu>li>a:hover {
color: var(--text-hover); color: var(--text-hover);
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/* SIDEMENU */ /* SIDEMENU */
@ -225,7 +226,7 @@
-webkit-transition: color .2s; -webkit-transition: color .2s;
-o-transition: color .2s; -o-transition: color .2s;
transition: color .2s; transition: color .2s;
background-color: rgba(0, 0, 0, .55) !important; background: var(--transparency-dark-55) !important;
} }
/* NAVBAR */ /* NAVBAR */

View File

@ -14,6 +14,7 @@
@import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Roboto');
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
html { html {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -34,20 +35,20 @@
/* scroller */ /* scroller */
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
.x-grid3-header table, .x-grid3-header table,
@ -56,7 +57,7 @@
} }
.ext-el-mask { .ext-el-mask {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.ext-el-mask-msg { .ext-el-mask-msg {
@ -304,13 +305,13 @@
} }
ul.x-tab-strip-top { ul.x-tab-strip-top {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
background-image: none; background-image: none;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
ul.x-tab-strip-bottom { 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); //background-image: url(../images/gray/tabs/tab-strip-btm-bg.gif);
border-top-color: transparent; border-top-color: transparent;
} }
@ -349,7 +350,7 @@
ul.x-tab-strip li { ul.x-tab-strip li {
float: left; float: left;
margin-left: 2px; margin-left: 2px;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
#torrentDetails dl dt, #torrentDetails dl dt,
@ -435,7 +436,7 @@
.x-form-text, .x-form-text,
textarea.x-form-field { textarea.x-form-field {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
background-image: none; background-image: none;
border-color: transparent; border-color: transparent;
} }
@ -1034,7 +1035,7 @@
} }
.x-grid3 { .x-grid3 {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.x-grid-panel .x-panel-mc .x-panel-body { .x-grid-panel .x-panel-mc .x-panel-body {
@ -1066,12 +1067,12 @@
} }
.x-grid3-row-alt { .x-grid3-row-alt {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.x-grid3-row-over { .x-grid3-row-over {
border-color: transparent; border-color: transparent;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
background-image: none; background-image: none;
} }
@ -1084,7 +1085,7 @@
} }
.x-grid3-header { .x-grid3-header {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
background-image: none; background-image: none;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -1110,7 +1111,7 @@
td.sort-desc .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner,
td.sort-asc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner,
td.x-grid3-hd-menu-open .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; background-image: none;
} }
@ -1151,7 +1152,7 @@
} }
.x-grid3-row-selected { .x-grid3-row-selected {
background-color: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
background-image: none; background-image: none;
border-color: transparent; border-color: transparent;
color: var(--text-hover) !important; color: var(--text-hover) !important;
@ -1512,11 +1513,11 @@
} }
.x-tree-node .x-tree-node-over { .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 { .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 { .x-tree-drop-ok-append .x-dd-drop-icon {
@ -1778,7 +1779,7 @@
.x-menu-item-active { .x-menu-item-active {
background-image: none; background-image: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
border-color: transparent; border-color: transparent;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -1956,7 +1957,7 @@
font-family: 'Roboto', tahoma, arial, verdana, sans-serif; font-family: 'Roboto', tahoma, arial, verdana, sans-serif;
border-color: transparent; border-color: transparent;
background-image: none; background-image: none;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.x-panel-body { .x-panel-body {
@ -2304,12 +2305,12 @@
} }
.x-layout-collapsed { .x-layout-collapsed {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-color: transparent; border-color: transparent;
} }
.x-layout-collapsed-over { .x-layout-collapsed-over {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
.x-layout-split-west .x-layout-mini { .x-layout-split-west .x-layout-mini {
@ -2374,7 +2375,7 @@
} }
.x-list-header { .x-list-header {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
background-image: none; background-image: none;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -2389,11 +2390,11 @@
} }
.x-list-over { .x-list-over {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.x-list-selected { .x-list-selected {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }

View File

@ -11,11 +11,12 @@
/* https://github.com/gilbN/theme.park */ /* 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 { :root {
--scheme-main-ter: var(--main-bg-color); --scheme-main-ter: var(--main-bg-color);
--text-strong-color: var(--button-text-hover); --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)); --logo-color: rgb(var(--accent-color));
--body-background-color: var(--main-bg-color); --body-background-color: var(--main-bg-color);
--border-hover-color: rgb(var(--accent-color)); --border-hover-color: rgb(var(--accent-color));
@ -53,14 +54,14 @@ section header,
/* Scrollbar */ /* Scrollbar */
html.has-custom-scrollbars ::-webkit-scrollbar-thumb { html.has-custom-scrollbars ::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, .25); background: var(--transparency-light-25);
outline: 1px solid #0000; outline: 1px solid #0000;
border-radius: 4px; border-radius: 4px;
} }
html.has-custom-scrollbars ::-webkit-scrollbar-thumb:active, html.has-custom-scrollbars ::-webkit-scrollbar-thumb:active,
html.has-custom-scrollbars ::-webkit-scrollbar-thumb:hover { html.has-custom-scrollbars ::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, .45); background: var(--transparency-light-45);
} }
@ -110,13 +111,13 @@ p,
a.panel-block:hover, a.panel-block:hover,
label.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); color: var(--text-strong-color);
} }
/* Side Menu*/ /* Side Menu*/
.menu-list a:hover { .menu-list a:hover {
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10);
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -154,7 +155,7 @@ li.exited a {
.autocomplete .dropdown-item.is-hovered, .autocomplete .dropdown-item.is-hovered,
a.dropdown-item:hover, a.dropdown-item:hover,
button.dropdown-item:hover { button.dropdown-item:hover {
background: rgba(255, 255, 255, .25); background: var(--transparency-light-25);
color: var(--text-strong-color); color: var(--text-strong-color);
} }
@ -234,7 +235,7 @@ section .is-scrollbar-notification button {
} }
code { code {
background: rgba(0, 0, 0, .35) !important; background: var(--transparency-dark-35) !important;
} }
.switch input[type=checkbox]:checked+.check { .switch input[type=checkbox]:checked+.check {
@ -253,7 +254,7 @@ code {
/* Events */ /* Events */
.events { .events {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
} }
.scroll-progress svg circle { .scroll-progress svg circle {
@ -270,10 +271,10 @@ code {
} }
.events.medium { .events.medium {
background: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
} }
.date { .date {
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -65,7 +66,7 @@ a.disabled-link {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -77,7 +78,7 @@ a.disabled-link {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -161,7 +162,7 @@ label {
.col-xs-4 .card, .col-xs-4 .card,
.col-xs-12 .card, .col-xs-12 .card,
.col-xs-8 .card { .col-xs-8 .card {
background: rgb(0 0 0 / 8%) !important; background: var(--transparency-dark-10) !important;
} }
#schedule-0, #schedule-0,
@ -186,7 +187,7 @@ label {
#schedule-19, #schedule-19,
#schedule-20, #schedule-20,
[id*="#schedule-"] { [id*="#schedule-"] {
background-color: rgb(0 0 0 / 8%); background: var(--transparency-dark-10);
} }
/* TIMELINE */ /* TIMELINE */
@ -218,7 +219,7 @@ label {
.card .nav-tabs>li.active>a:hover { .card .nav-tabs>li.active>a:hover {
color: var(--text); color: var(--text);
cursor: default; cursor: default;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: 1px solid rgba(255, 255, 255, .25); border: 1px solid rgba(255, 255, 255, .25);
border-bottom-color: var(--text); border-bottom-color: var(--text);
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
@ -226,7 +227,7 @@ label {
.card .nav>li>a:hover, .card .nav>li>a:hover,
.card .nav>li>a:focus { .card .nav>li>a:focus {
background-color: rgba(255, 255, 255, .07); background: var(--transparency-light-10);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -236,8 +237,8 @@ label {
} }
.navbar-default { .navbar-default {
background-color: rgb(0 0 0 / 26%); background: var(--transparency-dark-25);
border-bottom: 1px solid rgb(255 255 255 / 25%); border-bottom: 1px solid var(--transparency-light-25);
} }
/* SIDEBAR */ /* SIDEBAR */
@ -245,7 +246,7 @@ label {
.sidebar[data-background-color="black"]:before, .sidebar[data-background-color="black"]:before,
.off-canvas-sidebar[data-background-color="black"]:after, .off-canvas-sidebar[data-background-color="black"]:after,
.off-canvas-sidebar[data-background-color="black"]:before { .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, .sidebar[data-background-color="black"] .logo,
@ -321,7 +322,7 @@ label {
.nav-tabs>li.active>a:hover { .nav-tabs>li.active>a:hover {
color: var(--text); color: var(--text);
cursor: default; cursor: default;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -332,7 +333,7 @@ label {
} }
.modal-body .nav-tabs>li.active>a:hover { .modal-body .nav-tabs>li.active>a:hover {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -352,7 +353,7 @@ label {
.modal-body .nav .open>a, .modal-body .nav .open>a,
.nav .open>a:focus, .nav .open>a:focus,
.nav .open>a:hover { .nav .open>a:hover {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border-color: transparent; border-color: transparent;
} }
@ -383,18 +384,18 @@ label {
.form-control, .form-control,
textarea { textarea {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
.form-control:focus { .form-control:focus {
background-color: rgb(0 0 0 / 50%); background: var(--transparency-dark-50);
} }
.form-control[disabled], .form-control[disabled],
.form-control[readonly], .form-control[readonly],
fieldset[disabled] .form-control { fieldset[disabled] .form-control {
background-color: rgba(0, 0, 0, .15); background: var(--transparency-dark-15);
} }
#input_s3_provider:focus, #input_s3_provider:focus,
@ -428,7 +429,7 @@ fieldset[disabled] .form-control {
.timepicker-spinner .btn:hover, .timepicker-spinner .btn:hover,
.timepicker-spinner .btn:focus { .timepicker-spinner .btn:focus {
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -521,7 +522,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt
} }
.close { .close {
var(--text-hover); color: var(--text-hover);
} }
.navbar .navbar-nav>li>a.btn-success, .navbar .navbar-nav>li>a.btn-success,
@ -588,7 +589,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt
.table>thead>tr>td.active, .table>thead>tr>td.active,
.table>thead>tr>th.active, .table>thead>tr>th.active,
.row-clickable.active { .row-clickable.active {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -629,7 +630,7 @@ hr {
/* PROGRESS BARS */ /* PROGRESS BARS */
.progress { .progress {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.progress-bar { .progress-bar {
@ -642,7 +643,7 @@ hr {
/* FOOTER */ /* FOOTER */
.main-panel>.footer { .main-panel>.footer {
background: rgb(0 0 0 / 0.25); background: var(--transparency-dark-25);
} }
/* MOBILE */ /* MOBILE */

View File

@ -1,4 +1,5 @@
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none !important; outline: none !important;
@ -153,14 +154,14 @@ form.styled select,
form.styled .input.select select { form.styled .input.select select {
color: var(--text); color: var(--text);
border: none; border: none;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
form.styled input:focus, form.styled input:focus,
form.styled textarea:focus { form.styled textarea:focus {
color: var(--text-hover); color: var(--text-hover);
border: none; border: none;
background: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
} }
select:focus, select:focus,
@ -204,7 +205,7 @@ body .container .body .contextmenu {
} }
body .container .body .contextmenu li a:hover { body .container .body .contextmenu li a:hover {
background: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -310,7 +311,7 @@ ul.tabs>li {
/* FOLDER TREE*/ /* FOLDER TREE*/
.tree-view li div.selected { .tree-view li div.selected {
border-color: rgba(255, 255, 255, .1); 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 */
#login h2 { #login h2 {
background: rgba(255, 255, 255, .15); background: var(--transparency-light-15);
color: var(--text); color: var(--text);
} }
@ -330,7 +331,7 @@ body .container .header .state .progress-bar {
} }
#login fieldset { #login fieldset {
background-color: rgba(255, 255, 255, .15); background: var(--transparency-light-15);
} }
#login fieldset input[type="submit"] { #login fieldset input[type="submit"] {
@ -345,6 +346,6 @@ body .container .header .state .progress-bar {
#login fieldset input[type="email"], #login fieldset input[type="email"],
#login fieldset input[type="password"] { #login fieldset input[type="password"] {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }

View File

@ -1,4 +1,5 @@
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
:root { :root {
--theme-primary-color: var(--accent-color); --theme-primary-color: var(--accent-color);
@ -11,15 +12,15 @@
--theme-background: var(--main-bg-color); --theme-background: var(--main-bg-color);
--header-blur-background: rgba(20,20,20,0.66); --header-blur-background: rgba(20,20,20,0.66);
--drawer-background: #2C2C2E; --drawer-background: #2C2C2E;
--docked-drawer-background: rgba(0, 0, 0, 0.25); --docked-drawer-background: var(--transparency-dark-25);
--button-background: var(--button-color); --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-background: var(--modal-footer-color);
--footer-blur-background: rgba(29,29,31,0.66); --footer-blur-background: rgba(29,29,31,0.66);
--header-background: var(--theme-background); --header-background: var(--theme-background);
--theme-body-secondary-text-color: rgba(255, 255, 255, .6); --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; --line-size: .08em;
--scrollbar-thumb-background: rgba(255,255,255,.3); --scrollbar-thumb-background: rgba(255,255,255,.3);
} }
@ -29,9 +30,9 @@
--theme-background: var(--main-bg-color); --theme-background: var(--main-bg-color);
--header-blur-background: rgba(20,20,20,0.66); --header-blur-background: rgba(20,20,20,0.66);
--drawer-background: #2C2C2E; --drawer-background: #2C2C2E;
--docked-drawer-background: rgba(0, 0, 0, 0.25); --docked-drawer-background: var(--transparency-dark-25);
--button-background: #1f1f1f; --button-background: #1f1f1f;
--card-background: rgba(0, 0, 0, 0.15); --card-background: var(--transparency-dark-15);
--footer-background: var(--modal-footer-color); --footer-background: var(--modal-footer-color);
--footer-blur-background: rgba(29,29,31,0.66); --footer-blur-background: rgba(29,29,31,0.66);
} }
@ -41,9 +42,9 @@
--theme-background: var(--main-bg-color); --theme-background: var(--main-bg-color);
--header-blur-background: rgba(20,20,20,0.66); --header-blur-background: rgba(20,20,20,0.66);
--drawer-background: #2C2C2E; --drawer-background: #2C2C2E;
--docked-drawer-background: rgba(0, 0, 0, 0.25); --docked-drawer-background: var(--transparency-dark-25);
--button-background: #1f1f1f; --button-background: #1f1f1f;
--card-background: rgba(0, 0, 0, 0.15); --card-background: var(--transparency-dark-15);
--footer-background: var(--modal-footer-color); --footer-background: var(--modal-footer-color);
--footer-blur-background: rgba(29,29,31,0.66); --footer-blur-background: rgba(29,29,31,0.66);
} }
@ -175,7 +176,7 @@ html {
} }
.backgroundContainer.withBackdrop { .backgroundContainer.withBackdrop {
background-color: rgba(0, 0, 0, .83) background: var(--transparency-dark-80)
} }
@media not all and (min-width: 50em) { @media not all and (min-width: 50em) {
@ -217,7 +218,7 @@ html {
.emby-select-withcolor { .emby-select-withcolor {
color: inherit; color: inherit;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: var(--line-size) solid transparent border: var(--line-size) solid transparent
} }
@ -334,7 +335,7 @@ html {
@media(hover: hover) and (pointer:fine) { @media(hover: hover) and (pointer:fine) {
.actionSheetMenuItem:hover { .actionSheetMenuItem:hover {
background-color: rgba(255, 255, 255, .2) background: var(--transparency-light-20)
} }
} }
@ -398,7 +399,7 @@ html {
.emby-input, .emby-input,
.emby-textarea { .emby-textarea {
color: inherit; color: inherit;
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border: var(--line-size) solid rgba(255, 255, 255, 0.1) border: var(--line-size) solid rgba(255, 255, 255, 0.1)
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
.message { .message {
color: var(--text-hover); color: var(--text-hover);
@ -48,7 +49,7 @@ th {
#login input[type=password], #login input[type=password],
#login input[type=text] { #login input[type=text] {
color: var(--text-hover) !important; color: var(--text-hover) !important;
background-color: rgba(0, 0, 0, 0.15) !important; background: var(--transparency-dark-15) !important;
border: none; border: none;
} }
@ -103,7 +104,7 @@ body {
} }
nav { nav {
background: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
height: 100%; height: 100%;
top: 64px; top: 64px;
width: 240px; width: 240px;
@ -124,7 +125,7 @@ nav .action {
} }
nav .action:hover { nav .action:hover {
background-color: rgba(255, 255, 255, 0.05); background: var(--transparency-light-05);
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
@ -133,7 +134,7 @@ nav>div {
} }
header { header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
background-position: center center, center center; background-position: center center, center center;
@ -174,20 +175,20 @@ body {
} }
#listing.list .item { #listing.list .item {
background-color: rgba(0, 0, 0, .15); background: var(--transparency-dark-15);
color: var(--text); color: var(--text);
border: none; border: none;
} }
#listing.list .item:hover { #listing.list .item:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
border: none; border: none;
transition: .4s; transition: .4s;
} }
#listing.list .item.header { #listing.list .item.header {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
color: var(--text-hover); color: var(--text-hover);
border-bottom: none; border-bottom: none;
right: auto; right: auto;
@ -213,7 +214,7 @@ body {
} }
.share__box__info { .share__box__info {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.share__box__download { .share__box__download {
@ -271,13 +272,13 @@ svg {
} }
#listing .item { #listing .item {
background-color: rgba(0, 0, 0, .15); background: var(--transparency-dark-15);
color: var(--text); color: var(--text);
border: none; border: none;
} }
.input { .input {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -304,7 +305,7 @@ select>option {
} }
#search .boxes { #search .boxes {
background-color: rgba(0, 0, 0, .15); background: var(--transparency-dark-15);
padding: 15px; padding: 15px;
} }
@ -313,11 +314,11 @@ select>option {
} }
#search .boxes>div>div { #search .boxes>div>div {
background-color: rgba(0, 0, 0, .10); background: var(--transparency-dark-10);
} }
#search .boxes>div>div:hover { #search .boxes>div>div:hover {
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10);
} }
#search.active #input { #search.active #input {
@ -343,7 +344,7 @@ select>option {
} }
.card { .card {
background-color: rgba(0, 0, 0, .15); background: var(--transparency-dark-15);
} }
.card h3 { .card h3 {
@ -404,7 +405,7 @@ table th {
} }
#search #input { #search #input {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
#listing.mosaic .item { #listing.mosaic .item {
@ -413,7 +414,7 @@ table th {
#listing.mosaic .item:hover { #listing.mosaic .item:hover {
box-shadow: none !important; box-shadow: none !important;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.dashboard p label { .dashboard p label {

View File

@ -13,6 +13,7 @@
/* MOBILE */ /* MOBILE */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
@media (max-width: 720px) { @media (max-width: 720px) {
@ -87,7 +88,7 @@ p,
.panel--light { .panel--light {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.panel { .panel {
@ -101,7 +102,7 @@ p,
.input, .input,
.inverse .input { .inverse .input {
background: rgba(255, 255, 255, .05); background: var(--transparency-light-05);
color: var(--text-hover); color: var(--text-hover);
border: 1px solid #0000; border: 1px solid #0000;
box-shadow: 0 1px 1px rgba(210, 216, 222, 0), 0 1px 3px 1px rgba(210, 216, 222, 0); box-shadow: 0 1px 1px rgba(210, 216, 222, 0), 0 1px 3px 1px rgba(210, 216, 222, 0);
@ -125,7 +126,7 @@ p,
.button--quaternary, .button--quaternary,
.inverse .button--quaternary { .inverse .button--quaternary {
background: rgba(255, 255, 255, .05); background: var(--transparency-light-05);
border-color: transparent; border-color: transparent;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 1px 3px 1px rgba(0, 0, 0, 0); box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 1px 3px 1px rgba(0, 0, 0, 0);
color: var(--text); color: var(--text);
@ -150,7 +151,7 @@ p,
.context-menu__items .select__item:focus-visible, .context-menu__items .select__item:focus-visible,
.context-menu__items .select__item:hover { .context-menu__items .select__item:hover {
background: rgba(255, 255, 255, .15); background: var(--transparency-light-15);
} }
.inverse .form__element__addon { .inverse .form__element__addon {
@ -177,7 +178,7 @@ p,
} }
.sortable-list__item { .sortable-list__item {
background: rgb(255 255 255 / 10%); background: var(--transparency-light-10);
border: 1px solid rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 10%);
} }
@ -188,7 +189,7 @@ p,
.css-q5wzhq:hover { .css-q5wzhq:hover {
color: var(--text-hover); color: var(--text-hover);
background: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
} }
.css-m5tpeq:hover { .css-m5tpeq:hover {
@ -210,14 +211,14 @@ p,
.inverse .button--tertiary:focus, .inverse .button--tertiary:focus,
.inverse .button--tertiary:hover { .inverse .button--tertiary:hover {
background: rgba(255, 255, 255, .35); background: var(--transparency-light-35);
border-color: #0000; border-color: #0000;
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%); 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%); text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
} }
.inverse .button--tertiary:active { .inverse .button--tertiary:active {
background: rgba(255, 255, 255, .35); background: var(--transparency-light-35);
border-color: #0000; border-color: #0000;
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%); 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%); text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
@ -225,7 +226,7 @@ p,
.inverse .button--tertiary:focus, .inverse .button--tertiary:focus,
.inverse .button--tertiary:hover { .inverse .button--tertiary:hover {
background: rgba(255, 255, 255, .35); background: var(--transparency-light-35);
border-color: #0000; border-color: #0000;
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%); 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%); text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
@ -264,7 +265,7 @@ p,
.menu__item.is-selectable:focus-within, .menu__item.is-selectable:focus-within,
.menu__item.is-selectable:hover { .menu__item.is-selectable:hover {
background: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -315,7 +316,7 @@ p,
.dark .table__row--heading, .dark .table__row--heading,
.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%); box-shadow: 0 1px 0 hsl(0deg 0% 100% / 12%);
color: var(--text-hover); color: var(--text-hover);
} }
@ -455,7 +456,7 @@ p,
.dark .action:hover, .dark .action:hover,
.action:focus-visible, .action:focus-visible,
.action:hover { .action:hover {
background: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
box-shadow: none; box-shadow: none;
} }
@ -474,7 +475,7 @@ p,
/* SIDE MENU */ /* SIDE MENU */
.dark .application__sidebar, .dark .application__sidebar,
.application__sidebar { .application__sidebar {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
box-shadow: 1px 0 hsl(0deg 0% 100% / 12%); box-shadow: 1px 0 hsl(0deg 0% 100% / 12%);
color: var(--text); color: var(--text);
} }
@ -625,7 +626,7 @@ p,
.modal--vertical.modal--tabs-in-header .modal__header, .modal--vertical.modal--tabs-in-header .modal__header,
.modal--vertical.modal--tabs-in-body .modal__tabs { .modal--vertical.modal--tabs-in-body .modal__tabs {
/* Modal side menu*/ /* Modal side menu*/
background: rgb(0 0 0 / 45%) !important; background: var(--transparency-dark-45) !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -644,7 +645,7 @@ p,
.modal__tabs .modal__tab.is-active { .modal__tabs .modal__tab.is-active {
color: var(--text-hover); color: var(--text-hover);
background: rgb(255 255 255 / 15%); background: var(--transparency-light-15);
border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;
} }
@ -693,7 +694,7 @@ p,
} }
.interactive-list { .interactive-list {
background: rgb(255 255 255 / 10%); background: var(--transparency-light-10);
border: 1px solid rgb(255 255 255 / 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%); box-shadow: 0 1px 1px rgb(0 0 0 / 15%), 0 1px 3px 1px rgb(0 0 0 / 20%);
color: var(--text); color: var(--text);

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -54,7 +55,7 @@ body {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -66,7 +67,7 @@ body {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -112,7 +113,7 @@ label {
/* Header */ /* Header */
.bg-primary { .bg-primary {
background-color: transparent !important; background-color: transparent !important;
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.navbar .list-ul-active, .navbar .list-ul-active,
@ -152,12 +153,12 @@ label {
table.dataTable.stripe tbody tr.odd, table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd, table.dataTable.display tbody tr.odd,
table.dataTable tbody tr { table.dataTable tbody tr {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
table.dataTable.hover tbody tr:hover, table.dataTable.hover tbody tr:hover,
table.dataTable.display 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, table.dataTable thead th,
@ -177,14 +178,14 @@ table.dataTable.display tbody td {
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: var(--text) !important; color: var(--text) !important;
border: 1px solid transparent; 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:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active { .dataTables_wrapper .dataTables_paginate .paginate_button:active {
color: var(--text-hover) !important; color: var(--text-hover) !important;
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(255, 255, 255, .08); background: var(--transparency-light-10)
} }
.dataTables_wrapper .dataTables_paginate .paginate_button:active { .dataTables_wrapper .dataTables_paginate .paginate_button:active {
@ -281,7 +282,7 @@ table.dataTable.display tbody td {
.nav-pills .nav-item.open .nav-link:focus, .nav-pills .nav-item.open .nav-link:focus,
.nav-tabs .nav-item.show .nav-link { .nav-tabs .nav-item.show .nav-link {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
border-color: transparent; border-color: transparent;
} }
@ -298,13 +299,13 @@ table.dataTable.display tbody td {
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:focus,
.nav-tabs .nav-item.open .nav-link:hover, .nav-tabs .nav-item.open .nav-link:hover,
.nav-pills .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; border-color: transparent;
color: var(--text-hover); color: var(--text-hover);
} }
.nav-tabs .nav-link.active:hover { .nav-tabs .nav-link.active:hover {
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
} }
.badge-primary { .badge-primary {
@ -313,7 +314,7 @@ table.dataTable.display tbody td {
} }
#plexServers .card-header { #plexServers .card-header {
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
color: var(--text-hover) color: var(--text-hover)
} }
@ -322,12 +323,12 @@ table.dataTable.display tbody td {
} }
#plexServers .list-group-item { #plexServers .list-group-item {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: none; border: none;
} }
#plexServers .card-footer { #plexServers .card-footer {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
.dropdown-menu { .dropdown-menu {
@ -352,7 +353,7 @@ table.dataTable.display tbody td {
.dropdown-item:focus { .dropdown-item:focus {
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10)
} }
/* Input */ /* Input */

View File

@ -13,6 +13,7 @@
@import url("/css/base/gitea/chroma.css"); @import url("/css/base/gitea/chroma.css");
@import url("/css/base/gitea/monaco_vs_dark.css"); @import url("/css/base/gitea/monaco_vs_dark.css");
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
:root { :root {
--color-text: var(--text); --color-text: var(--text);
@ -119,7 +120,7 @@ a:hover,
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px !important; border-radius: 8px !important;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
box-shadow: none !important; box-shadow: none !important;
} }
@ -132,7 +133,7 @@ a:hover,
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px !important; border-radius: 8px !important;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -224,21 +225,21 @@ b:hover,
.following.bar.light.ui.secondary.menu .active.item, .following.bar.light.ui.secondary.menu .active.item,
.following.bar.lightui.secondary.menu .active.item:hover { .following.bar.lightui.secondary.menu .active.item:hover {
box-shadow: none; box-shadow: none;
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .dropdown.item:hover,
.ui.secondary.menu .link.item:hover, .ui.secondary.menu .link.item:hover,
.ui.secondary.menu a.item:hover { .ui.secondary.menu a.item:hover {
background: rgb(255 255 255 / 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
.ui.secondary.menu .active.item, .ui.secondary.menu .active.item,
.ui.secondary.menu .active.item:hover { .ui.secondary.menu .active.item:hover {
box-shadow: none; box-shadow: none;
background: rgba(0, 0, 0, .05); background: var(--transparency-dark-05);
color: var(--text-hover); color: var(--text-hover);
} }
@ -249,7 +250,7 @@ b:hover,
} }
.organization.settings .ui.menu { .organization.settings .ui.menu {
background: rgb(0 0 0 / 10%); background: var(--transparency-dark-10);
border: 1px solid rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
} }
@ -257,7 +258,7 @@ b:hover,
.organization.settings .ui.vertical.menu { .organization.settings .ui.vertical.menu {
display: block; display: block;
flex-direction: column; 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); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
} }
@ -270,7 +271,7 @@ b:hover,
} }
.ui.segment { .ui.segment {
background: rgb(0 0 0 / 15%) !important; background: var(--transparency-dark-15) !important;
} }
.ui.attached.segment, .ui.attached.segment,
@ -282,7 +283,7 @@ b:hover,
} }
.ui .info.segment.top { .ui .info.segment.top {
background-color: rgb(0 0 0 / 15%) !important; background-color: var(--transparency-dark-15) !important;
color: var(--text); color: var(--text);
} }
@ -292,17 +293,17 @@ b:hover,
} }
.ui.info.message { .ui.info.message {
background-color: rgb(0 0 0 / 15%); background-color: var(--transparency-dark-15);
color: #276f86; color: #276f86;
} }
.ui.attached.header { .ui.attached.header {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
} }
.explore .navbar { .explore .navbar {
background-color: rgb(0 0 0 / 25%) !important; background: var(--transparency-dark-25) !important;
} }
@ -317,7 +318,7 @@ b:hover,
} }
.ui.progress { .ui.progress {
background: rgb(255 255 255 / 10%); background: var(--transparency-light-10);
} }
.ui.progress[data-percent="0"] .bar .progress { .ui.progress[data-percent="0"] .bar .progress {
@ -330,11 +331,11 @@ b:hover,
} }
.pagination.menu { .pagination.menu {
background: rgba(255, 255, 255, .08) !important; background: var(--transparency-light-10) !important;
} }
.ui.pagination.menu .active.item { .ui.pagination.menu .active.item {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
box-shadow: none; box-shadow: none;
} }
@ -344,7 +345,7 @@ b:hover,
} }
.feeds .list ul li.private { .feeds .list ul li.private {
background-color: rgb(255 255 255 / 10%); background: var(--transparency-light-10);
} }
.ui.secondary.pointing.menu { .ui.secondary.pointing.menu {
@ -356,7 +357,7 @@ b:hover,
} }
.ui.repository.list .item:not(:first-child) { .ui.repository.list .item:not(:first-child) {
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
@ -441,7 +442,7 @@ b:hover,
/* SIGN IN NAV BAR*/ /* SIGN IN NAV BAR*/
.ui.menu.new-menu { .ui.menu.new-menu {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
.ui.menu.new-menu::after { .ui.menu.new-menu::after {
@ -492,13 +493,13 @@ b:hover,
} }
.ui.menu .ui.dropdown .menu>.active.item { .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; color: rgb(var(--accent-color)) !important;
} }
.ui.menu .ui.dropdown .menu>.item:hover, .ui.menu .ui.dropdown .menu>.item:hover,
.ui.menu .ui.dropdown .menu>.selected.item { .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; color: var(--text-hover) !important;
} }
@ -529,12 +530,12 @@ b:hover,
} }
.ui.dropdown .menu>.item: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 .menu .selected.item,
.ui.dropdown.selected { .ui.dropdown.selected {
background: rgb(0 0 0 / 0.25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -547,7 +548,7 @@ b:hover,
input:hover, input:hover,
textarea:hover { textarea:hover {
border-color: rgb(255 255 255 / 20%); border-color: rgb(255 255 255 / 20%);
background: rgb(0 0 0 / .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -564,14 +565,14 @@ textarea:hover {
} }
.ui.selection.dropdown { .ui.selection.dropdown {
background: rgb(0 0 0 / .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
border-color: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 10%);
} }
.ui.selection.dropdown:focus { .ui.selection.dropdown:focus {
border-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .08);
background: rgb(0 0 0 / 50%); background: var(--transparency-dark-50);
box-shadow: none; box-shadow: none;
} }
@ -640,7 +641,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
#app .ui.item.menu, #app .ui.item.menu,
.ui.item.menu .item { .ui.item.menu .item {
background: rgb(0 0 0 / 15%); background: var(--transparency-dark-15);
border-color: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 10%);
} }
@ -649,7 +650,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
} }
.ui.menu .active.item { .ui.menu .active.item {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
font-weight: 400; font-weight: 400;
box-shadow: none; box-shadow: none;
@ -657,25 +658,25 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
.ui.menu .active.item:hover, .ui.menu .active.item:hover,
.ui.vertical.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); color: var(--text-hover);
} }
.ui.menu a.item:hover { .ui.menu a.item:hover {
color: var(--text-hover); color: var(--text-hover);
background: rgb(0 0 0 / 15%); background: var(--transparency-dark-15);
} }
#app .ui.link.menu .item:hover, #app .ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover, .ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover { .ui.menu .link.item:hover {
cursor: pointer; cursor: pointer;
background: rgba(0, 0, 0, .03); background: var(--transparency-dark-05);
color: var(--text-hover); color: var(--text-hover);
} }
#app .ui.secondary.segment { #app .ui.secondary.segment {
background: rgb(0 0 0 / 15%); background: var(--transparency-dark-15);
color: rgba(0, 0, 0, .6); color: rgba(0, 0, 0, .6);
} }
@ -686,7 +687,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
} }
.heatmap-color-0 { .heatmap-color-0 {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.activity-bar-graph { .activity-bar-graph {
@ -716,7 +717,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
/* REPOSITORY */ /* REPOSITORY */
.repository .header-wrapper { .repository .header-wrapper {
background-color: rgb(0 0 0 / 24%); background: var(--transparency-dark-25);
} }
.repository .diff-detail-box { .repository .diff-detail-box {
@ -805,7 +806,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
.tag-code, .tag-code,
.tag-code td { .tag-code td {
background: rgba(255, 255, 255, .1) !important; background: var(--transparency-light-10) !important;
} }
.tag-code td.lines-num { .tag-code td.lines-num {
@ -814,11 +815,11 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
a.blob-excerpt { a.blob-excerpt {
color: var(--text); color: var(--text);
background: rgba(255, 255, 255, .1) !important; background: var(--transparency-light-10) !important;
} }
td.blob-excerpt { td.blob-excerpt {
background-color: rgba(0, 0, 0, .15); background: var(--transparency-dark-15);
} }
.repo-header .ui.breadcrumb a { .repo-header .ui.breadcrumb a {
@ -863,7 +864,7 @@ td.blob-excerpt {
.ui.card, .ui.card,
.ui.cards>.card { .ui.cards>.card {
background: rgb(0 0 0 / 15%); background: var(--transparency-dark-15);
box-shadow: none; box-shadow: none;
} }
@ -872,7 +873,7 @@ td.blob-excerpt {
.ui.link.cards .card:not(.icon):hover, .ui.link.cards .card:not(.icon):hover,
a.ui.card:hover { a.ui.card:hover {
border: 1px solid rgb(255 255 255 / 20%); border: 1px solid rgb(255 255 255 / 20%);
background: rgb(255 255 255 / 15%); background: var(--transparency-light-15);
} }
.repository .ui.menu { .repository .ui.menu {
@ -902,7 +903,7 @@ a.ui.card:hover {
margin-bottom: 10px; margin-bottom: 10px;
border: 1px solid rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .1);
border-radius: 3px; border-radius: 3px;
background: rgb(255 255 255 / 10%); background: var(--transparency-light-10);
} }
.repository.release #release-list { .repository.release #release-list {
@ -932,7 +933,7 @@ a.ui.card:hover {
/* WIKI */ /* WIKI */
.repository.wiki.pages .ui.ui.table td.grey:not(.marked), .repository.wiki.pages .ui.ui.table td.grey:not(.marked),
.repository.wiki.pages .ui.ui.ui.ui.table tr.grey:not(.marked) { .repository.wiki.pages .ui.ui.ui.ui.table tr.grey:not(.marked) {
background: rgb(255 255 255 / 0.08); background: var(--transparency-light-10);
; ;
} }
@ -959,11 +960,11 @@ a.ui.card:hover {
#git-graph-container #rev-list li.highlight, #git-graph-container #rev-list li.highlight,
#git-graph-container #rev-list li.hover { #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 { #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 { #git-graph-container li .author {
@ -1005,7 +1006,7 @@ a.ui.card:hover {
} }
.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { .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 { .repository #commits-table.ui.table>tbody {
@ -1020,7 +1021,7 @@ a.ui.card:hover {
.CodeMirror, .CodeMirror,
.EasyMDEContainer .CodeMirror { .EasyMDEContainer .CodeMirror {
border: 1px solid rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .1);
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.CodeMirror-focused { .CodeMirror-focused {
@ -1042,14 +1043,14 @@ a.ui.card:hover {
.editor-toolbar a:hover, .editor-toolbar a:hover,
.editor-toolbar button.active, .editor-toolbar button.active,
.editor-toolbar button:hover { .editor-toolbar button:hover {
background: rgb(255 255 255 / 25%); background: var(--transparency-light-25);
border-color: rgb(255 255 255 / 25%); border-color: var(--transparency-light-25);
} }
.dropzone { .dropzone {
min-height: 150px; min-height: 150px;
border: 2px solid rgba(0, 0, 0, .3); border: 2px solid rgba(0, 0, 0, .3);
background: rgb(255 255 255 / 25%) !important; background: var(--transparency-light-25) !important;
padding: 20px; padding: 20px;
} }
@ -1078,7 +1079,7 @@ a.ui.card:hover {
} }
.repository.view.issue .comment-list .comment .content>.header { .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 { .repository.view.issue .comment-list .comment .content>.header .actions a {
@ -1114,7 +1115,7 @@ a.ui.card:hover {
/* TABLE */ /* TABLE */
.ui.table>thead>tr>th { .ui.table>thead>tr>th {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
@ -1145,19 +1146,19 @@ w .ui.table>tr>td {
} }
.repository.file.list #repo-files-table tr:hover { .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.table tbody tr td.selectable:hover,
.ui.ui.selectable.table>tbody>tr:hover { .ui.ui.selectable.table>tbody>tr:hover {
background: rgb(255 255 255 / 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
/* FOOTER */ /* FOOTER */
footer { footer {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
/* BUTTONS / CHECKBOXES */ /* BUTTONS / CHECKBOXES */
@ -1172,7 +1173,7 @@ footer {
} }
.ui.toggle.checkbox input:checked~label:before { .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, .ui.toggle.checkbox input:checked~label,
@ -1182,8 +1183,8 @@ footer {
.ui.toggle.checkbox label:before, .ui.toggle.checkbox label:before,
.ui.toggle.checkbox input:focus:checked~label:before { .ui.toggle.checkbox input:focus:checked~label:before {
background: rgb(255 255 255 / 10%) !important; background: var(--transparency-light-10) !important;
background-color: rgb(255 255 255 / 10%) !important; background: var(--transparency-light-10) !important;
} }
.ui.toggle.checkbox input:focus:checked~label, .ui.toggle.checkbox input:focus:checked~label,
@ -1319,7 +1320,7 @@ footer {
.ui.basic.buttons .button:focus, .ui.basic.buttons .button:focus,
.ui.basic.buttons .button:hover { .ui.basic.buttons .button:hover {
background: rgb(0 0 0 / 15%); background: var(--transparency-dark-15);
color: var(--button-text); color: var(--button-text);
} }
@ -1416,7 +1417,7 @@ a.ui.labels .label:hover {
.repository #commits-table td.sha .sha.label .detail.icon, .repository #commits-table td.sha .sha.label .detail.icon,
.repository #repo-files-table .sha.label .detail.icon, .repository #repo-files-table .sha.label .detail.icon,
.repository .timeline-item.commits-list .singular-commit .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; margin: -6px -10px -4px 0;
padding: 5px 4px 5px 6px; padding: 5px 4px 5px 6px;
border: 0; border: 0;
@ -1448,7 +1449,7 @@ input {
.ui.form input[type=time], .ui.form input[type=time],
.ui.form input[type=url], .ui.form input[type=url],
.ui.form input { .ui.form input {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
color: var(--text); color: var(--text);
border-radius: .28571429rem; border-radius: .28571429rem;
@ -1472,7 +1473,7 @@ input {
color: var(--text); color: var(--text);
border-color: rgb(0 0 0 / 15%); border-color: rgb(0 0 0 / 15%);
border-radius: .28571429rem; 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); box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35);
caret-color: var(--text) !important; caret-color: var(--text) !important;
} }
@ -1481,7 +1482,7 @@ input {
.ui.form textarea:focus:hover, .ui.form textarea:focus:hover,
input:focus:hover, input:focus:hover,
textarea: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; border-color: rgb(255 255 255 / .1) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -1490,7 +1491,7 @@ textarea:focus:hover {
.ui.form textarea:hover, .ui.form textarea:hover,
input:hover, input:hover,
textarea:hover { textarea:hover {
background: rgb(0 0 0 / 25%) !important; background: var(--transparency-dark-25) !important;
border-color: rgb(255 255 255 / .1) !important; border-color: rgb(255 255 255 / .1) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -1498,7 +1499,7 @@ textarea:hover {
.ui.form textarea:focus { .ui.form textarea:focus {
color: var(--text); color: var(--text);
border-color: transparent; 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); box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35);
-webkit-appearance: none; -webkit-appearance: none;
caret-color: var(--text) !important; caret-color: var(--text) !important;
@ -1506,7 +1507,7 @@ textarea:hover {
.ui.form textarea, .ui.form textarea,
.ui.input textarea { .ui.input textarea {
background: rgb(0 0 0 / .25); background: var(--transparency-dark-25);
border: 1px solid rgba(34, 36, 38, .15); border: 1px solid rgba(34, 36, 38, .15);
color: var(--text); color: var(--text);
caret-color: var(--text) !important; caret-color: var(--text) !important;
@ -1516,14 +1517,14 @@ textarea:hover {
.ui.input.focus>input, .ui.input.focus>input,
.ui.input>input:focus { .ui.input>input:focus {
border-color: transparent; border-color: transparent;
background: rgb(0 0 0 / 50%); background: var(--transparency-dark-50);
color: var(--text); color: var(--text);
box-shadow: none; box-shadow: none;
caret-color: var(--text) !important; caret-color: var(--text) !important;
} }
.ui.input>input { .ui.input>input {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border: 1px solid rgba(34, 36, 38, .15); border: 1px solid rgba(34, 36, 38, .15);
color: var(--text); color: var(--text);
} }
@ -1542,17 +1543,17 @@ textarea:hover {
} }
.markdown:not(code) table tr { .markdown:not(code) table tr {
background-color: rgba(0, 0, 0, .26); background: var(--transparency-dark-25);
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }
.markdown:not(code) table tr:nth-child(2n) { .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) code,
.markdown:not(code) tt { .markdown:not(code) tt {
background-color: rgb(0 0 0 / 0.25); background: var(--transparency-dark-25);
} }
/* HIGHLIGHTING */ /* HIGHLIGHTING */

View File

@ -10,6 +10,8 @@
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/transparent.css");
body { body {
color: var(--text) !important; color: var(--text) !important;
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
@ -57,7 +59,7 @@ p {
.page-header-canvas, .page-header-canvas,
.page-toolbar[class*="css-"] { .page-toolbar[class*="css-"] {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
box-shadow: none !important; box-shadow: none !important;
border-bottom: none !important; border-bottom: none !important;
} }
@ -88,7 +90,7 @@ p {
} }
.variable-value-dropdown.single .selected { .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 { .css-0.gf-form-select-box__menu {
@ -109,28 +111,28 @@ p {
.time-picker-calendar .react-calendar__navigation, .time-picker-calendar .react-calendar__navigation,
.time-picker-calendar .react-calendar__navigation__arrow, .time-picker-calendar .react-calendar__navigation__arrow,
.time-picker-calendar .react-calendar__navigation__label { .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 { .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,
.time-picker-calendar .react-calendar__tile--active:hover { .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); border: 1px solid rgba(0, 0, 0, 0);
} }
.time-picker-calendar .time-picker-calendar-tile:hover { .time-picker-calendar .time-picker-calendar-tile:hover {
-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.08); -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.08);
box-shadow: 0 0 4px #ffffff00; 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); border: 1px solid rgba(255, 255, 255, 0.08);
} }
.time-picker-calendar .react-calendar__month-view__days { .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 { .time-picker-calendar .time-picker-calendar-tile {
@ -161,11 +163,11 @@ p {
/* Configuration menu */ /* Configuration menu */
.card-item { .card-item {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.card-item:hover { .card-item:hover {
background: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
.card-item-sub-name, .card-item-sub-name,
@ -180,53 +182,53 @@ p {
.gf-tabs-link.active, .gf-tabs-link.active,
.gf-tabs-link.active:focus, .gf-tabs-link.active:focus,
.gf-tabs-link.active:hover { .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) { .filter-table tbody tr:nth-child(odd) {
background: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
.cta-form { .cta-form {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.empty-list-cta { .empty-list-cta {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.layout-selector button { .layout-selector button {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
.layout-selector button.active { .layout-selector button.active {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
color: var(--text-hover); color: var(--text-hover);
} }
/* Configuration menu - Teams */ /* Configuration menu - Teams */
.css-1ph0cdx-call-to-action-card { .css-1ph0cdx-call-to-action-card {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.grafana-info-box { .grafana-info-box {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
/* sidemenu */ /* sidemenu */
.sidemenu-open, .sidemenu-open,
.sidemenu { .sidemenu {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.sidemenu__logo:hover { .sidemenu__logo:hover {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.sidemenu-item.active, .sidemenu-item.active,
.sidemenu-item:hover { .sidemenu-item:hover {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
border-image: none; border-image: none;
border-color: rgb(var(--accent-color)); border-color: rgb(var(--accent-color));
@ -279,7 +281,7 @@ p {
.dropdown-menu--menu>li>a:hover, .dropdown-menu--menu>li>a:hover,
.dropdown-menu--navbar>li>a:hover, .dropdown-menu--navbar>li>a:hover,
.dropdown-menu--sidemenu>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; color: var(--text-hover) !important;
} }
@ -296,7 +298,7 @@ p {
} }
.dropdown-submenu:hover>a { .dropdown-submenu:hover>a {
Background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.icon-circle:hover .fa:hover, .icon-circle:hover .fa:hover,
@ -356,21 +358,21 @@ p {
/* Dashboard row */ /* Dashboard row */
.dashboard-row--collapsed { .dashboard-row--collapsed {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.search-section { .search-section {
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
border: none; border: none;
} }
.search-item { .search-item {
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15)
} }
.search-item.selected, .search-item.selected,
.search-item:hover { .search-item:hover {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.search-section__header { .search-section__header {
@ -393,7 +395,7 @@ p {
/* Dashboard settings menu */ /* Dashboard settings menu */
.dashboard-settings__aside { .dashboard-settings__aside {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.dashboard-page--settings-open .navbar { .dashboard-page--settings-open .navbar {
@ -421,15 +423,15 @@ p {
} }
.gf-form-select-wrapper { .gf-form-select-wrapper {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
.dashboard-settings__nav-item.active { .dashboard-settings__nav-item.active {
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.gf-form-checkbox { .gf-form-checkbox {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: none; border: none;
} }
@ -468,7 +470,7 @@ p {
/* Variable label box */ /* Variable label box */
.gf-form-label { .gf-form-label {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
border: none !important; border: none !important;
} }
@ -477,7 +479,7 @@ p {
} }
.gf-form-label--btn:hover { .gf-form-label--btn:hover {
background: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
} }
.variable-option.highlighted, .variable-option.highlighted,
@ -488,7 +490,7 @@ p {
/* Variable dashboard dropdown */ /* Variable dashboard dropdown */
.variable-value-link { .variable-value-link {
padding: 7.4px 10px !important; padding: 7.4px 10px !important;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
border: none !important; border: none !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -521,7 +523,7 @@ p {
/* NAVBAR BUTTONS */ /* NAVBAR BUTTONS */
.navbar-button { .navbar-button {
color: var(--text-hover) !important; 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; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) !important;
border: none !important; border: none !important;
} }
@ -533,7 +535,7 @@ p {
/* PANEL BACKGROUND COLOR*/ /* PANEL BACKGROUND COLOR*/
.panel-container { .panel-container {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: transparent; border: transparent;
box-shadow: none !important; box-shadow: none !important;
} }
@ -545,7 +547,7 @@ p {
} }
.panel-header:hover { .panel-header:hover {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.panel-title-text:hover { .panel-title-text:hover {
@ -577,7 +579,7 @@ div.flot-text {
/* table panel background color */ /* table panel background color */
.table-panel-container { .table-panel-container {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
/* table panel border size */ /* table panel border size */
@ -588,7 +590,7 @@ div.flot-text {
} }
.table-panel-header-bg { .table-panel-header-bg {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-top: 2px solid transparent; border-top: 2px solid transparent;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
@ -596,7 +598,7 @@ div.flot-text {
/* Panel tables */ /* Panel tables */
.css-58bavm-thead { .css-58bavm-thead {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.css-sq6g4h-row { .css-sq6g4h-row {
@ -608,15 +610,15 @@ div.flot-text {
} }
.css-2n373z { .css-2n373z {
border-right: 1px solid rgb(255 255 255 / 25%); border-right: 1px solid var(--transparency-light-25);
} }
.css-sq6g4h-row:hover { .css-sq6g4h-row:hover {
background-color: rgb(255 255 255 / 0.08); background-color: var(--transparency-light-10);
} }
.css-3o5ryu { .css-3o5ryu {
background: rgb(0 0 0 / 45%); background: var(--transparency-dark-45);
} }
.css-1n8kpcb-activeTabStyle, .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-"], #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-v2fjpc,
.css-ld7ft6 { .css-ld7ft6 {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.tabbed-view-header { .tabbed-view-header {
box-shadow: none; box-shadow: none;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-bottom: none; border-bottom: none;
} }
@ -654,28 +656,28 @@ div>.scrollbar-view>div>[class*="css-"],
/* panel query settings */ /* panel query settings */
.panel-editor__right, .panel-editor__right,
.toolbar { .toolbar {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.query-editor-row__header { .query-editor-row__header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.query-editor-row__body { .query-editor-row__body {
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
.panel-options-group { .panel-options-group {
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
.gf-form-switch { .gf-form-switch {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: transparent; border: transparent;
} }
.viz-picker__item { .viz-picker__item {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: transparent; border: transparent;
} }
@ -687,12 +689,12 @@ div>.scrollbar-view>div>[class*="css-"],
.viz-picker__item:hover { .viz-picker__item:hover {
box-shadow: 0 0 6px #eb7b18 !important; box-shadow: 0 0 6px #eb7b18 !important;
background: rgba(0, 0, 0, 0.4); background: var(--transparency-dark-40);
border: 1px solid #eb7b18 !important; border: 1px solid #eb7b18 !important;
} }
.panel-options-group__header { .panel-options-group__header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.custom-scrollbar .thumb-vertical, .custom-scrollbar .thumb-vertical,
@ -706,7 +708,7 @@ div>.scrollbar-view>div>[class*="css-"],
.toolbar__main { .toolbar__main {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
border: transparent; border: transparent;
} }
@ -743,15 +745,15 @@ border-color: #b56d16 !important;
}*/ }*/
.btn-inverse { .btn-inverse {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
-webkit-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 hsla(0, 0%, 0%, 0.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-primary,
.btn-success { .btn-success {
-webkit-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 hsla(0, 0%, 0%, 0.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, .btn-inverse.active,
@ -760,7 +762,7 @@ border-color: #b56d16 !important;
.btn-inverse:focus, .btn-inverse:focus,
.btn-inverse:hover, .btn-inverse:hover,
.btn-inverse[disabled] { .btn-inverse[disabled] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* New Dashboard */ /* New Dashboard */
@ -775,7 +777,7 @@ border-color: #b56d16 !important;
} }
.add-panel__header { .add-panel__header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
box-shadow: none; box-shadow: none;
border-bottom: 0px; border-bottom: 0px;
} }
@ -786,13 +788,13 @@ border-color: #b56d16 !important;
} }
.query-type-toggle .btn.active { .query-type-toggle .btn.active {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
border: none; border: none;
border-radius: 3px; border-radius: 3px;
} }
.toggle-button-group .btn { .toggle-button-group .btn {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
background-image: none; background-image: none;
border-color: #00000000; border-color: #00000000;
border-radius: 3px !important; border-radius: 3px !important;
@ -800,7 +802,7 @@ border-color: #b56d16 !important;
} }
.toggle-button-group .btn:hover { .toggle-button-group .btn:hover {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
.logs-panel-options { .logs-panel-options {
@ -810,7 +812,7 @@ border-color: #b56d16 !important;
/* JSON Model */ /* JSON Model */
.gf-code-dark { .gf-code-dark {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: #e0e0e0; color: #e0e0e0;
} }
@ -929,7 +931,7 @@ input:focus {
} }
.css-1bjepp-input-input { .css-1bjepp-input-input {
background-color: hsla(0, 0%, 100%, .25); background: var(--transparency-dark-25);
border-radius: 3px; border-radius: 3px;
border-color: transparent; border-color: transparent;
-webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important; -webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
@ -956,7 +958,7 @@ input:focus {
/*Disabled input*/ /*Disabled input*/
.css-1bjepp-input-input:disabled { .css-1bjepp-input-input:disabled {
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
color: rgb(159, 167, 179); 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 { .css-y0yg3l {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
border-color: transparent; border-color: transparent;
} }
@ -1024,18 +1026,18 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
/*Folder bars*/ /*Folder bars*/
.css-1umfglk { .css-1umfglk {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.css-1umfglk:hover { .css-1umfglk:hover {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35)
} }
/* Login Error message*/ /* Login Error message*/
.css-1ow9mne-input-input { .css-1ow9mne-input-input {
line-height: 1.5; line-height: 1.5;
height: 38px; height: 38px;
background-color: hsla(0, 0%, 100%, .25); background: var(--transparency-dark-25);
border-radius: 3px; border-radius: 3px;
border-color: transparent; border-color: transparent;
-webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important; -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*/ /*Welcome to Grafana*/
.css-15xxblz, .css-15xxblz,
.css-1ld19yb { .css-1ld19yb {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.css-1as70ku, .css-1as70ku,
.css-u5zjuh { .css-u5zjuh {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.css-17abkeq, .css-17abkeq,
@ -1088,7 +1090,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
.css-10pj50r, .css-10pj50r,
.css-15rfc12 { .css-15rfc12 {
background: rgb(0 0 0 / 50%); background: var(--transparency-dark-50);
} }
/*Header*/ /*Header*/
@ -1115,7 +1117,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
/*Query box*/ /*Query box*/
.css-hz0utb { .css-hz0utb {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
border-right: 1px solid rgba(0, 0, 0, 0); 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 { .css-lvafs5 {
background: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
} }
.css-ui3sz4-activeTabStyle { .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-width: 0px 1px 1px;
border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;
border-color: transparent !important; border-color: transparent !important;
background: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
overflow: hidden; overflow: hidden;
} }
.css-1awj6q7-counter { .css-1awj6q7-counter {
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
} }
/*Transform tab*/ /*Transform tab*/
.css-y2f54e { .css-y2f54e {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.css-y2f54e:hover { .css-y2f54e:hover {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
} }
.css-1e8invk::before { .css-1e8invk::before {
background: rgba(0, 0, 0, .35) !important; background: var(--transparency-dark-35) !important;
} }
/* Right side menu*/ /* Right side menu*/
.css-1xj5tuf { .css-1xj5tuf {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
border-left: 1px solid transparent; 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*/ /*Visualization*/
.css-1lemfi9 { .css-1lemfi9 {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-color: transparent; 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-style: solid;
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
border-image: initial; border-image: initial;
background: rgba(255, 255, 255, .08) background: var(--transparency-light-10)
} }
input:checked+.gf-form-switch__slider { input:checked+.gf-form-switch__slider {
@ -1258,7 +1260,7 @@ input:checked+.gf-form-switch__slider {
/*SETTINGS*/ /*SETTINGS*/
/*Teams*/ /*Teams*/
.css-1w9m9al-call-to-action-card { .css-1w9m9al-call-to-action-card {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
/*DASHBOARD SETINGS*/ /*DASHBOARD SETINGS*/
@ -1275,14 +1277,14 @@ input:checked+.gf-form-switch__slider {
} }
.navbar--edit { .navbar--edit {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
-webkit-box-shadow: 0 0 10px transparent; -webkit-box-shadow: 0 0 10px transparent;
box-shadow: 0 0 10px transparent; box-shadow: 0 0 10px transparent;
} }
.grafana-info-box { .grafana-info-box {
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
border-top: 3px solid rgb(var(--accent-color)); border-top: 3px solid rgb(var(--accent-color));
} }

View File

@ -34,13 +34,13 @@ div.flot-text {
/* sidemenu */ /* sidemenu */
.sidemenu-open .sidemenu { .sidemenu-open .sidemenu {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.sidemenu__logo:hover { .sidemenu__logo:hover {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.sidemenu-item.active, .sidemenu-item:hover { .sidemenu-item.active, .sidemenu-item:hover {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.sidemenu .sidemenu__logo_small_breakpoint { .sidemenu .sidemenu__logo_small_breakpoint {
@ -71,15 +71,15 @@ div.flot-text {
} }
.search-field-wrapper>input { .search-field-wrapper>input {
height: 55px !important; height: 55px !important;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.search-field-icon { .search-field-icon {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
/* Dashboard settings menu */ /* Dashboard settings menu */
.dashboard-settings__aside { .dashboard-settings__aside {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.dashboard-page--settings-open .navbar { .dashboard-page--settings-open .navbar {
background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)) !important; 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*/ /*Datasources Menu*/
.add-data-source-item { .add-data-source-item {
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.add-data-source-item:hover { .add-data-source-item:hover {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
border: 1px solid #00000000; border: 1px solid #00000000;
color: var(--text-hover); color: var(--text-hover);
} }
@ -121,7 +121,7 @@ div.flot-text {
/* Variable label box */ /* Variable label box */
.gf-form-label { .gf-form-label {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
border: none !important; border: none !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -138,7 +138,7 @@ div.flot-text {
/* Variable dashboard dropdown */ /* Variable dashboard dropdown */
.variable-value-link { .variable-value-link {
padding: 7.4px 10px !important; padding: 7.4px 10px !important;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
border: none !important; border: none !important;
color: #FFFFFF !important; color: #FFFFFF !important;
} }
@ -146,7 +146,7 @@ div.flot-text {
/* Variable input box */ /* Variable input box */
.gf-form-input { .gf-form-input {
color: #FFFFFF !important; color: #FFFFFF !important;
background-color: rgba(255, 255, 255, 0.15) !important; background: var(--transparency-light-15) !important;
border: 0px solid #262628 !important; border: 0px solid #262628 !important;
} }
@ -154,7 +154,7 @@ div.flot-text {
/* NAVBAR BUTTONS */ /* NAVBAR BUTTONS */
.navbar-button { .navbar-button {
color: var(--text-hover) !important; 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; background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important;
border: none !important; border: none !important;
} }
@ -166,7 +166,7 @@ div.flot-text {
/* PANEL BACKGROUND COLOR*/ /* PANEL BACKGROUND COLOR*/
.panel-container { .panel-container {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: transparent; border: transparent;
box-shadow: none !important; box-shadow: none !important;
} }
@ -175,7 +175,7 @@ background-color: transparent;
border: transparent; border: transparent;
} }
.panel-header:hover { .panel-header:hover {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.panel-loading { .panel-loading {
color: transparent; color: transparent;
@ -204,7 +204,7 @@ div.flot-text {
/* table panel background color */ /* table panel background color */
.table-panel-container { .table-panel-container {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
/* table panel border size */ /* table panel border size */
.table-panel-table td { .table-panel-table td {
@ -215,7 +215,7 @@ div.flot-text {
/* Edit panel tabs */ /* Edit panel tabs */
.tabbed-view-header { .tabbed-view-header {
box-shadow: none; box-shadow: none;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-bottom: none; border-bottom: none;
} }
.tabbed-view-panel-title { .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)); background: linear-gradient(135deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25));
} }
.add-panel__header { .add-panel__header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
box-shadow: none; box-shadow: none;
border-bottom: 0px; border-bottom: 0px;
} }
@ -351,7 +351,7 @@ box-shadow: none !important;
} }
/*Disabled input*/ /*Disabled input*/
.css-1bjepp-input-input:disabled { .css-1bjepp-input-input:disabled {
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
color: rgb(159, 167, 179); color: rgb(159, 167, 179);
} }
.css-1bjepp-input-input:hover {border-color: transparent;} .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 { .css-1m6pigl:checked + label {
color: var(--accent-color) !important; color: var(--accent-color) !important;
border-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1);
background: rgba(0, 0, 0, .5); background: var(--transparency-dark-50)
} }
.css-b40tk8:focus + label { .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; 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; border-color: transparent;
} }
.css-y0yg3l { .css-y0yg3l {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
border-color: transparent; border-color: transparent;
} }
@ -394,10 +394,10 @@ border-bottom: 1px solid rgba(0, 0, 0, 0);
/*Folder bars*/ /*Folder bars*/
.css-1umfglk { .css-1umfglk {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.css-1umfglk:hover { .css-1umfglk:hover {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35)
} }
/* Login Error message*/ /* Login Error message*/
@ -424,10 +424,10 @@ margin: 10px 0px 0px;
} }
/*Welcome to Grafana*/ /*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 { .css-1as70ku, .css-u5zjuh {
background: rgba(0, 0, 0, .25);} background: var(--transparency-dark-25)}
.css-17abkeq, .css-5ak73y { .css-17abkeq, .css-5ak73y {
color: var(--text-hover); color: var(--text-hover);
} }
@ -454,7 +454,7 @@ background: var(--main-bg-color);
} }
/*Query box*/ /*Query box*/
.css-hz0utb { .css-hz0utb {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
border-right: 1px solid rgba(0, 0, 0, 0); border-right: 1px solid rgba(0, 0, 0, 0);
} }
.query-keyword, .css-wvxxxy, .css-fpnw35 { .query-keyword, .css-wvxxxy, .css-fpnw35 {
@ -462,7 +462,7 @@ border-right: 1px solid rgba(0, 0, 0, 0);
color: var(--accent-color); color: var(--accent-color);
} }
.css-lvafs5 { .css-lvafs5 {
background: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
} }
.css-ui3sz4-activeTabStyle { .css-ui3sz4-activeTabStyle {
@ -478,19 +478,19 @@ border-image: initial;
border-width: 0px 1px 1px; border-width: 0px 1px 1px;
border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;
border-color: transparent !important; border-color: transparent !important;
background: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
overflow: hidden; overflow: hidden;
} }
.css-1awj6q7-counter { .css-1awj6q7-counter {
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
} }
/*Transform tab*/ /*Transform tab*/
.css-y2f54e { .css-y2f54e {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.css-y2f54e:hover { .css-y2f54e:hover {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
} }
.css-1e8invk::before { .css-1e8invk::before {
background:rgba(0, 0, 0, .35) !important; background:rgba(0, 0, 0, .35) !important;
@ -498,7 +498,7 @@ background:rgba(0, 0, 0, .35) !important;
/* Right side menu*/ /* Right side menu*/
.css-1xj5tuf { .css-1xj5tuf {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
border-left: 1px solid transparent; border-left: 1px solid transparent;
} }
/*Dropdown bottom borders*/ /*Dropdown bottom borders*/
@ -517,7 +517,7 @@ background: var(--accent-color);
} }
/*Visualization*/ /*Visualization*/
.css-1lemfi9 { .css-1lemfi9 {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-color: transparent; border-color: transparent;
} }
.css-1fsv7gr:hover > div:first-child { .css-1fsv7gr:hover > div:first-child {
@ -548,7 +548,7 @@ height: 100%;
border-style: solid; border-style: solid;
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
border-image: initial; border-image: initial;
background: rgba(255, 255, 255, .08) background: var(--transparency-light-10)
} }
input:checked+.gf-form-switch__slider { input:checked+.gf-form-switch__slider {
background: var(--accent-color); background: var(--accent-color);
@ -568,7 +568,7 @@ border-color: rgba(255, 255, 255, .09);
/*SETTINGS*/ /*SETTINGS*/
/*Teams*/ /*Teams*/
.css-1w9m9al-call-to-action-card { .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); background: var(--main-bg-color);
} }
.navbar--edit { .navbar--edit {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
-webkit-box-shadow: 0 0 10px transparent; -webkit-box-shadow: 0 0 10px transparent;
box-shadow: 0 0 10px transparent; box-shadow: 0 0 10px transparent;
} }
.grafana-info-box { .grafana-info-box {
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
border-top: 3px solid var(--accent-color); border-top: 3px solid var(--accent-color);
} }
/* Variables*/ /* Variables*/

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none !important; outline: none !important;
@ -78,7 +79,7 @@ div.displayMiddle {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -90,7 +91,7 @@ div.displayMiddle {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -100,7 +101,7 @@ div.login-ui {
} }
.login-ui div.login-dialog { .login-ui div.login-dialog {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: none; border: none;
} }
@ -121,22 +122,22 @@ a.button:hover {
} }
.login-ui .login-fields .labeled-field input:focus { .login-ui .login-fields .labeled-field input:focus {
background: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
outline: none; outline: none;
} }
.login-ui .login-fields .labeled-field.empty input { .login-ui .login-fields .labeled-field.empty input {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
outline: none; outline: none;
} }
.login-ui .login-fields .labeled-field.empty input:focus { .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; outline: none;
} }
.login-ui .login-dialog .login-fields input { .login-ui .login-dialog .login-fields input {
background-color: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
} }
div.location, div.location,
@ -146,7 +147,7 @@ input[type=number],
input[type=password], input[type=password],
textarea { textarea {
color: var(--text-hover) !important; color: var(--text-hover) !important;
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
input[type=checkbox], input[type=checkbox],
@ -162,7 +163,7 @@ textarea {
/* HOME MENU */ /* HOME MENU */
.header h2 { .header h2 {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.connection .icon.vnc, .connection .icon.vnc,
@ -246,17 +247,17 @@ table.sorted td {
} }
.settings table.session-list tr.session:hover { .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,
.menu-dropdown.open:hover { .menu-dropdown.open:hover {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.menu-dropdown { .menu-dropdown {
border-left: none; border-left: none;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.menu-dropdown .menu-contents li a { .menu-dropdown .menu-contents li a {
@ -269,17 +270,17 @@ table.sorted td {
.menu-dropdown .menu-contents li a.current, .menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover { .menu-dropdown .menu-contents li a.current:hover {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover) color: var(--text-hover)
} }
.menu-dropdown .menu-contents li a:hover { .menu-dropdown .menu-contents li a:hover {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
.menu-dropdown:hover { .menu-dropdown:hover {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -300,7 +301,7 @@ table.sorted td {
} }
.header .filter { .header .filter {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.filter .search-string { .filter .search-string {
@ -312,7 +313,7 @@ table.sorted td {
padding-left: 2.25em !important; padding-left: 2.25em !important;
width: 100%; width: 100%;
max-width: none; max-width: none;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 0; border: 0;
} }
@ -334,12 +335,12 @@ textarea {
} }
.recent-connections .connection:hover { .recent-connections .connection:hover {
background: hsla(0, 0%, 100%, 0.08); background: var(--transparency-dark-10);
color: var(--link-color-hover); color: var(--link-color-hover);
} }
.list-item:not(.selected) .caption:hover { .list-item:not(.selected) .caption:hover {
background: hsla(0, 0%, 100%, 0.07); background: var(--transparency-dark-10);
color: var(--link-color-hover); color: var(--link-color-hover);
} }
@ -380,7 +381,7 @@ textarea {
.clipboard, .clipboard,
.clipboard-service-target { .clipboard-service-target {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -419,7 +420,7 @@ textarea {
} }
.page-tabs .page-list li a[href]:hover { .page-tabs .page-list li a[href]:hover {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.user a:visited, .user a:visited,
@ -452,7 +453,7 @@ input[type=number],
input[type=password], input[type=password],
textarea { textarea {
border: 0; border: 0;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.location-chooser .dropdown { .location-chooser .dropdown {
@ -469,14 +470,14 @@ textarea {
.page-tabs .page-list li a[href].current:hover, .page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current, .section-tabs li a.current,
.section-tabs li a.current:hover { .section-tabs li a.current:hover {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
cursor: default; cursor: default;
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
} }
.page-tabs .page-list li a[href]:hover, .page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover { .section-tabs li a:hover {
background-color: hsla(0, 0%, 100%, 0.07); background: var(--transparency-dark-10);
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -489,7 +490,7 @@ textarea {
} }
.manage-user .notice.read-only { .manage-user .notice.read-only {
background: hsla(0, 0%, 100%, 0.07); background: var(--transparency-dark-10);
} }
/* DUA 2FA PAGE */ /* DUA 2FA PAGE */

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none !important; outline: none !important;
@ -73,7 +74,7 @@ hr {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -85,7 +86,7 @@ hr {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -104,7 +105,7 @@ hr {
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
color: var(--text-hover) !important; color: var(--text-hover) !important;
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
@ -122,7 +123,7 @@ hr {
.dataTables_wrapper .dataTables_paginate .paginate_button { .dataTables_wrapper .dataTables_paginate .paginate_button {
color: var(--button-text) !important; color: var(--button-text) !important;
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
@ -143,7 +144,7 @@ a:hover {
} }
.dataTables_wrapper .dataTables_filter input { .dataTables_wrapper .dataTables_filter input {
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
border: none; border: none;
outline: none; outline: none;
color: var(--text-hover); color: var(--text-hover);
@ -168,14 +169,14 @@ table.dataTable.cell-border tbody td {
button, button,
input, input,
textarea { textarea {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: none; border: none;
outline: none; outline: none;
} }
#page { #page {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
table.dataTable.stripe tbody tr.odd, table.dataTable.stripe tbody tr.odd,
@ -185,7 +186,7 @@ table.dataTable.display tbody tr.odd {
table.dataTable.hover tbody tr:hover, table.dataTable.hover tbody tr:hover,
table.dataTable.display 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 { table.dataTable tbody tr {
@ -204,13 +205,13 @@ table.dataTable thead td {
.form-control { .form-control {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid #ccc0; border: 1px solid #ccc0;
} }
select { select {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text) !important; color: var(--text) !important;
border: 1px solid rgba(0, 0, 0, 0) !important; border: 1px solid rgba(0, 0, 0, 0) !important;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
@ -237,13 +238,13 @@ select:focus {
.form-control[disabled], .form-control[disabled],
.form-control[readonly], .form-control[readonly],
fieldset[disabled] .form-control { fieldset[disabled] .form-control {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.dataTables_length select, .dataTables_length select,
.dataTables_filter input, .dataTables_filter input,
.dataTable.compact tfoot td select { .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); border: 1px solid rgba(204, 204, 204, 0);
} }
@ -304,7 +305,7 @@ fieldset[disabled] .form-control {
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover { .dropdown-menu>li>a:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.dropdown-menu>.active>a, .dropdown-menu>.active>a,
@ -312,7 +313,7 @@ fieldset[disabled] .form-control {
.dropdown-menu>.active>a:hover { .dropdown-menu>.active>a:hover {
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
outline: 0; outline: 0;
} }
@ -378,7 +379,7 @@ fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:hover { 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); border-color: hsla(0, 0%, 100%, 0.35);
} }
@ -406,7 +407,7 @@ fieldset[disabled] .btn-primary:hover {
.input-group-addon { .input-group-addon {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid #0000; border: 1px solid #0000;
} }

View File

@ -1,4 +1,5 @@
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
:root { :root {
--theme-primary-color: var(--accent-color); --theme-primary-color: var(--accent-color);
@ -11,15 +12,15 @@
--theme-background: var(--main-bg-color); --theme-background: var(--main-bg-color);
--header-blur-background: rgba(20, 20, 20, 0.66); --header-blur-background: rgba(20, 20, 20, 0.66);
--drawer-background: #2C2C2E; --drawer-background: #2C2C2E;
--docked-drawer-background: rgba(0, 0, 0, 0.25); --docked-drawer-background: var(--transparency-dark-25);
--button-background: var(--button-color); --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-background: var(--modal-footer-color);
--footer-blur-background: rgba(29, 29, 31, 0.66); --footer-blur-background: rgba(29, 29, 31, 0.66);
--header-background: var(--theme-background); --header-background: var(--theme-background);
--theme-body-secondary-text-color: rgba(255, 255, 255, .6); --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; --line-size: .08em;
--scrollbar-thumb-background: rgba(255, 255, 255, .3); --scrollbar-thumb-background: rgba(255, 255, 255, .3);
} }
@ -29,9 +30,9 @@
--theme-background: var(--main-bg-color); --theme-background: var(--main-bg-color);
--header-blur-background: rgba(20, 20, 20, 0.66); --header-blur-background: rgba(20, 20, 20, 0.66);
--drawer-background: #2C2C2E; --drawer-background: #2C2C2E;
--docked-drawer-background: rgba(0, 0, 0, 0.25); --docked-drawer-background: var(--transparency-dark-25);
--button-background: #1f1f1f; --button-background: #1f1f1f;
--card-background: rgba(0, 0, 0, 0.15); --card-background: var(--transparency-dark-15);
--footer-background: var(--modal-footer-color); --footer-background: var(--modal-footer-color);
--footer-blur-background: rgba(29, 29, 31, 0.66); --footer-blur-background: rgba(29, 29, 31, 0.66);
} }
@ -41,9 +42,9 @@
--theme-background: var(--main-bg-color); --theme-background: var(--main-bg-color);
--header-blur-background: rgba(20, 20, 20, 0.66); --header-blur-background: rgba(20, 20, 20, 0.66);
--drawer-background: #2C2C2E; --drawer-background: #2C2C2E;
--docked-drawer-background: rgba(0, 0, 0, 0.25); --docked-drawer-background: var(--transparency-dark-25);
--button-background: #1f1f1f; --button-background: #1f1f1f;
--card-background: rgba(0, 0, 0, 0.15); --card-background: var(--transparency-dark-15);
--footer-background: var(--modal-footer-color); --footer-background: var(--modal-footer-color);
--footer-blur-background: rgba(29, 29, 31, 0.66); --footer-blur-background: rgba(29, 29, 31, 0.66);
} }
@ -173,7 +174,7 @@ html {
} }
.backgroundContainer.withBackdrop { .backgroundContainer.withBackdrop {
background-color: rgba(0, 0, 0, .83) background: var(--transparency-dark-80)
} }
@media not all and (min-width: 50em) { @media not all and (min-width: 50em) {
@ -215,7 +216,7 @@ html {
.emby-select-withcolor { .emby-select-withcolor {
color: inherit; color: inherit;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: var(--line-size) solid transparent border: var(--line-size) solid transparent
} }
@ -341,7 +342,7 @@ html {
@media(hover: hover) and (pointer:fine) { @media(hover: hover) and (pointer:fine) {
.actionSheetMenuItem:hover { .actionSheetMenuItem:hover {
background-color: rgba(255, 255, 255, .2); background: var(--transparency-light-20);
color: var(--text-hover); color: var(--text-hover);
} }
} }
@ -376,7 +377,7 @@ html {
.detailTableBodyRow-shaded:nth-child(even) { .detailTableBodyRow-shaded:nth-child(even) {
background: #1c1c1c; background: #1c1c1c;
background: rgba(30, 30, 30, .9) background: var(--transparency-dark-90)
} }
.listItem-border { .listItem-border {
@ -384,7 +385,7 @@ html {
} }
.listItem-focusscale:focus { .listItem-focusscale:focus {
background: rgba(54, 54, 54, .8) background: var(--transparency-dark-80)
} }
.listItemIcon:not(.listItemIcon-transparent) { .listItemIcon:not(.listItemIcon-transparent) {
@ -411,7 +412,7 @@ html {
.emby-input, .emby-input,
.emby-textarea { .emby-textarea {
color: inherit; color: inherit;
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border: var(--line-size) solid rgba(255, 255, 255, 0.1) border: var(--line-size) solid rgba(255, 255, 255, 0.1)
} }
@ -705,7 +706,7 @@ html {
.scrollbuttoncontainer { .scrollbuttoncontainer {
color: var(--text-hover); color: var(--text-hover);
background: rgba(20, 20, 20, .5) background: var(--transparency-dark-50)
} }
.recordingIcon-active { .recordingIcon-active {

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -76,7 +77,7 @@ label {
/* NAVBAR */ /* NAVBAR */
#nav .bg-dark { #nav .bg-dark {
background: hsla(0, 0%, 0%, .25) !important; background: var(--transparency-dark-25) !important;
} }
.navbar-dark .navbar-nav .nav-link { .navbar-dark .navbar-nav .nav-link {
@ -111,7 +112,7 @@ label {
.dropdown-item:active, .dropdown-item:active,
.dropdown:active:hover { .dropdown:active:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: rgb(0 0 0 / 25%) !important; background: var(--transparency-dark-25) !important;
} }
.dropdown-item { .dropdown-item {
@ -122,29 +123,29 @@ label {
.dropdown-item:focus { .dropdown-item:focus {
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
/* CARDS */ /* CARDS */
.card { .card {
background: rgb(255 255 255 / 8%) !important; background: var(--transparency-light-10) !important;
border: 1px solid transparent; border: 1px solid transparent;
} }
.card-header { .card-header {
color: var(--text-hover); 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; border-bottom: 1px solid rgba(255, 255, 255, .125) !important;
} }
ul li { ul li {
background-color: rgb(255 255 255 / 8%) !important; background: var(--transparency-light-10) !important;
border: none !important; border: none !important;
} }
ul li:hover { ul li:hover {
background-color: rgb(255 255 255 / 16%) !important; background: var(--transparency-light-15) !important;
border: none; border: none;
} }
@ -152,7 +153,7 @@ ul li:hover {
.plugin_content .nav-tabs .nav-link.active, .plugin_content .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { .nav-tabs .nav-item.show .nav-link {
color: var(--text-hover) !important; color: var(--text-hover) !important;
background-color: rgb(0 0 0 / 25%) !important; background: var(--transparency-dark-25) !important;
border-color: #4440 #4440 transparent; border-color: #4440 #4440 transparent;
} }
@ -161,7 +162,7 @@ ul li:hover {
} }
.alert-secondary { .alert-secondary {
background-color: rgb(255 255 255 / 20%); background: var(--transparency-light-20);
} }
/* BUTTONS */ /* BUTTONS */
@ -191,20 +192,20 @@ ul li:hover {
.badge-secondary { .badge-secondary {
color: var(--button-text); color: var(--button-text);
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
/* FORMS */ /* FORMS */
.form-control { .form-control {
color: var(--text) !important; color: var(--text) !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
box-shadow: none !important; box-shadow: none !important;
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} }
.form-control:focus { .form-control:focus {
background-color: rgb(0 0 0 / 50%) !important; background: var(--transparency-dark-50) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none !important; outline: none !important;
@ -88,7 +89,7 @@ a:hover,
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -100,7 +101,7 @@ a:hover,
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -135,7 +136,7 @@ a:hover,
.navbar-default .navbar-nav>li>a:focus { .navbar-default .navbar-nav>li>a:focus {
color: var(--text-hover); color: var(--text-hover);
background-image: none; background-image: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
/* BUTTONS */ /* BUTTONS */
@ -307,7 +308,7 @@ button.close {
.form-control { .form-control {
color: var(--text); color: var(--text);
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
background-image: none; background-image: none;
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -326,7 +327,7 @@ select.form-control:active,
.configtable .input-group .form-control:active, .configtable .input-group .form-control:active,
.configtable .input-group .form-control:focus { .configtable .input-group .form-control:focus {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
background-image: none; background-image: none;
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -335,7 +336,7 @@ select.form-control:active,
/* TABLE */ /* TABLE */
table { table {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
thead { thead {
@ -343,11 +344,11 @@ thead {
} }
.table-striped>tbody>tr:nth-of-type(odd) { .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 { .table-hover>tbody>tr:hover {
background-color: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
} }
.table-bordered { .table-bordered {
@ -366,7 +367,7 @@ thead {
/* BOOKWALL */ /* BOOKWALL */
.table-responsive>.table { .table-responsive>.table {
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10)
} }
/* SETTINGS */ /* SETTINGS */
@ -375,7 +376,7 @@ thead {
.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus { .nav-tabs>li.active>a:focus {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
border: 1px solid TRANSPARENT; border: 1px solid TRANSPARENT;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
@ -392,7 +393,7 @@ thead {
.nav>li>a:hover, .nav>li>a:hover,
.nav>li>a:focus { .nav>li>a:focus {
text-decoration: none; text-decoration: none;
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
.input-group-addon { .input-group-addon {
@ -451,6 +452,6 @@ legend {
pre { pre {
color: var(--text); color: var(--text);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
html, html,
body { body {
@ -104,7 +105,7 @@ a:-webkit-any-link:hover {
input { input {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
-webkit-rtl-ordering: logical; -webkit-rtl-ordering: logical;
Font-size: 16px; Font-size: 16px;
padding: 10px; padding: 10px;

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { :root {
--calendar-downloading: 122 67 182; --calendar-downloading: 122 67 182;
@ -169,7 +170,7 @@ a:hover {
} }
[class*="SelectInput-select-"] { [class*="SelectInput-select-"] {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="SelectInput-select-"]:active, [class*="SelectInput-select-"]:active,
@ -186,7 +187,7 @@ a:hover {
} }
[class*="AutoSuggestInput-suggestionHighlighted-"] { [class*="AutoSuggestInput-suggestionHighlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
@ -202,7 +203,7 @@ a:hover {
/* HEADER */ /* HEADER */
[class*="PageHeader-header-"] { [class*="PageHeader-header-"] {
background-color: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
color: var(--text); color: var(--text);
} }
@ -232,25 +233,25 @@ a:hover {
} }
[class*="ArtistSearchInput-highlighted-"] { [class*="ArtistSearchInput-highlighted-"] {
background-color: hsla(0, 0%, 100%, .08) background: var(--transparency-dark-10)
} }
[class*"=ArtistSearchInput-artistContainer-"]::-webkit-scrollbar-thumb, [class*"=ArtistSearchInput-artistContainer-"]::-webkit-scrollbar-thumb,
[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb { [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* MINI RIGHT SCROLL BAR */ /* MINI RIGHT SCROLL BAR */
[class*="OverlayScroller-thumb-"], [class*="OverlayScroller-thumb-"],
[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb, [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb,
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="OverlayScroller-thumb-"]:hover, [class*="OverlayScroller-thumb-"]:hover,
[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover, [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover,
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
/* ADD NEW */ /* ADD NEW */
@ -273,12 +274,12 @@ a:hover {
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background: var(--transparency-light-20) !important;
color: var(--text-hover); color: var(--text-hover);
} }
[class*="EnhancedSelectInputOption-option-"]:hover { [class*="EnhancedSelectInputOption-option-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="HintedSelectInputOption-hintText-"] { [class*="HintedSelectInputOption-hintText-"] {
@ -314,7 +315,7 @@ a:hover {
/* SIDE MENU */ /* SIDE MENU */
[class*="PageSidebar-sidebarContainer-"] { [class*="PageSidebar-sidebarContainer-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="PageSidebar-sidebar-"] { [class*="PageSidebar-sidebar-"] {
@ -337,7 +338,7 @@ a:hover {
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -385,7 +386,7 @@ a:hover {
} }
[class*="ArtistIndexOverview-content-"]:hover { [class*="ArtistIndexOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="ArtistIndexOverview-link-"]:hover { [class*="ArtistIndexOverview-link-"]:hover {
@ -393,7 +394,7 @@ a:hover {
} }
[class*="ProgressBar-container-"] { [class*="ProgressBar-container-"] {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
[class*=".ProgressBar-purple-"] { [class*=".ProgressBar-purple-"] {
@ -405,7 +406,7 @@ a:hover {
[class*="ArtistDetailsSeason-albumType-"], [class*="ArtistDetailsSeason-albumType-"],
[class*="ArtistDetailsSeason-collapseButtonContainer-"] { [class*="ArtistDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="ArtistDetailsSeason-header-"], [class*="ArtistDetailsSeason-header-"],
@ -456,12 +457,12 @@ a:hover {
[class*="AlbumDetailsMedium-medium-"] { [class*="AlbumDetailsMedium-medium-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="ExtraFileTable-container-"] { [class*="ExtraFileTable-container-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="AlbumDetails-selectedTab-"] { [class*="AlbumDetails-selectedTab-"] {
@ -470,16 +471,16 @@ a:hover {
[class*="AlbumDetailsMedium-collapseButtonContainer-"] { [class*="AlbumDetailsMedium-collapseButtonContainer-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="ArtistIndexProgressBar-progress-"] { [class*="ArtistIndexProgressBar-progress-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="ArtistIndexBanner-title-"], [class*="ArtistIndexBanner-title-"],
[class*="ArtistIndexBannerInfo-info-"] { [class*="ArtistIndexBannerInfo-info-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -580,7 +581,7 @@ a:hover {
/* Table options*/ /* Table options*/
[class*="TableOptionsColumn-column-"] { [class*="TableOptionsColumn-column-"] {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
border: none; border: none;
} }
@ -594,17 +595,17 @@ a:hover {
} }
[class*="TableRow-row-"]:hover { [class*="TableRow-row-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="TableRowCell-cell-"] { [class*="TableRowCell-cell-"] {
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
/* TOP MENU SERIES */ /* TOP MENU SERIES */
[class*="PageToolbar-toolbar-"] { [class*="PageToolbar-toolbar-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -637,7 +638,7 @@ a:hover {
/* POSTERS */ /* POSTERS */
[class*="ArtistIndexPoster-title-"], [class*="ArtistIndexPoster-title-"],
[class*="ArtistIndexPosterInfo-info-"] { [class*="ArtistIndexPosterInfo-info-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -665,13 +666,13 @@ a:hover {
[class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:hover,
[class*="MenuItem-menuItem-"]:focus { [class*="MenuItem-menuItem-"]:focus {
background: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
} }
[class*="MenuItemSeparator-separator-"] { [class*="MenuItemSeparator-separator-"] {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* ALPHABET JUMP BAR */ /* ALPHABET JUMP BAR */
@ -685,7 +686,7 @@ a:hover {
[class*="AddNewItem-searchIconContainer-"], [class*="AddNewItem-searchIconContainer-"],
[class*="CheckInput-isIndeterminate-"] { [class*="CheckInput-isIndeterminate-"] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -708,7 +709,7 @@ a:hover {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="TagInput-input-"][class*="TagInput-isFocused-"] { [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@ -741,7 +742,7 @@ a:hover {
[class*="AddNewArtistSearchResult-searchResult-"]:hover, [class*="AddNewArtistSearchResult-searchResult-"]:hover,
[class*="AddNewArtistSearchResult-underlay-"]:hover, [class*="AddNewArtistSearchResult-underlay-"]:hover,
[class*="AddNewAlbumSearchResult-underlay-"]:hover { [class*="AddNewAlbumSearchResult-underlay-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
@ -775,7 +776,7 @@ a:hover {
} }
[class*="ImportArtistSearchResult-artist-"]:hover { [class*="ImportArtistSearchResult-artist-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* IMPORT */ /* IMPORT */
@ -786,14 +787,14 @@ a:hover {
[class*="ExpandingFileDetails-fileDetails-"] { [class*="ExpandingFileDetails-fileDetails-"] {
border: 1px solid rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .1);
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
/* IMPORT NEW ARTIST */ /* IMPORT NEW ARTIST */
/* Drop down menu/button*/ /* Drop down menu/button*/
[class*="ImportArtistSelectArtist-button-"] { [class*="ImportArtistSelectArtist-button-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -806,14 +807,14 @@ a:hover {
} }
[class*="VirtualTableRow-row-"]:hover { [class*="VirtualTableRow-row-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/*Title*/ /*Title*/
[class*="PageJumpBarItem-jumpBarItem-"]:hover { [class*="PageJumpBarItem-jumpBarItem-"]:hover {
color: var(--text-hover); color: var(--text-hover);
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/*Posters*/ /*Posters*/
@ -824,7 +825,7 @@ a:hover {
/* FOOTER */ /* FOOTER */
[class*="PageContentFooter-contentFooter-"] { [class*="PageContentFooter-contentFooter-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -886,18 +887,18 @@ a:hover {
} }
[class*="DayOfWeek-dayOfWeek-"] { [class*="DayOfWeek-dayOfWeek-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="CalendarDay-dayOfMonth-"] { [class*="CalendarDay-dayOfMonth-"] {
border-bottom: 1px solid hsla(0, 0%, 100%, .08); border-bottom: 1px solid hsla(0, 0%, 100%, .08);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="CalendarDay-isToday-"], [class*="CalendarDay-isToday-"],
[class*="DayOfWeek-isToday-"] { [class*="DayOfWeek-isToday-"] {
background-color: hsla(0, 0%, 100%, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="CalendarDay-day-"], [class*="CalendarDay-day-"],
@ -923,7 +924,7 @@ a:hover {
/* calendar agenda */ /* calendar agenda */
[class*="AgendaEvent-event-"]:hover { [class*="AgendaEvent-event-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* SETTINGS */ /* SETTINGS */
@ -950,15 +951,15 @@ a:hover {
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-example-"] { [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"] { [class*="NamingOption-option-"] {
@ -966,17 +967,17 @@ a:hover {
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 2550, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 2550, 0.35); background: var(--transparency-light-35);
} }
/* PROFILES */ /* PROFILES */
[class*="Card-card-"], [class*="Card-card-"],
[class*="QualityProfiles-addQualityProfile-"] { [class*="QualityProfiles-addQualityProfile-"] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
@ -1001,12 +1002,12 @@ a:hover {
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
[class*="LanguageProfileItem-languageProfileItem-"] { [class*="LanguageProfileItem-languageProfileItem-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
[class*="KeyValueListInputItem-keyInput-"], [class*="KeyValueListInputItem-keyInput-"],
@ -1018,7 +1019,7 @@ a:hover {
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
[class*="QualityDefinitions-sizeLimitHelpText-"] { [class*="QualityDefinitions-sizeLimitHelpText-"] {
@ -1033,7 +1034,7 @@ a:hover {
[class*="Card-card-"], [class*="Card-card-"],
[class*="QualityProfiles-addQualityProfile-"] { [class*="QualityProfiles-addQualityProfile-"] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
@ -1077,7 +1078,7 @@ a:hover {
/* LOG */ /* LOG */
[class*="Alert-info-"] { [class*="Alert-info-"] {
border-color: transparent; border-color: transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: #FFC107; color: #FFC107;
} }
@ -1103,12 +1104,12 @@ a:hover {
/* Login Page */ /* Login Page */
.panel-body { .panel-body {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
.panel-header { .panel-header {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
.forgot-password { .forgot-password {
@ -1118,7 +1119,7 @@ a:hover {
input[type=email], input[type=email],
input[type=password] { input[type=password] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -1139,7 +1140,7 @@ input[type=password] {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* Custom filter */ /* Custom filter */
@ -1148,7 +1149,7 @@ input[type=password] {
} }
[class*="CustomFilter-customFilter-"]:hover { [class*="CustomFilter-customFilter-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/* -------------------------LIDARR STUFF------------------------------*/ /* -------------------------LIDARR STUFF------------------------------*/
@ -1167,7 +1168,7 @@ input[type=password] {
[class*="ArtistIndexHeader-trackProgress-"]:hover, [class*="ArtistIndexHeader-trackProgress-"]:hover,
[class*="ArtistIndexHeader-latestAlbum-"]:hover, [class*="ArtistIndexHeader-latestAlbum-"]:hover,
[class*="ArtistIndexHeader-actions-"]:hover { [class*="ArtistIndexHeader-actions-"]:hover {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -1181,7 +1182,7 @@ input[type=password] {
[class*="AlbumStudioAlbum-album-"], [class*="AlbumStudioAlbum-album-"],
[class*="AlbumStudioAlbum-tracks-"] { [class*="AlbumStudioAlbum-tracks-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }

View File

@ -10,6 +10,8 @@
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/transparent.css");
body { body {
font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif; font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
@ -56,13 +58,13 @@ body {
} }
.expand::-webkit-scrollbar-thumb { .expand::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .2) !important; background: var(--transparency-dark-20) !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
.expand::-webkit-scrollbar-thumb:hover { .expand::-webkit-scrollbar-thumb:hover {
background-color: hsla(0, 0%, 100%, .5) !important; background: var(--transparency-light-50) !important;
} }
body::-webkit-scrollbar-track { body::-webkit-scrollbar-track {
@ -76,18 +78,18 @@ body::-webkit-scrollbar {
} }
body::-webkit-scrollbar-thumb { body::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .2) !important; background: var(--transparency-dark-20) !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
body::-webkit-scrollbar-thumb:hover { body::-webkit-scrollbar-thumb:hover {
background-color: hsla(0, 0%, 100%, .5) !important; background: var(--transparency-light-50) !important;
} }
.flex-child { .flex-child {
border-radius: 0px; 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); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
} }
@ -158,7 +160,7 @@ body.fade-out {
} }
.expandtoggle:hover { .expandtoggle:hover {
background-color: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
} }
.expandtoggle:checked~.expandtoggle::before { .expandtoggle:checked~.expandtoggle::before {
@ -190,7 +192,7 @@ body.fade-out {
overflow: auto; overflow: auto;
transition: height 0.5s; transition: height 0.5s;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0.3); background: var(--transparency-dark-30);
word-wrap: break-word; word-wrap: break-word;
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
} }
@ -263,55 +265,55 @@ input:valid {
/* Sidebar */ /* Sidebar */
#sidebar-wrapper { #sidebar-wrapper {
box-shadow: none !important; box-shadow: none !important;
background-color: rgba(0, 0, 0, 0.07); background: var(--transparency-dark-10);
} }
.sidebar-nav li:hover:before { .sidebar-nav li:hover:before {
-webkit-transition: none !important; -webkit-transition: none !important;
transition: none !important; transition: none !important;
background-color: rgba(0, 0, 0, 0.07); background: var(--transparency-dark-10);
} }
.sidebar-nav li:before { .sidebar-nav li:before {
background-color: rgba(0, 0, 0, 0.07); background: var(--transparency-dark-10);
transition: none !important; transition: none !important;
-webkit-transition: none !important; -webkit-transition: none !important;
} }
.sidebar-nav li:first-child a { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .sidebar-nav li:nth-child(9):before {
background-color: rgba(0, 0, 0, 0.07); background: var(--transparency-dark-10);
} }
#modalloading { #modalloading {
@ -339,7 +341,7 @@ input:valid {
} }
#stats { #stats {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
padding-left: .0rem !important; padding-left: .0rem !important;
padding-right: 1.11rem !important; padding-right: 1.11rem !important;
box-shadow: none; box-shadow: none;
@ -403,13 +405,13 @@ input:valid {
} }
#time { #time {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
box-shadow: none; box-shadow: none;
} }
#slidertable { #slidertable {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
box-shadow: none; box-shadow: none;
} }
@ -432,14 +434,14 @@ input:valid {
/*Service tile*/ /*Service tile*/
.col-lg-4 { .col-lg-4 {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.col-lg-4:hover { .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; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
@ -480,7 +482,7 @@ input:valid {
} }
#clock { #clock {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
box-shadow: none; box-shadow: none;
} }
@ -497,7 +499,7 @@ input:valid {
.pace, .pace,
.pace-progress { .pace-progress {
background: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
} }
.pace, .pace,
@ -574,7 +576,7 @@ input:valid {
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
#dateRight { #dateRight {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
box-shadow: none; box-shadow: none;
} }

View File

@ -10,6 +10,7 @@
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/transparent.css");
#footer:after { #footer:after {
color: var(--text-hover); color: var(--text-hover);
@ -41,13 +42,13 @@ body::-webkit-scrollbar {
} }
body::-webkit-scrollbar-thumb { body::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .2) !important; background: var(--transparency-dark-20) !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
body::-webkit-scrollbar-thumb:hover { 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 { #myModal3::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .2) !important; background: var(--transparency-dark-20) !important;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
} }
#myModal3::-webkit-scrollbar-thumb:hover { #myModal3::-webkit-scrollbar-thumb:hover {
background-color: hsla(0, 0%, 100%, .5) !important; background: var(--transparency-light-50) !important;
} }
#includedContent { #includedContent {
@ -125,55 +126,55 @@ body::-webkit-scrollbar-thumb:hover {
/* Sidebar */ /* Sidebar */
#sidebar-wrapper { #sidebar-wrapper {
box-shadow: none !important; box-shadow: none !important;
background-color: rgba(0, 0, 0, 0.07); background: var(--transparency-dark-10);
} }
.sidebar-nav li:hover:before { .sidebar-nav li:hover:before {
-webkit-transition: none !important; -webkit-transition: none !important;
transition: none !important; transition: none !important;
background-color: rgba(0, 0, 0, 0.07); background: var(--transparency-dark-10);
} }
.sidebar-nav li:before { .sidebar-nav li:before {
background-color: rgba(0, 0, 0, 0.07); background: var(--transparency-dark-10);
transition: none !important; transition: none !important;
-webkit-transition: none !important; -webkit-transition: none !important;
} }
.sidebar-nav li:first-child a { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .sidebar-nav li:nth-child(9):before {
background-color: rgba(0, 0, 0, 0.07); background: var(--transparency-dark-10);
} }
#modalloading { #modalloading {
@ -201,7 +202,7 @@ body::-webkit-scrollbar-thumb:hover {
} }
#stats { #stats {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
padding-left: .0rem !important; padding-left: .0rem !important;
padding-right: 1.11rem !important; padding-right: 1.11rem !important;
box-shadow: none; box-shadow: none;
@ -263,13 +264,13 @@ body::-webkit-scrollbar-thumb:hover {
} }
#time { #time {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
box-shadow: none; box-shadow: none;
} }
#slidertable { #slidertable {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
box-shadow: none; box-shadow: none;
} }
@ -292,14 +293,14 @@ body::-webkit-scrollbar-thumb:hover {
/*Service tile*/ /*Service tile*/
.col-lg-4 { .col-lg-4 {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.col-lg-4:hover { .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; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
@ -340,7 +341,7 @@ body::-webkit-scrollbar-thumb:hover {
} }
#clock { #clock {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
box-shadow: none; box-shadow: none;
} }
@ -357,7 +358,7 @@ body::-webkit-scrollbar-thumb:hover {
.pace, .pace,
.pace-progress { .pace-progress {
background: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
} }
.pace, .pace,

View File

@ -20,7 +20,7 @@ body {
} }
#stats { #stats {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
padding-left: .0rem !important; padding-left: .0rem !important;
padding-right: 1.11rem !important; padding-right: 1.11rem !important;
box-shadow: none; box-shadow: none;
@ -60,13 +60,13 @@ body {
} }
#time { #time {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
box-shadow: none; box-shadow: none;
} }
#slidertable { #slidertable {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
box-shadow: none; box-shadow: none;
} }
@ -89,14 +89,14 @@ body {
/*Service tile*/ /*Service tile*/
.col-lg-4 { .col-lg-4 {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
margin: 1rem .1rem 1.5rem 1rem !important; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
} }
.col-lg-4:hover { .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; margin: 1rem .1rem 1.5rem 1rem !important;
width: 9rem !important; width: 9rem !important;
box-shadow: none; box-shadow: none;
@ -137,7 +137,7 @@ body {
} }
#clock { #clock {
background-color: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
box-shadow: none; box-shadow: none;
} }
@ -154,7 +154,7 @@ body {
.pace, .pace,
.pace-progress { .pace-progress {
background: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
} }
.pace, .pace,

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none; outline: none;
@ -59,7 +60,7 @@ footer,
.login-form input, .login-form input,
input, input,
.TextInput { .TextInput {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
color: var(--text) color: var(--text)
} }
@ -139,11 +140,11 @@ input:focus {
} }
.RoomInfoBar { .RoomInfoBar {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
/* MENUS POPOVER */ /* MENUS POPOVER */
.PopoverMenuButton:hover { .PopoverMenuButton:hover {
background: rgb(255 255 255 / 15%) !important; background: var(--transparency-light-15) !important;
color: var(--mm-white); color: var(--mm-white);
} }

View File

@ -1,4 +1,5 @@
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none !important; outline: none !important;
@ -240,7 +241,7 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border: 1px solid rgba(255, 255, 255, 0.1) !important; 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 { table th {
@ -322,8 +323,8 @@ table td a {
.dataTables_filter input { .dataTables_filter input {
background: none repeat scroll 0 0 rgb(255 255 255 / 10%); background: none repeat scroll 0 0 var(--transparency-light-10);
border: 1px solid rgb(255 255 255 / 10%); border: 1px solid var(--transparency-light-10);
font-size: 15px; font-size: 15px;
padding: 2px 4px; padding: 2px 4px;
color: var(--text); color: var(--text);
@ -340,20 +341,20 @@ table.display thead th {
} }
/* table.display tr.odd { /* table.display tr.odd {
background-color: rgba(255, 255, 255, 0.15) !important; background: var(--transparency-light-15) !important;
} }
table.display tr.even { table.display tr.even {
background-color: rgba(255, 255, 255, 0.05) !important; background: var(--transparency-light-05) !important;
} */ } */
/* DataTables row classes */ /* DataTables row classes */
table.display tr.odd.gradeA { table.display tr.odd.gradeA {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
table.display tr.even.gradeA { table.display tr.even.gradeA {
background-color: rgba(255, 255, 255, 0.05); background: var(--transparency-light-05);
} }
table.display tr.odd.gradeB { table.display tr.odd.gradeB {
@ -528,7 +529,7 @@ table.display_no_select tr.gradeZ td {
table.display_no_select thead th { table.display_no_select thead th {
padding: 3px 18px 3px 10px; padding: 3px 18px 3px 10px;
background-color: rgba(0, 0, 0, 0.1); background: var(--transparency-dark-10);
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
} }
@ -545,7 +546,7 @@ button {
} }
select { select {
background: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
color: var(--text); color: var(--text);
} }
@ -567,7 +568,7 @@ input {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
background: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
border: none; border: none;
color: var(--text); color: var(--text);
padding: 2px 4px; padding: 2px 4px;
@ -723,12 +724,12 @@ form .row input[type=password] {
max-width: 230px; max-width: 230px;
margin-right: 5px; margin-right: 5px;
padding: 3px 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=text]:focus,
form .row input[type=password]:focus { form .row input[type=password]:focus {
background: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
form .row small { form .row small {
@ -1167,7 +1168,7 @@ div#searchbar input[type=text] {
margin-right: 10px; margin-right: 10px;
padding: 4px 5px 4px 25px; padding: 4px 5px 4px 25px;
width: 150px; width: 150px;
background: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
} }
div#searchbar .mini-icon { div#searchbar .mini-icon {
@ -3234,7 +3235,7 @@ div.alphabetInfo {
/* JQUERY UI */ /* JQUERY UI */
.ui-tabs .ui-tabs-panel { .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); border: 1px solid rgba(255, 255, 255, 0.1);
} }
@ -3249,7 +3250,7 @@ div.alphabetInfo {
} }
.ui-tabs .ui-tabs-nav li { .ui-tabs .ui-tabs-nav li {
background: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
color: var(--text); 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 { .wrap input {
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
border-radius: 7px !important; border-radius: 7px !important;
margin-bottom: 10px; margin-bottom: 10px;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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, body,
[class*="styled__SocialMediaContainer-"] { [class*="styled__SocialMediaContainer-"] {
@ -82,14 +83,14 @@ a:hover,
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus { .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; color: var(--text-hover) !important;
} }
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus { .navbar-default .navbar-nav>.open>a:focus {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.navbar-default, .navbar-default,
@ -105,7 +106,7 @@ a:hover,
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { .navbar-default .navbar-brand:focus {
color: var(--text-hover) !important; 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, .navbar-default .navbar-nav>li>a,
@ -118,7 +119,7 @@ a:hover,
.nav-tabs>li.active>a, .nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus { .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; border: 1px solid #00000000 !important;
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
@ -131,7 +132,7 @@ a:hover,
.nav>li>a:hover, .nav>li>a:hover,
.nav>li>a:focus { .nav>li>a:focus {
background-color: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
} }
.nav-tabs>li>a:hover { .nav-tabs>li>a:hover {
@ -143,7 +144,7 @@ a:hover,
} }
#my-netdata-dropdown-content .agent-item:hover { #my-netdata-dropdown-content .agent-item:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.sign-in-btn { .sign-in-btn {
@ -200,14 +201,14 @@ a:hover,
} }
[class*="item__PanelRowContainer-"]: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:hover,
.dropdown-menu>li>a:focus { .dropdown-menu>li>a:focus {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.modal-content { .modal-content {
@ -250,7 +251,7 @@ a:hover,
} }
.panel { .panel {
background: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
} }
.panel-default>.panel-heading { .panel-default>.panel-heading {
@ -262,7 +263,7 @@ table {
} }
.table-hover>tbody>tr:hover { .table-hover>tbody>tr:hover {
background-color: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
} }
.table>thead>tr>th { .table>thead>tr>th {
@ -316,7 +317,7 @@ table {
} }
[class*="sidebar__Wrapper-"] { [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-"]) { [class*="sidebar__Wrapper-"] [class*="flex-sc-"]:not([class*="collapsible__Animated-"]) {
@ -403,12 +404,12 @@ hr {
.pagination>li>a, .pagination>li>a,
.pagination>li>span { .pagination>li>span {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
} }
.pagination>li>a:hover { .pagination>li>a:hover {
background-color: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
} }
/* Buttons */ /* Buttons */

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -26,7 +27,7 @@ body {
/* scroller */ /* scroller */
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -39,7 +40,7 @@ body {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
.modal-header { .modal-header {
@ -101,7 +102,7 @@ h6 {
} }
.table-striped tbody tr:nth-child(odd) { .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, .table-striped tbody tr:nth-child(odd) td,
@ -110,40 +111,40 @@ h6 {
} }
.table-striped tbody tr:nth-child(even) { .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,
.table tbody tr:hover td, .table tbody tr:hover td,
.table tbody tr:hover a { .table tbody tr:hover a {
color: var(--text-hover); 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, .table-striped tbody tr.checked:nth-child(2n+1) td,
.checked .progress { .checked .progress {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
tr.checked, tr.checked,
tr.checked td, tr.checked td,
tr.checked:nth-child(odd) .progress { 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,
.table tbody tr.checked:hover td { .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,
.table tbody tr.checked:hover td { .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,
.table.check-simple tbody tr.checked:hover td { .table.check-simple tbody tr.checked:hover td {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
.table th, .table th,
@ -158,12 +159,12 @@ tr.checked:nth-child(odd) .progress {
.pagination a { .pagination a {
border: none; border: none;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.pagination a:hover, .pagination a:hover,
.pagination .active a { .pagination .active a {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
.pagination .active a { .pagination .active a {
@ -172,7 +173,7 @@ tr.checked:nth-child(odd) .progress {
/* PROGRESS BAR */ /* PROGRESS BAR */
.progress { .progress {
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
.progress-warning.progress-striped .bar { .progress-warning.progress-striped .bar {
@ -185,7 +186,7 @@ tr.checked:nth-child(odd) .progress {
.bar-text-left, .bar-text-left,
.bar-text-right { .bar-text-right {
var(--text-hover); color: var(--text-hover);
} }
/* NAVBAR */ /* NAVBAR */
@ -211,16 +212,16 @@ tr.checked:nth-child(odd) .progress {
.navbar .nav>li>a:hover { .navbar .nav>li>a:hover {
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
.navbar .nav .active>a { .navbar .nav .active>a {
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
.navbar .nav .active>a:hover { .navbar .nav .active>a:hover {
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--accent-color-hover) !important; color: var(--accent-color-hover) !important;
} }
@ -241,7 +242,7 @@ div.check:hover {
.navbar-search .search-query { .navbar-search .search-query {
color: var(--text); color: var(--text);
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
@ -250,7 +251,7 @@ div.check:hover {
.navbar-search .search-query.focused { .navbar-search .search-query.focused {
color: var(--text-hover) !important; color: var(--text-hover) !important;
text-shadow: none; text-shadow: none;
background-color: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
} }
.focused .search-caret-button .caret { .focused .search-caret-button .caret {
@ -287,7 +288,7 @@ div.check:hover {
.dropdown-menu .active>a, .dropdown-menu .active>a,
.dropdown-menu .active>a:hover { .dropdown-menu .active>a:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: hsla(0, 0%, 100%, .05); background: var(--transparency-dark-05);
} }
.dropdown-menu .divider { .dropdown-menu .divider {
@ -383,7 +384,7 @@ div.check:hover {
#ConfigData>div:nth-child(4)>div>button, #ConfigData>div:nth-child(4)>div>button,
#ConfigData>div:nth-child(5)>div>button { #ConfigData>div:nth-child(5)>div>button {
text-shadow: unset; text-shadow: unset;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -391,7 +392,7 @@ div.check:hover {
#ConfigData>div:nth-child(4)>div>button:hover, #ConfigData>div:nth-child(4)>div>button:hover,
#ConfigData>div:nth-child(5)>div>button:hover { #ConfigData>div:nth-child(5)>div>button:hover {
text-shadow: unset; text-shadow: unset;
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -403,18 +404,18 @@ div.check:hover {
} }
#ConfigData input.btn { #ConfigData input.btn {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
text-shadow: unset; text-shadow: unset;
color: #a8a8a8; color: #a8a8a8;
} }
#Config_ViewButton { #Config_ViewButton {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
#Config_ViewButton:hover { #Config_ViewButton:hover {
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -450,7 +451,7 @@ div.check:hover {
} }
.config-header .btn { .config-header .btn {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.btn-group.open .btn.dropdown-toggle { .btn-group.open .btn.dropdown-toggle {
@ -472,7 +473,7 @@ div.check:hover {
input, input,
textarea, textarea,
.uneditable-input { .uneditable-input {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
color: var(--text) !important; color: var(--text) !important;
border: transparent; border: transparent;
} }
@ -480,13 +481,13 @@ textarea,
input:focus:not(.btn), input:focus:not(.btn),
textarea:focus, textarea:focus,
.uneditable-input:focus { .uneditable-input:focus {
background: rgba(255, 255, 255, 0.10) !important; background: var(--transparency-light-10) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
border: transparent; border: transparent;
} }
select { select {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid #00000000; border: 1px solid #00000000;
color: var(--text) color: var(--text)
} }
@ -521,7 +522,7 @@ textarea:focus {
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
border: 0px; border: 0px;
background-color: hsla(0, 0%, 100%, .05); background: var(--transparency-dark-05);
text-shadow: unset; text-shadow: unset;
color: var(--text-hover); color: var(--text-hover);
text-transform: capitalize; text-transform: capitalize;
@ -566,12 +567,12 @@ label {
text-shadow: 0 -1px 0 rgb(0 0 0 / 25%); text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
background-color: rgb(255 255 255 / 25%); background-color: var(--transparency-light-25);
} }
#ConfigNav { #ConfigNav {
border: 1px solid rgba(0, 0, 0, .25); border: 1px solid rgba(0, 0, 0, .25);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
#ConfigNav.nav-list a { #ConfigNav.nav-list a {
@ -598,7 +599,7 @@ label {
} }
.nav>li>a:hover { .nav>li>a:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -625,7 +626,7 @@ span.help-option-title {
.input-prepend .add-on, .input-prepend .add-on,
.input-append .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-image: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -640,7 +641,7 @@ span.help-option-title {
} }
.config-settitle { .config-settitle {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-bottom: none; border-bottom: none;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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, body,
html { html {
@ -40,7 +41,7 @@ a:hover {
} }
.navbar-default { .navbar-default {
background-color: rgba(0, 0, 0, 0.6); background: var(--transparency-dark-60);
border-color: transparent; border-color: transparent;
} }
@ -48,13 +49,13 @@ a:hover {
.navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover { .navbar-default .navbar-nav>.active>a:hover {
color: rgb(var(--accent-color)); 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:focus,
.navbar-default .navbar-nav>li>a:hover { .navbar-default .navbar-nav>li>a:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.navbar-default .navbar-nav>li>a { .navbar-default .navbar-nav>li>a {
@ -87,7 +88,7 @@ a:hover {
.nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover { .nav-tabs>li.active>a:hover {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid #1a1f2000; border: 1px solid #1a1f2000;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -99,7 +100,7 @@ a:hover {
.nav>li>a:focus, .nav>li>a:focus,
.nav>li>a:hover { .nav>li>a:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.nav-tabs>li>a { .nav-tabs>li>a {
@ -284,7 +285,7 @@ h6 {
.dropdown-menu>li>a:hover { .dropdown-menu>li>a:hover {
text-decoration: none; text-decoration: none;
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
} }
.history-title { .history-title {
@ -299,7 +300,7 @@ h6 {
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default { .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
color: var(--text-muted); 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 { .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
@ -334,13 +335,13 @@ h6 {
.form-control { .form-control {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.form-control:focus { .form-control:focus {
border-color: rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0);
background: rgba(0, 0, 0, 0.35); background: var(--transparency-dark-35);
outline: 0; outline: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -353,19 +354,19 @@ select.form-control:focus {
/* .input-group-addon { /* .input-group-addon {
outline: none; outline: none;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
} */ } */
/* Categories */ /* Categories */
.panel { .panel {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
} }
.repeatsection { .repeatsection {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
box-shadow: 0 0 4px 1px transparent; box-shadow: 0 0 4px 1px transparent;
} }
@ -416,19 +417,19 @@ hr {
} }
.well { .well {
background-color: hsla(0, 0%, 0%, 0.45); background-color: var(--transparency-dark-45);
border: 1px solid #00000000; border: 1px solid #00000000;
} }
/* Updates */ /* Updates */
.alert-warning { .alert-warning {
background: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
border-color: transparent; border-color: transparent;
color: var(--text-hover); color: var(--text-hover);
} }
.panel-default>.panel-heading { .panel-default>.panel-heading {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.panel-default>.panel-heading { .panel-default>.panel-heading {
@ -437,13 +438,13 @@ hr {
} }
.list-group-item { .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); border: 1px solid rgba(255, 255, 255, 0.1);
} }
/* Table */ /* Table */
table { table {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.table>thead>tr>th { .table>thead>tr>th {
@ -461,7 +462,7 @@ table {
} }
.table-hover>tbody>tr:hover { .table-hover>tbody>tr:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.search-result-tbody { .search-result-tbody {
@ -469,7 +470,7 @@ table {
} }
pre { pre {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -492,7 +493,7 @@ body>div>div.center-form.panel.col-md-8>div>form>button:active {
/* SEARCH */ /* SEARCH */
.search-results-table { .search-results-table {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border: 1px solid rgba(255, 255, 255, 0.1); 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:focus,
.pagination>.disabled>span:hover { .pagination>.disabled>span:hover {
color: var(--text-muted); color: var(--text-muted);
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
border-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1);
cursor: not-allowed cursor: not-allowed
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none !important; outline: none !important;
@ -39,7 +40,7 @@ html, body, .wizard-background, .content-container, #main-container\ dark > mat-
.container-alert { .container-alert {
color: var(--text-hover); 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; border-color: rgb(var(--accent-color)) !important;
} }
@ -83,7 +84,7 @@ a:hover {
/* TOP NAV */ /* TOP NAV */
.top-search-bar .mat-form-field-flex { .top-search-bar .mat-form-field-flex {
border: 1px solid rgba(255, 255, 255, 0.10); 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 */ /* Drop down menu */
@ -104,7 +105,7 @@ a:hover {
} }
.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) { .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 { #main-container\ dark > mat-sidenav-container > mat-sidenav-content > mat-toolbar > button {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
@ -125,7 +126,7 @@ a:hover {
@media (min-width: 768px) { @media (min-width: 768px) {
.sidenav-container .sidenav { .sidenav-container .sidenav {
background: hsla(0, 0%, 0%, 0.438) !important; background: var(--transparency-dark-45) !important;
} }
} }
@ -143,7 +144,7 @@ a:hover {
} }
.mat-drawer-backdrop.mat-drawer-shown { .mat-drawer-backdrop.mat-drawer-shown {
background-color: hsl(0deg 0% 0% / 50%); background: var(--transparency-dark-50);
backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
} }
@ -163,7 +164,7 @@ a:hover {
.sidenav-container .sidenav .active-list-item, .sidenav-container .sidenav .active-list-item,
.sidenav-container .sidenav .active-list-item:hover { .sidenav-container .sidenav .active-list-item:hover {
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
background: rgb(255 255 255 / 15%) !important; background: var(--transparency-light-15) !important;
border-radius: .375rem !important; border-radius: .375rem !important;
padding: 10px 20px; padding: 10px 20px;
height: auto; height: auto;
@ -229,7 +230,7 @@ a:hover {
/* DISCOVER PAGE */ /* DISCOVER PAGE */
.discover-filter-buttons-group { .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: 1px solid rgb(255 255 255 / 10%) !important;
border-radius: 30px; border-radius: 30px;
color: var(--text-hover); color: var(--text-hover);
@ -238,7 +239,7 @@ a:hover {
} }
.discover-filter-buttons-group .button-active { .discover-filter-buttons-group .button-active {
background: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
} }
#search-filter{ #search-filter{
@ -273,7 +274,7 @@ a:hover {
/* MOBILE */ /* MOBILE */
@media (min-width: 768px) { @media (min-width: 768px) {
.sidenav-container .sidenav { .sidenav-container .sidenav {
background: hsla(0, 0%, 0%, 0.438) !important; background: var(--transparency-dark-45) !important;
} }
} }
@ -339,7 +340,7 @@ a:hover {
top: -1px !important; top: -1px !important;
position: absolute; position: absolute;
border-radius: .75rem .75rem 0 0 !important; 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; backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
transition: 0s -webkit-filter linear; transition: 0s -webkit-filter linear;
@ -378,7 +379,7 @@ a:hover {
} }
.btn-ombi { .btn-ombi {
background-color: rgba(0, 0, 0, 0.85) !important; background-color: var(--transparency-dark-85) !important;
/* backdrop-filter: blur(10px) !important; /* backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important; */ -webkit-backdrop-filter: blur(10px) !important; */
border-radius: .375rem !important; border-radius: .375rem !important;
@ -439,7 +440,7 @@ a:hover {
small.important { small.important {
color: red; color: red;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
} }
@ -645,17 +646,17 @@ mat-row {
.mat-paginator, .mat-paginator,
.mat-table { .mat-table {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
tr.mat-header-row { tr.mat-header-row {
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45)
} }
.table thead th { .table thead th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid rgb(255 255 255 / 25%); border-bottom: 2px solid var(--transparency-light-25);
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
/* Details page */ /* Details page */
@ -735,7 +736,7 @@ hr {
/* ADVANCED SEARCH MODAL */ /* ADVANCED SEARCH MODAL */
.alert-info { .alert-info {
background: rgba(255, 255, 255, .25) !important; background: var(--transparency-light-25) !important;
border-color: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .1) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }

View File

@ -1,5 +1,6 @@
@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900); @import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900);
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
/*Theme Colors*/ /*Theme Colors*/
/*bootstrap Color*/ /*bootstrap Color*/
/*Normal Color*/ /*Normal Color*/
@ -258,10 +259,10 @@ h6 {
/* settings */ /* settings */
/* header*/ /* header*/
[id*="settings-"]>div>div.panel-heading:not(form > div > div.panel-heading) { [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) { [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, #account-area > div > div > div > div,
@ -279,7 +280,7 @@ h6 {
#homepage-Deluge-form > fieldset > div > div.panel-wrapper.collapse.in > div > div > div > div.tab-pane.fade.in.active > div > div > div > div > div > div > div { #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*/ /* Homepage Item Modals*/
@ -289,15 +290,15 @@ h6 {
[id$="FYI"] > div > div > div > div > div > div > div, [id$="FYI"] > div > div > div > div > div > div > div,
#\39 w59f92rirFYI > div > div > div > div > div > div > div, #\39 w59f92rirFYI > div > div > div > div > div > div > div,
[id$="Setup"] > 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 { [id*="settings-"] .panel {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
#customize-appearance-form>ul>li.active>a { #customize-appearance-form>ul>li.active>a {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
#settings-main-system-settings { #settings-main-system-settings {
@ -320,33 +321,33 @@ select.form-control:focus {
.form-material .form-control:focus, .form-material .form-control:focus,
.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); border: 1px solid rgba(255, 255, 255, 0.1);
} }
.form-material .form-control, .form-material .form-control,
.form-control { .form-control {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-radius: 3px; border-radius: 3px;
} }
#githubVersions .bg-org { #githubVersions .bg-org {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
/* Ace editor stuff */ /* Ace editor stuff */
.ace-idle-fingers { .ace-idle-fingers {
background-color: rgb(0 0 0 / 25%) !important; background: var(--transparency-dark-25) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
.ace-idle-fingers .ace_marker-layer .ace_active-line { .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 { .ace-idle-fingers .ace_gutter {
background: rgb(255 255 255 / 10%) !important; background: var(--transparency-light-10) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -381,7 +382,7 @@ pre {
#loginLogTable>tbody>.even, #loginLogTable>tbody>.even,
#organizrLogTable>tbody>.even { #organizrLogTable>tbody>.even {
background: rgba(255, 255, 255, 0.10); background: var(--transparency-light-10);
} }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current,
@ -431,7 +432,7 @@ pre {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -443,7 +444,7 @@ pre {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -478,7 +479,7 @@ th.jsgrid-control-field.jsgrid-align-center {
.jsGrid-Users, .jsGrid-Users,
.jsgrid-header-sort-desc, .jsgrid-header-sort-desc,
.jsgrid-header-sort-asc { .jsgrid-header-sort-asc {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
tr.jsgrid-header-row th { tr.jsgrid-header-row th {
@ -494,14 +495,14 @@ tr.jsgrid-header-row th {
.jsgrid-filter-row>td, .jsgrid-filter-row>td,
.jsgrid-header-sortable:hover { .jsgrid-header-sortable:hover {
background: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
/* Calendar */ /* Calendar */
#calendar .fc-content-skeleton>table>thead>tr { #calendar .fc-content-skeleton>table>thead>tr {
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15)
} }
.fc-event:not(.homepage-drag), .fc-event:not(.homepage-drag),
@ -526,12 +527,12 @@ tr.jsgrid-header-row th {
.fc-unthemed .fc-row, .fc-unthemed .fc-row,
.fc-unthemed .fc-popover { .fc-unthemed .fc-popover {
border-color: transparent; border-color: transparent;
background: rgba(0, 0, 0, 0.05); background: var(--transparency-dark-05)
} }
.bg-theme, .bg-theme,
.fc-day-header { .fc-day-header {
background: rgba(0, 0, 0, .3) !important; background: var(--transparency-dark-30) !important;
} }
.bg-theme, .bg-theme,
@ -543,15 +544,15 @@ tr.jsgrid-header-row th {
.fc th.fc-wed, .fc th.fc-wed,
.fc th.fc-fri, .fc th.fc-fri,
.fc-button { .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 { 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 { .fc-widget-content.fc-today {
background-color: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
.fc-popover { .fc-popover {
@ -609,7 +610,7 @@ th.fc-day-header.fc-widget-header.fc-today {
#lockScreen .white-box { #lockScreen .white-box {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
background: rgb(0 0 0 / 45%) !important; background: var(--transparency-dark-45) !important;
margin-top: auto !important; margin-top: auto !important;
border-radius: 0px !important; border-radius: 0px !important;
} }
@ -651,7 +652,7 @@ th.fc-day-header.fc-widget-header.fc-today {
} }
.blockMsg { .blockMsg {
background: rgba(0, 0, 0, 0.9) !important; background: var(--transparency-dark-90) !important;
border: none !important; border: none !important;
} }
@ -682,7 +683,7 @@ label[for="checkbox-login"]:hover {
#recoverform>div:nth-child(3)>div>button, #recoverform>div:nth-child(3)>div>button,
#leave-recover, #leave-recover,
#form-lockscreen>div.form-group.text-center>div>button { #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; color: var(--text) !important;
border-radius: 25px; border-radius: 25px;
border: none; border: none;
@ -693,7 +694,7 @@ label[for="checkbox-login"]:hover {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
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; border-radius: 15px;
background-color: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
color: var(--text-hover) !important; color: var(--text-hover) !important;
@ -729,7 +730,7 @@ label[for="checkbox-login"]:hover {
/*2FA login button*/ /*2FA login button*/
.panel-wrapper .panel-body>.btn-warning, .panel-wrapper .panel-body>.btn-warning,
.btn-warning.disabled { .btn-warning.disabled {
background: hsla(0, 0%, 0%, 0.25) !important; background: var(--transparency-dark-25) !important;
border: 1px solid #ffc36d00 !important; border: 1px solid #ffc36d00 !important;
} }
@ -738,7 +739,7 @@ label[for="checkbox-login"]:hover {
.panel-yellow .panel-heading { .panel-yellow .panel-heading {
color: var(--text-hover); color: var(--text-hover);
border-radius: 3px; border-radius: 3px;
background-color: rgba(0, 0, 0, 0.3); background: var(--transparency-dark-30);
border-color: #00000000; border-color: #00000000;
} }
@ -790,7 +791,7 @@ label[for="checkbox-login"]:hover {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
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; border-radius: 15px;
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@ -813,7 +814,7 @@ label[for="checkbox-login"]:hover {
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
#splashScreen { #splashScreen {
overflow-y: scroll; overflow-y: scroll;
background: rgb(0 0 0 / 80%) !important; background: var(--transparency-dark-80) !important;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@ -824,7 +825,7 @@ label[for="checkbox-login"]:hover {
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
#splashScreen { #splashScreen {
overflow-y: scroll; overflow-y: scroll;
background: rgb(0 0 0 / 90%) !important; background: var(--transparency-dark-90) !important;
} }
} }
@ -979,7 +980,7 @@ label[for="checkbox-login"]:hover {
} }
.bg-success.text-inverse { .bg-success.text-inverse {
background-color: rgba(255, 255, 255, 0.15) !important; background: var(--transparency-light-15) !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -1062,7 +1063,7 @@ label[for="checkbox-login"]:hover {
/* Homepage Now playing card */ /* Homepage Now playing card */
.nowPlayingItem>.white-box>.el-card-item { .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); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
} }
@ -1156,7 +1157,7 @@ label[for="checkbox-login"]:hover {
#homepageOrderdownloader .nav-tabs>li.active>a:hover, #homepageOrderdownloader .nav-tabs>li.active>a:hover,
#homepageOrderdownloader .nav-tabs>li.active:hover { #homepageOrderdownloader .nav-tabs>li.active:hover {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
opacity: 1; opacity: 1;
} }
@ -1191,7 +1192,7 @@ label[for="checkbox-login"]:hover {
} }
.fc-button:hover { .fc-button:hover {
background: rgba(255, 255, 255, .08) !important; background: var(--transparency-light-10) !important;
} }
.fc-button { .fc-button {
@ -1413,13 +1414,13 @@ a:hover,
.progress-bar-inverse, .progress-bar-inverse,
.progress { .progress {
background: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
/* Homepage health checks */ /* Homepage health checks */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.bg-inverse .healthPosition { .bg-inverse .healthPosition {
background: rgba(255, 255, 255, 0.2) !important; background: var(--transparency-light-20) !important;
-webkit-backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px);
backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
border-radius: 3px; border-radius: 3px;
@ -1447,7 +1448,7 @@ a:hover,
} }
#homepageOrderhealthchecks .card-body { #homepageOrderhealthchecks .card-body {
background: rgba(255, 255, 255, 0.2); background: var(--transparency-light-20);
} }
.card, .card,
@ -1466,7 +1467,7 @@ a:hover,
/* Homepage Tautulli Cards*/ /* Homepage Tautulli Cards*/
#homepageOrdertautulli .library-card .card-body, #homepageOrdertautulli .library-card .card-body,
#homepageOrdertautulli div:nth-child(8) .card-body { #homepageOrdertautulli div:nth-child(8) .card-body {
background: rgba(255, 255, 255, .2); background: var(--transparency-light-20)
} }
.homepage-tautulli-card .cardCountType { .homepage-tautulli-card .cardCountType {
@ -1493,12 +1494,12 @@ a:hover,
} }
.unifiCards .panel-wrapper.collapse.in { .unifiCards .panel-wrapper.collapse.in {
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15)
} }
/* Homepage Monitor Cards */ /* Homepage Monitor Cards */
#homepageOrderMonitorr .card-body { #homepageOrderMonitorr .card-body {
background: rgba(255, 255, 255, 0.2); background: var(--transparency-light-20);
} }
#homepageOrderMonitorr .col-lg-2 { #homepageOrderMonitorr .col-lg-2 {
@ -1519,11 +1520,11 @@ a:hover,
/*Homepage WeatherAndAir Cards*/ /*Homepage WeatherAndAir Cards*/
#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a { #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 { .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 { #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a::after {
@ -1539,13 +1540,13 @@ a:hover,
} }
#homepageOrderWeatherAndAir .white-box { #homepageOrderWeatherAndAir .white-box {
background: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
border-radius: 3px; border-radius: 3px;
} }
/*Homepage Speedtest Cards*/ /*Homepage Speedtest Cards*/
#allSpeedtest .speedtest-card { #allSpeedtest .speedtest-card {
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
} }
#allSpeedtest .speedtest-card .text-muted, #allSpeedtest .speedtest-card .text-muted,
@ -1597,7 +1598,7 @@ body > div.swal-overlay.swal-overlay--show-modal > div {
#user-list-div .ms-container .ms-selectable, #user-list-div .ms-container .ms-selectable,
#user-list-div .ms-container .ms-selection { #user-list-div .ms-container .ms-selection {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -1714,7 +1715,7 @@ body {
.nav .open>a, .nav .open>a,
.nav .open>a:focus, .nav .open>a:focus,
.nav .open>a:hover { .nav .open>a:hover {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
/*Right panel*/ /*Right panel*/
@ -1747,7 +1748,7 @@ background: rgb(0 0 0 / 0%) !important;
} }
.sidebar { .sidebar {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
box-shadow: 1px 0px 20px rgb(0 0 0 / 20%); box-shadow: 1px 0px 20px rgb(0 0 0 / 20%);
} }
@ -2271,7 +2272,7 @@ fieldset[disabled] .form-control {
.table>thead>tr.active>th, .table>thead>tr.active>th,
.table>thead>tr>td.active, .table>thead>tr>td.active,
.table>thead>tr>th.active { .table>thead>tr>th.active {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.asColorPicker-dropdown, .asColorPicker-dropdown,
@ -2417,14 +2418,14 @@ pre,
select, select,
table.dataTable.display tbody tr.odd, table.dataTable.display tbody tr.odd,
table.dataTable.stripe 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:focus:not(select),
input:active:not(select), input:active:not(select),
.form-control:focus:not(select), .form-control:focus:not(select),
.form-control:active: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); border: 1px solid rgba(120, 130, 140, 0.4);
} }
@ -2505,7 +2506,7 @@ span.select2-results {
} */ } */
.panel-blue .panel-heading, .panel-info .panel-heading, #help-modal-body > div > div { .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, #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, #plexRecent > div.col-lg-12 > div,

View File

@ -1,4 +1,5 @@
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
/* TEXT */ /* TEXT */
[class*="text-gray-"]:not(button:disabled):not(button) { [class*="text-gray-"]:not(button:disabled):not(button) {
@ -125,7 +126,7 @@ input[type=text],
select, select,
textarea { textarea {
border-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1);
background-color: rgba(7, 7, 7, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -157,7 +158,7 @@ span.bg-indigo-500 {
.react-select-container .react-select__control { .react-select-container .react-select__control {
border-color: rgba(255, 255, 255, 0.1) !important; 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; color: var(--text) !important;
} }
@ -167,7 +168,7 @@ span.bg-indigo-500 {
} }
.react-select-container .react-select__option--is-focused { .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) color: var(--text-hover)
} }
@ -218,7 +219,7 @@ body {
} }
#search_field { #search_field {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
@ -301,11 +302,11 @@ body>div.z-50.fixed.inset-0.overflow-hidden.bg-opacity-70.bg-gray-800.enter-done
} }
body>div.z-50.fixed.inset-0.overflow-hidden.bg-opacity-70.bg-gray-800.enter-done>div>section>div>div>div>div.overflow-hidden.bg-gray-600.rounded-md.shadow { 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 { #__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 */ /* LOADER */
@ -372,7 +373,7 @@ a.slider-title:hover {
.media-facts { .media-facts {
border-color: rgba(255, 255, 255, 0.1); 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; 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); --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); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@ -424,7 +425,7 @@ a.slider-title:hover {
/* SETTINGS */ /* SETTINGS */
code { 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 { #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-6>div.hidden.overflow-x-scroll.border-b.border-gray-600.sm\:block.hide-scrollbar>nav>a.px-1.py-4.ml-8.text-sm.font-medium.leading-5.transition.duration-300.border-b-2.border-transparent.whitespace-nowrap.first\:ml-0.text-indigo-500.border-indigo-600 {
@ -432,7 +433,7 @@ code {
} }
#__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-10.text-white>div>ul>li>div { #__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); border-color: rgba(255, 255, 255, 0.1);
} }
@ -484,7 +485,7 @@ code {
table>thead>tr>th, 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.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 { #__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); border-color: rgba(255, 255, 255, 0.1);
} }
@ -516,7 +517,7 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
} }
body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-center.w-full.h-full.bg-gray-800.bg-opacity-70>div>div.relative.mt-4.text-sm.leading-5.text-gray-300>div.flex.flex-col>div>div>div>table>tbody { body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-center.w-full.h-full.bg-gray-800.bg-opacity-70>div>div.relative.mt-4.text-sm.leading-5.text-gray-300>div.flex.flex-col>div>div>div>table>tbody {
background: rgb(255, 255, 255, .1); background: var(--transparency-light-10);
} }
@ -529,7 +530,7 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
} }
#__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div.media-header>div.media-actions>span>span>div>div>div>a:hover { #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div.media-header>div.media-actions>span>span>div>div>div>a:hover {
background: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
} }
@ -537,13 +538,13 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
background: var(--drop-down-menu-bg); background: var(--drop-down-menu-bg);
} }
[aria-labelledby="user-menu"] a:hover{ [aria-labelledby="user-menu"] a:hover{
background-color: rgba(255, 255, 255, 0.05); background: var(--transparency-light-05);
} }
/* LOGIN */ /* 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>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 { #__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 */ /* TOAST */

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none; outline: none;
@ -81,7 +82,7 @@ h6,
/* MENU */ /* MENU */
.menu { .menu {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
@media (max-width: 1099.98px) { @media (max-width: 1099.98px) {
@ -101,7 +102,7 @@ h6,
@media (min-width: 1100px) { @media (min-width: 1100px) {
.page .sidebar { .page .sidebar {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
} }
@ -205,12 +206,12 @@ p a:hover,
/* OTHER */ /* OTHER */
.widget--item hr { .widget--item hr {
background: rgb(255 255 255 / 50%); background: var(--transparency-light-50);
} }
.widget--item--inner, .widget--item--inner,
.sr--instance--inner { .sr--instance--inner {
background: hsl(0deg 0% 0% / 15%); background: var(--transparency-dark-15);
} }
.filter--add:hover { .filter--add:hover {
@ -224,7 +225,7 @@ p a:hover,
} }
.filter--item { .filter--item {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
.spinner svg { .spinner svg {
@ -257,7 +258,7 @@ code {
.color-blue, .color-blue,
.color-red { .color-red {
/* Ratings */ /* Ratings */
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border-radius: 5px; border-radius: 5px;
padding: 0px 7px; padding: 0px 7px;
} }
@ -406,7 +407,7 @@ code {
thead { thead {
color: var(--text-hover); 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), .generic-table tr:not(.child):not(.sub) th:nth-child(odd),
@ -448,7 +449,7 @@ input[type=checkbox]:checked:after {
input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus { input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus {
border-bottom: 2px solid rgb(var(--accent-color)); border-bottom: 2px solid rgb(var(--accent-color));
background: rgba(255, 255, 255, .2); background: var(--transparency-light-20);
color: var(--text-hover) color: var(--text-hover)
} }
@ -456,18 +457,18 @@ input:not([type=checkbox]):not(.styled-input--input):not([type=file]),
.login-wrap input { .login-wrap input {
border-bottom: 2px solid rgba(0, 0, 0, 0); border-bottom: 2px solid rgba(0, 0, 0, 0);
color: var(--text); color: var(--text);
background: rgb(255 255 255 / 10%); background: var(--transparency-light-10);
} }
.search-form input:focus { .search-form input:focus {
background: hsla(0, 0%, 100%, .1) !important; background: var(--transparency-dark-10) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
border-bottom: 2px solid rgba(0, 0, 0, 0) !important; border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
} }
/* CALENDAR */ /* CALENDAR */
.rbc-show-more { .rbc-show-more {
background-color: hsl(0deg 0% 0% / 25%); background: var(--transparency-dark-25);
} }
.rbc-day-bg.rbc-today { .rbc-day-bg.rbc-today {

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
@ -41,7 +42,7 @@
.treeview-menu>li.active>a, .treeview-menu>li.active>a,
.treeview-menu>li>a:hover { .treeview-menu>li>a:hover {
color: var(--text-hover); color: var(--text-hover);
background: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
} }
.h1, .h1,
@ -106,7 +107,7 @@
padding: 15px; padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, .25); border-bottom: 1px solid rgba(255, 255, 255, .25);
border-top: 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 { .navbar-nav>.user-menu>.dropdown-menu>.user-body a {
@ -122,24 +123,24 @@
.skin-blue .main-header .logo, .skin-blue .main-header .logo,
.main-header .navbar, .main-header .navbar,
.main-header .logo { .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 .logo:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover, .skin-blue .main-header .navbar .sidebar-toggle:hover,
.sidebar-menu>li:hover>a { .sidebar-menu>li:hover>a {
background-color: rgba(255, 255, 255, .05); background: var(--transparency-light-05);
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
.sidebar-menu>li.active>a { .sidebar-menu>li.active>a {
background-color: rgba(255, 255, 255, .05); background: var(--transparency-light-05);
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
} }
/* Footer */ /* Footer */
.main-footer { .main-footer {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
border-top: 1px solid rgb(255 255 255 / 20%); border-top: 1px solid rgb(255 255 255 / 20%);
} }
@ -161,13 +162,13 @@
.wrapper, .wrapper,
.main-sidebar, .main-sidebar,
.left-side { .left-side {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.skin-blue .sidebar-menu>li.header, .skin-blue .sidebar-menu>li.header,
.sidebar-menu>li.header { .sidebar-menu>li.header {
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
background: rgba(0, 0, 0, .2); background: var(--transparency-dark-20);
} }
.treeview-menu>li>a { .treeview-menu>li>a {
@ -175,7 +176,7 @@
} }
.sidebar-menu>li>.treeview-menu { .sidebar-menu>li>.treeview-menu {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
/* Menus */ /* Menus */
@ -184,12 +185,12 @@
.sidebar-menu>li:hover>a, .sidebar-menu>li:hover>a,
.sidebar-menu>li.active>a { .sidebar-menu>li.active>a {
color: var(--text-hover); color: var(--text-hover);
background: rgba(0, 0, 0, .1); background: var(--transparency-dark-10);
border-left-color: rgb(var(--accent-color)); border-left-color: rgb(var(--accent-color));
} }
.skin-blue .sidebar-menu>li>.treeview-menu { .skin-blue .sidebar-menu>li>.treeview-menu {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.skin-blue .treeview-menu>li>a { .skin-blue .treeview-menu>li>a {
@ -233,18 +234,18 @@
.main-footer .nav-tabs, .main-footer .nav-tabs,
.nav-tabs-custom .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%); border-bottom-color: rgb(255 255 255 / 15%);
} }
.nav-tabs-custom>.nav-tabs>li:hover { .nav-tabs-custom>.nav-tabs>li:hover {
background-color: rgba(255, 255, 255, .05); background: var(--transparency-light-05);
color: var(--text-hover); color: var(--text-hover);
border-top-color: rgb(var(--accent-color)); border-top-color: rgb(var(--accent-color));
} }
.nav-tabs-custom>.nav-tabs>li:hover>a { .nav-tabs-custom>.nav-tabs>li:hover>a {
background-color: rgba(255, 255, 255, .05); background: var(--transparency-light-05);
} }
/* Dashboard */ /* Dashboard */
@ -254,14 +255,14 @@
} }
.box { .box {
background: rgba(0, 0, 0, .24); background: var(--transparency-dark-25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
} }
.box-solid>.box-header, .box-solid>.box-header,
.box>.box-header { .box>.box-header {
color: var(--text); color: var(--text);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
/* Total queries box*/ /* Total queries box*/
@ -290,7 +291,7 @@
} }
.table-bordered { .table-bordered {
background: rgba(0, 0, 0, .1); background: var(--transparency-dark-10)
} }
.table-bordered>thead>tr>th, .table-bordered>thead>tr>th,
@ -303,7 +304,7 @@
} }
.table-striped>tbody>tr:nth-of-type(odd) { .table-striped>tbody>tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
} }
/* Query Log */ /* Query Log */
@ -354,7 +355,7 @@
/* Login */ /* Login */
.panel-default { .panel-default {
border-color: transparent; border-color: transparent;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.panel-default>.panel-heading { .panel-default>.panel-heading {
@ -366,7 +367,7 @@
.panel, .panel,
.panel-body, .panel-body,
.panel-default>.panel-heading { .panel-default>.panel-heading {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border-radius: 0px; border-radius: 0px;
border: 1px solid transparent; border: 1px solid transparent;
color: var(--text); color: var(--text);
@ -374,7 +375,7 @@
/* Blacklist */ /* Blacklist */
.nav-tabs-custom { .nav-tabs-custom {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.nav-tabs-custom>.tab-content { .nav-tabs-custom>.tab-content {
@ -393,7 +394,7 @@
.nav-tabs-custom>.nav-tabs>li.active>a, .nav-tabs-custom>.nav-tabs>li.active>a,
.nav-tabs-custom>.nav-tabs>li.active:hover>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; color: rgb(var(--accent-color)) !important;
} }
@ -411,11 +412,11 @@
/* Network */ /* Network */
.table-striped>tbody>tr:nth-of-type(odd) { .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) { .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 { #network-entries_wrapper.text-center {
@ -504,13 +505,13 @@
pre, pre,
.box-footer, .box-footer,
.datatables_processing { .datatables_processing {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text); color: var(--text);
} }
.dataTables_wrapper input[type="search"] { .dataTables_wrapper input[type="search"] {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -529,7 +530,7 @@
.daterangepicker select.ampmselect, .daterangepicker select.ampmselect,
.form-control, .form-control,
div.dataTables_wrapper div.dataTables_length select { div.dataTables_wrapper div.dataTables_length select {
background-color: rgb(0 0 0 / 0.25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
border: 1px solid rgb(255 255 255 / 15%); border: 1px solid rgb(255 255 255 / 15%);
} }
@ -568,7 +569,7 @@
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -587,6 +588,6 @@
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none; outline: none;
@ -141,7 +142,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
} }
[class*="BottomBar-bottomBar-"] { [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%); box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%);
} }
@ -157,7 +158,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
[class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"], [class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"],
[class*="SourceSidebar-sidebar-"] { [class*="SourceSidebar-sidebar-"] {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
[class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] { [class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] {
@ -176,7 +177,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
background: var(--header-blur-background); background: var(--header-blur-background);
-webkit-backdrop-filter: saturate(1.8) blur(1.5em); -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
backdrop-filter: saturate(1.8) blur(1.5em); backdrop-filter: saturate(1.8) blur(1.5em);
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
} }
} }
@ -204,7 +205,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
/* NAVBAR */ /* NAVBAR */
[class*="NavBar-container-"] { [class*="NavBar-container-"] {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="NavBarActivityButton-isHighlighted-"] [class*="NavBarActivityButton-activityIcon-"] { [class*="NavBarActivityButton-isHighlighted-"] [class*="NavBarActivityButton-activityIcon-"] {
@ -520,13 +521,13 @@ circle {
.modal-body-with-panes .modal-nav-pane { .modal-body-with-panes .modal-nav-pane {
background-image: none; background-image: none;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
.well, .well,
.files ul li { .files ul li {
color: var(--text); color: var(--text);
background-color: rgb(0 0 0 / 10%); background: var(--transparency-dark-10);
border: 1px solid transparent; border: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
@ -534,7 +535,7 @@ circle {
.edit-section-modal .wizard-blocks-group>.wizard-block.selectable:hover { .edit-section-modal .wizard-blocks-group>.wizard-block.selectable:hover {
color: var(--text-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 { .edit-section-modal .wizard-blocks-group>.wizard-block.selectable {
@ -611,7 +612,7 @@ fieldset[disabled] .btn-primary:hover {
.edit-lock-addon { .edit-lock-addon {
color: var(--button-color-hover); color: var(--button-color-hover);
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
border-color: transparent; border-color: transparent;
-webkit-box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%); -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%); box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%);
@ -712,11 +713,11 @@ hr {
[class*="DirectoryListTableHeader-tableHeaderCell-"], [class*="DirectoryListTableHeader-tableHeaderCell-"],
[class*="DirectoryListTableHeader-columnMenuButton-"] { [class*="DirectoryListTableHeader-columnMenuButton-"] {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
a>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover, a>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover,
button>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover, button>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover,
[class*="DirectoryListTableHeader-columnMenuButton-"]:hover { [class*="DirectoryListTableHeader-columnMenuButton-"]:hover {
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
} }

View File

@ -10,6 +10,8 @@
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/transparent.css");
body { body {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
@ -57,7 +59,7 @@ body {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -69,7 +71,7 @@ body {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -78,12 +80,12 @@ legend {
} }
.navbar-inverse { .navbar-inverse {
background-color: rgba(0, 0, 0, 0.6); background: var(--transparency-dark-60);
border-color: transparent; border-color: transparent;
} }
.side-nav { .side-nav {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
.navbar-inverse .navbar-nav>li>a { .navbar-inverse .navbar-nav>li>a {
@ -92,7 +94,7 @@ legend {
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus { .navbar-inverse .navbar-nav>li>a:focus {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
.nav>li.selected>a { .nav>li.selected>a {
@ -139,7 +141,7 @@ legend {
.plpp_table.even:hover, .plpp_table.even:hover,
.plpp_table.odd:hover { .plpp_table.odd:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
.panel-heading { .panel-heading {
@ -204,7 +206,7 @@ div.plpp_slider {
} }
table { table {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
table, table,
@ -229,7 +231,7 @@ table,
.pagination>li>a, .pagination>li>a,
.pagination>li>span { .pagination>li>span {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: transparent; border: transparent;
} }
@ -240,7 +242,7 @@ table,
.pagination>.disabled>a:hover, .pagination>.disabled>a:hover,
.pagination>.disabled>a:focus { .pagination>.disabled>a:focus {
color: #BDBDBD; color: #BDBDBD;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: transparent; border: transparent;
cursor: not-allowed; cursor: not-allowed;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { :root {
--text-json-tree-branch-preview-color: var(--text); --text-json-tree-branch-preview-color: var(--text);
@ -47,7 +48,7 @@
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -59,7 +60,7 @@
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -127,7 +128,7 @@ ul.sidebar .sidebar-list a {
/* NEWS */ /* NEWS */
.motd-body { .motd-body {
background-color: rgba(255, 255, 255, 0.15) !important; background: var(--transparency-light-15) !important;
} }
/* LOGIN */ /* LOGIN */
@ -148,16 +149,16 @@ ul.sidebar .sidebar-list a {
/* SIDEBAR */ /* SIDEBAR */
#sidebar-wrapper { #sidebar-wrapper {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.sidebar-header { .sidebar-header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
ul.sidebar .sidebar-list a.active { ul.sidebar .sidebar-list a.active {
color: rgb(var(--accent-color)); 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)); border-left: 3px solid rgb(var(--accent-color));
} }
@ -165,7 +166,7 @@ ul.sidebar .sidebar-list a.active {
.sidebar-footer, .sidebar-footer,
ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active), ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active),
ul.sidebar .sidebar-main a { ul.sidebar .sidebar-main a {
background: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
color: var(--text-hover); color: var(--text-hover);
} }
@ -180,7 +181,7 @@ ul.sidebar .sidebar-title {
ul.sidebar .sidebar-list .sidebar-sublist a.active { ul.sidebar .sidebar-list .sidebar-sublist a.active {
border-left: 3px solid rgb(var(--accent-color)); border-left: 3px solid rgb(var(--accent-color));
background: rgba(255, 255, 255, .08); background: var(--transparency-light-10)
} }
ul.sidebar .sidebar-title { ul.sidebar .sidebar-title {
@ -201,33 +202,33 @@ ul.sidebar .sidebar-title {
/* WIDGETS */ /* WIDGETS */
.widget { .widget {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-color: transparent; border-color: transparent;
} }
.widget .widget-body table thead { .widget .widget-body table thead {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.widget .widget-header { .widget .widget-header {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
/* DATATABLES */ /* DATATABLES */
.datatable .toolBar { .datatable .toolBar {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.datatable .footer { .datatable .footer {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
.blocklist-item--selected, .blocklist-item--selected,
.blocklist-item:hover { .blocklist-item:hover {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
color: var(--text); color: var(--text);
} }
@ -244,11 +245,11 @@ ul.sidebar .sidebar-title {
border-top: 1px solid rgba(255, 255, 255, .1); border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1);
padding: 8px; padding: 8px;
background: rgba(255, 255, 255, .15); background: var(--transparency-light-15)
} }
.datatable .searchBar:focus-within { .datatable .searchBar:focus-within {
background:rgba(255, 255, 255, .25); background: var(--transparency-light-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -267,7 +268,7 @@ ul.sidebar .sidebar-title {
.table>thead>tr.active>th, .table>thead>tr.active>th,
.table>thead>tr>td.active, .table>thead>tr>td.active,
.table>thead>tr>th.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, .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:hover>.active,
.table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>td.active:hover,
.table-hover>tbody>tr>th.active:hover { .table-hover>tbody>tr>th.active:hover {
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
} }
.table .table { .table .table {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.label-default { .label-default {
@ -356,7 +357,7 @@ fieldset[disabled] .btn-primary:hover {
.bootbox-form .checkbox i, .bootbox-form .checkbox i,
.switch i { .switch i {
background: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
.btn.focus, .btn.focus,
@ -392,7 +393,7 @@ fieldset[disabled] .btn-primary:hover {
.ui-select-bootstrap>.ui-select-match>.btn:focus { .ui-select-bootstrap>.ui-select-match>.btn:focus {
text-align: left !important; text-align: left !important;
color: var(--button-text-hover); color: var(--button-text-hover);
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
border-color: #00000000; border-color: #00000000;
} }
@ -405,7 +406,7 @@ fieldset[disabled] .btn-primary:hover {
.pagination>.disabled>span:hover { .pagination>.disabled>span:hover {
color: var(--text-muted); color: var(--text-muted);
cursor: not-allowed; cursor: not-allowed;
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
border-color: transparent; border-color: transparent;
} }
@ -446,7 +447,7 @@ select:focus, select.form-control:focus {
} }
.form-control { .form-control {
background-color: rgba(255, 255, 255, 0.15) !important; background: var(--transparency-light-15) !important;
border: 1px solid transparent; border: 1px solid transparent;
color: var(--text); color: var(--text);
} }
@ -492,14 +493,14 @@ output {
.dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:hover,
.ui-select-bootstrap .ui-select-choices-row.active>span { .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:focus,
.ui-select-bootstrap .ui-select-choices-row>span:hover, .ui-select-bootstrap .ui-select-choices-row>span:hover,
.ui-select-choices-row:hover { .ui-select-choices-row:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
/* APP TEMPLATES */ /* APP TEMPLATES */
@ -513,7 +514,7 @@ output {
/* ADD NETWORK */ /* ADD NETWORK */
.boxselector_wrapper input[type=radio]:checked+label { .boxselector_wrapper input[type=radio]:checked+label {
background: rgba(255, 255, 255, .15); background: var(--transparency-light-15);
color: var(--text-hover); color: var(--text-hover);
border-color: transparent; border-color: transparent;
} }
@ -521,7 +522,7 @@ output {
.boxselector_wrapper label { .boxselector_wrapper label {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -554,13 +555,13 @@ output {
/* STACKS */ /* STACKS */
.CodeMirror { .CodeMirror {
background: rgba(255, 255, 255, 0.10); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
.CodeMirror-gutters { .CodeMirror-gutters {
border-right: 1px solid rgba(255, 255, 255, 0.25); 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); caret-color: var(--text-hover);
} }
@ -584,7 +585,7 @@ output {
.nav-tabs>li.active>a:hover { .nav-tabs>li.active>a:hover {
color: var(--text-hover); color: var(--text-hover);
cursor: default; cursor: default;
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
border: 1px solid #ddd0; border: 1px solid #ddd0;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@ -596,18 +597,18 @@ output {
.nav>li>a:focus, .nav>li>a:focus,
.nav>li>a:hover { .nav>li>a:hover {
text-decoration: none; text-decoration: none;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.nav-tabs>li>a { .nav-tabs>li>a {
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15)
} }
/* LOGS */ /* LOGS */
.log_viewer { .log_viewer {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -623,7 +624,7 @@ json-tree .key {
pre { pre {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -690,17 +691,17 @@ pre {
} }
.widget .widget-body table .ng-scope tr { .widget .widget-body table .ng-scope tr {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.widget .widget-body table thead { .widget .widget-body table thead {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
.widget .widget-body table tbody .ng-isolate-scope div { .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; background: rgba(0, 0, 0, 0) !important;
} }
@ -710,6 +711,6 @@ pre {
} }
.widget .widget-body table thead tr:hover { .widget .widget-body table thead tr:hover {
background-color: rgba(0, 0, 0, .35) !important; background: var(--transparency-dark-35) !important;
background: rgba(0, 0, 0, .35) !important; background: var(--transparency-dark-35) !important;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -166,7 +167,7 @@ a:hover {
} }
[class*="SelectInput-select-"] { [class*="SelectInput-select-"] {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="SelectInput-select-"]:active, [class*="SelectInput-select-"]:active,
@ -183,7 +184,7 @@ a:hover {
} }
[class*="AutoSuggestInput-suggestionHighlighted-"] { [class*="AutoSuggestInput-suggestionHighlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
@ -200,7 +201,7 @@ a:hover {
/* HEADER */ /* HEADER */
[class*="PageHeader-header-"] { [class*="PageHeader-header-"] {
background-color: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
box-shadow: none; box-shadow: none;
color: var(--text); color: var(--text);
} }
@ -231,16 +232,16 @@ a:hover {
} }
[class*="IndexerSearchInput-highlighted-"] { [class*="IndexerSearchInput-highlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="IndexerSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { [class*="IndexerSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* SIDE MENU */ /* SIDE MENU */
[class*="PageSidebar-sidebarContainer-"] { [class*="PageSidebar-sidebarContainer-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="PageSidebar-sidebar-"] { [class*="PageSidebar-sidebar-"] {
@ -263,7 +264,7 @@ a:hover {
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -310,15 +311,15 @@ a:hover {
} }
[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] { [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="AddListMoviePoster-title-"] { [class*="AddListMoviePoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="MovieIndexOverview-content-"]:hover { [class*="MovieIndexOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="MovieIndexOverview-link-"]:hover { [class*="MovieIndexOverview-link-"]:hover {
@ -326,7 +327,7 @@ a:hover {
} }
[class*="ProgressBar-container-"] { [class*="ProgressBar-container-"] {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
[class*=".ProgressBar-purple-"] { [class*=".ProgressBar-purple-"] {
@ -337,7 +338,7 @@ a:hover {
[class*="MovieDetailsSeason-season-"], [class*="MovieDetailsSeason-season-"],
[class*="MovieDetailsSeason-collapseButtonContainer-"] { [class*="MovieDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="MovieDetailsSeason-actionButton-"], [class*="MovieDetailsSeason-actionButton-"],
@ -376,17 +377,17 @@ a:hover {
[class*="MovieDetailsSeason-collapseButtonContainer-"] { [class*="MovieDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="MovieFileEditorTable-container-"] { [class*="MovieFileEditorTable-container-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
[class*="ExtraFileTable-container-"] { [class*="ExtraFileTable-container-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.Table-table-2C3O8 { .Table-table-2C3O8 {
@ -498,7 +499,7 @@ a:hover {
/* Table options*/ /* Table options*/
[class*="TableOptionsColumn-column-"] { [class*="TableOptionsColumn-column-"] {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
border: none; border: none;
} }
@ -512,17 +513,17 @@ a:hover {
} }
[class*="TableRow-row-"]:hover { [class*="TableRow-row-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="TableRowCell-cell-"] { [class*="TableRowCell-cell-"] {
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
/* TOP MENU SERIES */ /* TOP MENU SERIES */
[class*="PageToolbar-toolbar-"] { [class*="PageToolbar-toolbar-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -558,7 +559,7 @@ a:hover {
[class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"],
[class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"],
[class*="MovieCreditPoster-title-"] { [class*="MovieCreditPoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -585,13 +586,13 @@ a:hover {
[class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:hover,
[class*="MenuItem-menuItem-"]:focus { [class*="MenuItem-menuItem-"]:focus {
background: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
} }
[class*="MenuItemSeparator-separator-"] { [class*="MenuItemSeparator-separator-"] {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* ALPHABET JUMP BAR */ /* ALPHABET JUMP BAR */
@ -602,12 +603,12 @@ a:hover {
/* MINI RIGHT SCROLL BAR */ /* MINI RIGHT SCROLL BAR */
[class*="OverlayScroller-thumb-"], [class*="OverlayScroller-thumb-"],
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="OverlayScroller-thumb-"]:hover, [class*="OverlayScroller-thumb-"]:hover,
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
/* ADD NEW */ /* ADD NEW */
@ -631,12 +632,12 @@ a:hover {
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background: var(--transparency-light-20) !important;
color: var(--text-hover); color: var(--text-hover);
} }
[class*="EnhancedSelectInputOption-option-"]:hover { [class*="EnhancedSelectInputOption-option-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="HintedSelectInputOption-hintText-"] { [class*="HintedSelectInputOption-hintText-"] {
@ -674,7 +675,7 @@ a:hover {
[class*="AddNewMovie-searchIconContainer-"], [class*="AddNewMovie-searchIconContainer-"],
[class*="CheckInput-isIndeterminate-"] { [class*="CheckInput-isIndeterminate-"] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -701,7 +702,7 @@ a:hover {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="TagInput-input-"][class*="TagInput-isFocused-"] { [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@ -724,7 +725,7 @@ a:hover {
[class*="AddNewMovieSearchResult-searchResult-"]:hover, [class*="AddNewMovieSearchResult-searchResult-"]:hover,
[class*="AddNewMovieSearchResult-underlay-"]:hover { [class*="AddNewMovieSearchResult-underlay-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="AddNewmovieModalContent-year-"] { [class*="AddNewmovieModalContent-year-"] {
@ -749,13 +750,13 @@ a:hover {
} }
[class*="VirtualTableRow-row-"]:hover { [class*="VirtualTableRow-row-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* Drop down menu/button*/ /* Drop down menu/button*/
[class*="ImportMovieSelectMovie-button-"] { [class*="ImportMovieSelectMovie-button-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="ImportMovieSelectMovie-content-"], [class*="ImportMovieSelectMovie-content-"],
@ -773,7 +774,7 @@ a:hover {
} }
[class*="ImportMovieSearchResult-movie-"]:hover { [class*="ImportMovieSearchResult-movie-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="ImportMovieTitle-year-"] { [class*="ImportMovieTitle-year-"] {
@ -800,17 +801,17 @@ a:hover {
} }
[class*="AddListMovieOverview-content-"]:hover { [class*="AddListMovieOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="PageJumpBarItem-jumpBarItem-"]:hover { [class*="PageJumpBarItem-jumpBarItem-"]:hover {
color: var(--text-hover); color: var(--text-hover);
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/*Posters*/ /*Posters*/
[class*="AddListMoviePoster-title-"] { [class*="AddListMoviePoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -818,7 +819,7 @@ a:hover {
/* FOOTER */ /* FOOTER */
[class*="PageContentFooter-contentFooter-"] { [class*="PageContentFooter-contentFooter-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -874,17 +875,17 @@ a:hover {
} }
[class*="DayOfWeek-dayOfWeek-"] { [class*="DayOfWeek-dayOfWeek-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="CalendarDay-dayOfMonth-"] { [class*="CalendarDay-dayOfMonth-"] {
border-bottom: 1px solid hsla(0, 0%, 100%, .08); border-bottom: 1px solid hsla(0, 0%, 100%, .08);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="CalendarDay-isToday-"] { [class*="CalendarDay-isToday-"] {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="CalendarDay-day-"], [class*="CalendarDay-day-"],
@ -932,7 +933,7 @@ a:hover {
/* calendar agenda */ /* calendar agenda */
[class*="AgendaEvent-event-"]:hover { [class*="AgendaEvent-event-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* SETTINGS */ /* SETTINGS */
@ -959,15 +960,15 @@ a:hover {
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-example-"] { [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"] { [class*="NamingOption-option-"] {
@ -975,17 +976,17 @@ a:hover {
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 2550, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 2550, 0.35); background: var(--transparency-light-35);
} }
/* PROFILES */ /* PROFILES */
[class*="Card-card-"], [class*="Card-card-"],
[class*="QualityProfiles-addQualityProfile-"] { [class*="QualityProfiles-addQualityProfile-"] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
@ -1018,12 +1019,12 @@ a:hover {
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
[class*="LanguageProfileItem-languageProfileItem-"] { [class*="LanguageProfileItem-languageProfileItem-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
[class*="QualityDefinitions-sizeLimitHelpText-"] { [class*="QualityDefinitions-sizeLimitHelpText-"] {
@ -1039,7 +1040,7 @@ a:hover {
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
/* Indexers */ /* Indexers */
@ -1076,7 +1077,7 @@ a:hover {
/* LOG */ /* LOG */
[class*="Alert-info-"] { [class*="Alert-info-"] {
border-color: transparent; border-color: transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: #FFC107; color: #FFC107;
} }
@ -1102,12 +1103,12 @@ a:hover {
/* Login Page */ /* Login Page */
.panel-body { .panel-body {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
.panel-header { .panel-header {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
.forgot-password { .forgot-password {
@ -1117,7 +1118,7 @@ a:hover {
input[type=email], input[type=email],
input[type=password] { input[type=password] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -1138,7 +1139,7 @@ input[type=password] {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* Custom filter */ /* Custom filter */
@ -1147,7 +1148,7 @@ input[type=password] {
} }
[class*="CustomFilter-customFilter-"]:hover { [class*="CustomFilter-customFilter-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="SelectMovieModalContent-path-"] { [class*="SelectMovieModalContent-path-"] {
@ -1157,7 +1158,7 @@ input[type=password] {
/* ChartJS */ /* ChartJS */
[class*="Stats-fullWidthChart-"], [class*="Stats-fullWidthChart-"],
[class*="Stats-halfWidthChart-"] { [class*="Stats-halfWidthChart-"] {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
canvas { canvas {
@ -1170,20 +1171,20 @@ canvas {
} }
[class*="QueryParameterOption-token-"] { [class*="QueryParameterOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="QueryParameterOption-example-"] { [class*="QueryParameterOption-example-"] {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="QueryParameterOption-option-"]:hover [class*="QueryParameterOption-token-"] { [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-"] { [class*="QueryParameterOption-option-"]:hover [class*="QueryParameterOption-example-"] {
background-color: rgba(255, 255, 2550, 0.35); background: var(--transparency-light-35);
} }
/* HISTORY */ /* HISTORY */
@ -1195,7 +1196,7 @@ canvas {
} }
[class*="HistoryRowParameter-value-"] { [class*="HistoryRowParameter-value-"] {
background-color: rgb(255 255 255 / 50%); background: var(--transparency-light-50);
color: #1f1f1f; color: #1f1f1f;
} }

View File

@ -12,6 +12,7 @@
@import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
@ -19,13 +20,13 @@
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
html, html,
@ -60,13 +61,13 @@ body {
input:disabled { input:disabled {
color: rgb(84, 84, 84); color: rgb(84, 84, 84);
cursor: default; cursor: default;
background-color: rgb(255, 255, 255, .05) !important; background: var(--transparency-light-05) !important;
border: none !important; border: none !important;
} }
input[type="text"i] { input[type="text"i] {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-width: 0px; border-width: 0px;
outline: none; outline: none;
border: none; border: none;
@ -75,7 +76,7 @@ input[type="text"i] {
input[type="password"i] { input[type="password"i] {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-width: 0px; border-width: 0px;
outline: none; outline: none;
border: none; border: none;
@ -84,7 +85,7 @@ input[type="password"i] {
input[type="number"i] { input[type="number"i] {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-width: 0px; border-width: 0px;
outline: none; outline: none;
border: none; border: none;
@ -92,7 +93,7 @@ input[type="number"i] {
input[type="file"i] { input[type="file"i] {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-width: 0px; border-width: 0px;
outline: none; outline: none;
border: none; border: none;
@ -162,7 +163,7 @@ h4,
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
padding-top: 0; padding-top: 0;
/* background: rgba(0, 0, 0, 0.25); */ /* background: var(--transparency-dark-25) */
width: 400px; width: 400px;
height: 460px; height: 460px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
@ -210,7 +211,7 @@ label {
} }
#desktopNavbar { #desktopNavbar {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
height: 20px; height: 20px;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
@ -221,11 +222,11 @@ label {
#desktopNavbar ul li a:hover { #desktopNavbar ul li a:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
#desktopNavbar li ul li a:hover { #desktopNavbar li ul li a:hover {
background: rgba(255, 255, 255, .08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -270,7 +271,7 @@ label {
} }
.dynamicTable th { .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; border-right-color: rgba(255, 255, 255, .08) !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -284,20 +285,20 @@ label {
} }
.dynamicTable { .dynamicTable {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.dynamicTable tbody tr { .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:nth-child(even),
.dynamicTable tbody tr.alt { .dynamicTable tbody tr.alt {
background-color: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
} }
.dynamicTable tbody tr:hover { .dynamicTable tbody tr:hover {
background-color: rgba(255, 255, 255, 0.15) !important; background: var(--transparency-light-15) !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -342,7 +343,7 @@ li.divider {
#main input[type="text"i] { #main input[type="text"i] {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-width: 0px; border-width: 0px;
outline: none; outline: none;
border: none; border: none;
@ -353,12 +354,12 @@ li.divider {
} }
#main input[type="text"i]:focus { #main input[type="text"i]:focus {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
} }
#main input[type="password"i] { #main input[type="password"i] {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-width: 0px; border-width: 0px;
outline: none; outline: none;
border: none; border: none;
@ -369,7 +370,7 @@ li.divider {
} }
#main input[type="password"i] { #main input[type="password"i] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
} }
#loginform #login { #loginform #login {
@ -458,13 +459,13 @@ ul.filterList li:hover:before {
} }
.columnHandle { .columnHandle {
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
border: 1px solid transparent; border: 1px solid transparent;
} }
/*Sidemenu - Bottom menu*/ /*Sidemenu - Bottom menu*/
.bottomPanel { .bottomPanel {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
/* Bottom menu */ /* Bottom menu */
@ -473,7 +474,7 @@ ul.filterList li:hover:before {
} }
.panel-header { .panel-header {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
border-bottom: 1px solid transparent !important; border-bottom: 1px solid transparent !important;
} }
@ -501,11 +502,11 @@ ul.filterList li:hover:before {
} }
.tab-menu li a:hover { .tab-menu li a:hover {
background: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
} }
.toolbarTabs { .toolbarTabs {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.progressbar_dark { .progressbar_dark {
@ -514,7 +515,7 @@ ul.filterList li:hover:before {
} }
.progressbar_light { .progressbar_light {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -550,13 +551,13 @@ fieldset {
.mochaToolButton { .mochaToolButton {
margin-right: 10px; margin-right: 10px;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-radius: 5px; border-radius: 5px;
} }
.mochaToolButton:hover { .mochaToolButton:hover {
margin-right: 10px; margin-right: 10px;
background: rgba(255, 255, 255, .25); background: var(--transparency-light-25);
border-radius: 5px; border-radius: 5px;
} }
@ -578,7 +579,7 @@ fieldset {
width: 100%; width: 100%;
position: relative; position: relative;
height: 29px; height: 29px;
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
overflow: hidden; overflow: hidden;
border-top: none !important; border-top: none !important;
} }
@ -618,14 +619,14 @@ fieldset.settings {
textarea:disabled { textarea:disabled {
color: rgb(84, 84, 84); color: rgb(84, 84, 84);
cursor: default; cursor: default;
background-color: rgb(255, 255, 255, .05) !important; background: var(--transparency-light-05) !important;
border: none !important; border: none !important;
} }
textarea { textarea {
color: var(--text-hover) !important; color: var(--text-hover) !important;
cursor: default; cursor: default;
background-color: rgb(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
border: none !important; border: none !important;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { :root {
--calendar-in-cinemas: 53 197 244; --calendar-in-cinemas: 53 197 244;
@ -168,7 +169,7 @@ a:hover {
} }
[class*="SelectInput-select-"] { [class*="SelectInput-select-"] {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="SelectInput-select-"]:active, [class*="SelectInput-select-"]:active,
@ -185,7 +186,7 @@ a:hover {
} }
[class*="AutoSuggestInput-suggestionHighlighted-"] { [class*="AutoSuggestInput-suggestionHighlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
@ -201,7 +202,7 @@ a:hover {
/* HEADER */ /* HEADER */
[class*="PageHeader-header-"] { [class*="PageHeader-header-"] {
background-color: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
color: var(--text); color: var(--text);
} }
@ -231,16 +232,16 @@ a:hover {
} }
[class*="MovieSearchInput-highlighted-"] { [class*="MovieSearchInput-highlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { [class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* SIDE MENU */ /* SIDE MENU */
[class*="PageSidebar-sidebarContainer-"] { [class*="PageSidebar-sidebarContainer-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="PageSidebar-sidebar-"] { [class*="PageSidebar-sidebar-"] {
@ -263,7 +264,7 @@ a:hover {
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -316,15 +317,15 @@ a:hover {
} }
[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] { [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="AddListMoviePoster-title-"] { [class*="AddListMoviePoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="MovieIndexOverview-content-"]:hover { [class*="MovieIndexOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="MovieIndexOverview-link-"]:hover { [class*="MovieIndexOverview-link-"]:hover {
@ -332,7 +333,7 @@ a:hover {
} }
[class*="ProgressBar-container-"] { [class*="ProgressBar-container-"] {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
[class*=".ProgressBar-purple-"] { [class*=".ProgressBar-purple-"] {
@ -343,7 +344,7 @@ a:hover {
[class*="MovieDetailsSeason-season-"], [class*="MovieDetailsSeason-season-"],
[class*="MovieDetailsSeason-collapseButtonContainer-"] { [class*="MovieDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="MovieDetailsSeason-actionButton-"], [class*="MovieDetailsSeason-actionButton-"],
@ -386,17 +387,17 @@ a:hover {
[class*="MovieDetailsSeason-collapseButtonContainer-"] { [class*="MovieDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="MovieFileEditorTable-container-"] { [class*="MovieFileEditorTable-container-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
[class*="ExtraFileTable-container-"] { [class*="ExtraFileTable-container-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
@ -509,7 +510,7 @@ a:hover {
/* Table options*/ /* Table options*/
[class*="TableOptionsColumn-column-"] { [class*="TableOptionsColumn-column-"] {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
border: none; border: none;
} }
@ -523,17 +524,17 @@ a:hover {
} }
[class*="TableRow-row-"]:hover { [class*="TableRow-row-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="TableRowCell-cell-"] { [class*="TableRowCell-cell-"] {
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
/* TOP MENU SERIES */ /* TOP MENU SERIES */
[class*="PageToolbar-toolbar-"] { [class*="PageToolbar-toolbar-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -569,7 +570,7 @@ a:hover {
[class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"],
[class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"],
[class*="MovieCreditPoster-title-"] { [class*="MovieCreditPoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -596,13 +597,13 @@ a:hover {
[class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:hover,
[class*="MenuItem-menuItem-"]:focus { [class*="MenuItem-menuItem-"]:focus {
background: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
} }
[class*="MenuItemSeparator-separator-"] { [class*="MenuItemSeparator-separator-"] {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* ALPHABET JUMP BAR */ /* ALPHABET JUMP BAR */
@ -613,12 +614,12 @@ a:hover {
/* MINI RIGHT SCROLL BAR */ /* MINI RIGHT SCROLL BAR */
[class*="OverlayScroller-thumb-"], [class*="OverlayScroller-thumb-"],
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="OverlayScroller-thumb-"]:hover, [class*="OverlayScroller-thumb-"]:hover,
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
/* ADD NEW */ /* ADD NEW */
@ -642,12 +643,12 @@ a:hover {
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background: var(--transparency-light-20) !important;
color: var(--text-hover); color: var(--text-hover);
} }
[class*="EnhancedSelectInputOption-option-"]:hover { [class*="EnhancedSelectInputOption-option-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="HintedSelectInputOption-hintText-"] { [class*="HintedSelectInputOption-hintText-"] {
@ -686,7 +687,7 @@ a:hover {
[class*="AddNewMovie-searchIconContainer-"], [class*="AddNewMovie-searchIconContainer-"],
[class*="CheckInput-isIndeterminate-"] { [class*="CheckInput-isIndeterminate-"] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -713,7 +714,7 @@ a:hover {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="TagInput-input-"][class*="TagInput-isFocused-"] { [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@ -742,7 +743,7 @@ a:hover {
[class*="AddNewMovieSearchResult-searchResult-"]:hover, [class*="AddNewMovieSearchResult-searchResult-"]:hover,
[class*="AddNewMovieSearchResult-underlay-"]:hover { [class*="AddNewMovieSearchResult-underlay-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="AddNewmovieModalContent-year-"] { [class*="AddNewmovieModalContent-year-"] {
@ -767,13 +768,13 @@ a:hover {
} }
[class*="VirtualTableRow-row-"]:hover { [class*="VirtualTableRow-row-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* Drop down menu/button*/ /* Drop down menu/button*/
[class*="ImportMovieSelectMovie-button-"] { [class*="ImportMovieSelectMovie-button-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="ImportMovieSelectMovie-content-"], [class*="ImportMovieSelectMovie-content-"],
@ -791,7 +792,7 @@ a:hover {
} }
[class*="ImportMovieSearchResult-movie-"]:hover { [class*="ImportMovieSearchResult-movie-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="ImportMovieTitle-year-"] { [class*="ImportMovieTitle-year-"] {
@ -810,7 +811,7 @@ a:hover {
[class*="DiscoverMoviePoster-title-"], [class*="DiscoverMoviePoster-title-"],
[class*="DiscoverMoviePosterInfo-info-"] { [class*="DiscoverMoviePosterInfo-info-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -824,17 +825,17 @@ a:hover {
} }
[class*="AddListMovieOverview-content-"]:hover { [class*="AddListMovieOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="PageJumpBarItem-jumpBarItem-"]:hover { [class*="PageJumpBarItem-jumpBarItem-"]:hover {
color: var(--text-hover); color: var(--text-hover);
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/*Posters*/ /*Posters*/
[class*="AddListMoviePoster-title-"] { [class*="AddListMoviePoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -842,7 +843,7 @@ a:hover {
/* FOOTER */ /* FOOTER */
[class*="PageContentFooter-contentFooter-"] { [class*="PageContentFooter-contentFooter-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -928,18 +929,18 @@ a:hover {
} }
[class*="DayOfWeek-dayOfWeek-"] { [class*="DayOfWeek-dayOfWeek-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="CalendarDay-dayOfMonth-"] { [class*="CalendarDay-dayOfMonth-"] {
border-bottom: 1px solid hsla(0, 0%, 100%, .08); border-bottom: 1px solid hsla(0, 0%, 100%, .08);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="CalendarDay-isToday-"], [class*="CalendarDay-isToday-"],
[class*="DayOfWeek-isToday-"] { [class*="DayOfWeek-isToday-"] {
background-color: hsla(0, 0%, 100%, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="CalendarDay-day-"], [class*="CalendarDay-day-"],
@ -990,7 +991,7 @@ a:hover {
/* calendar agenda */ /* calendar agenda */
[class*="AgendaEvent-event-"]:hover { [class*="AgendaEvent-event-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* SETTINGS */ /* SETTINGS */
@ -1017,15 +1018,15 @@ a:hover {
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-example-"] { [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"] { [class*="NamingOption-option-"] {
@ -1033,17 +1034,17 @@ a:hover {
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 2550, 0.25); background: var(--transparency-dark-25);
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 2550, 0.35); background: var(--transparency-dark-35);
} }
/* PROFILES */ /* PROFILES */
[class*="Card-card-"], [class*="Card-card-"],
[class*="QualityProfiles-addQualityProfile-"] { [class*="QualityProfiles-addQualityProfile-"] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
@ -1068,12 +1069,12 @@ a:hover {
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
[class*="LanguageProfileItem-languageProfileItem-"] { [class*="LanguageProfileItem-languageProfileItem-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
[class*="KeyValueListInputItem-keyInput-"], [class*="KeyValueListInputItem-keyInput-"],
@ -1085,7 +1086,7 @@ a:hover {
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
[class*="QualityDefinitions-sizeLimitHelpText-"] { [class*="QualityDefinitions-sizeLimitHelpText-"] {
@ -1119,7 +1120,7 @@ a:hover {
/* LOG */ /* LOG */
[class*="Alert-info-"] { [class*="Alert-info-"] {
border-color: transparent; border-color: transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: #FFC107; color: #FFC107;
} }
@ -1145,12 +1146,12 @@ a:hover {
/* Login Page */ /* Login Page */
.panel-body { .panel-body {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
.panel-header { .panel-header {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
.forgot-password { .forgot-password {
@ -1160,7 +1161,7 @@ a:hover {
input[type=email], input[type=email],
input[type=password] { input[type=password] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -1181,7 +1182,7 @@ input[type=password] {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* Custom filter */ /* Custom filter */
@ -1190,7 +1191,7 @@ input[type=password] {
} }
[class*="CustomFilter-customFilter-"]:hover { [class*="CustomFilter-customFilter-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="SelectMovieModalContent-path-"] { [class*="SelectMovieModalContent-path-"] {

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { :root {
--calendar-downloaded: 39 194 76; --calendar-downloaded: 39 194 76;
@ -168,7 +169,7 @@ a:hover {
} }
[class*="SelectInput-select-"] { [class*="SelectInput-select-"] {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="SelectInput-select-"]:active, [class*="SelectInput-select-"]:active,
@ -185,7 +186,7 @@ a:hover {
} }
[class*="AutoSuggestInput-suggestionHighlighted-"] { [class*="AutoSuggestInput-suggestionHighlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
@ -201,7 +202,7 @@ a:hover {
/* HEADER */ /* HEADER */
[class*="PageHeader-header-"] { [class*="PageHeader-header-"] {
background-color: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
color: var(--text); color: var(--text);
} }
@ -231,25 +232,25 @@ a:hover {
} }
[class*="AuthorSearchInput-highlighted-"] { [class*="AuthorSearchInput-highlighted-"] {
background-color: hsla(0, 0%, 100%, .08) background: var(--transparency-dark-10)
} }
[class*"=AuthorSearchInput-authorContainer-"]::-webkit-scrollbar-thumb, [class*"=AuthorSearchInput-authorContainer-"]::-webkit-scrollbar-thumb,
[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb { [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* MINI RIGHT SCROLL BAR */ /* MINI RIGHT SCROLL BAR */
[class*="OverlayScroller-thumb-"], [class*="OverlayScroller-thumb-"],
[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb, [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb,
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="OverlayScroller-thumb-"]:hover, [class*="OverlayScroller-thumb-"]:hover,
[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover, [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover,
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
/* ADD NEW */ /* ADD NEW */
@ -272,12 +273,12 @@ a:hover {
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background: var(--transparency-light-20) !important;
color: var(--text-hover); color: var(--text-hover);
} }
[class*="EnhancedSelectInputOption-option-"]:hover { [class*="EnhancedSelectInputOption-option-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="HintedSelectInputOption-hintText-"] { [class*="HintedSelectInputOption-hintText-"] {
@ -313,7 +314,7 @@ a:hover {
/* SIDE MENU */ /* SIDE MENU */
[class*="PageSidebar-sidebarContainer-"] { [class*="PageSidebar-sidebarContainer-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="PageSidebar-sidebar-"] { [class*="PageSidebar-sidebar-"] {
@ -336,7 +337,7 @@ a:hover {
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -384,7 +385,7 @@ a:hover {
} }
[class*="AuthorIndexOverview-content-"]:hover { [class*="AuthorIndexOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="AuthorIndexOverview-link-"]:hover { [class*="AuthorIndexOverview-link-"]:hover {
@ -392,7 +393,7 @@ a:hover {
} }
[class*="ProgressBar-container-"] { [class*="ProgressBar-container-"] {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
[class*=".ProgressBar-purple-"] { [class*=".ProgressBar-purple-"] {
@ -404,7 +405,7 @@ a:hover {
[class*="AuthorDetailsSeason-albumType-"], [class*="AuthorDetailsSeason-albumType-"],
[class*="AuthorDetailsSeason-collapseButtonContainer-"] { [class*="AuthorDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="AuthorDetailsSeason-header-"], [class*="AuthorDetailsSeason-header-"],
@ -451,12 +452,12 @@ a:hover {
[class*="AlbumDetailsMedium-medium-"] { [class*="AlbumDetailsMedium-medium-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="ExtraFileTable-container-"] { [class*="ExtraFileTable-container-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="AlbumDetails-selectedTab-"] { [class*="AlbumDetails-selectedTab-"] {
@ -465,16 +466,16 @@ a:hover {
[class*="AlbumDetailsMedium-collapseButtonContainer-"] { [class*="AlbumDetailsMedium-collapseButtonContainer-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="AuthorIndexProgressBar-progress-"] { [class*="AuthorIndexProgressBar-progress-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="AuthorIndexBanner-title-"], [class*="AuthorIndexBanner-title-"],
[class*="AuthorIndexBannerInfo-info-"] { [class*="AuthorIndexBannerInfo-info-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -583,7 +584,7 @@ a:hover {
/* Table options*/ /* Table options*/
[class*="TableOptionsColumn-column-"] { [class*="TableOptionsColumn-column-"] {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
border: none; border: none;
} }
@ -597,17 +598,17 @@ a:hover {
} }
[class*="TableRow-row-"]:hover { [class*="TableRow-row-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="TableRowCell-cell-"] { [class*="TableRowCell-cell-"] {
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
/* TOP MENU SERIES */ /* TOP MENU SERIES */
[class*="PageToolbar-toolbar-"] { [class*="PageToolbar-toolbar-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -642,7 +643,7 @@ a:hover {
[class*="AuthorIndexPosterInfo-info-"], [class*="AuthorIndexPosterInfo-info-"],
[class*="BookIndexPoster-title-"], [class*="BookIndexPoster-title-"],
[class*="BookIndexPosterInfo-info-"] { [class*="BookIndexPosterInfo-info-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -670,13 +671,13 @@ a:hover {
[class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:hover,
[class*="MenuItem-menuItem-"]:focus { [class*="MenuItem-menuItem-"]:focus {
background: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
} }
[class*="MenuItemSeparator-separator-"] { [class*="MenuItemSeparator-separator-"] {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* ALPHABET JUMP BAR */ /* ALPHABET JUMP BAR */
@ -689,7 +690,7 @@ a:hover {
[class*="AddNewItem-searchIconContainer-"], [class*="AddNewItem-searchIconContainer-"],
[class*="CheckInput-isIndeterminate-"] { [class*="CheckInput-isIndeterminate-"] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -712,7 +713,7 @@ a:hover {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="TagInput-input-"][class*="TagInput-isFocused-"] { [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@ -745,7 +746,7 @@ a:hover {
[class*="AddNewAuthorSearchResult-searchResult-"]:hover, [class*="AddNewAuthorSearchResult-searchResult-"]:hover,
[class*="AddNewAuthorSearchResult-underlay-"]:hover, [class*="AddNewAuthorSearchResult-underlay-"]:hover,
[class*="AddNewAlbumSearchResult-underlay-"]:hover { [class*="AddNewAlbumSearchResult-underlay-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
@ -778,7 +779,7 @@ a:hover {
} }
[class*="ImportAuthorSearchResult-author-"]:hover { [class*="ImportAuthorSearchResult-author-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* IMPORT */ /* IMPORT */
@ -789,14 +790,14 @@ a:hover {
[class*="ExpandingFileDetails-fileDetails-"] { [class*="ExpandingFileDetails-fileDetails-"] {
border: 1px solid rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .1);
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
/* IMPORT NEW ARTIST */ /* IMPORT NEW ARTIST */
/* Drop down menu/button*/ /* Drop down menu/button*/
[class*="ImportAuthorSelectAuthor-button-"] { [class*="ImportAuthorSelectAuthor-button-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -809,14 +810,14 @@ a:hover {
} }
[class*="VirtualTableRow-row-"]:hover { [class*="VirtualTableRow-row-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/*Title*/ /*Title*/
[class*="PageJumpBarItem-jumpBarItem-"]:hover { [class*="PageJumpBarItem-jumpBarItem-"]:hover {
color: var(--text-hover); color: var(--text-hover);
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/*Posters*/ /*Posters*/
@ -827,7 +828,7 @@ a:hover {
/* FOOTER */ /* FOOTER */
[class*="PageContentFooter-contentFooter-"] { [class*="PageContentFooter-contentFooter-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -889,18 +890,18 @@ a:hover {
} }
[class*="DayOfWeek-dayOfWeek-"] { [class*="DayOfWeek-dayOfWeek-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="CalendarDay-dayOfMonth-"] { [class*="CalendarDay-dayOfMonth-"] {
border-bottom: 1px solid hsla(0, 0%, 100%, .08); border-bottom: 1px solid hsla(0, 0%, 100%, .08);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="CalendarDay-isToday-"], [class*="CalendarDay-isToday-"],
[class*="DayOfWeek-isToday-"] { [class*="DayOfWeek-isToday-"] {
background-color: hsla(0, 0%, 100%, .25) !important; background: var(--transparency-dark-25) !important;
color: var(--text-hover); color: var(--text-hover);
} }
@ -943,7 +944,7 @@ color: var(--text-hover) !important;
/* calendar agenda */ /* calendar agenda */
[class*="AgendaEvent-event-"]:hover { [class*="AgendaEvent-event-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* SETTINGS */ /* SETTINGS */
@ -970,15 +971,15 @@ color: var(--text-hover) !important;
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-example-"] { [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"] { [class*="NamingOption-option-"] {
@ -986,17 +987,17 @@ color: var(--text-hover) !important;
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 2550, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 2550, 0.35); background: var(--transparency-light-35);
} }
/* PROFILES */ /* PROFILES */
[class*="Card-card-"], [class*="Card-card-"],
[class*="QualityProfiles-addQualityProfile-"] { [class*="QualityProfiles-addQualityProfile-"] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
@ -1021,12 +1022,12 @@ color: var(--text-hover) !important;
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
[class*="LanguageProfileItem-languageProfileItem-"] { [class*="LanguageProfileItem-languageProfileItem-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
[class*="KeyValueListInputItem-keyInput-"], [class*="KeyValueListInputItem-keyInput-"],
@ -1038,7 +1039,7 @@ color: var(--text-hover) !important;
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
[class*="QualityDefinitions-sizeLimitHelpText-"] { [class*="QualityDefinitions-sizeLimitHelpText-"] {
@ -1053,7 +1054,7 @@ color: var(--text-hover) !important;
[class*="Card-card-"], [class*="Card-card-"],
[class*="QualityProfiles-addQualityProfile-"] { [class*="QualityProfiles-addQualityProfile-"] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
@ -1101,7 +1102,7 @@ color: var(--text-hover) !important;
/* LOG */ /* LOG */
[class*="Alert-info-"] { [class*="Alert-info-"] {
border-color: transparent; border-color: transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: #FFC107; color: #FFC107;
} }
@ -1127,12 +1128,12 @@ color: var(--text-hover) !important;
/* Login Page */ /* Login Page */
.panel-body { .panel-body {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
.panel-header { .panel-header {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
.forgot-password { .forgot-password {
@ -1142,7 +1143,7 @@ color: var(--text-hover) !important;
input[type=email], input[type=email],
input[type=password] { input[type=password] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -1163,7 +1164,7 @@ input[type=password] {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* Custom filter */ /* Custom filter */
@ -1172,7 +1173,7 @@ input[type=password] {
} }
[class*="CustomFilter-customFilter-"]:hover { [class*="CustomFilter-customFilter-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/* Readarr */ /* Readarr */
@ -1181,7 +1182,7 @@ input[type=password] {
[class*="AuthorIndexPoster-link-"], [class*="AuthorIndexPoster-link-"],
[class*="AuthorIndexPoster-title-"] { [class*="AuthorIndexPoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* Add New*/ /* Add New*/
@ -1192,7 +1193,7 @@ input[type=password] {
[class*="AddNewAuthorSearchResult-underlay-"]:hover, [class*="AddNewAuthorSearchResult-underlay-"]:hover,
[class*="AddNewBookSearchResult-underlay-"]:hover { [class*="AddNewBookSearchResult-underlay-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
@ -1203,17 +1204,17 @@ input[type=password] {
} }
[class*="AuthorIndexBanner-title-"] { [class*="AuthorIndexBanner-title-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="AuthorIndexOverview-container-"]:hover [class*="AuthorIndexOverview-content-"] { [class*="AuthorIndexOverview-container-"]:hover [class*="AuthorIndexOverview-content-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/*Books Tab*/ /*Books Tab*/
[class*="AuthorDetailsSeason-bookType-"] { [class*="AuthorDetailsSeason-bookType-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="AuthorDetailsSeason-books-"] { [class*="AuthorDetailsSeason-books-"] {
@ -1231,7 +1232,7 @@ input[type=password] {
[class*="BookshelfBook-book-"] { [class*="BookshelfBook-book-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
; ;
} }
@ -1244,18 +1245,18 @@ input[type=password] {
[class*="BookFileEditorTableContent-filesTable-"] { [class*="BookFileEditorTableContent-filesTable-"] {
border: 1px solid rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 10%);
border-top: 1px solid rgb(255 255 255 / 50%); border-top: 1px solid rgb(255 255 255 / 50%);
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
/*Series Tab*/ /*Series Tab*/
[class*="AuthorDetailsSeries-bookType-"] { [class*="AuthorDetailsSeries-bookType-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="AuthorDetailsSeries-collapseButtonContainer-"] { [class*="AuthorDetailsSeries-collapseButtonContainer-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="AuthorDetailsSeries-bookTypeLabel-"] { [class*="AuthorDetailsSeries-bookTypeLabel-"] {

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
color: var(--text); color: var(--text);
@ -70,20 +71,20 @@ h6,
.nav-link.active:hover, .nav-link.active:hover,
.nav-link.active:focus { .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:focus:not(.nav-link.active),
.navbar-light .navbar-nav .nav-link:hover:not(.nav-link.active) { .navbar-light .navbar-nav .nav-link:hover:not(.nav-link.active) {
color: var(--text-hover); color: var(--text-hover);
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-vertical.navbar-expand-md.fixed-left { .navbar-vertical.navbar-expand-md.fixed-left {
left: 0; left: 0;
border-width: 0 1px 0 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 { .fade {
-webkit-transition: opacity .15s linear; -webkit-transition: opacity .15s linear;
transition: opacity .15s linear; transition: opacity .15s linear;
background: rgba(0, 0, 0, 0.15) !important; background: var(--transparency-dark-15) !important;
} }
.bg-secondary { .bg-secondary {
@ -140,7 +141,7 @@ h6,
.bg-white, .bg-white,
.footer { .footer {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.footer { .footer {
@ -182,7 +183,7 @@ h6,
/* FORMS */ /* FORMS */
.form-control:disabled, .form-control:disabled,
.form-control[readonly] { .form-control[readonly] {
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
opacity: 1; opacity: 1;
border: 1px solid transparent; border: 1px solid transparent;
color: gray; color: gray;
@ -190,12 +191,12 @@ h6,
.form-control-alternative, .form-control-alternative,
.has-danger .form-control { .has-danger .form-control {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.form-control-alternative:focus { .form-control-alternative:focus {
background: rgba(0, 0, 0, 0.5); background: var(--transparency-dark-50);
} }
.form-control:focus { .form-control:focus {
@ -203,7 +204,7 @@ h6,
} }
.has-success .form-control { .has-success .form-control {
background-color: rgba(0, 0, 0, 0.5); background-color: var(--transparency-dark-50);
} }
.form-control { .form-control {
@ -236,7 +237,7 @@ h6,
.react-dropdown-select.dropdown { .react-dropdown-select.dropdown {
color: var(--text); color: var(--text);
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
.react-dropdown-select.dropdown .react-dropdown-select-item-selected { .react-dropdown-select.dropdown .react-dropdown-select-item-selected {
@ -279,7 +280,7 @@ h6,
.btn-default, .btn-default,
.btn-default:hover { .btn-default:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
border-color: transparent; border-color: transparent;
} }
@ -287,14 +288,14 @@ h6,
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled):active,
.show>.btn-default.dropdown-toggle { .show>.btn-default.dropdown-toggle {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.26); background-color: var(--transparency-dark-25);
border-color: transparent; border-color: transparent;
} }
.btn-default.disabled, .btn-default.disabled,
.btn-default:disabled { .btn-default:disabled {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
border-color: transparent; border-color: transparent;
opacity: .5; opacity: .5;
} }
@ -327,19 +328,19 @@ h6,
} }
#root>div>div.mt--8.pb-5.container>div>div>div { #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(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(2)>div>input,
#root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(3)>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; border: 10px solid transparent;
} }
.input-group-text { .input-group-text {
color: var(--text); color: var(--text);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: 1px solid transparent !important; border: 1px solid transparent !important;
} }
@ -381,7 +382,7 @@ h6,
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -393,6 +394,6 @@ h6,
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }

View File

@ -12,6 +12,7 @@
@import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css); @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, body,
.tableScrollContainer, .tableScrollContainer,
@ -78,7 +79,7 @@ a:hover {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -90,7 +91,7 @@ a:hover {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -142,34 +143,34 @@ UL.jqueryFileTree A,
/* NAVBAR */ /* NAVBAR */
.bt-navbar { .bt-navbar {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
.bt-navbar .btn.dropdown-toggle { .bt-navbar .btn.dropdown-toggle {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
.bt-navbar .btn.dropdown-toggle:hover { .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,
.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)); border-bottom-color: rgb(var(--accent-color));
} }
.bt-navbar .btn:hover { .bt-navbar .btn:hover {
background-color: rgb(255 255 255 / 8%) !important; background: var(--transparency-light-10) !important;
} }
.bt-navbar .btn#try-pro-button { .bt-navbar .btn#try-pro-button {
background-color: rgb(0 0 0 / 50%); background: var(--transparency-dark-50);
color: var(--button-text); color: var(--button-text);
} }
.bt-navbar .btn#try-pro-button:hover { .bt-navbar .btn#try-pro-button:hover {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
.bt-navbar .btn.btn-tab { .bt-navbar .btn.btn-tab {
@ -206,12 +207,12 @@ UL.jqueryFileTree A,
.dropdown-menu li a:focus, .dropdown-menu li a:focus,
.dropdown-menu li a:hover { .dropdown-menu li a:hover {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
#columns-context .bt-checkbox:hover { #columns-context .bt-checkbox:hover {
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
} }
.context-menu .bt-checkbox label, .context-menu .bt-checkbox label,
@ -229,12 +230,12 @@ UL.jqueryFileTree A,
} }
.sync-level .add-folder-mode li.selected 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:focus,
.sync-level .add-folder-mode li:not(.selected) a:hover { .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 { .sync-level .add-folder-mode .btn-group {
@ -244,14 +245,14 @@ UL.jqueryFileTree A,
button.selectpicker.btn-default { button.selectpicker.btn-default {
border-color: #ccc0 !important; border-color: #ccc0 !important;
color: var(--text) !important; color: var(--text) !important;
background-color: rgb(0 0 0 / 25%) !important; background: var(--transparency-dark-25) !important;
} }
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
border: none; border: none;
background: rgb(0 0 0 / 50%) !important; background: var(--transparency-dark-50) !important;
} }
.animating { .animating {
@ -331,7 +332,7 @@ button.selectpicker.btn-default {
.bt-navbar #choose-share-type-menu .container-fluid .menu-item:hover, .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:focus,
.bt-navbar .choose-dropdown-menu .container-fluid .menu-item:hover { .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:focus,
.context-menu li a:hover { .context-menu li a:hover {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
@ -387,7 +388,7 @@ button.selectpicker.btn-default {
} }
#general-settings #languagedrop { #general-settings #languagedrop {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border: transparent; border: transparent;
} }
@ -454,17 +455,17 @@ button.selectpicker.btn-default {
} }
#choose-product-dialog .product-container .product { #choose-product-dialog .product-container .product {
background-color: rgb(255 255 255 / 0.08); background-color: var(--transparency-light-10);
border: 1px solid transparent; border: 1px solid transparent;
} }
.modal-header .close:hover { .modal-header .close:hover {
background: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
ul.jqueryFileTree a.active, ul.jqueryFileTree a.active,
ul.jqueryFileTree a:hover { ul.jqueryFileTree a:hover {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -506,7 +507,7 @@ ul.jqueryFileTree a:hover {
#file-sharing-content .shareOptionsContainer .shareOption:hover, #file-sharing-content .shareOptionsContainer .shareOption:hover,
#sharing-content .shareOptionsContainer .shareOption:hover, #sharing-content .shareOptionsContainer .shareOption:hover,
.sharing-dialog-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); color: var(--text-hover);
} }
@ -561,7 +562,7 @@ ul.jqueryFileTree a:hover {
.modal-filter .btn:hover, .modal-filter .btn:hover,
.modal-input .btn:focus, .modal-input .btn:focus,
.modal-filter animating { .modal-filter animating {
background: rgb(255 255 255 / .08) !important; background: var(--transparency-light-10) !important;
} }
/* PAGES */ /* PAGES */
@ -582,7 +583,7 @@ ul.jqueryFileTree a:hover {
#historyContainer .table-filter-panel, #historyContainer .table-filter-panel,
.resizableTableContainer .table-filter-panel, .resizableTableContainer .table-filter-panel,
.tableContainerWithFilterPanel .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%); border-bottom: 1px solid rgb(255 255 255 / 10%);
} }
@ -592,7 +593,7 @@ ul.jqueryFileTree a:hover {
/* FOOTER */ /* FOOTER */
#sync-core-state { #sync-core-state {
background-color: rgb(0 0 0 / 50%); background: var(--transparency-dark-50);
border-top: 1px solid rgb(255 255 255 / 10%); 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:focus,
#statusPanel .nav-pills a.tab-button:hover, #statusPanel .nav-pills a.tab-button:hover,
#statusPanel .nav-pills .active>a { #statusPanel .nav-pills .active>a {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
#statusPanel .tab-content { #statusPanel .tab-content {
@ -632,7 +633,7 @@ ul.jqueryFileTree a:hover {
} }
#statusPanel .chart-wrapper { #statusPanel .chart-wrapper {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
border-right: 1px solid rgba(255, 255, 255, .1); border-right: 1px solid rgba(255, 255, 255, .1);
} }
@ -666,12 +667,12 @@ ul.jqueryFileTree a:hover {
/* SETTINGS */ /* SETTINGS */
.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button.active { .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)); color: rgb(var(--accent-color));
} }
.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) { .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 { .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 { .settings-tabs-wrapper .settings-tabs-buttons {
border-right: 1px solid rgb(255 255 255 / 10%); border-right: 1px solid rgb(255 255 255 / 10%);
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
/* IDENTITY */ /* IDENTITY */
#my-devices .my-devices .single-my-device:hover:not(.disabled) { #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 { #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.active,
.transfer-table .transfer-row .optionsColumn .options-button:hover { .transfer-table .transfer-row .optionsColumn .options-button:hover {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
/* FORMS */ /* FORMS */
.form-control { .form-control {
color: var(--text) !important; color: var(--text) !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
box-shadow: none !important; box-shadow: none !important;
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} }
.form-control:focus { .form-control:focus {
background-color: rgba(0, 0, 0, .5) !important; background: var(--transparency-dark-50) !important;
color: var(--text-hover) !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:active,
#advanced-settings-dialog .verticalScrollContainer tr:focus, #advanced-settings-dialog .verticalScrollContainer tr:focus,
#advanced-settings-dialog .verticalScrollContainer tr:hover { #advanced-settings-dialog .verticalScrollContainer tr:hover {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
.table-hover>tbody>tr.active, .table-hover>tbody>tr.active,
.table-hover>tbody>tr:hover:not(.no-hover) { .table-hover>tbody>tr:hover:not(.no-hover) {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }

View File

@ -13,6 +13,7 @@
@import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); @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(https://fonts.googleapis.com/css?family=Roboto:400,600,700,300);
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
@font-face { @font-face {
font-family: 'Roboto' !important font-family: 'Roboto' !important
@ -49,7 +50,7 @@ div#preload {
} }
hr { hr {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
height: 1px; height: 1px;
border-width: 0; border-width: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
@ -67,7 +68,7 @@ div#cover {
} }
div#msg { div#msg {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-top: 1px solid #3330; border-top: 1px solid #3330;
border-bottom: 1px solid #0000; border-bottom: 1px solid #0000;
font-size: 11px; font-size: 11px;
@ -154,7 +155,7 @@ ul.CMenu li a.dis:hover {
} }
ul.CMenu li hr { ul.CMenu li hr {
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10);
height: 1px; height: 1px;
border-width: 0; border-width: 0;
border-bottom: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08);
@ -168,13 +169,13 @@ ul.CMenu li a.exp {
} }
ul.CMenu li a.exp:hover { ul.CMenu li a.exp:hover {
background: rgba(255, 255, 255, .08); background: var(--transparency-light-10)
; ;
} }
ul.CMenu li a.sel { ul.CMenu li a.sel {
color: var(--text-hover); color: var(--text-hover);
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15)
} }
ul.CMenu li ul li a.sel { ul.CMenu li ul li a.sel {
@ -182,7 +183,7 @@ ul.CMenu li ul li a.sel {
} }
ul.CMenu li a:hover { ul.CMenu li a:hover {
background-color: rgba(255, 255, 255, 0.08) !important; background: var(--transparency-light-10) !important;
color: var(--text-hover); color: var(--text-hover);
text-shadow: 0 -1px 0 #000; text-shadow: 0 -1px 0 #000;
} }
@ -207,7 +208,7 @@ ul.CMenu li ul li a.dis:hover {
} }
div.stable-body table tbody tr.even:nth-child(2n+1) td { 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 { .stable-body td {
@ -233,7 +234,7 @@ div.stable-body table tbody tr.even:nth-child(2n+1) td {
} }
div#t { div#t {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
background-image: none; background-image: none;
border-bottom: none; border-bottom: none;
padding: 4px 0 2px 0; padding: 4px 0 2px 0;
@ -418,7 +419,7 @@ div#stg-header {
div#CatList { div#CatList {
border: none; border: none;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-right: 1px solid transparent; border-right: 1px solid transparent;
border-left: none border-left: none
} }
@ -537,7 +538,7 @@ div.tab {
} }
div#lcont { div#lcont {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
font-family: 'Roboto' font-family: 'Roboto'
} }
@ -549,13 +550,13 @@ div#gcont table td.Header {
} }
div#gcont table tr { div#gcont table tr {
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
font-family: 'Roboto'; font-family: 'Roboto';
color: var(--text); color: var(--text);
} }
div#gcont table tr td { div#gcont table tr td {
background: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
div#gcont table { div#gcont table {
@ -565,11 +566,11 @@ div#gcont table {
div.graph_tab { div.graph_tab {
color: var(--text-hover); color: var(--text-hover);
border-color: transparent; border-color: transparent;
background-color: rgba(0, 0, 0, 0.25) background: var(--transparency-dark-25);
} }
div.table_tab { div.table_tab {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
font-family: 'Roboto' font-family: 'Roboto'
} }
@ -580,14 +581,14 @@ div#modalbg {
div#List { div#List {
margin-right: 6px; margin-right: 6px;
border: none; border: none;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
div#FileList, div#FileList,
div#TrackerList, div#TrackerList,
div#PeerList, div#PeerList,
div#Speed { div#Speed {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.dlg-window { .dlg-window {
@ -614,7 +615,7 @@ a.dlg-close:visited {
} }
div.dlg-header { div.dlg-header {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-bottom: none; border-bottom: none;
font-family: 'Roboto'; font-family: 'Roboto';
text-transform: uppercase; text-transform: uppercase;
@ -626,7 +627,7 @@ div.dlg-header {
font-size: 11px; font-size: 11px;
font-family: monospace; font-family: monospace;
line-height: 11px; line-height: 11px;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
white-space: pre; white-space: pre;
overflow: scroll; overflow: scroll;
height: 198px; height: 198px;
@ -725,7 +726,7 @@ div#tdcont {
} }
div#HDivider { div#HDivider {
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
cursor: e-resize; cursor: e-resize;
height: 0; height: 0;
margin: 0; margin: 0;
@ -735,7 +736,7 @@ div#HDivider {
div#RSSList { div#RSSList {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
overflow: hidden; overflow: hidden;
display: block; display: block;
-moz-user-select: none; -moz-user-select: none;
@ -745,13 +746,13 @@ div#RSSList {
div#HDivider:hover, div#HDivider:hover,
div#VDivider:hover { div#VDivider:hover {
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
div#tcreate textarea#trackers { div#tcreate textarea#trackers {
color: var(--text-hover); color: var(--text-hover);
border: none !important; border: none !important;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-radius: 2px; border-radius: 2px;
cursor: text; cursor: text;
} }
@ -761,7 +762,7 @@ input[type="password"],
select { select {
color: var(--text-hover); color: var(--text-hover);
border: none; 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; border-radius: 2px;
outline: none; outline: none;
} }
@ -772,7 +773,7 @@ input[type="file"][disabled],
select[disabled] { select[disabled] {
color: var(--text-hover); color: var(--text-hover);
border: none; 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; border-radius: 2px;
opacity: .2 opacity: .2
} }
@ -792,7 +793,7 @@ textarea {
#FS_downlink { #FS_downlink {
color: var(--text-hover); color: var(--text-hover);
border: none !important; border: none !important;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-radius: 2px border-radius: 2px
} }
@ -818,7 +819,7 @@ input.Button:focus {
} }
ul#tabbar { ul#tabbar {
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
border: none; border: none;
color: #606060; color: #606060;
height: 24px; height: 24px;
@ -957,19 +958,19 @@ div.dlg-window {
} }
div#yesnoDlg div.dlg-header { div#yesnoDlg div.dlg-header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
text-shadow: 0 -1px 0 #000 text-shadow: 0 -1px 0 #000
} }
div#stg-header { div#stg-header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
text-shadow: 0 -1px 0 #000; text-shadow: 0 -1px 0 #000;
color: var(--text-hover); color: var(--text-hover);
} }
div#dlgHelp-header, div#dlgHelp-header,
div#dlgHelp div.dlg-header { div#dlgHelp div.dlg-header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
text-shadow: 0 -1px 0 #000 text-shadow: 0 -1px 0 #000
} }
@ -980,7 +981,7 @@ div#tadd {
} }
div#tadd-header { div#tadd-header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-bottom: 1px solid #3330; border-bottom: 1px solid #3330;
text-shadow: 0 -1px 0 #000; text-shadow: 0 -1px 0 #000;
} }
@ -1024,7 +1025,7 @@ Input.TextboxLarge {
} }
div.tab { div.tab {
background-color: rgba(0, 0, 0, 0.25) background: var(--transparency-dark-25)
} }
div#t div#ind { div#t div#ind {
@ -1063,7 +1064,7 @@ span#loadimg {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -1075,7 +1076,7 @@ span#loadimg {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -1086,19 +1087,19 @@ input#add_button {
} }
div#lcont div.std { div#lcont div.std {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
height: 17px; height: 17px;
line-height: 17px; line-height: 17px;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
div#lcont div.std:nth-child(2n+1) { div#lcont div.std:nth-child(2n+1) {
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
#StatusBar { #StatusBar {
border-top: 1px solid transparent; border-top: 1px solid transparent;
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
color: #ccc; color: #ccc;
font-family: Roboto font-family: Roboto
} }
@ -1232,7 +1233,7 @@ span.det {
.stable-head { .stable-head {
color: var(--text-hover); color: var(--text-hover);
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
border: none; border: none;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0); text-shadow: 0px 1px 0px rgba(0, 0, 0, 0);
font-family: Ubuntu; font-family: Ubuntu;
@ -1296,13 +1297,13 @@ div#tdcont .stable {
} }
.stable-body tr.selected td { .stable-body tr.selected td {
background: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
color: var(--text-hover); color: var(--text-hover);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0); text-shadow: 0px -1px 0px rgba(0, 0, 0, 0);
} }
div.stable-body table tbody tr.even td { 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) { div.stable-body table tbody tr.even td:nth-child(2n+1) {
@ -1478,7 +1479,7 @@ div.graph_tab {
} }
div#tcreate div.dlg-header { div#tcreate div.dlg-header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
text-shadow: 0px -1px 0px #000; text-shadow: 0px -1px 0px #000;
background-image: none !important; background-image: none !important;
@ -1494,7 +1495,7 @@ div#dlgAddRSS {
div#dlgAddRSS-header, div#dlgAddRSS-header,
div#dlgAddRSS div.dlg-header { div#dlgAddRSS div.dlg-header {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
text-shadow: 0px -1px 0px #000; text-shadow: 0px -1px 0px #000;
background-image: none !important; background-image: none !important;
@ -1746,7 +1747,7 @@ div#logoffDlg div.dlg-header {
font-size: 11px; font-size: 11px;
font-family: Tahoma, Arial, Helvetica, sans-serif; font-family: Tahoma, Arial, Helvetica, sans-serif;
cursor: text; cursor: text;
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
outline: none !important; outline: none !important;
} }
@ -1760,13 +1761,13 @@ div#logoffDlg div.dlg-header {
#dlgEditRatioRules .lf_rru li input.TextboxFocus, #dlgEditRatioRules .lf_rru li input.TextboxFocus,
#dlgEditRules .lf_rur 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); color: var(--text-hover);
} }
#dlgEditRatioRules .lf_rru li input.TextboxNormal, #dlgEditRatioRules .lf_rru li input.TextboxNormal,
#dlgEditRules .lf_rur 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); color: var(--text-hover);
} }
@ -1782,5 +1783,5 @@ div#logoffDlg div.dlg-header {
div#dlgEditRules-header, div#dlgEditRules-header,
#dlgEditRatioRules-header, #dlgEditRatioRules-header,
div#dlgEditRules div.dlg-header { div#dlgEditRules div.dlg-header {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }

View File

@ -10,6 +10,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
@ -106,7 +107,7 @@ a:focus {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -118,7 +119,7 @@ a:focus {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -133,7 +134,7 @@ hr {
} }
.navbar-inverse { .navbar-inverse {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-color: transparent !important; border-color: transparent !important;
} }
@ -169,7 +170,7 @@ hr {
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus { .navbar-inverse .navbar-nav>.open>a:focus {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
.ui-slider-horizontal, .ui-slider-horizontal,
@ -183,7 +184,7 @@ hr {
} }
.main-content { .main-content {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
border: none; border: none;
} }
@ -214,7 +215,7 @@ hr {
} }
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover { .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 { .navbar-inverse .navbar-toggle {
@ -224,7 +225,7 @@ hr {
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus { .dropdown-menu>li>a:focus {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.dropdown-header { .dropdown-header {
@ -504,7 +505,7 @@ td.delete .dropdown>a .caret {
} }
.table-striped>tbody>tr:nth-of-type(odd) { .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 { tbody.no-downloads tr td {
@ -524,15 +525,15 @@ tbody>tr>td:first-child {
} }
table { table {
background-color: rgba(0, 0, 0, 0.25) !important background: var(--transparency-dark-25) !important
} }
table:hover { table:hover {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
.table-hover>tbody>tr:hover { .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); color: var(--text-hover);
} }
@ -555,7 +556,7 @@ tr td.row-extra-text,
.table-messages .table-messages-remove { .table-messages .table-messages-remove {
border-bottom: 1px solid transparent !important; border-bottom: 1px solid transparent !important;
background: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
.progress .progress-bar .fileDetails { .progress .progress-bar .fileDetails {
@ -601,7 +602,7 @@ tr td.row-extra-text,
.multioperations-selector { .multioperations-selector {
border: 1px solid transparent !important; border: 1px solid transparent !important;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
#history-options .hover-button { #history-options .hover-button {
@ -610,7 +611,7 @@ tr td.row-extra-text,
#history-tab .table>tbody>tr:nth-of-type(2n+1), #history-tab .table>tbody>tr:nth-of-type(2n+1),
.table-striped>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, .pagination>li>a,
@ -653,7 +654,7 @@ tr td.row-extra-text,
.pagination>.disabled>a:hover, .pagination>.disabled>a:hover,
.pagination>.disabled>a:focus { .pagination>.disabled>a:focus {
color: var(--text-muted); color: var(--text-muted);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -664,7 +665,7 @@ tr td.row-extra-text,
.form-control { .form-control {
color: var(--text-hover); color: var(--text-hover);
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
.form-control:focus { .form-control:focus {
@ -691,13 +692,13 @@ tr td.row-extra-text,
.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus { .nav-tabs>li.active>a:focus {
color: #555; color: #555;
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
.nav>li>a:hover, .nav>li>a:hover,
.nav>li>a:focus { .nav>li>a:focus {
text-decoration: none; text-decoration: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.badge { .badge {
@ -723,7 +724,7 @@ tr td.row-extra-text,
} }
.navbar-default .navbar-nav>.open>a { .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, .navbar-default .navbar-nav>li>a:hover,
@ -732,12 +733,12 @@ tr td.row-extra-text,
} }
.navbar-default .navbar-nav>li>a:hover { .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; color: var(--text-hover) !important;
} }
.navbar-default .navbar-nav>li>a.active { .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; color: rgb(var(--accent-color)) !important;
} }
@ -747,7 +748,7 @@ tr td.row-extra-text,
.colmask { .colmask {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.padTable:not(.ui-sortable) { .padTable:not(.ui-sortable) {
@ -775,7 +776,7 @@ table {
.alt, .alt,
.infoTableSeperator.alt { .infoTableSeperator.alt {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.info-container { .info-container {
@ -807,14 +808,14 @@ table {
.form-control.advanced-button.config-hover { .form-control.advanced-button.config-hover {
color: var(--text-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-color: rgba(255, 255, 255, 0.25);
border-radius: 3px !important; border-radius: 3px !important;
} }
.form-control.advanced-button.config-hover:hover { .form-control.advanced-button.config-hover:hover {
color: var(--text-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-color: rgba(255, 255, 255, 0.3);
border-radius: 3px !important; border-radius: 3px !important;
} }
@ -834,7 +835,7 @@ input[type="date"],
textarea, textarea,
select { select {
border: none; border: none;
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
border-radius: 3px !important; border-radius: 3px !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
outline: none; outline: none;
@ -882,7 +883,7 @@ input[type="text"]:focus,
input[type="time"]:focus, input[type="time"]:focus,
input[type="url"]:focus, input[type="url"]:focus,
input[type="week"]:focus { input[type="week"]:focus {
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
border: none; border: none;
-webkit-box-shadow: none !important; -webkit-box-shadow: none !important;
box-shadow: none !important; box-shadow: none !important;
@ -979,12 +980,12 @@ select[disabled]:hover {
/*Folder modal*/ /*Folder modal*/
.list-group-item { .list-group-item {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border: none; border: none;
} }
.example { .example {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
/*modal*/ /*modal*/
@ -1032,7 +1033,7 @@ select[disabled]:hover {
.modal-body>.nav-tabs>li.active>a:hover, .modal-body>.nav-tabs>li.active>a:hover,
.modal-body>.nav-tabs>li.active>a:focus { .modal-body>.nav-tabs>li.active>a:focus {
color: rgb(var(--accent-color)) !important; color: rgb(var(--accent-color)) !important;
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
border: transparent; border: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
@ -1044,7 +1045,7 @@ select[disabled]:hover {
.modal-body>.nav>li>a:hover, .modal-body>.nav>li>a:hover,
.modal-body>.nav>li>a:focus { .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; color: var(--text-hover) !important;
} }
@ -1080,11 +1081,11 @@ select[disabled]:hover {
#modal-options .table-server-connections thead { #modal-options .table-server-connections thead {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
#modal-options .table-server-connections thead { #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 { #modal-item-files .item-files-table .progress small {
@ -1102,7 +1103,7 @@ a.list-group-item:focus,
button.list-group-item:focus { button.list-group-item:focus {
text-decoration: none; text-decoration: none;
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.form-control { .form-control {
@ -1110,7 +1111,7 @@ button.list-group-item:focus {
} }
.fade.in { .fade.in {
background: rgba(0, 0, 0, 0.6); background: var(--transparency-dark-60)
} }
.fade { .fade {
@ -1143,11 +1144,11 @@ fieldset[disabled] .form-control {
} }
.language:hover { .language:hover {
background-color: rgb(255 255 255 / 10%); background: var(--transparency-light-10);
} }
.container .quoteBlock { .container .quoteBlock {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
#content a, #content a,

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { :root {
--calendar-tv-unaired-premiere: 53 197 244; --calendar-tv-unaired-premiere: 53 197 244;
@ -178,7 +179,7 @@ a:hover {
} }
[class*="SelectInput-select-"] { [class*="SelectInput-select-"] {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="SelectInput-select-"]:active, [class*="SelectInput-select-"]:active,
@ -195,7 +196,7 @@ a:hover {
} }
[class*="AutoSuggestInput-suggestionHighlighted-"] { [class*="AutoSuggestInput-suggestionHighlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
@ -211,7 +212,7 @@ a:hover {
/* HEADER */ /* HEADER */
[class*="PageHeader-header-"] { [class*="PageHeader-header-"] {
background-color: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
color: var(--text); color: var(--text);
} }
@ -225,7 +226,7 @@ a:hover {
[class*="EpisodeDetailsModalContent-selectedTab-"] { [class*="EpisodeDetailsModalContent-selectedTab-"] {
border-color: var(--accent-color-hover); border-color: var(--accent-color-hover);
background-color: rgb(0 0 0 / 40%); background: var(--transparency-dark-40);
} }
[class*="SeriesSearchInput-sectionTitle-"] { [class*="SeriesSearchInput-sectionTitle-"] {
@ -247,24 +248,24 @@ a:hover {
} }
[class*="SeriesSearchInput-highlighted-"] { [class*="SeriesSearchInput-highlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="SeriesSearchInput-seriesContainer-"]::-webkit-scrollbar-thumb { [class*="SeriesSearchInput-seriesContainer-"]::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* SIDE MENU */ /* SIDE MENU */
[class*="PageSidebar-sidebarContainer-"] { [class*="PageSidebar-sidebarContainer-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="PageSidebar-sidebar-"] { [class*="PageSidebar-sidebar-"] {
@ -287,7 +288,7 @@ a:hover {
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -328,7 +329,7 @@ a:hover {
} }
[class*="SeriesIndexOverview-content-"]:hover { [class*="SeriesIndexOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="SeriesIndexOverview-link-"]:hover { [class*="SeriesIndexOverview-link-"]:hover {
@ -336,7 +337,7 @@ a:hover {
} }
[class*="ProgressBar-container-"] { [class*="ProgressBar-container-"] {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
@ -348,7 +349,7 @@ a:hover {
[class*="SeriesDetailsSeason-season-"], [class*="SeriesDetailsSeason-season-"],
[class*="SeriesDetailsSeason-collapseButtonContainer-"] { [class*="SeriesDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="SeriesDetailsSeason-episodes-"] { [class*="SeriesDetailsSeason-episodes-"] {
@ -403,7 +404,7 @@ a:hover {
[class*="SeriesDetailsSeason-collapseButtonContainer-"] { [class*="SeriesDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
@ -520,7 +521,7 @@ a:hover {
/* Table options*/ /* Table options*/
[class*="TableOptionsColumn-column-"] { [class*="TableOptionsColumn-column-"] {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
border: none; border: none;
} }
@ -534,17 +535,17 @@ a:hover {
} }
[class*="TableRow-row-"]:hover { [class*="TableRow-row-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="TableRowCell-cell-"] { [class*="TableRowCell-cell-"] {
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
/* TOP MENU SERIES */ /* TOP MENU SERIES */
[class*="PageToolbar-toolbar-"] { [class*="PageToolbar-toolbar-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -574,7 +575,7 @@ a:hover {
[class*="SeriesIndexPoster-title-"], [class*="SeriesIndexPoster-title-"],
[class*="SeriesIndexPoster-nextAiring-"], [class*="SeriesIndexPoster-nextAiring-"],
[class*="SeriesIndexPosterInfo-info-"] { [class*="SeriesIndexPosterInfo-info-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -601,13 +602,13 @@ a:hover {
[class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:hover,
[class*="MenuItem-menuItem-"]:focus { [class*="MenuItem-menuItem-"]:focus {
background: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
} }
[class*="MenuItemSeparator-separator-"] { [class*="MenuItemSeparator-separator-"] {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* ALPHABET JUMP BAR */ /* ALPHABET JUMP BAR */
@ -618,12 +619,12 @@ a:hover {
/* MINI RIGHT SCROLL BAR */ /* MINI RIGHT SCROLL BAR */
[class*="OverlayScroller-thumb-"], [class*="OverlayScroller-thumb-"],
[class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb { [class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="OverlayScroller-thumb-"]:hover, [class*="OverlayScroller-thumb-"]:hover,
[class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb:hover { [class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
/* ADD NEW */ /* ADD NEW */
@ -647,12 +648,12 @@ a:hover {
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background: var(--transparency-light-20) !important;
color: var(--text-hover); color: var(--text-hover);
} }
[class*="EnhancedSelectInputOption-option-"]:hover { [class*="EnhancedSelectInputOption-option-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="HintedSelectInputOption-hintText-"] { [class*="HintedSelectInputOption-hintText-"] {
@ -689,7 +690,7 @@ a:hover {
[class*="AddNewSeries-searchIconContainer-"], [class*="AddNewSeries-searchIconContainer-"],
[class*="CheckInput-isIndeterminate-"] { [class*="CheckInput-isIndeterminate-"] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -712,7 +713,7 @@ a:hover {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="TagInput-input-"][class*="TagInput-isFocused-"] { [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@ -736,7 +737,7 @@ a:hover {
} }
[class*="AddNewSeriesSearchResult-underlay-"]:hover { [class*="AddNewSeriesSearchResult-underlay-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="AddNewSeriesSearchResult-year-"] { [class*="AddNewSeriesSearchResult-year-"] {
@ -761,17 +762,17 @@ a:hover {
} }
[class*="VirtualTableRow-row-"]:hover { [class*="VirtualTableRow-row-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/* Drop down menu/button*/ /* Drop down menu/button*/
[class*="ImportSeriesSelectSeries-button-"] { [class*="ImportSeriesSelectSeries-button-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="ImportSeriesSearchResult-series-"]:hover { [class*="ImportSeriesSearchResult-series-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="ImportSeriesSelectSeries-content-"], [class*="ImportSeriesSelectSeries-content-"],
@ -796,7 +797,7 @@ a:hover {
/* FOOTER */ /* FOOTER */
[class*="PageContentFooter-contentFooter-"] { [class*="PageContentFooter-contentFooter-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -804,7 +805,7 @@ a:hover {
[class*="SeasonPassSeason-season-"] { [class*="SeasonPassSeason-season-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="SeasonPassSeason-allEpisodes-"] { [class*="SeasonPassSeason-allEpisodes-"] {
@ -883,18 +884,18 @@ a:hover {
} }
[class*="DayOfWeek-dayOfWeek-"] { [class*="DayOfWeek-dayOfWeek-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="CalendarDay-dayOfMonth-"] { [class*="CalendarDay-dayOfMonth-"] {
border-bottom: 1px solid hsla(0, 0%, 100%, .08); border-bottom: 1px solid hsla(0, 0%, 100%, .08);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="CalendarDay-isToday-"], [class*="CalendarDay-isToday-"],
[class*="DayOfWeek-isToday-"] { [class*="DayOfWeek-isToday-"] {
background-color: hsla(0, 0%, 100%, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="CalendarDay-day-"], [class*="CalendarDay-day-"],
@ -939,7 +940,7 @@ a:hover {
/* calendar agenda */ /* calendar agenda */
[class*="AgendaEvent-event-"]:hover { [class*="AgendaEvent-event-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/*QUEUE PAGE */ /*QUEUE PAGE */
@ -972,25 +973,25 @@ a:hover {
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-example-"] { [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 2550, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 2550, 0.35); background: var(--transparency-light-35);
} }
/* PROFILES */ /* PROFILES */
[class*="Card-card-"], [class*="Card-card-"],
[class*="QualityProfiles-addQualityProfile-"] { [class*="QualityProfiles-addQualityProfile-"] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
@ -1014,12 +1015,12 @@ a:hover {
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
[class*="LanguageProfileItem-languageProfileItem-"] { [class*="LanguageProfileItem-languageProfileItem-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
[class*="KeyValueListInputItem-keyInput-"], [class*="KeyValueListInputItem-keyInput-"],
@ -1062,19 +1063,19 @@ a:hover {
/* LOG */ /* LOG */
[class*="Alert-info-"] { [class*="Alert-info-"] {
border-color: transparent; border-color: transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: #FFC107; color: #FFC107;
} }
/* Login Page */ /* Login Page */
.panel-body { .panel-body {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
.panel-header { .panel-header {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
.forgot-password { .forgot-password {
@ -1084,7 +1085,7 @@ a:hover {
input[type=email], input[type=email],
input[type=password] { input[type=password] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -1105,7 +1106,7 @@ input[type=password] {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* Custom filter */ /* Custom filter */
@ -1114,7 +1115,7 @@ input[type=password] {
} }
[class*="CustomFilter-customFilter-"]:hover { [class*="CustomFilter-customFilter-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/* Scene information */ /* Scene information */

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { :root {
--v-primary-base: rgb(var(--accent-color)); --v-primary-base: rgb(var(--accent-color));
@ -40,7 +41,7 @@ h4 {
.v-toolbar__content, .v-toolbar__content,
.v-toolbar__extension { .v-toolbar__extension {
background-color: rgba(0, 0, 0, 0.6) !important; background: var(--transparency-dark-60) !important;
} }
p a { p a {
@ -146,7 +147,7 @@ p a {
.flex.md3 .application .theme--dark.v-card, .flex.md3 .application .theme--dark.v-card,
.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); color: var(--text-hover);
} }
@ -156,7 +157,7 @@ p a {
} }
.theme--dark.v-text-field--solo>.v-input__control>.v-input__slot { .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 { .v-navigation-drawer {

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -131,7 +132,7 @@ a.no-highlight:hover,
.nav>li.active>a:hover, .nav>li.active>a:hover,
.nav>li.active>a:focus { .nav>li.active>a:focus {
color: #f9be03; color: #f9be03;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.nav>li>a { .nav>li>a {
@ -140,14 +141,14 @@ a.no-highlight:hover,
.nav>li>a:hover, .nav>li>a:hover,
.nav>li>a:focus { .nav>li>a:focus {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
.nav .open>a, .nav .open>a,
.nav .open>a:hover, .nav .open>a:hover,
.nav .open>a:focus { .nav .open>a:focus {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: rgb(var(--accent-color)); color: rgb(var(--accent-color));
} }
@ -169,12 +170,12 @@ a.no-highlight:hover,
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus { .dropdown-menu>li>a:focus {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
.dropdown-menu .divider { .dropdown-menu .divider {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
select, select,
@ -205,15 +206,15 @@ select,
.dashboard-stats-background, .dashboard-stats-background,
.dashboard-activity-background, .dashboard-activity-background,
.dashboard-activity-poster-container { .dashboard-activity-poster-container {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.dashboard-activity-progress-bar { .dashboard-activity-progress-bar {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.dashboard-activity-progress .buffer-bar { .dashboard-activity-progress .buffer-bar {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
.dashboard-activity-metadata-user a { .dashboard-activity-metadata-user a {
@ -275,7 +276,7 @@ select,
} }
.btn-danger.btn-edit { .btn-danger.btn-edit {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
.btn-form { .btn-form {
@ -303,18 +304,18 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.react-selectize.root-node .react-selectize-control, .react-selectize.root-node .react-selectize-control,
.selectize-control.form-control .selectize-input { .selectize-control.form-control .selectize-input {
background: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
/*Formcontrol */ /*Formcontrol */
select.form-control, select.form-control,
div.form-control .selectize-input { div.form-control .selectize-input {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -326,11 +327,11 @@ div.form-control .selectize-input {
.form-control[disabled], .form-control[disabled],
.form-control[readonly], .form-control[readonly],
fieldset[disabled] .form-control { fieldset[disabled] .form-control {
background-color: rgba(236, 236, 236, 0.25); background: var(--transparency-dark-25);
} }
textarea.form-control { textarea.form-control {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
textarea:focus, textarea:focus,
@ -350,7 +351,7 @@ input[type="tel"]:focus,
input[type="color"]:focus, input[type="color"]:focus,
.uneditable-input:focus { .uneditable-input:focus {
color: var(--text-hover); color: var(--text-hover);
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.form-control:focus { .form-control:focus {
@ -362,22 +363,22 @@ input[type="color"]:focus,
/* Settings table cards */ /* Settings table cards */
.table-card-header { .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-bottom: 1px solid rgba(255, 255, 255, 0.25);
border-top: 1px solid #00000000; border-top: 1px solid #00000000;
} }
.table-card-back { .table-card-back {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
table.display thead th { table.display thead th {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
table.display thead tr:hover { table.display thead tr:hover {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
/*Settings menu */ /*Settings menu */
@ -391,24 +392,24 @@ table.display thead tr:hover {
} }
.nav-settings>li { .nav-settings>li {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
border-top: 1px solid transparent; border-top: 1px solid transparent;
} }
.nav-settings>.active>a, .nav-settings>.active>a,
.nav-settings>.active>a:hover, .nav-settings>.active>a:hover,
.nav-settings>.active>a:focus { .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:hover,
.nav-settings>li>a:focus { .nav-settings>li>a:focus {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.card { .card {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-top: 1px solid #00000000; border-top: 1px solid #00000000;
} }
@ -418,12 +419,12 @@ table.display thead tr:hover {
.card-handle { .card-handle {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
/*Notification agents menu */ /*Notification agents menu */
.stacked-configs>li { .stacked-configs>li {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
.stacked-configs>li>span { .stacked-configs>li>span {
@ -435,7 +436,7 @@ table.display thead tr:hover {
.stacked-configs>li>span:hover, .stacked-configs>li>span:hover,
.stacked-configs>li>span:focus { .stacked-configs>li>span:focus {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.stacked-configs>li>span>a.toggle-left, .stacked-configs>li>span>a.toggle-left,
@ -449,17 +450,17 @@ span>a.active,
} }
.inline-pre { .inline-pre {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* Summary containers */ /* Summary containers */
.summary-container .table-card-header, .summary-container .table-card-header,
.summary-container .table-card-back { .summary-container .table-card-back {
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45)
} }
.summary-navbar { .summary-navbar {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
/* pagination */ /* pagination */
@ -469,7 +470,7 @@ span>a.active,
.pagination>.disabled>a, .pagination>.disabled>a,
.pagination>.disabled>a:hover, .pagination>.disabled>a:hover,
.pagination>.disabled>a:focus { .pagination>.disabled>a:focus {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
border-color: #00000000; border-color: #00000000;
} }
@ -491,7 +492,7 @@ span>a.active,
/* Graphs */ /* Graphs */
.graphs-instance { .graphs-instance {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
/* Modal */ /* Modal */
@ -558,7 +559,7 @@ span>a.active,
#newsletter-config-modal .nav-tabs>li.active>a:hover, #newsletter-config-modal .nav-tabs>li.active>a:hover,
#newsletter-config-modal .nav-tabs>li.active>a:focus { #newsletter-config-modal .nav-tabs>li.active>a:focus {
color: var(--text-hover); color: var(--text-hover);
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45)
} }
#notifier-config-modal .nav-tabs>li.active>a, #notifier-config-modal .nav-tabs>li.active>a,
@ -574,7 +575,7 @@ span>a.active,
#notifier-config-modal .nav-tabs>li>a:hover, #notifier-config-modal .nav-tabs>li>a:hover,
#newsletter-config-modal .nav-tabs>li>a:hover { #newsletter-config-modal .nav-tabs>li>a:hover {
border-color: #0000; border-color: #0000;
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -584,7 +585,7 @@ span>a.active,
} }
.accordion { .accordion {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
.accordion li .link { .accordion li .link {
@ -594,21 +595,21 @@ span>a.active,
.accordion li .link:hover, .accordion li .link:hover,
.accordion li .link:hover i.fa { .accordion li .link:hover i.fa {
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.submenu { .submenu {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
/* Stream info */ /* Stream info */
.stream-info { .stream-info {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
/* Edit metadata */ /* Edit metadata */
.item-children-section-title { .item-children-section-title {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
border-bottom: 1px solid #00000000; border-bottom: 1px solid #00000000;
border-top: 1px solid #00000000; border-top: 1px solid #00000000;
} }
@ -616,11 +617,11 @@ span>a.active,
/* Mobile */ /* Mobile */
.navbar-toggle:hover, .navbar-toggle:hover,
.navbar-toggle:focus { .navbar-toggle:focus {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
.navbar-toggle { .navbar-toggle {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
@media (max-width: 768px) { @media (max-width: 768px) {

View File

@ -10,12 +10,14 @@
/* Made by @gilbN */ /* Made by @gilbN */
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/transparent.css");
#chat .userlist .names { #chat .userlist .names {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
#chat .user-mode:before { #chat .user-mode:before {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -37,7 +39,7 @@
#viewport.menu-dragging #sidebar, #viewport.menu-dragging #sidebar,
#viewport.menu-open #sidebar { #viewport.menu-open #sidebar {
box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5); 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 { #form {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
border-color: #0086ff00; border-color: #0086ff00;
color: var(--body-color); color: var(--body-color);
} }
#sidebar .active, #sidebar .active,
#sidebar .active:hover { #sidebar .active:hover {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
#chat .msg.motd .text, #chat .msg.motd .text,
code, code,
.irc-monospace { .irc-monospace {
background: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
color: #f3f3f3; color: #f3f3f3;
} }
@ -78,7 +80,7 @@ code,
} }
#chat .msg[data-type=motd] .text { #chat .msg[data-type=motd] .text {
background: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* Dropdown menu */ /* Dropdown menu */
@ -106,7 +108,7 @@ code,
.textcomplete-item:focus, .textcomplete-item:focus,
.textcomplete-item:hover, .textcomplete-item:hover,
.textcomplete-menu .active { .textcomplete-menu .active {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
transition: none; transition: none;
outline: 0; outline: 0;
} }
@ -125,12 +127,12 @@ code,
} }
#chat .userlist .count { #chat .userlist .count {
background-color: rgba(0, 0, 0, 0.6); background: var(--transparency-dark-60);
} }
#footer button:hover, #footer button:hover,
#sidebar .chan:hover { #sidebar .chan:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
#settings .extra-help:before { #settings .extra-help:before {

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
@ -67,7 +68,7 @@ body {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -79,7 +80,7 @@ body {
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -101,7 +102,7 @@ div#torrent_inspector #inspector_header #torrent_inspector_name,
/* Toolbar */ /* Toolbar */
div#toolbar { div#toolbar {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
background-image: none; background-image: none;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
@ -245,7 +246,7 @@ div#toolbar>div#toolbar-inspector:before {
#statusbar { #statusbar {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
background-image: none; background-image: none;
background-color: rgba(0, 0, 0, 0.25) background: var(--transparency-dark-25)
} }
#statusbar #filter input#torrent_search { #statusbar #filter input#torrent_search {
@ -285,7 +286,7 @@ div#toolbar>div#toolbar-inspector:before {
ul.torrent_list, ul.torrent_list,
ul.torrent_list li.torrent.even { 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 { ul.torrent_list li.torrent div.torrent_name {
@ -293,14 +294,14 @@ ul.torrent_list li.torrent div.torrent_name {
} }
ul.torrent_list li.torrent.selected { ul.torrent_list li.torrent.selected {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
ul.torrent_list li.torrent { ul.torrent_list li.torrent {
border-bottom: 1px solid rgba(204, 204, 204, 0.1); border-bottom: 1px solid rgba(204, 204, 204, 0.1);
padding: 4px 30px 5px 14px; padding: 4px 30px 5px 14px;
color: var(--text); color: var(--text);
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* Modal */ /* Modal */
@ -324,7 +325,7 @@ div#upload_container div.dialog_window div.dialog_message label {
input { input {
color: var(--text-hover); color: var(--text-hover);
background: rgba(0, 0, 0, .25) background: var(--transparency-dark-25)
} }
#add-dialog-folder-input, #add-dialog-folder-input,
@ -421,7 +422,7 @@ div.dialog_container div.dialog_window a:active {
.ui-widget-content .ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active { .ui-widget-header .ui-state-active {
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(255, 255, 255, .1) !important; background: var(--transparency-light-10) !important;
font-weight: normal; font-weight: normal;
color: var(--text); color: var(--text);
} }
@ -444,7 +445,7 @@ div.dialog_container div.dialog_window a:active {
.ui-widget-content .ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default { .ui-widget-header .ui-state-default {
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
font-weight: normal; font-weight: normal;
color: var(--text); color: var(--text);
} }
@ -482,7 +483,7 @@ div#torrent_inspector {
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>* { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>* {
border-color: transparent; border-color: transparent;
height: auto; 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, div#torrent_inspector div.inspector_torrent_file_list_entry_name,
@ -495,7 +496,7 @@ div#torrent_inspector div.tracker_host {
/*Info button*/ /*Info button*/
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info {
background-image: none; 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 { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:hover:before {
@ -514,7 +515,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-inf
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info.selected { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info.selected {
background-image: none; 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, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active,
@ -535,7 +536,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-inf
/*Peers Button*/ /*Peers Button*/
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers {
background-image: none; 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 { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:hover:before {
@ -554,7 +555,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-pee
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers.selected { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers.selected {
background-image: none; 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, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active,
@ -575,7 +576,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-pee
/*Tracker Button*/ /*Tracker Button*/
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers {
background-image: none; 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 { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:hover:before {
@ -594,7 +595,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-tra
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers.selected { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers.selected {
background-image: none; 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, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active,
@ -615,7 +616,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-tra
/*Files Button*/ /*Files Button*/
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files {
background-image: none; 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 { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:hover:before {
@ -634,7 +635,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-fil
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active,
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files.selected { div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files.selected {
background-image: none; 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, div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active,
@ -653,7 +654,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-fil
} }
tr.inspector_peer_entry.odd { tr.inspector_peer_entry.odd {
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
} }
/* Priority buttons */ /* Priority buttons */
@ -783,13 +784,13 @@ div.file-priority-radiobox>div.high.selectedbefore {
} }
div#torrent_inspector li.inspector_tracker_entry.odd { div#torrent_inspector li.inspector_tracker_entry.odd {
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
} }
/*Bottom Toolbar*/ /*Bottom Toolbar*/
div.torrent_footer { div.torrent_footer {
border-top: 1px solid transparent; border-top: 1px solid transparent;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
background-image: none; background-image: none;
height: 30px; height: 30px;
} }
@ -973,7 +974,7 @@ ul.torrent_list li.torrent.compact div.torrent_name {
.ui-widget-header .ui-state-focus { .ui-widget-header .ui-state-focus {
border: 1px solid transparent; border: 1px solid transparent;
background: none; background: none;
background-color: rgba(255, 255, 255, 0.1); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
outline: none; outline: none;
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
* { * {
outline: none; outline: none;
@ -95,7 +96,7 @@ pre {
} }
#header .block { #header .block {
background-color: rgb(0 0 0 / 20%); background: var(--transparency-dark-20);
border-radius: 0px 0px 0px 25px; border-radius: 0px 0px 0px 25px;
} }
@ -122,12 +123,12 @@ pre {
} }
textarea { textarea {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
/*DASHBOARD*/ /*DASHBOARD*/
table.share_status.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); border: 1px solid rgba(255, 255, 255, .25);
} }
@ -153,7 +154,7 @@ table.tablesorter thead tr th {
.sys, .sys,
.usage-disk, .usage-disk,
.usage-bar { .usage-bar {
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35)
} }
.usage-disk>span:first-child { .usage-disk>span:first-child {
@ -177,12 +178,12 @@ table.tablesorter thead tr th {
/*MAIN*/ /*MAIN*/
#title { #title {
border-bottom: 1px solid rgba(255, 255, 255, .25); 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); color: var(--text-hover);
} }
table { table {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
} }
table.disk_status thead tr:first-child td, table.disk_status thead tr:first-child td,
@ -193,11 +194,11 @@ table.tablesorter thead tr th,
table.tablesorter tbody tr:nth-child(even), table.tablesorter tbody tr:nth-child(even),
table.tablesorter thead tr .tablesorter-headerAsc, table.tablesorter thead tr .tablesorter-headerAsc,
table.tablesorter thead tr .tablesorter-headerDesc { 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) { 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 { table.disk_status thead tr:last-child {
@ -286,7 +287,7 @@ a.button:hover,
/* USERS */ /* USERS */
div.user-list { div.user-list {
border: 1px solid rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .15);
background-color: rgba(255, 255, 255, .05); background: var(--transparency-light-05);
} }
/* SETTINGS */ /* SETTINGS */
@ -356,8 +357,8 @@ div.tab [type=radio]+label:hover {
} }
div.tab [type=radio]+label { div.tab [type=radio]+label {
border: 1px solid rgb(255 255 255 / 25%); border: 1px solid var(--transparency-light-25);
background-color: rgb(0 0 0 / 50%); background: var(--transparency-dark-50);
opacity: 0.5; opacity: 0.5;
} }
@ -382,7 +383,7 @@ background-color: var(--text);
} }
.ca_holderDocker { .ca_holderDocker {
background-color: rgb(0 0 0 / 10%) !important; background: var(--transparency-dark-10) !important;
border-color: rgb(0 0 0 / 25%) !important; border-color: rgb(0 0 0 / 25%) !important;
} }
@ -456,12 +457,12 @@ li.caMenuItem:hover {
} }
.ca_holder { .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; border-color: rgba(255, 255, 255, 0.1) !important;
} }
.ca_holder:hover { .ca_holder:hover {
background-color: rgba(0, 0, 0, 0.45) !important; background: var(--transparency-dark-45) !important;
} }
.supportButton, .supportButton,
@ -593,7 +594,7 @@ span .maxPerPage {
#searchBox, #searchBox,
.searchSubmit { .searchSubmit {
background: rgba(255, 255, 255, 0.05) !important; background: var(--transparency-light-05) !important;
} }
/* CA slide in menu */ /* CA slide in menu */
@ -637,7 +638,7 @@ div.tabs {
} }
.dropdown-menu .divider { .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; border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
} }
@ -645,12 +646,12 @@ div.tabs {
.dropdown-menu li>a:focus, .dropdown-menu li>a:focus,
.dropdown-submenu:hover>a { .dropdown-submenu:hover>a {
color: var(--text-hover) !important; color: var(--text-hover) !important;
background: rgb(255 255 255 / 10%) !important; background: var(--transparency-light-10) !important;
} }
/*VM MANAGER*/ /*VM MANAGER*/
div.shade-black { div.shade-black {
background-color: rgb(0 0 0 / 15%) !important; background-color: var(--transparency-dark-15) !important;
} }
/* MODAL */ /* MODAL */
@ -685,7 +686,7 @@ blockquote {
border-top: 2px solid rgb(0 0 0 / 25%); border-top: 2px solid rgb(0 0 0 / 25%);
border-bottom: 2px solid rgb(0 0 0 / 25%); border-bottom: 2px solid rgb(0 0 0 / 25%);
color: var(--text); color: var(--text);
background-color: rgb(0 0 0 / 10%); background: var(--transparency-dark-10);
} }
/* MY SERVERS */ /* MY SERVERS */
@ -734,7 +735,7 @@ unraid-authed::part(div[data-v-050c892a] > button) {
/* Edit template*/ /* Edit template*/
#contDescription { #contDescription {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
padding: 1%; padding: 1%;
border-radius: 5px; border-radius: 5px;
} }

View File

@ -1,4 +1,5 @@
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
body, body,
.dark { .dark {
@ -80,21 +81,21 @@ a,
.shadow-box, .shadow-box,
.dark .shadow-box { .dark .shadow-box {
box-shadow: 0px 0px 20px 10px #0000001a; box-shadow: 0px 0px 20px 10px #0000001a;
background: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
.list .item:hover { .list .item:hover {
background-color: rgba(255, 255, 255, .15) !important; background: var(--transparency-light-15) !important;
} }
.dark .list .item.active, .dark .list .item.active,
.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, .dark .hp-bar-big .beat.empty,
.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, .dark .table-hover>tbody>tr:hover,
.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); color: var(--text);
} }
@ -132,7 +133,7 @@ td {
.dropdown-item:hover, .dropdown-item:hover,
.dropdown-item:focus { .dropdown-item:focus {
color: var(--text-hover) !important; color: var(--text-hover) !important;
background-color: rgba(255, 255, 255, .1) !important; background: var(--transparency-light-10) !important;
} }
.dark .dropdown-clear-data ul { .dark .dropdown-clear-data ul {
@ -144,7 +145,7 @@ td {
/* HEADER */ /* HEADER */
.dark header, .dark header,
#app>div>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; border-bottom-color: rgba(255, 255, 255, 0) !important;
} }
@ -268,7 +269,7 @@ td {
.form-select, .form-select,
.form-control { .form-control {
color: var(--text); 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-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; background-repeat: no-repeat;
} }
@ -326,7 +327,7 @@ td {
.multiselect__option--selected, .multiselect__option--selected,
.dark .multiselect__option--selected { .dark .multiselect__option--selected {
background: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
color: var(--text-hover); color: var(--text-hover);
font-weight: 700; font-weight: 700;
} }
@ -340,7 +341,7 @@ td {
.dark .multiselect__tags, .dark .multiselect__tags,
.multiselect__tags { .multiselect__tags {
color: var(--text); color: var(--text);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
border-color: transparent; border-color: transparent;
} }
@ -348,7 +349,7 @@ td {
.dark .multiselect__single, .dark .multiselect__single,
.multiselect__input, .multiselect__input,
.multiselect__single { .multiselect__single {
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }

View File

@ -13,6 +13,7 @@
/* MOBILE */ /* MOBILE */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
@media (max-width: 720px) { @media (max-width: 720px) {
@ -49,12 +50,12 @@ html {
/* SCROLL BAR */ /* SCROLL BAR */
#app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb { #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 border-radius: 20px
} }
#app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover { #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 border-radius: 20px
} }
@ -102,7 +103,7 @@ p,
/* CARDS */ /* CARDS */
[class*="theme--"].v-card { [class*="theme--"].v-card {
background-color: rgba(0, 0, 0, .5); background: var(--transparency-dark-50);
color: var(--text); color: var(--text);
} }
@ -112,7 +113,7 @@ p,
} }
.v-app-bar.v-app-bar--hide-shadow { .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 { .v-app-bar.v-app-bar--is-scrolled {
@ -132,18 +133,18 @@ p,
/* SIDE MENU */ /* SIDE MENU */
.v-application .primary { .v-application .primary {
background: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
color: var(--text) !important; color: var(--text) !important;
} }
.v-application .secondary { .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; border-color: rgba(255, 255, 255, .15) !important;
} }
[class*="theme--"].v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border { [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) { @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
@ -164,7 +165,7 @@ p,
.v-navigation-drawer--temporary:not(.v-navigation-drawer--close), .v-navigation-drawer--temporary:not(.v-navigation-drawer--close),
.v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close),
.v-navigation-drawer--temporary:not(.v-navigation-drawer--close) { .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) {
background-color: rgba(0, 0, 0, 0.9); background: var(--transparency-dark-10);
} }
} }
@ -199,7 +200,7 @@ p,
} }
[class*="theme--"].v-tabs>.v-tabs-bar { [class*="theme--"].v-tabs>.v-tabs-bar {
background-color: rgba(0, 0, 0, .15); background: var(--transparency-dark-15);
} }
.v-application .white, .v-application .white,
@ -406,12 +407,12 @@ p,
/* TABLE */ /* TABLE */
[class*="theme--"].v-data-table { [class*="theme--"].v-data-table {
background-color: rgba(0, 0, 0, .65); background: var(--transparency-dark-65);
color: var(--text); 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) { [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, [class*="theme--"].v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>td:last-child,
@ -435,7 +436,7 @@ p,
/* TOOLTIP */ /* TOOLTIP */
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title, .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title,
.apexcharts-tooltip.apexcharts-theme-light .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); border-bottom: 1px solid rgba(255, 255, 255, .1);
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { body {
background: var(--main-bg-color); background: var(--main-bg-color);
@ -72,7 +73,7 @@ content-loading .contentLoading {
/* NAVBAR */ /* NAVBAR */
.head { .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%); box-shadow: 0 0 0 0px rgb(0 0 0 / 0%);
} }
@ -82,23 +83,23 @@ content-loading .contentLoading {
/* SIDE MENU */ /* SIDE MENU */
.menu .toggle { .menu .toggle {
background: rgb(0 0 0 / .25); background: var(--transparency-dark-25);
color: var(--accent-color); color: var(--accent-color);
} }
.menu { .menu {
background-color: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);
} }
.menu .item { .menu .item {
background: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
color: var(--button-text); color: var(--button-text);
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .0); box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .0);
} }
.menu .item:hover { .menu .item:hover {
background: rgb(255 255 255 / .16); background: var(--transparency-light-15);
color: var(--text-hover); color: var(--text-hover);
} }
@ -136,7 +137,7 @@ content-loading .contentLoading {
/* PAGES */ /* PAGES */
.sub .settings { .sub .settings {
background: rgb(255 255 255 / 25%); background: var(--transparency-light-25);
} }
label { label {
@ -150,30 +151,30 @@ label {
.fm .sections .section, .fm .sections .section,
.playlists .userContainer .fileContainer, .playlists .userContainer .fileContainer,
.playlists .playlistContainer { .playlists .playlistContainer {
background: rgb(255 255 255 / .08); background: var(--transparency-light-10);
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
border: transparent; border: transparent;
} }
.uas .type:hover { .uas .type:hover {
background: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
.sub .rowShow:hover, .sub .rowShow:hover,
.uas .repoContainer .repo:hover, .uas .repoContainer .repo:hover,
.fm .sections .section: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); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
} }
.expanded:hover { .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); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
} }
.sub .rowShow .lineShow .contentShow .detail { .sub .rowShow .lineShow .contentShow .detail {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
color: var(--text) !important; color: var(--text) !important;
} }
@ -183,11 +184,11 @@ label {
} }
.sub .rowShow .lineShow .contentShow .detail .subItem.selected { .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 { .sub .rowShow .lineShow .contentShow .detail .subItem.checked {
background: rgba(255, 255, 255, 0.5); background: var(--transparency-light-50);
color: var(--text-hover); color: var(--text-hover);
} }
@ -196,12 +197,12 @@ label {
} }
.sub .rowShow .lineShow .contentShow .tvshow { .sub .rowShow .lineShow .contentShow .tvshow {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
color: var(--button-text); color: var(--button-text);
} }
.sub .rowShow .lineShow .contentShow .tvshow:hover { .sub .rowShow .lineShow .contentShow .tvshow:hover {
background-color: rgb(255 255 255 / 16%); background: var(--transparency-light-15);
} }
@ -229,11 +230,11 @@ label {
} }
.logs .logDetails { .logs .logDetails {
background-color: rgb(255 255 255 / 14%); background: var(--transparency-light-15);
} }
.logs .search { .logs .search {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }
.logs .logDetails table tr.danger { .logs .logDetails table tr.danger {
@ -243,7 +244,7 @@ label {
.uas .repoContainer .repo .details .row, .uas .repoContainer .repo .details .row,
.uas .repoContainer .repo .details .row:nth-child(2n) { .uas .repoContainer .repo .details .row:nth-child(2n) {
background: rgb(0 0 0 / 25%); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -348,7 +349,7 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla
.uas .typesMenu .search .searchInput, .uas .typesMenu .search .searchInput,
.logs .search .searchInput { .logs .search .searchInput {
color: var(--text) !important; color: var(--text) !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
box-shadow: none !important; box-shadow: none !important;
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@ -359,15 +360,15 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla
.uas .manualInstall:focus, .uas .manualInstall:focus,
.uas .typesMenu .search .searchInput:focus, .uas .typesMenu .search .searchInput:focus,
.logs .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; color: var(--text-hover) !important;
} }
/* TABLE */ /* TABLE */
.info tr:nth-child(2n+1) { .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) { .logs .logDetails table tr:nth-child(even) {
background-color: rgb(255 255 255 / 8%); background: var(--transparency-light-10);
} }

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* 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 { :root {
--calendar-in-cinemas: 53 197 244; --calendar-in-cinemas: 53 197 244;
@ -168,7 +169,7 @@ a:hover {
} }
[class*="SelectInput-select-"] { [class*="SelectInput-select-"] {
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="SelectInput-select-"]:active, [class*="SelectInput-select-"]:active,
@ -185,7 +186,7 @@ a:hover {
} }
[class*="AutoSuggestInput-suggestionHighlighted-"] { [class*="AutoSuggestInput-suggestionHighlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="CheckInput-primaryIsChecked-"] { [class*="CheckInput-primaryIsChecked-"] {
@ -201,7 +202,7 @@ a:hover {
/* HEADER */ /* HEADER */
[class*="PageHeader-header-"] { [class*="PageHeader-header-"] {
background-color: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
color: var(--text); color: var(--text);
} }
@ -231,16 +232,16 @@ a:hover {
} }
[class*="MovieSearchInput-highlighted-"] { [class*="MovieSearchInput-highlighted-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb { [class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* SIDE MENU */ /* SIDE MENU */
[class*="PageSidebar-sidebarContainer-"] { [class*="PageSidebar-sidebarContainer-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="PageSidebar-sidebar-"] { [class*="PageSidebar-sidebar-"] {
@ -263,7 +264,7 @@ a:hover {
} }
[class*="PageSidebarItem-isActiveParentLink-"] { [class*="PageSidebarItem-isActiveParentLink-"] {
background-color: rgba(0, 0, 0, 0.15); background: var(--transparency-dark-15);
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@ -316,15 +317,15 @@ a:hover {
} }
[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] { [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="AddListMoviePoster-title-"] { [class*="AddListMoviePoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="MovieIndexOverview-content-"]:hover { [class*="MovieIndexOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="MovieIndexOverview-link-"]:hover { [class*="MovieIndexOverview-link-"]:hover {
@ -332,7 +333,7 @@ a:hover {
} }
[class*="ProgressBar-container-"] { [class*="ProgressBar-container-"] {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
[class*=".ProgressBar-purple-"] { [class*=".ProgressBar-purple-"] {
@ -343,7 +344,7 @@ a:hover {
[class*="MovieDetailsSeason-season-"], [class*="MovieDetailsSeason-season-"],
[class*="MovieDetailsSeason-collapseButtonContainer-"] { [class*="MovieDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="MovieDetailsSeason-actionButton-"], [class*="MovieDetailsSeason-actionButton-"],
@ -386,17 +387,17 @@ a:hover {
[class*="MovieDetailsSeason-collapseButtonContainer-"] { [class*="MovieDetailsSeason-collapseButtonContainer-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="MovieFileEditorTable-container-"] { [class*="MovieFileEditorTable-container-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
} }
[class*="ExtraFileTable-container-"] { [class*="ExtraFileTable-container-"] {
border: 1px solid transparent; border: 1px solid transparent;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"], [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
@ -509,7 +510,7 @@ a:hover {
/* Table options*/ /* Table options*/
[class*="TableOptionsColumn-column-"] { [class*="TableOptionsColumn-column-"] {
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
border: none; border: none;
} }
@ -523,17 +524,17 @@ a:hover {
} }
[class*="TableRow-row-"]:hover { [class*="TableRow-row-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="TableRowCell-cell-"] { [class*="TableRowCell-cell-"] {
border-top: 1px solid rgb(255 255 255 / 25%); border-top: 1px solid var(--transparency-light-25);
} }
/* TOP MENU SERIES */ /* TOP MENU SERIES */
[class*="PageToolbar-toolbar-"] { [class*="PageToolbar-toolbar-"] {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
@ -569,7 +570,7 @@ a:hover {
[class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"],
[class*="MovieIndexPosterInfo-info-"], [class*="MovieIndexPosterInfo-info-"],
[class*="MovieCreditPoster-title-"] { [class*="MovieCreditPoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -596,13 +597,13 @@ a:hover {
[class*="MenuItem-menuItem-"]:hover, [class*="MenuItem-menuItem-"]:hover,
[class*="MenuItem-menuItem-"]:focus { [class*="MenuItem-menuItem-"]:focus {
background: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
color: var(--text-hover); color: var(--text-hover);
text-decoration: none; text-decoration: none;
} }
[class*="MenuItemSeparator-separator-"] { [class*="MenuItemSeparator-separator-"] {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* ALPHABET JUMP BAR */ /* ALPHABET JUMP BAR */
@ -613,12 +614,12 @@ a:hover {
/* MINI RIGHT SCROLL BAR */ /* MINI RIGHT SCROLL BAR */
[class*="OverlayScroller-thumb-"], [class*="OverlayScroller-thumb-"],
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="OverlayScroller-thumb-"]:hover, [class*="OverlayScroller-thumb-"]:hover,
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover { [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.25) !important; background: var(--transparency-light-25) !important;
} }
/* ADD NEW */ /* ADD NEW */
@ -642,12 +643,12 @@ a:hover {
[class*="EnhancedSelectInputOption-isSelected-"], [class*="EnhancedSelectInputOption-isSelected-"],
[class*="EnhancedSelectInputOption-isSelected-"]:hover { [class*="EnhancedSelectInputOption-isSelected-"]:hover {
background-color: rgba(255, 255, 255, 0.20) !important; background: var(--transparency-light-20) !important;
color: var(--text-hover); color: var(--text-hover);
} }
[class*="EnhancedSelectInputOption-option-"]:hover { [class*="EnhancedSelectInputOption-option-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="HintedSelectInputOption-hintText-"] { [class*="HintedSelectInputOption-hintText-"] {
@ -686,7 +687,7 @@ a:hover {
[class*="AddNewMovie-searchIconContainer-"], [class*="AddNewMovie-searchIconContainer-"],
[class*="CheckInput-isIndeterminate-"] { [class*="CheckInput-isIndeterminate-"] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -713,7 +714,7 @@ a:hover {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="TagInput-input-"][class*="TagInput-isFocused-"] { [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@ -742,7 +743,7 @@ a:hover {
[class*="AddNewMovieSearchResult-searchResult-"]:hover, [class*="AddNewMovieSearchResult-searchResult-"]:hover,
[class*="AddNewMovieSearchResult-underlay-"]:hover { [class*="AddNewMovieSearchResult-underlay-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="AddNewmovieModalContent-year-"] { [class*="AddNewmovieModalContent-year-"] {
@ -767,13 +768,13 @@ a:hover {
} }
[class*="VirtualTableRow-row-"]:hover { [class*="VirtualTableRow-row-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
/* Drop down menu/button*/ /* Drop down menu/button*/
[class*="ImportMovieSelectMovie-button-"] { [class*="ImportMovieSelectMovie-button-"] {
border: none !important; border: none !important;
background-color: rgba(0, 0, 0, 0.25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="ImportMovieSelectMovie-content-"], [class*="ImportMovieSelectMovie-content-"],
@ -791,7 +792,7 @@ a:hover {
} }
[class*="ImportMovieSearchResult-movie-"]:hover { [class*="ImportMovieSearchResult-movie-"]:hover {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
} }
[class*="ImportMovieTitle-year-"] { [class*="ImportMovieTitle-year-"] {
@ -810,7 +811,7 @@ a:hover {
[class*="DiscoverMoviePoster-title-"], [class*="DiscoverMoviePoster-title-"],
[class*="DiscoverMoviePosterInfo-info-"] { [class*="DiscoverMoviePosterInfo-info-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -824,17 +825,17 @@ a:hover {
} }
[class*="AddListMovieOverview-content-"]:hover { [class*="AddListMovieOverview-content-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
[class*="PageJumpBarItem-jumpBarItem-"]:hover { [class*="PageJumpBarItem-jumpBarItem-"]:hover {
color: var(--text-hover); color: var(--text-hover);
background: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
/*Posters*/ /*Posters*/
[class*="AddListMoviePoster-title-"] { [class*="AddListMoviePoster-title-"] {
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -842,7 +843,7 @@ a:hover {
/* FOOTER */ /* FOOTER */
[class*="PageContentFooter-contentFooter-"] { [class*="PageContentFooter-contentFooter-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
@ -928,18 +929,18 @@ a:hover {
} }
[class*="DayOfWeek-dayOfWeek-"] { [class*="DayOfWeek-dayOfWeek-"] {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="CalendarDay-dayOfMonth-"] { [class*="CalendarDay-dayOfMonth-"] {
border-bottom: 1px solid hsla(0, 0%, 100%, .08); border-bottom: 1px solid hsla(0, 0%, 100%, .08);
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
[class*="CalendarDay-isToday-"], [class*="CalendarDay-isToday-"],
[class*="DayOfWeek-isToday-"] { [class*="DayOfWeek-isToday-"] {
background-color: hsla(0, 0%, 100%, .25) !important; background: var(--transparency-dark-25) !important;
} }
[class*="CalendarDay-day-"], [class*="CalendarDay-day-"],
@ -990,7 +991,7 @@ a:hover {
/* calendar agenda */ /* calendar agenda */
[class*="AgendaEvent-event-"]:hover { [class*="AgendaEvent-event-"]:hover {
background-color: hsla(0, 0%, 100%, .08) !important; background: var(--transparency-dark-10) !important;
} }
/* SETTINGS */ /* SETTINGS */
@ -1017,15 +1018,15 @@ a:hover {
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-token-"] { [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 255, 0.15); background: var(--transparency-light-15);
} }
[class*="NamingOption-example-"] { [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"] { [class*="NamingOption-option-"] {
@ -1033,17 +1034,17 @@ a:hover {
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
background-color: rgba(255, 255, 2550, 0.25); background: var(--transparency-light-25);
} }
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] { [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
background-color: rgba(255, 255, 2550, 0.35); background: var(--transparency-light-35);
} }
/* PROFILES */ /* PROFILES */
[class*="Card-card-"], [class*="Card-card-"],
[class*="QualityProfiles-addQualityProfile-"] { [class*="QualityProfiles-addQualityProfile-"] {
background-color: rgba(0, 0, 0, .45); background: var(--transparency-dark-45);
box-shadow: 0 0 10px 1px #000000; box-shadow: 0 0 10px 1px #000000;
color: var(--text); color: var(--text);
} }
@ -1068,12 +1069,12 @@ a:hover {
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"], [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
[class*="LanguageProfileItem-languageProfileItem-"] { [class*="LanguageProfileItem-languageProfileItem-"] {
border: none; border: none;
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
color: var(--text-hover); color: var(--text-hover);
} }
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] { [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
background: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25)
} }
[class*="KeyValueListInputItem-keyInput-"], [class*="KeyValueListInputItem-keyInput-"],
@ -1085,7 +1086,7 @@ a:hover {
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] { [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(0, 0, 0, .25); background: var(--transparency-dark-25)
} }
[class*="QualityDefinitions-sizeLimitHelpText-"] { [class*="QualityDefinitions-sizeLimitHelpText-"] {
@ -1119,7 +1120,7 @@ a:hover {
/* LOG */ /* LOG */
[class*="Alert-info-"] { [class*="Alert-info-"] {
border-color: transparent; border-color: transparent;
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: #FFC107; color: #FFC107;
} }
@ -1145,12 +1146,12 @@ a:hover {
/* Login Page */ /* Login Page */
.panel-body { .panel-body {
background-color: rgba(0, 0, 0, 0.25); background: var(--transparency-dark-25);
color: var(--text); color: var(--text);
} }
.panel-header { .panel-header {
background-color: rgba(0, 0, 0, 0.45); background: var(--transparency-dark-45);
} }
.forgot-password { .forgot-password {
@ -1160,7 +1161,7 @@ a:hover {
input[type=email], input[type=email],
input[type=password] { input[type=password] {
border: none; border: none;
background-color: rgba(255, 255, 255, 0.08); background: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
@ -1181,7 +1182,7 @@ input[type=password] {
outline: 0; outline: 0;
border-color: var(--text-hover); border-color: var(--text-hover);
box-shadow: none; box-shadow: none;
background-color: rgba(255, 255, 255, 0.25); background: var(--transparency-light-25);
} }
/* Custom filter */ /* Custom filter */
@ -1190,7 +1191,7 @@ input[type=password] {
} }
[class*="CustomFilter-customFilter-"]:hover { [class*="CustomFilter-customFilter-"]:hover {
background-color: hsla(0, 0%, 100%, .08); background: var(--transparency-dark-10);
} }
[class*="SelectMovieModalContent-path-"] { [class*="SelectMovieModalContent-path-"] {

View File

@ -11,6 +11,7 @@
/* https://github.com/gilbN/theme.park */ /* https://github.com/gilbN/theme.park */
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css");
.bg-light { .bg-light {
background: var(--main-bg-color) !important; background: var(--main-bg-color) !important;
@ -31,7 +32,7 @@
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .2); background: var(--transparency-dark-20);
background-clip: padding-box; background-clip: padding-box;
} }
@ -43,7 +44,7 @@
min-height: 50px; min-height: 50px;
border: 3px solid transparent; border: 3px solid transparent;
border-radius: 8px; border-radius: 8px;
background-color: hsla(0, 0%, 100%, .5); background: var(--transparency-light-50);
background-clip: padding-box; background-clip: padding-box;
} }
@ -79,7 +80,7 @@ code {
font-size: .875em; font-size: .875em;
color: #d63384; color: #d63384;
word-wrap: break-word; word-wrap: break-word;
background: rgb(0 0 0 / 50%); background: var(--transparency-dark-50);
padding: 2px 6px; padding: 2px 6px;
border-radius: 5px; border-radius: 5px;
} }
@ -99,7 +100,7 @@ a:hover {
/* TOP NAV */ /* TOP NAV */
.bg-primary { .bg-primary {
background: rgba(0, 0, 0, .15) !important; background: var(--transparency-dark-15) !important;
} }
.navbar-dark .navbar-brand { .navbar-dark .navbar-brand {
@ -130,7 +131,7 @@ a:hover {
.dropdown-item:focus, .dropdown-item:focus,
.dropdown-item:hover { .dropdown-item:hover {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(255, 255, 255, .1); background: var(--transparency-light-10);
} }
.dropdown-item.disabled, .dropdown-item.disabled,
@ -162,13 +163,13 @@ a:hover {
.btn-light { .btn-light {
color: var(--button-text); color: var(--button-text);
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10);
border-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .08);
} }
.btn-light:hover { .btn-light:hover {
color: var(--button-text-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); border-color: rgba(255, 255, 255, .08);
} }
@ -333,7 +334,7 @@ a:hover {
/* FORMS */ /* FORMS */
.form-control { .form-control {
color: var(--text-hover); color: var(--text-hover);
background-color: rgba(0, 0, 0, .15); background: var(--transparency-dark-15);
border: 1px solid rgba(0, 0, 0, .15); border: 1px solid rgba(0, 0, 0, .15);
} }
@ -347,7 +348,7 @@ a:hover {
textarea.form-control:focus { textarea.form-control:focus {
color: var(--text-hover); color: var(--text-hover);
background: rgba(0, 0, 0, .35); background: var(--transparency-dark-35);
border-color: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .15);
outline: 0; outline: 0;
box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 0%); box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 0%);
@ -355,7 +356,7 @@ textarea.form-control:focus {
.form-control:disabled, .form-control:disabled,
.form-control[readonly] { .form-control[readonly] {
background-color: rgba(255, 255, 255, .15); background: var(--transparency-light-15);
opacity: 1; opacity: 1;
} }
@ -397,13 +398,13 @@ textarea.form-control:focus {
.page-item.disabled .page-link { .page-item.disabled .page-link {
color: var(--text-muted); color: var(--text-muted);
pointer-events: none; pointer-events: none;
background-color: rgba(255, 255, 255, .08); background-color: var(--transparency-light-10);
border-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .08);
} }
/* CARDS */ /* CARDS */
.card { .card {
background-color: rgba(0, 0, 0, .25); background: var(--transparency-dark-25);
} }
.image-card:hover .overlay { .image-card:hover .overlay {
@ -411,7 +412,7 @@ textarea.form-control:focus {
transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out;
-webkit-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); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }

View File

@ -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);
}