diff --git a/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css b/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css index bcdb8e1482553..3e6eae5a92273 100644 --- a/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css +++ b/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css @@ -9,12 +9,23 @@ --color-warning: #a46a1f; --color-error: #b0413e; --color-muted: #999; - --tab-background: #fff; + --tab-background: #f0f0f0; + --tab-border-color: #e5e5e5; + --tab-active-border-color: #d4d4d4; --tab-color: #444; - --tab-active-background: #666; - --tab-active-color: #fafafa; + --tab-active-background: #fff; + --tab-active-color: var(--color-text); --tab-disabled-background: #f5f5f5; --tab-disabled-color: #999; + --selected-badge-background: #e5e5e5; + --selected-badge-color: #525252; + --selected-badge-shadow: inset 0 0 0 1px #d4d4d4; + --selected-badge-warning-background: #fde496; + --selected-badge-warning-color: #785b02; + --selected-badge-warning-shadow: inset 0 0 0 1px #e6af05; + --selected-badge-danger-background: #FCE9ED; + --selected-badge-danger-color: #83122A; + --selected-badge-danger-shadow: inset 0 0 0 1px #F5B8C5; --metric-value-background: #fff; --metric-value-color: inherit; --metric-unit-color: #999; @@ -47,12 +58,23 @@ --color-text: #e0e0e0; --color-muted: #777; --color-error: #d43934; - --tab-background: #555; - --tab-color: #ccc; - --tab-active-background: #888; - --tab-active-color: #fafafa; + --tab-background: #404040; + --tab-border-color: #737373; + --tab-active-border-color: #171717; + --tab-color: var(--color-text); + --tab-active-background: #d4d4d4; + --tab-active-color: #262626; --tab-disabled-background: var(--page-background); - --tab-disabled-color: #777; + --tab-disabled-color: #a3a3a3; + --selected-badge-background: #555; + --selected-badge-color: #ddd; + --selected-badge-shadow: none; + --selected-badge-warning-background: #fcd55f; + --selected-badge-warning-color: #785b02; + --selected-badge-warning-shadow: inset 0 0 0 1px #af8503; + --selected-badge-danger-background: #B41939; + --selected-badge-danger-color: #FCE9ED; + --selected-badge-danger-shadow: none; --metric-value-background: #555; --metric-value-color: inherit; --metric-unit-color: #999; @@ -132,15 +154,96 @@ thead.sf-toggle-content.sf-toggle-visible, tbody.sf-toggle-content.sf-toggle-vis .sf-toggle-off .icon-close, .sf-toggle-on .icon-open { display: none; } .sf-toggle-off .icon-open, .sf-toggle-on .icon-close { display: block; } -.tab-navigation { margin: 0 0 1em 0; padding: 0; } -.tab-navigation li { background: var(--tab-background); border: 1px solid var(--table-border); color: var(--tab-color); cursor: pointer; display: inline-block; font-size: 16px; margin: 0 0 0 -1px; padding: .5em .75em; z-index: 1; } -.tab-navigation li .badge { background-color: var(--base-1); color: var(--base-4); display: inline-block; font-size: 14px; font-weight: bold; margin-left: 8px; min-width: 10px; padding: 1px 6px; text-align: center; white-space: nowrap; } -.tab-navigation li.disabled { background: var(--tab-disabled-background); color: var(--tab-disabled-color); } -.tab-navigation li.active { background: var(--tab-active-background); color: var(--tab-active-color); z-index: 1100; } -.tab-navigation li.active .badge { background-color: var(--base-5); color: var(--base-2); } -.tab-content > *:first-child { margin-top: 0; } -.tab-navigation li .badge.status-warning { background: var(--color-warning); color: #FFF; } -.tab-navigation li .badge.status-error { background: var(--background-error); color: #FFF; } +.tab-navigation { + background-color: var(--tab-background); + border-radius: 6px; + box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 5px var(--page-background); + display: inline-flex; + flex-wrap: wrap; + margin: 0 0 15px; + padding: 0; + user-select: none; + -webkit-user-select: none; +} +.sf-tabs-sm .tab-navigation { + box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 4px var(--page-background); + margin: 0 0 10px; +} +.tab-navigation .tab-control { + background: transparent; + border: 0; + box-shadow: none; + transition: box-shadow .05s ease-in, background-color .05s ease-in; + cursor: pointer; + font-size: 14px; + font-weight: 500; + line-height: 1.4; + margin: 0; + padding: 4px 14px; + position: relative; + text-align: center; + z-index: 1; +} +.sf-tabs-sm .tab-navigation .tab-control { + font-size: 13px; + padding: 2.5px 10px; +} +.tab-navigation .tab-control:before { + background: var(--tab-border-color); + bottom: 15%; + content: ""; + left: 0; + position: absolute; + top: 15%; + width: 1px; +} +.tab-navigation .tab-control:first-child:before, +.tab-navigation .tab-control.active + .tab-control:before, +.tab-navigation .tab-control.active:before { + width: 0; +} +.tab-navigation .tab-control .badge { + background: var(--selected-badge-background); + box-shadow: var(--selected-badge-shadow); + color: var(--selected-badge-color); + display: inline-block; + font-size: 12px; + font-weight: bold; + line-height: 1; + margin-left: 8px; + min-width: 10px; + padding: 2px 6px; + text-align: center; + white-space: nowrap; +} +.tab-navigation .tab-control.disabled { + color: var(--tab-disabled-color); +} +.tab-navigation .tab-control.active { + background-color: var(--tab-active-background); + 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; +} +.tab-navigation .tab-control .badge.status-warning { + background: var(--selected-badge-warning-background); + box-shadow: var(--selected-badge-warning-shadow); + color: var(--selected-badge-warning-color); +} +.tab-navigation .tab-control .badge.status-error { + background: var(--selected-badge-danger-background); + box-shadow: var(--selected-badge-danger-shadow); + color: var(--selected-badge-danger-color); +} + .sf-tabs .tab:not(:first-child) { display: none; } [data-filters] { position: relative; } @@ -221,7 +324,7 @@ header .container { display: flex; justify-content: space-between; } .trace-head .icon { position: absolute; right: 0; top: 0; } .trace-head .icon svg { fill: var(--base-5); height: 24px; width: 24px; } -.trace-details { background: var(--base-0); border: var(--border); box-shadow: 0px 0px 1px rgba(128, 128, 128, .2); margin: 1em 0; table-layout: fixed; } +.trace-details { background: var(--base-0); border: var(--border); box-shadow: 0px 0px 1px rgba(128, 128, 128, .2); margin: 0 0 1em; table-layout: fixed; } .trace-message { font-size: 14px; font-weight: normal; margin: .5em 0 0; }