konpeki 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/authoring-visuals/SKILL.md +12 -1
- package/README.md +26 -25
- package/SETUP.md +1 -1
- package/composition/README.md +26 -49
- package/composition/compile.ts +1 -1
- package/composition/document.ts +2 -111
- package/composition/schema.json +3 -3
- package/composition/schema.ts +1 -1
- package/composition/types.ts +1 -20
- package/composition/validate.ts +3 -461
- package/composition/visualizations.ts +0 -16
- package/docs/development.md +57 -0
- package/docs/workflow.md +49 -7
- package/package.json +3 -1
- package/runtime/konpeki.mjs +182 -460
- package/slides/introducing-konpeki/composition.json +1740 -1735
- package/src/app/App.tsx +112 -54
- package/src/components/BuildOrb.tsx +40 -0
- package/src/components/Canvas.tsx +17 -0
- package/src/components/InspectorPanel.tsx +41 -8
- package/src/components/LeftPanel.tsx +16 -3
- package/src/components/RevisionNotes.tsx +56 -0
- package/src/components/WorkspaceChrome.tsx +11 -9
- package/src/lib/examples/react-page-migration.json +1 -1
- package/src/lib/export-png.ts +4 -1
- package/src/lib/file-session.ts +14 -1
- package/src/lib/review.ts +26 -0
- package/src/lib/use-file-session.ts +84 -19
- package/src/styles/base.css +16 -0
- package/src/styles/canvas.css +43 -12
- package/src/styles/chrome.css +106 -8
- package/src/styles/feedback.css +45 -25
- package/src/styles/left-panel.css +48 -7
- package/src/styles/right-panel.css +62 -20
- package/src/styles/shell.css +70 -16
package/src/styles/feedback.css
CHANGED
|
@@ -7,47 +7,67 @@
|
|
|
7
7
|
transform-origin: center top;
|
|
8
8
|
display: none;
|
|
9
9
|
align-items: center;
|
|
10
|
-
gap:
|
|
11
|
-
background:
|
|
12
|
-
color:
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
gap: 12px;
|
|
11
|
+
background: var(--ui-surface);
|
|
12
|
+
color: var(--ui-text);
|
|
13
|
+
border: 1px solid var(--ui-border);
|
|
14
|
+
box-shadow: 0 4px 16px #0000000a, 0 1px 3px #00000008;
|
|
15
|
+
padding: 10px 14px;
|
|
16
|
+
border-radius: 12px;
|
|
15
17
|
font-size: 13px;
|
|
16
|
-
|
|
18
|
+
line-height: 1.5;
|
|
19
|
+
width: max-content;
|
|
20
|
+
max-width: min(520px, max(240px, calc(100vw - 744px)), calc(100vw - 40px));
|
|
17
21
|
z-index: 50;
|
|
18
22
|
}
|
|
23
|
+
.toast > span {
|
|
24
|
+
min-width: 0;
|
|
25
|
+
overflow-wrap: anywhere;
|
|
26
|
+
}
|
|
19
27
|
.toast.visible {
|
|
20
28
|
display: flex;
|
|
21
|
-
animation: toast-
|
|
29
|
+
animation: toast-enter 180ms ease-out both;
|
|
22
30
|
}
|
|
23
31
|
.toast.visible.closing {
|
|
24
32
|
pointer-events: none;
|
|
25
|
-
animation: toast-
|
|
33
|
+
animation: toast-exit 180ms ease-in both;
|
|
26
34
|
}
|
|
27
|
-
.toast
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
color:
|
|
31
|
-
|
|
35
|
+
.toast.error {
|
|
36
|
+
border-color: #e4b5b5;
|
|
37
|
+
background: #fff7f7;
|
|
38
|
+
color: #8d1717;
|
|
39
|
+
box-shadow: 0 0 0 1px #b13d3d14, 0 4px 16px #5f11110d;
|
|
32
40
|
}
|
|
33
|
-
.toast
|
|
34
|
-
|
|
41
|
+
.toast.error::before {
|
|
42
|
+
display: grid;
|
|
43
|
+
place-items: center;
|
|
44
|
+
flex: none;
|
|
45
|
+
width: 20px;
|
|
46
|
+
height: 20px;
|
|
47
|
+
border-radius: 50%;
|
|
48
|
+
background: #b13d3d;
|
|
49
|
+
color: white;
|
|
50
|
+
content: "!";
|
|
51
|
+
font-weight: 600;
|
|
35
52
|
}
|
|
36
|
-
@keyframes toast-
|
|
37
|
-
|
|
53
|
+
@keyframes toast-enter {
|
|
54
|
+
from {
|
|
38
55
|
opacity: 0;
|
|
39
|
-
transform: translate(-50%, -
|
|
56
|
+
transform: translate(-50%, -6px);
|
|
40
57
|
}
|
|
41
|
-
|
|
58
|
+
to {
|
|
42
59
|
opacity: 1;
|
|
43
|
-
transform: translate(-50%,
|
|
60
|
+
transform: translate(-50%, 0);
|
|
44
61
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
100% {
|
|
62
|
+
}
|
|
63
|
+
@keyframes toast-exit {
|
|
64
|
+
from {
|
|
49
65
|
opacity: 1;
|
|
50
|
-
transform: translate(-50%, 0)
|
|
66
|
+
transform: translate(-50%, 0);
|
|
67
|
+
}
|
|
68
|
+
to {
|
|
69
|
+
opacity: 0;
|
|
70
|
+
transform: translate(-50%, -6px);
|
|
51
71
|
}
|
|
52
72
|
}
|
|
53
73
|
.recovery {
|
|
@@ -1,3 +1,44 @@
|
|
|
1
|
+
.left-notes {
|
|
2
|
+
flex: 1;
|
|
3
|
+
min-height: 0;
|
|
4
|
+
overflow-y: auto;
|
|
5
|
+
}
|
|
6
|
+
.revision-notes { padding: 18px 16px; }
|
|
7
|
+
.revision-note-submit {
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
justify-content: space-between;
|
|
11
|
+
gap: 12px;
|
|
12
|
+
}
|
|
13
|
+
.revision-note-count,
|
|
14
|
+
.revision-note-scope {
|
|
15
|
+
color: var(--ui-muted);
|
|
16
|
+
font-size: 11px;
|
|
17
|
+
line-height: 1.5;
|
|
18
|
+
}
|
|
19
|
+
.revision-note-count { margin: 20px 0 8px; }
|
|
20
|
+
.revision-notes label { font-size: 12px; }
|
|
21
|
+
.revision-note-scope {
|
|
22
|
+
margin: 6px 0 8px;
|
|
23
|
+
padding: 6px 8px;
|
|
24
|
+
border-radius: 6px;
|
|
25
|
+
background: var(--ui-selected);
|
|
26
|
+
color: #31596d;
|
|
27
|
+
overflow-wrap: anywhere;
|
|
28
|
+
}
|
|
29
|
+
.revision-notes textarea { width: 100%; resize: vertical; min-height: 72px; font-size: 12px; line-height: 1.5; }
|
|
30
|
+
.revision-notes textarea { border-color: transparent; border-radius: 6px; background: #f4f4f5; }
|
|
31
|
+
.revision-notes textarea:hover { border-color: #d4d4d8; }
|
|
32
|
+
.revision-note-submit { margin-top: 8px; justify-content: flex-end; }
|
|
33
|
+
.revision-note-submit button { min-height: 40px; white-space: nowrap; font-size: 12px; }
|
|
34
|
+
.revision-note-list { list-style: none; margin: 0; padding: 0; }
|
|
35
|
+
.revision-note-list li { padding: 12px 0; border-top: 1px solid var(--ui-border); }
|
|
36
|
+
.revision-note-target { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 40px; padding: 6px 0; border: 0; background: none; text-align: left; font-size: 11px; overflow-wrap: anywhere; }
|
|
37
|
+
.revision-note-target > span { color: var(--ui-muted); }
|
|
38
|
+
.revision-note-list p { font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
39
|
+
.revision-note-remove { display: inline-flex; align-items: center; min-height: 40px; border: 0; padding: 6px 0; background: none; color: var(--ui-muted); font-size: 11px; }
|
|
40
|
+
.revision-note-error { color: #a02020; font-size: 12px; }
|
|
41
|
+
|
|
1
42
|
.slide-list {
|
|
2
43
|
flex: 1;
|
|
3
44
|
min-height: 0;
|
|
@@ -24,8 +65,8 @@
|
|
|
24
65
|
|
|
25
66
|
.slide-thumbnail.selected,
|
|
26
67
|
.slide-thumbnail.selected:hover {
|
|
27
|
-
border-color:
|
|
28
|
-
background:
|
|
68
|
+
border-color: color-mix(in srgb, var(--accent) 45%, white);
|
|
69
|
+
background: var(--ui-selected);
|
|
29
70
|
}
|
|
30
71
|
|
|
31
72
|
.slide-thumbnail:focus-visible {
|
|
@@ -42,10 +83,10 @@
|
|
|
42
83
|
|
|
43
84
|
.remove-slide {
|
|
44
85
|
position: absolute;
|
|
45
|
-
right:
|
|
46
|
-
bottom:
|
|
47
|
-
width:
|
|
48
|
-
height:
|
|
86
|
+
right: 2px;
|
|
87
|
+
bottom: 0;
|
|
88
|
+
width: 40px;
|
|
89
|
+
height: 40px;
|
|
49
90
|
padding: 0;
|
|
50
91
|
border-color: transparent;
|
|
51
92
|
border-radius: 5px;
|
|
@@ -64,7 +105,7 @@
|
|
|
64
105
|
align-items: center;
|
|
65
106
|
justify-content: center;
|
|
66
107
|
width: 100%;
|
|
67
|
-
min-height:
|
|
108
|
+
min-height: 40px;
|
|
68
109
|
margin-top: 8px;
|
|
69
110
|
border-style: dashed;
|
|
70
111
|
color: var(--ui-muted);
|
|
@@ -67,13 +67,50 @@
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.vector-actions {
|
|
70
|
-
display:
|
|
71
|
-
|
|
70
|
+
display: grid;
|
|
71
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
72
72
|
gap: 6px;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
.vector-actions button {
|
|
76
|
+
display: inline-flex;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
gap: 6px;
|
|
80
|
+
min-width: 0;
|
|
81
|
+
min-height: 40px;
|
|
82
|
+
padding: 7px 6px;
|
|
83
|
+
border-color: transparent;
|
|
84
|
+
border-radius: 8px;
|
|
85
|
+
background: #f4f4f5;
|
|
76
86
|
font-size: 11px;
|
|
87
|
+
white-space: nowrap;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.vector-actions button:hover:not(:disabled) {
|
|
91
|
+
border-color: transparent;
|
|
92
|
+
background: #e9e9eb;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.vector-action-icon {
|
|
96
|
+
flex: none;
|
|
97
|
+
width: 16px;
|
|
98
|
+
height: 16px;
|
|
99
|
+
fill: none;
|
|
100
|
+
stroke: currentColor;
|
|
101
|
+
stroke-linecap: round;
|
|
102
|
+
stroke-linejoin: round;
|
|
103
|
+
stroke-width: 1.5;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.vector-actions .vector-delete-action {
|
|
107
|
+
background: #fff1f1;
|
|
108
|
+
color: #9d2020;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.vector-actions .vector-delete-action:hover:not(:disabled) {
|
|
112
|
+
background: #ffe3e3;
|
|
113
|
+
color: #841919;
|
|
77
114
|
}
|
|
78
115
|
|
|
79
116
|
.vector-attributes {
|
|
@@ -106,7 +143,7 @@
|
|
|
106
143
|
|
|
107
144
|
.segmented-options button {
|
|
108
145
|
min-width: 0;
|
|
109
|
-
min-height:
|
|
146
|
+
min-height: 40px;
|
|
110
147
|
padding: 5px 7px;
|
|
111
148
|
border: 1px solid transparent;
|
|
112
149
|
border-radius: 5px;
|
|
@@ -121,10 +158,10 @@
|
|
|
121
158
|
}
|
|
122
159
|
|
|
123
160
|
.segmented-options button.selected {
|
|
124
|
-
background:
|
|
125
|
-
border-color:
|
|
126
|
-
box-shadow:
|
|
127
|
-
color:
|
|
161
|
+
background: var(--ui-selected);
|
|
162
|
+
border-color: color-mix(in srgb, var(--accent) 45%, white);
|
|
163
|
+
box-shadow: none;
|
|
164
|
+
color: #006aa1;
|
|
128
165
|
}
|
|
129
166
|
|
|
130
167
|
.inspector-content .slide-settings-heading {
|
|
@@ -153,9 +190,9 @@
|
|
|
153
190
|
}
|
|
154
191
|
|
|
155
192
|
.theme-options button.selected {
|
|
156
|
-
border-color:
|
|
157
|
-
background:
|
|
158
|
-
box-shadow:
|
|
193
|
+
border-color: color-mix(in srgb, var(--accent) 45%, white);
|
|
194
|
+
background: var(--ui-selected);
|
|
195
|
+
box-shadow: none;
|
|
159
196
|
}
|
|
160
197
|
|
|
161
198
|
.theme-options button > span:first-child {
|
|
@@ -218,7 +255,7 @@
|
|
|
218
255
|
display: grid;
|
|
219
256
|
grid-template-columns: 16px minmax(0, 1fr) auto;
|
|
220
257
|
align-items: center;
|
|
221
|
-
min-height:
|
|
258
|
+
min-height: 48px;
|
|
222
259
|
border: 1px solid transparent;
|
|
223
260
|
border-radius: 6px;
|
|
224
261
|
background: #fafafa;
|
|
@@ -267,7 +304,7 @@
|
|
|
267
304
|
|
|
268
305
|
.layer-select span {
|
|
269
306
|
color: var(--ui-muted);
|
|
270
|
-
font-size:
|
|
307
|
+
font-size: 10px;
|
|
271
308
|
}
|
|
272
309
|
|
|
273
310
|
.layer-actions {
|
|
@@ -276,8 +313,8 @@
|
|
|
276
313
|
}
|
|
277
314
|
|
|
278
315
|
.layer-actions button {
|
|
279
|
-
width:
|
|
280
|
-
height:
|
|
316
|
+
width: 40px;
|
|
317
|
+
height: 40px;
|
|
281
318
|
padding: 0;
|
|
282
319
|
border: 0;
|
|
283
320
|
background: transparent;
|
|
@@ -299,6 +336,10 @@
|
|
|
299
336
|
}
|
|
300
337
|
|
|
301
338
|
.inspector-context button {
|
|
339
|
+
display: inline-flex;
|
|
340
|
+
align-items: center;
|
|
341
|
+
min-width: 40px;
|
|
342
|
+
min-height: 40px;
|
|
302
343
|
padding: 0;
|
|
303
344
|
border: 0;
|
|
304
345
|
background: transparent;
|
|
@@ -361,9 +402,9 @@
|
|
|
361
402
|
}
|
|
362
403
|
|
|
363
404
|
.appearance-options button.selected {
|
|
364
|
-
border-color:
|
|
365
|
-
background:
|
|
366
|
-
box-shadow:
|
|
405
|
+
border-color: color-mix(in srgb, var(--accent) 45%, white);
|
|
406
|
+
background: var(--ui-selected);
|
|
407
|
+
box-shadow: none;
|
|
367
408
|
}
|
|
368
409
|
|
|
369
410
|
.appearance-options button:disabled {
|
|
@@ -1078,8 +1119,8 @@ legend {
|
|
|
1078
1119
|
}
|
|
1079
1120
|
|
|
1080
1121
|
.diagram-type-category button.selected {
|
|
1081
|
-
border-color:
|
|
1082
|
-
background:
|
|
1122
|
+
border-color: color-mix(in srgb, var(--accent) 45%, white);
|
|
1123
|
+
background: var(--ui-selected);
|
|
1083
1124
|
}
|
|
1084
1125
|
|
|
1085
1126
|
.diagram-type-category button > span {
|
|
@@ -1130,6 +1171,7 @@ legend {
|
|
|
1130
1171
|
}
|
|
1131
1172
|
|
|
1132
1173
|
.right-panel :is(input, select, textarea) {
|
|
1174
|
+
min-height: 40px;
|
|
1133
1175
|
border-color: transparent;
|
|
1134
1176
|
border-radius: 6px;
|
|
1135
1177
|
background: #f4f4f5;
|
|
@@ -1146,7 +1188,7 @@ legend {
|
|
|
1146
1188
|
}
|
|
1147
1189
|
|
|
1148
1190
|
.parameter-input input {
|
|
1149
|
-
min-height:
|
|
1191
|
+
min-height: 40px;
|
|
1150
1192
|
padding-right: 32px;
|
|
1151
1193
|
appearance: textfield;
|
|
1152
1194
|
}
|
package/src/styles/shell.css
CHANGED
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
position: relative;
|
|
15
15
|
height: 100dvh;
|
|
16
16
|
min-height: 100dvh;
|
|
17
|
-
min-width: 1000px;
|
|
18
17
|
overflow: hidden;
|
|
19
18
|
background: var(--ui-bg);
|
|
20
19
|
}
|
|
@@ -31,7 +30,7 @@
|
|
|
31
30
|
box-shadow: var(--ui-shadow);
|
|
32
31
|
}
|
|
33
32
|
.left-panel {
|
|
34
|
-
top:
|
|
33
|
+
top: 80px;
|
|
35
34
|
bottom: 148px;
|
|
36
35
|
left: 20px;
|
|
37
36
|
width: 252px;
|
|
@@ -47,7 +46,7 @@
|
|
|
47
46
|
right: 20px;
|
|
48
47
|
display: flex;
|
|
49
48
|
flex-direction: column;
|
|
50
|
-
width: 328px;
|
|
49
|
+
width: min(328px, calc(100vw - 40px));
|
|
51
50
|
overflow: hidden;
|
|
52
51
|
}
|
|
53
52
|
.right-panel.collapsed {
|
|
@@ -103,8 +102,8 @@
|
|
|
103
102
|
}
|
|
104
103
|
.panel-toggle {
|
|
105
104
|
flex: none;
|
|
106
|
-
width:
|
|
107
|
-
height:
|
|
105
|
+
width: 40px;
|
|
106
|
+
height: 40px;
|
|
108
107
|
padding: 0;
|
|
109
108
|
border: 0;
|
|
110
109
|
border-radius: 6px;
|
|
@@ -157,9 +156,6 @@
|
|
|
157
156
|
justify-content: flex-start;
|
|
158
157
|
gap: 20px;
|
|
159
158
|
}
|
|
160
|
-
.left-panel .panel-tabs {
|
|
161
|
-
gap: 4px;
|
|
162
|
-
}
|
|
163
159
|
.left-panel .panel-tabs button {
|
|
164
160
|
padding-inline: 1px;
|
|
165
161
|
font-size: 12px;
|
|
@@ -181,7 +177,7 @@
|
|
|
181
177
|
}
|
|
182
178
|
.panel-tabs button.active {
|
|
183
179
|
background: transparent;
|
|
184
|
-
color:
|
|
180
|
+
color: #006aa1;
|
|
185
181
|
box-shadow: none;
|
|
186
182
|
}
|
|
187
183
|
.panel-tabs button.active::after {
|
|
@@ -190,7 +186,7 @@
|
|
|
190
186
|
bottom: -1px;
|
|
191
187
|
left: 0;
|
|
192
188
|
height: 2px;
|
|
193
|
-
background: var(--
|
|
189
|
+
background: var(--accent);
|
|
194
190
|
content: "";
|
|
195
191
|
}
|
|
196
192
|
.stage {
|
|
@@ -208,13 +204,64 @@
|
|
|
208
204
|
.workspace.right-collapsed .stage {
|
|
209
205
|
padding-right: 96px;
|
|
210
206
|
}
|
|
207
|
+
.editor-content {
|
|
208
|
+
display: contents;
|
|
209
|
+
}
|
|
210
|
+
.is-building .canvas {
|
|
211
|
+
opacity: 0.18;
|
|
212
|
+
filter: none;
|
|
213
|
+
}
|
|
214
|
+
.build-loading {
|
|
215
|
+
z-index: 45;
|
|
216
|
+
pointer-events: none;
|
|
217
|
+
}
|
|
218
|
+
.build-loading-card {
|
|
219
|
+
pointer-events: auto;
|
|
220
|
+
display: grid;
|
|
221
|
+
gap: 10px;
|
|
222
|
+
width: min(320px, 100%);
|
|
223
|
+
padding: 24px;
|
|
224
|
+
border: 1px solid var(--ui-border);
|
|
225
|
+
border-radius: 16px;
|
|
226
|
+
background: var(--ui-surface);
|
|
227
|
+
box-shadow: var(--ui-shadow);
|
|
228
|
+
text-align: center;
|
|
229
|
+
}
|
|
230
|
+
.build-loading-card button {
|
|
231
|
+
min-height: 40px;
|
|
232
|
+
border-radius: 8px;
|
|
233
|
+
}
|
|
234
|
+
.build-loading-card strong {
|
|
235
|
+
font-size: 14px;
|
|
236
|
+
font-weight: 500;
|
|
237
|
+
}
|
|
238
|
+
.build-loading-card span {
|
|
239
|
+
font-size: 12px;
|
|
240
|
+
line-height: 1.5;
|
|
241
|
+
color: var(--ui-muted);
|
|
242
|
+
}
|
|
243
|
+
.build-nebula {
|
|
244
|
+
position: relative;
|
|
245
|
+
width: 88px;
|
|
246
|
+
height: 88px;
|
|
247
|
+
margin: -4px auto 4px;
|
|
248
|
+
}
|
|
249
|
+
.build-nebula::before {
|
|
250
|
+
content: "";
|
|
251
|
+
position: absolute;
|
|
252
|
+
inset: 14px;
|
|
253
|
+
border-radius: 50%;
|
|
254
|
+
background: conic-gradient(from 45deg, #77d3ed70, #b994dc60, #729fec50, #77d3ed70);
|
|
255
|
+
filter: blur(10px);
|
|
256
|
+
animation: orb-turn 12s linear infinite reverse;
|
|
257
|
+
}
|
|
211
258
|
.slide-wrap {
|
|
212
259
|
width: 100%;
|
|
213
260
|
max-width: min(1200px, calc((100vh - 270px) * var(--page-ratio)));
|
|
214
261
|
}
|
|
215
262
|
.stage-meta {
|
|
216
263
|
display: flex;
|
|
217
|
-
align-items:
|
|
264
|
+
align-items: center;
|
|
218
265
|
justify-content: space-between;
|
|
219
266
|
gap: 16px;
|
|
220
267
|
min-height: 26px;
|
|
@@ -222,8 +269,8 @@
|
|
|
222
269
|
}
|
|
223
270
|
.edit-elements-action {
|
|
224
271
|
flex-shrink: 0;
|
|
225
|
-
min-height:
|
|
226
|
-
padding:
|
|
272
|
+
min-height: 40px;
|
|
273
|
+
padding: 7px 10px;
|
|
227
274
|
font-size: 12px;
|
|
228
275
|
}
|
|
229
276
|
.stage-meta h2 {
|
|
@@ -235,13 +282,20 @@
|
|
|
235
282
|
}
|
|
236
283
|
.stage-meta input {
|
|
237
284
|
width: min(240px, 100%);
|
|
238
|
-
height:
|
|
239
|
-
padding:
|
|
285
|
+
height: 40px;
|
|
286
|
+
padding: 7px 9px;
|
|
240
287
|
font-size: 12px;
|
|
241
288
|
}
|
|
242
289
|
@media (max-width: 1200px) {
|
|
243
290
|
.stage {
|
|
244
|
-
padding-right:
|
|
291
|
+
padding-right: 96px;
|
|
245
292
|
padding-left: 276px;
|
|
246
293
|
}
|
|
247
294
|
}
|
|
295
|
+
@media (max-width: 900px) {
|
|
296
|
+
.workspace.left-collapsed .stage,
|
|
297
|
+
.workspace.right-collapsed .stage,
|
|
298
|
+
.workspace.left-collapsed.right-collapsed .stage {
|
|
299
|
+
padding: 96px 16px 110px;
|
|
300
|
+
}
|
|
301
|
+
}
|