Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Vishnu
2025-06-10 15:28:23 +05:30
commit e22a2dc275
699 changed files with 100382 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
app/src/styles/scene/comments.scss Normal file
View File

@@ -0,0 +1,310 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.comments-main-wrapper {
position: relative;
}
.comments-threads-wrapper {
position: absolute;
top: 0;
left: 0;
padding: 4px;
background: var(--background-color);
border-radius: #{$border-radius-extra-large} #{$border-radius-extra-large} #{$border-radius-extra-large}
0;
backdrop-filter: blur(12px);
z-index: 1000;
transform: translateY(-100%);
outline: 1px solid var(--border-color);
.comments-threads-container {
display: flex;
align-items: start;
flex-direction: column;
.users-commented {
@include flex-center;
.users {
height: 24px;
line-height: 24px;
width: 24px;
text-transform: uppercase;
border-radius: 50%;
}
}
.last-comment-details {
display: flex;
align-items: start;
flex-direction: column;
overflow: hidden;
transition: all 0.2s ease-in;
.header {
@include flex-center;
gap: 10px;
.user-name {
text-transform: capitalize;
}
.time {
font-size: var(--font-size-small);
color: var(--input-text-color);
}
}
.message {
margin-top: 10px;
}
.replies {
margin-top: 4px;
font-size: var(--font-size-small);
color: var(--input-text-color);
}
.header,
.message,
.replies {
display: none;
opacity: 0;
}
}
.expand {
min-width: 200px;
max-width: 260px;
padding: 12px;
padding-top: 0;
height: 100%;
}
}
.open {
.users-commented {
padding: 12px;
}
.header,
.message,
.replies {
display: flex !important;
opacity: 1 !important;
}
}
}
.thread-chat-wrapper {
position: absolute;
// remove later
top: 50%;
left: 50%;
// ----
z-index: #{$z-index-ui-highest};
.thread-chat-container {
background: var(--background-color);
backdrop-filter: blur(14px);
border-radius: #{$border-radius-extra-large};
width: 20rem;
.header-wrapper {
padding: 12px;
@include flex-space-between;
.header-options {
@include flex-center;
position: relative;
.options-list {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-24px, 100%);
background: var(--background-color);
padding: 8px 4px;
border-radius: #{$border-radius-medium};
backdrop-filter: blur(10px);
z-index: 100;
.options {
text-wrap: nowrap;
padding: 2px 4px;
border-radius: #{$border-radius-medium};
cursor: pointer;
&:hover {
color: var(--text-button-color);
background: var(--background-color-accent);
}
&.delete {
&:hover {
color: var(--log-error-text-color);
background: var(--log-error-background-color);
}
}
}
}
.options-button,
.close-button {
@include flex-center;
height: 24px;
width: 24px;
border-radius: #{$border-radius-medium};
&:hover {
background: var(--background-color-solid);
}
}
.close-button {
svg {
scale: 1.4;
}
}
}
}
.messages-wrapper {
padding: 12px;
padding-top: 0;
.edit-container {
.input-container {
textarea{
background: var(--background-color);
&:focus{
outline-color: var(--border-color-accent);
}
}
}
.actions-container {
@include flex-space-between;
width: 100%;
margin: 8px 0;
.actions {
@include flex-center;
gap: 4px;
.cancel-button,
.save-button {
padding: 4px 10px;
border-radius: #{$border-radius-large};
background: var(--background-color-solid);
outline: 1px solid var(--border-color);
}
.save-button {
color: var(--text-button-color);
background: var(--background-color-accent);
outline: none;
}
}
}
}
.message-container {
position: relative;
@include flex-space-between;
align-items: flex-start;
gap: 12px;
margin-top: 8px;
&:first-child{
margin: 0;
}
.profile {
height: 28px;
width: 28px;
min-width: 28px;
text-transform: uppercase;
line-height: 28px;
text-align: center;
border-radius: #{$border-radius-circle};
}
.content {
width: 100%;
.user-details {
display: flex;
align-items: flex-end;
gap: 8px;
.user-name {
text-transform: capitalize;
}
.time {
font-size: var(--font-size-tiny);
color: var(--input-text-color);
}
}
}
.more-options {
position: absolute;
right: 0;
top: 0;
.more-options-button {
@include flex-center;
height: 18px;
width: 18px;
border-radius: #{$border-radius-small};
&:hover{
background: var(--background-color-solid);
}
}
.options-list {
position: absolute;
right: 0;
padding: 3px 6px;
background: var(--background-color);
backdrop-filter: blur(10px);
outline: 1px solid var(--border-color);
border-radius: #{$border-radius-medium};
z-index: 100;
.option {
width: 100%;
border-radius: #{$border-radius-medium};
padding: 2px 6px;
text-align: start;
&:hover{
background: var(--background-color-accent);
color: var(--text-button-color);
}
}
}
}
.message{
margin-top: 6px;
}
}
}
.send-message-wrapper {
padding: 12px;
padding-top: 8px;
.input-container {
position: relative;
@include flex-space-between;
background: var(--background-color);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
textarea {
background: transparent;
outline: none;
width: calc(100% - 36px);
overflow: hidden;
line-height: 28px;
max-height: 108px;
}
.sent-button {
position: absolute;
right: 2px;
bottom: 2px;
@include flex-center;
padding: 2px;
svg {
rotate: 45deg;
}
}
.disable-send-btn {
filter: saturate(0);
}
&.active {
background: var(--background-color-solid);
padding-top: 4px;
flex-direction: column;
align-items: end;
textarea {
width: 100%;
line-height: 18px;
}
.sent-button {
position: relative;
}
}
}
}
}
}

