From a3fe0d8865a8377a41c6204f73fdc7f8dd1e3ef4 Mon Sep 17 00:00:00 2001
From: userdocs <16525024+userdocs@users.noreply.github.com>
Date: Wed, 2 Oct 2024 13:57:07 +0100
Subject: [PATCH] Update custom.css

---
 docs/src/styles/custom.css | 523 +++++++++++++++++++------------------
 1 file changed, 268 insertions(+), 255 deletions(-)

diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 4b3699f7b..f6a30e6f5 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -1,265 +1,265 @@
 :root {
-	--sl-color-accent-low: #002b24;
-	--sl-color-accent: #bdbdbd;
-	--sl-color-accent-high: #bdbdbd;
-	--sl-color-white: #c7a06f;
-	--sl-color-gray-1: #c17ac8;
-	--sl-color-gray-1-1: #957497;
-	--sl-color-gray-2: #b4b4b4;
-	--sl-color-gray-3: #6d6d6d;
-	--sl-color-gray-4: #c55858;
-	--sl-color-gray-5: #bdbdbd;
-	--sl-color-gray-6: #543768;
-	--sl-color-black: #15141b;
-
-	/* custom colors */
-	--sl-button-bg-primary: #347c64;
-	--sl-button-bg-secondary: #553f64;
-	--react-toggle-checked: #aa4bb3;
-
-	--details-1: #2A2A2C;
-	--details-2: #543768;
-	--details-3: #54385f;
-
-	--url-colour: #54c59f;
-	--url-colour-hover: #6cb2c7;
-
-	--code-inline-background: #aa4bb3;
-	--code-inline-color: #bdbdbd;
-	--code-inline-border: #54c59f;
-
-	--tab-background-if: #ab94b4;
-	--tab-background-oof: #54385f;
-	--tab-color-if: #111011;
-	--tab-color-oof: #828285;
-	--steps-border: #aa4bb3;
+    --sl-color-accent-low: #002b24;
+    --sl-color-accent: #bdbdbd;
+    --sl-color-accent-high: #bdbdbd;
+    --sl-color-white: #c7a06f;
+    --sl-color-gray-1: #c17ac8;
+    --sl-color-gray-1-1: #957497;
+    --sl-color-gray-2: #b4b4b4;
+    --sl-color-gray-3: #6d6d6d;
+    --sl-color-gray-4: #c55858;
+    --sl-color-gray-5: #bdbdbd;
+    --sl-color-gray-6: #543768;
+    --sl-color-black: #15141b;
+
+    /* custom colors */
+    --sl-button-bg-primary: #347c64;
+    --sl-button-bg-secondary: #553f64;
+    --react-toggle-checked: #aa4bb3;
+
+    --details-1: #2A2A2C;
+    --details-2: #543768;
+    --details-3: #54385f;
+
+    --url-colour: #54c59f;
+    --url-colour-hover: #6cb2c7;
+
+    --code-inline-background: #aa4bb3;
+    --code-inline-color: #bdbdbd;
+    --code-inline-border: #54c59f;
+
+    --tab-background-if: #ab94b4;
+    --tab-background-oof: #54385f;
+    --tab-color-if: #111011;
+    --tab-color-oof: #828285;
+    --steps-border: #aa4bb3;
 }
 
 :root[data-theme='light'] {
-	--sl-color-accent-low: #f5b5ea;
-	--sl-color-accent: #136454;
-	--sl-color-accent-high: #003c33;
-	--sl-color-white: #1d122b;
-	--sl-color-gray-1: #31154f;
-	--sl-color-gray-2: #432863;
-	--sl-color-gray-3: #634987;
-	--sl-color-gray-4: #977cbf;
-	--sl-color-gray-5: #c8bbde;
-	--sl-color-gray-6: #f1e9ff;
-	--sl-color-gray-7: #dedae6;
-	--sl-color-black: #e7e6e6;
-
-	/* custom colors */
-	--sl-button-bg-primary: #c1dad1;
-	--sl-button-bg-secondary: #beadc9;
-	--react-toggle-checked: #aa4bb3;
-
-	--details-1: #a0b494;
-	--details-2: #4c0879;
-	--details-3: #d6d6d6;
-
-	--url-colour: #660891 !important;
-	--url-colour-hover: #14574c !important;
-
-	--code-inline-background: #54c59f;
-	--code-inline-color: #000000;
-	--code-inline-border: #002b24;
-
-	--tab-background-if: #ab94b4;
-	--tab-background-oof: #54385f;
-	--tab-color-if: #111011;
-	--tab-color-oof: rgb(210, 210, 214);
-	--steps-border: #aa4bb3;
+    --sl-color-accent-low: #f5b5ea;
+    --sl-color-accent: #136454;
+    --sl-color-accent-high: #003c33;
+    --sl-color-white: #1d122b;
+    --sl-color-gray-1: #31154f;
+    --sl-color-gray-2: #432863;
+    --sl-color-gray-3: #634987;
+    --sl-color-gray-4: #977cbf;
+    --sl-color-gray-5: #c8bbde;
+    --sl-color-gray-6: #f1e9ff;
+    --sl-color-gray-7: #dedae6;
+    --sl-color-black: #e7e6e6;
+
+    /* custom colors */
+    --sl-button-bg-primary: #c1dad1;
+    --sl-button-bg-secondary: #beadc9;
+    --react-toggle-checked: #aa4bb3;
+
+    --details-1: #a0b494;
+    --details-2: #4c0879;
+    --details-3: #d6d6d6;
+
+    --url-colour: #660891 !important;
+    --url-colour-hover: #14574c !important;
+
+    --code-inline-background: #54c59f;
+    --code-inline-color: #000000;
+    --code-inline-border: #002b24;
+
+    --tab-background-if: #ab94b4;
+    --tab-background-oof: #54385f;
+    --tab-color-if: #111011;
+    --tab-color-oof: rgb(210, 210, 214);
+    --steps-border: #aa4bb3;
 }
 
 /* Theme adjustments */
 
 .sl-steps li::before {
-	border: 1px solid var(--steps-border) !important;
-	box-shadow: none !important;
-	border-radius: 0% !important;
-	line-height: 2em !important;
+    border: 1px solid var(--steps-border) !important;
+    box-shadow: none !important;
+    border-radius: 0% !important;
+    line-height: 2em !important;
 }
 
 .sl-steps li::after {
-	border: 1px solid var(--steps-border) !important;
+    border: 1px solid var(--steps-border) !important;
 
 }
 
 
 .right-sidebar.astro-67yu43on {
 
-	max-width: 100%;
+    max-width: 100%;
 }
 
 
 p a {
-	color: var(--url-colour) !important;
+    color: var(--url-colour) !important;
 }
 
 p a:hover {
-	color: var(--url-colour-hover) !important;
+    color: var(--url-colour-hover) !important;
 }
 
 [data-has-sidebar] {
-	.sl-container {
-		max-width: 100%;
-	}
+    .sl-container {
+        max-width: 100%;
+    }
 }
 
 .sl-markdown-content code:not(:where(.not-content *)) {
-	background-color: var(--code-inline-background);
-	border-radius: 3px;
-	font-size: 0.8em;
-	color: var(--code-inline-color);
-	border: 2px solid var(--code-inline-border);
+    background-color: var(--code-inline-background);
+    border-radius: 3px;
+    font-size: 0.8em;
+    color: var(--code-inline-color);
+    border: 2px solid var(--code-inline-border);
 }
 
 
 .sl-markdown-content p ul li::marker {
-	content: "🔹 ";
+    content: "🔹 ";
 }
 
 .sl-markdown-content ul li::marker {
-	content: "⯀ ";
+    content: "⯀ ";
 }
 
 .sl-markdown-content ul li ul li::marker {
-	content: "￭ ";
+    content: "￭ ";
 }
 
 .tab::marker {
-	content: "" !important;
+    content: "" !important;
 }
 
 /* resize the card svg logos */
 
 .card-logos-image * {
-	max-height: 100px;
-	min-height: 100px;
-	width: 100%;
+    max-height: 100px;
+    min-height: 100px;
+    width: 100%;
 }
 
 /* front page card stuff */
 
 .float-container {
-	padding: 0px;
+    padding: 0px;
 }
 
 .float-child {
-	padding: 100px;
+    padding: 100px;
 }
 
 .float-child.card-image {
-	width: 50%;
-	max-width: 100px;
-	min-height: 150px;
-	float: left;
-	padding: 0px;
+    width: 50%;
+    max-width: 100px;
+    min-height: 150px;
+    float: left;
+    padding: 0px;
 }
 
 .float-child.card-text {
-	margin: auto;
-	padding: 0px;
-	padding-left: 10px;
+    margin: auto;
+    padding: 0px;
+    padding-left: 10px;
 }
 
 /* front page button stuff */
 
 .title {
-	align-items: left !important;
-	margin-left: 31% !important;
+    align-items: left !important;
+    margin-left: 31% !important;
 }
 
 .card-image {
-	margin-right: 5% !important;
-	margin-left: 2% !important;
-	width: 150px !important;
-	max-width: 150px;
-	padding: 0px;
+    margin-right: 5% !important;
+    margin-left: 2% !important;
+    width: 150px !important;
+    max-width: 150px;
+    padding: 0px;
 
 }
 
 .sl-flex.actions.astro-jbfsktt5 a {
-	min-width: 45%;
-	border: 3px solid var(--sl-color-white);
+    min-width: 45%;
+    border: 3px solid var(--sl-color-white);
 
 }
 
 .sl-flex.action.primary.astro-yjy4zhro {
-	border-radius: 3px;
-	background-color: var(--sl-button-bg-primary) !important;
-	padding: 2px 2px 4px 10px !important;
-	border-color: var(--sl-button-bg-secondary) !important;
-	color: var(--sl-color-accent) !important;
+    border-radius: 3px;
+    background-color: var(--sl-button-bg-primary) !important;
+    padding: 2px 2px 4px 10px !important;
+    border-color: var(--sl-button-bg-secondary) !important;
+    color: var(--sl-color-accent) !important;
 }
 
 .sl-flex.action.secondary.astro-yjy4zhro {
-	border-radius: 3px !important;
-	background-color: var(--sl-button-bg-secondary) !important;
-	padding: 2px 2px 4px 10px !important;
-	border-color: var(--sl-button-bg-primary) !important;
-	color: var(---sl-color-accent) !important;
+    border-radius: 3px !important;
+    background-color: var(--sl-button-bg-secondary) !important;
+    padding: 2px 2px 4px 10px !important;
+    border-color: var(--sl-button-bg-primary) !important;
+    color: var(---sl-color-accent) !important;
 }
 
 /* tabs stuff start */
 
 ul[role="tablist"] {
-	border-bottom: 1px solid var(--sl-button-bg-secondary) !important;
-	padding-bottom: 1px;
+    border-bottom: 1px solid var(--sl-button-bg-secondary) !important;
+    padding-bottom: 1px;
 }
 
 li.tab {
-	border: 0px solid rgb(17, 192, 70) !important;
+    border: 0px solid rgb(17, 192, 70) !important;
 }
 
 a[aria-selected="true"] {
-	border-top: 1px solid var(--sl-color-white) !important;
-	border-bottom: 1px solid var(--sl-color-white) !important;
-	color: var(--tab-color-if) !important;
-	background-color: var(--tab-background-if) !important;
+    border-top: 1px solid var(--sl-color-white) !important;
+    border-bottom: 1px solid var(--sl-color-white) !important;
+    color: var(--tab-color-if) !important;
+    background-color: var(--tab-background-if) !important;
 
 }
 
 a[tabindex="-1"] {
-	border-top: 1px solid var(--sl-button-bg-secondary) !important;
-	border-bottom: 1px solid var(--sl-button-bg-secondary) !important;
-	background-color: var(--tab-background-oof) !important;
-	color: var(--tab-color-oof) !important;
+    border-top: 1px solid var(--sl-button-bg-secondary) !important;
+    border-bottom: 1px solid var(--sl-button-bg-secondary) !important;
+    background-color: var(--tab-background-oof) !important;
+    color: var(--tab-color-oof) !important;
 }
 
 /* react toggle start*/
 
 .toggle-global {
-	margin: 20px 16px 16px 0px;
-	padding-top: 5px;
-	padding-left: 5px;
+    margin: 20px 16px 16px 0px;
+    padding-top: 5px;
+    padding-left: 5px;
 }
 
 .react-toggle-track-x {
-	margin: 0px 3px 0px 0px;
-	padding-bottom: 17px;
+    margin: 0px 3px 0px 0px;
+    padding-bottom: 17px;
 }
 
 .react-toggle-track-check {
-	margin: 0px 0px 0px 0px;
-	padding-bottom: 16px;
+    margin: 0px 0px 0px 0px;
+    padding-bottom: 16px;
 }
 
 .react-toggle-thumb {
-	-webkit-box-shadow: none !important;
-	-moz-box-shadow: none !important;
-	box-shadow: none !important;
-	border: 3px solid !important;
-	border-color: #54c59f !important;
+    -webkit-box-shadow: none !important;
+    -moz-box-shadow: none !important;
+    box-shadow: none !important;
+    border: 3px solid !important;
+    border-color: #54c59f !important;
 }
 
 .react-toggle .react-toggle-thumb {
-	background-color: #c7a06f !important;
+    background-color: #c7a06f !important;
 }
 
 .react-toggle--checked .react-toggle-thumb {
-	background-color: #8464c6 !important;
+    background-color: #8464c6 !important;
 }
 
 /* .react-toggle .react-toggle-thumb {
@@ -267,13 +267,13 @@ a[tabindex="-1"] {
 } */
 
 .react-toggle--checked .react-toggle-track {
-	background-color: var(--react-toggle-checked) !important;
-	/* background-color: var(--sl-color-gray-4); */
+    background-color: var(--react-toggle-checked) !important;
+    /* background-color: var(--sl-color-gray-4); */
 }
 
 .react-toggle-track {
-	min-width: 16px;
-	background-color: #6d6d6d !important;
+    min-width: 16px;
+    background-color: #6d6d6d !important;
 }
 
 /* react toggle end */
