From f45e2c3ada123fdb4b16cd63b835bdc588061dd3 Mon Sep 17 00:00:00 2001 From: duckietm Date: Mon, 1 Jun 2026 08:20:26 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=86=99=20More=20mobile=20optimizeing?= =?UTF-8?q?=20for=20catalog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/catalog/CatalogClassicView.css | 98 +++++++++++++++++--------- src/css/index.css | 25 +------ 2 files changed, 68 insertions(+), 55 deletions(-) diff --git a/src/css/catalog/CatalogClassicView.css b/src/css/catalog/CatalogClassicView.css index 48a6100..0a146e7 100644 --- a/src/css/catalog/CatalogClassicView.css +++ b/src/css/catalog/CatalogClassicView.css @@ -1,21 +1,21 @@ .nitro-catalog-classic-window { - --cat-blue: #4b7a94; - --cat-blue-dark: #385d73; - --cat-ink: #233a47; - --cat-strip: #d9e2e8; - --cat-tab: #b7c7d1; - --cat-tab-border: #7a9cb0; - --cat-panel: #eef2f5; - --cat-sub: #e1e7ec; - --cat-line: #b7c7d1; - --cat-canvas: #d4dadf; - --cat-canvas-2: #c9cfd4; - --cat-select: #3a82a7; - --cat-select-bg: #f0f5f8; + --cat-blue: #4a7d8c; + --cat-blue-dark: #315863; + --cat-ink: #2c2c2a; + --cat-strip: #e2e0d6; + --cat-tab: #c7c5ba; + --cat-tab-border: #8f8f8b; + --cat-panel: #e8e7df; + --cat-sub: #dedcd2; + --cat-line: #8899a2; + --cat-canvas: #d8d8d2; + --cat-canvas-2: #ccccc4; + --cat-select: #4a7d8c; + --cat-select-bg: #f1efe6; --cat-gold: #f7d673; --cat-gold-border: #d4af37; --cat-gold-ink: #4a3300; - --cat-buy: #009900; + --cat-buy: #5ca843; width: 640px !important; height: 600px !important; @@ -23,7 +23,9 @@ min-width: 640px !important; min-height: 600px !important; max-height: 600px !important; - background: #ffffff !important; + background: var(--cat-strip) !important; + border-radius: 10px !important; + overflow: hidden; } .nitro-catalog-classic-window .nitro-card-title { @@ -39,7 +41,8 @@ .nitro-catalog-classic-window .nitro-card-header { background: var(--cat-blue); border-color: var(--cat-blue); - border-bottom-color: var(--cat-ink); + border-bottom-color: var(--cat-blue); + box-shadow: inset 0 2px 0 #709da9, inset 0 -2px 0 var(--cat-blue-dark); } .nitro-catalog-classic-admin-banner { @@ -74,7 +77,7 @@ } .nitro-catalog-classic-tabs-shell .nitro-card-tab-item:hover { - background: #c7d4dd; + background: #d2d0c6; } .nitro-catalog-classic-tabs-shell .nitro-card-tab-item-active { @@ -176,7 +179,7 @@ } .nitro-catalog-classic-navigation-item:hover { - background: #dde6ec; + background: #dcdacf; } .nitro-catalog-classic-navigation-item.is-active { @@ -187,7 +190,7 @@ } .nitro-catalog-classic-navigation-item.is-drag-over { - outline: 2px solid rgba(58, 130, 167, 0.4); + outline: 2px solid rgba(74, 125, 140, 0.4); outline-offset: -2px; } @@ -353,14 +356,14 @@ .nitro-catalog-classic-window .layout-grid-item:hover { background-color: var(--cat-select-bg) !important; border-color: var(--cat-select) !important; - box-shadow: 0 0 0 1px rgba(58, 130, 167, 0.2); + box-shadow: 0 0 0 1px rgba(74, 125, 140, 0.2); } .nitro-catalog-classic-window .layout-grid-item.is-active { background-color: var(--cat-select-bg) !important; border-color: var(--cat-select) !important; border-width: 2px !important; - box-shadow: 0 0 0 1px rgba(58, 130, 167, 0.35); + box-shadow: 0 0 0 1px rgba(74, 125, 140, 0.35); } .nitro-catalog-classic-grid-offer-icon { @@ -587,13 +590,26 @@ @media (max-width: 640px) { .nitro-catalog-classic-window { + --cat-blue: #4b7a94; + --cat-blue-dark: #385d73; + --cat-ink: #233a47; + --cat-strip: #d9e2e8; + --cat-tab: #b7c7d1; + --cat-tab-border: #7a9cb0; + --cat-panel: #eef2f5; + --cat-sub: #e1e7ec; + --cat-line: #b7c7d1; + --cat-select: #3a82a7; + --cat-select-bg: #f0f5f8; + --cat-buy: #009900; + width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; height: 100vh !important; min-height: 0 !important; max-height: 100vh !important; - border-radius: 0 !important; + border-radius: 10px !important; } .draggable-window:has(> .nitro-catalog-classic-window) { @@ -603,32 +619,50 @@ } .nitro-catalog-classic-window .nitro-card-title { - display: none; + display: block; + } + + .nitro-catalog-classic-window .nitro-card-header { + border-bottom-color: transparent; + box-shadow: none; } .nitro-catalog-classic-mobile-currency { position: absolute; - left: 50%; - margin-left: 0; - transform: translateX(-50%); + top: 38px; + left: 0; + right: 0; + height: 30px; + margin: 0; + transform: none; + justify-content: center; + gap: 6px; + background: #30728c; + z-index: 5; } .nitro-catalog-classic-tabs-shell { - min-height: 44px; - max-height: 44px; + margin-top: 30px; + min-height: 56px; + max-height: 56px; padding: 4px 4px 0; -webkit-overflow-scrolling: touch; } .nitro-catalog-classic-tabs-shell .nitro-card-tab-item { - min-height: 42px; - padding: 6px 12px; - font-size: 12px; + min-height: 52px; + padding: 5px 8px; justify-content: center; } + .nitro-catalog-classic-tabs-shell .nitro-card-tab-item div:has(> .nitro-catalog-classic-tab-label) { + flex-direction: column; + gap: 2px; + } + .nitro-catalog-classic-tab-label { - display: none; + font-size: 9px; + line-height: 1; } .nitro-catalog-classic-content-shell { diff --git a/src/css/index.css b/src/css/index.css index f07fc33..8be4f78 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -306,7 +306,7 @@ body { .nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell { border: 2px solid #3c88a6; - border-bottom-color: #000; + border-bottom-color: #30728c; border-radius: 8px 8px 0 0; background: #30728c; padding: 5px; @@ -314,7 +314,7 @@ body { .nitro-card-shell:not(.nitro-wired) .nitro-card-header-shell.builders-club-card-header { border-color: #d79d2e; - border-bottom-color: #000; + border-bottom-color: #c68515; background: linear-gradient(180deg, #d89f2d 0%, #c68515 100%); } @@ -476,24 +476,6 @@ body { border-color: #aeb7aa !important; } - .navigator-grid .navigator-item { - border-radius: 6px; - transition: background-color .15s ease; - } - - .navigator-grid .navigator-item:hover { - background: rgba(0, 0, 0, 0.07); - } - - .nitro-navigator-search-saves-result .saved-search-row { - border-radius: 6px; - transition: background-color .15s ease; - } - - .nitro-navigator-search-saves-result .saved-search-row:hover { - background: rgba(0, 0, 0, 0.07); - } - .nitro-card-divider { border-color: #c4cabf !important; box-shadow: none !important; @@ -541,9 +523,6 @@ body { flex-wrap: wrap; gap: 3px; padding: 4px 6px 0; - max-height: none; - height: auto; - flex: 0 0 auto; } .nitro-card-tab-item { From 827c17dc8b8c7975b1e10e05efd3de2ce7f6a773 Mon Sep 17 00:00:00 2001 From: duckietm Date: Mon, 1 Jun 2026 14:44:33 +0200 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=86=99=20Small=20fix=20toolbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/toolbar/ToolbarMeView.tsx | 17 +++++++++++++---- src/components/toolbar/ToolbarView.tsx | 2 +- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/toolbar/ToolbarMeView.tsx b/src/components/toolbar/ToolbarMeView.tsx index db50105..5084ef7 100644 --- a/src/components/toolbar/ToolbarMeView.tsx +++ b/src/components/toolbar/ToolbarMeView.tsx @@ -1,4 +1,4 @@ -import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer'; +import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, RoomObjectCategory } from '@nitrots/nitro-renderer'; import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react'; import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile, LocalizeText } from '../../api'; import { Flex, LayoutItemCountView } from '../../common'; @@ -24,11 +24,20 @@ export const ToolbarMeView: FC { - const onClick = (event: MouseEvent) => setMeExpanded(false); + const onClick = (event: MouseEvent) => + { + if(elementRef.current && elementRef.current.contains(event.target as Node)) return; - document.addEventListener('click', onClick); + setMeExpanded(false); + }; - return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick); + const timeout = window.setTimeout(() => document.addEventListener('click', onClick), 0); + + return () => + { + window.clearTimeout(timeout); + document.removeEventListener('click', onClick); + }; }, [ setMeExpanded ]); return ( diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index 2c2dd26..a2124fd 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -372,7 +372,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => animate={ { opacity: 1, y: 0, scale: 1 } } exit={ { opacity: 0, y: 6, scale: 0.97 } } transition={ ME_POPOVER_TRANSITION } - className="pointer-events-auto absolute bottom-[calc(100%+10px)] left-1/2 z-[70] -translate-x-1/2"> + className="pointer-events-auto fixed bottom-[calc(100%+10px)] left-1/2 z-[70] -translate-x-1/2"> }