diff --git a/src/routes/analysis/+page.svelte b/src/routes/analysis/+page.svelte index f2bfec0..c9724a1 100644 --- a/src/routes/analysis/+page.svelte +++ b/src/routes/analysis/+page.svelte @@ -1205,7 +1205,7 @@ {/if} -

카드별 색칠된 구간을 클릭하면 해당 액티브만 미발동으로 계산합니다. 다시 클릭하면 복원됩니다. 배치와 쿨타임은 유지됩니다. 색이 진하고 테두리가 굵을수록 현재 설정에서 토글할 때 최고점 변화가 큽니다. 빗금은 미발동 상태이며, 해당 구간은 복원 시 영향력을 표시합니다. +

카드별 색칠된 구간을 클릭하면 해당 액티브만 미발동으로 계산합니다. 다시 클릭하면 복원됩니다. 배치와 쿨타임은 유지됩니다. 점수에 영향을 주는 구간은 불투명하게 표시하며, 내부 색이 진하고 테두리가 굵을수록 현재 설정에서 토글할 때 최고점 변화가 큽니다. 빗금은 미발동 상태이며, 해당 구간은 복원 시 영향력을 표시합니다. {#if excludedActiveWindows.length} {excludedActiveWindows.length}회 미발동 적용 중 @@ -1227,7 +1227,7 @@ class="skill-window active-window" class:excluded={excludedActiveWindows.some((excluded) => excluded.cardId === window.cardId && excluded.startSeconds === window.startSeconds)} disabled={mode !== 'analysis' || !simulationContext || running} - style={coloredWindowStyle(window, timelineDuration) + (impact ? ` --impact-opacity: ${0.25 + 0.75 * Math.sqrt(impact.strength)}; --impact-border: ${impact.strength > 0 ? 1 + 2 * impact.strength : 0}px;` : '')} + style={coloredWindowStyle(window, timelineDuration) + (impact ? ` --impact-opacity: ${impact.strength > 0 ? 1 : 0.25}; --impact-color-weight: ${55 + 45 * Math.sqrt(impact.strength)}%; --impact-darken: ${20 * Math.sqrt(impact.strength)}%; --impact-border: ${impact.strength > 0 ? 1 + 2 * impact.strength : 0}px;` : '')} title={`${resultCardName(cardId)} 액티브 ${formatSeconds(window.startSeconds)}~${formatSeconds(window.endSeconds)} · ${window.scoreUpPercent}% · 클릭하여 미발동/복원${impact ? ` · 토글 시 최고점 ${signedScoreChange(impact.scoreChange)}` : ''}`} aria-label={`${resultCardName(cardId)} 액티브 ${formatSeconds(window.startSeconds)}부터 ${formatSeconds(window.endSeconds)}까지 미발동 처리${impact ? ` · 토글 시 최고점 ${signedScoreChange(impact.scoreChange)}` : ''}`} aria-pressed={excludedActiveWindows.some((excluded) => excluded.cardId === window.cardId && excluded.startSeconds === window.startSeconds)} @@ -1414,9 +1414,9 @@ .timeline-track::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 9%) 1px, transparent 1px); background-size: var(--time-grid-step, 10%) 100%; pointer-events: none; } .skill-track { height: 36px; } .skill-window { position: absolute; min-width: 2px; border-radius: 3px; background: var(--member-color); } - .active-window { top: 8px; height: 20px; opacity: var(--impact-opacity, .72); padding: 0; border: 0; box-shadow: inset 0 0 0 var(--impact-border, 0px) rgb(255 255 255 / 85%); cursor: pointer; } + .active-window { top: 8px; height: 20px; opacity: var(--impact-opacity, .72); --impact-fill: color-mix(in srgb, color-mix(in srgb, var(--member-color) var(--impact-color-weight, 100%), white), black var(--impact-darken, 0%)); background: var(--impact-fill); padding: 0; border: 0; box-shadow: inset 0 0 0 var(--impact-border, 0px) rgb(255 255 255 / 85%); cursor: pointer; } .active-window:hover:not(:disabled), .active-window:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; } - .active-window.excluded { opacity: var(--impact-opacity, .28); border: 1px dashed var(--member-color); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--member-color) 3px 4px); } + .active-window.excluded { opacity: var(--impact-opacity, .28); border: 1px dashed var(--member-color); background: repeating-linear-gradient(135deg, transparent 0 3px, rgb(255 255 255 / 55%) 3px 4px), var(--impact-fill); } .active-window:disabled { cursor: default; } .timeline-score-summary { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 16px; margin-bottom: 12px; border: 1px solid #454052; border-radius: 10px; background: #22202a; } .timeline-score-summary > div { display: grid; gap: 6px; }