From 888073acb1f967667e40c773fbd5809bf3003de8 Mon Sep 17 00:00:00 2001 From: duckietm Date: Fri, 29 May 2026 15:16:14 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Update=20#2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/catalog/CatalogClassicView.tsx | 53 +++- .../page/layout/CatalogLayoutDefaultView.tsx | 24 +- .../widgets/CatalogViewProductWidgetView.tsx | 4 + .../furniture/InventoryFurnitureView.tsx | 58 ++-- src/css/catalog/CatalogClassicView.css | 257 +++++++++++++----- src/css/inventory/InventoryView.css | 101 ++++--- src/css/nitrocard/NitroCardView.css | 8 + 7 files changed, 334 insertions(+), 171 deletions(-) diff --git a/src/components/catalog/CatalogClassicView.tsx b/src/components/catalog/CatalogClassicView.tsx index eb16cc2..1ee04f2 100644 --- a/src/components/catalog/CatalogClassicView.tsx +++ b/src/components/catalog/CatalogClassicView.tsx @@ -1,9 +1,9 @@ import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer'; -import { FC, useEffect } from 'react'; -import { FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa'; -import { CatalogType, LocalizeText } from '../../api'; -import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common'; -import { useCatalogActions, useCatalogData, useCatalogUiState, useHasPermission } from '../../hooks'; +import { FC, useEffect, useState } from 'react'; +import { FaBars, FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa'; +import { CatalogType, GetConfigurationValue, LocalizeShortNumber, LocalizeText } from '../../api'; +import { Column, Grid, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common'; +import { useCatalogActions, useCatalogData, useCatalogUiState, useHasPermission, usePurse } from '../../hooks'; import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext'; import { CatalogAdminOfferEditView } from './views/admin/CatalogAdminOfferEditView'; import { CatalogAdminPageEditView } from './views/admin/CatalogAdminPageEditView'; @@ -31,6 +31,9 @@ const CatalogClassicViewInner: FC<{}> = () => const loading = catalogAdmin?.loading ?? false; const isMod = useHasPermission('acc_catalogfurni'); + const [ mobileMenuOpen, setMobileMenuOpen ] = useState(false); + const { purse = null } = usePurse(); + const displayedCurrencies = GetConfigurationValue('system.currency.types', []); const buildersClubHeaderStyle = (currentType === CatalogType.BUILDER) ? { borderColor: '#d79d2e', borderBottomColor: '#000', background: 'linear-gradient(180deg, #d89f2d 0%, #c68515 100%)' } : undefined; @@ -121,6 +124,42 @@ const CatalogClassicViewInner: FC<{}> = () => { isVisible && setIsVisible(false) } style={ buildersClubHeaderStyle } /> +
+ { isMod && +
+ + { mobileMenuOpen && +
+ + { adminMode && + } +
} +
} +
+
+ { LocalizeShortNumber(purse?.credits ?? 0) } + +
+ { displayedCurrencies.map(type => ( +
+ { LocalizeShortNumber(purse?.activityPoints?.get(type) ?? 0) } + +
+ )) } +
+
{ adminMode &&
Admin Mode @@ -148,7 +187,7 @@ const CatalogClassicViewInner: FC<{}> = () => } }>
- { child.localization } + { child.localization } { adminMode && isHidden && } { adminMode &&
e.stopPropagation() }> @@ -172,7 +211,7 @@ const CatalogClassicViewInner: FC<{}> = () => ); }) } { isMod && - setAdminMode(!adminMode) }> + setAdminMode(!adminMode) }> } diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx index 6866dbc..09411d1 100644 --- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx +++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { FaEdit, FaPlus } from 'react-icons/fa'; +import { FaEdit, FaPlus, FaPowerOff, FaSyncAlt } from 'react-icons/fa'; import { GetConfigurationValue, LocalizeText, ProductTypeEnum, SanitizeHtml } from '../../../../../api'; import { Text } from '../../../../../common'; import { useCatalogData } from '../../../../../hooks'; @@ -17,13 +17,12 @@ import { CatalogLayoutProps } from './CatalogLayout.types'; export const CatalogLayoutDefaultView: FC = props => { const { page = null } = props; - const { currentOffer = null, currentPage = null } = useCatalogData(); + const { currentOffer = null, currentPage = null, roomPreviewer = null } = useCatalogData(); const catalogAdmin = useCatalogAdmin(); const adminMode = catalogAdmin?.adminMode ?? false; return (
- { /* Admin: quick actions */ } { adminMode && !catalogAdmin.editingPageData &&
} - - { /* Product detail card. shrink-0 + visible overflow so the Buy - button never gets squeezed off-screen when the grid below - holds a lot of items. */ } { currentOffer &&
- { /* Preview area */ }
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) && <> + + } { (currentOffer.product.productType === ProductTypeEnum.BADGE) && }
- { /* Product info + purchase */ }
- { /* Title row */ }
{ currentOffer.localizationName } @@ -79,13 +77,9 @@ export const CatalogLayoutDefaultView: FC = props =>
}
- { /* Price */ } - { /* Spinner */ } - { /* Actions - natural flow, no mt-auto so they can't - be pushed past the panel's bottom edge. */ } -
+
diff --git a/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx index 027aa36..f63f721 100644 --- a/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx +++ b/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx @@ -19,6 +19,8 @@ export const CatalogViewProductWidgetView: FC<{}> = props => if(!product) return; roomPreviewer.reset(false); + roomPreviewer.updateObjectRoom('default', 'default', 'default'); + roomPreviewer.updateRoomWallsAndFloorVisibility(true, true); switch(product.productType) { @@ -68,6 +70,8 @@ export const CatalogViewProductWidgetView: FC<{}> = props => case ProductTypeEnum.WALL: { if(!product.furnitureData) return; + roomPreviewer.updateRoomWallsAndFloorVisibility(true, true); + switch(product.furnitureData.specialType) { case FurniCategory.FLOOR: diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx index 364cfe3..58a049f 100644 --- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx +++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx @@ -1,7 +1,7 @@ import { InfiniteGrid } from '@layout/InfiniteGrid'; import { GetRoomEngine, GetSessionDataManager, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; -import { FaTrashAlt } from 'react-icons/fa'; +import { FaPowerOff, FaSyncAlt, FaTrashAlt } from 'react-icons/fa'; import { DispatchUiEvent, FurniCategory, GroupItem, LocalizeText, UnseenItemCategory, attemptItemPlacement } from '../../../../api'; import { LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView } from '../../../../common'; import { CatalogPostMarketplaceOfferEvent, DeleteItemConfirmEvent } from '../../../../events'; @@ -49,22 +49,24 @@ export const InventoryFurnitureView: FC<{ if(!furnitureItem) return; - const roomEngine = GetRoomEngine(); - - let wallType = roomEngine.getRoomInstanceVariable(roomEngine.activeRoomId, RoomObjectVariable.ROOM_WALL_TYPE); - let floorType = roomEngine.getRoomInstanceVariable(roomEngine.activeRoomId, RoomObjectVariable.ROOM_FLOOR_TYPE); - let landscapeType = roomEngine.getRoomInstanceVariable(roomEngine.activeRoomId, RoomObjectVariable.ROOM_LANDSCAPE_TYPE); - - wallType = (wallType && wallType.length) ? wallType : '101'; - floorType = (floorType && floorType.length) ? floorType : '101'; - landscapeType = (landscapeType && landscapeType.length) ? landscapeType : '1.1'; - roomPreviewer.reset(false); - roomPreviewer.updateObjectRoom(floorType, wallType, landscapeType); - roomPreviewer.updateRoomWallsAndFloorVisibility(true, true); - if((furnitureItem.category === FurniCategory.WALL_PAPER) || (furnitureItem.category === FurniCategory.FLOOR) || (furnitureItem.category === FurniCategory.LANDSCAPE)) + const isRoomDecoration = (furnitureItem.category === FurniCategory.WALL_PAPER) || (furnitureItem.category === FurniCategory.FLOOR) || (furnitureItem.category === FurniCategory.LANDSCAPE); + + if(isRoomDecoration) { + const roomEngine = GetRoomEngine(); + + let wallType = roomEngine.getRoomInstanceVariable(roomEngine.activeRoomId, RoomObjectVariable.ROOM_WALL_TYPE); + let floorType = roomEngine.getRoomInstanceVariable(roomEngine.activeRoomId, RoomObjectVariable.ROOM_FLOOR_TYPE); + let landscapeType = roomEngine.getRoomInstanceVariable(roomEngine.activeRoomId, RoomObjectVariable.ROOM_LANDSCAPE_TYPE); + + wallType = (wallType && wallType.length) ? wallType : '101'; + floorType = (floorType && floorType.length) ? floorType : '101'; + landscapeType = (landscapeType && landscapeType.length) ? landscapeType : '1.1'; + + roomPreviewer.updateRoomWallsAndFloorVisibility(true, true); + floorType = ((furnitureItem.category === FurniCategory.FLOOR) ? selectedItem.stuffData.getLegacyString() : floorType); wallType = ((furnitureItem.category === FurniCategory.WALL_PAPER) ? selectedItem.stuffData.getLegacyString() : wallType); landscapeType = ((furnitureItem.category === FurniCategory.LANDSCAPE) ? selectedItem.stuffData.getLegacyString() : landscapeType); @@ -77,17 +79,20 @@ export const InventoryFurnitureView: FC<{ if(data) roomPreviewer.addWallItemIntoRoom(data.id, new Vector3d(90, 0, 0), data.customParams); } + + return; + } + + roomPreviewer.updateObjectRoom('default', 'default', 'default'); + roomPreviewer.updateRoomWallsAndFloorVisibility(true, true); + + if(selectedItem.isWallItem) + { + roomPreviewer.addWallItemIntoRoom(selectedItem.type, new Vector3d(90), furnitureItem.stuffData.getLegacyString()); } else { - if(selectedItem.isWallItem) - { - roomPreviewer.addWallItemIntoRoom(selectedItem.type, new Vector3d(90), furnitureItem.stuffData.getLegacyString()); - } - else - { - roomPreviewer.addFurnitureIntoRoom(selectedItem.type, new Vector3d(90), selectedItem.stuffData, (furnitureItem.extra.toString())); - } + roomPreviewer.addFurnitureIntoRoom(selectedItem.type, new Vector3d(90), selectedItem.stuffData, (furnitureItem.extra.toString())); } }, [ roomPreviewer, selectedItem ]); @@ -129,6 +134,15 @@ export const InventoryFurnitureView: FC<{
+ { selectedItem && + <> + + + } { selectedItem && 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; } diff --git a/src/css/inventory/InventoryView.css b/src/css/inventory/InventoryView.css index 125f8bc..01c8d77 100644 --- a/src/css/inventory/InventoryView.css +++ b/src/css/inventory/InventoryView.css @@ -1,20 +1,3 @@ -/* --------------------------------------------------------------------------- - * Inventory window — Habbo mobile inventory skin. - * - * Matches the mobile inventory mockup and stays consistent with the catalog - * redesign: blue header, beige body, folder tabs, framed preview canvas, - * teal-accented item slots, and chunky green "place" / red "sell" buttons. - * - * Palette (from the mockup): - * --inv-blue #4a7d8c header - * --inv-beige #e2e0d6 window / body / slot fill - * --inv-tab #c7c5ba inactive tab fill - * --inv-line #919088 slot / preview outline - * --inv-accent #4a7d8c selected slot glow + count text - * --inv-place* green place button - * --inv-sell* red sell button - * ------------------------------------------------------------------------- */ - .nitro-inventory-window { --inv-blue: #4a7d8c; --inv-beige: #e2e0d6; @@ -32,7 +15,6 @@ background: var(--inv-beige) !important; } -/* Blue Habbo header. */ .nitro-inventory-window .nitro-card-header { background: var(--inv-blue); border-color: var(--inv-blue); @@ -40,7 +22,6 @@ box-shadow: inset 0 2px 0 #709da9, inset 0 -2px 0 #315863; } -/* Tab strip — beige shelf with folder tabs. Light, low-contrast outlines. */ .nitro-inventory-window .nitro-inventory-tabs-shell { background: var(--inv-beige); gap: 4px; @@ -71,7 +52,6 @@ top: 1px; } -/* Tabs show the icon first, then the text label (desktop). */ .nitro-inventory-window .nitro-inventory-tab-icon { display: inline-flex; align-items: center; @@ -81,12 +61,10 @@ line-height: 1; } -/* Body — grey-beige backdrop. */ .nitro-inventory-window .nitro-inventory-body { background: var(--inv-beige); } -/* Filter bar — white search box + beige select, hard outlines. */ .nitro-inventory-window .nitro-inventory-filter-bar { background: #fff; border: 2px solid var(--inv-border); @@ -100,7 +78,6 @@ font-weight: 700; } -/* Item slots — beige tiles, grey outline, teal glow when selected. */ .nitro-inventory-window .bg-card-grid-item { background-color: var(--inv-beige) !important; } @@ -118,20 +95,17 @@ box-shadow: 0 0 0 2px var(--inv-accent); } -/* Count badge — white pill with a teal number (mockup). */ .nitro-inventory-window .bg-red-700 { background-color: #fff !important; color: var(--inv-accent) !important; border-color: #75746e !important; } -/* Preview canvas — white framed box around the room previewer. */ .nitro-inventory-window .shadow-room-previewer { background-color: #fff; border: 2px solid var(--inv-line); } -/* Action buttons — chunky beveled Habbo buttons. */ .nitro-inventory-window .nitro-inventory-btn-place, .nitro-inventory-window .nitro-inventory-btn-sell { border: 2px solid var(--inv-border) !important; @@ -159,17 +133,10 @@ background: #db4d40 !important; } -/* --------------------------------------------------------------------------- - * Responsive layout - * - * The window ships a fixed 528x420 size (Tailwind utilities on the card). - * Mirror the catalog's three tiers so it stays usable down to phones: - * > 1024px desktop, fixed size (utilities) - * 641px - 1024px tablet, fluid card - * <= 640px phone, full-screen + stacked grid / preview - * ------------------------------------------------------------------------- */ +.nitro-inventory-preview-btn { + display: none; +} -/* Tablet. */ @media (max-width: 1024px) and (min-width: 641px) { .nitro-inventory-window { width: min(calc(100vw - 24px), 640px) !important; @@ -181,25 +148,28 @@ } } -/* Phone — full-screen, single-column stack (grid on top, preview below). */ @media (max-width: 640px) { - .nitro-inventory-window { - width: 100vw !important; + .draggable-window:has(> .nitro-inventory-window) { + inset: 0 !important; + left: 0 !important; + right: 0 !important; + top: 0 !important; + bottom: 0 !important; + width: auto !important; + height: auto !important; + transform: none !important; + } + + .nitro-card-shell.nitro-inventory-window { + width: calc(100% - 40px) !important; min-width: 0 !important; - max-width: 100vw !important; - height: 100vh !important; + max-width: calc(100% - 40px) !important; + height: calc(100% - 76px) !important; min-height: 0 !important; - max-height: 100vh !important; - border-radius: 0 !important; + max-height: calc(100% - 76px) !important; + margin: 8px auto 0 auto !important; } - .nitro-inventory-window .nitro-card-header-shell, - .nitro-inventory-window .nitro-card-content-shell { - border-radius: 0 !important; - } - - /* Icon-only tabs spread evenly across the width — text labels don't - * fit on a phone, so swap them for the per-tab glyph. */ .nitro-inventory-window .nitro-inventory-tabs-shell { flex-wrap: nowrap; overflow: hidden; @@ -221,7 +191,6 @@ font-size: 17px; } - /* Stack the item grid above the preview / action panel. */ .nitro-inventory-window .grid.grid-cols-12 { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; @@ -232,10 +201,38 @@ grid-column: 1 / -1 !important; } - /* Roomier touch targets for the action buttons. */ .nitro-inventory-window .nitro-inventory-btn-place, .nitro-inventory-window .nitro-inventory-btn-sell { padding-top: 0.5rem; padding-bottom: 0.5rem; } + + .nitro-inventory-window .nitro-inventory-preview-btn { + position: absolute; + top: 6px; + z-index: 4; + display: inline-flex; + align-items: center; + gap: 5px; + padding: 4px 8px; + border: 1px solid #555; + border-radius: 5px; + background: rgba(0, 0, 0, 0.7); + color: #fff; + font-size: 10px; + font-weight: 700; + cursor: pointer; + } + + .nitro-inventory-window .nitro-inventory-preview-btn:active { + background: rgba(0, 0, 0, 0.85); + } + + .nitro-inventory-window .nitro-inventory-preview-rotate { + left: 6px; + } + + .nitro-inventory-window .nitro-inventory-preview-state { + right: 6px; + } } diff --git a/src/css/nitrocard/NitroCardView.css b/src/css/nitrocard/NitroCardView.css index 296e8b7..0f37279 100644 --- a/src/css/nitrocard/NitroCardView.css +++ b/src/css/nitrocard/NitroCardView.css @@ -212,3 +212,11 @@ } } } + +@media (max-width: 640px) { + .draggable-window { + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + } +}