Module
TransportDiagram/styles.css
From Dogcraft Wiki
No edit summary |
m (.station { +flex-grow: 1; } โโexpand station text lines as far as it will allow for maximum text visibility, while keeping structure intact and preserving basis of 34%) ย |
||
(13 intermediate revisions by 2 users not shown) | |||
Line 9: | Line 9: | ||
float: right; | float: right; | ||
ย ย ย clear: right; | ย ย ย clear: right; | ||
ย ย ย width: | ย ย ย width: 27.5em; | ||
font-size: 88%; | font-size: 88%; | ||
line-height: 1.5em; | line-height: 1.5em; | ||
Line 21: | Line 21: | ||
text-align: center; | text-align: center; | ||
font-weight: bold; | font-weight: bold; | ||
} | |||
.track-container { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
flex-direction: row; | |||
min-width: 30px; | |||
margin-left: 5px; | |||
margin-right: 5px; | |||
} | } | ||
.track img { | .track img { | ||
margin: 0; | margin: 0; | ||
height: 30px; | |||
width: 30px; | width: 30px; | ||
} | } | ||
Line 36: | Line 46: | ||
.station { | .station { | ||
display: flex; | |||
align-items: center; | |||
white-space: nowrap; | white-space: nowrap; | ||
width: 34%; | |||
overflow: hidden; | |||
flex-grow: 1; | |||
} | } | ||
.station-left { | .station-left { | ||
align-content: flex- | text-align: right; | ||
ย ย justify-content: flex-end; | |||
} | } | ||
.station-right { | .station-right { | ||
align | text-align: left; | ||
} | |||
text- | ย | ||
.station > * { | |||
overflow:hidden; ย | |||
text-overflow:ellipsis; ย | |||
} | } |
Latest revision as of 12:58, 5 October 2022
/* Transport Diagram styles */
.transport-diagram {
display: flex;
flex-direction: column;
border: 1px solid #aaa;
border-radius: 10px;
background-color: #E9EDEF;
float: right;
clear: right;
width: 27.5em;
font-size: 88%;
line-height: 1.5em;
padding: 0.5em;
}
.transport-diagram-title {
font-size: 1.5em;
margin-bottom: 0.4em;
justify-content: center;
text-align: center;
font-weight: bold;
}
.track-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
min-width: 30px;
margin-left: 5px;
margin-right: 5px;
}
.track img {
margin: 0;
height: 30px;
width: 30px;
}
.diagram-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.station {
display: flex;
align-items: center;
white-space: nowrap;
width: 34%;
overflow: hidden;
flex-grow: 1;
}
.station-left {
text-align: right;
justify-content: flex-end;
}
.station-right {
text-align: left;
}
.station > * {
overflow:hidden;
text-overflow:ellipsis;
}