appsignal.com by khalilgharbaoui

/* ==UserStyle==
@name         appsignal.com
@version      20211224.03.49
@namespace    userstyles.world/user/khalilgharbaoui
@description  I never like the fact that AppSignal lacked dark mode support for hard core developers with eyestrain that sometimes have to do night shift debugging.

So I made my own style.
@author       khalilgharbaoui
@license      No License
==/UserStyle== */

@-moz-document domain("appsignal.com") {
#main {
	background-color: #282c34 !important;
	color: #fffefe !important;
}
#app {
	background-color: #282c34 !important;
	color: #fffefe !important;
}

.bg-white {
	background-color: #282c34 !important;
}

#sidenav {
	background-color: #282c34 !important;
	/* 	color: #fffefe !important;
     */
}

#nav-app-dashboards .c-side-nav__subitem-title,
.c-side-nav__section--purple {
	background-color: #282c34 !important;
	color: #9e3dd8;
}

#nav-app-errors .c-side-nav__subitem-title,
.c-side-nav__section--orange {
	background-color: #282c34 !important;
	color: #ff8510;
}

#nav-app-deploys .c-side-nav__subitem-title,
.c-side-nav__section--yellow {
	background-color: #282c34 !important;
	color: #ffff2d;
}
#nav-app-performance .c-side-nav__subitem-title,
.c-side-nav__section--green {
	background-color: #282c34 !important;
	color: #00be4b;
}
#nav-app-anomaly-detection .c-side-nav__subitem-title,
.c-side-nav__section--red {
	background-color: #282c34 !important;
	color: #c00025;
}
#nav-app-uptime-monitoring .c-side-nav__subitem-title,
.c-side-nav__section--yellow {
	background-color: #282c34 !important;
	color: #fd0;
}
#nav-app-host-monitoring .c-side-nav__subitem-title,
.c-side-nav__section--teal {
	background-color: #282c34 !important;
	color: teal;
}
.c-side-nav__section:where(.c-side-nav__section--open) .c-side-nav__item {
	background-color: #282c34 !important;
}

.c-side-nav__section:where(.c-side-nav__section--purple.c-side-nav__section--active) .c-side-nav__item {
	background-color: #282c34 !important;
}
.c-side-nav__section:where(.c-side-nav__section--orange.c-side-nav__section--active) .c-side-nav__item {
	background-color: #282c34 !important;
}
.c-side-nav__section:where(.c-side-nav__section--yellow.c-side-nav__section--active) .c-side-nav__item {
	background-color: #282c34 !important;
}
.c-side-nav__section:where(.c-side-nav__section--green.c-side-nav__section--active) .c-side-nav__item {
	background-color: #282c34 !important;
}
.c-side-nav__section:where(.c-side-nav__section--teal.c-side-nav__section--active) .c-side-nav__item {
	background-color: #282c34 !important;
}
.c-side-nav__section:where(.c-side-nav__section--red.c-side-nav__section--active) .c-side-nav__item {
	background-color: #282c34 !important;
}

.c-side-nav__item:hover {
	background-color: #282c34 !important;
	padding-left: 5px;
}

.c-area--side {
	background-color: #282c34 !important;
}

.c-area--side header {
	background-color: #282c34 !important;
}
.c-popover {
	background-color: #282c34 !important;
}

.c-code {
	font-size: 13px;
	color: unset !important;
	background-color: #1e1e1e;
}

code {
	font-size: 13px;
	color: unset !important;
}

.c-box {
	background-color: #282c34 !important;
	color: #fffefe !important;
}

.box {
	background: unset;
}

.c-box__header {
	background: unset;
}

.c-select * {
	background: #282c34 !important;
}

.c-select::after {
	filter: invert(65%);
}

.c-avatar {
	background: #282c34 !important;
}


.c-dropdown {
	background: #282c34 !important;
}
.c-dropdown:active {
	background: #282c34 !important;
}

.c-dropdown__item {
	background: #282c34 !important;
}

.c-dropdown__item:hover {
	filter: invert(100%);
}


.c-textfield {
	background-color: unset;
}

.text-gray-800 {
	color: unset;
}

a.pl-2 {
	color: unset !important;
}

.c-table__th {
	background-color: #282c34 !important;
	color: #fffefe !important;
}

.c-box .p-5 pre {
	color: #ff7b4f;
	background-color: #1e1e1e;
	/* 	font-weight: bold !important; */
}

#search-link {
	background: unset;
}

.c-box .py-4 span {
	color: #9e9e9e;
}

.c-icon-box {
	background: unset;
}

.c-button {
	background-color: unset;
	color: unset;
}

.c-button--white:hover {
	background-color: #282c34 !important;
	color: #fffefe !important;
}

.c-pill {
	background-color: #fffefe;
}

table.c-table {
	padding-bottom: 30px !important;
}


.c-table__td {
	padding: 5px;
	border-bottom-width: 0.1px;
	border-color: #9e9e9e;
}

th.c-table__td {
	color: #fd0;
}

.c-table__td.font-medium {
	color: #fd0;
}
td.c-table__td {
	color: #9e9e9e;
}

#main-inner {
	background-color: #282c34;
	color: #9e9e9e;
}

.group {
	background-color: #282c34 !important;
	color: #9e9e9e !important;
}

.backtrace-line .c-table__td {
	border-bottom-width: 0px;
	padding: 5px;
	line-height: 5.5px;
	background-color: #1e1e1e;
	color: #9e9e9e;
}

.c-box__header {
	padding: 5px;
	margin-bottom: 5px;
}

a {
	color: #6bc2ff !important;
}

.c-box__footer {
	color: unset;
}

.text-gray-600 {
	color: #fffefe;
}

.mod-table {
	border-bottom-width: 0px !important;
}

.mod-host-metrics .metric {
	flex: unset;
}
.mod-host-metrics .metric {
	text-align: center;
	padding: 10px 5px 5px;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.metric-icon {
	filter: invert(65%);
}
}