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%) |
||
(20 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 16: | Line 16: | ||
.transport-diagram-title { | .transport-diagram-title { | ||
font-size: | font-size: 1.5em; | ||
margin-bottom: 0.4em; | |||
justify-content: center; | justify-content: center; | ||
text-align: 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 { | .track img { | ||
margin: 0; | margin: 0; | ||
height: 30px; | |||
width: 30px; | width: 30px; | ||
} | } | ||
Line 30: | Line 42: | ||
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
justify-content: space- | 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; | |||
} | } |
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;
}