layout update

This commit is contained in:
2026-06-16 15:07:16 +09:00
parent d09946161f
commit 36f0c25721
2 changed files with 310 additions and 176 deletions

View File

@@ -29,8 +29,8 @@
class="slider"
style="transform: translateX({screen === 'worldmap' ? 0 : 100}%);"
></div>
<button onclick={() => onNavigate('worldmap')}>Worldmap</button>
<button onclick={() => onNavigate('timeline')}>Timeline</button>
<button class:active={screen === 'worldmap'} onclick={() => onNavigate('worldmap')}>Worldmap</button>
<button class:active={screen === 'timeline'} onclick={() => onNavigate('timeline')}>Timeline</button>
</div>
</div>
@@ -103,18 +103,18 @@
display: flex;
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 8px;
padding: 3px;
border-radius: 9999px;
padding: 4px;
}
.slider {
position: absolute;
top: 3px;
left: 3px;
width: calc(50% - 3px);
height: calc(100% - 6px);
background: var(--bg);
border-radius: 6px;
top: 4px;
left: 4px;
width: calc(50% - 4px);
height: calc(100% - 8px);
background: var(--accent);
border-radius: 9999px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
transition: transform 0.25s ease;
pointer-events: none;
@@ -124,15 +124,20 @@
position: relative;
z-index: 1;
flex: 1;
padding: 4px 18px;
padding: 6px 24px;
border: none;
background: none;
cursor: pointer;
font-family: var(--sans);
font-size: 13px;
font-size: 14px;
font-weight: 300;
color: var(--text);
letter-spacing: 0.01em;
transition: color 0.2s ease;
}
.segmented button.active {
color: #fff;
}
.right {
display: flex;