/* ============================================================================ 2011-catalog-base.css — Agent 1 (foundation) of the 2011 catalog re-skin ---------------------------------------------------------------------------- OWNS: the catalog window shell, the font/reset layer, the tab row, the SWF page-header banner, the currency chips, and the shared button/field recipe. DOES NOT OWN (siblings, loaded AFTER this file, in this order): 2011-catalog-nav.css .nitro-catalog-sidebar / search / navigation tree 2011-catalog-grid.css the product grid + front-page items + voucher row 2011-catalog-detail.css the product preview / purchase panel CASCADE NOTES — read before editing anything: * Nitro's bundle CSS is injected at RUNTIME by JS, i.e. AFTER every /skin/ , and carries !important on a lot of rules. Plain selectors lose. Everything here is anchored on `#root .nitro-catalog-window` (1,2,0) and class-doubled where the bundle fought back. * 2011-windows.css (loaded earlier) ALREADY styles the generic window chrome and applies to this window: #root .nitro-card-shell, .nitro-card-header-shell, .nitro-card-title, .nitro-card-close-button, .nitro-card-tabs-shell, .nitro-card-tab-item. The teal title bar and red X come from there and are deliberately LEFT ALONE. This file only overrides where the catalog needs to differ (tab metrics, panel colour). Never duplicate 2011-windows.css. * The bundle pins pixel sizes with !important and derives flex layout from them (--nitro-catalog-window-width: 570px / height: 635px). Restyle WITHIN the existing geometry or elements paint over their neighbours. PALETTE — same values as 2011-login-base.css, re-declared on the catalog scope because that file scopes them to .nitro-login-view. Sampled from Example1.jpg (genuine 63-BUILD406) — do not invent new colours. ART: genuine 2011 catalog art is already in play — c_images/catalogue/ icon_*.png tab + node icons and catalog_*_headline*.gif page banners. They are used at NATURAL SIZE with image-rendering: pixelated. No new art files were needed for this region. ========================================================================= */ #root .nitro-catalog-window { /* window frame */ --c11-outline: #1c3f4f; --c11-shadow: rgba(0, 0, 0, 0.35); /* title bar (flat — 2011 had no gradient here) */ --c11-title-bg: #4b8aa4; --c11-title-hi: #6ba3b9; --c11-title-lo: #35748d; --c11-title-fg: #ffffff; --c11-title-sh: #23566a; /* body / content panel */ --c11-panel-bg: #dfe5e7; --c11-panel-hi: #f2f5f6; --c11-panel-lo: #b7c8cf; --c11-rule: #b7c8cf; --c11-field-bg: #ffffff; /* text */ --c11-fg: #2b2b2b; --c11-fg-dim: #4a5a60; --c11-link: #1f6f9a; /* buttons */ --c11-btn-bg: #e8ecec; --c11-btn-hi: #ffffff; --c11-btn-lo: #c4cbcb; --c11-btn-bd: #4a5a60; --c11-btn-fg: #2b2b2b; --c11-btn-hover-bg: #f4f7f7; --c11-btn-down-bg: #ccd3d3; /* catalog-only extras (siblings may use these) */ --c11-tab-bg: #c3d0d6; /* inactive tab face */ --c11-tab-bg-hover: #d3dde1; --c11-sel-bg: #4b8aa4; /* selected row / node, matches title bar */ --c11-sel-fg: #ffffff; --c11-cell-bg: #ffffff; /* product cell face */ --c11-cell-bd: #8fa5ae; /* product cell border */ --c11-font: Volter, 'Volter (Goldfish)', 'Volter Goldfish', monospace; } /* ============================================================ 1. FONT — Volter, 9px bitmap, smoothing OFF, everywhere. ============================================================ */ #root .nitro-catalog-window, #root .nitro-catalog-window *, #root .nitro-catalog-window *::before, #root .nitro-catalog-window *::after { font-family: var(--c11-font) !important; font-style: normal !important; letter-spacing: 0 !important; -webkit-font-smoothing: none !important; -moz-osx-font-smoothing: unset !important; font-smooth: never; text-rendering: geometricPrecision !important; } /* Volter is a 9px bitmap face: any other size is interpolation = blur. */ #root .nitro-catalog-window { font-size: 9px !important; line-height: 11px !important; color: var(--c11-fg) !important; } #root .nitro-catalog-window :is(span, label, p, a, li, small, strong, b, em, button, input, select, option, textarea, div) { font-size: 9px !important; line-height: 11px !important; } /* ============================================================ 2. BLANKET RESET of modern affordances. Backgrounds are deliberately NOT reset here — the siblings own the interior surfaces and the page art is inline-styled. ============================================================ */ #root .nitro-catalog-window, #root .nitro-catalog-window * { border-radius: 0 !important; transition: none !important; animation: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; outline: none !important; } /* Soft/blurred shadows are the single biggest "new Habbo" tell. The window shell keeps its own HARD offset shadow (rule 3), hence the :not(). */ #root .nitro-catalog-window *:not(.nitro-card-shell) { box-shadow: none !important; text-shadow: none !important; filter: none !important; } #root .nitro-catalog-window :is(img, canvas) { image-rendering: pixelated !important; image-rendering: -moz-crisp-edges !important; image-rendering: crisp-edges !important; } /* ============================================================ 3. WINDOW SHELL 2011-windows.css already gives every card the hard 1px border and the hard offset shadow. Here we only square it off and repaint the body in the catalog's grey-blue. ============================================================ */ /* THE 2011 SHOP IS NOT A WINDOW. `catalog_main_container` (0,0 550x516) has no visual of its own: the only two shapes on screen are the notepad bitmap `layoutBackground` (0,0 380x516) and the captioned frame `navigatorMain` (369,24 175x406). So the Nitro card that hosts them must be completely invisible - no border, no background, no shadow - and it must have NO title bar (the only caption in the layout belongs to navigatorMain, and that caption is now also the drag handle and carries the close X). */ #root .nitro-catalog-window.nitro-catalog-window { border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; filter: none !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; } /* no outer title bar - belt and braces, the element is no longer rendered */ #root .nitro-catalog-window .nitro-card-header-shell, #root .nitro-catalog-window .nitro-card-header { display: none !important; } #root .nitro-catalog-window .nitro-card-content-shell { background: transparent !important; border-radius: 0 !important; /* The 2011 layout box is 550x516 with everything absolutely positioned at the original coordinates; any padding here shifts every child. */ padding: 0 !important; gap: 0 !important; width: 550px !important; height: 516px !important; min-height: 516px !important; max-height: 516px !important; flex: 0 0 516px !important; overflow: hidden !important; } /* ============================================================ 3b. THE 550x516 LAYOUT BOX `catalog_larger` layout, Habbo.swf 63-BUILD406. MEASURED FROM THE OWNER'S REFERENCE (preview/reference-2011-shop.png): the notepad page is 370px of white at an unscaled 10px coil pitch, and only `catalog_larger` has a 370px page. `catalog` (530x481, 360px page) is the WRONG variant and is no longer what the live build implements. frame navigatorMain 369,24 175x406 (navigation, RIGHT) bitmap layoutBackground 0,0 380x516 container layoutContainer 6,37 359x451 (page content, LEFT) The card is 516px of layout and nothing else, never resizable. ============================================================ */ #root .nitro-catalog-window.nitro-catalog-window { width: 550px !important; min-width: 550px !important; max-width: 550px !important; height: 516px !important; min-height: 516px !important; max-height: 516px !important; } #root .draggable-window:has(> .nitro-catalog-window) { width: 550px !important; height: 516px !important; background: transparent !important; box-shadow: none !important; border: 0 !important; min-width: 550px !important; max-width: 550px !important; resize: none !important; } #root .nitro-catalog-window .nitro-catalog-stage { position: absolute !important; inset: 0 !important; display: block !important; gap: 0 !important; } #root .nitro-catalog-window .nitro-catalog-layout-shell { position: absolute !important; left: 6px !important; top: 37px !important; width: 359px !important; height: 451px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #root .nitro-catalog-window .nitro-catalog-sidebar { position: absolute !important; left: 369px !important; top: 24px !important; width: 175px !important; height: 406px !important; display: block !important; gap: 0 !important; overflow: visible !important; } /* layoutBackground — bitmap 0,0 380x516: the spiral-bound notepad page. The art is regenerated for this box by _remaster/tools/notepad_resize.py, which splices whole 10px coil periods and uniform body rows into the 360x481 original rather than resampling it, so the coil dither, the mitred slab and the transparent coil holes survive bit-exact. The white page ends at x=369, which is exactly navigatorMain.x. It used to be `.nitro-catalog-stage::before`; it is a real DOM element now so the layout verifier can measure it. (2011-catalog-pages.css section 100 still paints the old pseudo-element - that rule is now inert, because nothing declares `content` on it any more.) */ #root .nitro-catalog-window .nitro-catalog-layout-background { position: absolute !important; left: 0 !important; top: 0 !important; width: 380px !important; height: 516px !important; background: url("/skin/2011ui/notepad_bg.png") 0 0 no-repeat !important; background-size: 380px 516px !important; image-rendering: pixelated !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; z-index: 0 !important; } #root .nitro-catalog-window .nitro-catalog-layout-shell, #root .nitro-catalog-window .nitro-catalog-sidebar { z-index: 1 !important; } /* The frame + its caption. Flash `frame` colour was 0xff418db0. */ #root .nitro-catalog-window .nitro-catalog-nav-frame { position: absolute !important; inset: 0 !important; border: 0 !important; border-radius: 0 !important; background: #418db0 !important; box-shadow: inset 0 0 0 1px #2d6f8f, inset 0 2px 0 #6aa5c0, 3px 3px 0 rgba(0, 0, 0, 0.28) !important; } #root .nitro-catalog-window .nitro-catalog-nav-frame-caption { position: absolute !important; left: 0 !important; top: 0 !important; width: 175px !important; height: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 4px !important; background: #408caf url("/skin/2011ui/caption_dots.png") repeat !important; image-rendering: pixelated !important; color: #ffffff !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; text-shadow: 1px 1px 0 #23566a !important; } /* the label sits on a solid patch, i.e. it is punched out of the dotted rule */ #root .nitro-catalog-window .nitro-catalog-nav-frame-caption > span { background: #408caf !important; padding: 0 6px !important; } #root .nitro-catalog-window .nitro-catalog-nav-frame-body { position: absolute !important; left: 0 !important; top: 15px !important; right: 0 !important; bottom: 0 !important; } #root .nitro-catalog-window .nitro-catalog-nav-frame-caption { cursor: move !important; user-select: none !important; } #root .nitro-catalog-window .nitro-catalog-nav-frame-caption-actions { position: absolute !important; right: 3px !important; top: 1px !important; display: flex !important; align-items: center !important; gap: 2px !important; background: #408caf !important; padding-left: 2px !important; } /* close X - the ONLY close button in the 2011 layout */ #root .nitro-catalog-window button.nitro-catalog-nav-close { width: 13px !important; height: 13px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: url("/skin/2011ui/catalog_close_x.png") center center no-repeat !important; background-size: 13px 13px !important; image-rendering: pixelated !important; box-shadow: none !important; cursor: pointer !important; flex: 0 0 auto !important; } #root .nitro-catalog-window button.nitro-catalog-nav-close:active { transform: translate(1px, 1px) !important; } #root .nitro-catalog-window button.nitro-catalog-nav-admin-toggle { width: 13px !important; height: 13px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #ffffff !important; } /* ============================================================ 4. CURRENCY CHIPS (.nitro-catalog-mobile-header) Small flat pixel chips, Volter numerals, coin art unsmoothed. Visibility is left to the bundle — we only repaint. ============================================================ */ #root .nitro-catalog-window .nitro-catalog-mobile-header { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 3px !important; padding: 2px 4px !important; background: var(--c11-panel-lo) !important; border-bottom: 1px solid var(--c11-outline) !important; } #root .nitro-catalog-window .nitro-catalog-mobile-currency { display: flex !important; align-items: center !important; gap: 3px !important; padding: 0 !important; background: none !important; border: 0 !important; } #root .nitro-catalog-window .nitro-catalog-coin { display: flex !important; align-items: center !important; gap: 2px !important; height: 16px !important; padding: 0 3px !important; border: 1px solid var(--c11-btn-bd) !important; background: var(--c11-btn-bg) !important; box-shadow: inset 0 1px 0 var(--c11-btn-hi) !important; } #root .nitro-catalog-window .nitro-catalog-coin > span { font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: var(--c11-fg) !important; } #root .nitro-catalog-window .nitro-currency-icon { width: 15px !important; height: 15px !important; background-size: contain !important; image-rendering: pixelated !important; } /* ============================================================ 5. TAB ROW — DELETED. The 2011 `catalog` layout has no tab row at all; the navigation tree on the right is the only way into a page. CatalogView.tsx no longer renders NitroCardTabsView, so there is nothing left to style here. Belt and braces in case something else revives it: ============================================================ */ #root .nitro-catalog-window .nitro-catalog-tabs-shell, #root .nitro-catalog-window .nitro-card-tabs-shell { display: none !important; } /* ============================================================ 6. PAGE HEADER STRIP (.nitro-catalog-swf-header) 2011 puts this INSIDE the page, not in the window chrome: bitmap ctlg_header_img 0,0 339x68 text ctlg_header_text 12,73 315x52 multiline word_wrap So it is now the first child of .nitro-catalog-layout-shell and is rendered as the genuine headline GIF at natural size on the panel, with the page copy in 9px Volter underneath. ============================================================ */ #root .nitro-catalog-window .nitro-catalog-swf-header.nitro-catalog-swf-header { position: relative !important; display: block !important; flex: 0 0 auto !important; width: 359px !important; height: auto !important; max-height: 125px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; overflow: hidden !important; } #root .nitro-catalog-window .nitro-catalog-swf-header-bg { display: none !important; } #root .nitro-catalog-window .nitro-catalog-swf-header-bg[style*='url('] { display: block !important; position: static !important; width: 339px !important; height: 68px !important; margin: 0 0 0 10px !important; background-repeat: no-repeat !important; background-position: left top !important; background-size: contain !important; opacity: 1 !important; filter: none !important; image-rendering: pixelated !important; } #root .nitro-catalog-window .nitro-catalog-swf-header-icon { position: static !important; display: flex !important; align-items: center !important; width: auto !important; height: 20px !important; margin: 2px 0 0 12px !important; padding: 0 !important; transform: none !important; background: none !important; border: 0 !important; } #root .nitro-catalog-window .nitro-catalog-swf-header-icon img { width: 20px !important; height: 20px !important; object-fit: contain !important; image-rendering: pixelated !important; } #root .nitro-catalog-window .nitro-catalog-swf-header-copy { position: static !important; display: block !important; width: 315px !important; margin: 5px 0 0 22px !important; padding: 0 !important; color: var(--c11-fg) !important; text-shadow: none !important; } #root .nitro-catalog-window .nitro-catalog-swf-header-title.nitro-catalog-swf-header-title { font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: var(--c11-fg) !important; text-shadow: none !important; text-transform: none !important; } /* ctlg_header_text — 315x52, three lines of 9px Volter, word-wrapped. */ #root .nitro-catalog-window .nitro-catalog-swf-header-description.nitro-catalog-swf-header-description { display: block !important; margin: 0 !important; max-height: 52px !important; font-size: 9px !important; line-height: 11px !important; color: var(--c11-fg) !important; overflow: hidden !important; } /* When the page ships headline art the art already carries the page name, so the icon + title fallback is dropped (exactly as in 2011). */ #root .nitro-catalog-window .nitro-catalog-swf-header:has(.nitro-catalog-swf-header-bg[style*='url(']) .nitro-catalog-swf-header-icon, #root .nitro-catalog-window .nitro-catalog-swf-header:has(.nitro-catalog-swf-header-bg[style*='url(']) .nitro-catalog-swf-header-title { display: none !important; } /* Enabling ctlg_header_text (above) makes the page copy appear twice, because CatalogLayoutDefaultView also prints page.localization.getText(0) beside the teaser image. 2011 renders it once, at 12,73, so the duplicate is dropped here. The teaser image itself is kept. Whoever owns ctlg_default_3x3 may delete this rule once that block is rebuilt. */ #root .nitro-catalog-window .nitro-catalog-welcome > :not(img) { display: none !important; } /* ============================================================ 7. SHARED BUTTON / FIELD RECIPE Siblings inherit these; only override the bits you must. Nitro's Button component renders a DIV, hence the class combo `.cursor-pointer.select-none.no-underline`. ============================================================ */ #root .nitro-catalog-window :is(input[type='text'], input[type='search'], input[type='number'], input[type='password'], textarea, select) { height: 18px !important; padding: 0 4px !important; border: 1px solid var(--c11-btn-bd) !important; border-radius: 0 !important; background: var(--c11-field-bg) !important; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.14) !important; color: var(--c11-fg) !important; font-size: 9px !important; line-height: 11px !important; } #root .nitro-catalog-window textarea { height: auto !important; padding: 2px 4px !important; } #root .nitro-catalog-window :is(input, textarea)::placeholder { color: #8a9aa0 !important; font-style: normal !important; } #root .nitro-catalog-window :is(button, .cursor-pointer.select-none.no-underline) { min-height: 18px !important; padding: 1px 8px !important; border: 1px solid var(--c11-btn-bd) !important; border-radius: 0 !important; background: var(--c11-btn-bg) !important; box-shadow: inset 0 1px 0 var(--c11-btn-hi), inset 0 -1px 0 var(--c11-btn-lo) !important; color: var(--c11-btn-fg) !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; text-shadow: none !important; } #root .nitro-catalog-window :is(button, .cursor-pointer.select-none.no-underline):hover { background: var(--c11-btn-hover-bg) !important; } #root .nitro-catalog-window :is(button, .cursor-pointer.select-none.no-underline):active { background: var(--c11-btn-down-bg) !important; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.25) !important; } /* The close button is chrome, not a form button — 2011-windows.css owns it. */ #root .nitro-catalog-window .nitro-card-close-button { min-height: 0 !important; padding: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; } /* ============================================================ 8. SCROLLBARS — chunky, bordered, square. ============================================================ */ #root .nitro-catalog-window ::-webkit-scrollbar { width: 11px; height: 11px; } #root .nitro-catalog-window ::-webkit-scrollbar-track { background: #cdd8dc; border-left: 1px solid var(--c11-panel-lo); } #root .nitro-catalog-window ::-webkit-scrollbar-thumb { background: var(--c11-btn-bg); border: 1px solid var(--c11-btn-bd); } #root .nitro-catalog-window ::-webkit-scrollbar-thumb:hover { background: var(--c11-btn-hover-bg); } /* == A1 CAPTION CASCADE FIX ================================================= 2011-catalog-pages.css section 102 styles EVERY button in the window with #root .nitro-catalog-window :is(button, .cursor-pointer.select-none) :not([class*="navigation"]):not([class*="tab"]) which scores (1,5,0) and loads after this file, so it was repainting the caption's close X as a grey bevelled button. The caption label was likewise losing its colour, and rule 2's blanket `text-shadow: none` was flattening it. Both are won back on specificity, not by touching another agent's file. ========================================================================= */ #root .nitro-catalog-window .nitro-catalog-nav-frame .nitro-catalog-nav-frame-caption.nitro-catalog-nav-frame-caption > span { background: #408caf !important; padding: 0 6px !important; color: #ffffff !important; font-weight: 700 !important; text-shadow: 1px 1px 0 #23566a !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 { width: 13px !important; height: 13px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: url("/skin/2011ui/catalog_close_x.png") center center no-repeat !important; background-color: transparent !important; background-size: 13px 13px !important; image-rendering: pixelated !important; box-shadow: none !important; text-shadow: none !important; font-size: 0 !important; cursor: pointer !important; flex: 0 0 auto !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:hover { opacity: 0.8 !important; } #root .nitro-catalog-window .nitro-catalog-nav-frame-caption .nitro-catalog-nav-frame-caption-actions.nitro-catalog-nav-frame-caption-actions { height: 13px !important; top: 1px !important; }