Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in / Register
Toggle navigation
W
WebAgent
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
xuchentao
WebAgent
Commits
57609ddd
Commit
57609ddd
authored
Jul 16, 2026
by
xuchentao
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix responsive preview toolbar layout
parent
db3476b4
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
3 additions
and
2 deletions
+3
-2
styles.css
frontend/src/styles.css
+3
-2
No files found.
frontend/src/styles.css
View file @
57609ddd
...
@@ -19,7 +19,7 @@
...
@@ -19,7 +19,7 @@
.chat-scroll
{
flex
:
1
1
0
;
min-height
:
0
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
overscroll-behavior
:
contain
;
padding
:
20px
17px
28px
}
.chat-date
{
text-align
:
center
;
color
:
#aaaeba
;
font-size
:
9px
;
margin-bottom
:
22px
}
.message
{
display
:
flex
;
gap
:
9px
;
margin-bottom
:
17px
}
.message.user
{
justify-content
:
flex-end
}
.message
>
div
{
max-width
:
86%
}
.message
p
{
margin
:
0
;
padding
:
12px
14px
;
color
:
var
(
--text-2
);
background
:
#f6f6f9
;
border-radius
:
4px
13px
13px
13px
;
font-size
:
12px
;
line-height
:
1.65
}
.message.user
p
{
color
:
white
;
background
:
var
(
--gradient
);
border-radius
:
13px
4px
13px
13px
;
box-shadow
:
0
8px
18px
rgba
(
112
,
40
,
255
,
.15
)}
.message
small
{
display
:
flex
;
align-items
:
center
;
gap
:
4px
;
margin
:
6px
2px
0
;
color
:
#9a9da8
;
font-size
:
9px
}
.agent-avatar
{
flex
:
0
0
auto
;
display
:
grid
;
place-items
:
center
;
width
:
28px
;
height
:
28px
;
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border
:
1px
solid
#e2dbff
;
border-radius
:
9px
}
.agent-progress
{
display
:
flex
;
gap
:
9px
;
margin
:
8px
0
18px
}
.agent-progress
>
div
{
flex
:
1
;
padding
:
12px
13px
;
background
:
#faf9ff
;
border
:
1px
solid
#ebe6ff
;
border-radius
:
4px
13px
13px
13px
}
.agent-progress
p
{
display
:
flex
;
align-items
:
center
;
gap
:
7px
;
margin
:
0
0
10px
;
color
:
var
(
--text-2
);
font-size
:
11px
;
font-weight
:
700
}
.agent-progress
small
{
color
:
var
(
--muted
);
font-size
:
9px
}
.progress-track
{
height
:
3px
;
margin-bottom
:
8px
;
overflow
:
hidden
;
background
:
#ebe7f5
;
border-radius
:
9px
}
.progress-track
i
{
display
:
block
;
width
:
45%
;
height
:
100%
;
background
:
var
(
--gradient
);
border-radius
:
9px
;
animation
:
progress
1.5s
ease-in-out
infinite
}
@keyframes
progress
{
50
%
{
transform
:
translateX
(
120%
)}}
.suggestions
{
display
:
flex
;
flex-direction
:
column
;
gap
:
7px
;
margin
:
25px
37px
0
}
.suggestions
>
span
{
margin-bottom
:
3px
;
color
:
var
(
--muted
);
font-size
:
9px
}
.suggestions
button
{
display
:
flex
;
align-items
:
center
;
gap
:
7px
;
padding
:
9px
11px
;
text-align
:
left
;
color
:
var
(
--text-2
);
background
:
#fff
;
border
:
1px
solid
var
(
--border
);
border-radius
:
9px
;
font-size
:
10px
}
.suggestions
button
:hover
{
color
:
var
(
--primary
);
border-color
:
#cdbdff
;
background
:
#faf9ff
}
.chat-scroll
{
flex
:
1
1
0
;
min-height
:
0
;
overflow-x
:
hidden
;
overflow-y
:
auto
;
overscroll-behavior
:
contain
;
padding
:
20px
17px
28px
}
.chat-date
{
text-align
:
center
;
color
:
#aaaeba
;
font-size
:
9px
;
margin-bottom
:
22px
}
.message
{
display
:
flex
;
gap
:
9px
;
margin-bottom
:
17px
}
.message.user
{
justify-content
:
flex-end
}
.message
>
div
{
max-width
:
86%
}
.message
p
{
margin
:
0
;
padding
:
12px
14px
;
color
:
var
(
--text-2
);
background
:
#f6f6f9
;
border-radius
:
4px
13px
13px
13px
;
font-size
:
12px
;
line-height
:
1.65
}
.message.user
p
{
color
:
white
;
background
:
var
(
--gradient
);
border-radius
:
13px
4px
13px
13px
;
box-shadow
:
0
8px
18px
rgba
(
112
,
40
,
255
,
.15
)}
.message
small
{
display
:
flex
;
align-items
:
center
;
gap
:
4px
;
margin
:
6px
2px
0
;
color
:
#9a9da8
;
font-size
:
9px
}
.agent-avatar
{
flex
:
0
0
auto
;
display
:
grid
;
place-items
:
center
;
width
:
28px
;
height
:
28px
;
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border
:
1px
solid
#e2dbff
;
border-radius
:
9px
}
.agent-progress
{
display
:
flex
;
gap
:
9px
;
margin
:
8px
0
18px
}
.agent-progress
>
div
{
flex
:
1
;
padding
:
12px
13px
;
background
:
#faf9ff
;
border
:
1px
solid
#ebe6ff
;
border-radius
:
4px
13px
13px
13px
}
.agent-progress
p
{
display
:
flex
;
align-items
:
center
;
gap
:
7px
;
margin
:
0
0
10px
;
color
:
var
(
--text-2
);
font-size
:
11px
;
font-weight
:
700
}
.agent-progress
small
{
color
:
var
(
--muted
);
font-size
:
9px
}
.progress-track
{
height
:
3px
;
margin-bottom
:
8px
;
overflow
:
hidden
;
background
:
#ebe7f5
;
border-radius
:
9px
}
.progress-track
i
{
display
:
block
;
width
:
45%
;
height
:
100%
;
background
:
var
(
--gradient
);
border-radius
:
9px
;
animation
:
progress
1.5s
ease-in-out
infinite
}
@keyframes
progress
{
50
%
{
transform
:
translateX
(
120%
)}}
.suggestions
{
display
:
flex
;
flex-direction
:
column
;
gap
:
7px
;
margin
:
25px
37px
0
}
.suggestions
>
span
{
margin-bottom
:
3px
;
color
:
var
(
--muted
);
font-size
:
9px
}
.suggestions
button
{
display
:
flex
;
align-items
:
center
;
gap
:
7px
;
padding
:
9px
11px
;
text-align
:
left
;
color
:
var
(
--text-2
);
background
:
#fff
;
border
:
1px
solid
var
(
--border
);
border-radius
:
9px
;
font-size
:
10px
}
.suggestions
button
:hover
{
color
:
var
(
--primary
);
border-color
:
#cdbdff
;
background
:
#faf9ff
}
.composer
{
flex
:
0
0
auto
;
margin
:
0
14px
14px
;
padding
:
10px
;
background
:
#fff
;
border
:
1px
solid
#dcd8e8
;
border-radius
:
13px
;
box-shadow
:
0
5px
22px
rgba
(
36
,
16
,
95
,
.07
)}
.composer
textarea
{
width
:
100%
;
padding
:
2px
4px
;
resize
:
none
;
color
:
var
(
--text
);
background
:
transparent
;
border
:
0
;
outline
:
none
;
font-size
:
11px
;
line-height
:
1.55
}
.composer
textarea
::placeholder
{
color
:
#a5a7b0
}
.composer
>
div
{
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
}
.composer
>
div
>
span
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
color
:
var
(
--muted
);
font-size
:
9px
}
.online-dot
,
.draft-dot
{
width
:
6px
;
height
:
6px
;
border-radius
:
50%
}
.online-dot
{
background
:
#20b486
}
.draft-dot
{
background
:
#d79614
;
box-shadow
:
0
0
0
3px
rgba
(
215
,
150
,
20
,
.1
)}
.composer
button
{
display
:
grid
;
place-items
:
center
;
width
:
29px
;
height
:
29px
;
color
:
white
;
background
:
var
(
--gradient
);
border
:
0
;
border-radius
:
8px
}
.composer
{
flex
:
0
0
auto
;
margin
:
0
14px
14px
;
padding
:
10px
;
background
:
#fff
;
border
:
1px
solid
#dcd8e8
;
border-radius
:
13px
;
box-shadow
:
0
5px
22px
rgba
(
36
,
16
,
95
,
.07
)}
.composer
textarea
{
width
:
100%
;
padding
:
2px
4px
;
resize
:
none
;
color
:
var
(
--text
);
background
:
transparent
;
border
:
0
;
outline
:
none
;
font-size
:
11px
;
line-height
:
1.55
}
.composer
textarea
::placeholder
{
color
:
#a5a7b0
}
.composer
>
div
{
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
}
.composer
>
div
>
span
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
color
:
var
(
--muted
);
font-size
:
9px
}
.online-dot
,
.draft-dot
{
width
:
6px
;
height
:
6px
;
border-radius
:
50%
}
.online-dot
{
background
:
#20b486
}
.draft-dot
{
background
:
#d79614
;
box-shadow
:
0
0
0
3px
rgba
(
215
,
150
,
20
,
.1
)}
.composer
button
{
display
:
grid
;
place-items
:
center
;
width
:
29px
;
height
:
29px
;
color
:
white
;
background
:
var
(
--gradient
);
border
:
0
;
border-radius
:
8px
}
.history-list
{
flex
:
1
1
0
;
min-height
:
0
;
overflow
:
auto
;
padding
:
16px
16px
22px
}
.environment-versions
{
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
;
gap
:
8px
;
margin-bottom
:
22px
}
.environment-versions
>
button
{
min-width
:
0
;
padding
:
12px
;
text-align
:
left
;
background
:
#fafafd
;
border
:
1px
solid
var
(
--border
);
border-radius
:
12px
}
.environment-versions
>
button
:hover
,
.environment-versions
>
button
.active
{
border-color
:
#bca8ff
;
background
:
#faf8ff
;
box-shadow
:
0
5px
18px
rgba
(
112
,
40
,
255
,
.08
)}
.environment-versions
>
button
.production
:hover
,
.environment-versions
>
button
.production.active
{
border-color
:
#9bd8c6
;
background
:
#f4fcf9
;
box-shadow
:
0
5px
18px
rgba
(
32
,
180
,
134
,
.08
)}
.environment-versions
span
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
color
:
var
(
--text-2
);
font-size
:
9px
;
font-weight
:
750
}
.environment-versions
span
>
em
{
margin-left
:
auto
;
padding
:
2px
4px
;
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border-radius
:
4px
;
font-size
:
7px
;
font-style
:
normal
}
.environment-versions
.production
span
>
em
{
color
:
#13765b
;
background
:
#e7f8f2
}
.environment-versions
strong
,
.environment-versions
small
{
display
:
block
}
.environment-versions
strong
{
margin-top
:
13px
;
font-family
:
ui-monospace
,
SFMono-Regular
,
monospace
;
font-size
:
13px
;
letter-spacing
:
.02em
}
.environment-versions
small
{
margin-top
:
5px
;
overflow
:
hidden
;
color
:
var
(
--muted
);
font-size
:
8px
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.history-heading
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
margin-bottom
:
18px
}
.history-heading
h3
{
margin
:
0
0
4px
;
font-size
:
14px
}
.history-heading
p
{
margin
:
0
;
color
:
var
(
--muted
);
font-size
:
9px
}
.history-heading
>
span
{
display
:
grid
;
place-items
:
center
;
width
:
25px
;
height
:
25px
;
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border-radius
:
8px
;
font-size
:
10px
;
font-weight
:
800
}
.history-list
article
{
display
:
grid
;
grid-template-columns
:
24px
minmax
(
0
,
1
fr
)
auto
;
gap
:
7px
;
min-height
:
69px
}
.history-list
article
.environment-version
{
margin
:
0
-5px
;
padding
:
0
5px
;
background
:
#fbfaff
;
border-radius
:
10px
}
.timeline
{
display
:
flex
;
align-items
:
center
;
flex-direction
:
column
}
.timeline
i
{
display
:
grid
;
place-items
:
center
;
width
:
17px
;
height
:
17px
;
color
:
white
;
background
:
#d6d7df
;
border
:
3px
solid
white
;
box-shadow
:
0
0
0
1px
#d6d7df
;
border-radius
:
50%
;
font-style
:
normal
}
.history-list
article
.environment-version
.timeline
i
{
background
:
var
(
--primary
);
box-shadow
:
0
0
0
1px
var
(
--primary
)}
.timeline
span
{
width
:
1px
;
flex
:
1
;
background
:
var
(
--divider
)}
.commit-info
{
min-width
:
0
;
padding-bottom
:
18px
}
.commit-info
>
div
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
min-width
:
0
}
.commit-info
strong
{
min-width
:
0
;
overflow
:
hidden
;
font-size
:
10px
;
line-height
:
1.4
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.commit-info
em
{
flex
:
0
0
auto
;
padding
:
2px
5px
;
border-radius
:
5px
;
font-size
:
7px
;
font-style
:
normal
}
.commit-info
.preview-badge
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.commit-info
.production-badge
{
color
:
#13765b
;
background
:
#e7f8f2
}
.commit-info
p
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
margin
:
5px
0
0
;
color
:
var
(
--muted
);
font-size
:
9px
}
.commit-info
code
{
font-size
:
9px
}
.history-actions
{
display
:
flex
;
align-items
:
flex-start
;
gap
:
4px
}
.history-actions
button
{
display
:
grid
;
place-items
:
center
;
width
:
25px
;
height
:
25px
;
padding
:
0
;
color
:
var
(
--muted
);
background
:
white
;
border
:
1px
solid
var
(
--border
);
border-radius
:
7px
}
.history-actions
button
:hover
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.history-list
{
flex
:
1
1
0
;
min-height
:
0
;
overflow
:
auto
;
padding
:
16px
16px
22px
}
.environment-versions
{
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
;
gap
:
8px
;
margin-bottom
:
22px
}
.environment-versions
>
button
{
min-width
:
0
;
padding
:
12px
;
text-align
:
left
;
background
:
#fafafd
;
border
:
1px
solid
var
(
--border
);
border-radius
:
12px
}
.environment-versions
>
button
:hover
,
.environment-versions
>
button
.active
{
border-color
:
#bca8ff
;
background
:
#faf8ff
;
box-shadow
:
0
5px
18px
rgba
(
112
,
40
,
255
,
.08
)}
.environment-versions
>
button
.production
:hover
,
.environment-versions
>
button
.production.active
{
border-color
:
#9bd8c6
;
background
:
#f4fcf9
;
box-shadow
:
0
5px
18px
rgba
(
32
,
180
,
134
,
.08
)}
.environment-versions
span
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
color
:
var
(
--text-2
);
font-size
:
9px
;
font-weight
:
750
}
.environment-versions
span
>
em
{
margin-left
:
auto
;
padding
:
2px
4px
;
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border-radius
:
4px
;
font-size
:
7px
;
font-style
:
normal
}
.environment-versions
.production
span
>
em
{
color
:
#13765b
;
background
:
#e7f8f2
}
.environment-versions
strong
,
.environment-versions
small
{
display
:
block
}
.environment-versions
strong
{
margin-top
:
13px
;
font-family
:
ui-monospace
,
SFMono-Regular
,
monospace
;
font-size
:
13px
;
letter-spacing
:
.02em
}
.environment-versions
small
{
margin-top
:
5px
;
overflow
:
hidden
;
color
:
var
(
--muted
);
font-size
:
8px
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.history-heading
{
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
margin-bottom
:
18px
}
.history-heading
h3
{
margin
:
0
0
4px
;
font-size
:
14px
}
.history-heading
p
{
margin
:
0
;
color
:
var
(
--muted
);
font-size
:
9px
}
.history-heading
>
span
{
display
:
grid
;
place-items
:
center
;
width
:
25px
;
height
:
25px
;
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border-radius
:
8px
;
font-size
:
10px
;
font-weight
:
800
}
.history-list
article
{
display
:
grid
;
grid-template-columns
:
24px
minmax
(
0
,
1
fr
)
auto
;
gap
:
7px
;
min-height
:
69px
}
.history-list
article
.environment-version
{
margin
:
0
-5px
;
padding
:
0
5px
;
background
:
#fbfaff
;
border-radius
:
10px
}
.timeline
{
display
:
flex
;
align-items
:
center
;
flex-direction
:
column
}
.timeline
i
{
display
:
grid
;
place-items
:
center
;
width
:
17px
;
height
:
17px
;
color
:
white
;
background
:
#d6d7df
;
border
:
3px
solid
white
;
box-shadow
:
0
0
0
1px
#d6d7df
;
border-radius
:
50%
;
font-style
:
normal
}
.history-list
article
.environment-version
.timeline
i
{
background
:
var
(
--primary
);
box-shadow
:
0
0
0
1px
var
(
--primary
)}
.timeline
span
{
width
:
1px
;
flex
:
1
;
background
:
var
(
--divider
)}
.commit-info
{
min-width
:
0
;
padding-bottom
:
18px
}
.commit-info
>
div
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
min-width
:
0
}
.commit-info
strong
{
min-width
:
0
;
overflow
:
hidden
;
font-size
:
10px
;
line-height
:
1.4
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.commit-info
em
{
flex
:
0
0
auto
;
padding
:
2px
5px
;
border-radius
:
5px
;
font-size
:
7px
;
font-style
:
normal
}
.commit-info
.preview-badge
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.commit-info
.production-badge
{
color
:
#13765b
;
background
:
#e7f8f2
}
.commit-info
p
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
margin
:
5px
0
0
;
color
:
var
(
--muted
);
font-size
:
9px
}
.commit-info
code
{
font-size
:
9px
}
.history-actions
{
display
:
flex
;
align-items
:
flex-start
;
gap
:
4px
}
.history-actions
button
{
display
:
grid
;
place-items
:
center
;
width
:
25px
;
height
:
25px
;
padding
:
0
;
color
:
var
(
--muted
);
background
:
white
;
border
:
1px
solid
var
(
--border
);
border-radius
:
7px
}
.history-actions
button
:hover
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.preview-shell
{
min-height
:
0
;
min-width
:
0
;
overflow
:
hidden
;
display
:
flex
;
flex-direction
:
column
}
.preview-toolbar
{
min-height
:
66px
;
display
:
grid
;
grid-template-columns
:
minmax
(
190px
,
1
fr
)
auto
minmax
(
310px
,
1
fr
)
;
grid-template-areas
:
"title modes actions"
;
align-items
:
center
;
gap
:
12px
;
padding
:
0
18px
;
background
:
#fff
;
border-bottom
:
1px
solid
var
(
--border
)}
.preview-title
{
grid-area
:
title
;
display
:
flex
;
align-items
:
center
;
gap
:
10px
;
min-width
:
0
}
.preview-title
>
div
{
display
:
flex
;
align-items
:
center
;
gap
:
8px
;
min-width
:
0
}
.preview-title
strong
{
overflow
:
hidden
;
font-size
:
12px
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.preview-title
em
{
flex
:
0
0
auto
;
padding
:
3px
6px
;
color
:
#7957d5
;
background
:
#f2edff
;
border-radius
:
5px
;
font-size
:
8px
;
font-style
:
normal
;
font-weight
:
750
}
.preview-title
em
.production
{
color
:
#13765b
;
background
:
#e7f8f2
}
.status-dot
{
flex
:
0
0
auto
;
width
:
7px
;
height
:
7px
;
border-radius
:
50%
;
background
:
#7957d5
;
box-shadow
:
0
0
0
4px
rgba
(
112
,
40
,
255
,
.1
)}
.status-dot.production
{
background
:
#20b486
;
box-shadow
:
0
0
0
4px
rgba
(
32
,
180
,
134
,
.1
)}
.build-status
{
flex
:
0
0
auto
;
display
:
flex
;
align-items
:
center
;
gap
:
4px
;
padding
:
5px
7px
;
color
:
#188866
;
background
:
#ebfbf5
;
border-radius
:
7px
;
font-size
:
8px
;
font-weight
:
750
}
.build-status.failed
{
color
:
#b42318
;
background
:
#fff0ee
}
.build-status.unpublished
{
color
:
#986600
;
background
:
#fff8e5
}
.preview-modes
{
grid-area
:
modes
;
display
:
flex
;
align-items
:
center
;
gap
:
7px
}
.environment-toggle
,
.device-toggle
{
display
:
flex
;
padding
:
3px
;
background
:
#f2f2f6
;
border-radius
:
8px
}
.environment-toggle
button
{
height
:
27px
;
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
padding
:
0
9px
;
color
:
var
(
--muted
);
background
:
transparent
;
border
:
0
;
border-radius
:
6px
;
font-size
:
8px
;
font-weight
:
750
}
.environment-toggle
button
.active
,
.device-toggle
button
.active
{
color
:
var
(
--text
);
background
:
#fff
;
box-shadow
:
0
2px
7px
rgba
(
36
,
16
,
95
,
.1
)}
.device-toggle
button
{
display
:
grid
;
place-items
:
center
;
width
:
31px
;
height
:
27px
;
color
:
var
(
--muted
);
background
:
transparent
;
border
:
0
;
border-radius
:
6px
}
.toolbar-actions
{
grid-area
:
actions
;
display
:
flex
;
justify-content
:
flex-end
;
gap
:
6px
;
min-width
:
0
}
.toolbar-actions
button
,
.toolbar-actions
a
{
height
:
31px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
5px
;
padding
:
0
9px
;
color
:
var
(
--text-2
);
background
:
#fff
;
border
:
1px
solid
var
(
--border
);
border-radius
:
8px
;
font-size
:
8px
;
font-weight
:
750
;
white-space
:
nowrap
}
.toolbar-actions
button
:hover:not
(
:disabled
),
.toolbar-actions
a
:hover
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.toolbar-actions
.environment-link.production-link
{
color
:
#13765b
}
.toolbar-actions
.environment-link
:disabled
{
color
:
#a8a9b0
;
background
:
#f5f5f7
}
.toolbar-actions
.rebuild-button
{
color
:
var
(
--primary
);
border-color
:
#d8ccff
;
background
:
#faf8ff
}
.toolbar-actions
.undo-button
{
color
:
#9a6100
;
border-color
:
#ecd8ad
;
background
:
#fffaf0
}
.toolbar-actions
.publish-button
{
color
:
white
;
background
:
var
(
--gradient
);
border
:
0
}
.toolbar-actions
.publish-button
:hover:not
(
:disabled
)
{
color
:
white
;
background
:
var
(
--gradient
);
box-shadow
:
0
7px
17px
rgba
(
112
,
40
,
255
,
.2
)}
.toolbar-actions
.publish-button
:disabled
{
color
:
#9a9da8
;
background
:
#efeff4
;
border
:
1px
solid
#e1e1e7
;
box-shadow
:
none
}
.preview-shell
{
min-height
:
0
;
min-width
:
0
;
overflow
:
hidden
;
display
:
flex
;
flex-direction
:
column
;
container-type
:
inline-size
}
.preview-toolbar
{
min-height
:
66px
;
display
:
grid
;
grid-template-columns
:
minmax
(
190px
,
1
fr
)
auto
max-content
;
grid-template-areas
:
"title modes actions"
;
align-items
:
center
;
gap
:
12px
;
padding
:
0
18px
;
background
:
#fff
;
border-bottom
:
1px
solid
var
(
--border
)}
.preview-title
{
grid-area
:
title
;
display
:
flex
;
align-items
:
center
;
gap
:
10px
;
min-width
:
0
}
.preview-title
>
div
{
display
:
flex
;
align-items
:
center
;
gap
:
8px
;
min-width
:
0
}
.preview-title
strong
{
overflow
:
hidden
;
font-size
:
12px
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.preview-title
em
{
flex
:
0
0
auto
;
padding
:
3px
6px
;
color
:
#7957d5
;
background
:
#f2edff
;
border-radius
:
5px
;
font-size
:
8px
;
font-style
:
normal
;
font-weight
:
750
}
.preview-title
em
.production
{
color
:
#13765b
;
background
:
#e7f8f2
}
.status-dot
{
flex
:
0
0
auto
;
width
:
7px
;
height
:
7px
;
border-radius
:
50%
;
background
:
#7957d5
;
box-shadow
:
0
0
0
4px
rgba
(
112
,
40
,
255
,
.1
)}
.status-dot.production
{
background
:
#20b486
;
box-shadow
:
0
0
0
4px
rgba
(
32
,
180
,
134
,
.1
)}
.build-status
{
flex
:
0
0
auto
;
display
:
flex
;
align-items
:
center
;
gap
:
4px
;
padding
:
5px
7px
;
color
:
#188866
;
background
:
#ebfbf5
;
border-radius
:
7px
;
font-size
:
8px
;
font-weight
:
750
}
.build-status.failed
{
color
:
#b42318
;
background
:
#fff0ee
}
.build-status.unpublished
{
color
:
#986600
;
background
:
#fff8e5
}
.preview-modes
{
grid-area
:
modes
;
display
:
flex
;
align-items
:
center
;
gap
:
7px
}
.environment-toggle
,
.device-toggle
{
display
:
flex
;
padding
:
3px
;
background
:
#f2f2f6
;
border-radius
:
8px
}
.environment-toggle
button
{
height
:
27px
;
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
padding
:
0
9px
;
color
:
var
(
--muted
);
background
:
transparent
;
border
:
0
;
border-radius
:
6px
;
font-size
:
8px
;
font-weight
:
750
}
.environment-toggle
button
.active
,
.device-toggle
button
.active
{
color
:
var
(
--text
);
background
:
#fff
;
box-shadow
:
0
2px
7px
rgba
(
36
,
16
,
95
,
.1
)}
.device-toggle
button
{
display
:
grid
;
place-items
:
center
;
width
:
31px
;
height
:
27px
;
color
:
var
(
--muted
);
background
:
transparent
;
border
:
0
;
border-radius
:
6px
}
.toolbar-actions
{
grid-area
:
actions
;
display
:
flex
;
justify-content
:
flex-end
;
gap
:
6px
;
min-width
:
0
}
.toolbar-actions
button
,
.toolbar-actions
a
{
height
:
31px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
5px
;
padding
:
0
9px
;
color
:
var
(
--text-2
);
background
:
#fff
;
border
:
1px
solid
var
(
--border
);
border-radius
:
8px
;
font-size
:
8px
;
font-weight
:
750
;
white-space
:
nowrap
}
.toolbar-actions
button
:hover:not
(
:disabled
),
.toolbar-actions
a
:hover
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.toolbar-actions
.environment-link.production-link
{
color
:
#13765b
}
.toolbar-actions
.environment-link
:disabled
{
color
:
#a8a9b0
;
background
:
#f5f5f7
}
.toolbar-actions
.rebuild-button
{
color
:
var
(
--primary
);
border-color
:
#d8ccff
;
background
:
#faf8ff
}
.toolbar-actions
.undo-button
{
color
:
#9a6100
;
border-color
:
#ecd8ad
;
background
:
#fffaf0
}
.toolbar-actions
.publish-button
{
color
:
white
;
background
:
var
(
--gradient
);
border
:
0
}
.toolbar-actions
.publish-button
:hover:not
(
:disabled
)
{
color
:
white
;
background
:
var
(
--gradient
);
box-shadow
:
0
7px
17px
rgba
(
112
,
40
,
255
,
.2
)}
.toolbar-actions
.publish-button
:disabled
{
color
:
#9a9da8
;
background
:
#efeff4
;
border
:
1px
solid
#e1e1e7
;
box-shadow
:
none
}
.history-edit-lock
{
flex
:
0
0
auto
;
margin
:
0
14px
10px
;
padding
:
9px
11px
;
color
:
#6f4b00
;
background
:
#fff8e7
;
border
:
1px
solid
#f0dfb8
;
border-radius
:
10px
;
font-size
:
9px
;
line-height
:
1.5
}
.history-edit-lock
>
div
{
display
:
flex
;
align-items
:
flex-start
;
gap
:
7px
}
.history-edit-lock
svg
{
flex
:
0
0
auto
;
margin-top
:
1px
}
.history-panel-lock
{
margin
:
0
0
14px
}
.history-list
article
{
display
:
block
;
min-height
:
0
;
margin-bottom
:
5px
}
.history-list
article
.selected
{
background
:
#faf8ff
;
border-radius
:
11px
}
.history-row
{
width
:
100%
;
min-width
:
0
;
display
:
grid
;
grid-template-columns
:
24px
minmax
(
0
,
1
fr
)
auto
;
gap
:
8px
;
padding
:
9px
8px
5px
;
color
:
var
(
--text
);
text-align
:
left
;
background
:
transparent
;
border
:
1px
solid
transparent
;
border-radius
:
11px
}
.history-list
article
.selected
.history-row
{
border-color
:
#ded4ff
}
.history-row
.timeline
{
min-height
:
49px
}
.history-list
article
.selected
.timeline
i
{
background
:
var
(
--primary
);
box-shadow
:
0
0
0
1px
var
(
--primary
)}
.history-row
.commit-info
{
display
:
block
;
min-width
:
0
;
padding
:
0
0
10px
}
.commit-info
>
span
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
min-width
:
0
}
.commit-info
>
span
>
strong
{
min-width
:
0
;
overflow
:
hidden
;
font-size
:
10px
;
line-height
:
1.4
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.commit-info
em
{
flex
:
0
0
auto
;
padding
:
2px
5px
;
border-radius
:
5px
;
font-size
:
7px
;
font-style
:
normal
}
.commit-info
.current-badge
{
color
:
#775400
;
background
:
#fff2c7
}
.commit-info
>
small
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
margin-top
:
6px
;
color
:
var
(
--muted
);
font-size
:
8px
}
.commit-info
>
small
code
{
font-size
:
8px
}
.history-row-state
,
.history-preview-button
{
align-self
:
start
;
min-height
:
24px
;
padding
:
4px
7px
;
border-radius
:
6px
;
font-size
:
7px
;
font-weight
:
750
}
.history-row-state
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.history-preview-button
{
display
:
flex
;
align-items
:
center
;
gap
:
4px
;
color
:
var
(
--text-2
);
background
:
#fff
;
border
:
1px
solid
var
(
--border
)}
.history-preview-button
:hover:not
(
:disabled
)
{
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border-color
:
#d8ccff
}
.history-edit-lock
{
flex
:
0
0
auto
;
margin
:
0
14px
10px
;
padding
:
9px
11px
;
color
:
#6f4b00
;
background
:
#fff8e7
;
border
:
1px
solid
#f0dfb8
;
border-radius
:
10px
;
font-size
:
9px
;
line-height
:
1.5
}
.history-edit-lock
>
div
{
display
:
flex
;
align-items
:
flex-start
;
gap
:
7px
}
.history-edit-lock
svg
{
flex
:
0
0
auto
;
margin-top
:
1px
}
.history-panel-lock
{
margin
:
0
0
14px
}
.history-list
article
{
display
:
block
;
min-height
:
0
;
margin-bottom
:
5px
}
.history-list
article
.selected
{
background
:
#faf8ff
;
border-radius
:
11px
}
.history-row
{
width
:
100%
;
min-width
:
0
;
display
:
grid
;
grid-template-columns
:
24px
minmax
(
0
,
1
fr
)
auto
;
gap
:
8px
;
padding
:
9px
8px
5px
;
color
:
var
(
--text
);
text-align
:
left
;
background
:
transparent
;
border
:
1px
solid
transparent
;
border-radius
:
11px
}
.history-list
article
.selected
.history-row
{
border-color
:
#ded4ff
}
.history-row
.timeline
{
min-height
:
49px
}
.history-list
article
.selected
.timeline
i
{
background
:
var
(
--primary
);
box-shadow
:
0
0
0
1px
var
(
--primary
)}
.history-row
.commit-info
{
display
:
block
;
min-width
:
0
;
padding
:
0
0
10px
}
.commit-info
>
span
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
min-width
:
0
}
.commit-info
>
span
>
strong
{
min-width
:
0
;
overflow
:
hidden
;
font-size
:
10px
;
line-height
:
1.4
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.commit-info
em
{
flex
:
0
0
auto
;
padding
:
2px
5px
;
border-radius
:
5px
;
font-size
:
7px
;
font-style
:
normal
}
.commit-info
.current-badge
{
color
:
#775400
;
background
:
#fff2c7
}
.commit-info
>
small
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
margin-top
:
6px
;
color
:
var
(
--muted
);
font-size
:
8px
}
.commit-info
>
small
code
{
font-size
:
8px
}
.history-row-state
,
.history-preview-button
{
align-self
:
start
;
min-height
:
24px
;
padding
:
4px
7px
;
border-radius
:
6px
;
font-size
:
7px
;
font-weight
:
750
}
.history-row-state
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.history-preview-button
{
display
:
flex
;
align-items
:
center
;
gap
:
4px
;
color
:
var
(
--text-2
);
background
:
#fff
;
border
:
1px
solid
var
(
--border
)}
.history-preview-button
:hover:not
(
:disabled
)
{
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border-color
:
#d8ccff
}
.history-edit-lock
{
flex
:
0
0
auto
;
margin
:
0
14px
10px
;
padding
:
9px
11px
;
color
:
#6f4b00
;
background
:
#fff8e7
;
border
:
1px
solid
#f0dfb8
;
border-radius
:
10px
;
font-size
:
9px
;
line-height
:
1.5
}
.history-edit-lock
>
div
{
display
:
flex
;
align-items
:
flex-start
;
gap
:
7px
}
.history-edit-lock
svg
{
flex
:
0
0
auto
;
margin-top
:
1px
}
.history-panel-lock
{
margin
:
0
0
14px
}
.draft-card
{
margin
:
0
0
14px
;
padding
:
12px
;
background
:
#fffaf0
;
border
:
1px
solid
#ecd8ad
;
border-radius
:
12px
}
.draft-card-heading
{
display
:
flex
;
align-items
:
center
;
gap
:
9px
}
.draft-card-heading
>
span
{
display
:
grid
;
place-items
:
center
;
width
:
28px
;
height
:
28px
;
flex
:
0
0
auto
;
color
:
#9a6100
;
background
:
#fff1cf
;
border-radius
:
8px
}
.draft-card-heading
>
div
{
min-width
:
0
}
.draft-card-heading
strong
,
.draft-card-heading
small
{
display
:
block
}
.draft-card-heading
strong
{
font-size
:
10px
}
.draft-card-heading
small
{
margin-top
:
4px
;
overflow
:
hidden
;
color
:
#8a6a30
;
font-size
:
8px
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.draft-card-actions
{
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
;
gap
:
6px
;
margin-top
:
11px
}
.draft-card-actions
button
{
height
:
29px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
5px
;
color
:
#765421
;
background
:
#fff
;
border
:
1px
solid
#ecd8ad
;
border-radius
:
7px
;
font-size
:
8px
;
font-weight
:
750
}
.draft-card-actions
button
:last-child
{
color
:
white
;
background
:
#b87808
;
border-color
:
#b87808
}
.draft-card-actions
button
:hover:not
(
:disabled
)
{
box-shadow
:
0
4px
12px
rgba
(
154
,
97
,
0
,
.12
)}
.history-list
article
{
display
:
block
;
min-height
:
0
;
margin-bottom
:
5px
}
.history-list
article
.selected
{
background
:
#faf8ff
;
border-radius
:
11px
}
.history-row
{
width
:
100%
;
min-width
:
0
;
display
:
grid
;
grid-template-columns
:
24px
minmax
(
0
,
1
fr
)
auto
;
gap
:
8px
;
padding
:
9px
8px
5px
;
color
:
var
(
--text
);
text-align
:
left
;
background
:
transparent
;
border
:
1px
solid
transparent
;
border-radius
:
11px
}
.history-list
article
.selected
.history-row
{
border-color
:
#ded4ff
}
.history-row
.timeline
{
min-height
:
49px
}
.history-list
article
.selected
.timeline
i
{
background
:
var
(
--primary
);
box-shadow
:
0
0
0
1px
var
(
--primary
)}
.history-row
.commit-info
{
display
:
block
;
min-width
:
0
;
padding
:
0
0
10px
}
.commit-info
>
span
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
min-width
:
0
}
.commit-info
>
span
>
strong
{
min-width
:
0
;
overflow
:
hidden
;
font-size
:
10px
;
line-height
:
1.4
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.commit-info
em
{
flex
:
0
0
auto
;
padding
:
2px
5px
;
border-radius
:
5px
;
font-size
:
7px
;
font-style
:
normal
}
.commit-info
.current-badge
{
color
:
#775400
;
background
:
#fff2c7
}
.commit-info
>
small
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
margin-top
:
6px
;
color
:
var
(
--muted
);
font-size
:
8px
}
.commit-info
>
small
code
{
font-size
:
8px
}
.history-row-state
,
.history-preview-button
{
align-self
:
start
;
min-height
:
24px
;
padding
:
4px
7px
;
border-radius
:
6px
;
font-size
:
7px
;
font-weight
:
750
}
.history-row-state
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.history-preview-button
{
display
:
flex
;
align-items
:
center
;
gap
:
4px
;
color
:
var
(
--text-2
);
background
:
#fff
;
border
:
1px
solid
var
(
--border
)}
.history-preview-button
:hover:not
(
:disabled
)
{
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border-color
:
#d8ccff
}
.history-edit-lock
{
flex
:
0
0
auto
;
margin
:
0
14px
10px
;
padding
:
9px
11px
;
color
:
#6f4b00
;
background
:
#fff8e7
;
border
:
1px
solid
#f0dfb8
;
border-radius
:
10px
;
font-size
:
9px
;
line-height
:
1.5
}
.history-edit-lock
>
div
{
display
:
flex
;
align-items
:
flex-start
;
gap
:
7px
}
.history-edit-lock
svg
{
flex
:
0
0
auto
;
margin-top
:
1px
}
.history-panel-lock
{
margin
:
0
0
14px
}
.draft-card
{
margin
:
0
0
14px
;
padding
:
12px
;
background
:
#fffaf0
;
border
:
1px
solid
#ecd8ad
;
border-radius
:
12px
}
.draft-card-heading
{
display
:
flex
;
align-items
:
center
;
gap
:
9px
}
.draft-card-heading
>
span
{
display
:
grid
;
place-items
:
center
;
width
:
28px
;
height
:
28px
;
flex
:
0
0
auto
;
color
:
#9a6100
;
background
:
#fff1cf
;
border-radius
:
8px
}
.draft-card-heading
>
div
{
min-width
:
0
}
.draft-card-heading
strong
,
.draft-card-heading
small
{
display
:
block
}
.draft-card-heading
strong
{
font-size
:
10px
}
.draft-card-heading
small
{
margin-top
:
4px
;
overflow
:
hidden
;
color
:
#8a6a30
;
font-size
:
8px
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.draft-card-actions
{
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
;
gap
:
6px
;
margin-top
:
11px
}
.draft-card-actions
button
{
height
:
29px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
5px
;
color
:
#765421
;
background
:
#fff
;
border
:
1px
solid
#ecd8ad
;
border-radius
:
7px
;
font-size
:
8px
;
font-weight
:
750
}
.draft-card-actions
button
:last-child
{
color
:
white
;
background
:
#b87808
;
border-color
:
#b87808
}
.draft-card-actions
button
:hover:not
(
:disabled
)
{
box-shadow
:
0
4px
12px
rgba
(
154
,
97
,
0
,
.12
)}
.history-list
article
{
display
:
block
;
min-height
:
0
;
margin-bottom
:
5px
}
.history-list
article
.selected
{
background
:
#faf8ff
;
border-radius
:
11px
}
.history-row
{
width
:
100%
;
min-width
:
0
;
display
:
grid
;
grid-template-columns
:
24px
minmax
(
0
,
1
fr
)
auto
;
gap
:
8px
;
padding
:
9px
8px
5px
;
color
:
var
(
--text
);
text-align
:
left
;
background
:
transparent
;
border
:
1px
solid
transparent
;
border-radius
:
11px
}
.history-list
article
.selected
.history-row
{
border-color
:
#ded4ff
}
.history-row
.timeline
{
min-height
:
49px
}
.history-list
article
.selected
.timeline
i
{
background
:
var
(
--primary
);
box-shadow
:
0
0
0
1px
var
(
--primary
)}
.history-row
.commit-info
{
display
:
block
;
min-width
:
0
;
padding
:
0
0
10px
}
.commit-info
>
span
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
min-width
:
0
}
.commit-info
>
span
>
strong
{
min-width
:
0
;
overflow
:
hidden
;
font-size
:
10px
;
line-height
:
1.4
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.commit-info
em
{
flex
:
0
0
auto
;
padding
:
2px
5px
;
border-radius
:
5px
;
font-size
:
7px
;
font-style
:
normal
}
.commit-info
.current-badge
{
color
:
#775400
;
background
:
#fff2c7
}
.commit-info
>
small
{
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
margin-top
:
6px
;
color
:
var
(
--muted
);
font-size
:
8px
}
.commit-info
>
small
code
{
font-size
:
8px
}
.history-row-state
,
.history-preview-button
{
align-self
:
start
;
min-height
:
24px
;
padding
:
4px
7px
;
border-radius
:
6px
;
font-size
:
7px
;
font-weight
:
750
}
.history-row-state
{
color
:
var
(
--primary
);
background
:
var
(
--soft
)}
.history-preview-button
{
display
:
flex
;
align-items
:
center
;
gap
:
4px
;
color
:
var
(
--text-2
);
background
:
#fff
;
border
:
1px
solid
var
(
--border
)}
.history-preview-button
:hover:not
(
:disabled
)
{
color
:
var
(
--primary
);
background
:
var
(
--soft
);
border-color
:
#d8ccff
}
.browser-stage
{
position
:
relative
;
flex
:
1
;
min-height
:
0
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
padding
:
0
;
background
:
#eff0f5
;
overflow
:
auto
}
.browser-frame
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
overflow
:
hidden
;
background
:
#fff
;
border
:
0
;
border-radius
:
0
;
box-shadow
:
none
;
transition
:
.35s
ease
}
.browser-frame.mobile
{
width
:
390px
;
height
:
calc
(
100%
-
36px
);
max-height
:
760px
;
border
:
1px
solid
#dfe0e7
;
border-radius
:
14px
;
box-shadow
:
0
15px
45px
rgba
(
30
,
24
,
53
,
.1
)}
.browser-chrome
{
height
:
31px
;
display
:
grid
;
grid-template-columns
:
70px
1
fr
70px
;
align-items
:
center
;
padding
:
0
10px
;
background
:
#fafafd
;
border-bottom
:
1px
solid
#ebeaf0
}
.browser-chrome
>
div
{
display
:
flex
;
gap
:
5px
}
.browser-chrome
i
{
width
:
7px
;
height
:
7px
;
border-radius
:
50%
;
background
:
#e1e1e7
}
.browser-chrome
i
:first-child
{
background
:
#ff8b86
}
.browser-chrome
i
:nth-child
(
2
)
{
background
:
#ffd36b
}
.browser-chrome
i
:nth-child
(
3
)
{
background
:
#71d19a
}
.browser-chrome
span
{
justify-self
:
center
;
width
:
min
(
390px
,
80%
);
padding
:
4px
10px
;
text-align
:
center
;
color
:
#9a9ca6
;
background
:
#f0f0f4
;
border-radius
:
5px
;
font-size
:
8px
}
.browser-chrome
>
svg
{
justify-self
:
end
;
color
:
#a7a9b3
}
.browser-frame
iframe
{
display
:
block
;
width
:
100%
;
height
:
calc
(
100%
-
31px
);
border
:
0
;
background
:
#fff
}
.production-empty
{
height
:
calc
(
100%
-
31px
);
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
padding
:
30px
;
text-align
:
center
;
background
:
linear-gradient
(
180deg
,
#fbfffd
,
#f7faf9
)}
.production-empty
>
span
{
display
:
grid
;
place-items
:
center
;
width
:
52px
;
height
:
52px
;
color
:
#168064
;
background
:
#e8f8f2
;
border-radius
:
16px
}
.production-empty
strong
{
margin-top
:
17px
;
font-size
:
15px
}
.production-empty
p
{
max-width
:
360px
;
margin
:
8px
0
20px
;
color
:
var
(
--muted
);
font-size
:
10px
;
line-height
:
1.7
}
.production-empty
button
{
height
:
36px
;
display
:
flex
;
align-items
:
center
;
gap
:
7px
;
padding
:
0
14px
;
color
:
white
;
background
:
linear-gradient
(
135deg
,
#15936e
,
#20b486
);
border
:
0
;
border-radius
:
9px
;
font-size
:
10px
;
font-weight
:
800
}
.preview-busy
{
position
:
absolute
;
inset
:
31px
0
0
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
gap
:
8px
;
color
:
var
(
--primary
);
background
:
rgba
(
248
,
248
,
252
,
.72
);
backdrop-filter
:
blur
(
4px
)}
.preview-busy
strong
{
color
:
var
(
--text
);
font-size
:
13px
}
.preview-busy
span
{
color
:
var
(
--muted
);
font-size
:
10px
}
.preview-footer
{
height
:
29px
;
padding
:
0
22px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
gap
:
18px
;
color
:
var
(
--muted
);
background
:
#fff
;
border-top
:
1px
solid
var
(
--divider
);
font-size
:
8px
}
.preview-footer
span
{
min-width
:
0
;
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.preview-footer
span
:last-child
{
flex
:
0
1
auto
}
.browser-stage
{
position
:
relative
;
flex
:
1
;
min-height
:
0
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
padding
:
0
;
background
:
#eff0f5
;
overflow
:
auto
}
.browser-frame
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
overflow
:
hidden
;
background
:
#fff
;
border
:
0
;
border-radius
:
0
;
box-shadow
:
none
;
transition
:
.35s
ease
}
.browser-frame.mobile
{
width
:
390px
;
height
:
calc
(
100%
-
36px
);
max-height
:
760px
;
border
:
1px
solid
#dfe0e7
;
border-radius
:
14px
;
box-shadow
:
0
15px
45px
rgba
(
30
,
24
,
53
,
.1
)}
.browser-chrome
{
height
:
31px
;
display
:
grid
;
grid-template-columns
:
70px
1
fr
70px
;
align-items
:
center
;
padding
:
0
10px
;
background
:
#fafafd
;
border-bottom
:
1px
solid
#ebeaf0
}
.browser-chrome
>
div
{
display
:
flex
;
gap
:
5px
}
.browser-chrome
i
{
width
:
7px
;
height
:
7px
;
border-radius
:
50%
;
background
:
#e1e1e7
}
.browser-chrome
i
:first-child
{
background
:
#ff8b86
}
.browser-chrome
i
:nth-child
(
2
)
{
background
:
#ffd36b
}
.browser-chrome
i
:nth-child
(
3
)
{
background
:
#71d19a
}
.browser-chrome
span
{
justify-self
:
center
;
width
:
min
(
390px
,
80%
);
padding
:
4px
10px
;
text-align
:
center
;
color
:
#9a9ca6
;
background
:
#f0f0f4
;
border-radius
:
5px
;
font-size
:
8px
}
.browser-chrome
>
svg
{
justify-self
:
end
;
color
:
#a7a9b3
}
.browser-frame
iframe
{
display
:
block
;
width
:
100%
;
height
:
calc
(
100%
-
31px
);
border
:
0
;
background
:
#fff
}
.production-empty
{
height
:
calc
(
100%
-
31px
);
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
padding
:
30px
;
text-align
:
center
;
background
:
linear-gradient
(
180deg
,
#fbfffd
,
#f7faf9
)}
.production-empty
>
span
{
display
:
grid
;
place-items
:
center
;
width
:
52px
;
height
:
52px
;
color
:
#168064
;
background
:
#e8f8f2
;
border-radius
:
16px
}
.production-empty
strong
{
margin-top
:
17px
;
font-size
:
15px
}
.production-empty
p
{
max-width
:
360px
;
margin
:
8px
0
20px
;
color
:
var
(
--muted
);
font-size
:
10px
;
line-height
:
1.7
}
.production-empty
button
{
height
:
36px
;
display
:
flex
;
align-items
:
center
;
gap
:
7px
;
padding
:
0
14px
;
color
:
white
;
background
:
linear-gradient
(
135deg
,
#15936e
,
#20b486
);
border
:
0
;
border-radius
:
9px
;
font-size
:
10px
;
font-weight
:
800
}
.preview-busy
{
position
:
absolute
;
inset
:
31px
0
0
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
gap
:
8px
;
color
:
var
(
--primary
);
background
:
rgba
(
248
,
248
,
252
,
.72
);
backdrop-filter
:
blur
(
4px
)}
.preview-busy
strong
{
color
:
var
(
--text
);
font-size
:
13px
}
.preview-busy
span
{
color
:
var
(
--muted
);
font-size
:
10px
}
.preview-footer
{
height
:
29px
;
padding
:
0
22px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
gap
:
18px
;
color
:
var
(
--muted
);
background
:
#fff
;
border-top
:
1px
solid
var
(
--divider
);
font-size
:
8px
}
.preview-footer
span
{
min-width
:
0
;
display
:
flex
;
align-items
:
center
;
gap
:
5px
;
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
}
.preview-footer
span
:last-child
{
flex
:
0
1
auto
}
...
@@ -27,7 +27,8 @@
...
@@ -27,7 +27,8 @@
.rail-bottom
,
.rail-logout
{
display
:
none
}
.rail-bottom
,
.rail-logout
{
display
:
none
}
.rail
button
{
position
:
relative
}
.rail
button
[
data-tooltip
]
::after
{
content
:
attr
(
data-tooltip
);
position
:
absolute
;
z-index
:
50
;
left
:
48px
;
top
:
50%
;
width
:
max-content
;
max-width
:
150px
;
padding
:
6px
9px
;
color
:
white
;
background
:
#282435
;
border-radius
:
7px
;
box-shadow
:
0
7px
18px
rgba
(
25
,
20
,
42
,
.2
);
font-size
:
9px
;
font-weight
:
700
;
line-height
:
1
;
white-space
:
nowrap
;
opacity
:
0
;
pointer-events
:
none
;
transform
:
translate
(
4px
,
-50%
);
transition
:
opacity
.14s
ease
,
transform
.14s
ease
}
.rail
button
[
data-tooltip
]
:hover::after
,
.rail
button
[
data-tooltip
]
:focus-visible::after
{
opacity
:
1
;
transform
:
translate
(
0
,
-50%
)}
.rail
.rail-create-top
{
color
:
var
(
--muted
)
!important
;
background
:
transparent
!important
;
box-shadow
:
none
!important
}
.rail
.rail-create-top
:hover
,
.rail
.rail-create-top.active
{
color
:
var
(
--primary
)
!important
;
background
:
var
(
--soft
)
!important
}
.rail
.rail-create-top.active
{
box-shadow
:
inset
0
0
0
1px
#e5ddff
!important
}
.rail
button
{
position
:
relative
}
.rail
button
[
data-tooltip
]
::after
{
content
:
attr
(
data-tooltip
);
position
:
absolute
;
z-index
:
50
;
left
:
48px
;
top
:
50%
;
width
:
max-content
;
max-width
:
150px
;
padding
:
6px
9px
;
color
:
white
;
background
:
#282435
;
border-radius
:
7px
;
box-shadow
:
0
7px
18px
rgba
(
25
,
20
,
42
,
.2
);
font-size
:
9px
;
font-weight
:
700
;
line-height
:
1
;
white-space
:
nowrap
;
opacity
:
0
;
pointer-events
:
none
;
transform
:
translate
(
4px
,
-50%
);
transition
:
opacity
.14s
ease
,
transform
.14s
ease
}
.rail
button
[
data-tooltip
]
:hover::after
,
.rail
button
[
data-tooltip
]
:focus-visible::after
{
opacity
:
1
;
transform
:
translate
(
0
,
-50%
)}
.rail
.rail-create-top
{
color
:
var
(
--muted
)
!important
;
background
:
transparent
!important
;
box-shadow
:
none
!important
}
.rail
.rail-create-top
:hover
,
.rail
.rail-create-top.active
{
color
:
var
(
--primary
)
!important
;
background
:
var
(
--soft
)
!important
}
.rail
.rail-create-top.active
{
box-shadow
:
inset
0
0
0
1px
#e5ddff
!important
}
@media
(
max-width
:
1100px
){
.create-layout
{
grid-template-columns
:
1
fr
;
gap
:
48px
;
padding-top
:
40px
}
.create-intro
{
text-align
:
center
}
.create-intro
>
p
,
.create-intro
h1
{
margin-left
:
auto
;
margin-right
:
auto
}
.intro-tag
{
margin
:
auto
}
.feature-row
{
max-width
:
620px
;
margin-left
:
auto
;
margin-right
:
auto
}
.create-card-wrap
{
justify-content
:
center
}
.workspace
{
grid-template-columns
:
58px
340px
1
fr
}
.create-workspace
{
grid-template-columns
:
58px
280px
1
fr
}
.workspace-create-content
{
padding
:
28px
}}
@media
(
max-width
:
1100px
){
.create-layout
{
grid-template-columns
:
1
fr
;
gap
:
48px
;
padding-top
:
40px
}
.create-intro
{
text-align
:
center
}
.create-intro
>
p
,
.create-intro
h1
{
margin-left
:
auto
;
margin-right
:
auto
}
.intro-tag
{
margin
:
auto
}
.feature-row
{
max-width
:
620px
;
margin-left
:
auto
;
margin-right
:
auto
}
.create-card-wrap
{
justify-content
:
center
}
.workspace
{
grid-template-columns
:
58px
340px
1
fr
}
.create-workspace
{
grid-template-columns
:
58px
280px
1
fr
}
.workspace-create-content
{
padding
:
28px
}}
@media
(
max-width
:
1250px
)
and
(
min-width
:
801px
){
.preview-toolbar
{
height
:
96px
;
grid-template-columns
:
minmax
(
160px
,
1
fr
)
auto
;
grid-template-rows
:
42px
42px
;
grid-template-areas
:
"title actions"
"modes modes"
;
gap
:
0
10px
;
padding
:
6px
12px
}
.preview-modes
{
justify-content
:
center
}
.toolbar-actions
.environment-link
{
width
:
31px
;
padding
:
0
}
.toolbar-actions
.environment-link
>
span
{
display
:
none
}}
@container
(
max-width
:
980px
){
.preview-toolbar
{
min-height
:
96px
;
grid-template-columns
:
minmax
(
160px
,
1
fr
)
max-content
;
grid-template-rows
:
42px
42px
;
grid-template-areas
:
"title actions"
"modes modes"
;
gap
:
0
10px
;
padding
:
6px
12px
}
.preview-modes
{
justify-content
:
center
}
.toolbar-actions
.environment-link
{
width
:
31px
;
padding
:
0
}
.toolbar-actions
.environment-link
>
span
{
display
:
none
}}
@container
(
max-width
:
620px
){
.preview-toolbar
{
min-height
:
0
;
grid-template-columns
:
minmax
(
0
,
1
fr
);
grid-template-rows
:
auto
;
grid-template-areas
:
"title"
"modes"
"actions"
;
gap
:
8px
;
padding
:
9px
10px
}
.preview-title
{
justify-content
:
space-between
}
.preview-modes
,
.toolbar-actions
{
justify-content
:
center
}
.toolbar-actions
{
flex-wrap
:
wrap
}}
@media
(
max-width
:
800px
){
.landing-header
,
.create-layout
{
width
:
min
(
100%
-
30px
,
700px
)}
.landing-status
{
display
:
none
}
.feature-row
{
grid-template-columns
:
1
fr
}
.create-card
{
padding
:
26px
20px
}
.form-grid
{
grid-template-columns
:
1
fr
}
.field.wide
{
grid-column
:
auto
}
.workspace
{
grid-template-columns
:
52px
1
fr
}
.control-panel
{
border-right
:
0
}
.preview-shell
{
display
:
none
}
.create-intro
h1
{
font-size
:
48px
}
.create-layout
{
padding-bottom
:
35px
}
.create-workspace
{
grid-template-columns
:
52px
1
fr
}
.create-workspace
.create-control-panel
{
display
:
none
}
.workspace-create-content
{
padding
:
18px
}
.login-card
{
padding
:
30px
24px
}}
@media
(
max-width
:
800px
){
.landing-header
,
.create-layout
{
width
:
min
(
100%
-
30px
,
700px
)}
.landing-status
{
display
:
none
}
.feature-row
{
grid-template-columns
:
1
fr
}
.create-card
{
padding
:
26px
20px
}
.form-grid
{
grid-template-columns
:
1
fr
}
.field.wide
{
grid-column
:
auto
}
.workspace
{
grid-template-columns
:
52px
1
fr
}
.control-panel
{
border-right
:
0
}
.preview-shell
{
display
:
none
}
.create-intro
h1
{
font-size
:
48px
}
.create-layout
{
padding-bottom
:
35px
}
.create-workspace
{
grid-template-columns
:
52px
1
fr
}
.create-workspace
.create-control-panel
{
display
:
none
}
.workspace-create-content
{
padding
:
18px
}
.login-card
{
padding
:
30px
24px
}}
.panel-tabs
{
grid-template-columns
:
repeat
(
3
,
1
fr
)}
.panel-tabs
{
grid-template-columns
:
repeat
(
3
,
1
fr
)}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
