|
|
| 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 */
| |
| .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);
| |
| }
| |
|
| |
| /* Style for collapsed sections */
| |
| /* Ensure no unwanted spacing on the first accordion */
| |
| .accordion-section:first-child {
| |
| margin-top: 0 !important;
| |
| }
| |
|
| |
|
| |
| .accordion-section {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| /* Header styling (collapsed by default) */
| |
| .accordion-header {
| |
| background-color: #222; /* Dark background */
| |
| color: #ccc; /* Lighter text */
| |
| font-weight: normal;
| |
| padding: 15px;
| |
| border: 1px solid #444;
| |
| cursor: pointer;
| |
| display: block;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| /* Header when expanded */
| |
| .accordion-section.expanded .accordion-header {
| |
| background-color: #333; /* Slightly lighter dark */
| |
| color: #fff; /* White text */
| |
| font-weight: bold;
| |
| border: 1px solid #00cc00;
| |
| }
| |
|
| |
| /* Content styling */
| |
| .accordion-content {
| |
| border: 1px solid #444;
| |
| padding: 10px;
| |
| background-color: #111; /* Dark background */
| |
| color: #ddd; /* Lighter text */
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| margin-top: 0;
| |
| }
| |
|
| |
| /* Ensure no extra spacing between sections */
| |
| .accordion-section + .accordion-section {
| |
| margin-top: 5px;
| |
| }
| |
