MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 87: / Line 87: @@
 }
-/* Style for collapsed sections */
+/* Fix image sizing and hover effect for Main Page icons */
-/* Ensure no unwanted spacing on the first accordion */
+.hover-table img {
-.accordion-section:first-child {
+    width: 100px;
-     margin-top: 0 !important;
+    height: 100px;
+    object-fit: contain;
+     transition: transform 0.2s ease-in-out;
 }
+.hover-table img:hover {
-.accordion-section {
+     transform: scale(1.1);
-     margin: 0;
-    padding: 0;
 }
-/* Header styling (collapsed by default) */
+/* Mobile Responsive adjustments */
-.accordion-header {
+@media (max-width: 768px) {
-     background-color: #222; /* Dark background */
+  .hover-table td {
-     color: #ccc; /* Lighter text */
+     display: inline-block;
-     font-weight: normal;
+     width: 45%;
-     padding: 15px;
+     box-sizing: border-box;
-     border: 1px solid #444;
+     text-align: center;
-     cursor: pointer;
+     vertical-align: top;
+     padding: 10px;
+  }
+  .hover-table tr {
      display: block;
-    width: 100%;
+  }
-    box-sizing: border-box;
-    margin-bottom: 0;
 }
-/* Header when expanded */
+/* Uniform icon sizing and hover fix */
-.accordion-section.expanded .accordion-header {
+.icon-wrapper {
-     background-color: #333; /* Slightly lighter dark */
+    width: 100px;
-     color: #fff; /* White text */
+    height: 100px;
-     font-weight: bold;
+    display: inline-flex;
-     border: 1px solid #00cc00;
+     align-items: center;
+     justify-content: center;
+     overflow: hidden;
+     transition: transform 0.2s ease-in-out;
 }
-/* Content styling */
+.icon-wrapper img {
-.accordion-content {
-    border: 1px solid #444;
-    padding: 10px;
-    background-color: #111; /* Dark background */
-    color: #ddd; /* Lighter text */
      width: 100%;
-     box-sizing: border-box;
+     height: 100%;
-     margin-top: 0;
+     object-fit: contain;
 }
-/* Ensure no extra spacing between sections */
+/* Hover effect on the wrapper */
-.accordion-section + .accordion-section {
+.icon-wrapper:hover {
-     margin-top: 5px;
+     transform: scale(1.1);
 }
-@media (max-width: 768px) {
+.hover-table td span {
-  .hover-table td {
+    white-space: nowrap;
      display: inline-block;
-     width: 45%;
+     max-width: 100%;
-     box-sizing: border-box;
+     font-size: 15px; /* or scale down just a bit */
-    text-align: center;
+}
-    vertical-align: top;
-    padding: 10px;
+/* Hide template spacer on mobile */
-  }
+@media screen and (max-width: 768px) {
-   .hover-table tr {
+   .desktop-only-spacer {
-     display: block;
+     display: none !important;
    }
 }