FE: skeleton uplift

This commit is contained in:
jokob-sk
2026-06-24 17:35:31 +10:00
parent 155081dc31
commit 5b42dbf2d7
11 changed files with 133 additions and 60 deletions

View File

@@ -14,11 +14,20 @@
--color-aqua: #00c0ef;
--color-lightblue: #3c8dbc;
--color-blue: #0060df;
--color-black: #000;
--color-white: #fff;
--color-green: #00a65a;
--color-yellow: #f39c12;
--color-red: #dd4b39;
--color-gray: #8c8c8c;
--color-lightgray: #bec5cb;
--color-white: #fff;
--skel-base: #353c42;
--skel-shine: #272c30;
--skel-section: #272c30;
--skel-panel-bg: #272c30;
--skel-border: #2a323e;
--skel-bg: #353c42;
}
:root {
@@ -35,13 +44,13 @@ html {
body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
background-color: #353c42 !important;
color: #bec5cb !important;
color: var(--color-lightgray) !important;
}
h4 {
color: #44def1;
}
.content-header > .breadcrumb > li > a {
color: #bec5cb;
color: var(--color-lightgray);
}
.table > thead > tr.odd,
@@ -69,7 +78,7 @@ h4 {
.dataTables_wrapper input[type="search"] {
background-color: #353c42;
border: 0;
color: #bec5cb;
color: var(--color-lightgray);
}
.dataTables_paginate .pagination li > a {
background-color: #353c42;
@@ -82,7 +91,7 @@ h4 {
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
cursor: not-allowed;
color: #bec5cb;
color: var(--color-lightgray);
background-color: #353c42;
border-color: #353c42;
}
@@ -91,7 +100,7 @@ h4 {
.pagination > li > span:focus,
.pagination > li > span:hover {
z-index: 2;
color: #bec5cb;
color: var(--color-lightgray);
background-color: #54606b;
border-color: #54606b;
}
@@ -122,7 +131,7 @@ h4 {
background-color: #32393e;
}
.sidebar a {
color: #bec5cb;
color: var(--color-lightgray);
}
.sidebar a:hover {
text-decoration: none;
@@ -172,7 +181,7 @@ h4 {
.box-comment,
.comment-text,
.comment-text .username {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #272c30;
}
.box-comments .box-comment {
@@ -190,11 +199,11 @@ h4 {
}
.box-solid > .box-header,
.box > .box-header {
color: #bec5cb;
color: var(--color-lightgray);
}
.box-solid > .box-header .btn,
.box > .box-header .btn {
color: #bec5cb;
color: var(--color-lightgray);
}
.main-header .navbar {
@@ -202,7 +211,7 @@ h4 {
}
.main-header .navbar .nav > li > a,
.main-header .navbar .nav > li > .navbar-text {
color: #bec5cb;
color: var(--color-lightgray);
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:active,
@@ -215,14 +224,14 @@ h4 {
color: #f6f6f6;
}
.main-header .navbar .sidebar-toggle {
color: #bec5cb;
color: var(--color-lightgray);
}
.main-header .navbar .sidebar-toggle:hover {
color: #f6f6f6;
background-color: rgba(0, 0, 0, 0.1);
}
.timeline li .timeline-item {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #272c30;
border-color: #353c42;
}
@@ -230,7 +239,7 @@ h4 {
border-bottom-color: #353c42;
}
.nav-stacked > li > a {
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-stacked > li > a:hover {
color: white;
@@ -244,7 +253,7 @@ h4 {
.nav-tabs-custom {
background-color: #272c30;
border-top-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
}
.main-footer .nav-tabs,
.nav-tabs-custom .nav-tabs {
@@ -259,14 +268,14 @@ h4 {
background: rgba(64, 72, 80, 0.666);
}
.nav-tabs-custom > .nav-tabs > li {
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
border-left-color: #30383f;
border-right-color: #30383f;
background-color: #30383f;
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
border-top-color: #d2d6de;
@@ -281,11 +290,11 @@ h4 {
.nav-tabs-custom > .nav-tabs > li:hover > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
background-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
}
.list-group {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #272c30;
}
.list-group .list-group-item {
@@ -297,23 +306,23 @@ h4 {
}
.select2 .select2-selection {
background-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #353c42;
}
.select2 .select2-selection .select2-container--default,
.select2 .select2-selection .select2-selection--single,
.select2 .select2-selection .select2-selection--multiple,
.select2 .select2-selection .select2-selection__rendered {
color: #bec5cb;
color: var(--color-lightgray);
}
.select2-dropdown {
background-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #353c42;
}
.select2-dropdown .select2-search__field {
background-color: #272c30;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #353c42;
}
.select2-container--default.select2-container--open {
@@ -367,7 +376,7 @@ h4 {
code,
pre {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #353c42;
}
@@ -393,7 +402,7 @@ td.highlight {
.btn-default {
box-shadow: none;
background-color: #3e464c;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #353c42;
}
@@ -406,7 +415,7 @@ td.highlight {
.btn-outline:hover
{
border: 1px solid var(--color-black);
background-color: var(--color-black);;
background-color: var(--color-black);
color: var(--color-white);
}
@@ -472,7 +481,7 @@ td.highlight {
}
.daterangepicker td.in-range {
background-color: #1e2226;
color: #bec5cb;
color: var(--color-lightgray);
}
input,
select,
@@ -490,7 +499,7 @@ select.form-control,
.form-control,
div.dataTables_wrapper div.dataTables_length select {
background-color: #353c42;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #3d444b;
}
.form-control[disabled],
@@ -510,7 +519,7 @@ textarea[readonly],
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
background-color: #4c5761;
color: #bec5cb;
color: var(--color-lightgray);
border: 1px solid #171c20;
}
.table-striped > tbody > tr:nth-of-type(2n + 1) {
@@ -522,14 +531,14 @@ textarea[readonly],
background-color: #3e464c;
border: 1px solid #353c42;
color: #bec5cb;
color: var(--color-lightgray);
}
#settingsPage .panel-heading:hover {
background-color: #272c30;
}
.box.box-solid.box-info,
.box.box-solid.box-info > .box-header {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #367fa9 !important;
border: 1px solid #367fa9;
}
@@ -564,7 +573,7 @@ input[type="password"]::-webkit-caps-lock-indicator {
.box .overlay > .fa,
.overlay-wrapper .overlay > .fa,
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
color: #bec5cb !important;
color: var(--color-lightgray) !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
@@ -643,6 +652,9 @@ input[type="password"]::-webkit-caps-lock-indicator {
background-color: #353c42;
border-color: #888888;
}
#txtRecord:hover {
color: var(--color-lightgray);
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: var(--datatable-bgcolor);
color: var(--fbc-white);
@@ -663,14 +675,14 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
.nav-tabs-custom > .nav-tabs > li:hover > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
background-color: #272c30;
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
border-left-color: #30383f;
border-right-color: #30383f;
background-color: #272c30;
color: #bec5cb;
color: var(--color-lightgray);
}
.nav-tabs-custom > .nav-tabs {
background-color: #353c42;
@@ -700,7 +712,7 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
}
.login-box-body {
color: #bec5cb;
color: var(--color-lightgray);
background-color: #272c30;
}
@@ -716,12 +728,12 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
/* Chevron color */
.select2-container .select2-selection__arrow::after {
color: #bec5cb;
color: var(--color-lightgray);
}
/* Chevron color */
.select2-selection .select2-selection--single {
color: #bec5cb;
color: var(--color-lightgray);
}
.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
@@ -730,12 +742,12 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
.select2-container--default .select2-selection--multiple {
background-color: #353c42 !important;
color: #bec5cb;
color: var(--color-lightgray);
}
.select2-container--default .select2-selection--single .select2-selection__rendered .custom-chip
{
color: #bec5cb;
color: var(--color-lightgray);
}
#hover-box
@@ -766,13 +778,3 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
font-size: .85em;
cursor: pointer;
}
/* Settings skeleton - dark theme */
:root {
--skel-base: #353c42;
--skel-shine: #272c30;
--skel-section: #272c30;
--skel-panel-bg: #272c30;
--skel-border: #2a323e;
--skel-bg: #353c42;
}