platform/packages/theme/styles/love.scss
2024-04-18 11:39:28 +07:00

150 lines
3.5 KiB
SCSS

.floorGrid-room,
.floorGrid-configureRoom {
position: relative;
display: grid;
place-items: center;
&__header {
position: absolute;
display: flex;
justify-content: space-between;
gap: .25rem;
bottom: calc(100% + .125rem);
left: 0;
right: 0;
}
&__field {
position: relative;
aspect-ratio: 1;
border-radius: 20%;
}
&::before {
position: absolute;
content: '';
left: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
right: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
background-color: var(--theme-popup-color);
border: 1px solid var(--theme-popup-divider);
border-radius: 1rem;
}
}
.floorGrid-room {
&__header {
align-items: center;
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + 0.375rem + 1px);
& > span {
color: var(--theme-caption-color);
cursor: default;
}
}
&__field {
overflow: hidden;
width: 100%;
height: 100%;
max-width: 90%;
max-height: 90%;
transition-property: max-width, max-height;
transition-duration: .15s;
transition-timing-function: ease-in-out;
&.hovered:hover {
background-color: transparent;
& > div { opacity: .35; }
}
}
&::before {
bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
&.hovered { background-color: var(--theme-popup-hover); }
}
&:not(.preview)::before { top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6); }
&.preview::before {
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
bottom: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
left: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
right: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
border-radius: .375rem;
.floorGrid-room__field { border-radius: .25rem; }
}
&:not(.disabled, .myOffice) {
&:hover .floorGrid-room__field { background-color: var(--theme-button-default); }
.floorGrid-room__field:not(.person) {
cursor: pointer;
&:hover {
max-width: 100%;
max-height: 100%;
}
}
}
&.disabled .floorGrid-room__header > span { color: var(--theme-trans-color); }
}
.floorGrid-configureRoom {
&__header {
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .75rem - 1px);
& > .antiEditBox input { font-size: .8125rem; }
}
&__field {
width: 90%;
background-color: var(--theme-button-default);
cursor: default;
&.null { pointer-events: none; }
}
&::before {
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6);
bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
box-shadow: var(--huly-floor-roomShadow, --theme-popup-shadow);
}
&.dragged {
position: absolute;
width: var(--huly-floor-roomWidth);
height: var(--huly-floor-roomHeight);
opacity: .85;
z-index: 1;
}
&.placed {
$room-bg-color: var(--theme-popup-color);
$room-stroke-color: var(--theme-button-default);
background-image: linear-gradient(
135deg,
$room-stroke-color 10%,
$room-bg-color 10%,
$room-bg-color 50%,
$room-stroke-color 50%,
$room-stroke-color 60%,
$room-bg-color 60%,
$room-bg-color 100%
);
background-size: 7px 7px;
.floorGrid-room__header,
.floorGrid-room__field { visibility: hidden; }
}
}
// RoomPopup
.room-popup {
.room-btns {
button.secondary,
.hulySplitButton-main {
flex-grow: 1;
}
.hulySplitButton-container {
flex-grow: 2;
}
&.no-video .hulySplitButton-container {
flex-grow: 4;
}
}
}