MediaWiki:Common.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
/* ================================= | /* ================================= | ||
CHARACTER PROFILE - STYLE "SHADOW" | |||
CHARACTER PROFILE - STYLE " | |||
================================= */ | ================================= */ | ||
| Zeile 10: | Zeile 6: | ||
display: flex; | display: flex; | ||
gap: 20px; | gap: 20px; | ||
background-color: #1e1e1e; /* Dunkler Hintergrund | background-color: #1e1e1e; /* Dunkler Hintergrund */ | ||
padding: 20px; | padding: 20px; | ||
border-radius: | border-radius: 4px; | ||
border: 1px solid #333; | border: 1px solid #333; | ||
color: #ddd; | color: #ddd; | ||
font-family: 'Segoe UI', sans-serif; | font-family: 'Segoe UI', Tahoma, sans-serif; | ||
max-width: 1100px; | max-width: 1100px; | ||
margin: 1em 0; | margin: 1em 0; | ||
box-shadow: 0 4px 10px rgba(0,0,0,0.5); | |||
} | } | ||
/* --- LINKE SPALTE (Bild & Name) --- */ | /* --- LINKE SPALTE (Bild & Name) --- */ | ||
.cc-left { | .cc-left { | ||
flex: 0 0 350px; | flex: 0 0 350px; | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
| Zeile 28: | Zeile 25: | ||
} | } | ||
/* Bild-Container (Rahmenlos) */ | |||
.cc-image-box { | .cc-image-box { | ||
border: none; | |||
border: | border-radius: 0; /* Keine runden Ecken */ | ||
overflow: hidden; | overflow: hidden; | ||
line-height: 0; | line-height: 0; | ||
background: #000; | |||
box-shadow: 0 4px 8px rgba(0,0,0,0.4); | |||
} | } | ||
| Zeile 42: | Zeile 41: | ||
} | } | ||
/* | /* Namens-Schild */ | ||
.cc-name-badge { | .cc-name-badge { | ||
background: # | background: #252525; | ||
border: 1px solid # | border: 1px solid #3a3a3a; | ||
border-radius: | border-radius: 4px; | ||
padding: 15px; | padding: 15px; | ||
text-align: center; | text-align: center; | ||
box-shadow: 0 4px | box-shadow: 0 2px 4px rgba(0,0,0,0.3); | ||
} | } | ||
.cc-name { | .cc-name { | ||
font-size: 1. | font-size: 1.6em; | ||
font-weight: 800; | font-weight: 800; | ||
color: #fff; | color: #fff; | ||
| Zeile 59: | Zeile 58: | ||
letter-spacing: 1px; | letter-spacing: 1px; | ||
margin-bottom: 5px; | margin-bottom: 5px; | ||
line-height: 1.1; | |||
} | } | ||
.cc-subtitle { | .cc-subtitle { | ||
font-size: 0.9em; | font-size: 0.9em; | ||
color: # | color: #888; | ||
font-style: italic; | font-style: italic; | ||
border-top: 1px solid # | border-top: 1px solid #3a3a3a; | ||
padding-top: | padding-top: 8px; | ||
margin-top: | margin-top: 8px; | ||
} | } | ||
| Zeile 75: | Zeile 75: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: | gap: 8px; /* Abstand zwischen den Riegeln */ | ||
} | } | ||
/* Daten-Riegel | /* Daten-Riegel */ | ||
.cc-data-row { | .cc-data-row { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
background: #2a2a2a; | background: #2a2a2a; | ||
border: 1px solid # | border: 1px solid #3a3a3a; | ||
border-radius: | border-radius: 4px; | ||
overflow: hidden; | overflow: hidden; | ||
min-height: | min-height: 38px; | ||
} | } | ||
.cc-label { | .cc-label { | ||
flex: 0 0 140px; /* Breite der Beschriftung | flex: 0 0 140px; /* Breite der Beschriftung */ | ||
background: #333; | background: #333; | ||
color: # | color: #aaa; | ||
font-weight: | font-weight: 700; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
font-size: 0. | font-size: 0.8em; | ||
padding: | padding: 8px 15px; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
border-right: 1px solid # | border-right: 1px solid #3a3a3a; | ||
letter-spacing: 0.5px; | |||
} | } | ||
| Zeile 106: | Zeile 106: | ||
padding: 8px 15px; | padding: 8px 15px; | ||
font-weight: 600; | font-weight: 600; | ||
color: # | color: #eee; | ||
flex: 1; | flex: 1; | ||
font-size: 0.95em; | |||
} | } | ||
/* Überschriften | /* Überschriften */ | ||
.cc-header { | .cc-header { | ||
margin-top: | margin-top: 25px; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
font-size: 1. | font-size: 1.1em; | ||
font-weight: 700; | font-weight: 700; | ||
color: #d4a017; /* | color: #d4a017; /* Gold */ | ||
border-bottom: | border-bottom: 1px dashed #444; | ||
padding-bottom: 5px; | padding-bottom: 5px; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 1px; | |||
} | } | ||
/* Text-Block (Blocksatz) */ | |||
.cc-text { | .cc-text { | ||
line-height: 1.6; | line-height: 1.6; | ||
| Zeile 127: | Zeile 130: | ||
background: rgba(0,0,0,0.2); | background: rgba(0,0,0,0.2); | ||
padding: 15px; | padding: 15px; | ||
border-radius: | border-radius: 4px; | ||
text-align: justify; /* Blocksatz */ | |||
hyphens: auto; | |||
/* | |||
} | } | ||
/* --- LINK FARBEN (Überschreiben Wiki-Standard) --- */ | |||
/* Normale Links | /* Normale Links -> Gold */ | ||
.char-card a, | .char-card a, | ||
.char-card a:visited { | .char-card a:visited, | ||
color: #d4a017 !important; | .char-card a.mw-redirect { | ||
color: #d4a017 !important; | |||
text-decoration: none; | text-decoration: none; | ||
font-weight: bold; | font-weight: bold; | ||
| Zeile 147: | Zeile 146: | ||
} | } | ||
/* Hover- | /* Hover -> Weiß */ | ||
.char-card a:hover { | .char-card a:hover { | ||
color: #ffffff !important; | color: #ffffff !important; | ||
| Zeile 153: | Zeile 152: | ||
} | } | ||
/* | /* Fehlende Seiten (Redlink) -> Helles Rot */ | ||
.char-card a.new, | .char-card a.new, | ||
.char-card a.new:visited { | .char-card a.new:visited { | ||
| Zeile 159: | Zeile 158: | ||
} | } | ||
/* --- MOBILE RESPONSIVE --- */ | |||
/* | @media (max-width: 800px) { | ||
.char-card { | |||
flex-direction: column; | |||
padding: 15px; | |||
} | |||
.cc-left { | |||
flex: auto; | |||
.char-card | width: 100%; | ||
} | |||
.cc-label { | |||
flex: 0 0 110px; | |||
} | font-size: 0.75em; | ||
padding: 8px 10px; | |||
} | |||
} | |||
} | } | ||
Version vom 5. Januar 2026, 14:16 Uhr
/* =================================
CHARACTER PROFILE - STYLE "SHADOW"
================================= */
.char-card {
display: flex;
gap: 20px;
background-color: #1e1e1e; /* Dunkler Hintergrund */
padding: 20px;
border-radius: 4px;
border: 1px solid #333;
color: #ddd;
font-family: 'Segoe UI', Tahoma, sans-serif;
max-width: 1100px;
margin: 1em 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
/* --- LINKE SPALTE (Bild & Name) --- */
.cc-left {
flex: 0 0 350px;
display: flex;
flex-direction: column;
gap: 15px;
}
/* Bild-Container (Rahmenlos) */
.cc-image-box {
border: none;
border-radius: 0; /* Keine runden Ecken */
overflow: hidden;
line-height: 0;
background: #000;
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.cc-image-box img {
width: 100%;
height: auto;
display: block;
}
/* Namens-Schild */
.cc-name-badge {
background: #252525;
border: 1px solid #3a3a3a;
border-radius: 4px;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.cc-name {
font-size: 1.6em;
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
line-height: 1.1;
}
.cc-subtitle {
font-size: 0.9em;
color: #888;
font-style: italic;
border-top: 1px solid #3a3a3a;
padding-top: 8px;
margin-top: 8px;
}
/* --- RECHTE SPALTE (Daten & Text) --- */
.cc-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px; /* Abstand zwischen den Riegeln */
}
/* Daten-Riegel */
.cc-data-row {
display: flex;
align-items: center;
background: #2a2a2a;
border: 1px solid #3a3a3a;
border-radius: 4px;
overflow: hidden;
min-height: 38px;
}
.cc-label {
flex: 0 0 140px; /* Breite der Beschriftung */
background: #333;
color: #aaa;
font-weight: 700;
text-transform: uppercase;
font-size: 0.8em;
padding: 8px 15px;
display: flex;
align-items: center;
border-right: 1px solid #3a3a3a;
letter-spacing: 0.5px;
}
.cc-value {
padding: 8px 15px;
font-weight: 600;
color: #eee;
flex: 1;
font-size: 0.95em;
}
/* Überschriften */
.cc-header {
margin-top: 25px;
margin-bottom: 10px;
font-size: 1.1em;
font-weight: 700;
color: #d4a017; /* Gold */
border-bottom: 1px dashed #444;
padding-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Text-Block (Blocksatz) */
.cc-text {
line-height: 1.6;
color: #ccc;
background: rgba(0,0,0,0.2);
padding: 15px;
border-radius: 4px;
text-align: justify; /* Blocksatz */
hyphens: auto;
}
/* --- LINK FARBEN (Überschreiben Wiki-Standard) --- */
/* Normale Links -> Gold */
.char-card a,
.char-card a:visited,
.char-card a.mw-redirect {
color: #d4a017 !important;
text-decoration: none;
font-weight: bold;
transition: color 0.2s;
}
/* Hover -> Weiß */
.char-card a:hover {
color: #ffffff !important;
text-decoration: underline;
}
/* Fehlende Seiten (Redlink) -> Helles Rot */
.char-card a.new,
.char-card a.new:visited {
color: #ff6b6b !important;
}
/* --- MOBILE RESPONSIVE --- */
@media (max-width: 800px) {
.char-card {
flex-direction: column;
padding: 15px;
}
.cc-left {
flex: auto;
width: 100%;
}
.cc-label {
flex: 0 0 110px;
font-size: 0.75em;
padding: 8px 10px;
}
}