Hugging Face's logo

Spaces:
sidbhasin
/
AI_TOOL_BUILDER_BY_SYNCMERCE
Sleeping

App Files Community
sidbhasin commited on
Commit
74f50bf
·
verified ·
1 Parent(s): 849ae25

Update app.css

Browse files
Files changed (1) hide show
  1. app.css +64 -38
app.css CHANGED
@@ -1,57 +1,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
  }
 
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
  }