Hugging Face's logo

Spaces:
danhtran2mind
/
Vietnamese-Health-Chat-LoRA
Running

App Files Community
danhtran2mind commited on
Commit
738a624
·
verified ·
1 Parent(s): a140ab5

Update gradio_app/static/styles.css

Browse files
Files changed (1) hide show
  1. gradio_app/static/styles.css +147 -147
gradio_app/static/styles.css CHANGED
@@ -1,148 +1,148 @@
1
- .intro-container {
2
- max-width: 800px;
3
- padding: 40px;
4
- background: #ffffff;
5
- border-radius: 15px;
6
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
7
- text-align: center;
8
- animation: fadeIn 1s ease-in-out;
9
- }
10
- h1 {
11
- font-size: 1.5em;
12
- color: #007bff;
13
- text-transform: uppercase;
14
- letter-spacing: 1px;
15
- margin-bottom: 20px;
16
- }
17
- h2 {
18
- font-size: 1.3em;
19
- color: #555555;
20
- margin-bottom: 30px;
21
- }
22
- .intro-highlight {
23
- font-size: 1.5em;
24
- color: #333333;
25
- margin: 20px 0;
26
- padding: 20px;
27
- background: #f8f9fa;
28
- border-left: 5px solid #007bff;
29
- border-radius: 10px;
30
- transition: transform 0.3s ease;
31
- }
32
- .intro-highlight:hover {
33
- transform: scale(1.02);
34
- }
35
- .intro-disclaimer {
36
- font-size: 1.3em;
37
- color: #333333;
38
- background: #e9ecef;
39
- padding: 20px;
40
- border-radius: 10px;
41
- border: 1px solid #007bff;
42
- margin-top: 30px;
43
- }
44
- strong {
45
- color: #007bff;
46
- font-weight: bold;
47
- }
48
- .intro-icon {
49
- font-size: 1.4em;
50
- margin-right: 8px;
51
- }
52
- @keyframes fadeIn {
53
- 0% { opacity: 0; transform: translateY(-20px); }
54
- 100% { opacity: 1; transform: translateY(0); }
55
- }
56
-
57
- .spinner {
58
- animation: spin 1s linear infinite;
59
- display: inline-block;
60
- margin-right: 8px;
61
- }
62
- @keyframes spin {
63
- from { transform: rotate(0deg); }
64
- to { transform: rotate(360deg); }
65
- }
66
- .thinking-summary {
67
- cursor: pointer;
68
- padding: 8px;
69
- background: #f5f5f5;
70
- border-radius: 4px;
71
- margin: 4px 0;
72
- }
73
- .thought-content {
74
- padding: 10px;
75
- background: none;
76
- border-radius: 4px;
77
- margin: 5px 0;
78
- }
79
- .thinking-container {
80
- border-left: 3px solid #facc15;
81
- padding-left: 10px;
82
- margin: 8px 0;
83
- background: none;
84
- }
85
- .thinking-container:empty {
86
- background: #e0e0e0;
87
- }
88
- details:not([open]) .thinking-container {
89
- border-left-color: #290c15;
90
- }
91
- details {
92
- border: 1px solid #e0e0e0 !important;
93
- border-radius: 8px !important;
94
- padding: 12px !important;
95
- margin: 8px 0 !important;
96
- transition: border-color 0.2s;
97
- }
98
- .think-section {
99
- background-color: #e6f3ff;
100
- border-left: 4px solid #4a90e2;
101
- padding: 15px;
102
- margin: 10px 0;
103
- border-radius: 6px;
104
- font-size: 14px;
105
- }
106
- .final-answer {
107
- background-color: #f0f4f8;
108
- border-left: 4px solid #2ecc71;
109
- padding: 15px;
110
- margin: 10px 0;
111
- border-radius: 6px;
112
- font-size: 14px;
113
- }
114
- #output-container {
115
- position: relative;
116
- }
117
- .copy-button {
118
- position: absolute;
119
- top: 10px;
120
- right: 10px;
121
- padding: 5px 10px;
122
- background-color: #4a90e2;
123
- color: white;
124
- border: none;
125
- border-radius: 4px;
126
- cursor: pointer;
127
- }
128
- .copy-button:hover {
129
- background-color: #357abd;
130
- }
131
- .chatbot .message.assistant {
132
- position: relative;
133
- }
134
- .chatbot .message.assistant::after {
135
- content: 'Copy';
136
- position: absolute;
137
- top: 10px;
138
- right: 10px;
139
- padding: 5px 10px;
140
- background-color: #4a90e2;
141
- color: white;
142
- border: none;
143
- border-radius: 4px;
144
- cursor: pointer;
145
- }
146
- .chatbot .message.assistant:hover::after {
147
- background-color: #357abd;
148
  }
 
