feat: refine desktop layouts and data pages
This commit is contained in:
@@ -639,7 +639,11 @@
|
||||
<svelte:head><title>조합 탐색 · 홀로도리</title></svelte:head>
|
||||
|
||||
<main>
|
||||
<header><h1>조합 탐색</h1></header>
|
||||
<header>
|
||||
<h1>조합 탐색</h1>
|
||||
<p class="page-description">악곡과 고정 멤버 조건을 바탕으로 빈자리에 들어갈 카드를 탐색해 최고 점수 조합을 찾습니다.</p>
|
||||
<p class="baseline-guide"><strong>기준 조합</strong>은 배치 분석 결과가 저장되어 있고, 저장된 악곡과 난이도가 현재 탐색 조건과 같을 때 표시됩니다.</p>
|
||||
</header>
|
||||
{#if baselineState && baselineMatchesConditions}
|
||||
<section class="panel baseline-panel" aria-labelledby="baseline-title">
|
||||
<div class="section-title">
|
||||
@@ -782,43 +786,46 @@
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 46px 0 80px; }
|
||||
main { width: min(var(--page-max-width), calc(100% - var(--page-gutter))); margin: 0 auto; padding: 46px 0 80px; }
|
||||
header { margin-bottom: 28px; }
|
||||
h1 { margin: 0; color: #f3f5f8; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.045em; }
|
||||
.page-description { margin: 10px 0 0; color: #929cab; font-size: 14px; line-height: 1.6; }
|
||||
.baseline-guide { width: fit-content; margin: 10px 0 0; padding: 8px 11px; border-radius: 8px; color: #8d96a5; background: #1b2029; font-size: 13px; line-height: 1.55; }
|
||||
.baseline-guide strong { color: #dba0b9; }
|
||||
.panel { margin-top: 16px; padding: 24px; border: 1px solid #2a303a; border-radius: 16px; background: #171b22; }
|
||||
.section-title, .section-title > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.section-title > div { justify-content: flex-start; }
|
||||
.section-title span { color: #ef8cb6; font-size: 11px; font-weight: 900; }
|
||||
.section-title span { color: #ef8cb6; font-size: 13px; font-weight: 900; }
|
||||
.section-title h2 { margin: 0; font-size: 18px; }
|
||||
.section-title > strong { color: #aeb6c4; font-size: 12px; }
|
||||
.section-title > strong { color: #aeb6c4; font-size: 14px; }
|
||||
.baseline-panel { border-color: #4a3a4b; background: #1c1920; }
|
||||
.baseline-condition { margin: 12px 0 0; color: #b8a8b4; font-size: 12px; }
|
||||
.baseline-condition { margin: 12px 0 0; color: #b8a8b4; font-size: 14px; }
|
||||
.baseline-members { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
|
||||
.baseline-members div { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 42px; padding: 7px 9px; border: 1px solid #37303a; border-radius: 9px; background: #141218; }
|
||||
.baseline-members span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #181118; background: #d987ac; font-size: 10px; font-weight: 900; }
|
||||
.baseline-members strong { overflow: hidden; color: #e8e1e7; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; }
|
||||
.baseline-status { margin: 15px 0 0; color: #9ba4b1; font-size: 12px; }
|
||||
label { display: grid; gap: 7px; color: #8f98a8; font-size: 12px; font-weight: 750; }
|
||||
.baseline-members span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #181118; background: #d987ac; font-size: 12px; font-weight: 900; }
|
||||
.baseline-members strong { overflow: hidden; color: #e8e1e7; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; }
|
||||
.baseline-status { margin: 15px 0 0; color: #9ba4b1; font-size: 14px; }
|
||||
label { display: grid; gap: 7px; color: #8f98a8; font-size: 14px; font-weight: 750; }
|
||||
select, .number-input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #343c49; border-radius: 9px; color: #e8ebf1; background: #11151b; font: inherit; }
|
||||
select:focus, .number-input:focus, .generation-input:focus { border-color: #d86f9c; outline: 3px solid rgb(216 111 156 / 14%); }
|
||||
.song-fields { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; margin-top: 22px; }
|
||||
.candidate-fields { display: grid; grid-template-columns: 130px minmax(220px, 320px); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #292f39; }
|
||||
.candidate-awakening { display: grid; gap: 7px; color: #8f98a8; font-size: 12px; font-weight: 750; }
|
||||
.candidate-guide { margin: 7px 0 0; color: #737d8d; font-size: 10px; line-height: 1.5; }
|
||||
.song-fields { display: grid; grid-template-columns: minmax(0, 1fr) clamp(130px, 11vw, 180px); gap: 10px; margin-top: 22px; }
|
||||
.candidate-fields { display: grid; grid-template-columns: clamp(130px, 11vw, 180px) clamp(260px, 24vw, 380px); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #292f39; }
|
||||
.candidate-awakening { display: grid; gap: 7px; color: #8f98a8; font-size: 14px; font-weight: 750; }
|
||||
.candidate-guide { margin: 7px 0 0; color: #737d8d; font-size: 12px; line-height: 1.5; }
|
||||
.fixed-fields { display: grid; gap: 9px; margin-top: 16px; }
|
||||
.fixed-guide { margin: 8px 0 0; color: #737d8d; font-size: 10px; line-height: 1.5; }
|
||||
.fixed-column-headings { display: grid; grid-template-columns: minmax(0, 1fr) 120px 304px 180px; gap: 9px; margin-bottom: -3px; }
|
||||
.fixed-column-headings > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; color: #8f98a8; font-size: 10px; font-weight: 800; text-align: center; }
|
||||
.fixed-guide { margin: 8px 0 0; color: #737d8d; font-size: 12px; line-height: 1.5; }
|
||||
.fixed-column-headings { display: grid; grid-template-columns: minmax(320px, 1fr) clamp(120px, 11vw, 170px) clamp(304px, 26vw, 390px) clamp(180px, 16vw, 240px); gap: 9px; margin-bottom: -3px; }
|
||||
.fixed-column-headings > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; color: #8f98a8; font-size: 12px; font-weight: 800; text-align: center; }
|
||||
.generation-heading { line-height: 1.25; white-space: nowrap; }
|
||||
.fixed-field { display: grid; grid-template-columns: minmax(0, 1fr) 120px 304px 180px; gap: 9px; }
|
||||
.fixed-awakening, .fixed-reduction { display: grid; align-self: end; align-items: center; height: 42px; gap: 7px; color: #8f98a8; font-size: 12px; font-weight: 750; }
|
||||
.fixed-field { display: grid; grid-template-columns: minmax(320px, 1fr) clamp(120px, 11vw, 170px) clamp(304px, 26vw, 390px) clamp(180px, 16vw, 240px); gap: 9px; }
|
||||
.fixed-awakening, .fixed-reduction { display: grid; align-self: end; align-items: center; height: 42px; gap: 7px; color: #8f98a8; font-size: 14px; font-weight: 750; }
|
||||
.fixed-awakening { grid-template-columns: 32px minmax(0, 1fr); }
|
||||
.fixed-reduction { grid-template-columns: 88px minmax(0, 1fr); }
|
||||
.awakening-stepper { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; height: 42px; overflow: hidden; border: 1px solid #343c49; border-radius: 9px; background: #11151b; }
|
||||
.awakening-stepper button { align-self: stretch; padding: 0; border: 0; color: #c1c8d3; background: #202630; font-size: 22px; cursor: pointer; }
|
||||
.awakening-stepper strong { color: #e8ebf1; font-size: 12px; text-align: center; }
|
||||
.awakening-stepper strong { color: #e8ebf1; font-size: 14px; text-align: center; }
|
||||
.reduction-options { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); height: 42px; overflow: hidden; border: 1px solid #343c49; border-radius: 9px; background: #11151b; }
|
||||
.reduction-options button { min-width: 0; padding: 0 5px; border: 0; border-left: 1px solid #2d3440; color: #8f98a8; background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }
|
||||
.reduction-options button { min-width: 0; padding: 0 5px; border: 0; border-left: 1px solid #2d3440; color: #8f98a8; background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
|
||||
.reduction-options button:first-child { border-left: 0; }
|
||||
.reduction-options button.active { color: #171019; background: #ed8bb5; }
|
||||
.fixed-overrides { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-self: end; height: 42px; }
|
||||
@@ -829,15 +836,15 @@
|
||||
.override-checkbox input:checked + span::after { content: '✓'; color: #171019; font-size: 14px; font-weight: 950; }
|
||||
.override-checkbox input:focus-visible + span { outline: 3px solid rgb(216 111 156 / 20%); }
|
||||
.override-checkbox input:disabled + span { opacity: .35; cursor: default; }
|
||||
.generation-input { align-self: center; width: 100%; min-width: 0; height: 32px; padding: 0 7px; border: 1px solid #414957; border-radius: 7px; color: #e8ebf1; background: #11151b; font-size: 10px; font-weight: 800; text-align: center; }
|
||||
.generation-input { align-self: center; width: 100%; min-width: 0; height: 32px; padding: 0 7px; border: 1px solid #414957; border-radius: 7px; color: #e8ebf1; background: #11151b; font-size: 12px; font-weight: 800; text-align: center; }
|
||||
.generation-input::placeholder { color: #68717f; opacity: 1; }
|
||||
.generation-input:disabled { opacity: .35; }
|
||||
.awakening-stepper button:disabled, .reduction-options button:disabled { opacity: .35; cursor: default; }
|
||||
.leader-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #303641; }
|
||||
.outfit-effect { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; margin-top: 9px; padding: 11px 13px; border: 1px solid #2d3440; border-radius: 9px; background: #12161c; }
|
||||
.outfit-effect span { color: #d993b1; font-size: 11px; font-weight: 850; }
|
||||
.outfit-effect p { margin: 0; color: #b9c1cd; font-size: 12px; line-height: 1.55; }
|
||||
.hint { margin: 13px 0 0; color: #858f9f; font-size: 11px; line-height: 1.6; }
|
||||
.outfit-effect span { color: #d993b1; font-size: 13px; font-weight: 850; }
|
||||
.outfit-effect p { margin: 0; color: #b9c1cd; font-size: 14px; line-height: 1.55; }
|
||||
.hint { margin: 13px 0 0; color: #858f9f; font-size: 13px; line-height: 1.6; }
|
||||
.error { margin: 14px 0 0; color: #ff9f9f; font-size: 13px; }
|
||||
.search { width: 100%; height: 46px; margin-top: 18px; border: 0; border-radius: 10px; color: #171019; background: #ed8bb5; font-weight: 900; cursor: pointer; }
|
||||
.search:disabled { opacity: .55; cursor: default; }
|
||||
@@ -848,32 +855,37 @@
|
||||
.compute-option input:checked + span::after { content: '✓'; color: #171019; font-size: 13px; font-weight: 950; }
|
||||
.compute-option input:focus-visible + span { outline: 3px solid rgb(216 111 156 / 20%); }
|
||||
.compute-option input:disabled + span, .compute-option input:disabled ~ strong { opacity: .5; cursor: default; }
|
||||
.compute-option strong { color: #c9d0da; font-size: 12px; }
|
||||
.compute-warning { margin: 6px 0 0 29px; color: #a98686; font-size: 11px; line-height: 1.5; }
|
||||
.compute-option strong { color: #c9d0da; font-size: 14px; }
|
||||
.compute-warning { margin: 6px 0 0 29px; color: #a98686; font-size: 13px; line-height: 1.5; }
|
||||
progress { display: block; width: 100%; height: 4px; margin-top: 8px; accent-color: #ed8bb5; }
|
||||
.ranking-list { display: grid; gap: 10px; margin-top: 18px; }
|
||||
.ranking-card { overflow: hidden; border: 1px solid #303744; border-radius: 12px; background: #12161c; }
|
||||
.ranking-card[open] { border-color: #55404f; background: #15151b; }
|
||||
.ranking-card summary { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 170px; align-items: center; gap: 14px; min-height: 76px; padding: 12px 42px 12px 16px; cursor: pointer; list-style: none; }
|
||||
.ranking-card summary { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) clamp(170px, 15vw, 230px); align-items: center; gap: 18px; min-height: 80px; padding: 12px 46px 12px 18px; cursor: pointer; list-style: none; }
|
||||
.ranking-card summary::-webkit-details-marker { display: none; }
|
||||
.ranking-card summary::after { content: '⌄'; position: absolute; top: 50%; right: 15px; color: #858f9f; font-size: 16px; transform: translateY(-50%); transition: transform .15s; }
|
||||
.ranking-card[open] summary::after { transform: translateY(-50%) rotate(180deg); }
|
||||
.rank-number { display: grid; place-items: center; width: 48px; height: 34px; border-radius: 8px; color: #171019; background: #ed8bb5; font-size: 12px; font-weight: 900; }
|
||||
.rank-number { display: grid; place-items: center; width: 48px; height: 34px; border-radius: 8px; color: #171019; background: #ed8bb5; font-size: 14px; font-weight: 900; }
|
||||
.rank-members { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; color: #dce1e8; font-size: 13px; font-weight: 800; line-height: 1.55; }
|
||||
.rank-members > span { white-space: nowrap; }
|
||||
.rank-members > i { flex: 0 0 auto; color: #596270; font-style: normal; }
|
||||
.rank-members .added-member { color: #f3a5c6; }
|
||||
.rank-metric { display: grid; gap: 4px; }
|
||||
.rank-metric small { color: #9ca5b3; font-size: 11px; font-style: normal; font-weight: 750; }
|
||||
.rank-metric small { color: #9ca5b3; font-size: 13px; font-style: normal; font-weight: 750; }
|
||||
.rank-metric strong { color: #f0a0c2; font-size: 18px; line-height: 1.2; }
|
||||
.rank-metric i { color: #90d8ae; font-size: 10px; font-style: normal; font-weight: 800; }
|
||||
.rank-metric i { color: #90d8ae; font-size: 12px; font-style: normal; font-weight: 800; }
|
||||
.ranking-detail { padding: 0 16px 18px; border-top: 1px solid #2b313c; }
|
||||
.scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
|
||||
.scores div { display: grid; gap: 7px; padding: 15px; border-radius: 10px; background: #22202a; }
|
||||
.scores span { color: #a9b1be; font-size: 12px; }
|
||||
.scores span { color: #a9b1be; font-size: 14px; }
|
||||
.scores strong { color: #f2a3c4; font-size: 19px; }
|
||||
.baseline-scores { margin-top: 10px; }
|
||||
.empty { display: grid; place-items: center; min-height: 150px; margin-top: 18px; padding: 28px; border: 1px dashed #303744; border-radius: 12px; color: #858f9f; font-size: 12px; text-align: center; }
|
||||
.empty { display: grid; place-items: center; min-height: 150px; margin-top: 18px; padding: 28px; border: 1px dashed #303744; border-radius: 12px; color: #858f9f; font-size: 14px; text-align: center; }
|
||||
@media (max-width: 1100px) {
|
||||
.fixed-column-headings,
|
||||
.fixed-field { grid-template-columns: minmax(0, 1fr) 120px 304px 180px; }
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
main { width: calc(100% - 24px); padding-top: 28px; }
|
||||
.panel { padding: 17px; }
|
||||
|
||||
Reference in New Issue
Block a user