|
|
| Zeile 1: |
Zeile 1: |
| /* ================================= | | /* ================================= |
| CHARACTER PROFILE - STYLE "KAGEROU" | | LINK-FARBEN FÜR CHARACTER CARD |
| ================================= */ | | ================================= */ |
|
| |
|
| .char-card { | | /* Normale Links (Gold statt Blau) */ |
| display: flex;
| | .char-card a, |
| gap: 20px; | | .char-card a:visited { |
| background-color: #1e1e1e; /* Dunkler Hintergrund Container */
| | color: #d4a017 !important; /* Gold */ |
| padding: 20px; | | text-decoration: none; |
| border-radius: 15px;
| | font-weight: bold; |
| border: 1px solid #333;
| | transition: color 0.2s; |
| color: #ddd;
| |
| font-family: 'Segoe UI', sans-serif; | |
| max-width: 1100px; | |
| margin: 1em 0;
| |
| } | | } |
|
| |
|
| /* --- LINKE SPALTE (Bild & Name) --- */ | | /* Hover-Effekt (Weiß) */ |
| .cc-left { | | .char-card a:hover { |
| flex: 0 0 350px; /* Feste Breite für die linke Spalte */ | | color: #ffffff !important; |
| display: flex;
| | text-decoration: underline; |
| flex-direction: column; | |
| gap: 15px;
| |
| } | | } |
|
| |
|
| .cc-image-box {
| | /* Links zu nicht existierenden Seiten (Helles Rot statt Dunkelrot) */ |
| background: #111;
| | .char-card a.new, |
| border: 5px solid #2a2a2a; /* Dicker Rahmen wie im Bild */
| | .char-card a.new:visited { |
| border-radius: 12px;
| | color: #ff6b6b !important; |
| 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; }
| |
| } | | } |
/* =================================
LINK-FARBEN FÜR CHARACTER CARD
================================= */
/* 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;
}