chore: exclude local resource artifacts from main sync
This commit is contained in:
426
src/app/main/MainLayout.css
Executable file → Normal file
426
src/app/main/MainLayout.css
Executable file → Normal file
@@ -21,20 +21,59 @@
|
||||
linear-gradient(180deg, #f8fbff 0%, #eff5ff 45%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.app-shell--preview-runtime {
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
|
||||
}
|
||||
|
||||
.app-header {
|
||||
--app-header-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.86) 100%);
|
||||
--app-header-border: rgba(148, 163, 184, 0.16);
|
||||
--app-header-shadow: rgba(148, 163, 184, 0.08);
|
||||
--app-header-base-height: 60px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
padding: 0 18px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
|
||||
min-height: calc(var(--app-header-base-height) + env(safe-area-inset-top, 0px));
|
||||
padding: env(safe-area-inset-top, 0px) 18px 0;
|
||||
background: var(--app-header-bg);
|
||||
border-bottom: 1px solid var(--app-header-border);
|
||||
box-shadow: inset 0 -1px 0 var(--app-header-shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.app-header.app-header--test {
|
||||
--app-header-bg: linear-gradient(135deg, rgba(236, 253, 245, 0.94) 0%, rgba(220, 252, 231, 0.9) 100%);
|
||||
--app-header-border: rgba(74, 222, 128, 0.28);
|
||||
--app-header-shadow: rgba(34, 197, 94, 0.14);
|
||||
}
|
||||
|
||||
.app-header.app-header--rel {
|
||||
--app-header-bg: linear-gradient(135deg, rgba(255, 247, 237, 0.95) 0%, rgba(254, 215, 170, 0.78) 100%);
|
||||
--app-header-border: rgba(251, 146, 60, 0.28);
|
||||
--app-header-shadow: rgba(249, 115, 22, 0.12);
|
||||
}
|
||||
|
||||
.app-header.app-header--preview {
|
||||
--app-header-bg: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(219, 234, 254, 0.9) 100%);
|
||||
--app-header-border: rgba(96, 165, 250, 0.28);
|
||||
--app-header-shadow: rgba(59, 130, 246, 0.12);
|
||||
}
|
||||
|
||||
.app-header.app-header--prod {
|
||||
--app-header-bg: linear-gradient(135deg, rgba(250, 245, 255, 0.95) 0%, rgba(243, 232, 255, 0.88) 100%);
|
||||
--app-header-border: rgba(168, 85, 247, 0.24);
|
||||
--app-header-shadow: rgba(147, 51, 234, 0.12);
|
||||
}
|
||||
|
||||
.app-header.app-header--local {
|
||||
--app-header-bg: linear-gradient(135deg, rgba(241, 245, 249, 0.96) 0%, rgba(226, 232, 240, 0.92) 100%);
|
||||
--app-header-border: rgba(100, 116, 139, 0.24);
|
||||
--app-header-shadow: rgba(71, 85, 105, 0.12);
|
||||
}
|
||||
|
||||
.app-header__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -638,6 +677,13 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-main-panel--widget-preview {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main-layout:has(.app-main-panel--play-saved) {
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
@@ -756,11 +802,20 @@
|
||||
}
|
||||
|
||||
.app-main-panel:has(.resource-management-page) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main-panel:has(.resource-management-page) > .resource-management-page {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-main-layout:has(.resource-management-page) {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
@@ -871,25 +926,33 @@
|
||||
}
|
||||
|
||||
.app-shell:has(.resource-management-page),
|
||||
.app-shell:has(.resource-management-page) > .ant-layout,
|
||||
.app-main-content.ant-layout-content:has(.resource-management-page),
|
||||
.app-main-panel:has(.resource-management-page),
|
||||
.app-main-layout:has(.resource-management-page) {
|
||||
.app-shell:has(.resource-management-page) > .ant-layout {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.app-shell:has(.resource-management-page),
|
||||
.app-shell:has(.resource-management-page) > .ant-layout,
|
||||
.app-shell:has(.resource-management-page) > .ant-layout {
|
||||
height: var(--app-viewport-height);
|
||||
min-height: var(--app-viewport-height);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main-content.ant-layout-content:has(.resource-management-page),
|
||||
.app-main-panel:has(.resource-management-page),
|
||||
.app-main-layout:has(.resource-management-page) {
|
||||
height: calc(var(--app-viewport-height) - 52px);
|
||||
min-height: calc(var(--app-viewport-height) - 52px);
|
||||
max-height: calc(var(--app-viewport-height) - 52px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main-layout:has(.resource-management-page) {
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-shell:has(.chat-type-management-page) > .ant-layout,
|
||||
.app-main-content.ant-layout-content:has(.chat-type-management-page),
|
||||
.app-main-panel:has(.chat-type-management-page),
|
||||
@@ -1053,6 +1116,29 @@
|
||||
padding: 12px 20px 20px;
|
||||
}
|
||||
|
||||
.app-main-card--widget-preview.ant-card {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.app-main-card--widget-preview.ant-card .ant-card-head {
|
||||
min-height: 34px;
|
||||
padding: 4px 10px 0;
|
||||
}
|
||||
|
||||
.app-main-card--widget-preview.ant-card .ant-card-head-title {
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app-main-card--widget-preview.ant-card .ant-card-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-main-copy.ant-typography {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -1064,6 +1150,13 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-main-preview-layer {
|
||||
position: static;
|
||||
inset: 0;
|
||||
z-index: 30;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.app-main-window-layer__stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -1077,6 +1170,10 @@
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.app-main-window-layer__window--widget-preview {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.app-main-window-layer__body {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
@@ -1143,6 +1240,309 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preview-app-window {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.preview-app-window__viewport {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-app-window__viewport--desktop {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.preview-app-window__viewport--mobile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.preview-app-window__frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
display: block;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
body.preview-app-overlay-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-app-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(244, 247, 251, 0.98) 0%, rgba(231, 238, 248, 0.96) 100%);
|
||||
z-index: 2000;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
.preview-app-overlay--minimized {
|
||||
inset: auto;
|
||||
width: 168px;
|
||||
height: 44px;
|
||||
border-radius: 999px;
|
||||
overflow: visible;
|
||||
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.preview-app-overlay--mobile-shell {
|
||||
inset: auto;
|
||||
width: min(430px, calc(100vw - 24px));
|
||||
height: min(860px, calc(100vh - 24px));
|
||||
border-radius: 40px;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.preview-app-overlay__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 0 0 44px;
|
||||
min-height: 44px;
|
||||
padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
|
||||
background:
|
||||
linear-gradient(135deg, rgba(231, 242, 255, 0.98) 0%, rgba(255, 244, 230, 0.98) 52%, rgba(255, 236, 214, 0.98) 100%);
|
||||
color: #172554;
|
||||
border-bottom: 1px solid rgba(96, 165, 250, 0.2);
|
||||
box-shadow:
|
||||
0 10px 28px rgba(37, 99, 235, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.78);
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.preview-app-overlay--mobile-shell .preview-app-overlay__header {
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-bottom: 0;
|
||||
border-radius: 40px 40px 0 0;
|
||||
box-shadow:
|
||||
0 18px 42px rgba(15, 23, 42, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.82);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.preview-app-overlay--mobile-shell .preview-app-overlay__header:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.preview-app-overlay--minimized .preview-app-overlay__header {
|
||||
border: 1px solid rgba(96, 165, 250, 0.26);
|
||||
border-radius: 999px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(222, 239, 255, 0.98) 0%, rgba(255, 248, 238, 0.98) 46%, rgba(255, 233, 211, 0.98) 100%);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(15, 23, 42, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.82);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.preview-app-overlay--minimized .preview-app-overlay__header:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.preview-app-overlay__title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.preview-app-overlay__title--minimized {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.preview-app-overlay__title-badge {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex: 0 0 12px;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
radial-gradient(circle at 32% 32%, #ffffff 0%, #bfdbfe 24%, #60a5fa 58%, #1d4ed8 100%);
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(191, 219, 254, 0.42),
|
||||
0 4px 10px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.preview-app-overlay__title-copy {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.preview-app-overlay__title-copy strong {
|
||||
color: #172554;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.preview-app-overlay__title-copy span {
|
||||
overflow: hidden;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.preview-app-overlay__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.preview-app-overlay__actions .ant-btn {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
color: inherit;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.preview-app-overlay__actions .ant-btn:hover {
|
||||
background: rgba(226, 232, 240, 0.68);
|
||||
}
|
||||
|
||||
.preview-app-overlay__minimized-content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding-left: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.preview-app-overlay__minimized-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
flex: 0 0 10px;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
radial-gradient(circle at 35% 35%, #fef3c7 0%, #f59e0b 45%, #ea580c 100%);
|
||||
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.16);
|
||||
}
|
||||
|
||||
.preview-app-overlay__minimized-label {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.preview-app-overlay__body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.preview-app-overlay--mobile-shell .preview-app-overlay__body {
|
||||
height: calc(100% - 44px);
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 40px 40px;
|
||||
box-shadow:
|
||||
0 28px 64px rgba(15, 23, 42, 0.18),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.52);
|
||||
}
|
||||
|
||||
.preview-app-overlay--mobile-shell .preview-app-window {
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.preview-app-overlay--mobile-shell .preview-app-window__viewport--mobile {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0 0 40px 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.preview-app-window__viewport--desktop {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.preview-app-window__viewport--mobile {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.preview-app-overlay--mobile-shell {
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(244, 247, 251, 0.98) 0%, rgba(231, 238, 248, 0.96) 100%);
|
||||
}
|
||||
|
||||
.preview-app-overlay--mobile-shell .preview-app-overlay__header,
|
||||
.preview-app-overlay--mobile-shell .preview-app-overlay__body,
|
||||
.preview-app-overlay--mobile-shell .preview-app-window__viewport--mobile {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.preview-app-overlay--mobile-shell .preview-app-overlay__header,
|
||||
.preview-app-overlay--mobile-shell .preview-app-overlay__body {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-app-overlay__body--hidden {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-main-stack {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@@ -1172,8 +1572,8 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-header {
|
||||
padding: 6px 10px;
|
||||
height: 52px;
|
||||
--app-header-base-height: 52px;
|
||||
padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px;
|
||||
}
|
||||
|
||||
.app-header__row {
|
||||
@@ -1273,6 +1673,10 @@
|
||||
inset: 8px;
|
||||
}
|
||||
|
||||
.app-main-preview-layer {
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.app-main-window-layer__stage {
|
||||
min-height: calc(var(--app-viewport-height) - 68px);
|
||||
border-radius: 18px;
|
||||
|
||||
Reference in New Issue
Block a user