Hugging Face's logo

Spaces:
LogitCode
/
FlexChat-Gold
Running

App Files Community
LogitCode commited on
Commit
3ade492
·
verified ·
1 Parent(s): be6179a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +59 -44
index.html CHANGED
@@ -104,39 +104,67 @@ tailwind.config = {
104
  --pre-bg: #ede4cc;
105
  }
106
 
107
- body:not(.light) #sidebar::before {
108
- content: '';
109
- position: absolute;
110
- top: 0; left: 0; right: 0;
111
- height: 1px;
112
- background: linear-gradient(90deg, transparent, var(--accent), transparent);
113
- opacity: 0.5;
114
- }
115
- /*#sidebar { position: relative; }*/
116
-
117
- .font-display { font-family: 'Syne', sans-serif !important; }
118
-
119
- .prose-msg { line-height: 1.7; color: var(--prose); }
120
- .prose-msg p { margin: 0 0 0.6em; } .prose-msg p:last-child { margin-bottom: 0; }
121
- .prose-msg code { font-family: 'Intel One Mono', 'Fira Code', monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.875em; color: var(--code-col); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
122
- .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 0.6em 0; }
123
- .prose-msg pre code { background: transparent; border: none; padding: 0; color: var(--prose); font-size: 0.82em; }
124
- .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Syne', sans-serif; color: var(--cream); margin: 0.8em 0 0.3em; font-weight: 700; }
125
- .prose-msg h1 { font-size: 1.25em; } .prose-msg h2 { font-size: 1.1em; } .prose-msg h3 { font-size: 1em; }
126
- .prose-msg ul, .prose-msg ol { padding-left: 1.25em; margin: 0.4em 0 0.6em; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
127
  .prose-msg li::marker { color: var(--accent); }
128
- .prose-msg li { margin: 0.2em 0; }
129
- .prose-msg blockquote { border-left: 2px solid var(--accent); padding-left: 0.75em; color: var(--ghost); margin: 0.5em 0; font-style: italic; }
130
  .prose-msg a { color: var(--accent); text-decoration: underline; }
131
- .prose-msg strong { color: var(--cream); font-weight: 500; }
132
- .prose-msg table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 0.85em; }
133
- .prose-msg th { background: var(--mist); color: var(--cream); padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--accent); }
134
- .prose-msg td { border-top: 1px solid var(--border); padding: 5px 8px; }
135
-
136
- .prose-user { line-height: 1.65; color: var(--user-text); }
 
 
137
  .prose-user p { margin: 0 0 0.5em; } .prose-user p:last-child { margin-bottom: 0; }
138
- .prose-user code { background: rgba(255,255,255,0.1); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.875em; }
139
- .prose-user strong { font-weight: 500; }
 
 
 
 
 
 
140
 
141
  textarea { resize: none; overflow: hidden; }
142
  #sidebar { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@@ -145,20 +173,7 @@ tailwind.config = {
145
  .dot-2 { animation: blink 1.2s 0.2s infinite; }
146
  .dot-3 { animation: blink 1.2s 0.4s infinite; }
147
  select { -webkit-appearance: none; appearance: none; }
