Merge pull request #1040 from Keldos-Li/fix-Chuanhu-theme

调整与修复 [川虎小而美] 主题样式

themes/green.css

@@ -103,6 +103,10 @@ mspace {
     width: 10% !important;
 }
 
+button.sm {
+    padding: 6px 8px !important;
+}
+
 /* usage_display */
 .insert_block {
     position: relative;
@@ -124,15 +128,15 @@ textarea {
     resize: none;
     height: 100%; /* 填充父元素的高度 */
 }
-#main_chatbot {
+/* #main_chatbot {
     height: 75vh !important;
     max-height: 75vh !important;
-    /* overflow: auto !important; */
+    overflow: auto !important;
     z-index: 2;
     transform: translateZ(0) !important;
     backface-visibility: hidden !important;
     will-change: transform !important;
-}
+} */
 #prompt_result{
     height: 60vh !important;
     max-height: 60vh !important;
@@ -201,9 +205,9 @@ textarea.svelte-1pie7s6 {
     background: #393939 !important;
     border: var(--input-border-width) solid var(--input-border-color) !important;
 }
-.dark input[type="range"] {
+/* .dark input[type="range"] {
     background: #393939 !important;
-}
+} */
 #user_info .wrap {
     opacity: 0;
 }
@@ -238,7 +242,7 @@ textarea.svelte-1pie7s6 {
 #debug_mes {
     transition: all 0.6s;
 }
-#main_chatbot {
+#gpt-chatbot {
     transition: height 0.3s ease;
 }
 
@@ -415,7 +419,7 @@ input[type="range"]::-webkit-slider-thumb {
 input[type="range"]::-webkit-slider-thumb:hover {
     background: var(--neutral-50);
 }
-input[type=range]::-webkit-slider-runnable-track {
+input[type="range"]::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     box-shadow: none;
     border: none;
@@ -440,28 +444,37 @@ ol:not(.options), ul:not(.options) {
 }
 
 /* 亮色（默认） */
-#main_chatbot {
+#gpt-chatbot {
     background-color: var(--chatbot-background-color-light) !important;
     color: var(--chatbot-color-light) !important;
+    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.06);
 }
 /* 暗色 */
-.dark #main_chatbot {
+.dark #gpt-chatbot {
     background-color: var(--block-background-fill) !important;
     color: var(--chatbot-color-dark) !important;
+    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.2);
+}
+
+#gpt-panel > div {
+    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.06);
+}
+.dark #gpt-panel > div {
+    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.2);
 }
 
 /* 屏幕宽度大于等于500px的设备 */
 /* update on 2023.4.8: 高度的细致调整已写入JavaScript */
-@media screen and (min-width: 500px) {
+/* @media screen and (min-width: 500px) {
     #main_chatbot {
         height: calc(100vh - 200px);
     }
     #main_chatbot .wrap {
         max-height: calc(100vh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
     }
-}
+} */
 /* 屏幕宽度小于500px的设备 */
-@media screen and (max-width: 499px) {
+/* @media screen and (max-width: 499px) {
     #main_chatbot {
         height: calc(100vh - 140px);
     }
@@ -474,8 +487,8 @@ ol:not(.options), ul:not(.options) {
     #app_title h1{
         letter-spacing: -1px; font-size: 22px;
     }
-}
-#main_chatbot .wrap {
+} */
+#gpt-chatbot .wrap {
     overflow-x: hidden
 }
 /* 对话气泡 */
@@ -491,11 +504,19 @@ ol:not(.options), ul:not(.options) {
 [data-testid = "bot"] {
     max-width: 85%;
     border-bottom-left-radius: 0 !important;
+    background-color: var(--message-bot-background-color-light) !important;
 }
 [data-testid = "user"] {
     max-width: 85%;
     width: auto !important;
     border-bottom-right-radius: 0 !important;
+    background-color: var(--message-user-background-color-light) !important;
+}
+.dark [data-testid = "bot"] {
+    background-color: var(--message-bot-background-color-dark) !important;
+}
+.dark [data-testid = "user"] {
+    background-color: var(--message-user-background-color-dark) !important;
 }
 
 .message p {

themes/green.js

@@ -0,0 +1,41 @@
+
+var academic_chat = null;
+
+var sliders = null;
+var rangeInputs = null;
+var numberInputs = null;
+
+function set_elements() {
+    academic_chat = document.querySelector('gradio-app');
+    async function get_sliders() {
+        sliders = document.querySelectorAll('input[type="range"]');
+        while (sliders.length == 0) {
+            await new Promise(r => setTimeout(r, 100));
+            sliders = document.querySelectorAll('input[type="range"]');
+        }
+        setSlider();
+    }
+    get_sliders();
+}
+
+function setSlider() {
+    rangeInputs = document.querySelectorAll('input[type="range"]');
+    numberInputs = document.querySelectorAll('input[type="number"]')
+    function setSliderRange() {
+        var range = document.querySelectorAll('input[type="range"]');
+        range.forEach(range => {
+            range.style.backgroundSize = (range.value - range.min) / (range.max - range.min) * 100 + '% 100%';
+        });
+    }
+    setSliderRange();
+    rangeInputs.forEach(rangeInput => {
+        rangeInput.addEventListener('input', setSliderRange);
+    });
+    numberInputs.forEach(numberInput => {
+        numberInput.addEventListener('input', setSliderRange);
+    })
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    set_elements();
+});

themes/green.py

@@ -63,7 +63,7 @@ def adjust_theme():
             button_secondary_background_fill_dark="*neutral_900",
             button_secondary_text_color="*neutral_800",
             button_secondary_text_color_dark="white",
-            background_fill_primary="#F7F7F7",
+            background_fill_primary="*neutral_50",
             background_fill_primary_dark="#1F1F1F",
             block_title_text_color="*primary_500",
             block_title_background_fill_dark="*primary_900",
@@ -87,6 +87,10 @@ def adjust_theme():
                 <script src="file=docs/waifu_plugin/jquery-ui.min.js"></script>
                 <script src="file=docs/waifu_plugin/autoload.js"></script>
             """
+        
+        with open('themes/green.js', 'r', encoding='utf8') as f:
+            js += f"<script>{f.read()}</script>"
+        
         gradio_original_template_fn = gr.routes.templates.TemplateResponse
         def gradio_new_template_fn(*args, **kwargs):
             res = gradio_original_template_fn(*args, **kwargs)