Creepso/Wplace-Overlay-Pro
1
0
Fork 0
mirror of https://github.com/ShinkoNet/Wplace-Overlay-Pro.git synced 2026-01-11 22:40:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #3 from Basinity/UI-OverlayList-Resize

Browse source 
Overlay List Resizable in UI
This commit is contained in:
ShinkoNet 2025-08-18 19:49:58 +10:00 committed by GitHub
commit 7c02beed51
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/ui/panel.ts
View file

@ -92,7 +92,7 @@ export function createUI() {
</div>
</div>
<div class="op-section">
<div class="op-section resizable">
<div class="op-section-title">
<div class="op-title-left">
<span class="op-title-text">Overlays</span>

5
src/ui/styles.ts
View file

@ -32,6 +32,8 @@ export function injectStyles() {
border-radius: 16px; color: var(--op-text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px; width: 340px; box-shadow: 0 10px 24px rgba(16,24,40,0.12), 0 2px 6px rgba(16,24,40,0.08); user-select: none;
}
#op-list-wrap { flex: 1; display: flex; height: 80%; }
.op-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--op-border); border-radius: 16px 16px 0 0; cursor: grab; }
.op-header:active { cursor: grabbing; }
@ -42,6 +44,7 @@ export function injectStyles() {
.op-content { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.op-section { display: flex; flex-direction: column; gap: 8px; background: var(--op-subtle); border: 1px solid var(--op-border); border-radius: 12px; padding: 5px; }
.op-section.resizable { display: flex; flex-direction: column; height: 300px; resize: vertical; overflow: hidden }
.op-section-title { display: flex; align-items: center; justify-content: space-between; }
.op-title-text { font-weight: 600; }
@ -63,7 +66,7 @@ export function injectStyles() {
.op-input, .op-select { background: var(--op-bg); border: 1px solid var(--op-border); color: var(--op-text); border-radius: 10px; padding: 6px 8px; }
.op-slider { width: 100%; }
.op-list { display: flex; flex-direction: column; gap: 6px; max-height: 140px; overflow: auto; border: 1px solid var(--op-border); padding: 6px; border-radius: 10px; background: var(--op-bg); }
.op-list { display: flex; flex-direction: column; gap: 6px; height: 100%; overflow: auto; border: 1px solid var(--op-border); padding: 6px; border-radius: 10px; background: var(--op-bg); }
.op-item { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 8px; border: 1px solid var(--op-border); background: var(--op-subtle); }
.op-item.active { outline: 2px solid color-mix(in oklab, var(--op-accent) 35%, transparent); background: var(--op-bg); }