init
This commit is contained in:
@@ -1,81 +1,138 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-hex-000000/60 p-2 border-solid border-#FFFF/15 overflow-hidden flex"
|
||||
v-if="data && data.length > 0"
|
||||
<section
|
||||
v-if="rows.length > 0"
|
||||
class="damage-panel"
|
||||
:class="{ 'is-expanded': expanded }"
|
||||
aria-label="技能伤害详情"
|
||||
>
|
||||
<div
|
||||
class="bg-hex-000000/40 text-white border-solid border-#FFFF/15 border-t-0 overflow-hidden flex-1 flex flex-col"
|
||||
>
|
||||
<div class="flex px-1px gap-1px">
|
||||
<div
|
||||
v-for="(header, key) in headers"
|
||||
:key="key"
|
||||
class="item-head"
|
||||
:style="{ width: `${header.width}px` }"
|
||||
@click="header.sortKey && sortValue(header.sortKey)"
|
||||
<div class="damage-panel__surface">
|
||||
<button
|
||||
type="button"
|
||||
class="damage-panel__toggle"
|
||||
:aria-expanded="expanded"
|
||||
:aria-label="expanded ? '收起完整伤害详情' : '展开完整伤害详情'"
|
||||
:title="expanded ? '收起完整伤害详情' : '展开完整伤害详情'"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<svg viewBox="0 0 16 28" aria-hidden="true">
|
||||
<path :d="expanded ? 'M5 3l7 11-7 11' : 'M11 3L4 14l7 11'" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="damage-panel__header damage-panel__grid">
|
||||
<button
|
||||
type="button"
|
||||
class="damage-panel__heading damage-panel__skill-heading"
|
||||
@click="sortValue('learnLv')"
|
||||
>
|
||||
{{ header.label }}
|
||||
<template v-if="header.sortKey && sort === header.sortKey">
|
||||
<span>{{ order === 'desc' ? '△' : '▽' }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="item-head w-60px">占比</div>
|
||||
技能
|
||||
<span
|
||||
v-if="sort === 'learnLv'"
|
||||
class="damage-panel__sort-indicator"
|
||||
:class="{ 'is-ascending': order === 'asc' }"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="damage-panel__heading damage-panel__full-column"
|
||||
@click="sortValue('cd')"
|
||||
>
|
||||
CD
|
||||
<span
|
||||
v-if="sort === 'cd'"
|
||||
class="damage-panel__sort-indicator"
|
||||
:class="{ 'is-ascending': order === 'asc' }"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
<div class="damage-panel__heading">次数</div>
|
||||
<button
|
||||
type="button"
|
||||
class="damage-panel__heading damage-panel__full-column"
|
||||
@click="sortValue('dps')"
|
||||
>
|
||||
秒伤
|
||||
<span
|
||||
v-if="sort === 'dps'"
|
||||
class="damage-panel__sort-indicator"
|
||||
:class="{ 'is-ascending': order === 'asc' }"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="damage-panel__heading damage-panel__full-column"
|
||||
@click="sortValue('total')"
|
||||
>
|
||||
总伤害
|
||||
<span
|
||||
v-if="sort === 'total'"
|
||||
class="damage-panel__sort-indicator"
|
||||
:class="{ 'is-ascending': order === 'asc' }"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
<div class="damage-panel__heading">占比</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden flex">
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<div class="flex px-1px gap-1px h-8.5" v-for="(skill, _) in data" :key="_">
|
||||
<div class="flex w-180px items-center gap-10px">
|
||||
<div class="w-28px h-28px relative">
|
||||
<img :src="getImageURL(skill.icon)" alt="" class="w-28px h-28px" />
|
||||
<div v-if="skill.lv" class="skill-lv-min" :data-text="`Lv${skill.lv}`">
|
||||
Lv{{ skill.lv }}
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ skill.name }} {{ !skill.mode ? '' : `[${skill.mode}]` }}</div>
|
||||
</div>
|
||||
<div class="w-50px flex items-center justify-center">{{ skill.cd.toFixed(1) }}s</div>
|
||||
<div class="w-50px flex items-center justify-center">
|
||||
<calc-input
|
||||
type="number"
|
||||
class="!w-40px !min-w-40px !pl-0 flex items-center justify-center"
|
||||
v-model="skillCount(skill).value"
|
||||
></calc-input>
|
||||
</div>
|
||||
<component :is="formatDamage(skill)"></component>
|
||||
|
||||
<div class="damage-panel__body">
|
||||
<div v-for="row in rows" :key="row.key" class="damage-panel__row damage-panel__grid">
|
||||
<div class="damage-panel__skill-cell">
|
||||
<span class="damage-panel__icon-wrap">
|
||||
<img :src="getImageURL(row.skill.icon)" :alt="row.skill.name" />
|
||||
<span
|
||||
v-if="row.skill.lv"
|
||||
class="damage-panel__level"
|
||||
:data-text="`Lv${row.skill.lv}`"
|
||||
>
|
||||
Lv{{ row.skill.lv }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="damage-panel__skill-name" :title="row.displayName">
|
||||
{{ row.displayName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="damage-panel__cell damage-panel__full-column">{{ row.cd }}</div>
|
||||
<div class="damage-panel__cell damage-panel__count-cell">
|
||||
<UiNumberField
|
||||
:model-value="row.count"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:show-fast-step="false"
|
||||
class="damage-panel__count-field"
|
||||
@update:model-value="setSkillCount(row.skill, $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="damage-panel__cell damage-panel__full-column" :class="toneClass(row.dpsTone)">
|
||||
{{ row.dps }}
|
||||
</div>
|
||||
<div
|
||||
class="damage-panel__cell damage-panel__full-column"
|
||||
:class="toneClass(row.totalTone)"
|
||||
>
|
||||
{{ row.total }}
|
||||
</div>
|
||||
<div class="damage-panel__cell damage-panel__share">{{ row.share }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!totalStandard"
|
||||
class="h-40px flex items-center justify-center text-18px border-t-1px border-t-solid border-t-#FFFF/15"
|
||||
>
|
||||
{{ showTotal.toFixed(0) }}
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="h-40px flex items-center justify-center text-18px border-t-1px border-t-solid border-t-#FFFF/15"
|
||||
:style="{ color: showTotal >= 0 ? '#37fa38' : '#ff0000' }"
|
||||
>
|
||||
{{ showTotal.toFixed(2) }}%
|
||||
</div>
|
||||
<footer class="damage-panel__total" :class="toneClass(totalTone)">
|
||||
<span>{{ totalStandard ? '相对基准' : '总伤害' }}</span>
|
||||
<strong>{{ showTotalText }}</strong>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Skill">
|
||||
import type { IResultSkill, IResultSkillCount } from '@/api/calc/type'
|
||||
import { UiNumberField } from '@/components/ui/number-field'
|
||||
import { useConfigStore } from '@/stores'
|
||||
import { getImageURL } from '@/utils/images'
|
||||
import { h } from 'vue'
|
||||
|
||||
const headers: Array<{ label: string; width: number; sortKey?: string }> = [
|
||||
{ label: '技能', width: 180, sortKey: 'learnLv' },
|
||||
{ label: 'CD', width: 50, sortKey: 'cd' },
|
||||
{ label: '次数', width: 50 },
|
||||
{ label: '秒伤', width: 100, sortKey: 'dps' },
|
||||
{ label: '总伤害', width: 110, sortKey: 'total' },
|
||||
]
|
||||
type SortKey = 'learnLv' | 'cd' | 'dps' | 'total'
|
||||
type Tone = 'positive' | 'negative' | undefined
|
||||
|
||||
const props = defineProps<{
|
||||
data: IResultSkill[]
|
||||
@@ -85,215 +142,459 @@ const props = defineProps<{
|
||||
}
|
||||
}>()
|
||||
|
||||
const sort = ref<string>('learnLv')
|
||||
const expanded = ref(false)
|
||||
const sort = ref<SortKey>('learnLv')
|
||||
const order = ref<'asc' | 'desc'>('desc')
|
||||
|
||||
const config = useConfigStore()
|
||||
|
||||
const data = computed(() => {
|
||||
return props.data.sort((a, b) => {
|
||||
let aValue = 0
|
||||
let bValue = 0
|
||||
if (['damage', 'cd', 'learnLv'].includes(sort.value)) {
|
||||
// @ts-ignore
|
||||
aValue = a[sort.value]
|
||||
// @ts-ignore
|
||||
bValue = b[sort.value]
|
||||
}
|
||||
if (sort.value == 'total') {
|
||||
aValue = a.damage * skillCount(a).value
|
||||
bValue = b.damage * skillCount(b).value
|
||||
}
|
||||
if (sort.value == 'dps') {
|
||||
aValue = a.damage / a.cd
|
||||
bValue = b.damage / b.cd
|
||||
}
|
||||
if (sort.value == 'name') {
|
||||
// @ts-ignore
|
||||
return order.value == 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
|
||||
}
|
||||
return order.value == 'asc' ? aValue - bValue : bValue - aValue
|
||||
watchEffect(() => {
|
||||
props.data.forEach((skill) => {
|
||||
const exists = config.skillCountConfig.some(
|
||||
(item) => item.name === skill.name && item.mode === skill.mode,
|
||||
)
|
||||
if (!exists) config.skillCountConfig.push({ name: skill.name, mode: skill.mode, count: 1 })
|
||||
})
|
||||
})
|
||||
|
||||
const sortValue = (key: string) => {
|
||||
if (sort.value == key) {
|
||||
order.value = order.value == 'asc' ? 'desc' : 'asc'
|
||||
} else {
|
||||
order.value = 'desc'
|
||||
}
|
||||
sort.value = key
|
||||
function skillCountValue(skill: IResultSkill) {
|
||||
return (
|
||||
config.skillCountConfig.find((item) => item.name === skill.name && item.mode === skill.mode)
|
||||
?.count ?? 1
|
||||
)
|
||||
}
|
||||
|
||||
const skillCount = (skill: IResultSkill) => {
|
||||
return computed({
|
||||
get() {
|
||||
let countConfig = config.skillCountConfig.find(
|
||||
(a) => a.name == skill.name && a.mode == skill.mode,
|
||||
)
|
||||
if (!countConfig) {
|
||||
countConfig = { name: skill.name, mode: skill.mode, count: 1 }
|
||||
config.skillCountConfig.push(countConfig)
|
||||
}
|
||||
return countConfig.count
|
||||
},
|
||||
set(val) {
|
||||
const index = config.skillCountConfig.findIndex(
|
||||
(a) => a.name == skill.name && a.mode == skill.mode,
|
||||
)
|
||||
if (index > -1) {
|
||||
config.skillCountConfig[index].count = val
|
||||
} else {
|
||||
config.skillCountConfig.push({ name: skill.name, mode: skill.mode, count: val })
|
||||
}
|
||||
},
|
||||
})
|
||||
function setSkillCount(skill: IResultSkill, value: number | undefined) {
|
||||
const count = typeof value === 'number' && Number.isFinite(value) ? value : 0
|
||||
const target = config.skillCountConfig.find(
|
||||
(item) => item.name === skill.name && item.mode === skill.mode,
|
||||
)
|
||||
if (target) target.count = count
|
||||
else config.skillCountConfig.push({ name: skill.name, mode: skill.mode, count })
|
||||
}
|
||||
|
||||
const totalDamage = computed(() => {
|
||||
return props.data.reduce((acc, skill) => {
|
||||
return acc + skill.damage * skillCount(skill).value
|
||||
}, 0)
|
||||
})
|
||||
const totalDamage = computed(() =>
|
||||
props.data.reduce((sum, skill) => sum + skill.damage * skillCountValue(skill), 0),
|
||||
)
|
||||
|
||||
const totalStandard = computed(() => {
|
||||
if (!props.standard) return undefined
|
||||
return props.standard.skills.reduce((acc, skill) => {
|
||||
const standardSkillCount = props.standard?.skillCount.find(
|
||||
(a) => a.name == skill.name && a.mode == skill.mode,
|
||||
return props.standard.skills.reduce((sum, skill) => {
|
||||
const count = props.standard?.skillCount.find(
|
||||
(item) => item.name === skill.name && item.mode === skill.mode,
|
||||
)?.count
|
||||
return acc + skill.damage * (standardSkillCount || 0)
|
||||
return sum + skill.damage * (count ?? 0)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
function standardValues(skill: IResultSkill) {
|
||||
const standardSkill = props.standard?.skills.find(
|
||||
(item) => item.name === skill.name && item.mode === skill.mode,
|
||||
)
|
||||
const standardCount = props.standard?.skillCount.find(
|
||||
(item) => item.name === skill.name && item.mode === skill.mode,
|
||||
)?.count
|
||||
if (!standardSkill || standardSkill.damage <= 0 || standardSkill.cd <= 0 || !standardCount) {
|
||||
return undefined
|
||||
}
|
||||
return { skill: standardSkill, count: standardCount }
|
||||
}
|
||||
|
||||
function comparisonTone(value: number): Tone {
|
||||
return value >= 0 ? 'positive' : 'negative'
|
||||
}
|
||||
|
||||
function formatPercent(value: number) {
|
||||
return `${(value * 100).toFixed(2)}%`
|
||||
}
|
||||
|
||||
function sortMetric(skill: IResultSkill, key: SortKey) {
|
||||
if (key === 'total') return skill.damage * skillCountValue(skill)
|
||||
if (key === 'dps') return skill.cd > 0 ? skill.damage / skill.cd : 0
|
||||
return Number(skill[key] ?? 0)
|
||||
}
|
||||
|
||||
const sortedSkills = computed(() =>
|
||||
[...props.data].sort((left, right) => {
|
||||
const leftValue = sortMetric(left, sort.value)
|
||||
const rightValue = sortMetric(right, sort.value)
|
||||
return order.value === 'asc' ? leftValue - rightValue : rightValue - leftValue
|
||||
}),
|
||||
)
|
||||
|
||||
const rows = computed(() =>
|
||||
sortedSkills.value.map((skill) => {
|
||||
const count = skillCountValue(skill)
|
||||
const currentTotal = skill.damage * count
|
||||
const currentDps = skill.cd > 0 ? skill.damage / skill.cd : 0
|
||||
const standard = standardValues(skill)
|
||||
let dps = Math.round(currentDps).toLocaleString()
|
||||
let total = Math.round(currentTotal).toLocaleString()
|
||||
let dpsTone: Tone
|
||||
let totalTone: Tone
|
||||
|
||||
if (standard) {
|
||||
const standardDps = standard.skill.damage / standard.skill.cd
|
||||
const standardTotal = standard.skill.damage * standard.count
|
||||
const dpsDelta = standardDps === 0 ? 0 : (currentDps - standardDps) / standardDps
|
||||
const totalDelta = standardTotal === 0 ? 0 : (currentTotal - standardTotal) / standardTotal
|
||||
dps = formatPercent(dpsDelta)
|
||||
total = formatPercent(totalDelta)
|
||||
dpsTone = comparisonTone(dpsDelta)
|
||||
totalTone = comparisonTone(totalDelta)
|
||||
}
|
||||
|
||||
const share = totalDamage.value === 0 ? 0 : currentTotal / totalDamage.value
|
||||
return {
|
||||
key: `${skill.name}-${skill.mode ?? ''}`,
|
||||
skill,
|
||||
displayName: `${skill.name}${skill.mode ? ` [${skill.mode}]` : ''}`,
|
||||
count,
|
||||
cd: `${skill.cd.toFixed(1)}s`,
|
||||
dps,
|
||||
total,
|
||||
dpsTone,
|
||||
totalTone,
|
||||
share: formatPercent(share),
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
const showTotal = computed(() => {
|
||||
if (!totalStandard.value || totalStandard.value == 0) return totalDamage.value
|
||||
if (!totalStandard.value) return totalDamage.value
|
||||
return ((totalDamage.value - totalStandard.value) / totalStandard.value) * 100
|
||||
})
|
||||
|
||||
const formatDamage = (skill: IResultSkill) => {
|
||||
const standardSkill = props.standard?.skills?.find(
|
||||
(a) => a.name == skill.name && a.mode == skill.mode,
|
||||
)
|
||||
const standardSkillCount = props.standard?.skillCount.find(
|
||||
(a) => a.name == skill.name && a.mode == skill.mode,
|
||||
)?.count
|
||||
const rate = h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '60px',
|
||||
},
|
||||
},
|
||||
(((skill.damage * skillCount(skill).value) / totalDamage.value) * 100).toFixed(2) + '%',
|
||||
)
|
||||
if (standardSkill && standardSkill.damage > 0 && standardSkill.cd > 0 && !!standardSkillCount) {
|
||||
const currentSkillCount = skillCount(skill).value
|
||||
const damageValue =
|
||||
(skill.damage * currentSkillCount - standardSkill.damage * standardSkillCount) /
|
||||
(standardSkill.damage * standardSkillCount)
|
||||
const damage = h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '110px',
|
||||
color: damageValue >= 0 ? '#37fa38' : '#ff0000',
|
||||
},
|
||||
},
|
||||
(damageValue * 100).toFixed(2) + '%',
|
||||
)
|
||||
const dpsValue =
|
||||
(skill.damage / skill.cd - standardSkill.damage / standardSkill.cd) /
|
||||
(standardSkill.damage / standardSkill.cd)
|
||||
const dps = h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '110px',
|
||||
color: dpsValue >= 0 ? '#37fa38' : '#ff0000',
|
||||
},
|
||||
},
|
||||
(dpsValue * 100).toFixed(2) + '%',
|
||||
)
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
class: 'flex items-center justify-center',
|
||||
},
|
||||
[dps, damage, rate],
|
||||
)
|
||||
} else {
|
||||
const damage = h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '110px',
|
||||
},
|
||||
},
|
||||
Math.round(skill.damage * skillCount(skill).value).toLocaleString(),
|
||||
)
|
||||
const dps = h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '110px',
|
||||
},
|
||||
},
|
||||
Math.round(skill.damage / skill.cd).toLocaleString(),
|
||||
)
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
class: 'flex items-center justify-center',
|
||||
},
|
||||
[dps, damage, rate],
|
||||
)
|
||||
const showTotalText = computed(() =>
|
||||
totalStandard.value
|
||||
? `${showTotal.value.toFixed(2)}%`
|
||||
: Math.round(showTotal.value).toLocaleString(),
|
||||
)
|
||||
|
||||
const totalTone = computed<Tone>(() =>
|
||||
totalStandard.value ? comparisonTone(showTotal.value) : undefined,
|
||||
)
|
||||
|
||||
function toneClass(tone: Tone) {
|
||||
return {
|
||||
'is-positive': tone === 'positive',
|
||||
'is-negative': tone === 'negative',
|
||||
}
|
||||
}
|
||||
|
||||
function sortValue(key: SortKey) {
|
||||
if (sort.value === key) order.value = order.value === 'asc' ? 'desc' : 'asc'
|
||||
else {
|
||||
sort.value = key
|
||||
order.value = 'desc'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.item-head {
|
||||
background: linear-gradient(#2b2817, #171407);
|
||||
border-top: 1px solid #423d2c;
|
||||
border-bottom: 1px solid #211d15;
|
||||
.damage-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.damage-panel__surface {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
padding: var(--ui-character-result-panel-padding);
|
||||
border: var(--ui-component-stroke-size) solid var(--ui-result-panel-border);
|
||||
background: var(--ui-result-panel-background);
|
||||
box-shadow: var(--ui-result-panel-shadow);
|
||||
}
|
||||
|
||||
.damage-panel__toggle {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 50%;
|
||||
left: calc(var(--ui-character-result-toggle-inline-size) * -1);
|
||||
display: inline-flex;
|
||||
width: var(--ui-character-result-toggle-inline-size);
|
||||
height: var(--ui-character-result-toggle-block-size);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: var(--ui-component-stroke-size) solid var(--ui-result-toggle-border);
|
||||
border-right: 0;
|
||||
background: var(--ui-result-toggle-background);
|
||||
box-shadow: var(--ui-result-toggle-shadow);
|
||||
color: var(--ui-result-toggle-foreground);
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 24px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: square;
|
||||
stroke-linejoin: miter;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--ui-focus-outline-size) solid var(--ui-ring);
|
||||
outline-offset: var(--ui-focus-outline-offset);
|
||||
}
|
||||
|
||||
&:active svg {
|
||||
transform: translateY(var(--ui-pressed-offset));
|
||||
}
|
||||
}
|
||||
|
||||
.damage-panel__grid {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns:
|
||||
minmax(0, 1fr)
|
||||
var(--ui-character-result-count-inline-size)
|
||||
var(--ui-character-result-share-inline-size);
|
||||
column-gap: var(--ui-component-stroke-size);
|
||||
}
|
||||
|
||||
.damage-panel__header {
|
||||
flex: 0 0 auto;
|
||||
padding-right: var(--ui-character-result-scrollbar-inline-size);
|
||||
}
|
||||
|
||||
.damage-panel__heading {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: var(--ui-table-header-block-size);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 0 4px;
|
||||
border: 0;
|
||||
border-top: var(--ui-component-stroke-size) solid var(--ui-result-panel-border);
|
||||
border-bottom: var(--ui-component-stroke-size) solid var(--ui-result-divider);
|
||||
background: var(--ui-result-header-background);
|
||||
color: var(--ui-result-header-foreground);
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-lv-min {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: -3px;
|
||||
right: -4px;
|
||||
font-size: 12px;
|
||||
transform: scale(0.7);
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
font-weight: bolder;
|
||||
font-family: Arial;
|
||||
button.damage-panel__heading {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--ui-primary-foreground);
|
||||
filter: brightness(1.12);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--ui-focus-outline-size) solid var(--ui-ring);
|
||||
outline-offset: var(--ui-focus-outline-offset);
|
||||
}
|
||||
}
|
||||
|
||||
.skill-lv-min::before {
|
||||
content: attr(data-text);
|
||||
.damage-panel__sort-indicator {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 6px solid currentColor;
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
&.is-ascending {
|
||||
border-top: 6px solid currentColor;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.damage-panel__body {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.damage-panel__row {
|
||||
min-height: var(--ui-character-result-row-block-size);
|
||||
border-bottom: var(--ui-component-stroke-size) solid var(--ui-result-divider);
|
||||
background: var(--ui-result-row-background);
|
||||
color: var(--ui-foreground);
|
||||
|
||||
&:nth-child(even) {
|
||||
background: var(--ui-result-row-alt-background);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--ui-result-row-hover-background);
|
||||
}
|
||||
}
|
||||
|
||||
.damage-panel__skill-cell,
|
||||
.damage-panel__cell {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.damage-panel__skill-cell {
|
||||
gap: var(--ui-control-gap);
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.damage-panel__cell {
|
||||
justify-content: center;
|
||||
padding: 2px 4px;
|
||||
border-left: var(--ui-component-stroke-size) solid var(--ui-result-divider);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Keep compact rows to the requested skill/count/share contract. This must follow the generic
|
||||
// cell display rule so hidden detail columns cannot create a second implicit grid row.
|
||||
.damage-panel__full-column {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.damage-panel__icon-wrap {
|
||||
position: relative;
|
||||
width: var(--ui-character-result-icon-size);
|
||||
height: var(--ui-character-result-icon-size);
|
||||
flex: 0 0 var(--ui-character-result-icon-size);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
}
|
||||
|
||||
.damage-panel__level {
|
||||
position: absolute;
|
||||
-webkit-text-stroke: 2.5px #37fa38;
|
||||
font-family: Arial;
|
||||
z-index: 1;
|
||||
top: -4px;
|
||||
right: -5px;
|
||||
color: var(--ui-background);
|
||||
font:
|
||||
700 9px/1 Arial,
|
||||
sans-serif;
|
||||
text-shadow: none;
|
||||
z-index: -1;
|
||||
|
||||
&::before {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
-webkit-text-stroke: 2px var(--dcalc-quality-primeval);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.damage-panel__skill-name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.damage-panel__count-field {
|
||||
--ui-number-field-width: 100%;
|
||||
--ui-field-padding-inline: 2px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.damage-panel__share {
|
||||
color: var(--ui-muted-foreground);
|
||||
}
|
||||
|
||||
.damage-panel__total {
|
||||
display: flex;
|
||||
min-height: var(--ui-character-result-footer-block-size);
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--ui-control-gap);
|
||||
padding: 0 clamp(10px, 0.8vw, 16px);
|
||||
border-top: var(--ui-component-stroke-size) solid var(--ui-result-panel-border);
|
||||
background: var(--ui-result-total-background);
|
||||
color: var(--ui-result-total-label);
|
||||
|
||||
strong {
|
||||
color: var(--ui-result-total-value);
|
||||
font-size: calc(var(--character-font-size, 12px) * 1.22);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.is-positive,
|
||||
.is-positive strong {
|
||||
color: var(--ui-success);
|
||||
}
|
||||
|
||||
.is-negative,
|
||||
.is-negative strong {
|
||||
color: var(--ui-destructive);
|
||||
}
|
||||
|
||||
@media (max-width: 1599px) {
|
||||
.damage-panel.is-expanded .damage-panel__surface {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: var(--ui-character-result-full-inline-size);
|
||||
}
|
||||
|
||||
.damage-panel.is-expanded .damage-panel__grid {
|
||||
grid-template-columns:
|
||||
minmax(180px, 1fr)
|
||||
var(--ui-character-result-cd-inline-size)
|
||||
var(--ui-character-result-count-inline-size)
|
||||
minmax(74px, 0.9fr)
|
||||
minmax(74px, 1fr)
|
||||
var(--ui-character-result-share-inline-size);
|
||||
}
|
||||
|
||||
.damage-panel.is-expanded .damage-panel__full-column {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.damage-panel__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.damage-panel__grid {
|
||||
grid-template-columns:
|
||||
minmax(180px, 1fr)
|
||||
var(--ui-character-result-cd-inline-size)
|
||||
var(--ui-character-result-count-inline-size)
|
||||
minmax(var(--ui-character-result-value-min-inline-size), 0.9fr)
|
||||
minmax(var(--ui-character-result-value-min-inline-size), 1fr)
|
||||
var(--ui-character-result-share-inline-size);
|
||||
}
|
||||
|
||||
.damage-panel__full-column {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.damage-panel__toggle svg {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user