MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 628: | Line 628: | ||
/* ========================================================= | /* ========================================================= | ||
OOO FAQ – | OOO FAQ – Polished Industrial (Light/Dark Safe) | ||
========================================================= */ | ========================================================= */ | ||
.ooo-faq { | .ooo-faq { | ||
margin: | margin: 50px 0; | ||
} | } | ||
/* FAQ | /* FAQ Card */ | ||
.ooo-faq__item { | .ooo-faq__item { | ||
position: relative; | position: relative; | ||
border-radius: 10px; | |||
border-radius: | margin-bottom: 18px; | ||
margin-bottom: | |||
overflow: hidden; | overflow: hidden; | ||
transition: | transition: all 0.2s ease; | ||
/* theme adaptive base */ | |||
border: 1px solid rgba(0,0,0,0.08); | |||
background: var(--background-color-base, #ffffff); | |||
} | |||
/* Dark theme base */ | |||
.skin-theme-clientpref-night .ooo-faq__item { | |||
background: rgba(245,196,0,0.06); | |||
border-color: rgba(245,196,0,0.25); | |||
} | } | ||
/* Question block */ | /* Question block */ | ||
.ooo-faq__question { | .ooo-faq__question { | ||
padding: | padding: 18px 60px 18px 22px; | ||
font-weight: | font-weight: 800; | ||
font-size: 1.1rem; | |||
cursor: pointer; | cursor: pointer; | ||
position: relative; | position: relative; | ||
transition: background 0.2s ease; | |||
} | |||
/* Make question brand colored */ | |||
.ooo-faq__question { | |||
color: var(--ooo-accent); | |||
} | } | ||
/* | /* Stronger accent bar */ | ||
.ooo-faq__question::before { | .ooo-faq__question::before { | ||
content: ""; | content: ""; | ||
| Line 661: | Line 676: | ||
top: 0; | top: 0; | ||
bottom: 0; | bottom: 0; | ||
width: | width: 5px; | ||
background: var(--ooo-accent); | background: var(--ooo-accent); | ||
} | } | ||
/* | /* Larger arrow */ | ||
.ooo-faq__question::after { | .ooo-faq__question::after { | ||
content: "▸"; | content: "▸"; | ||
position: absolute; | position: absolute; | ||
right: | right: 20px; | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
font-size: | font-size: 22px; | ||
font-weight: bold; | |||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
transition: transform 0. | transition: transform 0.25s ease; | ||
} | } | ||
/* Rotate arrow when | /* Rotate arrow when open */ | ||
.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); | ||
} | } | ||
/* Answer */ | /* Answer */ | ||
.ooo-faq__answer { | .ooo-faq__answer { | ||
padding: | padding: 18px 22px; | ||
line-height: 1.7; | line-height: 1.7; | ||
font-size: 0.98rem; | |||
border-top: 1px solid rgba(0,0,0,0.06); | |||
} | |||
/* Dark theme answer border */ | |||
.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); | ||
} | } | ||
/* | /* Subtle hover */ | ||
.ooo-faq__question:hover { | .ooo-faq__question:hover { | ||
background: rgba( | background: rgba(0,0,0,0.03); | ||
} | } | ||
.skin-theme-clientpref-night .ooo-faq__question:hover { | |||
.skin-theme-clientpref-night .ooo- | |||
background: rgba(245,196,0,0.08); | background: rgba(245,196,0,0.08); | ||
} | } | ||