docs: Adjust some styles (#49221)

Danilo Leal created 2 months ago

Just some styling house-keeping in the docs; simple stuff.

Release Notes:

- N/A

Change summary

docs/theme/css/chrome.css    | 25 ++++++++++++++++++++-----
docs/theme/css/general.css   |  4 ++++
docs/theme/css/variables.css |  4 ++--
3 files changed, 26 insertions(+), 7 deletions(-)

Detailed changes

docs/theme/css/chrome.css

@@ -46,7 +46,7 @@ a > .hljs {
   position: sticky;
   top: 0;
   z-index: 100;
-  padding: 12px 24px;
+  padding: 12px 16px;
   background-color: var(--sidebar-bg);
   border-bottom: 1px solid var(--divider);
   display: flex;
@@ -494,7 +494,8 @@ ul#searchresults span.teaser em {
 
 .chapter {
   list-style: none outside none;
-  padding: 8px 20px 20px 20px;
+  padding: 16px;
+  padding-top: 8px;
   line-height: 2.2em;
   margin: 0;
 }
@@ -551,6 +552,14 @@ ul#searchresults span.teaser em {
   margin-block-start: 0.6em;
 }
 
+.section li.chapter-item {
+  margin-block-start: 0;
+}
+
+.chapter li.part-title + li.chapter-item {
+  margin-block-start: 0.2em;
+}
+
 .chapter li.chapter-item > a:first-child {
   flex: 1;
   min-width: 0;
@@ -580,7 +589,7 @@ ul#searchresults span.teaser em {
 .chapter li.part-title.collapsible::after {
   content: "❯";
   display: inline-block;
-  font-size: 1.2rem;
+  font-size: 1rem;
   opacity: 0.6;
   transition: transform 0.2s ease;
   flex-shrink: 0;
@@ -591,7 +600,7 @@ ul#searchresults span.teaser em {
 }
 
 .chapter li.section-spacer {
-  height: 2rem;
+  height: 1.5rem;
   list-style: none;
 }
 
@@ -601,8 +610,14 @@ ul#searchresults span.teaser em {
 
 .section {
   list-style: none outside none;
-  padding-inline-start: 3ch;
+  padding-inline-start: 1.5ch;
+  margin-inline-start: 1ch;
+  margin-top: 6px;
+  border-left: 1px solid var(--border-light);
   line-height: 1.9em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6em;
 }
 
 .theme-popup {

docs/theme/css/general.css

@@ -133,6 +133,10 @@ h5 {
   margin-block-end: 0;
 }
 
+strong {
+  color: var(--full-contrast);
+}
+
 code:focus-visible,
 pre:focus-visible,
 li:focus-visible,

docs/theme/css/variables.css

@@ -185,8 +185,8 @@
   --searchresults-li-bg: hsl(220, 13%, 25%);
   --search-mark-bg: hsl(220, 93%, 60%);
 
-  --download-btn-bg: hsl(220, 90%, 90%, 0.1);
-  --download-btn-bg-hover: hsl(220, 90%, 50%, 0.2);
+  --download-btn-bg: hsl(220, 90%, 30%, 0.5);
+  --download-btn-bg-hover: hsl(220, 90%, 50%, 0.4);
   --download-btn-color: hsl(220, 90%, 95%);
   --download-btn-border: hsla(220, 90%, 80%, 0.2);
   --download-btn-border-hover: hsla(220, 90%, 80%, 0.4);