duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Take #3 desktop view catalog is now 100%

Browse Source
This commit is contained in:
duckietm
2026-06-05 16:31:59 +02:00
parent f4d41dd3c9
commit fff4c0bca6
8 changed files with 283 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/catalog/CatalogClassicView.css
+94 -15
View File
@@ -12,14 +12,6 @@
--catalog-swf-select-outer: #82d1ed;
--catalog-swf-bc: #ff8d00;
--catalog-swf-bc-outer: #ffb53c;
--habbo-skin-ubuntu: url("../../assets/images/catalog/swf/skins/habbo_skin_ubuntu.png");
--habbo-skin-blue: url("../../assets/images/catalog/swf/skins/habbo_skin_blue.png");
--habbo-skin-illumina-light: url("../../assets/images/catalog/swf/skins/habbo_skin_illumina_light.png");
--habbo-skin-illumina-dark: url("../../assets/images/catalog/swf/skins/habbo_skin_illumina_dark.png");
--habbo-slice-frame: url("../../assets/images/catalog/swf/ubuntu_frame3_26x55.png");
--habbo-slice-tab-default: url("../../assets/images/catalog/swf/ubuntu_tab3_default_22x32.png");
--habbo-slice-tab-selected: url("../../assets/images/catalog/swf/ubuntu_tab3_selected_22x32.png");
--habbo-slice-tab-hover: url("../../assets/images/catalog/swf/ubuntu_tab3_hover_22x32.png");
/* 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-
@@ -42,10 +34,6 @@
--habbo-button-green-hover: url("../../assets/images/catalog/buttons/buy_hover.png");
--habbo-button-green-pressed: url("../../assets/images/catalog/buttons/buy_pressed.png");
--habbo-button-green-disabled: url("../../assets/images/catalog/buttons/buy_disabled.png");
--habbo-grid-default: url("../../assets/images/catalog/swf/habbo_grid.png");
--habbo-grid-hover: url("../../assets/images/catalog/swf/habbo_grid_hover.png");
--habbo-grid-selected: url("../../assets/images/catalog/swf/habbo_grid_selected.png");
--habbo-grid-selected-inactive: url("../../assets/images/catalog/swf/habbo_grid_selected_inactive.png");
--habbo-close: url("../../assets/images/catalog/buttons/close.png");
--habbo-close-hover: url("../../assets/images/catalog/buttons/close_hover.png");
--habbo-close-pressed: url("../../assets/images/catalog/buttons/close_pressed.png");
@@ -782,14 +770,24 @@
.nitro-catalog-classic-offer-preview {
position: relative;
width: 360px;
min-width: 360px;
height: 100%;
padding: 0;
overflow: hidden;
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;
}
.nitro-catalog-classic-preview-title {
position: absolute;
top: 12px;
@@ -892,12 +890,19 @@
min-height: var(--nitro-grid-column-min-height, 70px) !important;
border: 0 !important;
border-radius: 0 !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
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;
}
.nitro-catalog-classic-window .layout-grid-item:hover {
background-image: none !important;
box-shadow: inset 0 0 0 1px #a1a19b !important;
@@ -911,6 +916,42 @@
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;
min-width: 26px !important;
min-height: 26px !important;
margin: 1px !important;
border: 1px solid #2a2a2a !important;
border-radius: 2px !important;
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.35),
inset -1px -1px 0 rgba(0, 0, 0, 0.18) !important;
cursor: pointer !important;
}
.nitro-catalog-classic-window .layout-grid-item.has-highlight:hover {
border-color: #000 !important;
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.5),
inset -1px -1px 0 rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(0, 0, 0, 0.45) !important;
}
.nitro-catalog-classic-window .layout-grid-item.has-highlight.is-active {
border-color: #000 !important;
box-shadow:
inset 0 0 0 2px #ffffff,
inset 0 0 0 3px #000,
0 0 0 1px #63c5e9 !important;
}
.nitro-catalog-classic-grid-offer-icon {
position: absolute;
left: 50%;
@@ -1432,6 +1473,44 @@
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;
min-width: 28px !important;
min-height: 26px !important;
padding: 0 !important;
border: 1px solid #2a2a2a !important;
border-image: none !important;
border-image-source: none !important;
border-radius: 3px !important;
background: linear-gradient(180deg, #f6f6f0 0%, #d3d3c8 100%) !important;
background-color: #ecece4 !important;
background-image: linear-gradient(180deg, #f6f6f0 0%, #d3d3c8 100%) !important;
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.7),
0 1px 0 rgba(0, 0, 0, 0.35) !important;
z-index: 10 !important;
}
.nitro-catalog-classic-window button.nitro-catalog-classic-preview-btn:hover {
background: linear-gradient(180deg, #ffffff 0%, #dedeD2 100%) !important;
background-image: linear-gradient(180deg, #ffffff 0%, #dedeD2 100%) !important;
border-color: #000 !important;
}
.nitro-catalog-classic-window button.nitro-catalog-classic-preview-btn:active {
background: linear-gradient(180deg, #d3d3c8 0%, #f6f6f0 100%) !important;
background-image: linear-gradient(180deg, #d3d3c8 0%, #f6f6f0 100%) !important;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.18) !important;
}
.nitro-catalog-classic-window .nitro-catalog-classic-navigation-shell::-webkit-scrollbar,
.nitro-catalog-classic-window .nitro-catalog-classic-navigation-list::-webkit-scrollbar,
.nitro-catalog-classic-window .nitro-catalog-classic-grid-shell::-webkit-scrollbar,
src/css/common/Buttons.css
-67
View File
@@ -1,70 +1,3 @@
.nitro-swf-button {
min-height: 22px !important;
height: 22px;
padding: 2px 10px !important;
border: 3px solid transparent !important;
border-radius: 0 !important;
border-image-source: url("../../assets/images/catalog/swf/habbo_skin_button_default_9x22.png") !important;
border-image-slice: 3 3 3 3 fill !important;
border-image-width: 3px !important;
border-image-repeat: stretch !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: #222 !important;
font-size: 11px !important;
font-weight: 700 !important;
line-height: 16px !important;
text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
transition: none !important;
}
.nitro-swf-button:hover {
border-image-source: url("../../assets/images/catalog/swf/habbo_skin_button_hover_9x22.png") !important;
background: transparent !important;
background-color: transparent !important;
}
.nitro-swf-button:active,
.nitro-swf-button.active {
border-image-source: url("../../assets/images/catalog/swf/habbo_skin_button_pressed_9x22.png") !important;
background: transparent !important;
background-color: transparent !important;
}
.nitro-swf-button.pointer-events-none,
.nitro-swf-button:disabled {
border-image-source: url("../../assets/images/catalog/swf/habbo_skin_button_disabled_9x22.png") !important;
color: #888 !important;
opacity: 1 !important;
}
.nitro-swf-button-success {
height: 24px;
min-height: 24px !important;
border: 6px solid transparent !important;
border-image-source: url("../../assets/images/catalog/swf/habbo_skin_button_green_24x24.png") !important;
border-image-slice: 6 6 6 6 fill !important;
border-image-width: 6px !important;
color: #fff !important;
text-shadow: 0 1px 0 rgba(0,0,0,.55) !important;
}
.nitro-swf-button-success:hover {
border-image-source: url("../../assets/images/catalog/swf/habbo_skin_button_green_hover_24x24.png") !important;
}
.nitro-swf-button-success:active,
.nitro-swf-button-success.active {
border-image-source: url("../../assets/images/catalog/swf/habbo_skin_button_green_pressed_24x24.png") !important;
}
.nitro-swf-button-success.pointer-events-none,
.nitro-swf-button-success:disabled {
border-image-source: url("../../assets/images/catalog/swf/habbo_skin_button_green_disabled_24x24.png") !important;
}
.btn-sm {
min-height: 28px;
}
src/css/habbo/HabboSwfSkin.css
-2
View File
@@ -1,6 +1,4 @@
.habbo-swf-window {
--habbo-swf-ubuntu: url("../../assets/images/catalog/swf/habbo_skin_ubuntu.png");
--habbo-swf-blue: url("../../assets/images/catalog/swf/skins/habbo_skin_blue.png");
--habbo-swf-bg: #ecece4;
--habbo-swf-panel: #f7f7f2;
--habbo-swf-border: #9d9d96;