ollama_semantic_function_calling / ollamatools-new / keet / assets / css / main.css

:root {
  /* src/lib/theme.js */
  --color-primary-200: rgb(38, 210, 232, 0.2);
  --color-primary-500: rgb(38, 210, 232, 0.5);
  --color-primary-700: rgb(38, 210, 232, 0.7);
  /* color palette */

  /* Grey */
  --color-grey-0: #ACB1BB;
  --color-grey-50: #F7F8FA;
  --color-grey-100: #CED3DC;
  --color-grey-200: #A0A8B8;
  --color-grey-300: #707785;
  --color-grey-350: #565864;
  --color-grey-400: #4D515F;
  --color-grey-450: #3E404B;
  --color-grey-500: #30333F;
  --color-grey-600: #222430;
  --color-grey-650: #323439;
  --color-grey-700: #1A1D29;
  --color-grey-800: #151823;
  --color-grey-900: #0D0F16;
  --color-grey-950: #00020A;

  /* Blue */
  --color-blue-200: #6EE1F0;
  --color-blue-400: #26D2E8;
  --color-blue-600: #067FA0;
  --color-blue-900: #005066;
  --color-blue-950: #183E4C;
  --color-blue-1000: #0F2932;

  /* Red */
  --color-secondary: var(--color-red-600);
  --color-error: var(--color-red-400);
  --color-red-250: #FFA597;
  --color-red-300: #FFA6A6;
  --color-red-350: #E69595;
  --color-red-400: #FF6D6D;
  --color-red-450: #ED695F;
  --color-red-600: #CE3B3B;
  --color-red-800: #6F3030;
  --color-red-900: #392029;
  --color-red-950: #231C27;

  /* Yellow */
  --color-yellow-400: #F7CE76;
  --color-yellow-500: #F2B414;
  --color-yellow-800: #876101;
  --color-yellow-950: #483C1C;

  /* Green */
  --color-green-300: #53EA98;
  --color-green-400: #49C080;
  --color-green-500: #40A970;
  --color-green-950: #253531;


  /* Indigo */
  --color-indigo-400: #9887FF;
  --color-indigo-700: #5241BC;
  --color-indigo-950: #28253E;

  /* Fuschia */
  --color-fuschia-500: #F47AFA;
  --color-fuschia-900: #851E8A;
  --color-fuschia-950: #2B162C;
  --color-fuschia-1000: #412C50;


  /* Other colors */
  --color-primary-almost-black: #151517;
  --color-primary-white: #FFFFFF;

  /* gradients */
  --color-primary-gradient: linear-gradient(180deg, #00FFCF 0%, #4AA6FF 100%);

  --app-head-h: 2.75rem;
}

html {
  font-size: 16px;
  overflow: hidden;
}

body {
  margin: 0;
}

button.gradient-primary {
  background: linear-gradient(180deg, rgba(0, 255, 207, 0.2) 0%, rgba(74, 166, 255, 0.2) 100%);
}

button.gradient-primary:hover {
  background: linear-gradient(180deg, rgba(0, 255, 207, 0.3) 0%, rgba(74, 166, 255, 0.3) 100%);
}

.no-drag {
  -webkit-app-region: no-drag !important;
}

.chat-bar {
  display: grid !important;
  background: var(--color-grey-800);
  grid-template-columns: auto minmax(auto, 1fr);
  container-type: inline-size;
  container-name: chat-bar;

  /* sandbox: https://jsfiddle.net/8vwc1ajf/ */
  .call-room-title {
    display: flex;
    max-width: fit-content;
    min-width: 3.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-basis: calc(100% - 24rem);
    flex-shrink: 1;
  }
}

.call-bar {
  min-width: 13rem;
}

@container chat-bar (width < 33.2rem) {
  .call-bar {
    min-width: 10rem;
  }
}

@keyframes join-call-btn-animation {

  0%,
  100% {}

  50% {
    background: #FF6D6D33;
    border-color: var(--color-red-300);
    box-shadow: 0px 0px 10px 0px #FFA6A6;
  }
}

.join-call-btn {
  animation: join-call-btn-animation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-shadow {
  text-shadow: 1px 1px 16px #000;
}

.glow {
  box-shadow: 5px 5px 5px 5px #0ff;
}

/* FadeIn animation */
.fadeIn {
  animation: fadeIn 300ms ease;
}

.fadeIn-50 {
  animation: fadeIn 50ms ease;
}

.fadeIn-100 {
  animation: fadeIn 100ms ease;
}

.fadeIn-150 {
  animation: fadeIn 150ms ease;
}

.fadeIn-200 {
  animation: fadeIn 200ms ease;
}

.fadeIn-300 {
  animation: fadeIn 300ms ease;
}

.fadeIn-400 {
  animation: fadeIn 400ms ease;
}

.fadeIn-500 {
  animation: fadeIn 500ms ease;
}

/* Show animation */
.show {
  animation: show 300ms ease;
}

.show-50 {
  animation: show 50ms ease;
}

.show-100 {
  animation: show 100ms ease;
}

.show-150 {
  animation: show 150ms ease;
}

.show-200 {
  animation: show 200ms ease;
}

.show-300 {
  animation: show 300ms ease;
}

.show-400 {
  animation: show 400ms ease;
}

.show-500 {
  animation: show 500ms ease;
}

.show-delay {
  animation: show 200ms ease 300ms forwards;
}

/* Hide animation */
.hide {
  animation: hide 150ms ease forwards;
}

.hide-100 {
  animation: hide 100ms ease forwards;
}

.expand {
  animation: expand 400ms ease;
}

.unexpand {
  animation: unexpand 400ms ease;
}

.expand-sidebar {
  animation: expand-sidebar 400ms ease;
}

.unexpand-sidebar {
  animation: unexpand-sidebar 400ms ease;
}

/* Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes show {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hide {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes expand {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes unexpand {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes expand-sidebar {
  0% {
    padding-right: initial;
  }

  100% {
    padding-right: 376px;
  }
}

@keyframes unexpand-sidebar {
  0% {
    padding-right: 376px;
  }

  100% {
    padding-right: 0;
  }
}

.gallery {
  height: 100%;
  display: layout(video-gallery);
  --aspectRatio: 1;
  /* 1/1 */
}

/* width */
::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.6rem;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: var(--color-grey-600);
  margin-right: -2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-grey-350);
  border-radius: 100vh;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

