MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 628: | Line 628: | ||
/* ========================================================= | /* ========================================================= | ||
OOO FAQ – Clean Industrial | OOO FAQ – Clean Industrial Collapsible | ||
========================================================= */ | ========================================================= */ | ||
| Line 635: | Line 635: | ||
} | } | ||
/* FAQ card */ | /* FAQ card container */ | ||
.ooo-faq__item { | .ooo-faq__item { | ||
position: relative; | |||
border: 1px solid rgba(245,196,0,0.25); | border: 1px solid rgba(245,196,0,0.25); | ||
border-radius: 8px; | border-radius: 8px; | ||
| Line 642: | Line 643: | ||
margin-bottom: 14px; | margin-bottom: 14px; | ||
overflow: hidden; | overflow: hidden; | ||
transition: | transition: background 0.2s ease, border 0.2s ease; | ||
} | } | ||
/* Question */ | /* Question block */ | ||
.ooo-faq__question { | .ooo-faq__question { | ||
padding: 16px 22px; | padding: 16px 50px 16px 22px; /* right padding for arrow */ | ||
font-weight: 700; | font-weight: 700; | ||
cursor: pointer; | cursor: pointer; | ||
| Line 653: | Line 654: | ||
} | } | ||
/* Left accent */ | /* Left accent bar */ | ||
.ooo-faq__question::before { | .ooo-faq__question::before { | ||
content: ""; | content: ""; | ||
| Line 664: | Line 665: | ||
} | } | ||
/* | /* Custom large arrow */ | ||
.ooo-faq__question | .ooo-faq__question::after { | ||
content: "▸"; | content: "▸"; | ||
font-size: | position: absolute; | ||
right: 18px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
font-size: 20px; | |||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
transition: transform 0.2s ease; | transition: transform 0.2s ease; | ||
} | } | ||
/* Rotate arrow */ | /* Rotate arrow when expanded */ | ||
.ooo-faq__item:not(.mw-collapsed) . | .ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after { | ||
transform: rotate(90deg); | transform: translateY(-50%) rotate(90deg); | ||
} | |||
/* Hide default tiny toggle visually */ | |||
.ooo-faq__item .mw-collapsible-toggle { | |||
position: absolute; | |||
inset: 0; | |||
opacity: 0; | |||
z-index: 2; | |||
} | } | ||
| Line 692: | Line 695: | ||
line-height: 1.7; | line-height: 1.7; | ||
border-top: 1px solid rgba(245,196,0,0.2); | border-top: 1px solid rgba(245,196,0,0.2); | ||
} | |||
/* Hover */ | |||
.ooo-faq__question:hover { | |||
background: rgba(245,196,0,0.08); | |||
} | } | ||