Skip to content

Commit 660dee9

Browse files
pablogsalpablogsal
committed
WEP
1 parent 12f0da9 commit 660dee9

File tree

4 files changed

+790
-4
lines changed

4 files changed

+790
-4
lines changed

‎Lib/profile/flamegraph.css‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
body {
2+
font-family: 'Source Sans Pro', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background: #ffffff;
6+
color: #2e3338;
7+
line-height: 1.6;
8+
}
9+
10+
.header {
11+
background: linear-gradient(135deg, #3776ab 0%, #4584bb 100%);
12+
color: white;
13+
padding: 32px 0;
14+
box-shadow: 0 2px 10px rgba(55, 118, 171, 0.2);
15+
}
16+
17+
.header-content {
18+
max-width: 1200px;
19+
margin: 0 auto;
20+
padding: 0 24px;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: center;
25+
text-align: center;
26+
}
27+
28+
.python-logo {
29+
width: auto;
30+
height: 64px;
31+
margin-bottom: 16px;
32+
flex-shrink: 0;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
}
37+
38+
.python-logo img {
39+
height: 64px;
40+
width: auto;
41+
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
42+
}
43+
44+
.header-text h1 {
45+
margin: 0;
46+
font-size: 2.5em;
47+
font-weight: 600;
48+
color: white;
49+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
50+
}
51+
52+
.header-text .subtitle {
53+
margin: 8px 0 0 0;
54+
font-size: 1.1em;
55+
color: rgba(255, 255, 255, 0.9);
56+
font-weight: 300;
57+
}
58+
59+
.controls {
60+
background: #f8f9fa;
61+
border-bottom: 1px solid #e9ecef;
62+
padding: 20px 0;
63+
text-align: center;
64+
}
65+
66+
.controls-content {
67+
max-width: 1200px;
68+
margin: 0 auto;
69+
padding: 0 24px;
70+
}
71+
72+
.controls button {
73+
background: #3776ab;
74+
color: white;
75+
border: none;
76+
padding: 12px 24px;
77+
margin: 0 8px;
78+
border-radius: 6px;
79+
cursor: pointer;
80+
font-weight: 600;
81+
font-size: 14px;
82+
font-family: inherit;
83+
transition: all 0.2s ease;
84+
box-shadow: 0 2px 4px rgba(55, 118, 171, 0.2);
85+
}
86+
87+
.controls button:hover {
88+
background: #2d5aa0;
89+
transform: translateY(-1px);
90+
box-shadow: 0 4px 8px rgba(55, 118, 171, 0.3);
91+
}
92+
93+
.controls button.secondary {
94+
background: #ffd43b;
95+
color: #2e3338;
96+
}
97+
98+
.controls button.secondary:hover {
99+
background: #ffcd02;
100+
}
101+
102+
#chart {
103+
width: 100%;
104+
height: calc(100vh - 160px);
105+
overflow: hidden;
106+
background: #ffffff;
107+
padding: 0 40px;
108+
}
109+
110+
.d3-flame-graph rect {
111+
stroke: rgba(55, 118, 171, 0.3) !important;
112+
stroke-width: 1px !important;
113+
cursor: pointer;
114+
transition: all 0.1s ease;
115+
}
116+
117+
.d3-flame-graph rect:hover {
118+
stroke: #3776ab !important;
119+
stroke-width: 2px !important;
120+
filter: brightness(1.05);
121+
}
122+
123+
.d3-flame-graph text {
124+
font-family: 'Source Sans Pro', sans-serif !important;
125+
font-size: 12px !important;
126+
font-weight: 500 !important;
127+
fill: #2e3338 !important;
128+
pointer-events: none !important;
129+
}
130+
131+
.info-panel {
132+
position: fixed;
133+
bottom: 24px;
134+
left: 24px;
135+
background: white;
136+
padding: 24px;
137+
border-radius: 8px;
138+
border: 1px solid #e9ecef;
139+
font-size: 14px;
140+
max-width: 280px;
141+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
142+
z-index: 1000;
143+
}
144+
145+
.info-panel h3 {
146+
margin: 0 0 16px 0;
147+
color: #3776ab;
148+
font-weight: 600;
149+
font-size: 16px;
150+
border-bottom: 2px solid #ffd43b;
151+
padding-bottom: 8px;
152+
}
153+
154+
.info-panel p {
155+
margin: 12px 0;
156+
color: #5a6c7d;
157+
line-height: 1.5;
158+
}
159+
160+
.info-panel strong {
161+
color: #3776ab;
162+
}
163+
164+
.legend-panel {
165+
position: fixed;
166+
top: 24px;
167+
left: 24px;
168+
background: white;
169+
padding: 24px;
170+
border-radius: 8px;
171+
border: 1px solid #e9ecef;
172+
font-size: 14px;
173+
max-width: 320px;
174+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
175+
display: none;
176+
z-index: 1001;
177+
}
178+
179+
.legend-panel h3 {
180+
margin: 0 0 20px 0;
181+
color: #3776ab;
182+
font-weight: 600;
183+
font-size: 18px;
184+
text-align: center;
185+
border-bottom: 2px solid #ffd43b;
186+
padding-bottom: 8px;
187+
}
188+
189+
.legend-item {
190+
display: flex;
191+
align-items: center;
192+
margin: 12px 0;
193+
padding: 10px;
194+
border-radius: 6px;
195+
background: #f8f9fa;
196+
border: 1px solid #e9ecef;
197+
}
198+
199+
.legend-color {
200+
width: 28px;
201+
height: 18px;
202+
border-radius: 4px;
203+
margin-right: 16px;
204+
border: 1px solid rgba(0, 0, 0, 0.1);
205+
flex-shrink: 0;
206+
}
207+
208+
.legend-label {
209+
color: #2e3338;
210+
font-weight: 600;
211+
flex: 1;
212+
}
213+
214+
.legend-description {
215+
color: #5a6c7d;
216+
font-size: 12px;
217+
margin-top: 2px;
218+
font-weight: 400;
219+
}
220+
221+
.chart-container {
222+
background: #ffffff;
223+
margin: 0;
224+
padding: 12px 0;
225+
}

0 commit comments

Comments
 (0)