{"id":17505,"date":"2025-08-17T17:32:48","date_gmt":"2025-08-17T17:32:48","guid":{"rendered":"https:\/\/cloudpap.com\/blog\/?p=17505"},"modified":"2025-08-17T18:02:15","modified_gmt":"2025-08-17T18:02:15","slug":"uptime-kuma-css","status":"publish","type":"post","link":"https:\/\/cloudpap.com\/blog\/uptime-kuma-css\/","title":{"rendered":"Uptime Kuma CSS: Customize Your Uptime Monitoring Dashboard With This Styling Guide"},"content":{"rendered":"\n<p>Uptime Kuma CSS turns a plain status page into a <em>trust signal<\/em> \u2014 when uptime is on the line, a clean, branded view helps customers judge reliability in seconds.<\/p>\n\n\n\n<p>You use Uptime Kuma CSS to make critical states pop, reduce clutter, and keep eyes on what matters during incidents or at 2 a.m. on-call moments.<\/p>\n\n\n\n<p>With Uptime Kuma CSS, you paste simple rules into the Custom CSS box \u2014 no templates, no rebuilds \u2014 then shape colors, grids, badges, and typography to match your brand.<\/p>\n\n\n\n<p>You\u2019ll see quick wins fast:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sharper readability:<\/strong> better contrast, clearer badges, calmer spacing.<\/li>\n\n\n\n<li><strong>Brand alignment:<\/strong> colors and fonts that match your site.<\/li>\n\n\n\n<li><strong>Wallboard-ready layouts:<\/strong> dense, consistent cards that scan well on 4K.<\/li>\n<\/ul>\n\n\n\n<p>You can keep a friendly public theme for customers and a high-contrast wallboard theme for the NOC, each tuned to how people actually view the page.<\/p>\n\n\n\n<p>You don\u2019t need a design degree to make <a href=\"https:\/\/cloudpap.com\/blog\/how-to-install-uptime-kuma\">Uptime Kuma Dashboard<\/a> work for you. Start with a small palette, set a few tokens, and apply focused rules that improve clarity without adding noise.<\/p>\n\n\n\n<p>Ready for a status page that reads at a glance and feels like part of your site? You\u2019ll get copy-paste snippets, a one-file theme, and a simple checklist to test across mobile, laptop, and 4K\u2014so you ship with confidence.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What You Can Change With CSS<\/h2>\n\n\n\n<p>You control the entire presentation layer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Colors:<\/strong> backgrounds, surfaces, text, links, and badges<\/li>\n\n\n\n<li><strong>Spacing:<\/strong> padding, margins, gaps, and card density<\/li>\n\n\n\n<li><strong>Typography:<\/strong> font family, size, weight, and letter spacing<\/li>\n\n\n\n<li><strong>Layout:<\/strong> grid columns, card width, and wrapping behavior<\/li>\n\n\n\n<li><strong>Decor:<\/strong> gradients, shadows, and hero images<\/li>\n\n\n\n<li><strong>Accessibility touches:<\/strong> focus outlines, motion preferences, and contrast<\/li>\n<\/ul>\n\n\n\n<p>You don\u2019t change the HTML from the UI. You style what\u2019s already there.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Aim for clarity first. Fancy visuals come after people can read the page quickly.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Where To Add Your CSS In Uptime Kuma<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>open your <strong>dashboard<\/strong> and select <strong>status pages<\/strong>.<\/li>\n\n\n\n<li>choose the page you want to theme and click <strong>edit<\/strong>.<\/li>\n\n\n\n<li>scroll to <strong>custom css<\/strong>.<\/li>\n\n\n\n<li>paste your stylesheet, <strong>save<\/strong>, then hard-refresh the public page.<\/li>\n\n\n\n<li>verify on desktop, mobile, and a large monitor or TV.<\/li>\n<\/ol>\n\n\n\n<p>Create a second status page for experiments so production stays clean.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create A Consistent Brand Layer<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/cloudpap.com\/blog\/wp-content\/uploads\/2025\/08\/Create-A-Consistent-Brand-Layer-Uptime-Kuma-CSS.webp\" alt=\"Create A Consistent Brand Layer Uptime Kuma CSS\" class=\"wp-image-17514\" style=\"width:750px\" title=\"\" srcset=\"https:\/\/cloudpap.com\/blog\/wp-content\/uploads\/2025\/08\/Create-A-Consistent-Brand-Layer-Uptime-Kuma-CSS.webp 1536w, https:\/\/cloudpap.com\/blog\/wp-content\/uploads\/2025\/08\/Create-A-Consistent-Brand-Layer-Uptime-Kuma-CSS-300x200.webp 300w, https:\/\/cloudpap.com\/blog\/wp-content\/uploads\/2025\/08\/Create-A-Consistent-Brand-Layer-Uptime-Kuma-CSS-1024x683.webp 1024w, https:\/\/cloudpap.com\/blog\/wp-content\/uploads\/2025\/08\/Create-A-Consistent-Brand-Layer-Uptime-Kuma-CSS-768x512.webp 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Define brand tokens in one place<\/h3>\n\n\n\n<p>Put your brand values in <code>:root{}<\/code> so every rule reuses the same tokens.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root{\n  --bg:#0f1115;           \/* canvas *\/\n  --surface:#151923;      \/* cards *\/\n  --text:#e9eef5;         \/* default text *\/\n  --muted:#9aa4b2;        \/* subtle labels *\/\n  --link:#0ea5e9;         \/* links and accents *\/\n  --ok:#16a34a;           \/* up *\/\n  --warn:#f59e0b;         \/* maintenance \/ pending *\/\n  --down:#ef4444;         \/* down *\/\n  --radius:12px;          \/* corners *\/\n  --pad:.75rem;           \/* card padding *\/\n  --gap:.75rem;           \/* grid gap *\/\n  --title:1.06rem;        \/* card title size *\/\n}\n<\/code><\/pre>\n\n\n\n<p>Then map those tokens to the page surfaces:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body{background:var(--bg); color:var(--text)}\na{color:var(--link)}\n.item{\n  background:var(--surface);\n  border:1px solid rgba(255,255,255,.08);\n  border-radius:var(--radius);\n  padding:var(--pad)!important;\n  box-shadow:0 6px 18px rgba(0,0,0,.25);\n}\n.wrap&gt;.d-flex{color:var(--muted)}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Map uptime states to clear badges<\/h3>\n\n\n\n<p>Make <em>Up<\/em>, <em>Warning<\/em>, and <em>Down<\/em> instantly readable.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}\n.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}\n.badge.bg-danger,.text-bg-danger {background-color:var(--down)!important}\n<\/code><\/pre>\n\n\n\n<p><em>You want a viewer to know the state in one glance from five meters away.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Build A High-Density, Readable Layout<\/h2>\n\n\n\n<p>A responsive grid gives you more monitors per row\u2014ideal for wallboards.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container{max-width:98%} \/* more breathing room edge-to-edge *\/\n\n.monitor-list&gt;.monitor-list{\n  display:grid;\n  grid-template-columns:repeat(auto-fit, minmax(28ch, .5fr));\n  gap:var(--gap);\n}\n\n\/* card internals stack nicely on narrow screens *\/\n.item&gt;.row{flex-direction:column}\n.row&gt;div{width:100%}\n.item-name{font-weight:700; font-size:var(--title); letter-spacing:.2px}\n\n.overall-status{padding:.5rem 0!important}\n<\/code><\/pre>\n\n\n\n<p><strong>Why it works:<\/strong> you control minimum card width and let the grid auto-wrap. Cards never crush into unreadable columns.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tighten Card Content And Hierarchy<\/h2>\n\n\n\n<p>Use spacing to guide the eye.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.item .badge{font-size:.9rem; line-height:1.2}\n.item .progress{margin-top:.25rem}\n.item .list-inline{margin:.25rem 0}\n<\/code><\/pre>\n\n\n\n<p>Short lines read faster. A subtle shadow helps separate layers without heavy borders.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Typography That Scales<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Choose a solid system stack<\/h3>\n\n\n\n<p>Pick a robust, legible stack before importing any web font:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root{\n  --font-sans: ui-sans-serif, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n               Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\",\n               \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\nbody{font-family:var(--font-sans)}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">If you must use a custom font<\/h3>\n\n\n\n<p>Self-host where possible, and allow graceful fallbacks.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face{\n  font-family:\"InterVar\";\n  src:url(\/assets\/fonts\/Inter-roman.woff2) format(\"woff2\");\n  font-weight:100 900; font-style:normal; font-display:swap;\n}\nbody{font-family:\"InterVar\", var(--font-sans)}\n<\/code><\/pre>\n\n\n\n<p>Keep headings moderate. Oversized headings force more scrolling and hide active alerts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Color, Contrast, And Accessibility<\/h2>\n\n\n\n<p>Good status pages feel calm and legible.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>aim for <strong>AA contrast<\/strong>: 4.5:1 for normal text and 3:1 for large text.<\/li>\n\n\n\n<li>make links distinct using color <em>and<\/em> a subtle underline on hover or focus.<\/li>\n\n\n\n<li>avoid low-contrast \u201cmuted on muted\u201d patterns for secondary text.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>a:hover{text-decoration:underline}\na:focus{outline:2px solid currentColor; outline-offset:2px}\n<\/code><\/pre>\n\n\n\n<p>Respect motion preferences:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (prefers-reduced-motion: reduce){\n  *{animation:none!important; transition:none!important}\n}\n<\/code><\/pre>\n\n\n\n<p>Add a tiny focus ring. Keyboard users will thank you.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Backgrounds And Hero Treatments<\/h2>\n\n\n\n<p>You can keep it minimal with a soft gradient, or bring a photo in for a \u201cstatus hero.\u201d<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* gradient canvas *\/\nbody{\n  background:\n    radial-gradient(1200px 600px at 20% -10%, rgba(14,165,233,.16), transparent 60%),\n    radial-gradient(900px 500px at 120% 10%, rgba(99,102,241,.12), transparent 60%),\n    var(--bg);\n}\n\n\/* optional full-bleed image *\/\nbody.with-bg{\n  background: url('https:\/\/cdn.example.com\/ops-hero.jpg') center\/cover no-repeat;\n}\n<\/code><\/pre>\n\n\n\n<p>If you add a photo, keep the rest of the palette simple so alerts remain the most saturated elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Behavior That Feels Natural<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">On phones<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>stack card content vertically.<\/li>\n\n\n\n<li>bump the base font to <code>16\u201317px<\/code>.<\/li>\n\n\n\n<li>make tap targets at least <code>40px<\/code> tall.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (max-width:480px){\n  :root{--title:1.02rem}\n  .item{padding:.85rem!important}\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">On 4K dashboards<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>increase title size slightly; avoid giant text.<\/li>\n\n\n\n<li>space grid columns evenly and keep badge text near <code>0.95\u20131rem<\/code>.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width:2560px){\n  :root{--title:1.15rem}\n  .item .badge{font-size:.95rem}\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Per-Page Themes For Different Audiences<\/h2>\n\n\n\n<p>Keep multiple status pages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>a <strong>public<\/strong> page with friendly branding and generous spacing.<\/li>\n\n\n\n<li>a <strong>noc wallboard<\/strong> page with maximum density and high-contrast badges.<\/li>\n\n\n\n<li>a <strong>sandbox<\/strong> page where you test changes first.<\/li>\n<\/ul>\n\n\n\n<p>Each page has its own <em>custom css<\/em> field. Store each theme in a small repo so you can version, diff, and roll back.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing And QA Workflow<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>create or pick a <strong>sandbox<\/strong> status page.<\/li>\n\n\n\n<li>paste your CSS, <strong>save<\/strong>, then open the public URL in a private window.<\/li>\n\n\n\n<li>check <strong>mobile<\/strong>, <strong>laptop<\/strong>, and <strong>4K<\/strong> quickly with your browser\u2019s responsive mode.<\/li>\n\n\n\n<li>scan the page from a distance. if <em>down<\/em> doesn\u2019t jump out, adjust your red.<\/li>\n\n\n\n<li>run a <strong>contrast check<\/strong> on text color pairs you introduced.<\/li>\n\n\n\n<li>toggle <strong>reduced motion<\/strong> in devtools to confirm nothing animates unnecessarily.<\/li>\n\n\n\n<li>verify badge labels and card titles don\u2019t wrap into awkward two-line stacks.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>The goal is a quiet page that makes incidents loud.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting Common Issues<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>changes don\u2019t show:<\/strong> you\u2019re likely hitting cache. save, then hard-refresh.<\/li>\n\n\n\n<li><strong>logo or hero looks off-center:<\/strong> adjust margins in CSS; avoid editing HTML.<\/li>\n\n\n\n<li><strong>a rule \u201cdoes nothing\u201d:<\/strong> increase selector specificity or target the correct parent + child combo.<\/li>\n\n\n\n<li><strong>third-party theme clashes:<\/strong> paste your overrides at the very bottom so they win.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Security And Reliability Notes<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>keep the CSS small; don\u2019t pull heavy external assets.<\/li>\n\n\n\n<li>if you embed the status page in another site, review clickjacking settings and only frame pages you control.<\/li>\n\n\n\n<li>test your theme after app updates in case class names change.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Maintainability And Versioning<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>keep a tiny <strong>overrides<\/strong> section separate from the base theme.<\/li>\n\n\n\n<li>comment brand tokens with hex and plain-english names.<\/li>\n\n\n\n<li>name files by audience: <code>public.css<\/code>, <code>noc-4k.css<\/code>, <code>sandbox.css<\/code>.<\/li>\n\n\n\n<li>record <strong>badge mappings<\/strong> (up\/warn\/down) in a short readme so future you knows the logic.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Copy-Paste Starter Themes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">A) Dark Pro (brand-forward, calm)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>:root{\n  --bg:#0f1115; --surface:#161b25; --text:#e9eef5; --muted:#9aa4b2; --link:#5cc8ff;\n  --ok:#22c55e; --warn:#f59e0b; --down:#ef4444; --radius:12px; --pad:.8rem; --gap:.8rem; --title:1.08rem;\n}\nbody{background:var(--bg); color:var(--text)}\na{color:var(--link)}\n.container{max-width:98%}\n.monitor-list&gt;.monitor-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(28ch,.5fr)); gap:var(--gap)}\n.item{background:var(--surface); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:var(--pad)!important; box-shadow:0 8px 20px rgba(0,0,0,.28)}\n.item-name{font-weight:700; font-size:var(--title)}\n.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}\n.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}\n.badge.bg-danger,.text-bg-danger{background-color:var(--down)!important}\n.wrap&gt;.d-flex{color:var(--muted)}\n@media (min-width:2560px){:root{--title:1.16rem}}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">B) Light Clean (crisp, print-friendly)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>:root{\n  --bg:#f8fafc; --surface:#ffffff; --text:#0b1220; --muted:#5b6472; --link:#0b73e0;\n  --ok:#15803d; --warn:#b45309; --down:#b91c1c; --radius:10px; --pad:.9rem; --gap:.9rem; --title:1.04rem;\n}\nbody{background:var(--bg); color:var(--text)}\na{color:var(--link)}\n.monitor-list&gt;.monitor-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(30ch,.55fr)); gap:var(--gap)}\n.item{background:var(--surface); border:1px solid #e5e7eb; border-radius:var(--radius); padding:var(--pad)!important; box-shadow:0 6px 14px rgba(15,17,21,.06)}\n.item-name{font-weight:700; font-size:var(--title); letter-spacing:.15px}\n.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}\n.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}\n.badge.bg-danger,.text-bg-danger{background-color:var(--down)!important}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">C) TV Wallboard (maximum density, high contrast)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>:root{\n  --bg:#0b0e14; --surface:#121722; --text:#edf2f7; --muted:#93a1b2; --link:#7dd3fc;\n  --ok:#22c55e; --warn:#f59e0b; --down:#fb7185; --radius:10px; --pad:.6rem; --gap:.6rem; --title:1.02rem;\n}\nbody{background:var(--bg); color:var(--text)}\n.container{max-width:99%}\n.monitor-list&gt;.monitor-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(26ch,.45fr)); gap:var(--gap)}\n.item{background:var(--surface); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:var(--pad)!important}\n.item .badge{font-size:1rem}\n.item-name{font-weight:800; font-size:var(--title)}\n.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}\n.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}\n.badge.bg-danger,.text-bg-danger{background-color:var(--down)!important}\n<\/code><\/pre>\n\n\n\n<p><em>Pick one, change the hex values, and move on.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example Table: Before\/After Impact<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>area<\/th><th>default experience<\/th><th>with a tuned <strong>uptime kuma css<\/strong><\/th><\/tr><\/thead><tbody><tr><td>badge clarity<\/td><td>colors vary by theme; sometimes low contrast<\/td><td>strict, brand-mapped <strong>up\/warn\/down<\/strong> with strong contrast<\/td><\/tr><tr><td>scanning speed<\/td><td>many lines wrap across columns<\/td><td>grid keeps cards consistent; titles bold; badges sized for distance<\/td><\/tr><tr><td>wallboard density<\/td><td>cards break into uneven stacks<\/td><td>repeatable <strong>minmax()<\/strong> columns reduce visual jumps<\/td><\/tr><tr><td>focus visibility<\/td><td>default outlines may blend<\/td><td>explicit focus ring and hover underline aid keyboard users<\/td><\/tr><tr><td>motion<\/td><td>animations may distract some users<\/td><td><code>prefers-reduced-motion<\/code> respected; transitions removed<\/td><\/tr><tr><td>theming<\/td><td>one look fits all<\/td><td>separate <strong>public<\/strong> and <strong>noc<\/strong> themes, each tuned to context<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Practical Styling Recipes<\/h2>\n\n\n\n<p><strong>Make links obvious without being loud<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a{color:var(--link)}\na:hover{text-decoration:underline}\n<\/code><\/pre>\n\n\n\n<p><strong>Soften card borders<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.item{border:1px solid rgba(255,255,255,.08)}\n<\/code><\/pre>\n\n\n\n<p><strong>Keep the hero subtle<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.main{position:relative}\n.overall-status{padding:.5rem!important}\n<\/code><\/pre>\n\n\n\n<p><strong>Improve small meta text readability<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.wrap&gt;.d-flex{font-size:.95rem; color:var(--muted)}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Ready-To-Use One-File Theme (Paste And Tweak)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* === Uptime Kuma: One-file Brand Theme === *\/\n:root{\n  --bg:#0e1015; --surface:#151a23; --text:#e8eef5; --muted:#9aa4b2; --link:#0ea5e9;\n  --ok:#16a34a; --warn:#f59e0b; --down:#ef4444;\n  --radius:12px; --pad:.75rem; --gap:.75rem; --title:1.06rem;\n  --font-sans: ui-sans-serif, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n               Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\",\n               \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\nbody{background:var(--bg); color:var(--text); font-family:var(--font-sans)}\na{color:var(--link)}\n.container{max-width:98%}\n.monitor-list&gt;.monitor-list{\n  display:grid; grid-template-columns:repeat(auto-fit, minmax(28ch, .5fr)); gap:var(--gap)\n}\n.item{\n  background:var(--surface);\n  border:1px solid rgba(255,255,255,.08);\n  border-radius:var(--radius);\n  padding:var(--pad)!important;\n  box-shadow:0 6px 18px rgba(0,0,0,.25);\n}\n.item-name{font-weight:700; font-size:var(--title); letter-spacing:.2px}\n.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}\n.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}\n.badge.bg-danger,.text-bg-danger {background-color:var(--down)!important}\n.wrap&gt;.d-flex{color:var(--muted)}\n.overall-status{padding:.5rem 0!important}\n@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}\na:focus,button:focus{outline:2px solid currentColor; outline-offset:2px}\n@media (max-width:480px){:root{--title:1.02rem} .item{padding:.85rem!important}}\n@media (min-width:2560px){:root{--title:1.15rem} .item .badge{font-size:.95rem}}\n<\/code><\/pre>\n\n\n\n<p>Paste the block, change the hex values to your brand palette, and you\u2019re live.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Checklist Before You Ship<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>set color tokens in <code>:root{}<\/code> (background, surface, text, link, <strong>up\/warn\/down<\/strong>).<\/li>\n\n\n\n<li>confirm badge colors meet <strong>AA<\/strong> contrast on both light and dark backgrounds.<\/li>\n\n\n\n<li>test <strong>mobile<\/strong>, <strong>laptop<\/strong>, and <strong>4K<\/strong>; adjust <code>--title<\/code> and grid columns as needed.<\/li>\n\n\n\n<li>toggle <strong>reduced motion<\/strong> and verify no distracting animation remains.<\/li>\n\n\n\n<li>keep a <strong>sandbox<\/strong> page for experiments; promote to <strong>public<\/strong> or <strong>noc<\/strong> after QA.<\/li>\n\n\n\n<li>version your CSS in a repo and keep a tiny <strong>overrides<\/strong> section for future updates.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>A clean status page reduces stress during incidents. Clarity pays for itself every single time.<\/em><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Uptime Kuma CSS turns a plain status page into a trust signal \u2014 when uptime is&#8230;<\/p>\n","protected":false},"author":19,"featured_media":17512,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[443],"tags":[],"class_list":["post-17505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uptime-kuma"],"_links":{"self":[{"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/posts\/17505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/comments?post=17505"}],"version-history":[{"count":3,"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/posts\/17505\/revisions"}],"predecessor-version":[{"id":17515,"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/posts\/17505\/revisions\/17515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/media\/17512"}],"wp:attachment":[{"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/media?parent=17505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/categories?post=17505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudpap.com\/blog\/wp-json\/wp\/v2\/tags?post=17505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}