mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-27 21:08:00 +00:00
Mega MindandGitHub
2993571eb0
* feat: add Conversations section with error handling and optimistic message removal * feat: add thread deletion functionality and update Conversations component for thread selection * feat: add unread message count and responsive layout to Conversations and MiniSidebar components * feat: implement suggested questions feature in Conversations component for new threads * feat: add scrollbar hiding utility and improve suggested questions layout in Conversations component
389 lines
9.0 KiB
CSS
389 lines
9.0 KiB
CSS
/* Import Google Fonts for trust and professionalism */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');
|
|
|
|
/* Tailwind CSS imports */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Base layer - Typography and fundamental styles */
|
|
@layer base {
|
|
/* Set default font and improve text rendering */
|
|
html {
|
|
font-family:
|
|
'Inter',
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
Roboto,
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
/* background-color: #000000; */
|
|
color: #ffffff;
|
|
}
|
|
|
|
body {
|
|
@apply text-white;
|
|
@apply font-sans;
|
|
line-height: 1.6;
|
|
|
|
background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
|
|
color: #ffffff;
|
|
z-index: -1;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
&::after {
|
|
content: '';
|
|
background-image: url('/bg-dark.png');
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-repeat: repeat;
|
|
background-position: top right;
|
|
background-size: 510px auto;
|
|
}
|
|
}
|
|
|
|
* {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Heading hierarchy for clear information architecture */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-display font-semibold;
|
|
@apply text-white;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-3xl lg:text-4xl;
|
|
}
|
|
h2 {
|
|
@apply text-2xl lg:text-3xl;
|
|
}
|
|
h3 {
|
|
@apply text-xl lg:text-2xl;
|
|
}
|
|
h4 {
|
|
@apply text-lg lg:text-xl;
|
|
}
|
|
|
|
/* Complete focus outline suppression - no borders, no rings, no outlines */
|
|
* {
|
|
outline: none !important;
|
|
-webkit-tap-highlight-color: transparent !important;
|
|
}
|
|
|
|
*:focus {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
border: inherit !important;
|
|
border-color: inherit !important;
|
|
}
|
|
|
|
/* Specific overrides for common elements that might show blue outlines */
|
|
button:focus,
|
|
a:focus,
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus,
|
|
[role='button']:focus,
|
|
[tabindex]:focus {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
border-color: inherit !important;
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
/* Component layer - Reusable patterns */
|
|
@layer components {
|
|
/* Button variants for consistent interaction design */
|
|
.btn-primary {
|
|
@apply bg-primary-600 hover:bg-primary-500 active:bg-primary-700;
|
|
@apply text-white font-medium;
|
|
@apply px-4 py-2 rounded-lg;
|
|
@apply transition-all duration-200 ease-in-out;
|
|
@apply shadow-soft hover:shadow-medium;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-black;
|
|
@apply disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-stone-800 hover:bg-stone-700 active:bg-stone-600;
|
|
@apply text-white font-medium;
|
|
@apply px-4 py-2 rounded-lg border border-stone-600;
|
|
@apply transition-all duration-200 ease-in-out;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-black;
|
|
}
|
|
|
|
.btn-success {
|
|
@apply bg-sage-500 hover:bg-sage-600 active:bg-sage-700;
|
|
@apply text-white font-medium;
|
|
@apply px-4 py-2 rounded-lg;
|
|
@apply transition-all duration-200 ease-in-out;
|
|
@apply shadow-soft hover:shadow-medium;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-sage-500 focus:ring-offset-2 focus:ring-offset-black;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-coral-500 hover:bg-coral-600 active:bg-coral-700;
|
|
@apply text-white font-medium;
|
|
@apply px-4 py-2 rounded-lg;
|
|
@apply transition-all duration-200 ease-in-out;
|
|
@apply shadow-soft hover:shadow-medium;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-coral-500 focus:ring-offset-2 focus:ring-offset-black;
|
|
}
|
|
|
|
/* Card components for content organization */
|
|
.card {
|
|
@apply bg-black rounded-xl shadow-soft border border-stone-700;
|
|
@apply p-6 text-white;
|
|
@apply transition-shadow duration-200;
|
|
}
|
|
|
|
.card-hover {
|
|
@apply card hover:shadow-medium;
|
|
}
|
|
|
|
/* Input components with consistent styling */
|
|
.input-primary {
|
|
@apply w-full px-4 py-3 rounded-lg;
|
|
@apply border border-stone-600 focus:border-primary-500;
|
|
@apply bg-black text-white placeholder-stone-400;
|
|
@apply transition-colors duration-200;
|
|
@apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none;
|
|
}
|
|
|
|
/* Status indicators */
|
|
.status-online {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
@apply bg-sage-800 text-white;
|
|
}
|
|
|
|
.status-offline {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
@apply bg-stone-800 text-white;
|
|
}
|
|
|
|
.status-warning {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
@apply bg-amber-800 text-white;
|
|
}
|
|
|
|
/* Navigation styles */
|
|
.nav-item {
|
|
@apply flex items-center px-4 py-2 text-sm font-medium rounded-lg;
|
|
@apply text-white hover:text-white hover:bg-canvas-100;
|
|
@apply transition-colors duration-150;
|
|
}
|
|
|
|
.nav-item-active {
|
|
@apply nav-item bg-primary-600 text-white;
|
|
}
|
|
|
|
/* Message/chat specific styles */
|
|
.message-bubble {
|
|
@apply max-w-xs lg:max-w-md px-4 py-2 rounded-2xl;
|
|
@apply break-words;
|
|
}
|
|
|
|
.message-sent {
|
|
@apply message-bubble bg-primary-500 text-white ml-auto;
|
|
}
|
|
|
|
.message-received {
|
|
@apply message-bubble bg-stone-800 text-white;
|
|
}
|
|
|
|
/* Loading states */
|
|
.loading-pulse {
|
|
@apply animate-pulse bg-stone-800 rounded;
|
|
}
|
|
|
|
/* Crypto price styling */
|
|
.price-positive {
|
|
@apply text-market-bullish font-mono font-medium;
|
|
}
|
|
|
|
.price-negative {
|
|
@apply text-market-bearish font-mono font-medium;
|
|
}
|
|
|
|
.price-neutral {
|
|
@apply text-market-neutral font-mono font-medium;
|
|
}
|
|
}
|
|
|
|
/* Utility layer - Custom utilities */
|
|
@layer utilities {
|
|
/* Scrollbar styling for better UX */
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgb(163 163 163) transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: rgb(163 163 163);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgb(115 115 115);
|
|
}
|
|
|
|
/* Hide scrollbar while keeping scroll behavior */
|
|
.scrollbar-hide {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Text selection styling */
|
|
.select-primary::selection {
|
|
@apply bg-primary-600 text-white;
|
|
}
|
|
|
|
/* Enhanced glass effect for better visibility */
|
|
.glass {
|
|
backdrop-filter: blur(1px);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
/* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); */
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Animation utilities */
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.5s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Modal animations */
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.2s ease-out forwards;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Safe area padding for mobile devices */
|
|
.safe-area-padding {
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
/* Skills table container */
|
|
.skills-table-container {
|
|
position: relative;
|
|
max-height: calc(3 * 2.5rem + 2.5rem + 1px); /* Header + 3 rows + border */
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.skills-table-scroll {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: calc(3 * 2.5rem + 2.5rem + 1px);
|
|
}
|
|
|
|
.skills-table-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(1px);
|
|
}
|
|
|
|
/* Gradient fade overlay at bottom */
|
|
.skills-table-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50px;
|
|
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15));
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Hover overlay */
|
|
.skills-table-overlay {
|
|
z-index: 20;
|
|
}
|
|
|
|
.skills-table-container:hover .skills-table-overlay {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
/* Dark mode support (always enabled) */
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|