theme.park/css/base/netdata/netdata-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			 */


body,
[class*="styled__SocialMediaContainer-"] {
    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;
    color: var(--text);
}

* {
    outline: none !important;
}

/* TEXT */

h1,
h2,
h3,
h4,
h5,
h6,
label:not(.toggle-on.btn, .toggle-off.btn),
legend {
    color: var(--text-hover) !important;
}

.dashboard-context-info {
    color: var(--text);
}

a,
.dashboard-context-info a {
    color: var(--link-color) !important;
}

a:hover,
.dashboard-context-info a:hover {
    color: var(--link-color-hover) !important;
}

.loadOverlay {
    color: var(--text) !important;
    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;
}

/* Navbar */
.navbar-default {
    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;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    background-color: rgba(0, 0, 0, .25) !important;
    color: var(--text-hover) !important;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    background-color: rgba(0, 0, 0, .25) !important;
}

.navbar-default,
.navbar-inverse {
    border: 0px solid rgba(0, 0, 0, 0.6) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important;
}

.navbar-default .navbar-brand {
    color: var(--text-hover) !important;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: var(--text-hover) !important;
    background-color: rgba(0, 0, 0, .25) !important;
}

.navbar-default .navbar-nav>li>a,
.navbar-inverse .navbar-nav>li>a {
    border-right: 1px solid rgba(0, 0, 0, 0) !important;
    border-left: 1px solid rgba(0, 0, 0, 0) !important;
    color: var(--text-hover) !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    background-color: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #00000000 !important;
    color: rgb(var(--accent-color));
}

.nav>li>a:hover,
.nav>li>a:focus {
    text-decoration: none;
    background-color: #3e444c;
}

.nav>li>a:hover,
.nav>li>a:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.nav-tabs>li>a:hover {
    border-color: transparent;
}

.nav-tabs {
    border-bottom: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

#my-netdata-dropdown-content .agent-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.sign-in-btn {
    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;
}

.dropdown-menu,
[class*="__Dropdown-"],
[class*="documentation__Container-sc-"],
[class*="styled__PickerBox-"] {
    background: var(--drop-down-menu-bg) !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;
    border: 0px !important;
}

[class*="styled__ShortPickElement-"] {
    color: var(--link-color);
}

[class*="styled__ShortPickElement-"]:hover {
    color: var(--link-color-hover);
}

.DateInput_input__focused {
    border: 1px solid rgb(var(--accent-color));

}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover,
.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
    background: rgb(var(--accent-color));
    color: var(--label-text-color);
}

.CalendarDay__default:hover {
    background: var(--accent-color-hover);
    color: var(--label-text-color);
}

[class*="item__PanelRowContainer-"]:hover {
    background: rgba(255, 255, 255, 0.15);
}



.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