code:not(pre code) {
  color: #F2B414;
  background: var(--color-grey-600);
  border: 1px solid #876101;
  border-radius: 4px;
  padding: 0.03125rem 0.1875rem;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-family: Overpass Mono !important;
  font-size: 0.92em;
}

pre {
  white-space: pre-wrap;
  overflow-x: auto;
  background-color: var(--color-grey-600);
  border: 1px solid #30333F;
  border-radius: 4px;
  padding: 0.5em;
  margin: 0.5rem 0;
  line-height: 1.4;
  overflow: auto;
}

/* Handle mic animation */
.mic-animate {
  animation: mic-animate 1.3s infinite;
  transform-box: fill-box;
  transform-origin: bottom;
}

@keyframes mic-animate {
  0% {
    transform: translate(0px, -2px) scale(0.6, 0.08);
  }

  20% {
    transform: translate(0px, -2px) scale(0.6, 0.4);
  }

  40% {
    transform: translate(0px, -2px) scale(0.6, 0.08);
  }

  60% {
    transform: translate(0px, -2px) scale(0.6, 0.5);
  }

  80% {
    transform: translate(0px, -2px) scale(0.6, 0.99);
  }

  100% {
    transform: translate(0px, -2px) scale(0.6, 0.08);
  }
}

audio::-webkit-media-controls-play-button {}

audio::-webkit-media-controls-panel {
  background-color: white;
}

.blur-48 {
  backdrop-filter: blur(48px);
}

.blur-16 {
  backdrop-filter: blur(16px);
}

.blur-4 {
  backdrop-filter: blur(4px);
}

.wrap-anywhere {
  overflow-wrap: anywhere;
}

/* Input Checkbox */

input[type="checkbox"]+span {
  opacity: 0;
}

input[type="checkbox"]:checked+span {
  opacity: 1;
}

/* Input Radio */
input[type="radio"]:checked:before {
  content: "";
}

/* Input Range Slider */
input[type="range"] {
  -webkit-appearance: none;
  height: 0.313rem;
  background: #ffffff50;
  border-radius: 0.313rem;
  background-image: var(--color-primary-gradient);
  background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background: var(--color-blue-200);
  cursor: pointer;
  box-shadow: 0 0 0.125rem 0 #555;
  transition: background 0.3s ease-in-out;
}

input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: var(--color-primary-500) 0 0 0 0.125rem;
}

input[type=range][orient=vertical] {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 0.313rem;
  background: #ffffff50;
  border-radius: 0.313rem;
  background-image: var(--color-primary-gradient);
  background-repeat: no-repeat;
}

/* Switch Checkbox */

