diff --git a/CSS/themes/nzbhydra2/aquamarine.css b/CSS/themes/nzbhydra2/aquamarine.css new file mode 100644 index 00000000..2c980fcf --- /dev/null +++ b/CSS/themes/nzbhydra2/aquamarine.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 */ + +/* NZBHYDRA2 AQUAMARINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/nzbhydra2-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; +} diff --git a/CSS/themes/nzbhydra2/dark.css b/CSS/themes/nzbhydra2/dark.css new file mode 100644 index 00000000..6716e865 --- /dev/null +++ b/CSS/themes/nzbhydra2/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 */ + +/* NZBHYDRA2 DARK THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/nzbhydra2-base.css); +:root { + --main-bg-color: #1f1f1f; + --modal-bg-color: radial-gradient(ellipse at top, #1f1f1f 0%, #1f1f1f 100%) center center/cover no-repeat fixed; + --default-button-color: #cc7b19; + --default-button-color-hover: #e59029; + } \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/hotline.css b/CSS/themes/nzbhydra2/hotline.css new file mode 100644 index 00000000..174619e2 --- /dev/null +++ b/CSS/themes/nzbhydra2/hotline.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 */ + +/* NZBHYDRA2 HOTLINE THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/nzbhydra2-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; +} \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/nzbhydra-base.css b/CSS/themes/nzbhydra2/nzbhydra-base.css new file mode 100644 index 00000000..4f818987 --- /dev/null +++ b/CSS/themes/nzbhydra2/nzbhydra-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, html { + height: 100%; + background: var(--main-bg-color); + font-family: Open Sans Semibold, Helvetica Neue, Helvetica, Arial, sans-serif; +} +.navbar-default { + background-color: rgba(0, 0, 0, 0.6); + border-color: transparent; +} +.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { + color: #fff; + background-color: rgba(0, 0, 0, 0.25); +} +.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { + color: #fff; + background-color: rgba(255, 255, 255, 0.08); +} +.growl-container>.alert-info.icon { + background: var(--modal-bg-color); +} +.alert-info { + background: var(--modal-bg-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); + outline: none; +} + +/* Config */ +.nav-tabs { + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} +.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { + color: #fff; + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid #1a1f2000; + border-bottom-color: transparent; +} +.nav-tabs>li>a:hover { + border-color: transparent; +} +.nav>li>a:focus, .nav>li>a:hover { + background-color: rgba(255, 255, 255, 0.08); +} +.formly>.formly-field-group { + background-color: transparent; + border: 1px solid transparent; +} +legend { + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} +.panel-default>.panel-heading h3 { + color: #ffffff; +} + +/* Buttons */ +.btn-primary { + color: #fff; + background: var(--default-button-color); + border-color: var(--default-button-color); +} +.btn-primary.active, .btn-primary.focus, .btn-primary:active, .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); +} +.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: var(--default-button-color-hover); + border-color: var(--default-button-color-hover); +} +.btn-info { + color: #fff; + background: var(--default-button-color); + border-color: transparent; +} +.btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open>.dropdown-toggle.btn-info { + color: #fff; + background: var(--default-button-color-hover); + border-color: transparent; +} +.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .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; +} +.btn-default { + color: #fff; + background: var(--default-button-color); + border-color: transparent !important; + outline: none; +} +.btn-default.active, .btn-default.focus, .btn-default:active, .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; +} +.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: var(--default-button-color-hover); + border-color: transparent !important; + outline: none; +} +.config-button { + border: 1px solid transparent; + outline: none; +} +.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover { + outline: none !important; + border-color: transparent; +} +.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger:active.focus, .btn-danger:active:focus, .btn-danger:active:hover, .open>.dropdown-toggle.btn-danger.focus, .open>.dropdown-toggle.btn-danger:focus, .open>.dropdown-toggle.btn-danger:hover { +outline: none; +} +.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning:hover { + outline: none; +} + + +.bootstrap-switch { + border: 1px solid rgba(255, 255, 255, .08); +} +.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); +} +.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { + background-color: var(--default-button-color); + color: #ffffff; +} +.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group { + margin-left: -1px; + background: #f0f8ff00; +} +.input-group-btn2 { + border: none; + background: var(--default-button-color); +} +.input-group-btn1 { + border: 1px solid var(--default-button-color); + background: var(--default-button-color); +} +/* Form Control */ + +.form-control { + border: 1px solid transparent; + background-color: #151515; + +} +.form-control:focus { + border-color: #fff0; + 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); +} +.input-group-addon { +outline: none; + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid transparent; + +} + +/* Categories */ +.panel { + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid transparent; +} +.repeatsection { + background: rgba(0, 0, 0, 0.25); + box-shadow: 0 0 4px 1px transparent; +} +hr { + border-top: 1px solid rgba(255, 255, 255, 0.25); +} + +/* Modal */ +.modal-body { + background: var(--modal-bg-color); +} +.modal-header { + background: var(--modal-bg-color); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} +.modal-content { + border: 1px solid transparent; +} +.modal-footer { + background: var(--modal-bg-color); + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +/* Updates */ +.alert-warning { + background: rgba(255, 255, 255, 0.25); + border-color: transparent; + color: #fff; +} +.panel-default>.panel-heading { + background-color: rgba(0, 0, 0, 0.25); +} + +.panel-default>.panel-heading { + color: #c8c8c8; + border-color: rgba(255, 255, 255, 0.08); +} +.list-group-item { + background-color: rgba(0, 0, 0, 0.08); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Table */ +table { + background-color: rgba(0, 0, 0, 0.25); +} +.table>thead>tr>th { + vertical-align: bottom; + border-bottom: 2px solid rgba(255, 255, 255, 0.25); +} +.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { + border-top: 1px solid rgba(255, 255, 255, 0.15); +} +.table-hover>tbody>tr:hover { + background-color: rgba(255, 255, 255, 0.08); +} +pre { + background-color: rgba(0, 0, 0, 0.45); + border: 1px solid transparent; +} \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/plex.css b/CSS/themes/nzbhydra2/plex.css new file mode 100644 index 00000000..c0462c4f --- /dev/null +++ b/CSS/themes/nzbhydra2/plex.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 */ + +/* NZBHYDRA2 PLEX THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/nzbhydra2-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; +} \ No newline at end of file diff --git a/CSS/themes/nzbhydra2/space-gray.css b/CSS/themes/nzbhydra2/space-gray.css new file mode 100644 index 00000000..c58615f5 --- /dev/null +++ b/CSS/themes/nzbhydra2/space-gray.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 */ + +/* NZBHYDRA2 SPACE GRAY THEME */ +@import url(https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/nzbhydra2-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; +} diff --git a/CSS/themes/ombi/ombi-base.css b/CSS/themes/ombi/ombi-base.css index 78fbcce0..855e8da5 100644 --- a/CSS/themes/ombi/ombi-base.css +++ b/CSS/themes/ombi/ombi-base.css @@ -1,3 +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 */ + body { background: var(--main-bg-color); } diff --git a/README.md b/README.md index 5fd42d0e..4b66bca8 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,7 @@ Link to Firefox extention: https://addons.mozilla.org/en-US/firefox/addon/styl-u
  • Grafana
  • Sabnzbd
  • Nzbget
    • +
  • NZBHydra2
  • Deluge
  • qBittorrent
  • Guacamole
    • @@ -675,7 +676,32 @@ space-gray.css

    +*** +# NZBhydra2 Themes + +Custom [NZBHydra](https://github.com/theotherp/nzbhydra2) CSS for consistent UI in [Organizr](https://github.com/causefx/Organizr). + +![](https://raw.githubusercontent.com/gilbN/theme.park/master/Screenshots/nzbhydra2/nzbhydra2.gif) + +``` +https://gilbn.github.io/theme.park/CSS/themes/nzbhydra2/XXX.css +aquamarine.css +hotline.css +dark.css +plex.css +space-gray.css +``` +### Screenshots +
    Expand +

    + + + + + +

    +
    ### Honourable mentions: [leram84/layer.Cake](https://github.com/leram84/layer.Cake/) diff --git a/Screenshots/nzbhydra2/nzbhydra1.png b/Screenshots/nzbhydra2/nzbhydra1.png new file mode 100644 index 00000000..d40ffbff Binary files /dev/null and b/Screenshots/nzbhydra2/nzbhydra1.png differ diff --git a/Screenshots/nzbhydra2/nzbhydra2.gif b/Screenshots/nzbhydra2/nzbhydra2.gif new file mode 100644 index 00000000..0a6047f1 Binary files /dev/null and b/Screenshots/nzbhydra2/nzbhydra2.gif differ diff --git a/Screenshots/nzbhydra2/nzbhydra2.jpg b/Screenshots/nzbhydra2/nzbhydra2.jpg new file mode 100644 index 00000000..cf73105b Binary files /dev/null and b/Screenshots/nzbhydra2/nzbhydra2.jpg differ diff --git a/Screenshots/nzbhydra2/nzbhydra3.png b/Screenshots/nzbhydra2/nzbhydra3.png new file mode 100644 index 00000000..dc852a73 Binary files /dev/null and b/Screenshots/nzbhydra2/nzbhydra3.png differ diff --git a/Screenshots/nzbhydra2/nzbhydra4.png b/Screenshots/nzbhydra2/nzbhydra4.png new file mode 100644 index 00000000..efd090df Binary files /dev/null and b/Screenshots/nzbhydra2/nzbhydra4.png differ diff --git a/Screenshots/nzbhydra2/nzbhydra5.png b/Screenshots/nzbhydra2/nzbhydra5.png new file mode 100644 index 00000000..8b60dab2 Binary files /dev/null and b/Screenshots/nzbhydra2/nzbhydra5.png differ