MediaWiki:Common.css: Difference between revisions
m faq item style |
mNo edit summary |
||
| Line 628: | Line 628: | ||
/* ========================================================= | /* ========================================================= | ||
OOO FAQ SYSTEM | OOO FAQ SYSTEM (Clean Industrial) | ||
========================================================= */ | ========================================================= */ | ||
| Line 635: | Line 635: | ||
} | } | ||
/* Individual item */ | /* Individual FAQ item */ | ||
.ooo-faq__item { | .ooo-faq__item { | ||
border-bottom: 1px solid var(--ooo-border); | border-bottom: 1px solid var(--ooo-border); | ||
padding: 14px 0; | padding: 14px 0; | ||
transition: background 0.15s ease; | |||
} | |||
/* Subtle hover */ | |||
.ooo-faq__item:hover { | |||
background: rgba(0,0,0,0.02); | |||
} | |||
.skin-theme-clientpref-night .ooo-faq__item:hover { | |||
background: rgba(255,255,255,0.03); | |||
} | |||
@media (prefers-color-scheme: dark) { | |||
.skin-theme-clientpref-os .ooo-faq__item:hover { | |||
background: rgba(255,255,255,0.03); | |||
} | |||
} | } | ||
| Line 646: | Line 662: | ||
cursor: pointer; | cursor: pointer; | ||
position: relative; | position: relative; | ||
padding-right: | padding-right: 22px; | ||
list-style: none; | |||
} | |||
/* Remove default triangle */ | |||
.ooo-faq__question::-webkit-details-marker { | |||
display: none; | |||
} | } | ||
/* | /* Custom arrow */ | ||
.ooo-faq__question::after { | .ooo-faq__question::after { | ||
content: "▾"; | content: "▾"; | ||
position: absolute; | position: absolute; | ||
right: 0; | right: 0; | ||
color: var(--ooo-accent); | |||
transition: transform 0.2s ease; | transition: transform 0.2s ease; | ||
} | } | ||
/* Rotate when open */ | /* Rotate arrow when open */ | ||
details[open] .ooo-faq__question::after { | |||
transform: rotate(180deg); | transform: rotate(180deg); | ||
} | } | ||
| Line 670: | Line 692: | ||
} | } | ||
/* | /* Slight spacing refinement */ | ||
.ooo-faq__answer p { | |||
margin-bottom: 10px; | |||
} | } | ||