/* ============================================================ 2011-catalog-chrome.css — DRAG, HOVER, REDEEM Agent 3, 2026-07-31. Owner defects 3, 5 and 6. Linked LAST (after 2011-catalog-art.css) so equal-specificity rules in the other skin files lose on source order; where another file is genuinely more specific the selectors below are padded with doubled classes rather than by editing anybody else's file. THREE DEFECTS, ONE FILE: (3) "i cannot drag the menu from the top of the notepad, but on habbo you can. i can move it from the top of the shop side" -> .nitro-catalog-layout-background carried `pointer-events: none`, so it could never be a drag handle and its cursor read "auto". It is now hit-testable and wears `cursor: move`. The JS half of this lives in DraggableWindow.tsx, which now treats `handleSelector` as a selector LIST and binds every match. CatalogView passes ".nitro-catalog-nav-frame-caption, .nitro-catalog-layout-background" so BOTH surfaces drag. The notepad sits at z-index 0 behind .nitro-catalog-layout-shell (z-index 1), so only the parts of the pad the page does not cover -- the coil binding band across the top, and the paper margins down the sides and along the bottom -- start a drag. Clicking catalog content still does nothing, and the close X keeps its own stopImmediatePropagation guard. (6) "the cross button on the shop header doesn't have it's hover status" -> it had `opacity: .8`, which on a 13px dark glyph over a blue caption is invisible. Replaced with a flat lighter-blue plate behind the glyph plus a pressed state, in the 2011 idiom (flat fill, no gradient, no transition). (5) "rounded corners on the 'redeem credits' area, and it doesn't have bold fonts in that area neither in the button. also the input box looks different" MEASURED off _remaster/preview/reference-2011-shop.png by run-length scanning every row of the strip. Screenshot pixel coordinates, 1:1: blue strip y 428..477 (50 tall), x 39..363 (325 wide) == bgBorder 325x50, colour (101,152,203) ~ 0x6699cc left inset per row 5,3,2,1,1,0 => radius 5px voucher well outer x 55..270 (216 wide), y 450..469 (20 tall) == the unnamed `border` 216x20 left inset per row 5,3,2,1,1,0 => radius 5px border colour is UNIFORMLY (40,61,81) on all four straight edges. That is exactly 60% black composited over the strip's (101,152,203) -- 101*.4=40.4, 152*.4=60.8, 203*.4=81.2 -- so the 2011 art is a black outline at 0.6 alpha. Transcribed as the OPAQUE composite #283d51, because a CSS border with alpha would composite over the field's own white fill instead of over the blue strip and come out pale grey. Correct over this strip; it is not the SWF's source colour. Interior is pure #ffffff with NO inner shading: row 451 is white edge to edge, row 468 likewise. redeem button outer x 288..344, y 450..470 (21 tall) == 56x21 border pure #000000, 1px, corners rounded ~1-2px fill pure #ffffff -- NOT the grey it had inner right column x=343 and inner bottom row y=469 are (204,204,204): a 1px #cccccc inner shade on the right and bottom edges only caption pure #000000 label ctlg_txt6 pure #000000, not white, and thin-stroked. The spec agrees: ctlg_txt6 25,370 272x20 carries NO font_face attribute, while its siblings ctlg_txt1/3/4 carry `font_face=Volter Bold`. Absent font_face means plain Volter. Same for `button redeem`, which has a caption but no font_face. Both were being painted at font-weight 700. Nothing here moves a box. layout_verify.js must stay at 0 drift on catalog, ctlg_default_3x3 and ctlg_frontpage3. ============================================================ */ /* ============================================================ 1. DEFECT 3 — the notepad is a drag surface ============================================================ */ #root .nitro-catalog-window .nitro-catalog-layout-background.nitro-catalog-layout-background { /* was `pointer-events: none` in 2011-catalog-base.css, which made the pad untouchable. It is behind the layout shell, so re-enabling hit testing only exposes the coil band and the paper margins. */ pointer-events: auto !important; cursor: move !important; user-select: none !important; -webkit-user-select: none !important; } /* ============================================================ 2. DEFECT 6 — hover feedback on the caption chrome The caption bar is the OTHER drag handle, so it gets the same affordance: one step lighter than #408caf. Honest note: the 2011 Flash caption had no rollover state that I can prove from a still screenshot; this is a deliberate, minimal addition so that a drag surface announces itself, kept flat and un-animated so it cannot read as modern. ============================================================ */ #root .nitro-catalog-window .nitro-catalog-nav-frame .nitro-catalog-nav-frame-caption.nitro-catalog-nav-frame-caption:hover { background-color: #4a99bd !important; } #root .nitro-catalog-window .nitro-catalog-nav-frame .nitro-catalog-nav-frame-caption.nitro-catalog-nav-frame-caption:hover > span { background: #4a99bd !important; } /* the close X itself. 2011-catalog-base.css's "A1 CAPTION CASCADE FIX" block already reaches (1,8,0); this matches it and wins on source order. */ #root .nitro-catalog-window .nitro-catalog-nav-frame-caption .nitro-catalog-nav-frame-caption-actions button.nitro-catalog-nav-close.nitro-catalog-nav-close.nitro-catalog-nav-close:hover { opacity: 1 !important; background-color: #6aa5c0 !important; } #root .nitro-catalog-window .nitro-catalog-nav-frame-caption .nitro-catalog-nav-frame-caption-actions button.nitro-catalog-nav-close.nitro-catalog-nav-close.nitro-catalog-nav-close:active { background-color: #2d6f8f !important; transform: translate(1px, 1px) !important; } /* the admin cog, when a moderator is logged in, gets the same treatment so the two caption buttons do not disagree. */ #root .nitro-catalog-window .nitro-catalog-nav-frame-caption .nitro-catalog-nav-frame-caption-actions button.nitro-catalog-nav-admin-toggle.nitro-catalog-nav-admin-toggle:hover { background-color: #6aa5c0 !important; } /* navigation rows: a selected row previously looked identical hovered and not, so the tree gave no feedback on the one row you were most likely pointing at. Unselected rows already lighten to #dfe5e7 (2011-catalog-nav.css). */ #root .nitro-catalog-window .nitro-catalog-navigation-item.nitro-catalog-navigation-item.is-selected:hover { background-color: #4a99bd !important; } /* ============================================================ 3. DEFECT 5 — the redeem strip 3a. the label: black, plain weight (spec ctlg_txt6 has no font_face) ============================================================ */ #root .nitro-catalog-window .ctlg-frontpage3.ctlg-frontpage3 .ctlg-fp-redeem.ctlg-fp-redeem .ctlg-fp-txt6.ctlg-fp-txt6.ctlg-fp-txt6 { color: #000000 !important; font-weight: 400 !important; text-shadow: none !important; } /* 3b. the input well: white, 1px #283d51 outline, 5px corners, no shading */ #root .nitro-catalog-window .ctlg-frontpage3.ctlg-frontpage3 .ctlg-fp-redeem.ctlg-fp-redeem .ctlg-fp-voucher-well.ctlg-fp-voucher-well.ctlg-fp-voucher-well { border: 1px solid #283d51 !important; border-radius: 5px !important; background: #ffffff !important; box-shadow: none !important; } #root .nitro-catalog-window .ctlg-frontpage3.ctlg-frontpage3 .ctlg-fp-redeem.ctlg-fp-redeem .ctlg-fp-voucher.ctlg-fp-voucher.ctlg-fp-voucher { background: transparent !important; color: #000000 !important; font-weight: 400 !important; box-shadow: none !important; border-radius: 0 !important; } /* 3c. the button: white fill, black outline, #cccccc inner right+bottom shade, plain-weight black caption. The spec's `button redeem` has a caption but no font_face, so it is plain like the label. */ #root .nitro-catalog-window .ctlg-frontpage3.ctlg-frontpage3 .ctlg-fp-redeem.ctlg-fp-redeem .ctlg-fp-redeem-btn.ctlg-fp-redeem-btn.ctlg-fp-redeem-btn { border: 1px solid #000000 !important; border-radius: 2px !important; background: #ffffff !important; color: #000000 !important; font-weight: 400 !important; text-shadow: none !important; box-shadow: inset -1px -1px 0 #cccccc !important; } #root .nitro-catalog-window .ctlg-frontpage3.ctlg-frontpage3 .ctlg-fp-redeem.ctlg-fp-redeem .ctlg-fp-redeem-btn.ctlg-fp-redeem-btn.ctlg-fp-redeem-btn:hover { background: #f2f2f2 !important; } #root .nitro-catalog-window .ctlg-frontpage3.ctlg-frontpage3 .ctlg-fp-redeem.ctlg-fp-redeem .ctlg-fp-redeem-btn.ctlg-fp-redeem-btn.ctlg-fp-redeem-btn:active { background: #e0e0e0 !important; box-shadow: inset 1px 1px 0 #cccccc !important; } /* 3d. the blue strip itself carries NO outline in the reference. Ours had `border: 1px solid #4d7ba3`, which draws a visible darker frame the 2011 art does not have. Scanned in the reference: left x=39, y 445..449 -> (101,152,203) with x=38 already the page grey right x=363 -> (101,152,203), x=364 is page grey top y 432 and 433 -> (101,152,203) edge to edge i.e. a flat fill, hard edge, no border pixel anywhere. box-sizing is border-box on everything under .ctlg-frontpage3, so dropping the border does not move or resize the box -- bgBorder stays 325x50. Scoped to .ctlg-fp-strip only. The grey .ctlg-fp-panel above it is the other bgBorder and belongs to another agent; it is NOT touched here even though it probably wants the same treatment. */ #root .nitro-catalog-window .ctlg-frontpage3.ctlg-frontpage3 .ctlg-fp-strip.ctlg-fp-strip.ctlg-fp-strip { border: 0 !important; background: #6699cc !important; }