Skip to content

Commit 5be8714

Browse files
authored
Inspector: Add semi-transparent background (#31997)
* add glass effect * Update Style.js
1 parent b73a55a commit 5be8714

File tree

1 file changed

+5
-3
lines changed

1 file changed

+5
-3
lines changed

examples/jsm/inspector/ui/Style.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ export class Style {
66

77
const css = `
88
:root {
9-
--profiler-bg: #1e1e24;
9+
--profiler-bg: #1e1e24f5;
10+
--profiler-header-bg: #2a2a33aa;
1011
--profiler-header: #2a2a33;
1112
--profiler-border: #4a4a5a;
1213
--text-primary: #e0e0e0;
@@ -96,6 +97,7 @@ export class Style {
9697
right: 0;
9798
height: 350px;
9899
background-color: var(--profiler-bg);
100+
backdrop-filter: blur(8px);
99101
border-top: 2px solid var(--profiler-border);
100102
color: var(--text-primary);
101103
display: flex;
@@ -132,7 +134,7 @@ export class Style {
132134
133135
.profiler-header {
134136
display: flex;
135-
background-color: var(--profiler-header);
137+
background-color: var(--profiler-header-bg);
136138
border-bottom: 1px solid var(--profiler-border);
137139
flex-shrink: 0;
138140
justify-content: space-between;
@@ -153,7 +155,7 @@ export class Style {
153155
right: 0;
154156
top: 0;
155157
height: 38px;
156-
background: var(--profiler-header);
158+
background: var(--profiler-header-bg);
157159
border-bottom: 1px solid var(--profiler-border);
158160
}
159161

0 commit comments

Comments
 (0)