diff --git a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx index 60ab937..3926e42 100644 --- a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx +++ b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx @@ -40,7 +40,17 @@ export const CatalogGridOfferView: FC = props => if(className?.length) { - const param = (product.productType === ProductTypeEnum.WALL && product.extraParam?.length) ? `_${ product.extraParam }` : ''; + let param = ''; + + if(product.productType === ProductTypeEnum.WALL && product.extraParam?.length) + { + param = `_${ product.extraParam }`; + } + else if(product.productType === ProductTypeEnum.FLOOR && product.furnitureData?.hasIndexedColor && (product.furnitureData.colorIndex > 0)) + { + param = `_${ product.furnitureData.colorIndex }`; + } + const configuredIconUrl = GetConfigurationValue('furni.asset.icon.url', ''); if(configuredIconUrl?.length) @@ -104,6 +114,7 @@ export const CatalogGridOfferView: FC = props => return ( = props =>
{ GetConfigurationValue('catalog.headers') && } - +
{ currentOffer && diff --git a/src/components/inventory/views/bot/InventoryBotView.tsx b/src/components/inventory/views/bot/InventoryBotView.tsx index 6963f2e..e4bd09d 100644 --- a/src/components/inventory/views/bot/InventoryBotView.tsx +++ b/src/components/inventory/views/bot/InventoryBotView.tsx @@ -22,7 +22,6 @@ export const InventoryBotView: FC<{ if(!selectedBot || !roomPreviewer) return; const botData = selectedBot.botData; - roomPreviewer.reset(false); roomPreviewer.updateRoomWallsAndFloorVisibility(true, true); roomPreviewer.updateObjectRoom('111', '217', '1.1'); diff --git a/src/components/mentions/MentionsView.tsx b/src/components/mentions/MentionsView.tsx index 6846ed2..3893005 100644 --- a/src/components/mentions/MentionsView.tsx +++ b/src/components/mentions/MentionsView.tsx @@ -73,7 +73,7 @@ export const MentionsView: FC = props => const hasAny = groups.length > 0; return ( - + diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx index 7137908..f2b163f 100644 --- a/src/components/navigator/NavigatorView.tsx +++ b/src/components/navigator/NavigatorView.tsx @@ -109,7 +109,7 @@ export const NavigatorView: FC<{}> = props => <> { isVisible && : Command -
+
{ commands.map((cmd, index) => { const isSelected = (index === selectedIndex); diff --git a/src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx index 0c860ad..1404185 100644 --- a/src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx +++ b/src/components/room/widgets/chat-input/ChatInputMentionSelectorView.tsx @@ -99,7 +99,7 @@ export const ChatInputMentionSelectorView: FC @ Mention
-
+
{ suggestions.map((suggestion, index) => { const isSelected = (index === selectedIndex); diff --git a/src/css/catalog/CatalogClassicView.css b/src/css/catalog/CatalogClassicView.css index af08391..38c082c 100644 --- a/src/css/catalog/CatalogClassicView.css +++ b/src/css/catalog/CatalogClassicView.css @@ -12,19 +12,10 @@ --catalog-swf-select-outer: #82d1ed; --catalog-swf-bc: #ff8d00; --catalog-swf-bc-outer: #ffb53c; - /* Light gray secondary button - cropped from catalog_skin1.png - at (10, 190, 25x22). Drives the gift button "Cadeau", the - preview-room control button and the generic .nitro-catalog-swf- - button via border-image-slice 3 3 3 3 fill. */ --habbo-slice-button-default: url("../../assets/images/catalog/buttons/btn_secondary.png"); --habbo-slice-button-hover: url("../../assets/images/catalog/buttons/btn_secondary_hover.png"); --habbo-slice-button-pressed: url("../../assets/images/catalog/buttons/btn_secondary_pressed.png"); --habbo-slice-button-disabled: url("../../assets/images/catalog/buttons/btn_secondary_disabled.png"); - /* Classic Habbo "Osta!" Buy button - cropped from catalog_skin3.png - yellow band. The historical name says "green" but the user's - skin sheet ships yellow for the action colour, so that's what - we paint. The 27x34 sprite border-image-slices nicely at 6px - since the rounded corner is ~5px. */ --habbo-slice-button-buy: url("../../assets/images/catalog/buttons/buy.png"); --habbo-slice-button-large: url("../../assets/images/catalog/buttons/buy.png"); --habbo-slice-button-large-hover: url("../../assets/images/catalog/buttons/buy_hover.png"); @@ -48,9 +39,6 @@ --habbo-stepper-minus-hover: url("../../assets/images/catalog/buttons/minus_hover.png"); --habbo-stepper-minus-pressed: url("../../assets/images/catalog/buttons/minus_pressed.png"); --habbo-stepper-minus-disabled: url("../../assets/images/catalog/buttons/minus_disabled.png"); - /* Scrollbar sprites cropped from catalog_skin1.png. The single-piece - thumb has caps + grip baked into one 17x34 image - stretch it - full-height with background-size: 17px 100%. */ --habbo-scrollbar-up: url("../../assets/images/catalog/scrollbar/scroll_v_up.png"); --habbo-scrollbar-up-pressed: url("../../assets/images/catalog/scrollbar/scroll_v_up_pressed.png"); --habbo-scrollbar-down: url("../../assets/images/catalog/scrollbar/scroll_v_down.png"); @@ -163,10 +151,6 @@ display: none !important; } -/* Publish button: lives inside the catalog window, absolutely - positioned in the header just to the left of the close X. Renders - only when adminMode is true (see CatalogClassicView.tsx). Uses the - Habbo yellow buy-button skin so it matches the Koop button. */ .nitro-catalog-classic-window .nitro-catalog-classic-header-publish { position: absolute !important; top: 5px !important; @@ -191,17 +175,7 @@ 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(140, 75, 0, 0.35), 0 0 8px rgba(255, 200, 0, 0.75); } } -/* Catalog default-layout admin row (Pagina bewerken / Nieuwe - aanbieding / Aanbieding bewerken). These are inline text buttons - but the .habbo-swf-window button + .habbo-swf-window - button[class*="success"] global rules were dressing them up as - SWF skin buttons (one yellow!) and forcing min-height: 22px which - broke the layout. Reset and re-skin as compact pill chips. */ .nitro-catalog-classic-window .nitro-catalog-classic-default-admin { - /* Keep all admin buttons on one row so the product-view doesn't - get pushed down into the absolutely-positioned grid-shell. If - a future label makes them overflow, the row scrolls - horizontally instead of wrapping. */ flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; @@ -251,8 +225,6 @@ box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08), 0 0 0 rgba(0, 0, 0, 0) !important; } -/* The "Nieuwe aanbieding" button uses text-success - give it the - habbo-yellow buy-button palette to mark it as the create action. */ .nitro-catalog-classic-window .nitro-catalog-classic-default-admin button.text-success, .nitro-catalog-classic-window .nitro-catalog-classic-default-admin button[class*="success"] { border-color: #8a5b00 !important; @@ -282,10 +254,6 @@ margin-left: 4px !important; } -/* Admin cog tab at the end of the tab strip - only renders when the - user is a mod, so leaving it visible at all times is safe. Style - it as a compact square that sits flush with the other tabs - instead of stretching to flex: 1 like a category tab. */ .nitro-catalog-classic-tabs-shell .nitro-card-tab-item.nitro-catalog-classic-admin-tab { flex: 0 0 auto !important; width: 32px !important; @@ -355,9 +323,6 @@ } .nitro-catalog-classic-tabs-shell { - /* Strip just tall enough to hold the 36px tab + 4px of breathing - room above. Trims the dead blue band between the header and - the tabs so the catalog body doesn't lose vertical space. */ flex: 0 0 40px; height: 40px; min-height: 40px; @@ -365,8 +330,6 @@ gap: 0; padding: 4px 6px 0 !important; align-items: flex-end; - /* Horizontal scroll so every category tab stays reachable when the - card is narrower than the total tab width. */ overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; @@ -377,8 +340,6 @@ border-bottom: 1px solid #c8c8bf; } -/* The tabs strip uses a slim 6px scrollbar - opt it out of the - 17px Habbo-sprite scrollbar applied to the rest of the catalog. */ .nitro-catalog-classic-tabs-shell::-webkit-scrollbar { width: 6px !important; height: 6px !important; @@ -409,18 +370,11 @@ gap: 4px; height: 36px; min-width: 0; - /* Equal-width tabs that share the strip exactly - the right - edge of the last tab now lines up with the right edge of the - catalog window, no trailing gap. */ flex: 1 1 0; max-width: none; padding: 6px 6px 7px; margin: 0 2px 0 0; flex-shrink: 1; - /* Classic Habbo tab: gray rounded-top rectangle with a 1px black - outline. ubuntu_tab3_*.png isn't shipped, so we draw the - habbo-look ourselves instead of border-image-slicing a missing - sprite. */ border: 1px solid #000 !important; border-bottom: 0 !important; border-radius: 6px 6px 0 0 !important; @@ -437,9 +391,6 @@ border-image-source: none !important; } -/* Bring the last tab flush with whatever follows (admin cog, edge), - instead of leaving the negative right margin tugging on empty - space. */ .nitro-catalog-classic-tabs-shell .nitro-card-tab-item:last-of-type { margin-right: 0; } @@ -454,9 +405,6 @@ line-height: 17px; } -/* Category icon that sits before the label. The blanket "hide every - img/svg inside a tab" rule is gone - we explicitly size the - classic tab icon and let everything else fall through. */ .nitro-catalog-classic-tab-icon { width: 18px; height: 18px; @@ -472,9 +420,6 @@ .nitro-catalog-classic-tabs-shell .nitro-card-tab-item-active { z-index: 2; - /* Active tab: the catalog-header habbo-blue with the cream catalog - body bleeding up into it. Drop the bottom border so the tab - "merges" with the panel below. */ background: linear-gradient(180deg, #4fb3ff 0%, var(--catalog-swf-blue) 100%) !important; color: #ffffff !important; @@ -502,10 +447,6 @@ .nitro-catalog-classic-stage { display: grid; - /* Sidebar pinned at 184px; the layout column takes the rest of - the stage row so the right edge of the right column lines up - with the right edge of the catalog window instead of leaving a - wide cream strip. */ grid-template-columns: 184px 1fr; gap: 8px; width: 100%; @@ -527,14 +468,9 @@ .nitro-catalog-classic-search-shell { position: relative; - /* Use flex so the input vertically centers inside the 24px shell - regardless of the input's own intrinsic baseline. */ display: flex; align-items: center; height: 24px; - /* Outer padding 0, negative horizontal margin bleeds the shell a - couple of pixels past its sidebar column on each side without - touching the grid template - cheap way to look ~4px wider. */ padding: 0; margin: -2px -1px 0 -1px; border: 1px solid #b7b7ae; @@ -542,10 +478,6 @@ background: #f7f7f2; } -/* Clear the magnifying-glass on the left and the X-clear button on the - right. The shell's own outer padding is essentially zero, so the - input claims the full sidebar column width minus just enough to - keep the icons from overlapping the text. */ .nitro-catalog-classic-search-shell input { flex: 1 1 auto; width: 100% !important; @@ -562,8 +494,6 @@ vertical-align: middle !important; } -/* The wrapping div the React component renders is 100% wide so the - input fills the shell instead of shrinking to content. */ .nitro-catalog-classic-search-shell > div { width: 100% !important; height: 100% !important; @@ -574,13 +504,10 @@ font-size: 11px !important; } -/* The search icon ships with absolute + left-2; nudge it tight to the - shell edge so the input can keep its left padding small. */ .nitro-catalog-classic-search-shell svg:first-child { left: 4px !important; } -/* X-clear button on the right edge - keep it tight too. */ .nitro-catalog-classic-search-shell button { right: 4px !important; } @@ -715,20 +642,11 @@ .nitro-catalog-classic-default-layout { position: relative; display: block !important; - /* Fill the layout container in both axes - the stage was - previously 552px wide and this column was pinned at 360px, but - now that the stage uses 1fr, hardcoding 360px would leave a - wide blank strip on the right of every default-layout catalog - page. */ width: 100%; height: 100%; min-height: 460px; } -/* The product-view, grid-shell, price-row and purchase-row inside - the default-layout were each pinned at 360px to match the old - stage width. Widen them in lockstep so they fill the new - 1fr-sized container. */ .nitro-catalog-classic-product-view, .nitro-catalog-classic-grid-shell, .nitro-catalog-classic-price-row, @@ -768,12 +686,6 @@ height: 100%; } -/* Default-3x3 layout: .offer-info is rendered but hidden via the - display: none rule below, so the panel reserved the full width - while only the 360px preview was visible (empty strip on the - right). Center the preview inside the panel instead so the gap - becomes symmetric padding on both sides. Color-grouping doesn't - render .offer-info so its panel keeps the existing layout. */ .nitro-catalog-classic-offer-panel:has(> .nitro-catalog-classic-offer-info) { justify-content: center; } @@ -786,13 +698,6 @@ background: #000; } -/* The default-3x3 layout puts the preview next to .offer-info inside - .offer-panel and needs the 360px column. Scope the pin to that - context so other layouts (color-grouping, etc.) can put the same - preview class inside a flex/grid column and let it track the - container width. Without this scoping the absolute-positioned - rotate/state buttons sit past the column's right edge and get - clipped by overflow: hidden. */ .nitro-catalog-classic-offer-panel > .nitro-catalog-classic-offer-preview { width: 360px; min-width: 360px; @@ -858,8 +763,6 @@ position: absolute; left: 0; top: 245px; - /* Stretch down to just above the price + purchase rows so the - grid soaks up any extra height the bigger window gives us. */ bottom: 68px; width: 360px; min-height: 0; @@ -867,20 +770,12 @@ overflow: auto; } -/* When the admin row is rendered above the product-view it adds - ~30px (22px button + flex gap) to the flex column, but the - grid-shell is absolutely positioned and doesn't shift on its own. - Push it (and the bottom-anchored price/purchase rows stay put) - down so the preview panel no longer bleeds into the grid. */ .nitro-catalog-classic-default-layout:has(.nitro-catalog-classic-default-admin) .nitro-catalog-classic-grid-shell { top: 280px !important; } .nitro-catalog-classic-grid { - /* Don't pin a fixed column track here - AutoGrid sets the inline - grid-template-columns from its columnMinWidth prop. The earlier - `repeat(6, 53px) !important` was clobbering that and freezing - the row at 6 tiles regardless of what the React layout passed. */ + grid-template-columns: repeat(6, 1fr) !important; grid-auto-rows: var(--nitro-grid-column-min-height, 70px); align-content: start; justify-content: start; @@ -889,11 +784,6 @@ } .nitro-catalog-classic-window .layout-grid-item { - /* Let the tile flex to whatever min/max width the AutoGrid sets - via repeat(auto-fill, minmax(N, 1fr)) - hard-pinning 53x74 was - overriding the layout's columnMinWidth prop, so the row count - never changed when we reduced it. Width is now 100% of the - column cell, height tracks --nitro-grid-column-min-height. */ width: 100% !important; height: var(--nitro-grid-column-min-height, 70px) !important; min-width: 0 !important; @@ -905,19 +795,10 @@ overflow: visible !important; } -/* Furni tiles drive their look from the icon image and need a clear - background. Color-grouping swatches use itemHighlight (.has-highlight) - to ask LayoutGridItem for a solid colour via inline backgroundColor - - keep the transparent override off those so the swatch is visible. */ .nitro-catalog-classic-window .layout-grid-item:not(.has-highlight) { background-color: transparent !important; } -/* Pets breed picker: the pet-head image renders at its native ~81x69px - regardless of the grid cell size. The old grid-cols-6 stretched - each .layout-grid-item to ~150-200px so the head looked huge in - acres of empty tile. Pin each tile just big enough to host the - head and let the container flex-wrap. */ .nitro-catalog-classic-window .nitro-catalog-classic-pet-breeds .layout-grid-item { width: 84px !important; min-width: 84px !important; @@ -938,12 +819,6 @@ inset -2px -2px 0 #ecece4 !important; } -/* Habbo-classic colour swatches: small chip with a 1px dark border - and a subtle inner highlight so light tones still read as buttons. - Hover lifts the border; the selected swatch is "pressed" with a - sunken inner shadow and a bright cyan ring matching the catalog - selection accent. The cream inset from the generic .is-active rule - above would wash out the swatch colour, so we replace it here. */ .nitro-catalog-classic-window .layout-grid-item.has-highlight { width: 26px !important; height: 26px !important; @@ -975,30 +850,20 @@ } .nitro-catalog-classic-grid-offer-icon { - position: absolute; - left: 50%; - top: 20px; width: auto !important; height: auto !important; - max-width: 36px; - max-height: 36px; + image-rendering: pixelated; object-fit: contain; - transform: translate(-50%, -50%); pointer-events: none; } .nitro-catalog-classic-grid-price { - position: absolute; - left: 2px; - right: 2px; - top: 36px; - bottom: auto; display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - justify-content: flex-start; - gap: 0; - min-height: 24px; + justify-content: center; + gap: 3px; + width: 100%; color: #000; font-size: 11px; font-weight: 700; @@ -1007,18 +872,10 @@ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } -/* When the tile shows a full-tile bot/pet avatar (instead of a small - icon), pin the price strip to the bottom of the tile and give it a - translucent backdrop so it doesn't overlap with the avatar body. */ .nitro-catalog-classic-grid .layout-grid-item:has(.avatar-image) .nitro-catalog-classic-grid-price, .nitro-catalog-classic-grid .layout-grid-item:has(> .avatar-image) > .nitro-catalog-classic-grid-price, .nitro-catalog-classic-grid .avatar-image ~ .nitro-catalog-classic-grid-price { top: auto !important; - /* Re-anchor horizontally too: the parent rule's left: 2px / - right: 2px combined with content-sized inner flex was visually - parking the pill at the left side of the tile. Center it via - explicit left/right + transform so it lands smack in the - middle regardless of inner content width. */ left: 50% !important; right: auto !important; bottom: 4px !important; @@ -1036,10 +893,6 @@ z-index: 5 !important; } -/* Tighten the price entry inside the avatar-tile pill so the number - and currency icon center on the same baseline (the global - .grid-price-entry height: 13px clipped the 15px wallet icon and - pushed it visually below the number). */ .nitro-catalog-classic-grid .layout-grid-item:has(.avatar-image) .nitro-catalog-classic-grid-price-entry, .nitro-catalog-classic-grid .avatar-image ~ .nitro-catalog-classic-grid-price .nitro-catalog-classic-grid-price-entry { height: auto !important; @@ -1059,11 +912,15 @@ } .nitro-catalog-classic-grid-price.is-single-price { - height: 19px; + height: auto; + min-height: 0; } .nitro-catalog-classic-grid-price.is-multi-price { - height: 38px; + height: auto; + min-height: 0; + flex-wrap: wrap; + row-gap: 1px; } .nitro-catalog-classic-grid-price-entry { @@ -1092,8 +949,6 @@ .nitro-catalog-classic-price-row { position: absolute; left: 0; - /* Anchored from the bottom so the Aantal/Prezzo row sits just - above the Cadeau/Koop buttons regardless of layout height. */ bottom: 38px; width: 360px; height: 25px; @@ -1111,8 +966,6 @@ .nitro-catalog-classic-total-price-slot { position: absolute; - /* Anchored to the right of the now-100% wide price row so the - Prezzo + amount stays flush with the right edge of the panel. */ right: 2px; top: 0; width: auto; @@ -1135,9 +988,6 @@ .nitro-catalog-classic-purchase-row { position: absolute; left: 0; - /* Anchored to the bottom of the panel with a 4px breathing strip - so the Cadeau / Koop buttons stay flush at the bottom of the - window no matter how tall the catalog is. */ bottom: 4px; width: 360px; height: 30px; @@ -1151,9 +1001,6 @@ align-items: flex-start; justify-content: space-between; gap: 10px !important; - /* Fill the now-100% wide purchase row instead of staying pinned at - 330px (which used to match the old 360px column - 15px each - side). */ width: auto; height: 24px; margin-left: 15px; @@ -1213,13 +1060,6 @@ opacity: 1 !important; } -/* Buy / Gift buttons - pure CSS. border-image-slicing the bitmap - sprites produced thin highlight/shadow stripes at the top and - bottom because the source rounded corners are ~5-6px tall but the - buttons render at 22-24px, so the slice rows stretched into a - visible band. CSS gradients give a crisp pixel-art classic-habbo - look without those artefacts. */ - .nitro-catalog-classic-window .nitro-catalog-swf-buy-button { width: 160px !important; min-width: 160px !important; @@ -1229,8 +1069,6 @@ border-radius: 4px !important; border-image: none !important; border-image-source: none !important; - /* Yellow body with the same #f0a318 / #ffd54d tones as the - skin3-yellow Buy sprite. */ background: linear-gradient(180deg, #ffe66b 0%, #ffc828 45%, #f0a318 100%) !important; box-shadow: @@ -1257,9 +1095,6 @@ .nitro-catalog-classic-window .nitro-catalog-swf-buy-button.pointer-events-none, .nitro-catalog-classic-window .nitro-catalog-swf-buy-button:disabled { - /* Stay yellow when disabled - the user wants the action colour - to be recognisable regardless of state. Drop opacity + flip - the cursor so it still reads as non-interactive. */ background: linear-gradient(180deg, #ffe66b 0%, #ffc828 45%, #f0a318 100%) !important; color: #4a2b00 !important; @@ -1277,7 +1112,6 @@ border-radius: 4px !important; border-image: none !important; border-image-source: none !important; - /* Cream / light-gray body matching the catalog cardstock. */ background: linear-gradient(180deg, #ececec 0%, #cfcfc4 100%) !important; box-shadow: @@ -1310,19 +1144,12 @@ text-shadow: none !important; } -/* Pet purchase card lives in a tight flex row alongside the price, - so the main 160px Buy button doesn't fit. Shrink it down here. */ .nitro-catalog-classic-pet-card .nitro-catalog-swf-buy-button { width: auto !important; min-width: 0 !important; padding: 0 14px !important; } -/* All catalog grids must scroll vertically only - horizontal overflow - produces a stray horizontal scrollbar at the bottom of the items - strip on narrow columns (e.g. guild_furni). minmax(N, 1fr) usually - contains content but the safety net stops any odd item from - triggering a horizontal bar. */ .nitro-catalog-classic-window .layout-grid, .nitro-catalog-classic-window [class*="grid-cols-["] { overflow-x: hidden !important; @@ -1369,8 +1196,6 @@ image-rendering: pixelated !important; } -/* react-icons FaMinus/FaPlus glyphs ride inside these buttons; hide - them - the sprite already contains the +/- mark. */ .nitro-catalog-classic-window button.nitro-catalog-swf-spinner-button svg { display: none !important; } @@ -1466,9 +1291,6 @@ min-width: 25px; padding: 0 !important; overflow: hidden; - /* font-size: 0 was killing the SVG: react-icons emits - , so 0em -> 0x0. Use a real - font-size and pin the SVG to explicit pixels below. */ font-size: 14px !important; line-height: 1 !important; display: inline-flex !important; @@ -1495,13 +1317,6 @@ right: 6px; } -/* Bulletproof override for the rotate/state buttons. The shared SWF - button rule above lays a transparent body + border-image skin on - top, which works only when the catalog/buttons/btn_secondary*.png - sprites resolve - if they're missing the button renders 0x0 - invisible. Pin the box and paint a visible gradient + outline so - the controls are always discoverable, and force z-index above the - room-previewer DIV so they sit on top of the rendered scene. */ .nitro-catalog-classic-window button.nitro-catalog-classic-preview-btn { width: 28px !important; height: 26px !important; @@ -1538,138 +1353,130 @@ .nitro-catalog-classic-window .nitro-catalog-classic-grid-shell::-webkit-scrollbar, .nitro-catalog-classic-window .nitro-catalog-classic-grid::-webkit-scrollbar, .nitro-catalog-classic-window .nitro-catalog-classic-layout-container::-webkit-scrollbar { - width: 17px; - height: 17px; + width: 18px; + height: 18px; } -/* ===== Classic catalog scrollbar (pure CSS, no sprites) ===== - Drew this with CSS gradients instead of stretching the 17x34 - skin1 thumb sprite. The sprite version pixelated into visible - horizontal bands on tall scroll areas because every source row - stretched 5-10x. CSS gradients stay crisp at any height. */ - .nitro-catalog-classic-window * { scrollbar-color: auto !important; scrollbar-width: auto; } .nitro-catalog-classic-window *::-webkit-scrollbar { - width: 17px !important; - height: 17px !important; - background-color: #e7e5d8 !important; + width: 18px !important; + height: 18px !important; + background-color: #bdbbb3 !important; } .nitro-catalog-classic-window *::-webkit-scrollbar-track { background-image: none !important; - background-color: #e7e5d8 !important; - box-shadow: inset 1px 0 0 #b9b6a5, inset -1px 0 0 #ffffff !important; + background-color: #bdbbb3 !important; + box-shadow: inset 1px 0 0 #000000 !important; border: 0 !important; } -/* Habbo thumb: symmetric light-edges -> darker-middle gradient (the - "pinched in the middle" look of the classic Ubuntu scrollbar), - 1px near-black outline, three central grip lines via SVG centered - no-repeat. */ .nitro-catalog-classic-window *::-webkit-scrollbar-thumb { - min-height: 28px !important; - border: 1px solid #2a2a26 !important; - border-radius: 2px !important; + /* Grip: a single 2px #a0a0a0 stripe in an 8px-wide centered band, + repeated every 5px (2px stripe + 3px body gap). + Outline: 1px black border, then a 2px white inset frame inside it. */ + min-height: 24px !important; background: - url("data:image/svg+xml;utf8,") center center / 10px 9px no-repeat, - linear-gradient(180deg, #d6d6cc 0%, #b4b4aa 30%, #9a9a90 50%, #b4b4aa 70%, #d6d6cc 100%) !important; - background-color: #a8a89e !important; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.55), - inset 0 -1px 0 rgba(255, 255, 255, 0.4) !important; + url("data:image/svg+xml;utf8,") center top / 8px 5px repeat-y, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 3px !important; + box-shadow: inset 0 0 0 2px #ffffff !important; } .nitro-catalog-classic-window *::-webkit-scrollbar-thumb:hover { background: - url("data:image/svg+xml;utf8,") center center / 10px 9px no-repeat, - linear-gradient(180deg, #e0e0d6 0%, #bebeb4 30%, #a4a49a 50%, #bebeb4 70%, #e0e0d6 100%) !important; - background-color: #b2b2a8 !important; + url("data:image/svg+xml;utf8,") center top / 8px 5px repeat-y, + #e3e3e3 !important; } .nitro-catalog-classic-window *::-webkit-scrollbar-thumb:active { background: - linear-gradient(180deg, #c6c6bc 0%, #a4a49a 30%, #8a8a82 50%, #a4a49a 70%, #c6c6bc 100%) !important; - background-color: #9a9a90 !important; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.35), - inset 0 -1px 0 rgba(255, 255, 255, 0.25) !important; + url("data:image/svg+xml;utf8,") center top / 8px 5px repeat-y, + #bcbcbc !important; } -/* Arrow buttons: cream cap with a 1px black outline + dark inset - chevron. SVG glyphs so they stay crisp at any zoom. */ +/* Arrow buttons: light grey cap with rounded OUTER corners (up button + rounded at the top, down button rounded at the bottom), 1px black + border, dark chevron via inline SVG. */ .nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:decrement { display: block !important; - width: 17px !important; - height: 16px !important; + width: 18px !important; + height: 18px !important; background: - url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, - linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important; - background-color: #e7e5d8 !important; - border: 1px solid #0b2d3a !important; - border-radius: 2px !important; + url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 3px 3px 0 0 !important; box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.7), - inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; + inset 0 1px 0 #ffffff, + inset 1px 0 0 rgba(255, 255, 255, 0.6) !important; } .nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:decrement:active { background: url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, - linear-gradient(180deg, #c7c5b8 0%, #aeaca0 100%) !important; - background-color: #c7c5b8 !important; + #bcbcbc !important; } .nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:increment { display: block !important; - width: 17px !important; - height: 16px !important; + width: 18px !important; + height: 18px !important; background: - url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, - linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important; - background-color: #e7e5d8 !important; - border: 1px solid #0b2d3a !important; - border-radius: 2px !important; + url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 0 0 3px 3px !important; box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.7), - inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; + inset 0 1px 0 #ffffff, + inset 1px 0 0 rgba(255, 255, 255, 0.6) !important; } .nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:vertical:increment:active { background: url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, - linear-gradient(180deg, #c7c5b8 0%, #aeaca0 100%) !important; - background-color: #c7c5b8 !important; + #bcbcbc !important; } .nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:decrement { display: block !important; - width: 16px !important; - height: 17px !important; + width: 18px !important; + height: 18px !important; background: - url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, - linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important; - background-color: #e7e5d8 !important; - border: 1px solid #0b2d3a !important; - border-radius: 2px !important; + url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 3px 0 0 3px !important; box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.7), - inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; + inset 0 1px 0 #ffffff, + inset 1px 0 0 rgba(255, 255, 255, 0.6) !important; } +.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:decrement:active { + background: + url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, + #bcbcbc !important; +} + .nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:increment { display: block !important; - width: 16px !important; - height: 17px !important; + width: 18px !important; + height: 18px !important; background: - url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, - linear-gradient(180deg, #f3f1e6 0%, #d8d6c8 100%) !important; - background-color: #e7e5d8 !important; - border: 1px solid #0b2d3a !important; - border-radius: 2px !important; + url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 0 3px 3px 0 !important; box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.7), - inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important; + inset 0 1px 0 #ffffff, + inset 1px 0 0 rgba(255, 255, 255, 0.6) !important; +} +.nitro-catalog-classic-window *::-webkit-scrollbar-button:single-button:horizontal:increment:active { + background: + url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, + #bcbcbc !important; } .nitro-catalog-classic-breadcrumb { @@ -1702,12 +1509,6 @@ padding: 6px !important; } - /* Mobile: drop the per-page welcome row (image + localization - blurb shown when no offer is selected). On a narrow viewport - it eats most of the visible space and pushes the actual grid - off-screen. Hide it and also collapse the surrounding - product-view (otherwise its 240px height reservation stays - and leaves a blank strip above the grid). */ .nitro-catalog-classic-welcome { display: none !important; } diff --git a/src/css/chat/ChatInputMentionSelectorView.css b/src/css/chat/ChatInputMentionSelectorView.css index d9b0cc8..c52eb83 100644 --- a/src/css/chat/ChatInputMentionSelectorView.css +++ b/src/css/chat/ChatInputMentionSelectorView.css @@ -1,13 +1,3 @@ -/* ============================================================================ - Chat-bar @-mention autocomplete - Habbo style - ---------------------------------------------------------------------------- - Mirrors the NitroCard look (cream cardstock, habbo-blue header, black 2px - border, drop shadow) and the in-room infostand row chrome. The popover - appears above the chat input, anchored to its bottom-left and the same - width as the input, with the bottom corners flush so it visually merges - with the input edge. - ============================================================================ */ - .chat-input-mention-popover { position: absolute; bottom: 100%; @@ -186,32 +176,6 @@ color: #4a2b00; } -/* Habbo-style scrollbar, matching NitroCardContentView scroll chrome. */ -.chat-input-mention-popover-list::-webkit-scrollbar { - width: 8px; -} - -.chat-input-mention-popover-list::-webkit-scrollbar-track { - background: #d8d8cf; - border-left: 1px solid #000; -} - -.chat-input-mention-popover-list::-webkit-scrollbar-thumb { - background: #30728c; - border: 1px solid #000; - border-radius: 3px; -} - -.chat-input-mention-popover-list::-webkit-scrollbar-thumb:hover { - background: #3c88a6; -} - -/* ============================================================================ - :command popover - same Habbo NitroCard chrome as the @-mention picker. - Header is green to distinguish it visually from the mention popover, - which uses the standard habbo-blue. - ============================================================================ */ - .chat-input-command-popover { position: absolute; bottom: 100%; @@ -344,23 +308,4 @@ .chat-input-command-row.is-selected .chat-input-command-row-desc { color: #d9efde; -} - -.chat-input-command-popover-list::-webkit-scrollbar { - width: 8px; -} - -.chat-input-command-popover-list::-webkit-scrollbar-track { - background: #d8d8cf; - border-left: 1px solid #000; -} - -.chat-input-command-popover-list::-webkit-scrollbar-thumb { - background: #2f8d4a; - border: 1px solid #000; - border-radius: 3px; -} - -.chat-input-command-popover-list::-webkit-scrollbar-thumb:hover { - background: #3aa55b; -} +} \ No newline at end of file diff --git a/src/css/common/ClassicScrollbar.css b/src/css/common/ClassicScrollbar.css new file mode 100644 index 0000000..61e2e09 --- /dev/null +++ b/src/css/common/ClassicScrollbar.css @@ -0,0 +1,127 @@ +.has-classic-scrollbar { + scrollbar-color: auto !important; + scrollbar-width: auto; +} + +.has-classic-scrollbar *::-webkit-scrollbar, +.has-classic-scrollbar::-webkit-scrollbar { + width: 18px !important; + height: 18px !important; + background-color: #bdbbb3 !important; +} + +.has-classic-scrollbar *::-webkit-scrollbar-track, +.has-classic-scrollbar::-webkit-scrollbar-track { + background-color: #bdbbb3 !important; + box-shadow: inset 1px 0 0 #000000 !important; + border: 0 !important; +} + +.has-classic-scrollbar *::-webkit-scrollbar-thumb, +.has-classic-scrollbar::-webkit-scrollbar-thumb { + min-height: 24px !important; + background: + url("data:image/svg+xml;utf8,") center top / 8px 5px repeat-y, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 3px !important; + box-shadow: inset 0 0 0 2px #ffffff !important; +} + +.has-classic-scrollbar *::-webkit-scrollbar-thumb:hover, +.has-classic-scrollbar::-webkit-scrollbar-thumb:hover { + background: + url("data:image/svg+xml;utf8,") center top / 8px 5px repeat-y, + #e3e3e3 !important; +} + +.has-classic-scrollbar *::-webkit-scrollbar-thumb:active, +.has-classic-scrollbar::-webkit-scrollbar-thumb:active { + background: + url("data:image/svg+xml;utf8,") center top / 8px 5px repeat-y, + #bcbcbc !important; +} + +.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:decrement, +.has-classic-scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement { + display: block !important; + width: 18px !important; + height: 18px !important; + background: + url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 3px 3px 0 0 !important; + box-shadow: + inset 0 1px 0 #ffffff, + inset 1px 0 0 rgba(255, 255, 255, 0.6) !important; +} +.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:decrement:active, +.has-classic-scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement:active { + background: + url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, + #bcbcbc !important; +} + +.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:increment, +.has-classic-scrollbar::-webkit-scrollbar-button:single-button:vertical:increment { + display: block !important; + width: 18px !important; + height: 18px !important; + background: + url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 0 0 3px 3px !important; + box-shadow: + inset 0 1px 0 #ffffff, + inset 1px 0 0 rgba(255, 255, 255, 0.6) !important; +} +.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:vertical:increment:active, +.has-classic-scrollbar::-webkit-scrollbar-button:single-button:vertical:increment:active { + background: + url("data:image/svg+xml;utf8,") center center / 9px 6px no-repeat, + #bcbcbc !important; +} + +.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:decrement, +.has-classic-scrollbar::-webkit-scrollbar-button:single-button:horizontal:decrement { + display: block !important; + width: 18px !important; + height: 18px !important; + background: + url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 3px 0 0 3px !important; + box-shadow: + inset 0 1px 0 #ffffff, + inset 1px 0 0 rgba(255, 255, 255, 0.6) !important; +} +.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:decrement:active, +.has-classic-scrollbar::-webkit-scrollbar-button:single-button:horizontal:decrement:active { + background: + url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, + #bcbcbc !important; +} + +.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:increment, +.has-classic-scrollbar::-webkit-scrollbar-button:single-button:horizontal:increment { + display: block !important; + width: 18px !important; + height: 18px !important; + background: + url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, + #d9d9d9 !important; + border: 1px solid #000000 !important; + border-radius: 0 3px 3px 0 !important; + box-shadow: + inset 0 1px 0 #ffffff, + inset 1px 0 0 rgba(255, 255, 255, 0.6) !important; +} +.has-classic-scrollbar *::-webkit-scrollbar-button:single-button:horizontal:increment:active, +.has-classic-scrollbar::-webkit-scrollbar-button:single-button:horizontal:increment:active { + background: + url("data:image/svg+xml;utf8,") center center / 6px 9px no-repeat, + #bcbcbc !important; +} diff --git a/src/index.tsx b/src/index.tsx index 91c4147..f6abedc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -27,6 +27,7 @@ import './css/chat/ChatInputMentionSelectorView.css'; import './css/mentions/MentionToasts.css'; import './css/common/Buttons.css'; +import './css/common/ClassicScrollbar.css'; import './css/forms/form_select.css';