Finished the toolbar redesign
This commit is contained in:
Javier Eguiluz
parent
b25b6dd608
commit
9d89841e3a
@ -19,17 +19,15 @@
|
||||
{% endif %}
|
||||
|
||||
{% set icon %}
|
||||
{% if collector.symfonyState is defined %}
|
||||
<a href="https://symfony.com/" title="{{ symfony_version_status }}">
|
||||
<span class="sf-toolbar-label">
|
||||
{{ include('@WebProfiler/Icon/symfony.svg.twig') }}
|
||||
</span>
|
||||
<span class="sf-toolbar-value">{{ collector.symfonyversion }}</span>
|
||||
</a>
|
||||
{% elseif collector.applicationname %}
|
||||
<span class="sf-toolbar-label">{{ collector.applicationname }}</span>
|
||||
<span class="sf-toolbar-value">{{ collector.applicationversion }}</span>
|
||||
{% endif %}
|
||||
{% if collector.symfonyState is defined %}
|
||||
<span class="sf-toolbar-label">
|
||||
{{ include('@WebProfiler/Icon/symfony.svg.twig') }}
|
||||
</span>
|
||||
<span class="sf-toolbar-value">{{ collector.symfonyversion }}</span>
|
||||
{% elseif collector.applicationname %}
|
||||
<span class="sf-toolbar-label">{{ collector.applicationname }}</span>
|
||||
<span class="sf-toolbar-value">{{ collector.applicationversion }}</span>
|
||||
{% endif %}
|
||||
{% endset %}
|
||||
|
||||
{% set text %}
|
||||
|
||||
@ -3,10 +3,9 @@
|
||||
{% block toolbar %}
|
||||
{% set icon %}
|
||||
{% set status_color = (collector.memory / 1024 / 1024) > 50 ? 'yellow' : '' %}
|
||||
<span>
|
||||
<span class="sf-toolbar-value">{{ '%.1f'|format(collector.memory / 1024 / 1024) }}</span>
|
||||
<span class="sf-toolbar-label">MB</span>
|
||||
</span>
|
||||
{{ include('@WebProfiler/Icon/memory.svg.twig') }}
|
||||
<span class="sf-toolbar-value">{{ '%.1f'|format(collector.memory / 1024 / 1024) }}</span>
|
||||
<span class="sf-toolbar-label">MB</span>
|
||||
{% endset %}
|
||||
|
||||
{% set text %}
|
||||
|
||||
@ -1,24 +1,22 @@
|
||||
{% extends '@WebProfiler/Profiler/layout.html.twig' %}
|
||||
|
||||
{% block toolbar %}
|
||||
|
||||
|
||||
{% set request_handler %}
|
||||
{% if collector.controller.class is defined %}
|
||||
{% set link = collector.controller.file|file_link(collector.controller.line) %}
|
||||
{% if link %}<a href="#" onclick="window.location='{{link|e('js')}}';window.event.stopPropagation();return false;">{% endif %}
|
||||
{% if link %}<a href="{{ link }}" title="{{ collector.controller.file }}">{% else %}<span>{% endif %}
|
||||
|
||||
<span class="sf-toolbar-info-class">
|
||||
{{ collector.controller.class|abbr_class }}
|
||||
</span>
|
||||
{{ collector.controller.class|abbr_class|striptags }}
|
||||
|
||||
{% if collector.controller.method %}
|
||||
<span class="sf-toolbar-info-method">
|
||||
{{ collector.controller.method }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{%- if collector.controller.method -%}
|
||||
:: {{ collector.controller.method }}
|
||||
{%- endif -%}
|
||||
|
||||
{% if link %}</a>{% endif %}
|
||||
{% if link %}</a>{% else %}</span>{% endif %}
|
||||
{% else %}
|
||||
<span class="sf-toolbar-info-class">{{ collector.controller }}</span>
|
||||
<span>{{ collector.controller }}</span>
|
||||
{% endif %}
|
||||
{% endset %}
|
||||
|
||||
@ -26,8 +24,10 @@
|
||||
|
||||
{% set icon %}
|
||||
<span class="sf-toolbar-status sf-toolbar-status-{{ request_status_code_color }}">{{ collector.statuscode }}</span>
|
||||
<span class="sf-toolbar-label">@</span>
|
||||
<span class="sf-toolbar-value sf-toolbar-info-piece-additional">{{ collector.route }}</span>
|
||||
{% if collector.route %}
|
||||
<span class="sf-toolbar-label">@</span>
|
||||
<span class="sf-toolbar-value sf-toolbar-info-piece-additional">{{ collector.route }}</span>
|
||||
{% endif %}
|
||||
{% endset %}
|
||||
|
||||
{% set text %}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
{% set status_color = collector.events|length ? collector.duration > 1000 ? 'yellow' : '' %}
|
||||
|
||||
{% set icon %}
|
||||
{{ include('@WebProfiler/Icon/time.svg.twig') }}
|
||||
<span class="sf-toolbar-value">{{ total_time }}</span>
|
||||
<span class="sf-toolbar-label">ms</span>
|
||||
{% endset %}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg width="20" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 20 28" enable-background="new 0 0 20 28" xml:space="preserve"><g><polygon fill="#AAA" points="16,5 13,5 13,3 7,3 7,5 4,5 4,9 16,9"></polygon><path fill="#AAA" d="M17 6v4H3V6H0v19h20V6H17z M8 22H3v-1h5V22z M17 20H3v-1h14V20z M17 18H3v-1h14V18z M17 16H3v-1h14V16z M17 14H4v-1h13V14z"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 406 B |
@ -0,0 +1 @@
|
||||
<svg width="16" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 16 28" enable-background="new 0 0 16 28" xml:space="preserve"><g><path fill="#AAA" d="M15 6h-1V5c0-0.5-0.5-1-1-1H2C1.4 4 1 4.4 1 5v2v13c0 1.6 1.3 3 3 3h11c0.5 0 1-0.5 1-1V7 C16 6.5 15.5 6 15 6z M6 15h3v3H6V15z M6 13V7h3v6H6z M15 21c0 0.6-0.4 1-1 1H5c-0.9 0-1.7-0.4-2.2-1H13c0.6 0 1-0.4 1-1V7 c0.5 0 1 0.5 1 1V21z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 432 B |
@ -0,0 +1 @@
|
||||
<svg width="13" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 13 28" enable-background="new 0 0 13 28" xml:space="preserve"><g><rect x="3" y="11" fill="#AAA" width="7" height="9"/></g><g><path fill="#CCC" d="M11 6V21H2V6H0V22c0 0.6 0.4 1 1 1h11c0.6 0 1-0.4 1-1V6H11z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 324 B |
@ -1 +1 @@
|
||||
<svg width="26" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28" xml:space="preserve"><path fill="#FFFFFF" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20 7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3 0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3 0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5 0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20 4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg>
|
||||
<svg width="26" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28" xml:space="preserve"><path fill="#CCC" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20 7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3 0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3 0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5 0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20 4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
||||
<svg width="16" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 16 28" enable-background="new 0 0 16 28" xml:space="preserve"><rect x="6" y="4" fill="#AAA" width="4" height="2"/><path fill="#AAA" d="M8 7c-4.4 0-8 3.6-8 8s3.6 8 8 8s8-3.6 8-8S12.4 7 8 7z M12 16H9H7v-6h2v4h3V16z"/></svg>
|
||||
|
After Width: | Height: | Size: 328 B |
@ -180,12 +180,10 @@
|
||||
requestCounter[0].className = className;
|
||||
|
||||
var ajaxToolbarPanel = document.querySelectorAll('.sf-toolbar-block-ajax');
|
||||
if (state == 'ok') {
|
||||
ajaxToolbarPanel.className = 'sf-toolbar-status-green';
|
||||
} else if (state == 'error') {
|
||||
ajaxToolbarPanel.className = 'sf-toolbar-status-red';
|
||||
if (state == 'error') {
|
||||
Sfjs.addClass(ajaxToolbarPanel[0], 'sf-toolbar-status-red');
|
||||
} else {
|
||||
ajaxToolbarPanel.className = 'sf-ajax-request-loading';
|
||||
Sfjs.addClass(ajaxToolbarPanel[0], 'sf-ajax-request-loading');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
.sf-minitoolbar {
|
||||
display: none;
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
padding: 5px 5px 0;
|
||||
|
||||
background-color: #222;
|
||||
|
||||
z-index: 6000000;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
height: 36px;
|
||||
padding: 5px 6px 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.sf-toolbarreset * {
|
||||
@ -21,8 +18,8 @@
|
||||
|
||||
.sf-toolbarreset {
|
||||
background-color: #222;
|
||||
box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.2);
|
||||
bottom: 0;
|
||||
box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.2);
|
||||
color: #EEE;
|
||||
font: 11px Arial, sans-serif;
|
||||
height: 36px;
|
||||
@ -32,30 +29,16 @@
|
||||
position: fixed;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
z-index: 6000000;
|
||||
z-index: 9999;
|
||||
}
|
||||
.sf-toolbarreset abbr {
|
||||
border: none;
|
||||
cursor: text;
|
||||
}
|
||||
.sf-toolbarreset img {
|
||||
width: auto;
|
||||
display: inline;
|
||||
}
|
||||
.sf-toolbarreset svg,
|
||||
.sf-toolbarreset img {
|
||||
max-height: 24px;
|
||||
}
|
||||
.sf-toolbarreset table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
background-color: #000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
}
|
||||
.sf-toolbarreset .hide-button {
|
||||
background: #444;
|
||||
cursor: pointer;
|
||||
@ -78,20 +61,17 @@
|
||||
cursor: default;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 0px;
|
||||
height: 36px;
|
||||
margin-right: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sf-toolbar-block a,
|
||||
.sf-toolbar-block a:hover {
|
||||
.sf-toolbar-block > a,
|
||||
.sf-toolbar-block > a:hover {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sf-toolbar-block-config {
|
||||
float: right;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.sf-toolbar-block-config svg {
|
||||
padding-right: 4px;
|
||||
max-height: 22px;
|
||||
}
|
||||
|
||||
.sf-toolbar-block span {
|
||||
@ -103,25 +83,33 @@
|
||||
line-height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
.sf-toolbar-block .sf-toolbar-label {
|
||||
.sf-toolbar-block .sf-toolbar-label,
|
||||
.sf-toolbar-block .sf-toolbar-class-separator {
|
||||
color: #AAA;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sf-toolbar-block-config-php .sf-toolbar-label,
|
||||
.sf-toolbar-block-config-symfony .sf-toolbar-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
/* TODO: remove it when Twig uses SVG icons */
|
||||
.sf-toolbar-block-twig img {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-info {
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
}
|
||||
.sf-toolbar-block .sf-toolbar-info-piece-group {
|
||||
border-top: 1px solid #777;
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.sf-toolbar-block .sf-toolbar-info-piece {
|
||||
/* this 'border-bottom' trick is needed because 'margin-bottom' doesn't work for table rows */
|
||||
border-bottom: solid transparent 3px;
|
||||
display: table-row;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sf-toolbar-block .sf-toolbar-info-piece-additional,
|
||||
.sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status {
|
||||
@ -198,7 +186,7 @@
|
||||
background-color: rgba(200, 43, 43, 0.8);
|
||||
}
|
||||
.sf-toolbar-block .sf-toolbar-status-yellow {
|
||||
background-color: rgba(255, 158, 43, 0.8);
|
||||
background-color: rgb(189, 132, 0);
|
||||
}
|
||||
|
||||
.sf-toolbar-block.sf-toolbar-status-green {
|
||||
@ -213,16 +201,21 @@
|
||||
fill: #FFF;
|
||||
}
|
||||
.sf-toolbar-block.sf-toolbar-status-yellow {
|
||||
background-color: rgba(255, 158, 43, 0.8);
|
||||
background-color: rgb(189, 132, 0);
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.sf-toolbar-block-request .sf-toolbar-status {
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
margin-right: 4px;
|
||||
max-height: 36px;
|
||||
padding: 10px;
|
||||
padding: 10px 7px;
|
||||
}
|
||||
.sf-toolbar-block-request .sf-toolbar-info-piece a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.sf-toolbar-block-request .sf-toolbar-info-piece a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sf-toolbar-status-green .sf-toolbar-label,
|
||||
@ -238,17 +231,23 @@
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-icon {
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
height: 36px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
.sf-toolbar-block-request .sf-toolbar-icon {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-icon img, .sf-toolbar-block .sf-toolbar-icon svg {
|
||||
.sf-toolbar-block .sf-toolbar-icon img,
|
||||
.sf-toolbar-block .sf-toolbar-icon svg {
|
||||
border-width: 0;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
top: 5px;
|
||||
}
|
||||
.sf-toolbar-block-translation .sf-toolbar-icon svg,
|
||||
.sf-toolbar-block-config .sf-toolbar-icon svg {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-icon img + span,
|
||||
@ -256,27 +255,10 @@
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.sf-toolbar-block-time .sf-toolbar-icon {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.sf-toolbar-block-memory .sf-toolbar-icon {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.sf-toolbar-info-php-ext .sf-toolbar-status + .sf-toolbar-status {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.sf-toolbar-block a .sf-toolbar-info-piece-additional,
|
||||
.sf-toolbar-block a .sf-toolbar-info-piece-additional-detail {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sf-toolbar-block a .sf-toolbar-info-piece-additional:empty,
|
||||
.sf-toolbar-block a .sf-toolbar-info-piece-additional-detail:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sf-toolbar-block:hover {
|
||||
position: relative;
|
||||
}
|
||||
@ -289,13 +271,7 @@
|
||||
|
||||
.sf-toolbar-block:hover .sf-toolbar-info {
|
||||
display: block;
|
||||
min-width: -webkit-calc(100% + 2px);
|
||||
min-width: calc(100% + 2px);
|
||||
z-index: 10001;
|
||||
box-sizing: border-box;
|
||||
padding: 9px;
|
||||
line-height: 1.5;
|
||||
|
||||
padding: 8px;
|
||||
max-width: 480px;
|
||||
max-height: 480px;
|
||||
word-wrap: break-word;
|
||||
@ -309,7 +285,6 @@
|
||||
.sf-toolbar-ajax-requests {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sf-toolbar-ajax-requests td {
|
||||
background-color: #444;
|
||||
border-bottom: 1px solid #777;
|
||||
@ -342,9 +317,6 @@
|
||||
.sf-ajax-request-duration {
|
||||
text-align: right;
|
||||
}
|
||||
.sf-ajax-request-error {
|
||||
color: #a33 !important;
|
||||
}
|
||||
.sf-ajax-request-loading {
|
||||
-webkit-animation: sf-blink .5s ease-in-out infinite;
|
||||
-o-animation: sf-blink .5s ease-in-out infinite;
|
||||
@ -352,24 +324,24 @@
|
||||
animation: sf-blink .5s ease-in-out infinite;
|
||||
}
|
||||
@-webkit-keyframes sf-blink {
|
||||
0% { color: black; }
|
||||
50% { color: #bbb; }
|
||||
100% { color: black; }
|
||||
0% { background: #222; }
|
||||
50% { background: #444; }
|
||||
100% { background: #222; }
|
||||
}
|
||||
@-moz-keyframes sf-blink {
|
||||
0% { color: black; }
|
||||
50% { color: #bbb; }
|
||||
100% { color: black; }
|
||||
0% { background: #222; }
|
||||
50% { background: #444; }
|
||||
100% { background: #222; }
|
||||
}
|
||||
@-o-keyframes sf-blink {
|
||||
0% { color: black; }
|
||||
50% { color: #bbb; }
|
||||
100% { color: black; }
|
||||
0% { background: #222; }
|
||||
50% { background: #444; }
|
||||
100% { background: #222; }
|
||||
}
|
||||
@keyframes sf-blink {
|
||||
0% { color: black; }
|
||||
50% { color: #bbb; }
|
||||
100% { color: black; }
|
||||
0% { background: #222; }
|
||||
50% { background: #444; }
|
||||
100% { background: #222; }
|
||||
}
|
||||
|
||||
.sf-toolbar-block-dump pre.sf-dump {
|
||||
@ -390,7 +362,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/***** Override the setting when the toolbar is on the top *****/
|
||||
/* Override the setting when the toolbar is on the top */
|
||||
{% if position == 'top' %}
|
||||
.sf-minitoolbar {
|
||||
bottom: auto;
|
||||
@ -416,38 +388,75 @@
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
/***** Media query *****/
|
||||
@media screen and (max-width: 779px) {
|
||||
.sf-toolbar-block .sf-toolbar-icon > * > :first-child ~ * {
|
||||
/* Responsive Design */
|
||||
.sf-toolbar-icon .sf-toolbar-label,
|
||||
.sf-toolbar-icon .sf-toolbar-value {
|
||||
display: none;
|
||||
}
|
||||
.sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-brand::before { content: "768 px"; background: red;
|
||||
color: white;
|
||||
position: absolute; }
|
||||
|
||||
.sf-toolbar-icon .sf-toolbar-label,
|
||||
.sf-toolbar-icon .sf-toolbar-value {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-icon img,
|
||||
.sf-toolbar-block .sf-toolbar-icon svg {
|
||||
top: 6px;
|
||||
}
|
||||
.sf-toolbar-block-config .sf-toolbar-icon svg {
|
||||
top: 8px;
|
||||
}
|
||||
.sf-toolbar-block-time .sf-toolbar-icon svg,
|
||||
.sf-toolbar-block-memory .sf-toolbar-icon svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional,
|
||||
.sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail {
|
||||
display: none !important;
|
||||
.sf-toolbar-block .sf-toolbar-icon {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.sf-toolbar-block-time .sf-toolbar-icon {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.sf-toolbar-block-memory .sf-toolbar-icon {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.sf-toolbar-block-request .sf-toolbar-icon {
|
||||
padding-left: 0;
|
||||
}
|
||||
.sf-toolbar-block-request .sf-toolbar-status {
|
||||
margin-right: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
.sf-toolbar-block-config {
|
||||
float: right;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 880px) {
|
||||
.sf-toolbar-block .sf-toolbar-icon a[href$="config"] .sf-toolbar-info-piece-additional {
|
||||
@media (min-width: 1024px) {
|
||||
.navbar-brand::before { content: "1024 px"; }
|
||||
|
||||
.sf-toolbar-block .sf-toolbar-info-piece-additional,
|
||||
.sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 980px) {
|
||||
.sf-toolbar-block .sf-toolbar-icon a[href$="security"] .sf-toolbar-info-piece-additional {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1179px) {
|
||||
.sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional {
|
||||
.sf-toolbar-block .sf-toolbar-info-piece-additional:empty,
|
||||
.sf-toolbar-block .sf-toolbar-info-piece-additional-detail:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1439px) {
|
||||
.sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.navbar-brand::before { content: "1200 px"; }
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user