Hugging Face's logo

Spaces:
Jahadona
/
khaterekhan2
Runtime error

App Files Community
Jahadona commited on
Commit
2c35027
·
verified ·
1 Parent(s): e8ddb95

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +258 -125
style.css CHANGED
@@ -1,126 +1,259 @@
1
- /* تعریف فونت وزیرمتن Regular */
2
- @font-face {
3
- font-family: 'Vazirmatn'; /* نامی که برای این فونت در CSS استفاده میکنیم */
4
- src: url('./fonts/Vazirmatn-Regular.woff2') format('woff2'); /* مسیر فایل فونت و فرمت آن نسبت به فایل CSS */
5
- font-weight: normal; /* این تعریف برای وزن معمولی فونت است */
6
- font-style: normal; /* سبک عادی (مورب نیست) */
7
- }
8
-
9
- /* تعریف فونت وزیرمتن Bold */
10
- @font-face {
11
- font-family: 'Vazirmatn'; /* همان نام، اما برای وزن متفاوت */
12
- src: url('./fonts/Vazirmatn-Bold.woff2') format('woff2'); /* مسیر فایل فونت Bold نسبت به فایل CSS */
13
- font-weight: bold; /* این تعریف برای وزن پررنگ فونت است */
14
- font-style: normal;
15
- }
16
-
17
- /* سبک‌های عمومی برای بدنه صفحه - حالا از فونت تعریف شده با @font-face استفاده میکنیم */
18
- body {
19
- font-family: 'Vazirmatn', sans-serif; /* استفاده از نامی که در @font-face تعریف کردیم */
20
- margin: 0;
21
- padding: 20px;
22
- background-color: #f4f4f4;
23
- color: #333;
24
- direction: rtl;
25
- text-align: right;
26
- }
27
-
28
- /* سبک برای کانتینر اصلی که محتوا را در بر می‌گیرد */
29
- .container {
30
- max-width: 800px;
31
- margin: 20px auto;
32
- padding: 20px;
33
- background-color: #fff;
34
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
35
- border-radius: 8px;
36
- }
37
-
38
- /* سبک برای عنوان اصلی */
39
- h1 {
40
- text-align: center;
41
- color: #0056b3;
42
- margin-bottom: 30px;
43
- }
44
-
45
- /* سبک برای بخش جستجو */
46
- .search-section {
47
- margin-bottom: 30px;
48
- padding: 15px;
49
- border: 1px solid #ddd;
50
- border-radius: 5px;
51
- background-color: #e9e9e9;
52
- }
53
-
54
- /* سبک برای برچسب کادر سؤال */
55
- .search-section label {
56
- display: block;
57
- margin-bottom: 8px;
58
- font-weight: bold;
59
- }
60
-
61
- /* سبک برای کادر ورود سؤال (textarea) */
62
- #userQuestion {
63
- width: 100%;
64
- padding: 10px;
65
- margin-bottom: 10px;
66
- border: 1px solid #ccc;
67
- border-radius: 4px;
68
- box-sizing: border-box;
69
- font-size: 1rem;
70
- /* اعمال فونت در کادر متن - این قبلا هم اضافه شده بود */
71
- font-family: 'Vazirmatn', sans-serif;
72
- direction: rtl;
73
- text-align: right;
74
- resize: vertical;
75
- }
76
-
77
- /* سبک برای دکمه جستجو */
78
- #searchButton {
79
- display: block;
80
- width: 100%;
81
- padding: 10px;
82
- background-color: #007bff;
83
- color: white;
84
- border: none;
85
- border-radius: 4px;
86
- cursor: pointer;
87
- font-size: 1.1rem;
88
- transition: background-color 0.3s ease;
89
- /* ****** این خط اضافه شده است ****** */
90
- font-family: 'Vazirmatn', sans-serif; /* اعمال فونت وزیرمتن به دکمه */
91
- /* ********************************** */
92
- }
93
-
94
- /* سبک هنگام بردن ماوس روی دکمه */
95
- #searchButton:hover {
96
- background-color: #0056b3;
97
- }
98
-
99
- /* سبک برای بخش نمایش نتایج */
100
- .results-section {
101
- margin-top: 30px;
102
- }
103
-
104
- /* سبک برای عنوان نتایج */
105
- .results-section h2 {
106
- color: #0056b3;
107
- margin-bottom: 15px;
108
- text-align: right;
109
- }
110
-
111
- /* سبک برای ناحیه نمایش نتایج */
112
- #searchResults {
113
- border: 1px solid #ddd;
114
- padding: 15px;
115
- border-radius: 5px;
116
- background-color: #fff;
117
- min-height: 100px;
118
- white-space: pre-wrap;
119
- word-wrap: break-word;
120
- }
121
-
122
- /* سبک پیش‌فرض برای پاراگراف داخل نتایج (پیام اولیه) */
123
- #searchResults p {
124
- color: #666;
125
- text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
126
  }
 
