mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2026-07-10 15:56:28 -04:00
FE: skeleton uplift
This commit is contained in:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user