cleanup: .cutter-info + .timeline-container .shown modifiers — 4 inline display references gone
Both the cutter-info bar (resolution/duration/fps/selection readouts) and the timeline-container (timeline + start/end inputs) were hidden by default via inline style="display:none;" in HTML, then loadCutterFromPath() set .style.display = 'flex' / 'block' once a video was loaded.
Moved both into CSS with the same pattern as 4.6.126 (.queue-details.expanded) and 4.6.132 (.clip-template-wrap.shown):
- Base .cutter-info / .timeline-container rule sets display:none
- .shown modifier flips to flex / block respectively (preserves the original visible-state layout)
- HTML drops the inline style attribute
- JS uses classList.add('shown') instead of poking at .style.display
Four inline-style references gone (2 HTML + 2 TS), no behavior change.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
5e383a6e12
commit
5473a852ee
@ -334,7 +334,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cutter-info" id="cutterInfo" style="display:none">
|
<div class="cutter-info" id="cutterInfo">
|
||||||
<div class="cutter-info-item">
|
<div class="cutter-info-item">
|
||||||
<span class="cutter-info-label" id="cutterInfoDurationLabel">Dauer</span>
|
<span class="cutter-info-label" id="cutterInfoDurationLabel">Dauer</span>
|
||||||
<span class="cutter-info-value" id="infoDuration">--:--:--</span>
|
<span class="cutter-info-value" id="infoDuration">--:--:--</span>
|
||||||
@ -353,7 +353,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="timeline-container" id="timelineContainer" style="display:none">
|
<div class="timeline-container" id="timelineContainer">
|
||||||
<div class="timeline" id="timeline" onclick="seekTimeline(event)">
|
<div class="timeline" id="timeline" onclick="seekTimeline(event)">
|
||||||
<div class="timeline-selection" id="timelineSelection"></div>
|
<div class="timeline-selection" id="timelineSelection"></div>
|
||||||
<div class="timeline-current" id="timelineCurrent"></div>
|
<div class="timeline-current" id="timelineCurrent"></div>
|
||||||
|
|||||||
@ -1469,8 +1469,8 @@ async function loadCutterFromPath(filePath: string): Promise<void> {
|
|||||||
cutterStartTime = 0;
|
cutterStartTime = 0;
|
||||||
cutterEndTime = info.duration;
|
cutterEndTime = info.duration;
|
||||||
|
|
||||||
byId('cutterInfo').style.display = 'flex';
|
byId('cutterInfo').classList.add('shown');
|
||||||
byId('timelineContainer').style.display = 'block';
|
byId('timelineContainer').classList.add('shown');
|
||||||
byId('btnCut').disabled = false;
|
byId('btnCut').disabled = false;
|
||||||
|
|
||||||
byId('infoDuration').textContent = formatTime(info.duration);
|
byId('infoDuration').textContent = formatTime(info.duration);
|
||||||
|
|||||||
@ -2943,12 +2943,17 @@ select option {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.timeline-container {
|
.timeline-container {
|
||||||
|
display: none;
|
||||||
background: var(--bg-card);
|
background: var(--bg-card);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.timeline-container.shown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.timeline {
|
.timeline {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
@ -3027,15 +3032,19 @@ select option {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cutter-info {
|
.cutter-info {
|
||||||
|
display: none;
|
||||||
background: var(--bg-card);
|
background: var(--bg-card);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 15px 20px;
|
padding: 15px 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cutter-info.shown {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.cutter-info-item {
|
.cutter-info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user