701 lines
16 KiB
CSS
701 lines
16 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
--font-size: 16px;
|
|
--background: 35 8% 96%;
|
|
--foreground: 0 0% 10%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 10%;
|
|
--primary: 158 24% 24%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 150 7% 57%;
|
|
--secondary-foreground: 0 0% 100%;
|
|
--muted: 35 8% 90%;
|
|
--muted-foreground: 0 0% 42%;
|
|
--accent: 43 62% 49%;
|
|
--accent-foreground: 0 0% 10%;
|
|
--destructive: 0 84% 50%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 35 8% 82%;
|
|
--input: transparent;
|
|
--input-background: 0 0% 100%;
|
|
--switch-background: 35 8% 82%;
|
|
--font-weight-medium: 500;
|
|
--font-weight-normal: 400;
|
|
--ring: 158 24% 24%;
|
|
--chart-1: 158 24% 24%;
|
|
--chart-2: 150 7% 57%;
|
|
--chart-3: 43 62% 49%;
|
|
--chart-4: 0 84% 50%;
|
|
--chart-5: 0 0% 42%;
|
|
--radius: 0.625rem;
|
|
--sidebar: 0 0% 10%;
|
|
--sidebar-foreground: 0 0% 100%;
|
|
--sidebar-primary: 158 24% 24%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 158 24% 24%;
|
|
--sidebar-accent-foreground: 0 0% 100%;
|
|
--sidebar-border: 0 0% 20%;
|
|
--sidebar-ring: 158 24% 24%;
|
|
--re-green: #2d4a3e;
|
|
--re-gold: #c9b037;
|
|
--re-dark: #1a1a1a;
|
|
--re-light-green: #8a9b8e;
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.145 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.145 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.985 0 0);
|
|
--primary-foreground: oklch(0.205 0 0);
|
|
--secondary: oklch(0.269 0 0);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.269 0 0);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.396 0.141 25.723);
|
|
--destructive-foreground: oklch(0.637 0.237 25.331);
|
|
--border: oklch(0.269 0 0);
|
|
--input: oklch(0.269 0 0);
|
|
--ring: oklch(0.439 0 0);
|
|
--font-weight-medium: 500;
|
|
--font-weight-normal: 400;
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(0.269 0 0);
|
|
--sidebar-ring: oklch(0.439 0 0);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-input-background: var(--input-background);
|
|
--color-switch-background: var(--switch-background);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-re-green: var(--re-green);
|
|
--color-re-gold: var(--re-gold);
|
|
--color-re-dark: var(--re-dark);
|
|
--color-re-light-green: var(--re-light-green);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
/* CSS Reset for better text alignment */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Ensure proper text alignment inheritance */
|
|
p, div, span, h1, h2, h3, h4, h5, h6 {
|
|
text-align: inherit;
|
|
}
|
|
|
|
/* Fix for text wrapping in all elements */
|
|
* {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Better text rendering */
|
|
body {
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
|
|
*/
|
|
@layer base {
|
|
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
|
|
h1 {
|
|
font-size: 1.875rem;
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.4;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.4;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1rem;
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.875rem;
|
|
font-weight: var(--font-weight-normal);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
label {
|
|
font-size: 0.875rem;
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
button {
|
|
font-size: 0.875rem;
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
input {
|
|
font-size: 0.875rem;
|
|
font-weight: var(--font-weight-normal);
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Utility classes for better spacing and layout */
|
|
@layer components {
|
|
/* Input focus styles for navbar */
|
|
input[type="text"]:focus,
|
|
input[type="search"]:focus,
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Ensure gray borders render properly */
|
|
.border-gray-300 {
|
|
border-color: #d1d5db !important;
|
|
}
|
|
|
|
.border-gray-400 {
|
|
border-color: #9ca3af !important;
|
|
border-width: 1px !important;
|
|
border-style: solid !important;
|
|
}
|
|
|
|
.border-gray-500 {
|
|
border-color: #6b7280 !important;
|
|
}
|
|
|
|
.border-gray-200 {
|
|
border-color: #e5e7eb !important;
|
|
}
|
|
|
|
.hover\:border-gray-400:hover {
|
|
border-color: #9ca3af !important;
|
|
}
|
|
|
|
.hover\:border-gray-500:hover {
|
|
border-color: #6b7280 !important;
|
|
}
|
|
|
|
/* Ensure all inputs have visible borders by default */
|
|
input[data-slot="input"],
|
|
textarea[data-slot="textarea"],
|
|
[data-slot="select-trigger"] {
|
|
border-width: 1px !important;
|
|
border-style: solid !important;
|
|
}
|
|
|
|
/* Focus states for inputs - Override all blue focus colors with light green */
|
|
input:focus-visible,
|
|
input[type="text"]:focus-visible,
|
|
input[type="number"]:focus-visible,
|
|
input[type="email"]:focus-visible,
|
|
input[type="search"]:focus-visible,
|
|
input[type="password"]:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible,
|
|
[data-slot="input"]:focus-visible,
|
|
[data-slot="textarea"]:focus-visible,
|
|
[data-slot="select-trigger"]:focus-visible,
|
|
input:focus,
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="search"]:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--re-light-green) !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
--tw-ring-width: 0 !important;
|
|
--tw-ring-offset-width: 0 !important;
|
|
}
|
|
|
|
/* Override any blue focus classes */
|
|
.focus\:border-blue-400:focus,
|
|
.focus\:border-blue-500:focus,
|
|
.focus\:ring-blue-200:focus,
|
|
.focus\:ring-blue-500:focus {
|
|
border-color: var(--re-light-green) !important;
|
|
--tw-ring-color: var(--re-light-green) !important;
|
|
}
|
|
|
|
.focus\:border-re-green:focus {
|
|
border-color: var(--re-green) !important;
|
|
}
|
|
|
|
.focus\:ring-re-green:focus {
|
|
--tw-ring-color: var(--re-green) !important;
|
|
}
|
|
|
|
.focus-visible\:border-re-light-green:focus-visible {
|
|
border-color: var(--re-light-green) !important;
|
|
}
|
|
|
|
.focus-visible\:ring-re-light-green\/30:focus-visible {
|
|
--tw-ring-width: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.focus\:ring-1:focus {
|
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
}
|
|
|
|
/* Ensure gray text colors render properly */
|
|
.text-gray-400 {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
.text-gray-600 {
|
|
color: #4b5563 !important;
|
|
}
|
|
|
|
/* Navbar specific styling */
|
|
header.bg-white {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
/* Card border colors */
|
|
.border-gray-200 {
|
|
border-color: #e5e7eb !important;
|
|
}
|
|
|
|
/* Ensure cards with gray borders render properly */
|
|
[class*="border-gray"] {
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.min-w-0 {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Line clamp utilities for text truncation */
|
|
.line-clamp-1 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
}
|
|
|
|
.line-clamp-2 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
/* Text alignment and wrapping utilities */
|
|
.text-wrap-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.text-wrap-pretty {
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* Better text alignment for conversation bubbles */
|
|
.conversation-text {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
text-align: left;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Fix for text alignment in flex containers */
|
|
.flex-text-align {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Ensure proper text flow in message bubbles */
|
|
.message-content {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
text-align: left;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Fix for avatar alignment */
|
|
.avatar-container {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Message bubble container */
|
|
.message-bubble {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Fix for text indentation issues */
|
|
.text-indent-reset {
|
|
text-indent: 0;
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Additional utilities for better text alignment */
|
|
.text-align-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.text-align-justify {
|
|
text-align: justify;
|
|
}
|
|
|
|
/* Fix for text wrapping in containers */
|
|
.text-wrap-normal {
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Better line height for readability */
|
|
.leading-relaxed {
|
|
line-height: 1.625;
|
|
}
|
|
|
|
.leading-loose {
|
|
line-height: 2;
|
|
}
|
|
|
|
/* Fix for flex item alignment */
|
|
.flex-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.flex-center {
|
|
align-items: center;
|
|
}
|
|
|
|
/* Message bubble specific styles */
|
|
.message-bubble-content {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Fix for text alignment in nested elements */
|
|
.text-content {
|
|
text-align: left;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Ensure CSS custom properties work with Tailwind */
|
|
.text-re-green {
|
|
color: var(--re-green);
|
|
}
|
|
|
|
.group:hover .group-hover\:text-re-green {
|
|
color: var(--re-green);
|
|
}
|
|
|
|
/* Fix for gradient backgrounds */
|
|
.bg-gradient-to-br {
|
|
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
|
|
}
|
|
|
|
/* Ensure proper CSS loading */
|
|
.space-y-6 > * + * {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.space-y-4 > * + * {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Fix for flex utilities */
|
|
.flex-1 {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
.min-w-0 {
|
|
min-width: 0px;
|
|
}
|
|
|
|
/* Ensure proper text wrapping */
|
|
.break-words {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Sidebar and layout fixes */
|
|
.sidebar-fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
z-index: 50;
|
|
}
|
|
|
|
.main-content-with-sidebar {
|
|
margin-left: 16rem; /* 256px - matches w-64 */
|
|
}
|
|
|
|
/* Ensure proper flex behavior */
|
|
.flex-shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.min-w-0 {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Fix for sidebar trigger positioning */
|
|
.sidebar-trigger {
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Ensure search bar doesn't overlap */
|
|
.search-container {
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* Mobile sidebar fixes */
|
|
@media (max-width: 768px) {
|
|
.sidebar-mobile {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 16rem;
|
|
height: 100vh;
|
|
z-index: 50;
|
|
transition: left 0.3s ease;
|
|
}
|
|
|
|
.sidebar-mobile.open {
|
|
left: 0;
|
|
}
|
|
|
|
.main-content-mobile {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* Ensure proper sidebar behavior */
|
|
.sidebar-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 40;
|
|
}
|
|
|
|
/* Sidebar toggle animations */
|
|
.sidebar-container {
|
|
transition: width 0.3s ease-in-out;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar-content {
|
|
width: 16rem; /* 256px */
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.main-content-full {
|
|
width: 100%;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.main-content-with-sidebar {
|
|
width: calc(100% - 16rem);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Ensure smooth transitions */
|
|
.transition-all {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
/* Fix for search bar positioning */
|
|
.search-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Ensure proper flex behavior */
|
|
.flex-1 {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
.min-w-0 {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Fix for destructive button variant */
|
|
.bg-destructive {
|
|
background-color: #dc2626 !important; /* red-600 */
|
|
}
|
|
|
|
.hover\:bg-destructive\/90:hover {
|
|
background-color: rgb(220 38 38 / 0.9) !important;
|
|
}
|
|
|
|
/* Ensure border colors work properly */
|
|
.border-gray-200 {
|
|
border-color: rgb(229 231 235) !important;
|
|
}
|
|
|
|
.border-gray-300 {
|
|
border-color: rgb(209 213 219) !important;
|
|
}
|
|
|
|
.hover\:border-gray-400:hover {
|
|
border-color: rgb(156 163 175) !important;
|
|
}
|
|
|
|
/* Fix for card backgrounds */
|
|
.bg-white {
|
|
background-color: rgb(255 255 255) !important;
|
|
}
|
|
|
|
/* Ensure dialog backgrounds are white */
|
|
[data-slot="dialog-content"] {
|
|
background-color: rgb(255 255 255) !important;
|
|
}
|
|
|
|
/* Custom scrollbar for better UX */
|
|
.overflow-y-auto::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb {
|
|
background: rgb(203 213 225);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(148 163 184);
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
.overflow-y-auto {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgb(203 213 225) transparent;
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-size: var(--font-size);
|
|
}
|