diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig
index baea464527975..3d062becd3eba 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig
@@ -23,6 +23,14 @@
{% endblock %}
{% block panel %}
+ {# these styles are needed to override some styles from Exception page, which wasn't
+ updated yet to the new style of the Symfony Profiler #}
+
+
+
{{ source('@WebProfiler/Icon/forward.svg') }}
Forwarded to
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
index 674a06c9b742c..42f30d6ff4805 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -1053,8 +1053,8 @@ tr.status-warning td {
padding: 13px 15px 10px;
position: relative;
}
-#summary .status-compact:before {
- top: 0;
+#summary .status-compact.status-compact-forward {
+ padding: 10px 15px;
}
#summary .status + .status {
margin-top: 10px;
@@ -1538,7 +1538,7 @@ tr.status-warning td {
display: inline-flex;
flex-wrap: wrap;
margin: 0 0 15px;
- padding: 2px;
+ padding: 0;
user-select: none;
-webkit-user-select: none;
}
@@ -1547,11 +1547,13 @@ tr.status-warning td {
margin: 0 0 10px;
}
.tab-navigation li {
+ box-shadow: none;
+ transition: box-shadow .05s ease-in, background-color .05s ease-in;
cursor: pointer;
font-weight: 500;
list-style: none;
margin: 0;
- padding: 3.5px 14px;
+ padding: 4px 14px;
position: relative;
text-align: center;
z-index: 1;
@@ -1591,12 +1593,15 @@ tr.status-warning td {
}
.tab-navigation li.active {
background-color: var(--tab-active-background);
- border-radius: 4px;
- box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.05);
+ border-radius: 6px;
+ box-shadow: inset 0 0 0 1.5px var(--tab-active-border-color);
color: var(--tab-active-color);
position: relative;
z-index: 1;
}
+.theme-dark .tab-navigation li.active {
+ box-shadow: inset 0 0 0 1px var(--tab-border-color);
+}
.tab-content > *:first-child {
margin-top: 0;
}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig
index 6536458fc5c3d..71080c737782a 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig
@@ -110,32 +110,40 @@
margin-top: 30px;
}
.modal-content .settings-group {
+ border: 1px solid var(--settings-option-border-color);
+ border-radius: 4px;
display: flex;
margin-bottom: 15px;
}
-.modal-content label {
+.modal-content .settings-group label {
cursor: pointer;
display: flex;
flex: 1;
font-size: 16px;
margin: 0;
}
-.modal-content label input {
- display: none;
+.modal-content .settings-group label input {
+ position: absolute;
+ clip: rect(0, 0, 0, 0);
+ pointer-events: none;
+ opacity: 0;
+}
+.modal-content .settings-group:has(input:focus-visible) {
+ outline: 2px dotted var(--settings-option-active-border-color);
+ outline-offset: 2px;
}
-.modal-content label input:checked + p {
+.modal-content .settings-group label input:checked + p {
box-shadow: inset 0 0 0 2px var(--settings-option-active-border-color);
background-color: var(--settings-option-active-background);
color: var(--settings-option-active-color);
}
-.modal-content label input:checked + p svg {
+.modal-content .settings-group label input:checked + p svg {
color: var(--settings-option-active-icon-color);
}
-.modal-content label p {
+.modal-content .settings-group label p {
align-items: center;
background: var(--settings-option-background);
- border-radius: 4px;
- box-shadow: inset 0 0 0 1px var(--settings-option-border-color);
+
color: var(--settings-option-color);
flex: 1;
font-size: 14px;
@@ -143,8 +151,16 @@
padding: 10px 15px;
text-align: center;
}
-.modal-content label + label {
- margin-left: 15px;
+.modal-content .settings-group label:first-child p {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+.modal-content .settings-group label:last-child p {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+.modal-content .settings-group label + label p {
+ border-left: 1px solid var(--settings-option-border-color);
}
.modal-content label p span {
display: block;