summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChris Swithinbank2024-05-18 15:17:54 +0200
committerGitHub2024-05-18 15:17:54 +0200
commit01de9be89c85bcd0022e87465182ee1aba501687 (patch)
treec5b131d772062c058f839b76b47a931855100049
parent5cf88fa6d57c96e7d4c49e4f69531d176a845e60 (diff)
downloadIT.starlight-01de9be89c85bcd0022e87465182ee1aba501687.tar.gz
IT.starlight-01de9be89c85bcd0022e87465182ee1aba501687.tar.bz2
IT.starlight-01de9be89c85bcd0022e87465182ee1aba501687.zip
Micro-optimization: clean up `<details>` CSS (#1892)
-rw-r--r--.changeset/silly-tools-drop.md5
-rw-r--r--packages/starlight/style/markdown.css8
2 files changed, 8 insertions, 5 deletions
diff --git a/.changeset/silly-tools-drop.md b/.changeset/silly-tools-drop.md
new file mode 100644
index 00000000..0746887d
--- /dev/null
+++ b/.changeset/silly-tools-drop.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Internal refactor: simplify some CSS for the `<details>` element
diff --git a/packages/starlight/style/markdown.css b/packages/starlight/style/markdown.css
index 7d057de8..b1b4bc73 100644
--- a/packages/starlight/style/markdown.css
+++ b/packages/starlight/style/markdown.css
@@ -121,13 +121,14 @@
/* <details> and <summary> styles */
.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: 2px solid var(--sl-details-border-color);
padding-inline-start: 1rem;
}
.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
- --sl-details-border-color: var(--sl-color-text-accent);
+ border-color: var(--sl-details-border-color--hover);
}
.sl-markdown-content summary:not(:where(.not-content *)) {
color: var(--sl-color-white);
@@ -182,8 +183,5 @@
/* <details> styles inside asides */
.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
--sl-details-border-color: var(--sl-color-asides-border);
-}
-.sl-markdown-content .starlight-aside details:not([open]):hover:not(:where(.not-content *)),
-.sl-markdown-content .starlight-aside details:has(> summary:hover):not(:where(.not-content *)) {
- --sl-details-border-color: var(--sl-color-asides-text-accent);
+ --sl-details-border-color--hover: var(--sl-color-asides-text-accent);
}