topaLE
/
theme.park.app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

xbb init

pull/214/head
Marius 4 years ago
parent
c5bb640e0a
commit
1119b61629
8 changed files with 472 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      CSS/themes/xbackbone/aquamarine.css
  2. 33
      CSS/themes/xbackbone/dark.css
  3. 33
      CSS/themes/xbackbone/hotline.css
  4. 33
      CSS/themes/xbackbone/organizr-dark.css
  5. 33
      CSS/themes/xbackbone/plex.css
  6. 33
      CSS/themes/xbackbone/space-gray.css
  7. 268
      CSS/themes/xbackbone/xbackbone-base.css
  8. 6
      index.html

33
CSS/themes/xbackbone/aquamarine.css
View File

@ -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;
}

33
CSS/themes/xbackbone/dark.css
View File

@ -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;
}

33
CSS/themes/xbackbone/hotline.css
View File

@ -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;
}

33
CSS/themes/xbackbone/organizr-dark.css
View File

@ -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;
}

33
CSS/themes/xbackbone/plex.css
View File

@ -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;
}

33
CSS/themes/xbackbone/space-gray.css
View File

@ -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;
}

268
CSS/themes/xbackbone/xbackbone-base.css
View File

@ -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;
}

6
index.html
View File

@ -325,6 +325,12 @@
</p> </p>
<p>Dozzle</p> <p>Dozzle</p>
</a> </a>
<a class="col align-self-center app-container text-center p-2 m-1"
href="https://docs.theme-park.dev/themes/xbackbone">
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" />
</p>
<p>Dozzle</p>
</a>
</div> </div>
</div> </div>
</section> </section>

Write Preview
Loading…
Cancel
Save