pm-template/openwebui/custom.css

/* Reltio AgentFlow Theme for Open WebUI */
/* Mount: ./openwebui/custom.css:/app/build/static/custom.css:ro */

/* Import Roboto Flex */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap');

:root {
  /* Reltio dark theme tokens */
  --reltio-primary: #66f;
  --reltio-primary-hover: #6666ff;
  --reltio-accent: #0af;
  --reltio-secondary: #9143ef;
  --reltio-bg: #000000;
  --reltio-bg-secondary: #303050;
  --reltio-bg-tertiary: #0e0e25e6;
  --reltio-surface: #0e0e25;
  --reltio-surface-high: #262640;
  --reltio-surface-dialog: #434370;
  --reltio-border: #262640;
  --reltio-border-secondary: #505079;
  --reltio-outline: #434370;
  --reltio-text: #e3e3f2;
  --reltio-text-secondary: #7070a9;
  --reltio-text-tertiary: #babade;
  --reltio-text-support: #8d8dc8;
  --reltio-scrim: #0e0e25b2;
  --reltio-selected: #b2b2ff4d;
  --reltio-gradient: linear-gradient(170deg, #0af 18.96%, #00c 81.29%);
  --reltio-gradient-1: linear-gradient(172deg, #0af 50%, #00c 100%);

  /* Remap Tailwind gray palette → Reltio purple-navy scale */
  --color-gray-50: #e3e3f2 !important;
  --color-gray-100: #babade !important;
  --color-gray-200: #8d8dc8 !important;
  --color-gray-300: #7070a9 !important;
  --color-gray-400: #56568f !important;
  --color-gray-500: #434370 !important;
  --color-gray-600: #303050 !important;
  --color-gray-700: #262640 !important;
  --color-gray-800: #0e0e25 !important;
  --color-gray-850: #0a0a1e !important;
  --color-gray-900: #060614 !important;
  --color-gray-950: #000000 !important;
  --color-black: #000000 !important;
  --color-white: #e3e3f2 !important;
}

/* Font */
body {
  font-family: 'Roboto Flex', sans-serif !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* App background */
body, .app, main, #app {
  background-color: var(--reltio-bg) !important;
  color: var(--reltio-text) !important;
}

/* Wave background — matches Reltio Wave_root positioning */
body::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/static/darkWave2.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1),
              filter var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wave overlay for dimming (like data-wave-overlay) */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(14, 14, 37, 0.9);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blur wave when conversation is active (matches .layout_root:has([data-conversation=true])) */
body:has(.messages-container)::before,
body:has([data-message-role])::before,
body:has(.chat-messages)::before {
  opacity: 0.4;
  filter: blur(40px);
}

/* Transparent layers so wave shows through */
.max-w-full, [data-chat], main, .app {
  background-color: transparent !important;
}

/* Override hardcoded dark mode backgrounds from Tailwind bundle */
.dark\:bg-\[\#020C1D\]:is(.dark *) {
  background-color: var(--reltio-surface) !important;
}
.dark\:bg-\[\#202123\]:is(.dark *) {
  background-color: var(--reltio-surface-high) !important;
}

/* Dark mode scrollbar override */
.dark ::-webkit-scrollbar-thumb {
  border-color: var(--reltio-surface) !important;
  background-color: var(--reltio-border) !important;
}

/* Sidebar — frosted glass */
#sidebar, [data-sidebar], .sidebar {
  background-color: var(--reltio-bg-tertiary) !important;
  border-right: 1px solid var(--reltio-border) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

#sidebar button:hover,
#sidebar a:hover,
.sidebar button:hover {
  background-color: var(--reltio-selected) !important;
}

/* User messages */
.user-message, [data-message-role="user"] .message-content {
  background-color: var(--reltio-surface-high) !important;
  border-radius: 12px !important;
  color: var(--reltio-text) !important;
}

/* AI messages */
.assistant-message, [data-message-role="assistant"] .message-content {
  color: var(--reltio-text-tertiary) !important;
}

/* Input area */
textarea, .chat-input, [contenteditable] {
  background-color: var(--reltio-surface) !important;
  border: 1px solid var(--reltio-outline) !important;
  border-radius: 12px !important;
  color: var(--reltio-text) !important;
}

textarea:focus, [contenteditable]:focus {
  border-color: var(--reltio-primary) !important;
  box-shadow: 0 0 0 2px rgba(102, 102, 255, 0.2) !important;
  outline: none !important;
}

/* Send button — gradient */
#send-message-button,
button[type="submit"] {
  background: var(--reltio-gradient) !important;
  color: #fff !important;
  border-radius: 10px !important;
  border: none !important;
}

#send-message-button:hover,
button[type="submit"]:hover {
  background: var(--reltio-gradient-1) !important;
}

/* Primary action buttons */
.bg-black, .dark\:bg-white {
  background: var(--reltio-gradient) !important;
  color: #fff !important;
}

.bg-black:hover, .dark\:bg-white:hover {
  background: var(--reltio-gradient-1) !important;
}

/* Suggestion chips */
button.flex.items-center,
.suggestion-chip,
[data-suggestion] {
  background-color: var(--reltio-surface) !important;
  border: 1px solid var(--reltio-outline) !important;
  border-radius: 10px !important;
  color: var(--reltio-text-secondary) !important;
  transition: border-color 0.225s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.225s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button.flex.items-center:hover,
.suggestion-chip:hover,
[data-suggestion]:hover {
  border-color: var(--reltio-primary) !important;
  color: var(--reltio-text) !important;
  background-color: var(--reltio-selected) !important;
}

/* Toggle switches */
[role="switch"][aria-checked="true"] {
  background-color: var(--reltio-primary) !important;
}

/* Links */
a {
  color: var(--reltio-accent) !important;
}
a:hover {
  color: var(--reltio-primary) !important;
}

/* Code blocks */
pre, code {
  background-color: var(--reltio-surface) !important;
  border: 1px solid var(--reltio-border) !important;
  border-radius: 8px !important;
}

/* Tooltips */
.tippy-content, .tippy-box {
  background-color: var(--reltio-surface-dialog) !important;
  border-color: var(--reltio-outline) !important;
  color: var(--reltio-text) !important;
}

/* Dropdowns / menus */
[role="menu"], [role="listbox"], .dropdown {
  background-color: var(--reltio-surface) !important;
  border: 1px solid var(--reltio-border) !important;
  border-radius: 8px !important;
}

/* Modal / dialog — frosted glass like Reltio */
[role="dialog"] {
  background-color: var(--reltio-surface) !important;
  border: 1px solid var(--reltio-border) !important;
}

/* Dialog backdrop */
.modal-backdrop, [data-dialog-backdrop] {
  background-color: rgba(14, 14, 37, 0.7) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}

/* Voice mode button */
[aria-label="Voice mode"] {
  background: var(--reltio-gradient) !important;
}

/* Table styling */
th {
  background-color: var(--reltio-surface-dialog) !important;
}
tr:hover {
  background-color: var(--reltio-surface-high) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--reltio-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--reltio-text-secondary);
}

/* Selection highlight */
::selection {
  background-color: var(--reltio-selected) !important;
}