Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 6369e0e

Browse filesBrowse 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
Copy full SHA for 6369e0e

File tree

1 file changed

+18
-13
lines changed
Filter options

1 file changed

+18
-13
lines changed

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
+18-13Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.