diff --git a/CSS/themes/xbackbone/aquamarine.css b/CSS/themes/xbackbone/aquamarine.css
new file mode 100644
index 00000000..3714f864
--- /dev/null
+++ b/CSS/themes/xbackbone/aquamarine.css
@@ -0,0 +1,33 @@
+/* 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 */
+
+/* XBACKBONE AQUAMARINE THEME */
+@import url(https://theme-park.dev/CSS/themes/xbackbone/xbackbone-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;
+ --button-text-hover: #FFF;
+
+ --accent-color: 0, 150, 136;
+ --accent-color-hover: #12afa0;
+ --queue-color: #009688;
+ --link-color: #0ed2bf;
+ --link-color-hover: #fff;
+
+ --text:#eee;
+ --text-hover: #fff;
+ --text-muted: #999;
+}
\ No newline at end of file
diff --git a/CSS/themes/xbackbone/dark.css b/CSS/themes/xbackbone/dark.css
new file mode 100644
index 00000000..b1885e09
--- /dev/null
+++ b/CSS/themes/xbackbone/dark.css
@@ -0,0 +1,33 @@
+/* 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 */
+
+/* XBACKBONE DARK THEME */
+@import url(https://theme-park.dev/CSS/themes/xbackbone/xbackbone-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;
+ --button-text-hover: #FFF;
+
+ --accent-color: 100, 100, 100;
+ --accent-color-hover: #ffffff73;
+ --queue-color: #6b5;
+ --link-color: #ddd;
+ --link-color-hover: #fff;
+
+ --text:#eee;
+ --text-hover: #fff;
+ --text-muted: #999;
+ }
\ No newline at end of file
diff --git a/CSS/themes/xbackbone/hotline.css b/CSS/themes/xbackbone/hotline.css
new file mode 100644
index 00000000..0247958d
--- /dev/null
+++ b/CSS/themes/xbackbone/hotline.css
@@ -0,0 +1,33 @@
+/* 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 */
+
+/* XBACKBONE HOTLINE THEME */
+@import url(https://theme-park.dev/CSS/themes/xbackbone/xbackbone-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;
+ --button-text-hover: #FFF;
+
+ --accent-color: 244, 67, 54;
+ --accent-color-hover: #0b3161;
+ --queue-color: #6b5;
+ --link-color: #ddd;
+ --link-color-hover: #fff;
+
+ --text:#eee;
+ --text-hover: #fff;
+ --text-muted: #999;
+}
\ No newline at end of file
diff --git a/CSS/themes/xbackbone/organizr-dark.css b/CSS/themes/xbackbone/organizr-dark.css
new file mode 100644
index 00000000..b0c15d7d
--- /dev/null
+++ b/CSS/themes/xbackbone/organizr-dark.css
@@ -0,0 +1,33 @@
+/* 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 */
+
+/* XBACKBONE ORGANIZR-DARK THEME */
+@import url(https://theme-park.dev/CSS/themes/xbackbone/xbackbone-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;
+ --button-text-hover: #fff;
+
+ --accent-color: 44, 171, 227;
+ --accent-color-hover: white;
+ --queue-color: #2cabe3;
+ --link-color: #2cabe3;
+ --link-color-hover: #fff;
+
+ --text:#96a2b4;
+ --text-hover: #fff;
+ --text-muted: #999;
+ }
\ No newline at end of file
diff --git a/CSS/themes/xbackbone/plex.css b/CSS/themes/xbackbone/plex.css
new file mode 100644
index 00000000..9122e215
--- /dev/null
+++ b/CSS/themes/xbackbone/plex.css
@@ -0,0 +1,33 @@
+/* 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 */
+
+/* XBACKBONE PLEX THEME */
+@import url(https://theme-park.dev/CSS/themes/xbackbone/xbackbone-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;
+ --button-text-hover: #fff;
+
+ --accent-color: 229, 160, 13;
+ --accent-color-hover: #ffc107;
+ --queue-color: #27c24c;
+ --link-color: #e5a00d;
+ --link-color-hover: #fff;
+
+ --text:#eee;
+ --text-hover: #fff;
+ --text-muted: #999;
+ }
\ No newline at end of file
diff --git a/CSS/themes/xbackbone/space-gray.css b/CSS/themes/xbackbone/space-gray.css
new file mode 100644
index 00000000..9e36a71b
--- /dev/null
+++ b/CSS/themes/xbackbone/space-gray.css
@@ -0,0 +1,33 @@
+/* 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 */
+
+/* XBACKBONE SPACE GRAY THEME */
+@import url(https://theme-park.dev/CSS/themes/xbackbone/xbackbone-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;
+ --button-text-hover: #fff;
+
+ --accent-color: 96, 125, 139;
+ --accent-color-hover: #81a6b7;
+ --queue-color: #81a6b7;
+ --link-color: #81a6b7;
+ --link-color-hover: #fff;
+
+ --text:#eee;
+ --text-hover: #fff;
+ --text-muted: #999;
+}
diff --git a/CSS/themes/xbackbone/xbackbone-base.css b/CSS/themes/xbackbone/xbackbone-base.css
new file mode 100644
index 00000000..4585adda
--- /dev/null
+++ b/CSS/themes/xbackbone/xbackbone-base.css
@@ -0,0 +1,268 @@
+/* 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 */
+
+.bg-light {
+ background: var(--main-bg-color) !important;
+}
+
+/* TEXT */
+body,
+.table,
+.navbar-dark .navbar-nav .nav-link,
+.dropdown-menu,
+.dropdown-item {
+ color: var(--text);
+}
+
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
+ color: var(--text-hover);
+}
+
+.card-header {
+ color: #FFF;
+}
+
+.text-muted {
+ color: var(--text-muted) !important;
+}
+
+code {
+ font-size: .875em;
+ color: #d63384;
+ word-wrap: break-word;
+ background: rgb(0 0 0 / 50%);
+ padding: 2px 6px;
+ border-radius: 5px;
+}
+
+/* LINKS */
+a {
+ color: var(--link-color);
+ text-decoration: underline;
+}
+
+a:hover {
+ color: var(--link-color-hover);
+}
+
+/* TOP NAV */
+.bg-primary {
+ background: rgba(0, 0, 0, .15) !important;
+}
+
+/* DROPDOWN MENU */
+.dropdown-menu {
+ background: var(--modal-bg-color);
+}
+
+.dropdown-item:focus,
+.dropdown-item:hover {
+ color: var(--text-hover);
+ background-color: rgba(255, 255, 255, .1);
+}
+
+.dropdown-item.disabled,
+.dropdown-item:disabled {
+ color: var(--text-muted);
+ pointer-events: none;
+ background-color: transparent;
+}
+
+.dropdown-divider {
+ border-top: 1px solid rgb(255 255 255 / 15%);
+}
+
+/* TABLES */
+.table-hover>tbody>tr:hover {
+ color: var(--text-hover);
+}
+.table {
+ border-color: rgb(255 255 255 / 20%);
+}
+.table>:not(:last-child)>:last-child>* {
+ border-bottom-color: rgb(255 255 255 / 50%);
+}
+/* BUTTONS */
+
+.btn-light {
+ color: var(--button-text);
+ background-color: rgba(255, 255, 255, .08);
+ border-color: rgba(255, 255, 255, .08);
+}
+
+.btn-light:hover {
+ color: var(--button-text-hover);
+ background-color: rgba(255, 255, 255, .08);
+ border-color: rgba(255, 255, 255, .08);
+}
+
+.btn-primary,
+.btn-outline-dark,
+.btn-outline-secondary {
+ color: var(--button-text);
+ background-color: var(--button-color);
+ border-color: var(--button-color);
+}
+
+.btn-primary:hover,
+.btn-outline-dark:hover,
+.btn-outline-secondary:hover {
+ color: var(--button-text-hover);
+ background-color: var(--button-color-hover);
+ border-color: var(--button-color-hover);
+}
+
+.btn-outline-primary,
+.btn-outline-info {
+ color: var(--button-color);
+ border-color: var(--button-color);
+}
+
+.btn-outline-primary:hover,
+.btn-outline-info:hover,
+.btn-check:active+.btn-outline-primary,
+.btn-check:checked+.btn-outline-primary,
+.btn-outline-primary.active,
+.btn-outline-primary.dropdown-toggle.show,
+.btn-outline-primary:active,
+.btn-check:active+.btn-outline-info,
+.btn-check:checked+.btn-outline-info,
+.btn-outline-info.active,
+.btn-outline-info.dropdown-toggle.show,
+.btn-outline-info:active {
+ color: var(--button-text-hover);
+ border-color: var(--button-color-hover);
+ background-color: var(--button-color-hover);
+}
+
+.btn-check:focus+.btn-outline-primary,
+.btn-outline-primary:focus,
+.btn-check:focus+.btn-outline-info,
+.btn-outline-info:focus,
+.btn-check:active+.btn-outline-primary:focus,
+.btn-check:checked+.btn-outline-primary:focus,
+.btn-outline-primary.active:focus,
+.btn-outline-primary.dropdown-toggle.show:focus,
+.btn-outline-primary:active:focus,
+.btn-check:active+.btn-outline-info:focus,
+.btn-check:checked+.btn-outline-info:focus,
+.btn-outline-info.active:focus,
+.btn-outline-info.dropdown-toggle.show:focus,
+.btn-outline-info:active:focus {
+ box-shadow: 0 0 0 0.25rem rgb(var(--accent-color), .5);
+}
+
+/* FORMS */
+.form-control {
+ color: #fff;
+ background-color: rgba(0, 0, 0, .15);
+ border: 1px solid rgba(0, 0, 0, .15);
+}
+
+.form-control:focus {
+ color: #fff;
+ background: #1f1f1f;
+ border-color: rgba(255, 255, 255, .15);
+ outline: 0;
+ box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0);
+}
+
+textarea.form-control:focus {
+ color: #fff;
+ background: rgba(0, 0, 0, .35);
+ border-color: rgba(255, 255, 255, .15);
+ outline: 0;
+ box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 0%);
+}
+
+.form-control:disabled,
+.form-control[readonly] {
+ background-color: rgba(255, 255, 255, .15);
+ opacity: 1;
+}
+
+.form-check-input:checked {
+ background-color: rgb(var(--accent-color));
+ border-color: rgb(var(--accent-color));
+}
+
+.form-check-input:focus {
+ border-color: rgb(var(--accent-color));
+ outline: 0;
+ box-shadow: 0 0 0 0.25rem rgb(var(--accent-color), .25);
+}
+.dropzone {
+ border: 2px dashed rgb(255 255 255 / 30%);
+}
+/* PAGINATION */
+.page-link {
+ color: var(--button-text);
+ background-color: var(--button-color);
+ border: 1px solid var(--button-color);
+}
+
+.page-link:hover {
+
+ color: var(--button-text-hover);
+ background-color: var(--button-color-hover);
+ border: 1px solid var(--button-color-hover);
+}
+
+.page-link:focus {
+ color: var(--button-text-hover);
+ background-color: var(--button-color-hover);
+ box-shadow: 0 0 0 0.25rem rgb(var(--accent-color) / 25%);
+}
+
+.page-item.disabled .page-link {
+ color: var(--text-muted);
+ pointer-events: none;
+ background-color: rgba(255, 255, 255, .08);
+ border-color: rgba(255, 255, 255, .08);
+}
+
+/* CARDS */
+.card {
+ background-color: rgba(0, 0, 0, .25);
+}
+
+.image-card:hover .overlay {
+ opacity: 1;
+ transition: opacity .3s ease-in-out;
+ -moz-transition: opacity .3s ease-in-out;
+ -webkit-transition: opacity .3s ease-in-out;
+ background: rgba(0, 0, 0, .5);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+}
+
+/* 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/index.html b/index.html
index e373e561..def03104 100644
--- a/index.html
+++ b/index.html
@@ -325,6 +325,12 @@
Dozzle
+
+ 
+
+ Dozzle
+