120
app/src/styles/scene/scene.scss Normal file
View File

@@ -0,0 +1,120 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.distance-text-wrapper,
.zone-name-wrapper,
.pointer-none {
pointer-events: auto !important;
background-color: gray;
}
.zone-name-wrapper {
background: var(--background-color-accent);
color: var(--text-button-color);
outline: 1px solid var(--border-color);
border-radius: #{$border-radius-medium};
backdrop-filter: blur(12px);
}
.distance-text {
pointer-events: none !important;
div {
position: absolute;
transform: translate(-50%, -50%) scale(0.8);
pointer-events: none !important;
white-space: nowrap;
// style
font-size: var(--font-size-large);
padding: 2px 8px;
background: var(--background-color-accent);
color: var(--text-button-color);
border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
}
.area {
background: #008cff;
}
}
.zone-name {
padding: 2px 10px;
text-wrap: nowrap;
color: var(--text-button-color);
}
//
//
//
//
// ------------------------------- temp -----------------------------
.select-floorplane-wrapper {
position: absolute;
@include flex-center;
gap: 12px;
top: 0;
left: 50%;
padding: 8px;
padding-left: 14px;
background: var(--background-color);
backdrop-filter: blur(12px);
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
transform: translate(-50%, 12px);
z-index: 2;
.presets-container {
@include flex-center;
gap: 6px;
.preset {
background: var(--background-color);
padding: 2px 8px;
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
}
.upload-btn{
padding: 4px 16px !important;
}
.generate-walls-btn{
padding: 4px 16px;
@include flex-center;
gap: 4px;
color: var(--text-button-color);
background: var(--background-color-button);
border-radius: #{$border-radius-extra-large};
}
.active {
background: var(--background-color-accent);
color: var(--text-button-color);
}
}
}
.label-toogler {
position: fixed;
bottom: 4%;
right: 1.5%;
z-index: 10;
border-radius: 8px;
.input-toggle-container {
padding: 0;
display: flex;
flex-direction: column;
align-items: end;
gap: 12px;
.check-box {
width: 35px;
height: 20px;
.check-box-style {
width: 16px;
height: 16px;
background: var(--text-button-color) !important;
}
}
}
}