MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 628: | Line 628: | ||
/* ========================================================= | /* ========================================================= | ||
OOO FAQ | OOO FAQ – Clean Native Accordion | ||
========================================================= */ | ========================================================= */ | ||
| Line 635: | Line 635: | ||
} | } | ||
/* | /* FAQ item */ | ||
.ooo-faq__item { | .ooo-faq__item { | ||
margin-bottom: 16px; | margin-bottom: 16px; | ||
border-radius: 8px; | |||
overflow: hidden; | |||
border: 1px solid rgba(245,196,0,0.25); | |||
background: rgba(245,196,0,0.04); | |||
transition: background 0.2s ease, border 0.2s ease; | |||
} | } | ||
/* Question */ | |||
/* Question | |||
.ooo-faq__question { | .ooo-faq__question { | ||
position: relative; | position: relative; | ||
display: block; | display: block; | ||
padding: 16px 22px; | |||
font-weight: 700; | font-weight: 700; | ||
cursor: pointer; | cursor: pointer; | ||
list-style: none; | |||
} | } | ||
/* | /* Remove default marker */ | ||
.ooo-faq__question:: | .ooo-faq__question::-webkit-details-marker { | ||
display: none; | |||
display: none | |||
} | } | ||
| Line 701: | Line 664: | ||
content: "▸"; | content: "▸"; | ||
position: absolute; | position: absolute; | ||
right: | right: 20px; | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
| Line 709: | Line 672: | ||
} | } | ||
/* Rotate arrow when | /* Rotate arrow when open */ | ||
.ooo-faq__item | .ooo-faq__item[open] .ooo-faq__question::after { | ||
transform: translateY(-50%) rotate(90deg); | transform: translateY(-50%) rotate(90deg); | ||
} | } | ||
/* Answer | /* Left accent bar */ | ||
.ooo-faq__item | .ooo-faq__question::before { | ||
padding: 16px 22px | content: ""; | ||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
bottom: 0; | |||
width: 4px; | |||
background: var(--ooo-accent); | |||
} | |||
/* Answer */ | |||
.ooo-faq__item > *:not(summary) { | |||
padding: 16px 22px; | |||
line-height: 1.7; | line-height: 1.7; | ||
animation: fadeSlide 0.25s ease; | animation: fadeSlide 0.25s ease; | ||
} | } | ||
/* Smooth | /* Smooth animation */ | ||
@keyframes fadeSlide { | @keyframes fadeSlide { | ||
from { | from { opacity: 0; transform: translateY(-4px); } | ||
to { opacity: 1; transform: translateY(0); } | |||
} | |||
to { | /* Dark theme adjustments */ | ||
.skin-theme-clientpref-night .ooo-faq__item { | |||
background: rgba(245,196,0,0.08); | |||
border-color: rgba(245,196,0,0.35); | |||
} | } | ||