Hugging Face's logo

Spaces:
sidbhasin
/
AI_TOOL_BUILDER_BY_SYNCMERCE
Running

App Files Community
sidbhasin commited on
Commit
7ec2e4a
•
1 Parent(s): 1694eca

Update app.css

Browse files
Files changed (1) hide show
  1. app.css +38 -64
app.css CHANGED
@@ -1,83 +1,57 @@
1
  .left_header {
2
- text-align: center;
3
- padding: 2rem;
4
- background: linear-gradient(135deg, #6366f1, #8b5cf6);
5
- border-radius: 15px;
6
- margin-bottom: 1.5rem;
7
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
8
- }
9
-
10
- .left_header img {
11
- max-width: 200px;
12
- margin-bottom: 1rem;
13
- transition: transform 0.3s ease;
14
- }
15
-
16
- .left_header img:hover {
17
- transform: scale(1.05);
18
- }
19
-
20
- .left_header h1 {
21
- color: white;
22
- font-size: 2rem;
23
- font-weight: 600;
24
- margin: 0;
25
  }
26
 
27
  .right_panel {
28
- background: white;
29
- border-radius: 15px;
30
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
31
- height: 100%;
32
  }
33
 
34
  .render_header {
35
- background: #f3f4f6;
36
- padding: 12px;
37
- border-radius: 15px 15px 0 0;
38
- display: flex;
39
- gap: 8px;
40
  }
41
 
42
  .header_btn {
43
- width: 12px;
44
- height: 12px;
45
- border-radius: 50%;
 
 
46
  }
47
 
48
- .header_btn:nth-child(1) { background: #ef4444; }
49
- .header_btn:nth-child(2) { background: #f59e0b; }
50
- .header_btn:nth-child(3) { background: #10b981; }
51
 
52
- .html_content {
53
- height: calc(100vh - 180px);
54
- overflow: auto;
55
- padding: 20px;
 
56
  }
57
 
58
  .right_content {
59
- padding: 2rem;
60
- display: flex;
61
- align-items: center;
62
- justify-content: center;
63
- height: calc(100vh - 180px);
64
  }
65
 
66
- /* Mobile Responsive Design */
67
- @media (max-width: 768px) {
68
- .left_header {
69
- padding: 1.5rem;
70
- }
71
-
72
- .left_header img {
73
- max-width: 150px;
74
- }
75
-
76
- .left_header h1 {
77
- font-size: 1.5rem;
78
- }
79
-
80
- .html_content {
81
- height: calc(100vh - 140px);
82
- }
83
  }
 
1
  .left_header {
2
+ display: flex;
3
+ flex-direction: column;
4
+ justify-content: center;
5
+ align-items: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  }
7
 
8
  .right_panel {
9
+ margin-top: 66px;
10
+ border: 1px solid #BFBFC4;
11
+ border-radius: 8px;
12
+ overflow: hidden;;
13
  }
14
 
15
  .render_header {
16
+ height: 30px;
17
+ width: 100%;
18
+ padding: 5px 16px;
19
+ background-color: #f5f5f5;
 
20
  }
21
 
22
  .header_btn {
23
+ display: inline-block;
24
+ height: 10px;
25
+ width: 10px;
26
+ border-radius: 50%;
27
+ margin-right: 4px;
28
  }
29
 
30
+ .render_header > .header_btn:nth-child(1) {
31
+ background-color: #f5222d;
32
+ }
33
 
34
+ .render_header > .header_btn:nth-child(2) {
35
+ background-color: #faad14;
36
+ }
37
+ .render_header > .header_btn:nth-child(3) {
38
+ background-color: #52c41a;
39
  }
40
 
41
  .right_content {
42
+ height: 920px;
43
+ display: flex;
44
+ flex-direction: column;
45
+ justify-content: center;
46
+ align-items: center;
47
  }
48
 
49
+ .history_chatbot button {
50
+ background: none;
51
+ border: none;
52
+ }
53
+
54
+ .html_content {
55
+ width: 100%;
56
+ height: 920px;
 
 
 
 
 
 
 
 
 
57
  }