Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI refinements #1601

Merged
merged 16 commits into from
Apr 3, 2024
Merged

UI refinements #1601

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
282b8b3
wip
nckrtl Apr 1, 2024
c6745a0
Merge branch 'master' of https://github.com/barryvdh/laravel-debugbar…
nckrtl Apr 1, 2024
2ad2ade
additional tweaks
nckrtl Apr 1, 2024
32aa7bf
wip
nckrtl Apr 1, 2024
2665aaa
add backgorund on odd rows in light mode for timeline tab
nckrtl Apr 1, 2024
7d35ace
Bring back table borders for the timeline tab + fix line height in th…
nckrtl Apr 2, 2024
6a05cd6
Remove fixed height of first child of the list item
nckrtl Apr 2, 2024
73fdd64
remove odd background color for table rows at the timeline
nckrtl Apr 2, 2024
7c08050
Fix alignment of arrays and text in key value lists
nckrtl Apr 3, 2024
0e8669d
undo change regarding laravel icon
nckrtl Apr 3, 2024
10ee2a4
Merge branch 'master' of https://github.com/nckrtl/laravel-debugbar i…
nckrtl Apr 3, 2024
10849a1
additional tweaks
nckrtl Apr 3, 2024
f67d77a
undo css addtions + remove unnessary padding of pre in dd elements
nckrtl Apr 3, 2024
e37b451
css cleanup + bring back laravel icon in debugbar popup / open window
nckrtl Apr 3, 2024
edb2ef9
better center alignment of the phpdebugbar-header-right items
nckrtl Apr 3, 2024
9418bfe
cleanup changes that can be moved to the base package
nckrtl Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 39 additions & 8 deletions src/Resources/laravel-debugbar-dark-mode.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,11 @@ div.phpdebugbar code.phpdebugbar-widgets-sql span.hljs-keyword,
div.phpdebugbar-openhandler .phpdebugbar-openhandler-header,
div.phpdebugbar-openhandler .phpdebugbar-openhandler-header a {
color: var(--color-gray-200);
text-shadow: 1px 1px #000;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe here??

Copy link
Contributor Author

@nckrtl nckrtl Apr 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I added that to make the text in the timeline waterfall better readable on blue background:
Screenshot 2024-04-03 at 20 22 30

With the text shadow:
Screenshot 2024-04-03 at 20 21 11

But quite some elements are affected by that change, perhaps too many:
Screenshot 2024-04-03 at 20 28 27

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added that to make the text in the timeline waterfall better readable

Since there are many classes involved(also main div.phpdebugbar), I saw it everywhere.

}



div.phpdebugbar-openhandler,
div.phpdebugbar div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar,
div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-file,
Expand Down Expand Up @@ -127,7 +130,6 @@ div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-i
color: var(--color-red-vivid);
}

div.phpdebugbar div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename,
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-database,
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-duration,
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-memory,
Expand All @@ -147,7 +149,7 @@ li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename a.phpdebugbar
color: #ddd;
}
div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-sql-duplicate {
background-color: #6f6200;
background-color: #473e00;
}

div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value:before {
Expand Down Expand Up @@ -211,8 +213,13 @@ div.phpdebugbar div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-type
color: var(--color-gray-600) !important;
}

ul.phpdebugbar-widgets-timeline table.phpdebugbar-widgets-params tr:nth-child(odd) td {
background: var(--color-gray-900) !important;
}

div.phpdebugbar div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
border-color: var(--color-gray-600) !important;

}

div.phpdebugbar code,
Expand All @@ -239,20 +246,39 @@ div.phpdebugbar div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-i
color: var(--color-gray-500);
}

div.phpdebugbar a.phpdebugbar-minimize-btn {
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201792%201792%22%20id%3D%22chevron-down%22%3E%3Cpath%20d%3D%22M1683%20808l-742%20741q-19%2019-45%2019t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19%2045-19t45%2019l531%20531%20531-531q19-19%2045-19t45%2019l166%20165q19%2019%2019%2045.5t-19%2045.5z%22%20style%3D%22fill%3A%20%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat 6px 6px / 14px 14px;
div.phpdebugbar dl.phpdebugbar-widgets-kvlist > :nth-child(4n)::before {
background-color: var(--color-gray-900);
}

div.phpdebugbar a.phpdebugbar-maximize-btn {
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201792%201792%22%20id%3D%22chevron-up%22%3E%3Cpath%20d%3D%22M1683%201331l-166%20165q-19%2019-45%2019t-45-19l-531-531-531%20531q-19%2019-45%2019t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19%2045-19t45%2019l742%20741q19%2019%2019%2045.5t-19%2045.5z%22%20style%3D%22fill%3A%20%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat 6px 6px / 14px 14px;
dt.phpdebugbar-widgets-key {
background: var(--color-gray-800);
}

div.phpdebugbar a.phpdebugbar-open-btn {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAYAAADJ7fe0AAABL0lEQVQ4T63RvWqEQBAA4LkjdX46WQh5hoDpFnyAgGzKWKQJdgFfIT8vIKSwCSEQHyJN4AptomAlZMXAVRuxWAwibqMGBUVygdtAplmWmf1mmVnAP8RiNDjne0KINQDsz9wCIXSwrc+AMMa6tm0hz3PozzGWyyUoirJhIISm5n1yuIRh2G3rNs+rqvo7IoTIMMbnkthqXjf9JAiCO0LIR9d1T5JQXzbMbEA8z/vEGB9TSt/KsjyURZIkeTQM43JAHMe5JYS8Zlm2appG1gDXdbFt2/44IIVS+lCW5amswBh70XX9DADEuOIjzvlaCCFrgO/7F5ZlPU8rTtP0viiKK1mhqqpU07STfrATEsfxV13Xu7JIFEU3pmlej/XjTDAA7MgiAPAOANlP5A/vN0u/AXUIgA+u4l6FAAAAAElFTkSuQmCC) no-repeat 8px 6px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAYAAADJ7fe0AAABL0lEQVQ4T63RvWqEQBAA4LkjdX46WQh5hoDpFnyAgGzKWKQJdgFfIT8vIKSwCSEQHyJN4AptomAlZMXAVRuxWAwibqMGBUVygdtAplmWmf1mmVnAP8RiNDjne0KINQDsz9wCIXSwrc+AMMa6tm0hz3PozzGWyyUoirJhIISm5n1yuIRh2G3rNs+rqvo7IoTIMMbnkthqXjf9JAiCO0LIR9d1T5JQXzbMbEA8z/vEGB9TSt/KsjyURZIkeTQM43JAHMe5JYS8Zlm2appG1gDXdbFt2/44IIVS+lCW5amswBh70XX9DADEuOIjzvlaCCFrgO/7F5ZlPU8rTtP0viiKK1mhqqpU07STfrATEsfxV13Xu7JIFEU3pmlej/XjTDAA7MgiAPAOANlP5A/vN0u/AXUIgA+u4l6FAAAAAElFTkSuQmCC) no-repeat 7px 8px !important;
}

