MediaWiki:Common.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 2: | Zeile 2: | ||
LINK-FARBEN FÜR CHARACTER CARD | LINK-FARBEN FÜR CHARACTER CARD | ||
================================= */ | ================================= */ | ||
/* ================================= | |||
CHARACTER PROFILE - STYLE "KAGEROU" | |||
================================= */ | |||
.char-card { | |||
display: flex; | |||
gap: 20px; | |||
background-color: #1e1e1e; /* Dunkler Hintergrund Container */ | |||
padding: 20px; | |||
border-radius: 15px; | |||
border: 1px solid #333; | |||
color: #ddd; | |||
font-family: 'Segoe UI', sans-serif; | |||
max-width: 1100px; | |||
margin: 1em 0; | |||
} | |||
/* --- LINKE SPALTE (Bild & Name) --- */ | |||
.cc-left { | |||
flex: 0 0 350px; /* Feste Breite für die linke Spalte */ | |||
display: flex; | |||
flex-direction: column; | |||
gap: 15px; | |||
} | |||
.cc-image-box { | |||
background: #111; | |||
border: 5px solid #2a2a2a; /* Dicker Rahmen wie im Bild */ | |||
border-radius: 12px; | |||
overflow: hidden; | |||
line-height: 0; | |||
} | |||
.cc-image-box img { | |||
width: 100%; | |||
height: auto; | |||
display: block; | |||
} | |||
/* Der Namens-Kasten unter dem Bild */ | |||
.cc-name-badge { | |||
background: #2d2d2d; | |||
border: 1px solid #444; | |||
border-radius: 10px; | |||
padding: 15px; | |||
text-align: center; | |||
box-shadow: 0 4px 6px rgba(0,0,0,0.3); | |||
} | |||
.cc-name { | |||
font-size: 1.8em; | |||
font-weight: 800; | |||
color: #fff; | |||
text-transform: uppercase; | |||
letter-spacing: 1px; | |||
margin-bottom: 5px; | |||
} | |||
.cc-subtitle { | |||
font-size: 0.9em; | |||
color: #aaa; | |||
font-style: italic; | |||
border-top: 1px solid #444; | |||
padding-top: 5px; | |||
margin-top: 5px; | |||
} | |||
/* --- RECHTE SPALTE (Daten & Text) --- */ | |||
.cc-right { | |||
flex: 1; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 10px; | |||
} | |||
/* Daten-Riegel (Zeilen) */ | |||
.cc-data-row { | |||
display: flex; | |||
align-items: center; | |||
background: #2a2a2a; /* Riegel Hintergrund */ | |||
border: 1px solid #3d3d3d; | |||
border-radius: 8px; | |||
padding: 0; | |||
overflow: hidden; | |||
min-height: 40px; | |||
} | |||
.cc-label { | |||
flex: 0 0 140px; /* Breite der Beschriftung links */ | |||
background: #333; | |||
color: #bbb; | |||
font-weight: 800; | |||
text-transform: uppercase; | |||
font-size: 0.85em; | |||
padding: 10px 15px; | |||
display: flex; | |||
align-items: center; | |||
border-right: 1px solid #3d3d3d; | |||
} | |||
.cc-value { | |||
padding: 8px 15px; | |||
font-weight: 600; | |||
color: #fff; | |||
flex: 1; | |||
} | |||
/* Überschriften für Textbereiche */ | |||
.cc-header { | |||
margin-top: 20px; | |||
margin-bottom: 10px; | |||
font-size: 1.2em; | |||
font-weight: 700; | |||
color: #d4a017; /* Akzentfarbe (Gold) */ | |||
border-bottom: 2px dashed #444; | |||
padding-bottom: 5px; | |||
text-transform: uppercase; | |||
} | |||
.cc-text { | |||
line-height: 1.6; | |||
color: #ccc; | |||
background: rgba(0,0,0,0.2); | |||
padding: 15px; | |||
border-radius: 8px; | |||
} | |||
/* Mobile Ansicht */ | |||
@media (max-width: 800px) { | |||
.char-card { flex-direction: column; } | |||
.cc-left { flex: auto; width: 100%; } | |||
.cc-label { flex: 0 0 110px; font-size: 0.8em; } | |||
} | |||
/* Normale Links (Gold statt Blau) */ | /* Normale Links (Gold statt Blau) */ | ||
Version vom 5. Januar 2026, 14:06 Uhr
/* =================================
LINK-FARBEN FÜR CHARACTER CARD
================================= */
/* =================================
CHARACTER PROFILE - STYLE "KAGEROU"
================================= */
.char-card {
display: flex;
gap: 20px;
background-color: #1e1e1e; /* Dunkler Hintergrund Container */
padding: 20px;
border-radius: 15px;
border: 1px solid #333;
color: #ddd;
font-family: 'Segoe UI', sans-serif;
max-width: 1100px;
margin: 1em 0;
}
/* --- LINKE SPALTE (Bild & Name) --- */
.cc-left {
flex: 0 0 350px; /* Feste Breite für die linke Spalte */
display: flex;
flex-direction: column;
gap: 15px;
}
.cc-image-box {
background: #111;
border: 5px solid #2a2a2a; /* Dicker Rahmen wie im Bild */
border-radius: 12px;
overflow: hidden;
line-height: 0;
}
.cc-image-box img {
width: 100%;
height: auto;
display: block;
}
/* Der Namens-Kasten unter dem Bild */
.cc-name-badge {
background: #2d2d2d;
border: 1px solid #444;
border-radius: 10px;
padding: 15px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.cc-name {
font-size: 1.8em;
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.cc-subtitle {
font-size: 0.9em;
color: #aaa;
font-style: italic;
border-top: 1px solid #444;
padding-top: 5px;
margin-top: 5px;
}
/* --- RECHTE SPALTE (Daten & Text) --- */
.cc-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Daten-Riegel (Zeilen) */
.cc-data-row {
display: flex;
align-items: center;
background: #2a2a2a; /* Riegel Hintergrund */
border: 1px solid #3d3d3d;
border-radius: 8px;
padding: 0;
overflow: hidden;
min-height: 40px;
}
.cc-label {
flex: 0 0 140px; /* Breite der Beschriftung links */
background: #333;
color: #bbb;
font-weight: 800;
text-transform: uppercase;
font-size: 0.85em;
padding: 10px 15px;
display: flex;
align-items: center;
border-right: 1px solid #3d3d3d;
}
.cc-value {
padding: 8px 15px;
font-weight: 600;
color: #fff;
flex: 1;
}
/* Überschriften für Textbereiche */
.cc-header {
margin-top: 20px;
margin-bottom: 10px;
font-size: 1.2em;
font-weight: 700;
color: #d4a017; /* Akzentfarbe (Gold) */
border-bottom: 2px dashed #444;
padding-bottom: 5px;
text-transform: uppercase;
}
.cc-text {
line-height: 1.6;
color: #ccc;
background: rgba(0,0,0,0.2);
padding: 15px;
border-radius: 8px;
}
/* Mobile Ansicht */
@media (max-width: 800px) {
.char-card { flex-direction: column; }
.cc-left { flex: auto; width: 100%; }
.cc-label { flex: 0 0 110px; font-size: 0.8em; }
}
/* Normale Links (Gold statt Blau) */
.char-card a,
.char-card a:visited {
color: #d4a017 !important; /* Gold */
text-decoration: none;
font-weight: bold;
transition: color 0.2s;
}
/* Hover-Effekt (Weiß) */
.char-card a:hover {
color: #ffffff !important;
text-decoration: underline;
}
/* Links zu nicht existierenden Seiten (Helles Rot statt Dunkelrot) */
.char-card a.new,
.char-card a.new:visited {
color: #ff6b6b !important;
}
/* =================================
INTERNE LINKS IM PROFIL UMFAERBEN
================================= */
/* 1. Normale interne Wiki-Links ([[Link]]) */
.char-card a,
.char-card a:visited,
.char-card a.mw-redirect {
color: #d4a017 !important; /* Gold-Gelb passend zum Design */
text-decoration: none;
font-weight: bold;
}
/* 2. Wenn man mit der Maus drüberfährt */
.char-card a:hover {
color: #ffffff !important; /* Wird Weiß */
text-decoration: underline;
}
/* 3. Links zu Seiten, die es noch nicht gibt (normalerweise Dunkelrot) */
.char-card a.new,
.char-card a.new:visited {
color: #ff6b6b !important; /* Helles Rot, gut lesbar auf Grau */
}