OpenHands/frontend/src/tailwind.css

@import "tailwindcss";

@plugin '../hero.ts';
@config "../tailwind.config.js";
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';

@plugin 'tailwind-scrollbar' {
  nocompatible: true;
  preferredstrategy: "pseudoelements";
}

/* OLD TAILWIND STYLES */
@theme {
  --color-primary: #c9b974;
  --color-logo: #cfb755;
  --color-base: #0d0f11;
  --color-base-secondary: #24272e;
  --color-danger: #e76a5e;
  --color-success: #a5e75e;
  --color-basic: #9099ac;
  --color-tertiary: #454545;
  --color-tertiary-light: #b7bdc2;
  --color-content: #ecedee;
  --color-content-2: #f9fbfe;
}

.button-base {
  @apply bg-tertiary border border-neutral-600 rounded-xs;
}

.skeleton {
  @apply bg-gray-400 rounded-md animate-pulse;
}

.skeleton-round {
  @apply bg-gray-400 rounded-full animate-pulse;
}

.heading {
  @apply text-[28px] leading-8 -tracking-[0.02em] font-bold text-content-2;
}

/* Custom Chat Input */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* Hide scrollbar by default */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

/* Show scrollbar on hover */
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgba(208, 217, 250, 0.3);
  opacity: 1;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(208, 217, 250, 0.5);
}

/* Firefox scrollbar styling */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-scrollbar:hover {
  scrollbar-color: rgba(208, 217, 250, 0.3) transparent;
}

/* Always visible scrollbar for chat interface */
.custom-scrollbar-always::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar-always::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar-always::-webkit-scrollbar-thumb {
  background: rgba(208, 217, 250, 0.3);
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-scrollbar-always::-webkit-scrollbar-thumb:hover {
  background: rgba(208, 217, 250, 0.5);
}

/* Firefox scrollbar styling for always visible */
.custom-scrollbar-always {
  scrollbar-width: thin;
  scrollbar-color: rgba(208, 217, 250, 0.3) transparent;
}

/* Custom styles for contenteditable */
.chat-input:empty:before {
  content: attr(data-placeholder);
  color: #a1a1a1;
  pointer-events: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.chat-input:focus {
  outline: none;
}

.chat-input {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  width: 100%;
  box-sizing: border-box;
}

/* Drag and drop styles */
.drag-over {
  backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

.drag-over-content-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 100;
  padding-top: 2rem;
}

.drag-over-ui-content {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #fff;
}

/* File preview styles */
.file-preview {
  background: rgba(208, 217, 250, 0.1);
  border: 1px solid rgba(208, 217, 250, 0.3);
  border-radius: 8px;
  padding: 8px;
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #d0d9fa;
}

.file-preview .file-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.file-preview .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview .file-size {
  color: #959cb2;
  font-size: 10px;
}

.file-preview .remove-file {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #d0d9fa;
  font-size: 10px;
  transition: background-color 0.2s;
}

.file-preview .remove-file:hover {
  background: rgba(255, 255, 255, 0.2);
}

.loader {
  background: #c9b974;
  animation: l5 1s infinite linear alternate;
}

@keyframes l5 {
  0% {
    box-shadow:
      20px 0 #c9b974,
      -20px 0 rgba(201, 185, 116, 0.1);
    background: #c9b974;
  }
  33% {
    box-shadow:
      20px 0 #c9b974,
      -20px 0 rgba(201, 185, 116, 0.1);
    background: rgba(201, 185, 116, 0.1);
  }
  66% {
    box-shadow:
      20px 0 rgba(201, 185, 116, 0.1),
      -20px 0 #c9b974;
    background: rgba(201, 185, 116, 0.1);
  }
  100% {
    box-shadow:
      20px 0 rgba(201, 185, 116, 0.1),
      -20px 0 #c9b974;
    background: #c9b974;
  }
}

/* Custom styling for xterm */
/* XTerm.js scrollbar styling - follows custom-scrollbar pattern */
.xterm-viewport::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.xterm-viewport::-webkit-scrollbar-track {
  background: transparent;
}

.xterm-viewport::-webkit-scrollbar-thumb {
  background: rgba(71, 74, 84, 0.5);
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.xterm-viewport:hover::-webkit-scrollbar-thumb {
  background: rgba(71, 74, 84, 0.7);
  opacity: 1;
}

.xterm-viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(90, 93, 103, 0.7);
}

/* Firefox scrollbar styling for xterm */
.xterm-viewport {
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 74, 84, 0.5) transparent;
  transition: scrollbar-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.xterm-viewport:hover {
  scrollbar-color: rgba(71, 74, 84, 0.7) transparent;
}

/* Force text wrapping and proper overflow handling for xterm */
.xterm {
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
  background: transparent !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

.xterm-viewport {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100%;
}

.xterm-screen {
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Ensure terminal text doesn't overflow horizontally */
.xterm .xterm-viewport {
  overflow-x: hidden !important;
  background: transparent !important;
}

.xterm .xterm-screen {
  max-width: 100%;
  word-break: break-all;
  background: transparent !important;
}

/* Ensure all xterm DOM elements have transparent backgrounds. Exclude canvas elements */
.xterm {
  background: transparent !important;
}

/* Ensure xterm respects container boundaries */
.xterm-viewport {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

.xterm-screen {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}

.context-menu-box-shadow {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

.git-external-link-icon {
  background: linear-gradient(90deg, rgba(69, 69, 69, 0) 0.35%, #454545 41.39%);
}

.api-configuration-modal {
  box-shadow: 0 183px 51px 0 rgba(0, 0, 0, 0.00), 0 117px 47px 0 rgba(0, 0, 0, 0.01), 0 66px 40px 0 rgba(0, 0, 0, 0.03), 0 29px 29px 0 rgba(0, 0, 0, 0.04), 0 7px 16px 0 rgba(0, 0, 0, 0.05);
}