From e9c2ea7e474f5747a0364dde96aa9216e9c6eb0d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 7 Feb 2026 01:18:20 +0000
Subject: [PATCH] Add Apple Liquid Glass glassmorphism design for mkdocs site

Co-authored-by: orange-cpp <59374393+orange-cpp@users.noreply.github.com>
---
 docs/styles/liquid-glass.css | 179 +++++++++++++++++++++++++++++++++++
 mkdocs.yml                   |   3 +-
 2 files changed, 181 insertions(+), 1 deletion(-)
 create mode 100644 docs/styles/liquid-glass.css

diff --git a/docs/styles/liquid-glass.css b/docs/styles/liquid-glass.css
new file mode 100644
index 0000000..a41f6e0
--- /dev/null
+++ b/docs/styles/liquid-glass.css
@@ -0,0 +1,179 @@
+/* ============================================================
+   Apple Liquid Glass Design — glassmorphism overrides
+   for Material for MkDocs (slate / dark mode)
+   ============================================================ */
+
+/* ---------- shared glass mixin values ---------- */
+:root {
+  --glass-bg: rgba(255, 255, 255, 0.04);
+  --glass-bg-hover: rgba(255, 255, 255, 0.07);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-border-strong: rgba(255, 255, 255, 0.12);
+  --glass-blur: 16px;
+  --glass-radius: 14px;
+  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+  --glass-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.18);
+  --glass-accent: rgba(255, 152, 0, 0.12);
+}
+
+/* ---------- header / top-bar ---------- */
+.md-header {
+  background: rgba(30, 30, 30, 0.55) !important;
+  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
+  backdrop-filter: saturate(180%) blur(var(--glass-blur));
+  border-bottom: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow-sm);
+}
+
+/* ---------- navigation sidebar ---------- */
+.md-sidebar {
+  background: transparent !important;
+}
+
+.md-sidebar__scrollwrap {
+  background: var(--glass-bg);
+  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur));
+  backdrop-filter: saturate(160%) blur(var(--glass-blur));
+  border-right: 1px solid var(--glass-border);
+  border-radius: 0 var(--glass-radius) var(--glass-radius) 0;
+}
+
+/* active nav item — subtle glass highlight */
+.md-nav__item--active > .md-nav__link {
+  background: var(--glass-accent) !important;
+  border-radius: 8px;
+}
+
+/* ---------- content area ---------- */
+.md-main__inner {
+  background: transparent;
+}
+
+.md-content {
+  background: var(--glass-bg);
+  -webkit-backdrop-filter: saturate(140%) blur(12px);
+  backdrop-filter: saturate(140%) blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--glass-radius);
+  box-shadow: var(--glass-shadow);
+  margin: 12px 0;
+  padding: 4px;
+}
+
+/* ---------- code blocks ---------- */
+.highlight {
+  background: rgba(0, 0, 0, 0.25) !important;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border-strong);
+  border-radius: 12px !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
+              var(--glass-shadow-sm);
+  overflow: hidden;
+}
+
+.highlight code {
+  background: transparent !important;
+}
+
+/* inline code */
+:not(pre) > code {
+  background: rgba(255, 255, 255, 0.06) !important;
+  border: 1px solid var(--glass-border);
+  border-radius: 6px;
+  padding: 2px 6px;
+}
+
+/* ---------- tables ---------- */
+.md-typeset table:not([class]) {
+  background: var(--glass-bg);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--glass-shadow-sm);
+}
+
+.md-typeset table:not([class]) th {
+  background: rgba(255, 152, 0, 0.08);
+}
+
+/* ---------- admonitions / call-outs ---------- */
+.md-typeset .admonition,
+.md-typeset details {
+  background: var(--glass-bg) !important;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border-strong) !important;
+  border-radius: 12px !important;
+  box-shadow: var(--glass-shadow-sm);
+}
+
+/* ---------- tabs ---------- */
+.md-typeset .tabbed-set {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* ---------- search bar ---------- */
+.md-search__form {
+  background: rgba(255, 255, 255, 0.06) !important;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: 10px !important;
+}
+
+/* ---------- footer ---------- */
+.md-footer {
+  background: rgba(30, 30, 30, 0.50) !important;
+  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
+  backdrop-filter: saturate(180%) blur(var(--glass-blur));
+  border-top: 1px solid var(--glass-border);
+}
+
+/* ---------- horizontal rules — subtle glow ---------- */
+.md-typeset hr {
+  border-image: linear-gradient(
+    to right,
+    transparent,
+    rgba(255, 152, 0, 0.25),
+    transparent
+  ) 1;
+}
+
+/* ---------- scrollbar ---------- */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.10);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+/* ---------- links — subtle glass-glow on hover ---------- */
+.md-typeset a:hover {
+  text-shadow: 0 0 8px rgba(255, 152, 0, 0.3);
+}
+
+/* ---------- images — soft glass frame ---------- */
+.md-typeset img {
+  border-radius: 10px;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index 12422ca..678580e 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -13,4 +13,5 @@ markdown_extensions:
   - pymdownx.superfences
 extra_css:
   - styles/fonts.css
-  - styles/center.css
\ No newline at end of file
+  - styles/center.css
+  - styles/liquid-glass.css
\ No newline at end of file