More actions
No edit summary Tags: Manual revert Reverted |
No edit summary Tag: Manual revert |
||
| (27 intermediate revisions by the same user not shown) | |||
| Line 28: | Line 28: | ||
.infobox table { | .infobox table { | ||
width: 100%; /* Makes sure the table takes the full width of the infobox */ | 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 */ | |||
.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; | |||
} | |||
} | } | ||