From a766a2f462b3cb13e8daa62a18e656f6b4887d49 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Tue, 25 Jun 2024 01:44:45 +0400
Subject: [PATCH] Update CSS styles for Starlight Docs

Header style adjustments were made to further enhance user interface and align with the main website.
---
 src/assets/styles/starlight.css      | 35 ++++++++++++++++++++++++++++
 src/assets/styles/starlight_main.css | 21 +++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/src/assets/styles/starlight.css b/src/assets/styles/starlight.css
index 17a5e81..c8a25d9 100644
--- a/src/assets/styles/starlight.css
+++ b/src/assets/styles/starlight.css
@@ -1,5 +1,6 @@
 /* Dark mode colors. */
 :root {
+    --border: hsla(var(--border-neutral), .4);
     --backdrop-color: #272727cc;
     --sl-color-accent: #ff801f;
     --sl-color-accent-high: #ffa057;
@@ -13,10 +14,12 @@
     --sl-color-gray-6: #272727;
     --sl-color-white: #fff;
     --list-marker-color: #fb923c;
+    --border-neutral: 0, 0%, 25.1%;
 }
 
 /* Light mode colors. */
 :root[data-theme="light"] {
+    --border: hsla(var(--border-yellow), .4);
     --backdrop-color: #f6f6f699;
     --sl-color-accent: #b73d00;
     --sl-color-accent-high: #562800;
@@ -31,11 +34,43 @@
     --sl-color-gray-7: #f6f6f6;
     --sl-color-white: #181818;
     --list-marker-color: #fb923c;
+    --border-yellow: 54.9, 96.7%, 88%;
+
 }
 
 header {
+    background-color: transparent !important;
+    height: 4.5rem !important;
+    margin-inline: auto !important;
+    padding-block: 0 !important;
+    padding-inline: 1.5rem !important;
+    padding-inline-end: 0 !important;
+}
+
+header > div:first-of-type {
     backdrop-filter: blur(12px) !important;
     background-color: var(--backdrop-color) !important;
+    border: 1px var(--border) solid;
+    border-radius: 36px;
+    height: 100% !important;
+    margin-inline: auto !important;
+    margin-top: 1rem !important;
+    max-width: 1536px;
+    padding-inline: 2rem !important;
+    width: auto !important;
+}
+
+#starlight__sidebar {
+    border-radius: 1rem;
+    margin-top: 2rem !important;
+}
+
+.content-panel:first-of-type {
+    margin-top: 2rem !important;
+}
+
+.right-sidebar {
+    top: 2rem !important;
 }
 
 select {
diff --git a/src/assets/styles/starlight_main.css b/src/assets/styles/starlight_main.css
index 4967f91..9d5e6e1 100644
--- a/src/assets/styles/starlight_main.css
+++ b/src/assets/styles/starlight_main.css
@@ -15,6 +15,8 @@
     --sl-color-white: #fff;
     --yellow-hsl: 43.3, 96.4%, 56.3%;
     --overlay-yellow: hsla(var(--yellow-hsl), .2);
+    --border: hsla(var(--border-neutral), .4);
+    --border-neutral: 0, 0%, 25.1%;
 }
 
 /* Light mode colors. */
@@ -34,6 +36,8 @@
     --sl-color-gray-7: #f6f6f6;
     --sl-color-white: #181818;
     --yellow-hsl: 47.9, 95.8%, 53.1%;
+    --border-yellow: 54.9, 96.7%, 88%;
+    --border: hsla(var(--border-yellow), .4);
 }
 
 .page {
@@ -42,8 +46,25 @@
 }
 
 header {
+    background-color: transparent !important;
+    height: 4.5rem !important;
+    margin-inline: auto !important;
+    padding-block: 0 !important;
+    padding-inline: 1.5rem !important;
+    padding-inline-end: 0 !important;
+}
+
+header > div:first-of-type {
     backdrop-filter: blur(12px) !important;
     background-color: var(--backdrop-color) !important;
+    border: 1px var(--border) solid;
+    border-radius: 36px;
+    height: 100% !important;
+    margin-inline: auto !important;
+    margin-top: 1rem !important;
+    max-width: 1536px;
+    padding-inline: 2rem !important;
+    width: auto !important;
 }
 
 select {