style.css (8766B)
1 /* ========================================================================== 2 GLOBAL / BASE 3 ========================================================================== */ 4 5 * { 6 -webkit-tap-highlight-color: transparent; 7 } 8 9 ::-webkit-scrollbar { 10 width: 8px; 11 height: 8px; 12 } 13 ::-webkit-scrollbar-track { 14 background: transparent; 15 } 16 ::-webkit-scrollbar-thumb { 17 background: var(--vp-c-divider); 18 border-radius: 4px; 19 } 20 ::-webkit-scrollbar-thumb:hover { 21 background: var(--vp-c-brand-1); 22 } 23 24 ::selection { 25 background: #a8b1ff33; 26 color: var(--vp-c-text-1); 27 } 28 29 30 /* ========================================================================== 31 THEME COLORS — LIGHT MODE (:root = default/light) 32 ========================================================================== */ 33 34 :root { 35 /* Brand */ 36 --vp-c-brand-1: #8839ef; 37 --vp-c-brand-2: #7c3aed; 38 --vp-c-brand-3: #6d28d9; 39 --vp-c-brand: #8839ef; 40 --banner-bg: #8839ef; 41 --vp-c-b-divider: #000000; 42 43 /* Home hero gradient (light) */ 44 --vp-home-hero-image-background-image: linear-gradient( 45 -45deg, 46 #8839ef 50%, 47 #a855f7 50% 48 ); 49 --vp-home-hero-image-filter: blur(100px); 50 --vp-home-hero-name-color: transparent; 51 --vp-home-hero-name-background: -webkit-linear-gradient( 52 120deg, 53 #8839ef 30%, 54 #a855f7 55 ); 56 57 /* DocSearch hit colors (light) */ 58 --docsearch-hit-color: #1a1a1a; 59 --docsearch-hit-active-color: #1a1a1a; 60 --docsearch-hit-background: #f3f0fb; 61 62 /* Font */ 63 --vp-font-family-base: 'Lexend', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 64 } 65 66 67 /* ========================================================================== 68 THEME COLORS — DARK MODE (.dark overrides) 69 ========================================================================== */ 70 71 .dark { 72 /* Backgrounds → true black */ 73 --vp-c-bg: #000000; 74 --vp-c-bg-alt: #000000; 75 --vp-c-bg-elv: #000000; 76 --vp-c-bg-soft: #0a0a0a; 77 --vp-c-divider: #1a1a1a; 78 --vp-c-b-divider: #ffffff; 79 80 /* Brand */ 81 --vp-c-brand-1: #cba6f7; 82 --vp-c-brand-2: #b48ead; 83 --vp-c-brand-3: #a374c4; 84 --vp-c-brand: #cba6f7; 85 86 /* Home hero gradient (dark) */ 87 --vp-home-hero-image-background-image: linear-gradient( 88 -45deg, 89 #cba6f7 50%, 90 #dcc6fb 50% 91 ); 92 --vp-home-hero-name-background: -webkit-linear-gradient( 93 120deg, 94 #cba6f7 30%, 95 #dcc6fb 96 ); 97 98 /* DocSearch hit colors (dark) */ 99 --docsearch-hit-color: #ffffff; 100 --docsearch-hit-active-color: #ffffff; 101 --docsearch-hit-background: #1a1625; 102 --docsearch-modal-background: #000000 !important; 103 } 104 105 .dark ::-webkit-scrollbar-track { 106 background: var(--vp-c-bg-soft); 107 } 108 109 110 /* ========================================================================== 111 CUSTOM COMPONENTS — .bsc-* (file/problem cards, buttons) 112 ========================================================================== */ 113 114 .bsc-header { 115 margin-bottom: 1.4rem; 116 } 117 118 .bsc-header-top { 119 display: flex; 120 align-items: center; 121 gap: 10px; 122 margin-bottom: 12px; 123 } 124 125 .bsc-file-icon { 126 width: 36px; 127 height: 36px; 128 border-radius: 8px; 129 background-color: var(--vp-c-bg-soft); 130 border: 1px solid var(--vp-c-divider); 131 display: flex; 132 align-items: center; 133 justify-content: center; 134 flex-shrink: 0; 135 color: var(--vp-c-text-2); 136 } 137 138 .bsc-filename { 139 margin: 0 !important; 140 padding: 0 !important; 141 border: none !important; 142 font-size: 1.15rem !important; 143 font-weight: 500 !important; 144 line-height: 1.3 !important; 145 letter-spacing: 0 !important; 146 } 147 148 .bsc-filename code { 149 font-size: inherit !important; 150 background: none !important; 151 padding: 0 !important; 152 color: var(--vp-c-text-1) !important; 153 border-radius: 0 !important; 154 } 155 156 /* Metadata grid */ 157 .bsc-meta { 158 border-top: 1px solid var(--vp-c-divider); 159 padding-top: 10px; 160 display: grid; 161 grid-template-columns: 1fr 1fr; 162 gap: 6px 24px; 163 } 164 165 @media (max-width: 540px) { 166 .bsc-meta { 167 grid-template-columns: 1fr; 168 } 169 } 170 171 .bsc-meta-row { 172 display: flex; 173 align-items: center; 174 gap: 6px; 175 } 176 177 .bsc-meta-icon { 178 display: flex; 179 align-items: center; 180 color: var(--vp-c-text-3); 181 flex-shrink: 0; 182 } 183 184 .bsc-meta-key { 185 font-size: 11px; 186 color: var(--vp-c-text-3); 187 min-width: 46px; 188 } 189 190 .bsc-meta-val { 191 font-size: 12px; 192 font-weight: 500; 193 color: var(--vp-c-text-1); 194 } 195 196 .bsc-problem { 197 border-left: 3px solid var(--vp-c-brand-1); 198 border-radius: 0 8px 8px 0; 199 background-color: var(--vp-c-bg-soft); 200 padding: 10px 14px; 201 margin-bottom: 1.2rem; 202 } 203 204 .bsc-problem-label { 205 display: flex; 206 align-items: center; 207 gap: 5px; 208 font-size: 10px; 209 font-weight: 600; 210 letter-spacing: 0.06em; 211 text-transform: uppercase; 212 color: var(--vp-c-brand-1); 213 margin-bottom: 5px; 214 } 215 216 .bsc-problem p { 217 margin: 0; 218 font-size: 0.85rem; 219 line-height: 1.65; 220 color: var(--vp-c-text-1); 221 } 222 223 .bsc-actions { 224 display: flex; 225 gap: 8px; 226 flex-wrap: wrap; 227 margin-bottom: 1.4rem; 228 } 229 230 .bsc-btn { 231 display: inline-flex; 232 align-items: center; 233 gap: 6px; 234 padding: 7px 14px; 235 border-radius: 8px; 236 font-size: 0.82rem; 237 font-weight: 500; 238 font-family: inherit; 239 text-decoration: none !important; 240 cursor: pointer; 241 border: 1px solid var(--vp-c-divider); 242 background-color: var(--vp-c-bg); 243 color: var(--vp-c-text-1) !important; 244 transition: border-color 0.15s, background-color 0.15s; 245 -webkit-tap-highlight-color: transparent; 246 outline: none; 247 } 248 249 .bsc-btn:hover { 250 border-color: var(--vp-c-brand-1); 251 background-color: var(--vp-c-bg-soft); 252 color: var(--vp-c-text-1) !important; 253 } 254 255 .bsc-btn:active { 256 background-color: var(--vp-c-bg-mute); 257 } 258 259 .bsc-btn-primary { 260 background-color: var(--vp-c-brand-1); 261 border-color: var(--vp-c-brand-1); 262 color: var(--vp-c-white) !important; 263 } 264 265 .bsc-btn-primary:hover { 266 background-color: var(--vp-c-brand-2); 267 border-color: var(--vp-c-brand-2); 268 color: var(--vp-c-white) !important; 269 } 270 271 .bsc-btn-primary:active { 272 background-color: var(--vp-c-brand-3); 273 } 274 275 276 /* ========================================================================== 277 VITEPRESS UI TWEAKS 278 ========================================================================== */ 279 280 .VPFeature:hover { 281 border-color: var(--vp-c-brand-1) !important; 282 transition: border-color 0.2s; 283 } 284 285 @media (hover: none) and (pointer: coarse) { 286 .vp-doc [class*="language-"] > button.copy { 287 opacity: 1 !important; 288 } 289 } 290 291 /* ========================================================================== 292 ALGOLIA DOCSEARCH — RESULTS / HITS 293 ========================================================================== */ 294 295 .DocSearch-Dropdown { 296 padding-top: 0px !important; 297 } 298 299 .DocSearch-Input::placeholder { 300 font-size: 15px; 301 } 302 303 .DocSearch-Hit[aria-selected="true"] a { 304 background-color: var(--docsearch-hit-background) !important; 305 box-shadow: var(--docsearch-hit-shadow) !important; 306 color: var(--docsearch-hit-color) !important; 307 } 308 309 .DocSearch-Hit a:hover { 310 background-color: var(--vp-c-brand-soft) !important; 311 color: var(--vp-c-text-1) !important; 312 } 313 314 .DocSearch-Hit-title { 315 font-size: 14px !important; 316 } 317 .DocSearch-Hit-source { 318 font-size: 12px !important; 319 text-transform: uppercase; 320 letter-spacing: 0.5px; 321 } 322 .DocSearch-Hit-path { 323 font-size: 12px !important; 324 } 325 326 327 /* ========================================================================== 328 ALGOLIA DOCSEARCH — NO RESULTS SCREEN 329 ========================================================================== */ 330 331 .DocSearch-NoResults-Prefill-List { 332 display: none !important; 333 } 334 335 336 /* ========================================================================== 337 ALGOLIA DOCSEARCH — MOBILE LAYOUT (footer above dropdown, right-aligned) 338 ========================================================================== */ 339 340 @media (max-width: 767px) { 341 .DocSearch-Modal { 342 display: flex !important; 343 flex-direction: column !important; 344 } 345 346 .DocSearch-SearchBar { 347 order: 1 !important; 348 } 349 350 .DocSearch-Footer { 351 display: flex !important; 352 justify-content: flex-end !important; 353 align-items: center !important; 354 order: 2 !important; 355 position: static !important; 356 width: auto !important; 357 box-shadow: none !important; 358 border-top: none !important; 359 border-bottom: 1px solid var(--vp-c-divider) !important; 360 padding: 8px 16px !important; 361 } 362 363 .DocSearch-Dropdown { 364 order: 3 !important; 365 flex: 1 !important; 366 } 367 368 .DocSearch-Logo { 369 margin-left: auto !important; 370 } 371 } 372 373 .bsc-doc-toolbar { 374 display: flex; 375 align-items: center; 376 justify-content: space-between; 377 gap: 12px; 378 margin-bottom: 16px; 379 } 380 381 .bsc-doc-toolbar .bsc-breadcrumbs { 382 margin-bottom: 0; 383 flex: 1; 384 min-width: 0; 385 } 386 387 .DocSearch-Button:focus, 388 .DocSearch-Button:focus-visible { 389 outline: none !important; 390 box-shadow: none !important; 391 }