platform/packages/theme/styles/love.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 {
  &.hovered:hover {
    z-index: 10;
  }
  &__header {
    align-items: center;
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + 0.375rem + 1px);

    & > span {
      color: var(--theme-caption-color);
      transition: font-size .15s ease-in-out;
      cursor: default;
    }
  }
  &__field {
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-width: .5rem;
    min-height: .5rem;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
    transition: transform .15s ease-in-out;
    transform: scale(.9);

    .preview & {
      min-width: .5rem;
      min-height: .5rem;
    }
    &.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 {
        transform: scale(1);
      }
    }
  }
  &.disabled .floorGrid-room__header > span { color: var(--theme-trans-color); }
}

// Fix Avatars
.floorGrid-room .floorGrid-room__field .hulyAvatar-container.hulyAvatarSize-large,
.floorGrid-room .floorGrid-room__field .hulyAvatar-container.hulyAvatarSize-large img { width: 100%; }

.floorGrid-configureRoom {
  &__header {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .75rem - 1px);
    // transition: top .15s ease-in-out;
    
    & > .antiEditBox input {
      font-size: .8125rem;
      transition: font-size .15s ease-in-out;
    }
  }
  &__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; }
  }
}

// Room conners and header
@container floorGridContainer (max-width: 800px) {
  .floorGrid-room::before,
  .floorGrid-configureRoom::before { border-radius: 0.75rem; }  
  .floorGrid-room .floorGrid-room__header {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .125rem + 1px);
    span { font-size: .75rem; }
    svg { width: 0.75rem; }
  }
  .floorGrid-configureRoom .floorGrid-configureRoom__header {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .25rem);
    & > .antiEditBox input { font-size: .75rem; }
  }
}
@container floorGridContainer (max-width: 600px) {
  .floorGrid-room::before,
  .floorGrid-configureRoom::before { border-radius: 0.5rem; }  
  .floorGrid-room .floorGrid-room__header {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .125rem);
    span { font-size: .7rem; }
  }
  .floorGrid-configureRoom .floorGrid-configureRoom__header {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .125rem);
    & > .antiEditBox input { font-size: .7rem; }
  }
}
@container floorGridContainer (max-width: 380px) {
  .floorGrid-room::before,
  .floorGrid-configureRoom::before { border-radius: 0.25rem; }  
  .floorGrid-room .floorGrid-room__header {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .125rem);
    span { font-size: .5rem; }
  }
  .floorGrid-configureRoom .floorGrid-configureRoom__header {
    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .125rem);
    & > .antiEditBox input { font-size: .5rem; }
  }
}

// Room
@media only screen and (max-width: 1024px) {
  .room-container + .bar > .bar__left-panel button span { display: none; }
}
@media only screen and (max-width: 700px) {
  .room-container + .bar > .bar__left-panel { position: initial; }
}

// RoomPopup
.room-popup {
  .room-btns {
    button.secondary,
    .hulySplitButton-main {
      flex-grow: 1;
    }
    .hulySplitButton-container {
      flex-grow: 2;
    }
    &.no-video .hulySplitButton-container {
      flex-grow: 4;
    }
  }
}