MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
+/* Script Infobox settings */
+.infobox {
+    width: 210px; /* Fixed width for both mobile and desktop */
+    float: right;
+    margin: 0 0 1em 1em;
+    background: #333;
+    color: #fff;
+    padding: 1px;
+}
+/* Center infobox on mobile */
+@media (max-width: 767px) {
+    .infobox {
+        float: none;
+        margin: 0 auto 1em auto;
+    }
+}
+/* Center the image and table */
+.center-content {
+    text-align: center;
+    padding-top: 5px; /* You can adjust this padding as needed */
+}
+/* Ensure the parameters table is also centered */
+.infobox table {
+    width: 100%; /* Makes sure the table takes the full width of the infobox */
+}
+/* Discord Styling */
+#discord-link-below-logo {
+    margin-top: 5px;
+    line-height: 0;
+}
+#discord-link-below-logo img {
+    vertical-align: middle;
+}
+.vector-header-start {
+    display: flex;
+    flex-direction: column; /* Forces children (logo, then Discord link) to stack vertically */
+    align-items: flex-start; /* Aligns items to the left */
+}
 /* Base table styling */
@@ Line 43: / Line 87: @@
 }
+/* Fix image sizing and hover effect for Main Page icons */
+.hover-table img {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    transition: transform 0.2s ease-in-out;
+}
+.hover-table img:hover {
+    transform: scale(1.1);
+}
+/* Mobile Responsive adjustments */
+@media (max-width: 768px) {
+  .hover-table td {
+    display: inline-block;
+    width: 45%;
+    box-sizing: border-box;
+    text-align: center;
+    vertical-align: top;
+    padding: 10px;
+  }
+  .hover-table tr {
+    display: block;
+  }
+}
+/* Uniform icon sizing and hover fix */
+.icon-wrapper {
+    width: 100px;
+    height: 100px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    transition: transform 0.2s ease-in-out;
+}
+.icon-wrapper img {
-/* Style for collapsed sections */
+     width: 100%;
-.accordion-section.mw-collapsed .mw-headline {
+     height: 100%;
-     background-color: #e0e0e0; /* Gray when collapsed */
+     object-fit: contain;
-     font-weight: normal;
-    padding: 10px;
-    border: 1px solid #ccc;
-    cursor: pointer;
-    display: block;
-    width: 100%; /* Full width for easier clicking */
-     box-sizing: border-box; /* Includes padding in width */
 }
-/* Style for expanded sections */
+/* Hover effect on the wrapper */
-.accordion-section:not(.mw-collapsed) .mw-headline {
+.icon-wrapper:hover {
-     background-color: #d0ffd0; /* Light green when expanded */
+     transform: scale(1.1);
-    font-weight: bold;
-    padding: 10px;
-    border: 1px solid #00cc00;
-    cursor: pointer;
-    display: block;
-    width: 100%; /* Full width for easier clicking */
-    box-sizing: border-box;
 }
-/* Content styling */
+.hover-table td span {
-.accordion-section .mw-collapsible-content {
+     white-space: nowrap;
-     border: 1px solid #ccc;
+     display: inline-block;
-     padding: 10px;
+     max-width: 100%;
-     background-color: #f9f9f9;
+     font-size: 15px; /* or scale down just a bit */
-     width: 100%; /* Matches header width */
-    box-sizing: border-box;
 }
-/* Hide default [show]/[hide] links */
+/* Hide template spacer on mobile */
-.mw-collapsible-toggle {
+@media screen and (max-width: 768px) {
-     display: none;
+  .desktop-only-spacer {
+     display: none !important;
+  }
 }