1 files changed, 99 insertions, 33 deletions
diff --git a/docs/css/vue.css b/docs/css/vue.css
index 499bf1c..12535bc 100644
--- a/docs/css/vue.css
+++ b/docs/css/vue.css
@@ -45,8 +45,8 @@ span.emoji {
     font-size: 1.2em;
 }
 .progress {
-    background-color: #673ab7;
-    background-color: var(--theme-color, #673ab7);
+    background-color: #ff5722;
+    background-color: var(--theme-color, #ff5722);
     height: 2px;
     left: 0;
     position: fixed;
@@ -60,8 +60,8 @@ span.emoji {
 }
 .search .search-keyword,
 .search a:hover {
-    color: #673ab7;
-    color: var(--theme-color, #673ab7);
+    color: #ff5722;
+    color: var(--theme-color, #ff5722);
 }
 .search .search-keyword {
     font-style: normal;
@@ -137,12 +137,12 @@ li input[type="checkbox"] {
 }
 .app-nav a.active,
 .app-nav a:hover {
-    color: #673ab7;
-    color: var(--theme-color, #673ab7);
+    color: #ff5722;
+    color: var(--theme-color, #ff5722);
 }
 .app-nav a.active {
-    border-bottom: 2px solid #673ab7;
-    border-bottom: 2px solid var(--theme-color, #673ab7);
+    border-bottom: 2px solid #ff5722;
+    border-bottom: 2px solid var(--theme-color, #ff5722);
 }
 .app-nav li {
     display: inline-block;
@@ -199,8 +199,8 @@ li input[type="checkbox"] {
 }
 .github-corner svg {
     color: #fff;
-    fill: #673ab7;
-    fill: var(--theme-color, #673ab7);
+    fill: #ff5722;
+    fill: var(--theme-color, #ff5722);
     height: 80px;
     width: 80px;
 }
@@ -309,8 +309,8 @@ main.hidden {
     opacity: 0.4;
 }
 .sidebar-toggle span {
-    background-color: #673ab7;
-    background-color: var(--theme-color, #673ab7);
+    background-color: #ff5722;
+    background-color: var(--theme-color, #ff5722);
     display: block;
     margin-bottom: 4px;
     width: 16px;
@@ -576,11 +576,11 @@ section.cover ul {
 }
 section.cover .cover-main > p:last-child a {
     border-radius: 2rem;
-    border: 1px solid #673ab7;
-    border-color: var(--theme-color, #673ab7);
+    border: 1px solid #ff5722;
+    border-color: var(--theme-color, #ff5722);
     box-sizing: border-box;
-    color: #673ab7;
-    color: var(--theme-color, #673ab7);
+    color: #ff5722;
+    color: var(--theme-color, #ff5722);
     display: inline-block;
     font-size: 1.05rem;
     letter-spacing: 0.1rem;
@@ -590,8 +590,8 @@ section.cover .cover-main > p:last-child a {
     transition: all 0.15s ease;
 }
 section.cover .cover-main > p:last-child a:last-child {
-    background-color: #673ab7;
-    background-color: var(--theme-color, #673ab7);
+    background-color: #ff5722;
+    background-color: var(--theme-color, #ff5722);
     color: #fff;
 }
 section.cover .cover-main > p:last-child a:last-child:hover {
@@ -602,13 +602,13 @@ section.cover .cover-main > p:last-child a:hover {
     color: inherit;
 }
 section.cover blockquote > p > a {
-    border-bottom: 2px solid #673ab7;
-    border-bottom: 2px solid var(--theme-color, #673ab7);
+    border-bottom: 2px solid #ff5722;
+    border-bottom: 2px solid var(--theme-color, #ff5722);
     transition: color 0.3s;
 }
 section.cover blockquote > p > a:hover {
-    color: #673ab7;
-    color: var(--theme-color, #673ab7);
+    color: #ff5722;
+    color: var(--theme-color, #ff5722);
 }
 .sidebar,
 body {
@@ -637,9 +637,18 @@ body {
 }
 .sidebar ul li.active > a {
     border-right: 2px solid;
-    color: #673ab7;
-    color: var(--theme-color, #673ab7);
+    color: #ff5722;
+    color: var(--theme-color, #ff5722);
     font-weight: 600;
+    background: linear-gradient(to left, #ff572255, transparent 30%);
+    text-shadow: 0 0 8px rgba(255, 87, 34, 0.3);
+}
+.sidebar ul li > a:hover {
+    background: linear-gradient(
+        to left,
+        rgba(255, 87, 34, 0.05),
+        transparent 50%
+    );
 }
 .app-sub-sidebar li:before {
     content: "-";
@@ -655,8 +664,8 @@ body {
     font-weight: 600;
 }
 .markdown-section a {
-    color: #673ab7;
-    color: var(--theme-color, #673ab7);
+    color: #ff5722;
+    color: var(--theme-color, #ff5722);
     font-weight: 600;
 }
 .markdown-section h1 {
@@ -696,8 +705,8 @@ body {
     padding-left: 1.5rem;
 }
 .markdown-section blockquote {
-    border-left: 4px solid #673ab7;
-    border-left: 4px solid var(--theme-color, #673ab7);
+    border-left: 4px solid #ff5722;
+    border-left: 4px solid var(--theme-color, #ff5722);
     color: #858585;
     margin: 2em 0;
     padding-left: 20px;
@@ -744,7 +753,7 @@ body {
 }
 .markdown-section code {
     border-radius: 2px;
-    color: #ff4182;
+    color: #f44336;
     margin: 0 2px;
     padding: 3px 5px;
     white-space: pre-wrap;
@@ -818,7 +827,7 @@ body {
     color: #c08b30;
 }
 .token.tag {
-    color: #673ab7;
+    color: #ff5722;
 }
 .token.string {
     color: #4caf50;
@@ -840,12 +849,12 @@ body {
 .token.control,
 .token.directive,
 .token.unit {
-    color: #673ab7;
-    color: var(--theme-color, #673ab7);
+    color: #ff5722;
+    color: var(--theme-color, #ff5722);
 }
 .token.function,
 .token.keyword {
-    color: #ff4182;
+    color: #f44336;
 }
 .token.atrule,
 .token.regex,
@@ -883,3 +892,60 @@ code .token {
     position: relative;
     left: auto;
 }
+
+/* App name link styles */
+.app-name-link {
+    display: inline-block;
+    color: #34495e;
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-decoration: none;
+    padding: 0 20px;
+    line-height: 1.5;
+}
+
+/* Search styles */
+.search .input-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+.search .input-wrap input[type="search"] {
+    width: 100%;
+    padding: 8px 40px 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.3s;
+    box-sizing: border-box;
+}
+.search .input-wrap input[type="search"]:focus {
+    border-color: #ff5722;
+    border-color: var(--theme-color, #ff5722);
+    box-shadow: 0 0 0 3px #ff572212;
+}
+.search .input-wrap .clear-button {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.6;
+    transition: opacity 0.3s;
+}
+.search .input-wrap .clear-button:hover {
+    opacity: 1;
+}
+.search .results-panel {
+    margin-top: 8px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    background: #fff;
+    max-height: 300px;
+    overflow-y: auto;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}