MediaWiki:Common.css: Difference between revisions

Latest revision as of 17:22, 16 August 2025

.orb {
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  font-size: 0.95em;
}

.orb-fire {
  background-color: #e74c3c;
}

.orb-water {
  background-color: #3498db;
}

.orb-wood {
  background-color: #27ae60;
}

.orb-light {
  background-color: #f1c40f;
  color: black;
}


// Collapsible "Orbs" section in the sidebar (Vector 2010 + Vector 2022)
mw.loader.using('jquery').then(function () {
  var $portlet = $('#p-Orbs, #mw-panel #p-Orbs, .vector-sidebar #p-Orbs'); // covers both Vector variants
  if (!$portlet.length) return;

  // Find heading and content containers for both Vector versions
  var $heading = $portlet.find('.vector-menu-heading, h3').first();
  var $content = $portlet.find('.vector-menu-content, .body').first();

  // Start collapsed (optional)
  $content.hide();
  $portlet.addClass('pad-orbs-closed');

  // Make heading clickable
  $heading.css('cursor', 'pointer').on('click', function () {
    $content.slideToggle(150);
    $portlet.toggleClass('pad-orbs-closed');
  });
});

/* Caret for the Orbs portlet heading */
#p-Orbs .vector-menu-heading,
#p-Orbs h3 {
  position: relative;
  padding-right: 1.2em;
}
#p-Orbs .vector-menu-heading::after,
#p-Orbs h3::after {
  content: "▸";
  position: absolute;
  right: 0.2em;
  top: 0;
}
#p-Orbs:not(.pad-orbs-closed) .vector-menu-heading::after,
#p-Orbs:not(.pad-orbs-closed) h3::after {
  content: "▾";
}

@@ Line 25: / Line 25: @@
-/* Custom Top Navigation */
+// Collapsible "Orbs" section in the sidebar (Vector 2010 + Vector 2022)
-.custom-top-nav {
+mw.loader.using('jquery').then(function () {
-    background: linear-gradient(90deg, #1a1a2e, #16213e);
+  var $portlet = $('#p-Orbs, #mw-panel #p-Orbs, .vector-sidebar #p-Orbs'); // covers both Vector variants
-    border-bottom: 2px solid #0f3460;
+  if (!$portlet.length) return;
-    padding: 0;
-    margin: 0;
-    position: relative;
-    z-index: 100;
-}
-.nav-menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-}
-.nav-item {
+  // Find heading and content containers for both Vector versions
-    position: relative;
+  var $heading = $portlet.find('.vector-menu-heading, h3').first();
-}
+  var $content = $portlet.find('.vector-menu-content, .body').first();
-.nav-link {
+  // Start collapsed (optional)
-    display: block;
+  $content.hide();
-    padding: 15px 20px;
+  $portlet.addClass('pad-orbs-closed');
-    color: #ffffff !important;
-    text-decoration: none !important;
-    font-weight: 600;
-    font-size: 14px;
-    text-transform: uppercase;
-    transition: background-color 0.3s ease;
-}
-.nav-link:hover {
+  // Make heading clickable
-     background-color: rgba(255, 255, 255, 0.1);
+  $heading.css('cursor', 'pointer').on('click', function () {
-    color: #ffffff !important;
+     $content.slideToggle(150);
-}
+    $portlet.toggleClass('pad-orbs-closed');
+  });
+});
-.dropdown-menu {
+/* Caret for the Orbs portlet heading */
-    position: absolute;
+#p-Orbs .vector-menu-heading,
-    top: 100%;
+#p-Orbs h3 {
-    left: 0;
+  position: relative;
-    background: #2c2c54;
+  padding-right: 1.2em;
-    min-width: 200px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    border: 1px solid #444;
-    display: none;
-    z-index: 1000;
-    list-style: none;
-    margin: 0;
-    padding: 0;
 }
+#p-Orbs .vector-menu-heading::after,
-.nav-item:hover .dropdown-menu {
+#p-Orbs h3::after {
-    display: block;
+  content: "▸";
-}
+  position: absolute;
+  right: 0.2em;
-.dropdown-menu li {
+  top: 0;
-    border-bottom: 1px solid #444;
-}
-.dropdown-menu li:last-child {
-    border-bottom: none;
-}
-.dropdown-menu a {
-    display: block;
-    padding: 12px 16px;
-    color: #ffffff !important;
-    text-decoration: none !important;
-    font-size: 13px;
-    transition: background-color 0.3s ease;
-}
-.dropdown-menu a:hover {
-    background-color: #1a1a2e;
-    color: #4CAF50 !important;
-}
-/* Position the nav below the site header */
-.mw-page-container {
-    padding-top: 0;
-}
-.vector-header-container {
-    border-bottom: none;
-}
-/* Mobile responsive */
-@media (max-width: 768px) {
-    .nav-menu {
-        flex-direction: column;
-    }
-    .dropdown-menu {
-        position: static;
-        display: none;
-        box-shadow: none;
-        border: none;
-        background: #1a1a2e;
-    }
-    .nav-item:hover .dropdown-menu {
-        display: block;
-    }
 }
-.orb-dark {
+#p-Orbs:not(.pad-orbs-closed) .vector-menu-heading::after,
-   background-color: #8e44ad;
+#p-Orbs:not(.pad-orbs-closed) h3::after {
+   content: "▾";
 }