Hugging Face's logo

Spaces:
ayush2917
/
BirthdayM
Sleeping

App Files Community
ayush2917 commited on
Commit
dde9712
·
verified ·
1 Parent(s): f464ce5

Update static/css/chat.css

Browse files
Files changed (1) hide show
  1. static/css/chat.css +52 -108
static/css/chat.css CHANGED
@@ -1,132 +1,76 @@
 
1
  .chat-container {
2
- display: flex;
3
- flex-direction: column;
4
- height: 70vh;
5
- max-height: 800px;
6
- background-color: var(--card-bg);
7
- border-radius: var(--radius-lg);
8
- box-shadow: var(--shadow-md);
9
- overflow: hidden;
10
  }
11
 
12
- .chat-header {
13
- background: linear-gradient(to right, var(--krishna-purple), var(--krishna-blue));
14
- color: white;
15
- padding: var(--space-md);
16
- text-align: center;
17
- font-size: 1.2rem;
18
- font-weight: 500;
19
- }
20
-
21
- .chat-messages {
22
- flex: 1;
23
- padding: var(--space-md);
24
- overflow-y: auto;
25
- scroll-behavior: smooth;
26
  }
27
 
28
  .message {
29
- display: flex;
30
- margin-bottom: var(--space-sm);
31
- align-items: flex-start;
32
- }
33
-
34
- .message-user {
35
- justify-content: flex-end;
36
- }
37
-
38
- .message-krishna {
39
- justify-content: flex-start;
40
- }
41
-
42
- .message-bubble {
43
- max-width: 70%;
44
- padding: var(--space-sm);
45
- border-radius: var(--radius-md);
46
- position: relative;
47
- word-wrap: break-word;
48
  }
49
 
50
- .message-user .message-bubble {
51
- background-color: var(--krishna-yellow);
52
- color: var(--krishna-dark);
53
- border-top-right-radius: 0;
 
54
  }
55
 
56
- .message-krishna .message-bubble {
57
- background-color: var(--krishna-purple);
58
- color: white;
59
- border-top-left-radius: 0;
60
- }
61
-
62
- .message-avatar {
63
- width: 40px;
64
- height: 40px;
65
- border-radius: 50%;
66
- margin-right: var(--space-sm);
67
- background-color: var(--krishna-peach);
68
- display: flex;
69
- align-items: center;
70
- justify-content: center;
71
- color: white;
72
- font-weight: bold;
73
- }
74
-
75
- .chat-input-container {
76
- display: flex;
77
- padding: var(--space-md);
78
- background-color: white;
79
- border-top: 1px solid rgba(0, 0, 0, 0.1);
80
  }
81
 
82
  .chat-input {
83
- flex: 1;
84
- padding: var(--space-sm);
85
- border: 1px solid rgba(0, 0, 0, 0.1);
86
- border-radius: var(--radius-md);
87
- margin-right: var(--space-sm);
88
- font-size: 1rem;
89
  }
90
 
91
- .chat-input:focus {
92
- outline: none;
93
- border-color: var(--krishna-purple);
 
 
 
 
 
94
  }
95
 
96
- .send-btn {
97
- background-color: var(--krishna-purple);
98
- color: white;
99
- border: none;
100
- border-radius: var(--radius-md);
101
- padding: 0 var(--space-md);
102
- cursor: pointer;
103
- transition: background-color 0.2s ease;
104
  }
105
 
106
- .send-btn:hover {
107
- background-color: var(--krishna-blue);
 
 
 
 
 
 
108
  }
109
 
110
- .typing-indicator {
111
- display: flex;
112
- padding: var(--space-sm);
113
- align-items: center;
114
  }
115
 
116
- .typing-dot {
117
- width: 8px;
118
- height: 8px;
119
- background-color: var(--krishna-purple);
120
- border-radius: 50%;
121
- margin: 0 2px;
122
- animation: typingAnimation 1.4s infinite ease-in-out;
123
- }
124
-
125
- .typing-dot:nth-child(1) { animation-delay: 0s; }
126
- .typing-dot:nth-child(2) { animation-delay: 0.2s; }
127
- .typing-dot:nth-child(3) { animation-delay: 0.4s; }
128
-
129
- @keyframes typingAnimation {
130
- 0%, 60%, 100% { transform: translateY(0); }
131
- 30% { transform: translateY(-5px); }
132
  }
 
1
+ /* Cute styles for chat page */
2
  .chat-container {
3
+ background: rgba(255, 255, 255, 0.9);
4
+ border-radius: 20px;
5
+ padding: 20px;
6
+ max-width: 800px;
7
+ margin: 20px auto;
8
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 
 
9
  }
10
 
11
+ .chat-history {
12
+ max-height: 400px;
13
+ overflow-y: auto;
14
+ padding: 10px;
 
 
 
 
 
 
 
 
 
 
15
  }
16
 
17
  .message {
18
+ margin: 10px 0;
19
+ padding: 15px;
20
+ border-radius: 20px;
21
+ max-width: 70%;
22
+ animation: slideIn 0.5s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  }
24
 
25
+ .message.krishna {
26
+ background: #1E90FF;
27
+ color: #FFF;
28
+ margin-left: auto;
29
+ border-top-right-radius: 5px;
30
  }
31
 
32
+ .message.manavi {
33
+ background: #FF69B4;
34
+ color: #FFF;
35
+ margin-right: auto;
36
+ border-top-left-radius: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  }
38
 
39
  .chat-input {
40
+ display: flex;
41
+ margin-top: 20px;
 
 
 
 
42
  }
43
 
44
+ .chat-input input {
45
+ flex: 1;
46
+ padding: 10px;
47
+ border: 2px solid #32CD32;
48
+ border-radius: 25px 0 0 25px;
49
+ font-family: 'Comic Neue', cursive;
50
+ outline: none;
51
+ transition: border-color 0.3s ease;
52
  }
53
 
54
+ .chat-input input:focus {
55
+ border-color: #FF8C00;
56
+ box-shadow: 0 0 5px rgba(255, 140, 0, 0.5);
 
 
 
 
 
57
  }
58
 
59
+ .chat-input button {
60
+ padding: 10px 20px;
61
+ background: #32CD32;
62
+ color: #FFF;
63
+ border: none;
64
+ border-radius: 0 25px 25px 0;
65
+ cursor: pointer;
66
+ transition: background 0.3s ease;
67
  }
68
 
69
+ .chat-input button:hover {
70
+ background: #FF69B4;
 
 
71
  }
72
 
73
+ @keyframes slideIn {
74
+ from { opacity: 0; transform: translateX(20px); }
75
+ to { opacity: 1; transform: translateX(0); }
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }