461 lines
10 KiB
SCSS
461 lines
10 KiB
SCSS
$txadmin-dark-900: #222326;
|
|
$txadmin-dark-950: #222326;
|
|
$txadmin-dark-800: lighten($txadmin-dark-900, 8%);
|
|
$txadmin-dark-700: lighten($txadmin-dark-800, 8%);
|
|
$txadmin-dark-600: lighten($txadmin-dark-700, 8%);
|
|
$txadmin-dark-secondary: #ebedef;
|
|
// Default:
|
|
// #636f83 dark
|
|
// #ced2d8 secondary
|
|
// #ebedef light
|
|
|
|
$txadmin-text-color: #FFFFFF;
|
|
$txadmin-text-color-inverse: #111111;
|
|
$txadmin-border-color: $txadmin-dark-700;
|
|
|
|
$txadmin-primary: #00bf8f;
|
|
$txadmin-secondary: #3ab8cd;
|
|
$txadmin-danger: #ff148f;
|
|
|
|
:root {
|
|
--primary: #{$txadmin-primary} !important;
|
|
--secondary: #{$txadmin-secondary} !important;
|
|
--danger: #{$txadmin-danger} !important;
|
|
}
|
|
|
|
//Adapting to the new UI
|
|
//shadcn's default
|
|
$radius: 0.5rem;
|
|
$radius-lg: $radius;
|
|
$radius-md: calc($radius - 2px);
|
|
$radius-sm: calc($radius - 4px);
|
|
$border-color: hsl(224 5.6% 21.2%);
|
|
|
|
|
|
.card:first-child,
|
|
.card-header:first-child,
|
|
.card-body {
|
|
border-radius: $radius-lg;
|
|
background-color: #F0F1F4;
|
|
}
|
|
|
|
|
|
/**
|
|
* A dark theme for all, by GoatGeek#0001
|
|
*
|
|
* _))
|
|
* > *\ _~
|
|
* `;'\\__-' \_
|
|
* | ) _ \ \
|
|
* / / `` w w
|
|
* w w
|
|
*/
|
|
body.theme--dark {
|
|
|
|
/*************************
|
|
* CORE UI MODIFICATIONS
|
|
*************************/
|
|
|
|
// ----- Core Styles
|
|
// Shape CoreUI in the darkness
|
|
&, .c-app, .c-main, .c-footer, .c-header {
|
|
background: #0000;
|
|
color: $txadmin-text-color;
|
|
}
|
|
|
|
// Stepper for the setup pages
|
|
ul.stepper .step:not(:last-of-type)::after {
|
|
background-color: rgba(75, 75, 75, 1);
|
|
}
|
|
|
|
.list-group-accent .list-group-item-accent-secondary {
|
|
border-left: 4px solid $txadmin-dark-600;
|
|
}
|
|
|
|
// ----- Progress bar
|
|
.progress {
|
|
background-color: $txadmin-dark-800;
|
|
}
|
|
|
|
// ----- Switches
|
|
.c-switch-slider, .c-switch-slider::before {
|
|
background-color: $txadmin-dark-800;
|
|
border-color: $txadmin-dark-700;
|
|
// color: $txadmin-text-color;
|
|
transition: .15s ease-out;
|
|
}
|
|
.c-switch-input:focus ~ .c-switch-slider {
|
|
color: $txadmin-text-color;
|
|
background-color: $txadmin-dark-700;
|
|
border-color: lighten($txadmin-dark-600, 10%) !important;
|
|
outline: 0;
|
|
box-shadow: none;
|
|
}
|
|
.c-switch-success .c-switch-input:checked + .c-switch-slider {
|
|
background-color: #2eb85c;
|
|
border-color: #248f48;
|
|
}
|
|
|
|
// ----- Buttons
|
|
// FIXME: this specific instruction was breaking lots of things
|
|
// .btn:not(.btn-outline-danger):not(.btn-outline-primary):not(.btn-outline-warning):not(.btn-stack-overflow):not(.btn-linkedin) {
|
|
// font-weight: 700;
|
|
// background: $txadmin-dark-800;
|
|
// border-color: transparent;
|
|
// color: $txadmin-text-color !important;
|
|
// transition: color 300ms ease-in-out, background 300ms ease-in-out;
|
|
//
|
|
// &:hover {
|
|
// background: opacify($txadmin-primary, 0.1);
|
|
// }
|
|
// }
|
|
|
|
// ----- Text color styles
|
|
a:not(.btn):not(.c-sidebar-nav-link):not(.alert-link) {
|
|
&, &:hover {
|
|
color: $txadmin-primary;
|
|
}
|
|
|
|
&.nav-link-red {
|
|
color: $txadmin-danger;
|
|
}
|
|
}
|
|
|
|
.c-sidebar-nav-link.c-active {
|
|
border-left: $txadmin-primary solid 4px;
|
|
}
|
|
|
|
.c-sidebar .c-sidebar-nav-dropdown-toggle:hover,
|
|
.c-sidebar .c-sidebar-nav-link:hover {
|
|
color: #fff;
|
|
background: $txadmin-primary !important;
|
|
}
|
|
|
|
.text-body {
|
|
color: $txadmin-text-color !important;
|
|
}
|
|
|
|
.text-danger {
|
|
color: $txadmin-danger !important;
|
|
}
|
|
.text-danger:hover {
|
|
color: darken($txadmin-danger, 15%) !important;
|
|
}
|
|
|
|
.text-muted {
|
|
color: #969696 !important;
|
|
}
|
|
|
|
// ----- Primary color overrides
|
|
.text-primary {
|
|
color: $txadmin-primary !important;
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: $txadmin-primary !important;
|
|
}
|
|
|
|
.btn {
|
|
&.btn-primary {
|
|
background: $txadmin-primary;
|
|
border-color: $txadmin-primary;
|
|
}
|
|
|
|
&.btn-outline-primary {
|
|
color: $txadmin-primary;
|
|
border-color: $txadmin-primary;
|
|
}
|
|
|
|
&.btn-outline-dark {
|
|
color: $txadmin-dark-secondary;
|
|
border-color: $txadmin-dark-secondary;
|
|
&:hover {
|
|
background-color: $txadmin-dark-secondary;
|
|
color: $txadmin-dark-700;
|
|
}
|
|
}
|
|
|
|
&.btn-primary, &.btn-outline-primary {
|
|
&:hover {
|
|
background-color: $txadmin-primary;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----- Body Element Changes
|
|
// Darken borders
|
|
.c-footer, .c-header, .card-footer, .card-header,
|
|
.modal-body, .modal-header, .modal-footer,
|
|
.border-right {
|
|
border-color: $border-color !important;
|
|
}
|
|
|
|
// Darken backgrounds
|
|
.c-sidebar, .c-callout, .modal-content, .modal-body {
|
|
background: $txadmin-dark-900;
|
|
}
|
|
|
|
// ----- Alert elements
|
|
.alert {
|
|
&.alert-secondary {
|
|
background: $txadmin-dark-800;
|
|
color: $txadmin-text-color;
|
|
border-color: $txadmin-dark-700;
|
|
}
|
|
}
|
|
|
|
// ------ Nice scroll bars
|
|
$tx-scroll-bg: lighten($txadmin-dark-900, 3.75%);
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background: $tx-scroll-bg;
|
|
}
|
|
|
|
.thin-scroll::-webkit-scrollbar-track {
|
|
background-color: $tx-scroll-bg;
|
|
border-right: 1px solid $tx-scroll-bg;
|
|
border-left: 1px solid $tx-scroll-bg;
|
|
}
|
|
|
|
.thin-scroll::-webkit-scrollbar-thumb {
|
|
background-color: #333;
|
|
background-clip: content-box;
|
|
border-color: transparent;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.thin-scroll:hover::-webkit-scrollbar-thumb {
|
|
background-color: #444;
|
|
}
|
|
|
|
// ----- Tabs & Navs
|
|
.nav-tabs {
|
|
border: 0;
|
|
|
|
.nav-link {
|
|
border-color: $txadmin-dark-700;
|
|
border-radius: $radius-md;
|
|
transition: background-color 300ms ease-in-out;
|
|
|
|
&.active {
|
|
color: $txadmin-dark-900 !important;
|
|
font-weight: 600;
|
|
border: 1px solid $txadmin-primary !important;
|
|
border-bottom-width: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-link {
|
|
&:hover {
|
|
background-color: lighten($txadmin-dark-900, 2.5%);
|
|
}
|
|
|
|
&.nav-link-disabled {
|
|
color: $txadmin-dark-600 !important;
|
|
}
|
|
|
|
&.active {
|
|
color: $txadmin-dark-900 !important;
|
|
font-weight: 600;
|
|
|
|
&.nav-link-red{
|
|
background-color: #e55353 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-pills .nav-link.active,
|
|
.nav-tabs .nav-link.active,
|
|
.nav-pills .show > .nav-link {
|
|
@extend .btn;
|
|
background: $txadmin-primary;
|
|
color: $txadmin-text-color-inverse;
|
|
}
|
|
|
|
.c-header .c-header-nav .c-header-nav-btn, .c-header .c-header-nav .c-header-nav-link {
|
|
color: $txadmin-primary;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
border-color: $txadmin-border-color;
|
|
|
|
.dropdown-item, & {
|
|
background-color: $txadmin-dark-800;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background-color: $txadmin-dark-900;
|
|
}
|
|
}
|
|
|
|
.dropdown-header {
|
|
background-color: $txadmin-dark-800;
|
|
}
|
|
|
|
.c-header .c-header-toggler {
|
|
color: white;
|
|
}
|
|
|
|
// ----- Modals / Popups / Notifications
|
|
pre, .close {
|
|
color: #fff;
|
|
}
|
|
[data-notify="message"] > pre{
|
|
color: $txadmin-dark-900;
|
|
}
|
|
button[data-notify="dismiss"]{
|
|
color: $txadmin-dark-900;
|
|
}
|
|
|
|
// ----- Forms
|
|
.form-control, .btn, .c-callout {
|
|
border-radius: $radius-md;
|
|
}
|
|
|
|
.form-control, .input-group-text {
|
|
background: $txadmin-dark-800;
|
|
border-color: $txadmin-dark-700;
|
|
color: $txadmin-text-color;
|
|
}
|
|
|
|
.form-control[disabled], .form-control[readonly]{
|
|
background: $txadmin-dark-900;
|
|
border-color: $txadmin-dark-700;
|
|
color: $txadmin-text-color;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-control:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba($txadmin-primary, .15);
|
|
}
|
|
|
|
.form-control.is-valid, .was-validated .form-control:valid {
|
|
border-color: #2eb85c;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%232eb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
|
|
}
|
|
|
|
// ----- Tables
|
|
.table {
|
|
&, td {
|
|
border-color: $txadmin-border-color !important;
|
|
}
|
|
|
|
tr {
|
|
color: $txadmin-text-color;
|
|
}
|
|
|
|
thead th {
|
|
border-top-color: $txadmin-dark-700;
|
|
border-bottom-color: $txadmin-dark-700;
|
|
}
|
|
|
|
strong, .table-hover tbody tr:hover {
|
|
color: $txadmin-primary;
|
|
}
|
|
|
|
.thead-light th {
|
|
background-color: $txadmin-dark-800 !important;
|
|
color: $txadmin-text-color;
|
|
font-size: 1.175em;
|
|
font-family: Consolas, Courier, Droid Sans Mono, monospace;
|
|
}
|
|
}
|
|
|
|
// ----- Cards
|
|
.card {
|
|
border: 1px solid $border-color;
|
|
border-radius: $radius-lg !important;
|
|
|
|
&, .card-header, .card-body, .card-footer {
|
|
background-color: $txadmin-dark-950;
|
|
}
|
|
|
|
.card-header, .card-body {
|
|
&, p {
|
|
color: $txadmin-text-color;
|
|
}
|
|
}
|
|
|
|
.card-header {
|
|
& > h5, .card-title {
|
|
font-size: 1.05rem;
|
|
// border-radius: 0;
|
|
border: 0 solid transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----- Pagination
|
|
.pagination {
|
|
& .page-link {
|
|
border-color: $txadmin-border-color !important;
|
|
background-color: $txadmin-dark-900;
|
|
&:hover {
|
|
background-color: $txadmin-dark-700;
|
|
}
|
|
}
|
|
|
|
& > .page-item.disabled > a{
|
|
color: $txadmin-dark-600 !important;
|
|
}
|
|
}
|
|
|
|
|
|
/***********************
|
|
* TXADMIN ELEMENTS
|
|
***********************/
|
|
#modPlayerMain-notes {
|
|
background-color: $txadmin-dark-900;
|
|
}
|
|
.attentionText {
|
|
color: $txadmin-text-color;
|
|
}
|
|
|
|
// Player log entries
|
|
.logEntry {
|
|
color: $txadmin-text-color;
|
|
|
|
&:hover {
|
|
background-color: $txadmin-dark-800 !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Deployment things
|
|
*/
|
|
.bigbutton {
|
|
background: $txadmin-dark-800;
|
|
|
|
&:hover {
|
|
background-color: $txadmin-primary;
|
|
}
|
|
}
|
|
.blur-input:not(:focus):not(:placeholder-shown) {
|
|
color: transparent !important;
|
|
text-shadow: 0 0 5px rgba(235, 235, 235, 0.5) !important;
|
|
}
|
|
|
|
/**
|
|
* txAdmin player list
|
|
*/
|
|
.playerlist {
|
|
.player {
|
|
&:hover {
|
|
background-color: $txadmin-dark-800;
|
|
}
|
|
|
|
.pname {
|
|
color: #e6e6e6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plheader {
|
|
background-color: $txadmin-dark-800 !important;
|
|
}
|
|
}
|