<vb:comment>
Default list forum layout for activity stream's forum tab, & channel page's subchannels list.
</vb:comment>
.forum-list-container {
border-collapse: separate;
margin-bottom:0;
--channel-icon-margin: 8px;
--channel-icon-size: {vb:stylevar forum_icon_size, withUnits};
<vb:comment>Channel title & desc, & subchannel block are all aligned with the channel title, which is icon + 8px margin.</vb:comment>
--margin-channel-icon: calc(var(--channel-icon-size) + var(--channel-icon-margin));
<vb:comment>
We want to maintain the "row" containers, so that we can use the same markup for
both "classic" (table) and flex/grid layouts. Thankfully, subgrid now allows us
to use css grid with row containers.
CSS grid & subgrid: https://stackoverflow.com/a/63018503
</vb:comment>
display: grid;
<vb:comment>
each row has:
* cell-forum width: 50% (forum icon, title, description)
* topics-count width: 4%
* posts-count width: 4%
* lastpost width: 42%
but the table layout seemed to allow the "count" columns to expand...
Note that the minmax(0, ...) is critical for preventing grid elements
from blowing out the container (see preventing grid blowout link below).
In particular, this magically fixes a very long post title from causing
the right column to be overly selfish.
</vb:comment>
grid-template-columns: minmax(0, 50fr) auto auto minmax(0, 42fr);
column-gap: 16px;
}
.forum-list-container > div {
<vb:comment>
continued from above, inherit as subgrid so that each "row" will use the same grid and line
everything up like the classic table style did.
</vb:comment>
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
.forum-list-container > .subforum-list > div,
.forum-list-container > .category-header .category-header-cell-wrapper,
.forum-list-container > .category-footer > div {
<vb:comment>
subforum-lists only has 1 colspan=4 cell instead of the standard 4 cells, so we have
to tell the grid otherwise it tries to blow up the width of the first column.
Note that the single colspan=4 cell contains various items like the "Sub-Forums:" label,
and a div containing the list of sub-channels.
</vb:comment>
grid-column: span 4;
}
.forum-list-container .subforum-list-grid-container {
display: grid;
<vb:comment>
replicate hard-coded subChannelsPerRow = 3
Note, the minmax(0,...) is needed to avoid longer channel titles
from pushing the items outside of the container width.
Reference: https://css-tricks.com/preventing-a-grid-blowout/
</vb:comment>
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.subforum-list-grid-container .subforum-title {
<vb:comment>
Let's break longer subchannel titles so they don't overlap each other or
fall out of the container.
Note, break-word here doesn't seem to work properly in the flex container
here, similar to the channel-description case. "anywhere" correctly breaks
long strings -- probably has to do with the different min-content calculations
between the two.
</vb:comment>
overflow-wrap: anywhere;
}
.forum-list-container .forum-list-header {
background: {vb:stylevar toolbar_background};
border: {vb:stylevar toolbar_border};
color:{vb:stylevar toolbar_text_color};
font: {vb:stylevar forum_list_header_font};
<vb:comment>left/right hardcoded because they have the same value</vb:comment>
border-left-width: 0;
border-right-width: 0;
}
.subchannel-widget .forum-list-container {
border:{vb:stylevar post_border};
border-width:1px 0 0;
}
.forum-list-container .forum-list-header .header-forum span {
margin: 0 var(--widget-h-padding);
}
.forum-list-container .forum-list-header .header-forum {
border-{vb:stylevar left}:{vb:stylevar toolbar_border};
}
.forum-list-container .forum-list-header .header-lastpost {
border-{vb:stylevar right}:{vb:stylevar toolbar_border};
}
#forum-tab .forum-list-container .forum-list-header > * {
border-top: {vb:stylevar toolbar_border};
padding-top: var(--category-header-v-padding);
padding-bottom: var(--category-header-v-padding);
}
.forum-list-container .forum-list-header .header-forum,
.forum-list-container .forum-item .cell-forum {
text-align:{vb:stylevar left};
}
.subchannel-widget .forum-list-container .forum-list-header > *,
.subchannel-widget .forum-list-container .forum-item > * {
<vb:comment>
todo: These should probably be standard 8x size instead of 10px
</vb:comment>
padding-top: 10px;
padding-bottom: 10px;
}
.forum-list-container .forum-list-header .header-topics,
.forum-list-container .forum-list-header .header-posts,
.forum-list-container .forum-item .topics-count,
.forum-list-container .forum-item .posts-count {
text-align:center;
}
.forum-list-container .forum-list-header .header-lastpost,
.forum-list-container .forum-item .lastpost {
text-align:{vb:stylevar left};
}
<vb:comment>
category headers & footers
</vb:comment>
.forum-list-container .category-header,
.forum-list-container .category-footer {
background: {vb:stylevar primary_module_subheader_background};
}
.forum-list-container .category-footer > div {
padding: 0;
height: var(--padding-m);
}
.forum-list-container .category-header--empty {
display: none;
}
.forum-list-container .category-header,
.forum-list-container .category-footer.category-collapsed,
.forum-list-container.no-collapse-controls .category-footer {
<vb:comment>
Matching "#forum-tab .forum-list-container .forum-list-header th". vertical padding
</vb:comment>
padding:var(--category-header-v-padding) var(--widget-h-padding);
border-top: {vb:stylevar primary_module_subheader_border};
}
.forum-list-container .forum-list-header + .category-header > div {
border-top: none;
}
<vb:comment>
We don't want the default link color/font for the category headers in list view.
In cards view we DO want them, since we render the categories as cards and want to match
the regular forum card styling, so negate .cards .
</vb:comment>
.forum-list-container:not(.cards) .category-header .category {
font: {vb:stylevar forum_list_category_font};
float:{vb:stylevar left};
color:{vb:stylevar primary_module_subheader_text_color};
}
.forum-list-container .category-header .category-header-cell-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
<vb:comment>
If search channel depth is 1, we're never going to show sub-channels so channel collapse is
useless, and the interstitial "no forums found" is meaningless. Hide the control & the edge case
message.
</vb:comment>
.forum-list-container.no-collapse-controls .category-collapse-button,
.forum-list-container.no-collapse-controls .forum-item--no-forums {
display: none;
}
.forum-list-container .forum-item {
border-top:1px solid {vb:stylevar global_palette_fill_02.color};
padding: var(--widget-v-padding) var(--widget-h-padding);
}
.forum-list-container .forum-item > .lastpost {
<vb:comment>
in desktop-widths, make sure the right side of this entire row has the same horizontal padding as the left side.
".lastpost" info block is the last column in wider viewport widths.
</vb:comment>
padding-{vb:stylevar right}: var(--widget-h-padding);
}
<vb:comment>
no double border for first item in table layout
</vb:comment>
.forum-list-container:not(.cards) .category-header:not(.category-header--empty) + .forum-item,
.forum-list-container:not(.cards) .forum-list-header + .category-header + .forum-item,
.subchannel-widget .forum-list-container:not(.cards) .forum-list-header + .forum-item
{
border-top:0;
}
.subchannel-widget .forum-list-container .forum-item {
border-top:{vb:stylevar post_border};
}
.forum-list-container .forum-item .cell-forum .icon {
vertical-align: middle;
margin: 0px;
margin-{vb:stylevar right}:8px;
width: var(--channel-icon-size);
}
.forum-list-container .forum-item.subforum-item .cell-forum .icon {
margin-{vb:stylevar right}: var(--channel-icon-margin);
}
.forum-list-container .forum-title {
font: {vb:stylevar forum_list_forum_font};
padding-bottom: 8px;
<vb:comment>
prevent overly long channel titles from breaking out of column.
</vb:comment>
overflow-wrap: break-word;
}
<vb:comment>align items to channel title. Keep in sync with
.forum-list-container .subforum-list > * padding. </vb:comment>
.forum-list-container .forum-title,
.forum-list-container .forum-desc {
margin-{vb:stylevar left}: var(--margin-channel-icon);
<vb:comment>
force long unbroken channel titles & (especially) descriptions
to wrap, otherwise the grid item will be too wide and force the
grid container to break out of the widget.
Note that break-word doesn't seem to actually properly break
words (e.g. a long URL in a description) vs anywhere.
It's probably due to something about the break-word's min-content
calculations being different from anywhere.
</vb:comment>
overflow-wrap: anywhere;
}
.forum-list-container .forum-item .cell-forum .viewer {
color: {vb:stylevar content_list_secondary_text_color};
}
.forum-list-container .forum-item .cell-forum > .forum-wrapper
{
<vb:comment>/*put the rss feed icon (if any) on the same row*/</vb:comment>
display: grid;
grid-template-columns: 1fr max-content;
}
.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .lastpost-info,
.forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
padding-{vb:stylevar left}:0;
}
<vb:comment>/* Allow room on the right for RSS icon VBV-12285 */</vb:comment>
<vb:comment>
replaced with column-gap after display: table & display: table-cell were removed.
The 12px gap was eyeballed from previous logic below, which doesn't make a whole lot more sense...
Kept here for now in case we want to revert some spacing logic.
.forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info.forum-info-has-rss {
padding-{vb:stylevar right}: calc(15px + var(--channel-icon-size));
}
.l-small .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info.forum-info-has-rss {
/* RSS icon is removed at smaller screen sizes using .h-hide-on-small, so remove the unneeded padding in that case VBV-14296 */
padding-{vb:stylevar right}: 0;
}
</vb:comment>
.forum-list-container .forum-item .cell-forum > .forum-wrapper.forum-has-rss {
column-gap: 12px;
}
.l-small .forum-list-container .forum-item .cell-forum > .forum-wrapper.forum-has-rss {
<vb:comment>/* RSS icon is removed at smaller screen sizes using .h-hide-on-small, so remove the unneeded gap in that case */</vb:comment>
column-gap: 0;
}
.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .avatar + .lastpost-info {
<vb:comment>--avatar-size 24px + 4px margin, keep in sync with .avatar</vb:comment>
padding-{vb:stylevar left}: 28px;
}
.forum-list-container .lastpost-info .lastpost-title-wrapper {
display: block;
}
.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .lastpost-info .lastpost-title {
width:100%;
font-weight: 700;
<vb:comment>
This is mainly for responsive, because on desktop this gets ellipsis'ed.
Break overly long titles, otherwise they'll break out of the container.
</vb:comment>
overflow-wrap: break-word;
}
.forum-list-container:not(.cards) .forum-item .cell-forum > .forum-wrapper > .forum-info > .forum-title {
<vb:comment>
The .forum-title has a left-floated span.icon next to it. display: block & inline will both
make the title align top & in the same "row" as the icon, but display:inline-block will put
the title below the icon.
</vb:comment>
display: block;
<vb:comment>Remove margin (for icon) from width, otherwise mobile has an unwanted x-overflow.</vb:comment>
width: calc(100% - var(--margin-channel-icon));
}
.forum-list-container .forum-item,
.forum-list-container .subforum-list,
.blogmember-list .list-container .list-item,
.sg-groups-list .sg-groups-list-container .list-item {
background: {vb:stylevar content_list_background};
color: {vb:stylevar content_list_text_color};
}
<vb:comment>Extra selectors for specificity</vb:comment>
.widget-content .forum-list-container .forum-item a,
.widget-content .forum-list-container .forum-item a:active,
.widget-content .forum-list-container .forum-item a:visited,
.widget-content .forum-list-container .subforum-list a,
.widget-content .forum-list-container .subforum-list a:active,
.widget-content .forum-list-container .subforum-list a:visited,
.widget-content .blogmember-list .list-container .list-item a,
.widget-content .blogmember-list .list-container .list-item a:active,
.widget-content .blogmember-list .list-container .list-item a:visited,
.widget-content .sg-groups-list .sg-groups-list-container .list-item a,
.widget-content .sg-groups-list .sg-groups-list-container .list-item a:active,
.widget-content .sg-groups-list .sg-groups-list-container .list-item a:visited {
color: {vb:stylevar content_list_link_color};
text-decoration: {vb:stylevar content_list_link_decoration};
}
.widget-content .forum-list-container .forum-item a:hover,
.widget-content .forum-list-container .subforum-list a:hover,
.widget-content .blogmember-list .list-container .list-item a:hover,
.widget-content .sg-groups-list .sg-groups-list-container .list-item a:hover {
color: {vb:stylevar content_list_link_color_hover};
text-decoration: {vb:stylevar content_list_link_decoration_hover};
}
<vb:comment>
TODO: should we add .conversation-list.stream-view .list-item .post-date to this list?
This would affect activity stream including widgets like the bloghome.
On one hand, doing so would make the activity stream's timestamps consistent with the
forum displays.
However, on the bloghome for example, we also display "Subscribed" & "Joined" fields under
the timestamp, so just having the timestamp color be different would look a bit weird.
For now, leaving it out but something to consider.
</vb:comment>
.forum-list-container .forum-item .post-date,
.forum-list-container .subforum-list .post-date,
.blogmember-list .list-container .post-date,
.sg-groups-list .sg-groups-list-container .post-date {
color: {vb:stylevar content_list_secondary_text_color};
}
.forum-list-container .subforum-list table {
margin-bottom:0;
<vb:comment>Table layout fixed and width keep the subforum table from exanding wider than the containing div. See VBV-14743.</vb:comment>
table-layout: fixed;
width: 100%;
}
.forum-list-container .subforum-list > * {
padding-top:0;
padding-{vb:stylevar right}: 16px;
<vb:comment>Align with main channel title & description.
<.forum-list-container .forum-item td:first-child padding-left> +
<.forum-title | .forum-desc margin-left> </vb:comment>
padding-{vb:stylevar left}: calc(16px + var(--margin-channel-icon));
padding-bottom:16px;
}
.forum-list-container .subforum-list .subforum-header {
font-weight: bold;
/*margin-bottom: 10px;
margin-top: -6px;*/
}
.forum-list-container .subforum-list .subforum-item {
padding-{vb:stylevar right}:40px;
vertical-align: top;
padding-top: 4px;
padding-bottom: 4px;
}
.forum-list-container .subforum-list .subforum-item:last-child {
padding-{vb:stylevar right}: 0;
}
.forum-list-container .subforum-list .subforum-item .icon,
.forum-list-container .forum-item.sub .cell-forum .icon {
margin-{vb:stylevar right}: 8px;
}
.forum-list-container .subforum-list .subforum-item .subforum-info {
float:{vb:stylevar left};
<vb:comment>for aligning icon with title. Also handles RTL.</vb:comment>
display: flex;
align-items: center;
}
.forum-list-container .icon.unread {
<vb:comment>-webkit-text-fill-color: {vb:stylevar icon_color_blue_04.color};</vb:comment>
<vb:comment>-webkit-text-fill-color: {vb:stylevar global_palette_accent_02.color};</vb:comment>
-webkit-text-fill-color: {vb:stylevar global_palette_accent_02.color};
}
.forum-list-container .icon.read {
-webkit-text-fill-color: {vb:stylevar icon_color_gray_06.color};
}
.subforum-item .counts
{
margin-{vb:stylevar left}: 4px;
}
<vb:comment>
/* Show Channels as Cards */
</vb:comment>
.cards {
--card-min-width: 300px;
}
.cards.forum-list-container {
<vb:comment>
https://stackoverflow.com/a/44158826
Using grid instead of flex to deal with "don't blow up items in last row" issue.
Set up the grid-template-columns with auto-fit to tile the cards as best as it can.
Note that if we don't auto-fit, it'll likely end up expanding each card to take up
the whole row.
Edit: minmax()'s max set to max-content instead of 1fr, because if there's only 1 forum
(e.g. looking inside a channel with a single subforum), that stretches all the way and
doesn't look great.
</vb:comment>
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), max-content));
<vb:comment>
ensure all cards are same height (tallest grid-item's height)
https://stackoverflow.com/a/44490047
</vb:comment>
grid-auto-rows: 1fr;
--between-cards: 32px;
grid-gap: var(--between-cards);
<vb:comment>
appy the gutter to the outside as well, and set box-sizing to border-box so the container doesn't
spill out of the parent div#forum-tab
</vb:comment>
padding: var(--between-cards);
box-sizing: border-box;
}
<vb:comment>
/* Set up each foruminfo cards */
</vb:comment>
.cards.forum-list-container > div.forum-item,
.cards.forum-list-container > div.subforum-list ,
.cards.forum-list-container .subforum-list-grid-container,
.cards .category-header--show-card {
display: grid;
<vb:comment>
We want the card to have padding for the internal content, but
we also want the background image (if chosen) to stretch all the way across.
This is trivial if we're applying a "background-image" to the container, but
much more difficult if the background image is a child element (because we
currently don't have a way to dynamically generate CSS for the different
channel icons...).
We can either use negative margins & adding those padding/margin amounts to
the width/height of the background-image-element, or we can fake the paddings
with actual grid tracks. Note however, that now that padding is an actual
grid track, we don't want to double up whitespace at the edges with padding +
row/col-gaps, so we then have to convert the gaps/gutters into tracks as well.
It's actually not that difficult or complex, but just makes some of the
template-column/row rules quite bit lengthier, since we're specifying "padding"
tracks & gap/gutter tracks explicitly.
</vb:comment>
grid-template-areas:
". . . . . . ."
". channelinfo channelinfo channelinfo channelinfo channelinfo ."
". . . . . . ."
". topics . posts . lastpost ."
". . . . . . .";
<vb:comment>
Undo the subgrid rules, and also set up the 4 columns above with minmax(0, 1fr).
Similar to previous rules, that min of 0 is crucial to prevent grid items from
overflowing this grid container.
Edit: in addition to above, we're now specifying the outer padding tracks and the
inner gap/gutter tracks ("." areas). The vars below are meant to try to make the
rule a tiny bit more readable/manageable.
</vb:comment>
--gap-col: 32px;
--gap-row: 16px;
--pad-h: var(--widget-h-padding);
--pad-v: var(--widget-v-padding);
--c-topics: minmax(0, 1fr);
--c-posts: minmax(0, 1fr);
--c-lastpost: 1fr;
grid-template-columns:
var(--pad-h) var(--c-topics) var(--gap-col) var(--c-posts) var(--gap-col) var(--c-lastpost) var(--pad-h);
<vb:comment>
Undo the subgrid 1 / -1, otherwise each card will try to take up the whole track
</vb:comment>
grid-column: auto;
<vb:comment>
Minimize wasted whitespace for the bottom track via "min-content". This looks a bit better IMO.
</vb:comment>
grid-template-rows: var(--pad-v) 1fr var(--gap-row) min-content var(--pad-v);
align-items: end;
--card-border: 1px solid {vb:stylevar global_palette_fill_02.color};
border: var(--card-border);
<vb:comment>
Note that the actual padding is now faked by the grid tracks to make the background icon
stretch nicely, see above.
The background icons are in a child div instead of css background-image because we don't
want to inline-style the css for each channel with an icon, nor do we have a way to generate
dynamic css sheet only the fly each time a channel icon is modified to account for the
unknown custom channel icons.
</vb:comment>
padding: 0;
}
.cards.forum-list-container div.forum-list-header,
<vb:comment>
For now, hiding category headers/footers & subforums.
It's not clear how subforums should be represented.
Category headers & footers need to NOT be rendered as cards, and we can *almost*
fix it with explicit tracks via grid-template-rows & grid-aut-rows, except we don't know
how many categories we have nor their positions, so that makes it difficult without some
way of "naming" a track (not lines) similar to how grid-areas can be named... there might
be a way but I've not found it yet, so for now hiding them too.
Edit:
Show .category-header--show-card since there's no way to go into them to view their
contents otherwise, because they don't have subchannels that can be shown instead
(either due to search depth OR the actual channel structure).
</vb:comment>
.cards.forum-list-container div.category-header:not(.category-header--show-card),
.cards.forum-list-container div.category-footer,
.cards.forum-list-container div.subforum-list {
display: none;
}
<vb:comment>
Style the category cards that we do show similar to the regular forum cards.
</vb:comment>
.cards .category-header--show-card .category-header-cell-wrapper {
display: block;
}
.cards .category-header--show-card .category {
font: {vb:stylevar forum_card_title_font};
}
.cards .category-header--show-card .category-desc {
font: {vb:stylevar forum_card_desc_font};
}
<vb:comment>
We're currently not using the category collapse feature (disabled in JS) regardless of wheter
we're showing categories as cards or not, so hide the button in cards view.
</vb:comment>
.cards .category-collapse-button {
display: none;
}
<vb:comment>
Claim the grid-template-areas abcd above
</vb:comment>
.cards.forum-list-container > div.forum-item .cell-forum,
.cards .category-header--show-card .category-header-cell-wrapper {
grid-area: channelinfo;
<vb:comment>
The grid template rules above ensure that cards with varying channel title &
channel desc lengths are all the same dimensions.
We prefer the align-items: end (i.e. bottom) for the bottom track, but we should vertically
line-up the channel icon/title with the top of the card so that different cards
are more consistent. Otherwise, some cards (with the longest titles/descs) will
have the icon/title flush with the top while others will be floating in the center.
</vb:comment>
align-self: start;
}
.cards.forum-list-container > div.forum-item .topics-count {
grid-area: topics;
}
.cards.forum-list-container > div.forum-item .posts-count {
grid-area: posts;
}
.cards.forum-list-container > div.forum-item .lastpost {
grid-area: lastpost;
}
.show-on-cards,
.cards .hide-on-cards,
.cards.forum-list-container > div.forum-item.hide-on-cards {
<vb:comment>unfortunately, important needed to override some higher specificity rules</vb:comment>
display: none;
}
.cards .show-on-cards {
display: flex;
}
.cards .topics-count,
.cards .posts-count,
.cards .lastpost-date {
display: flex;
flex-direction: column;
align-items: flex-start;
<vb:comment>
We currently have the topics count & posts counts at 1fr, which means they'll stay consistent between cards even
when each card might show different 3 of digits for these fields.
This can cause some problems (over using max-content) however when the digits get longer than 6 digits, so let's
have this wrap. Note that break-word doesn't properly break in these grid contexts...
</vb:comment>
overflow-wrap: anywhere;
}
.cards.forum-list-container .forum-title {
font: {vb:stylevar forum_card_title_font};
}
.cards .topics-count .count,
.cards .posts-count .count {
<vb:comment>
Match the font-size & font-weight amongst forum-title, topic count & post count
in card view.
</vb:comment>
font: {vb:stylevar forum_card_stats_number_font};
}
.cards .forum-info .forum-desc {
font: {vb:stylevar forum_card_desc_font};
}
.cards .topics-count .topics-label,
.cards .posts-count .posts-label,
.cards .lastpost-date {
font: {vb:stylevar forum_card_stats_label_font};
}
<vb:comment>
Remove the left-margin on the title & desc meant to line them up after the icon in the list view (in the future
this won't be needed once we switch the forum-item in list view to use grid instead of these spacings, currently
impeded by subforum list).
Also remove the padding between title & desc. We can add it back if we want later, but atm doesn't seem warranted.
</vb:comment>
.cards.forum-list-container .forum-title,
.cards.forum-list-container .forum-desc {
margin: 0;
padding: 0;
}
<vb:comment>
Make the lastpost link slightly smaller size to make it visually distinct in the last track.
</vb:comment>
.cards .lastpost .lastpost-title {
font: {vb:stylevar forum_card_lastpost_font};
}
<vb:comment>
override a non-card selector...
for now minimizing regression risk, but we should simplify the original
selector to avoid this
</vb:comment>
.cards.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .lastpost-info .lastpost-title {
font-weight: {vb:stylevar forum_card_lastpost_font.weight};
}
<vb:comment>
/*
This is to show the lastpost link as lighter weight than the topics & posts counts.
I'm not sure if that's necessarily better, so for now keeping the weight as it was
previously, but leaving this in case we change our mind..
*/
.cards.forum-list-container .lastpost > .lastpost-wrapper > .lastpost-info .lastpost-title {
font-weight: revert;
}
</vb:comment>
<vb:comment>
Align the counts & lastpost vertically bottom by decreasing line-height. This looks better
while the lastpost link is smaller size than the topic & post counts' sizes
</vb:comment>
.cards .topics-count .count,
.cards .posts-count .count,
.cards .last-post-date {
line-height: 1;
}
<vb:comment>
/* Channel Icon as Background */
</vb:comment>
.cards.icon-background .forum-item,
.cards.icon-background .category-header--show-card {
<vb:comment>
This is needed to set up the z-index: -1 on the background-image child element
</vb:comment>
z-index: 1;
}
.cards:not(.icon-background) .forumitem-background-image {
display: none;
}
<vb:comment>hide the inline default channel icon when using icons-as-background.</vb:comment>
.cards.icon-background .forum-info .icon {
display: none;
}
<vb:comment>
Hide the regular inline icon if we're using icon as background.
Annoyingly, one of the css classes (.h-center-vertical-container )
the icon uses uses !important, so we have to override that...
</vb:comment>
.cards.icon-background .forum-info .icon.h-center-vertical-container {
display: none !important;
}
.cards .forumitem-background-image {
grid-column: 1 / -1;
grid-row: 1 / -1;
width: 100%;
z-index: -1;
<vb:comment>
This trick prevents a too-large content (for exmaple, a very tall image)
from resizing the parent grid-container, instead forces the content to
resize to fit.
</vb:comment>
min-height: 100%;
height: 0;
}
.cards .forumitem-background-image > img {
width: 100%;
height: 100%;
margin: 0;
<vb:comment>
Adding a bit of blur and 50% sepia or grayscale makes it
trivial to allow the foreground (text) to pop from the
background image.
However, this might be controversial, and we may need this
in a stylevar instead of css.
</vb:comment>
filter: blur(2px) sepia(0.5);
}
.cards.icon-background--contain .forumitem-background-image > img {
object-fit: contain;
}
.cards.icon-background--cover .forumitem-background-image > img {
object-fit: cover;
}
.cards.icon-background--fill .forumitem-background-image > img {
object-fit: fill;
}
.cards.icon-background--none .forumitem-background-image > img {
object-fit: none;
}
.cards.icon-background--scale-down .forumitem-background-image > img {
object-fit: scale-down;
}
