Fix the styling of the HTML shell reference (#6119)

Co-authored-by: Hugo Locurcio <[email protected]>

_static/css/custom.css

@@ -304,74 +304,83 @@ hr,
 }
 
 /* JavaScript documentation directives */
-.rst-content dl:not(.docutils) dt {
-    background-color: var(--admonition-note-background-color) !important;
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) dt,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) dl:not(.field-list) > dt {
+    background-color: var(--admonition-note-background-color);
     border-color: var(--admonition-note-title-background-color);
     color: var(--admonition-note-color);
 }
-.rst-content dl:not(.docutils) dl dt {
-    background-color: var(--admonition-attention-background-color);
-    border-color: var(--admonition-attention-title-background-color);
-    color: var(--admonition-attention-color) !important;
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) dl dt {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--footer-color);
 }
-.rst-content dl:not(.docutils).class dt,
-.rst-content dl:not(.docutils).function dt,
-.rst-content dl:not(.docutils).method dt,
-.rst-content dl:not(.docutils).attribute dt {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).class dt,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).function dt,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).method dt,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).attribute dt {
+    font-weight: 600;
+    padding: 0 8px;
+    margin-bottom: 1px;
     width: 100%;
 }
-.rst-content dl:not(.docutils).class > dt,
-.rst-content dl:not(.docutils).function > dt,
-.rst-content dl:not(.docutils).method > dt,
-.rst-content dl:not(.docutils).attribute > dt {
-    font-size: 100%;
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).class > dt,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).function > dt,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).method > dt,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).attribute > dt {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, monospace;
+    font-size: 90%;
     font-weight: normal;
     margin-bottom: 16px;
     padding: 6px 8px;
 }
-.rst-content dl:not(.docutils) tt.descclassname,
-.rst-content dl:not(.docutils) code.descclassname {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .sig-prename.descclassname {
     color: var(--highlight-type2-color);
     font-weight: normal;
 }
-.rst-content dl:not(.docutils) tt.descname,
-.rst-content dl:not(.docutils) code.descname {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .sig-name.descname {
     color: var(--highlight-function-color);
-    font-weight: normal;
+    font-weight: 700;
 }
-.rst-content dl:not(.docutils) .sig-paren,
-.rst-content dl:not(.docutils) .optional {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .sig-paren,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .optional {
     color: var(--highlight-operator-color) !important;
     font-weight: normal;
     padding: 0 2px;
 }
-.rst-content dl:not(.docutils) .optional {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .optional {
     font-style: italic;
 }
-.rst-content dl:not(.docutils) .sig-param,
-.rst-content dl:not(.docutils).class dt > em,
-.rst-content dl:not(.docutils).function dt > em,
-.rst-content dl:not(.docutils).method dt > em {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .sig-param,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).class dt > em,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).function dt > em,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).method dt > em {
     color: var(--code-literal-color);
     font-style: normal;
     padding: 0 4px;
 }
-.rst-content dl:not(.docutils) .sig-param,
-.rst-content dl:not(.docutils).class dt > .optional ~ em,
-.rst-content dl:not(.docutils).function dt > .optional ~ em,
-.rst-content dl:not(.docutils).method dt > .optional ~ em {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .k {
+    font-style: normal;
+}
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) .sig-param,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).class dt > .optional ~ em,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).function dt > .optional ~ em,
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).method dt > .optional ~ em {
     color: var(--highlight-number-color);
     font-style: italic;
 }
-.rst-content dl:not(.docutils).class dt > em.property {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple).class dt > em.property {
     color: var(--highlight-keyword-color);
 }
-.rst-content dl:not(.docutils) dt a.headerlink {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) dt a.headerlink {
     color: var(--link-color) !important;
 }
-.rst-content dl:not(.docutils) dt a.headerlink:visited {
+html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.glossary):not(.simple) dt a.headerlink:visited {
     color: var(--link-color-visited);
 }
+html.writer-html5 .rst-content dl.field-list > dd strong {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, monospace;
+}
 
 footer,
 #search-results .context {