MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 627: / Line 627: @@
 }
-/* =========================================
+/* =========================================================
-    Clean FAQ – Proper MW Collapsible Styling
+    OOO FAQ SYSTEM – Industrial Accordion
-    ========================================= */
+    ========================================================= */
-/* Remove table visuals */
+.ooo-faq {
+  margin: 40px 0;
+}
+/* Remove default table look */
 .ooo-faq__item {
    border: none !important;
    background: none !important;
-   margin-bottom: 14px;
+   margin-bottom: 16px;
 }
-/* Remove table borders */
+/* Remove default table cell styles */
 .ooo-faq__item th,
 .ooo-faq__item td {
    border: none !important;
+  background: none !important;
    padding: 0 !important;
-  background: none !important;
 }
-/* Make header full-width clickable */
+/* Question block */
 .ooo-faq__question {
+  position: relative;
+  display: block;
    font-weight: 700;
-   padding: 14px 18px;
+   padding: 16px 18px 16px 22px;
    cursor: pointer;
-   position: relative;
+   border-radius: 8px;
-   background: rgba(0,0,0,0.03);
+   border: 1px solid rgba(245,196,0,0.25);
-   border-radius: 6px;
+   background: rgba(245,196,0,0.05);
-   transition: background 0.2s ease;
+   transition: background 0.2s ease, border 0.2s ease;
 }
-.skin-theme-clientpref-night .ooo-faq__question {
+/* Left accent bar */
-   background: rgba(255,255,255,0.05);
+.ooo-faq__question::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+   background: var(--ooo-accent);
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
-/* Subtle hover */
+/* Hover */
 .ooo-faq__question:hover {
-   background: rgba(0,0,0,0.06);
+   background: rgba(245,196,0,0.08);
+  border-color: rgba(245,196,0,0.5);
+}
+/* Dark theme adjustments */
+.skin-theme-clientpref-night .ooo-faq__question {
+  background: rgba(245,196,0,0.08);
+  border-color: rgba(245,196,0,0.35);
 }
 .skin-theme-clientpref-night .ooo-faq__question:hover {
-   background: rgba(255,255,255,0.08);
+   background: rgba(245,196,0,0.12);
 }
-/* Style built-in toggle link */
+/* Hide default MW toggle */
 .ooo-faq__item .mw-collapsible-toggle {
-   float: right;
+   display: none !important;
-  font-size: 0;
 }
-/* Custom arrow replacing default */
+/* Custom arrow */
-.ooo-faq__item .mw-collapsible-toggle::after {
+.ooo-faq__question::after {
    content: "▸";
-   font-size: 16px;
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+   font-size: 18px;
    color: var(--ooo-accent);
-  margin-left: 10px;
+   transition: transform 0.25s ease;
-   transition: transform 0.2s ease;
 }
-/* Rotate arrow when open */
+/* Rotate arrow when expanded */
-.ooo-faq__item:not(.mw-collapsed) .mw-collapsible-toggle::after {
+.ooo-faq__item:not(.mw-collapsed) .ooo-faq__question::after {
-   transform: rotate(90deg);
+   transform: translateY(-50%) rotate(90deg);
 }
-/* Answer content */
+/* Answer block */
 .ooo-faq__item td {
-   padding: 14px 18px !important;
+   padding: 16px 22px !important;
    line-height: 1.7;
-   opacity: 0.95;
+   border-left: 4px solid rgba(245,196,0,0.4);
+  margin-top: 6px;
+  animation: fadeSlide 0.25s ease;
+}
+/* Smooth open animation */
+@keyframes fadeSlide {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }