/* Pixel mode (the pixel-art editor). Every rule here is scoped to #pixel, and the first rule resets whatever the app's own styles (app.css) would set inside it, so the two never bleed into each other. SVG is left alone so icons keep their presentation attributes. */ /* An overlay over the app (which stays laid out underneath): switching modes then restyles only this box, not the whole app chrome that display:none would throw away. */ #pixel { position: fixed; inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); z-index: 70; display: flex; flex-direction: column; } #pixel[hidden] { display: none !important; } /* Loaded but out of Pixel mode: kept painted on its own layer, invisible, behind the app (which takes every touch). Switching is then a compositor-only change: no restyle, relayout or repaint. */ #pixel { will-change: opacity; } #pixel.parked { z-index: -1; opacity: 0; } #pixel :where(*:not(svg, svg *)) { all: revert; } /* :where keeps it below every Pixel rule */ #pixel{ --bg:#1b1d23; --panel:#23262e; --panel2:#2b2f39; --line:#3a3f4b; --text:#e6e8ee; --muted:#9aa1b1; --accent:#5b8cff; --accent2:#3a6bff; --danger:#e0556a; --ok:#46c07a; /* every other theme value the app changes on (Paper mode), set here too: then a theme switch leaves this box's computed style unchanged and its ~1000 nodes are never restyled */ --stage:#15171c; --panel3:#343945; --accent-ink:#fff; --shadow:0 8px 24px rgba(0,0,0,.4); color-scheme:dark; } #pixel, #pixel *{box-sizing:border-box;} #pixel{ background:var(--bg); color:var(--text); font:13px/1.45 'Pixelify Sans','Segoe UI',system-ui,Roboto,Arial,sans-serif; overflow:hidden; user-select:none; overscroll-behavior:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } #pixel #pxApp{display:flex; flex-direction:column; flex:1; min-height:0;} /* ---- top bar ---- */ #pixel .topbar{ display:flex; align-items:center; gap:7px 11px; flex-wrap:wrap; padding:7px 12px; background:var(--panel); border-bottom:1px solid var(--line); position:relative; z-index:3; /* chrome always paints above the positioned canvas area */ } #pixel .brand{font-weight:700; letter-spacing:.3px; font-size:15px; white-space:nowrap;} #pixel .brand b{color:var(--accent);} /* fallback: the per-letter hues below normally win */ /* The wordmark wears the app icon: "Pixel" takes the brush handle's blues, "Paint" its bristle rainbow — a colour per letter, discrete rather than a gradient, and running left to right in the order the icon reads. */ #pixel .brand em, #pixel .brand b i{font-style:normal;} /* Handle blues, lit edge first. The handle's darkest tone (#2f5fd6) is left out: it manages only 2.7:1 against the top bar, where every step used here clears 4.5:1. The two blends fill the gaps between the handle's own three tones. */ #pixel .brand em:nth-of-type(1){color:#eaf4ff;} /* the handle's lit edge */ #pixel .brand em:nth-of-type(2){color:#cbe4ff;} #pixel .brand em:nth-of-type(3){color:#a8d5ff;} /* its light tone */ #pixel .brand em:nth-of-type(4){color:#7cb1fa;} #pixel .brand em:nth-of-type(5){color:#4f8cf5;} /* its blue */ /* Bristle rainbow. Orange is the one of the six left out: it sits closest to red, so dropping it costs the least separation between letters. */ #pixel .brand b i:nth-of-type(1){color:#a445ff;} #pixel .brand b i:nth-of-type(2){color:#3b7bff;} #pixel .brand b i:nth-of-type(3){color:#17c06b;} #pixel .brand b i:nth-of-type(4){color:#ffd23f;} #pixel .brand b i:nth-of-type(5){color:#ff3b47;} /* ---- light theme, shared with the main app (Settings ▸ View ▸ Light Theme) ---- */ body.light #pixel{--bg:#e9ebf0; --panel:#f7f8fa; --panel2:#eceef2; --line:#c9ced8; --text:#1b1d23; --muted:#5b6273; color-scheme:light;} body.light #pixel .brand em{color:#2f5fd6 !important;} /* ---- shared mode switch (mirrors the main app's top bar) ---- */ #pixel .mode-switch{display:flex; gap:2px; padding:2px; margin-left:auto; border:1px solid var(--line); border-radius:6px; background:var(--bg); flex:none;} #pixel .mode-btn{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:4px; color:var(--muted); text-decoration:none; white-space:nowrap;} #pixel .mode-btn:hover{color:var(--text); background:var(--panel2);} #pixel .mode-btn.on{background:var(--accent); color:#fff;} @media (max-width: 900px){ #pixel .mode-btn span{display:none;} } /* ---- tab bar ---- */ #pixel .tabbar{display:flex; align-items:flex-end; gap:4px; padding:6px 8px 0; background:var(--panel); border-bottom:1px solid var(--line); overflow-x:auto; overflow-y:hidden; flex:none; position:relative; z-index:3;} #pixel .tabs{display:flex; align-items:flex-end; gap:4px; min-width:0;} #pixel .tab{display:flex; align-items:center; gap:7px; max-width:170px; padding:7px 8px 7px 12px; background:var(--panel2); border:1px solid var(--line); border-bottom:none; border-radius:8px 8px 0 0; cursor:pointer; color:var(--muted); white-space:nowrap; font-size:12.5px;} #pixel .tab:hover{background:#323744; color:var(--text);} #pixel .tab.active{background:var(--bg); color:var(--text);} #pixel .tab .tname{overflow:hidden; text-overflow:ellipsis; max-width:128px;} #pixel .tab .tclose{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:5px; opacity:.65; flex:none;} #pixel .tab .tclose:hover{background:var(--danger); color:#fff; opacity:1;} #pixel .tab-add{align-self:center; min-height:30px; margin-bottom:5px; flex:none;} /* ---- timeline (frames / playback / tags) ---- */ /* position+z-index so the timeline always wins against the canvas area, which is itself positioned (see .stage) — without this the stage paints straight over these controls. */ #pixel .timeline{flex:none; background:var(--panel); border-top:1px solid var(--line); display:flex; flex-direction:column; max-height:214px; position:relative; z-index:2;} #pixel .tl-bar{display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--line); flex-wrap:wrap; flex:none;} #pixel #tlSummary{display:none; color:var(--muted); font-size:12px; cursor:pointer; white-space:nowrap;} #pixel #tlSummary:hover{color:var(--text);} #pixel .timeline.collapsed .tl-frames{display:none;} #pixel .timeline.collapsed .tl-bar{border-bottom:none;} #pixel .timeline.collapsed .tl-bar > *{display:none;} #pixel .timeline.collapsed .tl-bar > #tlCollapseBtn{display:inline-flex;} #pixel .timeline.collapsed .tl-bar > #tlSummary{display:inline-flex; align-items:center;} #pixel .tl-bar .vsep{width:1px; height:22px; background:var(--line);} #pixel .tl-bar .tl-grow{flex:1 1 12px;} /* transport cluster: first / prev / play / next / last, kept tight together */ #pixel .tl-transport{display:inline-flex; align-items:center; gap:2px;} #pixel .tl-transport .iconbtn{min-width:28px;} #pixel .tl-transport #playBtn{min-width:34px;} /* left-panel option buttons must not overflow the narrow tools rail */ #pixel #toolOpts button{max-width:100%; overflow:hidden;} #pixel #toolOpts button span{overflow:hidden; text-overflow:ellipsis;} /* ---- group tabs: pick which animation the strip shows / plays / exports ---- */ #pixel .tl-tabs{display:flex; align-items:center; gap:5px; padding:7px 10px 0; flex:none; overflow-x:auto; overflow-y:hidden;} #pixel .tl-tabs[hidden]{display:none;} #pixel .timeline.collapsed .tl-tabs{display:none;} #pixel .tl-tab{flex:none; gap:6px; height:28px; min-height:0; padding:0 10px; border-radius:8px; color:var(--muted); font-size:12.5px;} #pixel .tl-tab:hover{color:var(--text);} #pixel .tl-tab.active{background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600;} #pixel .tl-tab .dot{width:8px; height:8px; border-radius:50%; flex:none;} #pixel .tl-tab .n{font-size:10px; opacity:.75; font-variant-numeric:tabular-nums;} #pixel .tl-field{display:flex; align-items:center; gap:6px;} #pixel .tl-field .lbl{color:var(--muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;} #pixel .tl-field .muted{color:var(--muted);} #pixel .tl-field input[type=number]{width:60px;} #pixel #playBtn.playing{background:var(--accent2); border-color:var(--accent2);} /* ---- frame groups: each tagged run of frames gets its own labelled block ---- */ /* flex:1+min-height:0 so a crowded control bar squeezes (and scrolls) the frames strip rather than the bar itself getting clipped by the timeline's max-height */ #pixel .tl-frames{display:flex; align-items:flex-start; gap:10px; padding:9px 10px; overflow:auto; flex:1 1 auto; min-height:0; position:relative;} /* the drop marker is positioned against this */ #pixel .tl-group{flex:none; display:flex; flex-direction:column; gap:5px; padding:5px 6px 6px; border:1px solid var(--line); border-radius:9px; background:#0000002e;} #pixel .tl-group.ungrouped{border-style:dashed;} #pixel .tl-group.ungrouped .tl-ghead .gname{color:var(--muted); font-weight:500;} #pixel .tl-ghead{display:flex; align-items:center; gap:5px; font-size:11px; line-height:1;} #pixel .tl-ghead .dot{width:8px; height:8px; border-radius:50%; flex:none;} #pixel .tl-ghead .gname{font-weight:600; max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;} #pixel .tl-ghead .gname:hover{color:var(--accent);} #pixel .tl-ghead .gcount{color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums;} #pixel .tl-ghead .gsp{flex:1; min-width:8px;} #pixel .tl-ghead button{min-height:0; height:20px; min-width:20px; padding:0; border-radius:5px;} #pixel .tl-gframes{display:flex; align-items:flex-start; gap:7px;} #pixel .tl-frame{position:relative; flex:none; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px; border:2px solid var(--line); border-radius:8px; background:var(--panel2); cursor:pointer;} #pixel .tl-frame:hover{border-color:#56607a;} #pixel .tl-frame.active{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;} /* the number doubles as the drag grip. touch-action:none only here, so dragging the thumbnail still scrolls the strip on a phone — losing that would make a long strip painful to get around */ #pixel .tl-frame .tl-num{font-size:10px; color:var(--muted); line-height:1; cursor:grab; padding:1px 7px; border-radius:4px; touch-action:none;} #pixel .tl-frame .tl-num:hover{background:#ffffff18; color:var(--text);} #pixel .tl-frame.drag-src{opacity:.32;} #pixel .tl-drop{position:absolute; width:3px; border-radius:2px; background:var(--accent); box-shadow:0 0 7px var(--accent); pointer-events:none; z-index:4;} #pixel .tl-frame .tl-thumb{image-rendering:pixelated; display:block; border:1px solid #0006; background:repeating-conic-gradient(#b3b3b3 0% 25%, #7f7f7f 0% 50%) 0 0 / 10px 10px;} #pixel .tl-frame .tl-x{position:absolute; top:-7px; right:-7px; width:16px; height:16px; border-radius:50%; background:var(--panel); border:1px solid var(--line); align-items:center; justify-content:center; color:var(--muted); display:none;} #pixel .tl-frame:hover .tl-x{display:inline-flex;} #pixel .tl-frame .tl-x:hover{background:var(--danger); color:#fff; border-color:var(--danger);} /* ---- timeline grid: layers (rows) × frames (columns), tags as bars on top (Aseprite-style) ---- */ #pixel #tlFrames.tl-grid{display:block; padding:0; overflow:auto;} #pixel .tlg{ --tlg-cw:30px; --tlg-lh:134px; --tlg-rh:25px; display:grid; align-content:start; grid-auto-rows:var(--tlg-rh); font-size:11px; width:max-content; min-width:100%;} /* min-width:0 keeps these column-1 items inside their fixed track — grid items default to min-width:auto, which let the corner balloon past the layer column and cover the tag bar */ #pixel .tlg-corner{position:sticky; left:0; z-index:4; min-width:0; overflow:hidden; background:var(--panel); border-right:1px solid var(--line);} #pixel .tlg-corner.tools{width:var(--tlg-lh); box-sizing:border-box; display:flex; align-items:center; padding:0 5px; border-bottom:1px solid var(--line);} #pixel .tlg-ltools{display:flex; gap:3px; width:100%; min-width:0;} #pixel .tlg-ltools .iconbtn{min-width:0; flex:1 1 0; width:0; height:21px; min-height:21px; padding:0; border-radius:3px; box-shadow:none;} #pixel .tlg-ltools .iconbtn.danger-h:hover{background:var(--danger); border-color:var(--danger); color:#fff;} /* tag bars sit in the top row, each spanning its frame columns */ #pixel .tlg-tagcell{display:flex; align-items:center; padding:0 1px;} #pixel .tlg-tag{height:17px; width:100%; border-radius:3px; display:flex; align-items:center; justify-content:center; padding:0 6px; font-size:10px; font-weight:600; color:#fff; overflow:hidden; white-space:nowrap; cursor:pointer; box-shadow:inset 0 0 0 1px #0005; text-shadow:0 1px 1px #0006;} #pixel .tlg-tag.sel{outline:2px solid #ffffffcc; outline-offset:-2px;} /* frame number header cells (also the drag grip to reorder) */ #pixel .tlg-num{height:var(--tlg-rh); display:flex; align-items:center; justify-content:center; color:var(--muted); font-variant-numeric:tabular-nums; border-bottom:1px solid var(--line); border-left:1px solid #ffffff0d; cursor:grab; position:sticky; top:0; background:var(--panel); z-index:2; touch-action:none;} #pixel .tlg-num:hover{color:var(--text); background:#2b2f39;} #pixel .tlg-num .tlg-del{position:absolute; top:0; right:0; width:14px; height:14px; display:none; align-items:center; justify-content:center; color:var(--muted); background:#0007; border-bottom-left-radius:3px;} #pixel .tlg-num:hover .tlg-del{display:flex;} #pixel .tlg-num .tlg-del:hover{background:var(--danger); color:#fff;} #pixel .tlg-num.inview{color:var(--text);} #pixel .tlg-num.here{color:#fff; background:var(--accent2);} #pixel .tlg-num.drag-src{opacity:.35;} /* layer header cells down the left, sticky so they stay while frames scroll */ #pixel .tlg-lhead{position:sticky; left:0; z-index:3; min-width:0; display:flex; align-items:center; gap:5px; height:var(--tlg-rh); padding:0 6px; background:var(--panel2); border-right:1px solid var(--line); border-bottom:1px solid #ffffff0d; cursor:pointer;} #pixel .tlg-lhead:hover{background:#30343f;} #pixel .tlg-lhead.active{background:#2b3f6b; box-shadow:inset 3px 0 0 var(--accent);} #pixel .tlg-lhead .eye{width:17px; flex:none; display:inline-flex; opacity:.9; cursor:pointer; color:var(--text);} #pixel .tlg-lhead .eye.off{opacity:.32;} #pixel .tlg-lhead .eye:hover{color:var(--accent);} #pixel .tlg-lhead .lock{width:14px; flex:none; display:inline-flex; opacity:.3; cursor:pointer;} #pixel .tlg-lhead .lock.on{opacity:1; color:var(--accent);} #pixel .tlg-lhead .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* the cel cells */ #pixel .tlg-cell{height:var(--tlg-rh); border-bottom:1px solid #ffffff0d; border-left:1px solid #ffffff0d; display:flex; align-items:center; justify-content:center; cursor:pointer;} #pixel .tlg-cell.col, #pixel .tlg-cell.rowsel{background:#ffffff09;} #pixel .tlg-cell.inview{background:#5b8cff12;} #pixel .tlg-cell:hover{background:#ffffff17;} #pixel .tlg-cell.here{background:#2b3f6b; box-shadow:inset 0 0 0 1px var(--accent);} #pixel .tlg-dot{width:9px; height:9px; border-radius:50%;} #pixel .tlg-dot.full{background:#cfd6e6; box-shadow:0 0 0 1px #0007;} #pixel .tlg-dot.empty{box-shadow:inset 0 0 0 1px #ffffff26;} #pixel .tlg-drop{position:absolute; width:3px; border-radius:2px; background:var(--accent); box-shadow:0 0 7px var(--accent); pointer-events:none; z-index:6;} /* ---- tilesheet panel ---- */ #pixel .ts-sum{color:var(--muted); font-size:11.5px; margin:0 0 5px;} #pixel .ts-pick{display:flex; align-items:center; gap:6px; color:var(--accent); font-size:12px; font-weight:600; margin:0 0 9px; overflow:hidden;} #pixel .ts-pick span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #pixel .ts-pick svg{flex:none; opacity:.85;} /* the four inserts sit where they act: row above on top, columns either side, row below beneath */ #pixel .ts-pad{display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"up up" "left right" "down down"; gap:6px; margin-top:9px;} #pixel .ts-pad .ts-up{grid-area:up;} #pixel .ts-pad .ts-left{grid-area:left;} #pixel .ts-pad .ts-right{grid-area:right;} #pixel .ts-pad .ts-down{grid-area:down;} #pixel .ts-pad button{font-size:11px; color:var(--muted);} #pixel .ts-pad button:not(:disabled):hover{color:var(--text);} #pixel .ts-lb{font-size:11px;} #pixel button:disabled{opacity:.42; cursor:default;} #pixel button:disabled:hover{border-color:var(--line); background:var(--panel2);} /* ---- sub-canvas panel ---- */ #pixel .rg-row{display:flex; align-items:center; gap:6px; margin-bottom:8px;} #pixel .rg-row:last-child{margin-bottom:0;} #pixel .rg-lbl{color:var(--muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; width:34px; flex:none;} #pixel .rg-row input[type=number]{width:58px;} #pixel .rg-x{color:var(--muted);} #pixel .group{display:flex; align-items:center; gap:6px;} #pixel .sep{width:1px; height:24px; background:var(--line);} #pixel label.lbl{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px;} #pixel button, #pixel select, #pixel input{font:inherit; color:var(--text);} #pixel button{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:0 12px; min-height:32px; cursor:pointer; transition:.08s; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-weight:500; } #pixel button svg{flex:none;} #pixel .iconbtn{padding:0; min-width:32px;} /* square icon-only buttons (zoom, brush +/-) */ #pixel button:hover{border-color:var(--accent); background:#323744;} #pixel button:active{transform:translateY(1px);} #pixel button.primary{background:var(--accent2); border-color:var(--accent2);} #pixel button.primary:hover{background:var(--accent);} #pixel select, #pixel input[type=number], #pixel input[type=text]{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:0 9px; height:32px; } #pixel select:hover, #pixel input[type=text]:hover, #pixel input[type=number]:hover{border-color:#4c5366;} #pixel input[type=number]{width:54px;} /* ---- main ---- */ #pixel .main{flex:1; display:flex; min-height:0;} #pixel .tools{ width:156px; flex:none; background:var(--panel); border-right:1px solid var(--line); padding:10px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; overflow-x:hidden; position:relative; z-index:1; } #pixel .tools .group{max-width:100%;} #pixel .tool{ display:flex; align-items:center; justify-content:flex-start; gap:8px; text-align:left; width:100%; } #pixel .tool.active{background:var(--accent2); border-color:var(--accent2);} #pixel .tool::after{ content:attr(data-key); margin-left:auto; font-size:10px; font-weight:700; color:var(--muted); background:#1a1d24; border:1px solid var(--line); border-radius:4px; padding:1px 5px; line-height:1.45; } #pixel .tool.active::after{color:#fff; border-color:#ffffff55; background:#ffffff22;} #pixel .toolhead{color:var(--muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; margin:9px 2px 2px; display:flex; align-items:center; gap:5px;} #pixel .toolhead svg{opacity:.8;} /* these are 10px eyebrow labels — the icon stays subordinate */ #pixel .toolhead:first-child{margin-top:0;} /* z-index:0 makes the stage a stacking context, so #placeOverlay (20) and .place-bar (30) stay *inside* the canvas area instead of floating over the timeline / side panel / status bar. */ #pixel .stage{ flex:1; min-width:0; min-height:0; overflow:auto; display:flex; padding:24px; position:relative; z-index:0; background: radial-gradient(circle at 50% 0%, #20232b, var(--bg)); } /* Centred with auto margins instead of align-items/justify-content:center. Flex *centring* makes overflow above/left of the box unreachable, so you could never scroll to the top-left of a canvas zoomed bigger than the stage; auto margins collapse to 0 when space runs out. */ #pixel .stage > .canvas-wrap{margin:auto; flex:none;} #pixel .stage.dragging{outline:3px dashed var(--accent); outline-offset:-12px; background:#222838;} #pixel .stage.panning{cursor:grabbing;} /* the canvas itself is set from JS — a child cursor wins */ #pixel .place-bar{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:30; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:7px 9px; box-shadow:0 12px 34px #000a; /* An absolute box with left:50% and no right shrinks to fit *half* the stage, so the bar was capped at 505px on a 1010px stage: past that, flex squeezed the readout to 35px and wrapped its text over three lines. max-content takes the width the buttons actually need, and the wrap keeps it in tidy rows when the stage really is too narrow for one. */ width:max-content; max-width:calc(100% - 28px); } #pixel .place-bar[hidden]{display:none;} /* The bar floats over the stage at z-index 30, so anything it covers can't be grabbed — including the handles of a box near the top of the canvas. It moves out of their way (see positionPlaceBar) rather than quietly eating the clicks. */ #pixel .place-bar.low{top:auto; bottom:14px;} #pixel .place-bar .info{color:var(--muted); font-size:12px; margin:0 4px; display:flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; white-space:nowrap;} #pixel .place-bar .info svg{color:var(--accent);} /* a pressed-in look for the toggles in this bar, distinct from .primary's call to action */ #pixel .place-bar button.on{background:#2b3f6b; border-color:var(--accent2); color:#dce6ff;} #pixel .place-bar button.on svg{color:var(--accent);} #pixel .canvas-wrap{ box-shadow:0 8px 30px #0008, 0 0 0 1px #0006; image-rendering:pixelated; background:repeating-conic-gradient(#b3b3b3 0% 25%, #7f7f7f 0% 50%) 0 0 / 20px 20px; } #pixel #pxView{display:block; image-rendering:pixelated; cursor:crosshair; touch-action:none;} /* full-stage overlay for placing/resizing a pasted image — lets handles live in the gray "no man's land" */ #pixel #placeOverlay{position:absolute; inset:0; z-index:20; pointer-events:none; touch-action:none;} #pixel #placeOverlay[hidden]{display:none;} #pixel #placeOverlay.active{pointer-events:auto;} #pixel .side{ width:252px; flex:none; background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; overflow-y:auto; position:relative; z-index:1; scrollbar-gutter:stable; /* reserve the scrollbar track so controls never sit under it */ } #pixel .section{padding:12px 14px; border-bottom:1px solid var(--line);} #pixel .section h3{margin:0 0 10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); display:flex; align-items:center; gap:7px;} /* flex so the header's icon rides the text's centre line */ /* Section headers pin to the top of the side panel while their body scrolls under them. Negative margins pull the sticky strip out to the section edges so nothing shows through beside it; the matching padding puts the text back where it was. */ @media (min-width: 769px){ #pixel .side .section > h3{position:sticky; top:0; z-index:5; background:var(--panel); margin:-12px -14px 9px; padding:12px 14px 9px;} #pixel .side .section.collapsed > h3.sec-h{margin-bottom:-12px;} } /* ---- desktop: fold a whole dock away (View menu) so the canvas can have the window ---- */ @media (min-width: 769px){ body.hide-tools #pixel #toolPanel{display:none;} body.hide-side #pixel #sidePanel{display:none;} body.hide-anim #pixel #pxTimeline{display:none;} } @media (max-width: 768px){ #pixel .dd-docks{display:none;} } /* on mobile these are already tabs */ /* ---- mobile: Color / Layers / Animation become tabs, and the strip pins to the top ---- */ #pixel .panel-tabs{display:none; gap:5px; padding:8px 10px; position:sticky; top:0; z-index:6; background:var(--panel); border-bottom:1px solid var(--line);} #pixel .panel-tabs .ptab{flex:1 1 0; min-width:0; gap:5px; height:36px; min-height:36px; padding:0 6px; border-radius:8px; font-size:12.5px; color:var(--muted);} #pixel .panel-tabs .ptab.active{background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600;} /* button{display:inline-flex} above is an author rule, so it beats the UA sheet's [hidden] — the Tiles tab has to be told to stay away while there's no grid */ #pixel .panel-tabs .ptab[hidden]{display:none;} #pixel .colorrow{display:flex; align-items:center; gap:10px;} #pixel .dualswatch{position:relative; width:66px; height:60px; flex:none;} #pixel .dualswatch .sw{position:absolute; width:34px; height:34px; border-radius:8px; border:2px solid #0007; box-shadow:0 1px 4px #0007; cursor:pointer;} #pixel #primarySwatch{left:0; top:0; z-index:2;} #pixel #secondarySwatch{right:0; bottom:0; z-index:1;} /* (32..66, 26..60) — clear of the swap button */ #pixel .dualswatch .sw.active{outline:2px solid var(--accent); outline-offset:1px; z-index:3;} #pixel .swap{position:absolute; right:0; top:0; z-index:4; width:22px; height:22px; min-width:0; min-height:0; padding:0; border-radius:6px;} #pixel .colorrow .col{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0;} #pixel .hexrow{display:flex; gap:6px; align-items:center;} #pixel .hexrow #hexInput{flex:1; min-width:0;} #pixel .hexrow .iconbtn{flex:none;} /* the docked picker sits under the swatch row */ /* Keep a usable, colour-bearing floor: in the docked side panel the flex column would otherwise squeeze the picker to a 2px sliver on short screens, which reads as a meaningless grey bar. */ #pixel #colorSection .cp-sv{margin-top:10px; height:150px; min-height:96px;} #pixel .recents{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; min-height:18px;} #pixel .recents .rc{width:18px; height:18px; border-radius:4px; border:1px solid #0006; cursor:pointer;} #pixel .palette{display:grid; grid-template-columns:repeat(auto-fill, minmax(22px,1fr)); gap:5px; margin-top:10px; max-height:176px; overflow:auto; padding:5px;} #pixel .palette .sw{width:100%; aspect-ratio:1; border-radius:5px; border:1px solid #0006; cursor:pointer; position:relative;} #pixel .palette .sw:hover{outline:2px solid var(--accent); outline-offset:1px; z-index:1;} /* ---- editable (user-owned) palettes: per-swatch remove badge ---- */ #pixel .palette.editable .sw .swx{ position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:50%; background:var(--panel); border:1px solid var(--line); color:var(--muted); display:none; align-items:center; justify-content:center; z-index:2; } #pixel .palette.editable .sw:hover .swx{display:inline-flex;} #pixel .palette.editable .sw .swx:hover{background:var(--danger); border-color:var(--danger); color:#fff;} #pixel .palette .pal-empty{grid-column:1/-1; color:var(--muted); font-size:11px; line-height:1.5; padding:4px 2px;} /* ---- themed color picker (replaces the off-theme OS dialog) ---- */ #pixel .cp-swatch{ height:32px; width:100%; padding:0; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#000; min-height:32px; } #pixel .cp-swatch:hover{border-color:var(--accent);} #pixel .cp-pop{ position:fixed; z-index:1300; width:238px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px; box-shadow:0 18px 50px #000c; animation:modalIn .12s ease; } #pixel .cp-pop[hidden]{display:none;} #pixel .cp-sv{position:relative; height:132px; border-radius:8px; border:1px solid var(--line); cursor:crosshair; touch-action:none; margin-bottom:10px;} #pixel .cp-hue{position:relative; height:14px; min-height:14px; flex-shrink:0; border-radius:7px; border:1px solid var(--line); cursor:ew-resize; touch-action:none; margin-bottom:10px; background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);} #pixel .cp-dot{position:absolute; width:13px; height:13px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #0009, 0 1px 5px #000a; transform:translate(-50%,-50%); pointer-events:none;} #pixel .cp-hue .cp-dot{top:50%;} #pixel .cp-row{display:flex; align-items:center; gap:7px; margin-bottom:9px;} #pixel .cp-prev{width:32px; height:32px; flex:none; border-radius:7px; border:1px solid var(--line);} #pixel .cp-row input[type=text]{flex:1; min-width:0; text-transform:uppercase;} #pixel .cp-row button{min-width:34px; padding:0; flex:none;} #pixel .cp-rgb{display:flex; gap:6px; margin-bottom:10px;} #pixel .cp-rgb label{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;} #pixel .cp-rgb input{width:100%; text-align:center; padding:0 3px;} #pixel .layers{flex:1 0 auto; min-height:0; display:flex; flex-direction:column;} #pixel .layers .bar{display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap;} #pixel .layers .bar button{flex:1; min-width:34px;} #pixel .layerlist{flex:1; overflow:auto; padding:10px; min-height:150px; max-height:360px;} #pixel .layer{ display:flex; align-items:center; gap:9px; padding:8px 9px; border:1px solid var(--line); border-radius:9px; margin-bottom:7px; background:var(--panel2); cursor:pointer; } #pixel .layer.active{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;} #pixel .layer .eye{width:24px; text-align:center; cursor:pointer; opacity:.9;} #pixel .layer .eye.off{opacity:.3;} #pixel .layer .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #pixel .layer .op{width:62px;} #pixel .layer .thumb{width:28px; height:28px; border-radius:4px; image-rendering:pixelated; background:repeating-conic-gradient(#b3b3b3 0% 25%, #7f7f7f 0% 50%) 0 0 / 8px 8px; border:1px solid #0006;} #pixel .statusbar{ display:flex; gap:18px; align-items:center; padding:5px 12px; background:var(--panel); border-top:1px solid var(--line); color:var(--muted); font-size:12px; position:relative; z-index:2; /* stay above the positioned canvas area */ } #pixel .statusbar .sp{flex:1;} #pixel .hint{color:var(--muted); font-size:10px; line-height:1.4; margin-top:auto; padding-top:8px;} #pixel input[type=range]{width:100%; accent-color:var(--accent);} #pixel .chk{display:flex; align-items:center; gap:6px; color:var(--muted); cursor:pointer; user-select:none;} /* ---- UI polish ---- */ #pixel, #pixel *{scrollbar-width:thin; scrollbar-color:#3a3f4b transparent;} #pixel ::-webkit-scrollbar{width:11px; height:11px;} #pixel ::-webkit-scrollbar-thumb{background:#3a3f4b; border:3px solid var(--panel); border-radius:8px;} #pixel ::-webkit-scrollbar-thumb:hover{background:#4c5366;} #pixel ::-webkit-scrollbar-track{background:transparent;} #pixel button, #pixel select, #pixel input, #pixel .layer, #pixel .recents .rc, #pixel .dualswatch .sw, #pixel .palette .sw{ transition:background .1s, border-color .1s, box-shadow .1s, transform .06s; } #pixel :focus-visible{outline:2px solid var(--accent); outline-offset:2px;} #pixel button:focus-visible, #pixel .tool:focus-visible{outline-offset:1px;} #pixel button:disabled, #pixel button[disabled]{opacity:.38; cursor:default; pointer-events:none; box-shadow:none;} #pixel button.primary{box-shadow:0 2px 10px -3px var(--accent2);} /* A destructive button is usually .primary too, and .primary owns the glow — so without this it lights up accent-blue under a red face. The compound selector wins whatever the source order. */ #pixel button.danger{background:var(--danger); border-color:var(--danger); color:#fff;} #pixel button.danger:hover{background:#ec6a7c; border-color:#ec6a7c;} #pixel button.danger, #pixel button.primary.danger{box-shadow:0 2px 10px -3px var(--danger);} #pixel .tool.active{box-shadow:0 3px 12px -3px var(--accent2);} #pixel .layer:hover{border-color:#56607a; background:#30343f;} #pixel .layer .eye{transition:color .1s, opacity .1s;} #pixel .layer .eye:hover{color:var(--accent);} #pixel .recents .rc:hover{transform:scale(1.15); outline:2px solid var(--accent); outline-offset:1px;} #pixel .dualswatch .sw:hover{box-shadow:0 3px 9px #000b;} #pixel .swap:hover{background:var(--accent2); border-color:var(--accent2);} #pixel #installBtn{background:var(--ok); border-color:var(--ok); box-shadow:0 2px 10px -3px var(--ok);} #pixel #installBtn:hover{background:#54d089; border-color:#54d089;} /* themed modal */ #pixel .modal-root{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;} #pixel .modal-root[hidden]{display:none;} #pixel .modal-backdrop{position:absolute; inset:0; background:#0009;} #pixel .modal-card{ position:relative; width:min(380px,92vw); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 18px 15px; box-shadow:0 20px 60px #000b; animation:modalIn .15s ease; } #pixel .modal-card h3{margin:0 0 9px; font-size:15px;} #pixel .modal-card p{margin:0 0 15px; color:var(--muted); font-size:13px; line-height:1.55; white-space:pre-wrap;} #pixel .modal-card p:empty{display:none;} #pixel .modal-card #modalInput{width:100%; margin:0 0 15px;} #pixel .modal-card #modalBody{margin:0 0 15px;} #pixel .modal-card #modalBody:empty{display:none;} #pixel .modal-card #modalBody .row{display:flex; align-items:center; gap:8px; margin-bottom:10px;} #pixel .modal-card #modalBody .row:last-child{margin-bottom:0;} #pixel .modal-card #modalBody .row > label:not(.chk){color:var(--muted); width:78px; flex:none;} #pixel .modal-card #modalBody .row > .chk{flex:1; min-width:0; color:var(--text);} #pixel .modal-card #modalBody .row > .chk input{flex:none;} #pixel .modal-card #modalBody select{flex:1; min-width:0;} #pixel .modal-card #modalBody input[type=number]{width:72px;} #pixel .modal-card.mid{width:min(510px,94vw);} #pixel .modal-card.wide{width:min(780px,95vw);} #pixel .modal-actions{display:flex; justify-content:flex-end; gap:8px;} /* ---- help / shortcuts sheet ---- */ #pixel .modal-card.wide #modalBody{max-height:min(66vh,560px); overflow:auto; margin-right:-6px; padding-right:6px;} #pixel .help-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 22px;} #pixel .help-sec h4{ display:flex; align-items:center; gap:7px; margin:0 0 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); } #pixel .help-sec h4 svg{opacity:.8;} #pixel .help-row{display:flex; align-items:center; gap:9px; padding:3px 0; min-height:24px;} #pixel .help-row .ic{flex:none; width:16px; display:inline-flex; justify-content:center; color:var(--muted);} #pixel .help-row .lb{flex:1; min-width:0; font-size:12.5px;} #pixel .help-row .ks{display:flex; align-items:center; gap:3px; flex:none;} #pixel .kbd{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; color:var(--text); font-size:11px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; } #pixel .kbd.wide{font-weight:600; font-size:10.5px; text-transform:none;} #pixel .ks .plus{color:var(--muted); font-size:10px;} @media (max-width: 860px){ #pixel .help-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width: 620px){ #pixel .help-grid{grid-template-columns:1fr; gap:14px;} } /* ---- spritesheet import: background swatches + a clickable preview ---- */ #pixel .shi-sw{display:flex; flex-wrap:wrap; align-items:center; gap:5px; flex:1; min-width:0;} #pixel .shi-sw .sw{width:24px; height:24px; border-radius:5px; border:1px solid var(--line); cursor:pointer; position:relative;} #pixel .shi-sw .sw::after{content:"×"; position:absolute; inset:0; display:none; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; text-shadow:0 0 3px #000;} #pixel .shi-sw .sw:hover{outline:2px solid var(--danger); outline-offset:1px;} #pixel .shi-sw .sw:hover::after{display:flex;} #pixel .shi-sw .none{color:var(--muted); font-size:12px;} #pixel .shi-prev{flex:1; min-width:0; max-height:190px; overflow:auto; border:1px solid var(--line); border-radius:8px; background:repeating-conic-gradient(#b3b3b3 0% 25%, #7f7f7f 0% 50%) 0 0 / 16px 16px;} #pixel .shi-prev canvas{display:block; width:100%; height:auto; image-rendering:pixelated; cursor:crosshair;} #pixel .shi-hint{color:var(--muted); font-size:11px; line-height:1.45;} /* A packed sheet is as likely to be square as wide, so the preview fits inside a fixed box rather than filling the width the way the (always wide) spritesheet import preview does. */ #pixel .pk-prev{display:flex; align-items:center; justify-content:center; flex:1; min-width:0; height:206px; padding:6px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--panel2);} /* The checkerboard sits on the canvas, not the box, and the canvas is sized in script to the sheet's aspect — so what you see checkered is exactly the sheet, edges and all. */ #pixel .pk-prev canvas{image-rendering:pixelated; display:block; box-shadow:0 0 0 1px #ffffff2e; background:repeating-conic-gradient(#b3b3b3 0% 25%, #7f7f7f 0% 50%) 0 0 / 16px 16px;} /* what went into the pack, as chips — a plain list of 400 names would bury the dialog */ #pixel .pk-list{display:flex; flex-wrap:wrap; gap:4px; flex:1; min-width:0; max-height:82px; overflow:auto;} #pixel .pk-i{font-size:10.5px; color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:2px 6px; white-space:nowrap;} #pixel .pk-i.more{color:var(--accent); border-color:var(--accent);} /* ---- pseudo-3D (voxel) dialog ---- */ #pixel .vx-wrap{display:flex; gap:12px;} #pixel .vx-prev{position:relative; flex:1; min-width:0; height:230px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; touch-action:none; cursor:grab; background:repeating-conic-gradient(#3a3f4b 0% 25%, #2b2f39 0% 50%) 0 0 / 18px 18px;} #pixel .vx-prev:active{cursor:grabbing;} #pixel .vx-prev canvas{image-rendering:pixelated;} #pixel .vx-drag{position:absolute; bottom:5px; right:7px; font-size:10px; color:var(--muted); pointer-events:none;} #pixel .vx-ctl{width:236px; flex:none; display:flex; flex-direction:column; gap:8px;} #pixel .vx-ctl .row{display:flex; align-items:center; gap:8px;} #pixel .vx-ctl .row > label:first-child{width:56px; flex:none; color:var(--muted); font-size:11px;} #pixel .vx-dirs{display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin-top:2px;} #pixel .vx-dir{width:100%; height:auto; image-rendering:pixelated; background:#0003; border:1px solid var(--line); border-radius:3px; cursor:pointer;} #pixel .vx-dir:hover{border-color:#56607a;} #pixel .vx-dir.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;} #pixel .st-wrap{display:flex; gap:12px;} #pixel .st-view{position:relative; flex:1; min-width:0; height:420px; display:flex; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; touch-action:none;} #pixel .st-view canvas{image-rendering:pixelated; cursor:crosshair;} #pixel .st-hint{position:absolute; bottom:5px; right:7px; font-size:10px; color:var(--muted); pointer-events:none;} #pixel .st-side{width:210px; flex:none; display:flex; flex-direction:column; gap:10px;} #pixel .st-side .row{display:flex; align-items:center; gap:8px;} #pixel .st-side .row > label:first-child{width:56px; flex:none; color:var(--muted); font-size:11px;} #pixel .st-tools{display:flex; gap:4px;} #pixel .st-tool{flex:1; padding:6px 0;} #pixel .st-tool.on{background:var(--accent2); border-color:var(--accent2); color:#fff;} #pixel .st-swatch{width:20px; height:20px; border-radius:3px; border:1px solid var(--line); display:inline-block;} #pixel .st-tabs{display:flex; gap:4px; margin-bottom:8px;} #pixel .st-mode{flex:1; padding:6px 0;} #pixel .st-mode.on{background:var(--accent2); border-color:var(--accent2); color:#fff;} #pixel .st-side .row{margin-top:6px;} #pixel .st-bones{display:flex; flex-direction:column; gap:3px; max-height:150px; overflow:auto;} #pixel .st-bone{display:flex; align-items:center; gap:6px; padding:4px 6px; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; font-size:12px;} #pixel .st-bone.on{border-color:var(--accent); background:var(--panel);} #pixel .st-bdot{width:11px; height:11px; border-radius:2px; border:1px solid var(--line); flex:none;} #pixel .st-keys{display:flex; flex-wrap:wrap; gap:3px;} #pixel .st-key{width:26px; height:24px; padding:0;} #pixel .st-key.on{background:var(--accent2); border-color:var(--accent2); color:#fff;} /* ---- open recent ---- */ #pixel .rc-list{display:flex; flex-direction:column; gap:5px; max-height:min(52vh,330px); overflow:auto; margin-bottom:9px;} #pixel .rc-i{display:flex; align-items:center; gap:10px; padding:6px 8px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; cursor:pointer; text-align:left; width:100%;} #pixel .rc-i:hover{border-color:var(--accent);} #pixel .rc-th{flex:0 0 44px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; color:var(--muted); background:repeating-conic-gradient(#b3b3b3 0% 25%, #7f7f7f 0% 50%) 0 0 / 11px 11px;} #pixel .rc-th.none{background:var(--panel);} /* blown up to fill the box, pixels kept square: a 8 px sprite is recognisable at 44 px, and nothing is stretched out of shape on the way */ #pixel .rc-th img{width:100%; height:100%; object-fit:contain; image-rendering:pixelated;} #pixel .rc-tx{flex:1; min-width:0;} #pixel .rc-nm{display:block; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #pixel .rc-mt{display:block; font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #pixel .rc-x{flex:none; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:5px; color:var(--muted);} #pixel .rc-x:hover{background:#ffffff14; color:var(--danger);} #pixel .rc-empty{padding:20px 12px; text-align:center; color:var(--muted); font-size:12px; line-height:1.5; border:1px dashed var(--line); border-radius:8px;} #pixel .rc-foot{display:flex; align-items:center; gap:8px;} #pixel .rc-note{flex:1; min-width:0; color:var(--muted); font-size:10.5px; line-height:1.4;} /* cache-is-not-a-backup warning at the top of Open recent */ #pixel .rc-warn{display:flex; gap:9px; align-items:flex-start; margin-bottom:11px; padding:9px 11px; border:1px solid #caa53f55; background:#caa53f1f; border-radius:var(--r,3px); color:#e7d6a3; font-size:11.5px; line-height:1.5;} #pixel .rc-warn b{color:#fff2cf;} #pixel .rc-warn-ic{flex:none; color:#e0be5a; margin-top:1px;} /* ---- about sheet ---- */ #pixel .about-head{display:flex; align-items:center; gap:14px; margin-bottom:14px;} #pixel .about-icon{flex:none; image-rendering:pixelated;} /* transparent, as the icon is everywhere else */ #pixel .about-tag{font-size:13px; margin-bottom:3px;} #pixel .about-ver{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;} /* ---- contact / suggestions ---- */ #pixel .ct-lead{font-size:13px; margin-bottom:10px;} #pixel .ct-card{display:flex; align-items:center; gap:12px; padding:11px 12px 11px 14px; text-decoration:none; color:inherit; background:var(--panel2); border:1px solid var(--line); border-radius:10px;} #pixel .ct-card:hover{border-color:var(--accent); background:#5b8cff14;} #pixel .ct-ic{flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:9px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2));} #pixel .ct-addr{flex:1; min-width:0; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #pixel .ct-copy{flex:none;} #pixel .ct-quick{display:flex; gap:8px; margin-top:10px;} #pixel .ct-btn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 10px; font-size:12.5px; text-decoration:none; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:8px;} #pixel .ct-btn svg{opacity:.75;} #pixel .ct-btn:hover{border-color:var(--accent);} #pixel .ct-btn.danger:hover{border-color:var(--danger); color:var(--danger);} #pixel .ct-btn.danger:hover svg{opacity:1;} /* the tools rail's tips moved into that sheet; this is all that's left in their place */ #pixel .helpbtn{width:100%; margin-top:auto;} @keyframes modalIn{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;}} /* themed toasts */ #pixel .toast-root{position:fixed; left:50%; bottom:48px; transform:translateX(-50%); z-index:1100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;} #pixel .toast{ pointer-events:auto; display:flex; align-items:center; gap:9px; max-width:82vw; background:var(--panel2); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:9px; padding:9px 14px; font-size:13px; box-shadow:0 10px 30px #0008; animation:toastIn .18s ease; } #pixel .toast.error{border-left-color:var(--danger);} #pixel .toast.success{border-left-color:var(--ok);} #pixel .toast.error svg{color:var(--danger);} #pixel .toast.success svg{color:var(--ok);} #pixel .toast.info svg{color:var(--accent);} @keyframes toastIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}} @media (prefers-reduced-motion: reduce){ #pixel .modal-card, #pixel .toast{animation:none;} } /* image right-click menu */ #pixel .ctx-menu{ position:fixed; z-index:1200; min-width:184px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:5px; box-shadow:0 16px 44px #000c; } #pixel .ctx-menu[hidden]{display:none;} #pixel .ctx-menu button{ display:flex; width:100%; justify-content:flex-start; align-items:center; background:transparent; border:none; border-radius:6px; padding:7px 10px; min-height:0; color:var(--text); font-size:13px; } #pixel .ctx-menu button:hover{background:var(--panel2); border:none;} #pixel .ctx-sep{height:1px; background:var(--line); margin:5px 4px;} #pixel .ctx-sep + .ctx-sep{display:none;} /* never draw a doubled divider */ #pixel .ctx-sep:first-child, #pixel .ctx-sep:last-child{display:none;} /* tighten chrome on smaller windows so the canvas keeps room */ @media (max-width: 1100px){ #pixel .topbar{gap:6px 9px; padding:7px 10px;} #pixel .sep{display:none;} #pixel .tools{width:138px; padding:9px;} #pixel .side{width:236px;} #pixel .stage{padding:16px;} } @media (max-width: 900px){ #pixel .brand{font-size:14px;} #pixel .tools{width:126px;} #pixel .side{width:216px;} #pixel .tool::after{display:none;} /* drop the keyboard-hint badge to save width */ #pixel label.lbl{display:none;} } @media (max-width: 720px){ #pixel .hint{display:none;} #pixel .section{padding:10px 11px;} #pixel .stage{padding:10px;} #pixel .layers .bar{padding:8px 10px;} } @media (max-width: 600px){ #pixel .topbar{padding:6px 8px;} } /* ---- mobile: the tool + color/layer panels become popout drawers ---- */ #pixel .drawer-btn{display:none;} #pixel .panel-backdrop{position:fixed; inset:0; background:#000a; z-index:490; opacity:0; pointer-events:none; transition:opacity .18s;} #pixel .panel-backdrop.show{opacity:1; pointer-events:auto;} @media (max-width: 768px){ #pixel .drawer-btn{display:inline-flex;} #pixel .tools{ position:fixed; left:0; top:0; bottom:0; z-index:500; width:min(76vw,250px); transform:translateX(-106%); transition:transform .22s ease; box-shadow:14px 0 40px #000a; border-right:1px solid var(--line); padding-bottom:max(12px, env(safe-area-inset-bottom)); } #pixel .tools.open{transform:none;} #pixel .side{ position:fixed; right:0; top:0; bottom:0; z-index:500; width:min(86vw,310px); transform:translateX(106%); transition:transform .22s ease; box-shadow:-14px 0 40px #000a; border-left:1px solid var(--line); padding-bottom:max(0px, env(safe-area-inset-bottom)); } #pixel .side.open{transform:none;} #pixel .layerlist{max-height:none;} /* single, clean top row — nothing wraps */ #pixel .topbar{flex-wrap:nowrap; overflow-x:auto; gap:6px; padding:6px 8px;} #pixel .topbar .sep{display:none;} #pixel .topbar .group{gap:6px;} #pixel .brand{font-size:14px;} #pixel .btxt{display:none;} /* Undo / Redo become icon-only */ #pixel #undoBtn, #pixel #redoBtn{padding:0; min-width:42px;} /* compact timeline: one scrollable control row, frames strip never clipped */ #pixel .timeline{max-height:none;} #pixel .tl-bar{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:6px; padding:6px 8px;} #pixel .tl-bar .lbl, #pixel .tl-bar .vsep{display:none;} #pixel .tl-field input[type=number]{width:58px;} #pixel .tl-frames{padding:8px;} #pixel .statusbar{gap:10px; padding-bottom:max(5px, env(safe-area-inset-bottom));} #pixel .place-bar{max-width:96vw; flex-wrap:wrap; justify-content:center;} #pixel .toast{max-width:92vw;} } @media (max-width: 374px){ #pixel .brand{display:none;} } /* keep the single row on tiny phones */ @media (prefers-reduced-motion: reduce){ #pixel .tools, #pixel .side, #pixel .panel-backdrop{transition:none;} } /* ============================================================= redesign */ /* ---- menu bar (File / Edit / Sprite / Layer / Frame / Select / View / Help) ---- */ #pixel .menubar{display:flex; align-items:center; gap:1px; flex:1; min-width:0; overflow-x:auto; overflow-y:hidden;} #pixel .menu-item{ display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; color:var(--muted); cursor:pointer; font-size:13px; white-space:nowrap; line-height:1.4; user-select:none; } #pixel .menu-item:hover{background:var(--panel2); color:var(--text);} #pixel .menu-item.open{background:var(--panel2); color:var(--text);} #pixel .menu-dd{ /* dropdown panels reuse the .ctx-menu look via shared rules below */ } #pixel .menu-dd .hk{margin-left:auto; padding-left:22px; color:var(--muted); font-size:11px; font-weight:600;} #pixel .menu-dd button:hover .hk{color:var(--text);} #pixel .menu-dd .mi-check{width:18px; flex:none; color:var(--accent); display:inline-flex; align-items:center; justify-content:center;} /* the View menu carries the real zoom/grid controls; keep them readable inside the dropdown */ #pixel .menu-dd .dd-row{display:flex; align-items:center; gap:8px; padding:6px 10px;} #pixel .menu-dd .dd-row .lbl{color:var(--muted); font-size:12px; flex:1; text-transform:none; letter-spacing:0;} /* One segmented control, not two full-size icon buttons flanking a label: the steppers are flat and only as big as their glyph, so the readout is what carries the row. */ #pixel .menu-dd .dd-zoom{ display:flex; align-items:center; gap:2px; margin:2px 10px 4px; padding:2px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; } #pixel .menu-dd .dd-zoom button{ flex:none; width:28px; min-width:28px; height:26px; min-height:26px; padding:0; background:transparent; border:none; border-radius:7px; /* .ctx-menu button left-aligns its contents for the menu rows; these are square, so centre them in both axes or the glyphs hug the pill's inner edges at different distances */ justify-content:center; align-items:center; font-size:15px; line-height:1; color:var(--text); } /* Both glyphs are axis-aligned bars 2 units thick, which lands on 1.33px at this size: the plus survives it because its strokes cross, the minus washes out to grey. Snapping them to the pixel grid costs nothing for rectangles and makes the pair weigh the same. */ #pixel .menu-dd .dd-zoom button svg{shape-rendering:crispEdges;} #pixel .menu-dd .dd-zoom button:hover{background:#3a4152; border:none;} #pixel .menu-dd .dd-zoom button:active{transform:none; background:var(--accent2);} #pixel .menu-dd .dd-zoom span#zoomReadout{ flex:1; text-align:center; font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--text); } #pixel .menu-dd .chk{padding:6px 10px; font-size:13px; color:var(--text);} /* In a dropdown that mixes checkbox rows with plain ones, the plain rows reserve the checkbox's column so every label starts on the same x — otherwise e.g. "Remove sub-canvas" sits a checkbox-width to the left of "Grid". Nested buttons (the zoom steppers) are left alone. */ #pixel .menu-dd.has-checks > button::before{content:""; width:13px; flex:none;} /* fixed slots, so the alignment is structural rather than a sum of default widths: 13px for the checkbox (or the empty stand-in above), then 16px for the icon, whatever the glyph measures */ #pixel .menu-dd .chk > input[type=checkbox]{width:13px; height:13px; margin:0; flex:none;} #pixel .menu-dd .chk > .mi, #pixel .menu-dd.has-checks > button > svg{ width:16px; flex:none; display:inline-flex; justify-content:center; } /* ---- tools as an icon grid ---- */ #pixel .tools .toolgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:6px; width:100%;} #pixel .tools .tool{justify-content:center; padding:0; min-height:0; aspect-ratio:1; gap:0;} #pixel .tools .tool::after{content:none; display:none;} /* no keyboard badge in the grid */ #pixel .brushbtns{display:flex; align-items:center; gap:6px; width:100%;} #pixel .brushbtns #brushReadout{flex:1; min-width:0; text-align:center;} #pixel #toolOpts .toolhead{display:none;} #pixel #toolOpts.show-wand .opt-wand, #pixel #toolOpts.show-region .opt-region, #pixel #toolOpts.show-shape .opt-shape, #pixel #toolOpts.show-brush .opt-brush{display:block;} #pixel .opt-wand, #pixel .opt-region, #pixel .opt-shape, #pixel .opt-brush{display:none;} #pixel .opt-range{display:flex; flex-direction:column; gap:2px; color:var(--muted); font-size:12px; margin-bottom:6px;} #pixel .opt-range input{width:100%;} #pixel .opt-hint{color:var(--muted); font-size:10px; line-height:1.4; margin-top:5px;} /* ---- collapsible side sections with a chevron ---- */ #pixel .section h3.sec-h{display:flex; align-items:center; gap:7px; cursor:pointer; margin-bottom:10px;} #pixel .section h3.sec-h .chev{display:inline-flex; transition:transform .15s; color:var(--muted);} #pixel .section.collapsed h3.sec-h{margin-bottom:0;} #pixel .section.collapsed h3.sec-h .chev{transform:rotate(-90deg);} #pixel .section.collapsed .sec-body{display:none !important;} /* a full-width row of equal icon buttons — always fits, so nothing crowds the scrollbar */ #pixel .btnrow{display:flex; gap:5px; margin-bottom:9px;} #pixel .btnrow button{flex:1 1 0; min-width:0; height:30px; min-height:30px; padding:0; border-radius:7px;} /* layer rows: eye · lock · name · thumb (opacity is a single slider below the list) */ #pixel .layer .lock{width:22px; text-align:center; cursor:pointer; opacity:.5; flex:none;} #pixel .layer .lock.on{opacity:1; color:var(--accent);} #pixel .layer .lock:hover{opacity:1; color:var(--accent);} #pixel .layer .nm{font-weight:500;} #pixel .layer.active .nm{font-weight:700;} #pixel .opacity-row{display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line);} #pixel .opacity-row .lbl{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; flex:none;} #pixel .opacity-row #opacityVal{color:var(--text); width:30px; text-align:right; flex:none; font-variant-numeric:tabular-nums;} /* ---- canvas rulers ---- */ /* minmax(0,1fr) + min-height:0 stop the grid's automatic minimum size from being driven by the canvas, which would push .main taller than its flex slot and shove the timeline off-screen. */ #pixel .canvasarea{ flex:1; min-width:0; min-height:0; display:grid; grid-template-columns:22px minmax(0,1fr); grid-template-rows:22px minmax(0,1fr); background:var(--bg); } #pixel .ruler-corner{grid-column:1; grid-row:1; background:var(--panel); border-right:1px solid var(--line); border-bottom:1px solid var(--line);} #pixel #rulerTop{grid-column:2; grid-row:1; width:100%; height:22px; display:block; background:var(--panel); border-bottom:1px solid var(--line);} #pixel #rulerLeft{grid-column:1; grid-row:2; width:22px; height:100%; display:block; background:var(--panel); border-right:1px solid var(--line);} #pixel .canvasarea .stage{grid-column:2; grid-row:2; padding:22px;} /* status-bar zoom + tool chips */ #pixel .statusbar .sb-btn{display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:var(--muted);} #pixel .statusbar .sb-btn:hover{color:var(--text);} #pixel .statusbar .sb-btn svg{opacity:.85;} /* ---- mobile: tool row on top, panels stacked & collapsible below the canvas ---- */ #pixel #menuHamburger{display:none;} /* desktop default; the media query below reveals it */ @media (max-width: 768px){ #pixel .menubar{display:none;} /* menus fold into the hamburger */ #pixel #menuHamburger{display:inline-flex;} #pixel .main{flex-direction:column;} #pixel .canvasarea{grid-template-columns:0 1fr; grid-template-rows:0 1fr;} #pixel #rulerTop, #pixel #rulerLeft, #pixel .ruler-corner{display:none;} #pixel .canvasarea .stage{padding:12px;} /* tools become a persistent horizontal scroll row above the canvas */ #pixel .tools{ position:relative; z-index:1; transform:none; width:auto; flex:none; flex-direction:row; align-items:center; gap:6px; overflow-x:auto; overflow-y:hidden; box-shadow:none; border-right:none; border-bottom:1px solid var(--line); padding:7px 8px; } #pixel .tools.open{transform:none;} /* the tool icons scroll in their own row; brush size and the active tool's options wrap under it */ #pixel .tools{flex-wrap:wrap; overflow-x:hidden;} #pixel .tools .toolhead{display:none;} #pixel .tools .toolgrid{display:flex; grid-template-columns:none; gap:6px; width:auto; flex:1 1 100%; min-width:0; overflow-x:auto;} #pixel .tools .brush-sec{display:flex; align-items:center; margin:0;} #pixel .tools #toolOpts{display:flex; align-items:center; gap:10px; flex:1; min-width:0; overflow-x:auto; margin:0;} #pixel .tools .opt-hint{display:none;} #pixel #toolOpts.show-brush .opt-brush{display:flex; align-items:center; gap:10px;} #pixel .tools .opt-range{flex-direction:row; align-items:center; gap:6px; margin:0; white-space:nowrap;} #pixel .tools .opt-range input{width:80px;} #pixel .tools .opt-brush .chk{white-space:nowrap; margin:0;} #pixel .tools .tool{width:44px; height:44px; aspect-ratio:auto; flex:none;} #pixel .tools .helpbtn{width:44px; min-width:44px; margin-top:0; padding:0; flex:none;} /* side panel becomes an in-flow stack under the canvas */ #pixel .side{ position:relative; z-index:1; transform:none; width:auto; flex:none; border-left:none; border-top:1px solid var(--line); box-shadow:none; max-height:42vh; overflow-y:auto; } #pixel .side.open{transform:none;} /* flex, not block: each row is an icon plus its label, and the icon has to sit on the label's centre line rather than its baseline */ #pixel #menuSheet .menu-item{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:8px; font-size:15px;} /* The whole bottom panel is one tabbed surface: the pinned strip picks Color, Layers or Animation, and only that one is in the document flow. Two half-width columns of controls never fit a phone, and the animation strip shouldn't permanently eat the canvas either. #layerSection carries an inline display:flex, hence the !important. */ #pixel .panel-tabs{display:flex;} /* the tab strip is the header now (specific enough to beat .section h3.sec-h) */ #pixel .side .section > h3.sec-h{display:none;} #pixel .mobile-cols{display:block;} body[data-ptab="color"] #pixel #layerSection{display:none !important;} body[data-ptab="layers"] #pixel #colorSection{display:none !important;} body[data-ptab="anim"] #pixel #colorSection, body[data-ptab="anim"] #pixel #layerSection, body[data-ptab="anim"] #pixel #regionSection, body[data-ptab="anim"] #pixel #sheetSection, body[data-ptab="color"] #pixel #sheetSection, body[data-ptab="layers"] #pixel #sheetSection, /* the Tiles tab owns the panel outright while it's open */ body[data-ptab="tiles"] #pixel #colorSection, body[data-ptab="tiles"] #pixel #layerSection, body[data-ptab="tiles"] #pixel #regionSection, /* "none": every panel is tabbed off and the canvas gets the whole screen */ body[data-ptab="none"] #pixel #colorSection, body[data-ptab="none"] #pixel #layerSection, body[data-ptab="none"] #pixel #sheetSection, body[data-ptab="none"] #pixel #regionSection{display:none !important;} body[data-ptab="tiles"] #pixel #sheetSection{display:block !important;} body[data-ptab="none"] #pixel .side{overflow:visible; border-bottom:none;} body:not([data-ptab="anim"]) #pixel #pxTimeline{display:none;} /* the tab strip already draws the panel's top edge */ body[data-ptab="anim"] #pixel #pxTimeline{border-top:none; max-height:46vh;} body[data-ptab="anim"] #pixel .side{overflow:visible;} #pixel #tlCollapseBtn, #pixel #tlSummary{display:none !important;} /* the tab is the collapse control */ } /* mobile menu sheet (the hamburger opens a simple list of menus) */ #pixel #menuSheet{position:fixed; left:8px; top:52px; z-index:1200; min-width:210px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 18px 50px #000c;} #pixel #menuSheet[hidden]{display:none;} /* ---- finger-friendly targets: any touch device, or any screen small enough to be in drawer mode ---- */ @media (pointer: coarse), (max-width: 768px){ #pixel button, #pixel select, #pixel input[type=text], #pixel input[type=number]{min-height:42px;} #pixel .iconbtn{min-width:42px;} #pixel .tool{min-height:44px;} #pixel .tool::after{display:none;} /* keyboard hints are meaningless on touch */ #pixel .tab{padding:10px 10px 10px 14px;} #pixel .tab .tclose{width:24px; height:24px;} #pixel .palette{grid-template-columns:repeat(auto-fill, minmax(30px,1fr)); gap:6px; max-height:224px;} #pixel .palette.editable .sw .swx{display:inline-flex; width:17px; height:17px;} /* no hover on touch */ #pixel .btnrow button{height:40px; min-height:40px;} #pixel .recents .rc{width:26px; height:26px;} #pixel .layer{padding:10px 9px;} #pixel .layer .eye{width:30px;} #pixel .layer .op{width:74px;} #pixel input[type=range]{height:30px;} #pixel .swap{width:28px; height:28px;} #pixel .tl-frame .tl-x{display:inline-flex;} /* no hover on touch — always show the delete button */ #pixel .tl-frame .tl-num{padding:4px 10px; font-size:11px;} /* a grip a finger can find */ #pixel .ctx-menu button{padding:11px 12px;} #pixel .tl-tab{height:34px;} /* the tabs stay compact, but big enough to hit */ #pixel .panel-tabs .ptab{height:40px; min-height:40px;} /* the flat zoom steppers stay flat on touch, just big enough to hit reliably */ #pixel .menu-dd .dd-zoom button{width:36px; min-width:36px; height:34px; min-height:34px;} /* the picker is a floating panel, so it doesn't inherit the panel width — give it the screen on a phone, where a 238px saturation square is a poor finger target */ #pixel .cp-pop{width:min(340px, calc(100vw - 16px));} #pixel .cp-sv{height:158px;} /* Anchor dialogs near the top rather than dead-centre: when the on-screen keyboard opens it eats the lower half of the screen, and a centred dialog would sit behind it. Top-aligned and scrollable, the dialog and its buttons stay reachable above the keyboard. */ #pixel .modal-root{align-items:flex-start; justify-content:center; padding:10px; overflow-y:auto;} #pixel .modal-card{margin:max(8px, env(safe-area-inset-top)) 0 8px; max-height:none;} } /* ===================== retro / pixel-tool pass ===================== */ /* Evolves the dark theme toward a pixel-art tool: blocky corners, matte (no gloss), a chunky button bevel, and an Aseprite-style tight, resizable palette. Kept as one late block so it's easy to tune or lift out wholesale. */ #pixel{ --r:3px; } /* blocky corners across the chrome (this block is later in source, so it wins ties) */ #pixel button, #pixel .iconbtn, #pixel select, #pixel input[type=text], #pixel input[type=number], #pixel .tool, #pixel .layer, #pixel .tl-frame, #pixel .tl-group, #pixel .section, #pixel .modal-card, #pixel .cp-pop, #pixel .cp-swatch, #pixel .cp-sv, #pixel .cp-hue, #pixel .cp-prev, #pixel .dualswatch .sw, #pixel .swap, #pixel .panel-tabs .ptab, #pixel .tab, #pixel .place-bar, #pixel .toast, #pixel .recents .rc, #pixel .layer .thumb, #pixel .tl-frame .tl-thumb, #pixel #hexInput{ border-radius:var(--r); } /* matte: drop the glows and the stage sheen */ #pixel button.primary, #pixel button.danger, #pixel button.primary.danger, #pixel .tool.active{ box-shadow:none; } #pixel .stage{ background:var(--bg); } #pixel .canvas-wrap{ box-shadow:0 0 0 1px #0007; } /* hard offset drop shadow instead of a soft blur — reads as a pixel-era window */ #pixel .modal-card, #pixel .cp-pop{ box-shadow:0 6px 0 #0006, 0 0 0 1px #0009; } /* chunky bevel on inputs & buttons: lit top edge, shadowed bottom */ #pixel button, #pixel select, #pixel input[type=text], #pixel input[type=number]{ box-shadow:inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000040; } #pixel button:active{ box-shadow:inset 0 1px 0 #00000038; transform:translateY(1px); } #pixel .tool.active, #pixel button.primary{ box-shadow:inset 0 1px 0 #ffffff2b, inset 0 -1px 0 #00000047; } /* ---- Aseprite-style palette: a tight seamless grid you resize by the grip below it ---- */ /* By default the palette grows to fill the panel (no dead space now the Layers dock is gone); dragging the grip switches it to an explicit height set inline by JS. */ #pixel #paletteGrid.palette{ gap:0; padding:0; margin-top:10px; overflow:auto; background:#00000040; border:1px solid var(--line); border-radius:var(--r) var(--r) 0 0; grid-template-columns:repeat(auto-fill, minmax(18px,1fr)); grid-auto-rows:20px; align-content:start; flex:1 1 auto; min-height:70px; max-height:none; } /* the Color section fills the side panel so the palette can take the slack */ @media (min-width:769px){ #pixel #sidePanel > .mobile-cols{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } #pixel #colorSection{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } #pixel #colorSection > .sec-body{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } /* when a tilesheet / sub-canvas panel is open below, stop the palette from filling so that panel stays in view — the palette drops to a compact fixed height instead */ body.has-side-ctx #pixel #sidePanel > .mobile-cols{ flex:0 0 auto; } body.has-side-ctx #pixel #colorSection{ flex:0 0 auto; } body.has-side-ctx #pixel #paletteGrid.palette{ flex:0 0 auto; height:120px; } } /* fill the whole cell so the grid is seamless — square-ish rather than forced square, the way a tight palette reads in Aseprite */ #pixel #paletteGrid.palette .sw{ width:100%; height:100%; aspect-ratio:auto; min-height:0; border:0; border-radius:0; box-shadow:inset 0 0 0 1px #00000024; } #pixel #paletteGrid.palette .sw:hover{ outline:2px solid #fff; outline-offset:-2px; z-index:2; } #pixel #paletteGrid.palette .sw.selected{ outline:2px solid var(--accent); outline-offset:-2px; z-index:3; } #pixel #paletteGrid.palette .sw.selected::before{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px #000; pointer-events:none; } #pixel #paletteGrid.palette.editable .sw .swx{ top:0; right:0; width:13px; height:13px; border-radius:0 0 0 3px; background:#000a; border:0; color:#fff; } #pixel #paletteGrid.palette .pal-empty{ padding:9px; } /* the draggable splitter — like Aseprite's "|| resize palette" grip */ #pixel .pal-resize{ height:15px; display:flex; align-items:center; justify-content:center; cursor:ns-resize; color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r); touch-action:none; } #pixel .pal-resize:hover{ color:var(--text); background:#323744; } #pixel .pal-resize.drag{ background:var(--accent2); color:#fff; border-color:var(--accent2); } #pixel .pal-resize .grip{ width:28px; height:4px; background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px); } /* ================= shared PixelPaint look (kept in step with the main app's css/app.css) ================= */ #pixel button{border-radius:4px; min-height:30px; padding:0 10px; font-weight:400;} #pixel button:hover{background:var(--panel2); border-color:var(--muted);} #pixel button:active{transform:none;} #pixel button.primary, #pixel .tool.active{background:var(--accent); border-color:var(--accent); color:#fff;} #pixel select, #pixel input[type=number], #pixel input[type=text]{border-radius:4px; height:30px; background:var(--bg);} #pixel .topbar{min-height:42px; padding:5px 10px; gap:4px 8px;} #pixel .menu-item{height:28px; padding:0 8px; border-radius:4px; border:1px solid transparent;} #pixel .menu-item:hover, #pixel .menu-item.open{border-color:var(--line);} #pixel #undoBtn, #pixel #redoBtn{background:transparent; border-color:transparent; min-height:30px; min-width:30px; padding:0;} #pixel #undoBtn:hover, #pixel #redoBtn:hover{background:var(--panel2); border-color:var(--line);} #pixel .ctx-menu{border-radius:6px;} #pixel .ctx-menu button{border-radius:4px;} @media (min-width:769px){ #pixel .tools{width:106px; padding:8px 6px; gap:4px;} #pixel .tools .toolgrid{grid-template-columns:repeat(2,40px); gap:4px; justify-content:center;} } #pixel .tools .tool{width:40px; height:40px; aspect-ratio:auto; min-height:0;} #pixel .brushbtns{gap:4px;} #pixel .brushbtns .iconbtn{min-width:26px; min-height:26px;} #pixel .tools .helpbtn{min-height:30px;} @media (min-width:769px){ #pixel .side{width:280px;} } #pixel .section{padding:10px 12px;} #pixel .section h3{font-size:11px; letter-spacing:.8px;} #pixel .stage{background:#16181d;} #pixel .statusbar{font-size:12px;} #pixel .timeline .tl-bar button{min-height:26px;} /* same breakpoints as the main app: menus go icon-only, then fold into the hamburger */ @media (min-width:769px) and (max-width:1180px){ #pixel .menu-item{font-size:0; gap:0; padding:0 7px;} } @media (max-width:768px){ #pixel .tools .tool{width:40px; height:40px;} #pixel .topbar{gap:4px; padding:5px 6px;} #pixel .mode-btn{padding:0 8px;} #pixel .brand{font-size:13px;} } @media (max-width:380px){ #pixel .brand{display:none;} } /* room for the app's Pyxl in the tool rail, above Help */ #pixel #pyxlSpot{height:80px; flex:none; margin-top:auto;} #pixel #pyxlSpot + .helpbtn{margin-top:0;} @media (max-width: 768px){ #pixel #pyxlSpot{display:none;} } /* long labels on full-width buttons wrap instead of spilling out (tablets enlarge text) */ #pixel #palAddColor, #pixel #applyPaletteBtn{white-space:normal; height:auto; min-height:30px; line-height:1.25; padding-top:5px; padding-bottom:5px; overflow-wrap:anywhere;} #pixel button{min-width:0;} #pixel .brushbtns #brushReadout{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}