diff --git a/CSS/themes/bitwarden/bitwarden-base.css b/CSS/themes/bitwarden/bitwarden-base.css index 388705c9..90d756fe 100644 --- a/CSS/themes/bitwarden/bitwarden-base.css +++ b/CSS/themes/bitwarden/bitwarden-base.css @@ -493,4 +493,10 @@ input:focus:-ms-input-placeholder { cursor: auto; background-color: rgb(0 0 0 / 10%); border-color: rgb(0 0 0 / 10%); +} + +.text-muted, +.card-header small, +.modal-header small { + color: var(--text-muted) !important; } \ No newline at end of file diff --git a/CSS/themes/requestrr/aquamarine.css b/CSS/themes/requestrr/aquamarine.css index 58c6cd22..de32c30e 100644 --- a/CSS/themes/requestrr/aquamarine.css +++ b/CSS/themes/requestrr/aquamarine.css @@ -13,12 +13,4 @@ /* REQUESTRR AQUAMARINE THEME */ @import url(https://theme-park.dev/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; -} +@import url(https://theme-park.dev/CSS/variables/aquamarine.css); diff --git a/CSS/themes/requestrr/dark.css b/CSS/themes/requestrr/dark.css index 4a9e88ba..2757c2b6 100644 --- a/CSS/themes/requestrr/dark.css +++ b/CSS/themes/requestrr/dark.css @@ -13,12 +13,4 @@ /* REQUESTRR DARK THEME */ @import url(https://theme-park.dev/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 +@import url(https://theme-park.dev/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/dracula.css b/CSS/themes/requestrr/dracula.css new file mode 100644 index 00000000..234c37ca --- /dev/null +++ b/CSS/themes/requestrr/dracula.css @@ -0,0 +1,16 @@ + +/* 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 DRACULA THEME */ +@import url(https://theme-park.dev/CSS/themes/requestrr/requestrr-base.css); +@import url(https://theme-park.dev/CSS/variables/dracula.css); diff --git a/CSS/themes/requestrr/hotline.css b/CSS/themes/requestrr/hotline.css index 82ed7a2e..a7b39c7c 100644 --- a/CSS/themes/requestrr/hotline.css +++ b/CSS/themes/requestrr/hotline.css @@ -13,12 +13,4 @@ /* REQUESTRR HOTLINE THEME */ @import url(https://theme-park.dev/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 +@import url(https://theme-park.dev/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/organizr-dark.css b/CSS/themes/requestrr/organizr-dark.css index f65a3382..78e332e4 100644 --- a/CSS/themes/requestrr/organizr-dark.css +++ b/CSS/themes/requestrr/organizr-dark.css @@ -13,12 +13,4 @@ /* REQUESTRR ORGANIZR-DARK THEME */ @import url(https://theme-park.dev/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: #96a2b4; - --text-color-faded: #ddd; - } \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/plex.css b/CSS/themes/requestrr/plex.css index 87db8791..c5dfdb68 100644 --- a/CSS/themes/requestrr/plex.css +++ b/CSS/themes/requestrr/plex.css @@ -13,12 +13,4 @@ /* REQUESTRR PLEX THEME */ @import url(https://theme-park.dev/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 +@import url(https://theme-park.dev/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/requestrr/requestrr-base.css b/CSS/themes/requestrr/requestrr-base.css index 9603a658..917a716a 100644 --- a/CSS/themes/requestrr/requestrr-base.css +++ b/CSS/themes/requestrr/requestrr-base.css @@ -10,9 +10,10 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url(https://theme-park.dev/CSS/defaults/placeholders.css); body { - color: var(--text-color); + color: var(--text); background: var(--main-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -24,7 +25,7 @@ body { } .bg-default { - background: var(--main-bg-color) !important; + background: var(--main-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; @@ -45,29 +46,36 @@ h2, h3, h4, h5, -h6 { - color: var(--text-color); +h6, +.heading-small.text-muted, +.form-control-label, +.text-white { + color: var(--text-hover) !important; } -.text-muted, -.form-control-label { - color: var(--text-color-faded) !important; +.text-muted { + color: var(--text-muted); } .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; + color: rgb(var(--accent-color)); } .navbar-light .navbar-nav .nav-link { - color: var(--text-color); + color: var(--text); } -.navbar-light .navbar-nav .nav-link:focus, -.navbar-light .navbar-nav .nav-link:hover { - color: var(--text-color-faded); +.nav-link.active:hover, +.nav-link.active:focus { + background: rgba(255, 255, 255, 0.08); +} + +.navbar-light .navbar-nav .nav-link:focus:not(.nav-link.active), +.navbar-light .navbar-nav .nav-link:hover:not(.nav-link.active) { + color: var(--text-hover); background: rgba(255, 255, 255, 0.08); } @@ -97,7 +105,7 @@ h6 { @media (max-width: 767.98px) { .navbar-nav .nav-link { - color: var(--text-color) !important; + color: var(--text) !important; } } @@ -191,7 +199,7 @@ h6 { } .form-control:focus { - color: #fff; + color: var(--text-hover); } .has-success .form-control { @@ -199,75 +207,71 @@ h6 { } .form-control { - color: var(--text-color); + color: var(--text); 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-item.css-148o527-ItemComponent { + background: var(--drop-down-menu-bg) !important; } .react-dropdown-select.dropdown div[role=list] span { - background-color: #fff; - color: #000000; + color: var(--text); } .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); + color: var(--text-hover); } -.react-dropdown-select.dropdown { - color: var(--text-color); - background-color: rgba(0, 0, 0, 0.25); - +[class*="-ItemComponent"] { + border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } -::-webkit-input-placeholder { - /* Chrome/Opera/Safari */ - color: var(--text-color) !important; +[class*="-DropDown"]:not(.react-dropdown-select-dropdown-position-bottom) { + background: rgb(255 255 255 / 0%); + box-shadow: 0 0 10px 1px #000 !important; } -::-webkit-input-placeholder:focus { - /* Chrome/Opera/Safari */ - color: blue !important; -} - -::-moz-placeholder { - /* Firefox 19+ */ - color: var(--text-color) !important; +.react-dropdown-select.dropdown { + color: var(--text); + background-color: rgb(0 0 0 / 25%); } -:-ms-input-placeholder { - /* IE 10+ */ - color: var(--text-color) !important; +.react-dropdown-select.dropdown .react-dropdown-select-item-selected { + background: rgb(var(--accent-color)) !important; + color: var(--label-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); + background-color: rgb(var(--accent-color)); + border-color: rgb(var(--accent-color)); } -.btn-primary, -.btn-primary:hover { - color: #fff; +.custom-checkbox .custom-control-input:checked~.custom-control-label:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='000000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); +} + + +.btn-primary { + color: var(--button-text); background-color: var(--button-color); border-color: var(--button-color); } +.btn-primary:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } @@ -297,29 +301,22 @@ h6 { .btn-info.disabled, .btn-info:disabled { - color: #fff; + color: var(--text-muted); background-color: var(--button-color); border-color: var(--button-color); } .btn-info, .btn-info:hover { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } /* Login page*/ -.bg-gradient-info { - background: var(--main-bg-color) !important; - background-repeat: repeat, no-repeat; - background-attachment: fixed, fixed; - background-position: center center, center center; - background-size: auto, cover; - -webkit-background-size: auto, cover; - -moz-background-size: auto, cover; - -o-background-size: auto, cover; +.header.bg-gradient-info { + background: transparent !important; } @media (min-width: 1200px) { @@ -341,7 +338,7 @@ h6 { } .input-group-text { - color: var(--text-color); + color: var(--text); background-color: rgba(0, 0, 0, 0.25); border: 1px solid transparent !important; } diff --git a/CSS/themes/requestrr/space-gray.css b/CSS/themes/requestrr/space-gray.css index d09662af..96477ea3 100644 --- a/CSS/themes/requestrr/space-gray.css +++ b/CSS/themes/requestrr/space-gray.css @@ -13,12 +13,4 @@ /* RADARR SPACE GRAY THEME */ @import url(https://theme-park.dev/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; -} +@import url(https://theme-park.dev/CSS/variables/space-gray.css);