refactor: update artifact list style
This commit is contained in:
tao.chen
@@ -272,44 +272,370 @@
|
||||
box-shadow: 0 0 0 3px rgb(24 185 121 / 12%);
|
||||
}
|
||||
|
||||
.artifact-tip {
|
||||
margin: 0 11px 8px;
|
||||
padding: 7px 8px;
|
||||
border-radius: 5px;
|
||||
color: #6f8297;
|
||||
background: #f3f7fb;
|
||||
font-size: 10px;
|
||||
line-height: 1.45;
|
||||
/* =========================================================
|
||||
* Artifact List
|
||||
* 稳定版本脚本 / Notebook 资源列表
|
||||
* ========================================================= */
|
||||
|
||||
.artifact-list {
|
||||
min-height: 0;
|
||||
padding: 0 8px 9px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.artifact-card {
|
||||
display: flex;
|
||||
min-height: 58px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
.artifact-list::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.artifact-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.artifact-list::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: #d9e1e9;
|
||||
}
|
||||
|
||||
.artifact-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #c4d0dc;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Artifact Group
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-group {
|
||||
margin-bottom: 6px;
|
||||
padding: 8px 9px;
|
||||
border: 1px solid #e2e9f0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #edf1f5;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
transition:
|
||||
border-color .16s ease,
|
||||
box-shadow .16s ease;
|
||||
}
|
||||
|
||||
.artifact-group:hover {
|
||||
border-color: #e1e8ef;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Group Header
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-group__header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 7px 8px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.artifact-group__header:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.artifact-group__main {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.artifact-group__chevron {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex: 0 0 auto;
|
||||
color: #9aa7b5;
|
||||
transition: transform .18s ease;
|
||||
}
|
||||
|
||||
.artifact-group__chevron.is-open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* File Type Icon
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-group__icon {
|
||||
display: grid;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.artifact-group__icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.artifact-group__icon--notebook {
|
||||
color: #dc5c52;
|
||||
background: #fff0ee;
|
||||
}
|
||||
|
||||
.artifact-group__icon--python {
|
||||
color: #326fc1;
|
||||
background: #eaf3ff;
|
||||
}
|
||||
|
||||
.artifact-group__name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #33465a;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Version Count
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-group__count {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid #e5eaf0;
|
||||
border-radius: 999px;
|
||||
color: #8794a3;
|
||||
background: #f5f7fa;
|
||||
font-size: 9px;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Version List
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-versions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding: 7px 7px 7px 29px;
|
||||
border-top: 1px solid #edf1f5;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Version Item
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-version {
|
||||
display: flex;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 7px;
|
||||
padding: 6px 7px;
|
||||
border: 1px solid #e4e9ee;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
/* hover 效果(border / box-shadow / transform)全部走合成层友好的属性,
|
||||
但禁止 transition:box-shadow 是 paint 操作,在 20+ 张卡片上快速
|
||||
划过鼠标会触发频繁重绘,导致悬浮卡顿;拖动时也会让 drag image 变重、
|
||||
视觉上"粘"在半动画上。直接瞬变,干净利落。 */
|
||||
|
||||
transition:
|
||||
border-color .14s ease,
|
||||
background-color .14s ease;
|
||||
}
|
||||
|
||||
.artifact-card:hover {
|
||||
border-color: #98bee7;
|
||||
box-shadow: 0 3px 10px rgb(40 96 155 / 8%);
|
||||
transform: translateY(-1px);
|
||||
.artifact-version:hover {
|
||||
border-color: #a8c8e9;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.artifact-card:active {
|
||||
.artifact-version:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.artifact-version__main {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Drag Handle
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-version__handle {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
flex: 0 0 auto;
|
||||
color: #c4cdd6;
|
||||
}
|
||||
|
||||
.artifact-version:hover .artifact-version__handle {
|
||||
color: #7e8d9d;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Version
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-version__name {
|
||||
flex: 0 0 auto;
|
||||
color: #526477;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Commit Hash
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-version__commit {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #9aa5b1;
|
||||
font-family:
|
||||
ui-monospace,
|
||||
SFMono-Regular,
|
||||
Menlo,
|
||||
Monaco,
|
||||
Consolas,
|
||||
monospace;
|
||||
font-size: 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Open / Bind Icon
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-version__action {
|
||||
display: grid;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border-radius: 4px;
|
||||
color: #c1cad3;
|
||||
}
|
||||
|
||||
.artifact-version:hover .artifact-version__action {
|
||||
color: #287ac5;
|
||||
background: #eef6ff;
|
||||
}
|
||||
|
||||
.artifact-version__action svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Artifact Tip
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
margin: 3px 10px 9px;
|
||||
padding: 7px 8px;
|
||||
border: 1px solid #edf1f5;
|
||||
border-radius: 6px;
|
||||
color: #8795a4;
|
||||
background: #f8fafc;
|
||||
font-size: 9px;
|
||||
line-height: 1.45;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.artifact-tip svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex: 0 0 auto;
|
||||
color: #9eabb8;
|
||||
}
|
||||
|
||||
.artifact-tip__grip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Empty (artifact-list 内的)
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-list .schedule-empty {
|
||||
margin: 18px 10px;
|
||||
color: #9aa6b3;
|
||||
font-size: 10px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Responsive
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.artifact-group__header {
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.artifact-group__name {
|
||||
max-width: 125px;
|
||||
}
|
||||
|
||||
.artifact-versions {
|
||||
padding-left: 27px;
|
||||
}
|
||||
|
||||
.artifact-version {
|
||||
padding-right: 6px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
* Shared
|
||||
* artifact-card__icon* 也被 NodeInspector 复用(节点 inspector
|
||||
* 头部图标),保留原 .artifact-card__icon 形状/大小。
|
||||
* --------------------------------------------------------- */
|
||||
|
||||
.artifact-card__icon {
|
||||
display: grid;
|
||||
width: 31px;
|
||||
@@ -329,28 +655,6 @@
|
||||
background: #eaf3ff;
|
||||
}
|
||||
|
||||
.artifact-card > span:last-child {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.artifact-card strong {
|
||||
max-width: 190px;
|
||||
overflow: hidden;
|
||||
color: #2f4257;
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.artifact-card small {
|
||||
color: #8e9bab;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.schedule-empty {
|
||||
margin: 18px 10px;
|
||||
color: #95a2b0;
|
||||
|
||||
Reference in New Issue
Block a user