MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 628: | Line 628: | ||
/* ========================================================= | /* ========================================================= | ||
OOO FAQ – Stable | OOO FAQ SYSTEM – Clean Industrial (Stable) | ||
========================================================= */ | ========================================================= */ | ||
| Line 635: | Line 635: | ||
} | } | ||
/* FAQ | /* ========================================================= | ||
FAQ CARD | |||
========================================================= */ | |||
.ooo-faq__item { | .ooo-faq__item { | ||
position: relative; | position: relative; | ||
| Line 641: | Line 644: | ||
margin-bottom: 18px; | margin-bottom: 18px; | ||
overflow: hidden; | overflow: hidden; | ||
transition: | transition: background 0.2s ease, border 0.2s ease; | ||
border: 1px solid rgba(0,0,0,0.08); | border: 1px solid rgba(0,0,0,0.08); | ||
| Line 647: | Line 650: | ||
} | } | ||
/* Dark theme */ | /* Dark theme base */ | ||
.skin-theme-clientpref-night .ooo-faq__item { | .skin-theme-clientpref-night .ooo-faq__item { | ||
background: rgba(245,196,0,0.06); | background: rgba(245,196,0,0.06); | ||
| Line 653: | Line 656: | ||
} | } | ||
/* QUESTION */ | /* ========================================================= | ||
QUESTION | |||
========================================================= */ | |||
.ooo-faq__question { | .ooo-faq__question { | ||
padding: | position: relative; | ||
padding: 20px 70px 20px 22px; | |||
font-weight: 800; | font-weight: 800; | ||
font-size: 1. | font-size: 1.15rem; | ||
cursor: pointer; | cursor: pointer; | ||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
transition: background 0.2s ease; | |||
} | } | ||
/* Left accent */ | /* Left accent bar */ | ||
.ooo-faq__question::before { | .ooo-faq__question::before { | ||
content: ""; | content: ""; | ||
| Line 674: | Line 681: | ||
} | } | ||
/* | /* + / − toggle */ | ||
.ooo-faq__question::after { | .ooo-faq__question::after { | ||
content: " | content: "+"; | ||
position: absolute; | position: absolute; | ||
right: | right: 22px; | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
font-size: | font-size: 26px; | ||
font-weight: | font-weight: 900; | ||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
transition: | transition: 0.2s ease; | ||
} | } | ||
/* | /* When expanded */ | ||
.ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after { | .ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after { | ||
content: "−"; | |||
} | |||
/* Hover */ | |||
.ooo-faq__question:hover { | |||
background: rgba(0,0,0,0.03); | |||
} | } | ||
.skin-theme-clientpref-night .ooo-faq__question:hover { | |||
. | background: rgba(245,196,0,0.08); | ||
} | } | ||
/* ANSWER */ | /* ========================================================= | ||
ANSWER | |||
========================================================= */ | |||
.ooo-faq__answer { | .ooo-faq__answer { | ||
padding: | padding: 20px 22px; | ||
line-height: 1.7; | line-height: 1.7; | ||
font-size: 0.98rem; | font-size: 0.98rem; | ||
| Line 712: | Line 719: | ||
} | } | ||
/* Dark theme answer border */ | |||
.skin-theme-clientpref-night .ooo-faq__answer { | .skin-theme-clientpref-night .ooo-faq__answer { | ||
border-top: 1px solid rgba(245,196,0,0.2); | border-top: 1px solid rgba(245,196,0,0.2); | ||
} | } | ||
/* | /* ========================================================= | ||
HIDE DEFAULT MW TOGGLE TEXT | |||
========================================================= */ | |||
. | .ooo-faq__item .mw-collapsible-toggle { | ||
position: absolute; | |||
inset: 0; | |||
opacity: 0; | |||
z-index: 5; | |||
cursor: pointer; | |||
} | } | ||