Improved the design of the web debug toolbar

symfony · Dec 22, 2015 · 9859125 · 9859125
1 parent 1bc9aaa
commit 9859125
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -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

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
@@ -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;
 }