Template:ArtBox/style.css: Difference between revisions
Appearance
Content deleted Content added
No edit summary Tag: Reverted |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* |
/* Haupt-Container */ |
||
.wt-artbox-wrapper { |
.wt-artbox-wrapper { |
||
margin: 1em 0; |
margin: 1em 0; |
||
} |
} |
||
/* Header- |
/* Header-Bereich mit Flexbox */ |
||
.wt-artbox-header { |
.wt-artbox-header { |
||
display: flex; |
display: flex; |
||
| ⚫ | |||
} |
} |
||
/* Gemeinsame Basis für Header-Elemente */ |
/* Gemeinsame Basis für die Header-Elemente */ |
||
.wt-artbox-header div { |
.wt-artbox-header div { |
||
border: 0 solid var(--border-color-muted, #dadde3); |
border: 0 solid var(--border-color-muted, #dadde3); |
||
} |
} |
||
/* |
/* Der Titel-Bereich (jetzt in Icon und Text unterteilt) */ |
||
.wt-artbox- |
.wt-artbox-header .wt-artbox-title { |
||
display: flex; |
|||
| ⚫ | |||
gap: 0.6em; /* Abstand zwischen Icon und Text */ |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
background-color: transparent; /* Optional: Hintergrundfarbe hier ergänzen */ |
|||
} |
|||
/* Spezifische Klassen für Icon und Text innerhalb des Titels */ |
|||
.wt-artbox-icon { |
|||
display: flex; |
display: flex; |
||
align-items: center; |
align-items: center; |
||
justify-content: center; |
justify-content: center; |
||
flex-shrink: 0; |
|||
border-width: 1px 0 0 1px !important; /* Oben und Links */ |
|||
| ⚫ | |||
background-color: var(--bg-muted, #f8f9fa); |
|||
} |
} |
||
.wt-artbox-text { |
|||
/* 2. Titel-Bereich */ |
|||
white-space: nowrap; |
|||
.wt-artbox-header .wt-artbox-title { |
|||
| ⚫ | |||
| ⚫ | |||
| ⚫ | |||
border-top-right-radius: 0.5em; |
|||
/* Falls das Icon direkt davor steht, linken Rahmen entfernen um Doppelung zu vermeiden: */ |
|||
margin-left: -1px; |
|||
} |
} |
||
/* |
/* Die Linie, die den restlichen Header auffüllt */ |
||
.wt-artbox-header .wt-artbox-fill { |
.wt-artbox-header .wt-artbox-fill { |
||
border |
border-width: 0 0 1px 0; |
||
flex: 2; |
flex: 2; |
||
} |
} |
||
/* Der Inhaltsbereich ( |
/* Der Inhaltsbereich (Pre-Tag / Code-Block) */ |
||
.wt-artbox-wrapper pre { |
.wt-artbox-wrapper pre { |
||
font-family: "Source Code Pro", Menlo, Consolas, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; |
font-family: "Source Code Pro", Menlo, Consolas, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; |
||
margin: 0; |
margin: 0; |
||
padding: 1em; |
padding: 1em; |
||
border: 1px solid var(--border-color-muted, #dadde3); |
border: 1px solid var(--border-color-muted, #dadde3); |
||
border-top: none; /* Schließt nahtlos an den Header an */ |
|||
} |
} |
||
/* Entfernt den doppelten Rahmen oben beim Inhaltsblock */ |
|||
/* Korrektur für MediaWiki-Highlighting-Klassen */ |
|||
.wt-artbox-header + .mw-highlight pre, |
.wt-artbox-header + .mw-highlight pre, |
||
.wt-artbox-header + |
.wt-artbox-header + pre { |
||
border-top: none; |
border-top: none; |
||
} |
} |
||
/* Verhindert Abstände zwischen Header und Content-Box */ |
|||
.wt-artbox-wrapper div.mw-highlight, |
.wt-artbox-wrapper div.mw-highlight, |
||
.wt-artbox-header + div.mw-highlight { |
.wt-artbox-header + div.mw-highlight { |
||