packages/omni-ui/omni-web/src/styles/main.scss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './fonts';
@import './vars';
@import '@yaireo/tagify/dist/tagify.css';

@import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
  --doc-height: 100%;
}

html,
body {
  overscroll-behavior-y: none;
  min-height: 100vh;
  /* fallback for Js load */
  min-height: var(--doc-height);
  width: 100vw;
  /* TailwindCSS font-sans */
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-weight: 400;
}


.winbox {
  font-size: 11px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf,
    inset -2px -2px grey, inset 2px 2px #fff;
  background-color: #ece9d8 !important;
  padding: 3px;

  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0 0 3px;
  -webkit-font-smoothing: antialiased;

}

.wb-drag {
  background-color: #505050;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.wb-body {
  display: flex;

}



p {
  margin-bottom: 0.8rem;
}

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $dark-grey;
  background-color: $editor-background;
  width: 100vw;
}

[draggable='true'] {
  cursor: move;
}



.resizable {
  overflow: hidden;
  resize: both;
  max-width: 30vw;
  max-height: 50vh;
  border: 1px solid black;
  min-width: 50px;
  min-height: 50px;
}

.logo-svg {
  position: absolute;
  max-width: 25%;
  bottom: 20px;
  right: 20px;
  opacity: 0.3;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: $control-secondary transparent;
}

/* Chrome, Edge, and Safari */

.custom-scrollbar::-webkit-scrollbar {
  width: 15px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #e7e7e7;
  border: 1px solid #cacaca;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: $primary;
}

.btn-icon {
  @apply inline-block items-center justify-center bg-transparent rounded text-black px-2 py-2;
}

.btn-icon:hover {
  @apply bg-transparent hover:text-blue-600 cursor-pointer;
}

.btn-icon-dark {
  @apply inline-block items-center justify-center bg-transparent rounded text-white px-1 py-1;
}

.btn-icon-dark:hover {
  background-color: $dark-grey;
  color: white;
  cursor: pointer;
}

.btn {
  @apply inline-block items-center justify-center rounded px-1 py-1 font-medium my-0.5 mx-0.5 text-xs hover:shadow focus:outline-none focus:ring cursor-pointer;

  &-primary {
    @apply bg-blue-700 text-white hover:bg-blue-600 active:text-blue-700;
  }

  &-secondary {
    @apply bg-blue-900 text-white hover:bg-blue-800 active:text-blue-900;
  }

  &-delete {
    background-color: $error;
    color: white;

    &:hover {
      background-color: $dark-grey;
    }
  }

  &-command {
    @apply bg-gray-300 text-gray-600 hover:bg-gray-300 active:text-gray-900;
  }

  &-command2 {
    background-color: $neutral-grey;
    color: white;

    &:hover {
      background-color: $medium-grey;
    }
  }
}

.btn-large {
  @apply inline-block rounded border border-blue-900 px-12 py-3 text-sm font-medium text-blue-900 hover:bg-blue-900 hover:text-white focus:outline-none focus:ring active:bg-blue-800;
}

.btn-large:disabled {
  @apply text-gray-300 border-gray-300 hover:bg-white cursor-not-allowed;
}

.tt {
  visibility: hidden;
  position: absolute;
}

.has-tt:hover .tt {
  visibility: visible;
  z-index: 100;
}

.custom-tagify {
  @apply w-full rounded-md text-xs bg-white border-gray-300 shadow-sm disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500;
}

.aspect-square {
  position: relative;
  width: 100%;
}

.aspect-square img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.min-wh-256px {
  min-width: 256px;
  min-height: 256px;
}

// Drag and drop

.dropzone {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  color: #ccc;
  line-height: 200px;
  text-align: center;
}

.dropzone.dragover {
  border-color: #000;
  color: #000;
}

.floating-extension-header {
  border: none;
  /* border-0 */
  background-color: #2c3444;
  height: 1.875rem;
  padding: 0rem 0.625rem;

  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
}

