fix(ui): pin red drag trash zone

main
AlexsandrSnytkin 14 hours ago
parent 65ab5eefda
commit 551ae2fe2a

@ -1350,9 +1350,9 @@ HTML = """<!doctype html>
.config-block .packet-field-row { grid-template-columns: 52px minmax(0, 1fr) 28px; } .config-block .packet-field-row { grid-template-columns: 52px minmax(0, 1fr) 28px; }
.config-block .packet-field-row .packet-field-range { grid-column: 1 / 3; } .config-block .packet-field-row .packet-field-range { grid-column: 1 / 3; }
} }
.config-trash { position: fixed; left: 50%; bottom: 16px; z-index: 1200; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); border-radius: 12px; background: color-mix(in srgb, var(--ui-panel) 94%, var(--ui-accent)); color: var(--ui-muted); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); font-size: 11px; opacity: .96; transform: translate(-50%, 12px) scale(.96); animation: trash-in .18s ease both; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; pointer-events: auto; } .config-trash { position: fixed !important; left: 50% !important; bottom: 16px !important; z-index: 1200; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 9px 16px 9px 11px; border: 1px solid #ff6b81; border-radius: 14px; background: linear-gradient(135deg, #4b1020, #9e2948); color: #fff3f5; box-shadow: 0 10px 30px rgba(102, 12, 35, .35), 0 0 0 4px rgba(255, 93, 119, .1); font-size: 11px; font-weight: 800; letter-spacing: .02em; opacity: .98; transform: translate(-50%, 12px) scale(.96); animation: trash-in .18s ease both; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; pointer-events: auto; }
.config-trash.is-over { color: #fff; border-color: #ff6b81; background: #b52d4c; box-shadow: 0 10px 28px rgba(181, 45, 76, .28); transform: translate(-50%, 0) scale(1.03); } .config-trash.is-over { color: #fff; border-color: #ffb2c0; background: linear-gradient(135deg, #9e2948, #d94062); box-shadow: 0 12px 34px rgba(181, 45, 76, .42), 0 0 0 5px rgba(255, 107, 129, .2); transform: translate(-50%, 0) scale(1.04); }
.config-trash-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 7px; font-size: 15px; line-height: 1; } .config-trash-icon { display: block; flex: 0 0 auto; width: 27px; height: 27px; color: currentColor; }
.config-trash:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; } .config-trash:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.config-block-hidden, .config-block-deleted { display: none !important; } .config-block-hidden, .config-block-deleted { display: none !important; }
@media (max-width: 760px) { @media (max-width: 760px) {
@ -1815,10 +1815,6 @@ HTML = """<!doctype html>
</details> </details>
</form> </form>
</div> </div>
<div id="configTrash" class="config-trash" role="button" tabindex="0" aria-label="Перетащите блок сюда для удаления" hidden>
<span class="config-trash-icon" aria-hidden="true"></span>
<span>отпустите здесь, чтобы удалить блок</span>
</div>
</section> </section>
</div> </div>
<div id="modelTab" class="tab-page model-tab" hidden> <div id="modelTab" class="tab-page model-tab" hidden>
@ -1877,10 +1873,6 @@ HTML = """<!doctype html>
</section> </section>
</div> </div>
</div> </div>
<div id="networkTrash" class="config-trash network-trash" role="button" tabindex="0" aria-label="Перетащите сетевой блок сюда для удаления" hidden>
<span class="config-trash-icon" aria-hidden="true"></span>
<span>отпустите здесь, чтобы удалить блок</span>
</div>
</section> </section>
</div> </div>
<div id="archiveTab" class="tab-page archive-tab" hidden> <div id="archiveTab" class="tab-page archive-tab" hidden>
@ -1899,6 +1891,14 @@ HTML = """<!doctype html>
</section> </section>
</div> </div>
</main> </main>
<div id="configTrash" class="config-trash" role="button" tabindex="0" aria-label="Перетащите блок сюда для удаления" hidden>
<svg class="config-trash-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7h14M9 7V4h6v3m-8 0 1 13h6l1-13M10 10v7m4-7v7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>отпустите здесь, чтобы удалить блок</span>
</div>
<div id="networkTrash" class="config-trash network-trash" role="button" tabindex="0" aria-label="Перетащите сетевой блок сюда для удаления" hidden>
<svg class="config-trash-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7h14M9 7V4h6v3m-8 0 1 13h6l1-13M10 10v7m4-7v7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span>отпустите здесь, чтобы удалить блок</span>
</div>
<div id="logDrawer" class="log-drawer" hidden> <div id="logDrawer" class="log-drawer" hidden>
<div class="log-head"> <div class="log-head">
<span>Логи</span> <span>Логи</span>

Loading…
Cancel
Save