From 3607083f6ec4668bfe66f7b4efa068fc9a486798 Mon Sep 17 00:00:00 2001 From: Javier Eguiluz Date: Tue, 22 Dec 2015 14:54:17 +0100 Subject: [PATCH 1/2] Improved the design of the web debug toolbar --- .../views/Profiler/profiler.css.twig | 24 ++++++++++--------- .../Resources/views/Profiler/toolbar.css.twig | 21 +++++++++------- 2 files changed, 25 insertions(+), 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 index e24f3ba70d72d..a04bad09b4864 100644 --- 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,8 @@ 'subtle_border_and_shadow': 'background: #FFF; border: 1px solid #E0E0E0; box-shadow: 0px 0px 1px rgba(128, 128, 128, .2);' } %} +{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %} + {# Normalization (normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css) ========================================================================= #} @@ -232,9 +234,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 +343,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 +471,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 +672,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 index c0456f61310fb..9dd9b77d03c01 100644 --- 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,5 @@ +{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %} + .sf-minitoolbar { background-color: #222; border-top-left-radius: 4px; @@ -46,8 +48,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 +182,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; } From 9335290bf349a2dd3369f99b04475c6f75d1aadc Mon Sep 17 00:00:00 2001 From: Javier Eguiluz Date: Tue, 22 Dec 2015 15:31:39 +0100 Subject: [PATCH 2/2] Added a note about keeping colors in sync --- .../WebProfilerBundle/Resources/views/Profiler/profiler.css.twig | 1 + .../WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig | 1 + 2 files changed, 2 insertions(+) diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig index a04bad09b4864..b61f1c4204401 100644 --- 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,7 @@ '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 diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig index 9dd9b77d03c01..4ae44c0326817 100644 --- 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,4 @@ +{# when updating any of these colors, do the same in profiler.css.twig #} {% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %} .sf-minitoolbar {