styles.css (16791B)
1 :root { 2 --snow: #fefefe; 3 --ice-blue: #f9fbfd; 4 --warm-beige: #fcfcfb; 5 --canvas: #fefefe; 6 --paper: #faf9f7; 7 --text-soft: #3a424c; 8 --text-muted: #6b7580; 9 --text-heading: #2a3340; 10 --accent: #7a9bb8; 11 --accent-hover: #5f82a0; 12 --border-soft: rgba(122, 155, 184, 0.2); 13 --shadow-soft: 0 4px 24px rgba(42, 51, 64, 0.06); 14 --radius-btn: 10px; 15 --surface-glass: rgba(255, 255, 255, 0.65); 16 --font-mono: 'JetBrains Mono', Menlo, Consolas, monospace; 17 --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; 18 } 19 20 *, 21 *::before, 22 *::after { 23 box-sizing: border-box; 24 } 25 26 html, 27 body { 28 margin: 0; 29 height: 100%; 30 } 31 32 body { 33 font-family: var(--font-mono); 34 font-size: 15px; 35 color: var(--text-soft); 36 background: linear-gradient( 37 180deg, 38 var(--canvas) 0%, 39 var(--snow) 40%, 40 var(--ice-blue) 78%, 41 var(--warm-beige) 100% 42 ); 43 background-attachment: fixed; 44 line-height: 1.5; 45 -webkit-font-smoothing: antialiased; 46 } 47 48 #root { 49 min-height: 100%; 50 } 51 52 .app { 53 display: flex; 54 flex-direction: column; 55 min-height: 100vh; 56 max-width: none; 57 width: 100%; 58 margin: 0 auto; 59 padding: 1.25rem 1.5rem 1rem; 60 } 61 62 .app-header { 63 display: flex; 64 flex-wrap: wrap; 65 align-items: flex-end; 66 justify-content: space-between; 67 gap: 1rem; 68 margin-bottom: 1.25rem; 69 } 70 71 .app-title { 72 margin: 0; 73 font-family: var(--font-serif); 74 font-size: 2rem; 75 font-weight: 600; 76 color: var(--text-heading); 77 letter-spacing: 0.02em; 78 } 79 80 .app-subtitle { 81 margin: 0.25rem 0 0; 82 font-family: var(--font-mono); 83 font-size: 0.85rem; 84 color: var(--text-muted); 85 font-weight: 400; 86 } 87 88 .mode-switch { 89 display: inline-flex; 90 margin-top: 0.75rem; 91 padding: 0.2rem; 92 background: var(--surface-glass); 93 border: 1px solid var(--border-soft); 94 border-radius: 999px; 95 gap: 0.15rem; 96 backdrop-filter: blur(6px); 97 } 98 99 .mode-switch__btn { 100 font-family: var(--font-mono); 101 font-size: 0.72rem; 102 padding: 0.4rem 0.85rem; 103 border: none; 104 border-radius: 999px; 105 background: transparent; 106 color: var(--text-muted); 107 cursor: pointer; 108 transition: 109 background 0.2s ease, 110 color 0.2s ease, 111 box-shadow 0.2s ease; 112 } 113 114 .mode-switch__btn:hover { 115 color: var(--text-soft); 116 } 117 118 .mode-switch__btn.is-active { 119 background: rgba(255, 255, 255, 0.92); 120 color: var(--text-heading); 121 box-shadow: 0 1px 4px rgba(42, 51, 64, 0.06); 122 } 123 124 .toolbar { 125 display: flex; 126 flex-wrap: wrap; 127 gap: 0.5rem; 128 } 129 130 .btn { 131 font-family: var(--font-mono); 132 font-size: 0.8rem; 133 padding: 0.5rem 1rem; 134 border: 1px solid var(--border-soft); 135 border-radius: var(--radius-btn); 136 background: var(--surface-glass); 137 color: var(--text-soft); 138 cursor: pointer; 139 transition: 140 background 0.2s ease, 141 border-color 0.2s ease, 142 box-shadow 0.2s ease, 143 transform 0.15s ease; 144 box-shadow: 0 1px 2px rgba(42, 51, 64, 0.03); 145 backdrop-filter: blur(6px); 146 } 147 148 .btn:hover { 149 background: rgba(255, 255, 255, 0.88); 150 border-color: rgba(122, 155, 184, 0.35); 151 box-shadow: var(--shadow-soft); 152 transform: translateY(-1px); 153 } 154 155 .btn:active { 156 transform: translateY(0); 157 } 158 159 .btn-ghost:hover { 160 background: rgba(245, 240, 232, 0.9); 161 } 162 163 .btn-icon { 164 display: inline-flex; 165 align-items: center; 166 justify-content: center; 167 padding: 0.55rem; 168 min-width: 2.25rem; 169 min-height: 2.25rem; 170 } 171 172 .btn-icon svg { 173 width: 1.15rem; 174 height: 1.15rem; 175 flex-shrink: 0; 176 color: var(--text-soft); 177 transition: color 0.2s ease; 178 } 179 180 .btn-icon:hover svg, 181 .btn-icon:focus-visible svg { 182 color: var(--accent-hover); 183 } 184 185 .btn-icon:focus-visible { 186 outline: 2px solid rgba(122, 155, 184, 0.45); 187 outline-offset: 2px; 188 } 189 190 .file-input-hidden { 191 position: absolute; 192 width: 1px; 193 height: 1px; 194 padding: 0; 195 margin: -1px; 196 overflow: hidden; 197 clip: rect(0, 0, 0, 0); 198 white-space: nowrap; 199 border: 0; 200 } 201 202 .app-layout { 203 display: grid; 204 grid-template-columns: 1fr auto 1fr; 205 gap: 0; 206 flex: 1; 207 min-height: 0; 208 } 209 210 .layout-divider { 211 position: relative; 212 align-self: stretch; 213 width: 2rem; 214 flex-shrink: 0; 215 pointer-events: none; 216 } 217 218 .layout-divider::before { 219 content: ''; 220 position: absolute; 221 top: 0; 222 bottom: 0; 223 left: 50%; 224 width: 1px; 225 transform: translateX(-50%); 226 background: linear-gradient( 227 to bottom, 228 transparent 0%, 229 rgba(122, 155, 184, 0.12) 12%, 230 rgba(122, 155, 184, 0.32) 50%, 231 rgba(122, 155, 184, 0.12) 88%, 232 transparent 100% 233 ); 234 } 235 236 .layout-divider::after { 237 content: ''; 238 position: absolute; 239 top: 50%; 240 left: 50%; 241 width: 6px; 242 height: 6px; 243 transform: translate(-50%, -50%); 244 border-radius: 50%; 245 background: radial-gradient( 246 circle at 35% 35%, 247 #ffffff 0%, 248 rgba(232, 240, 247, 0.95) 45%, 249 rgba(122, 155, 184, 0.25) 100% 250 ); 251 box-shadow: 252 0 0 0 1px rgba(122, 155, 184, 0.15), 253 0 0 14px rgba(232, 240, 247, 0.9); 254 } 255 256 @media (max-width: 768px) { 257 .app-layout { 258 grid-template-columns: 1fr; 259 grid-template-rows: minmax(240px, 1fr) auto minmax(240px, 1fr); 260 } 261 262 .layout-divider { 263 width: 100%; 264 height: 2rem; 265 margin: 0.5rem 0; 266 } 267 268 .layout-divider::before { 269 top: 50%; 270 bottom: auto; 271 left: 0; 272 right: 0; 273 width: auto; 274 height: 1px; 275 transform: translateY(-50%); 276 background: linear-gradient( 277 to right, 278 transparent 0%, 279 rgba(122, 155, 184, 0.12) 12%, 280 rgba(122, 155, 184, 0.32) 50%, 281 rgba(122, 155, 184, 0.12) 88%, 282 transparent 100% 283 ); 284 } 285 286 .app { 287 padding: 1rem; 288 } 289 290 .app-title { 291 font-size: 1.6rem; 292 } 293 } 294 295 .panel { 296 display: flex; 297 flex-direction: column; 298 background: transparent; 299 overflow: hidden; 300 min-height: 320px; 301 } 302 303 .panel-editor, 304 .panel-preview { 305 min-height: 0; 306 } 307 308 @media (min-width: 769px) { 309 .panel { 310 min-height: calc(100vh - 11rem); 311 } 312 313 .panel-editor .editor { 314 min-height: 0; 315 } 316 } 317 318 .panel-label { 319 font-family: var(--font-mono); 320 font-size: 0.7rem; 321 text-transform: uppercase; 322 letter-spacing: 0.12em; 323 color: var(--text-muted); 324 opacity: 0.75; 325 padding: 0.5rem 0.75rem 0.35rem; 326 } 327 328 .panel-editor .editor { 329 flex: 1; 330 width: 100%; 331 min-height: 280px; 332 margin: 0; 333 padding: 0.5rem 0.75rem 1.25rem; 334 border: none; 335 background: transparent; 336 font-family: var(--font-mono); 337 font-size: 0.9rem; 338 line-height: 1.65; 339 color: var(--text-soft); 340 caret-color: var(--accent); 341 resize: none; 342 outline: none; 343 overflow-y: auto; 344 } 345 346 .panel-editor .editor:focus { 347 outline: none; 348 box-shadow: 0 0 0 1px rgba(122, 155, 184, 0.2); 349 } 350 351 .panel-editor .editor::placeholder { 352 color: var(--text-muted); 353 opacity: 0.6; 354 } 355 356 .preview-paper { 357 flex: 1; 358 overflow-y: auto; 359 min-height: 0; 360 padding: 0.5rem 0.75rem 1.5rem; 361 font-family: var(--font-serif); 362 font-size: 1.15rem; 363 line-height: 1.75; 364 color: var(--text-soft); 365 transition: opacity 0.2s ease; 366 } 367 368 .preview-paper.preview-updating { 369 opacity: 0.72; 370 } 371 372 .preview-paper h1, 373 .preview-paper h2, 374 .preview-paper h3, 375 .preview-paper h4 { 376 font-family: var(--font-serif); 377 color: var(--text-heading); 378 font-weight: 600; 379 margin-top: 1.25em; 380 margin-bottom: 0.5em; 381 line-height: 1.3; 382 } 383 384 .preview-paper h1 { 385 font-size: 1.85rem; 386 margin-top: 0; 387 } 388 389 .preview-paper h2 { 390 font-size: 1.45rem; 391 } 392 393 .preview-paper h3 { 394 font-size: 1.2rem; 395 } 396 397 .preview-paper p { 398 margin: 0.75em 0; 399 } 400 401 .preview-paper ul, 402 .preview-paper ol { 403 margin: 0.75em 0; 404 padding-left: 1.5em; 405 } 406 407 .preview-paper li { 408 margin: 0.35em 0; 409 } 410 411 .preview-paper blockquote { 412 margin: 1em 0; 413 padding: 0.5em 1em; 414 border-left: 3px solid var(--accent); 415 background: rgba(232, 240, 247, 0.75); 416 color: var(--text-muted); 417 font-style: italic; 418 } 419 420 .preview-paper code { 421 font-family: var(--font-mono); 422 font-size: 0.85em; 423 background: var(--ice-blue); 424 padding: 0.15em 0.4em; 425 border-radius: 4px; 426 } 427 428 .preview-paper pre { 429 margin: 1em 0; 430 padding: 1em 1.25em; 431 background: rgba(238, 242, 246, 0.9); 432 border-radius: 8px; 433 overflow-x: auto; 434 border: 1px solid var(--border-soft); 435 } 436 437 .preview-paper pre code { 438 background: none; 439 padding: 0; 440 font-size: 0.8rem; 441 } 442 443 .preview-paper a { 444 color: var(--accent-hover); 445 text-decoration: none; 446 border-bottom: 1px solid rgba(95, 130, 160, 0.3); 447 } 448 449 .preview-paper a:hover { 450 border-bottom-color: var(--accent-hover); 451 } 452 453 .preview-paper hr { 454 border: none; 455 border-top: 1px solid var(--border-soft); 456 margin: 1.5em 0; 457 } 458 459 .preview-paper strong { 460 font-weight: 600; 461 color: var(--text-heading); 462 } 463 464 .org-badge { 465 display: inline-flex; 466 align-items: center; 467 padding: 0.15rem 0.45rem; 468 border-radius: 999px; 469 font-family: var(--font-mono); 470 font-size: 0.72rem; 471 font-weight: 700; 472 letter-spacing: 0.04em; 473 margin-right: 0.45rem; 474 vertical-align: middle; 475 } 476 477 .org-todo { 478 background: #f3e8eb; 479 color: #7a4a52; 480 } 481 482 .org-done { 483 background: #e5efe8; 484 color: #3d5c4a; 485 } 486 487 .app-layout--with-outline { 488 grid-template-columns: 10.5rem 1fr auto 1fr; 489 } 490 491 .org-outline { 492 display: flex; 493 flex-direction: column; 494 min-height: 0; 495 padding: 0.35rem 0.5rem 0.75rem; 496 border-right: 1px solid var(--border-soft); 497 background: rgba(255, 255, 255, 0.35); 498 overflow-y: auto; 499 } 500 501 .org-outline__title { 502 font-family: var(--font-mono); 503 font-size: 0.68rem; 504 text-transform: uppercase; 505 letter-spacing: 0.1em; 506 color: var(--text-muted); 507 padding: 0.5rem 0.35rem 0.4rem; 508 } 509 510 .org-outline__list { 511 margin: 0; 512 padding: 0; 513 list-style: none; 514 } 515 516 .org-outline__item { 517 margin: 0.15rem 0; 518 } 519 520 .org-outline__link { 521 width: 100%; 522 padding: 0.2rem 0.35rem; 523 border: none; 524 border-radius: 4px; 525 background: transparent; 526 font-family: var(--font-mono); 527 font-size: 0.72rem; 528 line-height: 1.35; 529 text-align: left; 530 color: var(--text-soft); 531 cursor: pointer; 532 } 533 534 .org-outline__link:hover { 535 background: rgba(122, 155, 184, 0.12); 536 color: var(--text-heading); 537 } 538 539 .org-doc-title { 540 margin: 0; 541 padding: 0 0.75rem 0.35rem; 542 font-family: var(--font-serif); 543 font-size: 1.05rem; 544 font-weight: 600; 545 color: var(--text-heading); 546 } 547 548 .panel-editor .org-editor, 549 .panel-editor .cm-host { 550 flex: 1; 551 min-height: 280px; 552 overflow: hidden; 553 } 554 555 .panel-editor .editor--loading { 556 display: flex; 557 align-items: center; 558 justify-content: center; 559 color: var(--text-muted); 560 font-family: var(--font-mono); 561 font-size: 0.8rem; 562 } 563 564 .preview-paper .org-table { 565 width: 100%; 566 border-collapse: collapse; 567 margin: 1rem 0; 568 font-size: 0.95rem; 569 } 570 571 .preview-paper .org-table td, 572 .preview-paper .org-table th { 573 border: 1px solid var(--border-soft); 574 padding: 0.4rem 0.55rem; 575 } 576 577 .preview-paper .org-table tbody tr:nth-child(even) { 578 background: rgba(122, 155, 184, 0.06); 579 } 580 581 .preview-paper .org-heading--1 { 582 margin-top: 0; 583 } 584 585 .preview-paper .org-quote { 586 margin: 1rem 0; 587 padding: 0.65rem 0.9rem; 588 border-left: 3px solid rgba(122, 155, 184, 0.35); 589 background: rgba(232, 240, 247, 0.45); 590 } 591 592 .preview-paper .org-src { 593 margin: 1rem 0; 594 padding: 0.75rem; 595 border-radius: var(--radius-btn); 596 background: rgba(42, 51, 64, 0.04); 597 overflow-x: auto; 598 font-family: var(--font-mono); 599 font-size: 0.82rem; 600 } 601 602 .app-footer { 603 display: flex; 604 flex-direction: column; 605 align-items: center; 606 justify-content: center; 607 gap: 0.5rem; 608 margin-top: 1rem; 609 padding: 0.75rem; 610 font-family: var(--font-mono); 611 font-size: 0.75rem; 612 color: var(--text-muted); 613 } 614 615 .app-footer-stats { 616 display: flex; 617 align-items: center; 618 gap: 0.5rem; 619 } 620 621 .footer-separator { 622 opacity: 0.5; 623 } 624 625 .app-meta { 626 margin: 0; 627 font-size: 0.7rem; 628 color: var(--text-muted); 629 opacity: 0.85; 630 } 631 632 .app-meta a { 633 color: var(--accent-hover); 634 text-decoration: none; 635 border-bottom: 1px solid rgba(95, 130, 160, 0.25); 636 } 637 638 .app-meta a:hover { 639 border-bottom-color: var(--accent-hover); 640 } 641 642 .app-storage-warning { 643 margin: 0; 644 font-size: 0.7rem; 645 color: #8b5a4a; 646 text-align: center; 647 max-width: 28rem; 648 } 649 650 .app-header-top { 651 display: flex; 652 flex-wrap: wrap; 653 align-items: center; 654 gap: 0.5rem 0.75rem; 655 } 656 657 .badge { 658 display: inline-block; 659 padding: 0.15rem 0.55rem; 660 font-size: 0.65rem; 661 font-weight: 500; 662 letter-spacing: 0.04em; 663 text-transform: uppercase; 664 border-radius: 999px; 665 border: 1px solid var(--border-soft); 666 background: var(--surface-glass); 667 color: var(--text-muted); 668 } 669 670 .badge--online { 671 color: var(--accent-hover); 672 border-color: rgba(122, 155, 184, 0.35); 673 } 674 675 .badge--shared { 676 color: #4a6a85; 677 } 678 679 .badge--readonly { 680 color: #6b7580; 681 } 682 683 .badge--editing { 684 color: #3d5c4a; 685 border-color: rgba(61, 92, 74, 0.25); 686 background: #e5efe8; 687 } 688 689 .save-status { 690 font-size: 0.75rem; 691 color: var(--text-muted); 692 align-self: center; 693 } 694 695 .save-status--saved { 696 color: #3d5c4a; 697 } 698 699 .save-status--saving { 700 color: var(--accent); 701 } 702 703 .save-status--error, 704 .save-status--no_permission { 705 color: #8b5a4a; 706 } 707 708 .alert-banner { 709 margin: 0 0 1rem; 710 padding: 0.85rem 1rem; 711 border-radius: var(--radius-btn); 712 border: 1px solid var(--border-soft); 713 background: var(--ice-blue); 714 } 715 716 .alert-banner p { 717 margin: 0; 718 font-size: 0.85rem; 719 } 720 721 .alert-banner__meta { 722 margin-top: 0.35rem !important; 723 font-size: 0.75rem !important; 724 color: var(--text-muted); 725 } 726 727 .alert-banner--warning { 728 background: #fdf8f6; 729 border-color: rgba(139, 90, 74, 0.25); 730 color: #6b4a42; 731 } 732 733 .modal-backdrop { 734 position: fixed; 735 inset: 0; 736 z-index: 100; 737 display: flex; 738 align-items: center; 739 justify-content: center; 740 padding: 1rem; 741 background: rgba(42, 51, 64, 0.25); 742 backdrop-filter: blur(4px); 743 } 744 745 .modal { 746 width: min(100%, 28rem); 747 max-height: 90vh; 748 overflow-y: auto; 749 padding: 1.25rem 1.35rem; 750 border-radius: 14px; 751 border: 1px solid var(--border-soft); 752 background: var(--snow); 753 box-shadow: var(--shadow-soft); 754 } 755 756 .modal__title { 757 margin: 0 0 1rem; 758 font-family: var(--font-serif); 759 font-size: 1.35rem; 760 font-weight: 600; 761 color: var(--text-heading); 762 } 763 764 .modal__actions { 765 display: flex; 766 justify-content: flex-end; 767 gap: 0.5rem; 768 margin-top: 1rem; 769 } 770 771 .share-field { 772 display: flex; 773 flex-direction: column; 774 gap: 0.35rem; 775 margin-bottom: 0.85rem; 776 font-size: 0.8rem; 777 color: var(--text-muted); 778 } 779 780 .share-field input[type='text'] { 781 font-family: var(--font-mono); 782 font-size: 0.8rem; 783 padding: 0.45rem 0.55rem; 784 border: 1px solid var(--border-soft); 785 border-radius: var(--radius-btn); 786 background: var(--paper); 787 color: var(--text-soft); 788 } 789 790 .share-field legend { 791 margin-bottom: 0.35rem; 792 } 793 794 .share-radio { 795 display: flex; 796 align-items: center; 797 gap: 0.4rem; 798 margin-bottom: 0.25rem; 799 color: var(--text-soft); 800 cursor: pointer; 801 } 802 803 .share-copy-row { 804 display: flex; 805 gap: 0.4rem; 806 } 807 808 .share-copy-row input { 809 flex: 1; 810 min-width: 0; 811 } 812 813 .share-error { 814 margin: 0; 815 font-size: 0.8rem; 816 color: #8b5a4a; 817 } 818 819 .share-result__expiry { 820 margin: 0 0 0.85rem; 821 font-size: 0.8rem; 822 color: var(--accent-hover); 823 } 824 825 .version-panel { 826 width: min(100%, 32rem); 827 } 828 829 .version-panel__status { 830 margin: 0 0 0.75rem; 831 font-size: 0.85rem; 832 color: var(--text-muted); 833 } 834 835 .version-list { 836 margin: 0; 837 padding: 0; 838 list-style: none; 839 } 840 841 .version-list__item { 842 display: flex; 843 align-items: center; 844 justify-content: space-between; 845 gap: 0.75rem; 846 padding: 0.5rem 0; 847 border-bottom: 1px solid var(--border-soft); 848 } 849 850 .version-list__item:last-child { 851 border-bottom: none; 852 } 853 854 .version-list__date { 855 font-size: 0.82rem; 856 color: var(--text-soft); 857 } 858 859 .version-list__restore { 860 flex-shrink: 0; 861 font-size: 0.78rem; 862 } 863 864 .mode-switch__experimental { 865 margin-left: 0.35rem; 866 padding: 0.1rem 0.35rem; 867 border-radius: 4px; 868 font-size: 0.62rem; 869 font-weight: 600; 870 letter-spacing: 0.02em; 871 text-transform: uppercase; 872 vertical-align: middle; 873 background: rgba(122, 155, 184, 0.15); 874 color: var(--accent-hover); 875 } 876 877 .doc-title-input { 878 flex: 1; 879 min-width: 8rem; 880 margin: 0; 881 padding: 0; 882 border: none; 883 background: transparent; 884 font-family: var(--font-serif); 885 font-size: 2rem; 886 font-weight: 600; 887 color: var(--text-heading); 888 } 889 890 .doc-title-input:focus { 891 outline: 2px solid rgba(122, 155, 184, 0.35); 892 outline-offset: 2px; 893 border-radius: 4px; 894 } 895 896 .app-layout--preview-only { 897 grid-template-columns: 1fr; 898 } 899 900 .panel-preview--full { 901 min-height: 50vh; 902 } 903 904 .app-footer-stats--inline { 905 margin-top: 0.75rem; 906 text-align: center; 907 font-size: 0.75rem; 908 color: var(--text-muted); 909 } 910 911 .page-loading { 912 text-align: center; 913 padding: 3rem 1rem; 914 color: var(--text-muted); 915 } 916 917 .link-error-page__main { 918 flex: 1; 919 display: flex; 920 flex-direction: column; 921 align-items: center; 922 justify-content: center; 923 gap: 1rem; 924 text-align: center; 925 padding: 2rem 1rem; 926 } 927 928 .link-error-page__main h2 { 929 margin: 0; 930 font-family: var(--font-serif); 931 font-size: 1.5rem; 932 color: var(--text-heading); 933 } 934 935 @media (prefers-reduced-motion: reduce) { 936 .btn, 937 .mode-switch__btn, 938 .preview-paper { 939 transition: none; 940 } 941 942 .btn:hover { 943 transform: none; 944 } 945 946 .preview-paper.preview-updating { 947 opacity: 1; 948 } 949 }