From ac72ebc15efe3bc99e4d1b10613ec0765e1d5730 Mon Sep 17 00:00:00 2001 From: paulsohier Date: Sat, 19 Sep 2026 15:15:30 +0100 Subject: [PATCH 1/5] Style the documentation in #main The website's documentation layout (docs_base.html.twig) puts the User Guide and the Knowledge Base in #main, as the rest of the site, instead of the old pjax #ajax block, so the site's text styles and buttons apply to them. Their sidebar, the User Guide menu, the knowledge base chips and article list are navigation rather than running text: they keep their own size, indent and plain links, and a paragraph inside a list item no longer gets a paragraph's margin. Co-Authored-By: Claude Opus 5 --- css/support_docs.css | 69 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/css/support_docs.css b/css/support_docs.css index 3b1e7f5..3ae7fde 100644 --- a/css/support_docs.css +++ b/css/support_docs.css @@ -1047,6 +1047,44 @@ ul#tutorials li { } } +/*------------------------------------------------------*\ + The documentation in #main +/*------------------------------------------------------*/ + +/* The User Guide and the Knowledge Base sit in #main, as the rest of the site + does (docs_base.html.twig), and take its text styles. Their sidebar and + menus are navigation, not running text: #main's bigger lists, underlined + links and red headings do not apply to them. */ +.support_docs #main #extras h3 { + font-family: Verdana, Helvetica, Arial, sans-serif; + font-size: 1.05em; + color: #333333; +} + +.support_docs #main #extras ul, +.support_docs #main .guide-menu { + margin-left: 0; + line-height: normal; +} + +.support_docs #main #extras ul { + font-size: 1em; +} + +.support_docs #main .guide-menu { + font-size: 1.1em; +} + +.support_docs #main #extras a, +.support_docs #main .guide-menu a { + text-decoration: none; +} + +/* A paragraph inside a list item is part of the item, not a paragraph apart. */ +.support_docs #main .main-content li p { + margin-bottom: 0; +} + /*------------------------------------------------------*\ Knowledge base listing /*------------------------------------------------------*/ @@ -1187,6 +1225,37 @@ ul#tutorials li { font-size: 1.1em; } +/* The knowledge base sits in #main (docs_base.html.twig). Its chips and its + list are not running text: #main's list size, indent and underlined links + do not apply to them, nor its red headings to the list's heading. */ +#main .kb-categories ul, +#main .kb-articles { + margin-left: 0; + font-size: 1em; + line-height: normal; +} + +#main .kb-categories a, +#main .kb-articles .kb-title, +#main .kb-article-tags a { + text-decoration: none; +} + +#main .kb-articles .kb-title:hover, +#main .kb-articles .kb-title:focus { + text-decoration: underline; +} + +#main .kb-articles .kb-meta { + font-size: 1.1em; +} + +.support_docs #main .kb-listing-heading { + font-family: inherit; + font-size: 1.3em; + color: #505C65; +} + .support_docs .kb-empty { margin: 12px 2px; font-size: 1.2em; From 2d91d34b3768246ccc5a7b7154dc853f48ba9abc Mon Sep 17 00:00:00 2001 From: paulsohier Date: Sat, 19 Sep 2026 15:31:59 +0100 Subject: [PATCH 2/5] Style the knowledge base toolbar, back link, article panel and tags Co-Authored-By: Claude Opus 5 --- css/support_docs.css | 52 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/css/support_docs.css b/css/support_docs.css index 3ae7fde..2adb7ec 100644 --- a/css/support_docs.css +++ b/css/support_docs.css @@ -1256,6 +1256,18 @@ ul#tutorials li { color: #505C65; } +/* Actions for the knowledge base as a whole, such as submitting an article: + at the right of the listing's heading. */ +.kb-toolbar { + float: right; + margin: -3px 2px 0 12px; +} + +.kb-back { + margin: 2px 2px 10px; + font-size: 1.2em; +} + .support_docs .kb-empty { margin: 12px 2px; font-size: 1.2em; @@ -1369,6 +1381,46 @@ ul#tutorials li { text-align: left; } +/* The panel above an article: what was just done, whether it is public, its + pending revision, and the reader's actions on it, in one place. Amber when + the article is not what everyone sees. */ +.kb-article-panel { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 8px 16px; + margin: 0 2px 12px; + padding: 8px 12px; + border: 1px solid #C7D0D8; + border-radius: 5px; + background: #F5F8FA; +} + +.kb-article-panel.kb-article-panel-attention { + border-color: #E5C07B; + background: #FFF7E0; +} + +.kb-article-panel-text { + flex: 1 1 320px; +} + +#main .kb-article-panel p { + margin: 2px 0; + color: #333333; + text-align: left; +} + +#main .kb-article-panel p.kb-article-panel-done { + color: #2B6E2F; + font-weight: bold; +} + +#main .kb-article-panel .submit-buttons { + margin: 0; +} + .kb-article .markdown-body { font-size: 1.1em; } From 33e7bdb87bde1a8d1dd8a10fc197926af02db1f6 Mon Sep 17 00:00:00 2001 From: paulsohier Date: Sat, 19 Sep 2026 16:31:47 +0100 Subject: [PATCH 3/5] Keep the docs intro off the sidebar's edge Co-Authored-By: Claude Opus 5 --- css/support_docs.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/css/support_docs.css b/css/support_docs.css index 2adb7ec..1d066de 100644 --- a/css/support_docs.css +++ b/css/support_docs.css @@ -1051,10 +1051,19 @@ ul#tutorials li { The documentation in #main /*------------------------------------------------------*/ +/* Keep the intro, which wraps around the sidebar, off its edge. Below 800px + the sidebar is the slide-out panel, with a margin of its own. */ +@media only screen and (min-width: 801px) { + .support_docs #main #extras { + margin-left: 12px; + } +} + /* The User Guide and the Knowledge Base sit in #main, as the rest of the site does (docs_base.html.twig), and take its text styles. Their sidebar and menus are navigation, not running text: #main's bigger lists, underlined links and red headings do not apply to them. */ + .support_docs #main #extras h3 { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 1.05em; From e351d3606bbb3aa2e1c7a8eb579edc801d0b5bef Mon Sep 17 00:00:00 2001 From: paulsohier Date: Fri, 25 Sep 2026 12:36:44 +0200 Subject: [PATCH 4/5] Restyle the knowledge base: readable chips, cards, and a header that reads The chosen category chip takes the site's primary button colour instead of a grey that was hard to read. Each article in a listing is its own card, because hairline rows ran together. An article's versions read as a line of text, so only its categories look like chips, and a preview is framed as a preview. Co-Authored-By: Claude Opus 5 --- css/support_docs.css | 87 ++++++++++++++++++++++++++++++++------------ 1 file changed, 64 insertions(+), 23 deletions(-) diff --git a/css/support_docs.css b/css/support_docs.css index 1d066de..178d9db 100644 --- a/css/support_docs.css +++ b/css/support_docs.css @@ -1161,17 +1161,21 @@ ul#tutorials li { color: #626D76; } +/* The chosen category, in the site's own primary colour, as its buttons are. */ .kb-categories .active a, .kb-categories .active a:hover, .kb-categories .active a:focus { - border-color: #505C65; - background: #505C65; + border-color: #0F5C95; + background: linear-gradient(#2D7FBD, #105289); color: #FFFFFF; + font-weight: bold; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } .kb-categories .active .kb-count { - background: #3F4950; + background: rgba(255, 255, 255, 0.25); color: #FFFFFF; + text-shadow: none; } /* The heading above the list, and the list itself: rows divided by a hairline @@ -1192,13 +1196,25 @@ ul#tutorials li { padding: 0; } +/* One card per article: a hairline row made every article look like more of + the one above it. */ .kb-articles li { - padding: 10px 2px; - border-bottom: 1px solid #DCE3E8; + margin: 0 0 8px; + padding: 10px 12px; + border: 1px solid #DCE3E8; + border-left: 3px solid #C7D0D8; + border-radius: 4px; + background: #FFFFFF; +} + +.kb-articles li:hover { + border-color: #B4BAC0; + border-left-color: #105289; + background: #FBFCFD; } .kb-articles li:last-child { - border-bottom: none; + margin-bottom: 0; } .kb-articles .kb-title { @@ -1246,7 +1262,7 @@ ul#tutorials li { #main .kb-categories a, #main .kb-articles .kb-title, -#main .kb-article-tags a { +#main .kb-article-categories a { text-decoration: none; } @@ -1342,7 +1358,40 @@ ul#tutorials li { text-align: left; } -.kb-article-tags { +/* A preview is the article page itself, framed so nobody takes it for the + published one. */ +.kb-preview { + margin: 0 0 20px; + padding: 0 12px 12px; + border: 1px dashed #8C949A; + border-radius: 4px; + background: #FBFCFD; +} + +#main p.kb-preview-label, +.kb-preview-label { + margin: 0 -12px 12px; + padding: 6px 12px; + border-bottom: 1px dashed #8C949A; + background: #EEF2F5; + color: #505C65; + font-size: 1.1em; + font-weight: bold; + text-align: left; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +/* Which phpBB versions an article covers is a fact about it, so it reads as + a line of text. Only its categories are chips, because those lead somewhere. */ +.kb-article p.kb-article-applies { + margin: 0 0 8px; + color: #505C65; + font-size: 1.15em; + text-align: left; +} + +.kb-article-categories { display: flex; flex-wrap: wrap; gap: 6px; @@ -1351,31 +1400,23 @@ ul#tutorials li { padding: 0; } -.kb-article-tags li { +.kb-article-categories a { display: inline-block; padding: 2px 10px; border: 1px solid #C7D0D8; border-radius: 999px; background: #FFFFFF; - color: #505C65; + color: #105289; font-size: 1.1em; line-height: 1.4; -} - -.kb-article-tags .kb-article-version { - border-color: #505C65; - background: #505C65; - color: #FFFFFF; -} - -.kb-article-tags a { - color: #105289; text-decoration: none; } -.kb-article-tags a:hover, -.kb-article-tags a:focus { - text-decoration: underline; +.kb-article-categories a:hover, +.kb-article-categories a:focus { + border-color: #8C949A; + background: #E9EEF2; + text-decoration: none; } /* An article that only the team and its author can see. */ From bb3758cbe0d29cdb31494db6dda812f7ec28f18c Mon Sep 17 00:00:00 2001 From: paulsohier Date: Fri, 25 Sep 2026 12:51:04 +0200 Subject: [PATCH 5/5] Drop the styles whose markup is gone, and soften the preview label Co-Authored-By: Claude Opus 5 --- css/support_docs.css | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/css/support_docs.css b/css/support_docs.css index 178d9db..0e38fc0 100644 --- a/css/support_docs.css +++ b/css/support_docs.css @@ -1281,18 +1281,6 @@ ul#tutorials li { color: #505C65; } -/* Actions for the knowledge base as a whole, such as submitting an article: - at the right of the listing's heading. */ -.kb-toolbar { - float: right; - margin: -3px 2px 0 12px; -} - -.kb-back { - margin: 2px 2px 10px; - font-size: 1.2em; -} - .support_docs .kb-empty { margin: 12px 2px; font-size: 1.2em; @@ -1376,10 +1364,8 @@ ul#tutorials li { background: #EEF2F5; color: #505C65; font-size: 1.1em; - font-weight: bold; + font-weight: normal; text-align: left; - text-transform: uppercase; - letter-spacing: 0.04em; } /* Which phpBB versions an article covers is a fact about it, so it reads as