alertmanager/ui/app/css/main.css

body {
	overflow-y: scroll;
	background: #fafafa;
}

header {
	padding: 1em 2.5em 1.4em 2.5em;
	background: #404040;
}

header #logo {
	color: #fff;
	float: left;
	margin: 0 80px 0 0;
}
header #logo a {
	color: inherit;
	text-decoration: none;
}
a.gen-link button {
	color: #fff !important;
}

#top-nav a {
	color: #bbb;
	text-decoration: none
}
#top-nav .selected a {
	color: #fff;
}
#top-nav a:hover {
	color: #fff;
}

#top-nav ul {
	float: left;
	list-style: none;
	margin: 8px 0 0 0 ;
}

#top-nav li {
	display: inline-block;
	margin-right: 2.2em;
}

#content {
	padding: 2.5em;
}

#silence-create, #filter-alerts {
	background: #fff;
	width: 100%;
	min-width: 400px;
}
#alert-groups.hide-silenced .alert-item.silenced {
	display: none;
}
.alert-group {
	margin-bottom: 5px;
}
.alert-item .details {
	float: left;
	margin-right: 12px;
}

.alert-item .expand, .silence-item .expand {
	opacity: .4;
}
.alert-item:hover .expand, .silence-item:hover .expand {
	opacity: 1;
}

.silence-item .labels, .alert-item .labels {
}
.silence-item .labels, .alert-item .labels {
	width: 65%;
}

.alert-group-header {
	border-bottom: 1px solid #fff;
	background: #bfbfbf;
	padding: .8em;
}

.silence-item .delete-button,
.silence-item .edit-button,
.alert-item .silence-button {
	opacity: 0.25;
}
.silence-item:hover .delete-button,
.silence-item:hover .edit-button,
.alert-item:hover .silence-button {
	opacity: 1.0;
}

.active-silences, .pending-silences, .elapsed-silences {
	margin-bottom: 12px;
}

.alert-item .overview {
	background: #f0f0f0;
	padding: .8em;
}
.silence-item .overview {
	background: #bfbfbf;
	padding: .8em;
}
.silence-item.highlight .overview {
	background: #dfdfdf;
	border: 1px solid #2f77d1;
}
.silence-item .detail, .alert-item .detail {
	background: #fff;
	padding: .8em;
}

.silence-matchers {
	margin-bottom: 5px;
}

.silence-matchers .is-regex {
	font-family: monospace;
}

#silences-query {
	margin-bottom: 24px;
}

.alert-item .silence-alert, .silence-item .edit-silence {
	padding: 1em 2em;
}

.list-item {
	background: #fff;
	margin-bottom: 1px;
}

.list-item .container-left {
	width: 650px;
	padding: 1em;
	float: left;
	background: #777;
	color: #eee;
}

.lbl {
	display: inline-block;
	font-size: 0.7em;
	padding: 0 6px;
	margin: 0 2px 2px 0;
	font-family: Menlo, Monaco, Consolas, sans-serif;
	border: 1px solid #ccc;
	border-radius: 2px;
	background: #555;
	color: #fff;
}
.lbl-highlight {
	background: #e6522c;
}
.lbl-outline {
	color: #555 !important;
	background: rgba(255, 255, 255, 0.5) !important;
	border: 1px solid #555 !important;
}

.muted-lbl {
	background: #ffe47a;
	color: #555 !important;
}
.muted-lbl a {
	color: #555 !important;
}

.annotations td {
	min-width: 200px;
	white-space: pre-wrap !important;
	word-break: break-all;
	word-wrap: break-word;
}
.table-normal.annotations td {
	padding: .4em !important;
	text-overflow: clip;
}

.list-item .container-right {
	border-left: 650px solid #777;
	padding: 1em;
}

.active-interval {
	color: #aaa;
	font-style: italic;
}

.silence-alert {
	background: #f0f0f0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

input.ng-invalid.ng-touched {
  border-color: #de2c3b;
  box-shadow: 0 0 0 2px rgba(222, 44, 59, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}

input.collapse[type=checkbox] {
	-webkit-appearance: none;
    width: 1em;
    height: 1em;
    border: none;
}
input.collapse[type=checkbox]:after {
	content: '▹';
}
input.collapse.open[type=checkbox]:after {
	content: '▿';
}

.label.alertname {
	background: #fff !important;
}
/**/
input[type="datetime-local"]  {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  padding: 0.9rem 1rem;
  line-height: 1;
  height: 40px;
  outline: none;
  background: #ffffff;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, 0.85);
}

/* Routing Tree */
.sans-serif {
  font: 12px sans-serif;
}

.node circle {
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.label-input {
  padding: 2px 0;
  width: 500px;
}

.config-yml {
  border-color: #ddd;
  height: 760px;
  padding: 2px 0;
  width: 450px;
  font-family: monospace;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}