div.phpdebugbar a.phpdebugbar-minimize-btn {
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201792%201792%22%20id%3D%22chevron-down%22%3E%3Cpath%20d%3D%22M1683%20808l-742%20741q-19%2019-45%2019t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19%2045-19t45%2019l531%20531%20531-531q19-19%2045-19t45%2019l166%20165q19%2019%2019%2045.5t-19%2045.5z%22%20style%3D%22fill%3A%20%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat 8px 7px / 14px 14px !important;
}

div.phpdebugbar a.phpdebugbar-maximize-btn {
background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201792%201792%22%20id%3D%22chevron-up%22%3E%3Cpath%20d%3D%22M1683%201331l-166%20165q-19%2019-45%2019t-45-19l-531-531-531%20531q-19%2019-45%2019t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19%2045-19t45%2019l742%20741q19%2019%2019%2045.5t-19%2045.5z%22%20style%3D%22fill%3A%20%23EDF2F7%22%2F%3E%3C%2Fsvg%3E) no-repeat 8px 7px / 14px 14px !important;
}

div.phpdebugbar a.phpdebugbar-close-btn {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABUElEQVQ4T52SMUsDMRTH3xUPChHCxeko3YrUqeFGEexym3boJ9DBufhJpLODfoIbTrcuFcSxxMki3Uq5yZRAAweRVp70HdfWQZolb3i/l/x/iQd7Lm9PDjbA2Wz24HmerFarbSGEwaFaa57n+XC1WqlarXZNBxUgQsaYK+ccCCHeGWPn2GStfdFat3zfB875I8EFOBqNPpbLZRObsQnh9YktHIarUqmMoyg6wboApZTtfr9/zxhrEIw7QdbaSa/Xu1FKDTdAADiQUp6VYcpTgl4B4HsbhCRJjsIwfPN9/7hs2zn3mWXZabfb/dqRg/ZIBF2PmigzCiPbRcbpdKrQXjkTguXMKKxer8uNqw4Gg6cgCC7WT/ArAuty5vl8/hzH8eV2xmaapnec88baHooAEmaMmXQ6nVsAGO/IAQB8x0MAUGQPbSMPAAuC/gL//XV/ALsvnQ+MsaHgAAAAAElFTkSuQmCC) no-repeat 9px 6px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABUElEQVQ4T52SMUsDMRTH3xUPChHCxeko3YrUqeFGEexym3boJ9DBufhJpLODfoIbTrcuFcSxxMki3Uq5yZRAAweRVp70HdfWQZolb3i/l/x/iQd7Lm9PDjbA2Wz24HmerFarbSGEwaFaa57n+XC1WqlarXZNBxUgQsaYK+ccCCHeGWPn2GStfdFat3zfB875I8EFOBqNPpbLZRObsQnh9YktHIarUqmMoyg6wboApZTtfr9/zxhrEIw7QdbaSa/Xu1FKDTdAADiQUp6VYcpTgl4B4HsbhCRJjsIwfPN9/7hs2zn3mWXZabfb/dqRg/ZIBF2PmigzCiPbRcbpdKrQXjkTguXMKKxer8uNqw4Gg6cgCC7WT/ArAuty5vl8/hzH8eV2xmaapnec88baHooAEmaMmXQ6nVsAGO/IAQB8x0MAUGQPbSMPAAuC/gL//XV/ALsvnQ+MsaHgAAAAAElFTkSuQmCC) no-repeat 9px 8px !important;
}

div.phpdebugbar a.phpdebugbar-open-btn:hover,
div.phpdebugbar a.phpdebugbar-minimize-btn:hover,
div.phpdebugbar a.phpdebugbar-maximize-btn:hover,
div.phpdebugbar a.phpdebugbar-close-btn:hover {
background-color: var(--color-gray-700) !important
}

dd.phpdebugbar-widgets-value::before {
background-color: var(--color-gray-800);
}

div.phpdebugbar code.language-php,
Expand Down Expand Up @@ -330,3 +356,8 @@ div.phpdebugbar .hljs-number {
background-color: var(--color-gray-700);
color: white;
}

.phpdebugbar-widgets-dataset-history table th,
.phpdebugbar-widgets-dataset-history table td {
border-color: var(--color-gray-600);
}
Loading
Loading