diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000..4e7866ae --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,3 @@ +## Thank you for the PR! + +### Please remember to add a before and after screenshot(s) on any css changes! diff --git a/CSS/addons/organizr/glass/README.md b/CSS/addons/organizr/glass/README.md index 0441bda4..9c429d01 100644 --- a/CSS/addons/organizr/glass/README.md +++ b/CSS/addons/organizr/glass/README.md @@ -1,7 +1,9 @@ +# Organizr - Glass addon + ## Installation * [Full](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/glass#Full) -* [Login - Lockscreen only](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/glass#login---lockscreen) +* [Login - Lockscreen only](https://github.com/gilbN/theme.park/tree/master/CSS/addons/organizr/glass#login---lockscreen-only) @@ -17,7 +19,7 @@ ## Full -1. Set the Organizr theme to either Aquamarine or Hotline. +1. Set the Organizr theme to either Aquamarine, Hotline or Space Gray 2. Import the `glass-base.css` and root variables in the Custom Theme CSS box like below. Replace `--main-bg-color` with a wallpaper you have uploaded to Organizr @@ -83,7 +85,7 @@ Here are the other theme colors if you want to use that instead: --div-background-color-35: rgba(0, 0, 0, 0.45); ``` -## Login - Lockscreen +## Login - Lockscreen only If you just want the login and lockscreen css, just add this in custom CSS: diff --git a/CSS/addons/radarr/README.md b/CSS/addons/radarr/README.md new file mode 100644 index 00000000..7b7b81ec --- /dev/null +++ b/CSS/addons/radarr/README.md @@ -0,0 +1,54 @@ +# Radarr 4K logo + +Add a 4K logo to your Radarr css. + +### Desktop +![](desktop.png) +![](v3-desktop.png) + +### Mobile +![](mobile.png) +![](v3-mobile.png) + + +## Setup + +#### Nginx +Examples of how to add it: + +```nginx +proxy_set_header Accept-Encoding ""; +sub_filter +'' +' + +'; +sub_filter_once on; +``` + +#### Apache + +```nginx +AddOutputFilterByType SUBSTITUTE text/html + Substitute 's| ' +';|' +``` + +#### Caddy + +```nginx +filter rule { + content_type text/html.* + search_pattern + replacement "" +} +``` + +#### Stylus + +Just add another import line. + +```css +@import "https://gilbn.github.io/theme.park/CSS/themes/radarr/THEME.css"; +@import "https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr-4k-logo.css"; +``` \ No newline at end of file diff --git a/CSS/addons/radarr/desktop.png b/CSS/addons/radarr/desktop.png new file mode 100644 index 00000000..84f8971e Binary files /dev/null and b/CSS/addons/radarr/desktop.png differ diff --git a/CSS/addons/radarr/mobile.png b/CSS/addons/radarr/mobile.png new file mode 100644 index 00000000..42ea84ed Binary files /dev/null and b/CSS/addons/radarr/mobile.png differ diff --git a/CSS/addons/radarr/radarr-4k-logo.css b/CSS/addons/radarr/radarr-4k-logo.css new file mode 100644 index 00000000..c5416af8 --- /dev/null +++ b/CSS/addons/radarr/radarr-4k-logo.css @@ -0,0 +1,73 @@ +/* Desktop */ +@media (min-width: 752px) { + .navbar-brand>img { + display:none !important; + } + .navbar > .container-fluid .navbar-brand:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr4k.png"); + display: inline-block; + width: 128px; + height: 128px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } + } + /* Mobile */ + @media (max-width: 767px) { + .navbar-brand .visible-xs img { + display: none !important; + } + .navbar-brand .visible-xs { + display: inline !important; + } + .navbar > .container-fluid .navbar-brand:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + margin-bottom: -12px; + } + } + +/* Radarr V3*/ +@media (min-width: 752px) { + .PageHeader-logoFull-2z6pD { + display: none !important; + } + .PageHeader-logoContainer-3bOb3:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr4k-v3.png"); + display: inline-block; + width: 148px; + height: 48px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} + +@media (max-width: 767px) { + .PageHeader-logo-2y8vm { + display: none !important; + } + .PageHeader-logoContainer-3bOb3:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/radarr/radarr-v3-mobile.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} diff --git a/CSS/addons/radarr/radarr-v3-mobile.png b/CSS/addons/radarr/radarr-v3-mobile.png new file mode 100644 index 00000000..65dee236 Binary files /dev/null and b/CSS/addons/radarr/radarr-v3-mobile.png differ diff --git a/CSS/addons/radarr/radarr4k-v3.png b/CSS/addons/radarr/radarr4k-v3.png new file mode 100644 index 00000000..ee888e27 Binary files /dev/null and b/CSS/addons/radarr/radarr4k-v3.png differ diff --git a/CSS/addons/radarr/radarr4k.png b/CSS/addons/radarr/radarr4k.png new file mode 100644 index 00000000..469c3675 Binary files /dev/null and b/CSS/addons/radarr/radarr4k.png differ diff --git a/CSS/addons/radarr/v3-desktop.png b/CSS/addons/radarr/v3-desktop.png new file mode 100644 index 00000000..c399f4c7 Binary files /dev/null and b/CSS/addons/radarr/v3-desktop.png differ diff --git a/CSS/addons/radarr/v3-mobile.png b/CSS/addons/radarr/v3-mobile.png new file mode 100644 index 00000000..7826b843 Binary files /dev/null and b/CSS/addons/radarr/v3-mobile.png differ diff --git a/CSS/addons/sonarr/README.md b/CSS/addons/sonarr/README.md new file mode 100644 index 00000000..31bd7ba1 --- /dev/null +++ b/CSS/addons/sonarr/README.md @@ -0,0 +1,54 @@ +# Sonarr 4K logo + +Add a 4K logo to your Sonarr css. + +### Desktop +![](desktop.png) +![](v3-desktop.png) + +### Mobile +![](mobile.png) +![](v3-mobile.png) + + +## Setup + +#### Nginx +Examples of how to add it: + +```nginx +proxy_set_header Accept-Encoding ""; +sub_filter +'' +' + +'; +sub_filter_once on; +``` + +#### Apache + +```nginx +AddOutputFilterByType SUBSTITUTE text/html + Substitute 's| ' +';|' +``` + +#### Caddy + +```nginx +filter rule { + content_type text/html.* + search_pattern + replacement "" +} +``` + +#### Stylus + +Just add another import line. + +```css +@import "https://gilbn.github.io/theme.park/CSS/themes/sonarr/THEME.css"; +@import "https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k-logo.css"; +``` \ No newline at end of file diff --git a/CSS/addons/sonarr/desktop.png b/CSS/addons/sonarr/desktop.png new file mode 100644 index 00000000..9de8cfd9 Binary files /dev/null and b/CSS/addons/sonarr/desktop.png differ diff --git a/CSS/addons/sonarr/mobile.png b/CSS/addons/sonarr/mobile.png new file mode 100644 index 00000000..71f421c2 Binary files /dev/null and b/CSS/addons/sonarr/mobile.png differ diff --git a/CSS/addons/sonarr/sonarr-4k-logo.css b/CSS/addons/sonarr/sonarr-4k-logo.css new file mode 100644 index 00000000..529de94b --- /dev/null +++ b/CSS/addons/sonarr/sonarr-4k-logo.css @@ -0,0 +1,95 @@ +/* Desktop */ +@media (min-width: 752px) { + .navbar-brand>img { + display:none !important; + } + .navbar > .container-fluid .navbar-brand:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + display: inline-block; + width: 128px; + height: 128px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } + } + + /* Mobile */ + @media (max-width: 1200px) { + .navbar-brand .visible-xs img, .logo-text { + display: none !important; + } + .navbar-brand .visible-xs { + display: inline !important; + } + .navbar > .container-fluid .navbar-brand:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + display: inline-block; + width: 64px; + height: 64px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + margin-bottom: -12px; + } + } + + @media (max-width: 767px) { + .navbar-brand .visible-xs img { + display: none !important; + } + .navbar-brand .visible-xs { + display: inline !important; + } + .navbar > .container-fluid .navbar-brand:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + margin-bottom: -12px; + } + } + +/* Sonarr V3*/ +@media (min-width: 752px) { + .PageHeader\/logo\/2y8vm { + display: none !important; + } + .PageHeader\/logoContainer\/3bOb3:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} + +@media (max-width: 767px) { + .PageHeader\/logo\/2y8vm { + display: none !important; + } + .PageHeader\/logoContainer\/3bOb3:before { + background-image: url("https://gilbn.github.io/theme.park/CSS/addons/sonarr/sonarr-4k.png"); + display: inline-block; + width: 32px; + height: 32px; + content:""; + background-size: cover; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + } +} \ No newline at end of file diff --git a/CSS/addons/sonarr/sonarr-4k.png b/CSS/addons/sonarr/sonarr-4k.png new file mode 100644 index 00000000..a42e2fa5 Binary files /dev/null and b/CSS/addons/sonarr/sonarr-4k.png differ diff --git a/CSS/addons/sonarr/v3-desktop.png b/CSS/addons/sonarr/v3-desktop.png new file mode 100644 index 00000000..7fc13a56 Binary files /dev/null and b/CSS/addons/sonarr/v3-desktop.png differ diff --git a/CSS/addons/sonarr/v3-mobile.png b/CSS/addons/sonarr/v3-mobile.png new file mode 100644 index 00000000..080ae0e1 Binary files /dev/null and b/CSS/addons/sonarr/v3-mobile.png differ diff --git a/CSS/themes/adguard/adguard-base.css b/CSS/themes/adguard/adguard-base.css new file mode 100644 index 00000000..e14230f6 --- /dev/null +++ b/CSS/themes/adguard/adguard-base.css @@ -0,0 +1,460 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +body { + background: var(--main-bg-color); + color: var(--text) !important; +} + +/* Scrollbar */ +@media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} +body *::-webkit-scrollbar-thumb { + background: hsla(0,0%,100%,.2); +} +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* TEXT */ + +a { + color: var(--text) +} + +a:hover { + color: var(--accent-color-hover); +} + +a:-webkit-any-link:focus { + outline: none; +} + +/* LOGIN PAGE */ + +.login .login__form .text-center .h-6 { + filter: invert(1); +} + +.login__form .card { + background: rgba(0, 0, 0, 0.08); + border: 1px solid rgb(0 0 0 / 0.08); +} + +.login .btn-success:hover { + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + color: var(--text-hover); +} + +.login .btn-link { + color: var(--text); +} + +.login .btn-link:hover { + color: var(--text-hover); +} + +.form__message--error { + color: #F44336; +} + +/* HEADER */ +.header { + background: transparent; + border-bottom: 1px solid rgba(255, 255, 255, 0.03); +} + +.header-brand-img { + filter: invert(1); +} + +.header .btn-outline-secondary { + color: var(--text); + background: var(--button-color); + border-color: var(--button-color); +} + +.header .btn-outline-secondary:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); +} + +.nav-tabs .nav-link.active { + border-color: var(--accent-color); + color: var(--accent-color); + background: transparent; +} + +.header .nav-tabs .nav-link.active:hover { + border-color: var(--accent-color-hover) !important; + color: var(--accent-color-hover) !important; +} + +.header a:not([href]):not([tabindex]) { + color: var(--text); + text-decoration: none; +} + +.header .nav-tabs { + color: var(--text); +} + +.header .nav-tabs .nav-link:hover:not(.disabled) { + border-color: var(--text-hover); + color: var(--text-hover); +} + +/* FOOTER */ +.footer { + background: rgba(0, 0, 0, 0.08); + border-top: 1px solid rgba(255, 255, 255, 0.03); + color: var(--text); +} + +.footer a:not(.btn) { + color: var(--text); +} + +.footer .btn-outline-primary { + color: var(--button-color); + background-color: transparent; + background-image: none; + border-color: var(--button-color); +} + +.footer .btn-outline-primary:hover { + color: var(--text); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +/* MAIN PAGE */ +.header__row .mobile-menu { + background-color: transparent; +} + +/* BUTTONS */ +.container .btn-outline-primary { + color: var(--text); + background-color: var(--button-color); + background-image: none; + border-color: var(--button-color); +} + +.container .btn-outline-primary:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.tooltip-container { + background: var(--tooltip-bg); +} + +/* CARDS*/ +.card { + background-color: rgb(255 255 255 / 8%); + border: 1px solid rgba(255, 255, 255, 0.1); + color: var(--text); +} + +.tooltip-custom__container { + background: var(--tooltip-bg); +} + +.tooltip-custom__content-link { + color: var(--tooltip-link-color); +} + +.card-wrap, +.card-title-stats { + color: inherit; +} + +.card-title-stats a { + text-decoration: underline; +} + +.card-title-stats a:hover { + text-decoration: underline; + color: var(--accent-color-hover); +} + +.card .icon--lightgray { + color: var(--text); +} + +.card .logs__text { + color: var(--text); +} + +.card .button__action { + background-color: transparent; +} + +.card .btn-outline-danger { + color: #F44336; + background-color: transparent; + background-image: none; + border-color: #F44336; +} + +.btn-outline-danger:hover { + color: #fff; + background-color: #F44336; + border-color: #F44336; +} + +/* DROPDOWNS */ +.dropdown-menu { + color: var(--text); + background: var(--modal-bg-color); + background-clip: padding-box; + border: 1px solid rgba(0, 40, 100, 0.12); + border-radius: 3px; +} + +.dropdown-item { + color: var(--text); +} + +.dropdown-item:hover, +.dropdown-item:focus { + color: var(--text-hover); + text-decoration: none; + background-color: rgb(255 255 255 / 0.08); +} +.select__menu { + background: var(--modal-bg-color) !important; + box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .5); +} +.select__option:hover { + background: rgba(255, 255, 255, .08) !important; +} +.select__option { + background: rgba(0, 0, 0, 0) !important; + border-bottom: solid rgba(255, 255, 255, .1) 1px; +} +.select__multi-value__remove { + color: black; +} +.basic-multi-select .select__control--is-focused, .basic-multi-select .select__control--is-focused:hover { + border-color: transparent !important; +} + +/* SETTINGS */ +.checkbox__label-subtitle, +.form__desc, +.page-subtitle, +.card-title small, +.card-subtitle { + color: var(--text); +} + +.dropdown-item.active, +.dropdown-item:active { + background-color: rgb(0 0 0 / 25%); +} + +.service__icon { + color: #eee; +} + +/* LOGS */ +.logs__table { + background-color: rgb(255 255 255 / 8%); +} + +.logs__text, +.logs__row .list-unstyled li, +.detailed-info, +.icon--lightgray, +.icon--gray, +.loading__text { + color: var(--text) +} + +.rt-tr-group.red { + background-color: rgb(244 67 54 / 30%); +} + +.rt-tr-group.blue { + background-color: rgb(54 146 244 / 30%); +} + +.ReactTable .rt-noData { + background: transparent; +} + +.ReactTable .-loading, +.ReactTable .-loading>div { + background: rgba(255, 255, 255, 0.5); +} + +.loading:before { + background-color: transparent; +} + +.custom-select:focus { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* FORMS */ +.form-control--transparent { + color: var(--text); +} + +.form-control--search { + outline: none; +} + +.form-control:focus { + border-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; + background: #ffffff !important; +} + +.icon--selected { + background-color: rgb(255 255 255 / 15%); + border: solid 1px transparent; +} + +.tab__control, +.tab__control--active { + color: var(--text); +} + +/* BUTTONS */ +.btn-outline-secondary { + color: #c9c9c9; + border-color: #c9c9c9; +} + +.btn-success, +.btn-success.disabled, +.btn-success:disabled { + background-color: var(--button-color); + border-color: var(--button-color); + color: var(--text); +} + +.btn-success:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.btn-success:focus, +.btn-success.focus { + -webkit-box-shadow: none; + box-shadow: none; +} + +.btn-secondary { + color: var(--text); + background-color: rgb(255 255 255 / 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); +} + +.btn-secondary:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: transparent; +} + +/* MODALS */ +.modal-content { + background: var(--modal-bg-color); +} + +.ReactModal__Overlay--after-open { + background-color: rgb(0 0 0 / 0.7) !important; +} + +/* MOBILE */ +@media (max-width: 767px) { + .mobile-menu { + background: #1b1b1b !important; + } + + .dropdown-menu { + background: #1f1f1f !important; + } + + .ReactModal__Content { + background: var(--modal-bg-color) !important; + border: 1px solid transparent !important; + } +} + +@media (max-width: 991px) { + .mobile-menu { + background: #1b1b1b !important; + } + + .dropdown-menu { + background: #1f1f1f !important; + } +} + +/* PLACEHOLDER TEXT */ +::placeholder { + color: var(--text); +} + +:-moz-placeholder { + color: var(--text); +} + +:-ms-input-placeholder { + color: var(--text); +} + +::-webkit-input-placeholder { + color: var(--text); +} \ No newline at end of file diff --git a/CSS/themes/adguard/aquamarine.css b/CSS/themes/adguard/aquamarine.css new file mode 100644 index 00000000..3ac6828c --- /dev/null +++ b/CSS/themes/adguard/aquamarine.css @@ -0,0 +1,28 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* ADGUARD AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; + --accent-color-hover: #12afa0; + --tooltip-bg: #009688; + --tooltip-link-color: #f1c40f; + --text: #eee; + --text-hover: #fff; +} \ No newline at end of file diff --git a/CSS/themes/adguard/dark.css b/CSS/themes/adguard/dark.css new file mode 100644 index 00000000..7dff3868 --- /dev/null +++ b/CSS/themes/adguard/dark.css @@ -0,0 +1,28 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* ADGUARD DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.25); + --accent-color-hover: rgba(255, 255, 255, 0.45); + --tooltip-bg: #1f1f1f; + --tooltip-link-color: #f1c40f; + --text: #eee; + --text-hover: #fff; +} \ No newline at end of file diff --git a/CSS/themes/adguard/hotline.css b/CSS/themes/adguard/hotline.css new file mode 100644 index 00000000..4cd60075 --- /dev/null +++ b/CSS/themes/adguard/hotline.css @@ -0,0 +1,28 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* ADGUARD HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --tooltip-bg: #F44336; + --tooltip-link-color: #0b3161; + --text: #eee; + --text-hover: #fff; +} \ No newline at end of file diff --git a/CSS/themes/adguard/organizr-dark.css b/CSS/themes/adguard/organizr-dark.css new file mode 100644 index 00000000..f0620791 --- /dev/null +++ b/CSS/themes/adguard/organizr-dark.css @@ -0,0 +1,28 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* ADGUARD ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + --tooltip-bg: #1b1b1b; + --tooltip-link-color: #2cabe3; + --text: #eee; + --text-hover: #fff; + } \ No newline at end of file diff --git a/CSS/themes/adguard/plex.css b/CSS/themes/adguard/plex.css new file mode 100644 index 00000000..ace87a24 --- /dev/null +++ b/CSS/themes/adguard/plex.css @@ -0,0 +1,28 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* ADGUARD PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --tooltip-bg: #1f1f1f; + --tooltip-link-color: #e5a00d; + --text: #eee; + --text-hover: #fff; +} \ No newline at end of file diff --git a/CSS/themes/adguard/space-gray.css b/CSS/themes/adguard/space-gray.css new file mode 100644 index 00000000..edcbea3c --- /dev/null +++ b/CSS/themes/adguard/space-gray.css @@ -0,0 +1,28 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* ADGUARD SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/adguard/adguard-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; + --tooltip-bg: #607D8B; + --tooltip-link-color: #f1c40f; + --text: #eee; + --text-hover: #fff; +} \ No newline at end of file diff --git a/CSS/themes/bazarr/aquamarine.css b/CSS/themes/bazarr/aquamarine.css index 7dc7f7e4..62ba3386 100644 --- a/CSS/themes/bazarr/aquamarine.css +++ b/CSS/themes/bazarr/aquamarine.css @@ -16,4 +16,9 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; + --accent-color-hover: #12afa0; } \ No newline at end of file diff --git a/CSS/themes/bazarr/bazarr-base.css b/CSS/themes/bazarr/bazarr-base.css index 0bceb058..16309d8e 100644 --- a/CSS/themes/bazarr/bazarr-base.css +++ b/CSS/themes/bazarr/bazarr-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -11,959 +10,809 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +html { + background: var(--main-bg-color); +} + +.page-wrapper { + background: var(--main-bg-color); + color: white !important; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: #eee; +} + body { - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - } - - /* VERSION */ - - #footer-region::after { - content: "\A theme.park 2.0"; - white-space: pre; - } - - @media (max-width: 991px) { - .toolbar .page-toolbar .x-toolbar-left-1 { - display: block; - } - .toolbar .page-toolbar .btn-group { - display: block; - } - .btn-group.btn-group-collapse > .btn { - margin: 2px; - display: block; - float: none; - border-radius: 4px!important; - word-wrap: normal; - white-space: normal; - } - } - @media screen and (max-width: 767px) { - .table-responsive { - border: none; - } - } - - .modal-content { - box-shadow: 0 0 10px 1px #000; - border-radius: 3px; - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - } - /* scroller */ - ::-webkit-scrollbar-corner { - background-color: hsla(0,0%,100%,.08); - } - ::-webkit-scrollbar { - width: 10px; - height: 10px; - background: rgba(0, 0, 0, .25); - } - ::-webkit-scrollbar-thumb { - -webkit-border-radius: 2px; - border-radius: 2px; - background-color: rgba(255, 255, 255, 0.25) !important; - } - - /* navbar and searchbar */ - .navbar-nzbdrone li a { - color: hsla(0,0%,100%,.7); - } - .navbar-nzbdrone li a:hover { - background-color: hsla(0,0%,100%,.08); - color: #ffffff; - } - .search .input-group .input-group-addon, .search .input-group input { - background-color: rgba(0, 0, 0, .25) !important; - color: #FFF; - border-color: rgba(0, 0, 0, .25); - height: 40px; - } - .search .input-group .input-group-addon, .search .input-group input:focus { - color: #FFF; - } - .tt-suggestion.tt-cursor { - background-color: #191a1c !important; - color: #ffffff !important; - } - .search .tt-dropdown-menu { - background-color: #1f1f1f; - } - .fa-search { - color: white; - } - .input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn { - height: 50px; - } - .navbar-inverse, .navbar-toggle { - background-color: rgba(0, 0, 0, .25); - border-color: rgba(0, 0, 0, .25); - color: #FFF; - } - .navbar-nzbdrone .navbar-toggle:focus, .navbar-nzbdrone .navbar-toggle:hover { - color: #FFF; - background-color: hsla(0,0%,100%,.08); - } - @media (max-width: 767px) { - .navbar-nzbdrone .navbar-collapse .navbar-nav li:focus, .navbar-nzbdrone .navbar-collapse .navbar-nav li:hover { - background-color: hsla(0,0%,100%,.08); - } - } - /* Form Stuff */ - - .form-control { - color: #FFF; - background-color: rgba(0, 0, 0, .25) !important; - border: 1px solid rgba(0, 0, 0, .25); - } - - .form-control:focus { - background-color: #1f1f1f !important; - border-color: rgba(0, 0, 0, 0.51); - outline: 0; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6); - } - - .bootstrap-tagsinput { - background-color: rgba(0, 0, 0, .25); - border: 1px solid rgba(0, 0, 0, .25); - color: #FFF; - } - .form-group i { - color: #ffffff; - } - - .FormInputHelpText-helpText-3_AVV { - color: #ffffff; - } - /* /Movies/Series/Season page */ - .started #page { - background-color: rgba(0, 0, 0, .25); - color: White; - box-shadow: none; - max-width: 1280px; - } - .series-item a { - color: #FFF; - } - .series-posters .series-posters-item, .movie-posters-item { - background-color: rgba(0, 0, 0, .25) !important; - color: #444; - box-shadow: 0 0 10px 1px #000000 !important; - } - .movie-posters-item { - min-height: 302px !important; - } - .header-text .year { - color: #FFF; - } - .backdrop .navbar-nzbdrone { - opacity: 0.98; - box-shadow: 0 0 10px 1px #000; - border-radius: 3px; - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - } - - .series-page-header, .movie-page-header { - opacity: 0.98; - box-shadow: 0 0 10px 1px #000; - color: #ffffff; - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - } - .series-season, .movie-tabs-card { - opacity: 0.98; - box-shadow: 0 0 10px 1px #000; - color: #ffffff; - background: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - } - .episode-title-cell { - color: #ffffff; - } - a, .episode-title-cell { - color: #FFFFFF !important; - text-decoration: none; - } - th.sortable:hover, .table-hover > tbody > tr:hover { - background-color: rgba(0, 0, 0, .25); - color: #ffffff; - } - .progress.episode-progress .progressbar-back-text { - color: #000 !important; - } - .text-warning { - color: #ffffff; - } - - /* SEARCH */ - #add-series-screen .new-series .search-item, - #add-movies-screen .new-movies .search-item { - background-color: rgba(0, 0, 0, .25) !important; - color: #FFFFFF !important; - box-shadow: none; - } - div.form-group > label { - font-weight: 500; - } - #add-series-screen .add-series-search > input.form-control.x-series-search, - #add-movies-screen .add-movies-search > input.form-control.x-movies-search { - background-color: rgba(0, 0, 0, .25) !important; - color: #FFFFFF !important; - border: none; - box-shadow: none; - } - #add-series-screen .search-item select.form-control, - #add-movies-screen .search-item select.form-control { - background-color: #1f1f1f ; - color: #FFFFFF; - } - .dropdown-menu>li>a { - color: #ffffff; - } - .dropdown-menu>li>a:hover { - color: #000; - } - - .input-group.input-group-lg.add-series-search > .input-group-addon, - .input-group.input-group-lg.add-movies-search > .input-group-addon { - color: #FFFFFF; - background-color: rgba(0, 0, 0, .25); - border: 0px solid rgba(0, 0, 0, .25); - } - /* Add Movies */ - .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { - background-color: hsla(0,0%,100%,.08); - border-color: #FFF; - } - .discoverable-list-item:hover { - background-color: #1f1f1f; - color: white; - } - .btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, - .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover { - background-color: hsla(0,0%,100%,.08); - } - - /* Add Series */ - #add-series-screen .existing-series { - background-color: rgba(0, 0, 0, 0); - color: #fff; - box-shadow: 0 0 10px 1px #000000; - } - - /* Calendar page */ - - .calendar .success { - border-color: rgba(25, 255, 0, .15); - background-color: rgba(25, 255, 0, .15); - color: #FFF; - } - .calendar .premiere { - border-color: rgba(45, 66, 85, 100); - background-color: rgba(45, 66, 85, 100); - } - .calendar .primary { - border-color: rgba(0, 0, 0, .25); - background-color: rgba(0, 0, 0, .10); - } - .calendar .danger { - border-color: rgba(171, 0, 0, .50); - background-color: rgba(171, 0, 0, .50); - color: #fff; - } - .event .primary { - border-color: rgba(0, 0, 0, .25); - } - /* upcoming panel */ - .event h4, .date h4, .event .episode-title { - color: #FFFFFF !important; - } - .event .episode-title { - color: #f9be03 !important; - } - .event .episode-title:focus, .event .episode-title:hover { - color: #f9be03; - text-decoration: underline; - background-color: transparent; - } - a:focus, a:hover { - color: #ffffff; - } - .event p { - color: #FFF; - } - .fc-title { - color: #FFF; - } - /* calendar month */ - - .calendar th { - background-color: hsla(0,0%,100%,.08); - color: #FFFFFF; - } - .fc-day.fc-today.fc-state-highlight, - .fc-day-number.fc-today.fc-state-highlight, - .fc-day-top.fc-today.fc-state-highlight { - background-color: hsla(0,0%,100%,.08); - color: #f9be03; - } - - /* Activity Page */ - .popover.in { - opacity: .9; - } - .popover { - background-color: #000; - color: #fff; - } - .popover > .popover-title { - background-color: #000; - color: #fff; - border: none; - } - .popover.left > .arrow, - .popover.left > .arrow:after { - border-left-color: #000; - } - .popover.right > .arrow:after { - border-right-color: #000; - } - - .backgrid-paginator ul .active span { - background-color: rgba(0, 0, 0, 0); - } - .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { - background-color: hsla(0,0%,100%,.08); - } - .nav>li>a:focus, .nav>li>a:hover { - background-color: hsla(0,0%,100%,.08); - } - - /* Season Pass */ - .alert-info { - background-color: rgba(255, 255, 255, 0.25); - border-color: #ffffff; - color: #ffffff; - } - /* alerts */ - .alert-warning { - background-color: rgba(0, 0, 0, 0.25); - border-color: transparent; - color: #f0ad4e; - } - .alert-danger, .manual-import-error { - background-color: rgba(0, 0, 0, 0.25); - border-color: transparent; - color: #d9534f; - } - - /* Settings Page */ - legend { - color: #FFFFFF; - } - - /* Settings Page - Profile */ - /*thingy*/ - - .thingy { - background-color: rgba(0, 0, 0, 0.25); - color: #FFFFFF; - box-shadow: none; - border: 1px solid rgba(0, 0, 0, 0.25); - } - - .add-card .center { - background-color: rgba(0, 0, 0, 0); - border: 1px solid rgba(0, 0, 0, 0); - } - - .metadata-item { - background-color: rgba(0, 0, 0, 0.25); - color: #FFFFFF; - box-shadow: none; - } - - /* Settings add thingy*/ - - .add-thingy { - background-color: rgba(0, 0, 0, 0.25); - color: #FFFFFF; - box-shadow: none; - } - - .add-thingy > div > .btn-default, - .add-thingy > div > div > .btn.btn-xs.btn-default.dropdown-toggle { - color: #FFFFFF; - background-color: rgba(0, 0, 0, 0.25); - border-color: #FFFFFF; - outline-style: none; - } - - .add-thingy > div > .btn-default:hover, - .add-thingy > div > div > .btn.btn-xs.btn-default.dropdown-toggle:hover { - color: #FFF; - background-color: rgba(0, 0, 0, 0.25); - border-color: #FFF; - outline-style: none; - } - li.save-and-add { - color: #ffffff; - } - - /* Settings qualities*/ - ul.qualities li { - border: 1px solid rgba(0, 0, 0, .25); - background: rgba(0, 0, 0, .25); - } - ul.qualities li:hover { - border: 1px solid rgba(0, 0, 0, .25); - background: rgba(255, 255, 255, .25); - } - ul.qualities li.selected .quality-label { - color: #ffffff; - } - - /* Settings Quality sliders */ - #quality-definition-list .rows .row .ui-slider .ui-slider-range { - background-color: rgb(46, 47, 49); - } - #quality-definition-list .rows .row .ui-slider .ui-slider-handle { - background-color: #f5f5f5; - border: 1px solid #c7c7c7; - } - #quality-definition-list .rows .row .ui-slider { - border: 1px solid #2e2f31; - } - .label-warning { - background-color: #d58512; - } - .label-info { - background-color: #337ab7; - } - - /* SYSTEM logs */ - pre { - color: #fff; - background-color: rgba(0, 0, 0, .25); - } - - /* BUTTONS */ - /* YES/NO Switch */ - .well { - background-color: rgba(0, 0, 0, .25); - border: 1px solid rgba(0, 0, 0, .25); - } - .toggle p span { - color: rgba(0, 0, 0, 0); - } - - .toggle input:checked ~ p span:nth-child(1) { - color: #FFFFFF; - } - - .toggle input:not(:checked) ~ p span:nth-child(2) { - color: #FFFFFF; - } - /* Close X button */ - .close, - .close:hover, - .close:focus { - color: #FFF !important; - opacity: 1; - } - .btn-default { - color: hsla(0,0%,100%,.7); - background-color: rgba(0, 0, 0, .25); - border-color: none; - outline-style: none; - } - .btn-default:hover, .btn-default.active, .btn-default.active:hover { - color: #FFFFFF; - background-color: hsla(0,0%,100%,.08); - border-color: none; - outline-style: none; - } - .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover { - color: #fff; - background-color: hsla(0,0%,100%,.08); - border-color: #FFF; - } - .fc-state-default { - color: #FFF; - background-color: rgba(0, 0, 0, .25); - border-color: #FFF; - outline-style: none; - background-image: none; - text-shadow: none; - } - .fc-state-default:hover { - background-color: hsla(0,0%,100%,.08); - } - .input-group-btn > button.btn.btn-icon-only.dropdown-toggle, - .btn.btn-icon-only.x-copy-api-key.hidden-xs { - color: #FFFFFF; - background-color: #5cb85c; - } - .input-group-btn > button.btn.btn-icon-only.dropdown-toggle:hover { - color: #FFFFFF; - background-color: #449d44; - } - - .btn { - color: #FFF; - outline: 0 !important; - } - .btn.btn-lg.btn-block.x-search-auto { - color: #FFF; - background-color: rgba(0, 0, 0, .25); - } - .btn.btn-lg.btn-block.x-search-auto:hover { - color: #FFF; - background-color: rgba(255, 255, 255, 0.05); - } - .btn.focus, .btn:focus, .btn:hover { - color: #fff; - } - .modal-footer > button:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]) { - color: #FFF; - background-color: rgba(0, 0, 0, .25); - border-color: rgba(0, 0, 0, .25); - outline-style: none; - } - .modal-footer > button:hover:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]) { - color: #FFF; - background-color: rgba(255, 255, 255, .25); - border-color: rgba(255, 255, 255, .25); - outline-style: none; - } - /* green button */ - .btn-success { - color: #FFF; - border-color: #FFF; - } - - /* save button */ - .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, - .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { - color: #fff; - background-color: #286090 !important; - border-color: transparent; - } - - /* blue button */ - .btn-primary.focus, .btn-primary:focus, .btn-primary:hover { - color: #fff; - background-color: #286090 !important; - } - .btn-success.focus, .btn-success:focus, .btn-success:hover { - color: #fff; - background-color: #449d44 !important; - } - .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default { - background-color: hsla(0,0%,100%,.08); - border-color: #FFF; - } - .btn-danger:hover { - color: #fff; - background-color: #c9302c; - border-color: transparent; - } - .btn-primary, .btn-danger { - border-color: transparent; - } - .dropdown-menu { - background-color: #1f1f1f; - } - .dropdown-menu>li>a { - color: #ffffff; - } - .dropdown-menu>li>a:hover { - color: #000 !important; - } - - /* -------------------------BAZARR------------------------------*/ - /* TOP MENU */ - #divmenu { - background-color: transparent !important; - box-shadow: none !important; - opacity: 1; -} -#divdetails { - background-color: rgba(0, 0, 0, .25); - box-shadow: none; -} -.ui.inverted.menu { - border: 0 solid transparent; - background: transparent !important; -} -#ui.top.attached.tabular.menu { - background: rgb(0, 0, 0, .25) !important; -} -/* SEARCH BAR */ -.prompt { -background-color: rgba(0, 0, 0, .25) !important; -color: #FFF; -border-color: rgba(0, 0, 0, .25); -} -.ui.input>input { - background: rgba(0, 0, 0, 0.25) !important; - border: none; - color: #FFF !important; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.ui.input.focus>input, .ui.input>input:focus { - border-color: transparent; + +a { + color: #eee !important; + text-decoration: none; } -.ui.search>.results { - display: none; - position: absolute; - top: 100%; - left: 0; - -webkit-transform-origin: center top; - transform-origin: center top; - white-space: normal; - text-align: left; - text-transform: none; - background: #fff; - margin-top: .5em; - width: 18em; - border-radius: .28571429rem; - -webkit-box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15); - box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15); - border: 1px solid #d4d4d5; - z-index: 998; -} - -/* OVERVIEW */ -#fondblanc { - background-color: rgba(0, 0, 0, 0.25); +a:focus, +a:hover { + color: #ffffff; +} + +hr { + border-top: 1px solid var(--accent-color); +} + +/* scroller */ +::-webkit-scrollbar-corner { + background-color: hsla(0, 0%, 100%, .08); +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; + background: #1f1f1f; +} + +::-webkit-scrollbar-thumb { + -webkit-border-radius: 5px; + border-radius: 5px; + background-color: rgba(255, 255, 255, 0.35) !important; +} + + +/* Form Stuff */ + +.form-control { + color: #FFF; + background-color: rgba(0, 0, 0, .25) !important; + border: 1px solid rgba(0, 0, 0, .25); +} + +.form-control:focus { + background-color: #eee !important; + border-color: rgba(0, 0, 0, 0.51); + outline: 0; box-shadow: none; - color: #FFF !important; + color: black; } -.ui.input { + +.form-group i { color: #ffffff; } -.ui.table thead th { - color: #ffffff; + +.bootstrap-tagsinput { + color: #eee; + background-color: rgba(0, 0, 0, .25) !important; + border: 1px solid transparent !important; + } -.ui.table { - color: #ffffff; + +.bootstrap-tagsinput.focus { + background-color: #fff !important; + border-color: transparent; + outline: 0; + box-shadow: none; + color: black; } -.ui.table tr td { - border-top: 1px solid rgba(255, 255, 255, 0.25); + +/* Tables */ +.table { + color: #eee; } -.ui.selectable.table tbody tr:hover, .ui.table tbody tr td.selectable:hover { - background: hsla(0,0%,100%,.08) !important; - color: #ffffff!important; + +.table-striped tbody tr:nth-of-type(odd) { + background: rgb(0 0 0 / 8%); } -.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child, .ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child { - background-color: transparent !important; + +.table-striped tbody tr:nth-of-type(odd):hover, +table.dataTable tbody tr:hover { + background: rgb(255 255 255 / 8%); + transition: background 500ms; } -i.black.icon { - color: #ffffff !important; + +table.dataTable tbody tr { + background-color: transparent; } -.ui.label { - color: rgb(0, 0, 0) !important; + +table.dataTable tbody>tr.selected, +table.dataTable tbody>tr>.selected { + background-color: rgb(255 255 255 / 15%); } -.ui.progress .bar>.progress { - color: white !important; + +table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, +table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before { + border: 2px solid transparent; + font-family: monospace; } -.ui.inverted.menu .dropdown.item:hover, .ui.inverted.menu .link.item:hover, .ui.inverted.menu a.item:hover, .ui.link.inverted.menu .item:hover { - border-radius: 6px; + +/*Checkbox*/ +table.dataTable tbody td.select-checkbox:before, +table.dataTable tbody th.select-checkbox:before { + border: 1px solid #eee; } -/* MOVIES EDITOR */ -.ui.sortable.table thead th.sorted { - background: rgba(0,0,0,.05); - color: #ffffff; +.table td, +.table th { + border-color: rgb(255 255 255 / 25%); } -.ui.sortable.table thead th.sorted:hover { - background: hsla(0,0%,100%,.08); - color: #FFF; + +table.dataTable tr.dtrg-group td { + background-color: rgb(0 0 0 / 25%); } -.ui.sortable.table thead th { - color: #ffffff; + +/* Header */ +.topbar { + background: var(--main-bg-color); +} + +.topbar .top-navbar { + background-color: rgba(0, 0, 0, .7); +} + +.page-titles { + background: rgb(0 0 0 / 25%); + box-shadow: 0px 5px 20px rgb(0 0 0 / 20%); +} + +.page-titles .btn:hover:not(:disabled) { + color: #fff !important; +} + +.page-titles .btn { + color: hsla(0, 0%, 100%, .7) !important; +} + +.text-themecolor { + color: inherit !important; +} + +.fa-stack { + color: inherit; } -.ui.sortable.table thead th:hover { - background: hsla(0,0%,100%,.08); + +[type=button]:not(:disabled), +[type=reset]:not(:disabled), +[type=submit]:not(:disabled), +button:not(:disabled) { + cursor: pointer !important; +} + +.form-material .form-control, +.form-material .form-control.focus, +.form-material .form-control:focus { + background-image: linear-gradient(var(--accent-color), var(--accent-color)), linear-gradient(#e1e2e3, #e1e2e3); + color: #eee; +} + +.form-control:focus::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: #eee; +} + +.form-control:focus::-ms-input-placeholder { + /* Internet Explorer 10-11 */ + color: #eee; +} + +.form-control:focus::-ms-input-placeholder { + /* Microsoft Edge */ + color: #eee; +} + +.topbar .form-control { color: #FFF; + background-color: transparent !important; + border: 1px solid rgba(0, 0, 0, .25); } -.ui.menu .ui.dropdown .menu>.item { - background: #191a1c!important; - color: #FFF!important; + +.topbar ul.dropdown-user li a { + color: #eee; + background: var(--modal-bg-color); } -.ui.menu .ui.dropdown .menu>.item:hover { - color: #FFF !important; - background-color: hsla(0, 0%, 0%, 0.8) !important; + +.topbar ul.dropdown-user { + + background: var(--modal-bg-color); } -.ui.menu { - background: rgba(0, 0, 0, 0.25); + +.topbar ul.dropdown-user li a:hover { + background: rgb(255 255 255 / 7%); } -.ui.menu .dropdown.item .menu { - background: #191a1c!important; + +.buttons_bars { + position: absolute; } -.ui.segment { - -webkit-box-shadow: none; - box-shadow: none; + +.nav-item .typeahead__dropdown, +.typeahead__list { + background: var(--modal-bg-color); + border: 1px solid transparent; + box-shadow: 0 0 10px 1px #000; } -/* EDIT SERIES/MOVIE MODAL */ -.ui.modal>.header { - background: #323232; - color: #ffffff; + +.nav-item .typeahead__list>li { + border-top: solid 1px rgba(255, 255, 255, .25); } -.ui.modal>.content { - background: #282828; + +.typeahead__dropdown .typeahead__dropdown-item:not([disabled]).active>a, +.typeahead__dropdown .typeahead__dropdown-item:not([disabled])>a:focus, +.typeahead__dropdown .typeahead__dropdown-item:not([disabled])>a:hover, +.typeahead__list .typeahead__item:not([disabled]).active>a, +.typeahead__list .typeahead__item:not([disabled])>a:focus, +.typeahead__list .typeahead__item:not([disabled])>a:hover { + background-color: rgb(255 255 255 / .07); +} + +/* Sidebar */ +.left-sidebar { + position: absolute; + width: 240px; + height: 100%; + top: 0; + z-index: 20; + padding-top: 60px; + background: rgb(0 0 0 / 25%); + box-shadow: 0 0 0 rgba(0, 0, 0, 0.08); +} + +.sidebar-nav { + background: rgba(255, 255, 255, 0); + padding: 0; +} + +.card-no-border .sidebar-nav>ul>li>a.active { + background-color: hsla(0, 0%, 100%, .08); + border-left: 3px solid var(--accent-color); +} + +.sidebar-nav>ul>li>a.active i, +.sidebar-nav>ul>li>a:hover i { color: white; } -.ui.modal>.actions { - background: #323232; + +#sidebarnav .sidebar-nav>ul>li.active>a { + border-left: 3px solid var(--accent-color); + background: rgb(255 255 255 / 7%); } -.ui.modal .actions>.button { - margin-left: .75em; - font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif; - text-transform: uppercase; - transition: background-color .1s; + +#sidebarnav .sidebar-nav>ul>li.active>a i { + color: #eee; + font-size: 14px; } -.ui.modal > .close { - top: .7rem; - right: .4rem; + +.sidebar-nav>ul>li.active>a { + color: #eee; + border-left: 3px solid var(--accent-color); + background: hsla(0, 0%, 100%, .08); } -/* CANCEL BUTTON */ -.ui.button { - background: hsla(0,0%,100%,.25) !important; - color: #ffffff; - transition: background-color .1s; + +.sidebar-nav>ul>li.active>a i { + color: #eee; + font-size: 14px; } -.ui.button:hover, .ui.button:focus { - background-color: hsla(0,0%,100%,.3) !important; - color: #FFF; + +@media (min-width: 768px) { + .mini-sidebar .sidebar-nav #sidebarnav>li.active>a.active { + border-color: var(--accent-color); + } } -.ui.active.button:active, .ui.button:active { - background-color: hsla(0,0%,100%,.2) !important; - color: #ffffff; + +@media (min-width: 768px) { + .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a { + width: 260px; + background: var(--main-bg-color); + color: #ffffff; + border-color: rgba(255, 255, 255, .05); + } +} + +@media (min-width: 768px) { + .mini-sidebar .sidebar-nav #sidebarnav>li>ul { + + background: var(--main-bg-color); + display: none; + padding-left: 1px; + } +} + +@media (min-width: 768px) { + .mini-sidebar .sidebar-nav #sidebarnav li:hover { + position: relative; + background: rgba(255, 255, 255, .1); + } +} + +.sidebar-nav ul li ul { + padding-left: 0px; + border-left: 3px solid var(--accent-color); +} + +.sidebar-nav ul li ul li a { + padding-left: 60px; +} + +.sidebar-nav ul li a.active, +.sidebar-nav ul li a:hover { + background: rgba(255, 255, 255, .08); + +} + +/* Series page */ +#series .progress-bar { + background-color: var(--accent-color); +} + +#series .progress { + background-color: rgb(255 255 255 / 20%); } -/* SAVE BUTTON */ -.ui.blue.button, .ui.blue.buttons .button { - background-color: #cc7b19 !important; + +#series .badge-secondary, +#episodes_wrapper .badge-secondary { + background-color: var(--accent-color); +} + +.card-no-border .card { + background: var(--modal-bg-color); + border: solid 1px transparent; + box-shadow: 0 0 10px 1px #000; +} + +#seriesDetails .badge-secondary { color: #fff; - font-family: Open Sans Bold,Helvetica Neue,Helvetica,Arial,sans-serif; - text-transform: uppercase; - transition: background-color .1s; + background-color: var(--accent-color); } -.ui.blue.button:hover, .ui.blue.buttons .button:hover { - background-color: #e59029 !important; + +/* Movies page */ +#movies .progress-bar { + background-color: var(--accent-color); } -.ui.blue.button:active, .ui.blue.buttons .button:active { - background-color: #955a12 !important; + +#movies .progress { + background-color: rgb(255 255 255 / 20%); } -/* DROPDOWN */ -.ui.default.dropdown:not(.button)>.text, .ui.dropdown:not(.button)>.default.text { - color: rgba(191,191,191,.80); - color: #FFF; +#movies .badge-secondary { + background-color: var(--accent-color); } -.ui.modal>.content>.ui.selection.dropdown { - background: #555; +#movieDetails .badge-secondary { + color: #fff; + background-color: var(--accent-color); } -.ui.selection.active.dropdown { - border-color: transparent; - border: none; + +#movieSubtitles .badge-secondary { + background-color: var(--accent-color); } -.ui.selection.dropdown:focus { - border-color: transparent; + +/*Mass Edit*/ +.container-fluid .bg-dark { + background: var(--modal-bg-color) !important; } -.ui.selection.dropdown:focus .menu { - border-color: #282828; + +@media (min-width: 1024px) { + #edit_bar { + margin-left: 0px; + } } -.ui.selection.dropdown .menu>.item { - background-color: #191a1c; - color: #FFF; - border-top: none; + +/* History */ +table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, +table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before { + left: -15px; + background-color: var(--accent-color); } -.ui.selection.active.dropdown .menu { - border: none; + +/* Wanted page */ +#wanted_series .progress { + background-color: rgb(255 255 255 / 20%); } -.ui.selection.active.dropdown:hover { - border-color: transparent; + +#wanted_series .badge-secondary, +#wanted_series_badge .badge-secondary, +#wanted_movies_badge .badge-secondary, +#wanted_movies .badge-secondary { + background-color: var(--accent-color); } -.ui.dropdown .menu>.item:hover { - color: #FFF; - background-color: hsla(0, 0%, 0%, 0.8) !important; + +/* Buttons */ +.btn.focus, +.btn:focus { + outline: 0; + box-shadow: none; } -.ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before { - background: hsla(0,0%,100%,.3); + +.btn-info, +.btn-info.disabled { + background: var(--button-color); + border: 1px solid var(--button-color); + box-shadow: none; } -.ui.toggle.checkbox .box:hover::before, .ui.toggle.checkbox label:hover::before { - border-color: hsla(0,0%,100%,.3); + +.btn-info:hover, +.btn-info.disabled:hover { + background: var(--button-color-hover); + border: 1px solid var(--button-color-hover); + box-shadow: none; } -.ui.toggle.checkbox .box:hover::before, .ui.toggle.checkbox label:hover::before { - background-color: hsla(0,0%,100%,.3); + +.btn-info:not(:disabled):not(.disabled).active, +.btn-info:not(:disabled):not(.disabled):active, +.show>.btn-info.dropdown-toggle { + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); + opacity: .5; } -.ui.toggle.checkbox input:focus~.box:before, .ui.toggle.checkbox input:focus~label:before { - background-color: hsla(0,0%,100%,.3); + +.custom-control-input:checked~.custom-control-label::before { + color: #fff; + border-color: var(--button-color); + background-color: var(--button-color); } -.ui.checkbox input:focus~label { - color: hsla(0,0%,100%,.3); + +.dt-buttons .dt-button { + background: var(--button-color); + color: #eee; + border-color: var(--button-color); } -.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before { - background-color: #cc7b19 !important; + +.dt-buttons .dt-button:hover { + background: var(--button-color-hover); } -.ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before { - background-color: #cc7b19!important; + +button.dt-button:hover:not(.disabled), +div.dt-button:hover:not(.disabled), +a.dt-button:hover:not(.disabled) { + border: 1px solid transparent; + background: var(--button-color-hover); + border-color: var(--button-color-hover); + background-image: none !important; } -.ui.toggle.checkbox input:focus:checked~.box:before, .ui.toggle.checkbox input:focus:checked~label:before { - background-color: #cc7b19!important; + +button.dt-button.disabled, +div.dt-button.disabled, +a.dt-button.disabled { + color: #eee; + border: 1px solid var(--button-color); + background-color: var(--button-color); + background-image: none !important; + opacity: .5; } -.ui.multiple.dropdown>.label { - background: #f8f8f8; +button.dt-button.disabled:hover, +div.dt-button.disabled:hover, +a.dt-button.disabled:hover { + color: #eee; + border: 1px solid var(--button-color); + background-color: var(--button-color); + background-image: none !important; + opacity: .5; + cursor: not-allowed !important; } -a.ui.active.label:hover, a.ui.labels .active.label:hover { - background-color: #323232; - border-color: #323232; + +.btn-light:not(:disabled):not(.disabled).active, +.btn-light:not(:disabled):not(.disabled):active, +.show>.btn-light.dropdown-toggle { + color: #eee; + background-color: rgba(0, 0, 0, .25); + border-color: transparent; } -/* EDITOR BUTTON */ -.ui.basic.button, .ui.basic.buttons .button { - background: rgba(0, 0, 0, 0.25) none!important; - color: rgb(255, 255, 255)!important; +.btn-light { + background-color: rgba(0, 0, 0, .25); + border: 1px solid transparent; } -.ui.basic.active.button, .ui.basic.buttons .active.button { - color: rgb(255, 255, 255)!important; + +.btn-light:not(:disabled):not(.disabled).active:focus, +.btn-light:not(:disabled):not(.disabled):active:focus, +.show>.btn-light.dropdown-toggle:focus { + box-shadow: none; + border: solid 1px transparent; + outline: none; } -.ui.basic.button:hover, .ui.basic.buttons .button:hover { - background: hsla(0,0%,100%,.08) !IMPORTANT; - color: #fff!important; + +.bootstrap-select .dropdown-toggle:focus { + outline: none !important; + } -/* HISTORY PAGE */ -#bottommenu { - background-color: #323232 !important; +.btn-light.focus, +.btn-light:focus { + box-shadow: none; } -.ui.tabular.menu .active.item, .ui.segment { - background: none rgba(255,255,255,.08); + +.btn-light:hover { + background-color: rgb(0 0 0 / 25%); + border-color: transparent; } -.ui.tabular.menu .item:hover { - background-color: rgba(255,255,255,.08) !important; + +.btn-secondary, +.btn-secondary.disabled { + background: var(--button-color); + border: 1px solid var(--button-color); } -.ui.tabular.menu .item:visited { - background-color: rgba(255,255,255,.08) !important; + +.btn-secondary:hover { + background: var(--button-color-hover); + opacity: 1; + border: 1px solid var(--button-color-hover); } -.ui.attached:not(.message)+.ui.attached.segment:not(.top) { - background-color: transparent; - border: none; + +.btn-secondary.disabled:hover { + background: var(--button-color-hover); + opacity: 0.7; + border: 1px solid var(--button-color-hover); } -.ui.header { - color: #ffffff; + +.close, +.close:hover, +.close:focus { + color: #FFF !important; + opacity: 1; } -.ui.dividing.header { - border-bottom: none; + +.btn-default { + color: hsla(0, 0%, 100%, .7); + background-color: rgba(0, 0, 0, .25); + border-color: none; + outline-style: none; } -.ui.selection.dropdown { + +.btn-default:hover, +.btn-default.active, +.btn-default.active:hover { + color: #FFFFFF; + background-color: hsla(0, 0%, 100%, .08); + border-color: none; + outline-style: none; +} + +.btn-default.active.focus, +.btn-default.active:focus, +.btn-default.active:hover, +.btn-default:active.focus, +.btn-default:active:focus, +.btn-default:active:hover, +.open>.dropdown-toggle.btn-default.focus, +.open>.dropdown-toggle.btn-default:focus, +.open>.dropdown-toggle.btn-default:hover { + color: #fff; + background-color: hsla(0, 0%, 100%, .08); + border-color: #FFF; +} + +.btn { color: #FFF; - background: rgba(0, 0, 0, .25); + outline: 0 !important; } -/* SETTINGS PAGE */ +.btn.btn-lg.btn-block.x-search-auto { + color: #FFF; + background-color: rgba(0, 0, 0, .25); +} -.ui.list .list>.item .header, .ui.list>.item .header { +.btn.btn-lg.btn-block.x-search-auto:hover { color: #FFF; + background-color: rgba(255, 255, 255, 0.05); } -.ui.checkbox label, .ui.checkbox+label { - color: #ffffff; + +.btn.focus, +.btn:focus, +.btn:hover { + color: #fff; +} + +/* Loading */ +.preloader { + width: 100%; + height: 100%; + top: 0px; + position: fixed; + z-index: 99999; + background: rgb(0 0 0 / 7%); } -.ui.selection.visible.dropdown>.text:not(.default) { + +/* Pagination*/ +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { + color: #eee !important; + opacity: .1; +} + +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, +.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { + cursor: default; + color: #eee; + border: 1px solid transparent; + background: transparent; + box-shadow: none; +} + +.pagination .page-link { + position: relative; + display: block; + padding: .5rem .75rem; + margin-left: -1px; + line-height: 1.25; + background-color: rgb(0 0 0 / 15%); + border: 1px solid #00000000; +} + +.pagination>.active>a, +.pagination>.active>span, +.pagination>.active>a:hover, +.pagination>.active>span:hover, +.pagination>.active>a:focus, +.pagination>.active>span:focus { + background-color: rgb(0 0 0 / 35%); + border-color: rgb(0 0 0 / 35%); +} + +.pagination .page-item.active .page-link { + z-index: 1; color: #fff; + background-color: var(--accent-color); + border-color: var(--accent-color); } -.ui.checkbox label:hover, .ui.checkbox+label:hover { - color: #db2828; + +.dataTables_wrapper .dataTables_paginate .paginate_button { + border: 1px solid rgb(221 221 221 / 8%); +} + +.pagination>li>a:hover, +.pagination>li>span:hover, +.pagination>li>a:focus, +.pagination>li>span:focus { + background-color: rgb(242 244 248 / 15%); +} + +.dataTables_wrapper .dataTables_paginate .paginate_button:hover { + color: white; + border: 1px solid #00000000; + background-color: #009efb00; } -.ui.attached.info.message, .ui.info.message { - -webkit-box-shadow: none; + +.pagination .page-link:focus { box-shadow: none; } -.ui.info.message { - background-color: rgba(255,255,255,.08); - color: #00c1ff; + +/* Settings */ +.dropdown-menu, +.topbar .dropdown-menu { + background: var(--modal-bg-color); + cursor: pointer; + box-shadow: 0 0 5px 0px rgb(0 0 0 / 50%); } -.ui.input { - color: #FFF !important; + +.dropdown-item.active, +.dropdown-item:active { + color: #fff; + text-decoration: none; + background-color: rgb(255 255 255 / 0.25); } -/* LOGS PAGE */ -table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { - background-color: transparent; +.dropdown-item:focus, .dropdown-item:hover { + background-color: rgb(255 255 255 / 7%); } -table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { - background-color: hsla(0, 0%, 100%, .25); +.dropdown-menu>li>a:hover { + color: white !important; + background-color: rgb(255 255 255 / 35%); } -table.dataTable tbody tr { - background-color: transparent; + +/* General */ + + +/* Notifications */ +.alert-secondary { + color: #ffffff; + background-color: rgb(255 255 255 / 25%); + border-color: transparent; } -.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { - color: #ffffff; + +.alert-secondary a { + color: var(--accent-color) !important; + text-decoration: none; } -.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { - color: #fff !important; + +.alert-secondary a:hover { + color: white !important; + text-decoration: none; } -.dataTables_wrapper .dataTables_paginate .paginate_button { - color: #FFF !important; + +.badge-info { + background-color: var(--accent-color); + margin-left: 5px !important; +} + +/* Modal */ + +.modal-content { + box-shadow: 0 0 10px 1px #000; + border-radius: 3px; + background: var(--modal-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} +.modal-header { + border-bottom: 1px solid var(--accent-color); + } -table.dataTable.no-footer { - border-bottom: none; +.modal-footer { + border-top: 1px solid var(--accent-color); } -table.dataTable thead th, table.dataTable thead td { - border-bottom: none; +.modal-content .badge-secondary { + color: #fff; + background-color: var(--accent-color); + padding: 5px; } -/* SCAN POPUP */ -.noty_theme__semanticui.noty_type__info, .noty_theme__semanticui.noty_type__information { - background-color: #191a1c !important; - color: #FFF !important; - box-shadow: none !important; + +.modal-content button:focus { + outline: none !important; } -/* TOOLTIP */ -[data-tooltip]:after { - border: 1px solid #1b1c1d; - background: #1b1c1d; - color: rgb(255, 255, 255); + +/* Chart */ +.chartjs-render-monitor { + filter: invert(1); } -[data-tooltip]:before { - -webkit-box-shadow: none; - box-shadow: none; + +.highlight pre code { + font-size: inherit; + color: #eee; +} + +.highlight { + background-color: rgb(255 255 255 / 0.08); + border-radius: 3px; +} + +/* Mobile */ +@media (max-width: 767px) { + .mini-sidebar .left-sidebar { + background: var(--modal-bg-color); + } + +#buttons_bars .col-8 { + -ms-flex: none !important; + flex: auto; + max-width: fit-content; + padding-left: 5px; + padding-right: 5px; + display: inline-grid; + position: absolute; + z-index: 11; +} + + .page-titles .btn { + height: 50px !important; + width: 55px !important; + padding: 0 0; + } + +#buttons_bars .col-4 { + -ms-flex: none !important; + flex: auto; + display: grid; + padding-right: 5px !important; + padding-bottom: 5px !important; + position: inherit; + z-index: 10; + padding-left: 85%; } -[data-tooltip]:not([data-position]):before { - background: #1b1c1d; } \ No newline at end of file diff --git a/CSS/themes/bazarr/dark.css b/CSS/themes/bazarr/dark.css index 48f8baf2..d909095f 100644 --- a/CSS/themes/bazarr/dark.css +++ b/CSS/themes/bazarr/dark.css @@ -16,4 +16,9 @@ :root { --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.25); + --accent-color-hover: rgba(255, 255, 255, 0.45); } \ No newline at end of file diff --git a/CSS/themes/bazarr/hotline.css b/CSS/themes/bazarr/hotline.css index bbf31289..0fcb9800 100644 --- a/CSS/themes/bazarr/hotline.css +++ b/CSS/themes/bazarr/hotline.css @@ -16,4 +16,9 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; } \ No newline at end of file diff --git a/CSS/themes/bazarr/organizr-dark.css b/CSS/themes/bazarr/organizr-dark.css new file mode 100644 index 00000000..33a3ae72 --- /dev/null +++ b/CSS/themes/bazarr/organizr-dark.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* BAZARR ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/bazarr/bazarr-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; +} \ No newline at end of file diff --git a/CSS/themes/bazarr/plex.css b/CSS/themes/bazarr/plex.css index e86ffde8..4a452434 100644 --- a/CSS/themes/bazarr/plex.css +++ b/CSS/themes/bazarr/plex.css @@ -16,4 +16,9 @@ :root { --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; } \ No newline at end of file diff --git a/CSS/themes/bazarr/space-gray.css b/CSS/themes/bazarr/space-gray.css index ebea5a59..5ad59e38 100644 --- a/CSS/themes/bazarr/space-gray.css +++ b/CSS/themes/bazarr/space-gray.css @@ -16,4 +16,9 @@ :root { --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; } \ No newline at end of file diff --git a/CSS/themes/bitwarden/aquamarine.css b/CSS/themes/bitwarden/aquamarine.css new file mode 100644 index 00000000..e2fe32ff --- /dev/null +++ b/CSS/themes/bitwarden/aquamarine.css @@ -0,0 +1,26 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* BITWARDEN AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #12afa0; + --accent-color-hover: #fff; + --text: #eee; + --text-hover: #fff; + --link-color: #12afa0; +} \ No newline at end of file diff --git a/CSS/themes/bitwarden/bitwarden-base.css b/CSS/themes/bitwarden/bitwarden-base.css new file mode 100644 index 00000000..a62566af --- /dev/null +++ b/CSS/themes/bitwarden/bitwarden-base.css @@ -0,0 +1,176 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +img.logo { + filter: invert(100); +} +body.layout_frontend,body { + background: var(--main-bg-color); + color: var(--text); +} +/* LINKS */ +a { + color: var(--link-color); +} +a:hover { + color: var(--link-color); + opacity: .8; +} +/* TEXT */ +.text-muted,.form-check-block .form-check-label > small,.modal-header small, .table { + color: var(--text) !important; + opacity: .8; +} +.table-hover tbody tr:hover { + color: var(--text-hover); + background-color: rgba(255, 255, 255, .08); +} +h3 { + color:white !important; +} + +/* NAVBAR */ +.navbar { + background-color: rgb(0 0 0 / 25%) !important; +} +/* CARDS */ +.card { + background-color: rgba(255,255,255,0.07); +} +app-vault-groupings .card .card-body a { + color: var(--text); +} +app-vault-groupings .card li.active > a:first-of-type, app-vault-groupings .card li.active > div a:first-of-type,app-vault-groupings .card li.active > div > .fa { + color: var(--accent-color); +} +body > app-root > app-user-layout > app-tools > div > div > div.col-9 > app-password-generator > div.card.card-password.bg-light.my-4 { + background-color: rgb(0 0 0 / 15%) !important; +} +.password-number { + color: var(--accent-color); +} +/* MODALS */ +.modal-content,.modal-footer { + background: var(--modal-bg-color); +} +.close, .close:hover { + color: #fff; +} +.close:focus { + outline: none; +} + +/* FORMS */ +.form-control:focus { + box-shadow: none; + border-color: transparent; +} +.form-control { + color: var(--text); + background-color: rgb(0 0 0 / 0.25); + border: 1px solid transparent; + +} +.form-control:disabled, .form-control[readonly] { + background-color: rgb(255 255 255 / 50%); + opacity: 1; +} +/* DROPDOWN MENU */ +.dropdown-menu { + background: var(--modal-bg-color); + border: 1px solid transparent; + box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); +} +.dropdown-item,.dropdown-item-text { + color: var(--text); +} +.dropdown-item:hover, .dropdown-item:focus { + color: var(--text-hover); + text-decoration: none; + background-color: rgb(255 255 255 / 0.08); +} +a.text-danger:hover, a.text-danger:focus { + color: #dd4b39 !important; + background-color: rgb(255 255 255 / 0.08) !important; +} +.dropdown-menu .text-danger { + font-weight: bold !important; + background: rgb(0 0 0 / 20%) !important; +} +/* SETTINGS */ +.list-group-item.active { + color: var(--text); + background-color: rgb(255 255 255 / 10%); + border-left: 3px solid var(--accent-color); +} +.callout { + background-color: rgb(255 255 255 / 15%); +} + +.list-group-item { + background-color: rgb(0 0 0 / 25%); + border: 1px solid rgb(255 255 255 / 8%); +} +/* BUTTONS */ +.btn-link { + color: var(--button-color); +} +.btn-link:hover { + color: var(--button-color); + opacity: .8; + transition: 0.15s; +} +.btn-primary { + background-color: var(--button-color); + border-color: var(--button-color); +} +.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active { + background-color: var(--button-color); + opacity: .8; + transition: 0.15s; + border-color: var(--button-color) +} +.btn-primary:focus, .swal2-popup .swal2-actions button.swal2-confirm:focus, .btn-primary.focus, .swal2-popup .swal2-actions button.focus.swal2-confirm, +.btn-primary:not(:disabled):not(.disabled):active:focus, .swal2-popup .swal2-actions button.swal2-confirm:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .swal2-popup .swal2-actions button.swal2-confirm:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus, .swal2-popup .swal2-actions .show > button.dropdown-toggle.swal2-confirm:focus{ + box-shadow: none; +} +.btn[class*="btn-outline-"]:not(:hover), .swal2-popup .swal2-actions button[class*="btn-outline-"]:not(:hover) { + border-color: var(--button-color); + background-color: var(--button-color); + color: var(--text-hover); +} +.btn-outline-secondary:hover, .swal2-popup .swal2-actions button.swal2-cancel:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} +.btn-outline-secondary:hover:not(:disabled), .swal2-popup .swal2-actions button.swal2-cancel:hover:not(:disabled) { + color: var(--text-hover); +} +.btn-outline-primary:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} +.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { + color: #fff; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} +.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { + box-shadow: none; +} +.btn-outline-secondary:not(:disabled):not(.disabled):active, .swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle, .swal2-popup .swal2-actions .show > button.dropdown-toggle.swal2-cancel { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} \ No newline at end of file diff --git a/CSS/themes/bitwarden/dark.css b/CSS/themes/bitwarden/dark.css new file mode 100644 index 00000000..2340b702 --- /dev/null +++ b/CSS/themes/bitwarden/dark.css @@ -0,0 +1,26 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* BITWARDEN DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #fff; + --accent-color-hover: rgba(255, 255, 255, 0.45); + --text: #eee; + --text-hover: #fff; + --link-hover: rgba(255, 255, 255, 0.45); +} \ No newline at end of file diff --git a/CSS/themes/bitwarden/hotline.css b/CSS/themes/bitwarden/hotline.css new file mode 100644 index 00000000..63563cb6 --- /dev/null +++ b/CSS/themes/bitwarden/hotline.css @@ -0,0 +1,26 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* BITWARDEN HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --text: #eee; + --text-hover: #fff; + --link-hover: #F44336; +} \ No newline at end of file diff --git a/CSS/themes/bitwarden/organizr-dark.css b/CSS/themes/bitwarden/organizr-dark.css new file mode 100644 index 00000000..fbd1e612 --- /dev/null +++ b/CSS/themes/bitwarden/organizr-dark.css @@ -0,0 +1,26 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* BITWARDEN ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color:#2cabe3; + --accent-color-hover: #fff; + --text: #eee; + --text-hover: #fff; + --link-color: #2cabe3; +} \ No newline at end of file diff --git a/CSS/themes/bitwarden/plex.css b/CSS/themes/bitwarden/plex.css new file mode 100644 index 00000000..5bb50ad5 --- /dev/null +++ b/CSS/themes/bitwarden/plex.css @@ -0,0 +1,26 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* BITWARDEN PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --text: #eee; + --text-hover: #fff; + --link-color:#fff; +} \ No newline at end of file diff --git a/CSS/themes/bitwarden/space-gray.css b/CSS/themes/bitwarden/space-gray.css new file mode 100644 index 00000000..d38aa0db --- /dev/null +++ b/CSS/themes/bitwarden/space-gray.css @@ -0,0 +1,26 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* BITWARDEN SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/bitwarden/bitwarden-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #81a6b7; + --accent-color-hover: #81a6b7; + --text: #eee; + --text-hover: #fff; + --link-color: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/calibreweb/calibreweb-base.css b/CSS/themes/calibreweb/calibreweb-base.css index 690d0809..e5524dad 100644 --- a/CSS/themes/calibreweb/calibreweb-base.css +++ b/CSS/themes/calibreweb/calibreweb-base.css @@ -15,17 +15,20 @@ /* "Re-skin" of CaliBlur https://github.com/leram84/layer.Cake/tree/master/caliBlur */ /* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ body:not(.read-frame) { - background: var(--color-background) !important; + background: var(--main-bg-color) !important; background-image: none; } .blur-wrapper:after { background: var(--modal-bg-color) !important; } +body>.container-fluid { + background: var(--main-bg-color); +} body.login:not(.read-frame), body.shelfcreate, body.shelfedit { - background: var(--color-background) !important; + background: var(--main-bg-color) !important; } @media only screen and (max-width: 767px) { .navbar-collapse.collapse { background: var(--modal-bg-color) !important; } - } \ No newline at end of file + } diff --git a/CSS/themes/calibreweb/organizr-dark.css b/CSS/themes/calibreweb/organizr-dark.css new file mode 100644 index 00000000..ba111ab6 --- /dev/null +++ b/CSS/themes/calibreweb/organizr-dark.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* CALIBRE-WEB ORGANIZR-DARK THEME */ +/* Set theme to CaliBlur in UI Configuration -> View Configuration -> Theme -> CaliBlur -> Submit */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/calibreweb/calibreweb-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --color-primary: #2cabe3; + --color-secondary: #2cabe3; + --color-secondary-hover: rgb(44 171 227 / .8); + --color-background-mobile: #1f1f1f; +} \ No newline at end of file diff --git a/CSS/themes/deluge/aquamarine.css b/CSS/themes/deluge/aquamarine.css index c7261e46..f7c1c0c4 100644 --- a/CSS/themes/deluge/aquamarine.css +++ b/CSS/themes/deluge/aquamarine.css @@ -16,5 +16,7 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --progress-color: #4c95af; + --progress-color: #009688; + --button-color: #009688; + --button-color-hover: #12afa0; } \ No newline at end of file diff --git a/CSS/themes/deluge/dark.css b/CSS/themes/deluge/dark.css index 1667c565..5fffb9d6 100644 --- a/CSS/themes/deluge/dark.css +++ b/CSS/themes/deluge/dark.css @@ -16,5 +16,7 @@ :root { --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --progress-color: #3d3d3d; - } + --progress-color: #3d3d3d; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); +} diff --git a/CSS/themes/deluge/deluge-base.css b/CSS/themes/deluge/deluge-base.css index 02c45307..019fd29a 100644 --- a/CSS/themes/deluge/deluge-base.css +++ b/CSS/themes/deluge/deluge-base.css @@ -671,28 +671,31 @@ font-size: 16px; font-weight: normal; } + #tbar-deluge-text * { + color: white !important; + } /* Buttons hover */ .x-btn{ font:normal 11px 'Roboto', tahoma, verdana, helvetica; } .x-window-bc .x-window-footer .x-btn { - background-color: rgba(255, 255, 255, 0.08); + background-color: var(--button-color); } .x-window-bc .x-window-footer .x-btn:hover { - background-color: rgba(255, 255, 255, 0.15); + background-color: var(--button-color-hover); } .x-form-file-wrap .x-btn { position: absolute; right: 0; z-index: 1; - background: rgba(255, 255, 255, 0.08); + background: var(--button-color); } .x-form-file-wrap:hover .x-form-file-btn:hover .x-btn:hover { position: absolute; right: 0; z-index: 1; - background: rgba(255, 255, 255, 0.15); + background: var(--button-color-hover); } .x-btn button{ diff --git a/CSS/themes/deluge/hotline.css b/CSS/themes/deluge/hotline.css index 9c2b4cf2..e73223a2 100644 --- a/CSS/themes/deluge/hotline.css +++ b/CSS/themes/deluge/hotline.css @@ -16,5 +16,7 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --progress-color: #df6c4c; + --progress-color: #df6c4c; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); } \ No newline at end of file diff --git a/CSS/themes/deluge/organizr-dark.css b/CSS/themes/deluge/organizr-dark.css new file mode 100644 index 00000000..c7e3b48f --- /dev/null +++ b/CSS/themes/deluge/organizr-dark.css @@ -0,0 +1,22 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* DELUGE ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/deluge/deluge-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --progress-color: #2cabe3; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + } \ No newline at end of file diff --git a/CSS/themes/deluge/plex.css b/CSS/themes/deluge/plex.css index 26e31d52..5b494256 100644 --- a/CSS/themes/deluge/plex.css +++ b/CSS/themes/deluge/plex.css @@ -17,4 +17,6 @@ --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; --progress-color: #cc7b19; - } \ No newline at end of file + --button-color: #cc7b19; + --button-color-hover: #e59029; +} \ No newline at end of file diff --git a/CSS/themes/deluge/space-gray.css b/CSS/themes/deluge/space-gray.css index e463f4ae..fb5bf69c 100644 --- a/CSS/themes/deluge/space-gray.css +++ b/CSS/themes/deluge/space-gray.css @@ -17,4 +17,6 @@ --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --progress-color: #607D8B; + --button-color: #607D8B; + --button-color-hover: #81a6b7; } \ No newline at end of file diff --git a/CSS/themes/duplicacy/aquamarine.css b/CSS/themes/duplicacy/aquamarine.css new file mode 100644 index 00000000..c8c67b9a --- /dev/null +++ b/CSS/themes/duplicacy/aquamarine.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* DUPLICACY AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/duplicacy/duplicacy-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --accent-color: #12afa0; + --accent-color-hover: #fff; + --text: #eee; + --text-hover: #fff; + --link-color: #12afa0; +} \ No newline at end of file diff --git a/CSS/themes/duplicacy/dark.css b/CSS/themes/duplicacy/dark.css new file mode 100644 index 00000000..7de188a4 --- /dev/null +++ b/CSS/themes/duplicacy/dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* DUPLICACY DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/duplicacy/duplicacy-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #fff; + --accent-color-hover: rgba(255, 255, 255, 0.45); + --text: #eee; + --text-hover: #fff; + --link-hover: rgba(255, 255, 255, 0.45); +} \ No newline at end of file diff --git a/CSS/themes/duplicacy/duplicacy-base.css b/CSS/themes/duplicacy/duplicacy-base.css new file mode 100644 index 00000000..af6fe98b --- /dev/null +++ b/CSS/themes/duplicacy/duplicacy-base.css @@ -0,0 +1,566 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + + +body { + background: var(--main-bg-color); +} + +a { + color: var(--link-color); +} + +a:hover { + color: #fff; +} + +a.disabled-link { + color: #666; +} + +/* Scrollbar */ +@media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* TEXT */ +body, +.card, +.category, +.card label, +.card .labels p, +.card .title, +.card .stats, +.vis-time-axis .vis-text, +.footer .copyright, +.navbar-default .navbar-brand, +.sidebar .nav li>a, +.off-canvas-sidebar .nav li>a { + color: var(--text) !important; +} + +.main-panel { + background: var(--main-bg-color); +} + +.content .card { + box-shadow: none; +} + +.text-danger { + color: #f05050; +} + +.text-danger:hover { + color: #ec2626; +} + +.text-primary { + color: var(--accent-color); +} + +.text-primary:hover { + color: var(--accent-color-hover); +} + +/* PLACEHOLDER TEXT */ +::placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-moz-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-ms-input-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +::-webkit-input-placeholder { + color: var(--text) !important; + opacity: .5; +} + +/* CARDS */ +.card { + background: transparent +} + +.col-sm-6 .card, +.col-md-12 .card { + background: transparent !important; +} + +.card-container, +.col-xs-4 .card, +.col-xs-12 .card, +.col-xs-8 .card { + background: rgb(255 255 255 / 8%) !important; +} + +#schedule-0, +#schedule-1, +#schedule-2, +#schedule-3, +#schedule-4, +#schedule-5, +#schedule-6, +#schedule-7, +#schedule-8, +#schedule-9, +#schedule-10, +#schedule-11, +#schedule-12, +#schedule-13, +#schedule-14, +#schedule-15, +#schedule-16, +#schedule-17, +#schedule-18, +#schedule-19, +#schedule-20 { + background-color: rgb(255 255 255 / 8%); +} + +/* TIMELINE */ +.vis-timeline { + border: 1px solid rgb(255 255 255 / 20%); +} + +/* CHARTS */ +.ct-label { + fill: var(--text); + color: var(--text); +} + +.ct-grid { + stroke: var(--text); +} + +.tab-content { + border-color: transparent !important; +} + +.vis-labelset .vis-label .vis-inner { + color: var(--text); +} + +/* STORAGE PAGE */ +.card .nav-tabs>li.active>a, +.card .nav-tabs>li.active>a:focus, +.card .nav-tabs>li.active>a:hover { + color: var(--text); + cursor: default; + background-color: rgba(0, 0, 0, .25); + border: 1px solid rgba(255, 255, 255, .25); + border-bottom-color: #eee; + border-radius: 6px 6px 0 0; +} + +.card .nav>li>a:hover, +.card .nav>li>a:focus { + background-color: rgba(255, 255, 255, .07); + border: 1px solid transparent; +} + +/* NAVBAR */ +.navbar-default .navbar-toggle .icon-bar { + background-color: var(--text); +} + +.navbar-default { + background-color: rgb(0 0 0 / 26%); + border-bottom: 1px solid rgb(255 255 255 / 25%); +} + +/* SIDEBAR */ +.sidebar[data-background-color="black"]:after, +.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%); +} + +.sidebar .nav li.active>a:before, +.sidebar .nav li.active>a:after { + border-right: 17px solid var(--accent-color); +} + +@media (min-width: 992px) { + + .off-canvas-sidebar .nav li.active>a:before, + .off-canvas-sidebar .nav li.active>a:after { + border-right: 17px solid var(--accent-color); + } +} + +.sidebar[data-active-color="success"] .nav li.active>a, +.off-canvas-sidebar[data-active-color="success"] .nav li.active>a { + color: var(--accent-color) !important; +} + +.sidebar .nav li>a:hover { + color: var(--text-hover) !important; +} + +.sidebar .sidebar-wrapper { + box-shadow: none; +} + +/* MODAL */ +.modal-content { + background: var(--modal-bg-color); + border: 1px solid transparent; +} + +.modal-header { + border-bottom: 1px solid rgb(255 255 255 / 25%); +} + +.modal-footer { + border-top: 1px solid rgb(255 255 255 / 25%); +} + +.modal-body .nav-tabs>li.active>a, +.nav-tabs>li.active>a:focus, +.nav-tabs>li.active>a:hover { + color: var(--text); + cursor: default; + background-color: rgba(0, 0, 0, .25); + border: 1px solid transparent; + border-bottom-color: transparent; +} + +.modal-body .nav>li>a:hover, +.nav>li>a:focus { + background-color: transparent; +} + +.modal-body .nav-tabs>li.active>a:hover { + background-color: rgba(0, 0, 0, .25); + border: 1px solid transparent; +} + +.modal-body .nav-tabs>li>a:hover { + border-color: #fff3 #fff3 #fff3; + color: var(--text-hover) +} + +.modal-body .nav-tabs>li>a { + color: var(--text) +} + +#modal_storage_info_tab_content { + border: none !important; +} + +.modal-body .nav .open>a, +.nav .open>a:focus, +.nav .open>a:hover { + background-color: rgb(0 0 0 / 25%); + border-color: transparent; +} + +/* DROPDOWN */ +.dropdown-menu { + background: var(--modal-bg-color); +} + +.dropdown a { + color: var(--text) !important; +} + +.dropdown a:hover { + color: var(--text-hover) !important; +} + +/* FORMS */ +.form-control.border-input { + border: 1px solid transparent; +} + +.form-control, +textarea { + background-color: rgba(0, 0, 0, .25); + color: var(--text); +} + +.form-control:focus { + background-color: rgb(0 0 0 / 50%); +} + +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: rgba(0, 0, 0, .15); +} + +#input_s3_provider:focus, +#schedule_frequency:focus, +#modal_restore_storage:focus, +#modal_restore_id:focus, +#modal_restore_revision:focus, +#job_type:focus, +#job_repository:focus, +#backup_storage:focus, +#administration_expiration:focus { + background: white; + color: black; +} + +.form-check-label { + word-break: break-word; +} + +/* BUTTONS */ +.btn { + color: var(--button-text); + border-width: 1px; + border-radius: 4px; +} + +.main-panel .btn:hover, +.main-panel .btn:focus { + background: transparent; +} + +.timepicker-spinner .btn:hover, +.timepicker-spinner .btn:focus { + background-color: rgba(255, 255, 255, .08); + color: var(--text-hover); + border: 1px solid transparent; +} + +.timepicker-spinner .btn { + border: 1px solid transparent; +} + +.timepicker-spinner .input-group-btn-vertical { + border-left: 1px solid transparent; +} + +.btn-info.btn-fill { + color: var(--button-text); + background-color: var(--button-color); + border: var(--button-color); +} + +.btn-info.btn-fill:hover, +.btn-info.btn-fill:active, +.btn-info.btn-fill.active, +.btn-info.btn-fill:focus { + background: var(--button-color-hover); + border: var(--button-color-hover); +} + +.btn-primary { + border-color: var(--button-color); + background: var(--button-color); + color: var(--button-text); +} + +.btn-primary:focus, +.btn-primary:active:focus { + border-color: var(--button-color-hover); + color: var(--text-hover); + background-color: var(--button-color-hover); +} + +.btn-primary:hover { + border-color: var(--button-color-hover); + color: var(--text-hover); + background-color: var(--button-color-hover); +} + +.btn-primary.btn-fill { + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); +} + +.btn-primary.btn-fill:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + +} + +div>div>div.modal-footer>button.btn.btn-default.pull-left, +.navbar .navbar-nav>li>a.btn-danger.btn-fill, +.btn-danger.btn-fill { + border-color: #f05050; + background-color: #f05050; + color: var(--button-text); +} + +div>div>div.modal-footer>button.btn.btn-default.pull-left:hover, +div>div>div.modal-footer>button.btn.btn-default.pull-left:focus, +.navbar .navbar-nav>li>a.btn-danger.btn-fill:hover, +.navbar .navbar-nav>li>a.btn-danger.btn-fill:focus, +.btn-danger.btn-fill:hover, +.btn-danger.btn-fill:focus { + border-color: #ec2626; + color: var(--text-hover); + background-color: #ec2626; +} + +div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default { + border-color: #f05050; + background-color: #f05050; + color: var(--button-text); +} + +div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default:hover, +div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.btn-default:focus { + border-color: #ec2626; + color: var(--text-hover); + background-color: #ec2626; +} + +.close { + color: #fff +} + +.navbar .navbar-nav>li>a.btn-success, +.btn-success { + border-color: var(--button-color); + color: var(--button-color); +} + +.navbar .navbar-nav>li>a.btn-success:hover, +.navbar .navbar-nav>li>a.btn-success:focus, +.navbar .navbar-nav>li>a.btn-success:active, +.navbar .navbar-nav>li>a.btn-success.active, +.open>.navbar .navbar-nav>li>a.btn-success.dropdown-toggle, +.btn-success:hover, +.btn-success:focus, +.btn-success:active, +.btn-success.active, +.open>.btn-success.dropdown-toggle { + background-color: var(--button-color-hover); + color: var(--text-hover); + border-color: var(--button-color-hover); +} + +.radio-box input:checked~.radio-button { + background-color: var(--button-color); +} + +/* TABLES */ +.table>tbody>tr.active>td, +.table>tbody>tr.active>th, +.table>tbody>tr>td.active, +.table>tbody>tr>th.active, +.table>tfoot>tr.active>td, +.table>tfoot>tr.active>th, +.table>tfoot>tr>td.active, +.table>tfoot>tr>th.active, +.table>thead>tr.active>td, +.table>thead>tr.active>th, +.table>thead>tr>td.active, +.table>thead>tr>th.active, +.row-clickable.active { + background-color: rgb(0 0 0 / 25%); +} + +.fixed-header th { + background: var(--main-bg-color); +} + +.table thead tr>th, +.table thead tr>td, +.table tbody tr>th, +.table tbody tr>td, +.table tfoot tr>th, +.table tfoot tr>td, +hr { + border-top: 1px solid rgb(255 255 255 / 20%); +} + +.list-group-item { + background-color: transparent; +} + +.list-group-item.active, +.list-group-item.active:focus, +.list-group-item.active:hover { + background-color: var(--accent-color); + border-color: var(--accent-color); +} + +/* PROGRESS BARS */ +.progress { + background-color: rgba(0, 0, 0, 0.25); +} + +.progress-bar { + background-color: var(--accent-color); +} + +.progress span { + color: var(--text-hover); +} + +/* FOOTER */ +.main-panel>.footer { + background: rgb(0 0 0 / 0.25); +} + +/* MOBILE */ +@media (max-width: 991px) { + .off-canvas-sidebar .sidebar-wrapper { + box-shadow: 0 0 10px 0px #000000; + background: var(--modal-bg-color); + } + + .off-canvas-sidebar .nav li.active>a:before, + .off-canvas-sidebar .nav>li.active>a:after { + border-left: 17px solid var(--accent-color); + } +} diff --git a/CSS/themes/duplicacy/hotline.css b/CSS/themes/duplicacy/hotline.css new file mode 100644 index 00000000..dc14d1a1 --- /dev/null +++ b/CSS/themes/duplicacy/hotline.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* DUPLICACY HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/duplicacy/duplicacy-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --text: #eee; + --text-hover: #fff; + --link-hover: #F44336; +} \ No newline at end of file diff --git a/CSS/themes/duplicacy/organizr-dark.css b/CSS/themes/duplicacy/organizr-dark.css new file mode 100644 index 00000000..109c1d62 --- /dev/null +++ b/CSS/themes/duplicacy/organizr-dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* DUPLICACY ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/duplicacy/duplicacy-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --button-text: #eee; + --accent-color:#2cabe3; + --accent-color-hover: #fff; + --text:#96a2b4; + --text-hover: #fff; + --link-color: #2cabe3; +} \ No newline at end of file diff --git a/CSS/themes/duplicacy/plex.css b/CSS/themes/duplicacy/plex.css new file mode 100644 index 00000000..df974982 --- /dev/null +++ b/CSS/themes/duplicacy/plex.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* DUPLICACY PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/duplicacy/duplicacy-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --text: #eee; + --text-hover: #fff; + --link-color:#fff; +} \ No newline at end of file diff --git a/CSS/themes/duplicacy/space-gray.css b/CSS/themes/duplicacy/space-gray.css new file mode 100644 index 00000000..b88c25ad --- /dev/null +++ b/CSS/themes/duplicacy/space-gray.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* DUPLICACY SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/duplicacy/duplicacy-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --accent-color: #81a6b7; + --accent-color-hover: #81a6b7; + --text: #eee; + --text-hover: #fff; + --link-color: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/filebrowser/organizr-dark.css b/CSS/themes/filebrowser/organizr-dark.css new file mode 100644 index 00000000..bfdaa244 --- /dev/null +++ b/CSS/themes/filebrowser/organizr-dark.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* FILEBROWSER ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/filebrowser/filebrowser-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + } \ No newline at end of file diff --git a/CSS/themes/gaps/aquamarine.css b/CSS/themes/gaps/aquamarine.css new file mode 100644 index 00000000..b3681421 --- /dev/null +++ b/CSS/themes/gaps/aquamarine.css @@ -0,0 +1,25 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GAPS AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gaps/gaps-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; + --accent-color-hover: #12afa0; + --text: #eee; + --text-hover: #fff; +} \ No newline at end of file diff --git a/CSS/themes/gaps/dark.css b/CSS/themes/gaps/dark.css new file mode 100644 index 00000000..85aa7a45 --- /dev/null +++ b/CSS/themes/gaps/dark.css @@ -0,0 +1,25 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GAPS DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gaps/gaps-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.25); + --accent-color-hover: rgba(255, 255, 255, 0.45); + --text: #eee; + --text-hover: #fff; + } \ No newline at end of file diff --git a/CSS/themes/gaps/gaps-base.css b/CSS/themes/gaps/gaps-base.css new file mode 100644 index 00000000..4d3e29a2 --- /dev/null +++ b/CSS/themes/gaps/gaps-base.css @@ -0,0 +1,199 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +body { + background: var(--main-bg-color); + color: var(--text); +} +/* Scrollbar */ + @media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} + ::-webkit-scrollbar { + width: 14px; + } + ::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0,0%,100%,.2); + background-clip: padding-box; + } + ::-webkit-scrollbar-track { + background-color: transparent; + } + ::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0,0%,100%,.5); + background-clip: padding-box; + } +a { + color: var(--accent-color); + +} +a:hover { + color: var(--accent-color-hover); + text-decoration: underline; +} +.text-primary { + color: var(--text)!important; +} +.text-muted { + color: var(--text)!important; + opacity: .8; +} + /* Header */ +.bg-primary { + background-color: transparent !important; + background: rgba(0, 0, 0, .25) !important; +} +.navbar .list-ul-active,.info-circle-active, .arrow-clockwise-active, .gear-active, .rss-active, .exclamation-triangle-active, .collection-fill-active { + background-color: var(--accent-color); +} +.bg-primary .navbar-nav .active>.nav-link { + color: var(--accent-color) !important; +} + +/* Tables */ +table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd, table.dataTable tbody tr { + background-color: rgba(0, 0, 0, .25); +} +table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { + background-color: rgba(0, 0, 0, .25); +} + +table.dataTable thead th, table.dataTable thead td { + border-bottom: 1px solid #00000000; +} +table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td { + border-top: 1px solid rgb(255 255 255 / 10%); +} + + /* Pagination */ +.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { + color: var(--text) !important; + border: 1px solid transparent; + background: rgba(0, 0, 0, .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); +} +.dataTables_wrapper .dataTables_paginate .paginate_button:active { + outline: none; +} +/* Cards */ +.card { + background: transparent; + color: var(--text); + border: 1px solid rgba(0,0,0,0); +} +.card .text-muted { + color: var(--text) !important; +} +#movies .card img { + height: 200px !important; + width: auto !important; +} +.card-text .text-info { + color: var(--accent-color) !important; +} + +/* Buttons */ +.btn-primary, .btn-info { + color: #fff; + background-color: var(--button-color) !important; + border-color: var(--button-color) !important; +} +.btn-primary:active, .btn-info:active { + box-shadow: none !important; +} +.btn-primary:hover, .btn-info:hover { + background-color: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; +} +.btn-secondary { + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); +} +.btn-secondary:hover { + color: #fff; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} +/* Settings */ +.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { + color: var(--text); + background-color: rgba(255, 255, 255, .1); + border-color: transparent; +} +.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { + background-color: rgba(0, 0, 0, .25); + border-color: transparent; +} +.nav-tabs .nav-link.active:hover { + background-color: rgba(255, 255, 255, .1); +} +.badge-primary { + color: var(--text); + background-color: var(--accent-color); +} +#plexServers .card-header { + background-color: rgba(255, 255, 255, .1); +} +#plexServers .border-secondary { + border-color: #0000 !important; +} +#plexServers .list-group-item { + background-color: rgba(0, 0, 0, .25); + border: none; +} +#plexServers .card-footer { + background-color: rgb(0 0 0 / 25%); +} +.dropdown-menu { + color: var(--text); + background: var(--modal-bg-color); + border: 1px solid transparent; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); +} +.dropdown-item:hover, .dropdown-item:focus { + color: var(--text-hover); + text-decoration: none; + background-color: rgba(255, 255, 255, .08); +} + +/* Input */ +[type="search"] { + outline-offset: -2px; + -webkit-appearance: none; + outline: none; + border: none; + border-radius: 5px; +} +button, select { + text-transform: none; + outline: none; +} \ No newline at end of file diff --git a/CSS/themes/gaps/hotline.css b/CSS/themes/gaps/hotline.css new file mode 100644 index 00000000..c0736a4a --- /dev/null +++ b/CSS/themes/gaps/hotline.css @@ -0,0 +1,25 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GAPS HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gaps/gaps-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --text: #eee; + --text-hover: #fff; +} \ No newline at end of file diff --git a/CSS/themes/gaps/organizr-dark.css b/CSS/themes/gaps/organizr-dark.css new file mode 100644 index 00000000..07829b49 --- /dev/null +++ b/CSS/themes/gaps/organizr-dark.css @@ -0,0 +1,25 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GAPS ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gaps/gaps-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + --text: #eee; + --text-hover: #fff; + } \ No newline at end of file diff --git a/CSS/themes/gaps/plex.css b/CSS/themes/gaps/plex.css new file mode 100644 index 00000000..545c0798 --- /dev/null +++ b/CSS/themes/gaps/plex.css @@ -0,0 +1,25 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GAPS PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gaps/gaps-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --text: #eee; + --text-hover: #fff; + } \ No newline at end of file diff --git a/CSS/themes/gaps/space-gray.css b/CSS/themes/gaps/space-gray.css new file mode 100644 index 00000000..5c1f578a --- /dev/null +++ b/CSS/themes/gaps/space-gray.css @@ -0,0 +1,25 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GAPS SPACE-GRAY THEME */ +@import url(https://gflix.app/theme.park/CSS/themes/gaps/gaps-base.css); +:root{ + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; + --text: #eee; + --text-hover: #fff; + } \ No newline at end of file diff --git a/CSS/themes/gitea/aquamarine.css b/CSS/themes/gitea/aquamarine.css new file mode 100644 index 00000000..7ad72fa1 --- /dev/null +++ b/CSS/themes/gitea/aquamarine.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GITEA AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --accent-color: #12afa0; + --accent-color-hover: #fff; + --text: #eee; + --text-hover: #fff; + --link-color: #12afa0; +} \ No newline at end of file diff --git a/CSS/themes/gitea/dark.css b/CSS/themes/gitea/dark.css new file mode 100644 index 00000000..5ccd4b76 --- /dev/null +++ b/CSS/themes/gitea/dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GITEA DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #646464; + --accent-color-hover: rgba(255, 255, 255, 0.45); + --text: #b7b7b7; + --text-hover: #fff; + --link-hover: rgba(255, 255, 255, 0.45); +} \ No newline at end of file diff --git a/CSS/themes/gitea/gitea-base.css b/CSS/themes/gitea/gitea-base.css new file mode 100644 index 00000000..bc1d46dd --- /dev/null +++ b/CSS/themes/gitea/gitea-base.css @@ -0,0 +1,757 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +body { + background: var(--main-bg-color); +} + +a, +.home a, +.ui.user.list .item .description a, +.ui.breadcrumb a, +.repository .labelspage .item a { + color: var(--link-color); +} + +a:hover, +.ui.user.list .item .description a:hover, +.ui.breadcrumb a:hover, +.repository .labelspage .item a:hover { + color: #fff; +} + +* { + outline: none; +} + +/* Scrollbar */ +@media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* TEXT */ +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +/*strong,*/ +footer, +.ui.list>.item .description, +.issue.list>.item .title, +.ui.accordion .title:not(.ui), +.ui.checkbox label, +.ui.header, +.ui .text.black, +.ui.header .sub.header, +.ui.form .inline.field>label, +.form .help, +.ui.form .field>label, +.ui.form .inline.field>label, +.ui.form .inline.field>p, +.ui.form .inline.fields .field>label, +.ui.form .inline.fields .field>p, +.ui.form .inline.fields>label, +.ui.dropdown .menu>.message:not(.ui) { + color: var(--text); +} +/* TEXT HOVER */ +b:hover, +.issue.list>.item .title:hover { + color: var(--text-hover); +} + +/* NAVBAR */ +.following.bar.light { + background-color: transparent; + border-bottom: 1px solid transparent; + box-shadow: none; +} + +.ui.menu .item { + color: var(--text) +} + +.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; + color: 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); + color: var(--text-hover); +} + +/* UI */ + +.ui.attached.segment { + border: 1px solid transparent; +} + +.ui.segment { + background: rgb(255 255 255 / 8%) !important; +} + +.ui.attached.header { + background: rgb(0 0 0 / 25%); + border: 1px solid transparent; +} + +.explore .navbar { + background-color: rgb(0 0 0 / 25%) !important; + +} + +.ui .warning.header { + background-color: #f9edbe !important; + color: black !important; +} + +.ui.red.message p, +.ui.red.message strong { + color: #db2828 !important; +} + +/* SIGN IN NAV BAR*/ +.ui.menu.new-menu { + background: rgb(0 0 0 / 25%); +} + +@media only screen and (max-width: 1200px) { + .ui.menu.new-menu:after { + background-image: inherit; + } +} + +.ui.secondary.pointing.menu .active.item, +.ui.secondary.pointing.menu .active.item:hover { + border-color: currentColor; + color: var(--accent-color); +} + +.ui.tabular.menu .item { + color: var(--text); +} + +.ui.secondary.pointing.menu .dropdown.item:hover, +.ui.secondary.pointing.menu .link.item:hover, +.ui.secondary.pointing.menu a.item:hover { + background-color: transparent; + color: var(--text-hover); +} + +/* DROPDOWN MENU */ +.item:focus { + outline: none; +} + +.ui.menu .dropdown.item .menu { + background: var(--modal-bg-color); +} + +.ui.menu .ui.dropdown .menu>.item { + color: var(--text) !important; +} + +.ui.menu .ui.dropdown .menu>.active.item { + background: rgb(0 0 0 / 10%) !important; + color: 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; + color: var(--text-hover) !important; +} + +.ui.dropdown .menu { + background: var(--modal-bg-color); +} + +.ui.dropdown .menu>.item:hover { + background: rgb(255 255 255 / 0.07); +} + +.ui.dropdown .menu .selected.item, +.ui.dropdown.selected { + background: rgb(0 0 0 / 0.25); + color: var(--text-hover); +} + +.ui.dropdown .menu .active.item { + color: var(--accent-color); + outline: none !important; +} + +.ui.dropdown .menu>.item { + color: var(--text); +} + +.ui.dropdown .menu>.item:hover { + color: var(--text-hover); +} + +.ui.selection.dropdown .menu>.item { + border-top: 1px solid rgb(255 255 255 / 20%); +} + +.ui.selection.dropdown { + background: rgb(0 0 0 / .25); + color: #fff; +} + +.ui.selection.dropdown:focus { + border-color: rgba(255, 255, 255, .08); + background: rgb(0 0 0 / 50%); + box-shadow: none; +} + +.ui.selection.active.dropdown, +.ui.selection.active.dropdown .menu { + border-color: transparent; +} + +.ui.selection.active.dropdown:hover, +.ui.selection.active.dropdown:hover .menu { + border-color: transparent; +} + +.ui.selection.visible.dropdown>.text:not(.default) { + color: var(--text); +} + +.ui.default.dropdown:not(.button)>.text, +.ui.dropdown:not(.button)>.default.text { + color: var(--text); + opacity: .7; +} + +/* MESSAGES */ +.ui.negative.message { + background-color: #F44336; + box-shadow: none !important; +} + +.ui.negative.message p { + color: white !important; + box-shadow: none !important; +} + +.ui.positive.message { + background-color: #4CAF50; + box-shadow: none !important; +} + +.ui.positive.message p { + color: white !important; +} + +/* DASHBOARD */ +.vue-tooltip-theme.tooltip .tooltip-inner { + background: rgb(0 0 0 / 95%); + color: var(--text); +} +svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label[data-v-a9cfea66], +svg.vch__wrapper .vch__legend__wrapper text[data-v-a9cfea66], +svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9cfea66] { + fill: var(--text); +} + +#app .ui.item.menu, +.ui.item.menu .item { + background: rgb(255 255 255 / 8%); +} + +#app .ui.menu .active.item { + color: var(--text); +} + +.ui.menu .active.item { + background: rgba(0, 0, 0, .25); + color: var(--text); + font-weight: 400; + box-shadow: none; +} +.ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover { + background-color: rgba(0, 0, 0, .25); + color: var(--text-hover); +} +.ui.menu a.item:hover { + color: var(--text-hover); + background: rgb(255 255 255 / 8%); +} +#app .ui.link.menu .item:hover, +.ui.menu .dropdown.item:hover, +.ui.menu .link.item:hover { + cursor: pointer; + background: rgba(0, 0, 0, .03); + color: var(--text-hover); +} + +#app .ui.secondary.segment { + background: rgb(255 255 255 / 8%); + color: rgba(0, 0, 0, .6); +} + +/* REPOSITORY */ +.repository .header-wrapper { + background-color: rgb(0 0 0 / 24%); +} + +.repo-header .ui.breadcrumb a { + color: var(--accent-color); +} + +.repo-header .ui.breadcrumb a:hover { + color: var(--accent-color-hover); +} + +.repo-header .ui.breadcrumb .divider { + color: rgb(255 255 255 / 40%); +} + +.ui.tabular.menu .item.active { + color: var(--text); +} + +.ui.tabular.menu .active.item { + background: none var(--main-bg-color) !important; + color: var(--text); + border-color: transparent; +} + +.ui.tabular.menu .item:hover { + color: var(--text-hover); + border-radius: .28571429rem .28571429rem 0 0 !important; +} + +.repository .ui.menu { + background: rgb(0 0 0 / 0%); + border: 1px solid rgba(255, 255, 255, 0.11); + box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15); +} +/* +.repository .ui.menu .active.item { + background: var(--main-bg-color) !important; + color: var(--text-hover); + font-weight: 400; + box-shadow: none; +} + +/* COMMIT STUFF */ +#git-graph-container li a { + color: var(--link-color); +} + +#git-graph-container li a:hover { + color: var(--text-hover); +} + +#git-graph-container #rev-list li.highlight, +#git-graph-container #rev-list li.hover { + background-color: rgba(255, 255, 255, .05); +} + +#git-graph-container #rev-list li.highlight.hover { + background-color: rgba(255, 255, 255, .05); +} + +#git-graph-container li .author { + color: var(--accent-color); +} + +.repository .ui.segment.sub-menu .list .item a, +.repository .ui.segment.sub-menu .list .item span.ui { + color: var(--text); +} + +.repository .ui.segment.sub-menu .list .item a:hover, +.repository .ui.segment.sub-menu .list .item b:hover { + color: var(--text-hover) !important; +} + +.repository .ui.segment.sub-menu .list .item.active { + background: rgba(255, 255, 255, 0.07); +} + +.repository.file.list #repo-files-table tbody .svg { + color: var(--text); +} + +.ui.blue.labels .label, +.ui.ui.ui.blue.label { + background-color: var(--accent-color); + border-color: var(--accent-color); + color: var(--text-hover); +} + +.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: rgba(0, 0, 0, 0.15) !important; +} + +.repository #commits-table.ui.table>tbody { + background-color: transparent !important; +} + +/* TABLE */ +.ui.table>thead>tr>th { + background: rgb(0 0 0 / 25%); + color: var(--text); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.ui.table { + width: 100%; + background: rgb(255 255 255 / 0.0); + border: 1px solid rgba(255, 255, 255, 0.1); + color: var(--text); +} + +.ui.table>tbody { + border: 1px solid rgba(34, 36, 38, .15); + color: var(--text); +} + +.ui.table>tbody>tr>td, +.ui.table>tr>td { + border-top: 1px solid rgb(255 255 255 / 10%); +} + +.repository.file.list #repo-files-table thead tr:hover { + background-color: rgba(0, 0, 0, 0.0) !important; +} + +.repository.file.list #repo-files-table tr:hover { + background: rgba(255, 255, 255, 0.08); +} + +/* FOOTER */ +footer { + background-color: rgb(0 0 0 / 25%); + border-top: 1px solid rgb(255 255 255 / 25%); +} + +/* BUTTONS / CHECKBOXES */ +.btn:active, +.btn:focus { + outline: none !important; +} + +.ui.checkbox input:checked~label:after { + color: #fff !important; + background: var(--accent-color); +} + +.ui.primary.button, +.ui.primary.buttons .button { + background-color: var(--button-color); + color: var(--button-text); +} + +.ui.primary.button:hover, +.ui.primary.buttons .button:hover { + background-color: var(--button-color-hover); + color: var(--button-text); +} + +.ui.green.button, +.ui.green.buttons .button { + background-color: var(--button-color); + color: var(--button-text); +} + +.ui.green.button:focus, +.ui.green.buttons .button:focus { + background-color: var(--button-color-hover); + color: var(--button-text); + text-shadow: none; +} + +.ui.green.button:hover, +.ui.green.buttons .button:hover { + background-color: var(--button-color-hover); + color: var(--button-text); +} + +.ui.blue.button, +.ui.blue.buttons .button { + background-color: var(--button-color); + color: var(--button-text); +} + +.ui.blue.button:hover, +.ui.blue.buttons .button:hover { + background-color: var(--button-color-hover); + color: var(--button-text); +} + +.ui.active.button, +.ui.active.button:hover { + color: var(--button-text); +} + +.ui.active.button, +.ui.active.button:active, +.ui.active.button:hover { + background-color: var(--button-color-hover); + +} + +.ui.button { + background: var(--button-color); + color: var(--button-text); +} + +.ui.button:hover { + background: var(--button-color-hover); + color: var(--button-text); +} + +.ui.basic.blue.button, +.ui.basic.blue.buttons .button { + box-shadow: inset 0 0 0 1px var(--accent-color) !important; + color: var(--accent-color) !important; +} + +.ui.basic.blue.button:hover, +.ui.basic.blue.buttons .button:hover { + background: var(--button-color) !important; + color: var(--button-text) !important; +} + +.ui.basic.button, +.ui.basic.buttons .button { + color: var(--button-text); + box-shadow: inset 0 0 0 1px rgb(255 255 255 / 15%); +} + +.ui.basic.button:focus, +.ui.basic.button:hover, +.ui.basic.buttons .button:focus, +.ui.basic.buttons .button:hover { + background: rgb(255 255 255 / 8%); + color: var(--button-text); +} + /* LABELS */ + .ui.label, .ui.menu .item>.label { + background-color: var(--button-color); + color: var(--button-text); + } + .ui.labels a.label:hover, a.ui.label:hover { + background-color: #ffffff; + color: rgba(0,0,0,.8); + } + .repository #commits-table td.sha .sha.label, .repository #repo-files-table .sha.label, .repository .timeline-item.commits-list .singular-commit .sha.label { + border: 1px solid transparent; + } + .repository.file.list #repo-files-table tbody .svg.octicon-file-directory, .repository.file.list #repo-files-table tbody .svg.octicon-file-submodule { + color: var(--accent-color); + } +/* FORMS */ +.ui.form input:not([type]), +.ui.form input[type=date], +.ui.form input[type=datetime-local], +.ui.form input[type=email], +.ui.form input[type=file], +.ui.form input[type=number], +.ui.form input[type=password], +.ui.form input[type=search], +.ui.form input[type=tel], +.ui.form input[type=text], +.ui.form input[type=time], +.ui.form input[type=url] { + background: rgb(0 0 0 / 25%); + border: 1px solid transparent; + color: var(--text); + border-radius: .28571429rem; + box-shadow: inset 0 0 0 0 transparent; + transition: color .1s ease, border-color .1s ease; +} + +.ui.form textarea:focus { + color: var(--text); + border-color: transparent; + background: rgba(0, 0, 0, .5); + box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35); + -webkit-appearance: none; +} + +.ui.form textarea, +.ui.input textarea { + background: rgb(0 0 0 / .25); + border: 1px solid rgba(34, 36, 38, .15); + color: var(--text); +} + +.ui.form input:not([type]):focus, +.ui.form input[type=date]:focus, +.ui.form input[type=datetime-local]:focus, +.ui.form input[type=email]:focus, +.ui.form input[type=file]:focus, +.ui.form input[type=number]:focus, +.ui.form input[type=password]:focus, +.ui.form input[type=search]:focus, +.ui.form input[type=tel]:focus, +.ui.form input[type=text]:focus, +.ui.form input[type=time]:focus, +.ui.form input[type=url]:focus { + color: var(--text); + border-color: rgb(255 255 255 / 8%); + border-radius: .28571429rem; + background: rgb(0 0 0 / 50%); + box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35); +} + +.ui.input.focus>input, +.ui.input>input:focus { + border-color: transparent; + background: rgb(0 0 0 / 50%); + color: var(--text); + box-shadow: none; +} + +.ui.input>input { + background: rgb(0 0 0 / 25%); + border: 1px solid rgba(34, 36, 38, .15); + color: var(--text); +} + +.ui.icon.input>i.icon { + color: var(--text); +} + +/* MARKDOWN */ +.markdown tbody { + background: #f000 !important; +} + +.markdown:not(code) table tr { + background-color: rgba(0, 0, 0, .26); + border-top: 1px solid #ccc; +} + +.markdown:not(code) table tr:nth-child(2n) { + background-color: rgba(0, 0, 0, .45); +} +.markdown:not(code) code, .markdown:not(code) tt { + background-color: rgb(0 0 0 / 0.25); +} +.chroma { + filter: invert(1); +} +.repository.file.list .non-diff-file-content pre { + overflow: auto; + color: #695d4b; + background: rgba(0, 0, 0, .5); +} + +/* PLACEHOLDER TEXT */ +::placeholder { + color: var(--text) !important; + opacity: .5; +} + +:-moz-placeholder { + color: var(--text) !important; + opacity: .5; +} + +:-ms-input-placeholder { + color: var(--text) !important; + opacity: .5; +} + +::-webkit-input-placeholder { + color: var(--text) !important; + opacity: .5; +} + +/* HIGHLIGHTING */ +::-webkit-selection { + background-color: var(--accent-color); + color: var(--text-hover); +} + +::-moz-selection { + background-color: var(--accent-color); + color: var(--text-hover); +} + +::selection { + background-color: var(--accent-color); + color: var(--text-hover); +} + +textarea::-webkit-selection, +input::-webkit-selection { + background-color: var(--accent-color); + color: var(--text-hover); +} + +textarea::-moz-selection, +input::-moz-selection { + background-color: var(--accent-color); + color: var(--text-hover); +} + +textarea::-moz-selection, +input::-moz-selection { + background-color: var(--accent-color); + color: var(--text-hover); +} + +textarea::selection, +input::selection { + background-color: var(--accent-color); + color: var(--text-hover); +} \ No newline at end of file diff --git a/CSS/themes/gitea/hotline.css b/CSS/themes/gitea/hotline.css new file mode 100644 index 00000000..8228d0ce --- /dev/null +++ b/CSS/themes/gitea/hotline.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GITEA HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --text: #eee; + --text-hover: #fff; + --link-hover: #F44336; +} \ No newline at end of file diff --git a/CSS/themes/gitea/organizr-dark.css b/CSS/themes/gitea/organizr-dark.css new file mode 100644 index 00000000..3ce15cdf --- /dev/null +++ b/CSS/themes/gitea/organizr-dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GITEA ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --button-text: #eee; + --accent-color:#2cabe3; + --accent-color-hover: #fff; + --text: #96a2b4; + --text-hover: #fff; + --link-color: #2cabe3; +} \ No newline at end of file diff --git a/CSS/themes/gitea/plex.css b/CSS/themes/gitea/plex.css new file mode 100644 index 00000000..12f1c619 --- /dev/null +++ b/CSS/themes/gitea/plex.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GITEA PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --text: #eee; + --text-hover: #fff; + --link-color:#fff; +} \ No newline at end of file diff --git a/CSS/themes/gitea/space-gray.css b/CSS/themes/gitea/space-gray.css new file mode 100644 index 00000000..14702bda --- /dev/null +++ b/CSS/themes/gitea/space-gray.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GITEA SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/gitea/gitea-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --accent-color: #81a6b7; + --accent-color-hover: #81a6b7; + --text: #eee; + --text-hover: #fff; + --link-color: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/grafana/aquamarine.css b/CSS/themes/grafana/aquamarine.css index ed4309af..1aa7975d 100644 --- a/CSS/themes/grafana/aquamarine.css +++ b/CSS/themes/grafana/aquamarine.css @@ -16,6 +16,9 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --accent-color: #32d1df; - --button-color: #fd5e94; + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; + --accent-color-hover: #12afa0; + --queue-color: #009688; } \ No newline at end of file diff --git a/CSS/themes/grafana/dark.css b/CSS/themes/grafana/dark.css index 4c54343a..8e44da71 100644 --- a/CSS/themes/grafana/dark.css +++ b/CSS/themes/grafana/dark.css @@ -16,6 +16,8 @@ :root { --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --accent-color: #32d1df; - --button-color: #fd5e94; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.25); + --accent-color-hover: rgba(255, 255, 255, 0.45); } \ No newline at end of file diff --git a/CSS/themes/grafana/grafana-base.css b/CSS/themes/grafana/grafana-base.css index b77e8c37..76091148 100644 --- a/CSS/themes/grafana/grafana-base.css +++ b/CSS/themes/grafana/grafana-base.css @@ -171,6 +171,9 @@ color:#FFFFFF !important; .dropdown-menu-item-shortcut { color: #ffffff!important; } +.dropdown-menu { + border: 1px solid transparent; +} .dropdown-submenu:hover>a { Background-color: rgba(0, 0, 0, 0.25)!important; } @@ -265,11 +268,20 @@ color:#FFFFFF !important; border: none; background: #ffffff; } +.gf-form-select-box__option { + background: var(--modal-bg-color) !important; +} +.gf-form-select-box__option.gf-form-select-box__option--is-focused { + color: #fff; + -o-border-image: -o-linear-gradient(var(--accent-color) 30%,var(--accent-color) 99%); + border-image: -webkit-gradient(linear,left top,left bottom,color-stop(30%,var(--accent-color)),color-stop(99%,var(--accent-color))); + border-image: -webkit-linear-gradient(var(--accent-color) 30%,var(--accent-color) 99%); +} .filter-table td.filter-table__switch-cell { border-right: none; } /* Variable label color */ -.template-variable { +.template-variable, .gf-form-label--variable { color: var(--accent-color) !important; } @@ -332,6 +344,7 @@ color:#FFFFFF !important; .panel-container { background-color: rgba(0, 0, 0, .25); border: transparent; + box-shadow: none !important; } .panel-container.panel-transparent, .panel-container--transparent { background-color: transparent; @@ -343,7 +356,7 @@ color:#FFFFFF !important; } /* ////PANEL BACKGROUND COLOR//// */ -.graph-legend-table .graph-legend-series:nth-child(odd) { +.graph-legend-table .graph-legend-series:nth-child(odd), .graph-legend-table .graph-legend-series:nth-child(2n) { background: transparent !important; } @@ -379,6 +392,31 @@ div.flot-text { border-bottom: 2px solid transparent; } +/* Panel tables */ +.css-58bavm-thead { + background: rgba(0, 0, 0, .25); +} +.css-sq6g4h-row { + border-bottom: 1px solid rgb(255 255 255 / 10%); +} +.css-11m63ae { + border-right: 1px solid rgb(255 255 255 / 10%); +} +.css-2n373z { + border-right: 1px solid rgb(255 255 255 / 25%); +} +.css-sq6g4h-row:hover { + background-color: rgb(255 255 255 / 0.08); +} +.css-3o5ryu { + background: rgb(0 0 0 / 45%); +} +.css-1n8kpcb-activeTabStyle,.css-dnqfjg-activeTabStyle { + background: rgb(0 0 0 / 35%); +} +.css-1n8kpcb-activeTabStyle::before, .css-dnqfjg-activeTabStyle::before { + background: var(--accent-color); +} /* Edit panel tabs */ .tabbed-view-header { box-shadow: none; @@ -522,13 +560,380 @@ border-color: #b56d16 !important; border: none; } -.modal-header { +.modal-header, .css-1z13zsv-modalHeader { background: var(--modal-bg-color); -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid #d8d9da; + color: #eee; } -.modal-body { - position: relative; +.modal-body, .css-111908g { background: var(--modal-bg-color); + color: #eee; +} + + + +/*V7*/ + +/*LOGIN*/ +.css-bnbqsv {background: var(--main-bg-color)} +.css-3iwqj4 { background: transparent;} +#login-view > div > form > div:nth-child(1) > div:nth-child(2) > div > div > input, #login-view > div > form > div:nth-child(2) > div:nth-child(2) > div > div > input { + height: 38px; +} +/*Buttons*/ +.css-y3nv3e-button, +.css-cc7c9f-button, +.css-1vlnne-button, +.css-1ihbihm-button, +.css-14zdxje-button, +.css-179z9yx-button, +.css-370vzt-button, +.css-msayan-button, +.css-19kbjxc-button, +.css-n4gkqg-button, +.css-u6ysb0-button, +.css-ak0gkt-button, +.css-1pa3vaj-button, +.css-g7zx83-button, +.css-1pcbsvw-button, +.gf-form-button-row a, .gf-form-button-row button, +.page-action-bar>a, .page-action-bar>button, +.btn-primary{ +background: var(--button-color) !important; +background-color: var(--button-color) !important; +border-color: var(--button-color); +} +.css-y3nv3e-button:hover, +.css-y3nv3e-button:focus, +.css-cc7c9f-button:hover, +.css-cc7c9f-button:focus, +.css-1vlnne-button:hover, +.css-1vlnne-button:focus, +.css-1ihbihm-button:hover, +.css-1ihbihm-button:focus, +.css-14zdxje-button:hover, +.css-14zdxje-button:focus, +.css-179z9yx-button:hover, +.css-179z9yx-button:focus, +.css-370vzt-button:hover, +.css-370vzt-button:focus, +.css-msayan-button:hover, +.css-msayan-button:focus, +.css-19kbjxc-button:hover, +.css-19kbjxc-button:focus, +.css-n4gkqg-button:hover, +.css-n4gkqg-button:focus, +.css-u6ysb0-button:hover, +.css-u6ysb0-button:focus, +.css-ak0gkt-button:hover, +.css-ak0gkt-button:focus, +.css-1pa3vaj-button:hover, +.css-1pa3vaj-button:focus, +.css-g7zx83-button:hover, +.css-g7zx83-button:focus, +.css-1pcbsvw-button:hover, +.css-1pcbsvw-button:focus, +.gf-form-button-row a, .gf-form-button-row button:hover, +.btn-primary:hover{ +color: rgb(255, 255, 255); +background: var(--button-color-hover) !important; +background-color: var(--button-color-hover) !important; +box-shadow: none !important; +} +.css-1d9e5zy-button {color: #fff; background: var(--button-color)} +.css-1d9e5zy-button:hover {color: #fff; background: var(--button-color-hover)} + +/*INPUT*/ +input:focus {box-shadow: none !important;} +.css-17rc2pp-input-wrapper:focus, .css-1i9is3t:focus { +box-shadow:none; +color: transparent; +} +.gf-form-select-box__control--is-focused { +border-color: transparent; +outline: none; +-webkit-box-shadow: none !important; +box-shadow: none !important; +} + +.css-1bjepp-input-input { +background-color: hsla(0,0%,100%,.25); +border-radius: 3px; +border-color: transparent; +-webkit-transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; +transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; +} + +.css-1bjepp-input-input:focus { +box-shadow: none !important; +background-color: white; +color: black; +transition: background-color .2s; +-webkit-transition: background-color .2s; +border-radius: 3px; +} +.css-14hvfbu-input-wrapper:focus { +border-color:transparent !important; +box-shadow: none !important; +} +.css-1w5c5dq-input-inputWrapper input:not(:last-child) { + height: 100% +} +/*Disabled input*/ +.css-1bjepp-input-input:disabled { + background-color: rgba(0, 0, 0, .5); + color: rgb(159, 167, 179); +} +.css-1bjepp-input-input:hover {border-color: transparent;} +body > grafana-app > div > div > react-container > div > div > div.view > div > div.page-container.page-body > div:nth-child(2) > form > div > div > div > div.css-1w5c5dq-input-inputWrapper > input {height: 100%;} + + +/* SEARCH */ +.css-x9mxj5 { +background: var(--main-bg-color); +} +.css-1m6pigl:focus + label { +outline-offset: 2px; +box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important; +z-index: 3; +outline: transparent dotted 2px; +transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s; +} +.css-1m6pigl:checked + label { + color: #eee !important; + border-color: rgba(255, 255, 255, .1); + background: var(--button-color); +} +.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; + +} +.css-y0yg3l { +background: var(--main-bg-color); +border-color: transparent; +} +.css-y0yg3l { +background: rgba(0, 0, 0, .25) !important; +border-color: transparent; +} + +.css-1je3bh6 { +background: transparent; +border-bottom: 1px solid rgba(0, 0, 0, 0); +} + +/*Folder bars*/ +.css-1umfglk { +background: rgba(0, 0, 0, .25); +} +.css-1umfglk:hover { +background: rgba(0, 0, 0, .35); +} + +/* Login Error message*/ +.css-1ow9mne-input-input { +line-height: 1.5; +height: 38px; +background-color: hsla(0,0%,100%,.25); +border-radius: 3px; +border-color: transparent; +-webkit-transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; +transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; +} +.css-1ow9mne-input-input { +box-shadow: none !important; +background-color: white; +color: black; +transition: background-color .2s; +-webkit-transition: background-color .2s; +height: 38px; +border-radius: 3px; +} +.css-13o428a { +margin: 10px 0px 0px; +} + +/*Welcome to Grafana*/ +.css-15xxblz,.css-1ld19yb {background: rgba(0, 0, 0, .25);} + +.css-1as70ku, .css-u5zjuh { +background: rgba(0, 0, 0, .25);} +.css-17abkeq, .css-5ak73y { +color: #fff; +} + + +/* Import */ +body > grafana-app > div > div > react-container > div > div > div.view > div > div.page-container.page-body > form > div:nth-child(4) > div:nth-child(2) > div > div.css-1w5c5dq-input-inputWrapper > input {height:100%} + + +/*PANEL EDIT*/ + +.css-cxwxzk-Label-description,.css-n370st { + color: #eee; +} +/*Header*/ +.css-1marj6o { +display: flex; +-webkit-box-pack: justify; +justify-content: space-between; +padding: 8px; +background: transparent; +border-bottom: 1px solid transparent; +} +/*Background*/ +.css-azp59k { +background: var(--main-bg-color); +} +/*Query box*/ +.css-hz0utb { +background: rgba(0, 0, 0, .35); +border-right: 1px solid rgba(0, 0, 0, 0); +} +.query-keyword, .css-wvxxxy, .css-fpnw35 { + font-weight: 500; + color: var(--accent-color); +} +.css-lvafs5 { + background: rgba(0, 0, 0, .5); +} + +.css-ui3sz4-activeTabStyle { +margin-right: 16px; +position: relative; +display: block; +color: rgb(216, 217, 218); +cursor: default; +list-style: none; +padding: 11px 15px 9px; +border-style: solid; +border-image: initial; +border-width: 0px 1px 1px; +border-radius: 3px 3px 0px 0px; +border-color: transparent !important; +background: rgba(0, 0, 0, .5); +overflow: hidden; +} +.css-1awj6q7-counter { +background-color: rgba(0, 0, 0, .5); +color: rgb(255, 255, 255); +} +/*Transform tab*/ +.css-y2f54e { +background: rgba(0, 0, 0, .25); +} +.css-y2f54e:hover { +background: rgba(0, 0, 0, .35); +} +.css-1e8invk::before { +background:rgba(0, 0, 0, .35) !important; +} + +/* Right side menu*/ +.css-1xj5tuf { +background: rgba(0, 0, 0, .35); +border-left: 1px solid transparent; +} +/*Dropdown bottom borders*/ +.css-1majipf { +border-bottom: 1px solid rgba(255, 255, 255, .08); +} +/*Settings text input*/ +.css-1f38lle:focus { + box-shadow: none !important; +} +.css-1gokw4e input:checked + label, .css-1gokw4e input:checked + label:hover { +background: var(--accent-color); +} +.css-1gokw4e label { + background: white; +} +/*Visualization*/ +.css-1lemfi9 { + background: rgba(0, 0, 0, .25); + border-color: transparent; +} +.css-1fsv7gr:hover > div:first-child { + border-color: var(--accent-color); +} +.css-1emhacm-currentVisualizationItem > div:first-child { + outline-offset: 2px; + box-shadow: rgb(20, 22, 25) 0px 0px 0px 2px, var(--accent-color) 0px 0px 0px 4px; +} +.css-mgq0xs-currentVisualizationItem > div:first-child { + outline: transparent dotted 2px; + outline-offset: 1px; + box-shadow: var(--accent-color) 0px 0px 0px 2px, #607D8B 0px 0px 0px 2px; + transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s; +} +/*Old stat panel unit dropdown */ +body > grafana-app > div > div > react-container > div > div.css-azp59k > div.css-1bd2u9 > div > div.Pane.vertical.Pane2 > div > div > div.css-1xj5tuf > div > div.view > div:nth-child(3) > div:nth-child(1) > div.panel-options-group__body > panel-editor-tab > panel-editor-tab-singlestatoptions > div > div:nth-child(2) > div:nth-child(6) > unit-picker > div > div > div > div > input { +height: 100%; +} +/*Buttons*/ +.css-m58wdd:hover { + color: rgba(255, 255, 255, .94); + z-index: 2; + border-width: 1px; + border-style: solid; + border-color: rgba(255, 255, 255, .1); + border-image: initial; + background: rgba(255, 255, 255, .15) +} +.css-m58wdd { + color: rgba(255, 255, 255, .94); + z-index: 2; + border-width: 1px; + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-image: initial; + background: rgba(255, 255, 255, .08) +} +input:checked+.gf-form-switch__slider { +background: var(--accent-color); +} +/* RuPaul Drag Line*/ +.css-pii3u7:hover { +border-color: rgba(255, 255, 255, .25); +} + +.css-1t13ra6 { +border-color: rgba(255, 255, 255, .09); +} +.css-1t13ra6:hover { + border-color: rgba(255, 255, 255, .25); +} + +/*SETTINGS*/ +/*Teams*/ +.css-1w9m9al-call-to-action-card { + background: rgba(0, 0, 0, .25); + } + +/*DASHBOARD SETINGS*/ +.dashboard-settings,.dashboard-settings__body2 { + background: var(--main-bg-color); +} +.navbar--edit { + background: rgba(0, 0, 0, .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); +border-top: 3px solid var(--accent-color); +} +/* Variables*/ +.filter-table--hover tbody tr:hover { + background: hsla(0,0%,100%,.15); +} +.filter-table tbody tr:nth-child(odd):hover { +background: hsla(0,0%,100%,.15) !important; } +/*Placeholder text*/ +::placeholder {color: #fff !important;} +:-ms-input-placeholder {color: #fff !important;} +::-webkit-input-placeholder {color: #fff !important;} \ No newline at end of file diff --git a/CSS/themes/grafana/hotline.css b/CSS/themes/grafana/hotline.css index 81dc8b21..b639652f 100644 --- a/CSS/themes/grafana/hotline.css +++ b/CSS/themes/grafana/hotline.css @@ -16,6 +16,8 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --accent-color: #32d1df; - --button-color: #fd5e94; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; } \ No newline at end of file diff --git a/CSS/themes/grafana/organizr-dark.css b/CSS/themes/grafana/organizr-dark.css new file mode 100644 index 00000000..fec7bc16 --- /dev/null +++ b/CSS/themes/grafana/organizr-dark.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GRAFANA ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/grafana/grafana-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + } \ No newline at end of file diff --git a/CSS/themes/grafana/organizr-dashboard.css b/CSS/themes/grafana/organizr-dashboard.css index 6f051896..a49a69d7 100644 --- a/CSS/themes/grafana/organizr-dashboard.css +++ b/CSS/themes/grafana/organizr-dashboard.css @@ -163,6 +163,7 @@ div.flot-text { .panel-container { background-color: rgba(0, 0, 0, .25); border: transparent; + box-shadow: none !important; } .panel-container.panel-transparent, .panel-container--transparent { background-color: transparent; @@ -240,3 +241,354 @@ div.flot-text { box-shadow: none; border-bottom: 0px; } + +@import url(https://gilbn.github.io/theme.park/CSS/themes/grafana/grafana-base.css); + +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; +} + + +/*V7*/ + +/*LOGIN*/ +.css-bnbqsv {background: var(--main-bg-color)} +.css-3iwqj4 { background: transparent;} +#login-view > div > form > div:nth-child(1) > div:nth-child(2) > div > div > input, #login-view > div > form > div:nth-child(2) > div:nth-child(2) > div > div > input { + height: 38px; +} +/*Buttons*/ +.css-y3nv3e-button, +.css-cc7c9f-button, +.css-1vlnne-button, +.css-1ihbihm-button, +.css-14zdxje-button, +.css-179z9yx-button, +.css-370vzt-button, +.css-msayan-button, +.css-19kbjxc-button, +.gf-form-button-row a, .gf-form-button-row button, +.page-action-bar>a, .page-action-bar>button, +.btn-primary{ +background: var(--button-color) !important; +background-color: var(--button-color) !important; +border-color: var(--button-color); +} +.css-y3nv3e-button:hover, +.css-y3nv3e-button:focus, +.css-cc7c9f-button:hover, +.css-cc7c9f-button:focus, +.css-1vlnne-button:hover, +.css-1vlnne-button:focus, +.css-1ihbihm-button:hover, +.css-1ihbihm-button:focus, +.css-14zdxje-button:hover, +.css-14zdxje-button:focus, +.css-179z9yx-button:hover, +.css-179z9yx-button:focus, +.css-370vzt-button:hover, +.css-370vzt-button:focus, +.css-msayan-button:hover, +.css-msayan-button:focus, +.css-19kbjxc-button:hover, +.css-19kbjxc-button:focus, +.gf-form-button-row a, .gf-form-button-row button:hover, +.btn-primary:hover{ +color: rgb(255, 255, 255); +background: var(--button-color-hover) !important; +background-color: var(--button-color-hover) !important; +box-shadow: none !important; +} +.css-1d9e5zy-button {color: #fff; background: var(--button-color)} +.css-1d9e5zy-button:hover {color: #fff; background: var(--button-color-hover)} + +/*INPUT*/ +input:focus {box-shadow: none !important;} +.css-17rc2pp-input-wrapper:focus, .css-1i9is3t:focus { +box-shadow:none; +color: transparent; +} +.gf-form-select-box__control--is-focused { +border-color: transparent; +outline: none; +-webkit-box-shadow: none !important; +box-shadow: none !important; +} + +.css-1bjepp-input-input { +background-color: hsla(0,0%,100%,.25); +border-radius: 3px; +border-color: transparent; +-webkit-transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; +transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; +} + +.css-1bjepp-input-input:focus { +box-shadow: none !important; +background-color: white; +color: black; +transition: background-color .2s; +-webkit-transition: background-color .2s; +border-radius: 3px; +} +.css-14hvfbu-input-wrapper:focus { +border-color:transparent !important; +box-shadow: none !important; +} +.css-1w5c5dq-input-inputWrapper input:not(:last-child) { + height: 100% +} +/*Disabled input*/ +.css-1bjepp-input-input:disabled { + background-color: rgba(0, 0, 0, .5); + color: rgb(159, 167, 179); +} +.css-1bjepp-input-input:hover {border-color: transparent;} +body > grafana-app > div > div > react-container > div > div > div.view > div > div.page-container.page-body > div:nth-child(2) > form > div > div > div > div.css-1w5c5dq-input-inputWrapper > input {height: 100%;} + + +/* SEARCH */ +.css-x9mxj5 { +background: var(--main-bg-color); +} +.css-1m6pigl:focus + label { +outline-offset: 2px; +box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important; +z-index: 3; +outline: transparent dotted 2px; +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); +} +.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; + +} +.css-y0yg3l { +background: var(--main-bg-color); +border-color: transparent; +} +.css-y0yg3l { +background: rgba(0, 0, 0, .25) !important; +border-color: transparent; +} + +.css-1je3bh6 { +background: transparent; +border-bottom: 1px solid rgba(0, 0, 0, 0); +} + +/*Folder bars*/ +.css-1umfglk { +background: rgba(0, 0, 0, .25); +} +.css-1umfglk:hover { +background: rgba(0, 0, 0, .35); +} + +/* Login Error message*/ +.css-1ow9mne-input-input { +line-height: 1.5; +height: 38px; +background-color: hsla(0,0%,100%,.25); +border-radius: 3px; +border-color: transparent; +-webkit-transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; +transition: background-color .15s ease-in-out,box-shadow .15s ease-in-out !important; +} +.css-1ow9mne-input-input { +box-shadow: none !important; +background-color: white; +color: black; +transition: background-color .2s; +-webkit-transition: background-color .2s; +height: 38px; +border-radius: 3px; +} +.css-13o428a { +margin: 10px 0px 0px; +} + +/*Welcome to Grafana*/ +.css-15xxblz,.css-1ld19yb {background: rgba(0, 0, 0, .25);} + +.css-1as70ku, .css-u5zjuh { +background: rgba(0, 0, 0, .25);} +.css-17abkeq, .css-5ak73y { +color: #fff; +} + + +/* Import */ +body > grafana-app > div > div > react-container > div > div > div.view > div > div.page-container.page-body > form > div:nth-child(4) > div:nth-child(2) > div > div.css-1w5c5dq-input-inputWrapper > input {height:100%} + + +/*PANEL EDIT*/ + +/*Header*/ +.css-1marj6o { +display: flex; +-webkit-box-pack: justify; +justify-content: space-between; +padding: 8px; +background: transparent; +border-bottom: 1px solid transparent; +} +/*Background*/ +.css-azp59k { +background: var(--main-bg-color); +} +/*Query box*/ +.css-hz0utb { +background: rgba(0, 0, 0, .35); +border-right: 1px solid rgba(0, 0, 0, 0); +} +.query-keyword, .css-wvxxxy, .css-fpnw35 { + font-weight: 500; + color: var(--accent-color); +} +.css-lvafs5 { + background: rgba(0, 0, 0, .5); +} + +.css-ui3sz4-activeTabStyle { +margin-right: 16px; +position: relative; +display: block; +color: rgb(216, 217, 218); +cursor: default; +list-style: none; +padding: 11px 15px 9px; +border-style: solid; +border-image: initial; +border-width: 0px 1px 1px; +border-radius: 3px 3px 0px 0px; +border-color: transparent !important; +background: rgba(0, 0, 0, .5); +overflow: hidden; +} +.css-1awj6q7-counter { +background-color: rgba(0, 0, 0, .5); +color: rgb(255, 255, 255); +} +/*Transform tab*/ +.css-y2f54e { +background: rgba(0, 0, 0, .25); +} +.css-y2f54e:hover { +background: rgba(0, 0, 0, .35); +} +.css-1e8invk::before { +background:rgba(0, 0, 0, .35) !important; +} + +/* Right side menu*/ +.css-1xj5tuf { +background: rgba(0, 0, 0, .35); +border-left: 1px solid transparent; +} +/*Dropdown bottom borders*/ +.css-1majipf { +border-bottom: 1px solid rgba(255, 255, 255, .08); +} +/*Settings text input*/ +.css-1f38lle:focus { + box-shadow: none !important; +} +.css-1gokw4e input:checked + label, .css-1gokw4e input:checked + label:hover { +background: var(--accent-color); +} +.css-1gokw4e label { + background: white; +} +/*Visualization*/ +.css-1lemfi9 { + background: rgba(0, 0, 0, .25); + border-color: transparent; +} +.css-1fsv7gr:hover > div:first-child { + border-color: var(--accent-color); +} +.css-1emhacm-currentVisualizationItem > div:first-child { + outline-offset: 2px; + box-shadow: rgb(20, 22, 25) 0px 0px 0px 2px, var(--accent-color) 0px 0px 0px 4px; +} +/*Old stat panel unit dropdown */ +body > grafana-app > div > div > react-container > div > div.css-azp59k > div.css-1bd2u9 > div > div.Pane.vertical.Pane2 > div > div > div.css-1xj5tuf > div > div.view > div:nth-child(3) > div:nth-child(1) > div.panel-options-group__body > panel-editor-tab > panel-editor-tab-singlestatoptions > div > div:nth-child(2) > div:nth-child(6) > unit-picker > div > div > div > div > input { +height: 100%; +} +/*Buttons*/ +.css-m58wdd:hover { + color: rgba(255, 255, 255, .94); + z-index: 2; + border-width: 1px; + border-style: solid; + border-color: rgba(255, 255, 255, .1); + border-image: initial; + background: rgba(255, 255, 255, .15) +} +.css-m58wdd { + color: rgba(255, 255, 255, .94); + z-index: 2; + border-width: 1px; + border-style: solid; + border-color: rgba(255, 255, 255, 0); + border-image: initial; + background: rgba(255, 255, 255, .08) +} +input:checked+.gf-form-switch__slider { +background: var(--accent-color); +} +/* RuPaul Drag Line*/ +.css-pii3u7:hover { +border-color: rgba(255, 255, 255, .25); +} + +.css-1t13ra6 { +border-color: rgba(255, 255, 255, .09); +} +.css-1t13ra6:hover { + border-color: rgba(255, 255, 255, .25); +} + +/*SETTINGS*/ +/*Teams*/ +.css-1w9m9al-call-to-action-card { + background: rgba(0, 0, 0, .25); + } + + +/*DASHBOARD SETINGS*/ +.dashboard-settings,.dashboard-settings__body2 { + background: var(--main-bg-color); +} +.navbar--edit { + background: rgba(0, 0, 0, .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); +border-top: 3px solid var(--accent-color); +} +/* Variables*/ +.filter-table--hover tbody tr:hover { + background: hsla(0,0%,100%,.15); +} +.filter-table tbody tr:nth-child(odd):hover { +background: hsla(0,0%,100%,.15) !important; +} +/*Placeholder text*/ +::placeholder {color: #fff !important;} +:-ms-input-placeholder {color: #fff !important;} +::-webkit-input-placeholder {color: #fff !important;} \ No newline at end of file diff --git a/CSS/themes/grafana/plex.css b/CSS/themes/grafana/plex.css index 847cd208..e9f31849 100644 --- a/CSS/themes/grafana/plex.css +++ b/CSS/themes/grafana/plex.css @@ -16,6 +16,8 @@ :root { --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --accent-color: #f9be03; - --button-color: #fd5e94; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; } \ No newline at end of file diff --git a/CSS/themes/grafana/space-gray.css b/CSS/themes/grafana/space-gray.css index 1b4eb00c..12a7aa72 100644 --- a/CSS/themes/grafana/space-gray.css +++ b/CSS/themes/grafana/space-gray.css @@ -16,5 +16,8 @@ :root { --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --accent-color: #fff; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; } \ No newline at end of file diff --git a/CSS/themes/guacamole/guacamole-base.css b/CSS/themes/guacamole/guacamole-base.css index 81e86445..0a2c8988 100644 --- a/CSS/themes/guacamole/guacamole-base.css +++ b/CSS/themes/guacamole/guacamole-base.css @@ -68,6 +68,7 @@ input[type="submit"], button, a.button { background-color: var(--button-color); border: none; + outline: none; } input[type="submit"]:hover, button:hover, a.button:hover { background-color: var(--button-color-hover); @@ -230,10 +231,13 @@ } /* SIDE MENU */ - - .menu-content { - background: var(--modal-bg-color); - } + .menu, .menu .header { + background: var(--modal-bg-color) !important; + box-shadow: none; +} +.menu-content, .menu-content .header, .menu-body { + background: var(--modal-bg-color) !important; +} .clipboard, .clipboard-service-target { background: rgba(0, 0, 0, 0.25); color: white; @@ -330,4 +334,16 @@ background: var(--modal-bg-color); color: #FFF; } - \ No newline at end of file +/* File Transfer */ +#file-transfer-dialog .transfer-manager { + background: var(--modal-bg-color) ; +} +.transfer.error { + background: rgba(244, 67, 54, 0.5) ; +} +.transfer-manager .header h2 { + background-color: transparent ; +} +.transfer .in-progress .progress { + background-color: var(--modal-bg-color) ; +} \ No newline at end of file diff --git a/CSS/themes/guacamole/organizr-dark.css b/CSS/themes/guacamole/organizr-dark.css new file mode 100644 index 00000000..7f61e757 --- /dev/null +++ b/CSS/themes/guacamole/organizr-dark.css @@ -0,0 +1,22 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* GUACAMOLE ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/guacamole/guacamole-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + } \ No newline at end of file diff --git a/CSS/themes/html5speedtest/html5speedtest-base.css b/CSS/themes/html5speedtest/html5speedtest-base.css index d3e37089..a3e81cd4 100644 --- a/CSS/themes/html5speedtest/html5speedtest-base.css +++ b/CSS/themes/html5speedtest/html5speedtest-base.css @@ -42,12 +42,12 @@ div.meterText:empty:before { } #startStopBtn { color: #ffffff; - background: var(--start-button-color); - border: 0.15em solid var(--start-button-color); + background: var(--button-color); + border: 0.15em solid var(--button-color); } #startStopBtn:hover { - border: 0.15em solid var(--start-button-color-hover); - background: var(--start-button-color-hover); + border: 0.15em solid var(--button-color-hover); + background: var(--button-color-hover); } #startStopBtn.running { background: #FF3030 !important; diff --git a/CSS/themes/html5speedtest/organizr-dark.css b/CSS/themes/html5speedtest/organizr-dark.css new file mode 100644 index 00000000..47dcfd56 --- /dev/null +++ b/CSS/themes/html5speedtest/organizr-dark.css @@ -0,0 +1,21 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* HTML5SPEEDTEST ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/html5speedtest/html5speedtest-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + } \ No newline at end of file diff --git a/CSS/themes/jackett/organizr-dark.css b/CSS/themes/jackett/organizr-dark.css new file mode 100644 index 00000000..84c01cc6 --- /dev/null +++ b/CSS/themes/jackett/organizr-dark.css @@ -0,0 +1,22 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* JACKETT ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/jackett/jackett-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + } \ No newline at end of file diff --git a/CSS/themes/jellyfin/organizr-dark.css b/CSS/themes/jellyfin/organizr-dark.css new file mode 100644 index 00000000..6b345a5c --- /dev/null +++ b/CSS/themes/jellyfin/organizr-dark.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* JELLYFIN ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/jellyfin/jellyfin-base.css); +:root { + --main-bg-color: #1F1F1F; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + } \ No newline at end of file diff --git a/CSS/themes/kitana/aquamarine.css b/CSS/themes/kitana/aquamarine.css new file mode 100644 index 00000000..9cce39c2 --- /dev/null +++ b/CSS/themes/kitana/aquamarine.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* KITANA AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/kitana/kitana-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --accent-color: #12afa0; + --accent-color-hover: #fff; + --text: #eee; + --text-hover: #fff; + --link-color: #12afa0; +} \ No newline at end of file diff --git a/CSS/themes/kitana/dark.css b/CSS/themes/kitana/dark.css new file mode 100644 index 00000000..48f1ecf1 --- /dev/null +++ b/CSS/themes/kitana/dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* KITANA DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/kitana/kitana-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #fff; + --accent-color-hover: rgba(255, 255, 255, 0.45); + --text: #eee; + --text-hover: #fff; + --link-hover: rgba(255, 255, 255, 0.45); +} \ No newline at end of file diff --git a/CSS/themes/kitana/hotline.css b/CSS/themes/kitana/hotline.css new file mode 100644 index 00000000..85e3570e --- /dev/null +++ b/CSS/themes/kitana/hotline.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* KITANA HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/kitana/kitana-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --text: #eee; + --text-hover: #fff; + --link-hover: #F44336; +} \ No newline at end of file diff --git a/CSS/themes/kitana/kitana-base.css b/CSS/themes/kitana/kitana-base.css new file mode 100644 index 00000000..ef558e73 --- /dev/null +++ b/CSS/themes/kitana/kitana-base.css @@ -0,0 +1,190 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +body { + background: var(--main-bg-color); +} + +a { + color: var(--link-color); +} + +a:hover { + color: #fff; +} + +#content:before { + background: var(--main-bg-color); +} + +* { + outline: none !important; +} + +/* TEXT */ +body, +.navbar-dark .navbar-text { + color: var(--text); +} + +/* ACCENTS */ +.badge-dark { + color: var(--button-text); + background-color: var(--accent-color); +} + +/* NAVBAR */ +#nav .bg-dark { + background: hsla(0, 0%, 0%, .25) !important; +} + +.navbar-dark .navbar-nav .nav-link { + color: var(--text); +} + +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { + color: var(--text-hover); +} + +#navbarSupportedContent ul li { + background-color: transparent !important; + border: none !important; +} + +/* DROPDOWN MENU */ +.dropdown-menu { + color: #fff; + background: var(--modal-bg-color); + border: 1px solid transparent; +} + +.dropdown-item.active, +.dropdown-item:active, +.dropdown:active:hover { + color: var(--text-hover); + background-color: rgb(0 0 0 / 25%) !important; +} + +.dropdown-item { + color: var(--text); +} + +.dropdown-item:hover, +.dropdown-item:focus { + color: var(--text-hover); + text-decoration: none; + background-color: rgb(255 255 255 / 8%); +} + + +/* CARDS */ +.card { + background: rgb(255 255 255 / 8%) !important; + border: 1px solid transparent; +} + +.card-header { + background-color: rgb(0 0 0 / 25%); + border-bottom: 1px solid rgba(255, 255, 255, .125) !important; +} + +ul li { + background-color: rgb(255 255 255 / 8%) !important; + border: none !important; +} + +ul li:hover { + background-color: rgb(255 255 255 / 16%) !important; + border: none; +} + +/* SETTINGS */ +.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; + border-color: #4440 #4440 transparent; +} + +.plugin_content .nav-tabs { + border-bottom: 1px solid rgb(255 255 255 / 20%); +} + +.alert-secondary { + background-color: rgb(255 255 255 / 20%); +} + +/* BUTTONS */ +.btn { + border-color: var(--button-color); + background: var(--button-color); + color: var(--button-text); + margin-right: 5px; +} + +.btn:hover, +.btn:focus, +.btn:active, +.btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, +.show>.btn-primary.dropdown-toggle { + border-color: var(--button-color-hover); + color: var(--text-hover); + background-color: var(--button-color-hover); + box-shadow: none !important; +} + +.badge-primary { + color: var(--button-text); + background-color: var(--accent-color); +} + +.badge-secondary { + color: var(--button-text); + background-color: rgb(0 0 0 / 25%); +} + +/* FORMS */ +.form-control { + color: var(--text) !important; + background-color: rgba(0, 0, 0, .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; + color: var(--text-hover) !important; +} + +/* PLACEHOLDER TEXT */ +::placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-moz-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-ms-input-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +::-webkit-input-placeholder { + color: var(--text) !important; + opacity: .5; +} \ No newline at end of file diff --git a/CSS/themes/kitana/organizr-dark.css b/CSS/themes/kitana/organizr-dark.css new file mode 100644 index 00000000..86c5cf2f --- /dev/null +++ b/CSS/themes/kitana/organizr-dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* KITANA ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/kitana/kitana-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --button-text: #eee; + --accent-color:#2cabe3; + --accent-color-hover: #fff; + --text:#96a2b4; + --text-hover: #fff; + --link-color: #2cabe3; +} \ No newline at end of file diff --git a/CSS/themes/kitana/plex.css b/CSS/themes/kitana/plex.css new file mode 100644 index 00000000..f6065879 --- /dev/null +++ b/CSS/themes/kitana/plex.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* KITANA PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/kitana/kitana-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --text: #eee; + --text-hover: #fff; + --link-color:#fff; +} \ No newline at end of file diff --git a/CSS/themes/kitana/space-gray.css b/CSS/themes/kitana/space-gray.css new file mode 100644 index 00000000..2c77d0ff --- /dev/null +++ b/CSS/themes/kitana/space-gray.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* KITANA SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/kitana/kitana-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --accent-color: #81a6b7; + --accent-color-hover: #81a6b7; + --text: #eee; + --text-hover: #fff; + --link-color: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/lazylibrarian/organizr-dark.css b/CSS/themes/lazylibrarian/organizr-dark.css new file mode 100644 index 00000000..4c2daa4a --- /dev/null +++ b/CSS/themes/lazylibrarian/organizr-dark.css @@ -0,0 +1,24 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* LAZYLIBRARIAN ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/lazylibrarian/lazylibrarian-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + --queue-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/lidarr/lidarr-base.css b/CSS/themes/lidarr/lidarr-base.css index 8e4ac395..a6992ffa 100644 --- a/CSS/themes/lidarr/lidarr-base.css +++ b/CSS/themes/lidarr/lidarr-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -12,7 +11,7 @@ /* https://github.com/gilbN/theme.park */ body { - background: var(--main-bg-color); + background: var(--main-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; @@ -20,799 +19,1067 @@ body { -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; - } - /* scroller */ +} + +/* scroller */ ::-webkit-scrollbar-corner { - background-color: hsla(0,0%,100%,.08); + background-color: hsla(0, 0%, 100%, .08); } + ::-webkit-scrollbar { width: 10px; height: 10px; background: rgba(0, 0, 0, .25); } + ::-webkit-scrollbar-thumb { -webkit-border-radius: 2px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.25) !important; } + ::-webkit-scrollbar-thumb:hover { -webkit-border-radius: 2px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.45) !important; } + /* MINI RIGHT SCROLL BAR */ .OverlayScroller-thumb-1Lhfi { -background-color: hsla(0,0%,100%,.25) !important; + background-color: hsla(0, 0%, 100%, .25) !important; } + .OverlayScroller-thumb-1Lhfi:hover { background-color: rgba(255, 255, 255, 0.45) !important; } - /* LINKS */ - .Link-to-6fmSq { - color: #FFF; - } - .Link-to-6fmSq:hover { - color: #FFF; - text-decoration: none; - } - - /* LOADING PAGE */ - .ErrorPage-page-3GptQ, .ErrorPage-version-3txe6, .LoadingMessage-loadingMessage-1gR5r { - color: #FFF; - } - .LoadingIndicator-ripple-358v5 { + +/* LINKS */ +.Link-to-6fmSq { + color: #FFF; +} + +.Link-to-6fmSq:hover { + color: #FFF; + text-decoration: none; +} + +/* LOADING PAGE */ +.ErrorPage-page-3GptQ, +.ErrorPage-version-3txe6, +.LoadingMessage-loadingMessage-1gR5r { + color: #FFF; +} + +.LoadingIndicator-ripple-358v5 { border: 2px solid #fff; - } - - /* MODAL */ - .ModalHeader-modalHeader-gpcvG { - background: var(--main-bg-color); - color: #fff; - border-bottom: 1px solid hsla(0,0%,100%,.08); - } - .ModalContent-modalContent--txrl { - background: var(--main-bg-color); - color: #fff; - } - .ModalFooter-modalFooter-1N5Ku { - background: var(--main-bg-color); - color: #fff; - border-top: 1px solid hsla(0,0%,100%,.08); - } - - /* INPUT */ - .TagInput-internalInput-Jbb1T { - background-color: transparent; - color: #fff; - } - .SelectInput-select-1qCdc { - background-color: #1e1e1e !important; - } - .AutoSuggestInput-suggestionsList-_bVXO, .AutoSuggestInput-suggestionsContainerOpen-3TAB7, .AutoSuggestInput-suggestionsContainer-3MmlD { - background-color: #323232 !important; - color: white; - border: none !important; - } - .AutoSuggestInput-suggestionHighlighted-2BWyt { - background-color: hsla(0,0%,100%,.08); - } - .FormInputHelpText-helpText-3_AVV { - color: #fff; - } - .CheckInput-primaryIsChecked-3mVN0 { - border-color: transparent; - background-color: var(--accent-color); - } - - /* HEADER */ - - .PageHeader-header-1IhlM { - background-color: rgba(0, 0, 0, .7); - } - - .PageHeader-donate-ZT-3N { - color: #c4273c !important; - } - - /* SIDE MENU */ - - @media only screen and (max-width: 768px) { - .PageSidebar-sidebar-3IOcI { - background-color: rgba(0, 0, 0, .45) !important; - } - } - .PageSidebar-sidebar-2UXc0 { - background-color: rgba(0, 0, 0, .45); - } - .PageSidebar-sidebarContainer-3Hxpq { - background-color: rgba(0, 0, 0, .45) !important; - } - .PageSidebar-sidebar-3IOcI { - background-color: transparent; - } - - .PageSidebarItem-link-TuHn2:hover, .PageSidebarItem-link-TuHn2:focus { - color: #FFF !important; - background-color: hsla(0,0%,100%,.08); - text-decoration: none; - } - .PageSidebarItem-isActiveLink-1Hupc { - color: #FFF; - background-color: hsla(0,0%,100%,.08); - } - .PageSidebarItem-isActiveParentLink-2uxKf { - background-color: transparent; - } - - @media only screen and (max-width: 768px) { - .PageSidebar-sidebarContainer-3Hxpq { - background: var(--main-bg-color) !important; - } - } - .PageSidebarItem-isActiveItem-bUesh { - border-left: 3px solid var(--accent-color); - } - - .fa-search:hover { - color: #FFF !important; - } - .Icon-default-3C-KJ:hover { - color: #fff; - } - .MonitorToggleButton-toggleButton-3CcN9 { - color: #dadada; - } - - .Table-table-2C3O8 { - color: #fff; - } - - .Popover-title-326tA, .SeasonInfo-title-1tid_, .Popover-body-10Yh7 { - background-color: #1f1f1f !important; - color: #fff !important; - } - .Tooltip-tooltipContainer-2693s { - color: #fff; - } - .Tooltip-right-2MxTa, .Tooltip-default-2NTKh { - border-right-color: #1f1f1f !important; - } - - - /* TOP MENU */ - .PageToolbar-toolbar-1Lo1N { - background-color: rgba(0, 0, 0, .25); - color: hsla(0,0%,100%,.7); - } - - /* HOVEL LABELS */ - .Label-default-2zdw6 { - border-color: #1b1b1b; - background-color: #1b1b1b; - } - /* TOP HEADER DROPDOWN */ - .MenuItem-menuItem-zB-Up, .MenuContent-menuContent-3Zkj4 { - background: var(--modal-bg-color); - color: #e1e2e3; - } - .MenuItem-menuItem-zB-Up:hover, .MenuItem-menuItem-zB-Up:focus { - background: hsla(0,0%,100%,.08) !important; - color: #fbfcfc; - text-decoration: none; - } - .MenuItemSeparator-separator-1ayq0 { - background-color: #e1e2e3; - } - - /* TOP HEADER HOVER */ - .PageToolbarButton-toolbarButton-QiQEt:hover { - color: #FFF; - } - .MenuButton-menuButton-3nh0N:hover { - color: #FFF; - } - /* ALPHABET JUMP BAR */ - .PageJumpBar-jumpBar-3owcF { - color: #FFF; - } - - /* ADD NEW */ - - /* SEARCH BAR */ - .Input-input-2YWzR { - border: none; - background-color: rgba(0, 0, 0, .25); - color: #FFF - } - .Input-input-2YWzR:focus { - outline: 0; - border-color: transparent; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0); - background-color: rgba(0, 0, 0, .25); - } - .Button-default-2uiHU:hover { - border-color: transparent; - background-color: hsla(0,0%,100%,.3) !important; - color: #fff; - } - /* TEXT COLOR */ - .PageContentBody-innerContentBody-tEszh { - color: #fff; - } - - ::placeholder {color: #eee;} - :-moz-placeholder {color: #eee;} - :-ms-input-placeholder {color: #eee;} - ::-webkit-input-placeholder {color: #eee ;} - /* IMPORT */ - - .FieldSet-legend-3x6NF { - color: #FFF; - border-bottom: 1px solid hsla(0,0%,100%,.08); - } - .TableRow-row-33xJE:hover { - background-color: hsla(0,0%,100%,.08); - color: #FFF; - } - .VirtualTableRow-row-2-JS9:hover { - background-color: hsla(0,0%,100%,.08); - } - - - /* MASS EDITOR */ - /* FOOTER */ - .PageContentFooter-contentFooter-3ODMj { - border: none; - background-color: rgba(0, 0, 0, .25); - color: #FFF; - } - - /* SEASON PASS */ - - .SeasonPassSeason-season-2FWuT { - border: none; - background-color: rgba(0, 0, 0, .25) !important; - } - .SeasonPassSeason-allEpisodes-1zGja { - background-color: #5cb85c; - } - - /* CALENDAR */ - .Button-default-2uiHU { - color: #FFF; - background-color: rgba(0, 0, 0, .25); - border-color: transparent; - } - .DayOfWeek-dayOfWeek-1iw4D { - background-color: hsla(0,0%,100%,.08); - } - - .CalendarDay-day-2TMXA { - -webkit-box-flex: 1; - -webkit-flex: 1 0 14.28%; - flex: 1 0 14.28%; - overflow: hidden; - min-height: 70px; - border-bottom: 1px solid hsla(0,0%,100%,.08); - border-left: 1px solid hsla(0,0%,100%,.08); - border-right: 1px solid hsla(0,0%,100%,.08); - } - .CalendarEvent-event-3Uyb9 { - border-bottom: none !important; - } - .CalendarEvent-event-3Uyb9:hover { - background-color: hsla(0,0%,100%,.08) !important; - border-bottom: none !important; - } - /* CALENDAR COLORS */ - .CalendarEvent-downloading-1kwSO { - border-left-color: var(--calendar-Downloading); - } - .CalendarEvent-downloaded-2vSrJ { - border-left-color: var(--calendar-Downloaded); - } - .CalendarEvent-unreleased-mSAoI { - border-left-color: var(--calendar-Unreleased); - } - .CalendarEvent-partial-2_4q1 { - border-left-color: var(--calendar-Partial); - } - .CalendarEvent-unmonitored-Zvc-m { - border-left-color: var(--calendar-Unmonitored); - } - .CalendarEvent-missing-1y6vZ { - border-left-color: var(--calendar-Missing); - } - - /* ACTIVITY */ - .ProgressBar-primary-3YDfb { +} + +/* MODAL */ +.ModalHeader-modalHeader-gpcvG { + background: var(--main-bg-color); + color: #fff; + border-bottom: 1px solid var(--accent-color); +} + +.ModalContent-modalContent--txrl { + background: var(--main-bg-color); + color: #fff; +} + +.ModalFooter-modalFooter-1N5Ku { + background: var(--main-bg-color); + color: #fff; + border-top: 1px solid var(--accent-color); +} + +/* INPUT */ +.TagInput-internalInput-Jbb1T { + background-color: transparent; + color: #fff; +} + +.TagInput-input-3E1DX { + border: none; + background-color: rgba(255, 255, 255, 0.08); + color: #FFF; +} + +.TagInput-input-3E1DX.TagInput-isFocused-13j-F { + outline: 0; + border-color: #fff; + box-shadow: none; + background-color: rgba(255, 255, 255, 0.25); +} + +.TagInput-suggestion-3jRkQ, +.TagInput-containerOpen-2g0Wc, +.TagInput-suggestionsContainer-1vjHY { + background-color: #1e1e1e !important; +} + +.TagInput-suggestion-3jRkQ:hover { + background-color: hsla(0, 0%, 100%, .3) !important; +} + +.SelectInput-select-1qCdc { + background-color: #1e1e1e !important; +} + +.AutoSuggestInput-suggestionsList-_bVXO, +.AutoSuggestInput-suggestionsContainerOpen-3TAB7, +.AutoSuggestInput-suggestionsContainer-3MmlD { + background-color: #323232 !important; + color: white; + border: none !important; +} + +.AutoSuggestInput-suggestionHighlighted-2BWyt { + background-color: hsla(0, 0%, 100%, .08); +} + +.FormInputHelpText-helpText-3_AVV { + color: #fff; +} + +.CheckInput-primaryIsChecked-3mVN0 { + border-color: transparent; background-color: var(--accent-color); - } -.Label-info-3YD3Y { - border-color: var(--accent-color); +} + +/* HEADER */ + +.PageHeader-header-1IhlM { + background-color: rgba(0, 0, 0, .7); +} + +.PageHeader-donate-ZT-3N { + color: #c4273c !important; +} + +/* SIDE MENU */ + +@media only screen and (max-width: 768px) { + .PageSidebar-sidebar-3IOcI { + background-color: rgba(0, 0, 0, .45) !important; + } +} + +.PageSidebar-sidebar-2UXc0 { + background-color: rgba(0, 0, 0, .45); +} + +.PageSidebar-sidebarContainer-3Hxpq { + background-color: rgba(0, 0, 0, .45) !important; +} + +.PageSidebar-sidebar-3IOcI { + background-color: transparent; +} + +.PageSidebarItem-link-TuHn2:hover, +.PageSidebarItem-link-TuHn2:focus { + color: #FFF !important; + background-color: hsla(0, 0%, 100%, .08); + text-decoration: none; +} + +.PageSidebarItem-isActiveLink-1Hupc { + color: #FFF; + background-color: hsla(0, 0%, 100%, .08); +} + +.PageSidebarItem-isActiveParentLink-2uxKf { + background-color: transparent; +} + +@media only screen and (max-width: 768px) { + .PageSidebar-sidebarContainer-3Hxpq { + background: var(--main-bg-color) !important; + } +} + +.PageSidebarItem-isActiveItem-bUesh { + border-left: 3px solid var(--accent-color); +} + +.fa-search:hover { + color: #FFF !important; +} + +.Icon-default-3C-KJ:hover { + color: #fff; +} + +.MonitorToggleButton-toggleButton-3CcN9 { + color: #dadada; +} + +.Table-table-2C3O8 { + color: #fff; +} + +.Popover-title-326tA, +.SeasonInfo-title-1tid_, +.Popover-body-10Yh7 { + background-color: #1f1f1f !important; + color: #fff !important; +} + +.Tooltip-tooltipContainer-2693s { + color: #fff; +} + +.Tooltip-right-2MxTa, +.Tooltip-default-2NTKh { + border-right-color: #1f1f1f !important; +} + +.Tooltip-tooltip-3HJXy.Tooltip-inverse-yMvcm { + background: var(--modal-bg-color); + box-shadow: 0 5px 10px rgba(0, 0, 0, .2) +} + +.Tooltip-bottom-3Ewbi.Tooltip-inverse-yMvcm { + border-bottom-color: #eee; +} + + +/* TOP MENU */ +.PageToolbar-toolbar-1Lo1N { + background-color: rgba(0, 0, 0, .25); + color: hsla(0, 0%, 100%, .7); +} + +/* HOVEL LABELS */ +.Label-default-2zdw6 { + border-color: #1b1b1b; + background-color: #1b1b1b; +} + +/* TOP HEADER DROPDOWN */ +.MenuItem-menuItem-zB-Up, +.MenuContent-menuContent-3Zkj4 { + background: var(--modal-bg-color); + color: #e1e2e3; +} + +.MenuItem-menuItem-zB-Up:hover, +.MenuItem-menuItem-zB-Up:focus { + background: hsla(0, 0%, 100%, .08) !important; + color: #fbfcfc; + text-decoration: none; +} + +.MenuItemSeparator-separator-1ayq0 { + background-color: #e1e2e3; +} + +/* TOP HEADER HOVER */ +.PageToolbarButton-toolbarButton-QiQEt:hover { + color: #FFF; +} + +.MenuButton-menuButton-3nh0N:hover { + color: #FFF; +} + +/* ALPHABET JUMP BAR */ +.PageJumpBar-jumpBar-3owcF { + color: #FFF; +} + +/* ADD NEW */ + +/* SEARCH BAR */ +.Input-input-2YWzR { + border: none; + background-color: rgba(255, 255, 255, 0.08); + color: #FFF; +} + +.Input-input-2YWzR:focus { + outline: 0; + border-color: #fff; + box-shadow: none; + background-color: rgba(255, 255, 255, 0.25); +} + +.Button-default-2uiHU:hover { + border-color: transparent; + background-color: hsla(0, 0%, 100%, .3) !important; + color: #fff; +} + +/* TEXT COLOR */ +.PageContentBody-innerContentBody-tEszh { + color: #fff; +} + +::placeholder { + color: #eee; +} + +:-moz-placeholder { + color: #eee; +} + +:-ms-input-placeholder { + color: #eee; +} + +::-webkit-input-placeholder { + color: #eee; +} + +/* IMPORT */ + +.FieldSet-legend-3x6NF { + color: #FFF; + border-bottom: 1px solid var(--accent-color); +} + +.TableRow-row-33xJE:hover { + background-color: hsla(0, 0%, 100%, .08); + color: #FFF; +} + +.VirtualTableRow-row-2-JS9:hover { + background-color: hsla(0, 0%, 100%, .08); +} + + +/* MASS EDITOR */ +/* FOOTER */ +.PageContentFooter-contentFooter-3ODMj { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF; +} + +/* SEASON PASS */ + +.SeasonPassSeason-season-2FWuT { + border: none; + background-color: rgba(0, 0, 0, .25) !important; +} + +.SeasonPassSeason-allEpisodes-1zGja { + background-color: #5cb85c; +} + +/* CALENDAR */ +.Button-default-2uiHU { + color: #FFF; + background-color: rgba(0, 0, 0, .25); + border-color: transparent; +} + +.DayOfWeek-dayOfWeek-1iw4D { + background-color: hsla(0, 0%, 100%, .08); +} + +.CalendarDay-day-2TMXA { + -webkit-box-flex: 1; + -webkit-flex: 1 0 14.28%; + flex: 1 0 14.28%; + overflow: hidden; + min-height: 70px; + border-bottom: 1px solid hsla(0, 0%, 100%, .08); + border-left: 1px solid hsla(0, 0%, 100%, .08); + border-right: 1px solid hsla(0, 0%, 100%, .08); +} + +.CalendarEvent-event-3Uyb9 { + border-bottom: none !important; +} + +.CalendarEvent-event-3Uyb9:hover { + background-color: hsla(0, 0%, 100%, .08) !important; + border-bottom: none !important; +} + +/* CALENDAR COLORS */ +.CalendarEvent-downloading-1kwSO { + border-left-color: var(--calendar-Downloading); +} + +.CalendarEvent-downloaded-2vSrJ { + border-left-color: var(--calendar-Downloaded); +} + +.CalendarEvent-unreleased-mSAoI { + border-left-color: var(--calendar-Unreleased); +} + +.CalendarEvent-partial-2_4q1 { + border-left-color: var(--calendar-Partial); +} + +.CalendarEvent-unmonitored-Zvc-m { + border-left-color: var(--calendar-Unmonitored); +} + +.CalendarEvent-missing-1y6vZ { + border-left-color: var(--calendar-Missing); +} + +/* ACTIVITY */ +.ProgressBar-primary-3YDfb { background-color: var(--accent-color); - } - - /* SETTINGS */ - - .Settings-summary-3KPAv { - color: #fff; - } - - /* PROFILES */ - .Card-card-1iGZk, .QualityProfiles-addQualityProfile-2U2Io { - background-color: rgba(0,0,0,.45); - box-shadow: 0 0 10px 1px #000000; - color: #fff; - } - .QualityProfiles-center-1iiKm, .LanguageProfiles-center-7EV_2, .ReleaseProfiles-center-114Qx { - background-color: transparent; - border: none; - color: #c2c6c8; - } - .QualityProfileItem-qualityProfileItem-VFp-W, .QualityProfileItemGroup-qualityProfileItemGroup-2U1l5 { - border: none; - background-color: rgba(0, 0, 0, .25); - color: #FFF; - } - .QualityProfileItemGroup-qualityProfileItemGroup-2U1l5.QualityProfileItemGroup-editGroups-2KzDp { - background: rgba(0, 0, 0, 0.25); - } - /* PROFILES */ - .Indexers-center-11Csq { - background-color: transparent; - border: none; - color: #c2c6c8; - } - - /* DOWNLOAD CLIENTS */ - .DownloadClients-center-FvACx { - background-color: transparent; - border: none; - color: #c2c6c8; - } - - /* CONNECTIONS */ - .Notifications-center-8iwmy { - background-color: transparent; - border: none; - color: #c2c6c8; - } - - /* LOG */ - .Alert-info-1J8mE { - border-color: transparent; - color: #FFC107; - background-color: rgba(0, 0, 0, 0.25); - } - - /* -------------------------LIDARR STUFF------------------------------*/ - - /* Buttons */ +} + +/* SETTINGS */ + +.Settings-summary-3KPAv { + color: #fff; +} + +/* PROFILES */ +.Card-card-1iGZk, +.QualityProfiles-addQualityProfile-2U2Io { + background-color: rgba(0, 0, 0, .45); + box-shadow: 0 0 10px 1px #000000; + color: #fff; +} + +.QualityProfiles-center-1iiKm, +.LanguageProfiles-center-7EV_2, +.ReleaseProfiles-center-114Qx { + background-color: transparent; + border: none; + color: #c2c6c8; +} + +.QualityProfileItem-qualityProfileItem-VFp-W, +.QualityProfileItemGroup-qualityProfileItemGroup-2U1l5 { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF; +} + +.QualityProfileItemGroup-qualityProfileItemGroup-2U1l5.QualityProfileItemGroup-editGroups-2KzDp { + background: rgba(0, 0, 0, 0.25); +} + +/* PROFILES */ +.Indexers-center-11Csq { + background-color: transparent; + border: none; + color: #c2c6c8; +} + +/* INDEXERS */ + +/* DOWNLOAD CLIENTS */ +.DownloadClients-center-FvACx { + background-color: transparent; + border: none; + color: #c2c6c8; +} + +/* IMPORT LISTS */ + +/* CONNECTIONS */ +.Notifications-center-8iwmy { + background-color: transparent; + border: none; + color: #c2c6c8; +} + +/* LOG */ +.Alert-info-1J8mE { + border-color: transparent; + color: #FFC107; + background-color: rgba(0, 0, 0, 0.25); +} + +/* -------------------------LIDARR STUFF------------------------------*/ + +/* Buttons */ .Button-default-2uiHU { color: #FFF; background-color: var(--button-color); border-color: transparent; } + .Button-default-2uiHU:hover { border-color: transparent; background-color: var(--button-color-hover) !important; color: #fff; - } +} .Button-primary-1F1YL { border-color: transparent; background-color: var(--button-color); color: #fff; - } - +} + .Button-primary-1F1YL:hover { border-color: transparent; background-color: var(--button-color-hover) !important; color: #fff; } + .Button-success-36KsU { border-color: var(--button-color); background-color: var(--button-color); color: #fff; } + .Button-success-36KsU:hover { border-color: var(--button-color-hover); background-color: var(--button-color-hover); color: #fff; } - - .LoadingIndicator-ripple-1264V { - border: 2px solid #FFFFFF; - } - /* Popup modal */ - .Modal-large-I2McN, .Modal-modal-3oHjA, .ModalContent-modalContent-1B9AX { - background-color: #282828; - color: #FFF; - } - .ModalHeader-modalHeader-P3MTG, .ModalFooter-modalFooter-3izCM { - background-color: #323232; - color: #FFF; - } - .ModalContent-closeButton-37Puk:hover { + +.LoadingIndicator-ripple-1264V { + border: 2px solid #FFFFFF; +} + +/* Popup modal */ +.Modal-large-I2McN, +.Modal-modal-3oHjA, +.ModalContent-modalContent-1B9AX { + background-color: #282828; + color: #FFF; +} + +.ModalHeader-modalHeader-P3MTG, +.ModalFooter-modalFooter-3izCM { + background-color: #323232; + color: #FFF; +} + +.ModalContent-closeButton-37Puk:hover { + color: #fff; +} + +.ModalFooter-modalFooter-3izCM a:first-child, +.ModalFooter-modalFooter-3izCM button:first-child { + background-color: #656565 !important; + border-color: transparent; +} + +.ModalFooter-modalFooter-3izCM a:first-child, +.ModalFooter-modalFooter-3izCM button:first-child:hover { + margin-left: 0; + background-color: hsla(0, 0%, 100%, .3) !important; + color: white; + border-bottom-color: transparent; +} + +.Button-default-1X0nf { + border-color: transparent; + background-color: #656565; + color: #FFF; +} + +.Button-default-1X0nf:hover { + border-color: transparent; + background-color: hsla(0, 0%, 100%, .3) !important; color: #fff; } - .ModalFooter-modalFooter-3izCM a:first-child, .ModalFooter-modalFooter-3izCM button:first-child { - background-color: #656565 !important; - border-color: transparent; - } - .ModalFooter-modalFooter-3izCM a:first-child, .ModalFooter-modalFooter-3izCM button:first-child:hover { - margin-left: 0; - background-color: hsla(0,0%,100%,.3) !important; - color: white; - border-bottom-color: transparent; - } - .Button-default-1X0nf { - border-color: transparent; - background-color: #656565; - color: #FFF; - } - .Button-default-1X0nf:hover { - border-color: transparent; - background-color: hsla(0,0%,100%,.3) !important; - color: #fff; - } - .Button-primary-1F1YL { - border-color: transparent; - } - .Button-primary-1F1YL:hover { - border-color: transparent; - } - .TagInput-input-3E1DX { - background-color: transparent; - color: #FFF; - } - .TagInput-suggestion-3jRkQ, .TagInput-containerOpen-2g0Wc, .TagInput-suggestionsContainer-1vjHY { - background-color: #1e1e1e !important; - } - .TagInput-suggestion-3jRkQ:hover { - background-color: hsla(0,0%,100%,.3) !important; - } - - /* Main Menu Header */ - .PageHeader-header-1lnFT { - background-color: rgba(0, 0, 0, .7); - } - .PageToolbar-toolbar-1oL_w { - background-color: rgba(0, 0, 0, .25); - color: hsla(0,0%,100%,.7); - } - .PageHeader-donate-3Lk-h { - color: #c4273c !important; - } - .PageToolbarButton-toolbarButton-3b5EM:hover { - color: #FFF; - } - .MenuButton-menuButton-3cqRJ:hover { - color: #FFF; - } - .MenuItem-menuItem-211VP, .MenuContent-menuContent-e2UAN { - background-color: #191a1c; - color: #e1e2e3; - } - .MenuItem-menuItem-211VP:hover, .MenuItem-menuItem-211VP:focus { - background-color: hsla(0,0%,100%,.08) !important; - color: #fbfcfc; - text-decoration: none; - } - .ArtistSearchInput-sectionTitle-3Xr5V { - color: #fff; - } - .ArtistSearchInput-containerOpen-OZAuD .ArtistSearchInput-artistContainer-331xe { - border: none; - background: var(--modal-bg-color); - color: #fff; - box-shadow: 0 0 10px 1px #000000; - } - .ArtistSearchInput-artistContainer-331xe::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.25); - } - .ArtistSearchInput-highlighted-2oxYA { - background-color: hsla(0,0%,100%,.08) - } - - /* Sidebar */ - @media only screen and (max-width: 768px) { - .PageSidebar-sidebar-2UXc0 { - background: rgba(0, 0, 0, .25); - background-image: var(--main-bg-color); - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; - } - } - .PageSidebar-sidebarContainer-2kLcI { + +.Button-primary-1F1YL { + border-color: transparent; +} + +.Button-primary-1F1YL:hover { + border-color: transparent; +} + +/* Main Menu Header */ +.PageHeader-header-1lnFT { + background-color: rgba(0, 0, 0, .7); +} + +.PageToolbar-toolbar-1oL_w { + background-color: rgba(0, 0, 0, .25); + color: hsla(0, 0%, 100%, .7); +} + +.PageHeader-donate-3Lk-h { + color: #c4273c !important; +} + +.PageToolbarButton-toolbarButton-3b5EM:hover { + color: #FFF; +} + +.MenuButton-menuButton-3cqRJ:hover { + color: #FFF; +} + +.MenuItem-menuItem-211VP, +.MenuContent-menuContent-e2UAN { + background-color: #191a1c; + color: #e1e2e3; +} + +.MenuItem-menuItem-211VP:hover, +.MenuItem-menuItem-211VP:focus { + background-color: hsla(0, 0%, 100%, .08) !important; + color: #fbfcfc; + text-decoration: none; +} + +.ArtistSearchInput-sectionTitle-3Xr5V { + color: #fff; +} + +.ArtistSearchInput-containerOpen-OZAuD .ArtistSearchInput-artistContainer-331xe { + border: none; + background: var(--modal-bg-color); + color: #fff; + box-shadow: 0 0 10px 1px #000000; +} + +.ArtistSearchInput-artistContainer-331xe::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.25); +} + +.ArtistSearchInput-highlighted-2oxYA { + background-color: hsla(0, 0%, 100%, .08) +} + +/* Sidebar */ +@media only screen and (max-width: 768px) { + .PageSidebar-sidebar-2UXc0 { + background: rgba(0, 0, 0, .25); + background-image: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } +} + +.PageSidebar-sidebarContainer-2kLcI { background: transparent; - } - .PageSidebarItem-isActiveLink-1JpOZ { - color: hsla(0,0%,100%,.7) !important; - } - .PageSidebarItem-isActiveItem-34xgs { - border-left: 3px solid hsla(0,0%,100%,.08); - } - .PageSidebar-sidebar-2UXc0 { - background-color: rgba(0, 0, 0, .25); - } - .PageSidebarItem-isActiveParentLink-2qgS5 { - background-color: rgba(0, 0, 0, 0); - } - .PageSidebarItem-isActiveParentLink-2qgS5:hover { - background-color: hsla(0,0%,100%,.08); - } - .PageSidebarItem-link-2ron8:hover, .PageSidebarItem-link-2ron8:focus { - color: #FFF !important; - background-color: hsla(0,0%,100%,.08); - text-decoration: none; - } - .PageSidebarItem-link-2ron8 { - color: hsla(0,0%,100%,.7) !important; - } - /*ARTIST PAGE*/ - .ArtistIndexPoster-title-38afV { - background-color: rgba(255, 255, 255, 0.08); - } - .ArtistDetailsSeason-albumType-3aBd- { - border: none; - background-color: rgba(0, 0, 0, .25); - } - .ArtistDetailsSeason-header-2GIDr { - color: #fff; - } - .ArtistDetailsSeason-albumCount-14dOS { - color: #ffffff; - } - .ArtistDetailsSeason-collapseButtonContainer-1c4Kb { - border: none; - background-color: rgba(0, 0, 0, .25); - } - .ArtistDetails-metadataMessage-2NtMl { - color: #ffffff; - } - .ArtistDetailsSeason-albumCount-36Ow9 { - color: #ffffff; - } - .Label-default-2AF1C { +} + +.PageSidebarItem-isActiveLink-1JpOZ { + color: hsla(0, 0%, 100%, .7) !important; +} + +.PageSidebarItem-isActiveItem-34xgs { + border-left: 3px solid hsla(0, 0%, 100%, .08); +} + +.PageSidebar-sidebar-2UXc0 { + background-color: rgba(0, 0, 0, .25); +} + +.PageSidebarItem-isActiveParentLink-2qgS5 { + background-color: rgba(0, 0, 0, 0); +} + +.PageSidebarItem-isActiveParentLink-2qgS5:hover { + background-color: hsla(0, 0%, 100%, .08); +} + +.PageSidebarItem-link-2ron8:hover, +.PageSidebarItem-link-2ron8:focus { + color: #FFF !important; + background-color: hsla(0, 0%, 100%, .08); + text-decoration: none; +} + +.PageSidebarItem-link-2ron8 { + color: hsla(0, 0%, 100%, .7) !important; +} + +/*ARTIST PAGE*/ +.ArtistIndexPoster-title-38afV, +.ArtistIndexPosterInfo-info-3J_DB { + background-color: rgba(255, 255, 255, 0.08); +} + +.ArtistDetailsSeason-albumType-3aBd- { + border: none; + background-color: rgba(0, 0, 0, .25); +} + +.ArtistDetailsSeason-header-2GIDr { + color: #fff; +} + +.ArtistDetailsSeason-albumCount-14dOS { + color: #ffffff; +} + +.ArtistDetailsSeason-collapseButtonContainer-1c4Kb { + border: none; + background-color: rgba(0, 0, 0, .25); +} + +.ArtistDetails-metadataMessage-2NtMl { + color: #ffffff; +} + +.ArtistDetailsSeason-albumCount-36Ow9 { + color: #ffffff; +} + +.Label-default-2AF1C { border-color: var(--accent-color); background-color: var(--accent-color); } - /*ARTIST ALBUM PAGE*/ - .AlbumDetailsMedium-mediumNumber-3ZUko { - color: #fff; - } - .AlbumDetailsMedium-medium-dqPTF { - border: none; - background-color: rgba(0, 0, 0, .25); - } - .AlbumDetailsMedium-collapseButtonContainer-33Y3Z { - border-top: none; - background-color: rgba(0, 0, 0, .25); - } - .ArtistIndexOverview-container-3_iEh:hover .ArtistIndexOverview-content-3zZhb, .ArtistIndexProgressBar-progress-3DLoM { - background-color: hsla(0,0%,100%,.08); - } - .ArtistIndexBanner-title-3TKM6 { - background-color: rgba(0, 0, 0, .25); - color: #fff; - } - .ProgressBar-container-14z4A { - background-color: rgba(0, 0, 0, 0.25); - } - /* OVERVIEW PAGE */ - .ArtistIndexOverview-container-29HZM, .ArtistIndexOverview-container-29HZM:hover { + +/*ARTIST ALBUM PAGE*/ +.AlbumDetailsMedium-mediumNumber-3ZUko { + color: #fff; +} + +.AlbumDetailsMedium-medium-dqPTF { + border: none; + background-color: rgba(0, 0, 0, .25); +} + +.AlbumDetailsMedium-collapseButtonContainer-33Y3Z { + border-top: none; + background-color: rgba(0, 0, 0, .25); +} + +.ArtistIndexOverview-container-3_iEh:hover .ArtistIndexOverview-content-3zZhb, +.ArtistIndexProgressBar-progress-3DLoM { + background-color: hsla(0, 0%, 100%, .08); +} + +.ArtistIndexBanner-title-3TKM6 { + background-color: rgba(0, 0, 0, .25); + color: #fff; +} + +.ProgressBar-container-14z4A { + background-color: rgba(0, 0, 0, 0.25); +} + +/* OVERVIEW PAGE */ +.ArtistIndexOverview-container-29HZM, +.ArtistIndexOverview-container-29HZM:hover { background-color: transparent !important; - } - .ArtistIndexOverview-content-hiNUl:hover{ - background-color: hsla(0,0%,100%,.08) !important; - } - .ArtistIndexOverview-container-29HZM:hover .ArtistIndexOverview-content-hiNUl { +} + +.ArtistIndexOverview-content-hiNUl:hover { + background-color: hsla(0, 0%, 100%, .08) !important; +} + +.ArtistIndexOverview-container-29HZM:hover .ArtistIndexOverview-content-hiNUl { + background-color: transparent; +} + +.ArtistIndexOverview-content-hiNUl:hover { + text-decoration: none; +} + +/* BANNER PAGE */ +.ArtistIndexBanner-title-dKZ3c { + background-color: rgba(0, 0, 0, .25); +} + +/* Table view*/ +.VirtualTableRow-row-2osBd:hover { + background-color: rgba(0, 0, 0, .25); +} + +.VirtualTableRow-row-2osBd:hover, +.ArtistIndexHeader-sortName-3sIoX:hover, +.ArtistIndexHeader-artistType-1bUEX:hover, +.ArtistIndexHeader-trackCount-2fAYt:hover, +.ArtistIndexHeader-qualityProfileId-33lgF:hover, +.ArtistIndexHeader-languageProfileId-F8uCr:hover, +.ArtistIndexHeader-metadataProfileId-258c_:hover, +.ArtistIndexHeader-nextAlbum-2P-CJ:hover, +.ArtistIndexHeader-lastAlbum-18Y9w:hover, +.ArtistIndexHeader-added-z5UiU:hover, +.ArtistIndexHeader-genres-3YVsn:hover, +.ArtistIndexHeader-albumCount-1CnIC:hover, +.ArtistIndexHeader-trackProgress-5psBe:hover, +.ArtistIndexHeader-latestAlbum-KzyAA:hover, +.ArtistIndexHeader-actions-KjYeY:hover { + background-color: rgba(0, 0, 0, .25); + color: #FFF; +} + +.IconButton-button-2qiGi:hover { + color: #fff !important; background-color: transparent; - } - .ArtistIndexOverview-content-hiNUl:hover { - text-decoration: none; - } - /* BANNER PAGE */ - .ArtistIndexBanner-title-dKZ3c { - background-color: rgba(0, 0, 0, .25); - } - - /* Table view*/ - .VirtualTableRow-row-2osBd:hover { - background-color: rgba(0, 0, 0, .25); - } - .VirtualTableRow-row-2osBd:hover, .ArtistIndexHeader-sortName-3sIoX:hover, .ArtistIndexHeader-artistType-1bUEX:hover, .ArtistIndexHeader-trackCount-2fAYt:hover, - .ArtistIndexHeader-qualityProfileId-33lgF:hover, .ArtistIndexHeader-languageProfileId-F8uCr:hover, .ArtistIndexHeader-metadataProfileId-258c_:hover, - .ArtistIndexHeader-nextAlbum-2P-CJ:hover, .ArtistIndexHeader-lastAlbum-18Y9w:hover, .ArtistIndexHeader-added-z5UiU:hover, .ArtistIndexHeader-genres-3YVsn:hover, .ArtistIndexHeader-albumCount-1CnIC:hover, - .ArtistIndexHeader-trackProgress-5psBe:hover, .ArtistIndexHeader-latestAlbum-KzyAA:hover, .ArtistIndexHeader-actions-KjYeY:hover { - background-color: rgba(0, 0, 0, .25); - color: #FFF; - } - .IconButton-button-2qiGi:hover { - color: #fff !important; - background-color: transparent; - } - .IconButton-button-2qiGi { - color: #bac5cc; - } - /* Table options*/ - .TableOptionsColumn-column-2H7ic { - background: rgba(0, 0, 0, .25); - color: #FFF; - border: none; - } - /* Fix rating border*/ - .ArtistIndexRow-ratings-nqXPx { - border-top: 1px solid #eee !important; - } - /* ADD NEW ARTIST */ - .AddNewArtist-searchIconContainer-7ygSM, .Input-input-dS7Oc, .AddNewArtist-clearLookupButton-2ym1, - .ImportArtistSelectArtist-button-WUML4, .PageContentFooter-contentFooter-1t6xx { - border: none; - background-color: rgba(0, 0, 0, .25); - color: #FFF; - } - .AddNewArtistSearchResult-year-3Ziif { +} + +.IconButton-button-2qiGi { + color: #bac5cc; +} + +/* Table options*/ +.TableOptionsColumn-column-2H7ic { + background: rgba(0, 0, 0, .25); + color: #FFF; + border: none; +} + +/* Fix rating border*/ +.ArtistIndexRow-ratings-nqXPx { + border-top: 1px solid #eee !important; +} + +/* ADD NEW ARTIST */ +.AddNewArtist-searchIconContainer-7ygSM, +.Input-input-dS7Oc, +.AddNewArtist-clearLookupButton-2ym1, +.ImportArtistSelectArtist-button-WUML4, +.PageContentFooter-contentFooter-1t6xx { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF; +} + +.AddNewArtistSearchResult-year-3Ziif { color: #ccc; } - .AddNewArtistSearchResult-searchResult-fxW3m, .AddNewAlbumSearchResult-searchResult-XtaL3, .AddNewArtistSearchResult-searchResult-N5Vx4 { - background-color: transparent; - } - .AddNewArtistSearchResult-searchResult-fxW3m:hover ,.AddNewAlbumSearchResult-searchResult-XtaL3:hover, .AddNewArtistSearchResult-searchResult-N5Vx4:hover { - background-color: hsla(0,0%,100%,.08); - color: inherit; - text-decoration: none; - } - .AddNewItem-searchIconContainer-2CBFJ { +.AddNewArtistSearchResult-searchResult-fxW3m, +.AddNewAlbumSearchResult-searchResult-XtaL3, +.AddNewArtistSearchResult-searchResult-N5Vx4, +.AddNewArtistSearchResult-underlay-3aVNi, +.AddNewAlbumSearchResult-underlay-2Egnf { + background-color: transparent; +} + +.AddNewArtistSearchResult-searchResult-fxW3m:hover, +.AddNewAlbumSearchResult-searchResult-XtaL3:hover, +.AddNewArtistSearchResult-searchResult-N5Vx4:hover, +.AddNewArtistSearchResult-underlay-3aVNi:hover, +.AddNewAlbumSearchResult-underlay-2Egnf:hover { + background-color: hsla(0, 0%, 100%, .08); + color: inherit; + text-decoration: none; +} + +.AddNewItem-searchIconContainer-2CBFJ { border: none; border-right: none; background-color: rgba(255, 255, 255, 0.08); } - .ImportArtistSearchResult-artist-IVs0T:hover { - background-color: hsla(0,0%,100%,.08); - } - .Input-input-dS7Oc:focus { - outline: 0; - border-color: transparent; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0); - background-color: rgb(30, 30, 30); - } - /* IMPORT ARTIST */ - .ImportArtistSelectArtist-content-qicZY { - background-color: #1e1e1e; - color: #FFF; - border: 1px solid #00000000; - } - .ImportArtistSelectArtist-button-1zPPw { - border: 1px solid #00000000; - background-color: #1f1f1f; - } - .ImportArtistSelectArtist-searchIconContainer-3YJva { - background-color: rgba(0, 0, 0, .25); - border-color: transparent; - } - .ImportArtistSearchResult-artist-11vxQ:hover { - background-color: rgba(255, 255, 255, 0.08); - } - - .Button-default-1X0nf { - color: #FFF; - background-color: rgba(0, 0, 0, .25); - } - .AddNewArtist-noResults-L1xcp, .AddNewArtist-message-c33sh { - color: #FFF; - } - .Button-default-1X0nf:hover { - background-color: hsla(0,0%,100%,.08); - } - - - /* IMPORT */ - /* Text color */ - .ImportArtistSelectFolder-header-1AE_l, .PageContent-content-2-LcY, .FieldSet-legend-3mbvV { - color: #FFF; - } - - .TableRow-row-2tPLX { + +.ImportArtistSearchResult-artist-IVs0T:hover { + background-color: hsla(0, 0%, 100%, .08); +} + +.Input-input-dS7Oc:focus { + outline: 0; + border-color: transparent; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0); + background-color: rgb(30, 30, 30); +} + +/* IMPORT ARTIST */ +.ImportArtistSelectArtist-content-qicZY { + background-color: #1e1e1e; color: #FFF; - } - .TableRow-row-2tPLX:hover { - background-color: hsla(0,0%,100%,.08); - color: #FFF; - } - - /* ALBUM STUDIO */ - .AlbumStudioAlbum-album-mOsjl, .AlbumStudioAlbum-tracks-14O0r { - border: none; - background-color: rgba(0, 0, 0, 0.25); - color: #fff; - } - .AlbumStudioAlbum-albumType-3QdT4, .AlbumStudioAlbum-tracks-14O0r { + border: 1px solid #00000000; +} + +.ImportArtistSelectArtist-button-1zPPw { + border: 1px solid #00000000; + background-color: #1f1f1f; +} + +.ImportArtistSelectArtist-searchIconContainer-3YJva { + background-color: rgba(0, 0, 0, .25); + border-color: transparent; +} + +.ImportArtistSearchResult-artist-11vxQ:hover { + background-color: rgba(255, 255, 255, 0.08); +} + +.Button-default-1X0nf { + color: #FFF; + background-color: rgba(0, 0, 0, .25); +} + +.AddNewArtist-noResults-L1xcp, +.AddNewArtist-message-c33sh { + color: #FFF; +} + +.Button-default-1X0nf:hover { + background-color: hsla(0, 0%, 100%, .08); +} + + +/* IMPORT */ +/* Text color */ +.ImportArtistSelectFolder-header-1AE_l, +.PageContent-content-2-LcY, +.FieldSet-legend-3mbvV { + color: #FFF; +} + +.TableRow-row-2tPLX { + color: #FFF; +} + +.TableRow-row-2tPLX:hover { + background-color: hsla(0, 0%, 100%, .08); + color: #FFF; +} +.ExpandingFileDetails-fileDetails-ja8Cz { + border: 1px solid rgb(255 255 255 / .1); + background-color: rgb(255 255 255 / 8%); +} +/* ALBUM STUDIO */ +.AlbumStudioAlbum-album-mOsjl, +.AlbumStudioAlbum-tracks-14O0r { + border: none; + background-color: rgba(0, 0, 0, 0.25); + color: #fff; +} + +.AlbumStudioAlbum-albumType-3QdT4, +.AlbumStudioAlbum-tracks-14O0r { padding: 0 4px; background-color: rgba(0, 0, 0, 0.25); color: #fff; } - .AlbumStudioAlbum-missingWanted-1jEbu { - background-color: #f05050; - } - .AlbumStudioAlbum-allTracks-1KGPc { - background-color: #0b8750; - } - - /* CALENDAR */ - .CalendarDay-day-2TMXA, .CalendarDays-days-girjM { - -webkit-box-flex: 1; - -webkit-flex: 1 0 14.28%; - flex: 1 0 14.28%; - overflow: hidden; - min-height: 70px; - border-bottom: 1px solid hsla(0,0%,100%,.08); - border-left: 1px solid hsla(0,0%,100%,.08); - border-right: 1px solid hsla(0,0%,100%,.08); - } - .CalendarDay-dayOfMonth-2CzdW { - border-bottom: 1px solid hsla(0,0%,100%,.08); - background-color: rgba(0, 0, 0, .25); - } - .DayOfWeek-dayOfWeek--jS1P { - background-color: hsla(0,0%,100%,.08); - } - .CalendarDay-isToday-1rFJO { - background-color: hsla(0,0%,100%,.08) !important; - } - - /* SETTINGS */ - /* TEXT */ - .Settings-summary-1BIsi { - color: #fff; - } - /* PROFILES/INDEXERS/DL-CLIENTS/IMPORT-LIST/CONNECTIONS */ - .Card-card-SvrkG { - background-color: rgba(0, 0, 0, .25); - box-shadow: 0 0 10px 1px #000000; - color: #fff; - } - .LanguageProfileItem-languageProfileItem-18XGg { + +.AlbumStudioAlbum-missingWanted-1jEbu { + background-color: #f05050; +} + +.AlbumStudioAlbum-allTracks-1KGPc { + background-color: #0b8750; +} + +/* CALENDAR */ +.CalendarDay-day-2TMXA, +.CalendarDays-days-girjM { + -webkit-box-flex: 1; + -webkit-flex: 1 0 14.28%; + flex: 1 0 14.28%; + overflow: hidden; + min-height: 70px; + border-bottom: 1px solid hsla(0, 0%, 100%, .08); + border-left: 1px solid hsla(0, 0%, 100%, .08); + border-right: 1px solid hsla(0, 0%, 100%, .08); +} + +.CalendarDay-dayOfMonth-2CzdW { + border-bottom: 1px solid hsla(0, 0%, 100%, .08); + background-color: rgba(0, 0, 0, .25); +} + +.DayOfWeek-dayOfWeek--jS1P { + background-color: hsla(0, 0%, 100%, .08); +} + +.CalendarDay-isToday-1rFJO { + background-color: hsla(0, 0%, 100%, .08) !important; +} + +/* SETTINGS */ +/* TEXT */ +.Settings-summary-1BIsi { + color: #fff; +} + +/* MEDIA MANAGEMENT */ +/* DROPDOWNS SELECT */ +div[class*='EnhancedSelectInputOption'] { + background-color: #1e1e1e; + color: #fff; + } + div[class*='EnhancedSelectInputOption']:hover { + background-color: rgba(255, 255, 255, 0.08); + color: #fff; + } + .EnhancedSelectInput-options-3yy65 { + border: 1px solid #1e1e1e; + border-radius: 4px; + background-color: #1e1e1e; + } +/* FILE NAME TOKENS */ +.NamingOption-token-1y5bz { + background-color: rgba(255, 255, 255, 0.15); +} + +.NamingOption-option-giCGd { + border: 1px solid transparent; +} + +.NamingOption-example-RNR6x { + background-color: rgba(255, 255, 255, 0.25); +} + +.NamingOption-option-giCGd:hover .NamingOption-token-1y5bz { + background-color: rgba(255, 255, 2550, 0.25); +} + +.NamingOption-option-giCGd:hover .NamingOption-example-RNR6x { + background-color: rgba(255, 255, 2550, 0.35); +} + +/* PROFILES/INDEXERS/DL-CLIENTS/IMPORT-LIST/CONNECTIONS */ +.Card-card-SvrkG { + background-color: rgba(0, 0, 0, .25); + box-shadow: 0 0 10px 1px #000000; + color: #fff; +} + +.LanguageProfileItem-languageProfileItem-18XGg { border: none; background: rgba(0, 0, 0, 0.25); } - - .QualityProfiles-addQualityProfile-2q4Re { - background-color: rgba(0, 0, 0, .25); - border: none; - color: #c2c6c8; - } - .QualityProfiles-center-3qTb_, .LanguageProfiles-center-18sh2, - .MetadataProfiles-center-dOatB, .Indexers-center-3HUez, .Restrictions-center-3cS8T, .DownloadClients-center-30cx9, .ImportLists-center-17Qdu, .Notifications-center-13jM2 { - background-color: transparent; - border: none; - color: #c2c6c8; - } - .Indexers-center-3HUez, .Restrictions-center-3cS8T, .DownloadClients-center-30cx9, .ImportLists-center-17Qdu, .Notifications-center-13jM2 { - display: inline-block; - padding: 15px 20px 15px; - border-radius: 4px; - } - /* CONNECTIONS */ - .Label-danger-1rVtt.Label-outline-2ZP8n { - color: #FFF; - background-color: #f05050; - } - /* EDIT QUALITY PROFILES */ - .QualityProfileItem-qualityProfileItem-VFp-W, .QualityProfileItemGroup-qualityProfileItemGroup-2U1l5 { - border: none; - background-color: rgba(0, 0, 0, .25); - color: #FFF; - } - .QualityProfileItemGroup-qualityProfileItemGroup-2U1l5.QualityProfileItemGroup-editGroups-2KzDp { - background: rgba(0, 0, 0, 0.25); - } \ No newline at end of file + +.QualityProfiles-addQualityProfile-2q4Re { + background-color: rgba(0, 0, 0, .25); + border: none; + color: #c2c6c8; +} + +.QualityProfiles-center-3qTb_, +.LanguageProfiles-center-18sh2, +.MetadataProfiles-center-dOatB, +.Indexers-center-3HUez, +.Restrictions-center-3cS8T, +.DownloadClients-center-30cx9, +.ImportLists-center-17Qdu, +.Notifications-center-13jM2, +.RootFolders-center-XcFPy { + background-color: transparent; + border: none; + color: #c2c6c8; +} + +.Indexers-center-3HUez, +.Restrictions-center-3cS8T, +.DownloadClients-center-30cx9, +.ImportLists-center-17Qdu, +.Notifications-center-13jM2 { + display: inline-block; + padding: 15px 20px 15px; + border-radius: 4px; +} + +/* CONNECTIONS */ +.Label-danger-1rVtt.Label-outline-2ZP8n { + color: #FFF; + background-color: #f05050; +} + +/* EDIT QUALITY PROFILES */ +.QualityProfileItem-qualityProfileItem-VFp-W, +.QualityProfileItemGroup-qualityProfileItemGroup-2U1l5 { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF; +} + +.QualityProfileItemGroup-qualityProfileItemGroup-2U1l5.QualityProfileItemGroup-editGroups-2KzDp { + background: rgba(0, 0, 0, 0.25); +} \ No newline at end of file diff --git a/CSS/themes/lidarr/organizr-dark.css b/CSS/themes/lidarr/organizr-dark.css new file mode 100644 index 00000000..7f76b195 --- /dev/null +++ b/CSS/themes/lidarr/organizr-dark.css @@ -0,0 +1,31 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* LIDARR ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/lidarr/lidarr-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --calendar-Downloading: #7a43b6; + --calendar-Downloaded: #53e69d; + --calendar-Unreleased: #2cabe3; + --calendar-Partial: orange; + --calendar-Unmonitored: #adadad; + --calendar-Missing: #ff7676; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + } \ No newline at end of file diff --git a/CSS/themes/logarr/organizr-dark.css b/CSS/themes/logarr/organizr-dark.css new file mode 100644 index 00000000..4f400b54 --- /dev/null +++ b/CSS/themes/logarr/organizr-dark.css @@ -0,0 +1,21 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* LOGARR ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/logarr/logarr-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + } \ No newline at end of file diff --git a/CSS/themes/monitorr/organizr-dark.css b/CSS/themes/monitorr/organizr-dark.css new file mode 100644 index 00000000..ef0a7f15 --- /dev/null +++ b/CSS/themes/monitorr/organizr-dark.css @@ -0,0 +1,21 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* MONITORR ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/monitorr/monitorr-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + } \ No newline at end of file diff --git a/CSS/themes/netdata/organizr-dark.css b/CSS/themes/netdata/organizr-dark.css new file mode 100644 index 00000000..54ed2ff9 --- /dev/null +++ b/CSS/themes/netdata/organizr-dark.css @@ -0,0 +1,20 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* NETDATA ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/netdata/netdata-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --accent-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/nzbget/nzbget-base.css b/CSS/themes/nzbget/nzbget-base.css index 5690fcd6..90ffc85d 100644 --- a/CSS/themes/nzbget/nzbget-base.css +++ b/CSS/themes/nzbget/nzbget-base.css @@ -48,7 +48,7 @@ body { -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; - background-color: rgba(0,0,0,.0) !important; + background-color: var(--modal-bg-color) !important; color:#FFFFFF !important; } .modal-footer { diff --git a/CSS/themes/nzbget/organizr-dark.css b/CSS/themes/nzbget/organizr-dark.css new file mode 100644 index 00000000..e7731b73 --- /dev/null +++ b/CSS/themes/nzbget/organizr-dark.css @@ -0,0 +1,21 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* NZBGET ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/nzbget/nzbget-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --accent-color: #2cabe3; + --button-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/aquamarine.css b/CSS/themes/nzbhydra2/aquamarine.css index ec73626a..594de60d 100644 --- a/CSS/themes/nzbhydra2/aquamarine.css +++ b/CSS/themes/nzbhydra2/aquamarine.css @@ -18,4 +18,5 @@ --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --default-button-color: #009688; --default-button-color-hover: radial-gradient(ellipse at center, #5066e0 0%, #01ccb9 100%) center center/cover no-repeat fixed; + --accent-color: #118074; } diff --git a/CSS/themes/nzbhydra2/dark.css b/CSS/themes/nzbhydra2/dark.css index 262b57ae..eb487c75 100644 --- a/CSS/themes/nzbhydra2/dark.css +++ b/CSS/themes/nzbhydra2/dark.css @@ -18,4 +18,5 @@ --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --default-button-color: #cc7b19; --default-button-color-hover: #e59029; + --accent-color: #cc7b19; } \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/hotline.css b/CSS/themes/nzbhydra2/hotline.css index deeb95bd..9fd3ce54 100644 --- a/CSS/themes/nzbhydra2/hotline.css +++ b/CSS/themes/nzbhydra2/hotline.css @@ -18,4 +18,5 @@ --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --default-button-color: radial-gradient(ellipse at center, #F44336 0%, #3F51B5 100%) center center/cover no-repeat fixed; --default-button-color-hover: radial-gradient(ellipse at center, #fb6054 0%, #5269e6 100%) center center/cover no-repeat fixed; + --accent-color: var(--default-button-color); } \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/nzbhydra-base.css b/CSS/themes/nzbhydra2/nzbhydra-base.css index 4f818987..42b0acdf 100644 --- a/CSS/themes/nzbhydra2/nzbhydra-base.css +++ b/CSS/themes/nzbhydra2/nzbhydra-base.css @@ -29,10 +29,10 @@ background-color: rgba(255, 255, 255, 0.08); } .growl-container>.alert-info.icon { - background: var(--modal-bg-color); + background: var(--accent-color); } .alert-info { - background: var(--modal-bg-color); + background: var(--accent-color); border-color: transparent; color: #fff; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); diff --git a/CSS/themes/nzbhydra2/organizr-dark.css b/CSS/themes/nzbhydra2/organizr-dark.css new file mode 100644 index 00000000..97d9daad --- /dev/null +++ b/CSS/themes/nzbhydra2/organizr-dark.css @@ -0,0 +1,22 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* NZBHYDRA2 ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/nzbhydra-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --default-button-color: #2cabe3; + --default-button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/plex.css b/CSS/themes/nzbhydra2/plex.css index 68dda5a6..d1e09e07 100644 --- a/CSS/themes/nzbhydra2/plex.css +++ b/CSS/themes/nzbhydra2/plex.css @@ -17,5 +17,6 @@ --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; + --default-button-color-hover: #e59029; + --accent-color: #cc7b19; } \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/space-gray.css b/CSS/themes/nzbhydra2/space-gray.css index 9ee6861a..63913f5b 100644 --- a/CSS/themes/nzbhydra2/space-gray.css +++ b/CSS/themes/nzbhydra2/space-gray.css @@ -18,4 +18,5 @@ --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --default-button-color: #607D8B; --default-button-color-hover: #81a6b7; + --accent-color: #7598a9; } diff --git a/CSS/themes/ombi/ombi-base.css b/CSS/themes/ombi/ombi-base.css index a878513d..b14a415c 100644 --- a/CSS/themes/ombi/ombi-base.css +++ b/CSS/themes/ombi/ombi-base.css @@ -115,6 +115,11 @@ background-color:var(--modal-bg-color) !important; .search-bar-background[_ngcontent-c2] { background-color: transparent; } +@media (min-width: 979px) { +.form-control-search[_ngcontent-c2] { + width: 100%; +} +} .form-control-custom { background-color: rgba(0, 0, 0, 0.25) !important; border-radius: 0px; @@ -440,3 +445,172 @@ a>h4 { -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; } + + + +/* OMBI V4*/ + + + body { + background: var(--main-bg-color); + } + a { + color: var(--accent-color); + } + a:hover { + color: var(--accent-color-hover); + } + + .mat-drawer-container, .dark .mat-drawer-container { + background: var(--main-bg-color); + color: var(--text); + } + + + /* HEADER */ + + .mat-toolbar.mat-primary, .dark .mat-toolbar.mat-primary { + background: rgba(0, 0, 0, .25); + color: var(--text); + } + .dark .mat-toolbar, .mat-toolbar,.mat-list-base .mat-list-item, .mat-list-base .mat-list-option { + color: var(--text); + } + + /* SEARCH */ + .dark .mat-autocomplete-panel, .mat-autocomplete-panel { + background: var(--modal-bg-color); + color: var(--text); + } + + + + /* SIDEBAR */ + .dark .mat-drawer, .dark .mat-drawer.mat-drawer-push, .mat-drawer, .mat-drawer.mat-drawer-push { + background-color: rgba(0, 0, 0, .25); + color: var(--text) + } + .dark .mat-drawer-side { + border-right: 1px solid transparent; + } + .dark .active-list-item, .active-list-item, .active-list-item { + background: var(--accent-color) !important; + background-color: var(--accent-color) !important; + color: var(--text)!important; + font-weight: 500; + } + + /* CARDS */ + .mat-card, .dark .mat-card { + background: rgb(0 0 0 / 25%); + color: var(--text); + } + .grow:hover { + transform: scale(1.1); + color: var(--text-hover) + } + .notrequested { + border-bottom: 3px solid var(--accent-color) !important; + } + + /* BUTTONS */ + .mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, + .dark .mat-fab.mat-accent, .dark .mat-flat-button.mat-accent, .dark .mat-mini-fab.mat-accent, .dark .mat-raised-button.mat-accent { + background-color: var(--button-color); + color: var(--text) + } + + .dark .mat-fab.mat-primary, .dark .mat-flat-button.mat-primary, .dark .mat-mini-fab.mat-primary, .dark .mat-raised-button.mat-primary, + .mat-fab.mat-primary, .mat-flat-button.mat-primary, .mat-mini-fab.mat-primary, .mat-raised-button.mat-primary { + background: rgba(255, 255, 255, .1); + } + + .btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover { + z-index: 1; + background: var(--button-color-hover) !important; + } + .btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) { + margin-left: 0px; + } + .mat-raised-button:not([class*=mat-elevation-z]), .dark .mat-raised-button:not([class*=mat-elevation-z]) { + box-shadow: none; + } + button:focus { + outline: 1px dotted; + outline: none; + } + /* MODAL */ + .dark .mat-dialog-container,.mat-dialog-container { + background: var(--modal-bg-color); + color: var(--text); + } + + div.dark .details, .details { + background: transparent !important; + } + + + /* SETTINGS */ + /* Table */ + .mat-table, .dark .mat-table { + background: #0000002e; + color: var(--text) + } + .mat-cell, .mat-footer-cell,.dark .mat-cell, .dark .mat-footer-cell { + color: var(--text) + } + /* Drop down menu*/ + .dark .mat-menu-panel,.mat-menu-panel { + background: var(--modal-bg-color); + } + + /* MOVEI TV PAGE*/ + + .dark .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent, .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent { + background-color: var(--accent-color); + color: var(--text); + } + .mat-expansion-panel, .dark .mat-expansion-panel { + background: rgb(0 0 0 / 25%); + color: var(--text) !important; + } + .mat-expansion-panel-header-title { + color: var(--text); + } + #info-wrapper .sidebar .poster { + border: 3px solid rgb(255 255 255 / 10%); + box-shadow: none; + } + .ui-carousel-next, body .ui-carousel .ui-carousel-content .ui-carousel-prev { + background-color: var(--accent-color); + border: 1px solid var(--accent-color); + border-radius: 50%; + margin: .2em; + color: #fff; + transition: color .2s; + } + body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon { + background-color: var(--accent-color); + } + #summary-wrapper .grey-text { + color: var(--text); + } + #info-wrapper .media-icons { + color: var(--text)!important; + } + #info-wrapper .media-icons:hover { + color: var(--text-hover)!important; + } + #info-wrapper .grow-social:hover { + color: var(--text-hover)!important; + } + + #info-wrapper .dark .mat-fab, .dark .mat-flat-button, .dark .mat-mini-fab, .dark .mat-raised-button,#info-wrapper .mat-fab, .mat-flat-button, .mat-mini-fab, .mat-raised-button { + color: #fff; + background-color: var(--button-color); + } + #info-wrapper .dark .mat-mini-fab:hover, #info-wrapper .mat-raised-button:hover { + color: #fff; + background-color: var(--button-color-hover); + } + \ No newline at end of file diff --git a/CSS/themes/ombi/ombiv4-base.css b/CSS/themes/ombi/ombiv4-base.css new file mode 100644 index 00000000..90c72313 --- /dev/null +++ b/CSS/themes/ombi/ombiv4-base.css @@ -0,0 +1,243 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + + +body { + background: var(--main-bg-color); +} +a,b { + color: var(--accent-color); +} +a:hover, b:hover { + color: var(--accent-color-hover); +} + +.mat-drawer-container, .dark .mat-drawer-container { + background: var(--main-bg-color); + color: var(--text); +} + + +/* HEADER */ + +.mat-toolbar.mat-primary, .dark .mat-toolbar.mat-primary { + background: rgba(0, 0, 0, .25); + color: var(--text); +} +.dark .mat-toolbar, .mat-toolbar,.mat-list-base .mat-list-item, .mat-list-base .mat-list-option { + color: var(--text); +} + + /* SEARCH */ + .dark .mat-autocomplete-panel, .mat-autocomplete-panel { + background: var(--modal-bg-color); + color: var(--text); + } + + +/* SIDEBAR */ +.dark .mat-drawer, .dark .mat-drawer.mat-drawer-push, .mat-drawer, .mat-drawer.mat-drawer-push { + background-color: rgba(0, 0, 0, .25); + color: var(--text) +} +.dark .mat-drawer-side { + border-right: 1px solid transparent; +} +.dark .active-list-item, .active-list-item, .active-list-item { + background: var(--accent-color) !important; + background-color: var(--accent-color) !important; + color: var(--text)!important; + font-weight: 500; +} + +/* CARDS */ +.mat-card, .dark .mat-card { + background: rgb(0 0 0 / 25%); + color: var(--text); +} +.grow:hover { + transform: scale(1.1); + color: var(--text-hover) +} +.notrequested { + border-bottom: 3px solid var(--accent-color) !important; +} + +/* BUTTONS */ +.mat-fab.mat-accent, .mat-flat-button.mat-accent, .mat-mini-fab.mat-accent, .mat-raised-button.mat-accent, +.dark .mat-fab.mat-accent, .dark .mat-flat-button.mat-accent, .dark .mat-mini-fab.mat-accent, .dark .mat-raised-button.mat-accent { + background-color: var(--button-color); + color: var(--text) +} +.mat-raised-button:hover , .dark .mat-raised-button:hover { + background-color: var(--button-color-hover); + color: var(--text) +} + +.dark .mat-fab.mat-primary, .dark .mat-flat-button.mat-primary, .dark .mat-mini-fab.mat-primary, .dark .mat-raised-button.mat-primary, +.mat-fab.mat-primary, .mat-flat-button.mat-primary, .mat-mini-fab.mat-primary, .mat-raised-button.mat-primary { + background: rgba(255, 255, 255, .1); +} + +.btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover { + z-index: 1; + background: var(--button-color-hover) !important; +} +.btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) { + margin-left: 0px; +} +.mat-raised-button:not([class*=mat-elevation-z]), .dark .mat-raised-button:not([class*=mat-elevation-z]) { + box-shadow: none; +} +button:focus { + outline: 1px dotted; + outline: none; +} + +.dark .mat-slide-toggle.mat-checked .mat-slide-toggle-bar, .mat-slide-toggle.mat-checked .mat-slide-toggle-bar { + background-color: var(--accent-color); +} +.dark .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb, .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { + background-color: var(--accent-color); +} +/* MODAL */ +.dark .mat-dialog-container,.mat-dialog-container { + background: var(--modal-bg-color); + color: var(--text); +} + +div.dark .details, .details { + background: transparent !important; +} + +.dark .mat-dialog-container .dark .mat-raised-button.mat-primary,.mat-dialog-container .mat-raised-button.mat-primary { + background: var(--button-color); +} +.dark .mat-dialog-container .dark .mat-raised-button.mat-primary:hover,.mat-dialog-container .mat-raised-button.mat-primary:hover { + background: var(--button-color-hover); +} +.dark .mat-dialog-container .media-icons, .mat-dialog-container .media-icons { + color: var(--text) !important; +} +.mat-slide-toggle-bar, .dark .mat-slide-toggle-bar { + background-color: rgba(0,0,0,.38); +} +.mat-slide-toggle-thumb, .dark .mat-slide-toggle-thumb { + background-color: #fafafa; +} + +/* SETTINGS */ + /* Table */ + .mat-table, .dark .mat-table { + background: #0000002e; + color: var(--text) + } + .mat-cell, .mat-footer-cell,.dark .mat-cell, .dark .mat-footer-cell { + color: var(--text) + } + /* Drop down menu*/ + .dark .mat-menu-panel,.mat-menu-panel { + background: var(--modal-bg-color); + } +.dark .mat-select-panel { + background: var(--modal-bg-color); +} +.mat-tab-label, .mat-tab-link, .dark .mat-tab-label, .dark .mat-tab-link { + color: var(--text); +} +.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar, .dark .mat-tab-group.mat-primary .mat-ink-bar, .dark .mat-tab-nav-bar.mat-primary .mat-ink-bar { + background-color: var(--accent-color); +} +.dark .mat-tab-header, .dark .mat-tab-nav-bar, .mat-tab-header, .mat-tab-nav-bar { + border-bottom: 1px solid hsla(0,0%,100%,.12); +} +.mat-form-field-appearance-outline .mat-form-field-outline-thick { + color: hsla(0,0%,100%,.12); +} +.dark .mat-form-field-appearance-outline .mat-form-field-outline, .mat-form-field-appearance-outline .mat-form-field-outline { + color: hsla(0,0%,100%,.3); +} +.dark .mat-form-field-label, .dark .mat-hint, .mat-form-field-label, .mat-hint { + color: hsla(0,0%,100%,.7); +} + +.dark .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick { + color: hsla(0,0%,100%,.7); +} +.dark .mat-input-element { + caret-color: var(--text); +} +/* MOVEI TV PAGE*/ + +.dark .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent, .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent { + background-color: var(--accent-color); + color: var(--text); +} +.mat-expansion-panel, .dark .mat-expansion-panel { + background: rgb(0 0 0 / 25%); + color: var(--text) !important; +} +.mat-expansion-panel-header-title { + color: var(--text); +} +#info-wrapper .sidebar .poster { + border: 3px solid rgb(255 255 255 / 10%); + box-shadow: none; +} +.ui-carousel-next, body .ui-carousel .ui-carousel-content .ui-carousel-prev { + background-color: var(--accent-color); + border: 1px solid var(--accent-color); + border-radius: 50%; + margin: .2em; + color: #fff; + transition: color .2s; +} +.ui-carousel-next:hover, body .ui-carousel .ui-carousel-content .ui-carousel-prev:hover { + background: var(--button-color-hover); +} +body .ui-carousel .ui-carousel-dots-container .ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon { + background-color: var(--accent-color); +} +#summary-wrapper .grey-text { + color: var(--text); +} +#info-wrapper .media-icons { + color: var(--text)!important; +} +#info-wrapper .media-icons:hover { + color: var(--text-hover)!important; +} +#info-wrapper .grow-social:hover { + color: var(--text-hover)!important; +} + +#info-wrapper .dark .mat-fab, .dark .mat-flat-button, .dark .mat-mini-fab, .dark .mat-raised-button,#info-wrapper .mat-fab, .mat-flat-button, .mat-mini-fab, .mat-raised-button { + color: #fff; + background-color: var(--button-color); +} +#info-wrapper .dark .mat-mini-fab:hover, #info-wrapper .mat-raised-button:hover { + color: #fff; + background-color: var(--button-color-hover); +} + +/*LOGIN PAGE */ + +.dark .mat-elevation-z8, .mat-elevation-z8 { + box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} +.dark .mat-checkbox-checked.mat-accent .mat-checkbox-background,.dark .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background { + background-color: var(--accent-color) +} + diff --git a/CSS/themes/ombi/organizr-dark.css b/CSS/themes/ombi/organizr-dark.css new file mode 100644 index 00000000..9b414e1f --- /dev/null +++ b/CSS/themes/ombi/organizr-dark.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* OMBI ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/ombi/ombi-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --request-button: #2cabe3; + --request-button-hover: rgb(44 171 227 / .8); + --loading-bar: #2cabe3; + --accent-color: #2cabe3; + --label-color: #2cabe3; +} diff --git a/CSS/themes/organizr/organizr-base.css b/CSS/themes/organizr/organizr-base.css index 2efb5fdb..80059e6e 100644 --- a/CSS/themes/organizr/organizr-base.css +++ b/CSS/themes/organizr/organizr-base.css @@ -45,11 +45,19 @@ html { } /* Header */ .navbar-header { - background: var(--main-bg-color) !important; + background: transparent !important; } + @media (max-width: 480px) { + .navbar-header { + background: var(--main-bg-color) !important; + } + } .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { background: transparent; } + .navbar-default { + background-color: transparent; + } .dropdown-menu { background: var(--modal-bg-color); } @@ -166,6 +174,17 @@ html { .panel .table { background: var(--main-bg-color) !important; } + /* User Management */ + #settings-user-manage-users tr.jsgrid-header-row th { + background: rgba(0, 0, 0, .0); + } + + #settings-user-manage-users .jsgrid-grid-body td { + background: rgba(0, 0, 0, .0) !important; + } + #settings-user-manage-users .jsgrid-selected-row td { + background: rgba(0, 0, 0, .15) !important + } /* iframe sandbox */ .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #ffffff; @@ -241,6 +260,13 @@ html { .table-hover>tbody>tr:hover { background: rgba(0,0,0,.15)!important; } + #tabEditorTable .btn-info.btn-outline { + color: var(--custom-buttons-color); +} +#tabEditorTable .btn-info.btn-outline:hover,#tabEditorTable .btn-info.btn-outline:focus { + color: white; + background: var(--custom-buttons-color); +} /* Settings - popup modal */ .white-popup .panel-heading, .white-popup>.col-md-6>.white-box:first-child { background: var(--main-bg-color)!important; @@ -446,6 +472,64 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { margin: 0 12.5px; transition: color .2s ease; } + #homepageOrderdeluge .mailbox-widget .customtab li.active a, + #homepageOrderqBittorrent .mailbox-widget .customtab li.active a, + #homepageOrderrTorrent .mailbox-widget .customtab li.active a, + #homepageOrdertransmission .mailbox-widget .customtab li.active a{ + height: auto; + padding: 5px 5px 0px 5px; + cursor: pointer; + font-weight: 400; + } + + #homepageOrderdeluge .ti-download:before, + #homepageOrderqBittorrent .ti-download:before, + #homepageOrderrTorrent .ti-download:before, + #homepageOrdertransmission .ti-download:before{ + display:none; + } + #homepageOrderdeluge .white-box, + #homepageOrderqBittorrent .white-box, + #homepageOrderrTorrent .white-box, + #homepageOrdertransmission .white-box { + padding-right: 0px !important; + } + #homepage-items .white-box { + padding-left: 0px !important; + } + #homepage-items .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover { + cursor: pointer; + opacity: 1; + background: rgba(0, 0, 0, 0.25) !important; + } + #homepageOrderdownloader .nav-tabs>li.active>a, .nav-tabs>li.active .nav>li>a, + #homepageOrderdownloader .nav-tabs>li>a, .nav-tabs>li .nav>li>a{ + padding: 10px 12.5px; + } + #homepageOrderdownloader .nav-tabs>li.active>a, .nav-tabs>li.active .nav>li>a .customtab, + #homepageOrderdownloader .nav-tabs { + padding: 10px 12.5px; + } + #homepageOrderdownloader ul.nav.customtab.nav-tabs.m-t-5.nav-tabs>li.active>a,#homepageOrderdownloader ul.nav.customtab.nav-tabs.m-t-5.nav-tabs>li>a { + padding: 10px 11.5px !important; + } + #homepageOrderdownloader .nav-tabs>li.active>a:hover, #homepageOrderdownloader .nav-tabs>li.active:hover { + background: rgba(0, 0, 0, 0.25) !important; + opacity: 1; + } + #homepageOrderdownloader .downloaderCount { + margin-top: -20px !important; + } + #homepageOrderdownloader .mailbox-widget .customtab li a { + padding: 20px 15px 5px 15px; + } + #homepageOrderdownloader .customtab li a { + padding: 20px 15px 5px 15px !important; + } + + #homepageOrderdownloader .mailbox-widget .customtab li a:hover { + opacity: 1; + } /* Homepage calendar buttons */ .fc-next-button, .fc-prev-button { background: 0 0!important; @@ -582,15 +666,18 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { .progress-bar-inverse, .progress { background: rgba(0, 0, 0, 0.25) !important; } + /* Homepage health checks */ -.bg-inverse .healthPosition { - background: rgba(255, 255, 255, 0.2) !important; - -webkit-backdrop-filter: saturate(180%) blur(30px); - backdrop-filter: saturate(180%) blur(30px); - border-radius: 3px; + .bg-inverse .healthPosition { + background: rgba(255, 255, 255, 0.2) !important; + -webkit-backdrop-filter: saturate(180%) blur(30px); + backdrop-filter: saturate(180%) blur(30px); + border-radius: 3px; } + #homepageOrderhealthchecks .card-body { + background: rgba(255, 255, 255, 0.2); + } .card, .card-body { - background: rgba(255, 255, 255, 0.2) !important; border-radius: 3px; } .bg-inverse { @@ -600,16 +687,81 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { border-radius: 3px 0 0 3px; } + /* Homepage Tautulli Cards*/ + #homepageOrdertautulli .library-card .card-body, #homepageOrdertautulli div:nth-child(8) .card-body { + background: rgba(255, 255, 255, .2); + } + .homepage-tautulli-card .cardCountType { + color: #eee; + } + .homepage-tautulli-card .tautulliRank, .homepage-tautulli-card .tautulliSeparator { + color: #eee; + } + .homepage-tautulli-card .bg-img-cont { + border-radius: 3px; + border: .0001px solid #00000000; + } + /* Homepage Unifi cards */ .unifiCards .panel-heading { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; border-color: transparent !important; text-align: inherit !important; + border-radius: 3px 3px 0 0 !important; } .unifiCards .panel-wrapper.collapse.in { background:rgba(0, 0, 0, 0.15); } + + /* Homepage Monitor Cards */ + #homepageOrderMonitorr .card-body { + background: rgba(255, 255, 255, 0.2); + } + #homepageOrderMonitorr .col-lg-2 { + width: 170px; + } + #homepageOrderMonitorr .badge { + border-radius: 3px; + } + #homepageOrderMonitorr .bg-success { + background-color: #47bb62 !important; + } + #homepageOrderMonitorr .col-lg-3 .bg-success { + background-color: #53e69d !important; + } + + /*Homepage WeatherAndAir Cards*/ + #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a { + background: rgba(0, 0, 0, .2); + } + .health-and-pollutant-section .content-current { + background: rgba(255, 255, 255, .2); + } + #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a::after { + border-top-color: var(--link-color); + } + #homepageOrderWeatherAndAir .text-info { + color: var(--link-color); + } + #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li a { + color: #ddd; + } + #homepageOrderWeatherAndAir .white-box { + background: rgba(255, 255, 255, .1); + border-radius: 3px; + } + /*Homepage Speedtest Cards*/ + #allSpeedtest .speedtest-card { + background-color: rgba(255, 255, 255, .1); + } + #allSpeedtest .speedtest-card .text-muted, #allSpeedtest .speedtest-card h5 { + color: #d6d6d6 !important; + } + #allSpeedtest .shadow-sm { + -webkit-box-shadow: none !important; + box-shadow: none !important; + } /* loginpage sidemenu */ @media (max-width: 480px) { .login-register > .login-box > .white-box { @@ -731,9 +883,6 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { #splashScreen .flexbox:first-of-type { width: calc(100% - 40px); margin: auto; -} -#splashScreen .flexbox { - margin: 0; } @media (max-width: 375px) { #splashScreen div[id^=menu-] { @@ -756,42 +905,53 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { #splashScreen div[id^=menu-] { background: transparent; border-radius: 3px; - max-width: 100px; - height: 155px; + max-width: 115px; margin: 24px 20px 0 0!important; - padding: 0; + padding: 25px; } #splashScreen .bg-org.fc-event { background-color: transparent !important; border-radius: 1000px; height: 80px!important; - width: 80px!important; - margin: 25px auto 0; - padding: 0; + width: 80px !important; + background-position: center; } #splashScreen .homepage-text { - width: 120px; - background: transparent; - color: #FFF; - font-size: 14px; - text-align: center; - margin: 0; - position: absolute; - padding: 5px; - bottom: -50px; - left: -20px; + display: none; } #splashScreen .flexbox:last-of-type .bg-danger { - background: rgba(255,255,255,.25) !important; + background: transparent !important; color: #fff!important; border: 0!important; - height: auto; - padding: 12px; border-radius: 100px; - height: 80px!important; - width: 80px!important; + height: 0px!important; + text-align: center; + +} +#splashScreen .bottom-close-splash { + position: relative !important; + width: 0px ; + right: 0px ; + bottom: 0px ; +} + +#splashScreen .flexbox:last-of-type .bg-danger:before { + font-family: "FontAwesome"; + font-size: 40px; + content: "\f00d"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + -webkit-transform: scale(1.1) !important; + transform: scale(1.1) !important; + -webkit-animation-name: none; + animation-name: none; + text-align: center; + padding-top: inherit; + } #splashScreen .flexbox:last-of-type { padding: 0!important; @@ -819,11 +979,9 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { transition-property: transform; -webkit-transform-origin: center; transform-origin: center; - height: 130px; } .splash-badge { color: #fff; - background: #cc7b19; width: 80px!important; height: 80px; font-size: 60px; @@ -831,7 +989,10 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { } .splash-badge i { position: absolute; - left: 15px; + left: 10px; + top: 10px; + margin: 0px; + padding: 0px; } .splash-badge i.fa-home:before { position: absolute !important; @@ -858,3 +1019,25 @@ table.dataTable>tbody>tr:nth-of-type(even):hover { background: var(--link-color) !important; } +/* Email Center*/ + +.ms-container .ms-selectable, .ms-container .ms-selection { + background: rgba(0, 0, 0, 0.25); +} +.ms-container .ms-list { + border: 1px solid rgba(255, 255, 255, 0.2); +} +.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection { + border-bottom: 1px rgba(238, 238, 238, .2) solid; +} + +.ms-container .ms-selectable li.ms-hover, +.ms-container .ms-selection li.ms-hover { + background: rgba(255, 255, 255, .08) +} +.ms-container .ms-list.ms-focus{ + border-color: rgba(255, 255, 255, .5); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, .6); +} \ No newline at end of file diff --git a/CSS/themes/organizr/plex.css b/CSS/themes/organizr/plex.css new file mode 100644 index 00000000..f806f15e --- /dev/null +++ b/CSS/themes/organizr/plex.css @@ -0,0 +1,32 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* ORGANIZR PLEX THEME */ +@import 'Organizr.css'; +@import url(https://gilbn.github.io/theme.park/CSS/themes/organizr/organizr-base.css); + +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: #191a1c; + --link-color: #e5a00d; + --custom-buttons-color: #e5a00d; + --hompage-item-hover: radial-gradient(farthest-corner at 50% 50%,rgba(50,50,50,.1) 50%,#1f292d 100%); + --notification-box-line: #e5a00d; + + --calendar-tv-premier: #FFEB3B; + --calendar-tv-missing: #ff7676; + --calendar-tv-available: #53e69d; + --calendar-tv-unreleased: #eeeeee; + --calendar-movie-missing: #ff7676; + --calendar-movie-available: #53e69d; + --calendar-movie-unreleased: #eeeeee; + } \ No newline at end of file diff --git a/CSS/themes/pihole/aquamarine.css b/CSS/themes/pihole/aquamarine.css new file mode 100644 index 00000000..3af80fad --- /dev/null +++ b/CSS/themes/pihole/aquamarine.css @@ -0,0 +1,24 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PI-HOLE AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/pihole/pihole-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; + --accent-color-hover: #12afa0; + --link-color: #12afa0; +} \ No newline at end of file diff --git a/CSS/themes/pihole/dark.css b/CSS/themes/pihole/dark.css new file mode 100644 index 00000000..044e1c9b --- /dev/null +++ b/CSS/themes/pihole/dark.css @@ -0,0 +1,24 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PI-HOLE DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/pihole/pihole-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.5); + --accent-color-hover: rgba(255, 255, 255, 0.45); + --queue-color: rgba(255, 255, 255, 0.45);; + } \ No newline at end of file diff --git a/CSS/themes/pihole/hotline.css b/CSS/themes/pihole/hotline.css new file mode 100644 index 00000000..aeeb2cab --- /dev/null +++ b/CSS/themes/pihole/hotline.css @@ -0,0 +1,24 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PI-HOLE HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/pihole/pihole-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --link-color: #fd534a; +} \ No newline at end of file diff --git a/CSS/themes/pihole/organizr-dark.css b/CSS/themes/pihole/organizr-dark.css new file mode 100644 index 00000000..9b461fe6 --- /dev/null +++ b/CSS/themes/pihole/organizr-dark.css @@ -0,0 +1,23 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PI-HOLE ORGANIZR-DARK THEME */ +@import url(https://gflix.app/theme.park/CSS/themes/pihole/pihole-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + } \ No newline at end of file diff --git a/CSS/themes/pihole/pihole-base.css b/CSS/themes/pihole/pihole-base.css new file mode 100644 index 00000000..8a62848e --- /dev/null +++ b/CSS/themes/pihole/pihole-base.css @@ -0,0 +1,373 @@ + /* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +body { + background: var(--main-bg-color) !important; + color: #eee !important; +} +a { + color: var(--link-color); + } +a:hover, a:active, a:focus, +.treeview-menu > li.active > a, .treeview-menu > li > a:hover { + color: var(--accent-color) !important; + } + h4 { + color: var(--accent-color); + } +/* Donate dropdown */ + .skin-blue .main-header li.user-header { + background: var(--modal-bg-color); + } + .dropdown-menu { + box-shadow: none; + border-color: rgba(0, 0, 0, .25); + background: var(--modal-bg-color) + } + .navbar-nav>.user-menu>.dropdown-menu>.user-body { + 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; + } + .navbar-nav>.user-menu>.dropdown-menu>.user-body a { + color: white !important; + } + .navbar-nav>.user-menu>.dropdown-menu>.user-footer { + background-color: transparent; + } +/* Header */ + .skin-blue .main-header .navbar, .skin-blue .main-header .logo, + .main-header .navbar,.main-header .logo { + background-color: rgba(0, 0, 0, .25); + } + .skin-blue .main-header .logo:hover, .skin-blue .main-header .navbar .sidebar-toggle:hover, + .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { + background-color: rgba(255, 255, 255, .05); + color: white !important; + } + /* Footer */ + .main-footer { + background: rgba(0, 0, 0, .25); + color: #eee; + border-top: 1px solid rgb(255 255 255 / 20%); + } +/* Side bar */ + .skin-blue .sidebar a { + color: #eee; + } + .skin-blue .sidebar a:hover { + color: white !important; + } + .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side, + .wrapper, .main-sidebar, .left-side { + background-color: rgba(0, 0, 0, .25) !important; + } + .skin-blue .sidebar-menu>li.header, + .sidebar-menu > li.header { + color: white; + background: rgba(0, 0, 0, .2); + } + .treeview-menu > li > a { + color: #eee !important; + } + .sidebar-menu > li > .treeview-menu { + background-color: rgb(0 0 0 / 25%); + } + /* Menus */ + .skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, + .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { + color: #fff; + background: rgba(0, 0, 0, .1); + border-left-color: var(--accent-color); + } + .skin-blue .sidebar-menu>li>.treeview-menu { + background: rgba(0, 0, 0, .25); + } + .skin-blue .treeview-menu>li>a { + color: #eee; + } + /* Collapsed menu hover*/ + @media (min-width: 768px) { + .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu { + background: var(--main-bg-color); + color: #eee; + } + } +/* Pages */ + /*Background*/ + .content-wrapper, .right-side { + background-color: var(--main-bg-color); + } + .page-header>small { + color: #ddd; + } + .main-footer .nav-tabs, .nav-tabs-custom .nav-tabs { + background-color: rgb(0 0 0 / 0.25); + border-bottom-color: rgb(255 255 255 / 15%); + } + .nav-tabs-custom>.nav-tabs>li:hover { + background-color: rgba(255, 255, 255, .05); + color: #eee; + border-top-color: var(--accent-color); + } + .nav-tabs-custom > .nav-tabs > li:hover > a { + background-color: rgba(255, 255, 255, .05); + } + /* Dashboard */ + /*Total Queries box */ + .box-header { + color: white; + } + .box { + background: rgba(0, 0, 0, .24); + border-top: 3px solid #0000; + box-shadow: 0 1px 1px rgba(0,0,0,0.1); + } + .box-solid > .box-header, .box > .box-header { + color: #eee; + background-color: rgba(0, 0, 0, .25); + } + .box.box-warning { + border-top-color: var(--accent-color); + } + /* + .chart svg, .chart canvas, .chartjs-render-monitor, .chart-legend { + -webkit-filter: invert(100%); + filter: invert(100%); + } + #chartjs-tooltip { + filter: invert(100%); + } + .chart-legend ul { + -webkit-filter: invert(100%); + filter: invert(100%); + } + */ + /* Total queries box*/ + .small-box.bg-green { + background-color: rgba(0, 166, 90, .45) !important; + border-top: 3px solid var(--accent-color); + } + /* Queries blocked box*/ + .small-box.bg-aqua { + background-color: rgba(0, 192, 239, .45) !important; + border-top: 3px solid var(--accent-color); + } + /* Percent blocked box */ + .small-box.bg-yellow { + background-color: rgba(243, 156, 18, .45) !important; + border-top: 3px solid var(--accent-color); + } + /*Blocklist box*/ + .small-box.bg-red { + background-color: rgba(221, 75, 57, .45) !important; + border-top: 3px solid var(--accent-color); + } + .table-bordered { + border: 1px solid #f4f4f41a !important; + background: rgba(0, 0, 0, .1); + } + .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td { + border: 1px solid rgba(255, 255, 255, 0.15); + } + .table-striped>tbody>tr:nth-of-type(odd) { + background-color:rgba(255, 255, 255, .1); + } + /* Query Log */ + .text-black { + color: #eee!important; + } + .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover, + .dataTables_paginate .pagination li > a{ + color: rgba(238, 238, 238, .5); + background-color: rgba(255, 255, 255, .1); + border-color: #ddd0; + } + .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover, + .paginate_button .active #all-queries_wrapper .pagination > li > a{ + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); + } + .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { + color: #fff !important; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + } + .pagination>li>a { + background: rgba(0, 0, 0, 0.25); + color: #eee; + border: 1px solid rgba(255, 255, 255, 0.07); + } + .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { + color: rgb(255, 255, 255) !important; + background-color: rgba(255, 255, 255, .25); + border-color: rgba(255, 255, 255, 0.07); + } + /* Login */ + .panel-default { + border-color: transparent; + background: rgba(0, 0, 0, 0.25); + } + .panel-default>.panel-heading { + color: #eee; + background-color: inherit; + border-color: transparent; + } + .panel, .panel-body, .panel-default > .panel-heading { + background-color: rgb(0 0 0 / 25%); + border-radius: 0px; + border: 1px solid transparent; + color: #bec5cb; + } + + /* Blacklist */ + .nav-tabs-custom { + background: rgba(0, 0, 0, 0.25); + } + .nav-tabs-custom>.tab-content { + background: transparent; + } + .nav-tabs-custom>.nav-tabs>li.active { + border-top-color: var(--accent-color); + } + .nav-tabs-custom>.nav-tabs>li.active>a { + border-top-color: transparent; + border-left-color: rgba(255, 255, 255, 0.1); + border-right-color: rgba(255, 255, 255, 0.1); + } + .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); + color: #eee !important; + } + .nav-tabs-custom>.nav-tabs>li>a { + color: #eee !important; + border-radius: 0; + } + .input-group .input-group-addon { + border-radius: 0; + border-color: #d2d6de00; + background-color: var(--accent-color); + color: #eee; + } + + /* Network */ + .table-striped>tbody>tr:nth-of-type(odd) { + background-color:rgba(0, 0, 0, .25) !important; + } + .table-striped>tbody>tr:nth-of-type(even) { + background-color:rgba(0, 0, 0, .5) !important; + } + #network-entries_wrapper.text-center { + text-align: center; + color: #eee !important; + } +/* Buttons */ + button,.btn-default { + background-color:var(--button-color) !important; + border:1px solid var(--button-color) !important; + color: white !important; + } + .btn-primary:hover, .btn-primary:active, .btn-primary.hover { + background-color: var(--button-color-hover) !important; + } + .btn-default:hover, .btn-default:active, .btn-default.hover { + background-color: var(--button-color-hover) !important; + } + .box.box-solid>.box-header .btn:hover, .box.box-solid>.box-header a:hover { + background: var(--button-color-hover) !important; + border: 1px solid transparent !important + } + .box.box-solid.box-info>.box-header, .box.box-solid.box-info { + color: #fff; + background: var(--button-color) !important; + border: 1px solid var(--button-color) !important; + } + .btn-danger { + background-color: #dd4b39 !important; + border-color: #d73925 !important; + } + .btn-danger:hover, .btn-danger:active, .btn-danger.hover { + background-color: #d73925 !important; + } + .btn-warning { + background-color: #f39c12 !important; + border-color: #e08e0b !important; + } + .btn-warning:hover { + color: #fff; + background-color: #ec971f !important; + border-color: #d58512 !important; + } + .icheck-primary>input:first-child:checked+input[type=hidden]+label::before, .icheck-primary>input:first-child:checked+label::before { + background-color: var(--button-color) !important; + border-color: var(--button-color) !important; + } + .icheck-primary>input:first-child:not(:checked):not(:disabled):hover+input[type=hidden]+label::before, .icheck-primary>input:first-child:not(:checked):not(:disabled):hover+label::before { + border-color: var(--button-color) !important; + } +/* Input */ + input,.form-control,pre,.box-footer,.datatables_processing { + background:#080909; + border:1px solid #666; + color:#b2b2b2; + } + .dataTables_wrapper input[type="search"] { + background-color: #ffffff; + color: #000000; + } + input, + select, + select.form-control, + .form-group .input-group-addon, + .input-group .input-group-addon, + .form-group input, + .input-group input, + .form-group textarea, + .input-group textarea, + .daterangepicker select.hourselect, + .daterangepicker select.minuteselect, + .daterangepicker select.secondselect, + .daterangepicker select.ampmselect, + .form-control, + div.dataTables_wrapper div.dataTables_length select { + background-color: rgb(0 0 0 / 0.25); + color: #eee; + border: 1px solid rgb(255 255 255 / 15%); + } + .form-control:focus { + border-color: rgb(255 255 255 / 0.25); + box-shadow: none; + } +/* Scrollbar */ + +::-webkit-scrollbar { + width: 0px; +} +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0,0%,100%,.2); + background-clip: padding-box; +} +::-webkit-scrollbar-track { + background: var(--main-bg-color); +} +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0,0%,100%,.5); + background-clip: padding-box; +} \ No newline at end of file diff --git a/CSS/themes/pihole/plex.css b/CSS/themes/pihole/plex.css new file mode 100644 index 00000000..8ba492f0 --- /dev/null +++ b/CSS/themes/pihole/plex.css @@ -0,0 +1,24 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PI-HOLE PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/pihole/pihole-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --link-color: #ffc107; + } \ No newline at end of file diff --git a/CSS/themes/pihole/space-gray.css b/CSS/themes/pihole/space-gray.css new file mode 100644 index 00000000..cf403582 --- /dev/null +++ b/CSS/themes/pihole/space-gray.css @@ -0,0 +1,24 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PI-HOLE SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/pihole/pihole-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; + --link-color: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/plex/aquamarine.css b/CSS/themes/plex/aquamarine.css index 0109f69c..bd67227b 100644 --- a/CSS/themes/plex/aquamarine.css +++ b/CSS/themes/plex/aquamarine.css @@ -15,6 +15,8 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --link-color: #FFEB3B; - --link-color-hover: rgba(255, 235, 61, 0.7); + --link-color: #009688; + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; } \ No newline at end of file diff --git a/CSS/themes/plex/dark.css b/CSS/themes/plex/dark.css index fb59f19b..cb53ac9a 100644 --- a/CSS/themes/plex/dark.css +++ b/CSS/themes/plex/dark.css @@ -15,6 +15,8 @@ :root { --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --link-color: #e5a00d; - --link-color-hover: #f2ad18; + --link-color: #e5a00d; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #e5a00d; } \ No newline at end of file diff --git a/CSS/themes/plex/hotline.css b/CSS/themes/plex/hotline.css index f273ea44..6439914a 100644 --- a/CSS/themes/plex/hotline.css +++ b/CSS/themes/plex/hotline.css @@ -16,5 +16,8 @@ --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --link-color: #FFEB3B; - --link-color-hover: rgba(255, 235, 61, 0.7); + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; } \ No newline at end of file diff --git a/CSS/themes/plex/organizr-dark.css b/CSS/themes/plex/organizr-dark.css new file mode 100644 index 00000000..89b1a8b6 --- /dev/null +++ b/CSS/themes/plex/organizr-dark.css @@ -0,0 +1,22 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PLEX ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io//theme.park/CSS/themes/plex/plex-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --link-color: #2cabe3; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/plex/plex-base.css b/CSS/themes/plex/plex-base.css index 92392518..e1491200 100644 --- a/CSS/themes/plex/plex-base.css +++ b/CSS/themes/plex/plex-base.css @@ -15,6 +15,47 @@ body { background: var(--main-bg-color); } + .Link-primary-1vcAGA { + color: var(--link-color) !important; +} +.DisclosureArrow-isSelected-QMJhDY { +border-color: var(--link-color); +} +.Link-isSelected-IRm9uM { + color: var(--accent-color); +} +.ServerSettingsServerMenuButton-button-24D7lE { + -webkit-filter: none !important; + filter: none !important; +} +.NavBarActivityButton-isHighlighted-27qlko:hover .NavBarActivityButton-label-2ZN0gQ { + color: var(--button-color-hover); +} +.NavBarActivityButton-isHighlighted-27qlko .NavBarActivityButton-activityIcon-1Db2GP { + background-color: var(--link-color); +} +.NavBarActivityButton-isHighlighted-27qlko .NavBarActivityButton-label-2ZN0gQ { + color: var(--link-color); +} +.NavBarActivityButton-isHighlighted-27qlko:hover .NavBarActivityButton-activityIcon-1Db2GP { + background-color: var(--button-color-hover); +} +.PageHeaderTabButton-isSelected-25CIS7 { + background-color: rgba(0,0,0,.15); + color: var(--link-color); +} +.btn-primary, .Button-primary-3fwLzo { + border-color: var(--button-color); + background-color: var(--button-color); + +} +.btn-primary:focus, .btn-primary:hover, .Button-primary-3fwLzo:hover { + color: #fff; + background-color: var( --button-color-hover); +} +.Button-primary-3fwLzo.isDisabled, .btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover { + background-color: var(--button-color); +} .background,.background-container { opacity: 0; transition: opacity .5s; @@ -35,6 +76,9 @@ .NavBar-container-1T0BJz { background: rgba(0, 0, 0, 0.45); } +.Menu-menu-3XnN6J { + background: var(--modal-bg-color); +} /*Text*/ .help-block, .ClaimedServer-messageHeader-3uzatL, .btn-gray, .text-muted label { color: #fff; @@ -54,6 +98,24 @@ .modal-footer, .EditHomeModalContent-footer-10Ix6N { border-top: 1px solid rgba(255, 255, 255, 0.08); } +.modal-body { + background: var(--modal-bg-color); +} +body > div.user-select-modal.modal.modal-transparent.fade.in > div > div.modal-content > div > div.modal-body { + background: none; +} +#pin-form > div { + background: none; +} +.modal-list { +background-color: rgba(0, 0, 0, 0.25); +} +.match-result-list-item>.match-result .match-score-info { + color: #eee; +} +.fix-incorrect-match-modal .match-location { + color: #eee; +} /*Modal icon color*/ .edit-section-modal .wizard-blocks-group>.wizard-block { color: #ffffff; @@ -71,4 +133,144 @@ .files ul li { color: #fff; } -/* This was a tough one :D */ +.MetadataPosterCardOverlay-unplayedBadge-2hKHo5 { + background-color: var(--accent-color); +} +.MetadataPosterCardFace-face--dz_Dx:hover { + box-shadow: 0 0 0 2px var(--accent-color); +} +.PlayButton-playButton-3WX8X-:hover .PlayButton-playCircle-3Evfdw { + border-color: var(--accent-color); + background-color: var(--accent-color); +} +.PageHeaderTabDropdown-isSelected-FK5pDv { + border-color: var(--accent-color); +} +.SelectedMenuItem-isSelected-178xe1, .SelectedMenuItem-isSelected-178xe1 .SelectedMenuItem-selectedIcon-20Yx1_ { + color: var(--accent-color); +} +.Badge-primary-3suJx3,.alert-bar.notify { + background-color: var(--accent-color); +} +.PrePlayCastCell-posterCardLinkContainer-27hxZ8:hover { + box-shadow: 0 0 0 2px var(--accent-color); +} +.SourceSidebarServerHeader-title-3zMGa0 { + color: var(--accent-color); + +} +.SourceSidebarLink-isSelected-27-9-6 { + box-shadow: inset 4px 0 0 0 var(--accent-color); +} +.PosterCardOverlayProgress-progressBar-3k291O { + background-color: var(--accent-color); +} +.Spinner-spinner-Niere7 { + border-color: var(--accent-color) transparent transparent var(--accent-color); +} +.loading { + border-color: var(--accent-color) transparent transparent var(--accent-color); +} +.PlayPauseOverlay-playCircle-3ydPYX { + border-color: var(--accent-color); + background-color: var(--accent-color); +} +.SeekBar-seekBarFill-1Lcu0w { + background-color: var(--accent-color); +} +.SeekBar-seekBarBuffer-3bUz95 { + background-color: var(--accent-color); + opacity: .2; +} +.VolumeSlider-fill-3XkYyD { + background-color: var(--accent-color); +} +.IconButton-isActive-1_AJJ- { + color: var(--accent-color); +} +.IconButton-isActive-1_AJJ-:hover { + color: var(--accent-color); + opacity: .7 +} +.MetadataPosterCardFace-isSelected-1XUgkl { + box-shadow: 0 0 0 2px var(--accent-color); +} +.SelectButton-isSelected-3mX245 .SelectButton-selectCircle-3tdvGt { + border-color: var(--accent-color); + background-color: var(--accent-color); + color: #eee; +} +.btn-gray.selected { + color: var(--accent-color); +} +a { + color: var(--link-color); +} +a:hover { + color: #eee; +} +.media-poster-container.selected .media-poster { + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 3px var(--accent-color); + box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 3px var(--accent-color); +} +.media-poster-container.selected .media-poster:before { + border-color: var(--accent-color) var(--accent-color) transparent transparent; +} +.force-hover .media-poster-container .media-poster, .force-hover .media-poster-container .media-poster-fade, .media-poster-container:focus .media-poster, .media-poster-container:focus .media-poster-fade, .media-poster-container:hover .media-poster, .media-poster-container:hover .media-poster-fade { + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 2px var(--accent-color); + box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 2px var(--accent-color); +} +.label-primary { + background-color: var(--button-color); +} +.label-primary[href]:focus, .label-primary[href]:hover { + background-color: var(--button-color-hover); + background-color: var(--button-color-hover); +} +.Link-isSelected-1XdDvu { + color: var(--accent-color); +} +.Link-link-2n0yJn:hover { + color: #fff !important; +} +.SessionTile-playProgressPercent-1_FcEg { + background-color: var(--accent-color); +} +.SessionTile-transcodeProgressPercent-K1k4ZQ { + background-color: var(--accent-color); + opacity: .3; +} +.edit-section-modal .wizard-blocks-group>.wizard-block.selected, .edit-section-modal .wizard-blocks-group>.wizard-block.selected:hover { + color: var(--accent-color); +} +.ServerMenuItem-selectedServerMenuItem-jaUTXA { + color: var(--accent-color); +} +.ServerMenuItem-selectedIcon-dhK05- { + color: var(--accent-color); +} +.NavBarActivityMenuStatusItem-statusButtonIndicator-3D2d1i { + color: var(--accent-color); +} +.MetadataTitleProgress-unwatchedCircle-25KKnh { + background-color: var(--accent-color); +} +.MultiSelectPageHeader-multiSelectPageHeader-MIQA1B { + box-shadow: 0 2px 0 0 var(--accent-color); +} +.MultiSelectPageHeader-selectedTitle-1kn-xo { + color: var(--accent-color); +} +.PlexPassUpsell-icon-1r94uI { + color: var(--accent-color); +} +.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { + color: var(--accent-color); +} +.edit-lock-addon.locked { + background-color: var(--accent-color); + border-color: var(--accent-color); +} +.media-poster-container.selected .media-poster:after { + color: #eee; +} \ No newline at end of file diff --git a/CSS/themes/plex/space-gray.css b/CSS/themes/plex/space-gray.css index 318bbfed..b478d191 100644 --- a/CSS/themes/plex/space-gray.css +++ b/CSS/themes/plex/space-gray.css @@ -15,4 +15,9 @@ :root { --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - } \ No newline at end of file + --link-color: #607D8B; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/plpp/organizr-dark.css b/CSS/themes/plpp/organizr-dark.css new file mode 100644 index 00000000..80833385 --- /dev/null +++ b/CSS/themes/plpp/organizr-dark.css @@ -0,0 +1,21 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PLPP ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/plpp/plpp-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); +} \ No newline at end of file diff --git a/CSS/themes/portainer/organizr-dark.css b/CSS/themes/portainer/organizr-dark.css new file mode 100644 index 00000000..608ce803 --- /dev/null +++ b/CSS/themes/portainer/organizr-dark.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* PORTAINER ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/portainer/portainer-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + } \ No newline at end of file diff --git a/CSS/themes/portainer/portainer-base.css b/CSS/themes/portainer/portainer-base.css index 88949da8..63dcf2ae 100644 --- a/CSS/themes/portainer/portainer-base.css +++ b/CSS/themes/portainer/portainer-base.css @@ -73,7 +73,7 @@ } /* NEWS */ .motd-body { - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.15) !important; } /* LOGIN */ .panel-default { @@ -169,25 +169,45 @@ background-color: var(--button-color); } /* BUTTONS */ - .btn-primary { + .btn-primary, .btn-default { color: #fff; background-color: var(--button-color); border-color: var(--button-color); } + .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default,.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover { + color: #fff; + background-color: var(--button-color-hover); + border-color: transparent; + } .btn-link { font-weight: 400; color: var(--button-color); border-radius: 0; } - .btn-primary:hover { + .btn-primary:hover, .btn-default:hover { color: #fff; background-color: var(--button-color-hover); border-color: transparent; } + .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { + outline: none; +} .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover { background-color: var(--button-color-hover); border-color: transparent; } + .bootbox-form .checkbox i, .switch i { + background: rgba(255, 255, 255, 0.15); +} +.btn.focus, .btn:focus, .btn:hover { + color: #fff; +} +.ui-select-bootstrap>.ui-select-match>.btn:hover, .ui-select-bootstrap>.ui-select-match>.btn:focus { + text-align: left!important; + color: #fff; + background-color: rgba(255, 255, 255, 0.25); + border-color: #00000000; +} /* PAGINATION */ .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { color: #ccc; @@ -277,4 +297,98 @@ } :-moz-placeholder { /* Firefox 18- */ color: #bbb; - } \ No newline at end of file + } + /* STACKS */ + .CodeMirror { + background: rgba(255, 255, 255, 0.10); + color: white; + } + .CodeMirror-gutters { + border-right: 1px solid rgba(255, 255, 255, 0.25); + background-color: rgba(0, 0, 0, 0.25); + caret-color: white; + } + .CodeMirror-linenumber { + color: var(--accent-color); + } + .CodeMirror-line::selection, .CodeMirror-line>span::selection, .CodeMirror-line>span>span::selection { + background: #d7d4f0; + } + .cm-s-default .cm-atom { + color: var(--accent-color); + } + /* NAVIGATION */ + .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { + color: #fff; + cursor: default; + background-color: rgba(255, 255, 255, 0.15); + border: 1px solid #ddd0; + border-bottom-color: transparent; + } + .nav-tabs>li>a:hover { + border-color: transparent; + } + + .nav>li>a:focus, .nav>li>a:hover { + text-decoration: none; + background-color: rgba(0, 0, 0, 0.25); + } + .nav-tabs>li>a { + border: 1px solid rgba(0, 0, 0, 0); + background: rgba(0, 0, 0, 0.15); + } + /* LOGS */ + .log_viewer { + color: #fff; + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid transparent; + } + /* JSON TREE */ + json-tree { + color: #eee; + } + json-tree .key { + color: var(--accent-color); + padding-right: 5px; + } + pre { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border: 1px solid transparent; + } + /* MODAL */ + .modal-content { + background: var(--modal-bg-color); + } + .modal-header { + border-bottom: 1px solid rgba(255, 255, 255, 0.20); + } + .modal-footer { + border-top: 1px solid rgba(255, 255, 255, .20); + } + /* STACKS / SERVICES TABLES */ + .widget .widget-body table tbody { + background-color:transparent !important; + background:transparent !important; + } + .widget .widget-body table .ng-scope tr { + background: rgba(0, 0, 0, .25) !important; + background-color: rgba(0, 0, 0, .25) !important; + } + .widget .widget-body table thead { + background-color:rgba(0, 0, 0, .25) !important; + background:rgba(0, 0, 0, .25) !important; + } + .widget .widget-body table tbody .ng-isolate-scope div { + background-color: rgba(0, 0, 0, .25) !important; + background: rgba(0, 0, 0, 0) !important; + } + .widget .widget-body table tbody tr:hover { + background-color:#0000 !important; + background:rgba(0, 0, 0, 0) !important; + } + .widget .widget-body table thead tr:hover { + background-color:rgba(0, 0, 0, .35) !important; + background:rgba(0, 0, 0, .35) !important; + } + \ No newline at end of file diff --git a/CSS/themes/qbittorrent/aquamarine.css b/CSS/themes/qbittorrent/aquamarine.css index 9c8f8519..8c42095a 100644 --- a/CSS/themes/qbittorrent/aquamarine.css +++ b/CSS/themes/qbittorrent/aquamarine.css @@ -17,4 +17,12 @@ --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --progress-color: #4c95af; + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --accent-color: #12afa0; + --accent-color-hover: #fff; + --text: #eee; + --text-hover: #fff; + --link-color: #12afa0; } diff --git a/CSS/themes/qbittorrent/dark.css b/CSS/themes/qbittorrent/dark.css index ff2aaf62..4f4244a0 100644 --- a/CSS/themes/qbittorrent/dark.css +++ b/CSS/themes/qbittorrent/dark.css @@ -17,4 +17,12 @@ --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --progress-color: #3d3d3d; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #fff; + --accent-color-hover: rgba(255, 255, 255, 0.45); + --text: #eee; + --text-hover: #fff; + --link-hover: rgba(255, 255, 255, 0.45); } \ No newline at end of file diff --git a/CSS/themes/qbittorrent/hotline.css b/CSS/themes/qbittorrent/hotline.css index ed76a1fc..8e12db42 100644 --- a/CSS/themes/qbittorrent/hotline.css +++ b/CSS/themes/qbittorrent/hotline.css @@ -17,4 +17,12 @@ --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --progress-color: #df6c4c; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --text: #eee; + --text-hover: #fff; + --link-hover: #F44336; } \ No newline at end of file diff --git a/CSS/themes/qbittorrent/organizr-dark.css b/CSS/themes/qbittorrent/organizr-dark.css new file mode 100644 index 00000000..2019c9f5 --- /dev/null +++ b/CSS/themes/qbittorrent/organizr-dark.css @@ -0,0 +1,28 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* QBITTORRENT ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/qbittorrent/qbittorrent-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --progress-color: #2cabe3; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --button-text: #eee; + --accent-color:#2cabe3; + --accent-color-hover: #fff; + --text:#96a2b4; + --text-hover: #fff; + --link-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/qbittorrent/plex.css b/CSS/themes/qbittorrent/plex.css index 13b6b4ef..0f924f0b 100644 --- a/CSS/themes/qbittorrent/plex.css +++ b/CSS/themes/qbittorrent/plex.css @@ -17,4 +17,12 @@ --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; --progress-color: #cc7b19; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --text: #eee; + --text-hover: #fff; + --link-color:#fff; } \ No newline at end of file diff --git a/CSS/themes/qbittorrent/qbittorrent-base.css b/CSS/themes/qbittorrent/qbittorrent-base.css index 8c521ef3..620d9458 100644 --- a/CSS/themes/qbittorrent/qbittorrent-base.css +++ b/CSS/themes/qbittorrent/qbittorrent-base.css @@ -1,4 +1,3 @@ - /* dP dP dP */ /* 88 88 88 */ /* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ @@ -12,82 +11,101 @@ /* https://github.com/gilbN/theme.park */ @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css); + ::-webkit-scrollbar { width: 10px; height: 10px; } + ::-webkit-scrollbar-corner { - background-color: hsla(0,0%,100%,.08); + background-color: hsla(0, 0%, 100%, .08); } + ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; - background-color: hsla(0,0%,100%,.08); + background-color: hsla(0, 0%, 100%, .08); } -html, body { +html, +body { color: #FFF; background: transparent; } + body { background: var(--main-bg-color); } + #desktop { background: var(--main-bg-color); } + input:disabled { color: rgb(84, 84, 84); cursor: default; background-color: rgb(255, 255, 255, .05) !important; border: none !important; } -input[type="text" i] { + +input[type="text"i] { color: #FFF; - background-color: rgba(0,0,0,.25); + background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; border: none; border-radius: 3px; } -input[type="password" i] { + +input[type="password"i] { color: #FFF; - background-color: rgba(0,0,0,.25); + background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; border: none; border-radius: 3px; } -input[type="number" i] { + +input[type="number"i] { color: #FFF; - background-color: rgba(0,0,0,.25); + background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; border: none; } -input[type="file" i] { + +input[type="file"i] { color: #FFF; - background-color: rgba(0,0,0,.25); + background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; border: none; } -input[name="category" i] { + +input[name="category"i] { color: #000; background-color: #fff; border-width: 0px; outline: none; border: none; } -input[type="file" i] { -border: none; + +input[type="file"i] { + border: none; } + select { border: none !important; } -a, h2, h3, h4, .mochaTitlebar h3 { +a, +h2, +h3, +h4, +.mochaTitlebar h3 { color: #fff; } + /* Login */ #main h1 { display: block; @@ -98,7 +116,8 @@ a, h2, h3, h4, .mochaTitlebar h3 { margin-inline-end: 0px; font-weight: bold; } - #error_msg { + +#error_msg { text-transform: uppercase; color: #D8000C; background-color: #FFD2D2; @@ -144,10 +163,10 @@ a, h2, h3, h4, .mochaTitlebar h3 { } #formplace { - text-transform: uppercase; + text-transform: uppercase; text-align: left; font-size: 12px; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 300 !important; padding: 10px; position: absolute; @@ -157,55 +176,66 @@ a, h2, h3, h4, .mochaTitlebar h3 { -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } + label { - cursor: default; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important; - font-weight: 300 !important; + cursor: default; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; + font-weight: 300 !important; } .horizontalHandle .handleIcon { - margin: 0 auto; - height: 4px; - line-height: 1px; - font-size: 1px; - overflow: hidden; - background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/dots.png) center center no-repeat; + margin: 0 auto; + height: 4px; + line-height: 1px; + font-size: 1px; + overflow: hidden; + background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/dots.png) center center no-repeat; } + #desktopNavbar { background: rgba(0, 0, 0, 0.25); height: 20px; border-bottom: 1px solid transparent; } + #desktopNavbar ul li a { color: #fff; } + #desktopNavbar ul li a:hover { color: #fff; background-color: rgba(255, 255, 255, 0.08); } + #desktopNavbar li ul li a:hover { background: rgba(255, 255, 255, .08); color: #fff; } + #desktopNavbar li ul { border: 1px solid transparent; background: var(--modal-bg-color); } + #desktopNavbar li ul li a { color: #fff; } + #desktopHeader { background: var(--main-bg-color); } + #desktopFooter { background: transparent; } + #mochaToolbar .divider { background-image: none; padding-left: 0px; } + #mochaToolbar { - margin-bottom: 5px; + margin-bottom: 5px; } .dynamicTable th { @@ -216,40 +246,50 @@ label { .dynamicTable thead tr { background-color: transparent !important; } + .dynamicTable thead tr { background-color: transparent !important; } + .dynamicTable { background: rgba(0, 0, 0, 0.25); } + .dynamicTable tbody tr { background-color: rgba(0, 0, 0, 0.08) !important; } -.dynamicTable tbody tr:nth-child(even), .dynamicTable tbody tr.alt { + +.dynamicTable tbody tr:nth-child(even), +.dynamicTable tbody tr.alt { background-color: rgba(255, 255, 255, 0.08) !important; } + .dynamicTable tbody tr:hover { background-color: rgba(255, 255, 255, 0.15) !important; } + .dynamicTable tbody tr.selected { background-color: rgba(0, 0, 0, 0.45) !important; } + .panel { background: var(--main-bg-color); border-bottom: 1px solid transparent; } + #pageWrapper { border-top: 1px solid transparent; border-bottom: 1px solid transparent; } + li.divider { border-top: 1px solid rgba(255, 255, 255, .25) !important; } -#main input[type="text" i] { +#main input[type="text"i] { color: #FFF; - background-color: rgba(0,0,0,.25); + background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; border: none; @@ -258,12 +298,14 @@ li.divider { height: 24px; padding: 7px 12px; } -#main input[type="text" i]:focus { - background-color: rgba(0,0,0,.45); + +#main input[type="text"i]:focus { + background-color: rgba(0, 0, 0, .45); } -#main input[type="password" i] { + +#main input[type="password"i] { color: #FFF; - background-color: rgba(0,0,0,.25); + background-color: rgba(0, 0, 0, .25); border-width: 0px; outline: none; border: none; @@ -272,17 +314,19 @@ li.divider { height: 24px; padding: 7px 12px; } -#main input[type="password" i] { - background-color: rgba(0,0,0,.45); + +#main input[type="password"i] { + background-color: rgba(0, 0, 0, .45); } -#main input[type="submit" i] { + +#loginform #login { padding: 6px 15px !important; width: 100%; margin-top: 35px; - background-color: rgba(0, 0, 0, 0.25); + background-color: var(--button-color) !important; border: none; border-radius: 4px; - color: #fff; + color: var(--button-text) !important; outline: none; text-transform: uppercase; font-size: 18px; @@ -290,13 +334,14 @@ li.divider { height: 44px; line-height: 1.3333333; } -#loginform input[type="submit" i]:hover { - background-color: rgb(0, 0, 0, .45) !important; + +#loginform #login:hover { + background-color: var(--button-color-hover) !important; padding: 6px 15px; border-radius: 4px; cursor: pointer; border: none; - color: #fff; + color: var(--button-text) !important; } @@ -305,34 +350,38 @@ li.divider { border: 1px solid transparent; background: var(--modal-bg-color); } + .contextMenu li a { color: #fff; } + .contextMenu li a:hover { background-color: rgba(255, 255, 255, .08) !important; } + .contextMenu li ul { border: 1px solid transparent; background: var(--modal-bg-color); } + .contextMenu .separator { border-top: 1px solid rgba(255, 255, 255, 0.08); } + /* Sidemenu */ .selectedFilter { background-color: rgba(0, 0, 0, 0.25); color: #FFF; } + ul.filterList li:hover { background-color: rgba(255, 255, 255, 0.08); } + .columnHandle { background: rgba(0, 0, 0, 0.45); border: 1px solid transparent; } -#filtersColumn_handle { - margin-left: 0; -} /*Sidemenu - Bottom menu*/ .bottomPanel { @@ -343,53 +392,68 @@ ul.filterList li:hover { .panel-headerContent.tabs { background: none !important; } + .panel-header { background: rgba(0, 0, 0, 0.25) !important; border-bottom: 1px solid transparent !important; } + .horizontalHandle { background: none !important; } + .tab-menu li.selected a { color: #fff !important; background: transparent !important; font-weight: normal !important; } + .tab-menu li a { color: #fff !important; background: transparent !important; } + .tab-menu li.selected { background: none !important; } + .tab-menu li { background: none !important; } + .tab-menu li a:hover { background: rgba(255, 255, 255, 0.08) !important; } + .toolbarTabs { background: rgba(0, 0, 0, 0.25) !important; } + .progressbar_dark { background: var(--progress-color) !important; } + .progressbar_light { background: rgba(0, 0, 0, 0.25) !important; color: #fff !important; } + .progressbar_wrapper { - border: 1px solid transparent!important; -} + border: 1px solid transparent !important; +} + .stateIcon { background-image: red !important; } + .panel-collapse { - background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/collapse-expand.gif) left top no-repeat; + background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/collapse-expand.gif) left top no-repeat; } + .panel-expand { - background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/collapse-expand.gif) left -16px no-repeat; + background: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/collapse-expand.gif) left -16px no-repeat; } + fieldset { border-width: 1px !important; border-style: solid !important; @@ -401,24 +465,28 @@ fieldset { .mochaTitlebar { width: 100%; overflow: hidden; - background: none !important; + background: none !important; } + .mochaToolButton { margin-right: 10px; background: rgba(0, 0, 0, .25); border-radius: 5px; } + .mochaToolButton:hover { margin-right: 10px; background: rgba(255, 255, 255, .25); border-radius: 5px; } + .mochaOverlay { position: absolute; top: 0; left: 0; background: var(--modal-bg-color) !important; } + .mochaToolbarWrapper { width: 100%; position: relative; @@ -432,18 +500,22 @@ fieldset { width: 100%; border-top: none !important; } + .mochaContentBorder { border-top: 1px solid rgba(255, 255, 255, .25) !important; border-bottom: 1px solid rgba(255, 255, 255, .25) !important; } + .mocha.isFocused .mochaTitlebar h3 { color: #fff; } + .mochaContentWrapper { font-size: 12px; overflow: auto; background: transparent !important; } + fieldset.settings { border: solid 1px rgba(255, 255, 255, 0.25) !important; border-radius: 8px; @@ -451,962 +523,1134 @@ fieldset.settings { -moz-border-radius: 8px; padding: 4px 4px 4px 10px; } + textarea:disabled { color: rgb(84, 84, 84); cursor: default; background-color: rgb(255, 255, 255, .05) !important; border: none !important; } + textarea { color: #fff !important; cursor: default; background-color: rgb(0, 0, 0, .25) !important; border: none !important; } -#watched_folders_tab td, #watched_folders_tab th { + +#watched_folders_tab td, +#watched_folders_tab th { padding: 2px 4px; border: 1px solid rgba(255, 255, 255, 0.25) !important; } -input[type="button" i]:hover { - background-color: rgb(255, 255, 255, .15) !important; + +input[type="button"i]:hover { + background-color: var(--button-color-hover); padding: 6px 15px; cursor: pointer; border: none; - color: #fff; + color: var(--button-text); } -input[type="button" i] { + +input[type="button"i] { padding: 6px 15px !important; - background-color: rgb(255, 255, 255, .08) !important; + background-color: var(--button-color); cursor: pointer; border: none; - color: #fff; + color: var(--button-text); } + button { - background-color: rgb(255, 255, 255, .08) !important; + background-color: var(--button-color) !important; cursor: pointer; border: 2px solid transparent; - color: #fff; -} + color: var(--button-text); +} + button:hover { - background-color: rgb(255, 255, 255, .15) !important; + background-color: var(--button-color-hover) !important; cursor: pointer; border: 2px solid transparent; - color: #fff; + color: var(--button-text); } -input[type="submit" i] { + +input[type="submit"i] { padding: 6px 15px !important; width: 100%; margin-top: 15px; - background-color: rgba(0, 0, 0, 0.25) !important; + background-color: var(--button-color) !important; border: none; - color: #fff; + color: var(--button-text); outline: none; text-transform: uppercase; } -input[type="submit" i]:hover { + +input[type="submit"i]:hover { padding: 6px 15px !important; - background-color: rgba(0, 0, 0, 0.45) !important; + background-color: var(--button-color-hover) !important; width: 100%; cursor: pointer; border: none; - color: #fff; + color: var(--button-text); outline: none; text-transform: uppercase; } -/* Icons */ +/* Icons */ -#downloadButton > img.mochaToolButton { - display: none; + +#downloadButton>img.mochaToolButton { + display: none; } + #downloadButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f0c1"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); - margin-top: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f0c1"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); + margin-top: 5px; } #downloadButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f0c1"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f0c1"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#uploadButton > img.mochaToolButton { - display: none; +#uploadButton>img.mochaToolButton { + display: none; } + #uploadButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f067"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f067"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #uploadButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f067"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f067"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#deleteButton > img.mochaToolButton { - display: none; +#deleteButton>img.mochaToolButton { + display: none; } + #deleteButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f068"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f068"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #deleteButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f068"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f068"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#resumeButton > img.mochaToolButton { - display: none; +#resumeButton>img.mochaToolButton { + display: none; } + #resumeButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f04b"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f04b"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #resumeButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f04b"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f04b"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#pauseButton > img.mochaToolButton { - display: none; +#pauseButton>img.mochaToolButton { + display: none; } + #pauseButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f04c"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f04c"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #pauseButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f04c"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f04c"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#topPrioButton > img.mochaToolButton { - display: none; +#topPrioButton>img.mochaToolButton { + display: none; } + #topPrioButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f102"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f102"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #topPrioButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f102"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f102"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#increasePrioButton > img.mochaToolButton { - display: none; +#increasePrioButton>img.mochaToolButton { + display: none; } + #increasePrioButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f106"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f106"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #increasePrioButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f106"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f106"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#decreasePrioButton > img.mochaToolButton { - display: none; +#decreasePrioButton>img.mochaToolButton { + display: none; } + #decreasePrioButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f107"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f107"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #decreasePrioButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f107"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f107"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#bottomPrioButton > img.mochaToolButton { - display: none; +#bottomPrioButton>img.mochaToolButton { + display: none; } + #bottomPrioButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f103"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f103"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #bottomPrioButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f103"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f103"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } -#preferencesButton > img.mochaToolButton { - display: none; +#preferencesButton>img.mochaToolButton { + display: none; } + #preferencesButton:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f013"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color: rgba(255, 255, 255, 0.7); + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f013"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: rgba(255, 255, 255, 0.7); } #preferencesButton:hover:before { - font-family: "Font Awesome 5 Free"; - font-size: 24px; - content: "\f013"; - font-weight: 900; - display: inline-block; - width: 24px; - height: 24px; - margin-right: 10px; - color:white; + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f013"; + font-weight: 900; + display: inline-block; + width: 24px; + height: 24px; + margin-right: 10px; + color: white; } /*Top menu icons*/ #desktopNavbar li ul li a { - position: relative; - /* padding: 1px 9px 1px 25px; */ - min-width: 120px; - font-weight: normal; - padding: 5px 10px 1px 1px; + position: relative; + /* padding: 1px 9px 1px 25px; */ + min-width: 120px; + font-weight: normal; + padding: 5px 10px 1px 1px; } .MyMenuIcon { - margin-left: 0px; + margin-left: 0px; } - /* File */ - -#uploadLink > img.MyMenuIcon { - display: none; +/* File */ + +#uploadLink>img.MyMenuIcon { + display: none; } + #uploadLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f067"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f067"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } -#downloadLink > img.MyMenuIcon { - display: none; +#downloadLink>img.MyMenuIcon { + display: none; } + #downloadLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f0c1"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#logoutLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f0c1"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#logoutLink>img.MyMenuIcon { + display: none; } + #logoutLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f2f5"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#shutdownLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f2f5"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#shutdownLink>img.MyMenuIcon { + display: none; } + #shutdownLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00d"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00d"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } - /* Edit */ - -#resumeAllLink > img.MyMenuIcon { - display: none; +/* Edit */ + +#resumeAllLink>img.MyMenuIcon { + display: none; } + #resumeAllLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f04b"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#pauseAllLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f04b"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#pauseAllLink>img.MyMenuIcon { + display: none; } + #pauseAllLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f04c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#resumeLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f04c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#resumeLink>img.MyMenuIcon { + display: none; } + #resumeLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f04b"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#pauseLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f04b"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } + +#pauseLink>img.MyMenuIcon { + display: none; +} + #pauseLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f04c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#deleteLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f04c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#deleteLink>img.MyMenuIcon { + display: none; } + #deleteLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f068"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#topPrioLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f068"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#topPrioLink>img.MyMenuIcon { + display: none; } + #topPrioLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f102"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#increasePrioLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f102"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#increasePrioLink>img.MyMenuIcon { + display: none; } + #increasePrioLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f106"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#decreasePrioLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f106"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } + +#decreasePrioLink>img.MyMenuIcon { + display: none; +} + #decreasePrioLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f107"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#bottomPrioLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f107"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#bottomPrioLink>img.MyMenuIcon { + display: none; } + #bottomPrioLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f103"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#recheckLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f103"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#recheckLink>img.MyMenuIcon { + display: none; } + #recheckLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f002"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f002"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} - /* View */ - -#showTopToolbarLink > img.MyMenuIcon { - display: none; +/* View */ + +#showTopToolbarLink>img.MyMenuIcon { + display: none; } #showTopToolbarLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } + #showTopToolbarLink:active:focus:visited:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color:white; - opacity: 0; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: white; + opacity: 0; } -#showStatusBarLink > img.MyMenuIcon { - display: none; +#showStatusBarLink>img.MyMenuIcon { + display: none; } #showStatusBarLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } #showStatusBarLink:active:focus:visited:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color:white; - opacity: 0; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: white; + opacity: 0; } -#speedInBrowserTitleBarLink > img.MyMenuIcon { - display: none; +#speedInBrowserTitleBarLink>img.MyMenuIcon { + display: none; } #speedInBrowserTitleBarLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } #speedInBrowserTitleBarLink:active:focus:visited:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color:white; - opacity: 0; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: white; + opacity: 0; } -#showSearchEngineLink > img.MyMenuIcon { - display: none; +#showSearchEngineLink>img.MyMenuIcon { + display: none; } #showSearchEngineLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; + +} + +#showRssReaderLink>img.MyMenuIcon { + display: none; +} + +#showRssReaderLink:before { + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } #showSearchEngineLink:active:focus:visited:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color:white; - opacity: 0; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: white; + opacity: 0; +} + +#showRssReaderLink:active:focus:visited:before { + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: white; + opacity: 0; } -#StatisticsLink > img.MyMenuIcon { - display: none; +#StatisticsLink>img.MyMenuIcon { + display: none; } #StatisticsLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f080"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f080"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } #StatisticsLink:active:focus:visited:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f080"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color:white; - opacity: 0; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f080"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: white; + opacity: 0; } - /*Tools*/ - - -#preferencesLink > img.MyMenuIcon { - display: none; +/*Tools*/ + + +#preferencesLink>img.MyMenuIcon { + display: none; } #preferencesLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f013"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f013"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } - /* Help */ - -#docsLink > img.MyMenuIcon { - display: none; +/* Help */ + +#docsLink>img.MyMenuIcon { + display: none; } #docsLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f013"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#bugLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f013"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#bugLink>img.MyMenuIcon { + display: none; } #bugLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f09d"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#aboutLink > img.MyMenuIcon { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f09d"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#aboutLink>img.MyMenuIcon { + display: none; } #aboutLink:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f05a"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f05a"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + /*Status images on sidemenu*/ ul.filterList a { - display: inline; + display: inline; } -#all_filter > a img { - display: none; +#all_filter>a img { + display: none; } + #all_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f0b0"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#downloading_filter > a img { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f0b0"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#downloading_filter>a img { + display: none; } + #downloading_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f063"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f063"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } -#seeding_filter > a img { - display: none; +#seeding_filter>a img { + display: none; } + #seeding_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f062"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#completed_filter > a img { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f062"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#completed_filter>a img { + display: none; } + #completed_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } -#resumed_filter > a img { - display: none; +#resumed_filter>a img { + display: none; } + #resumed_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f04b"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} - -#paused_filter > a img { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f04b"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} + +#paused_filter>a img { + display: none; } + #paused_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f04c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f04c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } -#active_filter > a img { - display: none; +#active_filter>a img { + display: none; } + #active_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f0b0"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.9); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f0b0"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.9); + padding-left: 5px; } -#inactive_filter > a img { - display: none; +#inactive_filter>a img { + display: none; } + #inactive_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f0b0"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.4); - padding-left: 5px; -} - -#errored_filter > a img { - display: none; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f0b0"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.4); + padding-left: 5px; +} + +#stalled_filter>a img { + display: none; } + +#stalled_filter:before { + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f0b0"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.4); + padding-left: 5px; +} + +#stalled_uploading_filter>a img { + display: none; +} + +#stalled_uploading_filter:before { + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f093"; + font-weight: 900; + display: inline-block !important; + margin-right: 5px; + color: rgba(255, 255, 255, 0.4); + padding-left: 5px; +} + +#stalled_downloading_filter>a img { + display: none; +} + +#stalled_downloading_filter:before { + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f019"; + font-weight: 900; + display: inline-block !important; + margin-right: 5px; + color: rgba(255, 255, 255, 0.4); + padding-left: 5px; +} + +img[src="icons/inode-directory.svg"] { + background: url(https://gilbn.github.io/theme.park/Resources/qbittorrent/folder-open-solid.svg); + background-size: contain; + background-repeat: no-repeat; + background-origin: content-box; + object-position: -999999px 999999px; + filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); +} + +img[src="icons/network-server.svg"] { + background: url(https://gilbn.github.io/theme.park/Resources/qbittorrent/network-wired-solid.svg); + background-size: contain; + background-repeat: no-repeat; + background-origin: content-box; + object-position: -999999px 999999px; + filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); +} + +img[src="icons/mail-folder-inbox.svg"] { + background: url(https://gilbn.github.io/theme.park/Resources/qbittorrent/inbox-solid.svg); + background-size: contain; + background-repeat: no-repeat; + background-origin: content-box; + object-position: -999999px 999999px; + filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); +} + +img[src="icons/downloading_small.svg"], +img[src="icons/seeding.svg"] { + filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); +} + +#searchPattern { + width: 300px; + line-height: 2em; + padding: 1px 5px 1px 2em; + filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); + background-repeat: no-repeat; + background-size: 1.5em; + background-position: left; +} + +#connectionStatus, +#alternativeSpeedLimits { + filter: invert(79%) sepia(20%) saturate(0%) hue-rotate(135deg) brightness(87%) contrast(108%); +} + +#errored_filter>a img { + display: none; +} + #errored_filter:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f06a"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f06a"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } /* Categories */ .filterTitle img { -display: none; + display: none; } + .filterTitle:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f0d7"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f0d7"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } /* Categories Right Click Menu */ -#categoriesFilterMenu > li img { - display: none; +#categoriesFilterMenu>li img { + display: none; } -.contextMenu li > #CreateCategory:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f06a"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; + +.contextMenu li>#CreateCategory:before { + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f06a"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; } /* Torrent right clkick menu */ -#torrentsTableMenu > li img { - display: none; +#torrentsTableMenu>li img { + display: none; } -.contextMenu, #contextCategoryList { - box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); + +.contextMenu, +#contextCategoryList { + box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } + /* Filter torrents */ #torrentsFilterInput { - width: 160px; - padding-left: 2em; - background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/search-solid.png); - background-repeat: no-repeat; - background-size: 1em; - background-position: left; + width: 160px; + padding-left: 2em; + background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/search-solid.png); + background-repeat: no-repeat; + background-size: 1em; + background-position: left; } -.contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right { - background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/arrow-right.gif); - background-repeat: no-repeat; - background-position: right center; + +.contextMenu li a.arrow-right, +.contextMenu li a:hover.arrow-right { + background-image: url(https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/qbittorrent/arrow-right.gif); + background-repeat: no-repeat; + background-position: right center; } /* Footer */ #alternativeSpeedLimits td img { - display: none; + display: none; } + #alternativeSpeedLimits:before { - font-family: "Font Awesome 5 Free"; - font-size: 14px; - content: "\f00c"; - font-weight: 900; - display: inline-block; - margin-right: 5px; - color: rgba(255, 255, 255, 0.7); - padding-left: 5px; -} + font-family: "Font Awesome 5 Free"; + font-size: 14px; + content: "\f00c"; + font-weight: 900; + display: inline-block; + margin-right: 5px; + color: rgba(255, 255, 255, 0.7); + padding-left: 5px; +} \ No newline at end of file diff --git a/CSS/themes/qbittorrent/space-gray.css b/CSS/themes/qbittorrent/space-gray.css index b9fd7424..699ad7e1 100644 --- a/CSS/themes/qbittorrent/space-gray.css +++ b/CSS/themes/qbittorrent/space-gray.css @@ -17,4 +17,12 @@ --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; --progress-color: #607D8B; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --accent-color: #81a6b7; + --accent-color-hover: #81a6b7; + --text: #eee; + --text-hover: #fff; + --link-color: #81a6b7; } diff --git a/CSS/themes/radarr/organizr-dark.css b/CSS/themes/radarr/organizr-dark.css new file mode 100644 index 00000000..2dcd31c1 --- /dev/null +++ b/CSS/themes/radarr/organizr-dark.css @@ -0,0 +1,32 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RADARR ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/radarr/radarr-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --calendar-in-cinemas: #35c5f4; + --calendar-missing: #ff7676; + --calendar-announced: #337ab7; + --calendar-downloaded: #53e69d; + --calendar-downloading: #7932ea; + --calendar-unmonitored: grey; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + --queue-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/radarr/radarr-base.css b/CSS/themes/radarr/radarr-base.css index 1137d491..1d87313e 100644 --- a/CSS/themes/radarr/radarr-base.css +++ b/CSS/themes/radarr/radarr-base.css @@ -363,6 +363,18 @@ a:focus, a:hover { color: #f9be03; } +/* Calendar List */ + +.fc-list-item:hover td { + background-color: rgba(0, 0, 0, 0.1) !important; +} +.fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-popover .fc-header { + background: rgba(0, 0, 0, 0.1) !important; +} +.fc-unthemed .fc-list-view { + border-color: rgba(0, 0, 0, 0.1); +} + /* Activity Page */ .popover.in { opacity: .9; @@ -393,6 +405,9 @@ a:focus, a:hover { .nav>li>a:focus, .nav>li>a:hover { background-color: hsla(0,0%,100%,.08); } +.TableRowCell-cell-2fbg4 .ProgressBar-primary-3YDfb { + background-color: var(--accent-color); +} /* Season Pass */ .alert-info { @@ -653,8 +668,8 @@ pre { -/* -------------------------Radarr V2------------------------------*/ -/* Radarr v2 theme */ +/* -------------------------Radarr V3------------------------------*/ +/* Radarr v3 theme */ /* Froms */ .FormInputHelpText-helpText-3_AVV { @@ -720,7 +735,7 @@ pre { .ModalHeader-modalHeader-gpcvG { background: var(--modal-bg-color); color: #fff; - border-bottom: 1px solid hsla(0,0%,100%,.08); + border-bottom: 1px solid var(--accent-color); } .ModalContent-modalContent--txrl { background: var(--modal-bg-color); @@ -729,7 +744,7 @@ pre { .ModalFooter-modalFooter-1N5Ku { background: var(--modal-bg-color); color: #fff; - border-top: 1px solid hsla(0,0%,100%,.08); + border-top: 1px solid var(--accent-color); } .ModalContent-closeButton-37Puk:hover { color: #fff; @@ -842,12 +857,10 @@ pre { .MovieIndexOverview-link-1i54B:hover { text-decoration: none; } - .ProgressBar-container-14z4A { + .TableRowCell-cell-2fbg4 .ProgressBar-container-14z4A { background-color: rgba(0, 0, 0, 0.25); } -.ProgressBar-primary-3YDfb { - background-color: var(--accent-color); -} + .ProgressBar-purple-3DlHm { background-color: var(--accent-color); } @@ -862,6 +875,14 @@ pre { .MovieDetailsSeason-collapseButtonIcon-17xZI { color: #bac5cc; } + .MovieFileEditorTable-container-3VYDG { + border: 1px solid transparent; + background-color: rgba(0, 0, 0, 0.25); + } + .ExtraFileTable-container-1NM2r { + border: 1px solid transparent; + background-color: rgba(0, 0, 0, .25); + } .fa-search:hover { color: #FFF !important; @@ -882,17 +903,17 @@ pre { border: none !important; background-color: rgba(0, 0, 0, .25) !important; } - .Popover-title-326tA, .SeasonInfo-title-1tid_, .Popover-body-10Yh7 { - background-color: #232323 !important; + .Popover-title-326tA, .SeasonInfo-title-1tid_, .Popover-body-10Yh7,.Tooltip-body-kGG0h { + background: var(--modal-bg-color) !important; } .Tooltip-tooltipContainer-2693s { color: #fff; } .Tooltip-bottom-3Ewbi.Tooltip-default-2NTKh { - border-bottom-color: #232323; + border-bottom-color: #eee; } - Tooltip-right-2MxTa.Tooltip-default-2NTKh { - border-right-color: #232323; + .Tooltip-right-2MxTa.Tooltip-default-2NTKh { + border-right-color: #eee; } .EpisodeTitleLink-link-3ynTw:hover { color: #ffffff; @@ -925,7 +946,7 @@ pre { } .PageSidebarItem-status-34pTa > .Label-info-3YD3Y { border-color: transparent; - background-color: var(--queue-color); + background-color: var(--accent-color); color: #fff; } .MovieDetails-selectedTab-3hMLN { @@ -944,7 +965,7 @@ pre { color: hsla(0,0%,100%,.7); } /* POSTERS */ - .MovieIndexPoster-title-Umirt, .MovieIndexPoster-nextAiring-1FZy6, .MovieIndexPosterInfo-info-2JsCg { + .MovieIndexPoster-title-Umirt, .MovieIndexPoster-nextAiring-1FZy6, .MovieIndexPosterInfo-info-2JsCg, .MovieIndexPosterInfo-info-2Oh-5, .MovieCreditPoster-title-EGksL { background-color: rgba(255, 255, 255, 0.08); color: #fff; } @@ -1016,6 +1037,9 @@ pre { box-shadow: none; background-color: rgba(255, 255, 255, 0.25); } + .RootFolderSelectInputSelectedValue-movieFolder-2UNu1 { + color: #fff; + } .TagInput-input-3E1DX.TagInput-isFocused-13j-F { outline: 0; border-color: #fff; @@ -1033,7 +1057,7 @@ pre { .AddNewMovieSearchResult-searchResult-1FdVg:hover, .AddNewMovieSearchResult-underlay-1h0bG:hover { background-color: hsla(0,0%,100%,.08) !important; } - .AddNewmovieModalContent-year-t7IIJ { + .AddNewmovieModalContent-year-2NWV9 { color: #fff; } .RootFolderSelectInputSelectedValue-movieFolder-a7chC, .RootFolderSelectInputSelectedValue-freeSpace-1Irwm { @@ -1046,7 +1070,7 @@ pre { .FieldSet-legend-3x6NF { color: #FFF; - border-bottom: 1px solid hsla(0,0%,100%,.08); + border-bottom: 1px solid var(--accent-color); } .TableRow-row-33xJE:hover { background-color: hsla(0,0%,100%,.08); @@ -1057,7 +1081,7 @@ pre { } .ImportMovieSelectMovie-button-3CL3L, .ImportMovieSelectMovie-button-1dL1Z { border: none !important; - background-color: rgba(255, 255, 255, 0.08) !important; + background-color: rgba(0, 0, 0, 0.25) !important; } .ImportMovieSelectMovie-content-3oSDj, .ImportMovieSelectMovie-searchIconContainer-1wOES, .ImportMovieSelectMovie-content-fSTb8, .ImportMovieSelectMovie-searchIconContainer-2yf6b { border: none !important; @@ -1068,6 +1092,27 @@ pre { background-color: rgba(0, 0, 0, 0.25); } +/* DISCOVER */ +/*Title*/ +.AddListMovieOverview-link-3_RaH { + color: #eee; +} +.AddListMovieOverview-link-3_RaH:hover { + color: #fff; +} + +.AddListMovieOverview-content-2dBtg:hover { + background-color: hsla(0,0%,100%,.08) !important; +} +.PageJumpBarItem-jumpBarItem-3F58I:hover { + color: #fff; + background: hsla(0,0%,100%,.08); +} +/*Posters*/ +.AddListMoviePoster-title-2qKvg { + background-color: rgba(255, 255, 255, 0.08); + color: #fff; +} /* MASS EDITOR */ /* FOOTER */ .PageContentFooter-contentFooter-3ODMj { @@ -1147,12 +1192,28 @@ pre { color: #fff; } + /* MEDIA MANGEMENT */ + .NamingOption-small-2nxIl { + border: 1px solid transparent; + } + + .NamingOption-token-1y5bz { + background-color: rgba(255, 255, 255, 0.15); + } + + .NamingOption-example-RNR6x { + background-color: rgba(255, 255, 255, 0.25); + } + /* PROFILES */ .Card-card-1iGZk, .QualityProfiles-addQualityProfile-2U2Io { background-color: rgba(0,0,0,.45); box-shadow: 0 0 10px 1px #000000; - color: #fff; - } + color: #c2c6c8; + } + .Card-card-1iGZk:hover { + color: white; + } .QualityProfiles-center-1iiKm, .LanguageProfiles-center-7EV_2, .ReleaseProfiles-center-114Qx { background-color: transparent; border: none; @@ -1187,33 +1248,42 @@ pre { background-color: transparent; border: none; color: #c2c6c8; - } + } /* CONNECTIONS */ .Notifications-center-8iwmy { background-color: transparent; border: none; color: #c2c6c8; - } + } + + /* LISTS */ + .ImportLists-center-17Qdu{ + background-color: transparent; + border: none; + color: #c2c6c8; + } /* LOG */ .Alert-info-1J8mE { border-color: transparent; background-color: rgba(0, 0, 0, 0.25); color: #FFC107; -} + } + /* INDEXER */ .Restrictions-center-3ngzk { border: 1px solid transparent; background-color: transparent; } + /* LISTS */ .NetImports-center-3otL- { border: 1px solid transparent; background-color: transparent; } /* CUSTOM FORMAT */ - .CustomFormats-center-1w6Bw { + .CustomFormats-center-1w6Bw, .EditCustomFormatModalContent-center-3QU87 { border: 1px solid transparent; background-color: transparent; } @@ -1234,3 +1304,10 @@ pre { .FilterBuilderRow-filterRow-1ozij:hover { background-color: transparent; } +.CustomFilter-customFilter-zBSMd:hover { + background-color: hsla(0,0%,100%,.08); +} + +.SelectMovieModalContent-path-32FI- { + color: #eee; +} diff --git a/CSS/themes/readarr/aquamarine.css b/CSS/themes/readarr/aquamarine.css new file mode 100644 index 00000000..eb7d7627 --- /dev/null +++ b/CSS/themes/readarr/aquamarine.css @@ -0,0 +1,31 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* READARR AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/readarr/readarr-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --calendar-Downloading: #7a43b6; + --calendar-Downloaded: #27c24c; + --calendar-Unreleased: #06f; + --calendar-Partial: orange; + --calendar-Unmonitored: #adadad; + --calendar-Missing: #f05050; + + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; + --accent-color-hover: #12afa0; +} \ No newline at end of file diff --git a/CSS/themes/readarr/dark.css b/CSS/themes/readarr/dark.css new file mode 100644 index 00000000..f72bceea --- /dev/null +++ b/CSS/themes/readarr/dark.css @@ -0,0 +1,31 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* READARR DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/readarr/readarr-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + + --calendar-Downloading: #7a43b6; + --calendar-Downloaded: #27c24c; + --calendar-Unreleased: #06f; + --calendar-Partial: orange; + --calendar-Unmonitored: #adadad; + --calendar-Missing: #f05050; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.25); + --accent-color-hover: rgba(255, 255, 255, 0.45); + } \ No newline at end of file diff --git a/CSS/themes/readarr/hotline.css b/CSS/themes/readarr/hotline.css new file mode 100644 index 00000000..b1de50d8 --- /dev/null +++ b/CSS/themes/readarr/hotline.css @@ -0,0 +1,31 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* READARR HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/readarr/readarr-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + + --calendar-Downloading: #7a43b6; + --calendar-Downloaded: #27c24c; + --calendar-Unreleased: #06f; + --calendar-Partial: orange; + --calendar-Unmonitored: #adadad; + --calendar-Missing: #f05050; + + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; +} \ No newline at end of file diff --git a/CSS/themes/readarr/organizr-dark.css b/CSS/themes/readarr/organizr-dark.css new file mode 100644 index 00000000..5b0e9e04 --- /dev/null +++ b/CSS/themes/readarr/organizr-dark.css @@ -0,0 +1,31 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* READARR ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/readarr/readarr-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --calendar-Downloading: #7a43b6; + --calendar-Downloaded: #53e69d; + --calendar-Unreleased: #2cabe3; + --calendar-Partial: orange; + --calendar-Unmonitored: #adadad; + --calendar-Missing: #ff7676; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + } \ No newline at end of file diff --git a/CSS/themes/readarr/plex.css b/CSS/themes/readarr/plex.css new file mode 100644 index 00000000..7497ac1d --- /dev/null +++ b/CSS/themes/readarr/plex.css @@ -0,0 +1,31 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* READARR PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/readarr/readarr-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + + --calendar-Downloading: #7a43b6; + --calendar-Downloaded: #27c24c; + --calendar-Unreleased: #06f; + --calendar-Partial: orange; + --calendar-Unmonitored: #adadad; + --calendar-Missing: #f05050; + + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + } \ No newline at end of file diff --git a/CSS/themes/readarr/readarr-base.css b/CSS/themes/readarr/readarr-base.css new file mode 100644 index 00000000..feeb80b5 --- /dev/null +++ b/CSS/themes/readarr/readarr-base.css @@ -0,0 +1,929 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +body { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: #fff !important; + } + /* scroller */ +::-webkit-scrollbar-corner { + background-color: hsla(0,0%,100%,.08); +} +::-webkit-scrollbar { + width: 10px; + height: 10px; + background: rgba(0, 0, 0, .25); +} +::-webkit-scrollbar-thumb { + -webkit-border-radius: 2px; + border-radius: 2px; + background-color: rgba(255, 255, 255, 0.25) !important; +} +::-webkit-scrollbar-thumb:hover { + -webkit-border-radius: 2px; + border-radius: 2px; + background-color: rgba(255, 255, 255, 0.45) !important; +} +/* MINI RIGHT SCROLL BAR */ +.OverlayScroller-thumb-1Lhfi { +background-color: hsla(0,0%,100%,.25) !important; +} +.OverlayScroller-thumb-1Lhfi:hover { + background-color: rgba(255, 255, 255, 0.45) !important; +} + /* LINKS */ + .Link-to-6fmSq { + color: #FFF; + } + .Link-to-6fmSq:hover { + color: #FFF; + text-decoration: none; + } + + /* LOADING PAGE */ + .ErrorPage-page-3GptQ, .ErrorPage-version-3txe6, .LoadingMessage-loadingMessage-1gR5r { + color: #FFF; + } + .LoadingIndicator-ripple-358v5 { + border: 2px solid #fff; + } + + /* MODAL */ + .ModalHeader-modalHeader-gpcvG { + background: var(--main-bg-color); + color: #fff; + border-bottom: 1px solid var(--accent-color); + } + .ModalContent-modalContent--txrl { + background: var(--main-bg-color); + color: #fff; + } + .ModalFooter-modalFooter-1N5Ku { + background: var(--main-bg-color); + color: #fff; + border-top: 1px solid var(--accent-color); + } + + /* INPUT */ + .TagInput-internalInput-Jbb1T { + background-color: transparent; + color: #fff; + } + .SelectInput-select-1qCdc:focus { + background-color: #1e1e1e !important; + } + .AutoSuggestInput-suggestionsList-_bVXO, .AutoSuggestInput-suggestionsContainerOpen-3TAB7, .AutoSuggestInput-suggestionsContainer-3MmlD { + background-color: #323232 !important; + color: white; + border: none !important; + } + .AutoSuggestInput-suggestionHighlighted-2BWyt { + background-color: hsla(0,0%,100%,.08); + } + .FormInputHelpText-helpText-3_AVV { + color: #fff; + } + .CheckInput-primaryIsChecked-3mVN0 { + border-color: transparent; + background-color: var(--accent-color); + } + + /* HEADER */ + + .PageHeader-header-1IhlM { + background-color: rgba(0, 0, 0, .7); + } + + .PageHeader-donate-ZT-3N { + color: #c4273c !important; + } + + /* SIDE MENU */ + + @media only screen and (max-width: 768px) { + .PageSidebar-sidebar-3IOcI { + background-color: rgba(0, 0, 0, .45) !important; + } + } + .PageSidebar-sidebar-2UXc0 { + background-color: rgba(0, 0, 0, .45); + } + .PageSidebar-sidebarContainer-3Hxpq { + background-color: rgba(0, 0, 0, .45) !important; + } + .PageSidebar-sidebar-3IOcI { + background-color: transparent; + } + + .PageSidebarItem-link-TuHn2:hover, .PageSidebarItem-link-TuHn2:focus { + color: #FFF !important; + background-color: hsla(0,0%,100%,.08); + text-decoration: none; + } + .PageSidebarItem-isActiveLink-1Hupc { + color: #FFF; + background-color: hsla(0,0%,100%,.08); + } + .PageSidebarItem-isActiveParentLink-2uxKf { + background-color: transparent; + } + + @media only screen and (max-width: 768px) { + .PageSidebar-sidebarContainer-3Hxpq { + background: var(--main-bg-color) !important; + } + } + .PageSidebarItem-isActiveItem-bUesh { + border-left: 3px solid var(--accent-color); + } + + .fa-search:hover { + color: #FFF !important; + } + .Icon-default-3C-KJ:hover { + color: #fff; + } + .MonitorToggleButton-toggleButton-3CcN9 { + color: #dadada; + } + + .Table-table-2C3O8 { + color: #fff; + } + + .Popover-title-326tA, .SeasonInfo-title-1tid_, .Popover-body-10Yh7 { + background-color: #1f1f1f !important; + color: #fff !important; + } + .Tooltip-tooltipContainer-2693s { + color: #fff; + } + .Tooltip-right-2MxTa, .Tooltip-default-2NTKh { + border-right-color: #1f1f1f !important; + } + + + /* TOP MENU */ + .PageToolbar-toolbar-1Lo1N { + background-color: rgba(0, 0, 0, .25); + color: hsla(0,0%,100%,.7); + } + + /* HOVEL LABELS */ + .Label-default-2zdw6 { + border-color: #1b1b1b; + background-color: #1b1b1b; + } + /* TOP HEADER DROPDOWN */ + .MenuItem-menuItem-zB-Up, .MenuContent-menuContent-3Zkj4 { + background: var(--modal-bg-color); + color: #e1e2e3; + } + .MenuItem-menuItem-zB-Up:hover, .MenuItem-menuItem-zB-Up:focus { + background: hsla(0,0%,100%,.08) !important; + color: #fbfcfc; + text-decoration: none; + } + .MenuItemSeparator-separator-1ayq0 { + background-color: #e1e2e3; + } + + /* TOP HEADER HOVER */ + .PageToolbarButton-toolbarButton-QiQEt:hover { + color: #FFF; + } + .MenuButton-menuButton-3nh0N:hover { + color: #FFF; + } + /* ALPHABET JUMP BAR */ + .PageJumpBar-jumpBar-3owcF { + color: #FFF; + } + + /* ADD NEW */ + + /* SEARCH BAR */ + .Input-input-2YWzR { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF + } + .Input-input-2YWzR:focus { + outline: none; + border-color: transparent; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0); + background-color: rgba(0, 0, 0, .25); + } + .Button-default-2uiHU:hover { + border-color: transparent; + background-color: hsla(0,0%,100%,.3) !important; + color: #fff; + } + /* TEXT COLOR */ + .PageContentBody-innerContentBody-tEszh { + color: #fff; + } + + ::placeholder {color: #eee;} + :-moz-placeholder {color: #eee;} + :-ms-input-placeholder {color: #eee;} + ::-webkit-input-placeholder {color: #eee ;} + /* IMPORT */ + + .FieldSet-legend-3x6NF { + color: #FFF; + border-bottom: 1px solid var(--accent-color); + } + .TableRow-row-33xJE:hover { + background-color: hsla(0,0%,100%,.08); + color: #FFF; + } + .VirtualTableRow-row-2-JS9:hover { + background-color: hsla(0,0%,100%,.08); + } + + + /* MASS EDITOR */ + /* FOOTER */ + .PageContentFooter-contentFooter-3ODMj { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF; + } + + /* SEASON PASS */ + + .SeasonPassSeason-season-2FWuT { + border: none; + background-color: rgba(0, 0, 0, .25) !important; + } + .SeasonPassSeason-allEpisodes-1zGja { + background-color: #5cb85c; + } + + /* CALENDAR */ + .Button-default-2uiHU { + color: #FFF; + background-color: rgba(0, 0, 0, .25); + border-color: transparent; + } + .DayOfWeek-dayOfWeek-1iw4D { + background-color: hsla(0,0%,100%,.08); + } + + .CalendarDay-day-2TMXA { + -webkit-box-flex: 1; + -webkit-flex: 1 0 14.28%; + flex: 1 0 14.28%; + overflow: hidden; + min-height: 70px; + border-bottom: 1px solid hsla(0,0%,100%,.08); + border-left: 1px solid hsla(0,0%,100%,.08); + border-right: 1px solid hsla(0,0%,100%,.08); + } + .CalendarEvent-event-3Uyb9 { + border-bottom: none !important; + } + .CalendarEvent-event-3Uyb9:hover { + background-color: hsla(0,0%,100%,.08) !important; + border-bottom: none !important; + } + /* CALENDAR COLORS */ + .CalendarEvent-downloading-1kwSO { + border-left-color: var(--calendar-Downloading); + } + .CalendarEvent-downloaded-2vSrJ { + border-left-color: var(--calendar-Downloaded); + } + .CalendarEvent-unreleased-mSAoI { + border-left-color: var(--calendar-Unreleased); + } + .CalendarEvent-partial-2_4q1 { + border-left-color: var(--calendar-Partial); + } + .CalendarEvent-unmonitored-Zvc-m { + border-left-color: var(--calendar-Unmonitored); + } + .CalendarEvent-missing-1y6vZ { + border-left-color: var(--calendar-Missing); + } + + /* ACTIVITY */ + .ProgressBar-primary-3YDfb { + background-color: var(--accent-color); + } +.Label-info-3YD3Y { + border-color: var(--accent-color); + background-color: var(--accent-color); + } + + /* SETTINGS */ + + .Settings-summary-3KPAv { + color: #fff; + } + + /* PROFILES */ + .Card-card-1iGZk, .QualityProfiles-addQualityProfile-2U2Io { + background-color: rgba(0,0,0,.45); + box-shadow: 0 0 10px 1px #000000; + color: #fff; + } + .QualityProfiles-center-1iiKm, .LanguageProfiles-center-7EV_2, .ReleaseProfiles-center-114Qx { + background-color: transparent; + border: none; + color: #c2c6c8; + } + .QualityProfileItem-qualityProfileItem-VFp-W, .QualityProfileItemGroup-qualityProfileItemGroup-2U1l5 { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF; + } + .QualityProfileItemGroup-qualityProfileItemGroup-2U1l5.QualityProfileItemGroup-editGroups-2KzDp { + background: rgba(0, 0, 0, 0.25); + } + /* PROFILES */ + .Indexers-center-11Csq { + background-color: transparent; + border: none; + color: #c2c6c8; + } + + /* INDEXERS */ + + /* DOWNLOAD CLIENTS */ + .DownloadClients-center-FvACx { + background-color: transparent; + border: none; + color: #c2c6c8; + } + + /* IMPORT LISTS */ + + /* CONNECTIONS */ + .Notifications-center-8iwmy { + background-color: transparent; + border: none; + color: #c2c6c8; + } + + /* LOG */ + .Alert-info-1J8mE { + border-color: transparent; + color: #FFC107; + background-color: rgba(0, 0, 0, 0.25); + } + + /* -------------------------LIDARR STUFF------------------------------*/ + + /* Buttons */ + +.Button-default-2uiHU { + color: #FFF; + background-color: var(--button-color); + border-color: transparent; +} +.Button-default-2uiHU:hover { + border-color: transparent; + background-color: var(--button-color-hover) !important; + color: #fff; + } + +.Button-primary-1F1YL { + border-color: transparent; + background-color: var(--button-color); + color: #fff; + } + +.Button-primary-1F1YL:hover { + border-color: transparent; + background-color: var(--button-color-hover) !important; + color: #fff; +} +.Button-success-36KsU { + border-color: var(--button-color); + background-color: var(--button-color); + color: #fff; +} +.Button-success-36KsU:hover { + border-color: var(--button-color-hover); + background-color: var(--button-color-hover); + color: #fff; +} + + .LoadingIndicator-ripple-1264V { + border: 2px solid #FFFFFF; + } + /* Popup modal */ + .Modal-large-I2McN, .Modal-modal-3oHjA, .ModalContent-modalContent-1B9AX { + background-color: #282828; + color: #FFF; + } + .ModalHeader-modalHeader-P3MTG, .ModalFooter-modalFooter-3izCM { + background-color: #323232; + color: #FFF; + } + .ModalContent-closeButton-37Puk:hover { + color: #fff; +} + .ModalFooter-modalFooter-3izCM a:first-child, .ModalFooter-modalFooter-3izCM button:first-child { + background-color: #656565 !important; + border-color: transparent; + } + .ModalFooter-modalFooter-3izCM a:first-child, .ModalFooter-modalFooter-3izCM button:first-child:hover { + margin-left: 0; + background-color: hsla(0,0%,100%,.3) !important; + color: white; + border-bottom-color: transparent; + } + .Button-default-1X0nf { + border-color: transparent; + background-color: #656565; + color: #FFF; + } + .Button-default-1X0nf:hover { + border-color: transparent; + background-color: hsla(0,0%,100%,.3) !important; + color: #fff; + } + .Button-primary-1F1YL { + border-color: transparent; + } + .Button-primary-1F1YL:hover { + border-color: transparent; + } + .TagInput-input-3E1DX { + background-color: transparent; + color: #FFF; + } + .TagInput-suggestion-3jRkQ, .TagInput-containerOpen-2g0Wc, .TagInput-suggestionsContainer-1vjHY { + background-color: #1e1e1e !important; + } + .TagInput-suggestion-3jRkQ:hover { + background-color: hsla(0,0%,100%,.3) !important; + } + + /* Main Menu Header */ + .PageHeader-header-1lnFT { + background-color: rgba(0, 0, 0, .7); + } + .PageToolbar-toolbar-1oL_w { + background-color: rgba(0, 0, 0, .25); + color: hsla(0,0%,100%,.7); + } + .PageHeader-donate-3Lk-h { + color: #c4273c !important; + } + .PageToolbarButton-toolbarButton-3b5EM:hover { + color: #FFF; + } + .MenuButton-menuButton-3cqRJ:hover { + color: #FFF; + } + .MenuItem-menuItem-211VP, .MenuContent-menuContent-e2UAN { + background-color: #191a1c; + color: #e1e2e3; + } + .MenuItem-menuItem-211VP:hover, .MenuItem-menuItem-211VP:focus { + background-color: hsla(0,0%,100%,.08) !important; + color: #fbfcfc; + text-decoration: none; + } + .ArtistSearchInput-sectionTitle-3Xr5V { + color: #fff; + } + .ArtistSearchInput-containerOpen-OZAuD .ArtistSearchInput-artistContainer-331xe { + border: none; + background: var(--modal-bg-color); + color: #fff; + box-shadow: 0 0 10px 1px #000000; + } + .ArtistSearchInput-artistContainer-331xe::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.25); + } + .ArtistSearchInput-highlighted-2oxYA { + background-color: hsla(0,0%,100%,.08) + } + + + /* Sidebar */ + @media only screen and (max-width: 768px) { + .PageSidebar-sidebar-2UXc0 { + background: rgba(0, 0, 0, .25); + background-image: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + } + } + .PageSidebar-sidebarContainer-2kLcI { + background: transparent; + } + .PageSidebarItem-isActiveLink-1JpOZ { + color: hsla(0,0%,100%,.7) !important; + } + .PageSidebarItem-isActiveItem-34xgs { + border-left: 3px solid hsla(0,0%,100%,.08); + } + .PageSidebar-sidebar-2UXc0 { + background-color: rgba(0, 0, 0, .25); + } + .PageSidebarItem-isActiveParentLink-2qgS5 { + background-color: rgba(0, 0, 0, 0); + } + .PageSidebarItem-isActiveParentLink-2qgS5:hover { + background-color: hsla(0,0%,100%,.08); + } + .PageSidebarItem-link-2ron8:hover, .PageSidebarItem-link-2ron8:focus { + color: #FFF !important; + background-color: hsla(0,0%,100%,.08); + text-decoration: none; + } + .PageSidebarItem-link-2ron8 { + color: hsla(0,0%,100%,.7) !important; + } + /*ARTIST PAGE*/ + .ArtistIndexPoster-title-38afV { + background-color: rgba(255, 255, 255, 0.08); + } + .ArtistDetailsSeason-albumType-3aBd- { + border: none; + background-color: rgba(0, 0, 0, .25); + } + .ArtistDetailsSeason-header-2GIDr { + color: #fff; + } + .ArtistDetailsSeason-albumCount-14dOS { + color: #ffffff; + } + .ArtistDetailsSeason-collapseButtonContainer-1c4Kb { + border: none; + background-color: rgba(0, 0, 0, .25); + } + .ArtistDetails-metadataMessage-2NtMl { + color: #ffffff; + } + .ArtistDetailsSeason-albumCount-36Ow9 { + color: #ffffff; + } + .Label-default-2AF1C { + border-color: var(--accent-color); + background-color: var(--accent-color); +} + /*ARTIST ALBUM PAGE*/ + .AlbumDetailsMedium-mediumNumber-3ZUko { + color: #fff; + } + .AlbumDetailsMedium-medium-dqPTF { + border: none; + background-color: rgba(0, 0, 0, .25); + } + .AlbumDetailsMedium-collapseButtonContainer-33Y3Z { + border-top: none; + background-color: rgba(0, 0, 0, .25); + } + .ArtistIndexOverview-container-3_iEh:hover .ArtistIndexOverview-content-3zZhb, .ArtistIndexProgressBar-progress-3DLoM { + background-color: hsla(0,0%,100%,.08); + } + .ArtistIndexBanner-title-3TKM6 { + background-color: rgba(0, 0, 0, .25); + color: #fff; + } + .ProgressBar-container-14z4A { + background-color: rgba(0, 0, 0, 0.25); + } + /* OVERVIEW PAGE */ + .ArtistIndexOverview-container-29HZM, .ArtistIndexOverview-container-29HZM:hover { + background-color: transparent !important; + } + .ArtistIndexOverview-content-hiNUl:hover{ + background-color: hsla(0,0%,100%,.08) !important; + } + .ArtistIndexOverview-container-29HZM:hover .ArtistIndexOverview-content-hiNUl { + background-color: transparent; + } + .ArtistIndexOverview-content-hiNUl:hover { + text-decoration: none; + } + /* BANNER PAGE */ + .ArtistIndexBanner-title-dKZ3c { + background-color: rgba(0, 0, 0, .25); + } + + /* Table view*/ + .VirtualTableRow-row-2osBd:hover { + background-color: rgba(0, 0, 0, .25); + } + .VirtualTableRow-row-2osBd:hover, .ArtistIndexHeader-sortName-3sIoX:hover, .ArtistIndexHeader-artistType-1bUEX:hover, .ArtistIndexHeader-trackCount-2fAYt:hover, + .ArtistIndexHeader-qualityProfileId-33lgF:hover, .ArtistIndexHeader-languageProfileId-F8uCr:hover, .ArtistIndexHeader-metadataProfileId-258c_:hover, + .ArtistIndexHeader-nextAlbum-2P-CJ:hover, .ArtistIndexHeader-lastAlbum-18Y9w:hover, .ArtistIndexHeader-added-z5UiU:hover, .ArtistIndexHeader-genres-3YVsn:hover, .ArtistIndexHeader-albumCount-1CnIC:hover, + .ArtistIndexHeader-trackProgress-5psBe:hover, .ArtistIndexHeader-latestAlbum-KzyAA:hover, .ArtistIndexHeader-actions-KjYeY:hover { + background-color: rgba(0, 0, 0, .25); + color: #FFF; + } + .IconButton-button-2qiGi:hover { + color: #fff !important; + background-color: transparent; + } + .IconButton-button-2qiGi { + color: #bac5cc; + } + /* Table options*/ + .TableOptionsColumn-column-2H7ic { + background: rgba(0, 0, 0, .25); + color: #FFF; + border: none; + } + /* Fix rating border*/ + .ArtistIndexRow-ratings-nqXPx { + border-top: 1px solid #eee !important; + } + /* ADD NEW ARTIST */ + .AddNewArtist-searchIconContainer-7ygSM, .Input-input-dS7Oc, .AddNewArtist-clearLookupButton-2ym1, + .ImportArtistSelectArtist-button-WUML4, .PageContentFooter-contentFooter-1t6xx { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF; + } + .AddNewArtistSearchResult-year-3Ziif { + color: #ccc; +} + .AddNewArtistSearchResult-searchResult-fxW3m, .AddNewAlbumSearchResult-searchResult-XtaL3, .AddNewArtistSearchResult-searchResult-N5Vx4 { + background-color: transparent; + } + + .AddNewArtistSearchResult-searchResult-fxW3m:hover ,.AddNewAlbumSearchResult-searchResult-XtaL3:hover, .AddNewArtistSearchResult-searchResult-N5Vx4:hover { + background-color: hsla(0,0%,100%,.08); + color: inherit; + text-decoration: none; + } + .AddNewItem-searchIconContainer-2CBFJ { + border: none; + border-right: none; + background-color: rgba(255, 255, 255, 0.08); +} + .ImportArtistSearchResult-artist-IVs0T:hover { + background-color: hsla(0,0%,100%,.08); + } + .Input-input-dS7Oc:focus { + outline: 0; + border-color: transparent; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(0, 0, 0, 0); + background-color: rgb(30, 30, 30); + } + /* IMPORT ARTIST */ + .ImportArtistSelectArtist-content-qicZY { + background-color: #1e1e1e; + color: #FFF; + border: 1px solid #00000000; + } + .ImportArtistSelectArtist-button-1zPPw { + border: 1px solid #00000000; + background-color: #1f1f1f; + } + .ImportArtistSelectArtist-searchIconContainer-3YJva { + background-color: rgba(0, 0, 0, .25); + border-color: transparent; + } + .ImportArtistSearchResult-artist-11vxQ:hover { + background-color: rgba(255, 255, 255, 0.08); + } + + .Button-default-1X0nf { + color: #FFF; + background-color: rgba(0, 0, 0, .25); + } + .AddNewArtist-noResults-L1xcp, .AddNewArtist-message-c33sh { + color: #FFF; + } + .Button-default-1X0nf:hover { + background-color: hsla(0,0%,100%,.08); + } + + + /* IMPORT */ + /* Text color */ + .ImportArtistSelectFolder-header-1AE_l, .PageContent-content-2-LcY, .FieldSet-legend-3mbvV { + color: #FFF; + } + + .TableRow-row-2tPLX { + color: #FFF; + } + .TableRow-row-2tPLX:hover { + background-color: hsla(0,0%,100%,.08); + color: #FFF; + } + + /* ALBUM STUDIO */ + .AlbumStudioAlbum-album-mOsjl, .AlbumStudioAlbum-tracks-14O0r { + border: none; + background-color: rgba(0, 0, 0, 0.25); + color: #fff; + } + .AlbumStudioAlbum-albumType-3QdT4, .AlbumStudioAlbum-tracks-14O0r { + padding: 0 4px; + background-color: rgba(0, 0, 0, 0.25); + color: #fff; +} + .AlbumStudioAlbum-missingWanted-1jEbu { + background-color: #f05050; + } + .AlbumStudioAlbum-allTracks-1KGPc { + background-color: #0b8750; + } + + /* CALENDAR */ + .CalendarDay-day-2TMXA, .CalendarDays-days-girjM { + -webkit-box-flex: 1; + -webkit-flex: 1 0 14.28%; + flex: 1 0 14.28%; + overflow: hidden; + min-height: 70px; + border-bottom: 1px solid hsla(0,0%,100%,.08); + border-left: 1px solid hsla(0,0%,100%,.08); + border-right: 1px solid hsla(0,0%,100%,.08); + } + .CalendarDay-dayOfMonth-2CzdW { + border-bottom: 1px solid hsla(0,0%,100%,.08); + background-color: rgba(0, 0, 0, .25); + } + .DayOfWeek-dayOfWeek--jS1P { + background-color: hsla(0,0%,100%,.08); + } + .CalendarDay-isToday-1rFJO { + background-color: hsla(0,0%,100%,.08) !important; + } + + /* SETTINGS */ + /* TEXT */ + .Settings-summary-1BIsi { + color: #fff; + } + /* PROFILES/INDEXERS/DL-CLIENTS/IMPORT-LIST/CONNECTIONS */ + .Card-card-SvrkG { + background-color: rgba(0, 0, 0, .25); + box-shadow: 0 0 10px 1px #000000; + color: #fff; + } + .LanguageProfileItem-languageProfileItem-18XGg { + border: none; + background: rgba(0, 0, 0, 0.25); +} + + .QualityProfiles-addQualityProfile-2q4Re { + background-color: rgba(0, 0, 0, .25); + border: none; + color: #c2c6c8; + } + .QualityProfiles-center-3qTb_, .LanguageProfiles-center-18sh2, + .MetadataProfiles-center-dOatB, .Indexers-center-3HUez, .Restrictions-center-3cS8T, .DownloadClients-center-30cx9, .ImportLists-center-17Qdu, .Notifications-center-13jM2 { + background-color: transparent; + border: none; + color: #c2c6c8; + } + .KeyValueListInputItem-keyInput-3YYEs, .KeyValueListInputItem-valueInput-3zlQA { + border: none; + background: transparent; + color: #FFF; +} + .Indexers-center-3HUez, .Restrictions-center-3cS8T, .DownloadClients-center-30cx9, .ImportLists-center-17Qdu, .Notifications-center-13jM2 { + display: inline-block; + padding: 15px 20px 15px; + border-radius: 4px; + } + /* CONNECTIONS */ + .Label-danger-1rVtt.Label-outline-2ZP8n { + color: #FFF; + background-color: #f05050; + } + /* EDIT QUALITY PROFILES */ + .QualityProfileItem-qualityProfileItem-VFp-W, .QualityProfileItemGroup-qualityProfileItemGroup-2U1l5 { + border: none; + background-color: rgba(0, 0, 0, .25); + color: #FFF; + } + .QualityProfileItemGroup-qualityProfileItemGroup-2U1l5.QualityProfileItemGroup-editGroups-2KzDp { + background: rgba(0, 0, 0, 0.25); + } + +/* Readarr */ + + /* Library */ + + .AuthorIndexPoster-link-2tsK2, .AuthorIndexPoster-title-10O0m { + background-color: rgba(255, 255, 255, 0.08); + } + /* Add New*/ + .AddNewAuthorSearchResult-underlay-snqgD, .AddNewBookSearchResult-underlay-2zx_k { + background-color: transparent; + } + .AddNewAuthorSearchResult-underlay-snqgD:hover, .AddNewBookSearchResult-underlay-2zx_k:hover { + background-color: hsla(0,0%,100%,.08); + color: inherit; + text-decoration: none; + } + /*Author Page*/ + .AuthorDetails-tab-eL4hG { + color: #FFF; + } + .AuthorIndexBanner-title-1PHcC { + background-color: hsla(0,0%,100%,.08); + } + .AuthorIndexOverview-container-3t7QV:hover .AuthorIndexOverview-content-1v93V { + background-color: hsla(0,0%,100%,.08); + } + /*Books Tab*/ + .AuthorDetailsSeason-bookType-4wzA5 { + border: none; + background-color: rgba(0, 0, 0, .25); + } + .BookDetails-selectedTab-3h-l9 { + border-bottom: 4px solid var(--accent-color); + } + .BookshelfBook-book-3kzwe { + border: 1px solid transparent; + background-color: rgba(0, 0, 0, .25) !important;; + } + .BookshelfBook-missingWanted-QRmah { + background-color: #f05050; + color: #fff; + } + /*Series Tab*/ + .AuthorDetailsSeries-bookType-2OKXb{ + border: none; + background-color: rgba(0, 0, 0, .25); + } + .AuthorDetailsSeries-collapseButtonContainer-3Ir3l { + border: none; + background-color: rgba(0, 0, 0, .25); + } + .AuthorDetailsSeries-bookTypeLabel-2WwAO { + color: #FFF; + } + .AuthorDetailsSeries-bookCount-2OuhM { + color: #FFF; + } + /*Search Tab*/ + .MenuButton-menuButton-3nh0N { + color: #FFF; + } + .AuthorDetails-selectedTab-V9sSh { + border-bottom: 4px solid var(--accent-color); + } + .AuthorDetails-metadataMessage-oxZc8 { + color: #eee; + } + .AuthorDetails-metadataMessage-oxZc8 .Link-to-6fmSq { + color: var(--accent-color); + } + .AuthorDetails-metadataMessage-oxZc8 .Link-to-6fmSq:hover { + color: var(--accent-color-hover); + } + /*Specific Book Page*/ + .BookDetails-tab-3ODdT { + color: #FFF; + } + /*Settings*/ + /*Media Management - Root Folders*/ + .RootFolders-center-XcFPy { + border: 1px solid transparent; + background-color: transparent; + color: #c2c6c8; + } + /* General - Log Level*/ + .EnhancedSelectInput-options-3yy65 { + border: 1px solid transparent; + border-radius: 4px; + background-color: #1e1e1e; + } + div[class*='EnhancedSelectInputOption']:hover { + background-color: rgba(255, 255, 255, 0.08); + color: #fff; + } + div[class*='EnhancedSelectInputOption'] { + background-color: #1e1e1e; + color: #fff; + } + diff --git a/CSS/themes/readarr/space-gray.css b/CSS/themes/readarr/space-gray.css new file mode 100644 index 00000000..a49268ef --- /dev/null +++ b/CSS/themes/readarr/space-gray.css @@ -0,0 +1,31 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* READARR SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/readarr/readarr-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + + --calendar-Downloading: #7a43b6; + --calendar-Downloaded: #27c24c; + --calendar-Unreleased: #06f; + --calendar-Partial: orange; + --calendar-Unmonitored: #adadad; + --calendar-Missing: #f05050; + + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/requestrr/aquamarine.css b/CSS/themes/requestrr/aquamarine.css new file mode 100644 index 00000000..3c49e15f --- /dev/null +++ b/CSS/themes/requestrr/aquamarine.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* REQUESTRR AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/requestrr/requestrr-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; + --text-color: #eee; + --text-color-faded: #ddd; +} diff --git a/CSS/themes/requestrr/dark.css b/CSS/themes/requestrr/dark.css new file mode 100644 index 00000000..a5573a78 --- /dev/null +++ b/CSS/themes/requestrr/dark.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* REQUESTRR DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/requestrr/requestrr-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.25); + --text-color: #eee; + --text-color-faded: #ddd; + } \ No newline at end of file diff --git a/CSS/themes/requestrr/hotline.css b/CSS/themes/requestrr/hotline.css new file mode 100644 index 00000000..65a5d9a4 --- /dev/null +++ b/CSS/themes/requestrr/hotline.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* REQUESTRR HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/requestrr/requestrr-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --text-color: #eee; + --text-color-faded: #ddd; +} \ No newline at end of file diff --git a/CSS/themes/requestrr/organizr-dark.css b/CSS/themes/requestrr/organizr-dark.css new file mode 100644 index 00000000..ec7ff5bb --- /dev/null +++ b/CSS/themes/requestrr/organizr-dark.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* REQUESTRR ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/requestrr/requestrr-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --text-color: #eee; + --text-color-faded: #ddd; + } \ No newline at end of file diff --git a/CSS/themes/requestrr/plex.css b/CSS/themes/requestrr/plex.css new file mode 100644 index 00000000..6adb62cb --- /dev/null +++ b/CSS/themes/requestrr/plex.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* REQUESTRR PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/requestrr/requestrr-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --text-color: #eee; + --text-color-faded: #ddd; + } \ No newline at end of file diff --git a/CSS/themes/requestrr/requestrr-base.css b/CSS/themes/requestrr/requestrr-base.css new file mode 100644 index 00000000..78df52fc --- /dev/null +++ b/CSS/themes/requestrr/requestrr-base.css @@ -0,0 +1,276 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + + +body { + color: var(--text-color); + background: var(--main-bg-color); + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + color: var(--text-color); +} +.text-muted, .form-control-label { + color: var(--text-color-faded) !important; +} +.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link { + color: white; +} +.navbar-light .navbar-nav .nav-link { + color: var(--text-color); +} +.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { + color: var(--text-color-faded); + background: rgba(255, 255, 255, 0.08); +} +@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; +} +} +@media (max-width: 767.98px) { +.navbar-collapse.collapsing, .navbar-collapse.show { + background: var(--modal-bg-color); + box-shadow: 0 50px 100px rgba(0, 0, 0, 0.1), 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0,0,0,.1); +} +} +@media (max-width: 767.98px) { +.navbar-nav .nav-link { + color: var(--text-color) !important; +} +} +#sidenav-main > div > div > ul.mb-md-3.navbar-nav > li:nth-child(3) > a > i { + color: white !important; +} + +.fade { + -webkit-transition: opacity .15s linear; + transition: opacity .15s linear; + background: rgba(0, 0, 0, 0.15) !important; +} +.bg-secondary { + background-color: rgba(0, 0, 0, 0)!important; +} +.bg-gradient-default { + background: none !important; +} +.card-profile-image img, .shadow { + box-shadow: 0 0 2rem 0 rgba(0,0,0,.15) !important; +} +.bg-white,.footer { + background-color: rgba(0, 0, 0, 0.25) !important; +} +.footer { + padding-left: 15px; +} + +/* Logo */ + +#sidenav-main > div > a::before { + content: ""; + background: url('../static/media/requestrr.1e4722c9.svg') no-repeat; + background-size: 200px; + width: 200px; + height: 36px; + display: block; +} +.navbar-brand-img { + display: none; +} +@media (max-width: 767.98px){ +.navbar-collapse .collapse-brand img { + display: none; +} +} +@media (max-width: 767.98px){ +#sidenav-main > div > div > div > div > div.collapse-brand.col-6 > a::before { + content: ""; + background: url('../static/media/requestrr.1e4722c9.svg') no-repeat; + background-size: 200px; + width: 200px; + height: 36px; + display: block; + } +} + +/* FORMS */ +.form-control:disabled, .form-control[readonly] { + background-color: rgba(255, 255, 255, 0.1); + opacity: 1; + border: 1px solid transparent; + color: gray; +} +.form-control-alternative, .has-danger .form-control { + background: rgba(0, 0, 0, 0.25); + background-color: rgba(0, 0, 0, 0.25); +} +.form-control-alternative:focus { + background: rgba(0, 0, 0, 0.5); +} +.form-control:focus { + color: #fff; +} +.has-success .form-control { + background-color: rgba(0, 0, 0, 0.5); +} +.form-control { + color: var(--text-color); + border: 1px solid transparent; +} + /* Drop down*/ + .react-dropdown-select.dropdown .react-dropdown-select-item-selected { + background: var(--accent-color) !important; + color: #fff!important; + } + .react-dropdown-select.dropdown div[role=list] span { + background-color: #fff; + color: #000000; + } + .react-dropdown-select.dropdown div[role=list] span:focus, .react-dropdown-select.dropdown div[role=list] span:hover { + color: #000000; + background-color: rgba(0, 0, 0, 0.2); + } + + .react-dropdown-select.dropdown { + color: var(--text-color); + background-color: rgba(0, 0, 0, 0.25); + + } +::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: var(--text-color) !important; +} +::-webkit-input-placeholder:focus { /* Chrome/Opera/Safari */ + color: blue !important; +} +::-moz-placeholder { /* Firefox 19+ */ + color: var(--text-color) !important; +} +:-ms-input-placeholder { /* IE 10+ */ + color: var(--text-color) !important; +} +:-moz-placeholder { /* Firefox 18- */ + color: var(--text-color) !important; +} + +/* Buttons */ +.custom-checkbox .custom-control-input:checked~.custom-control-label:before { + background-color: var(--accent-color); + border-color: var(--accent-color); +} +.btn-primary, .btn-primary:hover { + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); +} +.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { + color: #fff; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} +.btn-default, .btn-default:hover { + color: #fff; + background-color: rgba(255, 255, 255, 0.25); + border-color: transparent; +} +.btn-default:not(:disabled):not(.disabled).active, .btn-default:not(:disabled):not(.disabled):active, .show>.btn-default.dropdown-toggle { + color: #fff; + background-color: rgba(0, 0, 0, 0.26); + border-color: transparent; +} +.btn-default.disabled, .btn-default:disabled { + color: #fff; + background-color: rgba(255, 255, 255, 0.15); + border-color: transparent; + opacity: .5; +} +.btn-info.disabled, .btn-info:disabled { + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); +} +.btn-info, .btn-info:hover { + color: #fff; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +/* Login page*/ + +.bg-gradient-info { + background: var(--main-bg-color) !important; +} +@media (min-width: 1200px) { +.separator-skew { + height: 70px; + display: none; +} +} +#root > div > div.mt--8.pb-5.container > div > div > div { + background: rgba(0, 0, 0, 0.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 { + background: rgba(0, 0, 0, .25) !important; + border: 10px solid transparent; +} +.input-group-text { + color: var(--text-color); + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid transparent !important; +} +.input-group-prepend { + margin-right: 0px; +} +#root > div > div.header.bg-gradient-info.py-7.py-lg-8 > div.separator.separator-bottom.separator-skew.zindex-100 > svg > polygon { + display:none; +} + +/* Scrollbar */ + @media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} + ::-webkit-scrollbar { + width: 14px; + } + ::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0,0%,100%,.2); + background-clip: padding-box; + } + ::-webkit-scrollbar-track { + background-color: transparent; + } + ::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0,0%,100%,.5); + background-clip: padding-box; + } \ No newline at end of file diff --git a/CSS/themes/requestrr/space-gray.css b/CSS/themes/requestrr/space-gray.css new file mode 100644 index 00000000..19a2baae --- /dev/null +++ b/CSS/themes/requestrr/space-gray.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RADARR SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/requestrr/requestrr-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --text-color: #eee; + --text-color-faded: #ddd; +} diff --git a/CSS/themes/resilio-sync/aquamarine.css b/CSS/themes/resilio-sync/aquamarine.css new file mode 100644 index 00000000..9026a87c --- /dev/null +++ b/CSS/themes/resilio-sync/aquamarine.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RESILIO-SYNC AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/resilio-sync/resilio-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --accent-color: #12afa0; + --accent-color-hover: #fff; + --text: #eee; + --text-hover: #fff; + --link-color: #12afa0; +} \ No newline at end of file diff --git a/CSS/themes/resilio-sync/dark.css b/CSS/themes/resilio-sync/dark.css new file mode 100644 index 00000000..ae95c2e1 --- /dev/null +++ b/CSS/themes/resilio-sync/dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RESILIO-SYNC DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/resilio-sync/resilio-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #fff; + --accent-color-hover: rgba(255, 255, 255, 0.45); + --text: #eee; + --text-hover: #fff; + --link-hover: rgba(255, 255, 255, 0.45); +} \ No newline at end of file diff --git a/CSS/themes/resilio-sync/hotline.css b/CSS/themes/resilio-sync/hotline.css new file mode 100644 index 00000000..7aedbeea --- /dev/null +++ b/CSS/themes/resilio-sync/hotline.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RESILIO-SYNC HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/resilio-sync/resilio-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --text: #eee; + --text-hover: #fff; + --link-hover: #F44336; +} \ No newline at end of file diff --git a/CSS/themes/resilio-sync/organizr-dark.css b/CSS/themes/resilio-sync/organizr-dark.css new file mode 100644 index 00000000..de11c8a5 --- /dev/null +++ b/CSS/themes/resilio-sync/organizr-dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RESILIO-SYNC ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/resilio-sync/resilio-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: #2a90bd; + --button-text: #eee; + --accent-color:#2cabe3; + --accent-color-hover: #fff; + --text:#96a2b4; + --text-hover: #fff; + --link-color: #2cabe3; +} \ No newline at end of file diff --git a/CSS/themes/resilio-sync/plex.css b/CSS/themes/resilio-sync/plex.css new file mode 100644 index 00000000..cdc8317f --- /dev/null +++ b/CSS/themes/resilio-sync/plex.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RESILIO-SYNC PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/resilio-sync/resilio-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --text: #eee; + --text-hover: #fff; + --link-color:#fff; +} \ No newline at end of file diff --git a/CSS/themes/resilio-sync/resilio-base.css b/CSS/themes/resilio-sync/resilio-base.css new file mode 100644 index 00000000..1eae2b21 --- /dev/null +++ b/CSS/themes/resilio-sync/resilio-base.css @@ -0,0 +1,654 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +@import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css); + +body, +.tableScrollContainer, +.settings-tabs-wrapper .settings-tabs-container { + background: var(--main-bg-color); +} + +a { + color: var(--link-color); +} + +a:hover { + color: #fff; +} + +* { + outline: none !important; +} + +/* Scrollbar */ +@media only screen and (min-width: 768px) { + html { + height: 100%; + width: 100%; + overflow: hidden; + } + + body { + overflow-y: auto; + height: 100%; + background: var(--main-bg-color) + } +} + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .2); + background-clip: padding-box; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb:hover { + min-height: 50px; + border: 3px solid transparent; + border-radius: 8px; + background-color: hsla(0, 0%, 100%, .5); + background-clip: padding-box; +} + +/* TEXT */ +body, +#onboarding-dark #page-main, +p, +h1, +h2, +h3, +h4, +h5, +h6, +#choose-product-dialog .choose-title h1, +label.control-label, +.emptyMessage, +.bt-navbar #choose-share-type-menu .container-fluid .menu-item h2, +.bt-navbar .choose-dropdown-menu .container-fluid .menu-item h2, +UL.jqueryFileTree A, +.settings-tabs-wrapper .settings-tabs-container, +.bt-checkbox label, +.bt-radio label, +.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button, +#licenses-tab #unlicensed-container h1, +#licenses-tab #unlicensed-container .unlicensed-text, +#support-tab #page-menu .support-content>a h5, +#support-tab #page-menu .support-content>button h5, +#support-tab #page-menu .support-content>a p, +.modal-header .transfer-path .labelContainer .secondaryLine, +.transfer-table .transfer-row .nameLabel, +.dropdown-menu li a { + color: var(--text); +} + +/* ACCENTS */ +#choose-product-dialog .product-container .product:hover { + border-color: var(--accent-color); +} + +.text-success { + color: #4CAF50; +} + +#historyContainer .table-filter-panel .filter-item.active, +.resizableTableContainer .table-filter-panel .filter-item.active, +.tableContainerWithFilterPanel .table-filter-panel .filter-item.active { + color: var(--accent-color) +} + +/* NAVBAR */ +.bt-navbar { + background-color: rgb(0 0 0 / 25%); +} + +.bt-navbar .btn.dropdown-toggle { + background-color: rgb(255 255 255 / 8%); +} + +.bt-navbar .btn.dropdown-toggle:hover { + background-color: rgb(255 255 255 / 16%); +} + +.bt-navbar .btn.btn-tab.active, +.bt-navbar .btn.btn-tab:active { + background-color: rgb(0 0 0 / 25%); + border-bottom-color: var(--accent-color); +} + +.bt-navbar .btn:hover { + background-color: rgb(255 255 255 / 8%) !important; +} + +.bt-navbar .btn#try-pro-button { + background-color: rgb(0 0 0 / 50%); + color: var(--button-text); +} + +.bt-navbar .btn#try-pro-button:hover { + background-color: rgb(255 255 255 / 8%); +} + +.bt-navbar .btn.btn-tab { + background: transparent; +} + +/* SIDE MENU */ +/* DROPDOWN MENU */ +.bt-navbar #choose-share-type-menu, +.bt-navbar .choose-dropdown-menu { + background: var(--modal-bg-color); +} + +.dropdown-menu { + background-color: var(--modal-bg-color); + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .15); + border-radius: 2px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + box-shadow: 0 6px 12px rgba(0, 0, 0, .175); +} + +.dropdown-menu { + background: var(--modal-bg-color); + border: 1px solid rgba(255, 255, 255, .1); + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .2); + box-shadow: 0 6px 12px rgba(0, 0, 0, .2); +} + +.dropdown-menu li a:focus, +.dropdown-menu li a:hover { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +.sync-level .add-folder-mode .option-text { + color: var(--text-hover); +} + +.sync-level .add-folder-mode .option-description { + color: var(--text); + white-space: normal; +} + +.sync-level .add-folder-mode li.selected a { + background-color: rgb(0 0 0 / 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); +} + +.sync-level .add-folder-mode .btn-group { + background-color: transparent !important; +} + +button.selectpicker.btn-default { + border-color: #ccc0 !important; + color: var(--text) !important; + background-color: rgb(0 0 0 / 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; +} + +.animating { + background-color: transparent !important; +} + +/* ICONS */ +.mycon.mycon-folder-rw, +.mycon.mycon-folder-owner, +.mycon.mycon-folder-encrypted, +.mycon.mycon-file, +.mycon.mycon-plus { + background-image: none !important; +} + +.mycon.mycon-folder-rw:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f07b"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.mycon.mycon-folder-owner:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f65e"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.mycon.mycon-folder-encrypted:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f023"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.mycon.mycon-file:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f064"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.mycon.mycon-plus:before { + font-family: "Font Awesome 5 Free"; + font-size: 24px; + content: "\f0c1"; + font-weight: bold; + width: 24px; + height: 24px; + margin-left: 5px; + color: var(--text); + font-style: normal; +} + +.bt-navbar #choose-share-type-menu .container-fluid .menu-item:focus, +.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%); + +} + +.bt-navbar #choose-share-type-menu .container-fluid .menu-item .menu-item-description:hover, +.bt-navbar .choose-dropdown-menu .container-fluid .menu-item .menu-item-description:hover { + margin-left: 6px; + padding-top: 4px; + color: var(--text-hover); +} + +.bt-navbar #choose-share-type-menu .arrow, +.bt-navbar .choose-dropdown-menu .arrow { + background: var(--modal-bg-color); +} + +.popout-parent { + background: var(--modal-bg-color); +} + +.context-menu li a:focus, +.context-menu li a:hover { + background-color: rgb(255 255 255 / 8%); +} + +.context-notification .context-notification-inner { + background: var(--modal-bg-color); +} + +#general-settings #languagedrop { + background-color: rgb(0 0 0 / 25%); + border: transparent; +} + +.popout-anchor.popout-open { + color: var(--text-hover); +} + +/* MODALS */ +.modal-header, +.modal-footer { + background: var(--modal-bg-color); + color: var(--text); +} + +.modal-content, +.modal-body, +.modal-body .fileTreeContainer, +.modal-page { + color: var(--text); + background: var(--modal-bg-color); +} + +.modal-body .horizontal-separator .horizontal-separator-text { + background-color: var(--modal-bg-color); + color: var(--text); +} + +#choose-product-dialog .product-container .product { + background-color: rgb(255 255 255 / 0.08); + border: 1px solid transparent; +} + +.modal-header .close:hover { + background: rgb(255 255 255 / 8%); +} + +ul.jqueryFileTree a.active, +ul.jqueryFileTree a:hover { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +.modal-filter:before, +.modal-input:before { + background: -owg-linear-gradient(left, transparent, transparent); + background: transparent !important; + background: -moz-linear-gradient(left, transparent, transparent); + background: -o-linear-gradient(left, transparent, transparent); + background: linear-gradient(left, transparent, transparent); +} + +.nav-tabs.nav-sub-tabs { + background-color: transparent; + border-bottom-color: rgb(255 255 255 / .1); +} + +#file-sharing-content .shareOptionsContainer .shareOption:hover, +#sharing-content .shareOptionsContainer .shareOption:hover, +.sharing-dialog-content .shareOptionsContainer .shareOption:hover { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +#sharing-content .nav-tabs.nav-sub-tabs>li { + background-color: var(--modal-bg-color); +} + +#sharing-content .nav-tabs.nav-sub-tabs>li>a { + border: 1px solid #cacaca; + color: #606060; + background: white; +} + +#sharing-content .nav-tabs.nav-sub-tabs>li.active a, +.nav-tabs.nav-sub-tabs>li.active a:focus, +.nav-tabs.nav-sub-tabs>li.active a:hover { + background: var(--button-color-hover) !important; + border: 1px solid var(--button-color-hover); + color: var(--button-text) +} + +.activity-filter.open, +.main-filter.open, +.modal-filter.open, +.modal-input.open { + background: var(--main-bg-color) !important; +} + +.modal-header .transfer-path .labelContainer { + border-left: 1px solid rgb(255 255 255 / .1); +} + +.modal-filter .btn, +.modal-input .btn { + background: transparent; +} + +.modal-filter .btn:hover, +.modal-input .btn:focus, +.modal-filter animating { + background: rgb(255 255 255 / .08) !important; +} + +/* PAGES */ +#archive-onboarding.fixed .tutorial-background, +#onboarding-dark.fixed .tutorial-background, +#syncall-tutorial.fixed .tutorial-background { + background-color: var(--main-bg-color); + color: var(--text); +} + +#historyContainer .table-filter-panel, +.resizableTableContainer .table-filter-panel, +.tableContainerWithFilterPanel .table-filter-panel { + background-color: rgb(0 0 0 / 25%); + border-bottom: 1px solid rgb(255 255 255 / 10%); +} + +.section-header { + border-bottom: 1px solid rgb(255 255 255 / .1); +} + +/* FOOTER */ +#sync-core-state { + background-color: rgb(0 0 0 / 50%); + border-top: 1px solid rgb(255 255 255 / 10%); +} + +#statusPanel { + background: var(--modal-bg-color); +} + +.status-panel-shown #statusPanel { + border-top: 1px solid rgb(255 255 255 / 20%); +} + +#statusPanel .nav-pills a.tab-button .header, +#statusPanel .nav-pills a.tab-button .value, +#statusPanel .nav-pills a.tab-button span[class$=-speed-label] { + color: var(--text); +} + +#statusPanel .nav-pills li { + border-bottom: 1px solid rgb(255 255 255 / .1); +} + +#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%); +} + +#statusPanel .tab-content { + background-color: transparent; +} + +#statusPanel .chart-wrapper { + background-color: rgb(0 0 0 / 25%); + border-right: 1px solid rgba(255, 255, 255, .1); +} + +.resizableTableContainer .tableHeaderContainer { + border-bottom: 1px solid rgba(255, 255, 255, .1); + background: var(--modal-bg-color); +} + +#statusPanel .chart-c3 .c3-tooltip { + background-color: #000; + opacity: .7; + border-radius: 4px; + box-shadow: none; +} + +.c3-grid line { + stroke: var(--text); +} + +.c3 text { + fill: var(--text); +} + + +/* SETTINGS */ +.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button.active { + background-color: rgb(0 0 0 / 25%); + color: var(--accent-color); +} + +.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) { + background-color: rgb(255 255 255 / 8%); +} + +.settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) .txt-button { + color: var(--text-hover); +} + +#support-tab #page-menu .support-content>a, +#support-tab #page-menu .support-content>button { + background-color: transparent; +} + +#support-tab #page-menu .support-content>a:hover h5, +#support-tab #page-menu .support-content>a:hover p, +#support-tab #page-menu .support-content>button:hover h5, +#support-tab #page-menu .support-content>button:hover p { + color: var(--text-hover); +} + +.settings-tabs-wrapper .settings-tabs-buttons { + border-right: 1px solid rgb(255 255 255 / 10%); + background: rgb(0 0 0 / 25%); +} + +/* IDENTITY */ +#my-devices .my-devices .single-my-device:hover:not(.disabled) { + background-color: rgb(255 255 255 / 8%); +} + +#my-devices .my-devices .link-device-block #device-to-qr .device-link { + color: var(--accent-color); +} + +#my-devices .my-devices .link-device-block #device-to-qr:hover:not(:disabled) .device-link-text { + text-decoration: underline; + color: var(--text-hover); +} + +#my-devices .my-devices .info-button:hover { + background-color: var(--button-color-hover); + color: var(--button-text); +} + +/* BUTTONS */ +.btn, +#support-tab #page-feedback-form .back-button { + border-color: var(--button-color); + background: var(--button-color); + color: var(--button-text); + margin-right: 5px; + box-shadow: none; + border: transparent; + border-radius: 2px; +} + +.btn:hover, +.btn:focus, +.btn:active, +.btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, +#support-tab #page-feedback-form .back-button:hover { + border-color: var(--button-color-hover); + color: var(--text-hover); + background-color: var(--button-color-hover); + box-shadow: none !important; +} + +.transfer-table .transfer-row .optionsColumn .options-button { + background-color: transparent; + color: var(--button-text); +} + +.transfer-table .transfer-row .optionsColumn .options-button.active, +.transfer-table .transfer-row .optionsColumn .options-button:hover { + background-color: rgb(255 255 255 / 8%); +} + +/* FORMS */ +.form-control { + color: var(--text) !important; + background-color: rgba(0, 0, 0, .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; + color: var(--text-hover) !important; +} + +/* TABLE */ +#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%); + color: var(--text-hover); +} + +.table-hover>tbody>tr.active, +.table-hover>tbody>tr:hover:not(.no-hover) { + background-color: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +.table>thead>tr>th { + vertical-align: bottom; + border-bottom: 1px solid rgb(255 255 255 / 10%); + +} + +.table.table-bordered-header thead tr th { + background-color: #fff; + border-right: 1px solid rgb(255 255 255 / 0.1) !important; +} + +.tableScrollContainer .table thead tr th { + background: var(--main-bg-color) !important; +} + +/* PLACEHOLDER TEXT */ +::placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-moz-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-ms-input-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +::-webkit-input-placeholder { + color: var(--text) !important; + opacity: .5; +} \ No newline at end of file diff --git a/CSS/themes/resilio-sync/space-gray.css b/CSS/themes/resilio-sync/space-gray.css new file mode 100644 index 00000000..ef037fba --- /dev/null +++ b/CSS/themes/resilio-sync/space-gray.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RESILIO-SYNC SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/resilio-sync/resilio-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --accent-color: #81a6b7; + --accent-color-hover: #81a6b7; + --text: #eee; + --text-hover: #fff; + --link-color: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/rutorrent/organizr-dark.css b/CSS/themes/rutorrent/organizr-dark.css new file mode 100644 index 00000000..dc46fdcb --- /dev/null +++ b/CSS/themes/rutorrent/organizr-dark.css @@ -0,0 +1,22 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* RUTORRENT ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/rutorrent/rutorrent-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --default-button-color: #2cabe3; + --default-button-color-hover: rgb(44 171 227 / .8); + --progress-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/rutorrent/rutorrent-base.css b/CSS/themes/rutorrent/rutorrent-base.css index 5f29e4a1..64ed8e82 100644 --- a/CSS/themes/rutorrent/rutorrent-base.css +++ b/CSS/themes/rutorrent/rutorrent-base.css @@ -864,11 +864,6 @@ input.Button cursor:pointer; display:inline; font-weight:700; - text-transform:uppercase; - height:21px; - line-height:2px; - margin:0 10px 0 5px; - padding:0; text-shadow:none } @@ -1505,4 +1500,32 @@ div#logoffDlg div.dlg-header { background-image: url(https://raw.githubuserconte background: rgba(0, 0, 0, 0.25) !important; color: #fff !important; outline: none !important; +} + + +#dlgEditRatioRules .rf_rru, #dlgEditRules .rf_rur { + background-color: transparent; +} + + +#dlgEditRatioRules .lf_rru li input.TextboxFocus, #dlgEditRules .lf_rur li input.TextboxFocus { + background-color: rgb(255 255 255 / 25%); + color: #FFF; +} + + #dlgEditRatioRules .lf_rru li input.TextboxNormal, #dlgEditRules .lf_rur li input.TextboxNormal { + background-color: rgb(255 255 255 / .08) !important; + color: #FFF; +} + +.autodl-listbox { + border: 1px solid rgb(255 255 255 / 8%); + background-color: transparent; +} + +#autodl-filters { + width: 800px !important; +} +div#dlgEditRules-header, #dlgEditRatioRules-header, div#dlgEditRules div.dlg-header { + background: rgba(0, 0, 0, 0.25) !important; } \ No newline at end of file diff --git a/CSS/themes/sabnzbd/aquamarine.css b/CSS/themes/sabnzbd/aquamarine.css index 5b9563ac..8f61d484 100644 --- a/CSS/themes/sabnzbd/aquamarine.css +++ b/CSS/themes/sabnzbd/aquamarine.css @@ -17,7 +17,7 @@ --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --settings-accent-color: #FFEB3B; + --settings-accent-color: #12afa0; --nav-button-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --default-button-color: hsla(0,0%,100%,.25); --default-button-color-hover: hsla(0,0%,100%,.3); diff --git a/CSS/themes/sabnzbd/organizr-dark.css b/CSS/themes/sabnzbd/organizr-dark.css new file mode 100644 index 00000000..dec31076 --- /dev/null +++ b/CSS/themes/sabnzbd/organizr-dark.css @@ -0,0 +1,24 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* SABNZBD ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/sabnzbd/sabnzbd-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --settings-accent-color: #2cabe3; + --nav-button-color: #2cabe3; + --default-button-color: #2cabe3; + --default-button-color-hover: rgb(44 171 227 / .8); + --default-button-color-active: rgb(44 171 227 / .8); + } \ No newline at end of file diff --git a/CSS/themes/sonarr/organizr-dark.css b/CSS/themes/sonarr/organizr-dark.css new file mode 100644 index 00000000..3ac90ced --- /dev/null +++ b/CSS/themes/sonarr/organizr-dark.css @@ -0,0 +1,32 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* SONARR ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/sonarr/sonarr-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + + --calendar-tv-Unaired-Premiere: #707cd2; + --calendar-tv-Downloading: #7932ea; + --calendar-tv-Unmonitored: grey; + --calendar-tv-Unaired: #2cabe3; + --calendar-tv-missing: #ff7676; + --calendar-tv-On-Air: #f0ad4e; + --calendar-tv-available: #53e69d; + + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; + --queue-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/sonarr/sonarr-base.css b/CSS/themes/sonarr/sonarr-base.css index e8d39ee0..5f82e4b2 100644 --- a/CSS/themes/sonarr/sonarr-base.css +++ b/CSS/themes/sonarr/sonarr-base.css @@ -704,7 +704,7 @@ pre { .ModalHeader\/modalHeader\/gpcvG { background: var(--modal-bg-color); color: #fff; - border-bottom: 1px solid hsla(0,0%,100%,.08); + border-bottom: var(--accent-color); } .ModalContent\/modalContent\/-txrl { background: var(--modal-bg-color); @@ -713,7 +713,7 @@ pre { .ModalFooter\/modalFooter\/1N5Ku { background: var(--modal-bg-color); color: #fff; - border-top: 1px solid hsla(0,0%,100%,.08); + border-top: 1px solid var(--accent-color); } .ModalContent\/closeButton\/37Puk:hover { color: #fff; @@ -747,7 +747,7 @@ pre { } /* SEARCH DROPDOWN HEADER */ - .SeriesSearchInput\/seriesContainer\/2yDTR { + .SeriesSearchInput\/containerOpen\/3F8xe .SeriesSearchInput\/seriesContainer\/2yDTR { border: none !important; background: var(--modal-bg-color); color: #fff !important; @@ -769,11 +769,8 @@ pre { /* SIDE MENU */ - .PageSidebar\/sidebar\/2UXc0 { - background-color: rgba(0, 0, 0, .45); - } .PageSidebar\/sidebarContainer\/3Hxpq { - background-color: rgba(0, 0, 0, .45) !important; + background-color: rgba(0, 0, 0, .25); } .PageSidebar\/sidebar\/3IOcI { background-color: transparent; @@ -862,16 +859,23 @@ pre { background-color: rgba(0, 0, 0, .25) !important; } .Popover\/title\/326tA, .SeasonInfo\/title\/1tid_, .Popover\/body\/10Yh7 { - background-color: #232323 !important; + background: var(--modal-bg-color) !important; } .Tooltip\/tooltipContainer\/2693s { color: #fff; } + .Tooltip\/tooltip\/3HJXy.Tooltip\/inverse\/yMvcm { + background: var(--modal-bg-color); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + } + .Tooltip\/bottom\/3Ewbi.Tooltip\/inverse\/yMvcm { + border-bottom-color: #fff; + } .Tooltip\/bottom\/3Ewbi.Tooltip\/default\/2NTKh { - border-bottom-color: #232323 !important; - } - Tooltip\/right\/2MxTa.Tooltip\/default\/2NTKh { - border-right-color: #232323 !important; + border-bottom-color: #fff !important; + } + .Tooltip\/right\/2MxTa.Tooltip\/default\/2NTKh { + border-right-color: #fff !important; } .EpisodeTitleLink\/link\/3ynTw:hover { color: #ffffff; @@ -968,7 +972,7 @@ pre { color: #fff; } .EnhancedSelectInput\/options\/3yy65 { - border: 1px solid #dde6e9; + border: 1px solid #1e1e1e; border-radius: 4px; background-color: #1e1e1e; } @@ -1023,7 +1027,7 @@ pre { .FieldSet\/legend\/3x6NF { color: #FFF; - border-bottom: 1px solid hsla(0,0%,100%,.08); + border-bottom: 1px solid var(--accent-color); } .TableRow\/row\/33xJE:hover { background-color: hsla(0,0%,100%,.08); @@ -1035,7 +1039,10 @@ pre { .ImportSeriesSelectSeries\/button\/3CL3L { border: none !important; background-color: rgba(0, 0, 0, .25) !important; - } + } + .ImportSeriesSearchResult\/series\/2BXMC:hover { + background-color: rgba(0, 0, 0, 0.25); + } .ImportSeriesSelectSeries\/content\/3oSDj, .ImportSeriesSelectSeries\/searchIconContainer\/1wOES { border: none !important; background-color: #323232 !important; @@ -1110,7 +1117,11 @@ pre { .AgendaEvent\/event\/2a83A:hover { background-color: hsla(0,0%,100%,.08) !important; } - +/*QUEUE PAGE */ + /* Manual Import*/ +.SelectEpisodeModalContent\/path\/1Okqk { + color: #eee; +} /* SETTINGS */ .Settings\/summary\/3KPAv { @@ -1161,14 +1172,23 @@ pre { background-color: transparent; border: none; color: #c2c6c8; - } + } + + /* INDEXERS */ /* DOWNLOAD CLIENTS */ .DownloadClients\/center\/FvACx { background-color: transparent; border: none; color: #c2c6c8; - } + } + + /*INPORT LISTS */ + .ImportLists\/center\/17Qdu{ + background-color: transparent; + border: none; + color: #c2c6c8; + } /* CONNECTIONS */ .Notifications\/center\/8iwmy { @@ -1182,7 +1202,7 @@ pre { border-color: transparent; background-color: rgba(0, 0, 0, 0.25); color: #FFC107; -} + } /* Login Page */ @@ -1201,3 +1221,6 @@ pre { .FilterBuilderRow\/filterRow\/1ozij:hover { background-color: transparent; } +.CustomFilter\/customFilter\/zBSMd:hover { + background-color: hsla(0,0%,100%,.08); +} diff --git a/CSS/themes/synclounge/organizr-dark.css b/CSS/themes/synclounge/organizr-dark.css new file mode 100644 index 00000000..a50de3f3 --- /dev/null +++ b/CSS/themes/synclounge/organizr-dark.css @@ -0,0 +1,22 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* SYNCLOUNGE ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/synclounge/synclounge-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --default-button-color: #2cabe3; + --default-button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/tautulli/aquamarine.css b/CSS/themes/tautulli/aquamarine.css index 8a4c1bda..c2ea2040 100644 --- a/CSS/themes/tautulli/aquamarine.css +++ b/CSS/themes/tautulli/aquamarine.css @@ -16,4 +16,8 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --accent-color: #009688; + --accent-color-hover: #12afa0; } \ No newline at end of file diff --git a/CSS/themes/tautulli/dark.css b/CSS/themes/tautulli/dark.css index 2717adf0..67543a57 100644 --- a/CSS/themes/tautulli/dark.css +++ b/CSS/themes/tautulli/dark.css @@ -16,4 +16,8 @@ :root { --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: rgba(255, 255, 255, 0.25); + --accent-color-hover: rgba(255, 255, 255, 0.45); } \ No newline at end of file diff --git a/CSS/themes/tautulli/hotline.css b/CSS/themes/tautulli/hotline.css index ee47e4f5..85f8e739 100644 --- a/CSS/themes/tautulli/hotline.css +++ b/CSS/themes/tautulli/hotline.css @@ -16,4 +16,8 @@ :root { --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --accent-color: #F44336; + --accent-color-hover: #0b3161; } \ No newline at end of file diff --git a/CSS/themes/tautulli/organizr-dark.css b/CSS/themes/tautulli/organizr-dark.css new file mode 100644 index 00000000..56bb082d --- /dev/null +++ b/CSS/themes/tautulli/organizr-dark.css @@ -0,0 +1,23 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* TAUTULLI DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/tautulli/tautulli-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --accent-color: #2cabe3; + --accent-color-hover: white; +} \ No newline at end of file diff --git a/CSS/themes/tautulli/plex.css b/CSS/themes/tautulli/plex.css index 3d462f18..a3a540f6 100644 --- a/CSS/themes/tautulli/plex.css +++ b/CSS/themes/tautulli/plex.css @@ -16,4 +16,8 @@ :root { --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; - } \ No newline at end of file + --button-color: #cc7b19; + --button-color-hover: #e59029; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; +} \ No newline at end of file diff --git a/CSS/themes/tautulli/space-gray.css b/CSS/themes/tautulli/space-gray.css index dbc4005d..41c7449d 100644 --- a/CSS/themes/tautulli/space-gray.css +++ b/CSS/themes/tautulli/space-gray.css @@ -15,5 +15,9 @@ @import url(https://gilbn.github.io/theme.park/CSS/themes/tautulli/tautulli-base.css); :root { --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --accent-color: #607D8B; + --accent-color-hover: #81a6b7; } \ No newline at end of file diff --git a/CSS/themes/tautulli/tautulli-base.css b/CSS/themes/tautulli/tautulli-base.css index af571847..17e28e65 100644 --- a/CSS/themes/tautulli/tautulli-base.css +++ b/CSS/themes/tautulli/tautulli-base.css @@ -261,11 +261,11 @@ span > a.active, .stacked-configs > li > span > span.active { } .modal-header { background: var(--modal-bg-color); - border-bottom: 1px solid rgba(255, 255, 255, 0.15); + border-bottom: 1px solid var(--accent-color); } .modal-footer { background: var(--modal-bg-color); - border-top: 1px solid rgba(255, 255, 255, 0.15); + border-top: 1px solid var(--accent-color); } .modal-config-section { border-top: 1px solid rgba(255, 255, 255, .08); @@ -326,4 +326,151 @@ span > a.active, .stacked-configs > li > span > span.active { .navbar-collapse.in { box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); } +} +#login-methods .submenu { + background: transparent; +} +.login-container .remember-group { + color: #eee; +} +#login-methods > li.open > div { + color: var(--accent-color); +} + +/* Buttons */ +.btn-bright { + color: #fff; + background-color: var(--button-color); + box-shadow: inset 0 1px 0 var(--button-color); +} +.btn-bright:hover { + color: #fff; + background-color: var(--button-color-hover); + box-shadow: inset 0 1px 0 var(--button-color-hover); +} +.btn-bright:active, .btn-bright.active, .open > .dropdown-toggle.btn-bright, #menu_link_show_advanced_settings.active { + color: #fff; + background-color: var(--button-color-hover); + box-shadow: inset 0 1px 0 var(--button-color-hover); +} +.btn-bright:active:hover, .btn-bright.active:hover, .open > .dropdown-toggle.btn-bright:hover, .btn-bright:active:focus, .btn-bright.active:focus, .open > .dropdown-toggle.btn-bright:focus, .btn-bright:active.focus, .btn-bright.active.focus, .open > .dropdown-toggle.btn-bright.focus { + color: #fff; + background-color: var(--button-color-hover); + box-shadow: inset 0 1px 0 var(--button-color-hover); +} +.btn:focus, .btn.focus, .btn-dark:focus, .btn-dark.focus, .btn-dark:active:focus { + color: #fff; + background-color: var(--button-color-hover) !important; + opacity: .8; +} +.btn-bright.disabled, .btn-bright[disabled], fieldset[disabled] .btn-bright, .btn-bright.disabled:hover, .btn-bright[disabled]:hover, fieldset[disabled] .btn-bright:hover, .btn-bright.disabled:focus, .btn-bright[disabled]:focus, fieldset[disabled] .btn-bright:focus, .btn-bright.disabled.focus, .btn-bright[disabled].focus, fieldset[disabled] .btn-bright.focus, .btn-bright.disabled:active, .btn-bright[disabled]:active, fieldset[disabled] .btn-bright:active, .btn-bright.disabled.active, .btn-bright[disabled].active, fieldset[disabled] .btn-bright.active { + background-color: var(--button-color); + border-color: var(--button-color); +} + +/* Accents */ +.nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus { + color: var(--accent-color); +} +.dashboard-activity-progress .progress-bar { + background-color: var(--accent-color); + background-image: -moz-linear-gradient(top, var(--accent-color-hover), var(--accent-color)); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(var(--accent-color-hover)), to(var(--accent-color))); + background-image: -webkit-linear-gradient(top, var(--accent-color-hover, var(--accent-color))); + background-image: -o-linear-gradient(top, var(--accent-color-hover, var(--accent-color))); + background-image: linear-gradient(to bottom, var(--accent-color-hover, var(--accent-color))); + +} +.dashboard-stats-info-item .sub-count { + color: var(--accent-color); +} +.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { + background-color: var(--accent-color); + border-color: var(--accent-color); +} +a:hover, a:focus { + color: var(--accent-color); +} +table.display td:hover a { + color: var(--accent-color); +} +.user-overview-stats-instance h3, .user-player-instance-playcount h3, .summary-content-title h1, .summary-content-title h1 a { + color: var(--accent-color); +} +.user-info-nav > .active > a { + color: var(--accent-color); +} +a:hover .dashboard-recent-media-poster, a:hover .dashboard-recent-media-cover { + webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.nav-settings > .active > a, .nav-settings > .active > a:hover, .nav-settings > .active > a:focus { + color: var(--accent-color); +} +div.advanced-setting { + border-left: 1px solid var(--accent-color); +} +.docker-setting { + color: var(--accent-color); +} +.modal-body strong, .modal-body strong i.fa { + color: var(--accent-color); +} +.user-info-nav a:hover { + color: var(--accent-color-hover) +} +a:hover .dashboard-activity-poster, a:hover .dashboard-activity-cover { + -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +a:hover .dashboard-stats-poster, a:hover .dashboard-stats-cover, a:hover .dashboard-stats-circle, a:hover .dashboard-stats-square { + -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +a:hover .item-children-poster { + webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.dashboard-activity-terminate-session:hover { + color: var(--accent-color); +} +a .dashboard-activity-metadata-user-thumb:hover { + -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.stream-info .heading { + color: var(--accent-color); +} +a .library-user-instance-box:hover { + -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.summary-navbar-list .breadcrumb a:hover { + color: var(--accent-color); +} +.dashboard-recent-media-metacontainer h3.text-muted a:hover { + color: var(--accent-color); +} +a .poster-face:hover, a .cover-face:hover, a .users-poster-face:hover { + -webkit-box-shadow: inset 0 0 0 2px var(--accent-color); + -moz-box-shadow: inset 0 0 0 2px var(--accent-color); + box-shadow: inset 0 0 0 2px var(--accent-color); +} +.submenu li { + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} +span > a.active, .stacked-configs > li > span > span.active { + color: var(--accent-color); +} +.accordion li.open .link, .accordion li.open .link i.fa { + color: var(--accent-color); +} +.news-body a:hover { + color: var(--accent-color); } \ No newline at end of file diff --git a/CSS/themes/thelounge/organizr-dark.css b/CSS/themes/thelounge/organizr-dark.css new file mode 100644 index 00000000..58d5743c --- /dev/null +++ b/CSS/themes/thelounge/organizr-dark.css @@ -0,0 +1,30 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* THE LOUNGE DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/thelounge/thelounge-base.css); +:root { + --body-bg-color: #1f1f1f; + --window-bg-color: #1b1b1b; + --button-color: #2cabe3; + --theme-accent: #2cabe3; + --date-marker-color: #e59029; + + --body-color: #f3f3f3; + --body-color-muted: #dedede; + --link-color: #2cabe3; + --button-text-color-hover: #fff; + --upload-progressbar-color: var(--button-color); + --unread-marker-color: #ff7676; + --highlight-bg-color: #4d4332; + --highlight-border-color: #b08c4f; + } \ No newline at end of file diff --git a/CSS/themes/transmission/organizr-dark.css b/CSS/themes/transmission/organizr-dark.css new file mode 100644 index 00000000..e8d3a44c --- /dev/null +++ b/CSS/themes/transmission/organizr-dark.css @@ -0,0 +1,22 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* TRANSMISSION DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/transmission/transmission-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --default-button-color: #2cabe3; + --default-button-color-hover: rgb(44 171 227 / .8); + --progress-color: #2cabe3; + } \ No newline at end of file diff --git a/CSS/themes/transmission/transmission-base.css b/CSS/themes/transmission/transmission-base.css index 512b356f..176691fb 100644 --- a/CSS/themes/transmission/transmission-base.css +++ b/CSS/themes/transmission/transmission-base.css @@ -158,14 +158,14 @@ div#toolbar { #statusbar #speed-info #speed-dn-icon:before { font-family: "Font Awesome 5 Free"; font-size: 10px; - content: "\f0d8"; + content: "\f0d7"; font-weight: 900; } #statusbar #speed-info #speed-up-icon {background: none;} #statusbar #speed-info #speed-up-icon:before { font-family: "Font Awesome 5 Free"; font-size: 10px; - content: "\f0d7"; + content: "\f0d8"; font-weight: 900; } ul.torrent_list,ul.torrent_list li.torrent.even {background: rgba(0, 0, 0, 0.25);} diff --git a/CSS/themes/webtools/aquamarine.css b/CSS/themes/webtools/aquamarine.css new file mode 100644 index 00000000..e333dc99 --- /dev/null +++ b/CSS/themes/webtools/aquamarine.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* WEBTOOLS AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/webtools/webtools-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: #009688; + --button-color-hover: #12afa0; + --button-text: #eee; + --accent-color: #12afa0; + --accent-color-hover: #fff; + --text: #eee; + --text-hover: #fff; + --link-color: #12afa0; +} \ No newline at end of file diff --git a/CSS/themes/webtools/dark.css b/CSS/themes/webtools/dark.css new file mode 100644 index 00000000..03749fc7 --- /dev/null +++ b/CSS/themes/webtools/dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* WEBTOOLS DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/webtools/webtools-base.css); +:root { + --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #fff; + --accent-color-hover: rgba(255, 255, 255, 0.45); + --text: #eee; + --text-hover: #fff; + --link-hover: rgba(255, 255, 255, 0.45); +} \ No newline at end of file diff --git a/CSS/themes/webtools/hotline.css b/CSS/themes/webtools/hotline.css new file mode 100644 index 00000000..5bc18465 --- /dev/null +++ b/CSS/themes/webtools/hotline.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* WEBTOOLS HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/webtools/webtools-base.css); +:root { + --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; + --button-color: hsla(0,0%,100%,.15); + --button-color-hover: hsla(0,0%,100%,.30); + --button-text: #eee; + --accent-color: #F44336; + --accent-color-hover: #0b3161; + --text: #eee; + --text-hover: #fff; + --link-hover: #F44336; +} \ No newline at end of file diff --git a/CSS/themes/webtools/organizr-dark.css b/CSS/themes/webtools/organizr-dark.css new file mode 100644 index 00000000..3a75062d --- /dev/null +++ b/CSS/themes/webtools/organizr-dark.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* WEBTOOLS ORGANIZR-DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/webtools/webtools-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: #1b1b1b; + --button-color: #2cabe3; + --button-color-hover: rgb(44 171 227 / .8); + --button-text: #eee; + --accent-color:#2cabe3; + --accent-color-hover: #fff; + --text:#96a2b4; + --text-hover: #fff; + --link-color: #2cabe3; +} \ No newline at end of file diff --git a/CSS/themes/webtools/plex.css b/CSS/themes/webtools/plex.css new file mode 100644 index 00000000..bbb3ed4a --- /dev/null +++ b/CSS/themes/webtools/plex.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* WEBTOOLS PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/webtools/webtools-base.css); +:root { + --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; + --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; + --button-color: #cc7b19; + --button-color-hover: #e59029; + --button-text: #eee; + --accent-color: #e5a00d; + --accent-color-hover: #ffc107; + --text: #eee; + --text-hover: #fff; + --link-color:#fff; +} \ No newline at end of file diff --git a/CSS/themes/webtools/space-gray.css b/CSS/themes/webtools/space-gray.css new file mode 100644 index 00000000..5a633993 --- /dev/null +++ b/CSS/themes/webtools/space-gray.css @@ -0,0 +1,27 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* WEBTOOLS SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/webtools/webtools-base.css); +:root { + --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; + --button-color: #607D8B; + --button-color-hover: #81a6b7; + --button-text: #eee; + --accent-color: #81a6b7; + --accent-color-hover: #81a6b7; + --text: #eee; + --text-hover: #fff; + --link-color: #81a6b7; +} \ No newline at end of file diff --git a/CSS/themes/webtools/webtools-base.css b/CSS/themes/webtools/webtools-base.css new file mode 100644 index 00000000..4f7fee4e --- /dev/null +++ b/CSS/themes/webtools/webtools-base.css @@ -0,0 +1,364 @@ +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +body { + background: var(--main-bg-color); +} + +a, +.language a { + color: var(--link-color); +} + +a:hover { + color: #fff; +} + +#content:before { + background: var(--main-bg-color); +} + +* { + outline: none !important; +} + +/* TEXT */ +body, +.head .title, +.fm .sections .section { + color: var(--text); +} + +/* ACCENTS */ +webtools-loading .webtoolsLoading, +content-loading .contentLoading { + color: var(--accent-color); +} + +.uas .type.active { + background: var(--button-color); + box-shadow: none; +} + +.uas .type.active:hover { + background: var(--button-color-hover); + box-shadow: none; +} + +/* NAVBAR */ +.head { + background-color: rgb(0 0 0 / 0.25); + box-shadow: 0 0 0 0px rgb(0 0 0 / 0%); +} + +.vertical-center { + box-shadow: inset 0px 15px 15px -4px rgb(255 255 0 / 0%); +} + +/* SIDE MENU */ +.menu .toggle { + background: rgb(0 0 0 / .25); + color: var(--accent-color); +} + +.menu { + background-color: rgb(0 0 0 / 25%); + box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); +} + +.menu .item { + background: rgb(255 255 255 / 8%); + color: var(--button-text); + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .0); +} + +.menu .item:hover { + background: rgb(255 255 255 / .16); + color: var(--text-hover); +} + +.menu .item.active { + background: var(--accent-color); + color: var(--button-text); +} + +/* MODALS */ +.ngdialog.ngdialog-theme-default .ngdialog-content { + background-color: var(--modal-bg-color); + color: var(--text) !important; + border: #f05050 5px solid; +} + +.fm .settings { + background: var(--modal-bg-color); + color: var(--text); + Border: 1px solid rgba(0, 0, 0, 0.2); +} + +/* PAGES */ +.sub .settings { + background: rgb(255 255 255 / 25%); +} + +label { + color: var(--button-text); +} + +.sub .rowShow, +.uas .repoContainer .repo, +.uas .typesMenu, +.uas .repoContainer .repo.installed, +.fm .sections .section, +.playlists .userContainer .fileContainer, +.playlists .playlistContainer { + background: rgb(255 255 255 / .08); + box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0); + border: transparent; +} + +.uas .type:hover { + background: rgb(255 255 255 / 8%); + color: var(--text-hover); +} + +.sub .rowShow:hover, +.uas .repoContainer .repo:hover, +.fm .sections .section:hover { + background: rgb(255 255 255 / .16); + box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0); +} + +.expanded:hover { + background: rgb(255 255 255 / .08) !important; + box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0); +} + +.sub .rowShow .lineShow .contentShow .detail { + background: rgb(0 0 0 / 25%); + color: var(--text) !important; +} + +.sub .rowShow .lineShow .contentShow .detail .subItem .download:hover, +.sub .rowShow .lineShow .contentShow .detail .subHeader .selectActions div:hover { + color: var(--text-hover) !important; +} + +.sub .rowShow .lineShow .contentShow .detail .subItem.selected { + background: rgb(0 0 0 / 25%); +} + +.sub .rowShow .lineShow .contentShow .detail .subItem.checked { + background: rgba(255, 255, 255, 0.5); + color: var(--text-hover); +} + +.sub .rowShow .lineShow .contentShow .detail .subItem.selected.checked { + background: var(--accent-color); +} + +.sub .rowShow .lineShow .contentShow .tvshow { + background-color: rgb(255 255 255 / 8%); + color: var(--button-text); +} + +.sub .rowShow .lineShow .contentShow .tvshow:hover { + background-color: rgb(255 255 255 / 16%); + +} + +.sub .rowShow .lineShow .contentShow .loadmore { + background: var(--button-color); + border: solid 6px var(--button-color); + color: var(--button-text); +} + +.sub .rowShow .lineShow .contentShow .tvshowheader div { + background: var(--button-color); + color: var(--button-text); +} + +.sub .rowShow .lineShow .contentShow .tvshowheader div:hover { + background: var(--button-color-hover); + color: var(--button-text); + border: transparent; +} + +.sub .rowShow .lineShow .contentShow .loadmore:hover { + background: var(--button-color-hover); + color: var(--button-text); + border: solid 6px transparent; +} + +.logs .logDetails { + background-color: rgb(255 255 255 / 14%); +} + +.logs .search { + background-color: rgb(255 255 255 / 8%); +} + +.logs .logDetails table tr.danger { + background-color: rgb(244 67 54 / 50%) !important; + color: #fff; +} + +.uas .repoContainer .repo .details .row, +.uas .repoContainer .repo .details .row:nth-child(2n) { + background: rgb(0 0 0 / 25%); + color: var(--text); +} + +/* SETTINGS */ + +/* BUTTONS */ +.btn, +.sub .search .btnSearch, +.logs .logButton, +.uas .uasBtn, +.uas .repoContainer .repo .header .right .installUpdate, +.uas .typesMenu .search .btnSearch, +.btnInput, +.playlists .playlistBtn, +.language .languageActions .langBtn, +.fr .reset, +.logs .search .btnSearch, +.fm button { + border-color: var(--button-color); + background: var(--button-color); + color: var(--button-text); + margin-right: 5px; + box-shadow: none; + border: transparent; +} + +.btn:hover, +.btn:focus, +.btn:active, +.btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, +.show>.btn-primary.dropdown-toggle, +.sub .search .btnSearch:hover, +.sub .search .btnSearch:focus, +.logs .logButton:hover, +.logs .logButton:focus, +.uas .uasBtn:hover, +.uas .uasBtn:focus, +.uas .repoContainer .repo .header .right .installUpdate:hover, +.uas .repoContainer .repo .header .right .installUpdate:focus, +.uas .typesMenu .search .btnSearch:focus, +.uas .typesMenu .search .btnSearch:hover, +.btnInput:hover, +.btnInput:focus, +.playlists .playlistBtn:hover, +.playlists .playlistBtn:focus, +.playlists .playlistBtn:not(.disabled):hover, +.language .languageActions .langBtn:hover, +.fr .reset:hover, +.logs .search .btnSearch:hover, +.logs .search .btnSearch:focus, +.fm button:hover, +.fm button:focus { + border-color: var(--button-color-hover); + color: var(--text-hover); + background-color: var(--button-color-hover); + box-shadow: none !important; +} + +.uas .repoContainer .repo .header .right .delete, +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(3)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(4)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(5)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(6)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(7)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(8)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(9)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(10)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1), +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(11)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1) { + background: #F44336; + color: var(--button-text); + border: #F44336; +} + +.uas .repoContainer .repo .header .right .delete:hover, +.uas .repoContainer .repo .header .right .delete:focus, +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1):focus, +body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.playlistContent>div.topPart>div.buttons.pull-right>div:nth-child(1):hover { + background: #ec2626; + color: var(--button-text); + border: #ec2626; +} + +.playlists .playlistBtn.disabled { + background: var(--button-color); + color: var(--button-text); + border: var(--button-color); + opacity: .5; +} + +.playlists .playlistBtn.disabled:hover { + background: var(--button-color); + color: var(--button-text); + border: var(--button-color); +} + +/* FORMS */ +.form-control, +.sub .search .searchInput, +.uas .manualInstall, +.uas .typesMenu .search .searchInput, +.logs .search .searchInput { + color: var(--text) !important; + background-color: rgba(0, 0, 0, .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, +.sub .search .searchInput:focus, +.uas .manualInstall:focus, +.uas .typesMenu .search .searchInput:focus, +.logs .search .searchInput:focus { + background-color: rgba(0, 0, 0, .5) !important; + color: var(--text-hover) !important; +} + +/* TABLE */ +.info tr:nth-child(2n+1) { + background-color: rgb(255 255 255 / 0.08); +} + +.logs .logDetails table tr:nth-child(even) { + background-color: rgb(255 255 255 / 8%); +} + +/* PLACEHOLDER TEXT */ +::placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-moz-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +:-ms-input-placeholder { + color: var(--text) !important; + opacity: .5 !important; +} + +::-webkit-input-placeholder { + color: var(--text) !important; + opacity: .5; +} \ No newline at end of file diff --git a/README.md b/README.md index 22151abf..e067b651 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@

A collection of themes/skins for your favorite apps!

-Buy Me A Coffee +Buy Me A Coffee

@@ -22,48 +22,197 @@ ![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/spacegray_banner.png) ![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/dark_banner.png) ![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/plex_banner.png) +![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/organizr_dark_banner.png) # [Installation](https://github.com/gilbN/theme.park/wiki/Setup) # [Addons](https://github.com/gilbN/theme.park/tree/master/CSS/addons) ## Current themes in the repo: -

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+

Sonarr

+		 +

+

Radarr

+		 +

+

Lidarr

+		 +

+

Bazarr

+		 +

+

Readarr

+		 +

+

Plex

+		 +

+

Jellyfin/Emby

+
+

+

Calibre-web

+		 +

+

Tautulli

+		 +

+

Ombi

+		 +

+

Requestrr

+		 +

+

Organizr

+		 +

+

Synclounge

+		 +

+

Deluge

+
+

+

qBittorrent

+		 +

+

ruTorrent

+		 +

+

Transmission

+		 +

+

SABnzbd

+		 +

+

NZBGet

+		 +

+

NZBHydra 2

+		 +

+

Jackett

+
+

+

Grafana

+		 +

+

Netdata

+		 +

+

Monitorr

+		 +

+

Logarr

+		 +

+

Portainer

+		 +

+

Pi-hole

+		 +

+

Guacamole

+
+

+

Filebrowser

+		 +

+

PLPP

+		 +

+

librespeed

+		 +

+

The Lounge

+		 +

+

Lazylibrarian

+		 +

+

Adguard

+		 +

+

Gaps

+
+

+

Bitwarden

+		 +

+

Duplicacy

+		 +

+

Kitana

+		 +

+

Webtools

+		 +

+

Resilio-Sync

+
## [Adding your own theme colors](https://github.com/gilbN/theme.park/wiki/Creating-your-own-themes) + + + + + *** diff --git a/Resources/qbittorrent/folder-open-solid.svg b/Resources/qbittorrent/folder-open-solid.svg new file mode 100644 index 00000000..99d403c8 --- /dev/null +++ b/Resources/qbittorrent/folder-open-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Resources/qbittorrent/inbox-solid.svg b/Resources/qbittorrent/inbox-solid.svg new file mode 100644 index 00000000..88a6908d --- /dev/null +++ b/Resources/qbittorrent/inbox-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Resources/qbittorrent/network-wired-solid.svg b/Resources/qbittorrent/network-wired-solid.svg new file mode 100644 index 00000000..35321af9 --- /dev/null +++ b/Resources/qbittorrent/network-wired-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Resources/requestrr/requestrr_white.png b/Resources/requestrr/requestrr_white.png new file mode 100644 index 00000000..468c1659 Binary files /dev/null and b/Resources/requestrr/requestrr_white.png differ diff --git a/Screenshots/adguard/aquamarine.png b/Screenshots/adguard/aquamarine.png new file mode 100644 index 00000000..92f73fb7 Binary files /dev/null and b/Screenshots/adguard/aquamarine.png differ diff --git a/Screenshots/adguard/dark.png b/Screenshots/adguard/dark.png new file mode 100644 index 00000000..ba312490 Binary files /dev/null and b/Screenshots/adguard/dark.png differ diff --git a/Screenshots/adguard/hotline.png b/Screenshots/adguard/hotline.png new file mode 100644 index 00000000..117566e3 Binary files /dev/null and b/Screenshots/adguard/hotline.png differ diff --git a/Screenshots/adguard/organizr-dark.png b/Screenshots/adguard/organizr-dark.png new file mode 100644 index 00000000..3d270ad4 Binary files /dev/null and b/Screenshots/adguard/organizr-dark.png differ diff --git a/Screenshots/adguard/plex.png b/Screenshots/adguard/plex.png new file mode 100644 index 00000000..821917dd Binary files /dev/null and b/Screenshots/adguard/plex.png differ diff --git a/Screenshots/adguard/space-gray.png b/Screenshots/adguard/space-gray.png new file mode 100644 index 00000000..9711930f Binary files /dev/null and b/Screenshots/adguard/space-gray.png differ diff --git a/Screenshots/bazarr/organizr-dark.png b/Screenshots/bazarr/organizr-dark.png new file mode 100644 index 00000000..5e638427 Binary files /dev/null and b/Screenshots/bazarr/organizr-dark.png differ diff --git a/Screenshots/bitwarden/aquamarine.png b/Screenshots/bitwarden/aquamarine.png new file mode 100644 index 00000000..c467e30f Binary files /dev/null and b/Screenshots/bitwarden/aquamarine.png differ diff --git a/Screenshots/bitwarden/dark.png b/Screenshots/bitwarden/dark.png new file mode 100644 index 00000000..b895ad1f Binary files /dev/null and b/Screenshots/bitwarden/dark.png differ diff --git a/Screenshots/bitwarden/hotline.png b/Screenshots/bitwarden/hotline.png new file mode 100644 index 00000000..c8f148d8 Binary files /dev/null and b/Screenshots/bitwarden/hotline.png differ diff --git a/Screenshots/bitwarden/organizr-dark.png b/Screenshots/bitwarden/organizr-dark.png new file mode 100644 index 00000000..0724ab04 Binary files /dev/null and b/Screenshots/bitwarden/organizr-dark.png differ diff --git a/Screenshots/bitwarden/plex.png b/Screenshots/bitwarden/plex.png new file mode 100644 index 00000000..ebc4aa78 Binary files /dev/null and b/Screenshots/bitwarden/plex.png differ diff --git a/Screenshots/bitwarden/space-gray.png b/Screenshots/bitwarden/space-gray.png new file mode 100644 index 00000000..fb8f7174 Binary files /dev/null and b/Screenshots/bitwarden/space-gray.png differ diff --git a/Screenshots/duplicacy/aquamarine.png b/Screenshots/duplicacy/aquamarine.png new file mode 100644 index 00000000..0bae696e Binary files /dev/null and b/Screenshots/duplicacy/aquamarine.png differ diff --git a/Screenshots/duplicacy/dark.png b/Screenshots/duplicacy/dark.png new file mode 100644 index 00000000..cc741854 Binary files /dev/null and b/Screenshots/duplicacy/dark.png differ diff --git a/Screenshots/duplicacy/hotline.png b/Screenshots/duplicacy/hotline.png new file mode 100644 index 00000000..4c791f60 Binary files /dev/null and b/Screenshots/duplicacy/hotline.png differ diff --git a/Screenshots/duplicacy/organmizr.dark.png b/Screenshots/duplicacy/organmizr.dark.png new file mode 100644 index 00000000..20cf6303 Binary files /dev/null and b/Screenshots/duplicacy/organmizr.dark.png differ diff --git a/Screenshots/duplicacy/plex.png b/Screenshots/duplicacy/plex.png new file mode 100644 index 00000000..fb0e1178 Binary files /dev/null and b/Screenshots/duplicacy/plex.png differ diff --git a/Screenshots/duplicacy/space-grayu.png b/Screenshots/duplicacy/space-grayu.png new file mode 100644 index 00000000..e65304e0 Binary files /dev/null and b/Screenshots/duplicacy/space-grayu.png differ diff --git a/Screenshots/gaps/aquamarine.png b/Screenshots/gaps/aquamarine.png new file mode 100644 index 00000000..896b0547 Binary files /dev/null and b/Screenshots/gaps/aquamarine.png differ diff --git a/Screenshots/gaps/dark.png b/Screenshots/gaps/dark.png new file mode 100644 index 00000000..bdb1b401 Binary files /dev/null and b/Screenshots/gaps/dark.png differ diff --git a/Screenshots/gaps/hotline.png b/Screenshots/gaps/hotline.png new file mode 100644 index 00000000..b32d3ee7 Binary files /dev/null and b/Screenshots/gaps/hotline.png differ diff --git a/Screenshots/gaps/organizr-dark.png b/Screenshots/gaps/organizr-dark.png new file mode 100644 index 00000000..9da70a6c Binary files /dev/null and b/Screenshots/gaps/organizr-dark.png differ diff --git a/Screenshots/gaps/plex.png b/Screenshots/gaps/plex.png new file mode 100644 index 00000000..44c25ec5 Binary files /dev/null and b/Screenshots/gaps/plex.png differ diff --git a/Screenshots/gaps/space-gray.png b/Screenshots/gaps/space-gray.png new file mode 100644 index 00000000..279a4f92 Binary files /dev/null and b/Screenshots/gaps/space-gray.png differ diff --git a/Screenshots/kitana/aquamarine.png b/Screenshots/kitana/aquamarine.png new file mode 100644 index 00000000..14e30337 Binary files /dev/null and b/Screenshots/kitana/aquamarine.png differ diff --git a/Screenshots/kitana/dark.png b/Screenshots/kitana/dark.png new file mode 100644 index 00000000..f30c8cf7 Binary files /dev/null and b/Screenshots/kitana/dark.png differ diff --git a/Screenshots/kitana/hotline.png b/Screenshots/kitana/hotline.png new file mode 100644 index 00000000..db5d796f Binary files /dev/null and b/Screenshots/kitana/hotline.png differ diff --git a/Screenshots/kitana/organizr-dark.png b/Screenshots/kitana/organizr-dark.png new file mode 100644 index 00000000..377fe930 Binary files /dev/null and b/Screenshots/kitana/organizr-dark.png differ diff --git a/Screenshots/kitana/plex.png b/Screenshots/kitana/plex.png new file mode 100644 index 00000000..3cdd6661 Binary files /dev/null and b/Screenshots/kitana/plex.png differ diff --git a/Screenshots/kitana/space-gray.png b/Screenshots/kitana/space-gray.png new file mode 100644 index 00000000..00e01473 Binary files /dev/null and b/Screenshots/kitana/space-gray.png differ diff --git a/Screenshots/organizr_dark_banner.png b/Screenshots/organizr_dark_banner.png new file mode 100644 index 00000000..247be3e4 Binary files /dev/null and b/Screenshots/organizr_dark_banner.png differ diff --git a/Screenshots/pihole/aquamarine.png b/Screenshots/pihole/aquamarine.png new file mode 100644 index 00000000..63add328 Binary files /dev/null and b/Screenshots/pihole/aquamarine.png differ diff --git a/Screenshots/pihole/dark.png b/Screenshots/pihole/dark.png new file mode 100644 index 00000000..8c860743 Binary files /dev/null and b/Screenshots/pihole/dark.png differ diff --git a/Screenshots/pihole/hotline.png b/Screenshots/pihole/hotline.png new file mode 100644 index 00000000..a41eb18a Binary files /dev/null and b/Screenshots/pihole/hotline.png differ diff --git a/Screenshots/pihole/pihole.gif b/Screenshots/pihole/pihole.gif new file mode 100644 index 00000000..0e8e2f9d Binary files /dev/null and b/Screenshots/pihole/pihole.gif differ diff --git a/Screenshots/pihole/space-gray.png b/Screenshots/pihole/space-gray.png new file mode 100644 index 00000000..782124ef Binary files /dev/null and b/Screenshots/pihole/space-gray.png differ diff --git a/Screenshots/readarr/aquamarine.png b/Screenshots/readarr/aquamarine.png new file mode 100644 index 00000000..e32584b9 Binary files /dev/null and b/Screenshots/readarr/aquamarine.png differ diff --git a/Screenshots/readarr/organizr-dark.png b/Screenshots/readarr/organizr-dark.png new file mode 100644 index 00000000..b793c4b6 Binary files /dev/null and b/Screenshots/readarr/organizr-dark.png differ diff --git a/Screenshots/requestrr/aquamarine.png b/Screenshots/requestrr/aquamarine.png new file mode 100644 index 00000000..3c9436ed Binary files /dev/null and b/Screenshots/requestrr/aquamarine.png differ diff --git a/Screenshots/requestrr/dark.png b/Screenshots/requestrr/dark.png new file mode 100644 index 00000000..50f6f8e4 Binary files /dev/null and b/Screenshots/requestrr/dark.png differ diff --git a/Screenshots/requestrr/hotline.png b/Screenshots/requestrr/hotline.png new file mode 100644 index 00000000..f9ae61ca Binary files /dev/null and b/Screenshots/requestrr/hotline.png differ diff --git a/Screenshots/requestrr/plex.png b/Screenshots/requestrr/plex.png new file mode 100644 index 00000000..7d45d0dd Binary files /dev/null and b/Screenshots/requestrr/plex.png differ diff --git a/Screenshots/requestrr/space-gray.png b/Screenshots/requestrr/space-gray.png new file mode 100644 index 00000000..113c8387 Binary files /dev/null and b/Screenshots/requestrr/space-gray.png differ diff --git a/Screenshots/resilio-sync/aquamarine.png b/Screenshots/resilio-sync/aquamarine.png new file mode 100644 index 00000000..50d31ab2 Binary files /dev/null and b/Screenshots/resilio-sync/aquamarine.png differ diff --git a/Screenshots/resilio-sync/dark.png b/Screenshots/resilio-sync/dark.png new file mode 100644 index 00000000..a0c3fefb Binary files /dev/null and b/Screenshots/resilio-sync/dark.png differ diff --git a/Screenshots/resilio-sync/hotline.png b/Screenshots/resilio-sync/hotline.png new file mode 100644 index 00000000..947f3fe0 Binary files /dev/null and b/Screenshots/resilio-sync/hotline.png differ diff --git a/Screenshots/resilio-sync/organizr-dark.png b/Screenshots/resilio-sync/organizr-dark.png new file mode 100644 index 00000000..ed999ba0 Binary files /dev/null and b/Screenshots/resilio-sync/organizr-dark.png differ diff --git a/Screenshots/resilio-sync/plex.png b/Screenshots/resilio-sync/plex.png new file mode 100644 index 00000000..52bb9e4d Binary files /dev/null and b/Screenshots/resilio-sync/plex.png differ diff --git a/Screenshots/resilio-sync/space-gray.png b/Screenshots/resilio-sync/space-gray.png new file mode 100644 index 00000000..e98bcd39 Binary files /dev/null and b/Screenshots/resilio-sync/space-gray.png differ diff --git a/Screenshots/webtools/aquamarine.png b/Screenshots/webtools/aquamarine.png new file mode 100644 index 00000000..f6389e7e Binary files /dev/null and b/Screenshots/webtools/aquamarine.png differ diff --git a/Screenshots/webtools/dark.png b/Screenshots/webtools/dark.png new file mode 100644 index 00000000..0b500d90 Binary files /dev/null and b/Screenshots/webtools/dark.png differ diff --git a/Screenshots/webtools/hotline.png b/Screenshots/webtools/hotline.png new file mode 100644 index 00000000..a5c1c879 Binary files /dev/null and b/Screenshots/webtools/hotline.png differ diff --git a/Screenshots/webtools/organizr-dark.png b/Screenshots/webtools/organizr-dark.png new file mode 100644 index 00000000..a7b0929f Binary files /dev/null and b/Screenshots/webtools/organizr-dark.png differ diff --git a/Screenshots/webtools/plex.png b/Screenshots/webtools/plex.png new file mode 100644 index 00000000..dae088ca Binary files /dev/null and b/Screenshots/webtools/plex.png differ diff --git a/Screenshots/webtools/space-gray.png b/Screenshots/webtools/space-gray.png new file mode 100644 index 00000000..a6452273 Binary files /dev/null and b/Screenshots/webtools/space-gray.png differ