148
- textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); }
149
-
150
- /* Tool panel styles */
151
- #tool-panel, #file-explorer-panel { transition: all 0.3s ease; }
152
- .tool-item { transition: all 0.2s ease; }
153
- .tool-item:hover { transform: translateX(4px); }
154
- .tool-item.active { background: var(--accent); color: var(--ink); }
155
-
156
- /* File Explorer Styles */
157
- .file-tree-item { transition: all 0.15s ease; }
158
- .file-tree-item:hover { background: var(--mist); }
159
- .file-tree-item.active { background: var(--accent) !important; color: var(--ink); }
160
- .file-tree-children { border-left: 1px solid var(--border); margin-left: 11px; padding-left: 8px; }
161
- .file-explorer-editor { animation: slideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
162
 
163
  /* CRITICAL MOBILE FIX - Main container */
164
  @media (max-width: 768px) {
 
104
  --pre-bg: #ede4cc;
105
  }
106
 
107
+ body { background: var(--bg); color: var(--pearl); }
108
+ #sidebar { background: var(--surface); border-color: var(--border); }
109
+ header { background: var(--surface); border-color: var(--border); }
110
+ .bg-smoke { background: var(--surface) !important; }
111
+ .bg-ash { background: var(--mist) !important; }
112
+ .bg-mist { background: var(--mist) !important; }
113
+ .hover\:bg-ash:hover { background: var(--border) !important; }
114
+ .hover\:bg-mist:hover { background: var(--mist) !important; }
115
+ .border-ash { border-color: var(--border) !important; }
116
+ .border-mist { border-color: var(--mist) !important; }
117
+ .text-fog { color: var(--fog) !important; }
118
+ .text-ghost { color: var(--ghost) !important; }
119
+ .text-pearl { color: var(--pearl) !important; }
120
+ .text-cream { color: var(--cream) !important; }
121
+ .text-amber { color: var(--accent) !important; }
122
+ .text-ink { color: var(--user-text) !important; }
123
+ .text-rose { color: var(--danger) !important; }
124
+ .text-sage { color: var(--safe) !important; }
125
+ .bg-amber { background: var(--user-bg) !important; }
126
+ .hover\:bg-ember:hover { background: var(--accent2) !important; }
127
+ .bg-amber\/10 { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
128
+ .bg-amber\/20 { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; }
129
+ .border-amber\/25 { border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important; }
130
+ .from-amber { --tw-gradient-from: var(--accent) !important; }
131
+ .to-ember { --tw-gradient-to: var(--accent2) !important; }
132
+ .bg-rose { background: var(--danger) !important; }
133
+ .hover\:text-rose:hover { color: var(--danger) !important; }
134
+ .hover\:text-sage:hover { color: var(--safe) !important; }
135
+ .hover\:text-pearl:hover { color: var(--pearl) !important; }
136
+ textarea, input, select { background: var(--mist); color: var(--cream); }
137
+
138
+ /* Serif body text for assistant prose */
139
+ .prose-msg { line-height: 1.75; color: var(--prose); font-family: 'Crimson Pro', serif; font-size: 1.05em; }
140
+ .prose-msg p { margin: 0 0 0.7em; } .prose-msg p:last-child { margin-bottom: 0; }
141
+ .prose-msg code { font-family: 'Courier Prime', monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.82em; color: var(--code-col); }
142
+ .prose-msg pre { background: var(--pre-bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; overflow-x: auto; margin: 0.7em 0; font-family: 'Courier Prime', monospace; }
143
+ .prose-msg pre code { background: transparent; padding: 0; color: var(--prose); font-size: 0.85em; }
144
+ .prose-msg h1,.prose-msg h2,.prose-msg h3 { font-family: 'Crimson Pro', serif; color: var(--cream); margin: 0.9em 0 0.3em; font-weight: 600; font-style: italic; }
145
+ .prose-msg h1 { font-size: 1.4em; } .prose-msg h2 { font-size: 1.2em; } .prose-msg h3 { font-size: 1.05em; }
146
+ .prose-msg ul, .prose-msg ol { padding-left: 1.4em; margin: 0.4em 0 0.7em; }
147
  .prose-msg li::marker { color: var(--accent); }
148
+ .prose-msg li { margin: 0.25em 0; }
149
+ .prose-msg blockquote { border-left: 3px solid var(--accent); padding-left: 1em; color: var(--ghost); margin: 0.6em 0; font-style: italic; }
150
  .prose-msg a { color: var(--accent); text-decoration: underline; }
151
+ .prose-msg strong { color: var(--cream); font-weight: 600; }
152
+ .prose-msg em { font-style: italic; color: var(--ghost); }
153
+ .prose-msg table { border-collapse: collapse; width: 100%; margin: 0.6em 0; font-size: 0.9em; }
154
+ .prose-msg th { background: var(--mist); color: var(--cream); padding: 6px 10px; text-align: left; border-bottom: 2px solid var(--accent); }
155
+ .prose-msg td { border-top: 1px solid var(--border); padding: 6px 10px; }
156
+
157
+ /* User bubbles stay monospace */
158
+ .prose-user { line-height: 1.65; color: var(--user-text); font-family: 'Courier Prime', monospace; }
159
  .prose-user p { margin: 0 0 0.5em; } .prose-user p:last-child { margin-bottom: 0; }
160
+ .prose-user code { background: rgba(0,0,0,0.12); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.875em; }
161
+ .prose-user strong { font-weight: 700; }
162
+
163
+ /* Subtle paper texture in dark mode */
164
+ body:not(.light) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%231c1814'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23221e1a' opacity='0.5'/%3E%3C/svg%3E"); }
165
+
166
+ /* Font display overrides — use Crimson Pro for titles */
167
+ .font-display { font-family: 'Crimson Pro', serif !important; }
168
 
169
  textarea { resize: none; overflow: hidden; }
170
  #sidebar { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
 
173
  .dot-2 { animation: blink 1.2s 0.2s infinite; }
174
  .dot-3 { animation: blink 1.2s 0.4s infinite; }
175
  select { -webkit-appearance: none; appearance: none; }
176
+ textarea:focus, input:focus, select:focus { outline: none; box-shadow: 0 0 0 1.5px var(--accent); }
 
 
 
 
 
 
 
 
 
 
 
 
 
177
 
178
  /* CRITICAL MOBILE FIX - Main container */
179
  @media (max-width: 768px) {