Template:Maintenance status styles.css

.maintenance-status-grid {

   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 1em;
   margin: 1em 0;

}

.maintenance-status-card {

   border-radius: 8px;
   padding: 1em;
   text-align: center;
   border: 2px solid;

}

.maintenance-status-card.status-ok {

   background: #d4edda;
   border-color: #28a745;
   color: #155724;

}

.maintenance-status-card.status-warning {

   background: #fff3cd;
   border-color: #ffc107;
   color: #856404;

}

.maintenance-status-card.status-error {

   background: #f8d7da;
   border-color: #dc3545;
   color: #721c24;

}

.maintenance-status-card .status-icon {

   font-size: 2em;
   display: block;
   margin-bottom: 0.25em;

}

.maintenance-status-card .status-label {

   font-weight: bold;
   display: block;
   margin-bottom: 0.25em;

}

.maintenance-status-card .status-count {

   font-size: 0.9em;

}

.maintenance-status-card a {

   color: inherit;
   text-decoration: none;

}

.maintenance-status-card a:hover {

   text-decoration: underline;

}

/* Dark mode support */ @media (prefers-color-scheme: dark) {

   .maintenance-status-card.status-ok {
       background: #1e3a1e;
       border-color: #28a745;
       color: #75d98b;
   }
   
   .maintenance-status-card.status-warning {
       background: #3a351e;
       border-color: #ffc107;
       color: #ffe066;
   }
   
   .maintenance-status-card.status-error {
       background: #3a1e1e;
       border-color: #dc3545;
       color: #f5a0a7;
   }

}

/* Citizen dark mode */ .skin-citizen-dark .maintenance-status-card.status-ok {

   background: #1e3a1e;
   border-color: #28a745;
   color: #75d98b;

}

.skin-citizen-dark .maintenance-status-card.status-warning {

   background: #3a351e;
   border-color: #ffc107;
   color: #ffe066;

}

.skin-citizen-dark .maintenance-status-card.status-error {

   background: #3a1e1e;
   border-color: #dc3545;
   color: #f5a0a7;

}