/* 2011 re-skin: the bottom toolbar.
------------------------------------------------------------------------
IMPORTANT / cascade note: this file is ed in index.html's , but
the app bundle injects its own at runtime, so the bundle ends up
AFTER this file in the cascade. Equal-specificity selectors therefore LOSE.
Every selector below is deliberately doubled (`.tb-icon.tb-icon`) to add one
class of specificity instead of reaching for !important; !important is used
only where the bundle itself is already !important (Tailwind `border!`) or
where the target has no stable class and is matched via :has().
------------------------------------------------------------------------
Colours are sampled straight out of Example2.webp (the 2011 hotel view):
bottom bar body ....... rgb( 40, 39, 32) #282720
button body ........... rgb( 72, 73, 68) #484944
button outline ........ rgb( 2, 2, 0) hard black, 1px
button inner rim ...... rgb(103,100, 94) #67645e, 1px, on all four sides
The black-outline + light-inner-rim pair is what makes 2011 buttons read
"chunky"; it is reproduced with `border` + `inset 0 0 0 1px` box-shadow.
House rules: flat opaque fills, no translucency, no backdrop blur, no soft
shadows, <= 4px radius, Volter bitmap type for labels.
*/
:root {
--t11-bar: #282720; /* bottom bar body */
--t11-bar-top: #4d4b44; /* 1px bevel under the bar top */
--t11-btn: #484944; /* button body */
--t11-btn-hover: #5c5d57;
--t11-btn-down: #383934;
--t11-rim: #67645e; /* 1px inner light rim */
--t11-rim-down: #2c2b26;
}
/* ============================================================== the bar == */
/* Flat and opaque with a hard black top rule and one 1px bevel line, in place
of the translucent slab with its two soft offset inset shadows. */
.nitro-toolbar-hobba.nitro-toolbar-hobba {
border-top: 1px solid #000;
background: var(--t11-bar);
box-shadow:
inset 0 1px 0 var(--t11-bar-top),
inset 0 -1px 0 #1a1915;
}
/* Narrow-viewport (< 1700px) bar. */
.nitro-toolbar-mobile-hobba.nitro-toolbar-mobile-hobba {
border: 1px solid #000;
border-radius: 4px;
background: var(--t11-bar);
box-shadow:
inset 0 0 0 1px #3d3b35,
0 1px 0 rgba(0, 0, 0, .7);
}
/* ================================================== icon buttons (plates) */
/* Toolbar sprites ship at every size from 21x21 to 44x25 to 38x45. Each is
centred at its NATIVE size (no rescale => no blur on pixel art) inside one
uniform 40x40 plate, so the row gets an even 2011 rhythm.
`.nitro-icon.icon-habbo` (0,2,0) sets width/height, hence the trailing
`.tb-icon` here to reach 0,3,0. */
.nitro-icon.tb-icon.tb-icon,
.tb-icon.tb-avatar-head.tb-avatar-head {
box-sizing: border-box;
width: 40px;
height: 40px;
flex: 0 0 auto;
background-position: center;
background-repeat: no-repeat;
background-color: var(--t11-btn);
border: 1px solid #000;
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--t11-rim);
filter: none;
transition: none;
}
/* Sprites larger than the plate are fitted rather than cropped. */
.nitro-icon.tb-icon.icon-camera,
.nitro-icon.tb-icon.icon-soundboard,
.nitro-icon.tb-icon.icon-buildersclub,
.nitro-icon.tb-icon.icon-inventory,
.nitro-icon.tb-icon.icon-rooms,
.nitro-icon.tb-icon.icon-fortune-wheel {
background-size: contain;
}
/* The avatar head is painted by LayoutAvatarImageView with inline
background-size/-position (hence the !important pair already in the bundle);
only the plate chrome is added here. */
.tb-icon.tb-avatar-head.tb-avatar-head {
background-color: #3c5d7a; /* saturated 2011 blue behind the head */
}
.nitro-icon.tb-icon.tb-icon:hover,
.tb-icon.tb-avatar-head.tb-avatar-head:hover {
background-color: var(--t11-btn-hover);
transform: none;
filter: none;
}
.tb-icon.tb-avatar-head.tb-avatar-head:hover {
background-color: #4a7096;
}
.nitro-icon.tb-icon.tb-icon:active,
.tb-icon.tb-avatar-head.tb-avatar-head:active {
background-color: var(--t11-btn-down);
box-shadow: inset 0 0 0 1px var(--t11-rim-down);
transform: translateY(1px);
}
/* Unread messenger icon: flat saturated 2011 green instead of a modern pulse. */
.nitro-icon.tb-icon.is-unseen {
background-color: #4f8f2e;
box-shadow: inset 0 0 0 1px #8ac264;
animation: none;
}
/* Tighter, even gutters; the plates now carry the rhythm. */
.tb-open-shell.tb-open-shell {
gap: 4px;
padding-top: 6px;
padding-bottom: 5px;
}
/* Hard carved rule instead of the translucent hairline. */
.tb-open-shell .bg-white\/20 {
width: 2px;
height: 28px;
background: #000;
box-shadow: 1px 0 0 #56544c;
margin-left: 5px;
margin-right: 6px;
opacity: 1;
}
/* Count badges riding on the plates: flat red, hard black outline.
The bundle marks these Tailwind utilities important, so we must match. */
.tb-open-shell .bg-danger,
.nitro-toolbar-mobile-hobba .bg-danger {
background: #cf2a19 !important;
border: 1px solid #000 !important;
border-radius: 2px !important;
box-shadow: inset 0 0 0 1px #e8705f;
font-family: Volter, "Volter (Goldfish)", monospace;
-webkit-font-smoothing: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}
/* ========================================================= collapse arrows */
.tb-collapse.tb-collapse {
width: 16px;
height: 40px;
margin-top: 6px;
border-radius: 4px;
background: var(--t11-btn);
border: 1px solid #000;
color: #efeee7;
box-shadow: inset 0 0 0 1px var(--t11-rim);
transition: none;
}
.tb-collapse.tb-collapse:hover {
background: var(--t11-btn-hover);
color: #fff;
}
.tb-collapse.tb-collapse:active {
background: var(--t11-btn-down);
box-shadow: inset 0 0 0 1px var(--t11-rim-down);
}
/* ============================================================ "Me" popover */
/* ToolbarMeView styles its shell with inline Tailwind arbitrary values and has
no stable class of its own, so it is matched by the icon set it contains. */
div:has(> .icon-me-profile) {
background: var(--t11-bar) !important;
border: 1px solid #000 !important;
border-radius: 4px !important;
box-shadow:
inset 0 0 0 1px #4d4b44,
2px 2px 0 rgba(0, 0, 0, .5) !important;
padding: 5px !important;
gap: 4px !important;
}
.nitro-icon.navigation-item.navigation-item {
box-sizing: border-box;
width: 38px;
height: 38px;
background-position: center;
background-size: contain;
background-color: var(--t11-btn);
border: 1px solid #000;
border-radius: 4px;
box-shadow: inset 0 0 0 1px var(--t11-rim);
opacity: 1;
transition: none;
}
.nitro-icon.navigation-item.navigation-item:hover {
background-color: var(--t11-btn-hover);
transform: none;
filter: none;
}
.nitro-icon.navigation-item.navigation-item:active {
background-color: var(--t11-btn-down);
box-shadow: inset 0 0 0 1px var(--t11-rim-down);
}
/* ============================================================== friend bar */
/* NOTE: the friend chips (.find-friends / .find-friends-active) already use
the genuine 2011 nine-slice border-image PNGs shipped in the bundle, so
their fills are deliberately NOT touched - only the type and the
surrounding chrome are restyled here. */
.friend-bar.friend-bar {
height: 40px;
max-height: 40px;
gap: 4px;
font-family: Volter, "Volter (Goldfish)", monospace;
}
.friend-bar .friend-bar-text.friend-bar-text,
.friend-bar .friend-bar-request.friend-bar-request,
.friend-bar .friend-bar-empty.friend-bar-empty {
font-family: Volter, "Volter (Goldfish)", monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
-webkit-font-smoothing: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .8);
}
/* Long localised strings ("No tienes amigos conectados") are wider in the
bitmap face than in Ubuntu, so they are clamped rather than allowed to spill
out of the clipped toolbar slot. */
.friend-bar .friend-bar-text.friend-bar-text {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 9px is Volter's native bitmap size, so this label is pixel-exact. */
.friend-bar .friend-bar-empty.friend-bar-empty {
font-size: 9px;
overflow: hidden;
text-overflow: ellipsis;
}
.friend-bar .friend-bar-search-icon.friend-bar-search-icon {
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .8));
}
/* Scroll arrows get the same black-outline / light-rim plate as the icons. */
.friend-bar .friend-bar-button.friend-bar-button {
width: 18px;
height: 34px;
border: 1px solid #000;
border-radius: 4px;
background: var(--t11-btn);
box-shadow: inset 0 0 0 1px var(--t11-rim);
}
.friend-bar .friend-bar-button.friend-bar-button:hover:not(.is-disabled) {
background: var(--t11-btn-hover);
}
.friend-bar .friend-bar-button.friend-bar-button.is-disabled {
filter: none;
opacity: 1;
background: #34352f;
box-shadow: inset 0 0 0 1px #4a4b45;
}
.friend-bar .friend-bar-button.is-disabled .friend-bar-chevron {
color: #75766e;
}
.friend-bar .friend-bar-chevron.friend-bar-chevron {
color: #efeee7;
}
/* ============================ friend-bar popovers (find friends / actions) */
.friend-bar-find-friends-panel.friend-bar-find-friends-panel {
background: var(--t11-bar);
border: 1px solid #000;
border-radius: 4px;
box-shadow:
inset 0 0 0 1px #4d4b44,
2px 2px 0 rgba(0, 0, 0, .5);
color: #fff;
font-family: Volter, "Volter (Goldfish)", monospace;
-webkit-font-smoothing: none;
}
.friend-bar-find-friends-header.friend-bar-find-friends-header {
font-weight: 700;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .8);
}
.friend-bar-find-friends-button.friend-bar-find-friends-button {
background: #4f8f2e;
border: 1px solid #000;
border-radius: 4px;
color: #fff;
font-family: Volter, "Volter (Goldfish)", monospace;
font-weight: 700;
-webkit-font-smoothing: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
box-shadow: inset 0 0 0 1px #86c063;
}
.friend-bar-find-friends-button.friend-bar-find-friends-button:hover {
background: #5ea337;
}
.friend-bar-find-friends-button.friend-bar-find-friends-button:active {
background: #3e7523;
box-shadow: inset 0 0 0 1px #2c5518;
}
/* == AGENT3-CLIP ==========================================================
MEASURED: the friend-bar scroll arrows are laid out in 14px slots
(wrapper div computed width: 14px) but this file was giving the
button itself width:18px, so each arrow bled 4px over the chip
beside it:
wrapper x=1576 w=14 button x=1576 w=18 (+4 right)
wrapper x=1865 w=14 button x=1861 w=18 (+4 left)
Fixed by shrinking the arrow to its slot, not by widening the
slot - the toolbar row derives its layout from pinned widths.
========================================================= */
#root .friend-bar .friend-bar-button.friend-bar-button {
width: 14px !important;
max-width: 100% !important;
box-sizing: border-box !important;
flex: 0 0 14px !important;
}
#root .friend-bar .friend-bar-button .friend-bar-chevron,
#root .friend-bar .friend-bar-button svg {
max-width: 100%;
}
/* "No tienes amigos conectados" was being sliced mid-word: the chip is
a flex container, and text-overflow does not apply to one, so the
label needs its own clamped inline box. */
#root .friend-bar .friend-bar-empty.friend-bar-empty {
display: block !important;
line-height: 34px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* == AGENT3-FIT ==============================================
Volter is a wider bitmap face than the system sans that was
actually painting when these rules said "Ubuntu" (Ubuntu never
loads - document.fonts reports it unloaded). So switching to the
authentic face pushed several labels past their PINNED widths:
span "Traducir" 56px inside a 50px .nitro-purse__btn
"Hazte socio" truncated to "Hazte ..." in a 101px button
span.friend-bar-text truncated to "Find ne..." in a 127px chip
span.room-tool-label 104px + 30px indent inside a 126px row
.nitro-purse-button__amount "18.4k" clipped in a 25px box
The fix is to drop to Volter's NATIVE 9px rather than widen the
parents: the bundle pins these widths with !important and derives
the flex row from them, so widening makes an element paint over
its neighbour instead of reflowing.
========================================================= */
html body #root .friend-bar .friend-bar-text.friend-bar-text,
html body #root .friend-bar .friend-bar-request.friend-bar-request,
html body #root .friend-bar .friend-bar-empty.friend-bar-empty {
font-size: 9px !important;
line-height: 12px !important;
letter-spacing: 0 !important;
}
html body #root .friend-bar .friend-bar-empty.friend-bar-empty {
line-height: 34px !important;
}
/* == AGENT3-FIT3 =============================================
Measured: span.friend-bar-text "Find new friends" scrollWidth 98px
inside a 78px content box (the chip is 127px and carries a 29px
absolutely-positioned avatar). Half a pixel of negative tracking
is enough; the chip width is a bundle-pinned 127px and widening it
would push it over the neighbouring "amigos" chip.
========================================================= */
html body #root .friend-bar .friend-bar-text.friend-bar-text {
letter-spacing: -0.5px !important;
}