theme.park/css/base/xbackbone/xbackbone-base.css

/*    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;
    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;
}

/* Scrollbar */
@media only screen and (min-width: 768px) {
    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    body {
        overflow-y: auto;
        height: 100%;
        background: var(--main-bg-color);
        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;
    }
}

::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-thumb {
    min-height: 50px;
    border: 3px solid transparent;
    border-radius: 8px;
    background-color: hsla(0, 0%, 100%, .2);
    background-clip: padding-box;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb:hover {
    min-height: 50px;
    border: 3px solid transparent;
    border-radius: 8px;
    background-color: hsla(0, 0%, 100%, .5);
    background-clip: padding-box;
}

/* 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,
.navbar-dark .navbar-nav .show>.nav-link,
.col-form-label {
    color: var(--text-hover);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: rgb(var(--accent-color));
}

.card-header {
    color: rgb(var(--accent-color));
}

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

pre {
    color: rgb(var(--accent-color));
}

/* LINKS */
a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-color-hover);
}

/* TOP NAV */
.bg-primary {
    background: rgba(0, 0, 0, .15) !important;
}

.navbar-dark .navbar-brand {
    color: rgb(var(--accent-color));
}

.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
    color: var(--accent-color-hover);
}

/* DROPDOWN MENU */
.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-header {
    color: var(--text-hover);
}

.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,
.table>thead {
    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,
.btn-check:focus+.btn-primary,
.btn-primary:focus {
    color: var(--button-text-hover);
    background-color: var(--button-color-hover);
    border-color: var(--button-color-hover);
}

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus,
.btn-check:focus+.btn-primary,
.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), .5);
}

.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);
    color: var(--button-text-hover);
    border-color: var(--button-color-hover);
    background-color: var(--button-color-hover);
}

.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgb(var(--accent-color) / 50%);
}

.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle {
    color: var(--button-text-hover);
    border-color: var(--button-color-hover);
    background-color: var(--button-color-hover);
}

.btn-outline-primary {
    color: var(--button-color);
    border-color: var(--button-color);
}

.btn-outline-primary:hover {
    color: var(--button-text-hover);
    border-color: var(--button-color-hover);
    background-color: var(--button-color-hover);
}

.btn-outline-primary.focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--button-color);
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
    color: var(--button-text-hover);
    border-color: var(--button-color-hover);
    background-color: var(--button-color-hover);
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--accent-color), .5)
}

.btn-outline-dark {
    color: var(--button-text);
    border-color: var(--button-color);
}

.btn-outline-dark:hover {
    color: var(--button-text-hover);
    border-color: var(--button-color-hover);
    background-color: var(--button-color-hover);
}

.btn-outline-dark.focus,
.btn-outline-dark:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--accent-color), .5)
}

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
    color: var(--button-color);
    background-color: transparent
}

.btn-outline-dark:not(:disabled):not(.disabled).active,
.btn-outline-dark:not(:disabled):not(.disabled):active,
.show>.btn-outline-dark.dropdown-toggle {
    color: var(--button-text-hover);
    border-color: var(--button-color-hover);
    background-color: var(--button-color-hover);
}

.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .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;
}