/* craftdesign.group fossil skin
A dark rendering of Fossil's default skin: same layout, same sizes, same
menu band and submenu row. Colors are chosen for WCAG AA contrast on a
near-black page: body text 13:1, muted text 7:1, links 7:1.
Functional dark-theme overrides for Fossil's hardcoded light colors
(timeline graph, diffs, chat, forum, tickets) are kept at the end. */
:root {
--bg: #1c1e22; /* page */
--surface: #272a30; /* menu band, cards, code blocks */
--surface2: #31353d; /* hover states, selected rows */
--border: #41454e;
--text: #e8e9eb; /* 13:1 on --bg */
--muted: #b3b8c0; /* 7.3:1 on --bg */
--link: #7fb6ef; /* 7.2:1 on --bg; Fossil default's #3779BF, lightened */
--link-hover: #a3cbf5;
--title: #8cbdf0; /* project title, like the default's #4183C4 */
--active: #f08a3c; /* active menu underline; default's #D26911, lightened */
--green: #6fd48f;
--red: #f08a7e;
--yellow: #f2c94c;
--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
color-scheme: dark;
}
/* Base, matching the default skin's sizing */
body {
margin: 0 auto;
background-color: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 16px;
line-height: 1.45;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:visited { color: #a6b8e8; }
code, pre, tt, kbd, samp, var { font-family: var(--mono); }
code, tt, kbd, samp { font-size: 0.94em; }
pre { font-size: 0.92em; line-height: 1.35; overflow-x: auto; }
hr { border: none; border-top: 1px solid var(--border); }
blockquote { border-left: 3px solid var(--border); margin: 0.5em 0; padding: 0.1em 1em; }
img { max-width: 100%; }
/* Title area above the menu bar */
header { display: flex; align-items: center; gap: 14px; padding: 14px 0 12px; }
.skip-nav {
position: absolute; top: -100%; left: 0;
background: var(--link); color: #0b0d10;
padding: 0.5rem 1.25rem; font-weight: 600; z-index: 9999;
border-radius: 0 0 6px 0;
}
.skip-nav:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }
div.logo { display: flex; flex-shrink: 0; }
div.logo img, img.logo-mark { width: 48px; height: 48px; object-fit: cover; display: block; border-radius: 6px; }
.hub-link:hover img { opacity: 0.85; }
.title { min-width: 0; color: var(--title); line-height: 1.2; }
.title h1, .title .project-name {
display: inline;
font-size: 2.2em;
font-weight: bold;
color: var(--title);
text-decoration: none;
}
.title .project-name:hover { color: var(--link-hover); text-decoration: none; }
.title h1:after, .title .project-name:after {
content: " / "; color: var(--muted); font-weight: normal;
}
span.page-title { font-size: 18px; color: var(--text); }
h1.page-title {
font-size: 1.6em; margin-bottom: 0; display: none; color: var(--text);
}
/* Home pages carry their own heading; Fossil's "index" / "Home" title is noise */
h1.page-title.home-title { display: none !important; }
/* Long document titles go in the body instead of the title bar */
.artifact h1.page-title, .dir h1.page-title, .doc h1.page-title, .wiki h1.page-title { display: block; }
.artifact .title > .page-title, .dir .title > .page-title,
.doc .title > .page-title, .wiki .title > .page-title { display: none; }
.artifact .title h1:after, .dir .title h1:after, .doc .title h1:after, .wiki .title h1:after,
.artifact .title .project-name:after, .dir .title .project-name:after,
.doc .title .project-name:after, .wiki .title .project-name:after { content: ""; }
.status { margin-left: auto; font-size: 0.9em; }
.status a { color: var(--muted); }
.status a:hover { color: var(--text); }
/* Main menu band */
.mainmenu {
clear: both;
background: var(--surface) linear-gradient(#2d3037, var(--surface)) repeat-x;
border: 1px solid var(--border);
border-radius: 5px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
z-index: 21;
}
.mainmenu a {
display: inline-block;
line-height: 1.4;
color: var(--muted);
text-decoration: none;
border-right: 1px solid var(--border);
font-weight: 500;
}
.mainmenu a.active, .mainmenu a:hover {
color: var(--text);
border-bottom: 2px solid var(--active);
text-decoration: none;
}
#hbbtn { font-size: 1.15em; min-width: 44px; text-align: center; }
#hbbtn[aria-expanded="true"] { color: var(--text); background: var(--surface2); }
/* Hamburger dropdown (hbmenu.js toggles display; a11y.js sets --nav-bottom) */
nav#hbdrop {
background-color: var(--surface);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 0.5em 0.5em;
display: none;
font-size: 0.95em;
position: fixed;
top: var(--nav-bottom, 88px);
left: 0; right: 0;
z-index: 200;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
overflow-x: hidden;
max-height: 75vh;
overflow-y: auto;
}
ul#sitemap { padding: 0.75rem 1.25rem; }
ul#sitemap > li { margin-bottom: 0.5rem; break-inside: avoid; }
ul#sitemap > li > a { font-weight: 600; color: var(--text); }
ul#sitemap ul { margin: 0.2rem 0 0 1rem; padding: 0; list-style: none; }
ul#sitemap ul li a { color: var(--link); }
nav#hbdrop ul#sitemap { column-width: 16em; column-gap: 2rem; }
nav#hbdrop a { display: inline-block; padding: 0.2rem 0; min-height: 32px; }
ul#sitemap.columns { overflow-x: hidden; }
/* Submenu row, like the default: a horizontal strip under the menu band */
.submenu, .sectionmenu {
font-size: 0.9em;
padding: 8px 0;
margin-bottom: 4px;
border-bottom: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
}
.submenu a, .submenu label, .sectionmenu a {
padding: 6px 10px;
text-decoration: none;
color: var(--link);
border: 1px solid transparent;
border-radius: 5px;
white-space: nowrap;
}
.submenu > a:first-child { margin-left: -10px; }
.submenu a:hover, .submenu label:hover, .sectionmenu a:hover {
border-color: var(--border);
background: var(--surface);
color: var(--text);
text-decoration: none;
}
span.submenuctrl, span.submenuctrl input, select.submenuctrl { color: var(--muted); }
span.submenuctrl { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.submenuckbox { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text); cursor: pointer; }
.submenu select, .submenu input[type=text], .sectionmenu select, .sectionmenu input[type=text] {
width: auto;
font-size: 0.95em;
padding: 0.3em 0.5em;
}
.section {
font-size: 1em; font-weight: bold;
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 3px 3px 0 0;
padding: 9px 10px 10px;
margin: 10px 0;
}
.sectionmenu {
border: 1px solid var(--border);
border-radius: 0 0 3px 3px;
border-top: 0;
margin-top: -10px;
margin-bottom: 10px;
}
/* Content */
.content { padding: 12px 0; color: var(--text); }
.content h1 { font-size: 1.60em; color: var(--text); }
.content h2 { font-size: 1.45em; color: var(--text); }
.content h3 { font-size: 1.15em; color: var(--text); }
.content h4 { font-size: 1.05em; color: var(--text); }
.content h5 { font-size: 1.00em; color: var(--text); }
.content pre, table.numbered-lines > tbody > tr { hyphens: none; line-height: 1.3; }
.content ul:not(.browser) > li { list-style-type: disc; }
div.filetree ul li.dir, div.filetree ul li.subdir, div.filetree ul li.file { list-style-type: none; }
th { text-align: left; }
/* User content: wiki, embedded docs, forum posts */
.markdown blockquote, p.blockquote, .sidebar {
background-color: var(--surface);
border-left: 4px solid var(--link);
}
div.sidebar { outline: 1em solid var(--bg); }
.artifact > .content > p > code, .artifact > .content > .markdown > p > code, .artifact > .content > .fossil-doc > p > code,
.dir > .content > p > code, .dir > .content > .markdown > p > code,
.doc > .content > p > code, .doc > .content > .markdown > p > code, .doc > .content > .fossil-doc > p > code,
.forum > .content .markdown > p > code,
.wiki > .content > p > code, .wiki > .content > .markdown > p > code, .wiki > .content > .fossil-doc > p > code,
.content li > code, .content td > code {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 4px;
}
.artifact > .content > pre, .artifact > .content > .markdown > pre, .artifact > .content > .fossil-doc > pre,
.dir > .content > pre, .dir > .content > .markdown > pre,
.doc > .content > pre, .doc > .content > .markdown > pre, .doc > .content > .fossil-doc > pre,
.forum > .content .markdown > pre,
.wiki > .content > pre, .wiki > .content > .markdown > pre, .wiki > .content > .fossil-doc > pre,
pre.verbatim, pre.textPlain {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px 10px;
}
pre.verbatim { white-space: pre-wrap; }
.artifact > .content table, .dir > .content table, .doc > .content table, .wiki > .content table,
.forum > .content .markdown table {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 0.5em;
border-spacing: 0;
padding: 6px;
}
.artifact > .content th, .dir > .content th, .doc > .content th, .wiki > .content th,
.forum > .content .markdown th {
border-bottom: 1px solid var(--border);
background-color: var(--surface2);
padding: 4px 6px;
}
.artifact > .content tr:nth-child(odd) td, .dir > .content tr:nth-child(odd) td,
.doc > .content tr:nth-child(odd) td, .wiki > .content tr:nth-child(odd) td {
background-color: #2b2e34;
}
.artifact > .content td, .dir > .content td, .doc > .content td, .wiki > .content td,
.forum > .content .markdown td { padding: 4px 6px; }
textarea.wikiedit { font-size: 1.1em; }
/* Forms */
input[type=text], input[type=password], input[type=email], input[type=search],
input[type=number], textarea, select {
background: #15171a;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text);
font-family: var(--font);
font-size: 1em;
padding: 0.35em 0.6em;
}
textarea { font-family: var(--mono); }
input:focus, textarea:focus, select:focus { border-color: var(--link); outline: none; }
input[type=submit], input[type=button], button {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text);
cursor: pointer;
font-family: var(--font);
font-size: 1em;
padding: 0.35em 1em;
}
input[type=submit]:hover, input[type=button]:hover, button:hover {
border-color: var(--muted);
background: #3b4049;
}
input[type=submit]:disabled, input[type=button]:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.mainmenu a:focus-visible { outline-offset: -3px; }
/* Footer */
footer {
border-top: 1px solid var(--border);
padding: 10px;
font-size: 0.85em;
margin-top: 10px;
color: var(--muted);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Forum */
.forum a:visited { color: #a6b8e8; }
div.forumSel {
animation: 1s linear 0s sel-fade;
background-color: var(--bg);
border-left: 4px solid var(--link);
}
@keyframes sel-fade { from { background-color: var(--surface2); } to { background-color: var(--bg); } }
.forum form input { margin: 0.5em 0; }
div.forumTime, div.forumHier, div.forumHierRoot {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 4px;
color: var(--text) !important;
}
div.forumTime.forumSel, div.forumHier.forumSel { border-color: var(--link) !important; }
div.forumObs { opacity: 0.75; }
div.forumPostBody, div.forumPostBody h1, div.forumPostBody h2, div.forumPostBody h3 { color: var(--text) !important; }
.forum-post-collapser {
border-color: var(--border) !important;
background: var(--surface) !important;
color: var(--muted) !important;
}
.forum-post-collapser:hover { background: var(--surface2) !important; color: var(--text) !important; }
div.searchForm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1em 0; }
/* Tickets and reports */
table.report { cursor: auto; border: 1px solid var(--border); border-radius: 0.5em; margin: 1em 0; }
.report td, .report th { border: 0; font-size: 0.9em; padding: 8px 10px; }
.report th { cursor: pointer; background: var(--surface); }
.report thead + tbody tr:hover { background-color: var(--surface2) !important; }
body.report table.report tr td { color: var(--text) !important; }
body.report table.report a { color: var(--link) !important; }
td.tktDspLabel { width: 70px; text-align: right; overflow: hidden; color: var(--muted) !important; }
td.tktDspValue {
text-align: left; vertical-align: top;
background-color: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
td.tktDspValue pre { white-space: pre-wrap; }
/* Timeline */
span.timelineDetail { font-size: 90%; }
div.timelineDate { font-weight: bold; white-space: nowrap; color: var(--muted); }
table.timelineTable { padding: 0 3px; }
table.timelineTable tr { border-radius: 1em; }
.timelineModernCell, .timelineColumnarCell, .timelineDetailCell { border-radius: 0.5em; }
.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] { background-color: var(--surface); }
.timelineModernDetail { opacity: 1; color: var(--muted); font-size: 0.9em; }
.timelineModernComment { color: var(--text); }
td.timelineTime { color: var(--muted); font-family: var(--mono); font-size: 0.9em; white-space: nowrap; }
span.timelineHash { font-family: var(--mono); }
tr.timelineSelected, tr.timelineSecondary { background-color: unset; }
tr.timelineSelected td, span.timelineSelected { background-color: #4a3a2a !important; }
tr.timelineSecondary td, span.timelineSecondary { background-color: #2a3a4a !important; }
tr.timelineCurrent td:first-child, tr.timelineSecondary td:first-child, tr.timelineSelected td:first-child {
border-top-left-radius: 1em; border-bottom-left-radius: 1em;
}
tr.timelineCurrent td:last-child, tr.timelineSecondary td:last-child, tr.timelineSelected td:last-child {
border-top-right-radius: 1em; border-bottom-right-radius: 1em;
}
tr.timelineCurrent td { border-top: 1px dashed var(--muted); border-bottom: 1px dashed var(--muted); }
tr.timelineCurrent td:first-child { border-left: 1px dashed var(--muted); }
tr.timelineCurrent td:last-child { border-right: 1px dashed var(--muted); }
/* Timeline graph: Fossil hardcodes black lines and white nodes */
.tl-node { background: var(--link) !important; border-color: var(--text) !important; }
.tl-node.leaf:after { background: var(--bg) !important; }
.tl-node.closed-leaf svg { color: var(--bg) !important; }
.tl-line { background: var(--muted) !important; }
.tl-line.warp { background: var(--yellow) !important; }
.tl-line.cherrypick.h { border-top-color: var(--muted) !important; background: transparent !important; }
.tl-line.cherrypick.v, .tl-line.dotted.v { border-left-color: var(--muted) !important; background: transparent !important; }
.tl-arrow.u, .tl-arrow.u.sm { border-bottom-color: var(--muted) !important; }
.tl-arrow.merge.l, .tl-arrow.cherrypick.l { border-right-color: var(--muted) !important; }
.tl-arrow.merge.r, .tl-arrow.cherrypick.r { border-left-color: var(--muted) !important; }
.tl-arrow.warp { border-left-color: var(--yellow) !important; }
/* Branch colors are pastel inline backgrounds; darken them so text stays readable */
table.timelineTable td[style*="background"] {
background-image: linear-gradient(rgba(28,30,34,0.8), rgba(28,30,34,0.8)) !important;
}
.tl-tooltip {
background: var(--surface2) !important; color: var(--text) !important;
border-color: var(--border) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
/* Lists and tables Fossil generates */
table.sortable th, table.filelistTable th, .fileage th {
text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer;
}
table.sortable td, table.filelistTable td, .fileage td { padding: 5px 8px; border-bottom: 1px solid #2c2f35; vertical-align: top; }
table.sortable tr:hover td, .fileage tr:hover, div.filetreeline:hover { background: var(--surface) !important; }
body.branch .brlist > table > tbody > tr:hover:not(.selected) { background: var(--surface) !important; }
body.branch .brlist > table > tbody > tr.selected { background: var(--surface2) !important; }
.branch-name, span.tagDsp {
display: inline-block; background: var(--surface2); border: 1px solid var(--border);
border-radius: 3px; color: var(--link); font-family: var(--mono); font-size: 0.85em; padding: 0 0.3em;
}
/* Diffs: Fossil's built-in colors are pale pastels */
table.diff { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.9em; }
td.difflnc, td.difflna, td.difflnb { color: var(--muted); padding: 0 0.5em; text-align: right; user-select: none; border-right: 1px solid var(--border); }
td.difftext { padding: 0 0.5em; white-space: pre; }
tr.diffskip, tr.diffskip.jchunk { background: var(--surface) !important; }
tr.diffskip > td.chunkctrl .jcbutton { background: var(--surface2) !important; color: var(--muted) !important; border-radius: 3px; }
tr.diffskip > td.chunkctrl .jcbutton:hover { color: var(--text) !important; }
td.diffmkrl, td.diffmkrr, td.diffmkru { color: var(--muted); }
tr.diffadd td { background: rgba(111,212,143,0.10); }
tr.diffrm td { background: rgba(240,138,126,0.10); }
tr.diffchng td { background: rgba(242,201,76,0.07); }
span.diffadd { color: var(--green); }
span.diffrm { color: var(--red); }
span.diffchng { color: var(--yellow); }
td.diffln ins, td.difftxt ins, table.diff pre > ins { background-color: rgba(111,212,143,0.16) !important; }
td.diffln del, td.difftxt del, table.diff pre > del { background-color: rgba(240,138,126,0.16) !important; }
td.difftxt del > del, table.diff pre > del > del { background-color: rgba(240,138,126,0.32) !important; }
td.difftxt ins > ins, table.diff pre > ins > ins { background-color: rgba(111,212,143,0.32) !important; }
td.difftxt del > del.edit, td.difftxt ins > ins.edit,
table.diff pre > del > del.edit, table.diff pre > ins > ins.edit { background-color: rgba(127,182,239,0.25) !important; }
/* Annotate / blame: inline pastel backgrounds from Fossil JS */
td.annotateDate, td.annotateUser { color: var(--muted); font-family: var(--mono); font-size: 0.85em; padding: 0 0.5em; white-space: nowrap; border-right: 1px solid var(--border); }
pre span[style*="background"], li span[style*="background"] {
background-image: linear-gradient(rgba(28,30,34,0.7), rgba(28,30,34,0.7)) !important;
border-radius: 3px; padding: 0.1em 0.25em;
}
/* Misc Fossil UI elements with hardcoded light colors */
div.debug { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; padding: 0.75rem; }
span.error { background: rgba(242,201,76,0.18) !important; color: var(--yellow) !important; padding: 0.1em 0.25em; border-radius: 3px; }
mark { background: rgba(242,201,76,0.25); color: var(--text); padding: 0.1em 0.25em; border-radius: 3px; }
div.sideboxTitle { color: var(--title); font-weight: 600; }
div.sidebox { background: var(--surface); border: 1px solid var(--border) !important; border-radius: 4px; margin: 0 0 1em 1.5em; padding: 0.75em; }
.disabled { color: var(--red); }
.modpending { color: var(--yellow); }
.fossil-tooltip.help-buttonlet-content { background-color: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.fossil-tooltip { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; }
td.capsumRead { background: rgba(111,212,143,0.15) !important; color: var(--green); }
td.capsumWrite { background: rgba(242,201,76,0.15) !important; color: var(--yellow); }
td.capsumOff { background: rgba(179,184,192,0.1) !important; color: var(--muted); }
table.login_out { margin: 1em 0; }
td.login_out_label { color: var(--muted); padding: 0.4em 0.75em 0.4em 0; }
.help-buttonlet { color: var(--link); cursor: pointer; }
/* Wiki / file editor tabs */
.tab-container .tab-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--border); }
.tab-container .tab-button {
padding: 0.4em 0.9em; border: 1px solid transparent; border-bottom: none; border-radius: 5px 5px 0 0;
background: transparent; color: var(--muted); font-family: var(--font); font-size: 0.95em; cursor: pointer; margin-bottom: -1px;
}
.tab-container .tab-button:hover { color: var(--text); background: var(--surface); }
.tab-container .tab-button.selected { color: var(--text); background: var(--surface); border-color: var(--border); border-bottom-color: var(--surface); }
#fossil-status-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-family: var(--mono); font-size: 0.85em; padding: 0.4em 0.75em; margin: 0.5em 0; }
.wikiedit-options, .fileedit-options { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.5em; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.5em; }
.wikiedit-options .input-with-label, .fileedit-options .input-with-label { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
#wikiedit-tab-content textarea, #fileedit-tab-content textarea { min-height: 300px; width: 100%; }
.tab-container fieldset { border: 1px solid var(--border); border-radius: 4px; }
.tab-container fieldset legend { color: var(--muted); }
button.wikiedit-content-reload, button.fileedit-content-reload { min-width: unset !important; max-width: unset !important; }
/* Chat: Fossil sets inline pastel backgrounds per user */
body.chat .message-widget-content[style*="background"],
body.chat .message-widget-tab[style*="background"] {
background-image: linear-gradient(rgba(28,30,34,0.75), rgba(28,30,34,0.75)) !important;
}
body.chat .message-widget-content {
background: var(--surface) !important; border: 1px solid var(--border) !important;
border-radius: 6px !important; color: var(--text) !important; padding: 0.5em 0.75em !important;
}
body.chat .message-widget-tab { background: transparent !important; color: var(--muted) !important; border: none !important; font-size: 0.9em !important; }
body.chat .message-widget-tab[style*="background"] { background-image: none !important; }
body.chat .message-widget-tab .xfrom { color: var(--link) !important; font-weight: 600 !important; }
body.chat #chat-input-line-wrapper { border: 1px solid var(--border) !important; border-radius: 6px !important; background: #15171a !important; }
body.chat #chat-input-line-wrapper:focus-within { border-color: var(--link) !important; }
body.chat .chat-input-field { border: none !important; background: transparent !important; color: var(--text) !important; font-family: var(--font) !important; font-size: 1em !important; }
body.chat .cbutton { border: 1px solid var(--border) !important; background: var(--surface) !important; border-radius: 4px !important; }
body.chat .cbutton:hover { background: var(--surface2) !important; }
body.chat fieldset { border: 1px solid var(--border) !important; border-radius: 4px !important; background: var(--surface) !important; }
body.chat .menu-entry { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
body.chat .menu-entry:hover, body.chat .menu-entry.parent { background: var(--surface2) !important; }
body.chat .message-widget .match { background: rgba(242,201,76,0.25) !important; color: var(--text) !important; }
body.chat .chat-message-popup { background: var(--surface2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
body.chat .message-widget-content img { max-width: 100% !important; border-radius: 4px !important; }
/* Screen sizes, as in the default skin */
@media screen and (max-width: 600px) {
body { padding-left: 12px; padding-right: 12px; }
.content { font-size: 0.95em; }
header { gap: 10px; padding: 10px 0 8px; }
div.logo img, img.logo-mark { width: 36px; height: 36px; }
.title h1, .title .project-name { font-size: 1.5em; }
.title > .page-title { display: inline; }
.artifact .title > .page-title, .dir .title > .page-title,
.doc .title > .page-title, .wiki .title > .page-title { display: none; }
.mainmenu a { padding: 8px 10px; }
.mainmenu { padding: 4px; }
nav#hbdrop ul#sitemap, ul#sitemap.columns { columns: 1 !important; column-width: auto !important; }
.submenu { padding: 6px 0; }
td.timelineTime { font-size: 0.8em; }
}
@media screen and (min-width: 600px) {
body { padding-left: 20px; padding-right: 20px; }
.mainmenu a { padding: 8px 20px; }
.mainmenu { padding: 10px; }
.content dd, .content dt, .content div, .content li, .content p, .content table { line-height: 1.45em; }
/* Keep running text a comfortable width on wide screens */
.doc > .content, .wiki > .content, .forum > .content, .artifact > .content { max-width: 70em; }
.doc > .content > p, .doc > .content > .markdown > p, .doc > .content > .fossil-doc > p,
.doc > .content > ol, .doc > .content > ul, .doc > .content > .markdown > ol, .doc > .content > .markdown > ul,
.wiki > .content > p, .wiki > .content > .markdown > p, .wiki > .content > .fossil-doc > p,
.wiki > .content > ol, .wiki > .content > ul, .wiki > .content > .markdown > ol, .wiki > .content > .markdown > ul,
.artifact > .content > .markdown > p, .artifact > .content > .markdown > ol, .artifact > .content > .markdown > ul,
.doc > .content > .markdown > table, .wiki > .content > .markdown > table, .artifact > .content > .markdown > table {
margin-left: 30pt; margin-right: 30pt;
}
.doc > .content > pre, .doc > .content > .markdown > pre, .doc > .content > .fossil-doc > pre,
.wiki > .content > pre, .wiki > .content > .markdown > pre,
.artifact > .content > .markdown > pre { margin-left: 40pt; margin-right: 30pt; }
.forum > .content .markdown > pre { margin-left: 20pt; }
.doc > .content h1, .wiki .content h1, .artifact .content h1 { margin-left: 10pt; }
.doc > .content h2, .wiki .content h2, .artifact .content h2 { margin-left: 15pt; }
.doc > .content h3, .wiki .content h3, .artifact .content h3 { margin-left: 20pt; }
.doc > .content > blockquote, .wiki > .content > blockquote { margin-left: 50pt; }
.doc > .content > .markdown > blockquote, .wiki > .content > .markdown > blockquote { margin-left: 40pt; }
.content .pikchr-wrapper, div.pikchr-wrapper.indent:not(.source) { margin-left: 40pt; }
div.pikchr-wrapper.center:not(.source), div.pikchr-wrapper.float-right:not(.source) { margin-left: 0; }
}