Last active
December 4, 2025 14:55
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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; | |
| } |
Author
Just wanting to say I referenced this absolute god-send of a gist here: https://github.com/pacholoamit/uptime-kuma-themes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@mizifih
It's quite possible the HTML or CSS changed since I originally wrote this snippet. It's hard for me to test fixing this without having the webpage in front of me; our Uptime Kuma instance hasn't been updated for a while and we are in no rush to do so. I don't see this issue in our instance.
Drop yourself into dev tools and look at the flex properties, where the boxes for containing elements start and end, and you may be able to see where the issue lies.
I would not expect the project devs to offer much support in the way of custom CSS. I tried asking for a simple change that would make the CSS much easier to write and less likely to break, and was told they aren't interested in doing it because you can do it in an objectively worse way and they offer no stability guarantees: louislam/uptime-kuma#4674
So be aware that you'll need the skills to fix the CSS yourself when / if it breaks from an Uptime Kuma update.