Improved the design of the web debug toolbar

This commit is contained in:
Javier Eguiluz 2015-12-22 14:54:17 +01:00 committed by Fabien Potencier
parent 1bc9aaa6f9
commit 9859125130
2 changed files with 27 additions and 20 deletions

View File

@ -7,6 +7,9 @@
'subtle_border_and_shadow': 'background: #FFF; border: 1px solid #E0E0E0; box-shadow: 0px 0px 1px rgba(128, 128, 128, .2);'
} %}
{# when updating any of these colors, do the same in toolbar.css.twig #}
{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %}
{# Normalization
(normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css)
========================================================================= #}
@ -232,9 +235,9 @@ table tbody ul {
padding: 3px 7px;
white-space: nowrap;
}
.label.status-success { background: #5E976E; color: #FFF; }
.label.status-warning { background: #BC8034; color: #FFF; }
.label.status-error { background: #B0413E; color: #FFF; }
.label.status-success { background: {{ colors.success|raw }}; color: #FFF; }
.label.status-warning { background: {{ colors.warning|raw }}; color: #FFF; }
.label.status-error { background: {{ colors.error|raw }}; color: #FFF; }
{# Metrics
------------------------------------------------------------------------- #}
@ -341,11 +344,11 @@ tr.status-warning td {
border-top: 1px solid #FAFAFA;
}
.status-warning .colored {
color: #BC8034;
.status-warning .colored {
color: {{ colors.warning|raw }};
}
.status-error .colored {
color: #B0413E;
color: {{ colors.error|raw }};
}
{# Syntax highlighting
@ -469,9 +472,9 @@ tr.status-warning td {
text-decoration: underline;
}
#summary .status-success { background: #5E976E; }
#summary .status-warning { background: #BC8034; }
#summary .status-error { background: #B0413E; }
#summary .status-success { background: {{ colors.success|raw }}; }
#summary .status-warning { background: {{ colors.warning|raw }}; }
#summary .status-error { background: {{ colors.error|raw }}; }
#summary .status-success h2,
#summary .status-success h2 a,
@ -670,10 +673,10 @@ tr.status-warning td {
}
#menu-profiler .label-status-warning .count {
background: #BC8034;
background: {{ colors.warning|raw }};
}
#menu-profiler .label-status-error .count {
background: #B0413E;
background: {{ colors.error|raw }};
}
{# Timeline panel

View File

@ -1,3 +1,6 @@
{# when updating any of these colors, do the same in profiler.css.twig #}
{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %}
.sf-minitoolbar {
background-color: #222;
border-top-left-radius: 4px;
@ -46,8 +49,8 @@
}
.sf-toolbarreset svg,
.sf-toolbarreset img {
max-height: 24px;
max-width: 24px;
max-height: 20px;
max-width: 20px;
}
.sf-toolbarreset .hide-button {
@ -180,30 +183,31 @@
padding: 3px 6px;
margin-bottom: 2px;
vertical-align: middle;
min-width: 6px;
min-width: 15px;
min-height: 13px;
text-align: center;
}
.sf-toolbar-block .sf-toolbar-status-green {
background-color: rgba(117, 158, 43, 0.8);
background-color: {{ colors.success|raw }};
}
.sf-toolbar-block .sf-toolbar-status-red {
background-color: rgba(200, 43, 43, 0.8);
background-color: {{ colors.error|raw }};
}
.sf-toolbar-block .sf-toolbar-status-yellow {
background-color: rgb(189, 132, 0);
background-color: {{ colors.warning|raw }};
}
.sf-toolbar-block.sf-toolbar-status-green {
background-color: rgba(117, 158, 43, 0.8);
background-color: {{ colors.success|raw }};
color: #FFF;
}
.sf-toolbar-block.sf-toolbar-status-red {
background-color: rgba(200, 43, 43, 0.8);
background-color: {{ colors.error|raw }};
color: #FFF;
}
.sf-toolbar-block.sf-toolbar-status-yellow {
background-color: rgb(189, 132, 0);
background-color: {{ colors.warning|raw }};
color: #FFF;
}