MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 479: | Line 479: | ||
/* ========================================================= | /* ========================================================= | ||
OOO NOTICE ( | OOO NOTICE SYSTEM (Template:OOO-Notice) | ||
========================================================= */ | ========================================================= */ | ||
.ooo-notice { | .ooo-notice { | ||
position: relative; | position: relative; | ||
padding: | padding: 22px 26px; | ||
margin: | margin: 28px 0; | ||
border-radius: 12px; | border-radius: 12px; | ||
border-left: | border: 1px solid rgba(245,196,0,0.28); | ||
border-left: 6px solid var(--ooo-accent); | |||
background: linear-gradient( | background: linear-gradient( | ||
to right, | to right, | ||
rgba(245,196,0,0.10), | rgba(245,196,0,0.10), | ||
transparent | transparent 62% | ||
); | ); | ||
} | } | ||
.ooo-notice__title { | .ooo-notice__title { | ||
font-size: 1. | font-size: 1.05rem; | ||
font-weight: | font-weight: 800; | ||
letter-spacing: 0.3px; | |||
margin-bottom: 10px; | margin-bottom: 10px; | ||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
} | } | ||
.ooo-notice__content { | .ooo-notice__content { | ||
line-height: 1.6; | line-height: 1.6; | ||
opacity: 0. | opacity: 0.92; | ||
} | |||
/* ===== Variants ===== */ | |||
/* INFO (default): slightly calmer */ | |||
.ooo-notice--info { | |||
border-left-color: var(--ooo-accent); | |||
} | |||
/* WARNING: stronger accent */ | |||
.ooo-notice--warning { | |||
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 { | |||
border-left-color: #2ea44f; | |||
border-color: rgba(46,164,79,0.25); | |||
background: linear-gradient(to right, rgba(46,164,79,0.10), transparent 62%); | |||
} | |||
.ooo-notice--success .ooo-notice__title { | |||
color: #2ea44f; | |||
} | |||
/* DANGER: red tint for critical messages */ | |||
.ooo-notice--danger { | |||
border-left-color: #d73a49; | |||
border-color: rgba(215,58,73,0.25); | |||
background: linear-gradient(to right, rgba(215,58,73,0.10), transparent 62%); | |||
} | |||
.ooo-notice--danger .ooo-notice__title { | |||
color: #d73a49; | |||
} | |||
/* ===== Theme safety tweaks ===== */ | |||
/* Explicit dark theme */ | |||
.skin-theme-clientpref-night .ooo-notice { | .skin-theme-clientpref-night .ooo-notice { | ||
border-color: rgba(245,196,0,0.20); | |||
background: linear-gradient( | |||
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); | |||
background: linear-gradient( | |||
to right, | |||
rgba(245,196,0,0.12), | |||
transparent 62% | |||
); | |||
} | } | ||
} | } | ||