Revision control
Copy as Markdown
/* tasklist.css
* Styles for the QDoc \tasklist … \endtasklist macro set.
* Uses CSS custom properties defined in offline2.css (style-conv) so colors
* automatically follow the Qt documentation light/dark theme.
*/
.qs-guide {
--qs-accent: #41cd52;
--qs-nav-width: 210px;
--qs-mono: 'Droid Sans Mono', monospace;
}
/* ── Outer wrapper — CSS grid ────────────────────────────────────────────── */
.qs-guide {
font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
color: var(--main-color);
overflow: hidden;
margin: 2em 0;
display: grid;
grid-template-columns: var(--qs-nav-width) 1fr;
background: linear-gradient(
to right,
var(--content-bg-color-alt) var(--qs-nav-width),
var(--content-bg-color) var(--qs-nav-width)
);
border: 1px solid var(--content-border-color);
}
/* ── Header — spans both columns ─────────────────────────────────────────── */
.qs-header {
grid-column: 1 / -1;
padding: 16px 20px 12px;
background: var(--main-bg-color);
border-bottom: 1px solid var(--content-border-color);
}
.qs-title {
margin: 0 0 3px;
font-size: 1.25em;
font-weight: 600;
color: var(--main-color-alt);
}
.qs-subtitle {
margin: 0;
color: var(--main-color);
font-size: .875em;
opacity: .7;
}
/* ── Hidden inputs and injected <style> elements ─────────────────────────── */
.qs-input,
style { display: none; }
/* ── Sidebar labels (column 1) ───────────────────────────────────────────── */
.qs-step-label {
grid-column: 1;
display: flex;
align-items: center;
padding: 9px 14px;
cursor: pointer;
font-size: .875em;
line-height: 1.4;
color: var(--main-color);
border-left: 3px solid transparent;
border-right: 1px solid var(--content-border-color);
transition: background .15s, border-color .15s;
user-select: none;
}
.qs-step-label:hover {
background: var(--content-active-color);
}
/* Active state applied by inline :checked ~ style from \taskstep */
/* ── Content panels (column 2) ───────────────────────────────────────────── */
.qs-panel {
grid-column: 2;
grid-row: 2 / span 100;
display: none;
flex-direction: column;
padding: 18px 20px 0;
min-height: 280px;
}
.qs-panel h2:first-child {
margin: 0 0 4px;
font-size: 1.2em;
font-weight: 600;
color: var(--main-color-alt);
}
.qs-panel > p:first-of-type {
margin-top: 4px;
color: var(--main-color);
font-size: .875em;
opacity: .7;
}
/* Code blocks — match Qt doc pre style */
.qs-panel pre,
.qs-panel code {
font-family: var(--qs-mono);
font-size: .8em;
}
.qs-panel pre {
background: #3a4055;
color: #ffffff;
line-height: 1.5;
overflow-x: auto;
padding: 25px;
margin: 12px 0 0;
flex: 1;
}
/* ── Footer nav (inside each panel) ─────────────────────────────────────── */
.qs-footer {
display: flex;
justify-content: space-between;
padding: 12px 0 14px;
margin-top: auto;
border-top: 1px solid var(--content-border-color);
}
.qs-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border: 1px solid var(--content-border-color);
background: var(--content-active-color);
color: var(--main-color);
font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
font-size: .875em;
font-weight: 300;
cursor: pointer;
transition: opacity .15s;
user-select: none;
}
.qs-btn:hover {
opacity: .75;
}
.qs-btn.qs-hidden {
visibility: hidden;
pointer-events: none;
}
.qs-btn-next {
background: var(--qs-accent);
border-color: var(--qs-accent);
color: #000;
font-weight: 600;
}
/* ── Progress bar ────────────────────────────────────────────────────────── */
.qs-progress-wrap {
grid-column: 1 / -1;
height: 4px;
background: var(--content-active-color);
}
.qs-progress-fill {
height: 100%;
background: var(--qs-accent);
width: 0%;
transition: width .3s ease;
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 580px) {
.qs-guide {
grid-template-columns: 1fr;
background: var(--main-bg-color);
}
.qs-step-label {
grid-column: 1;
display: inline-flex;
width: auto;
border-left: none;
border-right: none;
border-bottom: 2px solid transparent;
font-size: .8em;
padding: 7px 10px;
}
.qs-panel {
grid-column: 1;
grid-row: auto;
}
.qs-progress-wrap { grid-column: 1; }
}