MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 628: / Line 628: @@
 /* =========================================================
-    OOO FAQ – Clean Native Accordion
+    OOO FAQ – Clean Industrial
     ========================================================= */
@@ Line 635: / Line 635: @@
 }
-/* FAQ item */
+/* FAQ card */
 .ooo-faq__item {
-   margin-bottom: 16px;
+   border: 1px solid rgba(245,196,0,0.25);
    border-radius: 8px;
+  background: rgba(245,196,0,0.05);
+  margin-bottom: 14px;
    overflow: hidden;
-  border: 1px solid rgba(245,196,0,0.25);
+   transition: border 0.2s ease, background 0.2s ease;
-  background: rgba(245,196,0,0.04);
-   transition: background 0.2s ease, border 0.2s ease;
 }
 /* Question */
 .ooo-faq__question {
-  position: relative;
-  display: block;
    padding: 16px 22px;
    font-weight: 700;
    cursor: pointer;
-  list-style: none;
+   position: relative;
-}
-/* Remove default marker */
-.ooo-faq__question::-webkit-details-marker {
-  display: none;
-}
-/* Custom arrow */
-.ooo-faq__question::after {
-  content: "▸";
-   position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 18px;
-  color: var(--ooo-accent);
-  transition: transform 0.25s ease;
 }
-/* Rotate arrow when open */
+/* Left accent */
-.ooo-faq__item[open] .ooo-faq__question::after {
-  transform: translateY(-50%) rotate(90deg);
-}
-/* Left accent bar */
 .ooo-faq__question::before {
    content: "";
@@ Line 686: / Line 662: @@
    width: 4px;
    background: var(--ooo-accent);
+}
+/* Hover */
+.ooo-faq__question:hover {
+  background: rgba(245,196,0,0.08);
+}
+/* Arrow (using MW toggle link) */
+.ooo-faq__item .mw-collapsible-toggle {
+  float: right;
+  font-size: 0;
+}
+.ooo-faq__item .mw-collapsible-toggle::after {
+  content: "▸";
+  font-size: 18px;
+  color: var(--ooo-accent);
+  transition: transform 0.2s ease;
+}
+/* Rotate arrow */
+.ooo-faq__item:not(.mw-collapsed) .mw-collapsible-toggle::after {
+  transform: rotate(90deg);
 }
 /* Answer */
-.ooo-faq__item > *:not(summary) {
+.ooo-faq__answer {
    padding: 16px 22px;
    line-height: 1.7;
-   animation: fadeSlide 0.25s ease;
+   border-top: 1px solid rgba(245,196,0,0.2);
-}
-/* Smooth animation */
-@keyframes fadeSlide {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
 }
-/* Dark theme adjustments */
+/* Dark theme */
 .skin-theme-clientpref-night .ooo-faq__item {
    background: rgba(245,196,0,0.08);
    border-color: rgba(245,196,0,0.35);
 }