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

Skip to content

Commit 6369e0e

Browse files
fabpotfabpot
committed
bug #48961 [WebProfilerBundle] right blocks: fix display (jmsche)
This PR was squashed before being merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] right blocks: fix display | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes? | New feature? | no | Deprecations? | no | Tickets | N/A | License | MIT | Doc PR | N/A Hi, since Symfony 6.2 there's a design issue that bothers me with the toolbar: the hover effect seems "wrong" when hovering one of the right blocks. This PR fixes the following issues on hover: * removes green background color * removes the extra box shadow * moves the remaining box shadow to the left * moves the non-radius border from left to right * uses CSS variables for -green color * fixes non visible Symfony CLI icon on small screen * uses same style for green status (bottom colored line instead of full background) | Before | After | | --- | --- | | ![cli-before](https://user-images.githubusercontent.com/3929498/212657956-7ec827b6-e4cc-4d86-8128-3b8ca31fd0c0.png) | ![cli-after](https://user-images.githubusercontent.com/3929498/212658006-a5fc12dd-2c93-474c-a6bb-342abe4b048d.png) | | ![cli-hover-before](https://user-images.githubusercontent.com/3929498/212658093-7d0bf364-3831-431d-92ec-a7f9d9e76d17.png) | ![cli-hover-after](https://user-images.githubusercontent.com/3929498/212658116-bb38cdc6-af55-449c-acde-23d1846199b8.png) | | ![toolbar-before](https://user-images.githubusercontent.com/3929498/212658148-ec863d1c-1de7-4306-b74a-9dd4120c660b.png) | ![toolbar-after](https://user-images.githubusercontent.com/3929498/212658177-c20eff49-33ce-4ff9-8c51-0f66f509d4ac.png) | Commits ------- a03692e [WebProfilerBundle] right blocks: fix display
2 parents 9e1c1d8 + a03692e commit 6369e0e

File tree

1 file changed

+18
-13
lines changed

1 file changed

+18
-13
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
--sf-toolbar-green-100: #deeaea;
3939
--sf-toolbar-green-200: #bbd5d5;
4040
--sf-toolbar-green-300: #99bfbf;
41-
--sf-toolbar-green-400: #76a9a9;
41+
--sf-toolbar-green-400: #1dc9a4;
4242
--sf-toolbar-green-500: #598e8e;
4343
--sf-toolbar-green-600: #436c6c;
4444
--sf-toolbar-green-700: #2e4949;
@@ -258,6 +258,11 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
258258
position: absolute;
259259
}
260260

261+
.sf-toolbar-block.sf-toolbar-block-right .sf-toolbar-info {
262+
border-bottom-left-radius: 4px;
263+
border-bottom-right-radius: 0;
264+
}
265+
261266
.sf-toolbar-block .sf-toolbar-info:empty {
262267
visibility: hidden;
263268
}
@@ -273,9 +278,10 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
273278
text-align: center;
274279
}
275280

276-
.sf-toolbar-block .sf-toolbar-status-green,
277-
.sf-toolbar-block .sf-toolbar-info .sf-toolbar-status-green {
278-
background-color: #059669;
281+
.sf-toolbar-block .sf-toolbar-status.sf-toolbar-status-green,
282+
.sf-toolbar-block .sf-toolbar-info .sf-toolbar-status.sf-toolbar-status-green {
283+
background-color: var(--sf-toolbar-green-400);
284+
color: var(--sf-toolbar-green-50);
279285
}
280286
.sf-toolbar-block .sf-toolbar-status.sf-toolbar-status-red,
281287
.sf-toolbar-block .sf-toolbar-info .sf-toolbar-status.sf-toolbar-status-red {
@@ -288,10 +294,7 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
288294
color: var(--sf-toolbar-yellow-800);
289295
}
290296

291-
.sf-toolbar-block.sf-toolbar-status-green {
292-
background-color: #059669;
293-
color: var(--sf-toolbar-white);
294-
}
297+
.sf-toolbar-block.sf-toolbar-status-green::before,
295298
.sf-toolbar-block.sf-toolbar-status-red::before,
296299
.sf-toolbar-block.sf-toolbar-status-yellow::before {
297300
background: var(--sf-toolbar-yellow-400);
@@ -307,6 +310,10 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
307310
.sf-toolbar-block.sf-toolbar-status-red::before {
308311
background: var(--sf-toolbar-red-400);
309312
}
313+
.sf-toolbar-block.sf-toolbar-status-green::before {
314+
background: var(--sf-toolbar-green-400);
315+
}
316+
.sf-toolbar-block-request.sf-toolbar-block.sf-toolbar-status-green::before,
310317
.sf-toolbar-block-request.sf-toolbar-block.sf-toolbar-status-red::before,
311318
.sf-toolbar-block-request.sf-toolbar-block.sf-toolbar-status-yellow::before {
312319
display: none;
@@ -384,7 +391,7 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
384391
box-shadow: 1px 0 0 var(--sf-toolbar-black), inset 0 -1px 0 var(--sf-toolbar-black);
385392
}
386393
.sf-toolbar-block.sf-toolbar-block-right:hover .sf-toolbar-icon {
387-
box-shadow: -2px 0 0 var(--sf-toolbar-black), inset 0 -2px 0 var(--sf-toolbar-black);
394+
box-shadow: -1px 0 0 var(--sf-toolbar-black), inset 0 -1px 0 var(--sf-toolbar-black);
388395
}
389396

390397
.sf-toolbar-block-request .sf-toolbar-icon {
@@ -409,9 +416,6 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
409416
.sf-toolbar-block.sf-toolbar-block-sf-cli .sf-toolbar-label {
410417
margin-left: 0;
411418
}
412-
.sf-toolbar-block.sf-toolbar-block-sf-cli:hover .sf-toolbar-icon {
413-
box-shadow: 2px 0 0 var(--sf-toolbar-black), inset 0 -2px 0 var(--sf-toolbar-black);
414-
}
415419

416420
.sf-toolbar-block:hover,
417421
.sf-toolbar-block.hover {
@@ -538,7 +542,8 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
538542
.sf-toolbar-icon .sf-toolbar-value {
539543
display: none;
540544
}
541-
.sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-label {
545+
.sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-label,
546+
.sf-cli .sf-toolbar-icon .sf-toolbar-label {
542547
display: inline-block;
543548
}
544549

0 commit comments

Comments
 (0)