Revision control
Copy as Markdown
/*
Copyright (C) 2026 The Qt Company Ltd.
SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
*/
/* ==========================================================================
Qt-Branded Theme for QDoc Template Generator
========================================================================== */
/* --- Theme Colors --- */
:root {
--qt-green: #41cd52;
--accent: #3b82f6;
--header-bg: #1f2937;
--heading: #1f2937;
--text: #404244;
--bg: #ffffff;
--surface: #f5f5f5;
--border: #e0e0e0;
--code-bg: #f8f8f8;
--link: #41cd52;
--note: #1976d2;
--warning: #f57c00;
--important: #d32f2f;
}
/* --- Reset and Base --- */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text);
background-color: var(--bg);
}
/* --- Page Header Bar --- */
.header-bar {
background-color: var(--header-bg);
padding: 0 24px;
display: flex;
align-items: center;
min-height: 56px;
border-bottom: 3px solid var(--qt-green);
}
.header-bar .logo {
display: flex;
align-items: center;
margin-right: 24px;
flex-shrink: 0;
}
.header-bar .logo img,
.header-bar .logo svg {
height: 28px;
width: auto;
}
/* --- Breadcrumb Navigation --- */
.breadcrumbs {
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.breadcrumbs .crumb {
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
}
.breadcrumbs .crumb.current {
color: #ffffff;
font-weight: 600;
}
.breadcrumbs .separator {
margin: 0 8px;
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
/* --- Content Area --- */
.content {
max-width: 960px;
margin: 0 auto;
padding: 32px 24px 64px;
}
/* --- Toolbar --- */
.toolbar {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 0 24px;
flex-wrap: wrap;
}
.toolbar-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 13px;
font-family: inherit;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s, border-color 0.15s;
}
.toolbar-btn:hover {
background-color: var(--surface);
border-color: #c0c0c0;
}
.toolbar-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* --- Ask AI Dropdown (details/summary) --- */
.ask-ai {
position: relative;
display: inline-block;
}
.ask-ai > summary {
list-style: none;
}
.ask-ai > summary::-webkit-details-marker {
display: none;
}
.ask-ai > summary::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--text);
border-bottom: 1.5px solid var(--text);
transform: rotate(45deg);
margin-left: 6px;
margin-bottom: 2px;
transition: transform 0.2s;
}
.ask-ai[open] > summary::after {
transform: rotate(-135deg);
margin-bottom: -2px;
}
.ask-ai .dropdown-content {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 10;
min-width: 220px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
padding: 6px 0;
}
.dropdown-content a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
font-size: 13px;
color: var(--text);
text-decoration: none;
}
.dropdown-content a:hover {
background-color: var(--surface);
}
/* --- AI Provider Badges --- */
.ai-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
color: #ffffff;
flex-shrink: 0;
}
.ai-claude { background-color: #d97706; }
.ai-chatgpt { background-color: #1a1a1a; }
.ai-grok { background-color: #1d9bf0; }
/* --- Typography --- */
h1 {
font-size: 2em;
font-weight: 700;
margin: 0 0 8px;
color: var(--heading);
line-height: 1.2;
}
h2 {
font-size: 1.5em;
font-weight: 600;
margin: 40px 0 12px;
color: var(--heading);
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
h3 {
font-size: 1.2em;
font-weight: 600;
margin: 32px 0 8px;
color: var(--heading);
}
h4 {
font-size: 1em;
font-weight: 600;
margin: 24px 0 8px;
color: var(--heading);
}
p {
margin: 0 0 16px;
}
.brief {
font-size: 1.1em;
color: #6b6d70;
margin-bottom: 4px;
}
/* --- Code Blocks --- */
code {
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
font-size: 0.9em;
background-color: var(--code-bg);
padding: 2px 5px;
border-radius: 3px;
}
pre {
position: relative;
background-color: var(--code-bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 16px;
overflow-x: auto;
line-height: 1.5;
margin: 0 0 16px;
}
pre code {
background: none;
padding: 0;
border-radius: 0;
}
.code-copy-btn {
position: absolute;
top: 6px;
right: 6px;
padding: 3px 10px;
font-size: 11px;
font-family: inherit;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s;
}
pre:hover .code-copy-btn {
opacity: 1;
}
.code-copy-btn:hover {
background-color: var(--surface);
border-color: #c0c0c0;
}
/* --- Tables --- */
table {
width: 100%;
border-collapse: collapse;
margin: 0 0 16px;
font-size: 15px;
}
th,
td {
padding: 10px 14px;
text-align: left;
border: 1px solid var(--border);
}
th {
background-color: var(--surface);
font-weight: 600;
}
/* --- Admonitions --- */
.admonition {
padding: 12px 16px;
margin: 0 0 16px;
border-left: 4px solid var(--border);
border-radius: 0 6px 6px 0;
background-color: var(--surface);
}
.admonition-note {
border-left-color: var(--note);
}
.admonition-warning {
border-left-color: var(--warning);
}
.admonition-important {
border-left-color: var(--important);
}
.admonition-title {
font-weight: 600;
margin-bottom: 4px;
}
/* --- Links --- */
a {
color: var(--link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Lists --- */
ul,
ol {
margin: 0 0 16px;
padding-left: 24px;
}
li {
margin-bottom: 4px;
}
/* --- Member Detail Sections --- */
h3.fn {
font-size: 1.05em;
font-weight: 600;
margin: 32px 0 8px;
padding: 8px 12px;
background-color: var(--surface);
border-left: 3px solid var(--qt-green);
border-radius: 0 4px 4px 0;
color: var(--heading);
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
}
/* --- Requisites Table --- */
table.requisites {
width: auto;
border: none;
margin: 0 0 16px;
}
table.requisites td {
border: none;
padding: 4px 12px 4px 0;
vertical-align: top;
}
table.requisites .memItemLeft {
font-weight: 600;
white-space: nowrap;
color: var(--heading);
}
/* --- Summary Tables --- */
table.alignedsummary {
width: 100%;
}
table.alignedsummary .memItemLeft {
white-space: nowrap;
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
}
table.annotated .tblName {
white-space: nowrap;
font-weight: 600;
}
/* --- Since Badge --- */
.since {
display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
background-color: var(--surface);
color: var(--heading);
border: 1px solid var(--border);
}
/* --- Qt Logo --- */
.qt-logo {
display: flex;
align-items: center;
margin-right: 24px;
flex-shrink: 0;
}
.qt-logo img {
height: 28px;
width: auto;
}
/* --- Footer --- */
.footer {
border-top: 1px solid var(--border);
margin-top: 64px;
padding: 24px 0;
color: #9e9e9e;
font-size: 13px;
}