init
This commit is contained in:
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
Binary file not shown.
|
After Width: | Height: | Size: 690 B |
Binary file not shown.
|
After Width: | Height: | Size: 981 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 975 B |
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=1920, initial-scale=1">
|
||||
<base href="../../">
|
||||
<title>complex-dialog 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="preset">
|
||||
<div class="panel" style="height:660px;">
|
||||
<div class="panel-heading"><div class="panel-title">PresetManagementDialog / composition template</div><div class="spec-row"><span class="spec-chip captured">DEFAULT</span><span class="spec-chip captured">RENAMING</span><span class="spec-chip captured">SELECTED ROW ACTIONS</span><span class="spec-chip captured">SHOW ALL / SCROLLABLE</span></div></div>
|
||||
<div class="panel-body preset-stage">
|
||||
<div class="window preset-window">
|
||||
<div class="window-titlebar dnf-ui"><span class="title">管理设置</span><button type="button" class="dialog-icon-button dialog-close-button" aria-label="关闭管理设置" data-dialog-action="关闭请求已触发"><img class="close asset-2x" src="src-web/complex-dialog/img/sprite_interface.NPK/windowcommon_2x.img/6.PNG" alt=""></button></div>
|
||||
<div class="preset-body-shell dnf-ui">
|
||||
<div class="preset-intro dialog-content-well">※ 可以针对自己的游戏习惯作出选择，一次性变更多项设置。<br>※ 如果预设已满，请使用文件保存功能。</div>
|
||||
<div class="preset-main">
|
||||
<section class="preset-column preset-list-well">
|
||||
<div class="preset-section-head">我的游戏设置</div>
|
||||
<div class="preset-row selected"><img class="preset-radio asset-2x" src="src-web/complex-dialog/img/sprite_interface.NPK/windowcommon_2x.img/32.PNG"><span class="preset-name">西瓜°_07/31</span><span class="preset-row-actions"><button type="button" class="preset-row-action" aria-label="重命名预设" aria-pressed="false" data-preset-edit><img src="src-web/complex-dialog/img/sprite_interface2_option.NPK/option.img/88.PNG" alt=""></button><button type="button" class="preset-row-action" aria-label="移除预设" aria-pressed="false" data-preset-delete><img src="src-web/complex-dialog/img/sprite_interface.NPK/windowcommon.chn.img/42.PNG" alt=""></button></span></div>
|
||||
<div class="preset-row"><img class="preset-radio asset-2x" src="src-web/complex-dialog/img/sprite_interface.NPK/windowcommon_2x.img/30.PNG"><span>迪酱_07/31</span></div>
|
||||
<button type="button" class="preset-add" data-dialog-action="已创建一个演示预设"><img src="src-web/complex-dialog/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG" alt=""> 新建预设</button>
|
||||
<div class="preset-spacer"></div>
|
||||
<div class="preset-actions">
|
||||
<div class="btn-shell"><button type="button" class="dnf-btn normal" data-dialog-action="当前设置已保存"><img class="button-glyph" src="src-web/complex-dialog/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG" alt="">保存当前设置</button></div>
|
||||
<div class="btn-shell"><button type="button" class="dnf-btn normal" data-dialog-action="已打开设置文件选择">导入设置文件</button></div>
|
||||
<div class="btn-shell"><button type="button" class="dnf-btn normal" data-dialog-action="选定设置已导出">将选定设置保存为文件</button></div>
|
||||
<div class="preset-separator"></div>
|
||||
<div class="btn-shell"><button type="button" class="dnf-btn normal" data-dialog-action="已恢复默认设置">恢复默认设置</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="preset-column preset-diff-well">
|
||||
<div class="preset-section-head"><span>西瓜°_07/31</span><button type="button" class="show-all" aria-pressed="true" data-dialog-toggle><span class="checkbox-control is-checked"></span> 查看全部</button></div>
|
||||
<div class="preset-diff-scroll">
|
||||
<div class="preset-diff-list">
|
||||
<div class="preset-group-title">保存账号设置</div>
|
||||
<div class="diff-row"><span>装备信息对比</span><em>ON</em><b>→</b><strong>OFF</strong></div>
|
||||
<div class="preset-group-title">保存角色设置</div>
|
||||
<div class="diff-row"><span>光环效果</span><em>OFF</em><b>→</b><strong>ON</strong></div>
|
||||
<div class="diff-row"><span>角色技能效果透明</span><em>32%</em><b>→</b><strong>12%</strong></div>
|
||||
<div class="diff-row"><span>角色道具特效透明</span><em>16%</em><b>→</b><strong>13%</strong></div>
|
||||
<div class="preset-group-title">本地储存选项</div>
|
||||
<div class="diff-row muted"><span>画质提升</span><em>ON</em><b>→</b><strong>ON</strong></div>
|
||||
<div class="diff-row muted"><span>垂直同步</span><em>OFF</em><b>→</b><strong>OFF</strong></div>
|
||||
</div>
|
||||
<div class="scrollbar compact-scroll"><div class="scroll-arrow" aria-hidden="true"></div><div class="scroll-track"><div class="scroll-thumb" style="top:34px;height:82px"></div></div><div class="scroll-arrow" aria-hidden="true"></div></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-footer dialog-footer preset-footer"><div class="btn-shell back-action"><button type="button" class="dnf-btn normal dnf-ui" data-dialog-action="已返回上一层">返回</button></div><output class="dialog-status" aria-live="polite"></output><div class="footer-actions"><div class="btn-shell"><button type="button" class="dnf-btn normal dnf-ui" data-dialog-action="设置已应用">应用</button></div><div class="btn-shell"><button type="button" class="dnf-btn normal dnf-ui" data-dialog-action="关闭请求已触发">关闭</button></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
/* Source module: complex-dialog.css */
|
||||
.preset-stage { height:calc(100% - 46px);padding:14px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18); }
|
||||
.preset-window { width:1280px;height:574px;display:flex;flex-direction:column;background:rgba(4,5,5,.82); }
|
||||
.preset-window > .window-titlebar { flex:0 0 31px; }
|
||||
.preset-body-shell { flex:1;min-height:0;padding:9px;display:flex;flex-direction:column;gap:8px;background:rgba(4,5,5,.82); }
|
||||
.preset-intro { flex:0 0 68px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.45;color:#b7a467; }
|
||||
.preset-intro.dialog-content-well { min-height:68px; }
|
||||
.preset-main { flex:1;min-height:0;display:grid;grid-template-columns:.46fr .54fr;gap:10px; }
|
||||
.preset-column { min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid #30332f;background:#000; }
|
||||
.preset-section-head { flex:0 0 32px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #504329;background:#171916;color:#d2ba6f;font-size:13px; }
|
||||
.preset-row { flex:0 0 33px;padding:0 9px;display:grid;grid-template-columns:20px 1fr auto;align-items:center;border-bottom:1px solid #272823;background:#090a09;color:#a9965e; }
|
||||
.preset-row:nth-child(3) { background:#1d1e1c; }
|
||||
.preset-row.selected { color:#f1d46d;box-shadow:inset 0 0 0 1px #3d99d0;background:#07121b; }
|
||||
.preset-radio { width:14px;height:14px;image-rendering:auto; }
|
||||
.preset-row-actions { display:flex;gap:5px; }
|
||||
.preset-row-actions img { max-width:13px;max-height:13px;image-rendering:pixelated; }
|
||||
.preset-row-action { appearance:none;width:20px;height:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;cursor:pointer; }
|
||||
.preset-row-action img { filter:brightness(1);transform:translateY(0); }
|
||||
.preset-row-action:hover img,.preset-row-action:focus-visible img,.preset-row-action:active img,.preset-row-action[aria-pressed="true"] img { filter:brightness(1.28); }
|
||||
.preset-row-action:focus-visible { outline:1px solid rgba(225,204,135,.72);outline-offset:-2px; }
|
||||
.preset-row-action:active img { transform:translateY(1px); }
|
||||
.preset-row.is-renaming .preset-name { color:#fff0a5;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px; }
|
||||
.preset-row.is-demo-deleted { opacity:.46; }
|
||||
.preset-row.is-demo-deleted .preset-name { text-decoration:line-through; }
|
||||
.preset-add { appearance:none;flex:0 0 35px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-bottom:1px solid #242520;color:#d5b04c;background:#030403;font:inherit;cursor:pointer; }
|
||||
.preset-add:hover,.preset-add:focus-visible,.preset-add:active { color:#ffe28a;background:#11130f;outline:none; }
|
||||
.preset-add:active { transform:translateY(1px); }
|
||||
.preset-add img,.button-glyph { max-width:12px;max-height:12px;image-rendering:pixelated; }
|
||||
.preset-spacer { flex:1;background:#020302; }
|
||||
.preset-actions { flex:0 0 auto;padding:9px 0 8px;display:grid;gap:5px;justify-content:center;border-top:1px solid #292a26;background:#030403; }
|
||||
.preset-actions .btn-shell { padding:2px;border-radius:0; }
|
||||
.preset-actions .dnf-btn { width:270px;height:28px; }
|
||||
.preset-separator { height:1px;margin:3px -38px;background:#2b2d29; }
|
||||
.show-all { appearance:none;padding:2px 3px;display:flex;align-items:center;gap:5px;border:0;background:none;color:inherit;font:inherit;cursor:pointer; }
|
||||
.show-all:hover,.show-all:focus-visible,.show-all:active { color:#f1dc91;outline:none; }
|
||||
.show-all:active { transform:translateY(1px); }
|
||||
.show-all img { image-rendering:pixelated; }
|
||||
.preset-diff-scroll { flex:1;min-height:0;display:grid;grid-template-columns:1fr 15px;background:#020403; }
|
||||
.preset-diff-list { min-width:0;padding:4px 9px;overflow:hidden; }
|
||||
.preset-group-title { height:28px;display:flex;align-items:center;border-bottom:1px solid #26333a;color:#ba9d51;font-size:13px; }
|
||||
.diff-row { height:28px;display:grid;grid-template-columns:1fr 64px 28px 64px;align-items:center;border-bottom:1px solid #222c30;color:#b49f67; }
|
||||
.diff-row em { color:#777b77;font-style:normal;text-align:center; }
|
||||
.diff-row b { color:#747a76;font-weight:400;text-align:center; }
|
||||
.diff-row strong { color:var(--selected);font-weight:500;text-align:center; }
|
||||
.diff-row.muted strong { color:#888b84; }
|
||||
.compact-scroll { width:15px;height:100%; }
|
||||
.preset-footer { flex:0 0 42px;position:relative;justify-content:center; }
|
||||
.preset-footer .dialog-status { position:absolute;left:112px;max-width:270px;overflow:hidden;text-overflow:ellipsis; }
|
||||
.preset-footer .back-action { position:absolute;left:8px; }
|
||||
.footer-actions { display:flex;gap:8px; }
|
||||
.preset-footer .dnf-btn { min-width:78px; }
|
||||
|
||||
.anatomy {
|
||||
display:grid;
|
||||
grid-template-columns:120px 1fr;
|
||||
gap:18px;
|
||||
align-items:center;
|
||||
}
|
||||
.asset-tile { min-height:78px;display:flex;align-items:center;justify-content:center;background:#262726;border:1px dashed #5f5e58; }
|
||||
.asset-tile img { image-rendering:pixelated; }
|
||||
.anatomy-list { display:grid;gap:7px; }
|
||||
.anatomy-line { display:grid;grid-template-columns:76px 1fr;gap:9px;color:var(--text-3);font-size:11px; }
|
||||
.anatomy-line strong { color:var(--gold);font-weight:500; }
|
||||
|
||||
.slice-demo {
|
||||
position:relative;
|
||||
height:64px;
|
||||
border:5px solid transparent;
|
||||
border-radius:2px;
|
||||
background:
|
||||
linear-gradient(180deg, #1f355e 0%, #1d2f53 55%, #1a2849 100%) padding-box,
|
||||
linear-gradient(180deg, #684f2d 0%, #483423 100%) border-box;
|
||||
}
|
||||
.slice-demo .cut { position:absolute;top:-6px;bottom:-6px;width:1px;border-left:1px dashed var(--focus); }
|
||||
.slice-demo .cut.left { left:7px; }.slice-demo .cut.right { right:7px; }
|
||||
.slice-demo .slice-label { position:absolute;top:69px;color:var(--text-3);font-size:9px; }
|
||||
|
||||
.nine-grid { display:grid;grid-template-columns:22px 1fr 22px;grid-template-rows:22px 76px 22px;width:260px;height:120px; }
|
||||
.nine-grid > div { border:1px dashed rgba(75,167,211,.55);background:linear-gradient(#242b31,#0b0e10); }
|
||||
.nine-grid .center { background:linear-gradient(#15191c,#090a0b); }
|
||||
|
||||
.callout-list { margin:0;padding:0;list-style:none;display:grid;gap:9px;color:var(--text-2);font-size:12px; }
|
||||
.callout-list li { display:flex;align-items:flex-start;gap:8px; }
|
||||
.callout-list li::before { content:"";width:5px;height:5px;margin-top:6px;background:var(--selected);box-shadow:0 0 6px rgba(218,164,29,.4); }
|
||||
|
||||
.footer-note { position:absolute;left:46px;right:46px;bottom:20px;display:flex;justify-content:space-between;color:#767773;font-size:10px;letter-spacing:.4px; }
|
||||
.token-label { color:var(--text-3);font:10px/1.35 Consolas,monospace; }
|
||||
Reference in New Issue
Block a user