/* ============================================================================
2011-catalog-grid.css — Agent 3 of the 2011 catalog re-skin
----------------------------------------------------------------------------
OWNS: the ctlg_default_3x3 coordinate space (339x416), ctlg_selectproduct,
specialInfoWidget, and the LEFT-HAND itemGridWidget + its 36x36 cells.
The right-hand productViewWidget and purchaseWidget live in
2011-catalog-detail.css (same agent, split to match the stub file names).
Loads AFTER 2011-catalog-base.css; reuses its --c11-* custom properties.
Everything is anchored on `#root .nitro-catalog-window` + !important because
Nitro's bundle CSS is injected at runtime, i.e. after this .
SOURCE OF TRUTH — layout XMLs extracted from the original Habbo.swf:
HabboCatalogCom_ctlg_default_3x3.xml (the page, 339x416)
_-2Bj.xml layout name="itemGridWidget" (8,148 156x264)
_-z8.xml layout name="gridItem" (36x36 — the catalog cell)
_-4Jf.xml layout name="specialInfoWidget"
_-1r4.xml layout name="navigation_list_item" (source of the 0xffd2f0f3
selection colour reused for the selected cell)
### THE ONE PLACE THIS DELIBERATELY CONTRADICTS THE BRIEF ###
The brief asked for "the credit price in 9px Volter beside the genuine coin
icon" in every cell. The extracted `gridItem` layout is 36x36 and contains:
border bg 36x36 | bitmap image 36x36 | icon clubLevelIcon 15,2 19x10
text bundleCounter 18,18 (Volter Bold, 0xcccc66)
border multiContainer 18,21 17x13 colour 0xff3300 with multiCounter text
There is NO price field, and no price element anywhere in ctlg_default_3x3.
In 2011 the cost was only ever shown in the purchase-confirmation dialog.
The XML wins over the brief, so `.nitro-catalog-grid-price` is hidden here.
Deleting that one rule (4.4) brings the price back if the owner disagrees.
The red "x N" corner badge is NOT a modern tell either — multiContainer is
genuinely 0xff3300 with 0xcccc66 text. It is squared off, not deleted.
========================================================================= */
/* ============================================================
0. THE CASCADE-LAYER ESCAPE HATCH — read this before editing.
Nitro's bundle CSS is Tailwind v4 and ships @layer properties, theme, base,
components, utilities. CSS reverses layer order for !important declarations,
and UNLAYERED styles rank LAST for !important — so an unlayered
`foo: x !important`, however specific, LOSES to Tailwind's `min-h-[28px]!`.
That is why the layout root came out 460px tall and the buy button 28px.
The skin files are real s in index.html while the bundle CSS is
injected at runtime by JS, so a layer declared here is registered FIRST and
therefore OUTRANKS every Tailwind layer for !important declarations.
Only put the handful of declarations that actually lose the fight in here —
anything in this layer also outranks 2011-catalog-base.css, so it is a
sledgehammer. Everything else stays unlayered below.
============================================================ */
@layer c11-a3 {
/* the bundle pins .nitro-catalog-default-layout to min-height: 460px */
#root .nitro-catalog-window .ctlg-default-3x3 {
height: 451px !important;
min-height: 0 !important;
max-height: 451px !important;
}
}
/* ============================================================
1. THE 339x416 PAGE BOX
`layoutContainer` is at 6,37 in the window and the shell is already
absolutely positioned there (2011-catalog-base.css rule 3b), so the
layout root simply covers it and every child sits at its literal
ctlg_default_3x3 coordinate.
pointer-events are disabled on the root so the transparent area over
the header strip (which the frame agent renders as an earlier sibling
at y=0..125) stays clickable.
============================================================ */
#root .nitro-catalog-window .ctlg-default-3x3 {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 359px !important;
height: 451px !important;
display: block !important;
flex: none !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
overflow: visible !important;
pointer-events: none !important;
}
#root .nitro-catalog-window .ctlg-default-3x3 > * {
pointer-events: auto;
}
#root .nitro-catalog-window .ctlg-default-3x3 * {
box-sizing: border-box !important;
}
/* The old modern chrome is no longer rendered, but belt and braces: */
#root .nitro-catalog-window .ctlg-default-3x3 :is(.nitro-catalog-welcome,
.nitro-catalog-offer-panel,
.nitro-catalog-price-row,
.nitro-catalog-purchase-row,
.nitro-catalog-grid-shell) {
display: none !important;
}
/* ============================================================
2. text ctlg_selectproduct 18,130 134x14 font_face="Volter Bold"
============================================================ */
#root .nitro-catalog-window .ctlg-selectproduct {
position: absolute !important;
left: 18px !important;
top: 130px !important;
width: 134px !important;
height: 14px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 9px !important;
line-height: 14px !important;
font-weight: 700 !important;
color: var(--c11-fg) !important;
white-space: nowrap !important;
overflow: hidden !important;
}
/* ============================================================
3. container specialInfoWidget 169,118 142x73
bitmap ctlg_special_img 0,0 136x61
text ctlg_special_txt 12,16 119x40 word_wrap, Volter 9, black
Only pages that actually ship a third image use it (it overlaps the
product view's top edge in the original too).
============================================================ */
#root .nitro-catalog-window .ctlg-special-widget {
position: absolute !important;
left: 169px !important;
top: 118px !important;
width: 142px !important;
height: 73px !important;
}
#root .nitro-catalog-window .ctlg-special-img {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 136px !important;
height: 61px !important;
object-fit: contain !important;
object-position: left top !important;
image-rendering: pixelated !important;
}
#root .nitro-catalog-window .ctlg-special-txt {
position: absolute !important;
left: 12px !important;
top: 16px !important;
width: 119px !important;
height: 40px !important;
font-size: 9px !important;
line-height: 11px !important;
color: #000000 !important;
overflow: hidden !important;
word-wrap: break-word !important;
}
/* ============================================================
4. container itemGridWidget 8,148 156x264
itemgrid_vertical itemGrid 10,0 120x264 spacing=2
scrollbar_vertical 139,0 17x264
============================================================ */
#root .nitro-catalog-window .ctlg-itemgrid-widget {
position: absolute !important;
left: 8px !important;
top: 148px !important;
width: 156px !important;
height: 299px !important;
background: transparent !important;
}
/* itemGrid is 120 WIDE, not 146. The earlier note here assumed the UA could
paint the 17px bar inside the grid's own right edge; layout_verify.js says
otherwise — Chrome runs overlay scrollbars in this configuration, the styled
::-webkit-scrollbar reserves no gutter, and the grid measured 146 against a
spec of 120 (d=+26). The bar is now a real element (rule 4.1b, rendered by
Catalog2011ScrollbarView) at the literal XML coordinate 139,0 17x264, and
the UA bar is suppressed entirely. 3 cells of 36 + 2 gaps of 2 = 112, so the
remaining 8px of the 120 box is the slack the 2011 grid also carried. */
#root .nitro-catalog-window .ctlg-itemgrid.ctlg-itemgrid {
position: absolute !important;
left: 10px !important;
top: 0 !important;
width: 120px !important;
height: 299px !important;
max-height: 299px !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;
border: 0 !important;
background: transparent !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-width: none !important;
}
#root .nitro-catalog-window .ctlg-itemgrid::-webkit-scrollbar {
width: 0;
height: 0;
}
/* ------------------------------------------------------------
4.1b scrollbar_vertical 139,0 17x264 scrollable=itemGrid
A real element (Catalog2011ScrollbarView). 15px square arrow
buttons top and bottom leave a 234px track; those two numbers
must match `buttonSize`/`height` passed in the TSX.
VISIBILITY: Flash's scrollbar_vertical hides itself when its
target does not overflow — that is why the sibling
bundleGridScrollbar ships visible="false", and why the owner's
2011 reference screenshot shows no bar beside the short
category tree. `.is-idle` therefore uses `visibility: hidden`,
never `display: none`: the box must stay measurable or
layout_verify.js reports the element as NOT IN DOM.
------------------------------------------------------------ */
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar {
position: absolute !important;
left: 139px !important;
top: 0 !important;
width: 17px !important;
height: 299px !important;
box-sizing: border-box !important;
display: block !important;
background: #cfd9dd !important;
border-left: 1px solid #8fa5ae !important;
user-select: none !important;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar.is-idle {
visibility: hidden !important;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button {
position: absolute !important;
left: 0 !important;
width: 16px !important;
height: 15px !important;
box-sizing: border-box !important;
border: 1px solid #4a5a60 !important;
border-radius: 0 !important;
background: #e8ecec !important;
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #c4cbcb !important;
cursor: pointer !important;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button.is-up {
top: 0 !important;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button.is-down {
bottom: 0 !important;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button:active {
background: #ccd3d3 !important;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.25) !important;
}
/* Hard 6x4 pixel triangles drawn with borders — no vector icon font. */
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button::before {
position: absolute;
left: 4px;
width: 0;
height: 0;
content: '';
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button.is-up::before {
top: 4px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 4px solid #35748d;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-button.is-down::before {
top: 5px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid #35748d;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-track {
position: absolute !important;
left: 0 !important;
top: 15px !important;
width: 16px !important;
height: 234px !important;
box-sizing: border-box !important;
background: #cfd9dd !important;
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10) !important;
cursor: pointer !important;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-thumb {
position: absolute !important;
left: 0 !important;
width: 16px !important;
box-sizing: border-box !important;
border: 1px solid #4a5a60 !important;
border-radius: 0 !important;
background: #e8ecec !important;
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #c4cbcb !important;
cursor: pointer !important;
}
#root .nitro-catalog-window .ctlg-itemgrid-scrollbar .ctlg-scrollbar-thumb:hover {
background: #f4f7f7 !important;
}
/* 4.2 the drag wrapper CatalogItemGridWidgetView puts around every offer */
#root .nitro-catalog-window .ctlg-itemgrid > div {
width: 36px !important;
height: 36px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4.3 gridItem — 36x36, hard 1px border, flat white face, no radius,
no hover scale, no shadow, no transition.
LayoutGridItem's own Tailwind utilities (border-transparent, rounded-*,
bg-*) are `!important` INSIDE @layer utilities, so the cell's paint has
to be declared inside c11-a3 or it silently loses — see section 0. */
@layer c11-a3 {
#root .nitro-catalog-window .ctlg-itemgrid .layout-grid-item {
width: 36px !important;
height: 36px !important;
min-width: 0 !important;
min-height: 0 !important;
max-height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #8fa5ae !important;
border-radius: 0 !important;
background-color: #ffffff !important;
background-image: none !important;
box-shadow: none !important;
transform: none !important;
transition: none !important;
overflow: hidden !important;
position: relative !important;
cursor: pointer !important;
}
#root .nitro-catalog-window .ctlg-itemgrid .layout-grid-item:hover {
border-color: #418db0 !important;
}
/* selection — 0xffd2f0f3 is the SELECTION_COLOR the 2011 client uses for
its list items (navigation_list_item), squared off with the frame blue. */
#root .nitro-catalog-window .ctlg-itemgrid .layout-grid-item.is-grid-active {
background-color: #d2f0f3 !important;
border: 1px solid #418db0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
}
/* 4.4 the furni icon: natural size, centred, clipped by the cell. */
#root .nitro-catalog-window .ctlg-itemgrid .nitro-catalog-grid-offer-icon {
max-width: 34px !important;
max-height: 34px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
image-rendering: pixelated !important;
}
/* No price in a 2011 catalog cell — see the header note. */
#root .nitro-catalog-window .ctlg-itemgrid .nitro-catalog-grid-price {
display: none !important;
}
/* 4.5 multiContainer — border 18,21 17x13, colour 0xff3300, text 0xcccc66.
LayoutItemCountView has no stable class, hence the [class*=] hook. */
@layer c11-a3 {
#root .nitro-catalog-window .ctlg-itemgrid .layout-grid-item > [class*='bg-danger'] {
position: absolute !important;
left: 17px !important;
top: 20px !important;
right: auto !important;
bottom: auto !important;
width: 17px !important;
height: 13px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #cc2900 !important;
border-radius: 0 !important;
background: #ff3300 !important;
color: #cccc66 !important;
font-size: 9px !important;
line-height: 11px !important;
font-weight: 700 !important;
text-shadow: none !important;
}
}
/* 4.6 limited-edition plaque inside a cell: leave the bundled 2011-derived
art alone, just make sure it is not scaled or rounded. */
#root .nitro-catalog-window .ctlg-itemgrid .unique-item-counter {
transform: none !important;
bottom: 0 !important;
}
/* ============================================================================
5. AGENT 2 — ctlg_default_3x3 VERIFICATION PASS
Driven by:
node layout_verify.js --layout ctlg_default_3x3 \
--map maps/ctlg_default_3x3.json --tolerance 0
Every rule below closes a measured delta. Nothing here is eyeballed.
============================================================================ */
/* 5.1 text ctlg_header_text 12,73 315x52
Measured 315x33 (d=(0,0,0,-19)). 2011-catalog-base.css caps it with
max-height, which lets a short page collapse the box; the SWF field is a
FIXED 315x52 (four lines of 9px Volter at 11px leading, with the last
line's descender slack). This file loads after base.css and matches its
doubled-class specificity, so it wins on order. */
#root .nitro-catalog-window .nitro-catalog-swf-header-description.nitro-catalog-swf-header-description {
height: 52px !important;
max-height: 52px !important;
}
/* 5.2 display_object_wrapper room_canvas 174,148 162x162
LayoutRoomPreviewerView's own root carries Tailwind `rounded-md`, which
lives in @layer utilities and therefore beats the unlayered
`border-radius: 0 !important` in 2011-catalog-detail.css. The layer
declared at the top of this file outranks every Tailwind layer for
!important declarations, so the square corner is forced there.
Height is pinned too: the spec box is 162x162, the Tailwind root is
height-auto and measured short until the previewer canvas mounts. */
@layer c11-a3 {
#root .nitro-catalog-window .ctlg-room-canvas > div {
height: 184px !important;
max-height: 184px !important;
border-radius: 0 !important;
box-shadow: none !important;
}
}