Rework the parameter table style, fixes #868

Author: tristanlatr

pydoctor/themes/base/apidocs.css

@@ -228,6 +228,7 @@ ul ul ul ul ul ul ul {
 .fieldTable {
     width: 100%;
     border: 0;
+    overflow: hidden;
 }
 
 /* Arg name */
@@ -248,15 +249,26 @@ ul ul ul ul ul ul ul {
 
 .fieldTable tr td {
     padding: 2px;
+    vertical-align: top;
 }
 
+/* Add border to separate parameter rows */
+.fieldTable tr:not(:last-of-type):has(.fieldArgContainer):has(+ tr:not(.fieldStart)) {
+    box-shadow: 25px 1px 0 #ddd;
+    border-bottom: 7px solid;
+    border-color: transparent;
+}
 
 /* Argument name + type column table  */
 .fieldTable tr td.fieldArgContainer {
-    width: 325px;
+    max-width: 400px;
     word-break: break-word;
 }
 
+.fieldTable tr td.fieldArgDesc {
+    max-width: 600px;
+}
+
 /* parameters names in parameters table */
 .fieldTable tr td.fieldArgContainer > .fieldArg {
     float: left;
@@ -306,6 +318,11 @@ ul ul ul ul ul ul ul {
         width: auto;
     }
 
+    /* Argument name + type column table  */
+    .fieldTable tr td.fieldArgContainer {
+        width: 33%;
+    }
+
 }
 
 @media only screen and (max-width: 820px) {
@@ -320,24 +337,13 @@ ul ul ul ul ul ul ul {
     #splitTables > table tr td:nth-child(2) {
         width: 160px;
     }
-    /* Argument name + type column table  */
-    .fieldTable tr td.fieldArgContainer {
-        width: 170px;
-    } 
-    .fieldTable {
-        table-layout: fixed;
-    }
 }
 
 @media only screen and (max-width: 450px) {
     /* Attr name column table  */
     #splitTables > table tr td:nth-child(2) {
         width: 100px;
     }
-    /* Argument name + type column table  */
-    .fieldTable tr td.fieldArgContainer {
-        width: 125px;
-    }
 }
 
 table .package {

pydoctor/themes/readthedocs/readthedocstheme.css

@@ -747,8 +747,7 @@ input[type="search"] {
     border-left: 3px solid rgb(80, 80, 90);
 }
 #childList a:target ~ .functionBody{
-    background-color: transparent;
-    box-shadow: none;
+    box-shadow: 7px 1px 0px 3px rgb(253 255 223), -36px 1px 0px 3px rgb(253 255 223);
 }
 
 @font-face {