Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit b5a10ce

Browse files
fabpotfabpot
committed
minor #48757 [WebProfilerBundle] Move panel specific styles to each panel (javiereguiluz)
This PR was squashed before being merged into the 6.3 branch. Discussion ---------- [WebProfilerBundle] Move panel specific styles to each panel | Q | A | ------------- | --- | Branch? | 6.3 | Bug fix? | no | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - As suggested by `@stof` during the last profiler redesign, we should move specific panel styles to each panel, to ease the maintenance of the main CSS file. Commits ------- 4c2375e [WebProfilerBundle] Move panel specific styles to each panel
2 parents 767e0f9 + 4c2375e commit b5a10ce

File tree

14 files changed

+768
-784
lines changed

14 files changed

+768
-784
lines changed

‎src/Symfony/Bundle/SecurityBundle/Resources/views/Collector/security.html.twig

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,35 @@
22

33
{% block page_title 'Security' %}
44

5+
{% block head %}
6+
{{ parent() }}
7+
8+
<style>
9+
#collector-content .decision-log .voter_result td {
10+
border-top-width: 1px;
11+
border-bottom-width: 0;
12+
padding-bottom: 0;
13+
}
14+
15+
#collector-content .decision-log .voter_details td {
16+
border-top-width: 0;
17+
border-bottom-width: 1px;
18+
padding-bottom: 0;
19+
}
20+
21+
#collector-content .decision-log .voter_details table {
22+
border: 0;
23+
margin: 0;
24+
box-shadow: unset;
25+
}
26+
27+
#collector-content .decision-log .voter_details table td {
28+
border: 0;
29+
padding: 0 0 8px 0;
30+
}
31+
</style>
32+
{% endblock %}
33+
534
{% block toolbar %}
635
{% if collector.firewall %}
736
{% set icon %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,51 @@
11
{% extends '@WebProfiler/Profiler/layout.html.twig' %}
22

3+
{% block head %}
4+
{{ parent() }}
5+
6+
<style>
7+
.config-symfony-version-lts {
8+
border: 0;
9+
color: var(--color-muted);
10+
font-size: 21px;
11+
line-height: 33px;
12+
}
13+
.config-symfony-version-lts[title] {
14+
text-decoration: none;
15+
}
16+
.config-symfony-version-status-badge {
17+
background-color: var(--badge-background);
18+
border-radius: 4px;
19+
color: var(--badge-color);
20+
display: inline-block;
21+
font-size: 15px;
22+
font-weight: bold;
23+
margin: 10px 0 5px;
24+
padding: 3px 7px;
25+
white-space: nowrap;
26+
}
27+
.config-symfony-version-status-badge.status-success {
28+
background-color: var(--badge-success-background);
29+
color: var(--badge-success-color);
30+
}
31+
.config-symfony-version-status-badge.status-warning {
32+
background-color: var(--badge-warning-background);
33+
color: var(--badge-warning-color);
34+
}
35+
.config-symfony-version-status-badge.status-error {
36+
background-color: var(--badge-danger-background);
37+
color: var(--badge-danger-color);
38+
}
39+
.config-symfony-version-roadmap-link {
40+
display: inline-block;
41+
margin: 10px 5px 5px;
42+
}
43+
.config-symfony-eol {
44+
margin-top: 5px;
45+
}
46+
</style>
47+
{% endblock %}
48+
349
{% block toolbar %}
450
{% if 'unknown' == collector.symfonyState %}
551
{% set block_status = '' %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,27 @@
4141
{{ parent() }}
4242

4343
<style>
44+
.form-type-class {
45+
font-size: var(--font-size-body);
46+
display: flex;
47+
margin: 0 0 15px;
48+
}
49+
.form-type-class-label {
50+
margin-right: 4px;
51+
}
52+
.form-type-class pre.sf-dump {
53+
font-family: var(--font-family-system) !important;
54+
font-size: var(--font-size-body) !important;
55+
margin-left: 5px;
56+
}
57+
.form-type-class .sf-dump .sf-dump-str {
58+
color: var(--color-link) !important;
59+
text-decoration: underline;
60+
}
61+
.form-type-class .sf-dump .sf-dump-str:hover {
62+
text-decoration: none;
63+
}
64+
4465
#tree-menu {
4566
float: left;
4667
padding-right: 10px;

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/http_client.html.twig

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,41 @@
11
{% extends '@WebProfiler/Profiler/layout.html.twig' %}
22

3+
{% block head %}
4+
{{ parent() }}
5+
6+
<style>
7+
.sf-profiler-httpclient-requests thead th {
8+
vertical-align: top;
9+
}
10+
.sf-profiler-httpclient-requests .http-method {
11+
border: 1px solid var(--header-status-request-method-color);
12+
border-radius: 5px;
13+
color: var(--header-status-request-method-color);
14+
display: inline-block;
15+
font-weight: 500;
16+
line-height: 1;
17+
margin-right: 6px;
18+
padding: 2px 4px;
19+
text-align: center;
20+
white-space: nowrap;
21+
}
22+
.sf-profiler-httpclient-requests .status-response-status-code {
23+
background: var(--gray-600);
24+
border-radius: 4px;
25+
color: var(--white);
26+
display: inline-block;
27+
font-size: 12px;
28+
font-weight: bold;
29+
margin-bottom: 2px;
30+
padding: 1px 3px;
31+
}
32+
.sf-profiler-httpclient-requests .status-response-status-code.status-success { background: var(--header-success-status-code-background); color: var(--header-success-status-code-color); }
33+
.sf-profiler-httpclient-requests .status-response-status-code.status-warning { background: var(--header-warning-status-code-background); color: var(--header-warning-status-code-color); }
34+
.sf-profiler-httpclient-requests .status-response-status-code.status-error { background: var(--header-error-status-code-background); color: var(--header-error-status-code-color); }
35+
</style>
36+
{% endblock %}
37+
38+
339
{% block toolbar %}
440
{% if collector.requestCount %}
541
{% set icon %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,220 @@
11
{% extends '@WebProfiler/Profiler/layout.html.twig' %}
22

3+
{% block head %}
4+
{{ parent() }}
5+
6+
<style>
7+
:root {
8+
--log-filter-active-num-color: #2563EB;
9+
--log-timestamp-color: #555;
10+
}
11+
.theme-dark {
12+
--log-filter-active-num-color: #2563EB;
13+
--log-timestamp-color: #ccc;
14+
}
15+
16+
.log-filters {
17+
display: flex;
18+
flex-wrap: wrap;
19+
}
20+
.log-filters .log-filter {
21+
flex-shrink: 0;
22+
margin-right: 15px;
23+
position: relative;
24+
}
25+
.log-filters .log-filter summary {
26+
align-items: center;
27+
background: var(--button-background);
28+
border-radius: 6px;
29+
border: 1px solid var(--button-border-color);
30+
box-shadow: var(--button-box-shadow);
31+
color: var(--button-color);
32+
cursor: pointer;
33+
display: flex;
34+
font-size: 13px;
35+
font-weight: 500;
36+
padding: 4px 8px;
37+
white-space: nowrap;
38+
}
39+
.log-filters .log-filter summary:active {
40+
box-shadow: none;
41+
transform: translateY(1px);
42+
}
43+
.log-filters .log-filter summary .icon {
44+
height: 18px;mai
45+
width: 18px;
46+
margin: 0 7px 0 0;
47+
}
48+
.log-filters .log-filter summary svg {
49+
height: 18px;
50+
width: 18px;
51+
opacity: 0.7;
52+
}
53+
.log-filters .log-filter summary svg {
54+
stroke-width: 2;
55+
}
56+
.log-filters .log-filter summary .filter-active-num {
57+
color: var(--log-filter-active-num-color);
58+
font-weight: bold;
59+
padding: 0 1px;
60+
}
61+
.log-filter .tab-navigation .tab-control input {
62+
display: none;
63+
}
64+
.log-filter .tab-navigation .tab-control label {
65+
cursor: pointer;
66+
}
67+
.log-filters .log-filter .log-filter-content {
68+
background: var(--base-0);
69+
border: 1px solid var(--table-border-color);
70+
border-radius: 6px;
71+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
72+
padding: 15px;
73+
position: absolute;
74+
left: 0;
75+
top: 32px;
76+
max-width: 400px;
77+
min-width: 200px;
78+
z-index: 9999;
79+
}
80+
.log-filters .log-filter .log-filter-content .log-filter-option {
81+
align-items: center;
82+
display: flex;
83+
}
84+
.log-filter .filter-select-all-or-none {
85+
margin-bottom: 10px;
86+
}
87+
.log-filter .filter-select-all-or-none button + button {
88+
margin-left: 15px;
89+
}
90+
.log-filters .log-filter .log-filter-content .log-filter-option + .log-filter-option {
91+
margin: 7px 0 0;
92+
}
93+
.log-filters .log-filter .log-filter-content .log-filter-option label {
94+
cursor: pointer;
95+
flex: 1;
96+
padding-left: 10px;
97+
}
98+
99+
table.logs {
100+
border-bottom-width: 0;
101+
border-collapse: collapse;
102+
}
103+
table.logs tr + tr td {
104+
border-width: 1px 0 0;
105+
}
106+
table.logs .metadata {
107+
display: block;
108+
font-size: 12px;
109+
}
110+
.theme-dark tr.status-error td,
111+
.theme-dark tr.status-warning td { border-bottom: unset; border-top: unset; }
112+
113+
table.logs .log-timestamp {
114+
color: var(--log-timestamp-color);
115+
}
116+
table.logs .log-metadata {
117+
margin: 8px 0 0;
118+
}
119+
table.logs .log-metadata > span {
120+
display: inline-block;
121+
}
122+
table.logs .log-metadata > span + span {
123+
margin-left: 10px;
124+
}
125+
table.logs .log-metadata .log-channel {
126+
color: var(--base-1);
127+
font-size: 13px;
128+
font-weight: bold;
129+
}
130+
table.logs .log-metadata .badge {
131+
background: var(--badge-light-background);
132+
color: var(--badge-light-color);
133+
}
134+
table.logs .log-metadata .log-num-occurrences {
135+
color: var(--color-muted);
136+
font-size: 13px;
137+
}
138+
table.logs .log-metadata .context {
139+
background: var(--code-block-background);
140+
border-radius: 4px;
141+
padding: 5px;
142+
}
143+
table.logs .log-metadata .context + .context {
144+
margin-top: 10px;
145+
}
146+
.log-type-badge {
147+
background: var(--badge-light-background);
148+
box-shadow: none;
149+
color: var(--badge-light-color);
150+
display: inline-block;
151+
font-family: var(--font-family-system);
152+
margin-top: 5px;
153+
}
154+
.log-type-badge.badge-deprecation,
155+
.log-type-badge.badge-warning {
156+
background: var(--badge-warning-background);
157+
color: var(--badge-warning-color);
158+
}
159+
.log-type-badge.badge-error {
160+
background: var(--badge-danger-background);
161+
color: var(--badge-danger-color);
162+
}
163+
.log-type-badge.badge-silenced {
164+
background: #EDE9FE;
165+
color: #6D28D9;
166+
}
167+
.theme-dark .log-type-badge.badge-silenced {
168+
background: #5B21B6;
169+
color: #EDE9FE;
170+
}
171+
172+
tr.log-status-warning > td:first-child,
173+
tr.log-status-error > td:first-child,
174+
tr.log-status-silenced > td:first-child {
175+
position: relative;
176+
}
177+
tr.log-status-warning > td:first-child:before,
178+
tr.log-status-error > td:first-child:before,
179+
tr.log-status-silenced > td:first-child:before {
180+
background: transparent;
181+
border-radius: 0;
182+
content: '';
183+
position: absolute;
184+
top: 0;
185+
left: 0;
186+
width: 4px;
187+
height: 100%;
188+
}
189+
tr.log-status-warning > td:first-child:before {
190+
background: var(--yellow-400);
191+
}
192+
tr.log-status-error > td:first-child:before {
193+
background: var(--red-400);
194+
}
195+
tr.log-status-silenced > td:first-child:before {
196+
background: #a78bfa;
197+
}
198+
199+
.container-compilation-logs {
200+
background: var(--table-background);
201+
border: 1px solid var(--base-2);
202+
border-radius: 6px;
203+
margin-top: 30px;
204+
padding: 15px;
205+
}
206+
.container-compilation-logs summary {
207+
cursor: pointer;
208+
}
209+
.container-compilation-logs summary h4 {
210+
margin: 0 0 5px;
211+
}
212+
.container-compilation-logs summary p {
213+
margin: 0;
214+
}
215+
</style>
216+
{% endblock %}
217+
3218
{% block toolbar %}
4219
{% if collector.counterrors or collector.countdeprecations or collector.countwarnings %}
5220
{% set icon %}

0 commit comments

Comments
 (0)