8000 Improved the design of the web debug toolbar · SCIF/symfony@9859125 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9859125

Browse files
javiereguiluzfabpot
javiereguiluz
authored and
fabpot
committed
Improved the design of the web debug toolbar
1 parent 1bc9aaa commit 9859125

File tree

2 files changed

+27
-20
lines changed

2 files changed

+27
-20
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
'subtle_border_and_shadow': 'background: #FFF; border: 1px solid #E0E0E0; box-shadow: 0px 0px 1px rgba(128, 128, 128, .2);'
88
} %}
99

10+
{# when updating any of these colors, do the same in toolbar.css.twig #}
11+
{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %}
12+
1013
{# Normalization
1114
(normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css)
1215
========================================================================= #}
@@ -232,9 +235,9 @@ table tbody ul {
232235
padding: 3px 7px;
233236
white-space: nowrap;
234237
}
235-
.label.status-success { background: #5E976E; color: #FFF; }
236-
.label.status-warning { background: #BC8034; color: #FFF; }
237-
.label.status-error { background: #B0413E; color: #FFF; }
238+
.label.status-success { background: {{ colors.success|raw }}; color: #FFF; }
239+
.label.status-warning { background: {{ colors.warning|raw }}; color: #FFF; }
240+
.label.status-error { background: {{ colors.error|raw }}; color: #FFF; }
238241

239242
{# Metrics
240243
------------------------------------------------------------------------- #}
@@ -341,11 +344,11 @@ tr.status-warning td {
341344
border-top: 1px solid #FAFAFA;
342345
}
343346

344-
.status-warning .colored {
345-
color: #BC8034;
347+
.status-warning .colored {
348+
color: {{ colors.warning|raw }};
346349
}
347350
.status-error .colored {
348-
color: #B0413E;
351+
color: {{ colors.error|raw }};
349352
}
350353

351354
{# Syntax highlighting
@@ -469,9 +472,9 @@ tr.status-warning td {
469472
text-decoration: underline;
470473
}
471474

472-
#summary .status-success { background: #5E976E; }
473-
#summary .status-warning { background: #BC8034; }
474-
#summary .status-error { background: #B0413E; }
475+
#summary .status-success { background: {{ colors.success|raw }}; }
476+
#summary .status-warning { background: {{ colors.warning|raw }}; }
477+
#summary .status-error { background: {{ colors.error|raw }}; }
475478

476479
#summary .status-success h2,
477480
#summary .status-success h2 a,
@@ -670,10 +673,10 @@ tr.status-warning td {
670673
}
671674

672675
#menu-profiler .label-status-warning .count {
673-
background: #BC8034;
676+
background: {{ colors.warning|raw }};
674677
}
675678
#menu-profiler .label-status-error .count {
676-
background: #B0413E;
679+
background: {{ colors.error|raw }};
677680
}
678681

679682
{# Timeline panel

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
{# when updating any of these colors, do the same in profiler.css.twig #}
2+
{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %}
3+
14
.sf-minitoolbar {
25
background-color: #222;
36
border-top-left-radius: 4px;
@@ -46,8 +49,8 @@
4649
}
4750
.sf-toolbarreset svg,
4851
.sf-toolbarreset img {
49-
max-height: 24px;
50-
max-width: 24px;
52+
max-height: 20px;
53+
max-width: 20px;
5154
}
5255

5356
.sf-toolbarreset .hide-button {
@@ -180,30 +183,31 @@
180183
padding: 3px 6px;
181184
margin-bottom: 2px;
182185
vertical-align: middle;
183-
min-width: 6px;
186+
min-width: 15px;
184187
min-height: 13px;
188+
text-align: center;
185189
}
186190

187191
.sf-toolbar-block .sf-toolbar-status-green {
188-
background-color: rgba(117, 158, 43, 0.8);
192+
background-color: {{ colors.success|raw }};
189193
}
190194
.sf-toolbar-block .sf-toolbar-status-red {
191-
background-color: rgba(200, 43, 43, 0.8);
195+
background-color: {{ colors.error|raw }};
192196
}
193197
.sf-toolbar-block .sf-toolbar-status-yellow {
194-
background-color: rgb(189, 132, 0);
198+
background-color: {{ colors.warning|raw }};
195199
}
196200

197201
.sf-toolbar-block.sf-toolbar-status-green {
198-
background-color: rgba(117, 158, 43, 0.8);
202+
background-color: {{ colors.success|raw }};
199203
color: #FFF;
200204
}
201205
.sf-toolbar-block.sf-toolbar-status-red {
202-
background-color: rgba(200, 43, 43, 0.8);
206+
background-color: {{ colors.error|raw }};
203207
color: #FFF;
204208
}
205209
.sf-toolbar-block.sf-toolbar-status-yellow {
206-
background-color: rgb(189, 132, 0);
210+
background-color: {{ colors.warning|raw }};
207211
color: #FFF;
208212
}
209213

0 commit comments

Comments
 (0)
0