136 lines
12 KiB
CSS
136 lines
12 KiB
CSS
/* 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; }
|