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

🆙 Move CSS into componets as we use Tailwind

Browse Source
This commit is contained in:
duckietm
2026-02-20 09:04:42 +01:00
parent d0ff80434c
commit f961e29bd1
17 changed files with 18 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/layout/LayoutMiniCameraView.tsx
+2 -2
View File
@@ -33,14 +33,14 @@ export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props => {
return (
<DraggableWindow handleSelector=".nitro-room-thumbnail-camera">
<div className="nitro-room-thumbnail-camera px-2">
<div className="nitro-room-thumbnail-camera w-[132px] h-[192px] bg-[url('@/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png')] px-2">
<div
style={{
position: 'relative',
paddingBottom: '192px', // Matches the space needed to position buttons as per the design
}}
>
<div ref={elementRef} className="camera-frame" />
<div ref={elementRef} className="absolute mt-[30px] ml-[3px] w-[110px] h-[110px]" />
<div
style={{
position: 'absolute',
src/components/chat-history/ChatHistoryView.tsx
+2 -2
View File
@@ -74,9 +74,9 @@ export const ChatHistoryView: FC<{}> = props => {
if (!isVisible) return null;
return (
<NitroCardView className="nitro-chat-history" theme="primary-slim" uniqueKey="chat-history">
<NitroCardView className="w-[400px] h-[400px] bg-[#f0f0f0]" theme="primary-slim" uniqueKey="chat-history">
<NitroCardHeaderView headerText={LocalizeText('room.chathistory.button.text')} onCloseClick={event => setIsVisible(false)} />
<NitroCardContentView className="nitro-card-content" gap={2} overflow="hidden" style={{ height: 'calc(100% - 40px)', display: 'flex', flexDirection: 'column' }}>
<NitroCardContentView className="h-full bg-[#f0f0f0] bg-[url('@/assets/images/chat/chathistory_background.png')] bg-repeat bg-auto" gap={2} overflow="hidden" style={{ height: 'calc(100% - 40px)', display: 'flex', flexDirection: 'column' }}>
<NitroInput placeholder={LocalizeText('generic.search')} type="text" value={searchText} onChange={event => setSearchText(event.target.value)} />
<div ref={elementRef} style={{ flex: 1, overflowY: 'auto', background: 'inherit' }}>
{filteredChatHistory.map((row, index) => (
src/components/floorplan-editor/FloorplanEditorView.tsx
+1 -1
View File
@@ -142,7 +142,7 @@ export const FloorplanEditorView: FC<{}> = props =>
return (
<FloorplanEditorContextProvider value={ { originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings } }>
{ isVisible &&
<NitroCardView uniqueKey="floorpan-editor" className="nitro-floorplan-editor" theme="primary-slim">
<NitroCardView uniqueKey="floorpan-editor" className="w-[760px] h-[500px]" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.title') } onCloseClick={ () => setIsVisible(false) } />
<NitroCardContentView overflow="hidden">
<FloorplanOptionsView onCanvasScroll={ direction => canvasScrollHandler && canvasScrollHandler(direction) } />
src/components/floorplan-editor/views/FloorplanImportExportView.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = pro
}, []);
return (
<NitroCardView theme="primary-slim" className="floorplan-import-export">
<NitroCardView theme="primary-slim" className="w-[630px] h-[475px]">
<NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.import.export') } onCloseClick={ onCloseClick } />
<NitroCardContentView>
<textarea className="h-100" value={ map } onChange={ event => setMap(event.target.value) } />
src/components/floorplan-editor/views/FloorplanOptionsView.tsx
+1 -1
View File
@@ -171,7 +171,7 @@ export const FloorplanOptionsView: FC<FloorplanOptionsViewProps> = props =>
<Text bold>{ LocalizeText('floor.editor.wall.height') }</Text>
<Flex alignItems="center" gap={ 1 }>
<FaCaretLeft className="cursor-pointer fa-icon" onClick={ decreaseWallHeight } />
<input type="number" className="form-control form-control-sm quantity-input" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
<input type="number" className="form-control form-control-sm w-[49px]" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
<FaCaretRight className="cursor-pointer fa-icon" onClick={ increaseWallHeight } />
</Flex>
</Column>
src/components/inventory/InventoryView.tsx
+1 -1
View File
@@ -127,7 +127,7 @@ export const InventoryView: FC<{}> = props =>
return (
<>
<NitroCardView className="nitro-inventory" uniqueKey="inventory">
<NitroCardView className="w-[528px] h-[420px] min-w-[528px] min-h-[420px]" uniqueKey="inventory">
<NitroCardHeaderView
headerText={ LocalizeText('inventory.title') }
onCloseClick={ onClose } />
src/components/inventory/views/InventoryCategoryEmptyView.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = p
return (
<Grid { ...rest }>
<Column center overflow="hidden" size={ 5 }>
<div className="empty-image" />
<div className="w-[129px] h-[181px] bg-[url('@/assets/images/inventory/empty.png')] bg-no-repeat" />
</Column>
<Column justifyContent="center" overflow="hidden" size={ 7 }>
<Text truncate fontSize={ 5 } fontWeight="bold" overflow="unset">{ title }</Text>
src/components/inventory/views/furniture/InventoryFurnitureDeleteView.tsx
+1 -1
View File
@@ -84,7 +84,7 @@ export const InventoryFurnitureDeleteView: FC<{}> = props =>
className="cursor-pointer text-black fa-icon shrink-0"
onClick={ () => updateAmount((amount - 1).toString()) } />
<NitroInput
className="quantity-input text-center py-0.5!"
className="w-[49px] text-center py-0.5!"
type="number"
min={ 1 }
max={ maxAmount }
src/components/inventory/views/furniture/InventoryTradeView.tsx
+3 -3
View File
@@ -189,7 +189,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
return (
<LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemActive={ (groupItem === item) } itemCount={ count } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }>
{ ((count > 0) && (groupItem === item)) &&
<Button className="trade-button bottom-1 inset-e-1" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
<Button className="bottom-1 inset-e-1 z-[5] min-h-0 text-[8px] px-[2px] py-[1px]" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
<FaChevronRight className="fa-icon" />
</Button>
}
@@ -200,7 +200,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
<Column alignItems="end" gap={ 1 }>
<Grid overflow="hidden">
<Column overflow="hidden" size={ 6 }>
<input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm quantity-input" disabled={ !groupItem } placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } type="number" value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
<input className="w-[49px] min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm" disabled={ !groupItem } placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } type="number" value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
</Column>
<Column overflow="hidden" size={ 6 }>
<Button disabled={ !groupItem } variant="secondary" onClick={ event => changeCount(groupItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
@@ -229,7 +229,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
return (
<LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemCount={ item.getTotalCount() } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
{ (ownGroupItem === item) &&
<Button className="trade-button bottom-1 inset-s-1" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
<Button className="bottom-1 inset-s-1 z-[5] min-h-0 text-[8px] px-[2px] py-[1px]" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
<FaChevronLeft className="fa-icon" />
</Button> }
</LayoutGridItem>
src/components/loading/LoadingView.tsx
+5 -5
View File
@@ -10,15 +10,15 @@ export const LoadingView: FC<LoadingViewProps> = props => {
const { isError = false, message = '' } = props;
return (
<Column fullHeight position="relative" className="nitro-loading">
<Column fullHeight position="relative" className="relative z-[100] bg-[radial-gradient(#1d1a24,#003a6b)]">
<Base fullHeight className="container h-100">
<Column fullHeight alignItems="center" justifyContent="center">
<Base className="nitro-loading_animation" />
<Base className="nitro-loading_logo" />
<Base className="absolute inset-0 m-auto w-[84px] h-[84px] [zoom:1.5] [image-rendering:pixelated] bg-[url('@/assets/images/loading/loading.gif')] bg-no-repeat bg-left-top" />
<Base className="absolute top-[20px] left-[20px] z-[2] w-[150px] h-[100px] bg-[url('@/assets/images/notifications/coolui.png')] bg-no-repeat bg-left-top" />
{ isError && (message && message.length) ?
<Base className="fs-4 nitro-loading_text">{ message }</Base>
<Base className="fs-4 absolute bottom-[20px] left-1/2 z-[3] -translate-x-1/2 [text-shadow:0px_4px_4px_rgba(0,0,0,0.25)]">{ message }</Base>
:
<Text fontSizeCustom={32} variant="white" className="nitro-loading_text">
<Text fontSizeCustom={32} variant="white" className="absolute bottom-[20px] left-1/2 z-[3] -translate-x-1/2 [text-shadow:0px_4px_4px_rgba(0,0,0,0.25)]">
The hotel is loading ...
</Text>
}
src/css/chat/ChatHistoryView.css
-28
View File
@@ -1,28 +0,0 @@
.nitro-chat-history {
background-color: #f0f0f0;
width: 400px;
height: 400px;
}
.nitro-chat-history .nitro-card-content {
height: 100%;
background-image: url('@/assets/images/chat/chathistory_background.png');
background-repeat: repeat;
background-size: auto;
background-color: #f0f0f0;
}
.nitro-chat-history .p-1.slide-in {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
0% {
transform: translateY(-20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
src/css/common/MiniCamera.css
-13
View File
@@ -1,13 +0,0 @@
.nitro-room-thumbnail-camera {
width: 132px;
height: 192px;
background-image: url('@/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
.camera-frame {
position: absolute;
width: 110px;
height: 110px;
margin-top: 30px;
margin-left: 3px;
}
}
src/css/floorplan/FloorplanEditorView.css
-9
View File
@@ -1,9 +0,0 @@
.nitro-floorplan-editor {
width: 760px;
height: 500px;
}
.floorplan-import-export {
width: 630px;
height: 475px;
}
src/css/inventory/Inventory.css
-29
View File
@@ -1,29 +0,0 @@
:root {
--inventory-width: 528px;
--inventory-height: 420px;
}
.nitro-inventory {
width: var(--inventory-width);
height: var(--inventory-height);
min-width: var(--inventory-width);
min-height: var(--inventory-height);
}
.empty-image {
background: url("@/assets/images/inventory/empty.png");
background-repeat: no-repeat;
width: 129px;
height: 181px;
}
.trade-button {
min-height: 0;
font-size: 8px;
padding: 1px 2px;
z-index: 5;
}
.quantity-input {
width: 49px;
}
src/css/loading/loading.css
-38
View File
@@ -1,38 +0,0 @@
.nitro-loading {
position: relative;
background-image: radial-gradient(#1d1a24, #003a6b);
z-index: 100;
}
.nitro-loading_animation {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
left: 0;
background: url('@/assets/images/loading/loading.gif') no-repeat top left;
width: 84px;
height: 84px;
zoom: 1.5;
image-rendering: pixelated;
}
.nitro-loading_logo {
position: absolute;
top: 20px;
left: 20px;
background: url('@/assets/images/notifications/coolui.png') no-repeat top left;
width: 150px;
height: 100px;
z-index: 2;
}
.nitro-loading_text {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
z-index: 3;
}
src/css/room/ChatHistoryView.css
-4
View File
@@ -1,4 +0,0 @@
.nitro-chat-history {
width: 300px;
height: 200px;
}
src/index.tsx
-5
View File
@@ -6,12 +6,9 @@ import './css/index.css';
import './css/backgrounds/BackgroundsView.css';
import './css/chat/Chats.css';
import './css/chat/ChatHistoryView.css';
import './css/common/MiniCamera.css';
import './css/common/Buttons.css';
import './css/floorplan/FloorplanEditorView.css';
import './css/forms/form_select.css';
@@ -19,11 +16,9 @@ import './css/hotelview/HotelView.css';
import './css/icons/icons.css';
import './css/inventory/Inventory.css';
import './css/layout/LayoutTrophy.css';
import './css/loading/loading.css';
import './css/nitrocard/NitroCardView.css';