Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save adamshand/8ce0d637199de02f0993874a3e7609a1 to your computer and use it in GitHub Desktop.
Save adamshand/8ce0d637199de02f0993874a3e7609a1 to your computer and use it in GitHub Desktop.
These CSS tweaks are for higher density display for Uptime Kuma status pages in dark mode.
:root {
--min-item-width: 28ch;
--max-item-width: 1fr;
--grid-spacing: .25rem;
--item-padding: .25rem;
}
/* Expand container */
.container {
max-width: 98%
}
/* Grid layout */
.monitor-list > .monitor-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), var(--max-item-width)));
grid-gap: var(--grid-spacing);
}
.item {
width: 100%;
padding: var(--item-padding) !important;
border: #3d3d3d solid 2px;
}
.item > .row {
flex-direction: column;
}
.row > div {
width: 100%;
}
/* Text readability */
.item-name {
color: #efefef;
}
/* Badge movement */
.row {
position: relative;
}
body:not(.mobile) .badge {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* Header compacting */
.main {
position: relative;
}
.overall-status {
padding: .5rem !important;
}
body:not(.mobile) .overall-status {
position: absolute;
top: 0;
right: 0;
width: 50%;
}
/* Tweaks for mobile size */
body.mobile {}
/* Footer compacting */
footer .alert-heading {
padding: 0 !important;
}
/* Margin resets */
.mb-4, .mb-5 {
margin-bottom: .5rem !important;
}
.mt-4 {
margin-top: .5rem !important;
}
.mt-5 {
margin-top: 0 !important;
}
/* Reduce glaring blue maintenance color */
.bg-maintenance {
background-color: #4962bd !important;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment