Template:Hlist/styles.css: Difference between revisions
Template page
More actions
Create Template:Hlist/styles.css |
m Use inline-flex instead of flex so Hlist flows inline after preceding text (e.g. a bold rank label) instead of always starting a new line |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* flex + flex-wrap, not display:inline — confirmed live that plain | |||
inline <li>s with no whitespace text node between them (the dot's | |||
spacing comes from CSS margin now, not a literal space — see | |||
_gen_hlist.py) never got a line-break opportunity between items at | |||
all, so a long list just overflowed its cell/table width instead of | |||
wrapping (this was the direct cause of a table needing horizontal | |||
scroll to show a 6-name row). Flex items wrap regardless of markup | |||
whitespace, so this fixes it without bringing the space-collapsing | |||
problem back. | |||
inline-flex, not flex — a block-level flex container always | |||
starts on its own line, which forced the list onto a new row when | |||
used right after other inline text (e.g. a bold "Slicer:" label on | |||
Promotions). inline-flex keeps the same wrapping behaviour for the | |||
items inside while letting the list itself flow inline. */ | |||
.loka-hlist { | .loka-hlist { | ||
list-style: none; | list-style: none; | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
display: inline; | display: inline-flex; | ||
flex-wrap: wrap; | |||
} | } | ||
.loka-hlist | .loka-hlist-sep { | ||
margin: 0 .3em; | |||
} | } | ||
/* | /* Hides the separator dot (and its margins) on whichever item ends up | ||
.loka-hlist li: | first (the dot itself lives in the template's own HTML output, not | ||
here — see the comment in _gen_hlist.py for why). */ | |||
.loka-hlist li:first-child .loka-hlist-sep { | |||
display: none; | |||
} | } | ||
.loka-hlist--stacked { | .loka-hlist--stacked { | ||
flex-direction: column; | |||
} | } | ||
.loka-hlist--stacked | .loka-hlist--stacked .loka-hlist-sep { | ||
display: none; | |||
.loka-hlist- | |||
} | } | ||
Latest revision as of 00:13, 24 August 2026
/* flex + flex-wrap, not display:inline — confirmed live that plain
inline <li>s with no whitespace text node between them (the dot's
spacing comes from CSS margin now, not a literal space — see
_gen_hlist.py) never got a line-break opportunity between items at
all, so a long list just overflowed its cell/table width instead of
wrapping (this was the direct cause of a table needing horizontal
scroll to show a 6-name row). Flex items wrap regardless of markup
whitespace, so this fixes it without bringing the space-collapsing
problem back.
inline-flex, not flex — a block-level flex container always
starts on its own line, which forced the list onto a new row when
used right after other inline text (e.g. a bold "Slicer:" label on
Promotions). inline-flex keeps the same wrapping behaviour for the
items inside while letting the list itself flow inline. */
.loka-hlist {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
}
.loka-hlist-sep {
margin: 0 .3em;
}
/* Hides the separator dot (and its margins) on whichever item ends up
first (the dot itself lives in the template's own HTML output, not
here — see the comment in _gen_hlist.py for why). */
.loka-hlist li:first-child .loka-hlist-sep {
display: none;
}
.loka-hlist--stacked {
flex-direction: column;
}
.loka-hlist--stacked .loka-hlist-sep {
display: none;
}