a { font-size: 1.3em; font-weight: 600; } .cForumMiniList [data-category]:not(:first-child){ margin-top: 1em; } /* Indent sub-categories */ .cForumMiniList .cForumMiniList .cForumMiniList{ margin-inline-start: 1.5em; } .cForumMiniList__count { font-size: .85em; flex: 0 0 auto; color: var(--i-color_soft); margin-inline-start: auto; } .cForumMiniList .cForumMiniList__blob { background: var(--i-featured, var(--i-background_6)); color: #fff; flex: 0 0 auto; font-size: 16px; width: 1em; height: 1em; border-radius: 5px; display: inline-grid; place-items: center; transform: scale(.5); transition: .2s; } .cForumMiniList .cForumMiniList__blob [class*="fa-"] { display: none; font-size: .6em; } .cForumMiniList .cForumMiniList__selected > .cForumMiniList__blob { opacity: 1; transform: scale(1); } .cForumMiniList .cForumMiniList__selected > .cForumMiniList__blob [class*="fa-"] { display: block; } /* Read: Make icon background subtle */ .cForumMiniList [data-ips-read] > .cForumMiniList__blob{ background-color: var(--i-background_6); } /* v5 todo: Audit this code */ /* BOTH */ @media screen and (max-width: 979px) { .cForumMiniList_wrapper { display: none; } .ipsDialog #elFluidFormFilters { border: 0; } .ipsDialog .cForumMiniList_wrapper, .cForumMiniList { display: block !important; } }]]> *, .cTopicOverview__item{ outline: 1px solid var(--i-background_3); } .cTopicOverview__item{ padding: 1.5em; flex: 1 1 max(300px, 40%); } /* Inlined collapsed state */ .cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__content{ flex-wrap: nowrap; } .cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__item{ flex: 1 0 auto; } @container cTopicOverview (min-width: 500px){ .cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__content{ flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(to left, transparent, #000 300px); } } /* Vertical UI when small */ @container cTopicOverview (max-width: 750px){ .cTopicOverview{ display: grid; } } /* Hide certain items when collapsed */ .cTopicOverview--main:not(.cTopicOverview--expanded) :is(.cTopicOverview__item--popularPosts, .cTopicOverview__item--helpfulPosts, .cTopicOverview__item--images){ display: none; } /* Hide all items except for stats on small screens */ @container cTopicOverview (max-width: 499px){ .cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__item:not(.cTopicOverview__item--stats){ display: none; } } /* Titles */ .cTopicOverview__title{ font-weight: 600; margin-bottom: 1em; font-size: 1.2em; color: var(--i-color_hard); } /* Toggle button */ .cTopicOverview__toggle { flex: 1 0 auto; padding: .5em; text-align: center; } .cTopicOverview__toggle i[class*=" fa-"] { transition: 0.2s all ease-in-out; } .cTopicOverview--expanded .cTopicOverview__toggle i[class*=" fa-"] { transform: rotate(180deg); } .cTopicOverview__toggle:hover { background: var(--i-background_2); } /* Hide toggle button in sidebar since it's always expanded */ .ipsLayout__secondary-column .cTopicOverview__toggle{ display: none; } /* Stats */ .cTopicOverview__item--stats{ display: flex; gap: 1em 2em; text-align: center; } .cTopicOverview--expanded .cTopicOverview__item--stats{ flex: 1 1 100%; } .cTopicOverview__item--stats > li{ flex: 1 0 auto; display: grid; place-content: center; } /* Data lists */ .cTopicOverview__dataList{ display: flex; flex-wrap: wrap; gap: 2em; } .cTopicOverview__dataList > *{ flex: 1 1 170px; } /* 2 columns in sidebar */ :is(.cTopicOverview__item--topPosters, .cTopicOverview__item--popularDays) .cTopicOverview__dataList > *{ flex-basis: max(120px, 40%); } /* Smaller gap on collapsed */ .cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__item--topPosters .cTopicOverview__dataList{ gap: 1em; } .cTopicOverview--main:not(.cTopicOverview--expanded) .cTopicOverview__dataList > *{ flex: 0 0 auto; } /* Minimal photo panels in collapsed view */ .cTopicOverview--main:not(.cTopicOverview--expanded) .ipsPhotoPanel__text{ display: none; } .cTopicOverview__imageGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 15px; } /* Topic meta */ .ipsTopicMeta { margin-bottom: 1em; padding: .5em 1em; display: grid; gap: .5em; color: var(--i-color_soft); font-weight: 500; font-size: .9em; } /* Automatic contrast against page background */ @supports (color: oklch(from var(--i) clamp(0, (.60 - l) * 1000, 1) c h)) and (color: oklch(from red l c h)){ .ipsTopicMeta:not(.ipsBox *){ color: oklch(from var(--i-body--ba-co) clamp(0, (.60 - l) * 1000, 1) c h); } } .ipsBox .ipsTopicMeta{ margin: 0; border-top: 1px solid var(--i-background_3); background: var(--i-background_2) } .ipsTopicMeta a{ color: inherit; } @media (min-width: 768px){ .ipsEntry--post ~ .ipsTopicMeta { padding-inline-start: var(--post-column--fl-ba, 240px); } } .ipsTopicMeta__time { margin-inline-end: var(--i-sp_2); } /* Hide certain elements depending on traditional, minimal and first page attributes */ #ipsTopicView[data-ips-topic-ui="traditional"][data-ips-topic-first-page="true"] [data-ips-hide="traditional-first"], #ipsTopicView[data-ips-topic-ui="minimal"] [data-ips-hide="minimal"], #ipsTopicView[data-ips-topic-comments="helpful"] .ipsTopicMeta{ display: none; } /* Improve alignment of assigned icon */ .ipsMessage--assigned .ipsMessage__icon{ top: calc(50% - .5em); }]]>