/* ============================================================================
2011-login-base.css — Agent 1 (foundation) of the 2011 login re-skin
----------------------------------------------------------------------------
SHARED window chrome + font + "kill everything modern" reset for the
PRE-AUTH login view only (.nitro-login-view). Component internals live in
the four sibling files that load AFTER this one:
2011-login-news.css 2011-login-language.css
2011-login-auth.css 2011-login-register.css
CASCADE NOTES (read before editing):
* Nitro's own bundle CSS (/src/assets/src-*.css) is loaded AFTER every
/skin/ , and carries !important on a lot of rules. Plain selectors
lose. EVERY rule here is anchored on #root .nitro-login-view so the id
selector out-ranks the bundle, and !important is used wherever the bundle
uses it.
* 2011-windows.css (loaded before this file) styles #root .nitro-card-shell
globally for the in-game windows. Our selectors are strictly longer
(#root .nitro-login-view .nitro-card-shell) so they win inside the login
view without disturbing the in-game chrome.
* The bundle pins pixel widths with !important and derives flex layout from
them: widening an element makes it PAINT OVER its neighbour instead of
reflowing. Restyle WITHIN the existing geometry.
* 2011-purse.css USED to carry a whole second section styling
.nitro-login-view at (1,3,0) specificity - that was the look the owner
rejected, and it silently beat plain #root .nitro-login-view .foo rules.
It has been removed from that file (backup:
~/habbo/nitro/assets/2011-purse.css.prelogin2011.bak). The /skin/2011-login-*
layer is now the ONLY owner of .nitro-login-view. Do not re-add login
rules to 2011-purse.css / 2011-toolbar.css / 2011-windows.css.
* Chrome selectors here DOUBLE the class (.card-title.card-title) to reach
(1,3,0) so they beat any surviving 3-class bundle rule. Copy that habit.
PALETTE — sampled from Example1.jpg (genuine 63-BUILD406 screenshot,
the "Mod Tools" window) and Example2.webp. Do not invent new colours;
siblings must reuse the custom properties below so adjacent boxes match.
ART: no usable bitmap window chrome survives in Habbo.swf - the client's
nine-slice window skin lives in two atlases named habbo_bitmap_skin_png /
habbo_bitmap_skin2_png that are referenced by
HabboWindowManagerCom_habbo_skin_border_{4..8}_xml but are NOT among the
884 embedded bitmaps (checked every SymbolClass entry and eyeballed every
candidate atlas). The chrome below is therefore hand-written pixel CSS
sampled from Example1.jpg. Real 2011 micro-art that IS available:
/skin/2011ui/check_green.png (11x10 tick) and /skin/2011ui/close_x.png
(20x20 close glyph), both cut from Habbo.swf symbol _-2wF.
========================================================================= */
#root .nitro-login-view {
/* window frame */
--c11-outline: #1c3f4f; /* hard 1px outer window border */
--c11-shadow: rgba(0, 0, 0, 0.35); /* HARD offset shadow, never blurred */
/* title bar (flat - 2011 had no gradient here) */
--c11-title-bg: #4b8aa4;
--c11-title-hi: #6ba3b9; /* 1px highlight along the very top */
--c11-title-lo: #35748d; /* 1px line under the title bar */
--c11-title-fg: #ffffff;
--c11-title-sh: #23566a; /* 1px pixel drop shadow on title text */
/* body / content panel */
--c11-panel-bg: #dfe5e7; /* light grey-blue window body */
--c11-panel-hi: #f2f5f6; /* 1px inner top highlight */
--c11-panel-lo: #b7c8cf; /* 1px inner bottom / separator */
--c11-field-bg: #ffffff;
--c11-rule: #b7c8cf;
/* 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;
--c11-font: Volter, 'Volter (Goldfish)', 'Volter Goldfish', monospace;
}
/* ============================================================
1. FONT — Volter, 9px bitmap, smoothing OFF, everywhere.
============================================================ */
#root .nitro-login-view,
#root .nitro-login-view * ,
#root .nitro-login-view *::before,
#root .nitro-login-view *::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-login-view {
font-size: 9px !important;
line-height: 11px !important;
color: var(--c11-fg) !important;
}
#root .nitro-login-view :is(span, label, p, a, li, small, strong, b, em, div,
button, input, select, option, textarea) {
font-size: 9px !important;
line-height: 11px !important;
}
/* ============================================================
2. BLANKET RESET of modern affordances inside the login view.
(Backgrounds are deliberately NOT reset here - the sky and
the hotel diorama are ![]()
layers and must survive.)
============================================================ */
#root .nitro-login-view,
#root .nitro-login-view * {
border-radius: 0 !important;
transition: none !important;
animation: none !important;
text-shadow: none;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
outline: none;
}
#root .nitro-login-view :is(img, canvas, .login-layer-img) {
image-rendering: pixelated !important;
image-rendering: -moz-crisp-edges !important;
image-rendering: crisp-edges !important;
}
/* Anything that paints chrome must be flat: no gradients, no blur. */
#root .nitro-login-view :is(.nitro-card-shell, .nitro-card-header-shell,
.nitro-card-content-shell, .card-title, .card-body,
button, input, select, textarea, a) {
background-image: none !important;
box-shadow: none !important;
opacity: 1 !important;
}
/* ============================================================
3. WINDOW SHELL
1px hard dark outline, 1px inner light bevel, flat fill,
one HARD offset shadow. No radius anywhere.
============================================================ */
#root .nitro-login-view .nitro-card-shell.nitro-card-shell {
box-sizing: border-box !important;
border: 1px solid var(--c11-outline) !important;
border-radius: 0 !important;
background: var(--c11-panel-bg) !important;
background-image: none !important;
filter: none !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;
}
/* ============================================================
4. TITLE BAR
============================================================ */
#root .nitro-login-view .nitro-card-header-shell.nitro-card-header-shell,
#root .nitro-login-view .card-title.card-title {
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 21px !important;
height: 21px !important;
max-height: 21px !important;
padding: 0 6px !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--c11-title-lo) !important;
border-radius: 0 !important;
background: var(--c11-title-bg) !important;
background-image: none !important;
box-shadow: inset 0 1px 0 0 var(--c11-title-hi) !important;
filter: none !important;
}
#root .nitro-login-view .nitro-card-title.nitro-card-title,
#root .nitro-login-view .card-title > span,
#root .nitro-login-view .card-title > label {
/* The bundle pins min-height:31px / max-height on .nitro-card-title, which
vertically overflows a 21px title bar and gets clipped away entirely by
the shell's overflow:hidden. Unpin it. */
display: block !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
inset: auto !important;
position: static !important;
font-family: var(--c11-font) !important;
font-size: 9px !important;
line-height: 11px !important;
font-weight: 700 !important;
color: var(--c11-title-fg) !important;
text-shadow: 1px 1px 0 var(--c11-title-sh) !important;
text-transform: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ============================================================
5. CONTENT PANEL
============================================================ */
#root .nitro-login-view .nitro-card-content-shell.nitro-card-content-shell,
#root .nitro-login-view .card-body.card-body {
box-sizing: border-box !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--c11-panel-bg) !important;
background-image: none !important;
box-shadow: inset 0 1px 0 0 var(--c11-panel-hi) !important;
color: var(--c11-fg) !important;
filter: none !important;
}
/* Hard 1px rules only - never a soft gradient hairline. */
#root .nitro-login-view :is(hr, .divider) {
border: 0 !important;
border-top: 1px solid var(--c11-rule) !important;
height: 0 !important;
background: none !important;
}
/* ============================================================
6. THE REUSABLE 2011 BUTTON
Siblings: add your own selector to the .btn2011 list, or just
restyle within these rules. Keep the 3 box-shadow lines - they
are the whole bevel (1px inset white top, 1px inset dark bottom,
1px hard outer drop). Never add blur.
============================================================ */
#root .nitro-login-view .btn2011.btn2011,
#root .nitro-login-view button.button2011,
#root .nitro-login-view button {
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 16px !important;
padding: 3px 8px !important;
border: 1px solid var(--c11-btn-bd) !important;
border-radius: 0 !important;
background: var(--c11-btn-bg) !important;
background-image: none !important;
color: var(--c11-btn-fg) !important;
font-family: var(--c11-font) !important;
font-size: 9px !important;
line-height: 9px !important;
font-weight: 700 !important;
text-shadow: none !important;
text-transform: none !important;
cursor: pointer !important;
transition: none !important;
filter: none !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 .btn2011:hover,
#root .nitro-login-view button:hover {
background: var(--c11-btn-hover-bg) !important;
}
#root .nitro-login-view .btn2011:active,
#root .nitro-login-view button:active {
background: var(--c11-btn-down-bg) !important;
box-shadow:
inset 1px 1px 0 0 var(--c11-btn-lo),
inset 0 -1px 0 0 var(--c11-btn-hi) !important;
}
/* ============================================================
7. FIELDS + LINKS (shared baseline only; the auth agent owns
the login form's own field layout.)
============================================================ */
#root .nitro-login-view :is(input[type='text'], input[type='password'],
input[type='email'], select, textarea) {
box-sizing: border-box !important;
border: 1px solid var(--c11-btn-bd) !important;
border-radius: 0 !important;
background: var(--c11-field-bg) !important;
background-image: none !important;
color: var(--c11-fg) !important;
font-family: var(--c11-font) !important;
font-size: 9px !important;
line-height: 11px !important;
box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.16) !important;
outline: none !important;
}
#root .nitro-login-view input[type='checkbox'] {
appearance: none !important;
-webkit-appearance: none !important;
width: 11px !important;
height: 11px !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 0 rgba(0, 0, 0, 0.16) !important;
}
/* The tick is the GENUINE 11x10 green check sprite lifted out of Habbo.swf
(symbol _-2wF, the client's shared micro-UI atlas). Published at
/skin/2011ui/check_green.png - verified image/png over HTTP. */
#root .nitro-login-view input[type='checkbox']:checked {
background: var(--c11-field-bg) url('/skin/2011ui/check_green.png') center no-repeat !important;
background-size: 11px 10px !important;
image-rendering: pixelated !important;
}
#root .nitro-login-view a {
color: var(--c11-link) !important;
text-decoration: underline !important;
text-underline-offset: 1px !important;
text-shadow: none !important;
}
/* 2011 scrollbar: chunky, square, bordered. */
#root .nitro-login-view ::-webkit-scrollbar { width: 11px; height: 11px; }
#root .nitro-login-view ::-webkit-scrollbar-track {
background: #c9d3d6;
border-left: 1px solid var(--c11-panel-lo);
}
#root .nitro-login-view ::-webkit-scrollbar-thumb {
background: var(--c11-btn-bg);
border: 1px solid var(--c11-btn-bd);
border-radius: 0;
}