css/docs.scss - stormcrawler-site - Git at Google

 ---
 ---

 // ----------------------------------------------------------------------------
 // Apache StormCrawler — versioned documentation stylesheet ("Il Crawl").
 // Mirror of the design-system Asciidoctor theme (site/asciidoc-theme/
 // stormcrawler.css); shared by every docs/<version>/ page in place of the
 // embedded default stylesheet, so one file restyles all releases at once.
 // Extra rules bridge the icons=font markup of the generated pages
 // (admonition labels render from the icon title attribute).
 // ----------------------------------------------------------------------------


 @font-face {
 	font-family: "Archivo";
 	font-style: normal;
 	font-weight: 100 900;
 	font-display: swap;
 	src: url("/css/resources/archivo-latin-variable.woff2") format("woff2");
 }

 @font-face {
 	font-family: "JetBrains Mono";
 	font-style: normal;
 	font-weight: 100 800;
 	font-display: swap;
 	src: url("/css/resources/jetbrains-mono-latin-variable.woff2") format("woff2");
 }

 :root {
 	--bg: #F7F7F3;
 	--ink: #191A16;
 	--copy: #474C42;
 	--muted: #71766A;
 	--line: #DBDDD2;
 	--panel: #EFEFE8;
 	--code-bg: #1A1918;
 	--code-fg: #D8D6D0;
 	--acc: #A32830;
 	--acc-soft: #FBE9EA;
 	--red: #C33540;
 }

 [data-theme="dark"] {
 	--bg: #141312;
 	--ink: #F5F3EF;
 	--copy: #B8B4AD;
 	--muted: #8D8983;
 	--line: #2E2B28;
 	--panel: #1A1917;
 	--code-bg: #0E0D0B;
 	--code-fg: #D8D6D0;
 	--acc: #E07078;
 	--acc-soft: #3B1518;
 	--red: #E07078;
 }

 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }

 html { scroll-padding-top: 76px; }

 body {
 	font-family: "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 	background: var(--bg);
 	color: var(--copy);
 	font-size: 16px;
 	line-height: 1.7;
 }

 a {
 	color: var(--acc);
 	text-decoration: none;
 }

 a:hover {
 	text-decoration: underline;
 	text-underline-offset: 3px;
 }

 // --- Layout: TOC a sinistra (:toc: left → body.toc2) ------------------------

 body.toc2 { padding-left: 280px; }

 #toc.toc2 {
 	position: fixed;
 	top: 60px;
 	left: 0;
 	bottom: 0;
 	width: 280px;
 	overflow-y: auto;
 	padding: 28px 18px 40px 24px;
 	border-right: 1px solid var(--line);
 	background: var(--bg);
 	font-size: 13.5px;
 }

 #toc #toctitle {
 	font-weight: 700;
 	font-size: 11px;
 	letter-spacing: .1em;
 	text-transform: uppercase;
 	color: var(--muted);
 	margin-bottom: 12px;
 }

 #toc ul { list-style: none; }

 #toc a {
 	display: block;
 	color: var(--muted);
 	padding: 5px 10px;
 	border-radius: 7px;
 	border-left: 2px solid transparent;
 }

 #toc a:hover {
 	color: var(--ink);
 	background: var(--panel);
 	text-decoration: none;
 }

 #toc a.active {
 	color: var(--ink);
 	font-weight: 600;
 	background: var(--acc-soft);
 	border-left: 2px solid var(--acc);
 	border-radius: 0 7px 7px 0;
 }

 #toc ul ul { margin: 2px 0 6px 12px; }

 #toc ul ul a {
 	font-size: 12.5px;
 	padding: 3.5px 10px;
 }

 @media (max-width: 900px) {
 	body.toc2 { padding-left: 0; }

 	#toc.toc2 {
 		position: static;
 		width: auto;
 		border-right: 0;
 		border-bottom: 1px solid var(--line);
 		padding: 20px;
 	}
 }

 // --- Header & content -------------------------------------------------------

 #header,#content {
 	max-width: none;
 	padding: 0 32px 0 52px;
 }

 @media (max-width: 900px) {
 	#header,#content { padding: 0 20px; }
 }

 #header { padding-top: 44px; }

 #header h1 {
 	font-weight: 800;
 	font-size: 36px;
 	letter-spacing: -.02em;
 	color: var(--ink);
 	line-height: 1.15;
 	margin-bottom: 10px;
 }

 #header .details {
 	font-size: 13px;
 	color: var(--muted);
 	border-bottom: 1px solid var(--line);
 	padding-bottom: 18px;
 	margin-bottom: 8px;
 }

 #content {
 	padding-top: 20px;
 	padding-bottom: 90px;
 }

 h2,h3,h4 {
 	color: var(--ink);
 	line-height: 1.25;
 	margin: 2.2em 0 .6em;
 	letter-spacing: -.01em;
 }

 h2 {
 	font-size: 26px;
 	font-weight: 800;
 	border-bottom: 1px solid var(--line);
 	padding-bottom: 10px;
 }

 h3 {
 	font-size: 20px;
 	font-weight: 700;
 }

 h4 {
 	font-size: 16.5px;
 	font-weight: 700;
 }

 .sect1+.sect1 { margin-top: 2.5em; }

 p,ul,ol,dl { margin-bottom: 1.1em; }

 #content ul,#content ol { margin-left: 1.3em; }

 #content li { margin-bottom: .4em; }

 b,strong { color: var(--ink); }

 // --- Code -------------------------------------------------------------------

 code {
 	font-family: "JetBrains Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
 	font-size: .875em;
 	background: var(--panel);
 	border: 1px solid var(--line);
 	border-radius: 5px;
 	padding: .1em .35em;
 	color: var(--ink);
 }

 .listingblock {
 	position: relative;
 	margin: 0 0 1.3em;
 }

 // copy button on code listings, same style as the home page copy chip
 .sc-copy {
 	position: absolute;
 	top: 8px;
 	right: 8px;
 	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
 	font-size: 11px;
 	font-weight: 600;
 	color: #fff;
 	border: 0;
 	border-radius: 100px;
 	padding: 5px 12px;
 	background: var(--red);
 	cursor: pointer;
 }

 .sc-copy:hover { background: var(--acc); }

 [data-theme="dark"] .sc-copy { color: #191A16; }

 .listingblock .title {
 	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
 	font-size: 11px;
 	font-weight: 600;
 	letter-spacing: .08em;
 	text-transform: uppercase;
 	color: var(--muted);
 	margin-bottom: 6px;
 }

 .listingblock pre {
 	background: var(--code-bg);
 	color: var(--code-fg);
 	border-radius: 12px;
 	padding: 16px 18px;
 	overflow-x: auto;
 	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
 	font-size: 13px;
 	line-height: 1.75;
 }

 .listingblock pre code {
 	background: none;
 	border: 0;
 	padding: 0;
 	color: inherit;
 	font-size: 1em;
 }

 // --- Admonitions (NOTE/TIP/IMPORTANT/WARNING/CAUTION) -----------------------

 .admonitionblock { margin: 0 0 1.3em; }

 .admonitionblock>table {
 	border-collapse: collapse;
 	width: 100%;
 	border: 1px solid var(--line);
 	border-radius: 10px;
 	overflow: hidden;
 	background: var(--bg);
 }

 .admonitionblock td.icon {
 	vertical-align: top;
 	padding: 14px 0 14px 16px;
 	width: 1%;
 }

 .admonitionblock td.icon .title {
 	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
 	font-size: 10.5px;
 	font-weight: 600;
 	letter-spacing: .08em;
 	border-radius: 100px;
 	padding: 4px 10px;
 	background: var(--panel);
 	color: var(--muted);
 	white-space: nowrap;
 }

 .admonitionblock.tip td.icon .title {
 	background: var(--acc-soft);
 	color: var(--acc);
 }

 .admonitionblock.important td.icon .title,.admonitionblock.warning td.icon .title,.admonitionblock.caution td.icon .title {
 	background: var(--acc-soft);
 	color: var(--red);
 }

 .admonitionblock td.content {
 	padding: 12px 16px;
 	font-size: 15px;
 }

 // --- Le pagine generate con icons=font emettono <i class="fa" title="..."> al posto del div.title: stessa pillola, etichetta da attr(title) ---

 .admonitionblock td.icon i {
 	font-style: normal;
 	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
 	font-size: 10.5px;
 	font-weight: 600;
 	letter-spacing: .08em;
 	border-radius: 100px;
 	padding: 4px 10px;
 	background: var(--panel);
 	color: var(--muted);
 	white-space: nowrap;
 }

 .admonitionblock td.icon i::after { content: attr(title); }

 .admonitionblock.tip td.icon i {
 	background: var(--acc-soft);
 	color: var(--acc);
 }

 .admonitionblock.important td.icon i,.admonitionblock.warning td.icon i,.admonitionblock.caution td.icon i {
 	background: var(--acc-soft);
 	color: var(--red);
 }

 // --- Tables -----------------------------------------------------------------

 table.tableblock {
 	border-collapse: collapse;
 	width: 100%;
 	margin: 0 0 1.3em;
 	font-size: 15px;
 }

 table.tableblock th,table.tableblock td {
 	text-align: left;
 	padding: 10px 12px;
 	border-bottom: 1px solid var(--line);
 }

 table.tableblock thead th {
 	background: var(--panel);
 	color: var(--ink);
 	font-weight: 700;
 }

 // --- Misc -------------------------------------------------------------------

 .quoteblock {
 	border-left: 3px solid var(--acc);
 	background: var(--panel);
 	border-radius: 0 10px 10px 0;
 	padding: 14px 18px;
 	margin: 0 0 1.3em;
 }

 hr {
 	border: 0;
 	border-top: 1px solid var(--line);
 	margin: 2em 0;
 }

 #footer {
 	max-width: none;
 	padding: 22px 32px 60px 52px;
 	border-top: 1px solid var(--line);
 	margin-top: 40px;
 }

 #footer-text {
 	font-size: 12.5px;
 	color: var(--muted);
 }

 @media print {
 	#toc.toc2 { display: none; }

 	body.toc2 { padding-left: 0; }
 }
	---
	---

	// ----------------------------------------------------------------------------
	// Apache StormCrawler — versioned documentation stylesheet ("Il Crawl").
	// Mirror of the design-system Asciidoctor theme (site/asciidoc-theme/
	// stormcrawler.css); shared by every docs/<version>/ page in place of the
	// embedded default stylesheet, so one file restyles all releases at once.
	// Extra rules bridge the icons=font markup of the generated pages
	// (admonition labels render from the icon title attribute).
	// ----------------------------------------------------------------------------


	@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/css/resources/archivo-latin-variable.woff2") format("woff2");
	}

	@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("/css/resources/jetbrains-mono-latin-variable.woff2") format("woff2");
	}

	:root {
	--bg: #F7F7F3;
	--ink: #191A16;
	--copy: #474C42;
	--muted: #71766A;
	--line: #DBDDD2;
	--panel: #EFEFE8;
	--code-bg: #1A1918;
	--code-fg: #D8D6D0;
	--acc: #A32830;
	--acc-soft: #FBE9EA;
	--red: #C33540;
	}

	[data-theme="dark"] {
	--bg: #141312;
	--ink: #F5F3EF;
	--copy: #B8B4AD;
	--muted: #8D8983;
	--line: #2E2B28;
	--panel: #1A1917;
	--code-bg: #0E0D0B;
	--code-fg: #D8D6D0;
	--acc: #E07078;
	--acc-soft: #3B1518;
	--red: #E07078;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	html { scroll-padding-top: 76px; }

	body {
	font-family: "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	background: var(--bg);
	color: var(--copy);
	font-size: 16px;
	line-height: 1.7;
	}

	a {
	color: var(--acc);
	text-decoration: none;
	}

	a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	}

	// --- Layout: TOC a sinistra (:toc: left → body.toc2) ------------------------

	body.toc2 { padding-left: 280px; }

	#toc.toc2 {
	position: fixed;
	top: 60px;
	left: 0;
	bottom: 0;
	width: 280px;
	overflow-y: auto;
	padding: 28px 18px 40px 24px;
	border-right: 1px solid var(--line);
	background: var(--bg);
	font-size: 13.5px;
	}

	#toc #toctitle {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
	}

	#toc ul { list-style: none; }

	#toc a {
	display: block;
	color: var(--muted);
	padding: 5px 10px;
	border-radius: 7px;
	border-left: 2px solid transparent;
	}

	#toc a:hover {
	color: var(--ink);
	background: var(--panel);
	text-decoration: none;
	}

	#toc a.active {
	color: var(--ink);
	font-weight: 600;
	background: var(--acc-soft);
	border-left: 2px solid var(--acc);
	border-radius: 0 7px 7px 0;
	}

	#toc ul ul { margin: 2px 0 6px 12px; }

	#toc ul ul a {
	font-size: 12.5px;
	padding: 3.5px 10px;
	}

	@media (max-width: 900px) {
	body.toc2 { padding-left: 0; }

	#toc.toc2 {
	position: static;
	width: auto;
	border-right: 0;
	border-bottom: 1px solid var(--line);
	padding: 20px;
	}
	}

	// --- Header & content -------------------------------------------------------

	#header,#content {
	max-width: none;
	padding: 0 32px 0 52px;
	}

	@media (max-width: 900px) {
	#header,#content { padding: 0 20px; }
	}

	#header { padding-top: 44px; }

	#header h1 {
	font-weight: 800;
	font-size: 36px;
	letter-spacing: -.02em;
	color: var(--ink);
	line-height: 1.15;
	margin-bottom: 10px;
	}

	#header .details {
	font-size: 13px;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
	padding-bottom: 18px;
	margin-bottom: 8px;
	}

	#content {
	padding-top: 20px;
	padding-bottom: 90px;
	}

	h2,h3,h4 {
	color: var(--ink);
	line-height: 1.25;
	margin: 2.2em 0 .6em;
	letter-spacing: -.01em;
	}

	h2 {
	font-size: 26px;
	font-weight: 800;
	border-bottom: 1px solid var(--line);
	padding-bottom: 10px;
	}

	h3 {
	font-size: 20px;
	font-weight: 700;
	}

	h4 {
	font-size: 16.5px;
	font-weight: 700;
	}

	.sect1+.sect1 { margin-top: 2.5em; }

	p,ul,ol,dl { margin-bottom: 1.1em; }

	#content ul,#content ol { margin-left: 1.3em; }

	#content li { margin-bottom: .4em; }

	b,strong { color: var(--ink); }

	// --- Code -------------------------------------------------------------------

	code {
	font-family: "JetBrains Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
	font-size: .875em;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: .1em .35em;
	color: var(--ink);
	}

	.listingblock {
	position: relative;
	margin: 0 0 1.3em;
	}

	// copy button on code listings, same style as the home page copy chip
	.sc-copy {
	position: absolute;
	top: 8px;
	right: 8px;
	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	border: 0;
	border-radius: 100px;
	padding: 5px 12px;
	background: var(--red);
	cursor: pointer;
	}

	.sc-copy:hover { background: var(--acc); }

	[data-theme="dark"] .sc-copy { color: #191A16; }

	.listingblock .title {
	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
	}

	.listingblock pre {
	background: var(--code-bg);
	color: var(--code-fg);
	border-radius: 12px;
	padding: 16px 18px;
	overflow-x: auto;
	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
	font-size: 13px;
	line-height: 1.75;
	}

	.listingblock pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: 1em;
	}

	// --- Admonitions (NOTE/TIP/IMPORTANT/WARNING/CAUTION) -----------------------

	.admonitionblock { margin: 0 0 1.3em; }

	.admonitionblock>table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--bg);
	}

	.admonitionblock td.icon {
	vertical-align: top;
	padding: 14px 0 14px 16px;
	width: 1%;
	}

	.admonitionblock td.icon .title {
	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	border-radius: 100px;
	padding: 4px 10px;
	background: var(--panel);
	color: var(--muted);
	white-space: nowrap;
	}

	.admonitionblock.tip td.icon .title {
	background: var(--acc-soft);
	color: var(--acc);
	}

	.admonitionblock.important td.icon .title,.admonitionblock.warning td.icon .title,.admonitionblock.caution td.icon .title {
	background: var(--acc-soft);
	color: var(--red);
	}

	.admonitionblock td.content {
	padding: 12px 16px;
	font-size: 15px;
	}

	// --- Le pagine generate con icons=font emettono <i class="fa" title="..."> al posto del div.title: stessa pillola, etichetta da attr(title) ---

	.admonitionblock td.icon i {
	font-style: normal;
	font-family: "JetBrains Mono",SFMono-Regular,Menlo,monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	border-radius: 100px;
	padding: 4px 10px;
	background: var(--panel);
	color: var(--muted);
	white-space: nowrap;
	}

	.admonitionblock td.icon i::after { content: attr(title); }

	.admonitionblock.tip td.icon i {
	background: var(--acc-soft);
	color: var(--acc);
	}

	.admonitionblock.important td.icon i,.admonitionblock.warning td.icon i,.admonitionblock.caution td.icon i {
	background: var(--acc-soft);
	color: var(--red);
	}

	// --- Tables -----------------------------------------------------------------

	table.tableblock {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 1.3em;
	font-size: 15px;
	}

	table.tableblock th,table.tableblock td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	}

	table.tableblock thead th {
	background: var(--panel);
	color: var(--ink);
	font-weight: 700;
	}

	// --- Misc -------------------------------------------------------------------

	.quoteblock {
	border-left: 3px solid var(--acc);
	background: var(--panel);
	border-radius: 0 10px 10px 0;
	padding: 14px 18px;
	margin: 0 0 1.3em;
	}

	hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2em 0;
	}

	#footer {
	max-width: none;
	padding: 22px 32px 60px 52px;
	border-top: 1px solid var(--line);
	margin-top: 40px;
	}

	#footer-text {
	font-size: 12.5px;
	color: var(--muted);
	}

	@media print {
	#toc.toc2 { display: none; }

	body.toc2 { padding-left: 0; }
	}