/* 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.
Instrument Sans (OFL) is self-hosted from /var/fossil/www/fonts via Caddy. */
@font-face {
font-family: "Instrument Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/instrument-sans-400.woff2) format("woff2");
}
@font-face {
font-family: "Instrument Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/instrument-sans-600.woff2) format("woff2");
}
@font-face {
font-family: "Instrument Sans";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/instrument-sans-700.woff2) format("woff2");
}
@font-face {
font-family: "Instrument Sans";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/instrument-sans-400-italic.woff2) format("woff2");
}
: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: "Instrument Sans", 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: 1.25rem 1.5rem 1.5rem;
margin: 0;
list-style: none;
column-width: 14em;
column-gap: 2.5rem;
}
ul#sitemap > li {
list-style: none;
margin: 0 0 1.1rem;
break-inside: avoid;
}
ul#sitemap > li > a {
display: inline-block;
font-size: 0.78em;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
padding: 0.3rem 0;
}
ul#sitemap > li > a:hover { color: var(--text); text-decoration: none; }
ul#sitemap ul { margin: 0.15rem 0 0; padding: 0; list-style: none; }
ul#sitemap ul li { list-style: none; }
ul#sitemap ul li a {
display: block;
color: var(--text);
padding: 0.3rem 0.6rem;
margin-left: -0.6rem;
border-radius: 4px;
min-height: 32px;
}
ul#sitemap ul li a:hover { background: var(--surface2); color: var(--link-hover); text-decoration: none; }
nav#hbdrop ul#sitemap { column-width: 14em; }
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;
}
.submenu select, .sectionmenu select { padding-right: 1.9em; }
.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); }
select {
appearance: none;
-webkit-appearance: none;
padding-right: 2em;
line-height: 1.3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b3b8c0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.6em center;
background-size: 12px;
cursor: pointer;
}
select:hover { border-color: var(--muted); }
select option { background: #15171a; color: var(--text); }
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; }
/* Chat toolbar: Fossil renders the buttons as emoji; mask them with icons, keep the spans intact */
body.chat #chat-buttons-wrapper > .cbutton {
position: relative !important;
font-size: 0 !important;
color: transparent !important;
min-width: 44px !important; max-width: 44px !important;
min-height: 36px !important; height: 36px !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
}
body.chat #chat-buttons-wrapper > .cbutton::after {
content: ""; position: absolute; inset: 0; margin: auto;
width: 22px; height: 22px;
background-color: var(--muted);
-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
body.chat #chat-buttons-wrapper > .cbutton:hover { background: var(--surface2) !important; border-color: var(--muted) !important; }
body.chat #chat-buttons-wrapper > .cbutton:hover::after { background-color: var(--text); }
body.chat #chat-buttons-wrapper > #chat-button-submit { background: var(--link) !important; border-color: var(--link) !important; min-width: 64px !important; max-width: 64px !important; }
body.chat #chat-buttons-wrapper > #chat-button-submit::after { background-color: #0b0d10; }
body.chat #chat-buttons-wrapper > #chat-button-submit:hover { background: var(--link-hover) !important; }
body.chat #chat-button-preview { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22black%22%3E%3Cpath d=%22M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z%22/%3E%3C/svg%3E"); }
body.chat #chat-button-search { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22black%22%3E%3Cpath d=%22M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z%22/%3E%3C/svg%3E"); }
body.chat #chat-button-attach { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22black%22%3E%3Cpath d=%22M209.66,122.34a8,8,0,0,1,0,11.32l-82.05,82a56,56,0,0,1-79.2-79.21L147.67,35.73a40,40,0,1,1,56.61,56.55L105,193A24,24,0,1,1,71,159L154.3,74.38A8,8,0,1,1,165.7,85.6L82.39,170.31a8,8,0,1,0,11.27,11.36L192.93,81A24,24,0,1,0,159,47L59.76,147.68a40,40,0,1,0,56.53,56.62l82.06-82A8,8,0,0,1,209.66,122.34Z%22/%3E%3C/svg%3E"); }
body.chat #chat-button-settings { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22black%22%3E%3Cpath d=%22M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z%22/%3E%3C/svg%3E"); }
body.chat #chat-button-submit { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22black%22%3E%3Cpath d=%22M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14,0-.07-40.06-82.3,48-48a8,8,0,0,0-11.31-11.31l-48,48L24.08,98.25l-.07,0,.14,0L216,40Z%22/%3E%3C/svg%3E"); }
/* 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: 10px 12px; }
.mainmenu { padding: 0; }
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: 12px 20px; }
.mainmenu { padding: 0; }
.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; }
}