init
|
After Width: | Height: | Size: 264 B |
|
After Width: | Height: | Size: 990 B |
|
After Width: | Height: | Size: 195 B |
|
After Width: | Height: | Size: 992 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,98 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=1920, initial-scale=1">
|
||||
<base href="../../">
|
||||
<title>data-table component catalog</title>
|
||||
<link rel="stylesheet" href="src-web/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Root pages load individual templates through index.html#fragment references. -->
|
||||
<template id="composition">
|
||||
<div class="panel">
|
||||
<div class="panel-heading"><div class="panel-title">DataTable / StatTable composition</div><div class="panel-note">Dense rows, semantic text, real raster icon slots</div></div>
|
||||
<div class="panel-body">
|
||||
<div class="table-toolbar dnf-ui"><span>Selection</span><button type="button" class="table-mode-button is-active" data-selection-theme="gold">Gold</button><button type="button" class="table-mode-button" data-selection-theme="blue">Blue</button></div>
|
||||
<div class="data-table data-table-core selection-gold dnf-ui" data-data-table data-sortable-table>
|
||||
<div class="table-row header"><div>图标</div><button type="button" class="sortable-header">名称<span class="sort-glyph">△</span></button><button type="button" class="sortable-header is-sorted" aria-sort="ascending">强化<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">状态<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">区域<span class="sort-glyph">△</span></button></div>
|
||||
<div class="table-row data-row is-selected" tabindex="0" data-selectable-row><div class="table-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/0.PNG"></div><div class="rare-text">魔剑共鸣核心</div><div>+12</div><div class="success">出售完成</div><div>湖北 4</div></div>
|
||||
<div class="table-row data-row" tabindex="0" data-selectable-row><div class="table-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/1.PNG"></div><div class="epic-text">史诗灵魂结晶</div><div>+10</div><div class="status">购买完成</div><div>跨区</div></div>
|
||||
<div class="table-row table-note-row"><div><strong>养猪</strong><span>备注:团队共享养成角色</span><span class="table-note-actions"><img src="src-web/data-table/img/sprite_interface2_option.NPK/option.img/88.PNG" alt="编辑"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/42.PNG" alt="删除"></span></div></div>
|
||||
<div class="table-row data-row" tabindex="0" data-selectable-row><div class="table-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/2.PNG"></div><div class="rare-text">稀有装备增幅券</div><div>+0</div><div class="danger">购买失败</div><div>西北 1</div></div>
|
||||
<div class="table-row data-row" tabindex="0" data-selectable-row><div class="table-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/3.PNG"></div><div class="epic-text">太初之光碎片</div><div>+13</div><div class="success">已完成</div><div>华东</div></div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px"><div class="spec-row"><span class="spec-chip">Density = Compact · Default</span><span class="spec-chip">ContentState = Populated · Empty</span></div><div class="pager dnf-ui"><span class="pager-btn">◀</span><span>1 / 2</span><span class="pager-btn active">▶</span></div></div>
|
||||
<div class="divider"></div>
|
||||
<div class="sample-label">LinearProgress · milestones</div>
|
||||
<div class="progress" style="--value:68%"><div class="progress-fill"></div><i class="progress-marker" style="--left:25%"></i><i class="progress-marker" style="--left:68%"></i><i class="progress-marker" style="--left:90%"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="skill">
|
||||
<div class="panel skill-table-panel">
|
||||
<div class="panel-heading"><div class="panel-title">DataTable / SkillDamageDetail</div><div class="panel-note">No zebra striping · fixed summary · bottom utility row</div></div>
|
||||
<div class="panel-body">
|
||||
<div class="data-table skill-damage-table dnf-ui">
|
||||
<div class="skill-table-row header"><div>技能</div><div>使用次数</div><div>总伤害</div><div>平均伤害</div><div>伤害占比</div><div></div></div>
|
||||
<div class="skill-table-body">
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>1.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/0.PNG" alt="技能 1"></div><div>34</div><div>953,379,872,000</div><div>28,040,584,470</div><div>25.9%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>2.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/1.PNG" alt="技能 2"></div><div>1</div><div>615,930,416,128</div><div>615,930,416,128</div><div>16.7%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>3.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/2.PNG" alt="技能 3"></div><div>1</div><div>367,626,199,040</div><div>367,626,199,040</div><div>10.0%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>4.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/3.PNG" alt="技能 4"></div><div>1</div><div>335,615,315,968</div><div>335,615,315,968</div><div>9.1%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>5.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/4.PNG" alt="技能 5"></div><div>1</div><div>238,860,883,968</div><div>238,860,883,968</div><div>6.5%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>6.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/5.PNG" alt="技能 6"></div><div>10</div><div>164,943,300,413</div><div>16,494,330,041</div><div>4.5%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>7.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/6.PNG" alt="技能 7"></div><div>4</div><div>163,055,895,552</div><div>40,763,973,888</div><div>4.4%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>8.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/7.PNG" alt="技能 8"></div><div>2</div><div>155,930,977,504</div><div>77,965,488,752</div><div>4.2%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-row"><div class="skill-name-cell"><b>9.</b><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/8.PNG" alt="技能 9"></div><div>2</div><div>148,375,164,928</div><div>74,187,582,464</div><div>4.0%</div><button type="button" class="table-action-button" aria-label="查看技能详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
</div>
|
||||
<div class="skill-table-row skill-summary"><div>总和</div><div>—</div><div>3,678,555,852,653</div><div>—</div><div></div><button type="button" class="table-action-button" aria-label="查看总伤害详情"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon_2x.img/24.PNG" alt=""></button></div>
|
||||
<div class="skill-table-footer"><button type="button">使用设置</button></div>
|
||||
<div class="skill-table-scrollbar" aria-hidden="true"><div class="skill-scroll-arrow"></div><div class="skill-scroll-track"><div class="skill-scroll-thumb"></div></div><div class="skill-scroll-arrow"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="compact">
|
||||
<div class="panel compact-table-panel">
|
||||
<div class="panel-heading"><div class="panel-title">DataTable / CompactGradientRow</div><div class="panel-note">30px unified header · 20px row · square corners</div></div>
|
||||
<div class="panel-body">
|
||||
<div class="data-table compact-data-table dnf-ui" data-sortable-table>
|
||||
<div class="compact-table-row header"><button type="button" class="sortable-header">日期<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">大区名称<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">角色名<span class="sort-glyph">△</span></button></div>
|
||||
<div class="compact-table-body">
|
||||
<div class="compact-table-row"><div>07/31</div><div>跨五</div><div>绝唱</div></div>
|
||||
<div class="compact-table-row"><div>07/30</div><div>湖北 4</div><div>西瓜°</div></div>
|
||||
<div class="compact-table-row"><div>07/29</div><div>跨一</div><div>Mikiyla</div></div>
|
||||
<div class="compact-table-row"><div>07/28</div><div>华东</div><div>浅笑ツ</div></div>
|
||||
<div class="compact-table-row"><div>07/27</div><div>跨六</div><div>武神四月</div></div>
|
||||
<div class="compact-table-row"><div>07/26</div><div>湖北 4</div><div>蛋猪超人</div></div>
|
||||
</div>
|
||||
<div class="compact-table-scrollbar" aria-hidden="true"><div class="skill-scroll-arrow"></div><div class="skill-scroll-track"><div class="skill-scroll-thumb"></div></div><div class="skill-scroll-arrow"></div></div>
|
||||
</div>
|
||||
<div class="spec-row table-variant-spec"><span class="spec-chip">Density = Compact</span><span class="spec-chip">Radius = 0</span><span class="spec-chip">Gap = 5</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template id="item">
|
||||
<div class="panel item-table-panel">
|
||||
<div class="panel-heading"><div class="panel-title">DataTable / ItemRow</div><div class="panel-note">CSS 43 rest · 44 hover · 46 selected</div></div>
|
||||
<div class="panel-body">
|
||||
<div class="data-table item-data-table dnf-ui" data-sortable-table>
|
||||
<div class="item-table-row header"><button type="button" class="sortable-header">强化<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">锻造<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">名称<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">拍卖信息<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">状态<span class="sort-glyph">△</span></button><button type="button" class="sortable-header">大区 / 角色名<span class="sort-glyph">△</span></button></div>
|
||||
<div class="item-table-body">
|
||||
<div class="item-table-row" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/7.PNG"></div><div>+0</div><div>+0</div><div class="q-artifact">人造神 3 号纳波尔宝珠</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>绝唱</div></div>
|
||||
<div class="item-table-row" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/8.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">果味整夏收集箱宝珠自选</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="success">出售完成</div><div>湖北 4<br>绝唱</div></div>
|
||||
<div class="item-table-row is-selected" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/9.PNG"></div><div>+2</div><div>+0</div><div class="q-rare">魔法封印转换灵魂</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
||||
<div class="item-table-row" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/3.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">史诗灵魂结晶</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
||||
<div class="item-table-row" tabindex="0" data-selectable-row><i class="item-row-frame" aria-hidden="true"></i><div class="item-row-icon"><img src="src-web/data-table/img/sprite_item.NPK/equipmentskill.img/4.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">史诗灵魂结晶</div><div><button type="button" class="inspect-button"><img src="src-web/data-table/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec-row table-variant-spec"><span class="spec-chip captured">Rest / Hover / Selected = CSS</span><span class="spec-chip">Height = 38</span><span class="spec-chip">Header = Sortable</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
/* Source module: data-table.css */
|
||||
.data-table { border:1px solid #4a3c26;border-radius:0;background:#030403;overflow:hidden; }
|
||||
.table-toolbar { height:26px;margin-bottom:6px;display:flex;align-items:center;justify-content:flex-end;gap:5px;color:var(--text-3);font-size:10px; }
|
||||
.table-mode-button { appearance:none;height:20px;padding:0 8px;border:1px solid #3c3b31;border-radius:0;background:#0c0d0c;color:#918967;font:10px/1 "DCalc",SimSun,sans-serif; }
|
||||
.table-mode-button.is-active { border-color:#806329;color:#e2c968;background:#1a160d; }
|
||||
|
||||
.sortable-header { appearance:none;min-width:0;height:100%;padding:0 9px;display:flex;align-items:center;justify-content:space-between;gap:7px;border-radius:0;color:#bc9e58;font:11px/1 "DCalc",SimSun,sans-serif;text-align:left;cursor:pointer; }
|
||||
.sortable-header:hover { --table-header-top:color-mix(in srgb,#352817 84%,#fff);--table-header-mid:color-mix(in srgb,#1b170d 88%,#fff); }
|
||||
.sortable-header:active,
|
||||
.sortable-header.is-pressed { --table-header-top:#211a10;--table-header-mid:#15130c;transform:translateY(1px); }
|
||||
.sortable-header.is-sorted { color:#bc9e58; }
|
||||
.sort-glyph { flex:0 0 auto;width:10px;color:currentColor;font-size:0;line-height:1;text-align:center; }
|
||||
.sort-glyph::before { content:"▼";font:10px/1 SimSun,"DCalc",serif; }
|
||||
|
||||
.sortable-header,
|
||||
.table-row.header > div,
|
||||
.skill-table-row.header > *,
|
||||
.compact-table-row.header > *,
|
||||
.item-table-row.header > * {
|
||||
--table-header-top:#352817;
|
||||
--table-header-mid:#1b170d;
|
||||
--table-header-bottom:#090a07;
|
||||
border:1px solid #070806;
|
||||
background:linear-gradient(180deg,var(--table-header-top) 0%,var(--table-header-mid) 48%,var(--table-header-bottom) 100%);
|
||||
box-shadow:inset 0 0 0 1px #4a3c26,inset 0 1px 0 #65502a;
|
||||
color:#bc9e58;
|
||||
}
|
||||
|
||||
.table-row { min-height:38px;display:grid;grid-template-columns:46px 1.8fr .7fr .8fr .7fr;align-items:center;border-bottom:1px solid #2c2b26;color:#d2c78f; }
|
||||
.table-row > div { min-width:0;padding:5px 9px;border-right:1px solid #292720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
|
||||
.table-row.header { min-height:30px;height:30px;column-gap:1px;border-bottom:0;background:#030403;color:#bc9e58;font-size:11px; }
|
||||
.table-row.header > div { height:100%;display:flex;align-items:center; }
|
||||
.table-row.data-row { cursor:pointer; }
|
||||
.table-row.data-row:nth-of-type(odd) { background:#101210; }
|
||||
.data-table-core.selection-gold .data-row.is-selected { position:relative;background:linear-gradient(90deg,#352b11 0,#161207 60%,#090a08 100%);outline:1px solid #d6ad37;outline-offset:-1px;box-shadow:inset 0 0 0 1px #6d5218; }
|
||||
.data-table-core.selection-blue .data-row.is-selected { position:relative;background:linear-gradient(90deg,#132b43 0,#0b1824 58%,#070a0d 100%);outline:1px solid #3b91bd;outline-offset:-1px;box-shadow:inset 0 0 0 1px #174963; }
|
||||
.table-note-row { min-height:34px;display:block;background:linear-gradient(90deg,#17130b,#080908); }
|
||||
.table-note-row > div { height:34px;padding:0 10px;display:flex;align-items:center;gap:14px;border:0;color:#9e936d; }
|
||||
.table-note-row strong { color:#d7bc62;font-weight:400; }
|
||||
.table-note-row .table-note-actions { margin-left:auto;display:flex;gap:9px; }
|
||||
.table-note-row img { max-width:13px;max-height:13px;image-rendering:pixelated; }
|
||||
.table-row .status { color:var(--info); }.table-row .success { color:var(--success); }.table-row .danger { color:var(--danger); }
|
||||
.table-row .epic-text { color:var(--quality-epic); }.table-row .rare-text { color:var(--quality-artifact); }
|
||||
.table-icon { display:flex;align-items:center;justify-content:center; }.table-icon img { width:28px;height:28px;image-rendering:pixelated; }
|
||||
|
||||
.progress { position:relative;height:14px;background:#0a0b0a;border:1px solid #3c3425; }.progress-fill { height:100%;width:var(--value,50%);background:linear-gradient(#9abe23,#63820a);box-shadow:inset 0 0 0 1px #cce43c; }.progress-marker { position:absolute;top:-5px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #d7bd61;left:var(--left,50%); }
|
||||
.badge-demo { display:flex;gap:18px;align-items:center; }.badge-anchor { position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #48412f;background:#171817;border-radius:8px; }.badge-anchor > img:first-child { max-width:24px;max-height:24px;image-rendering:pixelated; }.alert-badge { position:absolute;right:-2px;top:-2px;width:12px;height:12px;image-rendering:pixelated; }.level-badge { width:42px;height:54px;display:flex;align-items:center;justify-content:center;border:1px solid #6b5432;background:linear-gradient(#22231f,#111210);color:#e3bf46;font-size:11px; }
|
||||
|
||||
.table-variant-board { display:grid;grid-template-rows:560px minmax(0,1fr);gap:18px; }
|
||||
.table-variant-grid { min-height:0; }.table-variant-grid > .panel { min-height:0; }.table-variant-grid .panel-body { height:calc(100% - 46px);display:flex;flex-direction:column; }.table-variant-spec { margin-top:auto;padding-top:10px; }
|
||||
.skill-damage-table { position:relative;height:472px;padding-right:15px;display:flex;flex-direction:column;border-color:#463820;background:#010201; }
|
||||
.skill-table-row { display:grid;grid-template-columns:.56fr 1fr 1fr 1fr .74fr 42px;align-items:center;color:#c6a659;font-size:13px;font-variant-numeric:tabular-nums; }
|
||||
.skill-table-row > * { min-width:0;padding:0 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
|
||||
.skill-table-row.header { flex:0 0 30px;column-gap:1px;background:#030403;color:#bc9e58;font-size:14px;text-align:center; }
|
||||
.skill-table-row.header > * { height:30px;padding:0 6px;display:flex;align-items:center;justify-content:center; }
|
||||
.skill-table-row.header > :nth-child(5) { grid-column:5 / 7; }
|
||||
.skill-table-row.header > :nth-child(6) { display:none; }
|
||||
.skill-table-body { flex:0 0 360px;min-height:0;overflow:hidden;background:#010201; }
|
||||
.skill-table-body .skill-table-row { height:40px;border:0;background:#010201; }
|
||||
.skill-name-cell { display:grid!important;grid-template-columns:24px 36px;align-items:center;gap:5px;padding-left:8px!important; }
|
||||
.skill-name-cell b { color:#c7a557;font-weight:400;text-align:right; }
|
||||
.skill-name-cell img { width:34px;height:34px;image-rendering:pixelated;filter:sepia(.9) saturate(3.2) hue-rotate(350deg) brightness(1.08) contrast(1.04); }
|
||||
.table-action-button,.inspect-button {
|
||||
--action-top:#1261a4;
|
||||
--action-bottom:#071f3b;
|
||||
--action-edge-top:#5b472a;
|
||||
--action-edge-bottom:#5b472a;
|
||||
appearance:none;
|
||||
padding:0;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border:2px solid transparent;
|
||||
border-radius:0;
|
||||
background:
|
||||
linear-gradient(180deg,var(--action-top),var(--action-bottom)) padding-box,
|
||||
linear-gradient(180deg,var(--action-edge-top),var(--action-edge-bottom)) border-box;
|
||||
box-shadow:0 0 0 1px rgba(0,0,0,.3),inset 0 0 0 1px #0f0f0f;
|
||||
line-height:0;
|
||||
cursor:pointer;
|
||||
}
|
||||
.table-action-button:hover,.inspect-button:hover { --action-top:#1d9bdb;--action-bottom:#0b325e;--action-edge-top:#927243;--action-edge-bottom:#927243; }
|
||||
.table-action-button:active,.inspect-button:active { --action-top:#1d9bdb;--action-bottom:#0b325e;--action-edge-top:#927243;--action-edge-bottom:#927243;transform:translateY(1px); }
|
||||
.table-action-button:disabled,.inspect-button:disabled { --action-top:#5b5b5b;--action-bottom:#212121;--action-edge-top:#424242;--action-edge-bottom:#424242;cursor:default; }
|
||||
.table-action-button { width:28px;height:28px; }.table-action-button img { max-width:16px;max-height:16px;image-rendering:auto; }
|
||||
.skill-summary { flex:0 0 47px;border-top:1px solid #47463f;border-bottom:1px solid #383832;background:#010201;color:#c8a75d; }
|
||||
.skill-summary > :first-child { padding-left:28px;font-size:18px;font-weight:700; }
|
||||
.skill-table-footer { flex:0 0 34px;padding:0 10px;display:flex;align-items:center;border-bottom:1px solid #33342f;background:#010201; }
|
||||
.skill-table-footer button { appearance:none;height:28px;padding:0 15px 0 1px;border:0;border-right:1px solid #51514a;border-radius:0;background:none;color:#d1af62;font:700 17px/1 "DCalc",SimSun,sans-serif; }
|
||||
.skill-table-scrollbar { position:absolute;top:30px;right:0;bottom:81px;width:15px;display:grid;grid-template-rows:15px 1fr 15px;border-left:1px solid #2b2924;background:#050606; }
|
||||
.skill-scroll-arrow { display:flex;align-items:center;justify-content:center;border:1px solid #514229;background:linear-gradient(#24241f,#10110f); }
|
||||
.skill-scroll-arrow::before { content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid #a98b46;filter:drop-shadow(0 1px 0 #000); }
|
||||
.skill-scroll-arrow:last-child::before { border-bottom:0;border-top:4px solid #a98b46; }
|
||||
.skill-scroll-track { position:relative;background:linear-gradient(90deg,#080908,#151513,#070807); }
|
||||
.skill-scroll-thumb { position:absolute;left:2px;right:2px;top:8px;height:78px;border:1px solid #68532d;background:linear-gradient(90deg,#1b1d1c,#363530,#161817); }
|
||||
|
||||
.compact-data-table { position:relative;height:184px;padding:4px 18px 5px 5px;border:1px solid #4b3b2a;background:#020302;overflow:hidden; }
|
||||
.compact-table-row { height:20px;display:grid;grid-template-columns:.78fr .82fr 1.2fr;align-items:center;color:#c9bd84;font-size:11px; }
|
||||
.compact-table-row > * { min-width:0;padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
|
||||
.compact-table-row.header { height:30px;margin-bottom:5px;column-gap:1px; }
|
||||
.compact-table-body { display:flex;flex-direction:column;gap:5px; }
|
||||
.compact-table-body .compact-table-row { height:20px;border:1px solid #222522;border-radius:0;background:linear-gradient(180deg,#171917 0,#0d0f0e 42%,#070808 100%);box-shadow:inset 0 1px 0 #202220,inset 0 -1px 0 #050605; }
|
||||
.compact-table-scrollbar { position:absolute;top:4px;right:3px;bottom:5px;width:12px;display:grid;grid-template-rows:16px 1fr 16px;border-left:1px solid #20221f;background:#050606; }
|
||||
.compact-table-scrollbar .skill-scroll-arrow { border-color:#31342f;background:linear-gradient(#171917,#0b0c0b); }
|
||||
.compact-table-scrollbar .skill-scroll-arrow::before { border-left-width:3px;border-right-width:3px;border-bottom-width:4px;opacity:.72; }
|
||||
.compact-table-scrollbar .skill-scroll-arrow:last-child::before { border-bottom:0;border-top:4px solid #8b794d; }
|
||||
.compact-table-scrollbar .skill-scroll-thumb { top:8px;height:54px;border-color:#4b4433;background:linear-gradient(90deg,#111312,#2a2b27,#101211); }
|
||||
|
||||
/* DataTable ItemRow: 43 rest, 44 hover, 46 selected. */
|
||||
.item-data-table { border:0;background:transparent;overflow:visible; }
|
||||
.item-table-row { position:relative;min-height:38px;display:grid;grid-template-columns:34px 32px 50px minmax(90px,1.55fr) 76px .92fr 1.1fr;align-items:center;color:#cabd82;font-size:11px;isolation:isolate; }
|
||||
.item-table-row > *:not(.item-row-frame) { min-width:0;padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
|
||||
.item-table-row.header { min-height:30px;height:30px;margin-bottom:5px;column-gap:1px;grid-template-columns:66px 50px minmax(90px,1.55fr) 76px .92fr 1.1fr; }
|
||||
.item-table-body { display:flex;flex-direction:column;gap:4px; }
|
||||
.item-table-body .item-table-row {
|
||||
--dt-outer:rgba(0,0,0,.012);--dt-middle:#000;--dt-accent:rgba(43,43,43,.85);--dt-inner:rgba(18,18,18,.73);
|
||||
--dt-surface:linear-gradient(180deg,rgba(29,29,29,.7),rgba(13,13,13,.7));
|
||||
cursor:pointer;
|
||||
}
|
||||
.item-table-body .item-table-row:hover { --dt-outer:#000820;--dt-middle:#082068;--dt-accent:#1888b8;--dt-inner:#082040;--dt-surface:#000810; }
|
||||
.item-table-body .item-table-row.is-selected { --dt-outer:#201808;--dt-middle:#604818;--dt-accent:#e8a828;--dt-inner:#302008;--dt-surface:#100800; }
|
||||
.item-table-body .item-table-row::before,
|
||||
.item-table-body .item-table-row::after,
|
||||
.item-row-frame,
|
||||
.item-row-frame::before,
|
||||
.item-row-frame::after { content:"";position:absolute;pointer-events:none; }
|
||||
.item-table-body .item-table-row::before { z-index:-3;inset:0;background:var(--dt-outer);border-radius:4px; }
|
||||
.item-table-body .item-row-frame { z-index:-2;inset:1px;background:var(--dt-middle);border-radius:3px;clip-path:none;filter:none; }
|
||||
.item-table-body .item-row-frame::before { inset:1px;background:var(--dt-accent);border-radius:2px;clip-path:none; }
|
||||
.item-table-body .item-row-frame::after { inset:2px;background:var(--dt-inner);border-radius:1px;clip-path:none; }
|
||||
.item-table-body .item-table-row::after { z-index:-1;inset:4px;background:var(--dt-surface);border-radius:1px;clip-path:none;filter:none; }
|
||||
.item-row-icon { width:32px;height:34px;padding:0!important;display:flex;align-items:center;justify-content:center; }
|
||||
.item-row-icon img { max-width:26px;max-height:26px;image-rendering:pixelated; }
|
||||
.inspect-button { width:28px;height:24px; }
|
||||
.inspect-button img { max-width:16px;max-height:16px;image-rendering:pixelated; }
|
||||