style.css (12330B)
1 :root { 2 --color-bg: #fafafa; 3 --color-surface: #fff; 4 --color-accent: #4a6fa5; 5 --color-accent-hover: #3a5a8a; 6 --color-text: #1a1a1a; 7 --color-text-secondary: #6b7280; 8 --color-link: #1a1a1a; 9 --color-link-visited: #6b7280; 10 --color-voted: #e85d04; 11 --color-border: #e5e7eb; 12 --color-error: #dc2626; 13 --color-success: #16a34a; 14 --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 15 --font-mono: "SF Mono", Menlo, monospace; 16 --max-width: 780px; 17 --radius: 6px; 18 } 19 20 @media (prefers-color-scheme: dark) { 21 :root { 22 --color-bg: #111; 23 --color-surface: #1a1a1a; 24 --color-accent: #6b93d6; 25 --color-accent-hover: #8baee0; 26 --color-text: #e5e5e5; 27 --color-text-secondary: #9ca3af; 28 --color-link: #e5e5e5; 29 --color-link-visited: #9ca3af; 30 --color-border: #2a2a2a; 31 } 32 } 33 34 * { box-sizing: border-box; margin: 0; padding: 0; } 35 36 body { 37 font-family: var(--font-main); 38 font-size: 14px; 39 background: var(--color-bg); 40 color: var(--color-text); 41 line-height: 1.5; 42 } 43 44 a { color: var(--color-link); text-decoration: none; } 45 a:visited { color: var(--color-link-visited); } 46 a:hover { color: var(--color-accent); } 47 48 /* Header */ 49 .site-header { 50 background: var(--color-surface); 51 border-bottom: 1px solid var(--color-border); 52 position: sticky; 53 top: 0; 54 z-index: 10; 55 } 56 57 .nav-main { 58 max-width: var(--max-width); 59 margin: 0 auto; 60 display: flex; 61 align-items: center; 62 gap: 16px; 63 padding: 10px 16px; 64 } 65 66 .logo { 67 font-weight: 700; 68 font-size: 16px; 69 color: var(--color-accent); 70 letter-spacing: -0.5px; 71 } 72 .logo:hover { text-decoration: none; color: var(--color-accent-hover); } 73 .logo:visited { color: var(--color-accent); } 74 75 .nav-links { display: flex; gap: 4px; } 76 77 .nav-link { 78 color: var(--color-text-secondary); 79 padding: 4px 10px; 80 border-radius: var(--radius); 81 font-size: 13px; 82 transition: background 0.15s, color 0.15s; 83 } 84 .nav-link:visited { color: var(--color-text-secondary); } 85 .nav-link:hover { 86 background: var(--color-border); 87 color: var(--color-text); 88 text-decoration: none; 89 } 90 91 .nav-right { margin-left: auto; } 92 93 /* Container */ 94 .container { 95 max-width: var(--max-width); 96 margin: 0 auto; 97 padding: 16px; 98 } 99 100 /* Feed */ 101 .feed-tags { 102 display: flex; 103 gap: 6px; 104 margin-bottom: 12px; 105 flex-wrap: wrap; 106 } 107 108 .tag-link { 109 font-size: 12px; 110 color: var(--color-text-secondary); 111 background: var(--color-surface); 112 border: 1px solid var(--color-border); 113 padding: 2px 10px; 114 border-radius: 99px; 115 } 116 .tag-link:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; } 117 118 /* Story List */ 119 .story-list { list-style: none; } 120 121 .story-item { 122 display: flex; 123 padding: 10px 0; 124 align-items: flex-start; 125 border-bottom: 1px solid var(--color-border); 126 } 127 .story-item:last-child { border-bottom: none; } 128 129 .story-vote { 130 width: 28px; 131 text-align: center; 132 flex-shrink: 0; 133 padding-top: 2px; 134 } 135 136 .vote-btn { 137 background: none; 138 border: none; 139 color: var(--color-border); 140 cursor: pointer; 141 font-size: 14px; 142 padding: 2px; 143 line-height: 1; 144 transition: color 0.15s; 145 } 146 .vote-btn:hover { color: var(--color-voted); } 147 .vote-btn.voted { color: var(--color-voted); } 148 149 .vote-placeholder { color: var(--color-border); } 150 151 .comment-vote { font-size: 12px; } 152 153 .story-content { flex: 1; min-width: 0; } 154 155 .story-title { margin-bottom: 3px; } 156 157 .story-rank { 158 color: var(--color-text-secondary); 159 font-size: 12px; 160 margin-right: 6px; 161 } 162 163 .story-link { font-size: 14px; font-weight: 500; } 164 165 .story-domain { 166 font-size: 12px; 167 color: var(--color-text-secondary); 168 margin-left: 6px; 169 } 170 .story-domain a { color: var(--color-text-secondary); } 171 172 .story-meta { 173 font-size: 12px; 174 color: var(--color-text-secondary); 175 } 176 .story-meta a { color: var(--color-text-secondary); } 177 .story-meta a:hover { color: var(--color-accent); } 178 179 .story-tag { 180 color: var(--color-text-secondary); 181 background: var(--color-surface); 182 border: 1px solid var(--color-border); 183 padding: 0 6px; 184 border-radius: 99px; 185 font-size: 11px; 186 } 187 188 .more-link { padding: 16px 0; text-align: center; } 189 .more-link a { 190 color: var(--color-accent); 191 font-size: 13px; 192 } 193 194 /* Story Page */ 195 .story-page { padding: 8px 0; } 196 197 .story-full { margin-bottom: 24px; } 198 199 .story-header { 200 display: flex; 201 align-items: flex-start; 202 margin-bottom: 8px; 203 } 204 205 .story-title-full { 206 font-size: 18px; 207 font-weight: 600; 208 margin-bottom: 6px; 209 line-height: 1.3; 210 } 211 .story-title-full a { color: var(--color-link); } 212 213 .story-text { 214 margin: 16px 0; 215 padding: 12px 16px; 216 background: var(--color-surface); 217 border: 1px solid var(--color-border); 218 border-radius: var(--radius); 219 line-height: 1.6; 220 white-space: pre-wrap; 221 } 222 223 /* Comment Form */ 224 .comment-form { 225 margin: 24px 0; 226 } 227 228 .comment-form textarea { 229 width: 100%; 230 font-family: var(--font-main); 231 font-size: 14px; 232 padding: 10px 12px; 233 border: 1px solid var(--color-border); 234 border-radius: var(--radius); 235 margin-bottom: 8px; 236 resize: vertical; 237 background: var(--color-surface); 238 color: var(--color-text); 239 } 240 .comment-form textarea:focus { 241 outline: none; 242 border-color: var(--color-accent); 243 } 244 245 .comment-form button, 246 .form-actions button, 247 .search-form button { 248 background: var(--color-accent); 249 color: #fff; 250 border: none; 251 padding: 8px 16px; 252 border-radius: var(--radius); 253 cursor: pointer; 254 font-size: 13px; 255 font-weight: 500; 256 transition: background 0.15s; 257 } 258 .comment-form button:hover, 259 .form-actions button:hover, 260 .search-form button:hover { 261 background: var(--color-accent-hover); 262 } 263 264 .login-prompt { 265 color: var(--color-text-secondary); 266 margin: 12px 0; 267 font-size: 13px; 268 } 269 270 /* Comments */ 271 .comments { margin-top: 24px; } 272 273 .comment { 274 margin: 0; 275 padding: 10px 0; 276 border-top: 1px solid var(--color-border); 277 } 278 279 .comment-header { 280 font-size: 12px; 281 color: var(--color-text-secondary); 282 margin-bottom: 4px; 283 } 284 285 .comment-author { font-weight: 600; } 286 .comment-score { margin: 0 4px; } 287 .comment-time { margin-left: 4px; } 288 289 .comment-text { 290 font-size: 13px; 291 line-height: 1.5; 292 margin: 4px 0; 293 white-space: pre-wrap; 294 } 295 296 .comment-actions { font-size: 12px; margin-top: 4px; } 297 .comment-reply { color: var(--color-text-secondary); } 298 .comment-reply:hover { color: var(--color-accent); } 299 300 /* Forms */ 301 .submit-page, .reply-page, .search-page, .auth-page { 302 max-width: 520px; 303 padding: 24px 0; 304 } 305 306 .auth-page { 307 margin: 0 auto; 308 padding: 48px 16px; 309 } 310 311 .submit-page h2, .reply-page h2, .search-page h2, .auth-page h2 { 312 font-size: 18px; 313 font-weight: 600; 314 margin-bottom: 20px; 315 } 316 317 .auth-page h2 { text-align: center; } 318 319 .submit-form, .auth-form { 320 background: var(--color-surface); 321 border: 1px solid var(--color-border); 322 padding: 20px; 323 border-radius: var(--radius); 324 } 325 326 .form-group { margin-bottom: 14px; } 327 328 .form-group label { 329 display: block; 330 font-size: 13px; 331 font-weight: 500; 332 color: var(--color-text-secondary); 333 margin-bottom: 4px; 334 } 335 336 .form-group input, 337 .form-group textarea { 338 width: 100%; 339 font-family: var(--font-main); 340 font-size: 14px; 341 padding: 8px 12px; 342 border: 1px solid var(--color-border); 343 border-radius: var(--radius); 344 background: var(--color-bg); 345 color: var(--color-text); 346 } 347 .form-group input:focus, 348 .form-group textarea:focus { 349 outline: none; 350 border-color: var(--color-accent); 351 } 352 353 .form-group textarea { resize: vertical; } 354 355 .form-separator { 356 text-align: center; 357 color: var(--color-text-secondary); 358 margin: 14px 0; 359 font-size: 12px; 360 } 361 362 .form-actions { margin-top: 16px; } 363 364 .form-actions a { 365 margin-left: 12px; 366 color: var(--color-text-secondary); 367 font-size: 13px; 368 } 369 370 .auth-form .form-group small { 371 display: block; 372 font-size: 11px; 373 color: var(--color-text-secondary); 374 margin-top: 3px; 375 } 376 377 .auth-link { 378 text-align: center; 379 margin-top: 14px; 380 font-size: 13px; 381 color: var(--color-text-secondary); 382 } 383 384 .submit-info { 385 margin-top: 14px; 386 font-size: 12px; 387 color: var(--color-text-secondary); 388 } 389 390 .tag-checkboxes { 391 display: flex; 392 flex-wrap: wrap; 393 gap: 8px; 394 } 395 396 .tag-checkbox { 397 display: inline-flex; 398 align-items: center; 399 gap: 4px; 400 font-size: 13px; 401 color: var(--color-text); 402 cursor: pointer; 403 } 404 405 .tag-checkbox input[type="checkbox"] { width: auto; } 406 407 /* Reply Page */ 408 .parent-comment { 409 background: var(--color-surface); 410 border: 1px solid var(--color-border); 411 padding: 12px 16px; 412 border-radius: var(--radius); 413 margin-bottom: 16px; 414 } 415 416 .parent-header { 417 font-size: 12px; 418 color: var(--color-text-secondary); 419 margin-bottom: 6px; 420 } 421 422 .parent-text { 423 font-size: 13px; 424 border-left: 3px solid var(--color-border); 425 padding-left: 12px; 426 margin: 8px 0; 427 } 428 429 .reply-form textarea { 430 width: 100%; 431 font-family: var(--font-main); 432 font-size: 14px; 433 padding: 10px 12px; 434 border: 1px solid var(--color-border); 435 border-radius: var(--radius); 436 margin-bottom: 8px; 437 resize: vertical; 438 background: var(--color-surface); 439 color: var(--color-text); 440 } 441 442 .cancel-link { 443 margin-left: 12px; 444 color: var(--color-text-secondary); 445 font-size: 13px; 446 } 447 448 /* User Page */ 449 .user-page { padding: 24px 0; } 450 451 .user-header { margin-bottom: 20px; } 452 .user-header h2 { font-size: 18px; margin-bottom: 4px; } 453 454 .user-stats { font-size: 13px; color: var(--color-text-secondary); } 455 .user-karma { margin-right: 12px; } 456 457 .user-about { margin-top: 8px; font-size: 13px; line-height: 1.5; } 458 459 .user-tabs { 460 margin-bottom: 16px; 461 padding-bottom: 8px; 462 border-bottom: 1px solid var(--color-border); 463 display: flex; 464 gap: 4px; 465 } 466 467 .user-tab { 468 color: var(--color-text-secondary); 469 padding: 4px 10px; 470 border-radius: var(--radius); 471 font-size: 13px; 472 } 473 .user-tab.active { 474 background: var(--color-border); 475 color: var(--color-text); 476 font-weight: 500; 477 } 478 479 .user-comment { 480 padding: 10px 0; 481 border-bottom: 1px solid var(--color-border); 482 } 483 484 .user-comment-meta { 485 font-size: 12px; 486 color: var(--color-text-secondary); 487 margin-bottom: 4px; 488 } 489 490 .user-comment-text { font-size: 13px; line-height: 1.5; } 491 492 /* Tag Page */ 493 .tag-page h2 { font-size: 18px; margin-bottom: 16px; } 494 495 /* Search */ 496 .search-form { 497 display: flex; 498 gap: 8px; 499 margin-bottom: 20px; 500 } 501 502 .search-form input { 503 flex: 1; 504 font-family: var(--font-main); 505 font-size: 14px; 506 padding: 8px 12px; 507 border: 1px solid var(--color-border); 508 border-radius: var(--radius); 509 background: var(--color-surface); 510 color: var(--color-text); 511 } 512 .search-form input:focus { outline: none; border-color: var(--color-accent); } 513 514 .search-results-list { list-style: none; } 515 516 .search-result { 517 padding: 10px 0; 518 border-bottom: 1px solid var(--color-border); 519 } 520 521 .search-result-title { font-size: 14px; font-weight: 500; display: block; margin-bottom: 4px; } 522 .search-result-meta { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; } 523 .search-result-meta span { margin-right: 10px; } 524 .search-result-text { font-size: 13px; color: var(--color-text-secondary); } 525 526 /* Messages */ 527 .error-message { 528 background: rgba(220, 38, 38, 0.08); 529 border: 1px solid rgba(220, 38, 38, 0.3); 530 color: var(--color-error); 531 padding: 10px 14px; 532 border-radius: var(--radius); 533 margin-bottom: 16px; 534 font-size: 13px; 535 } 536 537 .success-message { 538 background: rgba(22, 163, 74, 0.08); 539 border: 1px solid rgba(22, 163, 74, 0.3); 540 color: var(--color-success); 541 padding: 10px 14px; 542 border-radius: var(--radius); 543 margin-bottom: 16px; 544 font-size: 13px; 545 } 546 547 .field-error { 548 color: var(--color-error); 549 font-size: 12px; 550 margin-top: 4px; 551 min-height: 0; 552 } 553 554 input.invalid, 555 textarea.invalid, 556 select.invalid { 557 border-color: var(--color-error); 558 } 559 560 input.valid, 561 textarea.valid, 562 select.valid { 563 border-color: var(--color-success); 564 } 565 566 .empty-message { 567 color: var(--color-text-secondary); 568 font-style: italic; 569 padding: 24px 0; 570 text-align: center; 571 } 572 573 /* Settings */ 574 .settings-page { max-width: 520px; padding: 24px 0; } 575 576 /* Footer */ 577 .site-footer { 578 max-width: var(--max-width); 579 margin: 24px auto; 580 padding: 12px 16px; 581 border-top: 1px solid var(--color-border); 582 text-align: center; 583 font-size: 12px; 584 } 585 .site-footer a { color: var(--color-text-secondary); } 586 587 /* Loading indicators */ 588 .loading-indicator { 589 color: var(--color-text-secondary); 590 font-size: 0.875rem; 591 padding: 4px 0; 592 } 593 594 /* Responsive */ 595 @media (max-width: 640px) { 596 :root { --max-width: 100%; } 597 .nav-main { padding: 8px 12px; gap: 8px; } 598 .container { padding: 12px; } 599 }