ollama_semantic_function_calling / ollamatools-new / keet / assets / css / chat-editor.css

.chat-editor-commands {
  display: flex;
  flex-shrink: 1;
  flex-grow: 0;
  width: 100%;
}

.chat-editor-commands__responsive {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  flex-grow: 0;
  width: 100%;
  position: relative;
  container-type: inline-size;
  container-name: chat-tools;
}

.chat-editor-commands__tools {
  display: flex;
  align-items: center;
}

.chat-editor-commands button svg {
  min-width: 1.25rem;
  max-width: 1.25rem;
}

.chat-editor-commands__tools > * {
  margin-right: 0.25rem;
}

.chat-editor-commands__popup {
  position: absolute;
  display: flex;
  bottom: 1.7rem;
  right: -3.75rem;
  display: flex;
  flex-direction: row;
  background-color: var(--color-grey-600);
  border-color: var(--color-grey-300);
}

.chat-editor-commands__popup > * {
  display: none;
  margin: 0.125rem;
  text-align: center;
}

.chat-editor-commands button:focus {
  outline: none;
}

.chat-editor-commands__more {
  display: none;
  position: relative;
}

@container chat-tools (width < 20rem) {
  .chat-editor-commands__tools > *:nth-child(7) {
    display: none;
  }
  .chat-editor-commands__popup > *:nth-child(7) {
    display: block;
  }
  .chat-editor-commands__more {
    display: flex;
  }

  .chat-editor-commands__popup {
    /* menu item size is 2.25 x 2.25 rem. Padding 1.25 from each side */
    width: 2.5rem;
    height: 2.5rem;
    right: -0.25rem;
    flex-wrap: wrap;
  }
}

@container chat-tools (width < 18.25rem) {
  .chat-editor-commands__tools > *:nth-child(5),
  .chat-editor-commands__tools > *:nth-child(6) {
    display: none;
  }
  .chat-editor-commands__popup > *:nth-child(5),
  .chat-editor-commands__popup > *:nth-child(6) {
    display: block;
  }

  .chat-editor-commands__popup {
    width: 7rem;
    height: 2.5rem;
    right: -3.75rem;
    flex-wrap: wrap;
  }
}

@container chat-tools (width < 13.25rem) {
  .chat-editor-commands__tools > *:nth-child(4) {
    display: none;
  }
  .chat-editor-commands__popup > *:nth-child(4) {
    display: block;
  }

  .chat-editor-commands__popup {
    width: 7rem;
    height: 4.75rem;
    right: -3.75rem;
    flex-wrap: wrap;
  }
}

@container chat-tools (width < 11rem) {
  .chat-editor-commands__popup {
    width: 9.25rem;
    height: 4.75rem;
    flex-wrap: wrap;
  }

  .chat-editor-commands__tools > *:nth-child(1),
  .chat-editor-commands__tools > *:nth-child(2),
  .chat-editor-commands__tools > *:nth-child(3) {
    display: none;
  }
  .chat-editor-commands__popup > *:nth-child(1),
  .chat-editor-commands__popup > *:nth-child(2),
  .chat-editor-commands__popup > *:nth-child(3) {
    display: block;
  }
}

@container chat-tools (width < 4rem) {
  .chat-editor-commands__popup {
    width: 11.5rem;
  }

  .chat-editor-commands__tools > *:nth-child(7) {
    display: none;
  }
  .chat-editor-commands__popup > *:nth-child(7) {
    display: block;
  }
}