mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 22:36:58 +00:00
🆙 small fix loading screen & orde css files
This commit is contained in:
duckietm
parent
d403816265
commit
26e1b94abd
@ -1,33 +1,29 @@
|
||||
import { FC } from 'react';
|
||||
import { Base, Column, Text } from '../../common';
|
||||
|
||||
interface LoadingViewProps
|
||||
{
|
||||
interface LoadingViewProps {
|
||||
isError: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const LoadingView: FC<LoadingViewProps> = props =>
|
||||
{
|
||||
export const LoadingView: FC<LoadingViewProps> = props => {
|
||||
const { isError = false, message = '' } = props;
|
||||
|
||||
return (
|
||||
<Column fullHeight position="relative" className="nitro-loading">
|
||||
<Base fullHeight className="container h-100">
|
||||
<Column fullHeight alignItems="center" justifyContent="end">
|
||||
<Column fullHeight alignItems="center" justifyContent="center">
|
||||
<Base className="nitro-loading_animation" />
|
||||
<Base className="nitro-loading_logo" />
|
||||
<Column size={ 6 } className="text-center py-4">
|
||||
{ isError && (message && message.length) ?
|
||||
<Base className="fs-4 text-shadow">{ message }</Base>
|
||||
:
|
||||
<>
|
||||
<Text fontSizeCustom={ 36 } variant="white" className="text-shadow">The hotel is loading ...</Text>
|
||||
</>
|
||||
}
|
||||
</Column>
|
||||
<Base className="nitro-loading_logo" />
|
||||
{ isError && (message && message.length) ?
|
||||
<Base className="fs-4 nitro-loading_text">{ message }</Base>
|
||||
:
|
||||
<Text fontSizeCustom={32} variant="white" className="nitro-loading_text">
|
||||
The hotel is loading ...
|
||||
</Text>
|
||||
}
|
||||
</Column>
|
||||
</Base>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -1,133 +0,0 @@
|
||||
.nitro-camera-capture {
|
||||
position: relative;
|
||||
|
||||
.header-close {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 0 0 1.5px $white;
|
||||
border: 2px solid #921911;
|
||||
background: repeating-linear-gradient(
|
||||
rgba(245, 80, 65, 1),
|
||||
rgba(245, 80, 65, 1) 50%,
|
||||
rgba(194, 48, 39, 1) 50%,
|
||||
rgba(194, 48, 39, 1) 100%
|
||||
);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 1px 3px;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.camera-area {
|
||||
position: absolute;
|
||||
top: 37px;
|
||||
left: 10px;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.camera-canvas {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
height: 462px;
|
||||
background-image: url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png');
|
||||
background-position: -1px -1px;
|
||||
z-index: 2;
|
||||
|
||||
.camera-button {
|
||||
width: 94px;
|
||||
height: 94px;
|
||||
cursor: pointer;
|
||||
margin-top: 362px;
|
||||
|
||||
background-image: url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png');
|
||||
background-position: -343px -321px;
|
||||
|
||||
&:hover {
|
||||
background-position: -535px -321px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-position: -439px -321px;
|
||||
}
|
||||
}
|
||||
|
||||
.camera-view-finder {
|
||||
background-image: url('@/assets/images/room-widgets/camera-widget/camera-spritesheet.png');
|
||||
background-position: -343px -1px;
|
||||
}
|
||||
|
||||
.camera-frame {
|
||||
.camera-frame-preview-actions {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.camera-roll {
|
||||
width: 330px;
|
||||
background: #bab8b4;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
border: 1px solid black;
|
||||
box-shadow: inset 1px 0px white, inset -1px -1px white;
|
||||
|
||||
img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 1px solid black;
|
||||
object-fit: contain;
|
||||
image-rendering: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-camera-editor {
|
||||
width: $camera-editor-width;
|
||||
height: $camera-editor-height;
|
||||
|
||||
.picture-preview {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.layout-grid-item {
|
||||
height: 60px !important;
|
||||
max-height: 60px !important;
|
||||
}
|
||||
|
||||
.effect-thumbnail-image {
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
image-rendering: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-effect {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
padding: 2px;
|
||||
font-size: 10px;
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-camera-checkout {
|
||||
width: $camera-checkout-width;
|
||||
|
||||
.picture-preview {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
@ -25,8 +25,14 @@
|
||||
background: url('@/assets/images/notifications/coolui.png') no-repeat top left;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
.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;
|
||||
}
|
||||
@ -1,12 +1,16 @@
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { App } from './App';
|
||||
import './css/chats.css';
|
||||
|
||||
import './css/index.css';
|
||||
import './css/loading.css';
|
||||
import './css/NitroCardView.css';
|
||||
import './css/NotificationCenterView.css';
|
||||
import './css/PurseView.css';
|
||||
|
||||
import './css/chat/chats.css';
|
||||
|
||||
import './css/loading/loading.css';
|
||||
|
||||
import './css/notification/NotificationCenterView.css';
|
||||
|
||||
import './css/room/ChatHistoryView.css';
|
||||
import './css/room/RoomWidgets.css';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user