From 06e24c63feca624eb9975be8162d7cae3b6bfb89 Mon Sep 17 00:00:00 2001 From: paulsohier Date: Fri, 18 Sep 2026 16:03:13 +0100 Subject: [PATCH 1/2] Styles for the knowledge base index's chips and article list For phpbb/phpbb-website-private#20, which replaces the knowledge base's nine category tabs with chips and its table with a list: - .kb-categories: rounded chips with an article count. They wrap on a wide screen and scroll sideways in one row at 700px and below. The current one is filled like the docs' active tab (#505C65), and one for a category without articles is dashed and grey. - .kb-listing-heading and .kb-articles: a light heading and rows split by a hairline, with title, description and an author and date line, so nothing is hidden on a phone. - On narrow screens the docs' intro text is left-aligned rather than justified, which left wide gaps between words. Co-Authored-By: Claude Opus 5 --- css/support_docs.css | 152 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) diff --git a/css/support_docs.css b/css/support_docs.css index e7b8503..306bd18 100644 --- a/css/support_docs.css +++ b/css/support_docs.css @@ -1046,3 +1046,155 @@ ul#tutorials li { margin: 0 0 24px; } } + +/*------------------------------------------------------*\ + Knowledge base listing +/*------------------------------------------------------*/ + +/* Category chips: they wrap on a wide screen and scroll sideways in one row + on a narrow one. The current one is filled like the docs' active tab. */ +.kb-categories ul { + display: flex; + flex-wrap: wrap; + gap: 6px; + list-style: none; + margin: 4px 0 14px; + padding: 0; +} + +.kb-categories a { + display: inline-block; + padding: 5px 12px; + border: 1px solid #C7D0D8; + border-radius: 999px; + background: #FFFFFF; + color: #105289; + font-size: 1.2em; + line-height: 1.4; + text-decoration: none; + white-space: nowrap; +} + +.kb-categories a:hover, +.kb-categories a:focus { + border-color: #8C949A; + background: #E9EEF2; + color: #105289; + text-decoration: none; +} + +.kb-categories .kb-count { + display: inline-block; + min-width: 1.4em; + margin-left: 4px; + padding: 0 6px; + border-radius: 999px; + background: #E9EEF2; + color: #505C65; + font-size: 0.85em; + text-align: center; +} + +/* A category with no articles for this version. */ +.kb-categories .empty a { + border-style: dashed; + color: #747A7F; +} + +.kb-categories .active a, +.kb-categories .active a:hover, +.kb-categories .active a:focus { + border-color: #505C65; + background: #505C65; + color: #FFFFFF; +} + +.kb-categories .active .kb-count { + background: rgba(255, 255, 255, 0.2); + color: #FFFFFF; +} + +/* The heading above the list, and the list itself: rows divided by a hairline + rather than a table, so title, description and author fit any width. */ +.support_docs .kb-listing-heading { + margin: 0 0 4px; + padding: 0 2px 8px; + border-bottom: 1px solid #C7D0D8; + color: #505C65; + font-size: 1.3em; + font-weight: bold; + text-transform: none; +} + +.kb-articles { + list-style: none; + margin: 0; + padding: 0; +} + +.kb-articles li { + padding: 10px 2px; + border-bottom: 1px solid #DCE3E8; +} + +.kb-articles li:last-child { + border-bottom: none; +} + +.kb-articles .kb-title { + font-size: 1.4em; + font-weight: bold; + line-height: 1.3; +} + +.kb-articles .kb-external { + display: inline-block; + margin-left: 6px; + padding: 1px 7px; + border-radius: 999px; + background: #E9EEF2; + color: #505C65; + font-size: 1em; + vertical-align: 2px; +} + +#main .kb-articles p, +.kb-articles p { + margin: 3px 0 0; + text-align: left; +} + +.kb-articles .kb-description { + color: #333333; + font-size: 1.2em; +} + +.kb-articles .kb-meta { + color: #626D76; + font-size: 1.1em; +} + +.support_docs .kb-empty { + margin: 12px 2px; + font-size: 1.2em; +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .kb-categories ul { + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + padding-bottom: 6px; + scrollbar-width: thin; + } + + .kb-categories li { + flex: 0 0 auto; + } + + /* Justified text leaves wide gaps in a narrow column. */ + .support_docs #main p { + text-align: left; + } +} From 04f3f69267ec87b3c273ce52994b7dce25863ebc Mon Sep 17 00:00:00 2001 From: paulsohier Date: Fri, 18 Sep 2026 16:08:01 +0100 Subject: [PATCH 2/2] Meet AA contrast on the KB chips, and hide count labels visually From review: the text of an empty category's chip (#747A7F on white, 4.35:1) and the count on the current chip (4.22:1) were below AA for their size; they are #626D76 and a solid #3F4950 badge now. Adds .kb-visually-hidden for the "articles" after a chip's count, and makes the External link badge 1.1em like the meta line. Co-Authored-By: Claude Opus 5 --- css/support_docs.css | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/css/support_docs.css b/css/support_docs.css index 306bd18..33521a8 100644 --- a/css/support_docs.css +++ b/css/support_docs.css @@ -1095,10 +1095,23 @@ ul#tutorials li { text-align: center; } +/* Read by screen readers only, such as the word after a chip's count. */ +.kb-visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; +} + /* A category with no articles for this version. */ .kb-categories .empty a { border-style: dashed; - color: #747A7F; + color: #626D76; } .kb-categories .active a, @@ -1110,7 +1123,7 @@ ul#tutorials li { } .kb-categories .active .kb-count { - background: rgba(255, 255, 255, 0.2); + background: #3F4950; color: #FFFFFF; } @@ -1154,7 +1167,7 @@ ul#tutorials li { border-radius: 999px; background: #E9EEF2; color: #505C65; - font-size: 1em; + font-size: 1.1em; vertical-align: 2px; }