Module
TransportDiagram/styles.css
From Dogcraft Wiki
(increase width for up to 4 tracks) |
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%) Β |
||
(4 intermediate revisions by 2 users not shown) | |||
Line 28: | Line 28: | ||
align-items: center; | align-items: center; | ||
flex-direction: row; | flex-direction: row; | ||
width: | min-width: 30px; | ||
margin-left: 5px; | margin-left: 5px; | ||
margin-right: 5px; | margin-right: 5px; | ||
Line 36: | Line 36: | ||
margin: 0; | margin: 0; | ||
height: 30px; | height: 30px; | ||
width: 30px; | |||
} | } | ||
Line 48: | Line 49: | ||
align-items: center; | align-items: center; | ||
white-space: nowrap; | white-space: nowrap; | ||
width: | width: 34%; | ||
overflow: hidden; | |||
flex-grow: 1; | |||
} | } | ||
Line 58: | Line 61: | ||
.station-right { | .station-right { | ||
text-align: left; | text-align: left; | ||
} | |||
.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;
}