Module
TransportDiagram/styles.css
From Dogcraft Wiki
(Created page with ".transport-diagram { display: flex; flex-direction: column; } .track img { margin: 0; width: 30px; height: 30px; } .diagram-row { display: flex; flex-direction: row;...") |
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%) |
||
(25 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* Transport Diagram styles */ | |||
.transport-diagram { | .transport-diagram { | ||
display: flex; | display: flex; | ||
flex-direction: column; | 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 { | .track img { | ||
margin: 0; | margin: 0; | ||
height: 30px; | |||
width: 30px; | width: 30px; | ||
} | } | ||
Line 13: | 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;
}