.modal-content {
    background: var(--modal-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;
}

.modal-header {
    background: var(--modal-header-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;
    border-bottom: 1px solid rgb(var(--accent-color)) !important;
}

.modal-footer {
    background: var(--modal-footer-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;
    border-top: 1px solid rgb(var(--accent-color)) !important;
}

.nav-tabs {
    border-bottom: 1px solid rgb(var(--accent-color)) !important;
}

.panel {
    background: rgba(0, 0, 0, 0.45) !important;
}

.panel-default>.panel-heading {
    background-color: transparent !important;
}

table {
    background: transparent !important;
}

.table-hover>tbody>tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.table>thead>tr>th {
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}

#my-netdata-dropdown-content hr {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    background: var(--modal-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;
    border-top: 1px solid #00000000 !important;
}

.multi-column-dropdown li a:hover {
    background: var(--modal-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;
}

.close,
.close:hover,
.close:focus {
    color: var(--text-hover) !important;
}

/* System Overview */
.dashboard-sidebar .nav>.active>a,
.dashboard-sidebar .nav>.active:hover>a,
.dashboard-sidebar .nav>.active:focus>a {
    color: rgb(var(--accent-color)) !important;
    border-left: 2px solid rgb(var(--accent-color)) !important;
}

[class*="sidebar__Wrapper-"] {
    background-color: rgba(0, 0, 0, 0.25);
}

[class*="sidebar__Wrapper-"] [class*="flex-sc-"]:not([class*="collapsible__Animated-"]) {
    background: transparent;
}

[class*="collapsible__Animated-"] {
    background: var(--main-bg-color);
}

[class*="header__Wrapper-"] {
    background: var(--main-bg-color);
}

[class*="styled__StyledButton-"] .button-icon {
    fill: rgb(var(--accent-color)) !important;
}

[class*="styled__StyledButton-"]:hover .button-icon {
    fill: var(--accent-color-hover) !important;
}

/*code*/
code {
    color: var(--label-text-color) !important;
    background-color: rgb(var(--accent-color)) !important;
}

/* System Overview metrics */
.gaugeChartTitle,
.gaugeChartUnits,
.gaugeChartMax,
.gaugeChartMin,
.gaugeChartLabel,
.easyPieChartTitle,
.easyPieChartLabel,
.easyPieChartUnits {
    color: var(--text-hover) !important;
}

.netdata-legend-value,
.netdata-legend-toolbox,
.netdata-legend-toolbox-button,
.dygraph-axis-label {
    background-color: rgba(0, 0, 0, 0) !important;
    color: var(--text-hover) !important;
}

.netdata-legend-resize-handler {
    background-color: rgba(0, 0, 0, 0) !important;
    color: var(--text-hover) !important;
}

.netdata-legend-name-table-line {
    border-bottom-width: 0px !important;
}

/* Sidebar */
.dashboard-sidebar .nav>li>a {
    color: var(--text);
}

.dashboard-sidebar .nav>li>a:focus,
.dashboard-sidebar .nav>li>a:hover {
    padding-left: 19px;
    color: var(--text-hover);
    text-decoration: none;
    background-color: transparent;
    border-left: 1px solid rgb(var(--accent-color));
}

small,
.small {
    color: var(--text-muted);
}

.action-button {
    color: var(--button-text-hover) !important;
}

hr {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.pagination>li>a,
.pagination>li>span {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid transparent !important;
}

.pagination>li>a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Buttons */
.btn-default:not([class*="toggle"]) {
    background-color: var(--button-color);
    color: var(--button-text);
    border-color: var(--button-color);
}

a[class*="styled__StyledButton-"],
[data-testid*="date-picker::click-apply::global-view-"] {
    background-color: var(--button-color) !important;
    color: var(--button-text) !important;
    border-color: var(--button-color) !important;
}

a[class*="styled__StyledButton-"]:hover,
a[class*="styled__StyledButton-"]:active,
[data-testid*="date-picker::click-apply::global-view-"]:hover,
[data-testid*="date-picker::click-apply::global-view-"]:active {
    background-color: var(--button-color-hover) !important;
    color: var(--button-text-hover) !important;
    border-color: var(--button-color-hover) !important;
}

.btn-default:hover:not([class*="toggle"]) {
    background-color: var(--button-color-hover);
    color: var(--button-text-hover);
    border-color: var(--button-color-hover);
}

.btn-default:active:not(.open>.dropdown-toggle.btn-default):not([class*="toggle"]),
.btn-default.active:not(.open>.dropdown-toggle.btn-default):not([class*="toggle"]) {
    background-color: var(--button-color-hover);
    border-color: var(--button-color-hover);
    color: var(--button-text-hover);
}

/* NAV */
[class^="with-panel"] {
    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;
}

[class*="styled__ListContainer"],
[class*="container__Container-"] div,
[class*="styled__PanelContainer"],
[class*="styled__StyledHeader"] {
    background: var(--modal-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;
    color: var(--text-hover);
}


[class^="styled__BottomPanel"] {
    background: #0000;
}

[class^=".styled__StyledSpaceBarPlus"] {
    background: rgb(var(--accent-color));
    border-color: rgb(var(--accent-color));
}