// Chat
.chatContainer {
  background-color: $chat-primary;
  display: flex;
  width: 24.5rem;
  height: 100%;
  min-width: 24.5rem;
  max-width: 50rem;
  max-height: var(--doc-height);
  padding: 0rem 0.4375rem;
  flex-direction: column;
  align-items: center;
  gap: 0.1875rem;
  flex-shrink: 0;
  overflow: hidden;
  resize: both;

  &.chat-left {
    border-radius: 0rem 0.3125rem 0.3125rem 0rem;
  }

  &.chat-right {
    border-radius: 0.3125rem 0rem 0rem 0.3125rem;
  }

  .chatTabBar {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    padding: 0rem 0.5rem;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    align-self: stretch;

    .chatTabContent {
      display: flex;
      width: 24rem;
      height: 2.25rem;
      padding: 0.625rem 2.75rem 0.625rem 0.625rem;
      align-items: flex-start;
      gap: 0.625rem;
      flex: 1 0 0;
      color: white;
      -webkit-user-select: none;
      user-select: none;
      text-overflow: ellipsis;
      @extend .omni-font-s-medium;
    }

    .chatTabCommand {
      display: inline-flex;
      flex-direction: row;
      align-items: flex-end;
      gap: 0.5rem;
      color: white;
      flex-shrink: 0;
    }
  }

  .chatWindow {
    display: flex;
    width: 100%;
    align-self: stretch;
    flex-direction: column;
    background-color: $light-grey-100;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0.3125rem;

    .chatMessage {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
      background-color: $light-grey-100;
      padding: 1rem 0.5rem;
      flex: 1 0 0;
      align-self: stretch;
      color: var(--dark-grey, #3b3e44);
      min-height: 55px;
      border-bottom: 1px solid $grey;
      @extend .omni-font-m-regular;

      &.mine {
        background-color: #ffffff;
      }

      &.error {
        color: red;
      }

      .chatMessageHeader {
        display: flex;
        width: 100%;
        height: 1.25rem;
        flex-direction: row;
        overflow: hidden;
        color: var(--medium-grey, #757576);
        text-overflow: ellipsis;
        justify-content: space-between;
        gap: 0.5rem;
        @extend .omni-font-s-regular;

        span {
          display: flex;
          flex-direction: row;

          svg {
            width: 1rem;
            height: 1rem;
            border-width: 0px;
            margin-left: 0.25rem;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
          }
        }
      }

      ul {
        list-style-type: square;
      }

      li {
        margin-left: 1.25rem;
      }
    }

    .chatMessageAttachment {
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
      width: 100%;
      margin-top: 0.25rem;
      /* This value depends on your root font-size, 1rem is usually 16px */
      margin-right: 0.5rem;
      z-index: 1;
      justify-content: flex-end;
      background-color: transparent;
      text-align: right;

      .chatMessageAction {
        width: 100%;
        margin-top: 0.125rem;
        text-align: right;
      }
    }
  }

  .chatWindowInput {
    display: flex;
    min-height: 2.875rem;
    padding: 0.3125rem;
    align-items: flex-start;
    gap: 0.2rem;
    flex-shrink: 0;
    align-self: stretch;
  }

  .chatCommandMenu {
    position: absolute;
    left: -30px;
    bottom: 2rem;
    margin-left: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: $chat-primary;
    /* You might need to adjust the color */
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
      0px 4px 6px -2px rgba(0, 0, 0, 0.05);
    color: #ffffff;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    visibility: hidden;
    width: 12rem;
    z-index: 20;


  }

  .group:hover .chatCommandMenu {
    visibility: visible;
  }

  .chatCommandItem {
    cursor: pointer;
    width: 100%;
    padding: 0.25rem;
    color: #ffffff;
    padding-left: 0.25rem;
    font-weight: 600;

    &.nickname {
      color: $accent-color;
    }

    &:hover {
      //background-color: #2D3748; /* You might need to adjust the color */
      color: $accent-color;
    }
  }
}

.sidebar {
  display: flex;
  //width: 2.5rem;
  height: screen;
  flex-shrink: 0;
  flex-direction: column;
  background: $chat-primary;
  padding: 1rem 0.5rem;
  gap: 0.5rem;
  border-right: 2px solid $grey;

  .sidebarItem {
    display: block;
    margin: auto;
    align-items: center;
    justify-items: center;
    justify-content: center;
    border-radius: 0.3125rem;
    color: #ffffff;
    transition: background-color 0.5s ease-in-out;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;

    svg {
      
      fill: transparent;
      stroke: white;
    }

    svg:hover {
      stroke: #000;
    }

    svg.active {
      stroke: #000;
    }

    &:hover {
      cursor: pointer;
      stroke: $neutral-grey;
    }

    &-sub {
      display: flex;
      margin: auto;
      align-items: flex-start;
      justify-items: center;
      justify-content: flex-start;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0.625rem;
      @extend .omni-font-s-regular;
    }
  }
}

.editorSideMenuContainer {
  display: flex;
  justify-content: center;
  justify-items: end;
  align-items: center;

  .editorSideMenu {
    display: flex;
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    width: 2.1rem;
    flex-shrink: 0;
    padding: 0.8rem 0.4rem;
    flex-direction: column;
    justify-content: center;
    justify-items: end;
    align-items: center;
    gap: 0.8rem;
    border-radius: 0.25rem;
    background: $neutral-grey;
    margin-right: 0.5rem;
    color: #ffffff;

    &.chat-left {
      right: 0px;
    }

    &.chat-right {
      right: var(--chat-width);
    }

    &:hover {
      cursor: pointer;
    }

    button {
      svg {
        fill: transparent;
        stroke: white;
      }

      svg:hover {
        stroke: #000;
      }
    }


  }
}

.editorTopMenuContainer {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateX(-50%);
  z-index: 9;

  .editorTopMenu {
    display: inline-flex;
    flex-direction: row;
    padding: 0.5rem 1rem;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.3125rem;
    background: $neutral-grey;
    margin-top: 0.5rem;

    .editorTopMenuItem {
      button {
        display: inline-flex;
        padding: 0.25rem 1rem;
        align-items: center;
        gap: 0.625rem;
        border-radius: 0.375rem;
        border: 1.6px solid var(--white, #fff);
        color: var(--white, #fff);
        width: max-content;
        @extend .omni-font-s-medium;

        &:hover {
          cursor: pointer;
          background-color: $medium-grey;
        }
      }
    }
  }

  .editorTopMenuDropdown {
    display: flex;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.3125rem;
    background: $neutral-grey;

    .editorTopMenuDropdownItem {
      display: flex;
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      background: $neutral-grey;
      padding: 0.325rem;
      @extend .omni-font-s-regular;

      &:hover {
        background-color: $medium-grey;
        border-radius: 0.3125rem;
        padding: 0.325rem;
      }

      span {
        cursor: pointer;
        color: $white;
        margin-left: 0.5rem;
        margin-right: 0.2rem;

        &.unavailable {
          color: $grey;
          cursor: not-allowed;
        }

        &.shortcut {
          color: $light-grey-300;
        }

      }

      svg {
        width: 1rem;
        height: 1rem;

        &.unavailable {
          opacity: 50%;
          cursor: not-allowed;
        }
      }
    }
  }
}

.tutorial {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 70%;
  transform: translateX(-50%) translateY(-50%);
  @extend .omni-font-l-medium;

}

.TOScontainer {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 70%;
  align-self: center;
}

.TOStitle {
  font-size: 24px;
  margin-bottom: 20px;
  user-select: none;
}

.TOSlicenseBox {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  overflow-x: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
  white-space: pre-wrap;
  user-select: text;
}

.TOSbuttonContainer {
  display: flex;
  justify-content: space-evenly;
  user-select: none;
}