You've already forked CEF4Delphi
mirror of
https://github.com/salvadordf/CEF4Delphi.git
synced 2026-04-03 01:00:31 +02:00
400 lines
11 KiB
CSS
400 lines
11 KiB
CSS
/*
|
|
Copyright 1998-2026 PasDoc developers.
|
|
|
|
This file is part of "PasDoc".
|
|
|
|
"PasDoc" is free software; you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation; either version 2 of the License, or
|
|
(at your option) any later version.
|
|
|
|
"PasDoc" is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with "PasDoc"; if not, write to the Free Software
|
|
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
|
|
|
|
----------------------------------------------------------------------------
|
|
*/
|
|
|
|
/* === Custom Properties === */
|
|
:root {
|
|
--pasdoc-accent: #0d6efd;
|
|
--pasdoc-accent-hover: #0a58ca;
|
|
--pasdoc-accent-light: #e7f1ff;
|
|
--pasdoc-sidebar-width: 18rem;
|
|
--pasdoc-sidebar-bg: #f8f9fa;
|
|
--pasdoc-border-color: #dee2e6;
|
|
--pasdoc-code-bg: #f8f9fa;
|
|
--pasdoc-muted: #6c757d;
|
|
}
|
|
|
|
/* === Layout: sidebar + content === */
|
|
|
|
@media (min-width: 768px) {
|
|
.offcanvas-md {
|
|
width: var(--pasdoc-sidebar-width) !important;
|
|
position: fixed !important;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
border-right: 1px solid var(--pasdoc-border-color);
|
|
overflow-y: auto;
|
|
background-color: var(--pasdoc-sidebar-bg) !important;
|
|
}
|
|
.pasdoc-content {
|
|
margin-left: var(--pasdoc-sidebar-width);
|
|
}
|
|
}
|
|
|
|
/* === Sidebar navigation styling (with Bootstrap) === */
|
|
|
|
.offcanvas-body {
|
|
/* Override Bootstrap default flex making row, which would put
|
|
<h2> from --title on the left of the menu. */
|
|
flex-direction: column;
|
|
}
|
|
|
|
.offcanvas-body h2 {
|
|
font-size: 1.1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.offcanvas-body .nav-link {
|
|
color: #495057;
|
|
font-size: 0.9rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.offcanvas-body .nav-link:hover {
|
|
color: var(--pasdoc-accent);
|
|
background-color: var(--pasdoc-accent-light);
|
|
}
|
|
|
|
/* === Section tabs === */
|
|
|
|
.sections {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
margin-bottom: 1rem;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
.sections .one_section {
|
|
display: inline-block;
|
|
background: transparent;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.sections .one_section a.section {
|
|
display: inline-block;
|
|
padding: 0.3rem 0.7rem;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--pasdoc-accent);
|
|
background-color: var(--pasdoc-accent-light);
|
|
border-radius: 2rem;
|
|
text-decoration: none;
|
|
}
|
|
.sections .one_section a.section:hover {
|
|
background-color: var(--pasdoc-accent);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* === Tables === */
|
|
|
|
table.wide_list {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1rem;
|
|
}
|
|
table.wide_list td,
|
|
table.wide_list th {
|
|
vertical-align: top;
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid var(--pasdoc-border-color);
|
|
}
|
|
|
|
tr.listheader {
|
|
background-color: var(--pasdoc-sidebar-bg);
|
|
border-bottom: 2px solid var(--pasdoc-border-color);
|
|
}
|
|
tr.listheader th {
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
color: var(--pasdoc-muted);
|
|
}
|
|
|
|
tr.list { background-color: #ffffff; }
|
|
tr.list2 { background-color: var(--pasdoc-sidebar-bg); }
|
|
tr.list:hover,
|
|
tr.list2:hover { background-color: var(--pasdoc-accent-light); }
|
|
|
|
table.detail {
|
|
border: 1px solid var(--pasdoc-border-color);
|
|
border-radius: 0.375rem;
|
|
overflow: hidden;
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
width: 100%;
|
|
}
|
|
table.detail td {
|
|
padding: 0.5rem 0.75rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
table.summary td.itemcode,
|
|
table.detail td.itemcode { width: 100%; }
|
|
td.itemname { white-space: nowrap; }
|
|
td.itemunit { white-space: nowrap; }
|
|
td.itemdesc { width: 100%; }
|
|
|
|
/* === Visibility badges === */
|
|
|
|
.badge.vis-public { background-color: #198754; font-size: 0.7rem; }
|
|
.badge.vis-published { background-color: #0d6efd; font-size: 0.7rem; }
|
|
.badge.vis-protected { background-color: #fd7e14; font-size: 0.7rem; }
|
|
.badge.vis-private { background-color: #dc3545; font-size: 0.7rem; }
|
|
.badge.vis-automated { background-color: #6c757d; font-size: 0.7rem; }
|
|
|
|
td.visibility {
|
|
width: 2.5rem;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
td.visibility a { text-decoration: none; }
|
|
|
|
table.markerlegend { width: auto; }
|
|
table.markerlegend td.legendmarker { text-align: center; padding-right: 1rem; }
|
|
|
|
/* === Code styling === */
|
|
|
|
code {
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
/* Style applied to Pascal code in documentation
|
|
(e.g. produced by @longcode tag) } */
|
|
.longcode {
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
font-size: 0.875em;
|
|
background-color: var(--pasdoc-code-bg);
|
|
border: 1px solid var(--pasdoc-border-color);
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
pre.preformatted {
|
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
font-size: 0.875em;
|
|
background-color: var(--pasdoc-code-bg);
|
|
border: 1px solid var(--pasdoc-border-color);
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Pascal syntax highlighting */
|
|
span.pascal_string { color: #0a3069; }
|
|
span.pascal_keyword { font-weight: 600; color: #cf222e; }
|
|
span.pascal_comment { color: #6e7781; font-style: italic; }
|
|
span.pascal_compiler_comment { color: #116329; }
|
|
span.pascal_numeric { color: #0550ae; }
|
|
span.pascal_hex { color: #0550ae; }
|
|
|
|
/* === Links === */
|
|
|
|
a:link, a:visited { color: var(--pasdoc-accent); text-decoration: none; }
|
|
a:hover { color: var(--pasdoc-accent-hover); text-decoration: underline; }
|
|
|
|
a.bold:link, a.bold:visited { color: var(--pasdoc-accent); font-weight: 600; text-decoration: none; }
|
|
a.bold:hover { text-decoration: underline; }
|
|
|
|
a.section { color: var(--pasdoc-accent); text-decoration: none; font-weight: 600; }
|
|
a.section:hover { text-decoration: none; }
|
|
|
|
ul.useslist a:link, ul.useslist a:visited { color: var(--pasdoc-accent); font-weight: 600; }
|
|
ul.useslist a:hover { text-decoration: underline; }
|
|
|
|
p.unitlink a:link, p.unitlink a:visited { color: var(--pasdoc-accent); font-weight: 600; }
|
|
p.unitlink a:hover { text-decoration: underline; }
|
|
|
|
/* === Lists === */
|
|
|
|
ul.hierarchy { list-style-type: none; padding-left: 1.5rem; }
|
|
ul.hierarchylevel { list-style-type: none; padding-left: 1.5rem; }
|
|
|
|
/* Actually this reduces vertical space between *every* paragraph
|
|
inside list with @itemSpacing(compact).
|
|
While we would like to reduce this space only for the
|
|
top of 1st and bottom of last paragraph within each list item.
|
|
But, well, user probably will not do any paragraph breaks
|
|
within a list with @itemSpacing(compact) anyway, so it's
|
|
acceptable solution. */
|
|
ul.compact_spacing p { margin-top: 0; margin-bottom: 0; }
|
|
ol.compact_spacing p { margin-top: 0; margin-bottom: 0; }
|
|
dl.compact_spacing p { margin-top: 0; margin-bottom: 0; }
|
|
|
|
/* === Description elements === */
|
|
|
|
/* The paragraph "This item has no description." with this CSS class appears
|
|
on items that have no description, and no ancestor from which
|
|
to take a description.
|
|
By default we hide it, you can inhide it to explicitly see where descriptions are missing. */
|
|
p.nodescription {
|
|
color: var(--pasdoc-muted);
|
|
display: none;
|
|
}
|
|
p.inheritdescription, p.description-inherited { color: var(--pasdoc-muted); font-style: italic; }
|
|
dl.description dt { color: var(--pasdoc-muted); }
|
|
dl.parameters dt { color: var(--pasdoc-accent); font-weight: 500; }
|
|
|
|
/* Various browsers have various default styles for <h6>,
|
|
sometimes ugly for our purposes, so it's best to set things
|
|
like font-size and font-weight in out pasdoc.css explicitly. */
|
|
h6.description_section {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
/* By default browsers usually have some large margin-bottom and
|
|
margin-top for <h1-6> tags. In our case, margin-bottom is
|
|
unnecessary, we want to visually show that description_section
|
|
is closely related to content below. In this situation
|
|
(where the font size is just as a normal text), smaller bottom
|
|
margin seems to look good. */
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* === Warning and Note tags === */
|
|
|
|
dl.tag.warning {
|
|
background-color: #f8d7da;
|
|
border: 1px solid #f5c2c7;
|
|
border-left: 4px solid #dc3545;
|
|
border-radius: 0.375rem;
|
|
padding: 0.75rem 1rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
dl.tag.warning dt { color: #842029; }
|
|
dl.tag.warning dd { color: #58151c; margin-left: 0; }
|
|
|
|
dl.tag.note {
|
|
background-color: #fff3cd;
|
|
border: 1px solid #ffecb5;
|
|
border-left: 4px solid #ffc107;
|
|
border-radius: 0.375rem;
|
|
padding: 0.75rem 1rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
dl.tag.note dt { color: #664d03; }
|
|
dl.tag.note dd { color: #664d03; margin-left: 0; }
|
|
|
|
/* === Misc === */
|
|
|
|
p.hint_directive { color: #dc3545; font-style: italic; }
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--pasdoc-border-color);
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.appinfo {
|
|
float: right;
|
|
text-align: right;
|
|
margin-bottom: 1rem;
|
|
font-size: 0.8rem;
|
|
color: var(--pasdoc-muted);
|
|
}
|
|
|
|
img { border: 0; }
|
|
|
|
acronym.mispelling { background-color: #f00; }
|
|
|
|
/*
|
|
input#search_text { }
|
|
input#search_submit_button { }
|
|
*/
|
|
|
|
.source_position {
|
|
font-size: 80%;
|
|
color: gray;
|
|
}
|
|
|
|
.show-members-toggles {
|
|
margin: 0.75em 0;
|
|
padding: 0.4em 0.75em;
|
|
background: var(--pasdoc-code-bg);
|
|
border: 1px solid var(--pasdoc-border-color);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.show-members-toggles .show-members-toggles-label {
|
|
color: var(--pasdoc-muted);
|
|
margin-right: 0.75em;
|
|
}
|
|
.show-members-toggles label { margin-right: 1em; user-select: none; cursor: pointer; }
|
|
|
|
/* === Search form === */
|
|
|
|
.search-form { white-space: nowrap; }
|
|
.search-input input {
|
|
max-width: 80%;
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.search-input input:focus {
|
|
border-color: var(--pasdoc-accent);
|
|
outline: 0;
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
.search-input input, .search-button { display: inline-block; vertical-align: middle; }
|
|
.search-input { display: inline-block; }
|
|
|
|
/* === User-created tables (@table tag) === */
|
|
|
|
/* Style for table created by @table tags:
|
|
just some thin border.
|
|
|
|
This way we have some borders around the cells
|
|
(so cells are visibly separated), but the border
|
|
"blends with the background" so it doesn't look too ugly.
|
|
Hopefully it looks satisfactory in most cases and for most
|
|
people.
|
|
|
|
We add padding for cells, otherwise they look too close.
|
|
This is normal thing to do when border-collapse is set to
|
|
collapse (because this eliminates spacing between cells).
|
|
*/
|
|
table.table_tag { border-collapse: collapse; }
|
|
table.table_tag td, table.table_tag th {
|
|
border: 1px solid var(--pasdoc-border-color);
|
|
padding: 0.5rem;
|
|
}
|
|
table.table_tag th {
|
|
background-color: var(--pasdoc-sidebar-bg);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Do not make extra vertical space at the beginning/end of table cells.
|
|
We need ">" selector, to not change paragraphs inside lists inside
|
|
table cells. */
|
|
table.table_tag td > p:first-child,
|
|
table.table_tag th > p:first-child,
|
|
td.itemdesc > p:first-child { margin-top: 0; }
|
|
|
|
table.table_tag td > p:last-child,
|
|
table.table_tag th > p:last-child,
|
|
td.itemdesc > p:last-child { margin-bottom: 0; }
|