MediaWiki:Common.css: Difference between revisions

mNo edit summary
mNo edit summary
Line 479: Line 479:


/* =========================================================
/* =========================================================
   OOO NOTICE SYSTEM (Template:OOO-Notice)
   OOO NOTICE SYSTEM (Industrial Left Accent)
   ========================================================= */
   ========================================================= */


Line 486: Line 486:
   padding: 22px 26px;
   padding: 22px 26px;
   margin: 28px 0;
   margin: 28px 0;
   border-radius: 12px;
   border-radius: 10px;
   border: 1px solid rgba(245,196,0,0.28);
 
  border-left: 6px solid var(--ooo-accent);
  /* subtle container */
   background: linear-gradient(
   border: 1px solid rgba(245,196,0,0.18);
    to right,
   background: rgba(245,196,0,0.04);
    rgba(245,196,0,0.10),
 
    transparent 62%
   /* stronger left accent */
   );
  border-left: 8px solid var(--ooo-accent);
}
}


Line 499: Line 499:
   font-size: 1.05rem;
   font-size: 1.05rem;
   font-weight: 800;
   font-weight: 800;
  margin-bottom: 8px;
  color: var(--ooo-accent);
   letter-spacing: 0.3px;
   letter-spacing: 0.3px;
  margin-bottom: 10px;
  color: var(--ooo-accent);
}
}


Line 511: Line 511:
/* ===== Variants ===== */
/* ===== Variants ===== */


/* INFO (default): slightly calmer */
.ooo-notice--info {
  border-left-color: var(--ooo-accent);
}
/* WARNING: stronger accent */
.ooo-notice--warning {
.ooo-notice--warning {
   border-left-color: #f5c400;
   border-left-color: #f5c400;
  background: linear-gradient(to right, rgba(245,196,0,0.14), transparent 62%);
}
}


/* SUCCESS: green tint (still fits industrial UI) */
.ooo-notice--success {
.ooo-notice--success {
   border-left-color: #2ea44f;
   border-left-color: #2ea44f;
   border-color: rgba(46,164,79,0.25);
   border-color: rgba(46,164,79,0.18);
   background: linear-gradient(to right, rgba(46,164,79,0.10), transparent 62%);
   background: rgba(46,164,79,0.05);
}
}


Line 533: Line 525:
}
}


/* DANGER: red tint for critical messages */
.ooo-notice--danger {
.ooo-notice--danger {
   border-left-color: #d73a49;
   border-left-color: #d73a49;
   border-color: rgba(215,58,73,0.25);
   border-color: rgba(215,58,73,0.18);
   background: linear-gradient(to right, rgba(215,58,73,0.10), transparent 62%);
   background: rgba(215,58,73,0.05);
}
}


Line 544: Line 535:
}
}


/* ===== Theme safety tweaks ===== */
/* Dark theme tuning */
 
/* Explicit dark theme */
.skin-theme-clientpref-night .ooo-notice {
.skin-theme-clientpref-night .ooo-notice {
   border-color: rgba(245,196,0,0.20);
   border-color: rgba(245,196,0,0.15);
   background: linear-gradient(
   background: rgba(245,196,0,0.06);
    to right,
    rgba(245,196,0,0.12),
    transparent 62%
  );
}
}


/* OS-based dark theme */
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
   .skin-theme-clientpref-os .ooo-notice {
   .skin-theme-clientpref-os .ooo-notice {
     border-color: rgba(245,196,0,0.20);
     border-color: rgba(245,196,0,0.15);
     background: linear-gradient(
     background: rgba(245,196,0,0.06);
      to right,
      rgba(245,196,0,0.12),
      transparent 62%
    );
   }
   }
}
/* =========================================================
  OOO NOTICE ICON SUPPORT
  ========================================================= */
.ooo-notice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ooo-notice__icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 3px;
  color: var(--ooo-accent);
}
.ooo-notice__body {
  flex: 1;
}
}