mirror of
https://github.com/gilbN/theme.park.git
synced 2024-08-17 23:49:37 +02:00
feat: 💄 Adds transparency vars
This commit is contained in:
GilbN
parent
51c3e69582
commit
c3803d070b
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color);
|
||||
@ -61,7 +62,7 @@ body *:hover::-webkit-scrollbar-thumb {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -73,7 +74,7 @@ body *:hover::-webkit-scrollbar-thumb {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -113,7 +114,7 @@ h6,
|
||||
}
|
||||
|
||||
.login__form .card {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
background: var(--transparency-dark-10);
|
||||
border: 1px solid rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
@ -183,7 +184,7 @@ h6,
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
background: var(--transparency-dark-10);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.03);
|
||||
color: var(--text);
|
||||
}
|
||||
@ -235,7 +236,7 @@ h6,
|
||||
|
||||
.tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
|
||||
cursor: pointer;
|
||||
background: rgb(0 0 0 / 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -245,7 +246,7 @@ h6,
|
||||
|
||||
/* CARDS*/
|
||||
.card {
|
||||
background-color: rgb(0 0 0 / 8%);
|
||||
background-color: var(--transparency-dark-10);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--text);
|
||||
}
|
||||
@ -331,7 +332,7 @@ h6,
|
||||
.dropdown-item:focus {
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
background-color: rgb(255 255 255 / 0.08);
|
||||
background-color: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.select__menu {
|
||||
@ -347,7 +348,7 @@ h6,
|
||||
}
|
||||
|
||||
.select__option:hover {
|
||||
background: rgba(255, 255, 255, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
.select__option {
|
||||
@ -366,11 +367,11 @@ h6,
|
||||
|
||||
/* INSTALL */
|
||||
.setup__container {
|
||||
background-color: rgb(0 0 0 / 8%);
|
||||
background-color: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.setup__progress-wrap {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
background-color: var(--transparency-dark-50);
|
||||
}
|
||||
|
||||
.setup__logo {
|
||||
@ -388,7 +389,7 @@ h6,
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.service__icon {
|
||||
@ -397,7 +398,7 @@ h6,
|
||||
|
||||
/* LOGS */
|
||||
.logs__table {
|
||||
background-color: rgb(0 0 0 / 8%);
|
||||
background-color: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.logs__text,
|
||||
@ -447,7 +448,7 @@ h6,
|
||||
|
||||
.ReactTable .-loading,
|
||||
.ReactTable .-loading>div {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: var(--transparency-light-50);
|
||||
}
|
||||
|
||||
.ReactTable .rt-thead .rt-th,
|
||||
@ -461,7 +462,7 @@ h6,
|
||||
}
|
||||
|
||||
.ReactTable .rt-thead.-header {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.ReactTable .rt-thead .rt-th.-sort-asc, .ReactTable .rt-thead .rt-td.-sort-asc {
|
||||
@ -495,7 +496,7 @@ h6,
|
||||
/* FORMS */
|
||||
.form-control {
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid rgba(255, 255, 255, .1)
|
||||
}
|
||||
|
||||
@ -511,7 +512,7 @@ h6,
|
||||
border-color: transparent;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--transparency-light-20);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -523,7 +524,7 @@ h6,
|
||||
|
||||
.custom-select {
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
|
||||
background: var(--transparency-light-10) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
|
||||
background-size: 8px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
@ -544,7 +545,7 @@ select:focus {
|
||||
}
|
||||
|
||||
.icon--selected {
|
||||
background-color: rgb(0 0 0 / 15%);
|
||||
background-color: var(--transparency-dark-15);
|
||||
border: solid 1px transparent;
|
||||
}
|
||||
|
||||
@ -581,7 +582,7 @@ select:focus {
|
||||
|
||||
.btn-secondary {
|
||||
color: var(--button-text);
|
||||
background-color: rgb(255 255 255 / 25%);
|
||||
background-color: var(--transparency-light-25);
|
||||
border-color: rgb(255 255 255 / 0%);
|
||||
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
|
||||
@ -623,7 +624,7 @@ select:focus {
|
||||
}
|
||||
|
||||
.ReactModal__Overlay--after-open {
|
||||
background-color: rgb(0 0 0 / 0.7) !important;
|
||||
background-color: var(--transparency-dark-70) !important;
|
||||
}
|
||||
|
||||
/* MOBILE */
|
||||
@ -657,21 +658,4 @@ select:focus {
|
||||
.dropdown-menu {
|
||||
background: #1f1f1f !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* PLACEHOLDER TEXT */
|
||||
::placeholder {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: var(--text);
|
||||
}
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
@ -30,7 +31,7 @@ body {
|
||||
|
||||
/* scroller */
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background-color: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@ -42,7 +43,7 @@ body {
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.35) !important;
|
||||
background-color: var(--transparency-light-35) !important;
|
||||
}
|
||||
|
||||
a,
|
||||
@ -63,21 +64,21 @@ a:hover {
|
||||
}
|
||||
|
||||
.page-link {
|
||||
background-color: rgba(255, 255, 255, .07);
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
background-color: var(--transparency-light-10);
|
||||
border: 1px solid var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: none;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
background-color: var(--transparency-dark-15);
|
||||
border: 1px solid var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.page-item.disabled .page-link {
|
||||
color: var(--link-color);
|
||||
background-color: rgba(255, 255, 255, .07);
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
background-color: var(--transparency-light-10);
|
||||
border: 1px solid var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.page-link:focus {
|
||||
@ -100,7 +101,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: rgb(0 0 0 / 15%);
|
||||
background-color: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
@ -149,13 +150,13 @@ label,
|
||||
|
||||
.form-control {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background-color: var(--transparency-light-10);
|
||||
border: 1px solid var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
border-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background-color: var(--transparency-light-25) !important;
|
||||
border-color: var(--transparency-light-25) !important;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
color: var(--text-hover);
|
||||
@ -163,10 +164,10 @@ label,
|
||||
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background-color: rgb(255 255 255 / 15%);
|
||||
background-color: var(--transparency-light-15);
|
||||
opacity: .7;
|
||||
color: var(--text-hover);
|
||||
border: 1px solid rgb(255 255 255 / 15%);
|
||||
border: 1px solid var(--transparency-light-15);
|
||||
}
|
||||
|
||||
:root .form-control:focus {
|
||||
@ -180,7 +181,7 @@ label,
|
||||
|
||||
.bootstrap-tagsinput {
|
||||
color: var(--text);
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: 1px solid transparent !important;
|
||||
|
||||
}
|
||||
@ -195,7 +196,7 @@ label,
|
||||
|
||||
.input-group-text {
|
||||
color: var(--text);
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -205,7 +206,7 @@ label,
|
||||
}
|
||||
|
||||
.custom-chip-input:focus-within {
|
||||
border-color: rgb(255 255 255 / 10%);
|
||||
border-color: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.custom-chip-input .custom-chip {
|
||||
@ -221,7 +222,7 @@ label,
|
||||
|
||||
/* SIDEBAR */
|
||||
.sidebar-container {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.sidebar-container .sidebar-button,
|
||||
@ -233,7 +234,7 @@ label,
|
||||
.sidebar-container .sidebar-button:active,
|
||||
.sidebar-container .sidebar-button:focus {
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
background-color: rgba(0, 0, 0, 0.15) !important;
|
||||
background-color: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
.sidebar-container .sidebar-button:hover,
|
||||
@ -249,7 +250,7 @@ label,
|
||||
.sidebar-container .sidebar-button.sb-active,
|
||||
.sidebar-container .sidebar-button.sb-active:hover,
|
||||
.sidebar-container .button.active {
|
||||
background-color: rgba(0, 0, 0, 0.15) !important;
|
||||
background-color: var(--transparency-dark-15) !important;
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
}
|
||||
|
||||
@ -298,7 +299,7 @@ label,
|
||||
|
||||
/* TOP NAV BAR */
|
||||
.header-container .bg-primary {
|
||||
background-color: rgba(0, 0, 0, .35) !important;
|
||||
background: var(--transparency-dark-35) !important;
|
||||
}
|
||||
|
||||
.header-container .btn-primary {
|
||||
@ -333,7 +334,7 @@ label,
|
||||
-webkit-background-size: auto, cover !important;
|
||||
-moz-background-size: auto, cover !important;
|
||||
-o-background-size: auto, cover !important;
|
||||
border-bottom: solid 1px rgba(255, 255, 255, .1);
|
||||
border-bottom: solid 1px var(--transparency-light-10);
|
||||
|
||||
}
|
||||
|
||||
@ -355,21 +356,21 @@ label,
|
||||
|
||||
.auth-card .card-footer {
|
||||
background-color: transparent;
|
||||
border-top: 1px solid rgba(255, 255, 255, .1);
|
||||
border-top: 1px solid var(--transparency-light-10);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid rgb(255 255 255 / 10%);
|
||||
border-top: 1px solid var(--transparency-light-10);
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background-color: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
.card-header {
|
||||
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
||||
border-bottom: 1px solid var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.settings-card:hover,
|
||||
@ -380,8 +381,8 @@ hr {
|
||||
|
||||
.alert-secondary {
|
||||
color: var(--text);
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
border-color: rgba(255, 255, 255, .15);
|
||||
background-color: var(--transparency-light-15);
|
||||
border-color: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
/* Series page */
|
||||
@ -391,7 +392,7 @@ hr {
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: rgb(255 255 255 / 20%);
|
||||
background-color: var(--transparency-light-20);
|
||||
}
|
||||
|
||||
.progress-bar.bg-primary {
|
||||
@ -421,17 +422,17 @@ hr {
|
||||
|
||||
.popover {
|
||||
background-color: #1f1f1f;
|
||||
border: 1px solid rgba(255, 255, 255, .2);
|
||||
border: 1px solid var(--transparency-light-20);
|
||||
}
|
||||
|
||||
.bs-popover-auto[x-placement^=top]>.arrow:after,
|
||||
.bs-popover-top>.arrow:after {
|
||||
border-top-color: rgba(255, 255, 255, .5);
|
||||
border-top-color: var(--transparency-light-50);
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
background-color: #1f1f1f;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--transparency-light-10);
|
||||
|
||||
}
|
||||
|
||||
@ -638,7 +639,7 @@ hr {
|
||||
}
|
||||
|
||||
.custom-control-input:focus~.custom-control-label:before {
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .07);
|
||||
box-shadow: 0 0 0 0.2rem var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.custom-control-input:checked~.custom-control-label:before {
|
||||
@ -721,11 +722,11 @@ input {
|
||||
.dropdown-item:focus,
|
||||
.dropdown-item:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background-color: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.custom-selector .selector__control {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: rgba(0, 0, 0, 0) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
@ -741,7 +742,7 @@ input {
|
||||
}
|
||||
|
||||
.custom-selector .selector__control--is-focused {
|
||||
border-color: rgba(255, 255, 255, .2) !important;
|
||||
border-color: var(--transparency-light-20) !important;
|
||||
}
|
||||
|
||||
.selector__menu {
|
||||
@ -757,7 +758,7 @@ input {
|
||||
}
|
||||
|
||||
.custom-selector .selector__option--is-selected:active {
|
||||
background-color: rgba(255, 255, 255, .07) !important;
|
||||
background-color: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.custom-selector .selector__option--is-focused {
|
||||
@ -801,7 +802,7 @@ input {
|
||||
}
|
||||
|
||||
.recharts-rectangle.recharts-tooltip-cursor {
|
||||
fill: rgba(255, 255, 255, .15) !important;
|
||||
fill: var(--transparency-light-15) !important;
|
||||
}
|
||||
|
||||
text {
|
||||
@ -833,7 +834,7 @@ line {
|
||||
|
||||
.toast-header {
|
||||
color: var(--text-hover);
|
||||
background-color: hsla(0, 0%, 0%, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
@ -93,7 +94,7 @@ html[class*="theme_"] .navbar .nav-item>.nav-link {
|
||||
|
||||
.table-hover tbody tr:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
h1,
|
||||
@ -118,7 +119,7 @@ html[class*="theme_"] .card-header,
|
||||
|
||||
/* NAVBAR */
|
||||
.navbar {
|
||||
background-color: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .show>.nav-link,
|
||||
@ -131,12 +132,12 @@ html[class*="theme_"] .card-header,
|
||||
/* CARDS */
|
||||
|
||||
html[class*="theme_"] .card-header {
|
||||
background-color: rgb(0 0 0 / 45%);
|
||||
background-color: var(--transparency-dark-45);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(255, 255, 255, 0.07) !important;
|
||||
background-color: var(--transparency-dark-10) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
@ -158,7 +159,7 @@ app-vault-groupings .card li.active>div>.fa {
|
||||
|
||||
body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4,
|
||||
body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4>div {
|
||||
background-color: rgb(0 0 0 / 15%) !important;
|
||||
background-color: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
html[class*="theme_"] .password-number {
|
||||
@ -279,19 +280,19 @@ html[class*="theme_"] .form-control-file {
|
||||
html[class*="theme_"] .form-control:focus {
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
background: rgb(253 253 253 / 15%);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
html[class*="theme_"] .form-control {
|
||||
color: var(--text);
|
||||
background-color: rgb(0 0 0 / 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
|
||||
}
|
||||
|
||||
html[class*="theme_"] .form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background-color: rgb(255 255 255 / 25%);
|
||||
background-color: var(--transparency-light-25);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -332,13 +333,13 @@ html[class*="theme_"] .dropdown-item:hover,
|
||||
html[class*="theme_"] .dropdown-item:focus {
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
background-color: rgb(255 255 255 / 0.08);
|
||||
background-color: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
a.text-danger:hover,
|
||||
a.text-danger:focus {
|
||||
color: #dd4b39 !important;
|
||||
background-color: rgb(255 255 255 / 0.08) !important;
|
||||
background-color: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.dropdown-menu .text-danger {
|
||||
@ -373,24 +374,24 @@ html[class*="theme_"] .footer {
|
||||
html[class*="theme_"] .list-group-item.active {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
color: rgb(var(--accent-color));
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
background: var(--transparency-light-10);
|
||||
border-left: 3px solid rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
html[class*="theme_"] .callout {
|
||||
background-color: rgb(255 255 255 / 15%);
|
||||
background: var(--transparency-light-15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
html[class*="theme_"] .list-group-item {
|
||||
background-color: rgb(0 0 0 / 35%);
|
||||
background: var(--transparency-dark-35);
|
||||
border: 1px solid rgb(255 255 255 / 8%);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
html[class*="theme_"] .progress {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
@ -530,7 +531,7 @@ html[class*="theme_"] .org-nav .nav-tabs a.active {
|
||||
}
|
||||
|
||||
html[class*="theme_"] .nav-tabs .nav-link.active {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
@ -558,7 +559,7 @@ html[class*="theme_"] .org-nav .nav-tabs a:not(.active) {
|
||||
.nav-tabs .nav-link.active,
|
||||
.nav-tabs .nav-item.show .nav-link {
|
||||
color: var(--text);
|
||||
background-color: rgb(255 255 255 / 25%);
|
||||
background-color: var(--transparency-light-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -607,11 +608,11 @@ html[class*="theme_"] .table td [class*="fa-"] {
|
||||
|
||||
/* Cards */
|
||||
.bg-secondary {
|
||||
background-color: rgb(255 255 255 / 10%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
html[class*="theme_"] .groupings .card .card-body a {
|
||||
@ -631,7 +632,7 @@ html[class*="theme_"] .groupings .card .card-body a {
|
||||
color: var(--text);
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
background-color: rgb(0 0 0 / 10%);
|
||||
background: var(--transparency-dark-10);
|
||||
border-color: rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
/* APP VARS*/
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--color-background: var(--main-bg-color);
|
||||
@ -203,7 +204,7 @@
|
||||
.dropdown-menu>li>a:focus,
|
||||
.dropdown-menu>li>a:hover {
|
||||
color: var(--text-hover);
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/* SIDEMENU */
|
||||
@ -225,7 +226,7 @@
|
||||
-webkit-transition: color .2s;
|
||||
-o-transition: color .2s;
|
||||
transition: color .2s;
|
||||
background-color: rgba(0, 0, 0, .55) !important;
|
||||
background: var(--transparency-dark-55) !important;
|
||||
}
|
||||
|
||||
/* NAVBAR */
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
html {
|
||||
background: var(--main-bg-color);
|
||||
@ -34,20 +35,20 @@
|
||||
|
||||
/* scroller */
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.x-grid3-header table,
|
||||
@ -56,7 +57,7 @@
|
||||
}
|
||||
|
||||
.ext-el-mask {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.ext-el-mask-msg {
|
||||
@ -304,13 +305,13 @@
|
||||
}
|
||||
|
||||
ul.x-tab-strip-top {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: none;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
ul.x-tab-strip-bottom {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
//background-image: url(../images/gray/tabs/tab-strip-btm-bg.gif);
|
||||
border-top-color: transparent;
|
||||
}
|
||||
@ -349,7 +350,7 @@
|
||||
ul.x-tab-strip li {
|
||||
float: left;
|
||||
margin-left: 2px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
#torrentDetails dl dt,
|
||||
@ -435,7 +436,7 @@
|
||||
|
||||
.x-form-text,
|
||||
textarea.x-form-field {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
@ -1034,7 +1035,7 @@
|
||||
}
|
||||
|
||||
.x-grid3 {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.x-grid-panel .x-panel-mc .x-panel-body {
|
||||
@ -1066,12 +1067,12 @@
|
||||
}
|
||||
|
||||
.x-grid3-row-alt {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.x-grid3-row-over {
|
||||
border-color: transparent;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@ -1084,7 +1085,7 @@
|
||||
}
|
||||
|
||||
.x-grid3-header {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: none;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
@ -1110,7 +1111,7 @@
|
||||
td.sort-desc .x-grid3-hd-inner,
|
||||
td.sort-asc .x-grid3-hd-inner,
|
||||
td.x-grid3-hd-menu-open .x-grid3-hd-inner {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: none;
|
||||
|
||||
}
|
||||
@ -1151,7 +1152,7 @@
|
||||
}
|
||||
|
||||
.x-grid3-row-selected {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
background-image: none;
|
||||
border-color: transparent;
|
||||
color: var(--text-hover) !important;
|
||||
@ -1512,11 +1513,11 @@
|
||||
}
|
||||
|
||||
.x-tree-node .x-tree-node-over {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.x-tree-node .x-tree-selected {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.x-tree-drop-ok-append .x-dd-drop-icon {
|
||||
@ -1778,7 +1779,7 @@
|
||||
|
||||
.x-menu-item-active {
|
||||
background-image: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
border-color: transparent;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
@ -1956,7 +1957,7 @@
|
||||
font-family: 'Roboto', tahoma, arial, verdana, sans-serif;
|
||||
border-color: transparent;
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.x-panel-body {
|
||||
@ -2304,12 +2305,12 @@
|
||||
}
|
||||
|
||||
.x-layout-collapsed {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.x-layout-collapsed-over {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.x-layout-split-west .x-layout-mini {
|
||||
@ -2374,7 +2375,7 @@
|
||||
}
|
||||
|
||||
.x-list-header {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: none;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
@ -2389,11 +2390,11 @@
|
||||
}
|
||||
|
||||
.x-list-over {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.x-list-selected {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
|
||||
@ -11,11 +11,12 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--scheme-main-ter: var(--main-bg-color);
|
||||
--text-strong-color: var(--button-text-hover);
|
||||
--border-color: rgb(255 255 255 / 25%);
|
||||
--border-color: var(--transparency-light-25);
|
||||
--logo-color: rgb(var(--accent-color));
|
||||
--body-background-color: var(--main-bg-color);
|
||||
--border-hover-color: rgb(var(--accent-color));
|
||||
@ -53,14 +54,14 @@ section header,
|
||||
/* Scrollbar */
|
||||
|
||||
html.has-custom-scrollbars ::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, .25);
|
||||
background: var(--transparency-light-25);
|
||||
outline: 1px solid #0000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
html.has-custom-scrollbars ::-webkit-scrollbar-thumb:active,
|
||||
html.has-custom-scrollbars ::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, .45);
|
||||
background: var(--transparency-light-45);
|
||||
|
||||
}
|
||||
|
||||
@ -110,13 +111,13 @@ p,
|
||||
|
||||
a.panel-block:hover,
|
||||
label.panel-block:hover {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
color: var(--text-strong-color);
|
||||
}
|
||||
|
||||
/* Side Menu*/
|
||||
.menu-list a:hover {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -154,7 +155,7 @@ li.exited a {
|
||||
.autocomplete .dropdown-item.is-hovered,
|
||||
a.dropdown-item:hover,
|
||||
button.dropdown-item:hover {
|
||||
background: rgba(255, 255, 255, .25);
|
||||
background: var(--transparency-light-25);
|
||||
color: var(--text-strong-color);
|
||||
}
|
||||
|
||||
@ -234,7 +235,7 @@ section .is-scrollbar-notification button {
|
||||
}
|
||||
|
||||
code {
|
||||
background: rgba(0, 0, 0, .35) !important;
|
||||
background: var(--transparency-dark-35) !important;
|
||||
}
|
||||
|
||||
.switch input[type=checkbox]:checked+.check {
|
||||
@ -253,7 +254,7 @@ code {
|
||||
/* Events */
|
||||
|
||||
.events {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
}
|
||||
|
||||
.scroll-progress svg circle {
|
||||
@ -270,10 +271,10 @@ code {
|
||||
}
|
||||
|
||||
.events.medium {
|
||||
background: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.date {
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color);
|
||||
@ -65,7 +66,7 @@ a.disabled-link {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -77,7 +78,7 @@ a.disabled-link {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -161,7 +162,7 @@ label {
|
||||
.col-xs-4 .card,
|
||||
.col-xs-12 .card,
|
||||
.col-xs-8 .card {
|
||||
background: rgb(0 0 0 / 8%) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
#schedule-0,
|
||||
@ -186,7 +187,7 @@ label {
|
||||
#schedule-19,
|
||||
#schedule-20,
|
||||
[id*="#schedule-"] {
|
||||
background-color: rgb(0 0 0 / 8%);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/* TIMELINE */
|
||||
@ -218,7 +219,7 @@ label {
|
||||
.card .nav-tabs>li.active>a:hover {
|
||||
color: var(--text);
|
||||
cursor: default;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid rgba(255, 255, 255, .25);
|
||||
border-bottom-color: var(--text);
|
||||
border-radius: 6px 6px 0 0;
|
||||
@ -226,7 +227,7 @@ label {
|
||||
|
||||
.card .nav>li>a:hover,
|
||||
.card .nav>li>a:focus {
|
||||
background-color: rgba(255, 255, 255, .07);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -236,8 +237,8 @@ label {
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
background-color: rgb(0 0 0 / 26%);
|
||||
border-bottom: 1px solid rgb(255 255 255 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* SIDEBAR */
|
||||
@ -245,7 +246,7 @@ label {
|
||||
.sidebar[data-background-color="black"]:before,
|
||||
.off-canvas-sidebar[data-background-color="black"]:after,
|
||||
.off-canvas-sidebar[data-background-color="black"]:before {
|
||||
background: rgb(0 0 0 / 10%);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar[data-background-color="black"] .logo,
|
||||
@ -321,7 +322,7 @@ label {
|
||||
.nav-tabs>li.active>a:hover {
|
||||
color: var(--text);
|
||||
cursor: default;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
@ -332,7 +333,7 @@ label {
|
||||
}
|
||||
|
||||
.modal-body .nav-tabs>li.active>a:hover {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -352,7 +353,7 @@ label {
|
||||
.modal-body .nav .open>a,
|
||||
.nav .open>a:focus,
|
||||
.nav .open>a:hover {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -383,18 +384,18 @@ label {
|
||||
|
||||
.form-control,
|
||||
textarea {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
#input_s3_provider:focus,
|
||||
@ -428,7 +429,7 @@ fieldset[disabled] .form-control {
|
||||
|
||||
.timepicker-spinner .btn:hover,
|
||||
.timepicker-spinner .btn:focus {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
@ -521,7 +522,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt
|
||||
}
|
||||
|
||||
.close {
|
||||
var(--text-hover);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.navbar .navbar-nav>li>a.btn-success,
|
||||
@ -588,7 +589,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt
|
||||
.table>thead>tr>td.active,
|
||||
.table>thead>tr>th.active,
|
||||
.row-clickable.active {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -629,7 +630,7 @@ hr {
|
||||
|
||||
/* PROGRESS BARS */
|
||||
.progress {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@ -642,7 +643,7 @@ hr {
|
||||
|
||||
/* FOOTER */
|
||||
.main-panel>.footer {
|
||||
background: rgb(0 0 0 / 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* MOBILE */
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
@ -153,14 +154,14 @@ form.styled select,
|
||||
form.styled .input.select select {
|
||||
color: var(--text);
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
form.styled input:focus,
|
||||
form.styled textarea:focus {
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
select:focus,
|
||||
@ -204,7 +205,7 @@ body .container .body .contextmenu {
|
||||
}
|
||||
|
||||
body .container .body .contextmenu li a:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -310,7 +311,7 @@ ul.tabs>li {
|
||||
/* FOLDER TREE*/
|
||||
.tree-view li div.selected {
|
||||
border-color: rgba(255, 255, 255, .1);
|
||||
background-color: rgba(252, 252, 252, .25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
|
||||
@ -321,7 +322,7 @@ body .container .header .state .progress-bar {
|
||||
|
||||
/* LOGIN */
|
||||
#login h2 {
|
||||
background: rgba(255, 255, 255, .15);
|
||||
background: var(--transparency-light-15);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -330,7 +331,7 @@ body .container .header .state .progress-bar {
|
||||
}
|
||||
|
||||
#login fieldset {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
#login fieldset input[type="submit"] {
|
||||
@ -345,6 +346,6 @@ body .container .header .state .progress-bar {
|
||||
|
||||
#login fieldset input[type="email"],
|
||||
#login fieldset input[type="password"] {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--theme-primary-color: var(--accent-color);
|
||||
@ -11,15 +12,15 @@
|
||||
--theme-background: var(--main-bg-color);
|
||||
--header-blur-background: rgba(20,20,20,0.66);
|
||||
--drawer-background: #2C2C2E;
|
||||
--docked-drawer-background: rgba(0, 0, 0, 0.25);
|
||||
--docked-drawer-background: var(--transparency-dark-25);
|
||||
--button-background: var(--button-color);
|
||||
--card-background: rgba(0, 0, 0, 0.15);
|
||||
--card-background: var(--transparency-dark-15);
|
||||
--footer-background: var(--modal-footer-color);
|
||||
--footer-blur-background: rgba(29,29,31,0.66);
|
||||
|
||||
--header-background: var(--theme-background);
|
||||
--theme-body-secondary-text-color: rgba(255, 255, 255, .6);
|
||||
--line-background: rgba(255, 255, 255, .08);
|
||||
--line-background: var(--transparency-light-10);
|
||||
--line-size: .08em;
|
||||
--scrollbar-thumb-background: rgba(255,255,255,.3);
|
||||
}
|
||||
@ -29,9 +30,9 @@
|
||||
--theme-background: var(--main-bg-color);
|
||||
--header-blur-background: rgba(20,20,20,0.66);
|
||||
--drawer-background: #2C2C2E;
|
||||
--docked-drawer-background: rgba(0, 0, 0, 0.25);
|
||||
--docked-drawer-background: var(--transparency-dark-25);
|
||||
--button-background: #1f1f1f;
|
||||
--card-background: rgba(0, 0, 0, 0.15);
|
||||
--card-background: var(--transparency-dark-15);
|
||||
--footer-background: var(--modal-footer-color);
|
||||
--footer-blur-background: rgba(29,29,31,0.66);
|
||||
}
|
||||
@ -41,9 +42,9 @@
|
||||
--theme-background: var(--main-bg-color);
|
||||
--header-blur-background: rgba(20,20,20,0.66);
|
||||
--drawer-background: #2C2C2E;
|
||||
--docked-drawer-background: rgba(0, 0, 0, 0.25);
|
||||
--docked-drawer-background: var(--transparency-dark-25);
|
||||
--button-background: #1f1f1f;
|
||||
--card-background: rgba(0, 0, 0, 0.15);
|
||||
--card-background: var(--transparency-dark-15);
|
||||
--footer-background: var(--modal-footer-color);
|
||||
--footer-blur-background: rgba(29,29,31,0.66);
|
||||
}
|
||||
@ -175,7 +176,7 @@ html {
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop {
|
||||
background-color: rgba(0, 0, 0, .83)
|
||||
background: var(--transparency-dark-80)
|
||||
}
|
||||
|
||||
@media not all and (min-width: 50em) {
|
||||
@ -217,7 +218,7 @@ html {
|
||||
|
||||
.emby-select-withcolor {
|
||||
color: inherit;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: var(--line-size) solid transparent
|
||||
}
|
||||
|
||||
@ -334,7 +335,7 @@ html {
|
||||
|
||||
@media(hover: hover) and (pointer:fine) {
|
||||
.actionSheetMenuItem:hover {
|
||||
background-color: rgba(255, 255, 255, .2)
|
||||
background: var(--transparency-light-20)
|
||||
}
|
||||
}
|
||||
|
||||
@ -398,7 +399,7 @@ html {
|
||||
.emby-input,
|
||||
.emby-textarea {
|
||||
color: inherit;
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border: var(--line-size) solid rgba(255, 255, 255, 0.1)
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
.message {
|
||||
color: var(--text-hover);
|
||||
@ -48,7 +49,7 @@ th {
|
||||
#login input[type=password],
|
||||
#login input[type=text] {
|
||||
color: var(--text-hover) !important;
|
||||
background-color: rgba(0, 0, 0, 0.15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -103,7 +104,7 @@ body {
|
||||
}
|
||||
|
||||
nav {
|
||||
background: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
height: 100%;
|
||||
top: 64px;
|
||||
width: 240px;
|
||||
@ -124,7 +125,7 @@ nav .action {
|
||||
}
|
||||
|
||||
nav .action:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
background: var(--transparency-light-05);
|
||||
color: rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
@ -133,7 +134,7 @@ nav>div {
|
||||
}
|
||||
|
||||
header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-repeat: repeat, no-repeat;
|
||||
background-attachment: fixed, fixed;
|
||||
background-position: center center, center center;
|
||||
@ -174,20 +175,20 @@ body {
|
||||
}
|
||||
|
||||
#listing.list .item {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
color: var(--text);
|
||||
border: none;
|
||||
}
|
||||
|
||||
#listing.list .item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
#listing.list .item.header {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
color: var(--text-hover);
|
||||
border-bottom: none;
|
||||
right: auto;
|
||||
@ -213,7 +214,7 @@ body {
|
||||
}
|
||||
|
||||
.share__box__info {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.share__box__download {
|
||||
@ -271,13 +272,13 @@ svg {
|
||||
}
|
||||
|
||||
#listing .item {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
color: var(--text);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.input {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -304,7 +305,7 @@ select>option {
|
||||
}
|
||||
|
||||
#search .boxes {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@ -313,11 +314,11 @@ select>option {
|
||||
}
|
||||
|
||||
#search .boxes>div>div {
|
||||
background-color: rgba(0, 0, 0, .10);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
#search .boxes>div>div:hover {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
#search.active #input {
|
||||
@ -343,7 +344,7 @@ select>option {
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
@ -404,7 +405,7 @@ table th {
|
||||
}
|
||||
|
||||
#search #input {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
#listing.mosaic .item {
|
||||
@ -413,7 +414,7 @@ table th {
|
||||
|
||||
#listing.mosaic .item:hover {
|
||||
box-shadow: none !important;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.dashboard p label {
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
/* MOBILE */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
@ -87,7 +88,7 @@ p,
|
||||
|
||||
|
||||
.panel--light {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.panel {
|
||||
@ -101,7 +102,7 @@ p,
|
||||
|
||||
.input,
|
||||
.inverse .input {
|
||||
background: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
color: var(--text-hover);
|
||||
border: 1px solid #0000;
|
||||
box-shadow: 0 1px 1px rgba(210, 216, 222, 0), 0 1px 3px 1px rgba(210, 216, 222, 0);
|
||||
@ -125,7 +126,7 @@ p,
|
||||
|
||||
.button--quaternary,
|
||||
.inverse .button--quaternary {
|
||||
background: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 1px 3px 1px rgba(0, 0, 0, 0);
|
||||
color: var(--text);
|
||||
@ -150,7 +151,7 @@ p,
|
||||
|
||||
.context-menu__items .select__item:focus-visible,
|
||||
.context-menu__items .select__item:hover {
|
||||
background: rgba(255, 255, 255, .15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.inverse .form__element__addon {
|
||||
@ -177,7 +178,7 @@ p,
|
||||
}
|
||||
|
||||
.sortable-list__item {
|
||||
background: rgb(255 255 255 / 10%);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
|
||||
}
|
||||
@ -188,7 +189,7 @@ p,
|
||||
|
||||
.css-q5wzhq:hover {
|
||||
color: var(--text-hover);
|
||||
background: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.css-m5tpeq:hover {
|
||||
@ -210,14 +211,14 @@ p,
|
||||
|
||||
.inverse .button--tertiary:focus,
|
||||
.inverse .button--tertiary:hover {
|
||||
background: rgba(255, 255, 255, .35);
|
||||
background: var(--transparency-light-35);
|
||||
border-color: #0000;
|
||||
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
|
||||
text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.inverse .button--tertiary:active {
|
||||
background: rgba(255, 255, 255, .35);
|
||||
background: var(--transparency-light-35);
|
||||
border-color: #0000;
|
||||
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
|
||||
text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
|
||||
@ -225,7 +226,7 @@ p,
|
||||
|
||||
.inverse .button--tertiary:focus,
|
||||
.inverse .button--tertiary:hover {
|
||||
background: rgba(255, 255, 255, .35);
|
||||
background: var(--transparency-light-35);
|
||||
border-color: #0000;
|
||||
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
|
||||
text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
|
||||
@ -264,7 +265,7 @@ p,
|
||||
|
||||
.menu__item.is-selectable:focus-within,
|
||||
.menu__item.is-selectable:hover {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -315,7 +316,7 @@ p,
|
||||
|
||||
.dark .table__row--heading,
|
||||
.table__row--heading {
|
||||
background: rgba(255, 255, 255, .15);
|
||||
background: var(--transparency-light-15);
|
||||
box-shadow: 0 1px 0 hsl(0deg 0% 100% / 12%);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
@ -455,7 +456,7 @@ p,
|
||||
.dark .action:hover,
|
||||
.action:focus-visible,
|
||||
.action:hover {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -474,7 +475,7 @@ p,
|
||||
/* SIDE MENU */
|
||||
.dark .application__sidebar,
|
||||
.application__sidebar {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
box-shadow: 1px 0 hsl(0deg 0% 100% / 12%);
|
||||
color: var(--text);
|
||||
}
|
||||
@ -625,7 +626,7 @@ p,
|
||||
.modal--vertical.modal--tabs-in-header .modal__header,
|
||||
.modal--vertical.modal--tabs-in-body .modal__tabs {
|
||||
/* Modal side menu*/
|
||||
background: rgb(0 0 0 / 45%) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -644,7 +645,7 @@ p,
|
||||
|
||||
.modal__tabs .modal__tab.is-active {
|
||||
color: var(--text-hover);
|
||||
background: rgb(255 255 255 / 15%);
|
||||
background: var(--transparency-light-15);
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
}
|
||||
|
||||
@ -693,7 +694,7 @@ p,
|
||||
}
|
||||
|
||||
.interactive-list {
|
||||
background: rgb(255 255 255 / 10%);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
box-shadow: 0 1px 1px rgb(0 0 0 / 15%), 0 1px 3px 1px rgb(0 0 0 / 20%);
|
||||
color: var(--text);
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color);
|
||||
@ -54,7 +55,7 @@ body {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -66,7 +67,7 @@ body {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -112,7 +113,7 @@ label {
|
||||
/* Header */
|
||||
.bg-primary {
|
||||
background-color: transparent !important;
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.navbar .list-ul-active,
|
||||
@ -152,12 +153,12 @@ label {
|
||||
table.dataTable.stripe tbody tr.odd,
|
||||
table.dataTable.display tbody tr.odd,
|
||||
table.dataTable tbody tr {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
table.dataTable.hover tbody tr:hover,
|
||||
table.dataTable.display tbody tr:hover {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
table.dataTable thead th,
|
||||
@ -177,14 +178,14 @@ table.dataTable.display tbody td {
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
|
||||
color: var(--text) !important;
|
||||
border: 1px solid transparent;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
|
||||
color: var(--text-hover) !important;
|
||||
border: 1px solid transparent;
|
||||
background: rgba(255, 255, 255, .08);
|
||||
background: var(--transparency-light-10)
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
|
||||
@ -281,7 +282,7 @@ table.dataTable.display tbody td {
|
||||
.nav-pills .nav-item.open .nav-link:focus,
|
||||
.nav-tabs .nav-item.show .nav-link {
|
||||
color: rgb(var(--accent-color));
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -298,13 +299,13 @@ table.dataTable.display tbody td {
|
||||
.nav-tabs .nav-link:focus,
|
||||
.nav-tabs .nav-item.open .nav-link:hover,
|
||||
.nav-pills .nav-item.open .nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: transparent;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.nav-tabs .nav-link.active:hover {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@ -313,7 +314,7 @@ table.dataTable.display tbody td {
|
||||
}
|
||||
|
||||
#plexServers .card-header {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover)
|
||||
}
|
||||
|
||||
@ -322,12 +323,12 @@ table.dataTable.display tbody td {
|
||||
}
|
||||
|
||||
#plexServers .list-group-item {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: none;
|
||||
}
|
||||
|
||||
#plexServers .card-footer {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@ -352,7 +353,7 @@ table.dataTable.display tbody td {
|
||||
.dropdown-item:focus {
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10)
|
||||
}
|
||||
|
||||
/* Input */
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
@import url("/css/base/gitea/chroma.css");
|
||||
@import url("/css/base/gitea/monaco_vs_dark.css");
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--color-text: var(--text);
|
||||
@ -119,7 +120,7 @@ a:hover,
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px !important;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@ -132,7 +133,7 @@ a:hover,
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px !important;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -224,21 +225,21 @@ b:hover,
|
||||
.following.bar.light.ui.secondary.menu .active.item,
|
||||
.following.bar.lightui.secondary.menu .active.item:hover {
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
.ui.secondary.menu .dropdown.item:hover,
|
||||
.ui.secondary.menu .link.item:hover,
|
||||
.ui.secondary.menu a.item:hover {
|
||||
background: rgb(255 255 255 / 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.ui.secondary.menu .active.item,
|
||||
.ui.secondary.menu .active.item:hover {
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, .05);
|
||||
background: var(--transparency-dark-05);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -249,7 +250,7 @@ b:hover,
|
||||
}
|
||||
|
||||
.organization.settings .ui.menu {
|
||||
background: rgb(0 0 0 / 10%);
|
||||
background: var(--transparency-dark-10);
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
@ -257,7 +258,7 @@ b:hover,
|
||||
.organization.settings .ui.vertical.menu {
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
background: rgb(0 0 0 / 15%);
|
||||
background: var(--transparency-dark-15);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@ -270,7 +271,7 @@ b:hover,
|
||||
}
|
||||
|
||||
.ui.segment {
|
||||
background: rgb(0 0 0 / 15%) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
.ui.attached.segment,
|
||||
@ -282,7 +283,7 @@ b:hover,
|
||||
}
|
||||
|
||||
.ui .info.segment.top {
|
||||
background-color: rgb(0 0 0 / 15%) !important;
|
||||
background-color: var(--transparency-dark-15) !important;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -292,17 +293,17 @@ b:hover,
|
||||
}
|
||||
|
||||
.ui.info.message {
|
||||
background-color: rgb(0 0 0 / 15%);
|
||||
background-color: var(--transparency-dark-15);
|
||||
color: #276f86;
|
||||
}
|
||||
|
||||
.ui.attached.header {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.explore .navbar {
|
||||
background-color: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
|
||||
}
|
||||
|
||||
@ -317,7 +318,7 @@ b:hover,
|
||||
}
|
||||
|
||||
.ui.progress {
|
||||
background: rgb(255 255 255 / 10%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.ui.progress[data-percent="0"] .bar .progress {
|
||||
@ -330,11 +331,11 @@ b:hover,
|
||||
}
|
||||
|
||||
.pagination.menu {
|
||||
background: rgba(255, 255, 255, .08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.ui.pagination.menu .active.item {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -344,7 +345,7 @@ b:hover,
|
||||
}
|
||||
|
||||
.feeds .list ul li.private {
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.ui.secondary.pointing.menu {
|
||||
@ -356,7 +357,7 @@ b:hover,
|
||||
}
|
||||
|
||||
.ui.repository.list .item:not(:first-child) {
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
|
||||
}
|
||||
|
||||
@ -441,7 +442,7 @@ b:hover,
|
||||
|
||||
/* SIGN IN NAV BAR*/
|
||||
.ui.menu.new-menu {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.ui.menu.new-menu::after {
|
||||
@ -492,13 +493,13 @@ b:hover,
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown .menu>.active.item {
|
||||
background: rgb(0 0 0 / 10%) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
}
|
||||
|
||||
.ui.menu .ui.dropdown .menu>.item:hover,
|
||||
.ui.menu .ui.dropdown .menu>.selected.item {
|
||||
background: rgb(255 255 255 / 0.07) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -529,12 +530,12 @@ b:hover,
|
||||
}
|
||||
|
||||
.ui.dropdown .menu>.item:hover {
|
||||
background: rgb(255 255 255 / 0.07);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .selected.item,
|
||||
.ui.dropdown.selected {
|
||||
background: rgb(0 0 0 / 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -547,7 +548,7 @@ b:hover,
|
||||
input:hover,
|
||||
textarea:hover {
|
||||
border-color: rgb(255 255 255 / 20%);
|
||||
background: rgb(0 0 0 / .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -564,14 +565,14 @@ textarea:hover {
|
||||
}
|
||||
|
||||
.ui.selection.dropdown {
|
||||
background: rgb(0 0 0 / .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
border-color: rgb(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
.ui.selection.dropdown:focus {
|
||||
border-color: rgba(255, 255, 255, .08);
|
||||
background: rgb(0 0 0 / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -640,7 +641,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
|
||||
|
||||
#app .ui.item.menu,
|
||||
.ui.item.menu .item {
|
||||
background: rgb(0 0 0 / 15%);
|
||||
background: var(--transparency-dark-15);
|
||||
border-color: rgb(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
@ -649,7 +650,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
|
||||
}
|
||||
|
||||
.ui.menu .active.item {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
font-weight: 400;
|
||||
box-shadow: none;
|
||||
@ -657,25 +658,25 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
|
||||
|
||||
.ui.menu .active.item:hover,
|
||||
.ui.vertical.menu .active.item:hover {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.ui.menu a.item:hover {
|
||||
color: var(--text-hover);
|
||||
background: rgb(0 0 0 / 15%);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
#app .ui.link.menu .item:hover,
|
||||
.ui.menu .dropdown.item:hover,
|
||||
.ui.menu .link.item:hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, .03);
|
||||
background: var(--transparency-dark-05);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
#app .ui.secondary.segment {
|
||||
background: rgb(0 0 0 / 15%);
|
||||
background: var(--transparency-dark-15);
|
||||
color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
@ -686,7 +687,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
|
||||
}
|
||||
|
||||
.heatmap-color-0 {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.activity-bar-graph {
|
||||
@ -716,7 +717,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
|
||||
|
||||
/* REPOSITORY */
|
||||
.repository .header-wrapper {
|
||||
background-color: rgb(0 0 0 / 24%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.repository .diff-detail-box {
|
||||
@ -805,7 +806,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
|
||||
|
||||
.tag-code,
|
||||
.tag-code td {
|
||||
background: rgba(255, 255, 255, .1) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.tag-code td.lines-num {
|
||||
@ -814,11 +815,11 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
|
||||
|
||||
a.blob-excerpt {
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, .1) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
td.blob-excerpt {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.repo-header .ui.breadcrumb a {
|
||||
@ -863,7 +864,7 @@ td.blob-excerpt {
|
||||
|
||||
.ui.card,
|
||||
.ui.cards>.card {
|
||||
background: rgb(0 0 0 / 15%);
|
||||
background: var(--transparency-dark-15);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -872,7 +873,7 @@ td.blob-excerpt {
|
||||
.ui.link.cards .card:not(.icon):hover,
|
||||
a.ui.card:hover {
|
||||
border: 1px solid rgb(255 255 255 / 20%);
|
||||
background: rgb(255 255 255 / 15%);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.repository .ui.menu {
|
||||
@ -902,7 +903,7 @@ a.ui.card:hover {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid rgb(255 255 255 / .1);
|
||||
border-radius: 3px;
|
||||
background: rgb(255 255 255 / 10%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.repository.release #release-list {
|
||||
@ -932,7 +933,7 @@ a.ui.card:hover {
|
||||
/* WIKI */
|
||||
.repository.wiki.pages .ui.ui.table td.grey:not(.marked),
|
||||
.repository.wiki.pages .ui.ui.ui.ui.table tr.grey:not(.marked) {
|
||||
background: rgb(255 255 255 / 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
;
|
||||
}
|
||||
|
||||
@ -959,11 +960,11 @@ a.ui.card:hover {
|
||||
|
||||
#git-graph-container #rev-list li.highlight,
|
||||
#git-graph-container #rev-list li.hover {
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
}
|
||||
|
||||
#git-graph-container #rev-list li.highlight.hover {
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
}
|
||||
|
||||
#git-graph-container li .author {
|
||||
@ -1005,7 +1006,7 @@ a.ui.card:hover {
|
||||
}
|
||||
|
||||
.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
|
||||
background-color: rgba(0, 0, 0, 0.15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
.repository #commits-table.ui.table>tbody {
|
||||
@ -1020,7 +1021,7 @@ a.ui.card:hover {
|
||||
.CodeMirror,
|
||||
.EasyMDEContainer .CodeMirror {
|
||||
border: 1px solid rgb(255 255 255 / .1);
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.CodeMirror-focused {
|
||||
@ -1042,14 +1043,14 @@ a.ui.card:hover {
|
||||
.editor-toolbar a:hover,
|
||||
.editor-toolbar button.active,
|
||||
.editor-toolbar button:hover {
|
||||
background: rgb(255 255 255 / 25%);
|
||||
border-color: rgb(255 255 255 / 25%);
|
||||
background: var(--transparency-light-25);
|
||||
border-color: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
min-height: 150px;
|
||||
border: 2px solid rgba(0, 0, 0, .3);
|
||||
background: rgb(255 255 255 / 25%) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -1078,7 +1079,7 @@ a.ui.card:hover {
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment .content>.header {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .comment .content>.header .actions a {
|
||||
@ -1114,7 +1115,7 @@ a.ui.card:hover {
|
||||
|
||||
/* TABLE */
|
||||
.ui.table>thead>tr>th {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
@ -1145,19 +1146,19 @@ w .ui.table>tr>td {
|
||||
}
|
||||
|
||||
.repository.file.list #repo-files-table tr:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.ui.table tbody tr td.selectable:hover,
|
||||
.ui.ui.selectable.table>tbody>tr:hover {
|
||||
background: rgb(255 255 255 / 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
footer {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* BUTTONS / CHECKBOXES */
|
||||
@ -1172,7 +1173,7 @@ footer {
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:checked~label:before {
|
||||
background-color: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:checked~label,
|
||||
@ -1182,8 +1183,8 @@ footer {
|
||||
|
||||
.ui.toggle.checkbox label:before,
|
||||
.ui.toggle.checkbox input:focus:checked~label:before {
|
||||
background: rgb(255 255 255 / 10%) !important;
|
||||
background-color: rgb(255 255 255 / 10%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.ui.toggle.checkbox input:focus:checked~label,
|
||||
@ -1319,7 +1320,7 @@ footer {
|
||||
|
||||
.ui.basic.buttons .button:focus,
|
||||
.ui.basic.buttons .button:hover {
|
||||
background: rgb(0 0 0 / 15%);
|
||||
background: var(--transparency-dark-15);
|
||||
color: var(--button-text);
|
||||
}
|
||||
|
||||
@ -1416,7 +1417,7 @@ a.ui.labels .label:hover {
|
||||
.repository #commits-table td.sha .sha.label .detail.icon,
|
||||
.repository #repo-files-table .sha.label .detail.icon,
|
||||
.repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
margin: -6px -10px -4px 0;
|
||||
padding: 5px 4px 5px 6px;
|
||||
border: 0;
|
||||
@ -1448,7 +1449,7 @@ input {
|
||||
.ui.form input[type=time],
|
||||
.ui.form input[type=url],
|
||||
.ui.form input {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
color: var(--text);
|
||||
border-radius: .28571429rem;
|
||||
@ -1472,7 +1473,7 @@ input {
|
||||
color: var(--text);
|
||||
border-color: rgb(0 0 0 / 15%);
|
||||
border-radius: .28571429rem;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35);
|
||||
caret-color: var(--text) !important;
|
||||
}
|
||||
@ -1481,7 +1482,7 @@ input {
|
||||
.ui.form textarea:focus:hover,
|
||||
input:focus:hover,
|
||||
textarea:focus:hover {
|
||||
background: rgb(0 0 0 / 50%) !important;
|
||||
background: var(--transparency-dark-50) !important;
|
||||
border-color: rgb(255 255 255 / .1) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
@ -1490,7 +1491,7 @@ textarea:focus:hover {
|
||||
.ui.form textarea:hover,
|
||||
input:hover,
|
||||
textarea:hover {
|
||||
background: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border-color: rgb(255 255 255 / .1) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
@ -1498,7 +1499,7 @@ textarea:hover {
|
||||
.ui.form textarea:focus {
|
||||
color: var(--text);
|
||||
border-color: transparent;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35);
|
||||
-webkit-appearance: none;
|
||||
caret-color: var(--text) !important;
|
||||
@ -1506,7 +1507,7 @@ textarea:hover {
|
||||
|
||||
.ui.form textarea,
|
||||
.ui.input textarea {
|
||||
background: rgb(0 0 0 / .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid rgba(34, 36, 38, .15);
|
||||
color: var(--text);
|
||||
caret-color: var(--text) !important;
|
||||
@ -1516,14 +1517,14 @@ textarea:hover {
|
||||
.ui.input.focus>input,
|
||||
.ui.input>input:focus {
|
||||
border-color: transparent;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
color: var(--text);
|
||||
box-shadow: none;
|
||||
caret-color: var(--text) !important;
|
||||
}
|
||||
|
||||
.ui.input>input {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid rgba(34, 36, 38, .15);
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1542,17 +1543,17 @@ textarea:hover {
|
||||
}
|
||||
|
||||
.markdown:not(code) table tr {
|
||||
background-color: rgba(0, 0, 0, .26);
|
||||
background: var(--transparency-dark-25);
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.markdown:not(code) table tr:nth-child(2n) {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.markdown:not(code) code,
|
||||
.markdown:not(code) tt {
|
||||
background-color: rgb(0 0 0 / 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* HIGHLIGHTING */
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
/* Made by @gilbN */
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
color: var(--text) !important;
|
||||
background: var(--main-bg-color) !important;
|
||||
@ -57,7 +59,7 @@ p {
|
||||
|
||||
.page-header-canvas,
|
||||
.page-toolbar[class*="css-"] {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
box-shadow: none !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
@ -88,7 +90,7 @@ p {
|
||||
}
|
||||
|
||||
.variable-value-dropdown.single .selected {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.css-0.gf-form-select-box__menu {
|
||||
@ -109,28 +111,28 @@ p {
|
||||
.time-picker-calendar .react-calendar__navigation,
|
||||
.time-picker-calendar .react-calendar__navigation__arrow,
|
||||
.time-picker-calendar .react-calendar__navigation__label {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.time-picker-calendar .react-calendar__month-view__weekdays {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background: var(--transparency-dark-60);
|
||||
}
|
||||
|
||||
.time-picker-calendar .react-calendar__tile--active,
|
||||
.time-picker-calendar .react-calendar__tile--active:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.time-picker-calendar .time-picker-calendar-tile:hover {
|
||||
-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 0 4px #ffffff00;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.time-picker-calendar .react-calendar__month-view__days {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.time-picker-calendar .time-picker-calendar-tile {
|
||||
@ -161,11 +163,11 @@ p {
|
||||
|
||||
/* Configuration menu */
|
||||
.card-item {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.card-item:hover {
|
||||
background: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
.card-item-sub-name,
|
||||
@ -180,53 +182,53 @@ p {
|
||||
.gf-tabs-link.active,
|
||||
.gf-tabs-link.active:focus,
|
||||
.gf-tabs-link.active:hover {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.filter-table tbody tr:nth-child(odd) {
|
||||
background: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
.cta-form {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.empty-list-cta {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.layout-selector button {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.layout-selector button.active {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
/* Configuration menu - Teams */
|
||||
.css-1ph0cdx-call-to-action-card {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.grafana-info-box {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
/* sidemenu */
|
||||
.sidemenu-open,
|
||||
.sidemenu {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.sidemenu__logo:hover {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.sidemenu-item.active,
|
||||
.sidemenu-item:hover {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
border-image: none;
|
||||
border-color: rgb(var(--accent-color));
|
||||
@ -279,7 +281,7 @@ p {
|
||||
.dropdown-menu--menu>li>a:hover,
|
||||
.dropdown-menu--navbar>li>a:hover,
|
||||
.dropdown-menu--sidemenu>li>a:hover {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -296,7 +298,7 @@ p {
|
||||
}
|
||||
|
||||
.dropdown-submenu:hover>a {
|
||||
Background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.icon-circle:hover .fa:hover,
|
||||
@ -356,21 +358,21 @@ p {
|
||||
|
||||
/* Dashboard row */
|
||||
.dashboard-row--collapsed {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.search-section {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15)
|
||||
}
|
||||
|
||||
.search-item.selected,
|
||||
.search-item:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.search-section__header {
|
||||
@ -393,7 +395,7 @@ p {
|
||||
|
||||
/* Dashboard settings menu */
|
||||
.dashboard-settings__aside {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.dashboard-page--settings-open .navbar {
|
||||
@ -421,15 +423,15 @@ p {
|
||||
}
|
||||
|
||||
.gf-form-select-wrapper {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
.dashboard-settings__nav-item.active {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.gf-form-checkbox {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -468,7 +470,7 @@ p {
|
||||
|
||||
/* Variable label box */
|
||||
.gf-form-label {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
@ -477,7 +479,7 @@ p {
|
||||
}
|
||||
|
||||
.gf-form-label--btn:hover {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
}
|
||||
|
||||
.variable-option.highlighted,
|
||||
@ -488,7 +490,7 @@ p {
|
||||
/* Variable dashboard dropdown */
|
||||
.variable-value-link {
|
||||
padding: 7.4px 10px !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: none !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
@ -521,7 +523,7 @@ p {
|
||||
/* NAVBAR BUTTONS */
|
||||
.navbar-button {
|
||||
color: var(--text-hover) !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) !important;
|
||||
border: none !important;
|
||||
}
|
||||
@ -533,7 +535,7 @@ p {
|
||||
|
||||
/* PANEL BACKGROUND COLOR*/
|
||||
.panel-container {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@ -545,7 +547,7 @@ p {
|
||||
}
|
||||
|
||||
.panel-header:hover {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.panel-title-text:hover {
|
||||
@ -577,7 +579,7 @@ div.flot-text {
|
||||
|
||||
/* table panel background color */
|
||||
.table-panel-container {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
/* table panel border size */
|
||||
@ -588,7 +590,7 @@ div.flot-text {
|
||||
}
|
||||
|
||||
.table-panel-header-bg {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
@ -596,7 +598,7 @@ div.flot-text {
|
||||
|
||||
/* Panel tables */
|
||||
.css-58bavm-thead {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.css-sq6g4h-row {
|
||||
@ -608,15 +610,15 @@ div.flot-text {
|
||||
}
|
||||
|
||||
.css-2n373z {
|
||||
border-right: 1px solid rgb(255 255 255 / 25%);
|
||||
border-right: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
.css-sq6g4h-row:hover {
|
||||
background-color: rgb(255 255 255 / 0.08);
|
||||
background-color: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.css-3o5ryu {
|
||||
background: rgb(0 0 0 / 45%);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.css-1n8kpcb-activeTabStyle,
|
||||
@ -638,12 +640,12 @@ div>.scrollbar-view>div>[class*="css-"],
|
||||
#reactRoot>div>div.main-view>div.css-1mwktlb>div[class*="css-"]>div[class*="css-"]>div>div.Pane.vertical.Pane1>div>div.Pane.horizontal.Pane2>div>div>div[class*="css-"],
|
||||
.css-v2fjpc,
|
||||
.css-ld7ft6 {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.tabbed-view-header {
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -654,28 +656,28 @@ div>.scrollbar-view>div>[class*="css-"],
|
||||
/* panel query settings */
|
||||
.panel-editor__right,
|
||||
.toolbar {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.query-editor-row__header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.query-editor-row__body {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.panel-options-group {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.gf-form-switch {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.viz-picker__item {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
@ -687,12 +689,12 @@ div>.scrollbar-view>div>[class*="css-"],
|
||||
|
||||
.viz-picker__item:hover {
|
||||
box-shadow: 0 0 6px #eb7b18 !important;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: var(--transparency-dark-40);
|
||||
border: 1px solid #eb7b18 !important;
|
||||
}
|
||||
|
||||
.panel-options-group__header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.custom-scrollbar .thumb-vertical,
|
||||
@ -706,7 +708,7 @@ div>.scrollbar-view>div>[class*="css-"],
|
||||
|
||||
.toolbar__main {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
@ -743,15 +745,15 @@ border-color: #b56d16 !important;
|
||||
}*/
|
||||
|
||||
.btn-inverse {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
-webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3);
|
||||
box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3);
|
||||
background: var(--transparency-dark-25);
|
||||
-webkit-box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3);
|
||||
box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-success {
|
||||
-webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3);
|
||||
box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3);
|
||||
-webkit-box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3);
|
||||
box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
.btn-inverse.active,
|
||||
@ -760,7 +762,7 @@ border-color: #b56d16 !important;
|
||||
.btn-inverse:focus,
|
||||
.btn-inverse:hover,
|
||||
.btn-inverse[disabled] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* New Dashboard */
|
||||
@ -775,7 +777,7 @@ border-color: #b56d16 !important;
|
||||
}
|
||||
|
||||
.add-panel__header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
box-shadow: none;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
@ -786,13 +788,13 @@ border-color: #b56d16 !important;
|
||||
}
|
||||
|
||||
.query-type-toggle .btn.active {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.toggle-button-group .btn {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: none;
|
||||
border-color: #00000000;
|
||||
border-radius: 3px !important;
|
||||
@ -800,7 +802,7 @@ border-color: #b56d16 !important;
|
||||
}
|
||||
|
||||
.toggle-button-group .btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.logs-panel-options {
|
||||
@ -810,7 +812,7 @@ border-color: #b56d16 !important;
|
||||
|
||||
/* JSON Model */
|
||||
.gf-code-dark {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
@ -929,7 +931,7 @@ input:focus {
|
||||
}
|
||||
|
||||
.css-1bjepp-input-input {
|
||||
background-color: hsla(0, 0%, 100%, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 3px;
|
||||
border-color: transparent;
|
||||
-webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
|
||||
@ -956,7 +958,7 @@ input:focus {
|
||||
|
||||
/*Disabled input*/
|
||||
.css-1bjepp-input-input:disabled {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
color: rgb(159, 167, 179);
|
||||
}
|
||||
|
||||
@ -1013,7 +1015,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
|
||||
}
|
||||
|
||||
.css-y0yg3l {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -1024,18 +1026,18 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
|
||||
|
||||
/*Folder bars*/
|
||||
.css-1umfglk {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.css-1umfglk:hover {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35)
|
||||
}
|
||||
|
||||
/* Login Error message*/
|
||||
.css-1ow9mne-input-input {
|
||||
line-height: 1.5;
|
||||
height: 38px;
|
||||
background-color: hsla(0, 0%, 100%, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 3px;
|
||||
border-color: transparent;
|
||||
-webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
|
||||
@ -1059,12 +1061,12 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
|
||||
/*Welcome to Grafana*/
|
||||
.css-15xxblz,
|
||||
.css-1ld19yb {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.css-1as70ku,
|
||||
.css-u5zjuh {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.css-17abkeq,
|
||||
@ -1088,7 +1090,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
|
||||
|
||||
.css-10pj50r,
|
||||
.css-15rfc12 {
|
||||
background: rgb(0 0 0 / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
}
|
||||
|
||||
/*Header*/
|
||||
@ -1115,7 +1117,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
|
||||
|
||||
/*Query box*/
|
||||
.css-hz0utb {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@ -1127,7 +1129,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
|
||||
}
|
||||
|
||||
.css-lvafs5 {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
}
|
||||
|
||||
.css-ui3sz4-activeTabStyle {
|
||||
@ -1143,31 +1145,31 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
|
||||
border-width: 0px 1px 1px;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
border-color: transparent !important;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.css-1awj6q7-counter {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/*Transform tab*/
|
||||
.css-y2f54e {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.css-y2f54e:hover {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
}
|
||||
|
||||
.css-1e8invk::before {
|
||||
background: rgba(0, 0, 0, .35) !important;
|
||||
background: var(--transparency-dark-35) !important;
|
||||
}
|
||||
|
||||
/* Right side menu*/
|
||||
.css-1xj5tuf {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -1192,7 +1194,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
|
||||
|
||||
/*Visualization*/
|
||||
.css-1lemfi9 {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -1235,7 +1237,7 @@ body>grafana-app>div>div>react-container>div>div.css-azp59k>div.css-1bd2u9>div>d
|
||||
border-style: solid;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-image: initial;
|
||||
background: rgba(255, 255, 255, .08)
|
||||
background: var(--transparency-light-10)
|
||||
}
|
||||
|
||||
input:checked+.gf-form-switch__slider {
|
||||
@ -1258,7 +1260,7 @@ input:checked+.gf-form-switch__slider {
|
||||
/*SETTINGS*/
|
||||
/*Teams*/
|
||||
.css-1w9m9al-call-to-action-card {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/*DASHBOARD SETINGS*/
|
||||
@ -1275,14 +1277,14 @@ input:checked+.gf-form-switch__slider {
|
||||
}
|
||||
|
||||
.navbar--edit {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid transparent;
|
||||
-webkit-box-shadow: 0 0 10px transparent;
|
||||
box-shadow: 0 0 10px transparent;
|
||||
}
|
||||
|
||||
.grafana-info-box {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
border-top: 3px solid rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
|
||||
@ -34,13 +34,13 @@ div.flot-text {
|
||||
|
||||
/* sidemenu */
|
||||
.sidemenu-open .sidemenu {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
.sidemenu__logo:hover {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
.sidemenu-item.active, .sidemenu-item:hover {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.sidemenu .sidemenu__logo_small_breakpoint {
|
||||
@ -71,15 +71,15 @@ div.flot-text {
|
||||
}
|
||||
.search-field-wrapper>input {
|
||||
height: 55px !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
.search-field-icon {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
/* Dashboard settings menu */
|
||||
.dashboard-settings__aside {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
.dashboard-page--settings-open .navbar {
|
||||
background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)) !important;
|
||||
@ -103,14 +103,14 @@ div.flot-text {
|
||||
/*Datasources Menu*/
|
||||
|
||||
.add-data-source-item {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.add-data-source-item:hover {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
border: 1px solid #00000000;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
@ -121,7 +121,7 @@ div.flot-text {
|
||||
|
||||
/* Variable label box */
|
||||
.gf-form-label {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: none !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
@ -138,7 +138,7 @@ div.flot-text {
|
||||
/* Variable dashboard dropdown */
|
||||
.variable-value-link {
|
||||
padding: 7.4px 10px !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: none !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
@ -146,7 +146,7 @@ div.flot-text {
|
||||
/* Variable input box */
|
||||
.gf-form-input {
|
||||
color: #FFFFFF !important;
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
border: 0px solid #262628 !important;
|
||||
|
||||
}
|
||||
@ -154,7 +154,7 @@ div.flot-text {
|
||||
/* NAVBAR BUTTONS */
|
||||
.navbar-button {
|
||||
color: var(--text-hover) !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important;
|
||||
border: none !important;
|
||||
}
|
||||
@ -166,7 +166,7 @@ div.flot-text {
|
||||
|
||||
/* PANEL BACKGROUND COLOR*/
|
||||
.panel-container {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@ -175,7 +175,7 @@ background-color: transparent;
|
||||
border: transparent;
|
||||
}
|
||||
.panel-header:hover {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
.panel-loading {
|
||||
color: transparent;
|
||||
@ -204,7 +204,7 @@ div.flot-text {
|
||||
|
||||
/* table panel background color */
|
||||
.table-panel-container {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
/* table panel border size */
|
||||
.table-panel-table td {
|
||||
@ -215,7 +215,7 @@ div.flot-text {
|
||||
/* Edit panel tabs */
|
||||
.tabbed-view-header {
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: none;
|
||||
}
|
||||
.tabbed-view-panel-title {
|
||||
@ -242,7 +242,7 @@ div.flot-text {
|
||||
background: linear-gradient(135deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
.add-panel__header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
box-shadow: none;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
@ -351,7 +351,7 @@ box-shadow: none !important;
|
||||
}
|
||||
/*Disabled input*/
|
||||
.css-1bjepp-input-input:disabled {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
color: rgb(159, 167, 179);
|
||||
}
|
||||
.css-1bjepp-input-input:hover {border-color: transparent;}
|
||||
@ -372,7 +372,7 @@ transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
|
||||
.css-1m6pigl:checked + label {
|
||||
color: var(--accent-color) !important;
|
||||
border-color: rgba(255, 255, 255, .1);
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50)
|
||||
}
|
||||
.css-b40tk8:focus + label {
|
||||
box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important;
|
||||
@ -383,7 +383,7 @@ background: var(--main-bg-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
.css-y0yg3l {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -394,10 +394,10 @@ border-bottom: 1px solid rgba(0, 0, 0, 0);
|
||||
|
||||
/*Folder bars*/
|
||||
.css-1umfglk {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
.css-1umfglk:hover {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35)
|
||||
}
|
||||
|
||||
/* Login Error message*/
|
||||
@ -424,10 +424,10 @@ margin: 10px 0px 0px;
|
||||
}
|
||||
|
||||
/*Welcome to Grafana*/
|
||||
.css-15xxblz,.css-1ld19yb {background: rgba(0, 0, 0, .25);}
|
||||
.css-15xxblz,.css-1ld19yb {background: var(--transparency-dark-25)}
|
||||
|
||||
.css-1as70ku, .css-u5zjuh {
|
||||
background: rgba(0, 0, 0, .25);}
|
||||
background: var(--transparency-dark-25)}
|
||||
.css-17abkeq, .css-5ak73y {
|
||||
color: var(--text-hover);
|
||||
}
|
||||
@ -454,7 +454,7 @@ background: var(--main-bg-color);
|
||||
}
|
||||
/*Query box*/
|
||||
.css-hz0utb {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
.query-keyword, .css-wvxxxy, .css-fpnw35 {
|
||||
@ -462,7 +462,7 @@ border-right: 1px solid rgba(0, 0, 0, 0);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.css-lvafs5 {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
}
|
||||
|
||||
.css-ui3sz4-activeTabStyle {
|
||||
@ -478,19 +478,19 @@ border-image: initial;
|
||||
border-width: 0px 1px 1px;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
border-color: transparent !important;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
overflow: hidden;
|
||||
}
|
||||
.css-1awj6q7-counter {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
/*Transform tab*/
|
||||
.css-y2f54e {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
.css-y2f54e:hover {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
}
|
||||
.css-1e8invk::before {
|
||||
background:rgba(0, 0, 0, .35) !important;
|
||||
@ -498,7 +498,7 @@ background:rgba(0, 0, 0, .35) !important;
|
||||
|
||||
/* Right side menu*/
|
||||
.css-1xj5tuf {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
/*Dropdown bottom borders*/
|
||||
@ -517,7 +517,7 @@ background: var(--accent-color);
|
||||
}
|
||||
/*Visualization*/
|
||||
.css-1lemfi9 {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
.css-1fsv7gr:hover > div:first-child {
|
||||
@ -548,7 +548,7 @@ height: 100%;
|
||||
border-style: solid;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-image: initial;
|
||||
background: rgba(255, 255, 255, .08)
|
||||
background: var(--transparency-light-10)
|
||||
}
|
||||
input:checked+.gf-form-switch__slider {
|
||||
background: var(--accent-color);
|
||||
@ -568,7 +568,7 @@ border-color: rgba(255, 255, 255, .09);
|
||||
/*SETTINGS*/
|
||||
/*Teams*/
|
||||
.css-1w9m9al-call-to-action-card {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
|
||||
@ -577,13 +577,13 @@ border-color: rgba(255, 255, 255, .09);
|
||||
background: var(--main-bg-color);
|
||||
}
|
||||
.navbar--edit {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid transparent;
|
||||
-webkit-box-shadow: 0 0 10px transparent;
|
||||
box-shadow: 0 0 10px transparent;
|
||||
}
|
||||
.grafana-info-box {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
border-top: 3px solid var(--accent-color);
|
||||
}
|
||||
/* Variables*/
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
@ -78,7 +79,7 @@ div.displayMiddle {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -90,7 +91,7 @@ div.displayMiddle {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -100,7 +101,7 @@ div.login-ui {
|
||||
}
|
||||
|
||||
.login-ui div.login-dialog {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -121,22 +122,22 @@ a.button:hover {
|
||||
}
|
||||
|
||||
.login-ui .login-fields .labeled-field input:focus {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login-ui .login-fields .labeled-field.empty input {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login-ui .login-fields .labeled-field.empty input:focus {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login-ui .login-dialog .login-fields input {
|
||||
background-color: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
}
|
||||
|
||||
div.location,
|
||||
@ -146,7 +147,7 @@ input[type=number],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: var(--text-hover) !important;
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
@ -162,7 +163,7 @@ textarea {
|
||||
/* HOME MENU */
|
||||
.header h2 {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.connection .icon.vnc,
|
||||
@ -246,17 +247,17 @@ table.sorted td {
|
||||
}
|
||||
|
||||
.settings table.session-list tr.session:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.menu-dropdown.open,
|
||||
.menu-dropdown.open:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
border-left: none;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.menu-dropdown .menu-contents li a {
|
||||
@ -269,17 +270,17 @@ table.sorted td {
|
||||
|
||||
.menu-dropdown .menu-contents li a.current,
|
||||
.menu-dropdown .menu-contents li a.current:hover {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover)
|
||||
}
|
||||
|
||||
.menu-dropdown .menu-contents li a:hover {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.menu-dropdown:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -300,7 +301,7 @@ table.sorted td {
|
||||
}
|
||||
|
||||
.header .filter {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.filter .search-string {
|
||||
@ -312,7 +313,7 @@ table.sorted td {
|
||||
padding-left: 2.25em !important;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -334,12 +335,12 @@ textarea {
|
||||
}
|
||||
|
||||
.recent-connections .connection:hover {
|
||||
background: hsla(0, 0%, 100%, 0.08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
|
||||
.list-item:not(.selected) .caption:hover {
|
||||
background: hsla(0, 0%, 100%, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--link-color-hover);
|
||||
}
|
||||
|
||||
@ -380,7 +381,7 @@ textarea {
|
||||
|
||||
.clipboard,
|
||||
.clipboard-service-target {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -419,7 +420,7 @@ textarea {
|
||||
}
|
||||
|
||||
.page-tabs .page-list li a[href]:hover {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.user a:visited,
|
||||
@ -452,7 +453,7 @@ input[type=number],
|
||||
input[type=password],
|
||||
textarea {
|
||||
border: 0;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.location-chooser .dropdown {
|
||||
@ -469,14 +470,14 @@ textarea {
|
||||
.page-tabs .page-list li a[href].current:hover,
|
||||
.section-tabs li a.current,
|
||||
.section-tabs li a.current:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
cursor: default;
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
}
|
||||
|
||||
.page-tabs .page-list li a[href]:hover,
|
||||
.section-tabs li a:hover {
|
||||
background-color: hsla(0, 0%, 100%, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -489,7 +490,7 @@ textarea {
|
||||
}
|
||||
|
||||
.manage-user .notice.read-only {
|
||||
background: hsla(0, 0%, 100%, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/* DUA 2FA PAGE */
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
@ -73,7 +74,7 @@ hr {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -85,7 +86,7 @@ hr {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -104,7 +105,7 @@ hr {
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
|
||||
color: var(--text-hover) !important;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
|
||||
@ -122,7 +123,7 @@ hr {
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
||||
color: var(--button-text) !important;
|
||||
border: 1px solid transparent;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
|
||||
@ -143,7 +144,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_filter input {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text-hover);
|
||||
@ -168,14 +169,14 @@ table.dataTable.cell-border tbody td {
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
#page {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
table.dataTable.stripe tbody tr.odd,
|
||||
@ -185,7 +186,7 @@ table.dataTable.display tbody tr.odd {
|
||||
|
||||
table.dataTable.hover tbody tr:hover,
|
||||
table.dataTable.display tbody tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
table.dataTable tbody tr {
|
||||
@ -204,13 +205,13 @@ table.dataTable thead td {
|
||||
|
||||
.form-control {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid #ccc0;
|
||||
|
||||
}
|
||||
|
||||
select {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text) !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0) !important;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
||||
@ -237,13 +238,13 @@ select:focus {
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.dataTables_length select,
|
||||
.dataTables_filter input,
|
||||
.dataTable.compact tfoot td select {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid rgba(204, 204, 204, 0);
|
||||
}
|
||||
|
||||
@ -304,7 +305,7 @@ fieldset[disabled] .form-control {
|
||||
.dropdown-menu>li>a:focus,
|
||||
.dropdown-menu>li>a:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.dropdown-menu>.active>a,
|
||||
@ -312,7 +313,7 @@ fieldset[disabled] .form-control {
|
||||
.dropdown-menu>.active>a:hover {
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@ -378,7 +379,7 @@ fieldset[disabled] .btn-primary.focus,
|
||||
fieldset[disabled] .btn-primary:active,
|
||||
fieldset[disabled] .btn-primary:focus,
|
||||
fieldset[disabled] .btn-primary:hover {
|
||||
background-color: hsla(0, 0%, 100%, 0.35);
|
||||
background: var(--transparency-light-35);
|
||||
border-color: hsla(0, 0%, 100%, 0.35);
|
||||
}
|
||||
|
||||
@ -406,7 +407,7 @@ fieldset[disabled] .btn-primary:hover {
|
||||
|
||||
.input-group-addon {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid #0000;
|
||||
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--theme-primary-color: var(--accent-color);
|
||||
@ -11,15 +12,15 @@
|
||||
--theme-background: var(--main-bg-color);
|
||||
--header-blur-background: rgba(20, 20, 20, 0.66);
|
||||
--drawer-background: #2C2C2E;
|
||||
--docked-drawer-background: rgba(0, 0, 0, 0.25);
|
||||
--docked-drawer-background: var(--transparency-dark-25);
|
||||
--button-background: var(--button-color);
|
||||
--card-background: rgba(0, 0, 0, 0.15);
|
||||
--card-background: var(--transparency-dark-15);
|
||||
--footer-background: var(--modal-footer-color);
|
||||
--footer-blur-background: rgba(29, 29, 31, 0.66);
|
||||
|
||||
--header-background: var(--theme-background);
|
||||
--theme-body-secondary-text-color: rgba(255, 255, 255, .6);
|
||||
--line-background: rgba(255, 255, 255, .08);
|
||||
--line-background: var(--transparency-light-10);
|
||||
--line-size: .08em;
|
||||
--scrollbar-thumb-background: rgba(255, 255, 255, .3);
|
||||
}
|
||||
@ -29,9 +30,9 @@
|
||||
--theme-background: var(--main-bg-color);
|
||||
--header-blur-background: rgba(20, 20, 20, 0.66);
|
||||
--drawer-background: #2C2C2E;
|
||||
--docked-drawer-background: rgba(0, 0, 0, 0.25);
|
||||
--docked-drawer-background: var(--transparency-dark-25);
|
||||
--button-background: #1f1f1f;
|
||||
--card-background: rgba(0, 0, 0, 0.15);
|
||||
--card-background: var(--transparency-dark-15);
|
||||
--footer-background: var(--modal-footer-color);
|
||||
--footer-blur-background: rgba(29, 29, 31, 0.66);
|
||||
}
|
||||
@ -41,9 +42,9 @@
|
||||
--theme-background: var(--main-bg-color);
|
||||
--header-blur-background: rgba(20, 20, 20, 0.66);
|
||||
--drawer-background: #2C2C2E;
|
||||
--docked-drawer-background: rgba(0, 0, 0, 0.25);
|
||||
--docked-drawer-background: var(--transparency-dark-25);
|
||||
--button-background: #1f1f1f;
|
||||
--card-background: rgba(0, 0, 0, 0.15);
|
||||
--card-background: var(--transparency-dark-15);
|
||||
--footer-background: var(--modal-footer-color);
|
||||
--footer-blur-background: rgba(29, 29, 31, 0.66);
|
||||
}
|
||||
@ -173,7 +174,7 @@ html {
|
||||
}
|
||||
|
||||
.backgroundContainer.withBackdrop {
|
||||
background-color: rgba(0, 0, 0, .83)
|
||||
background: var(--transparency-dark-80)
|
||||
}
|
||||
|
||||
@media not all and (min-width: 50em) {
|
||||
@ -215,7 +216,7 @@ html {
|
||||
|
||||
.emby-select-withcolor {
|
||||
color: inherit;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: var(--line-size) solid transparent
|
||||
}
|
||||
|
||||
@ -341,7 +342,7 @@ html {
|
||||
|
||||
@media(hover: hover) and (pointer:fine) {
|
||||
.actionSheetMenuItem:hover {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
background: var(--transparency-light-20);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
}
|
||||
@ -376,7 +377,7 @@ html {
|
||||
|
||||
.detailTableBodyRow-shaded:nth-child(even) {
|
||||
background: #1c1c1c;
|
||||
background: rgba(30, 30, 30, .9)
|
||||
background: var(--transparency-dark-90)
|
||||
}
|
||||
|
||||
.listItem-border {
|
||||
@ -384,7 +385,7 @@ html {
|
||||
}
|
||||
|
||||
.listItem-focusscale:focus {
|
||||
background: rgba(54, 54, 54, .8)
|
||||
background: var(--transparency-dark-80)
|
||||
}
|
||||
|
||||
.listItemIcon:not(.listItemIcon-transparent) {
|
||||
@ -411,7 +412,7 @@ html {
|
||||
.emby-input,
|
||||
.emby-textarea {
|
||||
color: inherit;
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border: var(--line-size) solid rgba(255, 255, 255, 0.1)
|
||||
}
|
||||
|
||||
@ -705,7 +706,7 @@ html {
|
||||
|
||||
.scrollbuttoncontainer {
|
||||
color: var(--text-hover);
|
||||
background: rgba(20, 20, 20, .5)
|
||||
background: var(--transparency-dark-50)
|
||||
}
|
||||
|
||||
.recordingIcon-active {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color);
|
||||
@ -76,7 +77,7 @@ label {
|
||||
|
||||
/* NAVBAR */
|
||||
#nav .bg-dark {
|
||||
background: hsla(0, 0%, 0%, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
@ -111,7 +112,7 @@ label {
|
||||
.dropdown-item:active,
|
||||
.dropdown:active:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@ -122,29 +123,29 @@ label {
|
||||
.dropdown-item:focus {
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
|
||||
/* CARDS */
|
||||
.card {
|
||||
background: rgb(255 255 255 / 8%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
color: var(--text-hover);
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .125) !important;
|
||||
}
|
||||
|
||||
ul li {
|
||||
background-color: rgb(255 255 255 / 8%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
ul li:hover {
|
||||
background-color: rgb(255 255 255 / 16%) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -152,7 +153,7 @@ ul li:hover {
|
||||
.plugin_content .nav-tabs .nav-link.active,
|
||||
.nav-tabs .nav-item.show .nav-link {
|
||||
color: var(--text-hover) !important;
|
||||
background-color: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border-color: #4440 #4440 transparent;
|
||||
}
|
||||
|
||||
@ -161,7 +162,7 @@ ul li:hover {
|
||||
}
|
||||
|
||||
.alert-secondary {
|
||||
background-color: rgb(255 255 255 / 20%);
|
||||
background: var(--transparency-light-20);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
@ -191,20 +192,20 @@ ul li:hover {
|
||||
|
||||
.badge-secondary {
|
||||
color: var(--button-text);
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-control {
|
||||
color: var(--text) !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: 1px solid transparent !important;
|
||||
box-shadow: none !important;
|
||||
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: rgb(0 0 0 / 50%) !important;
|
||||
background: var(--transparency-dark-50) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
@ -88,7 +89,7 @@ a:hover,
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -100,7 +101,7 @@ a:hover,
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -135,7 +136,7 @@ a:hover,
|
||||
.navbar-default .navbar-nav>li>a:focus {
|
||||
color: var(--text-hover);
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
@ -307,7 +308,7 @@ button.close {
|
||||
|
||||
.form-control {
|
||||
color: var(--text);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
@ -326,7 +327,7 @@ select.form-control:active,
|
||||
.configtable .input-group .form-control:active,
|
||||
.configtable .input-group .form-control:focus {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
@ -335,7 +336,7 @@ select.form-control:active,
|
||||
/* TABLE */
|
||||
|
||||
table {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
thead {
|
||||
@ -343,11 +344,11 @@ thead {
|
||||
}
|
||||
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.table-hover>tbody>tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
@ -366,7 +367,7 @@ thead {
|
||||
/* BOOKWALL */
|
||||
|
||||
.table-responsive>.table {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10)
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
@ -375,7 +376,7 @@ thead {
|
||||
.nav-tabs>li.active>a:hover,
|
||||
.nav-tabs>li.active>a:focus {
|
||||
color: rgb(var(--accent-color));
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid TRANSPARENT;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
@ -392,7 +393,7 @@ thead {
|
||||
.nav>li>a:hover,
|
||||
.nav>li>a:focus {
|
||||
text-decoration: none;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
@ -451,6 +452,6 @@ legend {
|
||||
|
||||
pre {
|
||||
color: var(--text);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
html,
|
||||
body {
|
||||
@ -104,7 +105,7 @@ a:-webkit-any-link:hover {
|
||||
input {
|
||||
font-family: "Roboto", sans-serif;
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
-webkit-rtl-ordering: logical;
|
||||
Font-size: 16px;
|
||||
padding: 10px;
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--calendar-downloading: 122 67 182;
|
||||
@ -169,7 +170,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"]:active,
|
||||
@ -186,7 +187,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AutoSuggestInput-suggestionHighlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="CheckInput-primaryIsChecked-"] {
|
||||
@ -202,7 +203,7 @@ a:hover {
|
||||
/* HEADER */
|
||||
|
||||
[class*="PageHeader-header-"] {
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -232,25 +233,25 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ArtistSearchInput-highlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08)
|
||||
background: var(--transparency-dark-10)
|
||||
}
|
||||
|
||||
[class*"=ArtistSearchInput-artistContainer-"]::-webkit-scrollbar-thumb,
|
||||
[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* MINI RIGHT SCROLL BAR */
|
||||
[class*="OverlayScroller-thumb-"],
|
||||
[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb,
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="OverlayScroller-thumb-"]:hover,
|
||||
[class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover,
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
/* ADD NEW */
|
||||
@ -273,12 +274,12 @@ a:hover {
|
||||
|
||||
[class*="EnhancedSelectInputOption-isSelected-"],
|
||||
[class*="EnhancedSelectInputOption-isSelected-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.20) !important;
|
||||
background: var(--transparency-light-20) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="EnhancedSelectInputOption-option-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="HintedSelectInputOption-hintText-"] {
|
||||
@ -314,7 +315,7 @@ a:hover {
|
||||
|
||||
/* SIDE MENU */
|
||||
[class*="PageSidebar-sidebarContainer-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="PageSidebar-sidebar-"] {
|
||||
@ -337,7 +338,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="PageSidebarItem-isActiveParentLink-"] {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@ -385,7 +386,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ArtistIndexOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="ArtistIndexOverview-link-"]:hover {
|
||||
@ -393,7 +394,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ProgressBar-container-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*=".ProgressBar-purple-"] {
|
||||
@ -405,7 +406,7 @@ a:hover {
|
||||
[class*="ArtistDetailsSeason-albumType-"],
|
||||
[class*="ArtistDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="ArtistDetailsSeason-header-"],
|
||||
@ -456,12 +457,12 @@ a:hover {
|
||||
|
||||
[class*="AlbumDetailsMedium-medium-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="ExtraFileTable-container-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="AlbumDetails-selectedTab-"] {
|
||||
@ -470,16 +471,16 @@ a:hover {
|
||||
|
||||
[class*="AlbumDetailsMedium-collapseButtonContainer-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="ArtistIndexProgressBar-progress-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="ArtistIndexBanner-title-"],
|
||||
[class*="ArtistIndexBannerInfo-info-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -580,7 +581,7 @@ a:hover {
|
||||
|
||||
/* Table options*/
|
||||
[class*="TableOptionsColumn-column-"] {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
}
|
||||
@ -594,17 +595,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="TableRow-row-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="TableRowCell-cell-"] {
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* TOP MENU SERIES */
|
||||
[class*="PageToolbar-toolbar-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -637,7 +638,7 @@ a:hover {
|
||||
/* POSTERS */
|
||||
[class*="ArtistIndexPoster-title-"],
|
||||
[class*="ArtistIndexPosterInfo-info-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -665,13 +666,13 @@ a:hover {
|
||||
|
||||
[class*="MenuItem-menuItem-"]:hover,
|
||||
[class*="MenuItem-menuItem-"]:focus {
|
||||
background: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class*="MenuItemSeparator-separator-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* ALPHABET JUMP BAR */
|
||||
@ -685,7 +686,7 @@ a:hover {
|
||||
[class*="AddNewItem-searchIconContainer-"],
|
||||
[class*="CheckInput-isIndeterminate-"] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -708,7 +709,7 @@ a:hover {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="TagInput-input-"][class*="TagInput-isFocused-"] {
|
||||
@ -741,7 +742,7 @@ a:hover {
|
||||
[class*="AddNewArtistSearchResult-searchResult-"]:hover,
|
||||
[class*="AddNewArtistSearchResult-underlay-"]:hover,
|
||||
[class*="AddNewAlbumSearchResult-underlay-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -775,7 +776,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ImportArtistSearchResult-artist-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* IMPORT */
|
||||
@ -786,14 +787,14 @@ a:hover {
|
||||
|
||||
[class*="ExpandingFileDetails-fileDetails-"] {
|
||||
border: 1px solid rgb(255 255 255 / .1);
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* IMPORT NEW ARTIST */
|
||||
/* Drop down menu/button*/
|
||||
[class*="ImportArtistSelectArtist-button-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -806,14 +807,14 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="VirtualTableRow-row-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/*Title*/
|
||||
|
||||
[class*="PageJumpBarItem-jumpBarItem-"]:hover {
|
||||
color: var(--text-hover);
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/*Posters*/
|
||||
@ -824,7 +825,7 @@ a:hover {
|
||||
/* FOOTER */
|
||||
[class*="PageContentFooter-contentFooter-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -886,18 +887,18 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="DayOfWeek-dayOfWeek-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-dayOfMonth-"] {
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, .08);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-isToday-"],
|
||||
[class*="DayOfWeek-isToday-"] {
|
||||
background-color: hsla(0, 0%, 100%, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="CalendarDay-day-"],
|
||||
@ -923,7 +924,7 @@ a:hover {
|
||||
|
||||
/* calendar agenda */
|
||||
[class*="AgendaEvent-event-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
@ -950,15 +951,15 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"] {
|
||||
@ -966,17 +967,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.35);
|
||||
background: var(--transparency-light-35);
|
||||
}
|
||||
|
||||
/* PROFILES */
|
||||
[class*="Card-card-"],
|
||||
[class*="QualityProfiles-addQualityProfile-"] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1001,12 +1002,12 @@ a:hover {
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
|
||||
[class*="LanguageProfileItem-languageProfileItem-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="KeyValueListInputItem-keyInput-"],
|
||||
@ -1018,7 +1019,7 @@ a:hover {
|
||||
|
||||
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
|
||||
border: 1px solid transparent;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="QualityDefinitions-sizeLimitHelpText-"] {
|
||||
@ -1033,7 +1034,7 @@ a:hover {
|
||||
|
||||
[class*="Card-card-"],
|
||||
[class*="QualityProfiles-addQualityProfile-"] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1077,7 +1078,7 @@ a:hover {
|
||||
/* LOG */
|
||||
[class*="Alert-info-"] {
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: #FFC107;
|
||||
}
|
||||
|
||||
@ -1103,12 +1104,12 @@ a:hover {
|
||||
/* Login Page */
|
||||
|
||||
.panel-body {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
@ -1118,7 +1119,7 @@ a:hover {
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1139,7 +1140,7 @@ input[type=password] {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* Custom filter */
|
||||
@ -1148,7 +1149,7 @@ input[type=password] {
|
||||
}
|
||||
|
||||
[class*="CustomFilter-customFilter-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/* -------------------------LIDARR STUFF------------------------------*/
|
||||
@ -1167,7 +1168,7 @@ input[type=password] {
|
||||
[class*="ArtistIndexHeader-trackProgress-"]:hover,
|
||||
[class*="ArtistIndexHeader-latestAlbum-"]:hover,
|
||||
[class*="ArtistIndexHeader-actions-"]:hover {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1181,7 +1182,7 @@ input[type=password] {
|
||||
[class*="AlbumStudioAlbum-album-"],
|
||||
[class*="AlbumStudioAlbum-tracks-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
/* Made by @gilbN */
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
background: var(--main-bg-color) !important;
|
||||
@ -56,13 +58,13 @@ body {
|
||||
}
|
||||
|
||||
.expand::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .2) !important;
|
||||
background: var(--transparency-dark-20) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.expand::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsla(0, 0%, 100%, .5) !important;
|
||||
background: var(--transparency-light-50) !important;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
@ -76,18 +78,18 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .2) !important;
|
||||
background: var(--transparency-dark-20) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsla(0, 0%, 100%, .5) !important;
|
||||
background: var(--transparency-light-50) !important;
|
||||
}
|
||||
|
||||
.flex-child {
|
||||
border-radius: 0px;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@ -158,7 +160,7 @@ body.fade-out {
|
||||
}
|
||||
|
||||
.expandtoggle:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.expandtoggle:checked~.expandtoggle::before {
|
||||
@ -190,7 +192,7 @@ body.fade-out {
|
||||
overflow: auto;
|
||||
transition: height 0.5s;
|
||||
color: rgb(255, 255, 255);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
background: var(--transparency-dark-30);
|
||||
word-wrap: break-word;
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
@ -263,55 +265,55 @@ input:valid {
|
||||
/* Sidebar */
|
||||
#sidebar-wrapper {
|
||||
box-shadow: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:hover:before {
|
||||
-webkit-transition: none !important;
|
||||
transition: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
transition: none !important;
|
||||
-webkit-transition: none !important;
|
||||
}
|
||||
|
||||
.sidebar-nav li:first-child a {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(2):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(3):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(4):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(5):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(6):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(7):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(8):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(9):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
#modalloading {
|
||||
@ -339,7 +341,7 @@ input:valid {
|
||||
}
|
||||
|
||||
#stats {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
padding-left: .0rem !important;
|
||||
padding-right: 1.11rem !important;
|
||||
box-shadow: none;
|
||||
@ -403,13 +405,13 @@ input:valid {
|
||||
}
|
||||
|
||||
#time {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
color: var(--text-hover) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#slidertable {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -432,14 +434,14 @@ input:valid {
|
||||
|
||||
/*Service tile*/
|
||||
.col-lg-4 {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
margin: 1rem .1rem 1.5rem 1rem !important;
|
||||
width: 9rem !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.col-lg-4:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
margin: 1rem .1rem 1.5rem 1rem !important;
|
||||
width: 9rem !important;
|
||||
box-shadow: none;
|
||||
@ -480,7 +482,7 @@ input:valid {
|
||||
}
|
||||
|
||||
#clock {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
color: var(--text-hover) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -497,7 +499,7 @@ input:valid {
|
||||
|
||||
.pace,
|
||||
.pace-progress {
|
||||
background: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
.pace,
|
||||
@ -574,7 +576,7 @@ input:valid {
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
#dateRight {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
color: var(--text-hover) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
/* Made by @gilbN */
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
#footer:after {
|
||||
color: var(--text-hover);
|
||||
@ -41,13 +42,13 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .2) !important;
|
||||
background: var(--transparency-dark-20) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsla(0, 0%, 100%, .5) !important;
|
||||
background: var(--transparency-light-50) !important;
|
||||
}
|
||||
|
||||
|
||||
@ -63,13 +64,13 @@ body::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
|
||||
#myModal3::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .2) !important;
|
||||
background: var(--transparency-dark-20) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#myModal3::-webkit-scrollbar-thumb:hover {
|
||||
background-color: hsla(0, 0%, 100%, .5) !important;
|
||||
background: var(--transparency-light-50) !important;
|
||||
}
|
||||
|
||||
#includedContent {
|
||||
@ -125,55 +126,55 @@ body::-webkit-scrollbar-thumb:hover {
|
||||
/* Sidebar */
|
||||
#sidebar-wrapper {
|
||||
box-shadow: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:hover:before {
|
||||
-webkit-transition: none !important;
|
||||
transition: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
transition: none !important;
|
||||
-webkit-transition: none !important;
|
||||
}
|
||||
|
||||
.sidebar-nav li:first-child a {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(2):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(3):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(4):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(5):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(6):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(7):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(8):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.sidebar-nav li:nth-child(9):before {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
#modalloading {
|
||||
@ -201,7 +202,7 @@ body::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
|
||||
#stats {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
padding-left: .0rem !important;
|
||||
padding-right: 1.11rem !important;
|
||||
box-shadow: none;
|
||||
@ -263,13 +264,13 @@ body::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
|
||||
#time {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
color: var(--text-hover) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#slidertable {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -292,14 +293,14 @@ body::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
/*Service tile*/
|
||||
.col-lg-4 {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
margin: 1rem .1rem 1.5rem 1rem !important;
|
||||
width: 9rem !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.col-lg-4:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
margin: 1rem .1rem 1.5rem 1rem !important;
|
||||
width: 9rem !important;
|
||||
box-shadow: none;
|
||||
@ -340,7 +341,7 @@ body::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
|
||||
#clock {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
color: var(--text-hover) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -357,7 +358,7 @@ body::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
.pace,
|
||||
.pace-progress {
|
||||
background: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
.pace,
|
||||
|
||||
@ -20,7 +20,7 @@ body {
|
||||
}
|
||||
|
||||
#stats {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
padding-left: .0rem !important;
|
||||
padding-right: 1.11rem !important;
|
||||
box-shadow: none;
|
||||
@ -60,13 +60,13 @@ body {
|
||||
}
|
||||
|
||||
#time {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
color: var(--text-hover) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#slidertable {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -89,14 +89,14 @@ body {
|
||||
|
||||
/*Service tile*/
|
||||
.col-lg-4 {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
margin: 1rem .1rem 1.5rem 1rem !important;
|
||||
width: 9rem !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.col-lg-4:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
margin: 1rem .1rem 1.5rem 1rem !important;
|
||||
width: 9rem !important;
|
||||
box-shadow: none;
|
||||
@ -137,7 +137,7 @@ body {
|
||||
}
|
||||
|
||||
#clock {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
color: var(--text-hover) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -154,7 +154,7 @@ body {
|
||||
|
||||
.pace,
|
||||
.pace-progress {
|
||||
background: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
.pace,
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
@ -59,7 +60,7 @@ footer,
|
||||
.login-form input,
|
||||
input,
|
||||
.TextInput {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
color: var(--text)
|
||||
}
|
||||
@ -139,11 +140,11 @@ input:focus {
|
||||
}
|
||||
|
||||
.RoomInfoBar {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* MENUS POPOVER */
|
||||
.PopoverMenuButton:hover {
|
||||
background: rgb(255 255 255 / 15%) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
color: var(--mm-white);
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
@ -240,7 +241,7 @@ table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
table th {
|
||||
@ -322,8 +323,8 @@ table td a {
|
||||
|
||||
|
||||
.dataTables_filter input {
|
||||
background: none repeat scroll 0 0 rgb(255 255 255 / 10%);
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
background: none repeat scroll 0 0 var(--transparency-light-10);
|
||||
border: 1px solid var(--transparency-light-10);
|
||||
font-size: 15px;
|
||||
padding: 2px 4px;
|
||||
color: var(--text);
|
||||
@ -340,20 +341,20 @@ table.display thead th {
|
||||
}
|
||||
|
||||
/* table.display tr.odd {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
}
|
||||
|
||||
table.display tr.even {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
background: var(--transparency-light-05) !important;
|
||||
} */
|
||||
|
||||
/* DataTables row classes */
|
||||
table.display tr.odd.gradeA {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
table.display tr.even.gradeA {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
background: var(--transparency-light-05);
|
||||
}
|
||||
|
||||
table.display tr.odd.gradeB {
|
||||
@ -528,7 +529,7 @@ table.display_no_select tr.gradeZ td {
|
||||
|
||||
table.display_no_select thead th {
|
||||
padding: 3px 18px 3px 10px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
background: var(--transparency-dark-10);
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -545,7 +546,7 @@ button {
|
||||
}
|
||||
|
||||
select {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -567,7 +568,7 @@ input {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
border: none;
|
||||
color: var(--text);
|
||||
padding: 2px 4px;
|
||||
@ -723,12 +724,12 @@ form .row input[type=password] {
|
||||
max-width: 230px;
|
||||
margin-right: 5px;
|
||||
padding: 3px 5px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
form .row input[type=text]:focus,
|
||||
form .row input[type=password]:focus {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
form .row small {
|
||||
@ -1167,7 +1168,7 @@ div#searchbar input[type=text] {
|
||||
margin-right: 10px;
|
||||
padding: 4px 5px 4px 25px;
|
||||
width: 150px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
div#searchbar .mini-icon {
|
||||
@ -3234,7 +3235,7 @@ div.alphabetInfo {
|
||||
|
||||
/* JQUERY UI */
|
||||
.ui-tabs .ui-tabs-panel {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@ -3249,7 +3250,7 @@ div.alphabetInfo {
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -3318,7 +3319,7 @@ body>div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-res
|
||||
}
|
||||
|
||||
.wrap input {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
border-radius: 7px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body,
|
||||
[class*="styled__SocialMediaContainer-"] {
|
||||
@ -82,14 +83,14 @@ a:hover,
|
||||
|
||||
.navbar-default .navbar-nav>li>a:hover,
|
||||
.navbar-default .navbar-nav>li>a:focus {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>.open>a,
|
||||
.navbar-default .navbar-nav>.open>a:hover,
|
||||
.navbar-default .navbar-nav>.open>a:focus {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.navbar-default,
|
||||
@ -105,7 +106,7 @@ a:hover,
|
||||
.navbar-default .navbar-brand:hover,
|
||||
.navbar-default .navbar-brand:focus {
|
||||
color: var(--text-hover) !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a,
|
||||
@ -118,7 +119,7 @@ a:hover,
|
||||
.nav-tabs>li.active>a,
|
||||
.nav-tabs>li.active>a:hover,
|
||||
.nav-tabs>li.active>a:focus {
|
||||
background-color: rgba(0, 0, 0, 0.15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
border: 1px solid #00000000 !important;
|
||||
color: rgb(var(--accent-color));
|
||||
}
|
||||
@ -131,7 +132,7 @@ a:hover,
|
||||
|
||||
.nav>li>a:hover,
|
||||
.nav>li>a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.nav-tabs>li>a:hover {
|
||||
@ -143,7 +144,7 @@ a:hover,
|
||||
}
|
||||
|
||||
#my-netdata-dropdown-content .agent-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.sign-in-btn {
|
||||
@ -200,14 +201,14 @@ a:hover,
|
||||
}
|
||||
|
||||
[class*="item__PanelRowContainer-"]:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdown-menu>li>a:hover,
|
||||
.dropdown-menu>li>a:focus {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@ -250,7 +251,7 @@ a:hover,
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
}
|
||||
|
||||
.panel-default>.panel-heading {
|
||||
@ -262,7 +263,7 @@ table {
|
||||
}
|
||||
|
||||
.table-hover>tbody>tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.table>thead>tr>th {
|
||||
@ -316,7 +317,7 @@ table {
|
||||
}
|
||||
|
||||
[class*="sidebar__Wrapper-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="sidebar__Wrapper-"] [class*="flex-sc-"]:not([class*="collapsible__Animated-"]) {
|
||||
@ -403,12 +404,12 @@ hr {
|
||||
|
||||
.pagination>li>a,
|
||||
.pagination>li>span {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.pagination>li>a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color);
|
||||
@ -26,7 +27,7 @@ body {
|
||||
|
||||
/* scroller */
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@ -39,7 +40,7 @@ body {
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@ -101,7 +102,7 @@ h6 {
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-child(odd) {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-child(odd) td,
|
||||
@ -110,40 +111,40 @@ h6 {
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.table tbody tr:hover,
|
||||
.table tbody tr:hover td,
|
||||
.table tbody tr:hover a {
|
||||
color: var(--text-hover);
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.table-striped tbody tr.checked:nth-child(2n+1) td,
|
||||
.checked .progress {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
tr.checked,
|
||||
tr.checked td,
|
||||
tr.checked:nth-child(odd) .progress {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.table tbody tr.checked:hover,
|
||||
.table tbody tr.checked:hover td {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.table tbody tr.checked:hover,
|
||||
.table tbody tr.checked:hover td {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.table.check-simple tbody tr.checked:hover,
|
||||
.table.check-simple tbody tr.checked:hover td {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.table th,
|
||||
@ -158,12 +159,12 @@ tr.checked:nth-child(odd) .progress {
|
||||
|
||||
.pagination a {
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.pagination a:hover,
|
||||
.pagination .active a {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.pagination .active a {
|
||||
@ -172,7 +173,7 @@ tr.checked:nth-child(odd) .progress {
|
||||
|
||||
/* PROGRESS BAR */
|
||||
.progress {
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.progress-warning.progress-striped .bar {
|
||||
@ -185,7 +186,7 @@ tr.checked:nth-child(odd) .progress {
|
||||
|
||||
.bar-text-left,
|
||||
.bar-text-right {
|
||||
var(--text-hover);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
/* NAVBAR */
|
||||
@ -211,16 +212,16 @@ tr.checked:nth-child(odd) .progress {
|
||||
|
||||
.navbar .nav>li>a:hover {
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.navbar .nav .active>a {
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
.navbar .nav .active>a:hover {
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--accent-color-hover) !important;
|
||||
}
|
||||
|
||||
@ -241,7 +242,7 @@ div.check:hover {
|
||||
|
||||
.navbar-search .search-query {
|
||||
color: var(--text);
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
|
||||
|
||||
}
|
||||
@ -250,7 +251,7 @@ div.check:hover {
|
||||
.navbar-search .search-query.focused {
|
||||
color: var(--text-hover) !important;
|
||||
text-shadow: none;
|
||||
background-color: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
}
|
||||
|
||||
.focused .search-caret-button .caret {
|
||||
@ -287,7 +288,7 @@ div.check:hover {
|
||||
.dropdown-menu .active>a,
|
||||
.dropdown-menu .active>a:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: hsla(0, 0%, 100%, .05);
|
||||
background: var(--transparency-dark-05);
|
||||
}
|
||||
|
||||
.dropdown-menu .divider {
|
||||
@ -383,7 +384,7 @@ div.check:hover {
|
||||
#ConfigData>div:nth-child(4)>div>button,
|
||||
#ConfigData>div:nth-child(5)>div>button {
|
||||
text-shadow: unset;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -391,7 +392,7 @@ div.check:hover {
|
||||
#ConfigData>div:nth-child(4)>div>button:hover,
|
||||
#ConfigData>div:nth-child(5)>div>button:hover {
|
||||
text-shadow: unset;
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -403,18 +404,18 @@ div.check:hover {
|
||||
}
|
||||
|
||||
#ConfigData input.btn {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
text-shadow: unset;
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
#Config_ViewButton {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
#Config_ViewButton:hover {
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -450,7 +451,7 @@ div.check:hover {
|
||||
}
|
||||
|
||||
.config-header .btn {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.btn-group.open .btn.dropdown-toggle {
|
||||
@ -472,7 +473,7 @@ div.check:hover {
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text) !important;
|
||||
border: transparent;
|
||||
}
|
||||
@ -480,13 +481,13 @@ textarea,
|
||||
input:focus:not(.btn),
|
||||
textarea:focus,
|
||||
.uneditable-input:focus {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
color: var(--text-hover) !important;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid #00000000;
|
||||
color: var(--text)
|
||||
}
|
||||
@ -521,7 +522,7 @@ textarea:focus {
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border: 0px;
|
||||
background-color: hsla(0, 0%, 100%, .05);
|
||||
background: var(--transparency-dark-05);
|
||||
text-shadow: unset;
|
||||
color: var(--text-hover);
|
||||
text-transform: capitalize;
|
||||
@ -566,12 +567,12 @@ label {
|
||||
text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
background-color: rgb(255 255 255 / 25%);
|
||||
background-color: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
#ConfigNav {
|
||||
border: 1px solid rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
#ConfigNav.nav-list a {
|
||||
@ -598,7 +599,7 @@ label {
|
||||
}
|
||||
|
||||
.nav>li>a:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -625,7 +626,7 @@ span.help-option-title {
|
||||
|
||||
.input-prepend .add-on,
|
||||
.input-append .add-on {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: var(--main-bg-color) !important;
|
||||
background-repeat: repeat, no-repeat;
|
||||
background-attachment: fixed, fixed;
|
||||
@ -640,7 +641,7 @@ span.help-option-title {
|
||||
}
|
||||
|
||||
.config-settitle {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body,
|
||||
html {
|
||||
@ -40,7 +41,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background: var(--transparency-dark-60);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -48,13 +49,13 @@ a:hover {
|
||||
.navbar-default .navbar-nav>.active>a:focus,
|
||||
.navbar-default .navbar-nav>.active>a:hover {
|
||||
color: rgb(var(--accent-color));
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a:focus,
|
||||
.navbar-default .navbar-nav>li>a:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a {
|
||||
@ -87,7 +88,7 @@ a:hover {
|
||||
.nav-tabs>li.active>a:focus,
|
||||
.nav-tabs>li.active>a:hover {
|
||||
color: rgb(var(--accent-color));
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid #1a1f2000;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
@ -99,7 +100,7 @@ a:hover {
|
||||
|
||||
.nav>li>a:focus,
|
||||
.nav>li>a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.nav-tabs>li>a {
|
||||
@ -284,7 +285,7 @@ h6 {
|
||||
.dropdown-menu>li>a:hover {
|
||||
text-decoration: none;
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.history-title {
|
||||
@ -299,7 +300,7 @@ h6 {
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
|
||||
color: var(--text-muted);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
|
||||
@ -334,13 +335,13 @@ h6 {
|
||||
|
||||
.form-control {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
background: var(--transparency-dark-35);
|
||||
outline: 0;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
@ -353,19 +354,19 @@ select.form-control:focus {
|
||||
|
||||
/* .input-group-addon {
|
||||
outline: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
|
||||
} */
|
||||
|
||||
/* Categories */
|
||||
.panel {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.repeatsection {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
box-shadow: 0 0 4px 1px transparent;
|
||||
}
|
||||
|
||||
@ -416,19 +417,19 @@ hr {
|
||||
}
|
||||
|
||||
.well {
|
||||
background-color: hsla(0, 0%, 0%, 0.45);
|
||||
background-color: var(--transparency-dark-45);
|
||||
border: 1px solid #00000000;
|
||||
}
|
||||
|
||||
/* Updates */
|
||||
.alert-warning {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
border-color: transparent;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.panel-default>.panel-heading {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.panel-default>.panel-heading {
|
||||
@ -437,13 +438,13 @@ hr {
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
background: var(--transparency-dark-10);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Table */
|
||||
table {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.table>thead>tr>th {
|
||||
@ -461,7 +462,7 @@ table {
|
||||
}
|
||||
|
||||
.table-hover>tbody>tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.search-result-tbody {
|
||||
@ -469,7 +470,7 @@ table {
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -492,7 +493,7 @@ body>div>div.center-form.panel.col-md-8>div>form>button:active {
|
||||
|
||||
/* SEARCH */
|
||||
.search-results-table {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@ -547,7 +548,7 @@ body>div>div.center-form.panel.col-md-8>div>form>button:active {
|
||||
.pagination>.disabled>span:focus,
|
||||
.pagination>.disabled>span:hover {
|
||||
color: var(--text-muted);
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
border-color: rgba(255, 255, 255, .1);
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
@ -39,7 +40,7 @@ html, body, .wizard-background, .content-container, #main-container\ dark > mat-
|
||||
|
||||
.container-alert {
|
||||
color: var(--text-hover);
|
||||
background-color: rgb(0 0 0 / 50%) !important;
|
||||
background: var(--transparency-dark-50) !important;
|
||||
border-color: rgb(var(--accent-color)) !important;
|
||||
}
|
||||
|
||||
@ -83,7 +84,7 @@ a:hover {
|
||||
/* TOP NAV */
|
||||
.top-search-bar .mat-form-field-flex {
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
/* Drop down menu */
|
||||
@ -104,7 +105,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
|
||||
background: hsl(0deg 0% 0% / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
#main-container\ dark > mat-sidenav-container > mat-sidenav-content > mat-toolbar > button {
|
||||
color: rgb(var(--accent-color));
|
||||
@ -125,7 +126,7 @@ a:hover {
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidenav-container .sidenav {
|
||||
background: hsla(0, 0%, 0%, 0.438) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,7 +144,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.mat-drawer-backdrop.mat-drawer-shown {
|
||||
background-color: hsl(0deg 0% 0% / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
}
|
||||
@ -163,7 +164,7 @@ a:hover {
|
||||
.sidenav-container .sidenav .active-list-item,
|
||||
.sidenav-container .sidenav .active-list-item:hover {
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
background: rgb(255 255 255 / 15%) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
border-radius: .375rem !important;
|
||||
padding: 10px 20px;
|
||||
height: auto;
|
||||
@ -229,7 +230,7 @@ a:hover {
|
||||
|
||||
/* DISCOVER PAGE */
|
||||
.discover-filter-buttons-group {
|
||||
background: rgb(255 255 255 / 8%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
border: 1px solid rgb(255 255 255 / 10%) !important;
|
||||
border-radius: 30px;
|
||||
color: var(--text-hover);
|
||||
@ -238,7 +239,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.discover-filter-buttons-group .button-active {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
}
|
||||
|
||||
#search-filter{
|
||||
@ -273,7 +274,7 @@ a:hover {
|
||||
/* MOBILE */
|
||||
@media (min-width: 768px) {
|
||||
.sidenav-container .sidenav {
|
||||
background: hsla(0, 0%, 0%, 0.438) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -339,7 +340,7 @@ a:hover {
|
||||
top: -1px !important;
|
||||
position: absolute;
|
||||
border-radius: .75rem .75rem 0 0 !important;
|
||||
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||
background-color: var(--transparency-dark-70) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
transition: 0s -webkit-filter linear;
|
||||
@ -378,7 +379,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.btn-ombi {
|
||||
background-color: rgba(0, 0, 0, 0.85) !important;
|
||||
background-color: var(--transparency-dark-85) !important;
|
||||
/* backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important; */
|
||||
border-radius: .375rem !important;
|
||||
@ -439,7 +440,7 @@ a:hover {
|
||||
|
||||
small.important {
|
||||
color: red;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
@ -645,17 +646,17 @@ mat-row {
|
||||
|
||||
.mat-paginator,
|
||||
.mat-table {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
tr.mat-header-row {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45)
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid rgb(255 255 255 / 25%);
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
border-bottom: 2px solid var(--transparency-light-25);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* Details page */
|
||||
@ -735,7 +736,7 @@ hr {
|
||||
|
||||
/* ADVANCED SEARCH MODAL */
|
||||
.alert-info {
|
||||
background: rgba(255, 255, 255, .25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
border-color: rgba(255, 255, 255, .1) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900);
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
/*Theme Colors*/
|
||||
/*bootstrap Color*/
|
||||
/*Normal Color*/
|
||||
@ -258,10 +259,10 @@ h6 {
|
||||
/* settings */
|
||||
/* header*/
|
||||
[id*="settings-"]>div>div.panel-heading:not(form > div > div.panel-heading) {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
[id*="settings-"]>div>div.panel-heading .bg-org:not(form > div > div.panel-heading) {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
#account-area > div > div > div > div,
|
||||
@ -279,7 +280,7 @@ h6 {
|
||||
|
||||
|
||||
#homepage-Deluge-form > fieldset > div > div.panel-wrapper.collapse.in > div > div > div > div.tab-pane.fade.in.active > div > div > div > div > div > div > div {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
background: var(--transparency-dark-10)
|
||||
}
|
||||
|
||||
/* Homepage Item Modals*/
|
||||
@ -289,15 +290,15 @@ h6 {
|
||||
[id$="FYI"] > div > div > div > div > div > div > div,
|
||||
#\39 w59f92rirFYI > div > div > div > div > div > div > div,
|
||||
[id$="Setup"] > div > div > div > div > div {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[id*="settings-"] .panel {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
#customize-appearance-form>ul>li.active>a {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
#settings-main-system-settings {
|
||||
@ -320,33 +321,33 @@ select.form-control:focus {
|
||||
|
||||
.form-material .form-control:focus,
|
||||
.form-control:focus {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
}
|
||||
|
||||
.form-material .form-control,
|
||||
.form-control {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#githubVersions .bg-org {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
/* Ace editor stuff */
|
||||
.ace-idle-fingers {
|
||||
background-color: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
.ace-idle-fingers .ace_marker-layer .ace_active-line {
|
||||
background: rgba(255, 255, 255, 0.15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
}
|
||||
|
||||
.ace-idle-fingers .ace_gutter {
|
||||
background: rgb(255 255 255 / 10%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -381,7 +382,7 @@ pre {
|
||||
|
||||
#loginLogTable>tbody>.even,
|
||||
#organizrLogTable>tbody>.even {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
|
||||
@ -431,7 +432,7 @@ pre {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -443,7 +444,7 @@ pre {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -478,7 +479,7 @@ th.jsgrid-control-field.jsgrid-align-center {
|
||||
.jsGrid-Users,
|
||||
.jsgrid-header-sort-desc,
|
||||
.jsgrid-header-sort-asc {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
tr.jsgrid-header-row th {
|
||||
@ -494,14 +495,14 @@ tr.jsgrid-header-row th {
|
||||
|
||||
.jsgrid-filter-row>td,
|
||||
.jsgrid-header-sortable:hover {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
|
||||
#calendar .fc-content-skeleton>table>thead>tr {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15)
|
||||
}
|
||||
|
||||
.fc-event:not(.homepage-drag),
|
||||
@ -526,12 +527,12 @@ tr.jsgrid-header-row th {
|
||||
.fc-unthemed .fc-row,
|
||||
.fc-unthemed .fc-popover {
|
||||
border-color: transparent;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: var(--transparency-dark-05)
|
||||
}
|
||||
|
||||
.bg-theme,
|
||||
.fc-day-header {
|
||||
background: rgba(0, 0, 0, .3) !important;
|
||||
background: var(--transparency-dark-30) !important;
|
||||
}
|
||||
|
||||
.bg-theme,
|
||||
@ -543,15 +544,15 @@ tr.jsgrid-header-row th {
|
||||
.fc th.fc-wed,
|
||||
.fc th.fc-fri,
|
||||
.fc-button {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
th.fc-day-header.fc-widget-header.fc-today {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.fc-widget-content.fc-today {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
.fc-popover {
|
||||
@ -609,7 +610,7 @@ th.fc-day-header.fc-widget-header.fc-today {
|
||||
#lockScreen .white-box {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background: rgb(0 0 0 / 45%) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
margin-top: auto !important;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
@ -651,7 +652,7 @@ th.fc-day-header.fc-widget-header.fc-today {
|
||||
}
|
||||
|
||||
.blockMsg {
|
||||
background: rgba(0, 0, 0, 0.9) !important;
|
||||
background: var(--transparency-dark-90) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
@ -682,7 +683,7 @@ label[for="checkbox-login"]:hover {
|
||||
#recoverform>div:nth-child(3)>div>button,
|
||||
#leave-recover,
|
||||
#form-lockscreen>div.form-group.text-center>div>button {
|
||||
background: rgb(255 255 255 / 15%) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
color: var(--text) !important;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
@ -693,7 +694,7 @@ label[for="checkbox-login"]:hover {
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--text-hover) !important;
|
||||
@ -729,7 +730,7 @@ label[for="checkbox-login"]:hover {
|
||||
/*2FA login button*/
|
||||
.panel-wrapper .panel-body>.btn-warning,
|
||||
.btn-warning.disabled {
|
||||
background: hsla(0, 0%, 0%, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: 1px solid #ffc36d00 !important;
|
||||
}
|
||||
|
||||
@ -738,7 +739,7 @@ label[for="checkbox-login"]:hover {
|
||||
.panel-yellow .panel-heading {
|
||||
color: var(--text-hover);
|
||||
border-radius: 3px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
background: var(--transparency-dark-30);
|
||||
border-color: #00000000;
|
||||
}
|
||||
|
||||
@ -790,7 +791,7 @@ label[for="checkbox-login"]:hover {
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@ -813,7 +814,7 @@ label[for="checkbox-login"]:hover {
|
||||
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
|
||||
#splashScreen {
|
||||
overflow-y: scroll;
|
||||
background: rgb(0 0 0 / 80%) !important;
|
||||
background: var(--transparency-dark-80) !important;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@ -824,7 +825,7 @@ label[for="checkbox-login"]:hover {
|
||||
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
#splashScreen {
|
||||
overflow-y: scroll;
|
||||
background: rgb(0 0 0 / 90%) !important;
|
||||
background: var(--transparency-dark-90) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -979,7 +980,7 @@ label[for="checkbox-login"]:hover {
|
||||
}
|
||||
|
||||
.bg-success.text-inverse {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1062,7 +1063,7 @@ label[for="checkbox-login"]:hover {
|
||||
|
||||
/* Homepage Now playing card */
|
||||
.nowPlayingItem>.white-box>.el-card-item {
|
||||
background: rgba(0, 0, 0, 0.15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
@ -1156,7 +1157,7 @@ label[for="checkbox-login"]:hover {
|
||||
|
||||
#homepageOrderdownloader .nav-tabs>li.active>a:hover,
|
||||
#homepageOrderdownloader .nav-tabs>li.active:hover {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -1191,7 +1192,7 @@ label[for="checkbox-login"]:hover {
|
||||
}
|
||||
|
||||
.fc-button:hover {
|
||||
background: rgba(255, 255, 255, .08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
@ -1413,13 +1414,13 @@ a:hover,
|
||||
|
||||
.progress-bar-inverse,
|
||||
.progress {
|
||||
background: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
/* Homepage health checks */
|
||||
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
|
||||
.bg-inverse .healthPosition {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
background: var(--transparency-light-20) !important;
|
||||
-webkit-backdrop-filter: saturate(180%) blur(30px);
|
||||
backdrop-filter: saturate(180%) blur(30px);
|
||||
border-radius: 3px;
|
||||
@ -1447,7 +1448,7 @@ a:hover,
|
||||
}
|
||||
|
||||
#homepageOrderhealthchecks .card-body {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--transparency-light-20);
|
||||
}
|
||||
|
||||
.card,
|
||||
@ -1466,7 +1467,7 @@ a:hover,
|
||||
/* Homepage Tautulli Cards*/
|
||||
#homepageOrdertautulli .library-card .card-body,
|
||||
#homepageOrdertautulli div:nth-child(8) .card-body {
|
||||
background: rgba(255, 255, 255, .2);
|
||||
background: var(--transparency-light-20)
|
||||
}
|
||||
|
||||
.homepage-tautulli-card .cardCountType {
|
||||
@ -1493,12 +1494,12 @@ a:hover,
|
||||
}
|
||||
|
||||
.unifiCards .panel-wrapper.collapse.in {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15)
|
||||
}
|
||||
|
||||
/* Homepage Monitor Cards */
|
||||
#homepageOrderMonitorr .card-body {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: var(--transparency-light-20);
|
||||
}
|
||||
|
||||
#homepageOrderMonitorr .col-lg-2 {
|
||||
@ -1519,11 +1520,11 @@ a:hover,
|
||||
|
||||
/*Homepage WeatherAndAir Cards*/
|
||||
#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
}
|
||||
|
||||
.health-and-pollutant-section .content-current {
|
||||
background: rgba(255, 255, 255, .2);
|
||||
background: var(--transparency-light-20)
|
||||
}
|
||||
|
||||
#homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a::after {
|
||||
@ -1539,13 +1540,13 @@ a:hover,
|
||||
}
|
||||
|
||||
#homepageOrderWeatherAndAir .white-box {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*Homepage Speedtest Cards*/
|
||||
#allSpeedtest .speedtest-card {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
#allSpeedtest .speedtest-card .text-muted,
|
||||
@ -1597,7 +1598,7 @@ body > div.swal-overlay.swal-overlay--show-modal > div {
|
||||
|
||||
#user-list-div .ms-container .ms-selectable,
|
||||
#user-list-div .ms-container .ms-selection {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -1714,7 +1715,7 @@ body {
|
||||
.nav .open>a,
|
||||
.nav .open>a:focus,
|
||||
.nav .open>a:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
/*Right panel*/
|
||||
@ -1747,7 +1748,7 @@ background: rgb(0 0 0 / 0%) !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
box-shadow: 1px 0px 20px rgb(0 0 0 / 20%);
|
||||
|
||||
}
|
||||
@ -2271,7 +2272,7 @@ fieldset[disabled] .form-control {
|
||||
.table>thead>tr.active>th,
|
||||
.table>thead>tr>td.active,
|
||||
.table>thead>tr>th.active {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.asColorPicker-dropdown,
|
||||
@ -2417,14 +2418,14 @@ pre,
|
||||
select,
|
||||
table.dataTable.display tbody tr.odd,
|
||||
table.dataTable.stripe tbody tr.odd {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15)
|
||||
}
|
||||
|
||||
input:focus:not(select),
|
||||
input:active:not(select),
|
||||
.form-control:focus:not(select),
|
||||
.form-control:active:not(select) {
|
||||
background: rgba(0, 0, 0, 0.445);
|
||||
background: var(--transparency-dark-45);
|
||||
border: 1px solid rgba(120, 130, 140, 0.4);
|
||||
}
|
||||
|
||||
@ -2505,7 +2506,7 @@ span.select2-results {
|
||||
} */
|
||||
|
||||
.panel-blue .panel-heading, .panel-info .panel-heading, #help-modal-body > div > div {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
#account-area > div > div > div > div > div.panel-wrapper.collapse.in.main-email-panel > div > div > div > div > div,
|
||||
#plexRecent > div.col-lg-12 > div,
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
/* TEXT */
|
||||
[class*="text-gray-"]:not(button:disabled):not(button) {
|
||||
@ -125,7 +126,7 @@ input[type=text],
|
||||
select,
|
||||
textarea {
|
||||
border-color: rgba(255, 255, 255, .1);
|
||||
background-color: rgba(7, 7, 7, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -157,7 +158,7 @@ span.bg-indigo-500 {
|
||||
|
||||
.react-select-container .react-select__control {
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
@ -167,7 +168,7 @@ span.bg-indigo-500 {
|
||||
}
|
||||
|
||||
.react-select-container .react-select__option--is-focused {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover)
|
||||
}
|
||||
|
||||
@ -218,7 +219,7 @@ body {
|
||||
}
|
||||
|
||||
#search_field {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
|
||||
@ -301,11 +302,11 @@ body>div.z-50.fixed.inset-0.overflow-hidden.bg-opacity-70.bg-gray-800.enter-done
|
||||
}
|
||||
|
||||
body>div.z-50.fixed.inset-0.overflow-hidden.bg-opacity-70.bg-gray-800.enter-done>div>section>div>div>div>div.overflow-hidden.bg-gray-600.rounded-md.shadow {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
#__next>div>div.fixed.top-0.bottom-0.left-0.z-30.hidden.lg\:flex.lg\:flex-shrink-0>div>div>div>div.px-2>a {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
/* LOADER */
|
||||
@ -372,7 +373,7 @@ a.slider-title:hover {
|
||||
|
||||
.media-facts {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover) !important;
|
||||
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
@ -424,7 +425,7 @@ a.slider-title:hover {
|
||||
/* SETTINGS */
|
||||
|
||||
code {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
#__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-6>div.hidden.overflow-x-scroll.border-b.border-gray-600.sm\:block.hide-scrollbar>nav>a.px-1.py-4.ml-8.text-sm.font-medium.leading-5.transition.duration-300.border-b-2.border-transparent.whitespace-nowrap.first\:ml-0.text-indigo-500.border-indigo-600 {
|
||||
@ -432,7 +433,7 @@ code {
|
||||
}
|
||||
|
||||
#__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-10.text-white>div>ul>li>div {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@ -484,7 +485,7 @@ code {
|
||||
table>thead>tr>th,
|
||||
#__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-10.text-white>div>div.flex.flex-col>div>div>div>table>tbody>tr.bg-gray-700,
|
||||
#__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div>div>div>table>tbody>tr.bg-gray-700 {
|
||||
background: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@ -516,7 +517,7 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
|
||||
}
|
||||
|
||||
body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-center.w-full.h-full.bg-gray-800.bg-opacity-70>div>div.relative.mt-4.text-sm.leading-5.text-gray-300>div.flex.flex-col>div>div>div>table>tbody {
|
||||
background: rgb(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
|
||||
@ -529,7 +530,7 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
|
||||
}
|
||||
|
||||
#__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div.media-header>div.media-actions>span>span>div>div>div>a:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
|
||||
@ -537,13 +538,13 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
|
||||
background: var(--drop-down-menu-bg);
|
||||
}
|
||||
[aria-labelledby="user-menu"] a:hover{
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
background: var(--transparency-light-05);
|
||||
}
|
||||
|
||||
/* LOGIN */
|
||||
#__next>div>div.relative.z-50.mt-8.sm\:mx-auto.sm\:w-full.sm\:max-w-md>div>button,
|
||||
#__next>div>div.relative.z-50.mt-8.sm\:mx-auto.sm\:w-full.sm\:max-w-md>div>div:nth-child(3)>button {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* TOAST */
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
@ -81,7 +82,7 @@ h6,
|
||||
|
||||
/* MENU */
|
||||
.menu {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
@media (max-width: 1099.98px) {
|
||||
@ -101,7 +102,7 @@ h6,
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.page .sidebar {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
}
|
||||
|
||||
@ -205,12 +206,12 @@ p a:hover,
|
||||
|
||||
/* OTHER */
|
||||
.widget--item hr {
|
||||
background: rgb(255 255 255 / 50%);
|
||||
background: var(--transparency-light-50);
|
||||
}
|
||||
|
||||
.widget--item--inner,
|
||||
.sr--instance--inner {
|
||||
background: hsl(0deg 0% 0% / 15%);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.filter--add:hover {
|
||||
@ -224,7 +225,7 @@ p a:hover,
|
||||
}
|
||||
|
||||
.filter--item {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.spinner svg {
|
||||
@ -257,7 +258,7 @@ code {
|
||||
.color-blue,
|
||||
.color-red {
|
||||
/* Ratings */
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 5px;
|
||||
padding: 0px 7px;
|
||||
}
|
||||
@ -406,7 +407,7 @@ code {
|
||||
|
||||
thead {
|
||||
color: var(--text-hover);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.generic-table tr:not(.child):not(.sub) th:nth-child(odd),
|
||||
@ -448,7 +449,7 @@ input[type=checkbox]:checked:after {
|
||||
|
||||
input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus {
|
||||
border-bottom: 2px solid rgb(var(--accent-color));
|
||||
background: rgba(255, 255, 255, .2);
|
||||
background: var(--transparency-light-20);
|
||||
color: var(--text-hover)
|
||||
}
|
||||
|
||||
@ -456,18 +457,18 @@ input:not([type=checkbox]):not(.styled-input--input):not([type=file]),
|
||||
.login-wrap input {
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0);
|
||||
color: var(--text);
|
||||
background: rgb(255 255 255 / 10%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.search-form input:focus {
|
||||
background: hsla(0, 0%, 100%, .1) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover) !important;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
/* CALENDAR */
|
||||
.rbc-show-more {
|
||||
background-color: hsl(0deg 0% 0% / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.rbc-day-bg.rbc-today {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color) !important;
|
||||
@ -41,7 +42,7 @@
|
||||
.treeview-menu>li.active>a,
|
||||
.treeview-menu>li>a:hover {
|
||||
color: var(--text-hover);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.h1,
|
||||
@ -106,7 +107,7 @@
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .25);
|
||||
border-top: 1px solid rgba(255, 255, 255, .25);
|
||||
background-color: rgba(255, 255, 255, .2) !important;
|
||||
background: var(--transparency-light-20) !important;
|
||||
}
|
||||
|
||||
.navbar-nav>.user-menu>.dropdown-menu>.user-body a {
|
||||
@ -122,24 +123,24 @@
|
||||
.skin-blue .main-header .logo,
|
||||
.main-header .navbar,
|
||||
.main-header .logo {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.skin-blue .main-header .logo:hover,
|
||||
.skin-blue .main-header .navbar .sidebar-toggle:hover,
|
||||
.sidebar-menu>li:hover>a {
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
.sidebar-menu>li.active>a {
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.main-footer {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
border-top: 1px solid rgb(255 255 255 / 20%);
|
||||
}
|
||||
@ -161,13 +162,13 @@
|
||||
.wrapper,
|
||||
.main-sidebar,
|
||||
.left-side {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.skin-blue .sidebar-menu>li.header,
|
||||
.sidebar-menu>li.header {
|
||||
color: rgb(var(--accent-color));
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
}
|
||||
|
||||
.treeview-menu>li>a {
|
||||
@ -175,7 +176,7 @@
|
||||
}
|
||||
|
||||
.sidebar-menu>li>.treeview-menu {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* Menus */
|
||||
@ -184,12 +185,12 @@
|
||||
.sidebar-menu>li:hover>a,
|
||||
.sidebar-menu>li.active>a {
|
||||
color: var(--text-hover);
|
||||
background: rgba(0, 0, 0, .1);
|
||||
background: var(--transparency-dark-10);
|
||||
border-left-color: rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
.skin-blue .sidebar-menu>li>.treeview-menu {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.skin-blue .treeview-menu>li>a {
|
||||
@ -233,18 +234,18 @@
|
||||
|
||||
.main-footer .nav-tabs,
|
||||
.nav-tabs-custom .nav-tabs {
|
||||
background-color: rgb(0 0 0 / 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom-color: rgb(255 255 255 / 15%);
|
||||
}
|
||||
|
||||
.nav-tabs-custom>.nav-tabs>li:hover {
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
color: var(--text-hover);
|
||||
border-top-color: rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
.nav-tabs-custom>.nav-tabs>li:hover>a {
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
}
|
||||
|
||||
/* Dashboard */
|
||||
@ -254,14 +255,14 @@
|
||||
}
|
||||
|
||||
.box {
|
||||
background: rgba(0, 0, 0, .24);
|
||||
background: var(--transparency-dark-25);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.box-solid>.box-header,
|
||||
.box>.box-header {
|
||||
color: var(--text);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* Total queries box*/
|
||||
@ -290,7 +291,7 @@
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
background: var(--transparency-dark-10)
|
||||
}
|
||||
|
||||
.table-bordered>thead>tr>th,
|
||||
@ -303,7 +304,7 @@
|
||||
}
|
||||
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* Query Log */
|
||||
@ -354,7 +355,7 @@
|
||||
/* Login */
|
||||
.panel-default {
|
||||
border-color: transparent;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.panel-default>.panel-heading {
|
||||
@ -366,7 +367,7 @@
|
||||
.panel,
|
||||
.panel-body,
|
||||
.panel-default>.panel-heading {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 0px;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text);
|
||||
@ -374,7 +375,7 @@
|
||||
|
||||
/* Blacklist */
|
||||
.nav-tabs-custom {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.nav-tabs-custom>.tab-content {
|
||||
@ -393,7 +394,7 @@
|
||||
|
||||
.nav-tabs-custom>.nav-tabs>li.active>a,
|
||||
.nav-tabs-custom>.nav-tabs>li.active:hover>a {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
}
|
||||
|
||||
@ -411,11 +412,11 @@
|
||||
|
||||
/* Network */
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.table-striped>tbody>tr:nth-of-type(even) {
|
||||
background-color: rgba(0, 0, 0, .5) !important;
|
||||
background: var(--transparency-dark-50) !important;
|
||||
}
|
||||
|
||||
#network-entries_wrapper.text-center {
|
||||
@ -504,13 +505,13 @@
|
||||
pre,
|
||||
.box-footer,
|
||||
.datatables_processing {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.dataTables_wrapper input[type="search"] {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -529,7 +530,7 @@
|
||||
.daterangepicker select.ampmselect,
|
||||
.form-control,
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
background-color: rgb(0 0 0 / 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
border: 1px solid rgb(255 255 255 / 15%);
|
||||
}
|
||||
@ -568,7 +569,7 @@
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -587,6 +588,6 @@
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
@ -141,7 +142,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
|
||||
}
|
||||
|
||||
[class*="BottomBar-bottomBar-"] {
|
||||
background-color: rgb(0 0 0 / 70%);
|
||||
background: var(--transparency-dark-70);
|
||||
box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
@ -157,7 +158,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
|
||||
|
||||
[class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"],
|
||||
[class*="SourceSidebar-sidebar-"] {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] {
|
||||
@ -176,7 +177,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
|
||||
background: var(--header-blur-background);
|
||||
-webkit-backdrop-filter: saturate(1.8) blur(1.5em);
|
||||
backdrop-filter: saturate(1.8) blur(1.5em);
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
}
|
||||
}
|
||||
|
||||
@ -204,7 +205,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
|
||||
|
||||
/* NAVBAR */
|
||||
[class*="NavBar-container-"] {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="NavBarActivityButton-isHighlighted-"] [class*="NavBarActivityButton-activityIcon-"] {
|
||||
@ -520,13 +521,13 @@ circle {
|
||||
|
||||
.modal-body-with-panes .modal-nav-pane {
|
||||
background-image: none;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.well,
|
||||
.files ul li {
|
||||
color: var(--text);
|
||||
background-color: rgb(0 0 0 / 10%);
|
||||
background: var(--transparency-dark-10);
|
||||
border: 1px solid transparent;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
|
||||
box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
|
||||
@ -534,7 +535,7 @@ circle {
|
||||
|
||||
.edit-section-modal .wizard-blocks-group>.wizard-block.selectable:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
}
|
||||
|
||||
.edit-section-modal .wizard-blocks-group>.wizard-block.selectable {
|
||||
@ -611,7 +612,7 @@ fieldset[disabled] .btn-primary:hover {
|
||||
|
||||
.edit-lock-addon {
|
||||
color: var(--button-color-hover);
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
border-color: transparent;
|
||||
-webkit-box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%);
|
||||
box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%);
|
||||
@ -712,11 +713,11 @@ hr {
|
||||
|
||||
[class*="DirectoryListTableHeader-tableHeaderCell-"],
|
||||
[class*="DirectoryListTableHeader-columnMenuButton-"] {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
a>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover,
|
||||
button>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover,
|
||||
[class*="DirectoryListTableHeader-columnMenuButton-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
@ -10,6 +10,8 @@
|
||||
/* Made by @gilbN */
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color) !important;
|
||||
background-repeat: repeat, no-repeat;
|
||||
@ -57,7 +59,7 @@ body {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -69,7 +71,7 @@ body {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -78,12 +80,12 @@ legend {
|
||||
}
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background: var(--transparency-dark-60);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav>li>a {
|
||||
@ -92,7 +94,7 @@ legend {
|
||||
|
||||
.navbar-inverse .navbar-nav>li>a:hover,
|
||||
.navbar-inverse .navbar-nav>li>a:focus {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.nav>li.selected>a {
|
||||
@ -139,7 +141,7 @@ legend {
|
||||
|
||||
.plpp_table.even:hover,
|
||||
.plpp_table.odd:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
@ -204,7 +206,7 @@ div.plpp_slider {
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
table,
|
||||
@ -229,7 +231,7 @@ table,
|
||||
.pagination>li>a,
|
||||
.pagination>li>span {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
@ -240,7 +242,7 @@ table,
|
||||
.pagination>.disabled>a:hover,
|
||||
.pagination>.disabled>a:focus {
|
||||
color: #BDBDBD;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--text-json-tree-branch-preview-color: var(--text);
|
||||
@ -47,7 +48,7 @@
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -59,7 +60,7 @@
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -127,7 +128,7 @@ ul.sidebar .sidebar-list a {
|
||||
|
||||
/* NEWS */
|
||||
.motd-body {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
}
|
||||
|
||||
/* LOGIN */
|
||||
@ -148,16 +149,16 @@ ul.sidebar .sidebar-list a {
|
||||
|
||||
/* SIDEBAR */
|
||||
#sidebar-wrapper {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
ul.sidebar .sidebar-list a.active {
|
||||
color: rgb(var(--accent-color));
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
border-left: 3px solid rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
@ -165,7 +166,7 @@ ul.sidebar .sidebar-list a.active {
|
||||
.sidebar-footer,
|
||||
ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active),
|
||||
ul.sidebar .sidebar-main a {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -180,7 +181,7 @@ ul.sidebar .sidebar-title {
|
||||
|
||||
ul.sidebar .sidebar-list .sidebar-sublist a.active {
|
||||
border-left: 3px solid rgb(var(--accent-color));
|
||||
background: rgba(255, 255, 255, .08);
|
||||
background: var(--transparency-light-10)
|
||||
}
|
||||
|
||||
ul.sidebar .sidebar-title {
|
||||
@ -201,33 +202,33 @@ ul.sidebar .sidebar-title {
|
||||
|
||||
/* WIDGETS */
|
||||
.widget {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.widget .widget-body table thead {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.widget .widget-header {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* DATATABLES */
|
||||
.datatable .toolBar {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.datatable .footer {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.blocklist-item--selected,
|
||||
.blocklist-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -244,11 +245,11 @@ ul.sidebar .sidebar-title {
|
||||
border-top: 1px solid rgba(255, 255, 255, .1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||
padding: 8px;
|
||||
background: rgba(255, 255, 255, .15);
|
||||
background: var(--transparency-light-15)
|
||||
}
|
||||
|
||||
.datatable .searchBar:focus-within {
|
||||
background:rgba(255, 255, 255, .25);
|
||||
background: var(--transparency-light-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -267,7 +268,7 @@ ul.sidebar .sidebar-title {
|
||||
.table>thead>tr.active>th,
|
||||
.table>thead>tr>td.active,
|
||||
.table>thead>tr>th.active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.table-hover>tbody>tr.active:hover>td,
|
||||
@ -275,11 +276,11 @@ ul.sidebar .sidebar-title {
|
||||
.table-hover>tbody>tr:hover>.active,
|
||||
.table-hover>tbody>tr>td.active:hover,
|
||||
.table-hover>tbody>tr>th.active:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.table .table {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.label-default {
|
||||
@ -356,7 +357,7 @@ fieldset[disabled] .btn-primary:hover {
|
||||
|
||||
.bootbox-form .checkbox i,
|
||||
.switch i {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.btn.focus,
|
||||
@ -392,7 +393,7 @@ fieldset[disabled] .btn-primary:hover {
|
||||
.ui-select-bootstrap>.ui-select-match>.btn:focus {
|
||||
text-align: left !important;
|
||||
color: var(--button-text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
border-color: #00000000;
|
||||
}
|
||||
|
||||
@ -405,7 +406,7 @@ fieldset[disabled] .btn-primary:hover {
|
||||
.pagination>.disabled>span:hover {
|
||||
color: var(--text-muted);
|
||||
cursor: not-allowed;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -446,7 +447,7 @@ select:focus, select.form-control:focus {
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
border: 1px solid transparent;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -492,14 +493,14 @@ output {
|
||||
.dropdown-menu>.active>a:focus,
|
||||
.dropdown-menu>.active>a:hover,
|
||||
.ui-select-bootstrap .ui-select-choices-row.active>span {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.ui-select-bootstrap .ui-select-choices-row>span:focus,
|
||||
.ui-select-bootstrap .ui-select-choices-row>span:hover,
|
||||
.ui-select-choices-row:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
/* APP TEMPLATES */
|
||||
@ -513,7 +514,7 @@ output {
|
||||
/* ADD NETWORK */
|
||||
|
||||
.boxselector_wrapper input[type=radio]:checked+label {
|
||||
background: rgba(255, 255, 255, .15);
|
||||
background: var(--transparency-light-15);
|
||||
color: var(--text-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
@ -521,7 +522,7 @@ output {
|
||||
.boxselector_wrapper label {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -554,13 +555,13 @@ output {
|
||||
|
||||
/* STACKS */
|
||||
.CodeMirror {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.25);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
caret-color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -584,7 +585,7 @@ output {
|
||||
.nav-tabs>li.active>a:hover {
|
||||
color: var(--text-hover);
|
||||
cursor: default;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
border: 1px solid #ddd0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
@ -596,18 +597,18 @@ output {
|
||||
.nav>li>a:focus,
|
||||
.nav>li>a:hover {
|
||||
text-decoration: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.nav-tabs>li>a {
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15)
|
||||
}
|
||||
|
||||
/* LOGS */
|
||||
.log_viewer {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -623,7 +624,7 @@ json-tree .key {
|
||||
|
||||
pre {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -690,17 +691,17 @@ pre {
|
||||
}
|
||||
|
||||
.widget .widget-body table .ng-scope tr {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.widget .widget-body table thead {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.widget .widget-body table tbody .ng-isolate-scope div {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
@ -710,6 +711,6 @@ pre {
|
||||
}
|
||||
|
||||
.widget .widget-body table thead tr:hover {
|
||||
background-color: rgba(0, 0, 0, .35) !important;
|
||||
background: rgba(0, 0, 0, .35) !important;
|
||||
background: var(--transparency-dark-35) !important;
|
||||
background: var(--transparency-dark-35) !important;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color);
|
||||
@ -166,7 +167,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"]:active,
|
||||
@ -183,7 +184,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AutoSuggestInput-suggestionHighlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="CheckInput-primaryIsChecked-"] {
|
||||
@ -200,7 +201,7 @@ a:hover {
|
||||
/* HEADER */
|
||||
|
||||
[class*="PageHeader-header-"] {
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
box-shadow: none;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -231,16 +232,16 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="IndexerSearchInput-highlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="IndexerSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* SIDE MENU */
|
||||
[class*="PageSidebar-sidebarContainer-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="PageSidebar-sidebar-"] {
|
||||
@ -263,7 +264,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="PageSidebarItem-isActiveParentLink-"] {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@ -310,15 +311,15 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="AddListMoviePoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="MovieIndexOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="MovieIndexOverview-link-"]:hover {
|
||||
@ -326,7 +327,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ProgressBar-container-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*=".ProgressBar-purple-"] {
|
||||
@ -337,7 +338,7 @@ a:hover {
|
||||
[class*="MovieDetailsSeason-season-"],
|
||||
[class*="MovieDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="MovieDetailsSeason-actionButton-"],
|
||||
@ -376,17 +377,17 @@ a:hover {
|
||||
|
||||
[class*="MovieDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="MovieFileEditorTable-container-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="ExtraFileTable-container-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.Table-table-2C3O8 {
|
||||
@ -498,7 +499,7 @@ a:hover {
|
||||
|
||||
/* Table options*/
|
||||
[class*="TableOptionsColumn-column-"] {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
}
|
||||
@ -512,17 +513,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="TableRow-row-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="TableRowCell-cell-"] {
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* TOP MENU SERIES */
|
||||
[class*="PageToolbar-toolbar-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -558,7 +559,7 @@ a:hover {
|
||||
[class*="MovieIndexPosterInfo-info-"],
|
||||
[class*="MovieIndexPosterInfo-info-"],
|
||||
[class*="MovieCreditPoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -585,13 +586,13 @@ a:hover {
|
||||
|
||||
[class*="MenuItem-menuItem-"]:hover,
|
||||
[class*="MenuItem-menuItem-"]:focus {
|
||||
background: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class*="MenuItemSeparator-separator-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* ALPHABET JUMP BAR */
|
||||
@ -602,12 +603,12 @@ a:hover {
|
||||
/* MINI RIGHT SCROLL BAR */
|
||||
[class*="OverlayScroller-thumb-"],
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="OverlayScroller-thumb-"]:hover,
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
/* ADD NEW */
|
||||
@ -631,12 +632,12 @@ a:hover {
|
||||
|
||||
[class*="EnhancedSelectInputOption-isSelected-"],
|
||||
[class*="EnhancedSelectInputOption-isSelected-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.20) !important;
|
||||
background: var(--transparency-light-20) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="EnhancedSelectInputOption-option-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="HintedSelectInputOption-hintText-"] {
|
||||
@ -674,7 +675,7 @@ a:hover {
|
||||
[class*="AddNewMovie-searchIconContainer-"],
|
||||
[class*="CheckInput-isIndeterminate-"] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -701,7 +702,7 @@ a:hover {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="TagInput-input-"][class*="TagInput-isFocused-"] {
|
||||
@ -724,7 +725,7 @@ a:hover {
|
||||
|
||||
[class*="AddNewMovieSearchResult-searchResult-"]:hover,
|
||||
[class*="AddNewMovieSearchResult-underlay-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="AddNewmovieModalContent-year-"] {
|
||||
@ -749,13 +750,13 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="VirtualTableRow-row-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* Drop down menu/button*/
|
||||
[class*="ImportMovieSelectMovie-button-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="ImportMovieSelectMovie-content-"],
|
||||
@ -773,7 +774,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ImportMovieSearchResult-movie-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="ImportMovieTitle-year-"] {
|
||||
@ -800,17 +801,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AddListMovieOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="PageJumpBarItem-jumpBarItem-"]:hover {
|
||||
color: var(--text-hover);
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/*Posters*/
|
||||
[class*="AddListMoviePoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -818,7 +819,7 @@ a:hover {
|
||||
/* FOOTER */
|
||||
[class*="PageContentFooter-contentFooter-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -874,17 +875,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="DayOfWeek-dayOfWeek-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-dayOfMonth-"] {
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, .08);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-isToday-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="CalendarDay-day-"],
|
||||
@ -932,7 +933,7 @@ a:hover {
|
||||
|
||||
/* calendar agenda */
|
||||
[class*="AgendaEvent-event-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
@ -959,15 +960,15 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"] {
|
||||
@ -975,17 +976,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.35);
|
||||
background: var(--transparency-light-35);
|
||||
}
|
||||
|
||||
/* PROFILES */
|
||||
[class*="Card-card-"],
|
||||
[class*="QualityProfiles-addQualityProfile-"] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1018,12 +1019,12 @@ a:hover {
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
|
||||
[class*="LanguageProfileItem-languageProfileItem-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="QualityDefinitions-sizeLimitHelpText-"] {
|
||||
@ -1039,7 +1040,7 @@ a:hover {
|
||||
|
||||
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
|
||||
border: 1px solid transparent;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
/* Indexers */
|
||||
@ -1076,7 +1077,7 @@ a:hover {
|
||||
/* LOG */
|
||||
[class*="Alert-info-"] {
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: #FFC107;
|
||||
}
|
||||
|
||||
@ -1102,12 +1103,12 @@ a:hover {
|
||||
/* Login Page */
|
||||
|
||||
.panel-body {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
@ -1117,7 +1118,7 @@ a:hover {
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1138,7 +1139,7 @@ input[type=password] {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* Custom filter */
|
||||
@ -1147,7 +1148,7 @@ input[type=password] {
|
||||
}
|
||||
|
||||
[class*="CustomFilter-customFilter-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="SelectMovieModalContent-path-"] {
|
||||
@ -1157,7 +1158,7 @@ input[type=password] {
|
||||
/* ChartJS */
|
||||
[class*="Stats-fullWidthChart-"],
|
||||
[class*="Stats-halfWidthChart-"] {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
canvas {
|
||||
@ -1170,20 +1171,20 @@ canvas {
|
||||
}
|
||||
|
||||
[class*="QueryParameterOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="QueryParameterOption-example-"] {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
|
||||
[class*="QueryParameterOption-option-"]:hover [class*="QueryParameterOption-token-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="QueryParameterOption-option-"]:hover [class*="QueryParameterOption-example-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.35);
|
||||
background: var(--transparency-light-35);
|
||||
}
|
||||
|
||||
/* HISTORY */
|
||||
@ -1195,7 +1196,7 @@ canvas {
|
||||
}
|
||||
|
||||
[class*="HistoryRowParameter-value-"] {
|
||||
background-color: rgb(255 255 255 / 50%);
|
||||
background: var(--transparency-light-50);
|
||||
color: #1f1f1f;
|
||||
}
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
|
||||
@import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
@ -19,13 +20,13 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
html,
|
||||
@ -60,13 +61,13 @@ body {
|
||||
input:disabled {
|
||||
color: rgb(84, 84, 84);
|
||||
cursor: default;
|
||||
background-color: rgb(255, 255, 255, .05) !important;
|
||||
background: var(--transparency-light-05) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
input[type="text"i] {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-width: 0px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -75,7 +76,7 @@ input[type="text"i] {
|
||||
|
||||
input[type="password"i] {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-width: 0px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -84,7 +85,7 @@ input[type="password"i] {
|
||||
|
||||
input[type="number"i] {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-width: 0px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -92,7 +93,7 @@ input[type="number"i] {
|
||||
|
||||
input[type="file"i] {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-width: 0px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -162,7 +163,7 @@ h4,
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
padding-top: 0;
|
||||
/* background: rgba(0, 0, 0, 0.25); */
|
||||
/* background: var(--transparency-dark-25) */
|
||||
width: 400px;
|
||||
height: 460px;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
@ -210,7 +211,7 @@ label {
|
||||
}
|
||||
|
||||
#desktopNavbar {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
height: 20px;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
@ -221,11 +222,11 @@ label {
|
||||
|
||||
#desktopNavbar ul li a:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
#desktopNavbar li ul li a:hover {
|
||||
background: rgba(255, 255, 255, .08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -270,7 +271,7 @@ label {
|
||||
}
|
||||
|
||||
.dynamicTable th {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border-right-color: rgba(255, 255, 255, .08) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
@ -284,20 +285,20 @@ label {
|
||||
}
|
||||
|
||||
.dynamicTable {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.dynamicTable tbody tr {
|
||||
background-color: rgba(0, 0, 0, 0.08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
.dynamicTable tbody tr:nth-child(even),
|
||||
.dynamicTable tbody tr.alt {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.dynamicTable tbody tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -342,7 +343,7 @@ li.divider {
|
||||
|
||||
#main input[type="text"i] {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-width: 0px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -353,12 +354,12 @@ li.divider {
|
||||
}
|
||||
|
||||
#main input[type="text"i]:focus {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
#main input[type="password"i] {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-width: 0px;
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -369,7 +370,7 @@ li.divider {
|
||||
}
|
||||
|
||||
#main input[type="password"i] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
#loginform #login {
|
||||
@ -458,13 +459,13 @@ ul.filterList li:hover:before {
|
||||
}
|
||||
|
||||
.columnHandle {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/*Sidemenu - Bottom menu*/
|
||||
.bottomPanel {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
/* Bottom menu */
|
||||
@ -473,7 +474,7 @@ ul.filterList li:hover:before {
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border-bottom: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
@ -501,11 +502,11 @@ ul.filterList li:hover:before {
|
||||
}
|
||||
|
||||
.tab-menu li a:hover {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.toolbarTabs {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.progressbar_dark {
|
||||
@ -514,7 +515,7 @@ ul.filterList li:hover:before {
|
||||
}
|
||||
|
||||
.progressbar_light {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -550,13 +551,13 @@ fieldset {
|
||||
|
||||
.mochaToolButton {
|
||||
margin-right: 10px;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mochaToolButton:hover {
|
||||
margin-right: 10px;
|
||||
background: rgba(255, 255, 255, .25);
|
||||
background: var(--transparency-light-25);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@ -578,7 +579,7 @@ fieldset {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 29px;
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
overflow: hidden;
|
||||
border-top: none !important;
|
||||
}
|
||||
@ -618,14 +619,14 @@ fieldset.settings {
|
||||
textarea:disabled {
|
||||
color: rgb(84, 84, 84);
|
||||
cursor: default;
|
||||
background-color: rgb(255, 255, 255, .05) !important;
|
||||
background: var(--transparency-light-05) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
textarea {
|
||||
color: var(--text-hover) !important;
|
||||
cursor: default;
|
||||
background-color: rgb(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--calendar-in-cinemas: 53 197 244;
|
||||
@ -168,7 +169,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"]:active,
|
||||
@ -185,7 +186,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AutoSuggestInput-suggestionHighlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="CheckInput-primaryIsChecked-"] {
|
||||
@ -201,7 +202,7 @@ a:hover {
|
||||
/* HEADER */
|
||||
|
||||
[class*="PageHeader-header-"] {
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -231,16 +232,16 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="MovieSearchInput-highlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* SIDE MENU */
|
||||
[class*="PageSidebar-sidebarContainer-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="PageSidebar-sidebar-"] {
|
||||
@ -263,7 +264,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="PageSidebarItem-isActiveParentLink-"] {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@ -316,15 +317,15 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="AddListMoviePoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="MovieIndexOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="MovieIndexOverview-link-"]:hover {
|
||||
@ -332,7 +333,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ProgressBar-container-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*=".ProgressBar-purple-"] {
|
||||
@ -343,7 +344,7 @@ a:hover {
|
||||
[class*="MovieDetailsSeason-season-"],
|
||||
[class*="MovieDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="MovieDetailsSeason-actionButton-"],
|
||||
@ -386,17 +387,17 @@ a:hover {
|
||||
|
||||
[class*="MovieDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="MovieFileEditorTable-container-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="ExtraFileTable-container-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
|
||||
@ -509,7 +510,7 @@ a:hover {
|
||||
|
||||
/* Table options*/
|
||||
[class*="TableOptionsColumn-column-"] {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
}
|
||||
@ -523,17 +524,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="TableRow-row-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="TableRowCell-cell-"] {
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* TOP MENU SERIES */
|
||||
[class*="PageToolbar-toolbar-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -569,7 +570,7 @@ a:hover {
|
||||
[class*="MovieIndexPosterInfo-info-"],
|
||||
[class*="MovieIndexPosterInfo-info-"],
|
||||
[class*="MovieCreditPoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -596,13 +597,13 @@ a:hover {
|
||||
|
||||
[class*="MenuItem-menuItem-"]:hover,
|
||||
[class*="MenuItem-menuItem-"]:focus {
|
||||
background: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class*="MenuItemSeparator-separator-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* ALPHABET JUMP BAR */
|
||||
@ -613,12 +614,12 @@ a:hover {
|
||||
/* MINI RIGHT SCROLL BAR */
|
||||
[class*="OverlayScroller-thumb-"],
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="OverlayScroller-thumb-"]:hover,
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
/* ADD NEW */
|
||||
@ -642,12 +643,12 @@ a:hover {
|
||||
|
||||
[class*="EnhancedSelectInputOption-isSelected-"],
|
||||
[class*="EnhancedSelectInputOption-isSelected-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.20) !important;
|
||||
background: var(--transparency-light-20) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="EnhancedSelectInputOption-option-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="HintedSelectInputOption-hintText-"] {
|
||||
@ -686,7 +687,7 @@ a:hover {
|
||||
[class*="AddNewMovie-searchIconContainer-"],
|
||||
[class*="CheckInput-isIndeterminate-"] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -713,7 +714,7 @@ a:hover {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="TagInput-input-"][class*="TagInput-isFocused-"] {
|
||||
@ -742,7 +743,7 @@ a:hover {
|
||||
|
||||
[class*="AddNewMovieSearchResult-searchResult-"]:hover,
|
||||
[class*="AddNewMovieSearchResult-underlay-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="AddNewmovieModalContent-year-"] {
|
||||
@ -767,13 +768,13 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="VirtualTableRow-row-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* Drop down menu/button*/
|
||||
[class*="ImportMovieSelectMovie-button-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="ImportMovieSelectMovie-content-"],
|
||||
@ -791,7 +792,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ImportMovieSearchResult-movie-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="ImportMovieTitle-year-"] {
|
||||
@ -810,7 +811,7 @@ a:hover {
|
||||
|
||||
[class*="DiscoverMoviePoster-title-"],
|
||||
[class*="DiscoverMoviePosterInfo-info-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -824,17 +825,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AddListMovieOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="PageJumpBarItem-jumpBarItem-"]:hover {
|
||||
color: var(--text-hover);
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/*Posters*/
|
||||
[class*="AddListMoviePoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -842,7 +843,7 @@ a:hover {
|
||||
/* FOOTER */
|
||||
[class*="PageContentFooter-contentFooter-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -928,18 +929,18 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="DayOfWeek-dayOfWeek-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-dayOfMonth-"] {
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, .08);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-isToday-"],
|
||||
[class*="DayOfWeek-isToday-"] {
|
||||
background-color: hsla(0, 0%, 100%, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="CalendarDay-day-"],
|
||||
@ -990,7 +991,7 @@ a:hover {
|
||||
|
||||
/* calendar agenda */
|
||||
[class*="AgendaEvent-event-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
@ -1017,15 +1018,15 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"] {
|
||||
@ -1033,17 +1034,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.35);
|
||||
background: var(--transparency-dark-35);
|
||||
}
|
||||
|
||||
/* PROFILES */
|
||||
[class*="Card-card-"],
|
||||
[class*="QualityProfiles-addQualityProfile-"] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1068,12 +1069,12 @@ a:hover {
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
|
||||
[class*="LanguageProfileItem-languageProfileItem-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="KeyValueListInputItem-keyInput-"],
|
||||
@ -1085,7 +1086,7 @@ a:hover {
|
||||
|
||||
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
|
||||
border: 1px solid transparent;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="QualityDefinitions-sizeLimitHelpText-"] {
|
||||
@ -1119,7 +1120,7 @@ a:hover {
|
||||
/* LOG */
|
||||
[class*="Alert-info-"] {
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: #FFC107;
|
||||
}
|
||||
|
||||
@ -1145,12 +1146,12 @@ a:hover {
|
||||
/* Login Page */
|
||||
|
||||
.panel-body {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
@ -1160,7 +1161,7 @@ a:hover {
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1181,7 +1182,7 @@ input[type=password] {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* Custom filter */
|
||||
@ -1190,7 +1191,7 @@ input[type=password] {
|
||||
}
|
||||
|
||||
[class*="CustomFilter-customFilter-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="SelectMovieModalContent-path-"] {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--calendar-downloaded: 39 194 76;
|
||||
@ -168,7 +169,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"]:active,
|
||||
@ -185,7 +186,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AutoSuggestInput-suggestionHighlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="CheckInput-primaryIsChecked-"] {
|
||||
@ -201,7 +202,7 @@ a:hover {
|
||||
/* HEADER */
|
||||
|
||||
[class*="PageHeader-header-"] {
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -231,25 +232,25 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AuthorSearchInput-highlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08)
|
||||
background: var(--transparency-dark-10)
|
||||
}
|
||||
|
||||
[class*"=AuthorSearchInput-authorContainer-"]::-webkit-scrollbar-thumb,
|
||||
[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* MINI RIGHT SCROLL BAR */
|
||||
[class*="OverlayScroller-thumb-"],
|
||||
[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb,
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="OverlayScroller-thumb-"]:hover,
|
||||
[class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover,
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
/* ADD NEW */
|
||||
@ -272,12 +273,12 @@ a:hover {
|
||||
|
||||
[class*="EnhancedSelectInputOption-isSelected-"],
|
||||
[class*="EnhancedSelectInputOption-isSelected-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.20) !important;
|
||||
background: var(--transparency-light-20) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="EnhancedSelectInputOption-option-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="HintedSelectInputOption-hintText-"] {
|
||||
@ -313,7 +314,7 @@ a:hover {
|
||||
|
||||
/* SIDE MENU */
|
||||
[class*="PageSidebar-sidebarContainer-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="PageSidebar-sidebar-"] {
|
||||
@ -336,7 +337,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="PageSidebarItem-isActiveParentLink-"] {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@ -384,7 +385,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AuthorIndexOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="AuthorIndexOverview-link-"]:hover {
|
||||
@ -392,7 +393,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ProgressBar-container-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*=".ProgressBar-purple-"] {
|
||||
@ -404,7 +405,7 @@ a:hover {
|
||||
[class*="AuthorDetailsSeason-albumType-"],
|
||||
[class*="AuthorDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="AuthorDetailsSeason-header-"],
|
||||
@ -451,12 +452,12 @@ a:hover {
|
||||
|
||||
[class*="AlbumDetailsMedium-medium-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="ExtraFileTable-container-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="AlbumDetails-selectedTab-"] {
|
||||
@ -465,16 +466,16 @@ a:hover {
|
||||
|
||||
[class*="AlbumDetailsMedium-collapseButtonContainer-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="AuthorIndexProgressBar-progress-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="AuthorIndexBanner-title-"],
|
||||
[class*="AuthorIndexBannerInfo-info-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -583,7 +584,7 @@ a:hover {
|
||||
|
||||
/* Table options*/
|
||||
[class*="TableOptionsColumn-column-"] {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
}
|
||||
@ -597,17 +598,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="TableRow-row-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="TableRowCell-cell-"] {
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* TOP MENU SERIES */
|
||||
[class*="PageToolbar-toolbar-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -642,7 +643,7 @@ a:hover {
|
||||
[class*="AuthorIndexPosterInfo-info-"],
|
||||
[class*="BookIndexPoster-title-"],
|
||||
[class*="BookIndexPosterInfo-info-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -670,13 +671,13 @@ a:hover {
|
||||
|
||||
[class*="MenuItem-menuItem-"]:hover,
|
||||
[class*="MenuItem-menuItem-"]:focus {
|
||||
background: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class*="MenuItemSeparator-separator-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* ALPHABET JUMP BAR */
|
||||
@ -689,7 +690,7 @@ a:hover {
|
||||
[class*="AddNewItem-searchIconContainer-"],
|
||||
[class*="CheckInput-isIndeterminate-"] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -712,7 +713,7 @@ a:hover {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="TagInput-input-"][class*="TagInput-isFocused-"] {
|
||||
@ -745,7 +746,7 @@ a:hover {
|
||||
[class*="AddNewAuthorSearchResult-searchResult-"]:hover,
|
||||
[class*="AddNewAuthorSearchResult-underlay-"]:hover,
|
||||
[class*="AddNewAlbumSearchResult-underlay-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -778,7 +779,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ImportAuthorSearchResult-author-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* IMPORT */
|
||||
@ -789,14 +790,14 @@ a:hover {
|
||||
|
||||
[class*="ExpandingFileDetails-fileDetails-"] {
|
||||
border: 1px solid rgb(255 255 255 / .1);
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* IMPORT NEW ARTIST */
|
||||
/* Drop down menu/button*/
|
||||
[class*="ImportAuthorSelectAuthor-button-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -809,14 +810,14 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="VirtualTableRow-row-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/*Title*/
|
||||
|
||||
[class*="PageJumpBarItem-jumpBarItem-"]:hover {
|
||||
color: var(--text-hover);
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/*Posters*/
|
||||
@ -827,7 +828,7 @@ a:hover {
|
||||
/* FOOTER */
|
||||
[class*="PageContentFooter-contentFooter-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -889,18 +890,18 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="DayOfWeek-dayOfWeek-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-dayOfMonth-"] {
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, .08);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-isToday-"],
|
||||
[class*="DayOfWeek-isToday-"] {
|
||||
background-color: hsla(0, 0%, 100%, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -943,7 +944,7 @@ color: var(--text-hover) !important;
|
||||
|
||||
/* calendar agenda */
|
||||
[class*="AgendaEvent-event-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
@ -970,15 +971,15 @@ color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"] {
|
||||
@ -986,17 +987,17 @@ color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.35);
|
||||
background: var(--transparency-light-35);
|
||||
}
|
||||
|
||||
/* PROFILES */
|
||||
[class*="Card-card-"],
|
||||
[class*="QualityProfiles-addQualityProfile-"] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1021,12 +1022,12 @@ color: var(--text-hover) !important;
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
|
||||
[class*="LanguageProfileItem-languageProfileItem-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="KeyValueListInputItem-keyInput-"],
|
||||
@ -1038,7 +1039,7 @@ color: var(--text-hover) !important;
|
||||
|
||||
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
|
||||
border: 1px solid transparent;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="QualityDefinitions-sizeLimitHelpText-"] {
|
||||
@ -1053,7 +1054,7 @@ color: var(--text-hover) !important;
|
||||
|
||||
[class*="Card-card-"],
|
||||
[class*="QualityProfiles-addQualityProfile-"] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1101,7 +1102,7 @@ color: var(--text-hover) !important;
|
||||
/* LOG */
|
||||
[class*="Alert-info-"] {
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: #FFC107;
|
||||
}
|
||||
|
||||
@ -1127,12 +1128,12 @@ color: var(--text-hover) !important;
|
||||
/* Login Page */
|
||||
|
||||
.panel-body {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
@ -1142,7 +1143,7 @@ color: var(--text-hover) !important;
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1163,7 +1164,7 @@ input[type=password] {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* Custom filter */
|
||||
@ -1172,7 +1173,7 @@ input[type=password] {
|
||||
}
|
||||
|
||||
[class*="CustomFilter-customFilter-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/* Readarr */
|
||||
@ -1181,7 +1182,7 @@ input[type=password] {
|
||||
|
||||
[class*="AuthorIndexPoster-link-"],
|
||||
[class*="AuthorIndexPoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* Add New*/
|
||||
@ -1192,7 +1193,7 @@ input[type=password] {
|
||||
|
||||
[class*="AddNewAuthorSearchResult-underlay-"]:hover,
|
||||
[class*="AddNewBookSearchResult-underlay-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -1203,17 +1204,17 @@ input[type=password] {
|
||||
}
|
||||
|
||||
[class*="AuthorIndexBanner-title-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="AuthorIndexOverview-container-"]:hover [class*="AuthorIndexOverview-content-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/*Books Tab*/
|
||||
[class*="AuthorDetailsSeason-bookType-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="AuthorDetailsSeason-books-"] {
|
||||
@ -1231,7 +1232,7 @@ input[type=password] {
|
||||
|
||||
[class*="BookshelfBook-book-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
;
|
||||
}
|
||||
|
||||
@ -1244,18 +1245,18 @@ input[type=password] {
|
||||
[class*="BookFileEditorTableContent-filesTable-"] {
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
border-top: 1px solid rgb(255 255 255 / 50%);
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/*Series Tab*/
|
||||
[class*="AuthorDetailsSeries-bookType-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="AuthorDetailsSeries-collapseButtonContainer-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="AuthorDetailsSeries-bookTypeLabel-"] {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
color: var(--text);
|
||||
@ -70,20 +71,20 @@ h6,
|
||||
|
||||
.nav-link.active:hover,
|
||||
.nav-link.active:focus {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link:focus:not(.nav-link.active),
|
||||
.navbar-light .navbar-nav .nav-link:hover:not(.nav-link.active) {
|
||||
color: var(--text-hover);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-vertical.navbar-expand-md.fixed-left {
|
||||
left: 0;
|
||||
border-width: 0 1px 0 0;
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -122,7 +123,7 @@ h6,
|
||||
.fade {
|
||||
-webkit-transition: opacity .15s linear;
|
||||
transition: opacity .15s linear;
|
||||
background: rgba(0, 0, 0, 0.15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
@ -140,7 +141,7 @@ h6,
|
||||
|
||||
.bg-white,
|
||||
.footer {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
@ -182,7 +183,7 @@ h6,
|
||||
/* FORMS */
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
opacity: 1;
|
||||
border: 1px solid transparent;
|
||||
color: gray;
|
||||
@ -190,12 +191,12 @@ h6,
|
||||
|
||||
.form-control-alternative,
|
||||
.has-danger .form-control {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.form-control-alternative:focus {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: var(--transparency-dark-50);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
@ -203,7 +204,7 @@ h6,
|
||||
}
|
||||
|
||||
.has-success .form-control {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--transparency-dark-50);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@ -236,7 +237,7 @@ h6,
|
||||
|
||||
.react-dropdown-select.dropdown {
|
||||
color: var(--text);
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.react-dropdown-select.dropdown .react-dropdown-select-item-selected {
|
||||
@ -279,7 +280,7 @@ h6,
|
||||
.btn-default,
|
||||
.btn-default:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -287,14 +288,14 @@ h6,
|
||||
.btn-default:not(:disabled):not(.disabled):active,
|
||||
.show>.btn-default.dropdown-toggle {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
background-color: var(--transparency-dark-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn-default.disabled,
|
||||
.btn-default:disabled {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
border-color: transparent;
|
||||
opacity: .5;
|
||||
}
|
||||
@ -327,19 +328,19 @@ h6,
|
||||
}
|
||||
|
||||
#root>div>div.mt--8.pb-5.container>div>div>div {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
#root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(1)>div>input,
|
||||
#root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(2)>div>input,
|
||||
#root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(3)>div>input {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: 10px solid transparent;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: var(--text);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
@ -381,7 +382,7 @@ h6,
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -393,6 +394,6 @@ h6,
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
@ -12,6 +12,7 @@
|
||||
|
||||
@import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css);
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body,
|
||||
.tableScrollContainer,
|
||||
@ -78,7 +79,7 @@ a:hover {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -90,7 +91,7 @@ a:hover {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -142,34 +143,34 @@ UL.jqueryFileTree A,
|
||||
|
||||
/* NAVBAR */
|
||||
.bt-navbar {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.bt-navbar .btn.dropdown-toggle {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.bt-navbar .btn.dropdown-toggle:hover {
|
||||
background-color: rgb(255 255 255 / 16%);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.bt-navbar .btn.btn-tab.active,
|
||||
.bt-navbar .btn.btn-tab:active {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom-color: rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
.bt-navbar .btn:hover {
|
||||
background-color: rgb(255 255 255 / 8%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.bt-navbar .btn#try-pro-button {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
color: var(--button-text);
|
||||
}
|
||||
|
||||
.bt-navbar .btn#try-pro-button:hover {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.bt-navbar .btn.btn-tab {
|
||||
@ -206,12 +207,12 @@ UL.jqueryFileTree A,
|
||||
|
||||
.dropdown-menu li a:focus,
|
||||
.dropdown-menu li a:hover {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
#columns-context .bt-checkbox:hover {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.context-menu .bt-checkbox label,
|
||||
@ -229,12 +230,12 @@ UL.jqueryFileTree A,
|
||||
}
|
||||
|
||||
.sync-level .add-folder-mode li.selected a {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.sync-level .add-folder-mode li:not(.selected) a:focus,
|
||||
.sync-level .add-folder-mode li:not(.selected) a:hover {
|
||||
background-color: rgb(255 255 255 / .08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.sync-level .add-folder-mode .btn-group {
|
||||
@ -244,14 +245,14 @@ UL.jqueryFileTree A,
|
||||
button.selectpicker.btn-default {
|
||||
border-color: #ccc0 !important;
|
||||
color: var(--text) !important;
|
||||
background-color: rgb(0 0 0 / 25%) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none;
|
||||
background: rgb(0 0 0 / 50%) !important;
|
||||
background: var(--transparency-dark-50) !important;
|
||||
}
|
||||
|
||||
.animating {
|
||||
@ -331,7 +332,7 @@ button.selectpicker.btn-default {
|
||||
.bt-navbar #choose-share-type-menu .container-fluid .menu-item:hover,
|
||||
.bt-navbar .choose-dropdown-menu .container-fluid .menu-item:focus,
|
||||
.bt-navbar .choose-dropdown-menu .container-fluid .menu-item:hover {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
|
||||
}
|
||||
|
||||
@ -367,7 +368,7 @@ button.selectpicker.btn-default {
|
||||
|
||||
.context-menu li a:focus,
|
||||
.context-menu li a:hover {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -387,7 +388,7 @@ button.selectpicker.btn-default {
|
||||
}
|
||||
|
||||
#general-settings #languagedrop {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
@ -454,17 +455,17 @@ button.selectpicker.btn-default {
|
||||
}
|
||||
|
||||
#choose-product-dialog .product-container .product {
|
||||
background-color: rgb(255 255 255 / 0.08);
|
||||
background-color: var(--transparency-light-10);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.modal-header .close:hover {
|
||||
background: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
ul.jqueryFileTree a.active,
|
||||
ul.jqueryFileTree a:hover {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -506,7 +507,7 @@ ul.jqueryFileTree a:hover {
|
||||
#file-sharing-content .shareOptionsContainer .shareOption:hover,
|
||||
#sharing-content .shareOptionsContainer .shareOption:hover,
|
||||
.sharing-dialog-content .shareOptionsContainer .shareOption:hover {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -561,7 +562,7 @@ ul.jqueryFileTree a:hover {
|
||||
.modal-filter .btn:hover,
|
||||
.modal-input .btn:focus,
|
||||
.modal-filter animating {
|
||||
background: rgb(255 255 255 / .08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
/* PAGES */
|
||||
@ -582,7 +583,7 @@ ul.jqueryFileTree a:hover {
|
||||
#historyContainer .table-filter-panel,
|
||||
.resizableTableContainer .table-filter-panel,
|
||||
.tableContainerWithFilterPanel .table-filter-panel {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
@ -592,7 +593,7 @@ ul.jqueryFileTree a:hover {
|
||||
|
||||
/* FOOTER */
|
||||
#sync-core-state {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
border-top: 1px solid rgb(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
@ -624,7 +625,7 @@ ul.jqueryFileTree a:hover {
|
||||
#statusPanel .nav-pills a.tab-button:focus,
|
||||
#statusPanel .nav-pills a.tab-button:hover,
|
||||
#statusPanel .nav-pills .active>a {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
#statusPanel .tab-content {
|
||||
@ -632,7 +633,7 @@ ul.jqueryFileTree a:hover {
|
||||
}
|
||||
|
||||
#statusPanel .chart-wrapper {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
border-right: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
@ -666,12 +667,12 @@ ul.jqueryFileTree a:hover {
|
||||
|
||||
/* SETTINGS */
|
||||
.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button.active {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
color: rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) .txt-button {
|
||||
@ -692,12 +693,12 @@ ul.jqueryFileTree a:hover {
|
||||
|
||||
.settings-tabs-wrapper .settings-tabs-buttons {
|
||||
border-right: 1px solid rgb(255 255 255 / 10%);
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* IDENTITY */
|
||||
#my-devices .my-devices .single-my-device:hover:not(.disabled) {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
#my-devices .my-devices .link-device-block #device-to-qr .device-link {
|
||||
@ -745,20 +746,20 @@ ul.jqueryFileTree a:hover {
|
||||
|
||||
.transfer-table .transfer-row .optionsColumn .options-button.active,
|
||||
.transfer-table .transfer-row .optionsColumn .options-button:hover {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-control {
|
||||
color: var(--text) !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: 1px solid transparent !important;
|
||||
box-shadow: none !important;
|
||||
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: rgba(0, 0, 0, .5) !important;
|
||||
background: var(--transparency-dark-50) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -766,13 +767,13 @@ ul.jqueryFileTree a:hover {
|
||||
#advanced-settings-dialog .verticalScrollContainer tr:active,
|
||||
#advanced-settings-dialog .verticalScrollContainer tr:focus,
|
||||
#advanced-settings-dialog .verticalScrollContainer tr:hover {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.table-hover>tbody>tr.active,
|
||||
.table-hover>tbody>tr:hover:not(.no-hover) {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
@import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,300);
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto' !important
|
||||
@ -49,7 +50,7 @@ div#preload {
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
@ -67,7 +68,7 @@ div#cover {
|
||||
}
|
||||
|
||||
div#msg {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-top: 1px solid #3330;
|
||||
border-bottom: 1px solid #0000;
|
||||
font-size: 11px;
|
||||
@ -154,7 +155,7 @@ ul.CMenu li a.dis:hover {
|
||||
}
|
||||
|
||||
ul.CMenu li hr {
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .08);
|
||||
@ -168,13 +169,13 @@ ul.CMenu li a.exp {
|
||||
}
|
||||
|
||||
ul.CMenu li a.exp:hover {
|
||||
background: rgba(255, 255, 255, .08);
|
||||
background: var(--transparency-light-10)
|
||||
;
|
||||
}
|
||||
|
||||
ul.CMenu li a.sel {
|
||||
color: var(--text-hover);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15)
|
||||
}
|
||||
|
||||
ul.CMenu li ul li a.sel {
|
||||
@ -182,7 +183,7 @@ ul.CMenu li ul li a.sel {
|
||||
}
|
||||
|
||||
ul.CMenu li a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
color: var(--text-hover);
|
||||
text-shadow: 0 -1px 0 #000;
|
||||
}
|
||||
@ -207,7 +208,7 @@ ul.CMenu li ul li a.dis:hover {
|
||||
}
|
||||
|
||||
div.stable-body table tbody tr.even:nth-child(2n+1) td {
|
||||
background: rgba(255, 255, 255, 0.08) !important
|
||||
background: var(--transparency-light-10) !important
|
||||
}
|
||||
|
||||
.stable-body td {
|
||||
@ -233,7 +234,7 @@ div.stable-body table tbody tr.even:nth-child(2n+1) td {
|
||||
}
|
||||
|
||||
div#t {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: none;
|
||||
border-bottom: none;
|
||||
padding: 4px 0 2px 0;
|
||||
@ -418,7 +419,7 @@ div#stg-header {
|
||||
|
||||
div#CatList {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-right: 1px solid transparent;
|
||||
border-left: none
|
||||
}
|
||||
@ -537,7 +538,7 @@ div.tab {
|
||||
}
|
||||
|
||||
div#lcont {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
font-family: 'Roboto'
|
||||
}
|
||||
|
||||
@ -549,13 +550,13 @@ div#gcont table td.Header {
|
||||
}
|
||||
|
||||
div#gcont table tr {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
font-family: 'Roboto';
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
div#gcont table tr td {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
div#gcont table {
|
||||
@ -565,11 +566,11 @@ div#gcont table {
|
||||
div.graph_tab {
|
||||
color: var(--text-hover);
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25)
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div.table_tab {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
font-family: 'Roboto'
|
||||
}
|
||||
|
||||
@ -580,14 +581,14 @@ div#modalbg {
|
||||
div#List {
|
||||
margin-right: 6px;
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#FileList,
|
||||
div#TrackerList,
|
||||
div#PeerList,
|
||||
div#Speed {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.dlg-window {
|
||||
@ -614,7 +615,7 @@ a.dlg-close:visited {
|
||||
}
|
||||
|
||||
div.dlg-header {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: none;
|
||||
font-family: 'Roboto';
|
||||
text-transform: uppercase;
|
||||
@ -626,7 +627,7 @@ div.dlg-header {
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
line-height: 11px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
white-space: pre;
|
||||
overflow: scroll;
|
||||
height: 198px;
|
||||
@ -725,7 +726,7 @@ div#tdcont {
|
||||
}
|
||||
|
||||
div#HDivider {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
cursor: e-resize;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
@ -735,7 +736,7 @@ div#HDivider {
|
||||
|
||||
div#RSSList {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
-moz-user-select: none;
|
||||
@ -745,13 +746,13 @@ div#RSSList {
|
||||
|
||||
div#HDivider:hover,
|
||||
div#VDivider:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
div#tcreate textarea#trackers {
|
||||
color: var(--text-hover);
|
||||
border: none !important;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 2px;
|
||||
cursor: text;
|
||||
}
|
||||
@ -761,7 +762,7 @@ input[type="password"],
|
||||
select {
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.25) url(/resources/rutorrent/headers.png) repeat-x scroll 0 -138px;
|
||||
background: var(--transparency-dark-25) url(/resources/rutorrent/headers.png) repeat-x scroll 0 -138px;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
@ -772,7 +773,7 @@ input[type="file"][disabled],
|
||||
select[disabled] {
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.08) url(/resources/rutorrent/headers.png) repeat scroll 0 0 !important;
|
||||
background: var(--transparency-dark-10) url(/resources/rutorrent/headers.png) repeat scroll 0 0 !important;
|
||||
border-radius: 2px;
|
||||
opacity: .2
|
||||
}
|
||||
@ -792,7 +793,7 @@ textarea {
|
||||
#FS_downlink {
|
||||
color: var(--text-hover);
|
||||
border: none !important;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-radius: 2px
|
||||
}
|
||||
|
||||
@ -818,7 +819,7 @@ input.Button:focus {
|
||||
}
|
||||
|
||||
ul#tabbar {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
border: none;
|
||||
color: #606060;
|
||||
height: 24px;
|
||||
@ -957,19 +958,19 @@ div.dlg-window {
|
||||
}
|
||||
|
||||
div#yesnoDlg div.dlg-header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
text-shadow: 0 -1px 0 #000
|
||||
}
|
||||
|
||||
div#stg-header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
text-shadow: 0 -1px 0 #000;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
div#dlgHelp-header,
|
||||
div#dlgHelp div.dlg-header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
text-shadow: 0 -1px 0 #000
|
||||
}
|
||||
|
||||
@ -980,7 +981,7 @@ div#tadd {
|
||||
}
|
||||
|
||||
div#tadd-header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid #3330;
|
||||
text-shadow: 0 -1px 0 #000;
|
||||
}
|
||||
@ -1024,7 +1025,7 @@ Input.TextboxLarge {
|
||||
}
|
||||
|
||||
div.tab {
|
||||
background-color: rgba(0, 0, 0, 0.25)
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
div#t div#ind {
|
||||
@ -1063,7 +1064,7 @@ span#loadimg {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -1075,7 +1076,7 @@ span#loadimg {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -1086,19 +1087,19 @@ input#add_button {
|
||||
}
|
||||
|
||||
div#lcont div.std {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
height: 17px;
|
||||
line-height: 17px;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
div#lcont div.std:nth-child(2n+1) {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
#StatusBar {
|
||||
border-top: 1px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
color: #ccc;
|
||||
font-family: Roboto
|
||||
}
|
||||
@ -1232,7 +1233,7 @@ span.det {
|
||||
|
||||
.stable-head {
|
||||
color: var(--text-hover);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
border: none;
|
||||
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0);
|
||||
font-family: Ubuntu;
|
||||
@ -1296,13 +1297,13 @@ div#tdcont .stable {
|
||||
}
|
||||
|
||||
.stable-body tr.selected td {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
color: var(--text-hover);
|
||||
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
div.stable-body table tbody tr.even td {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
div.stable-body table tbody tr.even td:nth-child(2n+1) {
|
||||
@ -1478,7 +1479,7 @@ div.graph_tab {
|
||||
}
|
||||
|
||||
div#tcreate div.dlg-header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid transparent;
|
||||
text-shadow: 0px -1px 0px #000;
|
||||
background-image: none !important;
|
||||
@ -1494,7 +1495,7 @@ div#dlgAddRSS {
|
||||
|
||||
div#dlgAddRSS-header,
|
||||
div#dlgAddRSS div.dlg-header {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid transparent;
|
||||
text-shadow: 0px -1px 0px #000;
|
||||
background-image: none !important;
|
||||
@ -1746,7 +1747,7 @@ div#logoffDlg div.dlg-header {
|
||||
font-size: 11px;
|
||||
font-family: Tahoma, Arial, Helvetica, sans-serif;
|
||||
cursor: text;
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
@ -1760,13 +1761,13 @@ div#logoffDlg div.dlg-header {
|
||||
|
||||
#dlgEditRatioRules .lf_rru li input.TextboxFocus,
|
||||
#dlgEditRules .lf_rur li input.TextboxFocus {
|
||||
background-color: rgb(255 255 255 / 25%);
|
||||
background-color: var(--transparency-light-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
#dlgEditRatioRules .lf_rru li input.TextboxNormal,
|
||||
#dlgEditRules .lf_rur li input.TextboxNormal {
|
||||
background-color: rgb(255 255 255 / .08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1782,5 +1783,5 @@ div#logoffDlg div.dlg-header {
|
||||
div#dlgEditRules-header,
|
||||
#dlgEditRatioRules-header,
|
||||
div#dlgEditRules div.dlg-header {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
@ -10,6 +10,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color) !important;
|
||||
@ -106,7 +107,7 @@ a:focus {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -118,7 +119,7 @@ a:focus {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -133,7 +134,7 @@ hr {
|
||||
}
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
@ -169,7 +170,7 @@ hr {
|
||||
.navbar-inverse .navbar-nav>.open>a,
|
||||
.navbar-inverse .navbar-nav>.open>a:hover,
|
||||
.navbar-inverse .navbar-nav>.open>a:focus {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
.ui-slider-horizontal,
|
||||
@ -183,7 +184,7 @@ hr {
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -214,7 +215,7 @@ hr {
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-toggle {
|
||||
@ -224,7 +225,7 @@ hr {
|
||||
.dropdown-menu>li>a:hover,
|
||||
.dropdown-menu>li>a:focus {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@ -504,7 +505,7 @@ td.delete .dropdown>a .caret {
|
||||
}
|
||||
|
||||
.table-striped>tbody>tr:nth-of-type(odd) {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
tbody.no-downloads tr td {
|
||||
@ -524,15 +525,15 @@ tbody>tr>td:first-child {
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important
|
||||
background: var(--transparency-dark-25) !important
|
||||
}
|
||||
|
||||
table:hover {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.table-hover>tbody>tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.07) !important;
|
||||
background-color: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -555,7 +556,7 @@ tr td.row-extra-text,
|
||||
|
||||
.table-messages .table-messages-remove {
|
||||
border-bottom: 1px solid transparent !important;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
.progress .progress-bar .fileDetails {
|
||||
@ -601,7 +602,7 @@ tr td.row-extra-text,
|
||||
|
||||
.multioperations-selector {
|
||||
border: 1px solid transparent !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
#history-options .hover-button {
|
||||
@ -610,7 +611,7 @@ tr td.row-extra-text,
|
||||
|
||||
#history-tab .table>tbody>tr:nth-of-type(2n+1),
|
||||
.table-striped>tbody>tr:nth-of-type(2n+1) {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
background: var(--transparency-light-05);
|
||||
}
|
||||
|
||||
.pagination>li>a,
|
||||
@ -653,7 +654,7 @@ tr td.row-extra-text,
|
||||
.pagination>.disabled>a:hover,
|
||||
.pagination>.disabled>a:focus {
|
||||
color: var(--text-muted);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@ -664,7 +665,7 @@ tr td.row-extra-text,
|
||||
|
||||
.form-control {
|
||||
color: var(--text-hover);
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
@ -691,13 +692,13 @@ tr td.row-extra-text,
|
||||
.nav-tabs>li.active>a:hover,
|
||||
.nav-tabs>li.active>a:focus {
|
||||
color: #555;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.nav>li>a:hover,
|
||||
.nav>li>a:focus {
|
||||
text-decoration: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.badge {
|
||||
@ -723,7 +724,7 @@ tr td.row-extra-text,
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>.open>a {
|
||||
background-color: hsla(0, 0%, 0%, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a:hover,
|
||||
@ -732,12 +733,12 @@ tr td.row-extra-text,
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav>li>a.active {
|
||||
background-color: hsla(0, 0%, 0%, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
}
|
||||
|
||||
@ -747,7 +748,7 @@ tr td.row-extra-text,
|
||||
|
||||
.colmask {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.padTable:not(.ui-sortable) {
|
||||
@ -775,7 +776,7 @@ table {
|
||||
|
||||
.alt,
|
||||
.infoTableSeperator.alt {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
@ -807,14 +808,14 @@ table {
|
||||
|
||||
.form-control.advanced-button.config-hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.form-control.advanced-button.config-hover:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
background: var(--transparency-light-30);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
@ -834,7 +835,7 @@ input[type="date"],
|
||||
textarea,
|
||||
select {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
border-radius: 3px !important;
|
||||
color: var(--text-hover) !important;
|
||||
outline: none;
|
||||
@ -882,7 +883,7 @@ input[type="text"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="week"]:focus {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
border: none;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
@ -979,12 +980,12 @@ select[disabled]:hover {
|
||||
|
||||
/*Folder modal*/
|
||||
.list-group-item {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.example {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
/*modal*/
|
||||
@ -1032,7 +1033,7 @@ select[disabled]:hover {
|
||||
.modal-body>.nav-tabs>li.active>a:hover,
|
||||
.modal-body>.nav-tabs>li.active>a:focus {
|
||||
color: rgb(var(--accent-color)) !important;
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
border: transparent;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
@ -1044,7 +1045,7 @@ select[disabled]:hover {
|
||||
|
||||
.modal-body>.nav>li>a:hover,
|
||||
.modal-body>.nav>li>a:focus {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
@ -1080,11 +1081,11 @@ select[disabled]:hover {
|
||||
|
||||
#modal-options .table-server-connections thead {
|
||||
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
#modal-options .table-server-connections thead {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
#modal-item-files .item-files-table .progress small {
|
||||
@ -1102,7 +1103,7 @@ a.list-group-item:focus,
|
||||
button.list-group-item:focus {
|
||||
text-decoration: none;
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@ -1110,7 +1111,7 @@ button.list-group-item:focus {
|
||||
}
|
||||
|
||||
.fade.in {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: var(--transparency-dark-60)
|
||||
}
|
||||
|
||||
.fade {
|
||||
@ -1143,11 +1144,11 @@ fieldset[disabled] .form-control {
|
||||
}
|
||||
|
||||
.language:hover {
|
||||
background-color: rgb(255 255 255 / 10%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.container .quoteBlock {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
#content a,
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--calendar-tv-unaired-premiere: 53 197 244;
|
||||
@ -178,7 +179,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"]:active,
|
||||
@ -195,7 +196,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AutoSuggestInput-suggestionHighlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="CheckInput-primaryIsChecked-"] {
|
||||
@ -211,7 +212,7 @@ a:hover {
|
||||
/* HEADER */
|
||||
|
||||
[class*="PageHeader-header-"] {
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -225,7 +226,7 @@ a:hover {
|
||||
|
||||
[class*="EpisodeDetailsModalContent-selectedTab-"] {
|
||||
border-color: var(--accent-color-hover);
|
||||
background-color: rgb(0 0 0 / 40%);
|
||||
background: var(--transparency-dark-40);
|
||||
}
|
||||
|
||||
[class*="SeriesSearchInput-sectionTitle-"] {
|
||||
@ -247,24 +248,24 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="SeriesSearchInput-highlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="SeriesSearchInput-seriesContainer-"]::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* SIDE MENU */
|
||||
[class*="PageSidebar-sidebarContainer-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="PageSidebar-sidebar-"] {
|
||||
@ -287,7 +288,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="PageSidebarItem-isActiveParentLink-"] {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@ -328,7 +329,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="SeriesIndexOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="SeriesIndexOverview-link-"]:hover {
|
||||
@ -336,7 +337,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ProgressBar-container-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
|
||||
@ -348,7 +349,7 @@ a:hover {
|
||||
[class*="SeriesDetailsSeason-season-"],
|
||||
[class*="SeriesDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="SeriesDetailsSeason-episodes-"] {
|
||||
@ -403,7 +404,7 @@ a:hover {
|
||||
|
||||
[class*="SeriesDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
|
||||
@ -520,7 +521,7 @@ a:hover {
|
||||
|
||||
/* Table options*/
|
||||
[class*="TableOptionsColumn-column-"] {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
}
|
||||
@ -534,17 +535,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="TableRow-row-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="TableRowCell-cell-"] {
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* TOP MENU SERIES */
|
||||
[class*="PageToolbar-toolbar-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -574,7 +575,7 @@ a:hover {
|
||||
[class*="SeriesIndexPoster-title-"],
|
||||
[class*="SeriesIndexPoster-nextAiring-"],
|
||||
[class*="SeriesIndexPosterInfo-info-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -601,13 +602,13 @@ a:hover {
|
||||
|
||||
[class*="MenuItem-menuItem-"]:hover,
|
||||
[class*="MenuItem-menuItem-"]:focus {
|
||||
background: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class*="MenuItemSeparator-separator-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* ALPHABET JUMP BAR */
|
||||
@ -618,12 +619,12 @@ a:hover {
|
||||
/* MINI RIGHT SCROLL BAR */
|
||||
[class*="OverlayScroller-thumb-"],
|
||||
[class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="OverlayScroller-thumb-"]:hover,
|
||||
[class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
/* ADD NEW */
|
||||
@ -647,12 +648,12 @@ a:hover {
|
||||
|
||||
[class*="EnhancedSelectInputOption-isSelected-"],
|
||||
[class*="EnhancedSelectInputOption-isSelected-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.20) !important;
|
||||
background: var(--transparency-light-20) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="EnhancedSelectInputOption-option-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="HintedSelectInputOption-hintText-"] {
|
||||
@ -689,7 +690,7 @@ a:hover {
|
||||
[class*="AddNewSeries-searchIconContainer-"],
|
||||
[class*="CheckInput-isIndeterminate-"] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -712,7 +713,7 @@ a:hover {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="TagInput-input-"][class*="TagInput-isFocused-"] {
|
||||
@ -736,7 +737,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AddNewSeriesSearchResult-underlay-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="AddNewSeriesSearchResult-year-"] {
|
||||
@ -761,17 +762,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="VirtualTableRow-row-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/* Drop down menu/button*/
|
||||
[class*="ImportSeriesSelectSeries-button-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="ImportSeriesSearchResult-series-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="ImportSeriesSelectSeries-content-"],
|
||||
@ -796,7 +797,7 @@ a:hover {
|
||||
/* FOOTER */
|
||||
[class*="PageContentFooter-contentFooter-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -804,7 +805,7 @@ a:hover {
|
||||
|
||||
[class*="SeasonPassSeason-season-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="SeasonPassSeason-allEpisodes-"] {
|
||||
@ -883,18 +884,18 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="DayOfWeek-dayOfWeek-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-dayOfMonth-"] {
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, .08);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-isToday-"],
|
||||
[class*="DayOfWeek-isToday-"] {
|
||||
background-color: hsla(0, 0%, 100%, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="CalendarDay-day-"],
|
||||
@ -939,7 +940,7 @@ a:hover {
|
||||
|
||||
/* calendar agenda */
|
||||
[class*="AgendaEvent-event-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/*QUEUE PAGE */
|
||||
@ -972,25 +973,25 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.35);
|
||||
background: var(--transparency-light-35);
|
||||
}
|
||||
|
||||
/* PROFILES */
|
||||
[class*="Card-card-"],
|
||||
[class*="QualityProfiles-addQualityProfile-"] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1014,12 +1015,12 @@ a:hover {
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
|
||||
[class*="LanguageProfileItem-languageProfileItem-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="KeyValueListInputItem-keyInput-"],
|
||||
@ -1062,19 +1063,19 @@ a:hover {
|
||||
/* LOG */
|
||||
[class*="Alert-info-"] {
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: #FFC107;
|
||||
}
|
||||
|
||||
/* Login Page */
|
||||
|
||||
.panel-body {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
@ -1084,7 +1085,7 @@ a:hover {
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1105,7 +1106,7 @@ input[type=password] {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* Custom filter */
|
||||
@ -1114,7 +1115,7 @@ input[type=password] {
|
||||
}
|
||||
|
||||
[class*="CustomFilter-customFilter-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/* Scene information */
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--v-primary-base: rgb(var(--accent-color));
|
||||
@ -40,7 +41,7 @@ h4 {
|
||||
|
||||
.v-toolbar__content,
|
||||
.v-toolbar__extension {
|
||||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||
background: var(--transparency-dark-60) !important;
|
||||
}
|
||||
|
||||
p a {
|
||||
@ -146,7 +147,7 @@ p a {
|
||||
|
||||
.flex.md3 .application .theme--dark.v-card,
|
||||
.theme--dark .v-card {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -156,7 +157,7 @@ p a {
|
||||
}
|
||||
|
||||
.theme--dark.v-text-field--solo>.v-input__control>.v-input__slot {
|
||||
background: rgb(0 0 0 / 0.50);
|
||||
background: var(--transparency-dark-50);
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color);
|
||||
@ -131,7 +132,7 @@ a.no-highlight:hover,
|
||||
.nav>li.active>a:hover,
|
||||
.nav>li.active>a:focus {
|
||||
color: #f9be03;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.nav>li>a {
|
||||
@ -140,14 +141,14 @@ a.no-highlight:hover,
|
||||
|
||||
.nav>li>a:hover,
|
||||
.nav>li>a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.nav .open>a,
|
||||
.nav .open>a:hover,
|
||||
.nav .open>a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: rgb(var(--accent-color));
|
||||
}
|
||||
|
||||
@ -169,12 +170,12 @@ a.no-highlight:hover,
|
||||
|
||||
.dropdown-menu>li>a:hover,
|
||||
.dropdown-menu>li>a:focus {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.dropdown-menu .divider {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
select,
|
||||
@ -205,15 +206,15 @@ select,
|
||||
.dashboard-stats-background,
|
||||
.dashboard-activity-background,
|
||||
.dashboard-activity-poster-container {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.dashboard-activity-progress-bar {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.dashboard-activity-progress .buffer-bar {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
.dashboard-activity-metadata-user a {
|
||||
@ -275,7 +276,7 @@ select,
|
||||
}
|
||||
|
||||
.btn-danger.btn-edit {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
.btn-form {
|
||||
@ -303,18 +304,18 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.react-selectize.root-node .react-selectize-control,
|
||||
.selectize-control.form-control .selectize-input {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
/*Formcontrol */
|
||||
select.form-control,
|
||||
div.form-control .selectize-input {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@ -326,11 +327,11 @@ div.form-control .selectize-input {
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
background-color: rgba(236, 236, 236, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
textarea:focus,
|
||||
@ -350,7 +351,7 @@ input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.uneditable-input:focus {
|
||||
color: var(--text-hover);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
@ -362,22 +363,22 @@ input[type="color"]:focus,
|
||||
|
||||
/* Settings table cards */
|
||||
.table-card-header {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-top: 1px solid #00000000;
|
||||
}
|
||||
|
||||
.table-card-back {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
table.display thead th {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
table.display thead tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
/*Settings menu */
|
||||
@ -391,24 +392,24 @@ table.display thead tr:hover {
|
||||
}
|
||||
|
||||
.nav-settings>li {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
.nav-settings>.active>a,
|
||||
.nav-settings>.active>a:hover,
|
||||
.nav-settings>.active>a:focus {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.nav-settings>li>a:hover,
|
||||
.nav-settings>li>a:focus {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-top: 1px solid #00000000;
|
||||
}
|
||||
|
||||
@ -418,12 +419,12 @@ table.display thead tr:hover {
|
||||
|
||||
.card-handle {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/*Notification agents menu */
|
||||
.stacked-configs>li {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.stacked-configs>li>span {
|
||||
@ -435,7 +436,7 @@ table.display thead tr:hover {
|
||||
.stacked-configs>li>span:hover,
|
||||
.stacked-configs>li>span:focus {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.stacked-configs>li>span>a.toggle-left,
|
||||
@ -449,17 +450,17 @@ span>a.active,
|
||||
}
|
||||
|
||||
.inline-pre {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* Summary containers */
|
||||
.summary-container .table-card-header,
|
||||
.summary-container .table-card-back {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45)
|
||||
}
|
||||
|
||||
.summary-navbar {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* pagination */
|
||||
@ -469,7 +470,7 @@ span>a.active,
|
||||
.pagination>.disabled>a,
|
||||
.pagination>.disabled>a:hover,
|
||||
.pagination>.disabled>a:focus {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: #00000000;
|
||||
}
|
||||
|
||||
@ -491,7 +492,7 @@ span>a.active,
|
||||
|
||||
/* Graphs */
|
||||
.graphs-instance {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
@ -558,7 +559,7 @@ span>a.active,
|
||||
#newsletter-config-modal .nav-tabs>li.active>a:hover,
|
||||
#newsletter-config-modal .nav-tabs>li.active>a:focus {
|
||||
color: var(--text-hover);
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45)
|
||||
}
|
||||
|
||||
#notifier-config-modal .nav-tabs>li.active>a,
|
||||
@ -574,7 +575,7 @@ span>a.active,
|
||||
#notifier-config-modal .nav-tabs>li>a:hover,
|
||||
#newsletter-config-modal .nav-tabs>li>a:hover {
|
||||
border-color: #0000;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -584,7 +585,7 @@ span>a.active,
|
||||
}
|
||||
|
||||
.accordion {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
.accordion li .link {
|
||||
@ -594,21 +595,21 @@ span>a.active,
|
||||
|
||||
.accordion li .link:hover,
|
||||
.accordion li .link:hover i.fa {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.submenu {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
/* Stream info */
|
||||
.stream-info {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/* Edit metadata */
|
||||
.item-children-section-title {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
border-bottom: 1px solid #00000000;
|
||||
border-top: 1px solid #00000000;
|
||||
}
|
||||
@ -616,11 +617,11 @@ span>a.active,
|
||||
/* Mobile */
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@ -10,12 +10,14 @@
|
||||
/* Made by @gilbN */
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
#chat .userlist .names {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
#chat .user-mode:before {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@ -37,7 +39,7 @@
|
||||
#viewport.menu-dragging #sidebar,
|
||||
#viewport.menu-open #sidebar {
|
||||
box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5);
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
background: var(--transparency-dark-85)
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,20 +55,20 @@
|
||||
}
|
||||
|
||||
#form {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
border-color: #0086ff00;
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
#sidebar .active,
|
||||
#sidebar .active:hover {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
#chat .msg.motd .text,
|
||||
code,
|
||||
.irc-monospace {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
@ -78,7 +80,7 @@ code,
|
||||
}
|
||||
|
||||
#chat .msg[data-type=motd] .text {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* Dropdown menu */
|
||||
@ -106,7 +108,7 @@ code,
|
||||
.textcomplete-item:focus,
|
||||
.textcomplete-item:hover,
|
||||
.textcomplete-menu .active {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
transition: none;
|
||||
outline: 0;
|
||||
}
|
||||
@ -125,12 +127,12 @@ code,
|
||||
}
|
||||
|
||||
#chat .userlist .count {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background: var(--transparency-dark-60);
|
||||
}
|
||||
|
||||
#footer button:hover,
|
||||
#sidebar .chan:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
#settings .extra-help:before {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
@import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
|
||||
* {
|
||||
@ -67,7 +68,7 @@ body {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -79,7 +80,7 @@ body {
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -101,7 +102,7 @@ div#torrent_inspector #inspector_header #torrent_inspector_name,
|
||||
|
||||
/* Toolbar */
|
||||
div#toolbar {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
@ -245,7 +246,7 @@ div#toolbar>div#toolbar-inspector:before {
|
||||
#statusbar {
|
||||
border-bottom: 1px solid transparent;
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25)
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
#statusbar #filter input#torrent_search {
|
||||
@ -285,7 +286,7 @@ div#toolbar>div#toolbar-inspector:before {
|
||||
|
||||
ul.torrent_list,
|
||||
ul.torrent_list li.torrent.even {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
ul.torrent_list li.torrent div.torrent_name {
|
||||
@ -293,14 +294,14 @@ ul.torrent_list li.torrent div.torrent_name {
|
||||
}
|
||||
|
||||
ul.torrent_list li.torrent.selected {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
ul.torrent_list li.torrent {
|
||||
border-bottom: 1px solid rgba(204, 204, 204, 0.1);
|
||||
padding: 4px 30px 5px 14px;
|
||||
color: var(--text);
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
@ -324,7 +325,7 @@ div#upload_container div.dialog_window div.dialog_message label {
|
||||
|
||||
input {
|
||||
color: var(--text-hover);
|
||||
background: rgba(0, 0, 0, .25)
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
#add-dialog-folder-input,
|
||||
@ -421,7 +422,7 @@ div.dialog_container div.dialog_window a:active {
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active {
|
||||
border: 1px solid transparent;
|
||||
background: rgba(255, 255, 255, .1) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
font-weight: normal;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -444,7 +445,7 @@ div.dialog_container div.dialog_window a:active {
|
||||
.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default {
|
||||
border: 1px solid transparent;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
font-weight: normal;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -482,7 +483,7 @@ div#torrent_inspector {
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>* {
|
||||
border-color: transparent;
|
||||
height: auto;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector div.inspector_torrent_file_list_entry_name,
|
||||
@ -495,7 +496,7 @@ div#torrent_inspector div.tracker_host {
|
||||
/*Info button*/
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:hover:before {
|
||||
@ -514,7 +515,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-inf
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active,
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info.selected {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active,
|
||||
@ -535,7 +536,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-inf
|
||||
/*Peers Button*/
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:hover:before {
|
||||
@ -554,7 +555,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-pee
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active,
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers.selected {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active,
|
||||
@ -575,7 +576,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-pee
|
||||
/*Tracker Button*/
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:hover:before {
|
||||
@ -594,7 +595,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-tra
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active,
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers.selected {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active,
|
||||
@ -615,7 +616,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-tra
|
||||
/*Files Button*/
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:hover:before {
|
||||
@ -634,7 +635,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-fil
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active,
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files.selected {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active,
|
||||
@ -653,7 +654,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-fil
|
||||
}
|
||||
|
||||
tr.inspector_peer_entry.odd {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* Priority buttons */
|
||||
@ -783,13 +784,13 @@ div.file-priority-radiobox>div.high.selectedbefore {
|
||||
}
|
||||
|
||||
div#torrent_inspector li.inspector_tracker_entry.odd {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/*Bottom Toolbar*/
|
||||
div.torrent_footer {
|
||||
border-top: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: none;
|
||||
height: 30px;
|
||||
}
|
||||
@ -973,7 +974,7 @@ ul.torrent_list li.torrent.compact div.torrent_name {
|
||||
.ui-widget-header .ui-state-focus {
|
||||
border: 1px solid transparent;
|
||||
background: none;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
@ -95,7 +96,7 @@ pre {
|
||||
}
|
||||
|
||||
#header .block {
|
||||
background-color: rgb(0 0 0 / 20%);
|
||||
background: var(--transparency-dark-20);
|
||||
border-radius: 0px 0px 0px 25px;
|
||||
}
|
||||
|
||||
@ -122,12 +123,12 @@ pre {
|
||||
}
|
||||
|
||||
textarea {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
/*DASHBOARD*/
|
||||
table.share_status.dashboard {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
border: 1px solid rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
@ -153,7 +154,7 @@ table.tablesorter thead tr th {
|
||||
.sys,
|
||||
.usage-disk,
|
||||
.usage-bar {
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35)
|
||||
}
|
||||
|
||||
.usage-disk>span:first-child {
|
||||
@ -177,12 +178,12 @@ table.tablesorter thead tr th {
|
||||
/*MAIN*/
|
||||
#title {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .25);
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
table.disk_status thead tr:first-child td,
|
||||
@ -193,11 +194,11 @@ table.tablesorter thead tr th,
|
||||
table.tablesorter tbody tr:nth-child(even),
|
||||
table.tablesorter thead tr .tablesorter-headerAsc,
|
||||
table.tablesorter thead tr .tablesorter-headerDesc {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
table.disk_status tbody tr:nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
table.disk_status thead tr:last-child {
|
||||
@ -286,7 +287,7 @@ a.button:hover,
|
||||
/* USERS */
|
||||
div.user-list {
|
||||
border: 1px solid rgba(255, 255, 255, .15);
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
background: var(--transparency-light-05);
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
@ -356,8 +357,8 @@ div.tab [type=radio]+label:hover {
|
||||
}
|
||||
|
||||
div.tab [type=radio]+label {
|
||||
border: 1px solid rgb(255 255 255 / 25%);
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
border: 1px solid var(--transparency-light-25);
|
||||
background: var(--transparency-dark-50);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -382,7 +383,7 @@ background-color: var(--text);
|
||||
}
|
||||
|
||||
.ca_holderDocker {
|
||||
background-color: rgb(0 0 0 / 10%) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
border-color: rgb(0 0 0 / 25%) !important;
|
||||
}
|
||||
|
||||
@ -456,12 +457,12 @@ li.caMenuItem:hover {
|
||||
}
|
||||
|
||||
.ca_holder {
|
||||
background-color: rgb(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.ca_holder:hover {
|
||||
background-color: rgba(0, 0, 0, 0.45) !important;
|
||||
background: var(--transparency-dark-45) !important;
|
||||
}
|
||||
|
||||
.supportButton,
|
||||
@ -593,7 +594,7 @@ span .maxPerPage {
|
||||
|
||||
#searchBox,
|
||||
.searchSubmit {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
background: var(--transparency-light-05) !important;
|
||||
}
|
||||
|
||||
/* CA slide in menu */
|
||||
@ -637,7 +638,7 @@ div.tabs {
|
||||
}
|
||||
|
||||
.dropdown-menu .divider {
|
||||
background-color: rgb(255 255 255 / 10%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
|
||||
}
|
||||
|
||||
@ -645,12 +646,12 @@ div.tabs {
|
||||
.dropdown-menu li>a:focus,
|
||||
.dropdown-submenu:hover>a {
|
||||
color: var(--text-hover) !important;
|
||||
background: rgb(255 255 255 / 10%) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
/*VM MANAGER*/
|
||||
div.shade-black {
|
||||
background-color: rgb(0 0 0 / 15%) !important;
|
||||
background-color: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
/* MODAL */
|
||||
@ -685,7 +686,7 @@ blockquote {
|
||||
border-top: 2px solid rgb(0 0 0 / 25%);
|
||||
border-bottom: 2px solid rgb(0 0 0 / 25%);
|
||||
color: var(--text);
|
||||
background-color: rgb(0 0 0 / 10%);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/* MY SERVERS */
|
||||
@ -734,7 +735,7 @@ unraid-authed::part(div[data-v-050c892a] > button) {
|
||||
|
||||
/* Edit template*/
|
||||
#contDescription {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
padding: 1%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body,
|
||||
.dark {
|
||||
@ -80,21 +81,21 @@ a,
|
||||
.shadow-box,
|
||||
.dark .shadow-box {
|
||||
box-shadow: 0px 0px 20px 10px #0000001a;
|
||||
background: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.list .item:hover {
|
||||
background-color: rgba(255, 255, 255, .15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
}
|
||||
|
||||
.dark .list .item.active,
|
||||
.list .item.active {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.dark .hp-bar-big .beat.empty,
|
||||
.hp-bar-big .beat.empty {
|
||||
background-color: rgba(255, 255, 255, .45) !important;
|
||||
background: var(--transparency-light-45) !important;
|
||||
}
|
||||
|
||||
|
||||
@ -114,7 +115,7 @@ td {
|
||||
|
||||
.dark .table-hover>tbody>tr:hover,
|
||||
.table-hover>tbody>tr:hover {
|
||||
--bs-table-accent-bg: rgba(0, 0, 0, .2);
|
||||
--bs-table-accent-bg: var(--transparency-dark-20);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -132,7 +133,7 @@ td {
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item:focus {
|
||||
color: var(--text-hover) !important;
|
||||
background-color: rgba(255, 255, 255, .1) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
}
|
||||
|
||||
.dark .dropdown-clear-data ul {
|
||||
@ -144,7 +145,7 @@ td {
|
||||
/* HEADER */
|
||||
.dark header,
|
||||
#app>div>header {
|
||||
background-color: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
border-bottom-color: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
|
||||
@ -268,7 +269,7 @@ td {
|
||||
.form-select,
|
||||
.form-control {
|
||||
color: var(--text);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@ -326,7 +327,7 @@ td {
|
||||
|
||||
.multiselect__option--selected,
|
||||
.dark .multiselect__option--selected {
|
||||
background: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
color: var(--text-hover);
|
||||
font-weight: 700;
|
||||
}
|
||||
@ -340,7 +341,7 @@ td {
|
||||
.dark .multiselect__tags,
|
||||
.multiselect__tags {
|
||||
color: var(--text);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@ -348,7 +349,7 @@ td {
|
||||
.dark .multiselect__single,
|
||||
.multiselect__input,
|
||||
.multiselect__single {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
/* MOBILE */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
||||
@ -49,12 +50,12 @@ html {
|
||||
|
||||
/* SCROLL BAR */
|
||||
#app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
#app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, .25);
|
||||
background: var(--transparency-light-25);
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
@ -102,7 +103,7 @@ p,
|
||||
|
||||
/* CARDS */
|
||||
[class*="theme--"].v-card {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -112,7 +113,7 @@ p,
|
||||
}
|
||||
|
||||
.v-app-bar.v-app-bar--hide-shadow {
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
.v-app-bar.v-app-bar--is-scrolled {
|
||||
@ -132,18 +133,18 @@ p,
|
||||
|
||||
/* SIDE MENU */
|
||||
.v-application .primary {
|
||||
background: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.v-application .secondary {
|
||||
background-color: rgba(255, 255, 255, .15) !important;
|
||||
background: var(--transparency-light-15) !important;
|
||||
border-color: rgba(255, 255, 255, .15) !important;
|
||||
|
||||
}
|
||||
|
||||
[class*="theme--"].v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border {
|
||||
background-color: rgba(0, 0, 0, .12);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
|
||||
@ -164,7 +165,7 @@ p,
|
||||
.v-navigation-drawer--temporary:not(.v-navigation-drawer--close),
|
||||
.v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close),
|
||||
.v-navigation-drawer--temporary:not(.v-navigation-drawer--close) {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
}
|
||||
|
||||
@ -199,7 +200,7 @@ p,
|
||||
}
|
||||
|
||||
[class*="theme--"].v-tabs>.v-tabs-bar {
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
.v-application .white,
|
||||
@ -406,12 +407,12 @@ p,
|
||||
|
||||
/* TABLE */
|
||||
[class*="theme--"].v-data-table {
|
||||
background-color: rgba(0, 0, 0, .65);
|
||||
background: var(--transparency-dark-65);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
[class*="theme--"].v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
|
||||
background: rgb(255 255 255 / 15%);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="theme--"].v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>td:last-child,
|
||||
@ -435,7 +436,7 @@ p,
|
||||
/* TOOLTIP */
|
||||
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title,
|
||||
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background: var(--transparency-dark-70);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
body {
|
||||
background: var(--main-bg-color);
|
||||
@ -72,7 +73,7 @@ content-loading .contentLoading {
|
||||
|
||||
/* NAVBAR */
|
||||
.head {
|
||||
background-color: rgb(0 0 0 / 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
box-shadow: 0 0 0 0px rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
@ -82,23 +83,23 @@ content-loading .contentLoading {
|
||||
|
||||
/* SIDE MENU */
|
||||
.menu .toggle {
|
||||
background: rgb(0 0 0 / .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.menu {
|
||||
background-color: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.menu .item {
|
||||
background: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--button-text);
|
||||
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .0);
|
||||
}
|
||||
|
||||
.menu .item:hover {
|
||||
background: rgb(255 255 255 / .16);
|
||||
background: var(--transparency-light-15);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -136,7 +137,7 @@ content-loading .contentLoading {
|
||||
|
||||
/* PAGES */
|
||||
.sub .settings {
|
||||
background: rgb(255 255 255 / 25%);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
label {
|
||||
@ -150,30 +151,30 @@ label {
|
||||
.fm .sections .section,
|
||||
.playlists .userContainer .fileContainer,
|
||||
.playlists .playlistContainer {
|
||||
background: rgb(255 255 255 / .08);
|
||||
background: var(--transparency-light-10);
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.uas .type:hover {
|
||||
background: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
.sub .rowShow:hover,
|
||||
.uas .repoContainer .repo:hover,
|
||||
.fm .sections .section:hover {
|
||||
background: rgb(255 255 255 / .16);
|
||||
background: var(--transparency-light-15);
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
|
||||
}
|
||||
|
||||
.expanded:hover {
|
||||
background: rgb(255 255 255 / .08) !important;
|
||||
background: var(--transparency-light-10) !important;
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
|
||||
}
|
||||
|
||||
.sub .rowShow .lineShow .contentShow .detail {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
@ -183,11 +184,11 @@ label {
|
||||
}
|
||||
|
||||
.sub .rowShow .lineShow .contentShow .detail .subItem.selected {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.sub .rowShow .lineShow .contentShow .detail .subItem.checked {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: var(--transparency-light-50);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -196,12 +197,12 @@ label {
|
||||
}
|
||||
|
||||
.sub .rowShow .lineShow .contentShow .tvshow {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--button-text);
|
||||
}
|
||||
|
||||
.sub .rowShow .lineShow .contentShow .tvshow:hover {
|
||||
background-color: rgb(255 255 255 / 16%);
|
||||
background: var(--transparency-light-15);
|
||||
|
||||
}
|
||||
|
||||
@ -229,11 +230,11 @@ label {
|
||||
}
|
||||
|
||||
.logs .logDetails {
|
||||
background-color: rgb(255 255 255 / 14%);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
.logs .search {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.logs .logDetails table tr.danger {
|
||||
@ -243,7 +244,7 @@ label {
|
||||
|
||||
.uas .repoContainer .repo .details .row,
|
||||
.uas .repoContainer .repo .details .row:nth-child(2n) {
|
||||
background: rgb(0 0 0 / 25%);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -348,7 +349,7 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla
|
||||
.uas .typesMenu .search .searchInput,
|
||||
.logs .search .searchInput {
|
||||
color: var(--text) !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
border: 1px solid transparent !important;
|
||||
box-shadow: none !important;
|
||||
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
@ -359,15 +360,15 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla
|
||||
.uas .manualInstall:focus,
|
||||
.uas .typesMenu .search .searchInput:focus,
|
||||
.logs .search .searchInput:focus {
|
||||
background-color: rgba(0, 0, 0, .5) !important;
|
||||
background: var(--transparency-dark-50) !important;
|
||||
color: var(--text-hover) !important;
|
||||
}
|
||||
|
||||
/* TABLE */
|
||||
.info tr:nth-child(2n+1) {
|
||||
background-color: rgb(255 255 255 / 0.08);
|
||||
background-color: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.logs .logDetails table tr:nth-child(even) {
|
||||
background-color: rgb(255 255 255 / 8%);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
:root {
|
||||
--calendar-in-cinemas: 53 197 244;
|
||||
@ -168,7 +169,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="SelectInput-select-"]:active,
|
||||
@ -185,7 +186,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AutoSuggestInput-suggestionHighlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="CheckInput-primaryIsChecked-"] {
|
||||
@ -201,7 +202,7 @@ a:hover {
|
||||
/* HEADER */
|
||||
|
||||
[class*="PageHeader-header-"] {
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -231,16 +232,16 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="MovieSearchInput-highlighted-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* SIDE MENU */
|
||||
[class*="PageSidebar-sidebarContainer-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="PageSidebar-sidebar-"] {
|
||||
@ -263,7 +264,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="PageSidebarItem-isActiveParentLink-"] {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
background: var(--transparency-dark-15);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@ -316,15 +317,15 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="AddListMoviePoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="MovieIndexOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="MovieIndexOverview-link-"]:hover {
|
||||
@ -332,7 +333,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ProgressBar-container-"] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*=".ProgressBar-purple-"] {
|
||||
@ -343,7 +344,7 @@ a:hover {
|
||||
[class*="MovieDetailsSeason-season-"],
|
||||
[class*="MovieDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="MovieDetailsSeason-actionButton-"],
|
||||
@ -386,17 +387,17 @@ a:hover {
|
||||
|
||||
[class*="MovieDetailsSeason-collapseButtonContainer-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="MovieFileEditorTable-container-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="ExtraFileTable-container-"] {
|
||||
border: 1px solid transparent;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
|
||||
@ -509,7 +510,7 @@ a:hover {
|
||||
|
||||
/* Table options*/
|
||||
[class*="TableOptionsColumn-column-"] {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
border: none;
|
||||
}
|
||||
@ -523,17 +524,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="TableRow-row-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="TableRowCell-cell-"] {
|
||||
border-top: 1px solid rgb(255 255 255 / 25%);
|
||||
border-top: 1px solid var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* TOP MENU SERIES */
|
||||
[class*="PageToolbar-toolbar-"] {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@ -569,7 +570,7 @@ a:hover {
|
||||
[class*="MovieIndexPosterInfo-info-"],
|
||||
[class*="MovieIndexPosterInfo-info-"],
|
||||
[class*="MovieCreditPoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -596,13 +597,13 @@ a:hover {
|
||||
|
||||
[class*="MenuItem-menuItem-"]:hover,
|
||||
[class*="MenuItem-menuItem-"]:focus {
|
||||
background: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
color: var(--text-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class*="MenuItemSeparator-separator-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* ALPHABET JUMP BAR */
|
||||
@ -613,12 +614,12 @@ a:hover {
|
||||
/* MINI RIGHT SCROLL BAR */
|
||||
[class*="OverlayScroller-thumb-"],
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="OverlayScroller-thumb-"]:hover,
|
||||
[class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(255, 255, 255, 0.25) !important;
|
||||
background: var(--transparency-light-25) !important;
|
||||
}
|
||||
|
||||
/* ADD NEW */
|
||||
@ -642,12 +643,12 @@ a:hover {
|
||||
|
||||
[class*="EnhancedSelectInputOption-isSelected-"],
|
||||
[class*="EnhancedSelectInputOption-isSelected-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.20) !important;
|
||||
background: var(--transparency-light-20) !important;
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="EnhancedSelectInputOption-option-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="HintedSelectInputOption-hintText-"] {
|
||||
@ -686,7 +687,7 @@ a:hover {
|
||||
[class*="AddNewMovie-searchIconContainer-"],
|
||||
[class*="CheckInput-isIndeterminate-"] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -713,7 +714,7 @@ a:hover {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="TagInput-input-"][class*="TagInput-isFocused-"] {
|
||||
@ -742,7 +743,7 @@ a:hover {
|
||||
|
||||
[class*="AddNewMovieSearchResult-searchResult-"]:hover,
|
||||
[class*="AddNewMovieSearchResult-underlay-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="AddNewmovieModalContent-year-"] {
|
||||
@ -767,13 +768,13 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="VirtualTableRow-row-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
/* Drop down menu/button*/
|
||||
[class*="ImportMovieSelectMovie-button-"] {
|
||||
border: none !important;
|
||||
background-color: rgba(0, 0, 0, 0.25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="ImportMovieSelectMovie-content-"],
|
||||
@ -791,7 +792,7 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="ImportMovieSearchResult-movie-"]:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
[class*="ImportMovieTitle-year-"] {
|
||||
@ -810,7 +811,7 @@ a:hover {
|
||||
|
||||
[class*="DiscoverMoviePoster-title-"],
|
||||
[class*="DiscoverMoviePosterInfo-info-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -824,17 +825,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="AddListMovieOverview-content-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
[class*="PageJumpBarItem-jumpBarItem-"]:hover {
|
||||
color: var(--text-hover);
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
/*Posters*/
|
||||
[class*="AddListMoviePoster-title-"] {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -842,7 +843,7 @@ a:hover {
|
||||
/* FOOTER */
|
||||
[class*="PageContentFooter-contentFooter-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -928,18 +929,18 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="DayOfWeek-dayOfWeek-"] {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-dayOfMonth-"] {
|
||||
border-bottom: 1px solid hsla(0, 0%, 100%, .08);
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
[class*="CalendarDay-isToday-"],
|
||||
[class*="DayOfWeek-isToday-"] {
|
||||
background-color: hsla(0, 0%, 100%, .25) !important;
|
||||
background: var(--transparency-dark-25) !important;
|
||||
}
|
||||
|
||||
[class*="CalendarDay-day-"],
|
||||
@ -990,7 +991,7 @@ a:hover {
|
||||
|
||||
/* calendar agenda */
|
||||
[class*="AgendaEvent-event-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08) !important;
|
||||
background: var(--transparency-dark-10) !important;
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
@ -1017,15 +1018,15 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
background: var(--transparency-light-15);
|
||||
}
|
||||
|
||||
[class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"] {
|
||||
@ -1033,17 +1034,17 @@ a:hover {
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
[class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
|
||||
background-color: rgba(255, 255, 2550, 0.35);
|
||||
background: var(--transparency-light-35);
|
||||
}
|
||||
|
||||
/* PROFILES */
|
||||
[class*="Card-card-"],
|
||||
[class*="QualityProfiles-addQualityProfile-"] {
|
||||
background-color: rgba(0, 0, 0, .45);
|
||||
background: var(--transparency-dark-45);
|
||||
box-shadow: 0 0 10px 1px #000000;
|
||||
color: var(--text);
|
||||
}
|
||||
@ -1068,12 +1069,12 @@ a:hover {
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
|
||||
[class*="LanguageProfileItem-languageProfileItem-"] {
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
[class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="KeyValueListInputItem-keyInput-"],
|
||||
@ -1085,7 +1086,7 @@ a:hover {
|
||||
|
||||
[class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
|
||||
border: 1px solid transparent;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25)
|
||||
}
|
||||
|
||||
[class*="QualityDefinitions-sizeLimitHelpText-"] {
|
||||
@ -1119,7 +1120,7 @@ a:hover {
|
||||
/* LOG */
|
||||
[class*="Alert-info-"] {
|
||||
border-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: #FFC107;
|
||||
}
|
||||
|
||||
@ -1145,12 +1146,12 @@ a:hover {
|
||||
/* Login Page */
|
||||
|
||||
.panel-body {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
background: var(--transparency-dark-25);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
background: var(--transparency-dark-45);
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
@ -1160,7 +1161,7 @@ a:hover {
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--transparency-light-10);
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
@ -1181,7 +1182,7 @@ input[type=password] {
|
||||
outline: 0;
|
||||
border-color: var(--text-hover);
|
||||
box-shadow: none;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background: var(--transparency-light-25);
|
||||
}
|
||||
|
||||
/* Custom filter */
|
||||
@ -1190,7 +1191,7 @@ input[type=password] {
|
||||
}
|
||||
|
||||
[class*="CustomFilter-customFilter-"]:hover {
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
background: var(--transparency-dark-10);
|
||||
}
|
||||
|
||||
[class*="SelectMovieModalContent-path-"] {
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
/* https://github.com/gilbN/theme.park */
|
||||
|
||||
@import url("/css/defaults/placeholders.css");
|
||||
@import url("/css/defaults/transparent.css");
|
||||
|
||||
.bg-light {
|
||||
background: var(--main-bg-color) !important;
|
||||
@ -31,7 +32,7 @@
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .2);
|
||||
background: var(--transparency-dark-20);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -43,7 +44,7 @@
|
||||
min-height: 50px;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: hsla(0, 0%, 100%, .5);
|
||||
background: var(--transparency-light-50);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
@ -79,7 +80,7 @@ code {
|
||||
font-size: .875em;
|
||||
color: #d63384;
|
||||
word-wrap: break-word;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
background: var(--transparency-dark-50);
|
||||
padding: 2px 6px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@ -99,7 +100,7 @@ a:hover {
|
||||
|
||||
/* TOP NAV */
|
||||
.bg-primary {
|
||||
background: rgba(0, 0, 0, .15) !important;
|
||||
background: var(--transparency-dark-15) !important;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-brand {
|
||||
@ -130,7 +131,7 @@ a:hover {
|
||||
.dropdown-item:focus,
|
||||
.dropdown-item:hover {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
background: var(--transparency-light-10);
|
||||
}
|
||||
|
||||
.dropdown-item.disabled,
|
||||
@ -162,13 +163,13 @@ a:hover {
|
||||
|
||||
.btn-light {
|
||||
color: var(--button-text);
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
border-color: rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: var(--button-text-hover);
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
border-color: rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
@ -333,7 +334,7 @@ a:hover {
|
||||
/* FORMS */
|
||||
.form-control {
|
||||
color: var(--text-hover);
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
background: var(--transparency-dark-15);
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
@ -347,7 +348,7 @@ a:hover {
|
||||
|
||||
textarea.form-control:focus {
|
||||
color: var(--text-hover);
|
||||
background: rgba(0, 0, 0, .35);
|
||||
background: var(--transparency-dark-35);
|
||||
border-color: rgba(255, 255, 255, .15);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 0%);
|
||||
@ -355,7 +356,7 @@ textarea.form-control:focus {
|
||||
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
background: var(--transparency-light-15);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -397,13 +398,13 @@ textarea.form-control:focus {
|
||||
.page-item.disabled .page-link {
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
background-color: rgba(255, 255, 255, .08);
|
||||
background-color: var(--transparency-light-10);
|
||||
border-color: rgba(255, 255, 255, .08);
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card {
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
background: var(--transparency-dark-25);
|
||||
}
|
||||
|
||||
.image-card:hover .overlay {
|
||||
@ -411,7 +412,7 @@ textarea.form-control:focus {
|
||||
transition: opacity .3s ease-in-out;
|
||||
-moz-transition: opacity .3s ease-in-out;
|
||||
-webkit-transition: opacity .3s ease-in-out;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
background: var(--transparency-dark-50);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
28
css/defaults/transparent.css
Normal file
28
css/defaults/transparent.css
Normal 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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user