feat: 剧本评分SaaS化精修、画布视觉升级、电商克隆预览响应式修复
【剧本评分页面 SaaS 商业化精修】 - 上传区增加玻璃拟态渐变边框，hover 时高亮为品牌绿 - 已上传文件显示文件名+文件大小，重新上传按钮优化 - 上传按钮文案从"+ 上传剧本"改为"选择剧本"，增加图标 - 评测按钮增加 LoadingOutlined/ThunderboltOutlined 图标动画 - 评测等待态增加分步加载提示（结构识别/冲突评估/商业潜力） - 六维评分柱状图增加 hover/focus 交互：悬停维度高亮，其余维度 dim，底部显示当前维度详细说明 - 评分卡片、报告面板、历史记录项增加渐变背景与阴影层次 - 新增 script-tokens-v5 设计 Token 变量体系 - 响应式断点适配 1180px/900px/680px，移动端左右面板上下堆叠 【画布页面视觉升级】 - 画布背景增加网点纹理 + 径向渐变，增强空间感 - 项目栏/缩放控件增加玻璃拟态毛玻璃效果 - 节点卡片增加渐变背景、内阴影、边框高亮 - 选中节点增加品牌绿外圈光环 + 投影 - 连线 connector 增加 hover 品牌绿高亮 - 节点连线/选区框/缩放手柄统一品牌绿主题色 - 所有编辑器/菜单面板统一玻璃拟态风格 - 移动端 560px 项目栏改为 4 列网格布局，按钮显示中文标签（编辑/最近/导出/提交） 【电商克隆预览响应式修复】 - 短视口（高度≤760px）下预览面板内 header/空状态/底部输入改为静态流式布局 - 平板（≤860px）下预览面板取消绝对定位，改为 grid 流式布局 - 手机（≤620px）缩小间距与最小高度 【其他】 - 个人中心登录注册表单移除 form-kicker 标签 - 品牌色（auth-page__brand）调整为强调绿色
This commit is contained in:
@@ -8707,3 +8707,88 @@
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 760px) {
|
||||
.product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview {
|
||||
grid-template-rows: auto minmax(220px, 1fr) auto;
|
||||
align-content: stretch;
|
||||
justify-items: stretch;
|
||||
overflow: auto;
|
||||
padding-top: clamp(28px, 7vh, 72px);
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview-header {
|
||||
position: static;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-empty-state {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
min-height: min(260px, 36vh);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-bottom-input {
|
||||
position: static;
|
||||
width: min(100%, 780px);
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
grid-template-rows: auto minmax(220px, 1fr) auto;
|
||||
align-content: stretch;
|
||||
justify-items: stretch;
|
||||
overflow: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview-header {
|
||||
position: static;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-empty-state {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
|
||||
position: static;
|
||||
width: min(100%, 780px);
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
grid-template-rows: auto minmax(210px, 1fr) auto;
|
||||
gap: 16px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-empty-state {
|
||||
min-height: min(220px, 34vh);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile preview rhythm: once the preview header is in normal flow, remove the desktop top reserve. */
|
||||
@media (max-width: 860px) {
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
min-height: 520px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
min-height: 440px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2649,3 +2649,775 @@
|
||||
min-height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Commercial SaaS polish for script review page ===== */
|
||||
.script-eval-v5 {
|
||||
--v5-radius-xs: 6px;
|
||||
--v5-radius-sm: 8px;
|
||||
--v5-radius-md: 12px;
|
||||
--v5-radius-lg: 16px;
|
||||
--v5-panel: #131616;
|
||||
--v5-panel-2: #181c1b;
|
||||
--v5-panel-3: #101312;
|
||||
--v5-line: rgb(255 255 255 / 7%);
|
||||
--v5-line-strong: rgb(0 255 136 / 22%);
|
||||
--v5-shadow-soft: 0 18px 48px rgb(0 0 0 / 24%);
|
||||
--v5-shadow-tight: 0 10px 24px rgb(0 0 0 / 18%);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 2.2%), transparent 220px),
|
||||
var(--v5-bg);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.script-eval-v5-page {
|
||||
background: linear-gradient(90deg, rgb(0 255 136 / 3%), transparent 28%);
|
||||
}
|
||||
|
||||
.script-eval-v5-left {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 3.5%), transparent 180px),
|
||||
var(--v5-panel);
|
||||
border-right-color: var(--v5-line);
|
||||
box-shadow: inset -1px 0 0 rgb(0 255 136 / 4%), 18px 0 38px rgb(0 0 0 / 18%);
|
||||
}
|
||||
|
||||
.script-eval-v5-lp-section {
|
||||
border-bottom-color: var(--v5-line);
|
||||
}
|
||||
|
||||
.script-eval-v5-lp-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #7f8d88;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.script-eval-v5-lp-label::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: rgb(0 255 136 / 42%);
|
||||
box-shadow: 0 0 14px rgb(0 255 136 / 24%);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-zone {
|
||||
position: relative;
|
||||
min-height: 214px;
|
||||
border: 1px dashed rgb(255 255 255 / 14%);
|
||||
border-radius: var(--v5-radius-lg);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 4%), transparent),
|
||||
rgb(255 255 255 / 2.5%);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-zone:hover,
|
||||
.script-eval-v5-upload-zone:focus-visible {
|
||||
border-color: var(--v5-line-strong);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(0 255 136 / 8%), transparent),
|
||||
rgb(0 255 136 / 4%);
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 16px 36px rgb(0 0 0 / 16%);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin: 0 auto 14px;
|
||||
border: 1px solid rgb(255 255 255 / 7%);
|
||||
border-radius: 18px;
|
||||
background: rgb(0 255 136 / 8%);
|
||||
color: color-mix(in srgb, var(--v5-green) 74%, #ffffff);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-text {
|
||||
margin-bottom: 14px;
|
||||
color: #d7dedb;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-btn,
|
||||
.script-eval-v5-eval-btn,
|
||||
.script-eval-v5-export-btn,
|
||||
.script-eval-v5-action-btn,
|
||||
.script-eval-v5-retry-btn {
|
||||
font-family: inherit;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-btn,
|
||||
.script-eval-v5-eval-btn,
|
||||
.script-eval-v5-export-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-btn,
|
||||
.script-eval-v5-eval-btn {
|
||||
background: linear-gradient(180deg, #34ffa9 0%, var(--v5-green) 52%, #07cf73 100%);
|
||||
box-shadow: 0 12px 28px rgb(0 255 136 / 14%), inset 0 1px 0 rgb(255 255 255 / 36%);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-btn:hover,
|
||||
.script-eval-v5-eval-btn:hover:not(:disabled) {
|
||||
background: linear-gradient(180deg, #55ffb8 0%, #10f58c 56%, var(--v5-green-dim) 100%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-hint {
|
||||
max-width: 300px;
|
||||
margin-inline: auto;
|
||||
color: #74837e;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-done {
|
||||
min-height: 86px;
|
||||
border-color: var(--v5-line-strong);
|
||||
border-radius: var(--v5-radius-md);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(0 255 136 / 12%), rgb(0 255 136 / 5%)),
|
||||
rgb(255 255 255 / 2%);
|
||||
}
|
||||
|
||||
.script-eval-v5-uf-meta {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.script-eval-v5-uf-name {
|
||||
display: block;
|
||||
color: #e9fff5;
|
||||
font-size: 14px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.script-eval-v5-uf-size {
|
||||
color: #7f918a;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.script-eval-v5-uf-re {
|
||||
padding: 5px 8px;
|
||||
border-radius: var(--v5-radius-xs);
|
||||
color: #a2b0ab;
|
||||
transition: color 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.script-eval-v5-uf-re:hover {
|
||||
background: rgb(255 255 255 / 6%);
|
||||
}
|
||||
|
||||
.script-eval-v5-info-grid {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.script-eval-v5-info-item {
|
||||
min-height: 38px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgb(255 255 255 / 5%);
|
||||
border-radius: var(--v5-radius-sm);
|
||||
background: rgb(255 255 255 / 2.6%);
|
||||
}
|
||||
|
||||
.script-eval-v5-info-key {
|
||||
color: #84928d;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.script-eval-v5-info-val {
|
||||
color: #e5ebe8;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.script-eval-v5-info-tag {
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.script-eval-v5-info-empty,
|
||||
.script-eval-v5-history-empty {
|
||||
min-height: 70px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px dashed rgb(255 255 255 / 9%);
|
||||
border-radius: var(--v5-radius-md);
|
||||
background: rgb(255 255 255 / 2%);
|
||||
color: #75827e;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.script-eval-v5-history-list {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.script-eval-v5-history-item {
|
||||
border: 1px solid rgb(255 255 255 / 5%);
|
||||
border-radius: var(--v5-radius-md);
|
||||
background: rgb(255 255 255 / 2.4%);
|
||||
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.script-eval-v5-history-item:hover {
|
||||
border-color: rgb(255 255 255 / 10%);
|
||||
background: rgb(255 255 255 / 4%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.script-eval-v5-history-item.is-active {
|
||||
border-color: var(--v5-line-strong);
|
||||
background: linear-gradient(90deg, rgb(0 255 136 / 10%), rgb(0 255 136 / 3%));
|
||||
box-shadow: inset 3px 0 0 var(--v5-green);
|
||||
}
|
||||
|
||||
.script-eval-v5-hi-name {
|
||||
color: #dce5e1;
|
||||
font-size: 14px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.script-eval-v5-hi-date {
|
||||
color: #73817c;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.script-eval-v5-hi-score {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.script-eval-v5-hi-grade {
|
||||
color: #7d8985;
|
||||
}
|
||||
|
||||
.script-eval-v5-lp-bottom {
|
||||
border-top-color: var(--v5-line);
|
||||
background: linear-gradient(180deg, rgb(19 22 22 / 72%), #111414);
|
||||
box-shadow: 0 -18px 34px rgb(0 0 0 / 18%);
|
||||
}
|
||||
|
||||
.script-eval-v5-eval-btn {
|
||||
min-height: 58px;
|
||||
border-radius: var(--v5-radius-md);
|
||||
font-size: 17px;
|
||||
font-weight: 850;
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
|
||||
}
|
||||
|
||||
.script-eval-v5-eval-btn:disabled {
|
||||
opacity: 0.44;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.script-eval-v5-export-btn {
|
||||
min-height: 50px;
|
||||
border-color: rgb(255 255 255 / 9%);
|
||||
border-radius: var(--v5-radius-md);
|
||||
background: rgb(255 255 255 / 3.5%);
|
||||
color: #aab8b2;
|
||||
font-size: 14px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.script-eval-v5-export-btn:hover:not(:disabled) {
|
||||
border-color: var(--v5-line-strong);
|
||||
background: rgb(0 255 136 / 7%);
|
||||
color: #dcfff0;
|
||||
}
|
||||
|
||||
.script-eval-v5-right {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 2.4%), transparent 240px),
|
||||
#0d0f0f;
|
||||
}
|
||||
|
||||
.script-eval-v5-right-topbar {
|
||||
min-height: 52px;
|
||||
border-bottom-color: var(--v5-line);
|
||||
background: rgb(13 15 15 / 88%);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.script-eval-v5-right-title {
|
||||
color: #87938f;
|
||||
font-size: 14px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.script-eval-v5-rt-green {
|
||||
color: #b7ffdc;
|
||||
}
|
||||
|
||||
.script-eval-v5-action-btn {
|
||||
min-height: 32px;
|
||||
border-color: rgb(255 255 255 / 9%);
|
||||
border-radius: var(--v5-radius-sm);
|
||||
background: rgb(255 255 255 / 3.8%);
|
||||
color: #a8b5b0;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.script-eval-v5-action-btn:hover {
|
||||
border-color: var(--v5-line-strong);
|
||||
background: rgb(0 255 136 / 7%);
|
||||
color: #dffff0;
|
||||
}
|
||||
|
||||
.script-eval-v5-right-content {
|
||||
padding: 20px 32px 42px;
|
||||
}
|
||||
|
||||
.script-eval-v5-illustration-hit {
|
||||
border: 1px solid rgb(255 255 255 / 7%);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 4.5%), transparent),
|
||||
var(--v5-panel-3);
|
||||
box-shadow: var(--v5-shadow-soft);
|
||||
}
|
||||
|
||||
.script-eval-v5-illustration-hit:hover,
|
||||
.script-eval-v5-illustration-hit:focus-visible {
|
||||
border-color: var(--v5-line-strong);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(0 255 136 / 7%), transparent),
|
||||
var(--v5-panel-3);
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-card-icon {
|
||||
border: 1px solid var(--v5-line-strong);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(0 255 136 / 18%), rgb(0 255 136 / 8%)),
|
||||
#101714;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-card-title {
|
||||
color: #f4fbf8;
|
||||
font-size: 22px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-card-desc {
|
||||
color: #91a19b;
|
||||
}
|
||||
|
||||
.script-eval-v5-loading {
|
||||
min-width: min(520px, 92%);
|
||||
border: 1px solid rgb(255 255 255 / 7%);
|
||||
border-radius: var(--v5-radius-lg);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 4%), transparent),
|
||||
var(--v5-panel-3);
|
||||
box-shadow: var(--v5-shadow-soft);
|
||||
}
|
||||
|
||||
.script-eval-v5-loading strong {
|
||||
color: #f4fbf8;
|
||||
}
|
||||
|
||||
.script-eval-v5-loading p {
|
||||
margin: 0;
|
||||
color: #8f9f99;
|
||||
}
|
||||
|
||||
.script-eval-v5-loading-steps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.script-eval-v5-loading-steps span {
|
||||
border: 1px solid rgb(0 255 136 / 18%);
|
||||
border-radius: 999px;
|
||||
background: rgb(0 255 136 / 7%);
|
||||
color: #b6ffdc;
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
.script-eval-v5-error {
|
||||
border-color: rgb(244 178 46 / 28%);
|
||||
border-radius: var(--v5-radius-md);
|
||||
background: rgb(244 178 46 / 8%);
|
||||
color: #f4c767;
|
||||
box-shadow: var(--v5-shadow-tight);
|
||||
}
|
||||
|
||||
.script-eval-v5-error span:first-child {
|
||||
color: #ffe0a1;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.script-eval-v5-retry-btn {
|
||||
border-color: rgb(244 178 46 / 32%);
|
||||
color: #ffd47a;
|
||||
}
|
||||
|
||||
.script-eval-report {
|
||||
--report-panel: #151918;
|
||||
--report-panel-2: #111514;
|
||||
--report-row: #181e1c;
|
||||
--report-border: rgb(255 255 255 / 8%);
|
||||
--report-muted: #93a29c;
|
||||
--report-dim: #67736f;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 3.2%), transparent 230px),
|
||||
var(--report-bg);
|
||||
}
|
||||
|
||||
.script-eval-report::before,
|
||||
.script-eval-report::after {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.script-eval-report--inside .script-eval-report__body {
|
||||
padding: 18px 32px 46px;
|
||||
}
|
||||
|
||||
.script-eval-report--inside .script-eval-report__hero {
|
||||
align-items: center;
|
||||
padding: 4px 0 22px;
|
||||
}
|
||||
|
||||
.script-eval-report__score-block {
|
||||
min-height: 184px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 18px 22px;
|
||||
border: 1px solid rgb(255 255 255 / 7%);
|
||||
border-radius: var(--v5-radius-lg);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(0 255 136 / 9%), rgb(0 255 136 / 2%)),
|
||||
#101413;
|
||||
box-shadow: var(--v5-shadow-tight);
|
||||
}
|
||||
|
||||
.script-eval-report__score {
|
||||
text-shadow: 0 0 28px rgb(0 255 136 / 14%);
|
||||
}
|
||||
|
||||
.script-eval-report__score-total {
|
||||
color: #7e8b86;
|
||||
}
|
||||
|
||||
.script-eval-report__grade {
|
||||
border-radius: 999px;
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
.script-eval-report__beat {
|
||||
color: #a6b4ae;
|
||||
}
|
||||
|
||||
.script-eval-report__summary {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.script-eval-report__summary h1 {
|
||||
color: #f6fbf9;
|
||||
font-size: clamp(25px, 2vw, 32px);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.script-eval-report__summary p {
|
||||
color: #7d8b86;
|
||||
}
|
||||
|
||||
.script-eval-report__desc {
|
||||
max-width: 980px;
|
||||
color: #cbd5d1 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.script-eval-report__chart-card,
|
||||
.script-eval-report__path-card {
|
||||
border-color: var(--report-border);
|
||||
border-radius: var(--v5-radius-lg);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 3.8%), transparent),
|
||||
var(--report-panel);
|
||||
box-shadow: var(--v5-shadow-tight);
|
||||
}
|
||||
|
||||
.script-eval-report__card-head {
|
||||
min-height: 50px;
|
||||
padding-inline: 18px;
|
||||
border-bottom: 1px solid rgb(255 255 255 / 5%);
|
||||
color: #b5c0bc;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.script-eval-report__legend {
|
||||
color: #7e8a86;
|
||||
}
|
||||
|
||||
.script-eval-report__chart {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.script-eval-report__chart-grid {
|
||||
gap: clamp(18px, 3vw, 52px);
|
||||
}
|
||||
|
||||
.script-eval-report__bar-col {
|
||||
cursor: pointer;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.script-eval-report__bar-col:hover,
|
||||
.script-eval-report__bar-col:focus-visible {
|
||||
outline: none;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.script-eval-report__bar-col.is-dimmed {
|
||||
opacity: 0.36;
|
||||
}
|
||||
|
||||
.script-eval-report__bar-fill {
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 10px 22px rgb(0 255 136 / 12%);
|
||||
}
|
||||
|
||||
.script-eval-report__bar-col:hover .script-eval-report__bar-fill,
|
||||
.script-eval-report__bar-col:focus-visible .script-eval-report__bar-fill {
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
||||
.script-eval-report__bar-col strong {
|
||||
color: #eef5f2;
|
||||
}
|
||||
|
||||
.script-eval-report__bar-col > span {
|
||||
color: #74807c;
|
||||
}
|
||||
|
||||
.script-eval-report__chart-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
min-height: 44px;
|
||||
margin: 0 18px 18px;
|
||||
border: 1px solid rgb(0 255 136 / 14%);
|
||||
border-radius: var(--v5-radius-md);
|
||||
background: rgb(0 255 136 / 5%);
|
||||
color: #a9bbb4;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.script-eval-report__chart-note .anticon {
|
||||
flex-shrink: 0;
|
||||
color: var(--report-green);
|
||||
}
|
||||
|
||||
.script-eval-report__findings {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.script-eval-report__finding-group p {
|
||||
border: 1px solid rgb(255 255 255 / 5%);
|
||||
border-radius: var(--v5-radius-md);
|
||||
background: linear-gradient(180deg, rgb(255 255 255 / 3%), transparent), var(--report-row);
|
||||
color: #d7e0dc;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.script-eval-report__path-table th {
|
||||
color: #87938f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.script-eval-report__path-table td {
|
||||
color: #d8e1dd;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.script-eval-report__path-table tr:hover td {
|
||||
background: rgb(255 255 255 / 2.8%);
|
||||
}
|
||||
|
||||
.script-eval-v5-statusbar {
|
||||
height: 34px;
|
||||
border-top-color: var(--v5-line);
|
||||
background: rgb(18 21 21 / 94%);
|
||||
color: #7c8984;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.script-eval-v5.is-loading .script-eval-v5-status-dot {
|
||||
animation: v5-pulse 1.2s ease infinite;
|
||||
}
|
||||
|
||||
.script-eval-v5.is-complete .script-eval-v5-status-dot,
|
||||
.script-eval-v5.is-ready .script-eval-v5-status-dot {
|
||||
box-shadow: 0 0 16px rgb(0 255 136 / 34%);
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.script-eval-report--inside .script-eval-report__body {
|
||||
padding-inline: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.script-eval-v5-page {
|
||||
padding-left: 0;
|
||||
padding-top: 74px;
|
||||
scroll-padding-top: 74px;
|
||||
}
|
||||
|
||||
.script-eval-v5-left {
|
||||
flex-basis: 320px;
|
||||
}
|
||||
|
||||
.script-eval-v5-right-content {
|
||||
padding: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.script-eval-v5 {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.script-eval-v5-page {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.script-eval-v5-left {
|
||||
flex: 0 0 auto;
|
||||
overflow: visible;
|
||||
max-height: none;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--v5-line);
|
||||
}
|
||||
|
||||
.script-eval-v5-lp-section.is-fill {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.script-eval-v5-history-list {
|
||||
flex: 0 0 auto;
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.script-eval-v5-lp-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-zone {
|
||||
min-height: 148px;
|
||||
padding: 18px 14px;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-text {
|
||||
margin-bottom: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-btn {
|
||||
padding: 9px 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.script-eval-v5-upload-hint {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.script-eval-v5-info-item {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.script-eval-v5-info-empty,
|
||||
.script-eval-v5-history-empty {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.script-eval-v5-lp-bottom {
|
||||
gap: 8px;
|
||||
padding: 12px 16px 14px;
|
||||
}
|
||||
|
||||
.script-eval-v5-eval-btn {
|
||||
min-height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.script-eval-v5-export-btn {
|
||||
min-height: 42px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.script-eval-v5-right-topbar {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
.script-eval-v5-right {
|
||||
flex: 0 0 auto;
|
||||
min-height: 560px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.script-eval-report--inside .script-eval-report__body {
|
||||
padding: 16px 16px 36px;
|
||||
}
|
||||
|
||||
.script-eval-report__score-block {
|
||||
min-height: 150px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.script-eval-report--inside .script-eval-report__score {
|
||||
font-size: clamp(62px, 22vw, 82px);
|
||||
}
|
||||
|
||||
.script-eval-report__score-total {
|
||||
padding-top: 24px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.script-eval-report__summary h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.script-eval-report__chart-note {
|
||||
margin-inline: 14px;
|
||||
}
|
||||
|
||||
.script-eval-report__finding-group p,
|
||||
.script-eval-report__path-table td {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user