Last active
September 18, 2024 02:54
-
-
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 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; | |
| } |
I changed line 3 to --max-item-width: .25fr; because otherwise, on wider displays, groups with less than 4 monitors would inaccurately show gray bars on the left-hand side. I would prefer allowing the full width if there's a way to make the data display accurately.
wow thank you so much
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Added tweaks for 4k screen readability