1
0
mirror of https://github.com/maximebf/php-debugbar.git synced 2025-01-16 21:08:34 +01:00

UI refinements toolbar (#647)

* Better alignments icons

* refined icons

* improve widgets list item padding

* Ui refinements

* Apply background blur to make sure tooltip text is readable in front of text

* undo change that didn't have any effect

* proper adjustment of previous commit

* Revert fully rounded shape on the tab counters

* remove px for 0 value
This commit is contained in:
Nick Retel 2024-04-04 11:29:12 +02:00 committed by GitHub
parent 7aa9a27a0b
commit dc11707041
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -122,7 +122,7 @@ div.phpdebugbar-closed, div.phpdebugbar-minimized{
/* -------------------------------------- */
a.phpdebugbar-restore-btn {
background: #efefef url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22%23000%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M6.039%208.342c.463%200%20.772.084.927.251.154.168.191.455.11.862-.084.424-.247.727-.487.908-.241.182-.608.272-1.1.272h-.743l.456-2.293h.837zm-2.975%204.615h1.22l.29-1.457H5.62c.461%200%20.84-.047%201.139-.142.298-.095.569-.254.812-.477.205-.184.37-.387.497-.608.127-.222.217-.466.27-.734.13-.65.032-1.155-.292-1.518-.324-.362-.84-.543-1.545-.543H4.153l-1.089%205.479zM9.235%206.02h1.21l-.289%201.458h1.079c.679%200%201.147.115%201.405.347.258.231.335.607.232%201.125l-.507%202.55h-1.23l.481-2.424c.055-.276.035-.464-.06-.565-.095-.1-.298-.15-.608-.15H9.98L9.356%2011.5h-1.21l1.089-5.48M15.566%208.342c.464%200%20.773.084.928.251.154.168.19.455.11.862-.084.424-.247.727-.488.908-.24.182-.607.272-1.1.272h-.742l.456-2.293h.836zm-2.974%204.615h1.22l.29-1.457h1.046c.461%200%20.84-.047%201.139-.142.298-.095.569-.254.812-.477.205-.184.37-.387.497-.608.127-.222.217-.466.27-.734.129-.65.032-1.155-.292-1.518-.324-.362-.84-.543-1.545-.543H13.68l-1.089%205.479z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fsvg%3E) no-repeat 5px 4px / 20px 20px;
background: #efefef url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22%23000%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M6.039%208.342c.463%200%20.772.084.927.251.154.168.191.455.11.862-.084.424-.247.727-.487.908-.241.182-.608.272-1.1.272h-.743l.456-2.293h.837zm-2.975%204.615h1.22l.29-1.457H5.62c.461%200%20.84-.047%201.139-.142.298-.095.569-.254.812-.477.205-.184.37-.387.497-.608.127-.222.217-.466.27-.734.13-.65.032-1.155-.292-1.518-.324-.362-.84-.543-1.545-.543H4.153l-1.089%205.479zM9.235%206.02h1.21l-.289%201.458h1.079c.679%200%201.147.115%201.405.347.258.231.335.607.232%201.125l-.507%202.55h-1.23l.481-2.424c.055-.276.035-.464-.06-.565-.095-.1-.298-.15-.608-.15H9.98L9.356%2011.5h-1.21l1.089-5.48M15.566%208.342c.464%200%20.773.084.928.251.154.168.19.455.11.862-.084.424-.247.727-.488.908-.24.182-.607.272-1.1.272h-.742l.456-2.293h.836zm-2.974%204.615h1.22l.29-1.457h1.046c.461%200%20.84-.047%201.139-.142.298-.095.569-.254.812-.477.205-.184.37-.387.497-.608.127-.222.217-.466.27-.734.129-.65.032-1.155-.292-1.518-.324-.362-.84-.543-1.545-.543H13.68l-1.089%205.479z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fsvg%3E) no-repeat center / 20px 20px;
}
div.phpdebugbar-header {
min-height: 26px;
@ -145,9 +145,16 @@ div.phpdebugbar-header-right {
div.phpdebugbar-header > div > * {
padding: 5px 5px;
font-size: 14px;
height: 16px;
color: #555;
text-decoration: none;
}
div.phpdebugbar-header-left > *,
div.phpdebugbar-header-right > * {
line-height: 0;
display: flex;
align-items: center;
}
div.phpdebugbar-header-left > * {
float: left;
}
@ -188,7 +195,10 @@ a.phpdebugbar-tab.phpdebugbar-active {
color: #555;
font-weight: normal;
text-shadow: none;
vertical-align: middle;
}
a.phpdebugbar-tab.phpdebugbar-active span.phpdebugbar-badge {
background: #000;
color: #fff;
}
a.phpdebugbar-tab i {
display: none;
@ -242,16 +252,18 @@ a.phpdebugbar-open-btn {
display: none;
position: absolute;
top: -30px;
background: #efefef;
opacity: .7;
background: #efefef70;
border: 1px solid #ccc;
color: #555;
font-size: 11px;
padding: 2px 3px;
padding: 2px 6px;
z-index: 1000;
text-align: center;
width: 200%;
white-space: nowrap;
right: 0;
line-height: 1.5;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.phpdebugbar-indicator:hover span.phpdebugbar-tooltip:not(.phpdebugbar-disabled) {
display: block;
@ -300,15 +312,18 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab {
display: block;
position: absolute;
top: -30px;
background: #efefef;
opacity: .7;
background: #efefef70;
opacity: 1;
border: 1px solid #ccc;
color: #555;
font-size: 11px;
padding: 2px 3px;
padding: 2px 6px;
z-index: 1000;
text-align: center;
right: 0;
line-height: 1.5;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
div.phpdebugbar-mini-design a.phpdebugbar-tab i {
display:inline-block;
@ -326,6 +341,7 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab {
a.phpdebugbar-tab.phpdebugbar-tab-history .phpdebugbar-text {
display: none;
white-space: nowrap;
}
a.phpdebugbar-tab.phpdebugbar-tab-history i {
display:inline-block;