1
+ .intro-container {
2
+ max-width: 800px;
3
+ padding: 40px;
4
+ background: #ffffff;
5
+ border-radius: 15px;
6
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
7
+ text-align: center;
8
+ animation: fadeIn 1s ease-in-out;
9
+ }
10
+ h1 {
11
+ font-size: 1.8em;
12
+ color: #007bff;
13
+ text-transform: uppercase;
14
+ letter-spacing: 1px;
15
+ margin-bottom: 20px;
16
+ }
17
+ h2 {
18
+ font-size: 1.6em;
19
+ color: #555555;
20
+ margin-bottom: 30px;
21
+ }
22
+ .intro-highlight {
23
+ font-size: 1.5em;
24
+ color: #333333;
25
+ margin: 20px 0;
26
+ padding: 20px;
27
+ background: #f8f9fa;
28
+ border-left: 5px solid #007bff;
29
+ border-radius: 10px;
30
+ transition: transform 0.3s ease;
31
+ }
32
+ .intro-highlight:hover {
33
+ transform: scale(1.02);
34
+ }
35
+ .intro-disclaimer {
36
+ font-size: 1.3em;
37
+ color: #333333;
38
+ background: #e9ecef;
39
+ padding: 20px;
40
+ border-radius: 10px;
41
+ border: 1px solid #007bff;
42
+ margin-top: 30px;
43
+ }
44
+ strong {
45
+ color: #007bff;
46
+ font-weight: bold;
47
+ }
48
+ .intro-icon {
49
+ font-size: 1.4em;
50
+ margin-right: 8px;
51
+ }
52
+ @keyframes fadeIn {
53
+ 0% { opacity: 0; transform: translateY(-20px); }
54
+ 100% { opacity: 1; transform: translateY(0); }
55
+ }
56
+
57
+ .spinner {
58
+ animation: spin 1s linear infinite;
59
+ display: inline-block;
60
+ margin-right: 8px;
61
+ }
62
+ @keyframes spin {
63
+ from { transform: rotate(0deg); }
64
+ to { transform: rotate(360deg); }
65
+ }
66
+ .thinking-summary {
67
+ cursor: pointer;
68
+ padding: 8px;
69
+ background: #f5f5f5;
70
+ border-radius: 4px;
71
+ margin: 4px 0;
72
+ }
73
+ .thought-content {
74
+ padding: 10px;
75
+ background: none;
76
+ border-radius: 4px;
77
+ margin: 5px 0;
78
+ }
79
+ .thinking-container {
80
+ border-left: 3px solid #facc15;
81
+ padding-left: 10px;
82
+ margin: 8px 0;
83
+ background: none;
84
+ }
85
+ .thinking-container:empty {
86
+ background: #e0e0e0;
87
+ }
88
+ details:not([open]) .thinking-container {
89
+ border-left-color: #290c15;
90
+ }
91
+ details {
92
+ border: 1px solid #e0e0e0 !important;
93
+ border-radius: 8px !important;
94
+ padding: 12px !important;
95
+ margin: 8px 0 !important;
96
+ transition: border-color 0.2s;
97
+ }
98
+ .think-section {
99
+ background-color: #e6f3ff;
100
+ border-left: 4px solid #4a90e2;
101
+ padding: 15px;
102
+ margin: 10px 0;
103
+ border-radius: 6px;
104
+ font-size: 14px;
105
+ }
106
+ .final-answer {
107
+ background-color: #f0f4f8;
108
+ border-left: 4px solid #2ecc71;
109
+ padding: 15px;
110
+ margin: 10px 0;
111
+ border-radius: 6px;
112
+ font-size: 14px;
113
+ }
114
+ #output-container {
115
+ position: relative;
116
+ }
117
+ .copy-button {
118
+ position: absolute;
119
+ top: 10px;
120
+ right: 10px;
121
+ padding: 5px 10px;
122
+ background-color: #4a90e2;
123
+ color: white;
124
+ border: none;
125
+ border-radius: 4px;
126
+ cursor: pointer;
127
+ }
128
+ .copy-button:hover {
129
+ background-color: #357abd;
130
+ }
131
+ .chatbot .message.assistant {
132
+ position: relative;
133
+ }
134
+ .chatbot .message.assistant::after {
135
+ content: 'Copy';
136
+ position: absolute;
137
+ top: 10px;
138
+ right: 10px;
139
+ padding: 5px 10px;
140
+ background-color: #4a90e2;
141
+ color: white;
142
+ border: none;
143
+ border-radius: 4px;
144
+ cursor: pointer;
145
+ }
146
+ .chatbot .message.assistant:hover::after {
147
+ background-color: #357abd;
148
  }