/* ============================================================================ 2011-catalog-detail.css — Agent 3 of the 2011 catalog re-skin ---------------------------------------------------------------------------- OWNS: the RIGHT-HAND half of ctlg_default_3x3 — productViewWidget (teaser bitmap, room_canvas, bundleGrid, product name, description) and purchaseWidget (the `purchaseButtons` layout). Loads AFTER 2011-catalog-base.css and 2011-catalog-grid.css; reuses the --c11-* custom properties. Anchored on `#root .nitro-catalog-window`. SOURCE OF TRUTH — layout XMLs extracted from the original Habbo.swf: HabboCatalogCom_ctlg_default_3x3.xml container productViewWidget 174,148 162x213 bitmap ctlg_teaserimg_1 0,6 162x162 region room_canvas_container 0,0 162x162 colour 0xffff000000 itemgrid_vertical bundleGrid 12,90 122x76 spacing=2 scrollbar_vertical 134,90 17x76 visible=false text ctlg_product_name 0,166 162x15 font_face="Volter Bold" text ctlg_description 0,179 162x30 multiline word_wrap container purchaseWidget 169,364 162x47 _-2fl.xml layout name="purchaseButtons" (162x52) container_button buy_button 11,0 140x24 colour 0x00aa00 text purchase_label 0,3 140x17 white, u_bold, centred button gift_button 11,28 140x22 ========================================================================= */ /* ============================================================ 1. container productViewWidget 174,148 162x213 ============================================================ */ #root .nitro-catalog-window .ctlg-productview { position: absolute !important; left: 174px !important; top: 148px !important; width: 182px !important; height: 248px !important; background: transparent !important; } /* bitmap ctlg_teaserimg_1 0,6 162x162 — the page's own teaser art, shown until an offer is picked and then covered by the room canvas. */ #root .nitro-catalog-window .ctlg-teaserimg { position: absolute !important; left: 11px !important; top: 14px !important; width: 162px !important; height: 162px !important; object-fit: contain !important; object-position: center top !important; image-rendering: pixelated !important; } /* region room_canvas_container 0,0 162x162 */ #root .nitro-catalog-window .ctlg-room-canvas { position: absolute !important; left: 0 !important; top: 2px !important; width: 182px !important; height: 184px !important; overflow: hidden !important; background: transparent !important; } /* LayoutRoomPreviewerView measures parentElement.clientWidth, so the wrapper above must really be 162px wide. Its own root (and the bundle-grid Column that replaces it for PRICING_MODEL_BUNDLE offers) is flattened here. */ #root .nitro-catalog-window .ctlg-room-canvas > div { position: absolute !important; left: 0 !important; top: 0 !important; width: 182px !important; max-width: 182px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; box-shadow: none !important; background-repeat: no-repeat !important; background-position: center center !important; image-rendering: pixelated !important; } /* itemgrid_vertical bundleGrid 12,90 122x76 spacing=2 (CatalogViewProductWidgetView renders this instead of the previewer when the offer is a bundle; the scrollbar at 134,90 is visible=false in 2011.) */ #root .nitro-catalog-window .ctlg-room-canvas .nitro-catalog-layout-bundle-grid { position: absolute !important; left: 31px !important; top: 93px !important; width: 122px !important; height: 76px !important; display: grid !important; grid-template-columns: repeat(3, 36px) !important; grid-template-rows: none !important; grid-auto-rows: 36px !important; gap: 2px !important; align-content: start !important; justify-content: start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: hidden !important; } /* same layered-!important problem as the main grid — see 2011-catalog-grid.css */ @layer c11-a3 { #root .nitro-catalog-window .ctlg-room-canvas .nitro-catalog-layout-bundle-grid .layout-grid-item { width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important; max-height: 36px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #8fa5ae !important; border-radius: 0 !important; background-color: #ffffff !important; box-shadow: none !important; overflow: hidden !important; } } /* unique_item_overlay_preview equivalent — the LTD plaque sits on the bottom edge of the preview region, not in the flow. */ #root .nitro-catalog-window .ctlg-limited-plate { position: absolute !important; left: 0 !important; bottom: 0 !important; width: 182px !important; pointer-events: none !important; } /* text ctlg_product_name 0,166 162x15 font_face="Volter Bold" */ #root .nitro-catalog-window .ctlg-product-name { position: absolute !important; left: 0 !important; top: 201px !important; width: 162px !important; height: 15px !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 13px !important; font-weight: 700 !important; color: #000000 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; } /* text ctlg_description 0,179 162x30 multiline, word_wrap */ #root .nitro-catalog-window .ctlg-description { position: absolute !important; left: 0 !important; top: 214px !important; width: 162px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 11px !important; color: #000000 !important; overflow: hidden !important; word-wrap: break-word !important; } #root .nitro-catalog-window .ctlg-description :is(p, div, span, b, i) { font-size: 9px !important; line-height: 11px !important; color: #000000 !important; } /* ============================================================ 2. container purchaseWidget 169,364 162x47 -> layout `purchaseButtons`: buy 11,0 140x24 then gift 11,28 140x22. CatalogPurchaseWidgetView emits the gift button FIRST, so `order` restores the 2011 stacking without touching the component. ============================================================ */ #root .nitro-catalog-window .ctlg-purchase { position: absolute !important; left: 169px !important; top: 399px !important; width: 162px !important; height: 47px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 4px !important; padding: 0 0 0 11px !important; margin: 0 !important; overflow: visible !important; } #root .nitro-catalog-window .ctlg-purchase > * { flex: none !important; } /* `order` MUST stay unlayered: an unlayered NORMAL declaration outranks a layered one, so putting these next to the sizing rules in @layer c11-a3 would lose to any plain rule here. buy on top (11,0), gift under it (11,28). */ #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-button { order: 1; } #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-gift-button { order: 2; } /* The button rules live in the c11-a3 cascade layer declared at the top of 2011-catalog-grid.css. They have to: Nitro's Button carries Tailwind's `min-h-[28px]!`, and a LAYERED !important outranks any unlayered one, so plain rules here cannot set the 24px/22px heights the SWF specifies. See the long note in 2011-catalog-grid.css section 0. */ @layer c11-a3 { /* every purchase-state button is 140 wide and starts at x=11 */ #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-button { width: 140px !important; min-width: 140px !important; max-width: 140px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; text-align: center !important; text-shadow: none !important; white-space: nowrap !important; overflow: hidden !important; transition: none !important; } /* container_button buy_button — colour 0x00aa00, white bold centred label. A genuine 2011 chunky bevel: 1px dark outline, 1px light top/left, 1px dark bottom/right, inverted 1px on :active. */ #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-buy-button, #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-confirm-button { background: #00aa00 !important; color: #ffffff !important; border: 1px solid #005500 !important; box-shadow: inset 1px 1px 0 #4cc44c, inset -1px -1px 0 #007700 !important; } #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-buy-button:hover, #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-confirm-button:hover { background: #12bb12 !important; } #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-buy-button:active, #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-confirm-button:active { background: #009000 !important; box-shadow: inset 1px 1px 0 #007700, inset -1px -1px 0 #4cc44c !important; } /* button gift_button — 11,28 140x22, the ordinary grey 2011 button face (same recipe as 2011-catalog-base.css rule 7). */ #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-gift-button { height: 22px !important; min-height: 22px !important; max-height: 22px !important; background: #e8ecec !important; color: #2b2b2b !important; border: 1px solid #4a5a60 !important; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #c4cbcb !important; } #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-gift-button:active { background: #ccd3d3 !important; box-shadow: inset 1px 1px 0 #c4cbcb, inset -1px -1px 0 #ffffff !important; } /* disabled / "not enough credits" / "sold out": flat grey, never a gradient */ #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-button:disabled, #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-button[disabled], #root .nitro-catalog-window .ctlg-purchase .nitro-catalog-swf-button.disabled { background: #c0c8c8 !important; color: #6b7878 !important; border: 1px solid #94a0a0 !important; box-shadow: inset 1px 1px 0 #dfe5e5 !important; cursor: default !important; } }