MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus Lost Dreams Of Tomorrow Wiki
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| 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; | |||
} | |||
} | |||
Version vom 12. Januar 2026, 01:14 Uhr
/* 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;
}