1
+ /* تنظیمات عمومی برای فارسی */
2
+ body {
3
+ font-family: 'Vazirmatn', sans-serif; /* استفاده از فونت وزیرمتن */
4
+ line-height: 1.6; /* فاصله خطوط */
5
+ margin: 0;
6
+ padding: 20px;
7
+ background-color: #f4f4f4; /* رنگ پس زمینه ملایم */
8
+ color: #333; /* رنگ متن اصلی */
9
+ direction: rtl; /* جهت متن راست به چپ */
10
+ text-align: right; /* تراز متن به راست */
11
+ }
12
+
13
+ /* کانتینر اصلی برای محدود کردن عرض و مرکز قرار دادن محتوا */
14
+ .container {
15
+ max-width: 800px; /* حداکثر عرض کانتینر */
16
+ margin: 20px auto; /* فاصله از بالا و پایین و مرکز افقی */
17
+ background-color: #fff; /* رنگ پس زمینه کانتینر */
18
+ padding: 30px; /* پدینگ داخلی */
19
+ border-radius: 10px; /* گوشه های گرد */
20
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* سایه ملایم */
21
+ }
22
+
23
+ /* استایل عنوان های اصلی */
24
+ h1 {
25
+ color: #333;
26
+ text-align: center; /* عنوان اصلی وسط چین */
27
+ margin-bottom: 5px; /* کاهش فاصله بعد از عنوان اصلی */
28
+ }
29
+
30
+ /* استایل عنوان بخش ها (مثل جستجو در خاطرات) */
31
+ h2 {
32
+ color: #333;
33
+ text-align: right; /* عنوان بخش ها راست چین */
34
+ margin-bottom: 20px;
35
+ }
36
+
37
+ /* استایل بخش های مختلف (انتخاب کتاب، جستجو، آستانه، نتایج در صفحه) */
38
+ .book-selection, .search-area, .results-per-page, .similarity-threshold-control {
39
+ margin-bottom: 20px;
40
+ padding: 15px;
41
+ background-color: #e9e9e9; /* رنگ پس زمینه ملایم برای بخش ها */
42
+ border-radius: 8px; /* گوشه های گرد بخش ها */
43
+ border: 1px solid #ddd; /* حاشیه بخش ها */
44
+ }
45
+
46
+ /* استایل لیبل های چک باکس */
47
+ .book-selection label {
48
+ margin-left: 10px; /* فاصله بین لیبل و چک باکس در RTL */
49
+ }
50
+
51
+ /* استایل کادر ورودی جستجو */
52
+ .search-area input[type="text"] {
53
+ width: calc(100% - 100px); /* عرض کادر ورودی منهای دکمه و فاصله */
54
+ padding: 10px;
55
+ margin-left: 10px; /* فاصله بین کادر و دکمه در RTL */
56
+ border: 1px solid #ccc;
57
+ border-radius: 5px;
58
+ font-size: 1em;
59
+ font-family: 'Vazirmatn', sans-serif; /* اعمال فونت */
60
+ box-sizing: border-box; /* برای جلوگیری از سرریز شدن عرض */
61
+ direction: rtl; /* برای تایپ فارسی */
62
+ }
63
+
64
+ /* استایل دکمه جستجو */
65
+ .search-area button {
66
+ padding: 10px 20px;
67
+ background-color: #5cb85c; /* رنگ سبز */
68
+ color: white;
69
+ border: none;
70
+ border-radius: 5px;
71
+ cursor: pointer;
72
+ font-size: 1em;
73
+ font-family: 'Vazirmatn', sans-serif; /* اعمال فونت */
74
+ transition: background-color 0.3s ease; /* انیمیشن تغییر رنگ */
75
+ }
76
+
77
+ /* استایل دکمه جستجو هنگام Hover */
78
+ .search-area button:hover:not(:disabled) {
79
+ background-color: #4cae4c; /* سبز تیره تر */
80
+ }
81
+ /* استایل دکمه جستجو هنگام غیرفعال بودن */
82
+ .search-area button:disabled {
83
+ background-color: #cccccc; /* خاکستری */
84
+ cursor: not-allowed; /* نشانگر عدم اجازه */
85
+ }
86
+
87
+ /* استایل بخش انتخاب تعداد نتایج در صفحه */
88
+ .results-per-page label {
89
+ margin-left: 10px;
90
+ }
91
+ .results-per-page select {
92
+ padding: 8px;
93
+ border-radius: 5px;
94
+ border: 1px solid #ccc;
95
+ font-family: 'Vazirmatn', sans-serif;
96
+ direction: rtl; /* برای نمایش صحیح در فایرفاکس و برخی مرورگرها */
97
+ }
98
+
99
+ /* استایل بخش کنترل آستانه شباهت */
100
+ .similarity-threshold-control {
101
+ text-align: center; /* وسط چین کردن محتوا */
102
+ }
103
+ .similarity-threshold-control label {
104
+ margin-left: 10px;
105
+ }
106
+ .similarity-threshold-control input[type="number"] {
107
+ padding: 8px;
108
+ border-radius: 5px;
109
+ border: 1px solid #ccc;
110
+ font-size: 1em;
111
+ width: 80px; /* عرض مناسب برای نمایش عدد */
112
+ text-align: center; /* وسط چین کردن متن درون کادر ورودی */
113
+ font-family: 'Vazirmatn', sans-serif;
114
+ direction: ltr; /* برای نمایش عدد از چپ به راست */
115
+ }
116
+ .similarity-threshold-control p {
117
+ margin-top: 5px;
118
+ font-size: 0.8em;
119
+ color: #555;
120
+ }
121
+
122
+ /* استایل پیام های وضعیت (مثل در حال بارگذاری) */
123
+ .status-message {
124
+ font-weight: bold;
125
+ margin-bottom: 15px;
126
+ text-align: center;
127
+ color: #555;
128
+ }
129
+ /* استایل پیام های خطا (مثل لطفا کتاب انتخاب کنید) */
130
+ .error-message {
131
+ font-weight: bold;
132
+ margin-bottom: 15px;
133
+ text-align: center;
134
+ color: red; /* رنگ قرمز برای خطاها */
135
+ }
136
+
137
+ /* استایل بخش نمایش نتایج */
138
+ #searchResults {
139
+ margin-top: 20px;
140
+ }
141
+ #searchResults p:first-child {
142
+ text-align: center; /* پیام اولیه قبل از نمایش نتایج وسط چین باشد */
143
+ }
144
+
145
+ /* استایل هر آیتم نتیجه */
146
+ .result-item {
147
+ background-color: #f9f9f9;
148
+ border: 1px solid #eee;
149
+ border-radius: 8px;
150
+ padding: 15px; /* پدینگ داخلی */
151
+ margin-bottom: 15px;
152
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
153
+ /* position: relative; */ /* دیگر برای دکمه کپی نیاز نیست */
154
+ /* padding-bottom: 40px; */ /* دیگر برای دکمه کپی position absolute نیاز نیست */
155
+ }
156
+
157
+ /* استایل پاراگراف های درون آیتم نتیجه */
158
+ .result-item p {
159
+ margin-bottom: 8px; /* فاصله بین پاراگراف های درون آیتم نتیجه */
160
+ word-wrap: break-word; /* شکستن کلمات طولانی */
161
+ }
162
+
163
+ /* استایل متن اصلی خاطره */
164
+ .result-passage {
165
+ font-size: 1em;
166
+ color: #333;
167
+ text-align: justify; /* متن خاطره تراز از دو طرف */
168
+ }
169
+
170
+ /* استایل مرجع خاطره */
171
+ .result-reference {
172
+ font-size: 0.9em;
173
+ color: #555;
174
+ margin-top: 10px; /* کمی فاصله بیشتر بعد از متن خاطره */
175
+ word-wrap: break-word; /* شکستن کلمات طولانی */
176
+ }
177
+
178
+ /* استایل نام کتاب */
179
+ .result-book-title {
180
+ font-size: 0.85em;
181
+ color: #777;
182
+ font-style: italic; /* نام کتاب به صورت کج */
183
+ margin-top: 5px; /* فاصله بعد از مرجع */
184
+ word-wrap: break-word; /* شکستن کلمات طولانی */
185
+ }
186
+
187
+ /* استایل امتیاز شباهت */
188
+ .result-similarity {
189
+ font-size: 0.85em;
190
+ color: #007bff; /* رنگ آبی برای امتیاز */
191
+ font-weight: bold;
192
+ float: right; /* نمایش امتیاز در سمت راست */
193
+ margin-right: 10px; /* فاصله از سمت راست */
194
+ direction: ltr; /* برای نمایش عدد شباهت از چپ به راست */
195
+ /* clear: both; */ /* ممکن است نیاز نباشد اگر دکمه در انتها باشد */
196
+ }
197
+
198
+ /* استایل بخش توضیحی */
199
+ .explanation-text {
200
+ margin-bottom: 20px;
201
+ padding: 15px;
202
+ background-color: #f9f9f9;
203
+ border: 1px solid #eee;
204
+ border-radius: 8px;
205
+ text-align: justify;
206
+ line-height: 1.6;
207
+ font-size: 0.95em;
208
+ color: #333;
209
+ }
210
+ .explanation-text p {
211
+ margin-bottom: 10px;
212
+ }
213
+ .explanation-text p:last-child {
214
+ margin-bottom: 0;
215
+ }
216
+ /* استایل برای متن بولد در بخش توضیحی */
217
+ .explanation-text strong {
218
+ font-weight: bold; /* اطمینان از اعمال استایل بولد */
219
+ color: #333; /* رنگ متن بولد را هم تنظیم کنید اگر می خواهید متفاوت باشد از رنگ پیش فرض #555 */
220
+ }
221
+
222
+
223
+ /* استایل فوتر */
224
+ .app-footer {
225
+ margin-top: 40px;
226
+ text-align: center;
227
+ font-size: 0.9em;
228
+ color: #555;
229
+ padding-top: 20px; /* فاصله از محتوای بالا */
230
+ border-top: 1px solid #eee; /* خط جداکننده بالای فوتر */
231
+ }
232
+
233
+ /* استایل دکمه کپی */
234
+ .copy-button {
235
+ padding: 5px 10px;
236
+ background-color: #007bff; /* رنگ آبی */
237
+ color: white;
238
+ border: none;
239
+ border-radius: 4px;
240
+ cursor: pointer;
241
+ font-size: 0.85em;
242
+ font-family: 'Vazirmatn', sans-serif;
243
+ transition: background-color 0.2s ease;
244
+ /* ****** استایل برای چیدمان بلوکی و نمایش در انتهای آیتم نتیجه ****** */
245
+ display: block; /* دکمه به صورت یک بلوک جداگانه نمایش داده می شود */
246
+ margin-top: 15px; /* فاصله از عنصرهای بالا */
247
+ width: fit-content; /* عرض دکمه به اندازه محتوای آن باشد */
248
+ margin-left: auto; /* در چیدمان راست به چپ (RTL)، این باعث می شود دکمه به سمت چپ منتقل شود */
249
+ margin-right: 0; /* اطمینان از اینکه حاشیه راست صفر است */
250
+ /* ****************************************************************** */
251
+ }
252
+
253
+ .copy-button:hover {
254
+ background-color: #0056b3; /* آبی تیره تر هنگام Hover */
255
+ }
256
+
257
+ .copy-button:active {
258
+ background-color: #004085; /* آبی تیره تر هنگام کلیک */
259
  }