@@ -281,12 +281,12 @@ a[tabindex="-1"] {
 /* react tooltip end */
 
 .my-tooltip {
-	position: absolute !important;
-	z-index: 9999 !important;
-	max-width: 400px;
-	max-height: 400px;
-	border: 2px solid var(--react-toggle-checked);
-	opacity: 1 !important;
+    position: absolute !important;
+    z-index: 9999 !important;
+    max-width: 400px;
+    max-height: 400px;
+    border: 2px solid var(--react-toggle-checked);
+    opacity: 1 !important;
 }
 
 /* react tooltip end */
@@ -294,33 +294,33 @@ a[tabindex="-1"] {
 /* make sure there is a gap when it is rendered on page */
 
 #Advanced-class {
-	padding-top: 15px;
-	margin: auto;
+    padding-top: 15px;
+    margin: auto;
 }
 
 /* resized main widows where toc is fml */
 
 .main-pane {
-	min-width: 75% !important;
+    min-width: 75% !important;
 }
 
 
 
 .my-tooltip {
-	padding-bottom: 5px !important;
+    padding-bottom: 5px !important;
 }
 
 .tooltip-link {}
 
 .tooltip-line {
-	display: block;
-	margin-bottom: 2px;
+    display: block;
+    margin-bottom: 2px;
 }
 
 
 .custom-content .mxgraph {
-	width: 100% !important;
-	height: 100% !important;
+    width: 100% !important;
+    height: 100% !important;
 }
 
 
@@ -381,230 +381,243 @@ a[tabindex="-1"] {
 /* starlight aside stuff */
 
 .starlight-aside {
-	color: var(--sl-color-gray-2) !important;
+    color: var(--sl-color-gray-2) !important;
 }
 
 .starlight-aside--caution {
-	background-color: rgba(22, 218, 218, 0);
+    background-color: rgba(22, 218, 218, 0);
 }
 
 .starlight-aside--tip {
-	background-color: rgba(22, 218, 218, 0);
+    background-color: rgba(22, 218, 218, 0);
 }
 
 .starlight-aside--note {
-	background-color: rgba(22, 218, 218, 0);
+    background-color: rgba(22, 218, 218, 0);
 }
 
 .expressive-code .ec-line {
-	tab-size: 4;
+    tab-size: 4;
 }
 
 .starlight-aside__icon {
-	display: none !important;
+    display: none !important;
 }
 
 .starlight-aside--note .starlight-aside__title::before {
-	content: "";
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	background-color: rgba(76, 179, 212);
-	border-radius: 100%;
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: rgba(76, 179, 212);
+    border-radius: 100%;
 }
 
 .starlight-aside--tip .starlight-aside__title::before {
-	content: "";
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	background-color: rgba(0, 148, 0, 1);
-	border-radius: 100%;
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: rgba(0, 148, 0, 1);
+    border-radius: 100%;
 }
 
 .starlight-aside--caution .starlight-aside__title::before {
-	content: "";
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	background-color: rgba(230, 167, 0);
-	border-radius: 100%;
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: rgba(230, 167, 0);
+    border-radius: 100%;
 }
 
 .starlight-aside--danger .starlight-aside__title::before {
-	content: "";
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	background-color: rgba(225, 50, 56);
-	border-radius: 100%;
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: rgba(225, 50, 56);
+    border-radius: 100%;
 }
 
 .starlight-aside {
-	padding: 1rem;
-	border-inline-start: 0.25rem solid;
-	color: var(--sl-color-white);
-	border-left: 1px solid;
-	border-bottom: 1px solid;
+    padding: 1rem;
+    border-inline-start: 0.25rem solid;
+    color: var(--sl-color-white);
+    border-left: 1px solid;
+    border-bottom: 1px solid;
 }
 
 .starlight-aside--note {
-	border-color: rgba(76, 179, 212);
-	background-color: rgba(76, 179, 212, 0.05);
+    border-color: rgba(76, 179, 212);
+    background-color: rgba(76, 179, 212, 0.05);
 
 }
 
 .starlight-aside--tip {
-	border-color: rgba(0, 148, 0);
-	background-color: rgba(0, 148, 0, 0.05);
+    border-color: rgba(0, 148, 0);
+    background-color: rgba(0, 148, 0, 0.05);
 }
 
 .starlight-aside__title {
-	margin-top: -8px !important;
-	margin-left: 0px !important;
-	margin-bottom: -5px !important;
+    margin-top: -8px !important;
+    margin-left: 0px !important;
+    margin-bottom: -5px !important;
 }
 
 .starlight-aside--caution {
-	border-color: rgba(230, 167, 0);
-	background-color: rgba(230, 167, 0, 0.05);
+    border-color: rgba(230, 167, 0);
+    background-color: rgba(230, 167, 0, 0.05);
 }
 
 .starlight-aside--danger {
-	border-color: rgba(225, 50, 56);
-	background-color: rgba(225, 50, 56, 0.05);
+    border-color: rgba(225, 50, 56);
+    background-color: rgba(225, 50, 56, 0.05);
 }
 
 .starlight-aside__content {
-	margin-bottom: -10px !important;
-	padding-bottom: 0px !important;
+    margin-bottom: -10px !important;
+    padding-bottom: 0px !important;
 }
 
 [class*="starlight-aside--"] {
-	background-color: transparent !important;
+    background-color: transparent !important;
 }
 
 .my-icon-container {
-	padding: 0px 0px 10px 10px;
-	/* margin-top: 25px !important; */
+    padding: 0px 0px 10px 10px;
+    /* margin-top: 25px !important; */
 }
 
 .my-icon-container.star-tip {
-	border: 3px solid #FFAE35;
+    border: 3px solid #FFAE35;
 }
 
 .my-icon-container.danger {
-	border: 3px solid #BA1522;
+    border: 3px solid #BA1522;
 }
 
 .my-icon-container.warning {
-	border: 3px solid #FFAE35;
+    border: 3px solid #FFAE35;
 }
 
 .my-icon-container.note {
-	border: 3px solid #0095FF;
+    border: 3px solid #0095FF;
 }
 
 .my-icon-container.tip {
-	border: 3px solid #1FC6A0;
+    border: 3px solid #1FC6A0;
 }
 
 .my-icon {
-	width: 100px !important;
-	max-width: 100px !important;
+    width: 100px !important;
+    max-width: 100px !important;
 }
 
 .my-icon-image {
-	margin-left: -13px !important;
-	height: 30px !important;
-	/* border: 3px solid var(--sl-color-black) !important; */
+    margin-left: -13px !important;
+    height: 30px !important;
+    /* border: 3px solid var(--sl-color-black) !important; */
 }
 
 .my-icon-image.tip {
-	margin-top: -3.6px !important;
-	margin-left: -12.5px !important;
+    margin-top: -3.6px !important;
+    margin-left: -12.5px !important;
 }
 
 .my-icon-image.note {
-	margin-top: -2.5px !important;
-	margin-left: -12px !important;
+    margin-top: -2.5px !important;
+    margin-left: -12px !important;
 }
 
 .my-icon-image.star-tip {
-	margin-top: -2.5px !important;
+    margin-top: -2.5px !important;
 }
 
 .my-icon-image.warning {
-	margin-top: -3.6px !important;
-	margin-left: -12px !important;
+    margin-top: -3.6px !important;
+    margin-left: -12px !important;
 }
 
 .my-icon-image.danger {
-	margin-top: -2.5px !important;
-	margin-left: -12px !important;
+    margin-top: -2.5px !important;
+    margin-left: -12px !important;
 }
 
 .my-icon-text {
-	margin-top: 0px !important;
-	width: 100% !important;
+    margin-top: 0px !important;
+    width: 100% !important;
 }
 
 .my-tooltip-url {
-	color: var(--url-colour) !important;
+    color: var(--url-colour) !important;
 }
 
 .my-tooltip-url:hover {
-	color: var(--url-colour-hover) !important;
-	cursor: pointer;
+    color: var(--url-colour-hover) !important;
+    cursor: pointer;
 }
 
 .my-tooltip {
-	padding-bottom: 5px !important;
+    padding-bottom: 5px !important;
 }
 
 
 .tooltip-link {}
 
 .tooltip-line {
-	display: block;
-	margin-bottom: 2px;
+    display: block;
+    margin-bottom: 2px;
 }
 
 .tooltippy-line {
-	margin: 10px 0px 5px 0px;
+    margin: 10px 0px 5px 0px;
 }
 
 .tooltippy-link {
-	margin: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 0px;
 }
 
 .tooltippy-div {
-	margin: 5px 0px 0px 0px;
+    margin: 5px 0px 0px 0px;
 }
 
 .tippy-box {
-	border: 4px solid var(--react-toggle-checked);
-	opacity: 1 !important;
-	padding: 5px 4px 5px 4px;
-	margin-bottom: 0px;
+    border: 4px solid var(--react-toggle-checked);
+    opacity: 1 !important;
+    padding: 5px 4px 5px 4px;
+    margin-bottom: 0px;
 }
 
 .tippy-content {}
 
 .my-tooltip-url {
-	color: var(--url-colour) !important;
+    color: var(--url-colour) !important;
 }
 
 .my-tooltip-url:hover {
-	color: var(--url-colour-hover) !important;
-	cursor: pointer;
+    color: var(--url-colour-hover) !important;
+    cursor: pointer;
 }
 
 .tooltippy-link {
-	color: var(--url-colour) !important;
+    color: var(--url-colour) !important;
 }
 
 .tooltippy-link:hover {
-	color: var(--url-colour-hover) !important;
-	cursor: pointer;
-}
\ No newline at end of file
+    color: var(--url-colour-hover) !important;
+    cursor: pointer;
+}
+
+
+.sl-markdown-content details:not(:where(.not-content *)) {
+    --sl-details-border-color: var(--sl-color-gray-5);
+    --sl-details-border-color--hover: var(--sl-color-text-accent);
+    border-inline-start: 0px solid var(--sl-details-border-color);
+    padding-inline-start: 0.6rem;
+}
+
+.sl-markdown-content details[open]>summary:not(:where(.not-content *)) {
+    margin-bottom: 0rem;
+    padding-inline-start: 0.6rem;
+}