Skip to content

Instantly share code, notes, and snippets.

@davidnewhall
Last active December 22, 2021 08:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidnewhall/2b6019c190693ac136356941349f5c80 to your computer and use it in GitHub Desktop.
Save davidnewhall/2b6019c190693ac136356941349f5c80 to your computer and use it in GitHub Desktop.
Betteruptime.com CSS, example to make better uptime status page go dark mode.
/* Main background */
.status-page {
background-color: #32363b; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #252526, #1e1e33);
}
/* System Status announcement (entered on website), text. */
.status-page__overview .status-page__description {
color: #5a83b0;
margin-top:1.5rem
}
/* As of <date>, text, and others, like uptime percentage. */
.text-muted {
color:#8c99e6 !important
}
/* All services are online, text. */
.status-page__overview .status-page__title {
color: #5a83b0;
font-size:1.5rem
}
/* Status link in top left. */
.status-header__label {
position: relative;
color:#5a83b0
}
/* Main Service card header. */
.status-page .card .card-header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: relative;
z-index: 10;
background-color: #2f2730
}
/* Main Service card in middle of page. */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #2f2730;
background-clip: border-box;
border: 1px solid rgba(191, 194, 212, .3);
border-radius:8px
}
/* Current status by service, text. */
.card-title {
color: #e8c3a2
}
/* Service name inside main service card. */
.status-page__resource-name {
color: #fff;
font-size: 15px;
font-weight:600
}
/* Subscribe to status updates, text (if enabled). */
.status-page .subscribe-title {
color: #e8c3a2;
line-height: 1.6;
margin:0
}
/* Copy right notice, bottom left. */
.status-page__footer .footer__copyright {
color:#527d72
}
/* Powered by, bottom right. */
.d-inline-block {
color: #527d72;
}
/* BetterUptime SVG logo at bottom right. */
.svg-logo { /* same color as Powered by, above. */
filter: brightness(0) saturate(100%) invert(46%) sepia(31%) saturate(336%) hue-rotate(114deg) brightness(91%) contrast(94%);
}
@davidnewhall
Copy link
Author

See it in action here. https://status.golift.tv

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment