MediaWiki:Common.css: Unterschied zwischen den Versionen
Tt (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Tt (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1.701: | Zeile 1.701: | ||
} | } | ||
/* Streckenverlaufsvisualisierung */ | |||
.streckenverlauf-browser { | |||
display: flex; | |||
justify-content: stretch; | |||
margin-bottom: 4em; | |||
} | |||
.streckenverlauf { | |||
align-self: stretch; | |||
} | |||
/* Perlenschnur */ | /* Perlenschnur */ | ||
.perlenschnur { | |||
border-spacing: 0; | |||
display: flex; | |||
height: 100%; | |||
} | |||
.perlenschnur tbody { | |||
display: flex; | |||
flex-direction: column; | |||
height: 100%; | |||
flex-wrap: nowrap; | |||
justify-content: space-around; | |||
} | |||
.perlenschnur tr { | .perlenschnur tr { | ||
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
display: | display: flex; | ||
align-self: stretch; | |||
flex-grow: 1; | |||
flex-shrink: 0; | |||
} | } | ||
.perlenschnur td { | .perlenschnur td { | ||
| Zeile 1.714: | Zeile 1.739: | ||
position: relative; | position: relative; | ||
width: 1em; | width: 1em; | ||
} | } | ||
.perlenschnur .line-item { | .perlenschnur .line-item { | ||
| Zeile 1.721: | Zeile 1.746: | ||
position: absolute; | position: absolute; | ||
left: 0.25em; | left: 0.25em; | ||
top: 0; | top: 0; | ||
height: 100%; | |||
} | } | ||
table.perlenschnur tr:first-child td:first-child .line-item { | table.perlenschnur tr:first-child td:first-child .line-item { | ||
top: 1em; | top: 1em; | ||
bottom: 0; | bottom: 0; | ||
| Zeile 1.744: | Zeile 1.768: | ||
z-index: 99; | z-index: 99; | ||
position: absolute; | position: absolute; | ||
top: 0. | top: 0.4em; | ||
left:0.05em; | |||
} | } | ||
.perlenschnur tr td:last-child { | .perlenschnur tr td:last-child { | ||
| Zeile 1.785: | Zeile 1.810: | ||
table.table-zielfilm-ziel a:hover { | table.table-zielfilm-ziel a:hover { | ||
text-decoration:none; | text-decoration:none; | ||
} | |||
@media only screen and (max-width: 480px) { | |||
.streckenverlauf { | |||
width: 100%; | |||
} | |||
.streckenverlauf-browser { | |||
width: 100%; | |||
overflow-x: scroll; | |||
-webkit-overflow-scrolling: touch; | |||
} | |||
} | |||
.kennzeichen { | |||
--kennzeichen-height: 110px; | |||
--kennzeichen-width: 520px; | |||
--balken-width: 60px; | |||
position: relative; | |||
display: inline-block; | |||
height: var(--kennzeichen-height); | |||
width: var(--kennzeichen-width); | |||
background: white; | |||
border: 2px solid black; | |||
border-radius: 8px; | |||
font-family: Arial, sans-serif; | |||
font-weight: 700; | |||
font-size: 60px; | |||
color: black; | |||
line-height: var(--kennzeichen-height); | |||
padding-left: calc(var(--balken-width) + 12px); | |||
user-select: none; | |||
box-sizing: border-box; | |||
white-space: nowrap; | |||
text-align: center; | |||
} | |||
/* Blauer Balken links mit D */ | |||
.kennzeichen::before { | |||
content: "D"; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: var(--balken-width); | |||
height: 100%; | |||
background: #003399; | |||
color: white; | |||
font-weight: 700; | |||
font-size: 48px; | |||
line-height: var(--kennzeichen-height); | |||
text-align: center; | |||
border-top-left-radius: 6px; | |||
border-bottom-left-radius: 6px; | |||
user-select: none; | |||
font-family: Arial, sans-serif; | |||
letter-spacing: 1px; | |||
} | } | ||