Rework attributetable to look prettier

1 files changed, 65 insertions, 2 deletions

diff --git a/docs/_static/style.css b/docs/_static/style.css
index 85fbabe6..d40a13a0 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -97,6 +97,13 @@ Historically however, thanks to:
   --rtd-ad-background: var(--grey-2);
   --rtd-ad-main-text: var(--grey-6);
   --rtd-ad-small-text: var(--grey-4);
+  --attribute-table-title: var(--grey-6);
+  --attribute-table-entry-border: var(--grey-3);
+  --attribute-table-entry-text: var(--grey-5);
+  --attribute-table-entry-hover-border: var(--blue);
+  --attribute-table-entry-hover-background: var(--grey-2);
+  --attribute-table-entry-hover-text: var(--blue);
+  --attribute-table-badge: var(--grey-7);
 }
 
 :root[data-font="sans"] {
@@ -151,6 +158,13 @@ Historically however, thanks to:
   --rtd-ad-background: var(--grey-5);
   --rtd-ad-main-text: var(--grey-2);
   --rtd-ad-small-text: var(--grey-1);
+  --attribute-table-title: var(--grey-3);
+  --attribute-table-entry-border: var(--grey-5);
+  --attribute-table-entry-text: var(--grey-3);
+  --attribute-table-entry-hover-border: var(--blue);
+  --attribute-table-entry-hover-background: var(--grey-6);
+  --attribute-table-entry-hover-text: var(--blue);
+  --attribute-table-badge: var(--grey-4);
 }
 
 img[src$="snake_dark.svg"]  {
@@ -744,19 +758,64 @@ div.helpful > p.admonition-title::after {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  justify-content: space-between;
   margin: 0 2em;
   padding-top: 16px;
 }
 
+.py-attribute-table-column {
+  flex: 1 1 auto;
+}
+
+.py-attribute-table-column:not(:first-child) {
+  margin-top: 1em;
+}
+
 .py-attribute-table-column > span {
   font-weight: bold;
+  color: var(--attribute-table-title);
 }
 
 main .py-attribute-table-column > ul {
   list-style: none;
   margin: 4px 0px;
-  padding-left: 12px;
+  padding-left: 0;
+  font-size: 0.95em;
+}
+
+.py-attribute-table-entry {
+  margin: 0;
+  padding: 2px 0;
+  padding-left: 0.2em;
+  border-left: 2px solid var(--attribute-table-entry-border);
+  display: flex;
+  line-height: 1.2em;
+}
+
+.py-attribute-table-entry > a {
+  padding-left: 0.5em;
+  color: var(--attribute-table-entry-text);
+  flex-grow: 1;
+}
+
+.py-attribute-table-entry > a:hover {
+  color: var(--attribute-table-entry-hover-text);
+  text-decoration: none;
+}
+
+.py-attribute-table-entry:hover {
+  background-color: var(--attribute-table-entry-hover-background);
+  border-left: 2px solid var(--attribute-table-entry-hover-border);
+  text-decoration: none;
+}
+
+.py-attribute-table-badge {
+  flex-basis: 3em;
+  text-align: right;
+  font-size: 0.9em;
+  color: var(--attribute-table-badge);
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 pre {
@@ -1076,6 +1135,10 @@ div.code-block-caption {
     font-size: 1.5em;
   }
 
+  .py-attribute-table-column:not(:first-child) {
+    margin-top: unset;
+  }
+
   main img {
     display: block;
     margin-left: auto;