rickub
hlassiege/darylpublic Fork
⑂ 4114666
Branches
main View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/hlassiege/daryl.git
git clone ssh://git@rickub.com/hlassiege/daryl.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

Download ZIP

fix(montage): stop the color input style from shrinking transition pickers

The inspector's scoped .picker rule (meant for the text color input) also
matched the root of TransitionPicker, squeezing it to 26px: the label wrapped
one word per line and the button overflowed out of view.
hlassiege committed 2026-10-24T18:44:13+02:00 Browse files
4114666 parent: c57e0c2
modified web/src/project/steps/montage/Inspector.vue +2 -2
@@ -256,7 +256,7 @@ const SOUND_ROLES = computed(() => [["sfx", tr("editing.inspector.sound")], ["mu
256256 <div class="row">
257257 <button v-for="c in TEXT_COLORS" :key="c" class="swatch" :class="{ on: (item.data as TextNote).color === c }" :style="{ background: c }"
258258 :title="c" @click="set<TextNote>((x) => { x.color = c; })" />
259- <input type="color" class="picker" :value="(item.data as TextNote).color" :title="tr('editing.inspector.textColor')"
259+ <input type="color" class="color-picker" :value="(item.data as TextNote).color" :title="tr('editing.inspector.textColor')"
260260 @input="set<TextNote>((x) => { x.color = ($event.target as HTMLInputElement).value.toUpperCase(); })">
261261 <span class="spacer" />
262262 <button class="link-btn" @click="set<TextNote>((x) => { x.x = 0.5; x.y = 0.8; })">{{ tr("editing.inspector.textReset") }}</button>
@@ -333,7 +333,7 @@ fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: c
333333 .input.area { height: auto; padding: 8px 10px; resize: vertical; font-family: inherit; line-height: 1.4; }
334334 .swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer; padding: 0; }
335335 .swatch.on { outline: 2px solid var(--ink); outline-offset: 1px; }
336-.picker { width: 26px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }
336+.color-picker { width: 26px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }
337337 .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
338338 .actions .link-btn { font-size: 12.5px; }
339339 .hint { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
@@ -256,7 +256,7 @@ const SOUND_ROLES = computed(() => [["sfx", tr("editing.inspector.sound")], ["mu
256 <div class="row">256 <div class="row">
257 <button v-for="c in TEXT_COLORS" :key="c" class="swatch" :class="{ on: (item.data as TextNote).color === c }" :style="{ background: c }"257 <button v-for="c in TEXT_COLORS" :key="c" class="swatch" :class="{ on: (item.data as TextNote).color === c }" :style="{ background: c }"
258 :title="c" @click="set<TextNote>((x) => { x.color = c; })" />258 :title="c" @click="set<TextNote>((x) => { x.color = c; })" />
259- <input type="color" class="picker" :value="(item.data as TextNote).color" :title="tr('editing.inspector.textColor')"259+ <input type="color" class="color-picker" :value="(item.data as TextNote).color" :title="tr('editing.inspector.textColor')"
260 @input="set<TextNote>((x) => { x.color = ($event.target as HTMLInputElement).value.toUpperCase(); })">260 @input="set<TextNote>((x) => { x.color = ($event.target as HTMLInputElement).value.toUpperCase(); })">
261 <span class="spacer" />261 <span class="spacer" />
262 <button class="link-btn" @click="set<TextNote>((x) => { x.x = 0.5; x.y = 0.8; })">{{ tr("editing.inspector.textReset") }}</button>262 <button class="link-btn" @click="set<TextNote>((x) => { x.x = 0.5; x.y = 0.8; })">{{ tr("editing.inspector.textReset") }}</button>
@@ -333,7 +333,7 @@ fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: c
333 .input.area { height: auto; padding: 8px 10px; resize: vertical; font-family: inherit; line-height: 1.4; }333 .input.area { height: auto; padding: 8px 10px; resize: vertical; font-family: inherit; line-height: 1.4; }
334 .swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer; padding: 0; }334 .swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer; padding: 0; }
335 .swatch.on { outline: 2px solid var(--ink); outline-offset: 1px; }335 .swatch.on { outline: 2px solid var(--ink); outline-offset: 1px; }
336-.picker { width: 26px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }336+.color-picker { width: 26px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }
337 .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }337 .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
338 .actions .link-btn { font-size: 12.5px; }338 .actions .link-btn { font-size: 12.5px; }
339 .hint { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.5; }339 .hint { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.5; }