You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
7.0 KiB
368 lines
7.0 KiB
$theme-name: 'dark';
|
|
|
|
// Notification & Alert.
|
|
$red: #e45959;
|
|
$lighter-red: #433131;
|
|
|
|
$dark-yellow: #e99003;
|
|
$yellow: #a78820;
|
|
$lighter-yellow: #2f280a;
|
|
|
|
$green: #59db8f;
|
|
$lighter-green: #32453a;
|
|
|
|
$blue: #429ae3;
|
|
|
|
$disabled-bg-color: #2b2b2b;
|
|
$disabled-item-color: #808080;
|
|
$disabled-item-bg-color: #383838;
|
|
|
|
// Layout
|
|
$header-bg-color: #2b2b2b;
|
|
|
|
$sidebar-color: #9c9c9c;
|
|
$sidebar-bg-color: #454545;
|
|
|
|
// Main
|
|
$font-color: #f2f2f2;
|
|
$font-selected-color: #f2f2f2;
|
|
$font-alt-color: #737373;
|
|
$body-bg-color: #0e1012;
|
|
$overlay-bg-color: #000000;
|
|
$overlay-border-color: #383838;
|
|
|
|
// Main menu
|
|
$menu-main-color: #f2f2f2;
|
|
|
|
$menu-main-hover-bg-color: #0e0e0e;
|
|
|
|
$menu-main-selected-bg-color: #202020;
|
|
$menu-main-selected-border-color: #c5c5c5;
|
|
|
|
$menu-main-expanded-bg-color: #0d0d0d;
|
|
|
|
$menu-main-submenu-color: #f2f2f2;
|
|
$menu-main-submenu-bg-color: #2b2b2b;
|
|
$menu-main-submenu-border-color: #0d0f11;
|
|
$menu-main-submenu-hover-bg-color: #0e0e0e;
|
|
$menu-main-submenu-selected-bg-color: #1c1c1c;
|
|
$menu-main-submenu-selected-border-color: #c5c5c5;
|
|
$menu-main-submenu-next-level-bg: #454545 !default;
|
|
$menu-main-submenu-next-level-shadow: rgba(#2b2b2b, .35) !default;
|
|
|
|
// UI
|
|
$ui-bg-color: #2b2b2b;
|
|
$ui-bg-selected-color: #4f4f4f;
|
|
$ui-hover-bg-color: #383838;
|
|
$ui-border-color: #303030;
|
|
$ui-placeholder-background-color: darken($ui-hover-bg-color, 15%);
|
|
$ui-highlighted-parent-background-color: darken($ui-hover-bg-color, 10%);
|
|
|
|
$action-hover-color: #454545;
|
|
$action-border-color: #383838;
|
|
$action-shadow-color: rgba(0, 0, 0, .5);
|
|
|
|
$table-border-color: #383838;
|
|
|
|
$ui-tab-bg-selected-color: #69808d;
|
|
|
|
// Forms
|
|
$form-font-color: #e1e3ed;
|
|
$form-bg-color: #383838;
|
|
$form-border-color: #4f4f4f;
|
|
$form-focus-border-color: #768d99;
|
|
$form-fields-group-border-color: #383838;
|
|
|
|
$form-disabled-font-color: #525252;
|
|
$form-disabled-bg-color: #2b2b2b;
|
|
$form-disabled-border-color: #3d3d3d;
|
|
|
|
$form-search-icon-color: #b1b1b1;
|
|
|
|
$scrollbar-track-color: #1f1f1f;
|
|
$scrollbar-thumb-color: #383838;
|
|
|
|
$input-disabled-placeholder-color: #404040;
|
|
|
|
// Search form
|
|
$form-search-bg-color: #191919;
|
|
|
|
// Buttons
|
|
$btn-color: #f2f2f2;
|
|
$btn-bg-color: #69808d;
|
|
$btn-hover-bg-color: #5e737e;
|
|
|
|
$btn-alt-color: #768d99;
|
|
$btn-alt-bg-color: transparent;
|
|
|
|
$btn-form-hover-bg-color: #414141;
|
|
|
|
$btn-disabled-color: #525252;
|
|
$btn-disabled-bg-color: transparent;
|
|
$btn-disabled-border-color: #3d3d3d;
|
|
|
|
$btn-back-map-background-color: rgba(0, 0, 0, .8);
|
|
$btn-back-text-color: #ffffff;
|
|
$btn-back-background-hover: #768d99;
|
|
|
|
// Links
|
|
$link-color: #4796c4;
|
|
$link-hover-color: #4796c4;
|
|
$link-active-color: #4796c4;
|
|
$link-visited-color: #4796c4;
|
|
|
|
// Icons
|
|
$icon-color: #69808d;
|
|
|
|
$btn-icon-color: $icon-color;
|
|
$btn-icon-hover-color: lighten($icon-color, 20%);
|
|
$btn-icon-disabled-color: darken($icon-color, 20%);
|
|
|
|
// Error messages
|
|
$msg-bad-btn-color: $font-color;
|
|
|
|
// Analog clock
|
|
$clock-face-color: #383838;
|
|
$clock-hand-color: #f2f2f2;
|
|
$clock-hand-sec-color: #69808d;
|
|
$clock-lines-color: #4f4f4f;
|
|
|
|
// Gauge arcs
|
|
$gauge-empty-color: #383838;
|
|
$gauge-fill-color: #69808d;
|
|
$gauge-needle-fill-color: #f2f2f2;
|
|
$gauge-needle-stroke-color: #f2f2f2;
|
|
|
|
// Statuses
|
|
$problem-unack-fg-color: #ff3333;
|
|
$problem-ack-fg-color: #ff3333;
|
|
$ok-unack-fg-color: #00ff00;
|
|
$ok-ack-fg-color: #00ff00;
|
|
|
|
$status-border-color: rgba(#2b2b2b, .2);
|
|
$status-disabled-border-color: rgba(#f2f2f2, .2);
|
|
|
|
$status-grey-border-color: #3d3d3d;
|
|
|
|
// Multiselect
|
|
$multiselect-selected-bg-color: #696969;
|
|
|
|
// List table.
|
|
$compact-view-color: #000000;
|
|
$compact-view-tag-color: #ffffff;
|
|
$compact-view-tag-bg-color: $ui-bg-selected-color;
|
|
|
|
.timeline-axis {
|
|
border-right-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;
|
|
|
|
&::before {
|
|
background-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;
|
|
}
|
|
}
|
|
|
|
// Import compare.
|
|
$toc-title-color: #f2f2f2;
|
|
$toc-title-bg-color: #4f4f4f;
|
|
|
|
|
|
// Important! @import string should come after variables
|
|
@import 'screen.scss';
|
|
|
|
.sidebar {
|
|
&.is-compact:not(.is-opened) {
|
|
.form-search {
|
|
.search-icon {
|
|
opacity: .75;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tables.
|
|
.list-table {
|
|
thead th {
|
|
border-color: lighten($table-border-color, 3%);
|
|
}
|
|
|
|
&.compact-view {
|
|
tr {
|
|
&:hover {
|
|
td {
|
|
&.na-bg,
|
|
&.info-bg,
|
|
&.warning-bg,
|
|
&.average-bg,
|
|
&.high-bg,
|
|
&.disaster-bg {
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[class*='flh-'] {
|
|
td {
|
|
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
|
|
}
|
|
}
|
|
}
|
|
|
|
td {
|
|
&.na-bg,
|
|
&.info-bg,
|
|
&.warning-bg,
|
|
&.average-bg,
|
|
&.high-bg,
|
|
&.disaster-bg {
|
|
color: #000000;
|
|
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sticky-footer {
|
|
tfoot tr:first-of-type td {
|
|
border-color: lighten($table-border-color, 3%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-navigation-tabs {
|
|
& .csortable > .csortable-item > div,
|
|
& .csortable-list > .csortable-item > div:hover {
|
|
border: 1px solid transparent;
|
|
}
|
|
}
|
|
|
|
// Dashboard, widgets and iterators.
|
|
// To maintain code clarity:
|
|
// - Do not mix rules for dashboard view mode and dashboard edit mode.
|
|
// - Do not mix rules for widgets and iterators.
|
|
|
|
.dashboard-grid-widget {
|
|
&.dashboard-grid-widget-hidden-header {
|
|
&.dashboard-grid-widget-focus {
|
|
.dashboard-grid-widget-header {
|
|
box-shadow: 0 -6px 8px -2px rgba(0, 0, 0, .5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-grid-iterator {
|
|
&.dashboard-grid-iterator-focus {
|
|
.dashboard-grid-iterator-header {
|
|
box-shadow: 0 -6px 8px -2px rgba(0, 0, 0, .5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard.dashboard-is-edit-mode {
|
|
.dashboard-grid-widget {
|
|
&.ui-draggable-dragging {
|
|
&.dashboard-grid-widget-hidden-header {
|
|
.dashboard-grid-widget-header {
|
|
box-shadow: 0 -6px 8px -2px rgba(0, 0, 0, .5);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ui-resizable-resizing,
|
|
&.ui-draggable-dragging {
|
|
&::before {
|
|
box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.dashboard-grid-widget-header {
|
|
border-color: $ui-border-color;
|
|
}
|
|
|
|
.dashboard-grid-widget-contents {
|
|
border-color: $ui-border-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-grid-iterator {
|
|
&.ui-draggable-dragging {
|
|
.dashboard-grid-iterator-header {
|
|
box-shadow: 0 -6px 8px -2px rgba(0, 0, 0, .5);
|
|
}
|
|
}
|
|
|
|
&.ui-resizable-resizing,
|
|
&.ui-draggable-dragging {
|
|
&::before {
|
|
box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
.dashboard-grid-iterator-header {
|
|
border-color: $ui-border-color;
|
|
}
|
|
|
|
.dashboard-grid-iterator-contents {
|
|
.dashboard-grid-widget {
|
|
.dashboard-grid-widget-header {
|
|
border-color: $ui-border-color;
|
|
}
|
|
|
|
.dashboard-grid-widget-contents {
|
|
border-color: $ui-border-color;
|
|
}
|
|
}
|
|
|
|
.dashboard-grid-iterator-placeholder > div {
|
|
border-color: $ui-border-color;
|
|
}
|
|
}
|
|
|
|
.dashboard-grid-iterator-mask {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-grid-widget-placeholder > div {
|
|
background-color: darken($ui-bg-color, 3%);
|
|
}
|
|
}
|
|
|
|
.time-quick {
|
|
li {
|
|
a {
|
|
&:focus {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.totals-list {
|
|
color: darken($font-color, 85%);
|
|
}
|
|
|
|
// Widget "Host availability".
|
|
.host-avail-widget {
|
|
|
|
&.list-table {
|
|
color: darken($font-color, 85%);
|
|
|
|
tbody th {
|
|
color: $font-color;
|
|
}
|
|
}
|
|
|
|
.host-avail-total {
|
|
color: $font-color;
|
|
}
|
|
}
|
|
|
|
.breadcrumbs {
|
|
&>::after {
|
|
content: " /";
|
|
}
|
|
|
|
&>:last-child::after {
|
|
content: "";
|
|
}
|
|
}
|