diff --git a/CSS/themes/nzbhydra2/aquamarine.css b/CSS/themes/nzbhydra2/aquamarine.css index 1aa18f90..5319f79f 100644 --- a/CSS/themes/nzbhydra2/aquamarine.css +++ b/CSS/themes/nzbhydra2/aquamarine.css @@ -13,10 +13,4 @@ /* NZBHYDRA2 AQUAMARINE THEME */ @import url(https://theme-park.dev/CSS/themes/nzbhydra2/nzbhydra-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; - --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; -} +@import url(https://theme-park.dev/CSS/variables/aquamarine.css); diff --git a/CSS/themes/nzbhydra2/dark.css b/CSS/themes/nzbhydra2/dark.css index c55584bc..0ac1701a 100644 --- a/CSS/themes/nzbhydra2/dark.css +++ b/CSS/themes/nzbhydra2/dark.css @@ -13,10 +13,4 @@ /* NZBHYDRA2 DARK THEME */ @import url(https://theme-park.dev/CSS/themes/nzbhydra2/nzbhydra-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; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --accent-color: #cc7b19; - } \ 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/nzbhydra2/dracula.css b/CSS/themes/nzbhydra2/dracula.css new file mode 100644 index 00000000..e8b3653e --- /dev/null +++ b/CSS/themes/nzbhydra2/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 */ + +/* NZBHYDRA2 DRACULA THEME */ +@import url(https://theme-park.dev/CSS/themes/nzbhydra2/nzbhydra-base.css); +@import url(https://theme-park.dev/CSS/variables/aquamarine.css); diff --git a/CSS/themes/nzbhydra2/hotline.css b/CSS/themes/nzbhydra2/hotline.css index fa6a8509..4f3a7059 100644 --- a/CSS/themes/nzbhydra2/hotline.css +++ b/CSS/themes/nzbhydra2/hotline.css @@ -13,10 +13,4 @@ /* NZBHYDRA2 HOTLINE THEME */ @import url(https://theme-park.dev/CSS/themes/nzbhydra2/nzbhydra-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; - --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 +@import url(https://theme-park.dev/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/nzbhydra-base.css b/CSS/themes/nzbhydra2/nzbhydra-base.css index b4d36a1d..878de155 100644 --- a/CSS/themes/nzbhydra2/nzbhydra-base.css +++ b/CSS/themes/nzbhydra2/nzbhydra-base.css @@ -10,6 +10,8 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +@import url(https://theme-park.dev/CSS/defaults/placeholders.css); + body, html { height: 100%; @@ -22,8 +24,20 @@ html { -moz-background-size: auto, cover; -o-background-size: auto, cover; font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif; + color: var(--text); +} + +* { + outline: none !important; } +a { + color: var(--link-color); +} + +a:hover { + color: var(--link-color-hover); +} .navbar-default { background-color: rgba(0, 0, 0, 0.6); border-color: transparent; @@ -32,27 +46,35 @@ html { .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { - color: #fff; + color: rgb(var(--accent-color)); background-color: rgba(0, 0, 0, 0.25); } .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { - color: #fff; + color: var(--text-hover); background-color: rgba(255, 255, 255, 0.08); } +.navbar-default .navbar-nav>li>a { + color: var(--text); +} + .growl-container>.alert-info.icon { - background: var(--accent-color); + background: rgb(var(--accent-color)); } .alert-info { - background: var(--accent-color); + background: rgb(var(--accent-color)); border-color: transparent; - color: #fff; + color: var(--label-text-color); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); outline: none; } +.alert-info a:hover { + color: var(--link-color); + opacity: .8; +} /* Config */ .nav-tabs { @@ -62,7 +84,7 @@ html { .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { - color: #fff; + color: rgb(var(--accent-color)); background-color: rgba(0, 0, 0, 0.25); border: 1px solid #1a1f2000; border-bottom-color: transparent; @@ -70,6 +92,7 @@ html { .nav-tabs>li>a:hover { border-color: transparent; + color: var(--text-hover); } .nav>li>a:focus, @@ -77,24 +100,33 @@ html { background-color: rgba(255, 255, 255, 0.08); } +.nav-tabs>li>a { + margin-right: 2px; + line-height: 1.42857143; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; + color: var(--text); +} + .formly>.formly-field-group { background-color: transparent; border: 1px solid transparent; } -legend { +legend,label { + color: var(--text-hover); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } -.panel-default>.panel-heading h3 { - color: #ffffff; +h1,h2,h3,h4,h5,h6 { + color: var(--text-hover) !important; } /* Buttons */ .btn-primary { - color: #fff; - background: var(--default-button-color); - border-color: var(--default-button-color); + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color); } .btn-primary.active, @@ -103,9 +135,9 @@ legend { .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary { - color: #fff; - background: var(--default-button-color-hover); - border-color: var(--default-button-color-hover); + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-primary.active.focus, @@ -117,15 +149,15 @@ legend { .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { - color: #fff; - background: var(--default-button-color-hover); - border-color: var(--default-button-color-hover); + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-info { - color: #fff; - background: var(--default-button-color); - border-color: transparent; + color: var(--button-text); + background: var(--button-color); + border-color:var(--button-color); } .btn-info.active, @@ -134,9 +166,9 @@ legend { .btn-info:focus, .btn-info:hover, .open>.dropdown-toggle.btn-info { - color: #fff; - background: var(--default-button-color-hover); - border-color: transparent; + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); } .btn-info.active.focus, @@ -148,17 +180,15 @@ legend { .open>.dropdown-toggle.btn-info.focus, .open>.dropdown-toggle.btn-info:focus, .open>.dropdown-toggle.btn-info:hover { - color: #fff; - background: var(--default-button-color-active); - border-color: transparent; - outline: none; + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); } -.btn-default { - color: #fff; - background: var(--default-button-color); - border-color: transparent !important; - outline: none; +.btn-default:not(.uib-day button, .uib-month button, .uib-year button) { + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color) !important; } .btn-default.active, @@ -167,10 +197,9 @@ legend { .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default { - color: #fff; - background: var(--default-button-color-hover); - border-color: transparent !important; - outline: none; + color: var(--button-text-hover); + background: var(--button-color-hover) !important; + border-color: var(--button-color-hover) !important; } .btn-default.active.focus, @@ -182,15 +211,13 @@ legend { .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover { - color: #fff; - background: var(--default-button-color-hover); - border-color: transparent !important; - outline: none; + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover) !important; } .config-button { border: 1px solid transparent; - outline: none; } .btn-success.active.focus, @@ -230,6 +257,29 @@ legend { outline: none; } +.dropdown-menu { + background: var(--drop-down-menu-bg); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.dropdown-menu>li>a { + color: var(--text); +} +.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { + text-decoration: none; + color: var(--text-hover); + background-color: rgba(255, 255, 255, 0.1); +} +.history-title { + font-style: italic; + color: var(--text-muted); +} .bootstrap-switch { border: 1px solid rgba(255, 255, 255, .08); @@ -237,13 +287,13 @@ legend { .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default { - color: #fff; - background: rgba(255, 255, 255, 0.25); + color: var(--text-muted); + background: rgba(0, 0, 0, 0.25); } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { - background-color: var(--default-button-color); - color: #ffffff; + background-color: var(--button-color); + color: var(--button-text); } .input-group-btn:last-child>.btn, @@ -253,36 +303,48 @@ legend { } .input-group-btn2 { - border: none; - background: var(--default-button-color); + border: 1px solid var(--button-color); + background: var(--button-color); } .input-group-btn1 { - border: 1px solid var(--default-button-color); - background: var(--default-button-color); + border: 1px solid var(--button-color); + background: var(--button-color); +} +.input-group-addon { + color: var(--button-text); + border: 1px solid var(--button-color); + background: var(--button-color); + } /* Form Control */ .form-control { border: 1px solid transparent; - background-color: #151515; + background-color: rgba(0, 0, 0, 0.25); } .form-control:focus { - border-color: #fff0; + border-color: rgba(255, 255, 255, 0); + background: rgba(0, 0, 0, 0.35); outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 0, 0, 0.6); + -webkit-box-shadow: none; + box-shadow: none; } -.input-group-addon { +select.form-control:focus { + background: #1b1b1b; + color: var(--text) +} + +/* .input-group-addon { outline: none; background-color: rgba(0, 0, 0, 0.25); border: 1px solid transparent; -} +} */ /* Categories */ .panel { @@ -312,7 +374,7 @@ hr { } .modal-header { - background: var(--modal-bg-color); + background: var(--modal-header-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; @@ -320,15 +382,17 @@ hr { -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); + border-bottom: 1px solid rgb(var(--accent-color)); + color: var(--text-hover); } .modal-content { border: 1px solid transparent; + color: var(--text) } .modal-footer { - background: var(--modal-bg-color); + background: var(--modal-footer-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; background-position: center center, center center; @@ -336,9 +400,12 @@ hr { -webkit-background-size: auto, cover; -moz-background-size: auto, cover; -o-background-size: auto, cover; - border-top: 1px solid rgba(255, 255, 255, 0.08); + border-top: 1px solid rgb(var(--accent-color)); +} +.well { + background-color: hsla(0, 0%, 0%, 0.45); + border: 1px solid #00000000; } - /* Updates */ .alert-warning { background: rgba(255, 255, 255, 0.25); @@ -351,7 +418,7 @@ hr { } .panel-default>.panel-heading { - color: #c8c8c8; + color: var(--text); border-color: rgba(255, 255, 255, 0.08); } @@ -386,4 +453,98 @@ table { pre { background-color: rgba(0, 0, 0, 0.45); border: 1px solid transparent; +} + +/* FORM LOGIN */ +body > div > div.center-form.panel.col-md-8 > div > form > button { + color: var(--button-text); + background: var(--button-color); + border-color: var(--button-color); + +} + +body > div > div.center-form.panel.col-md-8 > div > form > button:hover, +body > div > div.center-form.panel.col-md-8 > div > form > button:focus, +body > div > div.center-form.panel.col-md-8 > div > form > button:active{ + color: var(--button-text-hover); + background: var(--button-color-hover); + border-color: var(--button-color-hover); + +} + +/* SEARCH */ +.search-results-table { + background-color: rgb(0 0 0 / 25%); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.filter-button.btn-default:focus, +.filter-button.btn-default:focus.active { + background-color: var(--button-color-hover)!important; + border-color: var(--button-color-hover)!important; + color: var(--button-text)!important; +} + +.indexer-statuses-accordion { + color: rgb(var(--accent-color)); +} + +/* Pagination */ + +.pagination>li>a,.pagination>li>span { + text-decoration: none; + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); + +} + +.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover { + color: var(--button-text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + +.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover { + z-index: 2; + color: var(--button-text); + background-color: var(--button-color); + border-color: var(--button-color); + cursor: default +} + +.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover { + color: var(--text-muted); + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); + cursor: not-allowed +} + +/*pre*/ +pre { + color: var(--text); + background: var(--modal-bg-color); + border: 1px solid rgba(255, 255, 255, .1); +} + +chart > nvd3 > svg > text { + fill: var(--text-muted); +} + +.caption,caption { + color: var(--text-muted); +} + +.default-chip { + border: 1px solid rgb(var(--accent-color)); + border-radius: 5px; + background: rgb(var(--accent-color)); + color: var(--label-text-color); + padding: 0 2px 0 2px; +} + +chip-tmpl:focus .default-chip { + border: 2px solid var(--accent-color-hover); + background: var(--accent-color-hover); + color: var(--label-text-color); } \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/organizr-dark.css b/CSS/themes/nzbhydra2/organizr-dark.css index 4cfe76b7..80298917 100644 --- a/CSS/themes/nzbhydra2/organizr-dark.css +++ b/CSS/themes/nzbhydra2/organizr-dark.css @@ -13,10 +13,4 @@ /* NZBHYDRA2 ORGANIZR-DARK THEME */ @import url(https://theme-park.dev/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 +@import url(https://theme-park.dev/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/plex.css b/CSS/themes/nzbhydra2/plex.css index 02571d78..d1299c77 100644 --- a/CSS/themes/nzbhydra2/plex.css +++ b/CSS/themes/nzbhydra2/plex.css @@ -13,10 +13,4 @@ /* NZBHYDRA2 PLEX THEME */ @import url(https://theme-park.dev/CSS/themes/nzbhydra2/nzbhydra-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; - --default-button-color: #cc7b19; - --default-button-color-hover: #e59029; - --accent-color: #cc7b19; -} \ 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/nzbhydra2/space-gray.css b/CSS/themes/nzbhydra2/space-gray.css index e54d31e7..8a2d1171 100644 --- a/CSS/themes/nzbhydra2/space-gray.css +++ b/CSS/themes/nzbhydra2/space-gray.css @@ -13,10 +13,4 @@ /* NZBHYDRA2 SPACE GRAY THEME */ @import url(https://theme-park.dev/CSS/themes/nzbhydra2/nzbhydra-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; - --default-button-color: #607D8B; - --default-button-color-hover: #81a6b7; - --accent-color: #7598a9; -} +@import url(https://theme-park.dev/CSS/variables/space-gray.css);