|
|
| Line 1: |
Line 1: |
| /* ================================
| | .main-banner { |
| BANNER WRAPPER
| | position: relative; |
| ================================ */
| | width: 100%; /*page width*/ |
| | | margin: 200px; |
| .event-banner { | |
| position: relative; /* Allows background layering */
| |
| width: 100%; /* Full page width */
| |
| margin: 20px 0;
| |
| border-radius: 20px;
| |
| overflow: visible; /* Prevents content from being cut off */
| |
| } | | } |
|
| |
| /* Background layer (visual only) */
| |
| .banner-bg-wrapper {
| |
| position: absolute;
| |
| margin: 0; /* top/right/bottom/left = 0 */
| |
| border-radius: 20px;
| |
| z-index: 1;
| |
| /* background can go here */
| |
| }
| |
|
| |
| /* Content layer */
| |
| .banner-overlay {
| |
| position: relative;
| |
| z-index: 2; /* Above background */
| |
| padding: 10px 16px; /* Controlled padding */
| |
| }
| |
|
| |
|
| |
| /* ================================
| |
| FLEX LAYOUT (CRITICAL PART)
| |
| ================================ */
| |
|
| |
| .element-container {
| |
| display: flex; /* Enables flexbox */
| |
| flex-wrap: nowrap;/* FORCE one single row */
| |
| width: 100%;
| |
| height: 100%;
| |
| }
| |
|
| |
| /* Each element box */
| |
| .element-item {
| |
| flex: 0 0 calc(100% / 7); /* EXACTLY 7 equal columns */
| |
| align-items: center;
| |
| min-width: 0; /* ALLOWS shrinking (prevents scrollbar) */
| |
| max-width: calc(100% / 7);
| |
| cursor: pointer;
| |
| }
| |
|
| |
|
| |
| /* ================================
| |
| CLICKABLE CONTENT
| |
| ================================ */
| |
|
| |
| .element-link {
| |
| display: flex; /* Stack image + text */
| |
| flex-direction: column;
| |
| align-items: center; /* Center horizontally */
| |
| justify-content: center;
| |
| color: inherit; /* Keep custom colors */
| |
|
| |
| }
| |
|
| |
| /* MediaWiki image wrapper */
| |
| .element-link .image {
| |
| display: block;
| |
| min-width: 0;
| |
| width: 100%;
| |
|
| |
| }
| |
|
| |
| /* Actual image */
| |
| .element-link img { /* Fill available box width */
| |
| max-width: 90px; /* Cap image size */
| |
| height: auto; /* Preserve aspect ratio */
| |
| max-height: 90px;
| |
| display: block;
| |
| margin: 0 auto 4px; /* Center + small gap */
| |
| }
| |
|
| |
| /* Text label */
| |
| .element-link span {
| |
| font-weight: bold;
| |
| font-size: 0.9rem;
| |
| text-align: center;
| |
| }
| |
|
| |
|
| |
| /* ================================
| |
| PER-ELEMENT COLORS
| |
| ================================ */
| |
|
| |
| .fire-text { color: #e25822 !important; }
| |
| .water-text { color: #3b82f6; }
| |
| .earth-text { color: #65a30d; }
| |
| .air-text { color: #94a3b8; }
| |
| .voidal-text { color: #6b21a8; }
| |
| .aetheric-text { color: #facc15; }
| |
| .neutral-text { color: #64748b; }
| |
