Add styling to autodoc content

Add colors, formatting and font to autodoc generated content, that mostly is suffixed by ".sig-". Signed-off-by: Jorge Marques <[email protected]>
analogdevicesinc · Mar 12, 2024 · 908bb23 · 908bb23
1 parent a685ea1
commit 908bb23
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 3 deletions.
diff --git a/adi_doctools/__init__.py b/adi_doctools/__init__.py
@@ -9,7 +9,7 @@
 from .role import setup as role_setup
 from .lut import get_lut
 
-__version__ = "0.3.20"
+__version__ = "0.3.21"
 
 logger = logging.getLogger(__name__)
 

diff --git a/adi_doctools/theme/cosmic/style/bundle.scss b/adi_doctools/theme/cosmic/style/bundle.scss
@@ -8,3 +8,4 @@
 @import "search";
 @import "footer";
 @import "related";
+@import "code";
diff --git a/adi_doctools/theme/cosmic/style/code.scss b/adi_doctools/theme/cosmic/style/code.scss
@@ -0,0 +1,38 @@
+.sig-object {
+    font-family: monospace;
+    font-size: 1rem;
+}
+
+.sig-prename, .sig-name {
+    color: var(--accent-color-code);
+}
+
+.sig-name, em.property {
+    font-weight: 600;
+}
+
+em.sig-param, em.property {
+    font-style: normal;
+}
+
+.headerlink {
+    color: var(--accent-color);
+    opacity: 0;
+    transition: ease opacity .25s;
+    padding-left: .25em;
+}
+
+.sig-object {
+    transition: ease background-color .25s;
+    background-color: rgba(125, 125, 125, 0);
+    padding: .25em .5rem;
+    border-radius: 1rem;
+}
+
+.sig-object:hover {
+    background-color: rgba(125, 125, 125, 0.1);
+}
+
+.sig-object:hover .headerlink {
+    opacity: 1;
+}
diff --git a/adi_doctools/theme/cosmic/style/element.scss b/adi_doctools/theme/cosmic/style/element.scss
@@ -15,12 +15,12 @@ a {
     color: inherit;
 }
 
-.body p a {
+.body p a, .body a.reference.internal {
     color: var(--accent-color);
     border-bottom: 1px solid rgba(125, 125, 125, .25);
 }
 
-.body p a:hover {
+.body p a:hover, .body a.reference.internal:hover {
     border-color: var(--text-color2);
 }
 

diff --git a/adi_doctools/theme/cosmic/style/style.scss b/adi_doctools/theme/cosmic/style/style.scss
@@ -33,6 +33,7 @@ body {
     --text-color2: #{$text-color-light2};
     --text-color3: #{$text-color-light3};
     --accent-color: #{$accent-color-light};
+    --accent-color-code: #{$accent-color-code-light};
 }
 
 body.dark {
@@ -48,6 +49,7 @@ body.dark {
     --text-color2: #{$text-color-dark2};
     --text-color3: #{$text-color-dark3};
     --accent-color: #{$accent-color-dark};
+    --accent-color-code: #{$accent-color-code-dark};
 }
 
 @media (prefers-color-scheme: dark) {
@@ -64,6 +66,7 @@ body.dark {
         --text-color2: #{$text-color-dark2};
         --text-color3: #{$text-color-dark3};
         --accent-color: #{$accent-color-dark};
+        --accent-color-code: #{$accent-color-code-dark};
     }
 }
 

diff --git a/adi_doctools/theme/cosmic/style/variable.scss b/adi_doctools/theme/cosmic/style/variable.scss
@@ -16,6 +16,8 @@ $border-th: 1px solid rgba(125, 125, 125, 0.5);
 $border-td: 1px solid rgba(125, 125, 125, 0.25);
 $accent-color-light: #0067b9;
 $accent-color-dark: #0076d6;
+$accent-color-code-light: #cc6d34;
+$accent-color-code-dark: #ff8d34;
 $border-radius: .25em;
 
 $width-wide: 105em;