From 88fd9703aeb07d8d7369fec0c00bd33bcee02f83 Mon Sep 17 00:00:00 2001
From: paulsohier <paul@sohier.me>
Date: Fri, 18 Sep 2026 16:45:38 +0100
Subject: [PATCH] Styles for the knowledge base article page

For phpbb/phpbb-website-private#21: the article's header (title, lead
description, author line, version and category tags, a notice for
articles only the team and author see) and its footer panel
(attachments with their size, the support-topic link field and its
Copy button).

markdown-editor.css: Markdown headings no longer inherit prosilver's
uppercase h3, so an author's heading keeps the case it was written in.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 css/markdown-editor.css |   3 +
 css/support_docs.css    | 162 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 165 insertions(+)

diff --git a/css/markdown-editor.css b/css/markdown-editor.css
index 28e8e5c..2934487 100644
--- a/css/markdown-editor.css
+++ b/css/markdown-editor.css
@@ -125,6 +125,9 @@
 	font-weight: bold;
 	margin: 1.4em 0 0.5em;
 	line-height: 1.25;
+	/* prosilver writes its own h3 in capitals; an author's heading keeps
+	   the case it was written in. */
+	text-transform: none;
 }
 
 .markdown-body h1 { font-size: 1.7em; }
diff --git a/css/support_docs.css b/css/support_docs.css
index 33521a8..ac4fe51 100644
--- a/css/support_docs.css
+++ b/css/support_docs.css
@@ -1211,3 +1211,165 @@ ul#tutorials li {
 		text-align: left;
 	}
 }
+
+/*------------------------------------------------------*\
+	Knowledge base article
+/*------------------------------------------------------*/
+.kb-article {
+	padding: 0 2px;
+}
+
+/* Title, description, author line and tags, above a hairline. */
+.kb-article-header {
+	margin-bottom: 16px;
+	padding-bottom: 12px;
+	border-bottom: 1px solid #C7D0D8;
+}
+
+.support_docs .kb-article-title {
+	margin: 6px 0 4px;
+	padding: 0;
+	border: 0;
+	color: #105289;
+	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+	font-size: 2em;
+	font-weight: bold;
+	line-height: 1.25;
+	text-transform: none;
+}
+
+.kb-article p.kb-article-description {
+	margin: 0 0 6px;
+	color: #333333;
+	font-size: 1.3em;
+	text-align: left;
+}
+
+.kb-article p.kb-article-meta {
+	margin: 0 0 8px;
+	color: #626D76;
+	font-size: 1.1em;
+	text-align: left;
+}
+
+.kb-article-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.kb-article-tags li {
+	display: inline-block;
+	padding: 2px 10px;
+	border: 1px solid #C7D0D8;
+	border-radius: 999px;
+	background: #FFFFFF;
+	color: #505C65;
+	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;
+}
+
+/* An article that only the team and its author can see. */
+.kb-article p.kb-article-status {
+	margin: 4px 0 8px;
+	padding: 8px 12px;
+	border: 1px solid #E5C07B;
+	border-radius: 5px;
+	background: #FFF7E0;
+	color: #5C4400;
+	font-size: 1.2em;
+	text-align: left;
+}
+
+.kb-article .markdown-body {
+	font-size: 1.1em;
+}
+
+/* Attachments and the link to paste into a support topic. */
+.kb-article-footer {
+	margin-top: 20px;
+	padding: 12px 14px;
+	border: 1px solid #DCE3E8;
+	border-radius: 5px;
+	background: #FFFFFF;
+}
+
+.support_docs .kb-article-footer h3 {
+	margin: 0 0 6px;
+	padding: 0;
+	border: 0;
+	color: #505C65;
+	font-size: 1.2em;
+	text-transform: none;
+}
+
+.kb-article-attachments {
+	margin-bottom: 14px;
+}
+
+.kb-article-attachments ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.kb-article-attachments li {
+	padding: 3px 0;
+	font-size: 1.2em;
+}
+
+.kb-article-filesize {
+	margin-left: 6px;
+	color: #626D76;
+	font-size: 0.9em;
+}
+
+.kb-article-link-field {
+	display: flex;
+	gap: 6px;
+}
+
+.kb-article-link-field input.inputbox {
+	flex: 1 1 auto;
+	min-width: 0;
+	width: auto;
+	padding: 4px 6px;
+	font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace;
+	font-size: 1.1em;
+}
+
+.kb-article-link-field button {
+	flex: 0 0 auto;
+	padding: 4px 14px;
+	border: 1px solid #505C65;
+	border-radius: 4px;
+	background: #505C65;
+	color: #FFFFFF;
+	cursor: pointer;
+	font-size: 1.1em;
+}
+
+.kb-article-link-field button:hover,
+.kb-article-link-field button:focus {
+	border-color: #3F4950;
+	background: #3F4950;
+}