/* ============================================================================ 2011-login-news.css — the HOTEL NEWS box, 63-BUILD406 client chrome ---------------------------------------------------------------------------- Loads AFTER 2011-login-base.css. Shared chrome (shell / title bar / button recipe / font reset / palette --c11-*) is the base file's job; everything here is internal to .nitro-news-card. CASCADE: every selector is anchored on #root .nitro-login-view and chrome classes are DOUBLED (.foo.foo) to reach (1,3,0), matching the base file, so we out-rank Nitro's runtime-injected bundle CSS. !important throughout, because the bundle uses it. ART: the pager arrows are GENUINE 2011 client sprites cut out of Habbo.swf (symbols _-4m- and _-CC, 5x10 black pixel triangles with a 1px white under-shadow), published as /skin/2011ui/news_arrow_blk_prev.png /skin/2011ui/news_arrow_blk_next.png Verified image/png over HTTP. No glyph characters are used - the "<" / ">" text nodes React renders are collapsed to 0px and painted transparent. 2011 rules obeyed: no radius, no gradient, no blur, no transition, tight paddings (2011 windows were 4-6px, not 10px), 9px Volter only, and image-rendering: pixelated on the article art. ========================================================================= */ /* ------------------------------------------------------------------ 1. THE WINDOW — keep the base shell, just make sure nothing modern leaks in and that the box hugs its content. ------------------------------------------------------------------ */ #root .nitro-login-view .nitro-news-card.nitro-news-card { flex-direction: column !important; /* NOTE: the 388px shell width is pinned upstream (.login-news-stack / .news-card-wrapper are both 388px) and fit-content cannot shrink it, because the single-line max-content width of .news-text exceeds 388. So everything below is styled WITHIN 388px. */ background: var(--c11-panel-bg) !important; background-image: none !important; border: 1px solid var(--c11-outline) !important; border-radius: 0 !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 2px 2px 0 0 var(--c11-shadow) !important; } /* ------------------------------------------------------------------ 2. BODY — 2011 windows were TIGHT. 10px padding / 8px gap is modern Nitro spacing; the client used 5px around and 3-4px between rows. ------------------------------------------------------------------ */ #root .nitro-login-view .nitro-news-card .news-body.news-body { display: flex !important; flex-direction: column !important; padding: 5px !important; gap: 4px !important; background: var(--c11-panel-bg) !important; background-image: none !important; border: 0 !important; box-shadow: inset 0 1px 0 0 var(--c11-panel-hi) !important; color: var(--c11-fg) !important; } /* ------------------------------------------------------------------ 3. ARTICLE IMAGE — a plain inset frame: 1px hard dark outline, flat white fill, 1px inner top/left shade. Never rounded, never a striped gradient placeholder (that was the modern-Nitro look), never soft-scaled: the gif renders at its NATIVE pixel size so the 2011 art stays 1:1. ------------------------------------------------------------------ */ #root .nitro-login-view .nitro-news-card .news-image.news-image { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* edge-to-edge inset panel with the art centred on the white mat - a content-hugging frame left dead grey margins either side, which no 2011 window ever showed. */ align-self: stretch !important; width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 3px !important; margin: 0 !important; overflow: hidden !important; border: 1px solid var(--c11-outline) !important; border-radius: 0 !important; background: var(--c11-field-bg) !important; background-image: none !important; box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.16) !important; filter: none !important; } #root .nitro-login-view .nitro-news-card .news-image.news-image > img { display: block !important; width: auto !important; height: auto !important; /* NATIVE pixel size: any fractional scale would resample the 2011 art off its own pixel grid (a 290x241 gif squeezed to 180x150 looked mushy). Only cap it if an article image is wider than the window. */ max-width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; image-rendering: pixelated !important; image-rendering: -moz-crisp-edges !important; image-rendering: crisp-edges !important; } /* ------------------------------------------------------------------ 4. HEADLINE — bold 9px Volter, near-black, with the classic hard 1px separator under it. font-weight 800 is a synthesised smear on a bitmap face; 700 is the real bold cut. ------------------------------------------------------------------ */ #root .nitro-login-view .nitro-news-card .news-headline.news-headline { display: block !important; margin: 1px 0 0 !important; padding: 0 0 3px !important; border-bottom: 1px solid var(--c11-rule) !important; font-family: var(--c11-font) !important; font-size: 9px !important; line-height: 11px !important; font-weight: 700 !important; color: var(--c11-fg) !important; text-transform: none !important; text-shadow: none !important; letter-spacing: 0 !important; } /* ------------------------------------------------------------------ 5. BODY COPY — 9px Volter in the 2011 dark grey-blue. ------------------------------------------------------------------ */ #root .nitro-login-view .nitro-news-card .news-text.news-text { display: block !important; margin: 0 !important; padding: 0 !important; font-family: var(--c11-font) !important; font-size: 9px !important; line-height: 11px !important; font-weight: 400 !important; color: var(--c11-fg-dim) !important; text-shadow: none !important; } /* ------------------------------------------------------------------ 6. FOOTER + PAGER ------------------------------------------------------------------ */ #root .nitro-login-view .nitro-news-card .news-footer.news-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 1px 0 0 !important; padding: 4px 0 0 !important; border-top: 1px solid var(--c11-rule) !important; box-shadow: inset 0 1px 0 0 var(--c11-panel-hi) !important; gap: 4px !important; min-height: 0 !important; } #root .nitro-login-view .nitro-news-card .news-pager.news-pager { display: flex !important; align-items: center !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; } /* --- the tiny chunky square pixel buttons ------------------------- */ #root .nitro-login-view .nitro-news-card .news-pager .arrow-btn.arrow-btn { box-sizing: border-box !important; display: block !important; width: 13px !important; min-width: 13px !important; max-width: 13px !important; height: 14px !important; min-height: 14px !important; max-height: 14px !important; padding: 0 !important; margin: 0 !important; border: 1px solid var(--c11-btn-bd) !important; border-radius: 0 !important; /* real 2011 sprite, native 5x10, nearest-neighbour */ background-color: var(--c11-btn-bg) !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 5px 10px !important; /* collapse the "<" / ">" text node React puts inside */ font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-indent: -9999px !important; overflow: hidden !important; text-shadow: none !important; cursor: pointer !important; transition: none !important; image-rendering: pixelated !important; box-shadow: inset 0 1px 0 0 var(--c11-btn-hi), inset 0 -1px 0 0 var(--c11-btn-lo), 1px 1px 0 0 rgba(0, 0, 0, 0.22) !important; } #root .nitro-login-view .nitro-news-card .news-pager .arrow-btn.arrow-btn:first-child { background-image: url('/skin/2011ui/news_arrow_blk_prev.png') !important; } #root .nitro-login-view .nitro-news-card .news-pager .arrow-btn.arrow-btn:last-child { background-image: url('/skin/2011ui/news_arrow_blk_next.png') !important; } #root .nitro-login-view .nitro-news-card .news-pager .arrow-btn.arrow-btn:hover { background-color: var(--c11-btn-hover-bg) !important; } /* pressed: the bevel flips, exactly like a 2011 client button */ #root .nitro-login-view .nitro-news-card .news-pager .arrow-btn.arrow-btn:active { background-color: var(--c11-btn-down-bg) !important; background-position: calc(50% + 1px) calc(50% + 1px) !important; box-shadow: inset 1px 1px 0 0 var(--c11-btn-lo), inset 0 -1px 0 0 var(--c11-btn-hi) !important; } #root .nitro-login-view .nitro-news-card .news-pager .arrow-btn.arrow-btn:disabled { background-color: #d5dadb !important; opacity: 1 !important; filter: none !important; } /* --- "1/3" counter ----------------------------------------------- */ #root .nitro-login-view .nitro-news-card .news-pager .news-counter.news-counter { display: block !important; min-width: 22px !important; margin: 0 !important; padding: 0 1px !important; font-family: var(--c11-font) !important; font-size: 9px !important; line-height: 14px !important; font-weight: 700 !important; color: var(--c11-fg-dim) !important; text-align: center !important; text-shadow: none !important; white-space: nowrap !important; } /* the empty spacer the footer ships with must not grow a line box */ #root .nitro-login-view .nitro-news-card .news-footer > span:empty { display: block !important; flex: 1 1 auto !important; height: 0 !important; min-height: 0 !important; line-height: 0 !important; font-size: 0 !important; }