Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 24 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save brooksvb/78a54355151a18477e33c224177dc5fa to your computer and use it in GitHub Desktop.
Save brooksvb/78a54355151a18477e33c224177dc5fa 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: .5fr;
--grid-spacing: .25rem;
--item-padding: .25rem;
}
/* Let items expand on small screens */
@media (max-width: 600px) {
:root {
--max-item-width: 1fr;
}
}
/* Cap item width for better appearance on large screens */
@media (min-width: 2560px) {
:root {
--max-item-width: 300px;
}
}
/* Readability on 4K screens at distance */
@media (min-width: 3840px) {
.item-name {
font-size 1.3em;
font-weight: 700;
letter-spacing: 0.8px;
}
.badge {
font-size: .9em;
}
.wrap > .d-flex {
font-size: .9em;
font-weight: 500;
letter-spacing: .8px;
}
}
/* 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: #f1f1f1;
}
/* 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;
}
@brooksvb
Copy link
Author

brooksvb commented Jan 3, 2024

Added tweaks for 4k screen readability

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