MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 628: | Line 628: | ||
/* ========================================================= | /* ========================================================= | ||
OOO FAQ SYSTEM (Clean Industrial) | OOO FAQ SYSTEM (Clean Industrial – Parser Safe) | ||
========================================================= */ | ========================================================= */ | ||
| Line 638: | Line 638: | ||
.ooo-faq__item { | .ooo-faq__item { | ||
border-bottom: 1px solid var(--ooo-border); | border-bottom: 1px solid var(--ooo-border); | ||
padding: | padding: 16px 0; | ||
transition: background 0.15s ease; | transition: background 0.15s ease; | ||
} | } | ||
/* Subtle hover */ | /* Subtle hover (light theme) */ | ||
.ooo-faq__item:hover { | .ooo-faq__item:hover { | ||
background: rgba(0,0,0,0.02); | background: rgba(0,0,0,0.02); | ||
} | } | ||
/* Subtle hover (dark theme explicit) */ | |||
.skin-theme-clientpref-night .ooo-faq__item:hover { | .skin-theme-clientpref-night .ooo-faq__item:hover { | ||
background: rgba(255,255,255,0. | background: rgba(255,255,255,0.04); | ||
} | } | ||
/* Subtle hover (OS dark) */ | |||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
.skin-theme-clientpref-os .ooo-faq__item:hover { | .skin-theme-clientpref-os .ooo-faq__item:hover { | ||
background: rgba(255,255,255,0. | background: rgba(255,255,255,0.04); | ||
} | } | ||
} | } | ||
/* Question */ | /* Question (summary) */ | ||
.ooo-faq__question { | .ooo-faq__question { | ||
font-weight: 700; | font-weight: 700; | ||
cursor: pointer; | cursor: pointer; | ||
position: relative; | position: relative; | ||
padding-right: | padding-right: 26px; | ||
list-style: none; | list-style: none; | ||
line-height: 1.4; | |||
} | } | ||
/* Remove default | /* Remove default marker */ | ||
.ooo-faq__question::-webkit-details-marker { | .ooo-faq__question::-webkit-details-marker { | ||
display: none; | display: none; | ||
| Line 676: | Line 679: | ||
position: absolute; | position: absolute; | ||
right: 0; | right: 0; | ||
top: 0; | |||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
transition: transform 0.2s ease; | transition: transform 0.2s ease; | ||
| Line 681: | Line 685: | ||
/* Rotate arrow when open */ | /* Rotate arrow when open */ | ||
details[open] .ooo-faq__question::after { | details[open] > .ooo-faq__question::after { | ||
transform: rotate(180deg); | transform: rotate(180deg); | ||
} | } | ||
/* Answer */ | /* Answer content (everything inside details except summary) */ | ||
.ooo- | .ooo-faq__item > *:not(summary) { | ||
margin-top: | margin-top: 12px; | ||
line-height: 1.7; | line-height: 1.7; | ||
opacity: 0.95; | opacity: 0.95; | ||
} | } | ||