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
bd42cab9
Commit
bd42cab9
authored
Jul 15, 2026
by
xuchentao
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style: expand website preview area
parent
0c1766d3
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
1 addition
and
1 deletion
+1
-1
styles.css
frontend/src/styles.css
+1
-1
No files found.
frontend/src/styles.css
View file @
bd42cab9
...
...
@@ -22,7 +22,7 @@
.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
}
.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
}
.browser-stage
{
position
:
relative
;
flex
:
1
;
min-height
:
0
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
padding
:
25px
;
background
:
#eff0f5
;
overflow
:
auto
}
.browser-frame
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
overflow
:
hidden
;
background
:
#fff
;
border
:
1px
solid
#dfe0e7
;
border-radius
:
11px
;
box-shadow
:
0
15px
45px
rgba
(
30
,
24
,
53
,
.1
);
transition
:
.35s
ease
}
.browser-frame.mobile
{
width
:
390px
;
max-height
:
760px
}
.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
}
.history-row-state
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
}
.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
}
...
...
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
