Skip to content

Commit ef1b5c8

Browse files
jamesgpearcejamesgpearce
committed
[inspector] Nested CSS
1 parent 77c0f69 commit ef1b5c8

File tree

1 file changed

+82
-78
lines changed

1 file changed

+82
-78
lines changed

‎src/store-inspector/style.ts‎

Lines changed: 82 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -6,88 +6,92 @@ import {UNIQUE_ID} from './common';
66

77
const SCROLLBAR = '*::-webkit-scrollbar';
88

9-
export const APP_STYLESHEET = arrayJoin(
10-
objMap(
11-
{
12-
'': 'all:initial;font-family:sans-serif;font-size:0.75rem;position:fixed;z-index:999999',
13-
'*': 'all:revert',
14-
'*::before': 'all:revert',
15-
'*::after': 'all:revert',
16-
[SCROLLBAR]: 'width:0.5rem;height:0.5rem;',
17-
[SCROLLBAR + '-track']: 'background:#111',
18-
[SCROLLBAR + '-thumb']: 'background:#999;border:1px solid #111',
19-
[SCROLLBAR + '-thumb:hover']: 'background:#fff',
20-
[SCROLLBAR + '-corner']: 'background:#111',
21-
img: 'width:1rem;height:1rem;background:#111;border:0;vertical-align:text-bottom',
9+
export const APP_STYLESHEET = `#${UNIQUE_ID}{
10+
all:initial;font-family:sans-serif;font-size:0.75rem;position:fixed;z-index:999999;
11+
${arrayJoin(
12+
objMap(
13+
{
14+
'*': 'all:revert',
15+
'*::before': 'all:revert',
16+
'*::after': 'all:revert',
17+
[SCROLLBAR]: 'width:0.5rem;height:0.5rem;',
18+
[SCROLLBAR + '-track']: 'background:#111',
19+
[SCROLLBAR + '-thumb']: 'background:#999;border:1px solid #111',
20+
[SCROLLBAR + '-thumb:hover']: 'background:#fff',
21+
[SCROLLBAR + '-corner']: 'background:#111',
22+
img: 'width:1rem;height:1rem;background:#111;border:0;vertical-align:text-bottom',
2223
23-
// Nub
24-
'>img': 'padding:0.25rem;bottom:0;right:0;position:fixed;' + LOGO_SVG,
25-
...objNew(
26-
arrayMap(['bottom:0;left:0', 'top:0;right:0'], (css, p) => [
27-
`>img[data-position='${p}']`,
28-
css,
29-
]),
30-
),
24+
// Nub
25+
'>img': 'padding:0.25rem;bottom:0;right:0;position:fixed;' + LOGO_SVG,
26+
...objNew(
27+
arrayMap(['bottom:0;left:0', 'top:0;right:0'], (css, p) => [
28+
`>img[data-position='${p}']`,
29+
css,
30+
]),
31+
),
3132
32-
// Panel
33-
main: 'display:flex;flex-direction:column;background:#111d;color:#fff;position:fixed;',
34-
...objNew(
35-
arrayMap(
36-
[
37-
'bottom:0;left:0;width:35vw;height:100vh',
38-
'top:0;right:0;width:100vw;height:30vh',
39-
'bottom:0;left:0;width:100vw;height:30vh',
40-
'top:0;right:0;width:35vw;height:100vh',
41-
'top:0;right:0;width:100vw;height:100vh',
42-
],
43-
(css, p) => [`main[data-position='${p}']`, css],
33+
// Panel
34+
main: 'display:flex;flex-direction:column;background:#111d;color:#fff;position:fixed;',
35+
...objNew(
36+
arrayMap(
37+
[
38+
'bottom:0;left:0;width:35vw;height:100vh',
39+
'top:0;right:0;width:100vw;height:30vh',
40+
'bottom:0;left:0;width:100vw;height:30vh',
41+
'top:0;right:0;width:35vw;height:100vh',
42+
'top:0;right:0;width:100vw;height:100vh',
43+
],
44+
(css, p) => [`main[data-position='${p}']`, css],
45+
),
4446
),
45-
),
4647
47-
// Header
48-
header: 'display:flex;padding:0.25rem;background:#000;align-items:center',
49-
'header>img:nth-of-type(1)': LOGO_SVG,
50-
'header>img:nth-of-type(6)': CLOSE_SVG,
51-
...objNew(
52-
arrayMap(POSITIONS_SVG, (SVG, p) => [
53-
`header>img[data-id='${p}']`,
54-
SVG,
55-
]),
56-
),
57-
'header>span':
58-
'flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:0.25rem',
48+
// Header
49+
header:
50+
'display:flex;padding:0.25rem;background:#000;align-items:center',
51+
'header>img:nth-of-type(1)': LOGO_SVG,
52+
'header>img:nth-of-type(6)': CLOSE_SVG,
53+
...objNew(
54+
arrayMap(POSITIONS_SVG, (SVG, p) => [
55+
`header>img[data-id='${p}']`,
56+
SVG,
57+
]),
58+
),
59+
'header>span':
60+
'flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:0.25rem',
5961
60-
// Body
61-
article: 'padding:0.25rem 0.25rem 0.25rem 0.5rem;overflow:auto;flex:1',
62-
details: 'margin-left:0.75rem;width:fit-content;',
63-
'details img': 'display:none',
64-
'details[open]>summary img':
65-
'display:unset;background:none;margin-left:0.25rem',
66-
'details[open]>summary img.edit': EDIT_SVG,
67-
'details[open]>summary img.done': DONE_SVG,
68-
summary:
69-
'margin-left:-0.75rem;line-height:1.25rem;user-select:none;width:fit-content',
62+
// Body
63+
article: 'padding:0.25rem 0.25rem 0.25rem 0.5rem;overflow:auto;flex:1',
64+
details: 'margin-left:0.75rem;width:fit-content;',
65+
'details img': 'display:none',
66+
'details[open]>summary img':
67+
'display:unset;background:none;margin-left:0.25rem',
68+
'details[open]>summary img.edit': EDIT_SVG,
69+
'details[open]>summary img.done': DONE_SVG,
70+
summary:
71+
'margin-left:-0.75rem;line-height:1.25rem;user-select:none;width:fit-content',
7072
71-
// tables
72-
table: 'border-collapse:collapse;table-layout:fixed;margin-bottom:0.5rem',
73-
'table input':
74-
'background:#111;color:unset;padding:0 0.25rem;border:0;font-size:unset;vertical-align:top;margin:0',
75-
'table input[type="number"]': 'width:4rem',
76-
'table tbody button':
77-
'font-size:0;background:#fff;border-radius:50%;margin:0 0.125rem 0 0;width:0.85rem;color:#111',
78-
'table button:first-letter': 'font-size:0.75rem',
79-
thead: 'background:#222',
80-
'th:nth-of-type(1)': 'min-width:2rem;',
81-
'th.sorted': 'background:#000',
82-
'table caption': 'text-align:left;white-space:nowrap;line-height:1.25rem',
83-
button: 'width:1.5rem;border:none;background:none;color:#fff;padding:0',
84-
'button[disabled]': 'color:#777',
85-
'button.next': 'margin-right:0.5rem',
86-
[`th,#${UNIQUE_ID} td`]:
87-
'overflow:hidden;text-overflow:ellipsis;padding:0.25rem 0.5rem;max-width:12rem;white-space:nowrap;border-width:1px 0;border-style:solid;border-color:#777;text-align:left',
73+
// tables
74+
table:
75+
'border-collapse:collapse;table-layout:fixed;margin-bottom:0.5rem',
76+
'table input':
77+
'background:#111;color:unset;padding:0 0.25rem;border:0;font-size:unset;vertical-align:top;margin:0',
78+
'table input[type="number"]': 'width:4rem',
79+
'table tbody button':
80+
'font-size:0;background:#fff;border-radius:50%;margin:0 0.125rem 0 0;width:0.85rem;color:#111',
81+
'table button:first-letter': 'font-size:0.75rem',
82+
thead: 'background:#222',
83+
'th:nth-of-type(1)': 'min-width:2rem;',
84+
'th.sorted': 'background:#000',
85+
'table caption':
86+
'text-align:left;white-space:nowrap;line-height:1.25rem',
87+
button: 'width:1.5rem;border:none;background:none;color:#fff;padding:0',
88+
'button[disabled]': 'color:#777',
89+
'button.next': 'margin-right:0.5rem',
90+
[`th,td`]:
91+
'overflow:hidden;text-overflow:ellipsis;padding:0.25rem 0.5rem;max-width:12rem;white-space:nowrap;border-width:1px 0;border-style:solid;border-color:#777;text-align:left',
8892
89-
'span.warn': 'margin:0.25rem;color:#d81b60',
90-
},
91-
(style, selector) => (style ? `#${UNIQUE_ID} ${selector}{${style}}` : ''),
92-
),
93-
);
93+
'span.warn': 'margin:0.25rem;color:#d81b60',
94+
},
95+
(style, selector) => (style ? `& ${selector}{${style}}` : ''),
96+
),
97+
)}`;

0 commit comments

Comments
 (0)