Template:Warning/styles.css

/* Warning notice box - Tailwind-inspired styling */ .warning-notice {

   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 1rem;
   margin: 1rem 0;
   background-color: #fef3c7; /* amber-100 */
   border: 1px solid #f59e0b; /* amber-500 */
   border-left: 4px solid #d97706; /* amber-600 */
   border-radius: 0.375rem;

}

.warning-notice-icon {

   font-size: 1.25rem;
   line-height: 1;
   flex-shrink: 0;

}

.warning-notice-content {

   font-size: 0.9375rem;
   line-height: 1.5;
   color: #92400e; /* amber-800 */

}

.warning-notice-content strong {

   color: #78350f; /* amber-900 */

}

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

   .warning-notice {
       background-color: #451a03; /* amber-950 */
       border-color: #b45309; /* amber-700 */
   }
   
   .warning-notice-content {
       color: #fcd34d; /* amber-300 */
   }
   
   .warning-notice-content strong {
       color: #fde68a; /* amber-200 */
   }

}

/* Site dark mode class support */ .dark-mode .warning-notice, .night-mode .warning-notice {

   background-color: #451a03;
   border-color: #b45309;

}

.dark-mode .warning-notice-content, .night-mode .warning-notice-content {

   color: #fcd34d;

}

.dark-mode .warning-notice-content strong, .night-mode .warning-notice-content strong {

   color: #fde68a;

}