Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -28,15 +28,14 @@ def cloud_button(label, key=None, color=None):
|
|
28 |
color_class = f"color-{color}" if color else ""
|
29 |
cloud_button_html = f"""
|
30 |
<div class="cloud {color_class}" id="{button_id}" style="margin-bottom: 20px;">
|
31 |
-
<div class="circle" style="width: 80px; height: 80px; left: -
|
32 |
-
<div class="circle" style="width: 70px; height: 70px; left: -
|
33 |
-
<div class="circle" style="width: 60px; height: 60px; left: -30px;"></div>
|
34 |
-
<div class="circle" style="width: 50px; height: 50px; left: -15px;"></div>
|
35 |
<div class="rectangle">{label}</div>
|
36 |
-
<div class="circle" style="width:
|
37 |
-
<div class="circle" style="width:
|
38 |
-
<div class="circle" style="width:
|
39 |
-
<div class="circle" style="width:
|
|
|
40 |
</div>
|
41 |
<style>
|
42 |
.cloud {{
|
@@ -69,6 +68,15 @@ def cloud_button(label, key=None, color=None):
|
|
69 |
top: 50%;
|
70 |
transform: translateY(-50%);
|
71 |
}}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
72 |
|
73 |
.cloud:hover .rectangle {{
|
74 |
background-color: #008CBA;
|
|
|
28 |
color_class = f"color-{color}" if color else ""
|
29 |
cloud_button_html = f"""
|
30 |
<div class="cloud {color_class}" id="{button_id}" style="margin-bottom: 20px;">
|
31 |
+
<div class="circle" style="width: 80px; height: 80px; left: -40px;"></div>
|
32 |
+
<div class="circle" style="width: 70px; height: 70px; left: -20px;"></div>
|
|
|
|
|
33 |
<div class="rectangle">{label}</div>
|
34 |
+
<div class="circle" style="width: 70px; height: 70px; right: -20px;"></div>
|
35 |
+
<div class="circle" style="width: 80px; height: 80px; right: -40px;"></div>
|
36 |
+
<div class="circle middle" style="width: 100px; height: 100px;"></div>
|
37 |
+
<div class="circle middle" style="width: 120px; height: 120px; top: -10px;"></div>
|
38 |
+
<div class="circle middle" style="width: 140px; height: 140px; top: -20px;"></div>
|
39 |
</div>
|
40 |
<style>
|
41 |
.cloud {{
|
|
|
68 |
top: 50%;
|
69 |
transform: translateY(-50%);
|
70 |
}}
|
71 |
+
.circle.middle {{
|
72 |
+
position: absolute;
|
73 |
+
background-color: #f8f9fa;
|
74 |
+
z-index: 0;
|
75 |
+
border-radius: 50%;
|
76 |
+
top: 50%;
|
77 |
+
left: 50%;
|
78 |
+
transform: translate(-50%, -50%);
|
79 |
+
}}
|
80 |
|
81 |
.cloud:hover .rectangle {{
|
82 |
background-color: #008CBA;
|