mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
🆙 Update #2
This commit is contained in:
duckietm
@@ -1,26 +1,3 @@
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Catalog "classic" window — Habbo mobile shop redesign.
|
||||
*
|
||||
* Palette (from the mobile shop mockup):
|
||||
* --cat-blue #4b7a94 header / app chrome
|
||||
* --cat-blue-dark #385d73 header borders
|
||||
* --cat-ink #233a47 strong outlines / active tab border
|
||||
* --cat-strip #d9e2e8 tab strip + footer background
|
||||
* --cat-tab #b7c7d1 inactive tab fill
|
||||
* --cat-tab-border #7a9cb0 tab outline
|
||||
* --cat-panel #eef2f5 sidebar / search panels
|
||||
* --cat-sub #e1e7ec sub-node rows
|
||||
* --cat-line #b7c7d1 card / divider lines
|
||||
* --cat-canvas #d4dadf isometric preview canvas
|
||||
* --cat-canvas-2 #c9cfd4 preview checker tiles
|
||||
* --cat-select #3a82a7 selected card outline
|
||||
* --cat-select-bg #f0f5f8 selected card fill
|
||||
* --cat-gold #f7d673 price badge fill
|
||||
* --cat-gold-border #d4af37 price badge outline
|
||||
* --cat-gold-ink #4a3300 price badge text
|
||||
* --cat-buy #009900 buy button
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
.nitro-catalog-classic-window {
|
||||
--cat-blue: #4b7a94;
|
||||
--cat-blue-dark: #385d73;
|
||||
@@ -59,7 +36,6 @@
|
||||
max-height: 38px;
|
||||
}
|
||||
|
||||
/* Blue Habbo-mobile header. */
|
||||
.nitro-catalog-classic-window .nitro-card-header {
|
||||
background: var(--cat-blue);
|
||||
border-color: var(--cat-blue);
|
||||
@@ -71,7 +47,6 @@
|
||||
background: linear-gradient(180deg, #f4d45d 0%, #d8b43e 100%);
|
||||
}
|
||||
|
||||
/* Tab strip — light blue-grey shelf with tab "folders". */
|
||||
.nitro-catalog-classic-tabs-shell {
|
||||
flex-wrap: nowrap;
|
||||
gap: 2px;
|
||||
@@ -159,7 +134,6 @@
|
||||
color: #5b7080 !important;
|
||||
}
|
||||
|
||||
/* Sidebar category tree — flat rows that echo the mockup's landscape sidebar. */
|
||||
.nitro-catalog-classic-navigation-shell {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
@@ -255,7 +229,6 @@
|
||||
color: #5b7080 !important;
|
||||
}
|
||||
|
||||
/* Right-hand content column. */
|
||||
.nitro-catalog-classic-layout-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -282,16 +255,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 1 auto;
|
||||
flex: 0 0 auto;
|
||||
min-height: 32px;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-layout-hero img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 32px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 80px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -320,26 +294,22 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Isometric checkered preview canvas, straight from the mockup. */
|
||||
.nitro-catalog-classic-offer-preview {
|
||||
width: 136px;
|
||||
min-width: 136px;
|
||||
width: 190px;
|
||||
min-width: 190px;
|
||||
padding: 8px;
|
||||
border-right: 1px solid var(--cat-line);
|
||||
background-color: var(--cat-canvas);
|
||||
background-image:
|
||||
linear-gradient(30deg, var(--cat-canvas-2) 25%, transparent 25%),
|
||||
linear-gradient(-30deg, var(--cat-canvas-2) 25%, transparent 25%),
|
||||
linear-gradient(30deg, transparent 75%, var(--cat-canvas-2) 75%),
|
||||
linear-gradient(-30deg, transparent 75%, var(--cat-canvas-2) 75%);
|
||||
background-size: 30px 17px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-offer-info {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Solid-gold price pills (mockup price badge). */
|
||||
.nitro-catalog-classic-offer-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-offer-info .rounded-full {
|
||||
background: var(--cat-gold) !important;
|
||||
border-color: var(--cat-gold-border) !important;
|
||||
@@ -355,7 +325,6 @@
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Product grid. */
|
||||
.nitro-catalog-classic-grid-shell {
|
||||
min-height: 150px;
|
||||
padding: 6px;
|
||||
@@ -420,7 +389,6 @@
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Green "buy" action button (mockup "Acquista"). */
|
||||
.nitro-catalog-classic-offer-info .bg-\[\#00800b\] {
|
||||
background-color: var(--cat-buy) !important;
|
||||
border-color: #007a00 !important;
|
||||
@@ -480,21 +448,6 @@
|
||||
background: var(--cat-panel);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Responsive layout
|
||||
*
|
||||
* Three tiers:
|
||||
* > 1024px desktop, fixed 640x600 (default rules above)
|
||||
* 641px - 1024px tablet, fluid card, single-column stage
|
||||
* <= 640px phone, full-screen modal with stacked layout +
|
||||
* larger touch targets and a horizontally
|
||||
* scrollable tab strip
|
||||
*
|
||||
* A separate short-landscape branch trims chrome when height <= 480px
|
||||
* (typical phone-in-landscape) so the grid still has room to breathe.
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/* Tablet (portrait + landscape between phone and desktop). */
|
||||
@media (max-width: 1024px) and (min-width: 641px) {
|
||||
.nitro-catalog-classic-window {
|
||||
width: min(calc(100vw - 24px), 720px) !important;
|
||||
@@ -505,8 +458,6 @@
|
||||
max-height: calc(100vh - 24px) !important;
|
||||
}
|
||||
|
||||
/* Drop the sidebar to a horizontal row above the content so the grid
|
||||
* has the full card width on the narrower tablet viewports. */
|
||||
.nitro-catalog-classic-stage {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
@@ -516,7 +467,139 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Phone — portrait and landscape. */
|
||||
.nitro-catalog-classic-mobile-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
padding: 0 44px 0 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-mobile-burger {
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-burger-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-burger-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-burger-btn:active {
|
||||
background: rgba(0, 0, 0, 0.36);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-burger-menu {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
z-index: 60;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 150px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--cat-line);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-burger-menu button {
|
||||
padding: 8px 10px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--cat-strip);
|
||||
color: var(--cat-ink);
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-burger-menu button:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-mobile-currency {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-coin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 11px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-coin span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-admin-tab {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-preview-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
z-index: 4;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 5px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-preview-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.82);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-preview-btn:active {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-preview-rotate {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-preview-state {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.nitro-catalog-classic-window {
|
||||
width: 100vw !important;
|
||||
@@ -525,13 +608,26 @@
|
||||
height: 100vh !important;
|
||||
min-height: 0 !important;
|
||||
max-height: 100vh !important;
|
||||
/* Drop the soft drop-shadow / outer border on full-screen so it
|
||||
* blends with the viewport edges. */
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Tabs become a horizontally scrollable strip with bigger tap targets
|
||||
* (≥ 44px tall is the WCAG / iOS recommendation). */
|
||||
.draggable-window:has(> .nitro-catalog-classic-window) {
|
||||
transform: none !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-window .nitro-card-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-mobile-currency {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-tabs-shell {
|
||||
min-height: 44px;
|
||||
max-height: 44px;
|
||||
@@ -541,25 +637,43 @@
|
||||
|
||||
.nitro-catalog-classic-tabs-shell .nitro-card-tab-item {
|
||||
min-height: 42px;
|
||||
padding: 6px 14px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-tab-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-content-shell {
|
||||
padding: 6px !important;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-layout-hero {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-offer-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-offer-preview {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--cat-line);
|
||||
}
|
||||
|
||||
.nitro-catalog-classic-stage {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Sidebar above content, capped so most of the viewport is the grid. */
|
||||
.nitro-catalog-classic-sidebar {
|
||||
max-height: 33vh;
|
||||
}
|
||||
|
||||
/* Search input + nav items grow into real touch targets. */
|
||||
.nitro-catalog-classic-search-shell input {
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
@@ -574,21 +688,16 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Bigger furni icons in the grid so a fingertip can hit them. */
|
||||
.nitro-catalog-classic-window .layout-grid-item {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
/* Modal corner radius cleanups so the full-screen look is consistent. */
|
||||
.nitro-catalog-classic-window .nitro-card-header-shell,
|
||||
.nitro-catalog-classic-window .nitro-card-content-shell {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Phone in landscape — short viewport. Trim header / hero so the grid keeps
|
||||
* usable height. Triggers regardless of portrait/landscape on any short
|
||||
* screen, which is also the right answer for very small laptop windows. */
|
||||
@media (max-height: 480px) {
|
||||
.nitro-catalog-classic-window {
|
||||
height: 100vh !important;
|
||||
@@ -610,8 +719,6 @@
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
/* Hide the marketing hero image in landscape - it's the first thing to
|
||||
* sacrifice when the user clearly wants more grid. */
|
||||
.nitro-catalog-classic-layout-hero {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user