sdbs-infra/sdbs_infra/dashboard/static/main.css

115 lines
1.6 KiB
CSS
Raw Normal View History

html, body {
2020-06-15 12:16:04 +02:00
width: 100%;
2020-06-15 12:17:08 +02:00
min-height: 100%;
margin: 0;
}
2020-06-14 12:17:26 +02:00
body {
background: black;
color: white;
font-family: monospace;
font-size: 13pt;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
2020-06-14 12:17:26 +02:00
}
a {
color: white;
text-decoration: none;
}
h1, h2 {
text-align: center;
margin: 1rem 0;
}
main {
2020-06-15 12:16:04 +02:00
width: 100%;
2020-06-14 12:17:26 +02:00
display: flex;
flex-wrap: wrap;
justify-content: center;
2020-06-15 12:20:01 +02:00
margin-bottom: -1rem;
2020-06-14 12:17:26 +02:00
}
.service {
2020-06-14 14:44:36 +02:00
flex-basis: 20%;
2020-06-14 12:17:26 +02:00
margin: 1rem;
display: flex;
flex-direction: column;
}
2020-06-14 14:44:36 +02:00
@media screen and (max-width: 1000px) {
.service {
flex-basis: 40%;
}
}
@media screen and (max-width: 600px) {
.service {
flex-basis: 100%;
}
}
2020-06-14 12:17:26 +02:00
.service-content {
flex-grow: 1;
border: 1px solid white;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
2020-06-14 12:26:05 +02:00
.service-content img {
2020-06-14 12:52:03 +02:00
flex-grow: 1;
2020-06-14 12:28:05 +02:00
min-width: 50%;
2020-06-14 12:53:26 +02:00
max-width: 100%;
2020-06-14 12:26:05 +02:00
filter: grayscale(100%);
2020-06-14 12:58:50 +02:00
image-rendering: crisp-edges;
2020-06-14 14:41:25 +02:00
text-align: center;
2020-06-14 12:26:05 +02:00
}
2020-06-14 12:17:26 +02:00
.service .label h3 {
margin: 1rem 0;
text-align: center;
}
.service .label .description {
2020-06-14 14:41:25 +02:00
font-size: 10pt;
2020-06-14 12:17:26 +02:00
margin: 0;
align-self: flex-start;
}
.service-status {
border: 1px solid white;
border-top: 0;
text-transform: uppercase;
text-align: right;
2020-06-14 14:52:34 +02:00
padding: .25em .5em;
}
.status-ok .service-status {
color: gray;
}
.status-down .service-status {
color: darkred;
2020-06-14 19:51:35 +02:00
}
2020-06-15 12:20:01 +02:00
.stats {
text-align: justify;
2020-06-15 12:20:01 +02:00
padding: 1.5rem 0;
}
2020-06-15 12:20:01 +02:00
.stats em {
2020-06-14 19:51:35 +02:00
font-style: normal;
font-weight: bold;
2020-06-14 12:17:26 +02:00
}