Update app.py

app.py

@@ -735,55 +735,69 @@ h3 {
     line-height: 1.8 !important;
 }
 
-/* استایل برای اسلایدر استاندارد Streamlit */
+/* استایل برای اسلایدر استاندارد Streamlit (فلیپ‌شده) */
 .stSlider {
-    direction: ltr !important; /* جلوگیری از بهم‌ریختگی در rtl */
+    direction: ltr !important; /* حفظ ltr برای اسلایدر */
     width: 100% !important;
     margin: 0 auto !important;
     padding: 0 !important;
     position: relative !important;
+    transform: scaleX(-1) !important; /* فلیپ کردن اسلایدر */
 }
 
 .stSlider [role="slider"] {
-    background-color: #f0e6ff !important; /* رنگ پس‌زمینه مسیر */
-    height: 10px !important;
-    border-radius: 5px !important;
+    background-color: #e6e6fa !important; /* رنگ پس‌زمینه مسیر */
+    height: 12px !important;
+    border-radius: 6px !important;
     width: 100% !important;
     position: relative !important;
+    transform: scaleX(-1) !important; /* معکوس کردن مسیر */
 }
 
 .stSlider [role="slider"]::-webkit-slider-thumb {
     background-color: #6a0dad !important; /* رنگ دستگیره */
-    border: 2px solid #ffffff !important;
-    width: 20px !important;
-    height: 20px !important;
+    border: 3px solid #ffffff !important;
+    width: 24px !important;
+    height: 24px !important;
     border-radius: 50% !important;
     cursor: pointer !important;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
     position: relative !important;
+    transition: transform 0.2s ease !important;
+    transform: scaleX(-1) !important; /* معکوس کردن دستگیره */
+}
+
+.stSlider [role="slider"]::-webkit-slider-thumb:hover {
+    transform: scaleX(-1) scale(1.2) !important; /* بزرگ شدن موقع هاور */
 }
 
 .stSlider [role="slider"]::-moz-range-thumb {
     background-color: #6a0dad !important;
-    border: 2px solid #ffffff !important;
-    width: 20px !important;
-    height: 20px !important;
+    border: 3px solid #ffffff !important;
+    width: 24px !important;
+    height: 24px !important;
     border-radius: 50% !important;
     cursor: pointer !important;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
     position: relative !important;
+    transition: transform 0.2s ease !important;
+    transform: scaleX(-1) !important;
+}
+
+.stSlider [role="slider"]::-moz-range-thumb:hover {
+    transform: scaleX(-1) scale(1.2) !important;
 }
 
 .stSlider [role="slider"]::-webkit-slider-runnable-track {
-    background-color: #f0e6ff !important;
-    height: 10px !important;
-    border-radius: 5px !important;
+    background-color: #e6e6fa !important;
+    height: 12px !important;
+    border-radius: 6px !important;
 }
 
 .stSlider [role="slider"]::-moz-range-track {
-    background-color: #f0e6ff !important;
-    height: 10px !important;
-    border-radius: 5px !important;
+    background-color: #e6e6fa !important;
+    height: 12px !important;
+    border-radius: 6px !important;
 }
 
 /* اضافه کردن علامت‌های نقاط (ticks) */
@@ -793,29 +807,47 @@ h3 {
 .stSlider::before {
     content: '';
     position: absolute;
-    top: 10px;
+    top: 12px;
     width: 100%;
-    height: 10px;
+    height: 12px;
     pointer-events: none;
     background: repeating-linear-gradient(
         to right,
         #6a0dad 0,
-        #6a0dad 2px,
-        transparent 2px,
+        #6a0dad 3px,
+        transparent 3px,
         transparent 14.28%
     );
+    transform: scaleX(-1) !important; /* معکوس کردن ticks */
 }
 
-/* استایل برای لیبل‌های اسلایدر */
+/* اضافه کردن اعداد زیر نقاط (۷ تا ۱) */
+.stSlider::after {
+    content: '7 6 5 4 3 2 1';
+    position: absolute;
+    top: 28px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px !important;
+    color: #333333 !important;
+    font-family: 'B Nazanin' !important;
+    direction: ltr !important;
+    transform: scaleX(-1) !important; /* معکوس کردن اعداد */
+}
+
+/* استایل برای لیبل‌های اسلایدر (هماهنگ با فلیپ) */
 .slider-labels {
     display: flex !important;
     justify-content: space-between !important;
-    font-size: 12px !important;
-    margin-bottom: 5px !important;
+    font-size: 14px !important;
+    font-weight: bold !important;
+    margin-bottom: 8px !important;
     color: #333333 !important;
     font-family: 'B Nazanin' !important;
-    direction: rtl !important;
+    direction: ltr !important; /* هماهنگی با اسلایدر فلیپ‌شده */
     width: 100% !important;
+    transform: scaleX(-1) !important; /* فلیپ کردن لیبل‌ها */
 }
 
 /* استایل برای متن پاسخ انتخاب‌شده */
@@ -823,7 +855,8 @@ h3 {
     text-align: center !important;
     color: #6a0dad !important;
     font-weight: bold !important;
-    margin-top: 10px !important;
+    font-size: 16px !important;
+    margin-top: 12px !important;
     font-family: 'B Nazanin' !important;
     direction: rtl !important;
 }