@bibobonking/opensol 0.0.0-stage → 3.0.2

package/src/index.css

@@ -0,0 +1,776 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* OpenSol Paper — near-white, hairline borders, one solar accent.
+     canvas = sidebar/chrome, panel = reading surface. */
+  :root,
+  [data-theme='light'] {
+    --canvas: 248 248 246;
+    --panel: 255 255 255;
+    --raised: 240 240 237;
+    --line: 232 232 228;
+    --ink: 23 23 21;
+    --muted: 98 98 93;
+    --faint: 148 148 141;
+    --accent: 217 119 6;
+    --accent-soft: 254 244 224;
+    --on-accent: 255 255 255;
+    --success: 22 128 74;
+    --warning: 180 100 8;
+    --danger: 207 56 48;
+    --syn-keyword: 124 58 237;
+    --syn-string: 21 128 61;
+    --syn-number: 194 85 8;
+    --syn-title: 37 99 235;
+    --syn-attr: 14 116 144;
+    --chat-font-size: 15px;
+    color-scheme: light;
+  }
+
+  /* OpenSol Graphite — neutral near-black, no color cast. */
+  [data-theme='dark'] {
+    --canvas: 15 15 14;
+    --panel: 20 20 19;
+    --raised: 33 33 31;
+    --line: 42 42 39;
+    --ink: 237 237 233;
+    --muted: 160 160 153;
+    --faint: 112 112 106;
+    --accent: 245 158 11;
+    --accent-soft: 46 34 12;
+    --on-accent: 26 17 3;
+    --success: 74 205 130;
+    --warning: 245 180 70;
+    --danger: 248 113 104;
+    --syn-keyword: 196 160 255;
+    --syn-string: 130 218 160;
+    --syn-number: 244 184 110;
+    --syn-title: 140 184 255;
+    --syn-attr: 120 214 226;
+    --chat-font-size: 15px;
+    color-scheme: dark;
+  }
+
+  /* Night Owl */
+  [data-theme='night-owl'] {
+    --canvas: 1 17 30;
+    --panel: 1 22 39;
+    --raised: 11 38 60;
+    --line: 22 55 82;
+    --ink: 214 222 235;
+    --muted: 141 168 197;
+    --faint: 95 122 153;
+    --accent: 130 170 255;
+    --accent-soft: 16 48 77;
+    --on-accent: 1 22 39;
+    --success: 34 210 156;
+    --warning: 236 196 141;
+    --danger: 239 83 80;
+    --syn-keyword: 197 147 249;
+    --syn-string: 144 209 148;
+    --syn-number: 247 190 116;
+    --syn-title: 130 170 255;
+    --syn-attr: 33 193 220;
+    color-scheme: dark;
+  }
+
+  /* Claude Code — warm charcoal with terracotta. */
+  [data-theme='claude-code'] {
+    --canvas: 30 29 27;
+    --panel: 38 37 34;
+    --raised: 49 48 44;
+    --line: 62 61 56;
+    --ink: 232 230 224;
+    --muted: 175 171 162;
+    --faint: 129 126 118;
+    --accent: 217 119 87;
+    --accent-soft: 62 45 38;
+    --on-accent: 28 22 18;
+    --success: 143 191 140;
+    --warning: 222 178 112;
+    --danger: 224 122 112;
+    --syn-keyword: 213 145 122;
+    --syn-string: 143 187 137;
+    --syn-number: 221 176 116;
+    --syn-title: 158 184 222;
+    --syn-attr: 135 189 191;
+    color-scheme: dark;
+  }
+
+  /* Solar (id kept as "flame") — deep umber, bright sun. */
+  [data-theme='flame'] {
+    --canvas: 16 11 8;
+    --panel: 22 15 11;
+    --raised: 36 25 18;
+    --line: 56 38 27;
+    --ink: 250 238 224;
+    --muted: 190 160 138;
+    --faint: 134 106 88;
+    --accent: 255 138 30;
+    --accent-soft: 58 32 14;
+    --on-accent: 26 12 4;
+    --success: 146 206 138;
+    --warning: 250 200 100;
+    --danger: 255 106 92;
+    --syn-keyword: 255 150 90;
+    --syn-string: 170 210 138;
+    --syn-number: 250 194 108;
+    --syn-title: 250 176 128;
+    --syn-attr: 168 200 224;
+    color-scheme: dark;
+  }
+
+  * {
+    border-color: rgb(var(--line));
+  }
+
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+
+  body {
+    @apply bg-panel font-sans text-ink antialiased;
+    font-feature-settings: 'ss01' 1, 'cv11' 1;
+    letter-spacing: -0.003em;
+    text-rendering: optimizeLegibility;
+    overscroll-behavior: none;
+  }
+
+  ::selection {
+    background: rgb(var(--accent) / 0.22);
+  }
+
+  :focus-visible {
+    outline: 2px solid rgb(var(--accent) / 0.6);
+    outline-offset: 2px;
+    border-radius: 6px;
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  button:not(:disabled) {
+    cursor: pointer;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: rgb(var(--faint));
+  }
+}
+
+@layer components {
+  .icon-button {
+    @apply inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-muted transition-all duration-150 ease-out hover:bg-raised hover:text-ink active:scale-90 disabled:pointer-events-none disabled:opacity-40;
+  }
+
+  .chip {
+    @apply inline-flex h-8 items-center gap-1.5 rounded-lg border border-line bg-panel px-3 text-[12.5px] font-medium text-muted transition-all duration-150 hover:border-faint/40 hover:bg-raised/60 hover:text-ink active:scale-[0.97];
+  }
+
+  .chip-active {
+    @apply border-accent/30 bg-accent-soft text-accent hover:border-accent/50 hover:text-accent;
+  }
+
+  .soft-label {
+    @apply text-[11px] font-medium text-faint;
+  }
+
+  .eyebrow {
+    @apply text-[10.5px] font-medium uppercase tracking-[0.14em] text-faint;
+  }
+
+  .sidebar-item {
+    @apply relative flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-[13px] text-muted transition-all duration-150 hover:bg-raised/80 hover:text-ink;
+  }
+
+  .sidebar-item-active {
+    @apply bg-raised text-ink hover:bg-raised;
+  }
+
+  .sidebar-item-active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 8px;
+    bottom: 8px;
+    width: 2px;
+    border-radius: 2px;
+    background: rgb(var(--accent));
+    animation: scalein 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .nav-item {
+    @apply flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-[13px] text-muted transition-all duration-150 hover:bg-raised/80 hover:text-ink active:scale-[0.99];
+  }
+
+  /* Popovers, composer, modals. */
+  .surface-lift {
+    background: rgb(var(--panel));
+  }
+
+  .chat-text {
+    font-size: var(--chat-font-size, 15px);
+  }
+
+  .settings-row {
+    @apply flex flex-col gap-2 border-b border-line py-4 last:border-b-0 sm:flex-row sm:items-center sm:justify-between sm:gap-6;
+  }
+
+  .settings-label {
+    @apply text-[13px] font-medium text-ink;
+  }
+
+  .settings-hint {
+    @apply mt-0.5 text-[12px] leading-relaxed text-muted;
+  }
+
+  .settings-select {
+    @apply h-9 shrink-0 rounded-lg border border-line bg-panel px-2.5 text-[12.5px] text-ink outline-none transition-colors focus:border-accent/60;
+  }
+}
+
+/* Markdown */
+
+.md {
+  @apply font-sans leading-[1.72] text-ink;
+  font-size: var(--chat-font-size, 15px);
+  font-feature-settings: 'kern' 1, 'liga' 1;
+  word-break: break-word;
+}
+
+.md p,
+.md li {
+  text-wrap: pretty;
+}
+
+.md h1,
+.md h2,
+.md h3,
+.md h4 {
+  text-wrap: balance;
+}
+
+.md > :first-child {
+  margin-top: 0;
+}
+
+.md > :last-child {
+  margin-bottom: 0;
+}
+
+.md p {
+  margin: 0.7em 0;
+}
+
+.md h1,
+.md h2,
+.md h3,
+.md h4 {
+  @apply font-semibold tracking-[-0.02em] text-ink;
+  margin: 1.4em 0 0.55em;
+  line-height: 1.3;
+}
+
+.md h1,
+.md h2 {
+  @apply font-semibold;
+}
+
+.md h1 {
+  font-size: 1.45em;
+}
+
+.md h2 {
+  font-size: 1.22em;
+}
+
+.md h3 {
+  @apply font-semibold;
+  font-size: 1.08em;
+}
+
+.md h4 {
+  @apply font-semibold;
+  font-size: 1em;
+}
+
+.md ul,
+.md ol {
+  margin: 0.65em 0;
+  padding-left: 1.35em;
+}
+
+.md ul {
+  list-style: disc;
+}
+
+.md ol {
+  list-style: decimal;
+}
+
+.md li {
+  margin: 0.28em 0;
+}
+
+.md li > p {
+  margin: 0.25em 0;
+}
+
+.md li::marker {
+  color: rgb(var(--faint));
+}
+
+.md a {
+  @apply text-accent underline decoration-accent/30 underline-offset-2 transition-colors hover:decoration-accent;
+}
+
+.md strong {
+  @apply font-semibold text-ink;
+}
+
+.md code {
+  @apply rounded-[5px] bg-raised px-[0.36em] py-[0.12em] font-mono text-[0.845em] text-ink;
+}
+
+.md pre code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+.md blockquote {
+  margin: 0.9em 0;
+  border-left: 2px solid rgb(var(--accent) / 0.35);
+  padding: 0.15em 0 0.15em 0.9em;
+  color: rgb(var(--muted));
+}
+
+.md hr {
+  margin: 1.5em 0;
+  border: 0;
+  border-top: 1px solid rgb(var(--line));
+}
+
+.md table {
+  margin: 1em 0;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+.md th,
+.md td {
+  border: 1px solid rgb(var(--line));
+  padding: 0.45em 0.7em;
+  text-align: left;
+  vertical-align: top;
+}
+
+.md th {
+  @apply bg-raised/70 font-medium;
+}
+
+.md input[type='checkbox'] {
+  margin-right: 0.4em;
+  accent-color: rgb(var(--accent));
+}
+
+.md img {
+  max-width: 100%;
+  border-radius: 10px;
+  border: 1px solid rgb(var(--line));
+}
+
+.code-shell {
+  @apply my-4 overflow-hidden rounded-xl border border-line;
+  background: rgb(var(--canvas));
+}
+
+.code-head {
+  @apply flex h-9 items-center justify-between border-b border-line/70 bg-raised/40 px-3;
+}
+
+.code-lang {
+  @apply font-mono text-[10.5px] tracking-wide text-faint;
+}
+
+.code-pre {
+  @apply overflow-x-auto p-3.5 font-mono text-[12.5px] leading-[1.7];
+  tab-size: 2;
+}
+
+.code-pre code {
+  background: transparent !important;
+  padding: 0 !important;
+  font-size: inherit !important;
+  white-space: pre;
+}
+
+.hljs {
+  color: rgb(var(--ink));
+  background: transparent;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: rgb(var(--faint));
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-type {
+  color: rgb(var(--syn-keyword));
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-addition {
+  color: rgb(var(--syn-string));
+}
+
+.hljs-number,
+.hljs-symbol,
+.hljs-bullet {
+  color: rgb(var(--syn-number));
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: rgb(var(--syn-title));
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-property {
+  color: rgb(var(--syn-attr));
+}
+
+.hljs-built_in,
+.hljs-class .hljs-title {
+  color: rgb(var(--syn-title));
+}
+
+.hljs-meta,
+.hljs-deletion {
+  color: rgb(var(--danger));
+}
+
+/* Scrollbars */
+
+.thin-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(var(--line)) transparent;
+}
+
+.thin-scroll::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.thin-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.thin-scroll::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background-clip: content-box;
+  background-color: rgb(var(--line));
+}
+
+.thin-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(var(--faint) / 0.6);
+}
+
+/* Utilities */
+
+.hero-wash {
+  background: radial-gradient(60% 50% at 50% 0%, rgb(var(--accent) / 0.07), transparent 70%);
+}
+
+.bg-dots {
+  background-image: radial-gradient(rgb(var(--faint) / 0.28) 1px, transparent 1px);
+  background-size: 24px 24px;
+  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 75%);
+  mask-image: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 75%);
+}
+
+.ambient-blob {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(64px);
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.card-lift {
+  transition:
+    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 0.3s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.card-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 14px 32px -20px rgba(0, 0, 0, 0.3);
+  border-color: rgb(var(--faint) / 0.4);
+}
+
+@keyframes glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgb(var(--accent) / 0.2);
+  }
+  50% {
+    box-shadow: 0 0 0 7px rgb(var(--accent) / 0);
+  }
+}
+
+.composer-glow {
+  animation: glow-pulse 1.9s ease-out infinite;
+}
+
+.composer-shadow {
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.04),
+    0 10px 30px -14px rgba(0, 0, 0, 0.14);
+  transition:
+    box-shadow 0.25s ease,
+    border-color 0.25s ease;
+}
+
+.composer-shadow:focus-within {
+  border-color: rgb(var(--accent) / 0.45);
+  box-shadow:
+    0 0 0 4px rgb(var(--accent) / 0.08),
+    0 12px 34px -14px rgba(0, 0, 0, 0.18);
+}
+
+.dark .composer-shadow {
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.4),
+    0 16px 40px -16px rgba(0, 0, 0, 0.7);
+}
+
+.dark .composer-shadow:focus-within {
+  box-shadow:
+    0 0 0 4px rgb(var(--accent) / 0.1),
+    0 16px 40px -16px rgba(0, 0, 0, 0.7);
+}
+
+.dark .card-lift:hover {
+  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.8);
+}
+
+.modal-panel {
+  animation: modal-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+}
+
+.modal-scrim {
+  animation: fade 0.2s ease-out both;
+}
+
+@keyframes modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Staggered entrance: children rise in sequence. */
+.stagger > * {
+  animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.stagger > *:nth-child(1) { animation-delay: 40ms; }
+.stagger > *:nth-child(2) { animation-delay: 110ms; }
+.stagger > *:nth-child(3) { animation-delay: 180ms; }
+.stagger > *:nth-child(4) { animation-delay: 250ms; }
+.stagger > *:nth-child(5) { animation-delay: 320ms; }
+.stagger > *:nth-child(6) { animation-delay: 390ms; }
+
+/* Sun-gradient text for the wordmark / hero line. */
+.text-solar {
+  background: linear-gradient(100deg, rgb(var(--ink)) 20%, rgb(var(--accent)) 120%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Subtle shimmer bar used while loading. */
+.loading-bar {
+  position: relative;
+  overflow: hidden;
+  background: rgb(var(--line));
+}
+.loading-bar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  width: 40%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, transparent, rgb(var(--accent)), transparent);
+  animation: sweep 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+/* Splash (boot) */
+.splash {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(var(--panel));
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+    filter 0.5s ease;
+}
+.splash.is-leaving {
+  opacity: 0;
+  transform: scale(1.03);
+  filter: blur(6px);
+  pointer-events: none;
+}
+.splash-sun .ray {
+  stroke-dasharray: 8;
+  stroke-dashoffset: 8;
+  animation: draw 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.splash-sun .core {
+  transform-origin: 32px 32px;
+  animation: core-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+.splash-sun .rays {
+  transform-origin: 32px 32px;
+  animation: spinslow 14s linear infinite;
+}
+.splash-word span {
+  display: inline-block;
+  opacity: 0;
+  animation: blurin 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+@keyframes draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes core-in {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes spinslow {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.md.is-streaming > :last-child::after {
+  content: '';
+  display: inline-block;
+  width: 7px;
+  height: 1.05em;
+  margin-left: 2px;
+  border-radius: 2px;
+  vertical-align: -0.16em;
+  background: rgb(var(--accent));
+  animation: caret 1.1s ease-in-out infinite;
+}
+
+@keyframes caret {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.15;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* PixleSol ray twinkle — two ray sets alternate in hard steps (pixel-art feel). */
+.pxs-a {
+  animation: px-a 1s steps(1) infinite;
+}
+.pxs-b {
+  animation: px-b 1s steps(1) infinite;
+}
+@keyframes px-a {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.25; }
+}
+@keyframes px-b {
+  0%, 100% { opacity: 0.25; }
+  50% { opacity: 1; }
+}
+
+/* Moving highlight across text while something is running. */
+.text-shimmer {
+  background: linear-gradient(90deg, rgb(var(--muted)) 0%, rgb(var(--ink)) 45%, rgb(var(--accent)) 50%, rgb(var(--ink)) 55%, rgb(var(--muted)) 100%);
+  background-size: 250% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: shimmer 2.2s linear infinite;
+}
+
+/* PixleSol eyes: blink and scan in hard steps so the pixels never blur. */
+.pxs-blink,
+.pxs-scan {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+.pxs-blink {
+  animation: px-blink 4.2s steps(1) infinite;
+}
+.pxs-scan {
+  animation: px-scan 1.2s steps(1) infinite;
+}
+@keyframes px-blink {
+  0%, 94%, 100% { transform: scaleY(1); }
+  96% { transform: scaleY(0.2); }
+}
+@keyframes px-scan {
+  0%, 100% { transform: translateX(-1px); }
+  33% { transform: translateX(0); }
+  66% { transform: translateX(1px); }
+}