Skip to content

Style the documentation in #main, and the knowledge base pages #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paul999 wants to merge 6 commits into
base: master
Choose a base branch
from
+179 −22
Open

Style the documentation in #main, and the knowledge base pages #41

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ac72ebc
Style the documentation in #main
paul999 Sep 19, 2026
2d91d34
Style the knowledge base toolbar, back link, article panel and tags
paul999 Sep 19, 2026
33e7bdb
Keep the docs intro off the sidebar's edge
paul999 Sep 19, 2026
2a1666c
Merge remote-tracking branch 'origin/master' into issue-20/docs-in-main
paul999 Sep 25, 2026
e351d36
Restyle the knowledge base: readable chips, cards, and a header that …
paul999 Sep 25, 2026
bb3758c
Drop the styles whose markup is gone, and soften the preview label
paul999 Sep 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
201 changes: 179 additions & 22 deletions css/support_docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1047,6 +1047,53 @@ 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;
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
/*------------------------------------------------------*/
Expand Down Expand Up @@ -1114,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
Expand All @@ -1145,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 {
Expand Down Expand Up @@ -1187,6 +1250,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-categories a {
text-decoration: none;
}

#main .kb-articles .kb-title:hover,
#main .kb-articles .kb-title:focus {
text-decoration: underline;
}
Comment on lines +1263 to +1272

#main .kb-articles .kb-meta {
font-size: 1.1em;
}

.support_docs #main .kb-listing-heading {
font-family: inherit;
font-size: 1.3em;
color: #505C65;
}
Comment on lines +1278 to +1282

.support_docs .kb-empty {
margin: 12px 2px;
font-size: 1.2em;
Expand Down Expand Up @@ -1252,7 +1346,38 @@ 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: normal;
text-align: left;
}

/* 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;
Expand All @@ -1261,31 +1386,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. */
Expand All @@ -1300,6 +1417,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;
}
Expand Down