Hugging Face's logo

Spaces:
AZILS
/
puter
Running

App Files Community
Zain437 commited on
Commit
709ae9f
·
verified ·
1 Parent(s): 5490769

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +107 -18
style.css CHANGED
@@ -1,28 +1,117 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+ /* General layout */
2
  body {
3
+ font-family: 'Segoe UI', Arial, sans-serif;
4
+ margin: 0;
5
+ padding: 0;
6
+ display: flex;
7
+ justify-content: center;
8
+ align-items: center;
9
+ height: 100vh;
10
+ background: linear-gradient(135deg, #e0e7ff, #f3f4f6);
11
+ flex-direction: column;
12
  }
13
 
14
+ /* Chat container */
15
+ #chat-container {
16
+ width: 80%;
17
+ max-width: 600px;
18
+ background: #ffffff;
19
+ border-radius: 12px;
20
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
21
+ padding: 20px;
22
+ display: flex;
23
+ flex-direction: column;
24
  }
25
 
26
+ /* Messages box */
27
+ #messages {
28
+ flex-grow: 1;
29
+ height: 350px;
30
+ overflow-y: auto;
31
+ border-bottom: 1px solid #ddd;
32
+ margin-bottom: 15px;
33
+ padding: 10px;
34
+ display: flex;
35
+ flex-direction: column;
36
  }
37
 
38
+ /* Individual message styles */
39
+ .message {
40
+ margin: 8px 0;
41
+ padding: 10px 14px;
42
+ border-radius: 10px;
43
+ word-wrap: break-word;
44
+ max-width: 80%;
45
+ animation: fadeIn 0.3s ease-in-out;
46
  }
47
 
48
+ .message.user {
49
+ background-color: #007bff;
50
+ color: white;
51
+ align-self: flex-end;
52
+ border-bottom-right-radius: 2px;
53
+ }
54
+
55
+ .message.ai {
56
+ background-color: #f1f1f1;
57
+ color: #000;
58
+ align-self: flex-start;
59
+ border-bottom-left-radius: 2px;
60
+ }
61
+
62
+ /* Chat input area */
63
+ #chat-input {
64
+ display: flex;
65
+ gap: 10px;
66
+ }
67
+
68
+ #input-message {
69
+ flex-grow: 1;
70
+ padding: 10px;
71
+ border: 1px solid #ccc;
72
+ border-radius: 8px;
73
+ font-size: 14px;
74
+ outline: none;
75
+ transition: border-color 0.2s ease;
76
+ }
77
+
78
+ #input-message:focus {
79
+ border-color: #007bff;
80
+ }
81
+
82
+ button {
83
+ padding: 10px 20px;
84
+ background: #007bff;
85
+ border: none;
86
+ border-radius: 8px;
87
+ color: white;
88
+ cursor: pointer;
89
+ transition: 0.3s;
90
+ font-weight: 500;
91
+ }
92
+
93
+ button:hover {
94
+ background: #0056b3;
95
+ }
96
+
97
+ /* Footer */
98
+ .footer-text {
99
+ margin-top: 20px;
100
+ font-size: 14px;
101
+ color: #444;
102
+ }
103
+
104
+ /* Scrollbar styling */
105
+ #messages::-webkit-scrollbar {
106
+ width: 6px;
107
+ }
108
+ #messages::-webkit-scrollbar-thumb {
109
+ background: #ccc;
110
+ border-radius: 3px;
111
+ }
112
+
113
+ /* Simple fade-in animation */
114
+ @keyframes fadeIn {
115
+ from { opacity: 0; transform: translateY(5px); }
116
+ to { opacity: 1; transform: translateY(0); }
117
  }