.switch {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.switch input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

.switch label {
  cursor: pointer;
  text-indent: -9999px;
  width: 3.375rem;
  height: 2rem;
  display: block;
  border-radius: 2rem;
  position: relative;
  background: #252b39;
  border: 1px solid #323a4c;
}

.switch label:after {
  content: "";
  position: absolute;
  top: 0.06rem;
  left: 0.125rem;
  width: 1.75rem;
  height: 1.75rem;
  opacity: 0.8;
  border-radius: 1.75rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0px 2px 4px rgba(24, 29, 40, 0.25);
  transition: 0.3s;
}

.switch input:checked+label {
  background: var(--color-primary-500);
  border: 1px solid var(--color-blue-200);
  border-radius: 1.75rem;
}

.switch input:checked+label:after {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

.switch label:active:after {
  width: 2rem;
}

.mention.mention-admin {
  background-color: var(--color-green-950);
  color: var(--color-green-300) !important;
}

.mention.mention-moderator {
  background-color: var(--color-fuschia-1000);
  color: var(--color-fuschia-500) !important;
}

.mention,
a[href^="mention"] {
  border-radius: 0.2rem !important;
  box-decoration-break: clone;
  padding: 0.05rem 0.25rem !important;
  padding-top: 0 !important;
  margin-left: 0.2rem !important;
  margin-right: 0.2rem !important;
  color: var(--color-primary-white) !important;
  background: var(--color-primary-200);
  text-decoration: none !important;
  cursor: pointer;
}

.mention:first-child,
a[href^="mention"]:first-child {
  margin-left: 0rem !important;
}

.mention:hover,
a[href^="mention"]:hover {
  opacity: 0.9;
}

.mention[data-scope="me"] {
  color: #e5adff !important;
  background: rgba(229, 173, 255, 0.2) !important;
}

.chat-message__text.mentions-pending .mention {
  filter: blur(.2rem);
}

.last-message {
  line-height: 1rem;
}

.last-message span.emoji {
  line-height: 1.4rem;
}

.last-message code {
  padding: 0 0.125rem;
  border: none;
}

qr-code::part(table) {
  border-radius: 16px;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
}

/* Flex Elements */

.first-to-shrink {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 0px;
  min-width: 0px;
}

.logo-loader {
  display: block;
  width: 40px;
  animation: jump 2.5s ease infinite;
}

@keyframes jump {
  0% {
    transform: scale(1, 0.95) translateY(0px);
  }

  3% {
    transform: scale(1) translateY(0px);
  }

  14% {
    transform: scale(1, 1.05) translateY(-30px);
  }

  26% {
    transform: scale(1) translateY(0px);
  }

  30% {
    transform: scale(1, 0.95) translateY(0px);
  }

  33% {
    transform: scale(1) translateY(0px);
  }

  44% {
    transform: scale(1, 1.05) translateY(-30px);
  }

  56% {
    transform: scale(1) translateY(0px);
  }

  60% {
    transform: scale(1, 0.95) translateY(0px);
  }

  63% {
    transform: scale(1) translateY(0px);
  }

  74% {
    transform: scale(1, 1.05) translateY(-30px);
  }

  86% {
    transform: scale(1, 0.95) translateY(0px);
  }

  100% {
    transform: scale(1, 0.95) translateY(0px);
  }
}

.sleeping-keet {
  display: block;
  width: 50px;
  margin-top: 40vh;
  animation: sleeping-keet-animation 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes sleeping-keet-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.90);
  }

  100% {
    transform: scale(1)
  }
}

.checkbox-primary {
  cursor: pointer;
}

.checkbox-primary input[type="checkbox"] {
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--color-blue-200);
  cursor: pointer;
}

.checkbox-primary input[type="checkbox"]:checked:before {
  content: "\2714";
  color: var(--color-blue-200);
}

.dashed-circle {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%2326D2E8FF' stroke-width='2' stroke-dasharray='6%2c6' stroke-dashoffset='59' stroke-linecap='square'/%3e%3c/svg%3e");
  border-radius: 100px;
}

.chat-control-list {
  container-type: inline-size;
  container-name: chat-control-list;
}

@container chat-control-list (width < 24rem) {
  .call-control {
    width: 3.5rem !important;
  }

  .call-control__user-input {
    width: 3.75rem !important;
  }
}

.call-control {
  position: relative;
  outline: none;
  border-radius: 0.5rem;
  width: 4rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;

  &:focus {
    outline: none;
  }
}

.call-control__user-input {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 4rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  color: white;
  background-color: var(--color-grey-600);
}

.chat-control__toggle-menu {
  outline: none;
  position: relative;
  background-color: var(--color-grey-700);
  height: 100%;
  width: 1.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
}

.call-control-icon {
  height: 1.5rem;
}

.call-settings__button {
  position: relative;
  outline: none;
  height: 2.875rem;
  width: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.75rem;
  padding: 1rem;

  &:focus {
    outline: none;
  }
}



@media (max-height: 864px) and (max-width: 864px) {
  .call-settings__button {
    height: 2.15rem;
    width: 3.75rem;

    .call-control-icon {
      height: 1.1rem;
    }
  }
}


.emoji-input::-webkit-scrollbar {
  display: none;
}

.emoji-input>div>.ProseMirror {
  padding: 0.5rem 1rem;
  min-height: 40px;
  display: flex;
}

.emoji-input>div>.ProseMirror>p {
  margin: 0;
}

html:not(.lg-on) .file-viewer-transfer-stats {
  display: none;
}


/* Spin Animation */

.spin-clockwise {
  animation: spin-clockwise 4s linear infinite;
}

.spin-counterclockwise {
  animation: spin-counterclockwise 4s linear infinite;
}

@keyframes spin-clockwise {
  0% {
    transform: rotate(var(--initial-rotation, 0deg));
  }

  100% {
    transform: rotate(calc(360deg + var(--initial-rotation, 0deg)));
  }
}

@keyframes spin-counterclockwise {
  0% {
    transform: rotate(var(--initial-rotation, 0deg));
  }

  100% {
    transform: rotate(calc(-360deg + var(--initial-rotation, 0deg)));
  }
}


/* Modal gradient borders */

.aqua-gradient-border {
  position: relative;
  border: 0;
}

.aqua-gradient-border:before {
  display: block;
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  right: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #00FFCF 0%, #4AA6FF 100%);
}