feat: reimplement headers tab

Author: aorith

assets/static/styles.css

@@ -2,6 +2,7 @@
 :root {
   --fixed-warm-0: #5d3024;
   --fixed-warm-1: #f4e4e1;
+  --fixed-gray-0: #666666;
 
   --white-0: #ffffff;
   --black-0: #000000;
@@ -175,8 +176,10 @@ html {
   flex: 1 0;
   padding: var(--space-1);
   min-height: 100%;
-  overflow-y: auto; /* keeps the sidebar in place */
+  overflow-y: auto;
+  /* keeps the sidebar in place */
 }
+
 /* END Layout */
 
 .topbar button.sidebar-toggle-btn {
@@ -311,7 +314,7 @@ pre:not(.mermaid) {
   border-radius: 5px;
 }
 
-:not(pre) > code {
+:not(pre)>code {
   font-size: var(--code-font-size);
   color: var(--warm);
   padding: 1px 2px 1px 2px;
@@ -398,22 +401,27 @@ h6 {
 h1 {
   font-size: var(--xxxlsize);
 }
+
 h2 {
   font-size: var(--xxlsize);
   color: var(--warm);
 }
+
 h3 {
   font-size: var(--xlsize);
   color: var(--cold);
 }
+
 h4 {
   font-size: var(--lsize);
   color: var(--mild);
 }
+
 h5 {
   font-size: var(--lsize);
   color: var(--calm);
 }
+
 h6 {
   font-size: var(--msize);
   color: var(--fg-1);
@@ -424,27 +432,27 @@ ol {
   margin-left: var(--space-1);
 }
 
-li + li,
+li+li,
 li ul,
 li ol {
   margin-top: var(--space-0);
 }
 
-p + h2,
-p + h3,
-ul + h2,
-ul + h3,
-ol + h2,
-ol + h3,
-blockquote + h2,
-blockquote + h3,
-div + h2,
-div + h3,
-small + h2,
-small + h3,
-pre + h2,
-pre + h3,
-dd + dt {
+p+h2,
+p+h3,
+ul+h2,
+ul+h3,
+ol+h2,
+ol+h3,
+blockquote+h2,
+blockquote+h3,
+div+h2,
+div+h3,
+small+h2,
+small+h3,
+pre+h2,
+pre+h3,
+dd+dt {
   margin-top: var(--vertical-1);
 }
 
@@ -457,6 +465,7 @@ p {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -466,6 +475,7 @@ p {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -489,85 +499,130 @@ a:hover {
   text-decoration: line-through;
 }
 
-.headers {
-  padding: var(--space-0);
-  margin-bottom: var(--space-3);
+div.headers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0rem;
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
   font-family: var(--font-family);
 }
 
-.headers details summary {
-  font-size: calc(var(--base-font-size) * 1.3);
-  color: var(--fg-0);
-  margin-top: 6px;
-}
-
-.headers details summary:hover {
-  color: var(--warm);
+div.headers-tbl-container {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0rem;
+  padding: 0;
+  margin: 0;
 }
 
 table.headers-table {
   margin: var(--space-1);
   padding: var(--space-1);
-  border-radius: 5px;
+  background-color: var(--bg-0);
+  table-layout: auto;
+  border-collapse: collapse;
+  box-shadow: 1px 1px 2px 3px var(--fixed-gray-0);
+}
+
+table.headers-table thead tr {
+  color: var(--fg-0);
+  margin-top: var(--space-1);
+}
+
+table.headers-table th,
+table.headers-table td {
+  white-space: nowrap;
+  word-break: keep-all;
+}
+
+table.headers-table thead tr th {
+  font-size: 1.3em;
+  font-weight: bold;
+  text-align: center;
+  padding: var(--space-1) 0 var(--space-1) 0;
+}
+
+table.headers-table tbody tr:nth-child(even) {
   background-color: var(--bg-1);
 }
 
-table.headers-table tbody tr th {
-  font-weight: normal;
-  text-align: right;
-  padding-right: 8px;
+table.headers-table tr.hdr-type {
+  font-weight: 550;
+  text-align: center;
+  padding: 0.4rem 2rem 0.5rem 2rem;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+table.headers-table tr.hdr-type th {
+  padding: 0.4rem 2rem 0.5rem 2rem;
+  background-color: var(--fixed-gray-0);
+  color: var(--bg-0);
 }
 
-table.headers-table tbody tr td {
-  padding-left: 8px;
+table.headers-table th.hdrname {
+  font-weight: 500;
+  text-align: center;
+  color: var(--fg-2);
+  padding: 0.4rem 1rem 0.5rem 1rem;
+}
+
+table.headers-table td {
+  padding: 0.4rem 1rem 0.5rem 1rem;
   font-weight: normal;
-  text-align: left;
+  vertical-align: bottom;
 }
 
-table.headers-table tbody tr.hdr-type th {
-  font-weight: bold;
-  text-align: left;
-  color: var(--warm);
-  border-bottom: 1px solid var(--warm);
-  padding: var(--space-0) 0px calc(var(--space-0) * 0.5) 0px;
+table.headers-table input[type="text"] {
+  width: auto;
+  min-width: 32ch !important;
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--code-font-size) * 0.92);
+  padding: var(--space-0);
+  background-color: inherit !important;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  outline: none;
 }
 
-table.headers-table tbody tr.hdr-type th abbr {
+table.headers-table abbr {
   text-decoration: none;
 }
 
 .diffOriginal,
 .s3xx {
-  color: var(--fg-1);
+  color: var(--fg-1) !important;
 }
 
 .diffAdded,
 .s2xx {
-  color: var(--green-0);
+  color: var(--green-0) !important;
 }
 
 .diffModified,
 .s4xx {
-  color: var(--yellow-0);
+  color: var(--yellow-0) !important;
 }
 
 .diffDeleted {
-  color: var(--red-0);
+  color: var(--red-0) !important;
 }
 
 .errorRecord,
 .s5xx {
-  color: var(--red-0);
+  color: var(--red-0) !important;
 }
 
 .errorMsg {
-  color: var(--red-0);
+  color: var(--red-0) !important;
   font-family: var(--font-family-mono);
   font-size: var(--code-font-size);
 }
 
 .logMsg {
-  color: var(--fg-1);
+  color: var(--fg-1) !important;
   font-style: italic;
 }
 
@@ -598,13 +653,13 @@ form.simple-form {
   border-radius: 8px;
 }
 
-form.simple-form > label {
+form.simple-form>label {
   display: block;
   font-weight: bold;
 }
 
 form.simple-form select,
-form.simple-form > input[type="radio"] {
+form.simple-form>input[type="radio"] {
   cursor: pointer;
 }
 
@@ -622,7 +677,7 @@ fieldset label {
   padding-right: var(--space-1);
 }
 
-form.simple-form > label {
+form.simple-form>label {
   display: inline-block;
   margin-right: var(--space-1);
   margin-bottom: var(--space-0);
@@ -657,7 +712,7 @@ input[type="radio"]:focus {
   outline: 1px solid var(--warm);
 }
 
-form.simple-form > input,
+form.simple-form>input,
 form.simple-form select {
   font-size: var(--code-font-size);
   color: var(--fg-1);
@@ -679,6 +734,7 @@ form.simple-form div.chkbox-grid {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -704,11 +760,13 @@ div.txtree ul {
   padding-bottom: 8px;
 
   display: grid;
-  grid-template-columns: minmax(min-content, 112px) auto; /* max should be enough for all tags */
+  grid-template-columns: minmax(min-content, 112px) auto;
+  /* max should be enough for all tags */
   column-gap: 4px;
   row-gap: 5px;
 
-  grid-column: span 2; /* when this element is a child, occupy 2 columns */
+  grid-column: span 2;
+  /* when this element is a child, occupy 2 columns */
 }
 
 div.txtree ul.color-0 {