Hugging Face's logo

Spaces:
MedhaCodes
/
Question-answering-APP
Sleeping

App Files Community
MedhaCodes commited on
Commit
19502b9
·
verified ·
1 Parent(s): c73ff66

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +135 -30
static/style.css CHANGED
@@ -1,49 +1,100 @@
1
- /* General Card and Shadows */
2
  body {
3
- font-family: 'Inter', sans-serif;
4
- background: linear-gradient(180deg, #dbeafe, #bfdbfe);
 
 
 
 
 
5
  }
6
 
7
- /* Answer Cards */
8
- #answer-box div {
9
- background: linear-gradient(135deg, #dbeafe, #e0e7ff);
10
- padding: 16px 20px;
11
- border-radius: 16px;
12
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
13
- margin-bottom: 12px;
14
- transition: background 0.3s, transform 0.2s;
15
  }
16
 
17
- #answer-box div:hover {
18
- background: linear-gradient(135deg, #c7d2fe, #e0e7ff);
19
- transform: translateY(-2px);
 
 
 
 
 
 
 
 
 
20
  }
21
 
22
- #answer-box p {
23
- margin: 5px 0;
 
 
 
24
  }
25
 
26
- #answer-box strong {
27
- color: #1e3a8a;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
29
 
30
- /* History Items */
31
  #history-list li {
32
- background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
33
- padding: 12px 14px;
34
- border-radius: 14px;
35
  cursor: pointer;
36
- transition: background 0.3s, transform 0.2s;
37
- list-style: none;
38
- word-wrap: break-word;
39
  }
40
 
41
  #history-list li:hover {
42
- background: linear-gradient(135deg, #bae6fd, #7dd3fc);
43
- transform: translateX(2px);
44
  }
45
 
46
- /* Scrollbars */
47
  #answer-box::-webkit-scrollbar,
48
  #history-list::-webkit-scrollbar {
49
  width: 8px;
@@ -51,6 +102,60 @@ body {
51
 
52
  #answer-box::-webkit-scrollbar-thumb,
53
  #history-list::-webkit-scrollbar-thumb {
54
- background-color: rgba(59, 130, 246, 0.6);
55
- border-radius: 4px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  }
 
1
+ /* ---------- GLOBAL STYLES ---------- */
2
  body {
3
+ font-family: 'Poppins', sans-serif;
4
+ background: linear-gradient(to bottom right, #bfdbfe, #a5b4fc);
5
+ min-height: 100vh;
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ padding: 1rem;
10
  }
11
 
12
+ /* ---------- CARD CONTAINER ---------- */
13
+ .container {
14
+ background: rgba(255, 255, 255, 0.9);
15
+ border-radius: 35px;
16
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
17
+ backdrop-filter: blur(10px);
18
+ border: 1px solid rgba(147, 197, 253, 0.3);
19
+ padding: 2rem;
20
  }
21
 
22
+ /* ---------- INPUT AREA ---------- */
23
+ textarea {
24
+ border-radius: 30px;
25
+ border: 1px solid #c7d2fe;
26
+ background-color: #eef2ff;
27
+ padding: 1rem 1.25rem;
28
+ font-size: 1.05rem;
29
+ color: #1e293b;
30
+ width: 100%;
31
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05);
32
+ resize: vertical;
33
+ transition: all 0.25s ease;
34
  }
35
 
36
+ textarea:focus {
37
+ outline: none;
38
+ border-color: #6366f1;
39
+ background-color: #e0e7ff;
40
+ box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
41
  }
42
 
43
+ /* ---------- BUTTON ---------- */
44
+ button {
45
+ font-weight: 700;
46
+ border: none;
47
+ border-radius: 30px;
48
+ background: linear-gradient(90deg, #2563eb, #7c3aed, #9333ea);
49
+ color: white;
50
+ padding: 1rem;
51
+ width: 100%;
52
+ font-size: 1.15rem;
53
+ letter-spacing: 0.5px;
54
+ box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
55
+ transition: all 0.3s ease;
56
+ }
57
+
58
+ button:hover {
59
+ transform: scale(1.03);
60
+ box-shadow: 0 8px 18px rgba(99, 102, 241, 0.4);
61
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #a855f7);
62
+ }
63
+
64
+ /* ---------- ANSWER BOX ---------- */
65
+ #answer-box {
66
+ background: linear-gradient(to bottom right, #eef2ff, #e0f2fe);
67
+ border: 1px solid #c7d2fe;
68
+ border-radius: 30px;
69
+ padding: 1.25rem;
70
+ font-size: 1.05rem;
71
+ color: #1e293b;
72
+ max-height: 350px;
73
+ overflow-y: auto;
74
+ box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
75
+ }
76
+
77
+ /* ---------- HISTORY BOX ---------- */
78
+ #history-list {
79
+ max-height: 200px;
80
+ overflow-y: auto;
81
  }
82
 
 
83
  #history-list li {
84
+ background: linear-gradient(to right, #e0e7ff, #f3e8ff);
85
+ padding: 0.9rem 1.2rem;
86
+ border-radius: 20px;
87
  cursor: pointer;
88
+ transition: all 0.25s ease;
89
+ font-weight: 500;
 
90
  }
91
 
92
  #history-list li:hover {
93
+ transform: scale(1.03);
94
+ background: linear-gradient(to right, #c7d2fe, #ddd6fe);
95
  }
96
 
97
+ /* ---------- SCROLLBAR ---------- */
98
  #answer-box::-webkit-scrollbar,
99
  #history-list::-webkit-scrollbar {
100
  width: 8px;
 
102
 
103
  #answer-box::-webkit-scrollbar-thumb,
104
  #history-list::-webkit-scrollbar-thumb {
105
+ background-color: rgba(99, 102, 241, 0.6);
106
+ border-radius: 6px;
107
+ }
108
+
109
+ /* ---------- TYPING EFFECT ---------- */
110
+ .typing {
111
+ border-right: 3px solid #6366f1;
112
+ white-space: nowrap;
113
+ overflow: hidden;
114
+ animation: typing 3s steps(40, end), blink 0.8s infinite;
115
+ }
116
+
117
+ @keyframes typing {
118
+ from { width: 0; }
119
+ to { width: 100%; }
120
+ }
121
+
122
+ @keyframes blink {
123
+ 50% { border-color: transparent; }
124
+ }
125
+
126
+ /* ---------- SHIMMER LOADING ---------- */
127
+ .shimmer {
128
+ background: linear-gradient(
129
+ 100deg,
130
+ rgba(255,255,255,0) 20%,
131
+ rgba(255,255,255,0.6) 50%,
132
+ rgba(255,255,255,0) 80%
133
+ );
134
+ background-size: 200% 100%;
135
+ animation: shimmer 1.5s infinite;
136
+ height: 80px;
137
+ border-radius: 25px;
138
+ margin-bottom: 10px;
139
+ }
140
+
141
+ @keyframes shimmer {
142
+ 100% { background-position: -200% 0; }
143
+ }
144
+
145
+ /* ---------- TITLES ---------- */
146
+ h1, h2 {
147
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
148
+ }
149
+
150
+ /* ---------- RESPONSIVE ---------- */
151
+ @media (max-width: 640px) {
152
+ textarea, button {
153
+ font-size: 1rem;
154
+ }
155
+ h1 {
156
+ font-size: 1.9rem;
157
+ }
158
+ h2 {
159
+ font-size: 1.4rem;
160
+ }
161
  }