MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 628: | Line 628: | ||
/* ========================================================= | /* ========================================================= | ||
OOO FAQ – | OOO FAQ – Stable + Styled (MW Native Compatible) | ||
========================================================= */ | ========================================================= */ | ||
| Line 643: | Line 643: | ||
transition: all 0.2s ease; | transition: all 0.2s ease; | ||
border: 1px solid rgba(0,0,0,0.08); | border: 1px solid rgba(0,0,0,0.08); | ||
background: var(--background-color-base, #ffffff); | background: var(--background-color-base, #ffffff); | ||
} | } | ||
/* Dark theme | /* Dark theme */ | ||
.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 654: | Line 653: | ||
} | } | ||
/* | /* QUESTION */ | ||
.ooo-faq__question { | .ooo-faq__question { | ||
padding: 18px 60px 18px 22px; | padding: 18px 60px 18px 22px; | ||
| Line 661: | Line 660: | ||
cursor: pointer; | cursor: pointer; | ||
position: relative; | position: relative; | ||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
} | } | ||
/* | /* Left accent */ | ||
.ooo-faq__question::before { | .ooo-faq__question::before { | ||
content: ""; | content: ""; | ||
| Line 680: | Line 674: | ||
} | } | ||
/* | /* Custom arrow */ | ||
.ooo-faq__question::after { | .ooo-faq__question::after { | ||
content: "▸"; | content: "▸"; | ||
| Line 687: | Line 681: | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
font-size: | font-size: 20px; | ||
font-weight: bold; | font-weight: bold; | ||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
| Line 693: | Line 687: | ||
} | } | ||
/* Rotate arrow when | /* Rotate arrow when expanded */ | ||
.ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after { | .ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after { | ||
transform: translateY(-50%) rotate(90deg); | transform: translateY(-50%) rotate(90deg); | ||
} | } | ||
/* | /* Hide default MW expand text */ | ||
.ooo-faq__item .mw-collapsible-toggle { | |||
font-size: 0; | |||
width: 100%; | |||
height: 100%; | |||
position: absolute; | |||
inset: 0; | |||
opacity: 0; | |||
cursor: pointer; | |||
z-index: 3; | |||
} | |||
/* ANSWER */ | |||
.ooo-faq__answer { | .ooo-faq__answer { | ||
padding: 18px 22px; | padding: 18px 22px; | ||
| Line 706: | Line 712: | ||
} | } | ||
.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); | ||
} | } | ||
/* | /* Hover */ | ||
.ooo-faq__question:hover { | .ooo-faq__question:hover { | ||
background: rgba(0,0,0,0.03); | background: rgba(0,0,0,0.03); | ||