Hugging Face's logo

Spaces:
Really-amin
/
My_Ai
Running

App Files
Really-amin commited on
Commit
dc4590e
·
verified ·
1 Parent(s): 0900cb7

Create styles.css

Browse files
Files changed (1) hide show
  1. styles.css +165 -0
styles.css ADDED
@@ -0,0 +1,165 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #3498db;
3
+ --secondary-color: #2980b9;
4
+ --background-color: #f0f3f5;
5
+ --text-color: #34495e;
6
+ --shadow-color: rgba(0, 0, 0, 0.1);
7
+ --message-bg-user: #3498db;
8
+ --message-bg-assistant: #ecf0f1;
9
+ }
10
+
11
+ body {
12
+ font-family: 'Vazirmatn', 'Tahoma', Arial, sans-serif;
13
+ background-color: var(--background-color);
14
+ margin: 0;
15
+ padding: 0;
16
+ display: flex;
17
+ justify-content: center;
18
+ align-items: center;
19
+ min-height: 100vh;
20
+ color: var(--text-color);
21
+ }
22
+
23
+ #chat-container {
24
+ width: 95%;
25
+ max-width: 1200px;
26
+ background: white;
27
+ border-radius: 20px;
28
+ box-shadow: 0 10px 30px var(--shadow-color);
29
+ overflow: hidden;
30
+ display: flex;
31
+ flex-direction: column;
32
+ height: 90vh;
33
+ }
34
+
35
+ #chat-header {
36
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
37
+ color: white;
38
+ padding: 20px;
39
+ font-size: 28px;
40
+ font-weight: bold;
41
+ display: flex;
42
+ justify-content: space-between;
43
+ align-items: center;
44
+ box-shadow: 0 2px 10px var(--shadow-color);
45
+ text-align: center;
46
+ }
47
+
48
+ .header-title {
49
+ flex-grow: 1;
50
+ text-align: center;
51
+ }
52
+
53
+ .header-icons {
54
+ display: flex;
55
+ gap: 15px;
56
+ }
57
+
58
+ .header-icon {
59
+ cursor: pointer;
60
+ font-size: 24px;
61
+ transition: transform 0.3s ease, opacity 0.3s ease;
62
+ }
63
+
64
+ .header-icon:hover {
65
+ transform: scale(1.1);
66
+ opacity: 0.8;
67
+ }
68
+
69
+ #chat-messages {
70
+ flex-grow: 1;
71
+ overflow-y: auto;
72
+ padding: 30px;
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 20px;
76
+ }
77
+
78
+ .message {
79
+ max-width: 75%;
80
+ padding: 15px 20px;
81
+ border-radius: 20px;
82
+ box-shadow: 0 3px 15px var(--shadow-color);
83
+ font-size: 16px;
84
+ line-height: 1.6;
85
+ transition: transform 0.3s ease;
86
+ }
87
+
88
+ .message:hover {
89
+ transform: translateY(-2px);
90
+ }
91
+
92
+ .user-message {
93
+ align-self: flex-end;
94
+ background-color: var(--message-bg-user);
95
+ color: white;
96
+ }
97
+
98
+ .assistant-message {
99
+ align-self: flex-start;
100
+ background-color: var(--message-bg-assistant);
101
+ border: 1px solid var(--secondary-color);
102
+ color: var(--text-color);
103
+ }
104
+
105
+ #input-container {
106
+ display: flex;
107
+ padding: 20px;
108
+ background: white;
109
+ border-top: 1px solid var(--secondary-color);
110
+ gap: 10px;
111
+ }
112
+
113
+ #user-input {
114
+ flex-grow: 1;
115
+ padding: 15px 25px;
116
+ border: 2px solid var(--secondary-color);
117
+ border-radius: 30px;
118
+ font-size: 16px;
119
+ font-family: 'Vazirmatn', 'Tahoma', Arial, sans-serif;
120
+ background: white;
121
+ transition: all 0.3s ease;
122
+ }
123
+
124
+ #user-input:focus {
125
+ outline: none;
126
+ box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
127
+ }
128
+
129
+ .input-button {
130
+ background: var(--primary-color);
131
+ color: white;
132
+ border: none;
133
+ border-radius: 50%;
134
+ width: 55px;
135
+ height: 55px;
136
+ font-size: 22px;
137
+ cursor: pointer;
138
+ display: flex;
139
+ justify-content: center;
140
+ align-items: center;
141
+ transition: all 0.3s ease;
142
+ box-shadow: 0 3px 15px var(--shadow-color);
143
+ }
144
+
145
+ .input-button:hover {
146
+ background-color: var(--secondary-color);
147
+ transform: translateY(-3px);
148
+ }
149
+
150
+ @media (max-width: 768px) {
151
+ #chat-container {
152
+ width: 100%;
153
+ height: 100vh;
154
+ border-radius: 0;
155
+ }
156
+
157
+ #chat-header {
158
+ font-size: 24px;
159
+ padding: 15px;
160
+ }
161
+
162
+ .message {
163
+ max-width: 85%;
164
+ }
165
+ }