Upload styles.py

styles.py

@@ -85,11 +85,17 @@ def get_css_styles():
             border-radius: 4px;
             height: 12px;
         }
+        /* Ensure 100% progress bars fill completely */
+        .progress[style*="100%"] {
+            width: 100% !important;
+        }
         .progress-bar {
             background-color: #f5f5f5;
             border-radius: 4px;
             overflow: hidden;
             position: relative;
+            width: 100%;
+            height: 12px;
         }
         .score-item {
             margin: 10px 0;
@@ -435,28 +441,46 @@ def get_css_styles():
             cursor: help;
         }
         .tooltip .tooltip-icon {
-            font-size: 14px;
-            color: #666;
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            background: linear-gradient(135deg, #64748b, #475569);
+            color: white;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 18px;
+            font-size: 12px;
+            font-weight: bold;
+            margin-left: 8px;
+            cursor: help;
+            box-shadow: 0 2px 4px rgba(100, 116, 139, 0.3);
+            transition: all 0.2s ease;
+        }
+        .tooltip .tooltip-icon:hover {
+            background: linear-gradient(135deg, #475569, #334155);
+            transform: scale(1.1);
+            box-shadow: 0 3px 6px rgba(100, 116, 139, 0.4);
         }
         .tooltip .tooltip-text {
             visibility: hidden;
-            width: 250px;
+            width: 280px;
             background-color: rgba(44, 62, 80, 0.95);
             color: white;
             text-align: left;
             border-radius: 8px;
-            padding: 8px 10px;
+            padding: 12px 15px;
             position: absolute;
-            z-index: 100;
-            bottom: 150%;
+            z-index: 1000;
+            bottom: calc(100% + 15px);
             left: 50%;
             transform: translateX(-50%);
             opacity: 0;
             transition: all 0.3s ease;
             font-size: 14px;
-            line-height: 1.3;
+            line-height: 1.4;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.1)
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            white-space: normal;
             margin-bottom: 10px;
         }
         .tooltip.tooltip-left .tooltip-text {
@@ -494,9 +518,9 @@ def get_css_styles():
             content: "";
             position: absolute;
             top: 100%;
-            left: 20%;  /* 調整箭頭位置 */
-            margin-left: -5px;
-            border-width: 5px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 8px;
             border-style: solid;
             border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
         }
@@ -511,16 +535,6 @@ def get_css_styles():
             visibility: visible;
             opacity: 1;
         }
-        .tooltip .tooltip-text::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 8px;
-            border-style: solid;
-            border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
-        }
         .uncertainty-mode .tooltip .tooltip-text {
             position: absolute;
             left: 100%;
@@ -570,11 +584,18 @@ def get_css_styles():
             border-radius: 6px;
             overflow: hidden;
             margin: 8px 0;
+            width: 100%;
+            position: relative;
         }
         .progress {
             height: 100%;
             border-radius: 6px;
             transition: width 0.6s ease;
+            min-width: 0;
+        }
+        .progress[style*="width: 100%"] {
+            width: 100% !important;
+            border-radius: 6px;
         }
         .percentage {
             float: right;