MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 29: / Line 29: @@
      width: 100%; /* Makes sure the table takes the full width of the infobox */
 }
 /* Discord Styling */
@@ Line 45: / Line 43: @@
      flex-direction: column; /* Forces children (logo, then Discord link) to stack vertically */
      align-items: flex-start; /* Aligns items to the left */
+}
+/* Base table styling */
+.hover-table {
+    font-family: 'Arial', sans-serif; /* Fallback; ideally use a custom font below */
+}
+/* Header styling */
+.hover-table caption {
+    font-size: 32px;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px #8B6F35;
+    padding-bottom: 15px;
+}
+/* Cell styling */
+.hover-table td {
+    transition: all 0.3s ease;
+    padding: 10px;
+}
+/* Text styling for links */
+.hover-table td a {
+    font-size: 18px;
+    color: #E0C882;
+    font-weight: 600;
+    text-shadow: 0 0 3px rgba(139, 111, 53, 0.5);
+    text-decoration: none; /* Removes underline for a cleaner look */
+}
+/* Hover effect for the whole cell */
+.hover-table td:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 10px rgba(224, 200, 130, 0.7);
+    border-radius: 5px;
+    background-color: rgba(224, 200, 130, 0.1);
+}
+/* Optional: Brighten text on hover */
+.hover-table td:hover a {
+    color: #FFD700; /* Slightly brighter gold for emphasis */
+    text-shadow: 0 0 5px rgba(139, 111, 53, 0.8);
+}
+/* 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 {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+/* Hover effect on the wrapper */
+.icon-wrapper:hover {
+    transform: scale(1.1);
+}
+.hover-table td span {
+    white-space: nowrap;
+    display: inline-block;
+    max-width: 100%;
+    font-size: 15px; /* or scale down just a bit */
+}
+/* Hide template spacer on mobile */
+@media screen and (max-width: 768px) {
+  .desktop-only-spacer {
+    display: none !important;
+  }
 }