Spaces:
Sleeping
Sleeping
File size: 4,404 Bytes
31add3b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
/* public/style.css */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: var(--chainlit-background-color); /* Use Chainlit's theme variable */
color: var(--chainlit-text-color); /* Use Chainlit's theme variable */
}
/* Main chat container - you might need to inspect Chainlit's generated HTML for exact selectors */
/* This is a guess, adjust based on actual rendered HTML */
#root .MuiBox-root { /* Common root element, might need more specificity */
/* background-color: #262626; /* Example: Slightly off-black if not using theme variable */
}
/* Chat input area */
/* Targeting Chainlit's specific input structure. Inspect your app for exact classes if this doesn't work. */
div[data-testid="chat-input-textarea"] {
background-color: #333333 !important;
border-radius: 12px !important;
padding: 8px 12px !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
border: 1px solid #444 !important;
}
textarea[data-testid="chat-input"] {
background-color: transparent !important;
color: #E0E0E0 !important;
font-size: 1rem !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* Send button */
button[aria-label="Send message"], button[data-testid="send-button"] {
background-color: #5E5CE6 !important;
color: white !important;
border-radius: 8px !important;
transition: background-color 0.2s ease-in-out;
}
button[aria-label="Send message"]:hover, button[data-testid="send-button"]:hover {
background-color: #4D4AA7 !important;
}
button[aria-label="Stop task"] {
background-color: #FF3B30 !important;
color: white !important;
border-radius: 8px !important;
}
/* Message Bubbles */
/* These selectors target common Chainlit structures. Adjust if your version differs. */
/* User Message */
div[data-testid^="message-user"] > div > div {
background-color: #5E5CE6 !important;
color: white !important;
border-radius: 18px !important;
border-bottom-right-radius: 5px !important;
/* Add other properties like padding, margin if needed from the .user-message-class example */
}
/* Assistant Message */
div[data-testid^="message-assistant"] > div > div {
background-color: #3A3A3C !important;
color: #E0E0E0 !important;
border-radius: 18px !important;
border-bottom-left-radius: 5px !important;
/* Add other properties like padding, margin if needed from the .assistant-message-class example */
}
/* Settings Panel - try to keep it consistent */
/* You'll need to inspect elements if settings panel needs specific overrides */
/* .settings-modal-class { ... } */
/* Action Buttons (e.g., Export buttons, those in settings panel) */
button.MuiButtonBase-root[id^="action-button-"] {
background-color: #4CAF50 !important;
color: white !important;
border-radius: 8px !important;
padding: 6px 12px !important;
text-transform: none !important;
font-weight: 500 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
transition: background-color 0.2s ease-in-out;
margin: 5px !important;
}
button.MuiButtonBase-root[id^="action-button-"]:hover {
background-color: #409644 !important;
}
/* Style for the gear icon (settings button) to make it more prominent if desired */
/* button[aria-label=\"Settings\"] { */
/* color: #5E5CE6 !important; */
/* } */
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #2c2c2e;
}
::-webkit-scrollbar-thumb {
background: #555;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #666;
}
/* Code block styling */
pre, code {
background-color: #2C2C2E !important;
color: #E0E0E0 !important;
border-radius: 6px;
font-family: 'Fira Code', 'Courier New', Courier, monospace;
}
pre {
padding: 1em;
overflow-x: auto;
border: 1px solid #444;
}
pre > code {
padding: 0;
background-color: transparent !important;
border: none;
}
/* Mermaid diagram styling */
.mermaid {
background-color: #1E1E1E;
padding: 20px;
border-radius: 8px;
border: 1px solid #484848;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
} |