From 9b60988232fd263529b0b7e242392ab8ec0a49c0 Mon Sep 17 00:00:00 2001
From: UncleCode <unclecode@kidocode.com>
Date: Fri, 16 May 2025 21:25:10 +0800
Subject: [PATCH] feat(feedback): add feedback modal styles and integrate into
 mkdocs configuration

---
 docs/md_v2/assets/feedback-overrides.css | 37 ++++++++++++
 docs/md_v2/overrides/main.html           | 77 ++++++++++++++++++++++++
 mkdocs.yml                               |  2 +
 3 files changed, 116 insertions(+)
 create mode 100644 docs/md_v2/assets/feedback-overrides.css
 create mode 100644 docs/md_v2/overrides/main.html

diff --git a/docs/md_v2/assets/feedback-overrides.css b/docs/md_v2/assets/feedback-overrides.css
new file mode 100644
index 00000000..266fbb6c
--- /dev/null
+++ b/docs/md_v2/assets/feedback-overrides.css
@@ -0,0 +1,37 @@
+/* docs/assets/feedback-overrides.css */
+:root {
+  /* brand */
+  --feedback-primary-color: #09b5a5;
+  --feedback-highlight-color: #fed500;          /* stars etc */
+
+  /* modal shell / text */
+  --feedback-modal-content-bg-color: var(--background-color);
+  --feedback-modal-content-text-color: var(--font-color);
+  --feedback-modal-content-border-color: var(--primary-dimmed-color);
+  --feedback-modal-content-border-radius: 4px;
+
+  /* overlay */
+  --feedback-overlay-bg-color: rgba(0,0,0,.75);
+
+  /* rating buttons */
+  --feedback-modal-rating-button-color: var(--secondary-color);
+  --feedback-modal-rating-button-selected-color: var(--primary-color);
+
+  /* inputs */
+  --feedback-modal-input-bg-color: var(--code-bg-color);
+  --feedback-modal-input-text-color: var(--font-color);
+  --feedback-modal-input-border-color: var(--primary-dimmed-color);
+  --feedback-modal-input-border-color-focused: var(--primary-color);
+
+  /* submit / secondary buttons */
+  --feedback-modal-button-submit-bg-color: var(--primary-color);
+  --feedback-modal-button-submit-bg-color-hover: var(--primary-dimmed-color);
+  --feedback-modal-button-submit-text-color: var(--invert-font-color);
+
+  --feedback-modal-button-bg-color: transparent;       /* screenshot btn */
+  --feedback-modal-button-border-color: var(--primary-color);
+  --feedback-modal-button-icon-color: var(--primary-color);
+}
+
+/* optional: keep the “Powered by” link subtle */
+.feedback-logo a{color:var(--secondary-color);}
diff --git a/docs/md_v2/overrides/main.html b/docs/md_v2/overrides/main.html
new file mode 100644
index 00000000..5ebc2402
--- /dev/null
+++ b/docs/md_v2/overrides/main.html
@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+{{ super() }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css" />
+<style>
+    :root {
+        /* brand */
+        --feedback-primary-color: #09b5a5;
+        --feedback-highlight-color: #fed500;
+        /* stars etc */
+
+        /* modal shell / text */
+        --feedback-modal-content-bg-color: var(--background-color);
+        --feedback-modal-content-text-color: var(--font-color);
+        --feedback-modal-content-border-color: var(--primary-dimmed-color);
+        --feedback-modal-content-border-radius: 4px;
+
+        /* overlay */
+        --feedback-overlay-bg-color: rgba(0, 0, 0, .75);
+
+        /* rating buttons */
+        --feedback-modal-rating-button-color: var(--secondary-color);
+        --feedback-modal-rating-button-selected-color: var(--primary-color);
+
+        /* inputs */
+        --feedback-modal-input-bg-color: var(--feedback-dark-color);
+        --feedback-modal-input-text-color: var(--font-color);
+        --feedback-modal-input-border-color: var(--primary-dimmed-color);
+        --feedback-modal-input-border-color-focused: var(--primary-color);
+
+        /* submit / secondary buttons */
+        --feedback-modal-button-submit-bg-color: var(--primary-color);
+        --feedback-modal-button-submit-bg-color-hover: var(--primary-dimmed-color);
+        --feedback-modal-button-submit-text-color: var(--invert-font-color);
+
+        --feedback-modal-button-bg-color: transparent;
+        /* screenshot btn */
+        --feedback-modal-button-border-color: var(--primary-color);
+        --feedback-modal-button-icon-color: var(--primary-color);
+
+        --feedback-modal-footer-link: #7b7b7b;
+        --feedback-modal-button-text-color: #8e8e8e;
+        --feedback-modal-input-text-color: #b9c2c2;
+        --feedback-modal-button-bg-color-active: #46dbdc;
+
+        /* align with the value you really use in :root */
+        --header-height: 65px;
+
+        /* Push modal content down */
+        --feedback-modal-content-position-top: var(--header-height);
+
+        --feedback-modal-modal-wrapper-z-index: 1100;
+        /*  >  header’s 1000 */
+        --feedback-modal-content-z-index: 1101;
+        /* just in case */
+        --feedback-modal-header-text-color: #ebebeb;
+    }
+
+    feedback-modal::part(overlay) {
+        top: var(--header-height);
+        /* start below header */
+        height: calc(100vh - var(--header-height));
+        /* fill the rest */
+
+
+    }
+</style>
+<script type="module"
+    src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js"></script>
+{% endblock %}
+
+{% block footer %}
+<feedback-button project="w8plzp8vjp" button-position="center-right" modal-position="sidebar-right">
+    Feedback
+</feedback-button>
+{% endblock %}
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 780e4af4..c1123798 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -57,6 +57,7 @@ nav:
 theme:
   name: 'terminal'
   palette: 'dark'
+  custom_dir: docs/md_v2/overrides
   icon:
     repo: fontawesome/brands/github
 
@@ -82,6 +83,7 @@ extra_css:
   - assets/styles.css
   - assets/highlight.css
   - assets/dmvendor.css
+  - assets/feedback-overrides.css
 
 extra_javascript:
   - https://www.googletagmanager.com/gtag/js?id=G-58W0K2ZQ25