|
|
| Zeile 1: |
Zeile 1: |
| /* World Carousel Container */
| |
| .world-carousel-container {
| |
| max-width: 1400px;
| |
| margin: 0 auto;
| |
| background-color: #0a0a0a;
| |
| border: 1px solid #222;
| |
| padding: 1.5em;
| |
| font-family: sans-serif;
| |
| overflow: hidden;
| |
| }
| |
|
| |
|
| /* Carousel Row */
| |
| .carousel-row {
| |
| position: relative;
| |
| margin-bottom: 2em;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .carousel-row:last-child {
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| /* Carousel Track */
| |
| .carousel-track {
| |
| display: flex;
| |
| gap: 1em;
| |
| overflow-x: auto;
| |
| overflow-y: hidden;
| |
| scroll-behavior: smooth;
| |
| scrollbar-width: thin;
| |
| scrollbar-color: #ffd966 #111;
| |
| padding-bottom: 0.5em;
| |
| cursor: grab;
| |
| user-select: none;
| |
| -webkit-overflow-scrolling: touch;
| |
| }
| |
|
| |
| .carousel-track:active {
| |
| cursor: grabbing;
| |
| }
| |
|
| |
| .carousel-track::-webkit-scrollbar {
| |
| height: 8px;
| |
| }
| |
|
| |
| .carousel-track::-webkit-scrollbar-track {
| |
| background: #111;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| .carousel-track::-webkit-scrollbar-thumb {
| |
| background: #ffd966;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| .carousel-track::-webkit-scrollbar-thumb:hover {
| |
| background: #ffed99;
| |
| }
| |
|
| |
| /* World Box */
| |
| .world-box {
| |
| min-width: calc((100% - 5em) / 6);
| |
| flex-shrink: 0;
| |
| background-color: #111;
| |
| border: 2px solid #222;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| transition: all 0.3s ease;
| |
| text-decoration: none;
| |
| display: block;
| |
| }
| |
|
| |
| .world-box:hover {
| |
| border-color: #ffd966;
| |
| transform: translateY(-4px);
| |
| box-shadow: 0 4px 12px rgba(255, 217, 102, 0.3);
| |
| }
| |
|
| |
| /* World Image */
| |
| .world-image {
| |
| width: 100%;
| |
| height: 200px;
| |
| background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| overflow: hidden;
| |
| border-bottom: 2px solid #222;
| |
| position: relative;
| |
| }
| |
|
| |
| .world-image::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| background: radial-gradient(circle at center, rgba(255, 217, 102, 0.1) 0%, transparent 70%);
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
|
| |
| .world-box:hover .world-image::before {
| |
| opacity: 1;
| |
| }
| |
|
| |
| .world-image img {
| |
| max-width: 100%;
| |
| max-height: 100%;
| |
| image-rendering: pixelated;
| |
| image-rendering: crisp-edges;
| |
| border: none !important;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .world-box:hover .world-image img {
| |
| transform: scale(1.05);
| |
| }
| |
|
| |
| /* World Name */
| |
| .world-name {
| |
| padding: 0.8em;
| |
| font-size: 1em;
| |
| font-weight: bold;
| |
| color: #eee;
| |
| text-align: center;
| |
| background-color: #0d0d0d;
| |
| transition: all 0.3s ease;
| |
| }
| |
|
| |
| .world-box:hover .world-name {
| |
| color: #ffd966;
| |
| background-color: #111;
| |
| }
| |
|
| |
| /* Row Title */
| |
| .carousel-row-title {
| |
| font-size: 1.2em;
| |
| font-weight: bold;
| |
| color: #ffd966;
| |
| background-color: #000;
| |
| border: 1px solid #222;
| |
| padding: 0.6em 1em;
| |
| margin-bottom: 1em;
| |
| text-align: center;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| /* Responsive */
| |
| @media (max-width: 1200px) {
| |
| .world-box {
| |
| min-width: calc((100% - 4em) / 5);
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 992px) {
| |
| .world-box {
| |
| min-width: calc((100% - 3em) / 4);
| |
| }
| |
| .world-image {
| |
| height: 180px;
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .world-box {
| |
| min-width: calc((100% - 2em) / 3);
| |
| }
| |
| .world-image {
| |
| height: 160px;
| |
| }
| |
| .world-name {
| |
| font-size: 0.9em;
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 480px) {
| |
| .world-box {
| |
| min-width: calc((100% - 1em) / 2);
| |
| }
| |
| .world-image {
| |
| height: 140px;
| |
| }
| |
| .carousel-row-title {
| |
| font-size: 1em;
| |
| }
| |
| }
| |
|
| |
|
|
| |
|
/*----------------------------------------- MediaWiki Base Change --------------------------------------*/
/* Aggressiveres Override für alle Container */
.mw-parser-output,
.mw-body,
.mw-body-content,
#bodyContent {
background-color: #0a0a0a !important;
}
/* Entferne alle weißen Hintergründe */
.mainpage-container * {
background-color: transparent;
}
/* Entferne alle Borders von Container-Elementen */
.mainpage-container,
.mainpage-content,
.mainpage-sidebar,
.content-section {
border: none !important;
}
.sidebar-panel,
.landing-container,
.npc-grid-container {
background-color: #0a0a0a;
border: none !important; /* Keine Borders mehr */
padding: 1em;
}
