| 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| 2 | @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); |
| 3 | |
| 4 | @tailwind base; |
| 5 | @tailwind components; |
| 6 | @tailwind utilities; |
| 7 | |
| 8 | @layer base { |
| 9 | html { @apply antialiased; } |
| 10 | body { @apply bg-surface-900 text-gray-300 font-sans text-sm leading-relaxed; } |
| 11 | a { @apply text-brand-500; } |
| 12 | code { @apply font-mono text-xs; } |
| 13 | } |
| 14 | |
| 15 | @layer components { |
| 16 | .nav-link { |
| 17 | @apply text-gray-400 hover:text-gray-100 text-sm font-medium transition-colors duration-150; |
| 18 | } |
| 19 | |
| 20 | .btn-primary { |
| 21 | @apply inline-flex items-center gap-2 px-4 py-2 bg-brand-500 text-white text-sm |
| 22 | font-medium rounded hover:bg-brand-400 transition-colors duration-150 cursor-pointer; |
| 23 | } |
| 24 | .btn-secondary { |
| 25 | @apply inline-flex items-center gap-2 px-4 py-2 bg-surface-700 text-gray-300 text-sm |
| 26 | font-medium rounded border border-surface-500 hover:bg-surface-600 |
| 27 | transition-colors duration-150 cursor-pointer; |
| 28 | } |
| 29 | .btn-danger { |
| 30 | @apply inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-sm |
| 31 | font-medium rounded hover:bg-red-500 transition-colors duration-150 cursor-pointer; |
| 32 | } |
| 33 | .btn-ghost { |
| 34 | @apply inline-flex items-center gap-2 px-3 py-1.5 text-gray-400 text-sm |
| 35 | font-medium rounded hover:bg-surface-700 transition-colors duration-150 cursor-pointer; |
| 36 | } |
| 37 | |
| 38 | .form-input { |
| 39 | @apply w-full px-3 py-2 border border-surface-500 rounded text-sm text-gray-200 |
| 40 | bg-surface-800 placeholder-gray-500 focus:outline-none focus:ring-2 |
| 41 | focus:ring-brand-500 focus:border-transparent transition-all duration-150; |
| 42 | } |
| 43 | .form-label { |
| 44 | @apply block text-sm font-medium text-gray-300 mb-1; |
| 45 | } |
| 46 | |
| 47 | .card { |
| 48 | @apply bg-surface-700 border border-surface-500 rounded-sm; |
| 49 | } |
| 50 | |
| 51 | .code-container { |
| 52 | @apply bg-surface-800 border border-surface-500 rounded-sm font-mono text-xs overflow-x-auto; |
| 53 | } |
| 54 | |
| 55 | .file-row { |
| 56 | @apply flex items-center gap-3 px-4 py-2.5 border-b border-surface-600 |
| 57 | hover:bg-surface-600 transition-colors duration-100 text-sm; |
| 58 | } |
| 59 | .file-row:last-child { @apply border-b-0; } |
| 60 | |
| 61 | .breadcrumb-item { |
| 62 | @apply text-brand-500 hover:underline text-sm; |
| 63 | } |
| 64 | |
| 65 | .commit-row { |
| 66 | @apply flex items-start justify-between px-4 py-3 border-b border-surface-600 |
| 67 | hover:bg-surface-600 transition-colors duration-100; |
| 68 | } |
| 69 | .commit-row:last-child { @apply border-b-0; } |
| 70 | |
| 71 | .badge { |
| 72 | @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium; |
| 73 | } |
| 74 | .badge-gray { @apply badge bg-surface-600 text-gray-300; } |
| 75 | .badge-blue { @apply badge bg-brand-500/10 text-brand-400; } |
| 76 | .badge-green { @apply badge bg-green-900/30 text-green-400; } |
| 77 | .badge-red { @apply badge bg-red-900/30 text-red-400; } |
| 78 | .badge-purple { @apply badge bg-purple-900/30 text-purple-400; } |
| 79 | |
| 80 | .tab-item { |
| 81 | @apply px-4 py-2.5 text-sm font-medium text-gray-500 border-b-2 border-transparent |
| 82 | hover:text-gray-300 hover:border-gray-600 transition-all duration-150; |
| 83 | } |
| 84 | .tab-item.active { |
| 85 | @apply text-gray-100 border-brand-500; |
| 86 | } |
| 87 | |
| 88 | .prose-readme h1 { @apply text-2xl font-semibold mb-4 mt-6 pb-2 border-b border-surface-600; } |
| 89 | .prose-readme h2 { @apply text-xl font-semibold mb-3 mt-5 pb-2 border-b border-surface-600; } |
| 90 | .prose-readme h3 { @apply text-lg font-medium mb-2 mt-4; } |
| 91 | .prose-readme p { @apply mb-4 leading-7; } |
| 92 | .prose-readme ul { @apply list-disc pl-6 mb-4 space-y-1; } |
| 93 | .prose-readme ol { @apply list-decimal pl-6 mb-4 space-y-1; } |
| 94 | .prose-readme li { @apply leading-7; } |
| 95 | .prose-readme a { @apply text-brand-500 hover:underline; } |
| 96 | .prose-readme code { @apply bg-surface-600 px-1.5 py-0.5 rounded text-xs font-mono text-gray-200; } |
| 97 | .prose-readme pre { @apply bg-surface-800 border border-surface-500 rounded-sm p-4 overflow-x-auto mb-4; } |
| 98 | .prose-readme pre code { @apply bg-transparent p-0; } |
| 99 | .prose-readme table { @apply w-full mb-4 border-collapse border border-surface-500; } |
| 100 | .prose-readme th { @apply bg-surface-600 border border-surface-500 px-3 py-2 text-left font-medium text-sm; } |
| 101 | .prose-readme td { @apply border border-surface-500 px-3 py-2 text-sm; } |
| 102 | .prose-readme blockquote { @apply border-l-4 border-surface-500 pl-4 italic text-gray-400 my-4; } |
| 103 | .prose-readme hr { @apply border-surface-600 my-6; } |
| 104 | .prose-readme img { @apply max-w-full; } |
| 105 | .prose-readme h4 { @apply text-base font-medium mb-2 mt-4; } |
| 106 | .prose-readme h5 { @apply text-sm font-medium mb-2 mt-3; } |
| 107 | .prose-readme h6 { @apply text-sm font-medium text-gray-400 mb-2 mt-3; } |
| 108 | /* Highlighted fenced code from MarkdownRenderer renders as <pre class="highlight"> */ |
| 109 | .prose-readme pre.highlight { @apply p-4; } |
| 110 | .prose-readme .task-list-item { @apply list-none -ml-6; } |
| 111 | .prose-readme .task-list-item input { @apply mr-1.5 align-middle; } |
| 112 | /* GitHub-style heading anchors: the "#" link is hidden until hover. */ |
| 113 | .prose-readme .heading-anchor { |
| 114 | @apply opacity-0 no-underline text-gray-500 mr-2 -ml-6 inline-block w-4; |
| 115 | transition: opacity 0.1s; |
| 116 | } |
| 117 | .prose-readme .heading-anchored:hover .heading-anchor { @apply opacity-100; } |
| 118 | |
| 119 | /* Blob view line selection */ |
| 120 | .line-row:target, |
| 121 | .line-row.line-selected { @apply bg-brand-500/15; } |
| 122 | .line-row:hover { @apply bg-brand-500/10; } |
| 123 | |
| 124 | .clone-menu > summary::-webkit-details-marker { display: none; } |
| 125 | .btn-ghost.copied { @apply text-green-400; } |
| 126 | |
| 127 | /* Copy button injected into rendered Markdown code blocks */ |
| 128 | .code-copy-wrap { @apply relative; } |
| 129 | .code-copy-btn { |
| 130 | @apply absolute top-2 right-2 opacity-0 bg-surface-600 border border-surface-500 |
| 131 | rounded px-2 py-0.5 text-xs text-gray-300 hover:text-gray-100 transition-opacity; |
| 132 | } |
| 133 | .code-copy-wrap:hover .code-copy-btn { @apply opacity-100; } |
| 134 | .code-copy-btn.copied { @apply text-green-400 opacity-100; } |
| 135 | |
| 136 | .diff-add { @apply bg-green-900/30 text-green-300; } |
| 137 | .diff-remove { @apply bg-red-900/30 text-red-300; } |
| 138 | .diff-header { @apply bg-blue-900/30 text-blue-300; } |
| 139 | } |
| 140 | |
| 141 | .highlight .c { color: #8b949e; font-style: italic } |
| 142 | .highlight .err { color: #f85149; background-color: #3d1117 } |
| 143 | .highlight .k { color: #ff7b72; font-weight: bold } |
| 144 | .highlight .o { color: #ff7b72 } |
| 145 | .highlight .cm { color: #8b949e; font-style: italic } |
| 146 | .highlight .cp { color: #ff7b72 } |
| 147 | .highlight .c1 { color: #8b949e; font-style: italic } |
| 148 | .highlight .cs { color: #8b949e; font-weight: bold; font-style: italic } |
| 149 | .highlight .gd { color: #ffa198; background-color: #3d1117 } |
| 150 | .highlight .ge { font-style: italic } |
| 151 | .highlight .gr { color: #f85149 } |
| 152 | .highlight .gh { color: #79c0ff; font-weight: bold } |
| 153 | .highlight .gi { color: #aff5b4; background-color: #1a4721 } |
| 154 | .highlight .go { color: #8b949e } |
| 155 | .highlight .gp { color: #8b949e } |
| 156 | .highlight .gs { font-weight: bold } |
| 157 | .highlight .gu { color: #79c0ff } |
| 158 | .highlight .gt { color: #f85149 } |
| 159 | .highlight .kc { color: #ff7b72; font-weight: bold } |
| 160 | .highlight .kd { color: #ff7b72; font-weight: bold } |
| 161 | .highlight .kp { color: #ff7b72; font-weight: bold } |
| 162 | .highlight .kr { color: #ff7b72; font-weight: bold } |
| 163 | .highlight .kt { color: #ffa657; font-weight: bold } |
| 164 | .highlight .m { color: #79c0ff } |
| 165 | .highlight .s { color: #a5d6ff } |
| 166 | .highlight .na { color: #79c0ff } |
| 167 | .highlight .nb { color: #ffa657 } |
| 168 | .highlight .nc { color: #ffa657; font-weight: bold } |
| 169 | .highlight .no { color: #79c0ff } |
| 170 | .highlight .ni { color: #d2a8ff } |
| 171 | .highlight .ne { color: #ffa657; font-weight: bold } |
| 172 | .highlight .nf { color: #d2a8ff; font-weight: bold } |
| 173 | .highlight .nn { color: #ffa657 } |
| 174 | .highlight .nt { color: #7ee787 } |
| 175 | .highlight .nv { color: #ffa657 } |
| 176 | .highlight .ow { color: #ff7b72; font-weight: bold } |
| 177 | .highlight .w { color: #484f58 } |
| 178 | .highlight .mf { color: #79c0ff } |
| 179 | .highlight .mh { color: #79c0ff } |
| 180 | .highlight .mi { color: #79c0ff } |
| 181 | .highlight .mo { color: #79c0ff } |
| 182 | .highlight .sb { color: #a5d6ff } |
| 183 | .highlight .sc { color: #a5d6ff } |
| 184 | .highlight .sd { color: #a5d6ff } |
| 185 | .highlight .s2 { color: #a5d6ff } |
| 186 | .highlight .se { color: #79c0ff } |
| 187 | .highlight .sh { color: #a5d6ff } |
| 188 | .highlight .si { color: #a5d6ff } |
| 189 | .highlight .sx { color: #a5d6ff } |
| 190 | .highlight .sr { color: #7ee787 } |
| 191 | .highlight .s1 { color: #a5d6ff } |
| 192 | .highlight .ss { color: #79c0ff } |
| 193 | .highlight .bp { color: #79c0ff } |
| 194 | .highlight .vc { color: #ffa657 } |
| 195 | .highlight .vg { color: #ffa657 } |
| 196 | .highlight .vi { color: #ffa657 } |
| 197 | .highlight .il { color: #79c0ff } |